simpo-component-library 3.6.800 → 3.6.801

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/esm2022/lib/directive/overlay-directive.mjs +4 -1
  2. package/esm2022/lib/ecommerce/sections/category-product/category-product.component.mjs +3 -3
  3. package/esm2022/lib/ecommerce/sections/category-product/category-product.model.mjs +1 -1
  4. package/esm2022/lib/ecommerce/sections/small-product-listing/small-product-listing.component.mjs +13 -2
  5. package/esm2022/lib/ecommerce/styles/product.modal.mjs +2 -1
  6. package/fesm2022/simpo-component-library.mjs +18 -3
  7. package/fesm2022/simpo-component-library.mjs.map +1 -1
  8. package/lib/ecommerce/sections/category-product/category-product.model.d.ts +1 -0
  9. package/lib/ecommerce/sections/featured-category/featured-category.component.d.ts +1 -1
  10. package/lib/ecommerce/sections/featured-category/featured-collection.component.d.ts +1 -1
  11. package/lib/ecommerce/sections/new-collection/new-collection.component.d.ts +1 -1
  12. package/lib/ecommerce/sections/product-desc/product-desc.component.d.ts +1 -1
  13. package/lib/ecommerce/sections/schemes/schemes.component.d.ts +1 -1
  14. package/lib/ecommerce/sections/small-product-listing/small-product-listing.component.d.ts +1 -0
  15. package/lib/sections/banner-carousel/banner-carousel.component.d.ts +1 -1
  16. package/lib/sections/image-grid-hotspot/image-grid-hotspot.component.d.ts +1 -1
  17. package/lib/sections/image-grid-section/image-grid-section.component.d.ts +1 -1
  18. package/lib/sections/pricing-section/pricing-section.component.d.ts +1 -1
  19. package/package.json +1 -1
  20. package/simpo-component-library-3.6.801.tgz +0 -0
  21. package/simpo-component-library-3.6.800.tgz +0 -0
@@ -3332,6 +3332,7 @@ class Product {
3332
3332
  this.itemImages = json?.["itemImages"];
3333
3333
  this.itemPacks = json?.["itemPacks"];
3334
3334
  this.addOnToItem = json?.["addOnToItem"];
3335
+ this.slugifiedName = json?.["slugifiedName"];
3335
3336
  this.unit = json?.["unit"];
3336
3337
  this.price = json?.["price"];
3337
3338
  this.categoryId = json?.["categoryId"];
@@ -5475,6 +5476,9 @@ class OverlayDirective {
5475
5476
  if (res.data?.showImage) {
5476
5477
  this.el.nativeElement.style.setProperty('background-color', this.getRGBA(res.data.color, res.data.opacity));
5477
5478
  }
5479
+ else {
5480
+ this.el.nativeElement.style.setProperty('background-color', 'transparent');
5481
+ }
5478
5482
  }
5479
5483
  });
5480
5484
  }
@@ -17756,7 +17760,18 @@ class SmallProductListingComponent {
17756
17760
  return (((product?.price?.value - product?.price?.discountedPrice) / product?.price?.value) * 100).toFixed(0);
17757
17761
  }
17758
17762
  goToProductDetail(product) {
17759
- this.router.navigate([`details`], { queryParams: { id: product.itemId, varientId: product.varientId } });
17763
+ const slug = product.slugifiedName || this.toSlug(product.name);
17764
+ if (!slug)
17765
+ return;
17766
+ this.router.navigate(['details', slug], {});
17767
+ }
17768
+ toSlug(input) {
17769
+ if (!input)
17770
+ return null;
17771
+ const noWhitespace = input.replace(/\s+/g, '-');
17772
+ const normalized = noWhitespace.normalize('NFD');
17773
+ const slug = normalized.replace(/[^\w-]/g, '');
17774
+ return slug.toLowerCase().replace(/-+/g, '-').replace(/^-|-$/g, '');
17760
17775
  }
