simpo-component-library 3.6.845 → 3.6.846

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 (6) 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/package.json +1 -1
  5. package/simpo-component-library-3.6.846.tgz +0 -0
  6. package/simpo-component-library-3.6.845.tgz +0 -0
package/fesm2022/simpo-component-library.mjs CHANGED
@@ -4208,11 +4208,11 @@ class AddSectionComponent {
4208
4208
  this.dummy2 = {};
4209
4209
  }
4210
4210
  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 }); }
4211
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AddSectionComponent, isStandalone: true, selector: "simpo-add-section", ngImport: i0, template: "<!-- <section class=\"main-container\">\r\n <div class=\"header-container d-flex align-items-center justify-content-between\">\r\n <div>Select Template</div>\r\n <mat-icon class=\"d-flex align-items-center justify-content-center f-18 cp\" (click)=\"dialog.close()\">\r\n close\r\n </mat-icon>\r\n </div>\r\n <div class=\"parent-container\">\r\n <div class=\"search-bar-container\">\r\n <div class=\"search-bar d-flex gap-10\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/314661c1741844234442Vector%20%281%29.png\"\r\n alt=\"search-bar-icon\">\r\n <input type=\"text\" placeholder=\"Search for Sections\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchSections()\">\r\n </div>\r\n </div>\r\n <div class=\"tab-container d-flex justify-content-around align-items-center\">\r\n <ng-container *ngFor=\"let ele of tabs\">\r\n <div class=\"tabs\" (click)=\"selectedTab = ele.value\" [class.active-tab]=\"ele.value == selectedTab\">\r\n {{ele.viewValue}}\r\n <ng-container *ngIf=\"ele.value == 'PRO' && ele.value != selectedTab\">\r\n <img class=\"w-30\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/468281c1744699664858Frame%201244831740%20%281%29.png\"\r\n alt=\"pro-icon\">\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <ng-container *ngIf=\"selectedTab === 'BASIC'; else proTabContent\">\r\n <ng-container *ngIf=\"!isSearch;else emptyScreen\">\r\n <div class=\"categories-container d-flex\">\r\n <div class=\"categories-sidepanel\" *ngIf=\"!loader\">\r\n <ng-container *ngFor=\"let ele of getObjectKeys(sections)\">\r\n <div class=\"side-section d-flex justify-content-center align-items-center flex-column\"\r\n (click)=\"selectSection(ele)\"\r\n [class.active-section]=\"selectedSection == sections[ele]\">\r\n <div class=\"image-container\">\r\n <ng-container *ngIf=\"selectedSection == sections[ele]\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/954383c1741850392802Group%201707481879.png\"\r\n alt=\"icon text\">\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedSection != sections[ele]\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/846145c1741850574864Icon%20%281%29.png\"\r\n alt=\"icon text\">\r\n </ng-container>\r\n </div>\r\n <div class=\"section-text\">\r\n {{ele}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"categories-render-section\" *ngIf=\" !loader && !tabShiftLoader\">\r\n <div class=\"categories-head\">\r\n {{selectedSectionName}}\r\n </div>\r\n <div class=\"sub-text\">\r\n Select a section to add to your page\r\n </div>\r\n <div class=\"sections-container\">\r\n <ng-container *ngFor=\"let ele of selectedSection\">\r\n <div class=\"section\">\r\n <div class=\"section-header\">{{ele.sectionName}}</div>\r\n <div class=\"section-img-container cp\"\r\n (click)=\"addNewSection(ele.componentId,ele.sectionType,$event)\">\r\n <ng-container *ngIf=\"ele?.image; else noImage\">\r\n <img [src]=\"ele?.image\" alt=\"section image\">\r\n </ng-container>\r\n <ng-template #noImage>\r\n <img src=\"https://img.freepik.com/premium-vector/default-image-icon-vector-missing-picture-page-website-design-mobile-app-no-photo-available_87543-11093.jpg\"\r\n alt=\"section image\" class=\"h-30\">\r\n </ng-template>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"categories-sidepanel\" *ngIf=\"loader\">\r\n <ng-container *ngFor=\"let ele of [1,1,1,1,1,1,1,1,1]\">\r\n <div class=\"d-flex justify-content-center align-items-center flex-column\">\r\n <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n height: '8vh',\r\n width: '65%',\r\n 'border-radius': '13px',\r\n 'margin-bottom' : '10px',\r\n }\" class=\"d-flex justify-content-center w-100\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"categories-render-section\" *ngIf=\"loader || tabShiftLoader\">\r\n <div class=\"categories-head\">\r\n <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n width: '20%',\r\n height : '3vh',\r\n 'border-radius': '5px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n <div class=\"sub-text\">\r\n <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n width: '60%',\r\n height : '2vh',\r\n 'border-radius': '5px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n <div class=\"sections-container\">\r\n <ng-container *ngFor=\"let ele of [1,1,1,1]\">\r\n <div class=\"section\">\r\n <div> <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n width: '25%',\r\n height : '2vh',\r\n 'border-radius': '5px',\r\n }\">\r\n </ngx-skeleton-loader></div>\r\n <div>\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '100%',\r\n height : '25vh',\r\n 'border-radius': '5px',\r\n 'margin':'2px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #proTabContent>\r\n <div class=\"empty-div d-flex align-items-center justify-content-center flex-column\">\r\n <div class=\"image-container-1\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/377076c1743154807683image%20%286%29.png\" alt=\"empty-img\" class=\"empty-img \">\r\n </div>\r\n <div class=\"oops-text\">\r\n Coming Soon\r\n </div>\r\n <div class=\"oops-sub-text\">\r\n <div class=\"oops-sub-text-1 text-center\">Woof! Something pawsome is coming!</div>\r\n <div class=\"oops-sub-text-2 text-center\">\r\n Hey hooman! I just sniffed out something super exciting... and it\u2019s almost here! \r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template #emptyScreen>\r\n <div class=\"empty-div d-flex align-items-center justify-content-center flex-column\">\r\n <div class=\"image-container-1\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/377076c1743154807683image%20%286%29.png\" alt=\"empty-img\" class=\"empty-img \">\r\n </div>\r\n <div class=\"oops-text\">\r\n Oops! \r\n </div>\r\n <div class=\"oops-sub-text\">\r\n <div class=\"oops-sub-text-1 text-center\">I sniffed everywhere, but I couldn't find what you're looking for</div>\r\n <div class=\"oops-sub-text-2 text-center\">\r\n Maybe try a different search? \r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n</section> -->\r\n\r\n<section class=\"main-container d-flex flex-column\">\r\n\r\n <div class=\"header-container relative px-3 py-2 fade-in\">\r\n <div class=\"header-title fs-16 fw-bold\">Add a section</div>\r\n <div class=\"header-subtitle fs-12 text-secondary\">\r\n Choose a section \u2014 you can reorder or remove it any time.\r\n </div>\r\n <mat-icon class=\"close-btn d-flex align-items-center justify-content-center\"\r\n (click)=\"dialog.close()\">close</mat-icon>\r\n </div>\r\n\r\n <div class=\"parent-container d-flex flex-column\">\r\n\r\n <!-- Tabs -->\r\n <div class=\"top-tabs-container d-flex justify-content-between fade-in\">\r\n <ng-container *ngFor=\"let ele of tabs\">\r\n <div class=\"top-tab\" (click)=\"selectedTab = ele.value\"\r\n [class.active-top-tab]=\"ele.value == selectedTab\">\r\n {{ele.viewValue}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- Search -->\r\n <div class=\"search-bar-container fade-in\">\r\n <div class=\"search-bar d-flex gap-2 align-items-center\">\r\n <img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/314661c1741844234442Vector%20%281%29.png\">\r\n <input type=\"text\" placeholder='Search section...' [(ngModel)]=\"searchText\"\r\n (ngModelChange)=\"searchSections()\">\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"selectedTab === 'BASIC'; else proTabContent\">\r\n\r\n <ng-container *ngIf=\"!isSearch; else emptyScreen\">\r\n\r\n <!-- Quick Add -->\r\n <div class=\"quick-add-container fade-in d-flex align-items-center\" *ngIf=\"!loader && !searchText\">\r\n <div class=\"quick-add-label\">Quick add:</div>\r\n <div class=\"quick-add-chips d-flex\">\r\n <ng-container *ngFor=\"let category of getObjectKeys(sections); let i = index\">\r\n <ng-container *ngIf=\"i < 6\">\r\n <div class=\"quick-chip stagger-item d-flex align-items-center\"\r\n (click)=\"selectSection(category); toggleCategory(category)\"\r\n [class.active-quick-chip]=\"selectedSectionName === category\">\r\n <span class=\"chip-emoji\">{{getCategoryEmoji(category)}}</span>\r\n {{getFirstSectionName(category)}}\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- CONTENT -->\r\n <div class=\"content-layout fade-in d-flex\" *ngIf=\"!loader\">\r\n <!-- LEFT -->\r\n <div class=\"left-sidebar\">\r\n <div class=\"category-header d-flex align-items-center\">\r\n <div class=\"category-icon d-flex align-items-center justify-content-center\">\u2728</div>\r\n <div class=\"fs-14\">AI Recommended</div>\r\n </div>\r\n <ng-container *ngFor=\"let category of getObjectKeys(sections)\">\r\n <div class=\"category-block\">\r\n <div class=\"category-header d-flex align-items-end justify-content-between\"\r\n (click)=\"toggleCategory(category)\">\r\n <div class=\"d-flex gap-2 align-items-center\">\r\n <span class=\"category-icon\">\r\n {{getCategoryEmoji(category)}}\r\n </span>\r\n <span class=\" fs-14\">\r\n {{category}}\r\n </span>\r\n </div>\r\n <mat-icon class=\"category-arrow\" *ngIf=\"expandedCategories[category]\">\r\n expand_less\r\n </mat-icon>\r\n <mat-icon class=\"category-arrow\" *ngIf=\"!expandedCategories[category]\">\r\n expand_more\r\n </mat-icon>\r\n </div>\r\n <div class=\"category-items d-flex flex-column\" *ngIf=\"expandedCategories[category]\">\r\n <ng-container *ngFor=\"let sec of sections[category]\">\r\n <div class=\"category-item\"\r\n [class.active]=\"selectedComponent?.componentId === sec.componentId\"\r\n (click)=\"selectComponent(sec, category)\">\r\n {{sec.sectionName}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- RIGHT -->\r\n <div class=\"right-content\">\r\n\r\n <div class=\"section-group-label\">Most impactful sections</div>\r\n\r\n <div class=\"sections-list d-flex flex-column\">\r\n\r\n <ng-container *ngFor=\"let ele of selectedSection; let i = index\">\r\n\r\n <!-- FILTERED VIEW -->\r\n <ng-container\r\n *ngIf=\"!selectedComponent || selectedComponent?.componentId === ele.componentId\">\r\n\r\n <div class=\"section-card stagger-item\" [style.animation-delay]=\"i * 40 + 'ms'\"\r\n [class.section-card-selected]=\"selectedComponent?.componentId === ele.componentId\"\r\n (click)=\"selectComponentAndHighlight(ele)\">\r\n\r\n <div class=\"section-card-badge\" *ngIf=\"ele.sectionType\">\r\n + {{ele.sectionType | uppercase}}\r\n </div>\r\n\r\n <div\r\n class=\"section-img-container d-flex align-items-center justify-content-center\">\r\n <ng-container *ngIf=\"ele?.image; else noImage\">\r\n <img [src]=\"ele?.image\">\r\n </ng-container>\r\n\r\n <ng-template #noImage>\r\n <div\r\n class=\"no-image-placeholder d-flex align-items-center justify-content-center\">\r\n <mat-icon>image</mat-icon>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n <div class=\"section-card-info\">\r\n <div class=\"section-card-name\">{{ele.sectionName}}</div>\r\n <div class=\"section-card-desc\" *ngIf=\"ele.desc\">{{ele.desc}}</div>\r\n </div>\r\n\r\n </div>\r\n\r\n </ng-container>\r\n\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"content-layout d-flex\" *ngIf=\"loader\">\r\n <div class=\"left-sidebar\">\r\n <ng-container *ngFor=\"let s of [1,1,1,1,1,1,1,1]\">\r\n <ngx-skeleton-loader\r\n [theme]=\"{ width: '90%', height: '36px', 'border-radius': '8px', 'margin-bottom': '6px' }\"></ngx-skeleton-loader>\r\n </ng-container>\r\n </div>\r\n <div class=\"right-content\">\r\n <ng-container *ngFor=\"let s of [1,1,1,1]\">\r\n <div class=\"section-card\">\r\n <ngx-skeleton-loader\r\n [theme]=\"{ width: '40%', height: '20px', 'border-radius': '4px', 'margin-bottom': '8px' }\"></ngx-skeleton-loader>\r\n <ngx-skeleton-loader\r\n [theme]=\"{ width: '100%', height: '180px', 'border-radius': '8px', 'margin-bottom': '8px' }\"></ngx-skeleton-loader>\r\n <ngx-skeleton-loader\r\n [theme]=\"{ width: '60%', height: '16px', 'border-radius': '4px' }\"></ngx-skeleton-loader>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- EMPTY SEARCH -->\r\n <ng-template #emptyScreen>\r\n <div class=\"empty-state fade-in d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://cdn-icons-png.flaticon.com/512/7486/7486803.png\">\r\n <div class=\"empty-title\">No sections found</div>\r\n <div class=\"empty-subtitle\">\r\n Try searching something else or explore categories\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- PRO TAB -->\r\n <ng-template #proTabContent>\r\n <div class=\"empty-state fade-in d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://cdn-icons-png.flaticon.com/512/4076/4076549.png\">\r\n <div class=\"empty-title\">Coming Soon</div>\r\n <div class=\"empty-subtitle\">\r\n Something awesome is on the way \uD83D\uDE80\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n </div>\r\n\r\n <!-- Footer -->\r\n <div class=\"footer-container fade-in d-flex align-items-center justify-content-between\">\r\n <div class=\"footer-hint fs-12 text-secondary d-flex align-items-center gap-1\">\r\n <mat-icon>info</mat-icon>\r\n You can rearrange or remove this section any time.\r\n </div>\r\n\r\n <div class=\"footer-actions d-flex align-items-center gap-2\">\r\n <div class=\"btn-cancel fs-14\" (click)=\"dialog.close()\">Cancel</div>\r\n <div class=\"btn-add fs-14\" [class.disabled]=\"!selectedComponent\"\r\n (click)=\"selectedComponent && addNewSection(selectedComponent.componentId, selectedComponent.sectionType, $event)\">\r\n + Add section\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}.header-container{padding:12px 15px;font-size:15px;line-height:24px;font-weight:600;color:#000;margin-bottom:2px}.gap-10{gap:10px!important}.tab-container{padding:8px;margin:0 15px;gap:3%;background:#fff;border-radius:13px}.tabs{font-size:14px;font-weight:500;line-height:24px;color:#2c2c2c99;width:30%;cursor:pointer;padding:8px 0;text-align:center}.active-tab{color:#fff!important;background:var(--primary-bg-color);box-shadow:0 0 4px #00000040;border-radius:8px;transition:opacity .3s ease-in-out,transform .3s ease-in-out;opacity:1;transform:translateY(0)}.categories-sidepanel{width:15%;padding:10px 5px;margin:15px 0;border-radius:10px;height:calc(70vh + -0px);overflow-y:scroll;background:#fff}.side-section{padding:6px 10px;border-radius:8px;margin-bottom:10px;cursor:pointer}.side-section img{width:16px}.side-section .image-container{background:#f9fafb;padding:5px 8px;border-radius:5px}.side-section .section-text{font-size:12px;font-weight:500;line-height:24px;text-align:center;color:#a1a1a1}.active-section{background:var(--primary-bg-color)!important;box-shadow:0 0 4px #00000040}.active-section .section-text{color:#fff!important}.active-section .image-container{background:unset!important;padding:unset!important;border-radius:unset!important}.categories-render-section{width:85%;padding:15px;margin:15px 10px;border-radius:10px;height:calc(70vh + -0px);overflow-y:scroll;background:#fff}.categories-head{font-size:20px;font-weight:600;line-height:24px;color:#434343}.sub-text{font-size:13px;font-weight:500;line-height:24px;color:#a1a1a1;margin-bottom:10px}.section{margin-bottom:10px}.section-header{font-size:14px;font-weight:500;line-height:24px;color:#a1a1a1;margin-bottom:10px}.section-img-container{padding:18px;border-radius:8px;background:#f9fafb}.section-img-container img{width:100%}.search-bar-container{padding:15px}.parent-container{background:#fafafa}.f-18{font-size:18px;cursor:pointer}.w-30{width:30px!important}.h-30{height:30vh}.cp{cursor:pointer}.empty-div{height:calc(70vh + -0px);background:#fff;margin:18px;border-radius:13px}.oops-text{font-weight:900;font-size:42px;background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent}.oops-sub-text-1{font-size:17px;font-weight:600;color:#101010e5}.oops-sub-text-2{font-size:14px;font-weight:600;color:#101010e5}.main-container{height:100vh;background:#fff;border-radius:16px;overflow:hidden}.fs-14{font-size:14px}.fs-12{font-size:12px}.fs-16{font-size:16px}.close-btn{position:absolute;top:18px;right:20px;cursor:pointer;color:#666;font-size:20px;width:28px;height:28px;border-radius:6px}.top-tabs-container{background:#dcdcdc4f;margin:0 14px;border-radius:10px;padding:4px}.top-tab{padding:6px 34px;font-size:13px;color:#666;cursor:pointer;border-bottom:2px solid transparent;transition:color .15s}.active-top-tab{font-weight:600;background:#fff;border-radius:10px}.parent-container{flex:1;overflow:hidden;padding:0}.search-bar-container{padding:12px 16px 8px}.search-bar{border:1.5px solid #e8e8e8;border-radius:10px;padding:8px 12px;transition:border .15s}.search-bar:focus-within{border-color:var(--primary-bg-color)}.search-bar img{width:16px;height:16px;opacity:.5}.search-bar input{border:none;outline:none;background:transparent;font-size:13px;color:#333;width:100%}.search-bar input::placeholder{color:#aaa}.quick-add-container{padding:4px 24px 10px;gap:10px;flex-wrap:wrap;flex-shrink:0}.quick-add-label{font-size:12px;color:#888;white-space:nowrap}.quick-add-chips{gap:6px;width:100%;overflow-y:scroll;white-space:nowrap}.quick-chip{gap:5px;padding:4px 10px;font-size:12px;border:1.5px solid #e0e0e0;border-radius:20px;cursor:pointer;color:#333;background:#fff;transition:background .12s,border-color .12s;-webkit-user-select:none;user-select:none}.quick-chip.active-quick-chip{border-color:#7c6cf0;color:#4b3fc0;font-weight:500}.quick-chip{transition:all .2s ease}.chip-emoji{font-size:14px}.content-layout{flex:1;overflow:hidden;border-top:1px solid #f0f0f0}.sidebar-group{margin-bottom:2px}.sidebar-group-header{gap:8px;padding:9px 14px;cursor:pointer;border-radius:0;transition:background .12s;-webkit-user-select:none;user-select:none;font-size:13px;color:#444}.sidebar-group-header:hover{background:#f0f0f0}.sidebar-group-active{background:#ece9fd;color:#4b3fc0;font-weight:600}.sidebar-group-icon{font-size:15px;width:20px;text-align:center}.sidebar-group-label{flex:1;font-size:13px}.sidebar-chevron{font-size:18px;width:18px;height:18px;color:#aaa;transition:transform .2s}.sidebar-chevron.rotated{transform:rotate(180deg)}.subcategory-item{padding:6px 10px 6px 8px;font-size:12px;color:#555;cursor:pointer;border-radius:6px;transition:background .12s;-webkit-user-select:none;user-select:none}.subcategory-item:hover{background:#ece9fd;color:#4b3fc0}.subcategory-active{background:#ece9fd;color:#4b3fc0;font-weight:500}.right-content{flex:1;overflow-y:auto;padding:16px 20px 16px 0}.section-group-label{font-size:13px;font-weight:600;color:#444;margin-bottom:14px}.sections-list{gap:16px}.section-card{border:1.5px solid #e8e8e8;border-radius:12px;overflow:hidden;cursor:pointer;background:#fff;transition:border-color .15s,box-shadow .15s}.section-card:hover{border-color:#bbb;box-shadow:0 2px 8px #0000000f}.section-card-selected{border-color:#7c6cf0;box-shadow:0 0 0 3px #7c6cf026}.section-card-badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.5px;color:#5a4fcf;background:#ece9fd;padding:4px 10px;margin:10px 10px 6px;border-radius:20px}.section-img-container{width:100%;overflow:hidden;background:#f7f7f7;display:flex;align-items:center;justify-content:center;max-height:200px}.no-image-placeholder{height:140px;display:flex;align-items:center;justify-content:center;color:#ccc}.no-image-placeholder mat-icon{font-size:40px;width:40px;height:40px}.section-card-info{padding:10px 14px 12px}.section-card-name{font-size:13px;font-weight:600;color:#222;margin-bottom:3px}.section-card-desc{font-size:12px;color:#888;line-height:1.5}.image-container-1{margin-bottom:16px}.empty-img{width:100px;opacity:.85}.footer-container{padding:12px 20px;border-top:1px solid #eee;background:#fff}.footer-hint mat-icon{font-size:14px;width:14px;height:14px}.btn-cancel{padding:8px 18px;font-size:13px;border:1.5px solid #e0e0e0;border-radius:8px;background:#fff;color:#444;cursor:pointer}.btn-add{padding:8px 20px;font-size:13px;font-weight:600;border:none;border-radius:8px;background:var(--primary-bg-color);color:#fff;cursor:pointer}.btn-add:disabled{opacity:.4;cursor:not-allowed}.fade-in{animation:fadeIn .25s ease}.fade-slide{animation:fadeSlide .25s ease}.stagger-item{opacity:0;transform:translateY(10px);animation:staggerFade .3s ease forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeSlide{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes staggerFade{to{opacity:1;transform:translateY(0)}}.section-card{transition:all .2s ease}@keyframes expandFade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.empty-state{height:100%;gap:10px;text-align:center}.empty-state img{width:120px;opacity:.85}.empty-title{font-size:16px;font-weight:600;color:#333}.empty-subtitle{font-size:13px;color:#777;max-width:260px}.active-subcategory{background:#7c6cf0!important;color:#fff!important}.sidebar-subcategory{overflow:hidden;animation:dropdownSmooth .25s ease}@keyframes dropdownSmooth{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.section-card:hover{transform:translateY(-4px)}.section-img-container img{transition:transform .25s ease,opacity .2s}.section-img-container:hover img{transform:scale(1.03)}.left-sidebar{width:200px;background:#f7f7fb;padding:16px 10px}.category-block{margin-bottom:10px}.category-header{gap:10px;padding:6px 10px;cursor:pointer;border-radius:10px;transition:background .2s}.category-header:hover{background:#ece9fd}.category-icon{font-size:18px}.category-arrow{font-size:18px;color:#888;transition:transform .25s ease}.category-arrow.rotate{transform:rotate(180deg)}.category-items{padding-left:14px;margin-top:0;gap:6px;animation:dropdownFade .25s ease}@keyframes dropdownFade{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.category-item{padding:4px 12px;font-size:12px;color:#444;cursor:pointer;border-radius:10px;transition:all .2s ease}.category-item:hover{background:#ece9fd;color:#4b3fc0}.category-item.active{background:#e6e1f7;color:#4b0d5d;font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
4211
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AddSectionComponent, isStandalone: true, selector: "simpo-add-section", ngImport: i0, template: "<!-- <section class=\"main-container\">\r\n <div class=\"header-container d-flex align-items-center justify-content-between\">\r\n <div>Select Template</div>\r\n <mat-icon class=\"d-flex align-items-center justify-content-center f-18 cp\" (click)=\"dialog.close()\">\r\n close\r\n </mat-icon>\r\n </div>\r\n <div class=\"parent-container\">\r\n <div class=\"search-bar-container\">\r\n <div class=\"search-bar d-flex gap-10\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/314661c1741844234442Vector%20%281%29.png\"\r\n alt=\"search-bar-icon\">\r\n <input type=\"text\" placeholder=\"Search for Sections\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchSections()\">\r\n </div>\r\n </div>\r\n <div class=\"tab-container d-flex justify-content-around align-items-center\">\r\n <ng-container *ngFor=\"let ele of tabs\">\r\n <div class=\"tabs\" (click)=\"selectedTab = ele.value\" [class.active-tab]=\"ele.value == selectedTab\">\r\n {{ele.viewValue}}\r\n <ng-container *ngIf=\"ele.value == 'PRO' && ele.value != selectedTab\">\r\n <img class=\"w-30\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/468281c1744699664858Frame%201244831740%20%281%29.png\"\r\n alt=\"pro-icon\">\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <ng-container *ngIf=\"selectedTab === 'BASIC'; else proTabContent\">\r\n <ng-container *ngIf=\"!isSearch;else emptyScreen\">\r\n <div class=\"categories-container d-flex\">\r\n <div class=\"categories-sidepanel\" *ngIf=\"!loader\">\r\n <ng-container *ngFor=\"let ele of getObjectKeys(sections)\">\r\n <div class=\"side-section d-flex justify-content-center align-items-center flex-column\"\r\n (click)=\"selectSection(ele)\"\r\n [class.active-section]=\"selectedSection == sections[ele]\">\r\n <div class=\"image-container\">\r\n <ng-container *ngIf=\"selectedSection == sections[ele]\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/954383c1741850392802Group%201707481879.png\"\r\n alt=\"icon text\">\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedSection != sections[ele]\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/846145c1741850574864Icon%20%281%29.png\"\r\n alt=\"icon text\">\r\n </ng-container>\r\n </div>\r\n <div class=\"section-text\">\r\n {{ele}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"categories-render-section\" *ngIf=\" !loader && !tabShiftLoader\">\r\n <div class=\"categories-head\">\r\n {{selectedSectionName}}\r\n </div>\r\n <div class=\"sub-text\">\r\n Select a section to add to your page\r\n </div>\r\n <div class=\"sections-container\">\r\n <ng-container *ngFor=\"let ele of selectedSection\">\r\n <div class=\"section\">\r\n <div class=\"section-header\">{{ele.sectionName}}</div>\r\n <div class=\"section-img-container cp\"\r\n (click)=\"addNewSection(ele.componentId,ele.sectionType,$event)\">\r\n <ng-container *ngIf=\"ele?.image; else noImage\">\r\n <img [src]=\"ele?.image\" alt=\"section image\">\r\n </ng-container>\r\n <ng-template #noImage>\r\n <img src=\"https://img.freepik.com/premium-vector/default-image-icon-vector-missing-picture-page-website-design-mobile-app-no-photo-available_87543-11093.jpg\"\r\n alt=\"section image\" class=\"h-30\">\r\n </ng-template>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"categories-sidepanel\" *ngIf=\"loader\">\r\n <ng-container *ngFor=\"let ele of [1,1,1,1,1,1,1,1,1]\">\r\n <div class=\"d-flex justify-content-center align-items-center flex-column\">\r\n <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n height: '8vh',\r\n width: '65%',\r\n 'border-radius': '13px',\r\n 'margin-bottom' : '10px',\r\n }\" class=\"d-flex justify-content-center w-100\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"categories-render-section\" *ngIf=\"loader || tabShiftLoader\">\r\n <div class=\"categories-head\">\r\n <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n width: '20%',\r\n height : '3vh',\r\n 'border-radius': '5px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n <div class=\"sub-text\">\r\n <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n width: '60%',\r\n height : '2vh',\r\n 'border-radius': '5px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n <div class=\"sections-container\">\r\n <ng-container *ngFor=\"let ele of [1,1,1,1]\">\r\n <div class=\"section\">\r\n <div> <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n width: '25%',\r\n height : '2vh',\r\n 'border-radius': '5px',\r\n }\">\r\n </ngx-skeleton-loader></div>\r\n <div>\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '100%',\r\n height : '25vh',\r\n 'border-radius': '5px',\r\n 'margin':'2px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #proTabContent>\r\n <div class=\"empty-div d-flex align-items-center justify-content-center flex-column\">\r\n <div class=\"image-container-1\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/377076c1743154807683image%20%286%29.png\" alt=\"empty-img\" class=\"empty-img \">\r\n </div>\r\n <div class=\"oops-text\">\r\n Coming Soon\r\n </div>\r\n <div class=\"oops-sub-text\">\r\n <div class=\"oops-sub-text-1 text-center\">Woof! Something pawsome is coming!</div>\r\n <div class=\"oops-sub-text-2 text-center\">\r\n Hey hooman! I just sniffed out something super exciting... and it\u2019s almost here! \r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template #emptyScreen>\r\n <div class=\"empty-div d-flex align-items-center justify-content-center flex-column\">\r\n <div class=\"image-container-1\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/377076c1743154807683image%20%286%29.png\" alt=\"empty-img\" class=\"empty-img \">\r\n </div>\r\n <div class=\"oops-text\">\r\n Oops! \r\n </div>\r\n <div class=\"oops-sub-text\">\r\n <div class=\"oops-sub-text-1 text-center\">I sniffed everywhere, but I couldn't find what you're looking for</div>\r\n <div class=\"oops-sub-text-2 text-center\">\r\n Maybe try a different search? \r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n</section> -->\r\n\r\n<section class=\"main-container d-flex flex-column\">\r\n\r\n <div class=\"header-container relative px-3 py-2 fade-in\">\r\n <div class=\"header-title fs-16 fw-bold\">Add a section</div>\r\n <div class=\"header-subtitle fs-12 text-secondary\">\r\n Choose a section \u2014 you can reorder or remove it any time.\r\n </div>\r\n <mat-icon class=\"close-btn d-flex align-items-center justify-content-center\"\r\n (click)=\"dialog.close()\">close</mat-icon>\r\n </div>\r\n\r\n <div class=\"parent-container d-flex flex-column\">\r\n\r\n <!-- Tabs -->\r\n <div class=\"top-tabs-container d-flex justify-content-between fade-in\">\r\n <ng-container *ngFor=\"let ele of tabs\">\r\n <div class=\"top-tab\" (click)=\"selectedTab = ele.value\"\r\n [class.active-top-tab]=\"ele.value == selectedTab\">\r\n {{ele.viewValue}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- Search -->\r\n <div class=\"search-bar-container fade-in\">\r\n <div class=\"search-bar d-flex gap-2 align-items-center\">\r\n <img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/314661c1741844234442Vector%20%281%29.png\">\r\n <input type=\"text\" placeholder='Search section...' [(ngModel)]=\"searchText\"\r\n (ngModelChange)=\"searchSections()\">\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"selectedTab === 'BASIC'; else proTabContent\">\r\n\r\n <ng-container *ngIf=\"!isSearch; else emptyScreen\">\r\n\r\n <!-- Quick Add -->\r\n <div class=\"quick-add-container fade-in d-flex align-items-center\" *ngIf=\"!loader && !searchText\">\r\n <div class=\"quick-add-label\">Quick add:</div>\r\n <div class=\"quick-add-chips d-flex\">\r\n <ng-container *ngFor=\"let category of getObjectKeys(sections); let i = index\">\r\n <ng-container *ngIf=\"i < 6\">\r\n <div class=\"quick-chip stagger-item d-flex align-items-center\"\r\n (click)=\"selectSection(category); toggleCategory(category)\"\r\n [class.active-quick-chip]=\"selectedSectionName === category\">\r\n <span class=\"chip-emoji\">{{getCategoryEmoji(category)}}</span>\r\n {{getFirstSectionName(category)}}\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- CONTENT -->\r\n <div class=\"content-layout fade-in d-flex\" *ngIf=\"!loader\">\r\n <!-- LEFT -->\r\n <div class=\"left-sidebar\">\r\n <div class=\"category-header d-flex align-items-center\">\r\n <div class=\"category-icon d-flex align-items-center justify-content-center\">\u2728</div>\r\n <div class=\"fs-14\">AI Recommended</div>\r\n </div>\r\n <ng-container *ngFor=\"let category of getObjectKeys(sections)\">\r\n <div class=\"category-block\">\r\n <div class=\"category-header d-flex align-items-end justify-content-between\"\r\n (click)=\"toggleCategory(category)\">\r\n <div class=\"d-flex gap-2 align-items-center\">\r\n <span class=\"category-icon\">\r\n {{getCategoryEmoji(category)}}\r\n </span>\r\n <span class=\" fs-14\">\r\n {{category}}\r\n </span>\r\n </div>\r\n <mat-icon class=\"category-arrow\" *ngIf=\"expandedCategories[category]\">\r\n expand_less\r\n </mat-icon>\r\n <mat-icon class=\"category-arrow\" *ngIf=\"!expandedCategories[category]\">\r\n expand_more\r\n </mat-icon>\r\n </div>\r\n <div class=\"category-items d-flex flex-column\" *ngIf=\"expandedCategories[category]\">\r\n <ng-container *ngFor=\"let sec of sections[category]\">\r\n <div class=\"category-item\"\r\n [class.active]=\"selectedComponent?.componentId === sec.componentId\"\r\n (click)=\"selectComponent(sec, category)\">\r\n {{sec.sectionName}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- RIGHT -->\r\n <div class=\"right-content\">\r\n\r\n <div class=\"section-group-label\">Most impactful sections</div>\r\n\r\n <div class=\"sections-list d-flex flex-column\">\r\n\r\n <ng-container *ngFor=\"let ele of selectedSection; let i = index\">\r\n\r\n <!-- FILTERED VIEW -->\r\n <ng-container\r\n *ngIf=\"!selectedComponent || selectedComponent?.componentId === ele.componentId\">\r\n\r\n <div class=\"section-card stagger-item\" [style.animation-delay]=\"i * 40 + 'ms'\"\r\n [class.section-card-selected]=\"selectedComponent?.componentId === ele.componentId\"\r\n (click)=\"selectComponentAndHighlight(ele)\">\r\n\r\n <div class=\"section-card-badge\" *ngIf=\"ele.sectionType\">\r\n + {{ele.sectionType | uppercase}}\r\n </div>\r\n\r\n <div\r\n class=\"section-img-container d-flex align-items-center justify-content-center\">\r\n <ng-container *ngIf=\"ele?.image; else noImage\">\r\n <img [src]=\"ele?.image\">\r\n </ng-container>\r\n\r\n <ng-template #noImage>\r\n <div\r\n class=\"no-image-placeholder d-flex align-items-center justify-content-center\">\r\n <mat-icon>image</mat-icon>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n <div class=\"section-card-info\">\r\n <div class=\"section-card-name\">{{ele.sectionName}}</div>\r\n <div class=\"section-card-desc\" *ngIf=\"ele.desc\">{{ele.desc}}</div>\r\n </div>\r\n\r\n </div>\r\n\r\n </ng-container>\r\n\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"content-layout d-flex\" *ngIf=\"loader\">\r\n <div class=\"left-sidebar\">\r\n <ng-container *ngFor=\"let s of [1,1,1,1,1,1,1,1]\">\r\n <ngx-skeleton-loader\r\n [theme]=\"{ width: '90%', height: '36px', 'border-radius': '8px', 'margin-bottom': '6px' }\"></ngx-skeleton-loader>\r\n </ng-container>\r\n </div>\r\n <div class=\"right-content\">\r\n <ng-container *ngFor=\"let s of [1,1,1,1]\">\r\n <div class=\"section-card\">\r\n <ngx-skeleton-loader\r\n [theme]=\"{ width: '40%', height: '20px', 'border-radius': '4px', 'margin-bottom': '8px' }\"></ngx-skeleton-loader>\r\n <ngx-skeleton-loader\r\n [theme]=\"{ width: '100%', height: '180px', 'border-radius': '8px', 'margin-bottom': '8px' }\"></ngx-skeleton-loader>\r\n <ngx-skeleton-loader\r\n [theme]=\"{ width: '60%', height: '16px', 'border-radius': '4px' }\"></ngx-skeleton-loader>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- EMPTY SEARCH -->\r\n <ng-template #emptyScreen>\r\n <div class=\"empty-state fade-in d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://cdn-icons-png.flaticon.com/512/7486/7486803.png\">\r\n <div class=\"empty-title\">No sections found</div>\r\n <div class=\"empty-subtitle\">\r\n Try searching something else or explore categories\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- PRO TAB -->\r\n <ng-template #proTabContent>\r\n <div class=\"empty-state fade-in d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://cdn-icons-png.flaticon.com/512/4076/4076549.png\">\r\n <div class=\"empty-title\">Coming Soon</div>\r\n <div class=\"empty-subtitle\">\r\n Something awesome is on the way \uD83D\uDE80\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n </div>\r\n\r\n <!-- Footer -->\r\n <div class=\"footer-container fade-in d-flex align-items-center justify-content-between\">\r\n <div class=\"footer-hint fs-12 text-secondary d-flex align-items-center gap-1\">\r\n <mat-icon>info</mat-icon>\r\n You can rearrange or remove this section any time.\r\n </div>\r\n\r\n <div class=\"footer-actions d-flex align-items-center gap-2\">\r\n <div class=\"btn-cancel fs-14\" (click)=\"dialog.close()\">Cancel</div>\r\n <div class=\"btn-add fs-14\" [class.disabled]=\"!selectedComponent\"\r\n (click)=\"selectedComponent && addNewSection(selectedComponent.componentId, selectedComponent.sectionType, $event)\">\r\n + Add section\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}.header-container{padding:12px 15px;font-size:15px;line-height:24px;font-weight:600;color:#000;margin-bottom:2px}.gap-10{gap:10px!important}.tab-container{padding:8px;margin:0 15px;gap:3%;background:#fff;border-radius:13px}.tabs{font-size:14px;font-weight:500;line-height:24px;color:#2c2c2c99;width:30%;cursor:pointer;padding:8px 0;text-align:center}.active-tab{color:#fff!important;background:var(--primary-bg-color);box-shadow:0 0 4px #00000040;border-radius:8px;transition:opacity .3s ease-in-out,transform .3s ease-in-out;opacity:1;transform:translateY(0)}.categories-sidepanel{width:15%;padding:10px 5px;margin:15px 0;border-radius:10px;height:calc(70vh + -0px);overflow-y:scroll;background:#fff}.side-section{padding:6px 10px;border-radius:8px;margin-bottom:10px;cursor:pointer}.side-section img{width:16px}.side-section .image-container{background:#f9fafb;padding:5px 8px;border-radius:5px}.side-section .section-text{font-size:12px;font-weight:500;line-height:24px;text-align:center;color:#a1a1a1}.active-section{background:var(--primary-bg-color)!important;box-shadow:0 0 4px #00000040}.active-section .section-text{color:#fff!important}.active-section .image-container{background:unset!important;padding:unset!important;border-radius:unset!important}.categories-render-section{width:85%;padding:15px;margin:15px 10px;border-radius:10px;height:calc(70vh + -0px);overflow-y:scroll;background:#fff}.categories-head{font-size:20px;font-weight:600;line-height:24px;color:#434343}.sub-text{font-size:13px;font-weight:500;line-height:24px;color:#a1a1a1;margin-bottom:10px}.section{margin-bottom:10px}.section-header{font-size:14px;font-weight:500;line-height:24px;color:#a1a1a1;margin-bottom:10px}.section-img-container{padding:18px;border-radius:8px;background:#f9fafb}.section-img-container img{width:100%}.search-bar-container{padding:15px}.parent-container{background:#fafafa}.f-18{font-size:18px;cursor:pointer}.w-30{width:30px!important}.h-30{height:30vh}.cp{cursor:pointer}.empty-div{height:calc(70vh + -0px);background:#fff;margin:18px;border-radius:13px}.oops-text{font-weight:900;font-size:42px;background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent}.oops-sub-text-1{font-size:17px;font-weight:600;color:#101010e5}.oops-sub-text-2{font-size:14px;font-weight:600;color:#101010e5}.main-container{height:100vh;background:#fff;border-radius:16px;overflow:hidden}.fs-14{font-size:14px}.fs-12{font-size:12px}.fs-16{font-size:16px}.close-btn{position:absolute;top:18px;right:20px;cursor:pointer;color:#666;font-size:20px;width:28px;height:28px;border-radius:6px}.top-tabs-container{background:#dcdcdc4f;margin:0 14px;border-radius:10px;padding:4px}.top-tab{padding:6px 34px;font-size:13px;color:#666;cursor:pointer;border-bottom:2px solid transparent;transition:color .15s}.active-top-tab{font-weight:600;background:#fff;border-radius:10px}.parent-container{flex:1;overflow:hidden;padding:0}.search-bar-container{padding:12px 16px 8px}.search-bar{border:1.5px solid #e8e8e8;border-radius:10px;padding:8px 12px;transition:border .15s}.search-bar:focus-within{border-color:var(--primary-bg-color)}.search-bar img{width:16px;height:16px;opacity:.5}.search-bar input{border:none;outline:none;background:transparent;font-size:13px;color:#333;width:100%}.search-bar input::placeholder{color:#aaa}.quick-add-container{padding:4px 24px 10px;gap:10px;flex-wrap:wrap;flex-shrink:0}.quick-add-label{font-size:12px;color:#888;white-space:nowrap}.quick-add-chips{gap:6px;width:100%;overflow-y:scroll;white-space:nowrap}.quick-chip{gap:5px;padding:4px 10px;font-size:12px;border:1.5px solid #e0e0e0;border-radius:20px;cursor:pointer;color:#333;background:#fff;transition:background .12s,border-color .12s;-webkit-user-select:none;user-select:none}.quick-chip.active-quick-chip{border-color:#7c6cf0;color:#4b3fc0;font-weight:500}.quick-chip{transition:all .2s ease}.chip-emoji{font-size:14px}.content-layout{flex:1;overflow:hidden;border-top:1px solid #f0f0f0}.sidebar-group{margin-bottom:2px}.sidebar-group-header{gap:8px;padding:9px 14px;cursor:pointer;border-radius:0;transition:background .12s;-webkit-user-select:none;user-select:none;font-size:13px;color:#444}.sidebar-group-header:hover{background:#f0f0f0}.sidebar-group-active{background:#ece9fd;color:#4b3fc0;font-weight:600}.sidebar-group-icon{font-size:15px;width:20px;text-align:center}.sidebar-group-label{flex:1;font-size:13px}.sidebar-chevron{font-size:18px;width:18px;height:18px;color:#aaa;transition:transform .2s}.sidebar-chevron.rotated{transform:rotate(180deg)}.subcategory-item{padding:6px 10px 6px 8px;font-size:12px;color:#555;cursor:pointer;border-radius:6px;transition:background .12s;-webkit-user-select:none;user-select:none}.subcategory-item:hover{background:#ece9fd;color:#4b3fc0}.subcategory-active{background:#ece9fd;color:#4b3fc0;font-weight:500}.right-content{flex:1;overflow-y:auto;padding:16px 20px 16px 0}.section-group-label{font-size:13px;font-weight:600;color:#444;margin-bottom:14px}.sections-list{gap:16px}.section-card{border:1.5px solid #e8e8e8;border-radius:12px;overflow:hidden;cursor:pointer;background:#fff;transition:border-color .15s,box-shadow .15s}.section-card:hover{border-color:#bbb;box-shadow:0 2px 8px #0000000f}.section-card-selected{border-color:#7c6cf0;box-shadow:0 0 0 3px #7c6cf026}.section-card-badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.5px;color:#5a4fcf;background:#ece9fd;padding:4px 10px;margin:10px 10px 6px;border-radius:20px}.section-img-container{width:100%;overflow:hidden;background:#f7f7f7;display:flex;align-items:center;justify-content:center;max-height:200px}.no-image-placeholder{height:140px;display:flex;align-items:center;justify-content:center;color:#ccc}.no-image-placeholder mat-icon{font-size:40px;width:40px;height:40px}.section-card-info{padding:10px 14px 12px}.section-card-name{font-size:13px;font-weight:600;color:#222;margin-bottom:3px}.section-card-desc{font-size:12px;color:#888;line-height:1.5}.image-container-1{margin-bottom:16px}.empty-img{width:100px;opacity:.85}.footer-container{padding:12px 20px;border-top:1px solid #eee;background:#fff}.footer-hint mat-icon{font-size:14px;width:14px;height:14px}.btn-cancel{padding:8px 18px;font-size:13px;border:1.5px solid #e0e0e0;border-radius:8px;background:#fff;color:#444;cursor:pointer}.btn-add{padding:8px 20px;font-size:13px;font-weight:600;border:none;border-radius:8px;background:var(--primary-bg-color);color:#fff;cursor:pointer}.btn-add:disabled{opacity:.4;cursor:not-allowed}.fade-in{animation:fadeIn .25s ease}.fade-slide{animation:fadeSlide .25s ease}.stagger-item{opacity:0;transform:translateY(10px);animation:staggerFade .3s ease forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeSlide{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes staggerFade{to{opacity:1;transform:translateY(0)}}.section-card{transition:all .2s ease}@keyframes expandFade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.empty-state{height:100%;gap:10px;text-align:center}.empty-state img{width:120px;opacity:.85}.empty-title{font-size:16px;font-weight:600;color:#333}.empty-subtitle{font-size:13px;color:#777;max-width:260px}.active-subcategory{background:#7c6cf0!important;color:#fff!important}.sidebar-subcategory{overflow:hidden;animation:dropdownSmooth .25s ease}@keyframes dropdownSmooth{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.section-card:hover{transform:translateY(-4px)}.section-img-container img{transition:transform .25s ease,opacity .2s}.section-img-container:hover img{transform:scale(1.03)}.left-sidebar{width:200px;background:#f7f7fb;padding:16px 10px;overflow-y:scroll}.category-block{margin-bottom:10px}.category-header{gap:10px;padding:6px 10px;cursor:pointer;border-radius:10px;transition:background .2s}.category-header:hover{background:#ece9fd}.category-icon{font-size:18px}.category-arrow{font-size:18px;color:#888;transition:transform .25s ease}.category-arrow.rotate{transform:rotate(180deg)}.category-items{padding-left:14px;margin-top:0;gap:6px;animation:dropdownFade .25s ease}@keyframes dropdownFade{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.category-item{padding:4px 12px;font-size:12px;color:#444;cursor:pointer;border-radius:10px;transition:all .2s ease}.category-item:hover{background:#ece9fd;color:#4b3fc0}.category-item.active{background:#e6e1f7;color:#4b0d5d;font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
4212
4212
  }
