simpo-component-library 3.6.489 → 3.6.495
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/directive/background-directive.mjs +36 -31
- package/esm2022/lib/elements/media-selector/media-selector.component.mjs +3 -3
- package/esm2022/lib/elements/text-editor/text-editor.component.mjs +165 -38
- package/esm2022/lib/sections/appointment-form/appointment-booking/appointment-booking/appointment-booking.component.mjs +5 -3
- package/esm2022/lib/sections/contact-us/contact-us.component.mjs +3 -3
- package/esm2022/lib/sections/logo-gallery/logo-gallery.component.mjs +3 -3
- package/esm2022/lib/sections/new-services/new-services.component.mjs +18 -5
- package/esm2022/lib/sections/new-testimonials/new-testimonials.component.mjs +3 -3
- package/esm2022/lib/sections/testimonial-fullwidth/testimonial-fullwidth.component.mjs +3 -3
- package/fesm2022/simpo-component-library.mjs +228 -83
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/lib/directive/background-directive.d.ts +1 -0
- package/lib/ecommerce/sections/authentication-required/authentication-required.component.d.ts +1 -1
- package/lib/ecommerce/sections/product-desc/product-desc.component.d.ts +1 -1
- package/lib/ecommerce/sections/schemes/schemes.component.d.ts +1 -1
- package/lib/elements/pricing-s1/pricing-s1.component.d.ts +1 -1
- package/lib/elements/text-editor/text-editor.component.d.ts +10 -0
- package/lib/sections/banner-carousel/banner-carousel.component.d.ts +2 -2
- package/lib/sections/carousel-banner/carousel-banner.component.d.ts +1 -1
- package/lib/sections/contact-us/contact-us.component.d.ts +1 -1
- package/lib/sections/faq-section/faq-section.component.d.ts +1 -1
- package/lib/sections/image-section/image-section.component.d.ts +2 -2
- package/lib/sections/logo-showcase/logo-showcase.component.d.ts +2 -2
- package/lib/sections/new-services/new-services.component.d.ts +2 -0
- package/lib/sections/new-testimonials/new-testimonials.component.d.ts +1 -1
- package/lib/sections/pricing-section/pricing-section.component.d.ts +2 -2
- package/package.json +1 -1
- package/simpo-component-library-3.6.495.tgz +0 -0
- package/simpo-component-library-3.6.486.tgz +0 -0
- package/simpo-component-library-3.6.487.tgz +0 -0
- package/simpo-component-library-3.6.488.tgz +0 -0
- package/simpo-component-library-3.6.489.tgz +0 -0
|
@@ -1199,11 +1199,11 @@ class MediaSelectorComponent {
|
|
|
1199
1199
|
});
|
|
1200
1200
|
}
|
|
1201
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
|
-
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> 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"] }] }); }
|
|
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> 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 , video/mp4\" #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
|
-
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> 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"] }]
|
|
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> 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 , video/mp4\" #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
1207
|
}], ctorParameters: () => [{ type: ImageUplaodService }, { type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
|
|
1208
1208
|
type: Inject,
|
|
1209
1209
|
args: [MAT_DIALOG_DATA]
|
|
@@ -1654,6 +1654,7 @@ class TextEditorComponent {
|
|
|
1654
1654
|
this.editorService = editorService;
|
|
1655
1655
|
this.platformId = platformId;
|
|
1656
1656
|
this.ngZone = ngZone;
|
|
1657
|
+
this.lastGradientSpan = null;
|
|
1657
1658
|
this.value = '<p>Hello this is palash makhija</p>';
|
|
1658
1659
|
this.valueChange = new EventEmitter();
|
|
1659
1660
|
this.editable = false;
|
|
@@ -1674,6 +1675,7 @@ class TextEditorComponent {
|
|
|
1674
1675
|
};
|
|
1675
1676
|
this.selectedColorType = 'SOLID';
|
|
1676
1677
|
this.primaryColor = '#000000';
|
|
1678
|
+
this.secondaryColor = '#bd5f5fff';
|
|
1677
1679
|
this.savedRange = null;
|
|
1678
1680
|
}
|
|
1679
1681
|
ngOnInit() {
|
|
@@ -1686,6 +1688,53 @@ class TextEditorComponent {
|
|
|
1686
1688
|
document.removeEventListener('mousedown', this.hideToolbar.bind(this));
|
|
1687
1689
|
}
|
|
1688
1690
|
}
|
|
1691
|
+
selectRange(range) {
|
|
1692
|
+
const sel = window.getSelection();
|
|
1693
|
+
if (!sel)
|
|
1694
|
+
return;
|
|
1695
|
+
sel.removeAllRanges();
|
|
1696
|
+
sel.addRange(range);
|
|
1697
|
+
}
|
|
1698
|
+
markSelection() {
|
|
1699
|
+
const sel = window.getSelection();
|
|
1700
|
+
if (!sel || sel.rangeCount === 0)
|
|
1701
|
+
return null;
|
|
1702
|
+
const range = sel.getRangeAt(0).cloneRange();
|
|
1703
|
+
const start = document.createElement('span');
|
|
1704
|
+
const end = document.createElement('span');
|
|
1705
|
+
start.setAttribute('data-sel-start', '1');
|
|
1706
|
+
end.setAttribute('data-sel-end', '1');
|
|
1707
|
+
start.style.display = 'inline-block';
|
|
1708
|
+
start.style.width = '0';
|
|
1709
|
+
start.style.height = '0';
|
|
1710
|
+
end.style.display = 'inline-block';
|
|
1711
|
+
end.style.width = '0';
|
|
1712
|
+
end.style.height = '0';
|
|
1713
|
+
const endRange = range.cloneRange();
|
|
1714
|
+
endRange.collapse(false); // at end
|
|
1715
|
+
endRange.insertNode(end);
|
|
1716
|
+
const startRange = range.cloneRange();
|
|
1717
|
+
startRange.collapse(true); // at start
|
|
1718
|
+
startRange.insertNode(start);
|
|
1719
|
+
return { start, end };
|
|
1720
|
+
}
|
|
1721
|
+
restoreSelectionFromMarkers(markers) {
|
|
1722
|
+
if (!markers)
|
|
1723
|
+
return;
|
|
1724
|
+
const { start, end } = markers;
|
|
1725
|
+
const sel = window.getSelection();
|
|
1726
|
+
if (!sel)
|
|
1727
|
+
return;
|
|
1728
|
+
const newRange = document.createRange();
|
|
1729
|
+
newRange.setStartAfter(start);
|
|
1730
|
+
newRange.setEndBefore(end);
|
|
1731
|
+
// Clean up markers
|
|
1732
|
+
start.parentNode?.removeChild(start);
|
|
1733
|
+
end.parentNode?.removeChild(end);
|
|
1734
|
+
sel.removeAllRanges();
|
|
1735
|
+
sel.addRange(newRange);
|
|
1736
|
+
this.savedRange = newRange.cloneRange();
|
|
1737
|
+
}
|
|
1689
1738
|
showToolbar(event) {
|
|
1690
1739
|
if (!isPlatformBrowser(this.platformId) || !this.editable)
|
|
1691
1740
|
return;
|
|
@@ -1719,13 +1768,99 @@ class TextEditorComponent {
|
|
|
1719
1768
|
this.show = false;
|
|
1720
1769
|
}
|
|
1721
1770
|
}
|
|
1771
|
+
rememberSelection(e) {
|
|
1772
|
+
if (!isPlatformBrowser(this.platformId))
|
|
1773
|
+
return;
|
|
1774
|
+
const sel = window.getSelection();
|
|
1775
|
+
if (sel && sel.rangeCount > 0) {
|
|
1776
|
+
this.savedRange = sel.getRangeAt(0).cloneRange();
|
|
1777
|
+
}
|
|
1778
|
+
e.preventDefault();
|
|
1779
|
+
}
|
|
1780
|
+
getActiveRange() {
|
|
1781
|
+
const sel = window.getSelection();
|
|
1782
|
+
// Prefer saved clone, else live selection clone
|
|
1783
|
+
const candidate = this.savedRange
|
|
1784
|
+
?? (sel && sel.rangeCount > 0 ? sel.getRangeAt(0) : null);
|
|
1785
|
+
if (!candidate)
|
|
1786
|
+
return null;
|
|
1787
|
+
const range = ('cloneRange' in candidate) ? candidate.cloneRange() : candidate;
|
|
1788
|
+
return range && !range.collapsed ? range : null;
|
|
1789
|
+
}
|
|
1790
|
+
setColorMode(mode) {
|
|
1791
|
+
if (!isPlatformBrowser(this.platformId))
|
|
1792
|
+
return;
|
|
1793
|
+
this.selectedColorType = mode;
|
|
1794
|
+
const markers = this.markSelection();
|
|
1795
|
+
if (!markers)
|
|
1796
|
+
return;
|
|
1797
|
+
const markedRange = document.createRange();
|
|
1798
|
+
markedRange.setStartAfter(markers.start);
|
|
1799
|
+
markedRange.setEndBefore(markers.end);
|
|
1800
|
+
if (mode === 'GRADIENT') {
|
|
1801
|
+
const gradient = `linear-gradient(to right, ${this.primaryColor} 0%, ${this.secondaryColor} 100%)`;
|
|
1802
|
+
this.wrapRangeWithGradient(markedRange, gradient);
|
|
1803
|
+
markers.start.parentNode?.removeChild(markers.start);
|
|
1804
|
+
markers.end.parentNode?.removeChild(markers.end);
|
|
1805
|
+
const sel = window.getSelection();
|
|
1806
|
+
if (sel && sel.rangeCount > 0)
|
|
1807
|
+
this.savedRange = sel.getRangeAt(0).cloneRange();
|
|
1808
|
+
this.valueChange.emit(this.editor.nativeElement.innerHTML);
|
|
1809
|
+
return;
|
|
1810
|
+
}
|
|
1811
|
+
this.unwrapGradientInRange(markedRange);
|
|
1812
|
+
this.restoreSelectionFromMarkers(markers);
|
|
1813
|
+
this.setStyleWithCSS(true);
|
|
1814
|
+
document.execCommand('foreColor', false, this.toolbarData.selectedColor || '#000000');
|
|
1815
|
+
const sel = window.getSelection();
|
|
1816
|
+
if (sel && sel.rangeCount > 0)
|
|
1817
|
+
this.savedRange = sel.getRangeAt(0).cloneRange();
|
|
1818
|
+
this.valueChange.emit(this.editor.nativeElement.innerHTML);
|
|
1819
|
+
}
|
|
1820
|
+
wrapRangeWithGradient(range, gradient) {
|
|
1821
|
+
const span = document.createElement('span');
|
|
1822
|
+
span.setAttribute('data-gradient', 'true');
|
|
1823
|
+
span.style.backgroundImage = gradient;
|
|
1824
|
+
span.style.backgroundClip = 'text';
|
|
1825
|
+
span.style.webkitBackgroundClip = 'text';
|
|
1826
|
+
span.style.webkitTextFillColor = 'transparent';
|
|
1827
|
+
span.style.color = 'transparent';
|
|
1828
|
+
const frag = range.extractContents();
|
|
1829
|
+
span.appendChild(frag);
|
|
1830
|
+
range.insertNode(span);
|
|
1831
|
+
const sel = window.getSelection();
|
|
1832
|
+
sel?.removeAllRanges();
|
|
1833
|
+
const newRange = document.createRange();
|
|
1834
|
+
newRange.selectNodeContents(span);
|
|
1835
|
+
sel?.addRange(newRange);
|
|
1836
|
+
this.lastGradientSpan = span;
|
|
1837
|
+
}
|
|
1838
|
+
unwrapGradientInRange(range) {
|
|
1839
|
+
const root = this.editor?.nativeElement;
|
|
1840
|
+
if (!root)
|
|
1841
|
+
return;
|
|
1842
|
+
const spans = Array.from(root.querySelectorAll('span[data-gradient="true"]'));
|
|
1843
|
+
for (let i = spans.length - 1; i >= 0; i--) {
|
|
1844
|
+
const span = spans[i];
|
|
1845
|
+
try {
|
|
1846
|
+
if (range.intersectsNode(span)) {
|
|
1847
|
+
while (span.firstChild) {
|
|
1848
|
+
span.parentNode?.insertBefore(span.firstChild, span);
|
|
1849
|
+
}
|
|
1850
|
+
span.parentNode?.removeChild(span);
|
|
1851
|
+
}
|
|
1852
|
+
}
|
|
1853
|
+
catch (err) {
|
|
1854
|
+
continue;
|
|
1855
|
+
}
|
|
1856
|
+
}
|
|
1857
|
+
}
|
|
1722
1858
|
hideToolbar(event) {
|
|
1723
1859
|
if (!isPlatformBrowser(this.platformId) || !this.editable)
|
|
1724
1860
|
return;
|
|
1725
1861
|
const clickedInsideEditor = this.editor?.nativeElement.contains(event.target);
|
|
1726
1862
|
const clickedInsideToolbar = this.toolbar?.nativeElement.contains(event.target);
|
|
1727
1863
|
const clickedInsideSuggestion = this.suggestion?.nativeElement.contains(event.target);
|
|
1728
|
-
// Hide the toolbar if the click is outside both the editor and toolbar
|
|
1729
1864
|
if (!clickedInsideEditor && !clickedInsideToolbar) {
|
|
1730
1865
|
this.show = false;
|
|
1731
1866
|
}
|
|
@@ -1736,20 +1871,6 @@ class TextEditorComponent {
|
|
|
1736
1871
|
formatText(command, value = '') {
|
|
1737
1872
|
if (!isPlatformBrowser(this.platformId))
|
|
1738
1873
|
return;
|
|
1739
|
-
// if (command === 'formatBlock') {
|
|
1740
|
-
// const selection = window.getSelection();
|
|
1741
|
-
// if (!selection || selection.rangeCount === 0) return;
|
|
1742
|
-
// const range = selection.getRangeAt(0);
|
|
1743
|
-
// const selectedText = selection.toString();
|
|
1744
|
-
// if (selectedText) {
|
|
1745
|
-
// const newElement = document.createElement(value);
|
|
1746
|
-
// newElement.textContent = selectedText;
|
|
1747
|
-
// range.deleteContents();
|
|
1748
|
-
// range.insertNode(newElement);
|
|
1749
|
-
// this.toolbarData.selectedHeading = value;
|
|
1750
|
-
// return;
|
|
1751
|
-
// }
|
|
1752
|
-
// }
|
|
1753
1874
|
document.execCommand(command, false, value);
|
|
1754
1875
|
if (command === 'bold')
|
|
1755
1876
|
this.toolbarData.isBold = !this.toolbarData.isBold;
|
|
@@ -1757,20 +1878,41 @@ class TextEditorComponent {
|
|
|
1757
1878
|
this.toolbarData.isItalic = !this.toolbarData.isItalic;
|
|
1758
1879
|
if (command === 'underline')
|
|
1759
1880
|
this.toolbarData.isUnderlined = !this.toolbarData.isUnderlined;
|
|
1760
|
-
if (command === 'insertOrderedList' || command === 'insertUnorderedList')
|
|
1881
|
+
if (command === 'insertOrderedList' || command === 'insertUnorderedList') {
|
|
1761
1882
|
this.toolbarData.selectedList = command === this.toolbarData.selectedList ? '' : command;
|
|
1883
|
+
this.updateFSforOL();
|
|
1884
|
+
// Apply current size to the list wrapper and items
|
|
1885
|
+
}
|
|
1762
1886
|
if (command === 'justifyLeft' || command === 'justifyCenter' || command === 'justifyRight')
|
|
1763
1887
|
this.toolbarData.selectedAlignment = command === this.toolbarData.selectedAlignment ? '' : command;
|
|
1764
1888
|
if (command === 'formatBlock')
|
|
1765
1889
|
this.toolbarData.selectedHeading = value;
|
|
1766
1890
|
}
|
|
1891
|
+
updateFSforOL() {
|
|
1892
|
+
const cssSize = this.toolbarData.selectedSize;
|
|
1893
|
+
if (cssSize) {
|
|
1894
|
+
const sel = window.getSelection();
|
|
1895
|
+
if (sel && sel.rangeCount > 0) {
|
|
1896
|
+
const focus = sel.focusNode;
|
|
1897
|
+
const baseEl = (focus.nodeType === Node.ELEMENT_NODE
|
|
1898
|
+
? focus
|
|
1899
|
+
: focus.parentElement) || null;
|
|
1900
|
+
const listEl = baseEl?.closest?.('ol, ul');
|
|
1901
|
+
if (listEl) {
|
|
1902
|
+
listEl.style.fontSize = cssSize;
|
|
1903
|
+
listEl.querySelectorAll('li').forEach(li => {
|
|
1904
|
+
li.style.fontSize = cssSize;
|
|
1905
|
+
});
|
|
1906
|
+
}
|
|
1907
|
+
}
|
|
1908
|
+
}
|
|
1909
|
+
}
|
|
1767
1910
|
setStyleWithCSS(enable) {
|
|
1768
1911
|
try {
|
|
1769
1912
|
document.execCommand('styleWithCSS', false, enable ? 'true' : 'false');
|
|
1770
1913
|
}
|
|
1771
1914
|
catch { /* some engines ignore */ }
|
|
1772
1915
|
}
|
|
1773
|
-
// 2) Map UI sizes -> legacy steps (1..7) used by 'fontSize'
|
|
1774
1916
|
toLegacyFontStep(cssSize) {
|
|
1775
1917
|
const map = {
|
|
1776
1918
|
'': 3,
|
|
@@ -1783,7 +1925,6 @@ class TextEditorComponent {
|
|
|
1783
1925
|
};
|
|
1784
1926
|
return String(map.hasOwnProperty(cssSize) ? map[cssSize] : 3);
|
|
1785
1927
|
}
|
|
1786
|
-
// 3) Optional normalization: convert any <font size="..."> produced by execCommand to <span style="font-size: cssSize">
|
|
1787
1928
|
normalizeFontSizeToCss(cssSize) {
|
|
1788
1929
|
const container = this.editor?.nativeElement;
|
|
1789
1930
|
if (!container)
|
|
@@ -1809,9 +1950,7 @@ class TextEditorComponent {
|
|
|
1809
1950
|
if (range.collapsed)
|
|
1810
1951
|
return;
|
|
1811
1952
|
this.ngZone.runOutsideAngular(() => {
|
|
1812
|
-
// Ask engine to style with CSS where possible (string 'true'/'false')
|
|
1813
1953
|
this.setStyleWithCSS(true);
|
|
1814
|
-
// Apply legacy step, then normalize to exact CSS size
|
|
1815
1954
|
const step = this.toLegacyFontStep(cssSize);
|
|
1816
1955
|
document.execCommand('fontSize', false, step);
|
|
1817
1956
|
this.normalizeFontSizeToCss(cssSize);
|
|
@@ -1833,13 +1972,9 @@ class TextEditorComponent {
|
|
|
1833
1972
|
if (selection.getRangeAt(0).collapsed)
|
|
1834
1973
|
return;
|
|
1835
1974
|
this.ngZone.runOutsideAngular(() => {
|
|
1836
|
-
|
|
1837
|
-
this.
|
|
1838
|
-
|
|
1839
|
-
// (gradient styles use -webkit-text-fill-color: transparent)
|
|
1840
|
-
// this.clearGradientInSelection(); // Uncomment if gradients were used before
|
|
1841
|
-
// Apply solid color to the selection
|
|
1842
|
-
document.execCommand('foreColor', false, color); // sets text color without inserting a span [1]
|
|
1975
|
+
this.setStyleWithCSS(true);
|
|
1976
|
+
// this.unwrapGradientInSelection();
|
|
1977
|
+
document.execCommand('foreColor', false, color);
|
|
1843
1978
|
setTimeout(() => {
|
|
1844
1979
|
this.ngZone.run(() => {
|
|
1845
1980
|
this.toolbarData.selectedColor = color;
|
|
@@ -1917,17 +2052,11 @@ class TextEditorComponent {
|
|
|
1917
2052
|
this.ngZone.runOutsideAngular(() => {
|
|
1918
2053
|
// Restore previous selection first
|
|
1919
2054
|
this.restoreSelection();
|
|
1920
|
-
// Wait a little for browser selection update before saving again and applying gradient
|
|
1921
2055
|
setTimeout(() => {
|
|
1922
|
-
// Save current selection fresh, after restore has settled
|
|
1923
2056
|
this.saveSelection();
|
|
1924
|
-
// Build the gradient string (fixed missing ')', and use 100% end stop)
|
|
1925
2057
|
const gradient = `linear-gradient(to right, ${this.primaryColor} 0%, ${this.secondaryColor} 100%)`;
|
|
1926
|
-
// Apply or update the gradient styling
|
|
1927
2058
|
this.applyGradientToText(gradient);
|
|
1928
|
-
// Restore the selection explicitly again after DOM mutation
|
|
1929
2059
|
this.restoreSelection();
|
|
1930
|
-
// Emit updated HTML content after a short delay inside Angular zone (safe for change detection)
|
|
1931
2060
|
setTimeout(() => {
|
|
1932
2061
|
this.ngZone.run(() => {
|
|
1933
2062
|
this.valueChange.emit(this.editor.nativeElement.innerHTML);
|
|
@@ -1943,7 +2072,6 @@ class TextEditorComponent {
|
|
|
1943
2072
|
const root = this.editor?.nativeElement;
|
|
1944
2073
|
if (!root)
|
|
1945
2074
|
return;
|
|
1946
|
-
// If a gradient span already exists in the editor, just update its background image and stop
|
|
1947
2075
|
const existing = root.querySelector('span[data-gradient="true"]');
|
|
1948
2076
|
if (existing) {
|
|
1949
2077
|
existing.style.backgroundImage = gradientValue;
|
|
@@ -1954,7 +2082,6 @@ class TextEditorComponent {
|
|
|
1954
2082
|
const range = selection.getRangeAt(0);
|
|
1955
2083
|
if (!range || range.collapsed)
|
|
1956
2084
|
return;
|
|
1957
|
-
// Remove previous cleanup to avoid unwrapping; we want to keep the single wrapper
|
|
1958
2085
|
const selectedContent = range.extractContents();
|
|
1959
2086
|
const span = document.createElement('span');
|
|
1960
2087
|
span.setAttribute('data-gradient', 'true'); // mark for future updates
|
|
@@ -2023,7 +2150,7 @@ class TextEditorComponent {
|
|
|
2023
2150
|
return this.value;
|
|
2024
2151
|
}
|
|
2025
2152
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextEditorComponent, deps: [{ token: ElementServiceService }, { token: PLATFORM_ID }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2026
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextEditorComponent, isStandalone: true, selector: "simpo-text-editor", inputs: { value: "value", editable: "editable", sectionId: "sectionId", label: "label" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "editor", first: true, predicate: ["editor"], descendants: true }, { propertyName: "colorPicker", first: true, predicate: ["colorPicker"], descendants: true }, { propertyName: "parentElement", first: true, predicate: ["parentElement"], descendants: true }, { propertyName: "suggestion", first: true, predicate: ["suggestion"], descendants: true }], ngImport: i0, template: "<div class=\"editor-container\" [ngClass]=\"{'border': editable}\" #parentElement\r\n [class.d-none]=\"!editable && getText() == ''\">\r\n <div [contenteditable]=\"editable\" [(ngModel)]=\"value\" class=\"editable-text\" (mouseup)=\"showToolbar($event)\" #editor\r\n (ngModelChange)=\"updateText($event)\" (mousedown)=\"hideToolbar($event)\" (paste)=\"onPaste($event)\">\r\n </div>\r\n\r\n <div class=\"toolbar\" *ngIf=\"editable && show\" [ngStyle]=\"{'top.px': toolbarY}\"\r\n [style.right]=\"rightZero ? '0px' : 'auto'\" [style.left]=\"!rightZero ? '0px' : 'auto'\" #toolbar>\r\n <!-- <select class=\"tool\" (change)=\"onFormatChange($event)\" [(ngModel)]=\"toolbarData.selectedHeading\">\r\n <option value=\"H1\">Heading1</option>\r\n <option value=\"H2\">Heading2</option>\r\n <option value=\"H3\">Heading3</option>\r\n <option value=\"div\">Text</option>\r\n </select> -->\r\n\r\n <button class=\"tool\" (click)=\"formatText('bold')\" [ngClass]=\"{'selectedTool': toolbarData.isBold}\"><mat-icon>\r\n format_bold</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('italic')\" [ngClass]=\"{'selectedTool': toolbarData.isItalic}\"><mat-icon>\r\n format_italic</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('underline')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.isUnderlined}\"><mat-icon> format_underlined</mat-icon></button>\r\n\r\n <select class=\"tool\" (change)=\"changeFontSize($event)\" [(ngModel)]=\"toolbarData.selectedSize\">\r\n <option value=\"\" selected>Default</option>\r\n <option value=\"clamp(0.75rem, 2vw, 1rem)\">Small</option>\r\n <option value=\"clamp(0.75rem, 2vw, 1.25rem)\">Medium</option>\r\n <option value=\"clamp(1rem, 3vw, 1.5rem)\">Semi Large</option>\r\n <option value=\"clamp(1.25rem, 4vw, 2rem)\">Large</option>\r\n <option value=\"clamp(2rem, 5vw, 3rem)\">Extra Large</option>\r\n <option value=\"clamp(3.1rem, 7vw, 4.5rem)\">Huge</option>\r\n </select>\r\n\r\n <button class=\"tool\" (click)=\"formatText('insertOrderedList')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertOrderedList'}\"><mat-icon>format_list_numbered</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('insertUnorderedList')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertUnorderedList'}\"><mat-icon>\r\n format_list_bulleted</mat-icon></button>\r\n\r\n <button class=\"tool\" (click)=\"formatText('justifyLeft')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyLeft'}\"><mat-icon>\r\n format_align_left</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('justifyCenter')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyCenter'}\"><mat-icon>\r\n format_align_center</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('justifyRight')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyRight'}\"><mat-icon>\r\n format_align_right</mat-icon></button>\r\n\r\n <div class=\"colorType\">\r\n <button class=\"solid\" [ngClass]=\"{'solidColorSelected': selectedColorType === 'SOLID'}\"\r\n (click)=\"selectedColorType = 'SOLID'\">Solid</button>\r\n <button class=\"gradient\" [ngClass]=\"{'gradientColorSelected': selectedColorType === 'GRADIENT'}\"\r\n (click)=\"selectedColorType = 'GRADIENT'\">Gradient</button>\r\n </div>\r\n\r\n <button class=\"tool color-picker-btn\" (click)=\"openColorPicker()\" *ngIf=\"selectedColorType === 'SOLID'\">\r\n <mat-icon>format_color_text</mat-icon>\r\n <input type=\"color\" #colorPicker class=\"hidden-color-picker\" (input)=\"changeColor($event)\"\r\n [(ngModel)]=\"toolbarData.selectedColor\">\r\n </button>\r\n\r\n <div class=\"colorType\" *ngIf=\"selectedColorType === 'GRADIENT'\">\r\n <button class=\"tool color-picker-btn\" (click)=\"openColorPicker(); primaryColorPicker.click()\">\r\n <mat-icon [style.color]=\"primaryColor\">format_color_text</mat-icon>\r\n <input type=\"color\" #primaryColorPicker class=\"hidden-color-picker\" (input)=\"changeGradientColor()\"\r\n [(ngModel)]=\"primaryColor\">\r\n </button>\r\n <button class=\"tool color-picker-btn\" (click)=\"openColorPicker(); secondaryColorPicker.click()\">\r\n <mat-icon [style.color]=\"secondaryColor\">format_color_text</mat-icon>\r\n <input type=\"color\" #secondaryColorPicker class=\"hidden-color-picker\" (input)=\"changeGradientColor()\"\r\n [(ngModel)]=\"secondaryColor\">\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"suggestion-box\" [ngStyle]=\"{'top.px': suggestionY}\" [style.right]=\"rightZero ? '0px' : 'auto'\"\r\n [style.left]=\"!rightZero ? '0px' : 'auto'\" *ngIf=\"editable && label && showSuggestion\" #suggestion>\r\n <div class=\"suggestion\" (click)=\"regenerateText()\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/887493c1742273970151Frame%201244831740.png\"\r\n alt=\"\">\r\n <div>\r\n <p class=\"name\">Regenerate Text</p>\r\n <p class=\"desc\">Get a fresh variation of a current text</p>\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}.editor-container{position:relative;display:inline-block;overflow:visible;width:100%}.editor-container div{outline:none}.editable-text{padding:4px;cursor:text}.toolbar{position:absolute;background:#fff;box-shadow:0 2px 5px #0003;display:flex;gap:5px;align-items:center;z-index:100000;box-shadow:#00000029 0 1px 4px;padding:5px 15px;border-radius:22px}.toolbar:hover{border:1px solid #ccc}.toolbar button{background:none;border:none;padding:5px 8px;cursor:pointer;font-weight:700;display:flex;align-items:center}.toolbar button:hover{background:#ddd}.toolbar select{padding:3px;border:none;outline:none;font-size:14px;font-weight:600;cursor:pointer}.toolbar input[type=color]{border:none;width:30px;height:30px;padding:0;cursor:pointer}.color-picker-btn{position:relative;background:none;border:none;cursor:pointer;padding:5px}.hidden-color-picker{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;cursor:pointer}.border,.border:hover{border:1px solid #E9E9E9!important;border-radius:8px}.selectedTool{background:var(--primary-bg-color)!important;color:#fff;border-radius:5px}p{margin-bottom:0rem!important}.suggestion-box{position:absolute;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #0003;z-index:10000;box-shadow:#00000029 0 1px 4px;padding:5px 15px;border-radius:10px}.suggestion{display:flex;gap:10px;width:307px;align-items:center;cursor:pointer}.suggestion img{border-radius:5px;width:32px;height:32px;background:#faf1fc;padding:3px}.suggestion .name{color:#000;font-family:var(--primary-font-family)}.suggestion .desc{color:#000;font-size:12px;color:#918585;font-family:var(--primary-font-family)}.colorType{display:flex;border:1px solid #E9E9E9;border-radius:5px;height:35px}.colorType .solid{border-right:1px solid #E9E9E9;font-size:14px!important;font-family:Mulish}.colorType .gradient{font-size:14px!important;font-family:Mulish}.solidColorSelected{background:var(--primary-bg-color)!important;color:#fff;border-top-left-radius:5px;border-bottom-left-radius:5px}.gradientColorSelected{background:var(--primary-bg-color)!important;color:#fff;border-top-right-radius:5px;border-bottom-right-radius:5px}@media screen and (max-width: 475px){.toolbar{max-width:100%;flex-wrap:wrap;row-gap:15px}.tool{width:max-content!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: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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.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: "directive", type: ContenteditableValueAccessor, selector: "[contenteditable][ngModel]", inputs: ["contenteditable"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
2153
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextEditorComponent, isStandalone: true, selector: "simpo-text-editor", inputs: { value: "value", editable: "editable", sectionId: "sectionId", label: "label" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "editor", first: true, predicate: ["editor"], descendants: true }, { propertyName: "colorPicker", first: true, predicate: ["colorPicker"], descendants: true }, { propertyName: "parentElement", first: true, predicate: ["parentElement"], descendants: true }, { propertyName: "suggestion", first: true, predicate: ["suggestion"], descendants: true }], ngImport: i0, template: "<div class=\"editor-container\" [ngClass]=\"{'border': editable}\" #parentElement\r\n [class.d-none]=\"!editable && getText() == ''\">\r\n <div [contenteditable]=\"editable\" [(ngModel)]=\"value\" class=\"editable-text\" (mouseup)=\"showToolbar($event)\" #editor\r\n (ngModelChange)=\"updateText($event)\" (mousedown)=\"hideToolbar($event)\" (paste)=\"onPaste($event)\">\r\n </div>\r\n\r\n <div class=\"toolbar\" *ngIf=\"editable && show\" [ngStyle]=\"{'top.px': toolbarY}\"\r\n [style.right]=\"rightZero ? '0px' : 'auto'\" [style.left]=\"!rightZero ? '0px' : 'auto'\" #toolbar>\r\n <!-- <select class=\"tool\" (change)=\"onFormatChange($event)\" [(ngModel)]=\"toolbarData.selectedHeading\">\r\n <option value=\"H1\">Heading1</option>\r\n <option value=\"H2\">Heading2</option>\r\n <option value=\"H3\">Heading3</option>\r\n <option value=\"div\">Text</option>\r\n </select> -->\r\n\r\n <button class=\"tool\" (click)=\"formatText('bold')\" [ngClass]=\"{'selectedTool': toolbarData.isBold}\"><mat-icon>\r\n format_bold</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('italic')\" [ngClass]=\"{'selectedTool': toolbarData.isItalic}\"><mat-icon>\r\n format_italic</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('underline')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.isUnderlined}\"\r\n *ngIf=\"selectedColorType === 'SOLID'\"><mat-icon> format_underlined</mat-icon></button>\r\n\r\n <select class=\"tool\" (change)=\"changeFontSize($event)\" [(ngModel)]=\"toolbarData.selectedSize\">\r\n <option value=\"\" selected>Default</option>\r\n <option value=\"clamp(0.75rem, 2vw, 1rem)\">Small</option>\r\n <option value=\"clamp(0.75rem, 2vw, 1.25rem)\">Medium</option>\r\n <option value=\"clamp(1rem, 3vw, 1.5rem)\">Semi Large</option>\r\n <option value=\"clamp(1.25rem, 4vw, 2rem)\">Large</option>\r\n <option value=\"clamp(2rem, 5vw, 3rem)\">Extra Large</option>\r\n <option value=\"clamp(3.1rem, 7vw, 4.5rem)\">Huge</option>\r\n </select>\r\n\r\n <button class=\"tool\" (click)=\"formatText('insertOrderedList')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertOrderedList'}\"><mat-icon>format_list_numbered</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('insertUnorderedList')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertUnorderedList'}\"><mat-icon>\r\n format_list_bulleted</mat-icon></button>\r\n\r\n <button class=\"tool\" (click)=\"formatText('justifyLeft')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyLeft'}\"><mat-icon>\r\n format_align_left</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('justifyCenter')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyCenter'}\"><mat-icon>\r\n format_align_center</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('justifyRight')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyRight'}\"><mat-icon>\r\n format_align_right</mat-icon></button>\r\n\r\n <div class=\"colorType\">\r\n <button class=\"solid\" [ngClass]=\"{'solidColorSelected': selectedColorType === 'SOLID'}\"\r\n (mousedown)=\"rememberSelection($event)\" (click)=\"setColorMode('SOLID')\">\r\n Solid\r\n </button>\r\n <button class=\"gradient\" [ngClass]=\"{'gradientColorSelected': selectedColorType === 'GRADIENT'}\"\r\n (mousedown)=\"rememberSelection($event)\" (click)=\"setColorMode('GRADIENT')\">\r\n Gradient\r\n </button>\r\n </div>\r\n\r\n\r\n <button class=\"tool color-picker-btn\" (click)=\"openColorPicker()\" *ngIf=\"selectedColorType === 'SOLID'\">\r\n <mat-icon>format_color_text</mat-icon>\r\n <input type=\"color\" #colorPicker class=\"hidden-color-picker\" (input)=\"changeColor($event)\"\r\n [(ngModel)]=\"toolbarData.selectedColor\">\r\n </button>\r\n\r\n <div class=\"colorType\" *ngIf=\"selectedColorType === 'GRADIENT'\">\r\n <button class=\"tool color-picker-btn\" (click)=\"openColorPicker(); primaryColorPicker.click()\">\r\n <mat-icon [style.color]=\"primaryColor\">format_color_text</mat-icon>\r\n <input type=\"color\" #primaryColorPicker class=\"hidden-color-picker\" (input)=\"changeGradientColor()\"\r\n [(ngModel)]=\"primaryColor\">\r\n </button>\r\n <button class=\"tool color-picker-btn\" (click)=\"openColorPicker(); secondaryColorPicker.click()\">\r\n <mat-icon [style.color]=\"secondaryColor\">format_color_text</mat-icon>\r\n <input type=\"color\" #secondaryColorPicker class=\"hidden-color-picker\" (input)=\"changeGradientColor()\"\r\n [(ngModel)]=\"secondaryColor\">\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"suggestion-box\" [ngStyle]=\"{'top.px': suggestionY}\" [style.right]=\"rightZero ? '0px' : 'auto'\"\r\n [style.left]=\"!rightZero ? '0px' : 'auto'\" *ngIf=\"editable && label && showSuggestion\" #suggestion>\r\n <div class=\"suggestion\" (click)=\"regenerateText()\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/887493c1742273970151Frame%201244831740.png\"\r\n alt=\"\">\r\n <div>\r\n <p class=\"name\">Regenerate Text</p>\r\n <p class=\"desc\">Get a fresh variation of a current text</p>\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}.editor-container{position:relative;display:inline-block;overflow:visible;width:100%}.editor-container div{outline:none}.editable-text{padding:4px;cursor:text}.toolbar{position:absolute;background:#fff;box-shadow:0 2px 5px #0003;display:flex;gap:5px;align-items:center;z-index:100000;box-shadow:#00000029 0 1px 4px;padding:5px 15px;border-radius:22px}.toolbar:hover{border:1px solid #ccc}.toolbar button{background:none;border:none;padding:5px 8px;cursor:pointer;font-weight:700;display:flex;align-items:center}.toolbar button:hover{background:#ddd}.toolbar select{padding:3px;border:none;outline:none;font-size:14px;font-weight:600;cursor:pointer}.toolbar input[type=color]{border:none;width:30px;height:30px;padding:0;cursor:pointer}.color-picker-btn{position:relative;background:none;border:none;cursor:pointer;padding:5px}.hidden-color-picker{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;cursor:pointer}.border,.border:hover{border:1px solid #E9E9E9!important;border-radius:8px}.selectedTool{background:var(--primary-bg-color)!important;color:#fff;border-radius:5px}p{margin-bottom:0rem!important}.suggestion-box{position:absolute;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #0003;z-index:10000;box-shadow:#00000029 0 1px 4px;padding:5px 15px;border-radius:10px}.suggestion{display:flex;gap:10px;width:307px;align-items:center;cursor:pointer}.suggestion img{border-radius:5px;width:32px;height:32px;background:#faf1fc;padding:3px}.suggestion .name{color:#000;font-family:var(--primary-font-family)}.suggestion .desc{color:#000;font-size:12px;color:#918585;font-family:var(--primary-font-family)}.colorType{display:flex;border:1px solid #E9E9E9;border-radius:5px;height:35px}.colorType .solid{border-right:1px solid #E9E9E9;font-size:14px!important;font-family:Mulish}.colorType .gradient{font-size:14px!important;font-family:Mulish}.solidColorSelected{background:var(--primary-bg-color)!important;color:#fff;border-top-left-radius:5px;border-bottom-left-radius:5px}.gradientColorSelected{background:var(--primary-bg-color)!important;color:#fff;border-top-right-radius:5px;border-bottom-right-radius:5px}@media screen and (max-width: 475px){.toolbar{max-width:100%;flex-wrap:wrap;row-gap:15px}.tool{width:max-content!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: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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.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: "directive", type: ContenteditableValueAccessor, selector: "[contenteditable][ngModel]", inputs: ["contenteditable"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
2027
2154
|
}
|
|
2028
2155
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextEditorComponent, decorators: [{
|
|
2029
2156
|
type: Component,
|
|
@@ -2032,7 +2159,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2032
2159
|
FormsModule,
|
|
2033
2160
|
ContenteditableValueAccessor,
|
|
2034
2161
|
MatIconModule
|
|
2035
|
-
], template: "<div class=\"editor-container\" [ngClass]=\"{'border': editable}\" #parentElement\r\n [class.d-none]=\"!editable && getText() == ''\">\r\n <div [contenteditable]=\"editable\" [(ngModel)]=\"value\" class=\"editable-text\" (mouseup)=\"showToolbar($event)\" #editor\r\n (ngModelChange)=\"updateText($event)\" (mousedown)=\"hideToolbar($event)\" (paste)=\"onPaste($event)\">\r\n </div>\r\n\r\n <div class=\"toolbar\" *ngIf=\"editable && show\" [ngStyle]=\"{'top.px': toolbarY}\"\r\n [style.right]=\"rightZero ? '0px' : 'auto'\" [style.left]=\"!rightZero ? '0px' : 'auto'\" #toolbar>\r\n <!-- <select class=\"tool\" (change)=\"onFormatChange($event)\" [(ngModel)]=\"toolbarData.selectedHeading\">\r\n <option value=\"H1\">Heading1</option>\r\n <option value=\"H2\">Heading2</option>\r\n <option value=\"H3\">Heading3</option>\r\n <option value=\"div\">Text</option>\r\n </select> -->\r\n\r\n <button class=\"tool\" (click)=\"formatText('bold')\" [ngClass]=\"{'selectedTool': toolbarData.isBold}\"><mat-icon>\r\n format_bold</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('italic')\" [ngClass]=\"{'selectedTool': toolbarData.isItalic}\"><mat-icon>\r\n format_italic</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('underline')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.isUnderlined}\"><mat-icon> format_underlined</mat-icon></button>\r\n\r\n <select class=\"tool\" (change)=\"changeFontSize($event)\" [(ngModel)]=\"toolbarData.selectedSize\">\r\n <option value=\"\" selected>Default</option>\r\n <option value=\"clamp(0.75rem, 2vw, 1rem)\">Small</option>\r\n <option value=\"clamp(0.75rem, 2vw, 1.25rem)\">Medium</option>\r\n <option value=\"clamp(1rem, 3vw, 1.5rem)\">Semi Large</option>\r\n <option value=\"clamp(1.25rem, 4vw, 2rem)\">Large</option>\r\n <option value=\"clamp(2rem, 5vw, 3rem)\">Extra Large</option>\r\n <option value=\"clamp(3.1rem, 7vw, 4.5rem)\">Huge</option>\r\n </select>\r\n\r\n <button class=\"tool\" (click)=\"formatText('insertOrderedList')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertOrderedList'}\"><mat-icon>format_list_numbered</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('insertUnorderedList')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertUnorderedList'}\"><mat-icon>\r\n format_list_bulleted</mat-icon></button>\r\n\r\n <button class=\"tool\" (click)=\"formatText('justifyLeft')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyLeft'}\"><mat-icon>\r\n format_align_left</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('justifyCenter')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyCenter'}\"><mat-icon>\r\n format_align_center</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('justifyRight')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyRight'}\"><mat-icon>\r\n format_align_right</mat-icon></button>\r\n\r\n <div class=\"colorType\">\r\n <button class=\"solid\" [ngClass]=\"{'solidColorSelected': selectedColorType === 'SOLID'}\"\r\n (click)=\"
|
|
2162
|
+
], template: "<div class=\"editor-container\" [ngClass]=\"{'border': editable}\" #parentElement\r\n [class.d-none]=\"!editable && getText() == ''\">\r\n <div [contenteditable]=\"editable\" [(ngModel)]=\"value\" class=\"editable-text\" (mouseup)=\"showToolbar($event)\" #editor\r\n (ngModelChange)=\"updateText($event)\" (mousedown)=\"hideToolbar($event)\" (paste)=\"onPaste($event)\">\r\n </div>\r\n\r\n <div class=\"toolbar\" *ngIf=\"editable && show\" [ngStyle]=\"{'top.px': toolbarY}\"\r\n [style.right]=\"rightZero ? '0px' : 'auto'\" [style.left]=\"!rightZero ? '0px' : 'auto'\" #toolbar>\r\n <!-- <select class=\"tool\" (change)=\"onFormatChange($event)\" [(ngModel)]=\"toolbarData.selectedHeading\">\r\n <option value=\"H1\">Heading1</option>\r\n <option value=\"H2\">Heading2</option>\r\n <option value=\"H3\">Heading3</option>\r\n <option value=\"div\">Text</option>\r\n </select> -->\r\n\r\n <button class=\"tool\" (click)=\"formatText('bold')\" [ngClass]=\"{'selectedTool': toolbarData.isBold}\"><mat-icon>\r\n format_bold</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('italic')\" [ngClass]=\"{'selectedTool': toolbarData.isItalic}\"><mat-icon>\r\n format_italic</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('underline')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.isUnderlined}\"\r\n *ngIf=\"selectedColorType === 'SOLID'\"><mat-icon> format_underlined</mat-icon></button>\r\n\r\n <select class=\"tool\" (change)=\"changeFontSize($event)\" [(ngModel)]=\"toolbarData.selectedSize\">\r\n <option value=\"\" selected>Default</option>\r\n <option value=\"clamp(0.75rem, 2vw, 1rem)\">Small</option>\r\n <option value=\"clamp(0.75rem, 2vw, 1.25rem)\">Medium</option>\r\n <option value=\"clamp(1rem, 3vw, 1.5rem)\">Semi Large</option>\r\n <option value=\"clamp(1.25rem, 4vw, 2rem)\">Large</option>\r\n <option value=\"clamp(2rem, 5vw, 3rem)\">Extra Large</option>\r\n <option value=\"clamp(3.1rem, 7vw, 4.5rem)\">Huge</option>\r\n </select>\r\n\r\n <button class=\"tool\" (click)=\"formatText('insertOrderedList')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertOrderedList'}\"><mat-icon>format_list_numbered</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('insertUnorderedList')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertUnorderedList'}\"><mat-icon>\r\n format_list_bulleted</mat-icon></button>\r\n\r\n <button class=\"tool\" (click)=\"formatText('justifyLeft')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyLeft'}\"><mat-icon>\r\n format_align_left</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('justifyCenter')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyCenter'}\"><mat-icon>\r\n format_align_center</mat-icon></button>\r\n <button class=\"tool\" (click)=\"formatText('justifyRight')\"\r\n [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyRight'}\"><mat-icon>\r\n format_align_right</mat-icon></button>\r\n\r\n <div class=\"colorType\">\r\n <button class=\"solid\" [ngClass]=\"{'solidColorSelected': selectedColorType === 'SOLID'}\"\r\n (mousedown)=\"rememberSelection($event)\" (click)=\"setColorMode('SOLID')\">\r\n Solid\r\n </button>\r\n <button class=\"gradient\" [ngClass]=\"{'gradientColorSelected': selectedColorType === 'GRADIENT'}\"\r\n (mousedown)=\"rememberSelection($event)\" (click)=\"setColorMode('GRADIENT')\">\r\n Gradient\r\n </button>\r\n </div>\r\n\r\n\r\n <button class=\"tool color-picker-btn\" (click)=\"openColorPicker()\" *ngIf=\"selectedColorType === 'SOLID'\">\r\n <mat-icon>format_color_text</mat-icon>\r\n <input type=\"color\" #colorPicker class=\"hidden-color-picker\" (input)=\"changeColor($event)\"\r\n [(ngModel)]=\"toolbarData.selectedColor\">\r\n </button>\r\n\r\n <div class=\"colorType\" *ngIf=\"selectedColorType === 'GRADIENT'\">\r\n <button class=\"tool color-picker-btn\" (click)=\"openColorPicker(); primaryColorPicker.click()\">\r\n <mat-icon [style.color]=\"primaryColor\">format_color_text</mat-icon>\r\n <input type=\"color\" #primaryColorPicker class=\"hidden-color-picker\" (input)=\"changeGradientColor()\"\r\n [(ngModel)]=\"primaryColor\">\r\n </button>\r\n <button class=\"tool color-picker-btn\" (click)=\"openColorPicker(); secondaryColorPicker.click()\">\r\n <mat-icon [style.color]=\"secondaryColor\">format_color_text</mat-icon>\r\n <input type=\"color\" #secondaryColorPicker class=\"hidden-color-picker\" (input)=\"changeGradientColor()\"\r\n [(ngModel)]=\"secondaryColor\">\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"suggestion-box\" [ngStyle]=\"{'top.px': suggestionY}\" [style.right]=\"rightZero ? '0px' : 'auto'\"\r\n [style.left]=\"!rightZero ? '0px' : 'auto'\" *ngIf=\"editable && label && showSuggestion\" #suggestion>\r\n <div class=\"suggestion\" (click)=\"regenerateText()\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/887493c1742273970151Frame%201244831740.png\"\r\n alt=\"\">\r\n <div>\r\n <p class=\"name\">Regenerate Text</p>\r\n <p class=\"desc\">Get a fresh variation of a current text</p>\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}.editor-container{position:relative;display:inline-block;overflow:visible;width:100%}.editor-container div{outline:none}.editable-text{padding:4px;cursor:text}.toolbar{position:absolute;background:#fff;box-shadow:0 2px 5px #0003;display:flex;gap:5px;align-items:center;z-index:100000;box-shadow:#00000029 0 1px 4px;padding:5px 15px;border-radius:22px}.toolbar:hover{border:1px solid #ccc}.toolbar button{background:none;border:none;padding:5px 8px;cursor:pointer;font-weight:700;display:flex;align-items:center}.toolbar button:hover{background:#ddd}.toolbar select{padding:3px;border:none;outline:none;font-size:14px;font-weight:600;cursor:pointer}.toolbar input[type=color]{border:none;width:30px;height:30px;padding:0;cursor:pointer}.color-picker-btn{position:relative;background:none;border:none;cursor:pointer;padding:5px}.hidden-color-picker{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;cursor:pointer}.border,.border:hover{border:1px solid #E9E9E9!important;border-radius:8px}.selectedTool{background:var(--primary-bg-color)!important;color:#fff;border-radius:5px}p{margin-bottom:0rem!important}.suggestion-box{position:absolute;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #0003;z-index:10000;box-shadow:#00000029 0 1px 4px;padding:5px 15px;border-radius:10px}.suggestion{display:flex;gap:10px;width:307px;align-items:center;cursor:pointer}.suggestion img{border-radius:5px;width:32px;height:32px;background:#faf1fc;padding:3px}.suggestion .name{color:#000;font-family:var(--primary-font-family)}.suggestion .desc{color:#000;font-size:12px;color:#918585;font-family:var(--primary-font-family)}.colorType{display:flex;border:1px solid #E9E9E9;border-radius:5px;height:35px}.colorType .solid{border-right:1px solid #E9E9E9;font-size:14px!important;font-family:Mulish}.colorType .gradient{font-size:14px!important;font-family:Mulish}.solidColorSelected{background:var(--primary-bg-color)!important;color:#fff;border-top-left-radius:5px;border-bottom-left-radius:5px}.gradientColorSelected{background:var(--primary-bg-color)!important;color:#fff;border-top-right-radius:5px;border-bottom-right-radius:5px}@media screen and (max-width: 475px){.toolbar{max-width:100%;flex-wrap:wrap;row-gap:15px}.tool{width:max-content!important}}\n"] }]
|
|
2036
2163
|
}], ctorParameters: () => [{ type: ElementServiceService }, { type: Object, decorators: [{
|
|
2037
2164
|
type: Inject,
|
|
2038
2165
|
args: [PLATFORM_ID]
|
|
@@ -4267,15 +4394,18 @@ class BackgroundDirective {
|
|
|
4267
4394
|
this.el = el;
|
|
4268
4395
|
this.eventService = eventService;
|
|
4269
4396
|
this.scrollValue = 0;
|
|
4397
|
+
this.videoElementId = ``;
|
|
4270
4398
|
if (this.eventEmmitter) {
|
|
4271
4399
|
this.eventEmmitter.unsubscribe();
|
|
4272
4400
|
}
|
|
4273
4401
|
this.eventEmmitter = this.eventService.backgroundImageChangeCheck.subscribe((res) => {
|
|
4402
|
+
this.videoElementId = `simpo-bg-video-${this.el?.nativeElement?.id}`;
|
|
4274
4403
|
if (this.el.nativeElement.id === res.id || res.globalThemeChange) {
|
|
4275
4404
|
if (res.data?.showImage && this?.scrollValue == 0) {
|
|
4276
4405
|
if (this.simpoBackground?.image.includes('.mp4')) {
|
|
4277
4406
|
this.el.nativeElement.style.setProperty('background-image', '');
|
|
4278
4407
|
const videoElement = document.createElement('video');
|
|
4408
|
+
videoElement.id = this.videoElementId;
|
|
4279
4409
|
videoElement.src = this.simpoBackground.image;
|
|
4280
4410
|
videoElement.autoplay = true;
|
|
4281
4411
|
videoElement.loop = true;
|
|
@@ -4294,8 +4424,8 @@ class BackgroundDirective {
|
|
|
4294
4424
|
this.el.nativeElement.appendChild(videoElement);
|
|
4295
4425
|
return;
|
|
4296
4426
|
}
|
|
4297
|
-
if (this.el.nativeElement.querySelector(
|
|
4298
|
-
this.el.nativeElement.removeChild(this.el.nativeElement.querySelector(
|
|
4427
|
+
if (this.videoElementId && this.el.nativeElement.querySelector(`#${this.videoElementId}`))
|
|
4428
|
+
this.el.nativeElement.removeChild(this.el.nativeElement.querySelector(`#${this.videoElementId}`));
|
|
4299
4429
|
this.el.nativeElement.style.setProperty('background-image', `url(${res.data.image})`);
|
|
4300
4430
|
this.el.nativeElement.style.setProperty('background-position', `${res.data.position?.x}% ${res.data.position?.y}%`);
|
|
4301
4431
|
this.el.nativeElement.style.setProperty('background-repeat', `no-repeat`);
|
|
@@ -4303,8 +4433,8 @@ class BackgroundDirective {
|
|
|
4303
4433
|
this.el.nativeElement.style.setProperty('color', this.getTextColor(res.data?.color));
|
|
4304
4434
|
}
|
|
4305
4435
|
else {
|
|
4306
|
-
if (this.el.nativeElement.querySelector(
|
|
4307
|
-
this.el.nativeElement.removeChild(this.el.nativeElement.querySelector(
|
|
4436
|
+
if (this.videoElementId && this.el.nativeElement.querySelector(`#${this.videoElementId}`))
|
|
4437
|
+
this.el.nativeElement.removeChild(this.el.nativeElement.querySelector(`#${this.videoElementId}`));
|
|
4308
4438
|
if (this.simpoBackground?.backgroundType === 'Gradient') {
|
|
4309
4439
|
const direction = GradientDirection[this.simpoBackground.backgroundGradientDirection || GradientDirection.DOWN];
|
|
4310
4440
|
const gradientColor = direction != GradientDirection.DOWN ? `linear-gradient(${direction},${this.simpoBackground.color},${this.simpoBackground.secondaryColor})` :
|
|
@@ -4366,29 +4496,30 @@ class BackgroundDirective {
|
|
|
4366
4496
|
ngOnChanges(change) {
|
|
4367
4497
|
this.el.nativeElement.style.setProperty('color', this.getTextColor(this.simpoBackground?.color ? this.simpoBackground?.color : '#ffffff'));
|
|
4368
4498
|
if (this.simpoBackground?.showImage) {
|
|
4369
|
-
if (this.simpoBackground?.image.includes('.mp4')) {
|
|
4370
|
-
|
|
4371
|
-
|
|
4372
|
-
|
|
4373
|
-
|
|
4374
|
-
|
|
4375
|
-
|
|
4376
|
-
|
|
4377
|
-
|
|
4378
|
-
|
|
4379
|
-
|
|
4380
|
-
|
|
4381
|
-
|
|
4382
|
-
|
|
4383
|
-
|
|
4384
|
-
|
|
4385
|
-
|
|
4386
|
-
|
|
4387
|
-
|
|
4388
|
-
|
|
4389
|
-
|
|
4390
|
-
|
|
4391
|
-
|
|
4499
|
+
// if (this.simpoBackground?.image.includes('.mp4')) {
|
|
4500
|
+
// this.el.nativeElement.style.setProperty('background-image', '');
|
|
4501
|
+
// const videoElement = document.createElement('video');
|
|
4502
|
+
// videoElement.id = this.videoElementId;
|
|
4503
|
+
// videoElement.src = this.simpoBackground.image;
|
|
4504
|
+
// videoElement.autoplay = true;
|
|
4505
|
+
// videoElement.loop = true;
|
|
4506
|
+
// videoElement.muted = true;
|
|
4507
|
+
// videoElement.playsInline = true;
|
|
4508
|
+
// // Style the video element
|
|
4509
|
+
// videoElement.style.position = 'absolute';
|
|
4510
|
+
// videoElement.style.right = '0';
|
|
4511
|
+
// videoElement.style.bottom = '0';
|
|
4512
|
+
// videoElement.style.minWidth = '100%';
|
|
4513
|
+
// videoElement.style.minHeight = '100%';
|
|
4514
|
+
// videoElement.style.width = '100%';
|
|
4515
|
+
// videoElement.style.height = '100%';
|
|
4516
|
+
// videoElement.style.zIndex = '-1';
|
|
4517
|
+
// videoElement.style.objectFit = 'cover';
|
|
4518
|
+
// this.el.nativeElement.appendChild(videoElement);
|
|
4519
|
+
// return;
|
|
4520
|
+
// }
|
|
4521
|
+
if (this.videoElementId && this.el.nativeElement.querySelector(`#${this.videoElementId}`))
|
|
4522
|
+
this.el.nativeElement.removeChild(this.el.nativeElement.querySelector(`#${this.videoElementId}`));
|
|
4392
4523
|
this.el.nativeElement.style.setProperty('background-image', `url(${this.simpoBackground.image})`);
|
|
4393
4524
|
this.el.nativeElement.style.setProperty('background-position', `${this.simpoBackground.position?.x}% ${this.simpoBackground.position?.y}%`);
|
|
4394
4525
|
this.el.nativeElement.style.setProperty('background-repeat', `no-repeat`);
|
|
@@ -4396,8 +4527,8 @@ class BackgroundDirective {
|
|
|
4396
4527
|
this.el.nativeElement.style.setProperty('color', this.getTextColor(this.simpoBackground?.color ? this.simpoBackground?.color : '#ffffff'));
|
|
4397
4528
|
}
|
|
4398
4529
|
else {
|
|
4399
|
-
if (this.el.nativeElement.querySelector(
|
|
4400
|
-
this.el.nativeElement.removeChild(this.el.nativeElement.querySelector(
|
|
4530
|
+
if (this.videoElementId && this.el.nativeElement.querySelector(`#${this.videoElementId}`))
|
|
4531
|
+
this.el.nativeElement.removeChild(this.el.nativeElement.querySelector(`#${this.videoElementId}`));
|
|
4401
4532
|
if (this.simpoBackground?.backgroundType === 'Gradient' && this.simpoBackground?.backgroundAnimation == 'NONE') {
|
|
4402
4533
|
const direction = GradientDirection[this.simpoBackground.backgroundGradientDirection || GradientDirection.DOWN];
|
|
4403
4534
|
const gradientColor = direction != GradientDirection.DOWN ? `linear-gradient(${direction},${this.simpoBackground.color},${this.simpoBackground.secondaryColor})` :
|
|
@@ -4406,7 +4537,8 @@ class BackgroundDirective {
|
|
|
4406
4537
|
this.el.nativeElement.style.setProperty('color', this.getTextColor(gradientColor));
|
|
4407
4538
|
return;
|
|
4408
4539
|
}
|
|
4409
|
-
|
|
4540
|
+
if (this.videoElementId && this.el.nativeElement.querySelector(`#${this.videoElementId}`))
|
|
4541
|
+
this.el.nativeElement.removeChild(this.el.nativeElement.querySelector(`#${this.videoElementId}`));
|
|
4410
4542
|
this.el.nativeElement.style.setProperty('background-color', this.simpoBackground?.color);
|
|
4411
4543
|
this.el.nativeElement.style.setProperty('background-image', ``);
|
|
4412
4544
|
if (this.simpoBackground?.backgroundAnimation === 'DANCING_DOTS') {
|
|
@@ -9909,7 +10041,7 @@ class ContactUsComponent extends BaseSection {
|
|
|
9909
10041
|
return this.styles?.layout?.align === 'left' ? 'justify-content-start' : this.styles?.layout?.align === 'right' ? 'justify-content-end' : 'justify-content-center';
|
|
9910
10042
|
}
|
|
9911
10043
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContactUsComponent, deps: [{ token: EventsService }, { token: PLATFORM_ID }, { token: i2$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9912
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ContactUsComponent, isStandalone: true, selector: "simpo-contact-us", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "screenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\">\r\n <div class=\"main-container\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [attr.style]=\"customClass\">\r\n <div *ngIf=\"content?.image?.showImage === false\" class=\"w-100\" [id]=\"data?.id\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row g-5 my-0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"col-12 d-flex justify-content-evenly mt-3\" [class.gap-3]=\"screenWidth > 475\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{'align-items-center text-center': styles?.positionLayout?.value === 'top'}\">\r\n <div class=\"d-flex flex-column col-5 content-side\"\r\n [class.col-lg-8]=\"!content?.image?.showImage && styles?.positionLayout?.value === 'top'\">\r\n <div *ngFor=\"let item of content?.inputText\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"col-5 d-flex flex-wrap \" style=\"gap: 1rem;height: fit-content;\" [ngStyle]=\"getCardStyle()\"\r\n [class.col-lg-8]=\"!content?.image?.showImage && styles?.positionLayout?.value === 'top'\">\r\n <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\"\r\n [feild]=\"feild\"\r\n [bgColor]=\"styles?.contentBackground?.display ? styles?.contentBackground?.style == 'black' ? '#000000' : '#ffffff' : styles?.background?.color\"\r\n [sectionId]=\"data?.id\" *ngIf=\"canShowContactField(feild)\"></simpo-input-fields>\r\n </ng-container>\r\n <div class=\"custom-btn d-flex w-100\" [class]=\"getAlignment()\">\r\n <button class=\"send-btn\" [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)=\"buttonClick()\">\r\n <div>{{button?.content?.label}}</div>\r\n <div class=\"btn-icon\" *ngIf=\"button?.content?.showIcon\" [ngStyle]=\"{\r\n 'background': button?.styles?.textColor,\r\n 'mask-image': 'url(' + button?.content?.icon?.url + ')',\r\n 'mask-repeat': 'no-repeat',\r\n 'mask-size': 'cover',\r\n 'width': '25px',\r\n 'height': '25px',\r\n }\">\r\n </div>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"content?.image?.showImage\" class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n <div class=\"gap-5 mobile-display\" [id]=\"data?.id\" [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', 'align-items-center text-center': styles?.positionLayout?.value === 'top'}\">\r\n <div class=\"col-10 col-sm-8 col-lg-6 mobile-image\" *ngIf=\"content?.image?.showImage\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [id]=\"data?.id\" [appImageEditor]=\"edit || false\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [simpoImageDirective]=\"styles?.image\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column mobile-text\" style=\"width: 46%;\"\r\n [ngClass]=\"{'pt-5': styles?.positionLayout?.value === 'top'}\" [id]=\"data?.id\" [ngStyle]=\"getCardStyle()\">\r\n <div class=\"d-flex flex-column content-side\">\r\n <div *ngFor=\"let item of content?.inputText\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-start align-items-end\" style=\"gap: 1rem;height: fit-content;\">\r\n <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\"\r\n [feild]=\"feild\" [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\"></simpo-input-fields>\r\n </ng-container>\r\n </div>\r\n <div class=\"custom-btn d-flex w-100\" [class]=\"getAlignment()\">\r\n <button class=\"send-btn p-2 gap-2\" [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 ?? ''\"\r\n [class.flex-row-reverse]=\"button?.content?.icon?.iconPosition === 'left'\" (click)=\"buttonClick()\">\r\n <div>{{button?.content?.label}}</div>\r\n <div class=\"btn-icon\" *ngIf=\"button?.content?.showIcon\" [ngStyle]=\"{\r\n 'background': button?.styles?.textColor,\r\n 'mask-image': 'url(' + button?.content?.icon?.url + ')',\r\n 'mask-repeat': 'no-repeat',\r\n 'mask-size': 'cover',\r\n 'width': '25px',\r\n 'height': '25px',\r\n }\">\r\n </div>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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</div>", styles: [".send-btn{font-size:16px!important;font-weight:600;padding:.5rem 2rem!important;display:inline-flex;align-items:center;justify-content:center;width:max-content!important;margin-top:1rem;min-width:25%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.w-100{width:100%}.custom-btn{white-space:nowrap}@media only screen and (max-width: 475px){.col-12{display:flex;flex-direction:column}.custom-btn{width:50%;white-space:nowrap}.pt-5{width:100%}.pt-5 div{font-size:24px}.col-5{width:100%}.send-btn{margin-left:0}.mobile-display{display:flex!important;flex-direction:column!important}.mobile-image{width:100%!important;padding:0!important}.mobile-text{width:100%!important;margin-top:3rem}.mobile-text .d-flex div{font-size:24px}}.gap-3{gap:3rem!important}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: InputFieldsComponent, selector: "simpo-input-fields", inputs: ["feild", "opacity", "bgColor", "sectionId"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type:
|
|
10044
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ContactUsComponent, isStandalone: true, selector: "simpo-contact-us", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "screenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\">\r\n <div class=\"main-container\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [attr.style]=\"customClass\">\r\n <div *ngIf=\"content?.image?.showImage === false\" class=\"w-100\" [id]=\"data?.id\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row g-5 my-0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"col-12 d-flex justify-content-evenly mt-3\" [class.gap-3]=\"screenWidth > 475\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{'align-items-center text-center': styles?.positionLayout?.value === 'top'}\">\r\n <div class=\"d-flex flex-column col-5 content-side\"\r\n [class.col-lg-8]=\"!content?.image?.showImage && styles?.positionLayout?.value === 'top'\">\r\n <div *ngFor=\"let item of content?.inputText\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"col-5 d-flex flex-wrap \" style=\"gap: 1rem;height: fit-content;\" [ngStyle]=\"getCardStyle()\"\r\n [class.col-lg-8]=\"!content?.image?.showImage && styles?.positionLayout?.value === 'top'\">\r\n <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\"\r\n [feild]=\"feild\"\r\n [bgColor]=\"styles?.contentBackground?.display ? styles?.contentBackground?.style == 'black' ? '#000000' : '#ffffff' : styles?.background?.color\"\r\n [sectionId]=\"data?.id\" *ngIf=\"canShowContactField(feild)\"></simpo-input-fields>\r\n </ng-container>\r\n <div class=\"custom-btn d-flex w-100\" [class]=\"getAlignment()\">\r\n <button class=\"send-btn\" [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)=\"buttonClick()\">\r\n <div>{{button?.content?.label}}</div>\r\n <div class=\"btn-icon\" *ngIf=\"button?.content?.showIcon\" [ngStyle]=\"{\r\n 'background': button?.styles?.textColor,\r\n 'mask-image': 'url(' + button?.content?.icon?.url + ')',\r\n 'mask-repeat': 'no-repeat',\r\n 'mask-size': 'cover',\r\n 'width': '25px',\r\n 'height': '25px',\r\n }\">\r\n </div>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"content?.image?.showImage\" class=\"col-xxl-8 py-5 w-100\" [id]=\"data?.id\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"gap-5 mobile-display\" [id]=\"data?.id\" [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', 'align-items-center text-center': styles?.positionLayout?.value === 'top'}\">\r\n <div class=\"col-10 col-sm-8 col-lg-6 mobile-image\" *ngIf=\"content?.image?.showImage\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [id]=\"data?.id\" [appImageEditor]=\"edit || false\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [simpoImageDirective]=\"styles?.image\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column mobile-text\" style=\"width: 46%;\"\r\n [ngClass]=\"{'pt-5': styles?.positionLayout?.value === 'top'}\" [id]=\"data?.id\" [ngStyle]=\"getCardStyle()\">\r\n <div class=\"d-flex flex-column content-side\">\r\n <div *ngFor=\"let item of content?.inputText\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-start align-items-end\" style=\"gap: 1rem;height: fit-content;\">\r\n <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\"\r\n [feild]=\"feild\" [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\"></simpo-input-fields>\r\n </ng-container>\r\n </div>\r\n <div class=\"custom-btn d-flex w-100\" [class]=\"getAlignment()\">\r\n <button class=\"send-btn gap-2\" [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 ?? ''\"\r\n [class.flex-row-reverse]=\"button?.content?.icon?.iconPosition === 'left'\" (click)=\"buttonClick()\">\r\n <div>{{button?.content?.label}}</div>\r\n <div class=\"btn-icon\" *ngIf=\"button?.content?.showIcon\" [ngStyle]=\"{\r\n 'background': button?.styles?.textColor,\r\n 'mask-image': 'url(' + button?.content?.icon?.url + ')',\r\n 'mask-repeat': 'no-repeat',\r\n 'mask-size': 'cover',\r\n 'width': '25px',\r\n 'height': '25px',\r\n }\">\r\n </div>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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</div>", styles: [".send-btn{font-size:16px!important;font-weight:600;padding:.5rem 2rem!important;display:inline-flex;align-items:center;justify-content:center;width:max-content!important;margin-top:1rem;min-width:20%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.w-100{width:100%}.custom-btn{white-space:nowrap}@media only screen and (max-width: 475px){.col-12{display:flex;flex-direction:column}.custom-btn{width:50%;white-space:nowrap}.pt-5{width:100%}.pt-5 div{font-size:24px}.col-5{width:100%}.send-btn{margin-left:0}.mobile-display{display:flex!important;flex-direction:column!important}.mobile-image{width:100%!important;padding:0!important}.mobile-text{width:100%!important;margin-top:3rem}.mobile-text .d-flex div{font-size:24px}}.gap-3{gap:3rem!important}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: InputFieldsComponent, selector: "simpo-input-fields", inputs: ["feild", "opacity", "bgColor", "sectionId"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type:
|
|
9913
10045
|
//directive
|
|
9914
10046
|
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: 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: "ngmodule", type: MatSnackBarModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }] }); }
|
|
9915
10047
|
}
|
|
@@ -9948,7 +10080,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
9948
10080
|
SimpoContainerAligment,
|
|
9949
10081
|
ButtonEditorDirective,
|
|
9950
10082
|
ImageEditorDirective
|
|
9951
|
-
], template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\">\r\n <div class=\"main-container\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [attr.style]=\"customClass\">\r\n <div *ngIf=\"content?.image?.showImage === false\" class=\"w-100\" [id]=\"data?.id\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row g-5 my-0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"col-12 d-flex justify-content-evenly mt-3\" [class.gap-3]=\"screenWidth > 475\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{'align-items-center text-center': styles?.positionLayout?.value === 'top'}\">\r\n <div class=\"d-flex flex-column col-5 content-side\"\r\n [class.col-lg-8]=\"!content?.image?.showImage && styles?.positionLayout?.value === 'top'\">\r\n <div *ngFor=\"let item of content?.inputText\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"col-5 d-flex flex-wrap \" style=\"gap: 1rem;height: fit-content;\" [ngStyle]=\"getCardStyle()\"\r\n [class.col-lg-8]=\"!content?.image?.showImage && styles?.positionLayout?.value === 'top'\">\r\n <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\"\r\n [feild]=\"feild\"\r\n [bgColor]=\"styles?.contentBackground?.display ? styles?.contentBackground?.style == 'black' ? '#000000' : '#ffffff' : styles?.background?.color\"\r\n [sectionId]=\"data?.id\" *ngIf=\"canShowContactField(feild)\"></simpo-input-fields>\r\n </ng-container>\r\n <div class=\"custom-btn d-flex w-100\" [class]=\"getAlignment()\">\r\n <button class=\"send-btn\" [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)=\"buttonClick()\">\r\n <div>{{button?.content?.label}}</div>\r\n <div class=\"btn-icon\" *ngIf=\"button?.content?.showIcon\" [ngStyle]=\"{\r\n 'background': button?.styles?.textColor,\r\n 'mask-image': 'url(' + button?.content?.icon?.url + ')',\r\n 'mask-repeat': 'no-repeat',\r\n 'mask-size': 'cover',\r\n 'width': '25px',\r\n 'height': '25px',\r\n }\">\r\n </div>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"content?.image?.showImage\" class=\"col-xxl-8
|
|
10083
|
+
], template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\">\r\n <div class=\"main-container\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [attr.style]=\"customClass\">\r\n <div *ngIf=\"content?.image?.showImage === false\" class=\"w-100\" [id]=\"data?.id\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row g-5 my-0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"col-12 d-flex justify-content-evenly mt-3\" [class.gap-3]=\"screenWidth > 475\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{'align-items-center text-center': styles?.positionLayout?.value === 'top'}\">\r\n <div class=\"d-flex flex-column col-5 content-side\"\r\n [class.col-lg-8]=\"!content?.image?.showImage && styles?.positionLayout?.value === 'top'\">\r\n <div *ngFor=\"let item of content?.inputText\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"col-5 d-flex flex-wrap \" style=\"gap: 1rem;height: fit-content;\" [ngStyle]=\"getCardStyle()\"\r\n [class.col-lg-8]=\"!content?.image?.showImage && styles?.positionLayout?.value === 'top'\">\r\n <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\"\r\n [feild]=\"feild\"\r\n [bgColor]=\"styles?.contentBackground?.display ? styles?.contentBackground?.style == 'black' ? '#000000' : '#ffffff' : styles?.background?.color\"\r\n [sectionId]=\"data?.id\" *ngIf=\"canShowContactField(feild)\"></simpo-input-fields>\r\n </ng-container>\r\n <div class=\"custom-btn d-flex w-100\" [class]=\"getAlignment()\">\r\n <button class=\"send-btn\" [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)=\"buttonClick()\">\r\n <div>{{button?.content?.label}}</div>\r\n <div class=\"btn-icon\" *ngIf=\"button?.content?.showIcon\" [ngStyle]=\"{\r\n 'background': button?.styles?.textColor,\r\n 'mask-image': 'url(' + button?.content?.icon?.url + ')',\r\n 'mask-repeat': 'no-repeat',\r\n 'mask-size': 'cover',\r\n 'width': '25px',\r\n 'height': '25px',\r\n }\">\r\n </div>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"content?.image?.showImage\" class=\"col-xxl-8 py-5 w-100\" [id]=\"data?.id\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"gap-5 mobile-display\" [id]=\"data?.id\" [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', 'align-items-center text-center': styles?.positionLayout?.value === 'top'}\">\r\n <div class=\"col-10 col-sm-8 col-lg-6 mobile-image\" *ngIf=\"content?.image?.showImage\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [id]=\"data?.id\" [appImageEditor]=\"edit || false\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [simpoImageDirective]=\"styles?.image\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column mobile-text\" style=\"width: 46%;\"\r\n [ngClass]=\"{'pt-5': styles?.positionLayout?.value === 'top'}\" [id]=\"data?.id\" [ngStyle]=\"getCardStyle()\">\r\n <div class=\"d-flex flex-column content-side\">\r\n <div *ngFor=\"let item of content?.inputText\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-start align-items-end\" style=\"gap: 1rem;height: fit-content;\">\r\n <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\"\r\n [feild]=\"feild\" [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\"></simpo-input-fields>\r\n </ng-container>\r\n </div>\r\n <div class=\"custom-btn d-flex w-100\" [class]=\"getAlignment()\">\r\n <button class=\"send-btn gap-2\" [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 ?? ''\"\r\n [class.flex-row-reverse]=\"button?.content?.icon?.iconPosition === 'left'\" (click)=\"buttonClick()\">\r\n <div>{{button?.content?.label}}</div>\r\n <div class=\"btn-icon\" *ngIf=\"button?.content?.showIcon\" [ngStyle]=\"{\r\n 'background': button?.styles?.textColor,\r\n 'mask-image': 'url(' + button?.content?.icon?.url + ')',\r\n 'mask-repeat': 'no-repeat',\r\n 'mask-size': 'cover',\r\n 'width': '25px',\r\n 'height': '25px',\r\n }\">\r\n </div>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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</div>", styles: [".send-btn{font-size:16px!important;font-weight:600;padding:.5rem 2rem!important;display:inline-flex;align-items:center;justify-content:center;width:max-content!important;margin-top:1rem;min-width:20%}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.w-100{width:100%}.custom-btn{white-space:nowrap}@media only screen and (max-width: 475px){.col-12{display:flex;flex-direction:column}.custom-btn{width:50%;white-space:nowrap}.pt-5{width:100%}.pt-5 div{font-size:24px}.col-5{width:100%}.send-btn{margin-left:0}.mobile-display{display:flex!important;flex-direction:column!important}.mobile-image{width:100%!important;padding:0!important}.mobile-text{width:100%!important;margin-top:3rem}.mobile-text .d-flex div{font-size:24px}}.gap-3{gap:3rem!important}\n"] }]
|
|
9952
10084
|
}], ctorParameters: () => [{ type: EventsService }, { type: Object, decorators: [{
|
|
9953
10085
|
type: Inject,
|
|
9954
10086
|
args: [PLATFORM_ID]
|
|
@@ -12012,7 +12144,7 @@ class TestimonialFullwidthComponent extends BaseSection {
|
|
|
12012
12144
|
return this.content?.listItem?.data?.length || 0;
|
|
12013
12145
|
}
|
|
12014
12146
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TestimonialFullwidthComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12015
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TestimonialFullwidthComponent, isStandalone: true, selector: "simpo-testimonial-fullwidth", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\" [simpoBorder]=\"style?.border\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\" data-bs-interval=\"10000\">\r\n <!-- data-bs-ride=\"carousel\" -->\r\n <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol>\r\n <div class=\"carousel-inner content-side overflow-visible\">\r\n <div class=\"single_card carousel-item\"\r\n *ngFor=\"let item of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n <!-- this is testimonial cards start-->\r\n\r\n <div class=\"main-section row\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"style?.positionLayout\">\r\n <div class=\"left setHeight\">\r\n <div class=\"heading\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"subtext\">\r\n <simpo-text-editor [(value)]=\"item.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"testimonial-img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\">\r\n <img loading=\"lazy\" [src]=\"item.image.url\" [alt]=\"item.image.altText\" class=\"person-img\"\r\n [id]=\"data?.id\" [simpoObjectPosition]=\"item?.image?.position\"\r\n [simpoCorner]=\"style?.corners\" [appImageEditor]=\"edit || false\" [imageData]=\"item.image\" [sectionId]=\"data?.id\">\r\n <div class=\"person-details\">\r\n <div style=\"z-index: 100;\">\r\n <!-- <div class=\"person-name\"\r\n [ngClass]=\"item.inputText[2].label === 'Person-Name' ? 'body-large' : 'heading-large '\"[innerHtml]=\"item.inputText[2].value | sanitizeHtml\">\r\n\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n <!-- <div class=\"person-type\"\r\n [ngClass]=\"item.inputText[3].label === 'Person-Type' ? 'body-large' : 'heading-large lh-2 mb-3'\"\r\n [innerHtml]=\"item.inputText[3].value | sanitizeHtml\">\r\n\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- this is testimonial cards start-->\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n data-bs-slide=\"prev\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n data-bs-slide=\"next\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>\r\n", styles: [".carousel-control-prev,.carousel-control-next{position:absolute!important}.carousel{position:relative}.total-container{height:auto;position:relative}.overflow-visible{overflow:visible}.setHeight{height:40vh;max-height:40vh;overflow-y:scroll}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.single_card{margin-top:10px}.main-section{display:flex;justify-content:space-between;margin:auto;align-items:center;width:80%}.left{width:65%;display:flex;flex-direction:column;justify-content:left}.heading{padding:20px 0 6px;width:90%}.heading-large{font-size:2.5rem;font-weight:700;line-height:3rem}.subtext{font-size:14px;font-weight:400;line-height:1.6;width:90%;margin-top:10px}.body-large{font-size:16px;font-weight:400;font-family:desc}.testimonial-img{position:relative}.right{width:28%}.person-img{width:100%;height:100%;object-fit:cover;vertical-align:middle}.right .person-details{background:#0000001a;padding:10px 8px 10px 20px;border-radius:5px 5px 15px 15px;width:100%;height:85px;display:flex;align-items:center;color:#fff;position:absolute;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.99),transparent 124%)}.person-name{font-size:16px;font-weight:500;color:#fff!important}.carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e\")}.carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e\")}.person-type{font-size:16px;font-weight:400;color:#fff!important;display:flex}.person-type .body-large{color:#ffffffbd;font-size:14px;font-weight:400}@media only screen and (min-width: 375px) and (max-width: 500px){.main-section{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 275px) and (max-width: 500px){.main-section{width:100%!important;flex-direction:column-reverse!important}.left{width:100%!important;display:flex;flex-direction:column}.heading,.subtext{width:100%!important}.right{width:95%!important;display:flex;flex-direction:column}.carousel-control-prev,.carousel-control-next{width:8%!important}.container-fluid{padding:unset!important}}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-30px!important}@media screen and (min-width: 501px){.carousel-control-prev,.carousel-control-next{width:5%!important}}.previous-icon{position:absolute;height:45px}li{list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type:
|
|
12147
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TestimonialFullwidthComponent, isStandalone: true, selector: "simpo-testimonial-fullwidth", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoBorder]=\"style?.border\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\" data-bs-interval=\"10000\"\r\n >\r\n <!-- data-bs-ride=\"carousel\" -->\r\n <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol>\r\n <div class=\"carousel-inner content-side overflow-visible\">\r\n <div class=\"single_card carousel-item\"\r\n *ngFor=\"let item of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n <!-- this is testimonial cards start-->\r\n\r\n <div class=\"main-section row\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"style?.positionLayout\">\r\n <div class=\"left setHeight\">\r\n <div class=\"heading\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"subtext\">\r\n <simpo-text-editor [(value)]=\"item.inputText[1].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"testimonial-img\" [id]=\"data?.id\">\r\n <img loading=\"lazy\" [src]=\"item.image.url\" [alt]=\"item.image.altText\"\r\n class=\"person-img\" [id]=\"data?.id\" [simpoImageDirective]=\"style?.image\"\r\n [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n [sectionId]=\"data?.id\">\r\n <div class=\"person-details\">\r\n <div style=\"z-index: 100;\">\r\n <!-- <div class=\"person-name\"\r\n [ngClass]=\"item.inputText[2].label === 'Person-Name' ? 'body-large' : 'heading-large '\"[innerHtml]=\"item.inputText[2].value | sanitizeHtml\">\r\n\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[2].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n <!-- <div class=\"person-type\"\r\n [ngClass]=\"item.inputText[3].label === 'Person-Type' ? 'body-large' : 'heading-large lh-2 mb-3'\"\r\n [innerHtml]=\"item.inputText[3].value | sanitizeHtml\">\r\n\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[3].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- this is testimonial cards start-->\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n data-bs-slide=\"prev\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n data-bs-slide=\"next\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\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\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: [".carousel-control-prev,.carousel-control-next{position:absolute!important}.carousel{position:relative}.total-container{height:auto;position:relative}.overflow-visible{overflow:visible}.setHeight{height:40vh;max-height:40vh;overflow-y:scroll}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.single_card{margin-top:10px}.main-section{display:flex;justify-content:space-between;margin:auto;align-items:center;width:80%}.left{width:65%;display:flex;flex-direction:column;justify-content:left}.heading{padding:20px 0 6px;width:90%}.heading-large{font-size:2.5rem;font-weight:700;line-height:3rem}.subtext{font-size:14px;font-weight:400;line-height:1.6;width:90%;margin-top:10px}.body-large{font-size:16px;font-weight:400;font-family:desc}.testimonial-img{position:relative}.right{width:28%}.person-img{width:100%;height:100%;object-fit:cover;vertical-align:middle}.right .person-details{background:#0000001a;padding:10px 8px 10px 20px;border-radius:5px 5px 15px 15px;width:100%;height:85px;display:flex;align-items:center;color:#fff;position:absolute;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.99),transparent 124%)}.person-name{font-size:16px;font-weight:500;color:#fff!important}.carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e\")}.carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e\")}.person-type{font-size:16px;font-weight:400;color:#fff!important;display:flex}.person-type .body-large{color:#ffffffbd;font-size:14px;font-weight:400}@media only screen and (min-width: 375px) and (max-width: 500px){.main-section{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 275px) and (max-width: 500px){.main-section{width:100%!important;flex-direction:column-reverse!important}.left{width:100%!important;display:flex;flex-direction:column}.heading,.subtext{width:100%!important}.right{width:95%!important;display:flex;flex-direction:column}.carousel-control-prev,.carousel-control-next{width:8%!important}.container-fluid{padding:unset!important}}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-30px!important}@media screen and (min-width: 501px){.carousel-control-prev,.carousel-control-next{width:5%!important}}.previous-icon{position:absolute;height:45px}li{list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type:
|
|
12016
12148
|
//directive
|
|
12017
12149
|
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: 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: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
|
|
12018
12150
|
}
|
|
@@ -12046,7 +12178,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
12046
12178
|
ImageEditorDirective,
|
|
12047
12179
|
ObjectPositionDirective,
|
|
12048
12180
|
SpacingHorizontalDirective
|
|
12049
|
-
], template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"
|
|
12181
|
+
], template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoBorder]=\"style?.border\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\" data-bs-interval=\"10000\"\r\n >\r\n <!-- data-bs-ride=\"carousel\" -->\r\n <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol>\r\n <div class=\"carousel-inner content-side overflow-visible\">\r\n <div class=\"single_card carousel-item\"\r\n *ngFor=\"let item of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n <!-- this is testimonial cards start-->\r\n\r\n <div class=\"main-section row\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"style?.positionLayout\">\r\n <div class=\"left setHeight\">\r\n <div class=\"heading\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"subtext\">\r\n <simpo-text-editor [(value)]=\"item.inputText[1].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"right\">\r\n <div class=\"testimonial-img\" [id]=\"data?.id\">\r\n <img loading=\"lazy\" [src]=\"item.image.url\" [alt]=\"item.image.altText\"\r\n class=\"person-img\" [id]=\"data?.id\" [simpoImageDirective]=\"style?.image\"\r\n [simpoObjectPosition]=\"item?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"item.image\"\r\n [sectionId]=\"data?.id\">\r\n <div class=\"person-details\">\r\n <div style=\"z-index: 100;\">\r\n <!-- <div class=\"person-name\"\r\n [ngClass]=\"item.inputText[2].label === 'Person-Name' ? 'body-large' : 'heading-large '\"[innerHtml]=\"item.inputText[2].value | sanitizeHtml\">\r\n\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[2].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n <!-- <div class=\"person-type\"\r\n [ngClass]=\"item.inputText[3].label === 'Person-Type' ? 'body-large' : 'heading-large lh-2 mb-3'\"\r\n [innerHtml]=\"item.inputText[3].value | sanitizeHtml\">\r\n\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[3].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- this is testimonial cards start-->\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n data-bs-slide=\"prev\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#testimonialCarousel\" role=\"button\"\r\n data-bs-slide=\"next\" *ngIf=\"content?.listItem?.data && getListItemLength() > 1\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\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\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: [".carousel-control-prev,.carousel-control-next{position:absolute!important}.carousel{position:relative}.total-container{height:auto;position:relative}.overflow-visible{overflow:visible}.setHeight{height:40vh;max-height:40vh;overflow-y:scroll}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.single_card{margin-top:10px}.main-section{display:flex;justify-content:space-between;margin:auto;align-items:center;width:80%}.left{width:65%;display:flex;flex-direction:column;justify-content:left}.heading{padding:20px 0 6px;width:90%}.heading-large{font-size:2.5rem;font-weight:700;line-height:3rem}.subtext{font-size:14px;font-weight:400;line-height:1.6;width:90%;margin-top:10px}.body-large{font-size:16px;font-weight:400;font-family:desc}.testimonial-img{position:relative}.right{width:28%}.person-img{width:100%;height:100%;object-fit:cover;vertical-align:middle}.right .person-details{background:#0000001a;padding:10px 8px 10px 20px;border-radius:5px 5px 15px 15px;width:100%;height:85px;display:flex;align-items:center;color:#fff;position:absolute;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.99),transparent 124%)}.person-name{font-size:16px;font-weight:500;color:#fff!important}.carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e\")}.carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e\")}.person-type{font-size:16px;font-weight:400;color:#fff!important;display:flex}.person-type .body-large{color:#ffffffbd;font-size:14px;font-weight:400}@media only screen and (min-width: 375px) and (max-width: 500px){.main-section{width:100%;display:flex;flex-direction:column}}@media only screen and (min-width: 275px) and (max-width: 500px){.main-section{width:100%!important;flex-direction:column-reverse!important}.left{width:100%!important;display:flex;flex-direction:column}.heading,.subtext{width:100%!important}.right{width:95%!important;display:flex;flex-direction:column}.carousel-control-prev,.carousel-control-next{width:8%!important}.container-fluid{padding:unset!important}}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-30px!important}@media screen and (min-width: 501px){.carousel-control-prev,.carousel-control-next{width:5%!important}}.previous-icon{position:absolute;height:45px}li{list-style:none}\n"] }]
|
|
12050
12182
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
12051
12183
|
type: Input
|
|
12052
12184
|
}], index: [{
|
|
@@ -12907,11 +13039,11 @@ class AppointmentBookingComponent {
|
|
|
12907
13039
|
goBack() {
|
|
12908
13040
|
}
|
|
12909
13041
|
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 }); }
|
|
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>• Free cancellation up to 24 hours before appointment</span>\r\n <span>• 50% charge for cancellations within 24 hours</span>\r\n <span>• No refund for no-shows</span>\r\n <span>• 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>• Free cancellation up to 24 hours before appointment</span>\r\n <span>• 50% charge for cancellations within 24 hours</span>\r\n <span>• No refund for no-shows</span>\r\n <span>• 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"] }] }); }
|
|
13042
|
+
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>• Free cancellation up to 24 hours before appointment</span>\r\n <span>• 50% charge for cancellations within 24 hours</span>\r\n <span>• No refund for no-shows</span>\r\n <span>• 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>• Free cancellation up to 24 hours before appointment</span>\r\n <span>• 50% charge for cancellations within 24 hours</span>\r\n <span>• No refund for no-shows</span>\r\n <span>• 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"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatInputModule }] }); }
|
|
12911
13043
|
}
|
|
12912
13044
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppointmentBookingComponent, decorators: [{
|
|
12913
13045
|
type: Component,
|
|
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>• Free cancellation up to 24 hours before appointment</span>\r\n <span>• 50% charge for cancellations within 24 hours</span>\r\n <span>• No refund for no-shows</span>\r\n <span>• 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>• Free cancellation up to 24 hours before appointment</span>\r\n <span>• 50% charge for cancellations within 24 hours</span>\r\n <span>• No refund for no-shows</span>\r\n <span>• 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"] }]
|
|
13046
|
+
args: [{ selector: 'simpo-appointment-booking', standalone: true, imports: [CdkDragPlaceholder, CommonModule, MatIcon, MatFormFieldModule, MatDatepickerModule, FormsModule, MatNativeDateModule, MatInputModule], 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>• Free cancellation up to 24 hours before appointment</span>\r\n <span>• 50% charge for cancellations within 24 hours</span>\r\n <span>• No refund for no-shows</span>\r\n <span>• 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>• Free cancellation up to 24 hours before appointment</span>\r\n <span>• 50% charge for cancellations within 24 hours</span>\r\n <span>• No refund for no-shows</span>\r\n <span>• 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"] }]
|
|
12915
13047
|
}], ctorParameters: () => [{ type: RestService }, { type: EventsService }, { type: i2$2.Router }], propDecorators: { closeOnOutsideClick: [{
|
|
12916
13048
|
type: HostListener,
|
|
12917
13049
|
args: ['document:click']
|
|
@@ -13845,7 +13977,7 @@ class LogoGalleryComponent extends BaseSection {
|
|
|
13845
13977
|
event.stopPropagation();
|
|
13846
13978
|
}
|
|
13847
13979
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LogoGalleryComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13848
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LogoGalleryComponent, isStandalone: true, selector: "simpo-logo-gallery", inputs: { data: "data", index: "index", edit: "edit", customClass: "customClass", nextComponentColor: "nextComponentColor", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, 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\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\r\n [ngStyle]=\"style?.fullWidth ? {'padding': '0px'} : {}\">\r\n <div *ngFor=\"let text of data?.content?.inputText;let i = index\"\r\n [simpoContentTitleSpace]=\"i == 0 ? style?.layout?.headingSpacing : undefined\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"main-image-section mb-2 d-flex flex-wrap mt-5\" [ngClass]=\"{'px-0': style?.fullWidth}\"\r\n [id]=\"data?.id\" *ngIf=\"screenWidth > 475\">\r\n <ng-container *ngFor=\"let img of content?.listItem?.data; let i = index\">\r\n <div class=\"image-section\" [ngClass]=\"{'even-row': isEvenRow(i), 'odd-row': !isEvenRow(i)}\"\r\n [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\">\r\n <img [id]=\"data?.id\" [class]=\"data?.id + img.image.id + ' h-100'\" [src]=\"img.image.url\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\"\r\n [alt]=\"img.image.altText\" loading=\"lazy\" [simpoCorner]=\"style?.corners\" />\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"mob-container\" *ngIf=\"screenWidth <= 475\">\r\n <ng-container *ngFor=\"let img of content?.listItem?.data; let i = index\">\r\n <div class=\"d-flex logo-box justify-content-center\">\r\n <img [id]=\"data?.id\" [class]=\"data?.id + img.image.id\" [src]=\"img.image.url\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\"\r\n [alt]=\"img.image.altText\" loading=\"lazy\" [simpoCorner]=\"style?.corners\" />\r\n </div>\r\n </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\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 <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</section>", styles: [".text-alignment{text-align:center;margin-bottom:10px}.total-container{height:auto;position:relative}.main-image-section{padding:0px 5rem}.image-section{padding:5px}.image-section img{width:100%;object-fit:cover}.even-row{flex-basis:calc(100% / 7);max-width:calc(100% / 7)}.odd-row{flex-basis:12.5%;max-width:12.5%}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:unset!important;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}.left-arrow,.right-arrow{position:relative;top:10px}.static-text{font-size:16px;font-weight:900}.mob-container{display:grid;grid-template-columns:50% 50%;justify-content:center;margin-top:8px}.logo-box{padding-top:.25rem;width:100%;height:8rem}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "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:
|
|
13980
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LogoGalleryComponent, isStandalone: true, selector: "simpo-logo-gallery", inputs: { data: "data", index: "index", edit: "edit", customClass: "customClass", nextComponentColor: "nextComponentColor", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, 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 padding-sm-2\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\r\n [ngStyle]=\"style?.fullWidth ? {'padding': '0px'} : {}\">\r\n <div *ngFor=\"let text of data?.content?.inputText;let i = index\"\r\n [simpoContentTitleSpace]=\"i == 0 ? style?.layout?.headingSpacing : undefined\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"main-image-section mb-2 d-flex flex-wrap mt-5\" [ngClass]=\"{'px-0': style?.fullWidth}\"\r\n [id]=\"data?.id\" *ngIf=\"screenWidth > 475\">\r\n <ng-container *ngFor=\"let img of content?.listItem?.data; let i = index\">\r\n <div class=\"image-section\" [ngClass]=\"{'even-row': isEvenRow(i), 'odd-row': !isEvenRow(i)}\"\r\n [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\">\r\n <img [id]=\"data?.id\" [class]=\"data?.id + img.image.id + ' h-100'\" [src]=\"img.image.url\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\"\r\n [alt]=\"img.image.altText\" loading=\"lazy\" [simpoCorner]=\"style?.corners\" />\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"mob-container\" *ngIf=\"screenWidth <= 475\">\r\n <ng-container *ngFor=\"let img of content?.listItem?.data; let i = index\">\r\n <div class=\"d-flex logo-box justify-content-center\">\r\n <img [id]=\"data?.id\" [class]=\"data?.id + img.image.id\" [src]=\"img.image.url\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\"\r\n [alt]=\"img.image.altText\" loading=\"lazy\" [simpoCorner]=\"style?.corners\" />\r\n </div>\r\n </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\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 <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</section>", styles: [".text-alignment{text-align:center;margin-bottom:10px}.total-container{height:auto;position:relative}.main-image-section{padding:0px 5rem}.image-section{padding:5px}.image-section img{width:100%;object-fit:cover}.even-row{flex-basis:calc(100% / 7);max-width:calc(100% / 7)}.odd-row{flex-basis:12.5%;max-width:12.5%}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:unset!important;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width: 475px){.padding-sm-2{padding:1.5rem .8rem!important}}.left-arrow,.right-arrow{position:relative;top:10px}.static-text{font-size:16px;font-weight:900}.mob-container{display:grid;grid-template-columns:50% 50%;justify-content:center;margin-top:8px}.logo-box{padding-top:.25rem;width:100%;height:8rem}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "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:
|
|
13849
13981
|
//directive
|
|
13850
13982
|
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: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { 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: TranslateOnhoverDirective, selector: "[simpoTranslateOnhover]", inputs: ["simpoTranslateOnhover"] }] }); }
|
|
13851
13983
|
}
|
|
@@ -13881,7 +14013,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
13881
14013
|
TextEditorComponent,
|
|
13882
14014
|
SpacingHorizontalDirective,
|
|
13883
14015
|
TranslateOnhoverDirective
|
|
13884
|
-
], 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\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\r\n [ngStyle]=\"style?.fullWidth ? {'padding': '0px'} : {}\">\r\n <div *ngFor=\"let text of data?.content?.inputText;let i = index\"\r\n [simpoContentTitleSpace]=\"i == 0 ? style?.layout?.headingSpacing : undefined\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"main-image-section mb-2 d-flex flex-wrap mt-5\" [ngClass]=\"{'px-0': style?.fullWidth}\"\r\n [id]=\"data?.id\" *ngIf=\"screenWidth > 475\">\r\n <ng-container *ngFor=\"let img of content?.listItem?.data; let i = index\">\r\n <div class=\"image-section\" [ngClass]=\"{'even-row': isEvenRow(i), 'odd-row': !isEvenRow(i)}\"\r\n [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\">\r\n <img [id]=\"data?.id\" [class]=\"data?.id + img.image.id + ' h-100'\" [src]=\"img.image.url\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\"\r\n [alt]=\"img.image.altText\" loading=\"lazy\" [simpoCorner]=\"style?.corners\" />\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"mob-container\" *ngIf=\"screenWidth <= 475\">\r\n <ng-container *ngFor=\"let img of content?.listItem?.data; let i = index\">\r\n <div class=\"d-flex logo-box justify-content-center\">\r\n <img [id]=\"data?.id\" [class]=\"data?.id + img.image.id\" [src]=\"img.image.url\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\"\r\n [alt]=\"img.image.altText\" loading=\"lazy\" [simpoCorner]=\"style?.corners\" />\r\n </div>\r\n </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\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 <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</section>", styles: [".text-alignment{text-align:center;margin-bottom:10px}.total-container{height:auto;position:relative}.main-image-section{padding:0px 5rem}.image-section{padding:5px}.image-section img{width:100%;object-fit:cover}.even-row{flex-basis:calc(100% / 7);max-width:calc(100% / 7)}.odd-row{flex-basis:12.5%;max-width:12.5%}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:unset!important;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}.left-arrow,.right-arrow{position:relative;top:10px}.static-text{font-size:16px;font-weight:900}.mob-container{display:grid;grid-template-columns:50% 50%;justify-content:center;margin-top:8px}.logo-box{padding-top:.25rem;width:100%;height:8rem}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"] }]
|
|
14016
|
+
], 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 padding-sm-2\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\r\n [ngStyle]=\"style?.fullWidth ? {'padding': '0px'} : {}\">\r\n <div *ngFor=\"let text of data?.content?.inputText;let i = index\"\r\n [simpoContentTitleSpace]=\"i == 0 ? style?.layout?.headingSpacing : undefined\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"main-image-section mb-2 d-flex flex-wrap mt-5\" [ngClass]=\"{'px-0': style?.fullWidth}\"\r\n [id]=\"data?.id\" *ngIf=\"screenWidth > 475\">\r\n <ng-container *ngFor=\"let img of content?.listItem?.data; let i = index\">\r\n <div class=\"image-section\" [ngClass]=\"{'even-row': isEvenRow(i), 'odd-row': !isEvenRow(i)}\"\r\n [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\">\r\n <img [id]=\"data?.id\" [class]=\"data?.id + img.image.id + ' h-100'\" [src]=\"img.image.url\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\"\r\n [alt]=\"img.image.altText\" loading=\"lazy\" [simpoCorner]=\"style?.corners\" />\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"mob-container\" *ngIf=\"screenWidth <= 475\">\r\n <ng-container *ngFor=\"let img of content?.listItem?.data; let i = index\">\r\n <div class=\"d-flex logo-box justify-content-center\">\r\n <img [id]=\"data?.id\" [class]=\"data?.id + img.image.id\" [src]=\"img.image.url\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\"\r\n [alt]=\"img.image.altText\" loading=\"lazy\" [simpoCorner]=\"style?.corners\" />\r\n </div>\r\n </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\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 <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</section>", styles: [".text-alignment{text-align:center;margin-bottom:10px}.total-container{height:auto;position:relative}.main-image-section{padding:0px 5rem}.image-section{padding:5px}.image-section img{width:100%;object-fit:cover}.even-row{flex-basis:calc(100% / 7);max-width:calc(100% / 7)}.odd-row{flex-basis:12.5%;max-width:12.5%}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:unset!important;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width: 475px){.padding-sm-2{padding:1.5rem .8rem!important}}.left-arrow,.right-arrow{position:relative;top:10px}.static-text{font-size:16px;font-weight:900}.mob-container{display:grid;grid-template-columns:50% 50%;justify-content:center;margin-top:8px}.logo-box{padding-top:.25rem;width:100%;height:8rem}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"] }]
|
|
13885
14017
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
13886
14018
|
type: Input
|
|
13887
14019
|
}], index: [{
|
|
@@ -15570,7 +15702,7 @@ class NewTestimonialsComponent extends BaseSection {
|
|
|
15570
15702
|
});
|
|
15571
15703
|
}
|
|
15572
15704
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewTestimonialsComponent, deps: [{ token: EventsService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15573
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NewTestimonialsComponent, isStandalone: true, selector: "simpo-new-testimonials", inputs: { data: "data", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor", index: "index" }, host: { listeners: { "window: resize": "getScreenSize($event)", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "carouselInner", first: true, predicate: ["carouselInner"], descendants: true }, { propertyName: "carouselItems", predicate: ["carouselItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\" [simpoBorder]=\"styles?.border\" [id]=\"data?.id\">\r\n <div class=\"parent-div\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoBackground]=\"styles?.background\">\r\n <div class=\"d-flex flex-column\" [simpoOverlay]=\"styles?.background\" [simpoLayout]=\"styles?.layout\"\r\n [id]=\"data?.id\">\r\n <div class=\"header\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <ng-container *ngIf=\"data?.action?.display\">\r\n <div class=\"mt-4 d-flex gap-2 w-100 overflow-scroll\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoAnimation]=\"styles?.animation\">\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\" [edit]=\"edit\" [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 </ng-container>\r\n <div class=\"list-items mt-3 d-flex gap-3\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [simpoAnimation]=\"styles?.animation\"\r\n [class.flex-column]=\"screenWidth < 475\">\r\n <div class=\"image-container w-35 height-50\" [class.w-100]=\"screenWidth < 475\"\r\n [class.h-30]=\"screenWidth < 475\">\r\n <ng-container>\r\n <ng-container *ngIf=\"getImageType() == 'Image'\">\r\n <img [src]=\"getImageUrl()\" alt=\"Selected Image\" class=\"w-100 h-100\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n [simpoCorner]=\"styles?.corners\">\r\n </ng-container>\r\n <ng-container *ngIf=\"getImageType() == 'Video'\">\r\n <video [src]=\"getImageUrl()\" class=\"w-100 h-100\" [simpoCorner]=\"styles?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n controls></video>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <div id=\"carouselExampleIndicators\" class=\"carousel slide w-65 d-flex flex-column\"\r\n [simpoContentAlignment]=\"styles?.contentAlignment\" [class.w-100]=\"screenWidth < 475\">\r\n <div class=\"carousel-inner mb-4\" [class.mb-6]=\"screenWidth < 475\" #carouselInner>\r\n <ng-container *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <div class=\"carousel-item h-100\" [ngClass]=\"{'active': i === 0}\" #carouselItem>\r\n <div class=\"quote-image mb-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"31\"\r\n viewBox=\"0 0 36 31\" fill=\"none\">\r\n <path\r\n d=\"M35.3998 3.29993C35.5998 3.09993 35.7998 2.69993 35.5998 2.29993C35.3998 2.09993 34.9998 1.69993 34.5998 0.899925C33.9998 0.699925 33.5998 0.699926 32.9998 1.09993C25.3998 5.89993 21.1998 11.4999 20.3998 17.8999C18.9998 27.8999 27.9998 32.6999 32.5998 28.2999C37.1998 23.8999 34.3998 18.2999 31.1998 16.6999C27.9998 15.0999 25.9998 15.6999 26.1998 13.6999C26.5998 11.6999 31.1998 6.09993 35.3998 3.29993ZM14.7998 1.09993C14.1998 0.699926 13.5998 0.699926 13.1998 1.09993C5.59983 5.89993 1.39983 11.4999 0.599832 18.0999C-0.800168 28.0999 8.19983 32.8999 12.7998 28.4999C17.3998 24.0999 14.5998 18.4999 11.3998 16.8999C7.99983 15.4999 5.99983 16.0999 6.39983 13.8999C6.79983 11.8999 11.3998 6.29993 15.5998 3.49993C15.7998 3.29993 15.9998 2.89993 15.7998 2.49993C15.5998 2.29993 15.1998 1.89993 14.7998 1.09993Z\"\r\n [attr.fill]=\"styles?.background?.accentColor\" />\r\n </svg>\r\n </div>\r\n <div class=\"item mb-3\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"prev-next d-flex gap-2\">\r\n <div class=\"carousel-control-prev\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n data-bs-slide=\"prev\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n (click)=\"idx = (idx - 1 < 0 ? getLength() - 1 : idx - 1)\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n\r\n <div class=\"carousel-control-next\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n data-bs-slide=\"next\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n (click)=\"idx = (idx + 1 >= getLength() ? 0 : idx + 1)\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </div>\r\n\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\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-container{position:relative;height:auto}.carousel-control-prev,.carousel-control-next{position:unset!important;width:30px;border-radius:50%!important;height:30px}.w-35{width:35%!important}.w-65{width:65%!important}.prev-next{position:absolute;bottom:0;left:0;width:100%}.overflow-visible{overflow:visible!important}@media screen and (max-width: 475px){.list-items{flex-direction:column!important}.h-30{height:30vh!important}}.height-50{height:50vh}.w-100{width:100%!important}.mb-6{margin-bottom:2.5rem!important}.flex-column{flex-direction:column!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: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type:
|
|
15705
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NewTestimonialsComponent, isStandalone: true, selector: "simpo-new-testimonials", inputs: { data: "data", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor", index: "index" }, host: { listeners: { "window: resize": "getScreenSize($event)", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "carouselInner", first: true, predicate: ["carouselInner"], descendants: true }, { propertyName: "carouselItems", predicate: ["carouselItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\" [simpoBorder]=\"styles?.border\" [id]=\"data?.id\">\r\n <div class=\"parent-div\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoBackground]=\"styles?.background\">\r\n <div class=\"d-flex flex-column\" [simpoOverlay]=\"styles?.background\" [simpoLayout]=\"styles?.layout\"\r\n [id]=\"data?.id\">\r\n <div class=\"header\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <ng-container *ngIf=\"data?.action?.display\">\r\n <div class=\"mt-4 d-flex gap-2 w-100 overflow-scroll\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoAnimation]=\"styles?.animation\">\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\" [edit]=\"edit\" [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 </ng-container>\r\n <div class=\"list-items mt-3 d-flex gap-3\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [simpoAnimation]=\"styles?.animation\"\r\n [class.flex-column]=\"screenWidth < 475\">\r\n <div class=\"image-container w-35 height-50\" [class.w-100]=\"screenWidth < 475\" [id]=\"data?.id\"\r\n [class.h-30]=\"screenWidth < 475\" [class.bg-black]=\"getImageType() == 'Video'\" [simpoCorner]=\"styles?.corners\">\r\n <ng-container>\r\n <ng-container *ngIf=\"getImageType() == 'Image'\">\r\n <img [src]=\"getImageUrl()\" alt=\"Selected Image\" class=\"w-100 h-100\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n [simpoCorner]=\"styles?.corners\">\r\n </ng-container>\r\n <ng-container *ngIf=\"getImageType() == 'Video'\">\r\n <video [src]=\"getImageUrl()\" class=\"w-100 h-100\" [simpoCorner]=\"styles?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n controls></video>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <div id=\"carouselExampleIndicators\" class=\"carousel slide w-65 d-flex flex-column\"\r\n [simpoContentAlignment]=\"styles?.contentAlignment\" [class.w-100]=\"screenWidth < 475\">\r\n <div class=\"carousel-inner mb-4\" [class.mb-6]=\"screenWidth < 475\" #carouselInner>\r\n <ng-container *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <div class=\"carousel-item h-100\" [ngClass]=\"{'active': i === 0}\" #carouselItem>\r\n <div class=\"quote-image mb-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"31\"\r\n viewBox=\"0 0 36 31\" fill=\"none\">\r\n <path\r\n d=\"M35.3998 3.29993C35.5998 3.09993 35.7998 2.69993 35.5998 2.29993C35.3998 2.09993 34.9998 1.69993 34.5998 0.899925C33.9998 0.699925 33.5998 0.699926 32.9998 1.09993C25.3998 5.89993 21.1998 11.4999 20.3998 17.8999C18.9998 27.8999 27.9998 32.6999 32.5998 28.2999C37.1998 23.8999 34.3998 18.2999 31.1998 16.6999C27.9998 15.0999 25.9998 15.6999 26.1998 13.6999C26.5998 11.6999 31.1998 6.09993 35.3998 3.29993ZM14.7998 1.09993C14.1998 0.699926 13.5998 0.699926 13.1998 1.09993C5.59983 5.89993 1.39983 11.4999 0.599832 18.0999C-0.800168 28.0999 8.19983 32.8999 12.7998 28.4999C17.3998 24.0999 14.5998 18.4999 11.3998 16.8999C7.99983 15.4999 5.99983 16.0999 6.39983 13.8999C6.79983 11.8999 11.3998 6.29993 15.5998 3.49993C15.7998 3.29993 15.9998 2.89993 15.7998 2.49993C15.5998 2.29993 15.1998 1.89993 14.7998 1.09993Z\"\r\n [attr.fill]=\"styles?.background?.accentColor\" />\r\n </svg>\r\n </div>\r\n <div class=\"item mb-3\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"prev-next d-flex gap-2\">\r\n <div class=\"carousel-control-prev\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n data-bs-slide=\"prev\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n (click)=\"idx = (idx - 1 < 0 ? getLength() - 1 : idx - 1)\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n\r\n <div class=\"carousel-control-next\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n data-bs-slide=\"next\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n (click)=\"idx = (idx + 1 >= getLength() ? 0 : idx + 1)\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </div>\r\n\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\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-container{position:relative;height:auto}.bg-black{background:#000}.carousel-control-prev,.carousel-control-next{position:unset!important;width:30px;border-radius:50%!important;height:30px}.w-35{width:35%!important}.w-65{width:65%!important}.prev-next{position:absolute;bottom:0;left:0;width:100%}.overflow-visible{overflow:visible!important}@media screen and (max-width: 475px){.list-items{flex-direction:column!important}.h-30{height:30vh!important}}.height-50{height:50vh}.w-100{width:100%!important}.mb-6{margin-bottom:2.5rem!important}.flex-column{flex-direction:column!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: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type:
|
|
15574
15706
|
// directives
|
|
15575
15707
|
SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { 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: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "component", type:
|
|
15576
15708
|
// components
|
|
@@ -15607,7 +15739,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
15607
15739
|
TextEditorComponent,
|
|
15608
15740
|
SimpoButtonComponent,
|
|
15609
15741
|
ImageEditorDirective,
|
|
15610
|
-
], template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\" [simpoBorder]=\"styles?.border\" [id]=\"data?.id\">\r\n <div class=\"parent-div\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoBackground]=\"styles?.background\">\r\n <div class=\"d-flex flex-column\" [simpoOverlay]=\"styles?.background\" [simpoLayout]=\"styles?.layout\"\r\n [id]=\"data?.id\">\r\n <div class=\"header\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <ng-container *ngIf=\"data?.action?.display\">\r\n <div class=\"mt-4 d-flex gap-2 w-100 overflow-scroll\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoAnimation]=\"styles?.animation\">\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\" [edit]=\"edit\" [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 </ng-container>\r\n <div class=\"list-items mt-3 d-flex gap-3\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [simpoAnimation]=\"styles?.animation\"\r\n [class.flex-column]=\"screenWidth < 475\">\r\n <div class=\"image-container w-35 height-50\" [class.w-100]=\"screenWidth < 475\"\r\n [class.h-30]=\"screenWidth < 475\">\r\n <ng-container>\r\n <ng-container *ngIf=\"getImageType() == 'Image'\">\r\n <img [src]=\"getImageUrl()\" alt=\"Selected Image\" class=\"w-100 h-100\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n [simpoCorner]=\"styles?.corners\">\r\n </ng-container>\r\n <ng-container *ngIf=\"getImageType() == 'Video'\">\r\n <video [src]=\"getImageUrl()\" class=\"w-100 h-100\" [simpoCorner]=\"styles?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n controls></video>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <div id=\"carouselExampleIndicators\" class=\"carousel slide w-65 d-flex flex-column\"\r\n [simpoContentAlignment]=\"styles?.contentAlignment\" [class.w-100]=\"screenWidth < 475\">\r\n <div class=\"carousel-inner mb-4\" [class.mb-6]=\"screenWidth < 475\" #carouselInner>\r\n <ng-container *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <div class=\"carousel-item h-100\" [ngClass]=\"{'active': i === 0}\" #carouselItem>\r\n <div class=\"quote-image mb-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"31\"\r\n viewBox=\"0 0 36 31\" fill=\"none\">\r\n <path\r\n d=\"M35.3998 3.29993C35.5998 3.09993 35.7998 2.69993 35.5998 2.29993C35.3998 2.09993 34.9998 1.69993 34.5998 0.899925C33.9998 0.699925 33.5998 0.699926 32.9998 1.09993C25.3998 5.89993 21.1998 11.4999 20.3998 17.8999C18.9998 27.8999 27.9998 32.6999 32.5998 28.2999C37.1998 23.8999 34.3998 18.2999 31.1998 16.6999C27.9998 15.0999 25.9998 15.6999 26.1998 13.6999C26.5998 11.6999 31.1998 6.09993 35.3998 3.29993ZM14.7998 1.09993C14.1998 0.699926 13.5998 0.699926 13.1998 1.09993C5.59983 5.89993 1.39983 11.4999 0.599832 18.0999C-0.800168 28.0999 8.19983 32.8999 12.7998 28.4999C17.3998 24.0999 14.5998 18.4999 11.3998 16.8999C7.99983 15.4999 5.99983 16.0999 6.39983 13.8999C6.79983 11.8999 11.3998 6.29993 15.5998 3.49993C15.7998 3.29993 15.9998 2.89993 15.7998 2.49993C15.5998 2.29993 15.1998 1.89993 14.7998 1.09993Z\"\r\n [attr.fill]=\"styles?.background?.accentColor\" />\r\n </svg>\r\n </div>\r\n <div class=\"item mb-3\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"prev-next d-flex gap-2\">\r\n <div class=\"carousel-control-prev\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n data-bs-slide=\"prev\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n (click)=\"idx = (idx - 1 < 0 ? getLength() - 1 : idx - 1)\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n\r\n <div class=\"carousel-control-next\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n data-bs-slide=\"next\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n (click)=\"idx = (idx + 1 >= getLength() ? 0 : idx + 1)\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </div>\r\n\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\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-container{position:relative;height:auto}.carousel-control-prev,.carousel-control-next{position:unset!important;width:30px;border-radius:50%!important;height:30px}.w-35{width:35%!important}.w-65{width:65%!important}.prev-next{position:absolute;bottom:0;left:0;width:100%}.overflow-visible{overflow:visible!important}@media screen and (max-width: 475px){.list-items{flex-direction:column!important}.h-30{height:30vh!important}}.height-50{height:50vh}.w-100{width:100%!important}.mb-6{margin-bottom:2.5rem!important}.flex-column{flex-direction:column!important}\n"] }]
|
|
15742
|
+
], template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\" [simpoBorder]=\"styles?.border\" [id]=\"data?.id\">\r\n <div class=\"parent-div\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoBackground]=\"styles?.background\">\r\n <div class=\"d-flex flex-column\" [simpoOverlay]=\"styles?.background\" [simpoLayout]=\"styles?.layout\"\r\n [id]=\"data?.id\">\r\n <div class=\"header\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <ng-container *ngIf=\"data?.action?.display\">\r\n <div class=\"mt-4 d-flex gap-2 w-100 overflow-scroll\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoAnimation]=\"styles?.animation\">\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\" [edit]=\"edit\" [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 </ng-container>\r\n <div class=\"list-items mt-3 d-flex gap-3\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [simpoAnimation]=\"styles?.animation\"\r\n [class.flex-column]=\"screenWidth < 475\">\r\n <div class=\"image-container w-35 height-50\" [class.w-100]=\"screenWidth < 475\" [id]=\"data?.id\"\r\n [class.h-30]=\"screenWidth < 475\" [class.bg-black]=\"getImageType() == 'Video'\" [simpoCorner]=\"styles?.corners\">\r\n <ng-container>\r\n <ng-container *ngIf=\"getImageType() == 'Image'\">\r\n <img [src]=\"getImageUrl()\" alt=\"Selected Image\" class=\"w-100 h-100\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n [simpoCorner]=\"styles?.corners\">\r\n </ng-container>\r\n <ng-container *ngIf=\"getImageType() == 'Video'\">\r\n <video [src]=\"getImageUrl()\" class=\"w-100 h-100\" [simpoCorner]=\"styles?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n controls></video>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <div id=\"carouselExampleIndicators\" class=\"carousel slide w-65 d-flex flex-column\"\r\n [simpoContentAlignment]=\"styles?.contentAlignment\" [class.w-100]=\"screenWidth < 475\">\r\n <div class=\"carousel-inner mb-4\" [class.mb-6]=\"screenWidth < 475\" #carouselInner>\r\n <ng-container *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <div class=\"carousel-item h-100\" [ngClass]=\"{'active': i === 0}\" #carouselItem>\r\n <div class=\"quote-image mb-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"31\"\r\n viewBox=\"0 0 36 31\" fill=\"none\">\r\n <path\r\n d=\"M35.3998 3.29993C35.5998 3.09993 35.7998 2.69993 35.5998 2.29993C35.3998 2.09993 34.9998 1.69993 34.5998 0.899925C33.9998 0.699925 33.5998 0.699926 32.9998 1.09993C25.3998 5.89993 21.1998 11.4999 20.3998 17.8999C18.9998 27.8999 27.9998 32.6999 32.5998 28.2999C37.1998 23.8999 34.3998 18.2999 31.1998 16.6999C27.9998 15.0999 25.9998 15.6999 26.1998 13.6999C26.5998 11.6999 31.1998 6.09993 35.3998 3.29993ZM14.7998 1.09993C14.1998 0.699926 13.5998 0.699926 13.1998 1.09993C5.59983 5.89993 1.39983 11.4999 0.599832 18.0999C-0.800168 28.0999 8.19983 32.8999 12.7998 28.4999C17.3998 24.0999 14.5998 18.4999 11.3998 16.8999C7.99983 15.4999 5.99983 16.0999 6.39983 13.8999C6.79983 11.8999 11.3998 6.29993 15.5998 3.49993C15.7998 3.29993 15.9998 2.89993 15.7998 2.49993C15.5998 2.29993 15.1998 1.89993 14.7998 1.09993Z\"\r\n [attr.fill]=\"styles?.background?.accentColor\" />\r\n </svg>\r\n </div>\r\n <div class=\"item mb-3\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"prev-next d-flex gap-2\">\r\n <div class=\"carousel-control-prev\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n data-bs-slide=\"prev\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n (click)=\"idx = (idx - 1 < 0 ? getLength() - 1 : idx - 1)\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n\r\n <div class=\"carousel-control-next\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n data-bs-slide=\"next\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n (click)=\"idx = (idx + 1 >= getLength() ? 0 : idx + 1)\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </div>\r\n\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\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-container{position:relative;height:auto}.bg-black{background:#000}.carousel-control-prev,.carousel-control-next{position:unset!important;width:30px;border-radius:50%!important;height:30px}.w-35{width:35%!important}.w-65{width:65%!important}.prev-next{position:absolute;bottom:0;left:0;width:100%}.overflow-visible{overflow:visible!important}@media screen and (max-width: 475px){.list-items{flex-direction:column!important}.h-30{height:30vh!important}}.height-50{height:50vh}.w-100{width:100%!important}.mb-6{margin-bottom:2.5rem!important}.flex-column{flex-direction:column!important}\n"] }]
|
|
15611
15743
|
}], ctorParameters: () => [{ type: EventsService }, { type: i0.Renderer2 }], propDecorators: { data: [{
|
|
15612
15744
|
type: Input
|
|
15613
15745
|
}], edit: [{
|
|
@@ -15642,13 +15774,14 @@ class NewServicesComponent extends BaseSection {
|
|
|
15642
15774
|
this.idx = 0;
|
|
15643
15775
|
this.index = 0;
|
|
15644
15776
|
this.screenWidth = "";
|
|
15777
|
+
// this.getScreenSize();
|
|
15645
15778
|
}
|
|
15646
15779
|
ngOnInit() {
|
|
15647
|
-
this.getScreenSize();
|
|
15648
15780
|
this.content = this.data?.content;
|
|
15649
15781
|
this.styles = this.data?.styles;
|
|
15650
15782
|
this.selectedImage = this.content?.listItem.data[0].image.url;
|
|
15651
15783
|
this.idx = 0;
|
|
15784
|
+
this.updateScreenWidth(window.innerWidth);
|
|
15652
15785
|
}
|
|
15653
15786
|
get stylesLayout() {
|
|
15654
15787
|
return { ...this.styles?.layout };
|
|
@@ -15690,8 +15823,17 @@ class NewServicesComponent extends BaseSection {
|
|
|
15690
15823
|
return 'to bottom';
|
|
15691
15824
|
}
|
|
15692
15825
|
}
|
|
15826
|
+
onResize(event) {
|
|
15827
|
+
const w = event?.target?.innerWidth ?? window.innerWidth;
|
|
15828
|
+
this.updateScreenWidth(w);
|
|
15829
|
+
}
|
|
15830
|
+
updateScreenWidth(width) {
|
|
15831
|
+
this.screenWidth = width;
|
|
15832
|
+
// if using OnPush change detection uncomment next line
|
|
15833
|
+
// this.cdr.markForCheck();
|
|
15834
|
+
}
|
|
15693
15835
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewServicesComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15694
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NewServicesComponent, isStandalone: true, selector: "simpo-new-services", inputs: { data: "data", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:
|
|
15836
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NewServicesComponent, isStandalone: true, selector: "simpo-new-services", inputs: { data: "data", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "onResize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"main-container d-block\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\"\r\n [attr.style]=\"customClass\">\r\n <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\">\r\n <div class=\"main-div\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoBackground]=\"styles?.background\">\r\n <div [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\" class=\"d-flex flex-column\"\r\n [simpoLayout]=\"styles?.layout\">\r\n <div class=\"header\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <div [ngClass]=\"text.label.includes('Heading') ? 'heading-large lh-2 mb-2' : 'body-large'\">\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 <div class=\"d-flex gap-3 mt-2\" [spacingHorizontal]=\"stylesLayout\">\r\n <ng-container *ngIf=\"data?.action?.display\">\r\n <div *ngFor=\"let button of data?.action?.buttons\" [id]=\"data?.id\"\r\n [simpoAnimation]=\"styles?.animation\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [edit]=\"edit\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"list-image-container mt-3 d-flex gap-3 h-100 \" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [spacingHorizontal]=\"stylesLayout\"\r\n [class.flex-mob-column-reverse]=\"styles?.positionLayout?.value === 'bottom'\"\r\n [id]=\"data?.id\" [class.flex-mob-column]=\"styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' \"\r\n [simpoAnimation]=\"styles?.animation\" [class.w-100]=\"screenWidth < 475\">\r\n <div class=\"img-container h-100\" [id]=\"data?.id\"\r\n [class.image-fit]=\"styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'\"\r\n [class.w-50]=\"styles?.positionLayout?.value === 'right' || styles?.positionLayout?.value === 'left'\"\r\n [class.w-100]=\"screenWidth < 475\">\r\n <ng-container *ngIf=\"getImageUrl()\">\r\n <img [src]=\"getImageUrl()\" alt=\"Selected Image\" class=\"d-block img-fluid w-100 h-100\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n [simpoCorner]=\"styles?.corners\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\">\r\n </ng-container>\r\n </div>\r\n <div class=\"list-items h-auto o-visible\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [class.w-50]=\"styles?.positionLayout?.value === 'right' || styles?.positionLayout?.value === 'left'\"\r\n [class.w-100]=\"screenWidth < 475\" [class.object-unset]=\"screenWidth < 475\"\r\n [class.over-y]=\"styles?.positionLayout?.value === 'right' || styles?.positionLayout?.value === 'left'\"\r\n [class.row]=\"styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'\"\r\n [class.gap-2]=\"styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'\"\r\n [class.over-x]=\"styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'\"\r\n [class.object-unset]=\"styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'\">\r\n <ng-container *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <div class=\"item mb-3 bb-3\"\r\n [class.col-md-3]=\"styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'\"\r\n [class.col-6]=\"screenWidth < 475 && (styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom')\"\r\n (mouseenter)=\"idx = i\" [ngStyle]=\"{\r\n borderBottom: styles?.background?.accentBackgroundType === 'Solid' && idx == i\r\n ? '3px solid ' + styles?.background?.accentColor\r\n : styles?.background?.accentBackgroundType === 'Gradient' && idx == i ? '3px solid transparent' : '',\r\n borderImage: styles?.background?.accentBackgroundType === 'Gradient' && idx == i\r\n ? 'linear-gradient(' + getGradientDirection(styles?.background?.gradientDirection) + ', ' + styles?.background?.accentColor + ', ' + styles?.background?.secondaryAccentColor + ') 1'\r\n : '',\r\n borderImageSlice: styles?.background?.accentBackgroundType === 'Gradient' ? '1' : ''\r\n }\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </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\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-container{position:relative;height:auto}.item{padding-bottom:10px}.row{flex-wrap:unset!important}.col-md-3{width:24%!important;padding-left:unset!important;padding-right:unset!important}.col-6{width:50%!important}.over-x{overflow-x:scroll}.over-y{overflow-y:scroll}.w-100{width:100%!important}.object-unset{aspect-ratio:unset!important}.bb-3{border-bottom:3px solid #e0e0e0}.image-fit{object-fit:none!important;object-position:center!important;width:100%!important;height:100%!important;aspect-ratio:unset!important}.list-items::-webkit-scrollbar{display:flex!important;height:3px}.list-items::-webkit-scrollbar-thumb{background:#d4d4d4}@media screen and (max-width: 475px){.list-items{aspect-ratio:unset!important;object-fit:unset!important}.flex-mob-column-reverse{flex-direction:column-reverse!important}.flex-mob-column{flex-direction:column!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: "directive", type:
|
|
15695
15837
|
// directives
|
|
15696
15838
|
SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { 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: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "component", type:
|
|
15697
15839
|
// components
|
|
@@ -15728,7 +15870,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
15728
15870
|
TextEditorComponent,
|
|
15729
15871
|
SimpoButtonComponent,
|
|
15730
15872
|
ImageEditorDirective,
|
|
15731
|
-
], template: "<section class=\"main-container d-block\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\"\r\n [attr.style]=\"customClass\">\r\n <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\">\r\n <div class=\"main-div\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoBackground]=\"styles?.background\">\r\n <div [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\" class=\"d-flex flex-column\"\r\n [simpoLayout]=\"styles?.layout\">\r\n <div class=\"header\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <div [ngClass]=\"text.label.includes('Heading') ? 'heading-large lh-2 mb-2' : 'body-large'\">\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 <div class=\"d-flex gap-3 mt-2\" [spacingHorizontal]=\"stylesLayout\">\r\n <ng-container *ngIf=\"data?.action?.display\">\r\n <div *ngFor=\"let button of data?.action?.buttons\" [id]=\"data?.id\"\r\n [simpoAnimation]=\"styles?.animation\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [edit]=\"edit\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"list-image-container mt-3 d-flex gap-3 h-100 \" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [spacingHorizontal]=\"stylesLayout\"\r\n [class.flex-column-reverse]=\"
|
|
15873
|
+
], template: "<section class=\"main-container d-block\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\"\r\n [attr.style]=\"customClass\">\r\n <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\">\r\n <div class=\"main-div\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoBackground]=\"styles?.background\">\r\n <div [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\" class=\"d-flex flex-column\"\r\n [simpoLayout]=\"styles?.layout\">\r\n <div class=\"header\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <div [ngClass]=\"text.label.includes('Heading') ? 'heading-large lh-2 mb-2' : 'body-large'\">\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 <div class=\"d-flex gap-3 mt-2\" [spacingHorizontal]=\"stylesLayout\">\r\n <ng-container *ngIf=\"data?.action?.display\">\r\n <div *ngFor=\"let button of data?.action?.buttons\" [id]=\"data?.id\"\r\n [simpoAnimation]=\"styles?.animation\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [edit]=\"edit\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"list-image-container mt-3 d-flex gap-3 h-100 \" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [spacingHorizontal]=\"stylesLayout\"\r\n [class.flex-mob-column-reverse]=\"styles?.positionLayout?.value === 'bottom'\"\r\n [id]=\"data?.id\" [class.flex-mob-column]=\"styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' \"\r\n [simpoAnimation]=\"styles?.animation\" [class.w-100]=\"screenWidth < 475\">\r\n <div class=\"img-container h-100\" [id]=\"data?.id\"\r\n [class.image-fit]=\"styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'\"\r\n [class.w-50]=\"styles?.positionLayout?.value === 'right' || styles?.positionLayout?.value === 'left'\"\r\n [class.w-100]=\"screenWidth < 475\">\r\n <ng-container *ngIf=\"getImageUrl()\">\r\n <img [src]=\"getImageUrl()\" alt=\"Selected Image\" class=\"d-block img-fluid w-100 h-100\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"getImageData()\" [sectionId]=\"data?.id\"\r\n [simpoCorner]=\"styles?.corners\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\">\r\n </ng-container>\r\n </div>\r\n <div class=\"list-items h-auto o-visible\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [class.w-50]=\"styles?.positionLayout?.value === 'right' || styles?.positionLayout?.value === 'left'\"\r\n [class.w-100]=\"screenWidth < 475\" [class.object-unset]=\"screenWidth < 475\"\r\n [class.over-y]=\"styles?.positionLayout?.value === 'right' || styles?.positionLayout?.value === 'left'\"\r\n [class.row]=\"styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'\"\r\n [class.gap-2]=\"styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'\"\r\n [class.over-x]=\"styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'\"\r\n [class.object-unset]=\"styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'\">\r\n <ng-container *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n <div class=\"item mb-3 bb-3\"\r\n [class.col-md-3]=\"styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom'\"\r\n [class.col-6]=\"screenWidth < 475 && (styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom')\"\r\n (mouseenter)=\"idx = i\" [ngStyle]=\"{\r\n borderBottom: styles?.background?.accentBackgroundType === 'Solid' && idx == i\r\n ? '3px solid ' + styles?.background?.accentColor\r\n : styles?.background?.accentBackgroundType === 'Gradient' && idx == i ? '3px solid transparent' : '',\r\n borderImage: styles?.background?.accentBackgroundType === 'Gradient' && idx == i\r\n ? 'linear-gradient(' + getGradientDirection(styles?.background?.gradientDirection) + ', ' + styles?.background?.accentColor + ', ' + styles?.background?.secondaryAccentColor + ') 1'\r\n : '',\r\n borderImageSlice: styles?.background?.accentBackgroundType === 'Gradient' ? '1' : ''\r\n }\">\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </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\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.main-container{position:relative;height:auto}.item{padding-bottom:10px}.row{flex-wrap:unset!important}.col-md-3{width:24%!important;padding-left:unset!important;padding-right:unset!important}.col-6{width:50%!important}.over-x{overflow-x:scroll}.over-y{overflow-y:scroll}.w-100{width:100%!important}.object-unset{aspect-ratio:unset!important}.bb-3{border-bottom:3px solid #e0e0e0}.image-fit{object-fit:none!important;object-position:center!important;width:100%!important;height:100%!important;aspect-ratio:unset!important}.list-items::-webkit-scrollbar{display:flex!important;height:3px}.list-items::-webkit-scrollbar-thumb{background:#d4d4d4}@media screen and (max-width: 475px){.list-items{aspect-ratio:unset!important;object-fit:unset!important}.flex-mob-column-reverse{flex-direction:column-reverse!important}.flex-mob-column{flex-direction:column!important}}\n"] }]
|
|
15732
15874
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
15733
15875
|
type: Input
|
|
15734
15876
|
}], edit: [{
|
|
@@ -15741,7 +15883,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
15741
15883
|
type: Input
|
|
15742
15884
|
}], getScreenSize: [{
|
|
15743
15885
|
type: HostListener,
|
|
15744
|
-
args: ["window:
|
|
15886
|
+
args: ["window:resize", ["$event"]]
|
|
15887
|
+
}], onResize: [{
|
|
15888
|
+
type: HostListener,
|
|
15889
|
+
args: ['window:resize', ['$event']]
|
|
15745
15890
|
}] } });
|
|
15746
15891
|
|
|
15747
15892
|
class NewsLetterComponentComponent extends BaseSection {
|