17761
17776
  getSupportingColor(color) {
17762
17777
  let hex = color;
@@ -23283,7 +23298,7 @@ class CategoryProductComponent extends BaseSection {
23283
23298
  return { ...this.styles?.layout };
23284
23299
  }
23285
23300
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CategoryProductComponent, deps: [{ token: RestService }, { token: CartService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
23286
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CategoryProductComponent, isStandalone: true, selector: "simpo-category-product", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\"\r\n [simpoBackground]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n <section class=\"container-fluid d-block\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [spacingHorizontal]=\"getSpacingLayout\" [simpoOverlay]=\"styles?.background\">\r\n <div *ngFor=\"let item of data?.content?.inputText\">\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <section class=\"m-auto position-relative w-100\" [ngClass]=\"{'adjustPosition': isMobile}\">\r\n <section class=\"d-flex\">\r\n <ng-container *ngFor=\"let category of categoryList; let idx = index\">\r\n <div class=\"d-flex flex-column align-items-center category-tag position-relative\" style=\"gap: 5px;\"\r\n [style.backgroundColor]=\"selectCategoryId === category.categoryId ? getSupportingColor(styles?.background?.accentColor ?? '#000000') : ''\"\r\n [style.borderColor]=\"selectCategoryId == category.categoryId ? styles?.background?.accentColor : ''\"\r\n (click)=\"selectCategory(category.categoryId)\">\r\n <img [src]=\"category.imgUrl[0]\" alt=\"\" height=\"30px\" width=\"30px\" style=\"border-radius: 50%;\">\r\n <span class=\"trim-text\" style=\"font-size: .8125rem; text-align: center !important;\"\r\n [style.color]=\"selectCategoryId === category.categoryId ? (styles?.background?.accentColor) : ''\">{{\r\n category.categoryName | titlecase }}</span>\r\n </div>\r\n </ng-container>\r\n </section>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow && categoryList?.length\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"showRightArrow && categoryList?.length\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </ng-container>\r\n <section class=\"product-list position-relative\"\r\n [style.borderTopLeftRadius.px]='(selectCategoryId === categoryList?.[0]?.categoryId) ? 0 : 8' #container\r\n *ngIf=\"dataList.length\" [style.backgroundColor]=\"styles?.background?.accentColor\">\r\n <section class=\"d-flex overflow-scroll\" id=\"productScrollBar\" *ngIf=\"!apiLoading\">\r\n <ng-container *ngFor=\"let product of dataList\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\"\r\n [isScrollable]=\"true\"></simpo-small-product-listing>\r\n </ng-container>\r\n </section>\r\n <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\r\n </section>\r\n </section>\r\n </section>\r\n\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>\r\n<ng-template #loadingTemplate>\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n</ng-template>", styles: [".total-container{height:auto;position:relative}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.d-block{display:block!important}.category-tag{padding:1rem .3rem;height:105px;width:fit-content;border-top-left-radius:10px;border-top-right-radius:10px;cursor:pointer;border-top:8px solid transparent}.product-list{padding:40px 20px;border-radius:8px}.adjustPosition{position:relative!important;left:-15px!important;width:108%!important}.overflow-scroll{overflow-x:auto}div[class*=arrow]{background-color:#fff;color:#000;padding:5px;border-radius:50%;position:absolute;top:50%;display:flex;align-items:center;justify-content:center;z-index:100;cursor:pointer;box-shadow:#63636333 0 2px 8px}.left-arrow{left:10px}.right-arrow{right:10px}#productScrollBar{scroll-behavior:smooth}@media screen and (max-width: 475px){.padding-1{padding-left:1rem;padding-right:1rem}}\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: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable", "isCategoryProductList", "customClass", "index"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { 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: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: CardSkeletonLoaderComponent, selector: "simpo-card-skeleton-loader", inputs: ["count", "showTitles"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }] }); }
23301
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CategoryProductComponent, isStandalone: true, selector: "simpo-category-product", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\"\r\n [simpoBackground]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n <section class=\"container-fluid d-block\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [spacingHorizontal]=\"getSpacingLayout\" [simpoOverlay]=\"styles?.background\">\r\n <div *ngFor=\"let item of data?.content?.inputText\">\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <section class=\"m-auto position-relative w-100\" [ngClass]=\"{'adjustPosition': isMobile}\">\r\n <section class=\"d-flex\">\r\n <ng-container *ngFor=\"let category of categoryList; let idx = index\">\r\n <div class=\"d-flex flex-column align-items-center category-tag position-relative\" style=\"gap: 5px;\"\r\n [style.backgroundColor]=\"selectCategoryId === category.categoryId ? getSupportingColor(styles?.background?.accentColor ?? '#000000') : ''\"\r\n [style.borderColor]=\"selectCategoryId == category.categoryId ? styles?.background?.accentColor : ''\"\r\n (click)=\"selectCategory(category.categoryId)\">\r\n <img [src]=\"category.imgUrl[0]\" alt=\"\" height=\"30px\" width=\"30px\" style=\"border-radius: 50%;\">\r\n <span class=\"trim-text\" style=\"font-size: .8125rem; text-align: center !important;\"\r\n [style.color]=\"selectCategoryId === category.categoryId ? (styles?.background?.accentColor) : ''\">{{\r\n category.categoryName | titlecase }}</span>\r\n </div>\r\n </ng-container>\r\n </section>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow && categoryList?.length\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"showRightArrow && categoryList?.length\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </ng-container>\r\n <section class=\"product-list position-relative\"\r\n [style.borderTopLeftRadius.px]='(selectCategoryId === categoryList?.[0]?.categoryId) ? 0 : 8' #container\r\n *ngIf=\"dataList.length\" [style.backgroundColor]=\"styles?.background?.accentColor\">\r\n <section class=\"d-flex\" id=\"productScrollBar\" *ngIf=\"!apiLoading\"\r\n [ngClass]=\"{'overflow-scroll' : styles?.direction === 'ROW' , 'flex-wrap': styles?.direction === 'COLUMN'}\">\r\n <ng-container *ngFor=\"let product of dataList\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\"\r\n [isScrollable]=\"true\"></simpo-small-product-listing>\r\n </ng-container>\r\n </section>\r\n <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\r\n </section>\r\n </section>\r\n </section>\r\n\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>\r\n<ng-template #loadingTemplate>\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n</ng-template>", styles: [".total-container{height:auto;position:relative}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.d-block{display:block!important}.category-tag{padding:1rem .3rem;height:105px;width:fit-content;border-top-left-radius:10px;border-top-right-radius:10px;cursor:pointer;border-top:8px solid transparent}.product-list{padding:40px 20px;border-radius:8px}.adjustPosition{position:relative!important;left:-15px!important;width:108%!important}.overflow-scroll{overflow-x:auto}div[class*=arrow]{background-color:#fff;color:#000;padding:5px;border-radius:50%;position:absolute;top:50%;display:flex;align-items:center;justify-content:center;z-index:100;cursor:pointer;box-shadow:#63636333 0 2px 8px}.left-arrow{left:10px}.right-arrow{right:10px}#productScrollBar{scroll-behavior:smooth}@media screen and (max-width: 475px){.padding-1{padding-left:1rem;padding-right:1rem}}\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: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable", "isCategoryProductList", "customClass", "index"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { 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: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: CardSkeletonLoaderComponent, selector: "simpo-card-skeleton-loader", inputs: ["count", "showTitles"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label", "type"], outputs: ["valueChange"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }] }); }
23287
23302
  }
23288
23303
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CategoryProductComponent, decorators: [{
23289
23304
  type: Component,
@@ -23302,7 +23317,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
23302
23317
  CardSkeletonLoaderComponent, SvgDividerComponent, TextEditorComponent,
23303
23318
  OverlayDirective,
23304
23319
  BorderDirective
23305
- ], template: "<section class=\"total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\"\r\n [simpoBackground]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n <section class=\"container-fluid d-block\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [spacingHorizontal]=\"getSpacingLayout\" [simpoOverlay]=\"styles?.background\">\r\n <div *ngFor=\"let item of data?.content?.inputText\">\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <section class=\"m-auto position-relative w-100\" [ngClass]=\"{'adjustPosition': isMobile}\">\r\n <section class=\"d-flex\">\r\n <ng-container *ngFor=\"let category of categoryList; let idx = index\">\r\n <div class=\"d-flex flex-column align-items-center category-tag position-relative\" style=\"gap: 5px;\"\r\n [style.backgroundColor]=\"selectCategoryId === category.categoryId ? getSupportingColor(styles?.background?.accentColor ?? '#000000') : ''\"\r\n [style.borderColor]=\"selectCategoryId == category.categoryId ? styles?.background?.accentColor : ''\"\r\n (click)=\"selectCategory(category.categoryId)\">\r\n <img [src]=\"category.imgUrl[0]\" alt=\"\" height=\"30px\" width=\"30px\" style=\"border-radius: 50%;\">\r\n <span class=\"trim-text\" style=\"font-size: .8125rem; text-align: center !important;\"\r\n [style.color]=\"selectCategoryId === category.categoryId ? (styles?.background?.accentColor) : ''\">{{\r\n category.categoryName | titlecase }}</span>\r\n </div>\r\n </ng-container>\r\n </section>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow && categoryList?.length\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"showRightArrow && categoryList?.length\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </ng-container>\r\n <section class=\"product-list position-relative\"\r\n [style.borderTopLeftRadius.px]='(selectCategoryId === categoryList?.[0]?.categoryId) ? 0 : 8' #container\r\n *ngIf=\"dataList.length\" [style.backgroundColor]=\"styles?.background?.accentColor\">\r\n <section class=\"d-flex overflow-scroll\" id=\"productScrollBar\" *ngIf=\"!apiLoading\">\r\n <ng-container *ngFor=\"let product of dataList\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\"\r\n [isScrollable]=\"true\"></simpo-small-product-listing>\r\n </ng-container>\r\n </section>\r\n <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\r\n </section>\r\n </section>\r\n </section>\r\n\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>\r\n<ng-template #loadingTemplate>\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n</ng-template>", styles: [".total-container{height:auto;position:relative}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.d-block{display:block!important}.category-tag{padding:1rem .3rem;height:105px;width:fit-content;border-top-left-radius:10px;border-top-right-radius:10px;cursor:pointer;border-top:8px solid transparent}.product-list{padding:40px 20px;border-radius:8px}.adjustPosition{position:relative!important;left:-15px!important;width:108%!important}.overflow-scroll{overflow-x:auto}div[class*=arrow]{background-color:#fff;color:#000;padding:5px;border-radius:50%;position:absolute;top:50%;display:flex;align-items:center;justify-content:center;z-index:100;cursor:pointer;box-shadow:#63636333 0 2px 8px}.left-arrow{left:10px}.right-arrow{right:10px}#productScrollBar{scroll-behavior:smooth}@media screen and (max-width: 475px){.padding-1{padding-left:1rem;padding-right:1rem}}\n"] }]
23320
+ ], template: "<section class=\"total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\"\r\n [simpoBackground]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n <section class=\"container-fluid d-block\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [spacingHorizontal]=\"getSpacingLayout\" [simpoOverlay]=\"styles?.background\">\r\n <div *ngFor=\"let item of data?.content?.inputText\">\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div> -->\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <section class=\"m-auto position-relative w-100\" [ngClass]=\"{'adjustPosition': isMobile}\">\r\n <section class=\"d-flex\">\r\n <ng-container *ngFor=\"let category of categoryList; let idx = index\">\r\n <div class=\"d-flex flex-column align-items-center category-tag position-relative\" style=\"gap: 5px;\"\r\n [style.backgroundColor]=\"selectCategoryId === category.categoryId ? getSupportingColor(styles?.background?.accentColor ?? '#000000') : ''\"\r\n [style.borderColor]=\"selectCategoryId == category.categoryId ? styles?.background?.accentColor : ''\"\r\n (click)=\"selectCategory(category.categoryId)\">\r\n <img [src]=\"category.imgUrl[0]\" alt=\"\" height=\"30px\" width=\"30px\" style=\"border-radius: 50%;\">\r\n <span class=\"trim-text\" style=\"font-size: .8125rem; text-align: center !important;\"\r\n [style.color]=\"selectCategoryId === category.categoryId ? (styles?.background?.accentColor) : ''\">{{\r\n category.categoryName | titlecase }}</span>\r\n </div>\r\n </ng-container>\r\n </section>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow && categoryList?.length\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"showRightArrow && categoryList?.length\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </ng-container>\r\n <section class=\"product-list position-relative\"\r\n [style.borderTopLeftRadius.px]='(selectCategoryId === categoryList?.[0]?.categoryId) ? 0 : 8' #container\r\n *ngIf=\"dataList.length\" [style.backgroundColor]=\"styles?.background?.accentColor\">\r\n <section class=\"d-flex\" id=\"productScrollBar\" *ngIf=\"!apiLoading\"\r\n [ngClass]=\"{'overflow-scroll' : styles?.direction === 'ROW' , 'flex-wrap': styles?.direction === 'COLUMN'}\">\r\n <ng-container *ngFor=\"let product of dataList\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\"\r\n [isScrollable]=\"true\"></simpo-small-product-listing>\r\n </ng-container>\r\n </section>\r\n <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\r\n </section>\r\n </section>\r\n </section>\r\n\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>\r\n<ng-template #loadingTemplate>\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n</ng-template>", styles: [".total-container{height:auto;position:relative}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.d-block{display:block!important}.category-tag{padding:1rem .3rem;height:105px;width:fit-content;border-top-left-radius:10px;border-top-right-radius:10px;cursor:pointer;border-top:8px solid transparent}.product-list{padding:40px 20px;border-radius:8px}.adjustPosition{position:relative!important;left:-15px!important;width:108%!important}.overflow-scroll{overflow-x:auto}div[class*=arrow]{background-color:#fff;color:#000;padding:5px;border-radius:50%;position:absolute;top:50%;display:flex;align-items:center;justify-content:center;z-index:100;cursor:pointer;box-shadow:#63636333 0 2px 8px}.left-arrow{left:10px}.right-arrow{right:10px}#productScrollBar{scroll-behavior:smooth}@media screen and (max-width: 475px){.padding-1{padding-left:1rem;padding-right:1rem}}\n"] }]
23306
23321
  }], ctorParameters: () => [{ type: RestService }, { type: CartService }, { type: EventsService }], propDecorators: { data: [{
23307
23322
  type: Input
23308
23323
  }], index: [{