npm - simpo-component-library - Versions diffs - 3.6.483 → 3.6.484 - Mend

simpo-component-library 3.6.483 → 3.6.484

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/fesm2022/simpo-component-library.mjs CHANGED Viewed

@@ -1199,11 +1199,11 @@ class MediaSelectorComponent {
         });
     }
     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 }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MediaSelectorComponent, isStandalone: true, selector: "simpo-media-selector", viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], ngImport: i0, template: "<section>\r\n  <div class=\"header d-flex justify-content-between align-items-center\">\r\n    <div class=\"heading\">Upload Image</div>\r\n    <mat-icon (click)=\"_dialogRef.close()\"\r\n      class=\"d-flex align-items-center justify-content-center f-18 cp\">close</mat-icon>\r\n  </div>\r\n  <div class=\"tabs d-flex align-items-center justify-content-between\">\r\n    <div *ngFor=\"let tab of tabs\" [ngClass]=\"{'selectedTab': activeTab === tab}\" (click)=\"activeTab = tab\">{{tab}}</div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"activeTab === 'Unsplash'\">\r\n    <ng-container *ngTemplateOutlet=\"unsplashImagesTemplate\"></ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"activeTab === 'Upload'\">\r\n    <ng-container *ngTemplateOutlet=\"uploadImageTemplate\"></ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"activeTab === 'Library'\">\r\n    <ng-container *ngTemplateOutlet=\"imageLibraryTemplate\"></ng-container>\r\n  </ng-container>\r\n\r\n  <div class=\"uploadButton d-flex\" *ngIf=\"this.selectedImage.size > 0\">\r\n    <button (click)=\"uploadImage()\" [disabled]=\"buttonLoader\">\r\n      <span *ngIf=\"buttonLoader\"><i class=\"fas fa-circle-notch fa-spin\"></i>&nbsp;Loading</span>\r\n      <span *ngIf=\"!buttonLoader\">Upload Image</span></button>\r\n  </div>\r\n</section>\r\n\r\n<ng-template #unsplashImagesTemplate>\r\n\r\n  <div class=\"input-container d-flex align-items-center\">\r\n    <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/314661c1741844234442Vector%20%281%29.png\"\r\n      alt=\"search-bar-icon\">\r\n    <input type=\"text\" placeholder=\"Search images\" [formControl]=\"searchControl\">\r\n  </div>\r\n  <cdk-virtual-scroll-viewport [itemSize]=\"imageSize\" [minBufferPx]=\"800\" [maxBufferPx]=\"1600\" class=\"scroll-container\">\r\n    <div class=\"row image-container\">\r\n      <div class=\"col-md-4 col-6\" *cdkVirtualFor=\"let image of unsplashImages\">\r\n        <img [lazyLoad]=\"image.urls.thumb\" [errorImage]=\"'assets/error.jpg'\" (click)=\"selectUnsplashImage(image)\"\r\n          [ngClass]=\"{'selectedImage': selectedImage.has(image.id)}\" alt=\"Image\" class=\"cp\" />\r\n      </div>\r\n    </div>\r\n  </cdk-virtual-scroll-viewport>\r\n\r\n  <p *ngIf=\"isLoading\">Loading more results...</p>\r\n\r\n</ng-template>\r\n\r\n<ng-template #uploadImageTemplate>\r\n  <div>\r\n    <div class=\"image-upload-container\">\r\n      <div class=\"upload-img-container d-flex align-items-center justify-content-center\">\r\n        <img lazy\r\n          src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\"\r\n          alt=\"upload-image\" class=\"upload-img\">\r\n      </div>\r\n      <div class=\"text-container text-center\">\r\n        <div class=\"top-text\">Choose a file or drag and drop it here</div>\r\n        <div class=\"middle-text\">JPEG, PNG formats up to 50MB</div>\r\n        <div class=\"upload-btn d-flex align-items-center justify-content-center\">\r\n          <div class=\"uploads cp\" (click)=\"fileInput.click()\">\r\n            Upload\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <input type=\"file\" style=\"display: none\" (change)=\"uploadImageFromSystem($event)\" [multiple]=\"multiple\"\r\n      accept=\"image/png, image/jpeg, image/jpg, image/gif\" #fileInput />\r\n\r\n    <div class=\"row image-container mt-3 h-30-overflow\">\r\n      <ng-container *ngFor=\"let image of selectedImage | keyvalue\">\r\n        <div class=\"col-md-4 systemImage\" *ngIf=\"image.value.file\">\r\n          <img [src]=\"image.value.assets[0].url\" alt=\"Image\" *ngIf=\"!image.value.assets[0].url?.includes('data:video')\" />\r\n          <video [src]=\"image.value.assets[0].url\" class=\"w-100 h-100\"\r\n            *ngIf=\"image.value.assets[0].url?.includes('data:video')\" muted loop></video>\r\n          <mat-icon (click)=\"deleteSystemImage(image.key)\">delete</mat-icon>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #imageLibraryTemplate>\r\n  <div class=\"row image-container mt-3 h-75-overflow\">\r\n    <ng-container *ngIf=\"imageLibrary.length > 0; else emptyScreen\">\r\n      <ng-container *ngFor=\"let image of imageLibrary\">\r\n        <div class=\"col-md-4 col-6\">\r\n          <img [src]=\"image.assets[0].url\" alt=\"Image\" (click)=\"selectFromImageLibrary(image)\"\r\n            [ngClass]=\"{'selectedImage': selectedImage.has(image.uniqueId)}\" *ngIf=\"!image.assets[0].url?.includes('.mp4')\" />\r\n          <video [src]=\"image.assets[0].url\" class=\"w-100 h-100\" (click)=\"selectFromImageLibrary(image)\"\r\n            [ngClass]=\"{'selectedImage': selectedImage.has(image.uniqueId)}\" *ngIf=\"image.assets[0].url?.includes('.mp4')\" muted loop></video>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n  <ng-template #emptyScreen>\r\n    <div class=\"empty-container d-flex justify-content-center align-items-center w-100 flex-column\">\r\n      <div class=\"empty-img-container d-flex justify-content-center align-items-center\">\r\n        <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/935737c1743411798188image%20%287%29.png\"\r\n          alt=\"\">\r\n      </div>\r\n      <div class=\"empty-main-text\">\r\n        Uh-oh!\r\n      </div>\r\n      <div class=\"sub-text-1\">\r\n        No images here\r\n      </div>\r\n      <div class=\"sub-text-2\">\r\n        I looked left, right\u2026 even turned around! Still nothing\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</ng-template>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}section{height:100%;position:relative}img{width:100%;height:200px}.scroll-container{height:calc(66vh + -0px);width:100%;overflow-y:scroll}.selectedImage{position:relative;border-radius:10px;overflow:hidden;border:3px solid hsl(227,52%,36%)}.uploadButton{position:absolute;bottom:0;padding:10px;background:#fff;width:100%;justify-content:end;box-shadow:0 0 4px #00000040}.uploadButton button{background:var(--primary-bg-color);color:#fff;font-weight:600;border:unset;font-size:15px!important;padding:8px;border-radius:8px;width:15%!important}.systemImage{position:relative}.systemImage mat-icon{display:none}.systemImage:hover mat-icon{display:inline;position:absolute;right:15px;top:5px;color:red;cursor:pointer}.f-18{font-size:18px}.header{padding:10px;box-shadow:0 0 4px #00000040}.header .heading{font-size:15px;font-weight:600;line-height:24px}.header mat-icon{color:#2d264b}.tabs{padding:20px 40px}.tabs div{width:22%;cursor:pointer;text-align:center;padding:8px}.selectedTab{background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent;font-weight:500;color:#fff;box-shadow:0 0 4px #00000040;border-radius:10px;font-weight:600;position:relative}.selectedTab:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.input-container{padding:6px 10px;gap:10px;margin:0 40px 20px;box-shadow:0 0 4px #00000040;border-radius:13px}.input-container input{width:90%;border:unset;appearance:unset;outline:unset}.input-container img{width:20px;height:20px}.image-container{margin:0 40px 20px}.image-container div{margin-bottom:20px}.image-container div img{border-radius:13px}.image-upload-container{margin:0 40px;border-radius:17px;padding:15px;border:3px dashed rgba(44,44,44,.6)}.upload-img{width:12%;height:10%}.cp{cursor:pointer}.middle-text{font-size:15px;color:#686868}.top-text{background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent;font-size:17px;font-weight:600}.uploads{width:20%;padding:8px;background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent;font-size:17px;font-weight:600;position:relative;margin-top:15px}.uploads:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.h-30-overflow{height:calc(30vh + -0px);overflow-y:scroll}.h-75-overflow{height:calc(75vh + -0px);overflow-y:scroll}.empty-main-text{font-weight:900;font-size:42px;background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent}.sub-text-1{font-size:19px;font-weight:600;color:#101010e5}.sub-text-2{font-size:16px;font-weight:600;color:#101010e5}@media screen and (max-width : 475px){.tabs div{width:30%!important}.uploadButton button{width:35%!important}.uploads{width:30%!important}.sub-text-2{text-align:center!important}img{height:150px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: LazyLoadImageModule }, { kind: "directive", type: i7.LazyLoadImageDirective, selector: "[lazyLoad]", inputs: ["lazyLoad", "defaultImage", "errorImage", "scrollTarget", "customObservable", "offset", "useSrcset", "decode", "debug"], outputs: ["onStateChange"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i8$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i8$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MediaSelectorComponent, isStandalone: true, selector: "simpo-media-selector", viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], ngImport: i0, template: "<section>\r\n  <div class=\"header d-flex justify-content-between align-items-center\">\r\n    <div class=\"heading\">Upload Image</div>\r\n    <mat-icon (click)=\"_dialogRef.close()\"\r\n      class=\"d-flex align-items-center justify-content-center f-18 cp\">close</mat-icon>\r\n  </div>\r\n  <div class=\"tabs d-flex align-items-center justify-content-between\">\r\n    <div *ngFor=\"let tab of tabs\" [ngClass]=\"{'selectedTab': activeTab === tab}\" (click)=\"activeTab = tab\">{{tab}}</div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"activeTab === 'Unsplash'\">\r\n    <ng-container *ngTemplateOutlet=\"unsplashImagesTemplate\"></ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"activeTab === 'Upload'\">\r\n    <ng-container *ngTemplateOutlet=\"uploadImageTemplate\"></ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"activeTab === 'Library'\">\r\n    <ng-container *ngTemplateOutlet=\"imageLibraryTemplate\"></ng-container>\r\n  </ng-container>\r\n\r\n  <div class=\"uploadButton d-flex\" *ngIf=\"this.selectedImage.size > 0\">\r\n    <button (click)=\"uploadImage()\" [disabled]=\"buttonLoader\">\r\n      <span *ngIf=\"buttonLoader\"><i class=\"fas fa-circle-notch fa-spin\"></i>&nbsp;Loading</span>\r\n      <span *ngIf=\"!buttonLoader\">Upload Image</span></button>\r\n  </div>\r\n</section>\r\n\r\n<ng-template #unsplashImagesTemplate>\r\n\r\n  <div class=\"input-container d-flex align-items-center\">\r\n    <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/314661c1741844234442Vector%20%281%29.png\"\r\n      alt=\"search-bar-icon\">\r\n    <input type=\"text\" placeholder=\"Search images\" [formControl]=\"searchControl\">\r\n  </div>\r\n  <cdk-virtual-scroll-viewport [itemSize]=\"imageSize\" [minBufferPx]=\"800\" [maxBufferPx]=\"1600\" class=\"scroll-container\">\r\n    <div class=\"row image-container\">\r\n      <div class=\"col-md-4 col-6\" *cdkVirtualFor=\"let image of unsplashImages\">\r\n        <img [lazyLoad]=\"image.urls.thumb\" [errorImage]=\"'assets/error.jpg'\" (click)=\"selectUnsplashImage(image)\"\r\n          [ngClass]=\"{'selectedImage': selectedImage.has(image.id)}\" alt=\"Image\" class=\"cp\" />\r\n      </div>\r\n    </div>\r\n  </cdk-virtual-scroll-viewport>\r\n\r\n  <p *ngIf=\"isLoading\">Loading more results...</p>\r\n\r\n</ng-template>\r\n\r\n<ng-template #uploadImageTemplate>\r\n  <div>\r\n    <div class=\"image-upload-container\">\r\n      <div class=\"upload-img-container d-flex align-items-center justify-content-center\">\r\n        <img lazy\r\n          src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\"\r\n          alt=\"upload-image\" class=\"upload-img\">\r\n      </div>\r\n      <div class=\"text-container text-center\">\r\n        <div class=\"top-text\">Choose a file or drag and drop it here</div>\r\n        <div class=\"middle-text\">JPEG, PNG formats up to 50MB</div>\r\n        <div class=\"upload-btn d-flex align-items-center justify-content-center\">\r\n          <div class=\"uploads cp\" (click)=\"fileInput.click()\">\r\n            Upload\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <input type=\"file\" style=\"display: none\" (change)=\"uploadImageFromSystem($event)\" [multiple]=\"multiple\"\r\n      accept=\"image/png, image/jpeg, image/jpg, image/gif , 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MediaSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-media-selector', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, CdkVirtualScrollViewport, LazyLoadImageModule, ScrollingModule, MatIconModule], template: "<section>\r\n  <div class=\"header d-flex justify-content-between align-items-center\">\r\n    <div class=\"heading\">Upload Image</div>\r\n    <mat-icon (click)=\"_dialogRef.close()\"\r\n      class=\"d-flex align-items-center justify-content-center f-18 cp\">close</mat-icon>\r\n  </div>\r\n  <div class=\"tabs d-flex align-items-center justify-content-between\">\r\n    <div *ngFor=\"let tab of tabs\" [ngClass]=\"{'selectedTab': activeTab === tab}\" (click)=\"activeTab = tab\">{{tab}}</div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"activeTab === 'Unsplash'\">\r\n    <ng-container *ngTemplateOutlet=\"unsplashImagesTemplate\"></ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"activeTab === 'Upload'\">\r\n    <ng-container *ngTemplateOutlet=\"uploadImageTemplate\"></ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"activeTab === 'Library'\">\r\n    <ng-container *ngTemplateOutlet=\"imageLibraryTemplate\"></ng-container>\r\n  </ng-container>\r\n\r\n  <div class=\"uploadButton d-flex\" *ngIf=\"this.selectedImage.size > 0\">\r\n    <button (click)=\"uploadImage()\" [disabled]=\"buttonLoader\">\r\n      <span *ngIf=\"buttonLoader\"><i class=\"fas fa-circle-notch fa-spin\"></i>&nbsp;Loading</span>\r\n      <span *ngIf=\"!buttonLoader\">Upload Image</span></button>\r\n  </div>\r\n</section>\r\n\r\n<ng-template #unsplashImagesTemplate>\r\n\r\n  <div class=\"input-container d-flex align-items-center\">\r\n    <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/314661c1741844234442Vector%20%281%29.png\"\r\n      alt=\"search-bar-icon\">\r\n    <input type=\"text\" placeholder=\"Search images\" [formControl]=\"searchControl\">\r\n  </div>\r\n  <cdk-virtual-scroll-viewport [itemSize]=\"imageSize\" [minBufferPx]=\"800\" [maxBufferPx]=\"1600\" class=\"scroll-container\">\r\n    <div class=\"row image-container\">\r\n      <div class=\"col-md-4 col-6\" *cdkVirtualFor=\"let image of unsplashImages\">\r\n        <img [lazyLoad]=\"image.urls.thumb\" [errorImage]=\"'assets/error.jpg'\" (click)=\"selectUnsplashImage(image)\"\r\n          [ngClass]=\"{'selectedImage': selectedImage.has(image.id)}\" alt=\"Image\" class=\"cp\" />\r\n      </div>\r\n    </div>\r\n  </cdk-virtual-scroll-viewport>\r\n\r\n  <p *ngIf=\"isLoading\">Loading more results...</p>\r\n\r\n</ng-template>\r\n\r\n<ng-template #uploadImageTemplate>\r\n  <div>\r\n    <div class=\"image-upload-container\">\r\n      <div class=\"upload-img-container d-flex align-items-center justify-content-center\">\r\n        <img lazy\r\n          src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\"\r\n          alt=\"upload-image\" class=\"upload-img\">\r\n      </div>\r\n      <div class=\"text-container text-center\">\r\n        <div class=\"top-text\">Choose a file or drag and drop it here</div>\r\n        <div class=\"middle-text\">JPEG, PNG formats up to 50MB</div>\r\n        <div class=\"upload-btn d-flex align-items-center justify-content-center\">\r\n          <div class=\"uploads cp\" (click)=\"fileInput.click()\">\r\n            Upload\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <input type=\"file\" style=\"display: none\" (change)=\"uploadImageFromSystem($event)\" [multiple]=\"multiple\"\r\n      accept=\"image/png, image/jpeg, image/jpg, image/gif\" #fileInput />\r\n\r\n    <div class=\"row image-container mt-3 h-30-overflow\">\r\n      <ng-container *ngFor=\"let image of selectedImage | keyvalue\">\r\n        <div class=\"col-md-4 systemImage\" *ngIf=\"image.value.file\">\r\n          <img [src]=\"image.value.assets[0].url\" alt=\"Image\" *ngIf=\"!image.value.assets[0].url?.includes('data:video')\" />\r\n          <video [src]=\"image.value.assets[0].url\" class=\"w-100 h-100\"\r\n            *ngIf=\"image.value.assets[0].url?.includes('data:video')\" muted loop></video>\r\n          <mat-icon (click)=\"deleteSystemImage(image.key)\">delete</mat-icon>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #imageLibraryTemplate>\r\n  <div class=\"row image-container mt-3 h-75-overflow\">\r\n    <ng-container *ngIf=\"imageLibrary.length > 0; else emptyScreen\">\r\n      <ng-container *ngFor=\"let image of imageLibrary\">\r\n        <div class=\"col-md-4 col-6\">\r\n          <img [src]=\"image.assets[0].url\" alt=\"Image\" (click)=\"selectFromImageLibrary(image)\"\r\n            [ngClass]=\"{'selectedImage': selectedImage.has(image.uniqueId)}\" *ngIf=\"!image.assets[0].url?.includes('.mp4')\" />\r\n          <video [src]=\"image.assets[0].url\" class=\"w-100 h-100\" (click)=\"selectFromImageLibrary(image)\"\r\n            [ngClass]=\"{'selectedImage': selectedImage.has(image.uniqueId)}\" *ngIf=\"image.assets[0].url?.includes('.mp4')\" muted loop></video>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n  <ng-template #emptyScreen>\r\n    <div class=\"empty-container d-flex justify-content-center align-items-center w-100 flex-column\">\r\n      <div class=\"empty-img-container d-flex justify-content-center align-items-center\">\r\n        <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/935737c1743411798188image%20%287%29.png\"\r\n          alt=\"\">\r\n      </div>\r\n      <div class=\"empty-main-text\">\r\n        Uh-oh!\r\n      </div>\r\n      <div class=\"sub-text-1\">\r\n        No images here\r\n      </div>\r\n      <div class=\"sub-text-2\">\r\n        I looked left, right\u2026 even turned around! Still nothing\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</ng-template>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}section{height:100%;position:relative}img{width:100%;height:200px}.scroll-container{height:calc(66vh + -0px);width:100%;overflow-y:scroll}.selectedImage{position:relative;border-radius:10px;overflow:hidden;border:3px solid hsl(227,52%,36%)}.uploadButton{position:absolute;bottom:0;padding:10px;background:#fff;width:100%;justify-content:end;box-shadow:0 0 4px #00000040}.uploadButton button{background:var(--primary-bg-color);color:#fff;font-weight:600;border:unset;font-size:15px!important;padding:8px;border-radius:8px;width:15%!important}.systemImage{position:relative}.systemImage mat-icon{display:none}.systemImage:hover mat-icon{display:inline;position:absolute;right:15px;top:5px;color:red;cursor:pointer}.f-18{font-size:18px}.header{padding:10px;box-shadow:0 0 4px #00000040}.header .heading{font-size:15px;font-weight:600;line-height:24px}.header mat-icon{color:#2d264b}.tabs{padding:20px 40px}.tabs div{width:22%;cursor:pointer;text-align:center;padding:8px}.selectedTab{background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent;font-weight:500;color:#fff;box-shadow:0 0 4px #00000040;border-radius:10px;font-weight:600;position:relative}.selectedTab:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.input-container{padding:6px 10px;gap:10px;margin:0 40px 20px;box-shadow:0 0 4px #00000040;border-radius:13px}.input-container input{width:90%;border:unset;appearance:unset;outline:unset}.input-container img{width:20px;height:20px}.image-container{margin:0 40px 20px}.image-container div{margin-bottom:20px}.image-container div img{border-radius:13px}.image-upload-container{margin:0 40px;border-radius:17px;padding:15px;border:3px dashed rgba(44,44,44,.6)}.upload-img{width:12%;height:10%}.cp{cursor:pointer}.middle-text{font-size:15px;color:#686868}.top-text{background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent;font-size:17px;font-weight:600}.uploads{width:20%;padding:8px;background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent;font-size:17px;font-weight:600;position:relative;margin-top:15px}.uploads:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.h-30-overflow{height:calc(30vh + -0px);overflow-y:scroll}.h-75-overflow{height:calc(75vh + -0px);overflow-y:scroll}.empty-main-text{font-weight:900;font-size:42px;background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent}.sub-text-1{font-size:19px;font-weight:600;color:#101010e5}.sub-text-2{font-size:16px;font-weight:600;color:#101010e5}@media screen and (max-width : 475px){.tabs div{width:30%!important}.uploadButton button{width:35%!important}.uploads{width:30%!important}.sub-text-2{text-align:center!important}img{height:150px}}\n"] }]
