simpo-component-library 1.5.27 → 1.5.31

package/fesm2022/simpo-component-library.mjs

@@ -112,6 +112,7 @@ class EventsService {
         this.placeOrder = new EventEmitter();
         this.featureCollectionList = new EventEmitter();
         this.environmentType = new EventEmitter();
+        this.categoryProductList = new EventEmitter();
         this.showLoadingScreen = new EventEmitter();
         this.cashFreeEvent = new EventEmitter();
         this.addressAddedIdx = new EventEmitter();
@@ -3081,6 +3082,12 @@ class RestService {
         // collectionId = "1ef5b924-66ad-68f5-b931-2bd654300b1f"
         return this.http.get(this.BASE_URL + `ecommerce/product/collection/id?collectionId=${collectionId || ''}&subIndustryId=${subIndustryId || ''}&isEndUser=true`).pipe(map((response) => response.data?.map((product) => new Product(product))));
     }
+    // getCollectionById(collectionId: string) {
+    //     return this.http.get(this.BASE_URL + `product/category/id?categoryId=1ef6944e-8483-6fc5-92d7-5bc8a38cc5b1`)
+    // }
+    getCategoriesByCollectionId(collectionId) {
+        return this.http.get(this.BASE_URL + `ecommerce/inventory/category/collectionId?collectionId=${collectionId}`).pipe(map((response) => response.data?.map((category) => new Category(category))));
+    }
     getProductDetails(productId = null) {
         const payload = {
             pageNo: 0,
@@ -5748,9 +5755,9 @@ class FeaturedCategoryComponent extends BaseSection {
         return window.innerWidth <= 475;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FeaturedCategoryComponent, deps: [{ token: PLATFORM_ID }, { token: i2$3.Router }, { token: RestService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FeaturedCategoryComponent, isStandalone: true, selector: "simpo-featured-category", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\r\n    [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\r\n    <div [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n      [simpoAnimation]=\"styles?.animation\">\r\n      <div *ngFor=\"let item of content?.inputText\">\r\n        <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n        </div>\r\n      </div>\r\n      <img loading=\"lazy\" src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n        class=\"span-img mt-15\">\r\n      <div class=\"category-parent\">\r\n        <div *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\" (click)=\"redirectToListPage(data.categoryName)\">\r\n          <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"category-image\">\r\n          <div class=\"category-name body-large\">{{data.categoryName}}</div>\r\n        </div>\r\n      </div>\r\n    </div>\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\r\n  </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" 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", styles: [".mt-15{margin-top:15px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.category-parent{display:flex;margin-top:25px;gap:25px;overflow-x:scroll;justify-content:center;cursor:pointer}.category-image{height:230px;width:230px;border-radius:100%;margin-bottom:15px}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important;padding-top:5px!important;padding-bottom:5px!important}.category-image{height:100px;width:100px}.header{gap:7px}.category-parent{gap:15px;margin-top:15px;padding-left:0!important;padding-right:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { 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: "component", type: i13$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FeaturedCategoryComponent, isStandalone: true, selector: "simpo-featured-category", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\r\n    [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\r\n    <div [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n      [simpoAnimation]=\"styles?.animation\">\r\n      <div *ngFor=\"let item of content?.inputText\">\r\n        <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n        </div>\r\n      </div>\r\n      <img loading=\"lazy\" src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n        class=\"span-img mt-15\">\r\n      <div class=\"category-parent\"  [ngClass]=\"{'flex-wrap': styles?.direction == 'ROW'}\">\r\n        <div *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\" (click)=\"redirectToListPage(data.categoryName)\">\r\n          <img [style.borderRadius.px]=\"styles?.border?.radius\" [style.height.px]=\"styles?.containerHeight\" [style.width.px]=\"styles?.containerWidth\" loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"category-image\">\r\n          <div class=\"category-name body-large\">{{data.categoryName}}</div>\r\n        </div>\r\n      </div>\r\n    </div>\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\r\n  </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" 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", styles: [".mt-15{margin-top:15px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.category-parent{display:flex;margin-top:25px;gap:25px;overflow-x:scroll;justify-content:center;cursor:pointer}.category-image{height:230px;width:230px;margin-bottom:15px}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important;padding-top:5px!important;padding-bottom:5px!important}.category-image{height:100px;width:100px}.header{gap:7px}.category-parent{gap:15px;margin-top:15px;padding-left:0!important;padding-right:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { 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: "component", type: i13$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: 
                 //directive
-                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }] }); }
+                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FeaturedCategoryComponent, decorators: [{
             type: Component,
@@ -5766,7 +5773,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         OverlayDirective,
                         TextBackgroundDirectiveDirective,
                         ColorDirective
-                    ], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\r\n    [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\r\n    <div [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n      [simpoAnimation]=\"styles?.animation\">\r\n      <div *ngFor=\"let item of content?.inputText\">\r\n        <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n        </div>\r\n      </div>\r\n      <img loading=\"lazy\" src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n        class=\"span-img mt-15\">\r\n      <div class=\"category-parent\">\r\n        <div *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\" (click)=\"redirectToListPage(data.categoryName)\">\r\n          <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"category-image\">\r\n          <div class=\"category-name body-large\">{{data.categoryName}}</div>\r\n        </div>\r\n      </div>\r\n    </div>\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\r\n  </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" 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", styles: [".mt-15{margin-top:15px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.category-parent{display:flex;margin-top:25px;gap:25px;overflow-x:scroll;justify-content:center;cursor:pointer}.category-image{height:230px;width:230px;border-radius:100%;margin-bottom:15px}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important;padding-top:5px!important;padding-bottom:5px!important}.category-image{height:100px;width:100px}.header{gap:7px}.category-parent{gap:15px;margin-top:15px;padding-left:0!important;padding-right:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"] }]
+                    ], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\r\n    [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\r\n    <div [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n      [simpoAnimation]=\"styles?.animation\">\r\n      <div *ngFor=\"let item of content?.inputText\">\r\n        <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n        </div>\r\n      </div>\r\n      <img loading=\"lazy\" src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n        class=\"span-img mt-15\">\r\n      <div class=\"category-parent\"  [ngClass]=\"{'flex-wrap': styles?.direction == 'ROW'}\">\r\n        <div *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\" (click)=\"redirectToListPage(data.categoryName)\">\r\n          <img [style.borderRadius.px]=\"styles?.border?.radius\" [style.height.px]=\"styles?.containerHeight\" [style.width.px]=\"styles?.containerWidth\" loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"category-image\">\r\n          <div class=\"category-name body-large\">{{data.categoryName}}</div>\r\n        </div>\r\n      </div>\r\n    </div>\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\r\n  </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" 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", styles: [".mt-15{margin-top:15px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.category-parent{display:flex;margin-top:25px;gap:25px;overflow-x:scroll;justify-content:center;cursor:pointer}.category-image{height:230px;width:230px;margin-bottom:15px}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important;padding-top:5px!important;padding-bottom:5px!important}.category-image{height:100px;width:100px}.header{gap:7px}.category-parent{gap:15px;margin-top:15px;padding-left:0!important;padding-right:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"] }]
         }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -8164,30 +8171,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                 type: Input
             }] } });
 
-class ProductCategoryListComponent extends BaseSection {
-    constructor(restService, cartService) {
-        super();
-        this.restService = restService;
+class SmallProductListingComponent {
+    constructor(cartService) {
         this.cartService = cartService;
-        this.categories = [];
-        this.productList = [];
-        this.USER_CART = [];
-        this.selectedCategory = null;
-    }
-    ngOnInit() {
-        this.getAllCategories();
-    }
-    getAllCategories() {
-        this.restService.getAllCategories().subscribe((response) => {
-            this.categories = response;
-            this.selectCategory(this.categories[0]);
-        });
-    }
-    selectCategory(category) {
-        this.selectedCategory = category;
-        this.restService.getProductByCategoryId(this.selectedCategory.categoryId).subscribe((response) => {
-            this.productList = response.data;
-        });
+        this.USER_CART = null;
     }
     addItemToCart(product, type) {
         // if (this.isItemOutOfStock(product)) {
@@ -8241,71 +8228,53 @@ class ProductCategoryListComponent extends BaseSection {
     get currency() {
         return BUSINESS_CONSTANTS.CURRENCY;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductCategoryListComponent, deps: [{ token: RestService }, { token: CartService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductCategoryListComponent, isStandalone: true, selector: "simpo-product-category-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section class=\"d-flex\">\r\n    <div class=\"filter-panel\">\r\n        <ng-container *ngFor=\"let category of categories\">\r\n            <div class=\"category\" [ngClass]=\"{'category-selected': category.categoryId == selectedCategory?.categoryId}\" (click)=\"selectCategory(category)\">\r\n                <div class=\"product-img\">\r\n                    <img [src]=\"category.imgUrl?.[0]\" alt=\"\">\r\n                </div>\r\n                <span>{{ category.categoryName }}</span>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"product-list-container\">\r\n        <h2>Buy {{ selectedCategory?.categoryName | titlecase }} Online</h2>\r\n        \r\n        <section class=\"d-flex product-list\">\r\n            <ng-container *ngFor=\"let product of productList\">\r\n                <div class=\"product\" [style.opacity]=\"product?.itemInventory?.openingStock == 0 ? 0.5 : 1\">\r\n                    <div class=\"prod-img\">\r\n                        <img [src]=\"product.itemImages?.[0]?.imgUrl\" alt=\"\">\r\n                        <div class=\"discount\" [style.backgroundColor]=\"data?.styles?.background?.accentColor\" style=\"color: white;\" *ngIf=\"product.price?.sellingPrice != product.price?.discountedPrice\">{{getPercentage(product)}}% off</div>\r\n                    </div>\r\n                    <div class=\"d-flex flex-column p-2\">\r\n                        <span>{{product.name}}</span>\r\n                        <span class=\"m-1\">\r\n                            <span><span [innerHTML]=\"currency\"></span> {{product.price.discountedPrice}}</span>\r\n                            <span class=\"strike-through\"><span [innerHTML]=\"currency\"></span> {{product.price.sellingPrice}}</span>\r\n                        </span>\r\n                        <div class=\"add-to-cart\" [ngClass]=\"{'justify-content-between p-0': product.quantity, 'justify-content-center': !product.quantity}\">\r\n                            <ng-container *ngIf=\"product?.itemInventory?.openingStock\">\r\n                                <ng-container *ngIf=\"!product.quantity\">\r\n                                    <span (click)=\"addItemToCart(product, 'ADD')\">Add to Cart</span>\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"product.quantity\">\r\n                                    <span class=\"quantity-btn\" (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n                                    <span class=\"quantity\">{{product.quantity}}</span>\r\n                                    <span class=\"quantity-btn\" (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"product?.itemInventory?.openingStock == 0\">\r\n                                <span (click)=\"addItemToCart(product, 'ADD')\" class=\"d-flex align-items-center\">\r\n                                    <mat-icon>notification_important</mat-icon>\r\n                                    <span class=\"ml-2\">Notify</span>\r\n                                </span>\r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </section>\r\n    </div>\r\n</section>", styles: [".filter-panel{border-right:2px solid rgba(211,211,211,.297);width:25%}.category{display:flex;align-items:center;gap:10px;padding:10px;border-left:5px solid transparent;cursor:pointer}.category-selected{border-left:5px solid #ef4c7b;background-color:#ef4c7b1f}.product-img{height:45px;width:45px;padding:5px;border-radius:50%;background-color:#d3d3d3}.product-img img{height:100%;width:100%;border-radius:50%}.product-list-container{padding:40px 20px;width:80%;background-color:#f5eaff}.product-list{overflow:auto;flex-wrap:wrap;height:90vh}.product{position:relative;display:flex;flex-direction:column;cursor:pointer;border-radius:10px;overflow:hidden;min-width:195px;max-width:195px;margin:10px;background-color:#fff}.product .prod-img{position:relative;height:200px;width:100%;overflow:hidden}.product .prod-img img{height:100%;width:100%;object-fit:cover}.product img:hover{-webkit-animation:scale-up-center .2s linear both;animation:scale-up-center .2s linear both}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid #EF4C7B;border-radius:5px;color:#ef4c7b;padding:5px;text-align:center;display:flex;align-items:center}.add-to-cart .quantity-btn{background-color:#fb8dac7d;padding:5px}.add-to-cart .quantity{color:#ef4c7b}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@media screen and (max-width: 475px){.product-list-container{padding:5px!important}.category{flex-direction:column!important;text-align:center!important}.product{min-width:135px!important;max-width:135px!important;margin-left:0!important;margin-right:8px!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SmallProductListingComponent, deps: [{ token: CartService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: SmallProductListingComponent, isStandalone: true, selector: "simpo-small-product-listing", inputs: { product: "product", data: "data" }, ngImport: i0, template: "<div class=\"product\" [style.opacity]=\"product?.itemInventory?.openingStock == 0 ? 0.5 : 1\">\r\n    <div class=\"prod-img\">\r\n        <img [src]=\"product.itemImages?.[0]?.imgUrl\" alt=\"\">\r\n        <div class=\"discount\" [style.backgroundColor]=\"data?.styles?.background?.color\" style=\"color: white;\" *ngIf=\"product.price?.sellingPrice != product.price?.discountedPrice\">{{getPercentage(product)}}% off</div>\r\n    </div>\r\n    <div class=\"d-flex flex-column p-2\">\r\n        <span>{{product.name}}</span>\r\n        <span class=\"m-1\">\r\n            <span><span [innerHTML]=\"currency\"></span> {{product.price.discountedPrice}}</span>\r\n            <span class=\"strike-through\"><span [innerHTML]=\"currency\"></span> {{product.price.sellingPrice}}</span>\r\n        </span>\r\n        <div class=\"add-to-cart\" [ngClass]=\"{'justify-content-between p-0': product.quantity, 'justify-content-center': !product.quantity}\">\r\n            <ng-container *ngIf=\"product?.itemInventory?.openingStock\">\r\n                <ng-container *ngIf=\"!product.quantity\">\r\n                    <span (click)=\"addItemToCart(product, 'ADD')\">Add to Cart</span>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"product.quantity\">\r\n                    <span class=\"quantity-btn\" (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n                    <span class=\"quantity\">{{product.quantity}}</span>\r\n                    <span class=\"quantity-btn\" (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"product?.itemInventory?.openingStock == 0\">\r\n                <span (click)=\"addItemToCart(product, 'ADD')\" class=\"d-flex align-items-center\">\r\n                    <mat-icon>notification_important</mat-icon>\r\n                    <span class=\"ml-2\">Notify</span>\r\n                </span>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".product{position:relative;display:flex;flex-direction:column;cursor:pointer;margin-right:10px;border-radius:10px;overflow:hidden;min-width:195px;max-width:195px;height:320px;background-color:#fff}.product .prod-img{position:relative;height:60%;width:100%;overflow:hidden}.product .prod-img img{height:100%;width:100%;object-fit:cover}.product img:hover{-webkit-animation:scale-up-center .2s linear both;animation:scale-up-center .2s linear both}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid #EF4C7B;border-radius:5px;color:#ef4c7b;padding:5px;text-align:center;display:flex;align-items:center}.add-to-cart .quantity-btn{background-color:#fb8dac7d;padding:5px}.add-to-cart .quantity{color:#ef4c7b}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductCategoryListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SmallProductListingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-product-category-list', standalone: true, imports: [
+            args: [{ selector: 'simpo-small-product-listing', standalone: true, imports: [
                         CommonModule,
-                        MatIcon,
-                        SimpoComponentModule
-                    ], template: "<section class=\"d-flex\">\r\n    <div class=\"filter-panel\">\r\n        <ng-container *ngFor=\"let category of categories\">\r\n            <div class=\"category\" [ngClass]=\"{'category-selected': category.categoryId == selectedCategory?.categoryId}\" (click)=\"selectCategory(category)\">\r\n                <div class=\"product-img\">\r\n                    <img [src]=\"category.imgUrl?.[0]\" alt=\"\">\r\n                </div>\r\n                <span>{{ category.categoryName }}</span>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"product-list-container\">\r\n        <h2>Buy {{ selectedCategory?.categoryName | titlecase }} Online</h2>\r\n        \r\n        <section class=\"d-flex product-list\">\r\n            <ng-container *ngFor=\"let product of productList\">\r\n                <div class=\"product\" [style.opacity]=\"product?.itemInventory?.openingStock == 0 ? 0.5 : 1\">\r\n                    <div class=\"prod-img\">\r\n                        <img [src]=\"product.itemImages?.[0]?.imgUrl\" alt=\"\">\r\n                        <div class=\"discount\" [style.backgroundColor]=\"data?.styles?.background?.accentColor\" style=\"color: white;\" *ngIf=\"product.price?.sellingPrice != product.price?.discountedPrice\">{{getPercentage(product)}}% off</div>\r\n                    </div>\r\n                    <div class=\"d-flex flex-column p-2\">\r\n                        <span>{{product.name}}</span>\r\n                        <span class=\"m-1\">\r\n                            <span><span [innerHTML]=\"currency\"></span> {{product.price.discountedPrice}}</span>\r\n                            <span class=\"strike-through\"><span [innerHTML]=\"currency\"></span> {{product.price.sellingPrice}}</span>\r\n                        </span>\r\n                        <div class=\"add-to-cart\" [ngClass]=\"{'justify-content-between p-0': product.quantity, 'justify-content-center': !product.quantity}\">\r\n                            <ng-container *ngIf=\"product?.itemInventory?.openingStock\">\r\n                                <ng-container *ngIf=\"!product.quantity\">\r\n                                    <span (click)=\"addItemToCart(product, 'ADD')\">Add to Cart</span>\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"product.quantity\">\r\n                                    <span class=\"quantity-btn\" (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n                                    <span class=\"quantity\">{{product.quantity}}</span>\r\n                                    <span class=\"quantity-btn\" (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"product?.itemInventory?.openingStock == 0\">\r\n                                <span (click)=\"addItemToCart(product, 'ADD')\" class=\"d-flex align-items-center\">\r\n                                    <mat-icon>notification_important</mat-icon>\r\n                                    <span class=\"ml-2\">Notify</span>\r\n                                </span>\r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </section>\r\n    </div>\r\n</section>", styles: [".filter-panel{border-right:2px solid rgba(211,211,211,.297);width:25%}.category{display:flex;align-items:center;gap:10px;padding:10px;border-left:5px solid transparent;cursor:pointer}.category-selected{border-left:5px solid #ef4c7b;background-color:#ef4c7b1f}.product-img{height:45px;width:45px;padding:5px;border-radius:50%;background-color:#d3d3d3}.product-img img{height:100%;width:100%;border-radius:50%}.product-list-container{padding:40px 20px;width:80%;background-color:#f5eaff}.product-list{overflow:auto;flex-wrap:wrap;height:90vh}.product{position:relative;display:flex;flex-direction:column;cursor:pointer;border-radius:10px;overflow:hidden;min-width:195px;max-width:195px;margin:10px;background-color:#fff}.product .prod-img{position:relative;height:200px;width:100%;overflow:hidden}.product .prod-img img{height:100%;width:100%;object-fit:cover}.product img:hover{-webkit-animation:scale-up-center .2s linear both;animation:scale-up-center .2s linear both}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid #EF4C7B;border-radius:5px;color:#ef4c7b;padding:5px;text-align:center;display:flex;align-items:center}.add-to-cart .quantity-btn{background-color:#fb8dac7d;padding:5px}.add-to-cart .quantity{color:#ef4c7b}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@media screen and (max-width: 475px){.product-list-container{padding:5px!important}.category{flex-direction:column!important;text-align:center!important}.product{min-width:135px!important;max-width:135px!important;margin-left:0!important;margin-right:8px!important}}\n"] }]
-        }], ctorParameters: () => [{ type: RestService }, { type: CartService }], propDecorators: { responseData: [{
+                        MatIcon
+                    ], template: "<div class=\"product\" [style.opacity]=\"product?.itemInventory?.openingStock == 0 ? 0.5 : 1\">\r\n    <div class=\"prod-img\">\r\n        <img [src]=\"product.itemImages?.[0]?.imgUrl\" alt=\"\">\r\n        <div class=\"discount\" [style.backgroundColor]=\"data?.styles?.background?.color\" style=\"color: white;\" *ngIf=\"product.price?.sellingPrice != product.price?.discountedPrice\">{{getPercentage(product)}}% off</div>\r\n    </div>\r\n    <div class=\"d-flex flex-column p-2\">\r\n        <span>{{product.name}}</span>\r\n        <span class=\"m-1\">\r\n            <span><span [innerHTML]=\"currency\"></span> {{product.price.discountedPrice}}</span>\r\n            <span class=\"strike-through\"><span [innerHTML]=\"currency\"></span> {{product.price.sellingPrice}}</span>\r\n        </span>\r\n        <div class=\"add-to-cart\" [ngClass]=\"{'justify-content-between p-0': product.quantity, 'justify-content-center': !product.quantity}\">\r\n            <ng-container *ngIf=\"product?.itemInventory?.openingStock\">\r\n                <ng-container *ngIf=\"!product.quantity\">\r\n                    <span (click)=\"addItemToCart(product, 'ADD')\">Add to Cart</span>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"product.quantity\">\r\n                    <span class=\"quantity-btn\" (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n                    <span class=\"quantity\">{{product.quantity}}</span>\r\n                    <span class=\"quantity-btn\" (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"product?.itemInventory?.openingStock == 0\">\r\n                <span (click)=\"addItemToCart(product, 'ADD')\" class=\"d-flex align-items-center\">\r\n                    <mat-icon>notification_important</mat-icon>\r\n                    <span class=\"ml-2\">Notify</span>\r\n                </span>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".product{position:relative;display:flex;flex-direction:column;cursor:pointer;margin-right:10px;border-radius:10px;overflow:hidden;min-width:195px;max-width:195px;height:320px;background-color:#fff}.product .prod-img{position:relative;height:60%;width:100%;overflow:hidden}.product .prod-img img{height:100%;width:100%;object-fit:cover}.product img:hover{-webkit-animation:scale-up-center .2s linear both;animation:scale-up-center .2s linear both}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid #EF4C7B;border-radius:5px;color:#ef4c7b;padding:5px;text-align:center;display:flex;align-items:center}.add-to-cart .quantity-btn{background-color:#fb8dac7d;padding:5px}.add-to-cart .quantity{color:#ef4c7b}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}\n"] }]
+        }], ctorParameters: () => [{ type: CartService }], propDecorators: { product: [{
                 type: Input
             }], data: [{
                 type: Input
-            }], index: [{
-                type: Input
-            }], edit: [{
-                type: Input
-            }], delete: [{
-                type: Input
             }] } });
 
-class CategoryProductComponent extends BaseSection {
-    constructor(restService, cartService, _eventService, activatedRoute) {
+class ProductCategoryListComponent extends BaseSection {
+    constructor(restService, cartService, activatedRoute) {
         super();
         this.restService = restService;
         this.cartService = cartService;
-        this._eventService = _eventService;
         this.activatedRoute = activatedRoute;
-        this.categories = [
-            { name: "Kajal", imgUrl: "" },
-            { name: "BB/CC Cream", imgUrl: "" },
-            { name: "Fake Nails", imgUrl: "" },
-            { name: "Eye Liner", imgUrl: "" },
-            { name: "Lipstick", imgUrl: "" },
-            { name: "Primer", imgUrl: "" },
-            { name: "Compact Powder", imgUrl: "" },
-        ];
-        this.selectCategoryId = null;
-        this.categoryList = [];
-        this.USER_CART = null;
+        this.categories = [];
+        this.productList = [];
+        this.USER_CART = [];
+        this.selectedCategory = null;
         this.collectionId = null;
-        this.featureProductData = null;
-        this.dataList = [];
     }
     ngOnInit() {
-        this.featureProductData = new FeaturedProductModal(this.data);
-        this.styles = this.data?.styles;
-        this.content = this.data?.content;
         this.activatedRoute.queryParams.subscribe((qParam) => {
             this.collectionId = qParam["collectionId"];
         });
-        this.getAllCategories(); // should be replaced by getAllCategories by collectionId
+        this.getAllCategoriesById();
     }
-    getAllCategories() {
-        this.restService.getAllCategories().subscribe((response) => {
-            this.categoryList = response;
-            this.selectCategoryId = this.categoryList?.[0]?.categoryId;
-            this.selectCategory(this.selectCategoryId);
+    ngOnDestroy() {
+    }
+    getAllCategoriesById() {
+        if (!this.collectionId)
+            return;
+        this.restService.getCategoriesByCollectionId(this.collectionId).subscribe((response) => {
+            this.categories = response;
+            this.selectCategory(this.categories[0]);
         });
     }
-    selectCategory(categoryId) {
-        this.selectCategoryId = categoryId;
-        this.restService.getProductByCategoryId(categoryId).subscribe((response) => {
-            this.dataList = response.data;
+    selectCategory(category) {
+        this.selectedCategory = category;
+        this.restService.getProductByCategoryId(this.selectedCategory.categoryId).subscribe((response) => {
+            this.productList = response.data;
         });
     }
     addItemToCart(product, type) {
@@ -8360,6 +8329,110 @@ class CategoryProductComponent extends BaseSection {
     get currency() {
         return BUSINESS_CONSTANTS.CURRENCY;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductCategoryListComponent, deps: [{ token: RestService }, { token: CartService }, { token: i2$3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductCategoryListComponent, isStandalone: true, selector: "simpo-product-category-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section class=\"d-flex\">\r\n    <div class=\"filter-panel\">\r\n        <ng-container *ngFor=\"let category of categories\">\r\n            <div class=\"category\" [ngClass]=\"{'category-selected': category.categoryId == selectedCategory?.categoryId}\" (click)=\"selectCategory(category)\">\r\n                <div class=\"product-img\">\r\n                    <img [src]=\"category.imgUrl?.[0]\" alt=\"\">\r\n                </div>\r\n                <span>{{ category.categoryName }}</span>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"product-list-container\">\r\n        <h2>Buy {{ selectedCategory?.categoryName | titlecase }} Online</h2>\r\n        \r\n        <section class=\"d-flex product-list\">\r\n            <ng-container *ngFor=\"let product of productList\">\r\n                <simpo-small-product-listing [product]=\"product\" [data]=\"data\"></simpo-small-product-listing>   \r\n            </ng-container>\r\n        </section>\r\n    </div>\r\n</section>", styles: [".filter-panel{border-right:2px solid rgba(211,211,211,.297);width:25%}.category{display:flex;align-items:center;gap:10px;padding:10px;border-left:5px solid transparent;cursor:pointer}.category-selected{border-left:5px solid #ef4c7b;background-color:#ef4c7b1f}.product-img{height:45px;width:45px;padding:5px;border-radius:50%;background-color:#d3d3d3}.product-img img{height:100%;width:100%;border-radius:50%}.product-list-container{padding:40px 20px;width:80%;background-color:#f5eaff}.product-list{overflow:auto;flex-wrap:wrap;height:90vh}.product{position:relative;display:flex;flex-direction:column;cursor:pointer;border-radius:10px;overflow:hidden;min-width:195px;max-width:195px;margin:10px;background-color:#fff}.product .prod-img{position:relative;height:200px;width:100%;overflow:hidden}.product .prod-img img{height:100%;width:100%;object-fit:cover}.product img:hover{-webkit-animation:scale-up-center .2s linear both;animation:scale-up-center .2s linear both}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid #EF4C7B;border-radius:5px;color:#ef4c7b;padding:5px;text-align:center;display:flex;align-items:center}.add-to-cart .quantity-btn{background-color:#fb8dac7d;padding:5px}.add-to-cart .quantity{color:#ef4c7b}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@media screen and (max-width: 475px){.product-list-container{padding:5px!important}.category{flex-direction:column!important;text-align:center!important}.product{min-width:135px!important;max-width:135px!important;margin-left:0!important;margin-right:8px!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductCategoryListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-product-category-list', standalone: true, imports: [
+                        CommonModule,
+                        MatIcon,
+                        SimpoComponentModule,
+                        SmallProductListingComponent
+                    ], template: "<section class=\"d-flex\">\r\n    <div class=\"filter-panel\">\r\n        <ng-container *ngFor=\"let category of categories\">\r\n            <div class=\"category\" [ngClass]=\"{'category-selected': category.categoryId == selectedCategory?.categoryId}\" (click)=\"selectCategory(category)\">\r\n                <div class=\"product-img\">\r\n                    <img [src]=\"category.imgUrl?.[0]\" alt=\"\">\r\n                </div>\r\n                <span>{{ category.categoryName }}</span>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"product-list-container\">\r\n        <h2>Buy {{ selectedCategory?.categoryName | titlecase }} Online</h2>\r\n        \r\n        <section class=\"d-flex product-list\">\r\n            <ng-container *ngFor=\"let product of productList\">\r\n                <simpo-small-product-listing [product]=\"product\" [data]=\"data\"></simpo-small-product-listing>   \r\n            </ng-container>\r\n        </section>\r\n    </div>\r\n</section>", styles: [".filter-panel{border-right:2px solid rgba(211,211,211,.297);width:25%}.category{display:flex;align-items:center;gap:10px;padding:10px;border-left:5px solid transparent;cursor:pointer}.category-selected{border-left:5px solid #ef4c7b;background-color:#ef4c7b1f}.product-img{height:45px;width:45px;padding:5px;border-radius:50%;background-color:#d3d3d3}.product-img img{height:100%;width:100%;border-radius:50%}.product-list-container{padding:40px 20px;width:80%;background-color:#f5eaff}.product-list{overflow:auto;flex-wrap:wrap;height:90vh}.product{position:relative;display:flex;flex-direction:column;cursor:pointer;border-radius:10px;overflow:hidden;min-width:195px;max-width:195px;margin:10px;background-color:#fff}.product .prod-img{position:relative;height:200px;width:100%;overflow:hidden}.product .prod-img img{height:100%;width:100%;object-fit:cover}.product img:hover{-webkit-animation:scale-up-center .2s linear both;animation:scale-up-center .2s linear both}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid #EF4C7B;border-radius:5px;color:#ef4c7b;padding:5px;text-align:center;display:flex;align-items:center}.add-to-cart .quantity-btn{background-color:#fb8dac7d;padding:5px}.add-to-cart .quantity{color:#ef4c7b}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@media screen and (max-width: 475px){.product-list-container{padding:5px!important}.category{flex-direction:column!important;text-align:center!important}.product{min-width:135px!important;max-width:135px!important;margin-left:0!important;margin-right:8px!important}}\n"] }]
+        }], ctorParameters: () => [{ type: RestService }, { type: CartService }, { type: i2$3.ActivatedRoute }], propDecorators: { responseData: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], edit: [{
+                type: Input
+            }], delete: [{
+                type: Input
+            }] } });
+
+class CategoryProductComponent extends BaseSection {
+    constructor(restService, cartService, _eventService, activatedRoute) {
+        super();
+        this.restService = restService;
+        this.cartService = cartService;
+        this._eventService = _eventService;
+        this.activatedRoute = activatedRoute;
+        this.selectCategoryId = null;
+        this.categoryList = [];
+        this.USER_CART = null;
+        this.collectionId = null;
+        this.featureProductData = null;
+        this.dataList = [];
+        this.showRightArrow = false;
+        this.showLeftArrow = false;
+        this.isFirstTime = true;
+    }
+    ngOnInit() {
+        this.featureProductData = new FeaturedProductModal(this.data);
+        this.styles = this.data?.styles;
+        this.content = this.data?.content;
+        this.collectionId = this.data?.content.collectionId ?? null;
+        this.getAllCategoriesById();
+        this._eventService.categoryProductList.subscribe((response) => {
+            this.collectionId = response;
+            this.getAllCategoriesById();
+        });
+    }
+    ngAfterViewInit() {
+        setTimeout(() => this.updateArrows(), 100);
+    }
+    getAllCategoriesById() {
+        if (!this.collectionId)
+            return;
+        this.restService.getCategoriesByCollectionId(this.collectionId).subscribe((response) => {
+            this.categoryList = response;
+            this.selectCategory(this.categoryList[0].categoryId);
+        });
+    }
+    selectCategory(categoryId) {
+        this.selectCategoryId = categoryId;
+        this.restService.getProductByCategoryId(categoryId).subscribe((response) => {
+            this.dataList = response.data;
+        });
+    }
+    scrollRight() {
+        const container = this.containerRef?.nativeElement;
+        if (container) {
+            let scrollAmount = 0;
+            const slideTimer = setInterval(() => {
+                container.scrollLeft += container.clientWidth / 12;
+                scrollAmount += container.clientWidth / 12;
+                if (scrollAmount >= container.clientWidth / 2) {
+                    window.clearInterval(slideTimer);
+                    this.updateArrows();
+                }
+            }, 25);
+        }
+    }
+    scrollLeft() {
+        const container = this.containerRef?.nativeElement;
+        if (container) {
+            let scrollAmount = 0;
+            const slideTimer = setInterval(() => {
+                container.scrollLeft -= container.clientWidth / 12;
+                scrollAmount += container.clientWidth / 12;
+                if (scrollAmount >= container.clientWidth / 2) {
+                    window.clearInterval(slideTimer);
+                    this.updateArrows();
+                }
+            }, 25);
+        }
+    }
+    updateArrows() {
+        const el = this.containerRef?.nativeElement;
+        if (el) {
+            this.showRightArrow = (el.scrollWidth - el.scrollLeft - el.clientWidth) >= 1 || this.isFirstTime;
+            this.showLeftArrow = el.scrollLeft > 0;
+            this.isFirstTime = false;
+        }
+    }
     editSection() {
         this._eventService.toggleEditorEvent.emit(false);
         setTimeout(() => {
@@ -8367,7 +8440,7 @@ class CategoryProductComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CategoryProductComponent, deps: [{ token: RestService }, { token: CartService }, { token: EventsService }, { token: i2$3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CategoryProductComponent, isStandalone: true, selector: "simpo-category-product", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section class=\"container-fluid total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\">\r\n    <div *ngFor=\"let item of data?.content?.inputText\">\r\n        <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n        </div>\r\n    </div>\r\n    <section class=\"m-auto\">\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;\" [ngClass]=\"{'category-tag-selected': selectCategoryId == category.categoryId}\" (click)=\"selectCategory(category.categoryId)\">\r\n                    <mat-icon>face</mat-icon>\r\n                    <span class=\"text-center\" style=\"font-size: 14px;\">{{ category.categoryName | titlecase }}</span>\r\n                    <!-- <div class=\"styling\"></div> -->\r\n                </div>\r\n            </ng-container>\r\n        </section>\r\n        <section class=\"d-flex product-list\">\r\n            <ng-container *ngFor=\"let product of dataList\">\r\n                <div class=\"product\" [style.opacity]=\"product?.itemInventory?.openingStock == 0 ? 0.5 : 1\">\r\n                    <div class=\"prod-img\">\r\n                        <img [src]=\"product.itemImages?.[0]?.imgUrl\" alt=\"\">\r\n                        <div class=\"discount\" [style.backgroundColor]=\"data?.styles?.background?.color\" style=\"color: white;\" *ngIf=\"product.price?.sellingPrice != product.price?.discountedPrice\">{{getPercentage(product)}}% off</div>\r\n                    </div>\r\n                    <div class=\"d-flex flex-column p-2\">\r\n                        <span>{{product.name}}</span>\r\n                        <span class=\"m-1\">\r\n                            <span><span [innerHTML]=\"currency\"></span> {{product.price.discountedPrice}}</span>\r\n                            <span class=\"strike-through\"><span [innerHTML]=\"currency\"></span> {{product.price.sellingPrice}}</span>\r\n                        </span>\r\n                        <div class=\"add-to-cart\" [ngClass]=\"{'justify-content-between p-0': product.quantity, 'justify-content-center': !product.quantity}\">\r\n                            <ng-container *ngIf=\"product?.itemInventory?.openingStock\">\r\n                                <ng-container *ngIf=\"!product.quantity\">\r\n                                    <span (click)=\"addItemToCart(product, 'ADD')\">Add to Cart</span>\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"product.quantity\">\r\n                                    <span class=\"quantity-btn\" (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n                                    <span class=\"quantity\">{{product.quantity}}</span>\r\n                                    <span class=\"quantity-btn\" (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"product?.itemInventory?.openingStock == 0\">\r\n                                <span (click)=\"addItemToCart(product, 'ADD')\" class=\"d-flex align-items-center\">\r\n                                    <mat-icon>notification_important</mat-icon>\r\n                                    <span class=\"ml-2\">Notify</span>\r\n                                </span>\r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </section>\r\n    </section>\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: [".category-tag{padding:15px 10px;height:120px;width:80px;border-top-left-radius:10px;border-top-right-radius:10px;cursor:pointer;border-top:8px solid transparent}.category-tag-selected{background-color:#eef4f6;border-top:8px solid #1467A8}.product-list{background-color:#f5eaff;padding:40px 20px;overflow-x:auto}.product{position:relative;display:flex;flex-direction:column;cursor:pointer;margin-right:10px;border-radius:10px;overflow:hidden;min-width:195px;max-width:195px;background-color:#fff}.product .prod-img{position:relative;height:200px;width:100%;overflow:hidden}.product .prod-img img{height:100%;width:100%;object-fit:cover}.product img:hover{-webkit-animation:scale-up-center .2s linear both;animation:scale-up-center .2s linear both}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid #EF4C7B;border-radius:5px;color:#ef4c7b;padding:5px;text-align:center;display:flex;align-items:center}.add-to-cart .quantity-btn{background-color:#fb8dac7d;padding:5px}.add-to-cart .quantity{color:#ef4c7b}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CategoryProductComponent, isStandalone: true, selector: "simpo-category-product", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section class=\"container-fluid total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\">\r\n    <div *ngFor=\"let item of data?.content?.inputText\">\r\n        <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n        </div>\r\n    </div>\r\n    <section class=\"m-auto position-relative\">\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;\" [ngClass]=\"{'category-tag-selected': selectCategoryId == category.categoryId}\" (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: 14px; text-align: center !important;\">{{ category.categoryName | titlecase }}</span>\r\n                </div>\r\n            </ng-container>\r\n        </section>\r\n        <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow\">\r\n            <mat-icon>keyboard_arrow_left</mat-icon>\r\n        </div>\r\n        <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"showRightArrow\">\r\n            <mat-icon>keyboard_arrow_right</mat-icon>\r\n        </div>\r\n        <section class=\"d-flex product-list position-relative\" #container>\r\n            <ng-container *ngFor=\"let product of dataList\">\r\n                <simpo-small-product-listing [product]=\"product\" [data]=\"data\"></simpo-small-product-listing>\r\n            </ng-container>\r\n        </section>\r\n    </section>\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: [".category-tag{padding:15px 10px;height:120px;width:80px;border-top-left-radius:10px;border-top-right-radius:10px;cursor:pointer;border-top:8px solid transparent}.category-tag-selected{background-color:#eef4f6;border-top:8px solid #1467A8}.product-list{background-color:#f5eaff;padding:40px 20px;overflow-x:auto}div[class*=arrow]{background-color:#fff;padding:5px;border-radius:50%;position:absolute;top:50%;display:flex;align-items:center;justify-content:center;z-index:10000001;cursor:pointer}.left-arrow{left:10px}.right-arrow{right:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.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"] }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CategoryProductComponent, decorators: [{
             type: Component,
@@ -8376,11 +8449,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         MatIcon,
                         PositionLayoutDirectiveDirective,
                         FeaturedProductsComponent,
+                        SmallProductListingComponent,
                         BackgroundDirective,
                         HoverDirective,
                         ContentFitDirective,
                         SimpoComponentModule
-                    ], template: "<section class=\"container-fluid total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\">\r\n    <div *ngFor=\"let item of data?.content?.inputText\">\r\n        <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n        </div>\r\n    </div>\r\n    <section class=\"m-auto\">\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;\" [ngClass]=\"{'category-tag-selected': selectCategoryId == category.categoryId}\" (click)=\"selectCategory(category.categoryId)\">\r\n                    <mat-icon>face</mat-icon>\r\n                    <span class=\"text-center\" style=\"font-size: 14px;\">{{ category.categoryName | titlecase }}</span>\r\n                    <!-- <div class=\"styling\"></div> -->\r\n                </div>\r\n            </ng-container>\r\n        </section>\r\n        <section class=\"d-flex product-list\">\r\n            <ng-container *ngFor=\"let product of dataList\">\r\n                <div class=\"product\" [style.opacity]=\"product?.itemInventory?.openingStock == 0 ? 0.5 : 1\">\r\n                    <div class=\"prod-img\">\r\n                        <img [src]=\"product.itemImages?.[0]?.imgUrl\" alt=\"\">\r\n                        <div class=\"discount\" [style.backgroundColor]=\"data?.styles?.background?.color\" style=\"color: white;\" *ngIf=\"product.price?.sellingPrice != product.price?.discountedPrice\">{{getPercentage(product)}}% off</div>\r\n                    </div>\r\n                    <div class=\"d-flex flex-column p-2\">\r\n                        <span>{{product.name}}</span>\r\n                        <span class=\"m-1\">\r\n                            <span><span [innerHTML]=\"currency\"></span> {{product.price.discountedPrice}}</span>\r\n                            <span class=\"strike-through\"><span [innerHTML]=\"currency\"></span> {{product.price.sellingPrice}}</span>\r\n                        </span>\r\n                        <div class=\"add-to-cart\" [ngClass]=\"{'justify-content-between p-0': product.quantity, 'justify-content-center': !product.quantity}\">\r\n                            <ng-container *ngIf=\"product?.itemInventory?.openingStock\">\r\n                                <ng-container *ngIf=\"!product.quantity\">\r\n                                    <span (click)=\"addItemToCart(product, 'ADD')\">Add to Cart</span>\r\n                                </ng-container>\r\n                                <ng-container *ngIf=\"product.quantity\">\r\n                                    <span class=\"quantity-btn\" (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n                                    <span class=\"quantity\">{{product.quantity}}</span>\r\n                                    <span class=\"quantity-btn\" (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"product?.itemInventory?.openingStock == 0\">\r\n                                <span (click)=\"addItemToCart(product, 'ADD')\" class=\"d-flex align-items-center\">\r\n                                    <mat-icon>notification_important</mat-icon>\r\n                                    <span class=\"ml-2\">Notify</span>\r\n                                </span>\r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </section>\r\n    </section>\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: [".category-tag{padding:15px 10px;height:120px;width:80px;border-top-left-radius:10px;border-top-right-radius:10px;cursor:pointer;border-top:8px solid transparent}.category-tag-selected{background-color:#eef4f6;border-top:8px solid #1467A8}.product-list{background-color:#f5eaff;padding:40px 20px;overflow-x:auto}.product{position:relative;display:flex;flex-direction:column;cursor:pointer;margin-right:10px;border-radius:10px;overflow:hidden;min-width:195px;max-width:195px;background-color:#fff}.product .prod-img{position:relative;height:200px;width:100%;overflow:hidden}.product .prod-img img{height:100%;width:100%;object-fit:cover}.product img:hover{-webkit-animation:scale-up-center .2s linear both;animation:scale-up-center .2s linear both}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid #EF4C7B;border-radius:5px;color:#ef4c7b;padding:5px;text-align:center;display:flex;align-items:center}.add-to-cart .quantity-btn{background-color:#fb8dac7d;padding:5px}.add-to-cart .quantity{color:#ef4c7b}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}\n"] }]
+                    ], template: "<section class=\"container-fluid total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\">\r\n    <div *ngFor=\"let item of data?.content?.inputText\">\r\n        <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n        </div>\r\n    </div>\r\n    <section class=\"m-auto position-relative\">\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;\" [ngClass]=\"{'category-tag-selected': selectCategoryId == category.categoryId}\" (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: 14px; text-align: center !important;\">{{ category.categoryName | titlecase }}</span>\r\n                </div>\r\n            </ng-container>\r\n        </section>\r\n        <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow\">\r\n            <mat-icon>keyboard_arrow_left</mat-icon>\r\n        </div>\r\n        <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"showRightArrow\">\r\n            <mat-icon>keyboard_arrow_right</mat-icon>\r\n        </div>\r\n        <section class=\"d-flex product-list position-relative\" #container>\r\n            <ng-container *ngFor=\"let product of dataList\">\r\n                <simpo-small-product-listing [product]=\"product\" [data]=\"data\"></simpo-small-product-listing>\r\n            </ng-container>\r\n        </section>\r\n    </section>\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: [".category-tag{padding:15px 10px;height:120px;width:80px;border-top-left-radius:10px;border-top-right-radius:10px;cursor:pointer;border-top:8px solid transparent}.category-tag-selected{background-color:#eef4f6;border-top:8px solid #1467A8}.product-list{background-color:#f5eaff;padding:40px 20px;overflow-x:auto}div[class*=arrow]{background-color:#fff;padding:5px;border-radius:50%;position:absolute;top:50%;display:flex;align-items:center;justify-content:center;z-index:10000001;cursor:pointer}.left-arrow{left:10px}.right-arrow{right:10px}\n"] }]
         }], ctorParameters: () => [{ type: RestService }, { type: CartService }, { type: EventsService }, { type: i2$3.ActivatedRoute }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -8389,6 +8463,87 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                 type: Input
             }], delete: [{
                 type: Input
+            }], containerRef: [{
+                type: ViewChild,
+                args: ["container"]
+            }] } });
+
+class FeaturedCollectionComponent extends BaseSection {
+    constructor(platformId, router, restService, _eventService) {
+        super();
+        this.platformId = platformId;
+        this.router = router;
+        this.restService = restService;
+        this._eventService = _eventService;
+        this.isLoading = false;
+    }
+    ngOnInit() {
+        this.content = this.data?.content;
+        this.styles = this.data?.styles;
+        this.getAllCollections();
+        this._eventService.showLoadingScreen.subscribe((response) => {
+            this.isLoading = response;
+        });
+    }
+    getSliceParameters() {
+        return [0, (this.styles?.maximumProduct || 0)];
+    }
+    redirectToListPage(collection) {
+        collection = collection.replaceAll(" ", "_");
+        this.router.navigate(['/list-category'], { queryParams: { collectionId: collection } });
+    }
+    getAllCollections() {
+        this.restService.getAllCollections().subscribe((response) => {
+            this.responseData = response.filter((category) => category.featuredCollection || true).map((collection) => {
+                return {
+                    ...collection,
+                    categoryName: collection.collectionName,
+                    categoryId: collection.collectionId
+                };
+            });
+        });
+    }
+    editSection() {
+        this._eventService.toggleEditorEvent.emit(false);
+        setTimeout(() => {
+            this._eventService.editSection.emit({ data: this.data });
+        }, 100);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FeaturedCollectionComponent, deps: [{ token: PLATFORM_ID }, { token: i2$3.Router }, { token: RestService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FeaturedCollectionComponent, isStandalone: true, selector: "simpo-featured-collection", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\r\n    [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\r\n    <div [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n      [simpoAnimation]=\"styles?.animation\">\r\n      <div *ngFor=\"let item of content?.inputText\">\r\n        <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n        </div>\r\n      </div>\r\n      <img loading=\"lazy\" src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n        class=\"span-img mt-15\">\r\n      <div class=\"category-parent\"  [ngClass]=\"{'flex-wrap': styles?.direction == 'ROW'}\">\r\n        <div *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\" (click)=\"redirectToListPage(data.categoryName)\">\r\n          <img [style.borderRadius.px]=\"styles?.border?.radius\" [style.height.px]=\"styles?.containerHeight\" [style.width.px]=\"styles?.containerWidth\" loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"category-image\">\r\n          <div class=\"category-name body-large\">{{data.categoryName}}</div>\r\n        </div>\r\n      </div>\r\n    </div>\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\r\n  </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" 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", styles: [".mt-15{margin-top:15px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.category-parent{display:flex;margin-top:25px;gap:25px;overflow-x:scroll;justify-content:center;cursor:pointer}.category-image{height:230px;width:230px;margin-bottom:15px}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important;padding-top:5px!important;padding-bottom:5px!important}.category-image{height:100px;width:100px}.header{gap:7px}.category-parent{gap:15px;margin-top:15px;padding-left:0!important;padding-right:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { 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: "component", type: i13$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: 
+                //directive
+                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FeaturedCollectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-featured-collection', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        SimpoComponentModule,
+                        //directive
+                        AnimationDirective,
+                        ContentFitDirective,
+                        BackgroundDirective,
+                        BorderDirective,
+                        CornerDirective,
+                        HoverDirective,
+                        OverlayDirective,
+                        TextBackgroundDirectiveDirective,
+                        ColorDirective
+                    ], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\r\n    [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\r\n    <div [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n      [simpoAnimation]=\"styles?.animation\">\r\n      <div *ngFor=\"let item of content?.inputText\">\r\n        <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n        </div>\r\n      </div>\r\n      <img loading=\"lazy\" src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n        class=\"span-img mt-15\">\r\n      <div class=\"category-parent\"  [ngClass]=\"{'flex-wrap': styles?.direction == 'ROW'}\">\r\n        <div *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\" (click)=\"redirectToListPage(data.categoryName)\">\r\n          <img [style.borderRadius.px]=\"styles?.border?.radius\" [style.height.px]=\"styles?.containerHeight\" [style.width.px]=\"styles?.containerWidth\" loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"category-image\">\r\n          <div class=\"category-name body-large\">{{data.categoryName}}</div>\r\n        </div>\r\n      </div>\r\n    </div>\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\r\n  </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" 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", styles: [".mt-15{margin-top:15px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.category-parent{display:flex;margin-top:25px;gap:25px;overflow-x:scroll;justify-content:center;cursor:pointer}.category-image{height:230px;width:230px;margin-bottom:15px}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important;padding-top:5px!important;padding-bottom:5px!important}.category-image{height:100px;width:100px}.header{gap:7px}.category-parent{gap:15px;margin-top:15px;padding-left:0!important;padding-right:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"] }]
+        }], ctorParameters: () => [{ type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: i2$3.Router }, { type: RestService }, { type: EventsService }], propDecorators: { data: [{
+                type: Input
+            }], responseData: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], edit: [{
+                type: Input
+            }], delete: [{
+                type: Input
             }] } });
 
 class EndUserService {
@@ -8521,5 +8676,5 @@ class Product {
  * Generated bundle index. Do not edit.
  */
 
-export { AddNewSectionComponent, AlignContent, AnimationDirective, AuthenticateUserComponent, BANNERALIGNMENT, BANNERHALIGN, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BorderDirective, ButtonDirectiveDirective, CarouselBannerComponent, Cart, CartComponent, Category, CategoryProductComponent, ChannelType, CheckoutComponent, ChooseUsSectionComponent, Collection, ColorDirective, ColumnDirectiveDirective, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, EndUserService, EventsService, FaqSectionComponent, FeaturedCategoryComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterSectionComponent, FooterTypes, HALIGN, HeaderButtonStyle, HeaderTextComponent, HoverDirective, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LocationSectionComponent, LogoShowcaseComponent, MapType, NavbarSectionComponent, ObjectPositionDirective, OverlayDirective, OverlayValue, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductCategoryListComponent, ProductDescComponent, ProductListComponent, RecentBlogPostSectionComponent, RedirectionLinkType, RemoveCarouselDirective, SPACING$1 as SPACING, SPACINGALIGN, SanitizeHtmlPipe, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialSectionComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, UserProfileComponent, VALIGN, VerifyComponent, VideoSectionComponent, ViewBlogComponent, WhislistComponent, animation, applySpacing, applyStyle, contentAlignment, fitContent, fitScreen, fontSize, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective };
+export { AddNewSectionComponent, AlignContent, AnimationDirective, AuthenticateUserComponent, BANNERALIGNMENT, BANNERHALIGN, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BorderDirective, ButtonDirectiveDirective, CarouselBannerComponent, Cart, CartComponent, Category, CategoryProductComponent, ChannelType, CheckoutComponent, ChooseUsSectionComponent, Collection, ColorDirective, ColumnDirectiveDirective, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, EndUserService, EventsService, FaqSectionComponent, FeaturedCategoryComponent, FeaturedCollectionComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterSectionComponent, FooterTypes, HALIGN, HeaderButtonStyle, HeaderTextComponent, HoverDirective, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LocationSectionComponent, LogoShowcaseComponent, MapType, NavbarSectionComponent, ObjectPositionDirective, OverlayDirective, OverlayValue, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductCategoryListComponent, ProductDescComponent, ProductListComponent, RecentBlogPostSectionComponent, RedirectionLinkType, RemoveCarouselDirective, SPACING$1 as SPACING, SPACINGALIGN, SanitizeHtmlPipe, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialSectionComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, UserProfileComponent, VALIGN, VerifyComponent, VideoSectionComponent, ViewBlogComponent, WhislistComponent, animation, applySpacing, applyStyle, contentAlignment, fitContent, fitScreen, fontSize, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective };
 //# sourceMappingURL=simpo-component-library.mjs.map