simpo-component-library 1.5.35 → 1.5.36
Sign up to get free protection for your applications and to get access to all the features.
- package/esm2022/lib/ecommerce/sections/category-product/category-product.component.mjs +3 -4
- package/esm2022/lib/ecommerce/sections/featured-category/featured-category.component.mjs +3 -3
- package/esm2022/lib/ecommerce/sections/featured-category/featured-collection.component.mjs +7 -11
- package/esm2022/lib/ecommerce/sections/product-category-list/product-category-list.component.mjs +23 -6
- package/esm2022/lib/ecommerce/sections/product-category-list/product-category-list.model.mjs +2 -0
- package/esm2022/lib/ecommerce/sections/small-product-listing/small-product-listing.component.mjs +3 -3
- package/esm2022/lib/services/rest.service.mjs +3 -3
- package/fesm2022/simpo-component-library.mjs +33 -23
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/lib/ecommerce/sections/category-product/category-product.component.d.ts +0 -1
- package/lib/ecommerce/sections/featured-category/featured-collection.component.d.ts +1 -2
- package/lib/ecommerce/sections/product-category-list/product-category-list.component.d.ts +6 -4
- package/lib/ecommerce/sections/product-category-list/product-category-list.model.d.ts +21 -0
- package/lib/services/rest.service.d.ts +1 -1
- package/package.json +1 -1
- package/simpo-component-library-1.5.36.tgz +0 -0
|
@@ -3106,9 +3106,9 @@ class RestService {
|
|
|
3106
3106
|
}
|
|
3107
3107
|
getCollectionByIds(collectionIds) {
|
|
3108
3108
|
const payload = {
|
|
3109
|
-
|
|
3109
|
+
ids: collectionIds
|
|
3110
3110
|
};
|
|
3111
|
-
return this.http.put(this.BASE_URL + `ecommerce/inventory/collection/list/all`,
|
|
3111
|
+
return this.http.put(this.BASE_URL + `ecommerce/inventory/collection/list/all`, payload).pipe(map((response) => response.data?.map((collection) => new Collection(collection))));
|
|
3112
3112
|
}
|
|
3113
3113
|
getAllCategories() {
|
|
3114
3114
|
const businessId = localStorage.getItem("bId") ?? localStorage.getItem("businessId") ?? "";
|
|
@@ -5784,7 +5784,7 @@ class FeaturedCategoryComponent extends BaseSection {
|
|
|
5784
5784
|
return window.innerWidth <= 475;
|
|
5785
5785
|
}
|
|
5786
5786
|
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 }); }
|
|
5787
|
-
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 | sanitizeHtml\" [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\"
|
|
5787
|
+
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 | sanitizeHtml\" [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:
|
|
5788
5788
|
//directive
|
|
5789
5789
|
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"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }] }); }
|
|
5790
5790
|
}
|
|
@@ -5803,7 +5803,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
5803
5803
|
TextBackgroundDirectiveDirective,
|
|
5804
5804
|
ColorDirective,
|
|
5805
5805
|
SanitizeHtmlPipe
|
|
5806
|
-
], 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 | sanitizeHtml\" [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\"
|
|
5806
|
+
], 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 | sanitizeHtml\" [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"] }]
|
|
5807
5807
|
}], ctorParameters: () => [{ type: Object, decorators: [{
|
|
5808
5808
|
type: Inject,
|
|
5809
5809
|
args: [PLATFORM_ID]
|
|
@@ -8259,14 +8259,14 @@ class SmallProductListingComponent {
|
|
|
8259
8259
|
return BUSINESS_CONSTANTS.CURRENCY;
|
|
8260
8260
|
}
|
|
8261
8261
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SmallProductListingComponent, deps: [{ token: CartService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8262
|
-
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
|
|
8262
|
+
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;\"\r\n *ngIf=\"product.price?.sellingPrice != product.price?.discountedPrice\">{{getPercentage(product)}}% off</div>\r\n </div>\r\n <div class=\"p-2 h-40\">\r\n <span class=\"trim-text\">{{product.name}}</span>\r\n <div class=\"bottom\">\r\n <span class=\"m-1\">\r\n <span class=\"discount-price\"><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\"\r\n [ngClass]=\"{'justify-content-between p-0 d-flex': 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</div>\r\n", 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:350px;background-color:#fff}.product .prod-img{position:relative;height:55%;width:100%;overflow:hidden;border:1px solid;border-color:#e5e7eb}.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;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)}}.h-40{height:45%;position:relative}.bottom{position:absolute;bottom:10px;width:93%;display:flex;flex-direction:column}.discount-price{font-weight:600;font-size:14px}\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"] }] }); }
|
|
8263
8263
|
}
|
|
8264
8264
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SmallProductListingComponent, decorators: [{
|
|
8265
8265
|
type: Component,
|
|
8266
8266
|
args: [{ selector: 'simpo-small-product-listing', standalone: true, imports: [
|
|
8267
8267
|
CommonModule,
|
|
8268
8268
|
MatIcon
|
|
8269
|
-
], template: "<div class=\"product\" [style.opacity]=\"product?.itemInventory?.openingStock == 0 ? 0.5 : 1\">\r\n
|
|
8269
|
+
], 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;\"\r\n *ngIf=\"product.price?.sellingPrice != product.price?.discountedPrice\">{{getPercentage(product)}}% off</div>\r\n </div>\r\n <div class=\"p-2 h-40\">\r\n <span class=\"trim-text\">{{product.name}}</span>\r\n <div class=\"bottom\">\r\n <span class=\"m-1\">\r\n <span class=\"discount-price\"><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\"\r\n [ngClass]=\"{'justify-content-between p-0 d-flex': 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</div>\r\n", 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:350px;background-color:#fff}.product .prod-img{position:relative;height:55%;width:100%;overflow:hidden;border:1px solid;border-color:#e5e7eb}.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;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)}}.h-40{height:45%;position:relative}.bottom{position:absolute;bottom:10px;width:93%;display:flex;flex-direction:column}.discount-price{font-weight:600;font-size:14px}\n"] }]
|
|
8270
8270
|
}], ctorParameters: () => [{ type: CartService }], propDecorators: { product: [{
|
|
8271
8271
|
type: Input
|
|
8272
8272
|
}], data: [{
|
|
@@ -8287,11 +8287,10 @@ class ProductCategoryListComponent extends BaseSection {
|
|
|
8287
8287
|
}
|
|
8288
8288
|
ngOnInit() {
|
|
8289
8289
|
this.styles = this.data?.styles;
|
|
8290
|
-
this.content = this.data?.content;
|
|
8291
8290
|
this.activatedRoute.queryParams.subscribe((qParam) => {
|
|
8292
8291
|
this.collectionId = qParam["collectionId"];
|
|
8292
|
+
this.getAllCategoriesById();
|
|
8293
8293
|
});
|
|
8294
|
-
this.getAllCategoriesById();
|
|
8295
8294
|
}
|
|
8296
8295
|
ngOnDestroy() {
|
|
8297
8296
|
}
|
|
@@ -8358,11 +8357,25 @@ class ProductCategoryListComponent extends BaseSection {
|
|
|
8358
8357
|
getPercentage(product) {
|
|
8359
8358
|
return ((product.price.sellingPrice - product.price.discountedPrice) / 100).toFixed(0);
|
|
8360
8359
|
}
|
|
8360
|
+
getSupportingColor(color) {
|
|
8361
|
+
let hex = color;
|
|
8362
|
+
if (!hex)
|
|
8363
|
+
return color;
|
|
8364
|
+
hex = hex.replace(/^#/, '');
|
|
8365
|
+
let bigint = parseInt(hex, 16);
|
|
8366
|
+
let r = (bigint >> 16) & 255;
|
|
8367
|
+
let g = (bigint >> 8) & 255;
|
|
8368
|
+
let b = bigint & 255;
|
|
8369
|
+
return `rgba(${r}, ${g}, ${b}, 0.4)`;
|
|
8370
|
+
}
|
|
8371
|
+
get headingSpace() {
|
|
8372
|
+
return this.styles?.layout?.headingSpacing;
|
|
8373
|
+
}
|
|
8361
8374
|
get currency() {
|
|
8362
8375
|
return BUSINESS_CONSTANTS.CURRENCY;
|
|
8363
8376
|
}
|
|
8364
8377
|
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 }); }
|
|
8365
|
-
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\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"filter-panel\">\r\n <ng-container *ngFor=\"let category of categories\">\r\n <div class=\"category\" [
|
|
8378
|
+
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\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"styles?.layout\">\r\n <div class=\"filter-panel\">\r\n <ng-container *ngFor=\"let category of categories\">\r\n <div class=\"category\" [style.backgroundColor]=\"(category.categoryId == selectedCategory?.categoryId) ? getSupportingColor(styles?.background?.accentColor ?? '#000000') : ''\" [style.borderColor]=\"(category.categoryId == selectedCategory?.categoryId) ? styles?.background?.accentColor : ''\"\r\n (click)=\"selectCategory(category)\">\r\n <div class=\"product-img\">\r\n <img [src]=\"category.imgUrl?.[0]\" alt=\"\">\r\n </div>\r\n <span style=\"color: white;\">{{ category.categoryName }}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"product-list-container\" [simpoBackground]=\"styles?.background\">\r\n <h2 [simpoContentTitleSpace]=\"headingSpace\">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>\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>", styles: [".filter-panel{border-right:2px solid rgba(211,211,211,.297);width:18%}.category{display:flex;align-items:center;gap:10px;padding:10px;border-left:5px solid transparent;cursor:pointer}.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:0 20px;width:80%}.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: "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: 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: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }] }); }
|
|
8366
8379
|
}
|
|
8367
8380
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductCategoryListComponent, decorators: [{
|
|
8368
8381
|
type: Component,
|
|
@@ -8375,8 +8388,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
8375
8388
|
HoverDirective,
|
|
8376
8389
|
DeleteHoverElementComponent,
|
|
8377
8390
|
ContentFitDirective,
|
|
8378
|
-
|
|
8379
|
-
|
|
8391
|
+
SpacingHorizontalDirective,
|
|
8392
|
+
SanitizeHtmlPipe,
|
|
8393
|
+
ContentTitleDirective
|
|
8394
|
+
], template: "<section class=\"d-flex\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"styles?.layout\">\r\n <div class=\"filter-panel\">\r\n <ng-container *ngFor=\"let category of categories\">\r\n <div class=\"category\" [style.backgroundColor]=\"(category.categoryId == selectedCategory?.categoryId) ? getSupportingColor(styles?.background?.accentColor ?? '#000000') : ''\" [style.borderColor]=\"(category.categoryId == selectedCategory?.categoryId) ? styles?.background?.accentColor : ''\"\r\n (click)=\"selectCategory(category)\">\r\n <div class=\"product-img\">\r\n <img [src]=\"category.imgUrl?.[0]\" alt=\"\">\r\n </div>\r\n <span style=\"color: white;\">{{ category.categoryName }}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"product-list-container\" [simpoBackground]=\"styles?.background\">\r\n <h2 [simpoContentTitleSpace]=\"headingSpace\">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>\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>", styles: [".filter-panel{border-right:2px solid rgba(211,211,211,.297);width:18%}.category{display:flex;align-items:center;gap:10px;padding:10px;border-left:5px solid transparent;cursor:pointer}.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:0 20px;width:80%}.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"] }]
|
|
8380
8395
|
}], ctorParameters: () => [{ type: RestService }, { type: CartService }, { type: i2$3.ActivatedRoute }], propDecorators: { responseData: [{
|
|
8381
8396
|
type: Input
|
|
8382
8397
|
}], data: [{
|
|
@@ -8399,7 +8414,6 @@ class CategoryProductComponent extends BaseSection {
|
|
|
8399
8414
|
this.selectCategoryId = null;
|
|
8400
8415
|
this.categoryList = [];
|
|
8401
8416
|
this.USER_CART = null;
|
|
8402
|
-
this.collectionId = null;
|
|
8403
8417
|
this.featureProductData = null;
|
|
8404
8418
|
this.dataList = [];
|
|
8405
8419
|
this.showRightArrow = false;
|
|
@@ -8524,7 +8538,7 @@ class CategoryProductComponent extends BaseSection {
|
|
|
8524
8538
|
}, 100);
|
|
8525
8539
|
}
|
|
8526
8540
|
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 }); }
|
|
8527
|
-
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\" [spacingHorizontal]=\"styles?.layout\">\r\n <div *ngFor=\"let item of data?.content?.inputText\">\r\n <div [innerHTML]=\"item.value | sanitizeHtml\" [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:
|
|
8541
|
+
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\" [spacingHorizontal]=\"styles?.layout\" style=\"display: block !important;\">\r\n <div *ngFor=\"let item of data?.content?.inputText\">\r\n <div [innerHTML]=\"item.value | sanitizeHtml\" [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: .8125rem; text-align: center !important;\" [style.color]=\"selectCategoryId === category.categoryId ? '#1467A8' : ''\"\r\n >{{ 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 *ngIf=\"dataList.length\">\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>\r\n", 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"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal"] }] }); }
|
|
8528
8542
|
}
|
|
8529
8543
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CategoryProductComponent, decorators: [{
|
|
8530
8544
|
type: Component,
|
|
@@ -8540,7 +8554,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
8540
8554
|
SimpoComponentModule,
|
|
8541
8555
|
SanitizeHtmlPipe,
|
|
8542
8556
|
SpacingHorizontalDirective
|
|
8543
|
-
], template: "<section class=\"container-fluid total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"styles?.layout\">\r\n <div *ngFor=\"let item of data?.content?.inputText\">\r\n <div [innerHTML]=\"item.value | sanitizeHtml\" [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:
|
|
8557
|
+
], template: "<section class=\"container-fluid total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"styles?.layout\" style=\"display: block !important;\">\r\n <div *ngFor=\"let item of data?.content?.inputText\">\r\n <div [innerHTML]=\"item.value | sanitizeHtml\" [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: .8125rem; text-align: center !important;\" [style.color]=\"selectCategoryId === category.categoryId ? '#1467A8' : ''\"\r\n >{{ 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 *ngIf=\"dataList.length\">\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>\r\n", 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"] }]
|
|
8544
8558
|
}], ctorParameters: () => [{ type: RestService }, { type: CartService }, { type: EventsService }, { type: i2$3.ActivatedRoute }], propDecorators: { data: [{
|
|
8545
8559
|
type: Input
|
|
8546
8560
|
}], index: [{
|
|
@@ -8555,9 +8569,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
8555
8569
|
}] } });
|
|
8556
8570
|
|
|
8557
8571
|
class FeaturedCollectionComponent extends BaseSection {
|
|
8558
|
-
constructor(
|
|
8572
|
+
constructor(router, restService, _eventService) {
|
|
8559
8573
|
super();
|
|
8560
|
-
this.platformId = platformId;
|
|
8561
8574
|
this.router = router;
|
|
8562
8575
|
this.restService = restService;
|
|
8563
8576
|
this._eventService = _eventService;
|
|
@@ -8604,8 +8617,8 @@ class FeaturedCollectionComponent extends BaseSection {
|
|
|
8604
8617
|
this._eventService.editSection.emit({ data: this.data });
|
|
8605
8618
|
}, 100);
|
|
8606
8619
|
}
|
|
8607
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FeaturedCollectionComponent, deps: [{ token:
|
|
8608
|
-
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 | sanitizeHtml\" [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\"
|
|
8620
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FeaturedCollectionComponent, deps: [{ token: i2$3.Router }, { token: RestService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8621
|
+
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 | sanitizeHtml\" [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:
|
|
8609
8622
|
//directive
|
|
8610
8623
|
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"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }] }); }
|
|
8611
8624
|
}
|
|
@@ -8626,11 +8639,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
8626
8639
|
TextBackgroundDirectiveDirective,
|
|
8627
8640
|
ColorDirective,
|
|
8628
8641
|
SanitizeHtmlPipe
|
|
8629
|
-
], 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 | sanitizeHtml\" [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\"
|
|
8630
|
-
}], ctorParameters: () => [{ type:
|
|
8631
|
-
type: Inject,
|
|
8632
|
-
args: [PLATFORM_ID]
|
|
8633
|
-
}] }, { type: i2$3.Router }, { type: RestService }, { type: EventsService }], propDecorators: { data: [{
|
|
8642
|
+
], 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 | sanitizeHtml\" [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"] }]
|
|
8643
|
+
}], ctorParameters: () => [{ type: i2$3.Router }, { type: RestService }, { type: EventsService }], propDecorators: { data: [{
|
|
8634
8644
|
type: Input
|
|
8635
8645
|
}], responseData: [{
|
|
8636
8646
|
type: Input
|