4213
4213
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddSectionComponent, decorators: [{
4214
4214
  type: Component,
4215
- args: [{ selector: 'simpo-add-section', standalone: true, imports: [CommonModule, MatIconModule, NgxSkeletonLoaderModule, FormsModule], template: "<!-- <section class=\"main-container\">\r\n <div class=\"header-container d-flex align-items-center justify-content-between\">\r\n <div>Select Template</div>\r\n <mat-icon class=\"d-flex align-items-center justify-content-center f-18 cp\" (click)=\"dialog.close()\">\r\n close\r\n </mat-icon>\r\n </div>\r\n <div class=\"parent-container\">\r\n <div class=\"search-bar-container\">\r\n <div class=\"search-bar d-flex gap-10\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/314661c1741844234442Vector%20%281%29.png\"\r\n alt=\"search-bar-icon\">\r\n <input type=\"text\" placeholder=\"Search for Sections\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchSections()\">\r\n </div>\r\n </div>\r\n <div class=\"tab-container d-flex justify-content-around align-items-center\">\r\n <ng-container *ngFor=\"let ele of tabs\">\r\n <div class=\"tabs\" (click)=\"selectedTab = ele.value\" [class.active-tab]=\"ele.value == selectedTab\">\r\n {{ele.viewValue}}\r\n <ng-container *ngIf=\"ele.value == 'PRO' && ele.value != selectedTab\">\r\n <img class=\"w-30\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/468281c1744699664858Frame%201244831740%20%281%29.png\"\r\n alt=\"pro-icon\">\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <ng-container *ngIf=\"selectedTab === 'BASIC'; else proTabContent\">\r\n <ng-container *ngIf=\"!isSearch;else emptyScreen\">\r\n <div class=\"categories-container d-flex\">\r\n <div class=\"categories-sidepanel\" *ngIf=\"!loader\">\r\n <ng-container *ngFor=\"let ele of getObjectKeys(sections)\">\r\n <div class=\"side-section d-flex justify-content-center align-items-center flex-column\"\r\n (click)=\"selectSection(ele)\"\r\n [class.active-section]=\"selectedSection == sections[ele]\">\r\n <div class=\"image-container\">\r\n <ng-container *ngIf=\"selectedSection == sections[ele]\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/954383c1741850392802Group%201707481879.png\"\r\n alt=\"icon text\">\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedSection != sections[ele]\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/846145c1741850574864Icon%20%281%29.png\"\r\n alt=\"icon text\">\r\n </ng-container>\r\n </div>\r\n <div class=\"section-text\">\r\n {{ele}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"categories-render-section\" *ngIf=\" !loader && !tabShiftLoader\">\r\n <div class=\"categories-head\">\r\n {{selectedSectionName}}\r\n </div>\r\n <div class=\"sub-text\">\r\n Select a section to add to your page\r\n </div>\r\n <div class=\"sections-container\">\r\n <ng-container *ngFor=\"let ele of selectedSection\">\r\n <div class=\"section\">\r\n <div class=\"section-header\">{{ele.sectionName}}</div>\r\n <div class=\"section-img-container cp\"\r\n (click)=\"addNewSection(ele.componentId,ele.sectionType,$event)\">\r\n <ng-container *ngIf=\"ele?.image; else noImage\">\r\n <img [src]=\"ele?.image\" alt=\"section image\">\r\n </ng-container>\r\n <ng-template #noImage>\r\n <img src=\"https://img.freepik.com/premium-vector/default-image-icon-vector-missing-picture-page-website-design-mobile-app-no-photo-available_87543-11093.jpg\"\r\n alt=\"section image\" class=\"h-30\">\r\n </ng-template>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"categories-sidepanel\" *ngIf=\"loader\">\r\n <ng-container *ngFor=\"let ele of [1,1,1,1,1,1,1,1,1]\">\r\n <div class=\"d-flex justify-content-center align-items-center flex-column\">\r\n <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n height: '8vh',\r\n width: '65%',\r\n 'border-radius': '13px',\r\n 'margin-bottom' : '10px',\r\n }\" class=\"d-flex justify-content-center w-100\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"categories-render-section\" *ngIf=\"loader || tabShiftLoader\">\r\n <div class=\"categories-head\">\r\n <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n width: '20%',\r\n height : '3vh',\r\n 'border-radius': '5px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n <div class=\"sub-text\">\r\n <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n width: '60%',\r\n height : '2vh',\r\n 'border-radius': '5px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n <div class=\"sections-container\">\r\n <ng-container *ngFor=\"let ele of [1,1,1,1]\">\r\n <div class=\"section\">\r\n <div> <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n width: '25%',\r\n height : '2vh',\r\n 'border-radius': '5px',\r\n }\">\r\n </ngx-skeleton-loader></div>\r\n <div>\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '100%',\r\n height : '25vh',\r\n 'border-radius': '5px',\r\n 'margin':'2px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #proTabContent>\r\n <div class=\"empty-div d-flex align-items-center justify-content-center flex-column\">\r\n <div class=\"image-container-1\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/377076c1743154807683image%20%286%29.png\" alt=\"empty-img\" class=\"empty-img \">\r\n </div>\r\n <div class=\"oops-text\">\r\n Coming Soon\r\n </div>\r\n <div class=\"oops-sub-text\">\r\n <div class=\"oops-sub-text-1 text-center\">Woof! Something pawsome is coming!</div>\r\n <div class=\"oops-sub-text-2 text-center\">\r\n Hey hooman! I just sniffed out something super exciting... and it\u2019s almost here! \r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template #emptyScreen>\r\n <div class=\"empty-div d-flex align-items-center justify-content-center flex-column\">\r\n <div class=\"image-container-1\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/377076c1743154807683image%20%286%29.png\" alt=\"empty-img\" class=\"empty-img \">\r\n </div>\r\n <div class=\"oops-text\">\r\n Oops! \r\n </div>\r\n <div class=\"oops-sub-text\">\r\n <div class=\"oops-sub-text-1 text-center\">I sniffed everywhere, but I couldn't find what you're looking for</div>\r\n <div class=\"oops-sub-text-2 text-center\">\r\n Maybe try a different search? \r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n</section> -->\r\n\r\n<section class=\"main-container d-flex flex-column\">\r\n\r\n <div class=\"header-container relative px-3 py-2 fade-in\">\r\n <div class=\"header-title fs-16 fw-bold\">Add a section</div>\r\n <div class=\"header-subtitle fs-12 text-secondary\">\r\n Choose a section \u2014 you can reorder or remove it any time.\r\n </div>\r\n <mat-icon class=\"close-btn d-flex align-items-center justify-content-center\"\r\n (click)=\"dialog.close()\">close</mat-icon>\r\n </div>\r\n\r\n <div class=\"parent-container d-flex flex-column\">\r\n\r\n <!-- Tabs -->\r\n <div class=\"top-tabs-container d-flex justify-content-between fade-in\">\r\n <ng-container *ngFor=\"let ele of tabs\">\r\n <div class=\"top-tab\" (click)=\"selectedTab = ele.value\"\r\n [class.active-top-tab]=\"ele.value == selectedTab\">\r\n {{ele.viewValue}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- Search -->\r\n <div class=\"search-bar-container fade-in\">\r\n <div class=\"search-bar d-flex gap-2 align-items-center\">\r\n <img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/314661c1741844234442Vector%20%281%29.png\">\r\n <input type=\"text\" placeholder='Search section...' [(ngModel)]=\"searchText\"\r\n (ngModelChange)=\"searchSections()\">\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"selectedTab === 'BASIC'; else proTabContent\">\r\n\r\n <ng-container *ngIf=\"!isSearch; else emptyScreen\">\r\n\r\n <!-- Quick Add -->\r\n <div class=\"quick-add-container fade-in d-flex align-items-center\" *ngIf=\"!loader && !searchText\">\r\n <div class=\"quick-add-label\">Quick add:</div>\r\n <div class=\"quick-add-chips d-flex\">\r\n <ng-container *ngFor=\"let category of getObjectKeys(sections); let i = index\">\r\n <ng-container *ngIf=\"i < 6\">\r\n <div class=\"quick-chip stagger-item d-flex align-items-center\"\r\n (click)=\"selectSection(category); toggleCategory(category)\"\r\n [class.active-quick-chip]=\"selectedSectionName === category\">\r\n <span class=\"chip-emoji\">{{getCategoryEmoji(category)}}</span>\r\n {{getFirstSectionName(category)}}\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- CONTENT -->\r\n <div class=\"content-layout fade-in d-flex\" *ngIf=\"!loader\">\r\n <!-- LEFT -->\r\n <div class=\"left-sidebar\">\r\n <div class=\"category-header d-flex align-items-center\">\r\n <div class=\"category-icon d-flex align-items-center justify-content-center\">\u2728</div>\r\n <div class=\"fs-14\">AI Recommended</div>\r\n </div>\r\n <ng-container *ngFor=\"let category of getObjectKeys(sections)\">\r\n <div class=\"category-block\">\r\n <div class=\"category-header d-flex align-items-end justify-content-between\"\r\n (click)=\"toggleCategory(category)\">\r\n <div class=\"d-flex gap-2 align-items-center\">\r\n <span class=\"category-icon\">\r\n {{getCategoryEmoji(category)}}\r\n </span>\r\n <span class=\" fs-14\">\r\n {{category}}\r\n </span>\r\n </div>\r\n <mat-icon class=\"category-arrow\" *ngIf=\"expandedCategories[category]\">\r\n expand_less\r\n </mat-icon>\r\n <mat-icon class=\"category-arrow\" *ngIf=\"!expandedCategories[category]\">\r\n expand_more\r\n </mat-icon>\r\n </div>\r\n <div class=\"category-items d-flex flex-column\" *ngIf=\"expandedCategories[category]\">\r\n <ng-container *ngFor=\"let sec of sections[category]\">\r\n <div class=\"category-item\"\r\n [class.active]=\"selectedComponent?.componentId === sec.componentId\"\r\n (click)=\"selectComponent(sec, category)\">\r\n {{sec.sectionName}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- RIGHT -->\r\n <div class=\"right-content\">\r\n\r\n <div class=\"section-group-label\">Most impactful sections</div>\r\n\r\n <div class=\"sections-list d-flex flex-column\">\r\n\r\n <ng-container *ngFor=\"let ele of selectedSection; let i = index\">\r\n\r\n <!-- FILTERED VIEW -->\r\n <ng-container\r\n *ngIf=\"!selectedComponent || selectedComponent?.componentId === ele.componentId\">\r\n\r\n <div class=\"section-card stagger-item\" [style.animation-delay]=\"i * 40 + 'ms'\"\r\n [class.section-card-selected]=\"selectedComponent?.componentId === ele.componentId\"\r\n (click)=\"selectComponentAndHighlight(ele)\">\r\n\r\n <div class=\"section-card-badge\" *ngIf=\"ele.sectionType\">\r\n + {{ele.sectionType | uppercase}}\r\n </div>\r\n\r\n <div\r\n class=\"section-img-container d-flex align-items-center justify-content-center\">\r\n <ng-container *ngIf=\"ele?.image; else noImage\">\r\n <img [src]=\"ele?.image\">\r\n </ng-container>\r\n\r\n <ng-template #noImage>\r\n <div\r\n class=\"no-image-placeholder d-flex align-items-center justify-content-center\">\r\n <mat-icon>image</mat-icon>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n <div class=\"section-card-info\">\r\n <div class=\"section-card-name\">{{ele.sectionName}}</div>\r\n <div class=\"section-card-desc\" *ngIf=\"ele.desc\">{{ele.desc}}</div>\r\n </div>\r\n\r\n </div>\r\n\r\n </ng-container>\r\n\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"content-layout d-flex\" *ngIf=\"loader\">\r\n <div class=\"left-sidebar\">\r\n <ng-container *ngFor=\"let s of [1,1,1,1,1,1,1,1]\">\r\n <ngx-skeleton-loader\r\n [theme]=\"{ width: '90%', height: '36px', 'border-radius': '8px', 'margin-bottom': '6px' }\"></ngx-skeleton-loader>\r\n </ng-container>\r\n </div>\r\n <div class=\"right-content\">\r\n <ng-container *ngFor=\"let s of [1,1,1,1]\">\r\n <div class=\"section-card\">\r\n <ngx-skeleton-loader\r\n [theme]=\"{ width: '40%', height: '20px', 'border-radius': '4px', 'margin-bottom': '8px' }\"></ngx-skeleton-loader>\r\n <ngx-skeleton-loader\r\n [theme]=\"{ width: '100%', height: '180px', 'border-radius': '8px', 'margin-bottom': '8px' }\"></ngx-skeleton-loader>\r\n <ngx-skeleton-loader\r\n [theme]=\"{ width: '60%', height: '16px', 'border-radius': '4px' }\"></ngx-skeleton-loader>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- EMPTY SEARCH -->\r\n <ng-template #emptyScreen>\r\n <div class=\"empty-state fade-in d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://cdn-icons-png.flaticon.com/512/7486/7486803.png\">\r\n <div class=\"empty-title\">No sections found</div>\r\n <div class=\"empty-subtitle\">\r\n Try searching something else or explore categories\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- PRO TAB -->\r\n <ng-template #proTabContent>\r\n <div class=\"empty-state fade-in d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://cdn-icons-png.flaticon.com/512/4076/4076549.png\">\r\n <div class=\"empty-title\">Coming Soon</div>\r\n <div class=\"empty-subtitle\">\r\n Something awesome is on the way \uD83D\uDE80\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n </div>\r\n\r\n <!-- Footer -->\r\n <div class=\"footer-container fade-in d-flex align-items-center justify-content-between\">\r\n <div class=\"footer-hint fs-12 text-secondary d-flex align-items-center gap-1\">\r\n <mat-icon>info</mat-icon>\r\n You can rearrange or remove this section any time.\r\n </div>\r\n\r\n <div class=\"footer-actions d-flex align-items-center gap-2\">\r\n <div class=\"btn-cancel fs-14\" (click)=\"dialog.close()\">Cancel</div>\r\n <div class=\"btn-add fs-14\" [class.disabled]=\"!selectedComponent\"\r\n (click)=\"selectedComponent && addNewSection(selectedComponent.componentId, selectedComponent.sectionType, $event)\">\r\n + Add section\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}.header-container{padding:12px 15px;font-size:15px;line-height:24px;font-weight:600;color:#000;margin-bottom:2px}.gap-10{gap:10px!important}.tab-container{padding:8px;margin:0 15px;gap:3%;background:#fff;border-radius:13px}.tabs{font-size:14px;font-weight:500;line-height:24px;color:#2c2c2c99;width:30%;cursor:pointer;padding:8px 0;text-align:center}.active-tab{color:#fff!important;background:var(--primary-bg-color);box-shadow:0 0 4px #00000040;border-radius:8px;transition:opacity .3s ease-in-out,transform .3s ease-in-out;opacity:1;transform:translateY(0)}.categories-sidepanel{width:15%;padding:10px 5px;margin:15px 0;border-radius:10px;height:calc(70vh + -0px);overflow-y:scroll;background:#fff}.side-section{padding:6px 10px;border-radius:8px;margin-bottom:10px;cursor:pointer}.side-section img{width:16px}.side-section .image-container{background:#f9fafb;padding:5px 8px;border-radius:5px}.side-section .section-text{font-size:12px;font-weight:500;line-height:24px;text-align:center;color:#a1a1a1}.active-section{background:var(--primary-bg-color)!important;box-shadow:0 0 4px #00000040}.active-section .section-text{color:#fff!important}.active-section .image-container{background:unset!important;padding:unset!important;border-radius:unset!important}.categories-render-section{width:85%;padding:15px;margin:15px 10px;border-radius:10px;height:calc(70vh + -0px);overflow-y:scroll;background:#fff}.categories-head{font-size:20px;font-weight:600;line-height:24px;color:#434343}.sub-text{font-size:13px;font-weight:500;line-height:24px;color:#a1a1a1;margin-bottom:10px}.section{margin-bottom:10px}.section-header{font-size:14px;font-weight:500;line-height:24px;color:#a1a1a1;margin-bottom:10px}.section-img-container{padding:18px;border-radius:8px;background:#f9fafb}.section-img-container img{width:100%}.search-bar-container{padding:15px}.parent-container{background:#fafafa}.f-18{font-size:18px;cursor:pointer}.w-30{width:30px!important}.h-30{height:30vh}.cp{cursor:pointer}.empty-div{height:calc(70vh + -0px);background:#fff;margin:18px;border-radius:13px}.oops-text{font-weight:900;font-size:42px;background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent}.oops-sub-text-1{font-size:17px;font-weight:600;color:#101010e5}.oops-sub-text-2{font-size:14px;font-weight:600;color:#101010e5}.main-container{height:100vh;background:#fff;border-radius:16px;overflow:hidden}.fs-14{font-size:14px}.fs-12{font-size:12px}.fs-16{font-size:16px}.close-btn{position:absolute;top:18px;right:20px;cursor:pointer;color:#666;font-size:20px;width:28px;height:28px;border-radius:6px}.top-tabs-container{background:#dcdcdc4f;margin:0 14px;border-radius:10px;padding:4px}.top-tab{padding:6px 34px;font-size:13px;color:#666;cursor:pointer;border-bottom:2px solid transparent;transition:color .15s}.active-top-tab{font-weight:600;background:#fff;border-radius:10px}.parent-container{flex:1;overflow:hidden;padding:0}.search-bar-container{padding:12px 16px 8px}.search-bar{border:1.5px solid #e8e8e8;border-radius:10px;padding:8px 12px;transition:border .15s}.search-bar:focus-within{border-color:var(--primary-bg-color)}.search-bar img{width:16px;height:16px;opacity:.5}.search-bar input{border:none;outline:none;background:transparent;font-size:13px;color:#333;width:100%}.search-bar input::placeholder{color:#aaa}.quick-add-container{padding:4px 24px 10px;gap:10px;flex-wrap:wrap;flex-shrink:0}.quick-add-label{font-size:12px;color:#888;white-space:nowrap}.quick-add-chips{gap:6px;width:100%;overflow-y:scroll;white-space:nowrap}.quick-chip{gap:5px;padding:4px 10px;font-size:12px;border:1.5px solid #e0e0e0;border-radius:20px;cursor:pointer;color:#333;background:#fff;transition:background .12s,border-color .12s;-webkit-user-select:none;user-select:none}.quick-chip.active-quick-chip{border-color:#7c6cf0;color:#4b3fc0;font-weight:500}.quick-chip{transition:all .2s ease}.chip-emoji{font-size:14px}.content-layout{flex:1;overflow:hidden;border-top:1px solid #f0f0f0}.sidebar-group{margin-bottom:2px}.sidebar-group-header{gap:8px;padding:9px 14px;cursor:pointer;border-radius:0;transition:background .12s;-webkit-user-select:none;user-select:none;font-size:13px;color:#444}.sidebar-group-header:hover{background:#f0f0f0}.sidebar-group-active{background:#ece9fd;color:#4b3fc0;font-weight:600}.sidebar-group-icon{font-size:15px;width:20px;text-align:center}.sidebar-group-label{flex:1;font-size:13px}.sidebar-chevron{font-size:18px;width:18px;height:18px;color:#aaa;transition:transform .2s}.sidebar-chevron.rotated{transform:rotate(180deg)}.subcategory-item{padding:6px 10px 6px 8px;font-size:12px;color:#555;cursor:pointer;border-radius:6px;transition:background .12s;-webkit-user-select:none;user-select:none}.subcategory-item:hover{background:#ece9fd;color:#4b3fc0}.subcategory-active{background:#ece9fd;color:#4b3fc0;font-weight:500}.right-content{flex:1;overflow-y:auto;padding:16px 20px 16px 0}.section-group-label{font-size:13px;font-weight:600;color:#444;margin-bottom:14px}.sections-list{gap:16px}.section-card{border:1.5px solid #e8e8e8;border-radius:12px;overflow:hidden;cursor:pointer;background:#fff;transition:border-color .15s,box-shadow .15s}.section-card:hover{border-color:#bbb;box-shadow:0 2px 8px #0000000f}.section-card-selected{border-color:#7c6cf0;box-shadow:0 0 0 3px #7c6cf026}.section-card-badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.5px;color:#5a4fcf;background:#ece9fd;padding:4px 10px;margin:10px 10px 6px;border-radius:20px}.section-img-container{width:100%;overflow:hidden;background:#f7f7f7;display:flex;align-items:center;justify-content:center;max-height:200px}.no-image-placeholder{height:140px;display:flex;align-items:center;justify-content:center;color:#ccc}.no-image-placeholder mat-icon{font-size:40px;width:40px;height:40px}.section-card-info{padding:10px 14px 12px}.section-card-name{font-size:13px;font-weight:600;color:#222;margin-bottom:3px}.section-card-desc{font-size:12px;color:#888;line-height:1.5}.image-container-1{margin-bottom:16px}.empty-img{width:100px;opacity:.85}.footer-container{padding:12px 20px;border-top:1px solid #eee;background:#fff}.footer-hint mat-icon{font-size:14px;width:14px;height:14px}.btn-cancel{padding:8px 18px;font-size:13px;border:1.5px solid #e0e0e0;border-radius:8px;background:#fff;color:#444;cursor:pointer}.btn-add{padding:8px 20px;font-size:13px;font-weight:600;border:none;border-radius:8px;background:var(--primary-bg-color);color:#fff;cursor:pointer}.btn-add:disabled{opacity:.4;cursor:not-allowed}.fade-in{animation:fadeIn .25s ease}.fade-slide{animation:fadeSlide .25s ease}.stagger-item{opacity:0;transform:translateY(10px);animation:staggerFade .3s ease forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeSlide{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes staggerFade{to{opacity:1;transform:translateY(0)}}.section-card{transition:all .2s ease}@keyframes expandFade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.empty-state{height:100%;gap:10px;text-align:center}.empty-state img{width:120px;opacity:.85}.empty-title{font-size:16px;font-weight:600;color:#333}.empty-subtitle{font-size:13px;color:#777;max-width:260px}.active-subcategory{background:#7c6cf0!important;color:#fff!important}.sidebar-subcategory{overflow:hidden;animation:dropdownSmooth .25s ease}@keyframes dropdownSmooth{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.section-card:hover{transform:translateY(-4px)}.section-img-container img{transition:transform .25s ease,opacity .2s}.section-img-container:hover img{transform:scale(1.03)}.left-sidebar{width:200px;background:#f7f7fb;padding:16px 10px}.category-block{margin-bottom:10px}.category-header{gap:10px;padding:6px 10px;cursor:pointer;border-radius:10px;transition:background .2s}.category-header:hover{background:#ece9fd}.category-icon{font-size:18px}.category-arrow{font-size:18px;color:#888;transition:transform .25s ease}.category-arrow.rotate{transform:rotate(180deg)}.category-items{padding-left:14px;margin-top:0;gap:6px;animation:dropdownFade .25s ease}@keyframes dropdownFade{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.category-item{padding:4px 12px;font-size:12px;color:#444;cursor:pointer;border-radius:10px;transition:all .2s ease}.category-item:hover{background:#ece9fd;color:#4b3fc0}.category-item.active{background:#e6e1f7;color:#4b0d5d;font-weight:600}\n"] }]
4215
+ args: [{ selector: 'simpo-add-section', standalone: true, imports: [CommonModule, MatIconModule, NgxSkeletonLoaderModule, FormsModule], template: "<!-- <section class=\"main-container\">\r\n <div class=\"header-container d-flex align-items-center justify-content-between\">\r\n <div>Select Template</div>\r\n <mat-icon class=\"d-flex align-items-center justify-content-center f-18 cp\" (click)=\"dialog.close()\">\r\n close\r\n </mat-icon>\r\n </div>\r\n <div class=\"parent-container\">\r\n <div class=\"search-bar-container\">\r\n <div class=\"search-bar d-flex gap-10\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/314661c1741844234442Vector%20%281%29.png\"\r\n alt=\"search-bar-icon\">\r\n <input type=\"text\" placeholder=\"Search for Sections\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchSections()\">\r\n </div>\r\n </div>\r\n <div class=\"tab-container d-flex justify-content-around align-items-center\">\r\n <ng-container *ngFor=\"let ele of tabs\">\r\n <div class=\"tabs\" (click)=\"selectedTab = ele.value\" [class.active-tab]=\"ele.value == selectedTab\">\r\n {{ele.viewValue}}\r\n <ng-container *ngIf=\"ele.value == 'PRO' && ele.value != selectedTab\">\r\n <img class=\"w-30\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/468281c1744699664858Frame%201244831740%20%281%29.png\"\r\n alt=\"pro-icon\">\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <ng-container *ngIf=\"selectedTab === 'BASIC'; else proTabContent\">\r\n <ng-container *ngIf=\"!isSearch;else emptyScreen\">\r\n <div class=\"categories-container d-flex\">\r\n <div class=\"categories-sidepanel\" *ngIf=\"!loader\">\r\n <ng-container *ngFor=\"let ele of getObjectKeys(sections)\">\r\n <div class=\"side-section d-flex justify-content-center align-items-center flex-column\"\r\n (click)=\"selectSection(ele)\"\r\n [class.active-section]=\"selectedSection == sections[ele]\">\r\n <div class=\"image-container\">\r\n <ng-container *ngIf=\"selectedSection == sections[ele]\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/954383c1741850392802Group%201707481879.png\"\r\n alt=\"icon text\">\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedSection != sections[ele]\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/846145c1741850574864Icon%20%281%29.png\"\r\n alt=\"icon text\">\r\n </ng-container>\r\n </div>\r\n <div class=\"section-text\">\r\n {{ele}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"categories-render-section\" *ngIf=\" !loader && !tabShiftLoader\">\r\n <div class=\"categories-head\">\r\n {{selectedSectionName}}\r\n </div>\r\n <div class=\"sub-text\">\r\n Select a section to add to your page\r\n </div>\r\n <div class=\"sections-container\">\r\n <ng-container *ngFor=\"let ele of selectedSection\">\r\n <div class=\"section\">\r\n <div class=\"section-header\">{{ele.sectionName}}</div>\r\n <div class=\"section-img-container cp\"\r\n (click)=\"addNewSection(ele.componentId,ele.sectionType,$event)\">\r\n <ng-container *ngIf=\"ele?.image; else noImage\">\r\n <img [src]=\"ele?.image\" alt=\"section image\">\r\n </ng-container>\r\n <ng-template #noImage>\r\n <img src=\"https://img.freepik.com/premium-vector/default-image-icon-vector-missing-picture-page-website-design-mobile-app-no-photo-available_87543-11093.jpg\"\r\n alt=\"section image\" class=\"h-30\">\r\n </ng-template>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"categories-sidepanel\" *ngIf=\"loader\">\r\n <ng-container *ngFor=\"let ele of [1,1,1,1,1,1,1,1,1]\">\r\n <div class=\"d-flex justify-content-center align-items-center flex-column\">\r\n <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n height: '8vh',\r\n width: '65%',\r\n 'border-radius': '13px',\r\n 'margin-bottom' : '10px',\r\n }\" class=\"d-flex justify-content-center w-100\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"categories-render-section\" *ngIf=\"loader || tabShiftLoader\">\r\n <div class=\"categories-head\">\r\n <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n width: '20%',\r\n height : '3vh',\r\n 'border-radius': '5px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n <div class=\"sub-text\">\r\n <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n width: '60%',\r\n height : '2vh',\r\n 'border-radius': '5px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n <div class=\"sections-container\">\r\n <ng-container *ngFor=\"let ele of [1,1,1,1]\">\r\n <div class=\"section\">\r\n <div> <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n width: '25%',\r\n height : '2vh',\r\n 'border-radius': '5px',\r\n }\">\r\n </ngx-skeleton-loader></div>\r\n <div>\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '100%',\r\n height : '25vh',\r\n 'border-radius': '5px',\r\n 'margin':'2px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #proTabContent>\r\n <div class=\"empty-div d-flex align-items-center justify-content-center flex-column\">\r\n <div class=\"image-container-1\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/377076c1743154807683image%20%286%29.png\" alt=\"empty-img\" class=\"empty-img \">\r\n </div>\r\n <div class=\"oops-text\">\r\n Coming Soon\r\n </div>\r\n <div class=\"oops-sub-text\">\r\n <div class=\"oops-sub-text-1 text-center\">Woof! Something pawsome is coming!</div>\r\n <div class=\"oops-sub-text-2 text-center\">\r\n Hey hooman! I just sniffed out something super exciting... and it\u2019s almost here! \r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template #emptyScreen>\r\n <div class=\"empty-div d-flex align-items-center justify-content-center flex-column\">\r\n <div class=\"image-container-1\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/377076c1743154807683image%20%286%29.png\" alt=\"empty-img\" class=\"empty-img \">\r\n </div>\r\n <div class=\"oops-text\">\r\n Oops! \r\n </div>\r\n <div class=\"oops-sub-text\">\r\n <div class=\"oops-sub-text-1 text-center\">I sniffed everywhere, but I couldn't find what you're looking for</div>\r\n <div class=\"oops-sub-text-2 text-center\">\r\n Maybe try a different search? \r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n</section> -->\r\n\r\n<section class=\"main-container d-flex flex-column\">\r\n\r\n <div class=\"header-container relative px-3 py-2 fade-in\">\r\n <div class=\"header-title fs-16 fw-bold\">Add a section</div>\r\n <div class=\"header-subtitle fs-12 text-secondary\">\r\n Choose a section \u2014 you can reorder or remove it any time.\r\n </div>\r\n <mat-icon class=\"close-btn d-flex align-items-center justify-content-center\"\r\n (click)=\"dialog.close()\">close</mat-icon>\r\n </div>\r\n\r\n <div class=\"parent-container d-flex flex-column\">\r\n\r\n <!-- Tabs -->\r\n <div class=\"top-tabs-container d-flex justify-content-between fade-in\">\r\n <ng-container *ngFor=\"let ele of tabs\">\r\n <div class=\"top-tab\" (click)=\"selectedTab = ele.value\"\r\n [class.active-top-tab]=\"ele.value == selectedTab\">\r\n {{ele.viewValue}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- Search -->\r\n <div class=\"search-bar-container fade-in\">\r\n <div class=\"search-bar d-flex gap-2 align-items-center\">\r\n <img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/314661c1741844234442Vector%20%281%29.png\">\r\n <input type=\"text\" placeholder='Search section...' [(ngModel)]=\"searchText\"\r\n (ngModelChange)=\"searchSections()\">\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"selectedTab === 'BASIC'; else proTabContent\">\r\n\r\n <ng-container *ngIf=\"!isSearch; else emptyScreen\">\r\n\r\n <!-- Quick Add -->\r\n <div class=\"quick-add-container fade-in d-flex align-items-center\" *ngIf=\"!loader && !searchText\">\r\n <div class=\"quick-add-label\">Quick add:</div>\r\n <div class=\"quick-add-chips d-flex\">\r\n <ng-container *ngFor=\"let category of getObjectKeys(sections); let i = index\">\r\n <ng-container *ngIf=\"i < 6\">\r\n <div class=\"quick-chip stagger-item d-flex align-items-center\"\r\n (click)=\"selectSection(category); toggleCategory(category)\"\r\n [class.active-quick-chip]=\"selectedSectionName === category\">\r\n <span class=\"chip-emoji\">{{getCategoryEmoji(category)}}</span>\r\n {{getFirstSectionName(category)}}\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- CONTENT -->\r\n <div class=\"content-layout fade-in d-flex\" *ngIf=\"!loader\">\r\n <!-- LEFT -->\r\n <div class=\"left-sidebar\">\r\n <div class=\"category-header d-flex align-items-center\">\r\n <div class=\"category-icon d-flex align-items-center justify-content-center\">\u2728</div>\r\n <div class=\"fs-14\">AI Recommended</div>\r\n </div>\r\n <ng-container *ngFor=\"let category of getObjectKeys(sections)\">\r\n <div class=\"category-block\">\r\n <div class=\"category-header d-flex align-items-end justify-content-between\"\r\n (click)=\"toggleCategory(category)\">\r\n <div class=\"d-flex gap-2 align-items-center\">\r\n <span class=\"category-icon\">\r\n {{getCategoryEmoji(category)}}\r\n </span>\r\n <span class=\" fs-14\">\r\n {{category}}\r\n </span>\r\n </div>\r\n <mat-icon class=\"category-arrow\" *ngIf=\"expandedCategories[category]\">\r\n expand_less\r\n </mat-icon>\r\n <mat-icon class=\"category-arrow\" *ngIf=\"!expandedCategories[category]\">\r\n expand_more\r\n </mat-icon>\r\n </div>\r\n <div class=\"category-items d-flex flex-column\" *ngIf=\"expandedCategories[category]\">\r\n <ng-container *ngFor=\"let sec of sections[category]\">\r\n <div class=\"category-item\"\r\n [class.active]=\"selectedComponent?.componentId === sec.componentId\"\r\n (click)=\"selectComponent(sec, category)\">\r\n {{sec.sectionName}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- RIGHT -->\r\n <div class=\"right-content\">\r\n\r\n <div class=\"section-group-label\">Most impactful sections</div>\r\n\r\n <div class=\"sections-list d-flex flex-column\">\r\n\r\n <ng-container *ngFor=\"let ele of selectedSection; let i = index\">\r\n\r\n <!-- FILTERED VIEW -->\r\n <ng-container\r\n *ngIf=\"!selectedComponent || selectedComponent?.componentId === ele.componentId\">\r\n\r\n <div class=\"section-card stagger-item\" [style.animation-delay]=\"i * 40 + 'ms'\"\r\n [class.section-card-selected]=\"selectedComponent?.componentId === ele.componentId\"\r\n (click)=\"selectComponentAndHighlight(ele)\">\r\n\r\n <div class=\"section-card-badge\" *ngIf=\"ele.sectionType\">\r\n + {{ele.sectionType | uppercase}}\r\n </div>\r\n\r\n <div\r\n class=\"section-img-container d-flex align-items-center justify-content-center\">\r\n <ng-container *ngIf=\"ele?.image; else noImage\">\r\n <img [src]=\"ele?.image\">\r\n </ng-container>\r\n\r\n <ng-template #noImage>\r\n <div\r\n class=\"no-image-placeholder d-flex align-items-center justify-content-center\">\r\n <mat-icon>image</mat-icon>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n <div class=\"section-card-info\">\r\n <div class=\"section-card-name\">{{ele.sectionName}}</div>\r\n <div class=\"section-card-desc\" *ngIf=\"ele.desc\">{{ele.desc}}</div>\r\n </div>\r\n\r\n </div>\r\n\r\n </ng-container>\r\n\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"content-layout d-flex\" *ngIf=\"loader\">\r\n <div class=\"left-sidebar\">\r\n <ng-container *ngFor=\"let s of [1,1,1,1,1,1,1,1]\">\r\n <ngx-skeleton-loader\r\n [theme]=\"{ width: '90%', height: '36px', 'border-radius': '8px', 'margin-bottom': '6px' }\"></ngx-skeleton-loader>\r\n </ng-container>\r\n </div>\r\n <div class=\"right-content\">\r\n <ng-container *ngFor=\"let s of [1,1,1,1]\">\r\n <div class=\"section-card\">\r\n <ngx-skeleton-loader\r\n [theme]=\"{ width: '40%', height: '20px', 'border-radius': '4px', 'margin-bottom': '8px' }\"></ngx-skeleton-loader>\r\n <ngx-skeleton-loader\r\n [theme]=\"{ width: '100%', height: '180px', 'border-radius': '8px', 'margin-bottom': '8px' }\"></ngx-skeleton-loader>\r\n <ngx-skeleton-loader\r\n [theme]=\"{ width: '60%', height: '16px', 'border-radius': '4px' }\"></ngx-skeleton-loader>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- EMPTY SEARCH -->\r\n <ng-template #emptyScreen>\r\n <div class=\"empty-state fade-in d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://cdn-icons-png.flaticon.com/512/7486/7486803.png\">\r\n <div class=\"empty-title\">No sections found</div>\r\n <div class=\"empty-subtitle\">\r\n Try searching something else or explore categories\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- PRO TAB -->\r\n <ng-template #proTabContent>\r\n <div class=\"empty-state fade-in d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://cdn-icons-png.flaticon.com/512/4076/4076549.png\">\r\n <div class=\"empty-title\">Coming Soon</div>\r\n <div class=\"empty-subtitle\">\r\n Something awesome is on the way \uD83D\uDE80\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n </div>\r\n\r\n <!-- Footer -->\r\n <div class=\"footer-container fade-in d-flex align-items-center justify-content-between\">\r\n <div class=\"footer-hint fs-12 text-secondary d-flex align-items-center gap-1\">\r\n <mat-icon>info</mat-icon>\r\n You can rearrange or remove this section any time.\r\n </div>\r\n\r\n <div class=\"footer-actions d-flex align-items-center gap-2\">\r\n <div class=\"btn-cancel fs-14\" (click)=\"dialog.close()\">Cancel</div>\r\n <div class=\"btn-add fs-14\" [class.disabled]=\"!selectedComponent\"\r\n (click)=\"selectedComponent && addNewSection(selectedComponent.componentId, selectedComponent.sectionType, $event)\">\r\n + Add section\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}.header-container{padding:12px 15px;font-size:15px;line-height:24px;font-weight:600;color:#000;margin-bottom:2px}.gap-10{gap:10px!important}.tab-container{padding:8px;margin:0 15px;gap:3%;background:#fff;border-radius:13px}.tabs{font-size:14px;font-weight:500;line-height:24px;color:#2c2c2c99;width:30%;cursor:pointer;padding:8px 0;text-align:center}.active-tab{color:#fff!important;background:var(--primary-bg-color);box-shadow:0 0 4px #00000040;border-radius:8px;transition:opacity .3s ease-in-out,transform .3s ease-in-out;opacity:1;transform:translateY(0)}.categories-sidepanel{width:15%;padding:10px 5px;margin:15px 0;border-radius:10px;height:calc(70vh + -0px);overflow-y:scroll;background:#fff}.side-section{padding:6px 10px;border-radius:8px;margin-bottom:10px;cursor:pointer}.side-section img{width:16px}.side-section .image-container{background:#f9fafb;padding:5px 8px;border-radius:5px}.side-section .section-text{font-size:12px;font-weight:500;line-height:24px;text-align:center;color:#a1a1a1}.active-section{background:var(--primary-bg-color)!important;box-shadow:0 0 4px #00000040}.active-section .section-text{color:#fff!important}.active-section .image-container{background:unset!important;padding:unset!important;border-radius:unset!important}.categories-render-section{width:85%;padding:15px;margin:15px 10px;border-radius:10px;height:calc(70vh + -0px);overflow-y:scroll;background:#fff}.categories-head{font-size:20px;font-weight:600;line-height:24px;color:#434343}.sub-text{font-size:13px;font-weight:500;line-height:24px;color:#a1a1a1;margin-bottom:10px}.section{margin-bottom:10px}.section-header{font-size:14px;font-weight:500;line-height:24px;color:#a1a1a1;margin-bottom:10px}.section-img-container{padding:18px;border-radius:8px;background:#f9fafb}.section-img-container img{width:100%}.search-bar-container{padding:15px}.parent-container{background:#fafafa}.f-18{font-size:18px;cursor:pointer}.w-30{width:30px!important}.h-30{height:30vh}.cp{cursor:pointer}.empty-div{height:calc(70vh + -0px);background:#fff;margin:18px;border-radius:13px}.oops-text{font-weight:900;font-size:42px;background:var(--primary-bg-color);background-clip:text;-webkit-text-fill-color:transparent}.oops-sub-text-1{font-size:17px;font-weight:600;color:#101010e5}.oops-sub-text-2{font-size:14px;font-weight:600;color:#101010e5}.main-container{height:100vh;background:#fff;border-radius:16px;overflow:hidden}.fs-14{font-size:14px}.fs-12{font-size:12px}.fs-16{font-size:16px}.close-btn{position:absolute;top:18px;right:20px;cursor:pointer;color:#666;font-size:20px;width:28px;height:28px;border-radius:6px}.top-tabs-container{background:#dcdcdc4f;margin:0 14px;border-radius:10px;padding:4px}.top-tab{padding:6px 34px;font-size:13px;color:#666;cursor:pointer;border-bottom:2px solid transparent;transition:color .15s}.active-top-tab{font-weight:600;background:#fff;border-radius:10px}.parent-container{flex:1;overflow:hidden;padding:0}.search-bar-container{padding:12px 16px 8px}.search-bar{border:1.5px solid #e8e8e8;border-radius:10px;padding:8px 12px;transition:border .15s}.search-bar:focus-within{border-color:var(--primary-bg-color)}.search-bar img{width:16px;height:16px;opacity:.5}.search-bar input{border:none;outline:none;background:transparent;font-size:13px;color:#333;width:100%}.search-bar input::placeholder{color:#aaa}.quick-add-container{padding:4px 24px 10px;gap:10px;flex-wrap:wrap;flex-shrink:0}.quick-add-label{font-size:12px;color:#888;white-space:nowrap}.quick-add-chips{gap:6px;width:100%;overflow-y:scroll;white-space:nowrap}.quick-chip{gap:5px;padding:4px 10px;font-size:12px;border:1.5px solid #e0e0e0;border-radius:20px;cursor:pointer;color:#333;background:#fff;transition:background .12s,border-color .12s;-webkit-user-select:none;user-select:none}.quick-chip.active-quick-chip{border-color:#7c6cf0;color:#4b3fc0;font-weight:500}.quick-chip{transition:all .2s ease}.chip-emoji{font-size:14px}.content-layout{flex:1;overflow:hidden;border-top:1px solid #f0f0f0}.sidebar-group{margin-bottom:2px}.sidebar-group-header{gap:8px;padding:9px 14px;cursor:pointer;border-radius:0;transition:background .12s;-webkit-user-select:none;user-select:none;font-size:13px;color:#444}.sidebar-group-header:hover{background:#f0f0f0}.sidebar-group-active{background:#ece9fd;color:#4b3fc0;font-weight:600}.sidebar-group-icon{font-size:15px;width:20px;text-align:center}.sidebar-group-label{flex:1;font-size:13px}.sidebar-chevron{font-size:18px;width:18px;height:18px;color:#aaa;transition:transform .2s}.sidebar-chevron.rotated{transform:rotate(180deg)}.subcategory-item{padding:6px 10px 6px 8px;font-size:12px;color:#555;cursor:pointer;border-radius:6px;transition:background .12s;-webkit-user-select:none;user-select:none}.subcategory-item:hover{background:#ece9fd;color:#4b3fc0}.subcategory-active{background:#ece9fd;color:#4b3fc0;font-weight:500}.right-content{flex:1;overflow-y:auto;padding:16px 20px 16px 0}.section-group-label{font-size:13px;font-weight:600;color:#444;margin-bottom:14px}.sections-list{gap:16px}.section-card{border:1.5px solid #e8e8e8;border-radius:12px;overflow:hidden;cursor:pointer;background:#fff;transition:border-color .15s,box-shadow .15s}.section-card:hover{border-color:#bbb;box-shadow:0 2px 8px #0000000f}.section-card-selected{border-color:#7c6cf0;box-shadow:0 0 0 3px #7c6cf026}.section-card-badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.5px;color:#5a4fcf;background:#ece9fd;padding:4px 10px;margin:10px 10px 6px;border-radius:20px}.section-img-container{width:100%;overflow:hidden;background:#f7f7f7;display:flex;align-items:center;justify-content:center;max-height:200px}.no-image-placeholder{height:140px;display:flex;align-items:center;justify-content:center;color:#ccc}.no-image-placeholder mat-icon{font-size:40px;width:40px;height:40px}.section-card-info{padding:10px 14px 12px}.section-card-name{font-size:13px;font-weight:600;color:#222;margin-bottom:3px}.section-card-desc{font-size:12px;color:#888;line-height:1.5}.image-container-1{margin-bottom:16px}.empty-img{width:100px;opacity:.85}.footer-container{padding:12px 20px;border-top:1px solid #eee;background:#fff}.footer-hint mat-icon{font-size:14px;width:14px;height:14px}.btn-cancel{padding:8px 18px;font-size:13px;border:1.5px solid #e0e0e0;border-radius:8px;background:#fff;color:#444;cursor:pointer}.btn-add{padding:8px 20px;font-size:13px;font-weight:600;border:none;border-radius:8px;background:var(--primary-bg-color);color:#fff;cursor:pointer}.btn-add:disabled{opacity:.4;cursor:not-allowed}.fade-in{animation:fadeIn .25s ease}.fade-slide{animation:fadeSlide .25s ease}.stagger-item{opacity:0;transform:translateY(10px);animation:staggerFade .3s ease forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeSlide{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes staggerFade{to{opacity:1;transform:translateY(0)}}.section-card{transition:all .2s ease}@keyframes expandFade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.empty-state{height:100%;gap:10px;text-align:center}.empty-state img{width:120px;opacity:.85}.empty-title{font-size:16px;font-weight:600;color:#333}.empty-subtitle{font-size:13px;color:#777;max-width:260px}.active-subcategory{background:#7c6cf0!important;color:#fff!important}.sidebar-subcategory{overflow:hidden;animation:dropdownSmooth .25s ease}@keyframes dropdownSmooth{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.section-card:hover{transform:translateY(-4px)}.section-img-container img{transition:transform .25s ease,opacity .2s}.section-img-container:hover img{transform:scale(1.03)}.left-sidebar{width:200px;background:#f7f7fb;padding:16px 10px;overflow-y:scroll}.category-block{margin-bottom:10px}.category-header{gap:10px;padding:6px 10px;cursor:pointer;border-radius:10px;transition:background .2s}.category-header:hover{background:#ece9fd}.category-icon{font-size:18px}.category-arrow{font-size:18px;color:#888;transition:transform .25s ease}.category-arrow.rotate{transform:rotate(180deg)}.category-items{padding-left:14px;margin-top:0;gap:6px;animation:dropdownFade .25s ease}@keyframes dropdownFade{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.category-item{padding:4px 12px;font-size:12px;color:#444;cursor:pointer;border-radius:10px;transition:all .2s ease}.category-item:hover{background:#ece9fd;color:#4b3fc0}.category-item.active{background:#e6e1f7;color:#4b0d5d;font-weight:600}\n"] }]
4216
4216
  }], ctorParameters: () => [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
4217
4217
  type: Inject,
4218
4218
  args: [MAT_DIALOG_DATA]