simpo-component-library 3.6.894 → 3.6.895

package/fesm2022/simpo-component-library.mjs

@@ -78,11 +78,11 @@ import { TimelineModule } from 'primeng/timeline';
 
 class ButtonElementComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ButtonElementComponent, isStandalone: true, selector: "simpo-button-element", inputs: { buttonData: "buttonData" }, ngImport: i0, template: "<button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\" *ngIf=\"buttonData?.disabled\">{{buttonData?.text}}</button>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ButtonElementComponent, isStandalone: true, selector: "simpo-button-element", inputs: { buttonData: "buttonData" }, ngImport: i0, template: "<button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\" *ngIf=\"buttonData?.disabled\">{{buttonData?.text}}</button>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonElementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-button-element', standalone: true, imports: [CommonModule, MatButtonModule], template: "<button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\" *ngIf=\"buttonData?.disabled\">{{buttonData?.text}}</button>\r\n" }]
+            args: [{ selector: 'simpo-button-element', standalone: true, imports: [CommonModule, MatButtonModule], template: "<button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\" *ngIf=\"buttonData?.disabled\">{{buttonData?.text}}</button>\n" }]
         }], propDecorators: { buttonData: [{
                 type: Input
             }] } });
@@ -93,11 +93,11 @@ class TextElementComponent {
         this.textLabel = '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextElementComponent, isStandalone: true, selector: "simpo-text-element", inputs: { textData: "textData", textLabel: "textLabel" }, ngImport: i0, template: "<div [innerHTML]=\"textData\" style=\"text-wrap: balance;\" [ngClass]=\"textLabel === 'Heading' ? 'content-side' : 'body-large'\"></div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextElementComponent, isStandalone: true, selector: "simpo-text-element", inputs: { textData: "textData", textLabel: "textLabel" }, ngImport: i0, template: "<div [innerHTML]=\"textData\" style=\"text-wrap: balance;\" [ngClass]=\"textLabel === 'Heading' ? 'content-side' : 'body-large'\"></div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextElementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-text-element', standalone: true, imports: [CommonModule], template: "<div [innerHTML]=\"textData\" style=\"text-wrap: balance;\" [ngClass]=\"textLabel === 'Heading' ? 'content-side' : 'body-large'\"></div>\r\n" }]
+            args: [{ selector: 'simpo-text-element', standalone: true, imports: [CommonModule], template: "<div [innerHTML]=\"textData\" style=\"text-wrap: balance;\" [ngClass]=\"textLabel === 'Heading' ? 'content-side' : 'body-large'\"></div>\n" }]
         }], propDecorators: { textData: [{
                 type: Input
             }], textLabel: [{
@@ -1503,7 +1503,7 @@ class TextEditorComponent {
             .run();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextEditorComponent, isStandalone: true, selector: "simpo-text-editor", inputs: { value: "value", editable: "editable", isRTE: "isRTE", sectionId: "sectionId", label: "label", type: "type", inputTextIndex: "inputTextIndex", itemIndex: "itemIndex" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "click": "onHostClick()", "document:mousedown": "onMouseDown($event)" }, properties: { "style.display": "isRTE ? \"\" : \"none\"" } }, viewQueries: [{ propertyName: "editorElement", first: true, predicate: ["editorContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- text-editor.component.html -->\n\n<div class=\"editor-container\" *ngIf=\"editable; else viewMode\">\n\n    <!-- FLOATING TOOLBAR -->\n    <div class=\"toolbar\" *ngIf=\"showToolbar\" [style.top.px]=\"toolbarY\" [style.left.px]=\"toolbarX\" cdkDrag>\n      <button class=\"tool drag-handle w-auto\" cdkDragHandle>\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n          class=\"lucide lucide-grip-vertical\">\n          <circle cx=\"9\" cy=\"12\" r=\"1\" />\n          <circle cx=\"9\" cy=\"5\" r=\"1\" />\n          <circle cx=\"9\" cy=\"19\" r=\"1\" />\n          <circle cx=\"15\" cy=\"12\" r=\"1\" />\n          <circle cx=\"15\" cy=\"5\" r=\"1\" />\n          <circle cx=\"15\" cy=\"19\" r=\"1\" />\n        </svg>\n      </button>\n      <mat-form-field appearance=\"outline\" class=\"font-size-field\">\n\n        <mat-select [value]=\"selectedFontSize\" (selectionChange)=\"changeFontSize($event.value)\" disableOptionCentering>\n\n          <mat-option value=\"\">\n            Default\n          </mat-option>\n\n          <mat-option value=\"clamp(0.75rem, 2vw, 1rem)\">\n            14\n          </mat-option>\n\n          <mat-option value=\"clamp(0.75rem, 2vw, 1.25rem)\">\n            16\n          </mat-option>\n\n          <mat-option value=\"clamp(1rem, 3vw, 1.5rem)\">\n            20\n          </mat-option>\n\n          <mat-option value=\"clamp(1.25rem, 4vw, 2rem)\">\n            24\n          </mat-option>\n          <mat-option value=\"clamp(2rem, 5vw, 3rem)\">\n            32\n          </mat-option>\n          <mat-option value=\"clamp(3.1rem, 7vw, 4.5rem)\">\n            48\n          </mat-option>\n        </mat-select>\n\n      </mat-form-field>\n      <!-- BOLD -->\n      <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('bold')\" (click)=\"toggleBold()\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n          class=\"lucide lucide-bold\">\n          <path d=\"M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8\" />\n        </svg>\n      </button>\n\n      <!-- ITALIC -->\n      <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('italic')\" (click)=\"toggleItalic()\">\n\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n          class=\"lucide lucide-italic\">\n          <line x1=\"19\" x2=\"10\" y1=\"4\" y2=\"4\" />\n          <line x1=\"14\" x2=\"5\" y1=\"20\" y2=\"20\" />\n          <line x1=\"15\" x2=\"9\" y1=\"4\" y2=\"20\" />\n        </svg>\n      </button>\n\n      <!-- UNDERLINE -->\n      <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('underline')\" (click)=\"toggleUnderline()\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n          class=\"lucide lucide-underline\">\n          <path d=\"M6 4v6a6 6 0 0 0 12 0V4\" />\n          <line x1=\"4\" x2=\"20\" y1=\"20\" y2=\"20\" />\n        </svg>\n      </button>\n\n      <!-- ALIGN LEFT -->\n      <button class=\"tool w-auto\" (click)=\"setAlign('left')\">\n\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n          class=\"lucide lucide-align-left\">\n          <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\n          <line x1=\"15\" x2=\"3\" y1=\"12\" y2=\"12\" />\n          <line x1=\"17\" x2=\"3\" y1=\"18\" y2=\"18\" />\n        </svg>\n      </button>\n\n      <!-- ALIGN CENTER -->\n      <button class=\"tool w-auto\" (click)=\"setAlign('center')\">\n\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n          class=\"lucide lucide-align-center\">\n          <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\n          <line x1=\"17\" x2=\"7\" y1=\"12\" y2=\"12\" />\n          <line x1=\"19\" x2=\"5\" y1=\"18\" y2=\"18\" />\n        </svg>\n      </button>\n\n      <!-- ALIGN RIGHT -->\n      <button class=\"tool w-auto\" (click)=\"setAlign('right')\">\n\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n          class=\"lucide lucide-align-right\">\n          <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\n          <line x1=\"21\" x2=\"9\" y1=\"12\" y2=\"12\" />\n          <line x1=\"21\" x2=\"7\" y1=\"18\" y2=\"18\" />\n        </svg>\n      </button>\n\n      <!-- ORDERED LIST -->\n      <button class=\"tool w-auto\" (click)=\"toggleOrderedList()\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n          class=\"lucide lucide-list-ordered\">\n          <line x1=\"10\" x2=\"21\" y1=\"6\" y2=\"6\" />\n          <line x1=\"10\" x2=\"21\" y1=\"12\" y2=\"12\" />\n          <line x1=\"10\" x2=\"21\" y1=\"18\" y2=\"18\" />\n          <path d=\"M4 6h1v4\" />\n          <path d=\"M4 10h2\" />\n          <path d=\"M6 18H4c0-1 2-2 2-3s-1-1.5-2-1\" />\n        </svg>\n      </button>\n      <!-- BULLET LIST -->\n      <button class=\"tool w-auto\" (click)=\"toggleBulletList()\">\n\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n          class=\"lucide lucide-list\">\n          <line x1=\"8\" x2=\"21\" y1=\"6\" y2=\"6\" />\n          <line x1=\"8\" x2=\"21\" y1=\"12\" y2=\"12\" />\n          <line x1=\"8\" x2=\"21\" y1=\"18\" y2=\"18\" />\n          <line x1=\"3\" x2=\"3.01\" y1=\"6\" y2=\"6\" />\n          <line x1=\"3\" x2=\"3.01\" y1=\"12\" y2=\"12\" />\n          <line x1=\"3\" x2=\"3.01\" y1=\"18\" y2=\"18\" />\n        </svg>\n      </button>\n\n      <!-- SOLID / GRADIENT -->\n      <!-- SOLID / GRADIENT -->\n      <div class=\"colorType\">\n\n        <button class=\"solid w-auto\" [class.solidColorSelected]=\"selectedColorType === 'SOLID'\"\n          (mousedown)=\"$event.preventDefault()\" (click)=\"switchToSolid($event)\">\n          Solid\n        </button>\n\n        <button class=\"gradient w-auto\" [class.gradientColorSelected]=\"selectedColorType === 'GRADIENT'\"\n          (mousedown)=\"$event.preventDefault()\" (click)=\"switchToGradient($event)\">\n          Gradient\n        </button>\n\n      </div>\n\n      <!-- SOLID COLOR -->\n      <button class=\"tool color-picker-btn w-auto\" *ngIf=\"selectedColorType === 'SOLID'\">\n\n        <mat-icon>format_color_text</mat-icon>\n\n        <input type=\"color\" class=\"hidden-color-picker\" [(ngModel)]=\"selectedColor\" (click)=\"openColorPicker()\"\n          (input)=\"changeColor()\">\n\n      </button>\n\n      <!-- GRADIENT -->\n      <div class=\"gradient-picker\" *ngIf=\"selectedColorType === 'GRADIENT'\">\n        <input type=\"color\" [(ngModel)]=\"primaryColor\" (click)=\"openColorPicker()\" (input)=\"applyGradient()\" />\n\n        <input type=\"color\" [(ngModel)]=\"secondaryColor\" (click)=\"openColorPicker()\" (input)=\"applyGradient()\" />\n\n      </div>\n\n    </div>\n\n    <!-- TIPTAP EDITOR -->\n    <div #editorContainer class=\"editable-text\">\n    </div>\n\n  </div>\n  <ng-template #viewMode>\n    <div class=\"read-only-text\" [innerHTML]=\"safeHtml\">\n    </div>\n  </ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.editor-container{position:relative;width:100%}.editable-text{cursor:text;width:100%;border:1px solid lightgrey;border-radius:10px}.editable-text ::ng-deep p{margin-bottom:0!important}::ng-deep .ProseMirror ol,::ng-deep .ProseMirror ul{padding-left:2rem;margin-left:0;list-style-position:inside}::ng-deep .ProseMirror li{text-align:inherit;margin-bottom:5px}::ng-deep .ProseMirror li p{display:inline}.ProseMirror{outline:none;min-height:120px;padding:5px}.ProseMirror p{margin:0}.toolbar{position:absolute;left:0;top:0;line-height:inherit!important;display:flex;align-items:center;gap:5px;background:#fff;padding:8px 14px;border-radius:22px;z-index:100000;box-shadow:#00000029 0 1px 4px;max-width:calc(100vw - 20px);overflow-x:auto;box-sizing:border-box}.tool{background:none;border:none;padding:5px 8px;cursor:pointer;display:flex;align-items:center}.tool:hover{background:#eee;border-radius:5px}.selectedTool{background:var(--primary-bg-color)!important;color:#fff;border-radius:5px}.color-picker-btn{position:relative}.color-picker-btn mat-icon{font-size:22px!important}.hidden-color-picker{position:absolute;inset:0;opacity:0;cursor:pointer}.gradient-text{background:linear-gradient(to right,var(--gradient-start),var(--gradient-end));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent;display:inline-block}.colorType{display:flex;border:1px solid #E9E9E9;border-radius:9px;overflow:hidden}.colorType button{font-size:12px!important;padding:7px 9px!important;border:none;background:#fff;cursor:pointer}.solid{border-right:1px solid #E9E9E9!important}.solidColorSelected,.gradientColorSelected{background:var(--primary-bg-color)!important;color:#fff}.gradient-picker{display:flex;gap:5px}.gradient-picker input{width:32px;height:32px;border:none;padding:0;cursor:pointer}.white-space-nowrap{white-space:nowrap}.font-size-field{width:120px;border:1px solid lightgrey;border-radius:10px}::ng-deep .font-size-field .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .font-size-field .mdc-notched-outline{display:none}::ng-deep .font-size-field .mat-mdc-text-field-wrapper{background:transparent!important;padding-left:8px!important;padding-right:8px!important;height:36px!important}::ng-deep .font-size-field .mat-mdc-select-value{font-size:14px;font-weight:600}::ng-deep .mat-mdc-select-panel{border-radius:12px!important}@media screen and (max-width: 475px){.toolbar{max-width:95%;flex-wrap:wrap;row-gap:10px}}@media screen and (max-width: 768px){.toolbar{width:max-content;max-width:calc(100vw - 20px);flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "ngmodule", type: MatSelectModule }, { kind: "component", type: i12.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatFormFieldModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextEditorComponent, isStandalone: true, selector: "simpo-text-editor", inputs: { value: "value", editable: "editable", isRTE: "isRTE", sectionId: "sectionId", label: "label", type: "type", inputTextIndex: "inputTextIndex", itemIndex: "itemIndex" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "click": "onHostClick()", "document:mousedown": "onMouseDown($event)" }, properties: { "style.display": "isRTE ? \"\" : \"none\"" } }, viewQueries: [{ propertyName: "editorElement", first: true, predicate: ["editorContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- text-editor.component.html -->\r\n\r\n<div class=\"editor-container\" *ngIf=\"editable; else viewMode\">\r\n\r\n    <!-- FLOATING TOOLBAR -->\r\n    <div class=\"toolbar\" *ngIf=\"showToolbar\" [style.top.px]=\"toolbarY\" [style.left.px]=\"toolbarX\" cdkDrag>\r\n      <button class=\"tool drag-handle w-auto\" cdkDragHandle>\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"lucide lucide-grip-vertical\">\r\n          <circle cx=\"9\" cy=\"12\" r=\"1\" />\r\n          <circle cx=\"9\" cy=\"5\" r=\"1\" />\r\n          <circle cx=\"9\" cy=\"19\" r=\"1\" />\r\n          <circle cx=\"15\" cy=\"12\" r=\"1\" />\r\n          <circle cx=\"15\" cy=\"5\" r=\"1\" />\r\n          <circle cx=\"15\" cy=\"19\" r=\"1\" />\r\n        </svg>\r\n      </button>\r\n      <mat-form-field appearance=\"outline\" class=\"font-size-field\">\r\n\r\n        <mat-select [value]=\"selectedFontSize\" (selectionChange)=\"changeFontSize($event.value)\" disableOptionCentering>\r\n\r\n          <mat-option value=\"\">\r\n            Default\r\n          </mat-option>\r\n\r\n          <mat-option value=\"clamp(0.75rem, 2vw, 1rem)\">\r\n            14\r\n          </mat-option>\r\n\r\n          <mat-option value=\"clamp(0.75rem, 2vw, 1.25rem)\">\r\n            16\r\n          </mat-option>\r\n\r\n          <mat-option value=\"clamp(1rem, 3vw, 1.5rem)\">\r\n            20\r\n          </mat-option>\r\n\r\n          <mat-option value=\"clamp(1.25rem, 4vw, 2rem)\">\r\n            24\r\n          </mat-option>\r\n          <mat-option value=\"clamp(2rem, 5vw, 3rem)\">\r\n            32\r\n          </mat-option>\r\n          <mat-option value=\"clamp(3.1rem, 7vw, 4.5rem)\">\r\n            48\r\n          </mat-option>\r\n        </mat-select>\r\n\r\n      </mat-form-field>\r\n      <!-- BOLD -->\r\n      <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('bold')\" (click)=\"toggleBold()\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"lucide lucide-bold\">\r\n          <path d=\"M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8\" />\r\n        </svg>\r\n      </button>\r\n\r\n      <!-- ITALIC -->\r\n      <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('italic')\" (click)=\"toggleItalic()\">\r\n\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"lucide lucide-italic\">\r\n          <line x1=\"19\" x2=\"10\" y1=\"4\" y2=\"4\" />\r\n          <line x1=\"14\" x2=\"5\" y1=\"20\" y2=\"20\" />\r\n          <line x1=\"15\" x2=\"9\" y1=\"4\" y2=\"20\" />\r\n        </svg>\r\n      </button>\r\n\r\n      <!-- UNDERLINE -->\r\n      <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('underline')\" (click)=\"toggleUnderline()\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"lucide lucide-underline\">\r\n          <path d=\"M6 4v6a6 6 0 0 0 12 0V4\" />\r\n          <line x1=\"4\" x2=\"20\" y1=\"20\" y2=\"20\" />\r\n        </svg>\r\n      </button>\r\n\r\n      <!-- ALIGN LEFT -->\r\n      <button class=\"tool w-auto\" (click)=\"setAlign('left')\">\r\n\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"lucide lucide-align-left\">\r\n          <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n          <line x1=\"15\" x2=\"3\" y1=\"12\" y2=\"12\" />\r\n          <line x1=\"17\" x2=\"3\" y1=\"18\" y2=\"18\" />\r\n        </svg>\r\n      </button>\r\n\r\n      <!-- ALIGN CENTER -->\r\n      <button class=\"tool w-auto\" (click)=\"setAlign('center')\">\r\n\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"lucide lucide-align-center\">\r\n          <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n          <line x1=\"17\" x2=\"7\" y1=\"12\" y2=\"12\" />\r\n          <line x1=\"19\" x2=\"5\" y1=\"18\" y2=\"18\" />\r\n        </svg>\r\n      </button>\r\n\r\n      <!-- ALIGN RIGHT -->\r\n      <button class=\"tool w-auto\" (click)=\"setAlign('right')\">\r\n\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"lucide lucide-align-right\">\r\n          <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n          <line x1=\"21\" x2=\"9\" y1=\"12\" y2=\"12\" />\r\n          <line x1=\"21\" x2=\"7\" y1=\"18\" y2=\"18\" />\r\n        </svg>\r\n      </button>\r\n\r\n      <!-- ORDERED LIST -->\r\n      <button class=\"tool w-auto\" (click)=\"toggleOrderedList()\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"lucide lucide-list-ordered\">\r\n          <line x1=\"10\" x2=\"21\" y1=\"6\" y2=\"6\" />\r\n          <line x1=\"10\" x2=\"21\" y1=\"12\" y2=\"12\" />\r\n          <line x1=\"10\" x2=\"21\" y1=\"18\" y2=\"18\" />\r\n          <path d=\"M4 6h1v4\" />\r\n          <path d=\"M4 10h2\" />\r\n          <path d=\"M6 18H4c0-1 2-2 2-3s-1-1.5-2-1\" />\r\n        </svg>\r\n      </button>\r\n      <!-- BULLET LIST -->\r\n      <button class=\"tool w-auto\" (click)=\"toggleBulletList()\">\r\n\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"lucide lucide-list\">\r\n          <line x1=\"8\" x2=\"21\" y1=\"6\" y2=\"6\" />\r\n          <line x1=\"8\" x2=\"21\" y1=\"12\" y2=\"12\" />\r\n          <line x1=\"8\" x2=\"21\" y1=\"18\" y2=\"18\" />\r\n          <line x1=\"3\" x2=\"3.01\" y1=\"6\" y2=\"6\" />\r\n          <line x1=\"3\" x2=\"3.01\" y1=\"12\" y2=\"12\" />\r\n          <line x1=\"3\" x2=\"3.01\" y1=\"18\" y2=\"18\" />\r\n        </svg>\r\n      </button>\r\n\r\n      <!-- SOLID / GRADIENT -->\r\n      <!-- SOLID / GRADIENT -->\r\n      <div class=\"colorType\">\r\n\r\n        <button class=\"solid w-auto\" [class.solidColorSelected]=\"selectedColorType === 'SOLID'\"\r\n          (mousedown)=\"$event.preventDefault()\" (click)=\"switchToSolid($event)\">\r\n          Solid\r\n        </button>\r\n\r\n        <button class=\"gradient w-auto\" [class.gradientColorSelected]=\"selectedColorType === 'GRADIENT'\"\r\n          (mousedown)=\"$event.preventDefault()\" (click)=\"switchToGradient($event)\">\r\n          Gradient\r\n        </button>\r\n\r\n      </div>\r\n\r\n      <!-- SOLID COLOR -->\r\n      <button class=\"tool color-picker-btn w-auto\" *ngIf=\"selectedColorType === 'SOLID'\">\r\n\r\n        <mat-icon>format_color_text</mat-icon>\r\n\r\n        <input type=\"color\" class=\"hidden-color-picker\" [(ngModel)]=\"selectedColor\" (click)=\"openColorPicker()\"\r\n          (input)=\"changeColor()\">\r\n\r\n      </button>\r\n\r\n      <!-- GRADIENT -->\r\n      <div class=\"gradient-picker\" *ngIf=\"selectedColorType === 'GRADIENT'\">\r\n        <input type=\"color\" [(ngModel)]=\"primaryColor\" (click)=\"openColorPicker()\" (input)=\"applyGradient()\" />\r\n\r\n        <input type=\"color\" [(ngModel)]=\"secondaryColor\" (click)=\"openColorPicker()\" (input)=\"applyGradient()\" />\r\n\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <!-- TIPTAP EDITOR -->\r\n    <div #editorContainer class=\"editable-text\">\r\n    </div>\r\n\r\n  </div>\r\n  <ng-template #viewMode>\r\n    <div class=\"read-only-text\" [innerHTML]=\"safeHtml\">\r\n    </div>\r\n  </ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.editor-container{position:relative;width:100%}.editable-text{cursor:text;width:100%;border:1px solid lightgrey;border-radius:10px}.editable-text ::ng-deep p{margin-bottom:0!important}::ng-deep .ProseMirror ol,::ng-deep .ProseMirror ul{padding-left:2rem;margin-left:0;list-style-position:inside}::ng-deep .ProseMirror li{text-align:inherit;margin-bottom:5px}::ng-deep .ProseMirror li p{display:inline}.ProseMirror{outline:none;min-height:120px;padding:5px}.ProseMirror p{margin:0}.toolbar{position:absolute;left:0;top:0;line-height:inherit!important;display:flex;align-items:center;gap:5px;background:#fff;padding:8px 14px;border-radius:22px;z-index:100000;box-shadow:#00000029 0 1px 4px;max-width:calc(100vw - 20px);overflow-x:auto;box-sizing:border-box}.tool{background:none;border:none;padding:5px 8px;cursor:pointer;display:flex;align-items:center}.tool:hover{background:#eee;border-radius:5px}.selectedTool{background:var(--primary-bg-color)!important;color:#fff;border-radius:5px}.color-picker-btn{position:relative}.color-picker-btn mat-icon{font-size:22px!important}.hidden-color-picker{position:absolute;inset:0;opacity:0;cursor:pointer}.gradient-text{background:linear-gradient(to right,var(--gradient-start),var(--gradient-end));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent;display:inline-block}.colorType{display:flex;border:1px solid #E9E9E9;border-radius:9px;overflow:hidden}.colorType button{font-size:12px!important;padding:7px 9px!important;border:none;background:#fff;cursor:pointer}.solid{border-right:1px solid #E9E9E9!important}.solidColorSelected,.gradientColorSelected{background:var(--primary-bg-color)!important;color:#fff}.gradient-picker{display:flex;gap:5px}.gradient-picker input{width:32px;height:32px;border:none;padding:0;cursor:pointer}.white-space-nowrap{white-space:nowrap}.font-size-field{width:120px;border:1px solid lightgrey;border-radius:10px}::ng-deep .font-size-field .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .font-size-field .mdc-notched-outline{display:none}::ng-deep .font-size-field .mat-mdc-text-field-wrapper{background:transparent!important;padding-left:8px!important;padding-right:8px!important;height:36px!important}::ng-deep .font-size-field .mat-mdc-select-value{font-size:14px;font-weight:600}::ng-deep .mat-mdc-select-panel{border-radius:12px!important}@media screen and (max-width: 475px){.toolbar{max-width:95%;flex-wrap:wrap;row-gap:10px}}@media screen and (max-width: 768px){.toolbar{width:max-content;max-width:calc(100vw - 20px);flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "ngmodule", type: MatSelectModule }, { kind: "component", type: i12.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatFormFieldModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextEditorComponent, decorators: [{
             type: Component,
@@ -1515,7 +1515,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MatSelectModule,
                         MatFormFieldModule,
                         ContenteditableValueAccessor
-                    ], host: { '[style.display]': 'isRTE ? "" : "none"' }, template: "<!-- text-editor.component.html -->\n\n<div class=\"editor-container\" *ngIf=\"editable; else viewMode\">\n\n    <!-- FLOATING TOOLBAR -->\n    <div class=\"toolbar\" *ngIf=\"showToolbar\" [style.top.px]=\"toolbarY\" [style.left.px]=\"toolbarX\" cdkDrag>\n      <button class=\"tool drag-handle w-auto\" cdkDragHandle>\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n          class=\"lucide lucide-grip-vertical\">\n          <circle cx=\"9\" cy=\"12\" r=\"1\" />\n          <circle cx=\"9\" cy=\"5\" r=\"1\" />\n          <circle cx=\"9\" cy=\"19\" r=\"1\" />\n          <circle cx=\"15\" cy=\"12\" r=\"1\" />\n          <circle cx=\"15\" cy=\"5\" r=\"1\" />\n          <circle cx=\"15\" cy=\"19\" r=\"1\" />\n        </svg>\n      </button>\n      <mat-form-field appearance=\"outline\" class=\"font-size-field\">\n\n        <mat-select [value]=\"selectedFontSize\" (selectionChange)=\"changeFontSize($event.value)\" disableOptionCentering>\n\n          <mat-option value=\"\">\n            Default\n          </mat-option>\n\n          <mat-option value=\"clamp(0.75rem, 2vw, 1rem)\">\n            14\n          </mat-option>\n\n          <mat-option value=\"clamp(0.75rem, 2vw, 1.25rem)\">\n            16\n          </mat-option>\n\n          <mat-option value=\"clamp(1rem, 3vw, 1.5rem)\">\n            20\n          </mat-option>\n\n          <mat-option value=\"clamp(1.25rem, 4vw, 2rem)\">\n            24\n          </mat-option>\n          <mat-option value=\"clamp(2rem, 5vw, 3rem)\">\n            32\n          </mat-option>\n          <mat-option value=\"clamp(3.1rem, 7vw, 4.5rem)\">\n            48\n          </mat-option>\n        </mat-select>\n\n      </mat-form-field>\n      <!-- BOLD -->\n      <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('bold')\" (click)=\"toggleBold()\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n          class=\"lucide lucide-bold\">\n          <path d=\"M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8\" />\n        </svg>\n      </button>\n\n      <!-- ITALIC -->\n      <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('italic')\" (click)=\"toggleItalic()\">\n\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n          class=\"lucide lucide-italic\">\n          <line x1=\"19\" x2=\"10\" y1=\"4\" y2=\"4\" />\n          <line x1=\"14\" x2=\"5\" y1=\"20\" y2=\"20\" />\n          <line x1=\"15\" x2=\"9\" y1=\"4\" y2=\"20\" />\n        </svg>\n      </button>\n\n      <!-- UNDERLINE -->\n      <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('underline')\" (click)=\"toggleUnderline()\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n          class=\"lucide lucide-underline\">\n          <path d=\"M6 4v6a6 6 0 0 0 12 0V4\" />\n          <line x1=\"4\" x2=\"20\" y1=\"20\" y2=\"20\" />\n        </svg>\n      </button>\n\n      <!-- ALIGN LEFT -->\n      <button class=\"tool w-auto\" (click)=\"setAlign('left')\">\n\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n          class=\"lucide lucide-align-left\">\n          <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\n          <line x1=\"15\" x2=\"3\" y1=\"12\" y2=\"12\" />\n          <line x1=\"17\" x2=\"3\" y1=\"18\" y2=\"18\" />\n        </svg>\n      </button>\n\n      <!-- ALIGN CENTER -->\n      <button class=\"tool w-auto\" (click)=\"setAlign('center')\">\n\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n          class=\"lucide lucide-align-center\">\n          <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\n          <line x1=\"17\" x2=\"7\" y1=\"12\" y2=\"12\" />\n          <line x1=\"19\" x2=\"5\" y1=\"18\" y2=\"18\" />\n        </svg>\n      </button>\n\n      <!-- ALIGN RIGHT -->\n      <button class=\"tool w-auto\" (click)=\"setAlign('right')\">\n\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n          class=\"lucide lucide-align-right\">\n          <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\n          <line x1=\"21\" x2=\"9\" y1=\"12\" y2=\"12\" />\n          <line x1=\"21\" x2=\"7\" y1=\"18\" y2=\"18\" />\n        </svg>\n      </button>\n\n      <!-- ORDERED LIST -->\n      <button class=\"tool w-auto\" (click)=\"toggleOrderedList()\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n          class=\"lucide lucide-list-ordered\">\n          <line x1=\"10\" x2=\"21\" y1=\"6\" y2=\"6\" />\n          <line x1=\"10\" x2=\"21\" y1=\"12\" y2=\"12\" />\n          <line x1=\"10\" x2=\"21\" y1=\"18\" y2=\"18\" />\n          <path d=\"M4 6h1v4\" />\n          <path d=\"M4 10h2\" />\n          <path d=\"M6 18H4c0-1 2-2 2-3s-1-1.5-2-1\" />\n        </svg>\n      </button>\n      <!-- BULLET LIST -->\n      <button class=\"tool w-auto\" (click)=\"toggleBulletList()\">\n\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n          class=\"lucide lucide-list\">\n          <line x1=\"8\" x2=\"21\" y1=\"6\" y2=\"6\" />\n          <line x1=\"8\" x2=\"21\" y1=\"12\" y2=\"12\" />\n          <line x1=\"8\" x2=\"21\" y1=\"18\" y2=\"18\" />\n          <line x1=\"3\" x2=\"3.01\" y1=\"6\" y2=\"6\" />\n          <line x1=\"3\" x2=\"3.01\" y1=\"12\" y2=\"12\" />\n          <line x1=\"3\" x2=\"3.01\" y1=\"18\" y2=\"18\" />\n        </svg>\n      </button>\n\n      <!-- SOLID / GRADIENT -->\n      <!-- SOLID / GRADIENT -->\n      <div class=\"colorType\">\n\n        <button class=\"solid w-auto\" [class.solidColorSelected]=\"selectedColorType === 'SOLID'\"\n          (mousedown)=\"$event.preventDefault()\" (click)=\"switchToSolid($event)\">\n          Solid\n        </button>\n\n        <button class=\"gradient w-auto\" [class.gradientColorSelected]=\"selectedColorType === 'GRADIENT'\"\n          (mousedown)=\"$event.preventDefault()\" (click)=\"switchToGradient($event)\">\n          Gradient\n        </button>\n\n      </div>\n\n      <!-- SOLID COLOR -->\n      <button class=\"tool color-picker-btn w-auto\" *ngIf=\"selectedColorType === 'SOLID'\">\n\n        <mat-icon>format_color_text</mat-icon>\n\n        <input type=\"color\" class=\"hidden-color-picker\" [(ngModel)]=\"selectedColor\" (click)=\"openColorPicker()\"\n          (input)=\"changeColor()\">\n\n      </button>\n\n      <!-- GRADIENT -->\n      <div class=\"gradient-picker\" *ngIf=\"selectedColorType === 'GRADIENT'\">\n        <input type=\"color\" [(ngModel)]=\"primaryColor\" (click)=\"openColorPicker()\" (input)=\"applyGradient()\" />\n\n        <input type=\"color\" [(ngModel)]=\"secondaryColor\" (click)=\"openColorPicker()\" (input)=\"applyGradient()\" />\n\n      </div>\n\n    </div>\n\n    <!-- TIPTAP EDITOR -->\n    <div #editorContainer class=\"editable-text\">\n    </div>\n\n  </div>\n  <ng-template #viewMode>\n    <div class=\"read-only-text\" [innerHTML]=\"safeHtml\">\n    </div>\n  </ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.editor-container{position:relative;width:100%}.editable-text{cursor:text;width:100%;border:1px solid lightgrey;border-radius:10px}.editable-text ::ng-deep p{margin-bottom:0!important}::ng-deep .ProseMirror ol,::ng-deep .ProseMirror ul{padding-left:2rem;margin-left:0;list-style-position:inside}::ng-deep .ProseMirror li{text-align:inherit;margin-bottom:5px}::ng-deep .ProseMirror li p{display:inline}.ProseMirror{outline:none;min-height:120px;padding:5px}.ProseMirror p{margin:0}.toolbar{position:absolute;left:0;top:0;line-height:inherit!important;display:flex;align-items:center;gap:5px;background:#fff;padding:8px 14px;border-radius:22px;z-index:100000;box-shadow:#00000029 0 1px 4px;max-width:calc(100vw - 20px);overflow-x:auto;box-sizing:border-box}.tool{background:none;border:none;padding:5px 8px;cursor:pointer;display:flex;align-items:center}.tool:hover{background:#eee;border-radius:5px}.selectedTool{background:var(--primary-bg-color)!important;color:#fff;border-radius:5px}.color-picker-btn{position:relative}.color-picker-btn mat-icon{font-size:22px!important}.hidden-color-picker{position:absolute;inset:0;opacity:0;cursor:pointer}.gradient-text{background:linear-gradient(to right,var(--gradient-start),var(--gradient-end));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent;display:inline-block}.colorType{display:flex;border:1px solid #E9E9E9;border-radius:9px;overflow:hidden}.colorType button{font-size:12px!important;padding:7px 9px!important;border:none;background:#fff;cursor:pointer}.solid{border-right:1px solid #E9E9E9!important}.solidColorSelected,.gradientColorSelected{background:var(--primary-bg-color)!important;color:#fff}.gradient-picker{display:flex;gap:5px}.gradient-picker input{width:32px;height:32px;border:none;padding:0;cursor:pointer}.white-space-nowrap{white-space:nowrap}.font-size-field{width:120px;border:1px solid lightgrey;border-radius:10px}::ng-deep .font-size-field .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .font-size-field .mdc-notched-outline{display:none}::ng-deep .font-size-field .mat-mdc-text-field-wrapper{background:transparent!important;padding-left:8px!important;padding-right:8px!important;height:36px!important}::ng-deep .font-size-field .mat-mdc-select-value{font-size:14px;font-weight:600}::ng-deep .mat-mdc-select-panel{border-radius:12px!important}@media screen and (max-width: 475px){.toolbar{max-width:95%;flex-wrap:wrap;row-gap:10px}}@media screen and (max-width: 768px){.toolbar{width:max-content;max-width:calc(100vw - 20px);flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}}\n"] }]
+                    ], host: { '[style.display]': 'isRTE ? "" : "none"' }, template: "<!-- text-editor.component.html -->\r\n\r\n<div class=\"editor-container\" *ngIf=\"editable; else viewMode\">\r\n\r\n    <!-- FLOATING TOOLBAR -->\r\n    <div class=\"toolbar\" *ngIf=\"showToolbar\" [style.top.px]=\"toolbarY\" [style.left.px]=\"toolbarX\" cdkDrag>\r\n      <button class=\"tool drag-handle w-auto\" cdkDragHandle>\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"lucide lucide-grip-vertical\">\r\n          <circle cx=\"9\" cy=\"12\" r=\"1\" />\r\n          <circle cx=\"9\" cy=\"5\" r=\"1\" />\r\n          <circle cx=\"9\" cy=\"19\" r=\"1\" />\r\n          <circle cx=\"15\" cy=\"12\" r=\"1\" />\r\n          <circle cx=\"15\" cy=\"5\" r=\"1\" />\r\n          <circle cx=\"15\" cy=\"19\" r=\"1\" />\r\n        </svg>\r\n      </button>\r\n      <mat-form-field appearance=\"outline\" class=\"font-size-field\">\r\n\r\n        <mat-select [value]=\"selectedFontSize\" (selectionChange)=\"changeFontSize($event.value)\" disableOptionCentering>\r\n\r\n          <mat-option value=\"\">\r\n            Default\r\n          </mat-option>\r\n\r\n          <mat-option value=\"clamp(0.75rem, 2vw, 1rem)\">\r\n            14\r\n          </mat-option>\r\n\r\n          <mat-option value=\"clamp(0.75rem, 2vw, 1.25rem)\">\r\n            16\r\n          </mat-option>\r\n\r\n          <mat-option value=\"clamp(1rem, 3vw, 1.5rem)\">\r\n            20\r\n          </mat-option>\r\n\r\n          <mat-option value=\"clamp(1.25rem, 4vw, 2rem)\">\r\n            24\r\n          </mat-option>\r\n          <mat-option value=\"clamp(2rem, 5vw, 3rem)\">\r\n            32\r\n          </mat-option>\r\n          <mat-option value=\"clamp(3.1rem, 7vw, 4.5rem)\">\r\n            48\r\n          </mat-option>\r\n        </mat-select>\r\n\r\n      </mat-form-field>\r\n      <!-- BOLD -->\r\n      <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('bold')\" (click)=\"toggleBold()\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"lucide lucide-bold\">\r\n          <path d=\"M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8\" />\r\n        </svg>\r\n      </button>\r\n\r\n      <!-- ITALIC -->\r\n      <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('italic')\" (click)=\"toggleItalic()\">\r\n\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"lucide lucide-italic\">\r\n          <line x1=\"19\" x2=\"10\" y1=\"4\" y2=\"4\" />\r\n          <line x1=\"14\" x2=\"5\" y1=\"20\" y2=\"20\" />\r\n          <line x1=\"15\" x2=\"9\" y1=\"4\" y2=\"20\" />\r\n        </svg>\r\n      </button>\r\n\r\n      <!-- UNDERLINE -->\r\n      <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('underline')\" (click)=\"toggleUnderline()\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"lucide lucide-underline\">\r\n          <path d=\"M6 4v6a6 6 0 0 0 12 0V4\" />\r\n          <line x1=\"4\" x2=\"20\" y1=\"20\" y2=\"20\" />\r\n        </svg>\r\n      </button>\r\n\r\n      <!-- ALIGN LEFT -->\r\n      <button class=\"tool w-auto\" (click)=\"setAlign('left')\">\r\n\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"lucide lucide-align-left\">\r\n          <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n          <line x1=\"15\" x2=\"3\" y1=\"12\" y2=\"12\" />\r\n          <line x1=\"17\" x2=\"3\" y1=\"18\" y2=\"18\" />\r\n        </svg>\r\n      </button>\r\n\r\n      <!-- ALIGN CENTER -->\r\n      <button class=\"tool w-auto\" (click)=\"setAlign('center')\">\r\n\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"lucide lucide-align-center\">\r\n          <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n          <line x1=\"17\" x2=\"7\" y1=\"12\" y2=\"12\" />\r\n          <line x1=\"19\" x2=\"5\" y1=\"18\" y2=\"18\" />\r\n        </svg>\r\n      </button>\r\n\r\n      <!-- ALIGN RIGHT -->\r\n      <button class=\"tool w-auto\" (click)=\"setAlign('right')\">\r\n\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"lucide lucide-align-right\">\r\n          <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n          <line x1=\"21\" x2=\"9\" y1=\"12\" y2=\"12\" />\r\n          <line x1=\"21\" x2=\"7\" y1=\"18\" y2=\"18\" />\r\n        </svg>\r\n      </button>\r\n\r\n      <!-- ORDERED LIST -->\r\n      <button class=\"tool w-auto\" (click)=\"toggleOrderedList()\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"lucide lucide-list-ordered\">\r\n          <line x1=\"10\" x2=\"21\" y1=\"6\" y2=\"6\" />\r\n          <line x1=\"10\" x2=\"21\" y1=\"12\" y2=\"12\" />\r\n          <line x1=\"10\" x2=\"21\" y1=\"18\" y2=\"18\" />\r\n          <path d=\"M4 6h1v4\" />\r\n          <path d=\"M4 10h2\" />\r\n          <path d=\"M6 18H4c0-1 2-2 2-3s-1-1.5-2-1\" />\r\n        </svg>\r\n      </button>\r\n      <!-- BULLET LIST -->\r\n      <button class=\"tool w-auto\" (click)=\"toggleBulletList()\">\r\n\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"lucide lucide-list\">\r\n          <line x1=\"8\" x2=\"21\" y1=\"6\" y2=\"6\" />\r\n          <line x1=\"8\" x2=\"21\" y1=\"12\" y2=\"12\" />\r\n          <line x1=\"8\" x2=\"21\" y1=\"18\" y2=\"18\" />\r\n          <line x1=\"3\" x2=\"3.01\" y1=\"6\" y2=\"6\" />\r\n          <line x1=\"3\" x2=\"3.01\" y1=\"12\" y2=\"12\" />\r\n          <line x1=\"3\" x2=\"3.01\" y1=\"18\" y2=\"18\" />\r\n        </svg>\r\n      </button>\r\n\r\n      <!-- SOLID / GRADIENT -->\r\n      <!-- SOLID / GRADIENT -->\r\n      <div class=\"colorType\">\r\n\r\n        <button class=\"solid w-auto\" [class.solidColorSelected]=\"selectedColorType === 'SOLID'\"\r\n          (mousedown)=\"$event.preventDefault()\" (click)=\"switchToSolid($event)\">\r\n          Solid\r\n        </button>\r\n\r\n        <button class=\"gradient w-auto\" [class.gradientColorSelected]=\"selectedColorType === 'GRADIENT'\"\r\n          (mousedown)=\"$event.preventDefault()\" (click)=\"switchToGradient($event)\">\r\n          Gradient\r\n        </button>\r\n\r\n      </div>\r\n\r\n      <!-- SOLID COLOR -->\r\n      <button class=\"tool color-picker-btn w-auto\" *ngIf=\"selectedColorType === 'SOLID'\">\r\n\r\n        <mat-icon>format_color_text</mat-icon>\r\n\r\n        <input type=\"color\" class=\"hidden-color-picker\" [(ngModel)]=\"selectedColor\" (click)=\"openColorPicker()\"\r\n          (input)=\"changeColor()\">\r\n\r\n      </button>\r\n\r\n      <!-- GRADIENT -->\r\n      <div class=\"gradient-picker\" *ngIf=\"selectedColorType === 'GRADIENT'\">\r\n        <input type=\"color\" [(ngModel)]=\"primaryColor\" (click)=\"openColorPicker()\" (input)=\"applyGradient()\" />\r\n\r\n        <input type=\"color\" [(ngModel)]=\"secondaryColor\" (click)=\"openColorPicker()\" (input)=\"applyGradient()\" />\r\n\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <!-- TIPTAP EDITOR -->\r\n    <div #editorContainer class=\"editable-text\">\r\n    </div>\r\n\r\n  </div>\r\n  <ng-template #viewMode>\r\n    <div class=\"read-only-text\" [innerHTML]=\"safeHtml\">\r\n    </div>\r\n  </ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.editor-container{position:relative;width:100%}.editable-text{cursor:text;width:100%;border:1px solid lightgrey;border-radius:10px}.editable-text ::ng-deep p{margin-bottom:0!important}::ng-deep .ProseMirror ol,::ng-deep .ProseMirror ul{padding-left:2rem;margin-left:0;list-style-position:inside}::ng-deep .ProseMirror li{text-align:inherit;margin-bottom:5px}::ng-deep .ProseMirror li p{display:inline}.ProseMirror{outline:none;min-height:120px;padding:5px}.ProseMirror p{margin:0}.toolbar{position:absolute;left:0;top:0;line-height:inherit!important;display:flex;align-items:center;gap:5px;background:#fff;padding:8px 14px;border-radius:22px;z-index:100000;box-shadow:#00000029 0 1px 4px;max-width:calc(100vw - 20px);overflow-x:auto;box-sizing:border-box}.tool{background:none;border:none;padding:5px 8px;cursor:pointer;display:flex;align-items:center}.tool:hover{background:#eee;border-radius:5px}.selectedTool{background:var(--primary-bg-color)!important;color:#fff;border-radius:5px}.color-picker-btn{position:relative}.color-picker-btn mat-icon{font-size:22px!important}.hidden-color-picker{position:absolute;inset:0;opacity:0;cursor:pointer}.gradient-text{background:linear-gradient(to right,var(--gradient-start),var(--gradient-end));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent;display:inline-block}.colorType{display:flex;border:1px solid #E9E9E9;border-radius:9px;overflow:hidden}.colorType button{font-size:12px!important;padding:7px 9px!important;border:none;background:#fff;cursor:pointer}.solid{border-right:1px solid #E9E9E9!important}.solidColorSelected,.gradientColorSelected{background:var(--primary-bg-color)!important;color:#fff}.gradient-picker{display:flex;gap:5px}.gradient-picker input{width:32px;height:32px;border:none;padding:0;cursor:pointer}.white-space-nowrap{white-space:nowrap}.font-size-field{width:120px;border:1px solid lightgrey;border-radius:10px}::ng-deep .font-size-field .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .font-size-field .mdc-notched-outline{display:none}::ng-deep .font-size-field .mat-mdc-text-field-wrapper{background:transparent!important;padding-left:8px!important;padding-right:8px!important;height:36px!important}::ng-deep .font-size-field .mat-mdc-select-value{font-size:14px;font-weight:600}::ng-deep .mat-mdc-select-panel{border-radius:12px!important}@media screen and (max-width: 475px){.toolbar{max-width:95%;flex-wrap:wrap;row-gap:10px}}@media screen and (max-width: 768px){.toolbar{width:max-content;max-width:calc(100vw - 20px);flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}}\n"] }]
         }], propDecorators: { value: [{
                 type: Input
             }], valueChange: [{
@@ -2279,11 +2279,11 @@ class HeadingElementComponent {
         this.data = '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeadingElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeadingElementComponent, isStandalone: true, selector: "simpo-heading-element", inputs: { data: "data" }, ngImport: i0, template: "<h2 class=\"heading-large\" [innerHtml]=\"(data || '') | sanitizeHtml\"></h2>\r\n", styles: [""], dependencies: [{ kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeadingElementComponent, isStandalone: true, selector: "simpo-heading-element", inputs: { data: "data" }, ngImport: i0, template: "<h2 class=\"heading-large\" [innerHtml]=\"(data || '') | sanitizeHtml\"></h2>\n", styles: [""], dependencies: [{ kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeadingElementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-heading-element', standalone: true, imports: [SanitizeHtmlPipe], template: "<h2 class=\"heading-large\" [innerHtml]=\"(data || '') | sanitizeHtml\"></h2>\r\n" }]
+            args: [{ selector: 'simpo-heading-element', standalone: true, imports: [SanitizeHtmlPipe], template: "<h2 class=\"heading-large\" [innerHtml]=\"(data || '') | sanitizeHtml\"></h2>\n" }]
         }], propDecorators: { data: [{
                 type: Input
             }] } });
@@ -3892,11 +3892,11 @@ class DeleteHoverElementComponent {
         this._eventService.delete.emit({ index: this.data });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DeleteHoverElementComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DeleteHoverElementComponent, isStandalone: true, selector: "simpo-delete-hover-element", inputs: { index: "index", data: "data" }, outputs: { edit: "edit" }, ngImport: i0, template: "<mat-dialog-content class=\"mat-typography\">\r\n  <section class=\"hover-tab\">\r\n      <div class=\"tabs-section\">\r\n        <div class=\"edit-tab\">\r\n            <button (click)=\"editSection()\">\r\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <g clip-path=\"url(#clip0_1076_52409)\">\r\n                        <path\r\n                            d=\"M2 11.4997V13.9997H4.5L11.8733 6.62638L9.37333 4.12638L2 11.4997ZM13.8067 4.69305C14.0667 4.43305 14.0667 4.01305 13.8067 3.75305L12.2467 2.19305C11.9867 1.93305 11.5667 1.93305 11.3067 2.19305L10.0867 3.41305L12.5867 5.91305L13.8067 4.69305Z\"\r\n                            fill=\"#0267c1\" />\r\n                    </g>\r\n                    <defs>\r\n                        <clipPath id=\"clip0_1076_52409\">\r\n                            <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                        </clipPath>\r\n                    </defs>\r\n                </svg>\r\n                <span class=\"edit-text\">\r\n                    Edit\r\n                </span>\r\n            </button>\r\n        </div>\r\n        <div class=\"vr-line\"></div>\r\n          <div class=\"remainin-sections\"  *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header'\">\r\n              <button class=\"up-arrow\" (click)=\"deleteSection()\">\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#434443\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n                      class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n                      <path fill-rule=\"evenodd\"\r\n                          d=\"M9 2c-.37877 0-.72503.214-.89443.55279L7.38197 4H4c-.55228 0-1 .44772-1 1s.44772 1 1 1v10c0 1.1046.89543 2 2 2h8c1.1046 0 2-.8954 2-2V6c.5523 0 1-.44772 1-1s-.4477-1-1-1h-3.382l-.7236-1.44721C11.725 2.214 11.3788 2 11 2H9ZM7 8c0-.55228.44772-1 1-1s1 .44772 1 1v6c0 .5523-.44772 1-1 1s-1-.4477-1-1V8Zm5-1c-.5523 0-1 .44772-1 1v6c0 .5523.4477 1 1 1s1-.4477 1-1V8c0-.55228-.4477-1-1-1Z\"\r\n                          clip-rule=\"evenodd\"></path>\r\n                  </svg>\r\n              </button>\r\n          </div>\r\n      </div>\r\n  </section>\r\n</mat-dialog-content>\r\n", styles: [".hover-tab{display:flex;justify-content:flex-end;align-items:center;position:absolute;right:5px;top:20px;height:auto}.edit-tab{display:flex;align-items:center;justify-content:center}.edit-tab button{border:none;outline:none;cursor:pointer;background-color:transparent;padding:0;display:flex;justify-content:center;align-items:center}.edit-text{font-size:14px;color:#0267c1;font-weight:500;position:relative;left:4px}.vr-line{border-left:1px solid #e8e8e8;height:25px;margin-left:14px}.tabs-section{width:auto;padding:15px 10px;box-shadow:#63636333 0 2px 8px;border-radius:6px;display:flex;align-items:center;height:46px;background-color:#fff;z-index:1001}.remainin-sections{display:flex;justify-content:center;align-items:center;position:relative;right:6px}.remainin-sections :is(.copy,.up-arrow){border:none;outline:none;cursor:pointer;background-color:transparent;padding:0}.remainin-sections :is(.copy:hover,.up-arrow:hover) svg{fill:#0267c1}.up-arrow{margin-left:10px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DeleteHoverElementComponent, isStandalone: true, selector: "simpo-delete-hover-element", inputs: { index: "index", data: "data" }, outputs: { edit: "edit" }, ngImport: i0, template: "<mat-dialog-content class=\"mat-typography\">\n  <section class=\"hover-tab\">\n      <div class=\"tabs-section\">\n        <div class=\"edit-tab\">\n            <button (click)=\"editSection()\">\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <g clip-path=\"url(#clip0_1076_52409)\">\n                        <path\n                            d=\"M2 11.4997V13.9997H4.5L11.8733 6.62638L9.37333 4.12638L2 11.4997ZM13.8067 4.69305C14.0667 4.43305 14.0667 4.01305 13.8067 3.75305L12.2467 2.19305C11.9867 1.93305 11.5667 1.93305 11.3067 2.19305L10.0867 3.41305L12.5867 5.91305L13.8067 4.69305Z\"\n                            fill=\"#0267c1\" />\n                    </g>\n                    <defs>\n                        <clipPath id=\"clip0_1076_52409\">\n                            <rect width=\"18\" height=\"18\" fill=\"white\" />\n                        </clipPath>\n                    </defs>\n                </svg>\n                <span class=\"edit-text\">\n                    Edit\n                </span>\n            </button>\n        </div>\n        <div class=\"vr-line\"></div>\n          <div class=\"remainin-sections\"  *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header'\">\n              <button class=\"up-arrow\" (click)=\"deleteSection()\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#434443\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\n                      class=\"icon w-5 h-5\" aria-hidden=\"true\">\n                      <path fill-rule=\"evenodd\"\n                          d=\"M9 2c-.37877 0-.72503.214-.89443.55279L7.38197 4H4c-.55228 0-1 .44772-1 1s.44772 1 1 1v10c0 1.1046.89543 2 2 2h8c1.1046 0 2-.8954 2-2V6c.5523 0 1-.44772 1-1s-.4477-1-1-1h-3.382l-.7236-1.44721C11.725 2.214 11.3788 2 11 2H9ZM7 8c0-.55228.44772-1 1-1s1 .44772 1 1v6c0 .5523-.44772 1-1 1s-1-.4477-1-1V8Zm5-1c-.5523 0-1 .44772-1 1v6c0 .5523.4477 1 1 1s1-.4477 1-1V8c0-.55228-.4477-1-1-1Z\"\n                          clip-rule=\"evenodd\"></path>\n                  </svg>\n              </button>\n          </div>\n      </div>\n  </section>\n</mat-dialog-content>\n", styles: [".hover-tab{display:flex;justify-content:flex-end;align-items:center;position:absolute;right:5px;top:20px;height:auto}.edit-tab{display:flex;align-items:center;justify-content:center}.edit-tab button{border:none;outline:none;cursor:pointer;background-color:transparent;padding:0;display:flex;justify-content:center;align-items:center}.edit-text{font-size:14px;color:#0267c1;font-weight:500;position:relative;left:4px}.vr-line{border-left:1px solid #e8e8e8;height:25px;margin-left:14px}.tabs-section{width:auto;padding:15px 10px;box-shadow:#63636333 0 2px 8px;border-radius:6px;display:flex;align-items:center;height:46px;background-color:#fff;z-index:1001}.remainin-sections{display:flex;justify-content:center;align-items:center;position:relative;right:6px}.remainin-sections :is(.copy,.up-arrow){border:none;outline:none;cursor:pointer;background-color:transparent;padding:0}.remainin-sections :is(.copy:hover,.up-arrow:hover) svg{fill:#0267c1}.up-arrow{margin-left:10px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DeleteHoverElementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-delete-hover-element', standalone: true, imports: [MatIconModule, MatDialogModule, CommonModule], template: "<mat-dialog-content class=\"mat-typography\">\r\n  <section class=\"hover-tab\">\r\n      <div class=\"tabs-section\">\r\n        <div class=\"edit-tab\">\r\n            <button (click)=\"editSection()\">\r\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <g clip-path=\"url(#clip0_1076_52409)\">\r\n                        <path\r\n                            d=\"M2 11.4997V13.9997H4.5L11.8733 6.62638L9.37333 4.12638L2 11.4997ZM13.8067 4.69305C14.0667 4.43305 14.0667 4.01305 13.8067 3.75305L12.2467 2.19305C11.9867 1.93305 11.5667 1.93305 11.3067 2.19305L10.0867 3.41305L12.5867 5.91305L13.8067 4.69305Z\"\r\n                            fill=\"#0267c1\" />\r\n                    </g>\r\n                    <defs>\r\n                        <clipPath id=\"clip0_1076_52409\">\r\n                            <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                        </clipPath>\r\n                    </defs>\r\n                </svg>\r\n                <span class=\"edit-text\">\r\n                    Edit\r\n                </span>\r\n            </button>\r\n        </div>\r\n        <div class=\"vr-line\"></div>\r\n          <div class=\"remainin-sections\"  *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header'\">\r\n              <button class=\"up-arrow\" (click)=\"deleteSection()\">\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#434443\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n                      class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n                      <path fill-rule=\"evenodd\"\r\n                          d=\"M9 2c-.37877 0-.72503.214-.89443.55279L7.38197 4H4c-.55228 0-1 .44772-1 1s.44772 1 1 1v10c0 1.1046.89543 2 2 2h8c1.1046 0 2-.8954 2-2V6c.5523 0 1-.44772 1-1s-.4477-1-1-1h-3.382l-.7236-1.44721C11.725 2.214 11.3788 2 11 2H9ZM7 8c0-.55228.44772-1 1-1s1 .44772 1 1v6c0 .5523-.44772 1-1 1s-1-.4477-1-1V8Zm5-1c-.5523 0-1 .44772-1 1v6c0 .5523.4477 1 1 1s1-.4477 1-1V8c0-.55228-.4477-1-1-1Z\"\r\n                          clip-rule=\"evenodd\"></path>\r\n                  </svg>\r\n              </button>\r\n          </div>\r\n      </div>\r\n  </section>\r\n</mat-dialog-content>\r\n", styles: [".hover-tab{display:flex;justify-content:flex-end;align-items:center;position:absolute;right:5px;top:20px;height:auto}.edit-tab{display:flex;align-items:center;justify-content:center}.edit-tab button{border:none;outline:none;cursor:pointer;background-color:transparent;padding:0;display:flex;justify-content:center;align-items:center}.edit-text{font-size:14px;color:#0267c1;font-weight:500;position:relative;left:4px}.vr-line{border-left:1px solid #e8e8e8;height:25px;margin-left:14px}.tabs-section{width:auto;padding:15px 10px;box-shadow:#63636333 0 2px 8px;border-radius:6px;display:flex;align-items:center;height:46px;background-color:#fff;z-index:1001}.remainin-sections{display:flex;justify-content:center;align-items:center;position:relative;right:6px}.remainin-sections :is(.copy,.up-arrow){border:none;outline:none;cursor:pointer;background-color:transparent;padding:0}.remainin-sections :is(.copy:hover,.up-arrow:hover) svg{fill:#0267c1}.up-arrow{margin-left:10px}\n"] }]
+            args: [{ selector: 'simpo-delete-hover-element', standalone: true, imports: [MatIconModule, MatDialogModule, CommonModule], template: "<mat-dialog-content class=\"mat-typography\">\n  <section class=\"hover-tab\">\n      <div class=\"tabs-section\">\n        <div class=\"edit-tab\">\n            <button (click)=\"editSection()\">\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <g clip-path=\"url(#clip0_1076_52409)\">\n                        <path\n                            d=\"M2 11.4997V13.9997H4.5L11.8733 6.62638L9.37333 4.12638L2 11.4997ZM13.8067 4.69305C14.0667 4.43305 14.0667 4.01305 13.8067 3.75305L12.2467 2.19305C11.9867 1.93305 11.5667 1.93305 11.3067 2.19305L10.0867 3.41305L12.5867 5.91305L13.8067 4.69305Z\"\n                            fill=\"#0267c1\" />\n                    </g>\n                    <defs>\n                        <clipPath id=\"clip0_1076_52409\">\n                            <rect width=\"18\" height=\"18\" fill=\"white\" />\n                        </clipPath>\n                    </defs>\n                </svg>\n                <span class=\"edit-text\">\n                    Edit\n                </span>\n            </button>\n        </div>\n        <div class=\"vr-line\"></div>\n          <div class=\"remainin-sections\"  *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header'\">\n              <button class=\"up-arrow\" (click)=\"deleteSection()\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#434443\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\n                      class=\"icon w-5 h-5\" aria-hidden=\"true\">\n                      <path fill-rule=\"evenodd\"\n                          d=\"M9 2c-.37877 0-.72503.214-.89443.55279L7.38197 4H4c-.55228 0-1 .44772-1 1s.44772 1 1 1v10c0 1.1046.89543 2 2 2h8c1.1046 0 2-.8954 2-2V6c.5523 0 1-.44772 1-1s-.4477-1-1-1h-3.382l-.7236-1.44721C11.725 2.214 11.3788 2 11 2H9ZM7 8c0-.55228.44772-1 1-1s1 .44772 1 1v6c0 .5523-.44772 1-1 1s-1-.4477-1-1V8Zm5-1c-.5523 0-1 .44772-1 1v6c0 .5523.4477 1 1 1s1-.4477 1-1V8c0-.55228-.4477-1-1-1Z\"\n                          clip-rule=\"evenodd\"></path>\n                  </svg>\n              </button>\n          </div>\n      </div>\n  </section>\n</mat-dialog-content>\n", styles: [".hover-tab{display:flex;justify-content:flex-end;align-items:center;position:absolute;right:5px;top:20px;height:auto}.edit-tab{display:flex;align-items:center;justify-content:center}.edit-tab button{border:none;outline:none;cursor:pointer;background-color:transparent;padding:0;display:flex;justify-content:center;align-items:center}.edit-text{font-size:14px;color:#0267c1;font-weight:500;position:relative;left:4px}.vr-line{border-left:1px solid #e8e8e8;height:25px;margin-left:14px}.tabs-section{width:auto;padding:15px 10px;box-shadow:#63636333 0 2px 8px;border-radius:6px;display:flex;align-items:center;height:46px;background-color:#fff;z-index:1001}.remainin-sections{display:flex;justify-content:center;align-items:center;position:relative;right:6px}.remainin-sections :is(.copy,.up-arrow){border:none;outline:none;cursor:pointer;background-color:transparent;padding:0}.remainin-sections :is(.copy:hover,.up-arrow:hover) svg{fill:#0267c1}.up-arrow{margin-left:10px}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { index: [{
                 type: Input
             }], data: [{
@@ -4495,7 +4495,7 @@ class PaymentDetailsComponent {
         return this.admissionData.selectedComboKits.length > 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PaymentDetailsComponent, deps: [{ token: ElementServiceService }, { token: i2$3.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PaymentDetailsComponent, isStandalone: true, selector: "simpo-payment-details", inputs: { admissionData: "admissionData", subscriptionsData: "subscriptionsData", termPaymentList: "termPaymentList" }, ngImport: i0, template: "<!-- <section class=\"main-section\">\r\n  <div class=\"row\">\r\n    <div class=\"col-md-6\">\r\n      <div class=\"heading left-side\">\r\n        Admission Fee\r\n      </div>\r\n\r\n      <div class=\"left-side mt-10\" *ngFor=\"let configList of Object.keys(feeConfig)\">\r\n        <div class=\"heading mb-20\">{{configList}}</div>\r\n\r\n        <div class=\"d-flex justify-space mt-10 mb-15\" *ngFor=\"let config of feeConfig[configList]\">\r\n          <p class=\"sub-heading mb-0\">{{config.feeHead}}</p>\r\n          <p class=\"amount mb-0\">\u20B9 {{config.amount}}</p>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"left-side mt-10\" *ngFor=\"let type of Object.keys(subscriptions)\">\r\n        <p class=\"heading\">{{type}}</p>\r\n\r\n        <table class=\"subscription-table w-100\">\r\n          <thead>\r\n            <th>Subscription Title</th>\r\n            <th>Monthly</th>\r\n            <th>Quaterly</th>\r\n            <th>Yearly</th>\r\n            <th>On Demand</th>\r\n          </thead>\r\n          <tbody>\r\n            <tr *ngFor=\"let data of subscriptions[type];let i = index\">\r\n              <td>{{data.subName}}</td>\r\n              <td>\r\n                <div class=\"form-check\" *ngIf=\"data.pricing['QUARTERLY']\">\r\n                  <input class=\"form-check-input\" type=\"radio\" name=\"subscription{{i}}\"  [value]=\"'MONTHLY'\" (click)=\"toggleSelection(data, 'MONTHLY')\"  [checked]=\"data.selectedOption === 'MONTHLY'\"  [(ngModel)]=\"data.selectedOption\" id=\"flexRadioDefault2\">\r\n                  <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n                    \u20B9 {{data.pricing['MONTHLY']}}\r\n                  </label>\r\n                </div>\r\n                <img class=\"defaultImage\" *ngIf=\"!data.pricing['QUARTERLY']\" [src]=\"defaultImage\" alt=\"\">\r\n            </td>\r\n              <td>\r\n                <div class=\"form-check\" *ngIf=\"data.pricing['MONTHLY']\">\r\n                  <input class=\"form-check-input\" type=\"radio\" name=\"subscription{{i}}\" [value]=\"'QUARTERLY'\" (click)=\"toggleSelection(data, 'QUARTERLY')\"  [checked]=\"data.selectedOption === 'QUARTERLY'\" [(ngModel)]=\"data.selectedOption\" id=\"flexCheckChecked\">\r\n                  <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n                    \u20B9 {{data.pricing['QUARTERLY']}}\r\n                  </label>\r\n                  <img class=\"defaultImage\" *ngIf=\"!data.pricing['MONTHLY']\" [src]=\"defaultImage\" alt=\"\">\r\n                </div>\r\n              </td>\r\n              <td>\r\n                <div class=\"form-check\" *ngIf=\"data.pricing['ANNUALLY']\">\r\n                  <input class=\"form-check-input\" type=\"radio\" name=\"subscription{{i}}\" [value]=\"'ANNUALLY'\" (click)=\"toggleSelection(data, 'ANNUALLY')\"  [checked]=\"data.selectedOption === 'ANNUALLY'\" [(ngModel)]=\"data.selectedOption\" id=\"flexCheckChecked\">\r\n                  <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n                    \u20B9 {{data.pricing['ANNUALLY']}}\r\n                  </label>\r\n                </div>\r\n                <img class=\"defaultImage\" *ngIf=\"!data.pricing['ANNUALLY']\" [src]=\"defaultImage\" alt=\"\">\r\n              </td>\r\n              <td>\r\n                <div class=\"form-check\" *ngIf=\"data.pricing['ONDEMAND']\">\r\n                  <input class=\"form-check-input\" type=\"radio\" name=\"subscription{{i}}\" [value]=\"'ONDEMAND'\" (click)=\"toggleSelection(data, 'ONDEMAND')\"  [checked]=\"data.selectedOption === 'ONDEMAND'\" [(ngModel)]=\"data.selectedOption\" id=\"flexCheckChecked\">\r\n                  <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n                    \u20B9 {{data.pricing['ONDEMAND']}}\r\n                  </label>\r\n                </div>\r\n                <img class=\"defaultImage\" *ngIf=\"!data.pricing['ONDEMAND']\" [src]=\"defaultImage\" alt=\"\">\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n\r\n      <div class=\"left-side mt-10\">\r\n        <p class=\"heading\">Payment Plan</p>\r\n\r\n        <div class=\"d-flex g-2\">\r\n          <div class=\"form-check\" (click)=\"changeAnnualPaymentTerm('ANNUALLY')\">\r\n            <input class=\"form-check-input\" type=\"radio\" value=\"\" name=\"payment-plan\" id=\"flexCheckChecked\" [checked]=\"admissionData.paymentPlanType === 'ANNUALLY'\">\r\n            <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n              Annually\r\n            </label>\r\n          </div>\r\n          <div class=\"form-check\" (click)=\"changeAnnualPaymentTerm('TERM')\">\r\n            <input class=\"form-check-input\" type=\"radio\" value=\"\" name=\"payment-plan\" id=\"flexCheckChecked\" [checked]=\"admissionData.paymentPlanType === 'TERM'\">\r\n            <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n              Term\r\n            </label>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"admission\" *ngIf=\"admissionData.paymentPlanType === 'TERM'\">\r\n          <mat-form-field class=\"input-text\" appearance=\"outline\">\r\n            <mat-select class=\"inputStyle\" placeholder=\"--Select--\" multiple=\"true\" [(ngModel)]=\"feeStructure.termPaymentList\" (ngModelChange)=\"calculateTotalAmount()\">\r\n                <mat-option *ngFor=\"let term of termPaymentList\" [value]=\"term\">term {{term.termNumber}}</mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n    <div class=\"col-md-6 right-side\">\r\n      <div class=\"heading mb-20\">\r\n        Fee Calculation\r\n      </div>\r\n      <div class=\"d-flex justify-space mt-10 mb-15\" *ngFor=\"let config of feeStructure.feeConfigs\">\r\n        <p class=\"sub-heading mb-0\">{{config.feeHead}}</p>\r\n        <p class=\"amount mb-0\">\u20B9 {{config.amount}}</p>\r\n      </div>\r\n\r\n      <div class=\"d-flex justify-space mt-10 mb-15\" *ngFor=\"let subscripition of feeStructure.subscriptionPlans\">\r\n        <p class=\"sub-heading mb-0\">{{subscripition.subName}}</p>\r\n        <p class=\"amount mb-0\">\u20B9 {{subscripition.pricing[subscripition.frequency]}}</p>\r\n      </div>\r\n\r\n      <div class=\"total-fee\">\r\n        <div class=\"heading mb-5\">\r\n          Total Fee\r\n        </div>\r\n        <div class=\"amount\">\r\n          \u20B9 {{feeStructure.totalAmount}}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</section> -->\r\n\r\n\r\n<section class=\"main_payment_details_section h-100 w-100 p-2 d-flex justify-content-between\">\r\n  <div class=\"left_payment_details h-100 p-2\">\r\n    <div class=\"fees_section\">\r\n      <div class=\"sec_title\">\r\n        Fees\r\n      </div>\r\n      <div class=\"mt-2 all_fee_configs\">\r\n        <ng-container *ngFor=\"let item of feeStructure?.feeConfig\">\r\n          <div class=\"single_fee_config p-3\">\r\n            <div class=\"d-flex justify-content-between align-items-center\">\r\n              <div class=\"fee_title\">{{item.feeHead ? item.feeHead.name : 'N/A'}}</div>\r\n              <div class=\"fee_amount\">\u20B9 {{item.amount}}</div>\r\n            </div>\r\n            <div *ngIf=\"item.termsList.length > 0\">\r\n              <div class=\"change_selection\">\r\n                <mat-radio-group aria-label=\"Select an option\" [(ngModel)]=\"item.selectedTermValue\"\r\n                name=\"termOption_{{ item.feeHead.id}}\"\r\n                  (change)=\"changeTermValue(item)\">\r\n                  <mat-radio-button value=\"SINGLE\"\r\n                    style=\"font-family: var(--primary-font-family);font-size:13px\">Single</mat-radio-button>\r\n                  <mat-radio-button value=\"TERM\"\r\n                    style=\"font-family: var(--primary-font-family);font-size:13px\">Term</mat-radio-button>\r\n                </mat-radio-group>\r\n              </div>\r\n              <div class=\"termCount\" *ngIf=\"item.selectedTermValue === 'TERM'\">\r\n                <div class=\"check_data\">\r\n                  <ng-container *ngFor=\"let term of item.termsList;let i = index\">\r\n                    <div class=\"singleData d-flex gap-3 align-items-end\">\r\n                      <input type=\"checkbox\" (change)=\"addTerms($event,term)\" [checked]=\"term.selected\">\r\n                      <div class=\"data_value\">{{getOrdinalSuffix(i+1)}} Term (\u20B9 {{term?.termAmount}})</div>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"subscriptions_list mt-3\">\r\n        <div class=\"d-flex justify-content-between align-items-center\">\r\n          <div class=\"title\">Transport Fee</div>\r\n          <div class=\"selecting_types d-flex align-items-center gap-2 justify-content-end\">\r\n            <div style=\"width:30%\">\r\n              <mat-form-field appearance=\"outline\" class=\"input_card mt-2 w-100\" style=\"height:40px\">\r\n                <input type=\"text\" matInput placeholder=\"Select Stop\" [matAutocomplete]=\"autoGrade\"\r\n                  [(ngModel)]=\"stopSearchText\" (input)=\"filterStops()\"\r\n                  style=\"font-size: 13px;font-family: var(--primary-font-family);\">\r\n                <mat-autocomplete #autoGrade=\"matAutocomplete\" (optionSelected)=\"onStopSelection($event)\">\r\n                  <mat-option *ngFor=\"let stop of filteredStopsList\" [value]=\"stop.stopName\"\r\n                    style=\"font-size: 13px;font-family: var(--primary-font-family);\">\r\n                    {{ stop.stopName | titlecase }}\r\n                  </mat-option>\r\n                </mat-autocomplete>\r\n              </mat-form-field>\r\n            </div>\r\n            <div style=\"width:30%\">\r\n              <mat-form-field appearance=\"outline\" class=\"input_card mt-2 w-100\" style=\"height:40px\">\r\n                <input type=\"text\" matInput placeholder=\"Select Vehicle Type\" [matAutocomplete]=\"autoGrade1\"\r\n                  [(ngModel)]=\"vehicleTypeSearchText\" (input)=\"filtereVehicleTypes()\"\r\n                  style=\"font-size: 13px;font-family: var(--primary-font-family);\">\r\n                <mat-autocomplete #autoGrade1=\"matAutocomplete\" (optionSelected)=\"onVehicleTypeSelection($event)\">\r\n                  <mat-option *ngFor=\"let stop of filteredVehicleTypesList\" [value]=\"stop.vehicleType\"\r\n                    style=\"font-size: 13px;font-family: var(--primary-font-family);\">\r\n                    {{ stop.vehicleType | titlecase }}\r\n                  </mat-option>\r\n                </mat-autocomplete>\r\n              </mat-form-field>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"list_all_subscriptions mt-2\">\r\n          <ng-container *ngFor=\"let item of routeValues\">\r\n            <div class=\"single_fee_config p-3\">\r\n              <div class=\"d-flex gap-2 align-items-center\">\r\n                <mat-checkbox [checked]=\"admissionData.selectedStopDetail === item\"\r\n                  (change)=\"onCheckboxChange(item, $event)\"></mat-checkbox>\r\n\r\n                <div class=\"d-flex justify-content-between align-items-center\" style=\"width:92%\">\r\n                  <div class=\"fee_title\">\r\n                    {{ item.transport.route ? item.transport.route.name : 'N/A' }}\r\n                    <span>(<span style=\"font-size:12px;font-family: var(--primary-font-family);\">Pickup Time :</span>\r\n                      <span\r\n                        style=\"font-size:12px;font-family: var(--primary-semi-bold-font-family);\">{{getPickupTime(item.transport.busRouteStopTimings)\r\n                        | date:'h:mm a'}}</span>\r\n                      -\r\n                      <span style=\"font-size:12px;font-family: var(--primary-font-family);\">Drop Time :</span>\r\n                      <span\r\n                        style=\"font-size:12px;font-family: var(--primary-semi-bold-font-family);\">{{getDroptime(item.transport.busRouteStopTimings)\r\n                        | date:'h:mm a'}}</span>\r\n                      )</span>\r\n                  </div>\r\n                  <div class=\"fee_amount\">\u20B9 {{ item.charges.totalAmount }}</div>\r\n                </div>\r\n              </div>\r\n\r\n              <div *ngIf=\"item?.charges.termPaymentList.length > 0\">\r\n                <div class=\"change_selection\" style=\"width:90%;margin:0 auto\">\r\n                  <mat-radio-group aria-label=\"Select an option\" [(ngModel)]=\"item.charges.selectedTermValue\"\r\n                    (change)=\"changeTransportTermValue(item)\" [disabled]=\"admissionData.selectedStopDetail !== item\">\r\n                    <mat-radio-button value=\"SINGLE\"\r\n                      style=\"font-family: var(--primary-font-family); font-size: 13px\">Single</mat-radio-button>\r\n                    <mat-radio-button value=\"TERM\"\r\n                      style=\"font-family: var(--primary-font-family); font-size: 13px\">Term</mat-radio-button>\r\n                  </mat-radio-group>\r\n                </div>\r\n\r\n                <div class=\"termCount\" *ngIf=\"item.charges.selectedTermValue === 'TERM'\">\r\n                  <div class=\"check_data\" style=\"width:75%;margin:0 auto\">\r\n                    <ng-container *ngFor=\"let term of item.charges.termPaymentList; let i = index\">\r\n                      <div class=\"singleData d-flex gap-3 align-items-end\">\r\n                        <input type=\"checkbox\" (change)=\"addSingleStop($event, term)\"\r\n                          [disabled]=\"admissionData.selectedStopDetail !== item\" />\r\n                        <div class=\"data_value\">{{ getOrdinalSuffix(i + 1) }} Term (\u20B9 {{term.termAmount}})</div>\r\n                      </div>\r\n                    </ng-container>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n\r\n        </div>\r\n      </div>\r\n      <div class=\"subscriptions_list mt-3\" *ngIf=\"subscriptionsData.length > 0\">\r\n        <div class=\"title\">Subscriptions</div>\r\n        <div class=\"list_all_subscriptions mt-2\">\r\n          <ng-container *ngFor=\"let item of subscriptionsData\">\r\n            <div class=\"top_1\">\r\n              <div class=\"d-flex align-items-center gap-3\">\r\n                <mat-checkbox [checked]=\"isSubscriptionSelected(item)\"\r\n                  (change)=\"onSubscriptionItemChange($event, item)\"></mat-checkbox>\r\n                <div class=\"subscription_title\">\r\n                  {{item.subscriptionTitle}}\r\n                </div>\r\n              </div>\r\n              <div class=\"subscription_types\" style=\"width:85%;margin:auto\">\r\n                <ng-container *ngFor=\"let subV of item.newPricingList;let i = index\">\r\n                  <div class=\"single_subscrption d-flex gap-2 mt-2\">\r\n                    <div class=\"single_title d-flex gap-3 align-items-center\" style=\"width:25%\">\r\n                      <input type=\"radio\" [checked]=\"subV.selecteStatus\"\r\n                        (change)=\"toggleSubscriptionSelection(item.newPricingList, i, item)\"\r\n                        [disabled]=\"!disableSubscriptionSelection(item)\">\r\n                      <div class=\"data_value\">{{subV.name | titlecase}}</div>\r\n                    </div>\r\n                    <div class=\"single_value\">\r\n                      {{subV.amount}}\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      <div class=\"subscriptions_list mt-3\" *ngIf=\"listAllKits.length > 0\">\r\n        <div class=\"title\">Student Kit</div>\r\n        <div class=\"list_all_subscriptions mt-2 d-flex gap-2 flex-wrap\">\r\n          <ng-container *ngFor=\"let item of listAllKits;let i = index\">\r\n            <div class=\"single_kit\">\r\n              <div class=\"top_layer d-flex justify-content-between align-items-center\">\r\n                <div class=\"selection\">\r\n                  <input type=\"checkbox\" [(ngModel)]=\"item.selected\" class=\"cursor-pointer\"\r\n                  (change)=\"addRemoveKit(item,$event)\">\r\n                </div>\r\n                <div class=\"amount_section\">\r\n                  <div class=\"original_amount\" *ngIf=\"item.discountedAmount === 0\">\u20B9 {{item.amount}}</div>\r\n                  <div class=\"discounted_amount\" *ngIf=\"item.discountedAmount != 0\">\r\n                    \u20B9\r\n                    <span class=\"strikethrough\">{{item.originalAmount}}</span> &nbsp;\r\n                    <span style=\"font-family:var(--primary-semi-bold-font-family)\">{{item.discountedAmount}}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"kit_bottom_layer\">\r\n                <div class=\"image_section d-flex justify-content-center align-items-center\">\r\n                  <div class=\"img_sec\" *ngIf=\"item.img != null\"><img [src]=\"item.img\" alt=\"\"></div>\r\n                  <div class=\"img_sec d-flex justify-content-center align-items-center\" *ngIf=\"item.img === null\">\r\n                    {{item.name.split('')[0] | uppercase}}\r\n                  </div>\r\n                </div>\r\n                <div class=\"mt-2 kit_title text-center\">\r\n                  {{item.name}}\r\n                </div>\r\n                <div class=\"kit_description text-center\" style=\"margin-top:4px\">\r\n                  {{item.description}}\r\n                </div>\r\n              </div>\r\n              <div class=\"kit_footer_layer mt-2\" *ngIf=\"item.selected\">\r\n                <div class=\"d-flex align-items-center justify-content-center gap-3 paying_options\">\r\n                  <mat-radio-group aria-label=\"Select an option\" [(ngModel)]=\"item.kitPaymentSelected\"\r\n                  (ngModelChange)=\"changePaymentStatus(item)\">\r\n                    <mat-radio-button [value]=\"true\"><span style=\"font-family: var(--primary-font-family);font-size: 13px;\">Pay Now</span></mat-radio-button>\r\n                    <mat-radio-button [value]=\"false\"><span style=\"font-family: var(--primary-font-family);font-size: 13px;\">Pay Later</span></mat-radio-button>\r\n                  </mat-radio-group>                  \r\n                </div>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"right_payment_details h-100\">\r\n    <div class=\"total_payment_details h-100 w-100 p-3\">\r\n      <div class=\"mt-2 calculation_table\">\r\n        <div class=\"calculation_single_part\">\r\n          <div class=\"total_title\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\r\n            Total Academic Fee Breakdown\r\n          </div>\r\n          <ng-container *ngFor=\"let item of feeStructure.feeConfig\">\r\n            <div class=\"d-flex justify-content-between align-items-center\" style=\"margin-top: 8px;\">\r\n              <div class=\"fee_title\">{{item.feeHead ? item.feeHead.name : 'N/A'}}</div>\r\n              <div class=\"fee_amount\" *ngIf=\"item.termsList.length === 0 || item.selectedTermValue != 'TERM'\">\r\n                <span [ngClass]=\"(item?.concession != null && item?.concession?.length != 0) ? 'strikethrough' : ''\">\r\n                  \u20B9 {{item.amount}}\r\n                </span>\r\n                <span\r\n                  *ngIf=\"item.concession != null && item?.concession.length != 0\">({{item.appliedConcessionAmount}})</span>\r\n              </div>\r\n            </div>\r\n            <div class=\"value fw-500\" *ngIf=\"item.termsList.length >= 0\">\r\n              <div class=\"selecte_terms\">\r\n                <ng-container *ngFor=\"let data of item.termsList\">\r\n                  <div class=\"selected_single_term d-flex align-items-center justify-content-between\" *ngIf=\"data.selected\">\r\n                    <div class=\"key\">\r\n                      Term {{data.termNumber}}\r\n                    </div>\r\n                    <div class=\"value fw-500\">\r\n                      \u20B9 {{data.termAmount}}\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"calculation_single_part\" *ngIf=\"admissionData.selectedStopDetail != null && admissionData?.selectedStopDetail?.availability\">\r\n          <div class=\"total_title\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\r\n            Transport Fee\r\n          </div>\r\n          <ng-container>\r\n            <div class=\"d-flex justify-content-between align-items-center\" style=\"margin-top: 8px;\">\r\n              <div class=\"fee_title\">{{admissionData.selectedStopDetail?.charges?.vehicleType ?\r\n                admissionData.selectedStopDetail?.charges?.vehicleType?.name : 'N/A'}}</div>\r\n              <div class=\"fee_amount\"\r\n                *ngIf=\"admissionData.selectedStopDetail?.charges?.termPaymentList?.length === 0 || admissionData.selectedStopDetail?.charges?.selectedTermValue != 'TERM'\">\r\n                \u20B9\r\n                {{admissionData.selectedStopDetail?.charges?.totalAmount}}\r\n              </div>\r\n            </div>\r\n            <div class=\"value fw-500\" *ngIf=\"admissionData.selectedStopDetail?.charges?.termPaymentList?.length >= 0\">\r\n              <div class=\"selecte_terms\">\r\n                <ng-container *ngFor=\"let data of admissionData.selectedStopDetail?.charges?.termPaymentList\">\r\n                  <div class=\"selected_single_term d-flex align-items-center justify-content-between\"\r\n                    *ngIf=\"data.selected\">\r\n                    <div class=\"key\">\r\n                      Term {{data.termNumber}}\r\n                    </div>\r\n                    <div class=\"value fw-500\">\r\n                      \u20B9 {{data.termAmount}}\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"calculation_single_part\" *ngIf=\"hasActiveSubscriptions()\">\r\n          <div class=\"new_title mt-2\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\r\n            Subscriptions\r\n          </div>\r\n          <div class=\"listing_selected_suscriptions mt-2\">\r\n            <ng-container *ngFor=\"let item of admissionData.subscriptionPlans\">\r\n              <div class=\"fee_title\">{{item.subName | titlecase}}</div>\r\n              <ng-container>\r\n                <div class=\"single_payment_calculation d-flex justify-content-between align-items-center mb-1\">\r\n                  <div class=\"key\">\r\n                    {{item.frequency | titlecase}}\r\n                  </div>\r\n                  <div class=\"value fw-500\">\r\n                    \u20B9 {{item.pricing[item.frequency]}}\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"calculation_single_part\" *ngIf=\"hasActiveKits()\">\r\n          <div class=\"new_title mt-2\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\r\n            Student Kits\r\n          </div>\r\n          <div class=\"listing_selected_suscriptions mt-2\">\r\n            <ng-container *ngFor=\"let item of admissionData.selectedComboKits\">\r\n              <ng-container *ngIf=\"item?.kitPaymentSelected\">\r\n                <div class=\"single_payment_calculation d-flex justify-content-between align-items-center mb-1\">\r\n                  <div class=\"fee_title\">\r\n                    {{item.name | titlecase}}\r\n                  </div>\r\n                  <div class=\"value fw-500\">\r\n                    \u20B9 {{item.amount}}\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"footer_section total_container\">\r\n        <div class=\"footer_title\">Grand Total Fee</div>\r\n        <div class=\"d-flex justify-content-center align-items-center\">\r\n          \u20B9 {{feeStructure?.totalFee}}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</section>", styles: [".left_payment_details{width:55%;overflow-y:scroll}.right_payment_details{width:45%;padding:10px}.sec_title{font-size:16px;font-family:var(--primary-semi-bold-font-family);font-weight:500;color:#000}.single_fee_config{background-color:#f1f7ff99;padding:10px;box-shadow:0 0 2px #d3d3d3;border-radius:8px;margin-bottom:10px}.fee_title{font-size:14.5px;font-family:var(--primary-font-family);color:#3a3838;font-weight:500}.fee_amount,.fee_amount span{font-size:14.5px;font-family:var(--primary-semi-bold-font-family);color:#000;font-weight:500}.total_payment_details{background:#faf5f199;box-shadow:0 0 2px #d3d3d3;border-radius:8px}.total_title{font-size:20px;font-family:var(--primary-semi-bold-font-family);color:#000;font-weight:500;line-height:18px}.calculation_table{height:90%;overflow-y:scroll}.footer_section{height:10%;display:flex;justify-content:space-between;align-items:center}.footer_title{font-size:18px;font-family:var(--primary-font-family);font-weight:500;color:#000}.total_container{background-color:#fff;padding:10px;font-size:20px;font-weight:500;font-family:var(--primary-semi-bold-font-family);color:#000}.calculation_single_part{background-color:#fff;padding:10px;border-radius:8px;margin-bottom:10px}.selected_single_term{margin-bottom:10px}.key{font-weight:500;font-size:14px;font-family:var(--primary-font-family);color:#3a3838;margin-left:30px}.fw-500{font-weight:500;font-family:var(--primary-semi-bold-font-family);font-size:16px;margin:0!important}.check_data{width:90%;margin:auto}.singleData{margin-bottom:10px}.singleData input{width:16px;height:16px}.singleData .data_value{font-size:14px;font-family:var(--primary-font-family);color:#3a3838;font-weight:500}.title{font-family:var(--primary-semi-bold-font-family);font-weight:500;font-size:15px;color:#000}.subscription_title{font-family:var(--primary-font-family);font-weight:500;font-size:14px;color:#000}.single_value{font-size:16px;font-family:var(--primary-semi-bold-font-family);color:#000;font-weight:500}.single_title input{width:16px;height:16px}.data_value{font-size:14px;font-family:var(--primary-font-family);color:#3a3838;font-weight:500}.top_1{background:#d2d4b999;padding:10px;box-shadow:0 0 2px #d3d3d3;border-radius:8px;margin-bottom:10px}.discounted_amount span,.original_amount{font-family:var(--primary-font-family);font-weight:500;font-size:13px}.img_sec{width:60px;height:60px;border-radius:50%;border:2px solid #0f9af1;font-size:18px;font-family:var(--primary-semi-bold-font-family);font-weight:500}.img_sec img{width:100%;height:100%;border-radius:50%}.selection input{width:16px;height:16px}.kit_title{font-size:14px;font-family:var(--primary-font-family);font-weight:500;color:#000}.kit_description{color:#434443;font-size:13px;font-family:var(--primary-font-family);font-weight:500}.paying_options label{font-size:14px;font-family:var(--primary-font-family);font-weight:500}.paying_options label input{width:16px;height:16px}.kit_bottom_layer{height:150px;overflow-y:scroll}.single_kit{background-color:#f2f2f9;padding:10px;border-radius:6px;width:32%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: MatOptionModule }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i12.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i7$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i7$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i8$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i9.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i9.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i10.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PaymentDetailsComponent, isStandalone: true, selector: "simpo-payment-details", inputs: { admissionData: "admissionData", subscriptionsData: "subscriptionsData", termPaymentList: "termPaymentList" }, ngImport: i0, template: "<!-- <section class=\"main-section\">\n  <div class=\"row\">\n    <div class=\"col-md-6\">\n      <div class=\"heading left-side\">\n        Admission Fee\n      </div>\n\n      <div class=\"left-side mt-10\" *ngFor=\"let configList of Object.keys(feeConfig)\">\n        <div class=\"heading mb-20\">{{configList}}</div>\n\n        <div class=\"d-flex justify-space mt-10 mb-15\" *ngFor=\"let config of feeConfig[configList]\">\n          <p class=\"sub-heading mb-0\">{{config.feeHead}}</p>\n          <p class=\"amount mb-0\">\u20B9 {{config.amount}}</p>\n        </div>\n      </div>\n\n      <div class=\"left-side mt-10\" *ngFor=\"let type of Object.keys(subscriptions)\">\n        <p class=\"heading\">{{type}}</p>\n\n        <table class=\"subscription-table w-100\">\n          <thead>\n            <th>Subscription Title</th>\n            <th>Monthly</th>\n            <th>Quaterly</th>\n            <th>Yearly</th>\n            <th>On Demand</th>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let data of subscriptions[type];let i = index\">\n              <td>{{data.subName}}</td>\n              <td>\n                <div class=\"form-check\" *ngIf=\"data.pricing['QUARTERLY']\">\n                  <input class=\"form-check-input\" type=\"radio\" name=\"subscription{{i}}\"  [value]=\"'MONTHLY'\" (click)=\"toggleSelection(data, 'MONTHLY')\"  [checked]=\"data.selectedOption === 'MONTHLY'\"  [(ngModel)]=\"data.selectedOption\" id=\"flexRadioDefault2\">\n                  <label class=\"form-check-label\" for=\"flexCheckChecked\">\n                    \u20B9 {{data.pricing['MONTHLY']}}\n                  </label>\n                </div>\n                <img class=\"defaultImage\" *ngIf=\"!data.pricing['QUARTERLY']\" [src]=\"defaultImage\" alt=\"\">\n            </td>\n              <td>\n                <div class=\"form-check\" *ngIf=\"data.pricing['MONTHLY']\">\n                  <input class=\"form-check-input\" type=\"radio\" name=\"subscription{{i}}\" [value]=\"'QUARTERLY'\" (click)=\"toggleSelection(data, 'QUARTERLY')\"  [checked]=\"data.selectedOption === 'QUARTERLY'\" [(ngModel)]=\"data.selectedOption\" id=\"flexCheckChecked\">\n                  <label class=\"form-check-label\" for=\"flexCheckChecked\">\n                    \u20B9 {{data.pricing['QUARTERLY']}}\n                  </label>\n                  <img class=\"defaultImage\" *ngIf=\"!data.pricing['MONTHLY']\" [src]=\"defaultImage\" alt=\"\">\n                </div>\n              </td>\n              <td>\n                <div class=\"form-check\" *ngIf=\"data.pricing['ANNUALLY']\">\n                  <input class=\"form-check-input\" type=\"radio\" name=\"subscription{{i}}\" [value]=\"'ANNUALLY'\" (click)=\"toggleSelection(data, 'ANNUALLY')\"  [checked]=\"data.selectedOption === 'ANNUALLY'\" [(ngModel)]=\"data.selectedOption\" id=\"flexCheckChecked\">\n                  <label class=\"form-check-label\" for=\"flexCheckChecked\">\n                    \u20B9 {{data.pricing['ANNUALLY']}}\n                  </label>\n                </div>\n                <img class=\"defaultImage\" *ngIf=\"!data.pricing['ANNUALLY']\" [src]=\"defaultImage\" alt=\"\">\n              </td>\n              <td>\n                <div class=\"form-check\" *ngIf=\"data.pricing['ONDEMAND']\">\n                  <input class=\"form-check-input\" type=\"radio\" name=\"subscription{{i}}\" [value]=\"'ONDEMAND'\" (click)=\"toggleSelection(data, 'ONDEMAND')\"  [checked]=\"data.selectedOption === 'ONDEMAND'\" [(ngModel)]=\"data.selectedOption\" id=\"flexCheckChecked\">\n                  <label class=\"form-check-label\" for=\"flexCheckChecked\">\n                    \u20B9 {{data.pricing['ONDEMAND']}}\n                  </label>\n                </div>\n                <img class=\"defaultImage\" *ngIf=\"!data.pricing['ONDEMAND']\" [src]=\"defaultImage\" alt=\"\">\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n\n      <div class=\"left-side mt-10\">\n        <p class=\"heading\">Payment Plan</p>\n\n        <div class=\"d-flex g-2\">\n          <div class=\"form-check\" (click)=\"changeAnnualPaymentTerm('ANNUALLY')\">\n            <input class=\"form-check-input\" type=\"radio\" value=\"\" name=\"payment-plan\" id=\"flexCheckChecked\" [checked]=\"admissionData.paymentPlanType === 'ANNUALLY'\">\n            <label class=\"form-check-label\" for=\"flexCheckChecked\">\n              Annually\n            </label>\n          </div>\n          <div class=\"form-check\" (click)=\"changeAnnualPaymentTerm('TERM')\">\n            <input class=\"form-check-input\" type=\"radio\" value=\"\" name=\"payment-plan\" id=\"flexCheckChecked\" [checked]=\"admissionData.paymentPlanType === 'TERM'\">\n            <label class=\"form-check-label\" for=\"flexCheckChecked\">\n              Term\n            </label>\n          </div>\n        </div>\n\n        <div class=\"admission\" *ngIf=\"admissionData.paymentPlanType === 'TERM'\">\n          <mat-form-field class=\"input-text\" appearance=\"outline\">\n            <mat-select class=\"inputStyle\" placeholder=\"--Select--\" multiple=\"true\" [(ngModel)]=\"feeStructure.termPaymentList\" (ngModelChange)=\"calculateTotalAmount()\">\n                <mat-option *ngFor=\"let term of termPaymentList\" [value]=\"term\">term {{term.termNumber}}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n\n      </div>\n    </div>\n    <div class=\"col-md-6 right-side\">\n      <div class=\"heading mb-20\">\n        Fee Calculation\n      </div>\n      <div class=\"d-flex justify-space mt-10 mb-15\" *ngFor=\"let config of feeStructure.feeConfigs\">\n        <p class=\"sub-heading mb-0\">{{config.feeHead}}</p>\n        <p class=\"amount mb-0\">\u20B9 {{config.amount}}</p>\n      </div>\n\n      <div class=\"d-flex justify-space mt-10 mb-15\" *ngFor=\"let subscripition of feeStructure.subscriptionPlans\">\n        <p class=\"sub-heading mb-0\">{{subscripition.subName}}</p>\n        <p class=\"amount mb-0\">\u20B9 {{subscripition.pricing[subscripition.frequency]}}</p>\n      </div>\n\n      <div class=\"total-fee\">\n        <div class=\"heading mb-5\">\n          Total Fee\n        </div>\n        <div class=\"amount\">\n          \u20B9 {{feeStructure.totalAmount}}\n        </div>\n      </div>\n    </div>\n  </div>\n</section> -->\n\n\n<section class=\"main_payment_details_section h-100 w-100 p-2 d-flex justify-content-between\">\n  <div class=\"left_payment_details h-100 p-2\">\n    <div class=\"fees_section\">\n      <div class=\"sec_title\">\n        Fees\n      </div>\n      <div class=\"mt-2 all_fee_configs\">\n        <ng-container *ngFor=\"let item of feeStructure?.feeConfig\">\n          <div class=\"single_fee_config p-3\">\n            <div class=\"d-flex justify-content-between align-items-center\">\n              <div class=\"fee_title\">{{item.feeHead ? item.feeHead.name : 'N/A'}}</div>\n              <div class=\"fee_amount\">\u20B9 {{item.amount}}</div>\n            </div>\n            <div *ngIf=\"item.termsList.length > 0\">\n              <div class=\"change_selection\">\n                <mat-radio-group aria-label=\"Select an option\" [(ngModel)]=\"item.selectedTermValue\"\n                name=\"termOption_{{ item.feeHead.id}}\"\n                  (change)=\"changeTermValue(item)\">\n                  <mat-radio-button value=\"SINGLE\"\n                    style=\"font-family: var(--primary-font-family);font-size:13px\">Single</mat-radio-button>\n                  <mat-radio-button value=\"TERM\"\n                    style=\"font-family: var(--primary-font-family);font-size:13px\">Term</mat-radio-button>\n                </mat-radio-group>\n              </div>\n              <div class=\"termCount\" *ngIf=\"item.selectedTermValue === 'TERM'\">\n                <div class=\"check_data\">\n                  <ng-container *ngFor=\"let term of item.termsList;let i = index\">\n                    <div class=\"singleData d-flex gap-3 align-items-end\">\n                      <input type=\"checkbox\" (change)=\"addTerms($event,term)\" [checked]=\"term.selected\">\n                      <div class=\"data_value\">{{getOrdinalSuffix(i+1)}} Term (\u20B9 {{term?.termAmount}})</div>\n                    </div>\n                  </ng-container>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n      <div class=\"subscriptions_list mt-3\">\n        <div class=\"d-flex justify-content-between align-items-center\">\n          <div class=\"title\">Transport Fee</div>\n          <div class=\"selecting_types d-flex align-items-center gap-2 justify-content-end\">\n            <div style=\"width:30%\">\n              <mat-form-field appearance=\"outline\" class=\"input_card mt-2 w-100\" style=\"height:40px\">\n                <input type=\"text\" matInput placeholder=\"Select Stop\" [matAutocomplete]=\"autoGrade\"\n                  [(ngModel)]=\"stopSearchText\" (input)=\"filterStops()\"\n                  style=\"font-size: 13px;font-family: var(--primary-font-family);\">\n                <mat-autocomplete #autoGrade=\"matAutocomplete\" (optionSelected)=\"onStopSelection($event)\">\n                  <mat-option *ngFor=\"let stop of filteredStopsList\" [value]=\"stop.stopName\"\n                    style=\"font-size: 13px;font-family: var(--primary-font-family);\">\n                    {{ stop.stopName | titlecase }}\n                  </mat-option>\n                </mat-autocomplete>\n              </mat-form-field>\n            </div>\n            <div style=\"width:30%\">\n              <mat-form-field appearance=\"outline\" class=\"input_card mt-2 w-100\" style=\"height:40px\">\n                <input type=\"text\" matInput placeholder=\"Select Vehicle Type\" [matAutocomplete]=\"autoGrade1\"\n                  [(ngModel)]=\"vehicleTypeSearchText\" (input)=\"filtereVehicleTypes()\"\n                  style=\"font-size: 13px;font-family: var(--primary-font-family);\">\n                <mat-autocomplete #autoGrade1=\"matAutocomplete\" (optionSelected)=\"onVehicleTypeSelection($event)\">\n                  <mat-option *ngFor=\"let stop of filteredVehicleTypesList\" [value]=\"stop.vehicleType\"\n                    style=\"font-size: 13px;font-family: var(--primary-font-family);\">\n                    {{ stop.vehicleType | titlecase }}\n                  </mat-option>\n                </mat-autocomplete>\n              </mat-form-field>\n            </div>\n          </div>\n        </div>\n        <div class=\"list_all_subscriptions mt-2\">\n          <ng-container *ngFor=\"let item of routeValues\">\n            <div class=\"single_fee_config p-3\">\n              <div class=\"d-flex gap-2 align-items-center\">\n                <mat-checkbox [checked]=\"admissionData.selectedStopDetail === item\"\n                  (change)=\"onCheckboxChange(item, $event)\"></mat-checkbox>\n\n                <div class=\"d-flex justify-content-between align-items-center\" style=\"width:92%\">\n                  <div class=\"fee_title\">\n                    {{ item.transport.route ? item.transport.route.name : 'N/A' }}\n                    <span>(<span style=\"font-size:12px;font-family: var(--primary-font-family);\">Pickup Time :</span>\n                      <span\n                        style=\"font-size:12px;font-family: var(--primary-semi-bold-font-family);\">{{getPickupTime(item.transport.busRouteStopTimings)\n                        | date:'h:mm a'}}</span>\n                      -\n                      <span style=\"font-size:12px;font-family: var(--primary-font-family);\">Drop Time :</span>\n                      <span\n                        style=\"font-size:12px;font-family: var(--primary-semi-bold-font-family);\">{{getDroptime(item.transport.busRouteStopTimings)\n                        | date:'h:mm a'}}</span>\n                      )</span>\n                  </div>\n                  <div class=\"fee_amount\">\u20B9 {{ item.charges.totalAmount }}</div>\n                </div>\n              </div>\n\n              <div *ngIf=\"item?.charges.termPaymentList.length > 0\">\n                <div class=\"change_selection\" style=\"width:90%;margin:0 auto\">\n                  <mat-radio-group aria-label=\"Select an option\" [(ngModel)]=\"item.charges.selectedTermValue\"\n                    (change)=\"changeTransportTermValue(item)\" [disabled]=\"admissionData.selectedStopDetail !== item\">\n                    <mat-radio-button value=\"SINGLE\"\n                      style=\"font-family: var(--primary-font-family); font-size: 13px\">Single</mat-radio-button>\n                    <mat-radio-button value=\"TERM\"\n                      style=\"font-family: var(--primary-font-family); font-size: 13px\">Term</mat-radio-button>\n                  </mat-radio-group>\n                </div>\n\n                <div class=\"termCount\" *ngIf=\"item.charges.selectedTermValue === 'TERM'\">\n                  <div class=\"check_data\" style=\"width:75%;margin:0 auto\">\n                    <ng-container *ngFor=\"let term of item.charges.termPaymentList; let i = index\">\n                      <div class=\"singleData d-flex gap-3 align-items-end\">\n                        <input type=\"checkbox\" (change)=\"addSingleStop($event, term)\"\n                          [disabled]=\"admissionData.selectedStopDetail !== item\" />\n                        <div class=\"data_value\">{{ getOrdinalSuffix(i + 1) }} Term (\u20B9 {{term.termAmount}})</div>\n                      </div>\n                    </ng-container>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n\n        </div>\n      </div>\n      <div class=\"subscriptions_list mt-3\" *ngIf=\"subscriptionsData.length > 0\">\n        <div class=\"title\">Subscriptions</div>\n        <div class=\"list_all_subscriptions mt-2\">\n          <ng-container *ngFor=\"let item of subscriptionsData\">\n            <div class=\"top_1\">\n              <div class=\"d-flex align-items-center gap-3\">\n                <mat-checkbox [checked]=\"isSubscriptionSelected(item)\"\n                  (change)=\"onSubscriptionItemChange($event, item)\"></mat-checkbox>\n                <div class=\"subscription_title\">\n                  {{item.subscriptionTitle}}\n                </div>\n              </div>\n              <div class=\"subscription_types\" style=\"width:85%;margin:auto\">\n                <ng-container *ngFor=\"let subV of item.newPricingList;let i = index\">\n                  <div class=\"single_subscrption d-flex gap-2 mt-2\">\n                    <div class=\"single_title d-flex gap-3 align-items-center\" style=\"width:25%\">\n                      <input type=\"radio\" [checked]=\"subV.selecteStatus\"\n                        (change)=\"toggleSubscriptionSelection(item.newPricingList, i, item)\"\n                        [disabled]=\"!disableSubscriptionSelection(item)\">\n                      <div class=\"data_value\">{{subV.name | titlecase}}</div>\n                    </div>\n                    <div class=\"single_value\">\n                      {{subV.amount}}\n                    </div>\n                  </div>\n                </ng-container>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n      <div class=\"subscriptions_list mt-3\" *ngIf=\"listAllKits.length > 0\">\n        <div class=\"title\">Student Kit</div>\n        <div class=\"list_all_subscriptions mt-2 d-flex gap-2 flex-wrap\">\n          <ng-container *ngFor=\"let item of listAllKits;let i = index\">\n            <div class=\"single_kit\">\n              <div class=\"top_layer d-flex justify-content-between align-items-center\">\n                <div class=\"selection\">\n                  <input type=\"checkbox\" [(ngModel)]=\"item.selected\" class=\"cursor-pointer\"\n                  (change)=\"addRemoveKit(item,$event)\">\n                </div>\n                <div class=\"amount_section\">\n                  <div class=\"original_amount\" *ngIf=\"item.discountedAmount === 0\">\u20B9 {{item.amount}}</div>\n                  <div class=\"discounted_amount\" *ngIf=\"item.discountedAmount != 0\">\n                    \u20B9\n                    <span class=\"strikethrough\">{{item.originalAmount}}</span> &nbsp;\n                    <span style=\"font-family:var(--primary-semi-bold-font-family)\">{{item.discountedAmount}}</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"kit_bottom_layer\">\n                <div class=\"image_section d-flex justify-content-center align-items-center\">\n                  <div class=\"img_sec\" *ngIf=\"item.img != null\"><img [src]=\"item.img\" alt=\"\"></div>\n                  <div class=\"img_sec d-flex justify-content-center align-items-center\" *ngIf=\"item.img === null\">\n                    {{item.name.split('')[0] | uppercase}}\n                  </div>\n                </div>\n                <div class=\"mt-2 kit_title text-center\">\n                  {{item.name}}\n                </div>\n                <div class=\"kit_description text-center\" style=\"margin-top:4px\">\n                  {{item.description}}\n                </div>\n              </div>\n              <div class=\"kit_footer_layer mt-2\" *ngIf=\"item.selected\">\n                <div class=\"d-flex align-items-center justify-content-center gap-3 paying_options\">\n                  <mat-radio-group aria-label=\"Select an option\" [(ngModel)]=\"item.kitPaymentSelected\"\n                  (ngModelChange)=\"changePaymentStatus(item)\">\n                    <mat-radio-button [value]=\"true\"><span style=\"font-family: var(--primary-font-family);font-size: 13px;\">Pay Now</span></mat-radio-button>\n                    <mat-radio-button [value]=\"false\"><span style=\"font-family: var(--primary-font-family);font-size: 13px;\">Pay Later</span></mat-radio-button>\n                  </mat-radio-group>                  \n                </div>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"right_payment_details h-100\">\n    <div class=\"total_payment_details h-100 w-100 p-3\">\n      <div class=\"mt-2 calculation_table\">\n        <div class=\"calculation_single_part\">\n          <div class=\"total_title\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\n            Total Academic Fee Breakdown\n          </div>\n          <ng-container *ngFor=\"let item of feeStructure.feeConfig\">\n            <div class=\"d-flex justify-content-between align-items-center\" style=\"margin-top: 8px;\">\n              <div class=\"fee_title\">{{item.feeHead ? item.feeHead.name : 'N/A'}}</div>\n              <div class=\"fee_amount\" *ngIf=\"item.termsList.length === 0 || item.selectedTermValue != 'TERM'\">\n                <span [ngClass]=\"(item?.concession != null && item?.concession?.length != 0) ? 'strikethrough' : ''\">\n                  \u20B9 {{item.amount}}\n                </span>\n                <span\n                  *ngIf=\"item.concession != null && item?.concession.length != 0\">({{item.appliedConcessionAmount}})</span>\n              </div>\n            </div>\n            <div class=\"value fw-500\" *ngIf=\"item.termsList.length >= 0\">\n              <div class=\"selecte_terms\">\n                <ng-container *ngFor=\"let data of item.termsList\">\n                  <div class=\"selected_single_term d-flex align-items-center justify-content-between\" *ngIf=\"data.selected\">\n                    <div class=\"key\">\n                      Term {{data.termNumber}}\n                    </div>\n                    <div class=\"value fw-500\">\n                      \u20B9 {{data.termAmount}}\n                    </div>\n                  </div>\n                </ng-container>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n        <div class=\"calculation_single_part\" *ngIf=\"admissionData.selectedStopDetail != null && admissionData?.selectedStopDetail?.availability\">\n          <div class=\"total_title\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\n            Transport Fee\n          </div>\n          <ng-container>\n            <div class=\"d-flex justify-content-between align-items-center\" style=\"margin-top: 8px;\">\n              <div class=\"fee_title\">{{admissionData.selectedStopDetail?.charges?.vehicleType ?\n                admissionData.selectedStopDetail?.charges?.vehicleType?.name : 'N/A'}}</div>\n              <div class=\"fee_amount\"\n                *ngIf=\"admissionData.selectedStopDetail?.charges?.termPaymentList?.length === 0 || admissionData.selectedStopDetail?.charges?.selectedTermValue != 'TERM'\">\n                \u20B9\n                {{admissionData.selectedStopDetail?.charges?.totalAmount}}\n              </div>\n            </div>\n            <div class=\"value fw-500\" *ngIf=\"admissionData.selectedStopDetail?.charges?.termPaymentList?.length >= 0\">\n              <div class=\"selecte_terms\">\n                <ng-container *ngFor=\"let data of admissionData.selectedStopDetail?.charges?.termPaymentList\">\n                  <div class=\"selected_single_term d-flex align-items-center justify-content-between\"\n                    *ngIf=\"data.selected\">\n                    <div class=\"key\">\n                      Term {{data.termNumber}}\n                    </div>\n                    <div class=\"value fw-500\">\n                      \u20B9 {{data.termAmount}}\n                    </div>\n                  </div>\n                </ng-container>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n        <div class=\"calculation_single_part\" *ngIf=\"hasActiveSubscriptions()\">\n          <div class=\"new_title mt-2\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\n            Subscriptions\n          </div>\n          <div class=\"listing_selected_suscriptions mt-2\">\n            <ng-container *ngFor=\"let item of admissionData.subscriptionPlans\">\n              <div class=\"fee_title\">{{item.subName | titlecase}}</div>\n              <ng-container>\n                <div class=\"single_payment_calculation d-flex justify-content-between align-items-center mb-1\">\n                  <div class=\"key\">\n                    {{item.frequency | titlecase}}\n                  </div>\n                  <div class=\"value fw-500\">\n                    \u20B9 {{item.pricing[item.frequency]}}\n                  </div>\n                </div>\n              </ng-container>\n            </ng-container>\n          </div>\n        </div>\n        <div class=\"calculation_single_part\" *ngIf=\"hasActiveKits()\">\n          <div class=\"new_title mt-2\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\n            Student Kits\n          </div>\n          <div class=\"listing_selected_suscriptions mt-2\">\n            <ng-container *ngFor=\"let item of admissionData.selectedComboKits\">\n              <ng-container *ngIf=\"item?.kitPaymentSelected\">\n                <div class=\"single_payment_calculation d-flex justify-content-between align-items-center mb-1\">\n                  <div class=\"fee_title\">\n                    {{item.name | titlecase}}\n                  </div>\n                  <div class=\"value fw-500\">\n                    \u20B9 {{item.amount}}\n                  </div>\n                </div>\n              </ng-container>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n      <div class=\"footer_section total_container\">\n        <div class=\"footer_title\">Grand Total Fee</div>\n        <div class=\"d-flex justify-content-center align-items-center\">\n          \u20B9 {{feeStructure?.totalFee}}\n        </div>\n      </div>\n    </div>\n  </div>\n</section>", styles: [".left_payment_details{width:55%;overflow-y:scroll}.right_payment_details{width:45%;padding:10px}.sec_title{font-size:16px;font-family:var(--primary-semi-bold-font-family);font-weight:500;color:#000}.single_fee_config{background-color:#f1f7ff99;padding:10px;box-shadow:0 0 2px #d3d3d3;border-radius:8px;margin-bottom:10px}.fee_title{font-size:14.5px;font-family:var(--primary-font-family);color:#3a3838;font-weight:500}.fee_amount,.fee_amount span{font-size:14.5px;font-family:var(--primary-semi-bold-font-family);color:#000;font-weight:500}.total_payment_details{background:#faf5f199;box-shadow:0 0 2px #d3d3d3;border-radius:8px}.total_title{font-size:20px;font-family:var(--primary-semi-bold-font-family);color:#000;font-weight:500;line-height:18px}.calculation_table{height:90%;overflow-y:scroll}.footer_section{height:10%;display:flex;justify-content:space-between;align-items:center}.footer_title{font-size:18px;font-family:var(--primary-font-family);font-weight:500;color:#000}.total_container{background-color:#fff;padding:10px;font-size:20px;font-weight:500;font-family:var(--primary-semi-bold-font-family);color:#000}.calculation_single_part{background-color:#fff;padding:10px;border-radius:8px;margin-bottom:10px}.selected_single_term{margin-bottom:10px}.key{font-weight:500;font-size:14px;font-family:var(--primary-font-family);color:#3a3838;margin-left:30px}.fw-500{font-weight:500;font-family:var(--primary-semi-bold-font-family);font-size:16px;margin:0!important}.check_data{width:90%;margin:auto}.singleData{margin-bottom:10px}.singleData input{width:16px;height:16px}.singleData .data_value{font-size:14px;font-family:var(--primary-font-family);color:#3a3838;font-weight:500}.title{font-family:var(--primary-semi-bold-font-family);font-weight:500;font-size:15px;color:#000}.subscription_title{font-family:var(--primary-font-family);font-weight:500;font-size:14px;color:#000}.single_value{font-size:16px;font-family:var(--primary-semi-bold-font-family);color:#000;font-weight:500}.single_title input{width:16px;height:16px}.data_value{font-size:14px;font-family:var(--primary-font-family);color:#3a3838;font-weight:500}.top_1{background:#d2d4b999;padding:10px;box-shadow:0 0 2px #d3d3d3;border-radius:8px;margin-bottom:10px}.discounted_amount span,.original_amount{font-family:var(--primary-font-family);font-weight:500;font-size:13px}.img_sec{width:60px;height:60px;border-radius:50%;border:2px solid #0f9af1;font-size:18px;font-family:var(--primary-semi-bold-font-family);font-weight:500}.img_sec img{width:100%;height:100%;border-radius:50%}.selection input{width:16px;height:16px}.kit_title{font-size:14px;font-family:var(--primary-font-family);font-weight:500;color:#000}.kit_description{color:#434443;font-size:13px;font-family:var(--primary-font-family);font-weight:500}.paying_options label{font-size:14px;font-family:var(--primary-font-family);font-weight:500}.paying_options label input{width:16px;height:16px}.kit_bottom_layer{height:150px;overflow-y:scroll}.single_kit{background-color:#f2f2f9;padding:10px;border-radius:6px;width:32%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: MatOptionModule }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i12.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i7$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i7$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i8$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i9.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i9.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i10.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PaymentDetailsComponent, decorators: [{
             type: Component,
@@ -4510,7 +4510,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MatDialogModule,
                         MatAutocompleteModule,
                         MatInputModule
-                    ], template: "<!-- <section class=\"main-section\">\r\n  <div class=\"row\">\r\n    <div class=\"col-md-6\">\r\n      <div class=\"heading left-side\">\r\n        Admission Fee\r\n      </div>\r\n\r\n      <div class=\"left-side mt-10\" *ngFor=\"let configList of Object.keys(feeConfig)\">\r\n        <div class=\"heading mb-20\">{{configList}}</div>\r\n\r\n        <div class=\"d-flex justify-space mt-10 mb-15\" *ngFor=\"let config of feeConfig[configList]\">\r\n          <p class=\"sub-heading mb-0\">{{config.feeHead}}</p>\r\n          <p class=\"amount mb-0\">\u20B9 {{config.amount}}</p>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"left-side mt-10\" *ngFor=\"let type of Object.keys(subscriptions)\">\r\n        <p class=\"heading\">{{type}}</p>\r\n\r\n        <table class=\"subscription-table w-100\">\r\n          <thead>\r\n            <th>Subscription Title</th>\r\n            <th>Monthly</th>\r\n            <th>Quaterly</th>\r\n            <th>Yearly</th>\r\n            <th>On Demand</th>\r\n          </thead>\r\n          <tbody>\r\n            <tr *ngFor=\"let data of subscriptions[type];let i = index\">\r\n              <td>{{data.subName}}</td>\r\n              <td>\r\n                <div class=\"form-check\" *ngIf=\"data.pricing['QUARTERLY']\">\r\n                  <input class=\"form-check-input\" type=\"radio\" name=\"subscription{{i}}\"  [value]=\"'MONTHLY'\" (click)=\"toggleSelection(data, 'MONTHLY')\"  [checked]=\"data.selectedOption === 'MONTHLY'\"  [(ngModel)]=\"data.selectedOption\" id=\"flexRadioDefault2\">\r\n                  <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n                    \u20B9 {{data.pricing['MONTHLY']}}\r\n                  </label>\r\n                </div>\r\n                <img class=\"defaultImage\" *ngIf=\"!data.pricing['QUARTERLY']\" [src]=\"defaultImage\" alt=\"\">\r\n            </td>\r\n              <td>\r\n                <div class=\"form-check\" *ngIf=\"data.pricing['MONTHLY']\">\r\n                  <input class=\"form-check-input\" type=\"radio\" name=\"subscription{{i}}\" [value]=\"'QUARTERLY'\" (click)=\"toggleSelection(data, 'QUARTERLY')\"  [checked]=\"data.selectedOption === 'QUARTERLY'\" [(ngModel)]=\"data.selectedOption\" id=\"flexCheckChecked\">\r\n                  <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n                    \u20B9 {{data.pricing['QUARTERLY']}}\r\n                  </label>\r\n                  <img class=\"defaultImage\" *ngIf=\"!data.pricing['MONTHLY']\" [src]=\"defaultImage\" alt=\"\">\r\n                </div>\r\n              </td>\r\n              <td>\r\n                <div class=\"form-check\" *ngIf=\"data.pricing['ANNUALLY']\">\r\n                  <input class=\"form-check-input\" type=\"radio\" name=\"subscription{{i}}\" [value]=\"'ANNUALLY'\" (click)=\"toggleSelection(data, 'ANNUALLY')\"  [checked]=\"data.selectedOption === 'ANNUALLY'\" [(ngModel)]=\"data.selectedOption\" id=\"flexCheckChecked\">\r\n                  <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n                    \u20B9 {{data.pricing['ANNUALLY']}}\r\n                  </label>\r\n                </div>\r\n                <img class=\"defaultImage\" *ngIf=\"!data.pricing['ANNUALLY']\" [src]=\"defaultImage\" alt=\"\">\r\n              </td>\r\n              <td>\r\n                <div class=\"form-check\" *ngIf=\"data.pricing['ONDEMAND']\">\r\n                  <input class=\"form-check-input\" type=\"radio\" name=\"subscription{{i}}\" [value]=\"'ONDEMAND'\" (click)=\"toggleSelection(data, 'ONDEMAND')\"  [checked]=\"data.selectedOption === 'ONDEMAND'\" [(ngModel)]=\"data.selectedOption\" id=\"flexCheckChecked\">\r\n                  <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n                    \u20B9 {{data.pricing['ONDEMAND']}}\r\n                  </label>\r\n                </div>\r\n                <img class=\"defaultImage\" *ngIf=\"!data.pricing['ONDEMAND']\" [src]=\"defaultImage\" alt=\"\">\r\n              </td>\r\n            </tr>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n\r\n      <div class=\"left-side mt-10\">\r\n        <p class=\"heading\">Payment Plan</p>\r\n\r\n        <div class=\"d-flex g-2\">\r\n          <div class=\"form-check\" (click)=\"changeAnnualPaymentTerm('ANNUALLY')\">\r\n            <input class=\"form-check-input\" type=\"radio\" value=\"\" name=\"payment-plan\" id=\"flexCheckChecked\" [checked]=\"admissionData.paymentPlanType === 'ANNUALLY'\">\r\n            <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n              Annually\r\n            </label>\r\n          </div>\r\n          <div class=\"form-check\" (click)=\"changeAnnualPaymentTerm('TERM')\">\r\n            <input class=\"form-check-input\" type=\"radio\" value=\"\" name=\"payment-plan\" id=\"flexCheckChecked\" [checked]=\"admissionData.paymentPlanType === 'TERM'\">\r\n            <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n              Term\r\n            </label>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"admission\" *ngIf=\"admissionData.paymentPlanType === 'TERM'\">\r\n          <mat-form-field class=\"input-text\" appearance=\"outline\">\r\n            <mat-select class=\"inputStyle\" placeholder=\"--Select--\" multiple=\"true\" [(ngModel)]=\"feeStructure.termPaymentList\" (ngModelChange)=\"calculateTotalAmount()\">\r\n                <mat-option *ngFor=\"let term of termPaymentList\" [value]=\"term\">term {{term.termNumber}}</mat-option>\r\n            </mat-select>\r\n          </mat-form-field>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n    <div class=\"col-md-6 right-side\">\r\n      <div class=\"heading mb-20\">\r\n        Fee Calculation\r\n      </div>\r\n      <div class=\"d-flex justify-space mt-10 mb-15\" *ngFor=\"let config of feeStructure.feeConfigs\">\r\n        <p class=\"sub-heading mb-0\">{{config.feeHead}}</p>\r\n        <p class=\"amount mb-0\">\u20B9 {{config.amount}}</p>\r\n      </div>\r\n\r\n      <div class=\"d-flex justify-space mt-10 mb-15\" *ngFor=\"let subscripition of feeStructure.subscriptionPlans\">\r\n        <p class=\"sub-heading mb-0\">{{subscripition.subName}}</p>\r\n        <p class=\"amount mb-0\">\u20B9 {{subscripition.pricing[subscripition.frequency]}}</p>\r\n      </div>\r\n\r\n      <div class=\"total-fee\">\r\n        <div class=\"heading mb-5\">\r\n          Total Fee\r\n        </div>\r\n        <div class=\"amount\">\r\n          \u20B9 {{feeStructure.totalAmount}}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</section> -->\r\n\r\n\r\n<section class=\"main_payment_details_section h-100 w-100 p-2 d-flex justify-content-between\">\r\n  <div class=\"left_payment_details h-100 p-2\">\r\n    <div class=\"fees_section\">\r\n      <div class=\"sec_title\">\r\n        Fees\r\n      </div>\r\n      <div class=\"mt-2 all_fee_configs\">\r\n        <ng-container *ngFor=\"let item of feeStructure?.feeConfig\">\r\n          <div class=\"single_fee_config p-3\">\r\n            <div class=\"d-flex justify-content-between align-items-center\">\r\n              <div class=\"fee_title\">{{item.feeHead ? item.feeHead.name : 'N/A'}}</div>\r\n              <div class=\"fee_amount\">\u20B9 {{item.amount}}</div>\r\n            </div>\r\n            <div *ngIf=\"item.termsList.length > 0\">\r\n              <div class=\"change_selection\">\r\n                <mat-radio-group aria-label=\"Select an option\" [(ngModel)]=\"item.selectedTermValue\"\r\n                name=\"termOption_{{ item.feeHead.id}}\"\r\n                  (change)=\"changeTermValue(item)\">\r\n                  <mat-radio-button value=\"SINGLE\"\r\n                    style=\"font-family: var(--primary-font-family);font-size:13px\">Single</mat-radio-button>\r\n                  <mat-radio-button value=\"TERM\"\r\n                    style=\"font-family: var(--primary-font-family);font-size:13px\">Term</mat-radio-button>\r\n                </mat-radio-group>\r\n              </div>\r\n              <div class=\"termCount\" *ngIf=\"item.selectedTermValue === 'TERM'\">\r\n                <div class=\"check_data\">\r\n                  <ng-container *ngFor=\"let term of item.termsList;let i = index\">\r\n                    <div class=\"singleData d-flex gap-3 align-items-end\">\r\n                      <input type=\"checkbox\" (change)=\"addTerms($event,term)\" [checked]=\"term.selected\">\r\n                      <div class=\"data_value\">{{getOrdinalSuffix(i+1)}} Term (\u20B9 {{term?.termAmount}})</div>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"subscriptions_list mt-3\">\r\n        <div class=\"d-flex justify-content-between align-items-center\">\r\n          <div class=\"title\">Transport Fee</div>\r\n          <div class=\"selecting_types d-flex align-items-center gap-2 justify-content-end\">\r\n            <div style=\"width:30%\">\r\n              <mat-form-field appearance=\"outline\" class=\"input_card mt-2 w-100\" style=\"height:40px\">\r\n                <input type=\"text\" matInput placeholder=\"Select Stop\" [matAutocomplete]=\"autoGrade\"\r\n                  [(ngModel)]=\"stopSearchText\" (input)=\"filterStops()\"\r\n                  style=\"font-size: 13px;font-family: var(--primary-font-family);\">\r\n                <mat-autocomplete #autoGrade=\"matAutocomplete\" (optionSelected)=\"onStopSelection($event)\">\r\n                  <mat-option *ngFor=\"let stop of filteredStopsList\" [value]=\"stop.stopName\"\r\n                    style=\"font-size: 13px;font-family: var(--primary-font-family);\">\r\n                    {{ stop.stopName | titlecase }}\r\n                  </mat-option>\r\n                </mat-autocomplete>\r\n              </mat-form-field>\r\n            </div>\r\n            <div style=\"width:30%\">\r\n              <mat-form-field appearance=\"outline\" class=\"input_card mt-2 w-100\" style=\"height:40px\">\r\n                <input type=\"text\" matInput placeholder=\"Select Vehicle Type\" [matAutocomplete]=\"autoGrade1\"\r\n                  [(ngModel)]=\"vehicleTypeSearchText\" (input)=\"filtereVehicleTypes()\"\r\n                  style=\"font-size: 13px;font-family: var(--primary-font-family);\">\r\n                <mat-autocomplete #autoGrade1=\"matAutocomplete\" (optionSelected)=\"onVehicleTypeSelection($event)\">\r\n                  <mat-option *ngFor=\"let stop of filteredVehicleTypesList\" [value]=\"stop.vehicleType\"\r\n                    style=\"font-size: 13px;font-family: var(--primary-font-family);\">\r\n                    {{ stop.vehicleType | titlecase }}\r\n                  </mat-option>\r\n                </mat-autocomplete>\r\n              </mat-form-field>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"list_all_subscriptions mt-2\">\r\n          <ng-container *ngFor=\"let item of routeValues\">\r\n            <div class=\"single_fee_config p-3\">\r\n              <div class=\"d-flex gap-2 align-items-center\">\r\n                <mat-checkbox [checked]=\"admissionData.selectedStopDetail === item\"\r\n                  (change)=\"onCheckboxChange(item, $event)\"></mat-checkbox>\r\n\r\n                <div class=\"d-flex justify-content-between align-items-center\" style=\"width:92%\">\r\n                  <div class=\"fee_title\">\r\n                    {{ item.transport.route ? item.transport.route.name : 'N/A' }}\r\n                    <span>(<span style=\"font-size:12px;font-family: var(--primary-font-family);\">Pickup Time :</span>\r\n                      <span\r\n                        style=\"font-size:12px;font-family: var(--primary-semi-bold-font-family);\">{{getPickupTime(item.transport.busRouteStopTimings)\r\n                        | date:'h:mm a'}}</span>\r\n                      -\r\n                      <span style=\"font-size:12px;font-family: var(--primary-font-family);\">Drop Time :</span>\r\n                      <span\r\n                        style=\"font-size:12px;font-family: var(--primary-semi-bold-font-family);\">{{getDroptime(item.transport.busRouteStopTimings)\r\n                        | date:'h:mm a'}}</span>\r\n                      )</span>\r\n                  </div>\r\n                  <div class=\"fee_amount\">\u20B9 {{ item.charges.totalAmount }}</div>\r\n                </div>\r\n              </div>\r\n\r\n              <div *ngIf=\"item?.charges.termPaymentList.length > 0\">\r\n                <div class=\"change_selection\" style=\"width:90%;margin:0 auto\">\r\n                  <mat-radio-group aria-label=\"Select an option\" [(ngModel)]=\"item.charges.selectedTermValue\"\r\n                    (change)=\"changeTransportTermValue(item)\" [disabled]=\"admissionData.selectedStopDetail !== item\">\r\n                    <mat-radio-button value=\"SINGLE\"\r\n                      style=\"font-family: var(--primary-font-family); font-size: 13px\">Single</mat-radio-button>\r\n                    <mat-radio-button value=\"TERM\"\r\n                      style=\"font-family: var(--primary-font-family); font-size: 13px\">Term</mat-radio-button>\r\n                  </mat-radio-group>\r\n                </div>\r\n\r\n                <div class=\"termCount\" *ngIf=\"item.charges.selectedTermValue === 'TERM'\">\r\n                  <div class=\"check_data\" style=\"width:75%;margin:0 auto\">\r\n                    <ng-container *ngFor=\"let term of item.charges.termPaymentList; let i = index\">\r\n                      <div class=\"singleData d-flex gap-3 align-items-end\">\r\n                        <input type=\"checkbox\" (change)=\"addSingleStop($event, term)\"\r\n                          [disabled]=\"admissionData.selectedStopDetail !== item\" />\r\n                        <div class=\"data_value\">{{ getOrdinalSuffix(i + 1) }} Term (\u20B9 {{term.termAmount}})</div>\r\n                      </div>\r\n                    </ng-container>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n\r\n        </div>\r\n      </div>\r\n      <div class=\"subscriptions_list mt-3\" *ngIf=\"subscriptionsData.length > 0\">\r\n        <div class=\"title\">Subscriptions</div>\r\n        <div class=\"list_all_subscriptions mt-2\">\r\n          <ng-container *ngFor=\"let item of subscriptionsData\">\r\n            <div class=\"top_1\">\r\n              <div class=\"d-flex align-items-center gap-3\">\r\n                <mat-checkbox [checked]=\"isSubscriptionSelected(item)\"\r\n                  (change)=\"onSubscriptionItemChange($event, item)\"></mat-checkbox>\r\n                <div class=\"subscription_title\">\r\n                  {{item.subscriptionTitle}}\r\n                </div>\r\n              </div>\r\n              <div class=\"subscription_types\" style=\"width:85%;margin:auto\">\r\n                <ng-container *ngFor=\"let subV of item.newPricingList;let i = index\">\r\n                  <div class=\"single_subscrption d-flex gap-2 mt-2\">\r\n                    <div class=\"single_title d-flex gap-3 align-items-center\" style=\"width:25%\">\r\n                      <input type=\"radio\" [checked]=\"subV.selecteStatus\"\r\n                        (change)=\"toggleSubscriptionSelection(item.newPricingList, i, item)\"\r\n                        [disabled]=\"!disableSubscriptionSelection(item)\">\r\n                      <div class=\"data_value\">{{subV.name | titlecase}}</div>\r\n                    </div>\r\n                    <div class=\"single_value\">\r\n                      {{subV.amount}}\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      <div class=\"subscriptions_list mt-3\" *ngIf=\"listAllKits.length > 0\">\r\n        <div class=\"title\">Student Kit</div>\r\n        <div class=\"list_all_subscriptions mt-2 d-flex gap-2 flex-wrap\">\r\n          <ng-container *ngFor=\"let item of listAllKits;let i = index\">\r\n            <div class=\"single_kit\">\r\n              <div class=\"top_layer d-flex justify-content-between align-items-center\">\r\n                <div class=\"selection\">\r\n                  <input type=\"checkbox\" [(ngModel)]=\"item.selected\" class=\"cursor-pointer\"\r\n                  (change)=\"addRemoveKit(item,$event)\">\r\n                </div>\r\n                <div class=\"amount_section\">\r\n                  <div class=\"original_amount\" *ngIf=\"item.discountedAmount === 0\">\u20B9 {{item.amount}}</div>\r\n                  <div class=\"discounted_amount\" *ngIf=\"item.discountedAmount != 0\">\r\n                    \u20B9\r\n                    <span class=\"strikethrough\">{{item.originalAmount}}</span> &nbsp;\r\n                    <span style=\"font-family:var(--primary-semi-bold-font-family)\">{{item.discountedAmount}}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"kit_bottom_layer\">\r\n                <div class=\"image_section d-flex justify-content-center align-items-center\">\r\n                  <div class=\"img_sec\" *ngIf=\"item.img != null\"><img [src]=\"item.img\" alt=\"\"></div>\r\n                  <div class=\"img_sec d-flex justify-content-center align-items-center\" *ngIf=\"item.img === null\">\r\n                    {{item.name.split('')[0] | uppercase}}\r\n                  </div>\r\n                </div>\r\n                <div class=\"mt-2 kit_title text-center\">\r\n                  {{item.name}}\r\n                </div>\r\n                <div class=\"kit_description text-center\" style=\"margin-top:4px\">\r\n                  {{item.description}}\r\n                </div>\r\n              </div>\r\n              <div class=\"kit_footer_layer mt-2\" *ngIf=\"item.selected\">\r\n                <div class=\"d-flex align-items-center justify-content-center gap-3 paying_options\">\r\n                  <mat-radio-group aria-label=\"Select an option\" [(ngModel)]=\"item.kitPaymentSelected\"\r\n                  (ngModelChange)=\"changePaymentStatus(item)\">\r\n                    <mat-radio-button [value]=\"true\"><span style=\"font-family: var(--primary-font-family);font-size: 13px;\">Pay Now</span></mat-radio-button>\r\n                    <mat-radio-button [value]=\"false\"><span style=\"font-family: var(--primary-font-family);font-size: 13px;\">Pay Later</span></mat-radio-button>\r\n                  </mat-radio-group>                  \r\n                </div>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"right_payment_details h-100\">\r\n    <div class=\"total_payment_details h-100 w-100 p-3\">\r\n      <div class=\"mt-2 calculation_table\">\r\n        <div class=\"calculation_single_part\">\r\n          <div class=\"total_title\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\r\n            Total Academic Fee Breakdown\r\n          </div>\r\n          <ng-container *ngFor=\"let item of feeStructure.feeConfig\">\r\n            <div class=\"d-flex justify-content-between align-items-center\" style=\"margin-top: 8px;\">\r\n              <div class=\"fee_title\">{{item.feeHead ? item.feeHead.name : 'N/A'}}</div>\r\n              <div class=\"fee_amount\" *ngIf=\"item.termsList.length === 0 || item.selectedTermValue != 'TERM'\">\r\n                <span [ngClass]=\"(item?.concession != null && item?.concession?.length != 0) ? 'strikethrough' : ''\">\r\n                  \u20B9 {{item.amount}}\r\n                </span>\r\n                <span\r\n                  *ngIf=\"item.concession != null && item?.concession.length != 0\">({{item.appliedConcessionAmount}})</span>\r\n              </div>\r\n            </div>\r\n            <div class=\"value fw-500\" *ngIf=\"item.termsList.length >= 0\">\r\n              <div class=\"selecte_terms\">\r\n                <ng-container *ngFor=\"let data of item.termsList\">\r\n                  <div class=\"selected_single_term d-flex align-items-center justify-content-between\" *ngIf=\"data.selected\">\r\n                    <div class=\"key\">\r\n                      Term {{data.termNumber}}\r\n                    </div>\r\n                    <div class=\"value fw-500\">\r\n                      \u20B9 {{data.termAmount}}\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"calculation_single_part\" *ngIf=\"admissionData.selectedStopDetail != null && admissionData?.selectedStopDetail?.availability\">\r\n          <div class=\"total_title\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\r\n            Transport Fee\r\n          </div>\r\n          <ng-container>\r\n            <div class=\"d-flex justify-content-between align-items-center\" style=\"margin-top: 8px;\">\r\n              <div class=\"fee_title\">{{admissionData.selectedStopDetail?.charges?.vehicleType ?\r\n                admissionData.selectedStopDetail?.charges?.vehicleType?.name : 'N/A'}}</div>\r\n              <div class=\"fee_amount\"\r\n                *ngIf=\"admissionData.selectedStopDetail?.charges?.termPaymentList?.length === 0 || admissionData.selectedStopDetail?.charges?.selectedTermValue != 'TERM'\">\r\n                \u20B9\r\n                {{admissionData.selectedStopDetail?.charges?.totalAmount}}\r\n              </div>\r\n            </div>\r\n            <div class=\"value fw-500\" *ngIf=\"admissionData.selectedStopDetail?.charges?.termPaymentList?.length >= 0\">\r\n              <div class=\"selecte_terms\">\r\n                <ng-container *ngFor=\"let data of admissionData.selectedStopDetail?.charges?.termPaymentList\">\r\n                  <div class=\"selected_single_term d-flex align-items-center justify-content-between\"\r\n                    *ngIf=\"data.selected\">\r\n                    <div class=\"key\">\r\n                      Term {{data.termNumber}}\r\n                    </div>\r\n                    <div class=\"value fw-500\">\r\n                      \u20B9 {{data.termAmount}}\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"calculation_single_part\" *ngIf=\"hasActiveSubscriptions()\">\r\n          <div class=\"new_title mt-2\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\r\n            Subscriptions\r\n          </div>\r\n          <div class=\"listing_selected_suscriptions mt-2\">\r\n            <ng-container *ngFor=\"let item of admissionData.subscriptionPlans\">\r\n              <div class=\"fee_title\">{{item.subName | titlecase}}</div>\r\n              <ng-container>\r\n                <div class=\"single_payment_calculation d-flex justify-content-between align-items-center mb-1\">\r\n                  <div class=\"key\">\r\n                    {{item.frequency | titlecase}}\r\n                  </div>\r\n                  <div class=\"value fw-500\">\r\n                    \u20B9 {{item.pricing[item.frequency]}}\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"calculation_single_part\" *ngIf=\"hasActiveKits()\">\r\n          <div class=\"new_title mt-2\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\r\n            Student Kits\r\n          </div>\r\n          <div class=\"listing_selected_suscriptions mt-2\">\r\n            <ng-container *ngFor=\"let item of admissionData.selectedComboKits\">\r\n              <ng-container *ngIf=\"item?.kitPaymentSelected\">\r\n                <div class=\"single_payment_calculation d-flex justify-content-between align-items-center mb-1\">\r\n                  <div class=\"fee_title\">\r\n                    {{item.name | titlecase}}\r\n                  </div>\r\n                  <div class=\"value fw-500\">\r\n                    \u20B9 {{item.amount}}\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"footer_section total_container\">\r\n        <div class=\"footer_title\">Grand Total Fee</div>\r\n        <div class=\"d-flex justify-content-center align-items-center\">\r\n          \u20B9 {{feeStructure?.totalFee}}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</section>", styles: [".left_payment_details{width:55%;overflow-y:scroll}.right_payment_details{width:45%;padding:10px}.sec_title{font-size:16px;font-family:var(--primary-semi-bold-font-family);font-weight:500;color:#000}.single_fee_config{background-color:#f1f7ff99;padding:10px;box-shadow:0 0 2px #d3d3d3;border-radius:8px;margin-bottom:10px}.fee_title{font-size:14.5px;font-family:var(--primary-font-family);color:#3a3838;font-weight:500}.fee_amount,.fee_amount span{font-size:14.5px;font-family:var(--primary-semi-bold-font-family);color:#000;font-weight:500}.total_payment_details{background:#faf5f199;box-shadow:0 0 2px #d3d3d3;border-radius:8px}.total_title{font-size:20px;font-family:var(--primary-semi-bold-font-family);color:#000;font-weight:500;line-height:18px}.calculation_table{height:90%;overflow-y:scroll}.footer_section{height:10%;display:flex;justify-content:space-between;align-items:center}.footer_title{font-size:18px;font-family:var(--primary-font-family);font-weight:500;color:#000}.total_container{background-color:#fff;padding:10px;font-size:20px;font-weight:500;font-family:var(--primary-semi-bold-font-family);color:#000}.calculation_single_part{background-color:#fff;padding:10px;border-radius:8px;margin-bottom:10px}.selected_single_term{margin-bottom:10px}.key{font-weight:500;font-size:14px;font-family:var(--primary-font-family);color:#3a3838;margin-left:30px}.fw-500{font-weight:500;font-family:var(--primary-semi-bold-font-family);font-size:16px;margin:0!important}.check_data{width:90%;margin:auto}.singleData{margin-bottom:10px}.singleData input{width:16px;height:16px}.singleData .data_value{font-size:14px;font-family:var(--primary-font-family);color:#3a3838;font-weight:500}.title{font-family:var(--primary-semi-bold-font-family);font-weight:500;font-size:15px;color:#000}.subscription_title{font-family:var(--primary-font-family);font-weight:500;font-size:14px;color:#000}.single_value{font-size:16px;font-family:var(--primary-semi-bold-font-family);color:#000;font-weight:500}.single_title input{width:16px;height:16px}.data_value{font-size:14px;font-family:var(--primary-font-family);color:#3a3838;font-weight:500}.top_1{background:#d2d4b999;padding:10px;box-shadow:0 0 2px #d3d3d3;border-radius:8px;margin-bottom:10px}.discounted_amount span,.original_amount{font-family:var(--primary-font-family);font-weight:500;font-size:13px}.img_sec{width:60px;height:60px;border-radius:50%;border:2px solid #0f9af1;font-size:18px;font-family:var(--primary-semi-bold-font-family);font-weight:500}.img_sec img{width:100%;height:100%;border-radius:50%}.selection input{width:16px;height:16px}.kit_title{font-size:14px;font-family:var(--primary-font-family);font-weight:500;color:#000}.kit_description{color:#434443;font-size:13px;font-family:var(--primary-font-family);font-weight:500}.paying_options label{font-size:14px;font-family:var(--primary-font-family);font-weight:500}.paying_options label input{width:16px;height:16px}.kit_bottom_layer{height:150px;overflow-y:scroll}.single_kit{background-color:#f2f2f9;padding:10px;border-radius:6px;width:32%}\n"] }]
+                    ], template: "<!-- <section class=\"main-section\">\n  <div class=\"row\">\n    <div class=\"col-md-6\">\n      <div class=\"heading left-side\">\n        Admission Fee\n      </div>\n\n      <div class=\"left-side mt-10\" *ngFor=\"let configList of Object.keys(feeConfig)\">\n        <div class=\"heading mb-20\">{{configList}}</div>\n\n        <div class=\"d-flex justify-space mt-10 mb-15\" *ngFor=\"let config of feeConfig[configList]\">\n          <p class=\"sub-heading mb-0\">{{config.feeHead}}</p>\n          <p class=\"amount mb-0\">\u20B9 {{config.amount}}</p>\n        </div>\n      </div>\n\n      <div class=\"left-side mt-10\" *ngFor=\"let type of Object.keys(subscriptions)\">\n        <p class=\"heading\">{{type}}</p>\n\n        <table class=\"subscription-table w-100\">\n          <thead>\n            <th>Subscription Title</th>\n            <th>Monthly</th>\n            <th>Quaterly</th>\n            <th>Yearly</th>\n            <th>On Demand</th>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let data of subscriptions[type];let i = index\">\n              <td>{{data.subName}}</td>\n              <td>\n                <div class=\"form-check\" *ngIf=\"data.pricing['QUARTERLY']\">\n                  <input class=\"form-check-input\" type=\"radio\" name=\"subscription{{i}}\"  [value]=\"'MONTHLY'\" (click)=\"toggleSelection(data, 'MONTHLY')\"  [checked]=\"data.selectedOption === 'MONTHLY'\"  [(ngModel)]=\"data.selectedOption\" id=\"flexRadioDefault2\">\n                  <label class=\"form-check-label\" for=\"flexCheckChecked\">\n                    \u20B9 {{data.pricing['MONTHLY']}}\n                  </label>\n                </div>\n                <img class=\"defaultImage\" *ngIf=\"!data.pricing['QUARTERLY']\" [src]=\"defaultImage\" alt=\"\">\n            </td>\n              <td>\n                <div class=\"form-check\" *ngIf=\"data.pricing['MONTHLY']\">\n                  <input class=\"form-check-input\" type=\"radio\" name=\"subscription{{i}}\" [value]=\"'QUARTERLY'\" (click)=\"toggleSelection(data, 'QUARTERLY')\"  [checked]=\"data.selectedOption === 'QUARTERLY'\" [(ngModel)]=\"data.selectedOption\" id=\"flexCheckChecked\">\n                  <label class=\"form-check-label\" for=\"flexCheckChecked\">\n                    \u20B9 {{data.pricing['QUARTERLY']}}\n                  </label>\n                  <img class=\"defaultImage\" *ngIf=\"!data.pricing['MONTHLY']\" [src]=\"defaultImage\" alt=\"\">\n                </div>\n              </td>\n              <td>\n                <div class=\"form-check\" *ngIf=\"data.pricing['ANNUALLY']\">\n                  <input class=\"form-check-input\" type=\"radio\" name=\"subscription{{i}}\" [value]=\"'ANNUALLY'\" (click)=\"toggleSelection(data, 'ANNUALLY')\"  [checked]=\"data.selectedOption === 'ANNUALLY'\" [(ngModel)]=\"data.selectedOption\" id=\"flexCheckChecked\">\n                  <label class=\"form-check-label\" for=\"flexCheckChecked\">\n                    \u20B9 {{data.pricing['ANNUALLY']}}\n                  </label>\n                </div>\n                <img class=\"defaultImage\" *ngIf=\"!data.pricing['ANNUALLY']\" [src]=\"defaultImage\" alt=\"\">\n              </td>\n              <td>\n                <div class=\"form-check\" *ngIf=\"data.pricing['ONDEMAND']\">\n                  <input class=\"form-check-input\" type=\"radio\" name=\"subscription{{i}}\" [value]=\"'ONDEMAND'\" (click)=\"toggleSelection(data, 'ONDEMAND')\"  [checked]=\"data.selectedOption === 'ONDEMAND'\" [(ngModel)]=\"data.selectedOption\" id=\"flexCheckChecked\">\n                  <label class=\"form-check-label\" for=\"flexCheckChecked\">\n                    \u20B9 {{data.pricing['ONDEMAND']}}\n                  </label>\n                </div>\n                <img class=\"defaultImage\" *ngIf=\"!data.pricing['ONDEMAND']\" [src]=\"defaultImage\" alt=\"\">\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n\n      <div class=\"left-side mt-10\">\n        <p class=\"heading\">Payment Plan</p>\n\n        <div class=\"d-flex g-2\">\n          <div class=\"form-check\" (click)=\"changeAnnualPaymentTerm('ANNUALLY')\">\n            <input class=\"form-check-input\" type=\"radio\" value=\"\" name=\"payment-plan\" id=\"flexCheckChecked\" [checked]=\"admissionData.paymentPlanType === 'ANNUALLY'\">\n            <label class=\"form-check-label\" for=\"flexCheckChecked\">\n              Annually\n            </label>\n          </div>\n          <div class=\"form-check\" (click)=\"changeAnnualPaymentTerm('TERM')\">\n            <input class=\"form-check-input\" type=\"radio\" value=\"\" name=\"payment-plan\" id=\"flexCheckChecked\" [checked]=\"admissionData.paymentPlanType === 'TERM'\">\n            <label class=\"form-check-label\" for=\"flexCheckChecked\">\n              Term\n            </label>\n          </div>\n        </div>\n\n        <div class=\"admission\" *ngIf=\"admissionData.paymentPlanType === 'TERM'\">\n          <mat-form-field class=\"input-text\" appearance=\"outline\">\n            <mat-select class=\"inputStyle\" placeholder=\"--Select--\" multiple=\"true\" [(ngModel)]=\"feeStructure.termPaymentList\" (ngModelChange)=\"calculateTotalAmount()\">\n                <mat-option *ngFor=\"let term of termPaymentList\" [value]=\"term\">term {{term.termNumber}}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n\n      </div>\n    </div>\n    <div class=\"col-md-6 right-side\">\n      <div class=\"heading mb-20\">\n        Fee Calculation\n      </div>\n      <div class=\"d-flex justify-space mt-10 mb-15\" *ngFor=\"let config of feeStructure.feeConfigs\">\n        <p class=\"sub-heading mb-0\">{{config.feeHead}}</p>\n        <p class=\"amount mb-0\">\u20B9 {{config.amount}}</p>\n      </div>\n\n      <div class=\"d-flex justify-space mt-10 mb-15\" *ngFor=\"let subscripition of feeStructure.subscriptionPlans\">\n        <p class=\"sub-heading mb-0\">{{subscripition.subName}}</p>\n        <p class=\"amount mb-0\">\u20B9 {{subscripition.pricing[subscripition.frequency]}}</p>\n      </div>\n\n      <div class=\"total-fee\">\n        <div class=\"heading mb-5\">\n          Total Fee\n        </div>\n        <div class=\"amount\">\n          \u20B9 {{feeStructure.totalAmount}}\n        </div>\n      </div>\n    </div>\n  </div>\n</section> -->\n\n\n<section class=\"main_payment_details_section h-100 w-100 p-2 d-flex justify-content-between\">\n  <div class=\"left_payment_details h-100 p-2\">\n    <div class=\"fees_section\">\n      <div class=\"sec_title\">\n        Fees\n      </div>\n      <div class=\"mt-2 all_fee_configs\">\n        <ng-container *ngFor=\"let item of feeStructure?.feeConfig\">\n          <div class=\"single_fee_config p-3\">\n            <div class=\"d-flex justify-content-between align-items-center\">\n              <div class=\"fee_title\">{{item.feeHead ? item.feeHead.name : 'N/A'}}</div>\n              <div class=\"fee_amount\">\u20B9 {{item.amount}}</div>\n            </div>\n            <div *ngIf=\"item.termsList.length > 0\">\n              <div class=\"change_selection\">\n                <mat-radio-group aria-label=\"Select an option\" [(ngModel)]=\"item.selectedTermValue\"\n                name=\"termOption_{{ item.feeHead.id}}\"\n                  (change)=\"changeTermValue(item)\">\n                  <mat-radio-button value=\"SINGLE\"\n                    style=\"font-family: var(--primary-font-family);font-size:13px\">Single</mat-radio-button>\n                  <mat-radio-button value=\"TERM\"\n                    style=\"font-family: var(--primary-font-family);font-size:13px\">Term</mat-radio-button>\n                </mat-radio-group>\n              </div>\n              <div class=\"termCount\" *ngIf=\"item.selectedTermValue === 'TERM'\">\n                <div class=\"check_data\">\n                  <ng-container *ngFor=\"let term of item.termsList;let i = index\">\n                    <div class=\"singleData d-flex gap-3 align-items-end\">\n                      <input type=\"checkbox\" (change)=\"addTerms($event,term)\" [checked]=\"term.selected\">\n                      <div class=\"data_value\">{{getOrdinalSuffix(i+1)}} Term (\u20B9 {{term?.termAmount}})</div>\n                    </div>\n                  </ng-container>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n      <div class=\"subscriptions_list mt-3\">\n        <div class=\"d-flex justify-content-between align-items-center\">\n          <div class=\"title\">Transport Fee</div>\n          <div class=\"selecting_types d-flex align-items-center gap-2 justify-content-end\">\n            <div style=\"width:30%\">\n              <mat-form-field appearance=\"outline\" class=\"input_card mt-2 w-100\" style=\"height:40px\">\n                <input type=\"text\" matInput placeholder=\"Select Stop\" [matAutocomplete]=\"autoGrade\"\n                  [(ngModel)]=\"stopSearchText\" (input)=\"filterStops()\"\n                  style=\"font-size: 13px;font-family: var(--primary-font-family);\">\n                <mat-autocomplete #autoGrade=\"matAutocomplete\" (optionSelected)=\"onStopSelection($event)\">\n                  <mat-option *ngFor=\"let stop of filteredStopsList\" [value]=\"stop.stopName\"\n                    style=\"font-size: 13px;font-family: var(--primary-font-family);\">\n                    {{ stop.stopName | titlecase }}\n                  </mat-option>\n                </mat-autocomplete>\n              </mat-form-field>\n            </div>\n            <div style=\"width:30%\">\n              <mat-form-field appearance=\"outline\" class=\"input_card mt-2 w-100\" style=\"height:40px\">\n                <input type=\"text\" matInput placeholder=\"Select Vehicle Type\" [matAutocomplete]=\"autoGrade1\"\n                  [(ngModel)]=\"vehicleTypeSearchText\" (input)=\"filtereVehicleTypes()\"\n                  style=\"font-size: 13px;font-family: var(--primary-font-family);\">\n                <mat-autocomplete #autoGrade1=\"matAutocomplete\" (optionSelected)=\"onVehicleTypeSelection($event)\">\n                  <mat-option *ngFor=\"let stop of filteredVehicleTypesList\" [value]=\"stop.vehicleType\"\n                    style=\"font-size: 13px;font-family: var(--primary-font-family);\">\n                    {{ stop.vehicleType | titlecase }}\n                  </mat-option>\n                </mat-autocomplete>\n              </mat-form-field>\n            </div>\n          </div>\n        </div>\n        <div class=\"list_all_subscriptions mt-2\">\n          <ng-container *ngFor=\"let item of routeValues\">\n            <div class=\"single_fee_config p-3\">\n              <div class=\"d-flex gap-2 align-items-center\">\n                <mat-checkbox [checked]=\"admissionData.selectedStopDetail === item\"\n                  (change)=\"onCheckboxChange(item, $event)\"></mat-checkbox>\n\n                <div class=\"d-flex justify-content-between align-items-center\" style=\"width:92%\">\n                  <div class=\"fee_title\">\n                    {{ item.transport.route ? item.transport.route.name : 'N/A' }}\n                    <span>(<span style=\"font-size:12px;font-family: var(--primary-font-family);\">Pickup Time :</span>\n                      <span\n                        style=\"font-size:12px;font-family: var(--primary-semi-bold-font-family);\">{{getPickupTime(item.transport.busRouteStopTimings)\n                        | date:'h:mm a'}}</span>\n                      -\n                      <span style=\"font-size:12px;font-family: var(--primary-font-family);\">Drop Time :</span>\n                      <span\n                        style=\"font-size:12px;font-family: var(--primary-semi-bold-font-family);\">{{getDroptime(item.transport.busRouteStopTimings)\n                        | date:'h:mm a'}}</span>\n                      )</span>\n                  </div>\n                  <div class=\"fee_amount\">\u20B9 {{ item.charges.totalAmount }}</div>\n                </div>\n              </div>\n\n              <div *ngIf=\"item?.charges.termPaymentList.length > 0\">\n                <div class=\"change_selection\" style=\"width:90%;margin:0 auto\">\n                  <mat-radio-group aria-label=\"Select an option\" [(ngModel)]=\"item.charges.selectedTermValue\"\n                    (change)=\"changeTransportTermValue(item)\" [disabled]=\"admissionData.selectedStopDetail !== item\">\n                    <mat-radio-button value=\"SINGLE\"\n                      style=\"font-family: var(--primary-font-family); font-size: 13px\">Single</mat-radio-button>\n                    <mat-radio-button value=\"TERM\"\n                      style=\"font-family: var(--primary-font-family); font-size: 13px\">Term</mat-radio-button>\n                  </mat-radio-group>\n                </div>\n\n                <div class=\"termCount\" *ngIf=\"item.charges.selectedTermValue === 'TERM'\">\n                  <div class=\"check_data\" style=\"width:75%;margin:0 auto\">\n                    <ng-container *ngFor=\"let term of item.charges.termPaymentList; let i = index\">\n                      <div class=\"singleData d-flex gap-3 align-items-end\">\n                        <input type=\"checkbox\" (change)=\"addSingleStop($event, term)\"\n                          [disabled]=\"admissionData.selectedStopDetail !== item\" />\n                        <div class=\"data_value\">{{ getOrdinalSuffix(i + 1) }} Term (\u20B9 {{term.termAmount}})</div>\n                      </div>\n                    </ng-container>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n\n        </div>\n      </div>\n      <div class=\"subscriptions_list mt-3\" *ngIf=\"subscriptionsData.length > 0\">\n        <div class=\"title\">Subscriptions</div>\n        <div class=\"list_all_subscriptions mt-2\">\n          <ng-container *ngFor=\"let item of subscriptionsData\">\n            <div class=\"top_1\">\n              <div class=\"d-flex align-items-center gap-3\">\n                <mat-checkbox [checked]=\"isSubscriptionSelected(item)\"\n                  (change)=\"onSubscriptionItemChange($event, item)\"></mat-checkbox>\n                <div class=\"subscription_title\">\n                  {{item.subscriptionTitle}}\n                </div>\n              </div>\n              <div class=\"subscription_types\" style=\"width:85%;margin:auto\">\n                <ng-container *ngFor=\"let subV of item.newPricingList;let i = index\">\n                  <div class=\"single_subscrption d-flex gap-2 mt-2\">\n                    <div class=\"single_title d-flex gap-3 align-items-center\" style=\"width:25%\">\n                      <input type=\"radio\" [checked]=\"subV.selecteStatus\"\n                        (change)=\"toggleSubscriptionSelection(item.newPricingList, i, item)\"\n                        [disabled]=\"!disableSubscriptionSelection(item)\">\n                      <div class=\"data_value\">{{subV.name | titlecase}}</div>\n                    </div>\n                    <div class=\"single_value\">\n                      {{subV.amount}}\n                    </div>\n                  </div>\n                </ng-container>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n      <div class=\"subscriptions_list mt-3\" *ngIf=\"listAllKits.length > 0\">\n        <div class=\"title\">Student Kit</div>\n        <div class=\"list_all_subscriptions mt-2 d-flex gap-2 flex-wrap\">\n          <ng-container *ngFor=\"let item of listAllKits;let i = index\">\n            <div class=\"single_kit\">\n              <div class=\"top_layer d-flex justify-content-between align-items-center\">\n                <div class=\"selection\">\n                  <input type=\"checkbox\" [(ngModel)]=\"item.selected\" class=\"cursor-pointer\"\n                  (change)=\"addRemoveKit(item,$event)\">\n                </div>\n                <div class=\"amount_section\">\n                  <div class=\"original_amount\" *ngIf=\"item.discountedAmount === 0\">\u20B9 {{item.amount}}</div>\n                  <div class=\"discounted_amount\" *ngIf=\"item.discountedAmount != 0\">\n                    \u20B9\n                    <span class=\"strikethrough\">{{item.originalAmount}}</span> &nbsp;\n                    <span style=\"font-family:var(--primary-semi-bold-font-family)\">{{item.discountedAmount}}</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"kit_bottom_layer\">\n                <div class=\"image_section d-flex justify-content-center align-items-center\">\n                  <div class=\"img_sec\" *ngIf=\"item.img != null\"><img [src]=\"item.img\" alt=\"\"></div>\n                  <div class=\"img_sec d-flex justify-content-center align-items-center\" *ngIf=\"item.img === null\">\n                    {{item.name.split('')[0] | uppercase}}\n                  </div>\n                </div>\n                <div class=\"mt-2 kit_title text-center\">\n                  {{item.name}}\n                </div>\n                <div class=\"kit_description text-center\" style=\"margin-top:4px\">\n                  {{item.description}}\n                </div>\n              </div>\n              <div class=\"kit_footer_layer mt-2\" *ngIf=\"item.selected\">\n                <div class=\"d-flex align-items-center justify-content-center gap-3 paying_options\">\n                  <mat-radio-group aria-label=\"Select an option\" [(ngModel)]=\"item.kitPaymentSelected\"\n                  (ngModelChange)=\"changePaymentStatus(item)\">\n                    <mat-radio-button [value]=\"true\"><span style=\"font-family: var(--primary-font-family);font-size: 13px;\">Pay Now</span></mat-radio-button>\n                    <mat-radio-button [value]=\"false\"><span style=\"font-family: var(--primary-font-family);font-size: 13px;\">Pay Later</span></mat-radio-button>\n                  </mat-radio-group>                  \n                </div>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"right_payment_details h-100\">\n    <div class=\"total_payment_details h-100 w-100 p-3\">\n      <div class=\"mt-2 calculation_table\">\n        <div class=\"calculation_single_part\">\n          <div class=\"total_title\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\n            Total Academic Fee Breakdown\n          </div>\n          <ng-container *ngFor=\"let item of feeStructure.feeConfig\">\n            <div class=\"d-flex justify-content-between align-items-center\" style=\"margin-top: 8px;\">\n              <div class=\"fee_title\">{{item.feeHead ? item.feeHead.name : 'N/A'}}</div>\n              <div class=\"fee_amount\" *ngIf=\"item.termsList.length === 0 || item.selectedTermValue != 'TERM'\">\n                <span [ngClass]=\"(item?.concession != null && item?.concession?.length != 0) ? 'strikethrough' : ''\">\n                  \u20B9 {{item.amount}}\n                </span>\n                <span\n                  *ngIf=\"item.concession != null && item?.concession.length != 0\">({{item.appliedConcessionAmount}})</span>\n              </div>\n            </div>\n            <div class=\"value fw-500\" *ngIf=\"item.termsList.length >= 0\">\n              <div class=\"selecte_terms\">\n                <ng-container *ngFor=\"let data of item.termsList\">\n                  <div class=\"selected_single_term d-flex align-items-center justify-content-between\" *ngIf=\"data.selected\">\n                    <div class=\"key\">\n                      Term {{data.termNumber}}\n                    </div>\n                    <div class=\"value fw-500\">\n                      \u20B9 {{data.termAmount}}\n                    </div>\n                  </div>\n                </ng-container>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n        <div class=\"calculation_single_part\" *ngIf=\"admissionData.selectedStopDetail != null && admissionData?.selectedStopDetail?.availability\">\n          <div class=\"total_title\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\n            Transport Fee\n          </div>\n          <ng-container>\n            <div class=\"d-flex justify-content-between align-items-center\" style=\"margin-top: 8px;\">\n              <div class=\"fee_title\">{{admissionData.selectedStopDetail?.charges?.vehicleType ?\n                admissionData.selectedStopDetail?.charges?.vehicleType?.name : 'N/A'}}</div>\n              <div class=\"fee_amount\"\n                *ngIf=\"admissionData.selectedStopDetail?.charges?.termPaymentList?.length === 0 || admissionData.selectedStopDetail?.charges?.selectedTermValue != 'TERM'\">\n                \u20B9\n                {{admissionData.selectedStopDetail?.charges?.totalAmount}}\n              </div>\n            </div>\n            <div class=\"value fw-500\" *ngIf=\"admissionData.selectedStopDetail?.charges?.termPaymentList?.length >= 0\">\n              <div class=\"selecte_terms\">\n                <ng-container *ngFor=\"let data of admissionData.selectedStopDetail?.charges?.termPaymentList\">\n                  <div class=\"selected_single_term d-flex align-items-center justify-content-between\"\n                    *ngIf=\"data.selected\">\n                    <div class=\"key\">\n                      Term {{data.termNumber}}\n                    </div>\n                    <div class=\"value fw-500\">\n                      \u20B9 {{data.termAmount}}\n                    </div>\n                  </div>\n                </ng-container>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n        <div class=\"calculation_single_part\" *ngIf=\"hasActiveSubscriptions()\">\n          <div class=\"new_title mt-2\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\n            Subscriptions\n          </div>\n          <div class=\"listing_selected_suscriptions mt-2\">\n            <ng-container *ngFor=\"let item of admissionData.subscriptionPlans\">\n              <div class=\"fee_title\">{{item.subName | titlecase}}</div>\n              <ng-container>\n                <div class=\"single_payment_calculation d-flex justify-content-between align-items-center mb-1\">\n                  <div class=\"key\">\n                    {{item.frequency | titlecase}}\n                  </div>\n                  <div class=\"value fw-500\">\n                    \u20B9 {{item.pricing[item.frequency]}}\n                  </div>\n                </div>\n              </ng-container>\n            </ng-container>\n          </div>\n        </div>\n        <div class=\"calculation_single_part\" *ngIf=\"hasActiveKits()\">\n          <div class=\"new_title mt-2\" style=\"border-bottom: 1px solid #dedede;padding-bottom: 12px;\">\n            Student Kits\n          </div>\n          <div class=\"listing_selected_suscriptions mt-2\">\n            <ng-container *ngFor=\"let item of admissionData.selectedComboKits\">\n              <ng-container *ngIf=\"item?.kitPaymentSelected\">\n                <div class=\"single_payment_calculation d-flex justify-content-between align-items-center mb-1\">\n                  <div class=\"fee_title\">\n                    {{item.name | titlecase}}\n                  </div>\n                  <div class=\"value fw-500\">\n                    \u20B9 {{item.amount}}\n                  </div>\n                </div>\n              </ng-container>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n      <div class=\"footer_section total_container\">\n        <div class=\"footer_title\">Grand Total Fee</div>\n        <div class=\"d-flex justify-content-center align-items-center\">\n          \u20B9 {{feeStructure?.totalFee}}\n        </div>\n      </div>\n    </div>\n  </div>\n</section>", styles: [".left_payment_details{width:55%;overflow-y:scroll}.right_payment_details{width:45%;padding:10px}.sec_title{font-size:16px;font-family:var(--primary-semi-bold-font-family);font-weight:500;color:#000}.single_fee_config{background-color:#f1f7ff99;padding:10px;box-shadow:0 0 2px #d3d3d3;border-radius:8px;margin-bottom:10px}.fee_title{font-size:14.5px;font-family:var(--primary-font-family);color:#3a3838;font-weight:500}.fee_amount,.fee_amount span{font-size:14.5px;font-family:var(--primary-semi-bold-font-family);color:#000;font-weight:500}.total_payment_details{background:#faf5f199;box-shadow:0 0 2px #d3d3d3;border-radius:8px}.total_title{font-size:20px;font-family:var(--primary-semi-bold-font-family);color:#000;font-weight:500;line-height:18px}.calculation_table{height:90%;overflow-y:scroll}.footer_section{height:10%;display:flex;justify-content:space-between;align-items:center}.footer_title{font-size:18px;font-family:var(--primary-font-family);font-weight:500;color:#000}.total_container{background-color:#fff;padding:10px;font-size:20px;font-weight:500;font-family:var(--primary-semi-bold-font-family);color:#000}.calculation_single_part{background-color:#fff;padding:10px;border-radius:8px;margin-bottom:10px}.selected_single_term{margin-bottom:10px}.key{font-weight:500;font-size:14px;font-family:var(--primary-font-family);color:#3a3838;margin-left:30px}.fw-500{font-weight:500;font-family:var(--primary-semi-bold-font-family);font-size:16px;margin:0!important}.check_data{width:90%;margin:auto}.singleData{margin-bottom:10px}.singleData input{width:16px;height:16px}.singleData .data_value{font-size:14px;font-family:var(--primary-font-family);color:#3a3838;font-weight:500}.title{font-family:var(--primary-semi-bold-font-family);font-weight:500;font-size:15px;color:#000}.subscription_title{font-family:var(--primary-font-family);font-weight:500;font-size:14px;color:#000}.single_value{font-size:16px;font-family:var(--primary-semi-bold-font-family);color:#000;font-weight:500}.single_title input{width:16px;height:16px}.data_value{font-size:14px;font-family:var(--primary-font-family);color:#3a3838;font-weight:500}.top_1{background:#d2d4b999;padding:10px;box-shadow:0 0 2px #d3d3d3;border-radius:8px;margin-bottom:10px}.discounted_amount span,.original_amount{font-family:var(--primary-font-family);font-weight:500;font-size:13px}.img_sec{width:60px;height:60px;border-radius:50%;border:2px solid #0f9af1;font-size:18px;font-family:var(--primary-semi-bold-font-family);font-weight:500}.img_sec img{width:100%;height:100%;border-radius:50%}.selection input{width:16px;height:16px}.kit_title{font-size:14px;font-family:var(--primary-font-family);font-weight:500;color:#000}.kit_description{color:#434443;font-size:13px;font-family:var(--primary-font-family);font-weight:500}.paying_options label{font-size:14px;font-family:var(--primary-font-family);font-weight:500}.paying_options label input{width:16px;height:16px}.kit_bottom_layer{height:150px;overflow-y:scroll}.single_kit{background-color:#f2f2f9;padding:10px;border-radius:6px;width:32%}\n"] }]
         }], ctorParameters: () => [{ type: ElementServiceService }, { type: i2$3.MatSnackBar }], propDecorators: { admissionData: [{
                 type: Input
             }], subscriptionsData: [{
@@ -4536,11 +4536,11 @@ class DocumentComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DocumentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DocumentComponent, isStandalone: true, selector: "simpo-document", inputs: { documentList: "documentList" }, ngImport: i0, template: "<section class=\"main-section p-2\">\r\n  <div class=\"list_tabs heading d-flex align-items-center\">\r\n    Required Document\r\n  </div>\r\n\r\n  <div class=\"document-section\">\r\n    <div class=\"document\" *ngFor=\"let document of documentList\">\r\n      <div class=\"left-side\">\r\n        <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/183907c1734627971492pdf.png\" alt=\"\">\r\n        <p>{{document.displayText}}</p>\r\n      </div>\r\n      <div class=\"right-side\" (click)=\"fileInput.click()\" *ngIf=\"!(document.file || document.url)\">\r\n        <div>Upload</div>\r\n      </div>\r\n      <div class=\"right-side\" *ngIf=\"document.file || document.url\">\r\n        <mat-icon>delete</mat-icon>\r\n      </div>\r\n\r\n      <input id=\"vendorImage\" type=\"file\" name=\"myfile\" hidden\r\n            accept=\".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/x-png,image/jpeg,image/jpg,.pdf, video/mp4,video/x-matroska,video/x-msvideo,video/quicktime\"\r\n            (change)=\"uploadDocument($event, document)\" class=\"pc-btn\"\r\n            id=\"browse_contact_image\" #fileInput />\r\n    </div>\r\n  </div>\r\n</section>\r\n", styles: [".list_tabs{border:1px solid #0000001A;background-color:#ffffffe5;padding:10px;border-radius:6px;gap:10px;height:50px}.heading{font-size:18px;font-weight:500}.align-items-center{align-items:center}.p-2{padding:2rem!important}.document-section{padding-right:2rem;margin-top:2rem;padding-left:2rem;display:flex;flex-direction:column;gap:10px}.document{display:flex;justify-content:space-between;background:#eeecec;padding:1.5rem;border-radius:10px}.left-side{display:flex;align-items:center;gap:20px}.left-side p{margin-bottom:0}.right-side{background:#fff;height:35px;padding-left:30px;padding-right:30px;display:flex;align-items:center;border-radius:8px;font-weight:500}@media screen and (max-width: 475px){.p-2{padding:1rem}.document-section{padding-left:0rem;padding-right:0rem}}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DocumentComponent, isStandalone: true, selector: "simpo-document", inputs: { documentList: "documentList" }, ngImport: i0, template: "<section class=\"main-section p-2\">\n  <div class=\"list_tabs heading d-flex align-items-center\">\n    Required Document\n  </div>\n\n  <div class=\"document-section\">\n    <div class=\"document\" *ngFor=\"let document of documentList\">\n      <div class=\"left-side\">\n        <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/183907c1734627971492pdf.png\" alt=\"\">\n        <p>{{document.displayText}}</p>\n      </div>\n      <div class=\"right-side\" (click)=\"fileInput.click()\" *ngIf=\"!(document.file || document.url)\">\n        <div>Upload</div>\n      </div>\n      <div class=\"right-side\" *ngIf=\"document.file || document.url\">\n        <mat-icon>delete</mat-icon>\n      </div>\n\n      <input id=\"vendorImage\" type=\"file\" name=\"myfile\" hidden\n            accept=\".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/x-png,image/jpeg,image/jpg,.pdf, video/mp4,video/x-matroska,video/x-msvideo,video/quicktime\"\n            (change)=\"uploadDocument($event, document)\" class=\"pc-btn\"\n            id=\"browse_contact_image\" #fileInput />\n    </div>\n  </div>\n</section>\n", styles: [".list_tabs{border:1px solid #0000001A;background-color:#ffffffe5;padding:10px;border-radius:6px;gap:10px;height:50px}.heading{font-size:18px;font-weight:500}.align-items-center{align-items:center}.p-2{padding:2rem!important}.document-section{padding-right:2rem;margin-top:2rem;padding-left:2rem;display:flex;flex-direction:column;gap:10px}.document{display:flex;justify-content:space-between;background:#eeecec;padding:1.5rem;border-radius:10px}.left-side{display:flex;align-items:center;gap:20px}.left-side p{margin-bottom:0}.right-side{background:#fff;height:35px;padding-left:30px;padding-right:30px;display:flex;align-items:center;border-radius:8px;font-weight:500}@media screen and (max-width: 475px){.p-2{padding:1rem}.document-section{padding-left:0rem;padding-right:0rem}}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DocumentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-document', standalone: true, imports: [MatIconModule, CommonModule, FormsModule], template: "<section class=\"main-section p-2\">\r\n  <div class=\"list_tabs heading d-flex align-items-center\">\r\n    Required Document\r\n  </div>\r\n\r\n  <div class=\"document-section\">\r\n    <div class=\"document\" *ngFor=\"let document of documentList\">\r\n      <div class=\"left-side\">\r\n        <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/183907c1734627971492pdf.png\" alt=\"\">\r\n        <p>{{document.displayText}}</p>\r\n      </div>\r\n      <div class=\"right-side\" (click)=\"fileInput.click()\" *ngIf=\"!(document.file || document.url)\">\r\n        <div>Upload</div>\r\n      </div>\r\n      <div class=\"right-side\" *ngIf=\"document.file || document.url\">\r\n        <mat-icon>delete</mat-icon>\r\n      </div>\r\n\r\n      <input id=\"vendorImage\" type=\"file\" name=\"myfile\" hidden\r\n            accept=\".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/x-png,image/jpeg,image/jpg,.pdf, video/mp4,video/x-matroska,video/x-msvideo,video/quicktime\"\r\n            (change)=\"uploadDocument($event, document)\" class=\"pc-btn\"\r\n            id=\"browse_contact_image\" #fileInput />\r\n    </div>\r\n  </div>\r\n</section>\r\n", styles: [".list_tabs{border:1px solid #0000001A;background-color:#ffffffe5;padding:10px;border-radius:6px;gap:10px;height:50px}.heading{font-size:18px;font-weight:500}.align-items-center{align-items:center}.p-2{padding:2rem!important}.document-section{padding-right:2rem;margin-top:2rem;padding-left:2rem;display:flex;flex-direction:column;gap:10px}.document{display:flex;justify-content:space-between;background:#eeecec;padding:1.5rem;border-radius:10px}.left-side{display:flex;align-items:center;gap:20px}.left-side p{margin-bottom:0}.right-side{background:#fff;height:35px;padding-left:30px;padding-right:30px;display:flex;align-items:center;border-radius:8px;font-weight:500}@media screen and (max-width: 475px){.p-2{padding:1rem}.document-section{padding-left:0rem;padding-right:0rem}}\n"] }]
+            args: [{ selector: 'simpo-document', standalone: true, imports: [MatIconModule, CommonModule, FormsModule], template: "<section class=\"main-section p-2\">\n  <div class=\"list_tabs heading d-flex align-items-center\">\n    Required Document\n  </div>\n\n  <div class=\"document-section\">\n    <div class=\"document\" *ngFor=\"let document of documentList\">\n      <div class=\"left-side\">\n        <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/183907c1734627971492pdf.png\" alt=\"\">\n        <p>{{document.displayText}}</p>\n      </div>\n      <div class=\"right-side\" (click)=\"fileInput.click()\" *ngIf=\"!(document.file || document.url)\">\n        <div>Upload</div>\n      </div>\n      <div class=\"right-side\" *ngIf=\"document.file || document.url\">\n        <mat-icon>delete</mat-icon>\n      </div>\n\n      <input id=\"vendorImage\" type=\"file\" name=\"myfile\" hidden\n            accept=\".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/x-png,image/jpeg,image/jpg,.pdf, video/mp4,video/x-matroska,video/x-msvideo,video/quicktime\"\n            (change)=\"uploadDocument($event, document)\" class=\"pc-btn\"\n            id=\"browse_contact_image\" #fileInput />\n    </div>\n  </div>\n</section>\n", styles: [".list_tabs{border:1px solid #0000001A;background-color:#ffffffe5;padding:10px;border-radius:6px;gap:10px;height:50px}.heading{font-size:18px;font-weight:500}.align-items-center{align-items:center}.p-2{padding:2rem!important}.document-section{padding-right:2rem;margin-top:2rem;padding-left:2rem;display:flex;flex-direction:column;gap:10px}.document{display:flex;justify-content:space-between;background:#eeecec;padding:1.5rem;border-radius:10px}.left-side{display:flex;align-items:center;gap:20px}.left-side p{margin-bottom:0}.right-side{background:#fff;height:35px;padding-left:30px;padding-right:30px;display:flex;align-items:center;border-radius:8px;font-weight:500}@media screen and (max-width: 475px){.p-2{padding:1rem}.document-section{padding-left:0rem;padding-right:0rem}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { documentList: [{
                 type: Input
             }] } });
@@ -4570,14 +4570,14 @@ class CardSkeletonLoaderComponent {
         this.getScreenSize();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CardSkeletonLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CardSkeletonLoaderComponent, isStandalone: true, selector: "simpo-card-skeleton-loader", inputs: { count: "count", showTitles: "showTitles" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, ngImport: i0, template: "<div class=\"d-flex flex-column\" style=\"margin-left: 20px;\" *ngIf=\"showTitles\">\r\n    <ngx-skeleton-loader [theme]=\"{\r\n        width: '10vw',\r\n        'border-radius': '0',\r\n        height: '25px',\r\n        'margin-bottom': '20px'\r\n    }\"></ngx-skeleton-loader>\r\n    <ngx-skeleton-loader [theme]=\"{\r\n        width: '16vw',\r\n        'border-radius': '0',\r\n        height: '10px',\r\n        'margin-bottom': '10px'\r\n    }\"></ngx-skeleton-loader>\r\n</div>\r\n<div class=\"skeleton-parent\">\r\n    <div class=\"skeleton\" *ngFor=\"let _ of [].constructor(count)\">\r\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n        width: '100%',\r\n        height: '25vh',\r\n        'border-radius': '10px',\r\n        'position': 'relative',\r\n        'right': '5px'\r\n      }\">\r\n      </ngx-skeleton-loader>\r\n      <div class=\"second-section-wrapper\">\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '80%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '90%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '60%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n      </div>\r\n    </div>\r\n</div>", styles: [".skeleton-parent{display:flex;gap:15px;padding-left:20px;padding-right:20px;width:100%}.skeleton{padding:10px;border:1px solid #e5e7eb;width:24%;border-radius:10px}.wrapper{width:100%;flex:1}.second-section-wrapper{width:100%;height:auto;flex:1}@media screen and (max-width: 475px){.skeleton{width:50%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CardSkeletonLoaderComponent, isStandalone: true, selector: "simpo-card-skeleton-loader", inputs: { count: "count", showTitles: "showTitles" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, ngImport: i0, template: "<div class=\"d-flex flex-column\" style=\"margin-left: 20px;\" *ngIf=\"showTitles\">\n    <ngx-skeleton-loader [theme]=\"{\n        width: '10vw',\n        'border-radius': '0',\n        height: '25px',\n        'margin-bottom': '20px'\n    }\"></ngx-skeleton-loader>\n    <ngx-skeleton-loader [theme]=\"{\n        width: '16vw',\n        'border-radius': '0',\n        height: '10px',\n        'margin-bottom': '10px'\n    }\"></ngx-skeleton-loader>\n</div>\n<div class=\"skeleton-parent\">\n    <div class=\"skeleton\" *ngFor=\"let _ of [].constructor(count)\">\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n        width: '100%',\n        height: '25vh',\n        'border-radius': '10px',\n        'position': 'relative',\n        'right': '5px'\n      }\">\n      </ngx-skeleton-loader>\n      <div class=\"second-section-wrapper\">\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '80%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '90%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '60%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n      </div>\n    </div>\n</div>", styles: [".skeleton-parent{display:flex;gap:15px;padding-left:20px;padding-right:20px;width:100%}.skeleton{padding:10px;border:1px solid #e5e7eb;width:24%;border-radius:10px}.wrapper{width:100%;flex:1}.second-section-wrapper{width:100%;height:auto;flex:1}@media screen and (max-width: 475px){.skeleton{width:50%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CardSkeletonLoaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'simpo-card-skeleton-loader', standalone: true, imports: [
                         CommonModule,
                         SimpoComponentModule
-                    ], template: "<div class=\"d-flex flex-column\" style=\"margin-left: 20px;\" *ngIf=\"showTitles\">\r\n    <ngx-skeleton-loader [theme]=\"{\r\n        width: '10vw',\r\n        'border-radius': '0',\r\n        height: '25px',\r\n        'margin-bottom': '20px'\r\n    }\"></ngx-skeleton-loader>\r\n    <ngx-skeleton-loader [theme]=\"{\r\n        width: '16vw',\r\n        'border-radius': '0',\r\n        height: '10px',\r\n        'margin-bottom': '10px'\r\n    }\"></ngx-skeleton-loader>\r\n</div>\r\n<div class=\"skeleton-parent\">\r\n    <div class=\"skeleton\" *ngFor=\"let _ of [].constructor(count)\">\r\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n        width: '100%',\r\n        height: '25vh',\r\n        'border-radius': '10px',\r\n        'position': 'relative',\r\n        'right': '5px'\r\n      }\">\r\n      </ngx-skeleton-loader>\r\n      <div class=\"second-section-wrapper\">\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '80%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '90%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '60%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n      </div>\r\n    </div>\r\n</div>", styles: [".skeleton-parent{display:flex;gap:15px;padding-left:20px;padding-right:20px;width:100%}.skeleton{padding:10px;border:1px solid #e5e7eb;width:24%;border-radius:10px}.wrapper{width:100%;flex:1}.second-section-wrapper{width:100%;height:auto;flex:1}@media screen and (max-width: 475px){.skeleton{width:50%}}\n"] }]
+                    ], template: "<div class=\"d-flex flex-column\" style=\"margin-left: 20px;\" *ngIf=\"showTitles\">\n    <ngx-skeleton-loader [theme]=\"{\n        width: '10vw',\n        'border-radius': '0',\n        height: '25px',\n        'margin-bottom': '20px'\n    }\"></ngx-skeleton-loader>\n    <ngx-skeleton-loader [theme]=\"{\n        width: '16vw',\n        'border-radius': '0',\n        height: '10px',\n        'margin-bottom': '10px'\n    }\"></ngx-skeleton-loader>\n</div>\n<div class=\"skeleton-parent\">\n    <div class=\"skeleton\" *ngFor=\"let _ of [].constructor(count)\">\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n        width: '100%',\n        height: '25vh',\n        'border-radius': '10px',\n        'position': 'relative',\n        'right': '5px'\n      }\">\n      </ngx-skeleton-loader>\n      <div class=\"second-section-wrapper\">\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '80%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '90%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '60%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n      </div>\n    </div>\n</div>", styles: [".skeleton-parent{display:flex;gap:15px;padding-left:20px;padding-right:20px;width:100%}.skeleton{padding:10px;border:1px solid #e5e7eb;width:24%;border-radius:10px}.wrapper{width:100%;flex:1}.second-section-wrapper{width:100%;height:auto;flex:1}@media screen and (max-width: 475px){.skeleton{width:50%}}\n"] }]
         }], propDecorators: { count: [{
                 type: Input
             }], showTitles: [{
@@ -4601,11 +4601,11 @@ class SvgDividerComponent {
         this.svgType = svgData[this.dividerType || DeviderType.TILT];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SvgDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SvgDividerComponent, isStandalone: true, selector: "simpo-svg-divider", inputs: { dividerType: "dividerType", color: "color" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"custom-shape-divider-bottom\" [style.transform]=\"svgType.rotate ? 'rotate(180deg)' : ''\">\r\n  <svg [attr.fill]=\"color\" [style.transform]=\"svgType.rotateY ? 'rotateY(180deg)' : ''\" data-name=\"Layer 1\"\r\n    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1200 120\" preserveAspectRatio=\"none\">\r\n    <path [attr.d]=\"svgType.svg\" class=\"shape-fill\"></path>\r\n  </svg>\r\n</div>\r\n", styles: [".custom-shape-divider-bottom{position:absolute;bottom:0;left:0;width:100%;overflow:hidden;line-height:0}.custom-shape-divider-bottom svg{position:relative;display:block;width:calc(100% + 1.3px);height:48px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SvgDividerComponent, isStandalone: true, selector: "simpo-svg-divider", inputs: { dividerType: "dividerType", color: "color" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"custom-shape-divider-bottom\" [style.transform]=\"svgType.rotate ? 'rotate(180deg)' : ''\">\n  <svg [attr.fill]=\"color\" [style.transform]=\"svgType.rotateY ? 'rotateY(180deg)' : ''\" data-name=\"Layer 1\"\n    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1200 120\" preserveAspectRatio=\"none\">\n    <path [attr.d]=\"svgType.svg\" class=\"shape-fill\"></path>\n  </svg>\n</div>\n", styles: [".custom-shape-divider-bottom{position:absolute;bottom:0;left:0;width:100%;overflow:hidden;line-height:0}.custom-shape-divider-bottom svg{position:relative;display:block;width:calc(100% + 1.3px);height:48px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SvgDividerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-svg-divider', standalone: true, imports: [CommonModule], template: "<div class=\"custom-shape-divider-bottom\" [style.transform]=\"svgType.rotate ? 'rotate(180deg)' : ''\">\r\n  <svg [attr.fill]=\"color\" [style.transform]=\"svgType.rotateY ? 'rotateY(180deg)' : ''\" data-name=\"Layer 1\"\r\n    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1200 120\" preserveAspectRatio=\"none\">\r\n    <path [attr.d]=\"svgType.svg\" class=\"shape-fill\"></path>\r\n  </svg>\r\n</div>\r\n", styles: [".custom-shape-divider-bottom{position:absolute;bottom:0;left:0;width:100%;overflow:hidden;line-height:0}.custom-shape-divider-bottom svg{position:relative;display:block;width:calc(100% + 1.3px);height:48px}\n"] }]
+            args: [{ selector: 'simpo-svg-divider', standalone: true, imports: [CommonModule], template: "<div class=\"custom-shape-divider-bottom\" [style.transform]=\"svgType.rotate ? 'rotate(180deg)' : ''\">\n  <svg [attr.fill]=\"color\" [style.transform]=\"svgType.rotateY ? 'rotateY(180deg)' : ''\" data-name=\"Layer 1\"\n    xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1200 120\" preserveAspectRatio=\"none\">\n    <path [attr.d]=\"svgType.svg\" class=\"shape-fill\"></path>\n  </svg>\n</div>\n", styles: [".custom-shape-divider-bottom{position:absolute;bottom:0;left:0;width:100%;overflow:hidden;line-height:0}.custom-shape-divider-bottom svg{position:relative;display:block;width:calc(100% + 1.3px);height:48px}\n"] }]
         }], propDecorators: { dividerType: [{
                 type: Input
             }], color: [{
@@ -4641,11 +4641,11 @@ class PropertyComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertyComponent, isStandalone: true, selector: "simpo-property", inputs: { element: "element" }, ngImport: i0, template: "<div class=\"main-container w-100\" [ngStyle]=\"{ 'background-image': 'url(' + obj.backgroundImageUrl + ')' }\">\r\n    <div class=\"data p-3 w-100\">\r\n        <div class=\"top-data d-flex justify-content-between\">\r\n            <div class=\"top-left d-flex g-10\">\r\n                <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/697059c1737627380633Rectangle%2034625906.png\"\r\n                    alt=\"logo-text\">\r\n                <div class=\"top-left-text text-left d-flex flex-column justify-content-center\">\r\n                    <div class=\"text-heading clr-white\">{{obj.heading}}</div>\r\n                    <div class=\"d-flex sub-text\"><img\r\n                            src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\">{{obj.location.city\r\n                        + \", \" + obj.location.state}}</div>\r\n                </div>\r\n            </div>\r\n            <div class=\"top-right text-right\">\r\n                <div class=\"xl-text mb-10\">{{obj.minInvestment}}</div>\r\n                <div class=\"nrml-text\">Min.Investment</div>\r\n            </div>\r\n        </div>\r\n        <div class=\"bottom-data d-flex justify-content-between align-items-center\">\r\n            <div class=\"key-value d-flex flex-column\" *ngFor=\"let ele of obj.features\">\r\n                <div class=\"text-heading clr-grey\">{{ele.value}}</div>\r\n                <div class=\"text-heading clr-grey\">{{ele.key}}</div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".main-container{background-repeat:no-repeat;background-size:cover;height:40vh;position:relative}.data{position:absolute;bottom:0}.g-10{gap:10px}.mb-10{margin-bottom:10px}.text-heading{font-weight:700;font-size:18px}.clr-white{color:#fff}.clr-grey{color:#000000b3}.sub-text{font-weight:600;font-size:17px;color:#ffffffb3}.xl-text{font-size:28px;line-height:17px;font-weight:700;color:#f09819}.nrml-text{font-size:16px;font-weight:500;color:#fff6}.bottom-data{background:#fff;padding:10px;border-radius:8px;margin-top:10px}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertyComponent, isStandalone: true, selector: "simpo-property", inputs: { element: "element" }, ngImport: i0, template: "<div class=\"main-container w-100\" [ngStyle]=\"{ 'background-image': 'url(' + obj.backgroundImageUrl + ')' }\">\n    <div class=\"data p-3 w-100\">\n        <div class=\"top-data d-flex justify-content-between\">\n            <div class=\"top-left d-flex g-10\">\n                <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/697059c1737627380633Rectangle%2034625906.png\"\n                    alt=\"logo-text\">\n                <div class=\"top-left-text text-left d-flex flex-column justify-content-center\">\n                    <div class=\"text-heading clr-white\">{{obj.heading}}</div>\n                    <div class=\"d-flex sub-text\"><img\n                            src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\">{{obj.location.city\n                        + \", \" + obj.location.state}}</div>\n                </div>\n            </div>\n            <div class=\"top-right text-right\">\n                <div class=\"xl-text mb-10\">{{obj.minInvestment}}</div>\n                <div class=\"nrml-text\">Min.Investment</div>\n            </div>\n        </div>\n        <div class=\"bottom-data d-flex justify-content-between align-items-center\">\n            <div class=\"key-value d-flex flex-column\" *ngFor=\"let ele of obj.features\">\n                <div class=\"text-heading clr-grey\">{{ele.value}}</div>\n                <div class=\"text-heading clr-grey\">{{ele.key}}</div>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".main-container{background-repeat:no-repeat;background-size:cover;height:40vh;position:relative}.data{position:absolute;bottom:0}.g-10{gap:10px}.mb-10{margin-bottom:10px}.text-heading{font-weight:700;font-size:18px}.clr-white{color:#fff}.clr-grey{color:#000000b3}.sub-text{font-weight:600;font-size:17px;color:#ffffffb3}.xl-text{font-size:28px;line-height:17px;font-weight:700;color:#f09819}.nrml-text{font-size:16px;font-weight:500;color:#fff6}.bottom-data{background:#fff;padding:10px;border-radius:8px;margin-top:10px}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: CommonModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-property', standalone: true, imports: [NgStyle, NgFor, CommonModule], template: "<div class=\"main-container w-100\" [ngStyle]=\"{ 'background-image': 'url(' + obj.backgroundImageUrl + ')' }\">\r\n    <div class=\"data p-3 w-100\">\r\n        <div class=\"top-data d-flex justify-content-between\">\r\n            <div class=\"top-left d-flex g-10\">\r\n                <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/697059c1737627380633Rectangle%2034625906.png\"\r\n                    alt=\"logo-text\">\r\n                <div class=\"top-left-text text-left d-flex flex-column justify-content-center\">\r\n                    <div class=\"text-heading clr-white\">{{obj.heading}}</div>\r\n                    <div class=\"d-flex sub-text\"><img\r\n                            src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\">{{obj.location.city\r\n                        + \", \" + obj.location.state}}</div>\r\n                </div>\r\n            </div>\r\n            <div class=\"top-right text-right\">\r\n                <div class=\"xl-text mb-10\">{{obj.minInvestment}}</div>\r\n                <div class=\"nrml-text\">Min.Investment</div>\r\n            </div>\r\n        </div>\r\n        <div class=\"bottom-data d-flex justify-content-between align-items-center\">\r\n            <div class=\"key-value d-flex flex-column\" *ngFor=\"let ele of obj.features\">\r\n                <div class=\"text-heading clr-grey\">{{ele.value}}</div>\r\n                <div class=\"text-heading clr-grey\">{{ele.key}}</div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".main-container{background-repeat:no-repeat;background-size:cover;height:40vh;position:relative}.data{position:absolute;bottom:0}.g-10{gap:10px}.mb-10{margin-bottom:10px}.text-heading{font-weight:700;font-size:18px}.clr-white{color:#fff}.clr-grey{color:#000000b3}.sub-text{font-weight:600;font-size:17px;color:#ffffffb3}.xl-text{font-size:28px;line-height:17px;font-weight:700;color:#f09819}.nrml-text{font-size:16px;font-weight:500;color:#fff6}.bottom-data{background:#fff;padding:10px;border-radius:8px;margin-top:10px}\n"] }]
+            args: [{ selector: 'simpo-property', standalone: true, imports: [NgStyle, NgFor, CommonModule], template: "<div class=\"main-container w-100\" [ngStyle]=\"{ 'background-image': 'url(' + obj.backgroundImageUrl + ')' }\">\n    <div class=\"data p-3 w-100\">\n        <div class=\"top-data d-flex justify-content-between\">\n            <div class=\"top-left d-flex g-10\">\n                <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/697059c1737627380633Rectangle%2034625906.png\"\n                    alt=\"logo-text\">\n                <div class=\"top-left-text text-left d-flex flex-column justify-content-center\">\n                    <div class=\"text-heading clr-white\">{{obj.heading}}</div>\n                    <div class=\"d-flex sub-text\"><img\n                            src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\">{{obj.location.city\n                        + \", \" + obj.location.state}}</div>\n                </div>\n            </div>\n            <div class=\"top-right text-right\">\n                <div class=\"xl-text mb-10\">{{obj.minInvestment}}</div>\n                <div class=\"nrml-text\">Min.Investment</div>\n            </div>\n        </div>\n        <div class=\"bottom-data d-flex justify-content-between align-items-center\">\n            <div class=\"key-value d-flex flex-column\" *ngFor=\"let ele of obj.features\">\n                <div class=\"text-heading clr-grey\">{{ele.value}}</div>\n                <div class=\"text-heading clr-grey\">{{ele.key}}</div>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".main-container{background-repeat:no-repeat;background-size:cover;height:40vh;position:relative}.data{position:absolute;bottom:0}.g-10{gap:10px}.mb-10{margin-bottom:10px}.text-heading{font-weight:700;font-size:18px}.clr-white{color:#fff}.clr-grey{color:#000000b3}.sub-text{font-weight:600;font-size:17px;color:#ffffffb3}.xl-text{font-size:28px;line-height:17px;font-weight:700;color:#f09819}.nrml-text{font-size:16px;font-weight:500;color:#fff6}.bottom-data{background:#fff;padding:10px;border-radius:8px;margin-top:10px}\n"] }]
         }], propDecorators: { element: [{
                 type: Input
             }] } });
@@ -4692,11 +4692,11 @@ class PortfolioComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PortfolioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PortfolioComponent, isStandalone: true, selector: "simpo-portfolio", ngImport: i0, template: "<section class=\"main-container\">\r\n    <div class=\"head-container\">\r\n        <div class=\"icon-div text-end\"><mat-icon class=\"clr-white\">remove_red_eye</mat-icon></div>\r\n        <div class=\"top-text\">Current Portfolio Value</div>\r\n        <div class=\"main-text\">\u20B96.22 Lac</div>\r\n        <div class=\"bottom-text\">Investment increase by : &nbsp;<span class=\"amnt clr-white\">\r\n                \u20B954,290</span>&nbsp;&nbsp;<span class=\"percent-text\">+2.1%</span></div>\r\n    </div>\r\n    <div class=\"content-area\">\r\n        <div class=\"inside-header\">\r\n            <div class=\"left-section\">Investor Overview</div>\r\n            <div class=\"right-section d-flex\">\r\n                <div class=\"input-box\">\r\n                    <div class=\"filter-container d-flex align-items-center\">\r\n                        <div class=\"filter-item\">\r\n                            <input type=\"date\" class=\"custom-date-picker\" />\r\n                        </div>\r\n                        <div class=\"filter-item\">\r\n                            <select class=\"custom-dropdown\">\r\n                                <option *ngFor=\"let ele of dropDownValues\">{{ele}}</option>\r\n                            </select>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"inside-content\">\r\n            <div class=\"content1 d-flex justify-content-between\">\r\n                <div class=\"d1\" *ngFor=\"let ele of topCards\">\r\n                    <div class=\"d1_name\">{{ele.text}}</div>\r\n                    <div class=\"card1 d-flex align-items-center g-10\">\r\n                        <div class=\"card1_img d-flex align-items-center justify-content-center\">\r\n                            <div class=\"d1_img\">\r\n                                <img [src]=\"ele.icon\" alt=\"img1\">\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"no_of\">{{ele.count}}</div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"content2 d-flex align-items-center\">\r\n                <div class=\"d2 d-flex\">\r\n                    <div class=\"left_d2\">\r\n                        <div class=\"d2_value\" *ngFor=\"let value of property_list\">\r\n                            <div class=\"value_left\">\r\n                                <div class=\"value_color\" [ngStyle]=\"{'background-color': value.color}\"></div>\r\n                                <div class=\"property_name\">{{value.name}}</div>\r\n                            </div>\r\n                            <div class=\"value_right\">\r\n                                <div>{{value.sq_ft}}</div>\r\n                                <div class=\"constant_line\">|</div>\r\n                                <div>{{value.price}}</div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"d3\">\r\n                    <div class=\"d3_card1 common-style-1\">\r\n                        <div class=\"d3_card1_name\">Internal Rate of Return</div>\r\n                        <div class=\"value_d3_card1_name\"> 12%</div>\r\n                    </div>\r\n                    <div class=\"d3_card2 common-style-1\">\r\n                        <div class=\"d3_card2_name\">Annual Return</div>\r\n                        <div class=\"value_d3_card1_name\"> 10%</div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</section>", styles: ["*{font-family:DM Sans}mat-icon{font-family:Material Icons!important}.head-container{background:linear-gradient(180deg,#0d1b2a,#172b40);padding:15px;border-radius:10px}.clr-white{color:#fff!important}.top-text{font-size:14px;font-weight:600;line-height:24px;color:#fff9;margin-bottom:15px}.main-text{font-weight:700;font-size:40px;line-height:24px;color:#fff;margin-bottom:15px}.bottom-text{font-weight:500;font-size:14px;line-height:24px;color:#fff9}.percent-text{color:#36b37e}.content1{gap:2rem;padding:15px 0}.d1_img img{width:40px;height:auto}.no_of{font-size:28px;font-weight:600;line-height:24px;color:#01161e}.top_navigation_section{width:100%;height:6vh;padding:4px 2px}.backToLeads{color:#000!important}.arrowLeft{position:relative;top:2px}.edit-icon,.delete-icon{border:1px solid #F1F1F1;padding:4px 8px;border-radius:8px}.mainSection_es{height:calc(100vh + -0px);z-index:2;position:absolute;top:0;background:#fff;width:100%;overflow-y:hidden}.top_navigation{height:calc(7vh + -0px)}.botton_rendering{height:calc(93vh + -0px)}.leadDetailsSection_es{width:20%;height:100%}.activityAndNotesSection_es{width:90%;padding:5px 23px;height:100%;margin-left:5%}.companyDetailsSection-es{width:15%;padding:10px;height:100%}.content-area{background:#f1f6ff;border-radius:8px;padding:10px 0;height:calc(65vh - 72px);gap:1px}.inside-header{height:7vh;display:flex;flex-direction:row;justify-content:space-between}.left-section{align-content:center;font-weight:600;font-size:16px;padding-left:25px;color:#000}.cal{width:30%}.inside-content{border-radius:8px;height:calc(60vh - 72px);display:flex;flex-direction:column;gap:2px}.d1{background-color:#fff;border-radius:10px;border:1px solid rgba(0,0,0,.03);padding:15px;width:30%}.d1_name{text-align:start;font-size:16px;font-weight:500;line-height:24px;color:#01161e;margin-bottom:15px}.card1{gap:8px}.content2{gap:5%;border-radius:8px;width:100%}.d2{background-color:#fff;border-radius:8px;padding:4px 5px;height:25vh;width:65%;flex-direction:row;gap:2px}.left_d2{width:60%;align-content:center;height:auto;overflow-y:scroll;padding:12px}.d2_img{width:36%;align-content:center;height:20vh}.d3{border-radius:8px;width:30%;display:flex;flex-direction:column;gap:4px}.d3_card1{border-left:8px solid rgb(52,84,177)!important}.d3_card2{border-left:8px solid rgb(39,29,109)!important}.common-style-1{background-color:#fff;border-radius:8px;padding:15px;margin-bottom:15px}.d3_card1_name,.d3_card2_name{text-align:start;font-size:16px;line-height:24px;margin-bottom:10px;font-weight:500;color:#01161e}.value_d3_card1_name{text-align:start;font-size:28px;line-height:24px;font-weight:700;color:#01161e}.d2_value{display:flex;justify-content:space-between;padding:6px 2px}.value_left{display:flex;gap:8px;font-family:sans-serif;font-weight:500}.value_color{width:8px;height:21px;border-radius:3px}.value_right{display:flex;gap:2px;width:44%;justify-content:space-evenly}.filter-container{gap:10px}.filter-item{width:12vw}.custom-date-picker,.custom-dropdown{width:100%;padding:10px!important;border:1px solid rgba(0,0,0,.03);border-radius:8px;background-color:#fff;cursor:pointer;appearance:none;outline:none;font-size:14px;font-weight:500;line-height:24px;color:#000}.custom-dropdown{background-position:right 10px center;background-size:14px;padding-right:30px}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PortfolioComponent, isStandalone: true, selector: "simpo-portfolio", ngImport: i0, template: "<section class=\"main-container\">\n    <div class=\"head-container\">\n        <div class=\"icon-div text-end\"><mat-icon class=\"clr-white\">remove_red_eye</mat-icon></div>\n        <div class=\"top-text\">Current Portfolio Value</div>\n        <div class=\"main-text\">\u20B96.22 Lac</div>\n        <div class=\"bottom-text\">Investment increase by : &nbsp;<span class=\"amnt clr-white\">\n                \u20B954,290</span>&nbsp;&nbsp;<span class=\"percent-text\">+2.1%</span></div>\n    </div>\n    <div class=\"content-area\">\n        <div class=\"inside-header\">\n            <div class=\"left-section\">Investor Overview</div>\n            <div class=\"right-section d-flex\">\n                <div class=\"input-box\">\n                    <div class=\"filter-container d-flex align-items-center\">\n                        <div class=\"filter-item\">\n                            <input type=\"date\" class=\"custom-date-picker\" />\n                        </div>\n                        <div class=\"filter-item\">\n                            <select class=\"custom-dropdown\">\n                                <option *ngFor=\"let ele of dropDownValues\">{{ele}}</option>\n                            </select>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"inside-content\">\n            <div class=\"content1 d-flex justify-content-between\">\n                <div class=\"d1\" *ngFor=\"let ele of topCards\">\n                    <div class=\"d1_name\">{{ele.text}}</div>\n                    <div class=\"card1 d-flex align-items-center g-10\">\n                        <div class=\"card1_img d-flex align-items-center justify-content-center\">\n                            <div class=\"d1_img\">\n                                <img [src]=\"ele.icon\" alt=\"img1\">\n                            </div>\n                        </div>\n                        <div class=\"no_of\">{{ele.count}}</div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"content2 d-flex align-items-center\">\n                <div class=\"d2 d-flex\">\n                    <div class=\"left_d2\">\n                        <div class=\"d2_value\" *ngFor=\"let value of property_list\">\n                            <div class=\"value_left\">\n                                <div class=\"value_color\" [ngStyle]=\"{'background-color': value.color}\"></div>\n                                <div class=\"property_name\">{{value.name}}</div>\n                            </div>\n                            <div class=\"value_right\">\n                                <div>{{value.sq_ft}}</div>\n                                <div class=\"constant_line\">|</div>\n                                <div>{{value.price}}</div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"d3\">\n                    <div class=\"d3_card1 common-style-1\">\n                        <div class=\"d3_card1_name\">Internal Rate of Return</div>\n                        <div class=\"value_d3_card1_name\"> 12%</div>\n                    </div>\n                    <div class=\"d3_card2 common-style-1\">\n                        <div class=\"d3_card2_name\">Annual Return</div>\n                        <div class=\"value_d3_card1_name\"> 10%</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</section>", styles: ["*{font-family:DM Sans}mat-icon{font-family:Material Icons!important}.head-container{background:linear-gradient(180deg,#0d1b2a,#172b40);padding:15px;border-radius:10px}.clr-white{color:#fff!important}.top-text{font-size:14px;font-weight:600;line-height:24px;color:#fff9;margin-bottom:15px}.main-text{font-weight:700;font-size:40px;line-height:24px;color:#fff;margin-bottom:15px}.bottom-text{font-weight:500;font-size:14px;line-height:24px;color:#fff9}.percent-text{color:#36b37e}.content1{gap:2rem;padding:15px 0}.d1_img img{width:40px;height:auto}.no_of{font-size:28px;font-weight:600;line-height:24px;color:#01161e}.top_navigation_section{width:100%;height:6vh;padding:4px 2px}.backToLeads{color:#000!important}.arrowLeft{position:relative;top:2px}.edit-icon,.delete-icon{border:1px solid #F1F1F1;padding:4px 8px;border-radius:8px}.mainSection_es{height:calc(100vh + -0px);z-index:2;position:absolute;top:0;background:#fff;width:100%;overflow-y:hidden}.top_navigation{height:calc(7vh + -0px)}.botton_rendering{height:calc(93vh + -0px)}.leadDetailsSection_es{width:20%;height:100%}.activityAndNotesSection_es{width:90%;padding:5px 23px;height:100%;margin-left:5%}.companyDetailsSection-es{width:15%;padding:10px;height:100%}.content-area{background:#f1f6ff;border-radius:8px;padding:10px 0;height:calc(65vh - 72px);gap:1px}.inside-header{height:7vh;display:flex;flex-direction:row;justify-content:space-between}.left-section{align-content:center;font-weight:600;font-size:16px;padding-left:25px;color:#000}.cal{width:30%}.inside-content{border-radius:8px;height:calc(60vh - 72px);display:flex;flex-direction:column;gap:2px}.d1{background-color:#fff;border-radius:10px;border:1px solid rgba(0,0,0,.03);padding:15px;width:30%}.d1_name{text-align:start;font-size:16px;font-weight:500;line-height:24px;color:#01161e;margin-bottom:15px}.card1{gap:8px}.content2{gap:5%;border-radius:8px;width:100%}.d2{background-color:#fff;border-radius:8px;padding:4px 5px;height:25vh;width:65%;flex-direction:row;gap:2px}.left_d2{width:60%;align-content:center;height:auto;overflow-y:scroll;padding:12px}.d2_img{width:36%;align-content:center;height:20vh}.d3{border-radius:8px;width:30%;display:flex;flex-direction:column;gap:4px}.d3_card1{border-left:8px solid rgb(52,84,177)!important}.d3_card2{border-left:8px solid rgb(39,29,109)!important}.common-style-1{background-color:#fff;border-radius:8px;padding:15px;margin-bottom:15px}.d3_card1_name,.d3_card2_name{text-align:start;font-size:16px;line-height:24px;margin-bottom:10px;font-weight:500;color:#01161e}.value_d3_card1_name{text-align:start;font-size:28px;line-height:24px;font-weight:700;color:#01161e}.d2_value{display:flex;justify-content:space-between;padding:6px 2px}.value_left{display:flex;gap:8px;font-family:sans-serif;font-weight:500}.value_color{width:8px;height:21px;border-radius:3px}.value_right{display:flex;gap:2px;width:44%;justify-content:space-evenly}.filter-container{gap:10px}.filter-item{width:12vw}.custom-date-picker,.custom-dropdown{width:100%;padding:10px!important;border:1px solid rgba(0,0,0,.03);border-radius:8px;background-color:#fff;cursor:pointer;appearance:none;outline:none;font-size:14px;font-weight:500;line-height:24px;color:#000}.custom-dropdown{background-position:right 10px center;background-size:14px;padding-right:30px}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PortfolioComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-portfolio', standalone: true, imports: [MatIcon, CommonModule], template: "<section class=\"main-container\">\r\n    <div class=\"head-container\">\r\n        <div class=\"icon-div text-end\"><mat-icon class=\"clr-white\">remove_red_eye</mat-icon></div>\r\n        <div class=\"top-text\">Current Portfolio Value</div>\r\n        <div class=\"main-text\">\u20B96.22 Lac</div>\r\n        <div class=\"bottom-text\">Investment increase by : &nbsp;<span class=\"amnt clr-white\">\r\n                \u20B954,290</span>&nbsp;&nbsp;<span class=\"percent-text\">+2.1%</span></div>\r\n    </div>\r\n    <div class=\"content-area\">\r\n        <div class=\"inside-header\">\r\n            <div class=\"left-section\">Investor Overview</div>\r\n            <div class=\"right-section d-flex\">\r\n                <div class=\"input-box\">\r\n                    <div class=\"filter-container d-flex align-items-center\">\r\n                        <div class=\"filter-item\">\r\n                            <input type=\"date\" class=\"custom-date-picker\" />\r\n                        </div>\r\n                        <div class=\"filter-item\">\r\n                            <select class=\"custom-dropdown\">\r\n                                <option *ngFor=\"let ele of dropDownValues\">{{ele}}</option>\r\n                            </select>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"inside-content\">\r\n            <div class=\"content1 d-flex justify-content-between\">\r\n                <div class=\"d1\" *ngFor=\"let ele of topCards\">\r\n                    <div class=\"d1_name\">{{ele.text}}</div>\r\n                    <div class=\"card1 d-flex align-items-center g-10\">\r\n                        <div class=\"card1_img d-flex align-items-center justify-content-center\">\r\n                            <div class=\"d1_img\">\r\n                                <img [src]=\"ele.icon\" alt=\"img1\">\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"no_of\">{{ele.count}}</div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"content2 d-flex align-items-center\">\r\n                <div class=\"d2 d-flex\">\r\n                    <div class=\"left_d2\">\r\n                        <div class=\"d2_value\" *ngFor=\"let value of property_list\">\r\n                            <div class=\"value_left\">\r\n                                <div class=\"value_color\" [ngStyle]=\"{'background-color': value.color}\"></div>\r\n                                <div class=\"property_name\">{{value.name}}</div>\r\n                            </div>\r\n                            <div class=\"value_right\">\r\n                                <div>{{value.sq_ft}}</div>\r\n                                <div class=\"constant_line\">|</div>\r\n                                <div>{{value.price}}</div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"d3\">\r\n                    <div class=\"d3_card1 common-style-1\">\r\n                        <div class=\"d3_card1_name\">Internal Rate of Return</div>\r\n                        <div class=\"value_d3_card1_name\"> 12%</div>\r\n                    </div>\r\n                    <div class=\"d3_card2 common-style-1\">\r\n                        <div class=\"d3_card2_name\">Annual Return</div>\r\n                        <div class=\"value_d3_card1_name\"> 10%</div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</section>", styles: ["*{font-family:DM Sans}mat-icon{font-family:Material Icons!important}.head-container{background:linear-gradient(180deg,#0d1b2a,#172b40);padding:15px;border-radius:10px}.clr-white{color:#fff!important}.top-text{font-size:14px;font-weight:600;line-height:24px;color:#fff9;margin-bottom:15px}.main-text{font-weight:700;font-size:40px;line-height:24px;color:#fff;margin-bottom:15px}.bottom-text{font-weight:500;font-size:14px;line-height:24px;color:#fff9}.percent-text{color:#36b37e}.content1{gap:2rem;padding:15px 0}.d1_img img{width:40px;height:auto}.no_of{font-size:28px;font-weight:600;line-height:24px;color:#01161e}.top_navigation_section{width:100%;height:6vh;padding:4px 2px}.backToLeads{color:#000!important}.arrowLeft{position:relative;top:2px}.edit-icon,.delete-icon{border:1px solid #F1F1F1;padding:4px 8px;border-radius:8px}.mainSection_es{height:calc(100vh + -0px);z-index:2;position:absolute;top:0;background:#fff;width:100%;overflow-y:hidden}.top_navigation{height:calc(7vh + -0px)}.botton_rendering{height:calc(93vh + -0px)}.leadDetailsSection_es{width:20%;height:100%}.activityAndNotesSection_es{width:90%;padding:5px 23px;height:100%;margin-left:5%}.companyDetailsSection-es{width:15%;padding:10px;height:100%}.content-area{background:#f1f6ff;border-radius:8px;padding:10px 0;height:calc(65vh - 72px);gap:1px}.inside-header{height:7vh;display:flex;flex-direction:row;justify-content:space-between}.left-section{align-content:center;font-weight:600;font-size:16px;padding-left:25px;color:#000}.cal{width:30%}.inside-content{border-radius:8px;height:calc(60vh - 72px);display:flex;flex-direction:column;gap:2px}.d1{background-color:#fff;border-radius:10px;border:1px solid rgba(0,0,0,.03);padding:15px;width:30%}.d1_name{text-align:start;font-size:16px;font-weight:500;line-height:24px;color:#01161e;margin-bottom:15px}.card1{gap:8px}.content2{gap:5%;border-radius:8px;width:100%}.d2{background-color:#fff;border-radius:8px;padding:4px 5px;height:25vh;width:65%;flex-direction:row;gap:2px}.left_d2{width:60%;align-content:center;height:auto;overflow-y:scroll;padding:12px}.d2_img{width:36%;align-content:center;height:20vh}.d3{border-radius:8px;width:30%;display:flex;flex-direction:column;gap:4px}.d3_card1{border-left:8px solid rgb(52,84,177)!important}.d3_card2{border-left:8px solid rgb(39,29,109)!important}.common-style-1{background-color:#fff;border-radius:8px;padding:15px;margin-bottom:15px}.d3_card1_name,.d3_card2_name{text-align:start;font-size:16px;line-height:24px;margin-bottom:10px;font-weight:500;color:#01161e}.value_d3_card1_name{text-align:start;font-size:28px;line-height:24px;font-weight:700;color:#01161e}.d2_value{display:flex;justify-content:space-between;padding:6px 2px}.value_left{display:flex;gap:8px;font-family:sans-serif;font-weight:500}.value_color{width:8px;height:21px;border-radius:3px}.value_right{display:flex;gap:2px;width:44%;justify-content:space-evenly}.filter-container{gap:10px}.filter-item{width:12vw}.custom-date-picker,.custom-dropdown{width:100%;padding:10px!important;border:1px solid rgba(0,0,0,.03);border-radius:8px;background-color:#fff;cursor:pointer;appearance:none;outline:none;font-size:14px;font-weight:500;line-height:24px;color:#000}.custom-dropdown{background-position:right 10px center;background-size:14px;padding-right:30px}\n"] }]
+            args: [{ selector: 'simpo-portfolio', standalone: true, imports: [MatIcon, CommonModule], template: "<section class=\"main-container\">\n    <div class=\"head-container\">\n        <div class=\"icon-div text-end\"><mat-icon class=\"clr-white\">remove_red_eye</mat-icon></div>\n        <div class=\"top-text\">Current Portfolio Value</div>\n        <div class=\"main-text\">\u20B96.22 Lac</div>\n        <div class=\"bottom-text\">Investment increase by : &nbsp;<span class=\"amnt clr-white\">\n                \u20B954,290</span>&nbsp;&nbsp;<span class=\"percent-text\">+2.1%</span></div>\n    </div>\n    <div class=\"content-area\">\n        <div class=\"inside-header\">\n            <div class=\"left-section\">Investor Overview</div>\n            <div class=\"right-section d-flex\">\n                <div class=\"input-box\">\n                    <div class=\"filter-container d-flex align-items-center\">\n                        <div class=\"filter-item\">\n                            <input type=\"date\" class=\"custom-date-picker\" />\n                        </div>\n                        <div class=\"filter-item\">\n                            <select class=\"custom-dropdown\">\n                                <option *ngFor=\"let ele of dropDownValues\">{{ele}}</option>\n                            </select>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"inside-content\">\n            <div class=\"content1 d-flex justify-content-between\">\n                <div class=\"d1\" *ngFor=\"let ele of topCards\">\n                    <div class=\"d1_name\">{{ele.text}}</div>\n                    <div class=\"card1 d-flex align-items-center g-10\">\n                        <div class=\"card1_img d-flex align-items-center justify-content-center\">\n                            <div class=\"d1_img\">\n                                <img [src]=\"ele.icon\" alt=\"img1\">\n                            </div>\n                        </div>\n                        <div class=\"no_of\">{{ele.count}}</div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"content2 d-flex align-items-center\">\n                <div class=\"d2 d-flex\">\n                    <div class=\"left_d2\">\n                        <div class=\"d2_value\" *ngFor=\"let value of property_list\">\n                            <div class=\"value_left\">\n                                <div class=\"value_color\" [ngStyle]=\"{'background-color': value.color}\"></div>\n                                <div class=\"property_name\">{{value.name}}</div>\n                            </div>\n                            <div class=\"value_right\">\n                                <div>{{value.sq_ft}}</div>\n                                <div class=\"constant_line\">|</div>\n                                <div>{{value.price}}</div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"d3\">\n                    <div class=\"d3_card1 common-style-1\">\n                        <div class=\"d3_card1_name\">Internal Rate of Return</div>\n                        <div class=\"value_d3_card1_name\"> 12%</div>\n                    </div>\n                    <div class=\"d3_card2 common-style-1\">\n                        <div class=\"d3_card2_name\">Annual Return</div>\n                        <div class=\"value_d3_card1_name\"> 10%</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</section>", styles: ["*{font-family:DM Sans}mat-icon{font-family:Material Icons!important}.head-container{background:linear-gradient(180deg,#0d1b2a,#172b40);padding:15px;border-radius:10px}.clr-white{color:#fff!important}.top-text{font-size:14px;font-weight:600;line-height:24px;color:#fff9;margin-bottom:15px}.main-text{font-weight:700;font-size:40px;line-height:24px;color:#fff;margin-bottom:15px}.bottom-text{font-weight:500;font-size:14px;line-height:24px;color:#fff9}.percent-text{color:#36b37e}.content1{gap:2rem;padding:15px 0}.d1_img img{width:40px;height:auto}.no_of{font-size:28px;font-weight:600;line-height:24px;color:#01161e}.top_navigation_section{width:100%;height:6vh;padding:4px 2px}.backToLeads{color:#000!important}.arrowLeft{position:relative;top:2px}.edit-icon,.delete-icon{border:1px solid #F1F1F1;padding:4px 8px;border-radius:8px}.mainSection_es{height:calc(100vh + -0px);z-index:2;position:absolute;top:0;background:#fff;width:100%;overflow-y:hidden}.top_navigation{height:calc(7vh + -0px)}.botton_rendering{height:calc(93vh + -0px)}.leadDetailsSection_es{width:20%;height:100%}.activityAndNotesSection_es{width:90%;padding:5px 23px;height:100%;margin-left:5%}.companyDetailsSection-es{width:15%;padding:10px;height:100%}.content-area{background:#f1f6ff;border-radius:8px;padding:10px 0;height:calc(65vh - 72px);gap:1px}.inside-header{height:7vh;display:flex;flex-direction:row;justify-content:space-between}.left-section{align-content:center;font-weight:600;font-size:16px;padding-left:25px;color:#000}.cal{width:30%}.inside-content{border-radius:8px;height:calc(60vh - 72px);display:flex;flex-direction:column;gap:2px}.d1{background-color:#fff;border-radius:10px;border:1px solid rgba(0,0,0,.03);padding:15px;width:30%}.d1_name{text-align:start;font-size:16px;font-weight:500;line-height:24px;color:#01161e;margin-bottom:15px}.card1{gap:8px}.content2{gap:5%;border-radius:8px;width:100%}.d2{background-color:#fff;border-radius:8px;padding:4px 5px;height:25vh;width:65%;flex-direction:row;gap:2px}.left_d2{width:60%;align-content:center;height:auto;overflow-y:scroll;padding:12px}.d2_img{width:36%;align-content:center;height:20vh}.d3{border-radius:8px;width:30%;display:flex;flex-direction:column;gap:4px}.d3_card1{border-left:8px solid rgb(52,84,177)!important}.d3_card2{border-left:8px solid rgb(39,29,109)!important}.common-style-1{background-color:#fff;border-radius:8px;padding:15px;margin-bottom:15px}.d3_card1_name,.d3_card2_name{text-align:start;font-size:16px;line-height:24px;margin-bottom:10px;font-weight:500;color:#01161e}.value_d3_card1_name{text-align:start;font-size:28px;line-height:24px;font-weight:700;color:#01161e}.d2_value{display:flex;justify-content:space-between;padding:6px 2px}.value_left{display:flex;gap:8px;font-family:sans-serif;font-weight:500}.value_color{width:8px;height:21px;border-radius:3px}.value_right{display:flex;gap:2px;width:44%;justify-content:space-evenly}.filter-container{gap:10px}.filter-item{width:12vw}.custom-date-picker,.custom-dropdown{width:100%;padding:10px!important;border:1px solid rgba(0,0,0,.03);border-radius:8px;background-color:#fff;cursor:pointer;appearance:none;outline:none;font-size:14px;font-weight:500;line-height:24px;color:#000}.custom-dropdown{background-position:right 10px center;background-size:14px;padding-right:30px}\n"] }]
         }] });
 
 class SimpoElementsModule {
@@ -7161,7 +7161,7 @@ class VideoSectionComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: VideoSectionComponent, deps: [{ token: i1.DomSanitizer }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: VideoSectionComponent, isStandalone: true, selector: "simpo-video-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [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\">\r\n    <div class=\"container-fluid main-section\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n      [simpoLayout]=\"style?.layout\" [spacingHorizontal]=\"stylesLayout\" [ngClass]=\"{'px-0 py-0': style?.fullWidth}\">\r\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n        <!-- <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large content-side\"\r\n          [simpoContentTitleSpace]=\"headingSpace\">\r\n          <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n        </div> -->\r\n\r\n\r\n        <div class=\"video-section\" [ngClass]=\"{'h-100 w-100': style?.layout?.fit === 'screen'}\">\r\n          <iframe class=\"video\" [ngClass]=\"{\r\n          'vh-60 w-100': style?.layout?.fit === 'content', \r\n          'h-100 w-100': style?.layout?.fit === 'screen'\r\n        }\" [src]=\"getVideoUrl(content?.videoLink?.url ?? '')\" frameborder=\"0\" allowfullscreen *ngIf=\"!content?.videoLink?.url?.includes('.mp4')\"></iframe>\r\n        <ng-container *ngIf=\"content?.videoLink?.url?.includes('.mp4')\">\r\n          <video class=\"video w-100\" [ngClass]=\"{\r\n          'vh-60 w-100': style?.layout?.fit === 'content',\r\n          'h-100 w-100': style?.layout?.fit === 'screen'  }\" controls autoplay infinite>\r\n          <source [src]=\"content?.videoLink?.url\" type=\"video/mp4\">\r\n        </video>\r\n        </ng-container>\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: [".total-container{height:auto;position:relative}.video{width:100%;height:100vh}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!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){.video{object-fit:cover;aspect-ratio:16/9}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.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: 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: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: VideoSectionComponent, isStandalone: true, selector: "simpo-video-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [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\">\r\n    <div class=\"container-fluid main-section\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n      [simpoLayout]=\"style?.layout\" [spacingHorizontal]=\"stylesLayout\" [ngClass]=\"{'px-0 py-0': style?.fullWidth}\">\r\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n        <!-- <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large content-side\"\r\n          [simpoContentTitleSpace]=\"headingSpace\">\r\n          <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n        </div> -->\r\n\r\n\r\n        <div class=\"video-section\" [ngClass]=\"{'h-100 w-100': style?.layout?.fit === 'screen'}\">\r\n          <iframe class=\"video\" [ngClass]=\"{\r\n          'vh-60 w-100': style?.layout?.fit === 'content', \r\n          'h-100 w-100': style?.layout?.fit === 'screen'\r\n        }\" [src]=\"getVideoUrl(content?.videoLink?.url ?? '')\" frameborder=\"0\" allowfullscreen *ngIf=\"!content?.videoLink?.url?.includes('.mp4')\"></iframe>\r\n        <ng-container *ngIf=\"content?.videoLink?.url?.includes('.mp4')\">\r\n          <video class=\"video w-100\" [ngClass]=\"{\r\n          'vh-60 w-100': style?.layout?.fit === 'content',\r\n          'h-100 w-100': style?.layout?.fit === 'screen'  }\" controls autoplay infinite>\r\n          <source [src]=\"content?.videoLink?.url\" type=\"video/mp4\">\r\n        </video>\r\n        </ng-container>\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: [".total-container{height:auto;position:relative}.video{width:100%;height:100vh}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.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: 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: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: VideoSectionComponent, decorators: [{
             type: Component,
@@ -7191,7 +7191,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         PositionLayoutDirectiveDirective,
                         TextBackgroundDirectiveDirective,
                         SpacingHorizontalDirective
-                    ], 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\">\r\n    <div class=\"container-fluid main-section\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n      [simpoLayout]=\"style?.layout\" [spacingHorizontal]=\"stylesLayout\" [ngClass]=\"{'px-0 py-0': style?.fullWidth}\">\r\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n        <!-- <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large content-side\"\r\n          [simpoContentTitleSpace]=\"headingSpace\">\r\n          <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n        </div> -->\r\n\r\n\r\n        <div class=\"video-section\" [ngClass]=\"{'h-100 w-100': style?.layout?.fit === 'screen'}\">\r\n          <iframe class=\"video\" [ngClass]=\"{\r\n          'vh-60 w-100': style?.layout?.fit === 'content', \r\n          'h-100 w-100': style?.layout?.fit === 'screen'\r\n        }\" [src]=\"getVideoUrl(content?.videoLink?.url ?? '')\" frameborder=\"0\" allowfullscreen *ngIf=\"!content?.videoLink?.url?.includes('.mp4')\"></iframe>\r\n        <ng-container *ngIf=\"content?.videoLink?.url?.includes('.mp4')\">\r\n          <video class=\"video w-100\" [ngClass]=\"{\r\n          'vh-60 w-100': style?.layout?.fit === 'content',\r\n          'h-100 w-100': style?.layout?.fit === 'screen'  }\" controls autoplay infinite>\r\n          <source [src]=\"content?.videoLink?.url\" type=\"video/mp4\">\r\n        </video>\r\n        </ng-container>\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: [".total-container{height:auto;position:relative}.video{width:100%;height:100vh}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!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){.video{object-fit:cover;aspect-ratio:16/9}}\n"] }]
+                    ], 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\">\r\n    <div class=\"container-fluid main-section\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n      [simpoLayout]=\"style?.layout\" [spacingHorizontal]=\"stylesLayout\" [ngClass]=\"{'px-0 py-0': style?.fullWidth}\">\r\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n        <!-- <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large content-side\"\r\n          [simpoContentTitleSpace]=\"headingSpace\">\r\n          <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n        </div> -->\r\n\r\n\r\n        <div class=\"video-section\" [ngClass]=\"{'h-100 w-100': style?.layout?.fit === 'screen'}\">\r\n          <iframe class=\"video\" [ngClass]=\"{\r\n          'vh-60 w-100': style?.layout?.fit === 'content', \r\n          'h-100 w-100': style?.layout?.fit === 'screen'\r\n        }\" [src]=\"getVideoUrl(content?.videoLink?.url ?? '')\" frameborder=\"0\" allowfullscreen *ngIf=\"!content?.videoLink?.url?.includes('.mp4')\"></iframe>\r\n        <ng-container *ngIf=\"content?.videoLink?.url?.includes('.mp4')\">\r\n          <video class=\"video w-100\" [ngClass]=\"{\r\n          'vh-60 w-100': style?.layout?.fit === 'content',\r\n          'h-100 w-100': style?.layout?.fit === 'screen'  }\" controls autoplay infinite>\r\n          <source [src]=\"content?.videoLink?.url\" type=\"video/mp4\">\r\n        </video>\r\n        </ng-container>\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: [".total-container{height:auto;position:relative}.video{width:100%;height:100vh}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
         }], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -8115,11 +8115,11 @@ class AddressListComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddressListComponent, deps: [{ token: i1$2.MatDialog }, { token: MAT_DIALOG_DATA }, { token: i1$2.MatDialogRef }, { token: StorageServiceService }, { token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AddressListComponent, isStandalone: true, selector: "simpo-address-list", ngImport: i0, template: "<div class=\"address-selection-container\">\r\n  <!-- Header -->\r\n  <div class=\"header\">\r\n    <h2 class=\"title\">Select Address</h2>\r\n    <button class=\"close-btn\" (click)=\"closeDialog()\">\u2715</button>\r\n  </div>\r\n\r\n  <!-- Add New Address Button -->\r\n  <div class=\"content\">\r\n    <button class=\"add-new-address-btn\" (click)=\"addOrEditAddress(-1)\">\r\n      ADD NEW ADDRESS\r\n    </button>\r\n\r\n    <!-- Currently Selected Section -->\r\n    <div class=\"currently-selected-section\">\r\n      <h3 class=\"section-title\">Currently Selected</h3>\r\n\r\n      <div class=\"address-card selected\">\r\n        <div class=\"address-header\">\r\n          <span class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</span>\r\n          <!-- <div class=\"radio-button checked\">\r\n            <div class=\"radio-inner\"></div>\r\n          </div> -->\r\n        </div>\r\n\r\n        <p class=\"address-text\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\r\n          {{defaultAddress?.stateName}}</p>\r\n\r\n        <p class=\"mobile-text\">\r\n          <strong>Mobile: {{defaultAddress?.receiverPhone}}</strong>\r\n        </p>\r\n\r\n        <div class=\"address-actions\">\r\n          <button class=\"action-btn delete-btn\" (click)=\"deleteAddress(defaultAddressIndex)\"\r\n            *ngIf=\"(this.addressList?.length || 0) > 1 && !deleteLoading\">\r\n            DELETE\r\n          </button>\r\n          <button class=\"action-btn delete-btn loading-btn\" *ngIf=\"deleteLoading\">\r\n            <mat-spinner></mat-spinner> Loading\r\n          </button>\r\n          <button class=\"action-btn edit-btn\"\r\n            (click)=\"addOrEditAddress(defaultAddressIndex != -1 ? defaultAddressIndex : 0, defaultAddress)\">\r\n            EDIT\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <ng-container *ngIf=\"(addressList?.length || 0) > 1\">\r\n        <h3 class=\"section-title\">Others Address</h3>\r\n        <div>\r\n          <ng-container *ngFor=\"let address of addressList;let i = index\">\r\n            <div class=\"other-address-card\" (click)=\"selectedAddressIndex = i\"\r\n              [ngClass]=\"{'selected-address': selectedAddressIndex === i}\" *ngIf=\"!address.default\">\r\n              <div class=\"address-header\">\r\n                <span class=\"address-name\">{{address?.receiverName}} ({{address?.addressType}})</span>\r\n                <!-- <div class=\"radio-button checked\">\r\n                  <div class=\"radio-inner\"></div>\r\n                </div> -->\r\n              </div>\r\n\r\n              <p class=\"address-text\">{{address?.addressLine1}}, {{address?.cityName}},\r\n                {{defaultAddress?.stateName}}</p>\r\n\r\n              <p class=\"mobile-text\">\r\n                <strong>Mobile: {{address.receiverPhone}}</strong>\r\n              </p>\r\n\r\n              <div class=\"address-actions\">\r\n                <button class=\"action-btn delete-btn other-address-btn\" (click)=\"deleteAddress(i)\" *ngIf=\"!deleteLoading\">\r\n                  DELETE\r\n                </button>\r\n                <button class=\"action-btn delete-btn loading-btn\" *ngIf=\"deleteLoading\">\r\n                  <mat-spinner></mat-spinner> Loading\r\n                </button>\r\n                <button class=\"action-btn edit-btn other-address-btn\" (click)=\"addOrEditAddress(i, address)\">\r\n                  EDIT\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n  </div>\r\n  <!-- Confirm Button -->\r\n  <div class=\"footer\">\r\n    <button class=\"confirm-btn\" *ngIf=\"!isLoading\" (click)=\"markAddressAsDefault()\">\r\n      CONFIRM\r\n    </button>\r\n    <button class=\"confirm-btn loading-btn\" *ngIf=\"isLoading\"><mat-spinner></mat-spinner> Loading</button>\r\n  </div>\r\n</div>\r\n", styles: ["*{font-family:var(--primary-font-family)}.address-selection-container{background:#fff;border-radius:12px;width:100%;max-width:500px}.header{display:flex;justify-content:space-between;align-items:center;padding:0 20px;height:60px;background-color:#f6f3f9}.content{padding:20px;height:calc(100vh - 120px);overflow:scroll}.title{font-size:18px;font-weight:600;color:#000}.close-btn{background:none;border:none;cursor:pointer;padding:4px;color:#666;font-size:24px;line-height:1;width:max-content!important}.close-btn:hover{color:#333}.add-new-address-btn{font-size:1rem!important;font-weight:700!important;padding:6px;background:#fff;border:1px solid rgb(229,221,255);border-radius:8px;color:#000;cursor:pointer;transition:all .2s;box-shadow:#0000000a 0 4px 8px;width:100%}.add-new-address-btn:hover{border-color:#fbf9ff;background-color:#faf7ff}.section-title{font-size:16px;font-weight:600;color:#000;margin-bottom:16px;margin-top:16px}.address-card{border:1px solid #e0e0e0;border-radius:12px;padding:20px;margin-bottom:16px;cursor:pointer;transition:all .2s}.other-address-card{border:1px solid rgb(238,232,255);box-shadow:#0000000a 0 4px 8px;background:#fbf9ff;border-radius:12px;padding:20px;margin-bottom:16px;cursor:pointer;transition:all .2s}.address-card.selected,.selected-address{border-color:#000}.address-card:hover{border-color:#fbf9ff}.address-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.address-name{font-size:16px;font-weight:600;color:#000}.radio-button{width:20px;height:20px;border:2px solid #ccc;border-radius:50%;display:flex;justify-content:center;align-items:center;transition:all .2s}.radio-button.checked{border-color:#000;background-color:#000}.radio-inner{width:8px;height:8px;background-color:#fff;border-radius:50%}.address-text{color:#000;font-size:14px;line-height:1.4;margin-bottom:8px}.mobile-text{color:#000;font-size:14px;margin-bottom:16px}.address-actions{display:flex;gap:24px}.action-btn{background:none;border:none;font-size:12px;font-weight:600;cursor:pointer;padding:4px 0;transition:opacity .2s}.delete-btn,.edit-btn{box-shadow:#0000000a 0 4px 8px;background:#fbf9ff;color:#000;font-size:14px!important;border-radius:5px}.action-btn:hover{opacity:.7}.confirm-btn{font-size:1rem!important;font-weight:700!important;padding:6px;background:#fff;border:1px solid rgb(229,221,255);border-radius:8px;color:#000;cursor:pointer;transition:all .2s;box-shadow:#0000000a 0 4px 8px;width:90%!important}.confirm-btn:hover{background:#fbf9ff}@media (max-width: 480px){.title{font-size:18px}}.other-address-btn{background-color:#fff!important}.footer{display:flex;align-items:center;justify-content:center;height:60px;position:absolute;width:100%;bottom:0;box-shadow:#0000000a 0 -1px 8px}.loading-btn{display:flex;gap:10px;justify-content:center}.loading-btn mat-spinner{height:20px!important;width:20px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i10$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AddressListComponent, isStandalone: true, selector: "simpo-address-list", ngImport: i0, template: "<div class=\"address-selection-container\">\n  <!-- Header -->\n  <div class=\"header\">\n    <h2 class=\"title\">Select Address</h2>\n    <button class=\"close-btn\" (click)=\"closeDialog()\">\u2715</button>\n  </div>\n\n  <!-- Add New Address Button -->\n  <div class=\"content\">\n    <button class=\"add-new-address-btn\" (click)=\"addOrEditAddress(-1)\">\n      ADD NEW ADDRESS\n    </button>\n\n    <!-- Currently Selected Section -->\n    <div class=\"currently-selected-section\">\n      <h3 class=\"section-title\">Currently Selected</h3>\n\n      <div class=\"address-card selected\">\n        <div class=\"address-header\">\n          <span class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</span>\n          <!-- <div class=\"radio-button checked\">\n            <div class=\"radio-inner\"></div>\n          </div> -->\n        </div>\n\n        <p class=\"address-text\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\n          {{defaultAddress?.stateName}}</p>\n\n        <p class=\"mobile-text\">\n          <strong>Mobile: {{defaultAddress?.receiverPhone}}</strong>\n        </p>\n\n        <div class=\"address-actions\">\n          <button class=\"action-btn delete-btn\" (click)=\"deleteAddress(defaultAddressIndex)\"\n            *ngIf=\"(this.addressList?.length || 0) > 1 && !deleteLoading\">\n            DELETE\n          </button>\n          <button class=\"action-btn delete-btn loading-btn\" *ngIf=\"deleteLoading\">\n            <mat-spinner></mat-spinner> Loading\n          </button>\n          <button class=\"action-btn edit-btn\"\n            (click)=\"addOrEditAddress(defaultAddressIndex != -1 ? defaultAddressIndex : 0, defaultAddress)\">\n            EDIT\n          </button>\n        </div>\n      </div>\n\n      <ng-container *ngIf=\"(addressList?.length || 0) > 1\">\n        <h3 class=\"section-title\">Others Address</h3>\n        <div>\n          <ng-container *ngFor=\"let address of addressList;let i = index\">\n            <div class=\"other-address-card\" (click)=\"selectedAddressIndex = i\"\n              [ngClass]=\"{'selected-address': selectedAddressIndex === i}\" *ngIf=\"!address.default\">\n              <div class=\"address-header\">\n                <span class=\"address-name\">{{address?.receiverName}} ({{address?.addressType}})</span>\n                <!-- <div class=\"radio-button checked\">\n                  <div class=\"radio-inner\"></div>\n                </div> -->\n              </div>\n\n              <p class=\"address-text\">{{address?.addressLine1}}, {{address?.cityName}},\n                {{defaultAddress?.stateName}}</p>\n\n              <p class=\"mobile-text\">\n                <strong>Mobile: {{address.receiverPhone}}</strong>\n              </p>\n\n              <div class=\"address-actions\">\n                <button class=\"action-btn delete-btn other-address-btn\" (click)=\"deleteAddress(i)\" *ngIf=\"!deleteLoading\">\n                  DELETE\n                </button>\n                <button class=\"action-btn delete-btn loading-btn\" *ngIf=\"deleteLoading\">\n                  <mat-spinner></mat-spinner> Loading\n                </button>\n                <button class=\"action-btn edit-btn other-address-btn\" (click)=\"addOrEditAddress(i, address)\">\n                  EDIT\n                </button>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n\n  </div>\n  <!-- Confirm Button -->\n  <div class=\"footer\">\n    <button class=\"confirm-btn\" *ngIf=\"!isLoading\" (click)=\"markAddressAsDefault()\">\n      CONFIRM\n    </button>\n    <button class=\"confirm-btn loading-btn\" *ngIf=\"isLoading\"><mat-spinner></mat-spinner> Loading</button>\n  </div>\n</div>\n", styles: ["*{font-family:var(--primary-font-family)}.address-selection-container{background:#fff;border-radius:12px;width:100%;max-width:500px}.header{display:flex;justify-content:space-between;align-items:center;padding:0 20px;height:60px;background-color:#f6f3f9}.content{padding:20px;height:calc(100vh - 120px);overflow:scroll}.title{font-size:18px;font-weight:600;color:#000}.close-btn{background:none;border:none;cursor:pointer;padding:4px;color:#666;font-size:24px;line-height:1;width:max-content!important}.close-btn:hover{color:#333}.add-new-address-btn{font-size:1rem!important;font-weight:700!important;padding:6px;background:#fff;border:1px solid rgb(229,221,255);border-radius:8px;color:#000;cursor:pointer;transition:all .2s;box-shadow:#0000000a 0 4px 8px;width:100%}.add-new-address-btn:hover{border-color:#fbf9ff;background-color:#faf7ff}.section-title{font-size:16px;font-weight:600;color:#000;margin-bottom:16px;margin-top:16px}.address-card{border:1px solid #e0e0e0;border-radius:12px;padding:20px;margin-bottom:16px;cursor:pointer;transition:all .2s}.other-address-card{border:1px solid rgb(238,232,255);box-shadow:#0000000a 0 4px 8px;background:#fbf9ff;border-radius:12px;padding:20px;margin-bottom:16px;cursor:pointer;transition:all .2s}.address-card.selected,.selected-address{border-color:#000}.address-card:hover{border-color:#fbf9ff}.address-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.address-name{font-size:16px;font-weight:600;color:#000}.radio-button{width:20px;height:20px;border:2px solid #ccc;border-radius:50%;display:flex;justify-content:center;align-items:center;transition:all .2s}.radio-button.checked{border-color:#000;background-color:#000}.radio-inner{width:8px;height:8px;background-color:#fff;border-radius:50%}.address-text{color:#000;font-size:14px;line-height:1.4;margin-bottom:8px}.mobile-text{color:#000;font-size:14px;margin-bottom:16px}.address-actions{display:flex;gap:24px}.action-btn{background:none;border:none;font-size:12px;font-weight:600;cursor:pointer;padding:4px 0;transition:opacity .2s}.delete-btn,.edit-btn{box-shadow:#0000000a 0 4px 8px;background:#fbf9ff;color:#000;font-size:14px!important;border-radius:5px}.action-btn:hover{opacity:.7}.confirm-btn{font-size:1rem!important;font-weight:700!important;padding:6px;background:#fff;border:1px solid rgb(229,221,255);border-radius:8px;color:#000;cursor:pointer;transition:all .2s;box-shadow:#0000000a 0 4px 8px;width:90%!important}.confirm-btn:hover{background:#fbf9ff}@media (max-width: 480px){.title{font-size:18px}}.other-address-btn{background-color:#fff!important}.footer{display:flex;align-items:center;justify-content:center;height:60px;position:absolute;width:100%;bottom:0;box-shadow:#0000000a 0 -1px 8px}.loading-btn{display:flex;gap:10px;justify-content:center}.loading-btn mat-spinner{height:20px!important;width:20px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i10$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddressListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-address-list', standalone: true, imports: [CommonModule, FormsModule, MatProgressSpinnerModule], template: "<div class=\"address-selection-container\">\r\n  <!-- Header -->\r\n  <div class=\"header\">\r\n    <h2 class=\"title\">Select Address</h2>\r\n    <button class=\"close-btn\" (click)=\"closeDialog()\">\u2715</button>\r\n  </div>\r\n\r\n  <!-- Add New Address Button -->\r\n  <div class=\"content\">\r\n    <button class=\"add-new-address-btn\" (click)=\"addOrEditAddress(-1)\">\r\n      ADD NEW ADDRESS\r\n    </button>\r\n\r\n    <!-- Currently Selected Section -->\r\n    <div class=\"currently-selected-section\">\r\n      <h3 class=\"section-title\">Currently Selected</h3>\r\n\r\n      <div class=\"address-card selected\">\r\n        <div class=\"address-header\">\r\n          <span class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</span>\r\n          <!-- <div class=\"radio-button checked\">\r\n            <div class=\"radio-inner\"></div>\r\n          </div> -->\r\n        </div>\r\n\r\n        <p class=\"address-text\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\r\n          {{defaultAddress?.stateName}}</p>\r\n\r\n        <p class=\"mobile-text\">\r\n          <strong>Mobile: {{defaultAddress?.receiverPhone}}</strong>\r\n        </p>\r\n\r\n        <div class=\"address-actions\">\r\n          <button class=\"action-btn delete-btn\" (click)=\"deleteAddress(defaultAddressIndex)\"\r\n            *ngIf=\"(this.addressList?.length || 0) > 1 && !deleteLoading\">\r\n            DELETE\r\n          </button>\r\n          <button class=\"action-btn delete-btn loading-btn\" *ngIf=\"deleteLoading\">\r\n            <mat-spinner></mat-spinner> Loading\r\n          </button>\r\n          <button class=\"action-btn edit-btn\"\r\n            (click)=\"addOrEditAddress(defaultAddressIndex != -1 ? defaultAddressIndex : 0, defaultAddress)\">\r\n            EDIT\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <ng-container *ngIf=\"(addressList?.length || 0) > 1\">\r\n        <h3 class=\"section-title\">Others Address</h3>\r\n        <div>\r\n          <ng-container *ngFor=\"let address of addressList;let i = index\">\r\n            <div class=\"other-address-card\" (click)=\"selectedAddressIndex = i\"\r\n              [ngClass]=\"{'selected-address': selectedAddressIndex === i}\" *ngIf=\"!address.default\">\r\n              <div class=\"address-header\">\r\n                <span class=\"address-name\">{{address?.receiverName}} ({{address?.addressType}})</span>\r\n                <!-- <div class=\"radio-button checked\">\r\n                  <div class=\"radio-inner\"></div>\r\n                </div> -->\r\n              </div>\r\n\r\n              <p class=\"address-text\">{{address?.addressLine1}}, {{address?.cityName}},\r\n                {{defaultAddress?.stateName}}</p>\r\n\r\n              <p class=\"mobile-text\">\r\n                <strong>Mobile: {{address.receiverPhone}}</strong>\r\n              </p>\r\n\r\n              <div class=\"address-actions\">\r\n                <button class=\"action-btn delete-btn other-address-btn\" (click)=\"deleteAddress(i)\" *ngIf=\"!deleteLoading\">\r\n                  DELETE\r\n                </button>\r\n                <button class=\"action-btn delete-btn loading-btn\" *ngIf=\"deleteLoading\">\r\n                  <mat-spinner></mat-spinner> Loading\r\n                </button>\r\n                <button class=\"action-btn edit-btn other-address-btn\" (click)=\"addOrEditAddress(i, address)\">\r\n                  EDIT\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n  </div>\r\n  <!-- Confirm Button -->\r\n  <div class=\"footer\">\r\n    <button class=\"confirm-btn\" *ngIf=\"!isLoading\" (click)=\"markAddressAsDefault()\">\r\n      CONFIRM\r\n    </button>\r\n    <button class=\"confirm-btn loading-btn\" *ngIf=\"isLoading\"><mat-spinner></mat-spinner> Loading</button>\r\n  </div>\r\n</div>\r\n", styles: ["*{font-family:var(--primary-font-family)}.address-selection-container{background:#fff;border-radius:12px;width:100%;max-width:500px}.header{display:flex;justify-content:space-between;align-items:center;padding:0 20px;height:60px;background-color:#f6f3f9}.content{padding:20px;height:calc(100vh - 120px);overflow:scroll}.title{font-size:18px;font-weight:600;color:#000}.close-btn{background:none;border:none;cursor:pointer;padding:4px;color:#666;font-size:24px;line-height:1;width:max-content!important}.close-btn:hover{color:#333}.add-new-address-btn{font-size:1rem!important;font-weight:700!important;padding:6px;background:#fff;border:1px solid rgb(229,221,255);border-radius:8px;color:#000;cursor:pointer;transition:all .2s;box-shadow:#0000000a 0 4px 8px;width:100%}.add-new-address-btn:hover{border-color:#fbf9ff;background-color:#faf7ff}.section-title{font-size:16px;font-weight:600;color:#000;margin-bottom:16px;margin-top:16px}.address-card{border:1px solid #e0e0e0;border-radius:12px;padding:20px;margin-bottom:16px;cursor:pointer;transition:all .2s}.other-address-card{border:1px solid rgb(238,232,255);box-shadow:#0000000a 0 4px 8px;background:#fbf9ff;border-radius:12px;padding:20px;margin-bottom:16px;cursor:pointer;transition:all .2s}.address-card.selected,.selected-address{border-color:#000}.address-card:hover{border-color:#fbf9ff}.address-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.address-name{font-size:16px;font-weight:600;color:#000}.radio-button{width:20px;height:20px;border:2px solid #ccc;border-radius:50%;display:flex;justify-content:center;align-items:center;transition:all .2s}.radio-button.checked{border-color:#000;background-color:#000}.radio-inner{width:8px;height:8px;background-color:#fff;border-radius:50%}.address-text{color:#000;font-size:14px;line-height:1.4;margin-bottom:8px}.mobile-text{color:#000;font-size:14px;margin-bottom:16px}.address-actions{display:flex;gap:24px}.action-btn{background:none;border:none;font-size:12px;font-weight:600;cursor:pointer;padding:4px 0;transition:opacity .2s}.delete-btn,.edit-btn{box-shadow:#0000000a 0 4px 8px;background:#fbf9ff;color:#000;font-size:14px!important;border-radius:5px}.action-btn:hover{opacity:.7}.confirm-btn{font-size:1rem!important;font-weight:700!important;padding:6px;background:#fff;border:1px solid rgb(229,221,255);border-radius:8px;color:#000;cursor:pointer;transition:all .2s;box-shadow:#0000000a 0 4px 8px;width:90%!important}.confirm-btn:hover{background:#fbf9ff}@media (max-width: 480px){.title{font-size:18px}}.other-address-btn{background-color:#fff!important}.footer{display:flex;align-items:center;justify-content:center;height:60px;position:absolute;width:100%;bottom:0;box-shadow:#0000000a 0 -1px 8px}.loading-btn{display:flex;gap:10px;justify-content:center}.loading-btn mat-spinner{height:20px!important;width:20px!important}\n"] }]
+            args: [{ selector: 'simpo-address-list', standalone: true, imports: [CommonModule, FormsModule, MatProgressSpinnerModule], template: "<div class=\"address-selection-container\">\n  <!-- Header -->\n  <div class=\"header\">\n    <h2 class=\"title\">Select Address</h2>\n    <button class=\"close-btn\" (click)=\"closeDialog()\">\u2715</button>\n  </div>\n\n  <!-- Add New Address Button -->\n  <div class=\"content\">\n    <button class=\"add-new-address-btn\" (click)=\"addOrEditAddress(-1)\">\n      ADD NEW ADDRESS\n    </button>\n\n    <!-- Currently Selected Section -->\n    <div class=\"currently-selected-section\">\n      <h3 class=\"section-title\">Currently Selected</h3>\n\n      <div class=\"address-card selected\">\n        <div class=\"address-header\">\n          <span class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</span>\n          <!-- <div class=\"radio-button checked\">\n            <div class=\"radio-inner\"></div>\n          </div> -->\n        </div>\n\n        <p class=\"address-text\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\n          {{defaultAddress?.stateName}}</p>\n\n        <p class=\"mobile-text\">\n          <strong>Mobile: {{defaultAddress?.receiverPhone}}</strong>\n        </p>\n\n        <div class=\"address-actions\">\n          <button class=\"action-btn delete-btn\" (click)=\"deleteAddress(defaultAddressIndex)\"\n            *ngIf=\"(this.addressList?.length || 0) > 1 && !deleteLoading\">\n            DELETE\n          </button>\n          <button class=\"action-btn delete-btn loading-btn\" *ngIf=\"deleteLoading\">\n            <mat-spinner></mat-spinner> Loading\n          </button>\n          <button class=\"action-btn edit-btn\"\n            (click)=\"addOrEditAddress(defaultAddressIndex != -1 ? defaultAddressIndex : 0, defaultAddress)\">\n            EDIT\n          </button>\n        </div>\n      </div>\n\n      <ng-container *ngIf=\"(addressList?.length || 0) > 1\">\n        <h3 class=\"section-title\">Others Address</h3>\n        <div>\n          <ng-container *ngFor=\"let address of addressList;let i = index\">\n            <div class=\"other-address-card\" (click)=\"selectedAddressIndex = i\"\n              [ngClass]=\"{'selected-address': selectedAddressIndex === i}\" *ngIf=\"!address.default\">\n              <div class=\"address-header\">\n                <span class=\"address-name\">{{address?.receiverName}} ({{address?.addressType}})</span>\n                <!-- <div class=\"radio-button checked\">\n                  <div class=\"radio-inner\"></div>\n                </div> -->\n              </div>\n\n              <p class=\"address-text\">{{address?.addressLine1}}, {{address?.cityName}},\n                {{defaultAddress?.stateName}}</p>\n\n              <p class=\"mobile-text\">\n                <strong>Mobile: {{address.receiverPhone}}</strong>\n              </p>\n\n              <div class=\"address-actions\">\n                <button class=\"action-btn delete-btn other-address-btn\" (click)=\"deleteAddress(i)\" *ngIf=\"!deleteLoading\">\n                  DELETE\n                </button>\n                <button class=\"action-btn delete-btn loading-btn\" *ngIf=\"deleteLoading\">\n                  <mat-spinner></mat-spinner> Loading\n                </button>\n                <button class=\"action-btn edit-btn other-address-btn\" (click)=\"addOrEditAddress(i, address)\">\n                  EDIT\n                </button>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n\n  </div>\n  <!-- Confirm Button -->\n  <div class=\"footer\">\n    <button class=\"confirm-btn\" *ngIf=\"!isLoading\" (click)=\"markAddressAsDefault()\">\n      CONFIRM\n    </button>\n    <button class=\"confirm-btn loading-btn\" *ngIf=\"isLoading\"><mat-spinner></mat-spinner> Loading</button>\n  </div>\n</div>\n", styles: ["*{font-family:var(--primary-font-family)}.address-selection-container{background:#fff;border-radius:12px;width:100%;max-width:500px}.header{display:flex;justify-content:space-between;align-items:center;padding:0 20px;height:60px;background-color:#f6f3f9}.content{padding:20px;height:calc(100vh - 120px);overflow:scroll}.title{font-size:18px;font-weight:600;color:#000}.close-btn{background:none;border:none;cursor:pointer;padding:4px;color:#666;font-size:24px;line-height:1;width:max-content!important}.close-btn:hover{color:#333}.add-new-address-btn{font-size:1rem!important;font-weight:700!important;padding:6px;background:#fff;border:1px solid rgb(229,221,255);border-radius:8px;color:#000;cursor:pointer;transition:all .2s;box-shadow:#0000000a 0 4px 8px;width:100%}.add-new-address-btn:hover{border-color:#fbf9ff;background-color:#faf7ff}.section-title{font-size:16px;font-weight:600;color:#000;margin-bottom:16px;margin-top:16px}.address-card{border:1px solid #e0e0e0;border-radius:12px;padding:20px;margin-bottom:16px;cursor:pointer;transition:all .2s}.other-address-card{border:1px solid rgb(238,232,255);box-shadow:#0000000a 0 4px 8px;background:#fbf9ff;border-radius:12px;padding:20px;margin-bottom:16px;cursor:pointer;transition:all .2s}.address-card.selected,.selected-address{border-color:#000}.address-card:hover{border-color:#fbf9ff}.address-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.address-name{font-size:16px;font-weight:600;color:#000}.radio-button{width:20px;height:20px;border:2px solid #ccc;border-radius:50%;display:flex;justify-content:center;align-items:center;transition:all .2s}.radio-button.checked{border-color:#000;background-color:#000}.radio-inner{width:8px;height:8px;background-color:#fff;border-radius:50%}.address-text{color:#000;font-size:14px;line-height:1.4;margin-bottom:8px}.mobile-text{color:#000;font-size:14px;margin-bottom:16px}.address-actions{display:flex;gap:24px}.action-btn{background:none;border:none;font-size:12px;font-weight:600;cursor:pointer;padding:4px 0;transition:opacity .2s}.delete-btn,.edit-btn{box-shadow:#0000000a 0 4px 8px;background:#fbf9ff;color:#000;font-size:14px!important;border-radius:5px}.action-btn:hover{opacity:.7}.confirm-btn{font-size:1rem!important;font-weight:700!important;padding:6px;background:#fff;border:1px solid rgb(229,221,255);border-radius:8px;color:#000;cursor:pointer;transition:all .2s;box-shadow:#0000000a 0 4px 8px;width:90%!important}.confirm-btn:hover{background:#fbf9ff}@media (max-width: 480px){.title{font-size:18px}}.other-address-btn{background-color:#fff!important}.footer{display:flex;align-items:center;justify-content:center;height:60px;position:absolute;width:100%;bottom:0;box-shadow:#0000000a 0 -1px 8px}.loading-btn{display:flex;gap:10px;justify-content:center}.loading-btn mat-spinner{height:20px!important;width:20px!important}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.MatDialog }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -8332,11 +8332,11 @@ class SchemeSelectionComponent {
         this.dialogRef.close({ redmpetionData: this.redemptionData, selectedAmount: this.selectedAmount });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeSelectionComponent, deps: [{ token: i1$2.MatDialogRef }, { token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SchemeSelectionComponent, isStandalone: true, selector: "simpo-scheme-selection", ngImport: i0, template: "<div class=\"overlay-screen w-100 h-100 d-flex justify-content-center align-items-center\">\r\n    <div class=\"main_page h-75\">\r\n        <div class=\"modal-header\">\r\n            <h2>Select Scheme for Redemption</h2>\r\n            <div class=\"close-btn cursor-pointer\" (click)=\"goBack()\"><mat-icon>close</mat-icon></div>\r\n        </div>\r\n\r\n        <div class=\"modal-body\">\r\n            <div class=\"scheme-option\">\r\n                <label for=\"individual\" class=\"scheme-card\">\r\n                    <div class=\"scheme-info d-flex gap-1\">\r\n                        <div class=\"form-check-radio\">\r\n                            <input class=\"form-check-input-radio\" type=\"radio\" name=\"flexRadioDefault\"\r\n                                id=\"flexRadioDefault2\" (change)=\"onRadioChange()\">\r\n                        </div>\r\n                        <div class=\"\">\r\n                            <div class=\"scheme-title\">Individual Investment Scheme</div>\r\n                            <div class=\"scheme-details\">\r\n                                <span class=\"scheme-id\">GPP Id: {{redemptionData.GPPId}}</span>\r\n                                <span class=\"scheme-maturity\">Maturity Date: 12 April 2024</span>\r\n                            </div>\r\n                            <div class=\"scheme-amount\">\u20B9{{redemptionData.amount}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"scheme-monthly\">\u20B98000/M</div>\r\n                </label>\r\n            </div>\r\n        </div>\r\n        <div class=\"modal-footer gap-3\">\r\n            <div class=\"redemption-summary gap-2\">\r\n                <span class=\"redemption-label\">Redemption Amount</span>\r\n                <span class=\"redemption-value\">\u20B9{{selectedAmount ? selectedAmount : 0}}</span>\r\n            </div>\r\n            <div class=\"action-btns d-flex w-100 gap-2\"> <button class=\"cancel-btn\">Cancel</button>\r\n                <button class=\"apply-btn\" (click)=\"applyRedmption()\">Apply Redemption</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.main_page{background:#fff;z-index:100!important;padding:3%;box-shadow:#0000001a 0 4px 12px;overflow-y:hidden;width:35vw}.modal-header{display:flex;justify-content:space-between;align-items:center}.modal-header h2{font-size:14px;font-weight:600;color:#111827;margin:0}.close-btn mat-icon{font-size:20px}.modal-body{padding:24px 24px 0;height:46vh;overflow-y:scroll}.scheme-option{margin-bottom:16px}.scheme-option input[type=radio]:checked+.scheme-card{border-color:#06b6d4;background:#f0f9ff;position:relative}.scheme-option input[type=radio]:checked+.scheme-card:before{content:\"\";position:absolute;top:20px;left:20px;width:20px;height:20px;border:2px solid #06b6d4;border-radius:50%;background:#fff}.scheme-option input[type=radio]:checked+.scheme-card:after{content:\"\";position:absolute;top:26px;left:26px;width:8px;height:8px;background:#06b6d4;border-radius:50%}.scheme-card{display:flex;justify-content:space-between;align-items:center;padding:20px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff}.scheme-card:hover{border-color:#d1d5db;background:#f9fafb}.form-check-radio{width:10%}.scheme-title{font-size:12px;font-weight:600;color:#111827;margin-bottom:8px}.scheme-details{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}.scheme-details span{font-size:12px}.scheme-monthly{font-size:14px;font-weight:600;color:#111827;min-width:100px;text-align:right}.modal-footer{display:flex;border-top:1px solid #e5e7eb;padding-top:1%}.redemption-summary{display:flex;justify-content:flex-start;align-items:center;width:100%}.redemption-label{font-size:16px;color:#374151}.redemption-value{font-size:20px;font-weight:700;color:#059669}.cancel-btn,.apply-btn{border:none;border-radius:6px;font-size:12px!important;padding:1%;font-weight:600;cursor:pointer;transition:all .2s ease}.cancel-btn{background:#fff;color:#374151;border:1px solid #d1d5db}.cancel-btn:hover{background:#f9fafb;border-color:#9ca3af}.apply-btn{background:#06b6d4;color:#fff}.apply-btn:hover{background:#0891b2}.redemption-summary span{font-size:12px;font-weight:700}.scheme-id,.scheme-maturity{font-size:14px;color:#6b7280}.scheme-amount{font-size:14px;font-weight:700;color:#06b6d4}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatIconModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SchemeSelectionComponent, isStandalone: true, selector: "simpo-scheme-selection", ngImport: i0, template: "<div class=\"overlay-screen w-100 h-100 d-flex justify-content-center align-items-center\">\n    <div class=\"main_page h-75\">\n        <div class=\"modal-header\">\n            <h2>Select Scheme for Redemption</h2>\n            <div class=\"close-btn cursor-pointer\" (click)=\"goBack()\"><mat-icon>close</mat-icon></div>\n        </div>\n\n        <div class=\"modal-body\">\n            <div class=\"scheme-option\">\n                <label for=\"individual\" class=\"scheme-card\">\n                    <div class=\"scheme-info d-flex gap-1\">\n                        <div class=\"form-check-radio\">\n                            <input class=\"form-check-input-radio\" type=\"radio\" name=\"flexRadioDefault\"\n                                id=\"flexRadioDefault2\" (change)=\"onRadioChange()\">\n                        </div>\n                        <div class=\"\">\n                            <div class=\"scheme-title\">Individual Investment Scheme</div>\n                            <div class=\"scheme-details\">\n                                <span class=\"scheme-id\">GPP Id: {{redemptionData.GPPId}}</span>\n                                <span class=\"scheme-maturity\">Maturity Date: 12 April 2024</span>\n                            </div>\n                            <div class=\"scheme-amount\">\u20B9{{redemptionData.amount}}</div>\n                        </div>\n                    </div>\n                    <div class=\"scheme-monthly\">\u20B98000/M</div>\n                </label>\n            </div>\n        </div>\n        <div class=\"modal-footer gap-3\">\n            <div class=\"redemption-summary gap-2\">\n                <span class=\"redemption-label\">Redemption Amount</span>\n                <span class=\"redemption-value\">\u20B9{{selectedAmount ? selectedAmount : 0}}</span>\n            </div>\n            <div class=\"action-btns d-flex w-100 gap-2\"> <button class=\"cancel-btn\">Cancel</button>\n                <button class=\"apply-btn\" (click)=\"applyRedmption()\">Apply Redemption</button>\n            </div>\n        </div>\n    </div>\n</div>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.main_page{background:#fff;z-index:100!important;padding:3%;box-shadow:#0000001a 0 4px 12px;overflow-y:hidden;width:35vw}.modal-header{display:flex;justify-content:space-between;align-items:center}.modal-header h2{font-size:14px;font-weight:600;color:#111827;margin:0}.close-btn mat-icon{font-size:20px}.modal-body{padding:24px 24px 0;height:46vh;overflow-y:scroll}.scheme-option{margin-bottom:16px}.scheme-option input[type=radio]:checked+.scheme-card{border-color:#06b6d4;background:#f0f9ff;position:relative}.scheme-option input[type=radio]:checked+.scheme-card:before{content:\"\";position:absolute;top:20px;left:20px;width:20px;height:20px;border:2px solid #06b6d4;border-radius:50%;background:#fff}.scheme-option input[type=radio]:checked+.scheme-card:after{content:\"\";position:absolute;top:26px;left:26px;width:8px;height:8px;background:#06b6d4;border-radius:50%}.scheme-card{display:flex;justify-content:space-between;align-items:center;padding:20px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff}.scheme-card:hover{border-color:#d1d5db;background:#f9fafb}.form-check-radio{width:10%}.scheme-title{font-size:12px;font-weight:600;color:#111827;margin-bottom:8px}.scheme-details{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}.scheme-details span{font-size:12px}.scheme-monthly{font-size:14px;font-weight:600;color:#111827;min-width:100px;text-align:right}.modal-footer{display:flex;border-top:1px solid #e5e7eb;padding-top:1%}.redemption-summary{display:flex;justify-content:flex-start;align-items:center;width:100%}.redemption-label{font-size:16px;color:#374151}.redemption-value{font-size:20px;font-weight:700;color:#059669}.cancel-btn,.apply-btn{border:none;border-radius:6px;font-size:12px!important;padding:1%;font-weight:600;cursor:pointer;transition:all .2s ease}.cancel-btn{background:#fff;color:#374151;border:1px solid #d1d5db}.cancel-btn:hover{background:#f9fafb;border-color:#9ca3af}.apply-btn{background:#06b6d4;color:#fff}.apply-btn:hover{background:#0891b2}.redemption-summary span{font-size:12px;font-weight:700}.scheme-id,.scheme-maturity{font-size:14px;color:#6b7280}.scheme-amount{font-size:14px;font-weight:700;color:#06b6d4}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatIconModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeSelectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-scheme-selection', standalone: true, imports: [CommonModule, MatIcon, MatIconModule], template: "<div class=\"overlay-screen w-100 h-100 d-flex justify-content-center align-items-center\">\r\n    <div class=\"main_page h-75\">\r\n        <div class=\"modal-header\">\r\n            <h2>Select Scheme for Redemption</h2>\r\n            <div class=\"close-btn cursor-pointer\" (click)=\"goBack()\"><mat-icon>close</mat-icon></div>\r\n        </div>\r\n\r\n        <div class=\"modal-body\">\r\n            <div class=\"scheme-option\">\r\n                <label for=\"individual\" class=\"scheme-card\">\r\n                    <div class=\"scheme-info d-flex gap-1\">\r\n                        <div class=\"form-check-radio\">\r\n                            <input class=\"form-check-input-radio\" type=\"radio\" name=\"flexRadioDefault\"\r\n                                id=\"flexRadioDefault2\" (change)=\"onRadioChange()\">\r\n                        </div>\r\n                        <div class=\"\">\r\n                            <div class=\"scheme-title\">Individual Investment Scheme</div>\r\n                            <div class=\"scheme-details\">\r\n                                <span class=\"scheme-id\">GPP Id: {{redemptionData.GPPId}}</span>\r\n                                <span class=\"scheme-maturity\">Maturity Date: 12 April 2024</span>\r\n                            </div>\r\n                            <div class=\"scheme-amount\">\u20B9{{redemptionData.amount}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"scheme-monthly\">\u20B98000/M</div>\r\n                </label>\r\n            </div>\r\n        </div>\r\n        <div class=\"modal-footer gap-3\">\r\n            <div class=\"redemption-summary gap-2\">\r\n                <span class=\"redemption-label\">Redemption Amount</span>\r\n                <span class=\"redemption-value\">\u20B9{{selectedAmount ? selectedAmount : 0}}</span>\r\n            </div>\r\n            <div class=\"action-btns d-flex w-100 gap-2\"> <button class=\"cancel-btn\">Cancel</button>\r\n                <button class=\"apply-btn\" (click)=\"applyRedmption()\">Apply Redemption</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.main_page{background:#fff;z-index:100!important;padding:3%;box-shadow:#0000001a 0 4px 12px;overflow-y:hidden;width:35vw}.modal-header{display:flex;justify-content:space-between;align-items:center}.modal-header h2{font-size:14px;font-weight:600;color:#111827;margin:0}.close-btn mat-icon{font-size:20px}.modal-body{padding:24px 24px 0;height:46vh;overflow-y:scroll}.scheme-option{margin-bottom:16px}.scheme-option input[type=radio]:checked+.scheme-card{border-color:#06b6d4;background:#f0f9ff;position:relative}.scheme-option input[type=radio]:checked+.scheme-card:before{content:\"\";position:absolute;top:20px;left:20px;width:20px;height:20px;border:2px solid #06b6d4;border-radius:50%;background:#fff}.scheme-option input[type=radio]:checked+.scheme-card:after{content:\"\";position:absolute;top:26px;left:26px;width:8px;height:8px;background:#06b6d4;border-radius:50%}.scheme-card{display:flex;justify-content:space-between;align-items:center;padding:20px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff}.scheme-card:hover{border-color:#d1d5db;background:#f9fafb}.form-check-radio{width:10%}.scheme-title{font-size:12px;font-weight:600;color:#111827;margin-bottom:8px}.scheme-details{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}.scheme-details span{font-size:12px}.scheme-monthly{font-size:14px;font-weight:600;color:#111827;min-width:100px;text-align:right}.modal-footer{display:flex;border-top:1px solid #e5e7eb;padding-top:1%}.redemption-summary{display:flex;justify-content:flex-start;align-items:center;width:100%}.redemption-label{font-size:16px;color:#374151}.redemption-value{font-size:20px;font-weight:700;color:#059669}.cancel-btn,.apply-btn{border:none;border-radius:6px;font-size:12px!important;padding:1%;font-weight:600;cursor:pointer;transition:all .2s ease}.cancel-btn{background:#fff;color:#374151;border:1px solid #d1d5db}.cancel-btn:hover{background:#f9fafb;border-color:#9ca3af}.apply-btn{background:#06b6d4;color:#fff}.apply-btn:hover{background:#0891b2}.redemption-summary span{font-size:12px;font-weight:700}.scheme-id,.scheme-maturity{font-size:14px;color:#6b7280}.scheme-amount{font-size:14px;font-weight:700;color:#06b6d4}\n"] }]
+            args: [{ selector: 'simpo-scheme-selection', standalone: true, imports: [CommonModule, MatIcon, MatIconModule], template: "<div class=\"overlay-screen w-100 h-100 d-flex justify-content-center align-items-center\">\n    <div class=\"main_page h-75\">\n        <div class=\"modal-header\">\n            <h2>Select Scheme for Redemption</h2>\n            <div class=\"close-btn cursor-pointer\" (click)=\"goBack()\"><mat-icon>close</mat-icon></div>\n        </div>\n\n        <div class=\"modal-body\">\n            <div class=\"scheme-option\">\n                <label for=\"individual\" class=\"scheme-card\">\n                    <div class=\"scheme-info d-flex gap-1\">\n                        <div class=\"form-check-radio\">\n                            <input class=\"form-check-input-radio\" type=\"radio\" name=\"flexRadioDefault\"\n                                id=\"flexRadioDefault2\" (change)=\"onRadioChange()\">\n                        </div>\n                        <div class=\"\">\n                            <div class=\"scheme-title\">Individual Investment Scheme</div>\n                            <div class=\"scheme-details\">\n                                <span class=\"scheme-id\">GPP Id: {{redemptionData.GPPId}}</span>\n                                <span class=\"scheme-maturity\">Maturity Date: 12 April 2024</span>\n                            </div>\n                            <div class=\"scheme-amount\">\u20B9{{redemptionData.amount}}</div>\n                        </div>\n                    </div>\n                    <div class=\"scheme-monthly\">\u20B98000/M</div>\n                </label>\n            </div>\n        </div>\n        <div class=\"modal-footer gap-3\">\n            <div class=\"redemption-summary gap-2\">\n                <span class=\"redemption-label\">Redemption Amount</span>\n                <span class=\"redemption-value\">\u20B9{{selectedAmount ? selectedAmount : 0}}</span>\n            </div>\n            <div class=\"action-btns d-flex w-100 gap-2\"> <button class=\"cancel-btn\">Cancel</button>\n                <button class=\"apply-btn\" (click)=\"applyRedmption()\">Apply Redemption</button>\n            </div>\n        </div>\n    </div>\n</div>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.main_page{background:#fff;z-index:100!important;padding:3%;box-shadow:#0000001a 0 4px 12px;overflow-y:hidden;width:35vw}.modal-header{display:flex;justify-content:space-between;align-items:center}.modal-header h2{font-size:14px;font-weight:600;color:#111827;margin:0}.close-btn mat-icon{font-size:20px}.modal-body{padding:24px 24px 0;height:46vh;overflow-y:scroll}.scheme-option{margin-bottom:16px}.scheme-option input[type=radio]:checked+.scheme-card{border-color:#06b6d4;background:#f0f9ff;position:relative}.scheme-option input[type=radio]:checked+.scheme-card:before{content:\"\";position:absolute;top:20px;left:20px;width:20px;height:20px;border:2px solid #06b6d4;border-radius:50%;background:#fff}.scheme-option input[type=radio]:checked+.scheme-card:after{content:\"\";position:absolute;top:26px;left:26px;width:8px;height:8px;background:#06b6d4;border-radius:50%}.scheme-card{display:flex;justify-content:space-between;align-items:center;padding:20px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff}.scheme-card:hover{border-color:#d1d5db;background:#f9fafb}.form-check-radio{width:10%}.scheme-title{font-size:12px;font-weight:600;color:#111827;margin-bottom:8px}.scheme-details{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}.scheme-details span{font-size:12px}.scheme-monthly{font-size:14px;font-weight:600;color:#111827;min-width:100px;text-align:right}.modal-footer{display:flex;border-top:1px solid #e5e7eb;padding-top:1%}.redemption-summary{display:flex;justify-content:flex-start;align-items:center;width:100%}.redemption-label{font-size:16px;color:#374151}.redemption-value{font-size:20px;font-weight:700;color:#059669}.cancel-btn,.apply-btn{border:none;border-radius:6px;font-size:12px!important;padding:1%;font-weight:600;cursor:pointer;transition:all .2s ease}.cancel-btn{background:#fff;color:#374151;border:1px solid #d1d5db}.cancel-btn:hover{background:#f9fafb;border-color:#9ca3af}.apply-btn{background:#06b6d4;color:#fff}.apply-btn:hover{background:#0891b2}.redemption-summary span{font-size:12px;font-weight:700}.scheme-id,.scheme-maturity{font-size:14px;color:#6b7280}.scheme-amount{font-size:14px;font-weight:700;color:#06b6d4}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: RestService }] });
 
 class OrderedItems {
@@ -8416,11 +8416,11 @@ class ImageLoadingComponent {
             this.product.prviewIdx = 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageLoadingComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageLoadingComponent, isStandalone: true, selector: "image-loading", inputs: { hash: "hash", imageUrl: "imageUrl", index: "index", product: "product", theme: "theme" }, viewQueries: [{ propertyName: "image", first: true, predicate: ["image"], descendants: true }, { propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true }], ngImport: i0, template: "<canvas #canvas class=\"mask\"></canvas> \r\n<img [src]=\"imageUrl\" [id]=\"'preview_'+index\" alt=\"\" class=\"afterLoadImg\" [ngClass]=\"{'product-img preview': theme == 'Theme1'}\" loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" (mouseenter)=\"togglePreviewImage(product, index)\" (mouseleave)=\"mouseLeave()\" #image>", styles: [".mask,img{height:100%;width:100%}.product-img{height:300px;width:100%;border-radius:10px}.preivew{transition:opacity .5s ease-in-out;opacity:1}@media screen and (max-width: 475px){.product-img{height:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageLoadingComponent, isStandalone: true, selector: "image-loading", inputs: { hash: "hash", imageUrl: "imageUrl", index: "index", product: "product", theme: "theme" }, viewQueries: [{ propertyName: "image", first: true, predicate: ["image"], descendants: true }, { propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true }], ngImport: i0, template: "<canvas #canvas class=\"mask\"></canvas> \n<img [src]=\"imageUrl\" [id]=\"'preview_'+index\" alt=\"\" class=\"afterLoadImg\" [ngClass]=\"{'product-img preview': theme == 'Theme1'}\" loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" (mouseenter)=\"togglePreviewImage(product, index)\" (mouseleave)=\"mouseLeave()\" #image>", styles: [".mask,img{height:100%;width:100%}.product-img{height:300px;width:100%;border-radius:10px}.preivew{transition:opacity .5s ease-in-out;opacity:1}@media screen and (max-width: 475px){.product-img{height:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageLoadingComponent, decorators: [{
             type: Component,
-            args: [{ selector: "image-loading", standalone: true, imports: [CommonModule], template: "<canvas #canvas class=\"mask\"></canvas> \r\n<img [src]=\"imageUrl\" [id]=\"'preview_'+index\" alt=\"\" class=\"afterLoadImg\" [ngClass]=\"{'product-img preview': theme == 'Theme1'}\" loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" (mouseenter)=\"togglePreviewImage(product, index)\" (mouseleave)=\"mouseLeave()\" #image>", styles: [".mask,img{height:100%;width:100%}.product-img{height:300px;width:100%;border-radius:10px}.preivew{transition:opacity .5s ease-in-out;opacity:1}@media screen and (max-width: 475px){.product-img{height:100%}}\n"] }]
+            args: [{ selector: "image-loading", standalone: true, imports: [CommonModule], template: "<canvas #canvas class=\"mask\"></canvas> \n<img [src]=\"imageUrl\" [id]=\"'preview_'+index\" alt=\"\" class=\"afterLoadImg\" [ngClass]=\"{'product-img preview': theme == 'Theme1'}\" loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" (mouseenter)=\"togglePreviewImage(product, index)\" (mouseleave)=\"mouseLeave()\" #image>", styles: [".mask,img{height:100%;width:100%}.product-img{height:300px;width:100%;border-radius:10px}.preivew{transition:opacity .5s ease-in-out;opacity:1}@media screen and (max-width: 475px){.product-img{height:100%}}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { hash: [{
                 type: Input
             }], imageUrl: [{
@@ -11647,11 +11647,11 @@ class AddNewSectionComponent {
         let dialog = this.dialog.open(AddSectionComponent, { panelClass: "add-section", data: { status: true, index: this.index, position: "ABOVE" } });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddNewSectionComponent, deps: [{ token: EventsService }, { token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AddNewSectionComponent, isStandalone: true, selector: "simpo-add-new-section", inputs: { index: "index" }, ngImport: i0, template: "<section class=\"main_section\">\r\n  <div>\r\n      <div #displayElements></div>\r\n  </div>\r\n  <section class=\"add_btn\" (click)=\"addSection()\">\r\n      <mat-icon>add</mat-icon>\r\n      <span style=\"margin-left: 5px;\">Add Section</span>\r\n  </section>\r\n</section>\r\n", styles: [".main_section{width:100%;padding:2% 0;overflow-y:scroll}.main_section:hover{border:3px solid #025eb0!important}.add_btn{font-family:lexandReg;font-size:14px;color:#3f3b3b;font-style:normal;font-weight:400;display:flex;justify-content:center;align-items:center;height:150px;width:100%;cursor:pointer;font-size:20px;font-weight:600;color:#09c}.add_btn img{width:2%}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AddNewSectionComponent, isStandalone: true, selector: "simpo-add-new-section", inputs: { index: "index" }, ngImport: i0, template: "<section class=\"main_section\">\n  <div>\n      <div #displayElements></div>\n  </div>\n  <section class=\"add_btn\" (click)=\"addSection()\">\n      <mat-icon>add</mat-icon>\n      <span style=\"margin-left: 5px;\">Add Section</span>\n  </section>\n</section>\n", styles: [".main_section{width:100%;padding:2% 0;overflow-y:scroll}.main_section:hover{border:3px solid #025eb0!important}.add_btn{font-family:lexandReg;font-size:14px;color:#3f3b3b;font-style:normal;font-weight:400;display:flex;justify-content:center;align-items:center;height:150px;width:100%;cursor:pointer;font-size:20px;font-weight:600;color:#09c}.add_btn img{width:2%}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddNewSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-add-new-section', standalone: true, imports: [MatIcon], template: "<section class=\"main_section\">\r\n  <div>\r\n      <div #displayElements></div>\r\n  </div>\r\n  <section class=\"add_btn\" (click)=\"addSection()\">\r\n      <mat-icon>add</mat-icon>\r\n      <span style=\"margin-left: 5px;\">Add Section</span>\r\n  </section>\r\n</section>\r\n", styles: [".main_section{width:100%;padding:2% 0;overflow-y:scroll}.main_section:hover{border:3px solid #025eb0!important}.add_btn{font-family:lexandReg;font-size:14px;color:#3f3b3b;font-style:normal;font-weight:400;display:flex;justify-content:center;align-items:center;height:150px;width:100%;cursor:pointer;font-size:20px;font-weight:600;color:#09c}.add_btn img{width:2%}\n"] }]
+            args: [{ selector: 'simpo-add-new-section', standalone: true, imports: [MatIcon], template: "<section class=\"main_section\">\n  <div>\n      <div #displayElements></div>\n  </div>\n  <section class=\"add_btn\" (click)=\"addSection()\">\n      <mat-icon>add</mat-icon>\n      <span style=\"margin-left: 5px;\">Add Section</span>\n  </section>\n</section>\n", styles: [".main_section{width:100%;padding:2% 0;overflow-y:scroll}.main_section:hover{border:3px solid #025eb0!important}.add_btn{font-family:lexandReg;font-size:14px;color:#3f3b3b;font-style:normal;font-weight:400;display:flex;justify-content:center;align-items:center;height:150px;width:100%;cursor:pointer;font-size:20px;font-weight:600;color:#09c}.add_btn img{width:2%}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }, { type: i1$2.MatDialog }], propDecorators: { index: [{
                 type: Input
             }] } });
@@ -11825,11 +11825,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 class SkeletonLoaderSectionComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkeletonLoaderSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SkeletonLoaderSectionComponent, isStandalone: true, selector: "simpo-skeleton-loader-section", inputs: { sectionType: "sectionType" }, ngImport: i0, template: "<div class=\"p-15\" style=\"width: 100%;\">\r\n  <div class=\"skeleton-parent\"\r\n    *ngIf=\"sectionType === 'service' || sectionType === 'teammember' || sectionType === 'imagegrid'\">\r\n    <div class=\"skeleton\">\r\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n        width: '100%',\r\n        height: '40vh',\r\n        'border-radius': '10px',\r\n        'position': 'relative',\r\n        'right': '5px'\r\n      }\">\r\n      </ngx-skeleton-loader>\r\n      <div class=\"second-section-wrapper\">\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '80%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '90%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '60%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"skeleton\">\r\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n        width: '100%',\r\n        height: '40vh',\r\n        'border-radius': '10px',\r\n        'position': 'relative',\r\n        'right': '5px'\r\n      }\">\r\n      </ngx-skeleton-loader>\r\n      <div class=\"second-section-wrapper\">\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '80%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '90%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '60%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"skeleton\">\r\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n        width: '100%',\r\n        height: '40vh',\r\n        'border-radius': '10px',\r\n        'position': 'relative',\r\n        'right': '5px'\r\n      }\">\r\n      </ngx-skeleton-loader>\r\n      <div class=\"second-section-wrapper\">\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '80%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '90%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '60%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"banner-skeleton\" *ngIf=\"sectionType === 'banner' || sectionType === 'text_image'\">\r\n    <div style=\"width: 50%;\">\r\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n        width: '90%',\r\n        height: '400px',\r\n        'border-radius': '10px'\r\n      }\">\r\n      </ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"second-section-wrapper\" style=\"width: 50%;padding-top: 50px;\">\r\n      <div class=\"wrapper\">\r\n        <ngx-skeleton-loader [theme]=\"{\r\n            width: '80%',\r\n            'border-radius': '0',\r\n            height: '15px',\r\n            'margin-bottom': '10px'\r\n          }\"></ngx-skeleton-loader>\r\n      </div>\r\n      <div class=\"wrapper\">\r\n        <ngx-skeleton-loader [theme]=\"{\r\n            width: '90%',\r\n            'border-radius': '0',\r\n            height: '15px',\r\n            'margin-bottom': '10px'\r\n          }\"></ngx-skeleton-loader>\r\n      </div>\r\n      <div class=\"wrapper\">\r\n        <ngx-skeleton-loader [theme]=\"{\r\n            width: '60%',\r\n            'border-radius': '0',\r\n            height: '15px',\r\n            'margin-bottom': '10px'\r\n          }\"></ngx-skeleton-loader>\r\n      </div>\r\n      <div style=\"margin-top: 50px;\">\r\n        <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n            width: '130px',\r\n            height: '45px',\r\n            'border-radius': '10px'\r\n          }\">\r\n        </ngx-skeleton-loader>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"text-skeleton\" *ngIf=\"sectionType === 'text'\">\r\n    <div class=\"wrapper\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '80%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"wrapper\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '90%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"wrapper\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '60%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div style=\"margin-top: 50px;\">\r\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n          width: '130px',\r\n          height: '45px',\r\n          'border-radius': '10px'\r\n        }\">\r\n      </ngx-skeleton-loader>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"testimonial-skeleton\" *ngIf=\"sectionType === 'testimonial'\">\r\n    <div>\r\n      <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{ width: '80px', height: '80px' }\">\r\n      </ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"wrapper\" style=\"margin-top: 20px;\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '80%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"wrapper\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '90%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"wrapper\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '60%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div style=\"margin-top: 50px;\">\r\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n          width: '130px',\r\n          height: '45px',\r\n          'border-radius': '10px'\r\n        }\">\r\n      </ngx-skeleton-loader>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"image-skeleton\"\r\n    *ngIf=\"sectionType === 'imageCarousel' || sectionType === 'image' || sectionType === 'contact us'\">\r\n    <ngx-skeleton-loader count=\"1\" [theme]=\"{\r\n      'border-radius': '5px',\r\n      height: '50vh',\r\n      width: '100%'\r\n    }\"></ngx-skeleton-loader>\r\n  </div>\r\n</div>\r\n", styles: [".main-section{position:relative;left:25px}.p-15{padding:15px}.wrapper{width:100%;flex:1}.second-section-wrapper{width:100%;height:auto;flex:1}.skeleton-parent{display:flex;gap:15px}.skeleton{padding:10px;border:1px solid #e5e7eb;width:33.33%;border-radius:10px}.banner-skeleton{display:flex;gap:10px}.text-skeleton,.testimonial-skeleton{text-align:center}.image-skeleton{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SkeletonLoaderSectionComponent, isStandalone: true, selector: "simpo-skeleton-loader-section", inputs: { sectionType: "sectionType" }, ngImport: i0, template: "<div class=\"p-15\" style=\"width: 100%;\">\n  <div class=\"skeleton-parent\"\n    *ngIf=\"sectionType === 'service' || sectionType === 'teammember' || sectionType === 'imagegrid'\">\n    <div class=\"skeleton\">\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n        width: '100%',\n        height: '40vh',\n        'border-radius': '10px',\n        'position': 'relative',\n        'right': '5px'\n      }\">\n      </ngx-skeleton-loader>\n      <div class=\"second-section-wrapper\">\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '80%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '90%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '60%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n      </div>\n    </div>\n    <div class=\"skeleton\">\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n        width: '100%',\n        height: '40vh',\n        'border-radius': '10px',\n        'position': 'relative',\n        'right': '5px'\n      }\">\n      </ngx-skeleton-loader>\n      <div class=\"second-section-wrapper\">\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '80%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '90%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '60%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n      </div>\n    </div>\n    <div class=\"skeleton\">\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n        width: '100%',\n        height: '40vh',\n        'border-radius': '10px',\n        'position': 'relative',\n        'right': '5px'\n      }\">\n      </ngx-skeleton-loader>\n      <div class=\"second-section-wrapper\">\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '80%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '90%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '60%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"banner-skeleton\" *ngIf=\"sectionType === 'banner' || sectionType === 'text_image'\">\n    <div style=\"width: 50%;\">\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n        width: '90%',\n        height: '400px',\n        'border-radius': '10px'\n      }\">\n      </ngx-skeleton-loader>\n    </div>\n    <div class=\"second-section-wrapper\" style=\"width: 50%;padding-top: 50px;\">\n      <div class=\"wrapper\">\n        <ngx-skeleton-loader [theme]=\"{\n            width: '80%',\n            'border-radius': '0',\n            height: '15px',\n            'margin-bottom': '10px'\n          }\"></ngx-skeleton-loader>\n      </div>\n      <div class=\"wrapper\">\n        <ngx-skeleton-loader [theme]=\"{\n            width: '90%',\n            'border-radius': '0',\n            height: '15px',\n            'margin-bottom': '10px'\n          }\"></ngx-skeleton-loader>\n      </div>\n      <div class=\"wrapper\">\n        <ngx-skeleton-loader [theme]=\"{\n            width: '60%',\n            'border-radius': '0',\n            height: '15px',\n            'margin-bottom': '10px'\n          }\"></ngx-skeleton-loader>\n      </div>\n      <div style=\"margin-top: 50px;\">\n        <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n            width: '130px',\n            height: '45px',\n            'border-radius': '10px'\n          }\">\n        </ngx-skeleton-loader>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"text-skeleton\" *ngIf=\"sectionType === 'text'\">\n    <div class=\"wrapper\">\n      <ngx-skeleton-loader [theme]=\"{\n          width: '80%',\n          'border-radius': '0',\n          height: '15px',\n          'margin-bottom': '10px'\n        }\"></ngx-skeleton-loader>\n    </div>\n    <div class=\"wrapper\">\n      <ngx-skeleton-loader [theme]=\"{\n          width: '90%',\n          'border-radius': '0',\n          height: '15px',\n          'margin-bottom': '10px'\n        }\"></ngx-skeleton-loader>\n    </div>\n    <div class=\"wrapper\">\n      <ngx-skeleton-loader [theme]=\"{\n          width: '60%',\n          'border-radius': '0',\n          height: '15px',\n          'margin-bottom': '10px'\n        }\"></ngx-skeleton-loader>\n    </div>\n    <div style=\"margin-top: 50px;\">\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n          width: '130px',\n          height: '45px',\n          'border-radius': '10px'\n        }\">\n      </ngx-skeleton-loader>\n    </div>\n  </div>\n\n  <div class=\"testimonial-skeleton\" *ngIf=\"sectionType === 'testimonial'\">\n    <div>\n      <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{ width: '80px', height: '80px' }\">\n      </ngx-skeleton-loader>\n    </div>\n    <div class=\"wrapper\" style=\"margin-top: 20px;\">\n      <ngx-skeleton-loader [theme]=\"{\n          width: '80%',\n          'border-radius': '0',\n          height: '15px',\n          'margin-bottom': '10px'\n        }\"></ngx-skeleton-loader>\n    </div>\n    <div class=\"wrapper\">\n      <ngx-skeleton-loader [theme]=\"{\n          width: '90%',\n          'border-radius': '0',\n          height: '15px',\n          'margin-bottom': '10px'\n        }\"></ngx-skeleton-loader>\n    </div>\n    <div class=\"wrapper\">\n      <ngx-skeleton-loader [theme]=\"{\n          width: '60%',\n          'border-radius': '0',\n          height: '15px',\n          'margin-bottom': '10px'\n        }\"></ngx-skeleton-loader>\n    </div>\n    <div style=\"margin-top: 50px;\">\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n          width: '130px',\n          height: '45px',\n          'border-radius': '10px'\n        }\">\n      </ngx-skeleton-loader>\n    </div>\n  </div>\n\n  <div class=\"image-skeleton\"\n    *ngIf=\"sectionType === 'imageCarousel' || sectionType === 'image' || sectionType === 'contact us'\">\n    <ngx-skeleton-loader count=\"1\" [theme]=\"{\n      'border-radius': '5px',\n      height: '50vh',\n      width: '100%'\n    }\"></ngx-skeleton-loader>\n  </div>\n</div>\n", styles: [".main-section{position:relative;left:25px}.p-15{padding:15px}.wrapper{width:100%;flex:1}.second-section-wrapper{width:100%;height:auto;flex:1}.skeleton-parent{display:flex;gap:15px}.skeleton{padding:10px;border:1px solid #e5e7eb;width:33.33%;border-radius:10px}.banner-skeleton{display:flex;gap:10px}.text-skeleton,.testimonial-skeleton{text-align:center}.image-skeleton{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkeletonLoaderSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-skeleton-loader-section', standalone: true, imports: [CommonModule, NgxSkeletonLoaderModule], template: "<div class=\"p-15\" style=\"width: 100%;\">\r\n  <div class=\"skeleton-parent\"\r\n    *ngIf=\"sectionType === 'service' || sectionType === 'teammember' || sectionType === 'imagegrid'\">\r\n    <div class=\"skeleton\">\r\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n        width: '100%',\r\n        height: '40vh',\r\n        'border-radius': '10px',\r\n        'position': 'relative',\r\n        'right': '5px'\r\n      }\">\r\n      </ngx-skeleton-loader>\r\n      <div class=\"second-section-wrapper\">\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '80%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '90%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '60%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"skeleton\">\r\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n        width: '100%',\r\n        height: '40vh',\r\n        'border-radius': '10px',\r\n        'position': 'relative',\r\n        'right': '5px'\r\n      }\">\r\n      </ngx-skeleton-loader>\r\n      <div class=\"second-section-wrapper\">\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '80%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '90%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '60%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"skeleton\">\r\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n        width: '100%',\r\n        height: '40vh',\r\n        'border-radius': '10px',\r\n        'position': 'relative',\r\n        'right': '5px'\r\n      }\">\r\n      </ngx-skeleton-loader>\r\n      <div class=\"second-section-wrapper\">\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '80%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '90%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '60%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"banner-skeleton\" *ngIf=\"sectionType === 'banner' || sectionType === 'text_image'\">\r\n    <div style=\"width: 50%;\">\r\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n        width: '90%',\r\n        height: '400px',\r\n        'border-radius': '10px'\r\n      }\">\r\n      </ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"second-section-wrapper\" style=\"width: 50%;padding-top: 50px;\">\r\n      <div class=\"wrapper\">\r\n        <ngx-skeleton-loader [theme]=\"{\r\n            width: '80%',\r\n            'border-radius': '0',\r\n            height: '15px',\r\n            'margin-bottom': '10px'\r\n          }\"></ngx-skeleton-loader>\r\n      </div>\r\n      <div class=\"wrapper\">\r\n        <ngx-skeleton-loader [theme]=\"{\r\n            width: '90%',\r\n            'border-radius': '0',\r\n            height: '15px',\r\n            'margin-bottom': '10px'\r\n          }\"></ngx-skeleton-loader>\r\n      </div>\r\n      <div class=\"wrapper\">\r\n        <ngx-skeleton-loader [theme]=\"{\r\n            width: '60%',\r\n            'border-radius': '0',\r\n            height: '15px',\r\n            'margin-bottom': '10px'\r\n          }\"></ngx-skeleton-loader>\r\n      </div>\r\n      <div style=\"margin-top: 50px;\">\r\n        <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n            width: '130px',\r\n            height: '45px',\r\n            'border-radius': '10px'\r\n          }\">\r\n        </ngx-skeleton-loader>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"text-skeleton\" *ngIf=\"sectionType === 'text'\">\r\n    <div class=\"wrapper\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '80%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"wrapper\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '90%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"wrapper\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '60%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div style=\"margin-top: 50px;\">\r\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n          width: '130px',\r\n          height: '45px',\r\n          'border-radius': '10px'\r\n        }\">\r\n      </ngx-skeleton-loader>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"testimonial-skeleton\" *ngIf=\"sectionType === 'testimonial'\">\r\n    <div>\r\n      <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{ width: '80px', height: '80px' }\">\r\n      </ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"wrapper\" style=\"margin-top: 20px;\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '80%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"wrapper\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '90%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"wrapper\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '60%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div style=\"margin-top: 50px;\">\r\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n          width: '130px',\r\n          height: '45px',\r\n          'border-radius': '10px'\r\n        }\">\r\n      </ngx-skeleton-loader>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"image-skeleton\"\r\n    *ngIf=\"sectionType === 'imageCarousel' || sectionType === 'image' || sectionType === 'contact us'\">\r\n    <ngx-skeleton-loader count=\"1\" [theme]=\"{\r\n      'border-radius': '5px',\r\n      height: '50vh',\r\n      width: '100%'\r\n    }\"></ngx-skeleton-loader>\r\n  </div>\r\n</div>\r\n", styles: [".main-section{position:relative;left:25px}.p-15{padding:15px}.wrapper{width:100%;flex:1}.second-section-wrapper{width:100%;height:auto;flex:1}.skeleton-parent{display:flex;gap:15px}.skeleton{padding:10px;border:1px solid #e5e7eb;width:33.33%;border-radius:10px}.banner-skeleton{display:flex;gap:10px}.text-skeleton,.testimonial-skeleton{text-align:center}.image-skeleton{width:100%}\n"] }]
+            args: [{ selector: 'simpo-skeleton-loader-section', standalone: true, imports: [CommonModule, NgxSkeletonLoaderModule], template: "<div class=\"p-15\" style=\"width: 100%;\">\n  <div class=\"skeleton-parent\"\n    *ngIf=\"sectionType === 'service' || sectionType === 'teammember' || sectionType === 'imagegrid'\">\n    <div class=\"skeleton\">\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n        width: '100%',\n        height: '40vh',\n        'border-radius': '10px',\n        'position': 'relative',\n        'right': '5px'\n      }\">\n      </ngx-skeleton-loader>\n      <div class=\"second-section-wrapper\">\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '80%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '90%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '60%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n      </div>\n    </div>\n    <div class=\"skeleton\">\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n        width: '100%',\n        height: '40vh',\n        'border-radius': '10px',\n        'position': 'relative',\n        'right': '5px'\n      }\">\n      </ngx-skeleton-loader>\n      <div class=\"second-section-wrapper\">\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '80%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '90%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '60%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n      </div>\n    </div>\n    <div class=\"skeleton\">\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n        width: '100%',\n        height: '40vh',\n        'border-radius': '10px',\n        'position': 'relative',\n        'right': '5px'\n      }\">\n      </ngx-skeleton-loader>\n      <div class=\"second-section-wrapper\">\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '80%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '90%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n        <div class=\"wrapper\">\n          <ngx-skeleton-loader [theme]=\"{\n              width: '60%',\n              'border-radius': '0',\n              height: '15px',\n              'margin-bottom': '10px'\n            }\"></ngx-skeleton-loader>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"banner-skeleton\" *ngIf=\"sectionType === 'banner' || sectionType === 'text_image'\">\n    <div style=\"width: 50%;\">\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n        width: '90%',\n        height: '400px',\n        'border-radius': '10px'\n      }\">\n      </ngx-skeleton-loader>\n    </div>\n    <div class=\"second-section-wrapper\" style=\"width: 50%;padding-top: 50px;\">\n      <div class=\"wrapper\">\n        <ngx-skeleton-loader [theme]=\"{\n            width: '80%',\n            'border-radius': '0',\n            height: '15px',\n            'margin-bottom': '10px'\n          }\"></ngx-skeleton-loader>\n      </div>\n      <div class=\"wrapper\">\n        <ngx-skeleton-loader [theme]=\"{\n            width: '90%',\n            'border-radius': '0',\n            height: '15px',\n            'margin-bottom': '10px'\n          }\"></ngx-skeleton-loader>\n      </div>\n      <div class=\"wrapper\">\n        <ngx-skeleton-loader [theme]=\"{\n            width: '60%',\n            'border-radius': '0',\n            height: '15px',\n            'margin-bottom': '10px'\n          }\"></ngx-skeleton-loader>\n      </div>\n      <div style=\"margin-top: 50px;\">\n        <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n            width: '130px',\n            height: '45px',\n            'border-radius': '10px'\n          }\">\n        </ngx-skeleton-loader>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"text-skeleton\" *ngIf=\"sectionType === 'text'\">\n    <div class=\"wrapper\">\n      <ngx-skeleton-loader [theme]=\"{\n          width: '80%',\n          'border-radius': '0',\n          height: '15px',\n          'margin-bottom': '10px'\n        }\"></ngx-skeleton-loader>\n    </div>\n    <div class=\"wrapper\">\n      <ngx-skeleton-loader [theme]=\"{\n          width: '90%',\n          'border-radius': '0',\n          height: '15px',\n          'margin-bottom': '10px'\n        }\"></ngx-skeleton-loader>\n    </div>\n    <div class=\"wrapper\">\n      <ngx-skeleton-loader [theme]=\"{\n          width: '60%',\n          'border-radius': '0',\n          height: '15px',\n          'margin-bottom': '10px'\n        }\"></ngx-skeleton-loader>\n    </div>\n    <div style=\"margin-top: 50px;\">\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n          width: '130px',\n          height: '45px',\n          'border-radius': '10px'\n        }\">\n      </ngx-skeleton-loader>\n    </div>\n  </div>\n\n  <div class=\"testimonial-skeleton\" *ngIf=\"sectionType === 'testimonial'\">\n    <div>\n      <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{ width: '80px', height: '80px' }\">\n      </ngx-skeleton-loader>\n    </div>\n    <div class=\"wrapper\" style=\"margin-top: 20px;\">\n      <ngx-skeleton-loader [theme]=\"{\n          width: '80%',\n          'border-radius': '0',\n          height: '15px',\n          'margin-bottom': '10px'\n        }\"></ngx-skeleton-loader>\n    </div>\n    <div class=\"wrapper\">\n      <ngx-skeleton-loader [theme]=\"{\n          width: '90%',\n          'border-radius': '0',\n          height: '15px',\n          'margin-bottom': '10px'\n        }\"></ngx-skeleton-loader>\n    </div>\n    <div class=\"wrapper\">\n      <ngx-skeleton-loader [theme]=\"{\n          width: '60%',\n          'border-radius': '0',\n          height: '15px',\n          'margin-bottom': '10px'\n        }\"></ngx-skeleton-loader>\n    </div>\n    <div style=\"margin-top: 50px;\">\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n          width: '130px',\n          height: '45px',\n          'border-radius': '10px'\n        }\">\n      </ngx-skeleton-loader>\n    </div>\n  </div>\n\n  <div class=\"image-skeleton\"\n    *ngIf=\"sectionType === 'imageCarousel' || sectionType === 'image' || sectionType === 'contact us'\">\n    <ngx-skeleton-loader count=\"1\" [theme]=\"{\n      'border-radius': '5px',\n      height: '50vh',\n      width: '100%'\n    }\"></ngx-skeleton-loader>\n  </div>\n</div>\n", styles: [".main-section{position:relative;left:25px}.p-15{padding:15px}.wrapper{width:100%;flex:1}.second-section-wrapper{width:100%;height:auto;flex:1}.skeleton-parent{display:flex;gap:15px}.skeleton{padding:10px;border:1px solid #e5e7eb;width:33.33%;border-radius:10px}.banner-skeleton{display:flex;gap:10px}.text-skeleton,.testimonial-skeleton{text-align:center}.image-skeleton{width:100%}\n"] }]
         }], propDecorators: { sectionType: [{
                 type: Input
             }] } });
@@ -14980,8 +14980,8 @@ class AppointmentBookingComponent {
     getAllServices() {
         this.skeletonLoader = true;
         let servicePayload = {
-            // businessId: this.businessId ?? "",
-            businessId: '1f15cb67-d274-6ef7-8fc5-7b1ec5ec2d15',
+            businessId: this.businessId ?? "",
+            // businessId:'1f15cb67-d274-6ef7-8fc5-7b1ec5ec2d15',
             pageNo: 0,
             size: 100
         };
@@ -17097,7 +17097,7 @@ class RegistrationFormComponent extends BaseSection {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RegistrationFormComponent, deps: [{ token: RestService }, { token: i2$3.MatSnackBar }, { token: EventsService }, { token: i2$2.ActivatedRoute }, { token: i1.DomSanitizer }, { token: ImageUplaodService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RegistrationFormComponent, isStandalone: true, selector: "simpo-registration-form", inputs: { data: "data", index: "index", edit: "edit", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\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\">\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=\"body-section\">\r\n          <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n            <div>\r\n              <simpo-text-element [textData]=\"content?.inputText?.[0]?.value\"\r\n                [textLabel]=\"content?.inputText?.[0]?.label\"></simpo-text-element>\r\n            </div>\r\n            <div class=\"d-flex gap-2 d-md-flex mt-15\" *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            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <section class=\"main-section\">\r\n    <div *ngIf=\"formStatus != 'REGISTERED' && formStatus != 'ADMITTED'\">\r\n      <div class=\"subTabs_section\">\r\n        <div class=\"list_tabs d-flex align-items-center\">\r\n          <ng-container *ngFor=\"let key of Object.keys(fieldData)\">\r\n            <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = key\"\r\n              [ngClass]=\"selectedKey === key ? 'single_tab_active' : 'single_tab'\">\r\n              {{key | titlecase}}\r\n            </div>\r\n          </ng-container>\r\n          <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = 'Document'\"\r\n            *ngIf=\"data?.sectionType === 'admissionForm'\"\r\n            [ngClass]=\"selectedKey === 'Document' ? 'single_tab_active' : 'single_tab'\">\r\n            Document\r\n          </div>\r\n          <div class=\"single_tab cursor-pointer\" (click)=\"redirectToPayment()\"\r\n            *ngIf=\"data?.sectionType === 'admissionForm'\"\r\n            [ngClass]=\"selectedKey === 'Payment' ? 'single_tab_active' : 'single_tab'\">\r\n            Payment\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"main-content\">\r\n        <ng-container\r\n          *ngFor=\"let group of fieldData[selectedKey] ? Object.keys(fieldData[selectedKey]) : [];let groupIndex = index\">\r\n          <div class=\"body\" *ngIf=\"group !== 'Backup Contact'\">\r\n            <div class=\"list_tabs backToLeads d-flex align-items-center\">\r\n              {{group}}\r\n            </div>\r\n\r\n            <ng-container *ngIf=\"groupIndex == 0 && Object.keys(fieldData)[0] === selectedKey\">\r\n              <div class=\"image-box\" *ngIf=\"!payload.imgUrl\">\r\n                <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\r\n                  (click)=\"fileInput.click()\" alt=\"\">\r\n                <div class=\"image_box\">\r\n                  <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput.click()\">Click to\r\n                    upload</span>\r\n                </div>\r\n              </div>\r\n              <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\"\r\n                accept=\"image/x-png,image/jpeg,image/jpg\" (change)=\"updateAdmissionImage($event)\" class=\"pc-btn\"\r\n                id=\"browse_contact_image\" #fileInput />\r\n\r\n              <div *ngIf=\"payload.imgUrl\" class=\"addedImg\">\r\n                <div class=\"uploadedImg\">\r\n                  <img alt=\"\" [src]=\"ds.bypassSecurityTrustUrl(payload.imgUrl)\">\r\n                </div>\r\n                <div class=\"image-buttons\">\r\n                  <div class=\"button\" (click)=\"fileInput.click()\">\r\n                    <img src=\"../../../../../../../../../assets/images/blogs/change_image.svg\" alt=\"\">\r\n                    Change Image\r\n                  </div>\r\n                  <div class=\"button delete-change\" (click)=\"deleteImg()\">\r\n\r\n                    <div class=\"delete\">\r\n                      <img src=\"./../../../../../../../../../assets/images/blogs/delete_image.svg\" alt=\"\">\r\n                      <div>Delete</div>\r\n                    </div>\r\n\r\n                  </div>\r\n                </div>\r\n\r\n              </div>\r\n            </ng-container>\r\n\r\n            <!-- <div class=\"row mt-1\">\r\n            <ng-container *ngFor=\"let info of fieldData[selectedKey][group]\">\r\n              <div class=\"col-md-4 col-12 mt-1\" *ngIf=\"info.isDisplay\">\r\n                <label for=\"\" class=\"label-text\">{{info.displayText || info.fieldLabel}}</label>&nbsp; <span style=\"color: red;\" *ngIf=\"info.required\">*</span> <br>\r\n                <ng-container *ngTemplateOutlet=\"inputData; context: {data: info, group:group}\"></ng-container>\r\n              </div>\r\n            </ng-container>\r\n          </div> -->\r\n            <div class=\"row mt-1\"\r\n              *ngIf=\"group != 'Siblings Details' && (group.toLowerCase()).split(' ').join('_') != 'past_school_details'\">\r\n              <ng-container *ngFor=\"let info of fieldData[selectedKey][group]\">\r\n                <div\r\n                  [ngClass]=\"(info.type === 'FATHER_IMAGE' || info.type === 'MOTHER_IMAGE' || info.type === 'GUARDIAN_IMAGE') ? 'col-md-12 col-12' : 'col-md-4 col-12 mt-1'\"\r\n                  *ngIf=\"info.isDisplay\">\r\n                  <div class=\"d-flex\">\r\n                    <label for=\"\" class=\"label-text\"\r\n                      *ngIf=\"(info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\"\r\n                      [title]=\"returnDisplayText(info.displayText || info.fieldLabel)\">{{returnDisplayText(info.displayText\r\n                      || info.fieldLabel)}}</label>&nbsp; <span style=\"color: red;\"\r\n                      *ngIf=\"info.required && (info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\">*</span>\r\n                  </div>\r\n                  <ng-container *ngTemplateOutlet=\"inputData; context: {data: info, group:group}\"></ng-container>\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n            <div class=\"\" *ngIf=\"group === 'Siblings Details'\">\r\n              <ng-container\r\n                *ngFor=\"let key of objectKeys(groupOfSiblings(fieldData['Family Details']['Siblings Details']));let i = index\">\r\n                <div class=\"row mt-2\">\r\n                  <ng-container\r\n                    *ngFor=\"let info of groupOfSiblings(fieldData['Family Details']['Siblings Details'])[key]\">\r\n                    <div class=\"col-md-4 col-12 mt-1\" *ngIf=\"info.isDisplay\">\r\n                      <div class=\"d-flex\">\r\n                        <label for=\"\" class=\"label-text\"\r\n                          *ngIf=\"(info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\"\r\n                          [title]=\"returnDisplayText(info.displayText || info.fieldLabel)\">{{info.displayText\r\n                          || info.fieldLabel}}</label>&nbsp; <span style=\"color: red;\"\r\n                          *ngIf=\"info.required && (info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\">*</span>\r\n                      </div>\r\n                      <ng-container *ngTemplateOutlet=\"inputData; context: {data: info, group:group}\"></ng-container>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n                <!-- <div class=\"border_bottom\" *ngIf=\"i >= 1\"></div> -->\r\n              </ng-container>\r\n              <div class=\"add_more_siblings d-flex justify-content-end\"\r\n                *ngIf=\"group === 'Siblings Details' && showAddSiblingsButton()\">\r\n                <button (click)=\"addSibling(nextSiblingNumber)\" class=\"add_sibling\"\r\n                  style=\"width:max-content !important\">+ Add Sibling {{ nextSiblingNumber\r\n                  }}</button>\r\n              </div>\r\n            </div>\r\n            <div class=\"\" *ngIf=\"group === 'Past school Details'\">\r\n              <ng-container\r\n                *ngFor=\"let key of objectKeys(groupOfPastSchoolDetails(fieldData['Student Details']['Past school Details']));let i = index\">\r\n                <div class=\"row mt-2\">\r\n                  <ng-container\r\n                    *ngFor=\"let info of groupOfPastSchoolDetails(fieldData['Student Details']['Past school Details'])[key]\">\r\n                    <div class=\"col-md-4 col-12 mt-1\" *ngIf=\"info.isDisplay\">\r\n                      <div class=\"d-flex\">\r\n                        <label for=\"\" class=\"label-text\"\r\n                          *ngIf=\"(info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\"\r\n                          [title]=\"returnDisplayText(info.displayText || info.fieldLabel)\">{{info.displayText\r\n                          || info.fieldLabel}}</label>&nbsp; <span style=\"color: red;\"\r\n                          *ngIf=\"info.required && (info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\">*</span>\r\n                      </div>\r\n                      <ng-container *ngTemplateOutlet=\"inputData; context: {data: info, group:group}\"></ng-container>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </ng-container>\r\n              <div class=\"add_more_siblings d-flex justify-content-end mt-1\"\r\n                *ngIf=\"group === 'Past school Details' && showAddPastSchoolButton()\">\r\n                <button (click)=\"addPastSchool(nextPastSchoolNumber)\" class=\"add_sibling\"\r\n                style=\"width:max-content !important\">+ Add Past School {{\r\n                  nextPastSchoolNumber}}</button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"body\"\r\n            *ngIf=\"fieldData[selectedKey].hasOwnProperty('Backup Contact') && studentLiveWith === 'single parent' && groupIndex == 0 && Object.keys(fieldData)[0] === selectedKey\">\r\n            <div class=\"list_tabs backToLeads d-flex align-items-center\">\r\n              Backup Contact (Optional)\r\n            </div>\r\n\r\n            <div class=\"row mt-1\">\r\n              <div class=\"col-md-12\">\r\n                <label class=\"mtb-15 checkbox-label\">\r\n                  <input type=\"checkbox\" name=\"\" id=\"\" [(ngModel)]=\"payload.parentAuthorization\">\r\n                  I authorize the school to release the child only to the parent listed above\r\n                </label>\r\n              </div>\r\n              <div class=\"col-md-4 col-12 mt-1\" *ngFor=\"let info of fieldData[selectedKey]['Backup Contact']\">\r\n                <label for=\"\" class=\"label-text\">{{info.displayText || info.fieldLabel}}</label>&nbsp; <span\r\n                  style=\"color: red;\" *ngIf=\"info.required\">*</span> <br>\r\n                <ng-container *ngTemplateOutlet=\"inputData; context: {data: info}\"></ng-container>\r\n              </div>\r\n              <div class=\"col-md-4 col-12 mt-1\">\r\n                <label for=\"\" class=\"label-text\">Upload Supporting Document (Optional)</label>\r\n                <div class=\"input-text upload-file\" (click)=\"backUpDocInput.click()\">\r\n                  <p>{{backupDocFile ? 'File Uploaded' : 'Upload File'}}</p>\r\n                  <mat-icon>cloud_upload</mat-icon>\r\n                </div>\r\n                <input id=\"vendorImage\" type=\"file\" name=\"myfile\" hidden\r\n                  accept=\".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/x-png,image/jpeg,image/jpg,.pdf, video/mp4,video/x-matroska,video/x-msvideo,video/quicktime\"\r\n                  (change)=\"uploadBackUpDocument($event)\" class=\"pc-btn\" id=\"browse_contact_image\" #backUpDocInput />\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n        </ng-container>\r\n        <div class=\"payment-details\" *ngIf=\"selectedKey === 'Document' && data?.sectionType === 'admissionForm'\">\r\n          <simpo-document [documentList]=\"documentList\"></simpo-document>\r\n        </div>\r\n        <div class=\"payment-details\" *ngIf=\"selectedKey === 'Payment' && data?.sectionType === 'admissionForm'\">\r\n          <simpo-payment-details [admissionData]=\"payload\" [subscriptionsData]=\"subscriptionsData\"\r\n            [termPaymentList]=\"termPaymentList\"></simpo-payment-details>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"button-parent\">\r\n        <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n          <button class=\"button\" (click)=\"submitForm()\" simpoButtonDirective [id]=\"data?.id+button.id\"\r\n            [buttonStyle]=\"button.styles\" *ngIf=\"(data?.sectionType === 'admissionForm' && selectedKey == 'Payment') ||\r\n            (data?.sectionType === 'registrationForm' &&\r\n              (Object.keys(fieldData)[Object.keys(fieldData).length - 1] == selectedKey))\"\r\n            [color]=\"data?.styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n\r\n          <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\r\n            [buttonStyle]=\"button.styles\" *ngIf=\"selectedKey != 'Payment' && data?.sectionType === 'admissionForm'\"\r\n            [color]=\"data?.styles?.background?.accentColor\">Continue</button>\r\n\r\n          <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\r\n            [buttonStyle]=\"button.styles\"\r\n            *ngIf=\"data?.sectionType === 'registrationForm' && (Object.keys(fieldData)[Object.keys(fieldData).length - 1] != selectedKey)\"\r\n            [color]=\"data?.styles?.background?.accentColor\">Continue</button>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"emptyText\" *ngIf=\"formStatus == 'REGISTERED' || formStatus == 'ADMITTED'\">\r\n      <img [src]=\"content?.image?.url\" alt=\"\" *ngIf=\"content?.image?.showImage\">\r\n      <div class=\"heading-large\" [innerHtml]=\"content?.inputText?.[1]?.value\"></div>\r\n    </div>\r\n  </section>\r\n\r\n  <ng-template #inputData let-field=\"data\" let-group=\"group\">\r\n    <div *ngIf=\"field.dataType == 'IMAGE'\">\r\n      <div class=\"image-box\" *ngIf=\"!field.fieldImageUrl\">\r\n        <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\r\n          (click)=\"fileInput2.click()\" alt=\"\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput2.click()\">Click to\r\n            upload</span>\r\n        </div>\r\n      </div>\r\n      <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\" accept=\"image/x-png,image/jpeg,image/jpg\"\r\n        (change)=\"uploadParentGuardinaImages($event,field)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput2 />\r\n      <div *ngIf=\"field.fieldImageUrl\" class=\"addedImg\">\r\n        <div class=\"uploadedImg\">\r\n          <img alt=\"\" [src]=\"ds.bypassSecurityTrustUrl(field.fieldImageUrl)\">\r\n        </div>\r\n        <div class=\"image-buttons\">\r\n          <div class=\"button\" (click)=\"fileInput2.click()\">\r\n            <img src=\"../../../../../../../../../assets/images/blogs/change_image.svg\" alt=\"\">\r\n            Change Image\r\n          </div>\r\n          <div class=\"button delete-change\" (click)=\"deleteImg()\">\r\n\r\n            <div class=\"delete\">\r\n              <img src=\"./../../../../../../../../../assets/images/blogs/delete_image.svg\" alt=\"\">\r\n              <div>Delete</div>\r\n            </div>\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'TEXT' && field.isDisplay\">\r\n      <input type=\"text\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\r\n      <div class=\"error\" *ngIf=\"field.fieldValue && !getFieldValidation(field)\">\r\n        <ng-container *ngIf=\"field.fieldLabel?.toLowerCase().includes('phone number')\">\r\n          Please enter a valid 10-digit Indian mobile number.\r\n        </ng-container>\r\n        <ng-container *ngIf=\"field.fieldLabel?.toLowerCase().includes('email')\">\r\n          Please enter a valid email address.\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'NUMBER' && field.isDisplay\">\r\n      <input type=\"number\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\r\n      <div class=\"error\" *ngIf=\"field.fieldValue && !getFieldValidation(field)\">\r\n        <ng-container *ngIf=\"field.fieldLabel?.toLowerCase().includes('phone number')\">\r\n          Please enter a valid 10-digit Indian mobile number.\r\n        </ng-container>\r\n        <ng-container *ngIf=\"field.fieldLabel?.toLowerCase().includes('email')\">\r\n          Please enter a valid email address.\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'MONEY' && field.isDisplay\">\r\n      <input type=\"text\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'DATE' && field.isDisplay\">\r\n      <input type=\"date\" class=\"input-text\" [(ngModel)]=\"field.fieldValue\" [placeholder]=\"'Select '+field.fieldLabel\"\r\n        [max]=\"getMaxDate(field)\" (input)=\"checkDob(field)\">\r\n    </div>\r\n    <div class=\"input-container\" *ngIf=\"field.dataType === 'TEXT_FILE' && field.isDisplay\">\r\n      <input matInput class=\"input-text-1\" [(ngModel)]=\"field.fieldValue\" style=\"width:90%\">\r\n      <div class=\"image-box-1 d-flex justify-content-center align-items-center\" *ngIf=\"!field.fieldImageUrl\"\r\n        style=\"width:10%\">\r\n        <mat-icon (click)=\"fileInput1.click()\"\r\n          class=\"dummy-image-1 w-100 d-flex justify-content-center\">cloud_upload</mat-icon>\r\n      </div>\r\n      <div class=\"image-box-1 d-flex justify-content-center align-items-center\" *ngIf=\"field.fieldImageUrl\"\r\n        style=\"width:10%\">\r\n        <!-- If the uploaded file is an image, show the preview -->\r\n        <img *ngIf=\"isImage(field.fieldImageUrl)\" alt=\"\" class=\"w-100 h-100\"\r\n          [src]=\"ds.bypassSecurityTrustUrl(field.fieldImageUrl)\" (click)=\"fileInput1.click()\" />\r\n\r\n        <!-- If the uploaded file is not an image, show a file icon -->\r\n        <mat-icon *ngIf=\"!isImage(field.fieldImageUrl)\"\r\n          class=\"w-100 d-flex justify-content-center align-items-center dummy-image-1\"\r\n          (click)=\"fileInput1.click()\">insert_drive_file</mat-icon>\r\n      </div>\r\n\r\n      <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\"\r\n        accept=\".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/x-png,image/jpeg,image/jpg,.pdf, video/mp4,video/x-matroska,video/x-msvideo,video/quicktime\"\r\n        (change)=\"updateSelectedImage($event,field)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput1 />\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'DROPDOWN' && field.isDisplay\" class=\"admission\">\r\n      <mat-form-field class=\"input-text-1 input_card\" appearance=\"outline\" style=\"width:100%\">\r\n        <mat-select class=\"inputStyle\" placeholder=\"--Select--\" [(ngModel)]=\"field.fieldValue\"\r\n          [multiple]=\"field.multipleSelection\">\r\n          <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\r\n            <mat-option *ngFor=\"let item of field.value\" [value]=\"item?.value\"\r\n              (click)=\"masterDropdownValueChange(item, field)\">{{item.label}}</mat-option>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\r\n            <mat-option *ngFor=\"let item of field.sourceData[field.dataSourceType]\"\r\n              (click)=\"inputFieldChange(item, field)\" [value]=\"item?.name\">{{item.name}}</mat-option>\r\n          </ng-container>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'CHECKBOX' && field.isDisplay\">\r\n      <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\r\n        <div class=\"form-check mb-5\" *ngFor=\"let data of field.value\">\r\n          <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\" [(ngModel)]=\"data.checked\">\r\n          <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n            {{data.label}}\r\n          </label>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\r\n        <div class=\"form-check mb-5\" *ngFor=\"let data of field.sourceData[field.dataSourceType]\">\r\n          <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\" [(ngModel)]=\"data.checked\">\r\n          <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n            {{data.name}}\r\n          </label>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'RADIOBUTTON' && field.isDisplay\">\r\n      <div style=\"display: flex; gap: 20px; margin-top: 10px; height: 35px;align-items: center;\">\r\n        <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\r\n          <!-- <div class=\" mb-5\" *ngFor=\"let data of field.value\">\r\n            <mat-radio-button [value]=\"data.value\" [(ngModel)]=\"field.fieldValue\">{{data.label}}</mat-radio-button>\r\n          </div> -->\r\n          <mat-radio-group [(ngModel)]=\"field.fieldValue\" (change)=\"radioButtonChanged(field,selectedKey,group)\">\r\n            <mat-radio-button *ngFor=\"let data of field.value\" [value]=\"data.value\">\r\n              {{ data.label }}\r\n            </mat-radio-button>\r\n          </mat-radio-group>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\r\n          <div class=\"form-check mb-5\" *ngFor=\"let data of field.value\">\r\n            <input class=\"form-check-input\" type=\"radio\" [value]=\"data.name\" [(ngModel)]=\"field.fieldValue\" />\r\n\r\n            <label class=\"form-check-label\" [for]=\"'radio_' + data.name\">\r\n              {{ data.name }}\r\n            </label>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n\r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n</section>", 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}.hover_effect{position:absolute;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:left;margin-bottom:8px}}.main-section{width:100%;overflow-y:hidden}.subTabs_section{padding:1rem 5rem;height:12vh}.active_route_section{height:89%;border:1px solid #0000000F;padding:15px 20px;background-color:#fff;border-radius:6px}.active_route_section_normal{background-color:#f6f6f6;border:none;padding:10px 4rem}.list_tabs{border:1px solid #0000001A;background-color:#ffffffe5;padding:10px;border-radius:6px;gap:10px;height:50px}.single_tab{color:#0e233c99;font-size:14px;font-weight:500;font-family:interReg;padding:10px 20px}.single_tab_active{width:max-content;height:32px;background-color:#0015800a;display:flex;align-items:center;font-weight:600;padding:10px 20px;border-radius:4px;color:#0e233c}.align-items-center{align-items:center}.header{height:8vh;padding:10px;border-bottom:2px solid rgba(0,0,0,.06);display:flex}.p-5{padding:5rem}.backToLeads{color:#000!important}.body{margin:1rem 5rem 0rem;box-shadow:#00000029 0 1px 4px;padding:2rem;border-radius:10px}.profile-img{display:flex;align-items:center;gap:2rem}.mt-2{margin-top:2rem!important}.mt-1{margin-top:1rem!important}.image-box{display:flex;gap:1rem;margin-top:3rem;cursor:pointer}.image-box span{color:#0189ea;font-size:14px;font-weight:500;padding:11px 7rem;border:2px solid rgba(0,0,0,.06);height:47px;border-radius:10px}.image_box{display:flex;align-items:center}.dummy-image{height:55px}.label-text{font-weight:400;font-family:Inter;font-size:14px;color:#434443}.input-text{border-radius:7px;border:2px solid rgba(208,213,221,1);height:42px;width:100%;margin-top:5px;padding-left:10px}.footer{display:flex;gap:1rem;align-items:center;justify-content:flex-end;height:8vh;padding:10px;border-top:2px solid rgba(0,0,0,.06);position:absolute;bottom:0;width:100%}.footer .continue{font-size:13px;font-family:interMedium;color:#242424;font-weight:500;border:none;background-color:#f6c318;padding:10px 20px;border-radius:8px;width:max-content}.footer .cancel{font-size:13px;font-family:interMedium;color:#f6c318;font-weight:500;border:1px solid #F6C318;background-color:#fff;padding:10px 20px;border-radius:8px;width:max-content}.main-content{overflow:scroll;padding-top:5px;padding-bottom:10px}.button-parent{padding:1rem 5rem 1rem 2rem;align-items:center;display:flex;justify-content:flex-end}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.payment-details{margin:1rem 5rem 0rem;box-shadow:#00000029 0 1px 4px;border-radius:10px}.mb-5{margin-bottom:5px!important}.addedImg{display:flex;gap:5%;width:95%;margin-top:2rem}.addedImg .uploadedImg img{height:65px;width:65px;border-radius:50%}.addedImg .image-buttons{display:flex;gap:3%;padding-top:20px}.addedImg .image-buttons .button{display:flex;gap:8px;width:142px;height:40px;padding:12px 8px;font-family:lexandMedium;color:#3f3b3b;font-style:normal;font-weight:500;font-size:12px!important;border:1px dashed #E4E7EC;border-radius:12px;cursor:pointer}.addedImg .image-buttons .button img{width:20px}.addedImg .image-buttons .button .delete{display:flex;gap:15%;width:60%;margin:auto}.addedImg .image-buttons .button .delete img{width:12px}.emptyText{height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:50px}.emptyText img{height:200px}@media screen and (max-width: 475px){.body{margin:0rem}.emptyText{padding:1rem}.emptyText img{width:100%}.subTabs_section{padding:1rem .5rem}.list_tabs{white-space:nowrap;overflow:scroll;justify-content:flex-start}.payment-details{margin:0rem}}.mtb-15{margin-top:15px;margin-bottom:15px}.checkbox-label{display:flex;align-items:center;gap:15px}.checkbox-label input{height:16px;width:16px}.upload-file{display:flex;align-items:center;justify-content:space-between;padding-right:10px}.upload-file mat-icon{color:#4caf50}.upload-file p{margin-bottom:0}@media only screen and (min-width: 320px) and (max-width : 500px){.image-box span{padding:11px 2rem}.dummy-image-1{margin-bottom:0}}mat-form-field{border:1px solid 2px solid rgba(208,213,221,1);border-radius:8px}.input-container{display:flex;border-radius:7px;border:2px solid rgba(208,213,221,1);height:42px;width:100%;margin-top:5px;padding-left:10px}.input-container input:focus{outline:none}.input-text-1{border:none}.image-box-1{display:flex;cursor:pointer;border-left:1px solid rgba(208,213,221,1)}.dummy-image-1{font-size:20px;color:green}.error{font-size:12px;font-family:var(--primary-font-family);color:red;margin-top:4px}.add_sibling{background-color:var(--primary-button-color);color:#fff;font-family:var(--primary-font-family);font-weight:500;border:none;padding:10px;border-radius:8px;font-size:13px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatGridListModule }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: TextElementComponent, selector: "simpo-text-element", inputs: ["textData", "textLabel"] }, { 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: PaymentDetailsComponent, selector: "simpo-payment-details", inputs: ["admissionData", "subscriptionsData", "termPaymentList"] }, { kind: "component", type: DocumentComponent, selector: "simpo-document", inputs: ["documentList"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RegistrationFormComponent, isStandalone: true, selector: "simpo-registration-form", inputs: { data: "data", index: "index", edit: "edit", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\n  <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\n    <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\n      [simpoBorder]=\"styles?.border\">\n      <div class=\"main-section\"\n        [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\"\n        [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\n        <div class=\"body-section\">\n          <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\n            <div>\n              <simpo-text-element [textData]=\"content?.inputText?.[0]?.value\"\n                [textLabel]=\"content?.inputText?.[0]?.label\"></simpo-text-element>\n            </div>\n            <div class=\"d-flex gap-2 d-md-flex mt-15\" *ngIf=\"data?.action?.display\" [ngClass]=\"[\n              styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\n              styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\n              styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\n            ]\">\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n  </div>\n\n  <section class=\"main-section\">\n    <div *ngIf=\"formStatus != 'REGISTERED' && formStatus != 'ADMITTED'\">\n      <div class=\"subTabs_section\">\n        <div class=\"list_tabs d-flex align-items-center\">\n          <ng-container *ngFor=\"let key of Object.keys(fieldData)\">\n            <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = key\"\n              [ngClass]=\"selectedKey === key ? 'single_tab_active' : 'single_tab'\">\n              {{key | titlecase}}\n            </div>\n          </ng-container>\n          <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = 'Document'\"\n            *ngIf=\"data?.sectionType === 'admissionForm'\"\n            [ngClass]=\"selectedKey === 'Document' ? 'single_tab_active' : 'single_tab'\">\n            Document\n          </div>\n          <div class=\"single_tab cursor-pointer\" (click)=\"redirectToPayment()\"\n            *ngIf=\"data?.sectionType === 'admissionForm'\"\n            [ngClass]=\"selectedKey === 'Payment' ? 'single_tab_active' : 'single_tab'\">\n            Payment\n          </div>\n        </div>\n      </div>\n\n      <div class=\"main-content\">\n        <ng-container\n          *ngFor=\"let group of fieldData[selectedKey] ? Object.keys(fieldData[selectedKey]) : [];let groupIndex = index\">\n          <div class=\"body\" *ngIf=\"group !== 'Backup Contact'\">\n            <div class=\"list_tabs backToLeads d-flex align-items-center\">\n              {{group}}\n            </div>\n\n            <ng-container *ngIf=\"groupIndex == 0 && Object.keys(fieldData)[0] === selectedKey\">\n              <div class=\"image-box\" *ngIf=\"!payload.imgUrl\">\n                <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\n                  (click)=\"fileInput.click()\" alt=\"\">\n                <div class=\"image_box\">\n                  <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput.click()\">Click to\n                    upload</span>\n                </div>\n              </div>\n              <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\"\n                accept=\"image/x-png,image/jpeg,image/jpg\" (change)=\"updateAdmissionImage($event)\" class=\"pc-btn\"\n                id=\"browse_contact_image\" #fileInput />\n\n              <div *ngIf=\"payload.imgUrl\" class=\"addedImg\">\n                <div class=\"uploadedImg\">\n                  <img alt=\"\" [src]=\"ds.bypassSecurityTrustUrl(payload.imgUrl)\">\n                </div>\n                <div class=\"image-buttons\">\n                  <div class=\"button\" (click)=\"fileInput.click()\">\n                    <img src=\"../../../../../../../../../assets/images/blogs/change_image.svg\" alt=\"\">\n                    Change Image\n                  </div>\n                  <div class=\"button delete-change\" (click)=\"deleteImg()\">\n\n                    <div class=\"delete\">\n                      <img src=\"./../../../../../../../../../assets/images/blogs/delete_image.svg\" alt=\"\">\n                      <div>Delete</div>\n                    </div>\n\n                  </div>\n                </div>\n\n              </div>\n            </ng-container>\n\n            <!-- <div class=\"row mt-1\">\n            <ng-container *ngFor=\"let info of fieldData[selectedKey][group]\">\n              <div class=\"col-md-4 col-12 mt-1\" *ngIf=\"info.isDisplay\">\n                <label for=\"\" class=\"label-text\">{{info.displayText || info.fieldLabel}}</label>&nbsp; <span style=\"color: red;\" *ngIf=\"info.required\">*</span> <br>\n                <ng-container *ngTemplateOutlet=\"inputData; context: {data: info, group:group}\"></ng-container>\n              </div>\n            </ng-container>\n          </div> -->\n            <div class=\"row mt-1\"\n              *ngIf=\"group != 'Siblings Details' && (group.toLowerCase()).split(' ').join('_') != 'past_school_details'\">\n              <ng-container *ngFor=\"let info of fieldData[selectedKey][group]\">\n                <div\n                  [ngClass]=\"(info.type === 'FATHER_IMAGE' || info.type === 'MOTHER_IMAGE' || info.type === 'GUARDIAN_IMAGE') ? 'col-md-12 col-12' : 'col-md-4 col-12 mt-1'\"\n                  *ngIf=\"info.isDisplay\">\n                  <div class=\"d-flex\">\n                    <label for=\"\" class=\"label-text\"\n                      *ngIf=\"(info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\"\n                      [title]=\"returnDisplayText(info.displayText || info.fieldLabel)\">{{returnDisplayText(info.displayText\n                      || info.fieldLabel)}}</label>&nbsp; <span style=\"color: red;\"\n                      *ngIf=\"info.required && (info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\">*</span>\n                  </div>\n                  <ng-container *ngTemplateOutlet=\"inputData; context: {data: info, group:group}\"></ng-container>\n                </div>\n              </ng-container>\n            </div>\n            <div class=\"\" *ngIf=\"group === 'Siblings Details'\">\n              <ng-container\n                *ngFor=\"let key of objectKeys(groupOfSiblings(fieldData['Family Details']['Siblings Details']));let i = index\">\n                <div class=\"row mt-2\">\n                  <ng-container\n                    *ngFor=\"let info of groupOfSiblings(fieldData['Family Details']['Siblings Details'])[key]\">\n                    <div class=\"col-md-4 col-12 mt-1\" *ngIf=\"info.isDisplay\">\n                      <div class=\"d-flex\">\n                        <label for=\"\" class=\"label-text\"\n                          *ngIf=\"(info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\"\n                          [title]=\"returnDisplayText(info.displayText || info.fieldLabel)\">{{info.displayText\n                          || info.fieldLabel}}</label>&nbsp; <span style=\"color: red;\"\n                          *ngIf=\"info.required && (info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\">*</span>\n                      </div>\n                      <ng-container *ngTemplateOutlet=\"inputData; context: {data: info, group:group}\"></ng-container>\n                    </div>\n                  </ng-container>\n                </div>\n                <!-- <div class=\"border_bottom\" *ngIf=\"i >= 1\"></div> -->\n              </ng-container>\n              <div class=\"add_more_siblings d-flex justify-content-end\"\n                *ngIf=\"group === 'Siblings Details' && showAddSiblingsButton()\">\n                <button (click)=\"addSibling(nextSiblingNumber)\" class=\"add_sibling\"\n                  style=\"width:max-content !important\">+ Add Sibling {{ nextSiblingNumber\n                  }}</button>\n              </div>\n            </div>\n            <div class=\"\" *ngIf=\"group === 'Past school Details'\">\n              <ng-container\n                *ngFor=\"let key of objectKeys(groupOfPastSchoolDetails(fieldData['Student Details']['Past school Details']));let i = index\">\n                <div class=\"row mt-2\">\n                  <ng-container\n                    *ngFor=\"let info of groupOfPastSchoolDetails(fieldData['Student Details']['Past school Details'])[key]\">\n                    <div class=\"col-md-4 col-12 mt-1\" *ngIf=\"info.isDisplay\">\n                      <div class=\"d-flex\">\n                        <label for=\"\" class=\"label-text\"\n                          *ngIf=\"(info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\"\n                          [title]=\"returnDisplayText(info.displayText || info.fieldLabel)\">{{info.displayText\n                          || info.fieldLabel}}</label>&nbsp; <span style=\"color: red;\"\n                          *ngIf=\"info.required && (info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\">*</span>\n                      </div>\n                      <ng-container *ngTemplateOutlet=\"inputData; context: {data: info, group:group}\"></ng-container>\n                    </div>\n                  </ng-container>\n                </div>\n              </ng-container>\n              <div class=\"add_more_siblings d-flex justify-content-end mt-1\"\n                *ngIf=\"group === 'Past school Details' && showAddPastSchoolButton()\">\n                <button (click)=\"addPastSchool(nextPastSchoolNumber)\" class=\"add_sibling\"\n                style=\"width:max-content !important\">+ Add Past School {{\n                  nextPastSchoolNumber}}</button>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"body\"\n            *ngIf=\"fieldData[selectedKey].hasOwnProperty('Backup Contact') && studentLiveWith === 'single parent' && groupIndex == 0 && Object.keys(fieldData)[0] === selectedKey\">\n            <div class=\"list_tabs backToLeads d-flex align-items-center\">\n              Backup Contact (Optional)\n            </div>\n\n            <div class=\"row mt-1\">\n              <div class=\"col-md-12\">\n                <label class=\"mtb-15 checkbox-label\">\n                  <input type=\"checkbox\" name=\"\" id=\"\" [(ngModel)]=\"payload.parentAuthorization\">\n                  I authorize the school to release the child only to the parent listed above\n                </label>\n              </div>\n              <div class=\"col-md-4 col-12 mt-1\" *ngFor=\"let info of fieldData[selectedKey]['Backup Contact']\">\n                <label for=\"\" class=\"label-text\">{{info.displayText || info.fieldLabel}}</label>&nbsp; <span\n                  style=\"color: red;\" *ngIf=\"info.required\">*</span> <br>\n                <ng-container *ngTemplateOutlet=\"inputData; context: {data: info}\"></ng-container>\n              </div>\n              <div class=\"col-md-4 col-12 mt-1\">\n                <label for=\"\" class=\"label-text\">Upload Supporting Document (Optional)</label>\n                <div class=\"input-text upload-file\" (click)=\"backUpDocInput.click()\">\n                  <p>{{backupDocFile ? 'File Uploaded' : 'Upload File'}}</p>\n                  <mat-icon>cloud_upload</mat-icon>\n                </div>\n                <input id=\"vendorImage\" type=\"file\" name=\"myfile\" hidden\n                  accept=\".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/x-png,image/jpeg,image/jpg,.pdf, video/mp4,video/x-matroska,video/x-msvideo,video/quicktime\"\n                  (change)=\"uploadBackUpDocument($event)\" class=\"pc-btn\" id=\"browse_contact_image\" #backUpDocInput />\n              </div>\n            </div>\n          </div>\n\n        </ng-container>\n        <div class=\"payment-details\" *ngIf=\"selectedKey === 'Document' && data?.sectionType === 'admissionForm'\">\n          <simpo-document [documentList]=\"documentList\"></simpo-document>\n        </div>\n        <div class=\"payment-details\" *ngIf=\"selectedKey === 'Payment' && data?.sectionType === 'admissionForm'\">\n          <simpo-payment-details [admissionData]=\"payload\" [subscriptionsData]=\"subscriptionsData\"\n            [termPaymentList]=\"termPaymentList\"></simpo-payment-details>\n        </div>\n      </div>\n\n      <div class=\"button-parent\">\n        <ng-container *ngFor=\"let button of data?.action?.buttons\">\n          <button class=\"button\" (click)=\"submitForm()\" simpoButtonDirective [id]=\"data?.id+button.id\"\n            [buttonStyle]=\"button.styles\" *ngIf=\"(data?.sectionType === 'admissionForm' && selectedKey == 'Payment') ||\n            (data?.sectionType === 'registrationForm' &&\n              (Object.keys(fieldData)[Object.keys(fieldData).length - 1] == selectedKey))\"\n            [color]=\"data?.styles?.background?.accentColor\">{{button?.content?.label}}</button>\n\n          <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\n            [buttonStyle]=\"button.styles\" *ngIf=\"selectedKey != 'Payment' && data?.sectionType === 'admissionForm'\"\n            [color]=\"data?.styles?.background?.accentColor\">Continue</button>\n\n          <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\n            [buttonStyle]=\"button.styles\"\n            *ngIf=\"data?.sectionType === 'registrationForm' && (Object.keys(fieldData)[Object.keys(fieldData).length - 1] != selectedKey)\"\n            [color]=\"data?.styles?.background?.accentColor\">Continue</button>\n        </ng-container>\n      </div>\n    </div>\n\n    <div class=\"emptyText\" *ngIf=\"formStatus == 'REGISTERED' || formStatus == 'ADMITTED'\">\n      <img [src]=\"content?.image?.url\" alt=\"\" *ngIf=\"content?.image?.showImage\">\n      <div class=\"heading-large\" [innerHtml]=\"content?.inputText?.[1]?.value\"></div>\n    </div>\n  </section>\n\n  <ng-template #inputData let-field=\"data\" let-group=\"group\">\n    <div *ngIf=\"field.dataType == 'IMAGE'\">\n      <div class=\"image-box\" *ngIf=\"!field.fieldImageUrl\">\n        <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\n          (click)=\"fileInput2.click()\" alt=\"\">\n        <div class=\"d-flex align-items-center\">\n          <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput2.click()\">Click to\n            upload</span>\n        </div>\n      </div>\n      <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\" accept=\"image/x-png,image/jpeg,image/jpg\"\n        (change)=\"uploadParentGuardinaImages($event,field)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput2 />\n      <div *ngIf=\"field.fieldImageUrl\" class=\"addedImg\">\n        <div class=\"uploadedImg\">\n          <img alt=\"\" [src]=\"ds.bypassSecurityTrustUrl(field.fieldImageUrl)\">\n        </div>\n        <div class=\"image-buttons\">\n          <div class=\"button\" (click)=\"fileInput2.click()\">\n            <img src=\"../../../../../../../../../assets/images/blogs/change_image.svg\" alt=\"\">\n            Change Image\n          </div>\n          <div class=\"button delete-change\" (click)=\"deleteImg()\">\n\n            <div class=\"delete\">\n              <img src=\"./../../../../../../../../../assets/images/blogs/delete_image.svg\" alt=\"\">\n              <div>Delete</div>\n            </div>\n\n          </div>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"field.dataType === 'TEXT' && field.isDisplay\">\n      <input type=\"text\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\n      <div class=\"error\" *ngIf=\"field.fieldValue && !getFieldValidation(field)\">\n        <ng-container *ngIf=\"field.fieldLabel?.toLowerCase().includes('phone number')\">\n          Please enter a valid 10-digit Indian mobile number.\n        </ng-container>\n        <ng-container *ngIf=\"field.fieldLabel?.toLowerCase().includes('email')\">\n          Please enter a valid email address.\n        </ng-container>\n      </div>\n    </div>\n    <div *ngIf=\"field.dataType === 'NUMBER' && field.isDisplay\">\n      <input type=\"number\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\n      <div class=\"error\" *ngIf=\"field.fieldValue && !getFieldValidation(field)\">\n        <ng-container *ngIf=\"field.fieldLabel?.toLowerCase().includes('phone number')\">\n          Please enter a valid 10-digit Indian mobile number.\n        </ng-container>\n        <ng-container *ngIf=\"field.fieldLabel?.toLowerCase().includes('email')\">\n          Please enter a valid email address.\n        </ng-container>\n      </div>\n    </div>\n    <div *ngIf=\"field.dataType === 'MONEY' && field.isDisplay\">\n      <input type=\"text\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\n    </div>\n    <div *ngIf=\"field.dataType === 'DATE' && field.isDisplay\">\n      <input type=\"date\" class=\"input-text\" [(ngModel)]=\"field.fieldValue\" [placeholder]=\"'Select '+field.fieldLabel\"\n        [max]=\"getMaxDate(field)\" (input)=\"checkDob(field)\">\n    </div>\n    <div class=\"input-container\" *ngIf=\"field.dataType === 'TEXT_FILE' && field.isDisplay\">\n      <input matInput class=\"input-text-1\" [(ngModel)]=\"field.fieldValue\" style=\"width:90%\">\n      <div class=\"image-box-1 d-flex justify-content-center align-items-center\" *ngIf=\"!field.fieldImageUrl\"\n        style=\"width:10%\">\n        <mat-icon (click)=\"fileInput1.click()\"\n          class=\"dummy-image-1 w-100 d-flex justify-content-center\">cloud_upload</mat-icon>\n      </div>\n      <div class=\"image-box-1 d-flex justify-content-center align-items-center\" *ngIf=\"field.fieldImageUrl\"\n        style=\"width:10%\">\n        <!-- If the uploaded file is an image, show the preview -->\n        <img *ngIf=\"isImage(field.fieldImageUrl)\" alt=\"\" class=\"w-100 h-100\"\n          [src]=\"ds.bypassSecurityTrustUrl(field.fieldImageUrl)\" (click)=\"fileInput1.click()\" />\n\n        <!-- If the uploaded file is not an image, show a file icon -->\n        <mat-icon *ngIf=\"!isImage(field.fieldImageUrl)\"\n          class=\"w-100 d-flex justify-content-center align-items-center dummy-image-1\"\n          (click)=\"fileInput1.click()\">insert_drive_file</mat-icon>\n      </div>\n\n      <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\"\n        accept=\".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/x-png,image/jpeg,image/jpg,.pdf, video/mp4,video/x-matroska,video/x-msvideo,video/quicktime\"\n        (change)=\"updateSelectedImage($event,field)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput1 />\n    </div>\n    <div *ngIf=\"field.dataType === 'DROPDOWN' && field.isDisplay\" class=\"admission\">\n      <mat-form-field class=\"input-text-1 input_card\" appearance=\"outline\" style=\"width:100%\">\n        <mat-select class=\"inputStyle\" placeholder=\"--Select--\" [(ngModel)]=\"field.fieldValue\"\n          [multiple]=\"field.multipleSelection\">\n          <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\n            <mat-option *ngFor=\"let item of field.value\" [value]=\"item?.value\"\n              (click)=\"masterDropdownValueChange(item, field)\">{{item.label}}</mat-option>\n          </ng-container>\n          <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\n            <mat-option *ngFor=\"let item of field.sourceData[field.dataSourceType]\"\n              (click)=\"inputFieldChange(item, field)\" [value]=\"item?.name\">{{item.name}}</mat-option>\n          </ng-container>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div *ngIf=\"field.dataType === 'CHECKBOX' && field.isDisplay\">\n      <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\n        <div class=\"form-check mb-5\" *ngFor=\"let data of field.value\">\n          <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\" [(ngModel)]=\"data.checked\">\n          <label class=\"form-check-label\" for=\"flexCheckChecked\">\n            {{data.label}}\n          </label>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\n        <div class=\"form-check mb-5\" *ngFor=\"let data of field.sourceData[field.dataSourceType]\">\n          <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\" [(ngModel)]=\"data.checked\">\n          <label class=\"form-check-label\" for=\"flexCheckChecked\">\n            {{data.name}}\n          </label>\n        </div>\n      </ng-container>\n    </div>\n    <div *ngIf=\"field.dataType === 'RADIOBUTTON' && field.isDisplay\">\n      <div style=\"display: flex; gap: 20px; margin-top: 10px; height: 35px;align-items: center;\">\n        <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\n          <!-- <div class=\" mb-5\" *ngFor=\"let data of field.value\">\n            <mat-radio-button [value]=\"data.value\" [(ngModel)]=\"field.fieldValue\">{{data.label}}</mat-radio-button>\n          </div> -->\n          <mat-radio-group [(ngModel)]=\"field.fieldValue\" (change)=\"radioButtonChanged(field,selectedKey,group)\">\n            <mat-radio-button *ngFor=\"let data of field.value\" [value]=\"data.value\">\n              {{ data.label }}\n            </mat-radio-button>\n          </mat-radio-group>\n        </ng-container>\n\n        <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\n          <div class=\"form-check mb-5\" *ngFor=\"let data of field.value\">\n            <input class=\"form-check-input\" type=\"radio\" [value]=\"data.name\" [(ngModel)]=\"field.fieldValue\" />\n\n            <label class=\"form-check-label\" [for]=\"'radio_' + data.name\">\n              {{ data.name }}\n            </label>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </ng-template>\n\n\n  <ng-container *ngIf=\"styles?.devider?.display\">\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n  </ng-container>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n</section>", 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}.hover_effect{position:absolute;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:left;margin-bottom:8px}}.main-section{width:100%;overflow-y:hidden}.subTabs_section{padding:1rem 5rem;height:12vh}.active_route_section{height:89%;border:1px solid #0000000F;padding:15px 20px;background-color:#fff;border-radius:6px}.active_route_section_normal{background-color:#f6f6f6;border:none;padding:10px 4rem}.list_tabs{border:1px solid #0000001A;background-color:#ffffffe5;padding:10px;border-radius:6px;gap:10px;height:50px}.single_tab{color:#0e233c99;font-size:14px;font-weight:500;font-family:interReg;padding:10px 20px}.single_tab_active{width:max-content;height:32px;background-color:#0015800a;display:flex;align-items:center;font-weight:600;padding:10px 20px;border-radius:4px;color:#0e233c}.align-items-center{align-items:center}.header{height:8vh;padding:10px;border-bottom:2px solid rgba(0,0,0,.06);display:flex}.p-5{padding:5rem}.backToLeads{color:#000!important}.body{margin:1rem 5rem 0rem;box-shadow:#00000029 0 1px 4px;padding:2rem;border-radius:10px}.profile-img{display:flex;align-items:center;gap:2rem}.mt-2{margin-top:2rem!important}.mt-1{margin-top:1rem!important}.image-box{display:flex;gap:1rem;margin-top:3rem;cursor:pointer}.image-box span{color:#0189ea;font-size:14px;font-weight:500;padding:11px 7rem;border:2px solid rgba(0,0,0,.06);height:47px;border-radius:10px}.image_box{display:flex;align-items:center}.dummy-image{height:55px}.label-text{font-weight:400;font-family:Inter;font-size:14px;color:#434443}.input-text{border-radius:7px;border:2px solid rgba(208,213,221,1);height:42px;width:100%;margin-top:5px;padding-left:10px}.footer{display:flex;gap:1rem;align-items:center;justify-content:flex-end;height:8vh;padding:10px;border-top:2px solid rgba(0,0,0,.06);position:absolute;bottom:0;width:100%}.footer .continue{font-size:13px;font-family:interMedium;color:#242424;font-weight:500;border:none;background-color:#f6c318;padding:10px 20px;border-radius:8px;width:max-content}.footer .cancel{font-size:13px;font-family:interMedium;color:#f6c318;font-weight:500;border:1px solid #F6C318;background-color:#fff;padding:10px 20px;border-radius:8px;width:max-content}.main-content{overflow:scroll;padding-top:5px;padding-bottom:10px}.button-parent{padding:1rem 5rem 1rem 2rem;align-items:center;display:flex;justify-content:flex-end}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.payment-details{margin:1rem 5rem 0rem;box-shadow:#00000029 0 1px 4px;border-radius:10px}.mb-5{margin-bottom:5px!important}.addedImg{display:flex;gap:5%;width:95%;margin-top:2rem}.addedImg .uploadedImg img{height:65px;width:65px;border-radius:50%}.addedImg .image-buttons{display:flex;gap:3%;padding-top:20px}.addedImg .image-buttons .button{display:flex;gap:8px;width:142px;height:40px;padding:12px 8px;font-family:lexandMedium;color:#3f3b3b;font-style:normal;font-weight:500;font-size:12px!important;border:1px dashed #E4E7EC;border-radius:12px;cursor:pointer}.addedImg .image-buttons .button img{width:20px}.addedImg .image-buttons .button .delete{display:flex;gap:15%;width:60%;margin:auto}.addedImg .image-buttons .button .delete img{width:12px}.emptyText{height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:50px}.emptyText img{height:200px}@media screen and (max-width: 475px){.body{margin:0rem}.emptyText{padding:1rem}.emptyText img{width:100%}.subTabs_section{padding:1rem .5rem}.list_tabs{white-space:nowrap;overflow:scroll;justify-content:flex-start}.payment-details{margin:0rem}}.mtb-15{margin-top:15px;margin-bottom:15px}.checkbox-label{display:flex;align-items:center;gap:15px}.checkbox-label input{height:16px;width:16px}.upload-file{display:flex;align-items:center;justify-content:space-between;padding-right:10px}.upload-file mat-icon{color:#4caf50}.upload-file p{margin-bottom:0}@media only screen and (min-width: 320px) and (max-width : 500px){.image-box span{padding:11px 2rem}.dummy-image-1{margin-bottom:0}}mat-form-field{border:1px solid 2px solid rgba(208,213,221,1);border-radius:8px}.input-container{display:flex;border-radius:7px;border:2px solid rgba(208,213,221,1);height:42px;width:100%;margin-top:5px;padding-left:10px}.input-container input:focus{outline:none}.input-text-1{border:none}.image-box-1{display:flex;cursor:pointer;border-left:1px solid rgba(208,213,221,1)}.dummy-image-1{font-size:20px;color:green}.error{font-size:12px;font-family:var(--primary-font-family);color:red;margin-top:4px}.add_sibling{background-color:var(--primary-button-color);color:#fff;font-family:var(--primary-font-family);font-weight:500;border:none;padding:10px;border-radius:8px;font-size:13px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatGridListModule }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: TextElementComponent, selector: "simpo-text-element", inputs: ["textData", "textLabel"] }, { 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: PaymentDetailsComponent, selector: "simpo-payment-details", inputs: ["admissionData", "subscriptionsData", "termPaymentList"] }, { kind: "component", type: DocumentComponent, selector: "simpo-document", inputs: ["documentList"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: 
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i12.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { 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: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i7$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i7$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }] }); }
 }
@@ -17122,7 +17122,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         FormsModule,
                         MatIconModule,
                         MatRadioModule
-                    ], template: "<section simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\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\">\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=\"body-section\">\r\n          <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n            <div>\r\n              <simpo-text-element [textData]=\"content?.inputText?.[0]?.value\"\r\n                [textLabel]=\"content?.inputText?.[0]?.label\"></simpo-text-element>\r\n            </div>\r\n            <div class=\"d-flex gap-2 d-md-flex mt-15\" *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            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <section class=\"main-section\">\r\n    <div *ngIf=\"formStatus != 'REGISTERED' && formStatus != 'ADMITTED'\">\r\n      <div class=\"subTabs_section\">\r\n        <div class=\"list_tabs d-flex align-items-center\">\r\n          <ng-container *ngFor=\"let key of Object.keys(fieldData)\">\r\n            <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = key\"\r\n              [ngClass]=\"selectedKey === key ? 'single_tab_active' : 'single_tab'\">\r\n              {{key | titlecase}}\r\n            </div>\r\n          </ng-container>\r\n          <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = 'Document'\"\r\n            *ngIf=\"data?.sectionType === 'admissionForm'\"\r\n            [ngClass]=\"selectedKey === 'Document' ? 'single_tab_active' : 'single_tab'\">\r\n            Document\r\n          </div>\r\n          <div class=\"single_tab cursor-pointer\" (click)=\"redirectToPayment()\"\r\n            *ngIf=\"data?.sectionType === 'admissionForm'\"\r\n            [ngClass]=\"selectedKey === 'Payment' ? 'single_tab_active' : 'single_tab'\">\r\n            Payment\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"main-content\">\r\n        <ng-container\r\n          *ngFor=\"let group of fieldData[selectedKey] ? Object.keys(fieldData[selectedKey]) : [];let groupIndex = index\">\r\n          <div class=\"body\" *ngIf=\"group !== 'Backup Contact'\">\r\n            <div class=\"list_tabs backToLeads d-flex align-items-center\">\r\n              {{group}}\r\n            </div>\r\n\r\n            <ng-container *ngIf=\"groupIndex == 0 && Object.keys(fieldData)[0] === selectedKey\">\r\n              <div class=\"image-box\" *ngIf=\"!payload.imgUrl\">\r\n                <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\r\n                  (click)=\"fileInput.click()\" alt=\"\">\r\n                <div class=\"image_box\">\r\n                  <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput.click()\">Click to\r\n                    upload</span>\r\n                </div>\r\n              </div>\r\n              <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\"\r\n                accept=\"image/x-png,image/jpeg,image/jpg\" (change)=\"updateAdmissionImage($event)\" class=\"pc-btn\"\r\n                id=\"browse_contact_image\" #fileInput />\r\n\r\n              <div *ngIf=\"payload.imgUrl\" class=\"addedImg\">\r\n                <div class=\"uploadedImg\">\r\n                  <img alt=\"\" [src]=\"ds.bypassSecurityTrustUrl(payload.imgUrl)\">\r\n                </div>\r\n                <div class=\"image-buttons\">\r\n                  <div class=\"button\" (click)=\"fileInput.click()\">\r\n                    <img src=\"../../../../../../../../../assets/images/blogs/change_image.svg\" alt=\"\">\r\n                    Change Image\r\n                  </div>\r\n                  <div class=\"button delete-change\" (click)=\"deleteImg()\">\r\n\r\n                    <div class=\"delete\">\r\n                      <img src=\"./../../../../../../../../../assets/images/blogs/delete_image.svg\" alt=\"\">\r\n                      <div>Delete</div>\r\n                    </div>\r\n\r\n                  </div>\r\n                </div>\r\n\r\n              </div>\r\n            </ng-container>\r\n\r\n            <!-- <div class=\"row mt-1\">\r\n            <ng-container *ngFor=\"let info of fieldData[selectedKey][group]\">\r\n              <div class=\"col-md-4 col-12 mt-1\" *ngIf=\"info.isDisplay\">\r\n                <label for=\"\" class=\"label-text\">{{info.displayText || info.fieldLabel}}</label>&nbsp; <span style=\"color: red;\" *ngIf=\"info.required\">*</span> <br>\r\n                <ng-container *ngTemplateOutlet=\"inputData; context: {data: info, group:group}\"></ng-container>\r\n              </div>\r\n            </ng-container>\r\n          </div> -->\r\n            <div class=\"row mt-1\"\r\n              *ngIf=\"group != 'Siblings Details' && (group.toLowerCase()).split(' ').join('_') != 'past_school_details'\">\r\n              <ng-container *ngFor=\"let info of fieldData[selectedKey][group]\">\r\n                <div\r\n                  [ngClass]=\"(info.type === 'FATHER_IMAGE' || info.type === 'MOTHER_IMAGE' || info.type === 'GUARDIAN_IMAGE') ? 'col-md-12 col-12' : 'col-md-4 col-12 mt-1'\"\r\n                  *ngIf=\"info.isDisplay\">\r\n                  <div class=\"d-flex\">\r\n                    <label for=\"\" class=\"label-text\"\r\n                      *ngIf=\"(info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\"\r\n                      [title]=\"returnDisplayText(info.displayText || info.fieldLabel)\">{{returnDisplayText(info.displayText\r\n                      || info.fieldLabel)}}</label>&nbsp; <span style=\"color: red;\"\r\n                      *ngIf=\"info.required && (info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\">*</span>\r\n                  </div>\r\n                  <ng-container *ngTemplateOutlet=\"inputData; context: {data: info, group:group}\"></ng-container>\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n            <div class=\"\" *ngIf=\"group === 'Siblings Details'\">\r\n              <ng-container\r\n                *ngFor=\"let key of objectKeys(groupOfSiblings(fieldData['Family Details']['Siblings Details']));let i = index\">\r\n                <div class=\"row mt-2\">\r\n                  <ng-container\r\n                    *ngFor=\"let info of groupOfSiblings(fieldData['Family Details']['Siblings Details'])[key]\">\r\n                    <div class=\"col-md-4 col-12 mt-1\" *ngIf=\"info.isDisplay\">\r\n                      <div class=\"d-flex\">\r\n                        <label for=\"\" class=\"label-text\"\r\n                          *ngIf=\"(info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\"\r\n                          [title]=\"returnDisplayText(info.displayText || info.fieldLabel)\">{{info.displayText\r\n                          || info.fieldLabel}}</label>&nbsp; <span style=\"color: red;\"\r\n                          *ngIf=\"info.required && (info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\">*</span>\r\n                      </div>\r\n                      <ng-container *ngTemplateOutlet=\"inputData; context: {data: info, group:group}\"></ng-container>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n                <!-- <div class=\"border_bottom\" *ngIf=\"i >= 1\"></div> -->\r\n              </ng-container>\r\n              <div class=\"add_more_siblings d-flex justify-content-end\"\r\n                *ngIf=\"group === 'Siblings Details' && showAddSiblingsButton()\">\r\n                <button (click)=\"addSibling(nextSiblingNumber)\" class=\"add_sibling\"\r\n                  style=\"width:max-content !important\">+ Add Sibling {{ nextSiblingNumber\r\n                  }}</button>\r\n              </div>\r\n            </div>\r\n            <div class=\"\" *ngIf=\"group === 'Past school Details'\">\r\n              <ng-container\r\n                *ngFor=\"let key of objectKeys(groupOfPastSchoolDetails(fieldData['Student Details']['Past school Details']));let i = index\">\r\n                <div class=\"row mt-2\">\r\n                  <ng-container\r\n                    *ngFor=\"let info of groupOfPastSchoolDetails(fieldData['Student Details']['Past school Details'])[key]\">\r\n                    <div class=\"col-md-4 col-12 mt-1\" *ngIf=\"info.isDisplay\">\r\n                      <div class=\"d-flex\">\r\n                        <label for=\"\" class=\"label-text\"\r\n                          *ngIf=\"(info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\"\r\n                          [title]=\"returnDisplayText(info.displayText || info.fieldLabel)\">{{info.displayText\r\n                          || info.fieldLabel}}</label>&nbsp; <span style=\"color: red;\"\r\n                          *ngIf=\"info.required && (info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\">*</span>\r\n                      </div>\r\n                      <ng-container *ngTemplateOutlet=\"inputData; context: {data: info, group:group}\"></ng-container>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </ng-container>\r\n              <div class=\"add_more_siblings d-flex justify-content-end mt-1\"\r\n                *ngIf=\"group === 'Past school Details' && showAddPastSchoolButton()\">\r\n                <button (click)=\"addPastSchool(nextPastSchoolNumber)\" class=\"add_sibling\"\r\n                style=\"width:max-content !important\">+ Add Past School {{\r\n                  nextPastSchoolNumber}}</button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"body\"\r\n            *ngIf=\"fieldData[selectedKey].hasOwnProperty('Backup Contact') && studentLiveWith === 'single parent' && groupIndex == 0 && Object.keys(fieldData)[0] === selectedKey\">\r\n            <div class=\"list_tabs backToLeads d-flex align-items-center\">\r\n              Backup Contact (Optional)\r\n            </div>\r\n\r\n            <div class=\"row mt-1\">\r\n              <div class=\"col-md-12\">\r\n                <label class=\"mtb-15 checkbox-label\">\r\n                  <input type=\"checkbox\" name=\"\" id=\"\" [(ngModel)]=\"payload.parentAuthorization\">\r\n                  I authorize the school to release the child only to the parent listed above\r\n                </label>\r\n              </div>\r\n              <div class=\"col-md-4 col-12 mt-1\" *ngFor=\"let info of fieldData[selectedKey]['Backup Contact']\">\r\n                <label for=\"\" class=\"label-text\">{{info.displayText || info.fieldLabel}}</label>&nbsp; <span\r\n                  style=\"color: red;\" *ngIf=\"info.required\">*</span> <br>\r\n                <ng-container *ngTemplateOutlet=\"inputData; context: {data: info}\"></ng-container>\r\n              </div>\r\n              <div class=\"col-md-4 col-12 mt-1\">\r\n                <label for=\"\" class=\"label-text\">Upload Supporting Document (Optional)</label>\r\n                <div class=\"input-text upload-file\" (click)=\"backUpDocInput.click()\">\r\n                  <p>{{backupDocFile ? 'File Uploaded' : 'Upload File'}}</p>\r\n                  <mat-icon>cloud_upload</mat-icon>\r\n                </div>\r\n                <input id=\"vendorImage\" type=\"file\" name=\"myfile\" hidden\r\n                  accept=\".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/x-png,image/jpeg,image/jpg,.pdf, video/mp4,video/x-matroska,video/x-msvideo,video/quicktime\"\r\n                  (change)=\"uploadBackUpDocument($event)\" class=\"pc-btn\" id=\"browse_contact_image\" #backUpDocInput />\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n        </ng-container>\r\n        <div class=\"payment-details\" *ngIf=\"selectedKey === 'Document' && data?.sectionType === 'admissionForm'\">\r\n          <simpo-document [documentList]=\"documentList\"></simpo-document>\r\n        </div>\r\n        <div class=\"payment-details\" *ngIf=\"selectedKey === 'Payment' && data?.sectionType === 'admissionForm'\">\r\n          <simpo-payment-details [admissionData]=\"payload\" [subscriptionsData]=\"subscriptionsData\"\r\n            [termPaymentList]=\"termPaymentList\"></simpo-payment-details>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"button-parent\">\r\n        <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n          <button class=\"button\" (click)=\"submitForm()\" simpoButtonDirective [id]=\"data?.id+button.id\"\r\n            [buttonStyle]=\"button.styles\" *ngIf=\"(data?.sectionType === 'admissionForm' && selectedKey == 'Payment') ||\r\n            (data?.sectionType === 'registrationForm' &&\r\n              (Object.keys(fieldData)[Object.keys(fieldData).length - 1] == selectedKey))\"\r\n            [color]=\"data?.styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n\r\n          <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\r\n            [buttonStyle]=\"button.styles\" *ngIf=\"selectedKey != 'Payment' && data?.sectionType === 'admissionForm'\"\r\n            [color]=\"data?.styles?.background?.accentColor\">Continue</button>\r\n\r\n          <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\r\n            [buttonStyle]=\"button.styles\"\r\n            *ngIf=\"data?.sectionType === 'registrationForm' && (Object.keys(fieldData)[Object.keys(fieldData).length - 1] != selectedKey)\"\r\n            [color]=\"data?.styles?.background?.accentColor\">Continue</button>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"emptyText\" *ngIf=\"formStatus == 'REGISTERED' || formStatus == 'ADMITTED'\">\r\n      <img [src]=\"content?.image?.url\" alt=\"\" *ngIf=\"content?.image?.showImage\">\r\n      <div class=\"heading-large\" [innerHtml]=\"content?.inputText?.[1]?.value\"></div>\r\n    </div>\r\n  </section>\r\n\r\n  <ng-template #inputData let-field=\"data\" let-group=\"group\">\r\n    <div *ngIf=\"field.dataType == 'IMAGE'\">\r\n      <div class=\"image-box\" *ngIf=\"!field.fieldImageUrl\">\r\n        <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\r\n          (click)=\"fileInput2.click()\" alt=\"\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput2.click()\">Click to\r\n            upload</span>\r\n        </div>\r\n      </div>\r\n      <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\" accept=\"image/x-png,image/jpeg,image/jpg\"\r\n        (change)=\"uploadParentGuardinaImages($event,field)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput2 />\r\n      <div *ngIf=\"field.fieldImageUrl\" class=\"addedImg\">\r\n        <div class=\"uploadedImg\">\r\n          <img alt=\"\" [src]=\"ds.bypassSecurityTrustUrl(field.fieldImageUrl)\">\r\n        </div>\r\n        <div class=\"image-buttons\">\r\n          <div class=\"button\" (click)=\"fileInput2.click()\">\r\n            <img src=\"../../../../../../../../../assets/images/blogs/change_image.svg\" alt=\"\">\r\n            Change Image\r\n          </div>\r\n          <div class=\"button delete-change\" (click)=\"deleteImg()\">\r\n\r\n            <div class=\"delete\">\r\n              <img src=\"./../../../../../../../../../assets/images/blogs/delete_image.svg\" alt=\"\">\r\n              <div>Delete</div>\r\n            </div>\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'TEXT' && field.isDisplay\">\r\n      <input type=\"text\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\r\n      <div class=\"error\" *ngIf=\"field.fieldValue && !getFieldValidation(field)\">\r\n        <ng-container *ngIf=\"field.fieldLabel?.toLowerCase().includes('phone number')\">\r\n          Please enter a valid 10-digit Indian mobile number.\r\n        </ng-container>\r\n        <ng-container *ngIf=\"field.fieldLabel?.toLowerCase().includes('email')\">\r\n          Please enter a valid email address.\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'NUMBER' && field.isDisplay\">\r\n      <input type=\"number\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\r\n      <div class=\"error\" *ngIf=\"field.fieldValue && !getFieldValidation(field)\">\r\n        <ng-container *ngIf=\"field.fieldLabel?.toLowerCase().includes('phone number')\">\r\n          Please enter a valid 10-digit Indian mobile number.\r\n        </ng-container>\r\n        <ng-container *ngIf=\"field.fieldLabel?.toLowerCase().includes('email')\">\r\n          Please enter a valid email address.\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'MONEY' && field.isDisplay\">\r\n      <input type=\"text\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'DATE' && field.isDisplay\">\r\n      <input type=\"date\" class=\"input-text\" [(ngModel)]=\"field.fieldValue\" [placeholder]=\"'Select '+field.fieldLabel\"\r\n        [max]=\"getMaxDate(field)\" (input)=\"checkDob(field)\">\r\n    </div>\r\n    <div class=\"input-container\" *ngIf=\"field.dataType === 'TEXT_FILE' && field.isDisplay\">\r\n      <input matInput class=\"input-text-1\" [(ngModel)]=\"field.fieldValue\" style=\"width:90%\">\r\n      <div class=\"image-box-1 d-flex justify-content-center align-items-center\" *ngIf=\"!field.fieldImageUrl\"\r\n        style=\"width:10%\">\r\n        <mat-icon (click)=\"fileInput1.click()\"\r\n          class=\"dummy-image-1 w-100 d-flex justify-content-center\">cloud_upload</mat-icon>\r\n      </div>\r\n      <div class=\"image-box-1 d-flex justify-content-center align-items-center\" *ngIf=\"field.fieldImageUrl\"\r\n        style=\"width:10%\">\r\n        <!-- If the uploaded file is an image, show the preview -->\r\n        <img *ngIf=\"isImage(field.fieldImageUrl)\" alt=\"\" class=\"w-100 h-100\"\r\n          [src]=\"ds.bypassSecurityTrustUrl(field.fieldImageUrl)\" (click)=\"fileInput1.click()\" />\r\n\r\n        <!-- If the uploaded file is not an image, show a file icon -->\r\n        <mat-icon *ngIf=\"!isImage(field.fieldImageUrl)\"\r\n          class=\"w-100 d-flex justify-content-center align-items-center dummy-image-1\"\r\n          (click)=\"fileInput1.click()\">insert_drive_file</mat-icon>\r\n      </div>\r\n\r\n      <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\"\r\n        accept=\".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/x-png,image/jpeg,image/jpg,.pdf, video/mp4,video/x-matroska,video/x-msvideo,video/quicktime\"\r\n        (change)=\"updateSelectedImage($event,field)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput1 />\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'DROPDOWN' && field.isDisplay\" class=\"admission\">\r\n      <mat-form-field class=\"input-text-1 input_card\" appearance=\"outline\" style=\"width:100%\">\r\n        <mat-select class=\"inputStyle\" placeholder=\"--Select--\" [(ngModel)]=\"field.fieldValue\"\r\n          [multiple]=\"field.multipleSelection\">\r\n          <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\r\n            <mat-option *ngFor=\"let item of field.value\" [value]=\"item?.value\"\r\n              (click)=\"masterDropdownValueChange(item, field)\">{{item.label}}</mat-option>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\r\n            <mat-option *ngFor=\"let item of field.sourceData[field.dataSourceType]\"\r\n              (click)=\"inputFieldChange(item, field)\" [value]=\"item?.name\">{{item.name}}</mat-option>\r\n          </ng-container>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'CHECKBOX' && field.isDisplay\">\r\n      <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\r\n        <div class=\"form-check mb-5\" *ngFor=\"let data of field.value\">\r\n          <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\" [(ngModel)]=\"data.checked\">\r\n          <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n            {{data.label}}\r\n          </label>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\r\n        <div class=\"form-check mb-5\" *ngFor=\"let data of field.sourceData[field.dataSourceType]\">\r\n          <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\" [(ngModel)]=\"data.checked\">\r\n          <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n            {{data.name}}\r\n          </label>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'RADIOBUTTON' && field.isDisplay\">\r\n      <div style=\"display: flex; gap: 20px; margin-top: 10px; height: 35px;align-items: center;\">\r\n        <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\r\n          <!-- <div class=\" mb-5\" *ngFor=\"let data of field.value\">\r\n            <mat-radio-button [value]=\"data.value\" [(ngModel)]=\"field.fieldValue\">{{data.label}}</mat-radio-button>\r\n          </div> -->\r\n          <mat-radio-group [(ngModel)]=\"field.fieldValue\" (change)=\"radioButtonChanged(field,selectedKey,group)\">\r\n            <mat-radio-button *ngFor=\"let data of field.value\" [value]=\"data.value\">\r\n              {{ data.label }}\r\n            </mat-radio-button>\r\n          </mat-radio-group>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\r\n          <div class=\"form-check mb-5\" *ngFor=\"let data of field.value\">\r\n            <input class=\"form-check-input\" type=\"radio\" [value]=\"data.name\" [(ngModel)]=\"field.fieldValue\" />\r\n\r\n            <label class=\"form-check-label\" [for]=\"'radio_' + data.name\">\r\n              {{ data.name }}\r\n            </label>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n\r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n</section>", 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}.hover_effect{position:absolute;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:left;margin-bottom:8px}}.main-section{width:100%;overflow-y:hidden}.subTabs_section{padding:1rem 5rem;height:12vh}.active_route_section{height:89%;border:1px solid #0000000F;padding:15px 20px;background-color:#fff;border-radius:6px}.active_route_section_normal{background-color:#f6f6f6;border:none;padding:10px 4rem}.list_tabs{border:1px solid #0000001A;background-color:#ffffffe5;padding:10px;border-radius:6px;gap:10px;height:50px}.single_tab{color:#0e233c99;font-size:14px;font-weight:500;font-family:interReg;padding:10px 20px}.single_tab_active{width:max-content;height:32px;background-color:#0015800a;display:flex;align-items:center;font-weight:600;padding:10px 20px;border-radius:4px;color:#0e233c}.align-items-center{align-items:center}.header{height:8vh;padding:10px;border-bottom:2px solid rgba(0,0,0,.06);display:flex}.p-5{padding:5rem}.backToLeads{color:#000!important}.body{margin:1rem 5rem 0rem;box-shadow:#00000029 0 1px 4px;padding:2rem;border-radius:10px}.profile-img{display:flex;align-items:center;gap:2rem}.mt-2{margin-top:2rem!important}.mt-1{margin-top:1rem!important}.image-box{display:flex;gap:1rem;margin-top:3rem;cursor:pointer}.image-box span{color:#0189ea;font-size:14px;font-weight:500;padding:11px 7rem;border:2px solid rgba(0,0,0,.06);height:47px;border-radius:10px}.image_box{display:flex;align-items:center}.dummy-image{height:55px}.label-text{font-weight:400;font-family:Inter;font-size:14px;color:#434443}.input-text{border-radius:7px;border:2px solid rgba(208,213,221,1);height:42px;width:100%;margin-top:5px;padding-left:10px}.footer{display:flex;gap:1rem;align-items:center;justify-content:flex-end;height:8vh;padding:10px;border-top:2px solid rgba(0,0,0,.06);position:absolute;bottom:0;width:100%}.footer .continue{font-size:13px;font-family:interMedium;color:#242424;font-weight:500;border:none;background-color:#f6c318;padding:10px 20px;border-radius:8px;width:max-content}.footer .cancel{font-size:13px;font-family:interMedium;color:#f6c318;font-weight:500;border:1px solid #F6C318;background-color:#fff;padding:10px 20px;border-radius:8px;width:max-content}.main-content{overflow:scroll;padding-top:5px;padding-bottom:10px}.button-parent{padding:1rem 5rem 1rem 2rem;align-items:center;display:flex;justify-content:flex-end}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.payment-details{margin:1rem 5rem 0rem;box-shadow:#00000029 0 1px 4px;border-radius:10px}.mb-5{margin-bottom:5px!important}.addedImg{display:flex;gap:5%;width:95%;margin-top:2rem}.addedImg .uploadedImg img{height:65px;width:65px;border-radius:50%}.addedImg .image-buttons{display:flex;gap:3%;padding-top:20px}.addedImg .image-buttons .button{display:flex;gap:8px;width:142px;height:40px;padding:12px 8px;font-family:lexandMedium;color:#3f3b3b;font-style:normal;font-weight:500;font-size:12px!important;border:1px dashed #E4E7EC;border-radius:12px;cursor:pointer}.addedImg .image-buttons .button img{width:20px}.addedImg .image-buttons .button .delete{display:flex;gap:15%;width:60%;margin:auto}.addedImg .image-buttons .button .delete img{width:12px}.emptyText{height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:50px}.emptyText img{height:200px}@media screen and (max-width: 475px){.body{margin:0rem}.emptyText{padding:1rem}.emptyText img{width:100%}.subTabs_section{padding:1rem .5rem}.list_tabs{white-space:nowrap;overflow:scroll;justify-content:flex-start}.payment-details{margin:0rem}}.mtb-15{margin-top:15px;margin-bottom:15px}.checkbox-label{display:flex;align-items:center;gap:15px}.checkbox-label input{height:16px;width:16px}.upload-file{display:flex;align-items:center;justify-content:space-between;padding-right:10px}.upload-file mat-icon{color:#4caf50}.upload-file p{margin-bottom:0}@media only screen and (min-width: 320px) and (max-width : 500px){.image-box span{padding:11px 2rem}.dummy-image-1{margin-bottom:0}}mat-form-field{border:1px solid 2px solid rgba(208,213,221,1);border-radius:8px}.input-container{display:flex;border-radius:7px;border:2px solid rgba(208,213,221,1);height:42px;width:100%;margin-top:5px;padding-left:10px}.input-container input:focus{outline:none}.input-text-1{border:none}.image-box-1{display:flex;cursor:pointer;border-left:1px solid rgba(208,213,221,1)}.dummy-image-1{font-size:20px;color:green}.error{font-size:12px;font-family:var(--primary-font-family);color:red;margin-top:4px}.add_sibling{background-color:var(--primary-button-color);color:#fff;font-family:var(--primary-font-family);font-weight:500;border:none;padding:10px;border-radius:8px;font-size:13px}\n"] }]
+                    ], template: "<section simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\n  <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\n    <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\n      [simpoBorder]=\"styles?.border\">\n      <div class=\"main-section\"\n        [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\"\n        [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\n        <div class=\"body-section\">\n          <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\n            <div>\n              <simpo-text-element [textData]=\"content?.inputText?.[0]?.value\"\n                [textLabel]=\"content?.inputText?.[0]?.label\"></simpo-text-element>\n            </div>\n            <div class=\"d-flex gap-2 d-md-flex mt-15\" *ngIf=\"data?.action?.display\" [ngClass]=\"[\n              styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\n              styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\n              styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\n            ]\">\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n  </div>\n\n  <section class=\"main-section\">\n    <div *ngIf=\"formStatus != 'REGISTERED' && formStatus != 'ADMITTED'\">\n      <div class=\"subTabs_section\">\n        <div class=\"list_tabs d-flex align-items-center\">\n          <ng-container *ngFor=\"let key of Object.keys(fieldData)\">\n            <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = key\"\n              [ngClass]=\"selectedKey === key ? 'single_tab_active' : 'single_tab'\">\n              {{key | titlecase}}\n            </div>\n          </ng-container>\n          <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = 'Document'\"\n            *ngIf=\"data?.sectionType === 'admissionForm'\"\n            [ngClass]=\"selectedKey === 'Document' ? 'single_tab_active' : 'single_tab'\">\n            Document\n          </div>\n          <div class=\"single_tab cursor-pointer\" (click)=\"redirectToPayment()\"\n            *ngIf=\"data?.sectionType === 'admissionForm'\"\n            [ngClass]=\"selectedKey === 'Payment' ? 'single_tab_active' : 'single_tab'\">\n            Payment\n          </div>\n        </div>\n      </div>\n\n      <div class=\"main-content\">\n        <ng-container\n          *ngFor=\"let group of fieldData[selectedKey] ? Object.keys(fieldData[selectedKey]) : [];let groupIndex = index\">\n          <div class=\"body\" *ngIf=\"group !== 'Backup Contact'\">\n            <div class=\"list_tabs backToLeads d-flex align-items-center\">\n              {{group}}\n            </div>\n\n            <ng-container *ngIf=\"groupIndex == 0 && Object.keys(fieldData)[0] === selectedKey\">\n              <div class=\"image-box\" *ngIf=\"!payload.imgUrl\">\n                <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\n                  (click)=\"fileInput.click()\" alt=\"\">\n                <div class=\"image_box\">\n                  <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput.click()\">Click to\n                    upload</span>\n                </div>\n              </div>\n              <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\"\n                accept=\"image/x-png,image/jpeg,image/jpg\" (change)=\"updateAdmissionImage($event)\" class=\"pc-btn\"\n                id=\"browse_contact_image\" #fileInput />\n\n              <div *ngIf=\"payload.imgUrl\" class=\"addedImg\">\n                <div class=\"uploadedImg\">\n                  <img alt=\"\" [src]=\"ds.bypassSecurityTrustUrl(payload.imgUrl)\">\n                </div>\n                <div class=\"image-buttons\">\n                  <div class=\"button\" (click)=\"fileInput.click()\">\n                    <img src=\"../../../../../../../../../assets/images/blogs/change_image.svg\" alt=\"\">\n                    Change Image\n                  </div>\n                  <div class=\"button delete-change\" (click)=\"deleteImg()\">\n\n                    <div class=\"delete\">\n                      <img src=\"./../../../../../../../../../assets/images/blogs/delete_image.svg\" alt=\"\">\n                      <div>Delete</div>\n                    </div>\n\n                  </div>\n                </div>\n\n              </div>\n            </ng-container>\n\n            <!-- <div class=\"row mt-1\">\n            <ng-container *ngFor=\"let info of fieldData[selectedKey][group]\">\n              <div class=\"col-md-4 col-12 mt-1\" *ngIf=\"info.isDisplay\">\n                <label for=\"\" class=\"label-text\">{{info.displayText || info.fieldLabel}}</label>&nbsp; <span style=\"color: red;\" *ngIf=\"info.required\">*</span> <br>\n                <ng-container *ngTemplateOutlet=\"inputData; context: {data: info, group:group}\"></ng-container>\n              </div>\n            </ng-container>\n          </div> -->\n            <div class=\"row mt-1\"\n              *ngIf=\"group != 'Siblings Details' && (group.toLowerCase()).split(' ').join('_') != 'past_school_details'\">\n              <ng-container *ngFor=\"let info of fieldData[selectedKey][group]\">\n                <div\n                  [ngClass]=\"(info.type === 'FATHER_IMAGE' || info.type === 'MOTHER_IMAGE' || info.type === 'GUARDIAN_IMAGE') ? 'col-md-12 col-12' : 'col-md-4 col-12 mt-1'\"\n                  *ngIf=\"info.isDisplay\">\n                  <div class=\"d-flex\">\n                    <label for=\"\" class=\"label-text\"\n                      *ngIf=\"(info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\"\n                      [title]=\"returnDisplayText(info.displayText || info.fieldLabel)\">{{returnDisplayText(info.displayText\n                      || info.fieldLabel)}}</label>&nbsp; <span style=\"color: red;\"\n                      *ngIf=\"info.required && (info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\">*</span>\n                  </div>\n                  <ng-container *ngTemplateOutlet=\"inputData; context: {data: info, group:group}\"></ng-container>\n                </div>\n              </ng-container>\n            </div>\n            <div class=\"\" *ngIf=\"group === 'Siblings Details'\">\n              <ng-container\n                *ngFor=\"let key of objectKeys(groupOfSiblings(fieldData['Family Details']['Siblings Details']));let i = index\">\n                <div class=\"row mt-2\">\n                  <ng-container\n                    *ngFor=\"let info of groupOfSiblings(fieldData['Family Details']['Siblings Details'])[key]\">\n                    <div class=\"col-md-4 col-12 mt-1\" *ngIf=\"info.isDisplay\">\n                      <div class=\"d-flex\">\n                        <label for=\"\" class=\"label-text\"\n                          *ngIf=\"(info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\"\n                          [title]=\"returnDisplayText(info.displayText || info.fieldLabel)\">{{info.displayText\n                          || info.fieldLabel}}</label>&nbsp; <span style=\"color: red;\"\n                          *ngIf=\"info.required && (info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\">*</span>\n                      </div>\n                      <ng-container *ngTemplateOutlet=\"inputData; context: {data: info, group:group}\"></ng-container>\n                    </div>\n                  </ng-container>\n                </div>\n                <!-- <div class=\"border_bottom\" *ngIf=\"i >= 1\"></div> -->\n              </ng-container>\n              <div class=\"add_more_siblings d-flex justify-content-end\"\n                *ngIf=\"group === 'Siblings Details' && showAddSiblingsButton()\">\n                <button (click)=\"addSibling(nextSiblingNumber)\" class=\"add_sibling\"\n                  style=\"width:max-content !important\">+ Add Sibling {{ nextSiblingNumber\n                  }}</button>\n              </div>\n            </div>\n            <div class=\"\" *ngIf=\"group === 'Past school Details'\">\n              <ng-container\n                *ngFor=\"let key of objectKeys(groupOfPastSchoolDetails(fieldData['Student Details']['Past school Details']));let i = index\">\n                <div class=\"row mt-2\">\n                  <ng-container\n                    *ngFor=\"let info of groupOfPastSchoolDetails(fieldData['Student Details']['Past school Details'])[key]\">\n                    <div class=\"col-md-4 col-12 mt-1\" *ngIf=\"info.isDisplay\">\n                      <div class=\"d-flex\">\n                        <label for=\"\" class=\"label-text\"\n                          *ngIf=\"(info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\"\n                          [title]=\"returnDisplayText(info.displayText || info.fieldLabel)\">{{info.displayText\n                          || info.fieldLabel}}</label>&nbsp; <span style=\"color: red;\"\n                          *ngIf=\"info.required && (info.type != 'FATHER_IMAGE' && info.type != 'MOTHER_IMAGE' && info.type != 'GUARDIAN_IMAGE')\">*</span>\n                      </div>\n                      <ng-container *ngTemplateOutlet=\"inputData; context: {data: info, group:group}\"></ng-container>\n                    </div>\n                  </ng-container>\n                </div>\n              </ng-container>\n              <div class=\"add_more_siblings d-flex justify-content-end mt-1\"\n                *ngIf=\"group === 'Past school Details' && showAddPastSchoolButton()\">\n                <button (click)=\"addPastSchool(nextPastSchoolNumber)\" class=\"add_sibling\"\n                style=\"width:max-content !important\">+ Add Past School {{\n                  nextPastSchoolNumber}}</button>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"body\"\n            *ngIf=\"fieldData[selectedKey].hasOwnProperty('Backup Contact') && studentLiveWith === 'single parent' && groupIndex == 0 && Object.keys(fieldData)[0] === selectedKey\">\n            <div class=\"list_tabs backToLeads d-flex align-items-center\">\n              Backup Contact (Optional)\n            </div>\n\n            <div class=\"row mt-1\">\n              <div class=\"col-md-12\">\n                <label class=\"mtb-15 checkbox-label\">\n                  <input type=\"checkbox\" name=\"\" id=\"\" [(ngModel)]=\"payload.parentAuthorization\">\n                  I authorize the school to release the child only to the parent listed above\n                </label>\n              </div>\n              <div class=\"col-md-4 col-12 mt-1\" *ngFor=\"let info of fieldData[selectedKey]['Backup Contact']\">\n                <label for=\"\" class=\"label-text\">{{info.displayText || info.fieldLabel}}</label>&nbsp; <span\n                  style=\"color: red;\" *ngIf=\"info.required\">*</span> <br>\n                <ng-container *ngTemplateOutlet=\"inputData; context: {data: info}\"></ng-container>\n              </div>\n              <div class=\"col-md-4 col-12 mt-1\">\n                <label for=\"\" class=\"label-text\">Upload Supporting Document (Optional)</label>\n                <div class=\"input-text upload-file\" (click)=\"backUpDocInput.click()\">\n                  <p>{{backupDocFile ? 'File Uploaded' : 'Upload File'}}</p>\n                  <mat-icon>cloud_upload</mat-icon>\n                </div>\n                <input id=\"vendorImage\" type=\"file\" name=\"myfile\" hidden\n                  accept=\".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/x-png,image/jpeg,image/jpg,.pdf, video/mp4,video/x-matroska,video/x-msvideo,video/quicktime\"\n                  (change)=\"uploadBackUpDocument($event)\" class=\"pc-btn\" id=\"browse_contact_image\" #backUpDocInput />\n              </div>\n            </div>\n          </div>\n\n        </ng-container>\n        <div class=\"payment-details\" *ngIf=\"selectedKey === 'Document' && data?.sectionType === 'admissionForm'\">\n          <simpo-document [documentList]=\"documentList\"></simpo-document>\n        </div>\n        <div class=\"payment-details\" *ngIf=\"selectedKey === 'Payment' && data?.sectionType === 'admissionForm'\">\n          <simpo-payment-details [admissionData]=\"payload\" [subscriptionsData]=\"subscriptionsData\"\n            [termPaymentList]=\"termPaymentList\"></simpo-payment-details>\n        </div>\n      </div>\n\n      <div class=\"button-parent\">\n        <ng-container *ngFor=\"let button of data?.action?.buttons\">\n          <button class=\"button\" (click)=\"submitForm()\" simpoButtonDirective [id]=\"data?.id+button.id\"\n            [buttonStyle]=\"button.styles\" *ngIf=\"(data?.sectionType === 'admissionForm' && selectedKey == 'Payment') ||\n            (data?.sectionType === 'registrationForm' &&\n              (Object.keys(fieldData)[Object.keys(fieldData).length - 1] == selectedKey))\"\n            [color]=\"data?.styles?.background?.accentColor\">{{button?.content?.label}}</button>\n\n          <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\n            [buttonStyle]=\"button.styles\" *ngIf=\"selectedKey != 'Payment' && data?.sectionType === 'admissionForm'\"\n            [color]=\"data?.styles?.background?.accentColor\">Continue</button>\n\n          <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\n            [buttonStyle]=\"button.styles\"\n            *ngIf=\"data?.sectionType === 'registrationForm' && (Object.keys(fieldData)[Object.keys(fieldData).length - 1] != selectedKey)\"\n            [color]=\"data?.styles?.background?.accentColor\">Continue</button>\n        </ng-container>\n      </div>\n    </div>\n\n    <div class=\"emptyText\" *ngIf=\"formStatus == 'REGISTERED' || formStatus == 'ADMITTED'\">\n      <img [src]=\"content?.image?.url\" alt=\"\" *ngIf=\"content?.image?.showImage\">\n      <div class=\"heading-large\" [innerHtml]=\"content?.inputText?.[1]?.value\"></div>\n    </div>\n  </section>\n\n  <ng-template #inputData let-field=\"data\" let-group=\"group\">\n    <div *ngIf=\"field.dataType == 'IMAGE'\">\n      <div class=\"image-box\" *ngIf=\"!field.fieldImageUrl\">\n        <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\n          (click)=\"fileInput2.click()\" alt=\"\">\n        <div class=\"d-flex align-items-center\">\n          <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput2.click()\">Click to\n            upload</span>\n        </div>\n      </div>\n      <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\" accept=\"image/x-png,image/jpeg,image/jpg\"\n        (change)=\"uploadParentGuardinaImages($event,field)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput2 />\n      <div *ngIf=\"field.fieldImageUrl\" class=\"addedImg\">\n        <div class=\"uploadedImg\">\n          <img alt=\"\" [src]=\"ds.bypassSecurityTrustUrl(field.fieldImageUrl)\">\n        </div>\n        <div class=\"image-buttons\">\n          <div class=\"button\" (click)=\"fileInput2.click()\">\n            <img src=\"../../../../../../../../../assets/images/blogs/change_image.svg\" alt=\"\">\n            Change Image\n          </div>\n          <div class=\"button delete-change\" (click)=\"deleteImg()\">\n\n            <div class=\"delete\">\n              <img src=\"./../../../../../../../../../assets/images/blogs/delete_image.svg\" alt=\"\">\n              <div>Delete</div>\n            </div>\n\n          </div>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"field.dataType === 'TEXT' && field.isDisplay\">\n      <input type=\"text\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\n      <div class=\"error\" *ngIf=\"field.fieldValue && !getFieldValidation(field)\">\n        <ng-container *ngIf=\"field.fieldLabel?.toLowerCase().includes('phone number')\">\n          Please enter a valid 10-digit Indian mobile number.\n        </ng-container>\n        <ng-container *ngIf=\"field.fieldLabel?.toLowerCase().includes('email')\">\n          Please enter a valid email address.\n        </ng-container>\n      </div>\n    </div>\n    <div *ngIf=\"field.dataType === 'NUMBER' && field.isDisplay\">\n      <input type=\"number\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\n      <div class=\"error\" *ngIf=\"field.fieldValue && !getFieldValidation(field)\">\n        <ng-container *ngIf=\"field.fieldLabel?.toLowerCase().includes('phone number')\">\n          Please enter a valid 10-digit Indian mobile number.\n        </ng-container>\n        <ng-container *ngIf=\"field.fieldLabel?.toLowerCase().includes('email')\">\n          Please enter a valid email address.\n        </ng-container>\n      </div>\n    </div>\n    <div *ngIf=\"field.dataType === 'MONEY' && field.isDisplay\">\n      <input type=\"text\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\n    </div>\n    <div *ngIf=\"field.dataType === 'DATE' && field.isDisplay\">\n      <input type=\"date\" class=\"input-text\" [(ngModel)]=\"field.fieldValue\" [placeholder]=\"'Select '+field.fieldLabel\"\n        [max]=\"getMaxDate(field)\" (input)=\"checkDob(field)\">\n    </div>\n    <div class=\"input-container\" *ngIf=\"field.dataType === 'TEXT_FILE' && field.isDisplay\">\n      <input matInput class=\"input-text-1\" [(ngModel)]=\"field.fieldValue\" style=\"width:90%\">\n      <div class=\"image-box-1 d-flex justify-content-center align-items-center\" *ngIf=\"!field.fieldImageUrl\"\n        style=\"width:10%\">\n        <mat-icon (click)=\"fileInput1.click()\"\n          class=\"dummy-image-1 w-100 d-flex justify-content-center\">cloud_upload</mat-icon>\n      </div>\n      <div class=\"image-box-1 d-flex justify-content-center align-items-center\" *ngIf=\"field.fieldImageUrl\"\n        style=\"width:10%\">\n        <!-- If the uploaded file is an image, show the preview -->\n        <img *ngIf=\"isImage(field.fieldImageUrl)\" alt=\"\" class=\"w-100 h-100\"\n          [src]=\"ds.bypassSecurityTrustUrl(field.fieldImageUrl)\" (click)=\"fileInput1.click()\" />\n\n        <!-- If the uploaded file is not an image, show a file icon -->\n        <mat-icon *ngIf=\"!isImage(field.fieldImageUrl)\"\n          class=\"w-100 d-flex justify-content-center align-items-center dummy-image-1\"\n          (click)=\"fileInput1.click()\">insert_drive_file</mat-icon>\n      </div>\n\n      <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\"\n        accept=\".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/x-png,image/jpeg,image/jpg,.pdf, video/mp4,video/x-matroska,video/x-msvideo,video/quicktime\"\n        (change)=\"updateSelectedImage($event,field)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput1 />\n    </div>\n    <div *ngIf=\"field.dataType === 'DROPDOWN' && field.isDisplay\" class=\"admission\">\n      <mat-form-field class=\"input-text-1 input_card\" appearance=\"outline\" style=\"width:100%\">\n        <mat-select class=\"inputStyle\" placeholder=\"--Select--\" [(ngModel)]=\"field.fieldValue\"\n          [multiple]=\"field.multipleSelection\">\n          <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\n            <mat-option *ngFor=\"let item of field.value\" [value]=\"item?.value\"\n              (click)=\"masterDropdownValueChange(item, field)\">{{item.label}}</mat-option>\n          </ng-container>\n          <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\n            <mat-option *ngFor=\"let item of field.sourceData[field.dataSourceType]\"\n              (click)=\"inputFieldChange(item, field)\" [value]=\"item?.name\">{{item.name}}</mat-option>\n          </ng-container>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <div *ngIf=\"field.dataType === 'CHECKBOX' && field.isDisplay\">\n      <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\n        <div class=\"form-check mb-5\" *ngFor=\"let data of field.value\">\n          <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\" [(ngModel)]=\"data.checked\">\n          <label class=\"form-check-label\" for=\"flexCheckChecked\">\n            {{data.label}}\n          </label>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\n        <div class=\"form-check mb-5\" *ngFor=\"let data of field.sourceData[field.dataSourceType]\">\n          <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\" [(ngModel)]=\"data.checked\">\n          <label class=\"form-check-label\" for=\"flexCheckChecked\">\n            {{data.name}}\n          </label>\n        </div>\n      </ng-container>\n    </div>\n    <div *ngIf=\"field.dataType === 'RADIOBUTTON' && field.isDisplay\">\n      <div style=\"display: flex; gap: 20px; margin-top: 10px; height: 35px;align-items: center;\">\n        <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\n          <!-- <div class=\" mb-5\" *ngFor=\"let data of field.value\">\n            <mat-radio-button [value]=\"data.value\" [(ngModel)]=\"field.fieldValue\">{{data.label}}</mat-radio-button>\n          </div> -->\n          <mat-radio-group [(ngModel)]=\"field.fieldValue\" (change)=\"radioButtonChanged(field,selectedKey,group)\">\n            <mat-radio-button *ngFor=\"let data of field.value\" [value]=\"data.value\">\n              {{ data.label }}\n            </mat-radio-button>\n          </mat-radio-group>\n        </ng-container>\n\n        <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\n          <div class=\"form-check mb-5\" *ngFor=\"let data of field.value\">\n            <input class=\"form-check-input\" type=\"radio\" [value]=\"data.name\" [(ngModel)]=\"field.fieldValue\" />\n\n            <label class=\"form-check-label\" [for]=\"'radio_' + data.name\">\n              {{ data.name }}\n            </label>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </ng-template>\n\n\n  <ng-container *ngIf=\"styles?.devider?.display\">\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n  </ng-container>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n</section>", 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}.hover_effect{position:absolute;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:left;margin-bottom:8px}}.main-section{width:100%;overflow-y:hidden}.subTabs_section{padding:1rem 5rem;height:12vh}.active_route_section{height:89%;border:1px solid #0000000F;padding:15px 20px;background-color:#fff;border-radius:6px}.active_route_section_normal{background-color:#f6f6f6;border:none;padding:10px 4rem}.list_tabs{border:1px solid #0000001A;background-color:#ffffffe5;padding:10px;border-radius:6px;gap:10px;height:50px}.single_tab{color:#0e233c99;font-size:14px;font-weight:500;font-family:interReg;padding:10px 20px}.single_tab_active{width:max-content;height:32px;background-color:#0015800a;display:flex;align-items:center;font-weight:600;padding:10px 20px;border-radius:4px;color:#0e233c}.align-items-center{align-items:center}.header{height:8vh;padding:10px;border-bottom:2px solid rgba(0,0,0,.06);display:flex}.p-5{padding:5rem}.backToLeads{color:#000!important}.body{margin:1rem 5rem 0rem;box-shadow:#00000029 0 1px 4px;padding:2rem;border-radius:10px}.profile-img{display:flex;align-items:center;gap:2rem}.mt-2{margin-top:2rem!important}.mt-1{margin-top:1rem!important}.image-box{display:flex;gap:1rem;margin-top:3rem;cursor:pointer}.image-box span{color:#0189ea;font-size:14px;font-weight:500;padding:11px 7rem;border:2px solid rgba(0,0,0,.06);height:47px;border-radius:10px}.image_box{display:flex;align-items:center}.dummy-image{height:55px}.label-text{font-weight:400;font-family:Inter;font-size:14px;color:#434443}.input-text{border-radius:7px;border:2px solid rgba(208,213,221,1);height:42px;width:100%;margin-top:5px;padding-left:10px}.footer{display:flex;gap:1rem;align-items:center;justify-content:flex-end;height:8vh;padding:10px;border-top:2px solid rgba(0,0,0,.06);position:absolute;bottom:0;width:100%}.footer .continue{font-size:13px;font-family:interMedium;color:#242424;font-weight:500;border:none;background-color:#f6c318;padding:10px 20px;border-radius:8px;width:max-content}.footer .cancel{font-size:13px;font-family:interMedium;color:#f6c318;font-weight:500;border:1px solid #F6C318;background-color:#fff;padding:10px 20px;border-radius:8px;width:max-content}.main-content{overflow:scroll;padding-top:5px;padding-bottom:10px}.button-parent{padding:1rem 5rem 1rem 2rem;align-items:center;display:flex;justify-content:flex-end}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.payment-details{margin:1rem 5rem 0rem;box-shadow:#00000029 0 1px 4px;border-radius:10px}.mb-5{margin-bottom:5px!important}.addedImg{display:flex;gap:5%;width:95%;margin-top:2rem}.addedImg .uploadedImg img{height:65px;width:65px;border-radius:50%}.addedImg .image-buttons{display:flex;gap:3%;padding-top:20px}.addedImg .image-buttons .button{display:flex;gap:8px;width:142px;height:40px;padding:12px 8px;font-family:lexandMedium;color:#3f3b3b;font-style:normal;font-weight:500;font-size:12px!important;border:1px dashed #E4E7EC;border-radius:12px;cursor:pointer}.addedImg .image-buttons .button img{width:20px}.addedImg .image-buttons .button .delete{display:flex;gap:15%;width:60%;margin:auto}.addedImg .image-buttons .button .delete img{width:12px}.emptyText{height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:50px}.emptyText img{height:200px}@media screen and (max-width: 475px){.body{margin:0rem}.emptyText{padding:1rem}.emptyText img{width:100%}.subTabs_section{padding:1rem .5rem}.list_tabs{white-space:nowrap;overflow:scroll;justify-content:flex-start}.payment-details{margin:0rem}}.mtb-15{margin-top:15px;margin-bottom:15px}.checkbox-label{display:flex;align-items:center;gap:15px}.checkbox-label input{height:16px;width:16px}.upload-file{display:flex;align-items:center;justify-content:space-between;padding-right:10px}.upload-file mat-icon{color:#4caf50}.upload-file p{margin-bottom:0}@media only screen and (min-width: 320px) and (max-width : 500px){.image-box span{padding:11px 2rem}.dummy-image-1{margin-bottom:0}}mat-form-field{border:1px solid 2px solid rgba(208,213,221,1);border-radius:8px}.input-container{display:flex;border-radius:7px;border:2px solid rgba(208,213,221,1);height:42px;width:100%;margin-top:5px;padding-left:10px}.input-container input:focus{outline:none}.input-text-1{border:none}.image-box-1{display:flex;cursor:pointer;border-left:1px solid rgba(208,213,221,1)}.dummy-image-1{font-size:20px;color:green}.error{font-size:12px;font-family:var(--primary-font-family);color:red;margin-top:4px}.add_sibling{background-color:var(--primary-button-color);color:#fff;font-family:var(--primary-font-family);font-weight:500;border:none;padding:10px;border-radius:8px;font-size:13px}\n"] }]
         }], ctorParameters: () => [{ type: RestService }, { type: i2$3.MatSnackBar }, { type: EventsService }, { type: i2$2.ActivatedRoute }, { type: i1.DomSanitizer }, { type: ImageUplaodService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -17138,13 +17138,13 @@ class PropertyComponentComponent {
         this.content = this.data?.content;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertyComponentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertyComponentComponent, isStandalone: true, selector: "simpo-property-component", inputs: { data: "data", index: "index" }, ngImport: i0, template: "<div class=\"main-container content-side\">\r\n    <div class=\"header-section text-center mb-3\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\" [ngClass]=\"{'head-text':text.label == 'Heading' , 'sub-text-1':text.label == 'Subtext'}\">{{text.value}}</div>\r\n    </div>\r\n    <div class=\"cards-section d-flex justify-content-center align-items-center g-3\">\r\n        <ng-container *ngFor=\"let ele of data?.content?.listItem?.data\">\r\n            <div class=\"card\">\r\n                <div class=\"w-100 card-container\"\r\n                    [ngStyle]=\"{ 'background-image': 'url(' + ele.backgroundImageUrl + ')' }\">\r\n                    <div class=\"data p-3 w-100\">\r\n                        <div class=\"top-data d-flex justify-content-between align-items-center\">\r\n                            <div class=\"top-left d-flex g-10\">\r\n                                <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/155859c1737715323470Logo.png\"\r\n                                    alt=\"logo-text\" class=\"\">\r\n                                <div class=\"top-left-text text-left d-flex flex-column justify-content-center\">\r\n                                    <div class=\"text-heading clr-white\">{{ele.heading}}</div>\r\n                                    <div class=\"d-flex sub-text\"><img\r\n                                            src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\">{{ele.location.city\r\n                                        + \", \" + ele.location.state}}</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"top-right text-right\">\r\n                                <div class=\"xl-text mb-10\">{{ele.minInvestment}}</div>\r\n                                <div class=\"nrml-text\">Min.Investment</div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"bottom-data d-flex justify-content-around align-items-center\">\r\n                            <div class=\"key-value d-flex flex-column\" *ngFor=\"let item of ele.features\">\r\n                                <div class=\"text-heading clr-grey text-center\">{{item.value}}</div>\r\n                                <div class=\"text-heading clr-grey text-center\">{{item.key}}</div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</div>", styles: [".main-container{padding:4rem}.head-text{font-family:Open Sans;font-size:32px;font-weight:600;line-height:44px;color:#000}.sub-text-1{font-family:Open Sans;font-size:18px;font-weight:400;line-height:44px;color:#000000b3}.g-10{gap:10px}.mb-10{margin-bottom:10px}.text-heading{font-weight:700;font-size:18px;margin-bottom:5px}.clr-white{color:#fff}.clr-grey{color:#000000b3}.sub-text{font-weight:600;font-size:16px;color:#ffffffb3}.xl-text{font-size:28px;line-height:17px;font-weight:700;color:#f09819}.nrml-text{font-size:16px;font-weight:500;color:#fff6}.bottom-data{background:#fff;padding:10px;border-radius:8px;margin-top:10px}.card{width:45%;border-radius:10px}.card-container{height:60vh;background-repeat:no-repeat;background-size:cover;position:relative;border-radius:10px}.data{position:absolute;bottom:0}.g-3{gap:3rem}.logo-img{width:60px;height:60px}@media only screen and (max-width: 475px){.main-container{padding:1rem}.cards-section{flex-direction:column;gap:1rem!important}.card{width:100%!important}.head-text{font-size:25px;line-height:38px;text-align:start!important;margin-bottom:10px}.sub-text-1{font-size:16px;line-height:20px;text-align:start!important}.xl-text{font-size:22px}.nrml-text{font-size:12px}.text-heading{font-size:13px}.sub-text{font-size:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertyComponentComponent, isStandalone: true, selector: "simpo-property-component", inputs: { data: "data", index: "index" }, ngImport: i0, template: "<div class=\"main-container content-side\">\n    <div class=\"header-section text-center mb-3\">\n        <div *ngFor=\"let text of data?.content?.inputText\" [ngClass]=\"{'head-text':text.label == 'Heading' , 'sub-text-1':text.label == 'Subtext'}\">{{text.value}}</div>\n    </div>\n    <div class=\"cards-section d-flex justify-content-center align-items-center g-3\">\n        <ng-container *ngFor=\"let ele of data?.content?.listItem?.data\">\n            <div class=\"card\">\n                <div class=\"w-100 card-container\"\n                    [ngStyle]=\"{ 'background-image': 'url(' + ele.backgroundImageUrl + ')' }\">\n                    <div class=\"data p-3 w-100\">\n                        <div class=\"top-data d-flex justify-content-between align-items-center\">\n                            <div class=\"top-left d-flex g-10\">\n                                <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/155859c1737715323470Logo.png\"\n                                    alt=\"logo-text\" class=\"\">\n                                <div class=\"top-left-text text-left d-flex flex-column justify-content-center\">\n                                    <div class=\"text-heading clr-white\">{{ele.heading}}</div>\n                                    <div class=\"d-flex sub-text\"><img\n                                            src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\">{{ele.location.city\n                                        + \", \" + ele.location.state}}</div>\n                                </div>\n                            </div>\n                            <div class=\"top-right text-right\">\n                                <div class=\"xl-text mb-10\">{{ele.minInvestment}}</div>\n                                <div class=\"nrml-text\">Min.Investment</div>\n                            </div>\n                        </div>\n                        <div class=\"bottom-data d-flex justify-content-around align-items-center\">\n                            <div class=\"key-value d-flex flex-column\" *ngFor=\"let item of ele.features\">\n                                <div class=\"text-heading clr-grey text-center\">{{item.value}}</div>\n                                <div class=\"text-heading clr-grey text-center\">{{item.key}}</div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n    </div>\n</div>", styles: [".main-container{padding:4rem}.head-text{font-family:Open Sans;font-size:32px;font-weight:600;line-height:44px;color:#000}.sub-text-1{font-family:Open Sans;font-size:18px;font-weight:400;line-height:44px;color:#000000b3}.g-10{gap:10px}.mb-10{margin-bottom:10px}.text-heading{font-weight:700;font-size:18px;margin-bottom:5px}.clr-white{color:#fff}.clr-grey{color:#000000b3}.sub-text{font-weight:600;font-size:16px;color:#ffffffb3}.xl-text{font-size:28px;line-height:17px;font-weight:700;color:#f09819}.nrml-text{font-size:16px;font-weight:500;color:#fff6}.bottom-data{background:#fff;padding:10px;border-radius:8px;margin-top:10px}.card{width:45%;border-radius:10px}.card-container{height:60vh;background-repeat:no-repeat;background-size:cover;position:relative;border-radius:10px}.data{position:absolute;bottom:0}.g-3{gap:3rem}.logo-img{width:60px;height:60px}@media only screen and (max-width: 475px){.main-container{padding:1rem}.cards-section{flex-direction:column;gap:1rem!important}.card{width:100%!important}.head-text{font-size:25px;line-height:38px;text-align:start!important;margin-bottom:10px}.sub-text-1{font-size:16px;line-height:20px;text-align:start!important}.xl-text{font-size:22px}.nrml-text{font-size:12px}.text-heading{font-size:13px}.sub-text{font-size:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertyComponentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'simpo-property-component', standalone: true, imports: [
                         CommonModule,
-                    ], template: "<div class=\"main-container content-side\">\r\n    <div class=\"header-section text-center mb-3\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\" [ngClass]=\"{'head-text':text.label == 'Heading' , 'sub-text-1':text.label == 'Subtext'}\">{{text.value}}</div>\r\n    </div>\r\n    <div class=\"cards-section d-flex justify-content-center align-items-center g-3\">\r\n        <ng-container *ngFor=\"let ele of data?.content?.listItem?.data\">\r\n            <div class=\"card\">\r\n                <div class=\"w-100 card-container\"\r\n                    [ngStyle]=\"{ 'background-image': 'url(' + ele.backgroundImageUrl + ')' }\">\r\n                    <div class=\"data p-3 w-100\">\r\n                        <div class=\"top-data d-flex justify-content-between align-items-center\">\r\n                            <div class=\"top-left d-flex g-10\">\r\n                                <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/155859c1737715323470Logo.png\"\r\n                                    alt=\"logo-text\" class=\"\">\r\n                                <div class=\"top-left-text text-left d-flex flex-column justify-content-center\">\r\n                                    <div class=\"text-heading clr-white\">{{ele.heading}}</div>\r\n                                    <div class=\"d-flex sub-text\"><img\r\n                                            src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\">{{ele.location.city\r\n                                        + \", \" + ele.location.state}}</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"top-right text-right\">\r\n                                <div class=\"xl-text mb-10\">{{ele.minInvestment}}</div>\r\n                                <div class=\"nrml-text\">Min.Investment</div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"bottom-data d-flex justify-content-around align-items-center\">\r\n                            <div class=\"key-value d-flex flex-column\" *ngFor=\"let item of ele.features\">\r\n                                <div class=\"text-heading clr-grey text-center\">{{item.value}}</div>\r\n                                <div class=\"text-heading clr-grey text-center\">{{item.key}}</div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</div>", styles: [".main-container{padding:4rem}.head-text{font-family:Open Sans;font-size:32px;font-weight:600;line-height:44px;color:#000}.sub-text-1{font-family:Open Sans;font-size:18px;font-weight:400;line-height:44px;color:#000000b3}.g-10{gap:10px}.mb-10{margin-bottom:10px}.text-heading{font-weight:700;font-size:18px;margin-bottom:5px}.clr-white{color:#fff}.clr-grey{color:#000000b3}.sub-text{font-weight:600;font-size:16px;color:#ffffffb3}.xl-text{font-size:28px;line-height:17px;font-weight:700;color:#f09819}.nrml-text{font-size:16px;font-weight:500;color:#fff6}.bottom-data{background:#fff;padding:10px;border-radius:8px;margin-top:10px}.card{width:45%;border-radius:10px}.card-container{height:60vh;background-repeat:no-repeat;background-size:cover;position:relative;border-radius:10px}.data{position:absolute;bottom:0}.g-3{gap:3rem}.logo-img{width:60px;height:60px}@media only screen and (max-width: 475px){.main-container{padding:1rem}.cards-section{flex-direction:column;gap:1rem!important}.card{width:100%!important}.head-text{font-size:25px;line-height:38px;text-align:start!important;margin-bottom:10px}.sub-text-1{font-size:16px;line-height:20px;text-align:start!important}.xl-text{font-size:22px}.nrml-text{font-size:12px}.text-heading{font-size:13px}.sub-text{font-size:12px}}\n"] }]
+                    ], template: "<div class=\"main-container content-side\">\n    <div class=\"header-section text-center mb-3\">\n        <div *ngFor=\"let text of data?.content?.inputText\" [ngClass]=\"{'head-text':text.label == 'Heading' , 'sub-text-1':text.label == 'Subtext'}\">{{text.value}}</div>\n    </div>\n    <div class=\"cards-section d-flex justify-content-center align-items-center g-3\">\n        <ng-container *ngFor=\"let ele of data?.content?.listItem?.data\">\n            <div class=\"card\">\n                <div class=\"w-100 card-container\"\n                    [ngStyle]=\"{ 'background-image': 'url(' + ele.backgroundImageUrl + ')' }\">\n                    <div class=\"data p-3 w-100\">\n                        <div class=\"top-data d-flex justify-content-between align-items-center\">\n                            <div class=\"top-left d-flex g-10\">\n                                <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/155859c1737715323470Logo.png\"\n                                    alt=\"logo-text\" class=\"\">\n                                <div class=\"top-left-text text-left d-flex flex-column justify-content-center\">\n                                    <div class=\"text-heading clr-white\">{{ele.heading}}</div>\n                                    <div class=\"d-flex sub-text\"><img\n                                            src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\">{{ele.location.city\n                                        + \", \" + ele.location.state}}</div>\n                                </div>\n                            </div>\n                            <div class=\"top-right text-right\">\n                                <div class=\"xl-text mb-10\">{{ele.minInvestment}}</div>\n                                <div class=\"nrml-text\">Min.Investment</div>\n                            </div>\n                        </div>\n                        <div class=\"bottom-data d-flex justify-content-around align-items-center\">\n                            <div class=\"key-value d-flex flex-column\" *ngFor=\"let item of ele.features\">\n                                <div class=\"text-heading clr-grey text-center\">{{item.value}}</div>\n                                <div class=\"text-heading clr-grey text-center\">{{item.key}}</div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n    </div>\n</div>", styles: [".main-container{padding:4rem}.head-text{font-family:Open Sans;font-size:32px;font-weight:600;line-height:44px;color:#000}.sub-text-1{font-family:Open Sans;font-size:18px;font-weight:400;line-height:44px;color:#000000b3}.g-10{gap:10px}.mb-10{margin-bottom:10px}.text-heading{font-weight:700;font-size:18px;margin-bottom:5px}.clr-white{color:#fff}.clr-grey{color:#000000b3}.sub-text{font-weight:600;font-size:16px;color:#ffffffb3}.xl-text{font-size:28px;line-height:17px;font-weight:700;color:#f09819}.nrml-text{font-size:16px;font-weight:500;color:#fff6}.bottom-data{background:#fff;padding:10px;border-radius:8px;margin-top:10px}.card{width:45%;border-radius:10px}.card-container{height:60vh;background-repeat:no-repeat;background-size:cover;position:relative;border-radius:10px}.data{position:absolute;bottom:0}.g-3{gap:3rem}.logo-img{width:60px;height:60px}@media only screen and (max-width: 475px){.main-container{padding:1rem}.cards-section{flex-direction:column;gap:1rem!important}.card{width:100%!important}.head-text{font-size:25px;line-height:38px;text-align:start!important;margin-bottom:10px}.sub-text-1{font-size:16px;line-height:20px;text-align:start!important}.xl-text{font-size:22px}.nrml-text{font-size:12px}.text-heading{font-size:13px}.sub-text{font-size:12px}}\n"] }]
         }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -17174,7 +17174,7 @@ class UspVideoSectionComponent extends BaseSection {
         this.screenWidth = window.innerWidth;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UspVideoSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UspVideoSectionComponent, isStandalone: true, selector: "simpo-usp-video-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"main-container\"  simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div [spacingAround]=\"stylesLayout\">\r\n    <div [simpoBackground]=\"style?.background\" [simpoAnimation]=\"style?.animation\" [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"header\" *ngFor=\"let ele of data?.content?.inputText\"\r\n        [ngClass]=\"{'text-center': data?.styles?.layout?.align == 'center'}\">\r\n        {{ele.value}}\r\n      </div>\r\n      <div class=\"body-container d-flex g-4 w-100\" [simpoAnimation]=\"style?.animation\">\r\n        <div class=\"left w-40\"\r\n          [ngClass]=\"{'w-100':!data?.content?.videoLink?.display , 'center-alignment': (data?.styles?.layout?.align == 'center' && screenWidth > 475) }\">\r\n          <ng-container *ngFor=\"let ele of data?.content?.listItem?.data; let i = index\">\r\n            <div class=\"card-container w-100\" [class.active-border]=\"i == 1\">\r\n              <p class=\"head-text\" [class.active-text]=\"i == 1\">{{ele.inputText[0].value}}</p>\r\n              <p class=\"sub-text\" [class.active-text]=\"i == 1\">{{ele.inputText[1].value}}</p>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"right w-60 d-flex justify-content-end align-items-center\" *ngIf=\"data?.content?.videoLink?.display\">\r\n          <div class=\"video-section\">\r\n            <video controls class=\"w-100 br-20 h-50\">\r\n              <source [src]=\"data?.content?.videoLink?.url\">\r\n            </video>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\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>\r\n", styles: [".main-container{position:relative}.header{font-weight:600;font-size:32px;line-height:56px;color:#555}.head-text{font-size:24px;line-height:56px;color:#1e1e1e;font-weight:700}.sub-text{font-size:16px;font-weight:400;line-height:24px;color:#6b6b6b}.w-40{width:40%}.w-60{width:60%}.active-text{color:#f8a938!important}.active-border{border-left:10px solid rgba(248,169,56,1);border-radius:10px;padding-left:10px}.br-20{border-radius:20px}.h-50{height:50vh}.body-container{text-align:left}@media only screen and (max-width: 475px){.header{font-size:22px;line-height:35px;margin-bottom:10px}.body-container{flex-direction:column-reverse}.left,.right{width:100%!important}.head-text{margin-bottom:0}}.center-alignment{width:75%!important;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:0 auto}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UspVideoSectionComponent, isStandalone: true, selector: "simpo-usp-video-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"main-container\"  simpoHover (hovering)=\"showEditTabs($event)\">\n  <div [spacingAround]=\"stylesLayout\">\n    <div [simpoBackground]=\"style?.background\" [simpoAnimation]=\"style?.animation\" [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"style?.layout\">\n      <div class=\"header\" *ngFor=\"let ele of data?.content?.inputText\"\n        [ngClass]=\"{'text-center': data?.styles?.layout?.align == 'center'}\">\n        {{ele.value}}\n      </div>\n      <div class=\"body-container d-flex g-4 w-100\" [simpoAnimation]=\"style?.animation\">\n        <div class=\"left w-40\"\n          [ngClass]=\"{'w-100':!data?.content?.videoLink?.display , 'center-alignment': (data?.styles?.layout?.align == 'center' && screenWidth > 475) }\">\n          <ng-container *ngFor=\"let ele of data?.content?.listItem?.data; let i = index\">\n            <div class=\"card-container w-100\" [class.active-border]=\"i == 1\">\n              <p class=\"head-text\" [class.active-text]=\"i == 1\">{{ele.inputText[0].value}}</p>\n              <p class=\"sub-text\" [class.active-text]=\"i == 1\">{{ele.inputText[1].value}}</p>\n            </div>\n          </ng-container>\n        </div>\n        <div class=\"right w-60 d-flex justify-content-end align-items-center\" *ngIf=\"data?.content?.videoLink?.display\">\n          <div class=\"video-section\">\n            <video controls class=\"w-100 br-20 h-50\">\n              <source [src]=\"data?.content?.videoLink?.url\">\n            </video>\n          </div>\n        </div>\n      </div>\n\n    </div>\n  </div>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</div>\n", styles: [".main-container{position:relative}.header{font-weight:600;font-size:32px;line-height:56px;color:#555}.head-text{font-size:24px;line-height:56px;color:#1e1e1e;font-weight:700}.sub-text{font-size:16px;font-weight:400;line-height:24px;color:#6b6b6b}.w-40{width:40%}.w-60{width:60%}.active-text{color:#f8a938!important}.active-border{border-left:10px solid rgba(248,169,56,1);border-radius:10px;padding-left:10px}.br-20{border-radius:20px}.h-50{height:50vh}.body-container{text-align:left}@media only screen and (max-width: 475px){.header{font-size:22px;line-height:35px;margin-bottom:10px}.body-container{flex-direction:column-reverse}.left,.right{width:100%!important}.head-text{margin-bottom:0}}.center-alignment{width:75%!important;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:0 auto}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UspVideoSectionComponent, decorators: [{
             type: Component,
@@ -17189,7 +17189,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SpacingAroundDirective,
                         SpacingHorizontalDirective,
                         ContentFitDirective
-                    ], template: "<div class=\"main-container\"  simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div [spacingAround]=\"stylesLayout\">\r\n    <div [simpoBackground]=\"style?.background\" [simpoAnimation]=\"style?.animation\" [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"header\" *ngFor=\"let ele of data?.content?.inputText\"\r\n        [ngClass]=\"{'text-center': data?.styles?.layout?.align == 'center'}\">\r\n        {{ele.value}}\r\n      </div>\r\n      <div class=\"body-container d-flex g-4 w-100\" [simpoAnimation]=\"style?.animation\">\r\n        <div class=\"left w-40\"\r\n          [ngClass]=\"{'w-100':!data?.content?.videoLink?.display , 'center-alignment': (data?.styles?.layout?.align == 'center' && screenWidth > 475) }\">\r\n          <ng-container *ngFor=\"let ele of data?.content?.listItem?.data; let i = index\">\r\n            <div class=\"card-container w-100\" [class.active-border]=\"i == 1\">\r\n              <p class=\"head-text\" [class.active-text]=\"i == 1\">{{ele.inputText[0].value}}</p>\r\n              <p class=\"sub-text\" [class.active-text]=\"i == 1\">{{ele.inputText[1].value}}</p>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n        <div class=\"right w-60 d-flex justify-content-end align-items-center\" *ngIf=\"data?.content?.videoLink?.display\">\r\n          <div class=\"video-section\">\r\n            <video controls class=\"w-100 br-20 h-50\">\r\n              <source [src]=\"data?.content?.videoLink?.url\">\r\n            </video>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\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>\r\n", styles: [".main-container{position:relative}.header{font-weight:600;font-size:32px;line-height:56px;color:#555}.head-text{font-size:24px;line-height:56px;color:#1e1e1e;font-weight:700}.sub-text{font-size:16px;font-weight:400;line-height:24px;color:#6b6b6b}.w-40{width:40%}.w-60{width:60%}.active-text{color:#f8a938!important}.active-border{border-left:10px solid rgba(248,169,56,1);border-radius:10px;padding-left:10px}.br-20{border-radius:20px}.h-50{height:50vh}.body-container{text-align:left}@media only screen and (max-width: 475px){.header{font-size:22px;line-height:35px;margin-bottom:10px}.body-container{flex-direction:column-reverse}.left,.right{width:100%!important}.head-text{margin-bottom:0}}.center-alignment{width:75%!important;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:0 auto}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"] }]
+                    ], template: "<div class=\"main-container\"  simpoHover (hovering)=\"showEditTabs($event)\">\n  <div [spacingAround]=\"stylesLayout\">\n    <div [simpoBackground]=\"style?.background\" [simpoAnimation]=\"style?.animation\" [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"style?.layout\">\n      <div class=\"header\" *ngFor=\"let ele of data?.content?.inputText\"\n        [ngClass]=\"{'text-center': data?.styles?.layout?.align == 'center'}\">\n        {{ele.value}}\n      </div>\n      <div class=\"body-container d-flex g-4 w-100\" [simpoAnimation]=\"style?.animation\">\n        <div class=\"left w-40\"\n          [ngClass]=\"{'w-100':!data?.content?.videoLink?.display , 'center-alignment': (data?.styles?.layout?.align == 'center' && screenWidth > 475) }\">\n          <ng-container *ngFor=\"let ele of data?.content?.listItem?.data; let i = index\">\n            <div class=\"card-container w-100\" [class.active-border]=\"i == 1\">\n              <p class=\"head-text\" [class.active-text]=\"i == 1\">{{ele.inputText[0].value}}</p>\n              <p class=\"sub-text\" [class.active-text]=\"i == 1\">{{ele.inputText[1].value}}</p>\n            </div>\n          </ng-container>\n        </div>\n        <div class=\"right w-60 d-flex justify-content-end align-items-center\" *ngIf=\"data?.content?.videoLink?.display\">\n          <div class=\"video-section\">\n            <video controls class=\"w-100 br-20 h-50\">\n              <source [src]=\"data?.content?.videoLink?.url\">\n            </video>\n          </div>\n        </div>\n      </div>\n\n    </div>\n  </div>\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</div>\n", styles: [".main-container{position:relative}.header{font-weight:600;font-size:32px;line-height:56px;color:#555}.head-text{font-size:24px;line-height:56px;color:#1e1e1e;font-weight:700}.sub-text{font-size:16px;font-weight:400;line-height:24px;color:#6b6b6b}.w-40{width:40%}.w-60{width:60%}.active-text{color:#f8a938!important}.active-border{border-left:10px solid rgba(248,169,56,1);border-radius:10px;padding-left:10px}.br-20{border-radius:20px}.h-50{height:50vh}.body-container{text-align:left}@media only screen and (max-width: 475px){.header{font-size:22px;line-height:35px;margin-bottom:10px}.body-container{flex-direction:column-reverse}.left,.right{width:100%!important}.head-text{margin-bottom:0}}.center-alignment{width:75%!important;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:0 auto}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -17264,7 +17264,7 @@ class PropertyListComponent extends BaseSection {
         return this.styles?.layout.headingSpacing;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertyListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertyListComponent, isStandalone: true, selector: "simpo-property-list", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n  <div [id]=\"data?.id\">\r\n    <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\">\r\n      <div [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\"\r\n        [simpoLayout]=\"styles?.layout\">\r\n        <div [simpoContentTitleSpace]=\"headingSpace\" [id]=\"data?.id\" class=\"content-side\">\r\n          <div *ngFor=\"let input of content?.inputText\">\r\n            <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large\"\r\n              [innerHTML]=\"input.value | sanitizeHtml\"></div>\r\n          </div>\r\n        </div>\r\n        <div class=\"row\">\r\n          <div class=\"col-12 col-md-6\" *ngFor=\"let property of propertyList\">\r\n            <ng-container *ngTemplateOutlet=\"propertyCards; context: {data: property}\"></ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\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\r\n</section>\r\n\r\n\r\n<ng-template #propertyCards let-property=\"data\">\r\n  <div class=\"card\">\r\n    <img [src]=\"property.imgUrl\" alt=\"\">\r\n    <div class=\"p-15\">\r\n      <div class=\"property-name\">\r\n        <div class=\"left-side\">\r\n          <img [src]=\"property.icon\" alt=\"\">\r\n          <div class=\"text-left\">\r\n            <div class=\"property-name-text\">{{property.name}}</div>\r\n            <div class=\"location\">{{property.location}}</div>\r\n          </div>\r\n        </div>\r\n        <div class=\"right-side\" *ngIf=\"property.underConstruction\">\r\n          <mat-icon>build</mat-icon>\r\n          <div>Under Construction</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"stats-area\">\r\n        <div class=\"single-stat\">\r\n          <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/600863c1738056517087return.png\" alt=\"\">\r\n          <div class=\"stat-number\">{{property.return}}% <span>Annual Returns</span></div>\r\n        </div>\r\n        <div class=\"single-stat justify-center\">\r\n          <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/600863c1738056517087return.png\" alt=\"\">\r\n          <div class=\"stat-number\">{{property.IRR}}% <span>IRR</span></div>\r\n        </div>\r\n      </div>\r\n      <div class=\"single-stat mt-15 w-100\">\r\n        <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/600863c1738056517087return.png\" alt=\"\">\r\n        <div class=\"stat-number\">{{property.growth}}% <span>Guaranteed annual growth</span></div>\r\n      </div>\r\n      <hr>\r\n      <div class=\"bottom-area\">\r\n        <div class=\"min-investment\">\r\n          <p>{{property.minInvestment}} Lac</p>\r\n          <div>Min.Investment</div>\r\n        </div>\r\n        <button class=\"button\" simpoButtonDirective [id]=\"(data?.id || '')+(data?.action?.buttons?.[0]?.id || '')\" [backgroundInfo]=\"styles?.background\"\r\n          [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"styles?.background?.accentColor\">Know\r\n          More</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.card{padding:5px;border:2px solid rgba(0,0,0,.1)}.card img{height:37vh}.property-name{display:flex;align-items:center;justify-content:space-between}.p-15{padding:15px}.left-side{align-items:center;display:flex;gap:15px}.left-side img{height:65px;width:60px}.right-side{display:flex;gap:5px;color:#19a6c6;align-items:center}.stats-area{display:flex;margin-top:30px;justify-content:space-between}.single-stat{width:50%;display:flex;align-items:center;gap:20px}.single-stat img{height:20px;width:16px}.mt-15{margin-top:15px}hr{border-top:1px solid rgba(0,0,0,.7)}.stat-number{font-size:25px;color:#000000b3;font-weight:900;display:flex;align-items:center;gap:13px}.stat-number span{color:#000000b3;font-size:12px}.bottom-area{display:flex;justify-content:space-between;align-items:center}.min-investment{background:#f8a9381a;text-align:center;padding:.5rem 2rem;border-radius:5px}.min-investment p{margin-bottom:0;font-size:22px;font-weight:900}.min-investment div{color:#0006;font-size:14px;font-weight:600}.button{font-size:14px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:max-content!important;font-weight:600}.property-name-text{font-size:22px;font-weight:700}.location{font-size:11px;color:gray}.justify-center{justify-content:center}.row{row-gap:20px}.text-left{text-align:left}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { 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: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertyListComponent, isStandalone: true, selector: "simpo-property-list", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\n  <div [id]=\"data?.id\">\n    <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\">\n      <div [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\"\n        [simpoLayout]=\"styles?.layout\">\n        <div [simpoContentTitleSpace]=\"headingSpace\" [id]=\"data?.id\" class=\"content-side\">\n          <div *ngFor=\"let input of content?.inputText\">\n            <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large\"\n              [innerHTML]=\"input.value | sanitizeHtml\"></div>\n          </div>\n        </div>\n        <div class=\"row\">\n          <div class=\"col-12 col-md-6\" *ngFor=\"let property of propertyList\">\n            <ng-container *ngTemplateOutlet=\"propertyCards; context: {data: property}\"></ng-container>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n\n</section>\n\n\n<ng-template #propertyCards let-property=\"data\">\n  <div class=\"card\">\n    <img [src]=\"property.imgUrl\" alt=\"\">\n    <div class=\"p-15\">\n      <div class=\"property-name\">\n        <div class=\"left-side\">\n          <img [src]=\"property.icon\" alt=\"\">\n          <div class=\"text-left\">\n            <div class=\"property-name-text\">{{property.name}}</div>\n            <div class=\"location\">{{property.location}}</div>\n          </div>\n        </div>\n        <div class=\"right-side\" *ngIf=\"property.underConstruction\">\n          <mat-icon>build</mat-icon>\n          <div>Under Construction</div>\n        </div>\n      </div>\n      <div class=\"stats-area\">\n        <div class=\"single-stat\">\n          <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/600863c1738056517087return.png\" alt=\"\">\n          <div class=\"stat-number\">{{property.return}}% <span>Annual Returns</span></div>\n        </div>\n        <div class=\"single-stat justify-center\">\n          <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/600863c1738056517087return.png\" alt=\"\">\n          <div class=\"stat-number\">{{property.IRR}}% <span>IRR</span></div>\n        </div>\n      </div>\n      <div class=\"single-stat mt-15 w-100\">\n        <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/600863c1738056517087return.png\" alt=\"\">\n        <div class=\"stat-number\">{{property.growth}}% <span>Guaranteed annual growth</span></div>\n      </div>\n      <hr>\n      <div class=\"bottom-area\">\n        <div class=\"min-investment\">\n          <p>{{property.minInvestment}} Lac</p>\n          <div>Min.Investment</div>\n        </div>\n        <button class=\"button\" simpoButtonDirective [id]=\"(data?.id || '')+(data?.action?.buttons?.[0]?.id || '')\" [backgroundInfo]=\"styles?.background\"\n          [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"styles?.background?.accentColor\">Know\n          More</button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.card{padding:5px;border:2px solid rgba(0,0,0,.1)}.card img{height:37vh}.property-name{display:flex;align-items:center;justify-content:space-between}.p-15{padding:15px}.left-side{align-items:center;display:flex;gap:15px}.left-side img{height:65px;width:60px}.right-side{display:flex;gap:5px;color:#19a6c6;align-items:center}.stats-area{display:flex;margin-top:30px;justify-content:space-between}.single-stat{width:50%;display:flex;align-items:center;gap:20px}.single-stat img{height:20px;width:16px}.mt-15{margin-top:15px}hr{border-top:1px solid rgba(0,0,0,.7)}.stat-number{font-size:25px;color:#000000b3;font-weight:900;display:flex;align-items:center;gap:13px}.stat-number span{color:#000000b3;font-size:12px}.bottom-area{display:flex;justify-content:space-between;align-items:center}.min-investment{background:#f8a9381a;text-align:center;padding:.5rem 2rem;border-radius:5px}.min-investment p{margin-bottom:0;font-size:22px;font-weight:900}.min-investment div{color:#0006;font-size:14px;font-weight:600}.button{font-size:14px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:max-content!important;font-weight:600}.property-name-text{font-size:22px;font-weight:700}.location{font-size:11px;color:gray}.justify-center{justify-content:center}.row{row-gap:20px}.text-left{text-align:left}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { 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: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertyListComponent, decorators: [{
             type: Component,
@@ -17284,7 +17284,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MatIconModule,
                         ContentTitleDirective,
                         SpacingHorizontalDirective
-                    ], template: "<section class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n  <div [id]=\"data?.id\">\r\n    <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\">\r\n      <div [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\"\r\n        [simpoLayout]=\"styles?.layout\">\r\n        <div [simpoContentTitleSpace]=\"headingSpace\" [id]=\"data?.id\" class=\"content-side\">\r\n          <div *ngFor=\"let input of content?.inputText\">\r\n            <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large\"\r\n              [innerHTML]=\"input.value | sanitizeHtml\"></div>\r\n          </div>\r\n        </div>\r\n        <div class=\"row\">\r\n          <div class=\"col-12 col-md-6\" *ngFor=\"let property of propertyList\">\r\n            <ng-container *ngTemplateOutlet=\"propertyCards; context: {data: property}\"></ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\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\r\n</section>\r\n\r\n\r\n<ng-template #propertyCards let-property=\"data\">\r\n  <div class=\"card\">\r\n    <img [src]=\"property.imgUrl\" alt=\"\">\r\n    <div class=\"p-15\">\r\n      <div class=\"property-name\">\r\n        <div class=\"left-side\">\r\n          <img [src]=\"property.icon\" alt=\"\">\r\n          <div class=\"text-left\">\r\n            <div class=\"property-name-text\">{{property.name}}</div>\r\n            <div class=\"location\">{{property.location}}</div>\r\n          </div>\r\n        </div>\r\n        <div class=\"right-side\" *ngIf=\"property.underConstruction\">\r\n          <mat-icon>build</mat-icon>\r\n          <div>Under Construction</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"stats-area\">\r\n        <div class=\"single-stat\">\r\n          <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/600863c1738056517087return.png\" alt=\"\">\r\n          <div class=\"stat-number\">{{property.return}}% <span>Annual Returns</span></div>\r\n        </div>\r\n        <div class=\"single-stat justify-center\">\r\n          <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/600863c1738056517087return.png\" alt=\"\">\r\n          <div class=\"stat-number\">{{property.IRR}}% <span>IRR</span></div>\r\n        </div>\r\n      </div>\r\n      <div class=\"single-stat mt-15 w-100\">\r\n        <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/600863c1738056517087return.png\" alt=\"\">\r\n        <div class=\"stat-number\">{{property.growth}}% <span>Guaranteed annual growth</span></div>\r\n      </div>\r\n      <hr>\r\n      <div class=\"bottom-area\">\r\n        <div class=\"min-investment\">\r\n          <p>{{property.minInvestment}} Lac</p>\r\n          <div>Min.Investment</div>\r\n        </div>\r\n        <button class=\"button\" simpoButtonDirective [id]=\"(data?.id || '')+(data?.action?.buttons?.[0]?.id || '')\" [backgroundInfo]=\"styles?.background\"\r\n          [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"styles?.background?.accentColor\">Know\r\n          More</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.card{padding:5px;border:2px solid rgba(0,0,0,.1)}.card img{height:37vh}.property-name{display:flex;align-items:center;justify-content:space-between}.p-15{padding:15px}.left-side{align-items:center;display:flex;gap:15px}.left-side img{height:65px;width:60px}.right-side{display:flex;gap:5px;color:#19a6c6;align-items:center}.stats-area{display:flex;margin-top:30px;justify-content:space-between}.single-stat{width:50%;display:flex;align-items:center;gap:20px}.single-stat img{height:20px;width:16px}.mt-15{margin-top:15px}hr{border-top:1px solid rgba(0,0,0,.7)}.stat-number{font-size:25px;color:#000000b3;font-weight:900;display:flex;align-items:center;gap:13px}.stat-number span{color:#000000b3;font-size:12px}.bottom-area{display:flex;justify-content:space-between;align-items:center}.min-investment{background:#f8a9381a;text-align:center;padding:.5rem 2rem;border-radius:5px}.min-investment p{margin-bottom:0;font-size:22px;font-weight:900}.min-investment div{color:#0006;font-size:14px;font-weight:600}.button{font-size:14px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:max-content!important;font-weight:600}.property-name-text{font-size:22px;font-weight:700}.location{font-size:11px;color:gray}.justify-center{justify-content:center}.row{row-gap:20px}.text-left{text-align:left}\n"] }]
+                    ], template: "<section class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\n  <div [id]=\"data?.id\">\n    <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\">\n      <div [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\"\n        [simpoLayout]=\"styles?.layout\">\n        <div [simpoContentTitleSpace]=\"headingSpace\" [id]=\"data?.id\" class=\"content-side\">\n          <div *ngFor=\"let input of content?.inputText\">\n            <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large\"\n              [innerHTML]=\"input.value | sanitizeHtml\"></div>\n          </div>\n        </div>\n        <div class=\"row\">\n          <div class=\"col-12 col-md-6\" *ngFor=\"let property of propertyList\">\n            <ng-container *ngTemplateOutlet=\"propertyCards; context: {data: property}\"></ng-container>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n\n</section>\n\n\n<ng-template #propertyCards let-property=\"data\">\n  <div class=\"card\">\n    <img [src]=\"property.imgUrl\" alt=\"\">\n    <div class=\"p-15\">\n      <div class=\"property-name\">\n        <div class=\"left-side\">\n          <img [src]=\"property.icon\" alt=\"\">\n          <div class=\"text-left\">\n            <div class=\"property-name-text\">{{property.name}}</div>\n            <div class=\"location\">{{property.location}}</div>\n          </div>\n        </div>\n        <div class=\"right-side\" *ngIf=\"property.underConstruction\">\n          <mat-icon>build</mat-icon>\n          <div>Under Construction</div>\n        </div>\n      </div>\n      <div class=\"stats-area\">\n        <div class=\"single-stat\">\n          <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/600863c1738056517087return.png\" alt=\"\">\n          <div class=\"stat-number\">{{property.return}}% <span>Annual Returns</span></div>\n        </div>\n        <div class=\"single-stat justify-center\">\n          <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/600863c1738056517087return.png\" alt=\"\">\n          <div class=\"stat-number\">{{property.IRR}}% <span>IRR</span></div>\n        </div>\n      </div>\n      <div class=\"single-stat mt-15 w-100\">\n        <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/600863c1738056517087return.png\" alt=\"\">\n        <div class=\"stat-number\">{{property.growth}}% <span>Guaranteed annual growth</span></div>\n      </div>\n      <hr>\n      <div class=\"bottom-area\">\n        <div class=\"min-investment\">\n          <p>{{property.minInvestment}} Lac</p>\n          <div>Min.Investment</div>\n        </div>\n        <button class=\"button\" simpoButtonDirective [id]=\"(data?.id || '')+(data?.action?.buttons?.[0]?.id || '')\" [backgroundInfo]=\"styles?.background\"\n          [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"styles?.background?.accentColor\">Know\n          More</button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.card{padding:5px;border:2px solid rgba(0,0,0,.1)}.card img{height:37vh}.property-name{display:flex;align-items:center;justify-content:space-between}.p-15{padding:15px}.left-side{align-items:center;display:flex;gap:15px}.left-side img{height:65px;width:60px}.right-side{display:flex;gap:5px;color:#19a6c6;align-items:center}.stats-area{display:flex;margin-top:30px;justify-content:space-between}.single-stat{width:50%;display:flex;align-items:center;gap:20px}.single-stat img{height:20px;width:16px}.mt-15{margin-top:15px}hr{border-top:1px solid rgba(0,0,0,.7)}.stat-number{font-size:25px;color:#000000b3;font-weight:900;display:flex;align-items:center;gap:13px}.stat-number span{color:#000000b3;font-size:12px}.bottom-area{display:flex;justify-content:space-between;align-items:center}.min-investment{background:#f8a9381a;text-align:center;padding:.5rem 2rem;border-radius:5px}.min-investment p{margin-bottom:0;font-size:22px;font-weight:900}.min-investment div{color:#0006;font-size:14px;font-weight:600}.button{font-size:14px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:max-content!important;font-weight:600}.property-name-text{font-size:22px;font-weight:700}.location{font-size:11px;color:gray}.justify-center{justify-content:center}.row{row-gap:20px}.text-left{text-align:left}\n"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -17932,7 +17932,7 @@ class MovingTextComponent extends BaseSection {
         return "#ffffff";
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MovingTextComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MovingTextComponent, isStandalone: true, selector: "simpo-moving-text", inputs: { data: "data", edit: "edit", delete: "delete", customClass: "customClass", index: "index" }, usesInheritance: true, ngImport: i0, template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\" [attr.style]=\"customClass\">\r\n    <div class=\"slider-wrapper px-2 py-2 d-flex align-items-center justify-content-between\"\r\n        [style.background]=\"data?.styles?.headline?.color ? data?.styles?.headline?.color : data?.styles?.background?.color\">\r\n        <!-- Infinite Scroll Animation -->\r\n        <div class=\"slider-track w-100 d-flex justify-content-between align-items-center\"\r\n            *ngIf=\"data?.styles?.headline?.headlineAnimationType == 'InfiniteScroll'\">\r\n            <ng-container *ngFor=\"let item of data?.content?.listItem?.data; let i = index\">\r\n                <div class=\"sliding-text text-nowrap\" [style.color]=\"getTextColor(data?.styles?.headline?.color)\">\r\n                    {{item.inputText[0].value}}\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n        \r\n        <!-- Soft Transition Animation -->\r\n        <div *ngIf=\"data?.styles?.headline?.headlineAnimationType == 'SoftTransition'\" class=\"list-container\">\r\n            <ng-container *ngFor=\"let item of data?.content?.listItem?.data; let i = index\">\r\n                <div class=\"list-item text-nowrap\" \r\n                     [ngClass]=\"getItemClass(i)\"\r\n                     [class.visible]=\"isItemVisible(i)\"\r\n                     [style.color]=\"getTextColor(data?.styles?.headline?.color)\">\r\n                    {{item.inputText[0].value}}\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n\r\n        <!-- No Effect -->\r\n        <ng-container *ngIf=\"data?.styles?.headline?.headlineAnimationType == 'NoEffect'\">\r\n            <ng-container *ngFor=\"let item of data?.content?.listItem?.data\">\r\n                <div class=\"d-flex align-items-center justify-content-center w-100 text-nowrap\" \r\n                     [style.color]=\"getTextColor(data?.styles?.headline?.color)\">\r\n                    {{item.inputText[0].value}}\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n\r\n    <!-- Existing hover elements -->\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: [".main-container{position:relative;height:auto}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.slider-wrapper{position:relative;overflow:hidden}.slider-track{display:flex;gap:2rem;height:20px;width:max-content;animation:scrollLeft 30s linear infinite;animation-play-state:running;will-change:transform}.slider-track:hover{animation-play-state:paused}.sliding-text{flex-shrink:0;white-space:nowrap;padding:0 1rem;position:relative}@keyframes scrollLeft{0%{transform:translate(100%)}to{transform:translate(-100%)}}.list-container{position:relative;width:100%;height:20px;overflow:hidden;display:flex;align-items:center;justify-content:center}.list-item{position:absolute;width:100%;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .8s ease,transform .8s ease;text-align:center}.list-item.active{opacity:1;visibility:visible}.fade-in-left{animation:fadeInLeft .8s forwards}.fade-out-left{animation:fadeOutLeft .8s forwards}.fade-in-right{animation:fadeInRight .8s forwards}.fade-out-right{animation:fadeOutRight .8s forwards}@keyframes fadeInLeft{0%{opacity:0;transform:translate(-100px)}to{opacity:1;transform:translate(0)}}@keyframes fadeOutLeft{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-100px)}}@keyframes fadeInRight{0%{opacity:0;transform:translate(100px)}to{opacity:1;transform:translate(0)}}@keyframes fadeOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100px)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoElementsModule }, { 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: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MovingTextComponent, isStandalone: true, selector: "simpo-moving-text", inputs: { data: "data", edit: "edit", delete: "delete", customClass: "customClass", index: "index" }, usesInheritance: true, ngImport: i0, template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\" [attr.style]=\"customClass\">\n    <div class=\"slider-wrapper px-2 py-2 d-flex align-items-center justify-content-between\"\n        [style.background]=\"data?.styles?.headline?.color\">\n        \n        <!-- Infinite Scroll Animation -->\n        <div class=\"slider-track w-100 d-flex justify-content-between align-items-center\"\n            *ngIf=\"data?.styles?.headline?.headlineAnimationType == 'InfiniteScroll'\">\n            <ng-container *ngFor=\"let item of data?.content?.listItem?.data; let i = index\">\n                <div class=\"sliding-text text-nowrap\" [style.color]=\"getTextColor(data?.styles?.headline?.color)\">\n                    {{item.inputText[0].value}}\n                </div>\n            </ng-container>\n        </div>\n        \n        <!-- Soft Transition Animation -->\n        <div *ngIf=\"data?.styles?.headline?.headlineAnimationType == 'SoftTransition'\" class=\"list-container\">\n            <ng-container *ngFor=\"let item of data?.content?.listItem?.data; let i = index\">\n                <div class=\"list-item text-nowrap\" \n                     [ngClass]=\"getItemClass(i)\"\n                     [class.visible]=\"isItemVisible(i)\"\n                     [style.color]=\"getTextColor(data?.styles?.headline?.color)\">\n                    {{item.inputText[0].value}}\n                </div>\n            </ng-container>\n        </div>\n\n        <!-- No Effect -->\n        <ng-container *ngIf=\"data?.styles?.headline?.headlineAnimationType == 'NoEffect'\">\n            <ng-container *ngFor=\"let item of data?.content?.listItem?.data\">\n                <div class=\"d-flex align-items-center justify-content-center w-100 text-nowrap\" \n                     [style.color]=\"getTextColor(data?.styles?.headline?.color)\">\n                    {{item.inputText[0].value}}\n                </div>\n            </ng-container>\n        </ng-container>\n    </div>\n\n    <!-- Existing hover elements -->\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n</section>", styles: [".main-container{position:relative;height:auto}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.slider-wrapper{position:relative;overflow:hidden}.slider-track{display:flex;gap:2rem;height:20px;width:max-content;animation:scrollLeft 30s linear infinite;animation-play-state:running;will-change:transform}.slider-track:hover{animation-play-state:paused}.sliding-text{flex-shrink:0;white-space:nowrap;padding:0 1rem;position:relative}@keyframes scrollLeft{0%{transform:translate(100%)}to{transform:translate(-100%)}}.list-container{position:relative;width:100%;height:20px;overflow:hidden;display:flex;align-items:center;justify-content:center}.list-item{position:absolute;width:100%;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .8s ease,transform .8s ease;text-align:center}.list-item.active{opacity:1;visibility:visible}.fade-in-left{animation:fadeInLeft .8s forwards}.fade-out-left{animation:fadeOutLeft .8s forwards}.fade-in-right{animation:fadeInRight .8s forwards}.fade-out-right{animation:fadeOutRight .8s forwards}@keyframes fadeInLeft{0%{opacity:0;transform:translate(-100px)}to{opacity:1;transform:translate(0)}}@keyframes fadeOutLeft{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-100px)}}@keyframes fadeInRight{0%{opacity:0;transform:translate(100px)}to{opacity:1;transform:translate(0)}}@keyframes fadeOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100px)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoElementsModule }, { 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: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MovingTextComponent, decorators: [{
             type: Component,
@@ -17944,7 +17944,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SimpoHoverBorderDirective,
                         HoverDirective,
                         TextBackgroundDirectiveDirective,
-                    ], template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\" [attr.style]=\"customClass\">\r\n    <div class=\"slider-wrapper px-2 py-2 d-flex align-items-center justify-content-between\"\r\n        [style.background]=\"data?.styles?.headline?.color ? data?.styles?.headline?.color : data?.styles?.background?.color\">\r\n        <!-- Infinite Scroll Animation -->\r\n        <div class=\"slider-track w-100 d-flex justify-content-between align-items-center\"\r\n            *ngIf=\"data?.styles?.headline?.headlineAnimationType == 'InfiniteScroll'\">\r\n            <ng-container *ngFor=\"let item of data?.content?.listItem?.data; let i = index\">\r\n                <div class=\"sliding-text text-nowrap\" [style.color]=\"getTextColor(data?.styles?.headline?.color)\">\r\n                    {{item.inputText[0].value}}\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n        \r\n        <!-- Soft Transition Animation -->\r\n        <div *ngIf=\"data?.styles?.headline?.headlineAnimationType == 'SoftTransition'\" class=\"list-container\">\r\n            <ng-container *ngFor=\"let item of data?.content?.listItem?.data; let i = index\">\r\n                <div class=\"list-item text-nowrap\" \r\n                     [ngClass]=\"getItemClass(i)\"\r\n                     [class.visible]=\"isItemVisible(i)\"\r\n                     [style.color]=\"getTextColor(data?.styles?.headline?.color)\">\r\n                    {{item.inputText[0].value}}\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n\r\n        <!-- No Effect -->\r\n        <ng-container *ngIf=\"data?.styles?.headline?.headlineAnimationType == 'NoEffect'\">\r\n            <ng-container *ngFor=\"let item of data?.content?.listItem?.data\">\r\n                <div class=\"d-flex align-items-center justify-content-center w-100 text-nowrap\" \r\n                     [style.color]=\"getTextColor(data?.styles?.headline?.color)\">\r\n                    {{item.inputText[0].value}}\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n\r\n    <!-- Existing hover elements -->\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: [".main-container{position:relative;height:auto}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.slider-wrapper{position:relative;overflow:hidden}.slider-track{display:flex;gap:2rem;height:20px;width:max-content;animation:scrollLeft 30s linear infinite;animation-play-state:running;will-change:transform}.slider-track:hover{animation-play-state:paused}.sliding-text{flex-shrink:0;white-space:nowrap;padding:0 1rem;position:relative}@keyframes scrollLeft{0%{transform:translate(100%)}to{transform:translate(-100%)}}.list-container{position:relative;width:100%;height:20px;overflow:hidden;display:flex;align-items:center;justify-content:center}.list-item{position:absolute;width:100%;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .8s ease,transform .8s ease;text-align:center}.list-item.active{opacity:1;visibility:visible}.fade-in-left{animation:fadeInLeft .8s forwards}.fade-out-left{animation:fadeOutLeft .8s forwards}.fade-in-right{animation:fadeInRight .8s forwards}.fade-out-right{animation:fadeOutRight .8s forwards}@keyframes fadeInLeft{0%{opacity:0;transform:translate(-100px)}to{opacity:1;transform:translate(0)}}@keyframes fadeOutLeft{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-100px)}}@keyframes fadeInRight{0%{opacity:0;transform:translate(100px)}to{opacity:1;transform:translate(0)}}@keyframes fadeOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100px)}}\n"] }]
+                    ], template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\" [attr.style]=\"customClass\">\n    <div class=\"slider-wrapper px-2 py-2 d-flex align-items-center justify-content-between\"\n        [style.background]=\"data?.styles?.headline?.color\">\n        \n        <!-- Infinite Scroll Animation -->\n        <div class=\"slider-track w-100 d-flex justify-content-between align-items-center\"\n            *ngIf=\"data?.styles?.headline?.headlineAnimationType == 'InfiniteScroll'\">\n            <ng-container *ngFor=\"let item of data?.content?.listItem?.data; let i = index\">\n                <div class=\"sliding-text text-nowrap\" [style.color]=\"getTextColor(data?.styles?.headline?.color)\">\n                    {{item.inputText[0].value}}\n                </div>\n            </ng-container>\n        </div>\n        \n        <!-- Soft Transition Animation -->\n        <div *ngIf=\"data?.styles?.headline?.headlineAnimationType == 'SoftTransition'\" class=\"list-container\">\n            <ng-container *ngFor=\"let item of data?.content?.listItem?.data; let i = index\">\n                <div class=\"list-item text-nowrap\" \n                     [ngClass]=\"getItemClass(i)\"\n                     [class.visible]=\"isItemVisible(i)\"\n                     [style.color]=\"getTextColor(data?.styles?.headline?.color)\">\n                    {{item.inputText[0].value}}\n                </div>\n            </ng-container>\n        </div>\n\n        <!-- No Effect -->\n        <ng-container *ngIf=\"data?.styles?.headline?.headlineAnimationType == 'NoEffect'\">\n            <ng-container *ngFor=\"let item of data?.content?.listItem?.data\">\n                <div class=\"d-flex align-items-center justify-content-center w-100 text-nowrap\" \n                     [style.color]=\"getTextColor(data?.styles?.headline?.color)\">\n                    {{item.inputText[0].value}}\n                </div>\n            </ng-container>\n        </ng-container>\n    </div>\n\n    <!-- Existing hover elements -->\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n</section>", styles: [".main-container{position:relative;height:auto}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.slider-wrapper{position:relative;overflow:hidden}.slider-track{display:flex;gap:2rem;height:20px;width:max-content;animation:scrollLeft 30s linear infinite;animation-play-state:running;will-change:transform}.slider-track:hover{animation-play-state:paused}.sliding-text{flex-shrink:0;white-space:nowrap;padding:0 1rem;position:relative}@keyframes scrollLeft{0%{transform:translate(100%)}to{transform:translate(-100%)}}.list-container{position:relative;width:100%;height:20px;overflow:hidden;display:flex;align-items:center;justify-content:center}.list-item{position:absolute;width:100%;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .8s ease,transform .8s ease;text-align:center}.list-item.active{opacity:1;visibility:visible}.fade-in-left{animation:fadeInLeft .8s forwards}.fade-out-left{animation:fadeOutLeft .8s forwards}.fade-in-right{animation:fadeInRight .8s forwards}.fade-out-right{animation:fadeOutRight .8s forwards}@keyframes fadeInLeft{0%{opacity:0;transform:translate(-100px)}to{opacity:1;transform:translate(0)}}@keyframes fadeOutLeft{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-100px)}}@keyframes fadeInRight{0%{opacity:0;transform:translate(100px)}to{opacity:1;transform:translate(0)}}@keyframes fadeOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100px)}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], edit: [{
@@ -19911,7 +19911,7 @@ class CustomerReviewComponent {
         return (value / this.customerReviews?.length) * 100;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomerReviewComponent, deps: [{ token: i2$2.ActivatedRoute }, { token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomerReviewComponent, isStandalone: true, selector: "simpo-customer-review", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", nextComponentColor: "nextComponentColor" }, ngImport: i0, template: "<section class=\"mainContainer\" style=\"gap: 20px;\" *ngIf=\"customerReviews.length\">\r\n    <div class=\"left-panel\">\r\n        <h3 [style.color]=\"data?.styles?.background?.accentColor\">Customer Reviews</h3>\r\n        <p-rating [(ngModel)]=\"totalRating\" [cancel]=\"false\" [readonly]=\"true\" />\r\n        <div class=\"stars\">\r\n            <ng-container *ngFor=\"let rating of overallRatingCount | keyvalue; let idx = index\">\r\n                <div class=\"d-flex\" style=\"gap: 5px; margin: 10px 0px\">\r\n                    <div class=\"count\">{{rating.key}}</div>\r\n                    <div class=\"rating-bar\">\r\n                        <p-progressBar [value]=\"getPercentage(rating?.value)\"  [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\" [showValue]=\"false\" />\r\n                    </div>\r\n                    <div class=\"count\">{{getPercentage(rating?.value)}}%</div>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"right-panel\">\r\n        <h3 [style.color]=\"data?.styles?.background?.accentColor\">Top Reviews</h3>\r\n        <div class=\"customer-reviews\">\r\n            <ng-container *ngFor=\"let review of customerReviews\">\r\n                <div class=\"d-flex align-item-center\" style=\"gap: 5px;\">\r\n                    <div class=\"name-tag\">{{review.userName | slice: 0:1}}</div>\r\n                    <span style=\"position: relative; top: 5px;\">{{review.userName | titlecase}}</span>\r\n                </div>\r\n                <div class=\"d-flex my-2\" style=\"width: fit-content; height: 20px; gap: 10px;\">            \r\n                    <p-rating [(ngModel)]=\"review.rating\" [cancel]=\"false\" [readonly]=\"true\" />\r\n                    <div>{{review.title | titlecase}}</div>\r\n                </div>\r\n                <div class=\"date\">{{ review.createdTimeStamp | date }}</div>\r\n                <div class=\"description\">{{review.review | titlecase}}</div>\r\n                <hr>\r\n            </ng-container>\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\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container> -->\r\n\r\n</section>", styles: [".mainContainer{display:flex;justify-content:space-around}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.rating-bar{width:300px}h3{margin-bottom:20px}.count{width:20px}.left-panel{width:20%}.right-panel{width:70%}.description{width:80%}.name-tag{display:flex;justify-content:center;align-items:center;padding:5px;border-radius:50%;background-color:#3b82f6;color:#fff;height:30px;width:30px}.customer-reviews{padding-bottom:10px;padding-left:10px}@media screen and (max-width: 475px){.mainContainer{flex-direction:column!important}.left-panel{width:95%;margin:auto}.right-panel{width:95%;margin:auto}.right-panel .description{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: RatingModule }, { kind: "component", type: i3$2.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { 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: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.SlicePipe, name: "slice" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i6$2.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "styleClass", "style", "unit", "mode", "color"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomerReviewComponent, isStandalone: true, selector: "simpo-customer-review", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", nextComponentColor: "nextComponentColor" }, ngImport: i0, template: "<section class=\"mainContainer\" style=\"gap: 20px;\" *ngIf=\"customerReviews.length\">\n    <div class=\"left-panel\">\n        <h3 [style.color]=\"data?.styles?.background?.accentColor\">Customer Reviews</h3>\n        <p-rating [(ngModel)]=\"totalRating\" [cancel]=\"false\" [readonly]=\"true\" />\n        <div class=\"stars\">\n            <ng-container *ngFor=\"let rating of overallRatingCount | keyvalue; let idx = index\">\n                <div class=\"d-flex\" style=\"gap: 5px; margin: 10px 0px\">\n                    <div class=\"count\">{{rating.key}}</div>\n                    <div class=\"rating-bar\">\n                        <p-progressBar [value]=\"getPercentage(rating?.value)\"  [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\" [showValue]=\"false\" />\n                    </div>\n                    <div class=\"count\">{{getPercentage(rating?.value)}}%</div>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n    <div class=\"right-panel\">\n        <h3 [style.color]=\"data?.styles?.background?.accentColor\">Top Reviews</h3>\n        <div class=\"customer-reviews\">\n            <ng-container *ngFor=\"let review of customerReviews\">\n                <div class=\"d-flex align-item-center\" style=\"gap: 5px;\">\n                    <div class=\"name-tag\">{{review.userName | slice: 0:1}}</div>\n                    <span style=\"position: relative; top: 5px;\">{{review.userName | titlecase}}</span>\n                </div>\n                <div class=\"d-flex my-2\" style=\"width: fit-content; height: 20px; gap: 10px;\">            \n                    <p-rating [(ngModel)]=\"review.rating\" [cancel]=\"false\" [readonly]=\"true\" />\n                    <div>{{review.title | titlecase}}</div>\n                </div>\n                <div class=\"date\">{{ review.createdTimeStamp | date }}</div>\n                <div class=\"description\">{{review.review | titlecase}}</div>\n                <hr>\n            </ng-container>\n        </div>\n    </div>\n    \n  <!-- <ng-container *ngIf=\"style?.devider?.display\">\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n  </ng-container> -->\n\n</section>", styles: [".mainContainer{display:flex;justify-content:space-around}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.rating-bar{width:300px}h3{margin-bottom:20px}.count{width:20px}.left-panel{width:20%}.right-panel{width:70%}.description{width:80%}.name-tag{display:flex;justify-content:center;align-items:center;padding:5px;border-radius:50%;background-color:#3b82f6;color:#fff;height:30px;width:30px}.customer-reviews{padding-bottom:10px;padding-left:10px}@media screen and (max-width: 475px){.mainContainer{flex-direction:column!important}.left-panel{width:95%;margin:auto}.right-panel{width:95%;margin:auto}.right-panel .description{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: RatingModule }, { kind: "component", type: i3$2.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { 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: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.SlicePipe, name: "slice" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i6$2.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "styleClass", "style", "unit", "mode", "color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomerReviewComponent, decorators: [{
             type: Component,
@@ -19920,7 +19920,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         FormsModule,
                         CommonModule,
                         ProgressBarModule, SvgDividerComponent
-                    ], template: "<section class=\"mainContainer\" style=\"gap: 20px;\" *ngIf=\"customerReviews.length\">\r\n    <div class=\"left-panel\">\r\n        <h3 [style.color]=\"data?.styles?.background?.accentColor\">Customer Reviews</h3>\r\n        <p-rating [(ngModel)]=\"totalRating\" [cancel]=\"false\" [readonly]=\"true\" />\r\n        <div class=\"stars\">\r\n            <ng-container *ngFor=\"let rating of overallRatingCount | keyvalue; let idx = index\">\r\n                <div class=\"d-flex\" style=\"gap: 5px; margin: 10px 0px\">\r\n                    <div class=\"count\">{{rating.key}}</div>\r\n                    <div class=\"rating-bar\">\r\n                        <p-progressBar [value]=\"getPercentage(rating?.value)\"  [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\" [showValue]=\"false\" />\r\n                    </div>\r\n                    <div class=\"count\">{{getPercentage(rating?.value)}}%</div>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"right-panel\">\r\n        <h3 [style.color]=\"data?.styles?.background?.accentColor\">Top Reviews</h3>\r\n        <div class=\"customer-reviews\">\r\n            <ng-container *ngFor=\"let review of customerReviews\">\r\n                <div class=\"d-flex align-item-center\" style=\"gap: 5px;\">\r\n                    <div class=\"name-tag\">{{review.userName | slice: 0:1}}</div>\r\n                    <span style=\"position: relative; top: 5px;\">{{review.userName | titlecase}}</span>\r\n                </div>\r\n                <div class=\"d-flex my-2\" style=\"width: fit-content; height: 20px; gap: 10px;\">            \r\n                    <p-rating [(ngModel)]=\"review.rating\" [cancel]=\"false\" [readonly]=\"true\" />\r\n                    <div>{{review.title | titlecase}}</div>\r\n                </div>\r\n                <div class=\"date\">{{ review.createdTimeStamp | date }}</div>\r\n                <div class=\"description\">{{review.review | titlecase}}</div>\r\n                <hr>\r\n            </ng-container>\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\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container> -->\r\n\r\n</section>", styles: [".mainContainer{display:flex;justify-content:space-around}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.rating-bar{width:300px}h3{margin-bottom:20px}.count{width:20px}.left-panel{width:20%}.right-panel{width:70%}.description{width:80%}.name-tag{display:flex;justify-content:center;align-items:center;padding:5px;border-radius:50%;background-color:#3b82f6;color:#fff;height:30px;width:30px}.customer-reviews{padding-bottom:10px;padding-left:10px}@media screen and (max-width: 475px){.mainContainer{flex-direction:column!important}.left-panel{width:95%;margin:auto}.right-panel{width:95%;margin:auto}.right-panel .description{width:100%}}\n"] }]
+                    ], template: "<section class=\"mainContainer\" style=\"gap: 20px;\" *ngIf=\"customerReviews.length\">\n    <div class=\"left-panel\">\n        <h3 [style.color]=\"data?.styles?.background?.accentColor\">Customer Reviews</h3>\n        <p-rating [(ngModel)]=\"totalRating\" [cancel]=\"false\" [readonly]=\"true\" />\n        <div class=\"stars\">\n            <ng-container *ngFor=\"let rating of overallRatingCount | keyvalue; let idx = index\">\n                <div class=\"d-flex\" style=\"gap: 5px; margin: 10px 0px\">\n                    <div class=\"count\">{{rating.key}}</div>\n                    <div class=\"rating-bar\">\n                        <p-progressBar [value]=\"getPercentage(rating?.value)\"  [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\" [showValue]=\"false\" />\n                    </div>\n                    <div class=\"count\">{{getPercentage(rating?.value)}}%</div>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n    <div class=\"right-panel\">\n        <h3 [style.color]=\"data?.styles?.background?.accentColor\">Top Reviews</h3>\n        <div class=\"customer-reviews\">\n            <ng-container *ngFor=\"let review of customerReviews\">\n                <div class=\"d-flex align-item-center\" style=\"gap: 5px;\">\n                    <div class=\"name-tag\">{{review.userName | slice: 0:1}}</div>\n                    <span style=\"position: relative; top: 5px;\">{{review.userName | titlecase}}</span>\n                </div>\n                <div class=\"d-flex my-2\" style=\"width: fit-content; height: 20px; gap: 10px;\">            \n                    <p-rating [(ngModel)]=\"review.rating\" [cancel]=\"false\" [readonly]=\"true\" />\n                    <div>{{review.title | titlecase}}</div>\n                </div>\n                <div class=\"date\">{{ review.createdTimeStamp | date }}</div>\n                <div class=\"description\">{{review.review | titlecase}}</div>\n                <hr>\n            </ng-container>\n        </div>\n    </div>\n    \n  <!-- <ng-container *ngIf=\"style?.devider?.display\">\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n  </ng-container> -->\n\n</section>", styles: [".mainContainer{display:flex;justify-content:space-around}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.rating-bar{width:300px}h3{margin-bottom:20px}.count{width:20px}.left-panel{width:20%}.right-panel{width:70%}.description{width:80%}.name-tag{display:flex;justify-content:center;align-items:center;padding:5px;border-radius:50%;background-color:#3b82f6;color:#fff;height:30px;width:30px}.customer-reviews{padding-bottom:10px;padding-left:10px}@media screen and (max-width: 475px){.mainContainer{flex-direction:column!important}.left-panel{width:95%;margin:auto}.right-panel{width:95%;margin:auto}.right-panel .description{width:100%}}\n"] }]
         }], ctorParameters: () => [{ type: i2$2.ActivatedRoute }, { type: RestService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -22245,7 +22245,7 @@ class CheckoutComponent extends BaseSection {
         return BUSINESS_CONSTANTS.CURRENCY;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckoutComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CheckoutComponent, isStandalone: true, selector: "simpo-checkout", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\"  [attr.style]=\"customClass\">\r\n    <div class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n      <div class=\"row\">\r\n        <div class=\"col-md-7 col-12\" *ngIf=\"editDeliveryAddress\">\r\n          <div class=\"shipping-label heading-large\">Shipping To</div>\r\n          <div class=\"row\">\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">Name</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.userName\" type=\"text\" placeholder=\"Enter Name\"\r\n                class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">Mobile Number</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.mobile\" type=\"number\" placeholder=\"Enter number\"\r\n                class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">Email</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.email\" type=\"email\" placeholder=\"Enter email\"\r\n                class=\"input-field\">\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"shipping-label\" style=\"margin-top: 15px;\">Shipping Address</div>\r\n          <div class=\"row\">\r\n            <div class=\"col-12 input-parent\">\r\n              <label for=\"\">Address</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.addressLine1\" type=\"text\"\r\n                placeholder=\"Flat/House No, Building, Colony\" class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">Locality/Area</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.localityName\" type=\"text\"\r\n                placeholder=\"Eg: Jaybheri Enclave, Gachibowli\" class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">Landmark</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.landmark\" type=\"text\"\r\n                placeholder=\"Eg: Near SBI Bank\" class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">Pincode</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.zipCode\" type=\"number\" placeholder=\"Eg: 500032\"\r\n                class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">City</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.cityName\" type=\"text\"\r\n                placeholder=\"Eg: Hyderabad\" class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">State</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.stateName\" type=\"text\"\r\n                placeholder=\"Eg: Telangana\" class=\"input-field\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-md-7 col-12\" *ngIf=\"!editDeliveryAddress\">\r\n          <div class=\"shipping-label\">Delivery Address</div>\r\n          <div class=\"delivery-address\">\r\n            <div style=\"position: absolute;right: 15px;\">\r\n              <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/library-media/813827c1709186499689edit%201.png\"\r\n                alt=\"\" style=\"cursor: pointer;\" (click)=\"editDeliveryAddress = true\">\r\n            </div>\r\n            <div class=\"userName\">{{responseData?.userDetails.userName}}</div>\r\n            <div class=\"user-details\" style=\"margin-top: 5px;\">\r\n              {{responseData?.userDetails.deliveryAddress?.addressLine1}},\r\n              {{responseData?.userDetails.deliveryAddress?.localityName}}</div>\r\n            <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.cityName}},\r\n              {{responseData?.userDetails.deliveryAddress?.stateName}}</div>\r\n            <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.countryName}} -\r\n              {{responseData?.userDetails.deliveryAddress?.zipCode}}</div>\r\n            <div class=\"user-details\" style=\"margin-top: 5px;\">Phone : <span\r\n                style=\"font-weight: 500;\">{{responseData?.userDetails.mobile}}</span></div>\r\n          </div>\r\n        </div>\r\n        <div class=\"offset-md-1 col-md-4 col-12 right-section\">\r\n          <div class=\"shipping-label heading-large lh-normal\">\r\n            Price Details\r\n          </div>\r\n          <div class=\"price-details\">\r\n            <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalNetValue\">\r\n              <div class=\"price-type\">Total MRP</div>\r\n              <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.totalNetValue}}</div>\r\n            </div>\r\n            <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalTax\">\r\n              <div class=\"price-type\">Total Tax</div>\r\n              <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData?.billdetails?.totalTax}}</div>\r\n            </div>\r\n            <div class=\"price-parent-block\"\r\n              *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n              <div class=\"price-type\">Delivery Charge</div>\r\n              <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges}}</div>\r\n            </div>\r\n            <hr>\r\n            <div class=\"price-parent-block\" *ngIf=\"responseData?.totalAmount\">\r\n              <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n              <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span> {{responseData.totalAmount}}</div>\r\n            </div>\r\n\r\n            <div class=\"button-parent\">\r\n              <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\r\n                [color]=\"styles?.background?.accentColor\" (click)=\"placeOrder()\">{{content?.button}}</button>\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\" [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\r\n  </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n", styles: [".container{margin-top:30px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.shipping-label{font-weight:600;font-size:18px;color:#141514;margin-bottom:5px}.input-parent{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}.input-label{font-family:Inter;font-weight:400;font-size:14px;color:#141514}.input-field{height:40px;border:2px solid#D0D5DD;border-radius:5px;padding-left:10px;font-size:14px;outline:none}.my-bag{font-size:16px;font-weight:600;font-family:Poppins;color:#000}.my-bag span{color:#939393}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px;font-family:Poppins}.coupon-desc{color:#939393;font-size:12px;font-family:Poppins;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600;font-family:Poppins}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:14px;font-family:Poppins;color:#434443}.price-value{font-weight:500;font-family:Poppins;font-size:16px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}.button-parent button{padding-top:7px!important;padding-bottom:7px!important;font-size:16px!important}.delivery-address{border:1px solid#D0D5DD;padding:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;position:relative}.userName{font-size:18px;font-weight:500;font-family:Poppins;color:#000}.user-details{font-weight:400;font-size:16px;font-family:Poppins}.lh-normal{line-height:normal}hr{border:1px solid #E8E8E8}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media only screen and (max-width : 475px){.right-section{margin-top:15px}label{margin-bottom:6px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CheckoutComponent, isStandalone: true, selector: "simpo-checkout", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\"  [attr.style]=\"customClass\">\n    <div class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n      <div class=\"row\">\n        <div class=\"col-md-7 col-12\" *ngIf=\"editDeliveryAddress\">\n          <div class=\"shipping-label heading-large\">Shipping To</div>\n          <div class=\"row\">\n            <div class=\"col-md-6 col-12 input-parent\">\n              <label for=\"\">Name</label>\n              <input [(ngModel)]=\"responseData.userDetails.userName\" type=\"text\" placeholder=\"Enter Name\"\n                class=\"input-field\">\n            </div>\n            <div class=\"col-md-6 col-12 input-parent\">\n              <label for=\"\">Mobile Number</label>\n              <input [(ngModel)]=\"responseData.userDetails.mobile\" type=\"number\" placeholder=\"Enter number\"\n                class=\"input-field\">\n            </div>\n            <div class=\"col-md-6 col-12 input-parent\">\n              <label for=\"\">Email</label>\n              <input [(ngModel)]=\"responseData.userDetails.email\" type=\"email\" placeholder=\"Enter email\"\n                class=\"input-field\">\n            </div>\n          </div>\n\n          <div class=\"shipping-label\" style=\"margin-top: 15px;\">Shipping Address</div>\n          <div class=\"row\">\n            <div class=\"col-12 input-parent\">\n              <label for=\"\">Address</label>\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.addressLine1\" type=\"text\"\n                placeholder=\"Flat/House No, Building, Colony\" class=\"input-field\">\n            </div>\n            <div class=\"col-md-6 col-12 input-parent\">\n              <label for=\"\">Locality/Area</label>\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.localityName\" type=\"text\"\n                placeholder=\"Eg: Jaybheri Enclave, Gachibowli\" class=\"input-field\">\n            </div>\n            <div class=\"col-md-6 col-12 input-parent\">\n              <label for=\"\">Landmark</label>\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.landmark\" type=\"text\"\n                placeholder=\"Eg: Near SBI Bank\" class=\"input-field\">\n            </div>\n            <div class=\"col-md-6 col-12 input-parent\">\n              <label for=\"\">Pincode</label>\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.zipCode\" type=\"number\" placeholder=\"Eg: 500032\"\n                class=\"input-field\">\n            </div>\n            <div class=\"col-md-6 col-12 input-parent\">\n              <label for=\"\">City</label>\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.cityName\" type=\"text\"\n                placeholder=\"Eg: Hyderabad\" class=\"input-field\">\n            </div>\n            <div class=\"col-md-6 col-12 input-parent\">\n              <label for=\"\">State</label>\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.stateName\" type=\"text\"\n                placeholder=\"Eg: Telangana\" class=\"input-field\">\n            </div>\n          </div>\n        </div>\n        <div class=\"col-md-7 col-12\" *ngIf=\"!editDeliveryAddress\">\n          <div class=\"shipping-label\">Delivery Address</div>\n          <div class=\"delivery-address\">\n            <div style=\"position: absolute;right: 15px;\">\n              <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/library-media/813827c1709186499689edit%201.png\"\n                alt=\"\" style=\"cursor: pointer;\" (click)=\"editDeliveryAddress = true\">\n            </div>\n            <div class=\"userName\">{{responseData?.userDetails.userName}}</div>\n            <div class=\"user-details\" style=\"margin-top: 5px;\">\n              {{responseData?.userDetails.deliveryAddress?.addressLine1}},\n              {{responseData?.userDetails.deliveryAddress?.localityName}}</div>\n            <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.cityName}},\n              {{responseData?.userDetails.deliveryAddress?.stateName}}</div>\n            <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.countryName}} -\n              {{responseData?.userDetails.deliveryAddress?.zipCode}}</div>\n            <div class=\"user-details\" style=\"margin-top: 5px;\">Phone : <span\n                style=\"font-weight: 500;\">{{responseData?.userDetails.mobile}}</span></div>\n          </div>\n        </div>\n        <div class=\"offset-md-1 col-md-4 col-12 right-section\">\n          <div class=\"shipping-label heading-large lh-normal\">\n            Price Details\n          </div>\n          <div class=\"price-details\">\n            <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalNetValue\">\n              <div class=\"price-type\">Total MRP</div>\n              <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.totalNetValue}}</div>\n            </div>\n            <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalTax\">\n              <div class=\"price-type\">Total Tax</div>\n              <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData?.billdetails?.totalTax}}</div>\n            </div>\n            <div class=\"price-parent-block\"\n              *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\n              <div class=\"price-type\">Delivery Charge</div>\n              <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges}}</div>\n            </div>\n            <hr>\n            <div class=\"price-parent-block\" *ngIf=\"responseData?.totalAmount\">\n              <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\n              <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span> {{responseData.totalAmount}}</div>\n            </div>\n\n            <div class=\"button-parent\">\n              <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\n                [color]=\"styles?.background?.accentColor\" (click)=\"placeOrder()\">{{content?.button}}</button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n  <ng-container *ngIf=\"style?.devider?.display\">\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n  </ng-container>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n\n  </section>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n", styles: [".container{margin-top:30px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.shipping-label{font-weight:600;font-size:18px;color:#141514;margin-bottom:5px}.input-parent{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}.input-label{font-family:Inter;font-weight:400;font-size:14px;color:#141514}.input-field{height:40px;border:2px solid#D0D5DD;border-radius:5px;padding-left:10px;font-size:14px;outline:none}.my-bag{font-size:16px;font-weight:600;font-family:Poppins;color:#000}.my-bag span{color:#939393}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px;font-family:Poppins}.coupon-desc{color:#939393;font-size:12px;font-family:Poppins;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600;font-family:Poppins}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:14px;font-family:Poppins;color:#434443}.price-value{font-weight:500;font-family:Poppins;font-size:16px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}.button-parent button{padding-top:7px!important;padding-bottom:7px!important;font-size:16px!important}.delivery-address{border:1px solid#D0D5DD;padding:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;position:relative}.userName{font-size:18px;font-weight:500;font-family:Poppins;color:#000}.user-details{font-weight:400;font-size:16px;font-family:Poppins}.lh-normal{line-height:normal}hr{border:1px solid #E8E8E8}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media only screen and (max-width : 475px){.right-section{margin-top:15px}label{margin-bottom:6px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: 
                 //DIRECTIVE
                 ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }] }); }
 }
@@ -22258,7 +22258,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         AnimationDirective,
                         ContentFitDirective,
                         HoverDirective, SvgDividerComponent
-                    ], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\"  [attr.style]=\"customClass\">\r\n    <div class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n      <div class=\"row\">\r\n        <div class=\"col-md-7 col-12\" *ngIf=\"editDeliveryAddress\">\r\n          <div class=\"shipping-label heading-large\">Shipping To</div>\r\n          <div class=\"row\">\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">Name</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.userName\" type=\"text\" placeholder=\"Enter Name\"\r\n                class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">Mobile Number</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.mobile\" type=\"number\" placeholder=\"Enter number\"\r\n                class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">Email</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.email\" type=\"email\" placeholder=\"Enter email\"\r\n                class=\"input-field\">\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"shipping-label\" style=\"margin-top: 15px;\">Shipping Address</div>\r\n          <div class=\"row\">\r\n            <div class=\"col-12 input-parent\">\r\n              <label for=\"\">Address</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.addressLine1\" type=\"text\"\r\n                placeholder=\"Flat/House No, Building, Colony\" class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">Locality/Area</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.localityName\" type=\"text\"\r\n                placeholder=\"Eg: Jaybheri Enclave, Gachibowli\" class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">Landmark</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.landmark\" type=\"text\"\r\n                placeholder=\"Eg: Near SBI Bank\" class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">Pincode</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.zipCode\" type=\"number\" placeholder=\"Eg: 500032\"\r\n                class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">City</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.cityName\" type=\"text\"\r\n                placeholder=\"Eg: Hyderabad\" class=\"input-field\">\r\n            </div>\r\n            <div class=\"col-md-6 col-12 input-parent\">\r\n              <label for=\"\">State</label>\r\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.stateName\" type=\"text\"\r\n                placeholder=\"Eg: Telangana\" class=\"input-field\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-md-7 col-12\" *ngIf=\"!editDeliveryAddress\">\r\n          <div class=\"shipping-label\">Delivery Address</div>\r\n          <div class=\"delivery-address\">\r\n            <div style=\"position: absolute;right: 15px;\">\r\n              <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/library-media/813827c1709186499689edit%201.png\"\r\n                alt=\"\" style=\"cursor: pointer;\" (click)=\"editDeliveryAddress = true\">\r\n            </div>\r\n            <div class=\"userName\">{{responseData?.userDetails.userName}}</div>\r\n            <div class=\"user-details\" style=\"margin-top: 5px;\">\r\n              {{responseData?.userDetails.deliveryAddress?.addressLine1}},\r\n              {{responseData?.userDetails.deliveryAddress?.localityName}}</div>\r\n            <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.cityName}},\r\n              {{responseData?.userDetails.deliveryAddress?.stateName}}</div>\r\n            <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.countryName}} -\r\n              {{responseData?.userDetails.deliveryAddress?.zipCode}}</div>\r\n            <div class=\"user-details\" style=\"margin-top: 5px;\">Phone : <span\r\n                style=\"font-weight: 500;\">{{responseData?.userDetails.mobile}}</span></div>\r\n          </div>\r\n        </div>\r\n        <div class=\"offset-md-1 col-md-4 col-12 right-section\">\r\n          <div class=\"shipping-label heading-large lh-normal\">\r\n            Price Details\r\n          </div>\r\n          <div class=\"price-details\">\r\n            <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalNetValue\">\r\n              <div class=\"price-type\">Total MRP</div>\r\n              <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.totalNetValue}}</div>\r\n            </div>\r\n            <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalTax\">\r\n              <div class=\"price-type\">Total Tax</div>\r\n              <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData?.billdetails?.totalTax}}</div>\r\n            </div>\r\n            <div class=\"price-parent-block\"\r\n              *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n              <div class=\"price-type\">Delivery Charge</div>\r\n              <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges}}</div>\r\n            </div>\r\n            <hr>\r\n            <div class=\"price-parent-block\" *ngIf=\"responseData?.totalAmount\">\r\n              <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n              <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span> {{responseData.totalAmount}}</div>\r\n            </div>\r\n\r\n            <div class=\"button-parent\">\r\n              <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\r\n                [color]=\"styles?.background?.accentColor\" (click)=\"placeOrder()\">{{content?.button}}</button>\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\" [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\r\n  </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n", styles: [".container{margin-top:30px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.shipping-label{font-weight:600;font-size:18px;color:#141514;margin-bottom:5px}.input-parent{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}.input-label{font-family:Inter;font-weight:400;font-size:14px;color:#141514}.input-field{height:40px;border:2px solid#D0D5DD;border-radius:5px;padding-left:10px;font-size:14px;outline:none}.my-bag{font-size:16px;font-weight:600;font-family:Poppins;color:#000}.my-bag span{color:#939393}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px;font-family:Poppins}.coupon-desc{color:#939393;font-size:12px;font-family:Poppins;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600;font-family:Poppins}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:14px;font-family:Poppins;color:#434443}.price-value{font-weight:500;font-family:Poppins;font-size:16px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}.button-parent button{padding-top:7px!important;padding-bottom:7px!important;font-size:16px!important}.delivery-address{border:1px solid#D0D5DD;padding:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;position:relative}.userName{font-size:18px;font-weight:500;font-family:Poppins;color:#000}.user-details{font-weight:400;font-size:16px;font-family:Poppins}.lh-normal{line-height:normal}hr{border:1px solid #E8E8E8}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media only screen and (max-width : 475px){.right-section{margin-top:15px}label{margin-bottom:6px}}\n"] }]
+                    ], template: "<ng-container *ngIf=\"!isLoading\">\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\"  [attr.style]=\"customClass\">\n    <div class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\n      <div class=\"row\">\n        <div class=\"col-md-7 col-12\" *ngIf=\"editDeliveryAddress\">\n          <div class=\"shipping-label heading-large\">Shipping To</div>\n          <div class=\"row\">\n            <div class=\"col-md-6 col-12 input-parent\">\n              <label for=\"\">Name</label>\n              <input [(ngModel)]=\"responseData.userDetails.userName\" type=\"text\" placeholder=\"Enter Name\"\n                class=\"input-field\">\n            </div>\n            <div class=\"col-md-6 col-12 input-parent\">\n              <label for=\"\">Mobile Number</label>\n              <input [(ngModel)]=\"responseData.userDetails.mobile\" type=\"number\" placeholder=\"Enter number\"\n                class=\"input-field\">\n            </div>\n            <div class=\"col-md-6 col-12 input-parent\">\n              <label for=\"\">Email</label>\n              <input [(ngModel)]=\"responseData.userDetails.email\" type=\"email\" placeholder=\"Enter email\"\n                class=\"input-field\">\n            </div>\n          </div>\n\n          <div class=\"shipping-label\" style=\"margin-top: 15px;\">Shipping Address</div>\n          <div class=\"row\">\n            <div class=\"col-12 input-parent\">\n              <label for=\"\">Address</label>\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.addressLine1\" type=\"text\"\n                placeholder=\"Flat/House No, Building, Colony\" class=\"input-field\">\n            </div>\n            <div class=\"col-md-6 col-12 input-parent\">\n              <label for=\"\">Locality/Area</label>\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.localityName\" type=\"text\"\n                placeholder=\"Eg: Jaybheri Enclave, Gachibowli\" class=\"input-field\">\n            </div>\n            <div class=\"col-md-6 col-12 input-parent\">\n              <label for=\"\">Landmark</label>\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.landmark\" type=\"text\"\n                placeholder=\"Eg: Near SBI Bank\" class=\"input-field\">\n            </div>\n            <div class=\"col-md-6 col-12 input-parent\">\n              <label for=\"\">Pincode</label>\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.zipCode\" type=\"number\" placeholder=\"Eg: 500032\"\n                class=\"input-field\">\n            </div>\n            <div class=\"col-md-6 col-12 input-parent\">\n              <label for=\"\">City</label>\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.cityName\" type=\"text\"\n                placeholder=\"Eg: Hyderabad\" class=\"input-field\">\n            </div>\n            <div class=\"col-md-6 col-12 input-parent\">\n              <label for=\"\">State</label>\n              <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.stateName\" type=\"text\"\n                placeholder=\"Eg: Telangana\" class=\"input-field\">\n            </div>\n          </div>\n        </div>\n        <div class=\"col-md-7 col-12\" *ngIf=\"!editDeliveryAddress\">\n          <div class=\"shipping-label\">Delivery Address</div>\n          <div class=\"delivery-address\">\n            <div style=\"position: absolute;right: 15px;\">\n              <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/library-media/813827c1709186499689edit%201.png\"\n                alt=\"\" style=\"cursor: pointer;\" (click)=\"editDeliveryAddress = true\">\n            </div>\n            <div class=\"userName\">{{responseData?.userDetails.userName}}</div>\n            <div class=\"user-details\" style=\"margin-top: 5px;\">\n              {{responseData?.userDetails.deliveryAddress?.addressLine1}},\n              {{responseData?.userDetails.deliveryAddress?.localityName}}</div>\n            <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.cityName}},\n              {{responseData?.userDetails.deliveryAddress?.stateName}}</div>\n            <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.countryName}} -\n              {{responseData?.userDetails.deliveryAddress?.zipCode}}</div>\n            <div class=\"user-details\" style=\"margin-top: 5px;\">Phone : <span\n                style=\"font-weight: 500;\">{{responseData?.userDetails.mobile}}</span></div>\n          </div>\n        </div>\n        <div class=\"offset-md-1 col-md-4 col-12 right-section\">\n          <div class=\"shipping-label heading-large lh-normal\">\n            Price Details\n          </div>\n          <div class=\"price-details\">\n            <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalNetValue\">\n              <div class=\"price-type\">Total MRP</div>\n              <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.totalNetValue}}</div>\n            </div>\n            <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalTax\">\n              <div class=\"price-type\">Total Tax</div>\n              <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData?.billdetails?.totalTax}}</div>\n            </div>\n            <div class=\"price-parent-block\"\n              *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\n              <div class=\"price-type\">Delivery Charge</div>\n              <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges}}</div>\n            </div>\n            <hr>\n            <div class=\"price-parent-block\" *ngIf=\"responseData?.totalAmount\">\n              <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\n              <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span> {{responseData.totalAmount}}</div>\n            </div>\n\n            <div class=\"button-parent\">\n              <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [backgroundInfo]=\"styles?.background\"\n                [color]=\"styles?.background?.accentColor\" (click)=\"placeOrder()\">{{content?.button}}</button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n  <ng-container *ngIf=\"style?.devider?.display\">\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n  </ng-container>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n\n  </section>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n  width: '100%',\n  height: '40vh',\n  'border-radius': '10px',\n  'position': 'relative',\n  'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n", styles: [".container{margin-top:30px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.shipping-label{font-weight:600;font-size:18px;color:#141514;margin-bottom:5px}.input-parent{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}.input-label{font-family:Inter;font-weight:400;font-size:14px;color:#141514}.input-field{height:40px;border:2px solid#D0D5DD;border-radius:5px;padding-left:10px;font-size:14px;outline:none}.my-bag{font-size:16px;font-weight:600;font-family:Poppins;color:#000}.my-bag span{color:#939393}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px;font-family:Poppins}.coupon-desc{color:#939393;font-size:12px;font-family:Poppins;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600;font-family:Poppins}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:14px;font-family:Poppins;color:#434443}.price-value{font-weight:500;font-family:Poppins;font-size:16px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}.button-parent button{padding-top:7px!important;padding-bottom:7px!important;font-size:16px!important}.delivery-address{border:1px solid#D0D5DD;padding:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;position:relative}.userName{font-size:18px;font-weight:500;font-family:Poppins;color:#000}.user-details{font-weight:400;font-size:16px;font-family:Poppins}.lh-normal{line-height:normal}hr{border:1px solid #E8E8E8}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media only screen and (max-width : 475px){.right-section{margin-top:15px}label{margin-bottom:6px}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], responseData: [{
@@ -22784,7 +22784,7 @@ class UserBasicInfoComponent {
         return this.email?.includes("@") && this.email.includes(".com") || (this.email?.length == 0);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserBasicInfoComponent, deps: [{ token: RestService }, { token: i2$2.Router }, { token: i1$2.MatDialogRef }, { token: StorageServiceService }, { token: i6$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserBasicInfoComponent, isStandalone: true, selector: "simpo-user-basic-info", providers: [MessageService], ngImport: i0, template: "<section style=\"padding: 20px\" class=\"position-relative\">\r\n    <div class=\"d-flex flex-wrap justify-content-between\">\r\n        <div class=\"form-control-group\">\r\n            <div class=\"label\">First Name</div>\r\n            <input type=\"text\" placeholder=\"Enter first name\" [(ngModel)]=\"firstName\" (keydown)=\"validateName($event)\">\r\n        </div>\r\n        <!-- <div class=\"form-control-group-3\">\r\n            <div class=\"label\">Middle Name</div>\r\n            <input type=\"text\" placeholder=\"Enter middle name\" [(ngModel)]=\"middleName\">\r\n        </div> -->\r\n        <div class=\"form-control-group\">\r\n            <div class=\"label\">Last Name</div>\r\n            <input type=\"text\" placeholder=\"Enter last name\" [(ngModel)]=\"lastName\" (keydown)=\"validateName($event)\">\r\n        </div>\r\n\r\n        <div class=\"form-control-group\" *ngIf=\"isEdit\">\r\n            <div class=\"label required\">Mobile</div>\r\n            <input type=\"number\" placeholder=\"Enter mobile\" [(ngModel)]=\"mobile\" disabled>\r\n        </div>\r\n        <div class=\"form-control-group\">\r\n            <div class=\"label\">Email</div>\r\n            <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"email\">\r\n            <span class=\"error-msg\" [style.visibility]=\"isEmailValid ? 'hidden' : 'visible'\">Please enter valid email</span>\r\n        </div>\r\n        \r\n        <div class=\"form-control-group-full\">\r\n            <div class=\"label\">Select Gender</div>\r\n            <div class=\"d-flex align-items-center\">\r\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   src=\"https://img.icons8.com/?size=100&id=108296&format=png&color=000000\" alt=\"\"\r\n                    (click)=\"gender = 'MALE'\" [ngClass]=\"{'active': gender == 'MALE' }\">\r\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   src=\"https://img.icons8.com/?size=100&id=108295&format=png&color=000000\" alt=\"\"\r\n                    (click)=\"gender = 'FEMALE'\" [ngClass]=\"{'active': gender == 'FEMALE'}\">\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"action-btn\">\r\n        <span class=\"skip-btn\" (click)=\"close()\">{{!isEdit ? 'Skip' : 'Close'}}</span>\r\n        <button (click)=\"saveProfile()\">Save Profile</button>\r\n    </div>\r\n</section>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>", styles: [".form-control-group,.form-control-group-3,.form-control-group-full{width:100%}:is(.form-control-group,.form-control-group-3,.form-control-group-full)>input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.label{color:#000}.form-control-group-3{width:32%!important}.form-control-group-full{width:100%}img{height:60px;width:60px;object-fit:cover;margin:0 5px;border:2px solid transparent;cursor:pointer;border-radius:50%}.active{border:2px solid #0267C1}.form-control-group{margin:10px 0}.action-btn{position:relative;bottom:0;right:0;display:flex;align-items:center;justify-content:flex-end;gap:20px}.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}.required:after{content:\"*\";color:tomato}.error-msg{color:tomato}@media screen and (max-width: 475px){.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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: ToastModule }, { kind: "component", type: i8$3.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserBasicInfoComponent, isStandalone: true, selector: "simpo-user-basic-info", providers: [MessageService], ngImport: i0, template: "<section style=\"padding: 20px\" class=\"position-relative\">\n    <div class=\"d-flex flex-wrap justify-content-between\">\n        <div class=\"form-control-group\">\n            <div class=\"label\">First Name</div>\n            <input type=\"text\" placeholder=\"Enter first name\" [(ngModel)]=\"firstName\" (keydown)=\"validateName($event)\">\n        </div>\n        <!-- <div class=\"form-control-group-3\">\n            <div class=\"label\">Middle Name</div>\n            <input type=\"text\" placeholder=\"Enter middle name\" [(ngModel)]=\"middleName\">\n        </div> -->\n        <div class=\"form-control-group\">\n            <div class=\"label\">Last Name</div>\n            <input type=\"text\" placeholder=\"Enter last name\" [(ngModel)]=\"lastName\" (keydown)=\"validateName($event)\">\n        </div>\n\n        <div class=\"form-control-group\" *ngIf=\"isEdit\">\n            <div class=\"label required\">Mobile</div>\n            <input type=\"number\" placeholder=\"Enter mobile\" [(ngModel)]=\"mobile\" disabled>\n        </div>\n        <div class=\"form-control-group\">\n            <div class=\"label\">Email</div>\n            <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"email\">\n            <span class=\"error-msg\" [style.visibility]=\"isEmailValid ? 'hidden' : 'visible'\">Please enter valid email</span>\n        </div>\n        \n        <div class=\"form-control-group-full\">\n            <div class=\"label\">Select Gender</div>\n            <div class=\"d-flex align-items-center\">\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   src=\"https://img.icons8.com/?size=100&id=108296&format=png&color=000000\" alt=\"\"\n                    (click)=\"gender = 'MALE'\" [ngClass]=\"{'active': gender == 'MALE' }\">\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   src=\"https://img.icons8.com/?size=100&id=108295&format=png&color=000000\" alt=\"\"\n                    (click)=\"gender = 'FEMALE'\" [ngClass]=\"{'active': gender == 'FEMALE'}\">\n            </div>\n        </div>\n    </div>\n    <div class=\"action-btn\">\n        <span class=\"skip-btn\" (click)=\"close()\">{{!isEdit ? 'Skip' : 'Close'}}</span>\n        <button (click)=\"saveProfile()\">Save Profile</button>\n    </div>\n</section>\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>", styles: [".form-control-group,.form-control-group-3,.form-control-group-full{width:100%}:is(.form-control-group,.form-control-group-3,.form-control-group-full)>input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.label{color:#000}.form-control-group-3{width:32%!important}.form-control-group-full{width:100%}img{height:60px;width:60px;object-fit:cover;margin:0 5px;border:2px solid transparent;cursor:pointer;border-radius:50%}.active{border:2px solid #0267C1}.form-control-group{margin:10px 0}.action-btn{position:relative;bottom:0;right:0;display:flex;align-items:center;justify-content:flex-end;gap:20px}.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}.required:after{content:\"*\";color:tomato}.error-msg{color:tomato}@media screen and (max-width: 475px){.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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: ToastModule }, { kind: "component", type: i8$3.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserBasicInfoComponent, decorators: [{
             type: Component,
@@ -22793,7 +22793,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MatDialogModule,
                         FormsModule,
                         ToastModule
-                    ], providers: [MessageService], template: "<section style=\"padding: 20px\" class=\"position-relative\">\r\n    <div class=\"d-flex flex-wrap justify-content-between\">\r\n        <div class=\"form-control-group\">\r\n            <div class=\"label\">First Name</div>\r\n            <input type=\"text\" placeholder=\"Enter first name\" [(ngModel)]=\"firstName\" (keydown)=\"validateName($event)\">\r\n        </div>\r\n        <!-- <div class=\"form-control-group-3\">\r\n            <div class=\"label\">Middle Name</div>\r\n            <input type=\"text\" placeholder=\"Enter middle name\" [(ngModel)]=\"middleName\">\r\n        </div> -->\r\n        <div class=\"form-control-group\">\r\n            <div class=\"label\">Last Name</div>\r\n            <input type=\"text\" placeholder=\"Enter last name\" [(ngModel)]=\"lastName\" (keydown)=\"validateName($event)\">\r\n        </div>\r\n\r\n        <div class=\"form-control-group\" *ngIf=\"isEdit\">\r\n            <div class=\"label required\">Mobile</div>\r\n            <input type=\"number\" placeholder=\"Enter mobile\" [(ngModel)]=\"mobile\" disabled>\r\n        </div>\r\n        <div class=\"form-control-group\">\r\n            <div class=\"label\">Email</div>\r\n            <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"email\">\r\n            <span class=\"error-msg\" [style.visibility]=\"isEmailValid ? 'hidden' : 'visible'\">Please enter valid email</span>\r\n        </div>\r\n        \r\n        <div class=\"form-control-group-full\">\r\n            <div class=\"label\">Select Gender</div>\r\n            <div class=\"d-flex align-items-center\">\r\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   src=\"https://img.icons8.com/?size=100&id=108296&format=png&color=000000\" alt=\"\"\r\n                    (click)=\"gender = 'MALE'\" [ngClass]=\"{'active': gender == 'MALE' }\">\r\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   src=\"https://img.icons8.com/?size=100&id=108295&format=png&color=000000\" alt=\"\"\r\n                    (click)=\"gender = 'FEMALE'\" [ngClass]=\"{'active': gender == 'FEMALE'}\">\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"action-btn\">\r\n        <span class=\"skip-btn\" (click)=\"close()\">{{!isEdit ? 'Skip' : 'Close'}}</span>\r\n        <button (click)=\"saveProfile()\">Save Profile</button>\r\n    </div>\r\n</section>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>", styles: [".form-control-group,.form-control-group-3,.form-control-group-full{width:100%}:is(.form-control-group,.form-control-group-3,.form-control-group-full)>input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.label{color:#000}.form-control-group-3{width:32%!important}.form-control-group-full{width:100%}img{height:60px;width:60px;object-fit:cover;margin:0 5px;border:2px solid transparent;cursor:pointer;border-radius:50%}.active{border:2px solid #0267C1}.form-control-group{margin:10px 0}.action-btn{position:relative;bottom:0;right:0;display:flex;align-items:center;justify-content:flex-end;gap:20px}.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}.required:after{content:\"*\";color:tomato}.error-msg{color:tomato}@media screen and (max-width: 475px){.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}}\n"] }]
+                    ], providers: [MessageService], template: "<section style=\"padding: 20px\" class=\"position-relative\">\n    <div class=\"d-flex flex-wrap justify-content-between\">\n        <div class=\"form-control-group\">\n            <div class=\"label\">First Name</div>\n            <input type=\"text\" placeholder=\"Enter first name\" [(ngModel)]=\"firstName\" (keydown)=\"validateName($event)\">\n        </div>\n        <!-- <div class=\"form-control-group-3\">\n            <div class=\"label\">Middle Name</div>\n            <input type=\"text\" placeholder=\"Enter middle name\" [(ngModel)]=\"middleName\">\n        </div> -->\n        <div class=\"form-control-group\">\n            <div class=\"label\">Last Name</div>\n            <input type=\"text\" placeholder=\"Enter last name\" [(ngModel)]=\"lastName\" (keydown)=\"validateName($event)\">\n        </div>\n\n        <div class=\"form-control-group\" *ngIf=\"isEdit\">\n            <div class=\"label required\">Mobile</div>\n            <input type=\"number\" placeholder=\"Enter mobile\" [(ngModel)]=\"mobile\" disabled>\n        </div>\n        <div class=\"form-control-group\">\n            <div class=\"label\">Email</div>\n            <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"email\">\n            <span class=\"error-msg\" [style.visibility]=\"isEmailValid ? 'hidden' : 'visible'\">Please enter valid email</span>\n        </div>\n        \n        <div class=\"form-control-group-full\">\n            <div class=\"label\">Select Gender</div>\n            <div class=\"d-flex align-items-center\">\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   src=\"https://img.icons8.com/?size=100&id=108296&format=png&color=000000\" alt=\"\"\n                    (click)=\"gender = 'MALE'\" [ngClass]=\"{'active': gender == 'MALE' }\">\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   src=\"https://img.icons8.com/?size=100&id=108295&format=png&color=000000\" alt=\"\"\n                    (click)=\"gender = 'FEMALE'\" [ngClass]=\"{'active': gender == 'FEMALE'}\">\n            </div>\n        </div>\n    </div>\n    <div class=\"action-btn\">\n        <span class=\"skip-btn\" (click)=\"close()\">{{!isEdit ? 'Skip' : 'Close'}}</span>\n        <button (click)=\"saveProfile()\">Save Profile</button>\n    </div>\n</section>\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>", styles: [".form-control-group,.form-control-group-3,.form-control-group-full{width:100%}:is(.form-control-group,.form-control-group-3,.form-control-group-full)>input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.label{color:#000}.form-control-group-3{width:32%!important}.form-control-group-full{width:100%}img{height:60px;width:60px;object-fit:cover;margin:0 5px;border:2px solid transparent;cursor:pointer;border-radius:50%}.active{border:2px solid #0267C1}.form-control-group{margin:10px 0}.action-btn{position:relative;bottom:0;right:0;display:flex;align-items:center;justify-content:flex-end;gap:20px}.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}.required:after{content:\"*\";color:tomato}.error-msg{color:tomato}@media screen and (max-width: 475px){.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}}\n"] }]
         }], ctorParameters: () => [{ type: RestService }, { type: i2$2.Router }, { type: i1$2.MatDialogRef }, { type: StorageServiceService }, { type: i6$1.MessageService }] });
 
 class SchemeDetailsComponent {
@@ -23001,11 +23001,11 @@ class SchemeDetailsComponent {
         return window.innerWidth <= 475;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeDetailsComponent, deps: [{ token: StorageServiceService }, { token: RestService }, { token: i1$2.MatDialog }, { token: EventsService }, { token: i2$2.Router }, { token: i6$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SchemeDetailsComponent, isStandalone: true, selector: "simpo-scheme-details", inputs: { schemeDetails: "schemeDetails", data: "data", metalPrice: "metalPrice" }, outputs: { gotoSchemeOverview: "gotoSchemeOverview" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }, { propertyName: "slabListTemplate", first: true, predicate: ["showSlab"], descendants: true, static: true }], ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<div class=\"w-100 h-100\">\r\n    <!-- Header -->\r\n    <div class=\"header\">\r\n        <div class=\"header_left d-flex justify-content-between align-items-center\">\r\n            <div class=\"back-btn d-flex align-items-center\" (click)=\"goBack()\"><mat-icon>keyboard_backspace</mat-icon>\r\n            </div>\r\n            <h1>Passbook Details</h1>\r\n        </div>\r\n        <div class=\"redeem_request cursor-pointer\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n            [style.color]=\"styles?.background?.accentColor\" (click)=\"showBenefitSlab()\"\r\n            *ngIf=\"schemeDetails?.passBookStatus == 'ACTIVE'\">Raise Redeem Request</div>\r\n    </div>\r\n\r\n    <!-- Amount Card -->\r\n    <div class=\"d-flex justify-content-between amount-card-section\">\r\n        <div class=\"w-100\">\r\n            <div class=\"amount-card\">\r\n                <div class=\"top-dashboard\">\r\n                  <div class=\"amount-info\">\r\n                    <div class=\"coin-icon\"><img\r\n                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\r\n                    </div>\r\n                    <div class=\"amount-details\">\r\n                        <h2>\u20B9{{schemeDetails?.totalPaidAmount ? schemeDetails?.totalPaidAmount : '0'}}</h2>\r\n                        <p>{{schemeDetails.schemeType === 'GOLD_PROTECTION' ? 'Deposited Amount' : 'Total Available Scheme Amount'}}</p>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"amount-info\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\r\n                      <div class=\"coin-icon\"><img\r\n                              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\r\n                      </div>\r\n                      <div class=\"amount-details\">\r\n                          <h2>{{schemeDetails?.totalInvestedMetal}} gms</h2>\r\n                          <p>Accumulated Gold</p>\r\n                      </div>\r\n                  </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"d-flex align-items-start justify-content-around scheme-section\">\r\n                <div class=\"details_tab\">\r\n                    <div class=\"section-header\">\r\n                        <h3>Passbook Details</h3>\r\n                        <span class=\"redeem-requested\">{{schemeDetails?.passBookStatus ?\r\n                            schemeDetails?.passBookStatus?.replaceAll('_', ' ') : 'N/A'}}</span>\r\n                    </div>\r\n\r\n                    <div class=\"scheme-info\">\r\n                        <div class=\"scheme-name\">\r\n                            <span class=\"label\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :\r\n                                'N/A'}}</span>\r\n                        </div>\r\n                        <div class=\"scheme-id\">\u20B9{{schemeDetails?.installmentAmount ? schemeDetails?.installmentAmount :\r\n                            'N/A'}}\r\n                            Monthly</div>\r\n                    </div>\r\n\r\n                    <div class=\"dates-grid\">\r\n                        <div class=\"date-item\">\r\n                            <div class=\"date-icon\">\uD83D\uDCC5</div>\r\n                            <div class=\"date-info\">\r\n                                <span class=\"date-label\">Scheme started on</span>\r\n                                <span class=\"date-value\">{{schemeDetails?.createdTimestamp ?\r\n                                    (schemeDetails?.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"date-item\">\r\n                            <div class=\"date-icon\">\uD83D\uDCC5</div>\r\n                            <div class=\"date-info\">\r\n                                <span class=\"date-label\">Maturity Date</span>\r\n                                <span class=\"date-value\">{{schemeDetails?.maturityDate ?\r\n                                    (schemeDetails?.maturityDate | date:'mediumDate') : 'N/A' }}</span>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"completion-info\">\r\n                            <span class=\"completion-label\">Completed EMIs</span>\r\n                            <span class=\"completion-value\">{{schemeDetails.dueMonths ?\r\n                                (schemeDetails?.schemePayments?.length-schemeDetails.dueMonths) :\r\n                                0}} out\r\n                                of {{schemeDetails?.schemePayments?.length}}</span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <!-- <div class=\"enrollment-card\">\r\n                    <div class=\"enrollment-row\">\r\n                        <span class=\"enrollment-label\">Group Name</span>\r\n                        <span class=\"enrollment-value\">{{schemeDetails?.schemeName ?\r\n                            schemeDetails?.schemeName :'N/A' }}</span>\r\n                    </div>\r\n\r\n                    <div class=\"enrollment-row\">\r\n                        <span class=\"enrollment-label\">Group Code</span>\r\n                        <span class=\"enrollment-value\">{{schemeDetails.enrollmentGroup?.pwcGroupId ?\r\n                            schemeDetails.enrollmentGroup.pwcGroupId : 'N/A' }}</span>\r\n                    </div>\r\n\r\n                    <div class=\"enrollment-row\">\r\n                        <span class=\"enrollment-label\">Maturity Date</span>\r\n                        <span class=\"enrollment-value\">{{schemeDetails.maturityDate ? (schemeDetails.maturityDate | date\r\n                            : 'dd-MM-yyyy') : 'N/A'}}</span>\r\n                    </div>\r\n                 <div class=\"enrollment-row\">\r\n                        <span class=\"enrollment-label\">Enrollment Id</span>\r\n                        <span class=\"enrollment-value\">{{schemeDetails.enrollmentId ? schemeDetails.enrollmentId : 'N/A'}}</span>\r\n                    </div>\r\n                </div> -->\r\n            </div>\r\n        </div>\r\n        <!-- <div class=\"quick-actions\">\r\n            <h3>Quick Actions</h3>\r\n            <div class=\"actions d-flex flex-column justify-content-evenly\">\r\n                <div class=\"action-item d-flex align-items-center mb-2\">Make Due Payments\r\n                </div>\r\n                <div class=\"action-item d-flex align-items-center\">Add Nominee</div>\r\n                <div class=\"action-item d-flex align-items-center\">Download SOA</div>\r\n            </div>\r\n\r\n            <button class=\"enroll-btn\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/782673c1753434311903SVG (1).png\"> Enroll\r\n                New Scheme</button>\r\n        </div> -->\r\n    </div>\r\n\r\n    <!-- Scheme Details Section -->\r\n    <div class=\"scheme-details\">\r\n        <div class=\"section d-flex-flex-column gap-2\">\r\n            <div class=\"section-header\">\r\n                <h2 class=\"section-title\">Installments</h2>\r\n            </div>\r\n            <div class=\"payment-list d-flex flex-column gap-2\">\r\n                <ng-container *ngIf=\"paymentData.length;else noPayments\">\r\n                    <ng-container *ngFor=\"let payment of paymentData;let i = index\">\r\n                        <div class=\"payment-item\">\r\n                            <div class=\"payment-info\">\r\n                                <div class=\"payment-icon upcoming\"><img\r\n                                        src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\">\r\n                                </div>\r\n                                <div class=\"payment-details\">\r\n                                    <h4>{{schemeDetails?.schemeName ? schemeDetails?.schemeName : 'N/A'}}</h4>\r\n                                    <p>Due Date : {{payment?.dueDate ? (payment?.dueDate | date : 'dd-MM-yyyy') :\r\n                                        'N/A'}}</p>\r\n                                    <p *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && payment.paymentStatus === 'PAID'\">Gold Allocated : {{payment?.totalInvestedMetal}} gms</p>\r\n                                    <p *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\">Gold Allocate today : {{payment?.dueAmount / metalPrice?.price}} gms</p>\r\n                                    <!-- |\r\n                                        Due by: {{getDueDate(payment?.dueDate)}} days</p> -->\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"payment-amount\">\r\n                                <div class=\"amount-value\" *ngIf=\"payment?.dueAmount\">\u20B9{{payment?.dueAmount ?\r\n                                    payment.dueAmount :\r\n                                    'N/A'}}</div>\r\n                                <div class=\"paid-btn payment-status d-flex align-items-center justify-content-center\"\r\n                                    *ngIf=\"payment?.paymentStatus != 'DUE'\">\r\n                                    Paid\r\n                                </div>\r\n                                <div class=\"payment-status pay-now-btn cursor-pointer\"\r\n                                    *ngIf=\"paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\" (click)=\"payDuePayment(payment)\">\r\n                                    <ng-container *ngIf=\"!paymentLoader\">Pay Now</ng-container>\r\n                                    <ng-container *ngIf=\"paymentLoader\">Loading...</ng-container>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                </ng-container>\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>\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\">\r\n                                <span class=\"label\">Gold Allocate:</span>\r\n                                <span class=\"amount\">{{storeCharges?.breakdown?.installmentAmount / metalPrice?.price}} gms</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()\">Continue</button>\r\n                        </div>\r\n                    </div>\r\n                </ng-template>\r\n                <ng-template #showSlab>\r\n                    <div class=\"main_section\">\r\n                        <div class=\"slab_header d-flex justify-content-between align-items-center\">\r\n                            Confirm Redeem Request\r\n                            <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n                        </div>\r\n                        <div class=\"main_body\">\r\n                            <div class=\"container\">\r\n                                <div class=\"card\">\r\n                                    <div class=\"card-title\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :\r\n                                'N/A'}}</div>\r\n                                    <div class=\"info-row\">\r\n                                        <span>Plan started on</span>\r\n                                        <span class=\"value\">{{schemeDetails.createdTimestamp ?\r\n                                            (schemeDetails.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\r\n                                    </div>\r\n                                    <div class=\"info-row\">\r\n                                        <span>Monthly Amount Paid</span>\r\n                                        <span class=\"value\">\u20B9{{schemeDetails?.installmentAmount ?\r\n                                            schemeDetails?.installmentAmount : 'N/A'}}</span>\r\n                                    </div>\r\n                                    <div class=\"info-row\">\r\n                                        <span>Total Amount Paid</span>\r\n                                        <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount ?\r\n                                            schemeDetails?.totalPaidAmount : 'N/A' }}</span>\r\n                                    </div>\r\n                                    <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType !== 'GOLD_PROTECTION' && paidMonth < schemeDetails?.minRedemptionMonth && schemeDetails?.earlyRedemptionCharge\">\r\n                                        <span>Enrollment Fee</span>\r\n                                        <span class=\"value\">\u20B9{{schemeDetails?.earlyRedemptionCharge}}</span>\r\n                                    </div>\r\n                                    <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\r\n                                        <span>Accumulated gold</span>\r\n                                        <span class=\"value\">{{schemeDetails?.totalInvestedMetal}} gms</span>\r\n                                    </div>\r\n                                    <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && paidMonth < schemeDetails?.minRedemptionMonth && schemeDetails?.earlyRedemptionCharge\">\r\n                                        <span>Gold Deducted</span>\r\n                                        <span class=\"value\">{{goldDeducted}} gms</span>\r\n                                    </div>\r\n                                    <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\r\n                                        <span>Accumulated gold after Deduction</span>\r\n                                        <span class=\"value\">{{schemeDetails?.totalInvestedMetal - (paidMonth < schemeDetails?.minRedemptionMonth ? goldDeducted : 0)}} gms</span>\r\n                                    </div>\r\n                                    <div class=\"info-row\">\r\n                                        <span>Total Redeem Amount</span>\r\n                                        <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount - (paidMonth < schemeDetails?.minRedemptionMonth ? schemeDetails?.earlyRedemptionCharge ?? 0 : 0)}}</span>\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <div class=\"card\" *ngIf=\"slabDetails && slabDetails.length > 0\">\r\n                                    <div class=\"card-title center\">Benefits You Will Get</div>\r\n                                    <div class=\"info-row\">\r\n                                        <span>Installments Paid:</span>\r\n                                        <span class=\"value\">{{ schemeDetails?.schemePayments?.length ?\r\n                                            (schemeDetails?.schemePayments?.length -\r\n                                            schemeDetails?.dueMonths) : 'N/A'}}</span>\r\n                                    </div>\r\n                                    <div class=\"info-row\">\r\n                                        <span>Benefit Slab:</span>\r\n                                        <span class=\"value\">{{slabDetails[0]?.minMonths >= 0 ? slabDetails[0]?.minMonths\r\n                                            :\r\n                                            'N/A'}} - {{slabDetails[0]?.maxMonths ? slabDetails[0]?.maxMonths : 'N/A'}}\r\n                                            months</span>\r\n                                    </div>\r\n                                    <div class=\"info-row\">\r\n                                        <span>Benefit Percentage:</span>\r\n                                        <span class=\"value\">{{slabDetails[0].benefitPercentage >= 0 ?\r\n                                            slabDetails[0].benefitPercentage : 'N/A'}}%</span>\r\n                                    </div>\r\n                                    <div class=\"info-row\">\r\n                                        <span>Benefit Amount:</span>\r\n                                        <span class=\"value highlight\">\u20B9{{slabDetails[0]?.benefitAmount >= 0 ?\r\n                                            slabDetails[0]?.benefitAmount : 'N/A'}}</span>\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <button class=\"confirm-btn\" (click)=\"confirmRequest()\"\r\n                                    *ngIf=\"!redeemRequestLoader\">Confirm Request</button>\r\n                                <button class=\"confirm-btn redeem-request-btn\" *ngIf=\"redeemRequestLoader\">\r\n                                    <mat-spinner></mat-spinner>\r\n                                    Requesting..\r\n                                </button>\r\n                            </div>\r\n\r\n                        </div>\r\n                    </div>\r\n                </ng-template>\r\n                <ng-template #noPayments>\r\n                    <div class=\"d-flex justify-content-center align-items-center w-100 h-100\">\r\n                        <span>No Upcoming Payments</span>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </div>\r\n        <div class=\"tabs\">\r\n            <button class=\"tab d-flex justify-content-center align-items-center active\">Transactions</button>\r\n        </div>\r\n        <div class=\"transactions\">\r\n            <ng-container *ngFor=\"let transaction of schemeDetails.schemePayments\">\r\n                <div class=\"transaction-item\" *ngIf=\"transaction.paymentStatus === 'PAID'\">\r\n                    <div class=\"transaction-status paid\"><img\r\n                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/484102c1753446573473Group 1707484906.png\">\r\n                    </div>\r\n                    <div class=\"transaction-details\">\r\n                        <h4>{{transaction.emiMonthCount ? transaction.emiMonthCount : 'N/A' }}st Instalment Paid\r\n                        </h4>\r\n                        <p>Payment Date : {{transaction.paidDate ? (transaction.paidDate | date : 'dd-MM-yyyy') :\r\n                            'N/A'}}\r\n                        </p>\r\n                    </div>\r\n                    <div class=\"transaction-amount\">\r\n                        {{transaction.paidAmount ? ('\u20B9'+transaction.paidAmount) : 'N/A' }}</div>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f5f5;color:#333}.header{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;background-color:#fff;border-bottom:1px solid #e0e0e0}.back-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:7px}.header_left h1{font-size:18px;font-weight:600;flex-grow:1;text-align:center;margin:0 16px}.header-actions{display:flex;gap:8px}.share-btn,.download-btn{font-size:16px;cursor:pointer;padding:9px;border:1px solid lightgrey;border-radius:5px}.details_tab{border:1px solid lightgrey;padding:3%;border-radius:7px;width:62%}.amount-card{background:linear-gradient(90deg,#fffbeb,#fff7ed);margin:16px;padding:20px;border-radius:12px}.amount-info{display:flex;align-items:center;gap:16px}.coin-icon{font-size:32px}.amount-details h2{font-size:24px;font-weight:700;color:#333;margin-bottom:4px}.amount-details p{font-size:14px;color:#666}.scheme-details{padding:0 16px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-title{font-size:18px;font-weight:600}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;margin:12px 0}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.pay-now-btn{background:#10f464}.paid-btn{color:#10f464}.payment-status{font-size:12px;padding:6px;border-radius:4px}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.section-header h3{font-size:18px;font-weight:600}.redeem-requested{background-color:#fff3e0;color:#e65100;padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500}.scheme-info{margin-bottom:24px}.scheme-name{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.scheme-name .label{font-size:16px;font-weight:600}.scheme-name .redeem-status{background-color:#e8f5e8;color:#2e7d32;padding:4px 12px;border-radius:16px;font-size:12px}.scheme-id{color:#666;font-size:14px}.dates-grid{display:flex;gap:16px;border-top:1px solid lightgrey;justify-content:space-between;padding-top:11px}.date-item{display:flex;align-items:center;gap:8px}.date-icon{font-size:16px}.date-info{display:flex;flex-direction:column}.date-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.date-value{font-size:11px;font-weight:500}.completion-info{display:flex;flex-direction:column;align-items:flex-start;grid-column:span 2}.completion-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.completion-value{font-size:11px;font-weight:500}.tabs{display:flex;border-bottom:1px solid #e0e0e0;margin:20px 0;height:5vh;background:#d3d3d3;align-items:center;padding:0 1%;width:fit-content;border-radius:30px}.tab{background:none;border:none;font-size:10px!important;cursor:pointer;border-bottom:2px solid transparent;color:#666;width:6vw!important;height:80%!important}.tab.active{color:#333;border-radius:30px;font-weight:500;background-color:#fff}.transactions{display:flex;flex-direction:column;gap:16px;padding-bottom:20px}.transaction-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid lightgrey;border-radius:8px}.transaction-status{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}.underline{text-decoration:underline}.transaction-status img{width:100%}.transaction-status.paid{background-color:#4caf50;color:#fff}.transaction-status.due{background-color:#e0e0e0;border:2px solid #bdbdbd}.transaction-details{flex-grow:1}.transaction-details h4{font-size:14px;font-weight:500;margin-bottom:2px}.transaction-details p{font-size:12px;color:#666}.transaction-amount{font-size:16px;font-weight:600}@media (max-width: 480px){.dates-grid{grid-template-columns:1fr}.amount-info{justify-content:space-between}.top-dashboard{flex-direction:column}.completion-info{grid-column:span 1;align-items:flex-start}.header{padding:20px 0}.redeem_request{white-space:nowrap;font-size:.7rem!important}.header_left h1{white-space:nowrap;margin:0 6px}}.scheme-section{flex-direction:column;gap:1rem}.details_tab{width:100%;border-radius:12px}.redeem_request{padding:.3rem .6rem;border-radius:4px;font-weight:700;font-size:14px;border:2px solid}.section{padding:12px!important;max-height:75vh;overflow-y:scroll}.upcoming-status{display:flex;justify-content:center;align-items:center;height:35px;white-space:nowrap}.payment-details p{font-size:12px}.tab{width:22vw!important}.scheme-details{padding:0}.enrollment-card{width:100%!important}.amount-card{margin:0 0 12px}.amount-card-section{flex-direction:column}.actions{height:70%}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.enrollment-card{background:#fff;border-radius:12px;padding:0 24px;border:1px solid lightgrey;width:30%}.section{background:#fff;border-radius:12px;padding:24px;margin:24px 0;border:1px solid #e9ecef}.enrollment-row{display:flex;justify-content:space-between;align-items:center;padding:10.5px 0;border-bottom:1px solid #f0f0f0}.enrollment-row:last-child{border-bottom:none}.enrollment-label{color:#666;font-size:14px;font-weight:500}.enrollment-value{color:#333;font-size:14px;font-weight:600}.enrollment-value.zero{color:#ef4444}.container{max-width:400px;margin:32px auto;padding:0 16px}.card{background:#fff;border-radius:16px;box-shadow:0 2px 10px #00000012;padding:22px 18px 14px;margin-bottom:18px}.card-title{font-weight:600;color:#222;font-size:1.18rem;margin-bottom:10px}.card-title.center{text-align:center;font-size:1.09rem;margin-bottom:16px}.info-row{display:flex;justify-content:space-between;align-items:center;font-size:.99rem;margin-top:7px;margin-bottom:0}.info-row .value{font-weight:500;color:#212121}.main_section{min-width:35vw}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.slab_header{padding:2% 3%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:700;font-size:19px;border-bottom:1px solid lightgrey}.info-row .highlight{border-radius:3px;padding:2px 7px;font-weight:600}.confirm-btn{width:100%;display:block;background:#e22d2f;color:#fff;border:none;outline:none;font-size:1.04rem;font-weight:600;padding:8px 0;border-radius:8px;box-shadow:0 1px 4px #e22d2f33;cursor:pointer;margin-top:18px;letter-spacing:.03em;transition:background .2s}.confirm-btn:hover{background:#c31113}.redeem-request-btn{justify-content:center;display:flex;align-items:center;gap:10px}.redeem-request-btn mat-spinner{height:25px!important;width:25px!important}.top-dashboard{display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i8$3.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SchemeDetailsComponent, isStandalone: true, selector: "simpo-scheme-details", inputs: { schemeDetails: "schemeDetails", data: "data", metalPrice: "metalPrice" }, outputs: { gotoSchemeOverview: "gotoSchemeOverview" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }, { propertyName: "slabListTemplate", first: true, predicate: ["showSlab"], descendants: true, static: true }], ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<div class=\"w-100 h-100\">\n    <!-- Header -->\n    <div class=\"header\">\n        <div class=\"header_left d-flex justify-content-between align-items-center\">\n            <div class=\"back-btn d-flex align-items-center\" (click)=\"goBack()\"><mat-icon>keyboard_backspace</mat-icon>\n            </div>\n            <h1>Passbook Details</h1>\n        </div>\n        <div class=\"redeem_request cursor-pointer\" [style.borderColor]=\"styles?.background?.accentColor\"\n            [style.color]=\"styles?.background?.accentColor\" (click)=\"showBenefitSlab()\"\n            *ngIf=\"schemeDetails?.passBookStatus == 'ACTIVE'\">Raise Redeem Request</div>\n    </div>\n\n    <!-- Amount Card -->\n    <div class=\"d-flex justify-content-between amount-card-section\">\n        <div class=\"w-100\">\n            <div class=\"amount-card\">\n                <div class=\"top-dashboard\">\n                  <div class=\"amount-info\">\n                    <div class=\"coin-icon\"><img\n                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\n                    </div>\n                    <div class=\"amount-details\">\n                        <h2>\u20B9{{schemeDetails?.totalPaidAmount ? schemeDetails?.totalPaidAmount : '0'}}</h2>\n                        <p>{{schemeDetails.schemeType === 'GOLD_PROTECTION' ? 'Deposited Amount' : 'Total Available Scheme Amount'}}</p>\n                    </div>\n                  </div>\n                  <div class=\"amount-info\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\n                      <div class=\"coin-icon\"><img\n                              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\n                      </div>\n                      <div class=\"amount-details\">\n                          <h2>{{schemeDetails?.totalInvestedMetal}} gms</h2>\n                          <p>Accumulated Gold</p>\n                      </div>\n                  </div>\n                </div>\n            </div>\n            <div class=\"d-flex align-items-start justify-content-around scheme-section\">\n                <div class=\"details_tab\">\n                    <div class=\"section-header\">\n                        <h3>Passbook Details</h3>\n                        <span class=\"redeem-requested\">{{schemeDetails?.passBookStatus ?\n                            schemeDetails?.passBookStatus?.replaceAll('_', ' ') : 'N/A'}}</span>\n                    </div>\n\n                    <div class=\"scheme-info\">\n                        <div class=\"scheme-name\">\n                            <span class=\"label\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :\n                                'N/A'}}</span>\n                        </div>\n                        <div class=\"scheme-id\">\u20B9{{schemeDetails?.installmentAmount ? schemeDetails?.installmentAmount :\n                            'N/A'}}\n                            Monthly</div>\n                    </div>\n\n                    <div class=\"dates-grid\">\n                        <div class=\"date-item\">\n                            <div class=\"date-icon\">\uD83D\uDCC5</div>\n                            <div class=\"date-info\">\n                                <span class=\"date-label\">Scheme started on</span>\n                                <span class=\"date-value\">{{schemeDetails?.createdTimestamp ?\n                                    (schemeDetails?.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\n                            </div>\n                        </div>\n                        <div class=\"date-item\">\n                            <div class=\"date-icon\">\uD83D\uDCC5</div>\n                            <div class=\"date-info\">\n                                <span class=\"date-label\">Maturity Date</span>\n                                <span class=\"date-value\">{{schemeDetails?.maturityDate ?\n                                    (schemeDetails?.maturityDate | date:'mediumDate') : 'N/A' }}</span>\n                            </div>\n                        </div>\n                        <div class=\"completion-info\">\n                            <span class=\"completion-label\">Completed EMIs</span>\n                            <span class=\"completion-value\">{{schemeDetails.dueMonths ?\n                                (schemeDetails?.schemePayments?.length-schemeDetails.dueMonths) :\n                                0}} out\n                                of {{schemeDetails?.schemePayments?.length}}</span>\n                        </div>\n                    </div>\n                </div>\n                <!-- <div class=\"enrollment-card\">\n                    <div class=\"enrollment-row\">\n                        <span class=\"enrollment-label\">Group Name</span>\n                        <span class=\"enrollment-value\">{{schemeDetails?.schemeName ?\n                            schemeDetails?.schemeName :'N/A' }}</span>\n                    </div>\n\n                    <div class=\"enrollment-row\">\n                        <span class=\"enrollment-label\">Group Code</span>\n                        <span class=\"enrollment-value\">{{schemeDetails.enrollmentGroup?.pwcGroupId ?\n                            schemeDetails.enrollmentGroup.pwcGroupId : 'N/A' }}</span>\n                    </div>\n\n                    <div class=\"enrollment-row\">\n                        <span class=\"enrollment-label\">Maturity Date</span>\n                        <span class=\"enrollment-value\">{{schemeDetails.maturityDate ? (schemeDetails.maturityDate | date\n                            : 'dd-MM-yyyy') : 'N/A'}}</span>\n                    </div>\n                 <div class=\"enrollment-row\">\n                        <span class=\"enrollment-label\">Enrollment Id</span>\n                        <span class=\"enrollment-value\">{{schemeDetails.enrollmentId ? schemeDetails.enrollmentId : 'N/A'}}</span>\n                    </div>\n                </div> -->\n            </div>\n        </div>\n        <!-- <div class=\"quick-actions\">\n            <h3>Quick Actions</h3>\n            <div class=\"actions d-flex flex-column justify-content-evenly\">\n                <div class=\"action-item d-flex align-items-center mb-2\">Make Due Payments\n                </div>\n                <div class=\"action-item d-flex align-items-center\">Add Nominee</div>\n                <div class=\"action-item d-flex align-items-center\">Download SOA</div>\n            </div>\n\n            <button class=\"enroll-btn\"><img\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/782673c1753434311903SVG (1).png\"> Enroll\n                New Scheme</button>\n        </div> -->\n    </div>\n\n    <!-- Scheme Details Section -->\n    <div class=\"scheme-details\">\n        <div class=\"section d-flex-flex-column gap-2\">\n            <div class=\"section-header\">\n                <h2 class=\"section-title\">Installments</h2>\n            </div>\n            <div class=\"payment-list d-flex flex-column gap-2\">\n                <ng-container *ngIf=\"paymentData.length;else noPayments\">\n                    <ng-container *ngFor=\"let payment of paymentData;let i = index\">\n                        <div class=\"payment-item\">\n                            <div class=\"payment-info\">\n                                <div class=\"payment-icon upcoming\"><img\n                                        src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\">\n                                </div>\n                                <div class=\"payment-details\">\n                                    <h4>{{schemeDetails?.schemeName ? schemeDetails?.schemeName : 'N/A'}}</h4>\n                                    <p>Due Date : {{payment?.dueDate ? (payment?.dueDate | date : 'dd-MM-yyyy') :\n                                        'N/A'}}</p>\n                                    <p *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && payment.paymentStatus === 'PAID'\">Gold Allocated : {{payment?.totalInvestedMetal}} gms</p>\n                                    <p *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\">Gold Allocate today : {{payment?.dueAmount / metalPrice?.price}} gms</p>\n                                    <!-- |\n                                        Due by: {{getDueDate(payment?.dueDate)}} days</p> -->\n                                </div>\n                            </div>\n                            <div class=\"payment-amount\">\n                                <div class=\"amount-value\" *ngIf=\"payment?.dueAmount\">\u20B9{{payment?.dueAmount ?\n                                    payment.dueAmount :\n                                    'N/A'}}</div>\n                                <div class=\"paid-btn payment-status d-flex align-items-center justify-content-center\"\n                                    *ngIf=\"payment?.paymentStatus != 'DUE'\">\n                                    Paid\n                                </div>\n                                <div class=\"payment-status pay-now-btn cursor-pointer\"\n                                    *ngIf=\"paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\" (click)=\"payDuePayment(payment)\">\n                                    <ng-container *ngIf=\"!paymentLoader\">Pay Now</ng-container>\n                                    <ng-container *ngIf=\"paymentLoader\">Loading...</ng-container>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-container>\n                </ng-container>\n                <ng-template #showCharges>\n                    <div class=\"payment-dialog\">\n                        <div class=\"dialog-header\">\n                            <h2>Payment Details</h2>\n                            <button class=\"close-btn\" mat-icon-button>\n                                <mat-icon>close</mat-icon>\n                            </button>\n                        </div>\n\n                        <div class=\"payment-content\">\n                            <div class=\"payment-row\">\n                                <span class=\"label\">Installment Amount:</span>\n                                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\n                                    (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\n                            </div>\n\n                            <div class=\"payment-row\">\n                                <span class=\"label\">Convenience Fee:</span>\n                                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\n                                    (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\n                            </div>\n\n                            <div class=\"payment-row\">\n                                <span class=\"label\">Payment Service Charges:</span>\n                                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\n                                    (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\n                            </div>\n\n                            <div class=\"payment-row\">\n                                <span class=\"label\">Gold Allocate:</span>\n                                <span class=\"amount\">{{storeCharges?.breakdown?.installmentAmount / metalPrice?.price}} gms</span>\n                            </div>\n\n                            <div class=\"payment-row total-row\">\n                                <span class=\"label total-label\">Total Amount:</span>\n                                <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\n                                    (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\n                            </div>\n                        </div>\n\n                        <div class=\"dialog-actions\">\n                            <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\n                        </div>\n                    </div>\n                </ng-template>\n                <ng-template #showSlab>\n                    <div class=\"main_section\">\n                        <div class=\"slab_header d-flex justify-content-between align-items-center\">\n                            Confirm Redeem Request\n                            <mat-icon (click)=\"closeDialog()\">close</mat-icon>\n                        </div>\n                        <div class=\"main_body\">\n                            <div class=\"container\">\n                                <div class=\"card\">\n                                    <div class=\"card-title\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :\n                                'N/A'}}</div>\n                                    <div class=\"info-row\">\n                                        <span>Plan started on</span>\n                                        <span class=\"value\">{{schemeDetails.createdTimestamp ?\n                                            (schemeDetails.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\n                                    </div>\n                                    <div class=\"info-row\">\n                                        <span>Monthly Amount Paid</span>\n                                        <span class=\"value\">\u20B9{{schemeDetails?.installmentAmount ?\n                                            schemeDetails?.installmentAmount : 'N/A'}}</span>\n                                    </div>\n                                    <div class=\"info-row\">\n                                        <span>Total Amount Paid</span>\n                                        <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount ?\n                                            schemeDetails?.totalPaidAmount : 'N/A' }}</span>\n                                    </div>\n                                    <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType !== 'GOLD_PROTECTION' && paidMonth < schemeDetails?.minRedemptionMonth && schemeDetails?.earlyRedemptionCharge\">\n                                        <span>Enrollment Fee</span>\n                                        <span class=\"value\">\u20B9{{schemeDetails?.earlyRedemptionCharge}}</span>\n                                    </div>\n                                    <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\n                                        <span>Accumulated gold</span>\n                                        <span class=\"value\">{{schemeDetails?.totalInvestedMetal}} gms</span>\n                                    </div>\n                                    <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && paidMonth < schemeDetails?.minRedemptionMonth && schemeDetails?.earlyRedemptionCharge\">\n                                        <span>Gold Deducted</span>\n                                        <span class=\"value\">{{goldDeducted}} gms</span>\n                                    </div>\n                                    <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\n                                        <span>Accumulated gold after Deduction</span>\n                                        <span class=\"value\">{{schemeDetails?.totalInvestedMetal - (paidMonth < schemeDetails?.minRedemptionMonth ? goldDeducted : 0)}} gms</span>\n                                    </div>\n                                    <div class=\"info-row\">\n                                        <span>Total Redeem Amount</span>\n                                        <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount - (paidMonth < schemeDetails?.minRedemptionMonth ? schemeDetails?.earlyRedemptionCharge ?? 0 : 0)}}</span>\n                                    </div>\n                                </div>\n\n                                <div class=\"card\" *ngIf=\"slabDetails && slabDetails.length > 0\">\n                                    <div class=\"card-title center\">Benefits You Will Get</div>\n                                    <div class=\"info-row\">\n                                        <span>Installments Paid:</span>\n                                        <span class=\"value\">{{ schemeDetails?.schemePayments?.length ?\n                                            (schemeDetails?.schemePayments?.length -\n                                            schemeDetails?.dueMonths) : 'N/A'}}</span>\n                                    </div>\n                                    <div class=\"info-row\">\n                                        <span>Benefit Slab:</span>\n                                        <span class=\"value\">{{slabDetails[0]?.minMonths >= 0 ? slabDetails[0]?.minMonths\n                                            :\n                                            'N/A'}} - {{slabDetails[0]?.maxMonths ? slabDetails[0]?.maxMonths : 'N/A'}}\n                                            months</span>\n                                    </div>\n                                    <div class=\"info-row\">\n                                        <span>Benefit Percentage:</span>\n                                        <span class=\"value\">{{slabDetails[0].benefitPercentage >= 0 ?\n                                            slabDetails[0].benefitPercentage : 'N/A'}}%</span>\n                                    </div>\n                                    <div class=\"info-row\">\n                                        <span>Benefit Amount:</span>\n                                        <span class=\"value highlight\">\u20B9{{slabDetails[0]?.benefitAmount >= 0 ?\n                                            slabDetails[0]?.benefitAmount : 'N/A'}}</span>\n                                    </div>\n                                </div>\n\n                                <button class=\"confirm-btn\" (click)=\"confirmRequest()\"\n                                    *ngIf=\"!redeemRequestLoader\">Confirm Request</button>\n                                <button class=\"confirm-btn redeem-request-btn\" *ngIf=\"redeemRequestLoader\">\n                                    <mat-spinner></mat-spinner>\n                                    Requesting..\n                                </button>\n                            </div>\n\n                        </div>\n                    </div>\n                </ng-template>\n                <ng-template #noPayments>\n                    <div class=\"d-flex justify-content-center align-items-center w-100 h-100\">\n                        <span>No Upcoming Payments</span>\n                    </div>\n                </ng-template>\n            </div>\n        </div>\n        <div class=\"tabs\">\n            <button class=\"tab d-flex justify-content-center align-items-center active\">Transactions</button>\n        </div>\n        <div class=\"transactions\">\n            <ng-container *ngFor=\"let transaction of schemeDetails.schemePayments\">\n                <div class=\"transaction-item\" *ngIf=\"transaction.paymentStatus === 'PAID'\">\n                    <div class=\"transaction-status paid\"><img\n                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/484102c1753446573473Group 1707484906.png\">\n                    </div>\n                    <div class=\"transaction-details\">\n                        <h4>{{transaction.emiMonthCount ? transaction.emiMonthCount : 'N/A' }}st Instalment Paid\n                        </h4>\n                        <p>Payment Date : {{transaction.paidDate ? (transaction.paidDate | date : 'dd-MM-yyyy') :\n                            'N/A'}}\n                        </p>\n                    </div>\n                    <div class=\"transaction-amount\">\n                        {{transaction.paidAmount ? ('\u20B9'+transaction.paidAmount) : 'N/A' }}</div>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f5f5;color:#333}.header{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;background-color:#fff;border-bottom:1px solid #e0e0e0}.back-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:7px}.header_left h1{font-size:18px;font-weight:600;flex-grow:1;text-align:center;margin:0 16px}.header-actions{display:flex;gap:8px}.share-btn,.download-btn{font-size:16px;cursor:pointer;padding:9px;border:1px solid lightgrey;border-radius:5px}.details_tab{border:1px solid lightgrey;padding:3%;border-radius:7px;width:62%}.amount-card{background:linear-gradient(90deg,#fffbeb,#fff7ed);margin:16px;padding:20px;border-radius:12px}.amount-info{display:flex;align-items:center;gap:16px}.coin-icon{font-size:32px}.amount-details h2{font-size:24px;font-weight:700;color:#333;margin-bottom:4px}.amount-details p{font-size:14px;color:#666}.scheme-details{padding:0 16px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-title{font-size:18px;font-weight:600}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;margin:12px 0}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.pay-now-btn{background:#10f464}.paid-btn{color:#10f464}.payment-status{font-size:12px;padding:6px;border-radius:4px}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.section-header h3{font-size:18px;font-weight:600}.redeem-requested{background-color:#fff3e0;color:#e65100;padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500}.scheme-info{margin-bottom:24px}.scheme-name{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.scheme-name .label{font-size:16px;font-weight:600}.scheme-name .redeem-status{background-color:#e8f5e8;color:#2e7d32;padding:4px 12px;border-radius:16px;font-size:12px}.scheme-id{color:#666;font-size:14px}.dates-grid{display:flex;gap:16px;border-top:1px solid lightgrey;justify-content:space-between;padding-top:11px}.date-item{display:flex;align-items:center;gap:8px}.date-icon{font-size:16px}.date-info{display:flex;flex-direction:column}.date-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.date-value{font-size:11px;font-weight:500}.completion-info{display:flex;flex-direction:column;align-items:flex-start;grid-column:span 2}.completion-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.completion-value{font-size:11px;font-weight:500}.tabs{display:flex;border-bottom:1px solid #e0e0e0;margin:20px 0;height:5vh;background:#d3d3d3;align-items:center;padding:0 1%;width:fit-content;border-radius:30px}.tab{background:none;border:none;font-size:10px!important;cursor:pointer;border-bottom:2px solid transparent;color:#666;width:6vw!important;height:80%!important}.tab.active{color:#333;border-radius:30px;font-weight:500;background-color:#fff}.transactions{display:flex;flex-direction:column;gap:16px;padding-bottom:20px}.transaction-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid lightgrey;border-radius:8px}.transaction-status{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}.underline{text-decoration:underline}.transaction-status img{width:100%}.transaction-status.paid{background-color:#4caf50;color:#fff}.transaction-status.due{background-color:#e0e0e0;border:2px solid #bdbdbd}.transaction-details{flex-grow:1}.transaction-details h4{font-size:14px;font-weight:500;margin-bottom:2px}.transaction-details p{font-size:12px;color:#666}.transaction-amount{font-size:16px;font-weight:600}@media (max-width: 480px){.dates-grid{grid-template-columns:1fr}.amount-info{justify-content:space-between}.top-dashboard{flex-direction:column}.completion-info{grid-column:span 1;align-items:flex-start}.header{padding:20px 0}.redeem_request{white-space:nowrap;font-size:.7rem!important}.header_left h1{white-space:nowrap;margin:0 6px}}.scheme-section{flex-direction:column;gap:1rem}.details_tab{width:100%;border-radius:12px}.redeem_request{padding:.3rem .6rem;border-radius:4px;font-weight:700;font-size:14px;border:2px solid}.section{padding:12px!important;max-height:75vh;overflow-y:scroll}.upcoming-status{display:flex;justify-content:center;align-items:center;height:35px;white-space:nowrap}.payment-details p{font-size:12px}.tab{width:22vw!important}.scheme-details{padding:0}.enrollment-card{width:100%!important}.amount-card{margin:0 0 12px}.amount-card-section{flex-direction:column}.actions{height:70%}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.enrollment-card{background:#fff;border-radius:12px;padding:0 24px;border:1px solid lightgrey;width:30%}.section{background:#fff;border-radius:12px;padding:24px;margin:24px 0;border:1px solid #e9ecef}.enrollment-row{display:flex;justify-content:space-between;align-items:center;padding:10.5px 0;border-bottom:1px solid #f0f0f0}.enrollment-row:last-child{border-bottom:none}.enrollment-label{color:#666;font-size:14px;font-weight:500}.enrollment-value{color:#333;font-size:14px;font-weight:600}.enrollment-value.zero{color:#ef4444}.container{max-width:400px;margin:32px auto;padding:0 16px}.card{background:#fff;border-radius:16px;box-shadow:0 2px 10px #00000012;padding:22px 18px 14px;margin-bottom:18px}.card-title{font-weight:600;color:#222;font-size:1.18rem;margin-bottom:10px}.card-title.center{text-align:center;font-size:1.09rem;margin-bottom:16px}.info-row{display:flex;justify-content:space-between;align-items:center;font-size:.99rem;margin-top:7px;margin-bottom:0}.info-row .value{font-weight:500;color:#212121}.main_section{min-width:35vw}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.slab_header{padding:2% 3%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:700;font-size:19px;border-bottom:1px solid lightgrey}.info-row .highlight{border-radius:3px;padding:2px 7px;font-weight:600}.confirm-btn{width:100%;display:block;background:#e22d2f;color:#fff;border:none;outline:none;font-size:1.04rem;font-weight:600;padding:8px 0;border-radius:8px;box-shadow:0 1px 4px #e22d2f33;cursor:pointer;margin-top:18px;letter-spacing:.03em;transition:background .2s}.confirm-btn:hover{background:#c31113}.redeem-request-btn{justify-content:center;display:flex;align-items:center;gap:10px}.redeem-request-btn mat-spinner{height:25px!important;width:25px!important}.top-dashboard{display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i8$3.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-scheme-details', standalone: true, imports: [MatIcon, CommonModule, MatProgressSpinner, MatProgressSpinnerModule, ToastModule], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<div class=\"w-100 h-100\">\r\n    <!-- Header -->\r\n    <div class=\"header\">\r\n        <div class=\"header_left d-flex justify-content-between align-items-center\">\r\n            <div class=\"back-btn d-flex align-items-center\" (click)=\"goBack()\"><mat-icon>keyboard_backspace</mat-icon>\r\n            </div>\r\n            <h1>Passbook Details</h1>\r\n        </div>\r\n        <div class=\"redeem_request cursor-pointer\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n            [style.color]=\"styles?.background?.accentColor\" (click)=\"showBenefitSlab()\"\r\n            *ngIf=\"schemeDetails?.passBookStatus == 'ACTIVE'\">Raise Redeem Request</div>\r\n    </div>\r\n\r\n    <!-- Amount Card -->\r\n    <div class=\"d-flex justify-content-between amount-card-section\">\r\n        <div class=\"w-100\">\r\n            <div class=\"amount-card\">\r\n                <div class=\"top-dashboard\">\r\n                  <div class=\"amount-info\">\r\n                    <div class=\"coin-icon\"><img\r\n                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\r\n                    </div>\r\n                    <div class=\"amount-details\">\r\n                        <h2>\u20B9{{schemeDetails?.totalPaidAmount ? schemeDetails?.totalPaidAmount : '0'}}</h2>\r\n                        <p>{{schemeDetails.schemeType === 'GOLD_PROTECTION' ? 'Deposited Amount' : 'Total Available Scheme Amount'}}</p>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"amount-info\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\r\n                      <div class=\"coin-icon\"><img\r\n                              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\r\n                      </div>\r\n                      <div class=\"amount-details\">\r\n                          <h2>{{schemeDetails?.totalInvestedMetal}} gms</h2>\r\n                          <p>Accumulated Gold</p>\r\n                      </div>\r\n                  </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"d-flex align-items-start justify-content-around scheme-section\">\r\n                <div class=\"details_tab\">\r\n                    <div class=\"section-header\">\r\n                        <h3>Passbook Details</h3>\r\n                        <span class=\"redeem-requested\">{{schemeDetails?.passBookStatus ?\r\n                            schemeDetails?.passBookStatus?.replaceAll('_', ' ') : 'N/A'}}</span>\r\n                    </div>\r\n\r\n                    <div class=\"scheme-info\">\r\n                        <div class=\"scheme-name\">\r\n                            <span class=\"label\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :\r\n                                'N/A'}}</span>\r\n                        </div>\r\n                        <div class=\"scheme-id\">\u20B9{{schemeDetails?.installmentAmount ? schemeDetails?.installmentAmount :\r\n                            'N/A'}}\r\n                            Monthly</div>\r\n                    </div>\r\n\r\n                    <div class=\"dates-grid\">\r\n                        <div class=\"date-item\">\r\n                            <div class=\"date-icon\">\uD83D\uDCC5</div>\r\n                            <div class=\"date-info\">\r\n                                <span class=\"date-label\">Scheme started on</span>\r\n                                <span class=\"date-value\">{{schemeDetails?.createdTimestamp ?\r\n                                    (schemeDetails?.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"date-item\">\r\n                            <div class=\"date-icon\">\uD83D\uDCC5</div>\r\n                            <div class=\"date-info\">\r\n                                <span class=\"date-label\">Maturity Date</span>\r\n                                <span class=\"date-value\">{{schemeDetails?.maturityDate ?\r\n                                    (schemeDetails?.maturityDate | date:'mediumDate') : 'N/A' }}</span>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"completion-info\">\r\n                            <span class=\"completion-label\">Completed EMIs</span>\r\n                            <span class=\"completion-value\">{{schemeDetails.dueMonths ?\r\n                                (schemeDetails?.schemePayments?.length-schemeDetails.dueMonths) :\r\n                                0}} out\r\n                                of {{schemeDetails?.schemePayments?.length}}</span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <!-- <div class=\"enrollment-card\">\r\n                    <div class=\"enrollment-row\">\r\n                        <span class=\"enrollment-label\">Group Name</span>\r\n                        <span class=\"enrollment-value\">{{schemeDetails?.schemeName ?\r\n                            schemeDetails?.schemeName :'N/A' }}</span>\r\n                    </div>\r\n\r\n                    <div class=\"enrollment-row\">\r\n                        <span class=\"enrollment-label\">Group Code</span>\r\n                        <span class=\"enrollment-value\">{{schemeDetails.enrollmentGroup?.pwcGroupId ?\r\n                            schemeDetails.enrollmentGroup.pwcGroupId : 'N/A' }}</span>\r\n                    </div>\r\n\r\n                    <div class=\"enrollment-row\">\r\n                        <span class=\"enrollment-label\">Maturity Date</span>\r\n                        <span class=\"enrollment-value\">{{schemeDetails.maturityDate ? (schemeDetails.maturityDate | date\r\n                            : 'dd-MM-yyyy') : 'N/A'}}</span>\r\n                    </div>\r\n                 <div class=\"enrollment-row\">\r\n                        <span class=\"enrollment-label\">Enrollment Id</span>\r\n                        <span class=\"enrollment-value\">{{schemeDetails.enrollmentId ? schemeDetails.enrollmentId : 'N/A'}}</span>\r\n                    </div>\r\n                </div> -->\r\n            </div>\r\n        </div>\r\n        <!-- <div class=\"quick-actions\">\r\n            <h3>Quick Actions</h3>\r\n            <div class=\"actions d-flex flex-column justify-content-evenly\">\r\n                <div class=\"action-item d-flex align-items-center mb-2\">Make Due Payments\r\n                </div>\r\n                <div class=\"action-item d-flex align-items-center\">Add Nominee</div>\r\n                <div class=\"action-item d-flex align-items-center\">Download SOA</div>\r\n            </div>\r\n\r\n            <button class=\"enroll-btn\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/782673c1753434311903SVG (1).png\"> Enroll\r\n                New Scheme</button>\r\n        </div> -->\r\n    </div>\r\n\r\n    <!-- Scheme Details Section -->\r\n    <div class=\"scheme-details\">\r\n        <div class=\"section d-flex-flex-column gap-2\">\r\n            <div class=\"section-header\">\r\n                <h2 class=\"section-title\">Installments</h2>\r\n            </div>\r\n            <div class=\"payment-list d-flex flex-column gap-2\">\r\n                <ng-container *ngIf=\"paymentData.length;else noPayments\">\r\n                    <ng-container *ngFor=\"let payment of paymentData;let i = index\">\r\n                        <div class=\"payment-item\">\r\n                            <div class=\"payment-info\">\r\n                                <div class=\"payment-icon upcoming\"><img\r\n                                        src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\">\r\n                                </div>\r\n                                <div class=\"payment-details\">\r\n                                    <h4>{{schemeDetails?.schemeName ? schemeDetails?.schemeName : 'N/A'}}</h4>\r\n                                    <p>Due Date : {{payment?.dueDate ? (payment?.dueDate | date : 'dd-MM-yyyy') :\r\n                                        'N/A'}}</p>\r\n                                    <p *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && payment.paymentStatus === 'PAID'\">Gold Allocated : {{payment?.totalInvestedMetal}} gms</p>\r\n                                    <p *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\">Gold Allocate today : {{payment?.dueAmount / metalPrice?.price}} gms</p>\r\n                                    <!-- |\r\n                                        Due by: {{getDueDate(payment?.dueDate)}} days</p> -->\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"payment-amount\">\r\n                                <div class=\"amount-value\" *ngIf=\"payment?.dueAmount\">\u20B9{{payment?.dueAmount ?\r\n                                    payment.dueAmount :\r\n                                    'N/A'}}</div>\r\n                                <div class=\"paid-btn payment-status d-flex align-items-center justify-content-center\"\r\n                                    *ngIf=\"payment?.paymentStatus != 'DUE'\">\r\n                                    Paid\r\n                                </div>\r\n                                <div class=\"payment-status pay-now-btn cursor-pointer\"\r\n                                    *ngIf=\"paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\" (click)=\"payDuePayment(payment)\">\r\n                                    <ng-container *ngIf=\"!paymentLoader\">Pay Now</ng-container>\r\n                                    <ng-container *ngIf=\"paymentLoader\">Loading...</ng-container>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                </ng-container>\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>\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\">\r\n                                <span class=\"label\">Gold Allocate:</span>\r\n                                <span class=\"amount\">{{storeCharges?.breakdown?.installmentAmount / metalPrice?.price}} gms</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()\">Continue</button>\r\n                        </div>\r\n                    </div>\r\n                </ng-template>\r\n                <ng-template #showSlab>\r\n                    <div class=\"main_section\">\r\n                        <div class=\"slab_header d-flex justify-content-between align-items-center\">\r\n                            Confirm Redeem Request\r\n                            <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n                        </div>\r\n                        <div class=\"main_body\">\r\n                            <div class=\"container\">\r\n                                <div class=\"card\">\r\n                                    <div class=\"card-title\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :\r\n                                'N/A'}}</div>\r\n                                    <div class=\"info-row\">\r\n                                        <span>Plan started on</span>\r\n                                        <span class=\"value\">{{schemeDetails.createdTimestamp ?\r\n                                            (schemeDetails.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\r\n                                    </div>\r\n                                    <div class=\"info-row\">\r\n                                        <span>Monthly Amount Paid</span>\r\n                                        <span class=\"value\">\u20B9{{schemeDetails?.installmentAmount ?\r\n                                            schemeDetails?.installmentAmount : 'N/A'}}</span>\r\n                                    </div>\r\n                                    <div class=\"info-row\">\r\n                                        <span>Total Amount Paid</span>\r\n                                        <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount ?\r\n                                            schemeDetails?.totalPaidAmount : 'N/A' }}</span>\r\n                                    </div>\r\n                                    <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType !== 'GOLD_PROTECTION' && paidMonth < schemeDetails?.minRedemptionMonth && schemeDetails?.earlyRedemptionCharge\">\r\n                                        <span>Enrollment Fee</span>\r\n                                        <span class=\"value\">\u20B9{{schemeDetails?.earlyRedemptionCharge}}</span>\r\n                                    </div>\r\n                                    <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\r\n                                        <span>Accumulated gold</span>\r\n                                        <span class=\"value\">{{schemeDetails?.totalInvestedMetal}} gms</span>\r\n                                    </div>\r\n                                    <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && paidMonth < schemeDetails?.minRedemptionMonth && schemeDetails?.earlyRedemptionCharge\">\r\n                                        <span>Gold Deducted</span>\r\n                                        <span class=\"value\">{{goldDeducted}} gms</span>\r\n                                    </div>\r\n                                    <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\r\n                                        <span>Accumulated gold after Deduction</span>\r\n                                        <span class=\"value\">{{schemeDetails?.totalInvestedMetal - (paidMonth < schemeDetails?.minRedemptionMonth ? goldDeducted : 0)}} gms</span>\r\n                                    </div>\r\n                                    <div class=\"info-row\">\r\n                                        <span>Total Redeem Amount</span>\r\n                                        <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount - (paidMonth < schemeDetails?.minRedemptionMonth ? schemeDetails?.earlyRedemptionCharge ?? 0 : 0)}}</span>\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <div class=\"card\" *ngIf=\"slabDetails && slabDetails.length > 0\">\r\n                                    <div class=\"card-title center\">Benefits You Will Get</div>\r\n                                    <div class=\"info-row\">\r\n                                        <span>Installments Paid:</span>\r\n                                        <span class=\"value\">{{ schemeDetails?.schemePayments?.length ?\r\n                                            (schemeDetails?.schemePayments?.length -\r\n                                            schemeDetails?.dueMonths) : 'N/A'}}</span>\r\n                                    </div>\r\n                                    <div class=\"info-row\">\r\n                                        <span>Benefit Slab:</span>\r\n                                        <span class=\"value\">{{slabDetails[0]?.minMonths >= 0 ? slabDetails[0]?.minMonths\r\n                                            :\r\n                                            'N/A'}} - {{slabDetails[0]?.maxMonths ? slabDetails[0]?.maxMonths : 'N/A'}}\r\n                                            months</span>\r\n                                    </div>\r\n                                    <div class=\"info-row\">\r\n                                        <span>Benefit Percentage:</span>\r\n                                        <span class=\"value\">{{slabDetails[0].benefitPercentage >= 0 ?\r\n                                            slabDetails[0].benefitPercentage : 'N/A'}}%</span>\r\n                                    </div>\r\n                                    <div class=\"info-row\">\r\n                                        <span>Benefit Amount:</span>\r\n                                        <span class=\"value highlight\">\u20B9{{slabDetails[0]?.benefitAmount >= 0 ?\r\n                                            slabDetails[0]?.benefitAmount : 'N/A'}}</span>\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <button class=\"confirm-btn\" (click)=\"confirmRequest()\"\r\n                                    *ngIf=\"!redeemRequestLoader\">Confirm Request</button>\r\n                                <button class=\"confirm-btn redeem-request-btn\" *ngIf=\"redeemRequestLoader\">\r\n                                    <mat-spinner></mat-spinner>\r\n                                    Requesting..\r\n                                </button>\r\n                            </div>\r\n\r\n                        </div>\r\n                    </div>\r\n                </ng-template>\r\n                <ng-template #noPayments>\r\n                    <div class=\"d-flex justify-content-center align-items-center w-100 h-100\">\r\n                        <span>No Upcoming Payments</span>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </div>\r\n        <div class=\"tabs\">\r\n            <button class=\"tab d-flex justify-content-center align-items-center active\">Transactions</button>\r\n        </div>\r\n        <div class=\"transactions\">\r\n            <ng-container *ngFor=\"let transaction of schemeDetails.schemePayments\">\r\n                <div class=\"transaction-item\" *ngIf=\"transaction.paymentStatus === 'PAID'\">\r\n                    <div class=\"transaction-status paid\"><img\r\n                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/484102c1753446573473Group 1707484906.png\">\r\n                    </div>\r\n                    <div class=\"transaction-details\">\r\n                        <h4>{{transaction.emiMonthCount ? transaction.emiMonthCount : 'N/A' }}st Instalment Paid\r\n                        </h4>\r\n                        <p>Payment Date : {{transaction.paidDate ? (transaction.paidDate | date : 'dd-MM-yyyy') :\r\n                            'N/A'}}\r\n                        </p>\r\n                    </div>\r\n                    <div class=\"transaction-amount\">\r\n                        {{transaction.paidAmount ? ('\u20B9'+transaction.paidAmount) : 'N/A' }}</div>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f5f5;color:#333}.header{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;background-color:#fff;border-bottom:1px solid #e0e0e0}.back-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:7px}.header_left h1{font-size:18px;font-weight:600;flex-grow:1;text-align:center;margin:0 16px}.header-actions{display:flex;gap:8px}.share-btn,.download-btn{font-size:16px;cursor:pointer;padding:9px;border:1px solid lightgrey;border-radius:5px}.details_tab{border:1px solid lightgrey;padding:3%;border-radius:7px;width:62%}.amount-card{background:linear-gradient(90deg,#fffbeb,#fff7ed);margin:16px;padding:20px;border-radius:12px}.amount-info{display:flex;align-items:center;gap:16px}.coin-icon{font-size:32px}.amount-details h2{font-size:24px;font-weight:700;color:#333;margin-bottom:4px}.amount-details p{font-size:14px;color:#666}.scheme-details{padding:0 16px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-title{font-size:18px;font-weight:600}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;margin:12px 0}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.pay-now-btn{background:#10f464}.paid-btn{color:#10f464}.payment-status{font-size:12px;padding:6px;border-radius:4px}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.section-header h3{font-size:18px;font-weight:600}.redeem-requested{background-color:#fff3e0;color:#e65100;padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500}.scheme-info{margin-bottom:24px}.scheme-name{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.scheme-name .label{font-size:16px;font-weight:600}.scheme-name .redeem-status{background-color:#e8f5e8;color:#2e7d32;padding:4px 12px;border-radius:16px;font-size:12px}.scheme-id{color:#666;font-size:14px}.dates-grid{display:flex;gap:16px;border-top:1px solid lightgrey;justify-content:space-between;padding-top:11px}.date-item{display:flex;align-items:center;gap:8px}.date-icon{font-size:16px}.date-info{display:flex;flex-direction:column}.date-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.date-value{font-size:11px;font-weight:500}.completion-info{display:flex;flex-direction:column;align-items:flex-start;grid-column:span 2}.completion-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.completion-value{font-size:11px;font-weight:500}.tabs{display:flex;border-bottom:1px solid #e0e0e0;margin:20px 0;height:5vh;background:#d3d3d3;align-items:center;padding:0 1%;width:fit-content;border-radius:30px}.tab{background:none;border:none;font-size:10px!important;cursor:pointer;border-bottom:2px solid transparent;color:#666;width:6vw!important;height:80%!important}.tab.active{color:#333;border-radius:30px;font-weight:500;background-color:#fff}.transactions{display:flex;flex-direction:column;gap:16px;padding-bottom:20px}.transaction-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid lightgrey;border-radius:8px}.transaction-status{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}.underline{text-decoration:underline}.transaction-status img{width:100%}.transaction-status.paid{background-color:#4caf50;color:#fff}.transaction-status.due{background-color:#e0e0e0;border:2px solid #bdbdbd}.transaction-details{flex-grow:1}.transaction-details h4{font-size:14px;font-weight:500;margin-bottom:2px}.transaction-details p{font-size:12px;color:#666}.transaction-amount{font-size:16px;font-weight:600}@media (max-width: 480px){.dates-grid{grid-template-columns:1fr}.amount-info{justify-content:space-between}.top-dashboard{flex-direction:column}.completion-info{grid-column:span 1;align-items:flex-start}.header{padding:20px 0}.redeem_request{white-space:nowrap;font-size:.7rem!important}.header_left h1{white-space:nowrap;margin:0 6px}}.scheme-section{flex-direction:column;gap:1rem}.details_tab{width:100%;border-radius:12px}.redeem_request{padding:.3rem .6rem;border-radius:4px;font-weight:700;font-size:14px;border:2px solid}.section{padding:12px!important;max-height:75vh;overflow-y:scroll}.upcoming-status{display:flex;justify-content:center;align-items:center;height:35px;white-space:nowrap}.payment-details p{font-size:12px}.tab{width:22vw!important}.scheme-details{padding:0}.enrollment-card{width:100%!important}.amount-card{margin:0 0 12px}.amount-card-section{flex-direction:column}.actions{height:70%}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.enrollment-card{background:#fff;border-radius:12px;padding:0 24px;border:1px solid lightgrey;width:30%}.section{background:#fff;border-radius:12px;padding:24px;margin:24px 0;border:1px solid #e9ecef}.enrollment-row{display:flex;justify-content:space-between;align-items:center;padding:10.5px 0;border-bottom:1px solid #f0f0f0}.enrollment-row:last-child{border-bottom:none}.enrollment-label{color:#666;font-size:14px;font-weight:500}.enrollment-value{color:#333;font-size:14px;font-weight:600}.enrollment-value.zero{color:#ef4444}.container{max-width:400px;margin:32px auto;padding:0 16px}.card{background:#fff;border-radius:16px;box-shadow:0 2px 10px #00000012;padding:22px 18px 14px;margin-bottom:18px}.card-title{font-weight:600;color:#222;font-size:1.18rem;margin-bottom:10px}.card-title.center{text-align:center;font-size:1.09rem;margin-bottom:16px}.info-row{display:flex;justify-content:space-between;align-items:center;font-size:.99rem;margin-top:7px;margin-bottom:0}.info-row .value{font-weight:500;color:#212121}.main_section{min-width:35vw}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.slab_header{padding:2% 3%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:700;font-size:19px;border-bottom:1px solid lightgrey}.info-row .highlight{border-radius:3px;padding:2px 7px;font-weight:600}.confirm-btn{width:100%;display:block;background:#e22d2f;color:#fff;border:none;outline:none;font-size:1.04rem;font-weight:600;padding:8px 0;border-radius:8px;box-shadow:0 1px 4px #e22d2f33;cursor:pointer;margin-top:18px;letter-spacing:.03em;transition:background .2s}.confirm-btn:hover{background:#c31113}.redeem-request-btn{justify-content:center;display:flex;align-items:center;gap:10px}.redeem-request-btn mat-spinner{height:25px!important;width:25px!important}.top-dashboard{display:flex;justify-content:space-between}\n"] }]
+            args: [{ selector: 'simpo-scheme-details', standalone: true, imports: [MatIcon, CommonModule, MatProgressSpinner, MatProgressSpinnerModule, ToastModule], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<div class=\"w-100 h-100\">\n    <!-- Header -->\n    <div class=\"header\">\n        <div class=\"header_left d-flex justify-content-between align-items-center\">\n            <div class=\"back-btn d-flex align-items-center\" (click)=\"goBack()\"><mat-icon>keyboard_backspace</mat-icon>\n            </div>\n            <h1>Passbook Details</h1>\n        </div>\n        <div class=\"redeem_request cursor-pointer\" [style.borderColor]=\"styles?.background?.accentColor\"\n            [style.color]=\"styles?.background?.accentColor\" (click)=\"showBenefitSlab()\"\n            *ngIf=\"schemeDetails?.passBookStatus == 'ACTIVE'\">Raise Redeem Request</div>\n    </div>\n\n    <!-- Amount Card -->\n    <div class=\"d-flex justify-content-between amount-card-section\">\n        <div class=\"w-100\">\n            <div class=\"amount-card\">\n                <div class=\"top-dashboard\">\n                  <div class=\"amount-info\">\n                    <div class=\"coin-icon\"><img\n                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\n                    </div>\n                    <div class=\"amount-details\">\n                        <h2>\u20B9{{schemeDetails?.totalPaidAmount ? schemeDetails?.totalPaidAmount : '0'}}</h2>\n                        <p>{{schemeDetails.schemeType === 'GOLD_PROTECTION' ? 'Deposited Amount' : 'Total Available Scheme Amount'}}</p>\n                    </div>\n                  </div>\n                  <div class=\"amount-info\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\n                      <div class=\"coin-icon\"><img\n                              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\n                      </div>\n                      <div class=\"amount-details\">\n                          <h2>{{schemeDetails?.totalInvestedMetal}} gms</h2>\n                          <p>Accumulated Gold</p>\n                      </div>\n                  </div>\n                </div>\n            </div>\n            <div class=\"d-flex align-items-start justify-content-around scheme-section\">\n                <div class=\"details_tab\">\n                    <div class=\"section-header\">\n                        <h3>Passbook Details</h3>\n                        <span class=\"redeem-requested\">{{schemeDetails?.passBookStatus ?\n                            schemeDetails?.passBookStatus?.replaceAll('_', ' ') : 'N/A'}}</span>\n                    </div>\n\n                    <div class=\"scheme-info\">\n                        <div class=\"scheme-name\">\n                            <span class=\"label\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :\n                                'N/A'}}</span>\n                        </div>\n                        <div class=\"scheme-id\">\u20B9{{schemeDetails?.installmentAmount ? schemeDetails?.installmentAmount :\n                            'N/A'}}\n                            Monthly</div>\n                    </div>\n\n                    <div class=\"dates-grid\">\n                        <div class=\"date-item\">\n                            <div class=\"date-icon\">\uD83D\uDCC5</div>\n                            <div class=\"date-info\">\n                                <span class=\"date-label\">Scheme started on</span>\n                                <span class=\"date-value\">{{schemeDetails?.createdTimestamp ?\n                                    (schemeDetails?.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\n                            </div>\n                        </div>\n                        <div class=\"date-item\">\n                            <div class=\"date-icon\">\uD83D\uDCC5</div>\n                            <div class=\"date-info\">\n                                <span class=\"date-label\">Maturity Date</span>\n                                <span class=\"date-value\">{{schemeDetails?.maturityDate ?\n                                    (schemeDetails?.maturityDate | date:'mediumDate') : 'N/A' }}</span>\n                            </div>\n                        </div>\n                        <div class=\"completion-info\">\n                            <span class=\"completion-label\">Completed EMIs</span>\n                            <span class=\"completion-value\">{{schemeDetails.dueMonths ?\n                                (schemeDetails?.schemePayments?.length-schemeDetails.dueMonths) :\n                                0}} out\n                                of {{schemeDetails?.schemePayments?.length}}</span>\n                        </div>\n                    </div>\n                </div>\n                <!-- <div class=\"enrollment-card\">\n                    <div class=\"enrollment-row\">\n                        <span class=\"enrollment-label\">Group Name</span>\n                        <span class=\"enrollment-value\">{{schemeDetails?.schemeName ?\n                            schemeDetails?.schemeName :'N/A' }}</span>\n                    </div>\n\n                    <div class=\"enrollment-row\">\n                        <span class=\"enrollment-label\">Group Code</span>\n                        <span class=\"enrollment-value\">{{schemeDetails.enrollmentGroup?.pwcGroupId ?\n                            schemeDetails.enrollmentGroup.pwcGroupId : 'N/A' }}</span>\n                    </div>\n\n                    <div class=\"enrollment-row\">\n                        <span class=\"enrollment-label\">Maturity Date</span>\n                        <span class=\"enrollment-value\">{{schemeDetails.maturityDate ? (schemeDetails.maturityDate | date\n                            : 'dd-MM-yyyy') : 'N/A'}}</span>\n                    </div>\n                 <div class=\"enrollment-row\">\n                        <span class=\"enrollment-label\">Enrollment Id</span>\n                        <span class=\"enrollment-value\">{{schemeDetails.enrollmentId ? schemeDetails.enrollmentId : 'N/A'}}</span>\n                    </div>\n                </div> -->\n            </div>\n        </div>\n        <!-- <div class=\"quick-actions\">\n            <h3>Quick Actions</h3>\n            <div class=\"actions d-flex flex-column justify-content-evenly\">\n                <div class=\"action-item d-flex align-items-center mb-2\">Make Due Payments\n                </div>\n                <div class=\"action-item d-flex align-items-center\">Add Nominee</div>\n                <div class=\"action-item d-flex align-items-center\">Download SOA</div>\n            </div>\n\n            <button class=\"enroll-btn\"><img\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/782673c1753434311903SVG (1).png\"> Enroll\n                New Scheme</button>\n        </div> -->\n    </div>\n\n    <!-- Scheme Details Section -->\n    <div class=\"scheme-details\">\n        <div class=\"section d-flex-flex-column gap-2\">\n            <div class=\"section-header\">\n                <h2 class=\"section-title\">Installments</h2>\n            </div>\n            <div class=\"payment-list d-flex flex-column gap-2\">\n                <ng-container *ngIf=\"paymentData.length;else noPayments\">\n                    <ng-container *ngFor=\"let payment of paymentData;let i = index\">\n                        <div class=\"payment-item\">\n                            <div class=\"payment-info\">\n                                <div class=\"payment-icon upcoming\"><img\n                                        src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\">\n                                </div>\n                                <div class=\"payment-details\">\n                                    <h4>{{schemeDetails?.schemeName ? schemeDetails?.schemeName : 'N/A'}}</h4>\n                                    <p>Due Date : {{payment?.dueDate ? (payment?.dueDate | date : 'dd-MM-yyyy') :\n                                        'N/A'}}</p>\n                                    <p *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && payment.paymentStatus === 'PAID'\">Gold Allocated : {{payment?.totalInvestedMetal}} gms</p>\n                                    <p *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\">Gold Allocate today : {{payment?.dueAmount / metalPrice?.price}} gms</p>\n                                    <!-- |\n                                        Due by: {{getDueDate(payment?.dueDate)}} days</p> -->\n                                </div>\n                            </div>\n                            <div class=\"payment-amount\">\n                                <div class=\"amount-value\" *ngIf=\"payment?.dueAmount\">\u20B9{{payment?.dueAmount ?\n                                    payment.dueAmount :\n                                    'N/A'}}</div>\n                                <div class=\"paid-btn payment-status d-flex align-items-center justify-content-center\"\n                                    *ngIf=\"payment?.paymentStatus != 'DUE'\">\n                                    Paid\n                                </div>\n                                <div class=\"payment-status pay-now-btn cursor-pointer\"\n                                    *ngIf=\"paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\" (click)=\"payDuePayment(payment)\">\n                                    <ng-container *ngIf=\"!paymentLoader\">Pay Now</ng-container>\n                                    <ng-container *ngIf=\"paymentLoader\">Loading...</ng-container>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-container>\n                </ng-container>\n                <ng-template #showCharges>\n                    <div class=\"payment-dialog\">\n                        <div class=\"dialog-header\">\n                            <h2>Payment Details</h2>\n                            <button class=\"close-btn\" mat-icon-button>\n                                <mat-icon>close</mat-icon>\n                            </button>\n                        </div>\n\n                        <div class=\"payment-content\">\n                            <div class=\"payment-row\">\n                                <span class=\"label\">Installment Amount:</span>\n                                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\n                                    (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\n                            </div>\n\n                            <div class=\"payment-row\">\n                                <span class=\"label\">Convenience Fee:</span>\n                                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\n                                    (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\n                            </div>\n\n                            <div class=\"payment-row\">\n                                <span class=\"label\">Payment Service Charges:</span>\n                                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\n                                    (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\n                            </div>\n\n                            <div class=\"payment-row\">\n                                <span class=\"label\">Gold Allocate:</span>\n                                <span class=\"amount\">{{storeCharges?.breakdown?.installmentAmount / metalPrice?.price}} gms</span>\n                            </div>\n\n                            <div class=\"payment-row total-row\">\n                                <span class=\"label total-label\">Total Amount:</span>\n                                <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\n                                    (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\n                            </div>\n                        </div>\n\n                        <div class=\"dialog-actions\">\n                            <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\n                        </div>\n                    </div>\n                </ng-template>\n                <ng-template #showSlab>\n                    <div class=\"main_section\">\n                        <div class=\"slab_header d-flex justify-content-between align-items-center\">\n                            Confirm Redeem Request\n                            <mat-icon (click)=\"closeDialog()\">close</mat-icon>\n                        </div>\n                        <div class=\"main_body\">\n                            <div class=\"container\">\n                                <div class=\"card\">\n                                    <div class=\"card-title\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :\n                                'N/A'}}</div>\n                                    <div class=\"info-row\">\n                                        <span>Plan started on</span>\n                                        <span class=\"value\">{{schemeDetails.createdTimestamp ?\n                                            (schemeDetails.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\n                                    </div>\n                                    <div class=\"info-row\">\n                                        <span>Monthly Amount Paid</span>\n                                        <span class=\"value\">\u20B9{{schemeDetails?.installmentAmount ?\n                                            schemeDetails?.installmentAmount : 'N/A'}}</span>\n                                    </div>\n                                    <div class=\"info-row\">\n                                        <span>Total Amount Paid</span>\n                                        <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount ?\n                                            schemeDetails?.totalPaidAmount : 'N/A' }}</span>\n                                    </div>\n                                    <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType !== 'GOLD_PROTECTION' && paidMonth < schemeDetails?.minRedemptionMonth && schemeDetails?.earlyRedemptionCharge\">\n                                        <span>Enrollment Fee</span>\n                                        <span class=\"value\">\u20B9{{schemeDetails?.earlyRedemptionCharge}}</span>\n                                    </div>\n                                    <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\n                                        <span>Accumulated gold</span>\n                                        <span class=\"value\">{{schemeDetails?.totalInvestedMetal}} gms</span>\n                                    </div>\n                                    <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && paidMonth < schemeDetails?.minRedemptionMonth && schemeDetails?.earlyRedemptionCharge\">\n                                        <span>Gold Deducted</span>\n                                        <span class=\"value\">{{goldDeducted}} gms</span>\n                                    </div>\n                                    <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\n                                        <span>Accumulated gold after Deduction</span>\n                                        <span class=\"value\">{{schemeDetails?.totalInvestedMetal - (paidMonth < schemeDetails?.minRedemptionMonth ? goldDeducted : 0)}} gms</span>\n                                    </div>\n                                    <div class=\"info-row\">\n                                        <span>Total Redeem Amount</span>\n                                        <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount - (paidMonth < schemeDetails?.minRedemptionMonth ? schemeDetails?.earlyRedemptionCharge ?? 0 : 0)}}</span>\n                                    </div>\n                                </div>\n\n                                <div class=\"card\" *ngIf=\"slabDetails && slabDetails.length > 0\">\n                                    <div class=\"card-title center\">Benefits You Will Get</div>\n                                    <div class=\"info-row\">\n                                        <span>Installments Paid:</span>\n                                        <span class=\"value\">{{ schemeDetails?.schemePayments?.length ?\n                                            (schemeDetails?.schemePayments?.length -\n                                            schemeDetails?.dueMonths) : 'N/A'}}</span>\n                                    </div>\n                                    <div class=\"info-row\">\n                                        <span>Benefit Slab:</span>\n                                        <span class=\"value\">{{slabDetails[0]?.minMonths >= 0 ? slabDetails[0]?.minMonths\n                                            :\n                                            'N/A'}} - {{slabDetails[0]?.maxMonths ? slabDetails[0]?.maxMonths : 'N/A'}}\n                                            months</span>\n                                    </div>\n                                    <div class=\"info-row\">\n                                        <span>Benefit Percentage:</span>\n                                        <span class=\"value\">{{slabDetails[0].benefitPercentage >= 0 ?\n                                            slabDetails[0].benefitPercentage : 'N/A'}}%</span>\n                                    </div>\n                                    <div class=\"info-row\">\n                                        <span>Benefit Amount:</span>\n                                        <span class=\"value highlight\">\u20B9{{slabDetails[0]?.benefitAmount >= 0 ?\n                                            slabDetails[0]?.benefitAmount : 'N/A'}}</span>\n                                    </div>\n                                </div>\n\n                                <button class=\"confirm-btn\" (click)=\"confirmRequest()\"\n                                    *ngIf=\"!redeemRequestLoader\">Confirm Request</button>\n                                <button class=\"confirm-btn redeem-request-btn\" *ngIf=\"redeemRequestLoader\">\n                                    <mat-spinner></mat-spinner>\n                                    Requesting..\n                                </button>\n                            </div>\n\n                        </div>\n                    </div>\n                </ng-template>\n                <ng-template #noPayments>\n                    <div class=\"d-flex justify-content-center align-items-center w-100 h-100\">\n                        <span>No Upcoming Payments</span>\n                    </div>\n                </ng-template>\n            </div>\n        </div>\n        <div class=\"tabs\">\n            <button class=\"tab d-flex justify-content-center align-items-center active\">Transactions</button>\n        </div>\n        <div class=\"transactions\">\n            <ng-container *ngFor=\"let transaction of schemeDetails.schemePayments\">\n                <div class=\"transaction-item\" *ngIf=\"transaction.paymentStatus === 'PAID'\">\n                    <div class=\"transaction-status paid\"><img\n                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/484102c1753446573473Group 1707484906.png\">\n                    </div>\n                    <div class=\"transaction-details\">\n                        <h4>{{transaction.emiMonthCount ? transaction.emiMonthCount : 'N/A' }}st Instalment Paid\n                        </h4>\n                        <p>Payment Date : {{transaction.paidDate ? (transaction.paidDate | date : 'dd-MM-yyyy') :\n                            'N/A'}}\n                        </p>\n                    </div>\n                    <div class=\"transaction-amount\">\n                        {{transaction.paidAmount ? ('\u20B9'+transaction.paidAmount) : 'N/A' }}</div>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f5f5;color:#333}.header{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;background-color:#fff;border-bottom:1px solid #e0e0e0}.back-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:7px}.header_left h1{font-size:18px;font-weight:600;flex-grow:1;text-align:center;margin:0 16px}.header-actions{display:flex;gap:8px}.share-btn,.download-btn{font-size:16px;cursor:pointer;padding:9px;border:1px solid lightgrey;border-radius:5px}.details_tab{border:1px solid lightgrey;padding:3%;border-radius:7px;width:62%}.amount-card{background:linear-gradient(90deg,#fffbeb,#fff7ed);margin:16px;padding:20px;border-radius:12px}.amount-info{display:flex;align-items:center;gap:16px}.coin-icon{font-size:32px}.amount-details h2{font-size:24px;font-weight:700;color:#333;margin-bottom:4px}.amount-details p{font-size:14px;color:#666}.scheme-details{padding:0 16px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-title{font-size:18px;font-weight:600}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;margin:12px 0}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.pay-now-btn{background:#10f464}.paid-btn{color:#10f464}.payment-status{font-size:12px;padding:6px;border-radius:4px}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.section-header h3{font-size:18px;font-weight:600}.redeem-requested{background-color:#fff3e0;color:#e65100;padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500}.scheme-info{margin-bottom:24px}.scheme-name{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.scheme-name .label{font-size:16px;font-weight:600}.scheme-name .redeem-status{background-color:#e8f5e8;color:#2e7d32;padding:4px 12px;border-radius:16px;font-size:12px}.scheme-id{color:#666;font-size:14px}.dates-grid{display:flex;gap:16px;border-top:1px solid lightgrey;justify-content:space-between;padding-top:11px}.date-item{display:flex;align-items:center;gap:8px}.date-icon{font-size:16px}.date-info{display:flex;flex-direction:column}.date-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.date-value{font-size:11px;font-weight:500}.completion-info{display:flex;flex-direction:column;align-items:flex-start;grid-column:span 2}.completion-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.completion-value{font-size:11px;font-weight:500}.tabs{display:flex;border-bottom:1px solid #e0e0e0;margin:20px 0;height:5vh;background:#d3d3d3;align-items:center;padding:0 1%;width:fit-content;border-radius:30px}.tab{background:none;border:none;font-size:10px!important;cursor:pointer;border-bottom:2px solid transparent;color:#666;width:6vw!important;height:80%!important}.tab.active{color:#333;border-radius:30px;font-weight:500;background-color:#fff}.transactions{display:flex;flex-direction:column;gap:16px;padding-bottom:20px}.transaction-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid lightgrey;border-radius:8px}.transaction-status{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}.underline{text-decoration:underline}.transaction-status img{width:100%}.transaction-status.paid{background-color:#4caf50;color:#fff}.transaction-status.due{background-color:#e0e0e0;border:2px solid #bdbdbd}.transaction-details{flex-grow:1}.transaction-details h4{font-size:14px;font-weight:500;margin-bottom:2px}.transaction-details p{font-size:12px;color:#666}.transaction-amount{font-size:16px;font-weight:600}@media (max-width: 480px){.dates-grid{grid-template-columns:1fr}.amount-info{justify-content:space-between}.top-dashboard{flex-direction:column}.completion-info{grid-column:span 1;align-items:flex-start}.header{padding:20px 0}.redeem_request{white-space:nowrap;font-size:.7rem!important}.header_left h1{white-space:nowrap;margin:0 6px}}.scheme-section{flex-direction:column;gap:1rem}.details_tab{width:100%;border-radius:12px}.redeem_request{padding:.3rem .6rem;border-radius:4px;font-weight:700;font-size:14px;border:2px solid}.section{padding:12px!important;max-height:75vh;overflow-y:scroll}.upcoming-status{display:flex;justify-content:center;align-items:center;height:35px;white-space:nowrap}.payment-details p{font-size:12px}.tab{width:22vw!important}.scheme-details{padding:0}.enrollment-card{width:100%!important}.amount-card{margin:0 0 12px}.amount-card-section{flex-direction:column}.actions{height:70%}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.enrollment-card{background:#fff;border-radius:12px;padding:0 24px;border:1px solid lightgrey;width:30%}.section{background:#fff;border-radius:12px;padding:24px;margin:24px 0;border:1px solid #e9ecef}.enrollment-row{display:flex;justify-content:space-between;align-items:center;padding:10.5px 0;border-bottom:1px solid #f0f0f0}.enrollment-row:last-child{border-bottom:none}.enrollment-label{color:#666;font-size:14px;font-weight:500}.enrollment-value{color:#333;font-size:14px;font-weight:600}.enrollment-value.zero{color:#ef4444}.container{max-width:400px;margin:32px auto;padding:0 16px}.card{background:#fff;border-radius:16px;box-shadow:0 2px 10px #00000012;padding:22px 18px 14px;margin-bottom:18px}.card-title{font-weight:600;color:#222;font-size:1.18rem;margin-bottom:10px}.card-title.center{text-align:center;font-size:1.09rem;margin-bottom:16px}.info-row{display:flex;justify-content:space-between;align-items:center;font-size:.99rem;margin-top:7px;margin-bottom:0}.info-row .value{font-weight:500;color:#212121}.main_section{min-width:35vw}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.slab_header{padding:2% 3%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:700;font-size:19px;border-bottom:1px solid lightgrey}.info-row .highlight{border-radius:3px;padding:2px 7px;font-weight:600}.confirm-btn{width:100%;display:block;background:#e22d2f;color:#fff;border:none;outline:none;font-size:1.04rem;font-weight:600;padding:8px 0;border-radius:8px;box-shadow:0 1px 4px #e22d2f33;cursor:pointer;margin-top:18px;letter-spacing:.03em;transition:background .2s}.confirm-btn:hover{background:#c31113}.redeem-request-btn{justify-content:center;display:flex;align-items:center;gap:10px}.redeem-request-btn mat-spinner{height:25px!important;width:25px!important}.top-dashboard{display:flex;justify-content:space-between}\n"] }]
         }], ctorParameters: () => [{ type: StorageServiceService }, { type: RestService }, { type: i1$2.MatDialog }, { type: EventsService }, { type: i2$2.Router }, { type: i6$1.MessageService }], propDecorators: { schemeDetails: [{
                 type: Input,
                 args: ["schemeDetails"]
@@ -23101,11 +23101,11 @@ class ListHomeAppointmentComponent {
         this.appointmentDetails = null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListHomeAppointmentComponent, deps: [{ token: RestService }, { token: StorageServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ListHomeAppointmentComponent, isStandalone: true, selector: "simpo-list-home-appointment", ngImport: i0, template: "<section>\r\n  <div class=\"row\" *ngIf=\"currentTab === 'BOOKING_LIST'\">\r\n    <div *ngIf=\"homeAppointmentList.length == 0\">\r\n      <ng-container *ngTemplateOutlet=\"showEmptyScreen\"></ng-container>\r\n    </div>\r\n    <div *ngFor=\"let appointment of homeAppointmentList\" class=\"col-md-4 col-12\">\r\n      <ng-container *ngTemplateOutlet=\"appointmentCard;context:{data: appointment}\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"currentTab === 'BOOKING_DETAIL'\">\r\n    <ng-container *ngTemplateOutlet=\"BookingDetail\"></ng-container>\r\n  </div>\r\n</section>\r\n<ng-template #appointmentCard let-appointment=\"data\">\r\n  <div class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\" (click)=\"viewBookingDetail(appointment)\">\r\n    <div class=\"card-body p-3\">\r\n      <!-- Header Section -->\r\n      <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n        <div class=\"order-number\">\r\n          <h4 class=\"mb-0  fw-semibold\">{{appointment.appointmentDisplayId}}</h4>\r\n        </div>\r\n        <div class=\"arrow-icon\">\r\n          <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n        </div>\r\n      </div>\r\n      <!-- Middle Section -->\r\n      <div class=\"order-details\">\r\n        <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-3\">\r\n          <span class=\"text-muted small mb-3 mb-sm-0\">\r\n            {{appointment.time}} {{appointment.date}}\r\n          </span>\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex justify-content-between align-items-center\">\r\n        <!-- <div class=\"amount-section\">\r\n          <span class=\"h5 mb-0 text-success fw-bold\">\r\n            <span [innerHTML]=\"currency\"></span>\r\n            123\r\n          </span>\r\n        </div> -->\r\n        <div class=\"status-section\">\r\n          <span [attr.class]=\"appointment.status + ' order-status'\">\r\n            {{appointment.status.replaceAll('_', ' ')}}\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #BookingDetail>\r\n  <ng-container>\r\n    <div class=\"container-fluid\">\r\n\r\n      <!-- Header Section -->\r\n      <div class=\"row\">\r\n        <div class=\"col-12\">\r\n          <div class=\"d-flex align-items-center gap-3\">\r\n            <mat-icon (click)=\"backToAppointmentList()\" class=\"cursor-pointer\">keyboard_backspace</mat-icon>\r\n            <h3 class=\"fw-bold text-dark mb-0\">{{appointmentDetails.appointmentDisplayId}}</h3>\r\n          </div>\r\n          <div class=\"d-flex flex-wrap gap-2 mb-2\">\r\n            <span class=\"d-flex align-items-center text-muted\">\r\n              <mat-icon class=\"fs-5 d-flex align-items-center justify-content-start\">schedule</mat-icon>\r\n              <small>{{appointmentDetails.time}} {{appointmentDetails.date}}</small>\r\n            </span>\r\n            <span class=\"d-flex align-items-center text-muted\">\r\n              <mat-icon class=\"fs-5 d-flex align-items-center justify-content-center\">shopping_bag</mat-icon>\r\n              <small>{{appointmentDetails?.items?.length ?? 0}}\r\n                items</small>\r\n            </span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Mobile Header -->\r\n      <!-- <div class=\"card border-0 shadow-sm mb-3\" *ngIf=\"isMobile\">\r\n        <div class=\"card-body d-flex justify-content-between align-items-center py-3\">\r\n          <h2 class=\"h4 mb-0 fw-semibold\">{{appointmentDetails.appointmentDisplayId}}</h2>\r\n          <div></div>\r\n        </div>\r\n      </div> -->\r\n\r\n      <div class=\"row g-4\">\r\n        <!-- Left Column -->\r\n        <div class=\"col-12\" [ngClass]=\"{'col-lg-8': !isMobile}\">\r\n\r\n          <!-- Timeline for Desktop -->\r\n\r\n          <!-- Items Section -->\r\n          <div class=\"card border-0 shadow-sm mb-4\">\r\n            <div class=\"card-header py-3\">\r\n              <h4 class=\"h5 mb-0 d-flex align-items-center gap-2 f-16\">\r\n                <mat-icon>shopping_cart</mat-icon>\r\n                Items\r\n              </h4>\r\n            </div>\r\n            <div class=\"card-body p-4 scroll-45\">\r\n              <div class=\"row g-3\">\r\n                <div class=\"col-12\" *ngFor=\"let item of appointmentDetails?.items ?? []\">\r\n                  <div class=\"item\">\r\n                    <div class=\"item-image\" *ngIf=\"!item.imgUrl\">\r\n                      NO IMAGE<br>AVAILABLE\r\n                    </div>\r\n                    <img class=\"item-image\" [src]=\"item.imgUrl\" alt=\"\" *ngIf=\"item.imgUrl\">\r\n                    <div class=\"item-details\">\r\n                      <div class=\"item-name\">{{item.itemName}}</div>\r\n                      <!-- <div class=\"item-description\">High-quality test item with advanced features and premium materials</div> -->\r\n                      <!-- <div class=\"item-meta\">\r\n                            <span>SKU: TST-001</span>\r\n                            <span>Qty: 1</span>\r\n                            <span>Weight: 2.5 lbs</span>\r\n                        </div> -->\r\n                    </div>\r\n                    <div class=\"item-price\">\r\n                      <div class=\"current-price\">\u20B9{{item.discountedPrice}}</div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Timeline for Mobile -->\r\n          <!-- <ng-container *ngIf=\"isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"timelineContainer\"></ng-container>\r\n          </ng-container> -->\r\n        </div>\r\n\r\n        <!-- Right Column -->\r\n        <div class=\"col-12 scroll-60\" [ngClass]=\"{'col-lg-4': !isMobile}\">\r\n\r\n          <!-- Bill Details -->\r\n          <div class=\"card border-0 shadow-sm mb-4\">\r\n            <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('billDetails')\">\r\n              <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\r\n                <div class=\"d-flex align-items-center gap-2\">\r\n                  <mat-icon>receipt</mat-icon>\r\n                  Bill Details\r\n                </div>\r\n                <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.billDetails\">\r\n                  expand_more\r\n                </mat-icon>\r\n              </h4>\r\n            </div>\r\n            <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.billDetails\">\r\n              <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\r\n                <span class=\"d-flex align-items-center gap-2 text-muted\">\r\n                  Free Trial\r\n                </span>\r\n                <span class=\"fw-semibold text-success h6 mb-0\">\r\n                  <span [innerHTML]=\"currency\"></span>0\r\n                </span>\r\n              </div>\r\n\r\n              <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\r\n                <span class=\"d-flex align-items-center gap-2 text-muted\">\r\n                  Service Charge\r\n                </span>\r\n                <span class=\"fw-bold text-success h6 mb-0\">FREE</span>\r\n              </div>\r\n\r\n              <div class=\"d-flex justify-content-between align-items-center py-3  rounded\">\r\n                <span class=\"fw-bold h5 mb-0 text-dark fs-1\">Grand Total</span>\r\n                <span class=\"fw-bold h4 mb-0 fs-1\">\r\n                  <span [innerHTML]=\"currency\"></span>0\r\n                </span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Customer Details -->\r\n          <div class=\"card border-0 shadow-sm mb-4\">\r\n            <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('deliveryDetails')\">\r\n              <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\r\n                <div class=\"d-flex align-items-center gap-2\">\r\n                  <mat-icon>person</mat-icon>\r\n                  Customer Details\r\n                </div>\r\n                <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.deliveryDetails\">\r\n                  expand_more\r\n                </mat-icon>\r\n              </h4>\r\n            </div>\r\n            <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.deliveryDetails\">\r\n              <div class=\"mb-3\">\r\n                <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\r\n                  <div>\r\n                    <small class=\"text-muted d-block\">Name</small>\r\n                    <span class=\"fw-semibold\">{{appointmentDetails.addressDetails.receiverName}}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"mb-3\">\r\n                <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\r\n                  <div>\r\n                    <small class=\"text-muted d-block\">Phone</small>\r\n                    <span class=\"fw-semibold\">{{appointmentDetails.addressDetails.receiverPhone}}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"mb-3\">\r\n                <div class=\"d-flex align-items-start gap-3 p-2 bg-light rounded\">\r\n                  <div>\r\n                    <small class=\"text-muted d-block\">Address</small>\r\n                    <span class=\"fw-semibold\">{{appointmentDetails.addressDetails.addressLine1}}\r\n                      {{appointmentDetails.addressDetails.zipCode}} {{appointmentDetails.addressDetails.cityName}}\r\n                      {{appointmentDetails.addressDetails.stateName}}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Timeline Section for Desktop -->\r\n          <div class=\"card border-0 shadow-sm mb-4\">\r\n            <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('timeline')\">\r\n              <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\r\n\r\n    \">\r\n                <div class=\"d-flex align-items-center gap-2\">\r\n                  <mat-icon>timeline</mat-icon>\r\n                  Order Timeline\r\n                </div>\r\n                <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.timeline\">\r\n                  expand_more\r\n                </mat-icon>\r\n              </h4>\r\n            </div>\r\n            <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.timeline\">\r\n              <p-timeline [value]=\"orderTimiline\">\r\n                <ng-template pTemplate=\"content\" let-event>\r\n                  <div class=\"d-flex align-items-start gap-3 py-3\">\r\n                    <div class=\"rounded-circle p-2 d-flex align-items-center justify-content-center\"\r\n                      style=\"width: 40px; height: 40px;\">\r\n                      <mat-icon class=\"fs-6 d-flex align-items-center justify-content-center\">{{\r\n                        event.icon }}</mat-icon>\r\n                    </div>\r\n                    <div class=\"flex-grow-1\">\r\n                      <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") |\r\n                        titlecase }} {{event.status.replaceAll('_', ' ')}}</h6>\r\n                      <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") }}</p>\r\n                    </div>\r\n                  </div>\r\n                </ng-template>\r\n              </p-timeline>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <!-- Timeline Template -->\r\n  <ng-template #timelineContainer>\r\n    <div class=\"card border-0 shadow-sm mb-4\">\r\n      <div class=\"card-header bg-warning text-dark py-2 f-16\">\r\n        <h4 class=\"h5 mb-0 d-flex align-items-center gap-2\">\r\n          <mat-icon>timeline</mat-icon>\r\n          Order Timeline\r\n        </h4>\r\n      </div>\r\n      <div class=\"card-body p-4\">\r\n        <p-timeline [value]=\"orderTimiline\">\r\n          <ng-template pTemplate=\"content\" let-event>\r\n            <div class=\"d-flex align-items-start gap-3 py-3\">\r\n              <div class=\"bg-primary rounded-circle p-2 d-flex align-items-center justify-content-center\"\r\n                style=\"width: 40px; height: 40px;\">\r\n                <mat-icon class=\"text-white fs-6 d-flex align-items-center justify-content-center\">{{\r\n                  event.icon }}</mat-icon>\r\n              </div>\r\n              <div class=\"flex-grow-1\">\r\n                <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") | titlecase }}\r\n                </h6>\r\n                <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") | titlecase }}</p>\r\n              </div>\r\n            </div>\r\n          </ng-template>\r\n        </p-timeline>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <!-- Loading Skeleton -->\r\n  <div class=\"container-fluid py-4\" *ngIf=\"false\">\r\n    <div class=\"row\">\r\n      <div class=\"col-12\">\r\n        <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n                width: '100%',\r\n                height: '60vh',\r\n                'border-radius': '12px',\r\n                'margin': '20px 0'\r\n            }\"></ngx-skeleton-loader>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #showEmptyScreen>\r\n  <section class=\"empty-cart m-auto\">\r\n    <div>\r\n      <div class=\"cart-image\">\r\n        <img loading=\"lazy\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\r\n          >\r\n      </div>\r\n      <div class=\"cart-text \">\r\n        <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n          <div class=\"heading-medium d-flex justify-content-center content-side\">\r\n            <div class=\"heading-medium\">No Booked Appointment</div>\r\n          </div>\r\n        <!-- </ng-container> -->\r\n      </div>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n", styles: [".order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}.order-card:hover .arrow-icon mat-icon{transform:translate(3px)}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.right{height:250px;padding:15px;background-color:#f8f8f8;border-radius:8px;color:#000}*{font-family:var(--website-font-family)}hr{border-top-width:2px;margin:15px 0}.f-13{font-size:13px}.f-16{font-size:16px}.fw-800{font-weight:800}.br-6{border-radius:6px}textarea{resize:unset}.action-btn>button{font-size:14px!important;border:none;width:fit-content!important;margin-top:5px;border-radius:3px;padding:5px 10px;background-color:tomato;color:#fff}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}.track-order{background-color:#000;color:#fff;border:1px solid black;width:auto;border-radius:3px;padding:5px}@media only screen and (max-width: 475px){.onlyDesktop{display:none!important}.onlyMobile{display:block}.mat-icon{width:46px}.time-line{padding-bottom:6px}.right{width:98%!important;margin-bottom:4px!important;height:auto!important;padding:15px!important;margin-top:5%}.main-section{width:100%!important;flex-direction:column!important}.left{width:100%!important;padding:3%}.orderNum{margin-bottom:25px}}@media (min-width:768px) and (max-width:1024px){.left{padding:3%;width:70%}.right{width:28%!important;padding:2%;margin-top:10%;margin-right:3%}}.mt-25{margin-top:25px}.cp{cursor:pointer}.item-summary{box-shadow:0 0 4px #00000040;border-radius:12px}mat-icon{font-family:Material Icons!important}::ng-deep .p-rating-icon{color:#ffc107!important;font-size:1.25rem!important}::ng-deep .p-timeline-event-content{padding:0!important}::ng-deep .p-timeline-event-connector{background:#000!important;width:3px!important;position:absolute;bottom:-20px;height:55px;left:18px}.sbt-btn{border-radius:8px}::ng-deep .p-timeline-event-marker{display:none!important}@media screen and (min-width: 1200px){.scroll-45{overflow-y:scroll;height:45vh}.scroll-60{overflow-y:scroll;height:60vh}}.f-16{font-size:16px!important}.f-13{font-size:13px!important}@media (max-width: 575.98px){.display-6{font-size:1.5rem}.h3{font-size:1.25rem}}.gap-3{gap:1rem!important}.shadow-sm{box-shadow:0 .125rem .5rem #0000001a!important}.card-header{border-bottom:unset!important}.btn:hover{transform:translateY(-1px);transition:all .2s ease}.card:hover{transform:translateY(-2px);transition:all .3s ease}.bg-opacity-10{background-color:rgba(var(--bs-primary-rgb),.1)!important}.cursor-pointer{cursor:pointer}.transition-transform{transition:transform .3s ease}.rotate-180{transform:rotate(180deg)}.card-header:hover{opacity:.9;transition:opacity .2s ease}.card-body{transition:all .3s ease}.item{padding:0 10px;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;gap:20px}.item:last-child{border-bottom:none}.item-image{width:80px;height:80px;background:#f1f5f9;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:12px;text-align:center;border:2px dashed #cbd5e1}.item-details{flex:1}.item-name{font-size:16px;font-weight:600;color:#0f172a;margin-bottom:4px}.item-description{color:#64748b;font-size:14px;margin-bottom:8px}.item-meta{display:flex;gap:16px;font-size:12px;color:#94a3b8}.item-price{text-align:right}.current-price{font-size:18px;font-weight:700;color:#0f172a}.original-price{font-size:14px;color:#94a3b8;text-decoration:line-through;margin-bottom:4px}.fs-1{font-size:1rem!important}.PENDING{background-color:#fffce1;color:#bdad18}.CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.NO_SHOW{background-color:#d1e7ff;color:#3b82d9}.COMPLETED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.cart-image{display:flex;justify-content:center}.cart-image img{width:17%}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: TimelineModule }, { kind: "component", type: i8$5.Timeline, selector: "p-timeline", inputs: ["value", "style", "styleClass", "align", "layout"] }, { kind: "directive", type: i6$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ListHomeAppointmentComponent, isStandalone: true, selector: "simpo-list-home-appointment", ngImport: i0, template: "<section>\n  <div class=\"row\" *ngIf=\"currentTab === 'BOOKING_LIST'\">\n    <div *ngIf=\"homeAppointmentList.length == 0\">\n      <ng-container *ngTemplateOutlet=\"showEmptyScreen\"></ng-container>\n    </div>\n    <div *ngFor=\"let appointment of homeAppointmentList\" class=\"col-md-4 col-12\">\n      <ng-container *ngTemplateOutlet=\"appointmentCard;context:{data: appointment}\"></ng-container>\n    </div>\n  </div>\n  <div *ngIf=\"currentTab === 'BOOKING_DETAIL'\">\n    <ng-container *ngTemplateOutlet=\"BookingDetail\"></ng-container>\n  </div>\n</section>\n<ng-template #appointmentCard let-appointment=\"data\">\n  <div class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\" (click)=\"viewBookingDetail(appointment)\">\n    <div class=\"card-body p-3\">\n      <!-- Header Section -->\n      <div class=\"d-flex justify-content-between align-items-center mb-3\">\n        <div class=\"order-number\">\n          <h4 class=\"mb-0  fw-semibold\">{{appointment.appointmentDisplayId}}</h4>\n        </div>\n        <div class=\"arrow-icon\">\n          <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\n        </div>\n      </div>\n      <!-- Middle Section -->\n      <div class=\"order-details\">\n        <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-3\">\n          <span class=\"text-muted small mb-3 mb-sm-0\">\n            {{appointment.time}} {{appointment.date}}\n          </span>\n        </div>\n      </div>\n      <div class=\"d-flex justify-content-between align-items-center\">\n        <!-- <div class=\"amount-section\">\n          <span class=\"h5 mb-0 text-success fw-bold\">\n            <span [innerHTML]=\"currency\"></span>\n            123\n          </span>\n        </div> -->\n        <div class=\"status-section\">\n          <span [attr.class]=\"appointment.status + ' order-status'\">\n            {{appointment.status.replaceAll('_', ' ')}}\n          </span>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #BookingDetail>\n  <ng-container>\n    <div class=\"container-fluid\">\n\n      <!-- Header Section -->\n      <div class=\"row\">\n        <div class=\"col-12\">\n          <div class=\"d-flex align-items-center gap-3\">\n            <mat-icon (click)=\"backToAppointmentList()\" class=\"cursor-pointer\">keyboard_backspace</mat-icon>\n            <h3 class=\"fw-bold text-dark mb-0\">{{appointmentDetails.appointmentDisplayId}}</h3>\n          </div>\n          <div class=\"d-flex flex-wrap gap-2 mb-2\">\n            <span class=\"d-flex align-items-center text-muted\">\n              <mat-icon class=\"fs-5 d-flex align-items-center justify-content-start\">schedule</mat-icon>\n              <small>{{appointmentDetails.time}} {{appointmentDetails.date}}</small>\n            </span>\n            <span class=\"d-flex align-items-center text-muted\">\n              <mat-icon class=\"fs-5 d-flex align-items-center justify-content-center\">shopping_bag</mat-icon>\n              <small>{{appointmentDetails?.items?.length ?? 0}}\n                items</small>\n            </span>\n          </div>\n        </div>\n      </div>\n\n      <!-- Mobile Header -->\n      <!-- <div class=\"card border-0 shadow-sm mb-3\" *ngIf=\"isMobile\">\n        <div class=\"card-body d-flex justify-content-between align-items-center py-3\">\n          <h2 class=\"h4 mb-0 fw-semibold\">{{appointmentDetails.appointmentDisplayId}}</h2>\n          <div></div>\n        </div>\n      </div> -->\n\n      <div class=\"row g-4\">\n        <!-- Left Column -->\n        <div class=\"col-12\" [ngClass]=\"{'col-lg-8': !isMobile}\">\n\n          <!-- Timeline for Desktop -->\n\n          <!-- Items Section -->\n          <div class=\"card border-0 shadow-sm mb-4\">\n            <div class=\"card-header py-3\">\n              <h4 class=\"h5 mb-0 d-flex align-items-center gap-2 f-16\">\n                <mat-icon>shopping_cart</mat-icon>\n                Items\n              </h4>\n            </div>\n            <div class=\"card-body p-4 scroll-45\">\n              <div class=\"row g-3\">\n                <div class=\"col-12\" *ngFor=\"let item of appointmentDetails?.items ?? []\">\n                  <div class=\"item\">\n                    <div class=\"item-image\" *ngIf=\"!item.imgUrl\">\n                      NO IMAGE<br>AVAILABLE\n                    </div>\n                    <img class=\"item-image\" [src]=\"item.imgUrl\" alt=\"\" *ngIf=\"item.imgUrl\">\n                    <div class=\"item-details\">\n                      <div class=\"item-name\">{{item.itemName}}</div>\n                      <!-- <div class=\"item-description\">High-quality test item with advanced features and premium materials</div> -->\n                      <!-- <div class=\"item-meta\">\n                            <span>SKU: TST-001</span>\n                            <span>Qty: 1</span>\n                            <span>Weight: 2.5 lbs</span>\n                        </div> -->\n                    </div>\n                    <div class=\"item-price\">\n                      <div class=\"current-price\">\u20B9{{item.discountedPrice}}</div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Timeline for Mobile -->\n          <!-- <ng-container *ngIf=\"isMobile\">\n            <ng-container *ngTemplateOutlet=\"timelineContainer\"></ng-container>\n          </ng-container> -->\n        </div>\n\n        <!-- Right Column -->\n        <div class=\"col-12 scroll-60\" [ngClass]=\"{'col-lg-4': !isMobile}\">\n\n          <!-- Bill Details -->\n          <div class=\"card border-0 shadow-sm mb-4\">\n            <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('billDetails')\">\n              <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\n                <div class=\"d-flex align-items-center gap-2\">\n                  <mat-icon>receipt</mat-icon>\n                  Bill Details\n                </div>\n                <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.billDetails\">\n                  expand_more\n                </mat-icon>\n              </h4>\n            </div>\n            <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.billDetails\">\n              <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\n                <span class=\"d-flex align-items-center gap-2 text-muted\">\n                  Free Trial\n                </span>\n                <span class=\"fw-semibold text-success h6 mb-0\">\n                  <span [innerHTML]=\"currency\"></span>0\n                </span>\n              </div>\n\n              <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\n                <span class=\"d-flex align-items-center gap-2 text-muted\">\n                  Service Charge\n                </span>\n                <span class=\"fw-bold text-success h6 mb-0\">FREE</span>\n              </div>\n\n              <div class=\"d-flex justify-content-between align-items-center py-3  rounded\">\n                <span class=\"fw-bold h5 mb-0 text-dark fs-1\">Grand Total</span>\n                <span class=\"fw-bold h4 mb-0 fs-1\">\n                  <span [innerHTML]=\"currency\"></span>0\n                </span>\n              </div>\n            </div>\n          </div>\n\n          <!-- Customer Details -->\n          <div class=\"card border-0 shadow-sm mb-4\">\n            <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('deliveryDetails')\">\n              <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\n                <div class=\"d-flex align-items-center gap-2\">\n                  <mat-icon>person</mat-icon>\n                  Customer Details\n                </div>\n                <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.deliveryDetails\">\n                  expand_more\n                </mat-icon>\n              </h4>\n            </div>\n            <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.deliveryDetails\">\n              <div class=\"mb-3\">\n                <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\n                  <div>\n                    <small class=\"text-muted d-block\">Name</small>\n                    <span class=\"fw-semibold\">{{appointmentDetails.addressDetails.receiverName}}</span>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"mb-3\">\n                <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\n                  <div>\n                    <small class=\"text-muted d-block\">Phone</small>\n                    <span class=\"fw-semibold\">{{appointmentDetails.addressDetails.receiverPhone}}</span>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"mb-3\">\n                <div class=\"d-flex align-items-start gap-3 p-2 bg-light rounded\">\n                  <div>\n                    <small class=\"text-muted d-block\">Address</small>\n                    <span class=\"fw-semibold\">{{appointmentDetails.addressDetails.addressLine1}}\n                      {{appointmentDetails.addressDetails.zipCode}} {{appointmentDetails.addressDetails.cityName}}\n                      {{appointmentDetails.addressDetails.stateName}}</span>\n                  </div>\n                </div>\n              </div>\n\n            </div>\n          </div>\n\n          <!-- Timeline Section for Desktop -->\n          <div class=\"card border-0 shadow-sm mb-4\">\n            <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('timeline')\">\n              <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\n\n    \">\n                <div class=\"d-flex align-items-center gap-2\">\n                  <mat-icon>timeline</mat-icon>\n                  Order Timeline\n                </div>\n                <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.timeline\">\n                  expand_more\n                </mat-icon>\n              </h4>\n            </div>\n            <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.timeline\">\n              <p-timeline [value]=\"orderTimiline\">\n                <ng-template pTemplate=\"content\" let-event>\n                  <div class=\"d-flex align-items-start gap-3 py-3\">\n                    <div class=\"rounded-circle p-2 d-flex align-items-center justify-content-center\"\n                      style=\"width: 40px; height: 40px;\">\n                      <mat-icon class=\"fs-6 d-flex align-items-center justify-content-center\">{{\n                        event.icon }}</mat-icon>\n                    </div>\n                    <div class=\"flex-grow-1\">\n                      <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") |\n                        titlecase }} {{event.status.replaceAll('_', ' ')}}</h6>\n                      <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") }}</p>\n                    </div>\n                  </div>\n                </ng-template>\n              </p-timeline>\n            </div>\n          </div>\n        </div>\n\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- Timeline Template -->\n  <ng-template #timelineContainer>\n    <div class=\"card border-0 shadow-sm mb-4\">\n      <div class=\"card-header bg-warning text-dark py-2 f-16\">\n        <h4 class=\"h5 mb-0 d-flex align-items-center gap-2\">\n          <mat-icon>timeline</mat-icon>\n          Order Timeline\n        </h4>\n      </div>\n      <div class=\"card-body p-4\">\n        <p-timeline [value]=\"orderTimiline\">\n          <ng-template pTemplate=\"content\" let-event>\n            <div class=\"d-flex align-items-start gap-3 py-3\">\n              <div class=\"bg-primary rounded-circle p-2 d-flex align-items-center justify-content-center\"\n                style=\"width: 40px; height: 40px;\">\n                <mat-icon class=\"text-white fs-6 d-flex align-items-center justify-content-center\">{{\n                  event.icon }}</mat-icon>\n              </div>\n              <div class=\"flex-grow-1\">\n                <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") | titlecase }}\n                </h6>\n                <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") | titlecase }}</p>\n              </div>\n            </div>\n          </ng-template>\n        </p-timeline>\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- Loading Skeleton -->\n  <div class=\"container-fluid py-4\" *ngIf=\"false\">\n    <div class=\"row\">\n      <div class=\"col-12\">\n        <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n                width: '100%',\n                height: '60vh',\n                'border-radius': '12px',\n                'margin': '20px 0'\n            }\"></ngx-skeleton-loader>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #showEmptyScreen>\n  <section class=\"empty-cart m-auto\">\n    <div>\n      <div class=\"cart-image\">\n        <img loading=\"lazy\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\n          >\n      </div>\n      <div class=\"cart-text \">\n        <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\n          <div class=\"heading-medium d-flex justify-content-center content-side\">\n            <div class=\"heading-medium\">No Booked Appointment</div>\n          </div>\n        <!-- </ng-container> -->\n      </div>\n    </div>\n  </section>\n</ng-template>\n", styles: [".order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}.order-card:hover .arrow-icon mat-icon{transform:translate(3px)}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.right{height:250px;padding:15px;background-color:#f8f8f8;border-radius:8px;color:#000}*{font-family:var(--website-font-family)}hr{border-top-width:2px;margin:15px 0}.f-13{font-size:13px}.f-16{font-size:16px}.fw-800{font-weight:800}.br-6{border-radius:6px}textarea{resize:unset}.action-btn>button{font-size:14px!important;border:none;width:fit-content!important;margin-top:5px;border-radius:3px;padding:5px 10px;background-color:tomato;color:#fff}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}.track-order{background-color:#000;color:#fff;border:1px solid black;width:auto;border-radius:3px;padding:5px}@media only screen and (max-width: 475px){.onlyDesktop{display:none!important}.onlyMobile{display:block}.mat-icon{width:46px}.time-line{padding-bottom:6px}.right{width:98%!important;margin-bottom:4px!important;height:auto!important;padding:15px!important;margin-top:5%}.main-section{width:100%!important;flex-direction:column!important}.left{width:100%!important;padding:3%}.orderNum{margin-bottom:25px}}@media (min-width:768px) and (max-width:1024px){.left{padding:3%;width:70%}.right{width:28%!important;padding:2%;margin-top:10%;margin-right:3%}}.mt-25{margin-top:25px}.cp{cursor:pointer}.item-summary{box-shadow:0 0 4px #00000040;border-radius:12px}mat-icon{font-family:Material Icons!important}::ng-deep .p-rating-icon{color:#ffc107!important;font-size:1.25rem!important}::ng-deep .p-timeline-event-content{padding:0!important}::ng-deep .p-timeline-event-connector{background:#000!important;width:3px!important;position:absolute;bottom:-20px;height:55px;left:18px}.sbt-btn{border-radius:8px}::ng-deep .p-timeline-event-marker{display:none!important}@media screen and (min-width: 1200px){.scroll-45{overflow-y:scroll;height:45vh}.scroll-60{overflow-y:scroll;height:60vh}}.f-16{font-size:16px!important}.f-13{font-size:13px!important}@media (max-width: 575.98px){.display-6{font-size:1.5rem}.h3{font-size:1.25rem}}.gap-3{gap:1rem!important}.shadow-sm{box-shadow:0 .125rem .5rem #0000001a!important}.card-header{border-bottom:unset!important}.btn:hover{transform:translateY(-1px);transition:all .2s ease}.card:hover{transform:translateY(-2px);transition:all .3s ease}.bg-opacity-10{background-color:rgba(var(--bs-primary-rgb),.1)!important}.cursor-pointer{cursor:pointer}.transition-transform{transition:transform .3s ease}.rotate-180{transform:rotate(180deg)}.card-header:hover{opacity:.9;transition:opacity .2s ease}.card-body{transition:all .3s ease}.item{padding:0 10px;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;gap:20px}.item:last-child{border-bottom:none}.item-image{width:80px;height:80px;background:#f1f5f9;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:12px;text-align:center;border:2px dashed #cbd5e1}.item-details{flex:1}.item-name{font-size:16px;font-weight:600;color:#0f172a;margin-bottom:4px}.item-description{color:#64748b;font-size:14px;margin-bottom:8px}.item-meta{display:flex;gap:16px;font-size:12px;color:#94a3b8}.item-price{text-align:right}.current-price{font-size:18px;font-weight:700;color:#0f172a}.original-price{font-size:14px;color:#94a3b8;text-decoration:line-through;margin-bottom:4px}.fs-1{font-size:1rem!important}.PENDING{background-color:#fffce1;color:#bdad18}.CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.NO_SHOW{background-color:#d1e7ff;color:#3b82d9}.COMPLETED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.cart-image{display:flex;justify-content:center}.cart-image img{width:17%}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: TimelineModule }, { kind: "component", type: i8$5.Timeline, selector: "p-timeline", inputs: ["value", "style", "styleClass", "align", "layout"] }, { kind: "directive", type: i6$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListHomeAppointmentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-list-home-appointment', standalone: true, imports: [MatIconModule, CommonModule, SimpoComponentModule, TimelineModule], template: "<section>\r\n  <div class=\"row\" *ngIf=\"currentTab === 'BOOKING_LIST'\">\r\n    <div *ngIf=\"homeAppointmentList.length == 0\">\r\n      <ng-container *ngTemplateOutlet=\"showEmptyScreen\"></ng-container>\r\n    </div>\r\n    <div *ngFor=\"let appointment of homeAppointmentList\" class=\"col-md-4 col-12\">\r\n      <ng-container *ngTemplateOutlet=\"appointmentCard;context:{data: appointment}\"></ng-container>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"currentTab === 'BOOKING_DETAIL'\">\r\n    <ng-container *ngTemplateOutlet=\"BookingDetail\"></ng-container>\r\n  </div>\r\n</section>\r\n<ng-template #appointmentCard let-appointment=\"data\">\r\n  <div class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\" (click)=\"viewBookingDetail(appointment)\">\r\n    <div class=\"card-body p-3\">\r\n      <!-- Header Section -->\r\n      <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n        <div class=\"order-number\">\r\n          <h4 class=\"mb-0  fw-semibold\">{{appointment.appointmentDisplayId}}</h4>\r\n        </div>\r\n        <div class=\"arrow-icon\">\r\n          <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n        </div>\r\n      </div>\r\n      <!-- Middle Section -->\r\n      <div class=\"order-details\">\r\n        <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-3\">\r\n          <span class=\"text-muted small mb-3 mb-sm-0\">\r\n            {{appointment.time}} {{appointment.date}}\r\n          </span>\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex justify-content-between align-items-center\">\r\n        <!-- <div class=\"amount-section\">\r\n          <span class=\"h5 mb-0 text-success fw-bold\">\r\n            <span [innerHTML]=\"currency\"></span>\r\n            123\r\n          </span>\r\n        </div> -->\r\n        <div class=\"status-section\">\r\n          <span [attr.class]=\"appointment.status + ' order-status'\">\r\n            {{appointment.status.replaceAll('_', ' ')}}\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #BookingDetail>\r\n  <ng-container>\r\n    <div class=\"container-fluid\">\r\n\r\n      <!-- Header Section -->\r\n      <div class=\"row\">\r\n        <div class=\"col-12\">\r\n          <div class=\"d-flex align-items-center gap-3\">\r\n            <mat-icon (click)=\"backToAppointmentList()\" class=\"cursor-pointer\">keyboard_backspace</mat-icon>\r\n            <h3 class=\"fw-bold text-dark mb-0\">{{appointmentDetails.appointmentDisplayId}}</h3>\r\n          </div>\r\n          <div class=\"d-flex flex-wrap gap-2 mb-2\">\r\n            <span class=\"d-flex align-items-center text-muted\">\r\n              <mat-icon class=\"fs-5 d-flex align-items-center justify-content-start\">schedule</mat-icon>\r\n              <small>{{appointmentDetails.time}} {{appointmentDetails.date}}</small>\r\n            </span>\r\n            <span class=\"d-flex align-items-center text-muted\">\r\n              <mat-icon class=\"fs-5 d-flex align-items-center justify-content-center\">shopping_bag</mat-icon>\r\n              <small>{{appointmentDetails?.items?.length ?? 0}}\r\n                items</small>\r\n            </span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Mobile Header -->\r\n      <!-- <div class=\"card border-0 shadow-sm mb-3\" *ngIf=\"isMobile\">\r\n        <div class=\"card-body d-flex justify-content-between align-items-center py-3\">\r\n          <h2 class=\"h4 mb-0 fw-semibold\">{{appointmentDetails.appointmentDisplayId}}</h2>\r\n          <div></div>\r\n        </div>\r\n      </div> -->\r\n\r\n      <div class=\"row g-4\">\r\n        <!-- Left Column -->\r\n        <div class=\"col-12\" [ngClass]=\"{'col-lg-8': !isMobile}\">\r\n\r\n          <!-- Timeline for Desktop -->\r\n\r\n          <!-- Items Section -->\r\n          <div class=\"card border-0 shadow-sm mb-4\">\r\n            <div class=\"card-header py-3\">\r\n              <h4 class=\"h5 mb-0 d-flex align-items-center gap-2 f-16\">\r\n                <mat-icon>shopping_cart</mat-icon>\r\n                Items\r\n              </h4>\r\n            </div>\r\n            <div class=\"card-body p-4 scroll-45\">\r\n              <div class=\"row g-3\">\r\n                <div class=\"col-12\" *ngFor=\"let item of appointmentDetails?.items ?? []\">\r\n                  <div class=\"item\">\r\n                    <div class=\"item-image\" *ngIf=\"!item.imgUrl\">\r\n                      NO IMAGE<br>AVAILABLE\r\n                    </div>\r\n                    <img class=\"item-image\" [src]=\"item.imgUrl\" alt=\"\" *ngIf=\"item.imgUrl\">\r\n                    <div class=\"item-details\">\r\n                      <div class=\"item-name\">{{item.itemName}}</div>\r\n                      <!-- <div class=\"item-description\">High-quality test item with advanced features and premium materials</div> -->\r\n                      <!-- <div class=\"item-meta\">\r\n                            <span>SKU: TST-001</span>\r\n                            <span>Qty: 1</span>\r\n                            <span>Weight: 2.5 lbs</span>\r\n                        </div> -->\r\n                    </div>\r\n                    <div class=\"item-price\">\r\n                      <div class=\"current-price\">\u20B9{{item.discountedPrice}}</div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Timeline for Mobile -->\r\n          <!-- <ng-container *ngIf=\"isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"timelineContainer\"></ng-container>\r\n          </ng-container> -->\r\n        </div>\r\n\r\n        <!-- Right Column -->\r\n        <div class=\"col-12 scroll-60\" [ngClass]=\"{'col-lg-4': !isMobile}\">\r\n\r\n          <!-- Bill Details -->\r\n          <div class=\"card border-0 shadow-sm mb-4\">\r\n            <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('billDetails')\">\r\n              <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\r\n                <div class=\"d-flex align-items-center gap-2\">\r\n                  <mat-icon>receipt</mat-icon>\r\n                  Bill Details\r\n                </div>\r\n                <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.billDetails\">\r\n                  expand_more\r\n                </mat-icon>\r\n              </h4>\r\n            </div>\r\n            <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.billDetails\">\r\n              <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\r\n                <span class=\"d-flex align-items-center gap-2 text-muted\">\r\n                  Free Trial\r\n                </span>\r\n                <span class=\"fw-semibold text-success h6 mb-0\">\r\n                  <span [innerHTML]=\"currency\"></span>0\r\n                </span>\r\n              </div>\r\n\r\n              <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\r\n                <span class=\"d-flex align-items-center gap-2 text-muted\">\r\n                  Service Charge\r\n                </span>\r\n                <span class=\"fw-bold text-success h6 mb-0\">FREE</span>\r\n              </div>\r\n\r\n              <div class=\"d-flex justify-content-between align-items-center py-3  rounded\">\r\n                <span class=\"fw-bold h5 mb-0 text-dark fs-1\">Grand Total</span>\r\n                <span class=\"fw-bold h4 mb-0 fs-1\">\r\n                  <span [innerHTML]=\"currency\"></span>0\r\n                </span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Customer Details -->\r\n          <div class=\"card border-0 shadow-sm mb-4\">\r\n            <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('deliveryDetails')\">\r\n              <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\r\n                <div class=\"d-flex align-items-center gap-2\">\r\n                  <mat-icon>person</mat-icon>\r\n                  Customer Details\r\n                </div>\r\n                <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.deliveryDetails\">\r\n                  expand_more\r\n                </mat-icon>\r\n              </h4>\r\n            </div>\r\n            <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.deliveryDetails\">\r\n              <div class=\"mb-3\">\r\n                <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\r\n                  <div>\r\n                    <small class=\"text-muted d-block\">Name</small>\r\n                    <span class=\"fw-semibold\">{{appointmentDetails.addressDetails.receiverName}}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"mb-3\">\r\n                <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\r\n                  <div>\r\n                    <small class=\"text-muted d-block\">Phone</small>\r\n                    <span class=\"fw-semibold\">{{appointmentDetails.addressDetails.receiverPhone}}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"mb-3\">\r\n                <div class=\"d-flex align-items-start gap-3 p-2 bg-light rounded\">\r\n                  <div>\r\n                    <small class=\"text-muted d-block\">Address</small>\r\n                    <span class=\"fw-semibold\">{{appointmentDetails.addressDetails.addressLine1}}\r\n                      {{appointmentDetails.addressDetails.zipCode}} {{appointmentDetails.addressDetails.cityName}}\r\n                      {{appointmentDetails.addressDetails.stateName}}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Timeline Section for Desktop -->\r\n          <div class=\"card border-0 shadow-sm mb-4\">\r\n            <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('timeline')\">\r\n              <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\r\n\r\n    \">\r\n                <div class=\"d-flex align-items-center gap-2\">\r\n                  <mat-icon>timeline</mat-icon>\r\n                  Order Timeline\r\n                </div>\r\n                <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.timeline\">\r\n                  expand_more\r\n                </mat-icon>\r\n              </h4>\r\n            </div>\r\n            <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.timeline\">\r\n              <p-timeline [value]=\"orderTimiline\">\r\n                <ng-template pTemplate=\"content\" let-event>\r\n                  <div class=\"d-flex align-items-start gap-3 py-3\">\r\n                    <div class=\"rounded-circle p-2 d-flex align-items-center justify-content-center\"\r\n                      style=\"width: 40px; height: 40px;\">\r\n                      <mat-icon class=\"fs-6 d-flex align-items-center justify-content-center\">{{\r\n                        event.icon }}</mat-icon>\r\n                    </div>\r\n                    <div class=\"flex-grow-1\">\r\n                      <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") |\r\n                        titlecase }} {{event.status.replaceAll('_', ' ')}}</h6>\r\n                      <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") }}</p>\r\n                    </div>\r\n                  </div>\r\n                </ng-template>\r\n              </p-timeline>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <!-- Timeline Template -->\r\n  <ng-template #timelineContainer>\r\n    <div class=\"card border-0 shadow-sm mb-4\">\r\n      <div class=\"card-header bg-warning text-dark py-2 f-16\">\r\n        <h4 class=\"h5 mb-0 d-flex align-items-center gap-2\">\r\n          <mat-icon>timeline</mat-icon>\r\n          Order Timeline\r\n        </h4>\r\n      </div>\r\n      <div class=\"card-body p-4\">\r\n        <p-timeline [value]=\"orderTimiline\">\r\n          <ng-template pTemplate=\"content\" let-event>\r\n            <div class=\"d-flex align-items-start gap-3 py-3\">\r\n              <div class=\"bg-primary rounded-circle p-2 d-flex align-items-center justify-content-center\"\r\n                style=\"width: 40px; height: 40px;\">\r\n                <mat-icon class=\"text-white fs-6 d-flex align-items-center justify-content-center\">{{\r\n                  event.icon }}</mat-icon>\r\n              </div>\r\n              <div class=\"flex-grow-1\">\r\n                <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") | titlecase }}\r\n                </h6>\r\n                <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") | titlecase }}</p>\r\n              </div>\r\n            </div>\r\n          </ng-template>\r\n        </p-timeline>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <!-- Loading Skeleton -->\r\n  <div class=\"container-fluid py-4\" *ngIf=\"false\">\r\n    <div class=\"row\">\r\n      <div class=\"col-12\">\r\n        <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n                width: '100%',\r\n                height: '60vh',\r\n                'border-radius': '12px',\r\n                'margin': '20px 0'\r\n            }\"></ngx-skeleton-loader>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #showEmptyScreen>\r\n  <section class=\"empty-cart m-auto\">\r\n    <div>\r\n      <div class=\"cart-image\">\r\n        <img loading=\"lazy\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\r\n          >\r\n      </div>\r\n      <div class=\"cart-text \">\r\n        <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n          <div class=\"heading-medium d-flex justify-content-center content-side\">\r\n            <div class=\"heading-medium\">No Booked Appointment</div>\r\n          </div>\r\n        <!-- </ng-container> -->\r\n      </div>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n", styles: [".order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}.order-card:hover .arrow-icon mat-icon{transform:translate(3px)}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.right{height:250px;padding:15px;background-color:#f8f8f8;border-radius:8px;color:#000}*{font-family:var(--website-font-family)}hr{border-top-width:2px;margin:15px 0}.f-13{font-size:13px}.f-16{font-size:16px}.fw-800{font-weight:800}.br-6{border-radius:6px}textarea{resize:unset}.action-btn>button{font-size:14px!important;border:none;width:fit-content!important;margin-top:5px;border-radius:3px;padding:5px 10px;background-color:tomato;color:#fff}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}.track-order{background-color:#000;color:#fff;border:1px solid black;width:auto;border-radius:3px;padding:5px}@media only screen and (max-width: 475px){.onlyDesktop{display:none!important}.onlyMobile{display:block}.mat-icon{width:46px}.time-line{padding-bottom:6px}.right{width:98%!important;margin-bottom:4px!important;height:auto!important;padding:15px!important;margin-top:5%}.main-section{width:100%!important;flex-direction:column!important}.left{width:100%!important;padding:3%}.orderNum{margin-bottom:25px}}@media (min-width:768px) and (max-width:1024px){.left{padding:3%;width:70%}.right{width:28%!important;padding:2%;margin-top:10%;margin-right:3%}}.mt-25{margin-top:25px}.cp{cursor:pointer}.item-summary{box-shadow:0 0 4px #00000040;border-radius:12px}mat-icon{font-family:Material Icons!important}::ng-deep .p-rating-icon{color:#ffc107!important;font-size:1.25rem!important}::ng-deep .p-timeline-event-content{padding:0!important}::ng-deep .p-timeline-event-connector{background:#000!important;width:3px!important;position:absolute;bottom:-20px;height:55px;left:18px}.sbt-btn{border-radius:8px}::ng-deep .p-timeline-event-marker{display:none!important}@media screen and (min-width: 1200px){.scroll-45{overflow-y:scroll;height:45vh}.scroll-60{overflow-y:scroll;height:60vh}}.f-16{font-size:16px!important}.f-13{font-size:13px!important}@media (max-width: 575.98px){.display-6{font-size:1.5rem}.h3{font-size:1.25rem}}.gap-3{gap:1rem!important}.shadow-sm{box-shadow:0 .125rem .5rem #0000001a!important}.card-header{border-bottom:unset!important}.btn:hover{transform:translateY(-1px);transition:all .2s ease}.card:hover{transform:translateY(-2px);transition:all .3s ease}.bg-opacity-10{background-color:rgba(var(--bs-primary-rgb),.1)!important}.cursor-pointer{cursor:pointer}.transition-transform{transition:transform .3s ease}.rotate-180{transform:rotate(180deg)}.card-header:hover{opacity:.9;transition:opacity .2s ease}.card-body{transition:all .3s ease}.item{padding:0 10px;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;gap:20px}.item:last-child{border-bottom:none}.item-image{width:80px;height:80px;background:#f1f5f9;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:12px;text-align:center;border:2px dashed #cbd5e1}.item-details{flex:1}.item-name{font-size:16px;font-weight:600;color:#0f172a;margin-bottom:4px}.item-description{color:#64748b;font-size:14px;margin-bottom:8px}.item-meta{display:flex;gap:16px;font-size:12px;color:#94a3b8}.item-price{text-align:right}.current-price{font-size:18px;font-weight:700;color:#0f172a}.original-price{font-size:14px;color:#94a3b8;text-decoration:line-through;margin-bottom:4px}.fs-1{font-size:1rem!important}.PENDING{background-color:#fffce1;color:#bdad18}.CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.NO_SHOW{background-color:#d1e7ff;color:#3b82d9}.COMPLETED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.cart-image{display:flex;justify-content:center}.cart-image img{width:17%}\n"] }]
+            args: [{ selector: 'simpo-list-home-appointment', standalone: true, imports: [MatIconModule, CommonModule, SimpoComponentModule, TimelineModule], template: "<section>\n  <div class=\"row\" *ngIf=\"currentTab === 'BOOKING_LIST'\">\n    <div *ngIf=\"homeAppointmentList.length == 0\">\n      <ng-container *ngTemplateOutlet=\"showEmptyScreen\"></ng-container>\n    </div>\n    <div *ngFor=\"let appointment of homeAppointmentList\" class=\"col-md-4 col-12\">\n      <ng-container *ngTemplateOutlet=\"appointmentCard;context:{data: appointment}\"></ng-container>\n    </div>\n  </div>\n  <div *ngIf=\"currentTab === 'BOOKING_DETAIL'\">\n    <ng-container *ngTemplateOutlet=\"BookingDetail\"></ng-container>\n  </div>\n</section>\n<ng-template #appointmentCard let-appointment=\"data\">\n  <div class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\" (click)=\"viewBookingDetail(appointment)\">\n    <div class=\"card-body p-3\">\n      <!-- Header Section -->\n      <div class=\"d-flex justify-content-between align-items-center mb-3\">\n        <div class=\"order-number\">\n          <h4 class=\"mb-0  fw-semibold\">{{appointment.appointmentDisplayId}}</h4>\n        </div>\n        <div class=\"arrow-icon\">\n          <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\n        </div>\n      </div>\n      <!-- Middle Section -->\n      <div class=\"order-details\">\n        <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-3\">\n          <span class=\"text-muted small mb-3 mb-sm-0\">\n            {{appointment.time}} {{appointment.date}}\n          </span>\n        </div>\n      </div>\n      <div class=\"d-flex justify-content-between align-items-center\">\n        <!-- <div class=\"amount-section\">\n          <span class=\"h5 mb-0 text-success fw-bold\">\n            <span [innerHTML]=\"currency\"></span>\n            123\n          </span>\n        </div> -->\n        <div class=\"status-section\">\n          <span [attr.class]=\"appointment.status + ' order-status'\">\n            {{appointment.status.replaceAll('_', ' ')}}\n          </span>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #BookingDetail>\n  <ng-container>\n    <div class=\"container-fluid\">\n\n      <!-- Header Section -->\n      <div class=\"row\">\n        <div class=\"col-12\">\n          <div class=\"d-flex align-items-center gap-3\">\n            <mat-icon (click)=\"backToAppointmentList()\" class=\"cursor-pointer\">keyboard_backspace</mat-icon>\n            <h3 class=\"fw-bold text-dark mb-0\">{{appointmentDetails.appointmentDisplayId}}</h3>\n          </div>\n          <div class=\"d-flex flex-wrap gap-2 mb-2\">\n            <span class=\"d-flex align-items-center text-muted\">\n              <mat-icon class=\"fs-5 d-flex align-items-center justify-content-start\">schedule</mat-icon>\n              <small>{{appointmentDetails.time}} {{appointmentDetails.date}}</small>\n            </span>\n            <span class=\"d-flex align-items-center text-muted\">\n              <mat-icon class=\"fs-5 d-flex align-items-center justify-content-center\">shopping_bag</mat-icon>\n              <small>{{appointmentDetails?.items?.length ?? 0}}\n                items</small>\n            </span>\n          </div>\n        </div>\n      </div>\n\n      <!-- Mobile Header -->\n      <!-- <div class=\"card border-0 shadow-sm mb-3\" *ngIf=\"isMobile\">\n        <div class=\"card-body d-flex justify-content-between align-items-center py-3\">\n          <h2 class=\"h4 mb-0 fw-semibold\">{{appointmentDetails.appointmentDisplayId}}</h2>\n          <div></div>\n        </div>\n      </div> -->\n\n      <div class=\"row g-4\">\n        <!-- Left Column -->\n        <div class=\"col-12\" [ngClass]=\"{'col-lg-8': !isMobile}\">\n\n          <!-- Timeline for Desktop -->\n\n          <!-- Items Section -->\n          <div class=\"card border-0 shadow-sm mb-4\">\n            <div class=\"card-header py-3\">\n              <h4 class=\"h5 mb-0 d-flex align-items-center gap-2 f-16\">\n                <mat-icon>shopping_cart</mat-icon>\n                Items\n              </h4>\n            </div>\n            <div class=\"card-body p-4 scroll-45\">\n              <div class=\"row g-3\">\n                <div class=\"col-12\" *ngFor=\"let item of appointmentDetails?.items ?? []\">\n                  <div class=\"item\">\n                    <div class=\"item-image\" *ngIf=\"!item.imgUrl\">\n                      NO IMAGE<br>AVAILABLE\n                    </div>\n                    <img class=\"item-image\" [src]=\"item.imgUrl\" alt=\"\" *ngIf=\"item.imgUrl\">\n                    <div class=\"item-details\">\n                      <div class=\"item-name\">{{item.itemName}}</div>\n                      <!-- <div class=\"item-description\">High-quality test item with advanced features and premium materials</div> -->\n                      <!-- <div class=\"item-meta\">\n                            <span>SKU: TST-001</span>\n                            <span>Qty: 1</span>\n                            <span>Weight: 2.5 lbs</span>\n                        </div> -->\n                    </div>\n                    <div class=\"item-price\">\n                      <div class=\"current-price\">\u20B9{{item.discountedPrice}}</div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Timeline for Mobile -->\n          <!-- <ng-container *ngIf=\"isMobile\">\n            <ng-container *ngTemplateOutlet=\"timelineContainer\"></ng-container>\n          </ng-container> -->\n        </div>\n\n        <!-- Right Column -->\n        <div class=\"col-12 scroll-60\" [ngClass]=\"{'col-lg-4': !isMobile}\">\n\n          <!-- Bill Details -->\n          <div class=\"card border-0 shadow-sm mb-4\">\n            <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('billDetails')\">\n              <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\n                <div class=\"d-flex align-items-center gap-2\">\n                  <mat-icon>receipt</mat-icon>\n                  Bill Details\n                </div>\n                <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.billDetails\">\n                  expand_more\n                </mat-icon>\n              </h4>\n            </div>\n            <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.billDetails\">\n              <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\n                <span class=\"d-flex align-items-center gap-2 text-muted\">\n                  Free Trial\n                </span>\n                <span class=\"fw-semibold text-success h6 mb-0\">\n                  <span [innerHTML]=\"currency\"></span>0\n                </span>\n              </div>\n\n              <div class=\"d-flex justify-content-between align-items-center py-2 border-bottom\">\n                <span class=\"d-flex align-items-center gap-2 text-muted\">\n                  Service Charge\n                </span>\n                <span class=\"fw-bold text-success h6 mb-0\">FREE</span>\n              </div>\n\n              <div class=\"d-flex justify-content-between align-items-center py-3  rounded\">\n                <span class=\"fw-bold h5 mb-0 text-dark fs-1\">Grand Total</span>\n                <span class=\"fw-bold h4 mb-0 fs-1\">\n                  <span [innerHTML]=\"currency\"></span>0\n                </span>\n              </div>\n            </div>\n          </div>\n\n          <!-- Customer Details -->\n          <div class=\"card border-0 shadow-sm mb-4\">\n            <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('deliveryDetails')\">\n              <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\">\n                <div class=\"d-flex align-items-center gap-2\">\n                  <mat-icon>person</mat-icon>\n                  Customer Details\n                </div>\n                <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.deliveryDetails\">\n                  expand_more\n                </mat-icon>\n              </h4>\n            </div>\n            <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.deliveryDetails\">\n              <div class=\"mb-3\">\n                <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\n                  <div>\n                    <small class=\"text-muted d-block\">Name</small>\n                    <span class=\"fw-semibold\">{{appointmentDetails.addressDetails.receiverName}}</span>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"mb-3\">\n                <div class=\"d-flex align-items-center gap-3 p-2 bg-light rounded\">\n                  <div>\n                    <small class=\"text-muted d-block\">Phone</small>\n                    <span class=\"fw-semibold\">{{appointmentDetails.addressDetails.receiverPhone}}</span>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"mb-3\">\n                <div class=\"d-flex align-items-start gap-3 p-2 bg-light rounded\">\n                  <div>\n                    <small class=\"text-muted d-block\">Address</small>\n                    <span class=\"fw-semibold\">{{appointmentDetails.addressDetails.addressLine1}}\n                      {{appointmentDetails.addressDetails.zipCode}} {{appointmentDetails.addressDetails.cityName}}\n                      {{appointmentDetails.addressDetails.stateName}}</span>\n                  </div>\n                </div>\n              </div>\n\n            </div>\n          </div>\n\n          <!-- Timeline Section for Desktop -->\n          <div class=\"card border-0 shadow-sm mb-4\">\n            <div class=\"card-header py-3 cursor-pointer\" (click)=\"toggleSection('timeline')\">\n              <h4 class=\"h5 mb-0 d-flex align-items-center justify-content-between f-16\n\n    \">\n                <div class=\"d-flex align-items-center gap-2\">\n                  <mat-icon>timeline</mat-icon>\n                  Order Timeline\n                </div>\n                <mat-icon class=\"transition-transform\" [class.rotate-180]=\"!sectionsVisible.timeline\">\n                  expand_more\n                </mat-icon>\n              </h4>\n            </div>\n            <div class=\"card-body p-4\" [class.d-none]=\"!sectionsVisible.timeline\">\n              <p-timeline [value]=\"orderTimiline\">\n                <ng-template pTemplate=\"content\" let-event>\n                  <div class=\"d-flex align-items-start gap-3 py-3\">\n                    <div class=\"rounded-circle p-2 d-flex align-items-center justify-content-center\"\n                      style=\"width: 40px; height: 40px;\">\n                      <mat-icon class=\"fs-6 d-flex align-items-center justify-content-center\">{{\n                        event.icon }}</mat-icon>\n                    </div>\n                    <div class=\"flex-grow-1\">\n                      <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") |\n                        titlecase }} {{event.status.replaceAll('_', ' ')}}</h6>\n                      <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") }}</p>\n                    </div>\n                  </div>\n                </ng-template>\n              </p-timeline>\n            </div>\n          </div>\n        </div>\n\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- Timeline Template -->\n  <ng-template #timelineContainer>\n    <div class=\"card border-0 shadow-sm mb-4\">\n      <div class=\"card-header bg-warning text-dark py-2 f-16\">\n        <h4 class=\"h5 mb-0 d-flex align-items-center gap-2\">\n          <mat-icon>timeline</mat-icon>\n          Order Timeline\n        </h4>\n      </div>\n      <div class=\"card-body p-4\">\n        <p-timeline [value]=\"orderTimiline\">\n          <ng-template pTemplate=\"content\" let-event>\n            <div class=\"d-flex align-items-start gap-3 py-3\">\n              <div class=\"bg-primary rounded-circle p-2 d-flex align-items-center justify-content-center\"\n                style=\"width: 40px; height: 40px;\">\n                <mat-icon class=\"text-white fs-6 d-flex align-items-center justify-content-center\">{{\n                  event.icon }}</mat-icon>\n              </div>\n              <div class=\"flex-grow-1\">\n                <h6 class=\"fw-semibold text-dark mb-1\">{{ event.name?.replaceAll(\"_\", \" \") | titlecase }}\n                </h6>\n                <p class=\"text-muted mb-0 small\">{{ event.desc?.replaceAll(\"_\", \" \") | titlecase }}</p>\n              </div>\n            </div>\n          </ng-template>\n        </p-timeline>\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- Loading Skeleton -->\n  <div class=\"container-fluid py-4\" *ngIf=\"false\">\n    <div class=\"row\">\n      <div class=\"col-12\">\n        <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\n                width: '100%',\n                height: '60vh',\n                'border-radius': '12px',\n                'margin': '20px 0'\n            }\"></ngx-skeleton-loader>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #showEmptyScreen>\n  <section class=\"empty-cart m-auto\">\n    <div>\n      <div class=\"cart-image\">\n        <img loading=\"lazy\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\n          >\n      </div>\n      <div class=\"cart-text \">\n        <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\n          <div class=\"heading-medium d-flex justify-content-center content-side\">\n            <div class=\"heading-medium\">No Booked Appointment</div>\n          </div>\n        <!-- </ng-container> -->\n      </div>\n    </div>\n  </section>\n</ng-template>\n", styles: [".order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}.order-card:hover .arrow-icon mat-icon{transform:translate(3px)}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.right{height:250px;padding:15px;background-color:#f8f8f8;border-radius:8px;color:#000}*{font-family:var(--website-font-family)}hr{border-top-width:2px;margin:15px 0}.f-13{font-size:13px}.f-16{font-size:16px}.fw-800{font-weight:800}.br-6{border-radius:6px}textarea{resize:unset}.action-btn>button{font-size:14px!important;border:none;width:fit-content!important;margin-top:5px;border-radius:3px;padding:5px 10px;background-color:tomato;color:#fff}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}.onlyMobile{display:none}.track-order{background-color:#000;color:#fff;border:1px solid black;width:auto;border-radius:3px;padding:5px}@media only screen and (max-width: 475px){.onlyDesktop{display:none!important}.onlyMobile{display:block}.mat-icon{width:46px}.time-line{padding-bottom:6px}.right{width:98%!important;margin-bottom:4px!important;height:auto!important;padding:15px!important;margin-top:5%}.main-section{width:100%!important;flex-direction:column!important}.left{width:100%!important;padding:3%}.orderNum{margin-bottom:25px}}@media (min-width:768px) and (max-width:1024px){.left{padding:3%;width:70%}.right{width:28%!important;padding:2%;margin-top:10%;margin-right:3%}}.mt-25{margin-top:25px}.cp{cursor:pointer}.item-summary{box-shadow:0 0 4px #00000040;border-radius:12px}mat-icon{font-family:Material Icons!important}::ng-deep .p-rating-icon{color:#ffc107!important;font-size:1.25rem!important}::ng-deep .p-timeline-event-content{padding:0!important}::ng-deep .p-timeline-event-connector{background:#000!important;width:3px!important;position:absolute;bottom:-20px;height:55px;left:18px}.sbt-btn{border-radius:8px}::ng-deep .p-timeline-event-marker{display:none!important}@media screen and (min-width: 1200px){.scroll-45{overflow-y:scroll;height:45vh}.scroll-60{overflow-y:scroll;height:60vh}}.f-16{font-size:16px!important}.f-13{font-size:13px!important}@media (max-width: 575.98px){.display-6{font-size:1.5rem}.h3{font-size:1.25rem}}.gap-3{gap:1rem!important}.shadow-sm{box-shadow:0 .125rem .5rem #0000001a!important}.card-header{border-bottom:unset!important}.btn:hover{transform:translateY(-1px);transition:all .2s ease}.card:hover{transform:translateY(-2px);transition:all .3s ease}.bg-opacity-10{background-color:rgba(var(--bs-primary-rgb),.1)!important}.cursor-pointer{cursor:pointer}.transition-transform{transition:transform .3s ease}.rotate-180{transform:rotate(180deg)}.card-header:hover{opacity:.9;transition:opacity .2s ease}.card-body{transition:all .3s ease}.item{padding:0 10px;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;gap:20px}.item:last-child{border-bottom:none}.item-image{width:80px;height:80px;background:#f1f5f9;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:12px;text-align:center;border:2px dashed #cbd5e1}.item-details{flex:1}.item-name{font-size:16px;font-weight:600;color:#0f172a;margin-bottom:4px}.item-description{color:#64748b;font-size:14px;margin-bottom:8px}.item-meta{display:flex;gap:16px;font-size:12px;color:#94a3b8}.item-price{text-align:right}.current-price{font-size:18px;font-weight:700;color:#0f172a}.original-price{font-size:14px;color:#94a3b8;text-decoration:line-through;margin-bottom:4px}.fs-1{font-size:1rem!important}.PENDING{background-color:#fffce1;color:#bdad18}.CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.NO_SHOW{background-color:#d1e7ff;color:#3b82d9}.COMPLETED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.cart-image{display:flex;justify-content:center}.cart-image img{width:17%}\n"] }]
         }], ctorParameters: () => [{ type: RestService }, { type: StorageServiceService }] });
 
 class PassbookTransactionsComponent {
@@ -23132,11 +23132,11 @@ class PassbookTransactionsComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PassbookTransactionsComponent, deps: [{ token: StorageServiceService }, { token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PassbookTransactionsComponent, isStandalone: true, selector: "simpo-passbook-transactions", ngImport: i0, template: "<section class=\"total-container p-2 h-100\">\r\n    <div class=\"d-flex text-start fs-20 lh-28 fw-bold clr-primary mb-3 p-1\">\r\n        Transactions\r\n    </div>\r\n    <div class=\"transactions h-100 overflow-scroll p-1\" *ngIf=\"(allTransactions?.length ?? 0) > 0; else emptyScreen\">\r\n        <div class=\"transaction w-100 p-3 d-flex justify-content-between align-items-center bx-shd mb-3\"\r\n            *ngFor=\"let transaction of allTransactions\">\r\n            <div class=\"left d-flex align-items-center gap-3\">\r\n                <div class=\"d-flex image_container\">\r\n                    <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/558782c1755619706471Group 1707484906.png\"\r\n                        alt=\"load\">\r\n                </div>\r\n                <div class=\"d-flex flex-column\">\r\n                    <div class=\"top lh-20 fw-bold clr-primary\">{{transaction?.emiMonthCount ? transaction?.emiMonthCount\r\n                        : 'N/A' }} Instalment Paid</div>\r\n                    <div class=\"bottom d-flex gap-2\">\r\n                        <div class=\"fs-14 lh-20 clr-secondary transaction_date fw-bold\">\r\n                            {{transaction?.paidDate ? (transaction?.paidDate | date:'dd-MM-yyyy':'UTC') : 'N/A'}}\r\n                        </div>\r\n                        <div class=\"fs-14 lh-20 clr-secondary fw-bold plan_name\">\r\n                            &#x2022;&nbsp;&nbsp;{{transaction?.planName ? transaction?.planName : 'N/A'}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"d-flex text-end\">\r\n                <div class=\"fs-18 lh-28 fw-bold clr-primary installment_amount\">\u20B9 {{transaction?.paidAmount ?\r\n                    transaction?.paidAmount :\r\n                    'N/A'}}</div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</section>\r\n\r\n<ng-template #emptyScreen>\r\n  <div class=\"no-transaction-text\">\r\n    <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/870195c1756931532322transaction.png\" alt=\"\">\r\n    <p>No Transaction</p>\r\n  </div>\r\n</ng-template>\r\n", styles: ["*{font-family:var(--website-font-family)}.fs-20{font-size:20px}.fs-18{font-size:18px}.fs-14{font-size:14px}.lh-28{line-height:28px}.lh-20{line-height:20px}.clr-primary{color:#020817}.clr-secondary{color:#0006}.bx-shd{box-shadow:#63636333 0 2px 8px;border-radius:8px}@media only screen and (max-width:475px){.total-container{padding:unset!important}.plan_name,.transaction_date,.installment_amount{font-size:10px;white-space:nowrap}.image_container{width:30px}.image_container img{width:100%}}.no-transaction-text{height:90%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.no-transaction-text img{height:20%}.no-transaction-text p{font-size:18px;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PassbookTransactionsComponent, isStandalone: true, selector: "simpo-passbook-transactions", ngImport: i0, template: "<section class=\"total-container p-2 h-100\">\n    <div class=\"d-flex text-start fs-20 lh-28 fw-bold clr-primary mb-3 p-1\">\n        Transactions\n    </div>\n    <div class=\"transactions h-100 overflow-scroll p-1\" *ngIf=\"(allTransactions?.length ?? 0) > 0; else emptyScreen\">\n        <div class=\"transaction w-100 p-3 d-flex justify-content-between align-items-center bx-shd mb-3\"\n            *ngFor=\"let transaction of allTransactions\">\n            <div class=\"left d-flex align-items-center gap-3\">\n                <div class=\"d-flex image_container\">\n                    <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/558782c1755619706471Group 1707484906.png\"\n                        alt=\"load\">\n                </div>\n                <div class=\"d-flex flex-column\">\n                    <div class=\"top lh-20 fw-bold clr-primary\">{{transaction?.emiMonthCount ? transaction?.emiMonthCount\n                        : 'N/A' }} Instalment Paid</div>\n                    <div class=\"bottom d-flex gap-2\">\n                        <div class=\"fs-14 lh-20 clr-secondary transaction_date fw-bold\">\n                            {{transaction?.paidDate ? (transaction?.paidDate | date:'dd-MM-yyyy':'UTC') : 'N/A'}}\n                        </div>\n                        <div class=\"fs-14 lh-20 clr-secondary fw-bold plan_name\">\n                            &#x2022;&nbsp;&nbsp;{{transaction?.planName ? transaction?.planName : 'N/A'}}\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"d-flex text-end\">\n                <div class=\"fs-18 lh-28 fw-bold clr-primary installment_amount\">\u20B9 {{transaction?.paidAmount ?\n                    transaction?.paidAmount :\n                    'N/A'}}</div>\n            </div>\n        </div>\n    </div>\n</section>\n\n<ng-template #emptyScreen>\n  <div class=\"no-transaction-text\">\n    <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/870195c1756931532322transaction.png\" alt=\"\">\n    <p>No Transaction</p>\n  </div>\n</ng-template>\n", styles: ["*{font-family:var(--website-font-family)}.fs-20{font-size:20px}.fs-18{font-size:18px}.fs-14{font-size:14px}.lh-28{line-height:28px}.lh-20{line-height:20px}.clr-primary{color:#020817}.clr-secondary{color:#0006}.bx-shd{box-shadow:#63636333 0 2px 8px;border-radius:8px}@media only screen and (max-width:475px){.total-container{padding:unset!important}.plan_name,.transaction_date,.installment_amount{font-size:10px;white-space:nowrap}.image_container{width:30px}.image_container img{width:100%}}.no-transaction-text{height:90%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.no-transaction-text img{height:20%}.no-transaction-text p{font-size:18px;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PassbookTransactionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-passbook-transactions', standalone: true, imports: [CommonModule], template: "<section class=\"total-container p-2 h-100\">\r\n    <div class=\"d-flex text-start fs-20 lh-28 fw-bold clr-primary mb-3 p-1\">\r\n        Transactions\r\n    </div>\r\n    <div class=\"transactions h-100 overflow-scroll p-1\" *ngIf=\"(allTransactions?.length ?? 0) > 0; else emptyScreen\">\r\n        <div class=\"transaction w-100 p-3 d-flex justify-content-between align-items-center bx-shd mb-3\"\r\n            *ngFor=\"let transaction of allTransactions\">\r\n            <div class=\"left d-flex align-items-center gap-3\">\r\n                <div class=\"d-flex image_container\">\r\n                    <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/558782c1755619706471Group 1707484906.png\"\r\n                        alt=\"load\">\r\n                </div>\r\n                <div class=\"d-flex flex-column\">\r\n                    <div class=\"top lh-20 fw-bold clr-primary\">{{transaction?.emiMonthCount ? transaction?.emiMonthCount\r\n                        : 'N/A' }} Instalment Paid</div>\r\n                    <div class=\"bottom d-flex gap-2\">\r\n                        <div class=\"fs-14 lh-20 clr-secondary transaction_date fw-bold\">\r\n                            {{transaction?.paidDate ? (transaction?.paidDate | date:'dd-MM-yyyy':'UTC') : 'N/A'}}\r\n                        </div>\r\n                        <div class=\"fs-14 lh-20 clr-secondary fw-bold plan_name\">\r\n                            &#x2022;&nbsp;&nbsp;{{transaction?.planName ? transaction?.planName : 'N/A'}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"d-flex text-end\">\r\n                <div class=\"fs-18 lh-28 fw-bold clr-primary installment_amount\">\u20B9 {{transaction?.paidAmount ?\r\n                    transaction?.paidAmount :\r\n                    'N/A'}}</div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</section>\r\n\r\n<ng-template #emptyScreen>\r\n  <div class=\"no-transaction-text\">\r\n    <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/870195c1756931532322transaction.png\" alt=\"\">\r\n    <p>No Transaction</p>\r\n  </div>\r\n</ng-template>\r\n", styles: ["*{font-family:var(--website-font-family)}.fs-20{font-size:20px}.fs-18{font-size:18px}.fs-14{font-size:14px}.lh-28{line-height:28px}.lh-20{line-height:20px}.clr-primary{color:#020817}.clr-secondary{color:#0006}.bx-shd{box-shadow:#63636333 0 2px 8px;border-radius:8px}@media only screen and (max-width:475px){.total-container{padding:unset!important}.plan_name,.transaction_date,.installment_amount{font-size:10px;white-space:nowrap}.image_container{width:30px}.image_container img{width:100%}}.no-transaction-text{height:90%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.no-transaction-text img{height:20%}.no-transaction-text p{font-size:18px;font-weight:500}\n"] }]
+            args: [{ selector: 'simpo-passbook-transactions', standalone: true, imports: [CommonModule], template: "<section class=\"total-container p-2 h-100\">\n    <div class=\"d-flex text-start fs-20 lh-28 fw-bold clr-primary mb-3 p-1\">\n        Transactions\n    </div>\n    <div class=\"transactions h-100 overflow-scroll p-1\" *ngIf=\"(allTransactions?.length ?? 0) > 0; else emptyScreen\">\n        <div class=\"transaction w-100 p-3 d-flex justify-content-between align-items-center bx-shd mb-3\"\n            *ngFor=\"let transaction of allTransactions\">\n            <div class=\"left d-flex align-items-center gap-3\">\n                <div class=\"d-flex image_container\">\n                    <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/558782c1755619706471Group 1707484906.png\"\n                        alt=\"load\">\n                </div>\n                <div class=\"d-flex flex-column\">\n                    <div class=\"top lh-20 fw-bold clr-primary\">{{transaction?.emiMonthCount ? transaction?.emiMonthCount\n                        : 'N/A' }} Instalment Paid</div>\n                    <div class=\"bottom d-flex gap-2\">\n                        <div class=\"fs-14 lh-20 clr-secondary transaction_date fw-bold\">\n                            {{transaction?.paidDate ? (transaction?.paidDate | date:'dd-MM-yyyy':'UTC') : 'N/A'}}\n                        </div>\n                        <div class=\"fs-14 lh-20 clr-secondary fw-bold plan_name\">\n                            &#x2022;&nbsp;&nbsp;{{transaction?.planName ? transaction?.planName : 'N/A'}}\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"d-flex text-end\">\n                <div class=\"fs-18 lh-28 fw-bold clr-primary installment_amount\">\u20B9 {{transaction?.paidAmount ?\n                    transaction?.paidAmount :\n                    'N/A'}}</div>\n            </div>\n        </div>\n    </div>\n</section>\n\n<ng-template #emptyScreen>\n  <div class=\"no-transaction-text\">\n    <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/870195c1756931532322transaction.png\" alt=\"\">\n    <p>No Transaction</p>\n  </div>\n</ng-template>\n", styles: ["*{font-family:var(--website-font-family)}.fs-20{font-size:20px}.fs-18{font-size:18px}.fs-14{font-size:14px}.lh-28{line-height:28px}.lh-20{line-height:20px}.clr-primary{color:#020817}.clr-secondary{color:#0006}.bx-shd{box-shadow:#63636333 0 2px 8px;border-radius:8px}@media only screen and (max-width:475px){.total-container{padding:unset!important}.plan_name,.transaction_date,.installment_amount{font-size:10px;white-space:nowrap}.image_container{width:30px}.image_container img{width:100%}}.no-transaction-text{height:90%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.no-transaction-text img{height:20%}.no-transaction-text p{font-size:18px;font-weight:500}\n"] }]
         }], ctorParameters: () => [{ type: StorageServiceService }, { type: RestService }] });
 
 class UserProfileComponent extends BaseSection {
@@ -24102,7 +24102,7 @@ class AuthenticateUserComponent extends BaseSection {
         return window.innerWidth <= 475;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthenticateUserComponent, deps: [{ token: MAT_DIALOG_DATA, optional: true }, { token: MAT_BOTTOM_SHEET_DATA, optional: true }, { token: RestService }, { token: i2$2.Router }, { token: i1$2.MatDialog }, { token: StorageServiceService }, { token: i1$2.MatDialogRef, optional: true }, { token: i8$2.MatBottomSheetRef, optional: true }, { token: EventsService }, { token: i6$1.MessageService }, { token: i8.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AuthenticateUserComponent, isStandalone: true, selector: "simpo-authenticate-user", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n    <div [style.height.vh]=\"isMobile ? '40' : ''\" [id]=\"data?.id\"  simpoHover\r\n        (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [attr.style]=\"customClass\">\r\n        <ng-container [ngSwitch]=\"screen\">\r\n            <section style=\"padding: 14px;\"\r\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n                *ngSwitchCase=\"'LOGIN'\" [ngClass]=\"{'fullSection': isMobile}\">\r\n                <h5 class=\"text-center onlyDesktop\" [style.color]=\"data?.styles?.background?.accentColor\">\r\n                    {{data?.content?.siteName?.value}}</h5>\r\n                <h2 class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Welcome</h2>\r\n                <div class=\"text-center-1\" [style.color]=\"data?.styles?.background?.accentColor\">\r\n                    <div class=\"login\" (click)=\"openLogin()\" ><button class=\"loginButton-1\" [class.active-cls]=\"login\">Login</button></div>\r\n                    \r\n                    <div class=\"login\" (click)=\"openSignup()\" ><button class=\"loginButton-2\" [class.active-cls]=\"signup\">Signup</button></div>\r\n                    \r\n                </div>\r\n                <div class=\"mobile_email\">\r\n                    <button class=\"mobile\" (click)=\"mobile_click()\" [class.active-class]=\"m_clicked\">Login using OTP</button>\r\n                    <button class=\"mobile\" (click)=\"email_click()\" [class.active-class]=\"e_clicked\">Login using Password</button>\r\n                </div>\r\n                <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\" *ngIf=\"m_clicked\">\r\n                <input type=\"email\" placeholder=\"E-mail\" [(ngModel)]=\"passData.email\" (ngModelChange)=\"isEmailValid(passData.email)\" *ngIf=\"e_clicked\">\r\n                \r\n                <form [formGroup]=\"passwordValidation\">\r\n                <div *ngIf=\"e_clicked\" class=\"password-input\">\r\n                <input class=\"password-2\" type=\"password-2\" placeholder=\"Password\" [(ngModel)]=\"passData.password\" formControlName=\"passwordValid\" >\r\n                <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\r\n                            class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                            \r\n                </div>\r\n                \r\n\r\n                <!-- <div class=\"password\" *ngIf=\"e_clicked\">\r\n                    \r\n                    <div class=\"field\">\r\n                        <input class=\"pass-field\" [(ngModel)]=\"this.passData.password\" placeholder=\"Enter password\" matInput > \r\n                        <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\r\n                            class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                    </div>\r\n                </div> -->\r\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"m_clicked\">You will receive an OTP in\r\n                    WhatsApp</p>\r\n                <!-- <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"e_clicked\">You will receive an OTP in\r\n                    Email</p> -->\r\n\r\n                <div *ngIf=\"m_clicked\" class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"generateOTP()\"\r\n                        [disabled]=\"!isMobileValid\" *ngIf=\"!buttonLoading\">Login</button>\r\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"buttonLoading\">\r\n                        <span>OTP Sent</span>\r\n                        <img src=\"https://i.imghippo.com/files/3ScyK1726294453.gif\" alt=\"\" style=\"height: 35px;\">\r\n                    </button>\r\n                    \r\n                </div>\r\n                <div *ngIf=\"e_clicked\" class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\" \r\n                        *ngIf=\"!buttonLoading\" [disabled]=\"emailValid || passwordValidation.invalid\" (click)=\"signinPassword()\">Login</button>\r\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"buttonLoading\">\r\n                        <!-- <span>Email Sent</span> -->\r\n                        <img src=\"https://i.imghippo.com/files/3ScyK1726294453.gif\" alt=\"\" style=\"height: 35px;\">\r\n                    </button>\r\n                    <!-- <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Use email\r\n                    instead</div> -->\r\n                </div>\r\n                </form>\r\n                \r\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n                    <mat-icon>close</mat-icon>\r\n                </div>\r\n            </section>\r\n            <section *ngSwitchCase=\"'OTP'\" style=\"padding: 15px;\"\r\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n                [ngClass]=\"{'fullSection': isMobile}\">\r\n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n                <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                    [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\r\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we\r\n                    have sent via the phone number +{{ countryCode }}{{ mobile\r\n                    }}</p>\r\n                <div class=\"otpContainer\">\r\n                    <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\r\n                        <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" [(ngModel)]=\"otpData[idx]\"\r\n                            (keyup)=\"move($event, idx)\">\r\n                    </ng-container>\r\n                </div>\r\n\r\n                <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifyOTP()\">Verify</button>\r\n                    <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n                        (click)=\"resendOTP()\">Resend code</div>\r\n                </div>\r\n\r\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n                    <mat-icon>close</mat-icon>\r\n                </div>\r\n                <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\r\n                    <mat-icon>keyboard_backspace</mat-icon>\r\n                </div>\r\n            </section>\r\n\r\n\r\n            <section *ngSwitchCase=\"'SIGNUPOTP'\" style=\"padding: 15px;\"\r\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n                [ngClass]=\"{'fullSection': isMobile}\">\r\n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n                <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                    [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\r\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we\r\n                    have sent via the phone number {{ countryCode }}{{ mobile\r\n                    }} and E-mail</p>\r\n                <div class=\"otpContainer\">\r\n                    <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\r\n                        <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" [(ngModel)]=\"otpData[idx]\"\r\n                            (keyup)=\"move($event, idx)\">\r\n                    </ng-container>\r\n                </div>\r\n\r\n                <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifySignupOTP()\">Verify</button>\r\n                    <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n                        (click)=\"resendOTP()\">Resend code</div>\r\n                </div>\r\n\r\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n                    <mat-icon>close</mat-icon>\r\n                </div>\r\n                <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\r\n                    <mat-icon>keyboard_backspace</mat-icon>\r\n                </div>\r\n            </section>\r\n\r\n\r\n\r\n            \r\n            <section *ngSwitchCase=\"'CREATEPASSWORD'\" style=\"padding: 15px;\"\r\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n                [ngClass]=\"{'fullSection': isMobile}\">\r\n                \r\n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n                <div>\r\n                    <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\">Create an Account</h2>\r\n                </div>\r\n                <div class=\"pass-signin\">\r\n                    <div class=\"password\">\r\n                        <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\"> Mobile Number <span class=\"required\">*</span></div>\r\n                        <div class=\"field\">\r\n                            <input class=\"countrycode\" [(ngModel)]=\"this.payload.countryCode\" placeholder=\" +91\" matInput [(ngModel)]=\"countryCode\">\r\n                            <input class=\"m_num\" [(ngModel)]=\"this.payload.mobile\" type=\"text\"  (keypress)=\"validateNumber($event)\"  matInput required #mobileCheck=\"ngModel\" onKeyPress=\"if(this.value.length==15) return false;\"\r\n                            pattern=\"^[6-9]\\d{9}$|^[1-9]\\d{9}$\" placeholder=\" Mobile\" matInput [(ngModel)]=\"mobilenumber\">\r\n                            \r\n                        </div>\r\n                    </div>\r\n                    \r\n                    <div class=\"password\">\r\n                        <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\"> Email <span class=\"required\">*</span></div>\r\n                        <div class=\"field\">\r\n                            <input type=\"email\" [(ngModel)]=\"payload.email\"   class=\"pass-field\"  placeholder=\"E-mail\" (ngModelChange)=\"isEmailValid(payload.email)\">\r\n                    \r\n                        </div>\r\n                    </div>\r\n                    <form [formGroup]=\"passwordValidation\">\r\n                    <div class=\"password\">\r\n                        <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\"> New Password <span class=\"required\">*</span></div>\r\n                        <div class=\"field\">\r\n                            <input [(ngModel)]=\"this.payload.password\" class=\"pass-field\" placeholder=\"Enter New password\" matInput formControlName=\"passwordValid\">\r\n                            <mat-icon matSuffix (click)=\"newPasswordHide = !newPasswordHide\" style=\"cursor:pointer\"\r\n                                class=\"eye-icon\">{{newPasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                        </div>\r\n                    </div>\r\n                    </form>\r\n                    <div class=\"password\">\r\n                        <div class=\"label\" > Confirm Password <span class=\"required\">*</span></div>\r\n                        <div class=\"field\">\r\n                            <input class=\"pass-field\" placeholder=\" Confirm password\" matInput [(ngModel)]=\"confirmPass\" (ngModelChange)=\"isConfirmPAsswordValid(confirmPass)\">\r\n                            <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\r\n                                class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                        </div>\r\n                    </div>\r\n                    \r\n                    <div class=\"password-1\">\r\n                        <div>\r\n                            Already have an account?\r\n                        </div>\r\n                        <div (click)=\"openLogin()\" class=\"backToLogin\">Login</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"signin\" (click)=\"createPassword()\">\r\n                    <button class=\"signin-button\" [disabled]=\"confirm || emailValid\" >Signup</button>\r\n                </div>\r\n                \r\n            </section>  \r\n        </ng-container> \r\n    </div>\r\n    \r\n    <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n        <mat-icon>close</mat-icon>\r\n    </div>\r\n    <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\r\n        <mat-icon>keyboard_backspace</mat-icon>\r\n    </div>\r\n    \r\n\r\n</ng-container>\r\n\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n</ngx-skeleton-loader>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [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\"></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>", styles: ["input,button{width:80%!important;margin:10px auto}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}input{padding:10px}.alternate-opt:hover{text-decoration:underline;cursor:pointer}button:disabled{background-color:#d3d3d3!important}.btn{border:1.5px solid transparent}.login{cursor:pointer}.login:hover{color:#0496ff}.btn:hover{background-color:#000;color:#fff!important}.close-btn{position:absolute;top:10px;right:10px;cursor:pointer}.otpContainer{display:flex;gap:4px;margin:auto}.otpContainer .otp{border-radius:50%;padding:5px;height:50px;width:50px!important;margin:5px!important;text-align:center}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.back-btn{position:absolute;top:10px;left:10px;cursor:pointer}@media only screen and (max-width: 475px){.onlyDesktop{display:none}.pass-field{width:92%}.pass-signin{margin-left:0!important;margin-top:0!important;gap:15px}.m_num{width:70%}.text-center{text-align:center!important;font-size:26px;font-weight:500}.verify-otp{text-align:left!important;margin-top:8%}.otpContainer{width:100vw;margin-left:-20px;right:10px;justify-content:space-between;padding:0 5px!important}.otpContainer .otp{height:45px!important;width:45px!important;margin:0!important}button,input{width:80%!important}.fullSection{justify-content:start!important}.action-btn{position:relative;bottom:6px;width:95%;right:-2px}.action-btn .text-center{text-align:center!important}.otpContainer{margin-top:20px;position:relative;right:10px}}.loginButton-1{width:100%!important;border:1px solid grey;border-radius:6px 0 0 6px/6px 0px 0px 6px;font-size:18px!important;font-weight:100;background-color:transparent;padding:1px 20px}.loginButton-2{width:100%!important;border:1px solid grey;border-radius:0 6px 6px 0/0px 6px 6px 0px;font-size:18px!important;font-weight:100;background-color:transparent;padding:1px 20px}.loginButton-1:hover,.loginButton-2:hover{background-color:#0496ff;color:#fff}.text-center-1{display:flex;justify-content:center;margin:5px}.mobile{border:unset;border-radius:5px;width:48%!important;margin:unset!important;background-color:transparent;font-size:14px!important}.mobile_email{display:flex;justify-content:center}.active-cls{background-color:#0496ff;color:#fff}.active-class{color:#0496ff}.field{display:flex;width:100%;gap:2%;align-items:center}.password{display:flex;flex-direction:column;width:50%}.backToLogin{cursor:pointer}.backToLogin:hover{color:#0496ff}.password-2{display:flex;flex-direction:column;width:80%;margin-left:10%!important;margin-right:13px!important}.password-input{display:flex;align-items:center}.pass-field{margin:unset}.password-1{display:flex;gap:10px}.password{justify-content:start!important;display:flex;flex-direction:column;width:100%;align-items:center}.label{width:100%;text-align:left;font-size:13px;font-weight:600;padding-left:0}.signin{display:flex;justify-content:center;margin-right:16px}.signin-button{width:25%!important;border:1px solid;border-radius:5px}.pass-signin{display:flex;flex-direction:column;gap:20px;margin-left:56px;margin-top:10px}.countrycode{width:20%!important;margin:unset}.m_num{width:58%!important;margin:unset}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i8.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i8$3.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i12.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AuthenticateUserComponent, isStandalone: true, selector: "simpo-authenticate-user", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n    <div [style.height.vh]=\"isMobile ? '40' : ''\" [id]=\"data?.id\"  simpoHover\n        (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [attr.style]=\"customClass\">\n        <ng-container [ngSwitch]=\"screen\">\n            <section style=\"padding: 14px;\"\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\n                *ngSwitchCase=\"'LOGIN'\" [ngClass]=\"{'fullSection': isMobile}\">\n                <h5 class=\"text-center onlyDesktop\" [style.color]=\"data?.styles?.background?.accentColor\">\n                    {{data?.content?.siteName?.value}}</h5>\n                <h2 class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Welcome</h2>\n                <div class=\"text-center-1\" [style.color]=\"data?.styles?.background?.accentColor\">\n                    <div class=\"login\" (click)=\"openLogin()\" ><button class=\"loginButton-1\" [class.active-cls]=\"login\">Login</button></div>\n                    \n                    <div class=\"login\" (click)=\"openSignup()\" ><button class=\"loginButton-2\" [class.active-cls]=\"signup\">Signup</button></div>\n                    \n                </div>\n                <div class=\"mobile_email\">\n                    <button class=\"mobile\" (click)=\"mobile_click()\" [class.active-class]=\"m_clicked\">Login using OTP</button>\n                    <button class=\"mobile\" (click)=\"email_click()\" [class.active-class]=\"e_clicked\">Login using Password</button>\n                </div>\n                <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\" *ngIf=\"m_clicked\">\n                <input type=\"email\" placeholder=\"E-mail\" [(ngModel)]=\"passData.email\" (ngModelChange)=\"isEmailValid(passData.email)\" *ngIf=\"e_clicked\">\n                \n                <form [formGroup]=\"passwordValidation\">\n                <div *ngIf=\"e_clicked\" class=\"password-input\">\n                <input class=\"password-2\" type=\"password-2\" placeholder=\"Password\" [(ngModel)]=\"passData.password\" formControlName=\"passwordValid\" >\n                <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\n                            class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n                            \n                </div>\n                \n\n                <!-- <div class=\"password\" *ngIf=\"e_clicked\">\n                    \n                    <div class=\"field\">\n                        <input class=\"pass-field\" [(ngModel)]=\"this.passData.password\" placeholder=\"Enter password\" matInput > \n                        <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\n                            class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n                    </div>\n                </div> -->\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"m_clicked\">You will receive an OTP in\n                    WhatsApp</p>\n                <!-- <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"e_clicked\">You will receive an OTP in\n                    Email</p> -->\n\n                <div *ngIf=\"m_clicked\" class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"generateOTP()\"\n                        [disabled]=\"!isMobileValid\" *ngIf=\"!buttonLoading\">Login</button>\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"buttonLoading\">\n                        <span>OTP Sent</span>\n                        <img src=\"https://i.imghippo.com/files/3ScyK1726294453.gif\" alt=\"\" style=\"height: 35px;\">\n                    </button>\n                    \n                </div>\n                <div *ngIf=\"e_clicked\" class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\" \n                        *ngIf=\"!buttonLoading\" [disabled]=\"emailValid || passwordValidation.invalid\" (click)=\"signinPassword()\">Login</button>\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"buttonLoading\">\n                        <!-- <span>Email Sent</span> -->\n                        <img src=\"https://i.imghippo.com/files/3ScyK1726294453.gif\" alt=\"\" style=\"height: 35px;\">\n                    </button>\n                    <!-- <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Use email\n                    instead</div> -->\n                </div>\n                </form>\n                \n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\n                    <mat-icon>close</mat-icon>\n                </div>\n            </section>\n            <section *ngSwitchCase=\"'OTP'\" style=\"padding: 15px;\"\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\n                [ngClass]=\"{'fullSection': isMobile}\">\n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\n                <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                    [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we\n                    have sent via the phone number +{{ countryCode }}{{ mobile\n                    }}</p>\n                <div class=\"otpContainer\">\n                    <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\n                        <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" [(ngModel)]=\"otpData[idx]\"\n                            (keyup)=\"move($event, idx)\">\n                    </ng-container>\n                </div>\n\n                <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifyOTP()\">Verify</button>\n                    <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\"\n                        (click)=\"resendOTP()\">Resend code</div>\n                </div>\n\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\n                    <mat-icon>close</mat-icon>\n                </div>\n                <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\n                    <mat-icon>keyboard_backspace</mat-icon>\n                </div>\n            </section>\n\n\n            <section *ngSwitchCase=\"'SIGNUPOTP'\" style=\"padding: 15px;\"\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\n                [ngClass]=\"{'fullSection': isMobile}\">\n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\n                <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                    [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we\n                    have sent via the phone number {{ countryCode }}{{ mobile\n                    }} and E-mail</p>\n                <div class=\"otpContainer\">\n                    <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\n                        <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" [(ngModel)]=\"otpData[idx]\"\n                            (keyup)=\"move($event, idx)\">\n                    </ng-container>\n                </div>\n\n                <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifySignupOTP()\">Verify</button>\n                    <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\"\n                        (click)=\"resendOTP()\">Resend code</div>\n                </div>\n\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\n                    <mat-icon>close</mat-icon>\n                </div>\n                <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\n                    <mat-icon>keyboard_backspace</mat-icon>\n                </div>\n            </section>\n\n\n\n            \n            <section *ngSwitchCase=\"'CREATEPASSWORD'\" style=\"padding: 15px;\"\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\n                [ngClass]=\"{'fullSection': isMobile}\">\n                \n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\n                <div>\n                    <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\">Create an Account</h2>\n                </div>\n                <div class=\"pass-signin\">\n                    <div class=\"password\">\n                        <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\"> Mobile Number <span class=\"required\">*</span></div>\n                        <div class=\"field\">\n                            <input class=\"countrycode\" [(ngModel)]=\"this.payload.countryCode\" placeholder=\" +91\" matInput [(ngModel)]=\"countryCode\">\n                            <input class=\"m_num\" [(ngModel)]=\"this.payload.mobile\" type=\"text\"  (keypress)=\"validateNumber($event)\"  matInput required #mobileCheck=\"ngModel\" onKeyPress=\"if(this.value.length==15) return false;\"\n                            pattern=\"^[6-9]\\d{9}$|^[1-9]\\d{9}$\" placeholder=\" Mobile\" matInput [(ngModel)]=\"mobilenumber\">\n                            \n                        </div>\n                    </div>\n                    \n                    <div class=\"password\">\n                        <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\"> Email <span class=\"required\">*</span></div>\n                        <div class=\"field\">\n                            <input type=\"email\" [(ngModel)]=\"payload.email\"   class=\"pass-field\"  placeholder=\"E-mail\" (ngModelChange)=\"isEmailValid(payload.email)\">\n                    \n                        </div>\n                    </div>\n                    <form [formGroup]=\"passwordValidation\">\n                    <div class=\"password\">\n                        <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\"> New Password <span class=\"required\">*</span></div>\n                        <div class=\"field\">\n                            <input [(ngModel)]=\"this.payload.password\" class=\"pass-field\" placeholder=\"Enter New password\" matInput formControlName=\"passwordValid\">\n                            <mat-icon matSuffix (click)=\"newPasswordHide = !newPasswordHide\" style=\"cursor:pointer\"\n                                class=\"eye-icon\">{{newPasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n                        </div>\n                    </div>\n                    </form>\n                    <div class=\"password\">\n                        <div class=\"label\" > Confirm Password <span class=\"required\">*</span></div>\n                        <div class=\"field\">\n                            <input class=\"pass-field\" placeholder=\" Confirm password\" matInput [(ngModel)]=\"confirmPass\" (ngModelChange)=\"isConfirmPAsswordValid(confirmPass)\">\n                            <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\n                                class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n                        </div>\n                    </div>\n                    \n                    <div class=\"password-1\">\n                        <div>\n                            Already have an account?\n                        </div>\n                        <div (click)=\"openLogin()\" class=\"backToLogin\">Login</div>\n                    </div>\n                </div>\n                <div class=\"signin\" (click)=\"createPassword()\">\n                    <button class=\"signin-button\" [disabled]=\"confirm || emailValid\" >Signup</button>\n                </div>\n                \n            </section>  \n        </ng-container> \n    </div>\n    \n    <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\n        <mat-icon>close</mat-icon>\n    </div>\n    <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\n        <mat-icon>keyboard_backspace</mat-icon>\n    </div>\n    \n\n</ng-container>\n\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n    width: '100%',\n    height: '40vh',\n    'border-radius': '10px',\n    'position': 'relative',\n    'right': '5px'\n  }\">\n</ngx-skeleton-loader>\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<ng-container *ngIf=\"styles?.devider?.display\">\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n</ng-container>\n\n<div [ngClass]=\"{'hover_effect': edit }\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n</div>\n<div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n</div>", styles: ["input,button{width:80%!important;margin:10px auto}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}input{padding:10px}.alternate-opt:hover{text-decoration:underline;cursor:pointer}button:disabled{background-color:#d3d3d3!important}.btn{border:1.5px solid transparent}.login{cursor:pointer}.login:hover{color:#0496ff}.btn:hover{background-color:#000;color:#fff!important}.close-btn{position:absolute;top:10px;right:10px;cursor:pointer}.otpContainer{display:flex;gap:4px;margin:auto}.otpContainer .otp{border-radius:50%;padding:5px;height:50px;width:50px!important;margin:5px!important;text-align:center}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.back-btn{position:absolute;top:10px;left:10px;cursor:pointer}@media only screen and (max-width: 475px){.onlyDesktop{display:none}.pass-field{width:92%}.pass-signin{margin-left:0!important;margin-top:0!important;gap:15px}.m_num{width:70%}.text-center{text-align:center!important;font-size:26px;font-weight:500}.verify-otp{text-align:left!important;margin-top:8%}.otpContainer{width:100vw;margin-left:-20px;right:10px;justify-content:space-between;padding:0 5px!important}.otpContainer .otp{height:45px!important;width:45px!important;margin:0!important}button,input{width:80%!important}.fullSection{justify-content:start!important}.action-btn{position:relative;bottom:6px;width:95%;right:-2px}.action-btn .text-center{text-align:center!important}.otpContainer{margin-top:20px;position:relative;right:10px}}.loginButton-1{width:100%!important;border:1px solid grey;border-radius:6px 0 0 6px/6px 0px 0px 6px;font-size:18px!important;font-weight:100;background-color:transparent;padding:1px 20px}.loginButton-2{width:100%!important;border:1px solid grey;border-radius:0 6px 6px 0/0px 6px 6px 0px;font-size:18px!important;font-weight:100;background-color:transparent;padding:1px 20px}.loginButton-1:hover,.loginButton-2:hover{background-color:#0496ff;color:#fff}.text-center-1{display:flex;justify-content:center;margin:5px}.mobile{border:unset;border-radius:5px;width:48%!important;margin:unset!important;background-color:transparent;font-size:14px!important}.mobile_email{display:flex;justify-content:center}.active-cls{background-color:#0496ff;color:#fff}.active-class{color:#0496ff}.field{display:flex;width:100%;gap:2%;align-items:center}.password{display:flex;flex-direction:column;width:50%}.backToLogin{cursor:pointer}.backToLogin:hover{color:#0496ff}.password-2{display:flex;flex-direction:column;width:80%;margin-left:10%!important;margin-right:13px!important}.password-input{display:flex;align-items:center}.pass-field{margin:unset}.password-1{display:flex;gap:10px}.password{justify-content:start!important;display:flex;flex-direction:column;width:100%;align-items:center}.label{width:100%;text-align:left;font-size:13px;font-weight:600;padding-left:0}.signin{display:flex;justify-content:center;margin-right:16px}.signin-button{width:25%!important;border:1px solid;border-radius:5px}.pass-signin{display:flex;flex-direction:column;gap:20px;margin-left:56px;margin-top:10px}.countrycode{width:20%!important;margin:unset}.m_num{width:58%!important;margin:unset}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i8.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i8$3.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i12.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: 
                 // FormGroup,
                 // FormBuilder,
                 // Validators,
@@ -24126,7 +24126,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         // Validators,
                         ReactiveFormsModule,
                         SvgDividerComponent
-                    ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n    <div [style.height.vh]=\"isMobile ? '40' : ''\" [id]=\"data?.id\"  simpoHover\r\n        (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [attr.style]=\"customClass\">\r\n        <ng-container [ngSwitch]=\"screen\">\r\n            <section style=\"padding: 14px;\"\r\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n                *ngSwitchCase=\"'LOGIN'\" [ngClass]=\"{'fullSection': isMobile}\">\r\n                <h5 class=\"text-center onlyDesktop\" [style.color]=\"data?.styles?.background?.accentColor\">\r\n                    {{data?.content?.siteName?.value}}</h5>\r\n                <h2 class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Welcome</h2>\r\n                <div class=\"text-center-1\" [style.color]=\"data?.styles?.background?.accentColor\">\r\n                    <div class=\"login\" (click)=\"openLogin()\" ><button class=\"loginButton-1\" [class.active-cls]=\"login\">Login</button></div>\r\n                    \r\n                    <div class=\"login\" (click)=\"openSignup()\" ><button class=\"loginButton-2\" [class.active-cls]=\"signup\">Signup</button></div>\r\n                    \r\n                </div>\r\n                <div class=\"mobile_email\">\r\n                    <button class=\"mobile\" (click)=\"mobile_click()\" [class.active-class]=\"m_clicked\">Login using OTP</button>\r\n                    <button class=\"mobile\" (click)=\"email_click()\" [class.active-class]=\"e_clicked\">Login using Password</button>\r\n                </div>\r\n                <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\" *ngIf=\"m_clicked\">\r\n                <input type=\"email\" placeholder=\"E-mail\" [(ngModel)]=\"passData.email\" (ngModelChange)=\"isEmailValid(passData.email)\" *ngIf=\"e_clicked\">\r\n                \r\n                <form [formGroup]=\"passwordValidation\">\r\n                <div *ngIf=\"e_clicked\" class=\"password-input\">\r\n                <input class=\"password-2\" type=\"password-2\" placeholder=\"Password\" [(ngModel)]=\"passData.password\" formControlName=\"passwordValid\" >\r\n                <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\r\n                            class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                            \r\n                </div>\r\n                \r\n\r\n                <!-- <div class=\"password\" *ngIf=\"e_clicked\">\r\n                    \r\n                    <div class=\"field\">\r\n                        <input class=\"pass-field\" [(ngModel)]=\"this.passData.password\" placeholder=\"Enter password\" matInput > \r\n                        <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\r\n                            class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                    </div>\r\n                </div> -->\r\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"m_clicked\">You will receive an OTP in\r\n                    WhatsApp</p>\r\n                <!-- <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"e_clicked\">You will receive an OTP in\r\n                    Email</p> -->\r\n\r\n                <div *ngIf=\"m_clicked\" class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"generateOTP()\"\r\n                        [disabled]=\"!isMobileValid\" *ngIf=\"!buttonLoading\">Login</button>\r\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"buttonLoading\">\r\n                        <span>OTP Sent</span>\r\n                        <img src=\"https://i.imghippo.com/files/3ScyK1726294453.gif\" alt=\"\" style=\"height: 35px;\">\r\n                    </button>\r\n                    \r\n                </div>\r\n                <div *ngIf=\"e_clicked\" class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\" \r\n                        *ngIf=\"!buttonLoading\" [disabled]=\"emailValid || passwordValidation.invalid\" (click)=\"signinPassword()\">Login</button>\r\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"buttonLoading\">\r\n                        <!-- <span>Email Sent</span> -->\r\n                        <img src=\"https://i.imghippo.com/files/3ScyK1726294453.gif\" alt=\"\" style=\"height: 35px;\">\r\n                    </button>\r\n                    <!-- <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Use email\r\n                    instead</div> -->\r\n                </div>\r\n                </form>\r\n                \r\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n                    <mat-icon>close</mat-icon>\r\n                </div>\r\n            </section>\r\n            <section *ngSwitchCase=\"'OTP'\" style=\"padding: 15px;\"\r\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n                [ngClass]=\"{'fullSection': isMobile}\">\r\n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n                <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                    [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\r\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we\r\n                    have sent via the phone number +{{ countryCode }}{{ mobile\r\n                    }}</p>\r\n                <div class=\"otpContainer\">\r\n                    <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\r\n                        <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" [(ngModel)]=\"otpData[idx]\"\r\n                            (keyup)=\"move($event, idx)\">\r\n                    </ng-container>\r\n                </div>\r\n\r\n                <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifyOTP()\">Verify</button>\r\n                    <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n                        (click)=\"resendOTP()\">Resend code</div>\r\n                </div>\r\n\r\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n                    <mat-icon>close</mat-icon>\r\n                </div>\r\n                <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\r\n                    <mat-icon>keyboard_backspace</mat-icon>\r\n                </div>\r\n            </section>\r\n\r\n\r\n            <section *ngSwitchCase=\"'SIGNUPOTP'\" style=\"padding: 15px;\"\r\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n                [ngClass]=\"{'fullSection': isMobile}\">\r\n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n                <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                    [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\r\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we\r\n                    have sent via the phone number {{ countryCode }}{{ mobile\r\n                    }} and E-mail</p>\r\n                <div class=\"otpContainer\">\r\n                    <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\r\n                        <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" [(ngModel)]=\"otpData[idx]\"\r\n                            (keyup)=\"move($event, idx)\">\r\n                    </ng-container>\r\n                </div>\r\n\r\n                <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifySignupOTP()\">Verify</button>\r\n                    <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n                        (click)=\"resendOTP()\">Resend code</div>\r\n                </div>\r\n\r\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n                    <mat-icon>close</mat-icon>\r\n                </div>\r\n                <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\r\n                    <mat-icon>keyboard_backspace</mat-icon>\r\n                </div>\r\n            </section>\r\n\r\n\r\n\r\n            \r\n            <section *ngSwitchCase=\"'CREATEPASSWORD'\" style=\"padding: 15px;\"\r\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n                [ngClass]=\"{'fullSection': isMobile}\">\r\n                \r\n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n                <div>\r\n                    <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n                        [style.color]=\"data?.styles?.background?.accentColor\">Create an Account</h2>\r\n                </div>\r\n                <div class=\"pass-signin\">\r\n                    <div class=\"password\">\r\n                        <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\"> Mobile Number <span class=\"required\">*</span></div>\r\n                        <div class=\"field\">\r\n                            <input class=\"countrycode\" [(ngModel)]=\"this.payload.countryCode\" placeholder=\" +91\" matInput [(ngModel)]=\"countryCode\">\r\n                            <input class=\"m_num\" [(ngModel)]=\"this.payload.mobile\" type=\"text\"  (keypress)=\"validateNumber($event)\"  matInput required #mobileCheck=\"ngModel\" onKeyPress=\"if(this.value.length==15) return false;\"\r\n                            pattern=\"^[6-9]\\d{9}$|^[1-9]\\d{9}$\" placeholder=\" Mobile\" matInput [(ngModel)]=\"mobilenumber\">\r\n                            \r\n                        </div>\r\n                    </div>\r\n                    \r\n                    <div class=\"password\">\r\n                        <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\"> Email <span class=\"required\">*</span></div>\r\n                        <div class=\"field\">\r\n                            <input type=\"email\" [(ngModel)]=\"payload.email\"   class=\"pass-field\"  placeholder=\"E-mail\" (ngModelChange)=\"isEmailValid(payload.email)\">\r\n                    \r\n                        </div>\r\n                    </div>\r\n                    <form [formGroup]=\"passwordValidation\">\r\n                    <div class=\"password\">\r\n                        <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\"> New Password <span class=\"required\">*</span></div>\r\n                        <div class=\"field\">\r\n                            <input [(ngModel)]=\"this.payload.password\" class=\"pass-field\" placeholder=\"Enter New password\" matInput formControlName=\"passwordValid\">\r\n                            <mat-icon matSuffix (click)=\"newPasswordHide = !newPasswordHide\" style=\"cursor:pointer\"\r\n                                class=\"eye-icon\">{{newPasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                        </div>\r\n                    </div>\r\n                    </form>\r\n                    <div class=\"password\">\r\n                        <div class=\"label\" > Confirm Password <span class=\"required\">*</span></div>\r\n                        <div class=\"field\">\r\n                            <input class=\"pass-field\" placeholder=\" Confirm password\" matInput [(ngModel)]=\"confirmPass\" (ngModelChange)=\"isConfirmPAsswordValid(confirmPass)\">\r\n                            <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\r\n                                class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                        </div>\r\n                    </div>\r\n                    \r\n                    <div class=\"password-1\">\r\n                        <div>\r\n                            Already have an account?\r\n                        </div>\r\n                        <div (click)=\"openLogin()\" class=\"backToLogin\">Login</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"signin\" (click)=\"createPassword()\">\r\n                    <button class=\"signin-button\" [disabled]=\"confirm || emailValid\" >Signup</button>\r\n                </div>\r\n                \r\n            </section>  \r\n        </ng-container> \r\n    </div>\r\n    \r\n    <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n        <mat-icon>close</mat-icon>\r\n    </div>\r\n    <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\r\n        <mat-icon>keyboard_backspace</mat-icon>\r\n    </div>\r\n    \r\n\r\n</ng-container>\r\n\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n    width: '100%',\r\n    height: '40vh',\r\n    'border-radius': '10px',\r\n    'position': 'relative',\r\n    'right': '5px'\r\n  }\">\r\n</ngx-skeleton-loader>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [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\"></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>", styles: ["input,button{width:80%!important;margin:10px auto}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}input{padding:10px}.alternate-opt:hover{text-decoration:underline;cursor:pointer}button:disabled{background-color:#d3d3d3!important}.btn{border:1.5px solid transparent}.login{cursor:pointer}.login:hover{color:#0496ff}.btn:hover{background-color:#000;color:#fff!important}.close-btn{position:absolute;top:10px;right:10px;cursor:pointer}.otpContainer{display:flex;gap:4px;margin:auto}.otpContainer .otp{border-radius:50%;padding:5px;height:50px;width:50px!important;margin:5px!important;text-align:center}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.back-btn{position:absolute;top:10px;left:10px;cursor:pointer}@media only screen and (max-width: 475px){.onlyDesktop{display:none}.pass-field{width:92%}.pass-signin{margin-left:0!important;margin-top:0!important;gap:15px}.m_num{width:70%}.text-center{text-align:center!important;font-size:26px;font-weight:500}.verify-otp{text-align:left!important;margin-top:8%}.otpContainer{width:100vw;margin-left:-20px;right:10px;justify-content:space-between;padding:0 5px!important}.otpContainer .otp{height:45px!important;width:45px!important;margin:0!important}button,input{width:80%!important}.fullSection{justify-content:start!important}.action-btn{position:relative;bottom:6px;width:95%;right:-2px}.action-btn .text-center{text-align:center!important}.otpContainer{margin-top:20px;position:relative;right:10px}}.loginButton-1{width:100%!important;border:1px solid grey;border-radius:6px 0 0 6px/6px 0px 0px 6px;font-size:18px!important;font-weight:100;background-color:transparent;padding:1px 20px}.loginButton-2{width:100%!important;border:1px solid grey;border-radius:0 6px 6px 0/0px 6px 6px 0px;font-size:18px!important;font-weight:100;background-color:transparent;padding:1px 20px}.loginButton-1:hover,.loginButton-2:hover{background-color:#0496ff;color:#fff}.text-center-1{display:flex;justify-content:center;margin:5px}.mobile{border:unset;border-radius:5px;width:48%!important;margin:unset!important;background-color:transparent;font-size:14px!important}.mobile_email{display:flex;justify-content:center}.active-cls{background-color:#0496ff;color:#fff}.active-class{color:#0496ff}.field{display:flex;width:100%;gap:2%;align-items:center}.password{display:flex;flex-direction:column;width:50%}.backToLogin{cursor:pointer}.backToLogin:hover{color:#0496ff}.password-2{display:flex;flex-direction:column;width:80%;margin-left:10%!important;margin-right:13px!important}.password-input{display:flex;align-items:center}.pass-field{margin:unset}.password-1{display:flex;gap:10px}.password{justify-content:start!important;display:flex;flex-direction:column;width:100%;align-items:center}.label{width:100%;text-align:left;font-size:13px;font-weight:600;padding-left:0}.signin{display:flex;justify-content:center;margin-right:16px}.signin-button{width:25%!important;border:1px solid;border-radius:5px}.pass-signin{display:flex;flex-direction:column;gap:20px;margin-left:56px;margin-top:10px}.countrycode{width:20%!important;margin:unset}.m_num{width:58%!important;margin:unset}\n"] }]
+                    ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\n    <div [style.height.vh]=\"isMobile ? '40' : ''\" [id]=\"data?.id\"  simpoHover\n        (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [attr.style]=\"customClass\">\n        <ng-container [ngSwitch]=\"screen\">\n            <section style=\"padding: 14px;\"\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\n                *ngSwitchCase=\"'LOGIN'\" [ngClass]=\"{'fullSection': isMobile}\">\n                <h5 class=\"text-center onlyDesktop\" [style.color]=\"data?.styles?.background?.accentColor\">\n                    {{data?.content?.siteName?.value}}</h5>\n                <h2 class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Welcome</h2>\n                <div class=\"text-center-1\" [style.color]=\"data?.styles?.background?.accentColor\">\n                    <div class=\"login\" (click)=\"openLogin()\" ><button class=\"loginButton-1\" [class.active-cls]=\"login\">Login</button></div>\n                    \n                    <div class=\"login\" (click)=\"openSignup()\" ><button class=\"loginButton-2\" [class.active-cls]=\"signup\">Signup</button></div>\n                    \n                </div>\n                <div class=\"mobile_email\">\n                    <button class=\"mobile\" (click)=\"mobile_click()\" [class.active-class]=\"m_clicked\">Login using OTP</button>\n                    <button class=\"mobile\" (click)=\"email_click()\" [class.active-class]=\"e_clicked\">Login using Password</button>\n                </div>\n                <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\" *ngIf=\"m_clicked\">\n                <input type=\"email\" placeholder=\"E-mail\" [(ngModel)]=\"passData.email\" (ngModelChange)=\"isEmailValid(passData.email)\" *ngIf=\"e_clicked\">\n                \n                <form [formGroup]=\"passwordValidation\">\n                <div *ngIf=\"e_clicked\" class=\"password-input\">\n                <input class=\"password-2\" type=\"password-2\" placeholder=\"Password\" [(ngModel)]=\"passData.password\" formControlName=\"passwordValid\" >\n                <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\n                            class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n                            \n                </div>\n                \n\n                <!-- <div class=\"password\" *ngIf=\"e_clicked\">\n                    \n                    <div class=\"field\">\n                        <input class=\"pass-field\" [(ngModel)]=\"this.passData.password\" placeholder=\"Enter password\" matInput > \n                        <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\n                            class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n                    </div>\n                </div> -->\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"m_clicked\">You will receive an OTP in\n                    WhatsApp</p>\n                <!-- <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"e_clicked\">You will receive an OTP in\n                    Email</p> -->\n\n                <div *ngIf=\"m_clicked\" class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"generateOTP()\"\n                        [disabled]=\"!isMobileValid\" *ngIf=\"!buttonLoading\">Login</button>\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"buttonLoading\">\n                        <span>OTP Sent</span>\n                        <img src=\"https://i.imghippo.com/files/3ScyK1726294453.gif\" alt=\"\" style=\"height: 35px;\">\n                    </button>\n                    \n                </div>\n                <div *ngIf=\"e_clicked\" class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\" \n                        *ngIf=\"!buttonLoading\" [disabled]=\"emailValid || passwordValidation.invalid\" (click)=\"signinPassword()\">Login</button>\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"buttonLoading\">\n                        <!-- <span>Email Sent</span> -->\n                        <img src=\"https://i.imghippo.com/files/3ScyK1726294453.gif\" alt=\"\" style=\"height: 35px;\">\n                    </button>\n                    <!-- <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Use email\n                    instead</div> -->\n                </div>\n                </form>\n                \n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\n                    <mat-icon>close</mat-icon>\n                </div>\n            </section>\n            <section *ngSwitchCase=\"'OTP'\" style=\"padding: 15px;\"\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\n                [ngClass]=\"{'fullSection': isMobile}\">\n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\n                <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                    [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we\n                    have sent via the phone number +{{ countryCode }}{{ mobile\n                    }}</p>\n                <div class=\"otpContainer\">\n                    <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\n                        <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" [(ngModel)]=\"otpData[idx]\"\n                            (keyup)=\"move($event, idx)\">\n                    </ng-container>\n                </div>\n\n                <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifyOTP()\">Verify</button>\n                    <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\"\n                        (click)=\"resendOTP()\">Resend code</div>\n                </div>\n\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\n                    <mat-icon>close</mat-icon>\n                </div>\n                <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\n                    <mat-icon>keyboard_backspace</mat-icon>\n                </div>\n            </section>\n\n\n            <section *ngSwitchCase=\"'SIGNUPOTP'\" style=\"padding: 15px;\"\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\n                [ngClass]=\"{'fullSection': isMobile}\">\n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\n                <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                    [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\n                <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we\n                    have sent via the phone number {{ countryCode }}{{ mobile\n                    }} and E-mail</p>\n                <div class=\"otpContainer\">\n                    <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\n                        <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" [(ngModel)]=\"otpData[idx]\"\n                            (keyup)=\"move($event, idx)\">\n                    </ng-container>\n                </div>\n\n                <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\n                    <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifySignupOTP()\">Verify</button>\n                    <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\"\n                        (click)=\"resendOTP()\">Resend code</div>\n                </div>\n\n                <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\n                    <mat-icon>close</mat-icon>\n                </div>\n                <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\n                    <mat-icon>keyboard_backspace</mat-icon>\n                </div>\n            </section>\n\n\n\n            \n            <section *ngSwitchCase=\"'CREATEPASSWORD'\" style=\"padding: 15px;\"\n                class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\n                [ngClass]=\"{'fullSection': isMobile}\">\n                \n                <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\n                <div>\n                    <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\n                        [style.color]=\"data?.styles?.background?.accentColor\">Create an Account</h2>\n                </div>\n                <div class=\"pass-signin\">\n                    <div class=\"password\">\n                        <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\"> Mobile Number <span class=\"required\">*</span></div>\n                        <div class=\"field\">\n                            <input class=\"countrycode\" [(ngModel)]=\"this.payload.countryCode\" placeholder=\" +91\" matInput [(ngModel)]=\"countryCode\">\n                            <input class=\"m_num\" [(ngModel)]=\"this.payload.mobile\" type=\"text\"  (keypress)=\"validateNumber($event)\"  matInput required #mobileCheck=\"ngModel\" onKeyPress=\"if(this.value.length==15) return false;\"\n                            pattern=\"^[6-9]\\d{9}$|^[1-9]\\d{9}$\" placeholder=\" Mobile\" matInput [(ngModel)]=\"mobilenumber\">\n                            \n                        </div>\n                    </div>\n                    \n                    <div class=\"password\">\n                        <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\"> Email <span class=\"required\">*</span></div>\n                        <div class=\"field\">\n                            <input type=\"email\" [(ngModel)]=\"payload.email\"   class=\"pass-field\"  placeholder=\"E-mail\" (ngModelChange)=\"isEmailValid(payload.email)\">\n                    \n                        </div>\n                    </div>\n                    <form [formGroup]=\"passwordValidation\">\n                    <div class=\"password\">\n                        <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\"> New Password <span class=\"required\">*</span></div>\n                        <div class=\"field\">\n                            <input [(ngModel)]=\"this.payload.password\" class=\"pass-field\" placeholder=\"Enter New password\" matInput formControlName=\"passwordValid\">\n                            <mat-icon matSuffix (click)=\"newPasswordHide = !newPasswordHide\" style=\"cursor:pointer\"\n                                class=\"eye-icon\">{{newPasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n                        </div>\n                    </div>\n                    </form>\n                    <div class=\"password\">\n                        <div class=\"label\" > Confirm Password <span class=\"required\">*</span></div>\n                        <div class=\"field\">\n                            <input class=\"pass-field\" placeholder=\" Confirm password\" matInput [(ngModel)]=\"confirmPass\" (ngModelChange)=\"isConfirmPAsswordValid(confirmPass)\">\n                            <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\n                                class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n                        </div>\n                    </div>\n                    \n                    <div class=\"password-1\">\n                        <div>\n                            Already have an account?\n                        </div>\n                        <div (click)=\"openLogin()\" class=\"backToLogin\">Login</div>\n                    </div>\n                </div>\n                <div class=\"signin\" (click)=\"createPassword()\">\n                    <button class=\"signin-button\" [disabled]=\"confirm || emailValid\" >Signup</button>\n                </div>\n                \n            </section>  \n        </ng-container> \n    </div>\n    \n    <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\n        <mat-icon>close</mat-icon>\n    </div>\n    <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\n        <mat-icon>keyboard_backspace</mat-icon>\n    </div>\n    \n\n</ng-container>\n\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n    width: '100%',\n    height: '40vh',\n    'border-radius': '10px',\n    'position': 'relative',\n    'right': '5px'\n  }\">\n</ngx-skeleton-loader>\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<ng-container *ngIf=\"styles?.devider?.display\">\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n</ng-container>\n\n<div [ngClass]=\"{'hover_effect': edit }\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n</div>\n<div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n</div>", styles: ["input,button{width:80%!important;margin:10px auto}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}input{padding:10px}.alternate-opt:hover{text-decoration:underline;cursor:pointer}button:disabled{background-color:#d3d3d3!important}.btn{border:1.5px solid transparent}.login{cursor:pointer}.login:hover{color:#0496ff}.btn:hover{background-color:#000;color:#fff!important}.close-btn{position:absolute;top:10px;right:10px;cursor:pointer}.otpContainer{display:flex;gap:4px;margin:auto}.otpContainer .otp{border-radius:50%;padding:5px;height:50px;width:50px!important;margin:5px!important;text-align:center}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.back-btn{position:absolute;top:10px;left:10px;cursor:pointer}@media only screen and (max-width: 475px){.onlyDesktop{display:none}.pass-field{width:92%}.pass-signin{margin-left:0!important;margin-top:0!important;gap:15px}.m_num{width:70%}.text-center{text-align:center!important;font-size:26px;font-weight:500}.verify-otp{text-align:left!important;margin-top:8%}.otpContainer{width:100vw;margin-left:-20px;right:10px;justify-content:space-between;padding:0 5px!important}.otpContainer .otp{height:45px!important;width:45px!important;margin:0!important}button,input{width:80%!important}.fullSection{justify-content:start!important}.action-btn{position:relative;bottom:6px;width:95%;right:-2px}.action-btn .text-center{text-align:center!important}.otpContainer{margin-top:20px;position:relative;right:10px}}.loginButton-1{width:100%!important;border:1px solid grey;border-radius:6px 0 0 6px/6px 0px 0px 6px;font-size:18px!important;font-weight:100;background-color:transparent;padding:1px 20px}.loginButton-2{width:100%!important;border:1px solid grey;border-radius:0 6px 6px 0/0px 6px 6px 0px;font-size:18px!important;font-weight:100;background-color:transparent;padding:1px 20px}.loginButton-1:hover,.loginButton-2:hover{background-color:#0496ff;color:#fff}.text-center-1{display:flex;justify-content:center;margin:5px}.mobile{border:unset;border-radius:5px;width:48%!important;margin:unset!important;background-color:transparent;font-size:14px!important}.mobile_email{display:flex;justify-content:center}.active-cls{background-color:#0496ff;color:#fff}.active-class{color:#0496ff}.field{display:flex;width:100%;gap:2%;align-items:center}.password{display:flex;flex-direction:column;width:50%}.backToLogin{cursor:pointer}.backToLogin:hover{color:#0496ff}.password-2{display:flex;flex-direction:column;width:80%;margin-left:10%!important;margin-right:13px!important}.password-input{display:flex;align-items:center}.pass-field{margin:unset}.password-1{display:flex;gap:10px}.password{justify-content:start!important;display:flex;flex-direction:column;width:100%;align-items:center}.label{width:100%;text-align:left;font-size:13px;font-weight:600;padding-left:0}.signin{display:flex;justify-content:center;margin-right:16px}.signin-button{width:25%!important;border:1px solid;border-radius:5px}.pass-signin{display:flex;flex-direction:column;gap:20px;margin-left:56px;margin-top:10px}.countrycode{width:20%!important;margin:unset}.m_num{width:58%!important;margin:unset}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -24348,7 +24348,7 @@ class VerifyComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: VerifyComponent, deps: [{ token: RestService }, { token: i2$2.Router }, { token: StorageServiceService }, { token: i6$1.MessageService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: VerifyComponent, isStandalone: true, selector: "simpo-verify-payment", inputs: { data: "data", responseData: "responseData", edit: "edit", index: "index", delete: "delete", customClass: "customClass" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<!-- <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<section class=\"d-flex flex-column align-items-center justify-content-center total-container\" style=\"height: 100vh;\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"getImageUrl\" style=\"height: 200px; width: 200px;\" [alt]=\"content?.image?.altText\">\r\n    <span class=\"font-bold\">{{loadingText}}</span>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></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> -->\r\n<section *ngIf=\"paymentStatus === 'SUCCESS'\" class=\"main_section\">\r\n  <div class=\"image_section\">\r\n    <img alt=\"loader\" src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/688996c175593490852796237-success.gif\">\r\n  </div>\r\n  <div class=\"success_heading heading\">\r\n    Payment Successfull\r\n  </div>\r\n  <div class=\"payment_sub_text\">\r\n    Your payment has been successfully processed.\r\n  </div>\r\n  <!-- <div class=\"plan_description\">\r\n    <div class=\"title_value\">\r\n      <div class=\"plan_title\">\r\n        Subscribed Plan\r\n      </div>\r\n      <div class=\"plan_value\">\r\n        {{ planName | titlecase }}\r\n      </div>\r\n    </div>\r\n    <div class=\"title_value\">\r\n      <div class=\"plan_title\">\r\n        Amount Paid\r\n      </div>\r\n      <div class=\"plan_value\">\r\n        <span>\u20B9</span><span>{{ planAmount }}</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"title_value\">\r\n      <div class=\"plan_title\">\r\n        Valid till\r\n      </div>\r\n      <div class=\"plan_value\">\r\n        {{ validity | date }}\r\n      </div>\r\n    </div>\r\n  </div> -->\r\n</section>\r\n<section *ngIf=\"paymentStatus === 'FAILED'\" class=\"main_section\">\r\n  <div class=\"image_section\">\r\n    <img alt=\"loader\" src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/663878c1755934932573paymentfailed.gif\">\r\n  </div>\r\n  <div class=\"success_heading heading\">\r\n    Payment Failed\r\n  </div>\r\n  <div class=\"payment_sub_text\">\r\n    Unfortunately Payment was rejected\r\n  </div>\r\n  <div class=\"payment_minimal_text\">\r\n    Page will be automatically redirect to homepage\r\n  </div>\r\n  <!-- <div class=\"plan_description\">\r\n      <button (click)=\"done()\">Done</button>\r\n  </div> -->\r\n</section>\r\n\r\n<section *ngIf=\"paymentStatus === 'ONGOING'\" class=\"main_section spinner\">\r\n  <div class=\"payment-ongoing\">\r\n    <mat-spinner style=\"width: 100%;\"></mat-spinner>\r\n    <p>{{loadingText}}</p>\r\n  </div>\r\n</section>\r\n", styles: ["*{font-family:var(--website-font-family)}.main_section{background-color:#fff;height:calc(90vh + -0px);overflow-y:scroll;display:flex;justify-content:center;align-items:center;flex-direction:column}.image_section img{width:100px}.success_heading{color:#000;margin-top:10px}.payment_sub_text{margin-top:10px;width:35%;text-align:center;line-height:32px}.plan_description{margin-top:10px!important;box-shadow:0 0 1px #28293d14,0 .5px 2px #60617029;background-color:#fff;border-radius:10px;width:30%;margin:0 auto;padding:40px}.title_value{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px}@media only screen and (max-width: 475px){.payment_sub_text{width:80%}.plan_description{width:80%;height:auto}}.spinner{display:flex;align-items:center;justify-content:center}.spinner p{margin-top:22px;font-size:18px;font-weight:500}.payment-ongoing mat-spinner{width:100%!important}.heading{font-size:18px;font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: ToastModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i10$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: VerifyComponent, isStandalone: true, selector: "simpo-verify-payment", inputs: { data: "data", responseData: "responseData", edit: "edit", index: "index", delete: "delete", customClass: "customClass" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<!-- <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n<section class=\"d-flex flex-column align-items-center justify-content-center total-container\" style=\"height: 100vh;\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\n    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"getImageUrl\" style=\"height: 200px; width: 200px;\" [alt]=\"content?.image?.altText\">\n    <span class=\"font-bold\">{{loadingText}}</span>\n\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</section> -->\n<section *ngIf=\"paymentStatus === 'SUCCESS'\" class=\"main_section\">\n  <div class=\"image_section\">\n    <img alt=\"loader\" src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/688996c175593490852796237-success.gif\">\n  </div>\n  <div class=\"success_heading heading\">\n    Payment Successfull\n  </div>\n  <div class=\"payment_sub_text\">\n    Your payment has been successfully processed.\n  </div>\n  <!-- <div class=\"plan_description\">\n    <div class=\"title_value\">\n      <div class=\"plan_title\">\n        Subscribed Plan\n      </div>\n      <div class=\"plan_value\">\n        {{ planName | titlecase }}\n      </div>\n    </div>\n    <div class=\"title_value\">\n      <div class=\"plan_title\">\n        Amount Paid\n      </div>\n      <div class=\"plan_value\">\n        <span>\u20B9</span><span>{{ planAmount }}</span>\n      </div>\n    </div>\n    <div class=\"title_value\">\n      <div class=\"plan_title\">\n        Valid till\n      </div>\n      <div class=\"plan_value\">\n        {{ validity | date }}\n      </div>\n    </div>\n  </div> -->\n</section>\n<section *ngIf=\"paymentStatus === 'FAILED'\" class=\"main_section\">\n  <div class=\"image_section\">\n    <img alt=\"loader\" src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/663878c1755934932573paymentfailed.gif\">\n  </div>\n  <div class=\"success_heading heading\">\n    Payment Failed\n  </div>\n  <div class=\"payment_sub_text\">\n    Unfortunately Payment was rejected\n  </div>\n  <div class=\"payment_minimal_text\">\n    Page will be automatically redirect to homepage\n  </div>\n  <!-- <div class=\"plan_description\">\n      <button (click)=\"done()\">Done</button>\n  </div> -->\n</section>\n\n<section *ngIf=\"paymentStatus === 'ONGOING'\" class=\"main_section spinner\">\n  <div class=\"payment-ongoing\">\n    <mat-spinner style=\"width: 100%;\"></mat-spinner>\n    <p>{{loadingText}}</p>\n  </div>\n</section>\n", styles: ["*{font-family:var(--website-font-family)}.main_section{background-color:#fff;height:calc(90vh + -0px);overflow-y:scroll;display:flex;justify-content:center;align-items:center;flex-direction:column}.image_section img{width:100px}.success_heading{color:#000;margin-top:10px}.payment_sub_text{margin-top:10px;width:35%;text-align:center;line-height:32px}.plan_description{margin-top:10px!important;box-shadow:0 0 1px #28293d14,0 .5px 2px #60617029;background-color:#fff;border-radius:10px;width:30%;margin:0 auto;padding:40px}.title_value{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px}@media only screen and (max-width: 475px){.payment_sub_text{width:80%}.plan_description{width:80%;height:auto}}.spinner{display:flex;align-items:center;justify-content:center}.spinner p{margin-top:22px;font-size:18px;font-weight:500}.payment-ongoing mat-spinner{width:100%!important}.heading{font-size:18px;font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: ToastModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i10$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: VerifyComponent, decorators: [{
             type: Component,
@@ -24360,7 +24360,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         HoverElementsComponent,
                         DeleteHoverElementComponent,
                         MatProgressSpinnerModule
-                    ], providers: [MessageService], template: "<!-- <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<section class=\"d-flex flex-column align-items-center justify-content-center total-container\" style=\"height: 100vh;\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"getImageUrl\" style=\"height: 200px; width: 200px;\" [alt]=\"content?.image?.altText\">\r\n    <span class=\"font-bold\">{{loadingText}}</span>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></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> -->\r\n<section *ngIf=\"paymentStatus === 'SUCCESS'\" class=\"main_section\">\r\n  <div class=\"image_section\">\r\n    <img alt=\"loader\" src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/688996c175593490852796237-success.gif\">\r\n  </div>\r\n  <div class=\"success_heading heading\">\r\n    Payment Successfull\r\n  </div>\r\n  <div class=\"payment_sub_text\">\r\n    Your payment has been successfully processed.\r\n  </div>\r\n  <!-- <div class=\"plan_description\">\r\n    <div class=\"title_value\">\r\n      <div class=\"plan_title\">\r\n        Subscribed Plan\r\n      </div>\r\n      <div class=\"plan_value\">\r\n        {{ planName | titlecase }}\r\n      </div>\r\n    </div>\r\n    <div class=\"title_value\">\r\n      <div class=\"plan_title\">\r\n        Amount Paid\r\n      </div>\r\n      <div class=\"plan_value\">\r\n        <span>\u20B9</span><span>{{ planAmount }}</span>\r\n      </div>\r\n    </div>\r\n    <div class=\"title_value\">\r\n      <div class=\"plan_title\">\r\n        Valid till\r\n      </div>\r\n      <div class=\"plan_value\">\r\n        {{ validity | date }}\r\n      </div>\r\n    </div>\r\n  </div> -->\r\n</section>\r\n<section *ngIf=\"paymentStatus === 'FAILED'\" class=\"main_section\">\r\n  <div class=\"image_section\">\r\n    <img alt=\"loader\" src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/663878c1755934932573paymentfailed.gif\">\r\n  </div>\r\n  <div class=\"success_heading heading\">\r\n    Payment Failed\r\n  </div>\r\n  <div class=\"payment_sub_text\">\r\n    Unfortunately Payment was rejected\r\n  </div>\r\n  <div class=\"payment_minimal_text\">\r\n    Page will be automatically redirect to homepage\r\n  </div>\r\n  <!-- <div class=\"plan_description\">\r\n      <button (click)=\"done()\">Done</button>\r\n  </div> -->\r\n</section>\r\n\r\n<section *ngIf=\"paymentStatus === 'ONGOING'\" class=\"main_section spinner\">\r\n  <div class=\"payment-ongoing\">\r\n    <mat-spinner style=\"width: 100%;\"></mat-spinner>\r\n    <p>{{loadingText}}</p>\r\n  </div>\r\n</section>\r\n", styles: ["*{font-family:var(--website-font-family)}.main_section{background-color:#fff;height:calc(90vh + -0px);overflow-y:scroll;display:flex;justify-content:center;align-items:center;flex-direction:column}.image_section img{width:100px}.success_heading{color:#000;margin-top:10px}.payment_sub_text{margin-top:10px;width:35%;text-align:center;line-height:32px}.plan_description{margin-top:10px!important;box-shadow:0 0 1px #28293d14,0 .5px 2px #60617029;background-color:#fff;border-radius:10px;width:30%;margin:0 auto;padding:40px}.title_value{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px}@media only screen and (max-width: 475px){.payment_sub_text{width:80%}.plan_description{width:80%;height:auto}}.spinner{display:flex;align-items:center;justify-content:center}.spinner p{margin-top:22px;font-size:18px;font-weight:500}.payment-ongoing mat-spinner{width:100%!important}.heading{font-size:18px;font-weight:700}\n"] }]
+                    ], providers: [MessageService], template: "<!-- <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n<section class=\"d-flex flex-column align-items-center justify-content-center total-container\" style=\"height: 100vh;\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\n    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"getImageUrl\" style=\"height: 200px; width: 200px;\" [alt]=\"content?.image?.altText\">\n    <span class=\"font-bold\">{{loadingText}}</span>\n\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</section> -->\n<section *ngIf=\"paymentStatus === 'SUCCESS'\" class=\"main_section\">\n  <div class=\"image_section\">\n    <img alt=\"loader\" src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/688996c175593490852796237-success.gif\">\n  </div>\n  <div class=\"success_heading heading\">\n    Payment Successfull\n  </div>\n  <div class=\"payment_sub_text\">\n    Your payment has been successfully processed.\n  </div>\n  <!-- <div class=\"plan_description\">\n    <div class=\"title_value\">\n      <div class=\"plan_title\">\n        Subscribed Plan\n      </div>\n      <div class=\"plan_value\">\n        {{ planName | titlecase }}\n      </div>\n    </div>\n    <div class=\"title_value\">\n      <div class=\"plan_title\">\n        Amount Paid\n      </div>\n      <div class=\"plan_value\">\n        <span>\u20B9</span><span>{{ planAmount }}</span>\n      </div>\n    </div>\n    <div class=\"title_value\">\n      <div class=\"plan_title\">\n        Valid till\n      </div>\n      <div class=\"plan_value\">\n        {{ validity | date }}\n      </div>\n    </div>\n  </div> -->\n</section>\n<section *ngIf=\"paymentStatus === 'FAILED'\" class=\"main_section\">\n  <div class=\"image_section\">\n    <img alt=\"loader\" src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/663878c1755934932573paymentfailed.gif\">\n  </div>\n  <div class=\"success_heading heading\">\n    Payment Failed\n  </div>\n  <div class=\"payment_sub_text\">\n    Unfortunately Payment was rejected\n  </div>\n  <div class=\"payment_minimal_text\">\n    Page will be automatically redirect to homepage\n  </div>\n  <!-- <div class=\"plan_description\">\n      <button (click)=\"done()\">Done</button>\n  </div> -->\n</section>\n\n<section *ngIf=\"paymentStatus === 'ONGOING'\" class=\"main_section spinner\">\n  <div class=\"payment-ongoing\">\n    <mat-spinner style=\"width: 100%;\"></mat-spinner>\n    <p>{{loadingText}}</p>\n  </div>\n</section>\n", styles: ["*{font-family:var(--website-font-family)}.main_section{background-color:#fff;height:calc(90vh + -0px);overflow-y:scroll;display:flex;justify-content:center;align-items:center;flex-direction:column}.image_section img{width:100px}.success_heading{color:#000;margin-top:10px}.payment_sub_text{margin-top:10px;width:35%;text-align:center;line-height:32px}.plan_description{margin-top:10px!important;box-shadow:0 0 1px #28293d14,0 .5px 2px #60617029;background-color:#fff;border-radius:10px;width:30%;margin:0 auto;padding:40px}.title_value{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px}@media only screen and (max-width: 475px){.payment_sub_text{width:80%}.plan_description{width:80%;height:auto}}.spinner{display:flex;align-items:center;justify-content:center}.spinner p{margin-top:22px;font-size:18px;font-weight:500}.payment-ongoing mat-spinner{width:100%!important}.heading{font-size:18px;font-weight:700}\n"] }]
         }], ctorParameters: () => [{ type: RestService }, { type: i2$2.Router }, { type: StorageServiceService }, { type: i6$1.MessageService }, { type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], responseData: [{
@@ -24509,7 +24509,7 @@ class ProductCategoryListComponent extends BaseSection {
         return BUSINESS_CONSTANTS.CURRENCY;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductCategoryListComponent, deps: [{ token: RestService }, { token: CartService }, { token: EventsService }, { token: i2$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductCategoryListComponent, isStandalone: true, selector: "simpo-product-category-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "productListContainer", first: true, predicate: ["productListContainer"], descendants: true }, { propertyName: "productCategoryListSection", first: true, predicate: ["productCategoryList"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section class=\"d-flex total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\" [ngClass]=\"{'removeAllPadding justify-content-between': isMobile}\" [attr.style]=\"customClass\" #productCategoryList>\r\n    <ng-container *ngIf=\"categories.length; else EmptyPage\">\r\n        <div class=\"filter-panel\">\r\n            <ng-container *ngFor=\"let category of categories\">\r\n                <div class=\"category\" [style.backgroundColor]=\"(category.categoryId == selectedCategory?.categoryId) ? getSupportingColor(styles?.background?.accentColor ?? '#000000') : ''\" [style.borderColor]=\"(category.categoryId == selectedCategory?.categoryId) ? styles?.background?.accentColor : ''\"\r\n                    (click)=\"selectCategory(category)\">\r\n                    <div class=\"product-img\">\r\n                        <img [src]=\"category.imgUrl?.[0]\" alt=\"\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\">\r\n                    </div>\r\n                    <span class=\"trim-text\" [style.fontWeight]=\"(category.categoryId == selectedCategory?.categoryId) ? '700' : ''\">{{ category.categoryName }}</span>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"product-list-container\" [simpoBackground]=\"styles?.background\">\r\n            <h2 [simpoContentTitleSpace]=\"headingSpace\" *ngIf=\"!isMobile\">Buy {{ selectedCategory?.categoryName | titlecase }} Online</h2>\r\n\r\n            <section class=\"d-flex product-list\" *ngIf=\"!apiLoading\" #productListContainer>\r\n                <ng-container *ngFor=\"let product of productList\">\r\n                    <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"true\" [isCategoryProductList]=\"true\" [style.width.%]=\"isMobile ? '48' : ''\"></simpo-small-product-listing>\r\n                </ng-container>\r\n            </section>\r\n            <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\r\n        </div>\r\n    </ng-container>\r\n    <ng-template #EmptyPage>\r\n        <div class=\"empty-cart-container\">\r\n            <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"data?.content?.image?.url\" />\r\n            <div class=\"cart-text content-side\">\r\n              <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n                <div class=\"d-flex justify-content-center content-side\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{text.value}}</div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n    </ng-template>\r\n    \r\n    <ng-container *ngIf=\"styles?.devider?.display\">\r\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [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\r\n</section>\r\n", styles: [".total-container{position:relative;height:auto}.filter-panel{border-right:2px solid rgba(211,211,211,.297);width:18%}.removeAllPadding{padding:0!important}.category{display:flex;align-items:center;gap:10px;padding:10px;border-left:5px solid transparent;cursor:pointer}.empty-cart-container{height:100vh;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-cart-container img{height:150px;width:150px}.product-img{height:45px;width:45px;padding:0;border-radius:50%;background-color:#d3d3d3}.product-img img{height:100%;width:100%;border-radius:50%}.product-list-container{padding:0 20px;width:80%}.product-list{overflow:auto;flex-wrap:wrap;height:90vh;border-radius:0 10px 10px/0px 10px 10px;gap:8px}.product{position:relative;display:flex;flex-direction:column;cursor:pointer;border-radius:10px;overflow:hidden;min-width:195px;max-width:195px;margin:10px;background-color:#fff}.product .prod-img{position:relative;height:200px;width:100%;overflow:hidden}.product .prod-img img{height:100%;width:100%;object-fit:cover}.product img:hover{-webkit-animation:scale-up-center .2s linear both;animation:scale-up-center .2s linear both}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid #EF4C7B;border-radius:5px;color:#ef4c7b;padding:5px;text-align:center;display:flex;align-items:center}.add-to-cart .quantity-btn{background-color:#fb8dac7d;padding:5px 10px;font-weight:700}.add-to-cart .quantity{color:#ef4c7b}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@media screen and (max-width: 475px){.product-list-container{padding:5px!important}.category{flex-direction:column!important;padding:5px!important;border-left:none!important}.category .trim-text{text-align:center!important}.product{min-width:135px!important;max-width:135px!important;margin-left:0!important;margin-right:8px!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { 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: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable", "isCategoryProductList", "customClass", "index"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "component", type: CardSkeletonLoaderComponent, selector: "simpo-card-skeleton-loader", inputs: ["count", "showTitles"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductCategoryListComponent, isStandalone: true, selector: "simpo-product-category-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "productListContainer", first: true, predicate: ["productListContainer"], descendants: true }, { propertyName: "productCategoryListSection", first: true, predicate: ["productCategoryList"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section class=\"d-flex total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\n    [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\" [ngClass]=\"{'removeAllPadding justify-content-between': isMobile}\" [attr.style]=\"customClass\" #productCategoryList>\n    <ng-container *ngIf=\"categories.length; else EmptyPage\">\n        <div class=\"filter-panel\">\n            <ng-container *ngFor=\"let category of categories\">\n                <div class=\"category\" [style.backgroundColor]=\"(category.categoryId == selectedCategory?.categoryId) ? getSupportingColor(styles?.background?.accentColor ?? '#000000') : ''\" [style.borderColor]=\"(category.categoryId == selectedCategory?.categoryId) ? styles?.background?.accentColor : ''\"\n                    (click)=\"selectCategory(category)\">\n                    <div class=\"product-img\">\n                        <img [src]=\"category.imgUrl?.[0]\" alt=\"\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\">\n                    </div>\n                    <span class=\"trim-text\" [style.fontWeight]=\"(category.categoryId == selectedCategory?.categoryId) ? '700' : ''\">{{ category.categoryName }}</span>\n                </div>\n            </ng-container>\n        </div>\n        <div class=\"product-list-container\" [simpoBackground]=\"styles?.background\">\n            <h2 [simpoContentTitleSpace]=\"headingSpace\" *ngIf=\"!isMobile\">Buy {{ selectedCategory?.categoryName | titlecase }} Online</h2>\n\n            <section class=\"d-flex product-list\" *ngIf=\"!apiLoading\" #productListContainer>\n                <ng-container *ngFor=\"let product of productList\">\n                    <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"true\" [isCategoryProductList]=\"true\" [style.width.%]=\"isMobile ? '48' : ''\"></simpo-small-product-listing>\n                </ng-container>\n            </section>\n            <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\n        </div>\n    </ng-container>\n    <ng-template #EmptyPage>\n        <div class=\"empty-cart-container\">\n            <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"data?.content?.image?.url\" />\n            <div class=\"cart-text content-side\">\n              <ng-container *ngFor=\"let text of data?.content?.inputText\">\n                <div class=\"d-flex justify-content-center content-side\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{text.value}}</div>\n              </ng-container>\n            </div>\n          </div>\n    </ng-template>\n    \n    <ng-container *ngIf=\"styles?.devider?.display\">\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n    </ng-container>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n\n</section>\n", styles: [".total-container{position:relative;height:auto}.filter-panel{border-right:2px solid rgba(211,211,211,.297);width:18%}.removeAllPadding{padding:0!important}.category{display:flex;align-items:center;gap:10px;padding:10px;border-left:5px solid transparent;cursor:pointer}.empty-cart-container{height:100vh;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-cart-container img{height:150px;width:150px}.product-img{height:45px;width:45px;padding:0;border-radius:50%;background-color:#d3d3d3}.product-img img{height:100%;width:100%;border-radius:50%}.product-list-container{padding:0 20px;width:80%}.product-list{overflow:auto;flex-wrap:wrap;height:90vh;border-radius:0 10px 10px/0px 10px 10px;gap:8px}.product{position:relative;display:flex;flex-direction:column;cursor:pointer;border-radius:10px;overflow:hidden;min-width:195px;max-width:195px;margin:10px;background-color:#fff}.product .prod-img{position:relative;height:200px;width:100%;overflow:hidden}.product .prod-img img{height:100%;width:100%;object-fit:cover}.product img:hover{-webkit-animation:scale-up-center .2s linear both;animation:scale-up-center .2s linear both}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid #EF4C7B;border-radius:5px;color:#ef4c7b;padding:5px;text-align:center;display:flex;align-items:center}.add-to-cart .quantity-btn{background-color:#fb8dac7d;padding:5px 10px;font-weight:700}.add-to-cart .quantity{color:#ef4c7b}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@media screen and (max-width: 475px){.product-list-container{padding:5px!important}.category{flex-direction:column!important;padding:5px!important;border-left:none!important}.category .trim-text{text-align:center!important}.product{min-width:135px!important;max-width:135px!important;margin-left:0!important;margin-right:8px!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { 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: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable", "isCategoryProductList", "customClass", "index"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "component", type: CardSkeletonLoaderComponent, selector: "simpo-card-skeleton-loader", inputs: ["count", "showTitles"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductCategoryListComponent, decorators: [{
             type: Component,
@@ -24527,7 +24527,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SmallProductListingComponent,
                         ContentTitleDirective,
                         CardSkeletonLoaderComponent, SvgDividerComponent
-                    ], template: "<section class=\"d-flex total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\" [ngClass]=\"{'removeAllPadding justify-content-between': isMobile}\" [attr.style]=\"customClass\" #productCategoryList>\r\n    <ng-container *ngIf=\"categories.length; else EmptyPage\">\r\n        <div class=\"filter-panel\">\r\n            <ng-container *ngFor=\"let category of categories\">\r\n                <div class=\"category\" [style.backgroundColor]=\"(category.categoryId == selectedCategory?.categoryId) ? getSupportingColor(styles?.background?.accentColor ?? '#000000') : ''\" [style.borderColor]=\"(category.categoryId == selectedCategory?.categoryId) ? styles?.background?.accentColor : ''\"\r\n                    (click)=\"selectCategory(category)\">\r\n                    <div class=\"product-img\">\r\n                        <img [src]=\"category.imgUrl?.[0]\" alt=\"\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\">\r\n                    </div>\r\n                    <span class=\"trim-text\" [style.fontWeight]=\"(category.categoryId == selectedCategory?.categoryId) ? '700' : ''\">{{ category.categoryName }}</span>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"product-list-container\" [simpoBackground]=\"styles?.background\">\r\n            <h2 [simpoContentTitleSpace]=\"headingSpace\" *ngIf=\"!isMobile\">Buy {{ selectedCategory?.categoryName | titlecase }} Online</h2>\r\n\r\n            <section class=\"d-flex product-list\" *ngIf=\"!apiLoading\" #productListContainer>\r\n                <ng-container *ngFor=\"let product of productList\">\r\n                    <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"true\" [isCategoryProductList]=\"true\" [style.width.%]=\"isMobile ? '48' : ''\"></simpo-small-product-listing>\r\n                </ng-container>\r\n            </section>\r\n            <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\r\n        </div>\r\n    </ng-container>\r\n    <ng-template #EmptyPage>\r\n        <div class=\"empty-cart-container\">\r\n            <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"data?.content?.image?.url\" />\r\n            <div class=\"cart-text content-side\">\r\n              <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n                <div class=\"d-flex justify-content-center content-side\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{text.value}}</div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n    </ng-template>\r\n    \r\n    <ng-container *ngIf=\"styles?.devider?.display\">\r\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [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\r\n</section>\r\n", styles: [".total-container{position:relative;height:auto}.filter-panel{border-right:2px solid rgba(211,211,211,.297);width:18%}.removeAllPadding{padding:0!important}.category{display:flex;align-items:center;gap:10px;padding:10px;border-left:5px solid transparent;cursor:pointer}.empty-cart-container{height:100vh;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-cart-container img{height:150px;width:150px}.product-img{height:45px;width:45px;padding:0;border-radius:50%;background-color:#d3d3d3}.product-img img{height:100%;width:100%;border-radius:50%}.product-list-container{padding:0 20px;width:80%}.product-list{overflow:auto;flex-wrap:wrap;height:90vh;border-radius:0 10px 10px/0px 10px 10px;gap:8px}.product{position:relative;display:flex;flex-direction:column;cursor:pointer;border-radius:10px;overflow:hidden;min-width:195px;max-width:195px;margin:10px;background-color:#fff}.product .prod-img{position:relative;height:200px;width:100%;overflow:hidden}.product .prod-img img{height:100%;width:100%;object-fit:cover}.product img:hover{-webkit-animation:scale-up-center .2s linear both;animation:scale-up-center .2s linear both}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid #EF4C7B;border-radius:5px;color:#ef4c7b;padding:5px;text-align:center;display:flex;align-items:center}.add-to-cart .quantity-btn{background-color:#fb8dac7d;padding:5px 10px;font-weight:700}.add-to-cart .quantity{color:#ef4c7b}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@media screen and (max-width: 475px){.product-list-container{padding:5px!important}.category{flex-direction:column!important;padding:5px!important;border-left:none!important}.category .trim-text{text-align:center!important}.product{min-width:135px!important;max-width:135px!important;margin-left:0!important;margin-right:8px!important}}\n"] }]
+                    ], template: "<section class=\"d-flex total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\n    [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\" [ngClass]=\"{'removeAllPadding justify-content-between': isMobile}\" [attr.style]=\"customClass\" #productCategoryList>\n    <ng-container *ngIf=\"categories.length; else EmptyPage\">\n        <div class=\"filter-panel\">\n            <ng-container *ngFor=\"let category of categories\">\n                <div class=\"category\" [style.backgroundColor]=\"(category.categoryId == selectedCategory?.categoryId) ? getSupportingColor(styles?.background?.accentColor ?? '#000000') : ''\" [style.borderColor]=\"(category.categoryId == selectedCategory?.categoryId) ? styles?.background?.accentColor : ''\"\n                    (click)=\"selectCategory(category)\">\n                    <div class=\"product-img\">\n                        <img [src]=\"category.imgUrl?.[0]\" alt=\"\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\">\n                    </div>\n                    <span class=\"trim-text\" [style.fontWeight]=\"(category.categoryId == selectedCategory?.categoryId) ? '700' : ''\">{{ category.categoryName }}</span>\n                </div>\n            </ng-container>\n        </div>\n        <div class=\"product-list-container\" [simpoBackground]=\"styles?.background\">\n            <h2 [simpoContentTitleSpace]=\"headingSpace\" *ngIf=\"!isMobile\">Buy {{ selectedCategory?.categoryName | titlecase }} Online</h2>\n\n            <section class=\"d-flex product-list\" *ngIf=\"!apiLoading\" #productListContainer>\n                <ng-container *ngFor=\"let product of productList\">\n                    <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"true\" [isCategoryProductList]=\"true\" [style.width.%]=\"isMobile ? '48' : ''\"></simpo-small-product-listing>\n                </ng-container>\n            </section>\n            <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\n        </div>\n    </ng-container>\n    <ng-template #EmptyPage>\n        <div class=\"empty-cart-container\">\n            <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"data?.content?.image?.url\" />\n            <div class=\"cart-text content-side\">\n              <ng-container *ngFor=\"let text of data?.content?.inputText\">\n                <div class=\"d-flex justify-content-center content-side\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{text.value}}</div>\n              </ng-container>\n            </div>\n          </div>\n    </ng-template>\n    \n    <ng-container *ngIf=\"styles?.devider?.display\">\n      <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n    </ng-container>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n\n</section>\n", styles: [".total-container{position:relative;height:auto}.filter-panel{border-right:2px solid rgba(211,211,211,.297);width:18%}.removeAllPadding{padding:0!important}.category{display:flex;align-items:center;gap:10px;padding:10px;border-left:5px solid transparent;cursor:pointer}.empty-cart-container{height:100vh;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-cart-container img{height:150px;width:150px}.product-img{height:45px;width:45px;padding:0;border-radius:50%;background-color:#d3d3d3}.product-img img{height:100%;width:100%;border-radius:50%}.product-list-container{padding:0 20px;width:80%}.product-list{overflow:auto;flex-wrap:wrap;height:90vh;border-radius:0 10px 10px/0px 10px 10px;gap:8px}.product{position:relative;display:flex;flex-direction:column;cursor:pointer;border-radius:10px;overflow:hidden;min-width:195px;max-width:195px;margin:10px;background-color:#fff}.product .prod-img{position:relative;height:200px;width:100%;overflow:hidden}.product .prod-img img{height:100%;width:100%;object-fit:cover}.product img:hover{-webkit-animation:scale-up-center .2s linear both;animation:scale-up-center .2s linear both}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid #EF4C7B;border-radius:5px;color:#ef4c7b;padding:5px;text-align:center;display:flex;align-items:center}.add-to-cart .quantity-btn{background-color:#fb8dac7d;padding:5px 10px;font-weight:700}.add-to-cart .quantity{color:#ef4c7b}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@media screen and (max-width: 475px){.product-list-container{padding:5px!important}.category{flex-direction:column!important;padding:5px!important;border-left:none!important}.category .trim-text{text-align:center!important}.product{min-width:135px!important;max-width:135px!important;margin-left:0!important;margin-right:8px!important}}\n"] }]
         }], ctorParameters: () => [{ type: RestService }, { type: CartService }, { type: EventsService }, { type: i2$2.ActivatedRoute }], propDecorators: { responseData: [{
                 type: Input
             }], data: [{
@@ -25106,7 +25106,7 @@ class StoreListComponent extends BaseSection {
         return `rgba(${r}, ${g}, ${b}, ${opacity / 100})`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StoreListComponent, deps: [{ token: RestService }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StoreListComponent, isStandalone: true, selector: "simpo-store-list", inputs: { data: "data", edit: "edit", customClass: "customClass", delete: "delete", index: "index" }, usesInheritance: true, ngImport: i0, template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n    <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n        <div class=\"top-section w-100 d-flex align-items-center justify-content-center text-center flex-column\"\r\n            [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"stylesLayout\">\r\n            <ng-container *ngIf=\"!loader\">\r\n                <div class=\"store-header mb-3\">\r\n                    {{ submit && showMessage == true && pincode && pincode?.toString()?.length == 6 ? \"Stores in \" +\r\n                    pincode :\r\n                    \"Find a Store Near You\"}}\r\n                </div>\r\n                <div class=\"sub-text\">\r\n                    {{ submit && showMessage == true && pincode && pincode?.toString()?.length == 6 ? 'We have ' +\r\n                    totalCount\r\n                    + ' stores in this locality, scroll down to view the stores\r\n                    and browse the designs available.' : 'Locate a store near you \u2014 our presence is expanding every day,\r\n                    and\r\n                    we look forward to serving you.' }}\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"loader\">\r\n                <div class=\"sub-text\">\r\n                    <ngx-skeleton-loader [theme]=\"{\r\n                width: '35%',\r\n                height: '3vh',\r\n               'border-radius': '12px',\r\n                 }\"></ngx-skeleton-loader>\r\n                </div>\r\n                <div class=\"sub-text w-75\">\r\n                    <ngx-skeleton-loader [theme]=\"{\r\n                width: '35%',\r\n                height: '2vh',\r\n               'border-radius': '12px',\r\n                 }\"></ngx-skeleton-loader>\r\n                </div>\r\n            </ng-container>\r\n            <div class=\"location-container d-flex align-items-center justify-content-between w-25\"\r\n                [class.error-border]=\"error\">\r\n                <div class=\"d-flex align-items-center w-90\">\r\n                    <div class=\"d-flex mx-1\"><mat-icon class=\"d-flex align-items-center justify-content-center f-20\"\r\n                            [style.color]=\"data?.styles?.background?.accentColor\">gps_fixed</mat-icon>\r\n                    </div>\r\n                    <input type=\"number\" placeholder=\"Pin Code\" [(ngModel)]=\"pincode\" class=\"w-90\"\r\n                        [style.backgroundColor]=\"'#ffffff'\"\r\n                        (ngModelChange)=\"pincode.toString().length != 6 ? submit = false : error = false;\" />\r\n                </div>\r\n                <div (click)=\"getDataWithPincode()\" class=\"f-13 cursor-pointer\">Submit</div>\r\n            </div>\r\n            <span class=\"f-12 w-25 text-start mt-2\" *ngIf=\"error\" [style.color]=\"'#dc3545'\">Invalid Pincode\r\n                (Ex:500088)</span>\r\n        </div>\r\n        <div class=\"bottom-container row  mt-3 w-100\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n            [id]=\"data?.id\">\r\n            <div class=\"state-container row gap-3 justify-content-center mb-5\" *ngIf=\"showState && !pincode\">\r\n                <ng-container *ngFor=\"let state of stateList; let i = index\">\r\n                    <div class=\"state-card p-2 col-sm-6\" (click)=\"setStateData(state)\">\r\n                        <ng-container *ngIf=\"state?.stateImage; else noImage\">\r\n                            <img class=\"w-100 h-75\" [src]=\"state?.stateImage\">\r\n                        </ng-container>\r\n                        <ng-template #noImage>\r\n                            <img class=\"w-100 h-75\"\r\n                                src=\"https://cdn.caratlane.com/media/static/images/Find_In_Store/city_5.svg\">\r\n                        </ng-template>\r\n                        <div class=\"text-center mt-2 state-name\">{{state?.stateName}}</div>\r\n                        <div class=\"store-count text-center mb-3 mt-1\">{{state?.storeCount + \" stores\"}}</div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n            <div class=\"w-100 d-flex align-items-center justify-content-center mb-3\"\r\n                *ngIf=\"submit && showMessage == false && pincode && pincode.toString().length ==6 && !loader\">\r\n                <div class=\"text-center not-available-text\">We are not available in this location currently</div>\r\n            </div>\r\n            <ng-container *ngIf=\"loader\">\r\n                <div class=\"sub-text w-100 text-center\">\r\n                    <ngx-skeleton-loader [theme]=\"{\r\n                width: '35%',\r\n                height: '6vh',\r\n               'border-radius': '12px',\r\n                 }\"></ngx-skeleton-loader>\r\n                </div>\r\n            </ng-container>\r\n            <div class=\"bottom-sub-text d-flex align-items-center justify-content-center mb-3 w-100 f-20 fw-bold\"> {{\r\n                submit &&\r\n                showMessage == true && pincode ? \"Showing \" + totalCount + \" Stores in \" + pincode :\r\n                \"Showing All Stores\"}}</div>\r\n            <ng-container *ngIf=\"!loader;else loaderScreen\">\r\n                <div class=\"row d-flex\">\r\n                    <div class=\"col-4 p-2 store d-flex flex-column\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n                        *ngFor=\"let ele of storesList; let i = index\">\r\n                        <div class=\"card-body position-relative d-flex flex-column  h-100\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\">\r\n                            <!-- Content -->\r\n                            <div class=\"h-100  p-3 pb-0\">\r\n                                <div class=\"d-flex justify-content-between align-items-start mb-2\">\r\n                                    <div class=\"d-flex flex-column mb-2 bb-1 w-100 pb-2\">\r\n                                        <h6 class=\"card-title fw-bold mb-1 w-100\">{{ele?.storeName}}</h6>\r\n                                        <div class=\"f-11\">\r\n                                            \u2B504.{{ele?.star}} &nbsp;&#x2022;&nbsp;{{ele?.reviewCount}}&nbsp;Google\r\n                                            Reviews\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"mb-2 f-11\">\r\n                                    <p class=\"mb-1 text-dark fw-medium\">{{ele?.addressDetails?.addressLine}},</p>\r\n                                    <p class=\"mb-1 text-dark fw-medium\">\r\n                                        {{ele?.addressDetails?.city}},\r\n                                        {{ele?.addressDetails?.state}},{{ele?.addressDetails?.pincode}},\r\n                                    </p>\r\n                                    <p class=\"mb-0 fw-bold\">Phone-\r\n                                        <span\r\n                                            [style.color]=\"data?.styles?.background?.accentColor\">{{ele?.storeContactDetails?.mobile}}</span>\r\n                                    </p>\r\n                                </div>\r\n                                <div class=\"mb-2 f-11\">\r\n                                    <p class=\"mb-0  fw-bold\" [style.color]=\"data?.styles?.background?.accentColor\">\r\n                                        STORE HOURS -\r\n                                        {{getTime(ele?.storeHours,'OPEN')}} to {{getTime(ele?.storeHours,'CLOSE')}}\r\n                                    </p>\r\n                                </div>\r\n                            </div>\r\n                            <!-- Fixed bottom buttons -->\r\n                            <div class=\"d-flex gap-3 align-items-center justify-content-between  p-3 w-100 br-20\"\r\n                                [style.backgroundColor]=\"getRGBA(styles?.background?.accentColor,10)\"\r\n                                [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\">\r\n                                <div class=\"br-12 d-flex align-items-center justify-content-center\"\r\n                                    style=\"width: 30px; height: 30px;\"\r\n                                    (click)=\"openWhatsapp(ele?.storeContactDetails?.mobile)\"\r\n                                    [style.backgroundColor]=\"data?.styles?.background?.accentColor\">\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"\r\n                                        style=\"height: 20px;cursor: pointer;\">\r\n                                        <path [attr.fill]=\"getTextColor(data?.styles?.background?.accentColor)\"\r\n                                            d=\"M380.9 97.1c-41.9-42-97.7-65.1-157-65.1-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480 117.7 449.1c32.4 17.7 68.9 27 106.1 27l.1 0c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3 18.6-68.1-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1s56.2 81.2 56.1 130.5c0 101.8-84.9 184.6-186.6 184.6zM325.1 300.5c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8s-14.3 18-17.6 21.8c-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7 .9-6.9-.5-9.7s-12.5-30.1-17.1-41.2c-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2s-9.7 1.4-14.8 6.9c-5.1 5.6-19.4 19-19.4 46.3s19.9 53.7 22.6 57.4c2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4s4.6-24.1 3.2-26.4c-1.3-2.5-5-3.9-10.5-6.6z\" />\r\n                                    </svg>\r\n                                </div>\r\n                                <button class=\"btn w-50\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n                                    simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n                                    [color]=\"data?.styles?.background?.accentColor\"\r\n                                    [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n                                    [buttonId]=\"button?.id ?? ''\" (click)=\"viewStore(ele.id)\">\r\n                                    {{button?.content?.label}}\r\n                                </button>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n            </ng-container>\r\n            <ng-template #loaderScreen>\r\n                <div class=\"row loader-container\">\r\n                    <ng-container *ngFor=\"let ele of [1,2,3,4,5,6]\">\r\n                        <ngx-skeleton-loader class=\"col-4 loader-column\" [theme]=\"{\r\n                width: '100%',\r\n                height: '40vh',\r\n               'border-radius': '12px',\r\n                 }\"></ngx-skeleton-loader>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-template>\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\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%}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.store-header{font-size:27px;font-weight:700}.sub-text{font-size:16px;width:35%;margin-bottom:15px}.location-container{border:1px solid;padding:8px;border-radius:12px;background:#fff}.location-container input{border:unset;appearance:unset;outline:unset;background:#fff;font-size:13px}.f-11{font-size:11px}.f-14{font-size:14px}.not-available-text{color:#ff5151;font-weight:600;border-radius:22px;text-align:center;padding:12px;background:#ff51511a;width:35%}.f-20{font-size:20px}.f-13{font-size:13px}.w-90{width:90%}.card-body{box-shadow:#0000000d 0 0 0 1px;height:100%}.card-bottom{POSITION:ABSOLUTE;width:90%;bottom:15px}.br-12{border-radius:12px}.btn{font-size:12px!important}.error-border{border:2px solid #dc3545!important}.f-12{font-size:12px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}@media (max-width:475px){.sub-text{width:100%!important}.loader-container{flex-direction:column;padding-right:0!important}.loader-column,.not-available-text{width:100%!important}.location-container{width:55%!important}.bottom-container{flex-direction:column;margin:0!important;width:100%!important}.store{width:100%!important}.state-container{margin:unset!important}.state-container .state-card{width:45%}}.main-container{padding-bottom:9%}.state-card{width:13%;box-shadow:#0000000d 0 0 0 1px;border-radius:20px;cursor:pointer}.state-card img{border-bottom:1px solid rgba(0,0,0,.05)}.state-card .state-name{font-size:14px;font-weight:600}.state-card .store-count{font-size:13px}.bb-1{border-bottom:2px solid rgba(0,0,0,.05)}.br-20{border-top-left-radius:unset!important;border-top-right-radius:unset!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { 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: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId", "itemIndex"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StoreListComponent, isStandalone: true, selector: "simpo-store-list", inputs: { data: "data", edit: "edit", customClass: "customClass", delete: "delete", index: "index" }, usesInheritance: true, ngImport: i0, template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\n    <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\n        <div class=\"top-section w-100 d-flex align-items-center justify-content-center text-center flex-column\"\n            [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"stylesLayout\">\n            <ng-container *ngIf=\"!loader\">\n                <div class=\"store-header mb-3\">\n                    {{ submit && showMessage == true && pincode && pincode?.toString()?.length == 6 ? \"Stores in \" +\n                    pincode :\n                    \"Find a Store Near You\"}}\n                </div>\n                <div class=\"sub-text\">\n                    {{ submit && showMessage == true && pincode && pincode?.toString()?.length == 6 ? 'We have ' +\n                    totalCount\n                    + ' stores in this locality, scroll down to view the stores\n                    and browse the designs available.' : 'Locate a store near you \u2014 our presence is expanding every day,\n                    and\n                    we look forward to serving you.' }}\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"loader\">\n                <div class=\"sub-text\">\n                    <ngx-skeleton-loader [theme]=\"{\n                width: '35%',\n                height: '3vh',\n               'border-radius': '12px',\n                 }\"></ngx-skeleton-loader>\n                </div>\n                <div class=\"sub-text w-75\">\n                    <ngx-skeleton-loader [theme]=\"{\n                width: '35%',\n                height: '2vh',\n               'border-radius': '12px',\n                 }\"></ngx-skeleton-loader>\n                </div>\n            </ng-container>\n            <div class=\"location-container d-flex align-items-center justify-content-between w-25\"\n                [class.error-border]=\"error\">\n                <div class=\"d-flex align-items-center w-90\">\n                    <div class=\"d-flex mx-1\"><mat-icon class=\"d-flex align-items-center justify-content-center f-20\"\n                            [style.color]=\"data?.styles?.background?.accentColor\">gps_fixed</mat-icon>\n                    </div>\n                    <input type=\"number\" placeholder=\"Pin Code\" [(ngModel)]=\"pincode\" class=\"w-90\"\n                        [style.backgroundColor]=\"'#ffffff'\"\n                        (ngModelChange)=\"pincode.toString().length != 6 ? submit = false : error = false;\" />\n                </div>\n                <div (click)=\"getDataWithPincode()\" class=\"f-13 cursor-pointer\">Submit</div>\n            </div>\n            <span class=\"f-12 w-25 text-start mt-2\" *ngIf=\"error\" [style.color]=\"'#dc3545'\">Invalid Pincode\n                (Ex:500088)</span>\n        </div>\n        <div class=\"bottom-container row  mt-3 w-100\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\n            [id]=\"data?.id\">\n            <div class=\"state-container row gap-3 justify-content-center mb-5\" *ngIf=\"showState && !pincode\">\n                <ng-container *ngFor=\"let state of stateList; let i = index\">\n                    <div class=\"state-card p-2 col-sm-6\" (click)=\"setStateData(state)\">\n                        <ng-container *ngIf=\"state?.stateImage; else noImage\">\n                            <img class=\"w-100 h-75\" [src]=\"state?.stateImage\">\n                        </ng-container>\n                        <ng-template #noImage>\n                            <img class=\"w-100 h-75\"\n                                src=\"https://cdn.caratlane.com/media/static/images/Find_In_Store/city_5.svg\">\n                        </ng-template>\n                        <div class=\"text-center mt-2 state-name\">{{state?.stateName}}</div>\n                        <div class=\"store-count text-center mb-3 mt-1\">{{state?.storeCount + \" stores\"}}</div>\n                    </div>\n                </ng-container>\n            </div>\n            <div class=\"w-100 d-flex align-items-center justify-content-center mb-3\"\n                *ngIf=\"submit && showMessage == false && pincode && pincode.toString().length ==6 && !loader\">\n                <div class=\"text-center not-available-text\">We are not available in this location currently</div>\n            </div>\n            <ng-container *ngIf=\"loader\">\n                <div class=\"sub-text w-100 text-center\">\n                    <ngx-skeleton-loader [theme]=\"{\n                width: '35%',\n                height: '6vh',\n               'border-radius': '12px',\n                 }\"></ngx-skeleton-loader>\n                </div>\n            </ng-container>\n            <div class=\"bottom-sub-text d-flex align-items-center justify-content-center mb-3 w-100 f-20 fw-bold\"> {{\n                submit &&\n                showMessage == true && pincode ? \"Showing \" + totalCount + \" Stores in \" + pincode :\n                \"Showing All Stores\"}}</div>\n            <ng-container *ngIf=\"!loader;else loaderScreen\">\n                <div class=\"row d-flex\">\n                    <div class=\"col-4 p-2 store d-flex flex-column\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n                        *ngFor=\"let ele of storesList; let i = index\">\n                        <div class=\"card-body position-relative d-flex flex-column  h-100\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\">\n                            <!-- Content -->\n                            <div class=\"h-100  p-3 pb-0\">\n                                <div class=\"d-flex justify-content-between align-items-start mb-2\">\n                                    <div class=\"d-flex flex-column mb-2 bb-1 w-100 pb-2\">\n                                        <h6 class=\"card-title fw-bold mb-1 w-100\">{{ele?.storeName}}</h6>\n                                        <div class=\"f-11\">\n                                            \u2B504.{{ele?.star}} &nbsp;&#x2022;&nbsp;{{ele?.reviewCount}}&nbsp;Google\n                                            Reviews\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"mb-2 f-11\">\n                                    <p class=\"mb-1 text-dark fw-medium\">{{ele?.addressDetails?.addressLine}},</p>\n                                    <p class=\"mb-1 text-dark fw-medium\">\n                                        {{ele?.addressDetails?.city}},\n                                        {{ele?.addressDetails?.state}},{{ele?.addressDetails?.pincode}},\n                                    </p>\n                                    <p class=\"mb-0 fw-bold\">Phone-\n                                        <span\n                                            [style.color]=\"data?.styles?.background?.accentColor\">{{ele?.storeContactDetails?.mobile}}</span>\n                                    </p>\n                                </div>\n                                <div class=\"mb-2 f-11\">\n                                    <p class=\"mb-0  fw-bold\" [style.color]=\"data?.styles?.background?.accentColor\">\n                                        STORE HOURS -\n                                        {{getTime(ele?.storeHours,'OPEN')}} to {{getTime(ele?.storeHours,'CLOSE')}}\n                                    </p>\n                                </div>\n                            </div>\n                            <!-- Fixed bottom buttons -->\n                            <div class=\"d-flex gap-3 align-items-center justify-content-between  p-3 w-100 br-20\"\n                                [style.backgroundColor]=\"getRGBA(styles?.background?.accentColor,10)\"\n                                [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\">\n                                <div class=\"br-12 d-flex align-items-center justify-content-center\"\n                                    style=\"width: 30px; height: 30px;\"\n                                    (click)=\"openWhatsapp(ele?.storeContactDetails?.mobile)\"\n                                    [style.backgroundColor]=\"data?.styles?.background?.accentColor\">\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"\n                                        style=\"height: 20px;cursor: pointer;\">\n                                        <path [attr.fill]=\"getTextColor(data?.styles?.background?.accentColor)\"\n                                            d=\"M380.9 97.1c-41.9-42-97.7-65.1-157-65.1-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480 117.7 449.1c32.4 17.7 68.9 27 106.1 27l.1 0c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3 18.6-68.1-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1s56.2 81.2 56.1 130.5c0 101.8-84.9 184.6-186.6 184.6zM325.1 300.5c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8s-14.3 18-17.6 21.8c-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7 .9-6.9-.5-9.7s-12.5-30.1-17.1-41.2c-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2s-9.7 1.4-14.8 6.9c-5.1 5.6-19.4 19-19.4 46.3s19.9 53.7 22.6 57.4c2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4s4.6-24.1 3.2-26.4c-1.3-2.5-5-3.9-10.5-6.6z\" />\n                                    </svg>\n                                </div>\n                                <button class=\"btn w-50\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\n                                    simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\n                                    [color]=\"data?.styles?.background?.accentColor\"\n                                    [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\n                                    [buttonId]=\"button?.id ?? ''\" (click)=\"viewStore(ele.id)\">\n                                    {{button?.content?.label}}\n                                </button>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n            </ng-container>\n            <ng-template #loaderScreen>\n                <div class=\"row loader-container\">\n                    <ng-container *ngFor=\"let ele of [1,2,3,4,5,6]\">\n                        <ngx-skeleton-loader class=\"col-4 loader-column\" [theme]=\"{\n                width: '100%',\n                height: '40vh',\n               'border-radius': '12px',\n                 }\"></ngx-skeleton-loader>\n                    </ng-container>\n                </div>\n            </ng-template>\n        </div>\n    </div>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.store-header{font-size:27px;font-weight:700}.sub-text{font-size:16px;width:35%;margin-bottom:15px}.location-container{border:1px solid;padding:8px;border-radius:12px;background:#fff}.location-container input{border:unset;appearance:unset;outline:unset;background:#fff;font-size:13px}.f-11{font-size:11px}.f-14{font-size:14px}.not-available-text{color:#ff5151;font-weight:600;border-radius:22px;text-align:center;padding:12px;background:#ff51511a;width:35%}.f-20{font-size:20px}.f-13{font-size:13px}.w-90{width:90%}.card-body{box-shadow:#0000000d 0 0 0 1px;height:100%}.card-bottom{POSITION:ABSOLUTE;width:90%;bottom:15px}.br-12{border-radius:12px}.btn{font-size:12px!important}.error-border{border:2px solid #dc3545!important}.f-12{font-size:12px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}@media (max-width:475px){.sub-text{width:100%!important}.loader-container{flex-direction:column;padding-right:0!important}.loader-column,.not-available-text{width:100%!important}.location-container{width:55%!important}.bottom-container{flex-direction:column;margin:0!important;width:100%!important}.store{width:100%!important}.state-container{margin:unset!important}.state-container .state-card{width:45%}}.main-container{padding-bottom:9%}.state-card{width:13%;box-shadow:#0000000d 0 0 0 1px;border-radius:20px;cursor:pointer}.state-card img{border-bottom:1px solid rgba(0,0,0,.05)}.state-card .state-name{font-size:14px;font-weight:600}.state-card .store-count{font-size:13px}.bb-1{border-bottom:2px solid rgba(0,0,0,.05)}.br-20{border-top-left-radius:unset!important;border-top-right-radius:unset!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { 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: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId", "itemIndex"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StoreListComponent, decorators: [{
             type: Component,
@@ -25125,7 +25125,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ColorDirective,
                         SpacingHorizontalDirective,
                         CornerDirective,
-                    ], template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n    <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n        <div class=\"top-section w-100 d-flex align-items-center justify-content-center text-center flex-column\"\r\n            [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"stylesLayout\">\r\n            <ng-container *ngIf=\"!loader\">\r\n                <div class=\"store-header mb-3\">\r\n                    {{ submit && showMessage == true && pincode && pincode?.toString()?.length == 6 ? \"Stores in \" +\r\n                    pincode :\r\n                    \"Find a Store Near You\"}}\r\n                </div>\r\n                <div class=\"sub-text\">\r\n                    {{ submit && showMessage == true && pincode && pincode?.toString()?.length == 6 ? 'We have ' +\r\n                    totalCount\r\n                    + ' stores in this locality, scroll down to view the stores\r\n                    and browse the designs available.' : 'Locate a store near you \u2014 our presence is expanding every day,\r\n                    and\r\n                    we look forward to serving you.' }}\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"loader\">\r\n                <div class=\"sub-text\">\r\n                    <ngx-skeleton-loader [theme]=\"{\r\n                width: '35%',\r\n                height: '3vh',\r\n               'border-radius': '12px',\r\n                 }\"></ngx-skeleton-loader>\r\n                </div>\r\n                <div class=\"sub-text w-75\">\r\n                    <ngx-skeleton-loader [theme]=\"{\r\n                width: '35%',\r\n                height: '2vh',\r\n               'border-radius': '12px',\r\n                 }\"></ngx-skeleton-loader>\r\n                </div>\r\n            </ng-container>\r\n            <div class=\"location-container d-flex align-items-center justify-content-between w-25\"\r\n                [class.error-border]=\"error\">\r\n                <div class=\"d-flex align-items-center w-90\">\r\n                    <div class=\"d-flex mx-1\"><mat-icon class=\"d-flex align-items-center justify-content-center f-20\"\r\n                            [style.color]=\"data?.styles?.background?.accentColor\">gps_fixed</mat-icon>\r\n                    </div>\r\n                    <input type=\"number\" placeholder=\"Pin Code\" [(ngModel)]=\"pincode\" class=\"w-90\"\r\n                        [style.backgroundColor]=\"'#ffffff'\"\r\n                        (ngModelChange)=\"pincode.toString().length != 6 ? submit = false : error = false;\" />\r\n                </div>\r\n                <div (click)=\"getDataWithPincode()\" class=\"f-13 cursor-pointer\">Submit</div>\r\n            </div>\r\n            <span class=\"f-12 w-25 text-start mt-2\" *ngIf=\"error\" [style.color]=\"'#dc3545'\">Invalid Pincode\r\n                (Ex:500088)</span>\r\n        </div>\r\n        <div class=\"bottom-container row  mt-3 w-100\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n            [id]=\"data?.id\">\r\n            <div class=\"state-container row gap-3 justify-content-center mb-5\" *ngIf=\"showState && !pincode\">\r\n                <ng-container *ngFor=\"let state of stateList; let i = index\">\r\n                    <div class=\"state-card p-2 col-sm-6\" (click)=\"setStateData(state)\">\r\n                        <ng-container *ngIf=\"state?.stateImage; else noImage\">\r\n                            <img class=\"w-100 h-75\" [src]=\"state?.stateImage\">\r\n                        </ng-container>\r\n                        <ng-template #noImage>\r\n                            <img class=\"w-100 h-75\"\r\n                                src=\"https://cdn.caratlane.com/media/static/images/Find_In_Store/city_5.svg\">\r\n                        </ng-template>\r\n                        <div class=\"text-center mt-2 state-name\">{{state?.stateName}}</div>\r\n                        <div class=\"store-count text-center mb-3 mt-1\">{{state?.storeCount + \" stores\"}}</div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n            <div class=\"w-100 d-flex align-items-center justify-content-center mb-3\"\r\n                *ngIf=\"submit && showMessage == false && pincode && pincode.toString().length ==6 && !loader\">\r\n                <div class=\"text-center not-available-text\">We are not available in this location currently</div>\r\n            </div>\r\n            <ng-container *ngIf=\"loader\">\r\n                <div class=\"sub-text w-100 text-center\">\r\n                    <ngx-skeleton-loader [theme]=\"{\r\n                width: '35%',\r\n                height: '6vh',\r\n               'border-radius': '12px',\r\n                 }\"></ngx-skeleton-loader>\r\n                </div>\r\n            </ng-container>\r\n            <div class=\"bottom-sub-text d-flex align-items-center justify-content-center mb-3 w-100 f-20 fw-bold\"> {{\r\n                submit &&\r\n                showMessage == true && pincode ? \"Showing \" + totalCount + \" Stores in \" + pincode :\r\n                \"Showing All Stores\"}}</div>\r\n            <ng-container *ngIf=\"!loader;else loaderScreen\">\r\n                <div class=\"row d-flex\">\r\n                    <div class=\"col-4 p-2 store d-flex flex-column\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n                        *ngFor=\"let ele of storesList; let i = index\">\r\n                        <div class=\"card-body position-relative d-flex flex-column  h-100\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\">\r\n                            <!-- Content -->\r\n                            <div class=\"h-100  p-3 pb-0\">\r\n                                <div class=\"d-flex justify-content-between align-items-start mb-2\">\r\n                                    <div class=\"d-flex flex-column mb-2 bb-1 w-100 pb-2\">\r\n                                        <h6 class=\"card-title fw-bold mb-1 w-100\">{{ele?.storeName}}</h6>\r\n                                        <div class=\"f-11\">\r\n                                            \u2B504.{{ele?.star}} &nbsp;&#x2022;&nbsp;{{ele?.reviewCount}}&nbsp;Google\r\n                                            Reviews\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"mb-2 f-11\">\r\n                                    <p class=\"mb-1 text-dark fw-medium\">{{ele?.addressDetails?.addressLine}},</p>\r\n                                    <p class=\"mb-1 text-dark fw-medium\">\r\n                                        {{ele?.addressDetails?.city}},\r\n                                        {{ele?.addressDetails?.state}},{{ele?.addressDetails?.pincode}},\r\n                                    </p>\r\n                                    <p class=\"mb-0 fw-bold\">Phone-\r\n                                        <span\r\n                                            [style.color]=\"data?.styles?.background?.accentColor\">{{ele?.storeContactDetails?.mobile}}</span>\r\n                                    </p>\r\n                                </div>\r\n                                <div class=\"mb-2 f-11\">\r\n                                    <p class=\"mb-0  fw-bold\" [style.color]=\"data?.styles?.background?.accentColor\">\r\n                                        STORE HOURS -\r\n                                        {{getTime(ele?.storeHours,'OPEN')}} to {{getTime(ele?.storeHours,'CLOSE')}}\r\n                                    </p>\r\n                                </div>\r\n                            </div>\r\n                            <!-- Fixed bottom buttons -->\r\n                            <div class=\"d-flex gap-3 align-items-center justify-content-between  p-3 w-100 br-20\"\r\n                                [style.backgroundColor]=\"getRGBA(styles?.background?.accentColor,10)\"\r\n                                [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\">\r\n                                <div class=\"br-12 d-flex align-items-center justify-content-center\"\r\n                                    style=\"width: 30px; height: 30px;\"\r\n                                    (click)=\"openWhatsapp(ele?.storeContactDetails?.mobile)\"\r\n                                    [style.backgroundColor]=\"data?.styles?.background?.accentColor\">\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"\r\n                                        style=\"height: 20px;cursor: pointer;\">\r\n                                        <path [attr.fill]=\"getTextColor(data?.styles?.background?.accentColor)\"\r\n                                            d=\"M380.9 97.1c-41.9-42-97.7-65.1-157-65.1-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480 117.7 449.1c32.4 17.7 68.9 27 106.1 27l.1 0c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3 18.6-68.1-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1s56.2 81.2 56.1 130.5c0 101.8-84.9 184.6-186.6 184.6zM325.1 300.5c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8s-14.3 18-17.6 21.8c-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7 .9-6.9-.5-9.7s-12.5-30.1-17.1-41.2c-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2s-9.7 1.4-14.8 6.9c-5.1 5.6-19.4 19-19.4 46.3s19.9 53.7 22.6 57.4c2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4s4.6-24.1 3.2-26.4c-1.3-2.5-5-3.9-10.5-6.6z\" />\r\n                                    </svg>\r\n                                </div>\r\n                                <button class=\"btn w-50\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n                                    simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n                                    [color]=\"data?.styles?.background?.accentColor\"\r\n                                    [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n                                    [buttonId]=\"button?.id ?? ''\" (click)=\"viewStore(ele.id)\">\r\n                                    {{button?.content?.label}}\r\n                                </button>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n            </ng-container>\r\n            <ng-template #loaderScreen>\r\n                <div class=\"row loader-container\">\r\n                    <ng-container *ngFor=\"let ele of [1,2,3,4,5,6]\">\r\n                        <ngx-skeleton-loader class=\"col-4 loader-column\" [theme]=\"{\r\n                width: '100%',\r\n                height: '40vh',\r\n               'border-radius': '12px',\r\n                 }\"></ngx-skeleton-loader>\r\n                    </ng-container>\r\n                </div>\r\n            </ng-template>\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\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%}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.store-header{font-size:27px;font-weight:700}.sub-text{font-size:16px;width:35%;margin-bottom:15px}.location-container{border:1px solid;padding:8px;border-radius:12px;background:#fff}.location-container input{border:unset;appearance:unset;outline:unset;background:#fff;font-size:13px}.f-11{font-size:11px}.f-14{font-size:14px}.not-available-text{color:#ff5151;font-weight:600;border-radius:22px;text-align:center;padding:12px;background:#ff51511a;width:35%}.f-20{font-size:20px}.f-13{font-size:13px}.w-90{width:90%}.card-body{box-shadow:#0000000d 0 0 0 1px;height:100%}.card-bottom{POSITION:ABSOLUTE;width:90%;bottom:15px}.br-12{border-radius:12px}.btn{font-size:12px!important}.error-border{border:2px solid #dc3545!important}.f-12{font-size:12px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}@media (max-width:475px){.sub-text{width:100%!important}.loader-container{flex-direction:column;padding-right:0!important}.loader-column,.not-available-text{width:100%!important}.location-container{width:55%!important}.bottom-container{flex-direction:column;margin:0!important;width:100%!important}.store{width:100%!important}.state-container{margin:unset!important}.state-container .state-card{width:45%}}.main-container{padding-bottom:9%}.state-card{width:13%;box-shadow:#0000000d 0 0 0 1px;border-radius:20px;cursor:pointer}.state-card img{border-bottom:1px solid rgba(0,0,0,.05)}.state-card .state-name{font-size:14px;font-weight:600}.state-card .store-count{font-size:13px}.bb-1{border-bottom:2px solid rgba(0,0,0,.05)}.br-20{border-top-left-radius:unset!important;border-top-right-radius:unset!important}\n"] }]
+                    ], template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\n    <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\n        <div class=\"top-section w-100 d-flex align-items-center justify-content-center text-center flex-column\"\n            [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"stylesLayout\">\n            <ng-container *ngIf=\"!loader\">\n                <div class=\"store-header mb-3\">\n                    {{ submit && showMessage == true && pincode && pincode?.toString()?.length == 6 ? \"Stores in \" +\n                    pincode :\n                    \"Find a Store Near You\"}}\n                </div>\n                <div class=\"sub-text\">\n                    {{ submit && showMessage == true && pincode && pincode?.toString()?.length == 6 ? 'We have ' +\n                    totalCount\n                    + ' stores in this locality, scroll down to view the stores\n                    and browse the designs available.' : 'Locate a store near you \u2014 our presence is expanding every day,\n                    and\n                    we look forward to serving you.' }}\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"loader\">\n                <div class=\"sub-text\">\n                    <ngx-skeleton-loader [theme]=\"{\n                width: '35%',\n                height: '3vh',\n               'border-radius': '12px',\n                 }\"></ngx-skeleton-loader>\n                </div>\n                <div class=\"sub-text w-75\">\n                    <ngx-skeleton-loader [theme]=\"{\n                width: '35%',\n                height: '2vh',\n               'border-radius': '12px',\n                 }\"></ngx-skeleton-loader>\n                </div>\n            </ng-container>\n            <div class=\"location-container d-flex align-items-center justify-content-between w-25\"\n                [class.error-border]=\"error\">\n                <div class=\"d-flex align-items-center w-90\">\n                    <div class=\"d-flex mx-1\"><mat-icon class=\"d-flex align-items-center justify-content-center f-20\"\n                            [style.color]=\"data?.styles?.background?.accentColor\">gps_fixed</mat-icon>\n                    </div>\n                    <input type=\"number\" placeholder=\"Pin Code\" [(ngModel)]=\"pincode\" class=\"w-90\"\n                        [style.backgroundColor]=\"'#ffffff'\"\n                        (ngModelChange)=\"pincode.toString().length != 6 ? submit = false : error = false;\" />\n                </div>\n                <div (click)=\"getDataWithPincode()\" class=\"f-13 cursor-pointer\">Submit</div>\n            </div>\n            <span class=\"f-12 w-25 text-start mt-2\" *ngIf=\"error\" [style.color]=\"'#dc3545'\">Invalid Pincode\n                (Ex:500088)</span>\n        </div>\n        <div class=\"bottom-container row  mt-3 w-100\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\n            [id]=\"data?.id\">\n            <div class=\"state-container row gap-3 justify-content-center mb-5\" *ngIf=\"showState && !pincode\">\n                <ng-container *ngFor=\"let state of stateList; let i = index\">\n                    <div class=\"state-card p-2 col-sm-6\" (click)=\"setStateData(state)\">\n                        <ng-container *ngIf=\"state?.stateImage; else noImage\">\n                            <img class=\"w-100 h-75\" [src]=\"state?.stateImage\">\n                        </ng-container>\n                        <ng-template #noImage>\n                            <img class=\"w-100 h-75\"\n                                src=\"https://cdn.caratlane.com/media/static/images/Find_In_Store/city_5.svg\">\n                        </ng-template>\n                        <div class=\"text-center mt-2 state-name\">{{state?.stateName}}</div>\n                        <div class=\"store-count text-center mb-3 mt-1\">{{state?.storeCount + \" stores\"}}</div>\n                    </div>\n                </ng-container>\n            </div>\n            <div class=\"w-100 d-flex align-items-center justify-content-center mb-3\"\n                *ngIf=\"submit && showMessage == false && pincode && pincode.toString().length ==6 && !loader\">\n                <div class=\"text-center not-available-text\">We are not available in this location currently</div>\n            </div>\n            <ng-container *ngIf=\"loader\">\n                <div class=\"sub-text w-100 text-center\">\n                    <ngx-skeleton-loader [theme]=\"{\n                width: '35%',\n                height: '6vh',\n               'border-radius': '12px',\n                 }\"></ngx-skeleton-loader>\n                </div>\n            </ng-container>\n            <div class=\"bottom-sub-text d-flex align-items-center justify-content-center mb-3 w-100 f-20 fw-bold\"> {{\n                submit &&\n                showMessage == true && pincode ? \"Showing \" + totalCount + \" Stores in \" + pincode :\n                \"Showing All Stores\"}}</div>\n            <ng-container *ngIf=\"!loader;else loaderScreen\">\n                <div class=\"row d-flex\">\n                    <div class=\"col-4 p-2 store d-flex flex-column\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n                        *ngFor=\"let ele of storesList; let i = index\">\n                        <div class=\"card-body position-relative d-flex flex-column  h-100\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\">\n                            <!-- Content -->\n                            <div class=\"h-100  p-3 pb-0\">\n                                <div class=\"d-flex justify-content-between align-items-start mb-2\">\n                                    <div class=\"d-flex flex-column mb-2 bb-1 w-100 pb-2\">\n                                        <h6 class=\"card-title fw-bold mb-1 w-100\">{{ele?.storeName}}</h6>\n                                        <div class=\"f-11\">\n                                            \u2B504.{{ele?.star}} &nbsp;&#x2022;&nbsp;{{ele?.reviewCount}}&nbsp;Google\n                                            Reviews\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"mb-2 f-11\">\n                                    <p class=\"mb-1 text-dark fw-medium\">{{ele?.addressDetails?.addressLine}},</p>\n                                    <p class=\"mb-1 text-dark fw-medium\">\n                                        {{ele?.addressDetails?.city}},\n                                        {{ele?.addressDetails?.state}},{{ele?.addressDetails?.pincode}},\n                                    </p>\n                                    <p class=\"mb-0 fw-bold\">Phone-\n                                        <span\n                                            [style.color]=\"data?.styles?.background?.accentColor\">{{ele?.storeContactDetails?.mobile}}</span>\n                                    </p>\n                                </div>\n                                <div class=\"mb-2 f-11\">\n                                    <p class=\"mb-0  fw-bold\" [style.color]=\"data?.styles?.background?.accentColor\">\n                                        STORE HOURS -\n                                        {{getTime(ele?.storeHours,'OPEN')}} to {{getTime(ele?.storeHours,'CLOSE')}}\n                                    </p>\n                                </div>\n                            </div>\n                            <!-- Fixed bottom buttons -->\n                            <div class=\"d-flex gap-3 align-items-center justify-content-between  p-3 w-100 br-20\"\n                                [style.backgroundColor]=\"getRGBA(styles?.background?.accentColor,10)\"\n                                [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\">\n                                <div class=\"br-12 d-flex align-items-center justify-content-center\"\n                                    style=\"width: 30px; height: 30px;\"\n                                    (click)=\"openWhatsapp(ele?.storeContactDetails?.mobile)\"\n                                    [style.backgroundColor]=\"data?.styles?.background?.accentColor\">\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"\n                                        style=\"height: 20px;cursor: pointer;\">\n                                        <path [attr.fill]=\"getTextColor(data?.styles?.background?.accentColor)\"\n                                            d=\"M380.9 97.1c-41.9-42-97.7-65.1-157-65.1-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480 117.7 449.1c32.4 17.7 68.9 27 106.1 27l.1 0c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3 18.6-68.1-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1s56.2 81.2 56.1 130.5c0 101.8-84.9 184.6-186.6 184.6zM325.1 300.5c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8s-14.3 18-17.6 21.8c-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7 .9-6.9-.5-9.7s-12.5-30.1-17.1-41.2c-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2s-9.7 1.4-14.8 6.9c-5.1 5.6-19.4 19-19.4 46.3s19.9 53.7 22.6 57.4c2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4s4.6-24.1 3.2-26.4c-1.3-2.5-5-3.9-10.5-6.6z\" />\n                                    </svg>\n                                </div>\n                                <button class=\"btn w-50\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\n                                    simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\n                                    [color]=\"data?.styles?.background?.accentColor\"\n                                    [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\n                                    [buttonId]=\"button?.id ?? ''\" (click)=\"viewStore(ele.id)\">\n                                    {{button?.content?.label}}\n                                </button>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n            </ng-container>\n            <ng-template #loaderScreen>\n                <div class=\"row loader-container\">\n                    <ng-container *ngFor=\"let ele of [1,2,3,4,5,6]\">\n                        <ngx-skeleton-loader class=\"col-4 loader-column\" [theme]=\"{\n                width: '100%',\n                height: '40vh',\n               'border-radius': '12px',\n                 }\"></ngx-skeleton-loader>\n                    </ng-container>\n                </div>\n            </ng-template>\n        </div>\n    </div>\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.store-header{font-size:27px;font-weight:700}.sub-text{font-size:16px;width:35%;margin-bottom:15px}.location-container{border:1px solid;padding:8px;border-radius:12px;background:#fff}.location-container input{border:unset;appearance:unset;outline:unset;background:#fff;font-size:13px}.f-11{font-size:11px}.f-14{font-size:14px}.not-available-text{color:#ff5151;font-weight:600;border-radius:22px;text-align:center;padding:12px;background:#ff51511a;width:35%}.f-20{font-size:20px}.f-13{font-size:13px}.w-90{width:90%}.card-body{box-shadow:#0000000d 0 0 0 1px;height:100%}.card-bottom{POSITION:ABSOLUTE;width:90%;bottom:15px}.br-12{border-radius:12px}.btn{font-size:12px!important}.error-border{border:2px solid #dc3545!important}.f-12{font-size:12px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}@media (max-width:475px){.sub-text{width:100%!important}.loader-container{flex-direction:column;padding-right:0!important}.loader-column,.not-available-text{width:100%!important}.location-container{width:55%!important}.bottom-container{flex-direction:column;margin:0!important;width:100%!important}.store{width:100%!important}.state-container{margin:unset!important}.state-container .state-card{width:45%}}.main-container{padding-bottom:9%}.state-card{width:13%;box-shadow:#0000000d 0 0 0 1px;border-radius:20px;cursor:pointer}.state-card img{border-bottom:1px solid rgba(0,0,0,.05)}.state-card .state-name{font-size:14px;font-weight:600}.state-card .store-count{font-size:13px}.bb-1{border-bottom:2px solid rgba(0,0,0,.05)}.br-20{border-top-left-radius:unset!important;border-top-right-radius:unset!important}\n"] }]
         }], ctorParameters: () => [{ type: RestService }, { type: i2$2.Router }], propDecorators: { data: [{
                 type: Input
             }], edit: [{
@@ -25208,7 +25208,7 @@ class StorePageComponent extends BaseSection {
         return { ...this.styles?.layout };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StorePageComponent, deps: [{ token: RestService }, { token: i2$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StorePageComponent, isStandalone: true, selector: "simpo-store-page", inputs: { data: "data", edit: "edit", customClass: "customClass", delete: "delete", index: "index" }, usesInheritance: true, ngImport: i0, template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n    <div class=\"main-container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n        [simpoBackground]=\"styles?.background\" [simpoLayout]=\"stylesLayout\" [spacingHorizontal]=\"stylesLayout\">\r\n        <div class=\"w-100 row store-details\" *ngIf=\"!loading\">\r\n            <div class=\"col-4 store-img\">\r\n                <img [src]=\"storeData?.storeImageUrls[0]\" alt=\"Image\" class=\"w-100 h-100\" [simpoCorner]=\"styles?.corners\"\r\n                    [id]=\"data?.id\">\r\n            </div>\r\n            <div class=\"col-8 px-3 details-container\">\r\n                <div class=\"address-container\">\r\n                    <div class=\"d-flex align-items-start mb-4 p-3 mt-3 store-container\">\r\n                        <div class=\"flex-grow-1 me-3\">\r\n                            <h4 class=\"store-name mb-2\">{{storeData?.storeName}}\r\n                            </h4>\r\n                            <p class=\"store-address mb-2 f-14\">{{storeData?.addressDetails?.addressLine}} ,\r\n                                {{storeData?.addressDetails?.city}} , {{storeData?.addressDetails?.state}} ,\r\n                                {{storeData?.addressDetails?.pincode}}</p>\r\n                            <a [href]=\"storeData?.addressDetails?.mapUrl\" class=\"view-directions\" target=\"_blank\"\r\n                                [style.color]=\"data?.styles?.background?.accentColor\">VIEW\r\n                                DIRECTIONS</a>\r\n                        </div>\r\n                        <div class=\"d-flex gap-2\">\r\n                            <button class=\"btn btn-success rounded d-flex align-items-center justify-content-center p-0 cursor-pointer\"\r\n                                style=\" width: 30px !important;height: 33px; background-color: #25d366 !important; border-color: #25d366 !important;\"\r\n                                (click)=\"openWhatsapp(storeData?.storeContactDetails?.mobile)\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" style=\"height: 20px;\">\r\n                                    <path fill=\"#ffffff\"\r\n                                        d=\"M380.9 97.1c-41.9-42-97.7-65.1-157-65.1-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480 117.7 449.1c32.4 17.7 68.9 27 106.1 27l.1 0c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3 18.6-68.1-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1s56.2 81.2 56.1 130.5c0 101.8-84.9 184.6-186.6 184.6zM325.1 300.5c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8s-14.3 18-17.6 21.8c-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7 .9-6.9-.5-9.7s-12.5-30.1-17.1-41.2c-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2s-9.7 1.4-14.8 6.9c-5.1 5.6-19.4 19-19.4 46.3s19.9 53.7 22.6 57.4c2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4s4.6-24.1 3.2-26.4c-1.3-2.5-5-3.9-10.5-6.6z\" />\r\n                                </svg> </button>\r\n                            <button class=\"btn btn-light rounded d-flex align-items-center justify-content-center p-0 cursor-pointer\"\r\n                                style=\"width: 30px !important; height: 33px;\" (click)=\"dialNumber(storeData?.storeContactDetails?.mobile)\">\r\n                                <mat-icon> phone</mat-icon>\r\n                                <!-- <button class=\"btn book-visit-btn\">BOOK A VISIT</button> -->\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"mb-3 px-2\">\r\n                        <h5 class=\"mb-3\">Facilities</h5>\r\n                        <div class=\"d-flex flex-wrap gap-3\">\r\n                            <div class=\"d-flex align-items-center gap- facility-text\">\r\n                                <mat-icon\r\n                                    class=\"f-18 d-flex align-items-center justify-content-center\">access_time</mat-icon>\r\n                                <span> {{getTime(storeData?.storeHours)}}\r\n                                </span>\r\n                            </div>\r\n                            <div class=\"facility-text align-content-center\"\r\n                                *ngFor=\"let ele of storeData?.facilities; let i = index\">{{ele | titlecase}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"px-2 mb-2\">\r\n                        <h5 class=\"mb-3\">Walk-In Services</h5>\r\n                        <div class=\"row g-3\">\r\n                            <div class=\"col-md-3\" *ngFor=\"let ele of storeData?.services; let i = index\">\r\n                                <div class=\"service-card old-gold h-100 py-2\" *ngIf=\"ele?.isAvailable\">\r\n                                    <p class=\"mb-2 f-14\">{{(removeUnderScore(ele?.serviceType) | titlecase)}}</p>\r\n                                    <p class=\"mb-0 f-13\">{{ele?.description}}</p>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"w-100 row store-details\" *ngIf=\"loading\">\r\n            <!-- Image skeleton -->\r\n            <div class=\"col-4 store-img\">\r\n                <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\r\n                'background-color': '#f0f0f0',\r\n                'border-radius': '8px',\r\n                'height': '100%',\r\n                'width': '100%'\r\n              }\">\r\n                </ngx-skeleton-loader>\r\n            </div>\r\n        \r\n            <!-- Details skeleton -->\r\n            <div class=\"col-8 px-3 details-container\">\r\n                <div class=\"address-container\">\r\n                    <!-- Store info skeleton -->\r\n                    <div class=\"d-flex align-items-start mb-4 p-3 mt-3\">\r\n                        <div class=\"flex-grow-1 me-3\">\r\n                            <!-- Store name -->\r\n                            <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\r\n                      'background-color': '#f0f0f0',\r\n                      'border-radius': '4px',\r\n                      'height': '24px',\r\n                      'width': '60%',\r\n                      'margin-bottom': '8px'\r\n                    }\">\r\n                            </ngx-skeleton-loader>\r\n        \r\n                            <!-- Address lines -->\r\n                            <ngx-skeleton-loader count=\"2\" appearance=\"custom-content\" [theme]=\"{\r\n                      'background-color': '#f0f0f0',\r\n                      'border-radius': '4px',\r\n                      'height': '16px',\r\n                      'width': '80%',\r\n                      'margin-bottom': '4px'\r\n                    }\">\r\n                            </ngx-skeleton-loader>\r\n        \r\n                            <!-- View directions link -->\r\n                            <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\r\n                      'background-color': '#f0f0f0',\r\n                      'border-radius': '4px',\r\n                      'height': '16px',\r\n                      'width': '40%',\r\n                      'margin-top': '8px'\r\n                    }\">\r\n                            </ngx-skeleton-loader>\r\n                        </div>\r\n        \r\n                        <!-- Action buttons skeleton -->\r\n                        <div class=\"d-flex gap-2\">\r\n                            <ngx-skeleton-loader count=\"2\" appearance=\"custom-content\" [theme]=\"{\r\n                      'background-color': '#f0f0f0',\r\n                      'border-radius': '4px',\r\n                      'height': '33px',\r\n                      'width': '30px',\r\n                      'margin-right': '8px'\r\n                    }\">\r\n                            </ngx-skeleton-loader>\r\n                        </div>\r\n                    </div>\r\n        \r\n                    <!-- Facilities section skeleton -->\r\n                    <div class=\"mb-3 px-2\">\r\n                        <!-- Facilities title -->\r\n                        <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\r\n                    'background-color': '#f0f0f0',\r\n                    'border-radius': '4px',\r\n                    'height': '20px',\r\n                    'width': '25%',\r\n                    'margin-bottom': '12px'\r\n                  }\">\r\n                        </ngx-skeleton-loader>\r\n        \r\n                        <!-- Facilities items -->\r\n                        <div class=\"d-flex flex-wrap gap-3\">\r\n                            <ngx-skeleton-loader count=\"4\" appearance=\"custom-content\" [theme]=\"{\r\n                      'background-color': '#f0f0f0',\r\n                      'border-radius': '4px',\r\n                      'height': '24px',\r\n                      'width': '120px',\r\n                      'margin-right': '12px',\r\n                      'margin-bottom': '8px'\r\n                    }\">\r\n                            </ngx-skeleton-loader>\r\n                        </div>\r\n                    </div>\r\n        \r\n                    <!-- Walk-in services section skeleton -->\r\n                    <div class=\"px-2 mb-2\">\r\n                        <!-- Services title -->\r\n                        <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\r\n                    'background-color': '#f0f0f0',\r\n                    'border-radius': '4px',\r\n                    'height': '20px',\r\n                    'width': '30%',\r\n                    'margin-bottom': '12px'\r\n                  }\">\r\n                        </ngx-skeleton-loader>\r\n        \r\n                        <!-- Service cards -->\r\n                        <div class=\"row g-3\">\r\n                            <div class=\"col-md-3\" *ngFor=\"let item of [1,2,3,4]\">\r\n                                <div class=\"h-100 py-2\">\r\n                                    <!-- Service type -->\r\n                                    <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\r\n                          'background-color': '#f0f0f0',\r\n                          'border-radius': '4px',\r\n                          'height': '16px',\r\n                          'width': '80%',\r\n                          'margin-bottom': '8px'\r\n                        }\">\r\n                                    </ngx-skeleton-loader>\r\n        \r\n                                    <!-- Service description -->\r\n                                    <ngx-skeleton-loader count=\"2\" appearance=\"custom-content\" [theme]=\"{\r\n                          'background-color': '#f0f0f0',\r\n                          'border-radius': '4px',\r\n                          'height': '14px',\r\n                          'width': '100%',\r\n                          'margin-bottom': '4px'\r\n                        }\">\r\n                                    </ngx-skeleton-loader>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\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\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\r\n\r\n    </div>\r\n</div>", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.text-hidden{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.store-container{background:#fff;color:#000;border-radius:12px;box-shadow:#0000001a 0 0 5px,#0000001a 0 0 1px}.service-card{border-radius:12px;background:#fff;padding:10px;box-shadow:#0000001a 0 0 5px,#0000001a 0 0 1px}.view-directions{font-weight:600;font-size:12px;cursor:pointer}.cursor-pointer{cursor:pointer}.f-18{font-size:18px}.f-13{font-size:13px}.f-14{font-size:14px}.facility-text{background:#fff;color:#000;border-radius:12px;padding:4px 12px;font-size:13px;box-shadow:#0000001a 0 0 5px,#0000001a 0 0 1px}@media (max-width:475px){.store-details{flex-direction:column}.store-img{width:100%!important;max-height:250px!important}.details-container{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: FormsModule }, { 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: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StorePageComponent, isStandalone: true, selector: "simpo-store-page", inputs: { data: "data", edit: "edit", customClass: "customClass", delete: "delete", index: "index" }, usesInheritance: true, ngImport: i0, template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\n    <div class=\"main-container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\n        [simpoBackground]=\"styles?.background\" [simpoLayout]=\"stylesLayout\" [spacingHorizontal]=\"stylesLayout\">\n        <div class=\"w-100 row store-details\" *ngIf=\"!loading\">\n            <div class=\"col-4 store-img\">\n                <img [src]=\"storeData?.storeImageUrls[0]\" alt=\"Image\" class=\"w-100 h-100\" [simpoCorner]=\"styles?.corners\"\n                    [id]=\"data?.id\">\n            </div>\n            <div class=\"col-8 px-3 details-container\">\n                <div class=\"address-container\">\n                    <div class=\"d-flex align-items-start mb-4 p-3 mt-3 store-container\">\n                        <div class=\"flex-grow-1 me-3\">\n                            <h4 class=\"store-name mb-2\">{{storeData?.storeName}}\n                            </h4>\n                            <p class=\"store-address mb-2 f-14\">{{storeData?.addressDetails?.addressLine}} ,\n                                {{storeData?.addressDetails?.city}} , {{storeData?.addressDetails?.state}} ,\n                                {{storeData?.addressDetails?.pincode}}</p>\n                            <a [href]=\"storeData?.addressDetails?.mapUrl\" class=\"view-directions\" target=\"_blank\"\n                                [style.color]=\"data?.styles?.background?.accentColor\">VIEW\n                                DIRECTIONS</a>\n                        </div>\n                        <div class=\"d-flex gap-2\">\n                            <button class=\"btn btn-success rounded d-flex align-items-center justify-content-center p-0 cursor-pointer\"\n                                style=\" width: 30px !important;height: 33px; background-color: #25d366 !important; border-color: #25d366 !important;\"\n                                (click)=\"openWhatsapp(storeData?.storeContactDetails?.mobile)\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" style=\"height: 20px;\">\n                                    <path fill=\"#ffffff\"\n                                        d=\"M380.9 97.1c-41.9-42-97.7-65.1-157-65.1-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480 117.7 449.1c32.4 17.7 68.9 27 106.1 27l.1 0c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3 18.6-68.1-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1s56.2 81.2 56.1 130.5c0 101.8-84.9 184.6-186.6 184.6zM325.1 300.5c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8s-14.3 18-17.6 21.8c-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7 .9-6.9-.5-9.7s-12.5-30.1-17.1-41.2c-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2s-9.7 1.4-14.8 6.9c-5.1 5.6-19.4 19-19.4 46.3s19.9 53.7 22.6 57.4c2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4s4.6-24.1 3.2-26.4c-1.3-2.5-5-3.9-10.5-6.6z\" />\n                                </svg> </button>\n                            <button class=\"btn btn-light rounded d-flex align-items-center justify-content-center p-0 cursor-pointer\"\n                                style=\"width: 30px !important; height: 33px;\" (click)=\"dialNumber(storeData?.storeContactDetails?.mobile)\">\n                                <mat-icon> phone</mat-icon>\n                                <!-- <button class=\"btn book-visit-btn\">BOOK A VISIT</button> -->\n                            </button>\n                        </div>\n                    </div>\n                    <div class=\"mb-3 px-2\">\n                        <h5 class=\"mb-3\">Facilities</h5>\n                        <div class=\"d-flex flex-wrap gap-3\">\n                            <div class=\"d-flex align-items-center gap- facility-text\">\n                                <mat-icon\n                                    class=\"f-18 d-flex align-items-center justify-content-center\">access_time</mat-icon>\n                                <span> {{getTime(storeData?.storeHours)}}\n                                </span>\n                            </div>\n                            <div class=\"facility-text align-content-center\"\n                                *ngFor=\"let ele of storeData?.facilities; let i = index\">{{ele | titlecase}}</div>\n                        </div>\n                    </div>\n                    <div class=\"px-2 mb-2\">\n                        <h5 class=\"mb-3\">Walk-In Services</h5>\n                        <div class=\"row g-3\">\n                            <div class=\"col-md-3\" *ngFor=\"let ele of storeData?.services; let i = index\">\n                                <div class=\"service-card old-gold h-100 py-2\" *ngIf=\"ele?.isAvailable\">\n                                    <p class=\"mb-2 f-14\">{{(removeUnderScore(ele?.serviceType) | titlecase)}}</p>\n                                    <p class=\"mb-0 f-13\">{{ele?.description}}</p>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"w-100 row store-details\" *ngIf=\"loading\">\n            <!-- Image skeleton -->\n            <div class=\"col-4 store-img\">\n                <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\n                'background-color': '#f0f0f0',\n                'border-radius': '8px',\n                'height': '100%',\n                'width': '100%'\n              }\">\n                </ngx-skeleton-loader>\n            </div>\n        \n            <!-- Details skeleton -->\n            <div class=\"col-8 px-3 details-container\">\n                <div class=\"address-container\">\n                    <!-- Store info skeleton -->\n                    <div class=\"d-flex align-items-start mb-4 p-3 mt-3\">\n                        <div class=\"flex-grow-1 me-3\">\n                            <!-- Store name -->\n                            <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\n                      'background-color': '#f0f0f0',\n                      'border-radius': '4px',\n                      'height': '24px',\n                      'width': '60%',\n                      'margin-bottom': '8px'\n                    }\">\n                            </ngx-skeleton-loader>\n        \n                            <!-- Address lines -->\n                            <ngx-skeleton-loader count=\"2\" appearance=\"custom-content\" [theme]=\"{\n                      'background-color': '#f0f0f0',\n                      'border-radius': '4px',\n                      'height': '16px',\n                      'width': '80%',\n                      'margin-bottom': '4px'\n                    }\">\n                            </ngx-skeleton-loader>\n        \n                            <!-- View directions link -->\n                            <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\n                      'background-color': '#f0f0f0',\n                      'border-radius': '4px',\n                      'height': '16px',\n                      'width': '40%',\n                      'margin-top': '8px'\n                    }\">\n                            </ngx-skeleton-loader>\n                        </div>\n        \n                        <!-- Action buttons skeleton -->\n                        <div class=\"d-flex gap-2\">\n                            <ngx-skeleton-loader count=\"2\" appearance=\"custom-content\" [theme]=\"{\n                      'background-color': '#f0f0f0',\n                      'border-radius': '4px',\n                      'height': '33px',\n                      'width': '30px',\n                      'margin-right': '8px'\n                    }\">\n                            </ngx-skeleton-loader>\n                        </div>\n                    </div>\n        \n                    <!-- Facilities section skeleton -->\n                    <div class=\"mb-3 px-2\">\n                        <!-- Facilities title -->\n                        <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\n                    'background-color': '#f0f0f0',\n                    'border-radius': '4px',\n                    'height': '20px',\n                    'width': '25%',\n                    'margin-bottom': '12px'\n                  }\">\n                        </ngx-skeleton-loader>\n        \n                        <!-- Facilities items -->\n                        <div class=\"d-flex flex-wrap gap-3\">\n                            <ngx-skeleton-loader count=\"4\" appearance=\"custom-content\" [theme]=\"{\n                      'background-color': '#f0f0f0',\n                      'border-radius': '4px',\n                      'height': '24px',\n                      'width': '120px',\n                      'margin-right': '12px',\n                      'margin-bottom': '8px'\n                    }\">\n                            </ngx-skeleton-loader>\n                        </div>\n                    </div>\n        \n                    <!-- Walk-in services section skeleton -->\n                    <div class=\"px-2 mb-2\">\n                        <!-- Services title -->\n                        <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\n                    'background-color': '#f0f0f0',\n                    'border-radius': '4px',\n                    'height': '20px',\n                    'width': '30%',\n                    'margin-bottom': '12px'\n                  }\">\n                        </ngx-skeleton-loader>\n        \n                        <!-- Service cards -->\n                        <div class=\"row g-3\">\n                            <div class=\"col-md-3\" *ngFor=\"let item of [1,2,3,4]\">\n                                <div class=\"h-100 py-2\">\n                                    <!-- Service type -->\n                                    <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\n                          'background-color': '#f0f0f0',\n                          'border-radius': '4px',\n                          'height': '16px',\n                          'width': '80%',\n                          'margin-bottom': '8px'\n                        }\">\n                                    </ngx-skeleton-loader>\n        \n                                    <!-- Service description -->\n                                    <ngx-skeleton-loader count=\"2\" appearance=\"custom-content\" [theme]=\"{\n                          'background-color': '#f0f0f0',\n                          'border-radius': '4px',\n                          'height': '14px',\n                          'width': '100%',\n                          'margin-bottom': '4px'\n                        }\">\n                                    </ngx-skeleton-loader>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n            <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n        </div>\n\n        <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n            <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n        </div>\n\n\n    </div>\n</div>", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.text-hidden{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.store-container{background:#fff;color:#000;border-radius:12px;box-shadow:#0000001a 0 0 5px,#0000001a 0 0 1px}.service-card{border-radius:12px;background:#fff;padding:10px;box-shadow:#0000001a 0 0 5px,#0000001a 0 0 1px}.view-directions{font-weight:600;font-size:12px;cursor:pointer}.cursor-pointer{cursor:pointer}.f-18{font-size:18px}.f-13{font-size:13px}.f-14{font-size:14px}.facility-text{background:#fff;color:#000;border-radius:12px;padding:4px 12px;font-size:13px;box-shadow:#0000001a 0 0 5px,#0000001a 0 0 1px}@media (max-width:475px){.store-details{flex-direction:column}.store-img{width:100%!important;max-height:250px!important}.details-container{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: FormsModule }, { 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: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StorePageComponent, decorators: [{
             type: Component,
@@ -25227,7 +25227,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SpacingHorizontalDirective,
                         MatIcon,
                         NgxSkeletonLoaderModule
-                    ], template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n    <div class=\"main-container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n        [simpoBackground]=\"styles?.background\" [simpoLayout]=\"stylesLayout\" [spacingHorizontal]=\"stylesLayout\">\r\n        <div class=\"w-100 row store-details\" *ngIf=\"!loading\">\r\n            <div class=\"col-4 store-img\">\r\n                <img [src]=\"storeData?.storeImageUrls[0]\" alt=\"Image\" class=\"w-100 h-100\" [simpoCorner]=\"styles?.corners\"\r\n                    [id]=\"data?.id\">\r\n            </div>\r\n            <div class=\"col-8 px-3 details-container\">\r\n                <div class=\"address-container\">\r\n                    <div class=\"d-flex align-items-start mb-4 p-3 mt-3 store-container\">\r\n                        <div class=\"flex-grow-1 me-3\">\r\n                            <h4 class=\"store-name mb-2\">{{storeData?.storeName}}\r\n                            </h4>\r\n                            <p class=\"store-address mb-2 f-14\">{{storeData?.addressDetails?.addressLine}} ,\r\n                                {{storeData?.addressDetails?.city}} , {{storeData?.addressDetails?.state}} ,\r\n                                {{storeData?.addressDetails?.pincode}}</p>\r\n                            <a [href]=\"storeData?.addressDetails?.mapUrl\" class=\"view-directions\" target=\"_blank\"\r\n                                [style.color]=\"data?.styles?.background?.accentColor\">VIEW\r\n                                DIRECTIONS</a>\r\n                        </div>\r\n                        <div class=\"d-flex gap-2\">\r\n                            <button class=\"btn btn-success rounded d-flex align-items-center justify-content-center p-0 cursor-pointer\"\r\n                                style=\" width: 30px !important;height: 33px; background-color: #25d366 !important; border-color: #25d366 !important;\"\r\n                                (click)=\"openWhatsapp(storeData?.storeContactDetails?.mobile)\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" style=\"height: 20px;\">\r\n                                    <path fill=\"#ffffff\"\r\n                                        d=\"M380.9 97.1c-41.9-42-97.7-65.1-157-65.1-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480 117.7 449.1c32.4 17.7 68.9 27 106.1 27l.1 0c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3 18.6-68.1-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1s56.2 81.2 56.1 130.5c0 101.8-84.9 184.6-186.6 184.6zM325.1 300.5c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8s-14.3 18-17.6 21.8c-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7 .9-6.9-.5-9.7s-12.5-30.1-17.1-41.2c-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2s-9.7 1.4-14.8 6.9c-5.1 5.6-19.4 19-19.4 46.3s19.9 53.7 22.6 57.4c2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4s4.6-24.1 3.2-26.4c-1.3-2.5-5-3.9-10.5-6.6z\" />\r\n                                </svg> </button>\r\n                            <button class=\"btn btn-light rounded d-flex align-items-center justify-content-center p-0 cursor-pointer\"\r\n                                style=\"width: 30px !important; height: 33px;\" (click)=\"dialNumber(storeData?.storeContactDetails?.mobile)\">\r\n                                <mat-icon> phone</mat-icon>\r\n                                <!-- <button class=\"btn book-visit-btn\">BOOK A VISIT</button> -->\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"mb-3 px-2\">\r\n                        <h5 class=\"mb-3\">Facilities</h5>\r\n                        <div class=\"d-flex flex-wrap gap-3\">\r\n                            <div class=\"d-flex align-items-center gap- facility-text\">\r\n                                <mat-icon\r\n                                    class=\"f-18 d-flex align-items-center justify-content-center\">access_time</mat-icon>\r\n                                <span> {{getTime(storeData?.storeHours)}}\r\n                                </span>\r\n                            </div>\r\n                            <div class=\"facility-text align-content-center\"\r\n                                *ngFor=\"let ele of storeData?.facilities; let i = index\">{{ele | titlecase}}</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"px-2 mb-2\">\r\n                        <h5 class=\"mb-3\">Walk-In Services</h5>\r\n                        <div class=\"row g-3\">\r\n                            <div class=\"col-md-3\" *ngFor=\"let ele of storeData?.services; let i = index\">\r\n                                <div class=\"service-card old-gold h-100 py-2\" *ngIf=\"ele?.isAvailable\">\r\n                                    <p class=\"mb-2 f-14\">{{(removeUnderScore(ele?.serviceType) | titlecase)}}</p>\r\n                                    <p class=\"mb-0 f-13\">{{ele?.description}}</p>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"w-100 row store-details\" *ngIf=\"loading\">\r\n            <!-- Image skeleton -->\r\n            <div class=\"col-4 store-img\">\r\n                <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\r\n                'background-color': '#f0f0f0',\r\n                'border-radius': '8px',\r\n                'height': '100%',\r\n                'width': '100%'\r\n              }\">\r\n                </ngx-skeleton-loader>\r\n            </div>\r\n        \r\n            <!-- Details skeleton -->\r\n            <div class=\"col-8 px-3 details-container\">\r\n                <div class=\"address-container\">\r\n                    <!-- Store info skeleton -->\r\n                    <div class=\"d-flex align-items-start mb-4 p-3 mt-3\">\r\n                        <div class=\"flex-grow-1 me-3\">\r\n                            <!-- Store name -->\r\n                            <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\r\n                      'background-color': '#f0f0f0',\r\n                      'border-radius': '4px',\r\n                      'height': '24px',\r\n                      'width': '60%',\r\n                      'margin-bottom': '8px'\r\n                    }\">\r\n                            </ngx-skeleton-loader>\r\n        \r\n                            <!-- Address lines -->\r\n                            <ngx-skeleton-loader count=\"2\" appearance=\"custom-content\" [theme]=\"{\r\n                      'background-color': '#f0f0f0',\r\n                      'border-radius': '4px',\r\n                      'height': '16px',\r\n                      'width': '80%',\r\n                      'margin-bottom': '4px'\r\n                    }\">\r\n                            </ngx-skeleton-loader>\r\n        \r\n                            <!-- View directions link -->\r\n                            <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\r\n                      'background-color': '#f0f0f0',\r\n                      'border-radius': '4px',\r\n                      'height': '16px',\r\n                      'width': '40%',\r\n                      'margin-top': '8px'\r\n                    }\">\r\n                            </ngx-skeleton-loader>\r\n                        </div>\r\n        \r\n                        <!-- Action buttons skeleton -->\r\n                        <div class=\"d-flex gap-2\">\r\n                            <ngx-skeleton-loader count=\"2\" appearance=\"custom-content\" [theme]=\"{\r\n                      'background-color': '#f0f0f0',\r\n                      'border-radius': '4px',\r\n                      'height': '33px',\r\n                      'width': '30px',\r\n                      'margin-right': '8px'\r\n                    }\">\r\n                            </ngx-skeleton-loader>\r\n                        </div>\r\n                    </div>\r\n        \r\n                    <!-- Facilities section skeleton -->\r\n                    <div class=\"mb-3 px-2\">\r\n                        <!-- Facilities title -->\r\n                        <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\r\n                    'background-color': '#f0f0f0',\r\n                    'border-radius': '4px',\r\n                    'height': '20px',\r\n                    'width': '25%',\r\n                    'margin-bottom': '12px'\r\n                  }\">\r\n                        </ngx-skeleton-loader>\r\n        \r\n                        <!-- Facilities items -->\r\n                        <div class=\"d-flex flex-wrap gap-3\">\r\n                            <ngx-skeleton-loader count=\"4\" appearance=\"custom-content\" [theme]=\"{\r\n                      'background-color': '#f0f0f0',\r\n                      'border-radius': '4px',\r\n                      'height': '24px',\r\n                      'width': '120px',\r\n                      'margin-right': '12px',\r\n                      'margin-bottom': '8px'\r\n                    }\">\r\n                            </ngx-skeleton-loader>\r\n                        </div>\r\n                    </div>\r\n        \r\n                    <!-- Walk-in services section skeleton -->\r\n                    <div class=\"px-2 mb-2\">\r\n                        <!-- Services title -->\r\n                        <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\r\n                    'background-color': '#f0f0f0',\r\n                    'border-radius': '4px',\r\n                    'height': '20px',\r\n                    'width': '30%',\r\n                    'margin-bottom': '12px'\r\n                  }\">\r\n                        </ngx-skeleton-loader>\r\n        \r\n                        <!-- Service cards -->\r\n                        <div class=\"row g-3\">\r\n                            <div class=\"col-md-3\" *ngFor=\"let item of [1,2,3,4]\">\r\n                                <div class=\"h-100 py-2\">\r\n                                    <!-- Service type -->\r\n                                    <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\r\n                          'background-color': '#f0f0f0',\r\n                          'border-radius': '4px',\r\n                          'height': '16px',\r\n                          'width': '80%',\r\n                          'margin-bottom': '8px'\r\n                        }\">\r\n                                    </ngx-skeleton-loader>\r\n        \r\n                                    <!-- Service description -->\r\n                                    <ngx-skeleton-loader count=\"2\" appearance=\"custom-content\" [theme]=\"{\r\n                          'background-color': '#f0f0f0',\r\n                          'border-radius': '4px',\r\n                          'height': '14px',\r\n                          'width': '100%',\r\n                          'margin-bottom': '4px'\r\n                        }\">\r\n                                    </ngx-skeleton-loader>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\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\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\r\n\r\n    </div>\r\n</div>", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.text-hidden{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.store-container{background:#fff;color:#000;border-radius:12px;box-shadow:#0000001a 0 0 5px,#0000001a 0 0 1px}.service-card{border-radius:12px;background:#fff;padding:10px;box-shadow:#0000001a 0 0 5px,#0000001a 0 0 1px}.view-directions{font-weight:600;font-size:12px;cursor:pointer}.cursor-pointer{cursor:pointer}.f-18{font-size:18px}.f-13{font-size:13px}.f-14{font-size:14px}.facility-text{background:#fff;color:#000;border-radius:12px;padding:4px 12px;font-size:13px;box-shadow:#0000001a 0 0 5px,#0000001a 0 0 1px}@media (max-width:475px){.store-details{flex-direction:column}.store-img{width:100%!important;max-height:250px!important}.details-container{width:100%}}\n"] }]
+                    ], template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\n    <div class=\"main-container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\n        [simpoBackground]=\"styles?.background\" [simpoLayout]=\"stylesLayout\" [spacingHorizontal]=\"stylesLayout\">\n        <div class=\"w-100 row store-details\" *ngIf=\"!loading\">\n            <div class=\"col-4 store-img\">\n                <img [src]=\"storeData?.storeImageUrls[0]\" alt=\"Image\" class=\"w-100 h-100\" [simpoCorner]=\"styles?.corners\"\n                    [id]=\"data?.id\">\n            </div>\n            <div class=\"col-8 px-3 details-container\">\n                <div class=\"address-container\">\n                    <div class=\"d-flex align-items-start mb-4 p-3 mt-3 store-container\">\n                        <div class=\"flex-grow-1 me-3\">\n                            <h4 class=\"store-name mb-2\">{{storeData?.storeName}}\n                            </h4>\n                            <p class=\"store-address mb-2 f-14\">{{storeData?.addressDetails?.addressLine}} ,\n                                {{storeData?.addressDetails?.city}} , {{storeData?.addressDetails?.state}} ,\n                                {{storeData?.addressDetails?.pincode}}</p>\n                            <a [href]=\"storeData?.addressDetails?.mapUrl\" class=\"view-directions\" target=\"_blank\"\n                                [style.color]=\"data?.styles?.background?.accentColor\">VIEW\n                                DIRECTIONS</a>\n                        </div>\n                        <div class=\"d-flex gap-2\">\n                            <button class=\"btn btn-success rounded d-flex align-items-center justify-content-center p-0 cursor-pointer\"\n                                style=\" width: 30px !important;height: 33px; background-color: #25d366 !important; border-color: #25d366 !important;\"\n                                (click)=\"openWhatsapp(storeData?.storeContactDetails?.mobile)\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" style=\"height: 20px;\">\n                                    <path fill=\"#ffffff\"\n                                        d=\"M380.9 97.1c-41.9-42-97.7-65.1-157-65.1-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480 117.7 449.1c32.4 17.7 68.9 27 106.1 27l.1 0c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3 18.6-68.1-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1s56.2 81.2 56.1 130.5c0 101.8-84.9 184.6-186.6 184.6zM325.1 300.5c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8s-14.3 18-17.6 21.8c-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7 .9-6.9-.5-9.7s-12.5-30.1-17.1-41.2c-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2s-9.7 1.4-14.8 6.9c-5.1 5.6-19.4 19-19.4 46.3s19.9 53.7 22.6 57.4c2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4s4.6-24.1 3.2-26.4c-1.3-2.5-5-3.9-10.5-6.6z\" />\n                                </svg> </button>\n                            <button class=\"btn btn-light rounded d-flex align-items-center justify-content-center p-0 cursor-pointer\"\n                                style=\"width: 30px !important; height: 33px;\" (click)=\"dialNumber(storeData?.storeContactDetails?.mobile)\">\n                                <mat-icon> phone</mat-icon>\n                                <!-- <button class=\"btn book-visit-btn\">BOOK A VISIT</button> -->\n                            </button>\n                        </div>\n                    </div>\n                    <div class=\"mb-3 px-2\">\n                        <h5 class=\"mb-3\">Facilities</h5>\n                        <div class=\"d-flex flex-wrap gap-3\">\n                            <div class=\"d-flex align-items-center gap- facility-text\">\n                                <mat-icon\n                                    class=\"f-18 d-flex align-items-center justify-content-center\">access_time</mat-icon>\n                                <span> {{getTime(storeData?.storeHours)}}\n                                </span>\n                            </div>\n                            <div class=\"facility-text align-content-center\"\n                                *ngFor=\"let ele of storeData?.facilities; let i = index\">{{ele | titlecase}}</div>\n                        </div>\n                    </div>\n                    <div class=\"px-2 mb-2\">\n                        <h5 class=\"mb-3\">Walk-In Services</h5>\n                        <div class=\"row g-3\">\n                            <div class=\"col-md-3\" *ngFor=\"let ele of storeData?.services; let i = index\">\n                                <div class=\"service-card old-gold h-100 py-2\" *ngIf=\"ele?.isAvailable\">\n                                    <p class=\"mb-2 f-14\">{{(removeUnderScore(ele?.serviceType) | titlecase)}}</p>\n                                    <p class=\"mb-0 f-13\">{{ele?.description}}</p>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"w-100 row store-details\" *ngIf=\"loading\">\n            <!-- Image skeleton -->\n            <div class=\"col-4 store-img\">\n                <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\n                'background-color': '#f0f0f0',\n                'border-radius': '8px',\n                'height': '100%',\n                'width': '100%'\n              }\">\n                </ngx-skeleton-loader>\n            </div>\n        \n            <!-- Details skeleton -->\n            <div class=\"col-8 px-3 details-container\">\n                <div class=\"address-container\">\n                    <!-- Store info skeleton -->\n                    <div class=\"d-flex align-items-start mb-4 p-3 mt-3\">\n                        <div class=\"flex-grow-1 me-3\">\n                            <!-- Store name -->\n                            <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\n                      'background-color': '#f0f0f0',\n                      'border-radius': '4px',\n                      'height': '24px',\n                      'width': '60%',\n                      'margin-bottom': '8px'\n                    }\">\n                            </ngx-skeleton-loader>\n        \n                            <!-- Address lines -->\n                            <ngx-skeleton-loader count=\"2\" appearance=\"custom-content\" [theme]=\"{\n                      'background-color': '#f0f0f0',\n                      'border-radius': '4px',\n                      'height': '16px',\n                      'width': '80%',\n                      'margin-bottom': '4px'\n                    }\">\n                            </ngx-skeleton-loader>\n        \n                            <!-- View directions link -->\n                            <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\n                      'background-color': '#f0f0f0',\n                      'border-radius': '4px',\n                      'height': '16px',\n                      'width': '40%',\n                      'margin-top': '8px'\n                    }\">\n                            </ngx-skeleton-loader>\n                        </div>\n        \n                        <!-- Action buttons skeleton -->\n                        <div class=\"d-flex gap-2\">\n                            <ngx-skeleton-loader count=\"2\" appearance=\"custom-content\" [theme]=\"{\n                      'background-color': '#f0f0f0',\n                      'border-radius': '4px',\n                      'height': '33px',\n                      'width': '30px',\n                      'margin-right': '8px'\n                    }\">\n                            </ngx-skeleton-loader>\n                        </div>\n                    </div>\n        \n                    <!-- Facilities section skeleton -->\n                    <div class=\"mb-3 px-2\">\n                        <!-- Facilities title -->\n                        <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\n                    'background-color': '#f0f0f0',\n                    'border-radius': '4px',\n                    'height': '20px',\n                    'width': '25%',\n                    'margin-bottom': '12px'\n                  }\">\n                        </ngx-skeleton-loader>\n        \n                        <!-- Facilities items -->\n                        <div class=\"d-flex flex-wrap gap-3\">\n                            <ngx-skeleton-loader count=\"4\" appearance=\"custom-content\" [theme]=\"{\n                      'background-color': '#f0f0f0',\n                      'border-radius': '4px',\n                      'height': '24px',\n                      'width': '120px',\n                      'margin-right': '12px',\n                      'margin-bottom': '8px'\n                    }\">\n                            </ngx-skeleton-loader>\n                        </div>\n                    </div>\n        \n                    <!-- Walk-in services section skeleton -->\n                    <div class=\"px-2 mb-2\">\n                        <!-- Services title -->\n                        <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\n                    'background-color': '#f0f0f0',\n                    'border-radius': '4px',\n                    'height': '20px',\n                    'width': '30%',\n                    'margin-bottom': '12px'\n                  }\">\n                        </ngx-skeleton-loader>\n        \n                        <!-- Service cards -->\n                        <div class=\"row g-3\">\n                            <div class=\"col-md-3\" *ngFor=\"let item of [1,2,3,4]\">\n                                <div class=\"h-100 py-2\">\n                                    <!-- Service type -->\n                                    <ngx-skeleton-loader count=\"1\" appearance=\"custom-content\" [theme]=\"{\n                          'background-color': '#f0f0f0',\n                          'border-radius': '4px',\n                          'height': '16px',\n                          'width': '80%',\n                          'margin-bottom': '8px'\n                        }\">\n                                    </ngx-skeleton-loader>\n        \n                                    <!-- Service description -->\n                                    <ngx-skeleton-loader count=\"2\" appearance=\"custom-content\" [theme]=\"{\n                          'background-color': '#f0f0f0',\n                          'border-radius': '4px',\n                          'height': '14px',\n                          'width': '100%',\n                          'margin-bottom': '4px'\n                        }\">\n                                    </ngx-skeleton-loader>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n            <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n        </div>\n\n        <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n            <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n        </div>\n\n\n    </div>\n</div>", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.text-hidden{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.store-container{background:#fff;color:#000;border-radius:12px;box-shadow:#0000001a 0 0 5px,#0000001a 0 0 1px}.service-card{border-radius:12px;background:#fff;padding:10px;box-shadow:#0000001a 0 0 5px,#0000001a 0 0 1px}.view-directions{font-weight:600;font-size:12px;cursor:pointer}.cursor-pointer{cursor:pointer}.f-18{font-size:18px}.f-13{font-size:13px}.f-14{font-size:14px}.facility-text{background:#fff;color:#000;border-radius:12px;padding:4px 12px;font-size:13px;box-shadow:#0000001a 0 0 5px,#0000001a 0 0 1px}@media (max-width:475px){.store-details{flex-direction:column}.store-img{width:100%!important;max-height:250px!important}.details-container{width:100%}}\n"] }]
         }], ctorParameters: () => [{ type: RestService }, { type: i2$2.ActivatedRoute }], propDecorators: { data: [{
                 type: Input
             }], edit: [{
@@ -25591,7 +25591,7 @@ class EnrollmentFormComponent extends BaseSection {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EnrollmentFormComponent, deps: [{ token: RestService }, { token: i2$2.ActivatedRoute }, { token: StorageServiceService }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EnrollmentFormComponent, isStandalone: true, selector: "simpo-enrollment-form", inputs: { data: "data", edit: "edit", customClass: "customClass", delete: "delete", index: "index" }, usesInheritance: true, ngImport: i0, template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n    <div class=\"container py-5\" *ngIf=\"page === 'ENROLLMENT'\">\r\n        <div class=\"form-container\">\r\n            <div class=\"section-title\">Customer Information</div>\r\n\r\n            <div class=\"mb-3\">\r\n                <label for=\"fullName\" class=\"form-label\">Full Name <span class=\"required\">*</span></label>\r\n                <input type=\"text\" class=\"form-control custom-form-control\" id=\"fullName\" required\r\n                    [(ngModel)]=\"enrollementPayload.name\" (ngModelChange)=\"validateForm('NAME')\"\r\n                    [class.error-border]=\"!validObject['NAME']\">\r\n            </div>\r\n\r\n            <div class=\"mb-3\">\r\n                <label for=\"email\" class=\"form-label\">Email Address <span class=\"required\">*</span></label>\r\n                <input type=\"email\" class=\"form-control custom-form-control\" id=\"email\" required\r\n                    [(ngModel)]=\"enrollementPayload.mailId\" (ngModelChange)=\"validateForm('EMAIL')\"\r\n                    [class.error-border]=\"!validObject['EMAIL']\">\r\n            </div>\r\n\r\n            <div class=\"row mb-3\">\r\n                <div class=\"col-md-6\">\r\n                    <label for=\"mobile\" class=\"form-label\">Mobile <span class=\"required\">*</span></label>\r\n                    <input type=\"tel\" class=\"form-control custom-form-control\" id=\"mobile\" required\r\n                        [(ngModel)]=\"enrollementPayload.mobileNumber\" (ngModelChange)=\"validateForm('MOBILE')\"\r\n                        [class.error-border]=\"!validObject['MOBILE']\">\r\n                </div>\r\n                <div class=\"col-md-6\">\r\n                    <label for=\"dateOfBirth\" class=\"form-label\">Date of Birth <span class=\"required\">*</span></label>\r\n                    <input type=\"date\" class=\"form-control custom-form-control\" id=\"dateOfBirth\" required\r\n                        [(ngModel)]=\"enrollementPayload.dateOfBirth\" (ngModelChange)=\"validateForm('DOB')\"\r\n                        [class.error-border]=\"!validObject['DOB']\">\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Scheme Information -->\r\n            <div class=\"section-title\">Scheme Information</div>\r\n\r\n            <div class=\"row mb-3\">\r\n                <div class=\"col-md-6\">\r\n                    <label for=\"scheme\" class=\"form-label\">Scheme <span class=\"required\">*</span></label>\r\n                    <select class=\"form-select custom-form-select\" id=\"scheme\" required [(ngModel)]=\"selectedScheme\"\r\n                        (ngModelChange)=\"setMonthlyInstallmentAmount()\">\r\n                        <option [ngValue]=\"\">Select Scheme</option>\r\n                        <ng-container *ngFor=\"let scheme of schemesData\">\r\n                            <option [ngValue]=\"scheme\">{{scheme.schemeName ?? \"-\"}}</option>\r\n                        </ng-container>\r\n                    </select>\r\n                </div>\r\n                <div class=\"col-md-6\">\r\n                    <label for=\"monthlyAmount\" class=\"form-label\">Monthly Amount <span class=\"required\">*</span></label>\r\n                    <input type=\"number\" class=\"form-control custom-form-control\" id=\"monthlyAmount\" required disabled\r\n                        *ngIf=\"selectedScheme?.schemeType == 'INDIVIDUAL'\"\r\n                        [(ngModel)]=\"enrollementPayload.monthlyInstallmentAmount\">\r\n                    <select class=\"form-select custom-form-select\" id=\"subdivision\" required\r\n                        *ngIf=\"selectedScheme?.schemeType == 'GROUP'\"\r\n                        [(ngModel)]=\"enrollementPayload.enrolledGroup.schemeSlab\">\r\n                        <option [ngValue]=\"\">Select Amount Plan</option>\r\n                        <ng-container *ngFor=\"let slab of selectedScheme.schemeSlabs\">\r\n                            <option [ngValue]=\"slab\">{{slab.monthlyInstallmentAmount ?? \"-\"}}</option>\r\n                        </ng-container>\r\n                    </select>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Store Information -->\r\n            <div class=\"section-title\">Store Information</div>\r\n\r\n            <div class=\"row mb-3\">\r\n                <div class=\"col-md-6\">\r\n                    <label for=\"storeName\" class=\"form-label\">Store Name <span class=\"required\">*</span></label>\r\n                    <select class=\"form-select custom-form-select\" id=\"subdivision\" required\r\n                        [(ngModel)]=\"enrollementPayload.storeDetails\" (ngModelChange)=\"getStaffById()\">\r\n                        <option [ngValue]=\"\">Select Store</option>\r\n                        <ng-container *ngFor=\"let store of storeData\">\r\n                            <option [ngValue]=\"store\">{{store.storeName ?? \"-\"}}</option>\r\n                        </ng-container>\r\n                    </select>\r\n                </div>\r\n                <div class=\"col-md-6\">\r\n                    <label for=\"subdivision\" class=\"form-label\">Custodian</label>\r\n                    <select class=\"form-select custom-form-select\" id=\"subdivision\"\r\n                        [(ngModel)]=\"enrollementPayload.custodian\">\r\n                        <option [ngValue]=\"\">Select Custodian</option>\r\n                        <ng-container *ngFor=\"let staff of staffData\">\r\n                            <option [ngValue]=\"staff\">{{staff.personalInfo.name ?? \"-\"}}</option>\r\n                        </ng-container>\r\n                    </select>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Enter Your Address -->\r\n            <div class=\"section-title\">Enter Your Address</div>\r\n\r\n            <div class=\"mb-3\">\r\n                <label for=\"address\" class=\"form-label\">Address <span class=\"required\">*</span></label>\r\n                <input type=\"text\" class=\"form-control custom-form-control\" id=\"address\" required\r\n                    [(ngModel)]=\"enrollementPayload.addressDetails.addressLine\"\r\n                    (ngModelChange)=\"validateForm('ADDRESS')\" [class.error-border]=\"!validObject['ADDRESS']\">\r\n            </div>\r\n\r\n            <div class=\"row mb-3\">\r\n                <div class=\"col-md-6\">\r\n                    <label for=\"state\" class=\"form-label\">State <span class=\"required\">*</span></label>\r\n                    <select class=\"form-select custom-form-select\" [(ngModel)]=\"enrollementPayload.addressDetails.state\"\r\n                        (ngModelChange)=\"getCityByStateId()\">\r\n                        <option [ngValue]=\"\">Select State</option>\r\n                        <ng-container *ngFor=\"let state of stateData\">\r\n                            <option [ngValue]=\"state\">{{state.name ?? \"-\"}}</option>\r\n                        </ng-container>\r\n                    </select>\r\n                </div>\r\n                <div class=\"col-md-6\">\r\n                    <label for=\"city\" class=\"form-label\">City <span class=\"required\">*</span></label>\r\n                    <select class=\"form-select custom-form-select\" [(ngModel)]=\"enrollementPayload.addressDetails.city\">\r\n                        <option [ngValue]=\"\">Select City</option>\r\n                        <ng-container *ngFor=\"let city of cityData\">\r\n                            <option [ngValue]=\"city\">{{city.name ?? \"-\"}}</option>\r\n                        </ng-container>\r\n                    </select>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"row mb-3\">\r\n                <div class=\"col-md-6\">\r\n                    <label for=\"pincode\" class=\"form-label\">Pincode <span class=\"required\">*</span></label>\r\n                    <input type=\"number\" class=\"form-control custom-form-control\" id=\"pincode\" required\r\n                        [(ngModel)]=\"enrollementPayload.addressDetails.pinCode\"\r\n                        (ngModelChange)=\"validateForm('PINCODE')\" [class.error-border]=\"!validObject['PINCODE']\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"section-title\">Enter Nominee Details</div>\r\n\r\n            <div class=\"mb-3\">\r\n                <label for=\"nomineeName\" class=\"form-label\">Full Name of Nominee <span class=\"required\">*</span></label>\r\n                <input type=\"text\" class=\"form-control custom-form-control\" id=\"nomineeName\" required\r\n                    [(ngModel)]=\"enrollementPayload.nomineeDetails.nomineeName\"\r\n                    (ngModelChange)=\"validateForm('NOMINEE_NAME')\" [class.error-border]=\"!validObject['NOMINEE_NAME']\">\r\n            </div>\r\n\r\n            <div class=\"row mb-3\">\r\n                <div class=\"col-md-6\">\r\n                    <label for=\"relationship\" class=\"form-label\">Select Relationship <span\r\n                            class=\"required\">*</span></label>\r\n                    <select class=\"form-select custom-form-select\" id=\"relationship\" required\r\n                        [(ngModel)]=\"enrollementPayload.nomineeDetails.relationShip\">\r\n                        <!-- <option value=\"\">Select Relationship</option> -->\r\n                        <option value=\"Spouse\">Spouse</option>\r\n                        <option value=\"Child\">Child</option>\r\n                        <option value=\"Mother\">Mother</option>\r\n                        <option value=\"Father\">Father</option>\r\n                        <option value=\"Sibling\">Sibling</option>\r\n                    </select>\r\n                </div>\r\n                <div class=\"col-md-6\">\r\n                    <label for=\"nomineePhone\" class=\"form-label\">Mobile Number <span class=\"required\">*</span></label>\r\n\r\n                    <input type=\"number\" class=\"form-control custom-form-control\" id=\"nomineePhone\" required\r\n                        [(ngModel)]=\"enrollementPayload.nomineeDetails.mobile\"\r\n                        (ngModelChange)=\"validateForm('NOMINEE_MOBILE')\"\r\n                        [class.error-border]=\"!validObject['NOMINEE_MOBILE']\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"section-title\">Account Information</div>\r\n\r\n            <div class=\"row mb-3\">\r\n                <div class=\"col-md-6\">\r\n                    <label for=\"accountHolder\" class=\"form-label\">Account Holder Name <span\r\n                            class=\"required\">*</span></label>\r\n                    <input type=\"text\" class=\"form-control custom-form-control\" id=\"accountHolder\" required\r\n                        [(ngModel)]=\"enrollementPayload.bankDetails.accountHolderName\"\r\n                        (ngModelChange)=\"validateForm('ACCOUNT_HOLDER_NAME')\"\r\n                        [class.error-border]=\"!validObject['ACCOUNT_HOLDER_NAME']\">\r\n                </div>\r\n                <div class=\"col-md-6\">\r\n                    <label for=\"accountNumber\" class=\"form-label\">Account Number <span class=\"required\">*</span></label>\r\n                    <input type=\"text\" class=\"form-control custom-form-control\" id=\"accountNumber\" required\r\n                        [(ngModel)]=\"enrollementPayload.bankDetails.accountNumber\"\r\n                        (ngModelChange)=\"validateForm('ACCOUNT_NUMBER')\"\r\n                        [class.error-border]=\"!validObject['ACCOUNT_NUMBER']\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"row mb-3\">\r\n                <div class=\"col-md-6\">\r\n                    <label for=\"bankName\" class=\"form-label\">Bank Name <span class=\"required\">*</span></label>\r\n                    <input type=\"text\" class=\"form-control custom-form-control\" id=\"bankName\" required\r\n                        [(ngModel)]=\"enrollementPayload.bankDetails.bankName\"\r\n                        (ngModelChange)=\"validateForm('BANK_NAME')\" [class.error-border]=\"!validObject['BANK_NAME']\">\r\n                </div>\r\n                <div class=\"col-md-6\">\r\n                    <label for=\"ifscCode\" class=\"form-label\">IFSC Code <span class=\"required\">*</span></label>\r\n                    <input type=\"text\" class=\"form-control custom-form-control\" id=\"ifscCode\" required\r\n                        [(ngModel)]=\"enrollementPayload.bankDetails.ifscCode\"\r\n                        (ngModelChange)=\"validateForm('IFSC_CODE')\" [class.error-border]=\"!validObject['IFSC_CODE']\">\r\n                </div>\r\n            </div>\r\n            <div class=\"d-grid mt-4\">\r\n                <button type=\"submit\" class=\"btn btn-submit\" (click)=\"createEnrollment()\"\r\n                    [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\"\r\n                    [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\"\r\n                    [buttonData]=\"getButtonContent(0)\">Submit\r\n                    Enrollment</button>\r\n            </div>\r\n            <div *ngIf=\"validator\" [class.error-color]=\"validator\">Fill all mandatory fields to proceed*</div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Add this block in your Angular payment step (page === 'PAYMENT') -->\r\n    <!-- payment-simulation.component.html -->\r\n    <div class=\"container-fluid min-vh-100 d-flex align-items-center justify-content-center bg-light\"\r\n        *ngIf=\"page === 'PAYMENT'\">\r\n        <div class=\"payment-container\">\r\n\r\n            <!-- Header -->\r\n            <div class=\"payment-header mb-4\">\r\n                <div class=\"d-flex align-items-center justify-content-between\">\r\n                    <h1 class=\"payment-title\">Payment Method</h1>\r\n                    <span class=\"badge bg-success rounded-pill px-3 py-2\">Credit Card</span>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Credit Card -->\r\n            <div class=\"credit-card mb-4\">\r\n                <div class=\"card-inner\">\r\n                    <div class=\"card-shine\"></div>\r\n                    <div class=\"card-content\">\r\n                        <div class=\"d-flex align-items-center justify-content-between mb-4\">\r\n                            <div class=\"d-flex align-items-center gap-2\">\r\n                                <div class=\"visa-logo\"></div>\r\n                                <span class=\"visa-text\">VISA</span>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"cardholder-name mb-4\">\r\n                            turquoisecoyote\r\n                        </div>\r\n\r\n                        <div class=\"d-flex align-items-center justify-content-between\">\r\n                            <div class=\"card-dots\">\r\n                                <span class=\"dot\" *ngFor=\"let dot of [1,2,3,4,5,6,7,8,9,10,11,12]\"></span>\r\n                            </div>\r\n                            <span class=\"card-number\">1111</span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- OTP Section -->\r\n            <div class=\"otp-section mb-4\">\r\n                <p class=\"otp-label\">Enter OTP sent to your xxx xxx 4839</p>\r\n                <input type=\"text\" class=\"form-control otp-input\" placeholder=\"Enter OTP\">\r\n                <small class=\"text-muted mt-2 d-block\">Hint: OTP is 111000</small>\r\n            </div>\r\n\r\n            <!-- Simulation Buttons -->\r\n            <div class=\"row g-3 mb-4\">\r\n                <div class=\"col-6\">\r\n                    <button class=\"btn btn-danger btn-lg w-100 simulation-btn\" (click)=\"simulatePayment('failure')\"\r\n                        [disabled]=\"isProcessing\">\r\n                        Simulate failure\r\n                    </button>\r\n                </div>\r\n                <div class=\"col-6\">\r\n                    <button class=\"btn btn-success btn-lg w-100 simulation-btn\" (click)=\"simulatePayment('success')\"\r\n                        [disabled]=\"isProcessing\">\r\n                        Simulate success\r\n                    </button>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Processing State -->\r\n            <div *ngIf=\"isProcessing\" class=\"d-flex align-items-center justify-content-center py-3\">\r\n                <div class=\"spinner-border text-primary me-3\" role=\"status\" style=\"width: 1.5rem; height: 1.5rem;\">\r\n                </div>\r\n                <span class=\"text-muted\">Processing payment...</span>\r\n            </div>\r\n\r\n            <!-- Result Alert -->\r\n            <div *ngIf=\"result && showResult\" class=\"alert text-center result-alert\" [ngClass]=\"{\r\n             'alert-success': result.type === 'success',\r\n             'alert-danger': result.type === 'failure'\r\n           }\">\r\n                <strong>{{ result.title }}</strong> {{ result.message }}\r\n            </div>\r\n\r\n            <!-- Footer -->\r\n            <div class=\"text-center mt-4\">\r\n                <small class=\"text-muted\">\r\n                    Click buttons to simulate payment scenarios\r\n                </small>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n\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%}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.form-container{width:60%;border-radius:12px;padding:30px;margin:0 auto;box-shadow:0 2px 10px #0000001a}.section-title{font-size:18px;font-weight:600;margin-bottom:20px;margin-top:30px}.section-title:first-child{margin-top:0}.custom-form-control{border:1px solid #e2e8f0;border-radius:8px;padding:12px 16px;font-size:14px;color:#2d3748;font-weight:500;transition:all .2s}.custom-form-control:focus{background-color:#f7fafc;border-color:#667eea;box-shadow:0 0 0 .2rem #667eea40}.custom-form-control::placeholder{color:#a0aec0;font-weight:400}.custom-form-control.filled{background-color:#edf2f7;border-color:#cbd5e0;font-weight:600}.custom-form-select{background-color:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;padding:12px 16px;font-size:14px;color:#2d3748;font-weight:500;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e\");background-position:right 12px center;background-repeat:no-repeat;background-size:16px;appearance:none}.custom-form-select:focus{background-color:#f7fafc;border-color:#667eea;box-shadow:0 0 0 .2rem #667eea40}.custom-form-select.filled{background-color:#edf2f7;border-color:#cbd5e0;font-weight:600}.form-label{font-size:14px;font-weight:500;color:#718096;margin-bottom:8px}.required{color:#e53e3e}.phone-input-group{display:flex;gap:0}.phone-code{background-color:#f7fafc;border:1px solid #e2e8f0;border-radius:8px 0 0 8px;border-right:none;padding:12px 16px;display:flex;align-items:center;gap:8px;font-size:14px;color:#4a5568;font-weight:500}.phone-code:after{content:\"\\25bc\";color:#a0aec0;font-size:12px}.error-border{border:2px solid #e53e3e!important}.error-color{color:#e53e3e!important;font-weight:600;font-size:13px}.phone-input-group .custom-form-control{border-radius:0 8px 8px 0;border-left:none}.radio-group{display:flex;gap:12px;margin-top:12px}.radio-option{flex:1;background-color:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;padding:16px;cursor:pointer;transition:all .2s;position:relative}.radio-option:hover{background-color:#edf2f7}.radio-option.selected{background-color:#e6fffa;border-color:#38b2ac}.radio-option input[type=radio]{position:absolute;opacity:0;cursor:pointer}.radio-option .radio-circle{width:20px;height:20px;border:2px solid #cbd5e0;border-radius:50%;position:absolute;top:16px;right:16px;background:#fff}.radio-option.selected .radio-circle{border-color:#38b2ac}.radio-option.selected .radio-circle:after{content:\"\";width:10px;height:10px;background:#38b2ac;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.radio-option label{font-size:14px;font-weight:500;color:#4a5568;cursor:pointer;display:block;margin-bottom:0;padding-right:30px}.btn-submit{border:none;padding:14px 30px;border-radius:8px;font-weight:600;font-size:16px;transition:transform .2s}.btn-submit:hover{transform:translateY(-1px);color:#fff}.mb-3{margin-bottom:1rem!important}.mt-4{margin-top:1.5rem!important}.payment-card{max-width:500px;width:100%;border-radius:15px;overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2}.card-header{background:linear-gradient(135deg,#007bff,#0056b3)!important;border-bottom:none}.payment-btn{position:relative;overflow:hidden;border:none;border-radius:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;transition:all .3s ease;box-shadow:0 4px 15px #0003}.payment-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px #0000004d}.payment-btn:active:not(:disabled){transform:translateY(0)}.payment-btn:disabled{opacity:.6;cursor:not-allowed;transform:none!important}.btn-overlay{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s}.payment-btn:hover:not(:disabled) .btn-overlay{left:100%}.btn-success{background:linear-gradient(45deg,#28a745,#20c997);border-color:#28a745}.btn-success:hover:not(:disabled){background:linear-gradient(45deg,#218838,#1aa085);border-color:#1e7e34}.btn-danger{background:linear-gradient(45deg,#dc3545,#e74c3c);border-color:#dc3545}.btn-danger:hover:not(:disabled){background:linear-gradient(45deg,#c82333,#d62c1a);border-color:#bd2130}.alert{border:none;border-radius:10px;font-weight:500;box-shadow:0 4px 15px #0000001a}.alert-success{background:linear-gradient(45deg,#d4edda,#c3e6cb);color:#155724}.alert-danger{background:linear-gradient(45deg,#f8d7da,#f5c6cb);color:#721c24}.min-vh-100{min-height:100vh}.card-footer{background:#f8f9facc!important;border-top:1px solid rgba(0,0,0,.125)}body{background:linear-gradient(135deg,#667eea,#764ba2);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.alert.show{animation:fadeInUp .3s ease-out}.spinner-border{width:1.5rem;height:1.5rem}.payment-container{width:100%;max-width:430px;padding:20px}.payment-title{font-size:2rem;font-weight:700;color:#333;margin:0}.credit-card{perspective:1000px}.card-inner{background:linear-gradient(135deg,#2d3748,#1a202c);border-radius:20px;padding:30px;position:relative;overflow:hidden;box-shadow:0 20px 40px #0000004d;color:#fff;min-height:200px}.card-shine{position:absolute;inset:0;background:linear-gradient(135deg,transparent 0%,rgba(255,255,255,.1) 45%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.1) 55%,transparent 100%);pointer-events:none}.card-content{position:relative;z-index:2}.visa-logo{width:32px;height:20px;background:#fff;border-radius:3px}.visa-text{font-weight:700;font-size:1.2rem;letter-spacing:2px}.cardholder-name{font-size:1.1rem;letter-spacing:1px;text-transform:lowercase}.card-dots{display:flex;gap:4px}.dot{width:8px;height:8px;background:#fff;border-radius:50%;display:inline-block}.card-number{font-family:Courier New,monospace;font-size:1.3rem;font-weight:700;letter-spacing:3px}.otp-section{margin:30px 0}.otp-label{color:#6c757d;margin-bottom:12px;font-size:.95rem}.otp-input{padding:16px 20px;border-radius:12px;border:2px solid #e9ecef;font-size:1.1rem;transition:all .3s ease}.otp-input:focus{border-color:#007bff;box-shadow:0 0 0 .2rem #007bff40}.simulation-btn{padding:16px 20px;border-radius:12px;font-weight:700;font-size:1rem;transition:all .3s ease;border:none;white-space:nowrap}.simulation-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px #00000026}.simulation-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-danger.simulation-btn{background:linear-gradient(135deg,#dc3545,#c82333)}.btn-success.simulation-btn{background:linear-gradient(135deg,#28a745,#20c997)}.result-alert{border-radius:12px;padding:16px 20px;border:none;font-weight:500;animation:slideInUp .3s ease-out}.alert-success{background:linear-gradient(135deg,#d4edda,#c3e6cb);color:#155724;border-left:4px solid #28a745}.alert-danger{background:linear-gradient(135deg,#f8d7da,#f5c6cb);color:#721c24;border-left:4px solid #dc3545}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.payment-container{padding:15px}.payment-title{font-size:1.5rem}.card-inner{padding:25px;min-height:180px}.simulation-btn{padding:14px 16px;font-size:.9rem}.form-container{width:100%!important}}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: "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: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId", "itemIndex"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EnrollmentFormComponent, isStandalone: true, selector: "simpo-enrollment-form", inputs: { data: "data", edit: "edit", customClass: "customClass", delete: "delete", index: "index" }, usesInheritance: true, ngImport: i0, template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\n    <div class=\"container py-5\" *ngIf=\"page === 'ENROLLMENT'\">\n        <div class=\"form-container\">\n            <div class=\"section-title\">Customer Information</div>\n\n            <div class=\"mb-3\">\n                <label for=\"fullName\" class=\"form-label\">Full Name <span class=\"required\">*</span></label>\n                <input type=\"text\" class=\"form-control custom-form-control\" id=\"fullName\" required\n                    [(ngModel)]=\"enrollementPayload.name\" (ngModelChange)=\"validateForm('NAME')\"\n                    [class.error-border]=\"!validObject['NAME']\">\n            </div>\n\n            <div class=\"mb-3\">\n                <label for=\"email\" class=\"form-label\">Email Address <span class=\"required\">*</span></label>\n                <input type=\"email\" class=\"form-control custom-form-control\" id=\"email\" required\n                    [(ngModel)]=\"enrollementPayload.mailId\" (ngModelChange)=\"validateForm('EMAIL')\"\n                    [class.error-border]=\"!validObject['EMAIL']\">\n            </div>\n\n            <div class=\"row mb-3\">\n                <div class=\"col-md-6\">\n                    <label for=\"mobile\" class=\"form-label\">Mobile <span class=\"required\">*</span></label>\n                    <input type=\"tel\" class=\"form-control custom-form-control\" id=\"mobile\" required\n                        [(ngModel)]=\"enrollementPayload.mobileNumber\" (ngModelChange)=\"validateForm('MOBILE')\"\n                        [class.error-border]=\"!validObject['MOBILE']\">\n                </div>\n                <div class=\"col-md-6\">\n                    <label for=\"dateOfBirth\" class=\"form-label\">Date of Birth <span class=\"required\">*</span></label>\n                    <input type=\"date\" class=\"form-control custom-form-control\" id=\"dateOfBirth\" required\n                        [(ngModel)]=\"enrollementPayload.dateOfBirth\" (ngModelChange)=\"validateForm('DOB')\"\n                        [class.error-border]=\"!validObject['DOB']\">\n                </div>\n            </div>\n\n            <!-- Scheme Information -->\n            <div class=\"section-title\">Scheme Information</div>\n\n            <div class=\"row mb-3\">\n                <div class=\"col-md-6\">\n                    <label for=\"scheme\" class=\"form-label\">Scheme <span class=\"required\">*</span></label>\n                    <select class=\"form-select custom-form-select\" id=\"scheme\" required [(ngModel)]=\"selectedScheme\"\n                        (ngModelChange)=\"setMonthlyInstallmentAmount()\">\n                        <option [ngValue]=\"\">Select Scheme</option>\n                        <ng-container *ngFor=\"let scheme of schemesData\">\n                            <option [ngValue]=\"scheme\">{{scheme.schemeName ?? \"-\"}}</option>\n                        </ng-container>\n                    </select>\n                </div>\n                <div class=\"col-md-6\">\n                    <label for=\"monthlyAmount\" class=\"form-label\">Monthly Amount <span class=\"required\">*</span></label>\n                    <input type=\"number\" class=\"form-control custom-form-control\" id=\"monthlyAmount\" required disabled\n                        *ngIf=\"selectedScheme?.schemeType == 'INDIVIDUAL'\"\n                        [(ngModel)]=\"enrollementPayload.monthlyInstallmentAmount\">\n                    <select class=\"form-select custom-form-select\" id=\"subdivision\" required\n                        *ngIf=\"selectedScheme?.schemeType == 'GROUP'\"\n                        [(ngModel)]=\"enrollementPayload.enrolledGroup.schemeSlab\">\n                        <option [ngValue]=\"\">Select Amount Plan</option>\n                        <ng-container *ngFor=\"let slab of selectedScheme.schemeSlabs\">\n                            <option [ngValue]=\"slab\">{{slab.monthlyInstallmentAmount ?? \"-\"}}</option>\n                        </ng-container>\n                    </select>\n                </div>\n            </div>\n\n            <!-- Store Information -->\n            <div class=\"section-title\">Store Information</div>\n\n            <div class=\"row mb-3\">\n                <div class=\"col-md-6\">\n                    <label for=\"storeName\" class=\"form-label\">Store Name <span class=\"required\">*</span></label>\n                    <select class=\"form-select custom-form-select\" id=\"subdivision\" required\n                        [(ngModel)]=\"enrollementPayload.storeDetails\" (ngModelChange)=\"getStaffById()\">\n                        <option [ngValue]=\"\">Select Store</option>\n                        <ng-container *ngFor=\"let store of storeData\">\n                            <option [ngValue]=\"store\">{{store.storeName ?? \"-\"}}</option>\n                        </ng-container>\n                    </select>\n                </div>\n                <div class=\"col-md-6\">\n                    <label for=\"subdivision\" class=\"form-label\">Custodian</label>\n                    <select class=\"form-select custom-form-select\" id=\"subdivision\"\n                        [(ngModel)]=\"enrollementPayload.custodian\">\n                        <option [ngValue]=\"\">Select Custodian</option>\n                        <ng-container *ngFor=\"let staff of staffData\">\n                            <option [ngValue]=\"staff\">{{staff.personalInfo.name ?? \"-\"}}</option>\n                        </ng-container>\n                    </select>\n                </div>\n            </div>\n\n            <!-- Enter Your Address -->\n            <div class=\"section-title\">Enter Your Address</div>\n\n            <div class=\"mb-3\">\n                <label for=\"address\" class=\"form-label\">Address <span class=\"required\">*</span></label>\n                <input type=\"text\" class=\"form-control custom-form-control\" id=\"address\" required\n                    [(ngModel)]=\"enrollementPayload.addressDetails.addressLine\"\n                    (ngModelChange)=\"validateForm('ADDRESS')\" [class.error-border]=\"!validObject['ADDRESS']\">\n            </div>\n\n            <div class=\"row mb-3\">\n                <div class=\"col-md-6\">\n                    <label for=\"state\" class=\"form-label\">State <span class=\"required\">*</span></label>\n                    <select class=\"form-select custom-form-select\" [(ngModel)]=\"enrollementPayload.addressDetails.state\"\n                        (ngModelChange)=\"getCityByStateId()\">\n                        <option [ngValue]=\"\">Select State</option>\n                        <ng-container *ngFor=\"let state of stateData\">\n                            <option [ngValue]=\"state\">{{state.name ?? \"-\"}}</option>\n                        </ng-container>\n                    </select>\n                </div>\n                <div class=\"col-md-6\">\n                    <label for=\"city\" class=\"form-label\">City <span class=\"required\">*</span></label>\n                    <select class=\"form-select custom-form-select\" [(ngModel)]=\"enrollementPayload.addressDetails.city\">\n                        <option [ngValue]=\"\">Select City</option>\n                        <ng-container *ngFor=\"let city of cityData\">\n                            <option [ngValue]=\"city\">{{city.name ?? \"-\"}}</option>\n                        </ng-container>\n                    </select>\n                </div>\n            </div>\n\n            <div class=\"row mb-3\">\n                <div class=\"col-md-6\">\n                    <label for=\"pincode\" class=\"form-label\">Pincode <span class=\"required\">*</span></label>\n                    <input type=\"number\" class=\"form-control custom-form-control\" id=\"pincode\" required\n                        [(ngModel)]=\"enrollementPayload.addressDetails.pinCode\"\n                        (ngModelChange)=\"validateForm('PINCODE')\" [class.error-border]=\"!validObject['PINCODE']\">\n                </div>\n            </div>\n\n            <div class=\"section-title\">Enter Nominee Details</div>\n\n            <div class=\"mb-3\">\n                <label for=\"nomineeName\" class=\"form-label\">Full Name of Nominee <span class=\"required\">*</span></label>\n                <input type=\"text\" class=\"form-control custom-form-control\" id=\"nomineeName\" required\n                    [(ngModel)]=\"enrollementPayload.nomineeDetails.nomineeName\"\n                    (ngModelChange)=\"validateForm('NOMINEE_NAME')\" [class.error-border]=\"!validObject['NOMINEE_NAME']\">\n            </div>\n\n            <div class=\"row mb-3\">\n                <div class=\"col-md-6\">\n                    <label for=\"relationship\" class=\"form-label\">Select Relationship <span\n                            class=\"required\">*</span></label>\n                    <select class=\"form-select custom-form-select\" id=\"relationship\" required\n                        [(ngModel)]=\"enrollementPayload.nomineeDetails.relationShip\">\n                        <!-- <option value=\"\">Select Relationship</option> -->\n                        <option value=\"Spouse\">Spouse</option>\n                        <option value=\"Child\">Child</option>\n                        <option value=\"Mother\">Mother</option>\n                        <option value=\"Father\">Father</option>\n                        <option value=\"Sibling\">Sibling</option>\n                    </select>\n                </div>\n                <div class=\"col-md-6\">\n                    <label for=\"nomineePhone\" class=\"form-label\">Mobile Number <span class=\"required\">*</span></label>\n\n                    <input type=\"number\" class=\"form-control custom-form-control\" id=\"nomineePhone\" required\n                        [(ngModel)]=\"enrollementPayload.nomineeDetails.mobile\"\n                        (ngModelChange)=\"validateForm('NOMINEE_MOBILE')\"\n                        [class.error-border]=\"!validObject['NOMINEE_MOBILE']\">\n                </div>\n            </div>\n\n            <div class=\"section-title\">Account Information</div>\n\n            <div class=\"row mb-3\">\n                <div class=\"col-md-6\">\n                    <label for=\"accountHolder\" class=\"form-label\">Account Holder Name <span\n                            class=\"required\">*</span></label>\n                    <input type=\"text\" class=\"form-control custom-form-control\" id=\"accountHolder\" required\n                        [(ngModel)]=\"enrollementPayload.bankDetails.accountHolderName\"\n                        (ngModelChange)=\"validateForm('ACCOUNT_HOLDER_NAME')\"\n                        [class.error-border]=\"!validObject['ACCOUNT_HOLDER_NAME']\">\n                </div>\n                <div class=\"col-md-6\">\n                    <label for=\"accountNumber\" class=\"form-label\">Account Number <span class=\"required\">*</span></label>\n                    <input type=\"text\" class=\"form-control custom-form-control\" id=\"accountNumber\" required\n                        [(ngModel)]=\"enrollementPayload.bankDetails.accountNumber\"\n                        (ngModelChange)=\"validateForm('ACCOUNT_NUMBER')\"\n                        [class.error-border]=\"!validObject['ACCOUNT_NUMBER']\">\n                </div>\n            </div>\n\n            <div class=\"row mb-3\">\n                <div class=\"col-md-6\">\n                    <label for=\"bankName\" class=\"form-label\">Bank Name <span class=\"required\">*</span></label>\n                    <input type=\"text\" class=\"form-control custom-form-control\" id=\"bankName\" required\n                        [(ngModel)]=\"enrollementPayload.bankDetails.bankName\"\n                        (ngModelChange)=\"validateForm('BANK_NAME')\" [class.error-border]=\"!validObject['BANK_NAME']\">\n                </div>\n                <div class=\"col-md-6\">\n                    <label for=\"ifscCode\" class=\"form-label\">IFSC Code <span class=\"required\">*</span></label>\n                    <input type=\"text\" class=\"form-control custom-form-control\" id=\"ifscCode\" required\n                        [(ngModel)]=\"enrollementPayload.bankDetails.ifscCode\"\n                        (ngModelChange)=\"validateForm('IFSC_CODE')\" [class.error-border]=\"!validObject['IFSC_CODE']\">\n                </div>\n            </div>\n            <div class=\"d-grid mt-4\">\n                <button type=\"submit\" class=\"btn btn-submit\" (click)=\"createEnrollment()\"\n                    [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\"\n                    [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\"\n                    [buttonData]=\"getButtonContent(0)\">Submit\n                    Enrollment</button>\n            </div>\n            <div *ngIf=\"validator\" [class.error-color]=\"validator\">Fill all mandatory fields to proceed*</div>\n        </div>\n    </div>\n\n    <!-- Add this block in your Angular payment step (page === 'PAYMENT') -->\n    <!-- payment-simulation.component.html -->\n    <div class=\"container-fluid min-vh-100 d-flex align-items-center justify-content-center bg-light\"\n        *ngIf=\"page === 'PAYMENT'\">\n        <div class=\"payment-container\">\n\n            <!-- Header -->\n            <div class=\"payment-header mb-4\">\n                <div class=\"d-flex align-items-center justify-content-between\">\n                    <h1 class=\"payment-title\">Payment Method</h1>\n                    <span class=\"badge bg-success rounded-pill px-3 py-2\">Credit Card</span>\n                </div>\n            </div>\n\n            <!-- Credit Card -->\n            <div class=\"credit-card mb-4\">\n                <div class=\"card-inner\">\n                    <div class=\"card-shine\"></div>\n                    <div class=\"card-content\">\n                        <div class=\"d-flex align-items-center justify-content-between mb-4\">\n                            <div class=\"d-flex align-items-center gap-2\">\n                                <div class=\"visa-logo\"></div>\n                                <span class=\"visa-text\">VISA</span>\n                            </div>\n                        </div>\n\n                        <div class=\"cardholder-name mb-4\">\n                            turquoisecoyote\n                        </div>\n\n                        <div class=\"d-flex align-items-center justify-content-between\">\n                            <div class=\"card-dots\">\n                                <span class=\"dot\" *ngFor=\"let dot of [1,2,3,4,5,6,7,8,9,10,11,12]\"></span>\n                            </div>\n                            <span class=\"card-number\">1111</span>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <!-- OTP Section -->\n            <div class=\"otp-section mb-4\">\n                <p class=\"otp-label\">Enter OTP sent to your xxx xxx 4839</p>\n                <input type=\"text\" class=\"form-control otp-input\" placeholder=\"Enter OTP\">\n                <small class=\"text-muted mt-2 d-block\">Hint: OTP is 111000</small>\n            </div>\n\n            <!-- Simulation Buttons -->\n            <div class=\"row g-3 mb-4\">\n                <div class=\"col-6\">\n                    <button class=\"btn btn-danger btn-lg w-100 simulation-btn\" (click)=\"simulatePayment('failure')\"\n                        [disabled]=\"isProcessing\">\n                        Simulate failure\n                    </button>\n                </div>\n                <div class=\"col-6\">\n                    <button class=\"btn btn-success btn-lg w-100 simulation-btn\" (click)=\"simulatePayment('success')\"\n                        [disabled]=\"isProcessing\">\n                        Simulate success\n                    </button>\n                </div>\n            </div>\n\n            <!-- Processing State -->\n            <div *ngIf=\"isProcessing\" class=\"d-flex align-items-center justify-content-center py-3\">\n                <div class=\"spinner-border text-primary me-3\" role=\"status\" style=\"width: 1.5rem; height: 1.5rem;\">\n                </div>\n                <span class=\"text-muted\">Processing payment...</span>\n            </div>\n\n            <!-- Result Alert -->\n            <div *ngIf=\"result && showResult\" class=\"alert text-center result-alert\" [ngClass]=\"{\n             'alert-success': result.type === 'success',\n             'alert-danger': result.type === 'failure'\n           }\">\n                <strong>{{ result.title }}</strong> {{ result.message }}\n            </div>\n\n            <!-- Footer -->\n            <div class=\"text-center mt-4\">\n                <small class=\"text-muted\">\n                    Click buttons to simulate payment scenarios\n                </small>\n            </div>\n\n        </div>\n    </div>\n\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.form-container{width:60%;border-radius:12px;padding:30px;margin:0 auto;box-shadow:0 2px 10px #0000001a}.section-title{font-size:18px;font-weight:600;margin-bottom:20px;margin-top:30px}.section-title:first-child{margin-top:0}.custom-form-control{border:1px solid #e2e8f0;border-radius:8px;padding:12px 16px;font-size:14px;color:#2d3748;font-weight:500;transition:all .2s}.custom-form-control:focus{background-color:#f7fafc;border-color:#667eea;box-shadow:0 0 0 .2rem #667eea40}.custom-form-control::placeholder{color:#a0aec0;font-weight:400}.custom-form-control.filled{background-color:#edf2f7;border-color:#cbd5e0;font-weight:600}.custom-form-select{background-color:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;padding:12px 16px;font-size:14px;color:#2d3748;font-weight:500;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e\");background-position:right 12px center;background-repeat:no-repeat;background-size:16px;appearance:none}.custom-form-select:focus{background-color:#f7fafc;border-color:#667eea;box-shadow:0 0 0 .2rem #667eea40}.custom-form-select.filled{background-color:#edf2f7;border-color:#cbd5e0;font-weight:600}.form-label{font-size:14px;font-weight:500;color:#718096;margin-bottom:8px}.required{color:#e53e3e}.phone-input-group{display:flex;gap:0}.phone-code{background-color:#f7fafc;border:1px solid #e2e8f0;border-radius:8px 0 0 8px;border-right:none;padding:12px 16px;display:flex;align-items:center;gap:8px;font-size:14px;color:#4a5568;font-weight:500}.phone-code:after{content:\"\\25bc\";color:#a0aec0;font-size:12px}.error-border{border:2px solid #e53e3e!important}.error-color{color:#e53e3e!important;font-weight:600;font-size:13px}.phone-input-group .custom-form-control{border-radius:0 8px 8px 0;border-left:none}.radio-group{display:flex;gap:12px;margin-top:12px}.radio-option{flex:1;background-color:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;padding:16px;cursor:pointer;transition:all .2s;position:relative}.radio-option:hover{background-color:#edf2f7}.radio-option.selected{background-color:#e6fffa;border-color:#38b2ac}.radio-option input[type=radio]{position:absolute;opacity:0;cursor:pointer}.radio-option .radio-circle{width:20px;height:20px;border:2px solid #cbd5e0;border-radius:50%;position:absolute;top:16px;right:16px;background:#fff}.radio-option.selected .radio-circle{border-color:#38b2ac}.radio-option.selected .radio-circle:after{content:\"\";width:10px;height:10px;background:#38b2ac;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.radio-option label{font-size:14px;font-weight:500;color:#4a5568;cursor:pointer;display:block;margin-bottom:0;padding-right:30px}.btn-submit{border:none;padding:14px 30px;border-radius:8px;font-weight:600;font-size:16px;transition:transform .2s}.btn-submit:hover{transform:translateY(-1px);color:#fff}.mb-3{margin-bottom:1rem!important}.mt-4{margin-top:1.5rem!important}.payment-card{max-width:500px;width:100%;border-radius:15px;overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2}.card-header{background:linear-gradient(135deg,#007bff,#0056b3)!important;border-bottom:none}.payment-btn{position:relative;overflow:hidden;border:none;border-radius:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;transition:all .3s ease;box-shadow:0 4px 15px #0003}.payment-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px #0000004d}.payment-btn:active:not(:disabled){transform:translateY(0)}.payment-btn:disabled{opacity:.6;cursor:not-allowed;transform:none!important}.btn-overlay{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s}.payment-btn:hover:not(:disabled) .btn-overlay{left:100%}.btn-success{background:linear-gradient(45deg,#28a745,#20c997);border-color:#28a745}.btn-success:hover:not(:disabled){background:linear-gradient(45deg,#218838,#1aa085);border-color:#1e7e34}.btn-danger{background:linear-gradient(45deg,#dc3545,#e74c3c);border-color:#dc3545}.btn-danger:hover:not(:disabled){background:linear-gradient(45deg,#c82333,#d62c1a);border-color:#bd2130}.alert{border:none;border-radius:10px;font-weight:500;box-shadow:0 4px 15px #0000001a}.alert-success{background:linear-gradient(45deg,#d4edda,#c3e6cb);color:#155724}.alert-danger{background:linear-gradient(45deg,#f8d7da,#f5c6cb);color:#721c24}.min-vh-100{min-height:100vh}.card-footer{background:#f8f9facc!important;border-top:1px solid rgba(0,0,0,.125)}body{background:linear-gradient(135deg,#667eea,#764ba2);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.alert.show{animation:fadeInUp .3s ease-out}.spinner-border{width:1.5rem;height:1.5rem}.payment-container{width:100%;max-width:430px;padding:20px}.payment-title{font-size:2rem;font-weight:700;color:#333;margin:0}.credit-card{perspective:1000px}.card-inner{background:linear-gradient(135deg,#2d3748,#1a202c);border-radius:20px;padding:30px;position:relative;overflow:hidden;box-shadow:0 20px 40px #0000004d;color:#fff;min-height:200px}.card-shine{position:absolute;inset:0;background:linear-gradient(135deg,transparent 0%,rgba(255,255,255,.1) 45%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.1) 55%,transparent 100%);pointer-events:none}.card-content{position:relative;z-index:2}.visa-logo{width:32px;height:20px;background:#fff;border-radius:3px}.visa-text{font-weight:700;font-size:1.2rem;letter-spacing:2px}.cardholder-name{font-size:1.1rem;letter-spacing:1px;text-transform:lowercase}.card-dots{display:flex;gap:4px}.dot{width:8px;height:8px;background:#fff;border-radius:50%;display:inline-block}.card-number{font-family:Courier New,monospace;font-size:1.3rem;font-weight:700;letter-spacing:3px}.otp-section{margin:30px 0}.otp-label{color:#6c757d;margin-bottom:12px;font-size:.95rem}.otp-input{padding:16px 20px;border-radius:12px;border:2px solid #e9ecef;font-size:1.1rem;transition:all .3s ease}.otp-input:focus{border-color:#007bff;box-shadow:0 0 0 .2rem #007bff40}.simulation-btn{padding:16px 20px;border-radius:12px;font-weight:700;font-size:1rem;transition:all .3s ease;border:none;white-space:nowrap}.simulation-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px #00000026}.simulation-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-danger.simulation-btn{background:linear-gradient(135deg,#dc3545,#c82333)}.btn-success.simulation-btn{background:linear-gradient(135deg,#28a745,#20c997)}.result-alert{border-radius:12px;padding:16px 20px;border:none;font-weight:500;animation:slideInUp .3s ease-out}.alert-success{background:linear-gradient(135deg,#d4edda,#c3e6cb);color:#155724;border-left:4px solid #28a745}.alert-danger{background:linear-gradient(135deg,#f8d7da,#f5c6cb);color:#721c24;border-left:4px solid #dc3545}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.payment-container{padding:15px}.payment-title{font-size:1.5rem}.card-inner{padding:25px;min-height:180px}.simulation-btn{padding:14px 16px;font-size:.9rem}.form-container{width:100%!important}}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: "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: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId", "itemIndex"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EnrollmentFormComponent, decorators: [{
             type: Component,
@@ -25610,7 +25610,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SpacingHorizontalDirective,
                         ButtonEditorDirective,
                         MatIcon
-                    ], template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n    <div class=\"container py-5\" *ngIf=\"page === 'ENROLLMENT'\">\r\n        <div class=\"form-container\">\r\n            <div class=\"section-title\">Customer Information</div>\r\n\r\n            <div class=\"mb-3\">\r\n                <label for=\"fullName\" class=\"form-label\">Full Name <span class=\"required\">*</span></label>\r\n                <input type=\"text\" class=\"form-control custom-form-control\" id=\"fullName\" required\r\n                    [(ngModel)]=\"enrollementPayload.name\" (ngModelChange)=\"validateForm('NAME')\"\r\n                    [class.error-border]=\"!validObject['NAME']\">\r\n            </div>\r\n\r\n            <div class=\"mb-3\">\r\n                <label for=\"email\" class=\"form-label\">Email Address <span class=\"required\">*</span></label>\r\n                <input type=\"email\" class=\"form-control custom-form-control\" id=\"email\" required\r\n                    [(ngModel)]=\"enrollementPayload.mailId\" (ngModelChange)=\"validateForm('EMAIL')\"\r\n                    [class.error-border]=\"!validObject['EMAIL']\">\r\n            </div>\r\n\r\n            <div class=\"row mb-3\">\r\n                <div class=\"col-md-6\">\r\n                    <label for=\"mobile\" class=\"form-label\">Mobile <span class=\"required\">*</span></label>\r\n                    <input type=\"tel\" class=\"form-control custom-form-control\" id=\"mobile\" required\r\n                        [(ngModel)]=\"enrollementPayload.mobileNumber\" (ngModelChange)=\"validateForm('MOBILE')\"\r\n                        [class.error-border]=\"!validObject['MOBILE']\">\r\n                </div>\r\n                <div class=\"col-md-6\">\r\n                    <label for=\"dateOfBirth\" class=\"form-label\">Date of Birth <span class=\"required\">*</span></label>\r\n                    <input type=\"date\" class=\"form-control custom-form-control\" id=\"dateOfBirth\" required\r\n                        [(ngModel)]=\"enrollementPayload.dateOfBirth\" (ngModelChange)=\"validateForm('DOB')\"\r\n                        [class.error-border]=\"!validObject['DOB']\">\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Scheme Information -->\r\n            <div class=\"section-title\">Scheme Information</div>\r\n\r\n            <div class=\"row mb-3\">\r\n                <div class=\"col-md-6\">\r\n                    <label for=\"scheme\" class=\"form-label\">Scheme <span class=\"required\">*</span></label>\r\n                    <select class=\"form-select custom-form-select\" id=\"scheme\" required [(ngModel)]=\"selectedScheme\"\r\n                        (ngModelChange)=\"setMonthlyInstallmentAmount()\">\r\n                        <option [ngValue]=\"\">Select Scheme</option>\r\n                        <ng-container *ngFor=\"let scheme of schemesData\">\r\n                            <option [ngValue]=\"scheme\">{{scheme.schemeName ?? \"-\"}}</option>\r\n                        </ng-container>\r\n                    </select>\r\n                </div>\r\n                <div class=\"col-md-6\">\r\n                    <label for=\"monthlyAmount\" class=\"form-label\">Monthly Amount <span class=\"required\">*</span></label>\r\n                    <input type=\"number\" class=\"form-control custom-form-control\" id=\"monthlyAmount\" required disabled\r\n                        *ngIf=\"selectedScheme?.schemeType == 'INDIVIDUAL'\"\r\n                        [(ngModel)]=\"enrollementPayload.monthlyInstallmentAmount\">\r\n                    <select class=\"form-select custom-form-select\" id=\"subdivision\" required\r\n                        *ngIf=\"selectedScheme?.schemeType == 'GROUP'\"\r\n                        [(ngModel)]=\"enrollementPayload.enrolledGroup.schemeSlab\">\r\n                        <option [ngValue]=\"\">Select Amount Plan</option>\r\n                        <ng-container *ngFor=\"let slab of selectedScheme.schemeSlabs\">\r\n                            <option [ngValue]=\"slab\">{{slab.monthlyInstallmentAmount ?? \"-\"}}</option>\r\n                        </ng-container>\r\n                    </select>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Store Information -->\r\n            <div class=\"section-title\">Store Information</div>\r\n\r\n            <div class=\"row mb-3\">\r\n                <div class=\"col-md-6\">\r\n                    <label for=\"storeName\" class=\"form-label\">Store Name <span class=\"required\">*</span></label>\r\n                    <select class=\"form-select custom-form-select\" id=\"subdivision\" required\r\n                        [(ngModel)]=\"enrollementPayload.storeDetails\" (ngModelChange)=\"getStaffById()\">\r\n                        <option [ngValue]=\"\">Select Store</option>\r\n                        <ng-container *ngFor=\"let store of storeData\">\r\n                            <option [ngValue]=\"store\">{{store.storeName ?? \"-\"}}</option>\r\n                        </ng-container>\r\n                    </select>\r\n                </div>\r\n                <div class=\"col-md-6\">\r\n                    <label for=\"subdivision\" class=\"form-label\">Custodian</label>\r\n                    <select class=\"form-select custom-form-select\" id=\"subdivision\"\r\n                        [(ngModel)]=\"enrollementPayload.custodian\">\r\n                        <option [ngValue]=\"\">Select Custodian</option>\r\n                        <ng-container *ngFor=\"let staff of staffData\">\r\n                            <option [ngValue]=\"staff\">{{staff.personalInfo.name ?? \"-\"}}</option>\r\n                        </ng-container>\r\n                    </select>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Enter Your Address -->\r\n            <div class=\"section-title\">Enter Your Address</div>\r\n\r\n            <div class=\"mb-3\">\r\n                <label for=\"address\" class=\"form-label\">Address <span class=\"required\">*</span></label>\r\n                <input type=\"text\" class=\"form-control custom-form-control\" id=\"address\" required\r\n                    [(ngModel)]=\"enrollementPayload.addressDetails.addressLine\"\r\n                    (ngModelChange)=\"validateForm('ADDRESS')\" [class.error-border]=\"!validObject['ADDRESS']\">\r\n            </div>\r\n\r\n            <div class=\"row mb-3\">\r\n                <div class=\"col-md-6\">\r\n                    <label for=\"state\" class=\"form-label\">State <span class=\"required\">*</span></label>\r\n                    <select class=\"form-select custom-form-select\" [(ngModel)]=\"enrollementPayload.addressDetails.state\"\r\n                        (ngModelChange)=\"getCityByStateId()\">\r\n                        <option [ngValue]=\"\">Select State</option>\r\n                        <ng-container *ngFor=\"let state of stateData\">\r\n                            <option [ngValue]=\"state\">{{state.name ?? \"-\"}}</option>\r\n                        </ng-container>\r\n                    </select>\r\n                </div>\r\n                <div class=\"col-md-6\">\r\n                    <label for=\"city\" class=\"form-label\">City <span class=\"required\">*</span></label>\r\n                    <select class=\"form-select custom-form-select\" [(ngModel)]=\"enrollementPayload.addressDetails.city\">\r\n                        <option [ngValue]=\"\">Select City</option>\r\n                        <ng-container *ngFor=\"let city of cityData\">\r\n                            <option [ngValue]=\"city\">{{city.name ?? \"-\"}}</option>\r\n                        </ng-container>\r\n                    </select>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"row mb-3\">\r\n                <div class=\"col-md-6\">\r\n                    <label for=\"pincode\" class=\"form-label\">Pincode <span class=\"required\">*</span></label>\r\n                    <input type=\"number\" class=\"form-control custom-form-control\" id=\"pincode\" required\r\n                        [(ngModel)]=\"enrollementPayload.addressDetails.pinCode\"\r\n                        (ngModelChange)=\"validateForm('PINCODE')\" [class.error-border]=\"!validObject['PINCODE']\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"section-title\">Enter Nominee Details</div>\r\n\r\n            <div class=\"mb-3\">\r\n                <label for=\"nomineeName\" class=\"form-label\">Full Name of Nominee <span class=\"required\">*</span></label>\r\n                <input type=\"text\" class=\"form-control custom-form-control\" id=\"nomineeName\" required\r\n                    [(ngModel)]=\"enrollementPayload.nomineeDetails.nomineeName\"\r\n                    (ngModelChange)=\"validateForm('NOMINEE_NAME')\" [class.error-border]=\"!validObject['NOMINEE_NAME']\">\r\n            </div>\r\n\r\n            <div class=\"row mb-3\">\r\n                <div class=\"col-md-6\">\r\n                    <label for=\"relationship\" class=\"form-label\">Select Relationship <span\r\n                            class=\"required\">*</span></label>\r\n                    <select class=\"form-select custom-form-select\" id=\"relationship\" required\r\n                        [(ngModel)]=\"enrollementPayload.nomineeDetails.relationShip\">\r\n                        <!-- <option value=\"\">Select Relationship</option> -->\r\n                        <option value=\"Spouse\">Spouse</option>\r\n                        <option value=\"Child\">Child</option>\r\n                        <option value=\"Mother\">Mother</option>\r\n                        <option value=\"Father\">Father</option>\r\n                        <option value=\"Sibling\">Sibling</option>\r\n                    </select>\r\n                </div>\r\n                <div class=\"col-md-6\">\r\n                    <label for=\"nomineePhone\" class=\"form-label\">Mobile Number <span class=\"required\">*</span></label>\r\n\r\n                    <input type=\"number\" class=\"form-control custom-form-control\" id=\"nomineePhone\" required\r\n                        [(ngModel)]=\"enrollementPayload.nomineeDetails.mobile\"\r\n                        (ngModelChange)=\"validateForm('NOMINEE_MOBILE')\"\r\n                        [class.error-border]=\"!validObject['NOMINEE_MOBILE']\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"section-title\">Account Information</div>\r\n\r\n            <div class=\"row mb-3\">\r\n                <div class=\"col-md-6\">\r\n                    <label for=\"accountHolder\" class=\"form-label\">Account Holder Name <span\r\n                            class=\"required\">*</span></label>\r\n                    <input type=\"text\" class=\"form-control custom-form-control\" id=\"accountHolder\" required\r\n                        [(ngModel)]=\"enrollementPayload.bankDetails.accountHolderName\"\r\n                        (ngModelChange)=\"validateForm('ACCOUNT_HOLDER_NAME')\"\r\n                        [class.error-border]=\"!validObject['ACCOUNT_HOLDER_NAME']\">\r\n                </div>\r\n                <div class=\"col-md-6\">\r\n                    <label for=\"accountNumber\" class=\"form-label\">Account Number <span class=\"required\">*</span></label>\r\n                    <input type=\"text\" class=\"form-control custom-form-control\" id=\"accountNumber\" required\r\n                        [(ngModel)]=\"enrollementPayload.bankDetails.accountNumber\"\r\n                        (ngModelChange)=\"validateForm('ACCOUNT_NUMBER')\"\r\n                        [class.error-border]=\"!validObject['ACCOUNT_NUMBER']\">\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"row mb-3\">\r\n                <div class=\"col-md-6\">\r\n                    <label for=\"bankName\" class=\"form-label\">Bank Name <span class=\"required\">*</span></label>\r\n                    <input type=\"text\" class=\"form-control custom-form-control\" id=\"bankName\" required\r\n                        [(ngModel)]=\"enrollementPayload.bankDetails.bankName\"\r\n                        (ngModelChange)=\"validateForm('BANK_NAME')\" [class.error-border]=\"!validObject['BANK_NAME']\">\r\n                </div>\r\n                <div class=\"col-md-6\">\r\n                    <label for=\"ifscCode\" class=\"form-label\">IFSC Code <span class=\"required\">*</span></label>\r\n                    <input type=\"text\" class=\"form-control custom-form-control\" id=\"ifscCode\" required\r\n                        [(ngModel)]=\"enrollementPayload.bankDetails.ifscCode\"\r\n                        (ngModelChange)=\"validateForm('IFSC_CODE')\" [class.error-border]=\"!validObject['IFSC_CODE']\">\r\n                </div>\r\n            </div>\r\n            <div class=\"d-grid mt-4\">\r\n                <button type=\"submit\" class=\"btn btn-submit\" (click)=\"createEnrollment()\"\r\n                    [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\"\r\n                    [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\"\r\n                    [buttonData]=\"getButtonContent(0)\">Submit\r\n                    Enrollment</button>\r\n            </div>\r\n            <div *ngIf=\"validator\" [class.error-color]=\"validator\">Fill all mandatory fields to proceed*</div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Add this block in your Angular payment step (page === 'PAYMENT') -->\r\n    <!-- payment-simulation.component.html -->\r\n    <div class=\"container-fluid min-vh-100 d-flex align-items-center justify-content-center bg-light\"\r\n        *ngIf=\"page === 'PAYMENT'\">\r\n        <div class=\"payment-container\">\r\n\r\n            <!-- Header -->\r\n            <div class=\"payment-header mb-4\">\r\n                <div class=\"d-flex align-items-center justify-content-between\">\r\n                    <h1 class=\"payment-title\">Payment Method</h1>\r\n                    <span class=\"badge bg-success rounded-pill px-3 py-2\">Credit Card</span>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Credit Card -->\r\n            <div class=\"credit-card mb-4\">\r\n                <div class=\"card-inner\">\r\n                    <div class=\"card-shine\"></div>\r\n                    <div class=\"card-content\">\r\n                        <div class=\"d-flex align-items-center justify-content-between mb-4\">\r\n                            <div class=\"d-flex align-items-center gap-2\">\r\n                                <div class=\"visa-logo\"></div>\r\n                                <span class=\"visa-text\">VISA</span>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"cardholder-name mb-4\">\r\n                            turquoisecoyote\r\n                        </div>\r\n\r\n                        <div class=\"d-flex align-items-center justify-content-between\">\r\n                            <div class=\"card-dots\">\r\n                                <span class=\"dot\" *ngFor=\"let dot of [1,2,3,4,5,6,7,8,9,10,11,12]\"></span>\r\n                            </div>\r\n                            <span class=\"card-number\">1111</span>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- OTP Section -->\r\n            <div class=\"otp-section mb-4\">\r\n                <p class=\"otp-label\">Enter OTP sent to your xxx xxx 4839</p>\r\n                <input type=\"text\" class=\"form-control otp-input\" placeholder=\"Enter OTP\">\r\n                <small class=\"text-muted mt-2 d-block\">Hint: OTP is 111000</small>\r\n            </div>\r\n\r\n            <!-- Simulation Buttons -->\r\n            <div class=\"row g-3 mb-4\">\r\n                <div class=\"col-6\">\r\n                    <button class=\"btn btn-danger btn-lg w-100 simulation-btn\" (click)=\"simulatePayment('failure')\"\r\n                        [disabled]=\"isProcessing\">\r\n                        Simulate failure\r\n                    </button>\r\n                </div>\r\n                <div class=\"col-6\">\r\n                    <button class=\"btn btn-success btn-lg w-100 simulation-btn\" (click)=\"simulatePayment('success')\"\r\n                        [disabled]=\"isProcessing\">\r\n                        Simulate success\r\n                    </button>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Processing State -->\r\n            <div *ngIf=\"isProcessing\" class=\"d-flex align-items-center justify-content-center py-3\">\r\n                <div class=\"spinner-border text-primary me-3\" role=\"status\" style=\"width: 1.5rem; height: 1.5rem;\">\r\n                </div>\r\n                <span class=\"text-muted\">Processing payment...</span>\r\n            </div>\r\n\r\n            <!-- Result Alert -->\r\n            <div *ngIf=\"result && showResult\" class=\"alert text-center result-alert\" [ngClass]=\"{\r\n             'alert-success': result.type === 'success',\r\n             'alert-danger': result.type === 'failure'\r\n           }\">\r\n                <strong>{{ result.title }}</strong> {{ result.message }}\r\n            </div>\r\n\r\n            <!-- Footer -->\r\n            <div class=\"text-center mt-4\">\r\n                <small class=\"text-muted\">\r\n                    Click buttons to simulate payment scenarios\r\n                </small>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n\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%}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.form-container{width:60%;border-radius:12px;padding:30px;margin:0 auto;box-shadow:0 2px 10px #0000001a}.section-title{font-size:18px;font-weight:600;margin-bottom:20px;margin-top:30px}.section-title:first-child{margin-top:0}.custom-form-control{border:1px solid #e2e8f0;border-radius:8px;padding:12px 16px;font-size:14px;color:#2d3748;font-weight:500;transition:all .2s}.custom-form-control:focus{background-color:#f7fafc;border-color:#667eea;box-shadow:0 0 0 .2rem #667eea40}.custom-form-control::placeholder{color:#a0aec0;font-weight:400}.custom-form-control.filled{background-color:#edf2f7;border-color:#cbd5e0;font-weight:600}.custom-form-select{background-color:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;padding:12px 16px;font-size:14px;color:#2d3748;font-weight:500;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e\");background-position:right 12px center;background-repeat:no-repeat;background-size:16px;appearance:none}.custom-form-select:focus{background-color:#f7fafc;border-color:#667eea;box-shadow:0 0 0 .2rem #667eea40}.custom-form-select.filled{background-color:#edf2f7;border-color:#cbd5e0;font-weight:600}.form-label{font-size:14px;font-weight:500;color:#718096;margin-bottom:8px}.required{color:#e53e3e}.phone-input-group{display:flex;gap:0}.phone-code{background-color:#f7fafc;border:1px solid #e2e8f0;border-radius:8px 0 0 8px;border-right:none;padding:12px 16px;display:flex;align-items:center;gap:8px;font-size:14px;color:#4a5568;font-weight:500}.phone-code:after{content:\"\\25bc\";color:#a0aec0;font-size:12px}.error-border{border:2px solid #e53e3e!important}.error-color{color:#e53e3e!important;font-weight:600;font-size:13px}.phone-input-group .custom-form-control{border-radius:0 8px 8px 0;border-left:none}.radio-group{display:flex;gap:12px;margin-top:12px}.radio-option{flex:1;background-color:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;padding:16px;cursor:pointer;transition:all .2s;position:relative}.radio-option:hover{background-color:#edf2f7}.radio-option.selected{background-color:#e6fffa;border-color:#38b2ac}.radio-option input[type=radio]{position:absolute;opacity:0;cursor:pointer}.radio-option .radio-circle{width:20px;height:20px;border:2px solid #cbd5e0;border-radius:50%;position:absolute;top:16px;right:16px;background:#fff}.radio-option.selected .radio-circle{border-color:#38b2ac}.radio-option.selected .radio-circle:after{content:\"\";width:10px;height:10px;background:#38b2ac;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.radio-option label{font-size:14px;font-weight:500;color:#4a5568;cursor:pointer;display:block;margin-bottom:0;padding-right:30px}.btn-submit{border:none;padding:14px 30px;border-radius:8px;font-weight:600;font-size:16px;transition:transform .2s}.btn-submit:hover{transform:translateY(-1px);color:#fff}.mb-3{margin-bottom:1rem!important}.mt-4{margin-top:1.5rem!important}.payment-card{max-width:500px;width:100%;border-radius:15px;overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2}.card-header{background:linear-gradient(135deg,#007bff,#0056b3)!important;border-bottom:none}.payment-btn{position:relative;overflow:hidden;border:none;border-radius:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;transition:all .3s ease;box-shadow:0 4px 15px #0003}.payment-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px #0000004d}.payment-btn:active:not(:disabled){transform:translateY(0)}.payment-btn:disabled{opacity:.6;cursor:not-allowed;transform:none!important}.btn-overlay{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s}.payment-btn:hover:not(:disabled) .btn-overlay{left:100%}.btn-success{background:linear-gradient(45deg,#28a745,#20c997);border-color:#28a745}.btn-success:hover:not(:disabled){background:linear-gradient(45deg,#218838,#1aa085);border-color:#1e7e34}.btn-danger{background:linear-gradient(45deg,#dc3545,#e74c3c);border-color:#dc3545}.btn-danger:hover:not(:disabled){background:linear-gradient(45deg,#c82333,#d62c1a);border-color:#bd2130}.alert{border:none;border-radius:10px;font-weight:500;box-shadow:0 4px 15px #0000001a}.alert-success{background:linear-gradient(45deg,#d4edda,#c3e6cb);color:#155724}.alert-danger{background:linear-gradient(45deg,#f8d7da,#f5c6cb);color:#721c24}.min-vh-100{min-height:100vh}.card-footer{background:#f8f9facc!important;border-top:1px solid rgba(0,0,0,.125)}body{background:linear-gradient(135deg,#667eea,#764ba2);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.alert.show{animation:fadeInUp .3s ease-out}.spinner-border{width:1.5rem;height:1.5rem}.payment-container{width:100%;max-width:430px;padding:20px}.payment-title{font-size:2rem;font-weight:700;color:#333;margin:0}.credit-card{perspective:1000px}.card-inner{background:linear-gradient(135deg,#2d3748,#1a202c);border-radius:20px;padding:30px;position:relative;overflow:hidden;box-shadow:0 20px 40px #0000004d;color:#fff;min-height:200px}.card-shine{position:absolute;inset:0;background:linear-gradient(135deg,transparent 0%,rgba(255,255,255,.1) 45%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.1) 55%,transparent 100%);pointer-events:none}.card-content{position:relative;z-index:2}.visa-logo{width:32px;height:20px;background:#fff;border-radius:3px}.visa-text{font-weight:700;font-size:1.2rem;letter-spacing:2px}.cardholder-name{font-size:1.1rem;letter-spacing:1px;text-transform:lowercase}.card-dots{display:flex;gap:4px}.dot{width:8px;height:8px;background:#fff;border-radius:50%;display:inline-block}.card-number{font-family:Courier New,monospace;font-size:1.3rem;font-weight:700;letter-spacing:3px}.otp-section{margin:30px 0}.otp-label{color:#6c757d;margin-bottom:12px;font-size:.95rem}.otp-input{padding:16px 20px;border-radius:12px;border:2px solid #e9ecef;font-size:1.1rem;transition:all .3s ease}.otp-input:focus{border-color:#007bff;box-shadow:0 0 0 .2rem #007bff40}.simulation-btn{padding:16px 20px;border-radius:12px;font-weight:700;font-size:1rem;transition:all .3s ease;border:none;white-space:nowrap}.simulation-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px #00000026}.simulation-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-danger.simulation-btn{background:linear-gradient(135deg,#dc3545,#c82333)}.btn-success.simulation-btn{background:linear-gradient(135deg,#28a745,#20c997)}.result-alert{border-radius:12px;padding:16px 20px;border:none;font-weight:500;animation:slideInUp .3s ease-out}.alert-success{background:linear-gradient(135deg,#d4edda,#c3e6cb);color:#155724;border-left:4px solid #28a745}.alert-danger{background:linear-gradient(135deg,#f8d7da,#f5c6cb);color:#721c24;border-left:4px solid #dc3545}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.payment-container{padding:15px}.payment-title{font-size:1.5rem}.card-inner{padding:25px;min-height:180px}.simulation-btn{padding:14px 16px;font-size:.9rem}.form-container{width:100%!important}}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"] }]
+                    ], template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\n    <div class=\"container py-5\" *ngIf=\"page === 'ENROLLMENT'\">\n        <div class=\"form-container\">\n            <div class=\"section-title\">Customer Information</div>\n\n            <div class=\"mb-3\">\n                <label for=\"fullName\" class=\"form-label\">Full Name <span class=\"required\">*</span></label>\n                <input type=\"text\" class=\"form-control custom-form-control\" id=\"fullName\" required\n                    [(ngModel)]=\"enrollementPayload.name\" (ngModelChange)=\"validateForm('NAME')\"\n                    [class.error-border]=\"!validObject['NAME']\">\n            </div>\n\n            <div class=\"mb-3\">\n                <label for=\"email\" class=\"form-label\">Email Address <span class=\"required\">*</span></label>\n                <input type=\"email\" class=\"form-control custom-form-control\" id=\"email\" required\n                    [(ngModel)]=\"enrollementPayload.mailId\" (ngModelChange)=\"validateForm('EMAIL')\"\n                    [class.error-border]=\"!validObject['EMAIL']\">\n            </div>\n\n            <div class=\"row mb-3\">\n                <div class=\"col-md-6\">\n                    <label for=\"mobile\" class=\"form-label\">Mobile <span class=\"required\">*</span></label>\n                    <input type=\"tel\" class=\"form-control custom-form-control\" id=\"mobile\" required\n                        [(ngModel)]=\"enrollementPayload.mobileNumber\" (ngModelChange)=\"validateForm('MOBILE')\"\n                        [class.error-border]=\"!validObject['MOBILE']\">\n                </div>\n                <div class=\"col-md-6\">\n                    <label for=\"dateOfBirth\" class=\"form-label\">Date of Birth <span class=\"required\">*</span></label>\n                    <input type=\"date\" class=\"form-control custom-form-control\" id=\"dateOfBirth\" required\n                        [(ngModel)]=\"enrollementPayload.dateOfBirth\" (ngModelChange)=\"validateForm('DOB')\"\n                        [class.error-border]=\"!validObject['DOB']\">\n                </div>\n            </div>\n\n            <!-- Scheme Information -->\n            <div class=\"section-title\">Scheme Information</div>\n\n            <div class=\"row mb-3\">\n                <div class=\"col-md-6\">\n                    <label for=\"scheme\" class=\"form-label\">Scheme <span class=\"required\">*</span></label>\n                    <select class=\"form-select custom-form-select\" id=\"scheme\" required [(ngModel)]=\"selectedScheme\"\n                        (ngModelChange)=\"setMonthlyInstallmentAmount()\">\n                        <option [ngValue]=\"\">Select Scheme</option>\n                        <ng-container *ngFor=\"let scheme of schemesData\">\n                            <option [ngValue]=\"scheme\">{{scheme.schemeName ?? \"-\"}}</option>\n                        </ng-container>\n                    </select>\n                </div>\n                <div class=\"col-md-6\">\n                    <label for=\"monthlyAmount\" class=\"form-label\">Monthly Amount <span class=\"required\">*</span></label>\n                    <input type=\"number\" class=\"form-control custom-form-control\" id=\"monthlyAmount\" required disabled\n                        *ngIf=\"selectedScheme?.schemeType == 'INDIVIDUAL'\"\n                        [(ngModel)]=\"enrollementPayload.monthlyInstallmentAmount\">\n                    <select class=\"form-select custom-form-select\" id=\"subdivision\" required\n                        *ngIf=\"selectedScheme?.schemeType == 'GROUP'\"\n                        [(ngModel)]=\"enrollementPayload.enrolledGroup.schemeSlab\">\n                        <option [ngValue]=\"\">Select Amount Plan</option>\n                        <ng-container *ngFor=\"let slab of selectedScheme.schemeSlabs\">\n                            <option [ngValue]=\"slab\">{{slab.monthlyInstallmentAmount ?? \"-\"}}</option>\n                        </ng-container>\n                    </select>\n                </div>\n            </div>\n\n            <!-- Store Information -->\n            <div class=\"section-title\">Store Information</div>\n\n            <div class=\"row mb-3\">\n                <div class=\"col-md-6\">\n                    <label for=\"storeName\" class=\"form-label\">Store Name <span class=\"required\">*</span></label>\n                    <select class=\"form-select custom-form-select\" id=\"subdivision\" required\n                        [(ngModel)]=\"enrollementPayload.storeDetails\" (ngModelChange)=\"getStaffById()\">\n                        <option [ngValue]=\"\">Select Store</option>\n                        <ng-container *ngFor=\"let store of storeData\">\n                            <option [ngValue]=\"store\">{{store.storeName ?? \"-\"}}</option>\n                        </ng-container>\n                    </select>\n                </div>\n                <div class=\"col-md-6\">\n                    <label for=\"subdivision\" class=\"form-label\">Custodian</label>\n                    <select class=\"form-select custom-form-select\" id=\"subdivision\"\n                        [(ngModel)]=\"enrollementPayload.custodian\">\n                        <option [ngValue]=\"\">Select Custodian</option>\n                        <ng-container *ngFor=\"let staff of staffData\">\n                            <option [ngValue]=\"staff\">{{staff.personalInfo.name ?? \"-\"}}</option>\n                        </ng-container>\n                    </select>\n                </div>\n            </div>\n\n            <!-- Enter Your Address -->\n            <div class=\"section-title\">Enter Your Address</div>\n\n            <div class=\"mb-3\">\n                <label for=\"address\" class=\"form-label\">Address <span class=\"required\">*</span></label>\n                <input type=\"text\" class=\"form-control custom-form-control\" id=\"address\" required\n                    [(ngModel)]=\"enrollementPayload.addressDetails.addressLine\"\n                    (ngModelChange)=\"validateForm('ADDRESS')\" [class.error-border]=\"!validObject['ADDRESS']\">\n            </div>\n\n            <div class=\"row mb-3\">\n                <div class=\"col-md-6\">\n                    <label for=\"state\" class=\"form-label\">State <span class=\"required\">*</span></label>\n                    <select class=\"form-select custom-form-select\" [(ngModel)]=\"enrollementPayload.addressDetails.state\"\n                        (ngModelChange)=\"getCityByStateId()\">\n                        <option [ngValue]=\"\">Select State</option>\n                        <ng-container *ngFor=\"let state of stateData\">\n                            <option [ngValue]=\"state\">{{state.name ?? \"-\"}}</option>\n                        </ng-container>\n                    </select>\n                </div>\n                <div class=\"col-md-6\">\n                    <label for=\"city\" class=\"form-label\">City <span class=\"required\">*</span></label>\n                    <select class=\"form-select custom-form-select\" [(ngModel)]=\"enrollementPayload.addressDetails.city\">\n                        <option [ngValue]=\"\">Select City</option>\n                        <ng-container *ngFor=\"let city of cityData\">\n                            <option [ngValue]=\"city\">{{city.name ?? \"-\"}}</option>\n                        </ng-container>\n                    </select>\n                </div>\n            </div>\n\n            <div class=\"row mb-3\">\n                <div class=\"col-md-6\">\n                    <label for=\"pincode\" class=\"form-label\">Pincode <span class=\"required\">*</span></label>\n                    <input type=\"number\" class=\"form-control custom-form-control\" id=\"pincode\" required\n                        [(ngModel)]=\"enrollementPayload.addressDetails.pinCode\"\n                        (ngModelChange)=\"validateForm('PINCODE')\" [class.error-border]=\"!validObject['PINCODE']\">\n                </div>\n            </div>\n\n            <div class=\"section-title\">Enter Nominee Details</div>\n\n            <div class=\"mb-3\">\n                <label for=\"nomineeName\" class=\"form-label\">Full Name of Nominee <span class=\"required\">*</span></label>\n                <input type=\"text\" class=\"form-control custom-form-control\" id=\"nomineeName\" required\n                    [(ngModel)]=\"enrollementPayload.nomineeDetails.nomineeName\"\n                    (ngModelChange)=\"validateForm('NOMINEE_NAME')\" [class.error-border]=\"!validObject['NOMINEE_NAME']\">\n            </div>\n\n            <div class=\"row mb-3\">\n                <div class=\"col-md-6\">\n                    <label for=\"relationship\" class=\"form-label\">Select Relationship <span\n                            class=\"required\">*</span></label>\n                    <select class=\"form-select custom-form-select\" id=\"relationship\" required\n                        [(ngModel)]=\"enrollementPayload.nomineeDetails.relationShip\">\n                        <!-- <option value=\"\">Select Relationship</option> -->\n                        <option value=\"Spouse\">Spouse</option>\n                        <option value=\"Child\">Child</option>\n                        <option value=\"Mother\">Mother</option>\n                        <option value=\"Father\">Father</option>\n                        <option value=\"Sibling\">Sibling</option>\n                    </select>\n                </div>\n                <div class=\"col-md-6\">\n                    <label for=\"nomineePhone\" class=\"form-label\">Mobile Number <span class=\"required\">*</span></label>\n\n                    <input type=\"number\" class=\"form-control custom-form-control\" id=\"nomineePhone\" required\n                        [(ngModel)]=\"enrollementPayload.nomineeDetails.mobile\"\n                        (ngModelChange)=\"validateForm('NOMINEE_MOBILE')\"\n                        [class.error-border]=\"!validObject['NOMINEE_MOBILE']\">\n                </div>\n            </div>\n\n            <div class=\"section-title\">Account Information</div>\n\n            <div class=\"row mb-3\">\n                <div class=\"col-md-6\">\n                    <label for=\"accountHolder\" class=\"form-label\">Account Holder Name <span\n                            class=\"required\">*</span></label>\n                    <input type=\"text\" class=\"form-control custom-form-control\" id=\"accountHolder\" required\n                        [(ngModel)]=\"enrollementPayload.bankDetails.accountHolderName\"\n                        (ngModelChange)=\"validateForm('ACCOUNT_HOLDER_NAME')\"\n                        [class.error-border]=\"!validObject['ACCOUNT_HOLDER_NAME']\">\n                </div>\n                <div class=\"col-md-6\">\n                    <label for=\"accountNumber\" class=\"form-label\">Account Number <span class=\"required\">*</span></label>\n                    <input type=\"text\" class=\"form-control custom-form-control\" id=\"accountNumber\" required\n                        [(ngModel)]=\"enrollementPayload.bankDetails.accountNumber\"\n                        (ngModelChange)=\"validateForm('ACCOUNT_NUMBER')\"\n                        [class.error-border]=\"!validObject['ACCOUNT_NUMBER']\">\n                </div>\n            </div>\n\n            <div class=\"row mb-3\">\n                <div class=\"col-md-6\">\n                    <label for=\"bankName\" class=\"form-label\">Bank Name <span class=\"required\">*</span></label>\n                    <input type=\"text\" class=\"form-control custom-form-control\" id=\"bankName\" required\n                        [(ngModel)]=\"enrollementPayload.bankDetails.bankName\"\n                        (ngModelChange)=\"validateForm('BANK_NAME')\" [class.error-border]=\"!validObject['BANK_NAME']\">\n                </div>\n                <div class=\"col-md-6\">\n                    <label for=\"ifscCode\" class=\"form-label\">IFSC Code <span class=\"required\">*</span></label>\n                    <input type=\"text\" class=\"form-control custom-form-control\" id=\"ifscCode\" required\n                        [(ngModel)]=\"enrollementPayload.bankDetails.ifscCode\"\n                        (ngModelChange)=\"validateForm('IFSC_CODE')\" [class.error-border]=\"!validObject['IFSC_CODE']\">\n                </div>\n            </div>\n            <div class=\"d-grid mt-4\">\n                <button type=\"submit\" class=\"btn btn-submit\" (click)=\"createEnrollment()\"\n                    [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\"\n                    [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\"\n                    [buttonData]=\"getButtonContent(0)\">Submit\n                    Enrollment</button>\n            </div>\n            <div *ngIf=\"validator\" [class.error-color]=\"validator\">Fill all mandatory fields to proceed*</div>\n        </div>\n    </div>\n\n    <!-- Add this block in your Angular payment step (page === 'PAYMENT') -->\n    <!-- payment-simulation.component.html -->\n    <div class=\"container-fluid min-vh-100 d-flex align-items-center justify-content-center bg-light\"\n        *ngIf=\"page === 'PAYMENT'\">\n        <div class=\"payment-container\">\n\n            <!-- Header -->\n            <div class=\"payment-header mb-4\">\n                <div class=\"d-flex align-items-center justify-content-between\">\n                    <h1 class=\"payment-title\">Payment Method</h1>\n                    <span class=\"badge bg-success rounded-pill px-3 py-2\">Credit Card</span>\n                </div>\n            </div>\n\n            <!-- Credit Card -->\n            <div class=\"credit-card mb-4\">\n                <div class=\"card-inner\">\n                    <div class=\"card-shine\"></div>\n                    <div class=\"card-content\">\n                        <div class=\"d-flex align-items-center justify-content-between mb-4\">\n                            <div class=\"d-flex align-items-center gap-2\">\n                                <div class=\"visa-logo\"></div>\n                                <span class=\"visa-text\">VISA</span>\n                            </div>\n                        </div>\n\n                        <div class=\"cardholder-name mb-4\">\n                            turquoisecoyote\n                        </div>\n\n                        <div class=\"d-flex align-items-center justify-content-between\">\n                            <div class=\"card-dots\">\n                                <span class=\"dot\" *ngFor=\"let dot of [1,2,3,4,5,6,7,8,9,10,11,12]\"></span>\n                            </div>\n                            <span class=\"card-number\">1111</span>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <!-- OTP Section -->\n            <div class=\"otp-section mb-4\">\n                <p class=\"otp-label\">Enter OTP sent to your xxx xxx 4839</p>\n                <input type=\"text\" class=\"form-control otp-input\" placeholder=\"Enter OTP\">\n                <small class=\"text-muted mt-2 d-block\">Hint: OTP is 111000</small>\n            </div>\n\n            <!-- Simulation Buttons -->\n            <div class=\"row g-3 mb-4\">\n                <div class=\"col-6\">\n                    <button class=\"btn btn-danger btn-lg w-100 simulation-btn\" (click)=\"simulatePayment('failure')\"\n                        [disabled]=\"isProcessing\">\n                        Simulate failure\n                    </button>\n                </div>\n                <div class=\"col-6\">\n                    <button class=\"btn btn-success btn-lg w-100 simulation-btn\" (click)=\"simulatePayment('success')\"\n                        [disabled]=\"isProcessing\">\n                        Simulate success\n                    </button>\n                </div>\n            </div>\n\n            <!-- Processing State -->\n            <div *ngIf=\"isProcessing\" class=\"d-flex align-items-center justify-content-center py-3\">\n                <div class=\"spinner-border text-primary me-3\" role=\"status\" style=\"width: 1.5rem; height: 1.5rem;\">\n                </div>\n                <span class=\"text-muted\">Processing payment...</span>\n            </div>\n\n            <!-- Result Alert -->\n            <div *ngIf=\"result && showResult\" class=\"alert text-center result-alert\" [ngClass]=\"{\n             'alert-success': result.type === 'success',\n             'alert-danger': result.type === 'failure'\n           }\">\n                <strong>{{ result.title }}</strong> {{ result.message }}\n            </div>\n\n            <!-- Footer -->\n            <div class=\"text-center mt-4\">\n                <small class=\"text-muted\">\n                    Click buttons to simulate payment scenarios\n                </small>\n            </div>\n\n        </div>\n    </div>\n\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.form-container{width:60%;border-radius:12px;padding:30px;margin:0 auto;box-shadow:0 2px 10px #0000001a}.section-title{font-size:18px;font-weight:600;margin-bottom:20px;margin-top:30px}.section-title:first-child{margin-top:0}.custom-form-control{border:1px solid #e2e8f0;border-radius:8px;padding:12px 16px;font-size:14px;color:#2d3748;font-weight:500;transition:all .2s}.custom-form-control:focus{background-color:#f7fafc;border-color:#667eea;box-shadow:0 0 0 .2rem #667eea40}.custom-form-control::placeholder{color:#a0aec0;font-weight:400}.custom-form-control.filled{background-color:#edf2f7;border-color:#cbd5e0;font-weight:600}.custom-form-select{background-color:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;padding:12px 16px;font-size:14px;color:#2d3748;font-weight:500;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e\");background-position:right 12px center;background-repeat:no-repeat;background-size:16px;appearance:none}.custom-form-select:focus{background-color:#f7fafc;border-color:#667eea;box-shadow:0 0 0 .2rem #667eea40}.custom-form-select.filled{background-color:#edf2f7;border-color:#cbd5e0;font-weight:600}.form-label{font-size:14px;font-weight:500;color:#718096;margin-bottom:8px}.required{color:#e53e3e}.phone-input-group{display:flex;gap:0}.phone-code{background-color:#f7fafc;border:1px solid #e2e8f0;border-radius:8px 0 0 8px;border-right:none;padding:12px 16px;display:flex;align-items:center;gap:8px;font-size:14px;color:#4a5568;font-weight:500}.phone-code:after{content:\"\\25bc\";color:#a0aec0;font-size:12px}.error-border{border:2px solid #e53e3e!important}.error-color{color:#e53e3e!important;font-weight:600;font-size:13px}.phone-input-group .custom-form-control{border-radius:0 8px 8px 0;border-left:none}.radio-group{display:flex;gap:12px;margin-top:12px}.radio-option{flex:1;background-color:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;padding:16px;cursor:pointer;transition:all .2s;position:relative}.radio-option:hover{background-color:#edf2f7}.radio-option.selected{background-color:#e6fffa;border-color:#38b2ac}.radio-option input[type=radio]{position:absolute;opacity:0;cursor:pointer}.radio-option .radio-circle{width:20px;height:20px;border:2px solid #cbd5e0;border-radius:50%;position:absolute;top:16px;right:16px;background:#fff}.radio-option.selected .radio-circle{border-color:#38b2ac}.radio-option.selected .radio-circle:after{content:\"\";width:10px;height:10px;background:#38b2ac;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.radio-option label{font-size:14px;font-weight:500;color:#4a5568;cursor:pointer;display:block;margin-bottom:0;padding-right:30px}.btn-submit{border:none;padding:14px 30px;border-radius:8px;font-weight:600;font-size:16px;transition:transform .2s}.btn-submit:hover{transform:translateY(-1px);color:#fff}.mb-3{margin-bottom:1rem!important}.mt-4{margin-top:1.5rem!important}.payment-card{max-width:500px;width:100%;border-radius:15px;overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2}.card-header{background:linear-gradient(135deg,#007bff,#0056b3)!important;border-bottom:none}.payment-btn{position:relative;overflow:hidden;border:none;border-radius:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;transition:all .3s ease;box-shadow:0 4px 15px #0003}.payment-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px #0000004d}.payment-btn:active:not(:disabled){transform:translateY(0)}.payment-btn:disabled{opacity:.6;cursor:not-allowed;transform:none!important}.btn-overlay{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s}.payment-btn:hover:not(:disabled) .btn-overlay{left:100%}.btn-success{background:linear-gradient(45deg,#28a745,#20c997);border-color:#28a745}.btn-success:hover:not(:disabled){background:linear-gradient(45deg,#218838,#1aa085);border-color:#1e7e34}.btn-danger{background:linear-gradient(45deg,#dc3545,#e74c3c);border-color:#dc3545}.btn-danger:hover:not(:disabled){background:linear-gradient(45deg,#c82333,#d62c1a);border-color:#bd2130}.alert{border:none;border-radius:10px;font-weight:500;box-shadow:0 4px 15px #0000001a}.alert-success{background:linear-gradient(45deg,#d4edda,#c3e6cb);color:#155724}.alert-danger{background:linear-gradient(45deg,#f8d7da,#f5c6cb);color:#721c24}.min-vh-100{min-height:100vh}.card-footer{background:#f8f9facc!important;border-top:1px solid rgba(0,0,0,.125)}body{background:linear-gradient(135deg,#667eea,#764ba2);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.alert.show{animation:fadeInUp .3s ease-out}.spinner-border{width:1.5rem;height:1.5rem}.payment-container{width:100%;max-width:430px;padding:20px}.payment-title{font-size:2rem;font-weight:700;color:#333;margin:0}.credit-card{perspective:1000px}.card-inner{background:linear-gradient(135deg,#2d3748,#1a202c);border-radius:20px;padding:30px;position:relative;overflow:hidden;box-shadow:0 20px 40px #0000004d;color:#fff;min-height:200px}.card-shine{position:absolute;inset:0;background:linear-gradient(135deg,transparent 0%,rgba(255,255,255,.1) 45%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.1) 55%,transparent 100%);pointer-events:none}.card-content{position:relative;z-index:2}.visa-logo{width:32px;height:20px;background:#fff;border-radius:3px}.visa-text{font-weight:700;font-size:1.2rem;letter-spacing:2px}.cardholder-name{font-size:1.1rem;letter-spacing:1px;text-transform:lowercase}.card-dots{display:flex;gap:4px}.dot{width:8px;height:8px;background:#fff;border-radius:50%;display:inline-block}.card-number{font-family:Courier New,monospace;font-size:1.3rem;font-weight:700;letter-spacing:3px}.otp-section{margin:30px 0}.otp-label{color:#6c757d;margin-bottom:12px;font-size:.95rem}.otp-input{padding:16px 20px;border-radius:12px;border:2px solid #e9ecef;font-size:1.1rem;transition:all .3s ease}.otp-input:focus{border-color:#007bff;box-shadow:0 0 0 .2rem #007bff40}.simulation-btn{padding:16px 20px;border-radius:12px;font-weight:700;font-size:1rem;transition:all .3s ease;border:none;white-space:nowrap}.simulation-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px #00000026}.simulation-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-danger.simulation-btn{background:linear-gradient(135deg,#dc3545,#c82333)}.btn-success.simulation-btn{background:linear-gradient(135deg,#28a745,#20c997)}.result-alert{border-radius:12px;padding:16px 20px;border:none;font-weight:500;animation:slideInUp .3s ease-out}.alert-success{background:linear-gradient(135deg,#d4edda,#c3e6cb);color:#155724;border-left:4px solid #28a745}.alert-danger{background:linear-gradient(135deg,#f8d7da,#f5c6cb);color:#721c24;border-left:4px solid #dc3545}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.payment-container{padding:15px}.payment-title{font-size:1.5rem}.card-inner{padding:25px;min-height:180px}.simulation-btn{padding:14px 16px;font-size:.9rem}.form-container{width:100%!important}}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"] }]
         }], ctorParameters: () => [{ type: RestService }, { type: i2$2.ActivatedRoute }, { type: StorageServiceService }, { type: i2$2.Router }], propDecorators: { data: [{
                 type: Input
             }], edit: [{
@@ -26267,11 +26267,11 @@ class VideoShowcaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: VideoShowcaseComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i6$1.MessageService }, { token: CartService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: VideoShowcaseComponent, isStandalone: true, selector: "simpo-video-showcase", providers: [MessageService], viewQueries: [{ propertyName: "videoPlayer", first: true, predicate: ["videoPlayer"], descendants: true }], ngImport: i0, template: "<section class=\"overlay\"></section>\r\n\r\n<section class=\"main_section d-flex align-items-center justify-content-center\">\r\n  <div class=\"videos-container\">\r\n    <div class=\"video-card\">\r\n      <div class=\"top-bar d-flex align-items-center\">\r\n        <span class=\"progress-bar\"></span>\r\n        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/802576c1770375389274muted-svgrepo-com.svg\"\r\n          class=\"mute-unmute\" *ngIf=\"videoMuted\" (click)=\"videoMuted = false\">\r\n        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/711833c1770375515828volume-loud-svgrepo-com.svg\"\r\n          class=\"mute-unmute\" *ngIf=\"!videoMuted\" (click)=\"videoMuted=true\">\r\n        <span class=\"close\" (click)=\"closeDialog()\">\u2715</span>\r\n      </div>\r\n\r\n      <!-- Video -->\r\n      <video #videoPlayer class=\"video-content\" autoplay loop playsinline [src]=\"videoUrl\" [controls]=\"false\"\r\n        [muted]=\"videoMuted\">\r\n      </video>\r\n\r\n      <!-- Navigation arrows -->\r\n      <div class=\"d-flex align-items-center nav-arrows w-100\"\r\n        [ngClass]=\"{'justify-content-end' :currentIndex < listItemdata.videos.length - 1 , 'justify-content-between' : currentIndex > 0 }\">\r\n        <button class=\"nav left d-flex align-items-center justify-content-center\" *ngIf=\"currentIndex > 0\"><mat-icon\r\n            style=\"width:20px !important\" (click)=\"playPreviousVideo()\">keyboard_arrow_left</mat-icon></button>\r\n        <button class=\"nav right d-flex align-items-center justify-content-center\" (click)=\"playNextVideo()\"\r\n          *ngIf=\"currentIndex < listItemdata.videos.length - 1\"><mat-icon\r\n            style=\"width:20px !important\">keyboard_arrow_right</mat-icon></button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"products-list-container position-fixed d-flex flex-column gap-4\">\r\n    <ng-container *ngFor=\"let product of productsList\">\r\n      <div class=\"product-badge cursor-pointer\">\r\n        <a [href]=\"product.redirectionUrl\" class=\"product-link\">\r\n          <img [src]=\"product.itemImages[0].imgUrl\" alt=\"Ring\" class=\"product-img\" /></a>\r\n        <div class=\"product-info justify-content-between\">\r\n          <a [href]=\"product.redirectionUrl\" class=\"product-link\">\r\n            <div class=\"product-details d-flex flex-column gap-1\">\r\n              <div class=\"product-title\">\r\n                {{product.name.length > 30 ? product.name.slice(0, 30) + '...' : product.name}}\r\n              </div>\r\n              <div class=\"product-price d-flex align-items-start\">\r\n                \u20B9{{product.price.sellingPrice}}\r\n              </div>\r\n            </div>\r\n          </a>\r\n          <div class=\"d-flex align-items-center justify-content-center gap-1\">\r\n            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/700072c1770270395432favourite-svgrepo-com.svg\"\r\n              style=\"width: 18px;\" *ngIf=\"!product.whislist\" (click)=\"toggleItemToFav($event, product, 'ADD')\">\r\n            <img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304116c1770274132910favourite-svgrepo-com_(1).svg\"\r\n              style=\"width: 18px;\" *ngIf=\"product.whislist\" (click)=\"toggleItemToFav($event, product, 'REMOVE')\">\r\n            <img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/695144c1770270669546cart-shopping-svgrepo-com.svg\"\r\n              style=\"width:19px\" *ngIf=\"product.quantity <= 0\" (click)=\"addItemToCart($event, product, 'ADD')\">\r\n            <img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/795342c1770275383344shopping-cart-fill-svgrepo-com.svg\"\r\n              style=\"width:19px\" *ngIf=\"product.quantity >= 1\" (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</section>", styles: [".overlay{position:fixed;inset:0;background:#00000073;z-index:999}.main_section{position:fixed;inset:0;background:transparent;z-index:1000}.mute-unmute{width:30px;margin-right:10px;cursor:pointer}.videos-container{width:fit-content}.video-card{position:relative;width:360px;height:85vh;border-radius:18px;overflow:hidden;background:transparent}.video-content{width:100%;height:100%;object-fit:cover}.top-bar{position:absolute;top:10px;left:10px;right:10px;display:flex;align-items:center;justify-content:space-between;z-index:2}.progress-bar{flex:1;height:3px;background:#fff6;border-radius:2px;margin-right:10px}.close{font-size:22px;color:#fff;cursor:pointer}.nav-arrows{position:absolute;top:50%;padding:0 1rem}.nav{width:36px!important;height:36px;border-radius:50%;border:none;background:#0006;color:#fff;font-size:22px;cursor:pointer;z-index:2;outline:none}.nav.left{left:10px}.nav.right{right:10px}.products-list-container{right:13%;top:10%;max-height:100%;overflow-y:scroll}.product-card{position:absolute;bottom:14px;left:14px;right:14px;background:#fff;border-radius:14px;padding:10px;display:flex;align-items:center;gap:10px;z-index:2}.product-card img{width:44px;height:44px;border-radius:8px;object-fit:cover}.product-card .info{flex:1}.product-card .title{font-size:14px;font-weight:500;margin:0;color:#222}.product-card .price{font-size:15px;font-weight:600;margin:2px 0 0;color:#000}.product-badge{display:flex;align-items:center;gap:12px;padding:10px;background:#fff9;border-radius:10px;width:322px;box-shadow:0 6px 18px #00000026;transition:background .3s ease,box-shadow .3s ease}.product-badge:hover{background:#f0f0f0e6;box-shadow:0 8px 22px #0003}.product-img{width:42px;height:42px;object-fit:contain;flex-shrink:0}.product-info{display:flex;gap:4px;width:90%}.product-title{font-size:12px;font-weight:500;color:#1a1a1a;max-width:210px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.product-link{text-decoration:none;color:inherit}.products-cards{bottom:0;overflow-x:scroll}.product-price{font-size:16px;font-weight:700;color:#000}@media screen and (max-width: 475px){.video-card{width:100%}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: VideoShowcaseComponent, isStandalone: true, selector: "simpo-video-showcase", providers: [MessageService], viewQueries: [{ propertyName: "videoPlayer", first: true, predicate: ["videoPlayer"], descendants: true }], ngImport: i0, template: "<section class=\"overlay\"></section>\r\n\r\n<section class=\"main_section d-flex align-items-center justify-content-center\">\r\n  <div class=\"videos-container\">\r\n    <div class=\"video-card\">\r\n      <div class=\"top-bar d-flex align-items-center\">\r\n        <span class=\"progress-bar\"></span>\r\n        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/802576c1770375389274muted-svgrepo-com.svg\"\r\n          class=\"mute-unmute\" *ngIf=\"videoMuted\" (click)=\"videoMuted = false\">\r\n        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/711833c1770375515828volume-loud-svgrepo-com.svg\"\r\n          class=\"mute-unmute\" *ngIf=\"!videoMuted\" (click)=\"videoMuted=true\">\r\n        <span class=\"close\" (click)=\"closeDialog()\">\u2715</span>\r\n      </div>\r\n\r\n      <!-- Video -->\r\n      <video #videoPlayer class=\"video-content\" autoplay loop playsinline [src]=\"videoUrl\" [controls]=\"false\"\r\n        [muted]=\"videoMuted\">\r\n      </video>\r\n\r\n      <!-- Navigation arrows -->\r\n      <div class=\"d-flex align-items-center nav-arrows w-100\"\r\n        [ngClass]=\"{'justify-content-end' :currentIndex < listItemdata.videos.length - 1 , 'justify-content-between' : currentIndex > 0 }\">\r\n        <button class=\"nav left d-flex align-items-center justify-content-center\" *ngIf=\"currentIndex > 0\"><mat-icon\r\n            style=\"width:20px !important\" (click)=\"playPreviousVideo()\">keyboard_arrow_left</mat-icon></button>\r\n        <button class=\"nav right d-flex align-items-center justify-content-center\" (click)=\"playNextVideo()\"\r\n          *ngIf=\"currentIndex < listItemdata.videos.length - 1\"><mat-icon\r\n            style=\"width:20px !important\">keyboard_arrow_right</mat-icon></button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"products-list-container position-fixed d-flex flex-column gap-4\">\r\n    <ng-container *ngFor=\"let product of productsList\">\r\n      <div class=\"product-badge cursor-pointer\">\r\n        <a [href]=\"product.redirectionUrl\" class=\"product-link\">\r\n          <img [src]=\"product.itemImages[0].imgUrl\" alt=\"Ring\" class=\"product-img\" /></a>\r\n        <div class=\"product-info justify-content-between\">\r\n          <a [href]=\"product.redirectionUrl\" class=\"product-link\">\r\n            <div class=\"product-details d-flex flex-column gap-1\">\r\n              <div class=\"product-title\">\r\n                {{product.name.length > 30 ? product.name.slice(0, 30) + '...' : product.name}}\r\n              </div>\r\n              <div class=\"product-price d-flex align-items-start\">\r\n                \u20B9{{product.price.sellingPrice}}\r\n              </div>\r\n            </div>\r\n          </a>\r\n          <div class=\"d-flex align-items-center justify-content-center gap-1\">\r\n            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/700072c1770270395432favourite-svgrepo-com.svg\"\r\n              style=\"width: 18px;\" *ngIf=\"!product.whislist\" (click)=\"toggleItemToFav($event, product, 'ADD')\">\r\n            <img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304116c1770274132910favourite-svgrepo-com_(1).svg\"\r\n              style=\"width: 18px;\" *ngIf=\"product.whislist\" (click)=\"toggleItemToFav($event, product, 'REMOVE')\">\r\n            <img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/695144c1770270669546cart-shopping-svgrepo-com.svg\"\r\n              style=\"width:19px\" *ngIf=\"product.quantity <= 0\" (click)=\"addItemToCart($event, product, 'ADD')\">\r\n            <img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/795342c1770275383344shopping-cart-fill-svgrepo-com.svg\"\r\n              style=\"width:19px\" *ngIf=\"product.quantity >= 1\" (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</section>", styles: [".overlay{position:fixed;inset:0;background:#00000073;z-index:999}.main_section{position:fixed;inset:0;background:transparent;z-index:1000}.mute-unmute{width:30px;margin-right:10px;cursor:pointer}.videos-container{width:fit-content}.video-card{position:relative;width:360px;height:85vh;border-radius:18px;overflow:hidden;background:transparent}.video-content{width:100%;height:100%;object-fit:cover}.top-bar{position:absolute;top:10px;left:10px;right:10px;display:flex;align-items:center;justify-content:space-between;z-index:2}.progress-bar{flex:1;height:3px;background:#fff6;border-radius:2px;margin-right:10px}.close{font-size:22px;color:#fff;cursor:pointer}.nav-arrows{position:absolute;top:50%;padding:0 1rem}.nav{width:36px!important;height:36px;border-radius:50%;border:none;background:#0006;color:#fff;font-size:22px;cursor:pointer;z-index:2;outline:none}.nav.left{left:10px}.nav.right{right:10px}.products-list-container{right:13%;top:10%;max-height:100%;overflow-y:scroll}.product-card{position:absolute;bottom:14px;left:14px;right:14px;background:#fff;border-radius:14px;padding:10px;display:flex;align-items:center;gap:10px;z-index:2}.product-card img{width:44px;height:44px;border-radius:8px;object-fit:cover}.product-card .info{flex:1}.product-card .title{font-size:14px;font-weight:500;margin:0;color:#222}.product-card .price{font-size:15px;font-weight:600;margin:2px 0 0;color:#000}.product-badge{display:flex;align-items:center;gap:12px;padding:10px;background:#fff9;border-radius:10px;width:322px;box-shadow:0 6px 18px #00000026;transition:background .3s ease,box-shadow .3s ease}.product-badge:hover{background:#f0f0f0e6;box-shadow:0 8px 22px #0003}.product-img{width:42px;height:42px;object-fit:contain;flex-shrink:0}.product-info{display:flex;gap:4px;width:90%}.product-title{font-size:12px;font-weight:500;color:#1a1a1a;max-width:210px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.product-link{text-decoration:none;color:inherit}.products-cards{bottom:0;overflow-x:scroll}.product-price{font-size:16px;font-weight:700;color:#000}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: VideoShowcaseComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-video-showcase', standalone: true, imports: [MatIcon, CommonModule], providers: [MessageService], template: "<section class=\"overlay\"></section>\r\n\r\n<section class=\"main_section d-flex align-items-center justify-content-center\">\r\n  <div class=\"videos-container\">\r\n    <div class=\"video-card\">\r\n      <div class=\"top-bar d-flex align-items-center\">\r\n        <span class=\"progress-bar\"></span>\r\n        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/802576c1770375389274muted-svgrepo-com.svg\"\r\n          class=\"mute-unmute\" *ngIf=\"videoMuted\" (click)=\"videoMuted = false\">\r\n        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/711833c1770375515828volume-loud-svgrepo-com.svg\"\r\n          class=\"mute-unmute\" *ngIf=\"!videoMuted\" (click)=\"videoMuted=true\">\r\n        <span class=\"close\" (click)=\"closeDialog()\">\u2715</span>\r\n      </div>\r\n\r\n      <!-- Video -->\r\n      <video #videoPlayer class=\"video-content\" autoplay loop playsinline [src]=\"videoUrl\" [controls]=\"false\"\r\n        [muted]=\"videoMuted\">\r\n      </video>\r\n\r\n      <!-- Navigation arrows -->\r\n      <div class=\"d-flex align-items-center nav-arrows w-100\"\r\n        [ngClass]=\"{'justify-content-end' :currentIndex < listItemdata.videos.length - 1 , 'justify-content-between' : currentIndex > 0 }\">\r\n        <button class=\"nav left d-flex align-items-center justify-content-center\" *ngIf=\"currentIndex > 0\"><mat-icon\r\n            style=\"width:20px !important\" (click)=\"playPreviousVideo()\">keyboard_arrow_left</mat-icon></button>\r\n        <button class=\"nav right d-flex align-items-center justify-content-center\" (click)=\"playNextVideo()\"\r\n          *ngIf=\"currentIndex < listItemdata.videos.length - 1\"><mat-icon\r\n            style=\"width:20px !important\">keyboard_arrow_right</mat-icon></button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"products-list-container position-fixed d-flex flex-column gap-4\">\r\n    <ng-container *ngFor=\"let product of productsList\">\r\n      <div class=\"product-badge cursor-pointer\">\r\n        <a [href]=\"product.redirectionUrl\" class=\"product-link\">\r\n          <img [src]=\"product.itemImages[0].imgUrl\" alt=\"Ring\" class=\"product-img\" /></a>\r\n        <div class=\"product-info justify-content-between\">\r\n          <a [href]=\"product.redirectionUrl\" class=\"product-link\">\r\n            <div class=\"product-details d-flex flex-column gap-1\">\r\n              <div class=\"product-title\">\r\n                {{product.name.length > 30 ? product.name.slice(0, 30) + '...' : product.name}}\r\n              </div>\r\n              <div class=\"product-price d-flex align-items-start\">\r\n                \u20B9{{product.price.sellingPrice}}\r\n              </div>\r\n            </div>\r\n          </a>\r\n          <div class=\"d-flex align-items-center justify-content-center gap-1\">\r\n            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/700072c1770270395432favourite-svgrepo-com.svg\"\r\n              style=\"width: 18px;\" *ngIf=\"!product.whislist\" (click)=\"toggleItemToFav($event, product, 'ADD')\">\r\n            <img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304116c1770274132910favourite-svgrepo-com_(1).svg\"\r\n              style=\"width: 18px;\" *ngIf=\"product.whislist\" (click)=\"toggleItemToFav($event, product, 'REMOVE')\">\r\n            <img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/695144c1770270669546cart-shopping-svgrepo-com.svg\"\r\n              style=\"width:19px\" *ngIf=\"product.quantity <= 0\" (click)=\"addItemToCart($event, product, 'ADD')\">\r\n            <img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/795342c1770275383344shopping-cart-fill-svgrepo-com.svg\"\r\n              style=\"width:19px\" *ngIf=\"product.quantity >= 1\" (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</section>", styles: [".overlay{position:fixed;inset:0;background:#00000073;z-index:999}.main_section{position:fixed;inset:0;background:transparent;z-index:1000}.mute-unmute{width:30px;margin-right:10px;cursor:pointer}.videos-container{width:fit-content}.video-card{position:relative;width:360px;height:85vh;border-radius:18px;overflow:hidden;background:transparent}.video-content{width:100%;height:100%;object-fit:cover}.top-bar{position:absolute;top:10px;left:10px;right:10px;display:flex;align-items:center;justify-content:space-between;z-index:2}.progress-bar{flex:1;height:3px;background:#fff6;border-radius:2px;margin-right:10px}.close{font-size:22px;color:#fff;cursor:pointer}.nav-arrows{position:absolute;top:50%;padding:0 1rem}.nav{width:36px!important;height:36px;border-radius:50%;border:none;background:#0006;color:#fff;font-size:22px;cursor:pointer;z-index:2;outline:none}.nav.left{left:10px}.nav.right{right:10px}.products-list-container{right:13%;top:10%;max-height:100%;overflow-y:scroll}.product-card{position:absolute;bottom:14px;left:14px;right:14px;background:#fff;border-radius:14px;padding:10px;display:flex;align-items:center;gap:10px;z-index:2}.product-card img{width:44px;height:44px;border-radius:8px;object-fit:cover}.product-card .info{flex:1}.product-card .title{font-size:14px;font-weight:500;margin:0;color:#222}.product-card .price{font-size:15px;font-weight:600;margin:2px 0 0;color:#000}.product-badge{display:flex;align-items:center;gap:12px;padding:10px;background:#fff9;border-radius:10px;width:322px;box-shadow:0 6px 18px #00000026;transition:background .3s ease,box-shadow .3s ease}.product-badge:hover{background:#f0f0f0e6;box-shadow:0 8px 22px #0003}.product-img{width:42px;height:42px;object-fit:contain;flex-shrink:0}.product-info{display:flex;gap:4px;width:90%}.product-title{font-size:12px;font-weight:500;color:#1a1a1a;max-width:210px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.product-link{text-decoration:none;color:inherit}.products-cards{bottom:0;overflow-x:scroll}.product-price{font-size:16px;font-weight:700;color:#000}@media screen and (max-width: 475px){.video-card{width:100%}}\n"] }]
+            args: [{ selector: 'simpo-video-showcase', standalone: true, imports: [MatIcon, CommonModule], providers: [MessageService], template: "<section class=\"overlay\"></section>\r\n\r\n<section class=\"main_section d-flex align-items-center justify-content-center\">\r\n  <div class=\"videos-container\">\r\n    <div class=\"video-card\">\r\n      <div class=\"top-bar d-flex align-items-center\">\r\n        <span class=\"progress-bar\"></span>\r\n        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/802576c1770375389274muted-svgrepo-com.svg\"\r\n          class=\"mute-unmute\" *ngIf=\"videoMuted\" (click)=\"videoMuted = false\">\r\n        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/711833c1770375515828volume-loud-svgrepo-com.svg\"\r\n          class=\"mute-unmute\" *ngIf=\"!videoMuted\" (click)=\"videoMuted=true\">\r\n        <span class=\"close\" (click)=\"closeDialog()\">\u2715</span>\r\n      </div>\r\n\r\n      <!-- Video -->\r\n      <video #videoPlayer class=\"video-content\" autoplay loop playsinline [src]=\"videoUrl\" [controls]=\"false\"\r\n        [muted]=\"videoMuted\">\r\n      </video>\r\n\r\n      <!-- Navigation arrows -->\r\n      <div class=\"d-flex align-items-center nav-arrows w-100\"\r\n        [ngClass]=\"{'justify-content-end' :currentIndex < listItemdata.videos.length - 1 , 'justify-content-between' : currentIndex > 0 }\">\r\n        <button class=\"nav left d-flex align-items-center justify-content-center\" *ngIf=\"currentIndex > 0\"><mat-icon\r\n            style=\"width:20px !important\" (click)=\"playPreviousVideo()\">keyboard_arrow_left</mat-icon></button>\r\n        <button class=\"nav right d-flex align-items-center justify-content-center\" (click)=\"playNextVideo()\"\r\n          *ngIf=\"currentIndex < listItemdata.videos.length - 1\"><mat-icon\r\n            style=\"width:20px !important\">keyboard_arrow_right</mat-icon></button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"products-list-container position-fixed d-flex flex-column gap-4\">\r\n    <ng-container *ngFor=\"let product of productsList\">\r\n      <div class=\"product-badge cursor-pointer\">\r\n        <a [href]=\"product.redirectionUrl\" class=\"product-link\">\r\n          <img [src]=\"product.itemImages[0].imgUrl\" alt=\"Ring\" class=\"product-img\" /></a>\r\n        <div class=\"product-info justify-content-between\">\r\n          <a [href]=\"product.redirectionUrl\" class=\"product-link\">\r\n            <div class=\"product-details d-flex flex-column gap-1\">\r\n              <div class=\"product-title\">\r\n                {{product.name.length > 30 ? product.name.slice(0, 30) + '...' : product.name}}\r\n              </div>\r\n              <div class=\"product-price d-flex align-items-start\">\r\n                \u20B9{{product.price.sellingPrice}}\r\n              </div>\r\n            </div>\r\n          </a>\r\n          <div class=\"d-flex align-items-center justify-content-center gap-1\">\r\n            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/700072c1770270395432favourite-svgrepo-com.svg\"\r\n              style=\"width: 18px;\" *ngIf=\"!product.whislist\" (click)=\"toggleItemToFav($event, product, 'ADD')\">\r\n            <img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304116c1770274132910favourite-svgrepo-com_(1).svg\"\r\n              style=\"width: 18px;\" *ngIf=\"product.whislist\" (click)=\"toggleItemToFav($event, product, 'REMOVE')\">\r\n            <img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/695144c1770270669546cart-shopping-svgrepo-com.svg\"\r\n              style=\"width:19px\" *ngIf=\"product.quantity <= 0\" (click)=\"addItemToCart($event, product, 'ADD')\">\r\n            <img\r\n              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/795342c1770275383344shopping-cart-fill-svgrepo-com.svg\"\r\n              style=\"width:19px\" *ngIf=\"product.quantity >= 1\" (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</section>", styles: [".overlay{position:fixed;inset:0;background:#00000073;z-index:999}.main_section{position:fixed;inset:0;background:transparent;z-index:1000}.mute-unmute{width:30px;margin-right:10px;cursor:pointer}.videos-container{width:fit-content}.video-card{position:relative;width:360px;height:85vh;border-radius:18px;overflow:hidden;background:transparent}.video-content{width:100%;height:100%;object-fit:cover}.top-bar{position:absolute;top:10px;left:10px;right:10px;display:flex;align-items:center;justify-content:space-between;z-index:2}.progress-bar{flex:1;height:3px;background:#fff6;border-radius:2px;margin-right:10px}.close{font-size:22px;color:#fff;cursor:pointer}.nav-arrows{position:absolute;top:50%;padding:0 1rem}.nav{width:36px!important;height:36px;border-radius:50%;border:none;background:#0006;color:#fff;font-size:22px;cursor:pointer;z-index:2;outline:none}.nav.left{left:10px}.nav.right{right:10px}.products-list-container{right:13%;top:10%;max-height:100%;overflow-y:scroll}.product-card{position:absolute;bottom:14px;left:14px;right:14px;background:#fff;border-radius:14px;padding:10px;display:flex;align-items:center;gap:10px;z-index:2}.product-card img{width:44px;height:44px;border-radius:8px;object-fit:cover}.product-card .info{flex:1}.product-card .title{font-size:14px;font-weight:500;margin:0;color:#222}.product-card .price{font-size:15px;font-weight:600;margin:2px 0 0;color:#000}.product-badge{display:flex;align-items:center;gap:12px;padding:10px;background:#fff9;border-radius:10px;width:322px;box-shadow:0 6px 18px #00000026;transition:background .3s ease,box-shadow .3s ease}.product-badge:hover{background:#f0f0f0e6;box-shadow:0 8px 22px #0003}.product-img{width:42px;height:42px;object-fit:contain;flex-shrink:0}.product-info{display:flex;gap:4px;width:90%}.product-title{font-size:12px;font-weight:500;color:#1a1a1a;max-width:210px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.product-link{text-decoration:none;color:inherit}.products-cards{bottom:0;overflow-x:scroll}.product-price{font-size:16px;font-weight:700;color:#000}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -26355,7 +26355,7 @@ class VideoGridSectionComponent extends BaseSection {
             height: '100vh',
             width: '100vw',
             data: {
-                videos: this.content?.listItem.data,
+                videos: this.content?.listItem.videoData,
                 initiateVideoId: video.id
             },
             panelClass: 'dialog-transparent'
@@ -26449,7 +26449,7 @@ class VideoGridSectionComponent extends BaseSection {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: VideoGridSectionComponent, deps: [{ token: i6$1.MessageService }, { token: CartService }, { token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: VideoGridSectionComponent, isStandalone: true, selector: "simpo-video-grid-section", inputs: { data: "data", index: "index", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "videogrid", first: true, predicate: ["videogrid"], 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\">\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                [ngStyle]=\"style?.fullWidth ? {'padding': '0px'} : {}\"\r\n                [ngClass]=\"{'justify-content-center' : screenWidth < 475}\">\r\n                <!-- [ngClass]=\"{'w-100':style?.gridStyle === 'Style2'}\" -->\r\n                <div *ngFor=\"let text of data?.content?.inputText; let i = index\">\r\n                    <div [simpoContentTitleSpace]=\"headingSpace\">\r\n                        <ng-container *ngIf=\"edit ||  (text.value && text.value.length > 0)\">\r\n                            <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\"\r\n                                [inputTextIndex]=\"i\" [isRTE]=\"text.isRTE\"></simpo-text-editor>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n\r\n                <!-- <ng-container *ngIf=\"style?.gridStyle == 'Style1'\"> -->\r\n                <button class=\"scroll-btn left p-0 d-flex align-items-center justify-content-center\"\r\n                    *ngIf=\"style?.direction === 'ROW' && isOverflowing\" (click)=\"scrollLeft()\"\r\n                    [disabled]=\"atStart\"><mat-icon>keyboard_arrow_left</mat-icon>\r\n                </button>\r\n\r\n                <div class=\"main-video-section\">\r\n\r\n                    <!-- Mobile Stories Peek Carousel (< 475px) -->\r\n                    <ng-container *ngIf=\"screenWidth < 475\">\r\n                        <div class=\"mobile-stories-wrap\">\r\n                            <div class=\"mobile-stories-scroll\">\r\n                                <ng-container *ngIf=\"!content?.display?.showImage\">\r\n                                    <div class=\"mobile-story-card\"\r\n                                        *ngFor=\"let video of content?.listItem?.data; let i = index\">\r\n                                        <video loading=\"lazy\" [simpoCorner]=\"style?.corners\" [src]=\"video.video.url\"\r\n                                            [muted]=\"true\" autoplay loop playsinline class=\"cursor-pointer\"\r\n                                            (click)=\"openFullVideo(video.video)\"></video>\r\n                                        <!-- <div class=\"mobile-story-play-btn\" (click)=\"openFullVideo(video.video)\">\r\n                                            <img\r\n                                                src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/935060c1770214072755play-svgrepo-com.svg\">\r\n                                        </div> -->\r\n                                        <div class=\"mobile-story-text-overlay\" *ngIf=\"video?.video?.description && content?.display?.showText\">\r\n                                            {{ video.video.description }}\r\n                                        </div>\r\n                                        <div class=\"position-absolute products-cards w-100 p-2 d-flex gap-2 overflow-x-auto cursor-pointer\"\r\n                                            *ngIf=\"video?.video?.products?.length > 0 && content?.display?.showProducts\">\r\n                                            <ng-container *ngFor=\"let product of video.video.products\">\r\n                                                <div class=\"product-badge\">\r\n                                                    <a [href]=\"product.redirectionUrl\" class=\"product-link\">\r\n                                                        <img [src]=\"product?.itemImages[0].imgUrl\" alt=\"\"\r\n                                                            class=\"product-img\" /></a>\r\n                                                    <div class=\"product-info\">\r\n                                                        <a [href]=\"product.redirectionUrl\" class=\"product-link\">\r\n                                                            <div class=\"product-details d-flex flex-column gap-1\">\r\n                                                                <div class=\"product-title\">{{product.name.length > 16 ?\r\n                                                                    product.name.trim().slice(0,15) + '...' :\r\n                                                                    product.name}}</div>\r\n                                                                <div class=\"product-price d-flex align-items-start\">\r\n                                                                    \u20B9{{product?.price.sellingPrice}}</div>\r\n                                                            </div>\r\n                                                        </a>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </ng-container>\r\n                                        </div>\r\n                                    </div>\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"content?.display?.showImage\">\r\n                                    <div class=\"mobile-story-card\"\r\n                                        *ngFor=\"let image of content?.listItem?.data; let i = index\">\r\n                                        <img loading=\"lazy\" [src]=\"image.image.url\" [alt]=\"image.image.altText\"\r\n                                            [simpoCorner]=\"style?.corners\">\r\n                                    </div>\r\n                                </ng-container>\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n\r\n                    <!-- Desktop / Tablet Layout (>= 475px) -->\r\n                    <div class=\"main-image-section position-relative\" [class.d-none]=\"screenWidth < 475\"\r\n                        [class.row]=\"style?.direction == 'ROW' && screenWidth > 475\"\r\n                        [class.wrap-scroll]=\"style?.direction == 'ROW' && screenWidth > 475\"\r\n                        [class.flex-wrap]=\"style?.direction == 'COLUMN' && screenWidth > 475\" [id]=\"data?.id\" #videogrid\r\n                        [style.justifyContent]=\"getJustifyContent()\" (scroll)=\"onScroll()\">\r\n                        <ng-container *ngIf=\"!content?.display?.showImage\">\r\n                            <div class=\"video-section p-3 w-auto d-flex flex-column gap-2 align-items-center justify-content-center\"\r\n                                *ngFor=\"let video of content?.listItem?.data; let i = index\"\r\n                                [simpoColumnDirective]=\"style?.size\" [id]=\"data?.id\"\r\n                                [attr.style]=\"style?.removeGaps ? 'padding: 0px !important; margin: 0px !important;' : {}\">\r\n                                <ng-container *ngIf=\"content?.display?.showText\">\r\n                                    <div\r\n                                        class=\"w-fit position-relative d-flex align-items-center justify-content-center\">\r\n                                        <ng-container *ngIf=\"style?.autoPlay && !style?.hoverPlay;else normalVideo\">\r\n                                            <video loading=\"lazy\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\"\r\n                                                #videoEl [class]=\"data?.id + video.video.id\" [src]=\"video.video.url\"\r\n                                                class=\"h-100 cursor-pointer\" [muted]=\"style?.muteVideos\" autoplay\r\n                                                (click)=\"openFullscreen(videoEl)\" loop></video>\r\n                                        </ng-container>\r\n                                        <ng-template #normalVideo>\r\n                                            <video loading=\"lazy\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\"\r\n                                                #videoEl [class]=\"data?.id + video.video.id\" [src]=\"video.video.url\"\r\n                                                class=\"h-100\" [muted]=\"style?.muteVideos\" [controls]=\"!style?.hoverPlay\"\r\n                                                (mouseenter)=\"style?.hoverPlay && onVideoHover(videoEl, video.video)\"\r\n                                                (mouseleave)=\"style?.hoverPlay && onVideoLeave(videoEl, video.video)\"\r\n                                                (click)=\"openFullscreen(videoEl)\"\r\n                                                [ngClass]=\"{ 'cursor-pointer': style?.hoverPlay }\"></video>\r\n                                        </ng-template>\r\n                                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/172648c1769671647159play-fill-svgrepo-com.svg\"\r\n                                            class=\"position-absolute\"\r\n                                            *ngIf=\"!video?.video?.isVideoPlaying && style?.hoverPlay\"\r\n                                            style=\"width:20px\">\r\n                                    </div>\r\n                                    <simpo-text-editor [(value)]=\"video.video.description\" [editable]=\"edit || false\"\r\n                                        [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [itemIndex]=\"i\"></simpo-text-editor>\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"!content?.display?.showText\">\r\n                                    <div class=\"video-wrapper position-relative\" [id]=\"data?.id\"\r\n                                        [ngStyle]=\"{'width' : style?.size === 'Small' ? '180px' : style?.size === 'Medium' ? '220px' : '270px' }\">\r\n                                        <ng-container *ngIf=\"style?.autoPlay && !style?.hoverPlay;else normalVideo\">\r\n                                            <video loading=\"lazy\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\"\r\n                                                #videoEl [class]=\"data?.id + video.video.id\" [src]=\"video.video.url\"\r\n                                                class=\"h-100\" [muted]=\"style?.muteVideos\"\r\n                                                [simpoVideoDirective]=\"style?.image\" [controls]=\"style?.hoverPlay\"\r\n                                                (mouseenter)=\"style?.hoverPlay && onVideoHover(videoEl, video.video)\"\r\n                                                (mouseleave)=\"style?.hoverPlay && onVideoLeave(videoEl, video.video)\"\r\n                                                (click)=\"openFullVideo(video.video)\" autoplay loop></video>\r\n                                        </ng-container>\r\n                                        <ng-template #normalVideo>\r\n                                            <video loading=\"lazy\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\"\r\n                                                #videoEl [class]=\"data?.id + video.video.id\" [src]=\"video.video.url\"\r\n                                                class=\"h-100\" [muted]=\"style?.muteVideos\"\r\n                                                [simpoVideoDirective]=\"style?.image\" [controls]=\"!style?.hoverPlay\"\r\n                                                (mouseenter)=\"style?.hoverPlay && onVideoHover(videoEl, video.video)\"\r\n                                                (mouseleave)=\"style?.hoverPlay && onVideoLeave(videoEl, video.video)\"\r\n                                                (click)=\"openFullVideo(video.video)\"></video>\r\n                                        </ng-template>\r\n                                        <div class=\"position-absolute products-cards w-100 p-3 d-flex gap-3 overflow-x-auto cursor-pointer\"\r\n                                            *ngIf=\"video?.video?.products?.length > 0 && content?.display?.showProducts\">\r\n                                            <ng-container *ngFor=\"let product of video.video.products\">\r\n                                                <div class=\"product-badge\">\r\n                                                    <a [href]=\"product.redirectionUrl\" class=\"product-link\">\r\n                                                        <img [src]=\"product?.itemImages[0].imgUrl\" alt=\"Ring\"\r\n                                                            class=\"product-img\" /></a>\r\n                                                    <div class=\"product-info\">\r\n                                                        <a [href]=\"product.redirectionUrl\" class=\"product-link\">\r\n                                                            <div class=\"product-details d-flex flex-column gap-1\">\r\n                                                                <div class=\"product-title\">\r\n                                                                    {{product.name.length > 16 ?\r\n                                                                    product.name.trim().slice(0,15)\r\n                                                                    +\r\n                                                                    '...' :\r\n                                                                    product.name }}\r\n                                                                </div>\r\n                                                                <div class=\"product-price d-flex align-items-start\">\r\n                                                                    \u20B9{{product?.price.sellingPrice}}\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </a>\r\n                                                        <div\r\n                                                            class=\"d-flex align-items-center justify-content-center gap-1\">\r\n                                                            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/700072c1770270395432favourite-svgrepo-com.svg\"\r\n                                                                style=\"width: 18px;\"\r\n                                                                (click)=\"toggleItemToFav($event, product, 'ADD')\"\r\n                                                                *ngIf=\"!product.whislist\">\r\n                                                            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304116c1770274132910favourite-svgrepo-com_(1).svg\"\r\n                                                                style=\"width: 18px;\" *ngIf=\"product.whislist\"\r\n                                                                (click)=\"toggleItemToFav($event, product, 'REMOVE')\">\r\n                                                            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/695144c1770270669546cart-shopping-svgrepo-com.svg\"\r\n                                                                style=\"width:19px\"\r\n                                                                (click)=\"addItemToCart($event, product, 'ADD')\"\r\n                                                                *ngIf=\"product.quantity <= 0\">\r\n                                                            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/795342c1770275383344shopping-cart-fill-svgrepo-com.svg\"\r\n                                                                style=\"width:19px\" *ngIf=\"product.quantity >= 1\"\r\n                                                                (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </ng-container>\r\n                                        </div>\r\n                                        <div *ngIf=\"!video?.video?.isVideoPlaying && style?.hoverPlay\"\r\n                                            class=\"position-absolute d-flex align-items-center justify-content-center\"\r\n                                            style=\"padding: 9px;top: 47%;left: 40%;background: lightgrey;border-radius: 50%;background: rgba(240, 240, 240, 0.6);backdrop-filter: blur(4px);-webkit-backdrop-filter: blur(4px);\">\r\n                                            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/935060c1770214072755play-svgrepo-com.svg\"\r\n                                                class=\"\" style=\"width:25px;margin-left:1.5px\">\r\n                                        </div>\r\n                                    </div>\r\n                                </ng-container>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.display?.showImage\">\r\n                            <div class=\"video-section p-3 w-auto d-flex flex-column gap-2 align-items-center justify-content-center\"\r\n                                *ngFor=\"let image of content?.listItem?.data; let i = index\"\r\n                                [simpoColumnDirective]=\"style?.size\" [id]=\"data?.id\"\r\n                                [attr.style]=\"style?.removeGaps ? 'padding: 0px !important; margin: 0px !important;' : {}\">\r\n                                <ng-container>\r\n                                    <div class=\"video-wrapper position-relative\" [id]=\"data?.id\"\r\n                                        [ngClass]=\"{'h-100':screenWidth<475}\"\r\n                                        [ngStyle]=\"{'width' : screenWidth > 475 ? (style?.size === 'Small' ? '180px' : style?.size === 'Medium' ? '220px' : '270px'): '100%' }\">\r\n                                        <img loading=\"lazy\" [src]=\"image.image.url\" [alt]=\"image.image.altText\"\r\n                                            [simpoImageDirective]=\"image.image\"\r\n                                            [attr.simpoObjectPosition]=\"image?.image?.fit !== 'contain' ? image.image?.position : null\"\r\n                                            [simpoCorner]=\"style?.corners\" class=\"w-100 h-100\"\r\n                                            [appImageEditor]=\"edit || false\" [imageData]=\"image.image\"\r\n                                            [sectionId]=\"data?.id\" [itemIndex]=\"i\"\r\n                                            [simpoObjectPosition]=\"image?.image?.position\"\r\n                                            [class]=\"data?.id+image.image.id\">\r\n                                    </div>\r\n                                </ng-container>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n\r\n                <button class=\"scroll-btn right p-0 d-flex align-items-center justify-content-center\"\r\n                    *ngIf=\"style?.direction === 'ROW' && isOverflowing\" (click)=\"scrollRight()\"\r\n                    [disabled]=\"atEnd\"><mat-icon>keyboard_arrow_right</mat-icon>\r\n                </button>\r\n                <!-- </ng-container> -->\r\n                <!-- <ng-container *ngIf=\"style?.gridStyle == 'Style2'\">\r\n                    <div class=\"video-grid-section h-100\" [class.remove-gap]=\"style?.removeGaps\"\r\n                        [class.p-0]=\"style?.fullWidth\">\r\n                        <div class=\"video-section\" *ngFor=\"let video of content?.listItem?.data\" style=\"min-width:300px\"\r\n                            [ngClass]=\"{'position-relative d-flex align-items-center justify-content-center' : !video?.video?.isVideoPlaying && style?.hoverPlay}\">\r\n                            <video loading=\"lazy\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" #videoEl\r\n                                [class]=\"data?.id+video.video.id\" [simpoObjectPosition]=\"video.video.position\"\r\n                                [src]=\"video.video.url\" loading=\"lazy\" class=\"h-100\" [controls]=\"!style?.hoverPlay\"\r\n                                (mouseenter)=\"style?.hoverPlay && onVideoHover(videoEl,video.video)\"\r\n                                [muted]=\"style?.muteVideos\"\r\n                                (mouseleave)=\"style?.hoverPlay && onVideoLeave(videoEl,video.video)\"\r\n                                (click)=\"openFullscreen(videoEl)\"\r\n                                [ngClass]=\"{'cursor-pointer' : style?.hoverPlay}\"></video>\r\n                            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/172648c1769671647159play-fill-svgrepo-com.svg\"\r\n                                class=\"position-absolute\" *ngIf=\"!video?.video?.isVideoPlaying && style?.hoverPlay\"\r\n                                style=\"width:20%;height:20%;max-width:40px\">\r\n                        </div>\r\n                    </div>\r\n                </ng-container> -->\r\n            </div>\r\n        </div>\r\n    </div>\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}.main-video-section{display:flex;justify-content:center}.main-image-section{margin-bottom:1.5rem}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.wrap-scroll{overflow:scroll;flex-wrap:nowrap}@media screen and (min-width : 1200px){.grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;grid-gap:5px}.video-grid-section{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,170px);column-gap:10px;row-gap:10px;max-height:340px;overflow-x:scroll;overflow-y:hidden;grid-auto-columns:1fr;width:100%}.grid img:first-child:last-child{grid-column:1 / span 2}.grid img:first-child:nth-last-child(2),.grid img:nth-child(2):last-child{grid-column:span 1;height:100%}.grid img:nth-child(3n+1):not(:last-child){grid-column:1;grid-row:span 2;height:100%}.grid img:nth-child(3n+2){grid-column:2}.grid img:nth-child(3n+3){grid-column:2;align-self:end}.grid img:nth-child(3n+4){grid-column:1 / span 2}}.remove-gap{grid-gap:0!important}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width: 475px){.grid-columns{display:flex!important;width:100%;overflow-x:scroll}}.main-image-container{width:100%}@media screen and (max-width: 760px){.scroll-btn{display:none!important}}.right-column-container{display:flex;flex-direction:column;height:100%;padding:0}.image-half-height{height:50%!important;flex:1}.image-half-height:first-child{margin-bottom:2px}.scroll-btn{position:absolute;top:50%;z-index:10;font-size:18px;width:36px!important;height:36px!important;border-radius:50%;border:none}.w-fit{width:fit-content!important}.video-section{text-align:center}.video-section .video-wrapper{aspect-ratio:9 / 16;margin:0 auto;position:relative}.video-section .video-wrapper video{cursor:pointer}.video-section video{width:100%;height:100%;object-fit:cover}.scroll-btn.left{left:8px}.scroll-btn.right{right:8px}.product-badge{display:flex;align-items:center;gap:12px;padding:5px 10px;background:#fff9;border-radius:10px;width:90%;box-shadow:0 6px 18px #00000026;transition:background .3s ease,box-shadow .3s ease;min-width:230px}.product-badge:hover{background:#f0f0f0e6;box-shadow:0 8px 22px #0003}.product-img{width:42px;height:42px;object-fit:contain;flex-shrink:0}.product-info{display:flex;gap:4px}.grid-columns{grid-template-columns:50% 50%}.product-title{font-size:12px;font-weight:500;color:#1a1a1a;max-width:210px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.product-link{text-decoration:none;color:inherit}.products-cards{bottom:0;overflow-x:scroll}.product-price{font-size:16px;font-weight:700;color:#000}.mobile-stories-wrap{width:100%;overflow:hidden}.mobile-stories-scroll{display:flex;overflow-x:scroll;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;box-sizing:border-box;padding-bottom:12px}.mobile-stories-scroll::-webkit-scrollbar{display:none}.mobile-story-card{flex:0 0 72%;scroll-snap-align:center;position:relative;border-radius:14px;overflow:hidden;height:65vh;max-height:580px;margin-right:10px;flex-shrink:0}.mobile-story-card:last-child{margin-right:0}.mobile-story-card video,.mobile-story-card img{width:100%;height:100%;object-fit:cover;display:block}.mobile-story-text-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.65) 0%,transparent 100%);color:#fff;font-size:13px;font-weight:500;padding:50px 14px 18px;line-height:1.5;pointer-events:none}.mobile-story-play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#ffffff40;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto}@media screen and (min-width: 476px){.mobile-stories-wrap{display:none!important}}\n"], dependencies: [{ kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SimpoElementsModule }, { 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: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: VideoGridSectionComponent, isStandalone: true, selector: "simpo-video-grid-section", inputs: { data: "data", index: "index", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "videogrid", first: true, predicate: ["videogrid"], 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\">\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                [ngStyle]=\"style?.fullWidth ? {'padding': '0px'} : {}\"\r\n                [ngClass]=\"{'justify-content-center' : screenWidth < 475}\">\r\n                <!-- [ngClass]=\"{'w-100':style?.gridStyle === 'Style2'}\" -->\r\n                <div *ngFor=\"let text of data?.content?.inputText; let i = index\">\r\n                    <div [simpoContentTitleSpace]=\"headingSpace\">\r\n                        <ng-container *ngIf=\"edit ||  (text.value && text.value.length > 0)\">\r\n                            <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"text.isRTE\"></simpo-text-editor>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n\r\n                <!-- <ng-container *ngIf=\"style?.gridStyle == 'Style1'\"> -->\r\n                <button class=\"scroll-btn left p-0 d-flex align-items-center justify-content-center\"\r\n                    *ngIf=\"style?.direction === 'ROW' && isOverflowing\" (click)=\"scrollLeft()\"\r\n                    [disabled]=\"atStart\"><mat-icon>keyboard_arrow_left</mat-icon>\r\n                </button>\r\n\r\n                <div class=\"main-video-section\">\r\n                    <div class=\"main-image-section position-relative\"\r\n                        [class.row]=\"style?.direction == 'ROW' && screenWidth > 475\"\r\n                        [class.wrap-scroll]=\"style?.direction == 'ROW' && screenWidth > 475\"\r\n                        [class.flex-wrap]=\"style?.direction == 'COLUMN' && screenWidth > 475\" [id]=\"data?.id\" #videogrid\r\n                        [style.justifyContent]=\"getJustifyContent()\" (scroll)=\"onScroll()\"\r\n                        [ngClass]=\"{'d-grid grid-columns' : screenWidth < 475}\">\r\n                        <ng-container *ngIf=\"!content?.display?.showImage\">\r\n                            <div class=\"video-section p-3 w-auto d-flex flex-column gap-2 align-items-center justify-content-center\"\r\n                                *ngFor=\"let video of content?.listItem?.data; let i = index\" [simpoColumnDirective]=\"style?.size\"\r\n                                [id]=\"data?.id\"\r\n                                [attr.style]=\"style?.removeGaps ? 'padding: 0px !important; margin: 0px !important;' : {}\">\r\n                                <ng-container *ngIf=\"content?.display?.showText\">\r\n                                    <div\r\n                                        class=\"w-fit position-relative d-flex align-items-center justify-content-center\">\r\n                                        <ng-container *ngIf=\"style?.autoPlay && !style?.hoverPlay;else normalVideo\">\r\n                                            <video loading=\"lazy\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\"\r\n                                                #videoEl [class]=\"data?.id + video.video.id\" [src]=\"video.video.url\"\r\n                                                class=\"h-100 cursor-pointer\" [muted]=\"style?.muteVideos\" autoplay\r\n                                                (click)=\"openFullscreen(videoEl)\" loop></video>\r\n                                        </ng-container>\r\n                                        <ng-template #normalVideo>\r\n                                            <video loading=\"lazy\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\"\r\n                                                #videoEl [class]=\"data?.id + video.video.id\" [src]=\"video.video.url\"\r\n                                                class=\"h-100\" [muted]=\"style?.muteVideos\" [controls]=\"!style?.hoverPlay\"\r\n                                                (mouseenter)=\"style?.hoverPlay && onVideoHover(videoEl, video.video)\"\r\n                                                (mouseleave)=\"style?.hoverPlay && onVideoLeave(videoEl, video.video)\"\r\n                                                (click)=\"openFullscreen(videoEl)\"\r\n                                                [ngClass]=\"{ 'cursor-pointer': style?.hoverPlay }\"></video>\r\n                                        </ng-template>\r\n                                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/172648c1769671647159play-fill-svgrepo-com.svg\"\r\n                                            class=\"position-absolute\"\r\n                                            *ngIf=\"!video?.video?.isVideoPlaying && style?.hoverPlay\"\r\n                                            style=\"width:20px\">\r\n                                    </div>\r\n                                    <simpo-text-editor [(value)]=\"video.video.description\"\r\n                                        [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [itemIndex]=\"i\"></simpo-text-editor>\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"!content?.display?.showText\">\r\n                                    <div class=\"video-wrapper position-relative\" [id]=\"data?.id\"\r\n                                        [ngStyle]=\"{'width' : style?.size === 'Small' ? '180px' : style?.size === 'Medium' ? '220px' : '270px' }\">\r\n                                        <ng-container *ngIf=\"style?.autoPlay && !style?.hoverPlay;else normalVideo\">\r\n                                            <video loading=\"lazy\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\"\r\n                                                #videoEl [class]=\"data?.id + video.video.id\" [src]=\"video.video.url\"\r\n                                                class=\"h-100\" [muted]=\"style?.muteVideos\"\r\n                                                [simpoVideoDirective]=\"style?.image\" [controls]=\"style?.hoverPlay\"\r\n                                                (mouseenter)=\"style?.hoverPlay && onVideoHover(videoEl, video.video)\"\r\n                                                (mouseleave)=\"style?.hoverPlay && onVideoLeave(videoEl, video.video)\"\r\n                                                (click)=\"openFullVideo(video.video)\" autoplay loop></video>\r\n                                        </ng-container>\r\n                                        <ng-template #normalVideo>\r\n                                            <video loading=\"lazy\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\"\r\n                                                #videoEl [class]=\"data?.id + video.video.id\" [src]=\"video.video.url\"\r\n                                                class=\"h-100\" [muted]=\"style?.muteVideos\"\r\n                                                [simpoVideoDirective]=\"style?.image\" [controls]=\"!style?.hoverPlay\"\r\n                                                (mouseenter)=\"style?.hoverPlay && onVideoHover(videoEl, video.video)\"\r\n                                                (mouseleave)=\"style?.hoverPlay && onVideoLeave(videoEl, video.video)\"\r\n                                                (click)=\"openFullVideo(video.video)\"></video>\r\n                                        </ng-template>\r\n                                        <div class=\"position-absolute products-cards w-100 p-3 d-flex gap-3 overflow-x-auto cursor-pointer\"\r\n                                            *ngIf=\"video?.video?.products?.length > 0 && content?.display?.showProducts\">\r\n                                            <ng-container *ngFor=\"let product of video.video.products\">\r\n                                                <div class=\"product-badge\">\r\n                                                    <a [href]=\"product.redirectionUrl\" class=\"product-link\">\r\n                                                        <img [src]=\"product?.itemImages[0].imgUrl\" alt=\"Ring\"\r\n                                                            class=\"product-img\" /></a>\r\n                                                    <div class=\"product-info\">\r\n                                                        <a [href]=\"product.redirectionUrl\" class=\"product-link\">\r\n                                                            <div class=\"product-details d-flex flex-column gap-1\">\r\n                                                                <div class=\"product-title\">\r\n                                                                    {{product.name.length > 16 ?\r\n                                                                    product.name.trim().slice(0,15)\r\n                                                                    +\r\n                                                                    '...' :\r\n                                                                    product.name }}\r\n                                                                </div>\r\n                                                                <div class=\"product-price d-flex align-items-start\">\r\n                                                                    \u20B9{{product?.price.sellingPrice}}\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </a>\r\n                                                        <div\r\n                                                            class=\"d-flex align-items-center justify-content-center gap-1\">\r\n                                                            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/700072c1770270395432favourite-svgrepo-com.svg\"\r\n                                                                style=\"width: 18px;\"\r\n                                                                (click)=\"toggleItemToFav($event, product, 'ADD')\"\r\n                                                                *ngIf=\"!product.whislist\">\r\n                                                            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304116c1770274132910favourite-svgrepo-com_(1).svg\"\r\n                                                                style=\"width: 18px;\" *ngIf=\"product.whislist\"\r\n                                                                (click)=\"toggleItemToFav($event, product, 'REMOVE')\">\r\n                                                            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/695144c1770270669546cart-shopping-svgrepo-com.svg\"\r\n                                                                style=\"width:19px\"\r\n                                                                (click)=\"addItemToCart($event, product, 'ADD')\"\r\n                                                                *ngIf=\"product.quantity <= 0\">\r\n                                                            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/795342c1770275383344shopping-cart-fill-svgrepo-com.svg\"\r\n                                                                style=\"width:19px\" *ngIf=\"product.quantity >= 1\"\r\n                                                                (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </ng-container>\r\n                                        </div>\r\n                                        <div *ngIf=\"!video?.video?.isVideoPlaying && style?.hoverPlay\"\r\n                                            class=\"position-absolute d-flex align-items-center justify-content-center\"\r\n                                            style=\"padding: 9px;top: 47%;left: 40%;background: lightgrey;border-radius: 50%;background: rgba(240, 240, 240, 0.6);backdrop-filter: blur(4px);-webkit-backdrop-filter: blur(4px);\">\r\n                                            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/935060c1770214072755play-svgrepo-com.svg\"\r\n                                                class=\"\" style=\"width:25px;margin-left:1.5px\">\r\n                                        </div>\r\n                                    </div>\r\n                                </ng-container>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.display?.showImage\">\r\n                            <div class=\"video-section p-3 w-auto d-flex flex-column gap-2 align-items-center justify-content-center\"\r\n                                *ngFor=\"let image of content?.listItem?.data; let i = index\" [simpoColumnDirective]=\"style?.size\"\r\n                                [id]=\"data?.id\"\r\n                                [attr.style]=\"style?.removeGaps ? 'padding: 0px !important; margin: 0px !important;' : {}\">\r\n                                <ng-container>\r\n                                    <div class=\"video-wrapper position-relative\" [id]=\"data?.id\"\r\n                                        [ngClass]=\"{'h-100':screenWidth<475}\"\r\n                                        [ngStyle]=\"{'width' : screenWidth > 475 ? (style?.size === 'Small' ? '180px' : style?.size === 'Medium' ? '220px' : '270px'): '100%' }\">\r\n                                        <img loading=\"lazy\" [src]=\"image.image.url\" [alt]=\"image.image.altText\"\r\n                                            [simpoImageDirective]=\"image.image\"\r\n                                            [attr.simpoObjectPosition]=\"image?.image?.fit !== 'contain' ? image.image?.position : null\"\r\n                                            [simpoCorner]=\"style?.corners\" class=\"w-100 h-100\"\r\n                                            [appImageEditor]=\"edit || false\" [imageData]=\"image.image\"\r\n                                            [sectionId]=\"data?.id\" [itemIndex]=\"i\" [simpoObjectPosition]=\"image?.image?.position\"\r\n                                            [class]=\"data?.id+image.image.id\">\r\n                                    </div>\r\n                                </ng-container>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n\r\n                <button class=\"scroll-btn right p-0 d-flex align-items-center justify-content-center\"\r\n                    *ngIf=\"style?.direction === 'ROW' && isOverflowing\" (click)=\"scrollRight()\"\r\n                    [disabled]=\"atEnd\"><mat-icon>keyboard_arrow_right</mat-icon>\r\n                </button>\r\n                <!-- </ng-container> -->\r\n                <!-- <ng-container *ngIf=\"style?.gridStyle == 'Style2'\">\r\n                    <div class=\"video-grid-section h-100\" [class.remove-gap]=\"style?.removeGaps\"\r\n                        [class.p-0]=\"style?.fullWidth\">\r\n                        <div class=\"video-section\" *ngFor=\"let video of content?.listItem?.data\" style=\"min-width:300px\"\r\n                            [ngClass]=\"{'position-relative d-flex align-items-center justify-content-center' : !video?.video?.isVideoPlaying && style?.hoverPlay}\">\r\n                            <video loading=\"lazy\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" #videoEl\r\n                                [class]=\"data?.id+video.video.id\" [simpoObjectPosition]=\"video.video.position\"\r\n                                [src]=\"video.video.url\" loading=\"lazy\" class=\"h-100\" [controls]=\"!style?.hoverPlay\"\r\n                                (mouseenter)=\"style?.hoverPlay && onVideoHover(videoEl,video.video)\"\r\n                                [muted]=\"style?.muteVideos\"\r\n                                (mouseleave)=\"style?.hoverPlay && onVideoLeave(videoEl,video.video)\"\r\n                                (click)=\"openFullscreen(videoEl)\"\r\n                                [ngClass]=\"{'cursor-pointer' : style?.hoverPlay}\"></video>\r\n                            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/172648c1769671647159play-fill-svgrepo-com.svg\"\r\n                                class=\"position-absolute\" *ngIf=\"!video?.video?.isVideoPlaying && style?.hoverPlay\"\r\n                                style=\"width:20%;height:20%;max-width:40px\">\r\n                        </div>\r\n                    </div>\r\n                </ng-container> -->\r\n            </div>\r\n        </div>\r\n    </div>\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}.main-video-section{display:flex;justify-content:center}.main-image-section{margin-bottom:1.5rem}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.wrap-scroll{overflow:scroll;flex-wrap:nowrap}@media screen and (min-width : 1200px){.grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;grid-gap:5px}.video-grid-section{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,170px);column-gap:10px;row-gap:10px;max-height:340px;overflow-x:scroll;overflow-y:hidden;grid-auto-columns:1fr;width:100%}.grid img:first-child:last-child{grid-column:1 / span 2}.grid img:first-child:nth-last-child(2),.grid img:nth-child(2):last-child{grid-column:span 1;height:100%}.grid img:nth-child(3n+1):not(:last-child){grid-column:1;grid-row:span 2;height:100%}.grid img:nth-child(3n+2){grid-column:2}.grid img:nth-child(3n+3){grid-column:2;align-self:end}.grid img:nth-child(3n+4){grid-column:1 / span 2}}.remove-gap{grid-gap:0!important}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}.main-image-container{width:100%}@media screen and (max-width: 760px){.scroll-btn{display:none!important}}.right-column-container{display:flex;flex-direction:column;height:100%;padding:0}.image-half-height{height:50%!important;flex:1}.image-half-height:first-child{margin-bottom:2px}.scroll-btn{position:absolute;top:50%;z-index:10;font-size:18px;width:36px!important;height:36px!important;border-radius:50%;border:none}.w-fit{width:fit-content!important}.video-section{text-align:center}.video-section .video-wrapper{aspect-ratio:9 / 16;margin:0 auto;position:relative}.video-section .video-wrapper video{cursor:pointer}.video-section video{width:100%;height:100%;object-fit:cover}.scroll-btn.left{left:8px}.scroll-btn.right{right:8px}.product-badge{display:flex;align-items:center;gap:12px;padding:5px 10px;background:#fff9;border-radius:10px;width:90%;box-shadow:0 6px 18px #00000026;transition:background .3s ease,box-shadow .3s ease;min-width:230px}.product-badge:hover{background:#f0f0f0e6;box-shadow:0 8px 22px #0003}.product-img{width:42px;height:42px;object-fit:contain;flex-shrink:0}.product-info{display:flex;gap:4px}.grid-columns{grid-template-columns:50% 50%}.product-title{font-size:12px;font-weight:500;color:#1a1a1a;max-width:210px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.product-link{text-decoration:none;color:inherit}.products-cards{bottom:0;overflow-x:scroll}.product-price{font-size:16px;font-weight:700;color:#000}\n"], dependencies: [{ kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SimpoElementsModule }, { 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: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: 
                 //Directives
                 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: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: VideoDirectiveDirective, selector: "[simpoVideoDirective]", inputs: ["simpoVideoDirective"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData", "itemIndex"] }] }); }
 }
@@ -26476,7 +26476,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ImageDirectiveDirective,
                         ObjectPositionDirective,
                         ImageEditorDirective
-                    ], providers: [MessageService], 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                [ngStyle]=\"style?.fullWidth ? {'padding': '0px'} : {}\"\r\n                [ngClass]=\"{'justify-content-center' : screenWidth < 475}\">\r\n                <!-- [ngClass]=\"{'w-100':style?.gridStyle === 'Style2'}\" -->\r\n                <div *ngFor=\"let text of data?.content?.inputText; let i = index\">\r\n                    <div [simpoContentTitleSpace]=\"headingSpace\">\r\n                        <ng-container *ngIf=\"edit ||  (text.value && text.value.length > 0)\">\r\n                            <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\"\r\n                                [inputTextIndex]=\"i\" [isRTE]=\"text.isRTE\"></simpo-text-editor>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n\r\n                <!-- <ng-container *ngIf=\"style?.gridStyle == 'Style1'\"> -->\r\n                <button class=\"scroll-btn left p-0 d-flex align-items-center justify-content-center\"\r\n                    *ngIf=\"style?.direction === 'ROW' && isOverflowing\" (click)=\"scrollLeft()\"\r\n                    [disabled]=\"atStart\"><mat-icon>keyboard_arrow_left</mat-icon>\r\n                </button>\r\n\r\n                <div class=\"main-video-section\">\r\n\r\n                    <!-- Mobile Stories Peek Carousel (< 475px) -->\r\n                    <ng-container *ngIf=\"screenWidth < 475\">\r\n                        <div class=\"mobile-stories-wrap\">\r\n                            <div class=\"mobile-stories-scroll\">\r\n                                <ng-container *ngIf=\"!content?.display?.showImage\">\r\n                                    <div class=\"mobile-story-card\"\r\n                                        *ngFor=\"let video of content?.listItem?.data; let i = index\">\r\n                                        <video loading=\"lazy\" [simpoCorner]=\"style?.corners\" [src]=\"video.video.url\"\r\n                                            [muted]=\"true\" autoplay loop playsinline class=\"cursor-pointer\"\r\n                                            (click)=\"openFullVideo(video.video)\"></video>\r\n                                        <!-- <div class=\"mobile-story-play-btn\" (click)=\"openFullVideo(video.video)\">\r\n                                            <img\r\n                                                src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/935060c1770214072755play-svgrepo-com.svg\">\r\n                                        </div> -->\r\n                                        <div class=\"mobile-story-text-overlay\" *ngIf=\"video?.video?.description && content?.display?.showText\">\r\n                                            {{ video.video.description }}\r\n                                        </div>\r\n                                        <div class=\"position-absolute products-cards w-100 p-2 d-flex gap-2 overflow-x-auto cursor-pointer\"\r\n                                            *ngIf=\"video?.video?.products?.length > 0 && content?.display?.showProducts\">\r\n                                            <ng-container *ngFor=\"let product of video.video.products\">\r\n                                                <div class=\"product-badge\">\r\n                                                    <a [href]=\"product.redirectionUrl\" class=\"product-link\">\r\n                                                        <img [src]=\"product?.itemImages[0].imgUrl\" alt=\"\"\r\n                                                            class=\"product-img\" /></a>\r\n                                                    <div class=\"product-info\">\r\n                                                        <a [href]=\"product.redirectionUrl\" class=\"product-link\">\r\n                                                            <div class=\"product-details d-flex flex-column gap-1\">\r\n                                                                <div class=\"product-title\">{{product.name.length > 16 ?\r\n                                                                    product.name.trim().slice(0,15) + '...' :\r\n                                                                    product.name}}</div>\r\n                                                                <div class=\"product-price d-flex align-items-start\">\r\n                                                                    \u20B9{{product?.price.sellingPrice}}</div>\r\n                                                            </div>\r\n                                                        </a>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </ng-container>\r\n                                        </div>\r\n                                    </div>\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"content?.display?.showImage\">\r\n                                    <div class=\"mobile-story-card\"\r\n                                        *ngFor=\"let image of content?.listItem?.data; let i = index\">\r\n                                        <img loading=\"lazy\" [src]=\"image.image.url\" [alt]=\"image.image.altText\"\r\n                                            [simpoCorner]=\"style?.corners\">\r\n                                    </div>\r\n                                </ng-container>\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n\r\n                    <!-- Desktop / Tablet Layout (>= 475px) -->\r\n                    <div class=\"main-image-section position-relative\" [class.d-none]=\"screenWidth < 475\"\r\n                        [class.row]=\"style?.direction == 'ROW' && screenWidth > 475\"\r\n                        [class.wrap-scroll]=\"style?.direction == 'ROW' && screenWidth > 475\"\r\n                        [class.flex-wrap]=\"style?.direction == 'COLUMN' && screenWidth > 475\" [id]=\"data?.id\" #videogrid\r\n                        [style.justifyContent]=\"getJustifyContent()\" (scroll)=\"onScroll()\">\r\n                        <ng-container *ngIf=\"!content?.display?.showImage\">\r\n                            <div class=\"video-section p-3 w-auto d-flex flex-column gap-2 align-items-center justify-content-center\"\r\n                                *ngFor=\"let video of content?.listItem?.data; let i = index\"\r\n                                [simpoColumnDirective]=\"style?.size\" [id]=\"data?.id\"\r\n                                [attr.style]=\"style?.removeGaps ? 'padding: 0px !important; margin: 0px !important;' : {}\">\r\n                                <ng-container *ngIf=\"content?.display?.showText\">\r\n                                    <div\r\n                                        class=\"w-fit position-relative d-flex align-items-center justify-content-center\">\r\n                                        <ng-container *ngIf=\"style?.autoPlay && !style?.hoverPlay;else normalVideo\">\r\n                                            <video loading=\"lazy\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\"\r\n                                                #videoEl [class]=\"data?.id + video.video.id\" [src]=\"video.video.url\"\r\n                                                class=\"h-100 cursor-pointer\" [muted]=\"style?.muteVideos\" autoplay\r\n                                                (click)=\"openFullscreen(videoEl)\" loop></video>\r\n                                        </ng-container>\r\n                                        <ng-template #normalVideo>\r\n                                            <video loading=\"lazy\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\"\r\n                                                #videoEl [class]=\"data?.id + video.video.id\" [src]=\"video.video.url\"\r\n                                                class=\"h-100\" [muted]=\"style?.muteVideos\" [controls]=\"!style?.hoverPlay\"\r\n                                                (mouseenter)=\"style?.hoverPlay && onVideoHover(videoEl, video.video)\"\r\n                                                (mouseleave)=\"style?.hoverPlay && onVideoLeave(videoEl, video.video)\"\r\n                                                (click)=\"openFullscreen(videoEl)\"\r\n                                                [ngClass]=\"{ 'cursor-pointer': style?.hoverPlay }\"></video>\r\n                                        </ng-template>\r\n                                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/172648c1769671647159play-fill-svgrepo-com.svg\"\r\n                                            class=\"position-absolute\"\r\n                                            *ngIf=\"!video?.video?.isVideoPlaying && style?.hoverPlay\"\r\n                                            style=\"width:20px\">\r\n                                    </div>\r\n                                    <simpo-text-editor [(value)]=\"video.video.description\" [editable]=\"edit || false\"\r\n                                        [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [itemIndex]=\"i\"></simpo-text-editor>\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"!content?.display?.showText\">\r\n                                    <div class=\"video-wrapper position-relative\" [id]=\"data?.id\"\r\n                                        [ngStyle]=\"{'width' : style?.size === 'Small' ? '180px' : style?.size === 'Medium' ? '220px' : '270px' }\">\r\n                                        <ng-container *ngIf=\"style?.autoPlay && !style?.hoverPlay;else normalVideo\">\r\n                                            <video loading=\"lazy\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\"\r\n                                                #videoEl [class]=\"data?.id + video.video.id\" [src]=\"video.video.url\"\r\n                                                class=\"h-100\" [muted]=\"style?.muteVideos\"\r\n                                                [simpoVideoDirective]=\"style?.image\" [controls]=\"style?.hoverPlay\"\r\n                                                (mouseenter)=\"style?.hoverPlay && onVideoHover(videoEl, video.video)\"\r\n                                                (mouseleave)=\"style?.hoverPlay && onVideoLeave(videoEl, video.video)\"\r\n                                                (click)=\"openFullVideo(video.video)\" autoplay loop></video>\r\n                                        </ng-container>\r\n                                        <ng-template #normalVideo>\r\n                                            <video loading=\"lazy\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\"\r\n                                                #videoEl [class]=\"data?.id + video.video.id\" [src]=\"video.video.url\"\r\n                                                class=\"h-100\" [muted]=\"style?.muteVideos\"\r\n                                                [simpoVideoDirective]=\"style?.image\" [controls]=\"!style?.hoverPlay\"\r\n                                                (mouseenter)=\"style?.hoverPlay && onVideoHover(videoEl, video.video)\"\r\n                                                (mouseleave)=\"style?.hoverPlay && onVideoLeave(videoEl, video.video)\"\r\n                                                (click)=\"openFullVideo(video.video)\"></video>\r\n                                        </ng-template>\r\n                                        <div class=\"position-absolute products-cards w-100 p-3 d-flex gap-3 overflow-x-auto cursor-pointer\"\r\n                                            *ngIf=\"video?.video?.products?.length > 0 && content?.display?.showProducts\">\r\n                                            <ng-container *ngFor=\"let product of video.video.products\">\r\n                                                <div class=\"product-badge\">\r\n                                                    <a [href]=\"product.redirectionUrl\" class=\"product-link\">\r\n                                                        <img [src]=\"product?.itemImages[0].imgUrl\" alt=\"Ring\"\r\n                                                            class=\"product-img\" /></a>\r\n                                                    <div class=\"product-info\">\r\n                                                        <a [href]=\"product.redirectionUrl\" class=\"product-link\">\r\n                                                            <div class=\"product-details d-flex flex-column gap-1\">\r\n                                                                <div class=\"product-title\">\r\n                                                                    {{product.name.length > 16 ?\r\n                                                                    product.name.trim().slice(0,15)\r\n                                                                    +\r\n                                                                    '...' :\r\n                                                                    product.name }}\r\n                                                                </div>\r\n                                                                <div class=\"product-price d-flex align-items-start\">\r\n                                                                    \u20B9{{product?.price.sellingPrice}}\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </a>\r\n                                                        <div\r\n                                                            class=\"d-flex align-items-center justify-content-center gap-1\">\r\n                                                            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/700072c1770270395432favourite-svgrepo-com.svg\"\r\n                                                                style=\"width: 18px;\"\r\n                                                                (click)=\"toggleItemToFav($event, product, 'ADD')\"\r\n                                                                *ngIf=\"!product.whislist\">\r\n                                                            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304116c1770274132910favourite-svgrepo-com_(1).svg\"\r\n                                                                style=\"width: 18px;\" *ngIf=\"product.whislist\"\r\n                                                                (click)=\"toggleItemToFav($event, product, 'REMOVE')\">\r\n                                                            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/695144c1770270669546cart-shopping-svgrepo-com.svg\"\r\n                                                                style=\"width:19px\"\r\n                                                                (click)=\"addItemToCart($event, product, 'ADD')\"\r\n                                                                *ngIf=\"product.quantity <= 0\">\r\n                                                            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/795342c1770275383344shopping-cart-fill-svgrepo-com.svg\"\r\n                                                                style=\"width:19px\" *ngIf=\"product.quantity >= 1\"\r\n                                                                (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </ng-container>\r\n                                        </div>\r\n                                        <div *ngIf=\"!video?.video?.isVideoPlaying && style?.hoverPlay\"\r\n                                            class=\"position-absolute d-flex align-items-center justify-content-center\"\r\n                                            style=\"padding: 9px;top: 47%;left: 40%;background: lightgrey;border-radius: 50%;background: rgba(240, 240, 240, 0.6);backdrop-filter: blur(4px);-webkit-backdrop-filter: blur(4px);\">\r\n                                            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/935060c1770214072755play-svgrepo-com.svg\"\r\n                                                class=\"\" style=\"width:25px;margin-left:1.5px\">\r\n                                        </div>\r\n                                    </div>\r\n                                </ng-container>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.display?.showImage\">\r\n                            <div class=\"video-section p-3 w-auto d-flex flex-column gap-2 align-items-center justify-content-center\"\r\n                                *ngFor=\"let image of content?.listItem?.data; let i = index\"\r\n                                [simpoColumnDirective]=\"style?.size\" [id]=\"data?.id\"\r\n                                [attr.style]=\"style?.removeGaps ? 'padding: 0px !important; margin: 0px !important;' : {}\">\r\n                                <ng-container>\r\n                                    <div class=\"video-wrapper position-relative\" [id]=\"data?.id\"\r\n                                        [ngClass]=\"{'h-100':screenWidth<475}\"\r\n                                        [ngStyle]=\"{'width' : screenWidth > 475 ? (style?.size === 'Small' ? '180px' : style?.size === 'Medium' ? '220px' : '270px'): '100%' }\">\r\n                                        <img loading=\"lazy\" [src]=\"image.image.url\" [alt]=\"image.image.altText\"\r\n                                            [simpoImageDirective]=\"image.image\"\r\n                                            [attr.simpoObjectPosition]=\"image?.image?.fit !== 'contain' ? image.image?.position : null\"\r\n                                            [simpoCorner]=\"style?.corners\" class=\"w-100 h-100\"\r\n                                            [appImageEditor]=\"edit || false\" [imageData]=\"image.image\"\r\n                                            [sectionId]=\"data?.id\" [itemIndex]=\"i\"\r\n                                            [simpoObjectPosition]=\"image?.image?.position\"\r\n                                            [class]=\"data?.id+image.image.id\">\r\n                                    </div>\r\n                                </ng-container>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n\r\n                <button class=\"scroll-btn right p-0 d-flex align-items-center justify-content-center\"\r\n                    *ngIf=\"style?.direction === 'ROW' && isOverflowing\" (click)=\"scrollRight()\"\r\n                    [disabled]=\"atEnd\"><mat-icon>keyboard_arrow_right</mat-icon>\r\n                </button>\r\n                <!-- </ng-container> -->\r\n                <!-- <ng-container *ngIf=\"style?.gridStyle == 'Style2'\">\r\n                    <div class=\"video-grid-section h-100\" [class.remove-gap]=\"style?.removeGaps\"\r\n                        [class.p-0]=\"style?.fullWidth\">\r\n                        <div class=\"video-section\" *ngFor=\"let video of content?.listItem?.data\" style=\"min-width:300px\"\r\n                            [ngClass]=\"{'position-relative d-flex align-items-center justify-content-center' : !video?.video?.isVideoPlaying && style?.hoverPlay}\">\r\n                            <video loading=\"lazy\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" #videoEl\r\n                                [class]=\"data?.id+video.video.id\" [simpoObjectPosition]=\"video.video.position\"\r\n                                [src]=\"video.video.url\" loading=\"lazy\" class=\"h-100\" [controls]=\"!style?.hoverPlay\"\r\n                                (mouseenter)=\"style?.hoverPlay && onVideoHover(videoEl,video.video)\"\r\n                                [muted]=\"style?.muteVideos\"\r\n                                (mouseleave)=\"style?.hoverPlay && onVideoLeave(videoEl,video.video)\"\r\n                                (click)=\"openFullscreen(videoEl)\"\r\n                                [ngClass]=\"{'cursor-pointer' : style?.hoverPlay}\"></video>\r\n                            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/172648c1769671647159play-fill-svgrepo-com.svg\"\r\n                                class=\"position-absolute\" *ngIf=\"!video?.video?.isVideoPlaying && style?.hoverPlay\"\r\n                                style=\"width:20%;height:20%;max-width:40px\">\r\n                        </div>\r\n                    </div>\r\n                </ng-container> -->\r\n            </div>\r\n        </div>\r\n    </div>\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}.main-video-section{display:flex;justify-content:center}.main-image-section{margin-bottom:1.5rem}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.wrap-scroll{overflow:scroll;flex-wrap:nowrap}@media screen and (min-width : 1200px){.grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;grid-gap:5px}.video-grid-section{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,170px);column-gap:10px;row-gap:10px;max-height:340px;overflow-x:scroll;overflow-y:hidden;grid-auto-columns:1fr;width:100%}.grid img:first-child:last-child{grid-column:1 / span 2}.grid img:first-child:nth-last-child(2),.grid img:nth-child(2):last-child{grid-column:span 1;height:100%}.grid img:nth-child(3n+1):not(:last-child){grid-column:1;grid-row:span 2;height:100%}.grid img:nth-child(3n+2){grid-column:2}.grid img:nth-child(3n+3){grid-column:2;align-self:end}.grid img:nth-child(3n+4){grid-column:1 / span 2}}.remove-gap{grid-gap:0!important}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width: 475px){.grid-columns{display:flex!important;width:100%;overflow-x:scroll}}.main-image-container{width:100%}@media screen and (max-width: 760px){.scroll-btn{display:none!important}}.right-column-container{display:flex;flex-direction:column;height:100%;padding:0}.image-half-height{height:50%!important;flex:1}.image-half-height:first-child{margin-bottom:2px}.scroll-btn{position:absolute;top:50%;z-index:10;font-size:18px;width:36px!important;height:36px!important;border-radius:50%;border:none}.w-fit{width:fit-content!important}.video-section{text-align:center}.video-section .video-wrapper{aspect-ratio:9 / 16;margin:0 auto;position:relative}.video-section .video-wrapper video{cursor:pointer}.video-section video{width:100%;height:100%;object-fit:cover}.scroll-btn.left{left:8px}.scroll-btn.right{right:8px}.product-badge{display:flex;align-items:center;gap:12px;padding:5px 10px;background:#fff9;border-radius:10px;width:90%;box-shadow:0 6px 18px #00000026;transition:background .3s ease,box-shadow .3s ease;min-width:230px}.product-badge:hover{background:#f0f0f0e6;box-shadow:0 8px 22px #0003}.product-img{width:42px;height:42px;object-fit:contain;flex-shrink:0}.product-info{display:flex;gap:4px}.grid-columns{grid-template-columns:50% 50%}.product-title{font-size:12px;font-weight:500;color:#1a1a1a;max-width:210px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.product-link{text-decoration:none;color:inherit}.products-cards{bottom:0;overflow-x:scroll}.product-price{font-size:16px;font-weight:700;color:#000}.mobile-stories-wrap{width:100%;overflow:hidden}.mobile-stories-scroll{display:flex;overflow-x:scroll;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;box-sizing:border-box;padding-bottom:12px}.mobile-stories-scroll::-webkit-scrollbar{display:none}.mobile-story-card{flex:0 0 72%;scroll-snap-align:center;position:relative;border-radius:14px;overflow:hidden;height:65vh;max-height:580px;margin-right:10px;flex-shrink:0}.mobile-story-card:last-child{margin-right:0}.mobile-story-card video,.mobile-story-card img{width:100%;height:100%;object-fit:cover;display:block}.mobile-story-text-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.65) 0%,transparent 100%);color:#fff;font-size:13px;font-weight:500;padding:50px 14px 18px;line-height:1.5;pointer-events:none}.mobile-story-play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#ffffff40;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto}@media screen and (min-width: 476px){.mobile-stories-wrap{display:none!important}}\n"] }]
+                    ], providers: [MessageService], 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                [ngStyle]=\"style?.fullWidth ? {'padding': '0px'} : {}\"\r\n                [ngClass]=\"{'justify-content-center' : screenWidth < 475}\">\r\n                <!-- [ngClass]=\"{'w-100':style?.gridStyle === 'Style2'}\" -->\r\n                <div *ngFor=\"let text of data?.content?.inputText; let i = index\">\r\n                    <div [simpoContentTitleSpace]=\"headingSpace\">\r\n                        <ng-container *ngIf=\"edit ||  (text.value && text.value.length > 0)\">\r\n                            <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"text.isRTE\"></simpo-text-editor>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n\r\n                <!-- <ng-container *ngIf=\"style?.gridStyle == 'Style1'\"> -->\r\n                <button class=\"scroll-btn left p-0 d-flex align-items-center justify-content-center\"\r\n                    *ngIf=\"style?.direction === 'ROW' && isOverflowing\" (click)=\"scrollLeft()\"\r\n                    [disabled]=\"atStart\"><mat-icon>keyboard_arrow_left</mat-icon>\r\n                </button>\r\n\r\n                <div class=\"main-video-section\">\r\n                    <div class=\"main-image-section position-relative\"\r\n                        [class.row]=\"style?.direction == 'ROW' && screenWidth > 475\"\r\n                        [class.wrap-scroll]=\"style?.direction == 'ROW' && screenWidth > 475\"\r\n                        [class.flex-wrap]=\"style?.direction == 'COLUMN' && screenWidth > 475\" [id]=\"data?.id\" #videogrid\r\n                        [style.justifyContent]=\"getJustifyContent()\" (scroll)=\"onScroll()\"\r\n                        [ngClass]=\"{'d-grid grid-columns' : screenWidth < 475}\">\r\n                        <ng-container *ngIf=\"!content?.display?.showImage\">\r\n                            <div class=\"video-section p-3 w-auto d-flex flex-column gap-2 align-items-center justify-content-center\"\r\n                                *ngFor=\"let video of content?.listItem?.data; let i = index\" [simpoColumnDirective]=\"style?.size\"\r\n                                [id]=\"data?.id\"\r\n                                [attr.style]=\"style?.removeGaps ? 'padding: 0px !important; margin: 0px !important;' : {}\">\r\n                                <ng-container *ngIf=\"content?.display?.showText\">\r\n                                    <div\r\n                                        class=\"w-fit position-relative d-flex align-items-center justify-content-center\">\r\n                                        <ng-container *ngIf=\"style?.autoPlay && !style?.hoverPlay;else normalVideo\">\r\n                                            <video loading=\"lazy\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\"\r\n                                                #videoEl [class]=\"data?.id + video.video.id\" [src]=\"video.video.url\"\r\n                                                class=\"h-100 cursor-pointer\" [muted]=\"style?.muteVideos\" autoplay\r\n                                                (click)=\"openFullscreen(videoEl)\" loop></video>\r\n                                        </ng-container>\r\n                                        <ng-template #normalVideo>\r\n                                            <video loading=\"lazy\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\"\r\n                                                #videoEl [class]=\"data?.id + video.video.id\" [src]=\"video.video.url\"\r\n                                                class=\"h-100\" [muted]=\"style?.muteVideos\" [controls]=\"!style?.hoverPlay\"\r\n                                                (mouseenter)=\"style?.hoverPlay && onVideoHover(videoEl, video.video)\"\r\n                                                (mouseleave)=\"style?.hoverPlay && onVideoLeave(videoEl, video.video)\"\r\n                                                (click)=\"openFullscreen(videoEl)\"\r\n                                                [ngClass]=\"{ 'cursor-pointer': style?.hoverPlay }\"></video>\r\n                                        </ng-template>\r\n                                        <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/172648c1769671647159play-fill-svgrepo-com.svg\"\r\n                                            class=\"position-absolute\"\r\n                                            *ngIf=\"!video?.video?.isVideoPlaying && style?.hoverPlay\"\r\n                                            style=\"width:20px\">\r\n                                    </div>\r\n                                    <simpo-text-editor [(value)]=\"video.video.description\"\r\n                                        [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\" [itemIndex]=\"i\"></simpo-text-editor>\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"!content?.display?.showText\">\r\n                                    <div class=\"video-wrapper position-relative\" [id]=\"data?.id\"\r\n                                        [ngStyle]=\"{'width' : style?.size === 'Small' ? '180px' : style?.size === 'Medium' ? '220px' : '270px' }\">\r\n                                        <ng-container *ngIf=\"style?.autoPlay && !style?.hoverPlay;else normalVideo\">\r\n                                            <video loading=\"lazy\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\"\r\n                                                #videoEl [class]=\"data?.id + video.video.id\" [src]=\"video.video.url\"\r\n                                                class=\"h-100\" [muted]=\"style?.muteVideos\"\r\n                                                [simpoVideoDirective]=\"style?.image\" [controls]=\"style?.hoverPlay\"\r\n                                                (mouseenter)=\"style?.hoverPlay && onVideoHover(videoEl, video.video)\"\r\n                                                (mouseleave)=\"style?.hoverPlay && onVideoLeave(videoEl, video.video)\"\r\n                                                (click)=\"openFullVideo(video.video)\" autoplay loop></video>\r\n                                        </ng-container>\r\n                                        <ng-template #normalVideo>\r\n                                            <video loading=\"lazy\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\"\r\n                                                #videoEl [class]=\"data?.id + video.video.id\" [src]=\"video.video.url\"\r\n                                                class=\"h-100\" [muted]=\"style?.muteVideos\"\r\n                                                [simpoVideoDirective]=\"style?.image\" [controls]=\"!style?.hoverPlay\"\r\n                                                (mouseenter)=\"style?.hoverPlay && onVideoHover(videoEl, video.video)\"\r\n                                                (mouseleave)=\"style?.hoverPlay && onVideoLeave(videoEl, video.video)\"\r\n                                                (click)=\"openFullVideo(video.video)\"></video>\r\n                                        </ng-template>\r\n                                        <div class=\"position-absolute products-cards w-100 p-3 d-flex gap-3 overflow-x-auto cursor-pointer\"\r\n                                            *ngIf=\"video?.video?.products?.length > 0 && content?.display?.showProducts\">\r\n                                            <ng-container *ngFor=\"let product of video.video.products\">\r\n                                                <div class=\"product-badge\">\r\n                                                    <a [href]=\"product.redirectionUrl\" class=\"product-link\">\r\n                                                        <img [src]=\"product?.itemImages[0].imgUrl\" alt=\"Ring\"\r\n                                                            class=\"product-img\" /></a>\r\n                                                    <div class=\"product-info\">\r\n                                                        <a [href]=\"product.redirectionUrl\" class=\"product-link\">\r\n                                                            <div class=\"product-details d-flex flex-column gap-1\">\r\n                                                                <div class=\"product-title\">\r\n                                                                    {{product.name.length > 16 ?\r\n                                                                    product.name.trim().slice(0,15)\r\n                                                                    +\r\n                                                                    '...' :\r\n                                                                    product.name }}\r\n                                                                </div>\r\n                                                                <div class=\"product-price d-flex align-items-start\">\r\n                                                                    \u20B9{{product?.price.sellingPrice}}\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </a>\r\n                                                        <div\r\n                                                            class=\"d-flex align-items-center justify-content-center gap-1\">\r\n                                                            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/700072c1770270395432favourite-svgrepo-com.svg\"\r\n                                                                style=\"width: 18px;\"\r\n                                                                (click)=\"toggleItemToFav($event, product, 'ADD')\"\r\n                                                                *ngIf=\"!product.whislist\">\r\n                                                            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304116c1770274132910favourite-svgrepo-com_(1).svg\"\r\n                                                                style=\"width: 18px;\" *ngIf=\"product.whislist\"\r\n                                                                (click)=\"toggleItemToFav($event, product, 'REMOVE')\">\r\n                                                            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/695144c1770270669546cart-shopping-svgrepo-com.svg\"\r\n                                                                style=\"width:19px\"\r\n                                                                (click)=\"addItemToCart($event, product, 'ADD')\"\r\n                                                                *ngIf=\"product.quantity <= 0\">\r\n                                                            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/795342c1770275383344shopping-cart-fill-svgrepo-com.svg\"\r\n                                                                style=\"width:19px\" *ngIf=\"product.quantity >= 1\"\r\n                                                                (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </ng-container>\r\n                                        </div>\r\n                                        <div *ngIf=\"!video?.video?.isVideoPlaying && style?.hoverPlay\"\r\n                                            class=\"position-absolute d-flex align-items-center justify-content-center\"\r\n                                            style=\"padding: 9px;top: 47%;left: 40%;background: lightgrey;border-radius: 50%;background: rgba(240, 240, 240, 0.6);backdrop-filter: blur(4px);-webkit-backdrop-filter: blur(4px);\">\r\n                                            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/935060c1770214072755play-svgrepo-com.svg\"\r\n                                                class=\"\" style=\"width:25px;margin-left:1.5px\">\r\n                                        </div>\r\n                                    </div>\r\n                                </ng-container>\r\n                            </div>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.display?.showImage\">\r\n                            <div class=\"video-section p-3 w-auto d-flex flex-column gap-2 align-items-center justify-content-center\"\r\n                                *ngFor=\"let image of content?.listItem?.data; let i = index\" [simpoColumnDirective]=\"style?.size\"\r\n                                [id]=\"data?.id\"\r\n                                [attr.style]=\"style?.removeGaps ? 'padding: 0px !important; margin: 0px !important;' : {}\">\r\n                                <ng-container>\r\n                                    <div class=\"video-wrapper position-relative\" [id]=\"data?.id\"\r\n                                        [ngClass]=\"{'h-100':screenWidth<475}\"\r\n                                        [ngStyle]=\"{'width' : screenWidth > 475 ? (style?.size === 'Small' ? '180px' : style?.size === 'Medium' ? '220px' : '270px'): '100%' }\">\r\n                                        <img loading=\"lazy\" [src]=\"image.image.url\" [alt]=\"image.image.altText\"\r\n                                            [simpoImageDirective]=\"image.image\"\r\n                                            [attr.simpoObjectPosition]=\"image?.image?.fit !== 'contain' ? image.image?.position : null\"\r\n                                            [simpoCorner]=\"style?.corners\" class=\"w-100 h-100\"\r\n                                            [appImageEditor]=\"edit || false\" [imageData]=\"image.image\"\r\n                                            [sectionId]=\"data?.id\" [itemIndex]=\"i\" [simpoObjectPosition]=\"image?.image?.position\"\r\n                                            [class]=\"data?.id+image.image.id\">\r\n                                    </div>\r\n                                </ng-container>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n\r\n                <button class=\"scroll-btn right p-0 d-flex align-items-center justify-content-center\"\r\n                    *ngIf=\"style?.direction === 'ROW' && isOverflowing\" (click)=\"scrollRight()\"\r\n                    [disabled]=\"atEnd\"><mat-icon>keyboard_arrow_right</mat-icon>\r\n                </button>\r\n                <!-- </ng-container> -->\r\n                <!-- <ng-container *ngIf=\"style?.gridStyle == 'Style2'\">\r\n                    <div class=\"video-grid-section h-100\" [class.remove-gap]=\"style?.removeGaps\"\r\n                        [class.p-0]=\"style?.fullWidth\">\r\n                        <div class=\"video-section\" *ngFor=\"let video of content?.listItem?.data\" style=\"min-width:300px\"\r\n                            [ngClass]=\"{'position-relative d-flex align-items-center justify-content-center' : !video?.video?.isVideoPlaying && style?.hoverPlay}\">\r\n                            <video loading=\"lazy\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" #videoEl\r\n                                [class]=\"data?.id+video.video.id\" [simpoObjectPosition]=\"video.video.position\"\r\n                                [src]=\"video.video.url\" loading=\"lazy\" class=\"h-100\" [controls]=\"!style?.hoverPlay\"\r\n                                (mouseenter)=\"style?.hoverPlay && onVideoHover(videoEl,video.video)\"\r\n                                [muted]=\"style?.muteVideos\"\r\n                                (mouseleave)=\"style?.hoverPlay && onVideoLeave(videoEl,video.video)\"\r\n                                (click)=\"openFullscreen(videoEl)\"\r\n                                [ngClass]=\"{'cursor-pointer' : style?.hoverPlay}\"></video>\r\n                            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/172648c1769671647159play-fill-svgrepo-com.svg\"\r\n                                class=\"position-absolute\" *ngIf=\"!video?.video?.isVideoPlaying && style?.hoverPlay\"\r\n                                style=\"width:20%;height:20%;max-width:40px\">\r\n                        </div>\r\n                    </div>\r\n                </ng-container> -->\r\n            </div>\r\n        </div>\r\n    </div>\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}.main-video-section{display:flex;justify-content:center}.main-image-section{margin-bottom:1.5rem}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.wrap-scroll{overflow:scroll;flex-wrap:nowrap}@media screen and (min-width : 1200px){.grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;grid-gap:5px}.video-grid-section{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,170px);column-gap:10px;row-gap:10px;max-height:340px;overflow-x:scroll;overflow-y:hidden;grid-auto-columns:1fr;width:100%}.grid img:first-child:last-child{grid-column:1 / span 2}.grid img:first-child:nth-last-child(2),.grid img:nth-child(2):last-child{grid-column:span 1;height:100%}.grid img:nth-child(3n+1):not(:last-child){grid-column:1;grid-row:span 2;height:100%}.grid img:nth-child(3n+2){grid-column:2}.grid img:nth-child(3n+3){grid-column:2;align-self:end}.grid img:nth-child(3n+4){grid-column:1 / span 2}}.remove-gap{grid-gap:0!important}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}.main-image-container{width:100%}@media screen and (max-width: 760px){.scroll-btn{display:none!important}}.right-column-container{display:flex;flex-direction:column;height:100%;padding:0}.image-half-height{height:50%!important;flex:1}.image-half-height:first-child{margin-bottom:2px}.scroll-btn{position:absolute;top:50%;z-index:10;font-size:18px;width:36px!important;height:36px!important;border-radius:50%;border:none}.w-fit{width:fit-content!important}.video-section{text-align:center}.video-section .video-wrapper{aspect-ratio:9 / 16;margin:0 auto;position:relative}.video-section .video-wrapper video{cursor:pointer}.video-section video{width:100%;height:100%;object-fit:cover}.scroll-btn.left{left:8px}.scroll-btn.right{right:8px}.product-badge{display:flex;align-items:center;gap:12px;padding:5px 10px;background:#fff9;border-radius:10px;width:90%;box-shadow:0 6px 18px #00000026;transition:background .3s ease,box-shadow .3s ease;min-width:230px}.product-badge:hover{background:#f0f0f0e6;box-shadow:0 8px 22px #0003}.product-img{width:42px;height:42px;object-fit:contain;flex-shrink:0}.product-info{display:flex;gap:4px}.grid-columns{grid-template-columns:50% 50%}.product-title{font-size:12px;font-weight:500;color:#1a1a1a;max-width:210px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.product-link{text-decoration:none;color:inherit}.products-cards{bottom:0;overflow-x:scroll}.product-price{font-size:16px;font-weight:700;color:#000}\n"] }]
         }], ctorParameters: () => [{ type: i6$1.MessageService }, { type: CartService }, { type: i1$2.MatDialog }], propDecorators: { videogrid: [{
                 type: ViewChild,
                 args: ['videogrid', { static: false }]