simpo-component-library 3.6.871 → 3.6.872

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 (10) hide show
  1. package/esm2022/lib/elements/add-section/add-section.component.mjs +3 -3
  2. package/fesm2022/simpo-component-library.mjs +2 -2
  3. package/fesm2022/simpo-component-library.mjs.map +1 -1
  4. package/lib/components/input-fields/input-fields.component.d.ts +1 -1
  5. package/lib/ecommerce/sections/product-desc/product-desc.component.d.ts +1 -1
  6. package/lib/ecommerce/sections/schemes/schemes.component.d.ts +1 -1
  7. package/lib/sections/pricing-section/pricing-section.component.d.ts +1 -1
  8. package/package.json +1 -1
  9. package/simpo-component-library-3.6.872.tgz +0 -0
  10. package/simpo-component-library-3.6.871.tgz +0 -0
package/fesm2022/simpo-component-library.mjs CHANGED
@@ -4194,11 +4194,11 @@ class AddSectionComponent {
4194
4194
  this.dummy2 = {};
4195
4195
  }
4196
4196
  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 }); }
4197
- 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"] }] }); }
4197
+ 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 </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"] }] }); }
4198
4198
  }
4199
4199
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddSectionComponent, decorators: [{
4200
4200
  type: Component,
4201
- 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"] }]
4201
+ 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 </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"] }]
4202
4202
  }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
4203
4203
  type: Inject,
4204
4204
  args: [MAT_DIALOG_DATA]