simpo-component-library 3.6.829 → 3.6.830
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.
- package/esm2022/lib/sections/footer/footer.component.mjs +3 -3
- package/esm2022/lib/sections/product-info-section/product-info-section.component.mjs +3 -3
- package/fesm2022/simpo-component-library.mjs +4 -4
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/lib/components/input-fields/input-fields.component.d.ts +1 -1
- package/lib/ecommerce/sections/featured-category/featured-category.component.d.ts +1 -1
- package/lib/ecommerce/sections/featured-category/featured-collection.component.d.ts +1 -1
- package/lib/ecommerce/sections/new-collection/new-collection.component.d.ts +1 -1
- package/lib/ecommerce/sections/product-desc/product-desc.component.d.ts +1 -1
- package/lib/ecommerce/sections/schemes/schemes.component.d.ts +1 -1
- package/lib/sections/banner-carousel/banner-carousel.component.d.ts +1 -1
- package/lib/sections/image-grid-hotspot/image-grid-hotspot.component.d.ts +1 -1
- package/lib/sections/image-grid-section/image-grid-section.component.d.ts +1 -1
- package/lib/sections/pricing-section/pricing-section.component.d.ts +1 -1
- package/package.json +1 -1
- package/simpo-component-library-3.6.830.tgz +0 -0
- package/simpo-component-library-3.6.829.tgz +0 -0
|
@@ -16754,7 +16754,7 @@ class FooterComponent extends BaseSection {
|
|
|
16754
16754
|
this.router.navigate(['/list'], { queryParams: { category: categoryName.replaceAll(" ", '_'), pageNo: 1 } });
|
|
16755
16755
|
}
|
|
16756
16756
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FooterComponent, deps: [{ token: EventsService }, { token: RestService }, { token: i1$1.MatDialog }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16757
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FooterComponent, isStandalone: true, selector: "simpo-footer", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoBackground]=\"style?.background\" [simpoLayout]=\"style?.layout\" [id]=\"data?.id\">\r\n <div>\r\n <ng-container *ngIf=\"style?.footerType == 'Footer1'\">\r\n <ng-container *ngTemplateOutlet=\"Footer1\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.footerType == 'Footer2'\">\r\n <ng-container *ngTemplateOutlet=\"Footer2\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.footerType == 'Footer3'\">\r\n <ng-container *ngTemplateOutlet=\"Footer3\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.footerType == 'Footer4'\">\r\n <ng-container *ngTemplateOutlet=\"Footer4\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.textDescription?.display\">\r\n <ng-container *ngTemplateOutlet=\"textDescription\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.popularSearches\">\r\n <ng-container *ngTemplateOutlet=\"popularSearches\"></ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n</section>\r\n\r\n<ng-template #Footer1>\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-md-4\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n </div>\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"descSection\"></ng-container>\r\n </div>\r\n <div *ngIf=\"content?.socialLinks?.display && screenWidth > 475\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-md-8\">\r\n <div class=\"row\">\r\n <ng-container *ngTemplateOutlet=\"foldersVertical\"></ng-container>\r\n </div>\r\n <div *ngIf=\"content?.socialLinks?.display && screenWidth < 475\" class=\"d-flex justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <hr *ngIf=\"content?.displayBranding\">\r\n <div *ngIf=\"content?.displayBranding\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #Footer2>\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-md-3\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n </div>\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"descSection\"></ng-container>\r\n </div>\r\n <div *ngIf=\"content?.socialLinks?.display && screenWidth > 475\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <div class=\"row\">\r\n <ng-container *ngTemplateOutlet=\"pagesHorizontal\"></ng-container>\r\n </div>\r\n <div *ngIf=\"content?.socialLinks?.display && screenWidth < 475\" class=\"d-flex justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <hr *ngIf=\"content?.displayBranding\">\r\n <div *ngIf=\"content?.displayBranding\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #Footer3>\r\n <div class=\"row\" [class.align-items-start]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"foldersVertical\"></ng-container>\r\n </div>\r\n <hr>\r\n <div class=\"row justify-content-between\">\r\n <div class=\"col-md-4\" [class.w-30]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 d-flex justify-content-center align-items-start\" *ngIf=\"content?.socialLinks?.display\"\r\n [class.w-30]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 d-flex justify-content-end\" *ngIf=\"content?.displayBranding\" [class.w-30]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #Footer4>\r\n <div class=\"row align-items-center\">\r\n <ng-container *ngTemplateOutlet=\"pagesHorizontal\"></ng-container>\r\n </div>\r\n <hr>\r\n <div class=\"row justify-content-between\">\r\n <div class=\"col-md-4\">\r\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 d-flex justify-content-center align-items-start\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 d-flex justify-content-end\" *ngIf=\"content?.displayBranding\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #logoSection>\r\n <div class=\"d-flex\" [class.justify-content-center]=\"screenWidth < 475\">\r\n <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer mb-4\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"navigateToHome()\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\"\r\n (click)=\"navigateToHome()\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"style?.background?.color\"\r\n (click)=\"navigateToHome()\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer mb-4\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"navigateToHome()\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #descSection>\r\n <ng-container *ngIf=\"content?.additionalDetails as textItem\">\r\n <simpo-text-editor [(value)]=\"textItem.value \" [editable]=\"edit || false\" [sectionId]=\"data?.id\"\r\n [label]=\"content?.additionalDetails?.label || ''\"></simpo-text-editor>\r\n </ng-container>\r\n <!-- <div class=\"description\" [innerHTML]=\"content?.additionalDetails?.value ?? '' | sanitizeHtml\"></div> -->\r\n</ng-template>\r\n\r\n<ng-template #socialIcons>\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0 gap-1\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div class=\"icons\">\r\n <simpo-socia-icons [iconColor]=\"data?.styles?.background?.accentColor\" [socialIconData]=\"item\"\r\n [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #branding>\r\n <div class=\"heading-small text-center branding-text\">Powered By <a class=\"branding-text fw-600\"\r\n href=\"https://simpo.ai\" target=\"_blank\">Simpo.ai</a></div>\r\n</ng-template>\r\n\r\n<ng-template #pagesHorizontal>\r\n <div class=\"col-md-3 mb-3 pageType\" *ngFor=\"let page of pages\" [class.w-50]=\"screenWidth < 475\"\r\n [class.text-center]=\"screenWidth < 475\" (click)=\"redirectToPage(page)\">\r\n {{page.pageName}}\r\n </div>\r\n</ng-template>\r\n\r\n<!-- <ng-template #pagesVertical>\r\n <div class=\"page-container col-md-3 mb-3\" [class.w-50]=\"screenWidth < 475\">\r\n <div class=\"pageType mb-3\">{{pageLink}}</div>\r\n <ng-container *ngFor=\"let page of pages\">\r\n <div class=\"pages mb-2\" (click)=\"redirectToPage(page)\">{{page?.pageName}}</div>\r\n </ng-container>\r\n </div>\r\n</ng-template> -->\r\n\r\n<ng-template #foldersVertical>\r\n <div class=\"page-container col-md-3 mb-3\" *ngFor=\"let folder of content?.folder;let folderIndex = index\"\r\n [class.w-50]=\"screenWidth < 475\">\r\n <simpo-text-editor [(value)]=\"folder.label\" [editable]=\"edit || false\" [sectionId]=\"data?.id\"></simpo-text-editor>\r\n <div class=\"mt-15\">\r\n <ng-container *ngFor=\"let page of folder.links;let linkIndex = index\">\r\n <div class=\"folder-page\" [ngClass]=\"{'hoverWhenEditable' : edit}\">\r\n <div class=\"pages mb-2\" (click)=\"redirectTo(page)\" [style.color]=\"style?.background?.accentColor\">\r\n {{page.label}}</div>\r\n <mat-icon (click)=\"deleteFolderLinks(folderIndex, linkIndex)\"\r\n [style.color]=\"style?.background?.accentColor\">delete</mat-icon>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"edit ? addLinks : null; context: {data: folderIndex}\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"(content?.folder?.length || 0) < 4\" [class.w-50]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"edit ? addFolder : null\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #addLinks let-folderIndex=\"data\">\r\n <div class=\"addLinks\" (click)=\"createNewLink(folderIndex)\">\r\n <mat-icon>add</mat-icon>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #addFolder>\r\n <div class=\"addLinks h-100\" (click)=\"createNewFolder()\">\r\n <mat-icon>add</mat-icon>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #popularSearches>\r\n <div class=\"popular-searches mt-4\">\r\n <div class=\"popular-searches-title mb-2\">Popular Searches</div>\r\n <hr class=\"mb-4\">\r\n <ng-container *ngFor=\"let category of popularSearchedCategories; let last = last\">\r\n <div class=\"popular-category mb-4\">\r\n <div class=\"category-heading mb-2\" (click)=\"redirectToCategory(category.categoryName)\">{{category.categoryName}}\r\n </div>\r\n <div class=\"category-links d-flex flex-wrap gap-2\">\r\n <ng-container *ngFor=\"let collection of category.collectionIds; let last = last\">\r\n <span class=\"popular-link\"\r\n (click)=\"redirectToCollection(collection.refName,category.categoryName)\">{{collection.refName}}</span>\r\n <span *ngIf=\"!last\" class=\"separator\">|</span>\r\n </ng-container>\r\n </div>\r\n <hr *ngIf=\"!last\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #textDescription>\r\n <div class=\"text-description mt-2\">\r\n <ng-container *ngIf=\"content?.textDescription as textDesc\">\r\n <simpo-text-editor [(value)]=\"textDesc.content\" [editable]=\"edit || false\"\r\n [sectionId]=\"data?.id\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <hr>\r\n</ng-template>", styles: [".total-container{height:auto;position:relative}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.pageType{font-size:.9rem;font-weight:600;line-height:22px;color:#87769d}.pages{font-size:.9rem;font-weight:400;line-height:22px;cursor:pointer;color:#87769d}.branding-text{font-size:16px;font-weight:400;line-height:22px;text-decoration:unset}.fw-600{font-weight:600!important}.w-50{width:50%!important}.w-30{width:30%!important}.align-items-start{align-items:start!important}.mt-15{margin-top:15px}.folder-page{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.folder-page mat-icon{font-size:17px;display:flex;align-items:center;justify-content:center;display:none}.hoverWhenEditable:hover{border:1px solid #E9E9E9;border-radius:5px;cursor:pointer}.hoverWhenEditable:hover mat-icon{display:inline}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}.fs-21{font-size:21px}.popular-searches-title{font-size:1.2rem;font-weight:500}.category-heading{font-size:1rem;font-weight:500;text-transform:capitalize}.category-links{font-size:.9rem;line-height:1.6}.popular-link{cursor:pointer;transition:color .3s ease}.popular-link:hover{text-decoration:underline}.separator{font-weight:300;margin:0 4px}.popular-category:last-child{border-bottom:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type:
|
|
16757
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FooterComponent, isStandalone: true, selector: "simpo-footer", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoBackground]=\"style?.background\" [simpoLayout]=\"style?.layout\" [id]=\"data?.id\">\r\n <div>\r\n <ng-container *ngIf=\"style?.footerType == 'Footer1'\">\r\n <ng-container *ngTemplateOutlet=\"Footer1\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.footerType == 'Footer2'\">\r\n <ng-container *ngTemplateOutlet=\"Footer2\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.footerType == 'Footer3'\">\r\n <ng-container *ngTemplateOutlet=\"Footer3\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.footerType == 'Footer4'\">\r\n <ng-container *ngTemplateOutlet=\"Footer4\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.textDescription?.display\">\r\n <ng-container *ngTemplateOutlet=\"textDescription\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.popularSearches\">\r\n <ng-container *ngTemplateOutlet=\"popularSearches\"></ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n</section>\r\n\r\n<ng-template #Footer1>\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-md-4\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n </div>\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"descSection\"></ng-container>\r\n </div>\r\n <div *ngIf=\"content?.socialLinks?.display && screenWidth > 475\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-md-8\">\r\n <div class=\"row\">\r\n <ng-container *ngTemplateOutlet=\"foldersVertical\"></ng-container>\r\n </div>\r\n <div *ngIf=\"content?.socialLinks?.display && screenWidth < 475\" class=\"d-flex justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <hr *ngIf=\"content?.displayBranding\">\r\n <div *ngIf=\"content?.displayBranding\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #Footer2>\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-md-3\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n </div>\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"descSection\"></ng-container>\r\n </div>\r\n <div *ngIf=\"content?.socialLinks?.display && screenWidth > 475\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <div class=\"row\">\r\n <ng-container *ngTemplateOutlet=\"pagesHorizontal\"></ng-container>\r\n </div>\r\n <div *ngIf=\"content?.socialLinks?.display && screenWidth < 475\" class=\"d-flex justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <hr *ngIf=\"content?.displayBranding\">\r\n <div *ngIf=\"content?.displayBranding\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #Footer3>\r\n <div class=\"row\" [class.align-items-start]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"foldersVertical\"></ng-container>\r\n </div>\r\n <hr>\r\n <div class=\"row justify-content-between\">\r\n <div class=\"col-md-4\" [class.w-30]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 d-flex justify-content-center align-items-start\" *ngIf=\"content?.socialLinks?.display\"\r\n [class.w-30]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 d-flex justify-content-end\" *ngIf=\"content?.displayBranding\" [class.w-30]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #Footer4>\r\n <div class=\"row align-items-center\">\r\n <ng-container *ngTemplateOutlet=\"pagesHorizontal\"></ng-container>\r\n </div>\r\n <hr>\r\n <div class=\"row justify-content-between\">\r\n <div class=\"col-md-4\">\r\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 d-flex justify-content-center align-items-start\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 d-flex justify-content-end\" *ngIf=\"content?.displayBranding\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #logoSection>\r\n <div class=\"d-flex\" [class.justify-content-center]=\"screenWidth < 475\">\r\n <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer mb-4\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"navigateToHome()\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\"\r\n (click)=\"navigateToHome()\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"style?.background?.color\"\r\n (click)=\"navigateToHome()\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer mb-4\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"navigateToHome()\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #descSection>\r\n <ng-container *ngIf=\"content?.additionalDetails as textItem\">\r\n <simpo-text-editor [(value)]=\"textItem.value \" [editable]=\"edit || false\" [sectionId]=\"data?.id\"\r\n [label]=\"content?.additionalDetails?.label || ''\"></simpo-text-editor>\r\n </ng-container>\r\n <!-- <div class=\"description\" [innerHTML]=\"content?.additionalDetails?.value ?? '' | sanitizeHtml\"></div> -->\r\n</ng-template>\r\n\r\n<ng-template #socialIcons>\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0 gap-1\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div class=\"icons\">\r\n <simpo-socia-icons [iconColor]=\"data?.styles?.background?.accentColor\" [socialIconData]=\"item\"\r\n [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #branding>\r\n <div class=\"heading-small text-center branding-text\">Powered By <a class=\"branding-text fw-600\"\r\n href=\"https://simpo.ai\" target=\"_blank\">Simpo.ai</a></div>\r\n</ng-template>\r\n\r\n<ng-template #pagesHorizontal>\r\n <div class=\"col-md-3 mb-3 pageType\" *ngFor=\"let page of pages\" [class.w-50]=\"screenWidth < 475\"\r\n [class.text-center]=\"screenWidth < 475\" (click)=\"redirectToPage(page)\" [style.color]=\"style?.background?.accentColor\">\r\n {{page.pageName}}\r\n </div>\r\n</ng-template>\r\n\r\n<!-- <ng-template #pagesVertical>\r\n <div class=\"page-container col-md-3 mb-3\" [class.w-50]=\"screenWidth < 475\">\r\n <div class=\"pageType mb-3\">{{pageLink}}</div>\r\n <ng-container *ngFor=\"let page of pages\">\r\n <div class=\"pages mb-2\" (click)=\"redirectToPage(page)\">{{page?.pageName}}</div>\r\n </ng-container>\r\n </div>\r\n</ng-template> -->\r\n\r\n<ng-template #foldersVertical>\r\n <div class=\"page-container col-md-3 mb-3\" *ngFor=\"let folder of content?.folder;let folderIndex = index\"\r\n [class.w-50]=\"screenWidth < 475\">\r\n <simpo-text-editor [(value)]=\"folder.label\" [editable]=\"edit || false\" [sectionId]=\"data?.id\"></simpo-text-editor>\r\n <div class=\"mt-15\">\r\n <ng-container *ngFor=\"let page of folder.links;let linkIndex = index\">\r\n <div class=\"folder-page\" [ngClass]=\"{'hoverWhenEditable' : edit}\">\r\n <div class=\"pages mb-2\" (click)=\"redirectTo(page)\" [style.color]=\"style?.background?.accentColor\">\r\n {{page.label}}</div>\r\n <mat-icon (click)=\"deleteFolderLinks(folderIndex, linkIndex)\"\r\n [style.color]=\"style?.background?.accentColor\">delete</mat-icon>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"edit ? addLinks : null; context: {data: folderIndex}\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"(content?.folder?.length || 0) < 4\" [class.w-50]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"edit ? addFolder : null\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #addLinks let-folderIndex=\"data\">\r\n <div class=\"addLinks\" (click)=\"createNewLink(folderIndex)\">\r\n <mat-icon>add</mat-icon>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #addFolder>\r\n <div class=\"addLinks h-100\" (click)=\"createNewFolder()\">\r\n <mat-icon>add</mat-icon>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #popularSearches>\r\n <div class=\"popular-searches mt-4\">\r\n <div class=\"popular-searches-title mb-2\">Popular Searches</div>\r\n <hr class=\"mb-4\">\r\n <ng-container *ngFor=\"let category of popularSearchedCategories; let last = last\">\r\n <div class=\"popular-category mb-4\">\r\n <div class=\"category-heading mb-2\" (click)=\"redirectToCategory(category.categoryName)\">{{category.categoryName}}\r\n </div>\r\n <div class=\"category-links d-flex flex-wrap gap-2\">\r\n <ng-container *ngFor=\"let collection of category.collectionIds; let last = last\">\r\n <span class=\"popular-link\"\r\n (click)=\"redirectToCollection(collection.refName,category.categoryName)\">{{collection.refName}}</span>\r\n <span *ngIf=\"!last\" class=\"separator\">|</span>\r\n </ng-container>\r\n </div>\r\n <hr *ngIf=\"!last\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #textDescription>\r\n <div class=\"text-description mt-2\">\r\n <ng-container *ngIf=\"content?.textDescription as textDesc\">\r\n <simpo-text-editor [(value)]=\"textDesc.content\" [editable]=\"edit || false\"\r\n [sectionId]=\"data?.id\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <hr>\r\n</ng-template>", styles: [".total-container{height:auto;position:relative}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.pageType{font-size:.9rem;font-weight:600;line-height:22px}.pages{font-size:.9rem;font-weight:400;line-height:22px;cursor:pointer;color:#87769d}.branding-text{font-size:16px;font-weight:400;line-height:22px;text-decoration:unset}.fw-600{font-weight:600!important}.w-50{width:50%!important}.w-30{width:30%!important}.align-items-start{align-items:start!important}.mt-15{margin-top:15px}.folder-page{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.folder-page mat-icon{font-size:17px;display:flex;align-items:center;justify-content:center;display:none}.hoverWhenEditable:hover{border:1px solid #E9E9E9;border-radius:5px;cursor:pointer}.hoverWhenEditable:hover mat-icon{display:inline}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}.fs-21{font-size:21px}.popular-searches-title{font-size:1.2rem;font-weight:500}.category-heading{font-size:1rem;font-weight:500;text-transform:capitalize}.category-links{font-size:.9rem;line-height:1.6}.popular-link{cursor:pointer;transition:color .3s ease}.popular-link:hover{text-decoration:underline}.separator{font-weight:300;margin:0 4px}.popular-category:last-child{border-bottom:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type:
|
|
16758
16758
|
//directives
|
|
16759
16759
|
SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }] }); }
|
|
16760
16760
|
}
|
|
@@ -16774,7 +16774,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
16774
16774
|
ContentFitDirective,
|
|
16775
16775
|
TextEditorComponent,
|
|
16776
16776
|
HoverDirective
|
|
16777
|
-
], template: "<section class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoBackground]=\"style?.background\" [simpoLayout]=\"style?.layout\" [id]=\"data?.id\">\r\n <div>\r\n <ng-container *ngIf=\"style?.footerType == 'Footer1'\">\r\n <ng-container *ngTemplateOutlet=\"Footer1\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.footerType == 'Footer2'\">\r\n <ng-container *ngTemplateOutlet=\"Footer2\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.footerType == 'Footer3'\">\r\n <ng-container *ngTemplateOutlet=\"Footer3\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.footerType == 'Footer4'\">\r\n <ng-container *ngTemplateOutlet=\"Footer4\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.textDescription?.display\">\r\n <ng-container *ngTemplateOutlet=\"textDescription\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.popularSearches\">\r\n <ng-container *ngTemplateOutlet=\"popularSearches\"></ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n</section>\r\n\r\n<ng-template #Footer1>\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-md-4\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n </div>\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"descSection\"></ng-container>\r\n </div>\r\n <div *ngIf=\"content?.socialLinks?.display && screenWidth > 475\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-md-8\">\r\n <div class=\"row\">\r\n <ng-container *ngTemplateOutlet=\"foldersVertical\"></ng-container>\r\n </div>\r\n <div *ngIf=\"content?.socialLinks?.display && screenWidth < 475\" class=\"d-flex justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <hr *ngIf=\"content?.displayBranding\">\r\n <div *ngIf=\"content?.displayBranding\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #Footer2>\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-md-3\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n </div>\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"descSection\"></ng-container>\r\n </div>\r\n <div *ngIf=\"content?.socialLinks?.display && screenWidth > 475\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <div class=\"row\">\r\n <ng-container *ngTemplateOutlet=\"pagesHorizontal\"></ng-container>\r\n </div>\r\n <div *ngIf=\"content?.socialLinks?.display && screenWidth < 475\" class=\"d-flex justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <hr *ngIf=\"content?.displayBranding\">\r\n <div *ngIf=\"content?.displayBranding\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #Footer3>\r\n <div class=\"row\" [class.align-items-start]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"foldersVertical\"></ng-container>\r\n </div>\r\n <hr>\r\n <div class=\"row justify-content-between\">\r\n <div class=\"col-md-4\" [class.w-30]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 d-flex justify-content-center align-items-start\" *ngIf=\"content?.socialLinks?.display\"\r\n [class.w-30]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 d-flex justify-content-end\" *ngIf=\"content?.displayBranding\" [class.w-30]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #Footer4>\r\n <div class=\"row align-items-center\">\r\n <ng-container *ngTemplateOutlet=\"pagesHorizontal\"></ng-container>\r\n </div>\r\n <hr>\r\n <div class=\"row justify-content-between\">\r\n <div class=\"col-md-4\">\r\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 d-flex justify-content-center align-items-start\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 d-flex justify-content-end\" *ngIf=\"content?.displayBranding\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #logoSection>\r\n <div class=\"d-flex\" [class.justify-content-center]=\"screenWidth < 475\">\r\n <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer mb-4\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"navigateToHome()\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\"\r\n (click)=\"navigateToHome()\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"style?.background?.color\"\r\n (click)=\"navigateToHome()\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer mb-4\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"navigateToHome()\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #descSection>\r\n <ng-container *ngIf=\"content?.additionalDetails as textItem\">\r\n <simpo-text-editor [(value)]=\"textItem.value \" [editable]=\"edit || false\" [sectionId]=\"data?.id\"\r\n [label]=\"content?.additionalDetails?.label || ''\"></simpo-text-editor>\r\n </ng-container>\r\n <!-- <div class=\"description\" [innerHTML]=\"content?.additionalDetails?.value ?? '' | sanitizeHtml\"></div> -->\r\n</ng-template>\r\n\r\n<ng-template #socialIcons>\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0 gap-1\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div class=\"icons\">\r\n <simpo-socia-icons [iconColor]=\"data?.styles?.background?.accentColor\" [socialIconData]=\"item\"\r\n [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #branding>\r\n <div class=\"heading-small text-center branding-text\">Powered By <a class=\"branding-text fw-600\"\r\n href=\"https://simpo.ai\" target=\"_blank\">Simpo.ai</a></div>\r\n</ng-template>\r\n\r\n<ng-template #pagesHorizontal>\r\n <div class=\"col-md-3 mb-3 pageType\" *ngFor=\"let page of pages\" [class.w-50]=\"screenWidth < 475\"\r\n [class.text-center]=\"screenWidth < 475\" (click)=\"redirectToPage(page)\">\r\n {{page.pageName}}\r\n </div>\r\n</ng-template>\r\n\r\n<!-- <ng-template #pagesVertical>\r\n <div class=\"page-container col-md-3 mb-3\" [class.w-50]=\"screenWidth < 475\">\r\n <div class=\"pageType mb-3\">{{pageLink}}</div>\r\n <ng-container *ngFor=\"let page of pages\">\r\n <div class=\"pages mb-2\" (click)=\"redirectToPage(page)\">{{page?.pageName}}</div>\r\n </ng-container>\r\n </div>\r\n</ng-template> -->\r\n\r\n<ng-template #foldersVertical>\r\n <div class=\"page-container col-md-3 mb-3\" *ngFor=\"let folder of content?.folder;let folderIndex = index\"\r\n [class.w-50]=\"screenWidth < 475\">\r\n <simpo-text-editor [(value)]=\"folder.label\" [editable]=\"edit || false\" [sectionId]=\"data?.id\"></simpo-text-editor>\r\n <div class=\"mt-15\">\r\n <ng-container *ngFor=\"let page of folder.links;let linkIndex = index\">\r\n <div class=\"folder-page\" [ngClass]=\"{'hoverWhenEditable' : edit}\">\r\n <div class=\"pages mb-2\" (click)=\"redirectTo(page)\" [style.color]=\"style?.background?.accentColor\">\r\n {{page.label}}</div>\r\n <mat-icon (click)=\"deleteFolderLinks(folderIndex, linkIndex)\"\r\n [style.color]=\"style?.background?.accentColor\">delete</mat-icon>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"edit ? addLinks : null; context: {data: folderIndex}\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"(content?.folder?.length || 0) < 4\" [class.w-50]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"edit ? addFolder : null\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #addLinks let-folderIndex=\"data\">\r\n <div class=\"addLinks\" (click)=\"createNewLink(folderIndex)\">\r\n <mat-icon>add</mat-icon>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #addFolder>\r\n <div class=\"addLinks h-100\" (click)=\"createNewFolder()\">\r\n <mat-icon>add</mat-icon>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #popularSearches>\r\n <div class=\"popular-searches mt-4\">\r\n <div class=\"popular-searches-title mb-2\">Popular Searches</div>\r\n <hr class=\"mb-4\">\r\n <ng-container *ngFor=\"let category of popularSearchedCategories; let last = last\">\r\n <div class=\"popular-category mb-4\">\r\n <div class=\"category-heading mb-2\" (click)=\"redirectToCategory(category.categoryName)\">{{category.categoryName}}\r\n </div>\r\n <div class=\"category-links d-flex flex-wrap gap-2\">\r\n <ng-container *ngFor=\"let collection of category.collectionIds; let last = last\">\r\n <span class=\"popular-link\"\r\n (click)=\"redirectToCollection(collection.refName,category.categoryName)\">{{collection.refName}}</span>\r\n <span *ngIf=\"!last\" class=\"separator\">|</span>\r\n </ng-container>\r\n </div>\r\n <hr *ngIf=\"!last\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #textDescription>\r\n <div class=\"text-description mt-2\">\r\n <ng-container *ngIf=\"content?.textDescription as textDesc\">\r\n <simpo-text-editor [(value)]=\"textDesc.content\" [editable]=\"edit || false\"\r\n [sectionId]=\"data?.id\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <hr>\r\n</ng-template>", styles: [".total-container{height:auto;position:relative}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.pageType{font-size:.9rem;font-weight:600;line-height:22px;color:#87769d}.pages{font-size:.9rem;font-weight:400;line-height:22px;cursor:pointer;color:#87769d}.branding-text{font-size:16px;font-weight:400;line-height:22px;text-decoration:unset}.fw-600{font-weight:600!important}.w-50{width:50%!important}.w-30{width:30%!important}.align-items-start{align-items:start!important}.mt-15{margin-top:15px}.folder-page{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.folder-page mat-icon{font-size:17px;display:flex;align-items:center;justify-content:center;display:none}.hoverWhenEditable:hover{border:1px solid #E9E9E9;border-radius:5px;cursor:pointer}.hoverWhenEditable:hover mat-icon{display:inline}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}.fs-21{font-size:21px}.popular-searches-title{font-size:1.2rem;font-weight:500}.category-heading{font-size:1rem;font-weight:500;text-transform:capitalize}.category-links{font-size:.9rem;line-height:1.6}.popular-link{cursor:pointer;transition:color .3s ease}.popular-link:hover{text-decoration:underline}.separator{font-weight:300;margin:0 4px}.popular-category:last-child{border-bottom:none}\n"] }]
|
|
16777
|
+
], template: "<section class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoBackground]=\"style?.background\" [simpoLayout]=\"style?.layout\" [id]=\"data?.id\">\r\n <div>\r\n <ng-container *ngIf=\"style?.footerType == 'Footer1'\">\r\n <ng-container *ngTemplateOutlet=\"Footer1\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.footerType == 'Footer2'\">\r\n <ng-container *ngTemplateOutlet=\"Footer2\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.footerType == 'Footer3'\">\r\n <ng-container *ngTemplateOutlet=\"Footer3\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.footerType == 'Footer4'\">\r\n <ng-container *ngTemplateOutlet=\"Footer4\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.textDescription?.display\">\r\n <ng-container *ngTemplateOutlet=\"textDescription\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.popularSearches\">\r\n <ng-container *ngTemplateOutlet=\"popularSearches\"></ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n</section>\r\n\r\n<ng-template #Footer1>\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-md-4\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n </div>\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"descSection\"></ng-container>\r\n </div>\r\n <div *ngIf=\"content?.socialLinks?.display && screenWidth > 475\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-md-8\">\r\n <div class=\"row\">\r\n <ng-container *ngTemplateOutlet=\"foldersVertical\"></ng-container>\r\n </div>\r\n <div *ngIf=\"content?.socialLinks?.display && screenWidth < 475\" class=\"d-flex justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <hr *ngIf=\"content?.displayBranding\">\r\n <div *ngIf=\"content?.displayBranding\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #Footer2>\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-md-3\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n </div>\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"descSection\"></ng-container>\r\n </div>\r\n <div *ngIf=\"content?.socialLinks?.display && screenWidth > 475\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <div class=\"row\">\r\n <ng-container *ngTemplateOutlet=\"pagesHorizontal\"></ng-container>\r\n </div>\r\n <div *ngIf=\"content?.socialLinks?.display && screenWidth < 475\" class=\"d-flex justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <hr *ngIf=\"content?.displayBranding\">\r\n <div *ngIf=\"content?.displayBranding\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #Footer3>\r\n <div class=\"row\" [class.align-items-start]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"foldersVertical\"></ng-container>\r\n </div>\r\n <hr>\r\n <div class=\"row justify-content-between\">\r\n <div class=\"col-md-4\" [class.w-30]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 d-flex justify-content-center align-items-start\" *ngIf=\"content?.socialLinks?.display\"\r\n [class.w-30]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 d-flex justify-content-end\" *ngIf=\"content?.displayBranding\" [class.w-30]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #Footer4>\r\n <div class=\"row align-items-center\">\r\n <ng-container *ngTemplateOutlet=\"pagesHorizontal\"></ng-container>\r\n </div>\r\n <hr>\r\n <div class=\"row justify-content-between\">\r\n <div class=\"col-md-4\">\r\n <ng-container *ngTemplateOutlet=\"logoSection\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 d-flex justify-content-center align-items-start\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngTemplateOutlet=\"socialIcons\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 d-flex justify-content-end\" *ngIf=\"content?.displayBranding\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #logoSection>\r\n <div class=\"d-flex\" [class.justify-content-center]=\"screenWidth < 475\">\r\n <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer mb-4\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"navigateToHome()\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\"\r\n (click)=\"navigateToHome()\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"style?.background?.color\"\r\n (click)=\"navigateToHome()\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer mb-4\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"navigateToHome()\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n loading=\"lazy\">\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #descSection>\r\n <ng-container *ngIf=\"content?.additionalDetails as textItem\">\r\n <simpo-text-editor [(value)]=\"textItem.value \" [editable]=\"edit || false\" [sectionId]=\"data?.id\"\r\n [label]=\"content?.additionalDetails?.label || ''\"></simpo-text-editor>\r\n </ng-container>\r\n <!-- <div class=\"description\" [innerHTML]=\"content?.additionalDetails?.value ?? '' | sanitizeHtml\"></div> -->\r\n</ng-template>\r\n\r\n<ng-template #socialIcons>\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0 gap-1\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div class=\"icons\">\r\n <simpo-socia-icons [iconColor]=\"data?.styles?.background?.accentColor\" [socialIconData]=\"item\"\r\n [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #branding>\r\n <div class=\"heading-small text-center branding-text\">Powered By <a class=\"branding-text fw-600\"\r\n href=\"https://simpo.ai\" target=\"_blank\">Simpo.ai</a></div>\r\n</ng-template>\r\n\r\n<ng-template #pagesHorizontal>\r\n <div class=\"col-md-3 mb-3 pageType\" *ngFor=\"let page of pages\" [class.w-50]=\"screenWidth < 475\"\r\n [class.text-center]=\"screenWidth < 475\" (click)=\"redirectToPage(page)\" [style.color]=\"style?.background?.accentColor\">\r\n {{page.pageName}}\r\n </div>\r\n</ng-template>\r\n\r\n<!-- <ng-template #pagesVertical>\r\n <div class=\"page-container col-md-3 mb-3\" [class.w-50]=\"screenWidth < 475\">\r\n <div class=\"pageType mb-3\">{{pageLink}}</div>\r\n <ng-container *ngFor=\"let page of pages\">\r\n <div class=\"pages mb-2\" (click)=\"redirectToPage(page)\">{{page?.pageName}}</div>\r\n </ng-container>\r\n </div>\r\n</ng-template> -->\r\n\r\n<ng-template #foldersVertical>\r\n <div class=\"page-container col-md-3 mb-3\" *ngFor=\"let folder of content?.folder;let folderIndex = index\"\r\n [class.w-50]=\"screenWidth < 475\">\r\n <simpo-text-editor [(value)]=\"folder.label\" [editable]=\"edit || false\" [sectionId]=\"data?.id\"></simpo-text-editor>\r\n <div class=\"mt-15\">\r\n <ng-container *ngFor=\"let page of folder.links;let linkIndex = index\">\r\n <div class=\"folder-page\" [ngClass]=\"{'hoverWhenEditable' : edit}\">\r\n <div class=\"pages mb-2\" (click)=\"redirectTo(page)\" [style.color]=\"style?.background?.accentColor\">\r\n {{page.label}}</div>\r\n <mat-icon (click)=\"deleteFolderLinks(folderIndex, linkIndex)\"\r\n [style.color]=\"style?.background?.accentColor\">delete</mat-icon>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"edit ? addLinks : null; context: {data: folderIndex}\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-md-3\" *ngIf=\"(content?.folder?.length || 0) < 4\" [class.w-50]=\"screenWidth < 475\">\r\n <ng-container *ngTemplateOutlet=\"edit ? addFolder : null\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #addLinks let-folderIndex=\"data\">\r\n <div class=\"addLinks\" (click)=\"createNewLink(folderIndex)\">\r\n <mat-icon>add</mat-icon>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #addFolder>\r\n <div class=\"addLinks h-100\" (click)=\"createNewFolder()\">\r\n <mat-icon>add</mat-icon>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #popularSearches>\r\n <div class=\"popular-searches mt-4\">\r\n <div class=\"popular-searches-title mb-2\">Popular Searches</div>\r\n <hr class=\"mb-4\">\r\n <ng-container *ngFor=\"let category of popularSearchedCategories; let last = last\">\r\n <div class=\"popular-category mb-4\">\r\n <div class=\"category-heading mb-2\" (click)=\"redirectToCategory(category.categoryName)\">{{category.categoryName}}\r\n </div>\r\n <div class=\"category-links d-flex flex-wrap gap-2\">\r\n <ng-container *ngFor=\"let collection of category.collectionIds; let last = last\">\r\n <span class=\"popular-link\"\r\n (click)=\"redirectToCollection(collection.refName,category.categoryName)\">{{collection.refName}}</span>\r\n <span *ngIf=\"!last\" class=\"separator\">|</span>\r\n </ng-container>\r\n </div>\r\n <hr *ngIf=\"!last\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #textDescription>\r\n <div class=\"text-description mt-2\">\r\n <ng-container *ngIf=\"content?.textDescription as textDesc\">\r\n <simpo-text-editor [(value)]=\"textDesc.content\" [editable]=\"edit || false\"\r\n [sectionId]=\"data?.id\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <hr>\r\n</ng-template>", styles: [".total-container{height:auto;position:relative}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.pageType{font-size:.9rem;font-weight:600;line-height:22px}.pages{font-size:.9rem;font-weight:400;line-height:22px;cursor:pointer;color:#87769d}.branding-text{font-size:16px;font-weight:400;line-height:22px;text-decoration:unset}.fw-600{font-weight:600!important}.w-50{width:50%!important}.w-30{width:30%!important}.align-items-start{align-items:start!important}.mt-15{margin-top:15px}.folder-page{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.folder-page mat-icon{font-size:17px;display:flex;align-items:center;justify-content:center;display:none}.hoverWhenEditable:hover{border:1px solid #E9E9E9;border-radius:5px;cursor:pointer}.hoverWhenEditable:hover mat-icon{display:inline}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}.fs-21{font-size:21px}.popular-searches-title{font-size:1.2rem;font-weight:500}.category-heading{font-size:1rem;font-weight:500;text-transform:capitalize}.category-links{font-size:.9rem;line-height:1.6}.popular-link{cursor:pointer;transition:color .3s ease}.popular-link:hover{text-decoration:underline}.separator{font-weight:300;margin:0 4px}.popular-category:last-child{border-bottom:none}\n"] }]
|
|
16778
16778
|
}], ctorParameters: () => [{ type: EventsService }, { type: RestService }, { type: i1$1.MatDialog }, { type: i2$2.Router }], propDecorators: { data: [{
|
|
16779
16779
|
type: Input
|
|
16780
16780
|
}], index: [{
|
|
@@ -26551,7 +26551,7 @@ class ProductInfoSectionComponent extends BaseSection {
|
|
|
26551
26551
|
});
|
|
26552
26552
|
}
|
|
26553
26553
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductInfoSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26554
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductInfoSectionComponent, isStandalone: true, selector: "simpo-product-info-section", inputs: { data: "data", index: "index", edit: "edit", nextComponentColor: "nextComponentColor", delete: "delete", customClass: "customClass" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div class=\"chemical-product-details\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\r\n [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"styles?.layout\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n <div class=\"product-container d-flex gap-5 w-100 flex-lg-row\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\">\r\n <!-- [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\" -->\r\n\r\n <!-- Left: Structure Image -->\r\n <div class=\"w-50\" *ngIf=\"content?.image?.showImage\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg h-100\"\r\n loading=\"lazy\" />\r\n </div>\r\n <!-- Right: Details -->\r\n <div [ngClass]=\"{'w-50' :content?.image?.showImage,'w-100':!content?.image?.showImage }\" [id]=\"data?.id\"\r\n class=\"overflow-y-auto d-flex flex-column\" [simpoContainerAlignment]=\"stylesLayout\"\r\n [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div class=\"w-100 mb-3\">\r\n <simpo-text-editor [(value)]=\"content.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"table-container\">\r\n\r\n <!-- \u2705 HEADER (ONLY ONCE) -->\r\n <div class=\"d-flex table-header m-0 border-0 flex-nowrap\"\r\n [ngClass]=\"{'w-fit-content' : content?.image?.showImage , 'w-100': !content?.image?.showImage}\"\r\n [ngStyle]=\"{'background':accentBackground}\">\r\n <div class=\"d-flex align-items-center justify-content-center\"\r\n *ngFor=\"let col of content?.productTableDataList[0];let i = index\"\r\n [ngStyle]=\"{'border-right': content?.columnCellBorder && i != content?.productTableDataList[0].length - 1 ? '1px solid lightgrey' : 'none'}\"\r\n [ngClass]=\"{'cell' : !content?.image?.showImage,'image-cell': content?.image?.showImage}\"\r\n [style.color]=\"fontColor\">\r\n <simpo-text-editor [(value)]=\"col.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n\r\n <!-- \u2705 ALL ROWS (DYNAMIC) -->\r\n <div class=\"d-flex m-0 border-grey flex-nowrap\"\r\n [ngClass]=\"{'w-fit-content' : content?.image?.showImage , 'w-100': !content?.image?.showImage}\"\r\n *ngFor=\"let row of content?.productTableDataList; let rowIndex = index\">\r\n <ng-container *ngIf=\"rowIndex !== 0\">\r\n <div class=\"d-flex align-items-center justify-content-center\"\r\n *ngFor=\"let col of row; let colIndex = index\" contenteditable=\"true\"\r\n [ngStyle]=\"{'border-right': content?.columnCellBorder ? '1px solid lightgrey' : 'none'}\"\r\n [ngClass]=\"{'cell' : !content?.image?.showImage,'image-cell': content?.image?.showImage}\"\r\n [style.color]=\"fontColor\">\r\n <simpo-text-editor [(value)]=\"col.value\" [editable]=\"edit || false\"\r\n class=\"w-100\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"mt-3 position-absolute button-container\"\r\n [style.width]=\"content?.image?.showImage ? '47%' : '97%'\">\r\n <app-button-element [buttonContent]=\"data?.action?.buttons[0]?.content\"\r\n [buttonStyle]=\"data?.action?.buttons[0]?.styles\" [buttonId]=\"data?.action?.buttons[0]?.id\"\r\n [sectionId]=\"data?.id\" [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [isFullWidth]=\"false\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".chemical-product-details{font-family:Arial,sans-serif;padding:20px}.chemical-product-details .container{display:flex;gap:40px;align-items:flex-start}.w-50{width:50%!important}.chemical-product-details .left{flex:1;display:flex;justify-content:center;align-items:center}.chemical-product-details .left img{max-width:100%;height:auto}.chemical-product-details .right{flex:1}.chemical-product-details .right h2{font-size:28px;color:#2c5aa0;margin-bottom:20px}.info-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #ddd;font-size:14px}.info-row span:first-child{color:#555}.info-row span:last-child{color:#000;font-weight:500}.total-container{height:auto;position:relative}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.table-container{display:flex;flex-direction:column;max-height:82%;height:fit-content;overflow-y:scroll}.button-container{bottom:4%}.border-grey{border-bottom:1px solid #eee;border-right:1px solid lightgrey;border-left:1px solid lightgrey}.image-cell{width:140px;padding:5px 0;outline:none}.row{display:flex}.w-fit-content{width:fit-content!important}.overflow-y-auto{overflow-y:auto!important}.cell{flex:1 1 0;min-width:117px;padding:10px 0;outline:none}.table-header{font-weight:700;border-top-right-radius:7px;border-top-left-radius:7px}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }] }); }
|
|
26554
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductInfoSectionComponent, isStandalone: true, selector: "simpo-product-info-section", inputs: { data: "data", index: "index", edit: "edit", nextComponentColor: "nextComponentColor", delete: "delete", customClass: "customClass" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div class=\"chemical-product-details\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\r\n [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"styles?.layout\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n <div class=\"product-container d-flex gap-5 w-100 flex-lg-row\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\">\r\n <!-- [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\" -->\r\n\r\n <!-- Left: Structure Image -->\r\n <div class=\"w-50\" *ngIf=\"content?.image?.showImage\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg h-100\"\r\n loading=\"lazy\" />\r\n </div>\r\n <!-- Right: Details -->\r\n <div [ngClass]=\"{'w-50' :content?.image?.showImage,'w-100':!content?.image?.showImage }\" [id]=\"data?.id\"\r\n class=\"overflow-y-auto d-flex flex-column\" [simpoContainerAlignment]=\"stylesLayout\"\r\n [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div class=\"w-100 mb-3\">\r\n <simpo-text-editor [(value)]=\"content.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"table-container\">\r\n\r\n <!-- \u2705 HEADER (ONLY ONCE) -->\r\n <div class=\"d-flex table-header m-0 border-0 flex-nowrap\"\r\n [ngClass]=\"{'w-fit-content' : content?.image?.showImage , 'w-100': !content?.image?.showImage}\"\r\n [ngStyle]=\"{'background':accentBackground}\">\r\n <div class=\"d-flex align-items-center justify-content-center\"\r\n *ngFor=\"let col of content?.productTableDataList[0];let i = index\"\r\n [ngStyle]=\"{'border-right': content?.columnCellBorder && i != content?.productTableDataList[0].length - 1 ? '1px solid lightgrey' : 'none'}\"\r\n [ngClass]=\"{'cell' : !content?.image?.showImage,'image-cell': content?.image?.showImage}\"\r\n [style.color]=\"fontColor\">\r\n <simpo-text-editor [(value)]=\"col.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n\r\n <!-- \u2705 ALL ROWS (DYNAMIC) -->\r\n <div class=\"d-flex m-0 border-grey flex-nowrap\"\r\n [ngClass]=\"{'w-fit-content' : content?.image?.showImage , 'w-100': !content?.image?.showImage}\"\r\n *ngFor=\"let row of content?.productTableDataList; let rowIndex = index\">\r\n <ng-container *ngIf=\"rowIndex !== 0\">\r\n <div class=\"d-flex align-items-center justify-content-center\"\r\n *ngFor=\"let col of row; let colIndex = index\" contenteditable=\"true\"\r\n [ngStyle]=\"{'border-right': content?.columnCellBorder ? '1px solid lightgrey' : 'none'}\"\r\n [ngClass]=\"{'cell' : !content?.image?.showImage,'image-cell': content?.image?.showImage}\"\r\n [style.color]=\"fontColor\">\r\n <simpo-text-editor [(value)]=\"col.value\" [editable]=\"edit || false\"\r\n class=\"w-100\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"mt-3 position-absolute button-container\"\r\n [style.width]=\"content?.image?.showImage ? '47%' : '97%'\" *ngIf=\"data?.action?.display\">\r\n <app-button-element [buttonContent]=\"data?.action?.buttons[0]?.content\"\r\n [buttonStyle]=\"data?.action?.buttons[0]?.styles\" [buttonId]=\"data?.action?.buttons[0]?.id\"\r\n [sectionId]=\"data?.id\" [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [isFullWidth]=\"false\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".chemical-product-details{font-family:Arial,sans-serif;padding:20px}.chemical-product-details .container{display:flex;gap:40px;align-items:flex-start}.w-50{width:50%!important}.chemical-product-details .left{flex:1;display:flex;justify-content:center;align-items:center}.chemical-product-details .left img{max-width:100%;height:auto}.chemical-product-details .right{flex:1}.chemical-product-details .right h2{font-size:28px;color:#2c5aa0;margin-bottom:20px}.info-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #ddd;font-size:14px}.info-row span:first-child{color:#555}.info-row span:last-child{color:#000;font-weight:500}.total-container{height:auto;position:relative}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.table-container{display:flex;flex-direction:column;max-height:82%;height:fit-content;overflow-y:scroll}.button-container{bottom:4%}.border-grey{border-bottom:1px solid #eee;border-right:1px solid lightgrey;border-left:1px solid lightgrey}.image-cell{width:140px;padding:5px 0;outline:none}.row{display:flex}.w-fit-content{width:fit-content!important}.overflow-y-auto{overflow-y:auto!important}.cell{flex:1 1 0;min-width:117px;padding:10px 0;outline:none}.table-header{font-weight:700;border-top-right-radius:7px;border-top-left-radius:7px}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }] }); }
|
|
26555
26555
|
}
|
|
26556
26556
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductInfoSectionComponent, decorators: [{
|
|
26557
26557
|
type: Component,
|
|
@@ -26574,7 +26574,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
26574
26574
|
SimpoContainerAligment,
|
|
26575
26575
|
simpoConetenAlignmentDirective,
|
|
26576
26576
|
BorderDirective
|
|
26577
|
-
], template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div class=\"chemical-product-details\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\r\n [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"styles?.layout\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n <div class=\"product-container d-flex gap-5 w-100 flex-lg-row\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\">\r\n <!-- [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\" -->\r\n\r\n <!-- Left: Structure Image -->\r\n <div class=\"w-50\" *ngIf=\"content?.image?.showImage\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg h-100\"\r\n loading=\"lazy\" />\r\n </div>\r\n <!-- Right: Details -->\r\n <div [ngClass]=\"{'w-50' :content?.image?.showImage,'w-100':!content?.image?.showImage }\" [id]=\"data?.id\"\r\n class=\"overflow-y-auto d-flex flex-column\" [simpoContainerAlignment]=\"stylesLayout\"\r\n [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div class=\"w-100 mb-3\">\r\n <simpo-text-editor [(value)]=\"content.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"table-container\">\r\n\r\n <!-- \u2705 HEADER (ONLY ONCE) -->\r\n <div class=\"d-flex table-header m-0 border-0 flex-nowrap\"\r\n [ngClass]=\"{'w-fit-content' : content?.image?.showImage , 'w-100': !content?.image?.showImage}\"\r\n [ngStyle]=\"{'background':accentBackground}\">\r\n <div class=\"d-flex align-items-center justify-content-center\"\r\n *ngFor=\"let col of content?.productTableDataList[0];let i = index\"\r\n [ngStyle]=\"{'border-right': content?.columnCellBorder && i != content?.productTableDataList[0].length - 1 ? '1px solid lightgrey' : 'none'}\"\r\n [ngClass]=\"{'cell' : !content?.image?.showImage,'image-cell': content?.image?.showImage}\"\r\n [style.color]=\"fontColor\">\r\n <simpo-text-editor [(value)]=\"col.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n\r\n <!-- \u2705 ALL ROWS (DYNAMIC) -->\r\n <div class=\"d-flex m-0 border-grey flex-nowrap\"\r\n [ngClass]=\"{'w-fit-content' : content?.image?.showImage , 'w-100': !content?.image?.showImage}\"\r\n *ngFor=\"let row of content?.productTableDataList; let rowIndex = index\">\r\n <ng-container *ngIf=\"rowIndex !== 0\">\r\n <div class=\"d-flex align-items-center justify-content-center\"\r\n *ngFor=\"let col of row; let colIndex = index\" contenteditable=\"true\"\r\n [ngStyle]=\"{'border-right': content?.columnCellBorder ? '1px solid lightgrey' : 'none'}\"\r\n [ngClass]=\"{'cell' : !content?.image?.showImage,'image-cell': content?.image?.showImage}\"\r\n [style.color]=\"fontColor\">\r\n <simpo-text-editor [(value)]=\"col.value\" [editable]=\"edit || false\"\r\n class=\"w-100\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"mt-3 position-absolute button-container\"\r\n [style.width]=\"content?.image?.showImage ? '47%' : '97%'\">\r\n <app-button-element [buttonContent]=\"data?.action?.buttons[0]?.content\"\r\n [buttonStyle]=\"data?.action?.buttons[0]?.styles\" [buttonId]=\"data?.action?.buttons[0]?.id\"\r\n [sectionId]=\"data?.id\" [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [isFullWidth]=\"false\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".chemical-product-details{font-family:Arial,sans-serif;padding:20px}.chemical-product-details .container{display:flex;gap:40px;align-items:flex-start}.w-50{width:50%!important}.chemical-product-details .left{flex:1;display:flex;justify-content:center;align-items:center}.chemical-product-details .left img{max-width:100%;height:auto}.chemical-product-details .right{flex:1}.chemical-product-details .right h2{font-size:28px;color:#2c5aa0;margin-bottom:20px}.info-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #ddd;font-size:14px}.info-row span:first-child{color:#555}.info-row span:last-child{color:#000;font-weight:500}.total-container{height:auto;position:relative}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.table-container{display:flex;flex-direction:column;max-height:82%;height:fit-content;overflow-y:scroll}.button-container{bottom:4%}.border-grey{border-bottom:1px solid #eee;border-right:1px solid lightgrey;border-left:1px solid lightgrey}.image-cell{width:140px;padding:5px 0;outline:none}.row{display:flex}.w-fit-content{width:fit-content!important}.overflow-y-auto{overflow-y:auto!important}.cell{flex:1 1 0;min-width:117px;padding:10px 0;outline:none}.table-header{font-weight:700;border-top-right-radius:7px;border-top-left-radius:7px}\n"] }]
|
|
26577
|
+
], template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div class=\"chemical-product-details\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\r\n [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"styles?.layout\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n <div class=\"product-container d-flex gap-5 w-100 flex-lg-row\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\">\r\n <!-- [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right'}\" -->\r\n\r\n <!-- Left: Structure Image -->\r\n <div class=\"w-50\" *ngIf=\"content?.image?.showImage\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg h-100\"\r\n loading=\"lazy\" />\r\n </div>\r\n <!-- Right: Details -->\r\n <div [ngClass]=\"{'w-50' :content?.image?.showImage,'w-100':!content?.image?.showImage }\" [id]=\"data?.id\"\r\n class=\"overflow-y-auto d-flex flex-column\" [simpoContainerAlignment]=\"stylesLayout\"\r\n [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div class=\"w-100 mb-3\">\r\n <simpo-text-editor [(value)]=\"content.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"table-container\">\r\n\r\n <!-- \u2705 HEADER (ONLY ONCE) -->\r\n <div class=\"d-flex table-header m-0 border-0 flex-nowrap\"\r\n [ngClass]=\"{'w-fit-content' : content?.image?.showImage , 'w-100': !content?.image?.showImage}\"\r\n [ngStyle]=\"{'background':accentBackground}\">\r\n <div class=\"d-flex align-items-center justify-content-center\"\r\n *ngFor=\"let col of content?.productTableDataList[0];let i = index\"\r\n [ngStyle]=\"{'border-right': content?.columnCellBorder && i != content?.productTableDataList[0].length - 1 ? '1px solid lightgrey' : 'none'}\"\r\n [ngClass]=\"{'cell' : !content?.image?.showImage,'image-cell': content?.image?.showImage}\"\r\n [style.color]=\"fontColor\">\r\n <simpo-text-editor [(value)]=\"col.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n\r\n <!-- \u2705 ALL ROWS (DYNAMIC) -->\r\n <div class=\"d-flex m-0 border-grey flex-nowrap\"\r\n [ngClass]=\"{'w-fit-content' : content?.image?.showImage , 'w-100': !content?.image?.showImage}\"\r\n *ngFor=\"let row of content?.productTableDataList; let rowIndex = index\">\r\n <ng-container *ngIf=\"rowIndex !== 0\">\r\n <div class=\"d-flex align-items-center justify-content-center\"\r\n *ngFor=\"let col of row; let colIndex = index\" contenteditable=\"true\"\r\n [ngStyle]=\"{'border-right': content?.columnCellBorder ? '1px solid lightgrey' : 'none'}\"\r\n [ngClass]=\"{'cell' : !content?.image?.showImage,'image-cell': content?.image?.showImage}\"\r\n [style.color]=\"fontColor\">\r\n <simpo-text-editor [(value)]=\"col.value\" [editable]=\"edit || false\"\r\n class=\"w-100\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"mt-3 position-absolute button-container\"\r\n [style.width]=\"content?.image?.showImage ? '47%' : '97%'\" *ngIf=\"data?.action?.display\">\r\n <app-button-element [buttonContent]=\"data?.action?.buttons[0]?.content\"\r\n [buttonStyle]=\"data?.action?.buttons[0]?.styles\" [buttonId]=\"data?.action?.buttons[0]?.id\"\r\n [sectionId]=\"data?.id\" [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [isFullWidth]=\"false\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".chemical-product-details{font-family:Arial,sans-serif;padding:20px}.chemical-product-details .container{display:flex;gap:40px;align-items:flex-start}.w-50{width:50%!important}.chemical-product-details .left{flex:1;display:flex;justify-content:center;align-items:center}.chemical-product-details .left img{max-width:100%;height:auto}.chemical-product-details .right{flex:1}.chemical-product-details .right h2{font-size:28px;color:#2c5aa0;margin-bottom:20px}.info-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #ddd;font-size:14px}.info-row span:first-child{color:#555}.info-row span:last-child{color:#000;font-weight:500}.total-container{height:auto;position:relative}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.table-container{display:flex;flex-direction:column;max-height:82%;height:fit-content;overflow-y:scroll}.button-container{bottom:4%}.border-grey{border-bottom:1px solid #eee;border-right:1px solid lightgrey;border-left:1px solid lightgrey}.image-cell{width:140px;padding:5px 0;outline:none}.row{display:flex}.w-fit-content{width:fit-content!important}.overflow-y-auto{overflow-y:auto!important}.cell{flex:1 1 0;min-width:117px;padding:10px 0;outline:none}.table-header{font-weight:700;border-top-right-radius:7px;border-top-left-radius:7px}\n"] }]
|
|
26578
26578
|
}], ctorParameters: () => [], propDecorators: { data: [{
|
|
26579
26579
|
type: Input
|
|
26580
26580
|
}], index: [{
|