simpo-component-library 3.6.71 → 3.6.72

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.
@@ -2638,11 +2638,11 @@ class AddSectionComponent {
2638
2638
  this.dummy2 = {};
2639
2639
  }
2640
2640
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AddSectionComponent, deps: [{ token: i2$1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i1.HttpClient }, { token: EventsService }, { token: ElementServiceService }, { token: ElementServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
2641
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", 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=\"!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-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>", 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;box-shadow:0 0 4px #00000040;margin-bottom:2px}.search-bar{box-shadow:0 0 4px #00000040;padding:8px;border-radius:8px}.search-bar img{width:19px;height:18px}.search-bar input{width:100%;outline:none;border:unset;font-size:13px;font-weight:400;background:#fafafa}.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}.empty-img{height:30vh}.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}\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: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.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"] }] }); }
2641
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", 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>", 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;box-shadow:0 0 4px #00000040;margin-bottom:2px}.search-bar{box-shadow:0 0 4px #00000040;padding:8px;border-radius:8px}.search-bar img{width:19px;height:18px}.search-bar input{width:100%;outline:none;border:unset;font-size:13px;font-weight:400;background:#fafafa}.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}.empty-img{height:30vh}.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}\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: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.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"] }] }); }
2642
2642
  }
2643
2643
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AddSectionComponent, decorators: [{
2644
2644
  type: Component,
2645
- 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=\"!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-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>", 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;box-shadow:0 0 4px #00000040;margin-bottom:2px}.search-bar{box-shadow:0 0 4px #00000040;padding:8px;border-radius:8px}.search-bar img{width:19px;height:18px}.search-bar input{width:100%;outline:none;border:unset;font-size:13px;font-weight:400;background:#fafafa}.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}.empty-img{height:30vh}.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}\n"] }]
2645
+ 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>", 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;box-shadow:0 0 4px #00000040;margin-bottom:2px}.search-bar{box-shadow:0 0 4px #00000040;padding:8px;border-radius:8px}.search-bar img{width:19px;height:18px}.search-bar input{width:100%;outline:none;border:unset;font-size:13px;font-weight:400;background:#fafafa}.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}.empty-img{height:30vh}.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}\n"] }]
2646
2646
  }], ctorParameters: () => [{ type: i2$1.MatDialogRef }, { type: undefined, decorators: [{
2647
2647
  type: Inject,
2648
2648
  args: [MAT_DIALOG_DATA]
@@ -3775,6 +3775,26 @@ class BackgroundDirective {
3775
3775
  this.el.nativeElement.removeChild(this.el.nativeElement.querySelector('video'));
3776
3776
  this.el.nativeElement.style.setProperty('background-image', `url('https://d2yx15pncgmu63.cloudfront.net/prod-images/287348c1747051540088WhatsAppVideo2025-05-12at5.19.11PM-ezgif.com-video-to-gif-converter (1).gif')`);
3777
3777
  }
3778
+ if (this.simpoBackground?.backgroundAnimation === 'WAVES') {
3779
+ if (this.el.nativeElement.querySelector('video'))
3780
+ this.el.nativeElement.removeChild(this.el.nativeElement.querySelector('video'));
3781
+ this.el.nativeElement.style.setProperty('background-image', `url('https://d2yx15pncgmu63.cloudfront.net/prod-images/630753c17474032172396913997_Motion%20Graphics_Motion%20Graphic_3840x2160%20(1)%20(2).gif')`);
3782
+ }
3783
+ if (this.simpoBackground?.backgroundAnimation === 'ABSTRACT') {
3784
+ if (this.el.nativeElement.querySelector('video'))
3785
+ this.el.nativeElement.removeChild(this.el.nativeElement.querySelector('video'));
3786
+ this.el.nativeElement.style.setProperty('background-image', `url('https://d2yx15pncgmu63.cloudfront.net/prod-images/577507c1747465636956Rotation%20gif.gif')`);
3787
+ }
3788
+ if (this.simpoBackground?.backgroundAnimation === 'DREW') {
3789
+ if (this.el.nativeElement.querySelector('video'))
3790
+ this.el.nativeElement.removeChild(this.el.nativeElement.querySelector('video'));
3791
+ this.el.nativeElement.style.setProperty('background-image', `url('https://d2yx15pncgmu63.cloudfront.net/prod-images/721244c1747467698004animate.gif')`);
3792
+ }
3793
+ if (this.simpoBackground?.backgroundAnimation === 'DOTS') {
3794
+ if (this.el.nativeElement.querySelector('video'))
3795
+ this.el.nativeElement.removeChild(this.el.nativeElement.querySelector('video'));
3796
+ this.el.nativeElement.style.setProperty('background-image', `url('https://d2yx15pncgmu63.cloudfront.net/prod-images/659134c1747467801242Dots%20(1).gif')`);
3797
+ }
3778
3798
  if (this.simpoBackground?.backgroundAnimation) {
3779
3799
  this.el.nativeElement.style.setProperty('background-size', 'cover');
3780
3800
  this.el.nativeElement.style.setProperty('background-repeat', 'no-repeat');