+            args: [{ selector: 'simpo-media-selector', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, CdkVirtualScrollViewport, LazyLoadImageModule, ScrollingModule, MatIconModule], template: "<section>\r\n  <div class=\"header d-flex justify-content-between align-items-center\">\r\n    <div class=\"heading\">Upload Image</div>\r\n    <mat-icon (click)=\"_dialogRef.close()\"\r\n      class=\"d-flex align-items-center justify-content-center f-18 cp\">close</mat-icon>\r\n  </div>\r\n  <div class=\"tabs d-flex align-items-center justify-content-between\">\r\n    <div *ngFor=\"let tab of tabs\" [ngClass]=\"{'selectedTab': activeTab === tab}\" (click)=\"activeTab = tab\">{{tab}}</div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"activeTab === 'Unsplash'\">\r\n    <ng-container *ngTemplateOutlet=\"unsplashImagesTemplate\"></ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"activeTab === 'Upload'\">\r\n    <ng-container *ngTemplateOutlet=\"uploadImageTemplate\"></ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"activeTab === 'Library'\">\r\n    <ng-container *ngTemplateOutlet=\"imageLibraryTemplate\"></ng-container>\r\n  </ng-container>\r\n\r\n  <div class=\"uploadButton d-flex\" *ngIf=\"this.selectedImage.size > 0\">\r\n    <button (click)=\"uploadImage()\" [disabled]=\"buttonLoader\">\r\n      <span *ngIf=\"buttonLoader\"><i class=\"fas fa-circle-notch fa-spin\"></i>&nbsp;Loading</span>\r\n      <span *ngIf=\"!buttonLoader\">Upload Image</span></button>\r\n  </div>\r\n</section>\r\n\r\n<ng-template #unsplashImagesTemplate>\r\n\r\n  <div class=\"input-container d-flex align-items-center\">\r\n    <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/314661c1741844234442Vector%20%281%29.png\"\r\n      alt=\"search-bar-icon\">\r\n    <input type=\"text\" placeholder=\"Search images\" [formControl]=\"searchControl\">\r\n  </div>\r\n  <cdk-virtual-scroll-viewport [itemSize]=\"imageSize\" [minBufferPx]=\"800\" [maxBufferPx]=\"1600\" class=\"scroll-container\">\r\n    <div class=\"row image-container\">\r\n      <div class=\"col-md-4 col-6\" *cdkVirtualFor=\"let image of unsplashImages\">\r\n        <img [lazyLoad]=\"image.urls.thumb\" [errorImage]=\"'assets/error.jpg'\" (click)=\"selectUnsplashImage(image)\"\r\n          [ngClass]=\"{'selectedImage': selectedImage.has(image.id)}\" alt=\"Image\" class=\"cp\" />\r\n      </div>\r\n    </div>\r\n  </cdk-virtual-scroll-viewport>\r\n\r\n  <p *ngIf=\"isLoading\">Loading more results...</p>\r\n\r\n</ng-template>\r\n\r\n<ng-template #uploadImageTemplate>\r\n  <div>\r\n    <div class=\"image-upload-container\">\r\n      <div class=\"upload-img-container d-flex align-items-center justify-content-center\">\r\n        <img lazy\r\n          src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\"\r\n          alt=\"upload-image\" class=\"upload-img\">\r\n      </div>\r\n      <div class=\"text-container text-center\">\r\n        <div class=\"top-text\">Choose a file or drag and drop it here</div>\r\n        <div class=\"middle-text\">JPEG, PNG formats up to 50MB</div>\r\n        <div class=\"upload-btn d-flex align-items-center justify-content-center\">\r\n          <div class=\"uploads cp\" (click)=\"fileInput.click()\">\r\n            Upload\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <input type=\"file\" style=\"display: none\" (change)=\"uploadImageFromSystem($event)\" [multiple]=\"multiple\"\r\n      accept=\"image/png, image/jpeg, image/jpg, image/gif , 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"] }]
         }], ctorParameters: () => [{ type: ImageUplaodService }, { type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -1654,6 +1654,7 @@ class TextEditorComponent {
         this.editorService = editorService;
         this.platformId = platformId;
         this.ngZone = ngZone;
+        this.lastGradientSpan = null;
         this.value = '<p>Hello this is palash makhija</p>';
         this.valueChange = new EventEmitter();
         this.editable = false;
@@ -1674,6 +1675,7 @@ class TextEditorComponent {
         };
         this.selectedColorType = 'SOLID';
         this.primaryColor = '#000000';
+        this.secondaryColor = '#bd5f5fff';
         this.savedRange = null;
     }
     ngOnInit() {
@@ -1686,6 +1688,53 @@ class TextEditorComponent {
             document.removeEventListener('mousedown', this.hideToolbar.bind(this));
         }
     }
+    selectRange(range) {
+        const sel = window.getSelection();
+        if (!sel)
+            return;
+        sel.removeAllRanges();
+        sel.addRange(range);
+    }
+    markSelection() {
+        const sel = window.getSelection();
+        if (!sel || sel.rangeCount === 0)
+            return null;
+        const range = sel.getRangeAt(0).cloneRange();
+        const start = document.createElement('span');
+        const end = document.createElement('span');
+        start.setAttribute('data-sel-start', '1');
+        end.setAttribute('data-sel-end', '1');
+        start.style.display = 'inline-block';
+        start.style.width = '0';
+        start.style.height = '0';
+        end.style.display = 'inline-block';
+        end.style.width = '0';
+        end.style.height = '0';
+        const endRange = range.cloneRange();
+        endRange.collapse(false); // at end
+        endRange.insertNode(end);
+        const startRange = range.cloneRange();
+        startRange.collapse(true); // at start
+        startRange.insertNode(start);
+        return { start, end };
+    }
+    restoreSelectionFromMarkers(markers) {
+        if (!markers)
+            return;
+        const { start, end } = markers;
+        const sel = window.getSelection();
+        if (!sel)
+            return;
+        const newRange = document.createRange();
+        newRange.setStartAfter(start);
+        newRange.setEndBefore(end);
+        // Clean up markers
+        start.parentNode?.removeChild(start);
+        end.parentNode?.removeChild(end);
+        sel.removeAllRanges();
+        sel.addRange(newRange);
+        this.savedRange = newRange.cloneRange();
+    }
     showToolbar(event) {
         if (!isPlatformBrowser(this.platformId) || !this.editable)
             return;
@@ -1719,13 +1768,99 @@ class TextEditorComponent {
             this.show = false;
         }
     }
+    rememberSelection(e) {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        const sel = window.getSelection();
+        if (sel && sel.rangeCount > 0) {
+            this.savedRange = sel.getRangeAt(0).cloneRange();
+        }
+        e.preventDefault();
+    }
+    getActiveRange() {
+        const sel = window.getSelection();
+        // Prefer saved clone, else live selection clone
+        const candidate = this.savedRange
+            ?? (sel && sel.rangeCount > 0 ? sel.getRangeAt(0) : null);
+        if (!candidate)
+            return null;
+        const range = ('cloneRange' in candidate) ? candidate.cloneRange() : candidate;
+        return range && !range.collapsed ? range : null;
+    }
+    setColorMode(mode) {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        this.selectedColorType = mode;
+        const markers = this.markSelection();
+        if (!markers)
+            return;
+        const markedRange = document.createRange();
+        markedRange.setStartAfter(markers.start);
+        markedRange.setEndBefore(markers.end);
+        if (mode === 'GRADIENT') {
+            const gradient = `linear-gradient(to right, ${this.primaryColor} 0%, ${this.secondaryColor} 100%)`;
+            this.wrapRangeWithGradient(markedRange, gradient);
+            markers.start.parentNode?.removeChild(markers.start);
+            markers.end.parentNode?.removeChild(markers.end);
+            const sel = window.getSelection();
+            if (sel && sel.rangeCount > 0)
+                this.savedRange = sel.getRangeAt(0).cloneRange();
+            this.valueChange.emit(this.editor.nativeElement.innerHTML);
+            return;
+        }
+        this.unwrapGradientInRange(markedRange);
+        this.restoreSelectionFromMarkers(markers);
+        this.setStyleWithCSS(true);
+        document.execCommand('foreColor', false, this.toolbarData.selectedColor || '#000000');
+        const sel = window.getSelection();
+        if (sel && sel.rangeCount > 0)
+            this.savedRange = sel.getRangeAt(0).cloneRange();
+        this.valueChange.emit(this.editor.nativeElement.innerHTML);
+    }
+    wrapRangeWithGradient(range, gradient) {
+        const span = document.createElement('span');
+        span.setAttribute('data-gradient', 'true');
+        span.style.backgroundImage = gradient;
+        span.style.backgroundClip = 'text';
+        span.style.webkitBackgroundClip = 'text';
+        span.style.webkitTextFillColor = 'transparent';
+        span.style.color = 'transparent';
+        const frag = range.extractContents();
+        span.appendChild(frag);
+        range.insertNode(span);
+        const sel = window.getSelection();
+        sel?.removeAllRanges();
+        const newRange = document.createRange();
+        newRange.selectNodeContents(span);
+        sel?.addRange(newRange);
+        this.lastGradientSpan = span;
+    }
+    unwrapGradientInRange(range) {
+        const root = this.editor?.nativeElement;
+        if (!root)
+            return;
+        const spans = Array.from(root.querySelectorAll('span[data-gradient="true"]'));
+        for (let i = spans.length - 1; i >= 0; i--) {
+            const span = spans[i];
+            try {
+                if (range.intersectsNode(span)) {
+                    while (span.firstChild) {
+                        span.parentNode?.insertBefore(span.firstChild, span);
+                    }
+                    span.parentNode?.removeChild(span);
+                }
+            }
+            catch (err) {
+                continue;
+            }
+        }
+    }
     hideToolbar(event) {
         if (!isPlatformBrowser(this.platformId) || !this.editable)
             return;
         const clickedInsideEditor = this.editor?.nativeElement.contains(event.target);
         const clickedInsideToolbar = this.toolbar?.nativeElement.contains(event.target);
         const clickedInsideSuggestion = this.suggestion?.nativeElement.contains(event.target);
-        // Hide the toolbar if the click is outside both the editor and toolbar
         if (!clickedInsideEditor && !clickedInsideToolbar) {
             this.show = false;
         }
@@ -1736,20 +1871,6 @@ class TextEditorComponent {
     formatText(command, value = '') {
         if (!isPlatformBrowser(this.platformId))
             return;
-        //   if (command === 'formatBlock') {
-        //     const selection = window.getSelection();
-        //     if (!selection || selection.rangeCount === 0) return;
-        //     const range = selection.getRangeAt(0);
-        //     const selectedText = selection.toString();
-        //     if (selectedText) {
-        //         const newElement = document.createElement(value);
-        //         newElement.textContent = selectedText;
-        //         range.deleteContents();
-        //         range.insertNode(newElement);
-        //         this.toolbarData.selectedHeading = value;
-        //         return;
-        //     }
-        // }
         document.execCommand(command, false, value);
         if (command === 'bold')
             this.toolbarData.isBold = !this.toolbarData.isBold;
@@ -1757,20 +1878,41 @@ class TextEditorComponent {
             this.toolbarData.isItalic = !this.toolbarData.isItalic;
         if (command === 'underline')
             this.toolbarData.isUnderlined = !this.toolbarData.isUnderlined;
-        if (command === 'insertOrderedList' || command === 'insertUnorderedList')
+        if (command === 'insertOrderedList' || command === 'insertUnorderedList') {
             this.toolbarData.selectedList = command === this.toolbarData.selectedList ? '' : command;
+            this.updateFSforOL();
+            // Apply current size to the list wrapper and items
+        }
         if (command === 'justifyLeft' || command === 'justifyCenter' || command === 'justifyRight')
             this.toolbarData.selectedAlignment = command === this.toolbarData.selectedAlignment ? '' : command;
         if (command === 'formatBlock')
             this.toolbarData.selectedHeading = value;
     }
+    updateFSforOL() {
+        const cssSize = this.toolbarData.selectedSize;
+        if (cssSize) {
+            const sel = window.getSelection();
+            if (sel && sel.rangeCount > 0) {
+                const focus = sel.focusNode;
+                const baseEl = (focus.nodeType === Node.ELEMENT_NODE
+                    ? focus
+                    : focus.parentElement) || null;
+                const listEl = baseEl?.closest?.('ol, ul');
+                if (listEl) {
+                    listEl.style.fontSize = cssSize;
+                    listEl.querySelectorAll('li').forEach(li => {
+                        li.style.fontSize = cssSize;
+                    });
+                }
+            }
+        }
+    }
     setStyleWithCSS(enable) {
         try {
             document.execCommand('styleWithCSS', false, enable ? 'true' : 'false');
         }
         catch { /* some engines ignore */ }
     }
-    // 2) Map UI sizes -> legacy steps (1..7) used by 'fontSize'
     toLegacyFontStep(cssSize) {
         const map = {
             '': 3,
@@ -1783,7 +1925,6 @@ class TextEditorComponent {
         };
         return String(map.hasOwnProperty(cssSize) ? map[cssSize] : 3);
     }
-    // 3) Optional normalization: convert any <font size="..."> produced by execCommand to <span style="font-size: cssSize">
     normalizeFontSizeToCss(cssSize) {
         const container = this.editor?.nativeElement;
         if (!container)
@@ -1809,9 +1950,7 @@ class TextEditorComponent {
         if (range.collapsed)
             return;
         this.ngZone.runOutsideAngular(() => {
-            // Ask engine to style with CSS where possible (string 'true'/'false')
             this.setStyleWithCSS(true);
-            // Apply legacy step, then normalize to exact CSS size
             const step = this.toLegacyFontStep(cssSize);
             document.execCommand('fontSize', false, step);
             this.normalizeFontSizeToCss(cssSize);
@@ -1833,13 +1972,9 @@ class TextEditorComponent {
         if (selection.getRangeAt(0).collapsed)
             return;
         this.ngZone.runOutsideAngular(() => {
-            // Prefer CSS styling where supported
-            this.setStyleWithCSS(true); // string 'true'/'false' required by execCommand typings [4]
-            // Optional: clear any gradient wrappers in selection so the color shows
-            // (gradient styles use -webkit-text-fill-color: transparent)
-            // this.clearGradientInSelection(); // Uncomment if gradients were used before
-            // Apply solid color to the selection
-            document.execCommand('foreColor', false, color); // sets text color without inserting a span [1]
+            this.setStyleWithCSS(true);
+            //  this.unwrapGradientInSelection();
+            document.execCommand('foreColor', false, color);
             setTimeout(() => {
                 this.ngZone.run(() => {
                     this.toolbarData.selectedColor = color;
@@ -1917,17 +2052,11 @@ class TextEditorComponent {
         this.ngZone.runOutsideAngular(() => {
             // Restore previous selection first
             this.restoreSelection();
-            // Wait a little for browser selection update before saving again and applying gradient
             setTimeout(() => {
-                // Save current selection fresh, after restore has settled
                 this.saveSelection();
-                // Build the gradient string (fixed missing ')', and use 100% end stop)
                 const gradient = `linear-gradient(to right, ${this.primaryColor} 0%, ${this.secondaryColor} 100%)`;
-                // Apply or update the gradient styling
                 this.applyGradientToText(gradient);
-                // Restore the selection explicitly again after DOM mutation
                 this.restoreSelection();
-                // Emit updated HTML content after a short delay inside Angular zone (safe for change detection)
                 setTimeout(() => {
                     this.ngZone.run(() => {
                         this.valueChange.emit(this.editor.nativeElement.innerHTML);
@@ -1943,7 +2072,6 @@ class TextEditorComponent {
         const root = this.editor?.nativeElement;
         if (!root)
             return;
-        // If a gradient span already exists in the editor, just update its background image and stop
         const existing = root.querySelector('span[data-gradient="true"]');
         if (existing) {
             existing.style.backgroundImage = gradientValue;
@@ -1954,7 +2082,6 @@ class TextEditorComponent {
         const range = selection.getRangeAt(0);
         if (!range || range.collapsed)
             return;
-        // Remove previous cleanup to avoid unwrapping; we want to keep the single wrapper
         const selectedContent = range.extractContents();
         const span = document.createElement('span');
         span.setAttribute('data-gradient', 'true'); // mark for future updates
@@ -2023,7 +2150,7 @@ class TextEditorComponent {
         return this.value;
     }
     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 }); }
-    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"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextEditorComponent, decorators: [{
             type: Component,
@@ -2032,7 +2159,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         FormsModule,
                         ContenteditableValueAccessor,
                         MatIconModule
-                    ], 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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: ElementServiceService }, { type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -4267,15 +4394,18 @@ class BackgroundDirective {
         this.el = el;
         this.eventService = eventService;
         this.scrollValue = 0;
+        this.videoElementId = ``;
         if (this.eventEmmitter) {
             this.eventEmmitter.unsubscribe();
         }
         this.eventEmmitter = this.eventService.backgroundImageChangeCheck.subscribe((res) => {
+            this.videoElementId = `simpo-bg-video-${this.el?.nativeElement?.id}`;
             if (this.el.nativeElement.id === res.id || res.globalThemeChange) {
                 if (res.data?.showImage && this?.scrollValue == 0) {
                     if (this.simpoBackground?.image.includes('.mp4')) {
                         this.el.nativeElement.style.setProperty('background-image', '');
                         const videoElement = document.createElement('video');
+                        videoElement.id = this.videoElementId;
                         videoElement.src = this.simpoBackground.image;
                         videoElement.autoplay = true;
                         videoElement.loop = true;
@@ -4294,8 +4424,8 @@ class BackgroundDirective {
                         this.el.nativeElement.appendChild(videoElement);
                         return;
                     }
-                    if (this.el.nativeElement.querySelector('video'))
-                        this.el.nativeElement.removeChild(this.el.nativeElement.querySelector('video'));
+                    if (this.videoElementId && this.el.nativeElement.querySelector(`#${this.videoElementId}`))
+                        this.el.nativeElement.removeChild(this.el.nativeElement.querySelector(`#${this.videoElementId}`));
                     this.el.nativeElement.style.setProperty('background-image', `url(${res.data.image})`);
                     this.el.nativeElement.style.setProperty('background-position', `${res.data.position?.x}% ${res.data.position?.y}%`);
                     this.el.nativeElement.style.setProperty('background-repeat', `no-repeat`);
@@ -4303,8 +4433,8 @@ class BackgroundDirective {
                     this.el.nativeElement.style.setProperty('color', this.getTextColor(res.data?.color));
                 }
                 else {
-                    if (this.el.nativeElement.querySelector('video'))
-                        this.el.nativeElement.removeChild(this.el.nativeElement.querySelector('video'));
+                    if (this.videoElementId && this.el.nativeElement.querySelector(`#${this.videoElementId}`))
+                        this.el.nativeElement.removeChild(this.el.nativeElement.querySelector(`#${this.videoElementId}`));
                     if (this.simpoBackground?.backgroundType === 'Gradient') {
                         const direction = GradientDirection[this.simpoBackground.backgroundGradientDirection || GradientDirection.DOWN];
                         const gradientColor = direction != GradientDirection.DOWN ? `linear-gradient(${direction},${this.simpoBackground.color},${this.simpoBackground.secondaryColor})` :
@@ -4366,29 +4496,30 @@ class BackgroundDirective {
     ngOnChanges(change) {
         this.el.nativeElement.style.setProperty('color', this.getTextColor(this.simpoBackground?.color ? this.simpoBackground?.color : '#ffffff'));
         if (this.simpoBackground?.showImage) {
-            if (this.simpoBackground?.image.includes('.mp4')) {
-                this.el.nativeElement.style.setProperty('background-image', '');
-                const videoElement = document.createElement('video');
-                videoElement.src = this.simpoBackground.image;
-                videoElement.autoplay = true;
-                videoElement.loop = true;
-                videoElement.muted = true;
-                videoElement.playsInline = true;
-                // Style the video element
-                videoElement.style.position = 'absolute';
-                videoElement.style.right = '0';
-                videoElement.style.bottom = '0';
-                videoElement.style.minWidth = '100%';
-                videoElement.style.minHeight = '100%';
-                videoElement.style.width = '100%';
-                videoElement.style.height = '100%';
-                videoElement.style.zIndex = '-1';
-                videoElement.style.objectFit = 'cover';
-                this.el.nativeElement.appendChild(videoElement);
-                return;
-            }
-            if (this.el.nativeElement.querySelector('video'))
-                this.el.nativeElement.removeChild(this.el.nativeElement.querySelector('video'));
+            // if (this.simpoBackground?.image.includes('.mp4')) {
+            //   this.el.nativeElement.style.setProperty('background-image', '');
+            //   const videoElement = document.createElement('video');
+            //   videoElement.id = this.videoElementId;
+            //   videoElement.src = this.simpoBackground.image;
+            //   videoElement.autoplay = true;
+            //   videoElement.loop = true;
+            //   videoElement.muted = true;
+            //   videoElement.playsInline = true;
+            //   // Style the video element
+            //   videoElement.style.position = 'absolute';
+            //   videoElement.style.right = '0';
+            //   videoElement.style.bottom = '0';
+            //   videoElement.style.minWidth = '100%';
+            //   videoElement.style.minHeight = '100%';
+            //   videoElement.style.width = '100%';
+            //   videoElement.style.height = '100%';
+            //   videoElement.style.zIndex = '-1';
+            //   videoElement.style.objectFit = 'cover';
+            //   this.el.nativeElement.appendChild(videoElement);
+            //   return;
+            // }
+            if (this.videoElementId && this.el.nativeElement.querySelector(`#${this.videoElementId}`))
+                this.el.nativeElement.removeChild(this.el.nativeElement.querySelector(`#${this.videoElementId}`));
             this.el.nativeElement.style.setProperty('background-image', `url(${this.simpoBackground.image})`);
             this.el.nativeElement.style.setProperty('background-position', `${this.simpoBackground.position?.x}% ${this.simpoBackground.position?.y}%`);
             this.el.nativeElement.style.setProperty('background-repeat', `no-repeat`);
@@ -4396,8 +4527,8 @@ class BackgroundDirective {
             this.el.nativeElement.style.setProperty('color', this.getTextColor(this.simpoBackground?.color ? this.simpoBackground?.color : '#ffffff'));
         }
         else {
-            if (this.el.nativeElement.querySelector('video'))
-                this.el.nativeElement.removeChild(this.el.nativeElement.querySelector('video'));
+            if (this.videoElementId && this.el.nativeElement.querySelector(`#${this.videoElementId}`))
+                this.el.nativeElement.removeChild(this.el.nativeElement.querySelector(`#${this.videoElementId}`));
             if (this.simpoBackground?.backgroundType === 'Gradient' && this.simpoBackground?.backgroundAnimation == 'NONE') {
                 const direction = GradientDirection[this.simpoBackground.backgroundGradientDirection || GradientDirection.DOWN];
                 const gradientColor = direction != GradientDirection.DOWN ? `linear-gradient(${direction},${this.simpoBackground.color},${this.simpoBackground.secondaryColor})` :
@@ -4406,7 +4537,8 @@ class BackgroundDirective {
                 this.el.nativeElement.style.setProperty('color', this.getTextColor(gradientColor));
                 return;
             }
-            // this.el.nativeElement.removeChild(this.el.nativeElement.querySelector('video'));
+            if (this.videoElementId && this.el.nativeElement.querySelector(`#${this.videoElementId}`))
+                this.el.nativeElement.removeChild(this.el.nativeElement.querySelector(`#${this.videoElementId}`));
             this.el.nativeElement.style.setProperty('background-color', this.simpoBackground?.color);
             this.el.nativeElement.style.setProperty('background-image', ``);
             if (this.simpoBackground?.backgroundAnimation === 'DANCING_DOTS') {
@@ -9909,7 +10041,7 @@ class ContactUsComponent extends BaseSection {
         return this.styles?.layout?.align === 'left' ? 'justify-content-start' : this.styles?.layout?.align === 'right' ? 'justify-content-end' : 'justify-content-center';
     }
     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 }); }
-    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:
+    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:
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: 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"] }] }); }
 }
@@ -9948,7 +10080,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SimpoContainerAligment,
                         ButtonEditorDirective,
                         ImageEditorDirective
-                    ], 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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: EventsService }, { type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -12012,7 +12144,7 @@ class TestimonialFullwidthComponent extends BaseSection {
         return this.content?.listItem?.data?.length || 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TestimonialFullwidthComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    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:
+    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:
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: 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"] }] }); }
 }
@@ -12046,7 +12178,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ImageEditorDirective,
                         ObjectPositionDirective,
                         SpacingHorizontalDirective
-                    ], 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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -13459,7 +13591,7 @@ class LogoGalleryComponent extends BaseSection {
         event.stopPropagation();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LogoGalleryComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    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:
+    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:
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: 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"] }] }); }
 }
@@ -13495,7 +13627,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         TextEditorComponent,
                         SpacingHorizontalDirective,
                         TranslateOnhoverDirective
-                    ], 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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -15184,7 +15316,7 @@ class NewTestimonialsComponent extends BaseSection {
         });
     }
     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 }); }
-    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:
+    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:
                 // directives
                 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:
                 // components
@@ -15221,7 +15353,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         TextEditorComponent,
                         SimpoButtonComponent,
                         ImageEditorDirective,
-                    ], 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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: EventsService }, { type: i0.Renderer2 }], propDecorators: { data: [{
                 type: Input
             }], edit: [{