simpo-component-library 1.5.27 → 1.5.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/ecommerce/sections/category-product/category-product.component.mjs +53 -70
- package/esm2022/lib/ecommerce/sections/category-product/category-product.model.mjs +1 -1
- package/esm2022/lib/ecommerce/sections/featured-category/featured-collection.component.mjs +100 -0
- package/esm2022/lib/ecommerce/sections/product-category-list/product-category-list.component.mjs +24 -11
- package/esm2022/lib/ecommerce/sections/small-product-listing/small-product-listing.component.mjs +80 -0
- package/esm2022/lib/services/rest.service.mjs +7 -1
- package/esm2022/public-api.mjs +2 -1
- package/fesm2022/simpo-component-library.mjs +221 -70
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/lib/ecommerce/sections/category-product/category-product.component.d.ts +11 -8
- package/lib/ecommerce/sections/category-product/category-product.model.d.ts +0 -1
- package/lib/ecommerce/sections/featured-category/featured-collection.component.d.ts +29 -0
- package/lib/ecommerce/sections/product-category-list/product-category-list.component.d.ts +8 -4
- package/lib/ecommerce/sections/small-product-listing/small-product-listing.component.d.ts +16 -0
- package/lib/services/rest.service.d.ts +1 -0
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
- package/simpo-component-library-1.5.30.tgz +0 -0
- package/simpo-component-library-1.5.27.tgz +0 -0
|
@@ -3081,6 +3081,12 @@ class RestService {
|
|
|
3081
3081
|
// collectionId = "1ef5b924-66ad-68f5-b931-2bd654300b1f"
|
|
3082
3082
|
return this.http.get(this.BASE_URL + `ecommerce/product/collection/id?collectionId=${collectionId || ''}&subIndustryId=${subIndustryId || ''}&isEndUser=true`).pipe(map((response) => response.data?.map((product) => new Product(product))));
|
|
3083
3083
|
}
|
|
3084
|
+
// getCollectionById(collectionId: string) {
|
|
3085
|
+
// return this.http.get(this.BASE_URL + `product/category/id?categoryId=1ef6944e-8483-6fc5-92d7-5bc8a38cc5b1`)
|
|
3086
|
+
// }
|
|
3087
|
+
getCategoriesByCollectionId(collectionId) {
|
|
3088
|
+
return this.http.get(this.BASE_URL + `ecommerce/inventory/category/collectionId?collectionId=${collectionId}`).pipe(map((response) => response.data?.map((category) => new Category(category))));
|
|
3089
|
+
}
|
|
3084
3090
|
getProductDetails(productId = null) {
|
|
3085
3091
|
const payload = {
|
|
3086
3092
|
pageNo: 0,
|
|
@@ -8164,30 +8170,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
8164
8170
|
type: Input
|
|
8165
8171
|
}] } });
|
|
8166
8172
|
|
|
8167
|
-
class
|
|
8168
|
-
constructor(
|
|
8169
|
-
super();
|
|
8170
|
-
this.restService = restService;
|
|
8173
|
+
class SmallProductListingComponent {
|
|
8174
|
+
constructor(cartService) {
|
|
8171
8175
|
this.cartService = cartService;
|
|
8172
|
-
this.
|
|
8173
|
-
this.productList = [];
|
|
8174
|
-
this.USER_CART = [];
|
|
8175
|
-
this.selectedCategory = null;
|
|
8176
|
-
}
|
|
8177
|
-
ngOnInit() {
|
|
8178
|
-
this.getAllCategories();
|
|
8179
|
-
}
|
|
8180
|
-
getAllCategories() {
|
|
8181
|
-
this.restService.getAllCategories().subscribe((response) => {
|
|
8182
|
-
this.categories = response;
|
|
8183
|
-
this.selectCategory(this.categories[0]);
|
|
8184
|
-
});
|
|
8185
|
-
}
|
|
8186
|
-
selectCategory(category) {
|
|
8187
|
-
this.selectedCategory = category;
|
|
8188
|
-
this.restService.getProductByCategoryId(this.selectedCategory.categoryId).subscribe((response) => {
|
|
8189
|
-
this.productList = response.data;
|
|
8190
|
-
});
|
|
8176
|
+
this.USER_CART = null;
|
|
8191
8177
|
}
|
|
8192
8178
|
addItemToCart(product, type) {
|
|
8193
8179
|
// if (this.isItemOutOfStock(product)) {
|
|
@@ -8241,71 +8227,54 @@ class ProductCategoryListComponent extends BaseSection {
|
|
|
8241
8227
|
get currency() {
|
|
8242
8228
|
return BUSINESS_CONSTANTS.CURRENCY;
|
|
8243
8229
|
}
|
|
8244
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type:
|
|
8245
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type:
|
|
8230
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SmallProductListingComponent, deps: [{ token: CartService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8231
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: SmallProductListingComponent, isStandalone: true, selector: "simpo-small-product-listing", inputs: { product: "product", data: "data" }, ngImport: i0, template: "<div class=\"product\" [style.opacity]=\"product?.itemInventory?.openingStock == 0 ? 0.5 : 1\">\r\n <div class=\"prod-img\">\r\n <img [src]=\"product.itemImages?.[0]?.imgUrl\" alt=\"\">\r\n <div class=\"discount\" [style.backgroundColor]=\"data?.styles?.background?.color\" style=\"color: white;\" *ngIf=\"product.price?.sellingPrice != product.price?.discountedPrice\">{{getPercentage(product)}}% off</div>\r\n </div>\r\n <div class=\"d-flex flex-column p-2\">\r\n <span>{{product.name}}</span>\r\n <span class=\"m-1\">\r\n <span><span [innerHTML]=\"currency\"></span> {{product.price.discountedPrice}}</span>\r\n <span class=\"strike-through\"><span [innerHTML]=\"currency\"></span> {{product.price.sellingPrice}}</span>\r\n </span>\r\n <div class=\"add-to-cart\" [ngClass]=\"{'justify-content-between p-0': product.quantity, 'justify-content-center': !product.quantity}\">\r\n <ng-container *ngIf=\"product?.itemInventory?.openingStock\">\r\n <ng-container *ngIf=\"!product.quantity\">\r\n <span (click)=\"addItemToCart(product, 'ADD')\">Add to Cart</span>\r\n </ng-container>\r\n <ng-container *ngIf=\"product.quantity\">\r\n <span class=\"quantity-btn\" (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n <span class=\"quantity\">{{product.quantity}}</span>\r\n <span class=\"quantity-btn\" (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"product?.itemInventory?.openingStock == 0\">\r\n <span (click)=\"addItemToCart(product, 'ADD')\" class=\"d-flex align-items-center\">\r\n <mat-icon>notification_important</mat-icon>\r\n <span class=\"ml-2\">Notify</span>\r\n </span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>", styles: [".product{position:relative;display:flex;flex-direction:column;cursor:pointer;margin-right:10px;border-radius:10px;overflow:hidden;min-width:195px;max-width:195px;height:320px;background-color:#fff}.product .prod-img{position:relative;height:60%;width:100%;overflow:hidden}.product .prod-img img{height:100%;width:100%;object-fit:cover}.product img:hover{-webkit-animation:scale-up-center .2s linear both;animation:scale-up-center .2s linear both}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid #EF4C7B;border-radius:5px;color:#ef4c7b;padding:5px;text-align:center;display:flex;align-items:center}.add-to-cart .quantity-btn{background-color:#fb8dac7d;padding:5px}.add-to-cart .quantity{color:#ef4c7b}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
8246
8232
|
}
|
|
8247
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type:
|
|
8233
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SmallProductListingComponent, decorators: [{
|
|
8248
8234
|
type: Component,
|
|
8249
|
-
args: [{ selector: 'simpo-product-
|
|
8235
|
+
args: [{ selector: 'simpo-small-product-listing', standalone: true, imports: [
|
|
8250
8236
|
CommonModule,
|
|
8251
|
-
MatIcon
|
|
8252
|
-
|
|
8253
|
-
|
|
8254
|
-
}], ctorParameters: () => [{ type: RestService }, { type: CartService }], propDecorators: { responseData: [{
|
|
8237
|
+
MatIcon
|
|
8238
|
+
], template: "<div class=\"product\" [style.opacity]=\"product?.itemInventory?.openingStock == 0 ? 0.5 : 1\">\r\n <div class=\"prod-img\">\r\n <img [src]=\"product.itemImages?.[0]?.imgUrl\" alt=\"\">\r\n <div class=\"discount\" [style.backgroundColor]=\"data?.styles?.background?.color\" style=\"color: white;\" *ngIf=\"product.price?.sellingPrice != product.price?.discountedPrice\">{{getPercentage(product)}}% off</div>\r\n </div>\r\n <div class=\"d-flex flex-column p-2\">\r\n <span>{{product.name}}</span>\r\n <span class=\"m-1\">\r\n <span><span [innerHTML]=\"currency\"></span> {{product.price.discountedPrice}}</span>\r\n <span class=\"strike-through\"><span [innerHTML]=\"currency\"></span> {{product.price.sellingPrice}}</span>\r\n </span>\r\n <div class=\"add-to-cart\" [ngClass]=\"{'justify-content-between p-0': product.quantity, 'justify-content-center': !product.quantity}\">\r\n <ng-container *ngIf=\"product?.itemInventory?.openingStock\">\r\n <ng-container *ngIf=\"!product.quantity\">\r\n <span (click)=\"addItemToCart(product, 'ADD')\">Add to Cart</span>\r\n </ng-container>\r\n <ng-container *ngIf=\"product.quantity\">\r\n <span class=\"quantity-btn\" (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n <span class=\"quantity\">{{product.quantity}}</span>\r\n <span class=\"quantity-btn\" (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"product?.itemInventory?.openingStock == 0\">\r\n <span (click)=\"addItemToCart(product, 'ADD')\" class=\"d-flex align-items-center\">\r\n <mat-icon>notification_important</mat-icon>\r\n <span class=\"ml-2\">Notify</span>\r\n </span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>", styles: [".product{position:relative;display:flex;flex-direction:column;cursor:pointer;margin-right:10px;border-radius:10px;overflow:hidden;min-width:195px;max-width:195px;height:320px;background-color:#fff}.product .prod-img{position:relative;height:60%;width:100%;overflow:hidden}.product .prod-img img{height:100%;width:100%;object-fit:cover}.product img:hover{-webkit-animation:scale-up-center .2s linear both;animation:scale-up-center .2s linear both}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid #EF4C7B;border-radius:5px;color:#ef4c7b;padding:5px;text-align:center;display:flex;align-items:center}.add-to-cart .quantity-btn{background-color:#fb8dac7d;padding:5px}.add-to-cart .quantity{color:#ef4c7b}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}\n"] }]
|
|
8239
|
+
}], ctorParameters: () => [{ type: CartService }], propDecorators: { product: [{
|
|
8255
8240
|
type: Input
|
|
8256
8241
|
}], data: [{
|
|
8257
8242
|
type: Input
|
|
8258
|
-
}], index: [{
|
|
8259
|
-
type: Input
|
|
8260
|
-
}], edit: [{
|
|
8261
|
-
type: Input
|
|
8262
|
-
}], delete: [{
|
|
8263
|
-
type: Input
|
|
8264
8243
|
}] } });
|
|
8265
8244
|
|
|
8266
|
-
class
|
|
8267
|
-
constructor(restService, cartService,
|
|
8245
|
+
class ProductCategoryListComponent extends BaseSection {
|
|
8246
|
+
constructor(restService, cartService, activatedRoute) {
|
|
8268
8247
|
super();
|
|
8269
8248
|
this.restService = restService;
|
|
8270
8249
|
this.cartService = cartService;
|
|
8271
|
-
this._eventService = _eventService;
|
|
8272
8250
|
this.activatedRoute = activatedRoute;
|
|
8273
|
-
this.categories = [
|
|
8274
|
-
|
|
8275
|
-
|
|
8276
|
-
|
|
8277
|
-
{ name: "Eye Liner", imgUrl: "" },
|
|
8278
|
-
{ name: "Lipstick", imgUrl: "" },
|
|
8279
|
-
{ name: "Primer", imgUrl: "" },
|
|
8280
|
-
{ name: "Compact Powder", imgUrl: "" },
|
|
8281
|
-
];
|
|
8282
|
-
this.selectCategoryId = null;
|
|
8283
|
-
this.categoryList = [];
|
|
8284
|
-
this.USER_CART = null;
|
|
8251
|
+
this.categories = [];
|
|
8252
|
+
this.productList = [];
|
|
8253
|
+
this.USER_CART = [];
|
|
8254
|
+
this.selectedCategory = null;
|
|
8285
8255
|
this.collectionId = null;
|
|
8286
|
-
this.featureProductData = null;
|
|
8287
|
-
this.dataList = [];
|
|
8288
8256
|
}
|
|
8289
8257
|
ngOnInit() {
|
|
8290
|
-
this.featureProductData = new FeaturedProductModal(this.data);
|
|
8291
|
-
this.styles = this.data?.styles;
|
|
8292
|
-
this.content = this.data?.content;
|
|
8293
8258
|
this.activatedRoute.queryParams.subscribe((qParam) => {
|
|
8294
8259
|
this.collectionId = qParam["collectionId"];
|
|
8295
8260
|
});
|
|
8296
|
-
this.
|
|
8261
|
+
this.collectionId = "1ef6abbd-164f-6f7d-ae35-6bf48c5ad46a";
|
|
8262
|
+
this.getAllCategoriesById();
|
|
8297
8263
|
}
|
|
8298
|
-
|
|
8299
|
-
|
|
8300
|
-
|
|
8301
|
-
|
|
8302
|
-
|
|
8264
|
+
ngOnDestroy() {
|
|
8265
|
+
}
|
|
8266
|
+
getAllCategoriesById() {
|
|
8267
|
+
if (!this.collectionId)
|
|
8268
|
+
return;
|
|
8269
|
+
this.restService.getCategoriesByCollectionId(this.collectionId).subscribe((response) => {
|
|
8270
|
+
this.categories = response;
|
|
8271
|
+
this.selectCategory(this.categories[0]);
|
|
8303
8272
|
});
|
|
8304
8273
|
}
|
|
8305
|
-
selectCategory(
|
|
8306
|
-
this.
|
|
8307
|
-
this.restService.getProductByCategoryId(categoryId).subscribe((response) => {
|
|
8308
|
-
this.
|
|
8274
|
+
selectCategory(category) {
|
|
8275
|
+
this.selectedCategory = category;
|
|
8276
|
+
this.restService.getProductByCategoryId(this.selectedCategory.categoryId).subscribe((response) => {
|
|
8277
|
+
this.productList = response.data;
|
|
8309
8278
|
});
|
|
8310
8279
|
}
|
|
8311
8280
|
addItemToCart(product, type) {
|
|
@@ -8360,6 +8329,106 @@ class CategoryProductComponent extends BaseSection {
|
|
|
8360
8329
|
get currency() {
|
|
8361
8330
|
return BUSINESS_CONSTANTS.CURRENCY;
|
|
8362
8331
|
}
|
|
8332
|
+
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 }); }
|
|
8333
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductCategoryListComponent, isStandalone: true, selector: "simpo-product-category-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section class=\"d-flex\">\r\n <div class=\"filter-panel\">\r\n <ng-container *ngFor=\"let category of categories\">\r\n <div class=\"category\" [ngClass]=\"{'category-selected': category.categoryId == selectedCategory?.categoryId}\" (click)=\"selectCategory(category)\">\r\n <div class=\"product-img\">\r\n <img [src]=\"category.imgUrl?.[0]\" alt=\"\">\r\n </div>\r\n <span>{{ category.categoryName }}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"product-list-container\">\r\n <h2>Buy {{ selectedCategory?.categoryName | titlecase }} Online</h2>\r\n \r\n <section class=\"d-flex product-list\">\r\n <ng-container *ngFor=\"let product of productList\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\"></simpo-small-product-listing> \r\n </ng-container>\r\n </section>\r\n </div>\r\n</section>", styles: [".filter-panel{border-right:2px solid rgba(211,211,211,.297);width:25%}.category{display:flex;align-items:center;gap:10px;padding:10px;border-left:5px solid transparent;cursor:pointer}.category-selected{border-left:5px solid #ef4c7b;background-color:#ef4c7b1f}.product-img{height:45px;width:45px;padding:5px;border-radius:50%;background-color:#d3d3d3}.product-img img{height:100%;width:100%;border-radius:50%}.product-list-container{padding:40px 20px;width:80%;background-color:#f5eaff}.product-list{overflow:auto;flex-wrap:wrap;height:90vh}.product{position:relative;display:flex;flex-direction:column;cursor:pointer;border-radius:10px;overflow:hidden;min-width:195px;max-width:195px;margin:10px;background-color:#fff}.product .prod-img{position:relative;height:200px;width:100%;overflow:hidden}.product .prod-img img{height:100%;width:100%;object-fit:cover}.product img:hover{-webkit-animation:scale-up-center .2s linear both;animation:scale-up-center .2s linear both}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid #EF4C7B;border-radius:5px;color:#ef4c7b;padding:5px;text-align:center;display:flex;align-items:center}.add-to-cart .quantity-btn{background-color:#fb8dac7d;padding:5px}.add-to-cart .quantity{color:#ef4c7b}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@media screen and (max-width: 475px){.product-list-container{padding:5px!important}.category{flex-direction:column!important;text-align:center!important}.product{min-width:135px!important;max-width:135px!important;margin-left:0!important;margin-right:8px!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data"] }] }); }
|
|
8334
|
+
}
|
|
8335
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductCategoryListComponent, decorators: [{
|
|
8336
|
+
type: Component,
|
|
8337
|
+
args: [{ selector: 'simpo-product-category-list', standalone: true, imports: [
|
|
8338
|
+
CommonModule,
|
|
8339
|
+
MatIcon,
|
|
8340
|
+
SimpoComponentModule,
|
|
8341
|
+
SmallProductListingComponent
|
|
8342
|
+
], template: "<section class=\"d-flex\">\r\n <div class=\"filter-panel\">\r\n <ng-container *ngFor=\"let category of categories\">\r\n <div class=\"category\" [ngClass]=\"{'category-selected': category.categoryId == selectedCategory?.categoryId}\" (click)=\"selectCategory(category)\">\r\n <div class=\"product-img\">\r\n <img [src]=\"category.imgUrl?.[0]\" alt=\"\">\r\n </div>\r\n <span>{{ category.categoryName }}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"product-list-container\">\r\n <h2>Buy {{ selectedCategory?.categoryName | titlecase }} Online</h2>\r\n \r\n <section class=\"d-flex product-list\">\r\n <ng-container *ngFor=\"let product of productList\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\"></simpo-small-product-listing> \r\n </ng-container>\r\n </section>\r\n </div>\r\n</section>", styles: [".filter-panel{border-right:2px solid rgba(211,211,211,.297);width:25%}.category{display:flex;align-items:center;gap:10px;padding:10px;border-left:5px solid transparent;cursor:pointer}.category-selected{border-left:5px solid #ef4c7b;background-color:#ef4c7b1f}.product-img{height:45px;width:45px;padding:5px;border-radius:50%;background-color:#d3d3d3}.product-img img{height:100%;width:100%;border-radius:50%}.product-list-container{padding:40px 20px;width:80%;background-color:#f5eaff}.product-list{overflow:auto;flex-wrap:wrap;height:90vh}.product{position:relative;display:flex;flex-direction:column;cursor:pointer;border-radius:10px;overflow:hidden;min-width:195px;max-width:195px;margin:10px;background-color:#fff}.product .prod-img{position:relative;height:200px;width:100%;overflow:hidden}.product .prod-img img{height:100%;width:100%;object-fit:cover}.product img:hover{-webkit-animation:scale-up-center .2s linear both;animation:scale-up-center .2s linear both}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid #EF4C7B;border-radius:5px;color:#ef4c7b;padding:5px;text-align:center;display:flex;align-items:center}.add-to-cart .quantity-btn{background-color:#fb8dac7d;padding:5px}.add-to-cart .quantity{color:#ef4c7b}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@media screen and (max-width: 475px){.product-list-container{padding:5px!important}.category{flex-direction:column!important;text-align:center!important}.product{min-width:135px!important;max-width:135px!important;margin-left:0!important;margin-right:8px!important}}\n"] }]
|
|
8343
|
+
}], ctorParameters: () => [{ type: RestService }, { type: CartService }, { type: i2$3.ActivatedRoute }], propDecorators: { responseData: [{
|
|
8344
|
+
type: Input
|
|
8345
|
+
}], data: [{
|
|
8346
|
+
type: Input
|
|
8347
|
+
}], index: [{
|
|
8348
|
+
type: Input
|
|
8349
|
+
}], edit: [{
|
|
8350
|
+
type: Input
|
|
8351
|
+
}], delete: [{
|
|
8352
|
+
type: Input
|
|
8353
|
+
}] } });
|
|
8354
|
+
|
|
8355
|
+
class CategoryProductComponent extends BaseSection {
|
|
8356
|
+
constructor(restService, cartService, _eventService, activatedRoute) {
|
|
8357
|
+
super();
|
|
8358
|
+
this.restService = restService;
|
|
8359
|
+
this.cartService = cartService;
|
|
8360
|
+
this._eventService = _eventService;
|
|
8361
|
+
this.activatedRoute = activatedRoute;
|
|
8362
|
+
this.selectCategoryId = null;
|
|
8363
|
+
this.categoryList = [];
|
|
8364
|
+
this.USER_CART = null;
|
|
8365
|
+
this.collectionId = null;
|
|
8366
|
+
this.featureProductData = null;
|
|
8367
|
+
this.dataList = [];
|
|
8368
|
+
this.showRightArrow = false;
|
|
8369
|
+
this.showLeftArrow = false;
|
|
8370
|
+
this.isFirstTime = true;
|
|
8371
|
+
}
|
|
8372
|
+
ngOnInit() {
|
|
8373
|
+
this.featureProductData = new FeaturedProductModal(this.data);
|
|
8374
|
+
this.styles = this.data?.styles;
|
|
8375
|
+
this.content = this.data?.content;
|
|
8376
|
+
this.collectionId = this.data?.data.collectionId ?? null;
|
|
8377
|
+
this.getAllCategoriesById();
|
|
8378
|
+
}
|
|
8379
|
+
ngAfterViewInit() {
|
|
8380
|
+
setTimeout(() => this.updateArrows(), 100);
|
|
8381
|
+
}
|
|
8382
|
+
getAllCategoriesById() {
|
|
8383
|
+
if (!this.collectionId)
|
|
8384
|
+
return;
|
|
8385
|
+
this.restService.getCategoriesByCollectionId(this.collectionId).subscribe((response) => {
|
|
8386
|
+
this.categoryList = response;
|
|
8387
|
+
this.selectCategory(this.categoryList[0].categoryId);
|
|
8388
|
+
});
|
|
8389
|
+
}
|
|
8390
|
+
selectCategory(categoryId) {
|
|
8391
|
+
this.selectCategoryId = categoryId;
|
|
8392
|
+
this.restService.getProductByCategoryId(categoryId).subscribe((response) => {
|
|
8393
|
+
this.dataList = response.data;
|
|
8394
|
+
});
|
|
8395
|
+
}
|
|
8396
|
+
scrollRight() {
|
|
8397
|
+
const container = this.containerRef?.nativeElement;
|
|
8398
|
+
if (container) {
|
|
8399
|
+
let scrollAmount = 0;
|
|
8400
|
+
const slideTimer = setInterval(() => {
|
|
8401
|
+
container.scrollLeft += container.clientWidth / 12;
|
|
8402
|
+
scrollAmount += container.clientWidth / 12;
|
|
8403
|
+
if (scrollAmount >= container.clientWidth / 2) {
|
|
8404
|
+
window.clearInterval(slideTimer);
|
|
8405
|
+
this.updateArrows();
|
|
8406
|
+
}
|
|
8407
|
+
}, 25);
|
|
8408
|
+
}
|
|
8409
|
+
}
|
|
8410
|
+
scrollLeft() {
|
|
8411
|
+
const container = this.containerRef?.nativeElement;
|
|
8412
|
+
if (container) {
|
|
8413
|
+
let scrollAmount = 0;
|
|
8414
|
+
const slideTimer = setInterval(() => {
|
|
8415
|
+
container.scrollLeft -= container.clientWidth / 12;
|
|
8416
|
+
scrollAmount += container.clientWidth / 12;
|
|
8417
|
+
if (scrollAmount >= container.clientWidth / 2) {
|
|
8418
|
+
window.clearInterval(slideTimer);
|
|
8419
|
+
this.updateArrows();
|
|
8420
|
+
}
|
|
8421
|
+
}, 25);
|
|
8422
|
+
}
|
|
8423
|
+
}
|
|
8424
|
+
updateArrows() {
|
|
8425
|
+
const el = this.containerRef?.nativeElement;
|
|
8426
|
+
if (el) {
|
|
8427
|
+
this.showRightArrow = (el.scrollWidth - el.scrollLeft - el.clientWidth) >= 1 || this.isFirstTime;
|
|
8428
|
+
this.showLeftArrow = el.scrollLeft > 0;
|
|
8429
|
+
this.isFirstTime = false;
|
|
8430
|
+
}
|
|
8431
|
+
}
|
|
8363
8432
|
editSection() {
|
|
8364
8433
|
this._eventService.toggleEditorEvent.emit(false);
|
|
8365
8434
|
setTimeout(() => {
|
|
@@ -8367,7 +8436,7 @@ class CategoryProductComponent extends BaseSection {
|
|
|
8367
8436
|
}, 100);
|
|
8368
8437
|
}
|
|
8369
8438
|
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 }); }
|
|
8370
|
-
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
|
|
8439
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CategoryProductComponent, isStandalone: true, selector: "simpo-category-product", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section class=\"container-fluid total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\">\r\n <div *ngFor=\"let item of data?.content?.inputText\">\r\n <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <section class=\"m-auto position-relative\">\r\n <section class=\"d-flex\">\r\n <ng-container *ngFor=\"let category of categoryList; let idx = index\">\r\n <div class=\"d-flex flex-column align-items-center category-tag position-relative\" style=\"gap: 5px;\" [ngClass]=\"{'category-tag-selected': selectCategoryId == category.categoryId}\" (click)=\"selectCategory(category.categoryId)\">\r\n <img [src]=\"category.imgUrl[0]\" alt=\"\" height=\"30px\" width=\"30px\" style=\"border-radius: 50%;\">\r\n <span class=\"trim-text\" style=\"font-size: 14px; text-align: center !important;\">{{ category.categoryName | titlecase }}</span>\r\n </div>\r\n </ng-container>\r\n </section>\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"showRightArrow\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n <section class=\"d-flex product-list position-relative\" #container>\r\n <ng-container *ngFor=\"let product of dataList\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\"></simpo-small-product-listing>\r\n </ng-container>\r\n </section>\r\n </section>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".category-tag{padding:15px 10px;height:120px;width:80px;border-top-left-radius:10px;border-top-right-radius:10px;cursor:pointer;border-top:8px solid transparent}.category-tag-selected{background-color:#eef4f6;border-top:8px solid #1467A8}.product-list{background-color:#f5eaff;padding:40px 20px;overflow-x:auto}div[class*=arrow]{background-color:#fff;padding:5px;border-radius:50%;position:absolute;top:50%;display:flex;align-items:center;justify-content:center;z-index:10000001;cursor:pointer}.left-arrow{left:10px}.right-arrow{right:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }] }); }
|
|
8371
8440
|
}
|
|
8372
8441
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CategoryProductComponent, decorators: [{
|
|
8373
8442
|
type: Component,
|
|
@@ -8376,11 +8445,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
8376
8445
|
MatIcon,
|
|
8377
8446
|
PositionLayoutDirectiveDirective,
|
|
8378
8447
|
FeaturedProductsComponent,
|
|
8448
|
+
SmallProductListingComponent,
|
|
8379
8449
|
BackgroundDirective,
|
|
8380
8450
|
HoverDirective,
|
|
8381
8451
|
ContentFitDirective,
|
|
8382
8452
|
SimpoComponentModule
|
|
8383
|
-
], 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
|
|
8453
|
+
], template: "<section class=\"container-fluid total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\">\r\n <div *ngFor=\"let item of data?.content?.inputText\">\r\n <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <section class=\"m-auto position-relative\">\r\n <section class=\"d-flex\">\r\n <ng-container *ngFor=\"let category of categoryList; let idx = index\">\r\n <div class=\"d-flex flex-column align-items-center category-tag position-relative\" style=\"gap: 5px;\" [ngClass]=\"{'category-tag-selected': selectCategoryId == category.categoryId}\" (click)=\"selectCategory(category.categoryId)\">\r\n <img [src]=\"category.imgUrl[0]\" alt=\"\" height=\"30px\" width=\"30px\" style=\"border-radius: 50%;\">\r\n <span class=\"trim-text\" style=\"font-size: 14px; text-align: center !important;\">{{ category.categoryName | titlecase }}</span>\r\n </div>\r\n </ng-container>\r\n </section>\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"showRightArrow\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n <section class=\"d-flex product-list position-relative\" #container>\r\n <ng-container *ngFor=\"let product of dataList\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\"></simpo-small-product-listing>\r\n </ng-container>\r\n </section>\r\n </section>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".category-tag{padding:15px 10px;height:120px;width:80px;border-top-left-radius:10px;border-top-right-radius:10px;cursor:pointer;border-top:8px solid transparent}.category-tag-selected{background-color:#eef4f6;border-top:8px solid #1467A8}.product-list{background-color:#f5eaff;padding:40px 20px;overflow-x:auto}div[class*=arrow]{background-color:#fff;padding:5px;border-radius:50%;position:absolute;top:50%;display:flex;align-items:center;justify-content:center;z-index:10000001;cursor:pointer}.left-arrow{left:10px}.right-arrow{right:10px}\n"] }]
|
|
8384
8454
|
}], ctorParameters: () => [{ type: RestService }, { type: CartService }, { type: EventsService }, { type: i2$3.ActivatedRoute }], propDecorators: { data: [{
|
|
8385
8455
|
type: Input
|
|
8386
8456
|
}], index: [{
|
|
@@ -8389,6 +8459,87 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
8389
8459
|
type: Input
|
|
8390
8460
|
}], delete: [{
|
|
8391
8461
|
type: Input
|
|
8462
|
+
}], containerRef: [{
|
|
8463
|
+
type: ViewChild,
|
|
8464
|
+
args: ["container"]
|
|
8465
|
+
}] } });
|
|
8466
|
+
|
|
8467
|
+
class FeaturedCollectionComponent extends BaseSection {
|
|
8468
|
+
constructor(platformId, router, restService, _eventService) {
|
|
8469
|
+
super();
|
|
8470
|
+
this.platformId = platformId;
|
|
8471
|
+
this.router = router;
|
|
8472
|
+
this.restService = restService;
|
|
8473
|
+
this._eventService = _eventService;
|
|
8474
|
+
this.isLoading = false;
|
|
8475
|
+
}
|
|
8476
|
+
ngOnInit() {
|
|
8477
|
+
this.content = this.data?.content;
|
|
8478
|
+
this.styles = this.data?.styles;
|
|
8479
|
+
this.getAllCollections();
|
|
8480
|
+
this._eventService.showLoadingScreen.subscribe((response) => {
|
|
8481
|
+
this.isLoading = response;
|
|
8482
|
+
});
|
|
8483
|
+
}
|
|
8484
|
+
getSliceParameters() {
|
|
8485
|
+
return [0, (this.styles?.maximumProduct || 0)];
|
|
8486
|
+
}
|
|
8487
|
+
redirectToListPage(collection) {
|
|
8488
|
+
collection = collection.replaceAll(" ", "_");
|
|
8489
|
+
this.router.navigate(['/list-category'], { queryParams: { collectionId: collection } });
|
|
8490
|
+
}
|
|
8491
|
+
getAllCollections() {
|
|
8492
|
+
this.restService.getAllCollections().subscribe((response) => {
|
|
8493
|
+
this.responseData = response.filter((category) => category.featuredCollection || true).map((collection) => {
|
|
8494
|
+
return {
|
|
8495
|
+
...collection,
|
|
8496
|
+
categoryName: collection.collectionName,
|
|
8497
|
+
categoryId: collection.collectionId
|
|
8498
|
+
};
|
|
8499
|
+
});
|
|
8500
|
+
});
|
|
8501
|
+
}
|
|
8502
|
+
editSection() {
|
|
8503
|
+
this._eventService.toggleEditorEvent.emit(false);
|
|
8504
|
+
setTimeout(() => {
|
|
8505
|
+
this._eventService.editSection.emit({ data: this.data });
|
|
8506
|
+
}, 100);
|
|
8507
|
+
}
|
|
8508
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FeaturedCollectionComponent, deps: [{ token: PLATFORM_ID }, { token: i2$3.Router }, { token: RestService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8509
|
+
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\" [simpoBorder]=\"styles?.border\"\r\n [simpoAnimation]=\"styles?.animation\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <img loading=\"lazy\" src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n class=\"span-img mt-15\">\r\n <div class=\"category-parent\">\r\n <div *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\" (click)=\"redirectToListPage(data.categoryName)\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"category-image\">\r\n <div class=\"category-name body-large\">{{data.categoryName}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n", styles: [".mt-15{margin-top:15px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.category-parent{display:flex;margin-top:25px;gap:25px;overflow-x:scroll;justify-content:center;cursor:pointer}.category-image{height:230px;width:230px;border-radius:100%;margin-bottom:15px}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important;padding-top:5px!important;padding-bottom:5px!important}.category-image{height:100px;width:100px}.header{gap:7px}.category-parent{gap:15px;margin-top:15px;padding-left:0!important;padding-right:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i13$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type:
|
|
8510
|
+
//directive
|
|
8511
|
+
AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }] }); }
|
|
8512
|
+
}
|
|
8513
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FeaturedCollectionComponent, decorators: [{
|
|
8514
|
+
type: Component,
|
|
8515
|
+
args: [{ selector: 'simpo-featured-collection', standalone: true, imports: [
|
|
8516
|
+
CommonModule,
|
|
8517
|
+
FormsModule,
|
|
8518
|
+
SimpoComponentModule,
|
|
8519
|
+
//directive
|
|
8520
|
+
AnimationDirective,
|
|
8521
|
+
ContentFitDirective,
|
|
8522
|
+
BackgroundDirective,
|
|
8523
|
+
BorderDirective,
|
|
8524
|
+
CornerDirective,
|
|
8525
|
+
HoverDirective,
|
|
8526
|
+
OverlayDirective,
|
|
8527
|
+
TextBackgroundDirectiveDirective,
|
|
8528
|
+
ColorDirective
|
|
8529
|
+
], template: "<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\r\n [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\r\n <div [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n [simpoAnimation]=\"styles?.animation\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <img loading=\"lazy\" src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n class=\"span-img mt-15\">\r\n <div class=\"category-parent\">\r\n <div *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\" (click)=\"redirectToListPage(data.categoryName)\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"data.imgUrl?.[0] ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" class=\"category-image\">\r\n <div class=\"category-name body-large\">{{data.categoryName}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n", styles: [".mt-15{margin-top:15px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.category-parent{display:flex;margin-top:25px;gap:25px;overflow-x:scroll;justify-content:center;cursor:pointer}.category-image{height:230px;width:230px;border-radius:100%;margin-bottom:15px}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.total-container{height:fit-content!important;padding-top:5px!important;padding-bottom:5px!important}.category-image{height:100px;width:100px}.header{gap:7px}.category-parent{gap:15px;margin-top:15px;padding-left:0!important;padding-right:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"] }]
|
|
8530
|
+
}], ctorParameters: () => [{ type: Object, decorators: [{
|
|
8531
|
+
type: Inject,
|
|
8532
|
+
args: [PLATFORM_ID]
|
|
8533
|
+
}] }, { type: i2$3.Router }, { type: RestService }, { type: EventsService }], propDecorators: { data: [{
|
|
8534
|
+
type: Input
|
|
8535
|
+
}], responseData: [{
|
|
8536
|
+
type: Input
|
|
8537
|
+
}], index: [{
|
|
8538
|
+
type: Input
|
|
8539
|
+
}], edit: [{
|
|
8540
|
+
type: Input
|
|
8541
|
+
}], delete: [{
|
|
8542
|
+
type: Input
|
|
8392
8543
|
}] } });
|
|
8393
8544
|
|
|
8394
8545
|
class EndUserService {
|
|
@@ -8521,5 +8672,5 @@ class Product {
|
|
|
8521
8672
|
* Generated bundle index. Do not edit.
|
|
8522
8673
|
*/
|
|
8523
8674
|
|
|
8524
|
-
export { AddNewSectionComponent, AlignContent, AnimationDirective, AuthenticateUserComponent, BANNERALIGNMENT, BANNERHALIGN, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BorderDirective, ButtonDirectiveDirective, CarouselBannerComponent, Cart, CartComponent, Category, CategoryProductComponent, ChannelType, CheckoutComponent, ChooseUsSectionComponent, Collection, ColorDirective, ColumnDirectiveDirective, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, EndUserService, EventsService, FaqSectionComponent, FeaturedCategoryComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterSectionComponent, FooterTypes, HALIGN, HeaderButtonStyle, HeaderTextComponent, HoverDirective, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LocationSectionComponent, LogoShowcaseComponent, MapType, NavbarSectionComponent, ObjectPositionDirective, OverlayDirective, OverlayValue, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductCategoryListComponent, ProductDescComponent, ProductListComponent, RecentBlogPostSectionComponent, RedirectionLinkType, RemoveCarouselDirective, SPACING$1 as SPACING, SPACINGALIGN, SanitizeHtmlPipe, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialSectionComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, UserProfileComponent, VALIGN, VerifyComponent, VideoSectionComponent, ViewBlogComponent, WhislistComponent, animation, applySpacing, applyStyle, contentAlignment, fitContent, fitScreen, fontSize, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective };
|
|
8675
|
+
export { AddNewSectionComponent, AlignContent, AnimationDirective, AuthenticateUserComponent, BANNERALIGNMENT, BANNERHALIGN, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BorderDirective, ButtonDirectiveDirective, CarouselBannerComponent, Cart, CartComponent, Category, CategoryProductComponent, ChannelType, CheckoutComponent, ChooseUsSectionComponent, Collection, ColorDirective, ColumnDirectiveDirective, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, EndUserService, EventsService, FaqSectionComponent, FeaturedCategoryComponent, FeaturedCollectionComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterSectionComponent, FooterTypes, HALIGN, HeaderButtonStyle, HeaderTextComponent, HoverDirective, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LocationSectionComponent, LogoShowcaseComponent, MapType, NavbarSectionComponent, ObjectPositionDirective, OverlayDirective, OverlayValue, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductCategoryListComponent, ProductDescComponent, ProductListComponent, RecentBlogPostSectionComponent, RedirectionLinkType, RemoveCarouselDirective, SPACING$1 as SPACING, SPACINGALIGN, SanitizeHtmlPipe, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialSectionComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, UserProfileComponent, VALIGN, VerifyComponent, VideoSectionComponent, ViewBlogComponent, WhislistComponent, animation, applySpacing, applyStyle, contentAlignment, fitContent, fitScreen, fontSize, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective };
|
|
8525
8676
|
//# sourceMappingURL=simpo-component-library.mjs.map
|