npm - simpo-component-library - Versions diffs - 3.6.869 → 3.6.871 - Mend

simpo-component-library 3.6.869 → 3.6.871

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

Files changed (29) hide show

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

@@ -977,6 +977,10 @@ class ElementServiceService {
     }
     getComponentApi(businessType) {
         return this.http.get(`${this.BASE_URL}admin/master/template/category/all?type=${businessType ? businessType : ''}`);
+        // return this.http.get(`https://api.simpo.ai/admin/master/template/category/all?type=${businessType ? businessType : ''}`)
+    }
+    getAllSavedSectionsApi(businessId) {
+        return this.http.get(`${this.BASE_URL}business/v3/business/${businessId}/page-level-components`);
     }
     regenerateText(request) {
         return this.http.post(this.BASE_URL + `admin/content/suggest/v2/website/individual`, request);
@@ -1864,7 +1868,6 @@ class TextEditorComponent {
     }
     ngOnChanges(changes) {
         if (changes['value']) {
-            console.log('INPUT VALUE:', this.value);
             this.updateSafeHtml();
         }
     }
@@ -1927,7 +1930,10 @@ class TextEditorComponent {
             },
             onUpdate: ({ editor }) => {
                 const html = editor.getHTML();
-                console.log('EDITOR HTML:', html);
+                // console.log(
+                //   'EDITOR HTML:',
+                //   html
+                // );
                 this.value = html;
                 this.updateSafeHtml();
                 this.valueChange.emit(html);
@@ -3935,10 +3941,10 @@ class AddSectionComponent {
         this.selectedTab = "BASIC";
         this.businessId = localStorage.getItem("businessId");
         this.tabs = [
-            { value: "BASIC", viewValue: "Static" },
-            { value: "INTEGRATIONS", viewValue: "Dynamic" },
+            { value: "BASIC", viewValue: "Section Studio" },
+            // { value: "INTEGRATIONS", viewValue: "Dynamic" },
             { value: "APPS", viewValue: "Apps" },
-            { value: "PRO", viewValue: "Saved" }
+            { value: "SAVED", viewValue: "Saved" }
         ];
         this.sections = [];
         this.selectedSection = [];
@@ -3950,24 +3956,51 @@ class AddSectionComponent {
         this.expandedCategories = {};
         // New: track which component card is selected
         this.selectedComponent = null;
+        // ── Saved tab state ─────────────────────────
+        this.savedSections = {}; // raw API response (object structure)
+        this.savedCategoryKeys = []; // top-level category keys
+        this.savedLoader = false;
+        this.selectedSavedCategory = ''; // currently active category in saved sidebar
         // New: emoji map for categories
         this.categoryEmojiMap = {
-            'Hero': '🖼️',
-            'Services': '🎁',
+            // 'Hero': '🖼️',
+            // 'Services': '🎁',
+            // 'Feature': '✨',
+            // 'How It Works': 'ℹ️',
+            // 'Testimonial': '⭐',
+            // 'Pricing': '💰',
+            // 'Faq': '❓',
+            // 'Blogs': '📝',
+            // 'Miscellaneous': '🔧',
+            // 'Text': '📄',
+            // 'Logo': '🏷️',
+            // 'Contact': '✉️',
+            // 'CTA': '📢',
+            // 'Team': '👥',
+            // 'Video': '🎬',
+            // 'Image ': '🖼️',
+            'Hero': '🚀',
+            'Services': '🧰',
             'Feature': '✨',
-            'How It Works': 'ℹ️',
+            'How It Works': '🪄',
             'Testimonial': '⭐',
             'Pricing': '💰',
             'Faq': '❓',
-            'Blogs': '📝',
-            'Miscellaneous': '🔧',
-            'Text': '📄',
-            'Logo': '🏷️',
-            'Contact': '✉️',
-            'CTA': '📢',
+            'Blogs': '📰',
+            'Choose Us': '🛡️',
+            'Logo Cloud': '🏢',
+            'Newsletter': '📩',
+            'Miscellaneous': '📂',
+            'Text': '✍️',
+            'Logo': '🌈',
+            'Contact': '☎️',
+            'Contact Us': '📞',
+            'CTA': '🔥',
             'Team': '👥',
+            'About': 'ℹ️',
+            'Gallery': '🖼️',
             'Video': '🎬',
-            'Image ': '🖼️',
+            'Image': '🖼️'
         };
         this.searchText = "";
         this.dummy2 = {};
@@ -3988,9 +4021,23 @@ class AddSectionComponent {
         }
         return category;
     }
+    // Called by tab click — triggers saved API on first visit
+    onTabSelect(value) {
+        this.selectedTab = value;
+        console.log(this.selectedTab);
+        if (value === 'SAVED' && !this.savedLoader) {
+            this.getSavedSections();
+        }
+        else if (value == 'BASIC') {
+            this.getAllSections();
+        }
+    }
     toggleCategory(category) {
         if (this.expandedCategories[category]) {
             this.expandedCategories[category] = false;
+            this.selectedSection = [];
+            this.selectedSectionName = "";
+            this.selectedComponent = null;
         }
         else {
             Object.keys(this.expandedCategories).forEach(k => this.expandedCategories[k] = false);
@@ -3998,10 +4045,41 @@ class AddSectionComponent {
             this.selectSection(category);
         }
     }
+    getSavedSections() {
+        this.savedLoader = true;
+        this.savedSections = {};
+        this.savedCategoryKeys = [];
+        this.selectedSavedCategory = '';
+        this.editorService.getAllSavedSectionsApi(this.businessId).subscribe({
+            next: (res) => {
+                if (res?.data?.addNewSection) {
+                    delete res.data.addNewSection;
+                }
+                this.savedSections = res.data || {};
+                this.savedCategoryKeys = Object.keys(this.savedSections);
+                if (this.savedCategoryKeys.length > 0) {
+                    this.selectedSavedCategory = this.savedCategoryKeys[0];
+                }
+                this.savedLoader = false;
+            },
+            error: () => { this.savedLoader = false; }
+        });
+    }
+    selectSavedCategory(categoryKey) {
+        this.selectedSavedCategory = categoryKey;
+    }
     selectComponent(sec, category) {
         this.selectedComponent = sec;
         this.selectedSection = this.sections[category];
         this.selectedSectionName = category;
+        Object.keys(this.expandedCategories).forEach(k => this.expandedCategories[k] = false);
+        this.expandedCategories[category] = true;
+        setTimeout(() => {
+            const element = document.getElementById('comp-' + sec.componentId);
+            if (element) {
+                element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        }, 100);
     }
     selectComponentAndHighlight(ele) {
         this.selectedComponent = ele;
@@ -4010,7 +4088,12 @@ class AddSectionComponent {
         this.tabShiftLoader = true;
         this.selectedSection = this.sections[ele];
         this.selectedSectionName = ele;
-        this.selectedComponent = null;
+        if (this.selectedSection?.length === 1) {
+            this.selectedComponent = this.selectedSection[0];
+        }
+        else {
+            this.selectedComponent = null;
+        }
         setTimeout(() => {
             this.tabShiftLoader = false;
         }, 800);
@@ -4020,6 +4103,9 @@ class AddSectionComponent {
         this.loader = true;
         this.editorService.getComponentApi(this.businessType === 'STATIC' ? this.businessType : undefined).subscribe((res) => {
             let data = res.data;
+            if (res?.data?.Appointment) {
+                delete res.data.Appointment;
+            }
             if (!this.referEarnExist) {
                 Object.keys(data).forEach((key) => {
                     data[key] = data[key].filter((section) => section.sectionType !== 'referearn');
@@ -4032,10 +4118,20 @@ class AddSectionComponent {
             // Auto-expand first category
             if (this.selectedSectionName) {
                 this.expandedCategories[this.selectedSectionName] = true;
+                if (this.selectedSection?.length === 1) {
+                    this.selectedComponent = this.selectedSection[0];
+                }
             }
             this.loader = false;
         });
     }
+    getAllSavedSections() {
+        this.editorService.getAllSavedSectionsApi("1eedcb26-d23a-688a-bd63-579d19dab229").subscribe((res) => {
+            console.log(res.data);
+        }, (err) => {
+            console.log(err);
+        });
+    }
     checkAppInstalled() {
         this.restService.checkAppInstalled(this.businessId, 'Refer and Earn').subscribe({
             next: (res) => {
@@ -4089,14 +4185,20 @@ class AddSectionComponent {
             this.isSearch = true;
         this.selectedSectionName = Object.keys(this.sections)[0];
         this.selectedSection = this.sections[Object.keys(this.sections)[0]];
+        if (this.selectedSection?.length === 1) {
+            this.selectedComponent = this.selectedSection[0];
+        }
+        else {
+            this.selectedComponent = null;
+        }
         this.dummy2 = {};
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddSectionComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i1.HttpClient }, { token: EventsService }, { token: ElementServiceService }, { token: RestService }, { token: ElementServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AddSectionComponent, isStandalone: true, selector: "simpo-add-section", ngImport: i0, template: "<!-- <section class=\"main-container\">\r\n    <div class=\"header-container d-flex align-items-center justify-content-between\">\r\n        <div>Select Template</div>\r\n        <mat-icon class=\"d-flex align-items-center justify-content-center f-18 cp\" (click)=\"dialog.close()\">\r\n            close\r\n        </mat-icon>\r\n    </div>\r\n    <div class=\"parent-container\">\r\n        <div class=\"search-bar-container\">\r\n            <div class=\"search-bar d-flex gap-10\">\r\n                <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/314661c1741844234442Vector%20%281%29.png\"\r\n                    alt=\"search-bar-icon\">\r\n                <input type=\"text\" placeholder=\"Search for Sections\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchSections()\">\r\n            </div>\r\n        </div>\r\n        <div class=\"tab-container d-flex justify-content-around align-items-center\">\r\n            <ng-container *ngFor=\"let ele of tabs\">\r\n                <div class=\"tabs\" (click)=\"selectedTab = ele.value\" [class.active-tab]=\"ele.value == selectedTab\">\r\n                    {{ele.viewValue}}\r\n                    <ng-container *ngIf=\"ele.value == 'PRO' && ele.value != selectedTab\">\r\n                        <img class=\"w-30\"\r\n                            src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/468281c1744699664858Frame%201244831740%20%281%29.png\"\r\n                            alt=\"pro-icon\">\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n        <ng-container *ngIf=\"selectedTab === 'BASIC'; else proTabContent\">\r\n            <ng-container *ngIf=\"!isSearch;else emptyScreen\">\r\n                <div class=\"categories-container d-flex\">\r\n                    <div class=\"categories-sidepanel\" *ngIf=\"!loader\">\r\n                        <ng-container *ngFor=\"let ele of getObjectKeys(sections)\">\r\n                            <div class=\"side-section d-flex justify-content-center align-items-center flex-column\"\r\n                                (click)=\"selectSection(ele)\"\r\n                                [class.active-section]=\"selectedSection == sections[ele]\">\r\n                                <div class=\"image-container\">\r\n                                    <ng-container *ngIf=\"selectedSection == sections[ele]\">\r\n                                        <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/954383c1741850392802Group%201707481879.png\"\r\n                                            alt=\"icon text\">\r\n                                    </ng-container>\r\n                                    <ng-container *ngIf=\"selectedSection != sections[ele]\">\r\n                                        <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/846145c1741850574864Icon%20%281%29.png\"\r\n                                            alt=\"icon text\">\r\n                                    </ng-container>\r\n                                </div>\r\n                                <div class=\"section-text\">\r\n                                    {{ele}}\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"categories-render-section\" *ngIf=\" !loader && !tabShiftLoader\">\r\n                        <div class=\"categories-head\">\r\n                            {{selectedSectionName}}\r\n                        </div>\r\n                        <div class=\"sub-text\">\r\n                            Select a section to add to your page\r\n                        </div>\r\n                        <div class=\"sections-container\">\r\n                            <ng-container *ngFor=\"let ele of selectedSection\">\r\n                                <div class=\"section\">\r\n                                    <div class=\"section-header\">{{ele.sectionName}}</div>\r\n                                    <div class=\"section-img-container cp\"\r\n                                        (click)=\"addNewSection(ele.componentId,ele.sectionType,$event)\">\r\n                                        <ng-container *ngIf=\"ele?.image; else noImage\">\r\n                                            <img [src]=\"ele?.image\" alt=\"section image\">\r\n                                        </ng-container>\r\n                                        <ng-template #noImage>\r\n                                            <img src=\"https://img.freepik.com/premium-vector/default-image-icon-vector-missing-picture-page-website-design-mobile-app-no-photo-available_87543-11093.jpg\"\r\n                                                alt=\"section image\" class=\"h-30\">\r\n                                        </ng-template>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"categories-sidepanel\" *ngIf=\"loader\">\r\n                        <ng-container *ngFor=\"let ele of [1,1,1,1,1,1,1,1,1]\">\r\n                            <div class=\"d-flex justify-content-center align-items-center flex-column\">\r\n                                <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n                                    height: '8vh',\r\n                                    width: '65%',\r\n                                    'border-radius': '13px',\r\n                                    'margin-bottom' : '10px',\r\n                                }\" class=\"d-flex justify-content-center w-100\">\r\n                                </ngx-skeleton-loader>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"categories-render-section\" *ngIf=\"loader || tabShiftLoader\">\r\n                        <div class=\"categories-head\">\r\n                            <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n                                width: '20%',\r\n                                height : '3vh',\r\n                                'border-radius': '5px',\r\n                            }\">\r\n                            </ngx-skeleton-loader>\r\n                        </div>\r\n                        <div class=\"sub-text\">\r\n                            <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n                                width: '60%',\r\n                                height : '2vh',\r\n                                'border-radius': '5px',\r\n                            }\">\r\n                            </ngx-skeleton-loader>\r\n                        </div>\r\n                        <div class=\"sections-container\">\r\n                            <ng-container *ngFor=\"let ele of [1,1,1,1]\">\r\n                                <div class=\"section\">\r\n                                    <div>   <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n                                        width: '25%',\r\n                                        height : '2vh',\r\n                                        'border-radius': '5px',\r\n                                    }\">\r\n                                    </ngx-skeleton-loader></div>\r\n                                    <div>\r\n                                        <ngx-skeleton-loader [theme]=\"{\r\n                                            width: '100%',\r\n                                            height : '25vh',\r\n                                            'border-radius': '5px',\r\n                                            'margin':'2px'\r\n                                        }\">\r\n                                        </ngx-skeleton-loader>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-template #proTabContent>\r\n            <div class=\"empty-div d-flex align-items-center justify-content-center flex-column\">\r\n                <div class=\"image-container-1\">\r\n                    <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/377076c1743154807683image%20%286%29.png\" alt=\"empty-img\" class=\"empty-img \">\r\n                </div>\r\n                <div class=\"oops-text\">\r\n                    Coming Soon\r\n                </div>\r\n                <div class=\"oops-sub-text\">\r\n                    <div class=\"oops-sub-text-1 text-center\">Woof! Something pawsome is coming!</div>\r\n                    <div class=\"oops-sub-text-2 text-center\">\r\n                        Hey hooman! I just sniffed out something super exciting... and it\u2019s almost here! \r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n        <ng-template #emptyScreen>\r\n            <div class=\"empty-div d-flex align-items-center justify-content-center flex-column\">\r\n                <div class=\"image-container-1\">\r\n                    <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/377076c1743154807683image%20%286%29.png\" alt=\"empty-img\" class=\"empty-img \">\r\n                </div>\r\n                <div class=\"oops-text\">\r\n                    Oops! \r\n                </div>\r\n                <div class=\"oops-sub-text\">\r\n                    <div class=\"oops-sub-text-1 text-center\">I sniffed everywhere, but I couldn't find what you're looking for</div>\r\n                    <div class=\"oops-sub-text-2 text-center\">\r\n                        Maybe try a different search? \r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n    </div>\r\n</section> -->\r\n\r\n<section class=\"main-container d-flex flex-column\">\r\n\r\n    <div class=\"header-container relative px-3 py-2 fade-in\">\r\n        <div class=\"header-title fs-16 fw-bold\">Add a section</div>\r\n        <div class=\"header-subtitle fs-12 text-secondary\">\r\n            Choose a section \u2014 you can reorder or remove it any time.\r\n        </div>\r\n        <mat-icon class=\"close-btn d-flex align-items-center justify-content-center\"\r\n            (click)=\"dialog.close()\">close</mat-icon>\r\n    </div>\r\n\r\n    <div class=\"parent-container d-flex flex-column\">\r\n\r\n        <!-- Tabs -->\r\n        <div class=\"top-tabs-container d-flex justify-content-between fade-in\">\r\n            <ng-container *ngFor=\"let ele of tabs\">\r\n                <div class=\"top-tab\" (click)=\"selectedTab = ele.value\"\r\n                    [class.active-top-tab]=\"ele.value == selectedTab\">\r\n                    {{ele.viewValue}}\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n\r\n        <!-- Search -->\r\n        <div class=\"search-bar-container fade-in\">\r\n            <div class=\"search-bar d-flex gap-2 align-items-center\">\r\n                <img\r\n                    src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/314661c1741844234442Vector%20%281%29.png\">\r\n                <input type=\"text\" placeholder='Search section...' [(ngModel)]=\"searchText\"\r\n                    (ngModelChange)=\"searchSections()\">\r\n            </div>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"selectedTab === 'BASIC'; else proTabContent\">\r\n\r\n            <ng-container *ngIf=\"!isSearch; else emptyScreen\">\r\n\r\n                <!-- Quick Add -->\r\n                <div class=\"quick-add-container fade-in d-flex align-items-center\" *ngIf=\"!loader && !searchText\">\r\n                    <div class=\"quick-add-label\">Quick add:</div>\r\n                    <div class=\"quick-add-chips d-flex\">\r\n                        <ng-container *ngFor=\"let category of getObjectKeys(sections); let i = index\">\r\n                            <ng-container *ngIf=\"i < 6\">\r\n                                <div class=\"quick-chip stagger-item d-flex align-items-center\"\r\n                                    (click)=\"selectSection(category); toggleCategory(category)\"\r\n                                    [class.active-quick-chip]=\"selectedSectionName === category\">\r\n                                    <span class=\"chip-emoji\">{{getCategoryEmoji(category)}}</span>\r\n                                    {{getFirstSectionName(category)}}\r\n                                </div>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n\r\n                <!-- CONTENT -->\r\n                <div class=\"content-layout fade-in d-flex\" *ngIf=\"!loader\">\r\n                    <!-- LEFT -->\r\n                    <div class=\"left-sidebar\">\r\n                        <div class=\"category-header d-flex align-items-center\">\r\n                            <div class=\"category-icon d-flex align-items-center justify-content-center\">\u2728</div>\r\n                            <div class=\"fs-14\">AI Recommended</div>\r\n                        </div>\r\n                        <ng-container *ngFor=\"let category of getObjectKeys(sections)\">\r\n                            <div class=\"category-block\">\r\n                                <div class=\"category-header d-flex align-items-end justify-content-between\"\r\n                                    (click)=\"toggleCategory(category)\">\r\n                                    <div class=\"d-flex gap-2 align-items-center\">\r\n                                        <span class=\"category-icon\">\r\n                                            {{getCategoryEmoji(category)}}\r\n                                        </span>\r\n                                        <span class=\" fs-14\">\r\n                                            {{category}}\r\n                                        </span>\r\n                                    </div>\r\n                                    <mat-icon class=\"category-arrow\" *ngIf=\"expandedCategories[category]\">\r\n                                        expand_less\r\n                                    </mat-icon>\r\n                                    <mat-icon class=\"category-arrow\" *ngIf=\"!expandedCategories[category]\">\r\n                                        expand_more\r\n                                    </mat-icon>\r\n                                </div>\r\n                                <div class=\"category-items d-flex flex-column\" *ngIf=\"expandedCategories[category]\">\r\n                                    <ng-container *ngFor=\"let sec of sections[category]\">\r\n                                        <div class=\"category-item\"\r\n                                            [class.active]=\"selectedComponent?.componentId === sec.componentId\"\r\n                                            (click)=\"selectComponent(sec, category)\">\r\n                                            {{sec.sectionName}}\r\n                                        </div>\r\n                                    </ng-container>\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n\r\n                    <!-- RIGHT -->\r\n                    <div class=\"right-content\">\r\n\r\n                        <div class=\"section-group-label\">Most impactful sections</div>\r\n\r\n                        <div class=\"sections-list d-flex flex-column\">\r\n\r\n                            <ng-container *ngFor=\"let ele of selectedSection; let i = index\">\r\n\r\n                                <!-- FILTERED VIEW -->\r\n                                <ng-container\r\n                                    *ngIf=\"!selectedComponent || selectedComponent?.componentId === ele.componentId\">\r\n\r\n                                    <div class=\"section-card stagger-item\" [style.animation-delay]=\"i * 40 + 'ms'\"\r\n                                        [class.section-card-selected]=\"selectedComponent?.componentId === ele.componentId\"\r\n                                        (click)=\"selectComponentAndHighlight(ele)\">\r\n\r\n                                        <div class=\"section-card-badge\" *ngIf=\"ele.sectionType\">\r\n                                            + {{ele.sectionType | uppercase}}\r\n                                        </div>\r\n\r\n                                        <div\r\n                                            class=\"section-img-container d-flex align-items-center justify-content-center\">\r\n                                            <ng-container *ngIf=\"ele?.image; else noImage\">\r\n                                                <img [src]=\"ele?.image\">\r\n                                            </ng-container>\r\n\r\n                                            <ng-template #noImage>\r\n                                                <div\r\n                                                    class=\"no-image-placeholder d-flex align-items-center justify-content-center\">\r\n                                                    <mat-icon>image</mat-icon>\r\n                                                </div>\r\n                                            </ng-template>\r\n                                        </div>\r\n\r\n                                        <div class=\"section-card-info\">\r\n                                            <div class=\"section-card-name\">{{ele.sectionName}}</div>\r\n                                            <div class=\"section-card-desc\" *ngIf=\"ele.desc\">{{ele.desc}}</div>\r\n                                        </div>\r\n\r\n                                    </div>\r\n\r\n                                </ng-container>\r\n\r\n                            </ng-container>\r\n\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"content-layout d-flex\" *ngIf=\"loader\">\r\n                    <div class=\"left-sidebar\">\r\n                        <ng-container *ngFor=\"let s of [1,1,1,1,1,1,1,1]\">\r\n                            <ngx-skeleton-loader\r\n                                [theme]=\"{ width: '90%', height: '36px', 'border-radius': '8px', 'margin-bottom': '6px' }\"></ngx-skeleton-loader>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"right-content\">\r\n                        <ng-container *ngFor=\"let s of [1,1,1,1]\">\r\n                            <div class=\"section-card\">\r\n                                <ngx-skeleton-loader\r\n                                    [theme]=\"{ width: '40%', height: '20px', 'border-radius': '4px', 'margin-bottom': '8px' }\"></ngx-skeleton-loader>\r\n                                <ngx-skeleton-loader\r\n                                    [theme]=\"{ width: '100%', height: '180px', 'border-radius': '8px', 'margin-bottom': '8px' }\"></ngx-skeleton-loader>\r\n                                <ngx-skeleton-loader\r\n                                    [theme]=\"{ width: '60%', height: '16px', 'border-radius': '4px' }\"></ngx-skeleton-loader>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n        <!-- EMPTY SEARCH -->\r\n        <ng-template #emptyScreen>\r\n            <div class=\"empty-state fade-in d-flex flex-column align-items-center justify-content-center\">\r\n                <img src=\"https://cdn-icons-png.flaticon.com/512/7486/7486803.png\">\r\n                <div class=\"empty-title\">No sections found</div>\r\n                <div class=\"empty-subtitle\">\r\n                    Try searching something else or explore categories\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n\r\n        <!-- PRO TAB -->\r\n        <ng-template #proTabContent>\r\n            <div class=\"empty-state fade-in d-flex flex-column align-items-center justify-content-center\">\r\n                <img src=\"https://cdn-icons-png.flaticon.com/512/4076/4076549.png\">\r\n                <div class=\"empty-title\">Coming Soon</div>\r\n                <div class=\"empty-subtitle\">\r\n                    Something awesome is on the way \uD83D\uDE80\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n\r\n    </div>\r\n\r\n    <!-- Footer -->\r\n    <div class=\"footer-container fade-in d-flex align-items-center justify-content-between\">\r\n        <div class=\"footer-hint fs-12 text-secondary d-flex align-items-center gap-1\">\r\n            <mat-icon>info</mat-icon>\r\n            You can rearrange or remove this section any time.\r\n        </div>\r\n\r\n        <div class=\"footer-actions d-flex align-items-center gap-2\">\r\n            <div class=\"btn-cancel fs-14\" (click)=\"dialog.close()\">Cancel</div>\r\n            <div class=\"btn-add fs-14\" [class.disabled]=\"!selectedComponent\"\r\n                (click)=\"selectedComponent && addNewSection(selectedComponent.componentId, selectedComponent.sectionType, $event)\">\r\n                + Add section\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}.header-container{padding:12px 15px;font-size:15px;line-height:24px;font-weight:600;color:#000;margin-bottom:2px}.gap-10{gap:10px!important}.tab-container{padding:8px;margin:0 15px;gap:3%;background:#fff;border-radius:13px}.tabs{font-size:14px;font-weight:500;line-height:24px;color:#2c2c2c99;width:30%;cursor:pointer;padding:8px 0;text-align:center}.active-tab{color:#fff!important;background:var(--primary-bg-color);box-shadow:0 0 4px #00000040;border-radius:8px;transition:opacity .3s ease-in-out,transform .3s ease-in-out;opacity:1;transform:translateY(0)}.categories-sidepanel{width:15%;padding:10px 5px;margin:15px 0;border-radius:10px;height:calc(70vh + -0px);overflow-y:scroll;background:#fff}.side-section{padding:6px 10px;border-radius:8px;margin-bottom:10px;cursor:pointer}.side-section img{width:16px}.side-section .image-container{background:#f9fafb;padding:5px 8px;border-radius:5px}.side-section .section-text{font-size:12px;font-weight:500;line-height:24px;text-align:center;color:#a1a1a1}.active-section{background:var(--primary-bg-color)!important;box-shadow:0 0 4px #00000040}.active-section .section-text{color:#fff!important}.active-section .image-container{background:unset!important;padding:unset!important;border-radius:unset!important}.categories-render-section{width:85%;padding:15px;margin:15px 10px;border-radius:10px;height:calc(70vh + -0px);overflow-y:scroll;background:#fff}.categories-head{font-size:20px;font-weight:600;line-height:24px;color:#434343}.sub-text{font-size:13px;font-weight:500;line-height:24px;color:#a1a1a1;margin-bottom:10px}.section{margin-bottom:10px}.section-header{font-size:14px;font-weight:500;line-height:24px;color:#a1a1a1;margin-bottom:10px}.section-img-container{padding:18px;border-radius:8px;background:#f9fafb}.section-img-container img{width:100%}.search-bar-container{padding:15px}.parent-container{background:#fafafa}.f-18{font-size:18px;cursor:pointer}.w-30{width:30px!important}.h-30{height:30vh}.cp{cursor:pointer}.empty-div{height:calc(70vh + -0px);background:#fff;margin:18px;border-radius:13px}.oops-text{font-weight:900;font-size:42px;background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent}.oops-sub-text-1{font-size:17px;font-weight:600;color:#101010e5}.oops-sub-text-2{font-size:14px;font-weight:600;color:#101010e5}.main-container{height:100vh;background:#fff;border-radius:16px;overflow:hidden}.fs-14{font-size:14px}.fs-12{font-size:12px}.fs-16{font-size:16px}.close-btn{position:absolute;top:18px;right:20px;cursor:pointer;color:#666;font-size:20px;width:28px;height:28px;border-radius:6px}.top-tabs-container{background:#dcdcdc4f;margin:0 14px;border-radius:10px;padding:4px}.top-tab{padding:6px 34px;font-size:13px;color:#666;cursor:pointer;border-bottom:2px solid transparent;transition:color .15s}.active-top-tab{font-weight:600;background:#fff;border-radius:10px}.parent-container{flex:1;overflow:hidden;padding:0}.search-bar-container{padding:12px 16px 8px}.search-bar{border:1.5px solid #e8e8e8;border-radius:10px;padding:8px 12px;transition:border .15s}.search-bar:focus-within{border-color:var(--primary-bg-color)}.search-bar img{width:16px;height:16px;opacity:.5}.search-bar input{border:none;outline:none;background:transparent;font-size:13px;color:#333;width:100%}.search-bar input::placeholder{color:#aaa}.quick-add-container{padding:4px 24px 10px;gap:10px;flex-wrap:wrap;flex-shrink:0}.quick-add-label{font-size:12px;color:#888;white-space:nowrap}.quick-add-chips{gap:6px;width:100%;overflow-y:scroll;white-space:nowrap}.quick-chip{gap:5px;padding:4px 10px;font-size:12px;border:1.5px solid #e0e0e0;border-radius:20px;cursor:pointer;color:#333;background:#fff;transition:background .12s,border-color .12s;-webkit-user-select:none;user-select:none}.quick-chip.active-quick-chip{border-color:#7c6cf0;color:#4b3fc0;font-weight:500}.quick-chip{transition:all .2s ease}.chip-emoji{font-size:14px}.content-layout{flex:1;overflow:hidden;border-top:1px solid #f0f0f0}.sidebar-group{margin-bottom:2px}.sidebar-group-header{gap:8px;padding:9px 14px;cursor:pointer;border-radius:0;transition:background .12s;-webkit-user-select:none;user-select:none;font-size:13px;color:#444}.sidebar-group-header:hover{background:#f0f0f0}.sidebar-group-active{background:#ece9fd;color:#4b3fc0;font-weight:600}.sidebar-group-icon{font-size:15px;width:20px;text-align:center}.sidebar-group-label{flex:1;font-size:13px}.sidebar-chevron{font-size:18px;width:18px;height:18px;color:#aaa;transition:transform .2s}.sidebar-chevron.rotated{transform:rotate(180deg)}.subcategory-item{padding:6px 10px 6px 8px;font-size:12px;color:#555;cursor:pointer;border-radius:6px;transition:background .12s;-webkit-user-select:none;user-select:none}.subcategory-item:hover{background:#ece9fd;color:#4b3fc0}.subcategory-active{background:#ece9fd;color:#4b3fc0;font-weight:500}.right-content{flex:1;overflow-y:auto;padding:16px 20px 16px 0}.section-group-label{font-size:13px;font-weight:600;color:#444;margin-bottom:14px}.sections-list{gap:16px}.section-card{border:1.5px solid #e8e8e8;border-radius:12px;overflow:hidden;cursor:pointer;background:#fff;transition:border-color .15s,box-shadow .15s}.section-card:hover{border-color:#bbb;box-shadow:0 2px 8px #0000000f}.section-card-selected{border-color:#7c6cf0;box-shadow:0 0 0 3px #7c6cf026}.section-card-badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.5px;color:#5a4fcf;background:#ece9fd;padding:4px 10px;margin:10px 10px 6px;border-radius:20px}.section-img-container{width:100%;overflow:hidden;background:#f7f7f7;display:flex;align-items:center;justify-content:center;max-height:200px}.no-image-placeholder{height:140px;display:flex;align-items:center;justify-content:center;color:#ccc}.no-image-placeholder mat-icon{font-size:40px;width:40px;height:40px}.section-card-info{padding:10px 14px 12px}.section-card-name{font-size:13px;font-weight:600;color:#222;margin-bottom:3px}.section-card-desc{font-size:12px;color:#888;line-height:1.5}.image-container-1{margin-bottom:16px}.empty-img{width:100px;opacity:.85}.footer-container{padding:12px 20px;border-top:1px solid #eee;background:#fff}.footer-hint mat-icon{font-size:14px;width:14px;height:14px}.btn-cancel{padding:8px 18px;font-size:13px;border:1.5px solid #e0e0e0;border-radius:8px;background:#fff;color:#444;cursor:pointer}.btn-add{padding:8px 20px;font-size:13px;font-weight:600;border:none;border-radius:8px;background:var(--primary-bg-color);color:#fff;cursor:pointer}.btn-add:disabled{opacity:.4;cursor:not-allowed}.fade-in{animation:fadeIn .25s ease}.fade-slide{animation:fadeSlide .25s ease}.stagger-item{opacity:0;transform:translateY(10px);animation:staggerFade .3s ease forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeSlide{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes staggerFade{to{opacity:1;transform:translateY(0)}}.section-card{transition:all .2s ease}@keyframes expandFade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.empty-state{height:100%;gap:10px;text-align:center}.empty-state img{width:120px;opacity:.85}.empty-title{font-size:16px;font-weight:600;color:#333}.empty-subtitle{font-size:13px;color:#777;max-width:260px}.active-subcategory{background:#7c6cf0!important;color:#fff!important}.sidebar-subcategory{overflow:hidden;animation:dropdownSmooth .25s ease}@keyframes dropdownSmooth{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.section-card:hover{transform:translateY(-4px)}.section-img-container img{transition:transform .25s ease,opacity .2s}.section-img-container:hover img{transform:scale(1.03)}.left-sidebar{width:200px;background:#f7f7fb;padding:16px 10px;overflow-y:scroll}.category-block{margin-bottom:10px}.category-header{gap:10px;padding:6px 10px;cursor:pointer;border-radius:10px;transition:background .2s}.category-header:hover{background:#ece9fd}.category-icon{font-size:18px}.category-arrow{font-size:18px;color:#888;transition:transform .25s ease}.category-arrow.rotate{transform:rotate(180deg)}.category-items{padding-left:14px;margin-top:0;gap:6px;animation:dropdownFade .25s ease}@keyframes dropdownFade{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.category-item{padding:4px 12px;font-size:12px;color:#444;cursor:pointer;border-radius:10px;transition:all .2s ease}.category-item:hover{background:#ece9fd;color:#4b3fc0}.category-item.active{background:#e6e1f7;color:#4b0d5d;font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AddSectionComponent, isStandalone: true, selector: "simpo-add-section", ngImport: i0, template: "<!-- <section class=\"main-container\">\r\n    <div class=\"header-container d-flex align-items-center justify-content-between\">\r\n        <div>Select Template</div>\r\n        <mat-icon class=\"d-flex align-items-center justify-content-center f-18 cp\" (click)=\"dialog.close()\">\r\n            close\r\n        </mat-icon>\r\n    </div>\r\n    <div class=\"parent-container\">\r\n        <div class=\"search-bar-container\">\r\n            <div class=\"search-bar d-flex gap-10\">\r\n                <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/314661c1741844234442Vector%20%281%29.png\"\r\n                    alt=\"search-bar-icon\">\r\n                <input type=\"text\" placeholder=\"Search for Sections\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchSections()\">\r\n            </div>\r\n        </div>\r\n        <div class=\"tab-container d-flex justify-content-around align-items-center\">\r\n            <ng-container *ngFor=\"let ele of tabs\">\r\n                <div class=\"tabs\" (click)=\"selectedTab = ele.value\" [class.active-tab]=\"ele.value == selectedTab\">\r\n                    {{ele.viewValue}}\r\n                    <ng-container *ngIf=\"ele.value == 'PRO' && ele.value != selectedTab\">\r\n                        <img class=\"w-30\"\r\n                            src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/468281c1744699664858Frame%201244831740%20%281%29.png\"\r\n                            alt=\"pro-icon\">\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n        <ng-container *ngIf=\"selectedTab === 'BASIC'; else proTabContent\">\r\n            <ng-container *ngIf=\"!isSearch;else emptyScreen\">\r\n                <div class=\"categories-container d-flex\">\r\n                    <div class=\"categories-sidepanel\" *ngIf=\"!loader\">\r\n                        <ng-container *ngFor=\"let ele of getObjectKeys(sections)\">\r\n                            <div class=\"side-section d-flex justify-content-center align-items-center flex-column\"\r\n                                (click)=\"selectSection(ele)\"\r\n                                [class.active-section]=\"selectedSection == sections[ele]\">\r\n                                <div class=\"image-container\">\r\n                                    <ng-container *ngIf=\"selectedSection == sections[ele]\">\r\n                                        <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/954383c1741850392802Group%201707481879.png\"\r\n                                            alt=\"icon text\">\r\n                                    </ng-container>\r\n                                    <ng-container *ngIf=\"selectedSection != sections[ele]\">\r\n                                        <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/846145c1741850574864Icon%20%281%29.png\"\r\n                                            alt=\"icon text\">\r\n                                    </ng-container>\r\n                                </div>\r\n                                <div class=\"section-text\">\r\n                                    {{ele}}\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"categories-render-section\" *ngIf=\" !loader && !tabShiftLoader\">\r\n                        <div class=\"categories-head\">\r\n                            {{selectedSectionName}}\r\n                        </div>\r\n                        <div class=\"sub-text\">\r\n                            Select a section to add to your page\r\n                        </div>\r\n                        <div class=\"sections-container\">\r\n                            <ng-container *ngFor=\"let ele of selectedSection\">\r\n                                <div class=\"section\">\r\n                                    <div class=\"section-header\">{{ele.sectionName}}</div>\r\n                                    <div class=\"section-img-container cp\"\r\n                                        (click)=\"addNewSection(ele.componentId,ele.sectionType,$event)\">\r\n                                        <ng-container *ngIf=\"ele?.image; else noImage\">\r\n                                            <img [src]=\"ele?.image\" alt=\"section image\">\r\n                                        </ng-container>\r\n                                        <ng-template #noImage>\r\n                                            <img src=\"https://img.freepik.com/premium-vector/default-image-icon-vector-missing-picture-page-website-design-mobile-app-no-photo-available_87543-11093.jpg\"\r\n                                                alt=\"section image\" class=\"h-30\">\r\n                                        </ng-template>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"categories-sidepanel\" *ngIf=\"loader\">\r\n                        <ng-container *ngFor=\"let ele of [1,1,1,1,1,1,1,1,1]\">\r\n                            <div class=\"d-flex justify-content-center align-items-center flex-column\">\r\n                                <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n                                    height: '8vh',\r\n                                    width: '65%',\r\n                                    'border-radius': '13px',\r\n                                    'margin-bottom' : '10px',\r\n                                }\" class=\"d-flex justify-content-center w-100\">\r\n                                </ngx-skeleton-loader>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"categories-render-section\" *ngIf=\"loader || tabShiftLoader\">\r\n                        <div class=\"categories-head\">\r\n                            <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n                                width: '20%',\r\n                                height : '3vh',\r\n                                'border-radius': '5px',\r\n                            }\">\r\n                            </ngx-skeleton-loader>\r\n                        </div>\r\n                        <div class=\"sub-text\">\r\n                            <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n                                width: '60%',\r\n                                height : '2vh',\r\n                                'border-radius': '5px',\r\n                            }\">\r\n                            </ngx-skeleton-loader>\r\n                        </div>\r\n                        <div class=\"sections-container\">\r\n                            <ng-container *ngFor=\"let ele of [1,1,1,1]\">\r\n                                <div class=\"section\">\r\n                                    <div>   <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n                                        width: '25%',\r\n                                        height : '2vh',\r\n                                        'border-radius': '5px',\r\n                                    }\">\r\n                                    </ngx-skeleton-loader></div>\r\n                                    <div>\r\n                                        <ngx-skeleton-loader [theme]=\"{\r\n                                            width: '100%',\r\n                                            height : '25vh',\r\n                                            'border-radius': '5px',\r\n                                            'margin':'2px'\r\n                                        }\">\r\n                                        </ngx-skeleton-loader>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-template #proTabContent>\r\n            <div class=\"empty-div d-flex align-items-center justify-content-center flex-column\">\r\n                <div class=\"image-container-1\">\r\n                    <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/377076c1743154807683image%20%286%29.png\" alt=\"empty-img\" class=\"empty-img \">\r\n                </div>\r\n                <div class=\"oops-text\">\r\n                    Coming Soon\r\n                </div>\r\n                <div class=\"oops-sub-text\">\r\n                    <div class=\"oops-sub-text-1 text-center\">Woof! Something pawsome is coming!</div>\r\n                    <div class=\"oops-sub-text-2 text-center\">\r\n                        Hey hooman! I just sniffed out something super exciting... and it\u2019s almost here! \r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n        <ng-template #emptyScreen>\r\n            <div class=\"empty-div d-flex align-items-center justify-content-center flex-column\">\r\n                <div class=\"image-container-1\">\r\n                    <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/377076c1743154807683image%20%286%29.png\" alt=\"empty-img\" class=\"empty-img \">\r\n                </div>\r\n                <div class=\"oops-text\">\r\n                    Oops! \r\n                </div>\r\n                <div class=\"oops-sub-text\">\r\n                    <div class=\"oops-sub-text-1 text-center\">I sniffed everywhere, but I couldn't find what you're looking for</div>\r\n                    <div class=\"oops-sub-text-2 text-center\">\r\n                        Maybe try a different search? \r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n    </div>\r\n</section> -->\r\n\r\n<section class=\"main-container d-flex flex-column\">\r\n\r\n    <div class=\"header-container fade-in\">\r\n        <div class=\"header-title\">Add a section</div>\r\n        <div class=\"header-subtitle\">Choose a section \u2014 you can reorder or remove it any time.</div>\r\n        <mat-icon class=\"close-btn\" (click)=\"dialog.close()\">close</mat-icon>\r\n    </div>\r\n\r\n    <div class=\"parent-container d-flex flex-column\">\r\n\r\n        <!-- Tabs -->\r\n        <div class=\"top-tabs-container d-flex justify-content-between fade-in\">\r\n            <ng-container *ngFor=\"let ele of tabs\">\r\n                <div class=\"top-tab\" (click)=\"onTabSelect(ele.value)\"\r\n                    [class.active-top-tab]=\"ele.value == selectedTab\">\r\n                    {{ele.viewValue}}\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n\r\n        <!-- Search -->\r\n        <div class=\"search-bar-container fade-in\" *ngIf=\"selectedTab != 'SAVED'\">\r\n            <div class=\"search-bar d-flex gap-2 align-items-center\">\r\n                <img\r\n                    src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/314661c1741844234442Vector%20%281%29.png\">\r\n                <input type=\"text\" placeholder='Search section...' [(ngModel)]=\"searchText\"\r\n                    (ngModelChange)=\"searchSections()\">\r\n            </div>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"selectedTab === 'BASIC'\">\r\n\r\n            <ng-container *ngIf=\"!isSearch; else emptyScreen\">\r\n\r\n                <!-- Quick Add -->\r\n                <!-- <div class=\"quick-add-container fade-in d-flex align-items-center\" *ngIf=\"!loader && !searchText\">\r\n                    <div class=\"quick-add-label\">Quick add:</div>\r\n                    <div class=\"quick-add-chips d-flex\">\r\n                        <ng-container *ngFor=\"let category of getObjectKeys(sections); let i = index\">\r\n                            <ng-container *ngIf=\"i < 6\">\r\n                                <div class=\"quick-chip stagger-item d-flex align-items-center\"\r\n                                    (click)=\"selectSection(category); toggleCategory(category)\"\r\n                                    [class.active-quick-chip]=\"selectedSectionName === category\">\r\n                                    <span class=\"chip-emoji\">{{getCategoryEmoji(category)}}</span>\r\n                                    {{getFirstSectionName(category)}}\r\n                                </div>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </div>\r\n                </div> -->\r\n\r\n                <!-- CONTENT -->\r\n                <div class=\"content-layout fade-in d-flex\" *ngIf=\"!loader\">\r\n                    <!-- LEFT -->\r\n                    <div class=\"left-sidebar\">\r\n                        <!-- <div class=\"category-header d-flex align-items-center\">\r\n                            <div class=\"category-icon d-flex align-items-center justify-content-center\">\u2728</div>\r\n                            <div class=\"fs-14\">AI Recommended</div>\r\n                        </div> -->\r\n                        <ng-container *ngFor=\"let category of getObjectKeys(sections)\">\r\n                            <div class=\"category-block\">\r\n                                <div class=\"category-header d-flex align-items-end justify-content-between\"\r\n                                    (click)=\"toggleCategory(category)\">\r\n                                    <div class=\"d-flex gap-2 align-items-center\">\r\n                                        <span class=\"category-icon\">\r\n                                            {{getCategoryEmoji(category)}}\r\n                                        </span>\r\n                                        <span class=\"fs-13\">\r\n                                            {{category}}\r\n                                        </span>\r\n                                        <span class=\"category-count\">\r\n                                            ({{sections[category]?.length}})\r\n                                        </span>\r\n                                    </div>\r\n                                    <mat-icon class=\"category-arrow\" *ngIf=\"expandedCategories[category]\">\r\n                                        expand_less\r\n                                    </mat-icon>\r\n                                    <mat-icon class=\"category-arrow\" *ngIf=\"!expandedCategories[category]\">\r\n                                        expand_more\r\n                                    </mat-icon>\r\n                                </div>\r\n                                <div class=\"category-items d-flex flex-column\" *ngIf=\"expandedCategories[category]\">\r\n                                    <ng-container *ngFor=\"let sec of sections[category]\">\r\n                                        <div class=\"category-item\"\r\n                                            [class.active]=\"selectedComponent?.componentId === sec.componentId\"\r\n                                            (click)=\"selectComponent(sec, category)\">\r\n                                            {{sec.sectionName}}\r\n                                        </div>\r\n                                    </ng-container>\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n\r\n                    <div class=\"right-content\">\r\n\r\n                        <div class=\"section-group-label\">{{selectedSectionName || 'Sections'}}</div>\r\n\r\n                        <div class=\"sections-list d-flex flex-column\" *ngIf=\"selectedSection && selectedSection.length > 0\">\r\n\r\n                            <ng-container *ngFor=\"let ele of selectedSection; let i = index\">\r\n\r\n                                    <div [id]=\"'comp-' + ele.componentId\" class=\"section-card stagger-item\" [style.animation-delay]=\"i * 40 + 'ms'\"\r\n                                        [class.section-card-selected]=\"selectedComponent?.componentId === ele.componentId\"\r\n                                        (click)=\"selectComponentAndHighlight(ele)\">\r\n\r\n                                        <div class=\"section-card-badge\" *ngIf=\"ele.sectionType\">\r\n                                            <!-- + {{ele.sectionType | uppercase}} -->\r\n                                             + {{ele.sectionName | titlecase}}\r\n                                        </div>\r\n\r\n                                        <div class=\"section-img-container d-flex align-items-center justify-content-center\">\r\n                                            <ng-container *ngIf=\"ele?.image; else noImage\">\r\n                                                <img [src]=\"ele?.image\" alt=\"section preview\">\r\n                                            </ng-container>\r\n                                            <ng-template #noImage>\r\n                                                <div class=\"no-image-placeholder d-flex align-items-center justify-content-center\">\r\n                                                    <mat-icon>image</mat-icon>\r\n                                                </div>\r\n                                            </ng-template>\r\n                                        </div>\r\n\r\n                                        <div class=\"section-card-info d-flex align-items-center justify-content-between\">\r\n                                            <div>\r\n                                                <!-- <div class=\"section-card-name\">{{ele.sectionName}}</div> -->\r\n                                                <div class=\"section-card-desc\" *ngIf=\"ele.desc\">{{ele.desc | titlecase}}</div>\r\n                                            </div>\r\n                                            <mat-icon class=\"card-check-icon\"\r\n                                                *ngIf=\"selectedComponent?.componentId === ele.componentId\">\r\n                                                check_circle\r\n                                            </mat-icon>\r\n                                        </div>\r\n\r\n                                    </div>\r\n\r\n                            </ng-container>\r\n\r\n                        </div>\r\n\r\n                        <div class=\"empty-state fade-in\" *ngIf=\"!selectedSection || selectedSection.length === 0\">\r\n                            <mat-icon class=\"empty-page-icon\">auto_awesome</mat-icon>\r\n                            <div class=\"empty-title\">Select a category</div>\r\n                            <div class=\"empty-subtitle\">\r\n                                Choose any category from the left sidebar to explore and add sections\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"content-layout d-flex\" *ngIf=\"loader\">\r\n                    <div class=\"left-sidebar\">\r\n                        <ng-container *ngFor=\"let s of [1,1,1,1,1,1,1,1]\">\r\n                            <ngx-skeleton-loader\r\n                                [theme]=\"{ width: '90%', height: '36px', 'border-radius': '8px', 'margin-bottom': '6px' }\"></ngx-skeleton-loader>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"right-content\">\r\n                        <ng-container *ngFor=\"let s of [1,1,1,1]\">\r\n                            <div class=\"section-card\">\r\n                                <ngx-skeleton-loader\r\n                                    [theme]=\"{ width: '40%', height: '20px', 'border-radius': '4px', 'margin-bottom': '8px' }\"></ngx-skeleton-loader>\r\n                                <ngx-skeleton-loader\r\n                                    [theme]=\"{ width: '100%', height: '180px', 'border-radius': '8px', 'margin-bottom': '8px' }\"></ngx-skeleton-loader>\r\n                                <ngx-skeleton-loader\r\n                                    [theme]=\"{ width: '60%', height: '16px', 'border-radius': '4px' }\"></ngx-skeleton-loader>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"selectedTab === 'SAVED'\">\r\n            <!-- Loader skeleton -->\r\n            <div class=\"content-layout d-flex\" *ngIf=\"savedLoader\">\r\n                <div class=\"left-sidebar\">\r\n                    <ng-container *ngFor=\"let s of [1,1,1,1,1]\">\r\n                        <ngx-skeleton-loader\r\n                            [theme]=\"{ width: '90%', height: '36px', 'border-radius': '8px', 'margin-bottom': '8px' }\">\r\n                        </ngx-skeleton-loader>\r\n                    </ng-container>\r\n                </div>\r\n                <div class=\"right-content\">\r\n                    <ng-container *ngFor=\"let s of [1,1,1]\">\r\n                        <div class=\"section-card\" style=\"margin-bottom:12px\">\r\n                            <ngx-skeleton-loader\r\n                                [theme]=\"{ width: '40%', height: '18px', 'border-radius': '4px', 'margin-bottom': '8px' }\">\r\n                            </ngx-skeleton-loader>\r\n                            <ngx-skeleton-loader\r\n                                [theme]=\"{ width: '100%', height: '100px', 'border-radius': '8px', 'margin-bottom': '8px' }\">\r\n                            </ngx-skeleton-loader>\r\n                            <ngx-skeleton-loader\r\n                                [theme]=\"{ width: '60%', height: '14px', 'border-radius': '4px' }\">\r\n                            </ngx-skeleton-loader>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Loaded: categories + right component card preview -->\r\n            <div class=\"content-layout fade-in d-flex\" *ngIf=\"!savedLoader && savedCategoryKeys.length > 0\">\r\n\r\n                <!-- LEFT: component categories list -->\r\n                <div class=\"left-sidebar\">\r\n                    <div class=\"saved-pages-label\">Saved Sections</div>\r\n                    <ng-container *ngFor=\"let catKey of savedCategoryKeys\">\r\n                        <div class=\"saved-page-item\"\r\n                            [class.active]=\"selectedSavedCategory === catKey\"\r\n                            (click)=\"selectSavedCategory(catKey)\">\r\n                            <mat-icon class=\"saved-page-icon\">article</mat-icon>\r\n                            <span class=\"saved-page-name\">{{catKey}}</span>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n\r\n                <!-- RIGHT: selected component preview card -->\r\n                <div class=\"right-content\">\r\n                    <div class=\"section-group-label\">Component Preview</div>\r\n\r\n                    <div class=\"sections-list d-flex flex-column\" *ngIf=\"savedSections[selectedSavedCategory]\">\r\n                        <div class=\"section-card section-card-preview fade-in\">\r\n\r\n                            <!-- Section type badge -->\r\n                            <div class=\"section-card-badge\" *ngIf=\"savedSections[selectedSavedCategory].component?.sectionType\">\r\n                                {{savedSections[selectedSavedCategory].component.sectionType.split('_').join(' ') | uppercase}}\r\n                            </div>\r\n\r\n                            <!-- Preview area (Show image if present, fallback to placeholder) -->\r\n                            <div class=\"section-img-container d-flex align-items-center justify-content-center\">\r\n                                <ng-container *ngIf=\"savedSections[selectedSavedCategory].component?.styles?.background?.image && savedSections[selectedSavedCategory].component?.styles?.background?.showImage; else savedNoImage\">\r\n                                    <img [src]=\"savedSections[selectedSavedCategory].component.styles.background.image\" alt=\"section preview\">\r\n                                </ng-container>\r\n                                <ng-template #savedNoImage>\r\n                                    <div class=\"saved-preview-placeholder d-flex flex-column align-items-center justify-content-center\">\r\n                                        <mat-icon>layers</mat-icon>\r\n                                        <span>{{savedSections[selectedSavedCategory].component?.sectionType?.split('_')?.join(' ') || 'Saved Component'}}</span>\r\n                                    </div>\r\n                                </ng-template>\r\n                            </div>\r\n\r\n                            <!-- Card info -->\r\n                            <div class=\"section-card-info\">\r\n                                <div class=\"section-card-name\">{{savedSections[selectedSavedCategory].component?.sectionName}}</div>\r\n                                <div class=\"section-card-desc\" *ngIf=\"savedSections[selectedSavedCategory].component?.desc\">\r\n                                    {{savedSections[selectedSavedCategory].component.desc}}\r\n                                </div>\r\n                            </div>\r\n\r\n                            <!-- Used In footer -->\r\n                            <div class=\"saved-card-footer\" *ngIf=\"savedSections[selectedSavedCategory].usedIn\">\r\n                                <div class=\"used-in-container d-flex align-items-center gap-2\">\r\n                                    <mat-icon class=\"used-in-icon\">web</mat-icon>\r\n                                    <span class=\"used-in-text\">\r\n                                        <strong>Used In ({{savedSections[selectedSavedCategory].usedIn.length}} Pages):</strong> \r\n                                        {{savedSections[selectedSavedCategory].usedIn.join(', ')}}\r\n                                    </span>\r\n                                </div>\r\n                            </div>\r\n\r\n                        </div>\r\n                    </div>\r\n\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Empty: no saved data at all -->\r\n            <div class=\"empty-state fade-in\" *ngIf=\"!savedLoader && savedCategoryKeys.length === 0\">\r\n                <img src=\"https://cdn-icons-png.flaticon.com/512/4076/4076549.png\" alt=\"empty\">\r\n                <div class=\"empty-title\">No saved sections</div>\r\n                <div class=\"empty-subtitle\">Sections you save from pages will appear here</div>\r\n            </div>\r\n        </ng-container>\r\n\r\n         <ng-container *ngIf=\"selectedTab === 'APPS'\">\r\n            durga prasad bhogisetti\r\n        </ng-container>\r\n\r\n\r\n        <!-- EMPTY SEARCH -->\r\n        <ng-template #emptyScreen>\r\n            <div class=\"empty-state fade-in d-flex flex-column align-items-center justify-content-center\">\r\n                <img src=\"https://cdn-icons-png.flaticon.com/512/7486/7486803.png\">\r\n                <div class=\"empty-title\">No sections found</div>\r\n                <div class=\"empty-subtitle\">\r\n                    Try searching something else or explore categories\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n\r\n    </div>\r\n\r\n    <!-- Footer -->\r\n    <div class=\"footer-container fade-in\">\r\n        <div class=\"footer-hint\">\r\n            <mat-icon>info_outline</mat-icon>\r\n            <ng-container *ngIf=\"selectedTab !== 'SAVED'\">\r\n                You can rearrange or remove this section any time.\r\n            </ng-container>\r\n            <ng-container *ngIf=\"selectedTab === 'SAVED'\">\r\n                Saved sections are read-only previews.\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"footer-actions\">\r\n            <div class=\"btn-cancel\" (click)=\"dialog.close()\">\r\n                {{ selectedTab === 'SAVED' ? 'Close' : 'Cancel' }}\r\n            </div>\r\n            <!-- Basic tab only -->\r\n            <div class=\"btn-add\" *ngIf=\"selectedTab !== 'SAVED'\"\r\n                [class.disabled]=\"!selectedComponent\"\r\n                (click)=\"selectedComponent && addNewSection(selectedComponent.componentId, selectedComponent.sectionType, $event)\">\r\n                + Add section\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n</section>", styles: ["*{font-family:var(--primary-font-family);box-sizing:border-box}mat-icon{font-family:Material Icons!important}.gap-10{gap:10px!important}.f-18{font-size:18px;cursor:pointer}.w-30{width:30px!important}.h-30{height:30vh}.cp{cursor:pointer}.fs-14{font-size:14px}.fs-12{font-size:12px}.fs-16{font-size:16px}.fw-bold{font-weight:700}.main-container{height:100vh;background:#fff;border-radius:16px;overflow:hidden;display:flex;flex-direction:column}.header-container{position:relative;padding:16px 20px 14px;background:#fff;border-bottom:1px solid #f0eef8}.header-title{font-size:16px;font-weight:700;color:#1a1733;line-height:1.4}.header-subtitle{font-size:12px;color:#9e9bb5;margin-top:2px}.close-btn{position:absolute;top:50%;right:18px;transform:translateY(-50%);cursor:pointer;color:#aaa;font-size:20px!important;width:30px!important;height:30px!important;border-radius:8px;transition:background .15s,color .15s;display:flex;align-items:center;justify-content:center}.close-btn:hover{background:#f0eeff;color:#5a4fcf}.parent-container{flex:1;overflow:hidden;background:#f9f8fd;display:flex;flex-direction:column;padding:0}.tab-container{padding:8px;margin:0 15px;gap:3%;background:#fff;border-radius:13px}.tabs{font-size:14px;font-weight:500;line-height:24px;color:#2c2c2c99;width:30%;cursor:pointer;padding:8px 0;text-align:center}.active-tab{color:#fff!important;background:var(--primary-bg-color);box-shadow:0 0 4px #00000040;border-radius:8px;transition:opacity .3s ease-in-out,transform .3s ease-in-out;opacity:1;transform:translateY(0)}.top-tabs-container{margin:12px 16px 0;background:#eeecf8;border-radius:12px;padding:4px;display:flex;gap:2px;flex-shrink:0}.top-tab{flex:1;text-align:center;padding:7px 12px;font-size:12.5px;font-weight:500;color:#888;cursor:pointer;border-radius:9px;transition:all .18s ease;-webkit-user-select:none;user-select:none;white-space:nowrap}.top-tab:hover:not(.active-top-tab){color:#555;background:#ffffff8c}.active-top-tab{background:#fff;color:#4b3fc0;font-weight:700;box-shadow:0 1px 6px #4b3fc021}.search-bar-container{padding:10px 16px 8px;flex-shrink:0}.search-bar{background:#fff;border:1.5px solid #e6e2f6;border-radius:10px;padding:8px 12px;display:flex;align-items:center;gap:8px;transition:border-color .18s,box-shadow .18s}.search-bar:focus-within{border-color:var(--primary-bg-color);box-shadow:0 0 0 3px #7c6cf01a}.search-bar img{width:15px;height:15px;opacity:.45;flex-shrink:0}.search-bar input{border:none;outline:none;background:transparent;font-size:13px;color:#333;width:100%}.search-bar input::placeholder{color:#bbb}.content-layout{flex:1;overflow:hidden;border-top:1px solid #f0eef8;display:flex;min-height:0}.categories-sidepanel{width:15%;padding:10px 5px;margin:15px 0;border-radius:10px;height:calc(70vh + -0px);overflow-y:scroll;background:#fff}.side-section{padding:6px 10px;border-radius:8px;margin-bottom:10px;cursor:pointer}.side-section img{width:16px}.side-section .image-container{background:#f9fafb;padding:5px 8px;border-radius:5px}.side-section .section-text{font-size:12px;font-weight:500;line-height:24px;text-align:center;color:#a1a1a1}.active-section{background:var(--primary-bg-color)!important;box-shadow:0 0 4px #00000040}.active-section .section-text{color:#fff!important}.active-section .image-container{background:unset!important;padding:unset!important;border-radius:unset!important}.left-sidebar{width:210px;min-width:210px;background:#fff;padding:12px 8px;overflow-y:auto;border-right:1px solid #f0eef8;height:100%}.left-sidebar::-webkit-scrollbar{width:3px}.left-sidebar::-webkit-scrollbar-thumb{background:#ddd8f5;border-radius:4px}.category-block{margin-bottom:2px}.category-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;cursor:pointer;border-radius:9px;transition:background .15s;-webkit-user-select:none;user-select:none}.category-header:hover{background:#f3f0fd}.category-icon{font-size:15px;width:20px;text-align:center;flex-shrink:0;line-height:1}.fs-13{font-size:13px}.category-count{font-size:11px;font-weight:500;color:#bbb;position:relative;top:1px}.category-arrow{font-size:18px!important;width:18px!important;height:18px!important;color:#ccc;transition:transform .22s ease,color .15s;flex-shrink:0}.category-block:has(.category-items) .category-arrow{color:#7c6cf0}.category-items{padding:2px 4px 4px 28px;display:flex;flex-direction:column;gap:1px;animation:dropdownFade .2s ease}.category-item{padding:5px 10px;font-size:12px;color:#555;cursor:pointer;border-radius:7px;transition:background .13s,color .13s;-webkit-user-select:none;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.category-item:hover{background:#f0eeff;color:#4b3fc0}.category-item.active{background:#ebe7fc;color:#4b3fc0;font-weight:600}.categories-render-section{width:85%;padding:15px;margin:15px 10px;border-radius:10px;height:calc(70vh + -0px);overflow-y:scroll;background:#fff}.categories-head{font-size:20px;font-weight:600;line-height:24px;color:#434343}.sub-text{font-size:13px;font-weight:500;line-height:24px;color:#a1a1a1;margin-bottom:10px}.section{margin-bottom:10px}.section-header{font-size:14px;font-weight:500;line-height:24px;color:#a1a1a1;margin-bottom:10px}.right-content{flex:1;overflow-y:auto;padding:14px 14px 14px 12px;height:100%;min-width:0}.right-content::-webkit-scrollbar{width:4px}.right-content::-webkit-scrollbar-thumb{background:#ddd8f5;border-radius:4px}.section-group-label{font-size:12px;font-weight:700;letter-spacing:.4px;color:#9e9bb5;margin-bottom:12px;text-transform:uppercase}.sections-list{display:flex;flex-direction:column;gap:12px}.section-card{border:1.5px solid #ebe8f8;border-radius:12px;overflow:hidden;cursor:pointer;background:#fff;transition:all .2s ease}.section-card:hover{border-color:#c4baf0;box-shadow:0 4px 16px #7c6cf01a;transform:translateY(-1px)}.section-card-preview{cursor:default!important;pointer-events:none}.section-card-preview:hover{border-color:#ebe8f8!important;box-shadow:none!important;transform:none!important}.section-card-selected{border-color:#7c6cf0!important;box-shadow:0 0 0 3px #7c6cf024!important}.section-card-badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.5px;color:#5a4fcf;background:#edeafc;padding:3px 10px;margin:10px 10px 6px;border-radius:20px}.section-img-container{width:100%;overflow:hidden;background:#f5f3fc;display:flex;align-items:center;justify-content:center;max-height:200px;min-height:100px}.section-img-container img{width:100%;display:block;object-fit:cover;transition:transform .25s ease}.section-card:hover .section-img-container img{transform:scale(1.03)}.no-image-placeholder{height:130px;display:flex;align-items:center;justify-content:center;color:#d5d0ee}.no-image-placeholder mat-icon{font-size:38px!important;width:38px!important;height:38px!important;color:#d5d0ee}.section-card-info{padding:10px 14px 12px}.section-card-name{font-size:13px;font-weight:600;color:#1a1733;margin-bottom:3px}.section-card-desc{font-size:12px;color:#9e9bb5;line-height:1.5}.card-check-icon{font-size:20px!important;width:20px!important;height:20px!important;color:#7c6cf0;flex-shrink:0;animation:checkPop .22s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes checkPop{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.quick-add-container{padding:4px 24px 10px;gap:10px;flex-wrap:wrap;flex-shrink:0}.quick-add-label{font-size:12px;color:#888;white-space:nowrap}.quick-add-chips{gap:6px;width:100%;overflow-y:scroll;white-space:nowrap}.quick-chip{gap:5px;padding:4px 10px;font-size:12px;border:1.5px solid #e0e0e0;border-radius:20px;cursor:pointer;color:#333;background:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none}.quick-chip.active-quick-chip{border-color:#7c6cf0;color:#4b3fc0;font-weight:500}.chip-emoji{font-size:14px}.saved-pages-label{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#bbb;padding:0 10px;margin-bottom:10px}.saved-page-item{display:flex;align-items:center;gap:7px;padding:7px 10px;cursor:pointer;border-radius:9px;font-size:13px;font-weight:500;color:#666;transition:background .15s,color .15s;-webkit-user-select:none;user-select:none;margin-bottom:2px;overflow:hidden}.saved-page-item:hover{background:#f0eeff;color:#4b3fc0}.saved-page-item.active{background:#ebe7fc;color:#4b3fc0;font-weight:600}.saved-page-icon{font-size:15px!important;width:15px!important;height:15px!important;color:inherit;flex-shrink:0}.saved-page-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.saved-preview-placeholder{height:100px;width:100%;background:#f5f3fc;gap:6px}.saved-preview-placeholder mat-icon{font-size:28px!important;width:28px!important;height:28px!important;color:#c8c2ee}.saved-preview-placeholder span{font-size:11px;color:#b0aac8;text-transform:capitalize}.empty-page-icon{font-size:40px!important;width:40px!important;height:40px!important;color:#d5d0ee;margin-bottom:4px}.saved-card-footer{padding:10px 14px;background:#faf9ff;border-top:1px solid #ebe8f8}.used-in-container{font-size:11.5px;color:#666}.used-in-icon{font-size:15px!important;width:15px!important;height:15px!important;color:#7c6cf0}.used-in-text{line-height:1.4}.used-in-text strong{color:#4b3fc0;font-weight:600}.empty-div{height:calc(70vh + -0px);background:#fff;margin:18px;border-radius:13px}.oops-text{font-weight:900;font-size:42px;background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent}.oops-sub-text-1{font-size:17px;font-weight:600;color:#101010e5}.oops-sub-text-2{font-size:14px;font-weight:600;color:#101010e5}.image-container-1{margin-bottom:16px}.empty-img{width:100px;opacity:.85}.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:32px 24px}.empty-state img{width:110px;opacity:.8;margin-bottom:4px}.empty-title{font-size:15px;font-weight:700;color:#2d2a4a}.empty-subtitle{font-size:12.5px;color:#aaa;max-width:240px;line-height:1.6}.footer-container{padding:12px 20px;border-top:1px solid #f0eef8;background:#fff;flex-shrink:0;display:flex;align-items:center;justify-content:space-between}.footer-hint{font-size:11.5px;color:#bbb;display:flex;align-items:center;gap:5px}.footer-hint mat-icon{font-size:14px!important;width:14px!important;height:14px!important;color:#d0cbf0}.footer-actions{display:flex;align-items:center;gap:8px}.btn-cancel{padding:8px 18px;font-size:13px;font-weight:500;border:1.5px solid #e4e0f6;border-radius:9px;background:#fff;color:#666;cursor:pointer;transition:border-color .15s,color .15s,background .15s;-webkit-user-select:none;user-select:none}.btn-cancel:hover{border-color:#b4aae8;color:#4b3fc0;background:#f8f6ff}.btn-add{padding:8px 20px;font-size:13px;font-weight:700;border:none;border-radius:9px;background:var(--primary-bg-color);color:#fff;cursor:pointer;transition:opacity .15s,box-shadow .15s,transform .15s;-webkit-user-select:none;user-select:none;box-shadow:0 3px 10px #7c6cf047}.btn-add:hover:not(.disabled){opacity:.92;transform:translateY(-1px);box-shadow:0 5px 14px #7c6cf05c}.btn-add.disabled{opacity:.38;cursor:not-allowed;box-shadow:none;pointer-events:none}.sidebar-group{margin-bottom:2px}.sidebar-group-icon{font-size:15px;width:20px;text-align:center}.sidebar-group-label{flex:1;font-size:13px}.sidebar-group-header{gap:8px;padding:9px 14px;cursor:pointer;border-radius:0;transition:background .12s;-webkit-user-select:none;user-select:none;font-size:13px;color:#444}.sidebar-group-header:hover{background:#f0f0f0}.sidebar-group-active{background:#ece9fd;color:#4b3fc0;font-weight:600}.sidebar-chevron{font-size:18px;width:18px;height:18px;color:#aaa;transition:transform .2s}.sidebar-chevron.rotated{transform:rotate(180deg)}.subcategory-item{padding:6px 10px 6px 8px;font-size:12px;color:#555;cursor:pointer;border-radius:6px;transition:background .12s;-webkit-user-select:none;user-select:none}.subcategory-item:hover{background:#ece9fd;color:#4b3fc0}.subcategory-active{background:#ece9fd;color:#4b3fc0;font-weight:500}.active-subcategory{background:#7c6cf0!important;color:#fff!important}.sidebar-subcategory{overflow:hidden;animation:dropdownSmooth .25s ease}.fade-in{animation:fadeIn .22s ease}.fade-slide{animation:fadeSlide .25s ease}.stagger-item{opacity:0;transform:translateY(8px);animation:staggerFade .28s ease forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeSlide{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes staggerFade{to{opacity:1;transform:translateY(0)}}@keyframes dropdownFade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes dropdownSmooth{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@keyframes expandFade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-add-section', standalone: true, imports: [CommonModule, MatIconModule, NgxSkeletonLoaderModule, FormsModule], template: "<!-- <section class=\"main-container\">\r\n    <div class=\"header-container d-flex align-items-center justify-content-between\">\r\n        <div>Select Template</div>\r\n        <mat-icon class=\"d-flex align-items-center justify-content-center f-18 cp\" (click)=\"dialog.close()\">\r\n            close\r\n        </mat-icon>\r\n    </div>\r\n    <div class=\"parent-container\">\r\n        <div class=\"search-bar-container\">\r\n            <div class=\"search-bar d-flex gap-10\">\r\n                <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/314661c1741844234442Vector%20%281%29.png\"\r\n                    alt=\"search-bar-icon\">\r\n                <input type=\"text\" placeholder=\"Search for Sections\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchSections()\">\r\n            </div>\r\n        </div>\r\n        <div class=\"tab-container d-flex justify-content-around align-items-center\">\r\n            <ng-container *ngFor=\"let ele of tabs\">\r\n                <div class=\"tabs\" (click)=\"selectedTab = ele.value\" [class.active-tab]=\"ele.value == selectedTab\">\r\n                    {{ele.viewValue}}\r\n                    <ng-container *ngIf=\"ele.value == 'PRO' && ele.value != selectedTab\">\r\n                        <img class=\"w-30\"\r\n                            src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/468281c1744699664858Frame%201244831740%20%281%29.png\"\r\n                            alt=\"pro-icon\">\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n        <ng-container *ngIf=\"selectedTab === 'BASIC'; else proTabContent\">\r\n            <ng-container *ngIf=\"!isSearch;else emptyScreen\">\r\n                <div class=\"categories-container d-flex\">\r\n                    <div class=\"categories-sidepanel\" *ngIf=\"!loader\">\r\n                        <ng-container *ngFor=\"let ele of getObjectKeys(sections)\">\r\n                            <div class=\"side-section d-flex justify-content-center align-items-center flex-column\"\r\n                                (click)=\"selectSection(ele)\"\r\n                                [class.active-section]=\"selectedSection == sections[ele]\">\r\n                                <div class=\"image-container\">\r\n                                    <ng-container *ngIf=\"selectedSection == sections[ele]\">\r\n                                        <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/954383c1741850392802Group%201707481879.png\"\r\n                                            alt=\"icon text\">\r\n                                    </ng-container>\r\n                                    <ng-container *ngIf=\"selectedSection != sections[ele]\">\r\n                                        <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/846145c1741850574864Icon%20%281%29.png\"\r\n                                            alt=\"icon text\">\r\n                                    </ng-container>\r\n                                </div>\r\n                                <div class=\"section-text\">\r\n                                    {{ele}}\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"categories-render-section\" *ngIf=\" !loader && !tabShiftLoader\">\r\n                        <div class=\"categories-head\">\r\n                            {{selectedSectionName}}\r\n                        </div>\r\n                        <div class=\"sub-text\">\r\n                            Select a section to add to your page\r\n                        </div>\r\n                        <div class=\"sections-container\">\r\n                            <ng-container *ngFor=\"let ele of selectedSection\">\r\n                                <div class=\"section\">\r\n                                    <div class=\"section-header\">{{ele.sectionName}}</div>\r\n                                    <div class=\"section-img-container cp\"\r\n                                        (click)=\"addNewSection(ele.componentId,ele.sectionType,$event)\">\r\n                                        <ng-container *ngIf=\"ele?.image; else noImage\">\r\n                                            <img [src]=\"ele?.image\" alt=\"section image\">\r\n                                        </ng-container>\r\n                                        <ng-template #noImage>\r\n                                            <img src=\"https://img.freepik.com/premium-vector/default-image-icon-vector-missing-picture-page-website-design-mobile-app-no-photo-available_87543-11093.jpg\"\r\n                                                alt=\"section image\" class=\"h-30\">\r\n                                        </ng-template>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"categories-sidepanel\" *ngIf=\"loader\">\r\n                        <ng-container *ngFor=\"let ele of [1,1,1,1,1,1,1,1,1]\">\r\n                            <div class=\"d-flex justify-content-center align-items-center flex-column\">\r\n                                <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n                                    height: '8vh',\r\n                                    width: '65%',\r\n                                    'border-radius': '13px',\r\n                                    'margin-bottom' : '10px',\r\n                                }\" class=\"d-flex justify-content-center w-100\">\r\n                                </ngx-skeleton-loader>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"categories-render-section\" *ngIf=\"loader || tabShiftLoader\">\r\n                        <div class=\"categories-head\">\r\n                            <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n                                width: '20%',\r\n                                height : '3vh',\r\n                                'border-radius': '5px',\r\n                            }\">\r\n                            </ngx-skeleton-loader>\r\n                        </div>\r\n                        <div class=\"sub-text\">\r\n                            <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n                                width: '60%',\r\n                                height : '2vh',\r\n                                'border-radius': '5px',\r\n                            }\">\r\n                            </ngx-skeleton-loader>\r\n                        </div>\r\n                        <div class=\"sections-container\">\r\n                            <ng-container *ngFor=\"let ele of [1,1,1,1]\">\r\n                                <div class=\"section\">\r\n                                    <div>   <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n                                        width: '25%',\r\n                                        height : '2vh',\r\n                                        'border-radius': '5px',\r\n                                    }\">\r\n                                    </ngx-skeleton-loader></div>\r\n                                    <div>\r\n                                        <ngx-skeleton-loader [theme]=\"{\r\n                                            width: '100%',\r\n                                            height : '25vh',\r\n                                            'border-radius': '5px',\r\n                                            'margin':'2px'\r\n                                        }\">\r\n                                        </ngx-skeleton-loader>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-template #proTabContent>\r\n            <div class=\"empty-div d-flex align-items-center justify-content-center flex-column\">\r\n                <div class=\"image-container-1\">\r\n                    <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/377076c1743154807683image%20%286%29.png\" alt=\"empty-img\" class=\"empty-img \">\r\n                </div>\r\n                <div class=\"oops-text\">\r\n                    Coming Soon\r\n                </div>\r\n                <div class=\"oops-sub-text\">\r\n                    <div class=\"oops-sub-text-1 text-center\">Woof! Something pawsome is coming!</div>\r\n                    <div class=\"oops-sub-text-2 text-center\">\r\n                        Hey hooman! I just sniffed out something super exciting... and it\u2019s almost here! \r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n        <ng-template #emptyScreen>\r\n            <div class=\"empty-div d-flex align-items-center justify-content-center flex-column\">\r\n                <div class=\"image-container-1\">\r\n                    <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/377076c1743154807683image%20%286%29.png\" alt=\"empty-img\" class=\"empty-img \">\r\n                </div>\r\n                <div class=\"oops-text\">\r\n                    Oops! \r\n                </div>\r\n                <div class=\"oops-sub-text\">\r\n                    <div class=\"oops-sub-text-1 text-center\">I sniffed everywhere, but I couldn't find what you're looking for</div>\r\n                    <div class=\"oops-sub-text-2 text-center\">\r\n                        Maybe try a different search? \r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n    </div>\r\n</section> -->\r\n\r\n<section class=\"main-container d-flex flex-column\">\r\n\r\n    <div class=\"header-container relative px-3 py-2 fade-in\">\r\n        <div class=\"header-title fs-16 fw-bold\">Add a section</div>\r\n        <div class=\"header-subtitle fs-12 text-secondary\">\r\n            Choose a section \u2014 you can reorder or remove it any time.\r\n        </div>\r\n        <mat-icon class=\"close-btn d-flex align-items-center justify-content-center\"\r\n            (click)=\"dialog.close()\">close</mat-icon>\r\n    </div>\r\n\r\n    <div class=\"parent-container d-flex flex-column\">\r\n\r\n        <!-- Tabs -->\r\n        <div class=\"top-tabs-container d-flex justify-content-between fade-in\">\r\n            <ng-container *ngFor=\"let ele of tabs\">\r\n                <div class=\"top-tab\" (click)=\"selectedTab = ele.value\"\r\n                    [class.active-top-tab]=\"ele.value == selectedTab\">\r\n                    {{ele.viewValue}}\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n\r\n        <!-- Search -->\r\n        <div class=\"search-bar-container fade-in\">\r\n            <div class=\"search-bar d-flex gap-2 align-items-center\">\r\n                <img\r\n                    src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/314661c1741844234442Vector%20%281%29.png\">\r\n                <input type=\"text\" placeholder='Search section...' [(ngModel)]=\"searchText\"\r\n                    (ngModelChange)=\"searchSections()\">\r\n            </div>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"selectedTab === 'BASIC'; else proTabContent\">\r\n\r\n            <ng-container *ngIf=\"!isSearch; else emptyScreen\">\r\n\r\n                <!-- Quick Add -->\r\n                <div class=\"quick-add-container fade-in d-flex align-items-center\" *ngIf=\"!loader && !searchText\">\r\n                    <div class=\"quick-add-label\">Quick add:</div>\r\n                    <div class=\"quick-add-chips d-flex\">\r\n                        <ng-container *ngFor=\"let category of getObjectKeys(sections); let i = index\">\r\n                            <ng-container *ngIf=\"i < 6\">\r\n                                <div class=\"quick-chip stagger-item d-flex align-items-center\"\r\n                                    (click)=\"selectSection(category); toggleCategory(category)\"\r\n                                    [class.active-quick-chip]=\"selectedSectionName === category\">\r\n                                    <span class=\"chip-emoji\">{{getCategoryEmoji(category)}}</span>\r\n                                    {{getFirstSectionName(category)}}\r\n                                </div>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n\r\n                <!-- CONTENT -->\r\n                <div class=\"content-layout fade-in d-flex\" *ngIf=\"!loader\">\r\n                    <!-- LEFT -->\r\n                    <div class=\"left-sidebar\">\r\n                        <div class=\"category-header d-flex align-items-center\">\r\n                            <div class=\"category-icon d-flex align-items-center justify-content-center\">\u2728</div>\r\n                            <div class=\"fs-14\">AI Recommended</div>\r\n                        </div>\r\n                        <ng-container *ngFor=\"let category of getObjectKeys(sections)\">\r\n                            <div class=\"category-block\">\r\n                                <div class=\"category-header d-flex align-items-end justify-content-between\"\r\n                                    (click)=\"toggleCategory(category)\">\r\n                                    <div class=\"d-flex gap-2 align-items-center\">\r\n                                        <span class=\"category-icon\">\r\n                                            {{getCategoryEmoji(category)}}\r\n                                        </span>\r\n                                        <span class=\" fs-14\">\r\n                                            {{category}}\r\n                                        </span>\r\n                                    </div>\r\n                                    <mat-icon class=\"category-arrow\" *ngIf=\"expandedCategories[category]\">\r\n                                        expand_less\r\n                                    </mat-icon>\r\n                                    <mat-icon class=\"category-arrow\" *ngIf=\"!expandedCategories[category]\">\r\n                                        expand_more\r\n                                    </mat-icon>\r\n                                </div>\r\n                                <div class=\"category-items d-flex flex-column\" *ngIf=\"expandedCategories[category]\">\r\n                                    <ng-container *ngFor=\"let sec of sections[category]\">\r\n                                        <div class=\"category-item\"\r\n                                            [class.active]=\"selectedComponent?.componentId === sec.componentId\"\r\n                                            (click)=\"selectComponent(sec, category)\">\r\n                                            {{sec.sectionName}}\r\n                                        </div>\r\n                                    </ng-container>\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n\r\n                    <!-- RIGHT -->\r\n                    <div class=\"right-content\">\r\n\r\n                        <div class=\"section-group-label\">Most impactful sections</div>\r\n\r\n                        <div class=\"sections-list d-flex flex-column\">\r\n\r\n                            <ng-container *ngFor=\"let ele of selectedSection; let i = index\">\r\n\r\n                                <!-- FILTERED VIEW -->\r\n                                <ng-container\r\n                                    *ngIf=\"!selectedComponent || selectedComponent?.componentId === ele.componentId\">\r\n\r\n                                    <div class=\"section-card stagger-item\" [style.animation-delay]=\"i * 40 + 'ms'\"\r\n                                        [class.section-card-selected]=\"selectedComponent?.componentId === ele.componentId\"\r\n                                        (click)=\"selectComponentAndHighlight(ele)\">\r\n\r\n                                        <div class=\"section-card-badge\" *ngIf=\"ele.sectionType\">\r\n                                            + {{ele.sectionType | uppercase}}\r\n                                        </div>\r\n\r\n                                        <div\r\n                                            class=\"section-img-container d-flex align-items-center justify-content-center\">\r\n                                            <ng-container *ngIf=\"ele?.image; else noImage\">\r\n                                                <img [src]=\"ele?.image\">\r\n                                            </ng-container>\r\n\r\n                                            <ng-template #noImage>\r\n                                                <div\r\n                                                    class=\"no-image-placeholder d-flex align-items-center justify-content-center\">\r\n                                                    <mat-icon>image</mat-icon>\r\n                                                </div>\r\n                                            </ng-template>\r\n                                        </div>\r\n\r\n                                        <div class=\"section-card-info\">\r\n                                            <div class=\"section-card-name\">{{ele.sectionName}}</div>\r\n                                            <div class=\"section-card-desc\" *ngIf=\"ele.desc\">{{ele.desc}}</div>\r\n                                        </div>\r\n\r\n                                    </div>\r\n\r\n                                </ng-container>\r\n\r\n                            </ng-container>\r\n\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"content-layout d-flex\" *ngIf=\"loader\">\r\n                    <div class=\"left-sidebar\">\r\n                        <ng-container *ngFor=\"let s of [1,1,1,1,1,1,1,1]\">\r\n                            <ngx-skeleton-loader\r\n                                [theme]=\"{ width: '90%', height: '36px', 'border-radius': '8px', 'margin-bottom': '6px' }\"></ngx-skeleton-loader>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"right-content\">\r\n                        <ng-container *ngFor=\"let s of [1,1,1,1]\">\r\n                            <div class=\"section-card\">\r\n                                <ngx-skeleton-loader\r\n                                    [theme]=\"{ width: '40%', height: '20px', 'border-radius': '4px', 'margin-bottom': '8px' }\"></ngx-skeleton-loader>\r\n                                <ngx-skeleton-loader\r\n                                    [theme]=\"{ width: '100%', height: '180px', 'border-radius': '8px', 'margin-bottom': '8px' }\"></ngx-skeleton-loader>\r\n                                <ngx-skeleton-loader\r\n                                    [theme]=\"{ width: '60%', height: '16px', 'border-radius': '4px' }\"></ngx-skeleton-loader>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n        <!-- EMPTY SEARCH -->\r\n        <ng-template #emptyScreen>\r\n            <div class=\"empty-state fade-in d-flex flex-column align-items-center justify-content-center\">\r\n                <img src=\"https://cdn-icons-png.flaticon.com/512/7486/7486803.png\">\r\n                <div class=\"empty-title\">No sections found</div>\r\n                <div class=\"empty-subtitle\">\r\n                    Try searching something else or explore categories\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n\r\n        <!-- PRO TAB -->\r\n        <ng-template #proTabContent>\r\n            <div class=\"empty-state fade-in d-flex flex-column align-items-center justify-content-center\">\r\n                <img src=\"https://cdn-icons-png.flaticon.com/512/4076/4076549.png\">\r\n                <div class=\"empty-title\">Coming Soon</div>\r\n                <div class=\"empty-subtitle\">\r\n                    Something awesome is on the way \uD83D\uDE80\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n\r\n    </div>\r\n\r\n    <!-- Footer -->\r\n    <div class=\"footer-container fade-in d-flex align-items-center justify-content-between\">\r\n        <div class=\"footer-hint fs-12 text-secondary d-flex align-items-center gap-1\">\r\n            <mat-icon>info</mat-icon>\r\n            You can rearrange or remove this section any time.\r\n        </div>\r\n\r\n        <div class=\"footer-actions d-flex align-items-center gap-2\">\r\n            <div class=\"btn-cancel fs-14\" (click)=\"dialog.close()\">Cancel</div>\r\n            <div class=\"btn-add fs-14\" [class.disabled]=\"!selectedComponent\"\r\n                (click)=\"selectedComponent && addNewSection(selectedComponent.componentId, selectedComponent.sectionType, $event)\">\r\n                + Add section\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}.header-container{padding:12px 15px;font-size:15px;line-height:24px;font-weight:600;color:#000;margin-bottom:2px}.gap-10{gap:10px!important}.tab-container{padding:8px;margin:0 15px;gap:3%;background:#fff;border-radius:13px}.tabs{font-size:14px;font-weight:500;line-height:24px;color:#2c2c2c99;width:30%;cursor:pointer;padding:8px 0;text-align:center}.active-tab{color:#fff!important;background:var(--primary-bg-color);box-shadow:0 0 4px #00000040;border-radius:8px;transition:opacity .3s ease-in-out,transform .3s ease-in-out;opacity:1;transform:translateY(0)}.categories-sidepanel{width:15%;padding:10px 5px;margin:15px 0;border-radius:10px;height:calc(70vh + -0px);overflow-y:scroll;background:#fff}.side-section{padding:6px 10px;border-radius:8px;margin-bottom:10px;cursor:pointer}.side-section img{width:16px}.side-section .image-container{background:#f9fafb;padding:5px 8px;border-radius:5px}.side-section .section-text{font-size:12px;font-weight:500;line-height:24px;text-align:center;color:#a1a1a1}.active-section{background:var(--primary-bg-color)!important;box-shadow:0 0 4px #00000040}.active-section .section-text{color:#fff!important}.active-section .image-container{background:unset!important;padding:unset!important;border-radius:unset!important}.categories-render-section{width:85%;padding:15px;margin:15px 10px;border-radius:10px;height:calc(70vh + -0px);overflow-y:scroll;background:#fff}.categories-head{font-size:20px;font-weight:600;line-height:24px;color:#434343}.sub-text{font-size:13px;font-weight:500;line-height:24px;color:#a1a1a1;margin-bottom:10px}.section{margin-bottom:10px}.section-header{font-size:14px;font-weight:500;line-height:24px;color:#a1a1a1;margin-bottom:10px}.section-img-container{padding:18px;border-radius:8px;background:#f9fafb}.section-img-container img{width:100%}.search-bar-container{padding:15px}.parent-container{background:#fafafa}.f-18{font-size:18px;cursor:pointer}.w-30{width:30px!important}.h-30{height:30vh}.cp{cursor:pointer}.empty-div{height:calc(70vh + -0px);background:#fff;margin:18px;border-radius:13px}.oops-text{font-weight:900;font-size:42px;background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent}.oops-sub-text-1{font-size:17px;font-weight:600;color:#101010e5}.oops-sub-text-2{font-size:14px;font-weight:600;color:#101010e5}.main-container{height:100vh;background:#fff;border-radius:16px;overflow:hidden}.fs-14{font-size:14px}.fs-12{font-size:12px}.fs-16{font-size:16px}.close-btn{position:absolute;top:18px;right:20px;cursor:pointer;color:#666;font-size:20px;width:28px;height:28px;border-radius:6px}.top-tabs-container{background:#dcdcdc4f;margin:0 14px;border-radius:10px;padding:4px}.top-tab{padding:6px 34px;font-size:13px;color:#666;cursor:pointer;border-bottom:2px solid transparent;transition:color .15s}.active-top-tab{font-weight:600;background:#fff;border-radius:10px}.parent-container{flex:1;overflow:hidden;padding:0}.search-bar-container{padding:12px 16px 8px}.search-bar{border:1.5px solid #e8e8e8;border-radius:10px;padding:8px 12px;transition:border .15s}.search-bar:focus-within{border-color:var(--primary-bg-color)}.search-bar img{width:16px;height:16px;opacity:.5}.search-bar input{border:none;outline:none;background:transparent;font-size:13px;color:#333;width:100%}.search-bar input::placeholder{color:#aaa}.quick-add-container{padding:4px 24px 10px;gap:10px;flex-wrap:wrap;flex-shrink:0}.quick-add-label{font-size:12px;color:#888;white-space:nowrap}.quick-add-chips{gap:6px;width:100%;overflow-y:scroll;white-space:nowrap}.quick-chip{gap:5px;padding:4px 10px;font-size:12px;border:1.5px solid #e0e0e0;border-radius:20px;cursor:pointer;color:#333;background:#fff;transition:background .12s,border-color .12s;-webkit-user-select:none;user-select:none}.quick-chip.active-quick-chip{border-color:#7c6cf0;color:#4b3fc0;font-weight:500}.quick-chip{transition:all .2s ease}.chip-emoji{font-size:14px}.content-layout{flex:1;overflow:hidden;border-top:1px solid #f0f0f0}.sidebar-group{margin-bottom:2px}.sidebar-group-header{gap:8px;padding:9px 14px;cursor:pointer;border-radius:0;transition:background .12s;-webkit-user-select:none;user-select:none;font-size:13px;color:#444}.sidebar-group-header:hover{background:#f0f0f0}.sidebar-group-active{background:#ece9fd;color:#4b3fc0;font-weight:600}.sidebar-group-icon{font-size:15px;width:20px;text-align:center}.sidebar-group-label{flex:1;font-size:13px}.sidebar-chevron{font-size:18px;width:18px;height:18px;color:#aaa;transition:transform .2s}.sidebar-chevron.rotated{transform:rotate(180deg)}.subcategory-item{padding:6px 10px 6px 8px;font-size:12px;color:#555;cursor:pointer;border-radius:6px;transition:background .12s;-webkit-user-select:none;user-select:none}.subcategory-item:hover{background:#ece9fd;color:#4b3fc0}.subcategory-active{background:#ece9fd;color:#4b3fc0;font-weight:500}.right-content{flex:1;overflow-y:auto;padding:16px 20px 16px 0}.section-group-label{font-size:13px;font-weight:600;color:#444;margin-bottom:14px}.sections-list{gap:16px}.section-card{border:1.5px solid #e8e8e8;border-radius:12px;overflow:hidden;cursor:pointer;background:#fff;transition:border-color .15s,box-shadow .15s}.section-card:hover{border-color:#bbb;box-shadow:0 2px 8px #0000000f}.section-card-selected{border-color:#7c6cf0;box-shadow:0 0 0 3px #7c6cf026}.section-card-badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.5px;color:#5a4fcf;background:#ece9fd;padding:4px 10px;margin:10px 10px 6px;border-radius:20px}.section-img-container{width:100%;overflow:hidden;background:#f7f7f7;display:flex;align-items:center;justify-content:center;max-height:200px}.no-image-placeholder{height:140px;display:flex;align-items:center;justify-content:center;color:#ccc}.no-image-placeholder mat-icon{font-size:40px;width:40px;height:40px}.section-card-info{padding:10px 14px 12px}.section-card-name{font-size:13px;font-weight:600;color:#222;margin-bottom:3px}.section-card-desc{font-size:12px;color:#888;line-height:1.5}.image-container-1{margin-bottom:16px}.empty-img{width:100px;opacity:.85}.footer-container{padding:12px 20px;border-top:1px solid #eee;background:#fff}.footer-hint mat-icon{font-size:14px;width:14px;height:14px}.btn-cancel{padding:8px 18px;font-size:13px;border:1.5px solid #e0e0e0;border-radius:8px;background:#fff;color:#444;cursor:pointer}.btn-add{padding:8px 20px;font-size:13px;font-weight:600;border:none;border-radius:8px;background:var(--primary-bg-color);color:#fff;cursor:pointer}.btn-add:disabled{opacity:.4;cursor:not-allowed}.fade-in{animation:fadeIn .25s ease}.fade-slide{animation:fadeSlide .25s ease}.stagger-item{opacity:0;transform:translateY(10px);animation:staggerFade .3s ease forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeSlide{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes staggerFade{to{opacity:1;transform:translateY(0)}}.section-card{transition:all .2s ease}@keyframes expandFade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.empty-state{height:100%;gap:10px;text-align:center}.empty-state img{width:120px;opacity:.85}.empty-title{font-size:16px;font-weight:600;color:#333}.empty-subtitle{font-size:13px;color:#777;max-width:260px}.active-subcategory{background:#7c6cf0!important;color:#fff!important}.sidebar-subcategory{overflow:hidden;animation:dropdownSmooth .25s ease}@keyframes dropdownSmooth{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.section-card:hover{transform:translateY(-4px)}.section-img-container img{transition:transform .25s ease,opacity .2s}.section-img-container:hover img{transform:scale(1.03)}.left-sidebar{width:200px;background:#f7f7fb;padding:16px 10px;overflow-y:scroll}.category-block{margin-bottom:10px}.category-header{gap:10px;padding:6px 10px;cursor:pointer;border-radius:10px;transition:background .2s}.category-header:hover{background:#ece9fd}.category-icon{font-size:18px}.category-arrow{font-size:18px;color:#888;transition:transform .25s ease}.category-arrow.rotate{transform:rotate(180deg)}.category-items{padding-left:14px;margin-top:0;gap:6px;animation:dropdownFade .25s ease}@keyframes dropdownFade{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.category-item{padding:4px 12px;font-size:12px;color:#444;cursor:pointer;border-radius:10px;transition:all .2s ease}.category-item:hover{background:#ece9fd;color:#4b3fc0}.category-item.active{background:#e6e1f7;color:#4b0d5d;font-weight:600}\n"] }]
+            args: [{ selector: 'simpo-add-section', standalone: true, imports: [CommonModule, MatIconModule, NgxSkeletonLoaderModule, FormsModule], template: "<!-- <section class=\"main-container\">\r\n    <div class=\"header-container d-flex align-items-center justify-content-between\">\r\n        <div>Select Template</div>\r\n        <mat-icon class=\"d-flex align-items-center justify-content-center f-18 cp\" (click)=\"dialog.close()\">\r\n            close\r\n        </mat-icon>\r\n    </div>\r\n    <div class=\"parent-container\">\r\n        <div class=\"search-bar-container\">\r\n            <div class=\"search-bar d-flex gap-10\">\r\n                <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/314661c1741844234442Vector%20%281%29.png\"\r\n                    alt=\"search-bar-icon\">\r\n                <input type=\"text\" placeholder=\"Search for Sections\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchSections()\">\r\n            </div>\r\n        </div>\r\n        <div class=\"tab-container d-flex justify-content-around align-items-center\">\r\n            <ng-container *ngFor=\"let ele of tabs\">\r\n                <div class=\"tabs\" (click)=\"selectedTab = ele.value\" [class.active-tab]=\"ele.value == selectedTab\">\r\n                    {{ele.viewValue}}\r\n                    <ng-container *ngIf=\"ele.value == 'PRO' && ele.value != selectedTab\">\r\n                        <img class=\"w-30\"\r\n                            src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/468281c1744699664858Frame%201244831740%20%281%29.png\"\r\n                            alt=\"pro-icon\">\r\n                    </ng-container>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n        <ng-container *ngIf=\"selectedTab === 'BASIC'; else proTabContent\">\r\n            <ng-container *ngIf=\"!isSearch;else emptyScreen\">\r\n                <div class=\"categories-container d-flex\">\r\n                    <div class=\"categories-sidepanel\" *ngIf=\"!loader\">\r\n                        <ng-container *ngFor=\"let ele of getObjectKeys(sections)\">\r\n                            <div class=\"side-section d-flex justify-content-center align-items-center flex-column\"\r\n                                (click)=\"selectSection(ele)\"\r\n                                [class.active-section]=\"selectedSection == sections[ele]\">\r\n                                <div class=\"image-container\">\r\n                                    <ng-container *ngIf=\"selectedSection == sections[ele]\">\r\n                                        <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/954383c1741850392802Group%201707481879.png\"\r\n                                            alt=\"icon text\">\r\n                                    </ng-container>\r\n                                    <ng-container *ngIf=\"selectedSection != sections[ele]\">\r\n                                        <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/846145c1741850574864Icon%20%281%29.png\"\r\n                                            alt=\"icon text\">\r\n                                    </ng-container>\r\n                                </div>\r\n                                <div class=\"section-text\">\r\n                                    {{ele}}\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"categories-render-section\" *ngIf=\" !loader && !tabShiftLoader\">\r\n                        <div class=\"categories-head\">\r\n                            {{selectedSectionName}}\r\n                        </div>\r\n                        <div class=\"sub-text\">\r\n                            Select a section to add to your page\r\n                        </div>\r\n                        <div class=\"sections-container\">\r\n                            <ng-container *ngFor=\"let ele of selectedSection\">\r\n                                <div class=\"section\">\r\n                                    <div class=\"section-header\">{{ele.sectionName}}</div>\r\n                                    <div class=\"section-img-container cp\"\r\n                                        (click)=\"addNewSection(ele.componentId,ele.sectionType,$event)\">\r\n                                        <ng-container *ngIf=\"ele?.image; else noImage\">\r\n                                            <img [src]=\"ele?.image\" alt=\"section image\">\r\n                                        </ng-container>\r\n                                        <ng-template #noImage>\r\n                                            <img src=\"https://img.freepik.com/premium-vector/default-image-icon-vector-missing-picture-page-website-design-mobile-app-no-photo-available_87543-11093.jpg\"\r\n                                                alt=\"section image\" class=\"h-30\">\r\n                                        </ng-template>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"categories-sidepanel\" *ngIf=\"loader\">\r\n                        <ng-container *ngFor=\"let ele of [1,1,1,1,1,1,1,1,1]\">\r\n                            <div class=\"d-flex justify-content-center align-items-center flex-column\">\r\n                                <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n                                    height: '8vh',\r\n                                    width: '65%',\r\n                                    'border-radius': '13px',\r\n                                    'margin-bottom' : '10px',\r\n                                }\" class=\"d-flex justify-content-center w-100\">\r\n                                </ngx-skeleton-loader>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"categories-render-section\" *ngIf=\"loader || tabShiftLoader\">\r\n                        <div class=\"categories-head\">\r\n                            <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n                                width: '20%',\r\n                                height : '3vh',\r\n                                'border-radius': '5px',\r\n                            }\">\r\n                            </ngx-skeleton-loader>\r\n                        </div>\r\n                        <div class=\"sub-text\">\r\n                            <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n                                width: '60%',\r\n                                height : '2vh',\r\n                                'border-radius': '5px',\r\n                            }\">\r\n                            </ngx-skeleton-loader>\r\n                        </div>\r\n                        <div class=\"sections-container\">\r\n                            <ng-container *ngFor=\"let ele of [1,1,1,1]\">\r\n                                <div class=\"section\">\r\n                                    <div>   <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n                                        width: '25%',\r\n                                        height : '2vh',\r\n                                        'border-radius': '5px',\r\n                                    }\">\r\n                                    </ngx-skeleton-loader></div>\r\n                                    <div>\r\n                                        <ngx-skeleton-loader [theme]=\"{\r\n                                            width: '100%',\r\n                                            height : '25vh',\r\n                                            'border-radius': '5px',\r\n                                            'margin':'2px'\r\n                                        }\">\r\n                                        </ngx-skeleton-loader>\r\n                                    </div>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-template #proTabContent>\r\n            <div class=\"empty-div d-flex align-items-center justify-content-center flex-column\">\r\n                <div class=\"image-container-1\">\r\n                    <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/377076c1743154807683image%20%286%29.png\" alt=\"empty-img\" class=\"empty-img \">\r\n                </div>\r\n                <div class=\"oops-text\">\r\n                    Coming Soon\r\n                </div>\r\n                <div class=\"oops-sub-text\">\r\n                    <div class=\"oops-sub-text-1 text-center\">Woof! Something pawsome is coming!</div>\r\n                    <div class=\"oops-sub-text-2 text-center\">\r\n                        Hey hooman! I just sniffed out something super exciting... and it\u2019s almost here! \r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n        <ng-template #emptyScreen>\r\n            <div class=\"empty-div d-flex align-items-center justify-content-center flex-column\">\r\n                <div class=\"image-container-1\">\r\n                    <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/377076c1743154807683image%20%286%29.png\" alt=\"empty-img\" class=\"empty-img \">\r\n                </div>\r\n                <div class=\"oops-text\">\r\n                    Oops! \r\n                </div>\r\n                <div class=\"oops-sub-text\">\r\n                    <div class=\"oops-sub-text-1 text-center\">I sniffed everywhere, but I couldn't find what you're looking for</div>\r\n                    <div class=\"oops-sub-text-2 text-center\">\r\n                        Maybe try a different search? \r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n    </div>\r\n</section> -->\r\n\r\n<section class=\"main-container d-flex flex-column\">\r\n\r\n    <div class=\"header-container fade-in\">\r\n        <div class=\"header-title\">Add a section</div>\r\n        <div class=\"header-subtitle\">Choose a section \u2014 you can reorder or remove it any time.</div>\r\n        <mat-icon class=\"close-btn\" (click)=\"dialog.close()\">close</mat-icon>\r\n    </div>\r\n\r\n    <div class=\"parent-container d-flex flex-column\">\r\n\r\n        <!-- Tabs -->\r\n        <div class=\"top-tabs-container d-flex justify-content-between fade-in\">\r\n            <ng-container *ngFor=\"let ele of tabs\">\r\n                <div class=\"top-tab\" (click)=\"onTabSelect(ele.value)\"\r\n                    [class.active-top-tab]=\"ele.value == selectedTab\">\r\n                    {{ele.viewValue}}\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n\r\n        <!-- Search -->\r\n        <div class=\"search-bar-container fade-in\" *ngIf=\"selectedTab != 'SAVED'\">\r\n            <div class=\"search-bar d-flex gap-2 align-items-center\">\r\n                <img\r\n                    src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/314661c1741844234442Vector%20%281%29.png\">\r\n                <input type=\"text\" placeholder='Search section...' [(ngModel)]=\"searchText\"\r\n                    (ngModelChange)=\"searchSections()\">\r\n            </div>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"selectedTab === 'BASIC'\">\r\n\r\n            <ng-container *ngIf=\"!isSearch; else emptyScreen\">\r\n\r\n                <!-- Quick Add -->\r\n                <!-- <div class=\"quick-add-container fade-in d-flex align-items-center\" *ngIf=\"!loader && !searchText\">\r\n                    <div class=\"quick-add-label\">Quick add:</div>\r\n                    <div class=\"quick-add-chips d-flex\">\r\n                        <ng-container *ngFor=\"let category of getObjectKeys(sections); let i = index\">\r\n                            <ng-container *ngIf=\"i < 6\">\r\n                                <div class=\"quick-chip stagger-item d-flex align-items-center\"\r\n                                    (click)=\"selectSection(category); toggleCategory(category)\"\r\n                                    [class.active-quick-chip]=\"selectedSectionName === category\">\r\n                                    <span class=\"chip-emoji\">{{getCategoryEmoji(category)}}</span>\r\n                                    {{getFirstSectionName(category)}}\r\n                                </div>\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </div>\r\n                </div> -->\r\n\r\n                <!-- CONTENT -->\r\n                <div class=\"content-layout fade-in d-flex\" *ngIf=\"!loader\">\r\n                    <!-- LEFT -->\r\n                    <div class=\"left-sidebar\">\r\n                        <!-- <div class=\"category-header d-flex align-items-center\">\r\n                            <div class=\"category-icon d-flex align-items-center justify-content-center\">\u2728</div>\r\n                            <div class=\"fs-14\">AI Recommended</div>\r\n                        </div> -->\r\n                        <ng-container *ngFor=\"let category of getObjectKeys(sections)\">\r\n                            <div class=\"category-block\">\r\n                                <div class=\"category-header d-flex align-items-end justify-content-between\"\r\n                                    (click)=\"toggleCategory(category)\">\r\n                                    <div class=\"d-flex gap-2 align-items-center\">\r\n                                        <span class=\"category-icon\">\r\n                                            {{getCategoryEmoji(category)}}\r\n                                        </span>\r\n                                        <span class=\"fs-13\">\r\n                                            {{category}}\r\n                                        </span>\r\n                                        <span class=\"category-count\">\r\n                                            ({{sections[category]?.length}})\r\n                                        </span>\r\n                                    </div>\r\n                                    <mat-icon class=\"category-arrow\" *ngIf=\"expandedCategories[category]\">\r\n                                        expand_less\r\n                                    </mat-icon>\r\n                                    <mat-icon class=\"category-arrow\" *ngIf=\"!expandedCategories[category]\">\r\n                                        expand_more\r\n                                    </mat-icon>\r\n                                </div>\r\n                                <div class=\"category-items d-flex flex-column\" *ngIf=\"expandedCategories[category]\">\r\n                                    <ng-container *ngFor=\"let sec of sections[category]\">\r\n                                        <div class=\"category-item\"\r\n                                            [class.active]=\"selectedComponent?.componentId === sec.componentId\"\r\n                                            (click)=\"selectComponent(sec, category)\">\r\n                                            {{sec.sectionName}}\r\n                                        </div>\r\n                                    </ng-container>\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n\r\n                    <div class=\"right-content\">\r\n\r\n                        <div class=\"section-group-label\">{{selectedSectionName || 'Sections'}}</div>\r\n\r\n                        <div class=\"sections-list d-flex flex-column\" *ngIf=\"selectedSection && selectedSection.length > 0\">\r\n\r\n                            <ng-container *ngFor=\"let ele of selectedSection; let i = index\">\r\n\r\n                                    <div [id]=\"'comp-' + ele.componentId\" class=\"section-card stagger-item\" [style.animation-delay]=\"i * 40 + 'ms'\"\r\n                                        [class.section-card-selected]=\"selectedComponent?.componentId === ele.componentId\"\r\n                                        (click)=\"selectComponentAndHighlight(ele)\">\r\n\r\n                                        <div class=\"section-card-badge\" *ngIf=\"ele.sectionType\">\r\n                                            <!-- + {{ele.sectionType | uppercase}} -->\r\n                                             + {{ele.sectionName | titlecase}}\r\n                                        </div>\r\n\r\n                                        <div class=\"section-img-container d-flex align-items-center justify-content-center\">\r\n                                            <ng-container *ngIf=\"ele?.image; else noImage\">\r\n                                                <img [src]=\"ele?.image\" alt=\"section preview\">\r\n                                            </ng-container>\r\n                                            <ng-template #noImage>\r\n                                                <div class=\"no-image-placeholder d-flex align-items-center justify-content-center\">\r\n                                                    <mat-icon>image</mat-icon>\r\n                                                </div>\r\n                                            </ng-template>\r\n                                        </div>\r\n\r\n                                        <div class=\"section-card-info d-flex align-items-center justify-content-between\">\r\n                                            <div>\r\n                                                <!-- <div class=\"section-card-name\">{{ele.sectionName}}</div> -->\r\n                                                <div class=\"section-card-desc\" *ngIf=\"ele.desc\">{{ele.desc | titlecase}}</div>\r\n                                            </div>\r\n                                            <mat-icon class=\"card-check-icon\"\r\n                                                *ngIf=\"selectedComponent?.componentId === ele.componentId\">\r\n                                                check_circle\r\n                                            </mat-icon>\r\n                                        </div>\r\n\r\n                                    </div>\r\n\r\n                            </ng-container>\r\n\r\n                        </div>\r\n\r\n                        <div class=\"empty-state fade-in\" *ngIf=\"!selectedSection || selectedSection.length === 0\">\r\n                            <mat-icon class=\"empty-page-icon\">auto_awesome</mat-icon>\r\n                            <div class=\"empty-title\">Select a category</div>\r\n                            <div class=\"empty-subtitle\">\r\n                                Choose any category from the left sidebar to explore and add sections\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"content-layout d-flex\" *ngIf=\"loader\">\r\n                    <div class=\"left-sidebar\">\r\n                        <ng-container *ngFor=\"let s of [1,1,1,1,1,1,1,1]\">\r\n                            <ngx-skeleton-loader\r\n                                [theme]=\"{ width: '90%', height: '36px', 'border-radius': '8px', 'margin-bottom': '6px' }\"></ngx-skeleton-loader>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"right-content\">\r\n                        <ng-container *ngFor=\"let s of [1,1,1,1]\">\r\n                            <div class=\"section-card\">\r\n                                <ngx-skeleton-loader\r\n                                    [theme]=\"{ width: '40%', height: '20px', 'border-radius': '4px', 'margin-bottom': '8px' }\"></ngx-skeleton-loader>\r\n                                <ngx-skeleton-loader\r\n                                    [theme]=\"{ width: '100%', height: '180px', 'border-radius': '8px', 'margin-bottom': '8px' }\"></ngx-skeleton-loader>\r\n                                <ngx-skeleton-loader\r\n                                    [theme]=\"{ width: '60%', height: '16px', 'border-radius': '4px' }\"></ngx-skeleton-loader>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"selectedTab === 'SAVED'\">\r\n            <!-- Loader skeleton -->\r\n            <div class=\"content-layout d-flex\" *ngIf=\"savedLoader\">\r\n                <div class=\"left-sidebar\">\r\n                    <ng-container *ngFor=\"let s of [1,1,1,1,1]\">\r\n                        <ngx-skeleton-loader\r\n                            [theme]=\"{ width: '90%', height: '36px', 'border-radius': '8px', 'margin-bottom': '8px' }\">\r\n                        </ngx-skeleton-loader>\r\n                    </ng-container>\r\n                </div>\r\n                <div class=\"right-content\">\r\n                    <ng-container *ngFor=\"let s of [1,1,1]\">\r\n                        <div class=\"section-card\" style=\"margin-bottom:12px\">\r\n                            <ngx-skeleton-loader\r\n                                [theme]=\"{ width: '40%', height: '18px', 'border-radius': '4px', 'margin-bottom': '8px' }\">\r\n                            </ngx-skeleton-loader>\r\n                            <ngx-skeleton-loader\r\n                                [theme]=\"{ width: '100%', height: '100px', 'border-radius': '8px', 'margin-bottom': '8px' }\">\r\n                            </ngx-skeleton-loader>\r\n                            <ngx-skeleton-loader\r\n                                [theme]=\"{ width: '60%', height: '14px', 'border-radius': '4px' }\">\r\n                            </ngx-skeleton-loader>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Loaded: categories + right component card preview -->\r\n            <div class=\"content-layout fade-in d-flex\" *ngIf=\"!savedLoader && savedCategoryKeys.length > 0\">\r\n\r\n                <!-- LEFT: component categories list -->\r\n                <div class=\"left-sidebar\">\r\n                    <div class=\"saved-pages-label\">Saved Sections</div>\r\n                    <ng-container *ngFor=\"let catKey of savedCategoryKeys\">\r\n                        <div class=\"saved-page-item\"\r\n                            [class.active]=\"selectedSavedCategory === catKey\"\r\n                            (click)=\"selectSavedCategory(catKey)\">\r\n                            <mat-icon class=\"saved-page-icon\">article</mat-icon>\r\n                            <span class=\"saved-page-name\">{{catKey}}</span>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n\r\n                <!-- RIGHT: selected component preview card -->\r\n                <div class=\"right-content\">\r\n                    <div class=\"section-group-label\">Component Preview</div>\r\n\r\n                    <div class=\"sections-list d-flex flex-column\" *ngIf=\"savedSections[selectedSavedCategory]\">\r\n                        <div class=\"section-card section-card-preview fade-in\">\r\n\r\n                            <!-- Section type badge -->\r\n                            <div class=\"section-card-badge\" *ngIf=\"savedSections[selectedSavedCategory].component?.sectionType\">\r\n                                {{savedSections[selectedSavedCategory].component.sectionType.split('_').join(' ') | uppercase}}\r\n                            </div>\r\n\r\n                            <!-- Preview area (Show image if present, fallback to placeholder) -->\r\n                            <div class=\"section-img-container d-flex align-items-center justify-content-center\">\r\n                                <ng-container *ngIf=\"savedSections[selectedSavedCategory].component?.styles?.background?.image && savedSections[selectedSavedCategory].component?.styles?.background?.showImage; else savedNoImage\">\r\n                                    <img [src]=\"savedSections[selectedSavedCategory].component.styles.background.image\" alt=\"section preview\">\r\n                                </ng-container>\r\n                                <ng-template #savedNoImage>\r\n                                    <div class=\"saved-preview-placeholder d-flex flex-column align-items-center justify-content-center\">\r\n                                        <mat-icon>layers</mat-icon>\r\n                                        <span>{{savedSections[selectedSavedCategory].component?.sectionType?.split('_')?.join(' ') || 'Saved Component'}}</span>\r\n                                    </div>\r\n                                </ng-template>\r\n                            </div>\r\n\r\n                            <!-- Card info -->\r\n                            <div class=\"section-card-info\">\r\n                                <div class=\"section-card-name\">{{savedSections[selectedSavedCategory].component?.sectionName}}</div>\r\n                                <div class=\"section-card-desc\" *ngIf=\"savedSections[selectedSavedCategory].component?.desc\">\r\n                                    {{savedSections[selectedSavedCategory].component.desc}}\r\n                                </div>\r\n                            </div>\r\n\r\n                            <!-- Used In footer -->\r\n                            <div class=\"saved-card-footer\" *ngIf=\"savedSections[selectedSavedCategory].usedIn\">\r\n                                <div class=\"used-in-container d-flex align-items-center gap-2\">\r\n                                    <mat-icon class=\"used-in-icon\">web</mat-icon>\r\n                                    <span class=\"used-in-text\">\r\n                                        <strong>Used In ({{savedSections[selectedSavedCategory].usedIn.length}} Pages):</strong> \r\n                                        {{savedSections[selectedSavedCategory].usedIn.join(', ')}}\r\n                                    </span>\r\n                                </div>\r\n                            </div>\r\n\r\n                        </div>\r\n                    </div>\r\n\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Empty: no saved data at all -->\r\n            <div class=\"empty-state fade-in\" *ngIf=\"!savedLoader && savedCategoryKeys.length === 0\">\r\n                <img src=\"https://cdn-icons-png.flaticon.com/512/4076/4076549.png\" alt=\"empty\">\r\n                <div class=\"empty-title\">No saved sections</div>\r\n                <div class=\"empty-subtitle\">Sections you save from pages will appear here</div>\r\n            </div>\r\n        </ng-container>\r\n\r\n         <ng-container *ngIf=\"selectedTab === 'APPS'\">\r\n            durga prasad bhogisetti\r\n        </ng-container>\r\n\r\n\r\n        <!-- EMPTY SEARCH -->\r\n        <ng-template #emptyScreen>\r\n            <div class=\"empty-state fade-in d-flex flex-column align-items-center justify-content-center\">\r\n                <img src=\"https://cdn-icons-png.flaticon.com/512/7486/7486803.png\">\r\n                <div class=\"empty-title\">No sections found</div>\r\n                <div class=\"empty-subtitle\">\r\n                    Try searching something else or explore categories\r\n                </div>\r\n            </div>\r\n        </ng-template>\r\n\r\n    </div>\r\n\r\n    <!-- Footer -->\r\n    <div class=\"footer-container fade-in\">\r\n        <div class=\"footer-hint\">\r\n            <mat-icon>info_outline</mat-icon>\r\n            <ng-container *ngIf=\"selectedTab !== 'SAVED'\">\r\n                You can rearrange or remove this section any time.\r\n            </ng-container>\r\n            <ng-container *ngIf=\"selectedTab === 'SAVED'\">\r\n                Saved sections are read-only previews.\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"footer-actions\">\r\n            <div class=\"btn-cancel\" (click)=\"dialog.close()\">\r\n                {{ selectedTab === 'SAVED' ? 'Close' : 'Cancel' }}\r\n            </div>\r\n            <!-- Basic tab only -->\r\n            <div class=\"btn-add\" *ngIf=\"selectedTab !== 'SAVED'\"\r\n                [class.disabled]=\"!selectedComponent\"\r\n                (click)=\"selectedComponent && addNewSection(selectedComponent.componentId, selectedComponent.sectionType, $event)\">\r\n                + Add section\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n</section>", styles: ["*{font-family:var(--primary-font-family);box-sizing:border-box}mat-icon{font-family:Material Icons!important}.gap-10{gap:10px!important}.f-18{font-size:18px;cursor:pointer}.w-30{width:30px!important}.h-30{height:30vh}.cp{cursor:pointer}.fs-14{font-size:14px}.fs-12{font-size:12px}.fs-16{font-size:16px}.fw-bold{font-weight:700}.main-container{height:100vh;background:#fff;border-radius:16px;overflow:hidden;display:flex;flex-direction:column}.header-container{position:relative;padding:16px 20px 14px;background:#fff;border-bottom:1px solid #f0eef8}.header-title{font-size:16px;font-weight:700;color:#1a1733;line-height:1.4}.header-subtitle{font-size:12px;color:#9e9bb5;margin-top:2px}.close-btn{position:absolute;top:50%;right:18px;transform:translateY(-50%);cursor:pointer;color:#aaa;font-size:20px!important;width:30px!important;height:30px!important;border-radius:8px;transition:background .15s,color .15s;display:flex;align-items:center;justify-content:center}.close-btn:hover{background:#f0eeff;color:#5a4fcf}.parent-container{flex:1;overflow:hidden;background:#f9f8fd;display:flex;flex-direction:column;padding:0}.tab-container{padding:8px;margin:0 15px;gap:3%;background:#fff;border-radius:13px}.tabs{font-size:14px;font-weight:500;line-height:24px;color:#2c2c2c99;width:30%;cursor:pointer;padding:8px 0;text-align:center}.active-tab{color:#fff!important;background:var(--primary-bg-color);box-shadow:0 0 4px #00000040;border-radius:8px;transition:opacity .3s ease-in-out,transform .3s ease-in-out;opacity:1;transform:translateY(0)}.top-tabs-container{margin:12px 16px 0;background:#eeecf8;border-radius:12px;padding:4px;display:flex;gap:2px;flex-shrink:0}.top-tab{flex:1;text-align:center;padding:7px 12px;font-size:12.5px;font-weight:500;color:#888;cursor:pointer;border-radius:9px;transition:all .18s ease;-webkit-user-select:none;user-select:none;white-space:nowrap}.top-tab:hover:not(.active-top-tab){color:#555;background:#ffffff8c}.active-top-tab{background:#fff;color:#4b3fc0;font-weight:700;box-shadow:0 1px 6px #4b3fc021}.search-bar-container{padding:10px 16px 8px;flex-shrink:0}.search-bar{background:#fff;border:1.5px solid #e6e2f6;border-radius:10px;padding:8px 12px;display:flex;align-items:center;gap:8px;transition:border-color .18s,box-shadow .18s}.search-bar:focus-within{border-color:var(--primary-bg-color);box-shadow:0 0 0 3px #7c6cf01a}.search-bar img{width:15px;height:15px;opacity:.45;flex-shrink:0}.search-bar input{border:none;outline:none;background:transparent;font-size:13px;color:#333;width:100%}.search-bar input::placeholder{color:#bbb}.content-layout{flex:1;overflow:hidden;border-top:1px solid #f0eef8;display:flex;min-height:0}.categories-sidepanel{width:15%;padding:10px 5px;margin:15px 0;border-radius:10px;height:calc(70vh + -0px);overflow-y:scroll;background:#fff}.side-section{padding:6px 10px;border-radius:8px;margin-bottom:10px;cursor:pointer}.side-section img{width:16px}.side-section .image-container{background:#f9fafb;padding:5px 8px;border-radius:5px}.side-section .section-text{font-size:12px;font-weight:500;line-height:24px;text-align:center;color:#a1a1a1}.active-section{background:var(--primary-bg-color)!important;box-shadow:0 0 4px #00000040}.active-section .section-text{color:#fff!important}.active-section .image-container{background:unset!important;padding:unset!important;border-radius:unset!important}.left-sidebar{width:210px;min-width:210px;background:#fff;padding:12px 8px;overflow-y:auto;border-right:1px solid #f0eef8;height:100%}.left-sidebar::-webkit-scrollbar{width:3px}.left-sidebar::-webkit-scrollbar-thumb{background:#ddd8f5;border-radius:4px}.category-block{margin-bottom:2px}.category-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;cursor:pointer;border-radius:9px;transition:background .15s;-webkit-user-select:none;user-select:none}.category-header:hover{background:#f3f0fd}.category-icon{font-size:15px;width:20px;text-align:center;flex-shrink:0;line-height:1}.fs-13{font-size:13px}.category-count{font-size:11px;font-weight:500;color:#bbb;position:relative;top:1px}.category-arrow{font-size:18px!important;width:18px!important;height:18px!important;color:#ccc;transition:transform .22s ease,color .15s;flex-shrink:0}.category-block:has(.category-items) .category-arrow{color:#7c6cf0}.category-items{padding:2px 4px 4px 28px;display:flex;flex-direction:column;gap:1px;animation:dropdownFade .2s ease}.category-item{padding:5px 10px;font-size:12px;color:#555;cursor:pointer;border-radius:7px;transition:background .13s,color .13s;-webkit-user-select:none;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.category-item:hover{background:#f0eeff;color:#4b3fc0}.category-item.active{background:#ebe7fc;color:#4b3fc0;font-weight:600}.categories-render-section{width:85%;padding:15px;margin:15px 10px;border-radius:10px;height:calc(70vh + -0px);overflow-y:scroll;background:#fff}.categories-head{font-size:20px;font-weight:600;line-height:24px;color:#434343}.sub-text{font-size:13px;font-weight:500;line-height:24px;color:#a1a1a1;margin-bottom:10px}.section{margin-bottom:10px}.section-header{font-size:14px;font-weight:500;line-height:24px;color:#a1a1a1;margin-bottom:10px}.right-content{flex:1;overflow-y:auto;padding:14px 14px 14px 12px;height:100%;min-width:0}.right-content::-webkit-scrollbar{width:4px}.right-content::-webkit-scrollbar-thumb{background:#ddd8f5;border-radius:4px}.section-group-label{font-size:12px;font-weight:700;letter-spacing:.4px;color:#9e9bb5;margin-bottom:12px;text-transform:uppercase}.sections-list{display:flex;flex-direction:column;gap:12px}.section-card{border:1.5px solid #ebe8f8;border-radius:12px;overflow:hidden;cursor:pointer;background:#fff;transition:all .2s ease}.section-card:hover{border-color:#c4baf0;box-shadow:0 4px 16px #7c6cf01a;transform:translateY(-1px)}.section-card-preview{cursor:default!important;pointer-events:none}.section-card-preview:hover{border-color:#ebe8f8!important;box-shadow:none!important;transform:none!important}.section-card-selected{border-color:#7c6cf0!important;box-shadow:0 0 0 3px #7c6cf024!important}.section-card-badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.5px;color:#5a4fcf;background:#edeafc;padding:3px 10px;margin:10px 10px 6px;border-radius:20px}.section-img-container{width:100%;overflow:hidden;background:#f5f3fc;display:flex;align-items:center;justify-content:center;max-height:200px;min-height:100px}.section-img-container img{width:100%;display:block;object-fit:cover;transition:transform .25s ease}.section-card:hover .section-img-container img{transform:scale(1.03)}.no-image-placeholder{height:130px;display:flex;align-items:center;justify-content:center;color:#d5d0ee}.no-image-placeholder mat-icon{font-size:38px!important;width:38px!important;height:38px!important;color:#d5d0ee}.section-card-info{padding:10px 14px 12px}.section-card-name{font-size:13px;font-weight:600;color:#1a1733;margin-bottom:3px}.section-card-desc{font-size:12px;color:#9e9bb5;line-height:1.5}.card-check-icon{font-size:20px!important;width:20px!important;height:20px!important;color:#7c6cf0;flex-shrink:0;animation:checkPop .22s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes checkPop{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.quick-add-container{padding:4px 24px 10px;gap:10px;flex-wrap:wrap;flex-shrink:0}.quick-add-label{font-size:12px;color:#888;white-space:nowrap}.quick-add-chips{gap:6px;width:100%;overflow-y:scroll;white-space:nowrap}.quick-chip{gap:5px;padding:4px 10px;font-size:12px;border:1.5px solid #e0e0e0;border-radius:20px;cursor:pointer;color:#333;background:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none}.quick-chip.active-quick-chip{border-color:#7c6cf0;color:#4b3fc0;font-weight:500}.chip-emoji{font-size:14px}.saved-pages-label{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#bbb;padding:0 10px;margin-bottom:10px}.saved-page-item{display:flex;align-items:center;gap:7px;padding:7px 10px;cursor:pointer;border-radius:9px;font-size:13px;font-weight:500;color:#666;transition:background .15s,color .15s;-webkit-user-select:none;user-select:none;margin-bottom:2px;overflow:hidden}.saved-page-item:hover{background:#f0eeff;color:#4b3fc0}.saved-page-item.active{background:#ebe7fc;color:#4b3fc0;font-weight:600}.saved-page-icon{font-size:15px!important;width:15px!important;height:15px!important;color:inherit;flex-shrink:0}.saved-page-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.saved-preview-placeholder{height:100px;width:100%;background:#f5f3fc;gap:6px}.saved-preview-placeholder mat-icon{font-size:28px!important;width:28px!important;height:28px!important;color:#c8c2ee}.saved-preview-placeholder span{font-size:11px;color:#b0aac8;text-transform:capitalize}.empty-page-icon{font-size:40px!important;width:40px!important;height:40px!important;color:#d5d0ee;margin-bottom:4px}.saved-card-footer{padding:10px 14px;background:#faf9ff;border-top:1px solid #ebe8f8}.used-in-container{font-size:11.5px;color:#666}.used-in-icon{font-size:15px!important;width:15px!important;height:15px!important;color:#7c6cf0}.used-in-text{line-height:1.4}.used-in-text strong{color:#4b3fc0;font-weight:600}.empty-div{height:calc(70vh + -0px);background:#fff;margin:18px;border-radius:13px}.oops-text{font-weight:900;font-size:42px;background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent}.oops-sub-text-1{font-size:17px;font-weight:600;color:#101010e5}.oops-sub-text-2{font-size:14px;font-weight:600;color:#101010e5}.image-container-1{margin-bottom:16px}.empty-img{width:100px;opacity:.85}.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:32px 24px}.empty-state img{width:110px;opacity:.8;margin-bottom:4px}.empty-title{font-size:15px;font-weight:700;color:#2d2a4a}.empty-subtitle{font-size:12.5px;color:#aaa;max-width:240px;line-height:1.6}.footer-container{padding:12px 20px;border-top:1px solid #f0eef8;background:#fff;flex-shrink:0;display:flex;align-items:center;justify-content:space-between}.footer-hint{font-size:11.5px;color:#bbb;display:flex;align-items:center;gap:5px}.footer-hint mat-icon{font-size:14px!important;width:14px!important;height:14px!important;color:#d0cbf0}.footer-actions{display:flex;align-items:center;gap:8px}.btn-cancel{padding:8px 18px;font-size:13px;font-weight:500;border:1.5px solid #e4e0f6;border-radius:9px;background:#fff;color:#666;cursor:pointer;transition:border-color .15s,color .15s,background .15s;-webkit-user-select:none;user-select:none}.btn-cancel:hover{border-color:#b4aae8;color:#4b3fc0;background:#f8f6ff}.btn-add{padding:8px 20px;font-size:13px;font-weight:700;border:none;border-radius:9px;background:var(--primary-bg-color);color:#fff;cursor:pointer;transition:opacity .15s,box-shadow .15s,transform .15s;-webkit-user-select:none;user-select:none;box-shadow:0 3px 10px #7c6cf047}.btn-add:hover:not(.disabled){opacity:.92;transform:translateY(-1px);box-shadow:0 5px 14px #7c6cf05c}.btn-add.disabled{opacity:.38;cursor:not-allowed;box-shadow:none;pointer-events:none}.sidebar-group{margin-bottom:2px}.sidebar-group-icon{font-size:15px;width:20px;text-align:center}.sidebar-group-label{flex:1;font-size:13px}.sidebar-group-header{gap:8px;padding:9px 14px;cursor:pointer;border-radius:0;transition:background .12s;-webkit-user-select:none;user-select:none;font-size:13px;color:#444}.sidebar-group-header:hover{background:#f0f0f0}.sidebar-group-active{background:#ece9fd;color:#4b3fc0;font-weight:600}.sidebar-chevron{font-size:18px;width:18px;height:18px;color:#aaa;transition:transform .2s}.sidebar-chevron.rotated{transform:rotate(180deg)}.subcategory-item{padding:6px 10px 6px 8px;font-size:12px;color:#555;cursor:pointer;border-radius:6px;transition:background .12s;-webkit-user-select:none;user-select:none}.subcategory-item:hover{background:#ece9fd;color:#4b3fc0}.subcategory-active{background:#ece9fd;color:#4b3fc0;font-weight:500}.active-subcategory{background:#7c6cf0!important;color:#fff!important}.sidebar-subcategory{overflow:hidden;animation:dropdownSmooth .25s ease}.fade-in{animation:fadeIn .22s ease}.fade-slide{animation:fadeSlide .25s ease}.stagger-item{opacity:0;transform:translateY(8px);animation:staggerFade .28s ease forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeSlide{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes staggerFade{to{opacity:1;transform:translateY(0)}}@keyframes dropdownFade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes dropdownSmooth{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@keyframes expandFade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -4173,11 +4275,11 @@ class HoverElementsComponent {
         event.stopPropagation();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HoverElementsComponent, deps: [{ token: EventsService }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HoverElementsComponent, isStandalone: true, selector: "simpo-hover-elements", inputs: { data: "data", index: "index", editOptions: "editOptions", isMerged: "isMerged", isEcommerce: "isEcommerce" }, outputs: { edit: "edit" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<mat-dialog-content class=\"mat-typography\" *ngIf=\"editOptions\">\r\n    <div class=\"top-btn\" [ngClass]=\"{'adjust-top-btn': isMerged && index == 1}\"\r\n        *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList' && !isEcommerce\">\r\n        <button class=\"add_btn_top\" (click)=\"addSection('ABOVE', $event)\">Add Section +</button>\r\n    </div>\r\n    <section class=\"hover-tab\" [ngClass]=\"{'adjustPosition': isMerged && index == 1}\" cdkDrag>\r\n        <div class=\"tabs-section\" [ngStyle]=\"{'z-index' : data.sectionType === 'header' ? '10000' : '100'}\">\r\n\r\n            <div class=\"section-name\" cdkDragHandle>\r\n                {{ data?.sectionName || 'Section' }}\r\n            </div>\r\n\r\n            <button class=\"edit-btn\" (click)=\"editSection()\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                    stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                    class=\"lucide lucide-pencil\" aria-hidden=\"true\">\r\n                    <path\r\n                        d=\"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z\">\r\n                    </path>\r\n                    <path d=\"m15 5 4 4\"></path>\r\n                </svg>\r\n                <span class=\"edit-text\">Edit</span>\r\n            </button>\r\n\r\n            <ng-container\r\n                *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList'\">\r\n                <button class=\"icon-btn\" (click)=\"moveUp($event)\" [disabled]=\"index == 1\">\r\n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n                        stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                        <polyline points=\"18 15 12 9 6 15\"></polyline>\r\n                    </svg>\r\n                </button>\r\n\r\n                <button class=\"icon-btn\" (click)=\"moveDown($event)\">\r\n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n                        stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                        <polyline points=\"6 9 12 15 18 9\"></polyline>\r\n                    </svg>\r\n                </button>\r\n\r\n                <div class=\"position-relative d-flex align-items-center\" (click)=\"$event.stopPropagation()\">\r\n                    <button class=\"icon-btn more-btn\" (click)=\"toggleMenu($event)\">\r\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                            stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                            <circle cx=\"12\" cy=\"12\" r=\"1\"></circle>\r\n                            <circle cx=\"19\" cy=\"12\" r=\"1\"></circle>\r\n                            <circle cx=\"5\" cy=\"12\" r=\"1\"></circle>\r\n                        </svg>\r\n                    </button>\r\n\r\n                    <div class=\"simpo-custom-menu px-2 py-1\" *ngIf=\"isMenuOpen\">\r\n                        <button class=\"menu-item-custom\" (click)=\"changeContent($event); isMenuOpen = false\">\r\n                            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                                stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"menu-icon\">\r\n                                <rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"></rect>\r\n                                <rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"></rect>\r\n                                <rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"></rect>\r\n                                <rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"></rect>\r\n                            </svg>\r\n                            <span class=\"menu-item-text\">Change Layout</span>\r\n                        </button>\r\n                        <!-- <button class=\"menu-item-custom\" (click)=\"restyleSection($event); isMenuOpen = false\">\r\n                            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                                stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"menu-icon\">\r\n                                <path\r\n                                    d=\"m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z\" />\r\n                            </svg>\r\n                            <span>Restyle with AI</span>\r\n                            <span class=\"ai-badge\">AI</span>\r\n                        </button> -->\r\n                        <button class=\"menu-item-custom\" (click)=\"duplicateSection($event); isMenuOpen = false\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\"\r\n                                fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                stroke-linejoin=\"round\" class=\"lucide lucide-copy menu-icon\" aria-hidden=\"true\">\r\n                                <rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect>\r\n                                <path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path>\r\n                            </svg>\r\n                            <span class=\"menu-item-text\">Duplicate</span>\r\n                        </button>\r\n                        <div class=\"menu-divider\"></div>\r\n                        <button class=\"menu-item-custom delete-item\"\r\n                            (click)=\"deleteSection($event); isMenuOpen = false\">\r\n                            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                                stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                                class=\"menu-icon delete-icon\">\r\n                                <polyline points=\"3 6 5 6 21 6\"></polyline>\r\n                                <path\r\n                                    d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\">\r\n                                </path>\r\n                                <line x1=\"10\" y1=\"11\" x2=\"10\" y2=\"17\"></line>\r\n                                <line x1=\"14\" y1=\"11\" x2=\"14\" y2=\"17\"></line>\r\n                            </svg>\r\n                            <span class=\"delete-text menu-item-text\">Delete Section</span>\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </section>\r\n    <div class=\"bottom-btn\"\r\n        *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList' && !isEcommerce\">\r\n        <button class=\"add_btn\" (click)=\"addSection('BELOW', $event)\">Add Section +</button>\r\n    </div>\r\n</mat-dialog-content>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}.hover-tab{display:flex;justify-content:flex-end;align-items:center;position:absolute;right:30px;top:40px;height:auto;cursor:grab}.adjustPosition{top:200px}.bottom-btn{position:absolute;top:100%;left:0%;z-index:101;border:3px solid var(--primary-bg-color);width:100%}.bottom-btn .add_btn{width:140px!important;height:36px;font-size:16px!important;background:var(--primary-bg-color);border-radius:4px;transform:translate(-50%,-50%);color:#fff;cursor:pointer;border:none;outline:none;position:absolute;top:100%;left:50%;box-shadow:#00000059 0 5px 15px}.adjust-top-btn{top:170px!important}.top-btn{position:absolute;top:0%;left:0%;z-index:101;width:100%;border:3px solid var(--primary-bg-color)}.top-btn .add_btn_top{top:0!important;width:140px!important;height:36px;background:var(--primary-bg-color);border-radius:4px;font-size:16px!important;position:absolute;left:50%;transform:translate(-50%,-50%);color:#fff;cursor:pointer;border:none;outline:none;z-index:1001;box-shadow:#00000059 0 5px 15px}.tabs-section{width:auto;padding:6px 6px 6px 16px;box-shadow:#0000001a 0 4px 12px;border-radius:8px;display:flex;align-items:center;height:48px;background-color:#fff;gap:8px}.section-name{font-size:14px;color:#8c98a4;font-weight:500;margin-right:8px;cursor:grab;-webkit-user-select:none;user-select:none;white-space:nowrap}.edit-btn{display:flex;align-items:center;justify-content:center;gap:6px;background-color:#f6f0ff;color:#4a2b6d;border:none;border-radius:6px;padding:6px 12px;font-size:14px!important;font-weight:500;cursor:pointer;transition:background-color .2s ease}.edit-btn:hover{background-color:var(--primary-bg-color);color:#fff}.icon-btn{display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#8c98a4;cursor:pointer;padding:4px;border-radius:4px;transition:background-color .2s ease,color .2s ease}.icon-btn:hover{background-color:#f5f5f5;color:#4a2b6d}.icon-btn:disabled{opacity:.5;cursor:not-allowed}.more-btn{margin-left:4px}.simpo-custom-menu{position:absolute;top:100%;right:0;margin-top:8px;background:#fff;border-radius:8px;box-shadow:#0000001a 0 4px 12px;min-width:180px;padding:4px 0;z-index:1000;display:flex;flex-direction:column}.simpo-custom-menu .menu-item-custom{display:flex;align-items:center;width:100%;padding:0 16px;min-height:40px;background:transparent;white-space:nowrap;border:none;font-size:14px;color:#333;cursor:pointer;text-align:left;transition:background-color .2s;border-radius:6px}.simpo-custom-menu .menu-item-custom .menu-item-text{font-size:14px!important;font-weight:500!important}.simpo-custom-menu .menu-item-custom:hover{background-color:#f5f5f5}.simpo-custom-menu .menu-icon{margin-right:12px;color:#333;flex-shrink:0}.simpo-custom-menu .ai-badge{margin-left:auto;background-color:#a855f7;color:#fff;font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px;line-height:1}.simpo-custom-menu .menu-divider{height:1px;background-color:#e0e0e0;margin:4px 0}.simpo-custom-menu .delete-item,.simpo-custom-menu .delete-item .menu-icon,.simpo-custom-menu .delete-item .delete-text{color:#e03131!important;font-size:14px!important}@media only screen and (max-width: 475px){.tabs-section{position:relative;left:27px;height:48px}}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HoverElementsComponent, isStandalone: true, selector: "simpo-hover-elements", inputs: { data: "data", index: "index", editOptions: "editOptions", isMerged: "isMerged", isEcommerce: "isEcommerce" }, outputs: { edit: "edit" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<mat-dialog-content class=\"mat-typography\" *ngIf=\"editOptions\">\r\n    <div class=\"top-btn\" [ngClass]=\"{'adjust-top-btn': isMerged && index == 1}\"\r\n        *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList' && !isEcommerce\">\r\n        <button class=\"add_btn_top d-flex align-items-center justify-content-center border-radius-50 p-0\"\r\n            (click)=\"addSection('ABOVE', $event)\"><mat-icon>add</mat-icon></button>\r\n    </div>\r\n    <section class=\"hover-tab\" [ngClass]=\"{'adjustPosition': isMerged && index == 1}\" cdkDrag>\r\n        <div class=\"tabs-section\" [ngStyle]=\"{'z-index' : data.sectionType === 'header' ? '10000' : '100'}\">\r\n\r\n            <div class=\"section-name\" cdkDragHandle>\r\n                {{ data?.sectionName || 'Section' }}\r\n            </div>\r\n\r\n            <button class=\"edit-btn\" (click)=\"editSection()\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                    stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                    class=\"lucide lucide-pencil\" aria-hidden=\"true\">\r\n                    <path\r\n                        d=\"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z\">\r\n                    </path>\r\n                    <path d=\"m15 5 4 4\"></path>\r\n                </svg>\r\n                <span class=\"edit-text\">Edit</span>\r\n            </button>\r\n\r\n            <ng-container\r\n                *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList'\">\r\n                <button class=\"icon-btn\" (click)=\"moveUp($event)\" [disabled]=\"index == 1\">\r\n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n                        stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                        <polyline points=\"18 15 12 9 6 15\"></polyline>\r\n                    </svg>\r\n                </button>\r\n\r\n                <button class=\"icon-btn\" (click)=\"moveDown($event)\">\r\n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n                        stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                        <polyline points=\"6 9 12 15 18 9\"></polyline>\r\n                    </svg>\r\n                </button>\r\n\r\n                <div class=\"position-relative d-flex align-items-center\" (click)=\"$event.stopPropagation()\">\r\n                    <button class=\"icon-btn more-btn\" (click)=\"toggleMenu($event)\">\r\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                            stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                            <circle cx=\"12\" cy=\"12\" r=\"1\"></circle>\r\n                            <circle cx=\"19\" cy=\"12\" r=\"1\"></circle>\r\n                            <circle cx=\"5\" cy=\"12\" r=\"1\"></circle>\r\n                        </svg>\r\n                    </button>\r\n\r\n                    <div class=\"simpo-custom-menu px-2 py-1\" *ngIf=\"isMenuOpen\">\r\n                        <button class=\"menu-item-custom\" (click)=\"changeContent($event); isMenuOpen = false\">\r\n                            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                                stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"menu-icon\">\r\n                                <rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"></rect>\r\n                                <rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"></rect>\r\n                                <rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"></rect>\r\n                                <rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"></rect>\r\n                            </svg>\r\n                            <span class=\"menu-item-text\">Change Layout</span>\r\n                        </button>\r\n                        <!-- <button class=\"menu-item-custom\" (click)=\"restyleSection($event); isMenuOpen = false\">\r\n                            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                                stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"menu-icon\">\r\n                                <path\r\n                                    d=\"m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z\" />\r\n                            </svg>\r\n                            <span>Restyle with AI</span>\r\n                            <span class=\"ai-badge\">AI</span>\r\n                        </button> -->\r\n                        <button class=\"menu-item-custom\" (click)=\"duplicateSection($event); isMenuOpen = false\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\"\r\n                                fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                stroke-linejoin=\"round\" class=\"lucide lucide-copy menu-icon\" aria-hidden=\"true\">\r\n                                <rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect>\r\n                                <path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path>\r\n                            </svg>\r\n                            <span class=\"menu-item-text\">Duplicate</span>\r\n                        </button>\r\n                        <div class=\"menu-divider\"></div>\r\n                        <button class=\"menu-item-custom delete-item\"\r\n                            (click)=\"deleteSection($event); isMenuOpen = false\">\r\n                            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                                stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                                class=\"menu-icon delete-icon\">\r\n                                <polyline points=\"3 6 5 6 21 6\"></polyline>\r\n                                <path\r\n                                    d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\">\r\n                                </path>\r\n                                <line x1=\"10\" y1=\"11\" x2=\"10\" y2=\"17\"></line>\r\n                                <line x1=\"14\" y1=\"11\" x2=\"14\" y2=\"17\"></line>\r\n                            </svg>\r\n                            <span class=\"delete-text menu-item-text\">Delete Section</span>\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </section>\r\n    <div class=\"bottom-btn\"\r\n        *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList' && !isEcommerce\">\r\n        <button class=\"add_btn d-flex align-items-center justify-content-center border-radius-50 p-0\"\r\n            (click)=\"addSection('BELOW', $event)\"><mat-icon>add</mat-icon></button>\r\n    </div>\r\n</mat-dialog-content>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}.hover-tab{display:flex;justify-content:flex-end;align-items:center;position:absolute;right:30px;top:40px;height:auto;cursor:grab}.adjustPosition{top:200px}.bottom-btn{position:absolute;top:100%;left:0%;z-index:101;border:1px solid var(--primary-bg-color);width:100%}.bottom-btn .add_btn{width:30px!important;height:30px;background:var(--primary-bg-color);border-radius:4px;transform:translate(-50%,-50%);color:#fff;cursor:pointer;border:none;outline:none;position:absolute;top:100%;left:50%;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease}.bottom-btn .add_btn:hover{background-color:var(--primary-bg-color);color:#fff;border-color:var(--primary-bg-color);transform:translate(-50%,-60%);box-shadow:#0003 0 8px 20px}.border-radius-50{border-radius:50%!important}:is(.bottom-btn,.top-btn) mat-icon{font-size:21px!important;width:21px!important;display:flex;align-items:center;justify-content:center}.adjust-top-btn{top:170px!important}.top-btn{position:absolute;top:0%;left:0%;z-index:101;width:100%;border:1px solid var(--primary-bg-color)}.top-btn .add_btn_top{top:0!important;width:30px!important;height:30px;background:var(--primary-bg-color);border-radius:4px;position:absolute;left:50%;transform:translate(-50%,-50%);border:none;color:#fff;cursor:pointer;outline:none;z-index:1001;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease}.top-btn .add_btn_top:hover{background-color:var(--primary-bg-color);color:#fff;border-color:var(--primary-bg-color);transform:translate(-50%,-60%);box-shadow:#0003 0 8px 20px}.tabs-section{width:auto;padding:6px 6px 6px 16px;box-shadow:#0000001a 0 4px 12px;border-radius:8px;display:flex;align-items:center;height:48px;background-color:#fff;gap:8px}.section-name{font-size:14px;color:#8c98a4;font-weight:500;margin-right:8px;cursor:grab;-webkit-user-select:none;user-select:none;white-space:nowrap}.edit-btn{display:flex;align-items:center;justify-content:center;gap:6px;background-color:#f6f0ff;color:#4a2b6d;border:none;border-radius:6px;padding:6px 12px;font-size:14px!important;font-weight:500;cursor:pointer;transition:background-color .2s ease}.edit-btn:hover{background-color:var(--primary-bg-color);color:#fff}.icon-btn{display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#8c98a4;cursor:pointer;padding:4px;border-radius:4px;transition:background-color .2s ease,color .2s ease}.icon-btn:hover{background-color:#f5f5f5;color:#4a2b6d}.icon-btn:disabled{opacity:.5;cursor:not-allowed}.more-btn{margin-left:4px}.simpo-custom-menu{position:absolute;top:100%;right:0;margin-top:8px;background:#fff;border-radius:8px;box-shadow:#0000001a 0 4px 12px;min-width:180px;padding:4px 0;z-index:1000;display:flex;flex-direction:column}.simpo-custom-menu .menu-item-custom{display:flex;align-items:center;width:100%;padding:0 16px;min-height:40px;background:transparent;white-space:nowrap;border:none;font-size:14px;color:#333;cursor:pointer;text-align:left;transition:background-color .2s;border-radius:6px}.simpo-custom-menu .menu-item-custom .menu-item-text{font-size:14px!important;font-weight:500!important}.simpo-custom-menu .menu-item-custom:hover{background-color:#f5f5f5}.simpo-custom-menu .menu-icon{margin-right:12px;color:#333;flex-shrink:0}.simpo-custom-menu .ai-badge{margin-left:auto;background-color:#a855f7;color:#fff;font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px;line-height:1}.simpo-custom-menu .menu-divider{height:1px;background-color:#e0e0e0;margin:4px 0}.simpo-custom-menu .delete-item,.simpo-custom-menu .delete-item .menu-icon,.simpo-custom-menu .delete-item .delete-text{color:#e03131!important;font-size:14px!important}@media only screen and (max-width: 475px){.tabs-section{position:relative;left:27px;height:48px}}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HoverElementsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-hover-elements', standalone: true, imports: [MatIconModule, MatDialogModule, MatMenuModule, CommonModule, AddSectionComponent, CdkDrag], template: "<mat-dialog-content class=\"mat-typography\" *ngIf=\"editOptions\">\r\n    <div class=\"top-btn\" [ngClass]=\"{'adjust-top-btn': isMerged && index == 1}\"\r\n        *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList' && !isEcommerce\">\r\n        <button class=\"add_btn_top\" (click)=\"addSection('ABOVE', $event)\">Add Section +</button>\r\n    </div>\r\n    <section class=\"hover-tab\" [ngClass]=\"{'adjustPosition': isMerged && index == 1}\" cdkDrag>\r\n        <div class=\"tabs-section\" [ngStyle]=\"{'z-index' : data.sectionType === 'header' ? '10000' : '100'}\">\r\n\r\n            <div class=\"section-name\" cdkDragHandle>\r\n                {{ data?.sectionName || 'Section' }}\r\n            </div>\r\n\r\n            <button class=\"edit-btn\" (click)=\"editSection()\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                    stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                    class=\"lucide lucide-pencil\" aria-hidden=\"true\">\r\n                    <path\r\n                        d=\"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z\">\r\n                    </path>\r\n                    <path d=\"m15 5 4 4\"></path>\r\n                </svg>\r\n                <span class=\"edit-text\">Edit</span>\r\n            </button>\r\n\r\n            <ng-container\r\n                *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList'\">\r\n                <button class=\"icon-btn\" (click)=\"moveUp($event)\" [disabled]=\"index == 1\">\r\n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n                        stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                        <polyline points=\"18 15 12 9 6 15\"></polyline>\r\n                    </svg>\r\n                </button>\r\n\r\n                <button class=\"icon-btn\" (click)=\"moveDown($event)\">\r\n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n                        stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                        <polyline points=\"6 9 12 15 18 9\"></polyline>\r\n                    </svg>\r\n                </button>\r\n\r\n                <div class=\"position-relative d-flex align-items-center\" (click)=\"$event.stopPropagation()\">\r\n                    <button class=\"icon-btn more-btn\" (click)=\"toggleMenu($event)\">\r\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                            stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                            <circle cx=\"12\" cy=\"12\" r=\"1\"></circle>\r\n                            <circle cx=\"19\" cy=\"12\" r=\"1\"></circle>\r\n                            <circle cx=\"5\" cy=\"12\" r=\"1\"></circle>\r\n                        </svg>\r\n                    </button>\r\n\r\n                    <div class=\"simpo-custom-menu px-2 py-1\" *ngIf=\"isMenuOpen\">\r\n                        <button class=\"menu-item-custom\" (click)=\"changeContent($event); isMenuOpen = false\">\r\n                            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                                stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"menu-icon\">\r\n                                <rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"></rect>\r\n                                <rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"></rect>\r\n                                <rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"></rect>\r\n                                <rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"></rect>\r\n                            </svg>\r\n                            <span class=\"menu-item-text\">Change Layout</span>\r\n                        </button>\r\n                        <!-- <button class=\"menu-item-custom\" (click)=\"restyleSection($event); isMenuOpen = false\">\r\n                            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                                stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"menu-icon\">\r\n                                <path\r\n                                    d=\"m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z\" />\r\n                            </svg>\r\n                            <span>Restyle with AI</span>\r\n                            <span class=\"ai-badge\">AI</span>\r\n                        </button> -->\r\n                        <button class=\"menu-item-custom\" (click)=\"duplicateSection($event); isMenuOpen = false\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\"\r\n                                fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                stroke-linejoin=\"round\" class=\"lucide lucide-copy menu-icon\" aria-hidden=\"true\">\r\n                                <rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect>\r\n                                <path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path>\r\n                            </svg>\r\n                            <span class=\"menu-item-text\">Duplicate</span>\r\n                        </button>\r\n                        <div class=\"menu-divider\"></div>\r\n                        <button class=\"menu-item-custom delete-item\"\r\n                            (click)=\"deleteSection($event); isMenuOpen = false\">\r\n                            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                                stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                                class=\"menu-icon delete-icon\">\r\n                                <polyline points=\"3 6 5 6 21 6\"></polyline>\r\n                                <path\r\n                                    d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\">\r\n                                </path>\r\n                                <line x1=\"10\" y1=\"11\" x2=\"10\" y2=\"17\"></line>\r\n                                <line x1=\"14\" y1=\"11\" x2=\"14\" y2=\"17\"></line>\r\n                            </svg>\r\n                            <span class=\"delete-text menu-item-text\">Delete Section</span>\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </section>\r\n    <div class=\"bottom-btn\"\r\n        *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList' && !isEcommerce\">\r\n        <button class=\"add_btn\" (click)=\"addSection('BELOW', $event)\">Add Section +</button>\r\n    </div>\r\n</mat-dialog-content>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}.hover-tab{display:flex;justify-content:flex-end;align-items:center;position:absolute;right:30px;top:40px;height:auto;cursor:grab}.adjustPosition{top:200px}.bottom-btn{position:absolute;top:100%;left:0%;z-index:101;border:3px solid var(--primary-bg-color);width:100%}.bottom-btn .add_btn{width:140px!important;height:36px;font-size:16px!important;background:var(--primary-bg-color);border-radius:4px;transform:translate(-50%,-50%);color:#fff;cursor:pointer;border:none;outline:none;position:absolute;top:100%;left:50%;box-shadow:#00000059 0 5px 15px}.adjust-top-btn{top:170px!important}.top-btn{position:absolute;top:0%;left:0%;z-index:101;width:100%;border:3px solid var(--primary-bg-color)}.top-btn .add_btn_top{top:0!important;width:140px!important;height:36px;background:var(--primary-bg-color);border-radius:4px;font-size:16px!important;position:absolute;left:50%;transform:translate(-50%,-50%);color:#fff;cursor:pointer;border:none;outline:none;z-index:1001;box-shadow:#00000059 0 5px 15px}.tabs-section{width:auto;padding:6px 6px 6px 16px;box-shadow:#0000001a 0 4px 12px;border-radius:8px;display:flex;align-items:center;height:48px;background-color:#fff;gap:8px}.section-name{font-size:14px;color:#8c98a4;font-weight:500;margin-right:8px;cursor:grab;-webkit-user-select:none;user-select:none;white-space:nowrap}.edit-btn{display:flex;align-items:center;justify-content:center;gap:6px;background-color:#f6f0ff;color:#4a2b6d;border:none;border-radius:6px;padding:6px 12px;font-size:14px!important;font-weight:500;cursor:pointer;transition:background-color .2s ease}.edit-btn:hover{background-color:var(--primary-bg-color);color:#fff}.icon-btn{display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#8c98a4;cursor:pointer;padding:4px;border-radius:4px;transition:background-color .2s ease,color .2s ease}.icon-btn:hover{background-color:#f5f5f5;color:#4a2b6d}.icon-btn:disabled{opacity:.5;cursor:not-allowed}.more-btn{margin-left:4px}.simpo-custom-menu{position:absolute;top:100%;right:0;margin-top:8px;background:#fff;border-radius:8px;box-shadow:#0000001a 0 4px 12px;min-width:180px;padding:4px 0;z-index:1000;display:flex;flex-direction:column}.simpo-custom-menu .menu-item-custom{display:flex;align-items:center;width:100%;padding:0 16px;min-height:40px;background:transparent;white-space:nowrap;border:none;font-size:14px;color:#333;cursor:pointer;text-align:left;transition:background-color .2s;border-radius:6px}.simpo-custom-menu .menu-item-custom .menu-item-text{font-size:14px!important;font-weight:500!important}.simpo-custom-menu .menu-item-custom:hover{background-color:#f5f5f5}.simpo-custom-menu .menu-icon{margin-right:12px;color:#333;flex-shrink:0}.simpo-custom-menu .ai-badge{margin-left:auto;background-color:#a855f7;color:#fff;font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px;line-height:1}.simpo-custom-menu .menu-divider{height:1px;background-color:#e0e0e0;margin:4px 0}.simpo-custom-menu .delete-item,.simpo-custom-menu .delete-item .menu-icon,.simpo-custom-menu .delete-item .delete-text{color:#e03131!important;font-size:14px!important}@media only screen and (max-width: 475px){.tabs-section{position:relative;left:27px;height:48px}}\n"] }]
+            args: [{ selector: 'simpo-hover-elements', standalone: true, imports: [MatIconModule, MatDialogModule, MatMenuModule, CommonModule, AddSectionComponent, CdkDrag], template: "<mat-dialog-content class=\"mat-typography\" *ngIf=\"editOptions\">\r\n    <div class=\"top-btn\" [ngClass]=\"{'adjust-top-btn': isMerged && index == 1}\"\r\n        *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList' && !isEcommerce\">\r\n        <button class=\"add_btn_top d-flex align-items-center justify-content-center border-radius-50 p-0\"\r\n            (click)=\"addSection('ABOVE', $event)\"><mat-icon>add</mat-icon></button>\r\n    </div>\r\n    <section class=\"hover-tab\" [ngClass]=\"{'adjustPosition': isMerged && index == 1}\" cdkDrag>\r\n        <div class=\"tabs-section\" [ngStyle]=\"{'z-index' : data.sectionType === 'header' ? '10000' : '100'}\">\r\n\r\n            <div class=\"section-name\" cdkDragHandle>\r\n                {{ data?.sectionName || 'Section' }}\r\n            </div>\r\n\r\n            <button class=\"edit-btn\" (click)=\"editSection()\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                    stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                    class=\"lucide lucide-pencil\" aria-hidden=\"true\">\r\n                    <path\r\n                        d=\"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z\">\r\n                    </path>\r\n                    <path d=\"m15 5 4 4\"></path>\r\n                </svg>\r\n                <span class=\"edit-text\">Edit</span>\r\n            </button>\r\n\r\n            <ng-container\r\n                *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList'\">\r\n                <button class=\"icon-btn\" (click)=\"moveUp($event)\" [disabled]=\"index == 1\">\r\n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n                        stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                        <polyline points=\"18 15 12 9 6 15\"></polyline>\r\n                    </svg>\r\n                </button>\r\n\r\n                <button class=\"icon-btn\" (click)=\"moveDown($event)\">\r\n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n                        stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                        <polyline points=\"6 9 12 15 18 9\"></polyline>\r\n                    </svg>\r\n                </button>\r\n\r\n                <div class=\"position-relative d-flex align-items-center\" (click)=\"$event.stopPropagation()\">\r\n                    <button class=\"icon-btn more-btn\" (click)=\"toggleMenu($event)\">\r\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                            stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                            <circle cx=\"12\" cy=\"12\" r=\"1\"></circle>\r\n                            <circle cx=\"19\" cy=\"12\" r=\"1\"></circle>\r\n                            <circle cx=\"5\" cy=\"12\" r=\"1\"></circle>\r\n                        </svg>\r\n                    </button>\r\n\r\n                    <div class=\"simpo-custom-menu px-2 py-1\" *ngIf=\"isMenuOpen\">\r\n                        <button class=\"menu-item-custom\" (click)=\"changeContent($event); isMenuOpen = false\">\r\n                            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                                stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"menu-icon\">\r\n                                <rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"></rect>\r\n                                <rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"></rect>\r\n                                <rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"></rect>\r\n                                <rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"></rect>\r\n                            </svg>\r\n                            <span class=\"menu-item-text\">Change Layout</span>\r\n                        </button>\r\n                        <!-- <button class=\"menu-item-custom\" (click)=\"restyleSection($event); isMenuOpen = false\">\r\n                            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                                stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"menu-icon\">\r\n                                <path\r\n                                    d=\"m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z\" />\r\n                            </svg>\r\n                            <span>Restyle with AI</span>\r\n                            <span class=\"ai-badge\">AI</span>\r\n                        </button> -->\r\n                        <button class=\"menu-item-custom\" (click)=\"duplicateSection($event); isMenuOpen = false\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\"\r\n                                fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                stroke-linejoin=\"round\" class=\"lucide lucide-copy menu-icon\" aria-hidden=\"true\">\r\n                                <rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"></rect>\r\n                                <path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"></path>\r\n                            </svg>\r\n                            <span class=\"menu-item-text\">Duplicate</span>\r\n                        </button>\r\n                        <div class=\"menu-divider\"></div>\r\n                        <button class=\"menu-item-custom delete-item\"\r\n                            (click)=\"deleteSection($event); isMenuOpen = false\">\r\n                            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                                stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                                class=\"menu-icon delete-icon\">\r\n                                <polyline points=\"3 6 5 6 21 6\"></polyline>\r\n                                <path\r\n                                    d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\">\r\n                                </path>\r\n                                <line x1=\"10\" y1=\"11\" x2=\"10\" y2=\"17\"></line>\r\n                                <line x1=\"14\" y1=\"11\" x2=\"14\" y2=\"17\"></line>\r\n                            </svg>\r\n                            <span class=\"delete-text menu-item-text\">Delete Section</span>\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </section>\r\n    <div class=\"bottom-btn\"\r\n        *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList' && !isEcommerce\">\r\n        <button class=\"add_btn d-flex align-items-center justify-content-center border-radius-50 p-0\"\r\n            (click)=\"addSection('BELOW', $event)\"><mat-icon>add</mat-icon></button>\r\n    </div>\r\n</mat-dialog-content>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}.hover-tab{display:flex;justify-content:flex-end;align-items:center;position:absolute;right:30px;top:40px;height:auto;cursor:grab}.adjustPosition{top:200px}.bottom-btn{position:absolute;top:100%;left:0%;z-index:101;border:1px solid var(--primary-bg-color);width:100%}.bottom-btn .add_btn{width:30px!important;height:30px;background:var(--primary-bg-color);border-radius:4px;transform:translate(-50%,-50%);color:#fff;cursor:pointer;border:none;outline:none;position:absolute;top:100%;left:50%;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease}.bottom-btn .add_btn:hover{background-color:var(--primary-bg-color);color:#fff;border-color:var(--primary-bg-color);transform:translate(-50%,-60%);box-shadow:#0003 0 8px 20px}.border-radius-50{border-radius:50%!important}:is(.bottom-btn,.top-btn) mat-icon{font-size:21px!important;width:21px!important;display:flex;align-items:center;justify-content:center}.adjust-top-btn{top:170px!important}.top-btn{position:absolute;top:0%;left:0%;z-index:101;width:100%;border:1px solid var(--primary-bg-color)}.top-btn .add_btn_top{top:0!important;width:30px!important;height:30px;background:var(--primary-bg-color);border-radius:4px;position:absolute;left:50%;transform:translate(-50%,-50%);border:none;color:#fff;cursor:pointer;outline:none;z-index:1001;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease}.top-btn .add_btn_top:hover{background-color:var(--primary-bg-color);color:#fff;border-color:var(--primary-bg-color);transform:translate(-50%,-60%);box-shadow:#0003 0 8px 20px}.tabs-section{width:auto;padding:6px 6px 6px 16px;box-shadow:#0000001a 0 4px 12px;border-radius:8px;display:flex;align-items:center;height:48px;background-color:#fff;gap:8px}.section-name{font-size:14px;color:#8c98a4;font-weight:500;margin-right:8px;cursor:grab;-webkit-user-select:none;user-select:none;white-space:nowrap}.edit-btn{display:flex;align-items:center;justify-content:center;gap:6px;background-color:#f6f0ff;color:#4a2b6d;border:none;border-radius:6px;padding:6px 12px;font-size:14px!important;font-weight:500;cursor:pointer;transition:background-color .2s ease}.edit-btn:hover{background-color:var(--primary-bg-color);color:#fff}.icon-btn{display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#8c98a4;cursor:pointer;padding:4px;border-radius:4px;transition:background-color .2s ease,color .2s ease}.icon-btn:hover{background-color:#f5f5f5;color:#4a2b6d}.icon-btn:disabled{opacity:.5;cursor:not-allowed}.more-btn{margin-left:4px}.simpo-custom-menu{position:absolute;top:100%;right:0;margin-top:8px;background:#fff;border-radius:8px;box-shadow:#0000001a 0 4px 12px;min-width:180px;padding:4px 0;z-index:1000;display:flex;flex-direction:column}.simpo-custom-menu .menu-item-custom{display:flex;align-items:center;width:100%;padding:0 16px;min-height:40px;background:transparent;white-space:nowrap;border:none;font-size:14px;color:#333;cursor:pointer;text-align:left;transition:background-color .2s;border-radius:6px}.simpo-custom-menu .menu-item-custom .menu-item-text{font-size:14px!important;font-weight:500!important}.simpo-custom-menu .menu-item-custom:hover{background-color:#f5f5f5}.simpo-custom-menu .menu-icon{margin-right:12px;color:#333;flex-shrink:0}.simpo-custom-menu .ai-badge{margin-left:auto;background-color:#a855f7;color:#fff;font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px;line-height:1}.simpo-custom-menu .menu-divider{height:1px;background-color:#e0e0e0;margin:4px 0}.simpo-custom-menu .delete-item,.simpo-custom-menu .delete-item .menu-icon,.simpo-custom-menu .delete-item .delete-text{color:#e03131!important;font-size:14px!important}@media only screen and (max-width: 475px){.tabs-section{position:relative;left:27px;height:48px}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }, { type: i1$1.MatDialog }], propDecorators: { edit: [{
                 type: Output
             }], data: [{
@@ -27029,5 +27131,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
-export { API_URL, APPOINTMENT_URL, AddNewSectionComponent, AlignContent, AlignmentDirective, AnimationDirective, AppointmentBookingComponent, AppointmentFormComponent, AuthenticateUserComponent, AuthenticationRequiredComponent, BANNERALIGNMENT, BANNERHALIGN, BUCKET_URL, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BookAppointmentComponent, BorderDirective, BrandStorySectionComponent, ButtonDirectiveDirective, ButtonGridSectionComponent, CMIS_URL, CarouselBannerComponent, Cart, CartComponent, Category, CategoryProductComponent, ChannelType, CheckoutComponent, ChooseUsSectionComponent, Collection, ColorDirective, ColumnDirectiveDirective, CondensedAndGradientComponent, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, CountdownBannerComponent, CustomerReviewComponent, DeviderType, ECOMMERCE_URL, EndUserService, EnrollmentFormComponent, EventsService, FaqColumnsCardsComponent, FaqSectionComponent, FeatureExperienceSectionComponent, FeaturedCategoryComponent, FeaturedCollectionComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterComponent, FooterSectionComponent, FooterType, FooterTypes, FourFeaturesCenteredImageComponent, GradientDirection, HALIGN, HEADER_STYLING, HeaderButtonStyle, HeaderSectionComponent, HeaderTextComponent, Header_Type, HeightDirective, HoverAnimationDirective, HoverDirective, IconDirectiveDirective, ImageBackgroundComponent, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridHotspotComponent, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LOCAL_STORAGE, LocationSectionComponent, LogoGalleryComponent, LogoShowcaseComponent, MapType, Menu_Type, MergeHeaderDirective, MovingTextComponent, NavbarSectionComponent, NewCollectionComponent, NewServicesComponent, NewTestimonialsComponent, NewsLetterComponentComponent, ObjectPositionDirective, OverlappingImageComponent, OverlayDirective, OverlayValue, PASSBOOK_URL, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductCardTheme, ProductCategoryListComponent, ProductDescComponent, ProductInfoSectionComponent, ProductListComponent, PropertyComponentComponent, PropertyListComponent, RECOMMENDATION_URL, RecentBlogPostSectionComponent, RedirectionLinkType, ReferEarnComponent, RegistrationFormComponent, RemoveCarouselDirective, ReturnsCalculatorComponent, SPACING$1 as SPACING, SPACINGALIGN, SanitizeHtmlPipe, SchemeDetailComponent, SchemesComponent, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, SpacingAroundDirective, SpacingDirective, StoreListComponent, StorePageComponent, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialMasonryComponent, TestimonialSectionComponent, TestimonialSliderComponent, TestimonialVideoComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, TranslateOnhoverDirective, UserProfileComponent, UspVideoSectionComponent, VALIGN, VerifyComponent, VideoCarouselSectionComponent, VideoGridSectionComponent, VideoRatio, VideoSectionComponent, ViewBlogComponent, WhislistComponent, animation, applySpacing, applyStyle, cartType, checkItemAlreadyAdded, contentAlignment, fitContent, fitScreen, fontSize, headlineAnimationType, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective, svgData, syncItemToServerDBRequest };
+export { API_URL, APPOINTMENT_URL, AddNewSectionComponent, AddSectionComponent, AlignContent, AlignmentDirective, AnimationDirective, AppointmentBookingComponent, AppointmentFormComponent, AuthenticateUserComponent, AuthenticationRequiredComponent, BANNERALIGNMENT, BANNERHALIGN, BUCKET_URL, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BookAppointmentComponent, BorderDirective, BrandStorySectionComponent, ButtonDirectiveDirective, ButtonGridSectionComponent, CMIS_URL, CarouselBannerComponent, Cart, CartComponent, Category, CategoryProductComponent, ChannelType, CheckoutComponent, ChooseUsSectionComponent, Collection, ColorDirective, ColumnDirectiveDirective, CondensedAndGradientComponent, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, CountdownBannerComponent, CustomerReviewComponent, DeviderType, ECOMMERCE_URL, EndUserService, EnrollmentFormComponent, EventsService, FaqColumnsCardsComponent, FaqSectionComponent, FeatureExperienceSectionComponent, FeaturedCategoryComponent, FeaturedCollectionComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterComponent, FooterSectionComponent, FooterType, FooterTypes, FourFeaturesCenteredImageComponent, GradientDirection, HALIGN, HEADER_STYLING, HeaderButtonStyle, HeaderSectionComponent, HeaderTextComponent, Header_Type, HeightDirective, HoverAnimationDirective, HoverDirective, IconDirectiveDirective, ImageBackgroundComponent, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridHotspotComponent, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LOCAL_STORAGE, LocationSectionComponent, LogoGalleryComponent, LogoShowcaseComponent, MapType, Menu_Type, MergeHeaderDirective, MovingTextComponent, NavbarSectionComponent, NewCollectionComponent, NewServicesComponent, NewTestimonialsComponent, NewsLetterComponentComponent, ObjectPositionDirective, OverlappingImageComponent, OverlayDirective, OverlayValue, PASSBOOK_URL, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductCardTheme, ProductCategoryListComponent, ProductDescComponent, ProductInfoSectionComponent, ProductListComponent, PropertyComponentComponent, PropertyListComponent, RECOMMENDATION_URL, RecentBlogPostSectionComponent, RedirectionLinkType, ReferEarnComponent, RegistrationFormComponent, RemoveCarouselDirective, ReturnsCalculatorComponent, SPACING$1 as SPACING, SPACINGALIGN, SanitizeHtmlPipe, SchemeDetailComponent, SchemesComponent, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, SpacingAroundDirective, SpacingDirective, StoreListComponent, StorePageComponent, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialMasonryComponent, TestimonialSectionComponent, TestimonialSliderComponent, TestimonialVideoComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, TranslateOnhoverDirective, UserProfileComponent, UspVideoSectionComponent, VALIGN, VerifyComponent, VideoCarouselSectionComponent, VideoGridSectionComponent, VideoRatio, VideoSectionComponent, ViewBlogComponent, WhislistComponent, animation, applySpacing, applyStyle, cartType, checkItemAlreadyAdded, contentAlignment, fitContent, fitScreen, fontSize, headlineAnimationType, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective, svgData, syncItemToServerDBRequest };
 //# sourceMappingURL=simpo-component-library.mjs.map