simpo-component-library 3.6.312 → 3.6.313

package/fesm2022/simpo-component-library.mjs

@@ -1,12 +1,12 @@
 import * as i4 from '@angular/common';
 import { CommonModule, isPlatformBrowser, NgStyle, NgFor, NgIf } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, Input, EventEmitter, Injectable, Directive, HostListener, InjectionToken, Inject, ElementRef, Renderer2, forwardRef, PLATFORM_ID, ViewChild, Output, Pipe, Optional, NgModule } from '@angular/core';
+import { Component, Input, EventEmitter, Injectable, Directive, HostListener, InjectionToken, Inject, ViewChild, ElementRef, Renderer2, forwardRef, PLATFORM_ID, Output, Pipe, Optional, NgModule } from '@angular/core';
 import { MatGridListModule } from '@angular/material/grid-list';
 import * as i2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i5 from '@angular/forms';
-import { FormsModule, NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+import { FormControl, FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
 import * as i13 from '@angular/material/core';
 import { MatOptionModule, MatNativeDateModule } from '@angular/material/core';
 import * as i10 from '@angular/material/input';
@@ -17,18 +17,18 @@ import * as i1$1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i6 from '@angular/material/icon';
 import { MatIconModule, MatIcon } from '@angular/material/icon';
-import { map, fromEvent, debounceTime, filter, startWith, distinctUntilChanged, switchMap, forkJoin, firstValueFrom } from 'rxjs';
-import * as i1 from '@angular/common/http';
-import { HttpHeaders } from '@angular/common/http';
-import { MatSliderModule } from '@angular/material/slider';
 import * as i8 from '@angular/cdk/scrolling';
 import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
+import { map, startWith, debounceTime, distinctUntilChanged, switchMap, fromEvent, filter, forkJoin, firstValueFrom } from 'rxjs';
 import * as i7 from 'ng-lazyload-image';
 import { LazyLoadImageModule } from 'ng-lazyload-image';
+import * as i1 from '@angular/common/http';
+import { HttpHeaders } from '@angular/common/http';
 import { fromCognitoIdentityPool } from '@aws-sdk/credential-provider-cognito-identity';
 import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';
 import * as i2$1 from '@angular/material/snack-bar';
 import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatSliderModule } from '@angular/material/slider';
 import * as i10$1 from '@angular/material/progress-spinner';
 import { MatProgressSpinner, MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i2$2 from '@angular/router';
@@ -757,6 +757,106 @@ const ECOMMERCE_URL = new InjectionToken('ecommerceURL');
 const CMIS_URL = new InjectionToken('cmisURL');
 const BUCKET_URL = new InjectionToken('bucketURL');
 
+class ImageUplaodService {
+    // region = 'us-east-1'
+    // identityPoolId = 'us-east-1:d4bc770a-5664-4051-bd66-6861a6efbd9c';
+    // bucketName = `${bucketUrl}`;
+    constructor(http, bucketUrl) {
+        this.http = http;
+        this.bucketUrl = bucketUrl;
+        this.cmisFileUpload = {
+            sasToken: 'sv=2022-11-02&ss=bfqt&srt=sco&sp=rwdlacupiytfx&se=2029-12-31T23:45:03Z&st=2024-12-18T15:45:03Z&spr=https,http&sig=Qjj5Xe5KiMxvETm6rP%2FZP31i3xDS9t1QuyuKgcY%2FPC8%3D',
+            accountName: 'cmisprod',
+            containerName: 'prod-cmis'
+        };
+        this.UNSPLASH_API_TOKEN = 'iMn43HCZ_FLCMWkZgUtMAjt-p-M6vmaB1Z_3fbetmJA';
+        // console.log('bucketUrl', this.bucketUrl);
+        this.s3Client = new S3Client({
+            region: this.bucketUrl?.bucketDetails?.Region, // e.g., 'us-east-1'
+            credentials: fromCognitoIdentityPool({
+                identityPoolId: this.bucketUrl?.poolId,
+                clientConfig: { region: this.bucketUrl?.bucketDetails?.Region },
+            })
+        });
+    }
+    async uploadFileInAzure(file, folderName = 'cmis') {
+        if (typeof window !== 'undefined') {
+            const { BlobServiceClient } = await import('@azure/storage-blob');
+            const sasToken = this.cmisFileUpload.sasToken.startsWith('?')
+                ? this.cmisFileUpload.sasToken
+                : `?${this.cmisFileUpload.sasToken}`;
+            const accountName = this.cmisFileUpload.accountName;
+            const containerName = this.cmisFileUpload.containerName;
+            const blobServiceClient = new BlobServiceClient(`https://${accountName}.blob.core.windows.net${sasToken}`);
+            const containerClient = blobServiceClient.getContainerClient(containerName);
+            const blobName = `${folderName}/${file.name}`;
+            const blockBlobClient = containerClient.getBlockBlobClient(blobName);
+            await blockBlobClient.uploadData(file, {
+                blobHTTPHeaders: { blobContentType: file.type },
+            });
+            return blockBlobClient;
+        }
+        return null;
+    }
+    async uploadFileInAWS(file, folderName = '') {
+        try {
+            // CloudFront distribution domain
+            const cloudfrontDomain = this.bucketUrl.bucketDetails.Bucket == 'dev-beeos' ? 'https://d2yx15pncgmu63.cloudfront.net' : 'https://d2z9497xp8xb12.cloudfront.net';
+            // Create a unique file name
+            const fileName = `${folderName}/${Date.now()}-${file.name}`;
+            // Convert file to buffer
+            const fileBuffer = await this.fileToArrayBuffer(file);
+            // Prepare the upload parameters
+            const params = {
+                Bucket: this.bucketUrl.bucketDetails.Bucket,
+                Key: fileName,
+                Body: fileBuffer,
+                ContentType: file.type,
+                // Remove public-read ACL if using OAC/OAI as it's not needed and may cause issues
+                // ACL: 'public-read'
+            };
+            // Upload file to S3
+            const command = new PutObjectCommand(params);
+            const response = await this.s3Client?.send(command);
+            // Construct the CloudFront URL instead of S3 URL
+            const url = `${cloudfrontDomain}/${fileName}`;
+            return url;
+        }
+        catch (error) {
+            console.error('Error uploading file: ', error);
+            throw error;
+        }
+    }
+    async fileToArrayBuffer(file) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = error => reject(error);
+            reader.readAsArrayBuffer(file);
+        });
+    }
+    //Unsplash related APIS
+    searchPhotosInUnsplash(searchedText, page = 1, size = 10) {
+        const header = new HttpHeaders({
+            Authorization: `Client-ID ${this.UNSPLASH_API_TOKEN}`,
+        });
+        return this.http.get(`https://api.unsplash.com/search/photos?page=${page}&per_page=${size}&query=${searchedText}`, {
+            headers: header,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageUplaodService, deps: [{ token: i1.HttpClient }, { token: BUCKET_URL }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageUplaodService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageUplaodService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [BUCKET_URL]
+                }] }] });
+
 class BaseCollection {
     constructor(json) {
         this.storeId = json?.["storeId"];
@@ -876,404 +976,605 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     args: [CMIS_URL]
                 }] }] });
 
-class LinkEditorComponent {
-    constructor(editorService, dialogRef, data, eventService) {
+class MediaSelectorComponent {
+    constructor(imageUploadService, _dialogRef, dialogData, snackBar, editorService) {
+        this.imageUploadService = imageUploadService;
+        this._dialogRef = _dialogRef;
+        this.dialogData = dialogData;
+        this.snackBar = snackBar;
         this.editorService = editorService;
-        this.dialogRef = dialogRef;
-        this.data = data;
-        this.eventService = eventService;
-        this.link = {
-            linkType: RedirectionLinkType.Page,
-            label: '',
-            redirectionUrl: '',
-            pageId: '',
-            newTab: false
-        };
-        this.RedirectionLink = RedirectionLinkType;
-        this.externalLinkType = [
-            {
-                type: RedirectionLinkType.External
-            },
-            {
-                type: RedirectionLinkType.Email
-            },
-            {
-                type: RedirectionLinkType.Phone
-            }
-            // {
-            //   type: RedirectionLinkType.section
-            // }
-        ];
-        this.selectedType = RedirectionLinkType.Page;
-        this.linkType = [
-            {
-                type: RedirectionLinkType.Page
-            },
-            {
-                type: RedirectionLinkType.section
-            },
-            {
-                type: RedirectionLinkType.External
-            }
-        ];
-        this.buttonTypes = [
-            {
-                type: "Solid"
-            },
-            {
-                type: "Outline"
-            },
-            {
-                type: "Text"
-            }
-        ];
-        this.buttonShapes = [
-            {
-                icon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/832968c1747221270856Vector%2048%20(2).png",
-                activeIcon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/481850c1747220937693Vector%2048%20(1).png",
-                type: "Square"
-            },
-            {
-                icon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/830842c1747220757453Vector%2049.png",
-                activeIcon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/780601c1747221243613Vector%2049%20(1).png",
-                type: "Curve"
-            },
-            {
-                icon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/210350c1747220803521Vector%2050.png",
-                activeIcon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/939611c1747220900124Vector%2050%20(1).png",
-                type: "Round"
-            }
-        ];
-        this.directionType = [
-            {
-                icon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/664403c1747306840304arrow-down.png",
-                activeIcon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/587430c1747306898465arrow-down.png",
-                type: "DOWN"
-            },
-            {
-                icon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/193359c1747306949522arrow-right.png",
-                activeIcon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/450943c1747317759388arrow-right (2).png",
-                type: "RIGHT"
-            },
-            {
-                icon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/493838c1747307094821arrow-right (3).png",
-                activeIcon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/699932c1747307157944arrow-right (4).png",
-                type: "DIAGONAL_RIGHT"
-            },
-            {
-                icon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/911971c1747307199115arrow-right (5).png",
-                activeIcon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/968726c1747307227255arrow-right (6).png",
-                type: "DIAGONAL_LEFT"
-            }
-        ];
-        this.templatePage = [];
-        this.addLink = true;
-        this.backgroundType = ['Solid', 'Gradient'];
+        this.tabs = ['Unsplash', 'Upload', 'Library'];
+        this.activeTab = 'Unsplash';
+        this.searchControl = new FormControl('');
+        this.pageNo = 1;
+        this.isLoading = false;
+        this.unsplashImages = [];
+        this.imageLibrary = [];
+        this.imageSize = 50;
+        this.multiple = false;
+        this.selectedImage = new Map;
+        this.buttonLoader = false;
     }
     ngOnInit() {
-        this.addLink = true;
-        if (this.data?.linkData) {
-            this.link = this.data.linkData;
-            this.selectedType = this.link.linkType === RedirectionLinkType.Email || this.link.linkType === RedirectionLinkType.Phone ? RedirectionLinkType.External : this.link.linkType;
-            this.addLink = false;
-        }
-        this.getTemplatePage();
+        this.multiple = this.dialogData?.multiple ?? true;
+        this.searchUnsplashImages();
+        this.getImageLibrary();
     }
-    closeDialog() {
-        this.dialogRef.close();
+    ngAfterViewInit() {
+        this.setupInfiniteScroll();
     }
-    getTemplatePage() {
-        this.editorService.getTemplate().subscribe((res) => {
-            this.templatePage = res.data;
+    getImageLibrary() {
+        this.editorService.getImageLibrary().subscribe((res) => {
+            this.imageLibrary = res?.data?.content || [];
         });
     }
-    changeType(type) {
-        this.selectedType = type;
-        this.link.linkType = this.selectedType;
-    }
-    addNewLink() {
-        this.dialogRef.close({ link: this.link });
+    /** ✅ Search API with debounce to reduce unnecessary calls */
+    searchUnsplashImages() {
+        this.searchControl.valueChanges
+            .pipe(startWith(''), // Load images initially
+        debounceTime(500), // Wait 500ms after typing stops
+        distinctUntilChanged(), // Only call API if value changes
+        switchMap(value => {
+            this.pageNo = 1;
+            return this.imageUploadService.searchPhotosInUnsplash(value || 'Technology', this.pageNo);
+        }))
+            .subscribe((results) => {
+            this.unsplashImages = results.results;
+        });
     }
-    changeButtonStyle() {
-        // debugger
-        if (this.data?.buttonStyle?.type == 'Outline') {
-            this.backgroundType = ['Solid'];
-            this.data.buttonStyle.colorType = 'Solid';
-        }
-        else {
-            this.backgroundType = ['Solid', 'Gradient'];
-        }
-        this.eventService.buttonStyleChangeChecks.emit({ id: this.data.buttonId, style: this.data.buttonStyle, backgroundInfo: this.data.backgroundInfo });
+    /** ✅ Infinite Scroll */
+    setupInfiniteScroll() {
+        this.viewport.elementScrolled()
+            .pipe(debounceTime(200), // ✅ Wait 200ms before checking
+        distinctUntilChanged() // ✅ Only trigger if value changes
+        )
+            .subscribe(() => {
+            const end = this.viewport.measureScrollOffset('bottom');
+            if (end < 300 && !this.isLoading) { // ✅ Trigger only when close to the bottom
+                this.loadMoreImages();
+            }
+        });
     }
-    getContrastTextColor(backgroundHex) {
-        let hex = backgroundHex?.replace('#', '');
-        if (hex?.length === 3) {
-            hex = hex.split('').map((c) => c + c).join('');
-        }
-        const r = parseInt(hex?.substr(0, 2), 16) / 255;
-        const g = parseInt(hex?.substr(2, 2), 16) / 255;
-        const b = parseInt(hex?.substr(4, 2), 16) / 255;
-        const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
-        this.data.buttonStyle.textColor = luminance < 0.5 ? "#FFFFFF" : "#000000";
-        this.eventService.buttonStyleChangeChecks.emit({ id: this.data.buttonId, style: this.data.buttonStyle, backgroundInfo: this.data.backgroundInfo });
+    /** ✅ Load More Images */
+    loadMoreImages() {
+        if (this.isLoading)
+            return; // ✅ Prevent multiple requests
+        this.isLoading = true;
+        this.pageNo++;
+        this.imageUploadService.searchPhotosInUnsplash(this.searchControl.value || 'Technology', this.pageNo)
+            .subscribe((results) => {
+            this.unsplashImages = [...this.unsplashImages, ...results.results];
+            this.isLoading = false;
+        }, () => {
+            this.isLoading = false; // ✅ Ensure it's reset even on failure
+        });
     }
-    setBorderRadius() {
-        if (this.data.buttonStyle.type == 'Text') {
-            return '0px';
-        }
-        if (this.data.buttonStyle.shape == 'Square') {
-            return '0px';
-        }
-        if (this.data.buttonStyle.shape == 'Curve') {
-            return '7px';
+    selectUnsplashImage(image) {
+        if (!this.multiple)
+            this.selectedImage = new Map;
+        let uploadImage = {
+            businessId: localStorage.getItem('businessId'),
+            uniqueId: image.id,
+            assets: [{
+                    url: image.urls.raw,
+                    width: image.width,
+                    height: image.height
+                }],
+            author: {
+                id: image.user.id,
+                userName: image.user.username,
+                name: image.user.name,
+                twitterUserName: image.user.twitter_username,
+                portFolioUrl: image.user.portfolio_url,
+                instagramUserName: image.user.instagram_username,
+            },
+            media: "UNSPLASH",
+        };
+        if (this.selectedImage.has(image.id)) {
+            this.selectedImage.delete(image.id);
         }
-        if (this.data.buttonStyle.shape == 'Round') {
-            return '99px';
+        else {
+            this.selectedImage.set(image.id, uploadImage);
         }
-        return '0px';
     }
-    setBorder() {
-        if (this.data.buttonStyle.type == 'Text') {
-            return 'unset';
-        }
-        if (this.data.buttonStyle.type == 'Solid') {
-            return `unset`;
-        }
-        if (this.data.buttonStyle.type == 'Outline') {
-            return `2px solid ${this.data.buttonStyle?.background}`;
+    uploadImageFromSystem(event) {
+        if (!this.multiple)
+            this.selectedImage = new Map;
+        let files = event.target.files;
+        const maximumFileSize = 4 * 1024 * 1024; // Max is 4mb
+        for (let file of files) {
+            if (maximumFileSize < file.size) {
+                this.snackBar.open('Maximum file size limit is 4MB', 'close', { duration: 1500 });
+                continue;
+            }
+            const reader = new FileReader();
+            const image = {
+                businessId: localStorage.getItem('businessId'),
+                uniqueId: file.name + '_' + file.size,
+                blurHash: null,
+                assets: [{
+                        width: 0,
+                        height: 0,
+                        blurhash: '',
+                        url: '',
+                    }],
+                author: null,
+                media: 'DEVICE',
+                description: file.name,
+                altDescription: file.name,
+                file: file,
+            };
+            reader.onload = (response) => {
+                image.assets[0].url = response.target.result;
+            };
+            reader.readAsDataURL(file);
+            if (!this.selectedImage.has(image.uniqueId)) {
+                this.selectedImage.set(image.uniqueId, image);
+            }
         }
-        return 'unset';
     }
-    setColor() {
-        return this.data.buttonStyle?.textColor || '#ffffff';
+    deleteSystemImage(imageId) {
+        this.selectedImage.delete(imageId);
     }
-    setBackground() {
-        if (this.data.buttonStyle?.colorType == 'Solid' && this.data.buttonStyle.type == 'Solid') {
-            return this.data.buttonStyle?.background;
-        }
-        else if (this.data.buttonStyle?.colorType == 'Gradient' && this.data.buttonStyle.type == 'Solid') {
-            const direction = GradientDirection[this.data.buttonStyle.gradientDirection || GradientDirection.DOWN];
-            return `linear-gradient(${direction}, ${this.data.buttonStyle?.background}, ${this.data.buttonStyle?.secondaryBackground})`;
+    selectFromImageLibrary(image) {
+        if (!this.multiple)
+            this.selectedImage = new Map;
+        if (this.selectedImage.has(image.uniqueId)) {
+            this.selectedImage.delete(image.uniqueId);
         }
         else {
-            return '';
+            this.selectedImage.set(image.uniqueId, image);
         }
     }
-    setRedirectUrl() {
-        this.link.redirectionUrl = '';
-        for (let page of this.templatePage) {
-            if (page.id === this.link.pageId) {
-                this.link.redirectionUrl = page.path;
-                break;
+    async uploadImage() {
+        this.buttonLoader = true;
+        let request = [];
+        for (let image of this.selectedImage.values()) {
+            if (image.file) {
+                const fileUrl = await this.imageUploadService.uploadFileInAWS(image.file, 'library-media');
+                image.assets[0].url = fileUrl;
             }
+            request.push(image);
         }
+        this.editorService.saveImagesToBusinessLibrary({ data: request }).subscribe({
+            next: () => {
+                this._dialogRef.close(request);
+                this.buttonLoader = false;
+            },
+            error: () => {
+                this.buttonLoader = false;
+            }
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LinkEditorComponent, deps: [{ token: ElementServiceService }, { token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LinkEditorComponent, isStandalone: true, selector: "simpo-link-editor", ngImport: i0, template: "<section>\r\n  <div class=\"header\">\r\n    <p>{{data.type == 'BUTTON' ? \"Button\" : \"Link\"}} Settings</p>\r\n    <mat-icon (click)=\"closeDialog()\" class=\"f-18 d-flex align-items-center justify-content-center cp\">close</mat-icon>\r\n  </div>\r\n\r\n  <div class=\"body\">\r\n    <div>\r\n      <label class=\"link-text\">{{data.type == 'BUTTON' ? \"Button\" : \"Link\"}} Text</label><br>\r\n      <input type=\"text\" class=\"input-text link-text-input\" [(ngModel)]=\"link.label\">\r\n      <p class=\"desc\">This is the text that will be displayed to users</p>\r\n    </div>\r\n\r\n    <hr>\r\n\r\n    <!-- <ng-container *ngIf=\"data.type == 'BUTTON'\">\r\n      <select>\r\n        <ng-container *ngFor=\"let style of styles\">\r\n          <option (click)=\"changeButtonStyle(style)\" [value]=\"style.name\">{{style.name}}</option>\r\n        </ng-container>\r\n      <select>\r\n    </ng-container> -->\r\n\r\n    <ng-container *ngIf=\"data.type == 'BUTTON'\">\r\n      <div class=\"field-container mb-2\">\r\n        <div class=\"d-flex justify-content-between align-items-center\">\r\n          <label class=\"link-text mb-1\">Button</label>\r\n          <div class=\"colorType d-flex align-items-center justify-content-center\">\r\n            <select class=\"border-0 w-100\" [(ngModel)]=\"data.buttonStyle.type\" (ngModelChange)=\"changeButtonStyle()\">\r\n              <ng-container *ngFor=\"let type of buttonTypes\">\r\n                <option [value]=\"type.type\">\r\n                  {{type.type | titlecase}}\r\n                </option>\r\n              </ng-container>\r\n            </select>\r\n          </div>\r\n        </div>\r\n        <div>\r\n          <div class=\"preview d-flex justify-content-center\">\r\n            <button class=\"btn-style w-80\" [style.borderRadius]=\"setBorderRadius()\" [style.border]=\"setBorder()\"\r\n              [style.background]=\"setBackground()\">\r\n              <span\r\n                *ngIf=\"(data?.buttonStyle?.type === 'Text' || data?.buttonStyle?.type === 'Outline') && data?.buttonStyle?.colorType === 'Gradient'\"\r\n                [ngStyle]=\"{\r\n                  'background': 'linear-gradient(90deg, ' + data?.buttonStyle?.background + ' 0%, ' + data?.buttonStyle.secondaryBackground + ' 100%)'\r\n                }\">\r\n                {{ link.label ? link.label : \"Button Text\"}}\r\n              </span>\r\n              <span *ngIf=\"data?.style?.colorType == 'Solid' || data?.buttonStyle?.type == 'Solid'\"\r\n                [style.color]=\"setColor()\">\r\n                {{ link.label ? link.label : \"Button Text\"}}\r\n              </span>\r\n              <span *ngIf=\"data?.buttonStyle?.type === 'Text' || data?.buttonStyle?.type === 'Outline'\"\r\n                [style.color]=\"setColor()\">\r\n                {{ link.label ? link.label : \"Button Text\"}}\r\n              </span>\r\n            </button>\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"field-container\">\r\n        <label class=\"link-text\">Button Style</label>\r\n        <div class=\"color-container row\">\r\n          <div class=\"color br-10\">\r\n            <div class=\"color-top d-flex justify-content-between mb-2 align-items-center\">\r\n              <div class=\"left-side\">Color</div>\r\n              <div class=\"right-side\">\r\n                <div class=\"colorType d-flex align-items-center justify-content-center w-100\">\r\n                  <select class=\"border-0 w-100\" [(ngModel)]=\"data.buttonStyle.colorType\"\r\n                    (ngModelChange)=\"changeButtonStyle()\">\r\n                    <ng-container *ngFor=\"let type of backgroundType\">\r\n                      <option style=\"padding: 10px;\">\r\n                        {{ type | titlecase }}</option>\r\n                    </ng-container>\r\n                  </select>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"color-bottom\">\r\n              <div class=\"mt-20\" *ngIf=\"data.buttonStyle.colorType === 'Solid'\">\r\n                <div class=\"text-background\">\r\n                  <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.background\"\r\n                    (ngModelChange)=\"getContrastTextColor(data.buttonStyle.background)\" style=\"display: none;\" #colorInput>\r\n                  <div class=\"w-100 d-flex flex-column mt-2\">\r\n                    <label class=\"color-text mb-1 d-flex justify-content-center\"> Button Color</label>\r\n                    <div class=\"w-100 d-flex justify-content-center\">\r\n                      <div class=\"custom-input\" [style.background]=\"data.buttonStyle.background\"\r\n                        (click)=\"colorInput.click()\"></div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"mt-20\" *ngIf=\"data.buttonStyle.colorType === 'Gradient'\">\r\n                <div class=\"text-background\">\r\n                  <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.background\"\r\n                    (ngModelChange)=\"changeButtonStyle()\" style=\"display: none;\" #colorInput1>\r\n                  <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.secondaryBackground\"\r\n                    (ngModelChange)=\"changeButtonStyle()\" style=\"display: none;\" #colorInput>\r\n                  <div class=\"w-100 d-flex mt-2\">\r\n                    <div class=\"w-100 d-flex flex-column\">\r\n                      <label class=\"color-text mb-1 d-flex justify-content-center\">Color 1</label>\r\n                      <div class=\"d-flex justify-content-center\">\r\n                        <div class=\"custom-input\" [style.background]=\"data?.buttonStyle?.background\"\r\n                          (click)=\"colorInput1.click()\"></div>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"w-100 d-flex flex-column\">\r\n                      <label class=\"color-text mb-1 d-flex justify-content-center\">Color 2</label>\r\n                      <div class=\"d-flex justify-content-center\">\r\n                        <div class=\"custom-input\" [style.background]=\"data?.buttonStyle?.secondaryBackground\"\r\n                          (click)=\"colorInput.click()\"></div>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"gradient-direction\">\r\n                  <div class=\"left-direction mt-3 mb-1\"> Direction</div>\r\n                  <div class=\"right-direction\">\r\n                    <div class=\"d-flex justify-content-center align-items-center\">\r\n                      <div class=\"box-shadow d-flex br-10 w-80\">\r\n                        <ng-container *ngFor=\"let direction of directionType\">\r\n                          <div class=\"color-box d-flex p-2 align-items-center justify-content-center br-10\"\r\n                            [ngClass]=\"{'selected' : data.buttonStyle?.gradientDirection === direction.type}\"\r\n                            (click)=\"data.buttonStyle.gradientDirection = direction.type;changeButtonStyle()\">\r\n                            <img class=\"w-10\" [src]=\"direction.icon\" alt=\"icon\"\r\n                              *ngIf=\"data.buttonStyle?.gradientDirection !== direction.type\" loading=\"lazy\">\r\n                            <img class=\"w-10\" [src]=\"direction.activeIcon\" alt=\"icon\"\r\n                              *ngIf=\"data.buttonStyle?.gradientDirection === direction.type\" loading=\"lazy\">\r\n                          </div>\r\n                        </ng-container>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"mt-20\">\r\n            <div class=\"text-background\">\r\n              <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.textColor\"\r\n                (ngModelChange)=\"changeButtonStyle()\" style=\"display: none;\" #colorInput3>\r\n              <div class=\"w-100 d-flex flex-column mt-2\">\r\n                <label class=\"color-text mb-1 d-flex justify-content-center\">Text Color</label>\r\n                <div class=\"w-100 d-flex justify-content-center\">\r\n                  <div class=\"custom-input\" [style.background]=\"data.buttonStyle.textColor\"\r\n                    (click)=\"colorInput3.click()\"></div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"corner-radius bg-white p-2  br-10 d-flex justify-content-between\" *ngIf=\"data.buttonStyle.type != 'Text'\">\r\n            <div class=\"sub-text-1 d-flex align-items-center\">\r\n              Corner Radius\r\n            </div>\r\n            <div class=\"d-flex justify-content-center align-items-center\">\r\n              <div class=\"box-shadow d-flex br-10\">\r\n                <ng-container *ngFor=\"let shape of buttonShapes\">\r\n                  <div class=\"color-box d-flex p-2 align-items-center justify-content-center br-10\"\r\n                    [ngClass]=\"{'selected' : data.buttonStyle.shape === shape.type}\"\r\n                    (click)=\"data.buttonStyle.shape = shape.type;changeButtonStyle()\">\r\n                    <img [src]=\"shape.icon\" alt=\"icon\" *ngIf=\"data.buttonStyle.shape !== shape.type\" loading=\"lazy\"\r\n                      class=\"transition-image\">\r\n                    <img [src]=\"shape.activeIcon\" alt=\"icon\" *ngIf=\"data.buttonStyle?.shape === shape.type\"\r\n                      loading=\"lazy\" class=\"transition-image\">\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n        </div>\r\n\r\n      </div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"data?.linkData?.length != 0\">\r\n\r\n\r\n      <div class=\"groups cp\">\r\n        <div *ngFor=\"let type of linkType\" [ngClass]=\"{'selectedType' : type.type === selectedType}\"\r\n          (click)=\"changeType(type.type)\">{{type.type}}</div>\r\n      </div>\r\n\r\n      <div class=\"field-container mt-3\">\r\n        <div *ngIf=\"link.linkType === RedirectionLink.Page\">\r\n          <label class=\"input-label-1 mt-3 mb-2\">Select Page</label>\r\n          <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n            <select [(ngModel)]=\"link.pageId\" (ngModelChange)=\"setRedirectUrl()\">\r\n              <option value=\"\" selected>Select from your existing pages</option>\r\n              <option *ngFor=\"let page of templatePage\" [value]=\"page.id\"\r\n                style=\"padding: 10px;\">\r\n                {{page.pageName}}</option>\r\n            </select>\r\n            <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n                src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\"\r\n                alt=\"\">\r\n            </div>\r\n          </div>\r\n          <!-- <div class=\"sub-text\">Select from your existing pages</div> -->\r\n        </div>\r\n\r\n        <div *ngIf=\"link.linkType === RedirectionLink.section\">\r\n          <label class=\"mt-3 mb-2 input-label-1\">Section</label>\r\n          <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n            <select [(ngModel)]=\"link.pageId\" style=\"cursor:pointer\">\r\n              <option value=\"\" selected>Select the Section</option>\r\n              <option *ngFor=\"let section of templatePage[0].components\" [value]=\"section.id\">{{section.sectionName}}\r\n              </option>\r\n            </select>\r\n            <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n                src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\"\r\n                alt=\"\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div\r\n          *ngIf=\"link.linkType === RedirectionLink.External || link.linkType === RedirectionLink.Email || link.linkType === RedirectionLink.Phone\">\r\n          <label class=\"mt-3 mb-2 input-label-1\">Select type</label>\r\n          <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n            <select [(ngModel)]=\"link.linkType\" style=\"cursor:pointer\">\r\n              <option value=\"\" selected>Select the Type</option>\r\n              <option *ngFor=\"let type of externalLinkType\" [value]=\"type.type\">{{type.type}}</option>\r\n            </select>\r\n            <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n                src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\"\r\n                alt=\"\">\r\n            </div>\r\n          </div>\r\n          <label class=\"input-label mb-2\">{{link.linkType === RedirectionLink.External ? 'Website' : link.linkType ===\r\n            RedirectionLink.Email ? 'Email Address' : 'Phone Number'}}</label>\r\n          <input type=\"text\" class=\"input-text\" [(ngModel)]=\"link.redirectionUrl\"\r\n            [placeholder]=\"link.linkType === RedirectionLink.External ? 'example : https://facebook.com': ''\">\r\n        </div>\r\n\r\n        <div class=\"d-flex justify-content-between mt-10\">\r\n          <label class=\"input-label-2\">Open in a new browser tab</label>\r\n          <div class=\"form-check form-switch ml-auto\">\r\n            <input class=\"form-check-input switch-btn\" type=\"checkbox\" [(ngModel)]=\"link.newTab\" role=\"switch\">\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n\r\n      <div class=\"footer w-100  align-items-center justify-content-center\">\r\n        <button *ngIf=\"addLink\" (click)=\"addNewLink()\">Update Link</button>\r\n      </div>\r\n\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n</section>\r\n", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}:host{--grey-color: rgba(250, 250, 250, 1)}.br-7{border-radius:7px}.br-10{border-radius:10px}.w-90{width:90%}.sub-text-1{font-size:15px;color:#000}.w-48{width:48%}.box-shadow{box-shadow:0 0 4px #00000040}.color-box{width:50px}.selected{background:var(--primary-bg-color)}.header{height:45px;display:flex;justify-content:space-between;border-bottom:2px solid #F0F0F0;align-items:center;padding-left:15px;padding-right:15px}.header p{font-size:16px;font-weight:600;font-family:var(--primary-font-family)}.body{padding:15px}.footer{height:45px;position:absolute;bottom:0;left:0;padding:0 15px}.footer button{border:unset;border-radius:10px;font-size:15px;font-weight:500;padding:5px;color:#fff;text-align:center;background:var(--primary-bg-color)}p{margin-bottom:0!important}.link-text{font-size:15px;font-weight:600;font-family:var(--primary-font-family);color:#434343;margin-bottom:10px}.input-text{height:37px;width:100%;border:1px solid var(--grey-color);border-radius:5px;outline:none;font-size:14px;padding:10px 20px;font-weight:400;color:#090909e6}.link-text-input{background-color:var(--grey-color)}.desc{margin-top:10px;font-size:13px;color:#09090980;font-weight:400;font-family:Inter;margin-bottom:25px!important}hr{border:1px solid rgba(116,116,116,.2)}.groups{display:flex;justify-content:space-between;margin-top:25px}.groups div{font-size:15px;font-weight:600;color:#2c2c2c99;padding:6px 30px;cursor:pointer}.selectedType{position:relative;text-align:center;background:var(--primary-bg-color);background-clip:text;box-shadow:0 0 4px #00000040;border-radius:10px}.selectedType:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.f-18{font-size:18px}.mt-10{margin-top:10px}.drop-down-container{padding:10px;border-radius:8px;background:#fff}.drop-down-container select{width:90%;appearance:none;position:relative;outline:unset;border:unset;border-right:3px solid rgba(230,230,230,1);background:#fff;font-size:14px;padding:0 10px;border-radius:unset}.drop-down-container .down-arrow{width:10%;padding:0 6px}select option{padding:10px;background:#fff;color:#000}.field-container{background:var(--grey-color);border-radius:13px;padding:10px}.sub-text{font-size:13px;color:#09090980}.input-label-1{font-size:16px;font-weight:600}.input-label-2{color:#09090980}option:hover{background:var(--primary-bg-color)}.cp{cursor:pointer}.colorType{padding:3px 10px;box-shadow:0 0 4px #00000040;border-radius:10px;width:25%;border:1px solid #090981}.colorType select{background:transparent}.border-0{outline:unset}.transition-image{transition:opacity .3s ease-in-out,transform .3s ease-in-out}.color{background:#fff;padding:1rem}.custom-mat-form{width:100%;margin:10px 0;background-color:#f9f9f9;border-radius:8px}.custom-mat-form.mat-form-field-appearance-outline .mat-form-field-outline{color:#1976d2;border-color:#1976d2}.custom-mat-form .mat-form-field-label{color:#666;font-weight:500}.custom-mat-form .mat-select-trigger{padding:10px;font-size:14px;color:#333}::ng-deep .mat-select-panel{background-color:#fff;color:#333}::ng-deep .mat-option{font-size:14px;padding:10px 16px}::ng-deep .mat-option:hover{background-color:#e0f7fa}.color-container{padding:7px;gap:10px;border-radius:10px}.custom-input{height:35px;width:80%;border-radius:2rem;box-shadow:0 1px 3px #3c404326,0 1px 2px #3c404326}.outline-btn{border:2px solid #374151;color:#374151;background:transparent}.solid-btn{background-color:#374151;border:2px solid #374151;color:#fff}.text-btn{border:unset;color:#000}.btn-style{padding-top:5px;padding-bottom:5px;font-size:16px!important;margin-top:14px}.box-shadow{height:40px}.gradientStyle{-webkit-background-clip:text!important;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.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: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    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()\" 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\"\r\n    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 src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\" 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\" />\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)\" [ngClass]=\"{'selectedImage': selectedImage.has(image.uniqueId)}\"/>\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\" 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>\r\n", 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: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.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.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i8.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: LinkEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MediaSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-link-editor', standalone: true, imports: [CommonModule, FormsModule, MatOptionModule, MatInputModule, MatSelectModule, MatIconModule, ButtonDirectiveDirective], template: "<section>\r\n  <div class=\"header\">\r\n    <p>{{data.type == 'BUTTON' ? \"Button\" : \"Link\"}} Settings</p>\r\n    <mat-icon (click)=\"closeDialog()\" class=\"f-18 d-flex align-items-center justify-content-center cp\">close</mat-icon>\r\n  </div>\r\n\r\n  <div class=\"body\">\r\n    <div>\r\n      <label class=\"link-text\">{{data.type == 'BUTTON' ? \"Button\" : \"Link\"}} Text</label><br>\r\n      <input type=\"text\" class=\"input-text link-text-input\" [(ngModel)]=\"link.label\">\r\n      <p class=\"desc\">This is the text that will be displayed to users</p>\r\n    </div>\r\n\r\n    <hr>\r\n\r\n    <!-- <ng-container *ngIf=\"data.type == 'BUTTON'\">\r\n      <select>\r\n        <ng-container *ngFor=\"let style of styles\">\r\n          <option (click)=\"changeButtonStyle(style)\" [value]=\"style.name\">{{style.name}}</option>\r\n        </ng-container>\r\n      <select>\r\n    </ng-container> -->\r\n\r\n    <ng-container *ngIf=\"data.type == 'BUTTON'\">\r\n      <div class=\"field-container mb-2\">\r\n        <div class=\"d-flex justify-content-between align-items-center\">\r\n          <label class=\"link-text mb-1\">Button</label>\r\n          <div class=\"colorType d-flex align-items-center justify-content-center\">\r\n            <select class=\"border-0 w-100\" [(ngModel)]=\"data.buttonStyle.type\" (ngModelChange)=\"changeButtonStyle()\">\r\n              <ng-container *ngFor=\"let type of buttonTypes\">\r\n                <option [value]=\"type.type\">\r\n                  {{type.type | titlecase}}\r\n                </option>\r\n              </ng-container>\r\n            </select>\r\n          </div>\r\n        </div>\r\n        <div>\r\n          <div class=\"preview d-flex justify-content-center\">\r\n            <button class=\"btn-style w-80\" [style.borderRadius]=\"setBorderRadius()\" [style.border]=\"setBorder()\"\r\n              [style.background]=\"setBackground()\">\r\n              <span\r\n                *ngIf=\"(data?.buttonStyle?.type === 'Text' || data?.buttonStyle?.type === 'Outline') && data?.buttonStyle?.colorType === 'Gradient'\"\r\n                [ngStyle]=\"{\r\n                  'background': 'linear-gradient(90deg, ' + data?.buttonStyle?.background + ' 0%, ' + data?.buttonStyle.secondaryBackground + ' 100%)'\r\n                }\">\r\n                {{ link.label ? link.label : \"Button Text\"}}\r\n              </span>\r\n              <span *ngIf=\"data?.style?.colorType == 'Solid' || data?.buttonStyle?.type == 'Solid'\"\r\n                [style.color]=\"setColor()\">\r\n                {{ link.label ? link.label : \"Button Text\"}}\r\n              </span>\r\n              <span *ngIf=\"data?.buttonStyle?.type === 'Text' || data?.buttonStyle?.type === 'Outline'\"\r\n                [style.color]=\"setColor()\">\r\n                {{ link.label ? link.label : \"Button Text\"}}\r\n              </span>\r\n            </button>\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"field-container\">\r\n        <label class=\"link-text\">Button Style</label>\r\n        <div class=\"color-container row\">\r\n          <div class=\"color br-10\">\r\n            <div class=\"color-top d-flex justify-content-between mb-2 align-items-center\">\r\n              <div class=\"left-side\">Color</div>\r\n              <div class=\"right-side\">\r\n                <div class=\"colorType d-flex align-items-center justify-content-center w-100\">\r\n                  <select class=\"border-0 w-100\" [(ngModel)]=\"data.buttonStyle.colorType\"\r\n                    (ngModelChange)=\"changeButtonStyle()\">\r\n                    <ng-container *ngFor=\"let type of backgroundType\">\r\n                      <option style=\"padding: 10px;\">\r\n                        {{ type | titlecase }}</option>\r\n                    </ng-container>\r\n                  </select>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"color-bottom\">\r\n              <div class=\"mt-20\" *ngIf=\"data.buttonStyle.colorType === 'Solid'\">\r\n                <div class=\"text-background\">\r\n                  <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.background\"\r\n                    (ngModelChange)=\"getContrastTextColor(data.buttonStyle.background)\" style=\"display: none;\" #colorInput>\r\n                  <div class=\"w-100 d-flex flex-column mt-2\">\r\n                    <label class=\"color-text mb-1 d-flex justify-content-center\"> Button Color</label>\r\n                    <div class=\"w-100 d-flex justify-content-center\">\r\n                      <div class=\"custom-input\" [style.background]=\"data.buttonStyle.background\"\r\n                        (click)=\"colorInput.click()\"></div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"mt-20\" *ngIf=\"data.buttonStyle.colorType === 'Gradient'\">\r\n                <div class=\"text-background\">\r\n                  <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.background\"\r\n                    (ngModelChange)=\"changeButtonStyle()\" style=\"display: none;\" #colorInput1>\r\n                  <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.secondaryBackground\"\r\n                    (ngModelChange)=\"changeButtonStyle()\" style=\"display: none;\" #colorInput>\r\n                  <div class=\"w-100 d-flex mt-2\">\r\n                    <div class=\"w-100 d-flex flex-column\">\r\n                      <label class=\"color-text mb-1 d-flex justify-content-center\">Color 1</label>\r\n                      <div class=\"d-flex justify-content-center\">\r\n                        <div class=\"custom-input\" [style.background]=\"data?.buttonStyle?.background\"\r\n                          (click)=\"colorInput1.click()\"></div>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"w-100 d-flex flex-column\">\r\n                      <label class=\"color-text mb-1 d-flex justify-content-center\">Color 2</label>\r\n                      <div class=\"d-flex justify-content-center\">\r\n                        <div class=\"custom-input\" [style.background]=\"data?.buttonStyle?.secondaryBackground\"\r\n                          (click)=\"colorInput.click()\"></div>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"gradient-direction\">\r\n                  <div class=\"left-direction mt-3 mb-1\"> Direction</div>\r\n                  <div class=\"right-direction\">\r\n                    <div class=\"d-flex justify-content-center align-items-center\">\r\n                      <div class=\"box-shadow d-flex br-10 w-80\">\r\n                        <ng-container *ngFor=\"let direction of directionType\">\r\n                          <div class=\"color-box d-flex p-2 align-items-center justify-content-center br-10\"\r\n                            [ngClass]=\"{'selected' : data.buttonStyle?.gradientDirection === direction.type}\"\r\n                            (click)=\"data.buttonStyle.gradientDirection = direction.type;changeButtonStyle()\">\r\n                            <img class=\"w-10\" [src]=\"direction.icon\" alt=\"icon\"\r\n                              *ngIf=\"data.buttonStyle?.gradientDirection !== direction.type\" loading=\"lazy\">\r\n                            <img class=\"w-10\" [src]=\"direction.activeIcon\" alt=\"icon\"\r\n                              *ngIf=\"data.buttonStyle?.gradientDirection === direction.type\" loading=\"lazy\">\r\n                          </div>\r\n                        </ng-container>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"mt-20\">\r\n            <div class=\"text-background\">\r\n              <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.textColor\"\r\n                (ngModelChange)=\"changeButtonStyle()\" style=\"display: none;\" #colorInput3>\r\n              <div class=\"w-100 d-flex flex-column mt-2\">\r\n                <label class=\"color-text mb-1 d-flex justify-content-center\">Text Color</label>\r\n                <div class=\"w-100 d-flex justify-content-center\">\r\n                  <div class=\"custom-input\" [style.background]=\"data.buttonStyle.textColor\"\r\n                    (click)=\"colorInput3.click()\"></div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"corner-radius bg-white p-2  br-10 d-flex justify-content-between\" *ngIf=\"data.buttonStyle.type != 'Text'\">\r\n            <div class=\"sub-text-1 d-flex align-items-center\">\r\n              Corner Radius\r\n            </div>\r\n            <div class=\"d-flex justify-content-center align-items-center\">\r\n              <div class=\"box-shadow d-flex br-10\">\r\n                <ng-container *ngFor=\"let shape of buttonShapes\">\r\n                  <div class=\"color-box d-flex p-2 align-items-center justify-content-center br-10\"\r\n                    [ngClass]=\"{'selected' : data.buttonStyle.shape === shape.type}\"\r\n                    (click)=\"data.buttonStyle.shape = shape.type;changeButtonStyle()\">\r\n                    <img [src]=\"shape.icon\" alt=\"icon\" *ngIf=\"data.buttonStyle.shape !== shape.type\" loading=\"lazy\"\r\n                      class=\"transition-image\">\r\n                    <img [src]=\"shape.activeIcon\" alt=\"icon\" *ngIf=\"data.buttonStyle?.shape === shape.type\"\r\n                      loading=\"lazy\" class=\"transition-image\">\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n        </div>\r\n\r\n      </div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"data?.linkData?.length != 0\">\r\n\r\n\r\n      <div class=\"groups cp\">\r\n        <div *ngFor=\"let type of linkType\" [ngClass]=\"{'selectedType' : type.type === selectedType}\"\r\n          (click)=\"changeType(type.type)\">{{type.type}}</div>\r\n      </div>\r\n\r\n      <div class=\"field-container mt-3\">\r\n        <div *ngIf=\"link.linkType === RedirectionLink.Page\">\r\n          <label class=\"input-label-1 mt-3 mb-2\">Select Page</label>\r\n          <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n            <select [(ngModel)]=\"link.pageId\" (ngModelChange)=\"setRedirectUrl()\">\r\n              <option value=\"\" selected>Select from your existing pages</option>\r\n              <option *ngFor=\"let page of templatePage\" [value]=\"page.id\"\r\n                style=\"padding: 10px;\">\r\n                {{page.pageName}}</option>\r\n            </select>\r\n            <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n                src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\"\r\n                alt=\"\">\r\n            </div>\r\n          </div>\r\n          <!-- <div class=\"sub-text\">Select from your existing pages</div> -->\r\n        </div>\r\n\r\n        <div *ngIf=\"link.linkType === RedirectionLink.section\">\r\n          <label class=\"mt-3 mb-2 input-label-1\">Section</label>\r\n          <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n            <select [(ngModel)]=\"link.pageId\" style=\"cursor:pointer\">\r\n              <option value=\"\" selected>Select the Section</option>\r\n              <option *ngFor=\"let section of templatePage[0].components\" [value]=\"section.id\">{{section.sectionName}}\r\n              </option>\r\n            </select>\r\n            <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n                src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\"\r\n                alt=\"\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div\r\n          *ngIf=\"link.linkType === RedirectionLink.External || link.linkType === RedirectionLink.Email || link.linkType === RedirectionLink.Phone\">\r\n          <label class=\"mt-3 mb-2 input-label-1\">Select type</label>\r\n          <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n            <select [(ngModel)]=\"link.linkType\" style=\"cursor:pointer\">\r\n              <option value=\"\" selected>Select the Type</option>\r\n              <option *ngFor=\"let type of externalLinkType\" [value]=\"type.type\">{{type.type}}</option>\r\n            </select>\r\n            <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n                src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\"\r\n                alt=\"\">\r\n            </div>\r\n          </div>\r\n          <label class=\"input-label mb-2\">{{link.linkType === RedirectionLink.External ? 'Website' : link.linkType ===\r\n            RedirectionLink.Email ? 'Email Address' : 'Phone Number'}}</label>\r\n          <input type=\"text\" class=\"input-text\" [(ngModel)]=\"link.redirectionUrl\"\r\n            [placeholder]=\"link.linkType === RedirectionLink.External ? 'example : https://facebook.com': ''\">\r\n        </div>\r\n\r\n        <div class=\"d-flex justify-content-between mt-10\">\r\n          <label class=\"input-label-2\">Open in a new browser tab</label>\r\n          <div class=\"form-check form-switch ml-auto\">\r\n            <input class=\"form-check-input switch-btn\" type=\"checkbox\" [(ngModel)]=\"link.newTab\" role=\"switch\">\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n\r\n      <div class=\"footer w-100  align-items-center justify-content-center\">\r\n        <button *ngIf=\"addLink\" (click)=\"addNewLink()\">Update Link</button>\r\n      </div>\r\n\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n</section>\r\n", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}:host{--grey-color: rgba(250, 250, 250, 1)}.br-7{border-radius:7px}.br-10{border-radius:10px}.w-90{width:90%}.sub-text-1{font-size:15px;color:#000}.w-48{width:48%}.box-shadow{box-shadow:0 0 4px #00000040}.color-box{width:50px}.selected{background:var(--primary-bg-color)}.header{height:45px;display:flex;justify-content:space-between;border-bottom:2px solid #F0F0F0;align-items:center;padding-left:15px;padding-right:15px}.header p{font-size:16px;font-weight:600;font-family:var(--primary-font-family)}.body{padding:15px}.footer{height:45px;position:absolute;bottom:0;left:0;padding:0 15px}.footer button{border:unset;border-radius:10px;font-size:15px;font-weight:500;padding:5px;color:#fff;text-align:center;background:var(--primary-bg-color)}p{margin-bottom:0!important}.link-text{font-size:15px;font-weight:600;font-family:var(--primary-font-family);color:#434343;margin-bottom:10px}.input-text{height:37px;width:100%;border:1px solid var(--grey-color);border-radius:5px;outline:none;font-size:14px;padding:10px 20px;font-weight:400;color:#090909e6}.link-text-input{background-color:var(--grey-color)}.desc{margin-top:10px;font-size:13px;color:#09090980;font-weight:400;font-family:Inter;margin-bottom:25px!important}hr{border:1px solid rgba(116,116,116,.2)}.groups{display:flex;justify-content:space-between;margin-top:25px}.groups div{font-size:15px;font-weight:600;color:#2c2c2c99;padding:6px 30px;cursor:pointer}.selectedType{position:relative;text-align:center;background:var(--primary-bg-color);background-clip:text;box-shadow:0 0 4px #00000040;border-radius:10px}.selectedType:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.f-18{font-size:18px}.mt-10{margin-top:10px}.drop-down-container{padding:10px;border-radius:8px;background:#fff}.drop-down-container select{width:90%;appearance:none;position:relative;outline:unset;border:unset;border-right:3px solid rgba(230,230,230,1);background:#fff;font-size:14px;padding:0 10px;border-radius:unset}.drop-down-container .down-arrow{width:10%;padding:0 6px}select option{padding:10px;background:#fff;color:#000}.field-container{background:var(--grey-color);border-radius:13px;padding:10px}.sub-text{font-size:13px;color:#09090980}.input-label-1{font-size:16px;font-weight:600}.input-label-2{color:#09090980}option:hover{background:var(--primary-bg-color)}.cp{cursor:pointer}.colorType{padding:3px 10px;box-shadow:0 0 4px #00000040;border-radius:10px;width:25%;border:1px solid #090981}.colorType select{background:transparent}.border-0{outline:unset}.transition-image{transition:opacity .3s ease-in-out,transform .3s ease-in-out}.color{background:#fff;padding:1rem}.custom-mat-form{width:100%;margin:10px 0;background-color:#f9f9f9;border-radius:8px}.custom-mat-form.mat-form-field-appearance-outline .mat-form-field-outline{color:#1976d2;border-color:#1976d2}.custom-mat-form .mat-form-field-label{color:#666;font-weight:500}.custom-mat-form .mat-select-trigger{padding:10px;font-size:14px;color:#333}::ng-deep .mat-select-panel{background-color:#fff;color:#333}::ng-deep .mat-option{font-size:14px;padding:10px 16px}::ng-deep .mat-option:hover{background-color:#e0f7fa}.color-container{padding:7px;gap:10px;border-radius:10px}.custom-input{height:35px;width:80%;border-radius:2rem;box-shadow:0 1px 3px #3c404326,0 1px 2px #3c404326}.outline-btn{border:2px solid #374151;color:#374151;background:transparent}.solid-btn{background-color:#374151;border:2px solid #374151;color:#fff}.text-btn{border:unset;color:#000}.btn-style{padding-top:5px;padding-bottom:5px;font-size:16px!important;margin-top:14px}.box-shadow{height:40px}.gradientStyle{-webkit-background-clip:text!important;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}\n"] }]
-        }], ctorParameters: () => [{ type: ElementServiceService }, { type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
+            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()\" 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\"\r\n    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 src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\" 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\" />\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)\" [ngClass]=\"{'selectedImage': selectedImage.has(image.uniqueId)}\"/>\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\" 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>\r\n", 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]
-                }] }, { type: EventsService }] });
+                }] }, { type: i2$1.MatSnackBar }, { type: ElementServiceService }], propDecorators: { viewport: [{
+                type: ViewChild,
+                args: [CdkVirtualScrollViewport]
+            }] } });
 
-class ButtonEditorDirective {
-    constructor(el, matDialog) {
-        this.el = el;
+class LinkEditorComponent {
+    constructor(editorService, dialogRef, data, eventService, matDialog) {
+        this.editorService = editorService;
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.eventService = eventService;
         this.matDialog = matDialog;
-        this.appButtonEditor = false;
-        this.sectionId = '';
-        this.buttonId = '';
-        this.HIGHLIGHT_BORDER = '3px solid #283E90';
-    }
-    ngOnInit() {
-        if (this.appButtonEditor) {
-            this.el.nativeElement.style.border = this.buttonStyle?.type == 'Outline' ? `2px solid ${this.backgroundInfo?.accentColor}` : 'unset';
-            this.setupEventListeners();
-        }
-        else {
-            this.el.nativeElement.style.border = this.buttonStyle?.type == 'Outline' ? `2px solid ${this.backgroundInfo?.accentColor}` : 'unset';
-        }
-    }
-    ngOnChanges() {
-        this.cleanup();
-        if (this.appButtonEditor) {
-            this.setupEventListeners();
-        }
-    }
-    setupEventListeners() {
-        this.mouseEnterSub = fromEvent(this.el.nativeElement, 'mouseenter')
-            .pipe(debounceTime(100))
-            .subscribe(() => {
-            this.el.nativeElement.style.border = this.HIGHLIGHT_BORDER;
-        });
-        this.mouseLeaveSub = fromEvent(this.el.nativeElement, 'mouseleave')
-            .pipe(debounceTime(100))
-            .subscribe(() => {
-            this.el.nativeElement.style.border = this.buttonStyle?.type == 'Outline' ? `2px solid ${this.backgroundInfo?.accentColor}` : 'unset';
-        });
-        this.clickSub = fromEvent(this.el.nativeElement, 'click')
-            .pipe(filter(() => !this.matDialog.openDialogs.length))
-            .subscribe(() => {
-            this.matDialog.open(LinkEditorComponent, {
-                panelClass: 'link-editor',
-                data: {
-                    linkData: this.buttonData ?? {},
-                    type: "BUTTON",
-                    buttonStyle: this.buttonStyle ?? {},
-                    backgroundInfo: this.backgroundInfo ?? {},
-                    buttonId: (this.sectionId + this.buttonId),
-                }
-            });
-        });
-    }
-    cleanup() {
-        if (this.mouseEnterSub) {
-            this.mouseEnterSub.unsubscribe();
-            this.mouseEnterSub = undefined;
-        }
-        if (this.mouseLeaveSub) {
-            this.mouseLeaveSub.unsubscribe();
-            this.mouseLeaveSub = undefined;
-        }
-        if (this.clickSub) {
-            this.clickSub.unsubscribe();
-            this.clickSub = undefined;
-        }
-        // Reset styles when cleaning up
-        this.el.nativeElement.style.border = '';
-    }
-    ngOnDestroy() {
-        this.cleanup();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonEditorDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ButtonEditorDirective, isStandalone: true, selector: "button[appButtonEditor]", inputs: { appButtonEditor: "appButtonEditor", buttonData: "buttonData", buttonStyle: "buttonStyle", backgroundInfo: "backgroundInfo", sectionId: "sectionId", buttonId: "buttonId" }, usesOnChanges: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonEditorDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'button[appButtonEditor]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.MatDialog }], propDecorators: { appButtonEditor: [{
-                type: Input
-            }], buttonData: [{
-                type: Input
-            }], buttonStyle: [{
-                type: Input
-            }], backgroundInfo: [{
-                type: Input
-            }], sectionId: [{
-                type: Input
-            }], buttonId: [{
-                type: Input
-            }] } });
-
-class SimpoButtonComponent {
-    constructor(_eventService) {
-        this._eventService = _eventService;
-        this.buttonId = '';
-        this.sectionId = '';
-        this.edit = false;
+        this.link = {
+            linkType: RedirectionLinkType.Page,
+            label: '',
+            redirectionUrl: '',
+            pageId: '',
+            newTab: false,
+        };
+        this.RedirectionLink = RedirectionLinkType;
+        this.externalLinkType = [
+            {
+                type: RedirectionLinkType.External
+            },
+            {
+                type: RedirectionLinkType.Email
+            },
+            {
+                type: RedirectionLinkType.Phone
+            }
+            // {
+            //   type: RedirectionLinkType.section
+            // }
+        ];
+        this.selectedType = RedirectionLinkType.Page;
+        this.linkType = [
+            {
+                type: RedirectionLinkType.Page
+            },
+            {
+                type: RedirectionLinkType.section
+            },
+            {
+                type: RedirectionLinkType.External
+            }
+        ];
+        this.buttonTypes = [
+            {
+                type: "Solid"
+            },
+            {
+                type: "Outline"
+            },
+            {
+                type: "Text"
+            }
+        ];
+        this.buttonShapes = [
+            {
+                icon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/832968c1747221270856Vector%2048%20(2).png",
+                activeIcon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/481850c1747220937693Vector%2048%20(1).png",
+                type: "Square"
+            },
+            {
+                icon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/830842c1747220757453Vector%2049.png",
+                activeIcon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/780601c1747221243613Vector%2049%20(1).png",
+                type: "Curve"
+            },
+            {
+                icon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/210350c1747220803521Vector%2050.png",
+                activeIcon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/939611c1747220900124Vector%2050%20(1).png",
+                type: "Round"
+            }
+        ];
+        this.directionType = [
+            {
+                icon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/664403c1747306840304arrow-down.png",
+                activeIcon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/587430c1747306898465arrow-down.png",
+                type: "DOWN"
+            },
+            {
+                icon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/193359c1747306949522arrow-right.png",
+                activeIcon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/450943c1747317759388arrow-right (2).png",
+                type: "RIGHT"
+            },
+            {
+                icon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/493838c1747307094821arrow-right (3).png",
+                activeIcon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/699932c1747307157944arrow-right (4).png",
+                type: "DIAGONAL_RIGHT"
+            },
+            {
+                icon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/911971c1747307199115arrow-right (5).png",
+                activeIcon: "https://d2yx15pncgmu63.cloudfront.net/prod-images/968726c1747307227255arrow-right (6).png",
+                type: "DIAGONAL_LEFT"
+            }
+        ];
+        this.templatePage = [];
+        this.addLink = true;
+        this.backgroundType = ['Solid', 'Gradient'];
+        this.imgLoader = false;
     }
     ngOnInit() {
+        this.addLink = true;
+        if (this.data?.linkData) {
+            this.link = this.data.linkData;
+            this.selectedType = this.link.linkType === RedirectionLinkType.Email || this.link.linkType === RedirectionLinkType.Phone ? RedirectionLinkType.External : this.link.linkType;
+            this.addLink = false;
+        }
+        this.getTemplatePage();
     }
-    redirectTo() {
-        if (!this.buttonContent?.pageId && !this.buttonContent?.redirectionUrl)
-            return;
-        this._eventService.buttonRedirection.emit({ data: this.buttonContent });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SimpoButtonComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SimpoButtonComponent, isStandalone: true, selector: "app-button-element", inputs: { buttonContent: "buttonContent", buttonStyle: "buttonStyle", buttonId: "buttonId", color: "color", sectionId: "sectionId", edit: "edit", backgroundInfo: "backgroundInfo" }, ngImport: i0, template: "<button class=\"button\" (click)=\"redirectTo()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\"\r\n  [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\"\r\n  [backgroundInfo]=\"backgroundInfo\" [sectionId]=\"sectionId\" [buttonId]=\"buttonId\">{{buttonContent?.label}}</button>\r\n", styles: [".button{font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:max-content!important;font-weight:700;font-family:var(--website-font-family);height:43px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.button:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px);transition:all .3s ease-in-out}\n"], dependencies: [{ kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SimpoButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-button-element', standalone: true, imports: [ButtonDirectiveDirective, ButtonEditorDirective], template: "<button class=\"button\" (click)=\"redirectTo()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\"\r\n  [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\"\r\n  [backgroundInfo]=\"backgroundInfo\" [sectionId]=\"sectionId\" [buttonId]=\"buttonId\">{{buttonContent?.label}}</button>\r\n", styles: [".button{font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:max-content!important;font-weight:700;font-family:var(--website-font-family);height:43px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.button:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px);transition:all .3s ease-in-out}\n"] }]
-        }], ctorParameters: () => [{ type: EventsService }], propDecorators: { buttonContent: [{
-                type: Input
-            }], buttonStyle: [{
-                type: Input
-            }], buttonId: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], sectionId: [{
-                type: Input
-            }], edit: [{
-                type: Input
-            }], backgroundInfo: [{
-                type: Input
-            }] } });
-
-class ContenteditableValueAccessor {
-    constructor(elementRef, renderer) {
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-        this.onTouched = () => { };
-        this.contenteditable = true; // Allow dynamic input
-        this.onChange = (_value) => { };
-        this.renderer.setAttribute(this.elementRef.nativeElement, 'contenteditable', 'true');
+    closeDialog() {
+        this.dialogRef.close();
     }
-    ngAfterViewInit() {
-        this.renderer.setAttribute(this.elementRef.nativeElement, 'contenteditable', this.contenteditable ? 'true' : 'false');
-        this.observer = new MutationObserver(() => {
-            this.onChange(this.elementRef.nativeElement.innerHTML);
-        });
-        this.observer.observe(this.elementRef.nativeElement, {
-            characterData: true,
-            childList: true,
-            subtree: true,
+    getTemplatePage() {
+        this.editorService.getTemplate().subscribe((res) => {
+            this.templatePage = res.data;
         });
     }
-    ngOnDestroy() {
-        this.observer?.disconnect();
+    changeType(type) {
+        this.selectedType = type;
+        this.link.linkType = this.selectedType;
     }
-    onInput() {
-        this.observer?.disconnect();
-        this.onChange(this.elementRef.nativeElement.innerHTML);
+    addNewLink() {
+        this.dialogRef.close({ link: this.link });
     }
-    onBlur() {
-        this.onTouched();
+    changeButtonStyle() {
+        // debugger
+        if (this.data?.buttonStyle?.type == 'Outline') {
+            this.backgroundType = ['Solid'];
+            this.data.buttonStyle.colorType = 'Solid';
+        }
+        else {
+            this.backgroundType = ['Solid', 'Gradient'];
+        }
+        this.eventService.buttonStyleChangeChecks.emit({ id: this.data.buttonId, style: this.data.buttonStyle, backgroundInfo: this.data.backgroundInfo });
     }
-    writeValue(value) {
-        this.renderer.setProperty(this.elementRef.nativeElement, 'innerHTML', value || '');
+    getContrastTextColor(backgroundHex) {
+        let hex = backgroundHex?.replace('#', '');
+        if (hex?.length === 3) {
+            hex = hex.split('').map((c) => c + c).join('');
+        }
+        const r = parseInt(hex?.substr(0, 2), 16) / 255;
+        const g = parseInt(hex?.substr(2, 2), 16) / 255;
+        const b = parseInt(hex?.substr(4, 2), 16) / 255;
+        const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+        this.data.buttonStyle.textColor = luminance < 0.5 ? "#FFFFFF" : "#000000";
+        this.eventService.buttonStyleChangeChecks.emit({ id: this.data.buttonId, style: this.data.buttonStyle, backgroundInfo: this.data.backgroundInfo });
     }
-    registerOnChange(onChange) {
-        this.onChange = onChange;
+    setBorderRadius() {
+        if (this.data.buttonStyle.type == 'Text') {
+            return '0px';
+        }
+        if (this.data.buttonStyle.shape == 'Square') {
+            return '0px';
+        }
+        if (this.data.buttonStyle.shape == 'Curve') {
+            return '7px';
+        }
+        if (this.data.buttonStyle.shape == 'Round') {
+            return '99px';
+        }
+        return '0px';
     }
-    registerOnTouched(onTouched) {
-        this.onTouched = onTouched;
+    setBorder() {
+        if (this.data.buttonStyle.type == 'Text') {
+            return 'unset';
+        }
+        if (this.data.buttonStyle.type == 'Solid') {
+            return `unset`;
+        }
+        if (this.data.buttonStyle.type == 'Outline') {
+            return `2px solid ${this.data.buttonStyle?.background}`;
+        }
+        return 'unset';
     }
-    setDisabledState(disabled) {
-        this.renderer.setAttribute(this.elementRef.nativeElement, 'contenteditable', String(!disabled));
+    setColor() {
+        return this.data.buttonStyle?.textColor || '#ffffff';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContenteditableValueAccessor, deps: [{ token: ElementRef }, { token: Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ContenteditableValueAccessor, isStandalone: true, selector: "[contenteditable][ngModel]", inputs: { contenteditable: "contenteditable" }, host: { listeners: { "input": "onInput()", "blur": "onBlur()" } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => ContenteditableValueAccessor),
-                multi: true,
-            },
-        ], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContenteditableValueAccessor, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[contenteditable][ngModel]',
-                    providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => ContenteditableValueAccessor),
-                            multi: true,
-                        },
-                    ],
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
-                    type: Inject,
-                    args: [ElementRef]
+    setBackground() {
+        if (this.data.buttonStyle?.colorType == 'Solid' && this.data.buttonStyle.type == 'Solid') {
+            return this.data.buttonStyle?.background;
+        }
+        else if (this.data.buttonStyle?.colorType == 'Gradient' && this.data.buttonStyle.type == 'Solid') {
+            const direction = GradientDirection[this.data.buttonStyle.gradientDirection || GradientDirection.DOWN];
+            return `linear-gradient(${direction}, ${this.data.buttonStyle?.background}, ${this.data.buttonStyle?.secondaryBackground})`;
+        }
+        else {
+            return '';
+        }
+    }
+    async updateImage() {
+        this.imgLoader = true;
+        const mediaSelectorDialog = this.matDialog.open(MediaSelectorComponent, { data: { multiple: false }, panelClass: "media-selector" });
+        mediaSelectorDialog.afterClosed().subscribe({
+            next: (res) => {
+                if (res) {
+                    this.link.icon.url = res[0].assets[0].url ?? "";
+                }
+                this.imgLoader = false;
+            }
+        });
+    }
+    deleteImage() {
+        this.link.icon.url = '';
+    }
+    setRedirectUrl() {
+        this.link.redirectionUrl = '';
+        for (let page of this.templatePage) {
+            if (page.id === this.link.pageId) {
+                this.link.redirectionUrl = page.path;
+                break;
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LinkEditorComponent, deps: [{ token: ElementServiceService }, { token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: EventsService }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LinkEditorComponent, isStandalone: true, selector: "simpo-link-editor", ngImport: i0, template: "<section>\r\n  <div class=\"header\">\r\n    <p>{{data.type == 'BUTTON' ? \"Button\" : \"Link\"}} Settings</p>\r\n    <mat-icon (click)=\"closeDialog()\" class=\"f-18 d-flex align-items-center justify-content-center cp\">close</mat-icon>\r\n  </div>\r\n\r\n  <div class=\"body\">\r\n    <div>\r\n      <label class=\"link-text\">{{data.type == 'BUTTON' ? \"Button\" : \"Link\"}} Text</label><br>\r\n      <input type=\"text\" class=\"input-text link-text-input\" [(ngModel)]=\"link.label\">\r\n      <p class=\"desc\">This is the text that will be displayed to users</p>\r\n    </div>\r\n\r\n    <hr>\r\n\r\n    <!-- <ng-container *ngIf=\"data.type == 'BUTTON'\">\r\n      <select>\r\n        <ng-container *ngFor=\"let style of styles\">\r\n          <option (click)=\"changeButtonStyle(style)\" [value]=\"style.name\">{{style.name}}</option>\r\n        </ng-container>\r\n      <select>\r\n    </ng-container> -->\r\n\r\n    <ng-container *ngIf=\"data.type == 'BUTTON'\">\r\n      <div class=\"field-container mb-2\">\r\n        <div class=\"d-flex justify-content-between align-items-center\">\r\n          <label class=\"link-text mb-1\">Button</label>\r\n          <div class=\"colorType d-flex align-items-center justify-content-center\">\r\n            <select class=\"border-0 w-100\" [(ngModel)]=\"data.buttonStyle.type\" (ngModelChange)=\"changeButtonStyle()\">\r\n              <ng-container *ngFor=\"let type of buttonTypes\">\r\n                <option [value]=\"type.type\">\r\n                  {{type.type | titlecase}}\r\n                </option>\r\n              </ng-container>\r\n            </select>\r\n          </div>\r\n        </div>\r\n        <div>\r\n          <div class=\"preview d-flex justify-content-center\">\r\n            <button class=\"btn-style w-80\" [style.borderRadius]=\"setBorderRadius()\" [style.border]=\"setBorder()\"\r\n              [style.background]=\"setBackground()\">\r\n              <span\r\n                *ngIf=\"(data?.buttonStyle?.type === 'Text' || data?.buttonStyle?.type === 'Outline') && data?.buttonStyle?.colorType === 'Gradient'\"\r\n                [ngStyle]=\"{\r\n                  'background': 'linear-gradient(90deg, ' + data?.buttonStyle?.background + ' 0%, ' + data?.buttonStyle.secondaryBackground + ' 100%)'\r\n                }\">\r\n                {{ link.label ? link.label : \"Button Text\"}}\r\n              </span>\r\n              <span *ngIf=\"data?.style?.colorType == 'Solid' || data?.buttonStyle?.type == 'Solid'\"\r\n                [style.color]=\"setColor()\">\r\n                {{ link.label ? link.label : \"Button Text\"}}\r\n              </span>\r\n              <span *ngIf=\"data?.buttonStyle?.type === 'Text' || data?.buttonStyle?.type === 'Outline'\"\r\n                [style.color]=\"setColor()\">\r\n                {{ link.label ? link.label : \"Button Text\"}}\r\n              </span>\r\n            </button>\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"field-container\">\r\n        <label class=\"link-text\">Button Style</label>\r\n        <div class=\"color-container row\">\r\n          <div class=\"color br-10\">\r\n            <div class=\"color-top d-flex justify-content-between mb-2 align-items-center\">\r\n              <div class=\"left-side\">Color</div>\r\n              <div class=\"right-side\">\r\n                <div class=\"colorType d-flex align-items-center justify-content-center w-100\">\r\n                  <select class=\"border-0 w-100\" [(ngModel)]=\"data.buttonStyle.colorType\"\r\n                    (ngModelChange)=\"changeButtonStyle()\">\r\n                    <ng-container *ngFor=\"let type of backgroundType\">\r\n                      <option style=\"padding: 10px;\">\r\n                        {{ type | titlecase }}</option>\r\n                    </ng-container>\r\n                  </select>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"color-bottom\">\r\n              <div class=\"mt-20\" *ngIf=\"data.buttonStyle.colorType === 'Solid'\">\r\n                <div class=\"text-background\">\r\n                  <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.background\"\r\n                    (ngModelChange)=\"getContrastTextColor(data.buttonStyle.background)\" style=\"display: none;\"\r\n                    #colorInput>\r\n                  <div class=\"w-100 d-flex flex-column mt-2\">\r\n                    <label class=\"color-text mb-1 d-flex justify-content-center\"> Button Color</label>\r\n                    <div class=\"w-100 d-flex justify-content-center\">\r\n                      <div class=\"custom-input\" [style.background]=\"data.buttonStyle.background\"\r\n                        (click)=\"colorInput.click()\"></div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"mt-20\" *ngIf=\"data.buttonStyle.colorType === 'Gradient'\">\r\n                <div class=\"text-background\">\r\n                  <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.background\"\r\n                    (ngModelChange)=\"changeButtonStyle()\" style=\"display: none;\" #colorInput1>\r\n                  <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.secondaryBackground\"\r\n                    (ngModelChange)=\"changeButtonStyle()\" style=\"display: none;\" #colorInput>\r\n                  <div class=\"w-100 d-flex mt-2\">\r\n                    <div class=\"w-100 d-flex flex-column\">\r\n                      <label class=\"color-text mb-1 d-flex justify-content-center\">Color 1</label>\r\n                      <div class=\"d-flex justify-content-center\">\r\n                        <div class=\"custom-input\" [style.background]=\"data?.buttonStyle?.background\"\r\n                          (click)=\"colorInput1.click()\"></div>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"w-100 d-flex flex-column\">\r\n                      <label class=\"color-text mb-1 d-flex justify-content-center\">Color 2</label>\r\n                      <div class=\"d-flex justify-content-center\">\r\n                        <div class=\"custom-input\" [style.background]=\"data?.buttonStyle?.secondaryBackground\"\r\n                          (click)=\"colorInput.click()\"></div>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"gradient-direction\">\r\n                  <div class=\"left-direction mt-3 mb-1\"> Direction</div>\r\n                  <div class=\"right-direction\">\r\n                    <div class=\"d-flex justify-content-center align-items-center\">\r\n                      <div class=\"box-shadow d-flex br-10 w-80\">\r\n                        <ng-container *ngFor=\"let direction of directionType\">\r\n                          <div class=\"color-box d-flex p-2 align-items-center justify-content-center br-10\"\r\n                            [ngClass]=\"{'selected' : data.buttonStyle?.gradientDirection === direction.type}\"\r\n                            (click)=\"data.buttonStyle.gradientDirection = direction.type;changeButtonStyle()\">\r\n                            <img class=\"w-10\" [src]=\"direction.icon\" alt=\"icon\"\r\n                              *ngIf=\"data.buttonStyle?.gradientDirection !== direction.type\" loading=\"lazy\">\r\n                            <img class=\"w-10\" [src]=\"direction.activeIcon\" alt=\"icon\"\r\n                              *ngIf=\"data.buttonStyle?.gradientDirection === direction.type\" loading=\"lazy\">\r\n                          </div>\r\n                        </ng-container>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"mt-20\">\r\n            <div class=\"text-background\">\r\n              <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.textColor\"\r\n                (ngModelChange)=\"changeButtonStyle()\" style=\"display: none;\" #colorInput3>\r\n              <div class=\"w-100 d-flex flex-column mt-2\">\r\n                <label class=\"color-text mb-1 d-flex justify-content-center\">Text Color</label>\r\n                <div class=\"w-100 d-flex justify-content-center\">\r\n                  <div class=\"custom-input\" [style.background]=\"data.buttonStyle.textColor\"\r\n                    (click)=\"colorInput3.click()\"></div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"corner-radius bg-white p-2  br-10 d-flex justify-content-between\"\r\n            *ngIf=\"data.buttonStyle.type != 'Text'\">\r\n            <div class=\"sub-text-1 d-flex align-items-center\">\r\n              Corner Radius\r\n            </div>\r\n            <div class=\"d-flex justify-content-center align-items-center\">\r\n              <div class=\"box-shadow d-flex br-10\">\r\n                <ng-container *ngFor=\"let shape of buttonShapes\">\r\n                  <div class=\"color-box d-flex p-2 align-items-center justify-content-center br-10\"\r\n                    [ngClass]=\"{'selected' : data.buttonStyle.shape === shape.type}\"\r\n                    (click)=\"data.buttonStyle.shape = shape.type;changeButtonStyle()\">\r\n                    <img [src]=\"shape.icon\" alt=\"icon\" *ngIf=\"data.buttonStyle.shape !== shape.type\" loading=\"lazy\"\r\n                      class=\"transition-image\">\r\n                    <img [src]=\"shape.activeIcon\" alt=\"icon\" *ngIf=\"data.buttonStyle?.shape === shape.type\"\r\n                      loading=\"lazy\" class=\"transition-image\">\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"p-2 d-flex justify-content-between align-items-center mt-20\">\r\n        <div class=\"fw-bold\">Show Icon</div>\r\n        <div class=\"form-check form-switch ml-auto\">\r\n          <input class=\"form-check-input switch-btn\" type=\"checkbox\" [(ngModel)]=\"link.showIcon\" role=\"switch\">\r\n        </div>\r\n      </div>\r\n      <div>\r\n        <!-- <p class=\"heading mb-0\">Image</p> -->\r\n        <div class=\"upload-image cp\" *ngIf=\"link.showIcon && !link?.icon?.url\" (click)=\"updateImage()\">\r\n          <img loading=\"lazy\"\r\n            src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\"\r\n            alt=\"\">\r\n          <p class=\"upload-text mb-0\">Upload a file</p>\r\n          <p class=\"upload-text mb-0\">or select an existing one</p>\r\n          <span class=\"upload-text\">up to 32MB</span>\r\n        </div>\r\n        <div class=\"sec d-flex align-items-center\" *ngIf=\"link.showIcon && link?.icon?.url\">\r\n          <ng-container *ngIf=\"!imgLoader\">\r\n            <img [src]=\"link?.icon?.url\">\r\n            <div class=\"repalce-image cursor-pointer\" (click)=\"updateImage()\">\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" width=\"24\"\r\n                height=\"24\" class=\"icon w-4 h-4\" aria-hidden=\"true\">\r\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n                  d=\"m4 16 4.58579-4.5858c.78104-.781 2.04741-.781 2.82841 0L16 16m-2-2 1.5858-1.5858c.781-.781 2.0474-.781 2.8284 0L20 14m-6-6h.01M6 20h12c1.1046 0 2-.8954 2-2V6c0-1.10457-.8954-2-2-2H6c-1.10457 0-2 .89543-2 2v12c0 1.1046.89543 2 2 2Z\">\r\n                </path>\r\n              </svg>\r\n            </div>\r\n\r\n            <div class=\"delete-image cursor-pointer \" (click)=\"deleteImage()\">\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"#ffffff\" viewBox=\"0 0 24 24\" width=\"24\"\r\n                height=\"24\" class=\"icon h-4 w-4\" aria-hidden=\"true\">\r\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n                  d=\"m19 7-.8673 12.1425C18.0579 20.1891 17.187 21 16.1378 21H7.86224c-1.04928 0-1.92016-.8109-1.99492-1.8575L5 7m5 4v6m4-6v6m1-10V4c0-.55228-.4477-1-1-1h-4c-.55228 0-1 .44772-1 1v3M4 7h16\">\r\n                </path>\r\n              </svg>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"imgLoader\">\r\n            <div class=\"upload_spinner d-flex w-100 h-100 justify-content-center align-items-center\">\r\n              <mat-spinner></mat-spinner>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n\r\n\r\n      </div>\r\n\r\n      <div class=\"fw-bold p-2 mb-2\">Icon Position</div>\r\n      <div class=\"tabs d-flex px-2 gap-3 mb-2\" *ngIf=\"link.showIcon\">\r\n        <div class=\"tab px-3 py-2\" *ngFor=\"let tab of ['left','right']\" (click)=\"link.icon.iconPosition = tab\"\r\n          [class.selectedTab]=\"link.icon.iconPosition == tab\">\r\n          {{tab | titlecase}}\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"data?.linkData?.length != 0\">\r\n\r\n\r\n      <div class=\"groups cp\">\r\n        <div *ngFor=\"let type of linkType\" [ngClass]=\"{'selectedType' : type.type === selectedType}\"\r\n          (click)=\"changeType(type.type)\">{{type.type}}</div>\r\n      </div>\r\n\r\n      <div class=\"field-container mt-3\">\r\n        <div *ngIf=\"link.linkType === RedirectionLink.Page\">\r\n          <label class=\"input-label-1 mt-3 mb-2\">Select Page</label>\r\n          <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n            <select [(ngModel)]=\"link.pageId\" (ngModelChange)=\"setRedirectUrl()\">\r\n              <option value=\"\" selected>Select from your existing pages</option>\r\n              <option *ngFor=\"let page of templatePage\" [value]=\"page.id\" style=\"padding: 10px;\">\r\n                {{page.pageName}}</option>\r\n            </select>\r\n            <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n                src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\"\r\n                alt=\"\">\r\n            </div>\r\n          </div>\r\n          <!-- <div class=\"sub-text\">Select from your existing pages</div> -->\r\n        </div>\r\n\r\n        <div *ngIf=\"link.linkType === RedirectionLink.section\">\r\n          <label class=\"mt-3 mb-2 input-label-1\">Section</label>\r\n          <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n            <select [(ngModel)]=\"link.pageId\" style=\"cursor:pointer\">\r\n              <option value=\"\" selected>Select the Section</option>\r\n              <option *ngFor=\"let section of templatePage[0].components\" [value]=\"section.id\">{{section.sectionName}}\r\n              </option>\r\n            </select>\r\n            <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n                src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\"\r\n                alt=\"\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div\r\n          *ngIf=\"link.linkType === RedirectionLink.External || link.linkType === RedirectionLink.Email || link.linkType === RedirectionLink.Phone\">\r\n          <label class=\"mt-3 mb-2 input-label-1\">Select type</label>\r\n          <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n            <select [(ngModel)]=\"link.linkType\" style=\"cursor:pointer\">\r\n              <option value=\"\" selected>Select the Type</option>\r\n              <option *ngFor=\"let type of externalLinkType\" [value]=\"type.type\">{{type.type}}</option>\r\n            </select>\r\n            <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n                src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\"\r\n                alt=\"\">\r\n            </div>\r\n          </div>\r\n          <label class=\"input-label mb-2\">{{link.linkType === RedirectionLink.External ? 'Website' : link.linkType ===\r\n            RedirectionLink.Email ? 'Email Address' : 'Phone Number'}}</label>\r\n          <input type=\"text\" class=\"input-text\" [(ngModel)]=\"link.redirectionUrl\"\r\n            [placeholder]=\"link.linkType === RedirectionLink.External ? 'example : https://facebook.com': ''\">\r\n        </div>\r\n\r\n        <div class=\"d-flex justify-content-between mt-10\">\r\n          <label class=\"input-label-2\">Open in a new browser tab</label>\r\n          <div class=\"form-check form-switch ml-auto\">\r\n            <input class=\"form-check-input switch-btn\" type=\"checkbox\" [(ngModel)]=\"link.newTab\" role=\"switch\">\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n\r\n      <div class=\"footer w-100  align-items-center justify-content-center\">\r\n        <button *ngIf=\"addLink\" (click)=\"addNewLink()\">Update Link</button>\r\n      </div>\r\n\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}:host{--grey-color: rgba(250, 250, 250, 1)}.br-7{border-radius:7px}.br-10{border-radius:10px}.switch-btn{position:relative;z-index:10}.upload-image{border:3px dashed rgba(44,44,44,.6);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;margin:10px 10px 22px;border-radius:20px;box-shadow:#0000000d 0 1px 2px}.upload-image img{margin-bottom:8px;height:40px}.upload-text{background:var(--primary-bg-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:500}.sec{padding:10px 10px 22px;position:relative}.sec img{width:100%;height:200px;border-radius:20px}.delete-image{background-color:#d92d20;width:30px;height:30px;border-radius:6px;display:flex;justify-content:center;align-items:center;position:absolute;top:20px;right:20px}.repalce-image{display:flex;align-items:center;background:#fff;padding:2px;border-radius:6px;position:absolute;bottom:30px;left:20px}.selectedTab{background:#39393934;font-weight:700}.tab{border:1px solid rgba(44,44,44,.6);border-radius:12px}.w-90{width:90%}.sub-text-1{font-size:15px;color:#000}.w-48{width:48%}.box-shadow{box-shadow:0 0 4px #00000040}.color-box{width:50px}.selected{background:var(--primary-bg-color)}.header{height:45px;display:flex;justify-content:space-between;border-bottom:2px solid #F0F0F0;align-items:center;padding-left:15px;padding-right:15px}.header p{font-size:16px;font-weight:600;font-family:var(--primary-font-family)}.body{padding:15px}.footer{height:45px;position:absolute;bottom:0;left:0;padding:0 15px}.footer button{border:unset;border-radius:10px;font-size:15px;font-weight:500;padding:5px;color:#fff;text-align:center;background:var(--primary-bg-color)}p{margin-bottom:0!important}.link-text{font-size:15px;font-weight:600;font-family:var(--primary-font-family);color:#434343;margin-bottom:10px}.input-text{height:37px;width:100%;border:1px solid var(--grey-color);border-radius:5px;outline:none;font-size:14px;padding:10px 20px;font-weight:400;color:#090909e6}.link-text-input{background-color:var(--grey-color)}.desc{margin-top:10px;font-size:13px;color:#09090980;font-weight:400;font-family:Inter;margin-bottom:25px!important}hr{border:1px solid rgba(116,116,116,.2)}.groups{display:flex;justify-content:space-between;margin-top:25px}.groups div{font-size:15px;font-weight:600;color:#2c2c2c99;padding:6px 30px;cursor:pointer}.selectedType{position:relative;text-align:center;background:var(--primary-bg-color);background-clip:text;box-shadow:0 0 4px #00000040;border-radius:10px}.selectedType:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.f-18{font-size:18px}.mt-10{margin-top:10px}.drop-down-container{padding:10px;border-radius:8px;background:#fff}.drop-down-container select{width:90%;appearance:none;position:relative;outline:unset;border:unset;border-right:3px solid rgba(230,230,230,1);background:#fff;font-size:14px;padding:0 10px;border-radius:unset}.drop-down-container .down-arrow{width:10%;padding:0 6px}select option{padding:10px;background:#fff;color:#000}.field-container{background:var(--grey-color);border-radius:13px;padding:10px}.sub-text{font-size:13px;color:#09090980}.input-label-1{font-size:16px;font-weight:600}.input-label-2{color:#09090980}option:hover{background:var(--primary-bg-color)}.cp{cursor:pointer}.colorType{padding:3px 10px;box-shadow:0 0 4px #00000040;border-radius:10px;width:25%;border:1px solid #090981}.colorType select{background:transparent}.border-0{outline:unset}.transition-image{transition:opacity .3s ease-in-out,transform .3s ease-in-out}.color{background:#fff;padding:1rem}.custom-mat-form{width:100%;margin:10px 0;background-color:#f9f9f9;border-radius:8px}.custom-mat-form.mat-form-field-appearance-outline .mat-form-field-outline{color:#1976d2;border-color:#1976d2}.custom-mat-form .mat-form-field-label{color:#666;font-weight:500}.custom-mat-form .mat-select-trigger{padding:10px;font-size:14px;color:#333}::ng-deep .mat-select-panel{background-color:#fff;color:#333}::ng-deep .mat-option{font-size:14px;padding:10px 16px}::ng-deep .mat-option:hover{background-color:#e0f7fa}.color-container{padding:7px;gap:10px;border-radius:10px}.custom-input{height:35px;width:80%;border-radius:2rem;box-shadow:0 1px 3px #3c404326,0 1px 2px #3c404326}.outline-btn{border:2px solid #374151;color:#374151;background:transparent}.solid-btn{background-color:#374151;border:2px solid #374151;color:#fff}.text-btn{border:unset;color:#000}.btn-style{padding-top:5px;padding-bottom:5px;font-size:16px!important;margin-top:14px}.box-shadow{height:40px}.gradientStyle{-webkit-background-clip:text!important;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.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: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LinkEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-link-editor', standalone: true, imports: [CommonModule, FormsModule, MatOptionModule, MatInputModule, MatSelectModule, MatIconModule, ButtonDirectiveDirective, MatSliderModule, MatProgressSpinner], template: "<section>\r\n  <div class=\"header\">\r\n    <p>{{data.type == 'BUTTON' ? \"Button\" : \"Link\"}} Settings</p>\r\n    <mat-icon (click)=\"closeDialog()\" class=\"f-18 d-flex align-items-center justify-content-center cp\">close</mat-icon>\r\n  </div>\r\n\r\n  <div class=\"body\">\r\n    <div>\r\n      <label class=\"link-text\">{{data.type == 'BUTTON' ? \"Button\" : \"Link\"}} Text</label><br>\r\n      <input type=\"text\" class=\"input-text link-text-input\" [(ngModel)]=\"link.label\">\r\n      <p class=\"desc\">This is the text that will be displayed to users</p>\r\n    </div>\r\n\r\n    <hr>\r\n\r\n    <!-- <ng-container *ngIf=\"data.type == 'BUTTON'\">\r\n      <select>\r\n        <ng-container *ngFor=\"let style of styles\">\r\n          <option (click)=\"changeButtonStyle(style)\" [value]=\"style.name\">{{style.name}}</option>\r\n        </ng-container>\r\n      <select>\r\n    </ng-container> -->\r\n\r\n    <ng-container *ngIf=\"data.type == 'BUTTON'\">\r\n      <div class=\"field-container mb-2\">\r\n        <div class=\"d-flex justify-content-between align-items-center\">\r\n          <label class=\"link-text mb-1\">Button</label>\r\n          <div class=\"colorType d-flex align-items-center justify-content-center\">\r\n            <select class=\"border-0 w-100\" [(ngModel)]=\"data.buttonStyle.type\" (ngModelChange)=\"changeButtonStyle()\">\r\n              <ng-container *ngFor=\"let type of buttonTypes\">\r\n                <option [value]=\"type.type\">\r\n                  {{type.type | titlecase}}\r\n                </option>\r\n              </ng-container>\r\n            </select>\r\n          </div>\r\n        </div>\r\n        <div>\r\n          <div class=\"preview d-flex justify-content-center\">\r\n            <button class=\"btn-style w-80\" [style.borderRadius]=\"setBorderRadius()\" [style.border]=\"setBorder()\"\r\n              [style.background]=\"setBackground()\">\r\n              <span\r\n                *ngIf=\"(data?.buttonStyle?.type === 'Text' || data?.buttonStyle?.type === 'Outline') && data?.buttonStyle?.colorType === 'Gradient'\"\r\n                [ngStyle]=\"{\r\n                  'background': 'linear-gradient(90deg, ' + data?.buttonStyle?.background + ' 0%, ' + data?.buttonStyle.secondaryBackground + ' 100%)'\r\n                }\">\r\n                {{ link.label ? link.label : \"Button Text\"}}\r\n              </span>\r\n              <span *ngIf=\"data?.style?.colorType == 'Solid' || data?.buttonStyle?.type == 'Solid'\"\r\n                [style.color]=\"setColor()\">\r\n                {{ link.label ? link.label : \"Button Text\"}}\r\n              </span>\r\n              <span *ngIf=\"data?.buttonStyle?.type === 'Text' || data?.buttonStyle?.type === 'Outline'\"\r\n                [style.color]=\"setColor()\">\r\n                {{ link.label ? link.label : \"Button Text\"}}\r\n              </span>\r\n            </button>\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"field-container\">\r\n        <label class=\"link-text\">Button Style</label>\r\n        <div class=\"color-container row\">\r\n          <div class=\"color br-10\">\r\n            <div class=\"color-top d-flex justify-content-between mb-2 align-items-center\">\r\n              <div class=\"left-side\">Color</div>\r\n              <div class=\"right-side\">\r\n                <div class=\"colorType d-flex align-items-center justify-content-center w-100\">\r\n                  <select class=\"border-0 w-100\" [(ngModel)]=\"data.buttonStyle.colorType\"\r\n                    (ngModelChange)=\"changeButtonStyle()\">\r\n                    <ng-container *ngFor=\"let type of backgroundType\">\r\n                      <option style=\"padding: 10px;\">\r\n                        {{ type | titlecase }}</option>\r\n                    </ng-container>\r\n                  </select>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"color-bottom\">\r\n              <div class=\"mt-20\" *ngIf=\"data.buttonStyle.colorType === 'Solid'\">\r\n                <div class=\"text-background\">\r\n                  <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.background\"\r\n                    (ngModelChange)=\"getContrastTextColor(data.buttonStyle.background)\" style=\"display: none;\"\r\n                    #colorInput>\r\n                  <div class=\"w-100 d-flex flex-column mt-2\">\r\n                    <label class=\"color-text mb-1 d-flex justify-content-center\"> Button Color</label>\r\n                    <div class=\"w-100 d-flex justify-content-center\">\r\n                      <div class=\"custom-input\" [style.background]=\"data.buttonStyle.background\"\r\n                        (click)=\"colorInput.click()\"></div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"mt-20\" *ngIf=\"data.buttonStyle.colorType === 'Gradient'\">\r\n                <div class=\"text-background\">\r\n                  <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.background\"\r\n                    (ngModelChange)=\"changeButtonStyle()\" style=\"display: none;\" #colorInput1>\r\n                  <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.secondaryBackground\"\r\n                    (ngModelChange)=\"changeButtonStyle()\" style=\"display: none;\" #colorInput>\r\n                  <div class=\"w-100 d-flex mt-2\">\r\n                    <div class=\"w-100 d-flex flex-column\">\r\n                      <label class=\"color-text mb-1 d-flex justify-content-center\">Color 1</label>\r\n                      <div class=\"d-flex justify-content-center\">\r\n                        <div class=\"custom-input\" [style.background]=\"data?.buttonStyle?.background\"\r\n                          (click)=\"colorInput1.click()\"></div>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"w-100 d-flex flex-column\">\r\n                      <label class=\"color-text mb-1 d-flex justify-content-center\">Color 2</label>\r\n                      <div class=\"d-flex justify-content-center\">\r\n                        <div class=\"custom-input\" [style.background]=\"data?.buttonStyle?.secondaryBackground\"\r\n                          (click)=\"colorInput.click()\"></div>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"gradient-direction\">\r\n                  <div class=\"left-direction mt-3 mb-1\"> Direction</div>\r\n                  <div class=\"right-direction\">\r\n                    <div class=\"d-flex justify-content-center align-items-center\">\r\n                      <div class=\"box-shadow d-flex br-10 w-80\">\r\n                        <ng-container *ngFor=\"let direction of directionType\">\r\n                          <div class=\"color-box d-flex p-2 align-items-center justify-content-center br-10\"\r\n                            [ngClass]=\"{'selected' : data.buttonStyle?.gradientDirection === direction.type}\"\r\n                            (click)=\"data.buttonStyle.gradientDirection = direction.type;changeButtonStyle()\">\r\n                            <img class=\"w-10\" [src]=\"direction.icon\" alt=\"icon\"\r\n                              *ngIf=\"data.buttonStyle?.gradientDirection !== direction.type\" loading=\"lazy\">\r\n                            <img class=\"w-10\" [src]=\"direction.activeIcon\" alt=\"icon\"\r\n                              *ngIf=\"data.buttonStyle?.gradientDirection === direction.type\" loading=\"lazy\">\r\n                          </div>\r\n                        </ng-container>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"mt-20\">\r\n            <div class=\"text-background\">\r\n              <input type=\"color\" class=\"color\" [(ngModel)]=\"data.buttonStyle.textColor\"\r\n                (ngModelChange)=\"changeButtonStyle()\" style=\"display: none;\" #colorInput3>\r\n              <div class=\"w-100 d-flex flex-column mt-2\">\r\n                <label class=\"color-text mb-1 d-flex justify-content-center\">Text Color</label>\r\n                <div class=\"w-100 d-flex justify-content-center\">\r\n                  <div class=\"custom-input\" [style.background]=\"data.buttonStyle.textColor\"\r\n                    (click)=\"colorInput3.click()\"></div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"corner-radius bg-white p-2  br-10 d-flex justify-content-between\"\r\n            *ngIf=\"data.buttonStyle.type != 'Text'\">\r\n            <div class=\"sub-text-1 d-flex align-items-center\">\r\n              Corner Radius\r\n            </div>\r\n            <div class=\"d-flex justify-content-center align-items-center\">\r\n              <div class=\"box-shadow d-flex br-10\">\r\n                <ng-container *ngFor=\"let shape of buttonShapes\">\r\n                  <div class=\"color-box d-flex p-2 align-items-center justify-content-center br-10\"\r\n                    [ngClass]=\"{'selected' : data.buttonStyle.shape === shape.type}\"\r\n                    (click)=\"data.buttonStyle.shape = shape.type;changeButtonStyle()\">\r\n                    <img [src]=\"shape.icon\" alt=\"icon\" *ngIf=\"data.buttonStyle.shape !== shape.type\" loading=\"lazy\"\r\n                      class=\"transition-image\">\r\n                    <img [src]=\"shape.activeIcon\" alt=\"icon\" *ngIf=\"data.buttonStyle?.shape === shape.type\"\r\n                      loading=\"lazy\" class=\"transition-image\">\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"p-2 d-flex justify-content-between align-items-center mt-20\">\r\n        <div class=\"fw-bold\">Show Icon</div>\r\n        <div class=\"form-check form-switch ml-auto\">\r\n          <input class=\"form-check-input switch-btn\" type=\"checkbox\" [(ngModel)]=\"link.showIcon\" role=\"switch\">\r\n        </div>\r\n      </div>\r\n      <div>\r\n        <!-- <p class=\"heading mb-0\">Image</p> -->\r\n        <div class=\"upload-image cp\" *ngIf=\"link.showIcon && !link?.icon?.url\" (click)=\"updateImage()\">\r\n          <img loading=\"lazy\"\r\n            src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\"\r\n            alt=\"\">\r\n          <p class=\"upload-text mb-0\">Upload a file</p>\r\n          <p class=\"upload-text mb-0\">or select an existing one</p>\r\n          <span class=\"upload-text\">up to 32MB</span>\r\n        </div>\r\n        <div class=\"sec d-flex align-items-center\" *ngIf=\"link.showIcon && link?.icon?.url\">\r\n          <ng-container *ngIf=\"!imgLoader\">\r\n            <img [src]=\"link?.icon?.url\">\r\n            <div class=\"repalce-image cursor-pointer\" (click)=\"updateImage()\">\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" width=\"24\"\r\n                height=\"24\" class=\"icon w-4 h-4\" aria-hidden=\"true\">\r\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n                  d=\"m4 16 4.58579-4.5858c.78104-.781 2.04741-.781 2.82841 0L16 16m-2-2 1.5858-1.5858c.781-.781 2.0474-.781 2.8284 0L20 14m-6-6h.01M6 20h12c1.1046 0 2-.8954 2-2V6c0-1.10457-.8954-2-2-2H6c-1.10457 0-2 .89543-2 2v12c0 1.1046.89543 2 2 2Z\">\r\n                </path>\r\n              </svg>\r\n            </div>\r\n\r\n            <div class=\"delete-image cursor-pointer \" (click)=\"deleteImage()\">\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"#ffffff\" viewBox=\"0 0 24 24\" width=\"24\"\r\n                height=\"24\" class=\"icon h-4 w-4\" aria-hidden=\"true\">\r\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n                  d=\"m19 7-.8673 12.1425C18.0579 20.1891 17.187 21 16.1378 21H7.86224c-1.04928 0-1.92016-.8109-1.99492-1.8575L5 7m5 4v6m4-6v6m1-10V4c0-.55228-.4477-1-1-1h-4c-.55228 0-1 .44772-1 1v3M4 7h16\">\r\n                </path>\r\n              </svg>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"imgLoader\">\r\n            <div class=\"upload_spinner d-flex w-100 h-100 justify-content-center align-items-center\">\r\n              <mat-spinner></mat-spinner>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n\r\n\r\n      </div>\r\n\r\n      <div class=\"fw-bold p-2 mb-2\">Icon Position</div>\r\n      <div class=\"tabs d-flex px-2 gap-3 mb-2\" *ngIf=\"link.showIcon\">\r\n        <div class=\"tab px-3 py-2\" *ngFor=\"let tab of ['left','right']\" (click)=\"link.icon.iconPosition = tab\"\r\n          [class.selectedTab]=\"link.icon.iconPosition == tab\">\r\n          {{tab | titlecase}}\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"data?.linkData?.length != 0\">\r\n\r\n\r\n      <div class=\"groups cp\">\r\n        <div *ngFor=\"let type of linkType\" [ngClass]=\"{'selectedType' : type.type === selectedType}\"\r\n          (click)=\"changeType(type.type)\">{{type.type}}</div>\r\n      </div>\r\n\r\n      <div class=\"field-container mt-3\">\r\n        <div *ngIf=\"link.linkType === RedirectionLink.Page\">\r\n          <label class=\"input-label-1 mt-3 mb-2\">Select Page</label>\r\n          <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n            <select [(ngModel)]=\"link.pageId\" (ngModelChange)=\"setRedirectUrl()\">\r\n              <option value=\"\" selected>Select from your existing pages</option>\r\n              <option *ngFor=\"let page of templatePage\" [value]=\"page.id\" style=\"padding: 10px;\">\r\n                {{page.pageName}}</option>\r\n            </select>\r\n            <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n                src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\"\r\n                alt=\"\">\r\n            </div>\r\n          </div>\r\n          <!-- <div class=\"sub-text\">Select from your existing pages</div> -->\r\n        </div>\r\n\r\n        <div *ngIf=\"link.linkType === RedirectionLink.section\">\r\n          <label class=\"mt-3 mb-2 input-label-1\">Section</label>\r\n          <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n            <select [(ngModel)]=\"link.pageId\" style=\"cursor:pointer\">\r\n              <option value=\"\" selected>Select the Section</option>\r\n              <option *ngFor=\"let section of templatePage[0].components\" [value]=\"section.id\">{{section.sectionName}}\r\n              </option>\r\n            </select>\r\n            <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n                src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\"\r\n                alt=\"\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div\r\n          *ngIf=\"link.linkType === RedirectionLink.External || link.linkType === RedirectionLink.Email || link.linkType === RedirectionLink.Phone\">\r\n          <label class=\"mt-3 mb-2 input-label-1\">Select type</label>\r\n          <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n            <select [(ngModel)]=\"link.linkType\" style=\"cursor:pointer\">\r\n              <option value=\"\" selected>Select the Type</option>\r\n              <option *ngFor=\"let type of externalLinkType\" [value]=\"type.type\">{{type.type}}</option>\r\n            </select>\r\n            <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n                src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\"\r\n                alt=\"\">\r\n            </div>\r\n          </div>\r\n          <label class=\"input-label mb-2\">{{link.linkType === RedirectionLink.External ? 'Website' : link.linkType ===\r\n            RedirectionLink.Email ? 'Email Address' : 'Phone Number'}}</label>\r\n          <input type=\"text\" class=\"input-text\" [(ngModel)]=\"link.redirectionUrl\"\r\n            [placeholder]=\"link.linkType === RedirectionLink.External ? 'example : https://facebook.com': ''\">\r\n        </div>\r\n\r\n        <div class=\"d-flex justify-content-between mt-10\">\r\n          <label class=\"input-label-2\">Open in a new browser tab</label>\r\n          <div class=\"form-check form-switch ml-auto\">\r\n            <input class=\"form-check-input switch-btn\" type=\"checkbox\" [(ngModel)]=\"link.newTab\" role=\"switch\">\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n\r\n      <div class=\"footer w-100  align-items-center justify-content-center\">\r\n        <button *ngIf=\"addLink\" (click)=\"addNewLink()\">Update Link</button>\r\n      </div>\r\n\r\n    </ng-container>\r\n\r\n  </div>\r\n\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}:host{--grey-color: rgba(250, 250, 250, 1)}.br-7{border-radius:7px}.br-10{border-radius:10px}.switch-btn{position:relative;z-index:10}.upload-image{border:3px dashed rgba(44,44,44,.6);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;margin:10px 10px 22px;border-radius:20px;box-shadow:#0000000d 0 1px 2px}.upload-image img{margin-bottom:8px;height:40px}.upload-text{background:var(--primary-bg-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:500}.sec{padding:10px 10px 22px;position:relative}.sec img{width:100%;height:200px;border-radius:20px}.delete-image{background-color:#d92d20;width:30px;height:30px;border-radius:6px;display:flex;justify-content:center;align-items:center;position:absolute;top:20px;right:20px}.repalce-image{display:flex;align-items:center;background:#fff;padding:2px;border-radius:6px;position:absolute;bottom:30px;left:20px}.selectedTab{background:#39393934;font-weight:700}.tab{border:1px solid rgba(44,44,44,.6);border-radius:12px}.w-90{width:90%}.sub-text-1{font-size:15px;color:#000}.w-48{width:48%}.box-shadow{box-shadow:0 0 4px #00000040}.color-box{width:50px}.selected{background:var(--primary-bg-color)}.header{height:45px;display:flex;justify-content:space-between;border-bottom:2px solid #F0F0F0;align-items:center;padding-left:15px;padding-right:15px}.header p{font-size:16px;font-weight:600;font-family:var(--primary-font-family)}.body{padding:15px}.footer{height:45px;position:absolute;bottom:0;left:0;padding:0 15px}.footer button{border:unset;border-radius:10px;font-size:15px;font-weight:500;padding:5px;color:#fff;text-align:center;background:var(--primary-bg-color)}p{margin-bottom:0!important}.link-text{font-size:15px;font-weight:600;font-family:var(--primary-font-family);color:#434343;margin-bottom:10px}.input-text{height:37px;width:100%;border:1px solid var(--grey-color);border-radius:5px;outline:none;font-size:14px;padding:10px 20px;font-weight:400;color:#090909e6}.link-text-input{background-color:var(--grey-color)}.desc{margin-top:10px;font-size:13px;color:#09090980;font-weight:400;font-family:Inter;margin-bottom:25px!important}hr{border:1px solid rgba(116,116,116,.2)}.groups{display:flex;justify-content:space-between;margin-top:25px}.groups div{font-size:15px;font-weight:600;color:#2c2c2c99;padding:6px 30px;cursor:pointer}.selectedType{position:relative;text-align:center;background:var(--primary-bg-color);background-clip:text;box-shadow:0 0 4px #00000040;border-radius:10px}.selectedType:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.f-18{font-size:18px}.mt-10{margin-top:10px}.drop-down-container{padding:10px;border-radius:8px;background:#fff}.drop-down-container select{width:90%;appearance:none;position:relative;outline:unset;border:unset;border-right:3px solid rgba(230,230,230,1);background:#fff;font-size:14px;padding:0 10px;border-radius:unset}.drop-down-container .down-arrow{width:10%;padding:0 6px}select option{padding:10px;background:#fff;color:#000}.field-container{background:var(--grey-color);border-radius:13px;padding:10px}.sub-text{font-size:13px;color:#09090980}.input-label-1{font-size:16px;font-weight:600}.input-label-2{color:#09090980}option:hover{background:var(--primary-bg-color)}.cp{cursor:pointer}.colorType{padding:3px 10px;box-shadow:0 0 4px #00000040;border-radius:10px;width:25%;border:1px solid #090981}.colorType select{background:transparent}.border-0{outline:unset}.transition-image{transition:opacity .3s ease-in-out,transform .3s ease-in-out}.color{background:#fff;padding:1rem}.custom-mat-form{width:100%;margin:10px 0;background-color:#f9f9f9;border-radius:8px}.custom-mat-form.mat-form-field-appearance-outline .mat-form-field-outline{color:#1976d2;border-color:#1976d2}.custom-mat-form .mat-form-field-label{color:#666;font-weight:500}.custom-mat-form .mat-select-trigger{padding:10px;font-size:14px;color:#333}::ng-deep .mat-select-panel{background-color:#fff;color:#333}::ng-deep .mat-option{font-size:14px;padding:10px 16px}::ng-deep .mat-option:hover{background-color:#e0f7fa}.color-container{padding:7px;gap:10px;border-radius:10px}.custom-input{height:35px;width:80%;border-radius:2rem;box-shadow:0 1px 3px #3c404326,0 1px 2px #3c404326}.outline-btn{border:2px solid #374151;color:#374151;background:transparent}.solid-btn{background-color:#374151;border:2px solid #374151;color:#fff}.text-btn{border:unset;color:#000}.btn-style{padding-top:5px;padding-bottom:5px;font-size:16px!important;margin-top:14px}.box-shadow{height:40px}.gradientStyle{-webkit-background-clip:text!important;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}\n"] }]
+        }], ctorParameters: () => [{ type: ElementServiceService }, { type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: EventsService }, { type: i1$1.MatDialog }] });
+
+class ButtonEditorDirective {
+    constructor(el, matDialog) {
+        this.el = el;
+        this.matDialog = matDialog;
+        this.appButtonEditor = false;
+        this.sectionId = '';
+        this.buttonId = '';
+        this.HIGHLIGHT_BORDER = '3px solid #283E90';
+    }
+    ngOnInit() {
+        if (this.appButtonEditor) {
+            this.el.nativeElement.style.border = this.buttonStyle?.type == 'Outline' ? `2px solid ${this.backgroundInfo?.accentColor}` : 'unset';
+            this.setupEventListeners();
+        }
+        else {
+            this.el.nativeElement.style.border = this.buttonStyle?.type == 'Outline' ? `2px solid ${this.backgroundInfo?.accentColor}` : 'unset';
+        }
+    }
+    ngOnChanges() {
+        this.cleanup();
+        if (this.appButtonEditor) {
+            this.setupEventListeners();
+        }
+    }
+    setupEventListeners() {
+        this.mouseEnterSub = fromEvent(this.el.nativeElement, 'mouseenter')
+            .pipe(debounceTime(100))
+            .subscribe(() => {
+            this.el.nativeElement.style.border = this.HIGHLIGHT_BORDER;
+        });
+        this.mouseLeaveSub = fromEvent(this.el.nativeElement, 'mouseleave')
+            .pipe(debounceTime(100))
+            .subscribe(() => {
+            this.el.nativeElement.style.border = this.buttonStyle?.type == 'Outline' ? `2px solid ${this.backgroundInfo?.accentColor}` : 'unset';
+        });
+        this.clickSub = fromEvent(this.el.nativeElement, 'click')
+            .pipe(filter(() => !this.matDialog.openDialogs.length))
+            .subscribe(() => {
+            this.matDialog.open(LinkEditorComponent, {
+                panelClass: 'link-editor',
+                data: {
+                    linkData: this.buttonData ?? {},
+                    type: "BUTTON",
+                    buttonStyle: this.buttonStyle ?? {},
+                    backgroundInfo: this.backgroundInfo ?? {},
+                    buttonId: (this.sectionId + this.buttonId),
+                }
+            });
+        });
+    }
+    cleanup() {
+        if (this.mouseEnterSub) {
+            this.mouseEnterSub.unsubscribe();
+            this.mouseEnterSub = undefined;
+        }
+        if (this.mouseLeaveSub) {
+            this.mouseLeaveSub.unsubscribe();
+            this.mouseLeaveSub = undefined;
+        }
+        if (this.clickSub) {
+            this.clickSub.unsubscribe();
+            this.clickSub = undefined;
+        }
+        // Reset styles when cleaning up
+        this.el.nativeElement.style.border = '';
+    }
+    ngOnDestroy() {
+        this.cleanup();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonEditorDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ButtonEditorDirective, isStandalone: true, selector: "button[appButtonEditor]", inputs: { appButtonEditor: "appButtonEditor", buttonData: "buttonData", buttonStyle: "buttonStyle", backgroundInfo: "backgroundInfo", sectionId: "sectionId", buttonId: "buttonId" }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonEditorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[appButtonEditor]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.MatDialog }], propDecorators: { appButtonEditor: [{
+                type: Input
+            }], buttonData: [{
+                type: Input
+            }], buttonStyle: [{
+                type: Input
+            }], backgroundInfo: [{
+                type: Input
+            }], sectionId: [{
+                type: Input
+            }], buttonId: [{
+                type: Input
+            }] } });
+
+class SimpoButtonComponent {
+    constructor(_eventService) {
+        this._eventService = _eventService;
+        this.buttonId = '';
+        this.sectionId = '';
+        this.edit = false;
+    }
+    ngOnInit() {
+    }
+    redirectTo() {
+        if (!this.buttonContent?.pageId && !this.buttonContent?.redirectionUrl)
+            return;
+        this._eventService.buttonRedirection.emit({ data: this.buttonContent });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SimpoButtonComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SimpoButtonComponent, isStandalone: true, selector: "app-button-element", inputs: { buttonContent: "buttonContent", buttonStyle: "buttonStyle", buttonId: "buttonId", color: "color", sectionId: "sectionId", edit: "edit", backgroundInfo: "backgroundInfo" }, ngImport: i0, template: "<button class=\"button gap-2\" (click)=\"redirectTo()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\"\r\n  [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\" [backgroundInfo]=\"backgroundInfo\"\r\n  [sectionId]=\"sectionId\" [buttonId]=\"buttonId\"  [class.flex-row-reverse]=\"buttonContent?.icon?.iconPosition === 'left'\">\r\n  <div>{{buttonContent?.label}}</div>\r\n  <div class=\"btn-icon\" *ngIf=\"buttonContent?.showIcon\" [ngStyle]=\"{\r\n    'background': buttonStyle?.textColor,\r\n    'mask-image': 'url(' + buttonContent?.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>", styles: [".button{font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:max-content!important;font-weight:700;font-family:var(--website-font-family);height:43px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.button:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px);transition:all .3s ease-in-out}\n"], dependencies: [{ kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SimpoButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-button-element', standalone: true, imports: [ButtonDirectiveDirective, ButtonEditorDirective, CommonModule], template: "<button class=\"button gap-2\" (click)=\"redirectTo()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\"\r\n  [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\" [backgroundInfo]=\"backgroundInfo\"\r\n  [sectionId]=\"sectionId\" [buttonId]=\"buttonId\"  [class.flex-row-reverse]=\"buttonContent?.icon?.iconPosition === 'left'\">\r\n  <div>{{buttonContent?.label}}</div>\r\n  <div class=\"btn-icon\" *ngIf=\"buttonContent?.showIcon\" [ngStyle]=\"{\r\n    'background': buttonStyle?.textColor,\r\n    'mask-image': 'url(' + buttonContent?.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>", styles: [".button{font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:max-content!important;font-weight:700;font-family:var(--website-font-family);height:43px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.button:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px);transition:all .3s ease-in-out}\n"] }]
+        }], ctorParameters: () => [{ type: EventsService }], propDecorators: { buttonContent: [{
+                type: Input
+            }], buttonStyle: [{
+                type: Input
+            }], buttonId: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], sectionId: [{
+                type: Input
+            }], edit: [{
+                type: Input
+            }], backgroundInfo: [{
+                type: Input
+            }] } });
+
+class ContenteditableValueAccessor {
+    constructor(elementRef, renderer) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.onTouched = () => { };
+        this.contenteditable = true; // Allow dynamic input
+        this.onChange = (_value) => { };
+        this.renderer.setAttribute(this.elementRef.nativeElement, 'contenteditable', 'true');
+    }
+    ngAfterViewInit() {
+        this.renderer.setAttribute(this.elementRef.nativeElement, 'contenteditable', this.contenteditable ? 'true' : 'false');
+        this.observer = new MutationObserver(() => {
+            this.onChange(this.elementRef.nativeElement.innerHTML);
+        });
+        this.observer.observe(this.elementRef.nativeElement, {
+            characterData: true,
+            childList: true,
+            subtree: true,
+        });
+    }
+    ngOnDestroy() {
+        this.observer?.disconnect();
+    }
+    onInput() {
+        this.observer?.disconnect();
+        this.onChange(this.elementRef.nativeElement.innerHTML);
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    writeValue(value) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'innerHTML', value || '');
+    }
+    registerOnChange(onChange) {
+        this.onChange = onChange;
+    }
+    registerOnTouched(onTouched) {
+        this.onTouched = onTouched;
+    }
+    setDisabledState(disabled) {
+        this.renderer.setAttribute(this.elementRef.nativeElement, 'contenteditable', String(!disabled));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContenteditableValueAccessor, deps: [{ token: ElementRef }, { token: Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ContenteditableValueAccessor, isStandalone: true, selector: "[contenteditable][ngModel]", inputs: { contenteditable: "contenteditable" }, host: { listeners: { "input": "onInput()", "blur": "onBlur()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ContenteditableValueAccessor),
+                multi: true,
+            },
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContenteditableValueAccessor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[contenteditable][ngModel]',
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ContenteditableValueAccessor),
+                            multi: true,
+                        },
+                    ],
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
+                    type: Inject,
+                    args: [ElementRef]
                 }] }, { type: i0.Renderer2, decorators: [{
                     type: Inject,
                     args: [Renderer2]
@@ -1515,444 +1816,160 @@ class TextEditorComponent {
             else if (element.style.textAlign) {
                 this.toolbarData.selectedAlignment = `justify${element.style.textAlign.charAt(0).toUpperCase() + element.style.textAlign.slice(1)}`;
             }
-            else if (element.style.fontSize) {
-                this.toolbarData.selectedSize = element.style.fontSize;
-            }
-            else if (element.style.color) {
-                this.toolbarData.selectedColor = element.style.color;
-            }
-            element = element.parentElement;
-        }
-    }
-    reFormattingData() {
-        this.toolbarData = {
-            selectedHeading: '',
-            isBold: false,
-            isItalic: false,
-            isUnderlined: false,
-            selectedSize: '',
-            selectedList: '',
-            selectedAlignment: '',
-            selectedColor: ''
-        };
-    }
-    changeGradientColor() {
-        this.restoreSelection(); // Restore the selection before applying gradient
-        const color = `linear-gradient(90deg, ${this.primaryColor} 0%, ${this.secondaryColor} 100%)`;
-        this.applyGradientToText(color);
-    }
-    applyGradientToText(gradientValue) {
-        if (!isPlatformBrowser(this.platformId))
-            return;
-        const selection = window.getSelection();
-        if (!selection || selection.rangeCount === 0)
-            return;
-        // Get the current selection range
-        const range = selection.getRangeAt(0);
-        // Check if the range is valid for wrapping
-        if (!range || range.collapsed)
-            return;
-        // Extract the selected content
-        const selectedContent = range.extractContents();
-        const spans = this.editor.nativeElement.querySelectorAll('span');
-        spans.forEach((span) => {
-            // Only unwrap spans that *don’t* carry gradient—i.e. strips any residual tags
-            const parent = span.parentNode;
-            while (span.firstChild) {
-                parent.insertBefore(span.firstChild, span);
-            }
-            parent.removeChild(span);
-        });
-        // Create a new <span> element to wrap the selected text
-        const span = document.createElement('span');
-        span.style.background = gradientValue;
-        span.style.backgroundClip = 'text';
-        span.style.webkitBackgroundClip = 'text';
-        span.style.color = 'transparent';
-        span.style.webkitTextFillColor = 'transparent';
-        // Append the selected content to the <span>
-        span.appendChild(selectedContent);
-        // Insert the <span> back into the range
-        range.insertNode(span);
-        // Clear the selection
-        selection.removeAllRanges();
-        // Emit the updated HTML content
-        this.valueChange.emit(this.editor.nativeElement.innerHTML);
-    }
-    regenerateText() {
-        let payload = {
-            businessId: localStorage.getItem('businessId'),
-            dataId: this.sectionId,
-            subIndustryId: localStorage.getItem('subIndustryId'),
-            suggestedDataType: 'COMPONENT',
-            tone: 'PROFESSIONAL',
-            value: this.value,
-            label: this.label
-        };
-        this.editorService.regenerateText(payload).subscribe((res) => {
-            this.value = res.data;
-        });
-    }
-    saveSelection() {
-        const selection = window.getSelection();
-        if (selection && selection.rangeCount > 0) {
-            this.savedRange = selection.getRangeAt(0);
-        }
-    }
-    restoreSelection() {
-        if (this.savedRange) {
-            const selection = window.getSelection();
-            selection?.removeAllRanges();
-            selection?.addRange(this.savedRange);
-        }
-    }
-    onPaste(event) {
-        if (!isPlatformBrowser(this.platformId))
-            return;
-        event.preventDefault();
-        const html = event.clipboardData?.getData('text/html') || '';
-        const cleanHtml = this.stripStyles(html);
-        document.execCommand('insertHTML', false, cleanHtml);
-    }
-    stripStyles(html) {
-        const doc = new DOMParser().parseFromString(html, 'text/html');
-        const elements = doc.body.querySelectorAll('*');
-        elements.forEach(el => {
-            el.removeAttribute('style'); // Remove all inline styles
-            el.removeAttribute('class'); // Optional
-        });
-        return doc.body.innerHTML;
-    }
-    getText() {
-        const textContent = this.value?.replace(/<\/?[^>]+(>|$)/g, "")?.replace(/\s+/g, ' ').trim() ?? "";
-        if (!textContent) {
-            return "";
-        }
-        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 }], 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 [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}\" [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> format_bold</mat-icon></button>\r\n    <button class=\"tool\" (click)=\"formatText('italic')\" [ngClass]=\"{'selectedTool': toolbarData.isItalic}\"><mat-icon> format_italic</mat-icon></button>\r\n    <button class=\"tool\" (click)=\"formatText('underline')\" [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(1rem, 3vw, 1.5rem)\">Medium</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')\" [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertOrderedList'}\"><mat-icon>format_list_numbered</mat-icon></button>\r\n    <button class=\"tool\" (click)=\"formatText('insertUnorderedList')\" [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertUnorderedList'}\"><mat-icon> format_list_bulleted</mat-icon></button>\r\n\r\n    <button class=\"tool\" (click)=\"formatText('justifyLeft')\" [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyLeft'}\"><mat-icon> format_align_left</mat-icon></button>\r\n    <button class=\"tool\" (click)=\"formatText('justifyCenter')\" [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyCenter'}\"><mat-icon> format_align_center</mat-icon></button>\r\n    <button class=\"tool\" (click)=\"formatText('justifyRight')\" [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyRight'}\"><mat-icon> format_align_right</mat-icon></button>\r\n\r\n    <div class=\"colorType\">\r\n      <button class=\"solid\" [ngClass]=\"{'solidColorSelected': selectedColorType === 'SOLID'}\" (click)=\"selectedColorType = 'SOLID'\">Solid</button>\r\n      <button class=\"gradient\" [ngClass]=\"{'gradientColorSelected': selectedColorType === 'GRADIENT'}\" (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)\" [(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()\" [(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()\" [(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'\" [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\" 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>\r\n", 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: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.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: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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,
-            args: [{ selector: 'simpo-text-editor', standalone: true, imports: [
-                        CommonModule,
-                        FormsModule,
-                        ContenteditableValueAccessor,
-                        MatIconModule
-                    ], template: "<div class=\"editor-container\" [ngClass]=\"{'border': editable}\" #parentElement [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}\" [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> format_bold</mat-icon></button>\r\n    <button class=\"tool\" (click)=\"formatText('italic')\" [ngClass]=\"{'selectedTool': toolbarData.isItalic}\"><mat-icon> format_italic</mat-icon></button>\r\n    <button class=\"tool\" (click)=\"formatText('underline')\" [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(1rem, 3vw, 1.5rem)\">Medium</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')\" [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertOrderedList'}\"><mat-icon>format_list_numbered</mat-icon></button>\r\n    <button class=\"tool\" (click)=\"formatText('insertUnorderedList')\" [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertUnorderedList'}\"><mat-icon> format_list_bulleted</mat-icon></button>\r\n\r\n    <button class=\"tool\" (click)=\"formatText('justifyLeft')\" [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyLeft'}\"><mat-icon> format_align_left</mat-icon></button>\r\n    <button class=\"tool\" (click)=\"formatText('justifyCenter')\" [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyCenter'}\"><mat-icon> format_align_center</mat-icon></button>\r\n    <button class=\"tool\" (click)=\"formatText('justifyRight')\" [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyRight'}\"><mat-icon> format_align_right</mat-icon></button>\r\n\r\n    <div class=\"colorType\">\r\n      <button class=\"solid\" [ngClass]=\"{'solidColorSelected': selectedColorType === 'SOLID'}\" (click)=\"selectedColorType = 'SOLID'\">Solid</button>\r\n      <button class=\"gradient\" [ngClass]=\"{'gradientColorSelected': selectedColorType === 'GRADIENT'}\" (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)\" [(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()\" [(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()\" [(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'\" [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\" 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>\r\n", 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]
-                }] }], propDecorators: { toolbar: [{
-                type: ViewChild,
-                args: ['toolbar', { static: false }]
-            }], editor: [{
-                type: ViewChild,
-                args: ['editor', { static: false }]
-            }], colorPicker: [{
-                type: ViewChild,
-                args: ['colorPicker']
-            }], parentElement: [{
-                type: ViewChild,
-                args: ['parentElement']
-            }], suggestion: [{
-                type: ViewChild,
-                args: ['suggestion', { static: false }]
-            }], value: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], editable: [{
-                type: Input
-            }], sectionId: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }] } });
-
-class ImageUplaodService {
-    // region = 'us-east-1'
-    // identityPoolId = 'us-east-1:d4bc770a-5664-4051-bd66-6861a6efbd9c';
-    // bucketName = `${bucketUrl}`;
-    constructor(http, bucketUrl) {
-        this.http = http;
-        this.bucketUrl = bucketUrl;
-        this.cmisFileUpload = {
-            sasToken: 'sv=2022-11-02&ss=bfqt&srt=sco&sp=rwdlacupiytfx&se=2029-12-31T23:45:03Z&st=2024-12-18T15:45:03Z&spr=https,http&sig=Qjj5Xe5KiMxvETm6rP%2FZP31i3xDS9t1QuyuKgcY%2FPC8%3D',
-            accountName: 'cmisprod',
-            containerName: 'prod-cmis'
-        };
-        this.UNSPLASH_API_TOKEN = 'iMn43HCZ_FLCMWkZgUtMAjt-p-M6vmaB1Z_3fbetmJA';
-        // console.log('bucketUrl', this.bucketUrl);
-        this.s3Client = new S3Client({
-            region: this.bucketUrl?.bucketDetails?.Region, // e.g., 'us-east-1'
-            credentials: fromCognitoIdentityPool({
-                identityPoolId: this.bucketUrl?.poolId,
-                clientConfig: { region: this.bucketUrl?.bucketDetails?.Region },
-            })
-        });
-    }
-    async uploadFileInAzure(file, folderName = 'cmis') {
-        if (typeof window !== 'undefined') {
-            const { BlobServiceClient } = await import('@azure/storage-blob');
-            const sasToken = this.cmisFileUpload.sasToken.startsWith('?')
-                ? this.cmisFileUpload.sasToken
-                : `?${this.cmisFileUpload.sasToken}`;
-            const accountName = this.cmisFileUpload.accountName;
-            const containerName = this.cmisFileUpload.containerName;
-            const blobServiceClient = new BlobServiceClient(`https://${accountName}.blob.core.windows.net${sasToken}`);
-            const containerClient = blobServiceClient.getContainerClient(containerName);
-            const blobName = `${folderName}/${file.name}`;
-            const blockBlobClient = containerClient.getBlockBlobClient(blobName);
-            await blockBlobClient.uploadData(file, {
-                blobHTTPHeaders: { blobContentType: file.type },
-            });
-            return blockBlobClient;
-        }
-        return null;
-    }
-    async uploadFileInAWS(file, folderName = '') {
-        try {
-            // CloudFront distribution domain
-            const cloudfrontDomain = this.bucketUrl.bucketDetails.Bucket == 'dev-beeos' ? 'https://d2yx15pncgmu63.cloudfront.net' : 'https://d2z9497xp8xb12.cloudfront.net';
-            // Create a unique file name
-            const fileName = `${folderName}/${Date.now()}-${file.name}`;
-            // Convert file to buffer
-            const fileBuffer = await this.fileToArrayBuffer(file);
-            // Prepare the upload parameters
-            const params = {
-                Bucket: this.bucketUrl.bucketDetails.Bucket,
-                Key: fileName,
-                Body: fileBuffer,
-                ContentType: file.type,
-                // Remove public-read ACL if using OAC/OAI as it's not needed and may cause issues
-                // ACL: 'public-read'
-            };
-            // Upload file to S3
-            const command = new PutObjectCommand(params);
-            const response = await this.s3Client?.send(command);
-            // Construct the CloudFront URL instead of S3 URL
-            const url = `${cloudfrontDomain}/${fileName}`;
-            return url;
-        }
-        catch (error) {
-            console.error('Error uploading file: ', error);
-            throw error;
-        }
-    }
-    async fileToArrayBuffer(file) {
-        return new Promise((resolve, reject) => {
-            const reader = new FileReader();
-            reader.onload = () => resolve(reader.result);
-            reader.onerror = error => reject(error);
-            reader.readAsArrayBuffer(file);
-        });
-    }
-    //Unsplash related APIS
-    searchPhotosInUnsplash(searchedText, page = 1, size = 10) {
-        const header = new HttpHeaders({
-            Authorization: `Client-ID ${this.UNSPLASH_API_TOKEN}`,
-        });
-        return this.http.get(`https://api.unsplash.com/search/photos?page=${page}&per_page=${size}&query=${searchedText}`, {
-            headers: header,
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageUplaodService, deps: [{ token: i1.HttpClient }, { token: BUCKET_URL }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageUplaodService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageUplaodService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [BUCKET_URL]
-                }] }] });
-
-class MediaSelectorComponent {
-    constructor(imageUploadService, _dialogRef, dialogData, snackBar, editorService) {
-        this.imageUploadService = imageUploadService;
-        this._dialogRef = _dialogRef;
-        this.dialogData = dialogData;
-        this.snackBar = snackBar;
-        this.editorService = editorService;
-        this.tabs = ['Unsplash', 'Upload', 'Library'];
-        this.activeTab = 'Unsplash';
-        this.searchControl = new FormControl('');
-        this.pageNo = 1;
-        this.isLoading = false;
-        this.unsplashImages = [];
-        this.imageLibrary = [];
-        this.imageSize = 50;
-        this.multiple = false;
-        this.selectedImage = new Map;
-        this.buttonLoader = false;
-    }
-    ngOnInit() {
-        this.multiple = this.dialogData?.multiple ?? true;
-        this.searchUnsplashImages();
-        this.getImageLibrary();
-    }
-    ngAfterViewInit() {
-        this.setupInfiniteScroll();
-    }
-    getImageLibrary() {
-        this.editorService.getImageLibrary().subscribe((res) => {
-            this.imageLibrary = res?.data?.content || [];
-        });
-    }
-    /** ✅ Search API with debounce to reduce unnecessary calls */
-    searchUnsplashImages() {
-        this.searchControl.valueChanges
-            .pipe(startWith(''), // Load images initially
-        debounceTime(500), // Wait 500ms after typing stops
-        distinctUntilChanged(), // Only call API if value changes
-        switchMap(value => {
-            this.pageNo = 1;
-            return this.imageUploadService.searchPhotosInUnsplash(value || 'Technology', this.pageNo);
-        }))
-            .subscribe((results) => {
-            this.unsplashImages = results.results;
-        });
-    }
-    /** ✅ Infinite Scroll */
-    setupInfiniteScroll() {
-        this.viewport.elementScrolled()
-            .pipe(debounceTime(200), // ✅ Wait 200ms before checking
-        distinctUntilChanged() // ✅ Only trigger if value changes
-        )
-            .subscribe(() => {
-            const end = this.viewport.measureScrollOffset('bottom');
-            if (end < 300 && !this.isLoading) { // ✅ Trigger only when close to the bottom
-                this.loadMoreImages();
+            else if (element.style.fontSize) {
+                this.toolbarData.selectedSize = element.style.fontSize;
             }
-        });
+            else if (element.style.color) {
+                this.toolbarData.selectedColor = element.style.color;
+            }
+            element = element.parentElement;
+        }
     }
-    /** ✅ Load More Images */
-    loadMoreImages() {
-        if (this.isLoading)
-            return; // ✅ Prevent multiple requests
-        this.isLoading = true;
-        this.pageNo++;
-        this.imageUploadService.searchPhotosInUnsplash(this.searchControl.value || 'Technology', this.pageNo)
-            .subscribe((results) => {
-            this.unsplashImages = [...this.unsplashImages, ...results.results];
-            this.isLoading = false;
-        }, () => {
-            this.isLoading = false; // ✅ Ensure it's reset even on failure
+    reFormattingData() {
+        this.toolbarData = {
+            selectedHeading: '',
+            isBold: false,
+            isItalic: false,
+            isUnderlined: false,
+            selectedSize: '',
+            selectedList: '',
+            selectedAlignment: '',
+            selectedColor: ''
+        };
+    }
+    changeGradientColor() {
+        this.restoreSelection(); // Restore the selection before applying gradient
+        const color = `linear-gradient(90deg, ${this.primaryColor} 0%, ${this.secondaryColor} 100%)`;
+        this.applyGradientToText(color);
+    }
+    applyGradientToText(gradientValue) {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return;
+        // Get the current selection range
+        const range = selection.getRangeAt(0);
+        // Check if the range is valid for wrapping
+        if (!range || range.collapsed)
+            return;
+        // Extract the selected content
+        const selectedContent = range.extractContents();
+        const spans = this.editor.nativeElement.querySelectorAll('span');
+        spans.forEach((span) => {
+            // Only unwrap spans that *don’t* carry gradient—i.e. strips any residual tags
+            const parent = span.parentNode;
+            while (span.firstChild) {
+                parent.insertBefore(span.firstChild, span);
+            }
+            parent.removeChild(span);
         });
+        // Create a new <span> element to wrap the selected text
+        const span = document.createElement('span');
+        span.style.background = gradientValue;
+        span.style.backgroundClip = 'text';
+        span.style.webkitBackgroundClip = 'text';
+        span.style.color = 'transparent';
+        span.style.webkitTextFillColor = 'transparent';
+        // Append the selected content to the <span>
+        span.appendChild(selectedContent);
+        // Insert the <span> back into the range
+        range.insertNode(span);
+        // Clear the selection
+        selection.removeAllRanges();
+        // Emit the updated HTML content
+        this.valueChange.emit(this.editor.nativeElement.innerHTML);
     }
-    selectUnsplashImage(image) {
-        if (!this.multiple)
-            this.selectedImage = new Map;
-        let uploadImage = {
+    regenerateText() {
+        let payload = {
             businessId: localStorage.getItem('businessId'),
-            uniqueId: image.id,
-            assets: [{
-                    url: image.urls.raw,
-                    width: image.width,
-                    height: image.height
-                }],
-            author: {
-                id: image.user.id,
-                userName: image.user.username,
-                name: image.user.name,
-                twitterUserName: image.user.twitter_username,
-                portFolioUrl: image.user.portfolio_url,
-                instagramUserName: image.user.instagram_username,
-            },
-            media: "UNSPLASH",
+            dataId: this.sectionId,
+            subIndustryId: localStorage.getItem('subIndustryId'),
+            suggestedDataType: 'COMPONENT',
+            tone: 'PROFESSIONAL',
+            value: this.value,
+            label: this.label
         };
-        if (this.selectedImage.has(image.id)) {
-            this.selectedImage.delete(image.id);
-        }
-        else {
-            this.selectedImage.set(image.id, uploadImage);
+        this.editorService.regenerateText(payload).subscribe((res) => {
+            this.value = res.data;
+        });
+    }
+    saveSelection() {
+        const selection = window.getSelection();
+        if (selection && selection.rangeCount > 0) {
+            this.savedRange = selection.getRangeAt(0);
         }
     }
-    uploadImageFromSystem(event) {
-        if (!this.multiple)
-            this.selectedImage = new Map;
-        let files = event.target.files;
-        const maximumFileSize = 4 * 1024 * 1024; // Max is 4mb
-        for (let file of files) {
-            if (maximumFileSize < file.size) {
-                this.snackBar.open('Maximum file size limit is 4MB', 'close', { duration: 1500 });
-                continue;
-            }
-            const reader = new FileReader();
-            const image = {
-                businessId: localStorage.getItem('businessId'),
-                uniqueId: file.name + '_' + file.size,
-                blurHash: null,
-                assets: [{
-                        width: 0,
-                        height: 0,
-                        blurhash: '',
-                        url: '',
-                    }],
-                author: null,
-                media: 'DEVICE',
-                description: file.name,
-                altDescription: file.name,
-                file: file,
-            };
-            reader.onload = (response) => {
-                image.assets[0].url = response.target.result;
-            };
-            reader.readAsDataURL(file);
-            if (!this.selectedImage.has(image.uniqueId)) {
-                this.selectedImage.set(image.uniqueId, image);
-            }
+    restoreSelection() {
+        if (this.savedRange) {
+            const selection = window.getSelection();
+            selection?.removeAllRanges();
+            selection?.addRange(this.savedRange);
         }
     }
-    deleteSystemImage(imageId) {
-        this.selectedImage.delete(imageId);
+    onPaste(event) {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        event.preventDefault();
+        const html = event.clipboardData?.getData('text/html') || '';
+        const cleanHtml = this.stripStyles(html);
+        document.execCommand('insertHTML', false, cleanHtml);
     }
-    selectFromImageLibrary(image) {
-        if (!this.multiple)
-            this.selectedImage = new Map;
-        if (this.selectedImage.has(image.uniqueId)) {
-            this.selectedImage.delete(image.uniqueId);
-        }
-        else {
-            this.selectedImage.set(image.uniqueId, image);
-        }
+    stripStyles(html) {
+        const doc = new DOMParser().parseFromString(html, 'text/html');
+        const elements = doc.body.querySelectorAll('*');
+        elements.forEach(el => {
+            el.removeAttribute('style'); // Remove all inline styles
+            el.removeAttribute('class'); // Optional
+        });
+        return doc.body.innerHTML;
     }
-    async uploadImage() {
-        this.buttonLoader = true;
-        let request = [];
-        for (let image of this.selectedImage.values()) {
-            if (image.file) {
-                const fileUrl = await this.imageUploadService.uploadFileInAWS(image.file, 'library-media');
-                image.assets[0].url = fileUrl;
-            }
-            request.push(image);
+    getText() {
+        const textContent = this.value?.replace(/<\/?[^>]+(>|$)/g, "")?.replace(/\s+/g, ' ').trim() ?? "";
+        if (!textContent) {
+            return "";
         }
-        this.editorService.saveImagesToBusinessLibrary({ data: request }).subscribe({
-            next: () => {
-                this._dialogRef.close(request);
-                this.buttonLoader = false;
-            },
-            error: () => {
-                this.buttonLoader = false;
-            }
-        });
+        return this.value;
     }
-    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()\" 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\"\r\n    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 src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\" 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\" />\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)\" [ngClass]=\"{'selectedImage': selectedImage.has(image.uniqueId)}\"/>\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\" 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>\r\n", 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: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.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.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i8.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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextEditorComponent, deps: [{ token: ElementServiceService }, { token: PLATFORM_ID }], 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 [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}\" [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> format_bold</mat-icon></button>\r\n    <button class=\"tool\" (click)=\"formatText('italic')\" [ngClass]=\"{'selectedTool': toolbarData.isItalic}\"><mat-icon> format_italic</mat-icon></button>\r\n    <button class=\"tool\" (click)=\"formatText('underline')\" [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(1rem, 3vw, 1.5rem)\">Medium</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')\" [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertOrderedList'}\"><mat-icon>format_list_numbered</mat-icon></button>\r\n    <button class=\"tool\" (click)=\"formatText('insertUnorderedList')\" [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertUnorderedList'}\"><mat-icon> format_list_bulleted</mat-icon></button>\r\n\r\n    <button class=\"tool\" (click)=\"formatText('justifyLeft')\" [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyLeft'}\"><mat-icon> format_align_left</mat-icon></button>\r\n    <button class=\"tool\" (click)=\"formatText('justifyCenter')\" [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyCenter'}\"><mat-icon> format_align_center</mat-icon></button>\r\n    <button class=\"tool\" (click)=\"formatText('justifyRight')\" [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyRight'}\"><mat-icon> format_align_right</mat-icon></button>\r\n\r\n    <div class=\"colorType\">\r\n      <button class=\"solid\" [ngClass]=\"{'solidColorSelected': selectedColorType === 'SOLID'}\" (click)=\"selectedColorType = 'SOLID'\">Solid</button>\r\n      <button class=\"gradient\" [ngClass]=\"{'gradientColorSelected': selectedColorType === 'GRADIENT'}\" (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)\" [(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()\" [(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()\" [(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'\" [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\" 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>\r\n", 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: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.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: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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: MediaSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextEditorComponent, 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()\" 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\"\r\n    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 src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\" 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\" />\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)\" [ngClass]=\"{'selectedImage': selectedImage.has(image.uniqueId)}\"/>\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\" 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>\r\n", 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: [{
+            args: [{ selector: 'simpo-text-editor', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        ContenteditableValueAccessor,
+                        MatIconModule
+                    ], template: "<div class=\"editor-container\" [ngClass]=\"{'border': editable}\" #parentElement [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}\" [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> format_bold</mat-icon></button>\r\n    <button class=\"tool\" (click)=\"formatText('italic')\" [ngClass]=\"{'selectedTool': toolbarData.isItalic}\"><mat-icon> format_italic</mat-icon></button>\r\n    <button class=\"tool\" (click)=\"formatText('underline')\" [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(1rem, 3vw, 1.5rem)\">Medium</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')\" [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertOrderedList'}\"><mat-icon>format_list_numbered</mat-icon></button>\r\n    <button class=\"tool\" (click)=\"formatText('insertUnorderedList')\" [ngClass]=\"{'selectedTool': toolbarData.selectedList === 'insertUnorderedList'}\"><mat-icon> format_list_bulleted</mat-icon></button>\r\n\r\n    <button class=\"tool\" (click)=\"formatText('justifyLeft')\" [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyLeft'}\"><mat-icon> format_align_left</mat-icon></button>\r\n    <button class=\"tool\" (click)=\"formatText('justifyCenter')\" [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyCenter'}\"><mat-icon> format_align_center</mat-icon></button>\r\n    <button class=\"tool\" (click)=\"formatText('justifyRight')\" [ngClass]=\"{'selectedTool': toolbarData.selectedAlignment === 'justifyRight'}\"><mat-icon> format_align_right</mat-icon></button>\r\n\r\n    <div class=\"colorType\">\r\n      <button class=\"solid\" [ngClass]=\"{'solidColorSelected': selectedColorType === 'SOLID'}\" (click)=\"selectedColorType = 'SOLID'\">Solid</button>\r\n      <button class=\"gradient\" [ngClass]=\"{'gradientColorSelected': selectedColorType === 'GRADIENT'}\" (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)\" [(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()\" [(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()\" [(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'\" [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\" 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>\r\n", 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: [MAT_DIALOG_DATA]
-                }] }, { type: i2$1.MatSnackBar }, { type: ElementServiceService }], propDecorators: { viewport: [{
+                    args: [PLATFORM_ID]
+                }] }], propDecorators: { toolbar: [{
                 type: ViewChild,
-                args: [CdkVirtualScrollViewport]
+                args: ['toolbar', { static: false }]
+            }], editor: [{
+                type: ViewChild,
+                args: ['editor', { static: false }]
+            }], colorPicker: [{
+                type: ViewChild,
+                args: ['colorPicker']
+            }], parentElement: [{
+                type: ViewChild,
+                args: ['parentElement']
+            }], suggestion: [{
+                type: ViewChild,
+                args: ['suggestion', { static: false }]
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], editable: [{
+                type: Input
+            }], sectionId: [{
+                type: Input
+            }], label: [{
+                type: Input
             }] } });
 
 class ImageEditorComponent {
@@ -1997,6 +2014,7 @@ class ImageEditorComponent {
         this.addLink = false;
         this.max = 100;
         this.min = 0;
+        this.tabs = ['Solid', 'Gradient'];
         this.imgLoader = false;
         this.linkType = [
             {
@@ -2059,7 +2077,6 @@ class ImageEditorComponent {
         });
     }
     changeIconColor() {
-        debugger;
         this.eventsService.iconChanged.emit({ id: this.sectionId + this.iconData.id, icon: this.iconData });
     }
     horizontalPosition() {
@@ -2163,11 +2180,11 @@ class ImageEditorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageEditorComponent, deps: [{ token: EventsService }, { token: ElementServiceService }, { token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageEditorComponent, isStandalone: true, selector: "simpo-image-editor", ngImport: i0, template: "<section class=\"main-section\">\r\n  <div class=\"header-section d-flex justify-content-between align-items-center\">\r\n    <div class=\"head-text\">Image Settings</div>\r\n    <mat-icon class=\"d-flex align-items-center justify-content-center f-18 cp\"\r\n      (click)=\"dialogRef.close()\">close</mat-icon>\r\n  </div>\r\n  <div>\r\n    <!-- <p class=\"heading mb-0\">Image</p> -->\r\n    <div class=\"upload-image cp\" *ngIf=\"!imageData.url && !iconData.url\" (click)=\"updateImage()\">\r\n      <img loading=\"lazy\"\r\n        src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\"\r\n        alt=\"\">\r\n      <p class=\"upload-text mb-0\">Upload a file</p>\r\n      <p class=\"upload-text mb-0\">or select an existing one</p>\r\n      <span class=\"upload-text\">up to 32MB</span>\r\n    </div>\r\n    <div class=\"sec d-flex align-items-center\" *ngIf=\"imageData.url || iconData.url\">\r\n      <ng-container *ngIf=\"!imgLoader\">\r\n        <img [src]=\"imageData.url || iconData.url\" [alt]=\"imageData.altText ?? ''\">\r\n        <div class=\"repalce-image cursor-pointer\" (click)=\"updateImage()\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" width=\"24\"\r\n            height=\"24\" class=\"icon w-4 h-4\" aria-hidden=\"true\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n              d=\"m4 16 4.58579-4.5858c.78104-.781 2.04741-.781 2.82841 0L16 16m-2-2 1.5858-1.5858c.781-.781 2.0474-.781 2.8284 0L20 14m-6-6h.01M6 20h12c1.1046 0 2-.8954 2-2V6c0-1.10457-.8954-2-2-2H6c-1.10457 0-2 .89543-2 2v12c0 1.1046.89543 2 2 2Z\">\r\n            </path>\r\n          </svg>\r\n        </div>\r\n\r\n        <div class=\"delete-image cursor-pointer \" (click)=\"deleteImage()\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"#ffffff\" viewBox=\"0 0 24 24\" width=\"24\"\r\n            height=\"24\" class=\"icon h-4 w-4\" aria-hidden=\"true\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n              d=\"m19 7-.8673 12.1425C18.0579 20.1891 17.187 21 16.1378 21H7.86224c-1.04928 0-1.92016-.8109-1.99492-1.8575L5 7m5 4v6m4-6v6m1-10V4c0-.55228-.4477-1-1-1h-4c-.55228 0-1 .44772-1 1v3M4 7h16\">\r\n            </path>\r\n          </svg>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"imgLoader\">\r\n        <div class=\"upload_spinner d-flex w-100 h-100 justify-content-center align-items-center\">\r\n          <mat-spinner></mat-spinner>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"!data.showIcon\">\r\n    <div class=\"w-100 p-0-10 mb-22\" *ngIf=\"imageData.hasOwnProperty('altText')\">\r\n      <p class=\"heading mb-2\">Alt text</p>\r\n      <input type=\"text\" placeholder=\"Enter alt text\" class=\"input-field w-100\" [(ngModel)]=\"imageData.altText\">\r\n      <div class=\"sub-text\">When the image fails to load, this text will be displayed.</div>\r\n    </div>\r\n\r\n    <div class=\"image mb-22\" *ngIf=\"imageData.hasOwnProperty('position')\">\r\n      <p class=\"heading mb-1\">Image Position</p>\r\n      <div class=\"horizontal-action\">\r\n        <label>Horizontal</label>\r\n        <div class=\"slider d-flex align-items-center justify-content-start cp\">\r\n          <input [min]=\"min\" [max]=\"max\" step=\"5\" type=\"range\" [(ngModel)]=\"imageData.position.x\"\r\n            (input)=\"horizontalPosition()\" class=\"w-75\">\r\n        </div>\r\n      </div>\r\n      <div class=\"horizontal-action\" style=\"margin-top: 5px;\">\r\n        <label>Vertical</label>\r\n        <div class=\"slider d-flex align-items-center justify-content-start cp\">\r\n          <input [min]=\"min\" [max]=\"max\" step=\"5\" type=\"range\" [(ngModel)]=\"imageData.position.y\"\r\n            (input)=\"horizontalPosition()\" class=\"w-75\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"groups cp px-3\">\r\n      <div *ngFor=\"let type of linkType\" [ngClass]=\"{'selectedType' : type.type === selectedType}\"\r\n        (click)=\"changeType(type.type)\">{{type.type}}</div>\r\n    </div>\r\n    <div class=\"field-container mt-3 mx-3\">\r\n      <div *ngIf=\"link.linkType === RedirectionLink.Page\">\r\n        <label class=\"input-label-1 mt-3 mb-2\">Select Page</label>\r\n        <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n          <select [(ngModel)]=\"link.pageId\" (change)=\"onPageChange($event)\">\r\n            <option value=\"\" selected>Select from your existing pages</option>\r\n            <option *ngFor=\"let page of templatePage\" [value]=\"page.id\" style=\"padding: 10px;\">\r\n              {{page.pageName}}</option>\r\n          </select>\r\n          <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n              src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n          </div>\r\n        </div>\r\n        <ng-container *ngIf=\"pageName == 'Product List'\">\r\n          <label class=\"input-label-1 mt-3 mb-2\">Select Collection</label>\r\n          <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n            <select [(ngModel)]=\"collectionPath\" (ngModelChange)=\"addCollectionToPath()\">\r\n              <option value=\"\" selected>Select from your existing pages</option>\r\n              <option *ngFor=\"let coll of collectionList\" style=\"padding: 10px;\" [value]=\"coll.collectionName\">\r\n                {{coll?.collectionName}}</option>\r\n            </select>\r\n          </div>\r\n          <label class=\"input-label-1 mt-3 mb-2\">Select Category</label>\r\n          <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n            <select [(ngModel)]=\"categoryPath\" (ngModelChange)=\"addCategoryToPath()\">\r\n              <option value=\"\" selected>Select from your existing pages</option>\r\n              <option *ngFor=\"let coll of categoryList\" style=\"padding: 10px;\" [value]=\"coll.categoryName\">\r\n                {{coll?.categoryName}}</option>\r\n            </select>\r\n          </div>\r\n        </ng-container>\r\n        <!-- <div class=\"sub-text\">Select from your existing pages</div> -->\r\n      </div>\r\n      <div *ngIf=\"link.linkType === RedirectionLink.section\">\r\n        <label class=\"mt-3 mb-2 input-label-1\">Section</label>\r\n        <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n          <select [(ngModel)]=\"link.pageId\">\r\n            <option value=\"\" selected>Select the Section</option>\r\n            <option *ngFor=\"let section of templatePage[0]?.components\" [value]=\"section.id\">{{section.sectionName}}\r\n            </option>\r\n          </select>\r\n          <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n              src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"d-flex justify-content-between mt-10\">\r\n        <label class=\"input-label-2\">Open in a new browser tab</label>\r\n        <div class=\"form-check form-switch ml-auto\">\r\n          <input class=\"form-check-input switch-btn cursor-pointer\" type=\"checkbox\" [(ngModel)]=\"link.newTab\"\r\n            role=\"switch\">\r\n        </div>\r\n      </div>\r\n\r\n      <div\r\n        *ngIf=\"link.linkType === RedirectionLink.External || link.linkType === RedirectionLink.Email || link.linkType === RedirectionLink.Phone\">\r\n        <label class=\"mt-3 mb-2 input-label-1\">Select type</label>\r\n        <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n          <select [(ngModel)]=\"link.linkType\">\r\n            <option value=\"\" selected>Select the Type</option>\r\n            <option *ngFor=\"let type of externalLinkType\" [value]=\"type.type\">{{type.type}}</option>\r\n          </select>\r\n          <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n              src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n          </div>\r\n        </div>\r\n        <label class=\"input-label mb-2\">{{link.linkType === RedirectionLink.External ? 'Website' : link.linkType ===\r\n          RedirectionLink.Email ? 'Email Address' : 'Phone Number'}}</label>\r\n        <input type=\"text\" class=\"input-text\" [(ngModel)]=\"link.redirectionUrl\"\r\n          [placeholder]=\"link.linkType === RedirectionLink.External ? 'example : https://facebook.com': ''\">\r\n      </div>\r\n\r\n\r\n    </div>\r\n  </ng-container>\r\n\r\n\r\n  <ng-container *ngIf=\"data.showIcon\">\r\n    <div class=\"icon-color px-3 mb-3 d-flex flex-column justify-content-center align-items-center\">\r\n      <label class=\"input-label-1 mb-4 w-100\">Icon Color</label>\r\n      <div [style.backgroundColor]=\"iconData.color\" class=\"custom-input\" (click)=\"colorInput.click()\"></div>\r\n      <input type=\"color\" [(ngModel)]=\"iconData.color\" (ngModelChange)=\"changeIconColor()\" class=\"input-text d-none\"\r\n        #colorInput />\r\n    </div>\r\n\r\n    <div class=\"background-on d-flex justify-content-between px-3 mb-2\">\r\n      <label class=\"input-label-1\">Show Background</label>\r\n      <div class=\"form-check form-switch ml-auto\">\r\n        <input class=\"form-check-input switch-btn cursor-pointer\" type=\"checkbox\" [(ngModel)]=\"iconData.showBackground\"\r\n          role=\"switch\">\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"icon-background px-3  d-flex flex-column justify-content-center align-items-center\"\r\n      *ngIf=\"iconData.showBackground\">\r\n      <label class=\"input-label-1 mb-3 w-100\">Icon Background</label>\r\n      <div [style.backgroundColor]=\"iconData.backgroundColor\" class=\"custom-input\" (click)=\"colorInput1.click()\"></div>\r\n      <input type=\"color\" [(ngModel)]=\"iconData.backgroundColor\" class=\"input-text d-none\" #colorInput1 />\r\n    </div>\r\n  </ng-container>\r\n\r\n\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}:host{--grey-color: rgba(250, 250, 250, 1)}.custom-input{height:35px;width:100%;border-radius:2rem;box-shadow:0 1px 3px #3c404326,0 1px 2px #3c404326}.heading{color:#000;font-size:17px;font-weight:600}.upload-text{background:var(--primary-bg-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:500}.upload-image{border:3px dashed rgba(44,44,44,.6);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;margin:10px 10px 22px;border-radius:20px;box-shadow:#0000000d 0 1px 2px}.upload-image img{margin-bottom:8px;height:40px}.mb-0{margin-bottom:0!important}.desc{color:#fafafa;font-size:15px}.input-field{font-size:14px;outline:none;border:unset;border-radius:5px;padding:10px;color:#090909e6;background:#fafafa}.horizontal-action{display:flex;justify-content:space-between;align-items:center}.horizontal-action label{width:25%;font-size:14px;font-weight:400!important}.main-section{display:flex;flex-direction:column}.image{display:flex;flex-direction:column;gap:5px;padding:0 10px}.slider{width:70%}.cp{cursor:pointer}.sec{padding:10px 10px 22px;position:relative}.sec img{width:100%;height:200px;border-radius:20px}.delete-image{background-color:#d92d20;width:30px;height:30px;border-radius:6px;display:flex;justify-content:center;align-items:center;position:absolute;top:20px;right:20px}.repalce-image{display:flex;align-items:center;background:#fff;padding:2px;border-radius:6px;position:absolute;bottom:30px;left:20px}.f-18{font-size:18px}.header-section{padding:10px;box-shadow:0 0 4px #00000040}.header-section .head-text{font-weight:600;font-size:15px;color:#000}.header-section mat-icon{color:#2d264b}.p-0-10{padding:0 10px}.sub-text{font-size:13px;font-weight:400;line-height:24px;color:#09090980}.w-75{width:75%}.groups{display:flex;justify-content:space-between;margin-top:25px}.groups div{font-size:15px;font-weight:600;color:#2c2c2c99;padding:6px 30px;cursor:pointer}.selectedType{position:relative;text-align:center;background:var(--primary-bg-color);background-clip:text;box-shadow:0 0 4px #00000040;border-radius:10px}.selectedType:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.field-container{background:var(--grey-color);border-radius:13px;padding:10px}.drop-down-container{padding:10px;border-radius:8px;background:#fff;cursor:pointer}.drop-down-container select{width:90%;appearance:none;position:relative;outline:unset;border:unset;border-right:3px solid rgba(230,230,230,1);background:#fff;font-size:14px;padding:0 10px;border-radius:unset}.drop-down-container .down-arrow{width:10%;padding:0 6px}.input-label-1{font-size:16px;font-weight:600}.input-text{height:37px;width:100%;border:1px solid var(--grey-color);border-radius:5px;outline:none;font-size:14px;padding:10px 20px;font-weight:400;color:#090909e6}.mb-22{margin-bottom:22px}input[type=range]{-webkit-appearance:none;width:100%;height:8px;border-radius:20px;overflow:hidden;background:#fafafa}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:8px;width:10px;background:var(--primary-bg-color);box-shadow:-50rem 0 5rem 20rem #250d5e,-40rem 0 5rem 30rem #0bf,-30rem 0 2rem 25rem #250d5e,-25.5rem 0 0 25rem #0bf;border-radius:50%;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.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: i5.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageEditorComponent, isStandalone: true, selector: "simpo-image-editor", ngImport: i0, template: "<section class=\"main-section\">\r\n  <div class=\"header-section d-flex justify-content-between align-items-center\">\r\n    <div class=\"head-text\">Image Settings</div>\r\n    <mat-icon class=\"d-flex align-items-center justify-content-center f-18 cp\"\r\n      (click)=\"dialogRef.close()\">close</mat-icon>\r\n  </div>\r\n  <div>\r\n    <!-- <p class=\"heading mb-0\">Image</p> -->\r\n    <div class=\"upload-image cp\" *ngIf=\"!imageData.url && !iconData.url\" (click)=\"updateImage()\">\r\n      <img loading=\"lazy\"\r\n        src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\"\r\n        alt=\"\">\r\n      <p class=\"upload-text mb-0\">Upload a file</p>\r\n      <p class=\"upload-text mb-0\">or select an existing one</p>\r\n      <span class=\"upload-text\">up to 32MB</span>\r\n    </div>\r\n    <div class=\"sec d-flex align-items-center\" *ngIf=\"imageData.url || iconData.url\">\r\n      <ng-container *ngIf=\"!imgLoader\">\r\n        <img [src]=\"imageData.url || iconData.url\" [alt]=\"imageData.altText ?? ''\">\r\n        <div class=\"repalce-image cursor-pointer\" (click)=\"updateImage()\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" width=\"24\"\r\n            height=\"24\" class=\"icon w-4 h-4\" aria-hidden=\"true\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n              d=\"m4 16 4.58579-4.5858c.78104-.781 2.04741-.781 2.82841 0L16 16m-2-2 1.5858-1.5858c.781-.781 2.0474-.781 2.8284 0L20 14m-6-6h.01M6 20h12c1.1046 0 2-.8954 2-2V6c0-1.10457-.8954-2-2-2H6c-1.10457 0-2 .89543-2 2v12c0 1.1046.89543 2 2 2Z\">\r\n            </path>\r\n          </svg>\r\n        </div>\r\n\r\n        <div class=\"delete-image cursor-pointer \" (click)=\"deleteImage()\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"#ffffff\" viewBox=\"0 0 24 24\" width=\"24\"\r\n            height=\"24\" class=\"icon h-4 w-4\" aria-hidden=\"true\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n              d=\"m19 7-.8673 12.1425C18.0579 20.1891 17.187 21 16.1378 21H7.86224c-1.04928 0-1.92016-.8109-1.99492-1.8575L5 7m5 4v6m4-6v6m1-10V4c0-.55228-.4477-1-1-1h-4c-.55228 0-1 .44772-1 1v3M4 7h16\">\r\n            </path>\r\n          </svg>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"imgLoader\">\r\n        <div class=\"upload_spinner d-flex w-100 h-100 justify-content-center align-items-center\">\r\n          <mat-spinner></mat-spinner>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"!data.showIcon\">\r\n    <div class=\"w-100 p-0-10 mb-22\" *ngIf=\"imageData.hasOwnProperty('altText')\">\r\n      <p class=\"heading mb-2\">Alt text</p>\r\n      <input type=\"text\" placeholder=\"Enter alt text\" class=\"input-field w-100\" [(ngModel)]=\"imageData.altText\">\r\n      <div class=\"sub-text\">When the image fails to load, this text will be displayed.</div>\r\n    </div>\r\n\r\n    <div class=\"image mb-22\" *ngIf=\"imageData.hasOwnProperty('position')\">\r\n      <p class=\"heading mb-1\">Image Position</p>\r\n      <div class=\"horizontal-action\">\r\n        <label>Horizontal</label>\r\n        <div class=\"slider d-flex align-items-center justify-content-start cp\">\r\n          <input [min]=\"min\" [max]=\"max\" step=\"5\" type=\"range\" [(ngModel)]=\"imageData.position.x\"\r\n            (input)=\"horizontalPosition()\" class=\"w-75\">\r\n        </div>\r\n      </div>\r\n      <div class=\"horizontal-action\" style=\"margin-top: 5px;\">\r\n        <label>Vertical</label>\r\n        <div class=\"slider d-flex align-items-center justify-content-start cp\">\r\n          <input [min]=\"min\" [max]=\"max\" step=\"5\" type=\"range\" [(ngModel)]=\"imageData.position.y\"\r\n            (input)=\"horizontalPosition()\" class=\"w-75\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"groups cp px-3\">\r\n      <div *ngFor=\"let type of linkType\" [ngClass]=\"{'selectedType' : type.type === selectedType}\"\r\n        (click)=\"changeType(type.type)\">{{type.type}}</div>\r\n    </div>\r\n    <div class=\"field-container mt-3 mx-3\">\r\n      <div *ngIf=\"link.linkType === RedirectionLink.Page\">\r\n        <label class=\"input-label-1 mt-3 mb-2\">Select Page</label>\r\n        <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n          <select [(ngModel)]=\"link.pageId\" (change)=\"onPageChange($event)\">\r\n            <option value=\"\" selected>Select from your existing pages</option>\r\n            <option *ngFor=\"let page of templatePage\" [value]=\"page.id\" style=\"padding: 10px;\">\r\n              {{page.pageName}}</option>\r\n          </select>\r\n          <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n              src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n          </div>\r\n        </div>\r\n        <ng-container *ngIf=\"pageName == 'Product List'\">\r\n          <label class=\"input-label-1 mt-3 mb-2\">Select Collection</label>\r\n          <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n            <select [(ngModel)]=\"collectionPath\" (ngModelChange)=\"addCollectionToPath()\">\r\n              <option value=\"\" selected>Select from your existing pages</option>\r\n              <option *ngFor=\"let coll of collectionList\" style=\"padding: 10px;\" [value]=\"coll.collectionName\">\r\n                {{coll?.collectionName}}</option>\r\n            </select>\r\n          </div>\r\n          <label class=\"input-label-1 mt-3 mb-2\">Select Category</label>\r\n          <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n            <select [(ngModel)]=\"categoryPath\" (ngModelChange)=\"addCategoryToPath()\">\r\n              <option value=\"\" selected>Select from your existing pages</option>\r\n              <option *ngFor=\"let coll of categoryList\" style=\"padding: 10px;\" [value]=\"coll.categoryName\">\r\n                {{coll?.categoryName}}</option>\r\n            </select>\r\n          </div>\r\n        </ng-container>\r\n        <!-- <div class=\"sub-text\">Select from your existing pages</div> -->\r\n      </div>\r\n      <div *ngIf=\"link.linkType === RedirectionLink.section\">\r\n        <label class=\"mt-3 mb-2 input-label-1\">Section</label>\r\n        <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n          <select [(ngModel)]=\"link.pageId\">\r\n            <option value=\"\" selected>Select the Section</option>\r\n            <option *ngFor=\"let section of templatePage[0]?.components\" [value]=\"section.id\">{{section.sectionName}}\r\n            </option>\r\n          </select>\r\n          <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n              src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"d-flex justify-content-between mt-10\">\r\n        <label class=\"input-label-2\">Open in a new browser tab</label>\r\n        <div class=\"form-check form-switch ml-auto\">\r\n          <input class=\"form-check-input switch-btn cursor-pointer\" type=\"checkbox\" [(ngModel)]=\"link.newTab\"\r\n            role=\"switch\">\r\n        </div>\r\n      </div>\r\n\r\n      <div\r\n        *ngIf=\"link.linkType === RedirectionLink.External || link.linkType === RedirectionLink.Email || link.linkType === RedirectionLink.Phone\">\r\n        <label class=\"mt-3 mb-2 input-label-1\">Select type</label>\r\n        <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n          <select [(ngModel)]=\"link.linkType\">\r\n            <option value=\"\" selected>Select the Type</option>\r\n            <option *ngFor=\"let type of externalLinkType\" [value]=\"type.type\">{{type.type}}</option>\r\n          </select>\r\n          <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n              src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n          </div>\r\n        </div>\r\n        <label class=\"input-label mb-2\">{{link.linkType === RedirectionLink.External ? 'Website' : link.linkType ===\r\n          RedirectionLink.Email ? 'Email Address' : 'Phone Number'}}</label>\r\n        <input type=\"text\" class=\"input-text\" [(ngModel)]=\"link.redirectionUrl\"\r\n          [placeholder]=\"link.linkType === RedirectionLink.External ? 'example : https://facebook.com': ''\">\r\n      </div>\r\n\r\n\r\n    </div>\r\n  </ng-container>\r\n\r\n\r\n  <ng-container *ngIf=\"data.showIcon\">\r\n    <div class=\"icon-color px-3 mb-3 d-flex flex-column justify-content-center align-items-center\">\r\n      <label class=\"input-label-1 mb-4 w-100\">Icon Color</label>\r\n      <div [style.backgroundColor]=\"iconData.color\" class=\"custom-input\" (click)=\"colorInput.click()\"></div>\r\n      <input type=\"color\" [(ngModel)]=\"iconData.color\" (ngModelChange)=\"changeIconColor()\" class=\"input-text d-none\"\r\n        #colorInput />\r\n    </div>\r\n\r\n    <div class=\"background-on d-flex justify-content-between px-3 mb-2\">\r\n      <label class=\"input-label-1\">Show Background</label>\r\n      <div class=\"form-check form-switch ml-auto\">\r\n        <input class=\"form-check-input switch-btn cursor-pointer\" type=\"checkbox\" [(ngModel)]=\"iconData.showBackground\"\r\n          role=\"switch\">\r\n      </div>\r\n    </div>\r\n\r\n\r\n    <div class=\"tabs d-flex px-3 gap-3 mb-2\" *ngIf=\"iconData.showBackground\">\r\n      <div class=\"tab px-3 py-2\" *ngFor=\"let tab of tabs\" (click)=\"iconData.backgroundType = tab\" [class.selectedTab]=\"iconData.backgroundType == tab\">\r\n        {{tab}}\r\n      </div>\r\n    </div>\r\n    \r\n\r\n    <div class=\"icon-background px-3  d-flex flex-column justify-content-center align-items-center\"\r\n      *ngIf=\"iconData.showBackground\">\r\n      <label class=\"input-label-1 mb-3 w-100\">Icon Background</label>\r\n      <div [style.backgroundColor]=\"iconData?.backgroundColor\" class=\"custom-input mb-2\" (click)=\"colorInput1.click()\"></div>\r\n      <input type=\"color\" [(ngModel)]=\"iconData.backgroundColor\" class=\"input-text d-none\" #colorInput1 />\r\n    </div>\r\n\r\n    <div class=\"icon-background px-3  d-flex flex-column justify-content-center align-items-center\"\r\n      *ngIf=\"iconData.showBackground && iconData.backgroundType === 'Gradient'\">\r\n      <label class=\"input-label-1 mb-3 w-100\">Icon Secondary Background</label>\r\n      <div [style.backgroundColor]=\"iconData?.secondaryColor\" class=\"custom-input\" (click)=\"colorInput2.click()\"></div>\r\n      <input type=\"color\" [(ngModel)]=\"iconData.secondaryColor\" class=\"input-text d-none\" #colorInput2 />\r\n    </div>\r\n  </ng-container>\r\n\r\n\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}:host{--grey-color: rgba(250, 250, 250, 1)}.custom-input{height:35px;width:100%;border-radius:2rem;box-shadow:0 1px 3px #3c404326,0 1px 2px #3c404326}.tab{border:1px solid rgba(44,44,44,.6);border-radius:12px}.selectedTab{background:#39393934;font-weight:700}.heading{color:#000;font-size:17px;font-weight:600}.upload-text{background:var(--primary-bg-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:500}.upload-image{border:3px dashed rgba(44,44,44,.6);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;margin:10px 10px 22px;border-radius:20px;box-shadow:#0000000d 0 1px 2px}.upload-image img{margin-bottom:8px;height:40px}.mb-0{margin-bottom:0!important}.desc{color:#fafafa;font-size:15px}.input-field{font-size:14px;outline:none;border:unset;border-radius:5px;padding:10px;color:#090909e6;background:#fafafa}.horizontal-action{display:flex;justify-content:space-between;align-items:center}.horizontal-action label{width:25%;font-size:14px;font-weight:400!important}.main-section{display:flex;flex-direction:column}.image{display:flex;flex-direction:column;gap:5px;padding:0 10px}.slider{width:70%}.cp{cursor:pointer}.sec{padding:10px 10px 22px;position:relative}.sec img{width:100%;height:200px;border-radius:20px}.delete-image{background-color:#d92d20;width:30px;height:30px;border-radius:6px;display:flex;justify-content:center;align-items:center;position:absolute;top:20px;right:20px}.repalce-image{display:flex;align-items:center;background:#fff;padding:2px;border-radius:6px;position:absolute;bottom:30px;left:20px}.f-18{font-size:18px}.header-section{padding:10px;box-shadow:0 0 4px #00000040}.header-section .head-text{font-weight:600;font-size:15px;color:#000}.header-section mat-icon{color:#2d264b}.p-0-10{padding:0 10px}.sub-text{font-size:13px;font-weight:400;line-height:24px;color:#09090980}.w-75{width:75%}.groups{display:flex;justify-content:space-between;margin-top:25px}.groups div{font-size:15px;font-weight:600;color:#2c2c2c99;padding:6px 30px;cursor:pointer}.selectedType{position:relative;text-align:center;background:var(--primary-bg-color);background-clip:text;box-shadow:0 0 4px #00000040;border-radius:10px}.selectedType:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.field-container{background:var(--grey-color);border-radius:13px;padding:10px}.drop-down-container{padding:10px;border-radius:8px;background:#fff;cursor:pointer}.drop-down-container select{width:90%;appearance:none;position:relative;outline:unset;border:unset;border-right:3px solid rgba(230,230,230,1);background:#fff;font-size:14px;padding:0 10px;border-radius:unset}.drop-down-container .down-arrow{width:10%;padding:0 6px}.input-label-1{font-size:16px;font-weight:600}.input-text{height:37px;width:100%;border:1px solid var(--grey-color);border-radius:5px;outline:none;font-size:14px;padding:10px 20px;font-weight:400;color:#090909e6}.mb-22{margin-bottom:22px}input[type=range]{-webkit-appearance:none;width:100%;height:8px;border-radius:20px;overflow:hidden;background:#fafafa}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:8px;width:10px;background:var(--primary-bg-color);box-shadow:-50rem 0 5rem 20rem #250d5e,-40rem 0 5rem 30rem #0bf,-30rem 0 2rem 25rem #250d5e,-25.5rem 0 0 25rem #0bf;border-radius:50%;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.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: i5.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-image-editor', standalone: true, imports: [CommonModule, FormsModule, MatIconModule, MatSliderModule, MatProgressSpinner], template: "<section class=\"main-section\">\r\n  <div class=\"header-section d-flex justify-content-between align-items-center\">\r\n    <div class=\"head-text\">Image Settings</div>\r\n    <mat-icon class=\"d-flex align-items-center justify-content-center f-18 cp\"\r\n      (click)=\"dialogRef.close()\">close</mat-icon>\r\n  </div>\r\n  <div>\r\n    <!-- <p class=\"heading mb-0\">Image</p> -->\r\n    <div class=\"upload-image cp\" *ngIf=\"!imageData.url && !iconData.url\" (click)=\"updateImage()\">\r\n      <img loading=\"lazy\"\r\n        src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\"\r\n        alt=\"\">\r\n      <p class=\"upload-text mb-0\">Upload a file</p>\r\n      <p class=\"upload-text mb-0\">or select an existing one</p>\r\n      <span class=\"upload-text\">up to 32MB</span>\r\n    </div>\r\n    <div class=\"sec d-flex align-items-center\" *ngIf=\"imageData.url || iconData.url\">\r\n      <ng-container *ngIf=\"!imgLoader\">\r\n        <img [src]=\"imageData.url || iconData.url\" [alt]=\"imageData.altText ?? ''\">\r\n        <div class=\"repalce-image cursor-pointer\" (click)=\"updateImage()\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" width=\"24\"\r\n            height=\"24\" class=\"icon w-4 h-4\" aria-hidden=\"true\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n              d=\"m4 16 4.58579-4.5858c.78104-.781 2.04741-.781 2.82841 0L16 16m-2-2 1.5858-1.5858c.781-.781 2.0474-.781 2.8284 0L20 14m-6-6h.01M6 20h12c1.1046 0 2-.8954 2-2V6c0-1.10457-.8954-2-2-2H6c-1.10457 0-2 .89543-2 2v12c0 1.1046.89543 2 2 2Z\">\r\n            </path>\r\n          </svg>\r\n        </div>\r\n\r\n        <div class=\"delete-image cursor-pointer \" (click)=\"deleteImage()\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"#ffffff\" viewBox=\"0 0 24 24\" width=\"24\"\r\n            height=\"24\" class=\"icon h-4 w-4\" aria-hidden=\"true\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n              d=\"m19 7-.8673 12.1425C18.0579 20.1891 17.187 21 16.1378 21H7.86224c-1.04928 0-1.92016-.8109-1.99492-1.8575L5 7m5 4v6m4-6v6m1-10V4c0-.55228-.4477-1-1-1h-4c-.55228 0-1 .44772-1 1v3M4 7h16\">\r\n            </path>\r\n          </svg>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"imgLoader\">\r\n        <div class=\"upload_spinner d-flex w-100 h-100 justify-content-center align-items-center\">\r\n          <mat-spinner></mat-spinner>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"!data.showIcon\">\r\n    <div class=\"w-100 p-0-10 mb-22\" *ngIf=\"imageData.hasOwnProperty('altText')\">\r\n      <p class=\"heading mb-2\">Alt text</p>\r\n      <input type=\"text\" placeholder=\"Enter alt text\" class=\"input-field w-100\" [(ngModel)]=\"imageData.altText\">\r\n      <div class=\"sub-text\">When the image fails to load, this text will be displayed.</div>\r\n    </div>\r\n\r\n    <div class=\"image mb-22\" *ngIf=\"imageData.hasOwnProperty('position')\">\r\n      <p class=\"heading mb-1\">Image Position</p>\r\n      <div class=\"horizontal-action\">\r\n        <label>Horizontal</label>\r\n        <div class=\"slider d-flex align-items-center justify-content-start cp\">\r\n          <input [min]=\"min\" [max]=\"max\" step=\"5\" type=\"range\" [(ngModel)]=\"imageData.position.x\"\r\n            (input)=\"horizontalPosition()\" class=\"w-75\">\r\n        </div>\r\n      </div>\r\n      <div class=\"horizontal-action\" style=\"margin-top: 5px;\">\r\n        <label>Vertical</label>\r\n        <div class=\"slider d-flex align-items-center justify-content-start cp\">\r\n          <input [min]=\"min\" [max]=\"max\" step=\"5\" type=\"range\" [(ngModel)]=\"imageData.position.y\"\r\n            (input)=\"horizontalPosition()\" class=\"w-75\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"groups cp px-3\">\r\n      <div *ngFor=\"let type of linkType\" [ngClass]=\"{'selectedType' : type.type === selectedType}\"\r\n        (click)=\"changeType(type.type)\">{{type.type}}</div>\r\n    </div>\r\n    <div class=\"field-container mt-3 mx-3\">\r\n      <div *ngIf=\"link.linkType === RedirectionLink.Page\">\r\n        <label class=\"input-label-1 mt-3 mb-2\">Select Page</label>\r\n        <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n          <select [(ngModel)]=\"link.pageId\" (change)=\"onPageChange($event)\">\r\n            <option value=\"\" selected>Select from your existing pages</option>\r\n            <option *ngFor=\"let page of templatePage\" [value]=\"page.id\" style=\"padding: 10px;\">\r\n              {{page.pageName}}</option>\r\n          </select>\r\n          <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n              src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n          </div>\r\n        </div>\r\n        <ng-container *ngIf=\"pageName == 'Product List'\">\r\n          <label class=\"input-label-1 mt-3 mb-2\">Select Collection</label>\r\n          <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n            <select [(ngModel)]=\"collectionPath\" (ngModelChange)=\"addCollectionToPath()\">\r\n              <option value=\"\" selected>Select from your existing pages</option>\r\n              <option *ngFor=\"let coll of collectionList\" style=\"padding: 10px;\" [value]=\"coll.collectionName\">\r\n                {{coll?.collectionName}}</option>\r\n            </select>\r\n          </div>\r\n          <label class=\"input-label-1 mt-3 mb-2\">Select Category</label>\r\n          <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n            <select [(ngModel)]=\"categoryPath\" (ngModelChange)=\"addCategoryToPath()\">\r\n              <option value=\"\" selected>Select from your existing pages</option>\r\n              <option *ngFor=\"let coll of categoryList\" style=\"padding: 10px;\" [value]=\"coll.categoryName\">\r\n                {{coll?.categoryName}}</option>\r\n            </select>\r\n          </div>\r\n        </ng-container>\r\n        <!-- <div class=\"sub-text\">Select from your existing pages</div> -->\r\n      </div>\r\n      <div *ngIf=\"link.linkType === RedirectionLink.section\">\r\n        <label class=\"mt-3 mb-2 input-label-1\">Section</label>\r\n        <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n          <select [(ngModel)]=\"link.pageId\">\r\n            <option value=\"\" selected>Select the Section</option>\r\n            <option *ngFor=\"let section of templatePage[0]?.components\" [value]=\"section.id\">{{section.sectionName}}\r\n            </option>\r\n          </select>\r\n          <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n              src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"d-flex justify-content-between mt-10\">\r\n        <label class=\"input-label-2\">Open in a new browser tab</label>\r\n        <div class=\"form-check form-switch ml-auto\">\r\n          <input class=\"form-check-input switch-btn cursor-pointer\" type=\"checkbox\" [(ngModel)]=\"link.newTab\"\r\n            role=\"switch\">\r\n        </div>\r\n      </div>\r\n\r\n      <div\r\n        *ngIf=\"link.linkType === RedirectionLink.External || link.linkType === RedirectionLink.Email || link.linkType === RedirectionLink.Phone\">\r\n        <label class=\"mt-3 mb-2 input-label-1\">Select type</label>\r\n        <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n          <select [(ngModel)]=\"link.linkType\">\r\n            <option value=\"\" selected>Select the Type</option>\r\n            <option *ngFor=\"let type of externalLinkType\" [value]=\"type.type\">{{type.type}}</option>\r\n          </select>\r\n          <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n              src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n          </div>\r\n        </div>\r\n        <label class=\"input-label mb-2\">{{link.linkType === RedirectionLink.External ? 'Website' : link.linkType ===\r\n          RedirectionLink.Email ? 'Email Address' : 'Phone Number'}}</label>\r\n        <input type=\"text\" class=\"input-text\" [(ngModel)]=\"link.redirectionUrl\"\r\n          [placeholder]=\"link.linkType === RedirectionLink.External ? 'example : https://facebook.com': ''\">\r\n      </div>\r\n\r\n\r\n    </div>\r\n  </ng-container>\r\n\r\n\r\n  <ng-container *ngIf=\"data.showIcon\">\r\n    <div class=\"icon-color px-3 mb-3 d-flex flex-column justify-content-center align-items-center\">\r\n      <label class=\"input-label-1 mb-4 w-100\">Icon Color</label>\r\n      <div [style.backgroundColor]=\"iconData.color\" class=\"custom-input\" (click)=\"colorInput.click()\"></div>\r\n      <input type=\"color\" [(ngModel)]=\"iconData.color\" (ngModelChange)=\"changeIconColor()\" class=\"input-text d-none\"\r\n        #colorInput />\r\n    </div>\r\n\r\n    <div class=\"background-on d-flex justify-content-between px-3 mb-2\">\r\n      <label class=\"input-label-1\">Show Background</label>\r\n      <div class=\"form-check form-switch ml-auto\">\r\n        <input class=\"form-check-input switch-btn cursor-pointer\" type=\"checkbox\" [(ngModel)]=\"iconData.showBackground\"\r\n          role=\"switch\">\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"icon-background px-3  d-flex flex-column justify-content-center align-items-center\"\r\n      *ngIf=\"iconData.showBackground\">\r\n      <label class=\"input-label-1 mb-3 w-100\">Icon Background</label>\r\n      <div [style.backgroundColor]=\"iconData.backgroundColor\" class=\"custom-input\" (click)=\"colorInput1.click()\"></div>\r\n      <input type=\"color\" [(ngModel)]=\"iconData.backgroundColor\" class=\"input-text d-none\" #colorInput1 />\r\n    </div>\r\n  </ng-container>\r\n\r\n\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}:host{--grey-color: rgba(250, 250, 250, 1)}.custom-input{height:35px;width:100%;border-radius:2rem;box-shadow:0 1px 3px #3c404326,0 1px 2px #3c404326}.heading{color:#000;font-size:17px;font-weight:600}.upload-text{background:var(--primary-bg-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:500}.upload-image{border:3px dashed rgba(44,44,44,.6);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;margin:10px 10px 22px;border-radius:20px;box-shadow:#0000000d 0 1px 2px}.upload-image img{margin-bottom:8px;height:40px}.mb-0{margin-bottom:0!important}.desc{color:#fafafa;font-size:15px}.input-field{font-size:14px;outline:none;border:unset;border-radius:5px;padding:10px;color:#090909e6;background:#fafafa}.horizontal-action{display:flex;justify-content:space-between;align-items:center}.horizontal-action label{width:25%;font-size:14px;font-weight:400!important}.main-section{display:flex;flex-direction:column}.image{display:flex;flex-direction:column;gap:5px;padding:0 10px}.slider{width:70%}.cp{cursor:pointer}.sec{padding:10px 10px 22px;position:relative}.sec img{width:100%;height:200px;border-radius:20px}.delete-image{background-color:#d92d20;width:30px;height:30px;border-radius:6px;display:flex;justify-content:center;align-items:center;position:absolute;top:20px;right:20px}.repalce-image{display:flex;align-items:center;background:#fff;padding:2px;border-radius:6px;position:absolute;bottom:30px;left:20px}.f-18{font-size:18px}.header-section{padding:10px;box-shadow:0 0 4px #00000040}.header-section .head-text{font-weight:600;font-size:15px;color:#000}.header-section mat-icon{color:#2d264b}.p-0-10{padding:0 10px}.sub-text{font-size:13px;font-weight:400;line-height:24px;color:#09090980}.w-75{width:75%}.groups{display:flex;justify-content:space-between;margin-top:25px}.groups div{font-size:15px;font-weight:600;color:#2c2c2c99;padding:6px 30px;cursor:pointer}.selectedType{position:relative;text-align:center;background:var(--primary-bg-color);background-clip:text;box-shadow:0 0 4px #00000040;border-radius:10px}.selectedType:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.field-container{background:var(--grey-color);border-radius:13px;padding:10px}.drop-down-container{padding:10px;border-radius:8px;background:#fff;cursor:pointer}.drop-down-container select{width:90%;appearance:none;position:relative;outline:unset;border:unset;border-right:3px solid rgba(230,230,230,1);background:#fff;font-size:14px;padding:0 10px;border-radius:unset}.drop-down-container .down-arrow{width:10%;padding:0 6px}.input-label-1{font-size:16px;font-weight:600}.input-text{height:37px;width:100%;border:1px solid var(--grey-color);border-radius:5px;outline:none;font-size:14px;padding:10px 20px;font-weight:400;color:#090909e6}.mb-22{margin-bottom:22px}input[type=range]{-webkit-appearance:none;width:100%;height:8px;border-radius:20px;overflow:hidden;background:#fafafa}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:8px;width:10px;background:var(--primary-bg-color);box-shadow:-50rem 0 5rem 20rem #250d5e,-40rem 0 5rem 30rem #0bf,-30rem 0 2rem 25rem #250d5e,-25.5rem 0 0 25rem #0bf;border-radius:50%;cursor:pointer}\n"] }]
+            args: [{ selector: 'simpo-image-editor', standalone: true, imports: [CommonModule, FormsModule, MatIconModule, MatSliderModule, MatProgressSpinner], template: "<section class=\"main-section\">\r\n  <div class=\"header-section d-flex justify-content-between align-items-center\">\r\n    <div class=\"head-text\">Image Settings</div>\r\n    <mat-icon class=\"d-flex align-items-center justify-content-center f-18 cp\"\r\n      (click)=\"dialogRef.close()\">close</mat-icon>\r\n  </div>\r\n  <div>\r\n    <!-- <p class=\"heading mb-0\">Image</p> -->\r\n    <div class=\"upload-image cp\" *ngIf=\"!imageData.url && !iconData.url\" (click)=\"updateImage()\">\r\n      <img loading=\"lazy\"\r\n        src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/547500c1744698830343upload-one%20%281%29.png\"\r\n        alt=\"\">\r\n      <p class=\"upload-text mb-0\">Upload a file</p>\r\n      <p class=\"upload-text mb-0\">or select an existing one</p>\r\n      <span class=\"upload-text\">up to 32MB</span>\r\n    </div>\r\n    <div class=\"sec d-flex align-items-center\" *ngIf=\"imageData.url || iconData.url\">\r\n      <ng-container *ngIf=\"!imgLoader\">\r\n        <img [src]=\"imageData.url || iconData.url\" [alt]=\"imageData.altText ?? ''\">\r\n        <div class=\"repalce-image cursor-pointer\" (click)=\"updateImage()\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" width=\"24\"\r\n            height=\"24\" class=\"icon w-4 h-4\" aria-hidden=\"true\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n              d=\"m4 16 4.58579-4.5858c.78104-.781 2.04741-.781 2.82841 0L16 16m-2-2 1.5858-1.5858c.781-.781 2.0474-.781 2.8284 0L20 14m-6-6h.01M6 20h12c1.1046 0 2-.8954 2-2V6c0-1.10457-.8954-2-2-2H6c-1.10457 0-2 .89543-2 2v12c0 1.1046.89543 2 2 2Z\">\r\n            </path>\r\n          </svg>\r\n        </div>\r\n\r\n        <div class=\"delete-image cursor-pointer \" (click)=\"deleteImage()\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"#ffffff\" viewBox=\"0 0 24 24\" width=\"24\"\r\n            height=\"24\" class=\"icon h-4 w-4\" aria-hidden=\"true\">\r\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n              d=\"m19 7-.8673 12.1425C18.0579 20.1891 17.187 21 16.1378 21H7.86224c-1.04928 0-1.92016-.8109-1.99492-1.8575L5 7m5 4v6m4-6v6m1-10V4c0-.55228-.4477-1-1-1h-4c-.55228 0-1 .44772-1 1v3M4 7h16\">\r\n            </path>\r\n          </svg>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"imgLoader\">\r\n        <div class=\"upload_spinner d-flex w-100 h-100 justify-content-center align-items-center\">\r\n          <mat-spinner></mat-spinner>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"!data.showIcon\">\r\n    <div class=\"w-100 p-0-10 mb-22\" *ngIf=\"imageData.hasOwnProperty('altText')\">\r\n      <p class=\"heading mb-2\">Alt text</p>\r\n      <input type=\"text\" placeholder=\"Enter alt text\" class=\"input-field w-100\" [(ngModel)]=\"imageData.altText\">\r\n      <div class=\"sub-text\">When the image fails to load, this text will be displayed.</div>\r\n    </div>\r\n\r\n    <div class=\"image mb-22\" *ngIf=\"imageData.hasOwnProperty('position')\">\r\n      <p class=\"heading mb-1\">Image Position</p>\r\n      <div class=\"horizontal-action\">\r\n        <label>Horizontal</label>\r\n        <div class=\"slider d-flex align-items-center justify-content-start cp\">\r\n          <input [min]=\"min\" [max]=\"max\" step=\"5\" type=\"range\" [(ngModel)]=\"imageData.position.x\"\r\n            (input)=\"horizontalPosition()\" class=\"w-75\">\r\n        </div>\r\n      </div>\r\n      <div class=\"horizontal-action\" style=\"margin-top: 5px;\">\r\n        <label>Vertical</label>\r\n        <div class=\"slider d-flex align-items-center justify-content-start cp\">\r\n          <input [min]=\"min\" [max]=\"max\" step=\"5\" type=\"range\" [(ngModel)]=\"imageData.position.y\"\r\n            (input)=\"horizontalPosition()\" class=\"w-75\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"groups cp px-3\">\r\n      <div *ngFor=\"let type of linkType\" [ngClass]=\"{'selectedType' : type.type === selectedType}\"\r\n        (click)=\"changeType(type.type)\">{{type.type}}</div>\r\n    </div>\r\n    <div class=\"field-container mt-3 mx-3\">\r\n      <div *ngIf=\"link.linkType === RedirectionLink.Page\">\r\n        <label class=\"input-label-1 mt-3 mb-2\">Select Page</label>\r\n        <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n          <select [(ngModel)]=\"link.pageId\" (change)=\"onPageChange($event)\">\r\n            <option value=\"\" selected>Select from your existing pages</option>\r\n            <option *ngFor=\"let page of templatePage\" [value]=\"page.id\" style=\"padding: 10px;\">\r\n              {{page.pageName}}</option>\r\n          </select>\r\n          <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n              src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n          </div>\r\n        </div>\r\n        <ng-container *ngIf=\"pageName == 'Product List'\">\r\n          <label class=\"input-label-1 mt-3 mb-2\">Select Collection</label>\r\n          <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n            <select [(ngModel)]=\"collectionPath\" (ngModelChange)=\"addCollectionToPath()\">\r\n              <option value=\"\" selected>Select from your existing pages</option>\r\n              <option *ngFor=\"let coll of collectionList\" style=\"padding: 10px;\" [value]=\"coll.collectionName\">\r\n                {{coll?.collectionName}}</option>\r\n            </select>\r\n          </div>\r\n          <label class=\"input-label-1 mt-3 mb-2\">Select Category</label>\r\n          <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n            <select [(ngModel)]=\"categoryPath\" (ngModelChange)=\"addCategoryToPath()\">\r\n              <option value=\"\" selected>Select from your existing pages</option>\r\n              <option *ngFor=\"let coll of categoryList\" style=\"padding: 10px;\" [value]=\"coll.categoryName\">\r\n                {{coll?.categoryName}}</option>\r\n            </select>\r\n          </div>\r\n        </ng-container>\r\n        <!-- <div class=\"sub-text\">Select from your existing pages</div> -->\r\n      </div>\r\n      <div *ngIf=\"link.linkType === RedirectionLink.section\">\r\n        <label class=\"mt-3 mb-2 input-label-1\">Section</label>\r\n        <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n          <select [(ngModel)]=\"link.pageId\">\r\n            <option value=\"\" selected>Select the Section</option>\r\n            <option *ngFor=\"let section of templatePage[0]?.components\" [value]=\"section.id\">{{section.sectionName}}\r\n            </option>\r\n          </select>\r\n          <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n              src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"d-flex justify-content-between mt-10\">\r\n        <label class=\"input-label-2\">Open in a new browser tab</label>\r\n        <div class=\"form-check form-switch ml-auto\">\r\n          <input class=\"form-check-input switch-btn cursor-pointer\" type=\"checkbox\" [(ngModel)]=\"link.newTab\"\r\n            role=\"switch\">\r\n        </div>\r\n      </div>\r\n\r\n      <div\r\n        *ngIf=\"link.linkType === RedirectionLink.External || link.linkType === RedirectionLink.Email || link.linkType === RedirectionLink.Phone\">\r\n        <label class=\"mt-3 mb-2 input-label-1\">Select type</label>\r\n        <div class=\"drop-down-container w-100 d-flex mb-2\">\r\n          <select [(ngModel)]=\"link.linkType\">\r\n            <option value=\"\" selected>Select the Type</option>\r\n            <option *ngFor=\"let type of externalLinkType\" [value]=\"type.type\">{{type.type}}</option>\r\n          </select>\r\n          <div class=\"down-arrow d-flex align-items-center justify-content-center\"><img\r\n              src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/268410c1742286052940Down%202.png\" alt=\"\">\r\n          </div>\r\n        </div>\r\n        <label class=\"input-label mb-2\">{{link.linkType === RedirectionLink.External ? 'Website' : link.linkType ===\r\n          RedirectionLink.Email ? 'Email Address' : 'Phone Number'}}</label>\r\n        <input type=\"text\" class=\"input-text\" [(ngModel)]=\"link.redirectionUrl\"\r\n          [placeholder]=\"link.linkType === RedirectionLink.External ? 'example : https://facebook.com': ''\">\r\n      </div>\r\n\r\n\r\n    </div>\r\n  </ng-container>\r\n\r\n\r\n  <ng-container *ngIf=\"data.showIcon\">\r\n    <div class=\"icon-color px-3 mb-3 d-flex flex-column justify-content-center align-items-center\">\r\n      <label class=\"input-label-1 mb-4 w-100\">Icon Color</label>\r\n      <div [style.backgroundColor]=\"iconData.color\" class=\"custom-input\" (click)=\"colorInput.click()\"></div>\r\n      <input type=\"color\" [(ngModel)]=\"iconData.color\" (ngModelChange)=\"changeIconColor()\" class=\"input-text d-none\"\r\n        #colorInput />\r\n    </div>\r\n\r\n    <div class=\"background-on d-flex justify-content-between px-3 mb-2\">\r\n      <label class=\"input-label-1\">Show Background</label>\r\n      <div class=\"form-check form-switch ml-auto\">\r\n        <input class=\"form-check-input switch-btn cursor-pointer\" type=\"checkbox\" [(ngModel)]=\"iconData.showBackground\"\r\n          role=\"switch\">\r\n      </div>\r\n    </div>\r\n\r\n\r\n    <div class=\"tabs d-flex px-3 gap-3 mb-2\" *ngIf=\"iconData.showBackground\">\r\n      <div class=\"tab px-3 py-2\" *ngFor=\"let tab of tabs\" (click)=\"iconData.backgroundType = tab\" [class.selectedTab]=\"iconData.backgroundType == tab\">\r\n        {{tab}}\r\n      </div>\r\n    </div>\r\n    \r\n\r\n    <div class=\"icon-background px-3  d-flex flex-column justify-content-center align-items-center\"\r\n      *ngIf=\"iconData.showBackground\">\r\n      <label class=\"input-label-1 mb-3 w-100\">Icon Background</label>\r\n      <div [style.backgroundColor]=\"iconData?.backgroundColor\" class=\"custom-input mb-2\" (click)=\"colorInput1.click()\"></div>\r\n      <input type=\"color\" [(ngModel)]=\"iconData.backgroundColor\" class=\"input-text d-none\" #colorInput1 />\r\n    </div>\r\n\r\n    <div class=\"icon-background px-3  d-flex flex-column justify-content-center align-items-center\"\r\n      *ngIf=\"iconData.showBackground && iconData.backgroundType === 'Gradient'\">\r\n      <label class=\"input-label-1 mb-3 w-100\">Icon Secondary Background</label>\r\n      <div [style.backgroundColor]=\"iconData?.secondaryColor\" class=\"custom-input\" (click)=\"colorInput2.click()\"></div>\r\n      <input type=\"color\" [(ngModel)]=\"iconData.secondaryColor\" class=\"input-text d-none\" #colorInput2 />\r\n    </div>\r\n  </ng-container>\r\n\r\n\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}:host{--grey-color: rgba(250, 250, 250, 1)}.custom-input{height:35px;width:100%;border-radius:2rem;box-shadow:0 1px 3px #3c404326,0 1px 2px #3c404326}.tab{border:1px solid rgba(44,44,44,.6);border-radius:12px}.selectedTab{background:#39393934;font-weight:700}.heading{color:#000;font-size:17px;font-weight:600}.upload-text{background:var(--primary-bg-color);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:500}.upload-image{border:3px dashed rgba(44,44,44,.6);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;margin:10px 10px 22px;border-radius:20px;box-shadow:#0000000d 0 1px 2px}.upload-image img{margin-bottom:8px;height:40px}.mb-0{margin-bottom:0!important}.desc{color:#fafafa;font-size:15px}.input-field{font-size:14px;outline:none;border:unset;border-radius:5px;padding:10px;color:#090909e6;background:#fafafa}.horizontal-action{display:flex;justify-content:space-between;align-items:center}.horizontal-action label{width:25%;font-size:14px;font-weight:400!important}.main-section{display:flex;flex-direction:column}.image{display:flex;flex-direction:column;gap:5px;padding:0 10px}.slider{width:70%}.cp{cursor:pointer}.sec{padding:10px 10px 22px;position:relative}.sec img{width:100%;height:200px;border-radius:20px}.delete-image{background-color:#d92d20;width:30px;height:30px;border-radius:6px;display:flex;justify-content:center;align-items:center;position:absolute;top:20px;right:20px}.repalce-image{display:flex;align-items:center;background:#fff;padding:2px;border-radius:6px;position:absolute;bottom:30px;left:20px}.f-18{font-size:18px}.header-section{padding:10px;box-shadow:0 0 4px #00000040}.header-section .head-text{font-weight:600;font-size:15px;color:#000}.header-section mat-icon{color:#2d264b}.p-0-10{padding:0 10px}.sub-text{font-size:13px;font-weight:400;line-height:24px;color:#09090980}.w-75{width:75%}.groups{display:flex;justify-content:space-between;margin-top:25px}.groups div{font-size:15px;font-weight:600;color:#2c2c2c99;padding:6px 30px;cursor:pointer}.selectedType{position:relative;text-align:center;background:var(--primary-bg-color);background-clip:text;box-shadow:0 0 4px #00000040;border-radius:10px}.selectedType:before{content:\"\";position:absolute;inset:0;padding:1px;border-radius:10px;background:var(--primary-bg-color);mask:linear-gradient(white 0 0) content-box,linear-gradient(white 0 0);mask-composite:xor;mask-composite:exclude}.field-container{background:var(--grey-color);border-radius:13px;padding:10px}.drop-down-container{padding:10px;border-radius:8px;background:#fff;cursor:pointer}.drop-down-container select{width:90%;appearance:none;position:relative;outline:unset;border:unset;border-right:3px solid rgba(230,230,230,1);background:#fff;font-size:14px;padding:0 10px;border-radius:unset}.drop-down-container .down-arrow{width:10%;padding:0 6px}.input-label-1{font-size:16px;font-weight:600}.input-text{height:37px;width:100%;border:1px solid var(--grey-color);border-radius:5px;outline:none;font-size:14px;padding:10px 20px;font-weight:400;color:#090909e6}.mb-22{margin-bottom:22px}input[type=range]{-webkit-appearance:none;width:100%;height:8px;border-radius:20px;overflow:hidden;background:#fafafa}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:8px;width:10px;background:var(--primary-bg-color);box-shadow:-50rem 0 5rem 20rem #250d5e,-40rem 0 5rem 30rem #0bf,-30rem 0 2rem 25rem #250d5e,-25.5rem 0 0 25rem #0bf;border-radius:50%;cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }, { type: ElementServiceService }, { type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -2476,7 +2493,7 @@ class SetDynamicBackgroundDirective {
             this.el.nativeElement.style.setProperty('border', `2px solid ${this.backgroundColor}`);
         }
         else {
-            this.el.nativeElement.style.backgroundColor = 'transparent';
+            // this.el.nativeElement.style.backgroundColor = 'transparent';
             // this.el.nativeElement.style.setProperty('padding', '0');
             // this.el.nativeElement.style.setProperty('border-radius', '0');
             this.el.nativeElement.style.setProperty('border', 'none');
@@ -2601,8 +2618,30 @@ class BelowImageCardComponent {
                 return 'justify-items-start';
         }
     }
+    getBackground() {
+        if (this.content.display.showCard) {
+            if (this.data?.background?.showBackground) {
+                if (this.data?.background?.backgroundType === 'Gradient') {
+                    const direction = GradientDirection[this.data?.background?.backgroundGradientDirection || GradientDirection.DOWN];
+                    return `linear-gradient(${direction}, ${this.data?.background?.color}, ${this.data?.background?.secondaryColor})`;
+                }
+                else {
+                    return this.data?.background?.color;
+                }
+            }
+        }
+    }
+    get getIconBackground() {
+        if (this.data?.icon?.backgroundType === 'Gradient') {
+            const direction = GradientDirection[this.data?.icon?.backgroundGradientDirection || GradientDirection.DOWN];
+            return `linear-gradient(${direction}, ${this.data?.icon?.backgroundColor}, ${this.data?.icon?.secondaryColor})`;
+        }
+        else {
+            return this.data?.icon?.secondaryColor;
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BelowImageCardComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BelowImageCardComponent, isStandalone: true, selector: "simpo-below-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button", edit: "edit" }, usesOnChanges: true, ngImport: i0, template: "<div (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\r\n  [ngClass]=\"{'box-shadow' : content.display.showCard, 'px-0 py-0': styles?.borderLessImage && !content?.display?.showIcon ,'py-14' : content?.display?.showCardBackground && !styles?.borderLessImage}\"\r\n  [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" class=\"h-100 mt-4\"\r\n  [backgroundColor]=\"styles?.background?.color\" [simpoSetDynamicBackground]=\"content?.display?.showCardBackground\"\r\n  [class]=\"getAlignment()\">\r\n   <!-- class=\"mt-4\" -->\r\n  <!-- <div class=\"popular-tag\" [simpoCorner]=\"styles?.corners\"\r\n    [ngStyle]=\"{'background-color': styles?.background?.accentColor}\"\r\n    *ngIf=\"data?.highlight?.highlighted === true\">\r\n    <simpo-text-editor [(value)]=\"data.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\r\n  </div> -->\r\n  <!-- <div [simpoImageContainerDirective]=\"getAspectRatio\" class=\"w-100\"> -->\r\n  <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\r\n    [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\"\r\n    [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" [class]=\"componentId+data.image.id\"\r\n    *ngIf=\"content.display.showImage\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"data.image\"\r\n    [sectionId]=\"data?.id\">\r\n\r\n\r\n  <ng-container *ngIf=\"content.display.showIcon && (data.icon.url.includes('.png') || data.icon.url.includes('.svg'))\">\r\n    <div [simpoCorner]=\"styles?.corners\" [class.hovering-effect]=\"content?.display?.showHoverEffect\" [id]=\"componentId\"\r\n      class=\"logo-img d-flex justify-content-center align-items-center\"\r\n      [style.background]=\"data?.icon?.showBackground ? data?.icon?.backgroundColor : 'transparent'\"\r\n      [appImageEditor]=\"edit || false\" [iconData]=\"data.icon\" [sectionId]=\"componentId\"\r\n      [showIcon]=\"content.display.showIcon\">\r\n      <div [id]=\"componentId\" [iconId]=\"componentId + data?.icon?.id\" [simpoIconDirective]=\"data?.icon\" class=\"w-75 h-100\"\r\n        [class.w-100]=\"!data?.icon?.showBackground\"></div>\r\n    </div>\r\n  </ng-container>\r\n  <img loading=\"lazy\" class=\"logo-img\" [src]=\"data.icon.url\" [appImageEditor]=\"edit || false\" [iconData]=\"data.icon\"\r\n    [sectionId]=\"componentId\" [showIcon]=\"content.display.showIcon\"\r\n    *ngIf=\"content.display.showIcon && !data.icon.url.includes('.png') && !data.icon.url.includes('.svg')\"\r\n    class=\"logo-img\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n    [class.hovering-effect]=\"content?.display?.showHoverEffect\">\r\n  <div class=\"ptb-1 content-side\" [class.p-14-28]=\"(content?.display?.showCard || content?.display?.showHoverEffect) && styles?.borderLessImage && !content?.display?.showIcon\">\r\n    <div class=\"heading-medium mb-1\" *ngIf=\"content.display.showHeading\">\r\n      <simpo-text-editor [(value)]=\"data.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n    </div>\r\n    <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\r\n      <simpo-text-editor [(value)]=\"data.inputText[01].value \" [editable]=\"edit || false\"></simpo-text-editor>\r\n    </div>\r\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\"\r\n      [simpoHoverAnimation]=\"getContentAnimation()\" class=\"mt-3\">\r\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\"\r\n        [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\" [color]=\"styles?.background?.accentColor\"\r\n        [backgroundInfo]=\"styles?.background\" [edit]=\"edit\"></app-button-element>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".w-100{width:100%}.ptb-1{padding-top:1rem}.mb-1{margin-bottom:1rem!important}.box-shadow{background:#fff!important;box-shadow:0 10px 40px #0a32231a;padding:14px 28px;color:#000!important}.p-14-28{padding:14px}.py-14{padding-top:14px;padding-bottom:14px}.logo-img{width:70px;height:70px;margin-top:.25rem}.fw-600{font-weight:600}.hovering-effect:hover{transform:scale(1.1) rotate(5deg)}.justify-items-start{justify-items:flex-start}.justify-items-end{justify-items:flex-end}.justify-items-center{justify-items:center}\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: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: HoverAnimationDirective, selector: "[simpoHoverAnimation]", inputs: ["simpoHoverAnimation"] }, { kind: "directive", type: TranslateOnhoverDirective, selector: "[simpoTranslateOnhover]", inputs: ["simpoTranslateOnhover"] }, { kind: "directive", type: SetDynamicBackgroundDirective, selector: "[simpoSetDynamicBackground]", inputs: ["backgroundColor", "simpoSetDynamicBackground"] }, { kind: "directive", type: IconDirectiveDirective, selector: "[simpoIconDirective]", inputs: ["simpoIconDirective", "iconId"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BelowImageCardComponent, isStandalone: true, selector: "simpo-below-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button", edit: "edit" }, usesOnChanges: true, ngImport: i0, template: "<div (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\r\n  [ngClass]=\"{'box-shadow' : content.display.showCard, 'px-0 py-0': styles?.borderLessImage && !content?.display?.showIcon ,'py-14' : content?.display?.showCardBackground && !styles?.borderLessImage}\"\r\n  [style.background]=\"getBackground()\"\r\n  [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" class=\"h-100 mt-4\"\r\n  [backgroundColor]=\"styles?.background?.color\" [simpoSetDynamicBackground]=\"content?.display?.showCardBackground\"\r\n  [class]=\"getAlignment()\">\r\n   <!-- class=\"mt-4\" -->\r\n  <!-- <div class=\"popular-tag\" [simpoCorner]=\"styles?.corners\"\r\n    [ngStyle]=\"{'background-color': styles?.background?.accentColor}\"\r\n    *ngIf=\"data?.highlight?.highlighted === true\">\r\n    <simpo-text-editor [(value)]=\"data.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\r\n  </div> -->\r\n  <!-- <div [simpoImageContainerDirective]=\"getAspectRatio\" class=\"w-100\"> -->\r\n  <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\r\n    [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\"\r\n    [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" [class]=\"componentId+data.image.id\"\r\n    *ngIf=\"content.display.showImage\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"data.image\"\r\n    [sectionId]=\"data?.id\">\r\n\r\n\r\n  <ng-container *ngIf=\"content.display.showIcon && (data.icon.url.includes('.png') || data.icon.url.includes('.svg'))\">\r\n    <div [simpoCorner]=\"styles?.corners\" [class.hovering-effect]=\"content?.display?.showHoverEffect\" [id]=\"componentId\"\r\n      class=\"logo-img d-flex justify-content-center align-items-center\"\r\n      [style.background]=\"data?.icon?.showBackground ? getIconBackground : 'transparent'\"\r\n      [appImageEditor]=\"edit || false\" [iconData]=\"data.icon\" [sectionId]=\"componentId\"\r\n      [showIcon]=\"content.display.showIcon\">\r\n      <div [id]=\"componentId\" [iconId]=\"componentId + data?.icon?.id\" [simpoIconDirective]=\"data?.icon\" class=\"w-75 h-100\"\r\n        [class.w-100]=\"!data?.icon?.showBackground\"></div>\r\n    </div>\r\n  </ng-container>\r\n  <img loading=\"lazy\" class=\"logo-img\" [src]=\"data.icon.url\" [appImageEditor]=\"edit || false\" [iconData]=\"data.icon\"\r\n    [sectionId]=\"componentId\" [showIcon]=\"content.display.showIcon\"\r\n    *ngIf=\"content.display.showIcon && !data.icon.url.includes('.png') && !data.icon.url.includes('.svg')\"\r\n    class=\"logo-img\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n    [class.hovering-effect]=\"content?.display?.showHoverEffect\">\r\n  <div class=\"ptb-1 content-side\" [class.p-14-28]=\"(content?.display?.showCard || content?.display?.showHoverEffect) && styles?.borderLessImage && !content?.display?.showIcon\">\r\n    <div class=\"heading-medium mb-1\" *ngIf=\"content.display.showHeading\">\r\n      <simpo-text-editor [(value)]=\"data.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n    </div>\r\n    <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\r\n      <simpo-text-editor [(value)]=\"data.inputText[01].value \" [editable]=\"edit || false\"></simpo-text-editor>\r\n    </div>\r\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\"\r\n      [simpoHoverAnimation]=\"getContentAnimation()\" class=\"mt-3\">\r\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\"\r\n        [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\" [color]=\"styles?.background?.accentColor\"\r\n        [backgroundInfo]=\"styles?.background\" [edit]=\"edit\"></app-button-element>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".w-100{width:100%}.ptb-1{padding-top:1rem}.mb-1{margin-bottom:1rem!important}.box-shadow{box-shadow:0 10px 40px #0a32231a;padding:14px 28px;color:#000!important}.p-14-28{padding:14px}.py-14{padding-top:14px;padding-bottom:14px}.logo-img{width:70px;height:70px;margin-top:.25rem}.fw-600{font-weight:600}.hovering-effect:hover{transform:scale(1.1) rotate(5deg)}.justify-items-start{justify-items:flex-start}.justify-items-end{justify-items:flex-end}.justify-items-center{justify-items:center}\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: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: HoverAnimationDirective, selector: "[simpoHoverAnimation]", inputs: ["simpoHoverAnimation"] }, { kind: "directive", type: TranslateOnhoverDirective, selector: "[simpoTranslateOnhover]", inputs: ["simpoTranslateOnhover"] }, { kind: "directive", type: SetDynamicBackgroundDirective, selector: "[simpoSetDynamicBackground]", inputs: ["backgroundColor", "simpoSetDynamicBackground"] }, { kind: "directive", type: IconDirectiveDirective, selector: "[simpoIconDirective]", inputs: ["simpoIconDirective", "iconId"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BelowImageCardComponent, decorators: [{
             type: Component,
@@ -2617,7 +2656,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         TranslateOnhoverDirective,
                         SetDynamicBackgroundDirective,
                         IconDirectiveDirective
-                    ], template: "<div (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\r\n  [ngClass]=\"{'box-shadow' : content.display.showCard, 'px-0 py-0': styles?.borderLessImage && !content?.display?.showIcon ,'py-14' : content?.display?.showCardBackground && !styles?.borderLessImage}\"\r\n  [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" class=\"h-100 mt-4\"\r\n  [backgroundColor]=\"styles?.background?.color\" [simpoSetDynamicBackground]=\"content?.display?.showCardBackground\"\r\n  [class]=\"getAlignment()\">\r\n   <!-- class=\"mt-4\" -->\r\n  <!-- <div class=\"popular-tag\" [simpoCorner]=\"styles?.corners\"\r\n    [ngStyle]=\"{'background-color': styles?.background?.accentColor}\"\r\n    *ngIf=\"data?.highlight?.highlighted === true\">\r\n    <simpo-text-editor [(value)]=\"data.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\r\n  </div> -->\r\n  <!-- <div [simpoImageContainerDirective]=\"getAspectRatio\" class=\"w-100\"> -->\r\n  <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\r\n    [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\"\r\n    [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" [class]=\"componentId+data.image.id\"\r\n    *ngIf=\"content.display.showImage\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"data.image\"\r\n    [sectionId]=\"data?.id\">\r\n\r\n\r\n  <ng-container *ngIf=\"content.display.showIcon && (data.icon.url.includes('.png') || data.icon.url.includes('.svg'))\">\r\n    <div [simpoCorner]=\"styles?.corners\" [class.hovering-effect]=\"content?.display?.showHoverEffect\" [id]=\"componentId\"\r\n      class=\"logo-img d-flex justify-content-center align-items-center\"\r\n      [style.background]=\"data?.icon?.showBackground ? data?.icon?.backgroundColor : 'transparent'\"\r\n      [appImageEditor]=\"edit || false\" [iconData]=\"data.icon\" [sectionId]=\"componentId\"\r\n      [showIcon]=\"content.display.showIcon\">\r\n      <div [id]=\"componentId\" [iconId]=\"componentId + data?.icon?.id\" [simpoIconDirective]=\"data?.icon\" class=\"w-75 h-100\"\r\n        [class.w-100]=\"!data?.icon?.showBackground\"></div>\r\n    </div>\r\n  </ng-container>\r\n  <img loading=\"lazy\" class=\"logo-img\" [src]=\"data.icon.url\" [appImageEditor]=\"edit || false\" [iconData]=\"data.icon\"\r\n    [sectionId]=\"componentId\" [showIcon]=\"content.display.showIcon\"\r\n    *ngIf=\"content.display.showIcon && !data.icon.url.includes('.png') && !data.icon.url.includes('.svg')\"\r\n    class=\"logo-img\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n    [class.hovering-effect]=\"content?.display?.showHoverEffect\">\r\n  <div class=\"ptb-1 content-side\" [class.p-14-28]=\"(content?.display?.showCard || content?.display?.showHoverEffect) && styles?.borderLessImage && !content?.display?.showIcon\">\r\n    <div class=\"heading-medium mb-1\" *ngIf=\"content.display.showHeading\">\r\n      <simpo-text-editor [(value)]=\"data.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n    </div>\r\n    <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\r\n      <simpo-text-editor [(value)]=\"data.inputText[01].value \" [editable]=\"edit || false\"></simpo-text-editor>\r\n    </div>\r\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\"\r\n      [simpoHoverAnimation]=\"getContentAnimation()\" class=\"mt-3\">\r\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\"\r\n        [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\" [color]=\"styles?.background?.accentColor\"\r\n        [backgroundInfo]=\"styles?.background\" [edit]=\"edit\"></app-button-element>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".w-100{width:100%}.ptb-1{padding-top:1rem}.mb-1{margin-bottom:1rem!important}.box-shadow{background:#fff!important;box-shadow:0 10px 40px #0a32231a;padding:14px 28px;color:#000!important}.p-14-28{padding:14px}.py-14{padding-top:14px;padding-bottom:14px}.logo-img{width:70px;height:70px;margin-top:.25rem}.fw-600{font-weight:600}.hovering-effect:hover{transform:scale(1.1) rotate(5deg)}.justify-items-start{justify-items:flex-start}.justify-items-end{justify-items:flex-end}.justify-items-center{justify-items:center}\n"] }]
+                    ], template: "<div (click)=\"(content?.display?.showLink && content?.display?.linkType === 'List Item' ? redirectTo() : '')\"\r\n  [ngClass]=\"{'box-shadow' : content.display.showCard, 'px-0 py-0': styles?.borderLessImage && !content?.display?.showIcon ,'py-14' : content?.display?.showCardBackground && !styles?.borderLessImage}\"\r\n  [style.background]=\"getBackground()\"\r\n  [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\" [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" class=\"h-100 mt-4\"\r\n  [backgroundColor]=\"styles?.background?.color\" [simpoSetDynamicBackground]=\"content?.display?.showCardBackground\"\r\n  [class]=\"getAlignment()\">\r\n   <!-- class=\"mt-4\" -->\r\n  <!-- <div class=\"popular-tag\" [simpoCorner]=\"styles?.corners\"\r\n    [ngStyle]=\"{'background-color': styles?.background?.accentColor}\"\r\n    *ngIf=\"data?.highlight?.highlighted === true\">\r\n    <simpo-text-editor [(value)]=\"data.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\r\n  </div> -->\r\n  <!-- <div [simpoImageContainerDirective]=\"getAspectRatio\" class=\"w-100\"> -->\r\n  <img loading=\"lazy\" [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\r\n    [attr.simpoObjectPosition]=\"styles?.image?.fit !== 'contain' ? data.image?.position : null\"\r\n    [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" [class]=\"componentId+data.image.id\"\r\n    *ngIf=\"content.display.showImage\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"data.image\"\r\n    [sectionId]=\"data?.id\">\r\n\r\n\r\n  <ng-container *ngIf=\"content.display.showIcon && (data.icon.url.includes('.png') || data.icon.url.includes('.svg'))\">\r\n    <div [simpoCorner]=\"styles?.corners\" [class.hovering-effect]=\"content?.display?.showHoverEffect\" [id]=\"componentId\"\r\n      class=\"logo-img d-flex justify-content-center align-items-center\"\r\n      [style.background]=\"data?.icon?.showBackground ? getIconBackground : 'transparent'\"\r\n      [appImageEditor]=\"edit || false\" [iconData]=\"data.icon\" [sectionId]=\"componentId\"\r\n      [showIcon]=\"content.display.showIcon\">\r\n      <div [id]=\"componentId\" [iconId]=\"componentId + data?.icon?.id\" [simpoIconDirective]=\"data?.icon\" class=\"w-75 h-100\"\r\n        [class.w-100]=\"!data?.icon?.showBackground\"></div>\r\n    </div>\r\n  </ng-container>\r\n  <img loading=\"lazy\" class=\"logo-img\" [src]=\"data.icon.url\" [appImageEditor]=\"edit || false\" [iconData]=\"data.icon\"\r\n    [sectionId]=\"componentId\" [showIcon]=\"content.display.showIcon\"\r\n    *ngIf=\"content.display.showIcon && !data.icon.url.includes('.png') && !data.icon.url.includes('.svg')\"\r\n    class=\"logo-img\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n    [class.hovering-effect]=\"content?.display?.showHoverEffect\">\r\n  <div class=\"ptb-1 content-side\" [class.p-14-28]=\"(content?.display?.showCard || content?.display?.showHoverEffect) && styles?.borderLessImage && !content?.display?.showIcon\">\r\n    <div class=\"heading-medium mb-1\" *ngIf=\"content.display.showHeading\">\r\n      <simpo-text-editor [(value)]=\"data.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n    </div>\r\n    <div class=\"body-desc\" *ngIf=\"content.display.showContent\">\r\n      <simpo-text-editor [(value)]=\"data.inputText[01].value \" [editable]=\"edit || false\"></simpo-text-editor>\r\n    </div>\r\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\"\r\n      [simpoHoverAnimation]=\"getContentAnimation()\" class=\"mt-3\">\r\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\"\r\n        [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\" [color]=\"styles?.background?.accentColor\"\r\n        [backgroundInfo]=\"styles?.background\" [edit]=\"edit\"></app-button-element>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".w-100{width:100%}.ptb-1{padding-top:1rem}.mb-1{margin-bottom:1rem!important}.box-shadow{box-shadow:0 10px 40px #0a32231a;padding:14px 28px;color:#000!important}.p-14-28{padding:14px}.py-14{padding-top:14px;padding-bottom:14px}.logo-img{width:70px;height:70px;margin-top:.25rem}.fw-600{font-weight:600}.hovering-effect:hover{transform:scale(1.1) rotate(5deg)}.justify-items-start{justify-items:flex-start}.justify-items-end{justify-items:flex-end}.justify-items-center{justify-items:center}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], styles: [{
@@ -3996,7 +4035,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class SimpoElementsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SimpoElementsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SimpoElementsModule, imports: [ButtonElementComponent, TextElementComponent, BelowImageCardComponent, TopOfImageCardComponent, CoveringImageCardComponent, HeadingElementComponent, SimpoButtonComponent, SociaIconsComponent, CardSkeletonLoaderComponent, SvgDividerComponent, PropertyComponent, PortfolioComponent], exports: [ButtonElementComponent, TextElementComponent, BelowImageCardComponent, TopOfImageCardComponent, CoveringImageCardComponent, HeadingElementComponent, SimpoButtonComponent, SociaIconsComponent, CardSkeletonLoaderComponent, SvgDividerComponent, PropertyComponent, PortfolioComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SimpoElementsModule, imports: [ButtonElementComponent, TextElementComponent, BelowImageCardComponent, TopOfImageCardComponent, CoveringImageCardComponent, SociaIconsComponent, CardSkeletonLoaderComponent, SvgDividerComponent, PropertyComponent, PortfolioComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SimpoElementsModule, imports: [ButtonElementComponent, TextElementComponent, BelowImageCardComponent, TopOfImageCardComponent, CoveringImageCardComponent, SimpoButtonComponent, SociaIconsComponent, CardSkeletonLoaderComponent, SvgDividerComponent, PropertyComponent, PortfolioComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SimpoElementsModule, decorators: [{
             type: NgModule,
@@ -5050,7 +5089,7 @@ class BannerSectionComponent extends BaseSection {
             return `linear-gradient(${direction} ,${this.styles?.background?.accentColor},${this.styles?.background?.secondaryAccentColor})`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BannerSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BannerSectionComponent, isStandalone: true, selector: "simpo-banner-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\"\r\n  [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage , 'd-block': isBorderlessImage}\"\r\n  class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  [attr.style]=\"customClass\" [simpoMergeHeader]=\"styles?.merge\">\r\n  <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\"\r\n    class=\"d-flex justify-content-center\" [backgroundInfo]=\"styles?.background\">\r\n    <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row w-100\"\r\n      [simpoCorner]=\"styles?.corners\"  [ngClass]=\"{'wrap-reverse' : styles?.positionLayout?.value == 'bottom'}\">\r\n       <!-- overflow-hidden -->\r\n      <!-- [ngClass]=\"{'flex-column': isBorderlessImage && styles?.positionLayout?.value === 'top' , 'flex-column-reverse': isBorderlessImage && styles?.positionLayout?.value === 'bottom'}\" -->\r\n      <!-- [simpoMergeHeader]=\"styles?.merge\" -->\r\n      <!-- [backgroundInfo]=\"styles?.background?.image\" -->\r\n      <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n      <div class=\"py-5\"\r\n        [ngClass]=\"{'col-lg-6 col-xxl-6': content?.image?.showImage && isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage || !content?.image?.showImage , 'col-lg-12 col-md-12 col-12 width-100': isBorderlessImage && (styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom')}\"\r\n        [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\">\r\n        <div class=\"row g-5 justify-content-start mlr-0 h-auto\" [id]=\"data?.id\"\r\n          [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\" [simpoAnimation]=\"styles?.animation\"\r\n          [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n          [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n          <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.  image?.showImage && !isBorderlessImage\"\r\n            [simpoContainerAlignment]=\"stylesLayout\">\r\n            <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n              [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n              [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n              [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n              [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n          </div>\r\n          <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n            [ngClass]=\"{'col-lg-12':  content?.image?.showImage && isBorderlessImage, 'col-lg-6':!isBorderlessImage || !content?.image?.showImage,'box p-3': content?.display?.showCard}\"\r\n            [style.background]=\"content?.display?.showCard ?  getColor() : 'transparent'\"\r\n            [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\"\r\n            [simpoCorner]=\"styles?.corners\">\r\n            <div *ngFor=\"let item of content?.inputText\">\r\n              <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex gap-3 card-container flex-wrap\"\r\n              [ngClass]=\"{'gap-3': screenWidth > 475 , 'gap-1' : screenWidth <= 475}\">\r\n              <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n                <div class=\"card_wrapper\">\r\n                  <div class=\"container_card visible\">\r\n                    <div class=\"card-section\">\r\n                      <div class=\"second-part-card\">\r\n                      </div>\r\n                      <div class=\"first-part-card d-flex align-items-center\"\r\n                        [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                        <img loading=\"lazy\" class=\"tick-img\"\r\n                          src=\"https://png.pngtree.com/png-vector/20230910/ourmid/pngtree-3d-tick-sign-icon-png-image_9225323.png\"\r\n                          alt=\"something\" />\r\n                        <!-- <div [innerHTML]=\"item.inputText[0].value | sanitizeHtml\" class=\"ml-5\"></div> -->\r\n                        <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                          [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n              [simpoContainerAlignment]=\"stylesLayout\">\r\n              <div *ngFor=\"let button of data?.action?.buttons\">\r\n                <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                  [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n                  [edit]=\"edit\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n      [isMerged]=\"styles?.merge ?? false\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>\r\n<ng-template #ImageSection>\r\n  <div class=\"col-10 col-sm-8 col-lg-6\"\r\n    [ngClass]=\"{'w-100' : content?.image?.showImage && isBorderlessImage && styles?.positionLayout?.value == 'top' || styles?.positionLayout?.value == 'bottom'}\"\r\n    style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n    [simpoBorderless]=\"getPositionLayout\" [simpoAnimation]=\"styles?.animation\">\r\n    <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n      [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n      [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\r\n      [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n  </div>\r\n</ng-template>", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.width-100{width:100%!important}.button-display{display:flex;flex-wrap:wrap;gap:10px}.gap-15{gap:15px}.box{border:8px solid rgba(240,240,240,.8);box-shadow:#63636333 0 2px 8px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.wrap-reverse{flex-wrap:wrap-reverse!important}.insideImg{height:100%!important}.card-container{flex-direction:column}}.text-element{inline-size:100%;overflow-wrap:break-word}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.image-card{width:50%!important}.svg{fill:#ffb6c1;transform:rotate(180deg)}.ml-5{margin-left:5px}.mlr-0{margin-left:0;margin-right:0}.d-block{display:block!important}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BannerSectionComponent, isStandalone: true, selector: "simpo-banner-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\"\r\n  [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage , 'd-block': isBorderlessImage}\"\r\n  class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  [attr.style]=\"customClass\" [simpoMergeHeader]=\"styles?.merge\">\r\n  <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\"\r\n    class=\"d-flex justify-content-center\" [backgroundInfo]=\"styles?.background\">\r\n    <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row w-100\"\r\n      [simpoCorner]=\"styles?.corners\"  [ngClass]=\"{'wrap-reverse' : styles?.positionLayout?.value == 'bottom'}\">\r\n       <!-- overflow-hidden -->\r\n      <!-- [ngClass]=\"{'flex-column': isBorderlessImage && styles?.positionLayout?.value === 'top' , 'flex-column-reverse': isBorderlessImage && styles?.positionLayout?.value === 'bottom'}\" -->\r\n      <!-- [simpoMergeHeader]=\"styles?.merge\" -->\r\n      <!-- [backgroundInfo]=\"styles?.background?.image\" -->\r\n      <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n      <div class=\"py-5\"\r\n        [ngClass]=\"{'col-lg-6 col-xxl-6': content?.image?.showImage && isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage || !content?.image?.showImage , 'col-lg-12 col-md-12 col-12 width-100': (isBorderlessImage && (styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom')) || !content?.image?.showImage}\"\r\n        [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\">\r\n        <div class=\"row g-5 justify-content-start mlr-0 h-auto\" [id]=\"data?.id\"\r\n          [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\" [simpoAnimation]=\"styles?.animation\"\r\n          [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n          [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n          <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.  image?.showImage && !isBorderlessImage\"\r\n            [simpoContainerAlignment]=\"stylesLayout\">\r\n            <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n              [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n              [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n              [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n              [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n          </div>\r\n                      <!-- 'col-lg-12':  content?.image?.showImage && isBorderlessImage, 'col-lg-12':!isBorderlessImage || !content?.image?.showImage, -->\r\n          <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n            [ngClass]=\"{'box p-3': content?.display?.showCard , 'col-lg-6' : content?.image?.showImage && !isBorderlessImage }\"\r\n            [style.background]=\"content?.display?.showCard ?  getColor() : 'transparent'\"\r\n            [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\"\r\n            [simpoCorner]=\"styles?.corners\">\r\n            <div *ngFor=\"let item of content?.inputText\">\r\n              <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex gap-3 card-container flex-wrap\"\r\n              [ngClass]=\"{'gap-3': screenWidth > 475 , 'gap-1' : screenWidth <= 475}\">\r\n              <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n                <div class=\"card_wrapper\">\r\n                  <div class=\"container_card visible\">\r\n                    <div class=\"card-section\">\r\n                      <div class=\"second-part-card\">\r\n                      </div>\r\n                      <div class=\"first-part-card d-flex align-items-center\"\r\n                        [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                        <img loading=\"lazy\" class=\"tick-img\"\r\n                          src=\"https://png.pngtree.com/png-vector/20230910/ourmid/pngtree-3d-tick-sign-icon-png-image_9225323.png\"\r\n                          alt=\"something\" />\r\n                        <!-- <div [innerHTML]=\"item.inputText[0].value | sanitizeHtml\" class=\"ml-5\"></div> -->\r\n                        <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                          [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n              [simpoContainerAlignment]=\"stylesLayout\">\r\n              <div *ngFor=\"let button of data?.action?.buttons\">\r\n                <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                  [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n                  [edit]=\"edit\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n      [isMerged]=\"styles?.merge ?? false\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>\r\n<ng-template #ImageSection>\r\n  <div class=\"col-10 col-sm-8 col-lg-6\"\r\n    [ngClass]=\"{'w-100' : content?.image?.showImage && isBorderlessImage && styles?.positionLayout?.value == 'top' || styles?.positionLayout?.value == 'bottom'}\"\r\n    style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n    [simpoBorderless]=\"getPositionLayout\" [simpoAnimation]=\"styles?.animation\">\r\n    <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n      [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n      [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\r\n      [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n  </div>\r\n</ng-template>", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.width-100{width:100%!important}.button-display{display:flex;flex-wrap:wrap;gap:10px}.gap-15{gap:15px}.box{border:8px solid rgba(240,240,240,.8);box-shadow:#63636333 0 2px 8px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.wrap-reverse{flex-wrap:wrap-reverse!important}.insideImg{height:100%!important}.card-container{flex-direction:column}}.text-element{inline-size:100%;overflow-wrap:break-word}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.image-card{width:50%!important}.svg{fill:#ffb6c1;transform:rotate(180deg)}.ml-5{margin-left:5px}.mlr-0{margin-left:0;margin-right:0}.d-block{display:block!important}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: 
                 // SimpoHoverBorderDirective,
                 //directive
                 SimpoBorderlessDirective, selector: "[simpoBorderless]", inputs: ["simpoBorderless"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: MergeHeaderDirective, selector: "[simpoMergeHeader]", inputs: ["simpoMergeHeader", "backgroundInfo"] }] }); }
@@ -5083,7 +5122,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SpacingAroundDirective,
                         ImageEditorDirective,
                         MergeHeaderDirective
-                    ], template: "<div [id]=\"data?.id\"\r\n  [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage , 'd-block': isBorderlessImage}\"\r\n  class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  [attr.style]=\"customClass\" [simpoMergeHeader]=\"styles?.merge\">\r\n  <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\"\r\n    class=\"d-flex justify-content-center\" [backgroundInfo]=\"styles?.background\">\r\n    <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row w-100\"\r\n      [simpoCorner]=\"styles?.corners\"  [ngClass]=\"{'wrap-reverse' : styles?.positionLayout?.value == 'bottom'}\">\r\n       <!-- overflow-hidden -->\r\n      <!-- [ngClass]=\"{'flex-column': isBorderlessImage && styles?.positionLayout?.value === 'top' , 'flex-column-reverse': isBorderlessImage && styles?.positionLayout?.value === 'bottom'}\" -->\r\n      <!-- [simpoMergeHeader]=\"styles?.merge\" -->\r\n      <!-- [backgroundInfo]=\"styles?.background?.image\" -->\r\n      <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n      <div class=\"py-5\"\r\n        [ngClass]=\"{'col-lg-6 col-xxl-6': content?.image?.showImage && isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage || !content?.image?.showImage , 'col-lg-12 col-md-12 col-12 width-100': isBorderlessImage && (styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom')}\"\r\n        [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\">\r\n        <div class=\"row g-5 justify-content-start mlr-0 h-auto\" [id]=\"data?.id\"\r\n          [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\" [simpoAnimation]=\"styles?.animation\"\r\n          [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n          [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n          <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.  image?.showImage && !isBorderlessImage\"\r\n            [simpoContainerAlignment]=\"stylesLayout\">\r\n            <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n              [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n              [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n              [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n              [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n          </div>\r\n          <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n            [ngClass]=\"{'col-lg-12':  content?.image?.showImage && isBorderlessImage, 'col-lg-6':!isBorderlessImage || !content?.image?.showImage,'box p-3': content?.display?.showCard}\"\r\n            [style.background]=\"content?.display?.showCard ?  getColor() : 'transparent'\"\r\n            [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\"\r\n            [simpoCorner]=\"styles?.corners\">\r\n            <div *ngFor=\"let item of content?.inputText\">\r\n              <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex gap-3 card-container flex-wrap\"\r\n              [ngClass]=\"{'gap-3': screenWidth > 475 , 'gap-1' : screenWidth <= 475}\">\r\n              <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n                <div class=\"card_wrapper\">\r\n                  <div class=\"container_card visible\">\r\n                    <div class=\"card-section\">\r\n                      <div class=\"second-part-card\">\r\n                      </div>\r\n                      <div class=\"first-part-card d-flex align-items-center\"\r\n                        [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                        <img loading=\"lazy\" class=\"tick-img\"\r\n                          src=\"https://png.pngtree.com/png-vector/20230910/ourmid/pngtree-3d-tick-sign-icon-png-image_9225323.png\"\r\n                          alt=\"something\" />\r\n                        <!-- <div [innerHTML]=\"item.inputText[0].value | sanitizeHtml\" class=\"ml-5\"></div> -->\r\n                        <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                          [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n              [simpoContainerAlignment]=\"stylesLayout\">\r\n              <div *ngFor=\"let button of data?.action?.buttons\">\r\n                <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                  [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n                  [edit]=\"edit\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n      [isMerged]=\"styles?.merge ?? false\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>\r\n<ng-template #ImageSection>\r\n  <div class=\"col-10 col-sm-8 col-lg-6\"\r\n    [ngClass]=\"{'w-100' : content?.image?.showImage && isBorderlessImage && styles?.positionLayout?.value == 'top' || styles?.positionLayout?.value == 'bottom'}\"\r\n    style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n    [simpoBorderless]=\"getPositionLayout\" [simpoAnimation]=\"styles?.animation\">\r\n    <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n      [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n      [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\r\n      [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n  </div>\r\n</ng-template>", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.width-100{width:100%!important}.button-display{display:flex;flex-wrap:wrap;gap:10px}.gap-15{gap:15px}.box{border:8px solid rgba(240,240,240,.8);box-shadow:#63636333 0 2px 8px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.wrap-reverse{flex-wrap:wrap-reverse!important}.insideImg{height:100%!important}.card-container{flex-direction:column}}.text-element{inline-size:100%;overflow-wrap:break-word}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.image-card{width:50%!important}.svg{fill:#ffb6c1;transform:rotate(180deg)}.ml-5{margin-left:5px}.mlr-0{margin-left:0;margin-right:0}.d-block{display:block!important}\n"] }]
+                    ], template: "<div [id]=\"data?.id\"\r\n  [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage , 'd-block': isBorderlessImage}\"\r\n  class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  [attr.style]=\"customClass\" [simpoMergeHeader]=\"styles?.merge\">\r\n  <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\"\r\n    class=\"d-flex justify-content-center\" [backgroundInfo]=\"styles?.background\">\r\n    <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row w-100\"\r\n      [simpoCorner]=\"styles?.corners\"  [ngClass]=\"{'wrap-reverse' : styles?.positionLayout?.value == 'bottom'}\">\r\n       <!-- overflow-hidden -->\r\n      <!-- [ngClass]=\"{'flex-column': isBorderlessImage && styles?.positionLayout?.value === 'top' , 'flex-column-reverse': isBorderlessImage && styles?.positionLayout?.value === 'bottom'}\" -->\r\n      <!-- [simpoMergeHeader]=\"styles?.merge\" -->\r\n      <!-- [backgroundInfo]=\"styles?.background?.image\" -->\r\n      <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n      <div class=\"py-5\"\r\n        [ngClass]=\"{'col-lg-6 col-xxl-6': content?.image?.showImage && isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage || !content?.image?.showImage , 'col-lg-12 col-md-12 col-12 width-100': (isBorderlessImage && (styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom')) || !content?.image?.showImage}\"\r\n        [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\">\r\n        <div class=\"row g-5 justify-content-start mlr-0 h-auto\" [id]=\"data?.id\"\r\n          [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\" [simpoAnimation]=\"styles?.animation\"\r\n          [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n          [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n          <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.  image?.showImage && !isBorderlessImage\"\r\n            [simpoContainerAlignment]=\"stylesLayout\">\r\n            <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n              [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n              [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n              [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n              [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n          </div>\r\n                      <!-- 'col-lg-12':  content?.image?.showImage && isBorderlessImage, 'col-lg-12':!isBorderlessImage || !content?.image?.showImage, -->\r\n          <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n            [ngClass]=\"{'box p-3': content?.display?.showCard , 'col-lg-6' : content?.image?.showImage && !isBorderlessImage }\"\r\n            [style.background]=\"content?.display?.showCard ?  getColor() : 'transparent'\"\r\n            [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\"\r\n            [simpoCorner]=\"styles?.corners\">\r\n            <div *ngFor=\"let item of content?.inputText\">\r\n              <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n                <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex gap-3 card-container flex-wrap\"\r\n              [ngClass]=\"{'gap-3': screenWidth > 475 , 'gap-1' : screenWidth <= 475}\">\r\n              <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n                <div class=\"card_wrapper\">\r\n                  <div class=\"container_card visible\">\r\n                    <div class=\"card-section\">\r\n                      <div class=\"second-part-card\">\r\n                      </div>\r\n                      <div class=\"first-part-card d-flex align-items-center\"\r\n                        [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                        <img loading=\"lazy\" class=\"tick-img\"\r\n                          src=\"https://png.pngtree.com/png-vector/20230910/ourmid/pngtree-3d-tick-sign-icon-png-image_9225323.png\"\r\n                          alt=\"something\" />\r\n                        <!-- <div [innerHTML]=\"item.inputText[0].value | sanitizeHtml\" class=\"ml-5\"></div> -->\r\n                        <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                          [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n              [simpoContainerAlignment]=\"stylesLayout\">\r\n              <div *ngFor=\"let button of data?.action?.buttons\">\r\n                <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                  [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n                  [edit]=\"edit\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n      [isMerged]=\"styles?.merge ?? false\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>\r\n<ng-template #ImageSection>\r\n  <div class=\"col-10 col-sm-8 col-lg-6\"\r\n    [ngClass]=\"{'w-100' : content?.image?.showImage && isBorderlessImage && styles?.positionLayout?.value == 'top' || styles?.positionLayout?.value == 'bottom'}\"\r\n    style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n    [simpoBorderless]=\"getPositionLayout\" [simpoAnimation]=\"styles?.animation\">\r\n    <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n      [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n      [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\r\n      [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n  </div>\r\n</ng-template>", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.width-100{width:100%!important}.button-display{display:flex;flex-wrap:wrap;gap:10px}.gap-15{gap:15px}.box{border:8px solid rgba(240,240,240,.8);box-shadow:#63636333 0 2px 8px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.wrap-reverse{flex-wrap:wrap-reverse!important}.insideImg{height:100%!important}.card-container{flex-direction:column}}.text-element{inline-size:100%;overflow-wrap:break-word}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.image-card{width:50%!important}.svg{fill:#ffb6c1;transform:rotate(180deg)}.ml-5{margin-left:5px}.mlr-0{margin-left:0;margin-right:0}.d-block{display:block!important}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -5421,7 +5460,7 @@ class FaqSectionComponent extends BaseSection {
         return 'justify-content-center';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FaqSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FaqSectionComponent, isStandalone: true, selector: "simpo-faq-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" class=\"total-container\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n  <div class=\"col-xxl-8 py-5 w-100\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n    [spacingHorizontal]=\"stylesLayout\" [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\">\r\n\r\n    <div [simpoPositionLayoutDirective]=\"style?.positionLayout\" class=\"row\" [id]=\"data?.id\"\r\n      [simpoLayout]=\"style?.layout\" [simpoContainerAlignment]=\"stylesLayout\" [class]=\"getLayout()\">\r\n      <div class=\"container-fluid flex-col col-lg-6 col-md-6 cursor-pointer mx-0\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\" class=\"w-100\" [simpoContentTitleSpace]=\"headingSpace\">\r\n          <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n        </div>\r\n        <div *ngFor=\"let itemData of content?.listItem?.data; let i = index\" class=\"data data-1 w-100 cursor-pointer\"\r\n          [ngStyle]=\"\r\n    unCollapsedList.includes(i) && data?.styles?.background?.accentBackgroundType == 'Gradient'\r\n      ? { background: 'linear-gradient(90deg, ' + data?.styles?.background?.accentColor + ', ' + data?.styles?.background?.secondaryAccentColor + ')' }\r\n      :     unCollapsedList.includes(i) && data?.styles?.background?.accentBackgroundType == 'Solid' ?\r\n{ background : data?.styles?.background?.accentColor} : {}\r\n  \">\r\n          <div style=\"display: flex;align-items: center;justify-content: space-between; cursor: pointer;\"\r\n            class=\"question\">\r\n            <p class=\"heading-medium  position-relative content-side mb-0 text-start cursor-pointer\"\r\n              data-toggle=\"collapse\" [ngClass]=\"{'fw-600':unCollapsedList.includes(i)}\">\r\n              <!-- <span style=\"display: block;\" > -->\r\n              <simpo-text-editor [(value)]=\"itemData.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n              <!-- </span> -->\r\n            </p>\r\n            <mat-icon *ngIf=\"unCollapsedList.includes(i)\"\r\n              [ngStyle]=\"{'left' : style?.layout?.align == 'right' ? 0 : '', 'right' : style?.layout?.align !== 'right' ? 0 : ''}\"\r\n              (click)=\"toggleContent(i)\">close</mat-icon>\r\n            <mat-icon *ngIf=\"!unCollapsedList.includes(i)\"\r\n              [ngStyle]=\"{'left' : style?.layout?.align == 'right' ? 0 : '', 'right' : style?.layout?.align !== 'right' ? 0 : ''}\"\r\n              (click)=\"toggleContent(i)\">add</mat-icon>\r\n          </div>\r\n          <div class=\"body-large desc multi-collapse text-start cursor-pointer\"\r\n            [ngClass]=\"{'collapse': !unCollapsedList.includes(i)}\">\r\n            <simpo-text-editor [(value)]=\"itemData.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-10 col-sm-6 col-md-6 col-lg-6 d-flex align-items-center\" *ngIf=\"content?.image?.showImage\">\r\n        <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n          [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n          [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid\"\r\n          [alt]=\"content?.image?.altText\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\"\r\n          [sectionId]=\"data?.id\" class=\"h-100 w-100\" />\r\n      </div>\r\n    </div>\r\n    <!-- <div *ngIf=\"content?.image?.showImage && screenWidth > 475\" class=\"row g-5\" [id]=\"data?.id\"\r\n      [simpoLayout]=\"style?.layout\" [simpoPositionLayoutDirective]=\"style?.positionLayout\"\r\n      [ngClass]=\"{ 'align-items-stretch': style?.positionLayout?.value === 'left' || style?.positionLayout?.value === 'right' }\">\r\n\r\n\r\n      <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15 content-side \"\r\n        [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"style?.contentAlignment\">\r\n\r\n        <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n          <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n        </div>\r\n\r\n        <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\"\r\n          class=\"data\" (click)=\"toggleContent(i)\">\r\n          <p class=\"heading-medium d-flex align-items-center justify-content-between position-relative content-side cursor-pointer\"\r\n            data-toggle=\"collapse\">\r\n            <simpo-text-editor [(value)]=\"itemData.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            <mat-icon *ngIf=\"unCollapsedList.includes(i)\"\r\n              style=\"position:relative; right: 0px;\">keyboard_arrow_up</mat-icon>\r\n            <mat-icon *ngIf=\"!unCollapsedList.includes(i)\"\r\n              style=\"position: relative; right: 0px;\">keyboard_arrow_down</mat-icon>\r\n          </p>\r\n          <div class=\"body-large desc multi-collapse cursor-pointer\"\r\n            [ngClass]=\"{'collapse': !unCollapsedList.includes(i)}\">\r\n            <simpo-text-editor [(value)]=\"itemData.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-10 col-sm-8 col-lg-6\" [simpoContainerAlignment]=\"stylesLayout\" *ngIf=\"content?.image?.showImage\">\r\n        <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n          [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n          [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid\"\r\n          [alt]=\"content?.image?.altText\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\"\r\n          [sectionId]=\"data?.id\" />\r\n      </div>\r\n    </div> -->\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>", styles: [".mb-2{margin-bottom:2.5rem!important}mat-icon{font-family:Material Icons!important}.data{gap:1rem;padding-top:.5rem;padding-bottom:.5rem;box-shadow:#11182733 0 -1px inset;cursor:pointer;width:100%}.flex-col{display:block!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{height:auto;position:relative}.heading-large{margin-top:20px}.question p{width:95%}.question mat-icon{width:5%}@media only screen and (max-width: 475px){.row{display:flex;flex-direction:column-reverse}.col-10{width:100%!important}.question p{width:90%}.question mat-icon{width:10%}}.float-end{position:absolute;top:0}@media only screen and (min-width: 500px){.heading-medium{font-size:20px}}@media screen and (max-width: 500px){.heading-medium{font-size:16px}.desc{font-size:14px}}.w-60{width:60%}.data-1{box-shadow:#0000001a 0 1px 3px,#0000000f 0 1px 2px;border-radius:10px;text-align:center;padding-left:1rem;padding-right:1rem;margin-bottom:1rem;cursor:pointer}.fw-600{font-weight:600}.cursor-pointer{cursor:pointer}\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: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: FaqSectionComponent, isStandalone: true, selector: "simpo-faq-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" class=\"total-container\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n  <div class=\"col-xxl-8 py-5 w-100\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n    [spacingHorizontal]=\"stylesLayout\" [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\">\r\n\r\n    <div [simpoPositionLayoutDirective]=\"style?.positionLayout\" class=\"row\" [id]=\"data?.id\"\r\n      [simpoLayout]=\"style?.layout\" [simpoContainerAlignment]=\"stylesLayout\" [class]=\"getLayout()\">\r\n      <div class=\"container-fluid flex-col col-lg-6 col-md-6 cursor-pointer mx-0\" [class.col-lg-9]=\"!content?.image?.showImage\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\" class=\"w-100\" [simpoContentTitleSpace]=\"headingSpace\">\r\n          <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n        </div>\r\n        <div *ngFor=\"let itemData of content?.listItem?.data; let i = index\" class=\"data data-1 w-100 cursor-pointer\"\r\n          [ngStyle]=\"\r\n    unCollapsedList.includes(i) && data?.styles?.background?.accentBackgroundType == 'Gradient'\r\n      ? { background: 'linear-gradient(90deg, ' + data?.styles?.background?.accentColor + ', ' + data?.styles?.background?.secondaryAccentColor + ')' }\r\n      :     unCollapsedList.includes(i) && data?.styles?.background?.accentBackgroundType == 'Solid' ?\r\n{ background : data?.styles?.background?.accentColor} : {}\r\n  \">\r\n          <div style=\"display: flex;align-items: center;justify-content: space-between; cursor: pointer;\"\r\n            class=\"question\">\r\n            <p class=\"heading-medium  position-relative content-side mb-0 text-start cursor-pointer\"\r\n              data-toggle=\"collapse\" [ngClass]=\"{'fw-600':unCollapsedList.includes(i)}\">\r\n              <!-- <span style=\"display: block;\" > -->\r\n              <simpo-text-editor [(value)]=\"itemData.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n              <!-- </span> -->\r\n            </p>\r\n            <mat-icon *ngIf=\"unCollapsedList.includes(i)\"\r\n              [ngStyle]=\"{'left' : style?.layout?.align == 'right' ? 0 : '', 'right' : style?.layout?.align !== 'right' ? 0 : ''}\"\r\n              (click)=\"toggleContent(i)\">close</mat-icon>\r\n            <mat-icon *ngIf=\"!unCollapsedList.includes(i)\"\r\n              [ngStyle]=\"{'left' : style?.layout?.align == 'right' ? 0 : '', 'right' : style?.layout?.align !== 'right' ? 0 : ''}\"\r\n              (click)=\"toggleContent(i)\">add</mat-icon>\r\n          </div>\r\n          <div class=\"body-large desc multi-collapse text-start cursor-pointer\"\r\n            [ngClass]=\"{'collapse': !unCollapsedList.includes(i)}\">\r\n            <simpo-text-editor [(value)]=\"itemData.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-10 col-sm-6 col-md-6 col-lg-6 d-flex align-items-center\" *ngIf=\"content?.image?.showImage\">\r\n        <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n          [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n          [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid\"\r\n          [alt]=\"content?.image?.altText\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\"\r\n          [sectionId]=\"data?.id\" class=\"h-100 w-100\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>", styles: [".mb-2{margin-bottom:2.5rem!important}mat-icon{font-family:Material Icons!important}.data{gap:1rem;padding-top:.5rem;padding-bottom:.5rem;box-shadow:#11182733 0 -1px inset;cursor:pointer;width:100%}.flex-col{display:block!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{height:auto;position:relative}.heading-large{margin-top:20px}.question p{width:95%}.question mat-icon{width:5%}@media only screen and (max-width: 475px){.row{display:flex;flex-direction:column-reverse}.col-10{width:100%!important}.question p{width:90%}.question mat-icon{width:10%}}.float-end{position:absolute;top:0}@media only screen and (min-width: 500px){.heading-medium{font-size:20px}}@media screen and (max-width: 500px){.heading-medium{font-size:16px}.desc{font-size:14px}}.w-60{width:60%}.data-1{box-shadow:#0000001a 0 1px 3px,#0000000f 0 1px 2px;border-radius:10px;text-align:center;padding-left:1rem;padding-right:1rem;margin-bottom:1rem;cursor:pointer}.fw-600{font-weight:600}.cursor-pointer{cursor:pointer}\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: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }] }); }
 }
@@ -5458,7 +5497,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SpacingHorizontalDirective,
                         SvgDividerComponent,
                         ImageEditorDirective
-                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" class=\"total-container\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n  <div class=\"col-xxl-8 py-5 w-100\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n    [spacingHorizontal]=\"stylesLayout\" [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\">\r\n\r\n    <div [simpoPositionLayoutDirective]=\"style?.positionLayout\" class=\"row\" [id]=\"data?.id\"\r\n      [simpoLayout]=\"style?.layout\" [simpoContainerAlignment]=\"stylesLayout\" [class]=\"getLayout()\">\r\n      <div class=\"container-fluid flex-col col-lg-6 col-md-6 cursor-pointer mx-0\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\" class=\"w-100\" [simpoContentTitleSpace]=\"headingSpace\">\r\n          <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n        </div>\r\n        <div *ngFor=\"let itemData of content?.listItem?.data; let i = index\" class=\"data data-1 w-100 cursor-pointer\"\r\n          [ngStyle]=\"\r\n    unCollapsedList.includes(i) && data?.styles?.background?.accentBackgroundType == 'Gradient'\r\n      ? { background: 'linear-gradient(90deg, ' + data?.styles?.background?.accentColor + ', ' + data?.styles?.background?.secondaryAccentColor + ')' }\r\n      :     unCollapsedList.includes(i) && data?.styles?.background?.accentBackgroundType == 'Solid' ?\r\n{ background : data?.styles?.background?.accentColor} : {}\r\n  \">\r\n          <div style=\"display: flex;align-items: center;justify-content: space-between; cursor: pointer;\"\r\n            class=\"question\">\r\n            <p class=\"heading-medium  position-relative content-side mb-0 text-start cursor-pointer\"\r\n              data-toggle=\"collapse\" [ngClass]=\"{'fw-600':unCollapsedList.includes(i)}\">\r\n              <!-- <span style=\"display: block;\" > -->\r\n              <simpo-text-editor [(value)]=\"itemData.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n              <!-- </span> -->\r\n            </p>\r\n            <mat-icon *ngIf=\"unCollapsedList.includes(i)\"\r\n              [ngStyle]=\"{'left' : style?.layout?.align == 'right' ? 0 : '', 'right' : style?.layout?.align !== 'right' ? 0 : ''}\"\r\n              (click)=\"toggleContent(i)\">close</mat-icon>\r\n            <mat-icon *ngIf=\"!unCollapsedList.includes(i)\"\r\n              [ngStyle]=\"{'left' : style?.layout?.align == 'right' ? 0 : '', 'right' : style?.layout?.align !== 'right' ? 0 : ''}\"\r\n              (click)=\"toggleContent(i)\">add</mat-icon>\r\n          </div>\r\n          <div class=\"body-large desc multi-collapse text-start cursor-pointer\"\r\n            [ngClass]=\"{'collapse': !unCollapsedList.includes(i)}\">\r\n            <simpo-text-editor [(value)]=\"itemData.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-10 col-sm-6 col-md-6 col-lg-6 d-flex align-items-center\" *ngIf=\"content?.image?.showImage\">\r\n        <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n          [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n          [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid\"\r\n          [alt]=\"content?.image?.altText\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\"\r\n          [sectionId]=\"data?.id\" class=\"h-100 w-100\" />\r\n      </div>\r\n    </div>\r\n    <!-- <div *ngIf=\"content?.image?.showImage && screenWidth > 475\" class=\"row g-5\" [id]=\"data?.id\"\r\n      [simpoLayout]=\"style?.layout\" [simpoPositionLayoutDirective]=\"style?.positionLayout\"\r\n      [ngClass]=\"{ 'align-items-stretch': style?.positionLayout?.value === 'left' || style?.positionLayout?.value === 'right' }\">\r\n\r\n\r\n      <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15 content-side \"\r\n        [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"style?.contentAlignment\">\r\n\r\n        <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n          <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n        </div>\r\n\r\n        <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\"\r\n          class=\"data\" (click)=\"toggleContent(i)\">\r\n          <p class=\"heading-medium d-flex align-items-center justify-content-between position-relative content-side cursor-pointer\"\r\n            data-toggle=\"collapse\">\r\n            <simpo-text-editor [(value)]=\"itemData.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            <mat-icon *ngIf=\"unCollapsedList.includes(i)\"\r\n              style=\"position:relative; right: 0px;\">keyboard_arrow_up</mat-icon>\r\n            <mat-icon *ngIf=\"!unCollapsedList.includes(i)\"\r\n              style=\"position: relative; right: 0px;\">keyboard_arrow_down</mat-icon>\r\n          </p>\r\n          <div class=\"body-large desc multi-collapse cursor-pointer\"\r\n            [ngClass]=\"{'collapse': !unCollapsedList.includes(i)}\">\r\n            <simpo-text-editor [(value)]=\"itemData.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-10 col-sm-8 col-lg-6\" [simpoContainerAlignment]=\"stylesLayout\" *ngIf=\"content?.image?.showImage\">\r\n        <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n          [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n          [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid\"\r\n          [alt]=\"content?.image?.altText\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\"\r\n          [sectionId]=\"data?.id\" />\r\n      </div>\r\n    </div> -->\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>", styles: [".mb-2{margin-bottom:2.5rem!important}mat-icon{font-family:Material Icons!important}.data{gap:1rem;padding-top:.5rem;padding-bottom:.5rem;box-shadow:#11182733 0 -1px inset;cursor:pointer;width:100%}.flex-col{display:block!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{height:auto;position:relative}.heading-large{margin-top:20px}.question p{width:95%}.question mat-icon{width:5%}@media only screen and (max-width: 475px){.row{display:flex;flex-direction:column-reverse}.col-10{width:100%!important}.question p{width:90%}.question mat-icon{width:10%}}.float-end{position:absolute;top:0}@media only screen and (min-width: 500px){.heading-medium{font-size:20px}}@media screen and (max-width: 500px){.heading-medium{font-size:16px}.desc{font-size:14px}}.w-60{width:60%}.data-1{box-shadow:#0000001a 0 1px 3px,#0000000f 0 1px 2px;border-radius:10px;text-align:center;padding-left:1rem;padding-right:1rem;margin-bottom:1rem;cursor:pointer}.fw-600{font-weight:600}.cursor-pointer{cursor:pointer}\n"] }]
+                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" class=\"total-container\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n  <div class=\"col-xxl-8 py-5 w-100\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n    [spacingHorizontal]=\"stylesLayout\" [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\">\r\n\r\n    <div [simpoPositionLayoutDirective]=\"style?.positionLayout\" class=\"row\" [id]=\"data?.id\"\r\n      [simpoLayout]=\"style?.layout\" [simpoContainerAlignment]=\"stylesLayout\" [class]=\"getLayout()\">\r\n      <div class=\"container-fluid flex-col col-lg-6 col-md-6 cursor-pointer mx-0\" [class.col-lg-9]=\"!content?.image?.showImage\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\" class=\"w-100\" [simpoContentTitleSpace]=\"headingSpace\">\r\n          <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n        </div>\r\n        <div *ngFor=\"let itemData of content?.listItem?.data; let i = index\" class=\"data data-1 w-100 cursor-pointer\"\r\n          [ngStyle]=\"\r\n    unCollapsedList.includes(i) && data?.styles?.background?.accentBackgroundType == 'Gradient'\r\n      ? { background: 'linear-gradient(90deg, ' + data?.styles?.background?.accentColor + ', ' + data?.styles?.background?.secondaryAccentColor + ')' }\r\n      :     unCollapsedList.includes(i) && data?.styles?.background?.accentBackgroundType == 'Solid' ?\r\n{ background : data?.styles?.background?.accentColor} : {}\r\n  \">\r\n          <div style=\"display: flex;align-items: center;justify-content: space-between; cursor: pointer;\"\r\n            class=\"question\">\r\n            <p class=\"heading-medium  position-relative content-side mb-0 text-start cursor-pointer\"\r\n              data-toggle=\"collapse\" [ngClass]=\"{'fw-600':unCollapsedList.includes(i)}\">\r\n              <!-- <span style=\"display: block;\" > -->\r\n              <simpo-text-editor [(value)]=\"itemData.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n              <!-- </span> -->\r\n            </p>\r\n            <mat-icon *ngIf=\"unCollapsedList.includes(i)\"\r\n              [ngStyle]=\"{'left' : style?.layout?.align == 'right' ? 0 : '', 'right' : style?.layout?.align !== 'right' ? 0 : ''}\"\r\n              (click)=\"toggleContent(i)\">close</mat-icon>\r\n            <mat-icon *ngIf=\"!unCollapsedList.includes(i)\"\r\n              [ngStyle]=\"{'left' : style?.layout?.align == 'right' ? 0 : '', 'right' : style?.layout?.align !== 'right' ? 0 : ''}\"\r\n              (click)=\"toggleContent(i)\">add</mat-icon>\r\n          </div>\r\n          <div class=\"body-large desc multi-collapse text-start cursor-pointer\"\r\n            [ngClass]=\"{'collapse': !unCollapsedList.includes(i)}\">\r\n            <simpo-text-editor [(value)]=\"itemData.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-10 col-sm-6 col-md-6 col-lg-6 d-flex align-items-center\" *ngIf=\"content?.image?.showImage\">\r\n        <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n          [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n          [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid\"\r\n          [alt]=\"content?.image?.altText\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\"\r\n          [sectionId]=\"data?.id\" class=\"h-100 w-100\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>", styles: [".mb-2{margin-bottom:2.5rem!important}mat-icon{font-family:Material Icons!important}.data{gap:1rem;padding-top:.5rem;padding-bottom:.5rem;box-shadow:#11182733 0 -1px inset;cursor:pointer;width:100%}.flex-col{display:block!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{height:auto;position:relative}.heading-large{margin-top:20px}.question p{width:95%}.question mat-icon{width:5%}@media only screen and (max-width: 475px){.row{display:flex;flex-direction:column-reverse}.col-10{width:100%!important}.question p{width:90%}.question mat-icon{width:10%}}.float-end{position:absolute;top:0}@media only screen and (min-width: 500px){.heading-medium{font-size:20px}}@media screen and (max-width: 500px){.heading-medium{font-size:16px}.desc{font-size:14px}}.w-60{width:60%}.data-1{box-shadow:#0000001a 0 1px 3px,#0000000f 0 1px 2px;border-radius:10px;text-align:center;padding-left:1rem;padding-right:1rem;margin-bottom:1rem;cursor:pointer}.fw-600{font-weight:600}.cursor-pointer{cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -5887,9 +5926,9 @@ class ServiceSectionComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ServiceSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ServiceSectionComponent, isStandalone: true, selector: "simpo-service-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\"  simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div [spacingAround]=\"stylesLayout\">\r\n    <div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\">\r\n      <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n        <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n          <div class=\"w-100\" *ngFor=\"let text of data?.content?.inputText\">\r\n            <div [simpoContentTitleSpace]=\"headingSpace\" [ngClass]=\"text.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n              <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </div>\r\n          </div>\r\n          <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\" [class.row-scroll]=\"style?.direction === 'ROW'\" #container>\r\n            <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n              *ngFor=\"let service of content?.listItem?.data\">\r\n              <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\r\n                <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n                  [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-below-image-card>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\r\n                <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n                  [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-top-of-image-card>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\r\n                <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n                  [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-covering-image-card>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.row-scroll{flex-wrap:nowrap!important;width:100%;overflow-x:scroll}@media screen and (min-width: 760px){.cards{padding-bottom:24px;margin-bottom:10px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: BelowImageCardComponent, selector: "simpo-below-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit"] }, { kind: "component", type: TopOfImageCardComponent, selector: "simpo-top-of-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit"] }, { kind: "component", type: CoveringImageCardComponent, selector: "simpo-covering-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ServiceSectionComponent, isStandalone: true, selector: "simpo-service-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\r\n  [attr.style]=\"customClass\">\r\n  <div [spacingAround]=\"stylesLayout\">\r\n    <div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\">\r\n      <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n        <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n          [simpoLayout]=\"style?.layout\">\r\n          <div class=\"w-100\" *ngFor=\"let text of data?.content?.inputText\">\r\n            <div [simpoContentTitleSpace]=\"headingSpace\"\r\n              [ngClass]=\"text.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n              <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </div>\r\n          </div>\r\n          <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\r\n            [class.row-scroll]=\"style?.direction === 'ROW'\" #container>\r\n            <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n              *ngFor=\"let service of content?.listItem?.data\">\r\n              <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\r\n                <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n                  [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-below-image-card>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\r\n                <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n                  [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-top-of-image-card>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\r\n                <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n                  [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-covering-image-card>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display d-flex mt-3 gap-2\"\r\n            [simpoContainerAlignment]=\"stylesLayout\">\r\n            <div *ngFor=\"let button of data?.action?.buttons\">\r\n              <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n                [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n                [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.row-scroll{flex-wrap:nowrap!important;width:100%;overflow-x:scroll}.button-display{display:flex;flex-wrap:wrap;gap:10px}@media screen and (min-width: 760px){.cards{padding-bottom:24px;margin-bottom:10px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: BelowImageCardComponent, selector: "simpo-below-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit"] }, { kind: "component", type: TopOfImageCardComponent, selector: "simpo-top-of-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit"] }, { kind: "component", type: CoveringImageCardComponent, selector: "simpo-covering-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 
                 //directive
-                ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }] }); }
+                ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ServiceSectionComponent, decorators: [{
             type: Component,
@@ -5919,8 +5958,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         TextBackgroundDirectiveDirective,
                         SanitizeHtmlPipe,
                         SpacingHorizontalDirective,
-                        SpacingAroundDirective
-                    ], template: "<section [id]=\"data?.id\"  simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div [spacingAround]=\"stylesLayout\">\r\n    <div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\">\r\n      <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n        <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n          <div class=\"w-100\" *ngFor=\"let text of data?.content?.inputText\">\r\n            <div [simpoContentTitleSpace]=\"headingSpace\" [ngClass]=\"text.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n              <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </div>\r\n          </div>\r\n          <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\" [class.row-scroll]=\"style?.direction === 'ROW'\" #container>\r\n            <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n              *ngFor=\"let service of content?.listItem?.data\">\r\n              <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\r\n                <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n                  [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-below-image-card>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\r\n                <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n                  [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-top-of-image-card>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\r\n                <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n                  [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-covering-image-card>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.row-scroll{flex-wrap:nowrap!important;width:100%;overflow-x:scroll}@media screen and (min-width: 760px){.cards{padding-bottom:24px;margin-bottom:10px}}\n"] }]
+                        SpacingAroundDirective,
+                        SimpoContainerAligment
+                    ], template: "<section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\r\n  [attr.style]=\"customClass\">\r\n  <div [spacingAround]=\"stylesLayout\">\r\n    <div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\">\r\n      <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n        <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n          [simpoLayout]=\"style?.layout\">\r\n          <div class=\"w-100\" *ngFor=\"let text of data?.content?.inputText\">\r\n            <div [simpoContentTitleSpace]=\"headingSpace\"\r\n              [ngClass]=\"text.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n              <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n            </div>\r\n          </div>\r\n          <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\r\n            [class.row-scroll]=\"style?.direction === 'ROW'\" #container>\r\n            <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n              *ngFor=\"let service of content?.listItem?.data\">\r\n              <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\r\n                <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n                  [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-below-image-card>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\r\n                <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n                  [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-top-of-image-card>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\r\n                <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n                  [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-covering-image-card>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display d-flex mt-3 gap-2\"\r\n            [simpoContainerAlignment]=\"stylesLayout\">\r\n            <div *ngFor=\"let button of data?.action?.buttons\">\r\n              <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n                [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n                [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.row-scroll{flex-wrap:nowrap!important;width:100%;overflow-x:scroll}.button-display{display:flex;flex-wrap:wrap;gap:10px}@media screen and (min-width: 760px){.cards{padding-bottom:24px;margin-bottom:10px}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -6282,11 +6322,11 @@ class NavbarButtonElementComponent {
         this._eventService.pageRedirectionButton.emit({ data: pageData ? pageData : this.buttonData });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavbarButtonElementComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NavbarButtonElementComponent, isStandalone: true, selector: "simpo-navbar-button-element", inputs: { buttonData: "buttonData", buttonStyle: "buttonStyle", selectedStyle: "selectedStyle", bgColor: "bgColor", sectionId: "sectionId", accentColor: "accentColor" }, ngImport: i0, template: "<div *ngIf=\"false\">\r\n  <div *ngIf=\"selectedStyle === HeaderButtonStyle.TAB\">\r\n    <div *ngIf=\"!buttonData?.folder\">\r\n      <button mat-stroked-button style=\"border: none; white-space: nowrap;\" [id]=\"sectionId\" [simpoColor]=\"bgColor\"\r\n      [ngStyle]=\"{color:buttonStyle?.color}\" class=\"navbar-button\">{{buttonData?.label}}</button>\r\n      <div [ngStyle]=\"{'border-bottom':'1px solid'+buttonStyle?.color}\" (click)=\"changePage()\" [id]=\"sectionId\"></div>\r\n    </div>\r\n    <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n      <button mat-stroked-button class=\"navbar-button dropdown-toggle\" [simpoColor]=\"bgColor\" style=\"border: none; white-space: nowrap;\"\r\n      [ngStyle]=\"{color:buttonStyle?.color}\" type=\"button\"\r\n        id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n        {{buttonData?.label}}\r\n      </button>\r\n      <div [ngStyle]=\"{'border-bottom':'1px solid'+buttonStyle?.color}\" [id]=\"sectionId\"></div>\r\n      <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n        <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"selectedStyle === HeaderButtonStyle.ROUND_SUBTLE\">\r\n    <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n      style=\"border: none;width: max-content!important; border-radius: 8px;\"\r\n      [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" (click)=\"changePage()\"\r\n      [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n    <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n      <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n        style=\"border: none;width: max-content!important; border-radius: 8px;\"\r\n        [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" type=\"button\"\r\n        id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n        {{buttonData?.label}}\r\n      </button>\r\n      <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n        <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"selectedStyle === HeaderButtonStyle.ROUND_BOLD\">\r\n    <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n      style=\"border: none;width: max-content!important; border-radius: 8px;\"\r\n      [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" (click)=\"changePage()\"\r\n      [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n    <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n      <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n        style=\"border: none;width: max-content!important; border-radius: 8px;\"\r\n        [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" type=\"button\"\r\n        id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n        {{buttonData?.label}}\r\n      </button>\r\n      <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n        <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"selectedStyle === HeaderButtonStyle.SQUARE_SUBTLE\">\r\n    <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n      style=\"border: none;border-radius: 0px !important;width: max-content!important;\"\r\n      [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" (click)=\"changePage()\"\r\n      [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n    <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n      <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n        style=\"border: none;border-radius: 0px !important;width: max-content!important;\"\r\n        [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" type=\"button\"\r\n        id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n        {{buttonData?.label}}\r\n      </button>\r\n      <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n        <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"selectedStyle === HeaderButtonStyle.SQUARE_BOLD\">\r\n    <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n      style=\"border: none;width: max-content!important; border-radius: 0px !important;\"\r\n      [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" (click)=\"changePage()\"\r\n      [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n    <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n      <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n      style=\"border: none;width: max-content!important; border-radius: 0px !important;\"\r\n      [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" type=\"button\"\r\n        id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n        {{buttonData?.label}}\r\n      </button>\r\n      <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n        <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- <button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\">{{buttonData?.content?.label}}</button> -->\r\n\r\n</div>\r\n<div>\r\n  <!-- <button mat-stroked-button style=\"border: none;width: max-content!important;\" *ngIf=\"!buttonData?.folder\" [simpoColor]=\"buttonData?.status ? '' : bgColor\"\r\n    (click)=\"changePage()\" [id]=\"sectionId\" [style.color]=\"buttonData?.status ? accentColor : ''\"  [style.fontWeight]=\"buttonData?.status ? '700' : ''\"\r\n    class=\"status-navbar-button\">{{buttonData?.label}}</button> -->\r\n    <button c *ngIf=\"!buttonData?.folder\" [simpoColor]=\"buttonData?.status ? '' : bgColor\"\r\n    (click)=\"changePage()\" [id]=\"sectionId\" [style.color]=\"buttonData?.status ? accentColor : ''\"  [style.fontWeight]=\"buttonData?.status ? '700' : ''\"\r\n    class=\"status-navbar-button button\">\r\n    {{buttonData?.label}}\r\n    </button>\r\n  <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n    <button class=\"status-navbar-button not-selected-dropdown dropdown-toggle\" [style.fontWeight]=\"buttonData?.status ? '700' : ''\" [simpoColor]=\"buttonData?.status ? '' : bgColor\"\r\n      style=\"border: none;width: max-content!important;\" [style.color]=\"buttonData?.status ? accentColor : ''\" type=\"button\" id=\"headerDropdownButton\"\r\n      data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n      {{buttonData?.label}}\r\n    </button>\r\n    <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n      <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".navbar-button,.status-navbar-button{font-size:14px!important}@media only screen and (max-width : 475px){.navbar-button{width:100%!important;display:flex;justify-content:flex-start}.status-navbar-button{color:#000!important;display:flex;justify-content:flex-start}.dropdown{padding-left:10px}.dropdown-toggle{display:flex;align-items:center;gap:10px}}.not-selected-dropdown{background:transparent;font-size:16px!important}.dropdown-item{font-size:15px;padding:10px;font-family:Roboto,sans-serif;border-bottom:1px solid #dee2e6}.dropdown-menu{top:40px;border:none;border-radius:10px}.button{border:none;background:none;outline:none;font-size:16px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NavbarButtonElementComponent, isStandalone: true, selector: "simpo-navbar-button-element", inputs: { buttonData: "buttonData", buttonStyle: "buttonStyle", selectedStyle: "selectedStyle", bgColor: "bgColor", sectionId: "sectionId", accentColor: "accentColor" }, ngImport: i0, template: "<div *ngIf=\"false\">\r\n  <div *ngIf=\"selectedStyle === HeaderButtonStyle.TAB\">\r\n    <div *ngIf=\"!buttonData?.folder\">\r\n      <button mat-stroked-button style=\"border: none; white-space: nowrap;\" [id]=\"sectionId\" [simpoColor]=\"bgColor\"\r\n      [ngStyle]=\"{color:buttonStyle?.color}\" class=\"navbar-button\">{{buttonData?.label}}</button>\r\n      <div [ngStyle]=\"{'border-bottom':'1px solid'+buttonStyle?.color}\" (click)=\"changePage()\" [id]=\"sectionId\"></div>\r\n    </div>\r\n    <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n      <button mat-stroked-button class=\"navbar-button dropdown-toggle\" [simpoColor]=\"bgColor\" style=\"border: none; white-space: nowrap;\"\r\n      [ngStyle]=\"{color:buttonStyle?.color}\" type=\"button\"\r\n        id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n        {{buttonData?.label}}\r\n      </button>\r\n      <div [ngStyle]=\"{'border-bottom':'1px solid'+buttonStyle?.color}\" [id]=\"sectionId\"></div>\r\n      <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n        <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"selectedStyle === HeaderButtonStyle.ROUND_SUBTLE\">\r\n    <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n      style=\"border: none;width: max-content!important; border-radius: 8px;\"\r\n      [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" (click)=\"changePage()\"\r\n      [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n    <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n      <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n        style=\"border: none;width: max-content!important; border-radius: 8px;\"\r\n        [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" type=\"button\"\r\n        id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n        {{buttonData?.label}}\r\n      </button>\r\n      <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n        <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"selectedStyle === HeaderButtonStyle.ROUND_BOLD\">\r\n    <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n      style=\"border: none;width: max-content!important; border-radius: 8px;\"\r\n      [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" (click)=\"changePage()\"\r\n      [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n    <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n      <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n        style=\"border: none;width: max-content!important; border-radius: 8px;\"\r\n        [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" type=\"button\"\r\n        id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n        {{buttonData?.label}}\r\n      </button>\r\n      <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n        <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"selectedStyle === HeaderButtonStyle.SQUARE_SUBTLE\">\r\n    <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n      style=\"border: none;border-radius: 0px !important;width: max-content!important;\"\r\n      [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" (click)=\"changePage()\"\r\n      [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n    <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n      <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n        style=\"border: none;border-radius: 0px !important;width: max-content!important;\"\r\n        [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" type=\"button\"\r\n        id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n        {{buttonData?.label}}\r\n      </button>\r\n      <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n        <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"selectedStyle === HeaderButtonStyle.SQUARE_BOLD\">\r\n    <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n      style=\"border: none;width: max-content!important; border-radius: 0px !important;\"\r\n      [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" (click)=\"changePage()\"\r\n      [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n    <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n      <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n      style=\"border: none;width: max-content!important; border-radius: 0px !important;\"\r\n      [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" type=\"button\"\r\n        id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n        {{buttonData?.label}}\r\n      </button>\r\n      <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n        <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- <button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\">{{buttonData?.content?.label}}</button> -->\r\n\r\n</div>\r\n<div>\r\n  <!-- <button mat-stroked-button style=\"border: none;width: max-content!important;\" *ngIf=\"!buttonData?.folder\" [simpoColor]=\"buttonData?.status ? '' : bgColor\"\r\n    (click)=\"changePage()\" [id]=\"sectionId\" [style.color]=\"buttonData?.status ? accentColor : ''\"  [style.fontWeight]=\"buttonData?.status ? '700' : ''\"\r\n    class=\"status-navbar-button\">{{buttonData?.label}}</button> -->\r\n    <button c *ngIf=\"!buttonData?.folder\" [simpoColor]=\"buttonData?.status ? '' : bgColor\"\r\n    (click)=\"changePage()\" [id]=\"sectionId\" [style.color]=\"buttonData?.status ? accentColor : ''\"  [style.fontWeight]=\"buttonData?.status ? '700' : ''\"\r\n    class=\"status-navbar-button button\">\r\n    {{buttonData?.label}}\r\n    </button>\r\n  <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n    <button class=\"status-navbar-button not-selected-dropdown dropdown-toggle\" [style.fontWeight]=\"buttonData?.status ? '700' : ''\" [simpoColor]=\"buttonData?.status ? '' : bgColor\"\r\n      style=\"border: none;width: max-content!important;\" [style.color]=\"buttonData?.status ? accentColor : ''\" type=\"button\" id=\"headerDropdownButton\"\r\n      data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n      {{buttonData?.label}}\r\n    </button>\r\n    <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n      <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".navbar-button,.status-navbar-button{font-size:14px!important;white-space:nowrap}@media only screen and (max-width : 475px){.navbar-button{width:100%!important;display:flex;justify-content:flex-start}.status-navbar-button{color:#000!important;display:flex;justify-content:flex-start}.dropdown{padding-left:10px}.dropdown-toggle{display:flex;align-items:center;gap:10px}}.not-selected-dropdown{background:transparent;font-size:16px!important}.dropdown-item{font-size:15px;padding:10px;font-family:Roboto,sans-serif;border-bottom:1px solid #dee2e6}.dropdown-menu{top:40px;border:none;border-radius:10px}.button{border:none;background:none;outline:none;font-size:16px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavbarButtonElementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-navbar-button-element', standalone: true, imports: [CommonModule, MatButtonModule, ColorDirective], template: "<div *ngIf=\"false\">\r\n  <div *ngIf=\"selectedStyle === HeaderButtonStyle.TAB\">\r\n    <div *ngIf=\"!buttonData?.folder\">\r\n      <button mat-stroked-button style=\"border: none; white-space: nowrap;\" [id]=\"sectionId\" [simpoColor]=\"bgColor\"\r\n      [ngStyle]=\"{color:buttonStyle?.color}\" class=\"navbar-button\">{{buttonData?.label}}</button>\r\n      <div [ngStyle]=\"{'border-bottom':'1px solid'+buttonStyle?.color}\" (click)=\"changePage()\" [id]=\"sectionId\"></div>\r\n    </div>\r\n    <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n      <button mat-stroked-button class=\"navbar-button dropdown-toggle\" [simpoColor]=\"bgColor\" style=\"border: none; white-space: nowrap;\"\r\n      [ngStyle]=\"{color:buttonStyle?.color}\" type=\"button\"\r\n        id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n        {{buttonData?.label}}\r\n      </button>\r\n      <div [ngStyle]=\"{'border-bottom':'1px solid'+buttonStyle?.color}\" [id]=\"sectionId\"></div>\r\n      <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n        <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"selectedStyle === HeaderButtonStyle.ROUND_SUBTLE\">\r\n    <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n      style=\"border: none;width: max-content!important; border-radius: 8px;\"\r\n      [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" (click)=\"changePage()\"\r\n      [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n    <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n      <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n        style=\"border: none;width: max-content!important; border-radius: 8px;\"\r\n        [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" type=\"button\"\r\n        id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n        {{buttonData?.label}}\r\n      </button>\r\n      <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n        <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"selectedStyle === HeaderButtonStyle.ROUND_BOLD\">\r\n    <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n      style=\"border: none;width: max-content!important; border-radius: 8px;\"\r\n      [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" (click)=\"changePage()\"\r\n      [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n    <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n      <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n        style=\"border: none;width: max-content!important; border-radius: 8px;\"\r\n        [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" type=\"button\"\r\n        id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n        {{buttonData?.label}}\r\n      </button>\r\n      <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n        <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"selectedStyle === HeaderButtonStyle.SQUARE_SUBTLE\">\r\n    <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n      style=\"border: none;border-radius: 0px !important;width: max-content!important;\"\r\n      [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" (click)=\"changePage()\"\r\n      [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n    <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n      <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n        style=\"border: none;border-radius: 0px !important;width: max-content!important;\"\r\n        [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" type=\"button\"\r\n        id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n        {{buttonData?.label}}\r\n      </button>\r\n      <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n        <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"selectedStyle === HeaderButtonStyle.SQUARE_BOLD\">\r\n    <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n      style=\"border: none;width: max-content!important; border-radius: 0px !important;\"\r\n      [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" (click)=\"changePage()\"\r\n      [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n    <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n      <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n      style=\"border: none;width: max-content!important; border-radius: 0px !important;\"\r\n      [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" type=\"button\"\r\n        id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n        {{buttonData?.label}}\r\n      </button>\r\n      <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n        <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- <button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\">{{buttonData?.content?.label}}</button> -->\r\n\r\n</div>\r\n<div>\r\n  <!-- <button mat-stroked-button style=\"border: none;width: max-content!important;\" *ngIf=\"!buttonData?.folder\" [simpoColor]=\"buttonData?.status ? '' : bgColor\"\r\n    (click)=\"changePage()\" [id]=\"sectionId\" [style.color]=\"buttonData?.status ? accentColor : ''\"  [style.fontWeight]=\"buttonData?.status ? '700' : ''\"\r\n    class=\"status-navbar-button\">{{buttonData?.label}}</button> -->\r\n    <button c *ngIf=\"!buttonData?.folder\" [simpoColor]=\"buttonData?.status ? '' : bgColor\"\r\n    (click)=\"changePage()\" [id]=\"sectionId\" [style.color]=\"buttonData?.status ? accentColor : ''\"  [style.fontWeight]=\"buttonData?.status ? '700' : ''\"\r\n    class=\"status-navbar-button button\">\r\n    {{buttonData?.label}}\r\n    </button>\r\n  <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n    <button class=\"status-navbar-button not-selected-dropdown dropdown-toggle\" [style.fontWeight]=\"buttonData?.status ? '700' : ''\" [simpoColor]=\"buttonData?.status ? '' : bgColor\"\r\n      style=\"border: none;width: max-content!important;\" [style.color]=\"buttonData?.status ? accentColor : ''\" type=\"button\" id=\"headerDropdownButton\"\r\n      data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n      {{buttonData?.label}}\r\n    </button>\r\n    <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n      <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".navbar-button,.status-navbar-button{font-size:14px!important}@media only screen and (max-width : 475px){.navbar-button{width:100%!important;display:flex;justify-content:flex-start}.status-navbar-button{color:#000!important;display:flex;justify-content:flex-start}.dropdown{padding-left:10px}.dropdown-toggle{display:flex;align-items:center;gap:10px}}.not-selected-dropdown{background:transparent;font-size:16px!important}.dropdown-item{font-size:15px;padding:10px;font-family:Roboto,sans-serif;border-bottom:1px solid #dee2e6}.dropdown-menu{top:40px;border:none;border-radius:10px}.button{border:none;background:none;outline:none;font-size:16px!important}\n"] }]
+            args: [{ selector: 'simpo-navbar-button-element', standalone: true, imports: [CommonModule, MatButtonModule, ColorDirective], template: "<div *ngIf=\"false\">\r\n  <div *ngIf=\"selectedStyle === HeaderButtonStyle.TAB\">\r\n    <div *ngIf=\"!buttonData?.folder\">\r\n      <button mat-stroked-button style=\"border: none; white-space: nowrap;\" [id]=\"sectionId\" [simpoColor]=\"bgColor\"\r\n      [ngStyle]=\"{color:buttonStyle?.color}\" class=\"navbar-button\">{{buttonData?.label}}</button>\r\n      <div [ngStyle]=\"{'border-bottom':'1px solid'+buttonStyle?.color}\" (click)=\"changePage()\" [id]=\"sectionId\"></div>\r\n    </div>\r\n    <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n      <button mat-stroked-button class=\"navbar-button dropdown-toggle\" [simpoColor]=\"bgColor\" style=\"border: none; white-space: nowrap;\"\r\n      [ngStyle]=\"{color:buttonStyle?.color}\" type=\"button\"\r\n        id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n        {{buttonData?.label}}\r\n      </button>\r\n      <div [ngStyle]=\"{'border-bottom':'1px solid'+buttonStyle?.color}\" [id]=\"sectionId\"></div>\r\n      <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n        <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"selectedStyle === HeaderButtonStyle.ROUND_SUBTLE\">\r\n    <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n      style=\"border: none;width: max-content!important; border-radius: 8px;\"\r\n      [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" (click)=\"changePage()\"\r\n      [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n    <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n      <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n        style=\"border: none;width: max-content!important; border-radius: 8px;\"\r\n        [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" type=\"button\"\r\n        id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n        {{buttonData?.label}}\r\n      </button>\r\n      <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n        <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"selectedStyle === HeaderButtonStyle.ROUND_BOLD\">\r\n    <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n      style=\"border: none;width: max-content!important; border-radius: 8px;\"\r\n      [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" (click)=\"changePage()\"\r\n      [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n    <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n      <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n        style=\"border: none;width: max-content!important; border-radius: 8px;\"\r\n        [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" type=\"button\"\r\n        id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n        {{buttonData?.label}}\r\n      </button>\r\n      <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n        <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"selectedStyle === HeaderButtonStyle.SQUARE_SUBTLE\">\r\n    <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n      style=\"border: none;border-radius: 0px !important;width: max-content!important;\"\r\n      [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" (click)=\"changePage()\"\r\n      [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n    <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n      <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n        style=\"border: none;border-radius: 0px !important;width: max-content!important;\"\r\n        [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" type=\"button\"\r\n        id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n        {{buttonData?.label}}\r\n      </button>\r\n      <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n        <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"selectedStyle === HeaderButtonStyle.SQUARE_BOLD\">\r\n    <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button\" *ngIf=\"!buttonData?.folder\"\r\n      style=\"border: none;width: max-content!important; border-radius: 0px !important;\"\r\n      [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" (click)=\"changePage()\"\r\n      [id]=\"sectionId\">{{buttonData?.label}}</button>\r\n    <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n      <button mat-stroked-button class=\"primary btn-lg px-4 me-md-2 navbar-button dropdown-toggle\"\r\n      style=\"border: none;width: max-content!important; border-radius: 0px !important;\"\r\n      [ngStyle]=\"{color:buttonStyle?.boldColor,'background-color':buttonStyle?.backgroundColor}\" type=\"button\"\r\n        id=\"headerDropdownButton\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n        {{buttonData?.label}}\r\n      </button>\r\n      <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n        <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <!-- <button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\">{{buttonData?.content?.label}}</button> -->\r\n\r\n</div>\r\n<div>\r\n  <!-- <button mat-stroked-button style=\"border: none;width: max-content!important;\" *ngIf=\"!buttonData?.folder\" [simpoColor]=\"buttonData?.status ? '' : bgColor\"\r\n    (click)=\"changePage()\" [id]=\"sectionId\" [style.color]=\"buttonData?.status ? accentColor : ''\"  [style.fontWeight]=\"buttonData?.status ? '700' : ''\"\r\n    class=\"status-navbar-button\">{{buttonData?.label}}</button> -->\r\n    <button c *ngIf=\"!buttonData?.folder\" [simpoColor]=\"buttonData?.status ? '' : bgColor\"\r\n    (click)=\"changePage()\" [id]=\"sectionId\" [style.color]=\"buttonData?.status ? accentColor : ''\"  [style.fontWeight]=\"buttonData?.status ? '700' : ''\"\r\n    class=\"status-navbar-button button\">\r\n    {{buttonData?.label}}\r\n    </button>\r\n  <div class=\"dropdown\" *ngIf=\"buttonData?.folder && (buttonData?.folder?.pages?.length || 0) > 0\">\r\n    <button class=\"status-navbar-button not-selected-dropdown dropdown-toggle\" [style.fontWeight]=\"buttonData?.status ? '700' : ''\" [simpoColor]=\"buttonData?.status ? '' : bgColor\"\r\n      style=\"border: none;width: max-content!important;\" [style.color]=\"buttonData?.status ? accentColor : ''\" type=\"button\" id=\"headerDropdownButton\"\r\n      data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n      {{buttonData?.label}}\r\n    </button>\r\n    <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdownButton\">\r\n      <a class=\"dropdown-item\" *ngFor=\"let page of buttonData?.folder?.pages\" (click)=\"changePage(page)\">{{page.label}}</a>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".navbar-button,.status-navbar-button{font-size:14px!important;white-space:nowrap}@media only screen and (max-width : 475px){.navbar-button{width:100%!important;display:flex;justify-content:flex-start}.status-navbar-button{color:#000!important;display:flex;justify-content:flex-start}.dropdown{padding-left:10px}.dropdown-toggle{display:flex;align-items:center;gap:10px}}.not-selected-dropdown{background:transparent;font-size:16px!important}.dropdown-item{font-size:15px;padding:10px;font-family:Roboto,sans-serif;border-bottom:1px solid #dee2e6}.dropdown-menu{top:40px;border:none;border-radius:10px}.button{border:none;background:none;outline:none;font-size:16px!important}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { buttonData: [{
                 type: Input
             }], buttonStyle: [{
@@ -11697,11 +11737,11 @@ class LogoShowcaseComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LogoShowcaseComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LogoShowcaseComponent, isStandalone: true, selector: "simpo-logo-showcase", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"styles?.showCaseType==='Grid'\">\r\n    <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\r\n        [attr.style]=\"customClass\">\r\n        <div class=\"py-3 w-100 \" [simpoBackground]=\"styles?.background\"\r\n            [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n            #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n            [spacingHorizontal]=\"stylesLayout\">\r\n            <div class=\"row g-5 gridtext\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n                [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n                *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\r\n                [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\r\n\r\n                <div class=\"col-5 gridimg w-full mb-20 content-side\" [id]=\"data?.id\"\r\n                    [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n                    <div *ngFor=\"let item of content?.inputText\">\r\n                        <ng-container *ngIf=\"edit || item.value\">\r\n                            <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n                        <div *ngFor=\"let button of data?.action?.buttons\">\r\n                            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                                [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n                                [color]=\"data?.styles?.background?.accentColor\"\r\n                                [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-wrap flex-1 width-max\">\r\n                    <div class=\"slider flex overflow-hidden w-full\">\r\n                        <div class=\"slider-track\" *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\r\n                            [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n                                [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n                                *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n                                <img loading=\"lazy\" [src]=\"item?.icon?.url\"\r\n                                    *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n                                    [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n                                    [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n                                <ng-container\r\n                                    *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n                                    <div [id]=\"data?.id\"\r\n                                        [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        class=\"logo-img d-flex justify-content-center align-items-center\"\r\n                                        [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n                                        [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n                                        [showIcon]=\"content?.display?.showIcon\">\r\n                                        <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n                                            [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n                                            [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n                                    </div>\r\n                                </ng-container>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"slider-track w-full\"\r\n                            *ngIf=\"!content?.display?.showIcon && content?.display?.showText\"\r\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\n                                *ngFor=\"let item of content?.listItem?.data\"\r\n                                [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\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                        <div class=\"slider-track w-full\"\r\n                            *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\r\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides d-flex\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n                                *ngFor=\"let item of content?.listItem?.data\"\r\n                                [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic','flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\r\n                                <img loading=\"lazy\" [src]=\"item?.icon?.url\"\r\n                                    *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n                                    [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n                                    [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n                                <ng-container\r\n                                    *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n                                    <div [id]=\"data?.id\"\r\n                                        [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        class=\"logo-img d-flex justify-content-center align-items-center\"\r\n                                        [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n                                        [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n                                        [showIcon]=\"content?.display?.showIcon\">\r\n                                        <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n                                            [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n                                            [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n                                    </div>\r\n                                </ng-container>\r\n\r\n                                <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n                *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\r\n                <div class=\"px-5 mb-20 content-side\" [id]=\"data?.id\"\r\n                    [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n                    <div *ngFor=\"let item of content?.inputText\">\r\n                        <ng-container *ngIf=\"edit || item.value\">\r\n                            <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n                        <div *ngFor=\"let button of data?.action?.buttons\">\r\n                            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                                [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n                                [color]=\"data?.styles?.background?.accentColor\"\r\n                                [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\">\r\n                    <!-- flex flex-wrap items-center w-full gap-2 justify-center -->\r\n                    <div class=\"slider flex overflow-hidden w-full\">\r\n                        <div class=\"slider-track w-full\"\r\n                            *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\r\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n                                [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\r\n                                *ngFor=\"let item of content?.listItem?.data; let i = index\">\r\n                                <img loading=\"lazy\" [src]=\"item?.icon?.url\"\r\n                                    *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n                                    [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n                                    [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n                                <ng-container\r\n                                    *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n                                    <div [id]=\"data?.id\"\r\n                                        [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        class=\"logo-img d-flex justify-content-center align-items-center\"\r\n                                        [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n                                        [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n                                        [showIcon]=\"content?.display?.showIcon\">\r\n                                        <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n                                            [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n                                            [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n                                    </div>\r\n                                </ng-container>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"slider-track w-full\"\r\n                            *ngIf=\"!content?.display?.showIcon && content?.display?.showText\"\r\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\n                                [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\r\n                                *ngFor=\"let item of content?.listItem?.data\">\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                        <div class=\"slider-track w-full\"\r\n                            *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\r\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides d-flex align-items-center\" [simpoCorner]=\"styles?.corners\"\r\n                                *ngFor=\"let item of content?.listItem?.data\" [id]=\"data?.id\"\r\n                                [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\r\n                                <img loading=\"lazy\" [src]=\"item?.icon?.url\"\r\n                                    *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n                                    [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n                                    [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n                                <ng-container\r\n                                    *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n                                    <div [id]=\"data?.id\"\r\n                                        [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        class=\"logo-img d-flex justify-content-center align-items-center\"\r\n                                        [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n                                        [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n                                        [showIcon]=\"content?.display?.showIcon\">\r\n                                        <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n                                            [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n                                            [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n                                    </div>\r\n                                </ng-container>\r\n                                <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText[0].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        </div>\r\n        <ng-container *ngIf=\"styles?.devider?.display\">\r\n            <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n                [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n        </ng-container>\r\n        <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n            <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n        </div>\r\n        <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n            <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"styles?.showCaseType==='Carousal'\">\r\n    <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n\r\n        <div class=\"w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n            [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\"\r\n            [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [simpoBackground]=\"styles?.background\">\r\n            <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n                [simpoLayout]=\"styles?.layout\">\r\n                <div class=\"mainsec content-side\" [id]=\"data?.id\"\r\n                    [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n\r\n                    <div *ngFor=\"let item of content?.inputText\">\r\n                        <ng-container *ngIf=\"edit || item.value\">\r\n                            <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div *ngIf=\"data?.action && data?.action?.display\" class=\"gap-2 d-md-flex mt-15\" [ngClass]=\"[\r\n                          styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n                          styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n                          styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n                      ]\">\r\n                        <div *ngFor=\"let button of data?.action?.buttons\">\r\n                            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                                [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n                                [color]=\"data?.styles?.background?.accentColor\"\r\n                                [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div [ngClass]=\"{\r\n                      'fullwidth flex-1 inline-edit  ': styles?.fullWidth,\r\n                      'nofullwidth flex-1 inline-edit ': !styles?.fullWidth\r\n                    }\">\r\n                        <div class=\"masking\">\r\n\r\n                            <div class=\"slider animation \" [style.animationDuration]=\"animationDuration\"\r\n                                [style.animationDirection]=\"animationDirection\">\r\n                                <div class=\"slider-track2\"\r\n                                    *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\r\n                                    [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\r\n                                    <div class=\"slides2\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n                                        [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\r\n                                        *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n                                        <img loading=\"lazy\" [src]=\"item?.icon?.url\"\r\n                                            *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n                                            [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                            [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                            [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\"\r\n                                            [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n                                            [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n                                        <ng-container\r\n                                            *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n                                            <div [id]=\"data?.id\"\r\n                                                [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                                [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                                class=\"logo-img d-flex justify-content-center align-items-center\"\r\n                                                [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n                                                [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n                                                [sectionId]=\"data?.id\" [showIcon]=\"content?.display?.showIcon\">\r\n                                                <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n                                                    [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n                                                    [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n                                            </div>\r\n                                        </ng-container>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"slider-track2\"\r\n                                    *ngIf=\"content?.display?.showText && !content?.display?.showIcon\"\r\n                                    [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                                    <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\n                                        [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\r\n                                        *ngFor=\"let item of content?.listItem?.data\">\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                                <div class=\"slider-track2 d-flex w-full\"\r\n                                    *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\r\n                                    [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                                    <div class=\"slides d-flex\" [simpoCorner]=\"styles?.corners\"\r\n                                        *ngFor=\"let item of content?.listItem?.data\" [id]=\"data?.id\"\r\n                                        [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic',  'align-items-start': styles?.layout?.align === 'left', 'align-items-center': styles?.layout?.align === 'center', 'align-items-end': styles?.layout?.align === 'right' , 'flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\r\n                                        <img loading=\"lazy\" [src]=\"item?.icon?.url\"\r\n                                            *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n                                            [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                            [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                            [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\"\r\n                                            [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n                                            [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n                                        <ng-container\r\n                                            *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n                                            <div [id]=\"data?.id\"\r\n                                                [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                                [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                                class=\"logo-img d-flex justify-content-center align-items-center\"\r\n                                                [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n                                                [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n                                                [sectionId]=\"data?.id\" [showIcon]=\"content?.display?.showIcon\">\r\n                                                <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n                                                    [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n                                                    [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n                                            </div>\r\n                                        </ng-container>\r\n                                        <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText[0].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\r\n\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <ng-container *ngIf=\"styles?.devider?.display\">\r\n            <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n                [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n        </ng-container>\r\n        <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n            <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n        </div>\r\n        <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n            <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".masking{mask:linear-gradient(90deg,transparent,white 5%,white 95%,transparent);overflow:hidden;width:100%}.sliderdad{width:100%;display:flex}@media (min-width: 860px){.nofullwidth{overflow:hidden}}.slider-track2{min-width:max-content;translate:none;rotate:none;scale:none;gap:1rem;justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex}.mainsec{gap:2rem;flex-direction:column;display:flex}.slider-track2.logotype-boxed{gap:1rem}.slider-track2.logotype-basic{gap:5rem}.slides2.logotype-boxed{padding:1.5rem 1.25rem;--tw-bg-opacity: .05;flex-shrink:0;width:auto;height:auto;display:flex;position:relative;box-shadow:#0000002e 0 2px 4px;margin:10px 0}.slides2.logotype-basic{flex-shrink:0;width:auto;height:auto;display:flex;position:relative}.slides2.img{height:100%;max-width:100%;border-style:solid}@keyframes scrollLeft{0%{transform:translateZ(0)}to{transform:translate3d(-100%,0,0)}}@keyframes scrollRight{0%{transform:translate3d(-100%,0,0)}to{transform:translateZ(0)}}.animation{animation:scrollLeft linear infinite}.slider-track{justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex;gap:10px}.slider-track.logotype-basic{gap:5rem}.slider-track.logotype-boxed{gap:1rem}.slides.logotype-basic{flex-shrink:0;width:auto;min-height:5rem;height:auto;display:flex;position:relative}.slides.logotype-boxed{padding:1.5rem .625rem;--tw-bg-opacity: .05;box-shadow:#0000002e 0 2px 4px;width:auto;height:auto;display:flex;align-items:center;margin:10px 0}.width-max{width:max-content;max-width:50%}.slides.texttype-boxed{padding:1.5rem .625rem;justify-content:center;width:auto;display:flex;position:relative;box-shadow:#0000002e 0 2px 4px;margin:10px 0;align-items:center}.slides.texttype-boxed:hover{--tw-bg-opacity: .05;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.slides.img{border-style:solid;max-width:100%;height:100%}@media only screen and (max-width: 500px){.col-xxl-8{padding-left:0!important;padding-right:0!important}.mainsec{padding-right:2rem!important;padding-left:2rem!important}.col-7{min-width:50%;width:100%;max-width:100%}.col-5{width:100%}.slides img{width:88%}}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-20{margin-top:20px}.mb-20{margin-bottom:20px}.row{margin-left:0;margin-right:0}\n"], dependencies: [{ kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: IconDirectiveDirective, selector: "[simpoIconDirective]", inputs: ["simpoIconDirective", "iconId"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LogoShowcaseComponent, isStandalone: true, selector: "simpo-logo-showcase", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"styles?.showCaseType==='Grid'\">\r\n    <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\r\n        [attr.style]=\"customClass\">\r\n        <div class=\"py-3 w-100 \" [simpoBackground]=\"styles?.background\"\r\n            [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n            #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n            [spacingHorizontal]=\"stylesLayout\">\r\n            <div class=\"row g-5 gridtext\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n                [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n                *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\r\n                [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\r\n\r\n                <div class=\"col-5 gridimg w-full mb-20 content-side\" [id]=\"data?.id\"\r\n                    [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n                    <div *ngFor=\"let item of content?.inputText\">\r\n                        <ng-container *ngIf=\"edit || item.value\">\r\n                            <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n                        <div *ngFor=\"let button of data?.action?.buttons\">\r\n                            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                                [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n                                [color]=\"data?.styles?.background?.accentColor\"\r\n                                [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-wrap flex-1 width-max\">\r\n                    <div class=\"slider flex overflow-hidden w-full\">\r\n                        <div class=\"slider-track\" *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\r\n                            [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n                                [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n                                *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n                                <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n                                    *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n                                    [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n                                    [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n                                <ng-container\r\n                                    *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n                                    <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n                                        [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        class=\"logo-img d-flex justify-content-center align-items-center\"\r\n                                        [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n                                        [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n                                        [showIcon]=\"content?.display?.showIcon\">\r\n                                        <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n                                            [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n                                            [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n                                    </div>\r\n                                </ng-container>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"slider-track w-full\"\r\n                            *ngIf=\"!content?.display?.showIcon && content?.display?.showText\"\r\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\n                                *ngFor=\"let item of content?.listItem?.data\"\r\n                                [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\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                        <div class=\"slider-track w-full\"\r\n                            *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\r\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides d-flex\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n                                *ngFor=\"let item of content?.listItem?.data\"\r\n                                [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic','flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\r\n                                <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n                                    *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n                                    [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n                                    [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n                                <ng-container\r\n                                    *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n                                    <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n                                        [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        class=\"logo-img d-flex justify-content-center align-items-center\"\r\n                                        [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n                                        [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n                                        [showIcon]=\"content?.display?.showIcon\">\r\n                                        <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n                                            [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n                                            [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n                                    </div>\r\n                                </ng-container>\r\n\r\n                                <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n                *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\r\n                <div class=\"px-5 mb-20 content-side\" [id]=\"data?.id\"\r\n                    [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n                    <div *ngFor=\"let item of content?.inputText\">\r\n                        <ng-container *ngIf=\"edit || item.value\">\r\n                            <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n                        <div *ngFor=\"let button of data?.action?.buttons\">\r\n                            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                                [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n                                [color]=\"data?.styles?.background?.accentColor\"\r\n                                [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\">\r\n                    <!-- flex flex-wrap items-center w-full gap-2 justify-center -->\r\n                    <div class=\"slider flex overflow-hidden w-full\">\r\n                        <div class=\"slider-track w-full\"\r\n                            *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\r\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n                                [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\r\n                                *ngFor=\"let item of content?.listItem?.data; let i = index\">\r\n                                <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n                                    *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n                                    [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n                                    [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n                                <ng-container\r\n                                    *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n                                    <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n                                        [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        class=\"logo-img d-flex justify-content-center align-items-center\"\r\n                                        [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n                                        [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n                                        [showIcon]=\"content?.display?.showIcon\">\r\n                                        <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n                                            [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n                                            [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n                                    </div>\r\n                                </ng-container>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"slider-track w-full\"\r\n                            *ngIf=\"!content?.display?.showIcon && content?.display?.showText\"\r\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\n                                [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\r\n                                *ngFor=\"let item of content?.listItem?.data\">\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                        <div class=\"slider-track w-full\"\r\n                            *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\r\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides d-flex align-items-center\" [simpoCorner]=\"styles?.corners\"\r\n                                *ngFor=\"let item of content?.listItem?.data\" [id]=\"data?.id\"\r\n                                [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\r\n                                <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n                                    *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n                                    [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n                                    [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n                                <ng-container\r\n                                    *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n                                    <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n                                        [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        class=\"logo-img d-flex justify-content-center align-items-center\"\r\n                                        [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n                                        [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n                                        [showIcon]=\"content?.display?.showIcon\">\r\n                                        <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n                                            [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n                                            [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n                                    </div>\r\n                                </ng-container>\r\n                                <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText[0].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        </div>\r\n        <ng-container *ngIf=\"styles?.devider?.display\">\r\n            <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n                [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n        </ng-container>\r\n        <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n            <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n        </div>\r\n        <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n            <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"styles?.showCaseType==='Carousal'\">\r\n    <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n\r\n        <div class=\"w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n            [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\"\r\n            [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [simpoBackground]=\"styles?.background\">\r\n            <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n                [simpoLayout]=\"styles?.layout\">\r\n                <div class=\"mainsec content-side\" [id]=\"data?.id\"\r\n                    [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n\r\n                    <div *ngFor=\"let item of content?.inputText\">\r\n                        <ng-container *ngIf=\"edit || item.value\">\r\n                            <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div *ngIf=\"data?.action && data?.action?.display\" class=\"gap-2 d-md-flex mt-15\" [ngClass]=\"[\r\n                          styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n                          styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n                          styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n                      ]\">\r\n                        <div *ngFor=\"let button of data?.action?.buttons\">\r\n                            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                                [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n                                [color]=\"data?.styles?.background?.accentColor\"\r\n                                [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div [ngClass]=\"{\r\n                      'fullwidth flex-1 inline-edit  ': styles?.fullWidth,\r\n                      'nofullwidth flex-1 inline-edit ': !styles?.fullWidth\r\n                    }\">\r\n                        <div class=\"masking\">\r\n\r\n                            <div class=\"slider animation \" [style.animationDuration]=\"animationDuration\"\r\n                                [style.animationDirection]=\"animationDirection\">\r\n                                <div class=\"slider-track2\"\r\n                                    *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\r\n                                    [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\r\n                                    <div class=\"slides2\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n                                        [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\r\n                                        *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n                                        <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n                                            *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n                                            [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                            [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                            [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\"\r\n                                            [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n                                            [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n                                        <ng-container\r\n                                            *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n                                            <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n                                                [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                                [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                                class=\"logo-img d-flex justify-content-center align-items-center\"\r\n                                                [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n                                                [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n                                                [sectionId]=\"data?.id\" [showIcon]=\"content?.display?.showIcon\">\r\n                                                <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n                                                    [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n                                                    [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n                                            </div>\r\n                                        </ng-container>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"slider-track2\"\r\n                                    *ngIf=\"content?.display?.showText && !content?.display?.showIcon\"\r\n                                    [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                                    <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\n                                        [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\r\n                                        *ngFor=\"let item of content?.listItem?.data\">\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                                <div class=\"slider-track2 d-flex w-full\"\r\n                                    *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\r\n                                    [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                                    <div class=\"slides d-flex\" [simpoCorner]=\"styles?.corners\"\r\n                                        *ngFor=\"let item of content?.listItem?.data\" [id]=\"data?.id\"\r\n                                        [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic',  'align-items-start': styles?.layout?.align === 'left', 'align-items-center': styles?.layout?.align === 'center', 'align-items-end': styles?.layout?.align === 'right' , 'flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\r\n                                        <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n                                            *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n                                            [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                            [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                            [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\"\r\n                                            [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n                                            [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n                                        <ng-container\r\n                                            *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n                                            <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n                                                [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                                [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                                class=\"logo-img d-flex justify-content-center align-items-center\"\r\n                                                [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n                                                [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n                                                [sectionId]=\"data?.id\" [showIcon]=\"content?.display?.showIcon\">\r\n                                                <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n                                                    [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n                                                    [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n                                            </div>\r\n                                        </ng-container>\r\n                                        <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText[0].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\r\n\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <ng-container *ngIf=\"styles?.devider?.display\">\r\n            <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n                [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n        </ng-container>\r\n        <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n            <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n        </div>\r\n        <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n            <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".masking{mask:linear-gradient(90deg,transparent,white 5%,white 95%,transparent);overflow:hidden;width:100%}.sliderdad{width:100%;display:flex}@media (min-width: 860px){.nofullwidth{overflow:hidden}}.slider-track2{min-width:max-content;translate:none;rotate:none;scale:none;gap:1rem;justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex}.mainsec{gap:2rem;flex-direction:column;display:flex}.slider-track2.logotype-boxed{gap:1rem}.slider-track2.logotype-basic{gap:5rem}.slides2.logotype-boxed{padding:1.5rem 1.25rem;--tw-bg-opacity: .05;flex-shrink:0;width:auto;height:auto;display:flex;position:relative;box-shadow:#0000002e 0 2px 4px;margin:10px 5px}.slides2.logotype-basic{flex-shrink:0;width:auto;height:auto;display:flex;position:relative}.slides2.img{height:100%;max-width:100%;border-style:solid}@keyframes scrollLeft{0%{transform:translateZ(0)}to{transform:translate3d(-100%,0,0)}}@keyframes scrollRight{0%{transform:translate3d(-100%,0,0)}to{transform:translateZ(0)}}.animation{animation:scrollLeft linear infinite}.slider-track{justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex;gap:10px}.slider-track.logotype-basic{gap:5rem}.slider-track.logotype-boxed{gap:1rem}.slides.logotype-basic{flex-shrink:0;width:auto;min-height:5rem;height:auto;display:flex;position:relative}.slides.logotype-boxed{padding:1.5rem .625rem;--tw-bg-opacity: .05;box-shadow:#0000002e 0 2px 4px;width:auto;height:auto;display:flex;align-items:center;margin:10px 5px}.width-max{width:max-content;max-width:50%}.slides.texttype-boxed{padding:1.5rem .625rem;justify-content:center;width:auto;display:flex;position:relative;box-shadow:#0000002e 0 2px 4px;margin:10px 5px;align-items:center}.slides.texttype-boxed:hover{--tw-bg-opacity: .05;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.slides.img{border-style:solid;max-width:100%;height:100%}@media only screen and (max-width: 500px){.col-xxl-8{padding-left:0!important;padding-right:0!important}.mainsec{padding-right:2rem!important;padding-left:2rem!important}.col-7{min-width:50%;width:100%;max-width:100%}.col-5{width:100%}.slides img{width:88%}}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-20{margin-top:20px}.mb-20{margin-bottom:20px}.row{margin-left:0;margin-right:0}\n"], dependencies: [{ kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: IconDirectiveDirective, selector: "[simpoIconDirective]", inputs: ["simpoIconDirective", "iconId"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LogoShowcaseComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-logo-showcase', standalone: true, imports: [SimpoButtonComponent, SimpoElementsModule, SanitizeHtmlPipe, TextEditorComponent, SimpoComponentModule, CommonModule, MatGridListModule, AnimationDirective, BackgroundDirective, ContentFitDirective, BorderDirective, BannerContentFitDirective, ButtonDirectiveDirective, ColumnDirectiveDirective, ContainerFitDirective, CornerDirective, simpoConetenAlignmentDirective, SimpoFooterLayoutDirective, HoverDirective, ImageDirectiveDirective, OverlayDirective, PositionLayoutDirectiveDirective, TextBackgroundDirectiveDirective, SpacingHorizontalDirective, ObjectPositionDirective, ImageEditorDirective, IconDirectiveDirective], template: "<div *ngIf=\"styles?.showCaseType==='Grid'\">\r\n    <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\r\n        [attr.style]=\"customClass\">\r\n        <div class=\"py-3 w-100 \" [simpoBackground]=\"styles?.background\"\r\n            [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n            #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n            [spacingHorizontal]=\"stylesLayout\">\r\n            <div class=\"row g-5 gridtext\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n                [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n                *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\r\n                [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\r\n\r\n                <div class=\"col-5 gridimg w-full mb-20 content-side\" [id]=\"data?.id\"\r\n                    [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n                    <div *ngFor=\"let item of content?.inputText\">\r\n                        <ng-container *ngIf=\"edit || item.value\">\r\n                            <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n                        <div *ngFor=\"let button of data?.action?.buttons\">\r\n                            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                                [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n                                [color]=\"data?.styles?.background?.accentColor\"\r\n                                [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-wrap flex-1 width-max\">\r\n                    <div class=\"slider flex overflow-hidden w-full\">\r\n                        <div class=\"slider-track\" *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\r\n                            [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n                                [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n                                *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n                                <img loading=\"lazy\" [src]=\"item?.icon?.url\"\r\n                                    *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n                                    [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n                                    [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n                                <ng-container\r\n                                    *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n                                    <div [id]=\"data?.id\"\r\n                                        [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        class=\"logo-img d-flex justify-content-center align-items-center\"\r\n                                        [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n                                        [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n                                        [showIcon]=\"content?.display?.showIcon\">\r\n                                        <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n                                            [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n                                            [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n                                    </div>\r\n                                </ng-container>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"slider-track w-full\"\r\n                            *ngIf=\"!content?.display?.showIcon && content?.display?.showText\"\r\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\n                                *ngFor=\"let item of content?.listItem?.data\"\r\n                                [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\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                        <div class=\"slider-track w-full\"\r\n                            *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\r\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides d-flex\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n                                *ngFor=\"let item of content?.listItem?.data\"\r\n                                [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic','flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\r\n                                <img loading=\"lazy\" [src]=\"item?.icon?.url\"\r\n                                    *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n                                    [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n                                    [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n                                <ng-container\r\n                                    *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n                                    <div [id]=\"data?.id\"\r\n                                        [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        class=\"logo-img d-flex justify-content-center align-items-center\"\r\n                                        [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n                                        [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n                                        [showIcon]=\"content?.display?.showIcon\">\r\n                                        <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n                                            [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n                                            [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n                                    </div>\r\n                                </ng-container>\r\n\r\n                                <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n                *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\r\n                <div class=\"px-5 mb-20 content-side\" [id]=\"data?.id\"\r\n                    [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n                    <div *ngFor=\"let item of content?.inputText\">\r\n                        <ng-container *ngIf=\"edit || item.value\">\r\n                            <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n                        <div *ngFor=\"let button of data?.action?.buttons\">\r\n                            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                                [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n                                [color]=\"data?.styles?.background?.accentColor\"\r\n                                [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\">\r\n                    <!-- flex flex-wrap items-center w-full gap-2 justify-center -->\r\n                    <div class=\"slider flex overflow-hidden w-full\">\r\n                        <div class=\"slider-track w-full\"\r\n                            *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\r\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n                                [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\r\n                                *ngFor=\"let item of content?.listItem?.data; let i = index\">\r\n                                <img loading=\"lazy\" [src]=\"item?.icon?.url\"\r\n                                    *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n                                    [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n                                    [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n                                <ng-container\r\n                                    *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n                                    <div [id]=\"data?.id\"\r\n                                        [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        class=\"logo-img d-flex justify-content-center align-items-center\"\r\n                                        [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n                                        [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n                                        [showIcon]=\"content?.display?.showIcon\">\r\n                                        <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n                                            [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n                                            [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n                                    </div>\r\n                                </ng-container>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"slider-track w-full\"\r\n                            *ngIf=\"!content?.display?.showIcon && content?.display?.showText\"\r\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\n                                [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\r\n                                *ngFor=\"let item of content?.listItem?.data\">\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                        <div class=\"slider-track w-full\"\r\n                            *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\r\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides d-flex align-items-center\" [simpoCorner]=\"styles?.corners\"\r\n                                *ngFor=\"let item of content?.listItem?.data\" [id]=\"data?.id\"\r\n                                [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\r\n                                <img loading=\"lazy\" [src]=\"item?.icon?.url\"\r\n                                    *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n                                    [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n                                    [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n                                <ng-container\r\n                                    *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n                                    <div [id]=\"data?.id\"\r\n                                        [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        class=\"logo-img d-flex justify-content-center align-items-center\"\r\n                                        [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n                                        [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n                                        [showIcon]=\"content?.display?.showIcon\">\r\n                                        <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n                                            [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n                                            [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n                                    </div>\r\n                                </ng-container>\r\n                                <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText[0].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        </div>\r\n        <ng-container *ngIf=\"styles?.devider?.display\">\r\n            <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n                [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n        </ng-container>\r\n        <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n            <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n        </div>\r\n        <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n            <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"styles?.showCaseType==='Carousal'\">\r\n    <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n\r\n        <div class=\"w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n            [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\"\r\n            [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [simpoBackground]=\"styles?.background\">\r\n            <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n                [simpoLayout]=\"styles?.layout\">\r\n                <div class=\"mainsec content-side\" [id]=\"data?.id\"\r\n                    [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n\r\n                    <div *ngFor=\"let item of content?.inputText\">\r\n                        <ng-container *ngIf=\"edit || item.value\">\r\n                            <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div *ngIf=\"data?.action && data?.action?.display\" class=\"gap-2 d-md-flex mt-15\" [ngClass]=\"[\r\n                          styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n                          styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n                          styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n                      ]\">\r\n                        <div *ngFor=\"let button of data?.action?.buttons\">\r\n                            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                                [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n                                [color]=\"data?.styles?.background?.accentColor\"\r\n                                [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div [ngClass]=\"{\r\n                      'fullwidth flex-1 inline-edit  ': styles?.fullWidth,\r\n                      'nofullwidth flex-1 inline-edit ': !styles?.fullWidth\r\n                    }\">\r\n                        <div class=\"masking\">\r\n\r\n                            <div class=\"slider animation \" [style.animationDuration]=\"animationDuration\"\r\n                                [style.animationDirection]=\"animationDirection\">\r\n                                <div class=\"slider-track2\"\r\n                                    *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\r\n                                    [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\r\n                                    <div class=\"slides2\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n                                        [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\r\n                                        *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n                                        <img loading=\"lazy\" [src]=\"item?.icon?.url\"\r\n                                            *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n                                            [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                            [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                            [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\"\r\n                                            [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n                                            [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n                                        <ng-container\r\n                                            *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n                                            <div [id]=\"data?.id\"\r\n                                                [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                                [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                                class=\"logo-img d-flex justify-content-center align-items-center\"\r\n                                                [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n                                                [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n                                                [sectionId]=\"data?.id\" [showIcon]=\"content?.display?.showIcon\">\r\n                                                <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n                                                    [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n                                                    [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n                                            </div>\r\n                                        </ng-container>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"slider-track2\"\r\n                                    *ngIf=\"content?.display?.showText && !content?.display?.showIcon\"\r\n                                    [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                                    <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\n                                        [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\r\n                                        *ngFor=\"let item of content?.listItem?.data\">\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                                <div class=\"slider-track2 d-flex w-full\"\r\n                                    *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\r\n                                    [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                                    <div class=\"slides d-flex\" [simpoCorner]=\"styles?.corners\"\r\n                                        *ngFor=\"let item of content?.listItem?.data\" [id]=\"data?.id\"\r\n                                        [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic',  'align-items-start': styles?.layout?.align === 'left', 'align-items-center': styles?.layout?.align === 'center', 'align-items-end': styles?.layout?.align === 'right' , 'flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\r\n                                        <img loading=\"lazy\" [src]=\"item?.icon?.url\"\r\n                                            *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n                                            [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                            [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                            [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\"\r\n                                            [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n                                            [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n                                        <ng-container\r\n                                            *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n                                            <div [id]=\"data?.id\"\r\n                                                [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                                [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                                class=\"logo-img d-flex justify-content-center align-items-center\"\r\n                                                [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n                                                [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n                                                [sectionId]=\"data?.id\" [showIcon]=\"content?.display?.showIcon\">\r\n                                                <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n                                                    [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n                                                    [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n                                            </div>\r\n                                        </ng-container>\r\n                                        <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText[0].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\r\n\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <ng-container *ngIf=\"styles?.devider?.display\">\r\n            <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n                [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n        </ng-container>\r\n        <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n            <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n        </div>\r\n        <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n            <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".masking{mask:linear-gradient(90deg,transparent,white 5%,white 95%,transparent);overflow:hidden;width:100%}.sliderdad{width:100%;display:flex}@media (min-width: 860px){.nofullwidth{overflow:hidden}}.slider-track2{min-width:max-content;translate:none;rotate:none;scale:none;gap:1rem;justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex}.mainsec{gap:2rem;flex-direction:column;display:flex}.slider-track2.logotype-boxed{gap:1rem}.slider-track2.logotype-basic{gap:5rem}.slides2.logotype-boxed{padding:1.5rem 1.25rem;--tw-bg-opacity: .05;flex-shrink:0;width:auto;height:auto;display:flex;position:relative;box-shadow:#0000002e 0 2px 4px;margin:10px 0}.slides2.logotype-basic{flex-shrink:0;width:auto;height:auto;display:flex;position:relative}.slides2.img{height:100%;max-width:100%;border-style:solid}@keyframes scrollLeft{0%{transform:translateZ(0)}to{transform:translate3d(-100%,0,0)}}@keyframes scrollRight{0%{transform:translate3d(-100%,0,0)}to{transform:translateZ(0)}}.animation{animation:scrollLeft linear infinite}.slider-track{justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex;gap:10px}.slider-track.logotype-basic{gap:5rem}.slider-track.logotype-boxed{gap:1rem}.slides.logotype-basic{flex-shrink:0;width:auto;min-height:5rem;height:auto;display:flex;position:relative}.slides.logotype-boxed{padding:1.5rem .625rem;--tw-bg-opacity: .05;box-shadow:#0000002e 0 2px 4px;width:auto;height:auto;display:flex;align-items:center;margin:10px 0}.width-max{width:max-content;max-width:50%}.slides.texttype-boxed{padding:1.5rem .625rem;justify-content:center;width:auto;display:flex;position:relative;box-shadow:#0000002e 0 2px 4px;margin:10px 0;align-items:center}.slides.texttype-boxed:hover{--tw-bg-opacity: .05;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.slides.img{border-style:solid;max-width:100%;height:100%}@media only screen and (max-width: 500px){.col-xxl-8{padding-left:0!important;padding-right:0!important}.mainsec{padding-right:2rem!important;padding-left:2rem!important}.col-7{min-width:50%;width:100%;max-width:100%}.col-5{width:100%}.slides img{width:88%}}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-20{margin-top:20px}.mb-20{margin-bottom:20px}.row{margin-left:0;margin-right:0}\n"] }]
+            args: [{ selector: 'simpo-logo-showcase', standalone: true, imports: [SimpoButtonComponent, SimpoElementsModule, SanitizeHtmlPipe, TextEditorComponent, SimpoComponentModule, CommonModule, MatGridListModule, AnimationDirective, BackgroundDirective, ContentFitDirective, BorderDirective, BannerContentFitDirective, ButtonDirectiveDirective, ColumnDirectiveDirective, ContainerFitDirective, CornerDirective, simpoConetenAlignmentDirective, SimpoFooterLayoutDirective, HoverDirective, ImageDirectiveDirective, OverlayDirective, PositionLayoutDirectiveDirective, TextBackgroundDirectiveDirective, SpacingHorizontalDirective, ObjectPositionDirective, ImageEditorDirective, IconDirectiveDirective], template: "<div *ngIf=\"styles?.showCaseType==='Grid'\">\r\n    <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\r\n        [attr.style]=\"customClass\">\r\n        <div class=\"py-3 w-100 \" [simpoBackground]=\"styles?.background\"\r\n            [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n            #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n            [spacingHorizontal]=\"stylesLayout\">\r\n            <div class=\"row g-5 gridtext\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n                [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n                *ngIf=\"styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'\"\r\n                [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\">\r\n\r\n                <div class=\"col-5 gridimg w-full mb-20 content-side\" [id]=\"data?.id\"\r\n                    [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n                    <div *ngFor=\"let item of content?.inputText\">\r\n                        <ng-container *ngIf=\"edit || item.value\">\r\n                            <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n                        <div *ngFor=\"let button of data?.action?.buttons\">\r\n                            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                                [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n                                [color]=\"data?.styles?.background?.accentColor\"\r\n                                [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-wrap flex-1 width-max\">\r\n                    <div class=\"slider flex overflow-hidden w-full\">\r\n                        <div class=\"slider-track\" *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\r\n                            [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n                                [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\"\r\n                                *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n                                <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n                                    *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n                                    [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n                                    [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n                                <ng-container\r\n                                    *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n                                    <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n                                        [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        class=\"logo-img d-flex justify-content-center align-items-center\"\r\n                                        [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n                                        [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n                                        [showIcon]=\"content?.display?.showIcon\">\r\n                                        <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n                                            [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n                                            [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n                                    </div>\r\n                                </ng-container>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"slider-track w-full\"\r\n                            *ngIf=\"!content?.display?.showIcon && content?.display?.showText\"\r\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\n                                *ngFor=\"let item of content?.listItem?.data\"\r\n                                [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic'}\">\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                        <div class=\"slider-track w-full\"\r\n                            *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\r\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides d-flex\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n                                *ngFor=\"let item of content?.listItem?.data\"\r\n                                [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic','flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\r\n                                <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n                                    *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n                                    [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n                                    [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n                                <ng-container\r\n                                    *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n                                    <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n                                        [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        class=\"logo-img d-flex justify-content-center align-items-center\"\r\n                                        [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n                                        [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n                                        [showIcon]=\"content?.display?.showIcon\">\r\n                                        <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n                                            [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n                                            [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n                                    </div>\r\n                                </ng-container>\r\n\r\n                                <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n                                    [editable]=\"edit || false\"></simpo-text-editor>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n                *ngIf=\"styles?.positionLayout?.value === 'bottom'\">\r\n                <div class=\"px-5 mb-20 content-side\" [id]=\"data?.id\"\r\n                    [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n                    <div *ngFor=\"let item of content?.inputText\">\r\n                        <ng-container *ngIf=\"edit || item.value\">\r\n                            <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-20\">\r\n                        <div *ngFor=\"let button of data?.action?.buttons\">\r\n                            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                                [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n                                [color]=\"data?.styles?.background?.accentColor\"\r\n                                [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"col-lg-12 flex flex-wrap items-center w-full gap-2 justify-center\">\r\n                    <!-- flex flex-wrap items-center w-full gap-2 justify-center -->\r\n                    <div class=\"slider flex overflow-hidden w-full\">\r\n                        <div class=\"slider-track w-full\"\r\n                            *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\r\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n                                [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\r\n                                *ngFor=\"let item of content?.listItem?.data; let i = index\">\r\n                                <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n                                    *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n                                    [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n                                    [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n                                <ng-container\r\n                                    *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n                                    <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n                                        [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        class=\"logo-img d-flex justify-content-center align-items-center\"\r\n                                        [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n                                        [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n                                        [showIcon]=\"content?.display?.showIcon\">\r\n                                        <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n                                            [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n                                            [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n                                    </div>\r\n                                </ng-container>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"slider-track w-full\"\r\n                            *ngIf=\"!content?.display?.showIcon && content?.display?.showText\"\r\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\n                                [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\r\n                                *ngFor=\"let item of content?.listItem?.data\">\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                        <div class=\"slider-track w-full\"\r\n                            *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\r\n                            [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                            <div class=\"slides d-flex align-items-center\" [simpoCorner]=\"styles?.corners\"\r\n                                *ngFor=\"let item of content?.listItem?.data\" [id]=\"data?.id\"\r\n                                [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\r\n                                <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n                                    *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n                                    [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                    [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n                                    [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n                                <ng-container\r\n                                    *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n                                    <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n                                        [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                        class=\"logo-img d-flex justify-content-center align-items-center\"\r\n                                        [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n                                        [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n                                        [showIcon]=\"content?.display?.showIcon\">\r\n                                        <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n                                            [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n                                            [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n                                    </div>\r\n                                </ng-container>\r\n                                <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText[0].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        </div>\r\n        <ng-container *ngIf=\"styles?.devider?.display\">\r\n            <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n                [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n        </ng-container>\r\n        <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n            <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n        </div>\r\n        <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n            <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"styles?.showCaseType==='Carousal'\">\r\n    <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n\r\n        <div class=\"w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n            [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\"\r\n            [ngClass]=\"styles?.fullWidth === true ? 'px-0' : ''\" [simpoBackground]=\"styles?.background\">\r\n            <div class=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n                [simpoLayout]=\"styles?.layout\">\r\n                <div class=\"mainsec content-side\" [id]=\"data?.id\"\r\n                    [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n\r\n                    <div *ngFor=\"let item of content?.inputText\">\r\n                        <ng-container *ngIf=\"edit || item.value\">\r\n                            <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div *ngIf=\"data?.action && data?.action?.display\" class=\"gap-2 d-md-flex mt-15\" [ngClass]=\"[\r\n                          styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n                          styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n                          styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n                      ]\">\r\n                        <div *ngFor=\"let button of data?.action?.buttons\">\r\n                            <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                                [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n                                [color]=\"data?.styles?.background?.accentColor\"\r\n                                [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div [ngClass]=\"{\r\n                      'fullwidth flex-1 inline-edit  ': styles?.fullWidth,\r\n                      'nofullwidth flex-1 inline-edit ': !styles?.fullWidth\r\n                    }\">\r\n                        <div class=\"masking\">\r\n\r\n                            <div class=\"slider animation \" [style.animationDuration]=\"animationDuration\"\r\n                                [style.animationDirection]=\"animationDirection\">\r\n                                <div class=\"slider-track2\"\r\n                                    *ngIf=\"content?.display?.showIcon && !content?.display?.showText\"\r\n                                    [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'gap-0': styles?.removeGaps}\">\r\n                                    <div class=\"slides2\" [simpoCorner]=\"styles?.corners\" [id]=\"data?.id\"\r\n                                        [ngClass]=\"{'logotype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\r\n                                        *ngFor=\"let item of content?.listItem?.data;let i = index\">\r\n                                        <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n                                            *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n                                            [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                            [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                            [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\"\r\n                                            [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n                                            [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n                                        <ng-container\r\n                                            *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n                                            <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n                                                [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                                [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                                class=\"logo-img d-flex justify-content-center align-items-center\"\r\n                                                [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n                                                [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n                                                [sectionId]=\"data?.id\" [showIcon]=\"content?.display?.showIcon\">\r\n                                                <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n                                                    [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n                                                    [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n                                            </div>\r\n                                        </ng-container>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"slider-track2\"\r\n                                    *ngIf=\"content?.display?.showText && !content?.display?.showIcon\"\r\n                                    [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                                    <div class=\"slides\" [simpoCorner]=\"styles?.corners\"\r\n                                        [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-center': styles?.layout?.align === 'center', 'justify-content-end': styles?.layout?.align === 'right'}\"\r\n                                        *ngFor=\"let item of content?.listItem?.data\">\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                                <div class=\"slider-track2 d-flex w-full\"\r\n                                    *ngIf=\"content?.display?.showIcon && content?.display?.showText\"\r\n                                    [ngClass]=\"{'gap-0': styles?.removeGaps}\">\r\n                                    <div class=\"slides d-flex\" [simpoCorner]=\"styles?.corners\"\r\n                                        *ngFor=\"let item of content?.listItem?.data\" [id]=\"data?.id\"\r\n                                        [ngClass]=\"{'texttype-boxed': styles?.logoType === 'Boxed' , 'logotype-basic' : styles?.logoType === 'Basic',  'align-items-start': styles?.layout?.align === 'left', 'align-items-center': styles?.layout?.align === 'center', 'align-items-end': styles?.layout?.align === 'right' , 'flex-row' : styles?.logoPosition == 'left' , 'flex-row-reverse' : styles?.logoPosition == 'right', 'flex-column' : styles?.logoPosition == 'top' , 'flex-column-reverse' : styles?.logoPosition == 'bottom'}\">\r\n                                        <img loading=\"lazy\" [src]=\"item?.icon?.url\" [simpoCorner]=\"styles?.corners\"\r\n                                            *ngIf=\"!item?.icon?.url?.includes('.png') && !item?.icon?.url?.includes('.svg')\"\r\n                                            [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                            [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                            [alt]=\"item?.icon?.altText\" [appImageEditor]=\"edit || false\"\r\n                                            [iconData]=\"item?.icon\" [sectionId]=\"data?.id\"\r\n                                            [class]=\"data?.id+(item?.icon?.id || '')\" [showIcon]=\"content?.display?.showIcon\">\r\n                                        <ng-container\r\n                                            *ngIf=\"(item?.icon?.url?.includes('.png') || item?.icon?.url?.includes('.svg'))\">\r\n                                            <div [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n                                                [style.height.px]=\"(styles?.containerHeight ?? 1) / (isMobile ? 2 : 1)\"\r\n                                                [style.width.px]=\"(styles?.containerWidth ?? 1) / (isMobile ? 2 : 1)\"\r\n                                                class=\"logo-img d-flex justify-content-center align-items-center\"\r\n                                                [style.background]=\"item?.icon?.showBackground ? item?.icon?.backgroundColor : 'transparent'\"\r\n                                                [appImageEditor]=\"edit || false\" [iconData]=\"item?.icon\"\r\n                                                [sectionId]=\"data?.id\" [showIcon]=\"content?.display?.showIcon\">\r\n                                                <div [id]=\"data?.id\" [iconId]=\"data?.id + (item?.icon?.id ?? '' )\"\r\n                                                    [simpoIconDirective]=\"item?.icon\" class=\"w-75 h-100\"\r\n                                                    [class.w-100]=\"!item?.icon?.showBackground\"></div>\r\n                                            </div>\r\n                                        </ng-container>\r\n                                        <simpo-text-editor class=\"mt-2\" [(value)]=\"item.inputText[0].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\r\n\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <ng-container *ngIf=\"styles?.devider?.display\">\r\n            <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n                [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n        </ng-container>\r\n        <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n            <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n        </div>\r\n        <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n            <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".masking{mask:linear-gradient(90deg,transparent,white 5%,white 95%,transparent);overflow:hidden;width:100%}.sliderdad{width:100%;display:flex}@media (min-width: 860px){.nofullwidth{overflow:hidden}}.slider-track2{min-width:max-content;translate:none;rotate:none;scale:none;gap:1rem;justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex}.mainsec{gap:2rem;flex-direction:column;display:flex}.slider-track2.logotype-boxed{gap:1rem}.slider-track2.logotype-basic{gap:5rem}.slides2.logotype-boxed{padding:1.5rem 1.25rem;--tw-bg-opacity: .05;flex-shrink:0;width:auto;height:auto;display:flex;position:relative;box-shadow:#0000002e 0 2px 4px;margin:10px 5px}.slides2.logotype-basic{flex-shrink:0;width:auto;height:auto;display:flex;position:relative}.slides2.img{height:100%;max-width:100%;border-style:solid}@keyframes scrollLeft{0%{transform:translateZ(0)}to{transform:translate3d(-100%,0,0)}}@keyframes scrollRight{0%{transform:translate3d(-100%,0,0)}to{transform:translateZ(0)}}.animation{animation:scrollLeft linear infinite}.slider-track{justify-content:center;align-items:center;flex-wrap:wrap;width:100%;display:flex;gap:10px}.slider-track.logotype-basic{gap:5rem}.slider-track.logotype-boxed{gap:1rem}.slides.logotype-basic{flex-shrink:0;width:auto;min-height:5rem;height:auto;display:flex;position:relative}.slides.logotype-boxed{padding:1.5rem .625rem;--tw-bg-opacity: .05;box-shadow:#0000002e 0 2px 4px;width:auto;height:auto;display:flex;align-items:center;margin:10px 5px}.width-max{width:max-content;max-width:50%}.slides.texttype-boxed{padding:1.5rem .625rem;justify-content:center;width:auto;display:flex;position:relative;box-shadow:#0000002e 0 2px 4px;margin:10px 5px;align-items:center}.slides.texttype-boxed:hover{--tw-bg-opacity: .05;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.slides.img{border-style:solid;max-width:100%;height:100%}@media only screen and (max-width: 500px){.col-xxl-8{padding-left:0!important;padding-right:0!important}.mainsec{padding-right:2rem!important;padding-left:2rem!important}.col-7{min-width:50%;width:100%;max-width:100%}.col-5{width:100%}.slides img{width:88%}}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-20{margin-top:20px}.mb-20{margin-bottom:20px}.row{margin-left:0;margin-right:0}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -14501,7 +14541,7 @@ class NewTestimonialsComponent extends BaseSection {
         this.screenWidth = window.innerWidth;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NewTestimonialsComponent, deps: [{ token: EventsService }], 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)" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\">\r\n        <div class=\"parent-div\"  [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n            [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\">\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 *ngFor=\"let button of data?.action?.buttons\" class=\"mt-4\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n                    <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                        [buttonId]=\"button.id\" [edit]=\"edit\" [sectionId]=\"data?.id\"\r\n                        [color]=\"data?.styles?.background?.accentColor\"\r\n                        [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                </div>\r\n            </ng-container>\r\n            <div class=\"list-items mt-3 d-flex gap-3\" [spacingHorizontal]=\"stylesLayout\"\r\n                [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [simpoAnimation]=\"styles?.animation\" [class.flex-column]=\"screenWidth < 475\">\r\n                <div class=\"image-container w-50 height-50\" [class.w-100]=\"screenWidth < 475\" [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                                controls></video>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </div>\r\n                <div id=\"carouselExampleIndicators\" class=\"carousel slide w-50 d-flex flex-column\"\r\n                    [simpoContentAlignment]=\"styles?.contentAlignment\" [class.w-100]=\"screenWidth < 475\">\r\n                    <div class=\"carousel-inner mb-4 overflow-visible\" [class.mb-6]=\"screenWidth < 475\">\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}\">\r\n                                <div class=\"quote-image mb-2\">\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"31\" viewBox=\"0 0 36 31\"\r\n                                        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                            <mat-icon>keyboard_arrow_left</mat-icon>\r\n                        </div>\r\n                        <div class=\"carousel-control-next\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n                            data-bs-slide=\"next\" [style.backgroundColor]=\"styles?.background?.accentColor\">\r\n                            <mat-icon>keyboard_arrow_right</mat-icon>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <ng-container *ngIf=\"styles?.devider?.display\">\r\n        <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n            [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></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:5%;border-radius:50%!important;height:4vh}.prev-next{position:absolute;bottom:0;left:0;width:100%}.overflow-visible{overflow:visible!important}@media screen and (max-width: 475px){.carousel-control-prev,.carousel-control-next{width:10%!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)" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<section class=\"main-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\">\r\n        <div class=\"parent-div\"  [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n            [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\">\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 *ngFor=\"let button of data?.action?.buttons\" class=\"mt-4\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n                    <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                        [buttonId]=\"button.id\" [edit]=\"edit\" [sectionId]=\"data?.id\"\r\n                        [color]=\"data?.styles?.background?.accentColor\"\r\n                        [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                </div>\r\n            </ng-container>\r\n            <div class=\"list-items mt-3 d-flex gap-3\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\"\r\n                [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [simpoAnimation]=\"styles?.animation\" [class.flex-column]=\"screenWidth < 475\">\r\n                <div class=\"image-container w-35 height-50\" [class.w-100]=\"screenWidth < 475\" [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                                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 overflow-visible\" [class.mb-6]=\"screenWidth < 475\">\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}\">\r\n                                <div class=\"quote-image mb-2\">\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"31\" viewBox=\"0 0 36 31\"\r\n                                        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                            <mat-icon>keyboard_arrow_left</mat-icon>\r\n                        </div>\r\n                        <div class=\"carousel-control-next\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n                            data-bs-slide=\"next\" [style.backgroundColor]=\"styles?.background?.accentColor\">\r\n                            <mat-icon>keyboard_arrow_right</mat-icon>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <ng-container *ngIf=\"styles?.devider?.display\">\r\n        <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n            [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></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:4%;border-radius:50%!important;height:4vh}.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){.carousel-control-prev,.carousel-control-next{width:10%!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: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type: 
                 // components
@@ -14537,7 +14577,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\">\r\n        <div class=\"parent-div\"  [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n            [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\">\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 *ngFor=\"let button of data?.action?.buttons\" class=\"mt-4\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n                    <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                        [buttonId]=\"button.id\" [edit]=\"edit\" [sectionId]=\"data?.id\"\r\n                        [color]=\"data?.styles?.background?.accentColor\"\r\n                        [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                </div>\r\n            </ng-container>\r\n            <div class=\"list-items mt-3 d-flex gap-3\" [spacingHorizontal]=\"stylesLayout\"\r\n                [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [simpoAnimation]=\"styles?.animation\" [class.flex-column]=\"screenWidth < 475\">\r\n                <div class=\"image-container w-50 height-50\" [class.w-100]=\"screenWidth < 475\" [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                                controls></video>\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </div>\r\n                <div id=\"carouselExampleIndicators\" class=\"carousel slide w-50 d-flex flex-column\"\r\n                    [simpoContentAlignment]=\"styles?.contentAlignment\" [class.w-100]=\"screenWidth < 475\">\r\n                    <div class=\"carousel-inner mb-4 overflow-visible\" [class.mb-6]=\"screenWidth < 475\">\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}\">\r\n                                <div class=\"quote-image mb-2\">\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"31\" viewBox=\"0 0 36 31\"\r\n                                        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                            <mat-icon>keyboard_arrow_left</mat-icon>\r\n                        </div>\r\n                        <div class=\"carousel-control-next\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n                            data-bs-slide=\"next\" [style.backgroundColor]=\"styles?.background?.accentColor\">\r\n                            <mat-icon>keyboard_arrow_right</mat-icon>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <ng-container *ngIf=\"styles?.devider?.display\">\r\n        <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n            [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></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:5%;border-radius:50%!important;height:4vh}.prev-next{position:absolute;bottom:0;left:0;width:100%}.overflow-visible{overflow:visible!important}@media screen and (max-width: 475px){.carousel-control-prev,.carousel-control-next{width:10%!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\">\r\n        <div class=\"parent-div\"  [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\r\n            [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\">\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 *ngFor=\"let button of data?.action?.buttons\" class=\"mt-4\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\">\r\n                    <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                        [buttonId]=\"button.id\" [edit]=\"edit\" [sectionId]=\"data?.id\"\r\n                        [color]=\"data?.styles?.background?.accentColor\"\r\n                        [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                </div>\r\n            </ng-container>\r\n            <div class=\"list-items mt-3 d-flex gap-3\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\"\r\n                [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [simpoAnimation]=\"styles?.animation\" [class.flex-column]=\"screenWidth < 475\">\r\n                <div class=\"image-container w-35 height-50\" [class.w-100]=\"screenWidth < 475\" [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                                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 overflow-visible\" [class.mb-6]=\"screenWidth < 475\">\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}\">\r\n                                <div class=\"quote-image mb-2\">\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"36\" height=\"31\" viewBox=\"0 0 36 31\"\r\n                                        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                            <mat-icon>keyboard_arrow_left</mat-icon>\r\n                        </div>\r\n                        <div class=\"carousel-control-next\" href=\"#carouselExampleIndicators\" role=\"button\"\r\n                            data-bs-slide=\"next\" [style.backgroundColor]=\"styles?.background?.accentColor\">\r\n                            <mat-icon>keyboard_arrow_right</mat-icon>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <ng-container *ngIf=\"styles?.devider?.display\">\r\n        <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n            [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></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:4%;border-radius:50%!important;height:4vh}.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){.carousel-control-prev,.carousel-control-next{width:10%!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 }], propDecorators: { data: [{
                 type: Input
             }], edit: [{