simpo-component-library 1.5.24 → 1.5.25

package/fesm2022/simpo-component-library.mjs

@@ -8145,6 +8145,255 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                 type: Input
             }] } });
 
+class SmallProductListingComponent {
+    constructor(cartService) {
+        this.cartService = cartService;
+        this.USER_CART = null;
+    }
+    addItemToCart(product, type) {
+        // if (this.isItemOutOfStock(product)) {
+        //   this.messageService.add({ severity: 'warn', summary: 'Cart', detail: 'Item is not available as of now. We will notify you once available' });
+        //   return;
+        // }
+        if (!product?.quantity)
+            product.quantity = 0;
+        if (type == 'ADD') {
+            product.quantity += 1;
+        }
+        else {
+            product.quantity -= 1;
+        }
+        if (product?.itemVariant?.length) {
+            const itemVarient = this.getItemVarient(product, product.varientId);
+            if (itemVarient) {
+                itemVarient.quantity = product.quantity;
+                this.cartService.addItemToCart(product, itemVarient.variantId);
+            }
+        }
+        else {
+            this.cartService.addItemToCart(product);
+        }
+        if (product.quantity) {
+            let isPresent = false;
+            this.USER_CART?.forEach((item) => {
+                if (item.varientId == product.varientId) {
+                    item.quantity = product.quantity;
+                    isPresent = true;
+                }
+            });
+            if (!isPresent)
+                this.USER_CART?.push(new OrderedItems(product, product.varientId));
+        }
+        else {
+            this.USER_CART = this.USER_CART?.filter((item) => item.varientId != product.varientId) ?? [];
+        }
+    }
+    getItemVarient(product, varientId) {
+        let selectedVarient = null;
+        product?.itemVariant?.forEach((varient) => {
+            if (varient.variantId == varientId)
+                selectedVarient = varient;
+        });
+        return selectedVarient;
+    }
+    getPercentage(product) {
+        return ((product.price.sellingPrice - product.price.discountedPrice) / 100).toFixed(0);
+    }
+    get currency() {
+        return BUSINESS_CONSTANTS.CURRENCY;
+    }
+    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;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.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: SmallProductListingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-small-product-listing', standalone: true, imports: [
+                        CommonModule,
+                        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;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"] }]
+        }], ctorParameters: () => [{ type: CartService }], propDecorators: { product: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }] } });
+
+class ProductCategoryListComponent extends BaseSection {
+    constructor(restService, cartService) {
+        super();
+        this.restService = restService;
+        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;
+        });
+    }
+    addItemToCart(product, type) {
+        // if (this.isItemOutOfStock(product)) {
+        //   this.messageService.add({ severity: 'warn', summary: 'Cart', detail: 'Item is not available as of now. We will notify you once available' });
+        //   return;
+        // }
+        if (!product?.quantity)
+            product.quantity = 0;
+        if (type == 'ADD') {
+            product.quantity += 1;
+        }
+        else {
+            product.quantity -= 1;
+        }
+        if (product?.itemVariant?.length) {
+            const itemVarient = this.getItemVarient(product, product.varientId);
+            if (itemVarient) {
+                itemVarient.quantity = product.quantity;
+                this.cartService.addItemToCart(product, itemVarient.variantId);
+            }
+        }
+        else {
+            this.cartService.addItemToCart(product);
+        }
+        if (product.quantity) {
+            let isPresent = false;
+            this.USER_CART?.forEach((item) => {
+                if (item.varientId == product.varientId) {
+                    item.quantity = product.quantity;
+                    isPresent = true;
+                }
+            });
+            if (!isPresent)
+                this.USER_CART?.push(new OrderedItems(product, product.varientId));
+        }
+        else {
+            this.USER_CART = this.USER_CART?.filter((item) => item.varientId != product.varientId) ?? [];
+        }
+    }
+    getItemVarient(product, varientId) {
+        let selectedVarient = null;
+        product?.itemVariant?.forEach((varient) => {
+            if (varient.variantId == varientId)
+                selectedVarient = varient;
+        });
+        return selectedVarient;
+    }
+    getPercentage(product) {
+        return ((product.price.sellingPrice - product.price.discountedPrice) / 100).toFixed(0);
+    }
+    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                <simpo-small-product-listing [product]=\"product\" [data]=\"data\"></simpo-small-product-listing>\r\n              \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              \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: [{
+                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.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.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
+    }
+    getAllCategories() {
+        this.restService.getAllCategories().subscribe((response) => {
+            this.categoryList = response;
+            this.selectCategoryId = this.categoryList?.[0]?.categoryId;
+            this.selectCategory(this.selectCategoryId);
+        });
+    }
+    selectCategory(categoryId) {
+        this.selectCategoryId = categoryId;
+        this.restService.getProductByCategoryId(categoryId).subscribe((response) => {
+            this.dataList = response.data;
+        });
+    }
+    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: 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                <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}\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,
+            args: [{ selector: 'simpo-category-product', standalone: true, imports: [
+                        CommonModule,
+                        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                <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}\n"] }]
+        }], ctorParameters: () => [{ type: RestService }, { type: CartService }, { type: EventsService }, { type: i2$3.ActivatedRoute }], propDecorators: { data: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], edit: [{
+                type: Input
+            }], delete: [{
+                type: Input
+            }] } });
+
 class EndUserService {
     constructor(storageService) {
         this.storageService = storageService;
@@ -8275,5 +8524,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, 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, ProductDescComponent, ProductListComponent, RecentBlogPostSectionComponent, RedirectionLinkType, RemoveCarouselDirective, SPACING$1 as SPACING, SPACINGALIGN, 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, 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, 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