simpo-component-library 3.6.487 → 3.6.489

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/esm2022/lib/sections/appointment-form/appointment-booking/appointment-booking/appointment-booking.component.mjs +10 -16
  2. package/fesm2022/simpo-component-library.mjs +75 -80
  3. package/fesm2022/simpo-component-library.mjs.map +1 -1
  4. package/lib/sections/appointment-form/appointment-booking/appointment-booking/appointment-booking.component.d.ts +3 -5
  5. package/package.json +1 -1
  6. package/simpo-component-library-3.6.488.tgz +0 -0
  7. package/simpo-component-library-3.6.489.tgz +0 -0
package/fesm2022/simpo-component-library.mjs CHANGED
@@ -13,7 +13,7 @@ import * as i10 from '@angular/material/input';
13
13
  import { MatInputModule } from '@angular/material/input';
14
14
  import * as i13 from '@angular/material/select';
15
15
  import { MatSelectModule } from '@angular/material/select';
16
- import * as i3 from '@angular/material/dialog';
16
+ import * as i1$1 from '@angular/material/dialog';
17
17
  import { MAT_DIALOG_DATA, MatDialogModule, MatDialog } from '@angular/material/dialog';
18
18
  import * as i6 from '@angular/material/icon';
19
19
  import { MatIconModule, MatIcon } from '@angular/material/icon';
@@ -34,7 +34,7 @@ import * as i10$1 from '@angular/material/progress-spinner';
34
34
  import { MatProgressSpinner, MatProgressSpinnerModule } from '@angular/material/progress-spinner';
35
35
  import * as i2$2 from '@angular/router';
36
36
  import { RouterLink } from '@angular/router';
37
- import * as i1$1 from '@angular/platform-browser';
37
+ import * as i1$2 from '@angular/platform-browser';
38
38
  import * as i7$1 from 'ngx-skeleton-loader';
39
39
  import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
40
40
  import * as i12 from '@angular/material/form-field';
@@ -1198,13 +1198,13 @@ class MediaSelectorComponent {
1198
1198
  }
1199
1199
  });
1200
1200
  }
1201
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MediaSelectorComponent, deps: [{ token: ImageUplaodService }, { token: i3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2$1.MatSnackBar }, { token: ElementServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
1201
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MediaSelectorComponent, deps: [{ token: ImageUplaodService }, { token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2$1.MatSnackBar }, { token: ElementServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
1202
1202
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MediaSelectorComponent, isStandalone: true, selector: "simpo-media-selector", viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], ngImport: i0, template: "<section>\r\n <div class=\"header d-flex justify-content-between align-items-center\">\r\n <div class=\"heading\">Upload Image</div>\r\n <mat-icon (click)=\"_dialogRef.close()\"\r\n class=\"d-flex align-items-center justify-content-center f-18 cp\">close</mat-icon>\r\n </div>\r\n <div class=\"tabs d-flex align-items-center justify-content-between\">\r\n <div *ngFor=\"let tab of tabs\" [ngClass]=\"{'selectedTab': activeTab === tab}\" (click)=\"activeTab = tab\">{{tab}}</div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"activeTab === 'Unsplash'\">\r\n <ng-container *ngTemplateOutlet=\"unsplashImagesTemplate\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"activeTab === 'Upload'\">\r\n <ng-container *ngTemplateOutlet=\"uploadImageTemplate\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"activeTab === 'Library'\">\r\n <ng-container *ngTemplateOutlet=\"imageLibraryTemplate\"></ng-container>\r\n </ng-container>\r\n\r\n <div class=\"uploadButton d-flex\" *ngIf=\"this.selectedImage.size > 0\">\r\n <button (click)=\"uploadImage()\" [disabled]=\"buttonLoader\">\r\n <span *ngIf=\"buttonLoader\"><i class=\"fas fa-circle-notch fa-spin\"></i>&nbsp;Loading</span>\r\n <span *ngIf=\"!buttonLoader\">Upload Image</span></button>\r\n </div>\r\n</section>\r\n\r\n<ng-template #unsplashImagesTemplate>\r\n\r\n <div class=\"input-container d-flex align-items-center\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/314661c1741844234442Vector%20%281%29.png\"\r\n alt=\"search-bar-icon\">\r\n <input type=\"text\" placeholder=\"Search images\" [formControl]=\"searchControl\">\r\n </div>\r\n <cdk-virtual-scroll-viewport [itemSize]=\"imageSize\" [minBufferPx]=\"800\" [maxBufferPx]=\"1600\" class=\"scroll-container\">\r\n <div class=\"row image-container\">\r\n <div class=\"col-md-4 col-6\" *cdkVirtualFor=\"let image of unsplashImages\">\r\n <img [lazyLoad]=\"image.urls.thumb\" [errorImage]=\"'assets/error.jpg'\" (click)=\"selectUnsplashImage(image)\"\r\n [ngClass]=\"{'selectedImage': selectedImage.has(image.id)}\" alt=\"Image\" class=\"cp\" />\r\n </div>\r\n </div>\r\n </cdk-virtual-scroll-viewport>\r\n\r\n <p *ngIf=\"isLoading\">Loading more results...</p>\r\n\r\n</ng-template>\r\n\r\n<ng-template #uploadImageTemplate>\r\n <div>\r\n <div class=\"image-upload-container\">\r\n <div class=\"upload-img-container d-flex align-items-center justify-content-center\">\r\n <img lazy\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\"\r\n alt=\"upload-image\" class=\"upload-img\">\r\n </div>\r\n <div class=\"text-container text-center\">\r\n <div class=\"top-text\">Choose a file or drag and drop it here</div>\r\n <div class=\"middle-text\">JPEG, PNG formats up to 50MB</div>\r\n <div class=\"upload-btn d-flex align-items-center justify-content-center\">\r\n <div class=\"uploads cp\" (click)=\"fileInput.click()\">\r\n Upload\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <input type=\"file\" style=\"display: none\" (change)=\"uploadImageFromSystem($event)\" [multiple]=\"multiple\"\r\n accept=\"image/png, image/jpeg, image/jpg, image/gif\" #fileInput />\r\n\r\n <div class=\"row image-container mt-3 h-30-overflow\">\r\n <ng-container *ngFor=\"let image of selectedImage | keyvalue\">\r\n <div class=\"col-md-4 systemImage\" *ngIf=\"image.value.file\">\r\n <img [src]=\"image.value.assets[0].url\" alt=\"Image\" *ngIf=\"!image.value.assets[0].url?.includes('data:video')\" />\r\n <video [src]=\"image.value.assets[0].url\" class=\"w-100 h-100\"\r\n *ngIf=\"image.value.assets[0].url?.includes('data:video')\" muted loop></video>\r\n <mat-icon (click)=\"deleteSystemImage(image.key)\">delete</mat-icon>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #imageLibraryTemplate>\r\n <div class=\"row image-container mt-3 h-75-overflow\">\r\n <ng-container *ngIf=\"imageLibrary.length > 0; else emptyScreen\">\r\n <ng-container *ngFor=\"let image of imageLibrary\">\r\n <div class=\"col-md-4 col-6\">\r\n <img [src]=\"image.assets[0].url\" alt=\"Image\" (click)=\"selectFromImageLibrary(image)\"\r\n [ngClass]=\"{'selectedImage': selectedImage.has(image.uniqueId)}\" *ngIf=\"!image.assets[0].url?.includes('.mp4')\" />\r\n <video [src]=\"image.assets[0].url\" class=\"w-100 h-100\" (click)=\"selectFromImageLibrary(image)\"\r\n [ngClass]=\"{'selectedImage': selectedImage.has(image.uniqueId)}\" *ngIf=\"image.assets[0].url?.includes('.mp4')\" muted loop></video>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <ng-template #emptyScreen>\r\n <div class=\"empty-container d-flex justify-content-center align-items-center w-100 flex-column\">\r\n <div class=\"empty-img-container d-flex justify-content-center align-items-center\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/935737c1743411798188image%20%287%29.png\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"empty-main-text\">\r\n Uh-oh!\r\n </div>\r\n <div class=\"sub-text-1\">\r\n No images here\r\n </div>\r\n <div class=\"sub-text-2\">\r\n I looked left, right\u2026 even turned around! Still nothing\r\n </div>\r\n </div>\r\n </ng-template>\r\n</ng-template>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}section{height:100%;position:relative}img{width:100%;height:200px}.scroll-container{height:calc(66vh + -0px);width:100%;overflow-y:scroll}.selectedImage{position:relative;border-radius:10px;overflow:hidden;border:3px solid hsl(227,52%,36%)}.uploadButton{position:absolute;bottom:0;padding:10px;background:#fff;width:100%;justify-content:end;box-shadow:0 0 4px #00000040}.uploadButton button{background:var(--primary-bg-color);color:#fff;font-weight:600;border:unset;font-size:15px!important;padding:8px;border-radius:8px;width:15%!important}.systemImage{position:relative}.systemImage mat-icon{display:none}.systemImage:hover mat-icon{display:inline;position:absolute;right:15px;top:5px;color:red;cursor:pointer}.f-18{font-size:18px}.header{padding:10px;box-shadow:0 0 4px #00000040}.header .heading{font-size:15px;font-weight:600;line-height:24px}.header mat-icon{color:#2d264b}.tabs{padding:20px 40px}.tabs div{width:22%;cursor:pointer;text-align:center;padding:8px}.selectedTab{background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent;font-weight:500;color:#fff;box-shadow:0 0 4px #00000040;border-radius:10px;font-weight:600;position:relative}.selectedTab:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.input-container{padding:6px 10px;gap:10px;margin:0 40px 20px;box-shadow:0 0 4px #00000040;border-radius:13px}.input-container input{width:90%;border:unset;appearance:unset;outline:unset}.input-container img{width:20px;height:20px}.image-container{margin:0 40px 20px}.image-container div{margin-bottom:20px}.image-container div img{border-radius:13px}.image-upload-container{margin:0 40px;border-radius:17px;padding:15px;border:3px dashed rgba(44,44,44,.6)}.upload-img{width:12%;height:10%}.cp{cursor:pointer}.middle-text{font-size:15px;color:#686868}.top-text{background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent;font-size:17px;font-weight:600}.uploads{width:20%;padding:8px;background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent;font-size:17px;font-weight:600;position:relative;margin-top:15px}.uploads:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.h-30-overflow{height:calc(30vh + -0px);overflow-y:scroll}.h-75-overflow{height:calc(75vh + -0px);overflow-y:scroll}.empty-main-text{font-weight:900;font-size:42px;background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent}.sub-text-1{font-size:19px;font-weight:600;color:#101010e5}.sub-text-2{font-size:16px;font-weight:600;color:#101010e5}@media screen and (max-width : 475px){.tabs div{width:30%!important}.uploadButton button{width:35%!important}.uploads{width:30%!important}.sub-text-2{text-align:center!important}img{height:150px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.KeyValuePipe, name: "keyvalue" }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: LazyLoadImageModule }, { kind: "directive", type: i7.LazyLoadImageDirective, selector: "[lazyLoad]", inputs: ["lazyLoad", "defaultImage", "errorImage", "scrollTarget", "customObservable", "offset", "useSrcset", "decode", "debug"], outputs: ["onStateChange"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i8$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i8$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
1203
1203
  }
1204
1204
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MediaSelectorComponent, decorators: [{
1205
1205
  type: Component,
1206
1206
  args: [{ selector: 'simpo-media-selector', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, CdkVirtualScrollViewport, LazyLoadImageModule, ScrollingModule, MatIconModule], template: "<section>\r\n <div class=\"header d-flex justify-content-between align-items-center\">\r\n <div class=\"heading\">Upload Image</div>\r\n <mat-icon (click)=\"_dialogRef.close()\"\r\n class=\"d-flex align-items-center justify-content-center f-18 cp\">close</mat-icon>\r\n </div>\r\n <div class=\"tabs d-flex align-items-center justify-content-between\">\r\n <div *ngFor=\"let tab of tabs\" [ngClass]=\"{'selectedTab': activeTab === tab}\" (click)=\"activeTab = tab\">{{tab}}</div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"activeTab === 'Unsplash'\">\r\n <ng-container *ngTemplateOutlet=\"unsplashImagesTemplate\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"activeTab === 'Upload'\">\r\n <ng-container *ngTemplateOutlet=\"uploadImageTemplate\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"activeTab === 'Library'\">\r\n <ng-container *ngTemplateOutlet=\"imageLibraryTemplate\"></ng-container>\r\n </ng-container>\r\n\r\n <div class=\"uploadButton d-flex\" *ngIf=\"this.selectedImage.size > 0\">\r\n <button (click)=\"uploadImage()\" [disabled]=\"buttonLoader\">\r\n <span *ngIf=\"buttonLoader\"><i class=\"fas fa-circle-notch fa-spin\"></i>&nbsp;Loading</span>\r\n <span *ngIf=\"!buttonLoader\">Upload Image</span></button>\r\n </div>\r\n</section>\r\n\r\n<ng-template #unsplashImagesTemplate>\r\n\r\n <div class=\"input-container d-flex align-items-center\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/314661c1741844234442Vector%20%281%29.png\"\r\n alt=\"search-bar-icon\">\r\n <input type=\"text\" placeholder=\"Search images\" [formControl]=\"searchControl\">\r\n </div>\r\n <cdk-virtual-scroll-viewport [itemSize]=\"imageSize\" [minBufferPx]=\"800\" [maxBufferPx]=\"1600\" class=\"scroll-container\">\r\n <div class=\"row image-container\">\r\n <div class=\"col-md-4 col-6\" *cdkVirtualFor=\"let image of unsplashImages\">\r\n <img [lazyLoad]=\"image.urls.thumb\" [errorImage]=\"'assets/error.jpg'\" (click)=\"selectUnsplashImage(image)\"\r\n [ngClass]=\"{'selectedImage': selectedImage.has(image.id)}\" alt=\"Image\" class=\"cp\" />\r\n </div>\r\n </div>\r\n </cdk-virtual-scroll-viewport>\r\n\r\n <p *ngIf=\"isLoading\">Loading more results...</p>\r\n\r\n</ng-template>\r\n\r\n<ng-template #uploadImageTemplate>\r\n <div>\r\n <div class=\"image-upload-container\">\r\n <div class=\"upload-img-container d-flex align-items-center justify-content-center\">\r\n <img lazy\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\"\r\n alt=\"upload-image\" class=\"upload-img\">\r\n </div>\r\n <div class=\"text-container text-center\">\r\n <div class=\"top-text\">Choose a file or drag and drop it here</div>\r\n <div class=\"middle-text\">JPEG, PNG formats up to 50MB</div>\r\n <div class=\"upload-btn d-flex align-items-center justify-content-center\">\r\n <div class=\"uploads cp\" (click)=\"fileInput.click()\">\r\n Upload\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <input type=\"file\" style=\"display: none\" (change)=\"uploadImageFromSystem($event)\" [multiple]=\"multiple\"\r\n accept=\"image/png, image/jpeg, image/jpg, image/gif\" #fileInput />\r\n\r\n <div class=\"row image-container mt-3 h-30-overflow\">\r\n <ng-container *ngFor=\"let image of selectedImage | keyvalue\">\r\n <div class=\"col-md-4 systemImage\" *ngIf=\"image.value.file\">\r\n <img [src]=\"image.value.assets[0].url\" alt=\"Image\" *ngIf=\"!image.value.assets[0].url?.includes('data:video')\" />\r\n <video [src]=\"image.value.assets[0].url\" class=\"w-100 h-100\"\r\n *ngIf=\"image.value.assets[0].url?.includes('data:video')\" muted loop></video>\r\n <mat-icon (click)=\"deleteSystemImage(image.key)\">delete</mat-icon>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #imageLibraryTemplate>\r\n <div class=\"row image-container mt-3 h-75-overflow\">\r\n <ng-container *ngIf=\"imageLibrary.length > 0; else emptyScreen\">\r\n <ng-container *ngFor=\"let image of imageLibrary\">\r\n <div class=\"col-md-4 col-6\">\r\n <img [src]=\"image.assets[0].url\" alt=\"Image\" (click)=\"selectFromImageLibrary(image)\"\r\n [ngClass]=\"{'selectedImage': selectedImage.has(image.uniqueId)}\" *ngIf=\"!image.assets[0].url?.includes('.mp4')\" />\r\n <video [src]=\"image.assets[0].url\" class=\"w-100 h-100\" (click)=\"selectFromImageLibrary(image)\"\r\n [ngClass]=\"{'selectedImage': selectedImage.has(image.uniqueId)}\" *ngIf=\"image.assets[0].url?.includes('.mp4')\" muted loop></video>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <ng-template #emptyScreen>\r\n <div class=\"empty-container d-flex justify-content-center align-items-center w-100 flex-column\">\r\n <div class=\"empty-img-container d-flex justify-content-center align-items-center\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/935737c1743411798188image%20%287%29.png\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"empty-main-text\">\r\n Uh-oh!\r\n </div>\r\n <div class=\"sub-text-1\">\r\n No images here\r\n </div>\r\n <div class=\"sub-text-2\">\r\n I looked left, right\u2026 even turned around! Still nothing\r\n </div>\r\n </div>\r\n </ng-template>\r\n</ng-template>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}section{height:100%;position:relative}img{width:100%;height:200px}.scroll-container{height:calc(66vh + -0px);width:100%;overflow-y:scroll}.selectedImage{position:relative;border-radius:10px;overflow:hidden;border:3px solid hsl(227,52%,36%)}.uploadButton{position:absolute;bottom:0;padding:10px;background:#fff;width:100%;justify-content:end;box-shadow:0 0 4px #00000040}.uploadButton button{background:var(--primary-bg-color);color:#fff;font-weight:600;border:unset;font-size:15px!important;padding:8px;border-radius:8px;width:15%!important}.systemImage{position:relative}.systemImage mat-icon{display:none}.systemImage:hover mat-icon{display:inline;position:absolute;right:15px;top:5px;color:red;cursor:pointer}.f-18{font-size:18px}.header{padding:10px;box-shadow:0 0 4px #00000040}.header .heading{font-size:15px;font-weight:600;line-height:24px}.header mat-icon{color:#2d264b}.tabs{padding:20px 40px}.tabs div{width:22%;cursor:pointer;text-align:center;padding:8px}.selectedTab{background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent;font-weight:500;color:#fff;box-shadow:0 0 4px #00000040;border-radius:10px;font-weight:600;position:relative}.selectedTab:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.input-container{padding:6px 10px;gap:10px;margin:0 40px 20px;box-shadow:0 0 4px #00000040;border-radius:13px}.input-container input{width:90%;border:unset;appearance:unset;outline:unset}.input-container img{width:20px;height:20px}.image-container{margin:0 40px 20px}.image-container div{margin-bottom:20px}.image-container div img{border-radius:13px}.image-upload-container{margin:0 40px;border-radius:17px;padding:15px;border:3px dashed rgba(44,44,44,.6)}.upload-img{width:12%;height:10%}.cp{cursor:pointer}.middle-text{font-size:15px;color:#686868}.top-text{background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent;font-size:17px;font-weight:600}.uploads{width:20%;padding:8px;background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent;font-size:17px;font-weight:600;position:relative;margin-top:15px}.uploads:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.h-30-overflow{height:calc(30vh + -0px);overflow-y:scroll}.h-75-overflow{height:calc(75vh + -0px);overflow-y:scroll}.empty-main-text{font-weight:900;font-size:42px;background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent}.sub-text-1{font-size:19px;font-weight:600;color:#101010e5}.sub-text-2{font-size:16px;font-weight:600;color:#101010e5}@media screen and (max-width : 475px){.tabs div{width:30%!important}.uploadButton button{width:35%!important}.uploads{width:30%!important}.sub-text-2{text-align:center!important}img{height:150px}}\n"] }]
1207
- }], ctorParameters: () => [{ type: ImageUplaodService }, { type: i3.MatDialogRef }, { type: undefined, decorators: [{
1207
+ }], ctorParameters: () => [{ type: ImageUplaodService }, { type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
1208
1208
  type: Inject,
1209
1209
  args: [MAT_DIALOG_DATA]
1210
1210
  }] }, { type: i2$1.MatSnackBar }, { type: ElementServiceService }], propDecorators: { viewport: [{
@@ -1430,16 +1430,16 @@ class LinkEditorComponent {
1430
1430
  }
1431
1431
  }
1432
1432
  }
1433
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LinkEditorComponent, deps: [{ token: ElementServiceService }, { token: i3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: EventsService }, { token: i3.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
1433
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LinkEditorComponent, deps: [{ token: ElementServiceService }, { token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: EventsService }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
1434
1434
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LinkEditorComponent, isStandalone: true, selector: "simpo-link-editor", ngImport: i0, template: "<section>\r\n <div class=\"header\">\r\n <p>{{data.type == 'BUTTON' ? \"Button\" : \"Link\"}} Settings</p>\r\n <mat-icon (click)=\"closeDialog()\" class=\"f-18 d-flex align-items-center justify-content-center cp\">close</mat-icon>\r\n </div>\r\n\r\n <div class=\"body\">\r\n <div>\r\n <label class=\"link-text\">{{data.type == 'BUTTON' ? \"Button\" : \"Link\"}} Text</label><br>\r\n <input type=\"text\" class=\"input-text link-text-input\" [(ngModel)]=\"link.label\">\r\n <p class=\"desc\">This is the text that will be displayed to users</p>\r\n </div>\r\n\r\n <hr>\r\n\r\n <!-- <ng-container *ngIf=\"data.type == 'BUTTON'\">\r\n <select>\r\n <ng-container *ngFor=\"let style of styles\">\r\n <option (click)=\"changeButtonStyle(style)\" [value]=\"style.name\">{{style.name}}</option>\r\n </ng-container>\r\n <select>\r\n </ng-container> -->\r\n\r\n <ng-container *ngIf=\"data.type == 'BUTTON'\">\r\n <div class=\"field-container mb-2\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <label class=\"link-text mb-1\">Button</label>\r\n <div class=\"colorType d-flex align-items-center justify-content-center\">\r\n <select class=\"border-0 w-100\" [(ngModel)]=\"data.buttonStyle.type\" (ngModelChange)=\"changeButtonStyle()\">\r\n <ng-container *ngFor=\"let type of buttonTypes\">\r\n <option [value]=\"type.type\">\r\n {{type.type | titlecase}}\r\n </option>\r\n </ng-container>\r\n </select>\r\n </div>\r\n </div>\r\n <div>\r\n <div class=\"preview d-flex justify-content-center\">\r\n <button class=\"btn-style w-80\" [style.borderRadius]=\"setBorderRadius()\" [style.border]=\"setBorder()\"\r\n [style.background]=\"setBackground()\">\r\n <span\r\n *ngIf=\"(data?.buttonStyle?.type === 'Text' || data?.buttonStyle?.type === 'Outline') && data?.buttonStyle?.colorType === 'Gradient'\"\r\n [ngStyle]=\"{\r\n 'background': 'linear-gradient(90deg, ' + data?.buttonStyle?.background + ' 0%, ' + data?.buttonStyle.secondaryBackground + ' 100%)'\r\n }\">\r\n {{ link.label ? link.label : \"Button Text\"}}\r\n </span>\r\n <span *ngIf=\"data?.style?.colorType == 'Solid' || data?.buttonStyle?.type == 'Solid'\"\r\n [style.color]=\"setColor()\">\r\n {{ link.label ? link.label : \"Button Text\"}}\r\n </span>\r\n <span *ngIf=\"data?.buttonStyle?.type === 'Outline'\"\r\n [style.color]=\"setColor()\">\r\n {{ link.label ? link.label : \"Button Text\"}}\r\n </span>\r\n <span *ngIf=\"data?.buttonStyle?.type === 'Text'\"\r\n [style.color]=\"data.buttonStyle.background\">\r\n {{ link.label ? link.label : \"Button Text\"}}\r\n </span>\r\n </button>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field-container\">\r\n <label class=\"link-text\">Button Style</label>\r\n <div class=\"color-container row\">\r\n <div class=\"color br-10\">\r\n <div class=\"color-top d-flex justify-content-between mb-2 align-items-center\">\r\n <div class=\"left-side\">Color</div>\r\n <div class=\"right-side\">\r\n <div class=\"colorType d-flex align-items-center justify-content-center w-100\">\r\n <select class=\"border-0 w-100\" [(ngModel)]=\"data.buttonStyle.colorType\"\r\n (ngModelChange)=\"changeButtonStyle()\">\r\n <ng-container *ngFor=\"let type of backgroundType\">\r\n <option style=\"padding: 10px;\">\r\n {{ type | titlecase }}</option>\r\n </ng-container>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"color-bottom\">\r\n <div class=\"mt-20\" *ngIf=\"data.buttonStyle.colorType === 'Solid'\">\r\n <div class=\"text-background\">\r\n <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.background\"\r\n (ngModelChange)=\"getContrastTextColor(data.buttonStyle.background)\" style=\"display: none;\"\r\n #colorInput>\r\n <div class=\"w-100 d-flex flex-column mt-2\">\r\n <label class=\"color-text mb-1 d-flex justify-content-center\"> {{ getColorLabel()}}</label>\r\n <div class=\"w-100 d-flex justify-content-center\">\r\n <div class=\"custom-input\" [style.background]=\"data.buttonStyle.background\"\r\n (click)=\"colorInput.click()\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mt-20\" *ngIf=\"data.buttonStyle.colorType === 'Gradient'\">\r\n <div class=\"text-background\">\r\n <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.background\"\r\n (ngModelChange)=\"changeButtonStyle()\" style=\"display: none;\" #colorInput1>\r\n <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.secondaryBackground\"\r\n (ngModelChange)=\"changeButtonStyle()\" style=\"display: none;\" #colorInput>\r\n <div class=\"w-100 d-flex mt-2\">\r\n <div class=\"w-100 d-flex flex-column\">\r\n <label class=\"color-text mb-1 d-flex justify-content-center\">Color 1</label>\r\n <div class=\"d-flex justify-content-center\">\r\n <div class=\"custom-input\" [style.background]=\"data?.buttonStyle?.background\"\r\n (click)=\"colorInput1.click()\"></div>\r\n </div>\r\n </div>\r\n <div class=\"w-100 d-flex flex-column\">\r\n <label class=\"color-text mb-1 d-flex justify-content-center\">Color 2</label>\r\n <div class=\"d-flex justify-content-center\">\r\n <div class=\"custom-input\" [style.background]=\"data?.buttonStyle?.secondaryBackground\"\r\n (click)=\"colorInput.click()\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"gradient-direction\">\r\n <div class=\"left-direction mt-3 mb-1\"> Direction</div>\r\n <div class=\"right-direction\">\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <div class=\"box-shadow d-flex br-10 w-80\">\r\n <ng-container *ngFor=\"let direction of directionType\">\r\n <div class=\"color-box d-flex p-2 align-items-center justify-content-center br-10\"\r\n [ngClass]=\"{'selected' : data.buttonStyle?.gradientDirection === direction.type}\"\r\n (click)=\"data.buttonStyle.gradientDirection = direction.type;changeButtonStyle()\">\r\n <img class=\"w-10\" [src]=\"direction.icon\" alt=\"icon\"\r\n *ngIf=\"data.buttonStyle?.gradientDirection !== direction.type\" loading=\"lazy\">\r\n <img class=\"w-10\" [src]=\"direction.activeIcon\" alt=\"icon\"\r\n *ngIf=\"data.buttonStyle?.gradientDirection === direction.type\" loading=\"lazy\">\r\n </div>\r\n </ng-container>\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=\"mt-20\" *ngIf=\"data.buttonStyle.type != 'Text'\">\r\n <div class=\"text-background\">\r\n <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.textColor\"\r\n (ngModelChange)=\"changeButtonStyle()\" style=\"display: none;\" #colorInput3>\r\n <div class=\"w-100 d-flex flex-column mt-2\">\r\n <label class=\"color-text mb-1 d-flex justify-content-center\">Text Color</label>\r\n <div class=\"w-100 d-flex justify-content-center\">\r\n <div class=\"custom-input\" [style.background]=\"data.buttonStyle.textColor\"\r\n (click)=\"colorInput3.click()\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"corner-radius bg-white p-2 br-10 d-flex justify-content-between\"\r\n *ngIf=\"data.buttonStyle.type != 'Text'\">\r\n <div class=\"sub-text-1 d-flex align-items-center\">\r\n Corner Radius\r\n </div>\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <div class=\"box-shadow d-flex br-10\">\r\n <ng-container *ngFor=\"let shape of buttonShapes\">\r\n <div class=\"color-box d-flex p-2 align-items-center justify-content-center br-10\"\r\n [ngClass]=\"{'selected' : data.buttonStyle.shape === shape.type}\"\r\n (click)=\"data.buttonStyle.shape = shape.type;changeButtonStyle()\">\r\n <img [src]=\"shape.icon\" alt=\"icon\" *ngIf=\"data.buttonStyle.shape !== shape.type\" loading=\"lazy\"\r\n class=\"transition-image\">\r\n <img [src]=\"shape.activeIcon\" alt=\"icon\" *ngIf=\"data.buttonStyle?.shape === shape.type\"\r\n loading=\"lazy\" class=\"transition-image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"p-2 d-flex justify-content-between align-items-center mt-20\">\r\n <div class=\"fw-bold\">Show Icon</div>\r\n <div class=\"form-check form-switch ml-auto\">\r\n <input class=\"form-check-input switch-btn\" type=\"checkbox\" [(ngModel)]=\"link.showIcon\" role=\"switch\">\r\n </div>\r\n </div>\r\n <div>\r\n <!-- <p class=\"heading mb-0\">Image</p> -->\r\n <div class=\"upload-image cp\" *ngIf=\"link.showIcon && !link?.icon?.url\" (click)=\"updateImage()\">\r\n <img loading=\"lazy\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\"\r\n alt=\"\">\r\n <p class=\"upload-text mb-0\">Upload a file</p>\r\n <p class=\"upload-text mb-0\">or select an existing one</p>\r\n <span class=\"upload-text\">up to 32MB</span>\r\n </div>\r\n <div class=\"sec d-flex align-items-center\" *ngIf=\"link.showIcon && link?.icon?.url\">\r\n <ng-container *ngIf=\"!imgLoader\">\r\n <img [src]=\"link?.icon?.url\">\r\n <div class=\"repalce-image cursor-pointer\" (click)=\"updateImage()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" width=\"24\"\r\n height=\"24\" class=\"icon w-4 h-4\" aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n d=\"m4 16 4.58579-4.5858c.78104-.781 2.04741-.781 2.82841 0L16 16m-2-2 1.5858-1.5858c.781-.781 2.0474-.781 2.8284 0L20 14m-6-6h.01M6 20h12c1.1046 0 2-.8954 2-2V6c0-1.10457-.8954-2-2-2H6c-1.10457 0-2 .89543-2 2v12c0 1.1046.89543 2 2 2Z\">\r\n </path>\r\n </svg>\r\n </div>\r\n\r\n <div class=\"delete-image cursor-pointer \" (click)=\"deleteImage()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"#ffffff\" viewBox=\"0 0 24 24\" width=\"24\"\r\n height=\"24\" class=\"icon h-4 w-4\" aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n d=\"m19 7-.8673 12.1425C18.0579 20.1891 17.187 21 16.1378 21H7.86224c-1.04928 0-1.92016-.8109-1.99492-1.8575L5 7m5 4v6m4-6v6m1-10V4c0-.55228-.4477-1-1-1h-4c-.55228 0-1 .44772-1 1v3M4 7h16\">\r\n </path>\r\n </svg>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"imgLoader\">\r\n <div class=\"upload_spinner d-flex w-100 h-100 justify-content-center align-items-center\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n <div class=\"fw-bold p-2 mb-2\">Icon Position</div>\r\n <div class=\"tabs d-flex px-2 gap-3 mb-2\" *ngIf=\"link.showIcon\">\r\n <div class=\"tab px-3 py-2\" *ngFor=\"let tab of ['left','right']\" (click)=\"link.icon.iconPosition = tab\"\r\n [class.selectedTab]=\"link?.icon?.iconPosition == tab\">\r\n {{tab | titlecase}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"data?.linkData?.length != 0\">\r\n\r\n\r\n <div class=\"groups cp\">\r\n <div *ngFor=\"let type of linkType\" [ngClass]=\"{'selectedType' : type.type === selectedType}\"\r\n (click)=\"changeType(type.type)\">{{type.type}}</div>\r\n </div>\r\n\r\n <div class=\"field-container mt-3\">\r\n <div *ngIf=\"link.linkType === RedirectionLink.Page\">\r\n <label class=\"input-label-1 mt-3 mb-2\">Select Page</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"link.pageId\" (ngModelChange)=\"setRedirectUrl()\">\r\n <option value=\"\" selected>Select from your existing pages</option>\r\n <option *ngFor=\"let page of templatePage\" [value]=\"page.id\" style=\"padding: 10px;\">\r\n {{page.pageName}}</option>\r\n </select>\r\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\"\r\n alt=\"\">\r\n </div>\r\n </div>\r\n <!-- <div class=\"sub-text\">Select from your existing pages</div> -->\r\n </div>\r\n\r\n <div *ngIf=\"link.linkType === RedirectionLink.section\">\r\n <label class=\"mt-3 mb-2 input-label-1\">Section</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"link.pageId\" style=\"cursor:pointer\">\r\n <option value=\"\" selected>Select the Section</option>\r\n <option *ngFor=\"let section of templatePage[0].components\" [value]=\"section.id\">{{section.sectionName}}\r\n </option>\r\n </select>\r\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\"\r\n alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"link.linkType === RedirectionLink.External || link.linkType === RedirectionLink.Email || link.linkType === RedirectionLink.Phone\">\r\n <label class=\"mt-3 mb-2 input-label-1\">Select type</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"link.linkType\" style=\"cursor:pointer\">\r\n <option value=\"\" selected>Select the Type</option>\r\n <option *ngFor=\"let type of externalLinkType\" [value]=\"type.type\">{{type.type}}</option>\r\n </select>\r\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\"\r\n alt=\"\">\r\n </div>\r\n </div>\r\n <label class=\"input-label mb-2\">{{link.linkType === RedirectionLink.External ? 'Website' : link.linkType ===\r\n RedirectionLink.Email ? 'Email Address' : 'Phone Number'}}</label>\r\n <input type=\"text\" class=\"input-text\" [(ngModel)]=\"link.redirectionUrl\"\r\n [placeholder]=\"link.linkType === RedirectionLink.External ? 'example : https://facebook.com': ''\">\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-between mt-10\">\r\n <label class=\"input-label-2\">Open in a new browser tab</label>\r\n <div class=\"form-check form-switch ml-auto\">\r\n <input class=\"form-check-input switch-btn\" type=\"checkbox\" [(ngModel)]=\"link.newTab\" role=\"switch\">\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"footer w-100 align-items-center justify-content-center\">\r\n <button *ngIf=\"addLink\" (click)=\"addNewLink()\">Update Link</button>\r\n </div>\r\n\r\n </ng-container>\r\n\r\n </div>\r\n\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}:host{--grey-color: rgba(250, 250, 250, 1)}.br-7{border-radius:7px}.br-10{border-radius:10px}.switch-btn{position:relative;z-index:10}.upload-image{border:3px dashed rgba(44,44,44,.6);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;margin:10px 10px 22px;border-radius:20px;box-shadow:#0000000d 0 1px 2px}.upload-image img{margin-bottom:8px;height:40px}.upload-text{background:var(--primary-bg-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:500}.sec{padding:10px 10px 22px;position:relative}.sec img{width:100%;height:200px;border-radius:20px}.delete-image{background-color:#d92d20;width:30px;height:30px;border-radius:6px;display:flex;justify-content:center;align-items:center;position:absolute;top:20px;right:20px}.repalce-image{display:flex;align-items:center;background:#fff;padding:2px;border-radius:6px;position:absolute;bottom:30px;left:20px}.selectedTab{background:#39393934;font-weight:700}.tab{border:1px solid rgba(44,44,44,.6);border-radius:12px}.w-90{width:90%}.sub-text-1{font-size:15px;color:#000}.w-48{width:48%}.box-shadow{box-shadow:0 0 4px #00000040}.color-box{width:50px}.selected{background:var(--primary-bg-color)}.header{height:45px;display:flex;justify-content:space-between;border-bottom:2px solid #F0F0F0;align-items:center;padding-left:15px;padding-right:15px}.header p{font-size:16px;font-weight:600;font-family:var(--primary-font-family)}.body{padding:15px}.footer{height:45px;position:absolute;bottom:0;left:0;padding:0 15px}.footer button{border:unset;border-radius:10px;font-size:15px;font-weight:500;padding:5px;color:#fff;text-align:center;background:var(--primary-bg-color)}p{margin-bottom:0!important}.link-text{font-size:15px;font-weight:600;font-family:var(--primary-font-family);color:#434343;margin-bottom:10px}.input-text{height:37px;width:100%;border:1px solid var(--grey-color);border-radius:5px;outline:none;font-size:14px;padding:10px 20px;font-weight:400;color:#090909e6}.link-text-input{background-color:var(--grey-color)}.desc{margin-top:10px;font-size:13px;color:#09090980;font-weight:400;font-family:Inter;margin-bottom:25px!important}hr{border:1px solid rgba(116,116,116,.2)}.groups{display:flex;justify-content:space-between;margin-top:25px}.groups div{font-size:15px;font-weight:600;color:#2c2c2c99;padding:6px 30px;cursor:pointer}.selectedType{position:relative;text-align:center;background:var(--primary-bg-color);background-clip:text;box-shadow:0 0 4px #00000040;border-radius:10px}.selectedType:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.f-18{font-size:18px}.mt-10{margin-top:10px}.drop-down-container{padding:10px;border-radius:8px;background:#fff}.drop-down-container select{width:90%;appearance:none;position:relative;outline:unset;border:unset;border-right:3px solid rgba(230,230,230,1);background:#fff;font-size:14px;padding:0 10px;border-radius:unset}.drop-down-container .down-arrow{width:10%;padding:0 6px}select option{padding:10px;background:#fff;color:#000}.field-container{background:var(--grey-color);border-radius:13px;padding:10px}.sub-text{font-size:13px;color:#09090980}.input-label-1{font-size:16px;font-weight:600}.input-label-2{color:#09090980}option:hover{background:var(--primary-bg-color)}.cp{cursor:pointer}.colorType{padding:3px 10px;box-shadow:0 0 4px #00000040;border-radius:10px;width:25%;border:1px solid #090981}.colorType select{background:transparent}.border-0{outline:unset}.transition-image{transition:opacity .3s ease-in-out,transform .3s ease-in-out}.color{background:#fff;padding:1rem}.custom-mat-form{width:100%;margin:10px 0;background-color:#f9f9f9;border-radius:8px}.custom-mat-form.mat-form-field-appearance-outline .mat-form-field-outline{color:#1976d2;border-color:#1976d2}.custom-mat-form .mat-form-field-label{color:#666;font-weight:500}.custom-mat-form .mat-select-trigger{padding:10px;font-size:14px;color:#333}::ng-deep .mat-select-panel{background-color:#fff;color:#333}::ng-deep .mat-option{font-size:14px;padding:10px 16px}::ng-deep .mat-option:hover{background-color:#e0f7fa}.color-container{padding:7px;gap:10px;border-radius:10px}.custom-input{height:35px;width:80%;border-radius:2rem;box-shadow:0 1px 3px #3c404326,0 1px 2px #3c404326}.outline-btn{border:2px solid #374151;color:#374151;background:transparent}.solid-btn{background-color:#374151;border:2px solid #374151;color:#fff}.text-btn{border:unset;color:#000}.btn-style{padding-top:5px;padding-bottom:5px;font-size:16px!important;margin-top:14px}.box-shadow{height:40px}.gradientStyle{-webkit-background-clip:text!important;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
1435
1435
  }
1436
1436
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LinkEditorComponent, decorators: [{
1437
1437
  type: Component,
1438
1438
  args: [{ selector: 'simpo-link-editor', standalone: true, imports: [CommonModule, FormsModule, MatOptionModule, MatInputModule, MatSelectModule, MatIconModule, ButtonDirectiveDirective, MatSliderModule, MatProgressSpinner], template: "<section>\r\n <div class=\"header\">\r\n <p>{{data.type == 'BUTTON' ? \"Button\" : \"Link\"}} Settings</p>\r\n <mat-icon (click)=\"closeDialog()\" class=\"f-18 d-flex align-items-center justify-content-center cp\">close</mat-icon>\r\n </div>\r\n\r\n <div class=\"body\">\r\n <div>\r\n <label class=\"link-text\">{{data.type == 'BUTTON' ? \"Button\" : \"Link\"}} Text</label><br>\r\n <input type=\"text\" class=\"input-text link-text-input\" [(ngModel)]=\"link.label\">\r\n <p class=\"desc\">This is the text that will be displayed to users</p>\r\n </div>\r\n\r\n <hr>\r\n\r\n <!-- <ng-container *ngIf=\"data.type == 'BUTTON'\">\r\n <select>\r\n <ng-container *ngFor=\"let style of styles\">\r\n <option (click)=\"changeButtonStyle(style)\" [value]=\"style.name\">{{style.name}}</option>\r\n </ng-container>\r\n <select>\r\n </ng-container> -->\r\n\r\n <ng-container *ngIf=\"data.type == 'BUTTON'\">\r\n <div class=\"field-container mb-2\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <label class=\"link-text mb-1\">Button</label>\r\n <div class=\"colorType d-flex align-items-center justify-content-center\">\r\n <select class=\"border-0 w-100\" [(ngModel)]=\"data.buttonStyle.type\" (ngModelChange)=\"changeButtonStyle()\">\r\n <ng-container *ngFor=\"let type of buttonTypes\">\r\n <option [value]=\"type.type\">\r\n {{type.type | titlecase}}\r\n </option>\r\n </ng-container>\r\n </select>\r\n </div>\r\n </div>\r\n <div>\r\n <div class=\"preview d-flex justify-content-center\">\r\n <button class=\"btn-style w-80\" [style.borderRadius]=\"setBorderRadius()\" [style.border]=\"setBorder()\"\r\n [style.background]=\"setBackground()\">\r\n <span\r\n *ngIf=\"(data?.buttonStyle?.type === 'Text' || data?.buttonStyle?.type === 'Outline') && data?.buttonStyle?.colorType === 'Gradient'\"\r\n [ngStyle]=\"{\r\n 'background': 'linear-gradient(90deg, ' + data?.buttonStyle?.background + ' 0%, ' + data?.buttonStyle.secondaryBackground + ' 100%)'\r\n }\">\r\n {{ link.label ? link.label : \"Button Text\"}}\r\n </span>\r\n <span *ngIf=\"data?.style?.colorType == 'Solid' || data?.buttonStyle?.type == 'Solid'\"\r\n [style.color]=\"setColor()\">\r\n {{ link.label ? link.label : \"Button Text\"}}\r\n </span>\r\n <span *ngIf=\"data?.buttonStyle?.type === 'Outline'\"\r\n [style.color]=\"setColor()\">\r\n {{ link.label ? link.label : \"Button Text\"}}\r\n </span>\r\n <span *ngIf=\"data?.buttonStyle?.type === 'Text'\"\r\n [style.color]=\"data.buttonStyle.background\">\r\n {{ link.label ? link.label : \"Button Text\"}}\r\n </span>\r\n </button>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"field-container\">\r\n <label class=\"link-text\">Button Style</label>\r\n <div class=\"color-container row\">\r\n <div class=\"color br-10\">\r\n <div class=\"color-top d-flex justify-content-between mb-2 align-items-center\">\r\n <div class=\"left-side\">Color</div>\r\n <div class=\"right-side\">\r\n <div class=\"colorType d-flex align-items-center justify-content-center w-100\">\r\n <select class=\"border-0 w-100\" [(ngModel)]=\"data.buttonStyle.colorType\"\r\n (ngModelChange)=\"changeButtonStyle()\">\r\n <ng-container *ngFor=\"let type of backgroundType\">\r\n <option style=\"padding: 10px;\">\r\n {{ type | titlecase }}</option>\r\n </ng-container>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"color-bottom\">\r\n <div class=\"mt-20\" *ngIf=\"data.buttonStyle.colorType === 'Solid'\">\r\n <div class=\"text-background\">\r\n <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.background\"\r\n (ngModelChange)=\"getContrastTextColor(data.buttonStyle.background)\" style=\"display: none;\"\r\n #colorInput>\r\n <div class=\"w-100 d-flex flex-column mt-2\">\r\n <label class=\"color-text mb-1 d-flex justify-content-center\"> {{ getColorLabel()}}</label>\r\n <div class=\"w-100 d-flex justify-content-center\">\r\n <div class=\"custom-input\" [style.background]=\"data.buttonStyle.background\"\r\n (click)=\"colorInput.click()\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mt-20\" *ngIf=\"data.buttonStyle.colorType === 'Gradient'\">\r\n <div class=\"text-background\">\r\n <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.background\"\r\n (ngModelChange)=\"changeButtonStyle()\" style=\"display: none;\" #colorInput1>\r\n <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.secondaryBackground\"\r\n (ngModelChange)=\"changeButtonStyle()\" style=\"display: none;\" #colorInput>\r\n <div class=\"w-100 d-flex mt-2\">\r\n <div class=\"w-100 d-flex flex-column\">\r\n <label class=\"color-text mb-1 d-flex justify-content-center\">Color 1</label>\r\n <div class=\"d-flex justify-content-center\">\r\n <div class=\"custom-input\" [style.background]=\"data?.buttonStyle?.background\"\r\n (click)=\"colorInput1.click()\"></div>\r\n </div>\r\n </div>\r\n <div class=\"w-100 d-flex flex-column\">\r\n <label class=\"color-text mb-1 d-flex justify-content-center\">Color 2</label>\r\n <div class=\"d-flex justify-content-center\">\r\n <div class=\"custom-input\" [style.background]=\"data?.buttonStyle?.secondaryBackground\"\r\n (click)=\"colorInput.click()\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"gradient-direction\">\r\n <div class=\"left-direction mt-3 mb-1\"> Direction</div>\r\n <div class=\"right-direction\">\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <div class=\"box-shadow d-flex br-10 w-80\">\r\n <ng-container *ngFor=\"let direction of directionType\">\r\n <div class=\"color-box d-flex p-2 align-items-center justify-content-center br-10\"\r\n [ngClass]=\"{'selected' : data.buttonStyle?.gradientDirection === direction.type}\"\r\n (click)=\"data.buttonStyle.gradientDirection = direction.type;changeButtonStyle()\">\r\n <img class=\"w-10\" [src]=\"direction.icon\" alt=\"icon\"\r\n *ngIf=\"data.buttonStyle?.gradientDirection !== direction.type\" loading=\"lazy\">\r\n <img class=\"w-10\" [src]=\"direction.activeIcon\" alt=\"icon\"\r\n *ngIf=\"data.buttonStyle?.gradientDirection === direction.type\" loading=\"lazy\">\r\n </div>\r\n </ng-container>\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=\"mt-20\" *ngIf=\"data.buttonStyle.type != 'Text'\">\r\n <div class=\"text-background\">\r\n <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.textColor\"\r\n (ngModelChange)=\"changeButtonStyle()\" style=\"display: none;\" #colorInput3>\r\n <div class=\"w-100 d-flex flex-column mt-2\">\r\n <label class=\"color-text mb-1 d-flex justify-content-center\">Text Color</label>\r\n <div class=\"w-100 d-flex justify-content-center\">\r\n <div class=\"custom-input\" [style.background]=\"data.buttonStyle.textColor\"\r\n (click)=\"colorInput3.click()\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"corner-radius bg-white p-2 br-10 d-flex justify-content-between\"\r\n *ngIf=\"data.buttonStyle.type != 'Text'\">\r\n <div class=\"sub-text-1 d-flex align-items-center\">\r\n Corner Radius\r\n </div>\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <div class=\"box-shadow d-flex br-10\">\r\n <ng-container *ngFor=\"let shape of buttonShapes\">\r\n <div class=\"color-box d-flex p-2 align-items-center justify-content-center br-10\"\r\n [ngClass]=\"{'selected' : data.buttonStyle.shape === shape.type}\"\r\n (click)=\"data.buttonStyle.shape = shape.type;changeButtonStyle()\">\r\n <img [src]=\"shape.icon\" alt=\"icon\" *ngIf=\"data.buttonStyle.shape !== shape.type\" loading=\"lazy\"\r\n class=\"transition-image\">\r\n <img [src]=\"shape.activeIcon\" alt=\"icon\" *ngIf=\"data.buttonStyle?.shape === shape.type\"\r\n loading=\"lazy\" class=\"transition-image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"p-2 d-flex justify-content-between align-items-center mt-20\">\r\n <div class=\"fw-bold\">Show Icon</div>\r\n <div class=\"form-check form-switch ml-auto\">\r\n <input class=\"form-check-input switch-btn\" type=\"checkbox\" [(ngModel)]=\"link.showIcon\" role=\"switch\">\r\n </div>\r\n </div>\r\n <div>\r\n <!-- <p class=\"heading mb-0\">Image</p> -->\r\n <div class=\"upload-image cp\" *ngIf=\"link.showIcon && !link?.icon?.url\" (click)=\"updateImage()\">\r\n <img loading=\"lazy\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\"\r\n alt=\"\">\r\n <p class=\"upload-text mb-0\">Upload a file</p>\r\n <p class=\"upload-text mb-0\">or select an existing one</p>\r\n <span class=\"upload-text\">up to 32MB</span>\r\n </div>\r\n <div class=\"sec d-flex align-items-center\" *ngIf=\"link.showIcon && link?.icon?.url\">\r\n <ng-container *ngIf=\"!imgLoader\">\r\n <img [src]=\"link?.icon?.url\">\r\n <div class=\"repalce-image cursor-pointer\" (click)=\"updateImage()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" width=\"24\"\r\n height=\"24\" class=\"icon w-4 h-4\" aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n d=\"m4 16 4.58579-4.5858c.78104-.781 2.04741-.781 2.82841 0L16 16m-2-2 1.5858-1.5858c.781-.781 2.0474-.781 2.8284 0L20 14m-6-6h.01M6 20h12c1.1046 0 2-.8954 2-2V6c0-1.10457-.8954-2-2-2H6c-1.10457 0-2 .89543-2 2v12c0 1.1046.89543 2 2 2Z\">\r\n </path>\r\n </svg>\r\n </div>\r\n\r\n <div class=\"delete-image cursor-pointer \" (click)=\"deleteImage()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"#ffffff\" viewBox=\"0 0 24 24\" width=\"24\"\r\n height=\"24\" class=\"icon h-4 w-4\" aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n d=\"m19 7-.8673 12.1425C18.0579 20.1891 17.187 21 16.1378 21H7.86224c-1.04928 0-1.92016-.8109-1.99492-1.8575L5 7m5 4v6m4-6v6m1-10V4c0-.55228-.4477-1-1-1h-4c-.55228 0-1 .44772-1 1v3M4 7h16\">\r\n </path>\r\n </svg>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"imgLoader\">\r\n <div class=\"upload_spinner d-flex w-100 h-100 justify-content-center align-items-center\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n <div class=\"fw-bold p-2 mb-2\">Icon Position</div>\r\n <div class=\"tabs d-flex px-2 gap-3 mb-2\" *ngIf=\"link.showIcon\">\r\n <div class=\"tab px-3 py-2\" *ngFor=\"let tab of ['left','right']\" (click)=\"link.icon.iconPosition = tab\"\r\n [class.selectedTab]=\"link?.icon?.iconPosition == tab\">\r\n {{tab | titlecase}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"data?.linkData?.length != 0\">\r\n\r\n\r\n <div class=\"groups cp\">\r\n <div *ngFor=\"let type of linkType\" [ngClass]=\"{'selectedType' : type.type === selectedType}\"\r\n (click)=\"changeType(type.type)\">{{type.type}}</div>\r\n </div>\r\n\r\n <div class=\"field-container mt-3\">\r\n <div *ngIf=\"link.linkType === RedirectionLink.Page\">\r\n <label class=\"input-label-1 mt-3 mb-2\">Select Page</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"link.pageId\" (ngModelChange)=\"setRedirectUrl()\">\r\n <option value=\"\" selected>Select from your existing pages</option>\r\n <option *ngFor=\"let page of templatePage\" [value]=\"page.id\" style=\"padding: 10px;\">\r\n {{page.pageName}}</option>\r\n </select>\r\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\"\r\n alt=\"\">\r\n </div>\r\n </div>\r\n <!-- <div class=\"sub-text\">Select from your existing pages</div> -->\r\n </div>\r\n\r\n <div *ngIf=\"link.linkType === RedirectionLink.section\">\r\n <label class=\"mt-3 mb-2 input-label-1\">Section</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"link.pageId\" style=\"cursor:pointer\">\r\n <option value=\"\" selected>Select the Section</option>\r\n <option *ngFor=\"let section of templatePage[0].components\" [value]=\"section.id\">{{section.sectionName}}\r\n </option>\r\n </select>\r\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\"\r\n alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"link.linkType === RedirectionLink.External || link.linkType === RedirectionLink.Email || link.linkType === RedirectionLink.Phone\">\r\n <label class=\"mt-3 mb-2 input-label-1\">Select type</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"link.linkType\" style=\"cursor:pointer\">\r\n <option value=\"\" selected>Select the Type</option>\r\n <option *ngFor=\"let type of externalLinkType\" [value]=\"type.type\">{{type.type}}</option>\r\n </select>\r\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\"\r\n alt=\"\">\r\n </div>\r\n </div>\r\n <label class=\"input-label mb-2\">{{link.linkType === RedirectionLink.External ? 'Website' : link.linkType ===\r\n RedirectionLink.Email ? 'Email Address' : 'Phone Number'}}</label>\r\n <input type=\"text\" class=\"input-text\" [(ngModel)]=\"link.redirectionUrl\"\r\n [placeholder]=\"link.linkType === RedirectionLink.External ? 'example : https://facebook.com': ''\">\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-between mt-10\">\r\n <label class=\"input-label-2\">Open in a new browser tab</label>\r\n <div class=\"form-check form-switch ml-auto\">\r\n <input class=\"form-check-input switch-btn\" type=\"checkbox\" [(ngModel)]=\"link.newTab\" role=\"switch\">\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"footer w-100 align-items-center justify-content-center\">\r\n <button *ngIf=\"addLink\" (click)=\"addNewLink()\">Update Link</button>\r\n </div>\r\n\r\n </ng-container>\r\n\r\n </div>\r\n\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}:host{--grey-color: rgba(250, 250, 250, 1)}.br-7{border-radius:7px}.br-10{border-radius:10px}.switch-btn{position:relative;z-index:10}.upload-image{border:3px dashed rgba(44,44,44,.6);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;margin:10px 10px 22px;border-radius:20px;box-shadow:#0000000d 0 1px 2px}.upload-image img{margin-bottom:8px;height:40px}.upload-text{background:var(--primary-bg-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:500}.sec{padding:10px 10px 22px;position:relative}.sec img{width:100%;height:200px;border-radius:20px}.delete-image{background-color:#d92d20;width:30px;height:30px;border-radius:6px;display:flex;justify-content:center;align-items:center;position:absolute;top:20px;right:20px}.repalce-image{display:flex;align-items:center;background:#fff;padding:2px;border-radius:6px;position:absolute;bottom:30px;left:20px}.selectedTab{background:#39393934;font-weight:700}.tab{border:1px solid rgba(44,44,44,.6);border-radius:12px}.w-90{width:90%}.sub-text-1{font-size:15px;color:#000}.w-48{width:48%}.box-shadow{box-shadow:0 0 4px #00000040}.color-box{width:50px}.selected{background:var(--primary-bg-color)}.header{height:45px;display:flex;justify-content:space-between;border-bottom:2px solid #F0F0F0;align-items:center;padding-left:15px;padding-right:15px}.header p{font-size:16px;font-weight:600;font-family:var(--primary-font-family)}.body{padding:15px}.footer{height:45px;position:absolute;bottom:0;left:0;padding:0 15px}.footer button{border:unset;border-radius:10px;font-size:15px;font-weight:500;padding:5px;color:#fff;text-align:center;background:var(--primary-bg-color)}p{margin-bottom:0!important}.link-text{font-size:15px;font-weight:600;font-family:var(--primary-font-family);color:#434343;margin-bottom:10px}.input-text{height:37px;width:100%;border:1px solid var(--grey-color);border-radius:5px;outline:none;font-size:14px;padding:10px 20px;font-weight:400;color:#090909e6}.link-text-input{background-color:var(--grey-color)}.desc{margin-top:10px;font-size:13px;color:#09090980;font-weight:400;font-family:Inter;margin-bottom:25px!important}hr{border:1px solid rgba(116,116,116,.2)}.groups{display:flex;justify-content:space-between;margin-top:25px}.groups div{font-size:15px;font-weight:600;color:#2c2c2c99;padding:6px 30px;cursor:pointer}.selectedType{position:relative;text-align:center;background:var(--primary-bg-color);background-clip:text;box-shadow:0 0 4px #00000040;border-radius:10px}.selectedType:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.f-18{font-size:18px}.mt-10{margin-top:10px}.drop-down-container{padding:10px;border-radius:8px;background:#fff}.drop-down-container select{width:90%;appearance:none;position:relative;outline:unset;border:unset;border-right:3px solid rgba(230,230,230,1);background:#fff;font-size:14px;padding:0 10px;border-radius:unset}.drop-down-container .down-arrow{width:10%;padding:0 6px}select option{padding:10px;background:#fff;color:#000}.field-container{background:var(--grey-color);border-radius:13px;padding:10px}.sub-text{font-size:13px;color:#09090980}.input-label-1{font-size:16px;font-weight:600}.input-label-2{color:#09090980}option:hover{background:var(--primary-bg-color)}.cp{cursor:pointer}.colorType{padding:3px 10px;box-shadow:0 0 4px #00000040;border-radius:10px;width:25%;border:1px solid #090981}.colorType select{background:transparent}.border-0{outline:unset}.transition-image{transition:opacity .3s ease-in-out,transform .3s ease-in-out}.color{background:#fff;padding:1rem}.custom-mat-form{width:100%;margin:10px 0;background-color:#f9f9f9;border-radius:8px}.custom-mat-form.mat-form-field-appearance-outline .mat-form-field-outline{color:#1976d2;border-color:#1976d2}.custom-mat-form .mat-form-field-label{color:#666;font-weight:500}.custom-mat-form .mat-select-trigger{padding:10px;font-size:14px;color:#333}::ng-deep .mat-select-panel{background-color:#fff;color:#333}::ng-deep .mat-option{font-size:14px;padding:10px 16px}::ng-deep .mat-option:hover{background-color:#e0f7fa}.color-container{padding:7px;gap:10px;border-radius:10px}.custom-input{height:35px;width:80%;border-radius:2rem;box-shadow:0 1px 3px #3c404326,0 1px 2px #3c404326}.outline-btn{border:2px solid #374151;color:#374151;background:transparent}.solid-btn{background-color:#374151;border:2px solid #374151;color:#fff}.text-btn{border:unset;color:#000}.btn-style{padding-top:5px;padding-bottom:5px;font-size:16px!important;margin-top:14px}.box-shadow{height:40px}.gradientStyle{-webkit-background-clip:text!important;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}\n"] }]
1439
- }], ctorParameters: () => [{ type: ElementServiceService }, { type: i3.MatDialogRef }, { type: undefined, decorators: [{
1439
+ }], ctorParameters: () => [{ type: ElementServiceService }, { type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
1440
1440
  type: Inject,
1441
1441
  args: [MAT_DIALOG_DATA]
1442
- }] }, { type: EventsService }, { type: i3.MatDialog }] });
1442
+ }] }, { type: EventsService }, { type: i1$1.MatDialog }] });
1443
1443
 
1444
1444
  class ButtonEditorDirective {
1445
1445
  constructor(el, matDialog) {
@@ -1510,7 +1510,7 @@ class ButtonEditorDirective {
1510
1510
  ngOnDestroy() {
1511
1511
  this.cleanup();
1512
1512
  }
1513
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonEditorDirective, deps: [{ token: i0.ElementRef }, { token: i3.MatDialog }], target: i0.ɵɵFactoryTarget.Directive }); }
1513
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonEditorDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Directive }); }
1514
1514
  static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ButtonEditorDirective, isStandalone: true, selector: "button[appButtonEditor]", inputs: { appButtonEditor: "appButtonEditor", buttonData: "buttonData", buttonStyle: "buttonStyle", backgroundInfo: "backgroundInfo", sectionId: "sectionId", buttonId: "buttonId" }, usesOnChanges: true, ngImport: i0 }); }
1515
1515
  }
1516
1516
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonEditorDirective, decorators: [{
@@ -1519,7 +1519,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
1519
1519
  selector: 'button[appButtonEditor]',
1520
1520
  standalone: true
1521
1521
  }]
1522
- }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i3.MatDialog }], propDecorators: { appButtonEditor: [{
1522
+ }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.MatDialog }], propDecorators: { appButtonEditor: [{
1523
1523
  type: Input
1524
1524
  }], buttonData: [{
1525
1525
  type: Input
@@ -2270,16 +2270,16 @@ class ImageEditorComponent {
2270
2270
  this.categoryPath = params.get('category');
2271
2271
  }
2272
2272
  }
2273
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageEditorComponent, deps: [{ token: EventsService }, { token: ElementServiceService }, { token: i3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i3.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
2273
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageEditorComponent, deps: [{ token: EventsService }, { token: ElementServiceService }, { token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
2274
2274
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageEditorComponent, isStandalone: true, selector: "simpo-image-editor", ngImport: i0, template: "<section class=\"main-section\">\r\n <div class=\"header-section d-flex justify-content-between align-items-center\">\r\n <div class=\"head-text\">Image Settings</div>\r\n <mat-icon class=\"d-flex align-items-center justify-content-center f-18 cp\"\r\n (click)=\"dialogRef.close()\">close</mat-icon>\r\n </div>\r\n <div>\r\n <!-- <p class=\"heading mb-0\">Image</p> -->\r\n <div class=\"upload-image cp\" *ngIf=\"!imageData.url && !iconData.url\" (click)=\"updateImage()\">\r\n <img loading=\"lazy\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\"\r\n alt=\"\">\r\n <p class=\"upload-text mb-0\">Upload a file</p>\r\n <p class=\"upload-text mb-0\">or select an existing one</p>\r\n <span class=\"upload-text\">up to 32MB</span>\r\n </div>\r\n <div class=\"sec d-flex align-items-center\" *ngIf=\"imageData.url || iconData.url\">\r\n <ng-container *ngIf=\"!imgLoader\">\r\n <img [src]=\"imageData.url || iconData.url\" [alt]=\"imageData.altText ?? ''\"\r\n *ngIf=\"!imageData?.url?.includes('.mp4')\">\r\n <video [src]=\"imageData.url\" class=\"w-100 h-100\" *ngIf=\"imageData?.url?.includes('.mp4')\" muted loop></video>\r\n <div class=\"repalce-image cursor-pointer\" (click)=\"updateImage()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" width=\"24\"\r\n height=\"24\" class=\"icon w-4 h-4\" aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n d=\"m4 16 4.58579-4.5858c.78104-.781 2.04741-.781 2.82841 0L16 16m-2-2 1.5858-1.5858c.781-.781 2.0474-.781 2.8284 0L20 14m-6-6h.01M6 20h12c1.1046 0 2-.8954 2-2V6c0-1.10457-.8954-2-2-2H6c-1.10457 0-2 .89543-2 2v12c0 1.1046.89543 2 2 2Z\">\r\n </path>\r\n </svg>\r\n </div>\r\n\r\n <div class=\"delete-image cursor-pointer \" (click)=\"deleteImage()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"#ffffff\" viewBox=\"0 0 24 24\" width=\"24\"\r\n height=\"24\" class=\"icon h-4 w-4\" aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n d=\"m19 7-.8673 12.1425C18.0579 20.1891 17.187 21 16.1378 21H7.86224c-1.04928 0-1.92016-.8109-1.99492-1.8575L5 7m5 4v6m4-6v6m1-10V4c0-.55228-.4477-1-1-1h-4c-.55228 0-1 .44772-1 1v3M4 7h16\">\r\n </path>\r\n </svg>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"imgLoader\">\r\n <div class=\"upload_spinner d-flex w-100 h-100 justify-content-center align-items-center\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"data.showIcon\">\r\n <span class=\"p-0-10 clr-red\">Note : This Icon Feature Supports SVG and PNG in black and white format only.</span>\r\n </ng-container>\r\n <ng-container *ngIf=\"!data.showIcon\">\r\n <div class=\"w-100 p-0-10 mb-22\" *ngIf=\"imageData.hasOwnProperty('altText')\">\r\n <p class=\"heading mb-2\">Alt text</p>\r\n <input type=\"text\" placeholder=\"Enter alt text\" class=\"input-field w-100\" [(ngModel)]=\"imageData.altText\">\r\n <div class=\"sub-text\">When the image fails to load, this text will be displayed.</div>\r\n </div>\r\n\r\n <div class=\"image mb-22\" *ngIf=\"imageData.hasOwnProperty('position')\">\r\n <p class=\"heading mb-1\">Image Position</p>\r\n <div class=\"horizontal-action\">\r\n <label>Horizontal</label>\r\n <div class=\"slider d-flex align-items-center justify-content-start cp\">\r\n <input [min]=\"min\" [max]=\"max\" step=\"5\" type=\"range\" [(ngModel)]=\"imageData.position.x\"\r\n (input)=\"horizontalPosition()\" class=\"w-75\">\r\n </div>\r\n </div>\r\n <div class=\"horizontal-action\" style=\"margin-top: 5px;\">\r\n <label>Vertical</label>\r\n <div class=\"slider d-flex align-items-center justify-content-start cp\">\r\n <input [min]=\"min\" [max]=\"max\" step=\"5\" type=\"range\" [(ngModel)]=\"imageData.position.y\"\r\n (input)=\"horizontalPosition()\" class=\"w-75\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"groups cp px-3\">\r\n <div *ngFor=\"let type of linkType\" [ngClass]=\"{'selectedType' : type.type === selectedType}\"\r\n (click)=\"changeType(type.type)\">{{type.type}}</div>\r\n </div>\r\n <div class=\"field-container mt-3 mx-3\">\r\n <div *ngIf=\"link.linkType === RedirectionLink.Page\">\r\n <label class=\"input-label-1 mt-3 mb-2\">Select Page</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"link.pageId\" (change)=\"onPageChange($event)\">\r\n <option value=\"\" selected>Select from your existing pages</option>\r\n <option *ngFor=\"let page of templatePage\" [value]=\"page.id\" style=\"padding: 10px;\">\r\n {{page.pageName}}</option>\r\n </select>\r\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"pageName == 'Product List'\">\r\n <label class=\"input-label-1 mt-3 mb-2\">Select Collection</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"collectionPath\" (ngModelChange)=\"addCollectionToPath()\">\r\n <option value=\"\" selected>Select from your existing pages</option>\r\n <option *ngFor=\"let coll of collectionList\" style=\"padding: 10px;\" [value]=\"coll.collectionName\">\r\n {{coll?.collectionName}}</option>\r\n </select>\r\n </div>\r\n <label class=\"input-label-1 mt-3 mb-2\">Select Category</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"categoryPath\" (ngModelChange)=\"addCategoryToPath()\">\r\n <option value=\"\" selected>Select from your existing pages</option>\r\n <option *ngFor=\"let coll of categoryList\" style=\"padding: 10px;\" [value]=\"coll.categoryName\">\r\n {{coll?.categoryName}}</option>\r\n </select>\r\n </div>\r\n </ng-container>\r\n <!-- <div class=\"sub-text\">Select from your existing pages</div> -->\r\n </div>\r\n <div *ngIf=\"link.linkType === RedirectionLink.section\">\r\n <label class=\"mt-3 mb-2 input-label-1\">Section</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"link.pageId\">\r\n <option value=\"\" selected>Select the Section</option>\r\n <option *ngFor=\"let section of templatePage[0]?.components\" [value]=\"section.id\">{{section.sectionName}}\r\n </option>\r\n </select>\r\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-between mt-10\">\r\n <label class=\"input-label-2\">Open in a new browser tab</label>\r\n <div class=\"form-check form-switch ml-auto\">\r\n <input class=\"form-check-input switch-btn cursor-pointer\" type=\"checkbox\" [(ngModel)]=\"link.newTab\"\r\n role=\"switch\">\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"link.linkType === RedirectionLink.External || link.linkType === RedirectionLink.Email || link.linkType === RedirectionLink.Phone\">\r\n <label class=\"mt-3 mb-2 input-label-1\">Select type</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"link.linkType\">\r\n <option value=\"\" selected>Select the Type</option>\r\n <option *ngFor=\"let type of externalLinkType\" [value]=\"type.type\">{{type.type}}</option>\r\n </select>\r\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n </div>\r\n </div>\r\n <label class=\"input-label mb-2\">{{link.linkType === RedirectionLink.External ? 'Website' : link.linkType ===\r\n RedirectionLink.Email ? 'Email Address' : 'Phone Number'}}</label>\r\n <input type=\"text\" class=\"input-text\" [(ngModel)]=\"link.redirectionUrl\"\r\n [placeholder]=\"link.linkType === RedirectionLink.External ? 'example : https://facebook.com': ''\">\r\n </div>\r\n\r\n\r\n </div>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngIf=\"data.showIcon\">\r\n <div class=\"icon-color px-3 mb-3 d-flex flex-column justify-content-center align-items-center\">\r\n <label class=\"input-label-1 mb-4 w-100\">Icon Color</label>\r\n <div [style.backgroundColor]=\"iconData.color\" class=\"custom-input\" (click)=\"colorInput.click()\"></div>\r\n <input type=\"color\" [(ngModel)]=\"iconData.color\" (ngModelChange)=\"changeIconColor()\" class=\"input-text d-none\"\r\n #colorInput />\r\n </div>\r\n\r\n <div class=\"background-on d-flex justify-content-between px-3 mb-2\">\r\n <label class=\"input-label-1\">Show Background</label>\r\n <div class=\"form-check form-switch ml-auto\">\r\n <input class=\"form-check-input switch-btn cursor-pointer\" type=\"checkbox\" [(ngModel)]=\"iconData.showBackground\"\r\n role=\"switch\">\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"tabs d-flex px-3 gap-3 mb-2\" *ngIf=\"iconData.showBackground\">\r\n <div class=\"tab px-3 py-2\" *ngFor=\"let tab of tabs\" (click)=\"iconData.backgroundType = tab\"\r\n [class.selectedTab]=\"iconData.backgroundType == tab\">\r\n {{tab}}\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"icon-background px-3 d-flex flex-column justify-content-center align-items-center\"\r\n *ngIf=\"iconData.showBackground\">\r\n <label class=\"input-label-1 mb-3 w-100\">Icon Background</label>\r\n <div [style.backgroundColor]=\"iconData?.backgroundColor\" class=\"custom-input mb-2\" (click)=\"colorInput1.click()\">\r\n </div>\r\n <input type=\"color\" [(ngModel)]=\"iconData.backgroundColor\" class=\"input-text d-none\" #colorInput1 />\r\n </div>\r\n\r\n <div class=\"icon-background px-3 d-flex flex-column justify-content-center align-items-center\"\r\n *ngIf=\"iconData.showBackground && iconData.backgroundType === 'Gradient'\">\r\n <label class=\"input-label-1 mb-3 w-100\">Icon Secondary Background</label>\r\n <div [style.backgroundColor]=\"iconData?.secondaryColor\" class=\"custom-input\" (click)=\"colorInput2.click()\"></div>\r\n <input type=\"color\" [(ngModel)]=\"iconData.secondaryColor\" class=\"input-text d-none\" #colorInput2 />\r\n </div>\r\n </ng-container>\r\n\r\n\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}:host{--grey-color: rgba(250, 250, 250, 1)}.custom-input{height:35px;width:100%;border-radius:2rem;box-shadow:0 1px 3px #3c404326,0 1px 2px #3c404326}.tab{border:1px solid rgba(44,44,44,.6);border-radius:12px}.selectedTab{background:#39393934;font-weight:700}.clr-red{color:red;font-size:12px;margin-bottom:10px}.heading{color:#000;font-size:17px;font-weight:600}.upload-text{background:var(--primary-bg-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:500}.upload-image{border:3px dashed rgba(44,44,44,.6);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;margin:10px 10px 22px;border-radius:20px;box-shadow:#0000000d 0 1px 2px}.upload-image img{margin-bottom:8px;height:40px}.mb-0{margin-bottom:0!important}.desc{color:#fafafa;font-size:15px}.input-field{font-size:14px;outline:none;border:unset;border-radius:5px;padding:10px;color:#090909e6;background:#fafafa}.horizontal-action{display:flex;justify-content:space-between;align-items:center}.horizontal-action label{width:25%;font-size:14px;font-weight:400!important}.main-section{display:flex;flex-direction:column}.image{display:flex;flex-direction:column;gap:5px;padding:0 10px}.slider{width:70%}.cp{cursor:pointer}.sec{padding:10px 10px 22px;position:relative}.sec img{width:100%;height:200px;border-radius:20px}.delete-image{background-color:#d92d20;width:30px;height:30px;border-radius:6px;display:flex;justify-content:center;align-items:center;position:absolute;top:20px;right:20px}.repalce-image{display:flex;align-items:center;background:#fff;padding:2px;border-radius:6px;position:absolute;bottom:30px;left:20px}.f-18{font-size:18px}.header-section{padding:10px;box-shadow:0 0 4px #00000040}.header-section .head-text{font-weight:600;font-size:15px;color:#000}.header-section mat-icon{color:#2d264b}.p-0-10{padding:0 10px}.sub-text{font-size:13px;font-weight:400;line-height:24px;color:#09090980}.w-75{width:75%}.groups{display:flex;justify-content:space-between;margin-top:25px}.groups div{font-size:15px;font-weight:600;color:#2c2c2c99;padding:6px 30px;cursor:pointer}.selectedType{position:relative;text-align:center;background:var(--primary-bg-color);background-clip:text;box-shadow:0 0 4px #00000040;border-radius:10px}.selectedType:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.field-container{background:var(--grey-color);border-radius:13px;padding:10px}.drop-down-container{padding:10px;border-radius:8px;background:#fff;cursor:pointer}.drop-down-container select{width:90%;appearance:none;position:relative;outline:unset;border:unset;border-right:3px solid rgba(230,230,230,1);background:#fff;font-size:14px;padding:0 10px;border-radius:unset}.drop-down-container .down-arrow{width:10%;padding:0 6px}.input-label-1{font-size:16px;font-weight:600}.input-text{height:37px;width:100%;border:1px solid var(--grey-color);border-radius:5px;outline:none;font-size:14px;padding:10px 20px;font-weight:400;color:#090909e6}.mb-22{margin-bottom:22px}input[type=range]{-webkit-appearance:none;width:100%;height:8px;border-radius:20px;overflow:hidden;background:#fafafa}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:8px;width:10px;background:var(--primary-bg-color);box-shadow:-50rem 0 5rem 20rem #250d5e,-40rem 0 5rem 30rem #0bf,-30rem 0 2rem 25rem #250d5e,-25.5rem 0 0 25rem #0bf;border-radius:50%;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
2275
2275
  }
2276
2276
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageEditorComponent, decorators: [{
2277
2277
  type: Component,
2278
2278
  args: [{ selector: 'simpo-image-editor', standalone: true, imports: [CommonModule, FormsModule, MatIconModule, MatSliderModule, MatProgressSpinner], template: "<section class=\"main-section\">\r\n <div class=\"header-section d-flex justify-content-between align-items-center\">\r\n <div class=\"head-text\">Image Settings</div>\r\n <mat-icon class=\"d-flex align-items-center justify-content-center f-18 cp\"\r\n (click)=\"dialogRef.close()\">close</mat-icon>\r\n </div>\r\n <div>\r\n <!-- <p class=\"heading mb-0\">Image</p> -->\r\n <div class=\"upload-image cp\" *ngIf=\"!imageData.url && !iconData.url\" (click)=\"updateImage()\">\r\n <img loading=\"lazy\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\"\r\n alt=\"\">\r\n <p class=\"upload-text mb-0\">Upload a file</p>\r\n <p class=\"upload-text mb-0\">or select an existing one</p>\r\n <span class=\"upload-text\">up to 32MB</span>\r\n </div>\r\n <div class=\"sec d-flex align-items-center\" *ngIf=\"imageData.url || iconData.url\">\r\n <ng-container *ngIf=\"!imgLoader\">\r\n <img [src]=\"imageData.url || iconData.url\" [alt]=\"imageData.altText ?? ''\"\r\n *ngIf=\"!imageData?.url?.includes('.mp4')\">\r\n <video [src]=\"imageData.url\" class=\"w-100 h-100\" *ngIf=\"imageData?.url?.includes('.mp4')\" muted loop></video>\r\n <div class=\"repalce-image cursor-pointer\" (click)=\"updateImage()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" width=\"24\"\r\n height=\"24\" class=\"icon w-4 h-4\" aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n d=\"m4 16 4.58579-4.5858c.78104-.781 2.04741-.781 2.82841 0L16 16m-2-2 1.5858-1.5858c.781-.781 2.0474-.781 2.8284 0L20 14m-6-6h.01M6 20h12c1.1046 0 2-.8954 2-2V6c0-1.10457-.8954-2-2-2H6c-1.10457 0-2 .89543-2 2v12c0 1.1046.89543 2 2 2Z\">\r\n </path>\r\n </svg>\r\n </div>\r\n\r\n <div class=\"delete-image cursor-pointer \" (click)=\"deleteImage()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"#ffffff\" viewBox=\"0 0 24 24\" width=\"24\"\r\n height=\"24\" class=\"icon h-4 w-4\" aria-hidden=\"true\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n d=\"m19 7-.8673 12.1425C18.0579 20.1891 17.187 21 16.1378 21H7.86224c-1.04928 0-1.92016-.8109-1.99492-1.8575L5 7m5 4v6m4-6v6m1-10V4c0-.55228-.4477-1-1-1h-4c-.55228 0-1 .44772-1 1v3M4 7h16\">\r\n </path>\r\n </svg>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"imgLoader\">\r\n <div class=\"upload_spinner d-flex w-100 h-100 justify-content-center align-items-center\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"data.showIcon\">\r\n <span class=\"p-0-10 clr-red\">Note : This Icon Feature Supports SVG and PNG in black and white format only.</span>\r\n </ng-container>\r\n <ng-container *ngIf=\"!data.showIcon\">\r\n <div class=\"w-100 p-0-10 mb-22\" *ngIf=\"imageData.hasOwnProperty('altText')\">\r\n <p class=\"heading mb-2\">Alt text</p>\r\n <input type=\"text\" placeholder=\"Enter alt text\" class=\"input-field w-100\" [(ngModel)]=\"imageData.altText\">\r\n <div class=\"sub-text\">When the image fails to load, this text will be displayed.</div>\r\n </div>\r\n\r\n <div class=\"image mb-22\" *ngIf=\"imageData.hasOwnProperty('position')\">\r\n <p class=\"heading mb-1\">Image Position</p>\r\n <div class=\"horizontal-action\">\r\n <label>Horizontal</label>\r\n <div class=\"slider d-flex align-items-center justify-content-start cp\">\r\n <input [min]=\"min\" [max]=\"max\" step=\"5\" type=\"range\" [(ngModel)]=\"imageData.position.x\"\r\n (input)=\"horizontalPosition()\" class=\"w-75\">\r\n </div>\r\n </div>\r\n <div class=\"horizontal-action\" style=\"margin-top: 5px;\">\r\n <label>Vertical</label>\r\n <div class=\"slider d-flex align-items-center justify-content-start cp\">\r\n <input [min]=\"min\" [max]=\"max\" step=\"5\" type=\"range\" [(ngModel)]=\"imageData.position.y\"\r\n (input)=\"horizontalPosition()\" class=\"w-75\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"groups cp px-3\">\r\n <div *ngFor=\"let type of linkType\" [ngClass]=\"{'selectedType' : type.type === selectedType}\"\r\n (click)=\"changeType(type.type)\">{{type.type}}</div>\r\n </div>\r\n <div class=\"field-container mt-3 mx-3\">\r\n <div *ngIf=\"link.linkType === RedirectionLink.Page\">\r\n <label class=\"input-label-1 mt-3 mb-2\">Select Page</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"link.pageId\" (change)=\"onPageChange($event)\">\r\n <option value=\"\" selected>Select from your existing pages</option>\r\n <option *ngFor=\"let page of templatePage\" [value]=\"page.id\" style=\"padding: 10px;\">\r\n {{page.pageName}}</option>\r\n </select>\r\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"pageName == 'Product List'\">\r\n <label class=\"input-label-1 mt-3 mb-2\">Select Collection</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"collectionPath\" (ngModelChange)=\"addCollectionToPath()\">\r\n <option value=\"\" selected>Select from your existing pages</option>\r\n <option *ngFor=\"let coll of collectionList\" style=\"padding: 10px;\" [value]=\"coll.collectionName\">\r\n {{coll?.collectionName}}</option>\r\n </select>\r\n </div>\r\n <label class=\"input-label-1 mt-3 mb-2\">Select Category</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"categoryPath\" (ngModelChange)=\"addCategoryToPath()\">\r\n <option value=\"\" selected>Select from your existing pages</option>\r\n <option *ngFor=\"let coll of categoryList\" style=\"padding: 10px;\" [value]=\"coll.categoryName\">\r\n {{coll?.categoryName}}</option>\r\n </select>\r\n </div>\r\n </ng-container>\r\n <!-- <div class=\"sub-text\">Select from your existing pages</div> -->\r\n </div>\r\n <div *ngIf=\"link.linkType === RedirectionLink.section\">\r\n <label class=\"mt-3 mb-2 input-label-1\">Section</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"link.pageId\">\r\n <option value=\"\" selected>Select the Section</option>\r\n <option *ngFor=\"let section of templatePage[0]?.components\" [value]=\"section.id\">{{section.sectionName}}\r\n </option>\r\n </select>\r\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-between mt-10\">\r\n <label class=\"input-label-2\">Open in a new browser tab</label>\r\n <div class=\"form-check form-switch ml-auto\">\r\n <input class=\"form-check-input switch-btn cursor-pointer\" type=\"checkbox\" [(ngModel)]=\"link.newTab\"\r\n role=\"switch\">\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"link.linkType === RedirectionLink.External || link.linkType === RedirectionLink.Email || link.linkType === RedirectionLink.Phone\">\r\n <label class=\"mt-3 mb-2 input-label-1\">Select type</label>\r\n <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n <select [(ngModel)]=\"link.linkType\">\r\n <option value=\"\" selected>Select the Type</option>\r\n <option *ngFor=\"let type of externalLinkType\" [value]=\"type.type\">{{type.type}}</option>\r\n </select>\r\n <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n </div>\r\n </div>\r\n <label class=\"input-label mb-2\">{{link.linkType === RedirectionLink.External ? 'Website' : link.linkType ===\r\n RedirectionLink.Email ? 'Email Address' : 'Phone Number'}}</label>\r\n <input type=\"text\" class=\"input-text\" [(ngModel)]=\"link.redirectionUrl\"\r\n [placeholder]=\"link.linkType === RedirectionLink.External ? 'example : https://facebook.com': ''\">\r\n </div>\r\n\r\n\r\n </div>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngIf=\"data.showIcon\">\r\n <div class=\"icon-color px-3 mb-3 d-flex flex-column justify-content-center align-items-center\">\r\n <label class=\"input-label-1 mb-4 w-100\">Icon Color</label>\r\n <div [style.backgroundColor]=\"iconData.color\" class=\"custom-input\" (click)=\"colorInput.click()\"></div>\r\n <input type=\"color\" [(ngModel)]=\"iconData.color\" (ngModelChange)=\"changeIconColor()\" class=\"input-text d-none\"\r\n #colorInput />\r\n </div>\r\n\r\n <div class=\"background-on d-flex justify-content-between px-3 mb-2\">\r\n <label class=\"input-label-1\">Show Background</label>\r\n <div class=\"form-check form-switch ml-auto\">\r\n <input class=\"form-check-input switch-btn cursor-pointer\" type=\"checkbox\" [(ngModel)]=\"iconData.showBackground\"\r\n role=\"switch\">\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"tabs d-flex px-3 gap-3 mb-2\" *ngIf=\"iconData.showBackground\">\r\n <div class=\"tab px-3 py-2\" *ngFor=\"let tab of tabs\" (click)=\"iconData.backgroundType = tab\"\r\n [class.selectedTab]=\"iconData.backgroundType == tab\">\r\n {{tab}}\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"icon-background px-3 d-flex flex-column justify-content-center align-items-center\"\r\n *ngIf=\"iconData.showBackground\">\r\n <label class=\"input-label-1 mb-3 w-100\">Icon Background</label>\r\n <div [style.backgroundColor]=\"iconData?.backgroundColor\" class=\"custom-input mb-2\" (click)=\"colorInput1.click()\">\r\n </div>\r\n <input type=\"color\" [(ngModel)]=\"iconData.backgroundColor\" class=\"input-text d-none\" #colorInput1 />\r\n </div>\r\n\r\n <div class=\"icon-background px-3 d-flex flex-column justify-content-center align-items-center\"\r\n *ngIf=\"iconData.showBackground && iconData.backgroundType === 'Gradient'\">\r\n <label class=\"input-label-1 mb-3 w-100\">Icon Secondary Background</label>\r\n <div [style.backgroundColor]=\"iconData?.secondaryColor\" class=\"custom-input\" (click)=\"colorInput2.click()\"></div>\r\n <input type=\"color\" [(ngModel)]=\"iconData.secondaryColor\" class=\"input-text d-none\" #colorInput2 />\r\n </div>\r\n </ng-container>\r\n\r\n\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}:host{--grey-color: rgba(250, 250, 250, 1)}.custom-input{height:35px;width:100%;border-radius:2rem;box-shadow:0 1px 3px #3c404326,0 1px 2px #3c404326}.tab{border:1px solid rgba(44,44,44,.6);border-radius:12px}.selectedTab{background:#39393934;font-weight:700}.clr-red{color:red;font-size:12px;margin-bottom:10px}.heading{color:#000;font-size:17px;font-weight:600}.upload-text{background:var(--primary-bg-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:500}.upload-image{border:3px dashed rgba(44,44,44,.6);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;margin:10px 10px 22px;border-radius:20px;box-shadow:#0000000d 0 1px 2px}.upload-image img{margin-bottom:8px;height:40px}.mb-0{margin-bottom:0!important}.desc{color:#fafafa;font-size:15px}.input-field{font-size:14px;outline:none;border:unset;border-radius:5px;padding:10px;color:#090909e6;background:#fafafa}.horizontal-action{display:flex;justify-content:space-between;align-items:center}.horizontal-action label{width:25%;font-size:14px;font-weight:400!important}.main-section{display:flex;flex-direction:column}.image{display:flex;flex-direction:column;gap:5px;padding:0 10px}.slider{width:70%}.cp{cursor:pointer}.sec{padding:10px 10px 22px;position:relative}.sec img{width:100%;height:200px;border-radius:20px}.delete-image{background-color:#d92d20;width:30px;height:30px;border-radius:6px;display:flex;justify-content:center;align-items:center;position:absolute;top:20px;right:20px}.repalce-image{display:flex;align-items:center;background:#fff;padding:2px;border-radius:6px;position:absolute;bottom:30px;left:20px}.f-18{font-size:18px}.header-section{padding:10px;box-shadow:0 0 4px #00000040}.header-section .head-text{font-weight:600;font-size:15px;color:#000}.header-section mat-icon{color:#2d264b}.p-0-10{padding:0 10px}.sub-text{font-size:13px;font-weight:400;line-height:24px;color:#09090980}.w-75{width:75%}.groups{display:flex;justify-content:space-between;margin-top:25px}.groups div{font-size:15px;font-weight:600;color:#2c2c2c99;padding:6px 30px;cursor:pointer}.selectedType{position:relative;text-align:center;background:var(--primary-bg-color);background-clip:text;box-shadow:0 0 4px #00000040;border-radius:10px}.selectedType:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.field-container{background:var(--grey-color);border-radius:13px;padding:10px}.drop-down-container{padding:10px;border-radius:8px;background:#fff;cursor:pointer}.drop-down-container select{width:90%;appearance:none;position:relative;outline:unset;border:unset;border-right:3px solid rgba(230,230,230,1);background:#fff;font-size:14px;padding:0 10px;border-radius:unset}.drop-down-container .down-arrow{width:10%;padding:0 6px}.input-label-1{font-size:16px;font-weight:600}.input-text{height:37px;width:100%;border:1px solid var(--grey-color);border-radius:5px;outline:none;font-size:14px;padding:10px 20px;font-weight:400;color:#090909e6}.mb-22{margin-bottom:22px}input[type=range]{-webkit-appearance:none;width:100%;height:8px;border-radius:20px;overflow:hidden;background:#fafafa}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:8px;width:10px;background:var(--primary-bg-color);box-shadow:-50rem 0 5rem 20rem #250d5e,-40rem 0 5rem 30rem #0bf,-30rem 0 2rem 25rem #250d5e,-25.5rem 0 0 25rem #0bf;border-radius:50%;cursor:pointer}\n"] }]
2279
- }], ctorParameters: () => [{ type: EventsService }, { type: ElementServiceService }, { type: i3.MatDialogRef }, { type: undefined, decorators: [{
2279
+ }], ctorParameters: () => [{ type: EventsService }, { type: ElementServiceService }, { type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
2280
2280
  type: Inject,
2281
2281
  args: [MAT_DIALOG_DATA]
2282
- }] }, { type: i3.MatDialog }] });
2282
+ }] }, { type: i1$1.MatDialog }] });
2283
2283
 
2284
2284
  class ImageEditorDirective {
2285
2285
  constructor(el, matDialog, _eventService, router) {
@@ -2364,7 +2364,7 @@ class ImageEditorDirective {
2364
2364
  this._eventService.buttonRedirection.emit({ data: this.imageData?.content });
2365
2365
  });
2366
2366
  }
2367
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageEditorDirective, deps: [{ token: i0.ElementRef }, { token: i3.MatDialog }, { token: EventsService }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Directive }); }
2367
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageEditorDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.MatDialog }, { token: EventsService }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Directive }); }
2368
2368
  static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ImageEditorDirective, isStandalone: true, selector: "[appImageEditor]", inputs: { appImageEditor: "appImageEditor", imageData: "imageData", sectionId: "sectionId", showIcon: "showIcon", iconData: "iconData" }, usesOnChanges: true, ngImport: i0 }); }
2369
2369
  }
2370
2370
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageEditorDirective, decorators: [{
@@ -2373,7 +2373,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
2373
2373
  selector: '[appImageEditor]',
2374
2374
  standalone: true
2375
2375
  }]
2376
- }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i3.MatDialog }, { type: EventsService }, { type: i2$2.Router }], propDecorators: { appImageEditor: [{
2376
+ }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.MatDialog }, { type: EventsService }, { type: i2$2.Router }], propDecorators: { appImageEditor: [{
2377
2377
  type: Input
2378
2378
  }], imageData: [{
2379
2379
  type: Input
@@ -2976,7 +2976,7 @@ class SanitizeHtmlPipe {
2976
2976
  }
2977
2977
  return this._sanitizer.bypassSecurityTrustHtml(v);
2978
2978
  }
2979
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SanitizeHtmlPipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
2979
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SanitizeHtmlPipe, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
2980
2980
  static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SanitizeHtmlPipe, isStandalone: true, name: "sanitizeHtml" }); }
2981
2981
  }
2982
2982
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SanitizeHtmlPipe, decorators: [{
@@ -2985,7 +2985,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
2985
2985
  name: 'sanitizeHtml',
2986
2986
  standalone: true
2987
2987
  }]
2988
- }], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
2988
+ }], ctorParameters: () => [{ type: i1$2.DomSanitizer }] });
2989
2989
 
2990
2990
  class HeadingElementComponent {
2991
2991
  constructor() {
@@ -3195,13 +3195,13 @@ class AddSectionComponent {
3195
3195
  this.selectedSection = this.sections[Object.keys(this.sections)[0]];
3196
3196
  this.dummy2 = {};
3197
3197
  }
3198
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddSectionComponent, deps: [{ token: i3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i1.HttpClient }, { token: EventsService }, { token: ElementServiceService }, { token: ElementServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
3198
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddSectionComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i1.HttpClient }, { token: EventsService }, { token: ElementServiceService }, { token: ElementServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
3199
3199
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AddSectionComponent, isStandalone: true, selector: "simpo-add-section", ngImport: i0, template: "<section class=\"main-container\">\r\n <div class=\"header-container d-flex align-items-center justify-content-between\">\r\n <div>Select Template</div>\r\n <mat-icon class=\"d-flex align-items-center justify-content-center f-18 cp\" (click)=\"dialog.close()\">\r\n close\r\n </mat-icon>\r\n </div>\r\n <div class=\"parent-container\">\r\n <div class=\"search-bar-container\">\r\n <div class=\"search-bar d-flex gap-10\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/314661c1741844234442Vector%20%281%29.png\"\r\n alt=\"search-bar-icon\">\r\n <input type=\"text\" placeholder=\"Search for Sections\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchSections()\">\r\n </div>\r\n </div>\r\n <div class=\"tab-container d-flex justify-content-around align-items-center\">\r\n <ng-container *ngFor=\"let ele of tabs\">\r\n <div class=\"tabs\" (click)=\"selectedTab = ele.value\" [class.active-tab]=\"ele.value == selectedTab\">\r\n {{ele.viewValue}}\r\n <ng-container *ngIf=\"ele.value == 'PRO' && ele.value != selectedTab\">\r\n <img class=\"w-30\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/468281c1744699664858Frame%201244831740%20%281%29.png\"\r\n alt=\"pro-icon\">\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <ng-container *ngIf=\"selectedTab === 'BASIC'; else proTabContent\">\r\n <ng-container *ngIf=\"!isSearch;else emptyScreen\">\r\n <div class=\"categories-container d-flex\">\r\n <div class=\"categories-sidepanel\" *ngIf=\"!loader\">\r\n <ng-container *ngFor=\"let ele of getObjectKeys(sections)\">\r\n <div class=\"side-section d-flex justify-content-center align-items-center flex-column\"\r\n (click)=\"selectSection(ele)\"\r\n [class.active-section]=\"selectedSection == sections[ele]\">\r\n <div class=\"image-container\">\r\n <ng-container *ngIf=\"selectedSection == sections[ele]\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/954383c1741850392802Group%201707481879.png\"\r\n alt=\"icon text\">\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedSection != sections[ele]\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/846145c1741850574864Icon%20%281%29.png\"\r\n alt=\"icon text\">\r\n </ng-container>\r\n </div>\r\n <div class=\"section-text\">\r\n {{ele}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"categories-render-section\" *ngIf=\" !loader && !tabShiftLoader\">\r\n <div class=\"categories-head\">\r\n {{selectedSectionName}}\r\n </div>\r\n <div class=\"sub-text\">\r\n Select a section to add to your page\r\n </div>\r\n <div class=\"sections-container\">\r\n <ng-container *ngFor=\"let ele of selectedSection\">\r\n <div class=\"section\">\r\n <div class=\"section-header\">{{ele.sectionName}}</div>\r\n <div class=\"section-img-container cp\"\r\n (click)=\"addNewSection(ele.componentId,ele.sectionType,$event)\">\r\n <ng-container *ngIf=\"ele?.image; else noImage\">\r\n <img [src]=\"ele?.image\" alt=\"section image\">\r\n </ng-container>\r\n <ng-template #noImage>\r\n <img src=\"https://img.freepik.com/premium-vector/default-image-icon-vector-missing-picture-page-website-design-mobile-app-no-photo-available_87543-11093.jpg\"\r\n alt=\"section image\" class=\"h-30\">\r\n </ng-template>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"categories-sidepanel\" *ngIf=\"loader\">\r\n <ng-container *ngFor=\"let ele of [1,1,1,1,1,1,1,1,1]\">\r\n <div class=\"d-flex justify-content-center align-items-center flex-column\">\r\n <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n height: '8vh',\r\n width: '65%',\r\n 'border-radius': '13px',\r\n 'margin-bottom' : '10px',\r\n }\" class=\"d-flex justify-content-center w-100\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"categories-render-section\" *ngIf=\"loader || tabShiftLoader\">\r\n <div class=\"categories-head\">\r\n <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n width: '20%',\r\n height : '3vh',\r\n 'border-radius': '5px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n <div class=\"sub-text\">\r\n <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n width: '60%',\r\n height : '2vh',\r\n 'border-radius': '5px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n <div class=\"sections-container\">\r\n <ng-container *ngFor=\"let ele of [1,1,1,1]\">\r\n <div class=\"section\">\r\n <div> <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n width: '25%',\r\n height : '2vh',\r\n 'border-radius': '5px',\r\n }\">\r\n </ngx-skeleton-loader></div>\r\n <div>\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '100%',\r\n height : '25vh',\r\n 'border-radius': '5px',\r\n 'margin':'2px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #proTabContent>\r\n <div class=\"empty-div d-flex align-items-center justify-content-center flex-column\">\r\n <div class=\"image-container-1\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/377076c1743154807683image%20%286%29.png\" alt=\"empty-img\" class=\"empty-img \">\r\n </div>\r\n <div class=\"oops-text\">\r\n Coming Soon\r\n </div>\r\n <div class=\"oops-sub-text\">\r\n <div class=\"oops-sub-text-1 text-center\">Woof! Something pawsome is coming!</div>\r\n <div class=\"oops-sub-text-2 text-center\">\r\n Hey hooman! I just sniffed out something super exciting... and it\u2019s almost here! \r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template #emptyScreen>\r\n <div class=\"empty-div d-flex align-items-center justify-content-center flex-column\">\r\n <div class=\"image-container-1\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/377076c1743154807683image%20%286%29.png\" alt=\"empty-img\" class=\"empty-img \">\r\n </div>\r\n <div class=\"oops-text\">\r\n Oops! \r\n </div>\r\n <div class=\"oops-sub-text\">\r\n <div class=\"oops-sub-text-1 text-center\">I sniffed everywhere, but I couldn't find what you're looking for</div>\r\n <div class=\"oops-sub-text-2 text-center\">\r\n Maybe try a different search? \r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}.header-container{padding:12px 15px;font-size:15px;line-height:24px;font-weight:600;color:#000;box-shadow:0 0 4px #00000040;margin-bottom:2px}.search-bar{box-shadow:0 0 4px #00000040;padding:8px;border-radius:8px}.search-bar img{width:19px;height:18px}.search-bar input{width:100%;outline:none;border:unset;font-size:13px;font-weight:400;background:#fafafa}.gap-10{gap:10px!important}.tab-container{padding:8px;margin:0 15px;gap:3%;background:#fff;border-radius:13px}.tabs{font-size:14px;font-weight:500;line-height:24px;color:#2c2c2c99;width:30%;cursor:pointer;padding:8px 0;text-align:center}.active-tab{color:#fff!important;background:var(--primary-bg-color);box-shadow:0 0 4px #00000040;border-radius:8px;transition:opacity .3s ease-in-out,transform .3s ease-in-out;opacity:1;transform:translateY(0)}.categories-sidepanel{width:15%;padding:10px 5px;margin:15px 0;border-radius:10px;height:calc(70vh + -0px);overflow-y:scroll;background:#fff}.side-section{padding:6px 10px;border-radius:8px;margin-bottom:10px;cursor:pointer}.side-section img{width:16px}.side-section .image-container{background:#f9fafb;padding:5px 8px;border-radius:5px}.side-section .section-text{font-size:12px;font-weight:500;line-height:24px;text-align:center;color:#a1a1a1}.active-section{background:var(--primary-bg-color)!important;box-shadow:0 0 4px #00000040}.active-section .section-text{color:#fff!important}.active-section .image-container{background:unset!important;padding:unset!important;border-radius:unset!important}.categories-render-section{width:85%;padding:15px;margin:15px 10px;border-radius:10px;height:calc(70vh + -0px);overflow-y:scroll;background:#fff}.categories-head{font-size:20px;font-weight:600;line-height:24px;color:#434343}.sub-text{font-size:13px;font-weight:500;line-height:24px;color:#a1a1a1;margin-bottom:10px}.section{margin-bottom:10px}.section-header{font-size:14px;font-weight:500;line-height:24px;color:#a1a1a1;margin-bottom:10px}.section-img-container{padding:18px;border-radius:8px;background:#f9fafb}.section-img-container img{width:100%}.search-bar-container{padding:15px}.parent-container{background:#fafafa}.f-18{font-size:18px;cursor:pointer}.w-30{width:30px!important}.h-30{height:30vh}.cp{cursor:pointer}.empty-div{height:calc(70vh + -0px);background:#fff;margin:18px;border-radius:13px}.empty-img{height:30vh}.oops-text{font-weight:900;font-size:42px;background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent}.oops-sub-text-1{font-size:17px;font-weight:600;color:#101010e5}.oops-sub-text-2{font-size:14px;font-weight:600;color:#101010e5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { 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"] }] }); }
3200
3200
  }
3201
3201
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddSectionComponent, decorators: [{
3202
3202
  type: Component,
3203
3203
  args: [{ selector: 'simpo-add-section', standalone: true, imports: [CommonModule, MatIconModule, NgxSkeletonLoaderModule, FormsModule], template: "<section class=\"main-container\">\r\n <div class=\"header-container d-flex align-items-center justify-content-between\">\r\n <div>Select Template</div>\r\n <mat-icon class=\"d-flex align-items-center justify-content-center f-18 cp\" (click)=\"dialog.close()\">\r\n close\r\n </mat-icon>\r\n </div>\r\n <div class=\"parent-container\">\r\n <div class=\"search-bar-container\">\r\n <div class=\"search-bar d-flex gap-10\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/314661c1741844234442Vector%20%281%29.png\"\r\n alt=\"search-bar-icon\">\r\n <input type=\"text\" placeholder=\"Search for Sections\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchSections()\">\r\n </div>\r\n </div>\r\n <div class=\"tab-container d-flex justify-content-around align-items-center\">\r\n <ng-container *ngFor=\"let ele of tabs\">\r\n <div class=\"tabs\" (click)=\"selectedTab = ele.value\" [class.active-tab]=\"ele.value == selectedTab\">\r\n {{ele.viewValue}}\r\n <ng-container *ngIf=\"ele.value == 'PRO' && ele.value != selectedTab\">\r\n <img class=\"w-30\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/468281c1744699664858Frame%201244831740%20%281%29.png\"\r\n alt=\"pro-icon\">\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <ng-container *ngIf=\"selectedTab === 'BASIC'; else proTabContent\">\r\n <ng-container *ngIf=\"!isSearch;else emptyScreen\">\r\n <div class=\"categories-container d-flex\">\r\n <div class=\"categories-sidepanel\" *ngIf=\"!loader\">\r\n <ng-container *ngFor=\"let ele of getObjectKeys(sections)\">\r\n <div class=\"side-section d-flex justify-content-center align-items-center flex-column\"\r\n (click)=\"selectSection(ele)\"\r\n [class.active-section]=\"selectedSection == sections[ele]\">\r\n <div class=\"image-container\">\r\n <ng-container *ngIf=\"selectedSection == sections[ele]\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/954383c1741850392802Group%201707481879.png\"\r\n alt=\"icon text\">\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedSection != sections[ele]\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/846145c1741850574864Icon%20%281%29.png\"\r\n alt=\"icon text\">\r\n </ng-container>\r\n </div>\r\n <div class=\"section-text\">\r\n {{ele}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"categories-render-section\" *ngIf=\" !loader && !tabShiftLoader\">\r\n <div class=\"categories-head\">\r\n {{selectedSectionName}}\r\n </div>\r\n <div class=\"sub-text\">\r\n Select a section to add to your page\r\n </div>\r\n <div class=\"sections-container\">\r\n <ng-container *ngFor=\"let ele of selectedSection\">\r\n <div class=\"section\">\r\n <div class=\"section-header\">{{ele.sectionName}}</div>\r\n <div class=\"section-img-container cp\"\r\n (click)=\"addNewSection(ele.componentId,ele.sectionType,$event)\">\r\n <ng-container *ngIf=\"ele?.image; else noImage\">\r\n <img [src]=\"ele?.image\" alt=\"section image\">\r\n </ng-container>\r\n <ng-template #noImage>\r\n <img src=\"https://img.freepik.com/premium-vector/default-image-icon-vector-missing-picture-page-website-design-mobile-app-no-photo-available_87543-11093.jpg\"\r\n alt=\"section image\" class=\"h-30\">\r\n </ng-template>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"categories-sidepanel\" *ngIf=\"loader\">\r\n <ng-container *ngFor=\"let ele of [1,1,1,1,1,1,1,1,1]\">\r\n <div class=\"d-flex justify-content-center align-items-center flex-column\">\r\n <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n height: '8vh',\r\n width: '65%',\r\n 'border-radius': '13px',\r\n 'margin-bottom' : '10px',\r\n }\" class=\"d-flex justify-content-center w-100\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"categories-render-section\" *ngIf=\"loader || tabShiftLoader\">\r\n <div class=\"categories-head\">\r\n <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n width: '20%',\r\n height : '3vh',\r\n 'border-radius': '5px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n <div class=\"sub-text\">\r\n <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n width: '60%',\r\n height : '2vh',\r\n 'border-radius': '5px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n <div class=\"sections-container\">\r\n <ng-container *ngFor=\"let ele of [1,1,1,1]\">\r\n <div class=\"section\">\r\n <div> <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n width: '25%',\r\n height : '2vh',\r\n 'border-radius': '5px',\r\n }\">\r\n </ngx-skeleton-loader></div>\r\n <div>\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '100%',\r\n height : '25vh',\r\n 'border-radius': '5px',\r\n 'margin':'2px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #proTabContent>\r\n <div class=\"empty-div d-flex align-items-center justify-content-center flex-column\">\r\n <div class=\"image-container-1\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/377076c1743154807683image%20%286%29.png\" alt=\"empty-img\" class=\"empty-img \">\r\n </div>\r\n <div class=\"oops-text\">\r\n Coming Soon\r\n </div>\r\n <div class=\"oops-sub-text\">\r\n <div class=\"oops-sub-text-1 text-center\">Woof! Something pawsome is coming!</div>\r\n <div class=\"oops-sub-text-2 text-center\">\r\n Hey hooman! I just sniffed out something super exciting... and it\u2019s almost here! \r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template #emptyScreen>\r\n <div class=\"empty-div d-flex align-items-center justify-content-center flex-column\">\r\n <div class=\"image-container-1\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/377076c1743154807683image%20%286%29.png\" alt=\"empty-img\" class=\"empty-img \">\r\n </div>\r\n <div class=\"oops-text\">\r\n Oops! \r\n </div>\r\n <div class=\"oops-sub-text\">\r\n <div class=\"oops-sub-text-1 text-center\">I sniffed everywhere, but I couldn't find what you're looking for</div>\r\n <div class=\"oops-sub-text-2 text-center\">\r\n Maybe try a different search? \r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}.header-container{padding:12px 15px;font-size:15px;line-height:24px;font-weight:600;color:#000;box-shadow:0 0 4px #00000040;margin-bottom:2px}.search-bar{box-shadow:0 0 4px #00000040;padding:8px;border-radius:8px}.search-bar img{width:19px;height:18px}.search-bar input{width:100%;outline:none;border:unset;font-size:13px;font-weight:400;background:#fafafa}.gap-10{gap:10px!important}.tab-container{padding:8px;margin:0 15px;gap:3%;background:#fff;border-radius:13px}.tabs{font-size:14px;font-weight:500;line-height:24px;color:#2c2c2c99;width:30%;cursor:pointer;padding:8px 0;text-align:center}.active-tab{color:#fff!important;background:var(--primary-bg-color);box-shadow:0 0 4px #00000040;border-radius:8px;transition:opacity .3s ease-in-out,transform .3s ease-in-out;opacity:1;transform:translateY(0)}.categories-sidepanel{width:15%;padding:10px 5px;margin:15px 0;border-radius:10px;height:calc(70vh + -0px);overflow-y:scroll;background:#fff}.side-section{padding:6px 10px;border-radius:8px;margin-bottom:10px;cursor:pointer}.side-section img{width:16px}.side-section .image-container{background:#f9fafb;padding:5px 8px;border-radius:5px}.side-section .section-text{font-size:12px;font-weight:500;line-height:24px;text-align:center;color:#a1a1a1}.active-section{background:var(--primary-bg-color)!important;box-shadow:0 0 4px #00000040}.active-section .section-text{color:#fff!important}.active-section .image-container{background:unset!important;padding:unset!important;border-radius:unset!important}.categories-render-section{width:85%;padding:15px;margin:15px 10px;border-radius:10px;height:calc(70vh + -0px);overflow-y:scroll;background:#fff}.categories-head{font-size:20px;font-weight:600;line-height:24px;color:#434343}.sub-text{font-size:13px;font-weight:500;line-height:24px;color:#a1a1a1;margin-bottom:10px}.section{margin-bottom:10px}.section-header{font-size:14px;font-weight:500;line-height:24px;color:#a1a1a1;margin-bottom:10px}.section-img-container{padding:18px;border-radius:8px;background:#f9fafb}.section-img-container img{width:100%}.search-bar-container{padding:15px}.parent-container{background:#fafafa}.f-18{font-size:18px;cursor:pointer}.w-30{width:30px!important}.h-30{height:30vh}.cp{cursor:pointer}.empty-div{height:calc(70vh + -0px);background:#fff;margin:18px;border-radius:13px}.empty-img{height:30vh}.oops-text{font-weight:900;font-size:42px;background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent}.oops-sub-text-1{font-size:17px;font-weight:600;color:#101010e5}.oops-sub-text-2{font-size:14px;font-weight:600;color:#101010e5}\n"] }]
3204
- }], ctorParameters: () => [{ type: i3.MatDialogRef }, { type: undefined, decorators: [{
3204
+ }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
3205
3205
  type: Inject,
3206
3206
  args: [MAT_DIALOG_DATA]
3207
3207
  }] }, { type: i1.HttpClient }, { type: EventsService }, { type: ElementServiceService }, { type: ElementServiceService }] });
@@ -3265,13 +3265,13 @@ class HoverElementsComponent {
3265
3265
  this._eventService.duplicate.emit({ index: this.index, data: this.data });
3266
3266
  event.stopPropagation();
3267
3267
  }
3268
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HoverElementsComponent, deps: [{ token: EventsService }, { token: i3.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
3269
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HoverElementsComponent, isStandalone: true, selector: "simpo-hover-elements", inputs: { data: "data", index: "index", editOptions: "editOptions", isMerged: "isMerged", isEcommerce: "isEcommerce" }, outputs: { edit: "edit" }, ngImport: i0, template: "<mat-dialog-content class=\"mat-typography\" *ngIf=\"editOptions\">\r\n <div class=\"top-btn\" [ngClass]=\"{'adjust-top-btn': isMerged && index == 1}\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList' && !isEcommerce\">\r\n <button class=\"add_btn_top\" (click)=\"addSection('ABOVE', $event)\">Add Section +</button>\r\n </div>\r\n <section class=\"hover-tab\" [ngClass]=\"{'adjustPosition': isMerged && index == 1}\">\r\n <div class=\"tabs-section\" [ngStyle]=\"{'z-index' : data.sectionType === 'header' ? '10000' : '100'}\">\r\n <div class=\"edit-tab\">\r\n <button (click)=\"editSection()\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <defs>\r\n <linearGradient id=\"gradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\r\n <stop offset=\"0%\" style=\"stop-color:#230860;stop-opacity:1\" />\r\n <stop offset=\"100%\" style=\"stop-color:#00b6ff;stop-opacity:1\" />\r\n </linearGradient>\r\n </defs>\r\n <g clip-path=\"url(#clip0_1076_52409)\">\r\n <path 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\" fill=\"url(#gradient)\" />\r\n </g>\r\n </svg>\r\n <span class=\"edit-text\">Edit</span>\r\n </button>\r\n </div>\r\n \r\n <div class=\"vr-line\"></div>\r\n \r\n <div class=\"regenerate\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'blogList'\">\r\n <button (click)=\"restyleSection($event)\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M4.01108 19.9525C4.27565 20.0656 4.58327 19.9712 4.7378 19.7271L11.7691 8.55522C11.8829 8.3744 11.8898 8.14608 11.7868 7.95956C11.6838 7.77245 11.4869 7.65628 11.2735 7.65628H6.58085L8.32608 0.730146C8.39647 0.450341 8.25397 0.161357 7.98905 0.0474897C7.72585 -0.0657916 7.41628 0.0291694 7.26233 0.272919L0.231082 11.4448C0.117215 11.6256 0.11034 11.8539 0.213348 12.0405C0.316355 12.2276 0.513191 12.3437 0.726629 12.3437H5.41928L3.67405 19.2699C3.60366 19.5497 3.74612 19.8387 4.01108 19.9525Z\" fill=\"url(#gradient)\" />\r\n </svg>\r\n <span class=\"edit-text\">Restyle</span>\r\n </button>\r\n </div>\r\n \r\n <div class=\"vr-line\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList'\"></div>\r\n \r\n <div class=\"regenerate\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList'\">\r\n <button (click)=\"changeContent($event)\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M11 12h7m-7-8h7m-7 4h7M2 16h16\" stroke=\"url(#gradient)\" stroke-linecap=\"round\" stroke-width=\"1.5\" />\r\n <path d=\"m2 12 .85714-2.28571M8 12l-.85714-2.28571m0 0L5 4 2.85714 9.71429m4.28572 0H2.85714\" stroke=\"url(#gradient)\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" />\r\n </svg>\r\n <span class=\"edit-text\">Change Content</span>\r\n </button>\r\n </div>\r\n \r\n <div class=\"vr-line\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'blogList'\"></div>\r\n <div class=\"remainin-sections\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList'\">\r\n <button class=\"copy\" (click)=\"duplicateSection($event)\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Dulplicate Section\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"url(#gradient)\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n <path\r\n d=\"M9 2c-1.10457 0-2 .89543-2 2v8c0 1.1046.89543 2 2 2h6c1.1046 0 2-.8954 2-2V6.41421c0-.53043-.2107-1.03914-.5858-1.41421L14 2.58579C13.6249 2.21071 13.1162 2 12.5858 2H9Z\">\r\n </path>\r\n <path d=\"M3 8c0-1.10457.89543-2 2-2v10h8c0 1.1046-.8954 2-2 2H5c-1.10457 0-2-.8954-2-2V8Z\"></path>\r\n </svg>\r\n </button>\r\n <button class=\"up-arrow\" (click)=\"moveUp($event)\" [disabled]=\"index == 1\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Move Up\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"url(#gradient)\" 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=\"M3.29289 9.70711c-.39052-.39053-.39052-1.02369 0-1.41422l6-6c.39053-.39052 1.02371-.39052 1.41421 0l6 6c.3905.39053.3905 1.02369 0 1.41422-.3905.39049-1.0237.39049-1.4142 0L11 5.41421V17c0 .5523-.4477 1-1 1-.55228 0-1-.4477-1-1V5.41421l-4.29289 4.2929c-.39053.39049-1.02369.39049-1.41422 0Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </button>\r\n <button class=\"up-arrow\" (click)=\"moveDown($event)\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Move Down\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"url(#gradient)\" 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=\"M16.7071 10.2929c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.02368.3905-1.41421 0l-6-6c-.39052-.3905-.39052-1.0237 0-1.4142.39053-.39053 1.02369-.39053 1.41422 0L9 14.5858V3c0-.55228.44772-1 1-1 .5523 0 1 .44772 1 1v11.5858l4.2929-4.2929c.3905-.39053 1.0237-.39053 1.4142 0Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </button>\r\n <button class=\"up-arrow\" (click)=\"deleteSection($event)\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Delete Section\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"url(#gradient)\" 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 \r\n \r\n \r\n <div class=\"bottom-btn\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList' && !isEcommerce\">\r\n <button class=\"add_btn\" (click)=\"addSection('BELOW', $event)\">Add Section +</button>\r\n </div>\r\n</mat-dialog-content>\r\n", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}.hover-tab{display:flex;justify-content:flex-end;align-items:center;position:absolute;right:30px;top:40px;height:auto}.adjustPosition{top:200px}.bottom-btn{position:absolute;top:100%;z-index:101;border:3px solid var(--primary-bg-color);width:100%}.bottom-btn .add_btn{width:140px!important;height:36px;background:var(--primary-bg-color);border-radius:4px;transform:translate(-50%,-50%);color:#fff;cursor:pointer;border:none;outline:none;position:absolute;top:100%;left:50%;box-shadow:#00000059 0 5px 15px}.adjust-top-btn{top:170px!important}.top-btn{position:absolute;top:0%;z-index:101;width:100%;border:3px solid var(--primary-bg-color)}.top-btn .add_btn_top{top:0!important;width:140px!important;height:36px;background:var(--primary-bg-color);border-radius:4px;position:absolute;left:50%;transform:translate(-50%,-50%);color:#fff;cursor:pointer;border:none;outline:none;z-index:1001;box-shadow:#00000059 0 5px 15px}.tabs-section{width:auto;padding:15px 10px;box-shadow:#63636333 0 2px 8px;border-radius:6px;display:flex;align-items:center;height:60px;background-color:#fff;z-index:1000}.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;background:var(--primary-bg-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:500;position:relative;left:4px}.vr-line{border-left:1px solid #e8e8e8;height:25px;margin-left:14px}.regenerate{margin-left:10px;display:flex;justify-content:center;align-items:center}.regenerate button{border:none;outline:none;cursor:pointer;background-color:transparent;padding:0;display:flex;justify-content:center;align-items:center}.remainin-sections{margin-left:10px;display:flex;justify-content:center;align-items:center}.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:linear-gradient(94.22deg,#283E90 -4.45%,#F000E8 111.88%)}.up-arrow{margin-left:10px}svg{fill:linear-gradient(94.22deg,#283E90 -4.45%,#F000E8 111.88%)!important}@media only screen and (max-width: 475px){.tabs-section{position:relative;left:27px;height:53px}}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
3268
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HoverElementsComponent, deps: [{ token: EventsService }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
3269
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HoverElementsComponent, isStandalone: true, selector: "simpo-hover-elements", inputs: { data: "data", index: "index", editOptions: "editOptions", isMerged: "isMerged", isEcommerce: "isEcommerce" }, outputs: { edit: "edit" }, ngImport: i0, template: "<mat-dialog-content class=\"mat-typography\" *ngIf=\"editOptions\">\r\n <div class=\"top-btn\" [ngClass]=\"{'adjust-top-btn': isMerged && index == 1}\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList' && !isEcommerce\">\r\n <button class=\"add_btn_top\" (click)=\"addSection('ABOVE', $event)\">Add Section +</button>\r\n </div>\r\n <section class=\"hover-tab\" [ngClass]=\"{'adjustPosition': isMerged && index == 1}\">\r\n <div class=\"tabs-section\" [ngStyle]=\"{'z-index' : data.sectionType === 'header' ? '10000' : '100'}\">\r\n <div class=\"edit-tab\">\r\n <button (click)=\"editSection()\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <defs>\r\n <linearGradient id=\"gradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\r\n <stop offset=\"0%\" style=\"stop-color:#230860;stop-opacity:1\" />\r\n <stop offset=\"100%\" style=\"stop-color:#00b6ff;stop-opacity:1\" />\r\n </linearGradient>\r\n </defs>\r\n <g clip-path=\"url(#clip0_1076_52409)\">\r\n <path 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\" fill=\"url(#gradient)\" />\r\n </g>\r\n </svg>\r\n <span class=\"edit-text\">Edit</span>\r\n </button>\r\n </div>\r\n \r\n <div class=\"vr-line\"></div>\r\n \r\n <div class=\"regenerate\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'blogList'\">\r\n <button (click)=\"restyleSection($event)\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M4.01108 19.9525C4.27565 20.0656 4.58327 19.9712 4.7378 19.7271L11.7691 8.55522C11.8829 8.3744 11.8898 8.14608 11.7868 7.95956C11.6838 7.77245 11.4869 7.65628 11.2735 7.65628H6.58085L8.32608 0.730146C8.39647 0.450341 8.25397 0.161357 7.98905 0.0474897C7.72585 -0.0657916 7.41628 0.0291694 7.26233 0.272919L0.231082 11.4448C0.117215 11.6256 0.11034 11.8539 0.213348 12.0405C0.316355 12.2276 0.513191 12.3437 0.726629 12.3437H5.41928L3.67405 19.2699C3.60366 19.5497 3.74612 19.8387 4.01108 19.9525Z\" fill=\"url(#gradient)\" />\r\n </svg>\r\n <span class=\"edit-text\">Restyle</span>\r\n </button>\r\n </div>\r\n \r\n <div class=\"vr-line\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList'\"></div>\r\n \r\n <div class=\"regenerate\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList'\">\r\n <button (click)=\"changeContent($event)\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M11 12h7m-7-8h7m-7 4h7M2 16h16\" stroke=\"url(#gradient)\" stroke-linecap=\"round\" stroke-width=\"1.5\" />\r\n <path d=\"m2 12 .85714-2.28571M8 12l-.85714-2.28571m0 0L5 4 2.85714 9.71429m4.28572 0H2.85714\" stroke=\"url(#gradient)\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" />\r\n </svg>\r\n <span class=\"edit-text\">Change Content</span>\r\n </button>\r\n </div>\r\n \r\n <div class=\"vr-line\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'blogList'\"></div>\r\n <div class=\"remainin-sections\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList'\">\r\n <button class=\"copy\" (click)=\"duplicateSection($event)\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Dulplicate Section\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"url(#gradient)\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n <path\r\n d=\"M9 2c-1.10457 0-2 .89543-2 2v8c0 1.1046.89543 2 2 2h6c1.1046 0 2-.8954 2-2V6.41421c0-.53043-.2107-1.03914-.5858-1.41421L14 2.58579C13.6249 2.21071 13.1162 2 12.5858 2H9Z\">\r\n </path>\r\n <path d=\"M3 8c0-1.10457.89543-2 2-2v10h8c0 1.1046-.8954 2-2 2H5c-1.10457 0-2-.8954-2-2V8Z\"></path>\r\n </svg>\r\n </button>\r\n <button class=\"up-arrow\" (click)=\"moveUp($event)\" [disabled]=\"index == 1\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Move Up\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"url(#gradient)\" 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=\"M3.29289 9.70711c-.39052-.39053-.39052-1.02369 0-1.41422l6-6c.39053-.39052 1.02371-.39052 1.41421 0l6 6c.3905.39053.3905 1.02369 0 1.41422-.3905.39049-1.0237.39049-1.4142 0L11 5.41421V17c0 .5523-.4477 1-1 1-.55228 0-1-.4477-1-1V5.41421l-4.29289 4.2929c-.39053.39049-1.02369.39049-1.41422 0Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </button>\r\n <button class=\"up-arrow\" (click)=\"moveDown($event)\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Move Down\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"url(#gradient)\" 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=\"M16.7071 10.2929c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.02368.3905-1.41421 0l-6-6c-.39052-.3905-.39052-1.0237 0-1.4142.39053-.39053 1.02369-.39053 1.41422 0L9 14.5858V3c0-.55228.44772-1 1-1 .5523 0 1 .44772 1 1v11.5858l4.2929-4.2929c.3905-.39053 1.0237-.39053 1.4142 0Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </button>\r\n <button class=\"up-arrow\" (click)=\"deleteSection($event)\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Delete Section\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"url(#gradient)\" 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 \r\n \r\n \r\n <div class=\"bottom-btn\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList' && !isEcommerce\">\r\n <button class=\"add_btn\" (click)=\"addSection('BELOW', $event)\">Add Section +</button>\r\n </div>\r\n</mat-dialog-content>\r\n", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}.hover-tab{display:flex;justify-content:flex-end;align-items:center;position:absolute;right:30px;top:40px;height:auto}.adjustPosition{top:200px}.bottom-btn{position:absolute;top:100%;z-index:101;border:3px solid var(--primary-bg-color);width:100%}.bottom-btn .add_btn{width:140px!important;height:36px;background:var(--primary-bg-color);border-radius:4px;transform:translate(-50%,-50%);color:#fff;cursor:pointer;border:none;outline:none;position:absolute;top:100%;left:50%;box-shadow:#00000059 0 5px 15px}.adjust-top-btn{top:170px!important}.top-btn{position:absolute;top:0%;z-index:101;width:100%;border:3px solid var(--primary-bg-color)}.top-btn .add_btn_top{top:0!important;width:140px!important;height:36px;background:var(--primary-bg-color);border-radius:4px;position:absolute;left:50%;transform:translate(-50%,-50%);color:#fff;cursor:pointer;border:none;outline:none;z-index:1001;box-shadow:#00000059 0 5px 15px}.tabs-section{width:auto;padding:15px 10px;box-shadow:#63636333 0 2px 8px;border-radius:6px;display:flex;align-items:center;height:60px;background-color:#fff;z-index:1000}.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;background:var(--primary-bg-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:500;position:relative;left:4px}.vr-line{border-left:1px solid #e8e8e8;height:25px;margin-left:14px}.regenerate{margin-left:10px;display:flex;justify-content:center;align-items:center}.regenerate button{border:none;outline:none;cursor:pointer;background-color:transparent;padding:0;display:flex;justify-content:center;align-items:center}.remainin-sections{margin-left:10px;display:flex;justify-content:center;align-items:center}.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:linear-gradient(94.22deg,#283E90 -4.45%,#F000E8 111.88%)}.up-arrow{margin-left:10px}svg{fill:linear-gradient(94.22deg,#283E90 -4.45%,#F000E8 111.88%)!important}@media only screen and (max-width: 475px){.tabs-section{position:relative;left:27px;height:53px}}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
3270
3270
  }
3271
3271
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HoverElementsComponent, decorators: [{
3272
3272
  type: Component,
3273
3273
  args: [{ selector: 'simpo-hover-elements', standalone: true, imports: [MatIconModule, MatDialogModule, CommonModule, AddSectionComponent], template: "<mat-dialog-content class=\"mat-typography\" *ngIf=\"editOptions\">\r\n <div class=\"top-btn\" [ngClass]=\"{'adjust-top-btn': isMerged && index == 1}\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList' && !isEcommerce\">\r\n <button class=\"add_btn_top\" (click)=\"addSection('ABOVE', $event)\">Add Section +</button>\r\n </div>\r\n <section class=\"hover-tab\" [ngClass]=\"{'adjustPosition': isMerged && index == 1}\">\r\n <div class=\"tabs-section\" [ngStyle]=\"{'z-index' : data.sectionType === 'header' ? '10000' : '100'}\">\r\n <div class=\"edit-tab\">\r\n <button (click)=\"editSection()\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 16 16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <defs>\r\n <linearGradient id=\"gradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\r\n <stop offset=\"0%\" style=\"stop-color:#230860;stop-opacity:1\" />\r\n <stop offset=\"100%\" style=\"stop-color:#00b6ff;stop-opacity:1\" />\r\n </linearGradient>\r\n </defs>\r\n <g clip-path=\"url(#clip0_1076_52409)\">\r\n <path 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\" fill=\"url(#gradient)\" />\r\n </g>\r\n </svg>\r\n <span class=\"edit-text\">Edit</span>\r\n </button>\r\n </div>\r\n \r\n <div class=\"vr-line\"></div>\r\n \r\n <div class=\"regenerate\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'blogList'\">\r\n <button (click)=\"restyleSection($event)\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M4.01108 19.9525C4.27565 20.0656 4.58327 19.9712 4.7378 19.7271L11.7691 8.55522C11.8829 8.3744 11.8898 8.14608 11.7868 7.95956C11.6838 7.77245 11.4869 7.65628 11.2735 7.65628H6.58085L8.32608 0.730146C8.39647 0.450341 8.25397 0.161357 7.98905 0.0474897C7.72585 -0.0657916 7.41628 0.0291694 7.26233 0.272919L0.231082 11.4448C0.117215 11.6256 0.11034 11.8539 0.213348 12.0405C0.316355 12.2276 0.513191 12.3437 0.726629 12.3437H5.41928L3.67405 19.2699C3.60366 19.5497 3.74612 19.8387 4.01108 19.9525Z\" fill=\"url(#gradient)\" />\r\n </svg>\r\n <span class=\"edit-text\">Restyle</span>\r\n </button>\r\n </div>\r\n \r\n <div class=\"vr-line\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList'\"></div>\r\n \r\n <div class=\"regenerate\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList'\">\r\n <button (click)=\"changeContent($event)\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M11 12h7m-7-8h7m-7 4h7M2 16h16\" stroke=\"url(#gradient)\" stroke-linecap=\"round\" stroke-width=\"1.5\" />\r\n <path d=\"m2 12 .85714-2.28571M8 12l-.85714-2.28571m0 0L5 4 2.85714 9.71429m4.28572 0H2.85714\" stroke=\"url(#gradient)\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" />\r\n </svg>\r\n <span class=\"edit-text\">Change Content</span>\r\n </button>\r\n </div>\r\n \r\n <div class=\"vr-line\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'blogList'\"></div>\r\n <div class=\"remainin-sections\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList'\">\r\n <button class=\"copy\" (click)=\"duplicateSection($event)\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Dulplicate Section\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"url(#gradient)\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n <path\r\n d=\"M9 2c-1.10457 0-2 .89543-2 2v8c0 1.1046.89543 2 2 2h6c1.1046 0 2-.8954 2-2V6.41421c0-.53043-.2107-1.03914-.5858-1.41421L14 2.58579C13.6249 2.21071 13.1162 2 12.5858 2H9Z\">\r\n </path>\r\n <path d=\"M3 8c0-1.10457.89543-2 2-2v10h8c0 1.1046-.8954 2-2 2H5c-1.10457 0-2-.8954-2-2V8Z\"></path>\r\n </svg>\r\n </button>\r\n <button class=\"up-arrow\" (click)=\"moveUp($event)\" [disabled]=\"index == 1\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Move Up\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"url(#gradient)\" 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=\"M3.29289 9.70711c-.39052-.39053-.39052-1.02369 0-1.41422l6-6c.39053-.39052 1.02371-.39052 1.41421 0l6 6c.3905.39053.3905 1.02369 0 1.41422-.3905.39049-1.0237.39049-1.4142 0L11 5.41421V17c0 .5523-.4477 1-1 1-.55228 0-1-.4477-1-1V5.41421l-4.29289 4.2929c-.39053.39049-1.02369.39049-1.41422 0Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </button>\r\n <button class=\"up-arrow\" (click)=\"moveDown($event)\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Move Down\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"url(#gradient)\" 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=\"M16.7071 10.2929c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.02368.3905-1.41421 0l-6-6c-.39052-.3905-.39052-1.0237 0-1.4142.39053-.39053 1.02369-.39053 1.41422 0L9 14.5858V3c0-.55228.44772-1 1-1 .5523 0 1 .44772 1 1v11.5858l4.2929-4.2929c.3905-.39053 1.0237-.39053 1.4142 0Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </button>\r\n <button class=\"up-arrow\" (click)=\"deleteSection($event)\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Delete Section\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"url(#gradient)\" 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 \r\n \r\n \r\n <div class=\"bottom-btn\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList' && !isEcommerce\">\r\n <button class=\"add_btn\" (click)=\"addSection('BELOW', $event)\">Add Section +</button>\r\n </div>\r\n</mat-dialog-content>\r\n", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}.hover-tab{display:flex;justify-content:flex-end;align-items:center;position:absolute;right:30px;top:40px;height:auto}.adjustPosition{top:200px}.bottom-btn{position:absolute;top:100%;z-index:101;border:3px solid var(--primary-bg-color);width:100%}.bottom-btn .add_btn{width:140px!important;height:36px;background:var(--primary-bg-color);border-radius:4px;transform:translate(-50%,-50%);color:#fff;cursor:pointer;border:none;outline:none;position:absolute;top:100%;left:50%;box-shadow:#00000059 0 5px 15px}.adjust-top-btn{top:170px!important}.top-btn{position:absolute;top:0%;z-index:101;width:100%;border:3px solid var(--primary-bg-color)}.top-btn .add_btn_top{top:0!important;width:140px!important;height:36px;background:var(--primary-bg-color);border-radius:4px;position:absolute;left:50%;transform:translate(-50%,-50%);color:#fff;cursor:pointer;border:none;outline:none;z-index:1001;box-shadow:#00000059 0 5px 15px}.tabs-section{width:auto;padding:15px 10px;box-shadow:#63636333 0 2px 8px;border-radius:6px;display:flex;align-items:center;height:60px;background-color:#fff;z-index:1000}.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;background:var(--primary-bg-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:500;position:relative;left:4px}.vr-line{border-left:1px solid #e8e8e8;height:25px;margin-left:14px}.regenerate{margin-left:10px;display:flex;justify-content:center;align-items:center}.regenerate button{border:none;outline:none;cursor:pointer;background-color:transparent;padding:0;display:flex;justify-content:center;align-items:center}.remainin-sections{margin-left:10px;display:flex;justify-content:center;align-items:center}.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:linear-gradient(94.22deg,#283E90 -4.45%,#F000E8 111.88%)}.up-arrow{margin-left:10px}svg{fill:linear-gradient(94.22deg,#283E90 -4.45%,#F000E8 111.88%)!important}@media only screen and (max-width: 475px){.tabs-section{position:relative;left:27px;height:53px}}\n"] }]
3274
- }], ctorParameters: () => [{ type: EventsService }, { type: i3.MatDialog }], propDecorators: { edit: [{
3274
+ }], ctorParameters: () => [{ type: EventsService }, { type: i1$1.MatDialog }], propDecorators: { edit: [{
3275
3275
  type: Output
3276
3276
  }], data: [{
3277
3277
  type: Input
@@ -3297,7 +3297,7 @@ class DeleteHoverElementComponent {
3297
3297
  this._eventService.delete.emit({ index: this.data });
3298
3298
  }
3299
3299
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DeleteHoverElementComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
3300
- 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: i3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
3300
+ 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$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
3301
3301
  }
3302
3302
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DeleteHoverElementComponent, decorators: [{
3303
3303
  type: Component,
@@ -3412,13 +3412,13 @@ class TrasportAvailabilityComponent {
3412
3412
  this.snackBar.open('Our support team will get back to you...!', 'Ok');
3413
3413
  this.close();
3414
3414
  }
3415
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TrasportAvailabilityComponent, deps: [{ token: i3.MatDialogRef }, { token: MAT_DIALOG_DATA, optional: true }, { token: i2$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
3415
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TrasportAvailabilityComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA, optional: true }, { token: i2$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
3416
3416
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TrasportAvailabilityComponent, isStandalone: true, selector: "simpo-trasport-availability", ngImport: i0, template: "<section class=\"total_popup_sec h-100 w-100 d-flex justify-content-around flex-column\">\r\n <div class=\"top_layer\">\r\n <div class=\"layer_title text-center\">\r\n Transport Full for Selected Option\r\n </div>\r\n <div class=\"layer_description mt-2 text-center\">\r\n Would you like to request the school to check seat availability or arrange transport for this stop and\u00A0vehicle\u00A0type?\r\n </div>\r\n </div>\r\n <div class=\"footer_layer d-flex gap-2 align-items-center justify-content-end mt-2\">\r\n <button class=\"send_request\" (click)=\"sendRequest()\">Send Request</button>\r\n <button class=\"cancel\" (click)=\"close()\">Cancel</button>\r\n </div>\r\n</section>", styles: [".total_popup_sec{padding:15px}.send_request{font-size:14px;font-family:var(--primary-font-family);font-weight:500;background-color:var(--primary-button-color);border:none;outline:none;width:max-content;border-radius:8px;padding:8px 20px}.cancel{font-size:14px;font-family:var(--primary-font-family);font-weight:500;background-color:transparent;border:1px solid var(--primary-button-color);outline:none;width:max-content;border-radius:8px;padding:8px 20px}.layer_title{font-size:15px;font-family:var(--primary-font-family);color:#000;font-weight:100500}.layer_description{font-size:13px;font-family:var(--primary-font-family);color:#625f5f;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }] }); }
3417
3417
  }
3418
3418
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TrasportAvailabilityComponent, decorators: [{
3419
3419
  type: Component,
3420
3420
  args: [{ selector: 'simpo-trasport-availability', standalone: true, imports: [CommonModule, FormsModule], template: "<section class=\"total_popup_sec h-100 w-100 d-flex justify-content-around flex-column\">\r\n <div class=\"top_layer\">\r\n <div class=\"layer_title text-center\">\r\n Transport Full for Selected Option\r\n </div>\r\n <div class=\"layer_description mt-2 text-center\">\r\n Would you like to request the school to check seat availability or arrange transport for this stop and\u00A0vehicle\u00A0type?\r\n </div>\r\n </div>\r\n <div class=\"footer_layer d-flex gap-2 align-items-center justify-content-end mt-2\">\r\n <button class=\"send_request\" (click)=\"sendRequest()\">Send Request</button>\r\n <button class=\"cancel\" (click)=\"close()\">Cancel</button>\r\n </div>\r\n</section>", styles: [".total_popup_sec{padding:15px}.send_request{font-size:14px;font-family:var(--primary-font-family);font-weight:500;background-color:var(--primary-button-color);border:none;outline:none;width:max-content;border-radius:8px;padding:8px 20px}.cancel{font-size:14px;font-family:var(--primary-font-family);font-weight:500;background-color:transparent;border:1px solid var(--primary-button-color);outline:none;width:max-content;border-radius:8px;padding:8px 20px}.layer_title{font-size:15px;font-family:var(--primary-font-family);color:#000;font-weight:100500}.layer_description{font-size:13px;font-family:var(--primary-font-family);color:#625f5f;font-weight:500}\n"] }]
3421
- }], ctorParameters: () => [{ type: i3.MatDialogRef }, { type: undefined, decorators: [{
3421
+ }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
3422
3422
  type: Optional
3423
3423
  }, {
3424
3424
  type: Inject,
@@ -4780,7 +4780,7 @@ class TextSectionComponent extends BaseSection {
4780
4780
  this._eventService.editSection.emit({ data: this.data });
4781
4781
  }, 100);
4782
4782
  }
4783
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextSectionComponent, deps: [{ token: i3.MatDialog }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
4783
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextSectionComponent, deps: [{ token: i1$1.MatDialog }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
4784
4784
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextSectionComponent, isStandalone: true, selector: "simpo-text-section", inputs: { data: "data", index: "index", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"main-section\"\r\n [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\"\r\n [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"draggable\" *ngIf=\"content?.tag?.display && screenWidth > 475\" cdkDrag\r\n [cdkDragFreeDragPosition]=\"point\" (cdkDragEnded)=\"onDragEnded($event)\" cdkDragBoundary=\".total-container\"\r\n [cdkDragDisabled]=\"!edit\" [style.color]=\"styles?.background?.accentColor\"\r\n [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.background]=\"getGlassyBackground(styles?.background?.accentColor)\">\r\n {{ content?.tag?.label }}\r\n </div>\r\n <div class=\"body-section w-100\">\r\n <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <!-- <simpo-text-element [textData]=\"item.value\" [textLabel]=\"item.label\"></simpo-text-element> -->\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\"\r\n class=\"w-100 overflow-scroll\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-2 d-md-flex mt-15 w-100 flex-wrap\" *ngIf=\"data?.action?.display\" [ngClass]=\"[\r\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n ]\">\r\n <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [edit]=\"edit\" [color]=\"styles?.background?.accentColor\" [sectionId]=\"data?.id\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 15px}.button-section{margin-top:15px}.clipPath{clip-path:polygon(0% 100%,50% 0%,100% 100%);height:100px;background-color:#00f}.overflow-scroll{overflow-x:scroll}.draggable{background:#fff3;border-radius:32px!important;box-shadow:0 4px 30px #0000001a!important;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.3)!important;z-index:1;position:absolute;width:max-content;padding:8px 10px;font-weight:400;font-size:12px!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-15{margin-top:15px}@media only screen and (max-width: 475px){.d-flex{justify-content:center;margin-bottom:25px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type:
4785
4785
  //directive
4786
4786
  AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }] }); }
@@ -4805,7 +4805,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
4805
4805
  HoverDirective,
4806
4806
  OverlayDirective,
4807
4807
  ], template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"main-section\"\r\n [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\"\r\n [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"draggable\" *ngIf=\"content?.tag?.display && screenWidth > 475\" cdkDrag\r\n [cdkDragFreeDragPosition]=\"point\" (cdkDragEnded)=\"onDragEnded($event)\" cdkDragBoundary=\".total-container\"\r\n [cdkDragDisabled]=\"!edit\" [style.color]=\"styles?.background?.accentColor\"\r\n [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.background]=\"getGlassyBackground(styles?.background?.accentColor)\">\r\n {{ content?.tag?.label }}\r\n </div>\r\n <div class=\"body-section w-100\">\r\n <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <!-- <simpo-text-element [textData]=\"item.value\" [textLabel]=\"item.label\"></simpo-text-element> -->\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\"\r\n class=\"w-100 overflow-scroll\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-2 d-md-flex mt-15 w-100 flex-wrap\" *ngIf=\"data?.action?.display\" [ngClass]=\"[\r\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n ]\">\r\n <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [edit]=\"edit\" [color]=\"styles?.background?.accentColor\" [sectionId]=\"data?.id\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 15px}.button-section{margin-top:15px}.clipPath{clip-path:polygon(0% 100%,50% 0%,100% 100%);height:100px;background-color:#00f}.overflow-scroll{overflow-x:scroll}.draggable{background:#fff3;border-radius:32px!important;box-shadow:0 4px 30px #0000001a!important;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.3)!important;z-index:1;position:absolute;width:max-content;padding:8px 10px;font-weight:400;font-size:12px!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-15{margin-top:15px}@media only screen and (max-width: 475px){.d-flex{justify-content:center;margin-bottom:25px}}\n"] }]
4808
- }], ctorParameters: () => [{ type: i3.MatDialog }, { type: EventsService }], propDecorators: { data: [{
4808
+ }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: EventsService }], propDecorators: { data: [{
4809
4809
  type: Input
4810
4810
  }], index: [{
4811
4811
  type: Input
@@ -6525,7 +6525,7 @@ class VideoSectionComponent extends BaseSection {
6525
6525
  this._eventService.editSection.emit({ data: this.data });
6526
6526
  }, 100);
6527
6527
  }
6528
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: VideoSectionComponent, deps: [{ token: i1$1.DomSanitizer }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
6528
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: VideoSectionComponent, deps: [{ token: i1$2.DomSanitizer }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
6529
6529
  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>\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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 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"] }] }); }
6530
6530
  }
6531
6531
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: VideoSectionComponent, decorators: [{
@@ -6557,7 +6557,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
6557
6557
  TextBackgroundDirectiveDirective,
6558
6558
  SpacingHorizontalDirective
6559
6559
  ], 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>\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"] }]
6560
- }], ctorParameters: () => [{ type: i1$1.DomSanitizer }, { type: EventsService }], propDecorators: { data: [{
6560
+ }], ctorParameters: () => [{ type: i1$2.DomSanitizer }, { type: EventsService }], propDecorators: { data: [{
6561
6561
  type: Input
6562
6562
  }], index: [{
6563
6563
  type: Input
@@ -7869,7 +7869,7 @@ class AddressComponent extends BaseSection {
7869
7869
  }
7870
7870
  }
7871
7871
  }
7872
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddressComponent, deps: [{ token: i0.NgZone }, { token: RestService }, { token: i3.MatDialog }, { token: i8$3.MatBottomSheet }, { token: i2$2.Router }, { token: StorageServiceService }, { token: EventsService }, { token: i2$1.MatSnackBar }, { token: MAT_DIALOG_DATA, optional: true }, { token: i3.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
7872
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddressComponent, deps: [{ token: i0.NgZone }, { token: RestService }, { token: i1$1.MatDialog }, { token: i8$3.MatBottomSheet }, { token: i2$2.Router }, { token: StorageServiceService }, { token: EventsService }, { token: i2$1.MatSnackBar }, { token: MAT_DIALOG_DATA, optional: true }, { token: i1$1.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
7873
7873
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AddressComponent, isStandalone: true, selector: "simpo-address", inputs: { responseData: "responseData", data: "data", index: "index", customClass: "customClass", edit: "edit", delete: "delete", isCart: "isCart" }, outputs: { selectedAddress: "selectedAddress" }, providers: [
7874
7874
  MatSnackBar
7875
7875
  ], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- <section class=\"address-sec\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div class=\"header\">\r\n <div class=\"new-address-header\">\r\n <mat-icon (click)=\"goToProfile()\" *ngIf=\"!isCart\">keyboard_arrow_left</mat-icon>\r\n <h3>{{isCart ? 'Deliver To' : 'New Address'}}</h3>\r\n </div>\r\n <span class=\"add-address\" [style.color]=\"styles?.background?.accentColor\" *ngIf=\"!addNewAddress\" (click)=\"addNewAddress = true\">+ add address</span>\r\n </div>\r\n <ng-container *ngIf=\"addNewAddress\">\r\n <div class=\"forms d-flex flex-wrap floating-input\">\r\n\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Name</div>\r\n <input type=\"text\" placeholder=\"Enter name\" [(ngModel)]=\"address.receiverName\" (keydown)=\"validateName($event)\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Mobile</div>\r\n <input type=\"text\" placeholder=\"Enter mobile\" [(ngModel)]=\"address.receiverPhone\" (keydown)=\"validateMobile($event)\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Email</div>\r\n <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"address.receiverEmail\">\r\n </div>\r\n <div class=\"form-control-full-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Address</div>\r\n <input type=\"text\" placeholder=\"Enter address\" matGoogleMapsAutocomplete\r\n (onAutocompleteSelected)=\"onAutocompleteSelected($event)\"\r\n (onLocationSelected)=\"onLocationSelected($event)\" [(ngModel)]=\"address.addressLine1\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Locality</div>\r\n <input type=\"text\" placeholder=\"Enter locality\" [(ngModel)]=\"address.localityName\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\">Landmark</div>\r\n <input type=\"text\" placeholder=\"Enter landmark\" [(ngModel)]=\"address.landmark\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Pincode</div>\r\n <input type=\"text\" placeholder=\"Enter pincode\" [(ngModel)]=\"address.zipCode\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">City</div>\r\n <input type=\"text\" placeholder=\"Enter city\" [(ngModel)]=\"address.cityName\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">State</div>\r\n <input type=\"text\" placeholder=\"Enter state\" [(ngModel)]=\"address.stateName\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Address Type</div>\r\n <div class=\"d-flex\">\r\n <ng-container *ngFor=\"let address of addessType\">\r\n <span class=\"address-type\" (click)=\"checkAddressType(address)\" [style.backgroundColor]=\"address.status ? data?.styles?.background?.accentColor : 'rgba(211, 211, 211, 0.362)'\" [ngClass]=\"{'active-address': address.status}\">{{address.key}}</span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"address-list\" *ngIf=\"!addNewAddress\">\r\n <ng-container *ngFor=\"let address of addressList; let idx = index\">\r\n <div class=\"address\" (click)=\"addressSelected(idx)\" [style.borderColor]=\"selectedAddressIdx == idx ? data?.styles?.background?.accentColor : ''\">\r\n <div class=\"address-left\">\r\n <div class=\"top\">\r\n <span class=\"fw-bold mr-2\">{{address?.receiverName}}</span>\r\n <span class=\"address-type\">{{address?.addressType}}</span>\r\n </div>\r\n <div class=\"address-det\">{{address.addressLine1}}</div>\r\n <div class=\"phone\">\r\n <span>Phone:</span>\r\n <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n </div>\r\n </div>\r\n <div class=\"address-right\"></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"action-btn\" *ngIf=\"addNewAddress\">\r\n <div class=\"error-message\">\r\n <span *ngIf=\"address.receiverPhone?.length != 10 && address.receiverPhone?.length\">*Mobile number is invalid</span>\r\n <span *ngIf=\"!isEmailValid\">*Email is invalid</span>\r\n </div>\r\n <button [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [disabled]=\"\r\n !address.receiverName ||\r\n !address.receiverPhone ||\r\n address.receiverPhone?.length != 10 ||\r\n !isEmailValid ||\r\n !address.addressLine1 ||\r\n !address.localityName ||\r\n !address.zipCode ||\r\n !address.cityName ||\r\n !address.stateName ||\r\n !address.addressType || isLoading\r\n \" (click)=\"updateAddress()\">{{isLoading ? 'Loading' : 'Update'}}</button>\r\n </div>\r\n</section>\r\n\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<div class=\"form-container\">\r\n <div class=\"header\">\r\n <h1>{{editIndex === -1 ? 'Add' : 'Update'}} Address</h1>\r\n <button class=\"close-btn\" (click)=\"close()\">\u00D7</button>\r\n </div>\r\n\r\n <div class=\"form-content\">\r\n <div class=\"section\">\r\n <h2 class=\"section-title\">Contact Details</h2>\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label for=\"firstName\">Name</label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.receiverName\" (ngModelChange)=\"validateForm('NAME')\" [class.error-border]=\"!validateObject['NAME']\">\r\n </div>\r\n <div class=\"form-group\">\r\n <label for=\"lastName\">Mobile</label>\r\n <input type=\"number\" class=\"form-control\"\r\n [(ngModel)]=\"address.receiverPhone\" (ngModelChange)=\"validateForm('MOBILE')\" [class.error-border]=\"!validateObject['MOBILE']\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"mobile\">Email</label>\r\n <input type=\"email\" class=\"form-control\" [(ngModel)]=\"address.receiverEmail\" (ngModelChange)=\"validateForm('EMAIL')\" [class.error-border]=\"!validateObject['EMAIL']\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"section\">\r\n <h2 class=\"section-title\">Shipping Address</h2>\r\n <div class=\"form-group\">\r\n <label for=\"address\">Address</label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.addressLine1\" (ngModelChange)=\"validateForm('ADDRESS')\" [class.error-border]=\"!validateObject['ADDRESS']\">\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"landmark\">Locality</label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.localityName\">\r\n </div>\r\n\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label for=\"city\">Landmark</label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.landmark\">\r\n </div>\r\n <div class=\"form-group\">\r\n <label for=\"pincode\">Pincode</label>\r\n <input type=\"text\" id=\"pincode\" class=\"form-control\" [(ngModel)]=\"address.zipCode\" (ngModelChange)=\"validateForm('PINCODE')\" [class.error-border]=\"!validateObject['PINCODE']\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label for=\"state\">City</label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.cityName\" (ngModelChange)=\"validateForm('CITY')\" [class.error-border]=\"!validateObject['CITY']\">\r\n </div>\r\n <div class=\"form-group\">\r\n <label for=\"country\">State</label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.stateName\"(ngModelChange)=\"validateForm('STATE')\" [class.error-border]=\"!validateObject['STATE']\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"section\">\r\n <h2 class=\"section-title\">Address Type</h2>\r\n <div class=\"d-flex gap-3 w-100\">\r\n <div *ngFor=\"let ele of addessType\" (click)=\"setAddress(ele.key)\" class=\"max-content\" [class.max-content-active]=\"address.addressType == ele.key \">{{ele.key | titlecase}}</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"footer\">\r\n <button class=\"save-btn\" (click)=\"updateAddress()\" *ngIf=\"!isLoading\">{{editIndex === -1 ? 'Save' :\r\n 'Update'}}</button>\r\n <button class=\"save-btn loading-btn\" *ngIf=\"isLoading\"><mat-spinner></mat-spinner> Loading</button>\r\n </div>\r\n</div>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.form-container{max-width:500px;margin:0 auto;background:#fff;border-radius:12px;width:100%}.header{display:flex;justify-content:space-between;align-items:center;padding:0 20px;height:60px;background-color:#f6f3f9}.header h1{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}.form-content{padding:20px;height:calc(100vh - 120px);overflow:scroll}.section{margin-bottom:32px}.section-title{font-size:16px;font-weight:600;color:#000;margin-bottom:16px;margin-top:16px}.form-row{display:flex;gap:12px;margin-bottom:16px}.form-group{flex:1;margin-bottom:16px}.form-group.full-width{width:100%}.form-group label{display:block;font-size:14px;color:#6b7280;margin-bottom:6px;font-weight:500}.form-control{width:100%;padding:8px 16px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;background:#f9fafb;transition:all .2s ease}.form-control:focus{outline:none;border-color:#8b5cf6;background:#fff;box-shadow:0 0 0 3px #8b5cf61a}.form-control.error{border-color:#ef4444;background:#fef2f2}.phone-group{display:flex;align-items:center;gap:8px}.country-code{padding:12px 8px 12px 16px;background:#f3f4f6;border:1px solid #d1d5db;border-radius:8px 0 0 8px;font-size:14px;color:#6b7280;min-width:60px;text-align:center;border-right:none}.phone-input{border-radius:0 8px 8px 0;border-left:none}select.form-control{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;padding-right:40px;appearance:none;cursor:pointer}.save-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}.save-btn:hover{transform:translateY(-1px);box-shadow:0 8px 25px #8b5cf64d}.max-content{width:max-content;padding:6px 15px;border-radius:8px;border:1px solid rgba(139,92,246,.3);color:#6b7280;cursor:pointer}.max-content-active{background:#f6f3f9;font-weight:600}.save-btn:active{transform:translateY(0)}@media (max-width: 480px){.form-row,.phone-group{flex-direction:column}.country-code{border-radius:8px;border-right:1px solid #d1d5db}.phone-input{border-radius:8px;border-left:1px solid #d1d5db}}.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}.error-border{border:2px solid #e53e3e!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: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { 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: MatDialogModule }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i10$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
@@ -7889,12 +7889,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
7889
7889
  ], providers: [
7890
7890
  MatSnackBar
7891
7891
  ], template: "<!-- <section class=\"address-sec\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div class=\"header\">\r\n <div class=\"new-address-header\">\r\n <mat-icon (click)=\"goToProfile()\" *ngIf=\"!isCart\">keyboard_arrow_left</mat-icon>\r\n <h3>{{isCart ? 'Deliver To' : 'New Address'}}</h3>\r\n </div>\r\n <span class=\"add-address\" [style.color]=\"styles?.background?.accentColor\" *ngIf=\"!addNewAddress\" (click)=\"addNewAddress = true\">+ add address</span>\r\n </div>\r\n <ng-container *ngIf=\"addNewAddress\">\r\n <div class=\"forms d-flex flex-wrap floating-input\">\r\n\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Name</div>\r\n <input type=\"text\" placeholder=\"Enter name\" [(ngModel)]=\"address.receiverName\" (keydown)=\"validateName($event)\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Mobile</div>\r\n <input type=\"text\" placeholder=\"Enter mobile\" [(ngModel)]=\"address.receiverPhone\" (keydown)=\"validateMobile($event)\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Email</div>\r\n <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"address.receiverEmail\">\r\n </div>\r\n <div class=\"form-control-full-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Address</div>\r\n <input type=\"text\" placeholder=\"Enter address\" matGoogleMapsAutocomplete\r\n (onAutocompleteSelected)=\"onAutocompleteSelected($event)\"\r\n (onLocationSelected)=\"onLocationSelected($event)\" [(ngModel)]=\"address.addressLine1\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Locality</div>\r\n <input type=\"text\" placeholder=\"Enter locality\" [(ngModel)]=\"address.localityName\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\" [style.color]=\"data?.styles?.background?.accentColor\">Landmark</div>\r\n <input type=\"text\" placeholder=\"Enter landmark\" [(ngModel)]=\"address.landmark\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Pincode</div>\r\n <input type=\"text\" placeholder=\"Enter pincode\" [(ngModel)]=\"address.zipCode\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">City</div>\r\n <input type=\"text\" placeholder=\"Enter city\" [(ngModel)]=\"address.cityName\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">State</div>\r\n <input type=\"text\" placeholder=\"Enter state\" [(ngModel)]=\"address.stateName\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label required\" [style.color]=\"data?.styles?.background?.accentColor\">Address Type</div>\r\n <div class=\"d-flex\">\r\n <ng-container *ngFor=\"let address of addessType\">\r\n <span class=\"address-type\" (click)=\"checkAddressType(address)\" [style.backgroundColor]=\"address.status ? data?.styles?.background?.accentColor : 'rgba(211, 211, 211, 0.362)'\" [ngClass]=\"{'active-address': address.status}\">{{address.key}}</span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"address-list\" *ngIf=\"!addNewAddress\">\r\n <ng-container *ngFor=\"let address of addressList; let idx = index\">\r\n <div class=\"address\" (click)=\"addressSelected(idx)\" [style.borderColor]=\"selectedAddressIdx == idx ? data?.styles?.background?.accentColor : ''\">\r\n <div class=\"address-left\">\r\n <div class=\"top\">\r\n <span class=\"fw-bold mr-2\">{{address?.receiverName}}</span>\r\n <span class=\"address-type\">{{address?.addressType}}</span>\r\n </div>\r\n <div class=\"address-det\">{{address.addressLine1}}</div>\r\n <div class=\"phone\">\r\n <span>Phone:</span>\r\n <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n </div>\r\n </div>\r\n <div class=\"address-right\"></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"action-btn\" *ngIf=\"addNewAddress\">\r\n <div class=\"error-message\">\r\n <span *ngIf=\"address.receiverPhone?.length != 10 && address.receiverPhone?.length\">*Mobile number is invalid</span>\r\n <span *ngIf=\"!isEmailValid\">*Email is invalid</span>\r\n </div>\r\n <button [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [disabled]=\"\r\n !address.receiverName ||\r\n !address.receiverPhone ||\r\n address.receiverPhone?.length != 10 ||\r\n !isEmailValid ||\r\n !address.addressLine1 ||\r\n !address.localityName ||\r\n !address.zipCode ||\r\n !address.cityName ||\r\n !address.stateName ||\r\n !address.addressType || isLoading\r\n \" (click)=\"updateAddress()\">{{isLoading ? 'Loading' : 'Update'}}</button>\r\n </div>\r\n</section>\r\n\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<div class=\"form-container\">\r\n <div class=\"header\">\r\n <h1>{{editIndex === -1 ? 'Add' : 'Update'}} Address</h1>\r\n <button class=\"close-btn\" (click)=\"close()\">\u00D7</button>\r\n </div>\r\n\r\n <div class=\"form-content\">\r\n <div class=\"section\">\r\n <h2 class=\"section-title\">Contact Details</h2>\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label for=\"firstName\">Name</label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.receiverName\" (ngModelChange)=\"validateForm('NAME')\" [class.error-border]=\"!validateObject['NAME']\">\r\n </div>\r\n <div class=\"form-group\">\r\n <label for=\"lastName\">Mobile</label>\r\n <input type=\"number\" class=\"form-control\"\r\n [(ngModel)]=\"address.receiverPhone\" (ngModelChange)=\"validateForm('MOBILE')\" [class.error-border]=\"!validateObject['MOBILE']\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"mobile\">Email</label>\r\n <input type=\"email\" class=\"form-control\" [(ngModel)]=\"address.receiverEmail\" (ngModelChange)=\"validateForm('EMAIL')\" [class.error-border]=\"!validateObject['EMAIL']\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"section\">\r\n <h2 class=\"section-title\">Shipping Address</h2>\r\n <div class=\"form-group\">\r\n <label for=\"address\">Address</label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.addressLine1\" (ngModelChange)=\"validateForm('ADDRESS')\" [class.error-border]=\"!validateObject['ADDRESS']\">\r\n </div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"landmark\">Locality</label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.localityName\">\r\n </div>\r\n\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label for=\"city\">Landmark</label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.landmark\">\r\n </div>\r\n <div class=\"form-group\">\r\n <label for=\"pincode\">Pincode</label>\r\n <input type=\"text\" id=\"pincode\" class=\"form-control\" [(ngModel)]=\"address.zipCode\" (ngModelChange)=\"validateForm('PINCODE')\" [class.error-border]=\"!validateObject['PINCODE']\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label for=\"state\">City</label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.cityName\" (ngModelChange)=\"validateForm('CITY')\" [class.error-border]=\"!validateObject['CITY']\">\r\n </div>\r\n <div class=\"form-group\">\r\n <label for=\"country\">State</label>\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"address.stateName\"(ngModelChange)=\"validateForm('STATE')\" [class.error-border]=\"!validateObject['STATE']\">\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"section\">\r\n <h2 class=\"section-title\">Address Type</h2>\r\n <div class=\"d-flex gap-3 w-100\">\r\n <div *ngFor=\"let ele of addessType\" (click)=\"setAddress(ele.key)\" class=\"max-content\" [class.max-content-active]=\"address.addressType == ele.key \">{{ele.key | titlecase}}</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"footer\">\r\n <button class=\"save-btn\" (click)=\"updateAddress()\" *ngIf=\"!isLoading\">{{editIndex === -1 ? 'Save' :\r\n 'Update'}}</button>\r\n <button class=\"save-btn loading-btn\" *ngIf=\"isLoading\"><mat-spinner></mat-spinner> Loading</button>\r\n </div>\r\n</div>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.form-container{max-width:500px;margin:0 auto;background:#fff;border-radius:12px;width:100%}.header{display:flex;justify-content:space-between;align-items:center;padding:0 20px;height:60px;background-color:#f6f3f9}.header h1{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}.form-content{padding:20px;height:calc(100vh - 120px);overflow:scroll}.section{margin-bottom:32px}.section-title{font-size:16px;font-weight:600;color:#000;margin-bottom:16px;margin-top:16px}.form-row{display:flex;gap:12px;margin-bottom:16px}.form-group{flex:1;margin-bottom:16px}.form-group.full-width{width:100%}.form-group label{display:block;font-size:14px;color:#6b7280;margin-bottom:6px;font-weight:500}.form-control{width:100%;padding:8px 16px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;background:#f9fafb;transition:all .2s ease}.form-control:focus{outline:none;border-color:#8b5cf6;background:#fff;box-shadow:0 0 0 3px #8b5cf61a}.form-control.error{border-color:#ef4444;background:#fef2f2}.phone-group{display:flex;align-items:center;gap:8px}.country-code{padding:12px 8px 12px 16px;background:#f3f4f6;border:1px solid #d1d5db;border-radius:8px 0 0 8px;font-size:14px;color:#6b7280;min-width:60px;text-align:center;border-right:none}.phone-input{border-radius:0 8px 8px 0;border-left:none}select.form-control{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;padding-right:40px;appearance:none;cursor:pointer}.save-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}.save-btn:hover{transform:translateY(-1px);box-shadow:0 8px 25px #8b5cf64d}.max-content{width:max-content;padding:6px 15px;border-radius:8px;border:1px solid rgba(139,92,246,.3);color:#6b7280;cursor:pointer}.max-content-active{background:#f6f3f9;font-weight:600}.save-btn:active{transform:translateY(0)}@media (max-width: 480px){.form-row,.phone-group{flex-direction:column}.country-code{border-radius:8px;border-right:1px solid #d1d5db}.phone-input{border-radius:8px;border-left:1px solid #d1d5db}}.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}.error-border{border:2px solid #e53e3e!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"] }]
7892
- }], ctorParameters: () => [{ type: i0.NgZone }, { type: RestService }, { type: i3.MatDialog }, { type: i8$3.MatBottomSheet }, { type: i2$2.Router }, { type: StorageServiceService }, { type: EventsService }, { type: i2$1.MatSnackBar }, { type: undefined, decorators: [{
7892
+ }], ctorParameters: () => [{ type: i0.NgZone }, { type: RestService }, { type: i1$1.MatDialog }, { type: i8$3.MatBottomSheet }, { type: i2$2.Router }, { type: StorageServiceService }, { type: EventsService }, { type: i2$1.MatSnackBar }, { type: undefined, decorators: [{
7893
7893
  type: Optional
7894
7894
  }, {
7895
7895
  type: Inject,
7896
7896
  args: [MAT_DIALOG_DATA]
7897
- }] }, { type: i3.MatDialogRef, decorators: [{
7897
+ }] }, { type: i1$1.MatDialogRef, decorators: [{
7898
7898
  type: Optional
7899
7899
  }] }], propDecorators: { responseData: [{
7900
7900
  type: Input
@@ -7989,16 +7989,16 @@ class AddressListComponent {
7989
7989
  this.deleteLoading = false;
7990
7990
  });
7991
7991
  }
7992
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddressListComponent, deps: [{ token: i3.MatDialog }, { token: MAT_DIALOG_DATA }, { token: i3.MatDialogRef }, { token: StorageServiceService }, { token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
7992
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddressListComponent, deps: [{ token: i1$1.MatDialog }, { token: MAT_DIALOG_DATA }, { token: i1$1.MatDialogRef }, { token: StorageServiceService }, { token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
7993
7993
  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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: 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"] }] }); }
7994
7994
  }
7995
7995
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddressListComponent, decorators: [{
7996
7996
  type: Component,
7997
7997
  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"] }]
7998
- }], ctorParameters: () => [{ type: i3.MatDialog }, { type: undefined, decorators: [{
7998
+ }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: undefined, decorators: [{
7999
7999
  type: Inject,
8000
8000
  args: [MAT_DIALOG_DATA]
8001
- }] }, { type: i3.MatDialogRef }, { type: StorageServiceService }, { type: RestService }] });
8001
+ }] }, { type: i1$1.MatDialogRef }, { type: StorageServiceService }, { type: RestService }] });
8002
8002
 
8003
8003
  class ScheduleVideoCallComponent {
8004
8004
  constructor(dialogRef, matDialog, messageService, restService, responseData) {
@@ -8162,13 +8162,13 @@ class ScheduleVideoCallComponent {
8162
8162
  this.selectedProducts = this.selectedProducts.filter(selectedItem => selectedItem.itemName !== item.itemName);
8163
8163
  }
8164
8164
  }
8165
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ScheduleVideoCallComponent, deps: [{ token: i3.MatDialogRef }, { token: i3.MatDialog }, { token: i6$1.MessageService }, { token: RestService }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
8165
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ScheduleVideoCallComponent, deps: [{ token: i1$1.MatDialogRef }, { token: i1$1.MatDialog }, { token: i6$1.MessageService }, { token: RestService }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
8166
8166
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ScheduleVideoCallComponent, isStandalone: true, selector: "simpo-schedule-video-call", providers: [MessageService], ngImport: i0, template: "<section class=\"main-section\">\r\n <div class=\"header\">\r\n <div class=\"header-text\">See it Live on Video Call</div>\r\n <mat-icon (click)=\"goBack()\">close</mat-icon>\r\n </div>\r\n <div class=\"content\">\r\n <div class=\"selection-header\">\r\n <h2 class=\"selection-title\">Choose Designs for Live Video Call</h2>\r\n <span class=\"selection-counter\">{{selectedProducts.length}}/{{responseData?.orderItems?.length ?\r\n responseData.orderItems.length : 0}}</span>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"product-card col-md-6 col-12\" *ngFor=\"let data of orderedItems; let i = index\">\r\n <img [src]=\"data?.imgUrl\" alt=\"product_img\">\r\n <input type=\"checkbox\" [checked]=\"data.selected\" (click)=\"selectedItems(data)\">\r\n <div class=\"product-price\">\u20B9{{data?.discountedPrice ? data?.discountedPrice : 'N/A'}}</div>\r\n <div class=\"product-name\">{{data?.itemName ? data?.itemName : 'N/A'}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"footer\">\r\n <button (click)=\"openScheduleCall(dialogBox)\">Schedule video call</button>\r\n </div>\r\n <ng-template #dialogBox>\r\n <div class=\"modal-content\">\r\n <div class=\"schedule-header w-100 d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon (click)=\"closeDialog()\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n <div class=\"modal-body h-100 p-0\">\r\n <div class=\"row h-100 w-100 mt-3 video-call-container\">\r\n <div class=\"col-6\" *ngIf=\"!isMobile\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/897651c1751980487170Vdo Call.gif\" alt=\"\"\r\n class=\"w-100\">\r\n </div>\r\n <div class=\"col-6 position-relative h-100 call-details\">\r\n <!-- Name Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\r\n <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\r\n (input)=\"onInputChange('username')\">\r\n </div>\r\n\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n (input)=\"onInputChange('email')\">\r\n </div>\r\n\r\n <!-- Mobile Number Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\r\n <div class=\"sub-text-call\">IN +91</div>\r\n <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\r\n (input)=\"onInputChange('mobileNumber')\">\r\n </div>\r\n\r\n\r\n <!-- Pincode Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\r\n <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\r\n <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n </div>\r\n <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\r\n (input)=\"onInputChange('pincode')\">\r\n </div>\r\n <div class=\"language my-3\">\r\n <div class=\"mini-text mb-2\">Language Preference</div>\r\n <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\r\n <ng-container *ngFor=\"let lang of languages\">\r\n <div class=\"lang px-2 py-1 rounded cursor-pointer\"\r\n [style.background]=\"lang == selectedLang ? responseData.data?.styles?.background?.accentColor : ''\"\r\n (click)=\"selectedLang = lang\" [simpoColor]=\"responseData.data?.styles?.background?.accentColor\">\r\n {{lang}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"selectedLang == 'Others'\">\r\n <div class=\"input-field my-3\">\r\n <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\r\n </div>\r\n </ng-container>\r\n <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\"\r\n (click)=\"scheduleVideoCall()\" [disabled]=\"isSubmitting\">\r\n <ng-container *ngIf=\"isSubmitting\">\r\n <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\r\n <span class=\"visually-hidden\">Loading...</span>\r\n </div>\r\n SCHEDULING...\r\n </ng-container>\r\n <ng-container *ngIf=\"!isSubmitting && !scheduled\">\r\n <mat-icon>video_call</mat-icon>&nbsp;\r\n SCHEDULE A VIDEO CALL\r\n </ng-container>\r\n <ng-container *ngIf=\"scheduled\">\r\n <mat-icon>check_circle</mat-icon>&nbsp;\r\n SCHEDULED SUCCESSFULLY\r\n </ng-container>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}.main-section{width:30vw;position:relative;height:100%}@media screen and (max-width:475px){.main-section{width:100vw!important}}.header{display:flex;justify-content:space-between;padding:0 15px;height:45px;align-items:center;border-bottom:1px solid black}.content{height:calc(100vh - 90px);overflow:scroll;padding:15px}.footer{position:absolute;bottom:0;width:100%;height:45px;align-items:center;display:flex;border-top:1px solid black;padding:0 25px}.footer button{background:linear-gradient(90deg,#8c6,#26b324);border:none;font-size:1rem!important;color:#fff;padding-top:7px;padding-bottom:7px;border-radius:5px;font-weight:600}.selection-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.selection-title{font-size:16px;color:#495057;font-weight:400}.selection-counter{font-size:16px;color:#6c757d;font-weight:500}.product-card{position:relative}.product-card img{width:100%;height:29vh}.product-card input{position:absolute;top:10px;right:20px}.product-price{font-size:16px;font-weight:600;color:#000;margin-bottom:4px;margin-top:10px}.product-original-price{font-size:12px;color:#6c757d;text-decoration:line-through;margin-left:8px}.product-name{font-size:14px;color:#6c757d;line-height:1.3}.row{row-gap:15px}.header-text{font-size:1rem;font-weight:700}.modal-content{height:100%;border:none;border-radius:0!important}.schedule-header{border-radius:18px 18px 0 0}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.video-call-container{margin:0!important}.call-details{padding:3%!important}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:20px;height:20px;border:2px solid #ccc;border-radius:4px;outline:none;cursor:pointer;position:relative;background-color:#fff;transition:all .3s ease}input[type=checkbox]:checked{background-color:#007bff;border-color:#007bff}input[type=checkbox]:checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:14px;font-weight:700}input[type=checkbox]:hover{border-color:#007bff;box-shadow:0 0 5px #007bff4d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
8167
8167
  }
8168
8168
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ScheduleVideoCallComponent, decorators: [{
8169
8169
  type: Component,
8170
8170
  args: [{ selector: 'simpo-schedule-video-call', standalone: true, imports: [CommonModule, MatIconModule, FormsModule, ColorDirective], providers: [MessageService], template: "<section class=\"main-section\">\r\n <div class=\"header\">\r\n <div class=\"header-text\">See it Live on Video Call</div>\r\n <mat-icon (click)=\"goBack()\">close</mat-icon>\r\n </div>\r\n <div class=\"content\">\r\n <div class=\"selection-header\">\r\n <h2 class=\"selection-title\">Choose Designs for Live Video Call</h2>\r\n <span class=\"selection-counter\">{{selectedProducts.length}}/{{responseData?.orderItems?.length ?\r\n responseData.orderItems.length : 0}}</span>\r\n </div>\r\n\r\n <div class=\"row\">\r\n <div class=\"product-card col-md-6 col-12\" *ngFor=\"let data of orderedItems; let i = index\">\r\n <img [src]=\"data?.imgUrl\" alt=\"product_img\">\r\n <input type=\"checkbox\" [checked]=\"data.selected\" (click)=\"selectedItems(data)\">\r\n <div class=\"product-price\">\u20B9{{data?.discountedPrice ? data?.discountedPrice : 'N/A'}}</div>\r\n <div class=\"product-name\">{{data?.itemName ? data?.itemName : 'N/A'}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"footer\">\r\n <button (click)=\"openScheduleCall(dialogBox)\">Schedule video call</button>\r\n </div>\r\n <ng-template #dialogBox>\r\n <div class=\"modal-content\">\r\n <div class=\"schedule-header w-100 d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon (click)=\"closeDialog()\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n <div class=\"modal-body h-100 p-0\">\r\n <div class=\"row h-100 w-100 mt-3 video-call-container\">\r\n <div class=\"col-6\" *ngIf=\"!isMobile\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/897651c1751980487170Vdo Call.gif\" alt=\"\"\r\n class=\"w-100\">\r\n </div>\r\n <div class=\"col-6 position-relative h-100 call-details\">\r\n <!-- Name Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\r\n <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\r\n (input)=\"onInputChange('username')\">\r\n </div>\r\n\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n (input)=\"onInputChange('email')\">\r\n </div>\r\n\r\n <!-- Mobile Number Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\r\n <div class=\"sub-text-call\">IN +91</div>\r\n <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\r\n (input)=\"onInputChange('mobileNumber')\">\r\n </div>\r\n\r\n\r\n <!-- Pincode Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\r\n <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\r\n <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n </div>\r\n <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\r\n (input)=\"onInputChange('pincode')\">\r\n </div>\r\n <div class=\"language my-3\">\r\n <div class=\"mini-text mb-2\">Language Preference</div>\r\n <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\r\n <ng-container *ngFor=\"let lang of languages\">\r\n <div class=\"lang px-2 py-1 rounded cursor-pointer\"\r\n [style.background]=\"lang == selectedLang ? responseData.data?.styles?.background?.accentColor : ''\"\r\n (click)=\"selectedLang = lang\" [simpoColor]=\"responseData.data?.styles?.background?.accentColor\">\r\n {{lang}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"selectedLang == 'Others'\">\r\n <div class=\"input-field my-3\">\r\n <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\r\n </div>\r\n </ng-container>\r\n <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\"\r\n (click)=\"scheduleVideoCall()\" [disabled]=\"isSubmitting\">\r\n <ng-container *ngIf=\"isSubmitting\">\r\n <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\r\n <span class=\"visually-hidden\">Loading...</span>\r\n </div>\r\n SCHEDULING...\r\n </ng-container>\r\n <ng-container *ngIf=\"!isSubmitting && !scheduled\">\r\n <mat-icon>video_call</mat-icon>&nbsp;\r\n SCHEDULE A VIDEO CALL\r\n </ng-container>\r\n <ng-container *ngIf=\"scheduled\">\r\n <mat-icon>check_circle</mat-icon>&nbsp;\r\n SCHEDULED SUCCESSFULLY\r\n </ng-container>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}.main-section{width:30vw;position:relative;height:100%}@media screen and (max-width:475px){.main-section{width:100vw!important}}.header{display:flex;justify-content:space-between;padding:0 15px;height:45px;align-items:center;border-bottom:1px solid black}.content{height:calc(100vh - 90px);overflow:scroll;padding:15px}.footer{position:absolute;bottom:0;width:100%;height:45px;align-items:center;display:flex;border-top:1px solid black;padding:0 25px}.footer button{background:linear-gradient(90deg,#8c6,#26b324);border:none;font-size:1rem!important;color:#fff;padding-top:7px;padding-bottom:7px;border-radius:5px;font-weight:600}.selection-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.selection-title{font-size:16px;color:#495057;font-weight:400}.selection-counter{font-size:16px;color:#6c757d;font-weight:500}.product-card{position:relative}.product-card img{width:100%;height:29vh}.product-card input{position:absolute;top:10px;right:20px}.product-price{font-size:16px;font-weight:600;color:#000;margin-bottom:4px;margin-top:10px}.product-original-price{font-size:12px;color:#6c757d;text-decoration:line-through;margin-left:8px}.product-name{font-size:14px;color:#6c757d;line-height:1.3}.row{row-gap:15px}.header-text{font-size:1rem;font-weight:700}.modal-content{height:100%;border:none;border-radius:0!important}.schedule-header{border-radius:18px 18px 0 0}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.video-call-container{margin:0!important}.call-details{padding:3%!important}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:20px;height:20px;border:2px solid #ccc;border-radius:4px;outline:none;cursor:pointer;position:relative;background-color:#fff;transition:all .3s ease}input[type=checkbox]:checked{background-color:#007bff;border-color:#007bff}input[type=checkbox]:checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:14px;font-weight:700}input[type=checkbox]:hover{border-color:#007bff;box-shadow:0 0 5px #007bff4d}\n"] }]
8171
- }], ctorParameters: () => [{ type: i3.MatDialogRef }, { type: i3.MatDialog }, { type: i6$1.MessageService }, { type: RestService }, { type: undefined, decorators: [{
8171
+ }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: i1$1.MatDialog }, { type: i6$1.MessageService }, { type: RestService }, { type: undefined, decorators: [{
8172
8172
  type: Inject,
8173
8173
  args: [MAT_DIALOG_DATA]
8174
8174
  }] }] });
@@ -8195,13 +8195,13 @@ class SchemeSelectionComponent {
8195
8195
  applyRedmption() {
8196
8196
  this.dialogRef.close({ redmpetionData: this.redemptionData, selectedAmount: this.selectedAmount });
8197
8197
  }
8198
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeSelectionComponent, deps: [{ token: i3.MatDialogRef }, { token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
8198
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeSelectionComponent, deps: [{ token: i1$1.MatDialogRef }, { token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
8199
8199
  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 }] }); }
8200
8200
  }
8201
8201
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeSelectionComponent, decorators: [{
8202
8202
  type: Component,
8203
8203
  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"] }]
8204
- }], ctorParameters: () => [{ type: i3.MatDialogRef }, { type: RestService }] });
8204
+ }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: RestService }] });
8205
8205
 
8206
8206
  class OrderedItems {
8207
8207
  constructor(json, varientId) {
@@ -9057,7 +9057,7 @@ class CartComponent extends BaseSection {
9057
9057
  getUrl() {
9058
9058
  return window?.location?.origin?.includes('caratlane') || window?.location?.origin?.includes('orra');
9059
9059
  }
9060
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CartComponent, deps: [{ token: EventsService }, { token: CartService }, { token: i2$2.Router }, { token: RestService }, { token: i3.MatDialog }, { token: StorageServiceService }, { token: i6$1.MessageService }, { token: i8$3.MatBottomSheet }, { token: i2$2.ActivatedRoute }, { token: MAT_DIALOG_DATA, optional: true }, { token: i3.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
9060
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CartComponent, deps: [{ token: EventsService }, { token: CartService }, { token: i2$2.Router }, { token: RestService }, { token: i1$1.MatDialog }, { token: StorageServiceService }, { token: i6$1.MessageService }, { token: i8$3.MatBottomSheet }, { token: i2$2.ActivatedRoute }, { token: MAT_DIALOG_DATA, optional: true }, { token: i1$1.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
9061
9061
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CartComponent, isStandalone: true, selector: "simpo-cart", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], viewQueries: [{ propertyName: "d2", first: true, predicate: ["d2"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\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=\"data\">\r\n <section [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\"\r\n [attr.class]=\"isMobile ? 'py-5 position-relative' : 'position-relative'\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\"\r\n [ngClass]=\"!responseData?.orderedItems?.length ? 'no-items' : ''\">\r\n <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\"\r\n [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\"\r\n *ngIf=\"responseData?.orderedItems?.length && currentTab === 'ADDRESS'\">\r\n <span class=\"timeline\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline isActive\">Address</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline\" style=\"cursor: auto;\">Payment</span>\r\n </div>\r\n <div class=\"cart-tab-parent w-100\" *ngIf=\"currentTab == 'BAG' && ecomConfigs?.appointmentBookingEnabled\">\r\n <div class=\"cart-tabs\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n <div class=\"selected-cart-tab\" [ngClass]=\"{'selected-cart-tab': cartType==='SHOPPING'}\"\r\n (click)=\"cartType='SHOPPING'\">Shopping Cart ({{responseData?.orderedItems?.length ?? 0}})</div>\r\n <div [ngClass]=\"{'selected-cart-tab': cartType==='TRIAL'}\" (click)=\"cartType='TRIAL'\">Trial Cart\r\n ({{trialCartItem?.length ?? 0}})</div>\r\n </div>\r\n </div>\r\n <div class=\"cart-parent\" [spacingHorizontal]=\"stylesLayout\" *ngIf=\"currentTab === 'BAG'\" [id]=\"data?.id\"\r\n [simpoAnimation]=\"styles?.animation\">\r\n <ng-container>\r\n <!-- <div class=\"left-panel\">\r\n <div class=\"my-bag\">\r\n My Bag&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n </div>\r\n <div class=\"cart-items box-shadow\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n <div class=\"item-parent d-flex\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n alt=\"\" (click)=\"goToProductDetails(item)\">\r\n </div>\r\n <div class=\"col-md-6 h-100\" [style.width.px]=\"isMobile ? '200' : ''\" style=\"margin-left: px;\">\r\n <div class=\"lh-23\">\r\n <div class=\"item-name trim-text heading-large\">{{item.itemName}}</div>\r\n <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.discountedPrice ?? item.sellingPrice) | number:\r\n '1.0-2'}}\r\n </div>\r\n <ng-container *ngIf=\"item.itemVariant\">\r\n <div class=\"d-flex align-items-center\"\r\n *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\r\n <strong class=\"fw-bold\">{{ varient }} : </strong>\r\n {{ item.itemVariant.properties[varient] | uppercase }}\r\n </div>\r\n </ng-container>\r\n <div class=\"item-quantity\">\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4 position-relative\" style=\"margin-left: auto; width: 0px; \">\r\n <div class=\"item-price\"><span [innerHTML]='currency'></span> {{((item.discountedPrice ??\r\n item.sellingPrice) * item.quantity) | number: '1.0-2'}}</div>\r\n <div>\r\n <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\"\r\n [style.right.px]=\"isMobile ? '5' : '0'\">delete</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n </ng-container>\r\n </div>\r\n </div> -->\r\n <!-- <div class=\"right-panel\">\r\n <div class=\"coupons box-shadow\" (click)=\"openDialog(CouponList)\">\r\n <ng-container *ngIf=\"!responseData.billdetails?.couponId\">\r\n <div class=\"d-flex flex-column\">\r\n <span style=\"font-weight: 600;\">Apply Coupon</span>\r\n <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\r\n </div>\r\n <div [style.color]=\"styles?.background?.accentColor\" style=\"font-weight: 600;\">Apply</div>\r\n </ng-container>\r\n <ng-container *ngIf=\"responseData.billdetails?.couponId\">\r\n <div class=\"d-flex flex-column\">\r\n <span style=\"font-weight: 600;\">Coupon</span>\r\n <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\r\n </div>\r\n <div [style.color]=\"styles?.background?.accentColor\" (click)=\"removeCoupon($event)\">Remove</div>\r\n </ng-container>\r\n </div>\r\n <div class=\"price-details box-shadow\">\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\">Total Price</div>\r\n <div class=\"price-value\"><span [innerHTML]='currency'></span>\r\n {{(responseData?.billdetails?.totalNetValue\r\n ?? 0) | number: '1.0-2'}}</div>\r\n </div>\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\">Total Tax</div>\r\n <div class=\"price-value\"><span [innerHTML]='currency'></span> {{((!responseData.billdetails?.couponId ?\r\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\r\n number:\r\n '1.0-2'}}</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\r\n |\r\n number: '1.0-2'}}</div>\r\n </div>\r\n <div class=\"price-parent-block\"\r\n *ngIf=\"responseData?.billdetails?.discountAmount && subIndustryName != 'Ecommerce Jewellery'\">\r\n <div class=\"price-type\">Discount Amount</div>\r\n <div class=\"price-value\"><span [innerHtml]='currency'></span>\r\n {{responseData?.billdetails?.discountAmount\r\n | number: '1.0-2'}}</div>\r\n </div>\r\n <hr>\r\n <div class=\"price-parent-block\">\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>\r\n {{((responseData?.totalAmount ?? 0) - (responseData?.billdetails?.discountAmount ?? 0)) | number:\r\n '1.0-2'}}</div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"button-parent\">\r\n <ng-container>\r\n <button class=\"btn mobile-fixed\" (click)=\"!edit ? proceedToCheckout() : ''\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\">{{data?.action?.buttons?.[0]?.content?.label ??\r\n 'Checkout\r\n Cart'}}\r\n </button>\r\n <button class=\"btn\" (click)=\"!edit ? proceedToListPage() : ''\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(1)\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n Shopping'}}</button>\r\n </ng-container>\r\n </div>\r\n\r\n </div> -->\r\n <ng-container *ngIf=\"cartType === 'SHOPPING'\">\r\n <ng-container\r\n *ngTemplateOutlet=\"(responseData?.orderedItems?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"cartType === 'TRIAL'\">\r\n <ng-container *ngTemplateOutlet=\"(trialCartItem?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\r\n </ng-container>\r\n <!-- <ng-container *ngTemplateOutlet=\"CARTPAGE\"></ng-container> -->\r\n </ng-container>\r\n <!-- <ng-container *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && cartType==='TRIAL'\">\r\n <ng-container *ngTemplateOutlet=\"TRIAL_CART\">\r\n </ng-container>\r\n </ng-container> -->\r\n </div>\r\n <div class=\"d-flex checkoutPage\"\r\n *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && currentTab === 'ADDRESS'\">\r\n <ng-container *ngTemplateOutlet=\"CHECKOUTPAGE\">\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [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\r\n </section>\r\n </ng-container>\r\n <ng-container *ngIf=\"!data\">\r\n <section class=\"cart-window\">\r\n <div class=\"heading-large lh-2 mb-3 header-sec\">\r\n <div class=\"d-flex align-items-center\">\r\n <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\r\n <span>Your Cart</span>\r\n </div>\r\n <div class=\"saving\"></div>\r\n </div>\r\n <div class=\"offers\">\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\r\n <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\r\n <span>Avail Offers / Coupons</span>\r\n </div>\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n <div class=\"small-items\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems\">\r\n <div class=\"small-item\">\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"small-product-img\"\r\n [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n (click)=\"goToProductDetails(item)\">\r\n </div>\r\n <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\r\n <div class=\"small-item-quantity\">\r\n <span class=\"cursor\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\">+</span>\r\n </div>\r\n <div class=\"small-item-price\">\r\n <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.sellingPrice) | number: '1.0-2'}}\r\n </div>\r\n <!-- <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"fotter-sec\">\r\n <div class=\"delivery-add d-flex\">\r\n <mat-icon>home</mat-icon>\r\n <div class=\"address\">Tetsting</div>\r\n </div>\r\n <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span\r\n style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span>\r\n {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\r\n </div>\r\n </section>\r\n </ng-container>\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<ng-template #CouponList>\r\n <section class=\"coupons-listing-section\">\r\n <div class=\"coupon-heading\">\r\n <div class=\"back-btn\" (click)=\"closeDialogRef()\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"header-text\">Apply Coupon</div>\r\n </div>\r\n <!-- <div class=\"coupon-search-sec\">\r\n <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\r\n <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\r\n </div> -->\r\n <div class=\"coupon-listing\">\r\n <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\r\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\r\n <div class=\"coupon-details\"\r\n [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\">\r\n <div class=\"details__coupon-heading\">\r\n <div class=\"coupon-brief\">\r\n <div class=\"coupon-brief__left-sec\">\r\n <div class=\"coupon-name\" [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\r\n {{ couponDetails.couponCode | uppercase }}</div>\r\n <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\r\n </div>\r\n <div class=\"coupon-brief__right-sec\">\r\n <div class=\"apply-offer-btn\" [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\r\n [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\"\r\n (click)=\"applyCoupon(couponDetails)\">Apply</div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\r\n <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\r\n <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\r\n </div> -->\r\n </div>\r\n <ng-container *ngIf=\"couponDetails.status\">\r\n <div class=\"details-divider\"></div>\r\n <ul class=\"details__coupon-terms\">\r\n <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\r\n </ul>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #showEmptyScreen>\r\n <div class=\"empty-screen-container\">\r\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n <div class=\"empty-screen__primary-text\">No Coupon Available</div>\r\n <div class=\"empty-screen__secondary-text\">\r\n Looks like there are no coupons at the moment\r\n </div>\r\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\r\n </div>\r\n </ng-template>\r\n </div>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #CARTPAGE>\r\n <div class=\"container\">\r\n <div class=\"main-content\">\r\n <div class=\"promo-banner\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\r\n *ngIf=\"cartType === 'SHOPPING' && ecomConfigs?.videoCallEnabled\" [simpoColor]=\"styles?.background?.color\">\r\n <div class=\"promo-text\">\r\n <h3>See It Before You Buy It</h3>\r\n <p>Experience our designs in detail via video call</p>\r\n </div>\r\n <button class=\"see-live-btn\" (click)=\"scheduleVideoCall(responseData?.orderedItems)\">\r\n \uD83D\uDCF9 SEE IT LIVE\r\n </button>\r\n </div>\r\n\r\n <div class=\"cart-items\">\r\n <ng-container\r\n *ngTemplateOutlet=\"CARTITEM;context:{data: cartType === 'SHOPPING' ? responseData?.orderedItems : trialCartItem}\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"sidebar\">\r\n <div class=\"reedem-section d-flex flex-column align-items-center\" *ngIf=\"cartType != 'TRIAL' && getUrl()\">\r\n <div class=\"justify-content-between d-flex align-items-center w-100 redeem-section-text\">Redeem Section Amount\r\n <div class=\"toogle-switch\">\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" role=\"switch\" id=\"flexSwitchCheckChecked\"\r\n [checked]=\"selectMatureScheme\" (change)=\"onToggleChange()\">\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"select_matured_text w-100 text-start cursor-pointer\"\r\n *ngIf=\"selectMatureScheme && !selectedRedemption\" (click)=\"selectScheme()\">\r\n Select Matured Scheme\r\n </div> -->\r\n <!-- <div class=\"select_matured_text d-flex flex-column gap-2 w-100 text-start cursor-pointer\"\r\n *ngIf=\"selectedRedemption\">\r\n Selected Scheme\r\n <div class=\"d-flex w-100 justify-content-between align-items-center group_invest\">Group Investment\r\n scheme-5000/M <span>Change</span></div>\r\n <div class=\"d-flex justify-content-between align-items-center w-100 redeem_amount\">Redeemable Amount\r\n <span>\u20B9{{selectedRedmpationData.selectedAmount}}</span>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div class=\"scheme-section\" *ngIf=\"selectMatureScheme\">\r\n <ng-container *ngTemplateOutlet=\"SCHEME_REDEMPTION\"></ng-container>\r\n </div>\r\n <div class=\"coupon-section\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" *ngIf=\"cartType === 'SHOPPING'\"\r\n (click)=\"openDialog(CouponList)\" [simpoColor]=\"styles?.background?.color\">\r\n <div class=\"coupon-left\">\r\n <div class=\"coupon-icon\">%</div>\r\n <span class=\"coupon-text\" *ngIf=\"!responseData.billdetails?.couponId\">Apply Coupon</span>\r\n <span class=\"coupon-text\" *ngIf=\"responseData.billdetails?.couponId\">Coupon Applied</span>\r\n </div>\r\n <span *ngIf=\"!responseData.billdetails?.couponId\">\u25B6</span>\r\n <span *ngIf=\"responseData.billdetails?.couponId\"\r\n (click)=\"removeCoupon($event)\"><mat-icon>close</mat-icon></span>\r\n </div>\r\n\r\n <div class=\"delivery-section\" *ngIf=\"getUrl()\">\r\n <div class=\"delivery-header\">\r\n <mat-icon>gps_fixed</mat-icon>\r\n <span *ngIf=\"cartType === 'SHOPPING'\">Delivering to</span>\r\n <span *ngIf=\"cartType === 'TRIAL'\">Trial Location at</span>\r\n <span class=\"pincode\">{{pincode}}</span>\r\n <!-- <a class=\"change-link\">Change Pincode</a> -->\r\n </div>\r\n </div>\r\n\r\n <div class=\"summary-section\">\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span class=\"summary-label\">Total Price</span>\r\n <span class=\"summary-value\">\u20B9{{(responseData?.billdetails?.totalNetValue\r\n ?? 0) | number: '1.0-2'}}</span>\r\n </div>\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span class=\"summary-label\">Total Tax</span>\r\n <span class=\"summary-value\">\u20B9{{((!responseData.billdetails?.couponId ?\r\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\r\n number:\r\n '1.0-2'}}</span>\r\n </div>\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\r\n <span class=\"summary-label\">Redeem Amount</span>\r\n <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\r\n '1.0-2'}}</span>\r\n </div>\r\n <div class=\"summary-row\"\r\n *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n <span class=\"summary-label\">Delivery Charge</span>\r\n <span class=\"summary-value\">\u20B9{{responseData.billdetails.deliveryCharges\r\n |\r\n number: '1.0-2'}}</span>\r\n </div>\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.discountAmount \">\r\n <span class=\"summary-label\">Discount Amount</span>\r\n <span class=\"summary-value savings\"> \u20B9{{responseData?.billdetails?.discountAmount\r\n | number: '1.0-2'}}</span>\r\n </div>\r\n <!-- <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span class=\"summary-label\">Coupon Discount</span>\r\n <span class=\"summary-value apply-coupon\">Apply Coupon</span>\r\n </div> -->\r\n <!-- <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span class=\"summary-label\">Shipping (Standard)</span>\r\n <span class=\"summary-value free\">Free</span>\r\n </div> -->\r\n <div class=\"summary-row total-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span class=\"total-label\">Total Cost</span>\r\n <span class=\"total-value\">\u20B9{{ responseData?.totalAmount | \r\n number: '1.0-2' }}</span>\r\n </div>\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'TRIAL'\">\r\n <span class=\"summary-label\">Free Trial</span>\r\n <span class=\"summary-value savings\">\u20B90</span>\r\n </div>\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'TRIAL'\">\r\n <span class=\"summary-label\">Service Charge</span>\r\n <span class=\"summary-value savings\">Free</span>\r\n </div>\r\n <div class=\"summary-row total-row\" *ngIf=\"cartType === 'TRIAL'\">\r\n <span class=\"total-label\">Total Cost</span>\r\n <span class=\"total-value\">\u20B90 </span>\r\n </div>\r\n </div>\r\n <button class=\"place-order-btn\" (click)=\"proceedToListPage()\" simpoButtonDirective\r\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n *ngIf=\"cartType === 'SHOPPING'\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n Shopping'}}</button>\r\n <button class=\"place-order-btn mt-0\" (click)=\"proceedToCheckout()\" simpoButtonDirective\r\n *ngIf=\"cartType === 'SHOPPING'\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout\r\n Cart'}}</button>\r\n <button class=\"place-order-btn mt-0\" simpoButtonDirective *ngIf=\"cartType === 'TRIAL'\"\r\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\" (click)=\"bookAppointment()\">BOOK\r\n APPOINTMENT</button>\r\n\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #CHECKOUTPAGE>\r\n <div class=\"checkout-left-panel\">\r\n <div class=\"checkout-main-content\">\r\n <!-- <div class=\"delivery-options\">\r\n <div class=\"delivery-option active\">\r\n <div class=\"delivery-icon\"></div>\r\n HOME DELIVERY\r\n </div>\r\n <div class=\"delivery-option\">\r\n <div class=\"delivery-icon\"></div>\r\n STORE PICK-UP\r\n </div>\r\n </div> -->\r\n\r\n <div class=\"section-title\">Shipping Address</div>\r\n\r\n <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\r\n <div class=\"address-info\">\r\n <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\r\n <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\r\n {{defaultAddress?.stateName}}</div>\r\n <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"addLinks h-100\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\r\n <mat-icon>add</mat-icon>\r\n </div>\r\n\r\n <button class=\"change-address-btn\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">CHANGE OR ADD ADDRESS</button>\r\n\r\n <div class=\"btn w-100 mt-1 payment-btn\" (click)=\"proceedToPayment()\" simpoButtonDirective *ngIf=\"defaultAddress\"\r\n [buttonStyle]=\"data?.action?.buttons?.[2]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"styles?.background\">\r\n {{data?.action?.buttons?.[2]?.content?.label ?? 'Procced To Payment'}}\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"checkout-right-panel\">\r\n <div class=\"order-summary\">\r\n <div class=\"summary-title\">Order Summary</div>\r\n\r\n <div class=\"checkout-product\">\r\n <div class=\"product-item\" *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n <img [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-image\"\r\n alt=\"\">\r\n <div class=\"product-details\">\r\n <div class=\"product-name\">{{item.itemName}}</div>\r\n <div class=\"product-quantity\">Quantity: {{item.quantity}}</div>\r\n <div class=\"product-price\">\u20B9{{(item.sellingPrice * item.quantity) | number: '1.0-2'}}</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"price-breakdown\">\r\n <div class=\"price-row\">\r\n <span>Total Price</span>\r\n <span>\u20B9{{(responseData?.billdetails?.totalNetValue\r\n ?? 0) | number: '1.0-2'}}</span>\r\n </div>\r\n <div class=\"price-row\">\r\n <span>Total Tax</span>\r\n <span>\u20B9{{((!responseData.billdetails?.couponId ?\r\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\r\n number:\r\n '1.0-2'}}</span>\r\n </div>\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\r\n <span class=\"summary-label\">Redeem Amount</span>\r\n <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\r\n '1.0-2'}}</span>\r\n </div>\r\n\r\n <div class=\"price-row discount\"\r\n *ngIf=\"responseData?.billdetails?.discountAmount && subIndustryName != 'Ecommerce Jewellery'\">\r\n <span>Coupon Discount</span>\r\n <span>- \u20B9{{responseData?.billdetails?.discountAmount\r\n | number: '1.0-2'}}</span>\r\n </div>\r\n <div class=\"price-row\"\r\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n <span>Delivery Charge</span>\r\n <span>{{responseData.billdetails.deliveryCharges\r\n |\r\n number: '1.0-2'}}</span>\r\n </div>\r\n <div class=\"price-row total\">\r\n <span>TOTAL AMOUNT</span>\r\n <span>\u20B9{{(responseData?.totalAmount ?? 0) | number:\r\n '1.0-2'}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #CARTITEM let-products=\"data\">\r\n <div class=\"cart-item\" *ngFor=\"let item of products\">\r\n <div class=\"item-image\">\r\n <!-- <div class=\"earring-icon\">\uD83E\uDD8B</div> -->\r\n <img class=\"item-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n (click)=\"goToProductDetails(item)\">\r\n </div>\r\n <div class=\"item-details\">\r\n <h3 class=\"item-title\">{{item.itemName}}</h3>\r\n <div class=\"item-price\">\r\n <span class=\"current-price\">\u20B9{{item.sellingPrice | number: '1.0-2'}}</span>\r\n <span class=\"original-price\" *ngIf=\"item.value - item.discountedPrice > 2\">\u20B9{{item.value | number:\r\n '1.0-2'}}</span>\r\n <span class=\"discount\" *ngIf=\"item.value - item.discountedPrice > 2\">Save \u20B9{{item.value -\r\n item.sellingPrice | number: '1.0-2'}}</span>\r\n </div>\r\n <div class=\"item-options\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <select name=\"\" id=\"\" (change)=\"changeQuantity($event, item)\" [(ngModel)]=\"item.quantity\">\r\n <option [value]=\"value\" *ngFor=\"let value of quantity\">{{value}}</option>\r\n </select>\r\n </div>\r\n <div class=\"item-options\" *ngIf=\"item.itemVariant\">\r\n <span *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">{{ varient }}: {{\r\n item.itemVariant.properties[varient] | uppercase }}</span>\r\n </div>\r\n <div class=\"delivery-info\" *ngIf=\"cartType === 'SHOPPING' && getUrl()\">Delivery by - Tomorrow 6PM-9PM</div>\r\n <div class=\"delivery-info\" *ngIf=\"cartType === 'TRIAL'\">Available to try from tomorrow</div>\r\n <div class=\"pickup-info\" *ngIf=\"cartType === 'SHOPPING' && getUrl()\">\r\n <span class=\"pickup-text\">\uD83D\uDCCD Pickup today from 6 Stores nearby</span>\r\n <span>\u25B6</span>\r\n </div>\r\n </div>\r\n <button class=\"remove-btn\" (click)=\"removeItem(item)\">\u2715</button>\r\n </div>\r\n\r\n <!-- <div class=\"cart-item\">\r\n <div class=\"item-image\">\r\n <div class=\"chain-icon\">\uD83D\uDD17</div>\r\n </div>\r\n <div class=\"item-details\">\r\n <h3 class=\"item-title\">Lucid Cable Gold Chain</h3>\r\n <div class=\"item-price\">\r\n <span class=\"current-price\">\u20B921,163</span>\r\n </div>\r\n <div class=\"item-options\">\r\n <span>Length: 16</span>\r\n <span>Size: XXL</span>\r\n <span>Color: Black</span>\r\n </div>\r\n <div class=\"delivery-info\">Delivery by - Tomorrow 6PM-9PM</div>\r\n <div class=\"pickup-info\">\r\n <span class=\"pickup-text\">\uD83D\uDCCD Pickup today from 4 Stores nearby</span>\r\n <span>\u25B6</span>\r\n </div>\r\n </div>\r\n <button class=\"remove-btn\">\u2715</button>\r\n </div>\r\n\r\n <div class=\"cart-item\">\r\n <div class=\"item-image\">\r\n <div class=\"chain-icon\">\uD83D\uDD17</div>\r\n </div>\r\n <div class=\"item-details\">\r\n <h3 class=\"item-title\">Lucid Cable Gold Chain</h3>\r\n <div class=\"item-price\">\r\n <span class=\"current-price\">\u20B921,163</span>\r\n </div>\r\n <div class=\"item-options\">\r\n <span>Length: 16</span>\r\n <span>Size: XXL</span>\r\n <span>Color: Black</span>\r\n </div>\r\n <div class=\"delivery-info\">Delivery by - Tomorrow 6PM-9PM</div>\r\n <div class=\"pickup-info\">\r\n <span class=\"pickup-text\">\uD83D\uDCCD Pickup today from 4 Stores nearby</span>\r\n <span>\u25B6</span>\r\n </div>\r\n </div>\r\n <button class=\"remove-btn\">\u2715</button>\r\n </div> -->\r\n</ng-template>\r\n\r\n<ng-template #EMPTYITEM>\r\n <section class=\"empty-cart w-100 d-flex align-items-center justify-content-center\">\r\n <div class=\"empty-cart-container d-flex flex-column\">\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"data?.content?.image\" [sectionId]=\"data?.id\">\r\n </div>\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\"\r\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <button class=\"place-order-btn w-25 mx-auto\" (click)=\"proceedToListPage()\" simpoButtonDirective\r\n [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n Shopping'}}</button>\r\n </div>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #SCHEME_REDEMPTION>\r\n <div class=\"modal-body\">\r\n <div class=\"scheme-option\" *ngFor=\"let scheme of schemeList\" (click)=\"redeemScheme(scheme, false)\"\r\n [style.borderColor]=\"cartInfo.billdetails.orraSchemeCode ? styles?.background?.color : ''\">\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\" id=\"flexRadioDefault2\">\r\n </div>\r\n <div class=\"right-side\">\r\n <div class=\"scheme-name\">\r\n <div class=\"scheme-title\">Individual Investment Scheme</div>\r\n <div class=\"scheme-monthly\">\u20B98000/M</div>\r\n </div>\r\n <div class=\"scheme-details\">\r\n <span class=\"scheme-id\">GPP Id: {{scheme.GPPId}}</span>\r\n <!-- <span class=\"scheme-maturity\">Maturity Date: 12 April 2024</span> -->\r\n </div>\r\n <div class=\"scheme-amount\">\u20B9{{scheme.amount}}</div>\r\n </div>\r\n </div>\r\n </label>\r\n </div>\r\n <div class=\"reedem_error d-flex justify-content-center align-items-center\" *ngIf=\"showReedemError\">\r\n Please add more \u20B9{{vaildAmount}} to reedem this scheme\r\n </div>\r\n </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.reedem-section{padding:10px 15px;border-radius:15px;background:#f6f3f9;box-shadow:#b2b2ca80 2px 2px 6px;font-weight:700;font-size:13px}.redeem-section-text{font-size:.9rem;font-weight:700}.form-check-input:checked{background-color:#28a745!important;border-color:#28a745!important}.form-check-input:focus{border-color:#28a745!important;outline:0;box-shadow:none!important}.close-btn{background:none;border:none;font-size:24px;color:#6b7280;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.close-btn:hover{color:#374151}.select_matured_text{font-size:.8rem!important;margin-top:10px;color:#05aacf}.position-relative{position:relative}.cart-parent{display:flex;margin-top:15px}.left-panel{width:65%;padding-right:5rem;border-right:1px solid #E9E9E9}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;background:#f9f9fa;box-shadow:#9999994d 2px 2px 6px}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%;padding-left:5rem}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.coupons{display:flex;justify-content:space-between;padding:10px;border-radius:4px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px;margin-top:10px;cursor:pointer}.coupon-list-section{padding:15px;width:400px;z-index:10000001!important}.coupon-list-section .search{padding:8px;border:1px solid lightgray;border-radius:20px;display:flex;justify-content:space-between}.coupon-list-section input{border:none;outline:none;width:90%}.coupon-list-section .coupon-list{height:60vh;width:100%}.item-parent{margin:10px 0;min-height:120px}.lh-23{line-height:23px;margin-left:10px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer;font-size:18px}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.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}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.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:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important;height:calc(100vh - 170px)}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.see-live-btn{white-space:nowrap!important}.left-panel{width:100%;padding-right:0rem}.right-panel{width:100%;z-index:1000;padding-left:0rem}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap;display:none}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}.empty-cart-container{height:calc(100vh - 130px)}.coupons-listing-section{width:100vw!important}.checkoutPage{flex-direction:column}.checkout-left-panel,.checkout-right-panel{width:100%!important}}.mobile-fixed{color:#fff}.coupons-listing-section{height:100vh;padding-top:0;position:relative;width:390px;z-index:100;background:#d3d3d354}.coupons-listing-section .coupon-heading{display:flex;align-items:center;background-color:#fff;padding:15px 20px;width:100%;box-sizing:border-box}.coupons-listing-section .coupon-heading img{height:15px;width:15px;position:relative;top:2px;cursor:pointer}.coupons-listing-section .coupon-heading .header-text{font-size:16px;color:#000;font-weight:600;margin-left:15px;position:relative;top:-3px;right:15px;cursor:pointer}.coupons-listing-section .coupon-search-sec{width:90%;box-sizing:border-box;margin:10px auto;border:1px solid lightgray;padding:10px;border-radius:10px;background-color:#fff;display:flex;font-size:16px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec input{border:none;outline:none;background-color:transparent;width:95%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-search-sec input:focus{font-size:14px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec .back-btn{position:relative;top:3px;cursor:pointer}.coupons-listing-section .coupon-search-sec .apply-btn-search{font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing{height:72%;overflow-y:auto;width:90%;margin:20px auto}.coupons-listing-section .coupon-listing .coupon-details{padding:15px;margin-bottom:15px;background-color:#edfffa;border-radius:10px;border:1px solid lightgray}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading{display:flex;flex-direction:column;gap:25px}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief{display:flex;justify-content:space-between;width:100%}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-name{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-desc{padding:5px 0;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .show-details-btn{cursor:pointer}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec{display:flex;justify-content:flex-end}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec .apply-offer-btn{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-toggle-details-btn{text-align:left;text-decoration:underline;width:100%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details-divider{border-top:2px solid lightgray;opacity:.3;margin:15px 0}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-terms{font-size:14px;color:#000;font-weight:400}.empty-screen-container{height:100%;width:85%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-screen-container .empty-screen__primary-text{font-size:22px;color:#000;font-weight:400}.empty-screen-container .empty-screen__secondary-text{text-align:center;padding:10px 0;font-size:16px;color:#000;font-weight:400}.empty-screen-container .empty-screen__button{width:90%;background-color:#fff;border-radius:8px;text-align:center;padding:10px;margin:10px auto 0;cursor:pointer;font-size:18px;color:#000;font-weight:400}.box-shadow{box-shadow:#00000029 0 1px 4px}.main-content{border-radius:12px;padding:0 30px 30px;width:100%;overflow:scroll;height:calc(100vh - 150px)}.delivery-options{display:flex;gap:20px;margin-bottom:30px}.delivery-option{padding:12px 24px;border:2px solid #e0e0e0;border-radius:25px;background:#fff;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:500;transition:all .2s}.delivery-option.active{background:#f0e6ff;border-color:#8b5cf6;color:#7c3aed}.delivery-option:hover{border-color:silver}.delivery-icon{width:16px;height:16px;background:#8b5cf6;border-radius:3px}.section-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.shipping-info{border-radius:10px;padding:20px;margin-bottom:20px;border:1px solid rgb(238,232,255);box-shadow:#0000000a 0 4px 8px}.delivery-date{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.delivery-date-text{color:#666;font-weight:500}.change-date-btn{color:#e91e63;background:none;border:none;font-weight:600;cursor:pointer;text-transform:uppercase;font-size:12px;letter-spacing:.5px}.address-info{margin-bottom:15px}.address-name{font-weight:700;margin-bottom:8px;color:#000}.address-details{color:#666;margin-bottom:8px}.mobile-number{font-weight:700;color:#000;font-size:15px}.change-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}.change-address-btn:hover{border-color:#8b5cf6;color:#8b5cf6}.billing-section{margin-top:40px}.billing-options{display:flex;flex-direction:column;gap:15px;margin-top:20px}.billing-option{display:flex;align-items:center;gap:12px;padding:15px;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s}.billing-option.active{background:#f0e6ff;border-color:#8b5cf6}.radio-btn{width:20px;height:20px;border:2px solid #e0e0e0;border-radius:50%;position:relative}.billing-option.active .radio-btn{border-color:#8b5cf6}.billing-option.active .radio-btn:after{content:\"\";width:10px;height:10px;background:#8b5cf6;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.order-summary{border-radius:12px;padding:25px;width:75%}.summary-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.product-item{display:flex;gap:15px;margin-bottom:20px;border-bottom:1px solid #f0f0f0;border-radius:7px;background:#fff;padding:15px}.product-item:last-of-type{border-bottom:none;margin-bottom:30px;padding-bottom:0}.product-image{max-width:110px;width:100%;height:100%;border-radius:8px}.product-details{flex:1}.product-name{font-weight:500;margin-bottom:4px;color:#2d3748;font-size:14px}.product-quantity{color:#666;font-size:12px;margin-bottom:8px}.product-price{font-weight:600;color:#2d3748}.delivery-info{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:#8b5cf6}.delivery-icon-small{width:12px;height:12px;background:#8b5cf6;border-radius:2px}.price-breakdown{border-top:1px solid #f0f0f0;padding-top:20px}.price-row{display:flex;justify-content:space-between;margin-bottom:12px;color:#666}.price-row.total{font-weight:600;color:#2d3748;font-size:16px;margin-top:15px;padding-top:15px;border-top:1px solid #f0f0f0}.discount{color:#22c55e!important}@media (max-width: 768px){.container{grid-template-columns:1fr;padding:15px;gap:20px}.main-content,.order-summary{padding:20px;width:100%}.delivery-options{flex-direction:column;gap:10px}}.checkout-left-panel{width:65%;display:flex;justify-content:center}.checkout-right-panel{width:35%;display:flex;justify-content:center;background-color:#f9f9fa}.checkout-product{max-height:50vh;overflow:scroll}.mt-1{margin-top:1rem!important}.payment-btn{box-shadow:#0000000a 0 4px 8px}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px;height:25vh!important;margin-bottom:20px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}.change-pincode{display:flex;gap:10px}.change-pincode mat-icon{font-size:18px;align-items:center;justify-content:center;display:flex}.change-pincode span{font-size:14px}.fs-13{font-size:13px}.container{max-width:1200px;margin:0 auto;padding:24px;display:flex;gap:24px}.main-content{background:#fff;border-radius:12px;width:66%}.promo-banner{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;box-shadow:#9999994d 2px 2px 6px;border-radius:5px}.promo-text h3{font-size:.9rem!important;margin-bottom:4px}.promo-text p{font-size:1rem;font-size:.9rem!important;margin-bottom:0!important}.see-live-btn{background:#fff;border:1px solid #000;color:#000;padding:8px 16px;border-radius:6px;font-size:12px!important;cursor:pointer;align-items:center;width:max-content!important}.cart-items{padding:20px}.cart-item{display:flex;gap:16px;padding:20px 0;border-bottom:2px solid white;position:relative}.cart-item:last-child{border-bottom:none}.item-image{width:24%;height:154px;border-radius:8px;object-fit:cover;background:#fff;display:flex;align-items:center;justify-content:center}.item-details{flex:1}.item-title{font-size:.9rem;font-weight:500;color:#111827;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px;margin-bottom:8px}.current-price{font-size:1rem;font-weight:600;color:#111827}.original-price{font-size:1rem;color:#9ca3af;text-decoration:line-through}.discount{background:#fef3c7;color:#d97706;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.item-code{font-size:12px;color:#9ca3af;margin-bottom:8px}.item-options{display:flex;gap:16px;font-size:14px;color:#6b7280;margin-bottom:12px}.delivery-info{font-size:12px;color:#8b5cf6}.pickup-info{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:5px 15px;margin-top:12px;display:flex;align-items:center;cursor:pointer;width:max-content;gap:20px}.pickup-text{font-size:.9rem;color:#374151}.remove-btn{position:absolute;top:16px;right:0;width:20px!important;height:20px;background:#000;color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px!important}.sidebar{display:flex;flex-direction:column;gap:16px;width:34%}.coupon-section{border-radius:12px;padding:10px 15px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;box-shadow:#b2b2ca80 2px 2px 6px}.scheme-section{border-radius:12px;padding:10px 15px;cursor:pointer;box-shadow:#b2b2ca80 2px 2px 6px}.coupon-left{display:flex;align-items:center;gap:12px}.coupon-icon{width:24px;height:24px;background:#8b5cf6;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}.coupon-text{color:#000;font-weight:700;font-size:.9rem}.delivery-section{background:#fff;border-radius:12px;padding:10px 15px;box-shadow:#b2b2ca80 2px 2px 6px;background:#f6f3f9}.delivery-header{display:flex;align-items:center;gap:12px;margin-bottom:4px}.delivery-header span{font-size:.9rem;font-weight:700}.delivery-header mat-icon{width:20px;height:20px;font-size:17px;position:relative;top:2px}.delivery-icon{width:20px;height:20px;background:#8b5cf6;border-radius:50%}.pincode{font-weight:600;color:#111827}.change-link{color:#ec4899;font-size:.9rem;text-decoration:none;margin-left:auto}.summary-section{background:#fff;border-radius:12px;padding:20px;background:#f6f3f9;box-shadow:#b2b2ca80 2px 2px 6px}.summary-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.summary-label{color:#6b7280;font-size:14px;font-weight:700}.summary-value{font-size:14px;color:#111827}.savings{color:#10b981}.apply-coupon{color:#8b5cf6;cursor:pointer}.free{color:#10b981}.total-row{border-top:2px solid white;padding-top:15px;margin-top:15px}.total-label{font-weight:600;font-size:16px;color:#111827}.total-value{font-weight:700;font-size:18px;color:#111827}.place-order-btn{width:100%;background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;border:none;border-radius:12px;padding:9px 10px;font-size:.9rem!important;font-weight:600;cursor:pointer;margin-top:10px;text-transform:uppercase}.place-order-btn:hover{opacity:.9}.chain-icon,.earring-icon{width:60px;height:60px;filter:sepia(1) hue-rotate(30deg) saturate(2)}.item-img{width:100%;height:100%;object-fit:cover}.mt-0{margin-top:0!important}select{outline:none;border-radius:5px;padding:2px;width:20%;border:none;box-shadow:#9999994d 2px 2px 6px;cursor:pointer}.cart-tab-parent{display:flex;justify-content:center}.cart-tabs{gap:10px;display:flex;justify-content:center;width:max-content;border-radius:10px}.cart-tabs div{padding:7px 10px;cursor:pointer}.selected-cart-tab{background:#fff;margin:2px;border-radius:10px;color:#000!important}.checkout-main-content{width:50%;padding:30px;border-radius:12px}@media screen and (max-width: 475px){.main-content{padding:0;height:auto!important}.no-items{height:86vh;overflow:hidden;margin:0}.checkout-main-content{width:100%}.container{padding:0!important}.cart-items{padding:10px}.item-image{width:86px;height:86px}.pickup-info{display:none}.container{display:flex;flex-direction:column}.promo-banner{gap:10px}select{width:50%}.main-content,.sidebar{width:100%}}.group_invest{color:#000;font-size:.8rem}.reedem_error{color:red}.group_invest span{color:#05aacf}.redeem_amount{padding:2%;border-radius:4px;background:#fff;margin-top:2%;color:#000;font-size:.8rem}.redeem_amount span{color:#0dc577}.modal-body{padding-bottom:0;overflow-y:scroll;max-height:300px;padding:0!important}.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{justify-content:space-between;padding:10px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff;width:100%}.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;gap:25px;margin-bottom:20px}.scheme-name{display:flex;justify-content:space-between}.scheme-details span{font-size:12px;color:#0000004d}.scheme-monthly{font-size:14px;font-weight:600;color:#111827;min-width:100px;text-align:right}.right-side{width:90%}.scheme-amount{font-weight:700}@media screen and (min-width: 700px){.cart-items{max-height:500px;overflow:scroll}}\n"], dependencies: [{ 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { 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$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "directive", type:
9062
9062
  //DIRECTIVE
9063
9063
  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: "ngmodule", type: ToastModule }, { kind: "component", type: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
@@ -9087,12 +9087,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
9087
9087
  ButtonEditorDirective,
9088
9088
  ColorDirective
9089
9089
  ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\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=\"data\">\r\n <section [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\"\r\n [attr.class]=\"isMobile ? 'py-5 position-relative' : 'position-relative'\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\"\r\n [ngClass]=\"!responseData?.orderedItems?.length ? 'no-items' : ''\">\r\n <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\"\r\n [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\"\r\n *ngIf=\"responseData?.orderedItems?.length && currentTab === 'ADDRESS'\">\r\n <span class=\"timeline\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline isActive\">Address</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline\" style=\"cursor: auto;\">Payment</span>\r\n </div>\r\n <div class=\"cart-tab-parent w-100\" *ngIf=\"currentTab == 'BAG' && ecomConfigs?.appointmentBookingEnabled\">\r\n <div class=\"cart-tabs\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n <div class=\"selected-cart-tab\" [ngClass]=\"{'selected-cart-tab': cartType==='SHOPPING'}\"\r\n (click)=\"cartType='SHOPPING'\">Shopping Cart ({{responseData?.orderedItems?.length ?? 0}})</div>\r\n <div [ngClass]=\"{'selected-cart-tab': cartType==='TRIAL'}\" (click)=\"cartType='TRIAL'\">Trial Cart\r\n ({{trialCartItem?.length ?? 0}})</div>\r\n </div>\r\n </div>\r\n <div class=\"cart-parent\" [spacingHorizontal]=\"stylesLayout\" *ngIf=\"currentTab === 'BAG'\" [id]=\"data?.id\"\r\n [simpoAnimation]=\"styles?.animation\">\r\n <ng-container>\r\n <!-- <div class=\"left-panel\">\r\n <div class=\"my-bag\">\r\n My Bag&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n </div>\r\n <div class=\"cart-items box-shadow\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n <div class=\"item-parent d-flex\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n alt=\"\" (click)=\"goToProductDetails(item)\">\r\n </div>\r\n <div class=\"col-md-6 h-100\" [style.width.px]=\"isMobile ? '200' : ''\" style=\"margin-left: px;\">\r\n <div class=\"lh-23\">\r\n <div class=\"item-name trim-text heading-large\">{{item.itemName}}</div>\r\n <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.discountedPrice ?? item.sellingPrice) | number:\r\n '1.0-2'}}\r\n </div>\r\n <ng-container *ngIf=\"item.itemVariant\">\r\n <div class=\"d-flex align-items-center\"\r\n *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\r\n <strong class=\"fw-bold\">{{ varient }} : </strong>\r\n {{ item.itemVariant.properties[varient] | uppercase }}\r\n </div>\r\n </ng-container>\r\n <div class=\"item-quantity\">\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4 position-relative\" style=\"margin-left: auto; width: 0px; \">\r\n <div class=\"item-price\"><span [innerHTML]='currency'></span> {{((item.discountedPrice ??\r\n item.sellingPrice) * item.quantity) | number: '1.0-2'}}</div>\r\n <div>\r\n <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\"\r\n [style.right.px]=\"isMobile ? '5' : '0'\">delete</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n </ng-container>\r\n </div>\r\n </div> -->\r\n <!-- <div class=\"right-panel\">\r\n <div class=\"coupons box-shadow\" (click)=\"openDialog(CouponList)\">\r\n <ng-container *ngIf=\"!responseData.billdetails?.couponId\">\r\n <div class=\"d-flex flex-column\">\r\n <span style=\"font-weight: 600;\">Apply Coupon</span>\r\n <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\r\n </div>\r\n <div [style.color]=\"styles?.background?.accentColor\" style=\"font-weight: 600;\">Apply</div>\r\n </ng-container>\r\n <ng-container *ngIf=\"responseData.billdetails?.couponId\">\r\n <div class=\"d-flex flex-column\">\r\n <span style=\"font-weight: 600;\">Coupon</span>\r\n <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\r\n </div>\r\n <div [style.color]=\"styles?.background?.accentColor\" (click)=\"removeCoupon($event)\">Remove</div>\r\n </ng-container>\r\n </div>\r\n <div class=\"price-details box-shadow\">\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\">Total Price</div>\r\n <div class=\"price-value\"><span [innerHTML]='currency'></span>\r\n {{(responseData?.billdetails?.totalNetValue\r\n ?? 0) | number: '1.0-2'}}</div>\r\n </div>\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\">Total Tax</div>\r\n <div class=\"price-value\"><span [innerHTML]='currency'></span> {{((!responseData.billdetails?.couponId ?\r\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\r\n number:\r\n '1.0-2'}}</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\r\n |\r\n number: '1.0-2'}}</div>\r\n </div>\r\n <div class=\"price-parent-block\"\r\n *ngIf=\"responseData?.billdetails?.discountAmount && subIndustryName != 'Ecommerce Jewellery'\">\r\n <div class=\"price-type\">Discount Amount</div>\r\n <div class=\"price-value\"><span [innerHtml]='currency'></span>\r\n {{responseData?.billdetails?.discountAmount\r\n | number: '1.0-2'}}</div>\r\n </div>\r\n <hr>\r\n <div class=\"price-parent-block\">\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>\r\n {{((responseData?.totalAmount ?? 0) - (responseData?.billdetails?.discountAmount ?? 0)) | number:\r\n '1.0-2'}}</div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"button-parent\">\r\n <ng-container>\r\n <button class=\"btn mobile-fixed\" (click)=\"!edit ? proceedToCheckout() : ''\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\">{{data?.action?.buttons?.[0]?.content?.label ??\r\n 'Checkout\r\n Cart'}}\r\n </button>\r\n <button class=\"btn\" (click)=\"!edit ? proceedToListPage() : ''\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(1)\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n Shopping'}}</button>\r\n </ng-container>\r\n </div>\r\n\r\n </div> -->\r\n <ng-container *ngIf=\"cartType === 'SHOPPING'\">\r\n <ng-container\r\n *ngTemplateOutlet=\"(responseData?.orderedItems?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"cartType === 'TRIAL'\">\r\n <ng-container *ngTemplateOutlet=\"(trialCartItem?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\r\n </ng-container>\r\n <!-- <ng-container *ngTemplateOutlet=\"CARTPAGE\"></ng-container> -->\r\n </ng-container>\r\n <!-- <ng-container *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && cartType==='TRIAL'\">\r\n <ng-container *ngTemplateOutlet=\"TRIAL_CART\">\r\n </ng-container>\r\n </ng-container> -->\r\n </div>\r\n <div class=\"d-flex checkoutPage\"\r\n *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && currentTab === 'ADDRESS'\">\r\n <ng-container *ngTemplateOutlet=\"CHECKOUTPAGE\">\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [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\r\n </section>\r\n </ng-container>\r\n <ng-container *ngIf=\"!data\">\r\n <section class=\"cart-window\">\r\n <div class=\"heading-large lh-2 mb-3 header-sec\">\r\n <div class=\"d-flex align-items-center\">\r\n <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\r\n <span>Your Cart</span>\r\n </div>\r\n <div class=\"saving\"></div>\r\n </div>\r\n <div class=\"offers\">\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\r\n <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\r\n <span>Avail Offers / Coupons</span>\r\n </div>\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n <div class=\"small-items\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems\">\r\n <div class=\"small-item\">\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"small-product-img\"\r\n [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n (click)=\"goToProductDetails(item)\">\r\n </div>\r\n <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\r\n <div class=\"small-item-quantity\">\r\n <span class=\"cursor\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\">+</span>\r\n </div>\r\n <div class=\"small-item-price\">\r\n <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.sellingPrice) | number: '1.0-2'}}\r\n </div>\r\n <!-- <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"fotter-sec\">\r\n <div class=\"delivery-add d-flex\">\r\n <mat-icon>home</mat-icon>\r\n <div class=\"address\">Tetsting</div>\r\n </div>\r\n <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span\r\n style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span>\r\n {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\r\n </div>\r\n </section>\r\n </ng-container>\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<ng-template #CouponList>\r\n <section class=\"coupons-listing-section\">\r\n <div class=\"coupon-heading\">\r\n <div class=\"back-btn\" (click)=\"closeDialogRef()\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"header-text\">Apply Coupon</div>\r\n </div>\r\n <!-- <div class=\"coupon-search-sec\">\r\n <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\r\n <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\r\n </div> -->\r\n <div class=\"coupon-listing\">\r\n <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\r\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\r\n <div class=\"coupon-details\"\r\n [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\">\r\n <div class=\"details__coupon-heading\">\r\n <div class=\"coupon-brief\">\r\n <div class=\"coupon-brief__left-sec\">\r\n <div class=\"coupon-name\" [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\r\n {{ couponDetails.couponCode | uppercase }}</div>\r\n <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\r\n </div>\r\n <div class=\"coupon-brief__right-sec\">\r\n <div class=\"apply-offer-btn\" [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\r\n [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\"\r\n (click)=\"applyCoupon(couponDetails)\">Apply</div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\r\n <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\r\n <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\r\n </div> -->\r\n </div>\r\n <ng-container *ngIf=\"couponDetails.status\">\r\n <div class=\"details-divider\"></div>\r\n <ul class=\"details__coupon-terms\">\r\n <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\r\n </ul>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #showEmptyScreen>\r\n <div class=\"empty-screen-container\">\r\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n <div class=\"empty-screen__primary-text\">No Coupon Available</div>\r\n <div class=\"empty-screen__secondary-text\">\r\n Looks like there are no coupons at the moment\r\n </div>\r\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\r\n </div>\r\n </ng-template>\r\n </div>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #CARTPAGE>\r\n <div class=\"container\">\r\n <div class=\"main-content\">\r\n <div class=\"promo-banner\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\r\n *ngIf=\"cartType === 'SHOPPING' && ecomConfigs?.videoCallEnabled\" [simpoColor]=\"styles?.background?.color\">\r\n <div class=\"promo-text\">\r\n <h3>See It Before You Buy It</h3>\r\n <p>Experience our designs in detail via video call</p>\r\n </div>\r\n <button class=\"see-live-btn\" (click)=\"scheduleVideoCall(responseData?.orderedItems)\">\r\n \uD83D\uDCF9 SEE IT LIVE\r\n </button>\r\n </div>\r\n\r\n <div class=\"cart-items\">\r\n <ng-container\r\n *ngTemplateOutlet=\"CARTITEM;context:{data: cartType === 'SHOPPING' ? responseData?.orderedItems : trialCartItem}\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"sidebar\">\r\n <div class=\"reedem-section d-flex flex-column align-items-center\" *ngIf=\"cartType != 'TRIAL' && getUrl()\">\r\n <div class=\"justify-content-between d-flex align-items-center w-100 redeem-section-text\">Redeem Section Amount\r\n <div class=\"toogle-switch\">\r\n <div class=\"form-check form-switch\">\r\n <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" role=\"switch\" id=\"flexSwitchCheckChecked\"\r\n [checked]=\"selectMatureScheme\" (change)=\"onToggleChange()\">\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"select_matured_text w-100 text-start cursor-pointer\"\r\n *ngIf=\"selectMatureScheme && !selectedRedemption\" (click)=\"selectScheme()\">\r\n Select Matured Scheme\r\n </div> -->\r\n <!-- <div class=\"select_matured_text d-flex flex-column gap-2 w-100 text-start cursor-pointer\"\r\n *ngIf=\"selectedRedemption\">\r\n Selected Scheme\r\n <div class=\"d-flex w-100 justify-content-between align-items-center group_invest\">Group Investment\r\n scheme-5000/M <span>Change</span></div>\r\n <div class=\"d-flex justify-content-between align-items-center w-100 redeem_amount\">Redeemable Amount\r\n <span>\u20B9{{selectedRedmpationData.selectedAmount}}</span>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div class=\"scheme-section\" *ngIf=\"selectMatureScheme\">\r\n <ng-container *ngTemplateOutlet=\"SCHEME_REDEMPTION\"></ng-container>\r\n </div>\r\n <div class=\"coupon-section\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" *ngIf=\"cartType === 'SHOPPING'\"\r\n (click)=\"openDialog(CouponList)\" [simpoColor]=\"styles?.background?.color\">\r\n <div class=\"coupon-left\">\r\n <div class=\"coupon-icon\">%</div>\r\n <span class=\"coupon-text\" *ngIf=\"!responseData.billdetails?.couponId\">Apply Coupon</span>\r\n <span class=\"coupon-text\" *ngIf=\"responseData.billdetails?.couponId\">Coupon Applied</span>\r\n </div>\r\n <span *ngIf=\"!responseData.billdetails?.couponId\">\u25B6</span>\r\n <span *ngIf=\"responseData.billdetails?.couponId\"\r\n (click)=\"removeCoupon($event)\"><mat-icon>close</mat-icon></span>\r\n </div>\r\n\r\n <div class=\"delivery-section\" *ngIf=\"getUrl()\">\r\n <div class=\"delivery-header\">\r\n <mat-icon>gps_fixed</mat-icon>\r\n <span *ngIf=\"cartType === 'SHOPPING'\">Delivering to</span>\r\n <span *ngIf=\"cartType === 'TRIAL'\">Trial Location at</span>\r\n <span class=\"pincode\">{{pincode}}</span>\r\n <!-- <a class=\"change-link\">Change Pincode</a> -->\r\n </div>\r\n </div>\r\n\r\n <div class=\"summary-section\">\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span class=\"summary-label\">Total Price</span>\r\n <span class=\"summary-value\">\u20B9{{(responseData?.billdetails?.totalNetValue\r\n ?? 0) | number: '1.0-2'}}</span>\r\n </div>\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span class=\"summary-label\">Total Tax</span>\r\n <span class=\"summary-value\">\u20B9{{((!responseData.billdetails?.couponId ?\r\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\r\n number:\r\n '1.0-2'}}</span>\r\n </div>\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\r\n <span class=\"summary-label\">Redeem Amount</span>\r\n <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\r\n '1.0-2'}}</span>\r\n </div>\r\n <div class=\"summary-row\"\r\n *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n <span class=\"summary-label\">Delivery Charge</span>\r\n <span class=\"summary-value\">\u20B9{{responseData.billdetails.deliveryCharges\r\n |\r\n number: '1.0-2'}}</span>\r\n </div>\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.discountAmount \">\r\n <span class=\"summary-label\">Discount Amount</span>\r\n <span class=\"summary-value savings\"> \u20B9{{responseData?.billdetails?.discountAmount\r\n | number: '1.0-2'}}</span>\r\n </div>\r\n <!-- <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span class=\"summary-label\">Coupon Discount</span>\r\n <span class=\"summary-value apply-coupon\">Apply Coupon</span>\r\n </div> -->\r\n <!-- <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span class=\"summary-label\">Shipping (Standard)</span>\r\n <span class=\"summary-value free\">Free</span>\r\n </div> -->\r\n <div class=\"summary-row total-row\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <span class=\"total-label\">Total Cost</span>\r\n <span class=\"total-value\">\u20B9{{ responseData?.totalAmount | \r\n number: '1.0-2' }}</span>\r\n </div>\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'TRIAL'\">\r\n <span class=\"summary-label\">Free Trial</span>\r\n <span class=\"summary-value savings\">\u20B90</span>\r\n </div>\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'TRIAL'\">\r\n <span class=\"summary-label\">Service Charge</span>\r\n <span class=\"summary-value savings\">Free</span>\r\n </div>\r\n <div class=\"summary-row total-row\" *ngIf=\"cartType === 'TRIAL'\">\r\n <span class=\"total-label\">Total Cost</span>\r\n <span class=\"total-value\">\u20B90 </span>\r\n </div>\r\n </div>\r\n <button class=\"place-order-btn\" (click)=\"proceedToListPage()\" simpoButtonDirective\r\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n *ngIf=\"cartType === 'SHOPPING'\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n Shopping'}}</button>\r\n <button class=\"place-order-btn mt-0\" (click)=\"proceedToCheckout()\" simpoButtonDirective\r\n *ngIf=\"cartType === 'SHOPPING'\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout\r\n Cart'}}</button>\r\n <button class=\"place-order-btn mt-0\" simpoButtonDirective *ngIf=\"cartType === 'TRIAL'\"\r\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\" (click)=\"bookAppointment()\">BOOK\r\n APPOINTMENT</button>\r\n\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #CHECKOUTPAGE>\r\n <div class=\"checkout-left-panel\">\r\n <div class=\"checkout-main-content\">\r\n <!-- <div class=\"delivery-options\">\r\n <div class=\"delivery-option active\">\r\n <div class=\"delivery-icon\"></div>\r\n HOME DELIVERY\r\n </div>\r\n <div class=\"delivery-option\">\r\n <div class=\"delivery-icon\"></div>\r\n STORE PICK-UP\r\n </div>\r\n </div> -->\r\n\r\n <div class=\"section-title\">Shipping Address</div>\r\n\r\n <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\r\n <div class=\"address-info\">\r\n <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\r\n <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\r\n {{defaultAddress?.stateName}}</div>\r\n <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"addLinks h-100\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\r\n <mat-icon>add</mat-icon>\r\n </div>\r\n\r\n <button class=\"change-address-btn\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">CHANGE OR ADD ADDRESS</button>\r\n\r\n <div class=\"btn w-100 mt-1 payment-btn\" (click)=\"proceedToPayment()\" simpoButtonDirective *ngIf=\"defaultAddress\"\r\n [buttonStyle]=\"data?.action?.buttons?.[2]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"styles?.background\">\r\n {{data?.action?.buttons?.[2]?.content?.label ?? 'Procced To Payment'}}\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"checkout-right-panel\">\r\n <div class=\"order-summary\">\r\n <div class=\"summary-title\">Order Summary</div>\r\n\r\n <div class=\"checkout-product\">\r\n <div class=\"product-item\" *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n <img [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-image\"\r\n alt=\"\">\r\n <div class=\"product-details\">\r\n <div class=\"product-name\">{{item.itemName}}</div>\r\n <div class=\"product-quantity\">Quantity: {{item.quantity}}</div>\r\n <div class=\"product-price\">\u20B9{{(item.sellingPrice * item.quantity) | number: '1.0-2'}}</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"price-breakdown\">\r\n <div class=\"price-row\">\r\n <span>Total Price</span>\r\n <span>\u20B9{{(responseData?.billdetails?.totalNetValue\r\n ?? 0) | number: '1.0-2'}}</span>\r\n </div>\r\n <div class=\"price-row\">\r\n <span>Total Tax</span>\r\n <span>\u20B9{{((!responseData.billdetails?.couponId ?\r\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\r\n number:\r\n '1.0-2'}}</span>\r\n </div>\r\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\r\n <span class=\"summary-label\">Redeem Amount</span>\r\n <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\r\n '1.0-2'}}</span>\r\n </div>\r\n\r\n <div class=\"price-row discount\"\r\n *ngIf=\"responseData?.billdetails?.discountAmount && subIndustryName != 'Ecommerce Jewellery'\">\r\n <span>Coupon Discount</span>\r\n <span>- \u20B9{{responseData?.billdetails?.discountAmount\r\n | number: '1.0-2'}}</span>\r\n </div>\r\n <div class=\"price-row\"\r\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n <span>Delivery Charge</span>\r\n <span>{{responseData.billdetails.deliveryCharges\r\n |\r\n number: '1.0-2'}}</span>\r\n </div>\r\n <div class=\"price-row total\">\r\n <span>TOTAL AMOUNT</span>\r\n <span>\u20B9{{(responseData?.totalAmount ?? 0) | number:\r\n '1.0-2'}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #CARTITEM let-products=\"data\">\r\n <div class=\"cart-item\" *ngFor=\"let item of products\">\r\n <div class=\"item-image\">\r\n <!-- <div class=\"earring-icon\">\uD83E\uDD8B</div> -->\r\n <img class=\"item-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\r\n (click)=\"goToProductDetails(item)\">\r\n </div>\r\n <div class=\"item-details\">\r\n <h3 class=\"item-title\">{{item.itemName}}</h3>\r\n <div class=\"item-price\">\r\n <span class=\"current-price\">\u20B9{{item.sellingPrice | number: '1.0-2'}}</span>\r\n <span class=\"original-price\" *ngIf=\"item.value - item.discountedPrice > 2\">\u20B9{{item.value | number:\r\n '1.0-2'}}</span>\r\n <span class=\"discount\" *ngIf=\"item.value - item.discountedPrice > 2\">Save \u20B9{{item.value -\r\n item.sellingPrice | number: '1.0-2'}}</span>\r\n </div>\r\n <div class=\"item-options\" *ngIf=\"cartType === 'SHOPPING'\">\r\n <select name=\"\" id=\"\" (change)=\"changeQuantity($event, item)\" [(ngModel)]=\"item.quantity\">\r\n <option [value]=\"value\" *ngFor=\"let value of quantity\">{{value}}</option>\r\n </select>\r\n </div>\r\n <div class=\"item-options\" *ngIf=\"item.itemVariant\">\r\n <span *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">{{ varient }}: {{\r\n item.itemVariant.properties[varient] | uppercase }}</span>\r\n </div>\r\n <div class=\"delivery-info\" *ngIf=\"cartType === 'SHOPPING' && getUrl()\">Delivery by - Tomorrow 6PM-9PM</div>\r\n <div class=\"delivery-info\" *ngIf=\"cartType === 'TRIAL'\">Available to try from tomorrow</div>\r\n <div class=\"pickup-info\" *ngIf=\"cartType === 'SHOPPING' && getUrl()\">\r\n <span class=\"pickup-text\">\uD83D\uDCCD Pickup today from 6 Stores nearby</span>\r\n <span>\u25B6</span>\r\n </div>\r\n </div>\r\n <button class=\"remove-btn\" (click)=\"removeItem(item)\">\u2715</button>\r\n </div>\r\n\r\n <!-- <div class=\"cart-item\">\r\n <div class=\"item-image\">\r\n <div class=\"chain-icon\">\uD83D\uDD17</div>\r\n </div>\r\n <div class=\"item-details\">\r\n <h3 class=\"item-title\">Lucid Cable Gold Chain</h3>\r\n <div class=\"item-price\">\r\n <span class=\"current-price\">\u20B921,163</span>\r\n </div>\r\n <div class=\"item-options\">\r\n <span>Length: 16</span>\r\n <span>Size: XXL</span>\r\n <span>Color: Black</span>\r\n </div>\r\n <div class=\"delivery-info\">Delivery by - Tomorrow 6PM-9PM</div>\r\n <div class=\"pickup-info\">\r\n <span class=\"pickup-text\">\uD83D\uDCCD Pickup today from 4 Stores nearby</span>\r\n <span>\u25B6</span>\r\n </div>\r\n </div>\r\n <button class=\"remove-btn\">\u2715</button>\r\n </div>\r\n\r\n <div class=\"cart-item\">\r\n <div class=\"item-image\">\r\n <div class=\"chain-icon\">\uD83D\uDD17</div>\r\n </div>\r\n <div class=\"item-details\">\r\n <h3 class=\"item-title\">Lucid Cable Gold Chain</h3>\r\n <div class=\"item-price\">\r\n <span class=\"current-price\">\u20B921,163</span>\r\n </div>\r\n <div class=\"item-options\">\r\n <span>Length: 16</span>\r\n <span>Size: XXL</span>\r\n <span>Color: Black</span>\r\n </div>\r\n <div class=\"delivery-info\">Delivery by - Tomorrow 6PM-9PM</div>\r\n <div class=\"pickup-info\">\r\n <span class=\"pickup-text\">\uD83D\uDCCD Pickup today from 4 Stores nearby</span>\r\n <span>\u25B6</span>\r\n </div>\r\n </div>\r\n <button class=\"remove-btn\">\u2715</button>\r\n </div> -->\r\n</ng-template>\r\n\r\n<ng-template #EMPTYITEM>\r\n <section class=\"empty-cart w-100 d-flex align-items-center justify-content-center\">\r\n <div class=\"empty-cart-container d-flex flex-column\">\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"data?.content?.image\" [sectionId]=\"data?.id\">\r\n </div>\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\"\r\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <button class=\"place-order-btn w-25 mx-auto\" (click)=\"proceedToListPage()\" simpoButtonDirective\r\n [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\r\n Shopping'}}</button>\r\n </div>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #SCHEME_REDEMPTION>\r\n <div class=\"modal-body\">\r\n <div class=\"scheme-option\" *ngFor=\"let scheme of schemeList\" (click)=\"redeemScheme(scheme, false)\"\r\n [style.borderColor]=\"cartInfo.billdetails.orraSchemeCode ? styles?.background?.color : ''\">\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\" id=\"flexRadioDefault2\">\r\n </div>\r\n <div class=\"right-side\">\r\n <div class=\"scheme-name\">\r\n <div class=\"scheme-title\">Individual Investment Scheme</div>\r\n <div class=\"scheme-monthly\">\u20B98000/M</div>\r\n </div>\r\n <div class=\"scheme-details\">\r\n <span class=\"scheme-id\">GPP Id: {{scheme.GPPId}}</span>\r\n <!-- <span class=\"scheme-maturity\">Maturity Date: 12 April 2024</span> -->\r\n </div>\r\n <div class=\"scheme-amount\">\u20B9{{scheme.amount}}</div>\r\n </div>\r\n </div>\r\n </label>\r\n </div>\r\n <div class=\"reedem_error d-flex justify-content-center align-items-center\" *ngIf=\"showReedemError\">\r\n Please add more \u20B9{{vaildAmount}} to reedem this scheme\r\n </div>\r\n </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.reedem-section{padding:10px 15px;border-radius:15px;background:#f6f3f9;box-shadow:#b2b2ca80 2px 2px 6px;font-weight:700;font-size:13px}.redeem-section-text{font-size:.9rem;font-weight:700}.form-check-input:checked{background-color:#28a745!important;border-color:#28a745!important}.form-check-input:focus{border-color:#28a745!important;outline:0;box-shadow:none!important}.close-btn{background:none;border:none;font-size:24px;color:#6b7280;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.close-btn:hover{color:#374151}.select_matured_text{font-size:.8rem!important;margin-top:10px;color:#05aacf}.position-relative{position:relative}.cart-parent{display:flex;margin-top:15px}.left-panel{width:65%;padding-right:5rem;border-right:1px solid #E9E9E9}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;background:#f9f9fa;box-shadow:#9999994d 2px 2px 6px}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%;padding-left:5rem}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.coupons{display:flex;justify-content:space-between;padding:10px;border-radius:4px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px;margin-top:10px;cursor:pointer}.coupon-list-section{padding:15px;width:400px;z-index:10000001!important}.coupon-list-section .search{padding:8px;border:1px solid lightgray;border-radius:20px;display:flex;justify-content:space-between}.coupon-list-section input{border:none;outline:none;width:90%}.coupon-list-section .coupon-list{height:60vh;width:100%}.item-parent{margin:10px 0;min-height:120px}.lh-23{line-height:23px;margin-left:10px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer;font-size:18px}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.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}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.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:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important;height:calc(100vh - 170px)}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.see-live-btn{white-space:nowrap!important}.left-panel{width:100%;padding-right:0rem}.right-panel{width:100%;z-index:1000;padding-left:0rem}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap;display:none}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}.empty-cart-container{height:calc(100vh - 130px)}.coupons-listing-section{width:100vw!important}.checkoutPage{flex-direction:column}.checkout-left-panel,.checkout-right-panel{width:100%!important}}.mobile-fixed{color:#fff}.coupons-listing-section{height:100vh;padding-top:0;position:relative;width:390px;z-index:100;background:#d3d3d354}.coupons-listing-section .coupon-heading{display:flex;align-items:center;background-color:#fff;padding:15px 20px;width:100%;box-sizing:border-box}.coupons-listing-section .coupon-heading img{height:15px;width:15px;position:relative;top:2px;cursor:pointer}.coupons-listing-section .coupon-heading .header-text{font-size:16px;color:#000;font-weight:600;margin-left:15px;position:relative;top:-3px;right:15px;cursor:pointer}.coupons-listing-section .coupon-search-sec{width:90%;box-sizing:border-box;margin:10px auto;border:1px solid lightgray;padding:10px;border-radius:10px;background-color:#fff;display:flex;font-size:16px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec input{border:none;outline:none;background-color:transparent;width:95%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-search-sec input:focus{font-size:14px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec .back-btn{position:relative;top:3px;cursor:pointer}.coupons-listing-section .coupon-search-sec .apply-btn-search{font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing{height:72%;overflow-y:auto;width:90%;margin:20px auto}.coupons-listing-section .coupon-listing .coupon-details{padding:15px;margin-bottom:15px;background-color:#edfffa;border-radius:10px;border:1px solid lightgray}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading{display:flex;flex-direction:column;gap:25px}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief{display:flex;justify-content:space-between;width:100%}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-name{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-desc{padding:5px 0;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .show-details-btn{cursor:pointer}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec{display:flex;justify-content:flex-end}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec .apply-offer-btn{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-toggle-details-btn{text-align:left;text-decoration:underline;width:100%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details-divider{border-top:2px solid lightgray;opacity:.3;margin:15px 0}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-terms{font-size:14px;color:#000;font-weight:400}.empty-screen-container{height:100%;width:85%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-screen-container .empty-screen__primary-text{font-size:22px;color:#000;font-weight:400}.empty-screen-container .empty-screen__secondary-text{text-align:center;padding:10px 0;font-size:16px;color:#000;font-weight:400}.empty-screen-container .empty-screen__button{width:90%;background-color:#fff;border-radius:8px;text-align:center;padding:10px;margin:10px auto 0;cursor:pointer;font-size:18px;color:#000;font-weight:400}.box-shadow{box-shadow:#00000029 0 1px 4px}.main-content{border-radius:12px;padding:0 30px 30px;width:100%;overflow:scroll;height:calc(100vh - 150px)}.delivery-options{display:flex;gap:20px;margin-bottom:30px}.delivery-option{padding:12px 24px;border:2px solid #e0e0e0;border-radius:25px;background:#fff;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:500;transition:all .2s}.delivery-option.active{background:#f0e6ff;border-color:#8b5cf6;color:#7c3aed}.delivery-option:hover{border-color:silver}.delivery-icon{width:16px;height:16px;background:#8b5cf6;border-radius:3px}.section-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.shipping-info{border-radius:10px;padding:20px;margin-bottom:20px;border:1px solid rgb(238,232,255);box-shadow:#0000000a 0 4px 8px}.delivery-date{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.delivery-date-text{color:#666;font-weight:500}.change-date-btn{color:#e91e63;background:none;border:none;font-weight:600;cursor:pointer;text-transform:uppercase;font-size:12px;letter-spacing:.5px}.address-info{margin-bottom:15px}.address-name{font-weight:700;margin-bottom:8px;color:#000}.address-details{color:#666;margin-bottom:8px}.mobile-number{font-weight:700;color:#000;font-size:15px}.change-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}.change-address-btn:hover{border-color:#8b5cf6;color:#8b5cf6}.billing-section{margin-top:40px}.billing-options{display:flex;flex-direction:column;gap:15px;margin-top:20px}.billing-option{display:flex;align-items:center;gap:12px;padding:15px;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s}.billing-option.active{background:#f0e6ff;border-color:#8b5cf6}.radio-btn{width:20px;height:20px;border:2px solid #e0e0e0;border-radius:50%;position:relative}.billing-option.active .radio-btn{border-color:#8b5cf6}.billing-option.active .radio-btn:after{content:\"\";width:10px;height:10px;background:#8b5cf6;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.order-summary{border-radius:12px;padding:25px;width:75%}.summary-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.product-item{display:flex;gap:15px;margin-bottom:20px;border-bottom:1px solid #f0f0f0;border-radius:7px;background:#fff;padding:15px}.product-item:last-of-type{border-bottom:none;margin-bottom:30px;padding-bottom:0}.product-image{max-width:110px;width:100%;height:100%;border-radius:8px}.product-details{flex:1}.product-name{font-weight:500;margin-bottom:4px;color:#2d3748;font-size:14px}.product-quantity{color:#666;font-size:12px;margin-bottom:8px}.product-price{font-weight:600;color:#2d3748}.delivery-info{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:#8b5cf6}.delivery-icon-small{width:12px;height:12px;background:#8b5cf6;border-radius:2px}.price-breakdown{border-top:1px solid #f0f0f0;padding-top:20px}.price-row{display:flex;justify-content:space-between;margin-bottom:12px;color:#666}.price-row.total{font-weight:600;color:#2d3748;font-size:16px;margin-top:15px;padding-top:15px;border-top:1px solid #f0f0f0}.discount{color:#22c55e!important}@media (max-width: 768px){.container{grid-template-columns:1fr;padding:15px;gap:20px}.main-content,.order-summary{padding:20px;width:100%}.delivery-options{flex-direction:column;gap:10px}}.checkout-left-panel{width:65%;display:flex;justify-content:center}.checkout-right-panel{width:35%;display:flex;justify-content:center;background-color:#f9f9fa}.checkout-product{max-height:50vh;overflow:scroll}.mt-1{margin-top:1rem!important}.payment-btn{box-shadow:#0000000a 0 4px 8px}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px;height:25vh!important;margin-bottom:20px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}.change-pincode{display:flex;gap:10px}.change-pincode mat-icon{font-size:18px;align-items:center;justify-content:center;display:flex}.change-pincode span{font-size:14px}.fs-13{font-size:13px}.container{max-width:1200px;margin:0 auto;padding:24px;display:flex;gap:24px}.main-content{background:#fff;border-radius:12px;width:66%}.promo-banner{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;box-shadow:#9999994d 2px 2px 6px;border-radius:5px}.promo-text h3{font-size:.9rem!important;margin-bottom:4px}.promo-text p{font-size:1rem;font-size:.9rem!important;margin-bottom:0!important}.see-live-btn{background:#fff;border:1px solid #000;color:#000;padding:8px 16px;border-radius:6px;font-size:12px!important;cursor:pointer;align-items:center;width:max-content!important}.cart-items{padding:20px}.cart-item{display:flex;gap:16px;padding:20px 0;border-bottom:2px solid white;position:relative}.cart-item:last-child{border-bottom:none}.item-image{width:24%;height:154px;border-radius:8px;object-fit:cover;background:#fff;display:flex;align-items:center;justify-content:center}.item-details{flex:1}.item-title{font-size:.9rem;font-weight:500;color:#111827;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px;margin-bottom:8px}.current-price{font-size:1rem;font-weight:600;color:#111827}.original-price{font-size:1rem;color:#9ca3af;text-decoration:line-through}.discount{background:#fef3c7;color:#d97706;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.item-code{font-size:12px;color:#9ca3af;margin-bottom:8px}.item-options{display:flex;gap:16px;font-size:14px;color:#6b7280;margin-bottom:12px}.delivery-info{font-size:12px;color:#8b5cf6}.pickup-info{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:5px 15px;margin-top:12px;display:flex;align-items:center;cursor:pointer;width:max-content;gap:20px}.pickup-text{font-size:.9rem;color:#374151}.remove-btn{position:absolute;top:16px;right:0;width:20px!important;height:20px;background:#000;color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px!important}.sidebar{display:flex;flex-direction:column;gap:16px;width:34%}.coupon-section{border-radius:12px;padding:10px 15px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;box-shadow:#b2b2ca80 2px 2px 6px}.scheme-section{border-radius:12px;padding:10px 15px;cursor:pointer;box-shadow:#b2b2ca80 2px 2px 6px}.coupon-left{display:flex;align-items:center;gap:12px}.coupon-icon{width:24px;height:24px;background:#8b5cf6;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}.coupon-text{color:#000;font-weight:700;font-size:.9rem}.delivery-section{background:#fff;border-radius:12px;padding:10px 15px;box-shadow:#b2b2ca80 2px 2px 6px;background:#f6f3f9}.delivery-header{display:flex;align-items:center;gap:12px;margin-bottom:4px}.delivery-header span{font-size:.9rem;font-weight:700}.delivery-header mat-icon{width:20px;height:20px;font-size:17px;position:relative;top:2px}.delivery-icon{width:20px;height:20px;background:#8b5cf6;border-radius:50%}.pincode{font-weight:600;color:#111827}.change-link{color:#ec4899;font-size:.9rem;text-decoration:none;margin-left:auto}.summary-section{background:#fff;border-radius:12px;padding:20px;background:#f6f3f9;box-shadow:#b2b2ca80 2px 2px 6px}.summary-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.summary-label{color:#6b7280;font-size:14px;font-weight:700}.summary-value{font-size:14px;color:#111827}.savings{color:#10b981}.apply-coupon{color:#8b5cf6;cursor:pointer}.free{color:#10b981}.total-row{border-top:2px solid white;padding-top:15px;margin-top:15px}.total-label{font-weight:600;font-size:16px;color:#111827}.total-value{font-weight:700;font-size:18px;color:#111827}.place-order-btn{width:100%;background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;border:none;border-radius:12px;padding:9px 10px;font-size:.9rem!important;font-weight:600;cursor:pointer;margin-top:10px;text-transform:uppercase}.place-order-btn:hover{opacity:.9}.chain-icon,.earring-icon{width:60px;height:60px;filter:sepia(1) hue-rotate(30deg) saturate(2)}.item-img{width:100%;height:100%;object-fit:cover}.mt-0{margin-top:0!important}select{outline:none;border-radius:5px;padding:2px;width:20%;border:none;box-shadow:#9999994d 2px 2px 6px;cursor:pointer}.cart-tab-parent{display:flex;justify-content:center}.cart-tabs{gap:10px;display:flex;justify-content:center;width:max-content;border-radius:10px}.cart-tabs div{padding:7px 10px;cursor:pointer}.selected-cart-tab{background:#fff;margin:2px;border-radius:10px;color:#000!important}.checkout-main-content{width:50%;padding:30px;border-radius:12px}@media screen and (max-width: 475px){.main-content{padding:0;height:auto!important}.no-items{height:86vh;overflow:hidden;margin:0}.checkout-main-content{width:100%}.container{padding:0!important}.cart-items{padding:10px}.item-image{width:86px;height:86px}.pickup-info{display:none}.container{display:flex;flex-direction:column}.promo-banner{gap:10px}select{width:50%}.main-content,.sidebar{width:100%}}.group_invest{color:#000;font-size:.8rem}.reedem_error{color:red}.group_invest span{color:#05aacf}.redeem_amount{padding:2%;border-radius:4px;background:#fff;margin-top:2%;color:#000;font-size:.8rem}.redeem_amount span{color:#0dc577}.modal-body{padding-bottom:0;overflow-y:scroll;max-height:300px;padding:0!important}.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{justify-content:space-between;padding:10px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff;width:100%}.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;gap:25px;margin-bottom:20px}.scheme-name{display:flex;justify-content:space-between}.scheme-details span{font-size:12px;color:#0000004d}.scheme-monthly{font-size:14px;font-weight:600;color:#111827;min-width:100px;text-align:right}.right-side{width:90%}.scheme-amount{font-weight:700}@media screen and (min-width: 700px){.cart-items{max-height:500px;overflow:scroll}}\n"] }]
9090
- }], ctorParameters: () => [{ type: EventsService }, { type: CartService }, { type: i2$2.Router }, { type: RestService }, { type: i3.MatDialog }, { type: StorageServiceService }, { type: i6$1.MessageService }, { type: i8$3.MatBottomSheet }, { type: i2$2.ActivatedRoute }, { type: undefined, decorators: [{
9090
+ }], ctorParameters: () => [{ type: EventsService }, { type: CartService }, { type: i2$2.Router }, { type: RestService }, { type: i1$1.MatDialog }, { type: StorageServiceService }, { type: i6$1.MessageService }, { type: i8$3.MatBottomSheet }, { type: i2$2.ActivatedRoute }, { type: undefined, decorators: [{
9091
9091
  type: Optional
9092
9092
  }, {
9093
9093
  type: Inject,
9094
9094
  args: [MAT_DIALOG_DATA]
9095
- }] }, { type: i3.MatDialogRef, decorators: [{
9095
+ }] }, { type: i1$1.MatDialogRef, decorators: [{
9096
9096
  type: Optional
9097
9097
  }] }], propDecorators: { data: [{
9098
9098
  type: Input
@@ -9521,7 +9521,7 @@ class AuthenticationRequiredComponent extends BaseSection {
9521
9521
  };
9522
9522
  });
9523
9523
  }
9524
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthenticationRequiredComponent, deps: [{ token: RestService }, { token: i2$2.Router }, { token: i6$1.MessageService }, { token: StorageServiceService }, { token: i3.MatDialog }, { token: i2$2.ActivatedRoute }, { token: i0.ElementRef }, { token: i3.MatDialogRef, optional: true }, { token: i8$3.MatBottomSheetRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
9524
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthenticationRequiredComponent, deps: [{ token: RestService }, { token: i2$2.Router }, { token: i6$1.MessageService }, { token: StorageServiceService }, { token: i1$1.MatDialog }, { token: i2$2.ActivatedRoute }, { token: i0.ElementRef }, { token: i1$1.MatDialogRef, optional: true }, { token: i8$3.MatBottomSheetRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
9525
9525
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AuthenticationRequiredComponent, isStandalone: true, selector: "simpo-authentication-required", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section [id]=\"data?.id\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"area w-100\">\r\n <ul class=\"circles\">\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n </ul>\r\n </div>\r\n <div [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\" class=\"main-panel d-flex gap-2\">\r\n <div class=\"panel w-100\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container *ngTemplateOutlet=\"currentPage === 'LOGIN' ? loginTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"currentPage === 'SIGNUP' ? signInTemplate : null\"></ng-container>\r\n <ng-container\r\n *ngTemplateOutlet=\"currentPage === 'FORGOT_PASSWORD' ? forgotPasswordTemplate : null\"></ng-container>\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<ng-template #loginTemplate>\r\n <div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Email or Phone number</label>\r\n <input type=\"email\" [(ngModel)]=\"email\" required=\"\" placeholder=\"janedoe@gmail.com\"\r\n (ngModelChange)=\"onEmailChange()\" [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n <!-- <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid Email*</span> -->\r\n </div>\r\n <div class=\"input-box\">\r\n <div class=\"w-100\">\r\n <label for=\"\">Password</label>\r\n <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\"\r\n (ngModelChange)=\"onPasswordChange()\" class=\"w-90\" placeholder=\"Janedoe@1234\"\r\n [style.borderColor]=\"!passwordCheck ? '' : 'red'\">\r\n <span class=\"eye\" (click)=\"showPassword = !showPassword\" style=\"cursor: pointer;\">\r\n <i class=\"fa\" [ngClass]=\"showPassword ? 'fa-eye-slash' : 'fa-eye'\"></i>\r\n </span>\r\n </div>\r\n <span *ngIf=\"passwordCheck && currentPage === 'SIGNUP'\" class=\"f-12\" [style.color]=\"'red'\">Your password must\r\n contain 1 Uppercase , 1\r\n Lowercase , 1 Special\r\n Character , 1 Digit and Minimum 8 Characters*</span>\r\n </div>\r\n <!-- <div class=\"forgot-pwd w-100 text-end mb-2\" [style.color]=\"accentColor\" (click)=\"currentPage = 'FORGOT_PASSWORD'\">\r\n Forgot Password?</div> -->\r\n <!-- <button class=\"button\" *ngIf=\"!buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n (click)=\"login()\">Login</button> -->\r\n <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"login()\">Login</button>\r\n <!-- <button class=\"button\" *ngIf=\"buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\"\r\n [color]=\"styles?.background?.accentColor\">Loading...</button> -->\r\n <button class=\"send-btn p-2\" *ngIf=\"buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"login()\">Loading...</button>\r\n\r\n\r\n <div class=\"sign-up mt-2\" *ngIf=\"signUpEnabled\">Don't have an account? <span [style.color]=\"accentColor\"\r\n (click)=\"currentPage = 'SIGNUP'\">Sign\r\n Up</span></div>\r\n\r\n <!-- <div class=\"text-center mt-20\">\r\n <div class=\"or-divider\">\r\n <span class=\"or-text\">or</span>\r\n </div>\r\n <div class=\"sign-up\">Login with <span [style.color]=\"accentColor\">OTP</span></div>\r\n </div> -->\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #signInTemplate>\r\n <div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Name</label>\r\n <input type=\"text\" [(ngModel)]=\"userName\" placeholder=\"Jane Doe\">\r\n </div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Email</label>\r\n <input type=\"email\" [(ngModel)]=\"email\" placeholder=\"janedoe@gmail.com\" (ngModelChange)=\"onEmailChange()\"\r\n [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid email*</span>\r\n </div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Phone Number</label>\r\n <input type=\"number\" [(ngModel)]=\"mobile\" (ngModelChange)=\"onMobileChange()\" placeholder=\"9876543219\"\r\n [style.borderColor]=\"!mobileCheck ? '' : 'red'\" class=\"no-arrows\">\r\n <span class=\"f-12\" *ngIf=\"mobileCheck\" [style.color]=\"'red'\">Please Enter valid Mobile number*</span>\r\n </div>\r\n <div class=\" input-box position-relative\">\r\n <label for=\"\">Password</label>\r\n <div class=\"w-100 d-flex align-items-center\">\r\n <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\" class=\"w-90\"\r\n placeholder=\"Janedoe@1234\" [style.borderColor]=\"!passwordCheck ? '' : 'red'\"\r\n (ngModelChange)=\"onPasswordChange()\">\r\n <span class=\"eye\" (click)=\"showPassword = !showPassword\" style=\"cursor: pointer;\">\r\n <i class=\"fa\" [ngClass]=\"showPassword ? 'fa-eye-slash' : 'fa-eye'\"></i>\r\n </span>\r\n </div>\r\n <span *ngIf=\"passwordCheck\" class=\"f-12\" [style.color]=\"'red'\">Your password must contain 1 Uppercase , 1\r\n Lowercase , 1 Special\r\n Character , 1 Digit and Minimum 8 Characters*</span>\r\n <!-- <div class=\"strength-bar-container\">\r\n <div *ngFor=\"let strength of passwordStrength; let idx = index\" class=\"strength-bar\"\r\n [style.backgroundColor]=\"getStrengthColor(idx)\"></div>\r\n </div> -->\r\n </div>\r\n <button class=\"button\" *ngIf=\"!buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n (click)=\"createAccount()\" [disabled]=\"!isEmailValid || !isPasswordValid || !userName\">Create Account</button>\r\n <button class=\"button\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n *ngIf=\"buttonLoading\">Loading...</button>\r\n\r\n\r\n <div class=\"sign-up mt-2\">Already have an account? <span [style.color]=\"accentColor\"\r\n (click)=\"currentPage = 'LOGIN'\">Login</span></div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #forgotPasswordTemplate>\r\n <div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Email or Phone number</label>\r\n <input type=\"email\" [(ngModel)]=\"email\" required=\"\" placeholder=\"janedoe@gmail.com\"\r\n (ngModelChange)=\"onEmailChange()\" [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n </div>\r\n <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" >Submit</button>\r\n <button class=\"send-btn p-2\" *ngIf=\"buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\">Loading...</button>\r\n </div>\r\n</ng-template>", styles: [".total-container{position:relative;height:auto;perspective:1200px;overflow:hidden}label,.sign-up,.eye{color:#000}.eye{padding:6px;font-size:16px}.w-90{width:90%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-panel{max-width:450px;margin:2rem auto;background:#ffffff26;border-radius:20px;box-shadow:0 25px 50px -12px #00000040;overflow:hidden;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;transform-style:preserve-3d;will-change:transform;perspective:1200px;backface-visibility:hidden}.main-panel:hover{transform:rotateY(3deg) rotateX(2deg) scale(1.02);box-shadow:0 35px 60px -10px #0000004d}.panel{background:#fffffff2;padding:3rem;position:relative;transform-style:preserve-3d;transition:all .4s ease;margin:unset!important}.panel:before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(255,255,255,.15) 50%,transparent);opacity:0;transition:opacity .4s ease;pointer-events:none}.panel:hover:before{opacity:1}.input-box{display:flex;flex-direction:column;gap:8px;margin-bottom:1.5rem;position:relative;transform-style:preserve-3d}.input-box label{transform:translateZ(20px)}.input-box input{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;border:2px solid rgba(0,0,0,.08);padding:.75rem 1rem;border-radius:12px;appearance:none;outline:none}.input-box input:focus{border-color:var(--accent-color, #667eea);box-shadow:0 8px 25px -5px #667eea4d;transform:translateY(-3px) translateZ(25px);background:#fff}.input-box input:hover{transform:translateY(-2px) translateZ(15px);box-shadow:0 5px 15px #00000014}.button{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;overflow:hidden;border:none;padding:.5rem 2rem;font-weight:600}.button:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .7s ease}.button:hover{transform:translateY(-3px) translateZ(35px);box-shadow:0 15px 30px -5px var(--accent-shadow, rgba(102, 126, 234, .5))}.button:hover:before{left:100%}.button:active{transform:translateY(-1px) translateZ(25px)}.circles{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.circles li{position:absolute;display:block;list-style:none;width:20px;height:20px;background:#ffffff1a;box-shadow:0 8px 32px #1f268733;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:80px;border:1px solid rgba(255,255,255,.18);animation:animate 25s linear infinite;bottom:-150px}.circles li:nth-child(1){left:25%;width:80px;height:80px;animation-delay:0s}.circles li:nth-child(2){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}.circles li:nth-child(3){left:70%;width:20px;height:20px;animation-delay:4s}.circles li:nth-child(4){left:40%;width:60px;height:60px;animation-delay:0s;animation-duration:18s}.circles li:nth-child(5){left:65%;width:20px;height:20px;animation-delay:0s}.circles li:nth-child(6){left:75%;width:110px;height:110px;animation-delay:3s}.circles li:nth-child(7){left:35%;width:150px;height:150px;animation-delay:7s}.circles li:nth-child(8){left:50%;width:25px;height:25px;animation-delay:15s;animation-duration:45s}.circles li:nth-child(9){left:20%;width:15px;height:15px;animation-delay:2s;animation-duration:35s}.circles li:nth-child(15){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}@keyframes animate{0%{transform:translateY(0) rotate(0);opacity:1;border-radius:0}to{transform:translateY(-1000px) rotate(720deg);opacity:0;border-radius:50%}}.f-12{font-size:12px}@media screen and (max-width : 475px){.w-90{width:87%}}.no-arrows::-webkit-outer-spin-button,.no-arrows::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: 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.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: ToastModule }, { kind: "component", type: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { 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: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { 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: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }] }); }
9526
9526
  }
9527
9527
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthenticationRequiredComponent, decorators: [{
@@ -9543,7 +9543,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
9543
9543
  SpacingAroundDirective,
9544
9544
  ButtonEditorDirective
9545
9545
  ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section [id]=\"data?.id\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"area w-100\">\r\n <ul class=\"circles\">\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n <li></li>\r\n </ul>\r\n </div>\r\n <div [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\" class=\"main-panel d-flex gap-2\">\r\n <div class=\"panel w-100\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container *ngTemplateOutlet=\"currentPage === 'LOGIN' ? loginTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"currentPage === 'SIGNUP' ? signInTemplate : null\"></ng-container>\r\n <ng-container\r\n *ngTemplateOutlet=\"currentPage === 'FORGOT_PASSWORD' ? forgotPasswordTemplate : null\"></ng-container>\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<ng-template #loginTemplate>\r\n <div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Email or Phone number</label>\r\n <input type=\"email\" [(ngModel)]=\"email\" required=\"\" placeholder=\"janedoe@gmail.com\"\r\n (ngModelChange)=\"onEmailChange()\" [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n <!-- <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid Email*</span> -->\r\n </div>\r\n <div class=\"input-box\">\r\n <div class=\"w-100\">\r\n <label for=\"\">Password</label>\r\n <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\"\r\n (ngModelChange)=\"onPasswordChange()\" class=\"w-90\" placeholder=\"Janedoe@1234\"\r\n [style.borderColor]=\"!passwordCheck ? '' : 'red'\">\r\n <span class=\"eye\" (click)=\"showPassword = !showPassword\" style=\"cursor: pointer;\">\r\n <i class=\"fa\" [ngClass]=\"showPassword ? 'fa-eye-slash' : 'fa-eye'\"></i>\r\n </span>\r\n </div>\r\n <span *ngIf=\"passwordCheck && currentPage === 'SIGNUP'\" class=\"f-12\" [style.color]=\"'red'\">Your password must\r\n contain 1 Uppercase , 1\r\n Lowercase , 1 Special\r\n Character , 1 Digit and Minimum 8 Characters*</span>\r\n </div>\r\n <!-- <div class=\"forgot-pwd w-100 text-end mb-2\" [style.color]=\"accentColor\" (click)=\"currentPage = 'FORGOT_PASSWORD'\">\r\n Forgot Password?</div> -->\r\n <!-- <button class=\"button\" *ngIf=\"!buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n (click)=\"login()\">Login</button> -->\r\n <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"login()\">Login</button>\r\n <!-- <button class=\"button\" *ngIf=\"buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\"\r\n [color]=\"styles?.background?.accentColor\">Loading...</button> -->\r\n <button class=\"send-btn p-2\" *ngIf=\"buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" (click)=\"login()\">Loading...</button>\r\n\r\n\r\n <div class=\"sign-up mt-2\" *ngIf=\"signUpEnabled\">Don't have an account? <span [style.color]=\"accentColor\"\r\n (click)=\"currentPage = 'SIGNUP'\">Sign\r\n Up</span></div>\r\n\r\n <!-- <div class=\"text-center mt-20\">\r\n <div class=\"or-divider\">\r\n <span class=\"or-text\">or</span>\r\n </div>\r\n <div class=\"sign-up\">Login with <span [style.color]=\"accentColor\">OTP</span></div>\r\n </div> -->\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #signInTemplate>\r\n <div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Name</label>\r\n <input type=\"text\" [(ngModel)]=\"userName\" placeholder=\"Jane Doe\">\r\n </div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Email</label>\r\n <input type=\"email\" [(ngModel)]=\"email\" placeholder=\"janedoe@gmail.com\" (ngModelChange)=\"onEmailChange()\"\r\n [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n <span class=\"f-12\" *ngIf=\"emailCheck\" [style.color]=\"'red'\">Please Enter valid email*</span>\r\n </div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Phone Number</label>\r\n <input type=\"number\" [(ngModel)]=\"mobile\" (ngModelChange)=\"onMobileChange()\" placeholder=\"9876543219\"\r\n [style.borderColor]=\"!mobileCheck ? '' : 'red'\" class=\"no-arrows\">\r\n <span class=\"f-12\" *ngIf=\"mobileCheck\" [style.color]=\"'red'\">Please Enter valid Mobile number*</span>\r\n </div>\r\n <div class=\" input-box position-relative\">\r\n <label for=\"\">Password</label>\r\n <div class=\"w-100 d-flex align-items-center\">\r\n <input [type]=\"showPassword ? 'text' : 'password'\" required=\"\" [(ngModel)]=\"password\" class=\"w-90\"\r\n placeholder=\"Janedoe@1234\" [style.borderColor]=\"!passwordCheck ? '' : 'red'\"\r\n (ngModelChange)=\"onPasswordChange()\">\r\n <span class=\"eye\" (click)=\"showPassword = !showPassword\" style=\"cursor: pointer;\">\r\n <i class=\"fa\" [ngClass]=\"showPassword ? 'fa-eye-slash' : 'fa-eye'\"></i>\r\n </span>\r\n </div>\r\n <span *ngIf=\"passwordCheck\" class=\"f-12\" [style.color]=\"'red'\">Your password must contain 1 Uppercase , 1\r\n Lowercase , 1 Special\r\n Character , 1 Digit and Minimum 8 Characters*</span>\r\n <!-- <div class=\"strength-bar-container\">\r\n <div *ngFor=\"let strength of passwordStrength; let idx = index\" class=\"strength-bar\"\r\n [style.backgroundColor]=\"getStrengthColor(idx)\"></div>\r\n </div> -->\r\n </div>\r\n <button class=\"button\" *ngIf=\"!buttonLoading\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n (click)=\"createAccount()\" [disabled]=\"!isEmailValid || !isPasswordValid || !userName\">Create Account</button>\r\n <button class=\"button\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [simpoCorner]=\"styles?.corners\" [color]=\"styles?.background?.accentColor\"\r\n *ngIf=\"buttonLoading\">Loading...</button>\r\n\r\n\r\n <div class=\"sign-up mt-2\">Already have an account? <span [style.color]=\"accentColor\"\r\n (click)=\"currentPage = 'LOGIN'\">Login</span></div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #forgotPasswordTemplate>\r\n <div>\r\n <div class=\"input-box\">\r\n <label for=\"\">Email or Phone number</label>\r\n <input type=\"email\" [(ngModel)]=\"email\" required=\"\" placeholder=\"janedoe@gmail.com\"\r\n (ngModelChange)=\"onEmailChange()\" [style.borderColor]=\"!emailCheck ? '' : 'red'\">\r\n </div>\r\n <button class=\"send-btn p-2\" *ngIf=\"!buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\" >Submit</button>\r\n <button class=\"send-btn p-2\" *ngIf=\"buttonLoading\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\">Loading...</button>\r\n </div>\r\n</ng-template>", styles: [".total-container{position:relative;height:auto;perspective:1200px;overflow:hidden}label,.sign-up,.eye{color:#000}.eye{padding:6px;font-size:16px}.w-90{width:90%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-panel{max-width:450px;margin:2rem auto;background:#ffffff26;border-radius:20px;box-shadow:0 25px 50px -12px #00000040;overflow:hidden;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;transform-style:preserve-3d;will-change:transform;perspective:1200px;backface-visibility:hidden}.main-panel:hover{transform:rotateY(3deg) rotateX(2deg) scale(1.02);box-shadow:0 35px 60px -10px #0000004d}.panel{background:#fffffff2;padding:3rem;position:relative;transform-style:preserve-3d;transition:all .4s ease;margin:unset!important}.panel:before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(255,255,255,.15) 50%,transparent);opacity:0;transition:opacity .4s ease;pointer-events:none}.panel:hover:before{opacity:1}.input-box{display:flex;flex-direction:column;gap:8px;margin-bottom:1.5rem;position:relative;transform-style:preserve-3d}.input-box label{transform:translateZ(20px)}.input-box input{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;border:2px solid rgba(0,0,0,.08);padding:.75rem 1rem;border-radius:12px;appearance:none;outline:none}.input-box input:focus{border-color:var(--accent-color, #667eea);box-shadow:0 8px 25px -5px #667eea4d;transform:translateY(-3px) translateZ(25px);background:#fff}.input-box input:hover{transform:translateY(-2px) translateZ(15px);box-shadow:0 5px 15px #00000014}.button{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;transform-style:preserve-3d;overflow:hidden;border:none;padding:.5rem 2rem;font-weight:600}.button:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .7s ease}.button:hover{transform:translateY(-3px) translateZ(35px);box-shadow:0 15px 30px -5px var(--accent-shadow, rgba(102, 126, 234, .5))}.button:hover:before{left:100%}.button:active{transform:translateY(-1px) translateZ(25px)}.circles{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.circles li{position:absolute;display:block;list-style:none;width:20px;height:20px;background:#ffffff1a;box-shadow:0 8px 32px #1f268733;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:80px;border:1px solid rgba(255,255,255,.18);animation:animate 25s linear infinite;bottom:-150px}.circles li:nth-child(1){left:25%;width:80px;height:80px;animation-delay:0s}.circles li:nth-child(2){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}.circles li:nth-child(3){left:70%;width:20px;height:20px;animation-delay:4s}.circles li:nth-child(4){left:40%;width:60px;height:60px;animation-delay:0s;animation-duration:18s}.circles li:nth-child(5){left:65%;width:20px;height:20px;animation-delay:0s}.circles li:nth-child(6){left:75%;width:110px;height:110px;animation-delay:3s}.circles li:nth-child(7){left:35%;width:150px;height:150px;animation-delay:7s}.circles li:nth-child(8){left:50%;width:25px;height:25px;animation-delay:15s;animation-duration:45s}.circles li:nth-child(9){left:20%;width:15px;height:15px;animation-delay:2s;animation-duration:35s}.circles li:nth-child(15){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s}@keyframes animate{0%{transform:translateY(0) rotate(0);opacity:1;border-radius:0}to{transform:translateY(-1000px) rotate(720deg);opacity:0;border-radius:50%}}.f-12{font-size:12px}@media screen and (max-width : 475px){.w-90{width:87%}}.no-arrows::-webkit-outer-spin-button,.no-arrows::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
9546
- }], ctorParameters: () => [{ type: RestService }, { type: i2$2.Router }, { type: i6$1.MessageService }, { type: StorageServiceService }, { type: i3.MatDialog }, { type: i2$2.ActivatedRoute }, { type: i0.ElementRef }, { type: i3.MatDialogRef, decorators: [{
9546
+ }], ctorParameters: () => [{ type: RestService }, { type: i2$2.Router }, { type: i6$1.MessageService }, { type: StorageServiceService }, { type: i1$1.MatDialog }, { type: i2$2.ActivatedRoute }, { type: i0.ElementRef }, { type: i1$1.MatDialogRef, decorators: [{
9547
9547
  type: Optional
9548
9548
  }] }, { type: i8$3.MatBottomSheetRef, decorators: [{
9549
9549
  type: Optional
@@ -9736,7 +9736,7 @@ class NavbarSectionComponent {
9736
9736
  }
9737
9737
  return page;
9738
9738
  }
9739
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavbarSectionComponent, deps: [{ token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: i3.MatDialog }, { token: i8$3.MatBottomSheet }, { token: i2$3.CookieService }, { token: StorageServiceService }, { token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
9739
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavbarSectionComponent, deps: [{ token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: i1$1.MatDialog }, { token: i8$3.MatBottomSheet }, { token: i2$3.CookieService }, { token: StorageServiceService }, { token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
9740
9740
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NavbarSectionComponent, isStandalone: true, selector: "simpo-navbar-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\" [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\" [isHeader]=\"true\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\" [ngClass]=\"{'adjustePadding': !isEcommerceWebsite, 'paddingEcom': isEcommerceWebsite, 'no-shadow': isComponentMerged}\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_LEFT__MENU_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n <div class=\"d-flex align-item-center\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_RIGHT__MENU_LEFT\">\r\n <div class=\"d-flex align-items-center gap-15\">\r\n <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n\r\n </div>\r\n\r\n <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_CENTER__MENU_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n <div class=\"d-flex flex-column align-item-center\">\r\n <div class=\"d-flex justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <div class=\"d-flex justify-content-between align-items-center px-2\">\r\n <div class=\"d-flex\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"navbarLinksTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"ecommerceButtonsTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"canShowMobileFooter\">\r\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"mobileButtonsTemplate\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n </nav>\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>\r\n\r\n<ng-template #logoSectionTemplate>\r\n <div class=\" left-logo-text d-flex\">\r\n <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\" loading=\"lazy\">\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element\r\n [buttonData]=\"item\"\r\n [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\"\r\n [bgColor]=\"simpoColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\"\r\n id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | uppercase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\" (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #socialIconsTemplate>\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative; margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n <div class=\"navbar-nav align-items-center\">\r\n <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element\r\n [buttonData]=\"item\"\r\n [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\"\r\n [bgColor]=\"simpoColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n <div class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element\r\n [buttonContent]=\"button.content\"\r\n [buttonStyle]=\"button.styles\"\r\n [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n <div class=\"justify-content-between pr-0 d-flex position-relative\" style=\"max-width: 50vw;\">\r\n <div class=\"search-icon\" *ngIf=\"!isMobile\" (click)=\"showSearchBar = !showSearchBar\">\r\n <mat-icon [simpoColor]=\"simpoColor\">search</mat-icon>\r\n </div>\r\n <div class=\"input-group\" *ngIf=\"!isMobile && showSearchBar\">\r\n <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\" *ngIf=\"!isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\" *ngIf=\"!isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 30px;\">\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\" *ngIf=\"!isMobile\">Account</span>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n <div class=\"icons\" (click)=\"goToHome()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Home</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"searchProducts()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Shop</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToWishlist()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Cart</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileButtonsTemplate>\r\n <div class=\"inner-height \">\r\n <div class=\"nab-bar-mobile d-flex justify-content-between align-items-center\">\r\n\r\n <div class=\"title-row\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n\r\n <button class=\"navbar-toggler\" (click)=\"isNavbarOpen = !isNavbarOpen\" *ngIf=\"!isNavbarOpen\">\r\n <mat-icon [simpoColor]=\"style?.background?.color\">menu</mat-icon> <!-- Use \"menu\" for a hamburger icon -->\r\n </button>\r\n\r\n\r\n <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\" *ngIf=\"isNavbarOpen\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"isNavbarOpen\" class=\"navbar-content mt-3\">\r\n <div class=\"d-flex flex-column gap-2\">\r\n\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element\r\n [buttonData]=\"item\"\r\n [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <div class=\"d-flex align-items-start flex-column flex-lg-row gap-lg-0 gap-3 mt-2\">\r\n <div class=\"d-flex\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative; margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"d-flex flex-column mt-2 align-items-center\">\r\n <div *ngIf=\"action?.display\" class=\"button-display\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element\r\n [buttonContent]=\"button.content\"\r\n [buttonStyle]=\"button.styles\"\r\n [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\"[backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}.no-shadow{box-shadow:none!important}.container-fluid{display:flex;align-items:center}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:0;right:25px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:2px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:38px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px;position:absolute;right:0%;top:130%;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.gap-15{gap:15px}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId", "accentColor"] }, { 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: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: SimpoFooterLayoutDirective, selector: "[simpoFooterLayout]", inputs: ["simpoFooterLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky", "categoryHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { 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"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
9741
9741
  }
9742
9742
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavbarSectionComponent, decorators: [{
@@ -9774,7 +9774,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
9774
9774
  MatMenuModule,
9775
9775
  SpacingHorizontalDirective
9776
9776
  ], template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\" [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\" [isHeader]=\"true\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\" [ngClass]=\"{'adjustePadding': !isEcommerceWebsite, 'paddingEcom': isEcommerceWebsite, 'no-shadow': isComponentMerged}\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_LEFT__MENU_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n <div class=\"d-flex align-item-center\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_RIGHT__MENU_LEFT\">\r\n <div class=\"d-flex align-items-center gap-15\">\r\n <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n\r\n </div>\r\n\r\n <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_CENTER__MENU_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n <div class=\"d-flex flex-column align-item-center\">\r\n <div class=\"d-flex justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <div class=\"d-flex justify-content-between align-items-center px-2\">\r\n <div class=\"d-flex\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"navbarLinksTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"ecommerceButtonsTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"canShowMobileFooter\">\r\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"mobileButtonsTemplate\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n </nav>\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>\r\n\r\n<ng-template #logoSectionTemplate>\r\n <div class=\" left-logo-text d-flex\">\r\n <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\" loading=\"lazy\">\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element\r\n [buttonData]=\"item\"\r\n [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\"\r\n [bgColor]=\"simpoColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\"\r\n id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | uppercase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\" (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #socialIconsTemplate>\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative; margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n <div class=\"navbar-nav align-items-center\">\r\n <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element\r\n [buttonData]=\"item\"\r\n [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\"\r\n [bgColor]=\"simpoColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n <div class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element\r\n [buttonContent]=\"button.content\"\r\n [buttonStyle]=\"button.styles\"\r\n [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n <div class=\"justify-content-between pr-0 d-flex position-relative\" style=\"max-width: 50vw;\">\r\n <div class=\"search-icon\" *ngIf=\"!isMobile\" (click)=\"showSearchBar = !showSearchBar\">\r\n <mat-icon [simpoColor]=\"simpoColor\">search</mat-icon>\r\n </div>\r\n <div class=\"input-group\" *ngIf=\"!isMobile && showSearchBar\">\r\n <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\" *ngIf=\"!isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\" *ngIf=\"!isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 30px;\">\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\" *ngIf=\"!isMobile\">Account</span>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n <div class=\"icons\" (click)=\"goToHome()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Home</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"searchProducts()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Shop</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToWishlist()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Cart</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileButtonsTemplate>\r\n <div class=\"inner-height \">\r\n <div class=\"nab-bar-mobile d-flex justify-content-between align-items-center\">\r\n\r\n <div class=\"title-row\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n\r\n <button class=\"navbar-toggler\" (click)=\"isNavbarOpen = !isNavbarOpen\" *ngIf=\"!isNavbarOpen\">\r\n <mat-icon [simpoColor]=\"style?.background?.color\">menu</mat-icon> <!-- Use \"menu\" for a hamburger icon -->\r\n </button>\r\n\r\n\r\n <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\" *ngIf=\"isNavbarOpen\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"isNavbarOpen\" class=\"navbar-content mt-3\">\r\n <div class=\"d-flex flex-column gap-2\">\r\n\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element\r\n [buttonData]=\"item\"\r\n [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <div class=\"d-flex align-items-start flex-column flex-lg-row gap-lg-0 gap-3 mt-2\">\r\n <div class=\"d-flex\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative; margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"d-flex flex-column mt-2 align-items-center\">\r\n <div *ngIf=\"action?.display\" class=\"button-display\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element\r\n [buttonContent]=\"button.content\"\r\n [buttonStyle]=\"button.styles\"\r\n [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\"[backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}.no-shadow{box-shadow:none!important}.container-fluid{display:flex;align-items:center}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:0;right:25px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:2px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:38px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px;position:absolute;right:0%;top:130%;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.gap-15{gap:15px}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}\n"] }]
9777
- }], ctorParameters: () => [{ type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i3.MatDialog }, { type: i8$3.MatBottomSheet }, { type: i2$3.CookieService }, { type: StorageServiceService }, { type: RestService }], propDecorators: { data: [{
9777
+ }], ctorParameters: () => [{ type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i1$1.MatDialog }, { type: i8$3.MatBottomSheet }, { type: i2$3.CookieService }, { type: StorageServiceService }, { type: RestService }], propDecorators: { data: [{
9778
9778
  type: Input
9779
9779
  }], nextComponent: [{
9780
9780
  type: Input
@@ -9803,13 +9803,13 @@ class AddNewSectionComponent {
9803
9803
  addSection() {
9804
9804
  let dialog = this.dialog.open(AddSectionComponent, { panelClass: "add-section", data: { status: true, index: this.index, position: "ABOVE" } });
9805
9805
  }
9806
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddNewSectionComponent, deps: [{ token: EventsService }, { token: i3.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
9806
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddNewSectionComponent, deps: [{ token: EventsService }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
9807
9807
  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"] }] }); }
9808
9808
  }
9809
9809
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddNewSectionComponent, decorators: [{
9810
9810
  type: Component,
9811
9811
  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"] }]
9812
- }], ctorParameters: () => [{ type: EventsService }, { type: i3.MatDialog }], propDecorators: { index: [{
9812
+ }], ctorParameters: () => [{ type: EventsService }, { type: i1$1.MatDialog }], propDecorators: { index: [{
9813
9813
  type: Input
9814
9814
  }] } });
9815
9815
 
@@ -12529,11 +12529,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
12529
12529
  }] } });
12530
12530
 
12531
12531
  class AppointmentBookingComponent {
12532
- constructor(restService, _eventService, matDialog, snackBar) {
12532
+ constructor(restService, _eventService, router) {
12533
12533
  this.restService = restService;
12534
12534
  this._eventService = _eventService;
12535
- this.matDialog = matDialog;
12536
- this.snackBar = snackBar;
12535
+ this.router = router;
12537
12536
  this.accessedTabs = {
12538
12537
  serviceListing: false,
12539
12538
  locationListing: false,
@@ -12880,13 +12879,11 @@ class AppointmentBookingComponent {
12880
12879
  this.appointmentPayload.startTime = this.selectedTime.value.slice(0, 5);
12881
12880
  this.appointmentPayload.bookingDate = `${yyyy}-${mm}-${dd}T00:00:00.000Z`;
12882
12881
  this.restService.bookAppointmentV2(this.appointmentPayload).subscribe((res) => {
12883
- this.snackBar.open('Appointment booked successfully', 'close', { duration: 2000 });
12884
12882
  this.selectedTab = 'statusTemplate';
12885
12883
  this.barWidth = '100';
12886
12884
  this.apiStatus = true;
12887
12885
  }, (error) => {
12888
12886
  this.apiStatus = false;
12889
- this.snackBar.open('Failed to book appointment', 'close', { duration: 2000 });
12890
12887
  });
12891
12888
  }
12892
12889
  paymentBookingAppointment() {
@@ -12904,20 +12901,18 @@ class AppointmentBookingComponent {
12904
12901
  this.restService.paymentForAppointment(this.appointmentPayload).subscribe((res) => {
12905
12902
  this._eventService.cashFreeEvent.emit(res.data);
12906
12903
  }, (error) => {
12907
- this.snackBar.open('Failed to book appointment please select another time slot', 'close', { duration: 2000 });
12908
12904
  this.loader = false;
12909
12905
  });
12910
12906
  }
12911
12907
  goBack() {
12912
- this.matDialog.closeAll();
12913
12908
  }
12914
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppointmentBookingComponent, deps: [{ token: RestService }, { token: EventsService }, { token: i3.MatDialog }, { token: i2$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
12909
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppointmentBookingComponent, deps: [{ token: RestService }, { token: EventsService }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
12915
12910
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AppointmentBookingComponent, isStandalone: true, selector: "simpo-appointment-booking", host: { listeners: { "document:click": "closeOnOutsideClick()" } }, ngImport: i0, template: "<section class=\"main_section\">\r\n <div class=\"main_header\">\r\n <div class=\"header d-flex justify-content-between align-items-center\">\r\n <div class=\"back-btn d-flex justify-content-center align-items-center cursor-pointer gap-2 mb-3\"\r\n (click)=\"goBack()\">\r\n <mat-icon>keyboard_backspace</mat-icon><span>Back to My Bookings</span>\r\n </div>\r\n <div class=\"header-title\">\r\n <h1>Book New Appointment</h1>\r\n <p>{{businessName ?? \"N/A\" }}</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"progress-bar\">\r\n <div class=\"progress-fill\" [style.width]=\"barWidth + '%'\"></div>\r\n </div>\r\n </div>\r\n <div class=\"main_body w-100 d-flex justify-content-center\"><ng-container *ngIf=\"selectedTab === 'serviceListing'\">\r\n <ng-container *ngTemplateOutlet=\"serviceListing\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedTab === 'locationListing'\">\r\n <ng-container *ngTemplateOutlet=\"locationListing\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedTab === 'staffListing'\">\r\n <ng-container *ngTemplateOutlet=\"staffListing\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedTab === 'dateSelection'\">\r\n <ng-container *ngTemplateOutlet=\"dateSelection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedTab==='contactDetails'\">\r\n <ng-container *ngTemplateOutlet=\"contactDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedTab==='paymentTab'\">\r\n <ng-container *ngTemplateOutlet=\"paymentTab\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedTab==='statusTemplate'\">\r\n <ng-container *ngTemplateOutlet=\"statusTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"main_footer d-flex justify-content-center align-items-center\" *ngIf=\"selectedTab!=='statusTemplate'\">\r\n <div class=\"footer-buttons\">\r\n <span class=\"back-footer-btn cursor-pointer\" (click)=\"previousStep()\">Back</span>\r\n <button class=\"continue-btn\" [disabled]=\"!activeButton\" (click)=\"nextStep()\"\r\n *ngIf=\"selectedTab!='paymentTab'\">{{!loader ? 'Continue' : 'Loading...'}}</button>\r\n <button class=\"complete_booking cursor-pointer\" *ngIf=\"selectedTab==='paymentTab'\"\r\n (click)=\"checkPayment()\">Complete Booking</button>\r\n </div>\r\n </div>\r\n</section>\r\n<ng-template #serviceListing>\r\n <div class=\"w-60 service_section\">\r\n <div class=\"service-selection\">\r\n <h2>Select a Service</h2>\r\n <p>Choose the service you'd like to book</p>\r\n\r\n <div class=\"services-grid\">\r\n <ng-container *ngFor=\"let service of serviceData\">\r\n <div class=\"\" (click)=\"selectService(service)\"\r\n [ngClass]=\"{ 'service-card-selected' : service?.selected, 'service-card': !service?.selected }\">\r\n <div class=\" service-header\">\r\n <div class=\"service-icon\"><mat-icon>person_outline</mat-icon></div>\r\n <div class=\"service-info\">\r\n <div class=\"service-title\">{{service?.name ? service?.name : 'N/A'}}</div>\r\n <div class=\"service-category\">Wellness</div>\r\n </div>\r\n <div>\r\n <div class=\"service-price\">\u20B9{{service?.priceDetails?.price ?\r\n service?.priceDetails?.price : 'N/A' }}</div>\r\n <div class=\"service-duration\">{{service?.duration ? service?.duration : 'N/A'}} min\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"service-description\">\r\n {{service?.description ? service?.description : 'N/A'}}\r\n </div>\r\n <div class=\"home-visit\" *ngIf=\"service?.homeAppointmentAvailable\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/982126c1758628863129furniture_16406103.png\">Home\r\n Visit Available</div>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- <div class=\"service-card\">\r\n <div class=\"service-header\">\r\n <div class=\"service-icon\">\uD83D\uDC64</div>\r\n <div class=\"service-info\">\r\n <div class=\"service-title\">General Consultation</div>\r\n <div class=\"service-category\">Medical</div>\r\n </div>\r\n <div>\r\n <div class=\"service-price\">\u20B9800</div>\r\n <div class=\"service-duration\">30 min</div>\r\n </div>\r\n </div>\r\n <div class=\"service-description\">\r\n Comprehensive health consultation\r\n </div>\r\n </div>\r\n\r\n <div class=\"service-card\">\r\n <div class=\"service-header\">\r\n <div class=\"service-icon\">\uD83E\uDDE0</div>\r\n <div class=\"service-info\">\r\n <div class=\"service-title\">Mental Health Counseling</div>\r\n <div class=\"service-category\">Mental Health</div>\r\n </div>\r\n <div>\r\n <div class=\"service-price\">\u20B91500</div>\r\n <div class=\"service-duration\">45 min</div>\r\n </div>\r\n </div>\r\n <div class=\"service-description\">\r\n Professional psychological support\r\n </div>\r\n <div class=\"home-visit\">Home Visit Available</div>\r\n </div>\r\n\r\n <div class=\"service-card\">\r\n <div class=\"service-header\">\r\n <div class=\"service-icon\">\u2702</div>\r\n <div class=\"service-info\">\r\n <div class=\"service-title\">Hair Cut & Styling</div>\r\n <div class=\"service-category\">Beauty</div>\r\n </div>\r\n <div>\r\n <div class=\"service-price\">\u20B91200</div>\r\n <div class=\"service-duration\">45 min</div>\r\n </div>\r\n </div>\r\n <div class=\"service-description\">\r\n Professional hair cutting and styling\r\n </div>\r\n <div class=\"home-visit\">Home Visit Available</div>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #locationListing>\r\n <div class=\"location_header\">\r\n <div class=\"header flex-column align-items-start\">\r\n <h1>Choose Location</h1>\r\n <p>Select where you'd like to receive the service</p>\r\n </div>\r\n\r\n <div class=\"location-list\">\r\n <ng-container *ngFor=\"let location of locationData\">\r\n <div (click)=\"selectLocation(location)\"\r\n [ngClass]=\"{ 'location-card-selected' : location?.selected, 'location-card': !location?.selected }\">\r\n <div class=\"location-content\">\r\n <div class=\"location-info\">\r\n <div class=\"location-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/427226c1758629157758store_3171510.png\">\r\n </div>\r\n <div class=\"location-details\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <h3>{{location?.storeName ? location?.storeName : 'N/A'}}</h3>\r\n <div class=\"distance\"><mat-icon>location_on</mat-icon> 2.3 km</div>\r\n </div>\r\n <p>{{location?.addressDetails?.addressLine}}, {{location?.addressDetails?.city}},\r\n {{location?.addressDetails?.state}} {{location?.pincode}}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- <div class=\"location-card\">\r\n <div class=\"location-content\">\r\n <div class=\"location-info\">\r\n <div class=\"location-icon branch-icon\"></div>\r\n <div class=\"location-details\">\r\n <h3>Branch Clinic</h3>\r\n <p>456 Care Avenue, Health Zone, Mumbai 400015</p>\r\n </div>\r\n </div>\r\n <div class=\"distance\">5.8 km</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"location-card\">\r\n <div class=\"location-content\">\r\n <div class=\"location-info\">\r\n <div class=\"location-icon home-icon\"></div>\r\n <div class=\"location-details\">\r\n <h3>Home Visit</h3>\r\n <p>Your Location</p>\r\n </div>\r\n </div>\r\n <div class=\"distance\">0 km</div>\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #staffListing>\r\n <div class=\"w-60 overflow-hidden\">\r\n <div class=\"d-flex w-100 h-100\">\r\n <div class=\"w-100\">\r\n <!-- Header Section -->\r\n <div class=\"staff-header mb-3\">\r\n <h1 class=\"mb-1\">Select Staff Member</h1>\r\n <p class=\"staff-subtitle mb-0\">Choose your preferred professional</p>\r\n </div>\r\n\r\n <!-- Staff Cards -->\r\n <div class=\"d-flex flex-column gap-4 staff-list\">\r\n <ng-container *ngFor=\"let staff of staffData\">\r\n <div class=\" staff-card card rounded-3 p-4\" (click)=\"selectStaff(staff)\">\r\n <div class=\"d-flex align-items-start justify-content-between\">\r\n <div class=\"d-flex align-items-start flex-grow-1\">\r\n <div\r\n class=\"staff-avatar rounded-circle d-flex align-items-center justify-content-center me-4\">\r\n {{staff?.staffName.slice(0,3).toUpperCase()}}\r\n </div>\r\n <div class=\"staff-details flex-grow-1\">\r\n <h3 class=\"staff-name\">{{staff?.staffName ? staff?.staffName : 'N/A'}}</h3>\r\n <p class=\"staff-specialty\">General Medicine</p>\r\n <p class=\"staff-description mb-0\">Experienced physician with 10+ years in\r\n general\r\n medicine and wellness care.</p>\r\n </div>\r\n </div>\r\n <div class=\"rating-section\">\r\n <div class=\"star-rating d-flex align-items-center\">\r\n <span class=\"star-icon\"></span>\r\n <span class=\"rating-number\">4.9</span>\r\n </div>\r\n <div class=\"review-count\">156 reviews</div>\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</ng-template>\r\n<ng-template #dateSelection>\r\n <div class=\"w-60\">\r\n <div class=\"row justify-content-center h-100\">\r\n <div class=\"col-12 h-100\">\r\n <div class=\"datetime-header mb-2\">\r\n <h1 class=\"mb-3\">Select Date & Time</h1>\r\n <p class=\"datetime-subtitle mb-0\">Choose when you'd like your appointment</p>\r\n </div>\r\n\r\n <!-- Main Content -->\r\n <div class=\"d-flex gap-4 main_container\">\r\n <!-- Left Column - Date Selection -->\r\n <div class=\"w-50\">\r\n <div class=\"section-card card rounded-3 p-4 h-100\">\r\n <h3 class=\"section-title\">Select Date</h3>\r\n\r\n <div class=\"date-picker-container d-flex align-items-center\"\r\n (click)=\"$event.stopPropagation()\">\r\n <input type=\"text\" class=\"form-control date-input border-0 rounded-2\"\r\n placeholder=\"dd-mm-yyyy\" [value]=\"selectedDateStr\" readonly\r\n (click)=\"toggleCalendar($event)\">\r\n\r\n <mat-icon class=\"ms-2\" (click)=\"toggleCalendar($event)\">calendar_today</mat-icon>\r\n </div>\r\n <div class=\"position-relative\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"datepicker-popover\" *ngIf=\"showCalendar\">\r\n <mat-calendar [(selected)]=\"selectedDate\" (selectedChange)=\"onDateSelected($event)\">\r\n </mat-calendar>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Right Column - Time Selection -->\r\n <div class=\"w-50\">\r\n <div class=\"section-card card h-100 rounded-3 p-4\">\r\n <h3 class=\"section-title\">Available Times</h3>\r\n\r\n <!-- Time Slots Grid -->\r\n <div class=\"row g-2 mb-4 overflow-scroll\">\r\n <div class=\"col-4\" *ngFor=\"let time of locationTiming\">\r\n <div class=\"time-slot rounded-2\" [class.selected]=\"time.selected\"\r\n (click)=\"selectTimeSlot(time)\">{{time ?\r\n time?.value.slice(0,5) : 'N/A'}}</div>\r\n </div>\r\n </div>\r\n\r\n <!-- Waitlist Section -->\r\n <div class=\"waitlist-section rounded-3\">\r\n <div class=\"d-flex align-items-start\">\r\n <div class=\"d-flex h-100 justify-content-between flex-column\"><span\r\n class=\"waitlist-icon check-icon\"></span>\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\">\r\n </div>\r\n <div>\r\n <div class=\"waitlist-title\">No slots available?</div>\r\n <div class=\"waitlist-description\">\r\n Add me to the waitlist for earlier\r\n availability\r\n </div>\r\n </div>\r\n </div>\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</ng-template>\r\n<ng-template #contactDetails>\r\n <div class=\"w-60\">\r\n <div class=\"d-flex\">\r\n <div class=\"h-100 w-100\">\r\n <!-- Header Section -->\r\n <div class=\"contact-header mb-2\">\r\n <h1 class=\"mb-0\">Contact Details</h1>\r\n <p class=\"contact-subtitle mb-0\">Provide your contact information</p>\r\n </div>\r\n\r\n <!-- Form Sections -->\r\n <div class=\"d-flex gap-3 details_container flex-column w-100\">\r\n <!-- Left Column - Personal Information -->\r\n <div class=\"d-flex gap-4\">\r\n <div class=\"w-50\">\r\n <div class=\"form-section card rounded-3 p-4 h-100\">\r\n <h3 class=\"section-title\">Personal Information</h3>\r\n\r\n <!-- Full Name -->\r\n <div class=\"mb-4\">\r\n <label class=\"form-label d-flex align-items-center\">\r\n Full Name\r\n <span class=\"required-asterisk\">*</span>\r\n </label>\r\n <input type=\"text\" class=\"form-control form-input rounded-2\"\r\n [(ngModel)]=\"appointmentPayload.customerDetail.name\"\r\n (ngModelChange)=\"checkRequiredValues()\">\r\n </div>\r\n\r\n <!-- Email Address -->\r\n <div class=\"mb-4\">\r\n <label class=\"form-label d-flex align-items-center\">\r\n Email Address\r\n <span class=\"required-asterisk\">*</span>\r\n </label>\r\n <input type=\"email\" class=\"form-control form-input rounded-2\"\r\n [(ngModel)]=\"appointmentPayload.customerDetail.email\"\r\n (ngModelChange)=\"checkRequiredValues()\">\r\n </div>\r\n\r\n <!-- Phone Number -->\r\n <div class=\"mb-0\">\r\n <label class=\"form-label d-flex align-items-center\">\r\n Phone Number\r\n <span class=\"required-asterisk\">*</span>\r\n </label>\r\n <input type=\"tel\" class=\"form-control form-input rounded-2\"\r\n [(ngModel)]=\"appointmentPayload.customerDetail.phoneNumber\"\r\n (ngModelChange)=\"checkRequiredValues()\">\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Right Column - Home Visit Details -->\r\n <div class=\"w-50\">\r\n <div class=\"form-section card rounded-3 p-4 h-100\">\r\n <h3 class=\"section-title\">Home Visit Details</h3>\r\n\r\n <!-- Home Address -->\r\n <div class=\"mb-4\">\r\n <label class=\"form-label d-flex align-items-center\">\r\n Home Address\r\n </label>\r\n <textarea class=\"form-control form-textarea rounded-2\"\r\n placeholder=\"Enter your complete address\"></textarea>\r\n </div>\r\n\r\n <!-- Special Instructions -->\r\n <div class=\"mb-0\">\r\n <label class=\"form-label d-flex align-items-center\">\r\n Special Instructions\r\n </label>\r\n <textarea class=\"form-control form-textarea rounded-2\"\r\n placeholder=\"Any special instructions for the professional (optional)\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"policies-container\">\r\n <!-- Header -->\r\n <h2 class=\"policies-title\">Policies & Terms</h2>\r\n\r\n <!-- Policy Items -->\r\n <div class=\"policy-items-container d-flex flex-column gap-3\">\r\n <!-- Cancellation Policy -->\r\n <div class=\"policy-item d-flex justify-content-between align-items-center\"\r\n (click)=\"showCancellationPolicy = !showCancellationPolicy\">\r\n <h3 class=\"policy-title\">Cancellation Policy</h3>\r\n <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\r\n *ngIf=\"!showCancellationPolicy\">keyboard_arrow_right</mat-icon>\r\n <mat-icon *ngIf=\"showCancellationPolicy\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\r\n *ngIf=\"showCancellationPolicy\">\r\n <span>&#8226; Free cancellation up to 24 hours before appointment</span>\r\n <span>&#8226; 50% charge for cancellations within 24 hours</span>\r\n <span>&#8226; No refund for no-shows</span>\r\n <span>&#8226; Emergency cancellations will be reviewed case by case</span>\r\n </div>\r\n\r\n <!-- Rescheduling Policy -->\r\n <div class=\"policy-item d-flex justify-content-between align-items-center\"\r\n (click)=\"showReducingPolicy = !showReducingPolicy\">\r\n <h3 class=\"policy-title\">Rescheduling Policy</h3>\r\n <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\r\n *ngIf=\"!showReducingPolicy\">keyboard_arrow_right</mat-icon>\r\n <mat-icon *ngIf=\"showReducingPolicy\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\r\n *ngIf=\"showReducingPolicy\">\r\n <span>&#8226; Free cancellation up to 24 hours before appointment</span>\r\n <span>&#8226; 50% charge for cancellations within 24 hours</span>\r\n <span>&#8226; No refund for no-shows</span>\r\n <span>&#8226; Emergency cancellations will be reviewed case by case</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Acceptance Section -->\r\n <div class=\"acceptance-section\">\r\n <div class=\"custom-checkbox\"></div>\r\n <p class=\"acceptance-text\">\r\n I understand and accept the cancellation & rescheduling policies and\r\n <a href=\"#\" class=\"terms-link\">Terms & Conditions<span\r\n class=\"external-link-icon\"></span></a>\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #paymentTab>\r\n <div class=\"w-60\">\r\n <div class=\"w-100 h-100\">\r\n <div class=\"w-100 d-flex justify-content-center align-items-center flex-column\">\r\n <!-- Header Section -->\r\n <div class=\"payment-header mb-3 w-100\">\r\n <h1 class=\"mb-0\">Payment & Confirmation</h1>\r\n <p class=\"payment-subtitle mb-0\">Review your booking and complete payment</p>\r\n </div>\r\n\r\n <!-- Booking Summary Card -->\r\n <div class=\"booking-summary-card w-50\">\r\n <h2 class=\"summary-title\">Booking Summary</h2>\r\n\r\n <!-- Service -->\r\n <div class=\"summary-row\">\r\n <div class=\"summary-label\">Service</div>\r\n <div class=\"summary-value\">{{selectedService?.name ? selectedService?.name : 'N/A'}}</div>\r\n </div>\r\n\r\n <!-- Professional -->\r\n <div class=\"summary-row\">\r\n <div class=\"summary-label\">Professional</div>\r\n <div class=\"summary-value\">{{selectedStaff?.staffName ? selectedStaff?.staffName : 'N/A'}}</div>\r\n </div>\r\n\r\n <!-- Location -->\r\n <div class=\"summary-row\">\r\n <div class=\"summary-label\">Location</div>\r\n <div class=\"summary-value\">{{selectedLocation?.storeName ? selectedLocation?.storeName : 'N/A'}}\r\n </div>\r\n </div>\r\n\r\n <!-- Date & Time -->\r\n <div class=\"summary-row\">\r\n <div class=\"summary-label\">Date & Time</div>\r\n <div class=\"summary-value\">{{selectedDate ? (selectedDate | date : 'shortData') :\r\n (selectedDateStr ? (selectedDateStr) : 'N/A')}} at\r\n 15:30</div>\r\n </div>\r\n\r\n <!-- Duration -->\r\n <div class=\"summary-row\">\r\n <div class=\"summary-label\">Duration</div>\r\n <div class=\"summary-value\">{{selectedService?.duration ? selectedService?.duration : 'N/A'}}\r\n minutes</div>\r\n </div>\r\n <div class=\"summary-row\">\r\n <div class=\"summary-label\">Tax Percent</div>\r\n <div class=\"summary-value\">{{selectedService?.priceDetails?.taxPercent ?\r\n selectedService?.priceDetails?.taxPercent : 'N/A'}}%</div>\r\n </div>\r\n <!-- Total -->\r\n <div class=\"summary-row total-row\">\r\n <div class=\"summary-label\">Total</div>\r\n <div class=\"summary-value\">\r\n <span class=\"currency-symbol\">\u20B9</span>{{selectedService?.priceDetails?.price ?\r\n selectedService?.priceDetails?.price : 'N/A'}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #statusTemplate>\r\n <div class=\"booking-confirmation\">\r\n <!-- Success Icon -->\r\n <div class=\"success-icon\">\r\n <div class=\"checkmark-circle\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/881293c1758695578518success.gif\"\r\n class=\"w-100 h-100\" *ngIf=\"apiStatus\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/325000c1758695564518fail.gif\"\r\n class=\"w-100 h-100\" *ngIf=\"!apiStatus\">\r\n </div>\r\n </div>\r\n\r\n <!-- Main Content -->\r\n <div class=\"confirmation-content\">\r\n <h1 class=\"confirmation-title\">{{apiStatus ? 'Booking Confirmed!' : 'Booking Failed'}}</h1>\r\n <p class=\"confirmation-message\">\r\n {{apiStatus ? 'Your appointment has been successfully booked.':'Failed to book you appointment. Please\r\n try again later'}}\r\n </p>\r\n\r\n <!-- Details Card -->\r\n <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\r\n <div class=\"details-card\">\r\n <h3 class=\"details-title\">Appointment Details</h3>\r\n\r\n <div class=\"details-row\">\r\n <span class=\"detail-label\">Service</span>\r\n <span class=\"detail-value\">{{appointmentPayload.serviceDetail?.name ?\r\n appointmentPayload.serviceDetail?.name : 'N/A'}}</span>\r\n </div>\r\n\r\n <div class=\"details-row\">\r\n <span class=\"detail-label\">Professional</span>\r\n <span class=\"detail-value\">{{appointmentPayload.staffDetail?.name ?\r\n appointmentPayload.staffDetail?.name : 'N/A'}}</span>\r\n </div>\r\n <div class=\"details-row\">\r\n <span class=\"detail-label\">Date & Time</span>\r\n <span class=\"detail-value\">{{appointmentPayload.bookingDate ?\r\n appointmentPayload.bookingDate.slice(0,8) :\r\n 'N/A'}} at\r\n {{appointmentPayload.startTime ? appointmentPayload.startTime : 'N/A'}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <!-- Action Buttons -->\r\n <!-- <div class=\"action-buttons\">\r\n <button class=\"btn btn-outline\">View My Bookings</button>\r\n <button class=\"btn btn-primary\">Back to Admin</button>\r\n </div> -->\r\n </div>\r\n </div>\r\n</ng-template>", styles: ["body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:#fff;color:#000;line-height:1.6}.main_header{padding:1%}.main_body{height:73vh}.header{display:flex;align-items:center;justify-content:space-between}.back-btn mat-icon{height:16px!important;width:20px!important;font-size:21px!important}.back-btn span{color:#000;font-size:15px;font-weight:500}.back-btn:hover{background-color:#f0f0f0}.header-title{flex-grow:1;margin-left:2rem}.header-title h1{font-size:20px;font-weight:600;margin-bottom:0}.header-title p{color:#666;font-size:14px}.step-indicator{font-size:14px;color:#000;font-weight:700}.progress-bar{width:100%;height:8px;background-color:#e0e0e0;margin-bottom:1rem;border-radius:10px;overflow:hidden}.w-60{width:60%!important}.progress-fill{height:100%;width:14.28%;background-color:#000}.service-selection{height:100%;overflow:hidden}.service-selection h2{font-size:20px;font-weight:600;margin-bottom:8px}.service-selection p{color:#666;font-size:16px;margin-bottom:1rem}.main_footer{border-top:1px solid black}.services-grid{display:grid;grid-template-columns:48% 48%;gap:15px;overflow-x:scroll;height:87%;padding-bottom:5px}.service-card{border:1px solid lightgrey;border-radius:8px;padding:24px;background-color:#fff;cursor:pointer;transition:all .3s ease;position:relative}.service-card:hover{background-color:#f9f9f9;box-shadow:0 4px 8px #0000001a}.service-card-selected{border:2px solid black;border-radius:8px;padding:24px;background-color:#fff;cursor:pointer;transition:all .3s ease;position:relative}.service-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:3rem}.service-info{flex-grow:1}.service-icon{width:40px;height:40px;border-radius:8px;background-color:#f0f0f0;display:flex;align-items:center;justify-content:center;margin-right:1rem;font-size:20px;margin-top:.2rem}.service-title{font-size:18px;font-weight:600;margin-bottom:4px}.service-category{background-color:#f0f0f0;color:#000;padding:1% 4%;border-radius:12px;font-size:12px;font-weight:500;display:inline-block}.service-price{font-size:17px;font-weight:700;color:#000}.service-duration{font-size:12px;color:#666;display:flex;justify-content:center;align-items:center}.service-description{color:#666;font-size:15px;margin-bottom:.5rem;line-height:1.5}.home-visit{display:flex;align-items:center;font-size:12px;color:#666;border:1px solid lightgrey;padding:.5% 1%;border-radius:4px;background-color:#fff;width:10vw;height:3vh;white-space:nowrap;justify-content:space-around}.home-visit img{width:18px}.footer-buttons{display:flex;justify-content:space-between;align-items:center;padding-top:20px;width:60%}.back-footer-btn{color:#000;padding:12px 24px;font-size:16px}.continue-btn{background-color:#000;color:#fff;border:2px solid black;padding:.5%;border-radius:4px;font-size:15px!important;font-weight:600;cursor:pointer;width:6vw!important}.continue-btn:hover{background-color:#333}.continue-btn:disabled{background-color:#ccc;border-color:#ccc;cursor:not-allowed}.location_header{width:60%;overflow:hidden}.location_header .header h1{font-size:20px;font-weight:600;margin-bottom:.25rem}.location_header .header p{font-size:16px;color:#888;font-weight:400}.location-list{display:flex;flex-direction:column;gap:20px;height:64vh;overflow-x:scroll;padding-bottom:1%}.location-card{border:1px solid lightgrey;border-radius:12px;padding:1.5rem 1.5rem 2rem;cursor:pointer;transition:all .3s ease}.location-card:hover{box-shadow:0 4px 8px #0000001a}.location-card-selected{border:1px solid black;border-radius:12px;padding:1.5rem 1.5rem 2rem;cursor:pointer;transition:all .3s ease}.location-content{display:flex;align-items:center;justify-content:space-between}.location-info{display:flex;align-items:center;flex-grow:1}.location-icon{width:40px;height:40px;background-color:#d3d3d3;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-right:20px}.location-icon img{width:28px}.location-details{width:95%}.location-details h3{font-size:16px;font-weight:600;margin-bottom:0}.location-details p{font-size:14px;color:#aaa;line-height:1.4;margin:0}.distance{display:flex;align-items:center;color:#888;font-size:14px;margin-left:20px}.distance mat-icon{width:18px!important;height:15px!important;font-size:17px}.staff-header h1{font-size:20px;font-weight:600}.staff-subtitle{font-size:16px;color:#888;font-weight:400}.staff-card{border:1px solid lightgrey;cursor:pointer;transition:all .3s ease;padding-bottom:2rem!important}.staff-card:hover{box-shadow:0 4px 8px #0000001a}.staff-card.selected{border-color:#666}.staff-avatar{width:64px;height:64px;background-color:gray;font-size:20px;font-weight:600;color:#fff}.staff-name{font-size:16px;font-weight:600;margin-bottom:0}.staff-specialty{font-size:14px;color:gray;margin-bottom:8px}.staff-description{font-size:14px;color:gray;line-height:1.4}.rating-section{display:flex;flex-direction:column;align-items:flex-end}.star-rating{color:gold;font-size:16px;margin-bottom:4px;width:100%}.rating-number{font-size:18px;font-weight:600;color:#000}.review-count{font-size:12px;color:#888}.star-icon:before{content:\"\\2b50\";margin-right:4px}.staff_section{width:60%;overflow:hidden}.staff-list{height:64vh;overflow-x:scroll;padding-bottom:1%}.datetime-header h1{font-size:20px;font-weight:600;margin:0!important}.main_container{height:64vh}.datetime-subtitle{font-size:16px;color:#888;font-weight:400}.section-card{border:1px solid lightgrey}.section-title{font-size:17px;font-weight:600;margin-bottom:20px}.date-picker-container{border:1px solid lightgrey}.date-picker-container mat-icon{height:17px;font-size:18px}.date-input{font-size:16px;padding:2%;width:30%}.time-slot{border:1px solid lightgrey;font-size:14px;font-weight:500;padding:6%;cursor:pointer;transition:all .3s ease;text-align:center;min-width:80px}.time-slot:hover{box-shadow:0 4px 8px #0000001a}.time-slot.selected{background-color:#555;border-color:#777;color:#fff}.waitlist-section{background-color:gray;border:none;padding:20px;max-height:13vh}.waitlist-icon{color:#4ade80;font-size:18px;margin-right:8px}.waitlist-title{color:#fff;font-size:16px;font-weight:500;margin-bottom:8px}.waitlist-description{color:#aaa;font-size:14px;margin-bottom:0}.check-icon:before{content:\"\\2713\"}.contact-header h1{font-size:20px;font-weight:600}.contact-subtitle{font-size:16px;color:#888;font-weight:400}.form-section{border:1px solid lightgrey}.section-title{font-size:16px;font-weight:600;margin-bottom:24px}.form-label{font-size:14px;font-weight:500;margin-bottom:8px}.required-asterisk{color:#ff6b6b;margin-left:4px}.form-input{border:1px solid lightgrey;font-size:16px;padding:2%;transition:all .3s ease}.form-input:focus{border-color:#777}.form-input::placeholder{color:#aaa;font-size:14px}.form-textarea{border:1px solid lightgrey;font-size:16px;padding:12px 16px;resize:vertical;max-height:120px;transition:all .3s ease}.form-textarea:focus{border-color:#777}.form-textarea::placeholder{color:#aaa;font-size:14px}.optional-label{color:#888;font-size:12px;font-style:italic}.details_container{height:65vh;overflow-x:scroll;padding-bottom:1%}.policies-container{background-color:#fff;border:1px solid lightgrey;padding:2rem;border-radius:12px}.policies-title{font-size:16px;font-weight:600;color:#000;margin-bottom:1rem}.policy-item{background-color:#fff;border:1px solid lightgrey;border-radius:8px;padding:1%;cursor:pointer;transition:all .3s ease}.cancellation_policies{padding:1% .5%;font-weight:500}.policy-item:hover{background-color:#f8f9fa;border-color:#ccc}.policy-item:last-of-type{margin-bottom:32px}.policy-title{font-size:14px;font-weight:500;color:#000;margin:0}.acceptance-section{display:flex;align-items:flex-start;gap:12px;margin-top:8px}.custom-checkbox{width:20px;height:20px;background-color:#fff;border:1px solid lightgrey;border-radius:4px;margin-top:2px;cursor:pointer;position:relative;flex-shrink:0;transition:all .3s ease}.custom-checkbox:hover{border-color:#999;background-color:#f8f9fa}.custom-checkbox.checked{background-color:#007bff;border-color:#007bff}.custom-checkbox.checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;font-weight:700}.acceptance-text{font-size:14px;color:#000;line-height:1.5;margin:0}.terms-link{color:#007bff;text-decoration:none;font-weight:500;position:relative}.terms-link:hover{color:#0056b3;text-decoration:underline}.external-link-icon{margin-left:4px;font-size:12px;opacity:.8}.external-link-icon:after{content:\"\\2197\"}.payment-header h1{font-size:20px;font-weight:600;color:#000}.payment-subtitle{font-size:16px;color:#666;font-weight:400}.booking-summary-card{background-color:#fff;border:1px solid lightgrey;padding:2%;border-radius:12px}.summary-title{font-size:18px;font-weight:600;color:#000;margin-bottom:32px}.summary-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0}.summary-row:last-child{border-bottom:none;padding-bottom:0}.summary-label{font-size:16px;color:#000;font-weight:500}.summary-value{font-size:16px;color:#000;font-weight:400;text-align:right}.total-row{margin-top:16px;padding-top:16px}.total-row .summary-label,.total-row .summary-value{font-size:20px;font-weight:600}.currency-symbol{font-size:18px}.complete_booking{background:#90ee90;border:none;padding:.5%;width:12vw!important;font-size:15px!important;font-weight:500;border-radius:4px}.datepicker-popover{position:absolute;top:0;left:0;z-index:1000;background:#fff;border-radius:.5rem;box-shadow:0 6px 24px #0000001f;overflow:hidden}.booking-confirmation{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center;width:60%;border-radius:10px}.success-icon{margin-bottom:1.5rem}.checkmark-circle{width:80px;height:80px;position:relative}.checkmark{width:80px;height:80px;border-radius:50%;display:block;stroke-width:3;stroke:#22c55e;stroke-miterlimit:10;animation:checkmark-fill .4s ease-in-out .4s forwards,checkmark-scale .3s ease-in-out .9s both}.checkmark-circle-path{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:3;stroke-miterlimit:10;stroke:#22c55e;fill:none;animation:checkmark-stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;stroke:#22c55e;stroke-width:3;animation:checkmark-stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes checkmark-stroke{to{stroke-dashoffset:0}}@keyframes checkmark-scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes checkmark-fill{to{box-shadow:inset 0 0 0 30px #22c55e}}.confirmation-content{width:100%;height:80%}.confirmation-title{font-size:18px;font-weight:700}.confirmation-message{font-size:1rem;margin-bottom:1rem;line-height:1.6;font-weight:500}.details-card{background:#ffffff1a;border:1px solid lightgrey;border-radius:16px;padding:1.5rem;margin-bottom:2rem;width:35vw}.details-title{font-size:1.25rem;font-weight:600;margin:0 0 1.5rem}.details-row{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.1)}.details-row:last-child{border-bottom:none}.detail-label{font-size:.9rem;font-weight:500}.detail-value{font-weight:600;font-size:1rem}.action-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.btn{padding:.75rem 1.5rem;border-radius:8px;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .2s ease;border:none;min-width:140px}.btn-outline{background:transparent;border:2px solid rgba(255,255,255,.3);color:#fff}.btn-outline:hover{background:#ffffff1a;border-color:#ffffff80}.btn-primary{background:#fff;color:#1f2937}.btn-primary:hover{background:#f3f4f6;transform:translateY(-1px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i15.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { 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"] }] }); }
12916
12911
  }
12917
12912
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppointmentBookingComponent, decorators: [{
12918
12913
  type: Component,
12919
12914
  args: [{ selector: 'simpo-appointment-booking', standalone: true, imports: [CdkDragPlaceholder, CommonModule, MatIcon, MatFormFieldModule, MatDatepickerModule, FormsModule], template: "<section class=\"main_section\">\r\n <div class=\"main_header\">\r\n <div class=\"header d-flex justify-content-between align-items-center\">\r\n <div class=\"back-btn d-flex justify-content-center align-items-center cursor-pointer gap-2 mb-3\"\r\n (click)=\"goBack()\">\r\n <mat-icon>keyboard_backspace</mat-icon><span>Back to My Bookings</span>\r\n </div>\r\n <div class=\"header-title\">\r\n <h1>Book New Appointment</h1>\r\n <p>{{businessName ?? \"N/A\" }}</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"progress-bar\">\r\n <div class=\"progress-fill\" [style.width]=\"barWidth + '%'\"></div>\r\n </div>\r\n </div>\r\n <div class=\"main_body w-100 d-flex justify-content-center\"><ng-container *ngIf=\"selectedTab === 'serviceListing'\">\r\n <ng-container *ngTemplateOutlet=\"serviceListing\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedTab === 'locationListing'\">\r\n <ng-container *ngTemplateOutlet=\"locationListing\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedTab === 'staffListing'\">\r\n <ng-container *ngTemplateOutlet=\"staffListing\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedTab === 'dateSelection'\">\r\n <ng-container *ngTemplateOutlet=\"dateSelection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedTab==='contactDetails'\">\r\n <ng-container *ngTemplateOutlet=\"contactDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedTab==='paymentTab'\">\r\n <ng-container *ngTemplateOutlet=\"paymentTab\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedTab==='statusTemplate'\">\r\n <ng-container *ngTemplateOutlet=\"statusTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"main_footer d-flex justify-content-center align-items-center\" *ngIf=\"selectedTab!=='statusTemplate'\">\r\n <div class=\"footer-buttons\">\r\n <span class=\"back-footer-btn cursor-pointer\" (click)=\"previousStep()\">Back</span>\r\n <button class=\"continue-btn\" [disabled]=\"!activeButton\" (click)=\"nextStep()\"\r\n *ngIf=\"selectedTab!='paymentTab'\">{{!loader ? 'Continue' : 'Loading...'}}</button>\r\n <button class=\"complete_booking cursor-pointer\" *ngIf=\"selectedTab==='paymentTab'\"\r\n (click)=\"checkPayment()\">Complete Booking</button>\r\n </div>\r\n </div>\r\n</section>\r\n<ng-template #serviceListing>\r\n <div class=\"w-60 service_section\">\r\n <div class=\"service-selection\">\r\n <h2>Select a Service</h2>\r\n <p>Choose the service you'd like to book</p>\r\n\r\n <div class=\"services-grid\">\r\n <ng-container *ngFor=\"let service of serviceData\">\r\n <div class=\"\" (click)=\"selectService(service)\"\r\n [ngClass]=\"{ 'service-card-selected' : service?.selected, 'service-card': !service?.selected }\">\r\n <div class=\" service-header\">\r\n <div class=\"service-icon\"><mat-icon>person_outline</mat-icon></div>\r\n <div class=\"service-info\">\r\n <div class=\"service-title\">{{service?.name ? service?.name : 'N/A'}}</div>\r\n <div class=\"service-category\">Wellness</div>\r\n </div>\r\n <div>\r\n <div class=\"service-price\">\u20B9{{service?.priceDetails?.price ?\r\n service?.priceDetails?.price : 'N/A' }}</div>\r\n <div class=\"service-duration\">{{service?.duration ? service?.duration : 'N/A'}} min\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"service-description\">\r\n {{service?.description ? service?.description : 'N/A'}}\r\n </div>\r\n <div class=\"home-visit\" *ngIf=\"service?.homeAppointmentAvailable\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/982126c1758628863129furniture_16406103.png\">Home\r\n Visit Available</div>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- <div class=\"service-card\">\r\n <div class=\"service-header\">\r\n <div class=\"service-icon\">\uD83D\uDC64</div>\r\n <div class=\"service-info\">\r\n <div class=\"service-title\">General Consultation</div>\r\n <div class=\"service-category\">Medical</div>\r\n </div>\r\n <div>\r\n <div class=\"service-price\">\u20B9800</div>\r\n <div class=\"service-duration\">30 min</div>\r\n </div>\r\n </div>\r\n <div class=\"service-description\">\r\n Comprehensive health consultation\r\n </div>\r\n </div>\r\n\r\n <div class=\"service-card\">\r\n <div class=\"service-header\">\r\n <div class=\"service-icon\">\uD83E\uDDE0</div>\r\n <div class=\"service-info\">\r\n <div class=\"service-title\">Mental Health Counseling</div>\r\n <div class=\"service-category\">Mental Health</div>\r\n </div>\r\n <div>\r\n <div class=\"service-price\">\u20B91500</div>\r\n <div class=\"service-duration\">45 min</div>\r\n </div>\r\n </div>\r\n <div class=\"service-description\">\r\n Professional psychological support\r\n </div>\r\n <div class=\"home-visit\">Home Visit Available</div>\r\n </div>\r\n\r\n <div class=\"service-card\">\r\n <div class=\"service-header\">\r\n <div class=\"service-icon\">\u2702</div>\r\n <div class=\"service-info\">\r\n <div class=\"service-title\">Hair Cut & Styling</div>\r\n <div class=\"service-category\">Beauty</div>\r\n </div>\r\n <div>\r\n <div class=\"service-price\">\u20B91200</div>\r\n <div class=\"service-duration\">45 min</div>\r\n </div>\r\n </div>\r\n <div class=\"service-description\">\r\n Professional hair cutting and styling\r\n </div>\r\n <div class=\"home-visit\">Home Visit Available</div>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #locationListing>\r\n <div class=\"location_header\">\r\n <div class=\"header flex-column align-items-start\">\r\n <h1>Choose Location</h1>\r\n <p>Select where you'd like to receive the service</p>\r\n </div>\r\n\r\n <div class=\"location-list\">\r\n <ng-container *ngFor=\"let location of locationData\">\r\n <div (click)=\"selectLocation(location)\"\r\n [ngClass]=\"{ 'location-card-selected' : location?.selected, 'location-card': !location?.selected }\">\r\n <div class=\"location-content\">\r\n <div class=\"location-info\">\r\n <div class=\"location-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/427226c1758629157758store_3171510.png\">\r\n </div>\r\n <div class=\"location-details\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <h3>{{location?.storeName ? location?.storeName : 'N/A'}}</h3>\r\n <div class=\"distance\"><mat-icon>location_on</mat-icon> 2.3 km</div>\r\n </div>\r\n <p>{{location?.addressDetails?.addressLine}}, {{location?.addressDetails?.city}},\r\n {{location?.addressDetails?.state}} {{location?.pincode}}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- <div class=\"location-card\">\r\n <div class=\"location-content\">\r\n <div class=\"location-info\">\r\n <div class=\"location-icon branch-icon\"></div>\r\n <div class=\"location-details\">\r\n <h3>Branch Clinic</h3>\r\n <p>456 Care Avenue, Health Zone, Mumbai 400015</p>\r\n </div>\r\n </div>\r\n <div class=\"distance\">5.8 km</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"location-card\">\r\n <div class=\"location-content\">\r\n <div class=\"location-info\">\r\n <div class=\"location-icon home-icon\"></div>\r\n <div class=\"location-details\">\r\n <h3>Home Visit</h3>\r\n <p>Your Location</p>\r\n </div>\r\n </div>\r\n <div class=\"distance\">0 km</div>\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #staffListing>\r\n <div class=\"w-60 overflow-hidden\">\r\n <div class=\"d-flex w-100 h-100\">\r\n <div class=\"w-100\">\r\n <!-- Header Section -->\r\n <div class=\"staff-header mb-3\">\r\n <h1 class=\"mb-1\">Select Staff Member</h1>\r\n <p class=\"staff-subtitle mb-0\">Choose your preferred professional</p>\r\n </div>\r\n\r\n <!-- Staff Cards -->\r\n <div class=\"d-flex flex-column gap-4 staff-list\">\r\n <ng-container *ngFor=\"let staff of staffData\">\r\n <div class=\" staff-card card rounded-3 p-4\" (click)=\"selectStaff(staff)\">\r\n <div class=\"d-flex align-items-start justify-content-between\">\r\n <div class=\"d-flex align-items-start flex-grow-1\">\r\n <div\r\n class=\"staff-avatar rounded-circle d-flex align-items-center justify-content-center me-4\">\r\n {{staff?.staffName.slice(0,3).toUpperCase()}}\r\n </div>\r\n <div class=\"staff-details flex-grow-1\">\r\n <h3 class=\"staff-name\">{{staff?.staffName ? staff?.staffName : 'N/A'}}</h3>\r\n <p class=\"staff-specialty\">General Medicine</p>\r\n <p class=\"staff-description mb-0\">Experienced physician with 10+ years in\r\n general\r\n medicine and wellness care.</p>\r\n </div>\r\n </div>\r\n <div class=\"rating-section\">\r\n <div class=\"star-rating d-flex align-items-center\">\r\n <span class=\"star-icon\"></span>\r\n <span class=\"rating-number\">4.9</span>\r\n </div>\r\n <div class=\"review-count\">156 reviews</div>\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</ng-template>\r\n<ng-template #dateSelection>\r\n <div class=\"w-60\">\r\n <div class=\"row justify-content-center h-100\">\r\n <div class=\"col-12 h-100\">\r\n <div class=\"datetime-header mb-2\">\r\n <h1 class=\"mb-3\">Select Date & Time</h1>\r\n <p class=\"datetime-subtitle mb-0\">Choose when you'd like your appointment</p>\r\n </div>\r\n\r\n <!-- Main Content -->\r\n <div class=\"d-flex gap-4 main_container\">\r\n <!-- Left Column - Date Selection -->\r\n <div class=\"w-50\">\r\n <div class=\"section-card card rounded-3 p-4 h-100\">\r\n <h3 class=\"section-title\">Select Date</h3>\r\n\r\n <div class=\"date-picker-container d-flex align-items-center\"\r\n (click)=\"$event.stopPropagation()\">\r\n <input type=\"text\" class=\"form-control date-input border-0 rounded-2\"\r\n placeholder=\"dd-mm-yyyy\" [value]=\"selectedDateStr\" readonly\r\n (click)=\"toggleCalendar($event)\">\r\n\r\n <mat-icon class=\"ms-2\" (click)=\"toggleCalendar($event)\">calendar_today</mat-icon>\r\n </div>\r\n <div class=\"position-relative\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"datepicker-popover\" *ngIf=\"showCalendar\">\r\n <mat-calendar [(selected)]=\"selectedDate\" (selectedChange)=\"onDateSelected($event)\">\r\n </mat-calendar>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Right Column - Time Selection -->\r\n <div class=\"w-50\">\r\n <div class=\"section-card card h-100 rounded-3 p-4\">\r\n <h3 class=\"section-title\">Available Times</h3>\r\n\r\n <!-- Time Slots Grid -->\r\n <div class=\"row g-2 mb-4 overflow-scroll\">\r\n <div class=\"col-4\" *ngFor=\"let time of locationTiming\">\r\n <div class=\"time-slot rounded-2\" [class.selected]=\"time.selected\"\r\n (click)=\"selectTimeSlot(time)\">{{time ?\r\n time?.value.slice(0,5) : 'N/A'}}</div>\r\n </div>\r\n </div>\r\n\r\n <!-- Waitlist Section -->\r\n <div class=\"waitlist-section rounded-3\">\r\n <div class=\"d-flex align-items-start\">\r\n <div class=\"d-flex h-100 justify-content-between flex-column\"><span\r\n class=\"waitlist-icon check-icon\"></span>\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\">\r\n </div>\r\n <div>\r\n <div class=\"waitlist-title\">No slots available?</div>\r\n <div class=\"waitlist-description\">\r\n Add me to the waitlist for earlier\r\n availability\r\n </div>\r\n </div>\r\n </div>\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</ng-template>\r\n<ng-template #contactDetails>\r\n <div class=\"w-60\">\r\n <div class=\"d-flex\">\r\n <div class=\"h-100 w-100\">\r\n <!-- Header Section -->\r\n <div class=\"contact-header mb-2\">\r\n <h1 class=\"mb-0\">Contact Details</h1>\r\n <p class=\"contact-subtitle mb-0\">Provide your contact information</p>\r\n </div>\r\n\r\n <!-- Form Sections -->\r\n <div class=\"d-flex gap-3 details_container flex-column w-100\">\r\n <!-- Left Column - Personal Information -->\r\n <div class=\"d-flex gap-4\">\r\n <div class=\"w-50\">\r\n <div class=\"form-section card rounded-3 p-4 h-100\">\r\n <h3 class=\"section-title\">Personal Information</h3>\r\n\r\n <!-- Full Name -->\r\n <div class=\"mb-4\">\r\n <label class=\"form-label d-flex align-items-center\">\r\n Full Name\r\n <span class=\"required-asterisk\">*</span>\r\n </label>\r\n <input type=\"text\" class=\"form-control form-input rounded-2\"\r\n [(ngModel)]=\"appointmentPayload.customerDetail.name\"\r\n (ngModelChange)=\"checkRequiredValues()\">\r\n </div>\r\n\r\n <!-- Email Address -->\r\n <div class=\"mb-4\">\r\n <label class=\"form-label d-flex align-items-center\">\r\n Email Address\r\n <span class=\"required-asterisk\">*</span>\r\n </label>\r\n <input type=\"email\" class=\"form-control form-input rounded-2\"\r\n [(ngModel)]=\"appointmentPayload.customerDetail.email\"\r\n (ngModelChange)=\"checkRequiredValues()\">\r\n </div>\r\n\r\n <!-- Phone Number -->\r\n <div class=\"mb-0\">\r\n <label class=\"form-label d-flex align-items-center\">\r\n Phone Number\r\n <span class=\"required-asterisk\">*</span>\r\n </label>\r\n <input type=\"tel\" class=\"form-control form-input rounded-2\"\r\n [(ngModel)]=\"appointmentPayload.customerDetail.phoneNumber\"\r\n (ngModelChange)=\"checkRequiredValues()\">\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Right Column - Home Visit Details -->\r\n <div class=\"w-50\">\r\n <div class=\"form-section card rounded-3 p-4 h-100\">\r\n <h3 class=\"section-title\">Home Visit Details</h3>\r\n\r\n <!-- Home Address -->\r\n <div class=\"mb-4\">\r\n <label class=\"form-label d-flex align-items-center\">\r\n Home Address\r\n </label>\r\n <textarea class=\"form-control form-textarea rounded-2\"\r\n placeholder=\"Enter your complete address\"></textarea>\r\n </div>\r\n\r\n <!-- Special Instructions -->\r\n <div class=\"mb-0\">\r\n <label class=\"form-label d-flex align-items-center\">\r\n Special Instructions\r\n </label>\r\n <textarea class=\"form-control form-textarea rounded-2\"\r\n placeholder=\"Any special instructions for the professional (optional)\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"policies-container\">\r\n <!-- Header -->\r\n <h2 class=\"policies-title\">Policies & Terms</h2>\r\n\r\n <!-- Policy Items -->\r\n <div class=\"policy-items-container d-flex flex-column gap-3\">\r\n <!-- Cancellation Policy -->\r\n <div class=\"policy-item d-flex justify-content-between align-items-center\"\r\n (click)=\"showCancellationPolicy = !showCancellationPolicy\">\r\n <h3 class=\"policy-title\">Cancellation Policy</h3>\r\n <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\r\n *ngIf=\"!showCancellationPolicy\">keyboard_arrow_right</mat-icon>\r\n <mat-icon *ngIf=\"showCancellationPolicy\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\r\n *ngIf=\"showCancellationPolicy\">\r\n <span>&#8226; Free cancellation up to 24 hours before appointment</span>\r\n <span>&#8226; 50% charge for cancellations within 24 hours</span>\r\n <span>&#8226; No refund for no-shows</span>\r\n <span>&#8226; Emergency cancellations will be reviewed case by case</span>\r\n </div>\r\n\r\n <!-- Rescheduling Policy -->\r\n <div class=\"policy-item d-flex justify-content-between align-items-center\"\r\n (click)=\"showReducingPolicy = !showReducingPolicy\">\r\n <h3 class=\"policy-title\">Rescheduling Policy</h3>\r\n <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\r\n *ngIf=\"!showReducingPolicy\">keyboard_arrow_right</mat-icon>\r\n <mat-icon *ngIf=\"showReducingPolicy\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\r\n *ngIf=\"showReducingPolicy\">\r\n <span>&#8226; Free cancellation up to 24 hours before appointment</span>\r\n <span>&#8226; 50% charge for cancellations within 24 hours</span>\r\n <span>&#8226; No refund for no-shows</span>\r\n <span>&#8226; Emergency cancellations will be reviewed case by case</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Acceptance Section -->\r\n <div class=\"acceptance-section\">\r\n <div class=\"custom-checkbox\"></div>\r\n <p class=\"acceptance-text\">\r\n I understand and accept the cancellation & rescheduling policies and\r\n <a href=\"#\" class=\"terms-link\">Terms & Conditions<span\r\n class=\"external-link-icon\"></span></a>\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #paymentTab>\r\n <div class=\"w-60\">\r\n <div class=\"w-100 h-100\">\r\n <div class=\"w-100 d-flex justify-content-center align-items-center flex-column\">\r\n <!-- Header Section -->\r\n <div class=\"payment-header mb-3 w-100\">\r\n <h1 class=\"mb-0\">Payment & Confirmation</h1>\r\n <p class=\"payment-subtitle mb-0\">Review your booking and complete payment</p>\r\n </div>\r\n\r\n <!-- Booking Summary Card -->\r\n <div class=\"booking-summary-card w-50\">\r\n <h2 class=\"summary-title\">Booking Summary</h2>\r\n\r\n <!-- Service -->\r\n <div class=\"summary-row\">\r\n <div class=\"summary-label\">Service</div>\r\n <div class=\"summary-value\">{{selectedService?.name ? selectedService?.name : 'N/A'}}</div>\r\n </div>\r\n\r\n <!-- Professional -->\r\n <div class=\"summary-row\">\r\n <div class=\"summary-label\">Professional</div>\r\n <div class=\"summary-value\">{{selectedStaff?.staffName ? selectedStaff?.staffName : 'N/A'}}</div>\r\n </div>\r\n\r\n <!-- Location -->\r\n <div class=\"summary-row\">\r\n <div class=\"summary-label\">Location</div>\r\n <div class=\"summary-value\">{{selectedLocation?.storeName ? selectedLocation?.storeName : 'N/A'}}\r\n </div>\r\n </div>\r\n\r\n <!-- Date & Time -->\r\n <div class=\"summary-row\">\r\n <div class=\"summary-label\">Date & Time</div>\r\n <div class=\"summary-value\">{{selectedDate ? (selectedDate | date : 'shortData') :\r\n (selectedDateStr ? (selectedDateStr) : 'N/A')}} at\r\n 15:30</div>\r\n </div>\r\n\r\n <!-- Duration -->\r\n <div class=\"summary-row\">\r\n <div class=\"summary-label\">Duration</div>\r\n <div class=\"summary-value\">{{selectedService?.duration ? selectedService?.duration : 'N/A'}}\r\n minutes</div>\r\n </div>\r\n <div class=\"summary-row\">\r\n <div class=\"summary-label\">Tax Percent</div>\r\n <div class=\"summary-value\">{{selectedService?.priceDetails?.taxPercent ?\r\n selectedService?.priceDetails?.taxPercent : 'N/A'}}%</div>\r\n </div>\r\n <!-- Total -->\r\n <div class=\"summary-row total-row\">\r\n <div class=\"summary-label\">Total</div>\r\n <div class=\"summary-value\">\r\n <span class=\"currency-symbol\">\u20B9</span>{{selectedService?.priceDetails?.price ?\r\n selectedService?.priceDetails?.price : 'N/A'}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #statusTemplate>\r\n <div class=\"booking-confirmation\">\r\n <!-- Success Icon -->\r\n <div class=\"success-icon\">\r\n <div class=\"checkmark-circle\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/881293c1758695578518success.gif\"\r\n class=\"w-100 h-100\" *ngIf=\"apiStatus\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/325000c1758695564518fail.gif\"\r\n class=\"w-100 h-100\" *ngIf=\"!apiStatus\">\r\n </div>\r\n </div>\r\n\r\n <!-- Main Content -->\r\n <div class=\"confirmation-content\">\r\n <h1 class=\"confirmation-title\">{{apiStatus ? 'Booking Confirmed!' : 'Booking Failed'}}</h1>\r\n <p class=\"confirmation-message\">\r\n {{apiStatus ? 'Your appointment has been successfully booked.':'Failed to book you appointment. Please\r\n try again later'}}\r\n </p>\r\n\r\n <!-- Details Card -->\r\n <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\r\n <div class=\"details-card\">\r\n <h3 class=\"details-title\">Appointment Details</h3>\r\n\r\n <div class=\"details-row\">\r\n <span class=\"detail-label\">Service</span>\r\n <span class=\"detail-value\">{{appointmentPayload.serviceDetail?.name ?\r\n appointmentPayload.serviceDetail?.name : 'N/A'}}</span>\r\n </div>\r\n\r\n <div class=\"details-row\">\r\n <span class=\"detail-label\">Professional</span>\r\n <span class=\"detail-value\">{{appointmentPayload.staffDetail?.name ?\r\n appointmentPayload.staffDetail?.name : 'N/A'}}</span>\r\n </div>\r\n <div class=\"details-row\">\r\n <span class=\"detail-label\">Date & Time</span>\r\n <span class=\"detail-value\">{{appointmentPayload.bookingDate ?\r\n appointmentPayload.bookingDate.slice(0,8) :\r\n 'N/A'}} at\r\n {{appointmentPayload.startTime ? appointmentPayload.startTime : 'N/A'}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <!-- Action Buttons -->\r\n <!-- <div class=\"action-buttons\">\r\n <button class=\"btn btn-outline\">View My Bookings</button>\r\n <button class=\"btn btn-primary\">Back to Admin</button>\r\n </div> -->\r\n </div>\r\n </div>\r\n</ng-template>", styles: ["body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:#fff;color:#000;line-height:1.6}.main_header{padding:1%}.main_body{height:73vh}.header{display:flex;align-items:center;justify-content:space-between}.back-btn mat-icon{height:16px!important;width:20px!important;font-size:21px!important}.back-btn span{color:#000;font-size:15px;font-weight:500}.back-btn:hover{background-color:#f0f0f0}.header-title{flex-grow:1;margin-left:2rem}.header-title h1{font-size:20px;font-weight:600;margin-bottom:0}.header-title p{color:#666;font-size:14px}.step-indicator{font-size:14px;color:#000;font-weight:700}.progress-bar{width:100%;height:8px;background-color:#e0e0e0;margin-bottom:1rem;border-radius:10px;overflow:hidden}.w-60{width:60%!important}.progress-fill{height:100%;width:14.28%;background-color:#000}.service-selection{height:100%;overflow:hidden}.service-selection h2{font-size:20px;font-weight:600;margin-bottom:8px}.service-selection p{color:#666;font-size:16px;margin-bottom:1rem}.main_footer{border-top:1px solid black}.services-grid{display:grid;grid-template-columns:48% 48%;gap:15px;overflow-x:scroll;height:87%;padding-bottom:5px}.service-card{border:1px solid lightgrey;border-radius:8px;padding:24px;background-color:#fff;cursor:pointer;transition:all .3s ease;position:relative}.service-card:hover{background-color:#f9f9f9;box-shadow:0 4px 8px #0000001a}.service-card-selected{border:2px solid black;border-radius:8px;padding:24px;background-color:#fff;cursor:pointer;transition:all .3s ease;position:relative}.service-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:3rem}.service-info{flex-grow:1}.service-icon{width:40px;height:40px;border-radius:8px;background-color:#f0f0f0;display:flex;align-items:center;justify-content:center;margin-right:1rem;font-size:20px;margin-top:.2rem}.service-title{font-size:18px;font-weight:600;margin-bottom:4px}.service-category{background-color:#f0f0f0;color:#000;padding:1% 4%;border-radius:12px;font-size:12px;font-weight:500;display:inline-block}.service-price{font-size:17px;font-weight:700;color:#000}.service-duration{font-size:12px;color:#666;display:flex;justify-content:center;align-items:center}.service-description{color:#666;font-size:15px;margin-bottom:.5rem;line-height:1.5}.home-visit{display:flex;align-items:center;font-size:12px;color:#666;border:1px solid lightgrey;padding:.5% 1%;border-radius:4px;background-color:#fff;width:10vw;height:3vh;white-space:nowrap;justify-content:space-around}.home-visit img{width:18px}.footer-buttons{display:flex;justify-content:space-between;align-items:center;padding-top:20px;width:60%}.back-footer-btn{color:#000;padding:12px 24px;font-size:16px}.continue-btn{background-color:#000;color:#fff;border:2px solid black;padding:.5%;border-radius:4px;font-size:15px!important;font-weight:600;cursor:pointer;width:6vw!important}.continue-btn:hover{background-color:#333}.continue-btn:disabled{background-color:#ccc;border-color:#ccc;cursor:not-allowed}.location_header{width:60%;overflow:hidden}.location_header .header h1{font-size:20px;font-weight:600;margin-bottom:.25rem}.location_header .header p{font-size:16px;color:#888;font-weight:400}.location-list{display:flex;flex-direction:column;gap:20px;height:64vh;overflow-x:scroll;padding-bottom:1%}.location-card{border:1px solid lightgrey;border-radius:12px;padding:1.5rem 1.5rem 2rem;cursor:pointer;transition:all .3s ease}.location-card:hover{box-shadow:0 4px 8px #0000001a}.location-card-selected{border:1px solid black;border-radius:12px;padding:1.5rem 1.5rem 2rem;cursor:pointer;transition:all .3s ease}.location-content{display:flex;align-items:center;justify-content:space-between}.location-info{display:flex;align-items:center;flex-grow:1}.location-icon{width:40px;height:40px;background-color:#d3d3d3;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-right:20px}.location-icon img{width:28px}.location-details{width:95%}.location-details h3{font-size:16px;font-weight:600;margin-bottom:0}.location-details p{font-size:14px;color:#aaa;line-height:1.4;margin:0}.distance{display:flex;align-items:center;color:#888;font-size:14px;margin-left:20px}.distance mat-icon{width:18px!important;height:15px!important;font-size:17px}.staff-header h1{font-size:20px;font-weight:600}.staff-subtitle{font-size:16px;color:#888;font-weight:400}.staff-card{border:1px solid lightgrey;cursor:pointer;transition:all .3s ease;padding-bottom:2rem!important}.staff-card:hover{box-shadow:0 4px 8px #0000001a}.staff-card.selected{border-color:#666}.staff-avatar{width:64px;height:64px;background-color:gray;font-size:20px;font-weight:600;color:#fff}.staff-name{font-size:16px;font-weight:600;margin-bottom:0}.staff-specialty{font-size:14px;color:gray;margin-bottom:8px}.staff-description{font-size:14px;color:gray;line-height:1.4}.rating-section{display:flex;flex-direction:column;align-items:flex-end}.star-rating{color:gold;font-size:16px;margin-bottom:4px;width:100%}.rating-number{font-size:18px;font-weight:600;color:#000}.review-count{font-size:12px;color:#888}.star-icon:before{content:\"\\2b50\";margin-right:4px}.staff_section{width:60%;overflow:hidden}.staff-list{height:64vh;overflow-x:scroll;padding-bottom:1%}.datetime-header h1{font-size:20px;font-weight:600;margin:0!important}.main_container{height:64vh}.datetime-subtitle{font-size:16px;color:#888;font-weight:400}.section-card{border:1px solid lightgrey}.section-title{font-size:17px;font-weight:600;margin-bottom:20px}.date-picker-container{border:1px solid lightgrey}.date-picker-container mat-icon{height:17px;font-size:18px}.date-input{font-size:16px;padding:2%;width:30%}.time-slot{border:1px solid lightgrey;font-size:14px;font-weight:500;padding:6%;cursor:pointer;transition:all .3s ease;text-align:center;min-width:80px}.time-slot:hover{box-shadow:0 4px 8px #0000001a}.time-slot.selected{background-color:#555;border-color:#777;color:#fff}.waitlist-section{background-color:gray;border:none;padding:20px;max-height:13vh}.waitlist-icon{color:#4ade80;font-size:18px;margin-right:8px}.waitlist-title{color:#fff;font-size:16px;font-weight:500;margin-bottom:8px}.waitlist-description{color:#aaa;font-size:14px;margin-bottom:0}.check-icon:before{content:\"\\2713\"}.contact-header h1{font-size:20px;font-weight:600}.contact-subtitle{font-size:16px;color:#888;font-weight:400}.form-section{border:1px solid lightgrey}.section-title{font-size:16px;font-weight:600;margin-bottom:24px}.form-label{font-size:14px;font-weight:500;margin-bottom:8px}.required-asterisk{color:#ff6b6b;margin-left:4px}.form-input{border:1px solid lightgrey;font-size:16px;padding:2%;transition:all .3s ease}.form-input:focus{border-color:#777}.form-input::placeholder{color:#aaa;font-size:14px}.form-textarea{border:1px solid lightgrey;font-size:16px;padding:12px 16px;resize:vertical;max-height:120px;transition:all .3s ease}.form-textarea:focus{border-color:#777}.form-textarea::placeholder{color:#aaa;font-size:14px}.optional-label{color:#888;font-size:12px;font-style:italic}.details_container{height:65vh;overflow-x:scroll;padding-bottom:1%}.policies-container{background-color:#fff;border:1px solid lightgrey;padding:2rem;border-radius:12px}.policies-title{font-size:16px;font-weight:600;color:#000;margin-bottom:1rem}.policy-item{background-color:#fff;border:1px solid lightgrey;border-radius:8px;padding:1%;cursor:pointer;transition:all .3s ease}.cancellation_policies{padding:1% .5%;font-weight:500}.policy-item:hover{background-color:#f8f9fa;border-color:#ccc}.policy-item:last-of-type{margin-bottom:32px}.policy-title{font-size:14px;font-weight:500;color:#000;margin:0}.acceptance-section{display:flex;align-items:flex-start;gap:12px;margin-top:8px}.custom-checkbox{width:20px;height:20px;background-color:#fff;border:1px solid lightgrey;border-radius:4px;margin-top:2px;cursor:pointer;position:relative;flex-shrink:0;transition:all .3s ease}.custom-checkbox:hover{border-color:#999;background-color:#f8f9fa}.custom-checkbox.checked{background-color:#007bff;border-color:#007bff}.custom-checkbox.checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;font-weight:700}.acceptance-text{font-size:14px;color:#000;line-height:1.5;margin:0}.terms-link{color:#007bff;text-decoration:none;font-weight:500;position:relative}.terms-link:hover{color:#0056b3;text-decoration:underline}.external-link-icon{margin-left:4px;font-size:12px;opacity:.8}.external-link-icon:after{content:\"\\2197\"}.payment-header h1{font-size:20px;font-weight:600;color:#000}.payment-subtitle{font-size:16px;color:#666;font-weight:400}.booking-summary-card{background-color:#fff;border:1px solid lightgrey;padding:2%;border-radius:12px}.summary-title{font-size:18px;font-weight:600;color:#000;margin-bottom:32px}.summary-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0}.summary-row:last-child{border-bottom:none;padding-bottom:0}.summary-label{font-size:16px;color:#000;font-weight:500}.summary-value{font-size:16px;color:#000;font-weight:400;text-align:right}.total-row{margin-top:16px;padding-top:16px}.total-row .summary-label,.total-row .summary-value{font-size:20px;font-weight:600}.currency-symbol{font-size:18px}.complete_booking{background:#90ee90;border:none;padding:.5%;width:12vw!important;font-size:15px!important;font-weight:500;border-radius:4px}.datepicker-popover{position:absolute;top:0;left:0;z-index:1000;background:#fff;border-radius:.5rem;box-shadow:0 6px 24px #0000001f;overflow:hidden}.booking-confirmation{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center;width:60%;border-radius:10px}.success-icon{margin-bottom:1.5rem}.checkmark-circle{width:80px;height:80px;position:relative}.checkmark{width:80px;height:80px;border-radius:50%;display:block;stroke-width:3;stroke:#22c55e;stroke-miterlimit:10;animation:checkmark-fill .4s ease-in-out .4s forwards,checkmark-scale .3s ease-in-out .9s both}.checkmark-circle-path{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:3;stroke-miterlimit:10;stroke:#22c55e;fill:none;animation:checkmark-stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;stroke:#22c55e;stroke-width:3;animation:checkmark-stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes checkmark-stroke{to{stroke-dashoffset:0}}@keyframes checkmark-scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes checkmark-fill{to{box-shadow:inset 0 0 0 30px #22c55e}}.confirmation-content{width:100%;height:80%}.confirmation-title{font-size:18px;font-weight:700}.confirmation-message{font-size:1rem;margin-bottom:1rem;line-height:1.6;font-weight:500}.details-card{background:#ffffff1a;border:1px solid lightgrey;border-radius:16px;padding:1.5rem;margin-bottom:2rem;width:35vw}.details-title{font-size:1.25rem;font-weight:600;margin:0 0 1.5rem}.details-row{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.1)}.details-row:last-child{border-bottom:none}.detail-label{font-size:.9rem;font-weight:500}.detail-value{font-weight:600;font-size:1rem}.action-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.btn{padding:.75rem 1.5rem;border-radius:8px;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .2s ease;border:none;min-width:140px}.btn-outline{background:transparent;border:2px solid rgba(255,255,255,.3);color:#fff}.btn-outline:hover{background:#ffffff1a;border-color:#ffffff80}.btn-primary{background:#fff;color:#1f2937}.btn-primary:hover{background:#f3f4f6;transform:translateY(-1px)}\n"] }]
12920
- }], ctorParameters: () => [{ type: RestService }, { type: EventsService }, { type: i3.MatDialog }, { type: i2$1.MatSnackBar }], propDecorators: { closeOnOutsideClick: [{
12915
+ }], ctorParameters: () => [{ type: RestService }, { type: EventsService }, { type: i2$2.Router }], propDecorators: { closeOnOutsideClick: [{
12921
12916
  type: HostListener,
12922
12917
  args: ['document:click']
12923
12918
  }] } });
@@ -13650,7 +13645,7 @@ class AppointmentFormComponent extends BaseSection {
13650
13645
  return `linear-gradient(45deg, ${this.styles?.background?.accentColor} 0%, ${this.styles?.background?.secondaryAccentColor} 100%)`;
13651
13646
  }
13652
13647
  }
13653
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppointmentFormComponent, deps: [{ token: EventsService }, { token: i3.MatDialog }, { token: RestService }, { token: i2$1.MatSnackBar }, { token: i4.DatePipe }, { token: i2$2.Router }, { token: LOCAL_STORAGE }], target: i0.ɵɵFactoryTarget.Component }); }
13648
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppointmentFormComponent, deps: [{ token: EventsService }, { token: i1$1.MatDialog }, { token: RestService }, { token: i2$1.MatSnackBar }, { token: i4.DatePipe }, { token: i2$2.Router }, { token: LOCAL_STORAGE }], target: i0.ɵɵFactoryTarget.Component }); }
13654
13649
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AppointmentFormComponent, isStandalone: true, selector: "simpo-appointment-form", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [DatePipe], usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\"\r\n [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage , 'd-block': isBorderlessImage}\"\r\n class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\">\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row\"\r\n [ngClass]=\"{'row' : isBorderlessImage}\" [simpoCorner]=\"styles?.corners\"\r\n [ngClass]=\"{'flex-column-reverse': isBorderlessImage && styles?.positionLayout?.value === 'top' , 'flex-column': isBorderlessImage && styles?.positionLayout?.value === 'bottom'}\">\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <div class=\"py-5\"\r\n [ngClass]=\"{'col-lg-6 col-xxl-6': content?.image?.showImage && isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage || !content?.image?.showImage , 'col-lg-12 col-md-12 col-12 width-100': isBorderlessImage && (styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom')}\"\r\n [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"row g-5 justify-content-start mlr-0 h-auto\" [id]=\"data?.id\"\r\n [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.image?.showImage && !isBorderlessImage\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n [ngClass]=\"{'col-lg-12': content?.image?.showImage && isBorderlessImage, 'col-lg-6':!isBorderlessImage || !content?.image?.showImage}\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div> -->\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <!-- <div class=\"d-flex gap-3 card-container\"\r\n [ngClass]=\"{'gap-3': screenWidth > 475 , 'gap-1' : screenWidth <= 475}\">\r\n <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n <div class=\"card_wrapper\">\r\n <div class=\"container_card visible\">\r\n <div class=\"card-section\">\r\n <div class=\"second-part-card\">\r\n </div>\r\n <div class=\"first-part-card d-flex align-items-center\"\r\n [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <img loading=\"lazy\" class=\"tick-img\" [src]=\"item?.icon?.url\" alt=\"something\" />\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div> -->\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" (click)=\"opendailogbox(dialogBox)\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isMerged]=\"styles?.merge ?? false\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n [ngClass]=\"{'w-100' : content?.image?.showImage && isBorderlessImage && styles?.positionLayout?.value == 'top' || styles?.positionLayout?.value == 'bottom'}\"\r\n style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n [simpoBorderless]=\"getPositionLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<!-- Dialog template -->\r\n<ng-template #dialogBox class=\"dialogbox\">\r\n <div class=\"appointment-form\">\r\n <div class=\"header-section\">\r\n <div class=\"header-left-side\">\r\n <h2 style=\"text-align: left;\">Book an Appointment</h2>\r\n </div>\r\n <div class=\"header-right-side d-flex align-item-center justify-content-center\">\r\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <form>\r\n <div class=\"name-mobile\">\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Name</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <input class=\"inputStyle\" matInput placeholder=\"Enter Your Name\" pattern=\"[a-zA-Z ]*\"\r\n [(ngModel)]=\"CreateData.clientName\" (ngModelChange)=\"onUserNameChange($event)\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Mobile Number</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <input type=\"text\" class=\"inputStyle\" matInput placeholder=\"Enter Your Mobile Number\"\r\n pattern=\"^[0-9]{10,15}$\" maxlength=\"15\" (focus)=\"onFocus()\" (keypress)=\"restrictNonNumeric($event)\"\r\n [(ngModel)]=\"CreateData.mobile\" [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"name-mobile\">\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Location</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"Select Location\" [(ngModel)]=\"selectedLocation\"\r\n (ngModelChange)=\"getFilteredServices()\" [ngModelOptions]=\"{standalone: true}\">\r\n <ng-container *ngFor=\"let store of storeList\">\r\n <mat-option [value]=\"store.id\">\r\n {{ store.storeName }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Service</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"Select Service\" [(ngModel)]=\"selectedServices\"\r\n (ngModelChange)=\"getFilteredLocation()\" [ngModelOptions]=\"{standalone: true}\">\r\n <ng-container *ngFor=\"let service of serviceList\">\r\n <mat-option [value]=\"service\">\r\n {{ service.name }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"name-mobile\" *ngIf=\"selectedLocation && selectedServices\">\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Staff</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"Select Staff\" [(ngModel)]=\"selectedStaff\"\r\n (ngModelChange)=\"getBookingSlots()\" [ngModelOptions]=\"{standalone: true}\">\r\n <ng-container *ngFor=\"let staff of staffList\">\r\n <mat-option [value]=\"staff\">\r\n {{ staff.staffName }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"name-mobile\">\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Date</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <input class=\"inputStyle\" matInput [matDatepicker]=\"picker\" placeholder=\"Select Date\"\r\n [(ngModel)]=\"CreateData.scheduledDate\" (ngModelChange)=\"getBookingSlots()\" [min]=\"minDate\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"sfull-width\" *ngIf=\"CreateData.scheduledDate && selectedServices\">\r\n <div class=\"input-text\">Time</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"Select Location\" [(ngModel)]=\"CreateData.scheduledTime\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n <mat-option *ngFor=\"let time of locationTiming\" [value]=\"time\">\r\n {{ time }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n </div>\r\n </div>\r\n\r\n\r\n <!-- <div class=\"full-message-section\">\r\n <div class=\"business-field-section\">\r\n <div class=\"input-text\">Message</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <input class=\"inputStyle\" matInput placeholder=\"Enter Your Name\" pattern=\"[a-zA-Z ]*\"\r\n [(ngModel)]=\"CreateData.message\" [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n </div>\r\n </div> -->\r\n\r\n <div class=\"bottom-section\">\r\n <div class=\"button-section\">\r\n <button class=\"booking-button\" (click)=\"checkPayment()\" [style.background]=\"getAccentColor()\" [simpoColor]=\"styles?.background?.accentColor\" *ngIf=\"!loader\">\r\n Book Appointment\r\n </button>\r\n <button class=\"booking-button\" disabled *ngIf=\"loader\" [style.background]=\"getAccentColor()\" [simpoColor]=\"styles?.background?.accentColor\">\r\n <span class=\"spinner-border spinner-border-sm mr-2\" role=\"status\" aria-hidden=\"true\"></span>\r\n Booking...\r\n </button>\r\n </div>\r\n </div>\r\n\r\n\r\n </form>\r\n </div>\r\n</ng-template>", styles: [".btn-primary{border:none}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.width-100{width:100%!important}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.box{background:#fff;border:8px solid rgb(232 232 232 / 80%);box-shadow:#63636333 0 2px 8px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.total-container{flex-direction:column}.insideImg{height:100%!important}.card-container,.name-mobile{flex-direction:column}.sfull-width{width:100%!important}.appointment-form{box-shadow:none!important}}.text-element{inline-size:100%;overflow-wrap:break-word}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.image-card{width:50%!important}.svg{fill:#ffb6c1;transform:rotate(180deg)}.ml-5{margin-left:5px}.mlr-0{margin-left:0;margin-right:0}.d-block{display:block!important}.appointment-form{width:50vw;background-color:#fff;border-radius:18px;padding:20px;box-shadow:0 4px 8px #0000001a}h2{text-align:center;margin-bottom:20px}.form-group{display:flex;flex-direction:column;margin-bottom:15px;width:100%}label{font-weight:700;margin-bottom:5px}input,select,textarea{padding:8px;border:1px solid #ccc;border-radius:4px;font-size:14px}input::placeholder,textarea::placeholder{color:#888}.name-mobile,.date-time{display:flex;justify-content:space-between}textarea{resize:vertical}.book-btn{width:100%;background-color:#007bff;color:#fff;border:none;padding:10px;border-radius:4px;font-size:16px;cursor:pointer}.book-btn:hover{background-color:#0056b3}.bottom-section{width:100%;display:flex;justify-content:center;margin-top:15px}.button-section{width:100%;margin:10px 0}.booking-button{border-radius:4px;padding:7px 5px;border:none}.header-section{display:flex;width:100%;justify-content:space-between}.header-left-side{width:50%;white-space:nowrap}.header-right-side{width:5%;cursor:pointer;margin-bottom:25px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.total-container{flex-direction:column}.insideImg{height:100%!important}.button-section{width:100%!important}.appointment-form{width:100vw}}.sfull-width{width:49%;height:75px}.input-text{margin-bottom:5px}.full-width{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i12.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i12.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i13.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: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i15.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i15.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i15.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatFormFieldModule }, { 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"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type:
13655
13650
  //directive
13656
13651
  SimpoBorderlessDirective, selector: "[simpoBorderless]", inputs: ["simpoBorderless"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }] }); }
@@ -13704,7 +13699,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
13704
13699
  SpacingAroundDirective,
13705
13700
  ColorDirective
13706
13701
  ], providers: [DatePipe], template: "<div [id]=\"data?.id\"\r\n [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage , 'd-block': isBorderlessImage}\"\r\n class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\">\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row\"\r\n [ngClass]=\"{'row' : isBorderlessImage}\" [simpoCorner]=\"styles?.corners\"\r\n [ngClass]=\"{'flex-column-reverse': isBorderlessImage && styles?.positionLayout?.value === 'top' , 'flex-column': isBorderlessImage && styles?.positionLayout?.value === 'bottom'}\">\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <div class=\"py-5\"\r\n [ngClass]=\"{'col-lg-6 col-xxl-6': content?.image?.showImage && isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage || !content?.image?.showImage , 'col-lg-12 col-md-12 col-12 width-100': isBorderlessImage && (styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom')}\"\r\n [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"row g-5 justify-content-start mlr-0 h-auto\" [id]=\"data?.id\"\r\n [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.image?.showImage && !isBorderlessImage\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n [ngClass]=\"{'col-lg-12': content?.image?.showImage && isBorderlessImage, 'col-lg-6':!isBorderlessImage || !content?.image?.showImage}\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div> -->\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <!-- <div class=\"d-flex gap-3 card-container\"\r\n [ngClass]=\"{'gap-3': screenWidth > 475 , 'gap-1' : screenWidth <= 475}\">\r\n <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n <div class=\"card_wrapper\">\r\n <div class=\"container_card visible\">\r\n <div class=\"card-section\">\r\n <div class=\"second-part-card\">\r\n </div>\r\n <div class=\"first-part-card d-flex align-items-center\"\r\n [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <img loading=\"lazy\" class=\"tick-img\" [src]=\"item?.icon?.url\" alt=\"something\" />\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div> -->\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" (click)=\"opendailogbox(dialogBox)\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isMerged]=\"styles?.merge ?? false\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n [ngClass]=\"{'w-100' : content?.image?.showImage && isBorderlessImage && styles?.positionLayout?.value == 'top' || styles?.positionLayout?.value == 'bottom'}\"\r\n style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n [simpoBorderless]=\"getPositionLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<!-- Dialog template -->\r\n<ng-template #dialogBox class=\"dialogbox\">\r\n <div class=\"appointment-form\">\r\n <div class=\"header-section\">\r\n <div class=\"header-left-side\">\r\n <h2 style=\"text-align: left;\">Book an Appointment</h2>\r\n </div>\r\n <div class=\"header-right-side d-flex align-item-center justify-content-center\">\r\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <form>\r\n <div class=\"name-mobile\">\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Name</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <input class=\"inputStyle\" matInput placeholder=\"Enter Your Name\" pattern=\"[a-zA-Z ]*\"\r\n [(ngModel)]=\"CreateData.clientName\" (ngModelChange)=\"onUserNameChange($event)\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Mobile Number</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <input type=\"text\" class=\"inputStyle\" matInput placeholder=\"Enter Your Mobile Number\"\r\n pattern=\"^[0-9]{10,15}$\" maxlength=\"15\" (focus)=\"onFocus()\" (keypress)=\"restrictNonNumeric($event)\"\r\n [(ngModel)]=\"CreateData.mobile\" [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"name-mobile\">\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Location</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"Select Location\" [(ngModel)]=\"selectedLocation\"\r\n (ngModelChange)=\"getFilteredServices()\" [ngModelOptions]=\"{standalone: true}\">\r\n <ng-container *ngFor=\"let store of storeList\">\r\n <mat-option [value]=\"store.id\">\r\n {{ store.storeName }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Service</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"Select Service\" [(ngModel)]=\"selectedServices\"\r\n (ngModelChange)=\"getFilteredLocation()\" [ngModelOptions]=\"{standalone: true}\">\r\n <ng-container *ngFor=\"let service of serviceList\">\r\n <mat-option [value]=\"service\">\r\n {{ service.name }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"name-mobile\" *ngIf=\"selectedLocation && selectedServices\">\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Staff</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"Select Staff\" [(ngModel)]=\"selectedStaff\"\r\n (ngModelChange)=\"getBookingSlots()\" [ngModelOptions]=\"{standalone: true}\">\r\n <ng-container *ngFor=\"let staff of staffList\">\r\n <mat-option [value]=\"staff\">\r\n {{ staff.staffName }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"name-mobile\">\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Date</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <input class=\"inputStyle\" matInput [matDatepicker]=\"picker\" placeholder=\"Select Date\"\r\n [(ngModel)]=\"CreateData.scheduledDate\" (ngModelChange)=\"getBookingSlots()\" [min]=\"minDate\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"sfull-width\" *ngIf=\"CreateData.scheduledDate && selectedServices\">\r\n <div class=\"input-text\">Time</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"Select Location\" [(ngModel)]=\"CreateData.scheduledTime\"\r\n [ngModelOptions]=\"{standalone: true}\">\r\n <mat-option *ngFor=\"let time of locationTiming\" [value]=\"time\">\r\n {{ time }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n </div>\r\n </div>\r\n\r\n\r\n <!-- <div class=\"full-message-section\">\r\n <div class=\"business-field-section\">\r\n <div class=\"input-text\">Message</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <input class=\"inputStyle\" matInput placeholder=\"Enter Your Name\" pattern=\"[a-zA-Z ]*\"\r\n [(ngModel)]=\"CreateData.message\" [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n </div>\r\n </div> -->\r\n\r\n <div class=\"bottom-section\">\r\n <div class=\"button-section\">\r\n <button class=\"booking-button\" (click)=\"checkPayment()\" [style.background]=\"getAccentColor()\" [simpoColor]=\"styles?.background?.accentColor\" *ngIf=\"!loader\">\r\n Book Appointment\r\n </button>\r\n <button class=\"booking-button\" disabled *ngIf=\"loader\" [style.background]=\"getAccentColor()\" [simpoColor]=\"styles?.background?.accentColor\">\r\n <span class=\"spinner-border spinner-border-sm mr-2\" role=\"status\" aria-hidden=\"true\"></span>\r\n Booking...\r\n </button>\r\n </div>\r\n </div>\r\n\r\n\r\n </form>\r\n </div>\r\n</ng-template>", styles: [".btn-primary{border:none}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.width-100{width:100%!important}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.box{background:#fff;border:8px solid rgb(232 232 232 / 80%);box-shadow:#63636333 0 2px 8px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.total-container{flex-direction:column}.insideImg{height:100%!important}.card-container,.name-mobile{flex-direction:column}.sfull-width{width:100%!important}.appointment-form{box-shadow:none!important}}.text-element{inline-size:100%;overflow-wrap:break-word}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.image-card{width:50%!important}.svg{fill:#ffb6c1;transform:rotate(180deg)}.ml-5{margin-left:5px}.mlr-0{margin-left:0;margin-right:0}.d-block{display:block!important}.appointment-form{width:50vw;background-color:#fff;border-radius:18px;padding:20px;box-shadow:0 4px 8px #0000001a}h2{text-align:center;margin-bottom:20px}.form-group{display:flex;flex-direction:column;margin-bottom:15px;width:100%}label{font-weight:700;margin-bottom:5px}input,select,textarea{padding:8px;border:1px solid #ccc;border-radius:4px;font-size:14px}input::placeholder,textarea::placeholder{color:#888}.name-mobile,.date-time{display:flex;justify-content:space-between}textarea{resize:vertical}.book-btn{width:100%;background-color:#007bff;color:#fff;border:none;padding:10px;border-radius:4px;font-size:16px;cursor:pointer}.book-btn:hover{background-color:#0056b3}.bottom-section{width:100%;display:flex;justify-content:center;margin-top:15px}.button-section{width:100%;margin:10px 0}.booking-button{border-radius:4px;padding:7px 5px;border:none}.header-section{display:flex;width:100%;justify-content:space-between}.header-left-side{width:50%;white-space:nowrap}.header-right-side{width:5%;cursor:pointer;margin-bottom:25px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.total-container{flex-direction:column}.insideImg{height:100%!important}.button-section{width:100%!important}.appointment-form{width:100vw}}.sfull-width{width:49%;height:75px}.input-text{margin-bottom:5px}.full-width{width:100%}\n"] }]
13707
- }], ctorParameters: () => [{ type: EventsService }, { type: i3.MatDialog }, { type: RestService }, { type: i2$1.MatSnackBar }, { type: i4.DatePipe }, { type: i2$2.Router }, { type: undefined, decorators: [{
13702
+ }], ctorParameters: () => [{ type: EventsService }, { type: i1$1.MatDialog }, { type: RestService }, { type: i2$1.MatSnackBar }, { type: i4.DatePipe }, { type: i2$2.Router }, { type: undefined, decorators: [{
13708
13703
  type: Inject,
13709
13704
  args: [LOCAL_STORAGE]
13710
13705
  }] }], propDecorators: { data: [{
@@ -14677,7 +14672,7 @@ class RegistrationFormComponent extends BaseSection {
14677
14672
  }
14678
14673
  });
14679
14674
  }
14680
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RegistrationFormComponent, deps: [{ token: RestService }, { token: i2$1.MatSnackBar }, { token: EventsService }, { token: i2$2.ActivatedRoute }, { token: i1$1.DomSanitizer }, { token: ImageUplaodService }], target: i0.ɵɵFactoryTarget.Component }); }
14675
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RegistrationFormComponent, deps: [{ token: RestService }, { token: i2$1.MatSnackBar }, { token: EventsService }, { token: i2$2.ActivatedRoute }, { token: i1$2.DomSanitizer }, { token: ImageUplaodService }], target: i0.ɵɵFactoryTarget.Component }); }
14681
14676
  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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.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:
14682
14677
  //directive
14683
14678
  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: i5.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: i13.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: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i7$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i7$2.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"] }] }); }
@@ -14704,7 +14699,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
14704
14699
  MatIconModule,
14705
14700
  MatRadioModule
14706
14701
  ], 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"] }]
14707
- }], ctorParameters: () => [{ type: RestService }, { type: i2$1.MatSnackBar }, { type: EventsService }, { type: i2$2.ActivatedRoute }, { type: i1$1.DomSanitizer }, { type: ImageUplaodService }], propDecorators: { data: [{
14702
+ }], ctorParameters: () => [{ type: RestService }, { type: i2$1.MatSnackBar }, { type: EventsService }, { type: i2$2.ActivatedRoute }, { type: i1$2.DomSanitizer }, { type: ImageUplaodService }], propDecorators: { data: [{
14708
14703
  type: Input
14709
14704
  }], index: [{
14710
14705
  type: Input
@@ -14959,7 +14954,7 @@ class FooterComponent extends BaseSection {
14959
14954
  }
14960
14955
  });
14961
14956
  }
14962
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FooterComponent, deps: [{ token: EventsService }, { token: RestService }, { token: i3.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
14957
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FooterComponent, deps: [{ token: EventsService }, { token: RestService }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
14963
14958
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FooterComponent, isStandalone: true, selector: "simpo-footer", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" simpoHover\r\n(hovering)=\"showEditTabs($event)\" [spacingHorizontal]=\"stylesLayout\" [simpoBackground]=\"style?.background\" [simpoLayout]=\"style?.layout\" [id]=\"data?.id\">\r\n <div>\r\n <ng-container *ngIf=\"style?.footerType == 'Footer1'\">\r\n <ng-container *ngTemplateOutlet=\"Footer1\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.footerType == 'Footer2'\">\r\n <ng-container *ngTemplateOutlet=\"Footer2\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.footerType == 'Footer3'\">\r\n <ng-container *ngTemplateOutlet=\"Footer3\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.footerType == 'Footer4'\">\r\n <ng-container *ngTemplateOutlet=\"Footer4\"></ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [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<ng-template #Footer1>\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-md-4\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n </div>\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"descSection\"></ng-container>\r\n </div>\r\n <div *ngIf=\"content?.socialLinks?.display && screenWidth > 475\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-md-8\">\r\n <div class=\"row\">\r\n <ng-container *ngTemplateOutlet=\"foldersVertical\"></ng-container>\r\n </div>\r\n <div *ngIf=\"content?.socialLinks?.display && screenWidth < 475\" class=\"d-flex justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <hr *ngIf=\"content?.displayBranding\">\r\n <div *ngIf=\"content?.displayBranding\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #Footer2>\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-md-3\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n </div>\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"descSection\"></ng-container>\r\n </div>\r\n <div *ngIf=\"content?.socialLinks?.display && screenWidth > 475\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <div class=\"row\">\r\n <ng-container *ngTemplateOutlet=\"pagesHorizontal\"></ng-container>\r\n </div>\r\n <div *ngIf=\"content?.socialLinks?.display && screenWidth < 475\" class=\"d-flex justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <hr *ngIf=\"content?.displayBranding\">\r\n <div *ngIf=\"content?.displayBranding\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #Footer3>\r\n <div class=\"row\" [class.align-items-start]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"foldersVertical\"></ng-container>\r\n </div>\r\n <hr>\r\n <div class=\"row justify-content-between\">\r\n <div class=\"col-md-4\" [class.w-30]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 d-flex justify-content-center align-items-start\" *ngIf=\"content?.socialLinks?.display\"\r\n [class.w-30]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 d-flex justify-content-end\" *ngIf=\"content?.displayBranding\" [class.w-30]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #Footer4>\r\n <div class=\"row align-items-center\">\r\n <ng-container *ngTemplateOutlet=\"pagesHorizontal\"></ng-container>\r\n </div>\r\n <hr>\r\n <div class=\"row justify-content-between\">\r\n <div class=\"col-md-4\">\r\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 d-flex justify-content-center align-items-start\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 d-flex justify-content-end\" *ngIf=\"content?.displayBranding\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #logoSection>\r\n <div class=\"d-flex\" [class.justify-content-center]=\"screenWidth < 475\">\r\n <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer mb-4\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"style?.background?.color\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer mb-4\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #descSection>\r\n <ng-container *ngIf = \"content?.additionalDetails as textItem\" >\r\n <simpo-text-editor [(value)]=\"textItem.value \" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [label]=\"content?.additionalDetails?.label || ''\"></simpo-text-editor>\r\n </ng-container> <!-- <div class=\"description\" [innerHTML]=\"content?.additionalDetails?.value ?? '' | sanitizeHtml\"></div> -->\r\n</ng-template>\r\n\r\n<ng-template #socialIcons>\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0 gap-1\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div class=\"icons\">\r\n <simpo-socia-icons [iconColor]=\"data?.styles?.background?.accentColor\" [socialIconData]=\"item\"\r\n [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #branding>\r\n <div class=\"heading-small text-center branding-text\">Made with <a class=\"branding-text fw-600\"\r\n href=\"https://simpo.ai\" target=\"_blank\">Simpo</a></div>\r\n</ng-template>\r\n\r\n<ng-template #pagesHorizontal>\r\n <div class=\"col-md-3 mb-3 pageType\" *ngFor=\"let page of pages\" [class.w-50]=\"screenWidth < 475\" [class.text-center]=\"screenWidth < 475\" (click)=\"redirectToPage(page)\">\r\n {{page.pageName}}\r\n </div>\r\n</ng-template>\r\n\r\n<!-- <ng-template #pagesVertical>\r\n <div class=\"page-container col-md-3 mb-3\" [class.w-50]=\"screenWidth < 475\">\r\n <div class=\"pageType mb-3\">{{pageLink}}</div>\r\n <ng-container *ngFor=\"let page of pages\">\r\n <div class=\"pages mb-2\" (click)=\"redirectToPage(page)\">{{page?.pageName}}</div>\r\n </ng-container>\r\n </div>\r\n</ng-template> -->\r\n\r\n<ng-template #foldersVertical>\r\n <div class=\"page-container col-md-3 mb-3\" *ngFor=\"let folder of content?.folder;let folderIndex = index\" [class.w-50]=\"screenWidth < 475\">\r\n <simpo-text-editor [(value)]=\"folder.label\" [editable]=\"edit || false\" [sectionId]=\"data?.id\"></simpo-text-editor>\r\n <div class=\"mt-15\">\r\n <ng-container *ngFor=\"let page of folder.links;let linkIndex = index\">\r\n <div class=\"folder-page\" [ngClass]=\"{'hoverWhenEditable' : edit}\">\r\n <div class=\"pages mb-2\" (click)=\"redirectTo(page)\" [style.color]=\"style?.background?.accentColor\">{{page.label}}</div>\r\n <mat-icon (click)=\"deleteFolderLinks(folderIndex, linkIndex)\" [style.color]=\"style?.background?.accentColor\">delete</mat-icon>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"edit ? addLinks : null; context: {data: folderIndex}\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"(content?.folder?.length || 0) < 4\" [class.w-50]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"edit ? addFolder : null\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #addLinks let-folderIndex=\"data\">\r\n <div class=\"addLinks\" (click)=\"createNewLink(folderIndex)\">\r\n <mat-icon>add</mat-icon>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #addFolder>\r\n <div class=\"addLinks h-100\" (click)=\"createNewFolder()\">\r\n <mat-icon>add</mat-icon>\r\n </div>\r\n</ng-template>\r\n", styles: [".total-container{height:auto;position:relative}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.pageType{font-size:.9rem;font-weight:600;line-height:22px;color:#87769d}.pages{font-size:.9rem;font-weight:400;line-height:22px;cursor:pointer;color:#87769d}.branding-text{font-size:16px;font-weight:400;line-height:22px;text-decoration:unset}.fw-600{font-weight:600!important}.w-50{width:50%!important}.w-30{width:30%!important}.align-items-start{align-items:start!important}.mt-15{margin-top:15px}.folder-page{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.folder-page mat-icon{font-size:17px;display:flex;align-items:center;justify-content:center;display:none}.hoverWhenEditable:hover{border:1px solid #E9E9E9;border-radius:5px;cursor:pointer}.hoverWhenEditable:hover mat-icon{display:inline}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { 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: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type:
14964
14959
  //directives
14965
14960
  SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }] }); }
@@ -14981,7 +14976,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
14981
14976
  TextEditorComponent,
14982
14977
  HoverDirective
14983
14978
  ], template: "<section class=\"total-container\" simpoHover\r\n(hovering)=\"showEditTabs($event)\" [spacingHorizontal]=\"stylesLayout\" [simpoBackground]=\"style?.background\" [simpoLayout]=\"style?.layout\" [id]=\"data?.id\">\r\n <div>\r\n <ng-container *ngIf=\"style?.footerType == 'Footer1'\">\r\n <ng-container *ngTemplateOutlet=\"Footer1\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.footerType == 'Footer2'\">\r\n <ng-container *ngTemplateOutlet=\"Footer2\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.footerType == 'Footer3'\">\r\n <ng-container *ngTemplateOutlet=\"Footer3\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.footerType == 'Footer4'\">\r\n <ng-container *ngTemplateOutlet=\"Footer4\"></ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [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<ng-template #Footer1>\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-md-4\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n </div>\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"descSection\"></ng-container>\r\n </div>\r\n <div *ngIf=\"content?.socialLinks?.display && screenWidth > 475\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-md-8\">\r\n <div class=\"row\">\r\n <ng-container *ngTemplateOutlet=\"foldersVertical\"></ng-container>\r\n </div>\r\n <div *ngIf=\"content?.socialLinks?.display && screenWidth < 475\" class=\"d-flex justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <hr *ngIf=\"content?.displayBranding\">\r\n <div *ngIf=\"content?.displayBranding\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #Footer2>\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-md-3\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n </div>\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"descSection\"></ng-container>\r\n </div>\r\n <div *ngIf=\"content?.socialLinks?.display && screenWidth > 475\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <div class=\"row\">\r\n <ng-container *ngTemplateOutlet=\"pagesHorizontal\"></ng-container>\r\n </div>\r\n <div *ngIf=\"content?.socialLinks?.display && screenWidth < 475\" class=\"d-flex justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <hr *ngIf=\"content?.displayBranding\">\r\n <div *ngIf=\"content?.displayBranding\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #Footer3>\r\n <div class=\"row\" [class.align-items-start]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"foldersVertical\"></ng-container>\r\n </div>\r\n <hr>\r\n <div class=\"row justify-content-between\">\r\n <div class=\"col-md-4\" [class.w-30]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 d-flex justify-content-center align-items-start\" *ngIf=\"content?.socialLinks?.display\"\r\n [class.w-30]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 d-flex justify-content-end\" *ngIf=\"content?.displayBranding\" [class.w-30]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #Footer4>\r\n <div class=\"row align-items-center\">\r\n <ng-container *ngTemplateOutlet=\"pagesHorizontal\"></ng-container>\r\n </div>\r\n <hr>\r\n <div class=\"row justify-content-between\">\r\n <div class=\"col-md-4\">\r\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 d-flex justify-content-center align-items-start\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 d-flex justify-content-end\" *ngIf=\"content?.displayBranding\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #logoSection>\r\n <div class=\"d-flex\" [class.justify-content-center]=\"screenWidth < 475\">\r\n <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer mb-4\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"style?.background?.color\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer mb-4\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #descSection>\r\n <ng-container *ngIf = \"content?.additionalDetails as textItem\" >\r\n <simpo-text-editor [(value)]=\"textItem.value \" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [label]=\"content?.additionalDetails?.label || ''\"></simpo-text-editor>\r\n </ng-container> <!-- <div class=\"description\" [innerHTML]=\"content?.additionalDetails?.value ?? '' | sanitizeHtml\"></div> -->\r\n</ng-template>\r\n\r\n<ng-template #socialIcons>\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0 gap-1\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div class=\"icons\">\r\n <simpo-socia-icons [iconColor]=\"data?.styles?.background?.accentColor\" [socialIconData]=\"item\"\r\n [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #branding>\r\n <div class=\"heading-small text-center branding-text\">Made with <a class=\"branding-text fw-600\"\r\n href=\"https://simpo.ai\" target=\"_blank\">Simpo</a></div>\r\n</ng-template>\r\n\r\n<ng-template #pagesHorizontal>\r\n <div class=\"col-md-3 mb-3 pageType\" *ngFor=\"let page of pages\" [class.w-50]=\"screenWidth < 475\" [class.text-center]=\"screenWidth < 475\" (click)=\"redirectToPage(page)\">\r\n {{page.pageName}}\r\n </div>\r\n</ng-template>\r\n\r\n<!-- <ng-template #pagesVertical>\r\n <div class=\"page-container col-md-3 mb-3\" [class.w-50]=\"screenWidth < 475\">\r\n <div class=\"pageType mb-3\">{{pageLink}}</div>\r\n <ng-container *ngFor=\"let page of pages\">\r\n <div class=\"pages mb-2\" (click)=\"redirectToPage(page)\">{{page?.pageName}}</div>\r\n </ng-container>\r\n </div>\r\n</ng-template> -->\r\n\r\n<ng-template #foldersVertical>\r\n <div class=\"page-container col-md-3 mb-3\" *ngFor=\"let folder of content?.folder;let folderIndex = index\" [class.w-50]=\"screenWidth < 475\">\r\n <simpo-text-editor [(value)]=\"folder.label\" [editable]=\"edit || false\" [sectionId]=\"data?.id\"></simpo-text-editor>\r\n <div class=\"mt-15\">\r\n <ng-container *ngFor=\"let page of folder.links;let linkIndex = index\">\r\n <div class=\"folder-page\" [ngClass]=\"{'hoverWhenEditable' : edit}\">\r\n <div class=\"pages mb-2\" (click)=\"redirectTo(page)\" [style.color]=\"style?.background?.accentColor\">{{page.label}}</div>\r\n <mat-icon (click)=\"deleteFolderLinks(folderIndex, linkIndex)\" [style.color]=\"style?.background?.accentColor\">delete</mat-icon>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"edit ? addLinks : null; context: {data: folderIndex}\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"(content?.folder?.length || 0) < 4\" [class.w-50]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"edit ? addFolder : null\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #addLinks let-folderIndex=\"data\">\r\n <div class=\"addLinks\" (click)=\"createNewLink(folderIndex)\">\r\n <mat-icon>add</mat-icon>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #addFolder>\r\n <div class=\"addLinks h-100\" (click)=\"createNewFolder()\">\r\n <mat-icon>add</mat-icon>\r\n </div>\r\n</ng-template>\r\n", styles: [".total-container{height:auto;position:relative}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.pageType{font-size:.9rem;font-weight:600;line-height:22px;color:#87769d}.pages{font-size:.9rem;font-weight:400;line-height:22px;cursor:pointer;color:#87769d}.branding-text{font-size:16px;font-weight:400;line-height:22px;text-decoration:unset}.fw-600{font-weight:600!important}.w-50{width:50%!important}.w-30{width:30%!important}.align-items-start{align-items:start!important}.mt-15{margin-top:15px}.folder-page{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.folder-page mat-icon{font-size:17px;display:flex;align-items:center;justify-content:center;display:none}.hoverWhenEditable:hover{border:1px solid #E9E9E9;border-radius:5px;cursor:pointer}.hoverWhenEditable:hover mat-icon{display:inline}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}\n"] }]
14984
- }], ctorParameters: () => [{ type: EventsService }, { type: RestService }, { type: i3.MatDialog }], propDecorators: { data: [{
14979
+ }], ctorParameters: () => [{ type: EventsService }, { type: RestService }, { type: i1$1.MatDialog }], propDecorators: { data: [{
14985
14980
  type: Input
14986
14981
  }], index: [{
14987
14982
  type: Input
@@ -15425,7 +15420,7 @@ class HeaderSectionComponent {
15425
15420
  navigateLogin() {
15426
15421
  this.router.navigate(['/login']);
15427
15422
  }
15428
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderSectionComponent, deps: [{ token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: i3.MatDialog }, { token: StorageServiceService }, { token: RestService }, { token: EventsService }, { token: LOCAL_STORAGE }], target: i0.ɵɵFactoryTarget.Component }); }
15423
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderSectionComponent, deps: [{ token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: i1$1.MatDialog }, { token: StorageServiceService }, { token: RestService }, { token: EventsService }, { token: LOCAL_STORAGE }], target: i0.ɵɵFactoryTarget.Component }); }
15429
15424
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeaderSectionComponent, isStandalone: true, selector: "simpo-header-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\r\n <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n [class.margin-bottom]=\"isHeaderSticky && isMobile && !isEcommerceWebsite\">\r\n <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\r\n simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\r\n (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\r\n <ng-container *ngIf=\"style?.headline?.display\">\r\n <div>\r\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n </div>\r\n <!-- <div class=\"input-group mx-2 mb-2 w-98\" *ngIf=\"isMobile && isEcommerceWebsite\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">search</mat-icon>\r\n </div> -->\r\n <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\r\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\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>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\r\n <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\r\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n </ng-container>\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n <div class=\"header1\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 95 : ''\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n <div class=\"header1\">\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"text-end\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n <div class=\"header1\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n <div class=\"header1\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container> </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"text-end\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\r\n (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n <div class=\"d-flex gap-3\"\r\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\r\n [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | lowercase | titlecase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n <div class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\r\n (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\" [style.borderColor]=\"backgroundInfo?.accentColor\">\r\n <mat-icon>person_outline</mat-icon>\r\n Login\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn && !isMobile\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n <div class=\"icons\" (click)=\"goToHome()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Home</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"searchProducts()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Shop</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToWishlist()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Cart</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n </div> -->\r\n <div class=\"w-75 d-flex align-items-center\">\r\n <div class=\"input-group w-75 ml-2\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\r\n [style.color]=\"backgroundInfo?.accentColor\">\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : backgroundInfo.background?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\r\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"passbookAppStatus\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\r\n height=\"30\" version=\"1.1\">\r\n <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\r\n <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path\r\n d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\r\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\n <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\r\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\n <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path\r\n d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\r\n [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\n <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n </g>\r\n </svg>\r\n <div [style.color]=\"accentColor\">Schemes</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\">\r\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\r\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\r\n <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\r\n <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\r\n Pincode\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\r\n getPincode}}</div>\r\n\r\n <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your PIN Code unlocks\r\n </div>\r\n <div class=\"sub-text text-center f-14 pincode-text\">\r\n Fastest delivery date, Try-at-Home availability,\r\n Nearest store and In-store design!\r\n </div>\r\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n [class.error-border]=\"pinError\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n class=\"w-75 p-0\">\r\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n </div>\r\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n Please enter a valid pincode\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\r\n </div>\r\n <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n {{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\r\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\r\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\r\n stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n </div>\r\n <!-- (mouseleave)=\"showLogin = false\" -->\r\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your Account\r\n </div>\r\n <div class=\"sub-text text-center f-14\">\r\n Access account & manage your orders.\r\n </div>\r\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">Sign Up</div>\r\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n <!-- <div> -->\r\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n <!-- </div> -->\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | uppercase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\r\n <div class=\"offcanvas-header\">\r\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\r\n <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n </div>\r\n <div class=\"offcanvas-body\">\r\n <div class=\"pages\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"offcanvas-footer\">\r\n <div class=\"canvas-button\">\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-16 py-1\"\r\n (click)=\"showSearchBarMobile = !showSearchBarMobile\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n\r\n\r\n <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\">\r\n\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\" [style.background]=\"data?.styles?.headline?.color\">\r\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\r\n (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\">\r\n {{ele?.categoryName | titlecase}}\r\n </div>\r\n <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\r\n *ngIf=\"collectionList?.collections?.length > 0\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\r\n [simpoColor]=\"data?.styles?.headline?.color\">\r\n Collections\r\n </div>\r\n </div>\r\n <!-- (mouseleave)=\"showList = false\" -->\r\n <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\r\n <div class=\"row w-100 h-100\">\r\n <div class=\"col-7 row\">\r\n <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\r\n <div class=\"list-header mb-3\">By Price</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\r\n <div class=\"each-price cursor-pointer\"\r\n (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\r\n {{price | titlecase}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-4 h-100 overflow-scroll\"\r\n *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\r\n <div class=\"list-header mb-3\">By Style</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\r\n <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\r\n |\r\n titlecase}}</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-4\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"list-header mb-3\">By Metal & Stone</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let collection of byMetalAndStone\">\r\n <div class=\"d-flex gap-2 align-items-center\">\r\n <div style=\"width: 15px;height: 20px;\">\r\n <img [src]=\"collection.imageUrl\" alt=\"\" class=\"w-100\">\r\n </div>\r\n <div class=\"each-price cursor-pointer\">{{collection.name\r\n |\r\n titlecase}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\r\n <ng-container *ngFor=\"let image of selectedCategory?.imageUrls | slice:0:2; let i = index\">\r\n <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\" (click)=\"filterByCategory()\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- (mouseleave)=\"showCollections = false\" -->\r\n <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\r\n <div class=\"row w-100 h-100\">\r\n <div class=\"col-7 row\">\r\n <ng-container *ngFor=\"let collection of collectionList?.collections\">\r\n <div class=\"collection row col-3 align-items-center\"\r\n (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\r\n <div class=\"col-imag col-4\">\r\n <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\r\n </div>\r\n <div class=\"col-8 text-overflow\">\r\n {{collection?.collectionName | titlecase}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\r\n <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls) | slice:0:2; let i = index\">\r\n <div class=\"image-container h-100 col-6 position-relative\" *ngIf=\"image\"\r\n (click)=\"applyFilterToList(image, 'collections')\">\r\n <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\r\n <div class=\"text-center p-2 btm-col-name position-absolute\"\r\n [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileCategoryHeader>\r\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n <div class=\"cat-img d-flex justify-content-center align-items-center\">\r\n <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\r\n </div>\r\n <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{height:44px;gap:26px!important}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.mob-form-control{position:absolute;right:10px;width:95%;top:85px;border-radius:12px!important}.categories-header{height:unset!important;margin-top:var(--margin-top)}.w-98{width:98%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:8px}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:-15px;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i4.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId", "accentColor"] }, { 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: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { 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: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky", "categoryHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { 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"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: MovingTextComponent, selector: "simpo-moving-text", inputs: ["data", "edit", "delete", "customClass", "index"] }] }); }
15430
15425
  }
15431
15426
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderSectionComponent, decorators: [{
@@ -15451,7 +15446,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
15451
15446
  MovingTextComponent,
15452
15447
  ContentFitDirective,
15453
15448
  ], template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\r\n <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n [class.margin-bottom]=\"isHeaderSticky && isMobile && !isEcommerceWebsite\">\r\n <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\r\n simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\r\n (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\r\n <ng-container *ngIf=\"style?.headline?.display\">\r\n <div>\r\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n </div>\r\n </ng-container>\r\n <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\r\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n </div>\r\n <!-- <div class=\"input-group mx-2 mb-2 w-98\" *ngIf=\"isMobile && isEcommerceWebsite\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">search</mat-icon>\r\n </div> -->\r\n <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\r\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\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>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\r\n <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\r\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n </ng-container>\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n <div class=\"header1\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 95 : ''\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n <div class=\"header1\">\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"text-end\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n <div class=\"header1\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n <div class=\"header1\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container> </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"text-end\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\r\n (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n <div class=\"d-flex gap-3\"\r\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\r\n [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | lowercase | titlecase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n <div class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\r\n (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\" [style.borderColor]=\"backgroundInfo?.accentColor\">\r\n <mat-icon>person_outline</mat-icon>\r\n Login\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn && !isMobile\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n <div class=\"icons\" (click)=\"goToHome()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Home</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"searchProducts()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Shop</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToWishlist()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Cart</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n </div> -->\r\n <div class=\"w-75 d-flex align-items-center\">\r\n <div class=\"input-group w-75 ml-2\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\r\n [style.color]=\"backgroundInfo?.accentColor\">\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : backgroundInfo.background?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\r\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"passbookAppStatus\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\r\n height=\"30\" version=\"1.1\">\r\n <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\r\n <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path\r\n d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\r\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\n <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\r\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\n <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path\r\n d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\r\n [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\n <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n </g>\r\n </svg>\r\n <div [style.color]=\"accentColor\">Schemes</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\">\r\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\r\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\r\n <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\r\n <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\r\n Pincode\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\r\n getPincode}}</div>\r\n\r\n <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your PIN Code unlocks\r\n </div>\r\n <div class=\"sub-text text-center f-14 pincode-text\">\r\n Fastest delivery date, Try-at-Home availability,\r\n Nearest store and In-store design!\r\n </div>\r\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n [class.error-border]=\"pinError\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n class=\"w-75 p-0\">\r\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n </div>\r\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n Please enter a valid pincode\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\r\n </div>\r\n <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n {{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\r\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\r\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\r\n stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n </div>\r\n <!-- (mouseleave)=\"showLogin = false\" -->\r\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your Account\r\n </div>\r\n <div class=\"sub-text text-center f-14\">\r\n Access account & manage your orders.\r\n </div>\r\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">Sign Up</div>\r\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n <!-- <div> -->\r\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n <!-- </div> -->\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | uppercase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\r\n <div class=\"offcanvas-header\">\r\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\r\n <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n </div>\r\n <div class=\"offcanvas-body\">\r\n <div class=\"pages\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"offcanvas-footer\">\r\n <div class=\"canvas-button\">\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-16 py-1\"\r\n (click)=\"showSearchBarMobile = !showSearchBarMobile\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n\r\n\r\n <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\">\r\n\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\" [style.background]=\"data?.styles?.headline?.color\">\r\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\r\n (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\">\r\n {{ele?.categoryName | titlecase}}\r\n </div>\r\n <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\r\n *ngIf=\"collectionList?.collections?.length > 0\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\r\n [simpoColor]=\"data?.styles?.headline?.color\">\r\n Collections\r\n </div>\r\n </div>\r\n <!-- (mouseleave)=\"showList = false\" -->\r\n <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\r\n <div class=\"row w-100 h-100\">\r\n <div class=\"col-7 row\">\r\n <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\r\n <div class=\"list-header mb-3\">By Price</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\r\n <div class=\"each-price cursor-pointer\"\r\n (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\r\n {{price | titlecase}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-4 h-100 overflow-scroll\"\r\n *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\r\n <div class=\"list-header mb-3\">By Style</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\r\n <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\r\n |\r\n titlecase}}</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-4\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"list-header mb-3\">By Metal & Stone</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let collection of byMetalAndStone\">\r\n <div class=\"d-flex gap-2 align-items-center\">\r\n <div style=\"width: 15px;height: 20px;\">\r\n <img [src]=\"collection.imageUrl\" alt=\"\" class=\"w-100\">\r\n </div>\r\n <div class=\"each-price cursor-pointer\">{{collection.name\r\n |\r\n titlecase}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\r\n <ng-container *ngFor=\"let image of selectedCategory?.imageUrls | slice:0:2; let i = index\">\r\n <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\" (click)=\"filterByCategory()\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- (mouseleave)=\"showCollections = false\" -->\r\n <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\r\n <div class=\"row w-100 h-100\">\r\n <div class=\"col-7 row\">\r\n <ng-container *ngFor=\"let collection of collectionList?.collections\">\r\n <div class=\"collection row col-3 align-items-center\"\r\n (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\r\n <div class=\"col-imag col-4\">\r\n <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\r\n </div>\r\n <div class=\"col-8 text-overflow\">\r\n {{collection?.collectionName | titlecase}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\r\n <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls) | slice:0:2; let i = index\">\r\n <div class=\"image-container h-100 col-6 position-relative\" *ngIf=\"image\"\r\n (click)=\"applyFilterToList(image, 'collections')\">\r\n <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\r\n <div class=\"text-center p-2 btm-col-name position-absolute\"\r\n [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileCategoryHeader>\r\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n <div class=\"cat-img d-flex justify-content-center align-items-center\">\r\n <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\r\n </div>\r\n <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{height:44px;gap:26px!important}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.mob-form-control{position:absolute;right:10px;width:95%;top:85px;border-radius:12px!important}.categories-header{height:unset!important;margin-top:var(--margin-top)}.w-98{width:98%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:8px}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:-15px;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}\n"] }]
15454
- }], ctorParameters: () => [{ type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i3.MatDialog }, { type: StorageServiceService }, { type: RestService }, { type: EventsService }, { type: undefined, decorators: [{
15449
+ }], ctorParameters: () => [{ type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i1$1.MatDialog }, { type: StorageServiceService }, { type: RestService }, { type: EventsService }, { type: undefined, decorators: [{
15455
15450
  type: Inject,
15456
15451
  args: [LOCAL_STORAGE]
15457
15452
  }] }], propDecorators: { data: [{
@@ -16053,13 +16048,13 @@ class SchemeDetailComponent {
16053
16048
  el.scrollIntoView({ behavior: 'smooth' });
16054
16049
  }
16055
16050
  }
16056
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeDetailComponent, deps: [{ token: i2$2.ActivatedRoute }, { token: RestService }, { token: StorageServiceService }, { token: i3.MatDialog }, { token: i2$2.Router }, { token: EventsService }, { token: i6$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
16051
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeDetailComponent, deps: [{ token: i2$2.ActivatedRoute }, { token: RestService }, { token: StorageServiceService }, { token: i1$1.MatDialog }, { token: i2$2.Router }, { token: EventsService }, { token: i6$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
16057
16052
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SchemeDetailComponent, isStandalone: true, selector: "simpo-scheme-detail", inputs: { data: "data", index: "index", edit: "edit" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MatDialog, MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }], ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n\r\n<section class=\"main_section w-100\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\">\r\n <div class=\"plan_desc_section\">\r\n <ng-container *ngTemplateOutlet=\"planDescTemplate\"></ng-container>\r\n </div>\r\n <div class=\"about_plan_section p-5 d-flex flex-column align-items-center justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"aboutUsTemplate\"></ng-container>\r\n </div>\r\n <div class=\"scheme_calculator_section p-5 d-flex flex-column align-items-center justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"schemeCalculator\"></ng-container>\r\n </div>\r\n <div class=\"redeem_ans_section\" *ngIf=\"schemeDetails?.redeemDesc.length > 0\">\r\n <ng-container *ngTemplateOutlet=\"redeemInfoSection\"></ng-container>\r\n </div>\r\n <div class=\"scheme_work_section\" *ngIf=\"schemeDetails?.schemeWorkingDesc != {} && schemeDetails\">\r\n <ng-container *ngTemplateOutlet=\"schemeWorkSection\"></ng-container>\r\n </div>\r\n <div class=\"faq_section p-5\" *ngIf=\"faqList.length > 0\">\r\n <ng-container *ngTemplateOutlet=\"faqTemplate\"></ng-container>\r\n </div>\r\n <div class=\"terms_condition_section p-5\"\r\n *ngIf=\"schemeDetails?.termsAndConditions && schemeDetails?.termsAndConditions != {}\">\r\n <ng-container *ngTemplateOutlet=\"termsAndConditions\"></ng-container>\r\n </div>\r\n</section>\r\n<ng-template #redeemInfoSection>\r\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n <div class=\"faq-container\">\r\n <h1 class=\"faq-title\">How to redeem?</h1>\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <div class=\"faq-list\">\r\n <div class=\"redeem_info_section\" *ngIf=\"schemeDetails?.redeemDesc\">\r\n {{schemeDetails?.redeemDesc || 'N/A'}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #schemeWorkSection>\r\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n <div class=\"faq-container\">\r\n <h1 class=\"faq-title\">How Does this plan work?</h1>\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <div class=\"faq-list\">\r\n <div class=\"ans_section\" *ngFor=\"let faq of getKeys(schemeDetails?.schemeWorkingDesc);let i =index\">\r\n <div class=\"d-flex align-items-start gap-3 f-16\">\r\n <span>{{faq}}</span>\r\n <span>{{ schemeDetails?.schemeWorkingDesc?.[faq]?.replaceAll('\\n',' ') || 'N/A' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #planDescTemplate>\r\n <div class=\"hero-section d-flex align-items-center\">\r\n <div class=\"d-flex w-100\">\r\n <div class=\"d-flex align-items-center g-5 w-100\">\r\n <div\r\n [ngClass]=\"{'col-md-6': schemeDetails?.imgUrls[0], 'col-12 d-flex align-items-center justify-content-center': !schemeDetails?.imgUrls[0]}\">\r\n <div class=\"hero-content\">\r\n <h1 class=\"hero-title mb-4 d-flex align-items-center\"\r\n [ngClass]=\"{'justify-content-center':!schemeDetails?.imgUrls[0], 'justify-content-start':schemeDetails?.imgUrls[0]}\">\r\n <span class=\"title-highlight\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :'N/A'}}</span>\r\n </h1>\r\n <p class=\"hero-description mb-4\"\r\n [ngClass]=\"{'text-start':schemeDetails?.imgUrls[0],'text-center':!schemeDetails?.imgUrls[0]}\">\r\n {{schemeDetails?.desc ? schemeDetails?.desc :'N/A'}}\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6\" *ngIf=\"schemeDetails?.imgUrls[0]\">\r\n <div class=\"hero-image\">\r\n <img [src]=\"schemeDetails?.imgUrls ? schemeDetails?.imgUrls[0] :'N/A'\" alt=\"Pearl Jewelry\"\r\n class=\"jewellery-img w-100\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #aboutUsTemplate>\r\n <div class=\"d-flex flex-column gap-3\">\r\n <div class=\"text_header d-flex align-items-center justify-content-center\">\r\n <simpo-text-editor [(value)]=\"getInputText\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"desc_text\">\r\n {{schemeDetails?.about}}\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #schemeCalculator>\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <div class=\"calc_header d-flex flex-column align-items-center justify-content-center\">\r\n <span>Calculate Your Returns</span>\r\n <div class=\"calc_desc\">\r\n See how your savings grow with our smart investment schemes. choose your preferred scheme and discover\r\n your potential returns.\r\n </div>\r\n </div>\r\n <div class=\"calculator_section\">\r\n <div class=\"gold-purity\"\r\n *ngIf=\"schemeDetails?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n <div class=\"purity\" *ngFor=\"let gold of metalPrice?.priceData ?? []\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/18k_gold_pic.svg\" alt=\"\"\r\n *ngIf=\"gold?.karats === '18_k'\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/24k_gold_pic.svg\" alt=\"\"\r\n *ngIf=\"gold?.karats === '24_k'\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/22k_gold_pic.svg\" alt=\"\"\r\n *ngIf=\"gold?.karats === '22_k'\">\r\n <div>\r\n <div>{{gold?.karats?.replaceAll('_', \"\")}} Gold Purity</div>\r\n <div class=\"gold-price\">\u20B9{{gold.price}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"sub-header mb-3 px-3 monthly-scheme\">\r\n <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\r\n <p class=\"enrolled-gram\"\r\n *ngIf=\"schemeDetails?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n {{purchasedGram}} gms</p>\r\n </div>\r\n\r\n <div class=\"calculate-slider mb-4 px-3\">\r\n <div class=\"slider-container position-relative\">\r\n <mat-slider [min]=\"minAmount\" [max]=\"maxAmount\" [step]=\"schemeDetails?.valueStep\" class=\"w-100 pale-slider\"\r\n [style.--mdc-slider-handle-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mdc-slider-focus-handle-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mdc-slider-hover-handle-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mdc-slider-active-track-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mdc-slider-with-tick-marks-active-container-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mat-slider-ripple-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mat-slider-value-indicator-color]=\"data?.styles?.background?.accentColor\">\r\n <input matSliderThumb [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\">\r\n </mat-slider>\r\n <!-- <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\r\n [step]=\"schemeDetails?.valueStep\" [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\"> -->\r\n <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n <span class=\"fw-bold\">\u20B9{{minAmount | number}}</span>\r\n <span class=\"fw-bold\">\u20B9{{maxAmount | number}}</span>\r\n </div>\r\n <div class=\"random_options d-flex justify-content-center gap-3 align-items-center\"\r\n *ngIf=\"installmentOptions && installmentOptions.length > 0\">\r\n <div class=\"option cursor-pointer d-flex justify-content-center align-items-center\"\r\n [ngStyle]=\"option.status ? {'border': '2px solid grey','font-weight':'bold'} : {}\"\r\n *ngFor=\"let option of installmentOptions\" (click)=\"setMonthlyAmount(option)\">\r\n \u20B9 {{option?.value}}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-3\">\r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n </div>\r\n <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"calculator-bottom px-3 mb-5\">\r\n <div class=\"scheme-results\">\r\n <div class=\"row align-items-center justify-content-between mb-3 g-2\">\r\n <!-- Contribution Card -->\r\n <div class=\"col-12 col-sm-6\"\r\n [ngClass]=\"{'card-container': this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'}\">\r\n <div class=\"card text-center h-100\">\r\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n <div class=\"fw-bold calc_amount fs-md-5\">\r\n \u20B9{{(monthlyAmount * maturityCount) | number}}\r\n </div>\r\n <div class=\"text-muted small\">\r\n Your {{maturityCount}}-Month Contribution\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Plus Icon - Hidden on mobile -->\r\n <div class=\"col-auto d-none d-md-flex justify-content-center\"\r\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"fs-3 text-muted\">+</div>\r\n </div>\r\n\r\n <!-- Benefit Card -->\r\n <div class=\"col-12 col-sm-6 card-container\" *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"card text-center h-100\">\r\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n <div class=\"fw-bold calc_amount fs-md-5\">\r\n \u20B9{{benefitAmount | number}}\r\n </div>\r\n <div class=\"text-muted small\">\r\n Scheme Benefit\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Equals Icon - Hidden on mobile -->\r\n <div class=\"col-auto d-none d-md-flex justify-content-center\"\r\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"fs-3 text-muted\">=</div>\r\n </div>\r\n\r\n <!-- Total Card -->\r\n <div class=\"col-12 card-container col-sm-6 mt-2 mt-md-0\"\r\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"card text-center h-100 border-2\" [style.background]=\"styles?.background?.accentColor\">\r\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n <div class=\"fw-bold calc_amount fs-md-5 text-white\">\r\n <span *ngIf=\"schemeDetails?.benefitType != 'DISCOUNT'\">\r\n \u20B9{{((monthlyAmount * maturityCount) + benefitAmount) | number}}\r\n </span>\r\n <span *ngIf=\"schemeDetails?.benefitType === 'DISCOUNT'\">\r\n \u20B9{{(monthlyAmount * maturityCount) | number}}\r\n </span>\r\n </div>\r\n <div class=\"text-white-50 small\">\r\n Total Redemption Value\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12 col-sm-6\" *ngIf=\"this.schemeDetails?.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"card text-center h-100\">\r\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n <div class=\"fw-bold calc_amount fs-md-5\">\r\n {{purchasedGram}} gms\r\n </div>\r\n <div class=\"text-muted small\">\r\n Gold Allocation Today\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\r\n *ngIf=\"schemeDetails?.storeList?.length >=2 || staffMembers.length >= 2 \">\r\n <div class=\"store_selection w-50 align-items-center gap-1\" *ngIf=\"schemeDetails?.storeList?.length >=2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\r\n Store : </span></div>\r\n <div class=\"store-selector\">\r\n <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\"\r\n (ngModelChange)=\"getMetalPrice()\">\r\n <option [ngValue]=\"null\" disabled>Choose a store...</option>\r\n <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\r\n {{store.name}} - {{store.storeRefId}}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"staff-selector w-50 align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\r\n Staff Member : </span></div>\r\n <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\r\n <option value=\"\" disabled>Choose a staff member...</option>\r\n <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\r\n {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"terms-and-condition\">\r\n <input type=\"checkbox\" [(ngModel)]=\"termsAndCondition\">I agree to <a (click)=\"scrollDown()\">Terms &\r\n Conditions</a>\r\n </div>\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\" (click)=\"enrollScheme(schemeDetails)\">\r\n <span *ngIf=\" !enrollButtonLoader\">Enroll in Scheme</span>\r\n <ng-container *ngIf=\"enrollButtonLoader\">\r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\r\n Loading...\r\n </div>\r\n </ng-container>\r\n </button>\r\n </div>\r\n <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\r\n <div class=\"d-flex align-items-center mb-3\">\r\n \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\r\n </div>\r\n\r\n <div class=\"row mb-3\">\r\n <div class=\"col-6\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"result-card result-card-group text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\r\n Enroll in Scheme\r\n </button>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</ng-template>\r\n<ng-template #faqTemplate>\r\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n <div class=\"faq-container\">\r\n <h1 class=\"faq-title\">Frequently Asked Questions</h1>\r\n <p class=\"faq-subtitle\">Everything you need to know about our Group Investment Scheme</p>\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <div class=\"faq-list\">\r\n <div class=\"faq-item\" *ngFor=\"let faq of faqList ?? []\" (click)=\"faq.showAnswer = !faq.showAnswer\">\r\n <div class=\"faq-question\">\r\n <span>{{faq?.question ? faq?.question : 'N/A'}}</span>\r\n <mat-icon *ngIf=\"faq.showAnswer\">keyboard_arrow_up</mat-icon>\r\n <mat-icon *ngIf=\"!faq.showAnswer\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n <div class=\"faq-answer\" *ngIf=\"faq.showAnswer\">\r\n <p>{{faq?.answer ? faq?.answer :'N/A' }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #termsAndConditions>\r\n <section class=\"terms-section d-flex align-items-center justify-content-center\" id=\"termsAndCondition\">\r\n <div class=\"terms-container d-flex align-items-center justify-content-center flex-column\">\r\n <h1 class=\"terms-title\">Terms and Conditions</h1>\r\n\r\n <div class=\"terms-content\">\r\n <div class=\"term-item d-flex align-items-center\"\r\n *ngFor=\"let key of getKeys(schemeDetails?.termsAndConditions); let i = index\">\r\n <div class=\"terms_count\">\r\n <h3 class=\"term-heading\">{{ key }}.</h3>\r\n </div>\r\n <div>\r\n <p class=\"term-text mb-0\">\r\n {{ schemeDetails?.termsAndConditions?.[key]?.replaceAll('\\n',' ') || 'N/A' }}\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <!-- <div class=\"important-note\">\r\n <p><strong>Important:</strong> These terms and conditions are subject to change with prior notice.\r\n Participants will be notified of any changes via registered email or SMS. Continued\r\n participation after notification constitutes acceptance of revised terms.</p>\r\n </div> -->\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\r\n </div>\r\n </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.p-5{padding:2% 5%!important}.text_header{font-size:50px;font-weight:bolder;color:orange}.calc_header{gap:1rem;padding-bottom:4%}.calc_header span{font-size:23px;font-weight:700}.calc_desc{font-size:17px;text-align:center;padding:0% 23%}.desc_text{font-size:17px;padding:0% 20%;line-height:1.5rem;text-align:center}.sub-header-text{font-weight:500}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.random_options{padding:0% 1%}.option{padding:.5% 2%;border:1px solid rgba(227,66,255,.1);border-radius:50px;background:#3a00441a}.calculator_section{padding:2%;width:65vw;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;border-radius:16px}.scheme-results{background:#fff9e9;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.add_icon,.total_icon{padding:.3% 1%;background:#fff;border-radius:50px}.w-15{width:15vw}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{color:#fff}.result-card-group{background:#d63384;color:#fff}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.enroll-btn{font-size:16px;border:1px solid}.faq-container{border-radius:16px;padding:40px 0;width:65vw}.faq-title{font-size:1.8rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:12px}.faq-subtitle{font-size:1.1rem;color:#718096;text-align:center;margin-bottom:40px;font-weight:400}.faq-list{display:flex;flex-direction:column;gap:12px;width:80%}.faq-item{border:1px solid #e2e8f0;border-radius:12px;background:#fff;overflow:hidden;transition:all .3s ease}.faq-item:hover{border-color:#cbd5e0;box-shadow:0 2px 4px #0000000d}.faq-question{padding:20px 24px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:500;font-size:1.05rem;color:#2d3748;transition:color .2s ease}.faq-item:hover{box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014}.faq-question:hover span{color:#d4a574;text-decoration:underline}.faq-icon{width:20px;height:20px;color:#718096;transition:transform .3s ease;flex-shrink:0}.faq-item.active .faq-icon{transform:rotate(180deg)}.faq-answer{transition:.3s ease,padding .3s ease;padding:0% 2%}.faq-item.active .faq-answer{max-height:200px;padding:0 24px 20px}.faq-answer p{color:#4a5568;font-size:.95rem;line-height:1.6;margin-top:0}.terms-container{width:65vw}.terms-title{font-size:1.8rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:40px;letter-spacing:-.02em}.terms-content{display:flex;flex-direction:column;gap:32px;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;padding:20px;border-radius:16px;width:80%}.term-item{padding-bottom:8px;border-bottom:1px solid #e2e8f0;gap:10px}.term-heading{margin:0!important}.term-item:last-of-type{border-bottom:none;padding-bottom:unset}.term-heading{font-size:1.15rem;font-weight:600;color:#1a202c;letter-spacing:-.01em}.term-text{font-size:.95rem;color:#4a5568}.important-note{background:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;padding:20px;margin-top:16px}.important-note p{font-size:.9rem;color:#2d3748;line-height:1.6;margin:0}.important-note strong{color:#1a202c;font-weight:600}.footer-note{text-align:center;margin-top:24px;padding-top:16px}.footer-note p{font-size:.85rem;color:#718096;font-style:italic}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.payment-row .label{color:#000!important;font-size:16px}.bonus-message{border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0;gap:25px}.store_selection span{color:#d4a574;font-weight:700}.store-selector{width:100%;margin:5px 0}.store-selector label{display:block;font-weight:600;margin-bottom:8px}.store-selector .form-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;min-width:315px}.store-selector .form-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.store-selector .form-select:hover{border-color:#bbb}.store-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #007bff}.store-selector .selected-info p{margin:0;font-size:14px;color:#495057}.staff-selector label{display:block;color:#333;white-space:nowrap}.staff-selector span{color:#d4a574;font-weight:700}.staff-selector .form-select{margin:5px 0;width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.staff-selector .form-select:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px #28a7451a}.staff-selector .form-select:hover{border-color:#bbb}.staff-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #28a745}.staff-selector .selected-info p{margin:0;font-size:14px;color:#495057}.payment-row:last-child{margin-bottom:0}.amount{color:#333;font-size:14px;font-weight:500}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}@media (min-width :320px) and (max-width : 480px){.calc_desc,.desc_text{padding:0%}.random_options{margin-top:1rem}.hero-section{max-height:unset!important}.hero-section .container{padding:0!important}.p-5{padding:2% 0%!important}.sub-header{margin:.5rem 0px!important}.calculator_section{width:100%}.gold-purity{flex-wrap:wrap}.option{font-size:13px;white-space:nowrap}}@media (max-width: 768px){.terms-section{width:100%}.terms-container{padding:30px 0;width:100%}.terms-title{font-size:1.8rem;margin-bottom:30px}.terms-content{gap:24px;width:100%}.term-heading{font-size:1.1rem}.term-text{font-size:.9rem;text-align:left}.important-note{padding:16px}.faq-container,.faq-section,.faq-list{width:100%}}@media (min-width:475px){.terms-section{padding:0%!important}.card-container{width:31%;height:13vh;align-items:center}.calc_amount{font-size:1.5rem}}.bonus-message{flex-direction:column!important}.bonus-message :is(.staff-selector,.store_selection){width:100%!important}.redeem_info_section{text-align:center}.gold-purity{padding-left:1rem;padding-bottom:15px;display:flex;gap:15px}.gold-purity .purity{display:flex;gap:10px;background:#fff7d0;width:max-content;padding:5px 8px;border-radius:11px;align-items:center}.gold-purity .purity img{height:40px}.gold-purity .purity div{font-size:12px}.gold-purity .purity .gold-price{font-weight:700}.enrolled-gram{margin-bottom:0;font-size:17px;font-weight:600}.monthly-scheme{display:flex;justify-content:space-between}.color-white{color:#fff}.terms-and-condition{display:flex;align-items:center;gap:10px;margin-bottom:10px}.terms-and-condition input{cursor:pointer}.terms-and-condition :is(.store-selector,.form-select){min-width:unset!important}a{color:#0d6efd!important;text-decoration:underline!important;cursor:pointer}.f-16{font-size:16px}a:hover{color:#0a58ca!important}.ans_section{border:none}.plan_desc_section{padding:3% 0%}.hero-title{font-size:4rem;font-weight:900;line-height:1.1;color:#2c3e50}.title-highlight{background:linear-gradient(135deg,#d4a574,#e8c5a0,#f4d2a7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700;text-align:center}.hero-description{font-size:1.1rem;color:#666;line-height:1.6}.price-highlight{color:#d4a574;font-weight:700}.jewellery-img{border-radius:20px;box-shadow:0 20px 40px #0000001a;object-fit:cover;height:500px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "directive", type: i10$2.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }] }); }
16058
16053
  }
16059
16054
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeDetailComponent, decorators: [{
16060
16055
  type: Component,
16061
16056
  args: [{ selector: 'simpo-scheme-detail', standalone: true, imports: [CdkDragPlaceholder, CommonModule, MatDialogModule, SpacingHorizontalDirective, FormsModule, TextEditorComponent, MatIcon, ButtonEditorDirective, MatProgressSpinner, ButtonDirectiveDirective, ToastModule, MatSlider, MatSliderModule], providers: [MatDialog, MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n\r\n<section class=\"main_section w-100\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\">\r\n <div class=\"plan_desc_section\">\r\n <ng-container *ngTemplateOutlet=\"planDescTemplate\"></ng-container>\r\n </div>\r\n <div class=\"about_plan_section p-5 d-flex flex-column align-items-center justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"aboutUsTemplate\"></ng-container>\r\n </div>\r\n <div class=\"scheme_calculator_section p-5 d-flex flex-column align-items-center justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"schemeCalculator\"></ng-container>\r\n </div>\r\n <div class=\"redeem_ans_section\" *ngIf=\"schemeDetails?.redeemDesc.length > 0\">\r\n <ng-container *ngTemplateOutlet=\"redeemInfoSection\"></ng-container>\r\n </div>\r\n <div class=\"scheme_work_section\" *ngIf=\"schemeDetails?.schemeWorkingDesc != {} && schemeDetails\">\r\n <ng-container *ngTemplateOutlet=\"schemeWorkSection\"></ng-container>\r\n </div>\r\n <div class=\"faq_section p-5\" *ngIf=\"faqList.length > 0\">\r\n <ng-container *ngTemplateOutlet=\"faqTemplate\"></ng-container>\r\n </div>\r\n <div class=\"terms_condition_section p-5\"\r\n *ngIf=\"schemeDetails?.termsAndConditions && schemeDetails?.termsAndConditions != {}\">\r\n <ng-container *ngTemplateOutlet=\"termsAndConditions\"></ng-container>\r\n </div>\r\n</section>\r\n<ng-template #redeemInfoSection>\r\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n <div class=\"faq-container\">\r\n <h1 class=\"faq-title\">How to redeem?</h1>\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <div class=\"faq-list\">\r\n <div class=\"redeem_info_section\" *ngIf=\"schemeDetails?.redeemDesc\">\r\n {{schemeDetails?.redeemDesc || 'N/A'}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #schemeWorkSection>\r\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n <div class=\"faq-container\">\r\n <h1 class=\"faq-title\">How Does this plan work?</h1>\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <div class=\"faq-list\">\r\n <div class=\"ans_section\" *ngFor=\"let faq of getKeys(schemeDetails?.schemeWorkingDesc);let i =index\">\r\n <div class=\"d-flex align-items-start gap-3 f-16\">\r\n <span>{{faq}}</span>\r\n <span>{{ schemeDetails?.schemeWorkingDesc?.[faq]?.replaceAll('\\n',' ') || 'N/A' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #planDescTemplate>\r\n <div class=\"hero-section d-flex align-items-center\">\r\n <div class=\"d-flex w-100\">\r\n <div class=\"d-flex align-items-center g-5 w-100\">\r\n <div\r\n [ngClass]=\"{'col-md-6': schemeDetails?.imgUrls[0], 'col-12 d-flex align-items-center justify-content-center': !schemeDetails?.imgUrls[0]}\">\r\n <div class=\"hero-content\">\r\n <h1 class=\"hero-title mb-4 d-flex align-items-center\"\r\n [ngClass]=\"{'justify-content-center':!schemeDetails?.imgUrls[0], 'justify-content-start':schemeDetails?.imgUrls[0]}\">\r\n <span class=\"title-highlight\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :'N/A'}}</span>\r\n </h1>\r\n <p class=\"hero-description mb-4\"\r\n [ngClass]=\"{'text-start':schemeDetails?.imgUrls[0],'text-center':!schemeDetails?.imgUrls[0]}\">\r\n {{schemeDetails?.desc ? schemeDetails?.desc :'N/A'}}\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6\" *ngIf=\"schemeDetails?.imgUrls[0]\">\r\n <div class=\"hero-image\">\r\n <img [src]=\"schemeDetails?.imgUrls ? schemeDetails?.imgUrls[0] :'N/A'\" alt=\"Pearl Jewelry\"\r\n class=\"jewellery-img w-100\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #aboutUsTemplate>\r\n <div class=\"d-flex flex-column gap-3\">\r\n <div class=\"text_header d-flex align-items-center justify-content-center\">\r\n <simpo-text-editor [(value)]=\"getInputText\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"desc_text\">\r\n {{schemeDetails?.about}}\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #schemeCalculator>\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <div class=\"calc_header d-flex flex-column align-items-center justify-content-center\">\r\n <span>Calculate Your Returns</span>\r\n <div class=\"calc_desc\">\r\n See how your savings grow with our smart investment schemes. choose your preferred scheme and discover\r\n your potential returns.\r\n </div>\r\n </div>\r\n <div class=\"calculator_section\">\r\n <div class=\"gold-purity\"\r\n *ngIf=\"schemeDetails?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n <div class=\"purity\" *ngFor=\"let gold of metalPrice?.priceData ?? []\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/18k_gold_pic.svg\" alt=\"\"\r\n *ngIf=\"gold?.karats === '18_k'\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/24k_gold_pic.svg\" alt=\"\"\r\n *ngIf=\"gold?.karats === '24_k'\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/22k_gold_pic.svg\" alt=\"\"\r\n *ngIf=\"gold?.karats === '22_k'\">\r\n <div>\r\n <div>{{gold?.karats?.replaceAll('_', \"\")}} Gold Purity</div>\r\n <div class=\"gold-price\">\u20B9{{gold.price}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"sub-header mb-3 px-3 monthly-scheme\">\r\n <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\r\n <p class=\"enrolled-gram\"\r\n *ngIf=\"schemeDetails?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n {{purchasedGram}} gms</p>\r\n </div>\r\n\r\n <div class=\"calculate-slider mb-4 px-3\">\r\n <div class=\"slider-container position-relative\">\r\n <mat-slider [min]=\"minAmount\" [max]=\"maxAmount\" [step]=\"schemeDetails?.valueStep\" class=\"w-100 pale-slider\"\r\n [style.--mdc-slider-handle-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mdc-slider-focus-handle-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mdc-slider-hover-handle-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mdc-slider-active-track-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mdc-slider-with-tick-marks-active-container-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mat-slider-ripple-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mat-slider-value-indicator-color]=\"data?.styles?.background?.accentColor\">\r\n <input matSliderThumb [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\">\r\n </mat-slider>\r\n <!-- <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\r\n [step]=\"schemeDetails?.valueStep\" [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\"> -->\r\n <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n <span class=\"fw-bold\">\u20B9{{minAmount | number}}</span>\r\n <span class=\"fw-bold\">\u20B9{{maxAmount | number}}</span>\r\n </div>\r\n <div class=\"random_options d-flex justify-content-center gap-3 align-items-center\"\r\n *ngIf=\"installmentOptions && installmentOptions.length > 0\">\r\n <div class=\"option cursor-pointer d-flex justify-content-center align-items-center\"\r\n [ngStyle]=\"option.status ? {'border': '2px solid grey','font-weight':'bold'} : {}\"\r\n *ngFor=\"let option of installmentOptions\" (click)=\"setMonthlyAmount(option)\">\r\n \u20B9 {{option?.value}}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-3\">\r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n </div>\r\n <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"calculator-bottom px-3 mb-5\">\r\n <div class=\"scheme-results\">\r\n <div class=\"row align-items-center justify-content-between mb-3 g-2\">\r\n <!-- Contribution Card -->\r\n <div class=\"col-12 col-sm-6\"\r\n [ngClass]=\"{'card-container': this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'}\">\r\n <div class=\"card text-center h-100\">\r\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n <div class=\"fw-bold calc_amount fs-md-5\">\r\n \u20B9{{(monthlyAmount * maturityCount) | number}}\r\n </div>\r\n <div class=\"text-muted small\">\r\n Your {{maturityCount}}-Month Contribution\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Plus Icon - Hidden on mobile -->\r\n <div class=\"col-auto d-none d-md-flex justify-content-center\"\r\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"fs-3 text-muted\">+</div>\r\n </div>\r\n\r\n <!-- Benefit Card -->\r\n <div class=\"col-12 col-sm-6 card-container\" *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"card text-center h-100\">\r\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n <div class=\"fw-bold calc_amount fs-md-5\">\r\n \u20B9{{benefitAmount | number}}\r\n </div>\r\n <div class=\"text-muted small\">\r\n Scheme Benefit\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Equals Icon - Hidden on mobile -->\r\n <div class=\"col-auto d-none d-md-flex justify-content-center\"\r\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"fs-3 text-muted\">=</div>\r\n </div>\r\n\r\n <!-- Total Card -->\r\n <div class=\"col-12 card-container col-sm-6 mt-2 mt-md-0\"\r\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"card text-center h-100 border-2\" [style.background]=\"styles?.background?.accentColor\">\r\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n <div class=\"fw-bold calc_amount fs-md-5 text-white\">\r\n <span *ngIf=\"schemeDetails?.benefitType != 'DISCOUNT'\">\r\n \u20B9{{((monthlyAmount * maturityCount) + benefitAmount) | number}}\r\n </span>\r\n <span *ngIf=\"schemeDetails?.benefitType === 'DISCOUNT'\">\r\n \u20B9{{(monthlyAmount * maturityCount) | number}}\r\n </span>\r\n </div>\r\n <div class=\"text-white-50 small\">\r\n Total Redemption Value\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12 col-sm-6\" *ngIf=\"this.schemeDetails?.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"card text-center h-100\">\r\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n <div class=\"fw-bold calc_amount fs-md-5\">\r\n {{purchasedGram}} gms\r\n </div>\r\n <div class=\"text-muted small\">\r\n Gold Allocation Today\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\r\n *ngIf=\"schemeDetails?.storeList?.length >=2 || staffMembers.length >= 2 \">\r\n <div class=\"store_selection w-50 align-items-center gap-1\" *ngIf=\"schemeDetails?.storeList?.length >=2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\r\n Store : </span></div>\r\n <div class=\"store-selector\">\r\n <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\"\r\n (ngModelChange)=\"getMetalPrice()\">\r\n <option [ngValue]=\"null\" disabled>Choose a store...</option>\r\n <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\r\n {{store.name}} - {{store.storeRefId}}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"staff-selector w-50 align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\r\n Staff Member : </span></div>\r\n <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\r\n <option value=\"\" disabled>Choose a staff member...</option>\r\n <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\r\n {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"terms-and-condition\">\r\n <input type=\"checkbox\" [(ngModel)]=\"termsAndCondition\">I agree to <a (click)=\"scrollDown()\">Terms &\r\n Conditions</a>\r\n </div>\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\" (click)=\"enrollScheme(schemeDetails)\">\r\n <span *ngIf=\" !enrollButtonLoader\">Enroll in Scheme</span>\r\n <ng-container *ngIf=\"enrollButtonLoader\">\r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\r\n Loading...\r\n </div>\r\n </ng-container>\r\n </button>\r\n </div>\r\n <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\r\n <div class=\"d-flex align-items-center mb-3\">\r\n \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\r\n </div>\r\n\r\n <div class=\"row mb-3\">\r\n <div class=\"col-6\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"result-card result-card-group text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\r\n Enroll in Scheme\r\n </button>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</ng-template>\r\n<ng-template #faqTemplate>\r\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n <div class=\"faq-container\">\r\n <h1 class=\"faq-title\">Frequently Asked Questions</h1>\r\n <p class=\"faq-subtitle\">Everything you need to know about our Group Investment Scheme</p>\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <div class=\"faq-list\">\r\n <div class=\"faq-item\" *ngFor=\"let faq of faqList ?? []\" (click)=\"faq.showAnswer = !faq.showAnswer\">\r\n <div class=\"faq-question\">\r\n <span>{{faq?.question ? faq?.question : 'N/A'}}</span>\r\n <mat-icon *ngIf=\"faq.showAnswer\">keyboard_arrow_up</mat-icon>\r\n <mat-icon *ngIf=\"!faq.showAnswer\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n <div class=\"faq-answer\" *ngIf=\"faq.showAnswer\">\r\n <p>{{faq?.answer ? faq?.answer :'N/A' }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #termsAndConditions>\r\n <section class=\"terms-section d-flex align-items-center justify-content-center\" id=\"termsAndCondition\">\r\n <div class=\"terms-container d-flex align-items-center justify-content-center flex-column\">\r\n <h1 class=\"terms-title\">Terms and Conditions</h1>\r\n\r\n <div class=\"terms-content\">\r\n <div class=\"term-item d-flex align-items-center\"\r\n *ngFor=\"let key of getKeys(schemeDetails?.termsAndConditions); let i = index\">\r\n <div class=\"terms_count\">\r\n <h3 class=\"term-heading\">{{ key }}.</h3>\r\n </div>\r\n <div>\r\n <p class=\"term-text mb-0\">\r\n {{ schemeDetails?.termsAndConditions?.[key]?.replaceAll('\\n',' ') || 'N/A' }}\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <!-- <div class=\"important-note\">\r\n <p><strong>Important:</strong> These terms and conditions are subject to change with prior notice.\r\n Participants will be notified of any changes via registered email or SMS. Continued\r\n participation after notification constitutes acceptance of revised terms.</p>\r\n </div> -->\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\r\n </div>\r\n </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.p-5{padding:2% 5%!important}.text_header{font-size:50px;font-weight:bolder;color:orange}.calc_header{gap:1rem;padding-bottom:4%}.calc_header span{font-size:23px;font-weight:700}.calc_desc{font-size:17px;text-align:center;padding:0% 23%}.desc_text{font-size:17px;padding:0% 20%;line-height:1.5rem;text-align:center}.sub-header-text{font-weight:500}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.random_options{padding:0% 1%}.option{padding:.5% 2%;border:1px solid rgba(227,66,255,.1);border-radius:50px;background:#3a00441a}.calculator_section{padding:2%;width:65vw;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;border-radius:16px}.scheme-results{background:#fff9e9;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.add_icon,.total_icon{padding:.3% 1%;background:#fff;border-radius:50px}.w-15{width:15vw}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{color:#fff}.result-card-group{background:#d63384;color:#fff}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.enroll-btn{font-size:16px;border:1px solid}.faq-container{border-radius:16px;padding:40px 0;width:65vw}.faq-title{font-size:1.8rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:12px}.faq-subtitle{font-size:1.1rem;color:#718096;text-align:center;margin-bottom:40px;font-weight:400}.faq-list{display:flex;flex-direction:column;gap:12px;width:80%}.faq-item{border:1px solid #e2e8f0;border-radius:12px;background:#fff;overflow:hidden;transition:all .3s ease}.faq-item:hover{border-color:#cbd5e0;box-shadow:0 2px 4px #0000000d}.faq-question{padding:20px 24px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:500;font-size:1.05rem;color:#2d3748;transition:color .2s ease}.faq-item:hover{box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014}.faq-question:hover span{color:#d4a574;text-decoration:underline}.faq-icon{width:20px;height:20px;color:#718096;transition:transform .3s ease;flex-shrink:0}.faq-item.active .faq-icon{transform:rotate(180deg)}.faq-answer{transition:.3s ease,padding .3s ease;padding:0% 2%}.faq-item.active .faq-answer{max-height:200px;padding:0 24px 20px}.faq-answer p{color:#4a5568;font-size:.95rem;line-height:1.6;margin-top:0}.terms-container{width:65vw}.terms-title{font-size:1.8rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:40px;letter-spacing:-.02em}.terms-content{display:flex;flex-direction:column;gap:32px;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;padding:20px;border-radius:16px;width:80%}.term-item{padding-bottom:8px;border-bottom:1px solid #e2e8f0;gap:10px}.term-heading{margin:0!important}.term-item:last-of-type{border-bottom:none;padding-bottom:unset}.term-heading{font-size:1.15rem;font-weight:600;color:#1a202c;letter-spacing:-.01em}.term-text{font-size:.95rem;color:#4a5568}.important-note{background:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;padding:20px;margin-top:16px}.important-note p{font-size:.9rem;color:#2d3748;line-height:1.6;margin:0}.important-note strong{color:#1a202c;font-weight:600}.footer-note{text-align:center;margin-top:24px;padding-top:16px}.footer-note p{font-size:.85rem;color:#718096;font-style:italic}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.payment-row .label{color:#000!important;font-size:16px}.bonus-message{border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0;gap:25px}.store_selection span{color:#d4a574;font-weight:700}.store-selector{width:100%;margin:5px 0}.store-selector label{display:block;font-weight:600;margin-bottom:8px}.store-selector .form-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;min-width:315px}.store-selector .form-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.store-selector .form-select:hover{border-color:#bbb}.store-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #007bff}.store-selector .selected-info p{margin:0;font-size:14px;color:#495057}.staff-selector label{display:block;color:#333;white-space:nowrap}.staff-selector span{color:#d4a574;font-weight:700}.staff-selector .form-select{margin:5px 0;width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.staff-selector .form-select:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px #28a7451a}.staff-selector .form-select:hover{border-color:#bbb}.staff-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #28a745}.staff-selector .selected-info p{margin:0;font-size:14px;color:#495057}.payment-row:last-child{margin-bottom:0}.amount{color:#333;font-size:14px;font-weight:500}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}@media (min-width :320px) and (max-width : 480px){.calc_desc,.desc_text{padding:0%}.random_options{margin-top:1rem}.hero-section{max-height:unset!important}.hero-section .container{padding:0!important}.p-5{padding:2% 0%!important}.sub-header{margin:.5rem 0px!important}.calculator_section{width:100%}.gold-purity{flex-wrap:wrap}.option{font-size:13px;white-space:nowrap}}@media (max-width: 768px){.terms-section{width:100%}.terms-container{padding:30px 0;width:100%}.terms-title{font-size:1.8rem;margin-bottom:30px}.terms-content{gap:24px;width:100%}.term-heading{font-size:1.1rem}.term-text{font-size:.9rem;text-align:left}.important-note{padding:16px}.faq-container,.faq-section,.faq-list{width:100%}}@media (min-width:475px){.terms-section{padding:0%!important}.card-container{width:31%;height:13vh;align-items:center}.calc_amount{font-size:1.5rem}}.bonus-message{flex-direction:column!important}.bonus-message :is(.staff-selector,.store_selection){width:100%!important}.redeem_info_section{text-align:center}.gold-purity{padding-left:1rem;padding-bottom:15px;display:flex;gap:15px}.gold-purity .purity{display:flex;gap:10px;background:#fff7d0;width:max-content;padding:5px 8px;border-radius:11px;align-items:center}.gold-purity .purity img{height:40px}.gold-purity .purity div{font-size:12px}.gold-purity .purity .gold-price{font-weight:700}.enrolled-gram{margin-bottom:0;font-size:17px;font-weight:600}.monthly-scheme{display:flex;justify-content:space-between}.color-white{color:#fff}.terms-and-condition{display:flex;align-items:center;gap:10px;margin-bottom:10px}.terms-and-condition input{cursor:pointer}.terms-and-condition :is(.store-selector,.form-select){min-width:unset!important}a{color:#0d6efd!important;text-decoration:underline!important;cursor:pointer}.f-16{font-size:16px}a:hover{color:#0a58ca!important}.ans_section{border:none}.plan_desc_section{padding:3% 0%}.hero-title{font-size:4rem;font-weight:900;line-height:1.1;color:#2c3e50}.title-highlight{background:linear-gradient(135deg,#d4a574,#e8c5a0,#f4d2a7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700;text-align:center}.hero-description{font-size:1.1rem;color:#666;line-height:1.6}.price-highlight{color:#d4a574;font-weight:700}.jewellery-img{border-radius:20px;box-shadow:0 20px 40px #0000001a;object-fit:cover;height:500px}\n"] }]
16062
- }], ctorParameters: () => [{ type: i2$2.ActivatedRoute }, { type: RestService }, { type: StorageServiceService }, { type: i3.MatDialog }, { type: i2$2.Router }, { type: EventsService }, { type: i6$1.MessageService }], propDecorators: { data: [{
16057
+ }], ctorParameters: () => [{ type: i2$2.ActivatedRoute }, { type: RestService }, { type: StorageServiceService }, { type: i1$1.MatDialog }, { type: i2$2.Router }, { type: EventsService }, { type: i6$1.MessageService }], propDecorators: { data: [{
16063
16058
  type: Input
16064
16059
  }], index: [{
16065
16060
  type: Input
@@ -17820,7 +17815,7 @@ class ProductDescComponent extends BaseSection {
17820
17815
  this.selectedReview = review;
17821
17816
  document.getElementById('openReviewDetail')?.click();
17822
17817
  }
17823
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductDescComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: RestService }, { token: CartService }, { token: StorageServiceService }, { token: i6$1.MessageService }, { token: i1$1.Meta }, { token: i1$1.Title }, { token: i8$3.MatBottomSheet }, { token: i0.Renderer2 }, { token: i3.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
17818
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductDescComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: RestService }, { token: CartService }, { token: StorageServiceService }, { token: i6$1.MessageService }, { token: i1$2.Meta }, { token: i1$2.Title }, { token: i8$3.MatBottomSheet }, { token: i0.Renderer2 }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
17824
17819
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "reviewComponent", first: true, predicate: CustomerReviewComponent, descendants: true }, { propertyName: "d2", first: true, predicate: ["d2"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\"\r\n simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n\r\n <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\r\n </div>\r\n <section class=\"container p-0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\"\r\n (click)=\"routeToHome()\">Home</a> /\r\n <span>{{ responseData?.name | titlecase }}</span>\r\n </div>\r\n <div class=\"row h-100 w-100\" style=\"margin-top: 25px;height: 100%;\" class=\"above-height\"\r\n [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile}\">\r\n <div class=\"col-lg-6 col-12 h-100\" class=\"height\">\r\n <div class=\"prod-img-block\">\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-4 col-12 h-100 product-detail\">\r\n <ng-container *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\r\n\r\n\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngIf=\"toShowInJewellery\">\r\n <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"ecomConfigs?.videoCallEnabled\">\r\n <ng-container *ngTemplateOutlet=\"videoCallSchedule\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"ecomConfigs?.brandPromiseEnabled\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </ng-container>\r\n\r\n\r\n\r\n <ng-container>\r\n <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\r\n </ng-container>\r\n\r\n <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\r\n [innerHTML]=\"responseData.brief\"></div> -->\r\n <div class=\"product-sku\">\r\n <!-- <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div> -->\r\n <div\r\n *ngIf=\"responseData?.itemCategorisation?.itemCategories && (responseData?.itemCategorisation?.itemCategories?.length || 0) > 0\">\r\n Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\r\n *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\r\n titlecase}} <ng-container\r\n *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n </a></div>\r\n <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n </span></div>\r\n </div>\r\n <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\r\n <!-- <ng-container>\r\n <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\r\n </ng-container> -->\r\n </div>\r\n </div>\r\n <ng-container>\r\n <ng-container *ngTemplateOutlet=\"ReviewsSection\"></ng-container>\r\n </ng-container>\r\n </section>\r\n <!-- <ng-container *ngIf=\"relatedProductData?.length\">\r\n <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\r\n [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\r\n </ng-container>\r\n <ng-container *ngIf=\"recentViewItemList?.length\">\r\n <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\r\n [isRelatedProduct]=\"true\"></simpo-featured-products>\r\n </ng-container> -->\r\n <!-- <ng-container>\r\n <simpo-customer-review [data]=\"data\"></simpo-customer-review>\r\n </ng-container> -->\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 <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</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\r\n\r\n<div class=\"mobile-footer\">\r\n <div class=\"icons\">\r\n <div (click)=\"goToCart()\">\r\n <mat-icon>shopping_cart</mat-icon>\r\n </div>\r\n <div>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n </div>\r\n </div>\r\n <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\">Out of\r\n Stock</button>\r\n <div class=\"quantity\" *ngIf=\"responseData?.quantity && !ecomConfigs?.videoCallEnabled\"\r\n [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\r\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\r\n <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\r\n </div>\r\n <button *ngIf=\"responseData?.quantity && ecomConfigs?.videoCallEnabled\" class=\"send-btn w-100\"\r\n [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\r\n <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\r\n <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\" class=\"w-75\">\r\n <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\"\r\n (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ReviewSection>\r\n <div class=\"review-sec\">\r\n <div class=\"title\">Customer Review</div>\r\n <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\r\n <span>Be the first to write a review</span>\r\n <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add\r\n Review' : 'Cancel Review'}}</button>\r\n <ng-container *ngIf=\"showReview\">\r\n <hr />\r\n <div class=\"user-review\">\r\n <div class=\"title\">Write a review</div>\r\n <span class=\"secondary-text\">RATING</span>\r\n <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\r\n <div>\r\n <span class=\"secondary-text\">Review Title</span>\r\n <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\r\n </div>\r\n <div>\r\n <span class=\"secondary-text\">Review</span>\r\n <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\r\n </div>\r\n <div class=\"review-action-btn\">\r\n <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\r\n <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"addProductReview()\"\r\n [disabled]=\"productReview == 0 && reviewTitle?.length == 0 && reviewDescription?.length == 0\">Submit\r\n review</button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n<ng-template #SocialIcons>\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\r\n [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ActionBtn>\r\n <div class=\"button-parent\">\r\n <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\">Out of\r\n Stock</button>\r\n <div class=\"quantity\" *ngIf=\"responseData?.quantity && !ecomConfigs?.videoCallEnabled\"\r\n [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\r\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\r\n <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\r\n </div>\r\n <button *ngIf=\"responseData?.quantity && ecomConfigs?.videoCallEnabled\" class=\"send-btn w-100\"\r\n [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\"\r\n [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\"\r\n (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\r\n <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\r\n <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && IsEcommerce\" class=\"w-75\">\r\n <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\"\r\n (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div *ngIf=\"(!responseData?.quantity && !isItemOutOfStock) && !IsEcommerce\" class=\"w-75\">\r\n <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\" (click)=\"raiseLead()\"><mat-icon style=\"height:14px !important\">\r\n message</mat-icon>Notify Me</button>\r\n </div>\r\n <div class=\"favourite border-solid\" *ngIf=\"IsEcommerce\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n </div>\r\n <div class=\"share-product\">\r\n <mat-icon class=\"share-icon\" (click)=\"shareProduct()\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n [style.borderColor]=\"data?.styles?.background?.accentColor\">share</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #variants>\r\n <ng-container *ngIf=\"data?.styles?.customization == 'Style1'\">\r\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n <div class=\"mb-15\">\r\n <div class=\"varient-key\">{{varient.key}}</div>\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\r\n [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"data?.styles?.customization == 'Style2' && selectedVarient.size > 0\">\r\n <ng-container>\r\n <div class=\"row mt-2 style2-container w-100\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div *ngFor=\"let item of selectedVarient | keyvalue\" class=\"px-3 py-2 varient-item\"\r\n [class]=\"getClass(selectedVarient)\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div class=\"variant-head\">{{item.key | titlecase}}</div>\r\n <div class=\"variant-value text-start fw-600\">\r\n {{item.value |\r\n titlecase}}</div>\r\n </div>\r\n <div class=\"cursor-pointer p-0\" [class]=\"getClass(selectedVarient)\">\r\n <div class=\"custom-text d-flex align-items-center justify-content-center h-100 p-2\" data-bs-toggle=\"offcanvas\"\r\n data-bs-target=\"#offcanvasRightVariant\" [style.background]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">CUSTOMISE\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc>\r\n <div class=\"d-flex flex-column\" style=\"margin-top: 15px;\">\r\n <div class=\"rating d-flex justify-content-center gap-2 mb-3\"\r\n *ngIf=\"responseData?.averageRating && responseData?.totalReviewCount\"\r\n [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div class=\"rating-no my-1\">{{(responseData?.averageRating | number:'1.1-2')}}\u2B50</div>\r\n <div class=\"total-ratings my-1\">{{responseData?.totalReviewCount == 1 ? '1 Rating' :\r\n getRatings(responseData?.totalReviewCount) + \" \" + \"ratings\"}}</div>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.sellingPrice}\"\r\n *ngIf=\"responseData?.price?.sellingPrice && responseData.price.sellingPrice > 0\"><span\r\n [innerHTML]='currency'></span>\r\n {{responseData?.price?.sellingPrice}}</div>\r\n <div class=\"price\"\r\n [ngClass]=\"{'strike-through': getDifference(responseData?.price?.discountedPrice, responseData?.price?.value) > 2}\"\r\n *ngIf=\"getDifference(responseData?.price?.discountedPrice, responseData?.price?.value) > 2\">\r\n <span [innerHTML]='currency'></span>\r\n {{responseData?.price?.value | number:'1.0-0'}}\r\n </div>\r\n </div>\r\n <div class=\"tax-text\">(MRP Inclusive all taxes)</div>\r\n </div>\r\n <div class=\"heading-large trim-text\" class=\"product-heading\">{{responseData?.name}}</div>\r\n <ng-container *ngIf=\"toShowInJewellery\">\r\n <div class=\"discount\">\r\n <p>Flat 30% off on Diamond Prices</p>\r\n <p class=\"offer\">Offer Expires in 4 days</p>\r\n </div>\r\n <div class=\"ring-size-video\">\r\n <p class=\"text\">Not sure about the ring size?</p>\r\n <p class=\"learn-how\" data-toggle=\"modal\" data-target=\"#exampleModal\">Learn How\r\n <mat-icon>play_circle_outline</mat-icon>\r\n </p>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #descriptors>\r\n <div class=\"row prod-desc\">\r\n <div>\r\n <div class=\"product-header d-flex align-items-center justify-content-between\">\r\n <span class=\"header-text\" *ngIf=\"responseData?.descriptor || responseData?.materials\">Product Details</span>\r\n <div class=\"pricebreakup-btn d-flex align-items-center justify-content-center cursor-pointer\"\r\n *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\" data-bs-toggle=\"offcanvas\"\r\n data-bs-target=\"#offcanvasRightPriceBreakup\" [style.background]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">\r\n <mat-icon>add</mat-icon> PRICE BREAKUP\r\n </div>\r\n </div>\r\n <div class=\"description\">\r\n <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\r\n [innerHTML]=\"responseData?.descriptor?.name\" [style.background]=\"data?.styles?.background?.color\"></div>\r\n </div>\r\n <ng-container *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\">\r\n <div class=\"jewellery-table-container\">\r\n <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n <div class=\"jewel-container mt-2\">\r\n <div class=\"jewel-header\" [style.background]=\"getHeaderColor(ele.materialType)\">\r\n {{ele.materialType | titlecase}}\r\n </div>\r\n <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor(ele.materialType)\">\r\n <div class=\"col-6 metal-purity\">\r\n <div class=\"row-header\">\r\n Net Weight/Gram\r\n </div>\r\n <div class=\"row-content\">\r\n {{ele.primaryMaterialWeight + \" \" + 'grams'}}\r\n </div>\r\n </div>\r\n <div class=\"col-6 metal-purity\">\r\n <div class=\"row-header\">\r\n Purity\r\n </div>\r\n <div class=\"row-content\">\r\n {{ele.materialPurity}}\r\n </div>\r\n </div>\r\n <!-- <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Price/Gram\r\n </div>\r\n <div class=\"row-content\">\r\n \u20B9{{ getPricePerGram(ele.primaryMaterialWeight,ele.materialPrice) |\r\n number:'1.2-2'}}\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Value\r\n </div>\r\n <div class=\"row-content\">\r\n \u20B9{{ele.materialPrice | number:'1.2-2'}}\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- <div class=\"jewel-container mt-2\">\r\n <div class=\"jewel-header\" [style.background]=\"getHeaderColor('Making Charges')\">\r\n Making Charges\r\n </div>\r\n <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor('Making Charges')\">\r\n <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Net Weight\r\n </div>\r\n <div class=\"row-content\">\r\n {{responseData?.baseWeight}} </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Making Charge %\r\n </div>\r\n <div class=\"row-content\">\r\n {{responseData?.makingChargePercentage}}\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Value\r\n </div>\r\n <div class=\"row-content\">\r\n \u20B9{{responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2'}}\r\n </div>\r\n </div>\r\n </div>\r\n </div> -->\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <!-- <div class=\"tab-group\">\r\n <div class=\"tab\" data-bs-toggle=\"collapse\" href=\"#collapseExample\" >Description</div>\r\n </div>\r\n <div style=\"margin-top: 10px;\" class=\"body-large collapse\" id=\"collapseExample\" *ngIf=\"responseData?.descriptor\"\r\n [innerHTML]=\"responseData?.descriptor?.name\"></div> -->\r\n </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #ImageSection>\r\n <ng-container *ngIf=\"!varientLoading && (isMobile || data?.styles?.gridStyle == 'Style1')\">\r\n <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n <ng-container *ngFor=\"let img of itemImages\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" [simpoCorner]=\"styles?.corners\"\r\n [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n </ng-container>\r\n </div>\r\n <div class=\"item-img\">\r\n <ng-container *ngIf=\"currentImg\">\r\n\r\n <!-- <mat-icon class=\"share-icon\" (click)=\"shareProduct()\">share</mat-icon> -->\r\n <ng-container *ngIf=\"!isMobile\">\r\n <img [src]=\"currentImg\" class=\"img zoom\" style=\"height: 100%; width: 100%;\" [simpoCorner]=\"styles?.corners\">\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\" [simpoCorner]=\"styles?.corners\" class=\"zoom\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"!currentImg\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\r\n [simpoCorner]=\"styles?.corners\">\r\n </ng-container>\r\n </div>\r\n <div class=\"img-list w-100\" *ngIf=\"screenWidth <= 500\">\r\n <ng-container *ngFor=\"let img of itemImages\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n alt=\"\" class=\"img zoom\" (click)=\"changeImg(img.imgUrl)\"\r\n [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!varientLoading && (!isMobile && data?.styles?.gridStyle == 'Style2')\">\r\n <div class=\"row h-100 mt-0 w-100\">\r\n <ng-container *ngIf=\"itemImages?.length == 0\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\" class=\"img\"\r\n [simpoCorner]=\"styles?.corners\" class=\"col-12 h-100 p-0\">\r\n </ng-container>\r\n <ng-container *ngFor=\"let img of itemImages\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n alt=\"\" class=\"img col-6 h-75 p-1 style-2-img\" (click)=\"changeImg(img.imgUrl)\" [simpoCorner]=\"styles?.corners\"\r\n [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\"\r\n [class.h-100]=\"screenWidth <= 500\" [class.w-100]=\"itemImages?.length == 1\"\r\n [class.h-100]=\"itemImages?.length == 1\">\r\n </ng-container>\r\n </div>\r\n\r\n </ng-container>\r\n\r\n\r\n\r\n\r\n <div class=\"item-img\" *ngIf=\"varientLoading\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '100%',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #branding>\r\n <div class=\"row w-100\">\r\n <ng-container *ngFor=\"let brand of brandPromises\">\r\n <div class=\"col-4 d-flex flex-column align-items-center g-2\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"brand?.logoUrl\" alt=\"\" class=\"w-h-40 p-0 br-50\">\r\n <div class=\"brand-text w-100 text-center py-2\">\r\n {{brand?.title | titlecase}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #videoCallSchedule>\r\n <!-- *ngIf=\"ecomConfigs?.videoCallEnabled\" -->\r\n <ng-container>\r\n <div class=\"row w-100 video-container\">\r\n <div class=\"col-4 video-call-img\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/355007c175362077266611289-229221023_small.gif\"\r\n alt=\"\" class=\"w-100 h-100 \">\r\n </div>\r\n <div class=\"col-8 align-content-center\">\r\n <div class=\"video-head-text\">\r\n Live Video Call\r\n </div>\r\n <div class=\"sub-text\">\r\n Join a live video call with our consultants to see your favourite designs up close!\r\n </div>\r\n <button class=\"sch-btn text-center cursor-pointer\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(2)\" [buttonId]=\"getButtonId(2)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(2)\" (click)=\"!edit ? openDialogBox(dialogBox) : ''\">\r\n Schedule a Video Call\r\n </button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #DeliverySection>\r\n <div class=\"delivery-container\">\r\n <h2 class=\"delivery-title\">Delivery, Stores & Trial</h2>\r\n\r\n <!-- Location Section -->\r\n <div class=\"location-section\">\r\n <div class=\"location-container d-flex align-items-center justify-content-between\"\r\n [style.borderColor]=\"styles?.background?.accentColor\">\r\n <div class=\"d-flex align-items-center w-90\">\r\n <div class=\"d-flex mx-1\"><mat-icon\r\n class=\"gps d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n </div>\r\n <input type=\"number\" class=\"postal-code-input\" placeholder=\"Enter PinCode\" [(ngModel)]=\"pincode\">\r\n </div>\r\n <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">{{pincode ? 'Change' : 'Locate me'}}</button>\r\n </div>\r\n <div *ngIf=\"!isPinCode\" style=\"color: red;\">Pin code must be 6 digits.</div>\r\n </div>\r\n <ng-container>\r\n <!-- Free Delivery Section -->\r\n <div class=\"delivery-section\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"delivery-icon\">\uD83C\uDF81</span>\r\n\r\n <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges == 0\">Free\r\n Delivery by {{ storeDetails?.estimatedDeliveryDate | date:'d MMM' }}</span>\r\n\r\n <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges > 0\">Your\r\n Order will\r\n Deliver by {{ storeDetails?.estimatedDeliveryDate | date:'d MMM' }} with a Delivery Charge of\r\n \u20B9 {{ecomConfigs?.deliveryCharges | number:'1.2-2'}}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Nearest Store Section -->\r\n <ng-container\r\n *ngIf=\"storeDetails?.nearbyStore?.name && storeDetails?.nearbyStore?.name?.length > 0;else emptyStore\">\r\n <div class=\"store-section\">\r\n <div class=\"d-flex align-items-center store-item\">\r\n <span class=\"store-icon\">\uD83C\uDFEA</span>\r\n <div class=\"store-details\">\r\n <div class=\"store-text\">\r\n <span class=\"store-label\">Nearest Store - </span>\r\n <span class=\"store-name\">{{ storeDetails?.nearbyStore?.name | titlecase}}</span>\r\n <!-- <span class=\"store-distance\"> (4km)</span> -->\r\n </div>\r\n <!-- <div class=\"availability-section\">\r\n <span class=\"availability-badge\">\u23F0 AVAILABLE BY 28 JUN</span>\r\n </div> -->\r\n <!-- <div class=\"other-stores-text\">\r\n Also Available in <span class=\"other-stores-link\">18 other stores</span>\r\n </div> -->\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-center w-100\">\r\n <button class=\"find-store-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(1)\" (click)=\"onFindInStore(storeDetails?.nearbyStore?.storeId)\">FIND IN\r\n STORE</button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #emptyStore>\r\n <div class=\"delivery-section\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"delivery-icon\">\uD83C\uDFEA</span>\r\n <span class=\"delivery-text\">No Stores are available</span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <!-- Try At Home Section -->\r\n <div class=\"try-home-section\">\r\n <div class=\"d-flex align-items-start try-home-item\">\r\n <span class=\"home-icon\">\uD83C\uDFE0</span>\r\n <div class=\"try-home-details\">\r\n <div class=\"try-home-header\">\r\n <span class=\"try-home-text\">Try At Home</span>\r\n <span class=\"free-text\"> (It's Free)</span>\r\n </div>\r\n <div class=\"home-appointment-text\">Home Appointment <span>Available to try from 29 Jul</span></div>\r\n <!-- <div class=\"appointment-text\">\r\n Home Appointment <span class=\"appointment-available\">Available to try from 28 Jun</span>\r\n </div> -->\r\n </div>\r\n </div>\r\n <div class=\"d-flex-align-items-center justify-content-center w-100\">\r\n <button class=\"book-appointment-btn\" (click)=\"addToTrialCart()\" *ngIf=\"!isItemAddedAsTrial\">Try at\r\n HOME</button>\r\n <button class=\"book-appointment-btn\" *ngIf=\"isItemAddedAsTrial\">HOME APPOINTMENT BOOKED</button>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end offcanvas-variant\" tabindex=\"-1\" id=\"offcanvasRightVariant\"\r\n aria-labelledby=\"offcanvasRightLabel\">\r\n <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon data-bs-dismiss=\"offcanvas\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n <div class=\"varient-price px-3 pb-2\">\r\n <div class=\"price-text\">Price</div>\r\n <div class=\"d-flex g-3 align-items-center\">\r\n <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\r\n [innerHTML]='currency'></span>\r\n {{responseData?.price?.discountedPrice}}</div>\r\n <div class=\"price\"\r\n *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\"\r\n [ngClass]=\"{'strike-through': responseData?.price?.discountedPrice}\"><span [innerHTML]='currency'></span>\r\n {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\r\n </div>\r\n </div>\r\n <div class=\"varient-container h-100 p-3\">\r\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n <div class=\"varient-data\">\r\n <div class=\"varient-key\">{{varient.key}}</div>\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\r\n [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue | titlecase}}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"confirm-btn w-100 p-3 text-center cursor-pointer\" data-bs-dismiss=\"offcanvas\"\r\n [style.background]=\"data?.styles?.background?.accentColor\" style=\"color: white;\">Confirm\r\n Customization</div>\r\n</div>\r\n\r\n<ng-template #dialogBox>\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header d-flex align-item-center\">\r\n <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n <div class=\"schedule-header d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon (click)=\"matCloseDialog()\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"modal-body h-100\">\r\n <div class=\"row h-100 w-100 video-call-container\">\r\n <div class=\"col-6 h-100\" *ngIf=\"!isMobile\">\r\n <img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/557699c1753779503913freepik-overhead-shot-a-person-holding-a-smartphone-with-a-1029_vmg8GqHj (online-video-cutter.com).gif\"\r\n alt=\"\" class=\"w-100 h-100\" style=\"object-fit: cover;\">\r\n </div>\r\n <div class=\"col-6 position-relative h-100 call-details\">\r\n <!-- Name Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\r\n <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\r\n (input)=\"onInputChange('username')\">\r\n </div>\r\n\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n (input)=\"onInputChange('email')\">\r\n </div>\r\n\r\n <!-- Mobile Number Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\r\n <div class=\"sub-text-call\">IN +91</div>\r\n <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\r\n (input)=\"onInputChange('mobileNumber')\">\r\n </div>\r\n\r\n\r\n <!-- Pincode Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\r\n <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\r\n <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n </div>\r\n <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\r\n (input)=\"onInputChange('pincode')\">\r\n </div>\r\n <div class=\"language my-3\">\r\n <div class=\"mini-text mb-2\">Language Preference</div>\r\n <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\r\n <ng-container *ngFor=\"let lang of languages\">\r\n <div class=\"lang px-2 py-1 rounded cursor-pointer\"\r\n [style.background]=\"lang == selectedLang ? data?.styles?.background?.accentColor : ''\"\r\n (click)=\"selectedLang = lang\"\r\n [style.color]=\"lang == selectedLang ? getTextColor(data?.styles?.background?.accentColor) : '#000000'\">\r\n {{lang}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"selectedLang == 'Others'\">\r\n <div class=\"input-field my-3\">\r\n <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\r\n </div>\r\n </ng-container>\r\n <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\" [disabled]=\"isSubmitting\">\r\n <ng-container *ngIf=\"isSubmitting\">\r\n <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\r\n <span class=\"visually-hidden\">Loading...</span>\r\n </div>\r\n SCHEDULING...\r\n </ng-container>\r\n <ng-container *ngIf=\"!isSubmitting && !scheduled\">\r\n <div (click)=\"scheduleVideoCall()\" class=\"d-flex align-items-center\">\r\n <mat-icon>video_call</mat-icon>&nbsp;\r\n SCHEDULE A VIDEO CALL\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"scheduled\">\r\n <mat-icon>check_circle</mat-icon>&nbsp;\r\n SCHEDULED SUCCESSFULLY\r\n </ng-container>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end offcanvas-small overflow-scroll\" tabindex=\"-1\" id=\"offcanvasRightPriceBreakup\">\r\n <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon data-bs-dismiss=\"offcanvas\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n <div class=\"varient-price p-10-20\">\r\n <div class=\"price-break-header\">{{responseData?.name}}</div>\r\n </div>\r\n <div class=\"price-breakup h-100 w-100\">\r\n <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n <div class=\"price-container mb-3 p-10-20\">\r\n <div class=\"price-container-header\">\r\n {{ ele.materialType + \" BREAKUP\" }}\r\n </div>\r\n <div class=\"row w-100 header-row\">\r\n <div class=\"col-3 text-center\">COMPONENT</div>\r\n <div class=\"col-3 text-center\">RATE</div>\r\n <div class=\"col-3 text-center\">WEIGHT</div>\r\n <div class=\"col-3 text-center\">FINAL VALUE</div>\r\n </div>\r\n <div class=\"row w-100 value-row\">\r\n <div class=\"col-3 text-center\">{{ ele.materialPurity | titlecase }}</div>\r\n <div class=\"col-3 text-center\">\u20B9{{ getPricePerGram(ele.primaryMaterialWeight, ele.materialPrice) |\r\n number:'1.2-2' }}</div>\r\n <div class=\"col-3 text-center\">{{ ele.primaryMaterialWeight + \" grams\" }}</div>\r\n <div class=\"col-3 text-center total\">\u20B9{{ ele.materialPrice | number:'1.2-2' }}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"price-container mb-3 p-10-30 py-0 border-unset\">\r\n <div class=\"row w-100 summary-row\">\r\n <div class=\"col-6 text-start\">Making Charges</div>\r\n <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}\r\n </div>\r\n </div>\r\n <div class=\"row w-100 summary-row\">\r\n <div class=\"col-6 text-start\">Tax Amount</div>\r\n <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}\r\n </div>\r\n </div>\r\n <div class=\"row w-100 summary-row\">\r\n <div class=\"col-6 text-start\">Total Amount</div>\r\n <div class=\"col-6 text-end total\">\r\n \u20B9{{(responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) |\r\n number:'1.2-2'}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n\r\n<ng-template #ReviewsSection>\r\n <div class=\"w-100 row review-section\" [style.background]=\"getRGBA(styles?.background?.accentColor, 10)\"\r\n *ngIf=\"reviewsData && reviewsData.length > 0\">\r\n <div class=\"col-md-3 col-sm-12\">\r\n <div class=\"cust-header\">Customer Reviews</div>\r\n <div class=\"d-flex gap-3 mb-1\">\r\n <ng-container *ngIf=\"responseData?.averageRating\">\r\n <p-rating [(ngModel)]=\"responseData.averageRating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n </ng-container>\r\n <span class=\"rating-text\">{{responseData?.averageRating | number:'1.1-2'}} out of 5</span>\r\n </div>\r\n <div class=\"d-flex mb-3\">{{responseData?.totalReviewCount + \" ratings\"}}</div>\r\n <div class=\"ratings-percentage\">\r\n <ng-container *ngFor=\"let rating of [5,4,3,2,1]\">\r\n <div class=\"percentage d-flex align-items-center gap-2 mb-2\">\r\n <span>{{rating + \" star\"}}</span>\r\n <div class=\"w-50 bar\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div [style.width.%]=\"getPercentage(rating)\"\r\n [style.backgroundColor]=\"data?.styles?.background?.accentColor\" class=\"h-100\"></div>\r\n </div>\r\n <span class=\"percentage-text\">{{getPercentage(rating) + \"%\"}}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-md-9 col-sm-12\">\r\n <div class=\"review-header\">Latest Reviews</div>\r\n <div class=\"review-body d-flex flex-column gap-3\">\r\n <ng-container *ngFor=\"let review of reviewsData\">\r\n <div class=\"review-container w-75\">\r\n <div class=\"review-name gap-2 my-2 d-flex align-items-center\">\r\n <img src=\"https://m.media-amazon.com/images/S/amazon-avatars-global/default.png\" alt=\"\"\r\n class=\"width-30 h-25 mr-2\">\r\n <span>{{review?.userName ?? \"-\"}}</span>\r\n </div>\r\n <ng-container *ngIf=\"review?.rating\">\r\n <p-rating [(ngModel)]=\"review.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n </ng-container>\r\n <div class=\"review-desc\">\r\n {{review?.review ?? \"-\"}}\r\n </div>\r\n <div class=\"review-img\">\r\n <img [src]=\"img.imgUrl\" alt=\"\" *ngFor=\"let img of review?.reviewImages ?? []\"\r\n (click)=\"showDetailReview(review)\">\r\n <button style=\"display: none;\" data-toggle=\"modal\" data-target=\"#reviewModal\"\r\n id=\"openReviewDetail\"></button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"w-75 see-more py-3\" (click)=\"loadMoreReviews()\" *ngIf=\"(reviewsData?.length ?? 0) > 3\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">\r\n See more reviews <span>></span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n</ng-template>\r\n\r\n<div class=\"modal fade\" id=\"exampleModal\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" role=\"dialog\"\r\n aria-hidden=\"true\">\r\n <div class=\"modal-dialog modal-dialog-centered video-modal\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-body\" style=\"height: 100%;\">\r\n <video controls muted playsinline style=\"width: 100%; height: 100%;\">\r\n <source\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/371647c1753962084265clideo_editor_48bc93c24e18470888c661bb09e437da (online-video-cutter.com).mp4\"\r\n type=\"video/mp4\">\r\n Your browser does not support the video tag.\r\n </video>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"modal fade\" id=\"reviewModal\" tabindex=\"-1\" aria-labelledby=\"reviewModalLabel\" role=\"dialog\"\r\n aria-hidden=\"true\">\r\n <div class=\"modal-dialog review-modal\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h1 class=\"modal-title fs-5\"></h1>\r\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n </div>\r\n <div class=\"modal-body\">\r\n <div class=\"detail-review-container\">\r\n <div class=\"image-section\">\r\n <div class=\"product-image\">\r\n <div class=\"backward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex-1\"\r\n *ngIf=\"currentImageIndex > 0\">\u25BC</div>\r\n <img [src]=\"selectedReview?.reviewImages?.[currentImageIndex]?.imgUrl\" alt=\"\">\r\n <div class=\"forward-arrow arrow\" (click)=\"currentImageIndex = currentImageIndex+1\"\r\n *ngIf=\"currentImageIndex < selectedReview?.images?.length - 1\">\u25B2</div>\r\n <!-- <div class=\"earbuds-container\">\r\n <div class=\"charging-case\"></div>\r\n <div class=\"earbud left\"></div>\r\n <div class=\"earbud right\"></div>\r\n </div> -->\r\n </div>\r\n <!-- <div class=\"navigation-arrows\">\r\n </div> -->\r\n </div>\r\n\r\n <div class=\"review-section\">\r\n <div class=\"reviewer-header\">\r\n <div class=\"reviewer-avatar\">\uD83D\uDC64</div>\r\n <div class=\"reviewer-name\">{{selectedReview?.userName ?? \"-\"}}</div>\r\n </div>\r\n\r\n <div class=\"detail-rating\" *ngIf=\"selectedReview?.rating\">\r\n <p-rating [(ngModel)]=\"selectedReview.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n </div>\r\n\r\n <div class=\"review-date\">\r\n Reviewed in India on 24 July 2025\r\n </div>\r\n\r\n <div class=\"review-text\">\r\n {{selectedReview?.review ?? \"-\"}}\r\n </div>\r\n\r\n <div class=\"images-section\">\r\n <h3>Images in this review</h3>\r\n <div class=\"review-images\">\r\n <div class=\"review-image\" [ngClass]=\"{'selected': currentImageIndex == i}\"\r\n *ngFor=\"let img of selectedReview?.reviewImages ?? [];let i = index\" (click)=\"currentImageIndex = i\">\r\n <img [src]=\"img.imgUrl\" alt=\"\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".product-desc{display:flex}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.strike-through{text-decoration:line-through;color:#d3d3d3}::ng-deep .smooth-panel .p-panel-header{cursor:pointer;background:transparent;border:unset;font-size:18px;font-weight:700;padding:0}::ng-deep .smooth-panel .p-panel-content{border:unset;padding:0}.jewel-container{border-radius:12px;box-shadow:#63636333 0 2px 8px}.jewel-header{padding:8px 10px;border-radius:12px 12px 0 0;font-size:15px;font-weight:700;color:#4f3267}.br-p{border-radius:0 0 12px 12px;padding:10px 0}.row-header{font-size:13px;font-weight:700;color:#4f3267}.row-content{color:#4e555e}.jewellery-table-container{border-radius:12px}.jewellery-table{width:100%;border-collapse:collapse;border:1px solid #ddd;transition:all .3s ease}.jewellery-table th,.jewellery-table td{border:1px solid #ddd;padding:12px;text-align:left;transition:background-color .2s ease}.material-header td{background-color:#f8f9fa;font-weight:700;font-size:16px}.column-header{background-color:#f1f1f1}.column-header th{font-weight:600}.material-row:hover{background-color:#f5f5f5}.charges-header th,.total-header th{background-color:#eaeaea;font-weight:700}.total-row td{font-weight:700;font-size:18px;background-color:#f8f8f8}@media screen and (max-width: 600px){.jewellery-table{font-size:14px}.jewellery-table th,.jewellery-table td{padding:8px}}.share-icon{border:1px solid;border-radius:8px;padding:5px;height:43px;width:40px;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer}.prod-img-block{height:100%;display:flex;gap:5px}.header-text{font-size:17px;font-weight:bolder}.pricebreakup-btn{font-size:11px;font-weight:700;padding:1% 3%;border-radius:8px;letter-spacing:.5px}.pricebreakup-btn mat-icon{font-size:18px;display:flex;align-items:center}.img-list{display:flex;gap:5px;max-height:460px}.img-list img{height:100px;width:100px;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:100%;height:500px;overflow:hidden}.item-img img{width:100%!important;height:100%!important}.fast-checkout{position:absolute;top:10px;right:10px;display:flex;gap:10px;width:fit-content}.fast-checkout img{cursor:pointer}.selling-fast-tag{background-color:#fff;color:#000;padding:5px 10px;border-radius:3px;font-weight:700}.price{font-weight:600;font-size:24px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:1px solid;align-items:center;gap:15px;height:44px;width:75%;justify-content:space-between;border-radius:12px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.fc{font-size:17px;font-weight:700}.trim-text{-webkit-line-clamp:3!important}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;margin-top:.5rem}.tab-group{display:flex;gap:10px}.tab{font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black;max-width:max-content}.discount-price{font-size:1.4rem}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#f7f7f7;padding:11px 20px;border-radius:12px;margin-top:unset!important;width:70%!important;border:1px solid #d3d3d347}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#f7f7f7;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:7px 25px;cursor:pointer;font-weight:600}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:5px;height:44px!important;justify-content:space-between;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px 15px;width:fit-content!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:fit-content!important;font-size:14px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.w-h-40{width:40px!important;height:40px!important}.product-detail{margin-top:0;height:100vh}.above-height{height:90vh}.height{height:100vh}.mobile-footer{display:none}video{border-radius:18px}@media (min-width: 1024px){.height{width:75%}.above-height{width:100%;display:flex}.product-detail{padding:2%}.product-heading{font-size:16px;font-weight:600;margin-top:15px;font-size:1rem}.prod-img-block{height:100%;display:flex;flex-direction:column-reverse;justify-content:start;gap:5px}}@media only screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:100000001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.product-desc,.brief-desc{font-size:16px}.total-container{padding-top:10px!important;padding-bottom:10px!important}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;padding:5px;margin-top:0!important}.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important;height:348px}.item-img img{width:100%;height:348px!important}.display-none{display:none}.prod-img-block{flex-direction:column;gap:5px}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{width:25%;border:2px solid lightgray;cursor:pointer}.product-detail{margin-top:20px;overflow-x:hidden}.input-field{margin-top:.7rem!important;margin-bottom:.7rem!important}.prod-desc{margin-top:20px}.video-call-container{margin:0!important}.product-img{height:220px}.call-details{width:100%!important;padding:3%!important}.send-btn{padding:.5rem 1rem!important;width:73%!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}.favourite:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px)}.review-sec :is(input,textarea){width:100%!important}.height{width:100%;height:auto}.above-height{padding:4%;min-height:95vh!important;height:unset!important}.product-heading{font-size:16px}}.send-btn{font-size:14px!important;padding:1rem;display:flex;align-items:center;justify-content:center;text-transform:uppercase;font-weight:600}.send-btn mat-icon{height:20px;width:20px;font-size:18px}.favourite .mat-icon{min-height:40px;min-width:40px;font-size:25px;display:flex;align-items:center;justify-content:center;border-radius:5px;cursor:pointer}.favourite:hover,.share-product:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px)}.border-solid{border:1px solid;border-radius:8px}a{text-decoration:none}.brief-desc{font-size:14px;color:#4e555e}.total-container{height:100vh;position:relative;display:block!important;overflow:scroll;margin-bottom:1rem}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin:unset!important}.modal-content{height:100%;border:none;border-radius:0!important}@media (min-width:768px) and (max-width:991px){.item-img{position:relative;width:auto!important;height:auto!important;overflow:hidden}.item-img img{height:auto!important;width:auto!important}.height{width:min-content}.above-height{width:100%;padding:2%;display:flex;flex-direction:column}.product-detail{padding:0vw 42vw 0vw 2vw}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:911px){.product-detail{padding:0% 34% 0% 2%}.above-height{display:flex}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:1024px){.product-detail{padding:0% 2%}.above-height{display:flex}.product-headig{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}.mat-accordion .mat-expansion-panel:last-of-type{box-shadow:none}.mb-15{margin-bottom:15px}@media (min-width: 1400px){.container{max-width:unset;width:95%}}.width-max{width:max-content}.width-34{width:33.3%!important}.fw-600{font-weight:600}.cursor-pointer{cursor:pointer}.f-18{font-size:18px}.offcanvas-variant{border-radius:30px 0 0 30px}.varient-header,.varient-price{background:#f7f7f7}.varient-header{border-radius:30px 0 0}.confirm-btn{border-radius:0 0 0 30px;position:absolute!important;bottom:0!important}.style2-container{border:1px solid;border-radius:12px;margin:0}.varient-item{border-right:1px solid;align-content:center}.variant-head{font-size:12px;color:#33363e}.varient-data{margin-bottom:25px;border-bottom:1px solid black;padding-bottom:25px}.variant-value{font-size:.9rem;color:#000}.custom-text{border-radius:0 8px 8px 0;font-size:.9rem;font-weight:600}.br-50{border-radius:50%}.w-15{width:22%!important}.scroll-wrap{flex-wrap:nowrap}.brand-text{word-wrap:break-word;white-space:normal;font-size:12px;font-weight:600;line-height:20px}.video-container{border:1px solid rgb(240,240,240);margin:10px 0;border-radius:12px}.video-head-text{font-size:16px;font-weight:700}.sub-text{font-size:11px;color:#6f7377;margin-bottom:10px}.sch-btn{font-size:1.2rem!important;color:#fff;padding:3px 0;margin-top:5px}.tax-text{font-size:.7rem;color:#6f7377}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.delivery-container{margin:35px 0 15px;background-color:transparent}.delivery-title{font-size:16px;font-weight:600;margin:0 0 12px;line-height:1.2}.location-container{border:1px solid #cfcfcf;border-radius:12px;padding:10px;margin-bottom:15px;width:100%}.location-icon{width:20px;height:20px;background-color:#374151;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}.location-icon:before{content:\"\";width:8px;height:8px;background-color:#fff;border-radius:50%;position:absolute}.postal-code-input{font-size:12px;font-weight:600;letter-spacing:.5px;border:none;outline:none;background:transparent;width:90%}.postal-code-input::placeholder{font-weight:500}.locate-btn{background:none!important;border:none!important;font-weight:500;font-size:12px!important;padding:0!important;box-shadow:none!important;width:20%!important}.gps{font-size:17px}.locate-btn:focus{box-shadow:none!important}.delivery-section{margin-bottom:15px;border:1px solid rgb(240,240,240);padding:10px;border-radius:12px}.delivery-icon{font-size:18px;color:#ec4899;margin-right:14px;width:20px}.delivery-text{font-size:14px;font-weight:700}.store-section{border:1px solid rgb(240,240,240);padding:10px;border-radius:12px;margin-bottom:15px}.store-item{margin-bottom:11px}.store-icon{font-size:18px;color:#f97316;margin-right:14px;margin-top:2px;width:20px}.store-details{flex:1}.store-text{font-size:14px}.store-name{font-weight:700}.availability-section{margin-bottom:6px}.availability-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:#d97706;background-color:#fef3c7;padding:4px 8px;border-radius:12px;letter-spacing:.5px}.other-stores-text{font-size:14px;color:#6b7280;line-height:1.4}.other-stores-link{color:#6b46c1;cursor:pointer;text-decoration:underline}.other-stores-link:hover{color:#553c9a}.find-store-btn{width:100%!important;padding:8px 20px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px}.try-home-section{border-radius:12px;padding:10px;border:1px solid rgb(240,240,240)}.try-home-item{margin-bottom:10px;padding:0}.home-icon{font-size:18px;color:#6b46c1;margin-right:14px;margin-top:2px;width:20px}.try-home-details{flex:1}.try-home-text{font-size:14px;font-weight:700;color:#374151}.free-text{font-size:14px;color:#6b7280}.appointment-text{font-size:14px;color:#6b7280;line-height:1.4}.appointment-available{font-weight:500;color:#374151}.book-appointment-btn{background:linear-gradient(135deg,#8b5cf6,#a855f7);color:#fff;border:none;padding:8px 20px;border-radius:12px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px;transition:all .2s ease}.book-appointment-btn:hover{background:linear-gradient(135deg,#7c3aed,#9333ea);transform:translateY(-1px);box-shadow:0 4px 8px #8b5cf64d}@media (max-width: 480px){.location-section{padding:12px 0}.try-home-section{padding:20px}}.w-90{width:90%}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.w-12{width:12%!important}.w-88{width:88%!important}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.border-unset{border:unset!important}.error-border{border:2px solid #dc3545!important}.offcanvas-small{height:72vh;top:25%;width:35%;border-radius:50px 0 0 50px}.rating{width:max-content;border:1px solid;border-radius:20px;padding:0 10px;margin-bottom:.5rem}.zoom:hover{transform:scale(1.2);transition:transform .2s ease-in-out;overflow:hidden}.rating-no{padding-right:7px;margin:0;border-right:1px solid;font-size:.75rem}.p-10-20{padding:10px 30px}.price-break-header{font-size:19px;font-weight:600}.price-container{border-bottom:1px solid rgb(233,233,233)}.price-container-header{font-size:14px;font-weight:600;color:#333}.total-ratings{font-size:.75rem}.header-row .col-3{font-size:12px;font-weight:500;color:#666}.value-row .col-3{font-size:14px;font-weight:400;color:#333}.value-row .col-3.total{font-weight:600}.summary-row .col-6{font-size:15px;font-weight:500;color:#333;padding:unset}.summary-row .col-6.total{font-weight:600;padding-right:10px}.summary-row{padding:0 42px}.error-border{border:2px solid #e74c3c!important;box-shadow:0 0 5px #e74c3c4d!important}.form-control,.input-field input{transition:border-color .3s ease,box-shadow .3s ease}.error-border:focus{border-color:#e74c3c!important;box-shadow:0 0 8px #e74c3c80!important}.input-field input:focus{transform:scale(1.02)}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:-.125em;border:.125em solid currentcolor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}.spinner-border-sm{width:.875rem;height:.875rem;border-width:.125em}@keyframes spinner-border{to{transform:rotate(360deg)}}.me-2{margin-right:.5rem}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.width-30{width:30px!important}.review-header{font-size:20px;font-weight:600}.review-desc{font-weight:500}.see-more{font-weight:600;cursor:pointer;border-top:1px solid #d1d1d1}.see-more span{font-size:12px}.cust-header{font-size:24px}.bar{border:1px solid;height:20px;border-radius:5px;overflow:hidden}.bar div{border-radius:2px}.parent-container{height:100%;width:100%;display:flex}.home-appointment-text{font-size:.8rem;color:#4e555e}.home-appointment-text span{font-weight:600}.video-call-img{height:120px;margin:0;padding:0;border-radius:45px}.video-call-img img{border-top-left-radius:12px;border-bottom-left-radius:12px}.discount{background:#fff3f2;padding:15px 15px 20px;margin-top:14px;border-radius:8px;display:flex;flex-direction:column;gap:5px;position:relative}.discount p{margin-bottom:0;color:#4f3267;font-weight:700;font-size:1rem}.discount .offer{color:#eb4f5c}.discount:before{content:\"\";display:block;height:44px;width:4px;background:#eb4f5c;position:absolute;left:0;top:16px;border-top-right-radius:20px;border-bottom-right-radius:20px}.metal-purity{display:flex;flex-direction:column;gap:10px}.scrollable-content{height:100%;max-height:95vh;overflow-y:auto}.style-2-img{max-height:70%;height:100%!important}.ring-size-video{background:#f0ebff;display:flex;justify-content:space-between;align-items:center;height:45px;padding:12px;border-radius:10px;margin-top:20px;margin-bottom:20px}.ring-size-video .text{color:#4f3267;font-size:.9rem}.ring-size-video .learn-how{color:#de57e9;font-weight:700;font-size:1rem;display:flex;gap:5px;align-items:center;cursor:pointer}.ring-size-video .learn-how mat-icon{font-size:20px;display:flex;align-items:center}.ring-size-video p{margin-bottom:0}.video-modal{height:90vh!important;width:90vw!important;max-width:none}.video-modal .modal-body{padding:0}.review-section{border-radius:10px;padding:15px}.review-img{display:flex;gap:10px;margin-top:10px}.review-img img{max-width:100px;max-height:140px}.detail-review-container{display:flex;max-width:1200px;margin:0 auto;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px #0000001a}.image-section{flex:1;background:#000;position:relative;min-height:400px}.product-image{width:100%;height:100%;object-fit:cover;background:linear-gradient(135deg,#e8e8e8,#d0d0d0);display:flex;align-items:center;justify-content:center;max-height:400px;position:relative}.product-image img{height:100%;width:100%;object-fit:contain}.earbuds-container{position:relative;width:300px;height:200px}.charging-case{width:200px;height:120px;background:linear-gradient(145deg,#f0f0f0,#e0e0e0);border-radius:25px;position:absolute;top:40px;left:50px;box-shadow:inset 0 4px 8px #0000001a}.charging-case:before{content:\"\";position:absolute;inset:10px;background:linear-gradient(145deg,#e8e8e8,#d8d8d8);border-radius:15px;box-shadow:inset 0 2px 4px #0000001a}.earbud{position:absolute;width:45px;height:15px;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);border-radius:8px;box-shadow:0 2px 4px #0003}.earbud:before{content:\"noise\";position:absolute;top:2px;left:50%;transform:translate(-50%);font-size:6px;color:#888;font-weight:300}.earbud.left{top:70px;left:80px}.earbud.right{top:90px;left:130px}.earbud.right:before{color:#ff6b35}.review-section{flex:1;padding:30px;background:#fafafa}.reviewer-header{display:flex;align-items:center;margin-bottom:15px}.reviewer-avatar{width:40px;height:40px;background:#ccc;border-radius:50%;margin-right:12px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#666}.reviewer-name{font-size:16px;font-weight:500;color:#333}.detail-rating{margin:10px 0}.stars{display:flex;gap:2px;margin-bottom:5px}.star{color:#ff9500;font-size:18px}.thumbs{display:flex;gap:5px}.thumb{color:#ff9500;font-size:16px}.review-date{font-size:14px;color:#666;margin:15px 0}.review-text{font-size:16px;line-height:1.5;color:#333;margin-bottom:25px}.images-section h3{font-size:16px;color:#666;margin-bottom:15px;font-weight:500}.review-images{display:flex;gap:10px}.review-image{width:60px;height:60px;background:#ddd;border-radius:6px;border:2px solid #e0e0e0;cursor:pointer;transition:border-color .3s}.review-image img{width:100%;height:100%}.review-image:hover,.review-image.selected{border-color:#007185}.navigation-arrows{position:absolute;top:20px;right:20px;display:flex;flex-direction:column;gap:10px}.arrow{width:40px;height:40px;background:#fffc;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:#666;transition:background-color .3s;position:absolute;transform:rotate(90deg)}.backward-arrow{left:10px}.forward-arrow{right:10px}.arrow:hover{background:#fff}@media (max-width: 768px){.review-container{flex-direction:column}.image-section{min-height:300px}.review-section{padding:20px}}.review-modal{max-width:none;width:70vw}.review-modal .modal-body{padding:0}@media screen and (max-width: 475px){.offcanvas-small{height:100vh;width:100%;top:0}.review-modal{margin:0;height:100%;width:100%}.detail-review-container{flex-direction:column;height:100%}.product-image{max-height:289px}.image-section{min-height:289px}.video-modal{margin:0;height:100vh!important;width:100vw!important;overflow:hidden}}.modal{z-index:100000033}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "pipe", type: i4.KeyValuePipe, name: "keyvalue" }, { 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: 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$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: 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: "ngmodule", type: NgxImageZoomModule }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i7$3.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i16.SpeedDial, selector: "p-speedDial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: PanelModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }] }); }
17825
17820
  }
17826
17821
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductDescComponent, decorators: [{
@@ -17854,7 +17849,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
17854
17849
  }], ctorParameters: () => [{ type: Object, decorators: [{
17855
17850
  type: Inject,
17856
17851
  args: [PLATFORM_ID]
17857
- }] }, { type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: RestService }, { type: CartService }, { type: StorageServiceService }, { type: i6$1.MessageService }, { type: i1$1.Meta }, { type: i1$1.Title }, { type: i8$3.MatBottomSheet }, { type: i0.Renderer2 }, { type: i3.MatDialog }], propDecorators: { reviewComponent: [{
17852
+ }] }, { type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: RestService }, { type: CartService }, { type: StorageServiceService }, { type: i6$1.MessageService }, { type: i1$2.Meta }, { type: i1$2.Title }, { type: i8$3.MatBottomSheet }, { type: i0.Renderer2 }, { type: i1$1.MatDialog }], propDecorators: { reviewComponent: [{
17858
17853
  type: ViewChild,
17859
17854
  args: [CustomerReviewComponent, { static: false }]
17860
17855
  }], d2: [{
@@ -18788,7 +18783,7 @@ class ProductListComponent extends BaseSection {
18788
18783
  const brightness = (r * 299 + g * 587 + b * 114) / 1000;
18789
18784
  return brightness > threshold ? '#000000' : '#ffffff';
18790
18785
  }
18791
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductListComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: StorageServiceService }, { token: i8$3.MatBottomSheet }, { token: i3.MatDialog }, { token: CartService }, { token: i6$1.MessageService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
18786
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductListComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: StorageServiceService }, { token: i8$3.MatBottomSheet }, { token: i1$1.MatDialog }, { token: CartService }, { token: i6$1.MessageService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
18792
18787
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductListComponent, isStandalone: true, selector: "simpo-product-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize($event)", "window:scroll": "onWindowScroll($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "listScrollContainer", first: true, predicate: ["listScrollContainer"], descendants: true }, { propertyName: "filterScroll", first: true, predicate: ["filterScroll"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<!-- <div class=\"input-group\" *ngIf=\"isMobile\" [ngClass]=\"{'input-group-sticky': scrollingValue > 20}\">\r\n <mat-icon class=\"f-20 d-flex align-item-center justify-content-center\">search</mat-icon>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\r\n</div> -->\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n <section [id]=\"data?.id\" class=\"container-fluid total-container\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\"\r\n [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\" [attr.style]=\"customClass\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n\r\n <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n <p-speedDial [model]=\"items\" direction=\"up\"\r\n [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\"></p-speedDial>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\r\n <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\"\r\n style=\"width: 20%; padding:1rem 0rem;border-bottom: 1px solid #D8D8D8;\">\r\n <div class=\"filter body-large\">\r\n Filters\r\n </div>\r\n <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\r\n CLEAR ALL\r\n </div>\r\n </div>\r\n <div itemid=\"top-section\" class=\"d-flex align-items-center justify-content-between\"\r\n style=\"width: 77.5%; margin-right: 1%;\">\r\n <div class=\"d-flex gap-15\" style=\"width: 75%; display:flex; flex-wrap:wrap\">\r\n <ng-container *ngFor=\"let filter of filteredChips\">\r\n <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\r\n <span>{{filter.name}}</span>\r\n <span style=\"cursor: pointer; width:20px; height: 20px;\">\r\n <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\r\n </span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <!-- <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\r\n <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\r\n <select [(ngModel)]=\"sortBy\" (change)=\"applyFilter($event, 'SORT')\" style=\"color: black;\">\r\n <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{ filter.name }}</option>\r\n </select>\r\n </div> -->\r\n <div class=\"custom-sort-dropdown\" tabindex=\"0\" (blur)=\"closeDropdown()\" (click)=\"toggleDropdown()\">\r\n <span class=\"sort-label\">Sort By:</span>\r\n <span class=\"selected-value\">{{ getSelectedName() || 'Featured' }}</span>\r\n <span class=\"toggle-icon\" [class.open]=\"isOpen\">&#9662;</span> <!-- Down arrow, rotates open -->\r\n\r\n <div class=\"options\" *ngIf=\"isOpen\">\r\n <div *ngFor=\"let filter of filteringArray\" class=\"option\" [class.selected]=\"filter.value === sortBy\"\r\n (click)=\"selectOption(filter, $event)\">\r\n {{ filter.name }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"isMobile\" class=\"d-flex w-100 onlyMobile gap-15 flex-wrap\">\r\n <ng-container *ngFor=\"let filter of filteredChips\">\r\n <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\r\n <span>{{filter.name}}</span>\r\n <span style=\"cursor: pointer; width:20px; height: 20px;\">\r\n <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\r\n </span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"main-product-section\">\r\n <div class=\"filter-side\">\r\n <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\r\n </div>\r\n <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n <ng-container *ngIf=\"!apiLoading\">\r\n <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\"\r\n (scroll)=\"handleProductListScroll()\" #listScrollContainer>\r\n <div *ngFor=\"let product of responseData; let i = index\" class=\"product\"\r\n [ngClass]=\"{'hover-effect': styles?.theme == theme.Theme1}\"\r\n [style.width]=\"applyProductWidth() ? getProductWidth() : ''\" style=\"cursor:pointer; position: relative;\">\r\n <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n <ng-container *ngTemplateOutlet=\"ProductDesc; context: {data: product, index: i}\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"styles?.theme != theme.Theme1\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"screenWidth > 475\"\r\n [index]=\"i\"></simpo-small-product-listing>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <simpo-card-skeleton-loader *ngIf=\"isListLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n <section class=\"empty-cart\" *ngIf=\"!isListLoading && responseData?.length == 0\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" style=\"height: 150px; width: 150px;\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <div class=\"heading-medium d-flex justify-content-center\">\r\n Product list is empty\r\n </div>\r\n <div class=\"description d-flex justify-content-center mt-4\">\r\n Looks like no item is present with filter. Go ahead & explore top categories.\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-container>\r\n <simpo-card-skeleton-loader *ngIf=\"apiLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n </div>\r\n\r\n <div class=\"bottom-filter\">\r\n <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\r\n <mat-icon>sort</mat-icon>\r\n <span>Sort by</span>\r\n </div>\r\n <div class=\"divider\"></div>\r\n <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\r\n <mat-icon>filter_list</mat-icon>\r\n <span>Filter</span>\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\"\r\n [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</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\"\r\n [theme]=\"{ width: '100%', height: '40vh', 'border-radius': '10px', 'position': 'relative', 'right': '5px' }\"></ngx-skeleton-loader>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n <div class=\"fav-icon-wrapper\">\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border\r\n </mat-icon>\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite\r\n </mat-icon>\r\n <span class=\"fav-tooltip\">\r\n {{ product.whislist ? 'Remove from wishlist' : 'Add to wishlist' }}\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n\r\n<ng-template #Tags let-product=\"data\">\r\n <div class=\"tag-icon\" *ngIf=\"product.tags\">{{product.tags}}</div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #FilterSection>\r\n <section>\r\n <div class=\"categories-section\" *ngIf=\"categories?.length\">\r\n <div class=\"categories heading-small\">\r\n <h6><b>Shop by categories</b></h6>\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let category of displayedCategories\"\r\n (click)=\"applyFilter(category, 'FILTER')\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"category.status\" />\r\n <div class=\"trim-text\">{{category.option | titlecase}}</div>\r\n </div>\r\n <div *ngIf=\"categories.length > 4\" class=\"toggle-categories\" (click)=\"toggleCategories()\"\r\n [style.color]=\"styles?.background?.accentColor\">\r\n <span class=\"toggle-text\">\r\n {{ showAllCategories ? 'Show Less' : 'Show More' }}\r\n <span class=\"dropdown-icon\">\r\n <ng-container *ngIf=\"!showAllCategories\">\r\n <mat-icon>expand_more</mat-icon>\r\n </ng-container>\r\n <ng-container *ngIf=\"showAllCategories\">\r\n <mat-icon>expand_less</mat-icon>\r\n </ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"categories-section\" *ngIf=\"collections?.length\">\r\n <div class=\"categories heading-small\">\r\n <h6><b>Shop by collections</b></h6>\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let collection of displayedCollections\"\r\n (click)=\"applyFilter(collection, 'FILTER')\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"collection.status\" />\r\n <div class=\"trim-text\">{{collection.option | titlecase}}</div>\r\n </div>\r\n <div *ngIf=\"collections.length > 4\" class=\"toggle-categories\" (click)=\"toggleCollections()\"\r\n [style.color]=\"styles?.background?.accentColor\">\r\n <span class=\"toggle-text\">\r\n {{ showAllCollections ? 'Show Less' : 'Show More' }}\r\n <span class=\"dropdown-icon\">\r\n <ng-container *ngIf=\"!showAllCollections\"><mat-icon>expand_more</mat-icon></ng-container>\r\n <ng-container *ngIf=\"showAllCollections\"><mat-icon>expand_less</mat-icon></ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"categories-section\">\r\n <div class=\"categories heading-small\">\r\n <h6><b>Shop by price</b></h6>\r\n </div>\r\n <label class=\"category-options\" *ngFor=\"let range of priceRanges\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [(ngModel)]=\"range.selected\" (change)=\"onPriceRangeChange()\" />\r\n <div class=\"trim-text\">{{ range.label }}</div>\r\n </label>\r\n </div>\r\n\r\n\r\n <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"categories heading-small\">\r\n <h6><b>Product Type</b></h6>\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let size of productTypesData\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"size.status\" (change)=\"toggleProductSize(size)\" />\r\n <div class=\"trim-text\">{{ size.size }}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"categories heading-small\">\r\n <h6><b>Shop for</b></h6>\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let size of shopForData\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"size.status\" (change)=\"toggleShopSize(size)\" />\r\n <div class=\"trim-text\">{{ size.size }}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"categories heading-small\">\r\n <h6><b>Material</b></h6>\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let size of materialSizeData\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"size.status\" (change)=\"toggleMaterialSize(size)\" />\r\n <div class=\"trim-text\">{{ size.size }}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"categories heading-small\">\r\n <h6><b>Metal</b></h6>\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let size of metalSizeData\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"size.status\" (change)=\"toggleMetalSize(size)\" />\r\n <div class=\"trim-text\">{{ size.size }}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"categories heading-small\">\r\n <h6><b>Ring Style</b></h6>\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let size of ringSizes\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"size.status\" (change)=\"toggleSize(size)\" />\r\n <div class=\"trim-text\">{{ size.size }}</div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #SortingSection>\r\n <section style=\"padding: 10px\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\r\n <span>Sort by</span>\r\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n </div>\r\n <mat-radio-group class=\"d-flex flex-column\">\r\n <mat-radio-button *ngFor=\"let sortingType of filteringArray\"\r\n (click)=\"applyFilter($event, 'SORT')\">{{sortingType.name}}</mat-radio-button>\r\n </mat-radio-group>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc let-product=\"data\" let-index=\"index\">\r\n <div class=\"product-card position-relative\">\r\n <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\"\r\n class=\"default-image position-relative\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\r\n (click)=\"proceedToProductDesc(product.itemId)\" [simpoBackground]=\"styles?.background\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\r\n </div>\r\n\r\n <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\" class=\"default-image position-relative\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"getProductImages(product)\" alt=\"\" class=\"product-img\" [class.fade-out]=\"imageIndex == index\"\r\n (click)=\"proceedToProductDesc(product.itemId)\" [simpoBackground]=\"styles?.background\">\r\n <div class=\"carousel-buttons\" *ngIf=\"product.itemImages?.length > 1\">\r\n <div><mat-icon (click)=\"changeImage(product, 'PREV', index)\">keyboard_arrow_left</mat-icon></div>\r\n <div><mat-icon (click)=\"changeImage(product, 'NEXT', index)\">keyboard_arrow_right</mat-icon></div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\r\n </div>\r\n\r\n <div class=\"mt-2 w-100\">\r\n <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\r\n <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\"\r\n [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\r\n [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\r\n (click)=\"selectVarient(product, varient)\">\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex align-item-center justify-content-between\" [style.display]=\"true ? 'block!important' : ''\">\r\n <div class=\"price body-large text-left d-flex align-items-center g-10\">\r\n <div class=\"fs-16\">\r\n <span [innerHTML]='currency'></span>\r\n {{product?.price?.sellingPrice | number:'1.2-2'}}\r\n </div>\r\n\r\n <div class=\"fs-16\">\r\n <span *ngIf=\"product?.price?.value - product?.price?.discountedPrice > 2\" class=\"discount-price\">\r\n {{product?.price?.value | number:'1.2-2'}}\r\n </span>\r\n </div>\r\n <!-- <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice < product?.price?.sellingPrice\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.sellingPrice | number:'1.2-2'}}\r\n </div> -->\r\n </div>\r\n\r\n <div class=\"product-name heading-large w-100 text-left trim-text\"\r\n [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n\r\n <div\r\n *ngIf=\"content?.display?.showButton && !ecomConfigs?.appointmentBookingEnabled && product.itemInventory?.openingStock > 0\"\r\n class=\"add-to-cart-btn\">\r\n <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n [id]=\"data?.id+getButtonId(1)\" *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\r\n <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\r\n <div class=\"quantity full-width-quantity\" [style.borderColor]=\"getButtonStyle(1)?.background\"\r\n [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\r\n [style.color]=\"getButtonStyle(1)?.textColor\"\r\n (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\r\n [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n </div>\r\n </div>\r\n <div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n <div class=\"try-button-section\"\r\n *ngIf=\"content?.display?.showButton && ecomConfigs?.appointmentBookingEnabled && product?.itemInventory?.openingStock > 0\">\r\n <div class=\"try-at-home\">\r\n <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\r\n HOME</button>\r\n </div>\r\n <div class=\"video-call-image\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\" alt=\"video\"\r\n (click)=\"openDialogBox(dialogBox, product.name)\" />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n\r\n<ng-template #dialogBox>\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header d-flex align-item-center\">\r\n <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n <div class=\"schedule-header d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon (click)=\"matCloseDialog()\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"modal-body h-100\">\r\n <div class=\"row h-100 w-100 video-call-container\">\r\n <div class=\"col-6 h-100\" *ngIf=\"!isMobile\">\r\n <img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/557699c1753779503913freepik-overhead-shot-a-person-holding-a-smartphone-with-a-1029_vmg8GqHj (online-video-cutter.com).gif\"\r\n alt=\"\" class=\"w-100 h-100\" style=\"object-fit: cover;\">\r\n </div>\r\n <div class=\"col-6 position-relative h-100 call-details\">\r\n <!-- Name Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\r\n <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\r\n (input)=\"onInputChange('username')\">\r\n </div>\r\n\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n (input)=\"onInputChange('email')\">\r\n </div>\r\n\r\n <!-- Mobile Number Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\r\n <div class=\"sub-text-call\">IN +91</div>\r\n <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\r\n (input)=\"onInputChange('mobileNumber')\">\r\n </div>\r\n\r\n\r\n <!-- Pincode Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\r\n <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\r\n <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n </div>\r\n <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\r\n (input)=\"onInputChange('pincode')\">\r\n </div>\r\n <div class=\"language my-3\">\r\n <div class=\"mini-text mb-2\">Language Preference</div>\r\n <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\r\n <ng-container *ngFor=\"let lang of languages\">\r\n <div class=\"lang px-2 py-1 rounded cursor-pointer\"\r\n [style.background]=\"lang == selectedLang ? data?.styles?.background?.accentColor : ''\"\r\n (click)=\"selectedLang = lang\"\r\n [style.color]=\"lang == selectedLang ? getTextColor(data?.styles?.background?.accentColor) : '#000000'\">\r\n {{lang}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"selectedLang == 'Others'\">\r\n <div class=\"input-field my-3\">\r\n <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\r\n </div>\r\n </ng-container>\r\n <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\" (click)=\"scheduleVideoCall()\"\r\n [disabled]=\"isSubmitting\">\r\n <ng-container *ngIf=\"isSubmitting\">\r\n <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\r\n <span class=\"visually-hidden\">Loading...</span>\r\n </div>\r\n SCHEDULING...\r\n </ng-container>\r\n <ng-container *ngIf=\"!isSubmitting && !scheduled\">\r\n <mat-icon>video_call</mat-icon>&nbsp;\r\n SCHEDULE A VIDEO CALL\r\n </ng-container>\r\n <ng-container *ngIf=\"scheduled\">\r\n <mat-icon>check_circle</mat-icon>&nbsp;\r\n SCHEDULED SUCCESSFULLY\r\n </ng-container>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}input[type=checkbox]{accent-color:var(--color)}.total-container{position:relative}.discount-price{color:#d3d3d3;text-decoration:line-through}.custom-sort-dropdown{display:inline-flex;justify-content:flex-end;flex-grow:1;align-items:center;gap:6px;padding:6px 12px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-weight:600;color:#000;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:6px;position:relative;background-color:#fff;width:fit-content;min-width:150px;max-width:200px;outline:none;border:none}.sort-label{color:#555;white-space:nowrap}.selected-value{flex-shrink:0;white-space:nowrap;color:#000}.toggle-icon{font-size:20px;transition:transform .3s ease;-webkit-user-select:none;user-select:none}.toggle-icon.open{transform:rotate(180deg)}.options{position:absolute;top:100%;left:0;right:0;margin-top:4px;background-color:#fff;border:none;border-radius:0 0 6px 6px;box-shadow:0 4px 6px #0000001a;max-height:180px;overflow-y:auto;z-index:100;font-weight:400;text-align:left!important}.option{padding:8px 12px;cursor:pointer;white-space:nowrap;transition:background-color .2s ease}.option:hover{background-color:#fff;color:#000}.option.selected{background-color:#fff;color:#000;font-weight:600}.video-call-container{align-items:center}@media screen and (min-width: 1024px){.add-to-cart-btn{display:none}.add-to-cart-btn button{height:35px;font-size:16px!important}.product-card .add-to-cart-btn,.product-card{display:none}.product-card:hover .add-to-cart-btn,.product-card:hover{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important;box-shadow:0 16px 32px #b6b2b233}.product-card .try-button-section{display:none}.product-card:hover .try-button-section{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important;box-shadow:0 16px 32px #b6b2b233}.product-card .fav-icon{display:none}.product-card:hover .fav-icon{display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100!important}}::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:#fff!important}.fav-icon{position:absolute;z-index:100;padding:5px;right:10px;top:10px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.f-20{font-size:20px}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.fav-tooltip{visibility:hidden;opacity:0;background:#222;color:#fff;font-size:10px;padding:4px 10px;border-radius:5px;position:absolute;top:40px;right:30px;white-space:nowrap;z-index:200;transition:opacity .2s;pointer-events:none;box-shadow:0 2px 8px #00000026}.fav-icon-wrapper:hover .fav-tooltip{visibility:visible;opacity:1}.discounted-price{margin-top:-3px;font-size:14px!important}.filter-side{width:20%;position:sticky;top:0;overflow-y:auto;height:100%}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.price-ranges{display:flex;flex-direction:column;gap:8px;padding-left:8px;max-width:250px}.send-btn:hover{transform:translateY(-1px);box-shadow:0 4px 8px #8b5cf64d}.price-range-item{font-size:14px;color:#333;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:8px}.price-range-item input[type=checkbox]{width:16px;height:16px}.categories-section{padding:.8rem 0rem;border-bottom:1px solid #D8D8D8}.categories-section:last-child{padding:.8rem 0rem;border-bottom:none}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.toggle-categories{margin-top:8px;cursor:pointer;font-weight:500;display:inline-flex;align-items:center;-webkit-user-select:none;user-select:none;width:100%}.empty-cart{display:flex;align-items:center;justify-content:center;text-align:center;height:75vh}.toggle-text .dropdown-icon{margin-left:6px;font-size:1em;margin-top:5px}.toggle-text{display:flex;align-items:center}.categories{display:flex;padding:1rem 0rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 0rem;gap:11px;font-weight:400!important}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem 1.5rem}.button-section button{position:relative;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px;white-space:nowrap;overflow:hidden}.chip{padding:5px 15px;border-radius:20px;gap:5px;width:max-content;margin:3px 0;transition:.3s opacity ease;border:1px solid}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;flex-direction:column-reverse}.price-range{color:#93959e;font-size:15px;white-space:nowrap}.right-side{width:80%;padding-bottom:50px;height:100vh;overflow-y:auto;flex:1 1 0;min-width:0}.bottom-filter{display:none}.onlyMobile{display:none!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray;cursor:pointer}.varient-list .selected-varient{border:1px solid transparent}:is() .speeddial-linear .p-speeddial-direction-up{position:relative;bottom:0%;right:0}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.input-group-sticky{width:100%;height:57px}.input-group{position:sticky;top:0;width:95%;z-index:100;padding:5px;outline:none;border:none;border-radius:5px;height:7vh;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:15px auto}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.back-to-home{background-color:#9b9a9a1c;padding:5px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:fixed;right:3px;top:50%;cursor:pointer}.back-to-home .mat-icon{font-size:16px;height:16px;width:16px}.try-button-section{display:flex;justify-content:space-between;align-items:center}.try-button-section .try-at-home{width:78%}.try-button-section .try-at-home button{border:1px solid #DE57E5;border-radius:5px;font-size:14px!important;padding:5px 0!important}.try-button-section .video-call-image{width:20%;height:32px}.try-button-section .video-call-image img{width:100%;height:100%}.box-shadow{box-shadow:#0000003d 0 3px 4px;border-radius:10px!important}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mtb-5{margin-top:5px;margin-bottom:5px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.gap-15{gap:15px}.flex-wrap{flex-wrap:wrap}.carousel-buttons{display:flex;position:absolute;bottom:0;left:10px;gap:5px;transform:translateY(-50%);pointer-events:none}.carousel-buttons div{background:#fff;display:flex;align-items:center;border-radius:100%;justify-content:center;pointer-events:auto}.main-product-section{height:100vh;display:flex;position:relative}.filter-side{max-width:20%;width:100%;flex:0 0 20%}.modal-content{height:100%;border:none;border-radius:0!important}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9;border-radius:0!important}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.tag-icon{position:absolute!important;top:10px;left:10px;background:#e9bb18;text-transform:uppercase;padding:5px 10px;border:none;border-radius:8px;font-size:10px;color:#000}.product-parent{width:100%;display:flex;flex-wrap:wrap;padding:10px;z-index:1}.product-parent .product{height:auto;transform:none;z-index:1;border-radius:10px;background-color:#fff}.product-parent .product .product-card{height:100%;padding:10px;display:flex;flex-direction:column;justify-content:flex-start;transition:all .3s ease-in-out}.product-parent .product .product-name{color:#222;font-size:14px;line-height:26px;margin-bottom:10px;text-align:left!important;width:220px;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:all .3s ease-in-out}.product-parent .product .product-img{border-radius:10px;width:100%;height:180px;z-index:1;border:.5px solid #eee}.product-parent .product .default-image img{width:100%;height:180px;border-radius:10px}.product-parent .product:hover{height:auto!important;transform:scale(1.05);box-shadow:0 16px 32px #b6b2b299;z-index:100!important}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important;padding-top:0!important}.product-name{font-size:14px}.product-parent{gap:10px}.product{padding:10px!important;margin-top:0!important;height:auto!important;transform:none!important;width:48%!important;z-index:1!important;box-shadow:0 8px 16px #0003!important}.product .product-card{padding:0!important}.out-of-stock{font-size:12px!important}.discounted-price,.add-to-cart-btn button{font-size:14px!important}.call-details{width:100%}.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:flex!important;row-gap:0px}.onlyMobile mat-icon{pointer-events:auto!important;z-index:1000}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:100000001;width:100%;margin-left:-5px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:100%}.default-image img{width:100%;height:100%;box-shadow:#0000003d 0 3px 8px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important;height:95%!important;padding-bottom:0!important}.main-product-section{height:auto;display:flex;position:relative;padding-bottom:3rem}}.fs-16{font-size:16px!important}.mobile-filter-chip{display:flex;align-items:center;gap:15px;border:1px solid;border-radius:30px;padding:5px 15px;height:35px}.mobile-filter-chip mat-icon{font-size:20px;display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatSelectModule }, { 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.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: 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$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i16.SpeedDial, selector: "p-speedDial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i7$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i7$2.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: ToastModule }, { kind: "component", type: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: CardSkeletonLoaderComponent, selector: "simpo-card-skeleton-loader", inputs: ["count", "showTitles"] }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable", "isCategoryProductList", "customClass", "index"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
18793
18788
  }
18794
18789
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductListComponent, decorators: [{
@@ -18820,7 +18815,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
18820
18815
  }], ctorParameters: () => [{ type: Object, decorators: [{
18821
18816
  type: Inject,
18822
18817
  args: [PLATFORM_ID]
18823
- }] }, { type: EventsService }, { type: RestService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: StorageServiceService }, { type: i8$3.MatBottomSheet }, { type: i3.MatDialog }, { type: CartService }, { type: i6$1.MessageService }, { type: i0.Renderer2 }], propDecorators: { responseData: [{
18818
+ }] }, { type: EventsService }, { type: RestService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: StorageServiceService }, { type: i8$3.MatBottomSheet }, { type: i1$1.MatDialog }, { type: CartService }, { type: i6$1.MessageService }, { type: i0.Renderer2 }], propDecorators: { responseData: [{
18824
18819
  type: Input
18825
18820
  }], data: [{
18826
18821
  type: Input
@@ -19384,7 +19379,7 @@ class UserBasicInfoComponent {
19384
19379
  get isEmailValid() {
19385
19380
  return this.email?.includes("@") && this.email.includes(".com") || (this.email?.length == 0);
19386
19381
  }
19387
- 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: i3.MatDialogRef }, { token: StorageServiceService }, { token: i6$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
19382
+ 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$1.MatDialogRef }, { token: StorageServiceService }, { token: i6$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
19388
19383
  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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.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: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
19389
19384
  }
19390
19385
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserBasicInfoComponent, decorators: [{
@@ -19395,7 +19390,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
19395
19390
  FormsModule,
19396
19391
  ToastModule
19397
19392
  ], 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"] }]
19398
- }], ctorParameters: () => [{ type: RestService }, { type: i2$2.Router }, { type: i3.MatDialogRef }, { type: StorageServiceService }, { type: i6$1.MessageService }] });
19393
+ }], ctorParameters: () => [{ type: RestService }, { type: i2$2.Router }, { type: i1$1.MatDialogRef }, { type: StorageServiceService }, { type: i6$1.MessageService }] });
19399
19394
 
19400
19395
  class SchemeDetailsComponent {
19401
19396
  constructor(storageService, restService, matDialog, _eventService, router, messageService) {
@@ -19601,13 +19596,13 @@ class SchemeDetailsComponent {
19601
19596
  get isMobile() {
19602
19597
  return window.innerWidth <= 475;
19603
19598
  }
19604
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeDetailsComponent, deps: [{ token: StorageServiceService }, { token: RestService }, { token: i3.MatDialog }, { token: EventsService }, { token: i2$2.Router }, { token: i6$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
19599
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeDetailsComponent, deps: [{ token: StorageServiceService }, { token: RestService }, { token: i1$1.MatDialog }, { token: EventsService }, { token: i2$2.Router }, { token: i6$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
19605
19600
  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: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.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: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
19606
19601
  }
19607
19602
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeDetailsComponent, decorators: [{
19608
19603
  type: Component,
19609
19604
  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"] }]
19610
- }], ctorParameters: () => [{ type: StorageServiceService }, { type: RestService }, { type: i3.MatDialog }, { type: EventsService }, { type: i2$2.Router }, { type: i6$1.MessageService }], propDecorators: { schemeDetails: [{
19605
+ }], ctorParameters: () => [{ type: StorageServiceService }, { type: RestService }, { type: i1$1.MatDialog }, { type: EventsService }, { type: i2$2.Router }, { type: i6$1.MessageService }], propDecorators: { schemeDetails: [{
19611
19606
  type: Input,
19612
19607
  args: ["schemeDetails"]
19613
19608
  }], data: [{
@@ -20285,7 +20280,7 @@ class UserProfileComponent extends BaseSection {
20285
20280
  this.totalAccumulatedGold = 0;
20286
20281
  this.getAllSchemes();
20287
20282
  }
20288
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserProfileComponent, deps: [{ token: i2$2.Router }, { token: EventsService }, { token: RestService }, { token: StorageServiceService }, { token: CartService }, { token: i3.MatDialog }, { token: i8$3.MatBottomSheet }, { token: i2$3.CookieService }, { token: i6$1.MessageService }, { token: i2$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
20283
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserProfileComponent, deps: [{ token: i2$2.Router }, { token: EventsService }, { token: RestService }, { token: StorageServiceService }, { token: CartService }, { token: i1$1.MatDialog }, { token: i8$3.MatBottomSheet }, { token: i2$3.CookieService }, { token: i6$1.MessageService }, { token: i2$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
20289
20284
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [spacingHorizontal]=\"styles?.layout\" [ngStyle]=\"{'max-height': '100vh', 'z-index': isMobile ? '100000000' : ''}\"\r\n [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"p-4 profile-box shadow-lg\"\r\n style=\"width: 25%; border-radius: 20px; height: fit-content; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 1px solid rgba(0,0,0,0.05);\"\r\n [style.order]=\"styles?.swap ? '1' : '0'\">\r\n\r\n <!-- Profile Header Section -->\r\n <div class=\"d-flex align-items-center profile-header\"\r\n style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\r\n <div class=\"profile-image-wrapper\" style=\"position: relative;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\r\n style=\"border: 3px solid #e3f2fd; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: all 0.3s ease;\">\r\n <div class=\"online-indicator\"\r\n style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"profile-details flex-grow-1\">\r\n <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\r\n {{getUserDetails?.contact?.name}}</h4>\r\n\r\n <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\r\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n *ngIf=\"getUserDetails?.contact?.mobile?.length\"\r\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\r\n <span>{{getUserDetails?.contact?.mobile}}</span>\r\n </h6>\r\n\r\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n *ngIf=\"getUserDetails?.contact?.email?.length\"\r\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\r\n <span class=\"w-100 text-overflow\">{{getUserDetails?.contact?.email}}</span>\r\n </h6>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Navigation Tabs Section -->\r\n <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center tab-item\"\r\n style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\r\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\r\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\r\n [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\r\n [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\r\n <div class=\"tab-icon-wrapper\"\r\n style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\r\n </div>\r\n\r\n <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\r\n {{tab.value}}</div>\r\n\r\n <!-- Hover effect background -->\r\n <div class=\"tab-hover-bg\"\r\n style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- Action Buttons Section -->\r\n <div class=\"d-flex action-buttons\"\r\n style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\r\n <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\r\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\r\n Edit Profile\r\n </button>\r\n\r\n <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\r\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.15);\">\r\n Logout\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"orders-sec shadow-lg\" [style.order]=\"styles?.swap ? '0' : '1'\">\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Details'\">\r\n <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Transactions'\">\r\n <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n <simpo-list-home-appointment></simpo-list-home-appointment>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <div class=\"w-100 position-relative mobile-height\" style=\"height: 80vh;\">\r\n <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\"\r\n *ngIf=\"selectedSidePanelTab != 'Scheme_Details'\">\r\n <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\"\r\n (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n </div>\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"''\">\r\n <section class=\"top-sec\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\r\n style=\"width: 50px; height: 50px;\">\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\">\r\n <mat-icon>stay_primary_portrait</mat-icon>\r\n <span>{{getUserDetails?.contact?.mobile}}</span>\r\n </h6>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\"\r\n *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\r\n <span>{{getUserDetails?.contact?.email}}</span>\r\n </h6>\r\n </div>\r\n </section>\r\n <section class=\"list-sec\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\"\r\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\r\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n [style.color]=\"styles?.background?.accentColor\">\r\n <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\r\n {{tab.value}}</div>\r\n </div>\r\n\r\n </ng-container>\r\n </section>\r\n <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\r\n <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Transactions'\">\r\n <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n <simpo-list-home-appointment></simpo-list-home-appointment>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [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\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\r\n <!-- <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n <ng-container *ngFor=\"let tab of tabs\">\r\n <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">\r\n {{tab.value}}</div>\r\n </ng-container>\r\n </div> -->\r\n <div class=\"order-list\">\r\n <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n </div>\r\n </ng-container>\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\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\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 [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n <simpo-text-editor [(value)]=\"text.value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"\r\n (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n <div class=\"d-flex justify-content-between mb-2\">\r\n <h3 class=\"title-text\">My Address</h3>\r\n <button class=\"address-btn\" (click)=\"addNewAddress()\"\r\n [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div class=\"address-list\">\r\n <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n <div class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\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-2\">\r\n <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\r\n <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\r\n <div class=\"icon-grp d-flex\">\r\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n (click)=\"editAddress(idx)\">edit</mat-icon>\r\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"address-content mb-3\">\r\n <div class=\"address-line mb-2\">\r\n <span class=\"text-muted small d-block\">Address</span>\r\n <span class=\"address-text\">{{address.addressLine1}}</span>\r\n </div>\r\n <div class=\"phone-info\">\r\n <span class=\"text-muted small d-block\">Phone</span>\r\n <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-template #showEmptyAddress>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\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\">No address added</div>\r\n <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery\r\n </div>\r\n <!-- </ng-container> -->\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n <h3 class=\"onlyDesktop\">My Accounts</h3>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n <h3 class=\"onlyDesktop\">Logout</h3>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n <div (click)=\"goToOrderDetails(order)\" class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\">\r\n <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\r\n <!-- Header Section -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n <div class=\"order-number\">\r\n <h4 class=\"mb-0 fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</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 <div class=\"ordered-item row mb-2\">\r\n <ng-container *ngFor=\"let item of getOrderedItems(order)\">\r\n <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"item-img w-50\">\r\n <div class=\"cart-item-name\">{{item?.itemName}}</div>\r\n </div>\r\n </ng-container>\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-1\">\r\n <span class=\"text-muted small mb-3 mb-sm-0\">\r\n {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\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 {{(order.billDetails.discountAmount ?\r\n (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\r\n order?.billDetails?.totalTaxAfterDiscount) :\r\n order.billDetails.totalGrossValue) | number:'1.0-2'}}\r\n </span>\r\n </div>\r\n <div class=\"status-section\">\r\n <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\r\n {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\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 #WishlistDetails>\r\n <h3 class=\"onlyDesktop\">My Wishlist</h3>\r\n <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\r\n <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\r\n <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n <div class=\"address-card mb-2\">\r\n <div class=\"card-body p-4\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-auto\">\r\n <div class=\"product-image-wrapper\">\r\n <img loading=\"lazy\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\r\n </div>\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"product-details\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div\r\n class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\r\n <h6 class=\"product-name mb-2 fw-semibold text-dark\">\r\n {{item.itemName}}\r\n </h6>\r\n <div class=\"delete-action\" *ngIf=\"!isMobile\">\r\n <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\r\n title=\"Remove from wishlist\">\r\n <mat-icon class=\"small-icon\">delete</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\r\n <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\r\n <mat-icon class=\"small-icon me-1\">delete</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"product-price mb-3\">\r\n <span class=\"h5 text-success fw-bold mb-0\">\r\n <span [innerHTML]='currency'></span>{{item.discountedPrice}}\r\n </span>\r\n <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\r\n ({{item.quantity}} items)\r\n </span>\r\n </div>\r\n <div class=\"action-buttons d-flex gap-2\">\r\n <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\r\n *ngIf=\"item.quantity\">\r\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n (click)=\"addToFav(item, 'SUBSTRACT')\">\r\n -\r\n </button>\r\n <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\r\n {{item.quantity}}\r\n </span>\r\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n (click)=\"addToFav(item, 'ADD')\"> +\r\n </button>\r\n </div>\r\n <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\r\n (click)=\"addToFav(item, 'ADD')\">\r\n + Add Quantity\r\n </button>\r\n <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\r\n Move to Cart\r\n </button>\r\n </div>\r\n </div>\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 <ng-template #showEmptyWishlistScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container>\r\n <div class=\"heading-medium d-flex justify-content-center\">\r\n Your Wishlist is Empty</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #SchemeDetails>\r\n <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\r\n <div class=\"row gap-2\">\r\n <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\r\n <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\r\n <div class=\"card-header row gap-2\">\r\n <div class=\"card-head-left col-7\">\r\n <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\r\n <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\r\n </div>\r\n <div class=\"card-head-right col-4 text-center align-content-center\">\r\n <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\r\n </div>\r\n </div>\r\n <div class=\"card-body d-flex p-0 mb-3\">\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\r\n class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">\u20B913,800</div>\r\n <div class=\"card-sub-text text-center\">Total Acheived</div>\r\n </div>\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\r\n alt=\"\" class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">\u20B91,000</div>\r\n <div class=\"card-sub-text text-center\">Rewards</div>\r\n </div>\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\r\n alt=\"\" class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">8</div>\r\n <div class=\"card-sub-text text-center\">Due Months</div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer row\">\r\n <div class=\"col-6 d-flex gap-2 p-0\">\r\n <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\r\n may 2025</span>\r\n </div>\r\n <div class=\"col-6 d-flex gap-2 p-0\">\r\n <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\r\n may 2026</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n<ng-template #SchemePassbook>\r\n <div class=\"w-100 h-100 overflow-scroll passbook_container\">\r\n <div class=\"header d-flex flex-column\">\r\n <div class=\"d-flex align-items-center justify-content-end mb-3\" *ngIf=\"storeListing.length >= 2\"><select\r\n class=\"store-listing\" (change)=\"changeStore($event)\">\r\n <option value=\"\">Select Store</option>\r\n <option [value]=\"store.id\" *ngFor=\"let store of storeListing\">{{store.storeName}}</option>\r\n </select></div>\r\n <div class=\"scheme-overview d-flex flex-column\">\r\n <div class=\"d-flex gap-2\">\r\n <div class=\"available-savings\">\r\n <div class=\"d-flex align-items-center gap-1 w-100 justify-content-between\">\r\n <h3>Available Savings</h3>\r\n <span class=\"amount_logo\">\uD83D\uDCB0</span>\r\n </div>\r\n\r\n <div class=\"amount\">{{totalSavings ? totalSavings :\r\n '0'}}</div>\r\n </div>\r\n <div class=\"active-schemes\">\r\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n <h3>Active Passbooks</h3>\r\n <div class=\"auto-pay-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\r\n </div>\r\n </div>\r\n <div class=\"scheme-count\">{{totalSchemes?.length ?\r\n totalSchemes.length : '0'}}</div>\r\n <div class=\"subtitle\">On Track</div>\r\n </div>\r\n <div class=\"active-schemes\" *ngIf=\"totalAccumulatedGold > 0\">\r\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n <h3>Accumulated Gold </h3>\r\n <div class=\"auto-pay-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/153448c1756808418216accumulated_icon.png\">\r\n </div>\r\n </div>\r\n <div class=\"scheme-count\">{{totalAccumulatedGold}} gms</div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"overAllDues?.length\">\r\n <div class=\"section d-flex-flex-column gap-2\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Due Payments</h2>\r\n </div>\r\n <div class=\"payment-list d-flex flex-column gap-2\">\r\n <ng-container *ngIf=\"overAllDues?.length; else showEmptyPayment\">\r\n <div class=\"payment-item overdue\" *ngFor=\"let payment of overAllDues\">\r\n <div class=\"payment-info\">\r\n <div class=\"payment-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\">\r\n <!-- <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\"\r\n *ngIf=\"!payment.overdueStatus && payment.paymentStatus === 'PAID'\"> -->\r\n </div>\r\n <div class=\"payment-details\">\r\n <h4>{{payment.schemeName}} - {{payment.emiMonthCount}}rd EMI</h4>\r\n <span>Date {{payment.dueDate ? (payment.dueDate | date:'dd-MM-yyyy') :\r\n 'N/A'}}\r\n <!-- <span *ngIf=\"payment.overdueStatus\">| Due by: {{payment.daysOverdue\r\n ? payment.daysOverdue : 0}}</span> --></span>\r\n </div>\r\n </div>\r\n <div class=\"payment-amount\">\r\n <div class=\"amount-value\">\u20B9{{payment.dueAmount ? payment.dueAmount :\r\n '0'}}\r\n </div>\r\n <div class=\"payment-status overdue-status cursor-pointer\"\r\n (click)=\"payDue(payment)\">\r\n <ng-container *ngIf=\"!payDueLoader\">Pay Now</ng-container>\r\n <ng-container *ngIf=\"payDueLoader\">Loading...</ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #showEmptyPayment>\r\n <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n <span>No Due Payments</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"section mt-3\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Your Active Passbooks</h2>\r\n </div>\r\n\r\n <div class=\"schemes-grid\">\r\n <ng-container *ngIf=\"totalSchemes && totalSchemes.length > 0; else showActiveScheme\">\r\n <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\"\r\n *ngFor=\"let scheme of totalSchemes; let i = index\" (click)=\"viewSchemeDetails(scheme)\">\r\n <div class=\"scheme-header\">\r\n <div>\r\n <div class=\"scheme-title\">{{ scheme?.schemeName || 'N/A' }}</div>\r\n <div class=\"scheme-amount\">\u20B9{{ scheme?.installmentAmount || '0' }}/Monthly</div>\r\n </div>\r\n <div class=\"scheme-date\">\r\n <span>Enrolled: {{ scheme?.createdTimestamp ? (scheme?.createdTimestamp |\r\n date:'dd-MM-yyyy') :\r\n 'N/A' }}</span>\r\n <!-- <span>Maturity: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n 'N/A' }}</span> -->\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-status d-flex justify-content-center align-items-center\"\r\n [ngClass]=\"scheme?.passBookStatus === 'REDEEM_REQUESTED' ? 'redeem_status' : (scheme?.passBookStatus === 'ACTIVE' ? 'active-status' : 'redeem_status')\">\r\n {{\r\n scheme.passBookStatus ? scheme.passBookStatus.replaceAll('_', ' ') : 'N/A'\r\n }}\r\n </div>\r\n\r\n <div class=\"scheme-stats\">\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">{{ scheme?.totalPaidAmount || '0' }}</div>\r\n <div class=\"stat-label\">Deposited Amount</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">\r\n {{\r\n scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n (scheme?.schemePayments?.length -\r\n scheme.dueMonths) : 'N/A'\r\n }}\r\n </div>\r\n <div class=\"stat-label\">Paid Months</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">{{scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n scheme?.dueMonths : 'N/A' }}</div>\r\n <div class=\"stat-label\">Due Months</div>\r\n </div>\r\n <div class=\"stat\" *ngIf=\"scheme?.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"stat-value\">{{ scheme?.totalInvestedMetal || '0' }} gms</div>\r\n <div class=\"stat-label\">Accumulated Gold</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-footer\">\r\n <span>Maturity Date: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n 'N/A' }}</span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #showActiveScheme>\r\n <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n <span>No Active Scheme</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n <!-- <div class=\"auto-pay\">\r\n <div class=\"auto-pay-icon mobile-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\r\n <div class=\"auto-pay-content\">\r\n <div class=\"auto-pay-title\">Manage Auto-pay</div>\r\n <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\r\n </div>\r\n <button class=\"manage-btn\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\r\n </div> -->\r\n </div>\r\n</ng-template>\r\n<ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #Scheme_Details>\r\n <simpo-scheme-details [schemeDetails]=\"schemeDetails\" [data]=\"data\" [metalPrice]=\"metalPrice\"\r\n (gotoSchemeOverview)=\"selectedSidePanelTab = 'Scheme Passbook'\"></simpo-scheme-details>\r\n</ng-template>\r\n<ng-template #Transactions>\r\n <simpo-passbook-transactions></simpo-passbook-transactions>\r\n</ng-template>\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", styles: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;margin-left:20px;padding:15px;overflow-y:auto;overflow-x:hidden;border:1px solid #d3d3d324;border-radius:20px;max-height:70vh}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.profile-box{box-shadow:#00000029 0 1px 4px}h1{font-weight:600}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.amount_logo{font-size:27px}@media screen and (max-width: 475px){.store-listing{width:35%!important}.total-container{height:100%!important}.amount_logo{font-size:27px}.amount,.scheme-count{font-size:20px!important}.title-text{font-size:24px}.schemes-grid{flex-wrap:wrap;overflow-y:scroll;height:95%}.section{height:auto}.scheme-status{white-space:nowrap}.scheme-card{width:100%}.header{flex-direction:column-reverse}.scheme-overview{width:100%!important}.scheme-overview div{flex-wrap:wrap}.available-savings h3{font-size:17px!important}.quick-actions{width:100%}.active-schemes h3{font-size:17px!important}.auto-pay-icon{width:55px!important;height:50px!important}.mobile-icon{width:30px!important}.manage-btn{width:25%!important}.tab-selected div{font-weight:600!important}.mobile-height{height:100%!important}.passbook_container{height:90%!important;overflow-x:scroll!important}.passbook_container .section{max-height:unset!important;padding:10px!important}.section-header{margin-bottom:2px!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px 0;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.list-sec .tab-selected{border-top-left-radius:10px!important;border-bottom-left-radius:10px}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:0 10px;width:100vw;margin-bottom:20px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}.text-overflow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width:1200px) and (max-width: 1330px){.profile-details{width:75%!important}}@media screen and (min-width:1200px){.manage-btn{width:10%!important}}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.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}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa);width:49%}.address-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.address-card{width:100%!important}.btn-sm{display:flex;justify-content:center;align-items:center;color:red!important}.btn-sm mat-icon{font-size:13px}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.profile-box:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001f!important}.profile-icon:hover{transform:scale(1.05);box-shadow:0 6px 20px #00000026!important}.contact-item:hover{color:#007bff!important}.tab-item:hover{background:linear-gradient(90deg,#007bff14,#007bff08)!important;transform:translate(4px)}.tab-item:hover .tab-hover-bg{opacity:1}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.edit-btn:hover{background:linear-gradient(135deg,#007bff0d,#007bff1a)!important;transform:translateY(-1px);box-shadow:0 4px 12px #007bff33}.logout-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px #00000040!important;filter:brightness(1.05)}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:100%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings .amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.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}.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}.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}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}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef;max-height:40vh;overflow-x:scroll}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.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}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff;white-space:nowrap}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:flex;gap:10px;overflow-x:scroll}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative;min-width:34vw}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount{font-size:12px;color:#666}.scheme-date{font-size:12px;color:#666;display:flex;flex-direction:column;gap:10px}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;min-width:15%;max-width:fit-content}.redeem_status{background:orange;color:#fff}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;display:flex;justify-content:space-evenly}.store-listing{font-size:14px;width:20%;height:30px;margin-bottom:13px;border:1px solid #e9ecef;border-radius:5px;outline:none;padding-left:5px;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { 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$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: OrderDetailsComponent, selector: "simpo-order-details", inputs: ["responseData", "data", "index", "edit", "delete", "customClass", "orderDetailData"], outputs: ["goBackEmitter"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "component", type: SchemeDetailsComponent, selector: "simpo-scheme-details", inputs: ["schemeDetails", "data", "metalPrice"], outputs: ["gotoSchemeOverview"] }, { kind: "component", type: ListHomeAppointmentComponent, selector: "simpo-list-home-appointment" }, { kind: "component", type: PassbookTransactionsComponent, selector: "simpo-passbook-transactions" }] }); }
20290
20285
  }
20291
20286
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserProfileComponent, decorators: [{
@@ -20314,7 +20309,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
20314
20309
  ListHomeAppointmentComponent,
20315
20310
  PassbookTransactionsComponent
20316
20311
  ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [spacingHorizontal]=\"styles?.layout\" [ngStyle]=\"{'max-height': '100vh', 'z-index': isMobile ? '100000000' : ''}\"\r\n [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"p-4 profile-box shadow-lg\"\r\n style=\"width: 25%; border-radius: 20px; height: fit-content; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 1px solid rgba(0,0,0,0.05);\"\r\n [style.order]=\"styles?.swap ? '1' : '0'\">\r\n\r\n <!-- Profile Header Section -->\r\n <div class=\"d-flex align-items-center profile-header\"\r\n style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\r\n <div class=\"profile-image-wrapper\" style=\"position: relative;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\r\n style=\"border: 3px solid #e3f2fd; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: all 0.3s ease;\">\r\n <div class=\"online-indicator\"\r\n style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"profile-details flex-grow-1\">\r\n <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\r\n {{getUserDetails?.contact?.name}}</h4>\r\n\r\n <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\r\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n *ngIf=\"getUserDetails?.contact?.mobile?.length\"\r\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\r\n <span>{{getUserDetails?.contact?.mobile}}</span>\r\n </h6>\r\n\r\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n *ngIf=\"getUserDetails?.contact?.email?.length\"\r\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\r\n <span class=\"w-100 text-overflow\">{{getUserDetails?.contact?.email}}</span>\r\n </h6>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Navigation Tabs Section -->\r\n <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center tab-item\"\r\n style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\r\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\r\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\r\n [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\r\n [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\r\n <div class=\"tab-icon-wrapper\"\r\n style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\r\n </div>\r\n\r\n <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\r\n {{tab.value}}</div>\r\n\r\n <!-- Hover effect background -->\r\n <div class=\"tab-hover-bg\"\r\n style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- Action Buttons Section -->\r\n <div class=\"d-flex action-buttons\"\r\n style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\r\n <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\r\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\r\n Edit Profile\r\n </button>\r\n\r\n <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\r\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.15);\">\r\n Logout\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"orders-sec shadow-lg\" [style.order]=\"styles?.swap ? '0' : '1'\">\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Details'\">\r\n <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Transactions'\">\r\n <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n <simpo-list-home-appointment></simpo-list-home-appointment>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <div class=\"w-100 position-relative mobile-height\" style=\"height: 80vh;\">\r\n <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\"\r\n *ngIf=\"selectedSidePanelTab != 'Scheme_Details'\">\r\n <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\"\r\n (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n </div>\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"''\">\r\n <section class=\"top-sec\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\r\n style=\"width: 50px; height: 50px;\">\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\">\r\n <mat-icon>stay_primary_portrait</mat-icon>\r\n <span>{{getUserDetails?.contact?.mobile}}</span>\r\n </h6>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\"\r\n *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\r\n <span>{{getUserDetails?.contact?.email}}</span>\r\n </h6>\r\n </div>\r\n </section>\r\n <section class=\"list-sec\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\"\r\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\r\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n [style.color]=\"styles?.background?.accentColor\">\r\n <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\r\n {{tab.value}}</div>\r\n </div>\r\n\r\n </ng-container>\r\n </section>\r\n <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\r\n <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Transactions'\">\r\n <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Try At Home'\">\r\n <simpo-list-home-appointment></simpo-list-home-appointment>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [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\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\r\n <!-- <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n <ng-container *ngFor=\"let tab of tabs\">\r\n <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">\r\n {{tab.value}}</div>\r\n </ng-container>\r\n </div> -->\r\n <div class=\"order-list\">\r\n <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n </div>\r\n </ng-container>\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\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\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 [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n <simpo-text-editor [(value)]=\"text.value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"\r\n (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n <div class=\"d-flex justify-content-between mb-2\">\r\n <h3 class=\"title-text\">My Address</h3>\r\n <button class=\"address-btn\" (click)=\"addNewAddress()\"\r\n [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div class=\"address-list\">\r\n <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n <div class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\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-2\">\r\n <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\r\n <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\r\n <div class=\"icon-grp d-flex\">\r\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n (click)=\"editAddress(idx)\">edit</mat-icon>\r\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"address-content mb-3\">\r\n <div class=\"address-line mb-2\">\r\n <span class=\"text-muted small d-block\">Address</span>\r\n <span class=\"address-text\">{{address.addressLine1}}</span>\r\n </div>\r\n <div class=\"phone-info\">\r\n <span class=\"text-muted small d-block\">Phone</span>\r\n <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-template #showEmptyAddress>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\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\">No address added</div>\r\n <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery\r\n </div>\r\n <!-- </ng-container> -->\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n <h3 class=\"onlyDesktop\">My Accounts</h3>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n <h3 class=\"onlyDesktop\">Logout</h3>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n <div (click)=\"goToOrderDetails(order)\" class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\">\r\n <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\r\n <!-- Header Section -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n <div class=\"order-number\">\r\n <h4 class=\"mb-0 fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</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 <div class=\"ordered-item row mb-2\">\r\n <ng-container *ngFor=\"let item of getOrderedItems(order)\">\r\n <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"item-img w-50\">\r\n <div class=\"cart-item-name\">{{item?.itemName}}</div>\r\n </div>\r\n </ng-container>\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-1\">\r\n <span class=\"text-muted small mb-3 mb-sm-0\">\r\n {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\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 {{(order.billDetails.discountAmount ?\r\n (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\r\n order?.billDetails?.totalTaxAfterDiscount) :\r\n order.billDetails.totalGrossValue) | number:'1.0-2'}}\r\n </span>\r\n </div>\r\n <div class=\"status-section\">\r\n <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\r\n {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\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 #WishlistDetails>\r\n <h3 class=\"onlyDesktop\">My Wishlist</h3>\r\n <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\r\n <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\r\n <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n <div class=\"address-card mb-2\">\r\n <div class=\"card-body p-4\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-auto\">\r\n <div class=\"product-image-wrapper\">\r\n <img loading=\"lazy\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\r\n </div>\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"product-details\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div\r\n class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\r\n <h6 class=\"product-name mb-2 fw-semibold text-dark\">\r\n {{item.itemName}}\r\n </h6>\r\n <div class=\"delete-action\" *ngIf=\"!isMobile\">\r\n <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\r\n title=\"Remove from wishlist\">\r\n <mat-icon class=\"small-icon\">delete</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\r\n <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\r\n <mat-icon class=\"small-icon me-1\">delete</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"product-price mb-3\">\r\n <span class=\"h5 text-success fw-bold mb-0\">\r\n <span [innerHTML]='currency'></span>{{item.discountedPrice}}\r\n </span>\r\n <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\r\n ({{item.quantity}} items)\r\n </span>\r\n </div>\r\n <div class=\"action-buttons d-flex gap-2\">\r\n <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\r\n *ngIf=\"item.quantity\">\r\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n (click)=\"addToFav(item, 'SUBSTRACT')\">\r\n -\r\n </button>\r\n <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\r\n {{item.quantity}}\r\n </span>\r\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n (click)=\"addToFav(item, 'ADD')\"> +\r\n </button>\r\n </div>\r\n <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\r\n (click)=\"addToFav(item, 'ADD')\">\r\n + Add Quantity\r\n </button>\r\n <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\r\n Move to Cart\r\n </button>\r\n </div>\r\n </div>\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 <ng-template #showEmptyWishlistScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container>\r\n <div class=\"heading-medium d-flex justify-content-center\">\r\n Your Wishlist is Empty</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #SchemeDetails>\r\n <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\r\n <div class=\"row gap-2\">\r\n <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\r\n <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\r\n <div class=\"card-header row gap-2\">\r\n <div class=\"card-head-left col-7\">\r\n <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\r\n <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\r\n </div>\r\n <div class=\"card-head-right col-4 text-center align-content-center\">\r\n <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\r\n </div>\r\n </div>\r\n <div class=\"card-body d-flex p-0 mb-3\">\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\r\n class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">\u20B913,800</div>\r\n <div class=\"card-sub-text text-center\">Total Acheived</div>\r\n </div>\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\r\n alt=\"\" class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">\u20B91,000</div>\r\n <div class=\"card-sub-text text-center\">Rewards</div>\r\n </div>\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\r\n alt=\"\" class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">8</div>\r\n <div class=\"card-sub-text text-center\">Due Months</div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer row\">\r\n <div class=\"col-6 d-flex gap-2 p-0\">\r\n <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\r\n may 2025</span>\r\n </div>\r\n <div class=\"col-6 d-flex gap-2 p-0\">\r\n <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\r\n may 2026</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n<ng-template #SchemePassbook>\r\n <div class=\"w-100 h-100 overflow-scroll passbook_container\">\r\n <div class=\"header d-flex flex-column\">\r\n <div class=\"d-flex align-items-center justify-content-end mb-3\" *ngIf=\"storeListing.length >= 2\"><select\r\n class=\"store-listing\" (change)=\"changeStore($event)\">\r\n <option value=\"\">Select Store</option>\r\n <option [value]=\"store.id\" *ngFor=\"let store of storeListing\">{{store.storeName}}</option>\r\n </select></div>\r\n <div class=\"scheme-overview d-flex flex-column\">\r\n <div class=\"d-flex gap-2\">\r\n <div class=\"available-savings\">\r\n <div class=\"d-flex align-items-center gap-1 w-100 justify-content-between\">\r\n <h3>Available Savings</h3>\r\n <span class=\"amount_logo\">\uD83D\uDCB0</span>\r\n </div>\r\n\r\n <div class=\"amount\">{{totalSavings ? totalSavings :\r\n '0'}}</div>\r\n </div>\r\n <div class=\"active-schemes\">\r\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n <h3>Active Passbooks</h3>\r\n <div class=\"auto-pay-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\r\n </div>\r\n </div>\r\n <div class=\"scheme-count\">{{totalSchemes?.length ?\r\n totalSchemes.length : '0'}}</div>\r\n <div class=\"subtitle\">On Track</div>\r\n </div>\r\n <div class=\"active-schemes\" *ngIf=\"totalAccumulatedGold > 0\">\r\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n <h3>Accumulated Gold </h3>\r\n <div class=\"auto-pay-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/153448c1756808418216accumulated_icon.png\">\r\n </div>\r\n </div>\r\n <div class=\"scheme-count\">{{totalAccumulatedGold}} gms</div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"overAllDues?.length\">\r\n <div class=\"section d-flex-flex-column gap-2\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Due Payments</h2>\r\n </div>\r\n <div class=\"payment-list d-flex flex-column gap-2\">\r\n <ng-container *ngIf=\"overAllDues?.length; else showEmptyPayment\">\r\n <div class=\"payment-item overdue\" *ngFor=\"let payment of overAllDues\">\r\n <div class=\"payment-info\">\r\n <div class=\"payment-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\">\r\n <!-- <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\"\r\n *ngIf=\"!payment.overdueStatus && payment.paymentStatus === 'PAID'\"> -->\r\n </div>\r\n <div class=\"payment-details\">\r\n <h4>{{payment.schemeName}} - {{payment.emiMonthCount}}rd EMI</h4>\r\n <span>Date {{payment.dueDate ? (payment.dueDate | date:'dd-MM-yyyy') :\r\n 'N/A'}}\r\n <!-- <span *ngIf=\"payment.overdueStatus\">| Due by: {{payment.daysOverdue\r\n ? payment.daysOverdue : 0}}</span> --></span>\r\n </div>\r\n </div>\r\n <div class=\"payment-amount\">\r\n <div class=\"amount-value\">\u20B9{{payment.dueAmount ? payment.dueAmount :\r\n '0'}}\r\n </div>\r\n <div class=\"payment-status overdue-status cursor-pointer\"\r\n (click)=\"payDue(payment)\">\r\n <ng-container *ngIf=\"!payDueLoader\">Pay Now</ng-container>\r\n <ng-container *ngIf=\"payDueLoader\">Loading...</ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #showEmptyPayment>\r\n <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n <span>No Due Payments</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n\r\n <div class=\"section mt-3\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Your Active Passbooks</h2>\r\n </div>\r\n\r\n <div class=\"schemes-grid\">\r\n <ng-container *ngIf=\"totalSchemes && totalSchemes.length > 0; else showActiveScheme\">\r\n <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\"\r\n *ngFor=\"let scheme of totalSchemes; let i = index\" (click)=\"viewSchemeDetails(scheme)\">\r\n <div class=\"scheme-header\">\r\n <div>\r\n <div class=\"scheme-title\">{{ scheme?.schemeName || 'N/A' }}</div>\r\n <div class=\"scheme-amount\">\u20B9{{ scheme?.installmentAmount || '0' }}/Monthly</div>\r\n </div>\r\n <div class=\"scheme-date\">\r\n <span>Enrolled: {{ scheme?.createdTimestamp ? (scheme?.createdTimestamp |\r\n date:'dd-MM-yyyy') :\r\n 'N/A' }}</span>\r\n <!-- <span>Maturity: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n 'N/A' }}</span> -->\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-status d-flex justify-content-center align-items-center\"\r\n [ngClass]=\"scheme?.passBookStatus === 'REDEEM_REQUESTED' ? 'redeem_status' : (scheme?.passBookStatus === 'ACTIVE' ? 'active-status' : 'redeem_status')\">\r\n {{\r\n scheme.passBookStatus ? scheme.passBookStatus.replaceAll('_', ' ') : 'N/A'\r\n }}\r\n </div>\r\n\r\n <div class=\"scheme-stats\">\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">{{ scheme?.totalPaidAmount || '0' }}</div>\r\n <div class=\"stat-label\">Deposited Amount</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">\r\n {{\r\n scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n (scheme?.schemePayments?.length -\r\n scheme.dueMonths) : 'N/A'\r\n }}\r\n </div>\r\n <div class=\"stat-label\">Paid Months</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">{{scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\r\n scheme?.dueMonths : 'N/A' }}</div>\r\n <div class=\"stat-label\">Due Months</div>\r\n </div>\r\n <div class=\"stat\" *ngIf=\"scheme?.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"stat-value\">{{ scheme?.totalInvestedMetal || '0' }} gms</div>\r\n <div class=\"stat-label\">Accumulated Gold</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-footer\">\r\n <span>Maturity Date: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\r\n 'N/A' }}</span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #showActiveScheme>\r\n <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\r\n <span>No Active Scheme</span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n\r\n </div>\r\n\r\n <!-- <div class=\"auto-pay\">\r\n <div class=\"auto-pay-icon mobile-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\r\n <div class=\"auto-pay-content\">\r\n <div class=\"auto-pay-title\">Manage Auto-pay</div>\r\n <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\r\n </div>\r\n <button class=\"manage-btn\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\r\n </div> -->\r\n </div>\r\n</ng-template>\r\n<ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #Scheme_Details>\r\n <simpo-scheme-details [schemeDetails]=\"schemeDetails\" [data]=\"data\" [metalPrice]=\"metalPrice\"\r\n (gotoSchemeOverview)=\"selectedSidePanelTab = 'Scheme Passbook'\"></simpo-scheme-details>\r\n</ng-template>\r\n<ng-template #Transactions>\r\n <simpo-passbook-transactions></simpo-passbook-transactions>\r\n</ng-template>\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", styles: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;margin-left:20px;padding:15px;overflow-y:auto;overflow-x:hidden;border:1px solid #d3d3d324;border-radius:20px;max-height:70vh}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.profile-box{box-shadow:#00000029 0 1px 4px}h1{font-weight:600}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.amount_logo{font-size:27px}@media screen and (max-width: 475px){.store-listing{width:35%!important}.total-container{height:100%!important}.amount_logo{font-size:27px}.amount,.scheme-count{font-size:20px!important}.title-text{font-size:24px}.schemes-grid{flex-wrap:wrap;overflow-y:scroll;height:95%}.section{height:auto}.scheme-status{white-space:nowrap}.scheme-card{width:100%}.header{flex-direction:column-reverse}.scheme-overview{width:100%!important}.scheme-overview div{flex-wrap:wrap}.available-savings h3{font-size:17px!important}.quick-actions{width:100%}.active-schemes h3{font-size:17px!important}.auto-pay-icon{width:55px!important;height:50px!important}.mobile-icon{width:30px!important}.manage-btn{width:25%!important}.tab-selected div{font-weight:600!important}.mobile-height{height:100%!important}.passbook_container{height:90%!important;overflow-x:scroll!important}.passbook_container .section{max-height:unset!important;padding:10px!important}.section-header{margin-bottom:2px!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px 0;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.list-sec .tab-selected{border-top-left-radius:10px!important;border-bottom-left-radius:10px}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:0 10px;width:100vw;margin-bottom:20px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}.text-overflow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width:1200px) and (max-width: 1330px){.profile-details{width:75%!important}}@media screen and (min-width:1200px){.manage-btn{width:10%!important}}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.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}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa);width:49%}.address-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.address-card{width:100%!important}.btn-sm{display:flex;justify-content:center;align-items:center;color:red!important}.btn-sm mat-icon{font-size:13px}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.profile-box:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001f!important}.profile-icon:hover{transform:scale(1.05);box-shadow:0 6px 20px #00000026!important}.contact-item:hover{color:#007bff!important}.tab-item:hover{background:linear-gradient(90deg,#007bff14,#007bff08)!important;transform:translate(4px)}.tab-item:hover .tab-hover-bg{opacity:1}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.edit-btn:hover{background:linear-gradient(135deg,#007bff0d,#007bff1a)!important;transform:translateY(-1px);box-shadow:0 4px 12px #007bff33}.logout-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px #00000040!important;filter:brightness(1.05)}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:100%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings .amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.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}.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}.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}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}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef;max-height:40vh;overflow-x:scroll}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.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}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff;white-space:nowrap}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:flex;gap:10px;overflow-x:scroll}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative;min-width:34vw}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount{font-size:12px;color:#666}.scheme-date{font-size:12px;color:#666;display:flex;flex-direction:column;gap:10px}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;min-width:15%;max-width:fit-content}.redeem_status{background:orange;color:#fff}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;display:flex;justify-content:space-evenly}.store-listing{font-size:14px;width:20%;height:30px;margin-bottom:13px;border:1px solid #e9ecef;border-radius:5px;outline:none;padding-left:5px;cursor:pointer}\n"] }]
20317
- }], ctorParameters: () => [{ type: i2$2.Router }, { type: EventsService }, { type: RestService }, { type: StorageServiceService }, { type: CartService }, { type: i3.MatDialog }, { type: i8$3.MatBottomSheet }, { type: i2$3.CookieService }, { type: i6$1.MessageService }, { type: i2$2.ActivatedRoute }], propDecorators: { showChargesTemplate: [{
20312
+ }], ctorParameters: () => [{ type: i2$2.Router }, { type: EventsService }, { type: RestService }, { type: StorageServiceService }, { type: CartService }, { type: i1$1.MatDialog }, { type: i8$3.MatBottomSheet }, { type: i2$3.CookieService }, { type: i6$1.MessageService }, { type: i2$2.ActivatedRoute }], propDecorators: { showChargesTemplate: [{
20318
20313
  type: ViewChild,
20319
20314
  args: ['showCharges', { static: true }]
20320
20315
  }], data: [{
@@ -20679,7 +20674,7 @@ class AuthenticateUserComponent extends BaseSection {
20679
20674
  get isMobile() {
20680
20675
  return window.innerWidth <= 475;
20681
20676
  }
20682
- 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: i3.MatDialog }, { token: StorageServiceService }, { token: i3.MatDialogRef, optional: true }, { token: i8$3.MatBottomSheetRef, optional: true }, { token: EventsService }, { token: i6$1.MessageService }, { token: i8.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
20677
+ 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$1.MatDialog }, { token: StorageServiceService }, { token: i1$1.MatDialogRef, optional: true }, { token: i8$3.MatBottomSheetRef, optional: true }, { token: EventsService }, { token: i6$1.MessageService }, { token: i8.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
20683
20678
  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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.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$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "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:
20684
20679
  // FormGroup,
20685
20680
  // FormBuilder,
@@ -20715,7 +20710,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
20715
20710
  }, {
20716
20711
  type: Inject,
20717
20712
  args: [MAT_BOTTOM_SHEET_DATA]
20718
- }] }, { type: RestService }, { type: i2$2.Router }, { type: i3.MatDialog }, { type: StorageServiceService }, { type: i3.MatDialogRef, decorators: [{
20713
+ }] }, { type: RestService }, { type: i2$2.Router }, { type: i1$1.MatDialog }, { type: StorageServiceService }, { type: i1$1.MatDialogRef, decorators: [{
20719
20714
  type: Optional
20720
20715
  }] }, { type: i8$3.MatBottomSheetRef, decorators: [{
20721
20716
  type: Optional
@@ -22374,7 +22369,7 @@ class ReturnsCalculatorComponent extends BaseSection {
22374
22369
  goToTermsAndCondition() {
22375
22370
  this.router.navigate(['/scheme-detail'], { queryParams: { schemeId: this.enrolledScheme?.id, termsAndCondition: true } });
22376
22371
  }
22377
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ReturnsCalculatorComponent, deps: [{ token: EventsService }, { token: RestService }, { token: i3.MatDialog }, { token: StorageServiceService }, { token: i2$2.Router }, { token: i6$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
22372
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ReturnsCalculatorComponent, deps: [{ token: EventsService }, { token: RestService }, { token: i1$1.MatDialog }, { token: StorageServiceService }, { token: i2$2.Router }, { token: i6$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
22378
22373
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ReturnsCalculatorComponent, isStandalone: true, selector: "simpo-returns-calculator", inputs: { data: "data", edit: "edit", customClass: "customClass", delete: "delete", index: "index" }, providers: [MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n <div class=\"main-section\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoLayout]=\"stylesLayout\">\r\n <div class=\"headers w-100\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <ng-container *ngFor=\"let item of data?.content?.inputText\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <div class=\"calculator bx-shd w-75 mx-auto my-3\">\r\n <div class=\"calculator-header text-center mb-4 w-100\">\r\n <h3 class=\"mb-0 calculator-title\">Interactive Returns Calculator</h3>\r\n </div>\r\n <div class=\"sub-header mb-3 p-3\">\r\n <h6 class=\"mb-0 sub-header-text\">Select Your Preferred Scheme</h6>\r\n </div>\r\n <div class=\"calculator-body-top d-flex mb-4 px-3\">\r\n <ng-container *ngFor=\"let scheme of allSchemes\">\r\n <div class=\"form-check scheme-option p-3 border rounded border-primary ind-border\"\r\n (click)=\"onSchemeChange(scheme)\">\r\n <input class=\"form-check-input cursor-pointer\" type=\"radio\" name=\"scheme\" id=\"individual\"\r\n (change)=\"onSchemeChange(scheme)\" [checked]=\"scheme.selected\">\r\n <div class=\"form-check-label ms-2\">\r\n <div class=\"d-flex align-items-center mb-2\">\r\n \uD83D\uDC64\r\n <div class=\"scheme-header fw-bold\">{{scheme?.schemeName ? scheme.schemeName :\r\n 'N/A'}}</div>\r\n </div>\r\n <div class=\"scheme-description text-muted small\">Pay 10 months, get 11th month FREE\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"gold-purity\"\r\n *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n <div class=\"purity\" *ngFor=\"let gold of metalPrice?.priceData ?? [0,0,0]\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/18k_gold_pic.svg\"\r\n alt=\"\" *ngIf=\"gold?.karats === '_18k'\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/24k_gold_pic.svg\"\r\n alt=\"\" *ngIf=\"gold?.karats === '_24k'\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/22k_gold_pic.svg\"\r\n alt=\"\" *ngIf=\"gold?.karats === '_22k'\">\r\n <div>\r\n <div>{{gold?.karats?.replaceAll('_', \"\")}} Gold Purity</div>\r\n <div class=\"gold-price\">\u20B9{{gold.price}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"sub-header mb-3 px-3 monthly-scheme\" *ngIf=\"minAmount && maxAmount\">\r\n <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\r\n <p class=\"enrolled-gram\"\r\n *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n {{purchasedGram}} gms</p>\r\n </div>\r\n\r\n <div class=\"calculate-slider mb-4 px-3\" *ngIf=\"minAmount && maxAmount\">\r\n <div class=\"slider-container position-relative\">\r\n <mat-slider [min]=\"minAmount\" [max]=\"maxAmount\" [step]=\"enrolledScheme?.valueStep\"\r\n class=\"w-100 pale-slider\"\r\n [style.--mdc-slider-handle-color]=\"styles?.background?.accentColor\"\r\n [style.--mdc-slider-focus-handle-color]=\"styles?.background?.accentColor\"\r\n [style.--mdc-slider-hover-handle-color]=\"styles?.background?.accentColor\"\r\n [style.--mdc-slider-active-track-color]=\"styles?.background?.accentColor\"\r\n [style.--mdc-slider-with-tick-marks-active-container-color]=\"styles?.background?.accentColor\"\r\n [style.--mat-slider-ripple-color]=\"styles?.background?.accentColor\"\r\n [style.--mat-slider-value-indicator-color]=\"styles?.background?.accentColor\">\r\n <input matSliderThumb [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\">\r\n </mat-slider>\r\n <!-- <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\r\n [step]=\"enrolledScheme?.valueStep\" [(ngModel)]=\"monthlyAmount\"\r\n (ngModelChange)=\"onAmountChange()\"> -->\r\n <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n <span class=\"text-muted\">\u20B9{{minAmount | number}}</span>\r\n <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n <span class=\"text-muted\">\u20B9{{maxAmount | number}}</span>\r\n </div>\r\n <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\r\n </div>\r\n <div class=\"random_opitons d-flex justify-content-center gap-3 align-items-center flex-wrap\"\r\n *ngIf=\"installmentOptions && installmentOptions.length > 0\">\r\n <div class=\"option cursor-pointer\" *ngFor=\"let option of installmentOptions\"\r\n [ngStyle]=\"option.status ? {'border': '2px solid grey','font-weight':'bold'} : {}\"\r\n (click)=\"setMonthlyAmount(option)\">\r\n \u20B9 {{option?.value ? option?.value : 'N/A'}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"calculator-bottom px-3 mb-5\">\r\n <div class=\"scheme-results\">\r\n <!-- <div class=\"d-flex align-items-center mb-3\">\r\n \u2B50 <h6 class=\"mb-0 individual-results-title\">Individual Scheme Results</h6>\r\n </div> -->\r\n\r\n <div class=\"row mb-3\">\r\n <div [class]=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' ? 'col-6' : 'col-4'\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * maturityCount) |\r\n number}}</div>\r\n <div class=\"result-label text-muted small\">Your {{maturityCount}}-Month Contribution\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\" *ngIf=\"enrolledScheme?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{benefitAmount | number}}</div>\r\n <div class=\"result-label text-muted small\">Scheme Benefit</div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\" *ngIf=\"enrolledScheme?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"result-card result-card-highlight text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\"\r\n *ngIf=\"enrolledScheme?.benefitType != 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n maturityCount)+benefitAmount) | number}}</div>\r\n <div class=\"result-amount fw-bold fs-5\"\r\n *ngIf=\"enrolledScheme?.benefitType === 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n maturityCount)) | number}}</div>\r\n <div class=\"result-label small opacity-75\">Total Redemption Value</div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\" *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"result-card text-center p-3 border rounded result-card-highlight\">\r\n <div class=\"result-amount fw-bold fs-5\">{{purchasedGram}} gms</div>\r\n <div class=\"result-label small color-white\">Gold Allocation Today\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\r\n *ngIf=\"enrolledScheme && (stores.length >= 2 || staffMembers.length >= 2) \">\r\n <div class=\"store_selection w-50 align-items-center gap-1\" *ngIf=\"stores.length >= 2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\r\n Store : </span></div>\r\n <div class=\"store-selector\">\r\n <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\"\r\n (ngModelChange)=\"getMetalPrice()\">\r\n <option [ngValue]=\"null\" disabled>Choose a store...</option>\r\n <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\r\n {{store.name}} - {{store.storeRefId}}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"staff-selector w-50 align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\r\n Staff Member : </span></div>\r\n <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\r\n <option value=\"\" disabled>Choose a staff member...</option>\r\n <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\r\n {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n\r\n <div class=\"terms-and-condition\" *ngIf=\"enrolledScheme\">\r\n <input type=\"checkbox\" [(ngModel)]=\"termsAndCondition\">I agree to <a\r\n (click)=\"goToTermsAndCondition()\">Terms & Conditions</a>\r\n </div>\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\"\r\n (click)=\"enrollScheme(enrolledScheme)\"\r\n [style.borderColor]=\"styles?.background?.accentColor\">\r\n <span *ngIf=\"!enrollButtonLoader\">Enroll in Scheme</span>\r\n <ng-container *ngIf=\"enrollButtonLoader\">\r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\r\n Loading...\r\n </div>\r\n </ng-container>\r\n </button>\r\n </div>\r\n <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\r\n <div class=\"d-flex align-items-center mb-3\">\r\n \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\r\n </div>\r\n\r\n <div class=\"row mb-3\">\r\n <div class=\"col-6\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"result-card result-card-group text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\r\n Enroll in Scheme\r\n </button>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.bx-shd{box-shadow:#ffffff1a 0 1px 1px inset,#32325d40 0 50px 100px -20px,#0000004d 0 30px 60px -30px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.calculator{border-radius:12px;box-shadow:0 4px 6px #0000001a}.calculator-header{background:linear-gradient(145deg,#f2e8cb,#d1c29e);color:#fff;padding:15px;border-radius:8px 8px 0 0}.calculator-title{color:#000;font-weight:600}.sub-header-text{color:#666;font-weight:500}.w-48{width:48%!important}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.random_opitons{padding:1%}.option{padding:1% 2%;border:1px solid lightgrey;border-radius:50px}.payment-row:last-child{margin-bottom:0}.label{color:#666;font-size:14px;font-weight:400}.amount{color:#333;font-size:14px;font-weight:500}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}.mat-dialog-container{padding:0!important;border-radius:12px!important}.scheme-option{cursor:pointer;transition:all .3s ease;min-width:22vw}.form-check-input:checked{background-color:#d63384;border-color:#d63384}.form-check-input:focus{box-shadow:0 0 0 .25rem #d6338440}.scheme-header{font-size:16px;margin-bottom:5px;color:#333}.scheme-description{font-size:13px;line-height:1.4}.custom-range{height:8px;border-radius:5px;outline:none}.custom-range::-webkit-slider-thumb{appearance:none;width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0003}.custom-range::-moz-range-thumb{width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px #0003}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.monthly-amount{color:#d4a574}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{background:#d4a574;color:#fff}.result-card-group{background:#d63384;color:#fff}.ind-border{border:2px solid rgb(201,176,130)!important}.grp-border{border:2px solid rgb(214,51,132)!important}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.bonus-message{border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0;gap:25px}.spinner{width:30px;height:30px}.store_selection span{color:#d4a574;font-weight:700}.store-selector{width:100%;margin:5px 0}.store-selector label{display:block;font-weight:600;margin-bottom:8px}.store-selector .form-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;min-width:315px}.store-selector .form-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.store-selector .form-select:hover{border-color:#bbb}.store-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #007bff}.store-selector .selected-info p{margin:0;font-size:14px;color:#495057}.staff-selector label{display:block;color:#333;white-space:nowrap}.staff-selector span{color:#d4a574;font-weight:700}.staff-selector .form-select{margin:5px 0;width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.staff-selector .form-select:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px #28a7451a}.staff-selector .form-select:hover{border-color:#bbb}.staff-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #28a745}.staff-selector .selected-info p{margin:0;font-size:14px;color:#495057}.bonus-text{color:#d4a574;font-weight:500}.scheme-results{background:#fff;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.group-results-title{color:#d63384;font-weight:600}.enroll-btn{font-size:16px;border:1px solid}.calculator-body-top{overflow-y:scroll;gap:2rem}@media (max-width: 768px){.calculator{width:95%!important}.scheme-results .row{flex-direction:column}.scheme-results :is(.col-4,.col-6){width:100%!important}.calculator-body-top{flex-direction:column!important}.w-48{width:100%!important;margin-bottom:15px}.row .col-4,.row .col-6,.scheme-option{margin-bottom:15px}}@media (max-width:475px){.gold-purity{flex-wrap:wrap;gap:.5rem!important;padding:.5rem}.enrolled-gram{font-size:1rem;white-space:nowrap}.bonus-message{flex-direction:column}.staff-selector,.store_selection{width:100%!important}.scheme-results{padding:20px 0}}.gold-purity{padding-left:1rem;padding-bottom:15px;display:flex;gap:15px}.gold-purity .purity{display:flex;gap:10px;background:#fff7d0;width:max-content;padding:5px 8px;border-radius:11px;align-items:center}.gold-purity .purity img{height:40px}.gold-purity .purity div{font-size:12px}.gold-purity .purity .gold-price{font-weight:700}.enrolled-gram{margin-bottom:0;font-size:17px;font-weight:600}.monthly-scheme{display:flex;justify-content:space-between}.color-white{color:#fff}.terms-and-condition{display:flex;align-items:center;gap:10px;margin-bottom:10px}.terms-and-condition input{cursor:pointer}a{color:#0d6efd!important;text-decoration:underline!important;cursor:pointer}a:hover{color:#0a58ca!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "directive", type: i10$2.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }] }); }
22379
22374
  }
22380
22375
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ReturnsCalculatorComponent, decorators: [{
@@ -22399,7 +22394,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
22399
22394
  MatSlider,
22400
22395
  MatSliderModule
22401
22396
  ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n <div class=\"main-section\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoLayout]=\"stylesLayout\">\r\n <div class=\"headers w-100\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <ng-container *ngFor=\"let item of data?.content?.inputText\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <div class=\"calculator bx-shd w-75 mx-auto my-3\">\r\n <div class=\"calculator-header text-center mb-4 w-100\">\r\n <h3 class=\"mb-0 calculator-title\">Interactive Returns Calculator</h3>\r\n </div>\r\n <div class=\"sub-header mb-3 p-3\">\r\n <h6 class=\"mb-0 sub-header-text\">Select Your Preferred Scheme</h6>\r\n </div>\r\n <div class=\"calculator-body-top d-flex mb-4 px-3\">\r\n <ng-container *ngFor=\"let scheme of allSchemes\">\r\n <div class=\"form-check scheme-option p-3 border rounded border-primary ind-border\"\r\n (click)=\"onSchemeChange(scheme)\">\r\n <input class=\"form-check-input cursor-pointer\" type=\"radio\" name=\"scheme\" id=\"individual\"\r\n (change)=\"onSchemeChange(scheme)\" [checked]=\"scheme.selected\">\r\n <div class=\"form-check-label ms-2\">\r\n <div class=\"d-flex align-items-center mb-2\">\r\n \uD83D\uDC64\r\n <div class=\"scheme-header fw-bold\">{{scheme?.schemeName ? scheme.schemeName :\r\n 'N/A'}}</div>\r\n </div>\r\n <div class=\"scheme-description text-muted small\">Pay 10 months, get 11th month FREE\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"gold-purity\"\r\n *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n <div class=\"purity\" *ngFor=\"let gold of metalPrice?.priceData ?? [0,0,0]\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/18k_gold_pic.svg\"\r\n alt=\"\" *ngIf=\"gold?.karats === '_18k'\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/24k_gold_pic.svg\"\r\n alt=\"\" *ngIf=\"gold?.karats === '_24k'\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/22k_gold_pic.svg\"\r\n alt=\"\" *ngIf=\"gold?.karats === '_22k'\">\r\n <div>\r\n <div>{{gold?.karats?.replaceAll('_', \"\")}} Gold Purity</div>\r\n <div class=\"gold-price\">\u20B9{{gold.price}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"sub-header mb-3 px-3 monthly-scheme\" *ngIf=\"minAmount && maxAmount\">\r\n <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\r\n <p class=\"enrolled-gram\"\r\n *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n {{purchasedGram}} gms</p>\r\n </div>\r\n\r\n <div class=\"calculate-slider mb-4 px-3\" *ngIf=\"minAmount && maxAmount\">\r\n <div class=\"slider-container position-relative\">\r\n <mat-slider [min]=\"minAmount\" [max]=\"maxAmount\" [step]=\"enrolledScheme?.valueStep\"\r\n class=\"w-100 pale-slider\"\r\n [style.--mdc-slider-handle-color]=\"styles?.background?.accentColor\"\r\n [style.--mdc-slider-focus-handle-color]=\"styles?.background?.accentColor\"\r\n [style.--mdc-slider-hover-handle-color]=\"styles?.background?.accentColor\"\r\n [style.--mdc-slider-active-track-color]=\"styles?.background?.accentColor\"\r\n [style.--mdc-slider-with-tick-marks-active-container-color]=\"styles?.background?.accentColor\"\r\n [style.--mat-slider-ripple-color]=\"styles?.background?.accentColor\"\r\n [style.--mat-slider-value-indicator-color]=\"styles?.background?.accentColor\">\r\n <input matSliderThumb [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\">\r\n </mat-slider>\r\n <!-- <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\r\n [step]=\"enrolledScheme?.valueStep\" [(ngModel)]=\"monthlyAmount\"\r\n (ngModelChange)=\"onAmountChange()\"> -->\r\n <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n <span class=\"text-muted\">\u20B9{{minAmount | number}}</span>\r\n <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n <span class=\"text-muted\">\u20B9{{maxAmount | number}}</span>\r\n </div>\r\n <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\r\n </div>\r\n <div class=\"random_opitons d-flex justify-content-center gap-3 align-items-center flex-wrap\"\r\n *ngIf=\"installmentOptions && installmentOptions.length > 0\">\r\n <div class=\"option cursor-pointer\" *ngFor=\"let option of installmentOptions\"\r\n [ngStyle]=\"option.status ? {'border': '2px solid grey','font-weight':'bold'} : {}\"\r\n (click)=\"setMonthlyAmount(option)\">\r\n \u20B9 {{option?.value ? option?.value : 'N/A'}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"calculator-bottom px-3 mb-5\">\r\n <div class=\"scheme-results\">\r\n <!-- <div class=\"d-flex align-items-center mb-3\">\r\n \u2B50 <h6 class=\"mb-0 individual-results-title\">Individual Scheme Results</h6>\r\n </div> -->\r\n\r\n <div class=\"row mb-3\">\r\n <div [class]=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' ? 'col-6' : 'col-4'\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * maturityCount) |\r\n number}}</div>\r\n <div class=\"result-label text-muted small\">Your {{maturityCount}}-Month Contribution\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\" *ngIf=\"enrolledScheme?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{benefitAmount | number}}</div>\r\n <div class=\"result-label text-muted small\">Scheme Benefit</div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\" *ngIf=\"enrolledScheme?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"result-card result-card-highlight text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\"\r\n *ngIf=\"enrolledScheme?.benefitType != 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n maturityCount)+benefitAmount) | number}}</div>\r\n <div class=\"result-amount fw-bold fs-5\"\r\n *ngIf=\"enrolledScheme?.benefitType === 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n maturityCount)) | number}}</div>\r\n <div class=\"result-label small opacity-75\">Total Redemption Value</div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\" *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"result-card text-center p-3 border rounded result-card-highlight\">\r\n <div class=\"result-amount fw-bold fs-5\">{{purchasedGram}} gms</div>\r\n <div class=\"result-label small color-white\">Gold Allocation Today\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\r\n *ngIf=\"enrolledScheme && (stores.length >= 2 || staffMembers.length >= 2) \">\r\n <div class=\"store_selection w-50 align-items-center gap-1\" *ngIf=\"stores.length >= 2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\r\n Store : </span></div>\r\n <div class=\"store-selector\">\r\n <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\"\r\n (ngModelChange)=\"getMetalPrice()\">\r\n <option [ngValue]=\"null\" disabled>Choose a store...</option>\r\n <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\r\n {{store.name}} - {{store.storeRefId}}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"staff-selector w-50 align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\r\n Staff Member : </span></div>\r\n <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\r\n <option value=\"\" disabled>Choose a staff member...</option>\r\n <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\r\n {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n\r\n <div class=\"terms-and-condition\" *ngIf=\"enrolledScheme\">\r\n <input type=\"checkbox\" [(ngModel)]=\"termsAndCondition\">I agree to <a\r\n (click)=\"goToTermsAndCondition()\">Terms & Conditions</a>\r\n </div>\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\"\r\n (click)=\"enrollScheme(enrolledScheme)\"\r\n [style.borderColor]=\"styles?.background?.accentColor\">\r\n <span *ngIf=\"!enrollButtonLoader\">Enroll in Scheme</span>\r\n <ng-container *ngIf=\"enrollButtonLoader\">\r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\r\n Loading...\r\n </div>\r\n </ng-container>\r\n </button>\r\n </div>\r\n <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\r\n <div class=\"d-flex align-items-center mb-3\">\r\n \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\r\n </div>\r\n\r\n <div class=\"row mb-3\">\r\n <div class=\"col-6\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"result-card result-card-group text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\r\n Enroll in Scheme\r\n </button>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.bx-shd{box-shadow:#ffffff1a 0 1px 1px inset,#32325d40 0 50px 100px -20px,#0000004d 0 30px 60px -30px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.calculator{border-radius:12px;box-shadow:0 4px 6px #0000001a}.calculator-header{background:linear-gradient(145deg,#f2e8cb,#d1c29e);color:#fff;padding:15px;border-radius:8px 8px 0 0}.calculator-title{color:#000;font-weight:600}.sub-header-text{color:#666;font-weight:500}.w-48{width:48%!important}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.random_opitons{padding:1%}.option{padding:1% 2%;border:1px solid lightgrey;border-radius:50px}.payment-row:last-child{margin-bottom:0}.label{color:#666;font-size:14px;font-weight:400}.amount{color:#333;font-size:14px;font-weight:500}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}.mat-dialog-container{padding:0!important;border-radius:12px!important}.scheme-option{cursor:pointer;transition:all .3s ease;min-width:22vw}.form-check-input:checked{background-color:#d63384;border-color:#d63384}.form-check-input:focus{box-shadow:0 0 0 .25rem #d6338440}.scheme-header{font-size:16px;margin-bottom:5px;color:#333}.scheme-description{font-size:13px;line-height:1.4}.custom-range{height:8px;border-radius:5px;outline:none}.custom-range::-webkit-slider-thumb{appearance:none;width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0003}.custom-range::-moz-range-thumb{width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px #0003}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.monthly-amount{color:#d4a574}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{background:#d4a574;color:#fff}.result-card-group{background:#d63384;color:#fff}.ind-border{border:2px solid rgb(201,176,130)!important}.grp-border{border:2px solid rgb(214,51,132)!important}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.bonus-message{border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0;gap:25px}.spinner{width:30px;height:30px}.store_selection span{color:#d4a574;font-weight:700}.store-selector{width:100%;margin:5px 0}.store-selector label{display:block;font-weight:600;margin-bottom:8px}.store-selector .form-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;min-width:315px}.store-selector .form-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.store-selector .form-select:hover{border-color:#bbb}.store-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #007bff}.store-selector .selected-info p{margin:0;font-size:14px;color:#495057}.staff-selector label{display:block;color:#333;white-space:nowrap}.staff-selector span{color:#d4a574;font-weight:700}.staff-selector .form-select{margin:5px 0;width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.staff-selector .form-select:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px #28a7451a}.staff-selector .form-select:hover{border-color:#bbb}.staff-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #28a745}.staff-selector .selected-info p{margin:0;font-size:14px;color:#495057}.bonus-text{color:#d4a574;font-weight:500}.scheme-results{background:#fff;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.group-results-title{color:#d63384;font-weight:600}.enroll-btn{font-size:16px;border:1px solid}.calculator-body-top{overflow-y:scroll;gap:2rem}@media (max-width: 768px){.calculator{width:95%!important}.scheme-results .row{flex-direction:column}.scheme-results :is(.col-4,.col-6){width:100%!important}.calculator-body-top{flex-direction:column!important}.w-48{width:100%!important;margin-bottom:15px}.row .col-4,.row .col-6,.scheme-option{margin-bottom:15px}}@media (max-width:475px){.gold-purity{flex-wrap:wrap;gap:.5rem!important;padding:.5rem}.enrolled-gram{font-size:1rem;white-space:nowrap}.bonus-message{flex-direction:column}.staff-selector,.store_selection{width:100%!important}.scheme-results{padding:20px 0}}.gold-purity{padding-left:1rem;padding-bottom:15px;display:flex;gap:15px}.gold-purity .purity{display:flex;gap:10px;background:#fff7d0;width:max-content;padding:5px 8px;border-radius:11px;align-items:center}.gold-purity .purity img{height:40px}.gold-purity .purity div{font-size:12px}.gold-purity .purity .gold-price{font-weight:700}.enrolled-gram{margin-bottom:0;font-size:17px;font-weight:600}.monthly-scheme{display:flex;justify-content:space-between}.color-white{color:#fff}.terms-and-condition{display:flex;align-items:center;gap:10px;margin-bottom:10px}.terms-and-condition input{cursor:pointer}a{color:#0d6efd!important;text-decoration:underline!important;cursor:pointer}a:hover{color:#0a58ca!important}\n"] }]
22402
- }], ctorParameters: () => [{ type: EventsService }, { type: RestService }, { type: i3.MatDialog }, { type: StorageServiceService }, { type: i2$2.Router }, { type: i6$1.MessageService }], propDecorators: { showChargesTemplate: [{
22397
+ }], ctorParameters: () => [{ type: EventsService }, { type: RestService }, { type: i1$1.MatDialog }, { type: StorageServiceService }, { type: i2$2.Router }, { type: i6$1.MessageService }], propDecorators: { showChargesTemplate: [{
22403
22398
  type: ViewChild,
22404
22399
  args: ['showCharges', { static: true }]
22405
22400
  }], data: [{