simpo-component-library 1.2.5 → 1.2.7
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/json/user-cart.json +32 -0
- package/esm2022/lib/ecommerce/sections/featured-products/featured-products.component.mjs +23 -9
- package/esm2022/lib/ecommerce/sections/featured-products/featured-products.modal.mjs +1 -1
- package/esm2022/lib/ecommerce/sections/product-desc/product-desc.component.mjs +38 -12
- package/esm2022/lib/ecommerce/sections/product-list/product-list.component.mjs +28 -8
- package/esm2022/lib/ecommerce/styles/OrderedItems.modal.mjs +20 -0
- package/esm2022/lib/ecommerce/styles/product.modal.mjs +27 -2
- package/esm2022/lib/sections/features-section/features-section.component.mjs +1 -1
- package/esm2022/lib/services/cart.service.mjs +35 -0
- package/esm2022/lib/services/rest.service.mjs +41 -0
- package/fesm2022/simpo-component-library.mjs +212 -21
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/lib/ecommerce/sections/featured-products/featured-products.component.d.ts +9 -3
- package/lib/ecommerce/sections/featured-products/featured-products.modal.d.ts +1 -0
- package/lib/ecommerce/sections/product-desc/product-desc.component.d.ts +11 -5
- package/lib/ecommerce/sections/product-list/product-list.component.d.ts +8 -4
- package/lib/ecommerce/styles/OrderedItems.modal.d.ts +18 -0
- package/lib/ecommerce/styles/product.modal.d.ts +5 -16
- package/lib/sections/features-section/features-section.component.d.ts +1 -1
- package/lib/services/cart.service.d.ts +9 -0
- package/lib/services/rest.service.d.ts +12 -0
- package/package.json +1 -1
- package/simpo-component-library-1.2.7.tgz +0 -0
- package/simpo-component-library-1.2.5.tgz +0 -0
|
@@ -16,6 +16,10 @@ import * as i2$5 from '@angular/material/snack-bar';
|
|
|
16
16
|
import * as i2$6 from 'ngx-skeleton-loader';
|
|
17
17
|
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
|
|
18
18
|
import * as mapboxgl from 'mapbox-gl';
|
|
19
|
+
import * as i1$1 from '@angular/common/http';
|
|
20
|
+
import { HttpClientModule } from '@angular/common/http';
|
|
21
|
+
import { map } from 'rxjs';
|
|
22
|
+
import { OrderedItems } from '@simpo-ui/ecommerce/styles/OrderedItems.modal';
|
|
19
23
|
import * as i7 from '@angular/material/slider';
|
|
20
24
|
import { MatSliderModule } from '@angular/material/slider';
|
|
21
25
|
import { MatSelectModule } from '@angular/material/select';
|
|
@@ -4247,11 +4251,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
|
|
|
4247
4251
|
args: ['mainContainer']
|
|
4248
4252
|
}] } });
|
|
4249
4253
|
|
|
4254
|
+
class RestService {
|
|
4255
|
+
constructor(http) {
|
|
4256
|
+
this.http = http;
|
|
4257
|
+
this.BASE_URL = "https://dev-api.simpo.ai/";
|
|
4258
|
+
}
|
|
4259
|
+
getProductByBusiness(searchTxt = "", productId = null) {
|
|
4260
|
+
const businessId = "1ef4fe51-6dfc-6199-b966-0f9244067fd0";
|
|
4261
|
+
const payload = {
|
|
4262
|
+
businessId: businessId,
|
|
4263
|
+
pageNo: 0,
|
|
4264
|
+
pageSize: 100,
|
|
4265
|
+
searchText: searchTxt,
|
|
4266
|
+
itemId: productId
|
|
4267
|
+
};
|
|
4268
|
+
return this.http.put(this.BASE_URL + `ecommerce/product/item/search`, payload).pipe(map((response) => response.data.data.map((product) => new Product(product))));
|
|
4269
|
+
}
|
|
4270
|
+
getFeaturedProduct(collectionId) {
|
|
4271
|
+
const businessId = "1ef4fe51-6dfc-6199-b966-0f9244067fd0";
|
|
4272
|
+
const payload = {
|
|
4273
|
+
businessId: businessId,
|
|
4274
|
+
collectionId: [collectionId],
|
|
4275
|
+
pageNo: 0,
|
|
4276
|
+
pageSize: 100
|
|
4277
|
+
};
|
|
4278
|
+
return this.http.put(this.BASE_URL + `ecommerce/product/item/search`, payload).pipe(map((response) => response.data.data.map((product) => new Product(product))));
|
|
4279
|
+
}
|
|
4280
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: RestService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4281
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: RestService, providedIn: 'root' }); }
|
|
4282
|
+
}
|
|
4283
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: RestService, decorators: [{
|
|
4284
|
+
type: Injectable,
|
|
4285
|
+
args: [{
|
|
4286
|
+
providedIn: 'root',
|
|
4287
|
+
}]
|
|
4288
|
+
}], ctorParameters: () => [{ type: i1$1.HttpClient }] });
|
|
4289
|
+
|
|
4250
4290
|
class FeaturedProductsComponent extends BaseSection {
|
|
4251
|
-
constructor(platformId, _eventService) {
|
|
4291
|
+
constructor(platformId, _eventService, restService, router) {
|
|
4252
4292
|
super();
|
|
4253
4293
|
this.platformId = platformId;
|
|
4254
4294
|
this._eventService = _eventService;
|
|
4295
|
+
this.restService = restService;
|
|
4296
|
+
this.router = router;
|
|
4255
4297
|
this.edit = true;
|
|
4256
4298
|
this.screenWidth = 0;
|
|
4257
4299
|
if (isPlatformBrowser(this.platformId)) {
|
|
@@ -4261,6 +4303,13 @@ class FeaturedProductsComponent extends BaseSection {
|
|
|
4261
4303
|
getScreenSize() {
|
|
4262
4304
|
this.screenWidth = window.innerWidth;
|
|
4263
4305
|
}
|
|
4306
|
+
ngOnChanges(changes) {
|
|
4307
|
+
if (this.content?.collectionId) {
|
|
4308
|
+
this.restService.getFeaturedProduct(this.content?.collectionId).subscribe((response) => {
|
|
4309
|
+
this.responseData = response;
|
|
4310
|
+
});
|
|
4311
|
+
}
|
|
4312
|
+
}
|
|
4264
4313
|
ngOnInit() {
|
|
4265
4314
|
this.content = this.data?.content;
|
|
4266
4315
|
this.styles = this.data?.styles;
|
|
@@ -4273,10 +4322,11 @@ class FeaturedProductsComponent extends BaseSection {
|
|
|
4273
4322
|
return [0, (this.styles?.maximumProduct || 0)];
|
|
4274
4323
|
}
|
|
4275
4324
|
proceedToProductDesc(productId) {
|
|
4276
|
-
this.
|
|
4325
|
+
this.router.navigate([`details`], { queryParams: { id: productId } });
|
|
4326
|
+
// this._eventService.redirectToPage.emit({redirectTo: '/details', data: {productId: productId}})
|
|
4277
4327
|
}
|
|
4278
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FeaturedProductsComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4279
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: FeaturedProductsComponent, isStandalone: true, selector: "simpo-featured-products", inputs: { data: "data", responseData: "responseData", index: "index", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\r\n simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\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 src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n class=\"span-img mt-15\">\r\n <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n <div *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\" class=\"product\"\r\n [style.width]=\"getProductWidth()\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n <div *ngIf=\"!(product.itemImages.length > 0 && product.itemImages[0].imgUrl)\" class=\"default-image\">\r\n <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" alt=\"\">\r\n </div>\r\n <div *ngIf=\"product.itemImages.length > 0 && product.itemImages[0].imgUrl\">\r\n <img [src]=\"product.itemImages[0].imgUrl\" alt=\"\" class=\"product-img\">\r\n </div>\r\n <div class=\"mt-15\">\r\n <div class=\"product-name heading-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n {{product.name}}</div>\r\n <div class=\"price body-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n \u20B9\r\n {{product.price.sellingPrice}}\r\n </div>\r\n </div>\r\n <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\">{{content?.button}}</button>\r\n </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", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (max-width: 475px){.product-img{height:250px}.default-image img{height:250px}}.add-to-cart-btn{margin-top:15px}.add-to-cart-btn button{height:35px;font-size:16px!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.SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
|
|
4328
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FeaturedProductsComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$4.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4329
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: FeaturedProductsComponent, isStandalone: true, selector: "simpo-featured-products", inputs: { data: "data", responseData: "responseData", index: "index", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\r\n simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\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 src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n class=\"span-img mt-15\">\r\n <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n <div *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\" class=\"product\"\r\n [style.width]=\"getProductWidth()\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n <div *ngIf=\"!(product.itemImages.length > 0 && product.itemImages[0].imgUrl)\" class=\"default-image\">\r\n <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" alt=\"\">\r\n </div>\r\n <div *ngIf=\"product.itemImages.length > 0 && product.itemImages[0].imgUrl\">\r\n <img [src]=\"product.itemImages[0].imgUrl\" alt=\"\" class=\"product-img\">\r\n </div>\r\n <div class=\"mt-15\">\r\n <div class=\"product-name heading-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n {{product.name}}</div>\r\n <div class=\"price body-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n \u20B9\r\n {{product.price.sellingPrice}}\r\n </div>\r\n </div>\r\n <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\">{{content?.button}}</button>\r\n </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", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (max-width: 475px){.product-img{height:250px}.default-image img{height:250px}}.add-to-cart-btn{margin-top:15px}.add-to-cart-btn button{height:35px;font-size:16px!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.SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "directive", type:
|
|
4280
4330
|
//directive
|
|
4281
4331
|
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"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }] }); }
|
|
4282
4332
|
}
|
|
@@ -4284,6 +4334,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
|
|
|
4284
4334
|
type: Component,
|
|
4285
4335
|
args: [{ selector: 'simpo-featured-products', standalone: true, imports: [CommonModule, FormsModule,
|
|
4286
4336
|
SimpoComponentModule,
|
|
4337
|
+
HttpClientModule,
|
|
4287
4338
|
//directive
|
|
4288
4339
|
AnimationDirective,
|
|
4289
4340
|
ContentFitDirective,
|
|
@@ -4299,7 +4350,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
|
|
|
4299
4350
|
}], ctorParameters: () => [{ type: Object, decorators: [{
|
|
4300
4351
|
type: Inject,
|
|
4301
4352
|
args: [PLATFORM_ID]
|
|
4302
|
-
}] }, { type: EventsService }], propDecorators: { data: [{
|
|
4353
|
+
}] }, { type: EventsService }, { type: RestService }, { type: i2$4.Router }], propDecorators: { data: [{
|
|
4303
4354
|
type: Input
|
|
4304
4355
|
}], responseData: [{
|
|
4305
4356
|
type: Input
|
|
@@ -4363,12 +4414,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
|
|
|
4363
4414
|
type: Input
|
|
4364
4415
|
}] } });
|
|
4365
4416
|
|
|
4417
|
+
var cartId = "";
|
|
4418
|
+
var orderedItems = [
|
|
4419
|
+
];
|
|
4420
|
+
var billdetails = {
|
|
4421
|
+
totalNetValue: 0,
|
|
4422
|
+
totalGrossValue: 0,
|
|
4423
|
+
totalTax: 0,
|
|
4424
|
+
totalOfferedValue: 0,
|
|
4425
|
+
deliveryCharges: 0,
|
|
4426
|
+
couponId: "",
|
|
4427
|
+
discountAmount: 0,
|
|
4428
|
+
afterDiscountAmount: 0,
|
|
4429
|
+
taxBreakup: {
|
|
4430
|
+
cgstValue: 0,
|
|
4431
|
+
sgstValue: 0,
|
|
4432
|
+
igstValue: 0
|
|
4433
|
+
}
|
|
4434
|
+
};
|
|
4435
|
+
var locationDetails = {
|
|
4436
|
+
countryId: "",
|
|
4437
|
+
cityId: "",
|
|
4438
|
+
stateId: "",
|
|
4439
|
+
localityId: "",
|
|
4440
|
+
countryName: "",
|
|
4441
|
+
cityName: "",
|
|
4442
|
+
stateName: "",
|
|
4443
|
+
localityName: "",
|
|
4444
|
+
pinCode: ""
|
|
4445
|
+
};
|
|
4446
|
+
var platform = "WEB";
|
|
4447
|
+
var totalAmount = 0;
|
|
4448
|
+
var UserCart = {
|
|
4449
|
+
cartId: cartId,
|
|
4450
|
+
orderedItems: orderedItems,
|
|
4451
|
+
billdetails: billdetails,
|
|
4452
|
+
locationDetails: locationDetails,
|
|
4453
|
+
platform: platform,
|
|
4454
|
+
totalAmount: totalAmount
|
|
4455
|
+
};
|
|
4456
|
+
|
|
4457
|
+
class CartService {
|
|
4458
|
+
constructor() { }
|
|
4459
|
+
addItemToCart(product) {
|
|
4460
|
+
const orderProduct = this.objectMapper(product);
|
|
4461
|
+
let productIndex = -1;
|
|
4462
|
+
UserCart.orderedItems.forEach((p, idx) => {
|
|
4463
|
+
if (p.getItemId == product.itemId)
|
|
4464
|
+
productIndex = idx;
|
|
4465
|
+
});
|
|
4466
|
+
if (productIndex == -1)
|
|
4467
|
+
UserCart.orderedItems.push(product);
|
|
4468
|
+
else {
|
|
4469
|
+
if (product.quantity > 0)
|
|
4470
|
+
UserCart.orderedItems[productIndex].setQuantity(orderProduct.getQuantity + 1);
|
|
4471
|
+
else
|
|
4472
|
+
UserCart.orderedItems.splice(productIndex, 1);
|
|
4473
|
+
}
|
|
4474
|
+
}
|
|
4475
|
+
objectMapper(product) {
|
|
4476
|
+
return new OrderedItems(product);
|
|
4477
|
+
}
|
|
4478
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CartService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4479
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CartService, providedIn: 'root' }); }
|
|
4480
|
+
}
|
|
4481
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CartService, decorators: [{
|
|
4482
|
+
type: Injectable,
|
|
4483
|
+
args: [{
|
|
4484
|
+
providedIn: 'root',
|
|
4485
|
+
}]
|
|
4486
|
+
}], ctorParameters: () => [] });
|
|
4487
|
+
|
|
4488
|
+
// import { rmSync } from 'fs';
|
|
4489
|
+
// import { RestService } from '../../../services/rest.service';
|
|
4490
|
+
// import { HttpClientModule } from '@angular/common/http';
|
|
4366
4491
|
class ProductDescComponent extends BaseSection {
|
|
4367
|
-
constructor(platformId, _eventService, snackBar) {
|
|
4492
|
+
constructor(platformId, _eventService, snackBar, activatedRoute, restService, cartService) {
|
|
4368
4493
|
super();
|
|
4369
4494
|
this.platformId = platformId;
|
|
4370
4495
|
this._eventService = _eventService;
|
|
4371
4496
|
this.snackBar = snackBar;
|
|
4497
|
+
this.activatedRoute = activatedRoute;
|
|
4498
|
+
this.restService = restService;
|
|
4499
|
+
this.cartService = cartService;
|
|
4372
4500
|
this.addedQuantity = 0;
|
|
4373
4501
|
if (isPlatformBrowser(this.platformId)) {
|
|
4374
4502
|
this.getScreenSize();
|
|
@@ -4379,6 +4507,15 @@ class ProductDescComponent extends BaseSection {
|
|
|
4379
4507
|
this.currentImg = this.responseData?.itemImages[0]?.imgUrl;
|
|
4380
4508
|
this.button = this.data?.action?.buttons[0];
|
|
4381
4509
|
this.buttonId = (this.data ? this.data.id : '') + (this.button ? this.button.id : '');
|
|
4510
|
+
this.activatedRoute.queryParams.subscribe((qParam) => {
|
|
4511
|
+
const productId = qParam["id"];
|
|
4512
|
+
if (productId) {
|
|
4513
|
+
this.restService.getProductByBusiness("", productId).subscribe((response) => {
|
|
4514
|
+
this.responseData = response[0];
|
|
4515
|
+
this.currentImg = this.responseData?.itemImages[0].imgUrl;
|
|
4516
|
+
});
|
|
4517
|
+
}
|
|
4518
|
+
});
|
|
4382
4519
|
}
|
|
4383
4520
|
getScreenSize() {
|
|
4384
4521
|
this.screenWidth = window.innerWidth;
|
|
@@ -4401,33 +4538,40 @@ class ProductDescComponent extends BaseSection {
|
|
|
4401
4538
|
else
|
|
4402
4539
|
this.addedQuantity = 0;
|
|
4403
4540
|
}
|
|
4541
|
+
this.addToCart(type);
|
|
4404
4542
|
}
|
|
4405
|
-
addToCart() {
|
|
4543
|
+
addToCart(type = 'ADD') {
|
|
4406
4544
|
if (this.addedQuantity < 0) {
|
|
4407
4545
|
this.snackBar.open('Please add quantity', 'close', { duration: 1500 });
|
|
4408
4546
|
return;
|
|
4409
4547
|
}
|
|
4410
|
-
|
|
4548
|
+
if (type == 'ADD')
|
|
4549
|
+
this.responseData.quantity += 1;
|
|
4550
|
+
else
|
|
4551
|
+
this.responseData.quantity -= 1;
|
|
4552
|
+
this.cartService.addItemToCart(this.responseData);
|
|
4411
4553
|
}
|
|
4412
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ProductDescComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: i2$5.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4413
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n (hovering)=\"showEditTabs($event)\">\r\n <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-6 col-12\">\r\n <div class=\"prod-img-block\">\r\n <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\">\r\n </ng-container>\r\n </div>\r\n <div class=\"item-img\">\r\n <img [src]=\"currentImg\" alt=\"\">\r\n </div>\r\n <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6 col-12 product-detail\">\r\n <div class=\"heading-large\">{{responseData?.name}}</div>\r\n <div class=\"price\">\u20B9 {{responseData?.price?.sellingPrice}}</div>\r\n <div class=\"product-desc body-large\" *ngIf=\"responseData?.
|
|
4554
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ProductDescComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: i2$5.MatSnackBar }, { token: i2$4.ActivatedRoute }, { token: RestService }, { token: CartService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4555
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n (hovering)=\"showEditTabs($event)\">\r\n <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-6 col-12\">\r\n <div class=\"prod-img-block\">\r\n <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\">\r\n </ng-container>\r\n </div>\r\n <div class=\"item-img\">\r\n <img [src]=\"currentImg\" alt=\"\">\r\n </div>\r\n <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6 col-12 product-detail\">\r\n <div class=\"heading-large\">{{responseData?.name}}</div>\r\n <div class=\"price\">\u20B9 {{responseData?.price?.sellingPrice}}</div>\r\n <div class=\"product-desc body-large\" *ngIf=\"responseData?.descriptor?.name\">{{responseData?.descriptor?.name}}</div>\r\n\r\n <div class=\"button-parent\">\r\n <div class=\"quantity\" *ngIf=\"addedQuantity\">\r\n <div class=\"plus\" (click)=\"addOrSubtractQuantity('SUBSTRACT')\">-</div>\r\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{addedQuantity}}</div>\r\n <!-- <input type=\"number\" (keyup)=\"changeQuantity(quantity.value)\" [value]=\"addedQuantity\" #quantity> -->\r\n <div class=\"minus\" (click)=\"addOrSubtractQuantity('ADD')\">+</div>\r\n </div>\r\n <div *ngIf=\"!addedQuantity\">\r\n <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\">{{data?.content?.button}}</button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"product-sku\">\r\n <div *ngIf=\"responseData?.itemInventory\">SKU :\r\n {{responseData?.itemInventory?.openingStock}}</div>\r\n <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <span\r\n *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName}} <ng-container *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n </span></div>\r\n <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n </span></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row prod-desc\" *ngIf=\"false\">\r\n <div class=\"tab-group\">\r\n <div class=\"tab\">Description</div>\r\n </div>\r\n <div style=\"margin-top: 10px;\" class=\"body-large\" *ngIf=\"responseData?.properties?.description\">{{responseData?.properties?.description}}</div>\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>\r\n</section>\r\n", styles: [".product-desc{display:flex}.row{margin-top:25px}.prod-img-block{display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px}.img-list img{height:100px;width:100%;cursor:pointer}.item-img img{height:500px;width:460px}.price{font-weight:600;font-family:Poppins;font-size:20px;margin-top:15px}.product-desc{margin-top:15px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;color:#848484;font-family:Poppins;margin-top:.5rem}.tab-group{display:flex;gap:10px;overflow-y:scroll}.tab{font-family:Poppins;font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black}@media screen and (max-width: 500px){.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column}.img-list{flex-direction:row;overflow-y:scroll}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}}.send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.body-large{color:#848484}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\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: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: HttpClientModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
|
|
4414
4556
|
//DIRECTIVE
|
|
4415
4557
|
ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }] }); }
|
|
4416
4558
|
}
|
|
4417
4559
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ProductDescComponent, decorators: [{
|
|
4418
4560
|
type: Component,
|
|
4419
|
-
args: [{ selector: 'simpo-product-desc', standalone: true, imports: [CommonModule,
|
|
4561
|
+
args: [{ selector: 'simpo-product-desc', standalone: true, imports: [CommonModule,
|
|
4562
|
+
FormsModule,
|
|
4563
|
+
HttpClientModule,
|
|
4420
4564
|
SimpoComponentModule,
|
|
4421
4565
|
//DIRECTIVE
|
|
4422
4566
|
ButtonDirectiveDirective,
|
|
4423
4567
|
AnimationDirective,
|
|
4424
4568
|
ContentFitDirective,
|
|
4425
4569
|
HoverDirective
|
|
4426
|
-
], template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n (hovering)=\"showEditTabs($event)\">\r\n <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-6 col-12\">\r\n <div class=\"prod-img-block\">\r\n <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\">\r\n </ng-container>\r\n </div>\r\n <div class=\"item-img\">\r\n <img [src]=\"currentImg\" alt=\"\">\r\n </div>\r\n <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6 col-12 product-detail\">\r\n <div class=\"heading-large\">{{responseData?.name}}</div>\r\n <div class=\"price\">\u20B9 {{responseData?.price?.sellingPrice}}</div>\r\n <div class=\"product-desc body-large\" *ngIf=\"responseData?.
|
|
4570
|
+
], template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n (hovering)=\"showEditTabs($event)\">\r\n <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-6 col-12\">\r\n <div class=\"prod-img-block\">\r\n <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\">\r\n </ng-container>\r\n </div>\r\n <div class=\"item-img\">\r\n <img [src]=\"currentImg\" alt=\"\">\r\n </div>\r\n <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6 col-12 product-detail\">\r\n <div class=\"heading-large\">{{responseData?.name}}</div>\r\n <div class=\"price\">\u20B9 {{responseData?.price?.sellingPrice}}</div>\r\n <div class=\"product-desc body-large\" *ngIf=\"responseData?.descriptor?.name\">{{responseData?.descriptor?.name}}</div>\r\n\r\n <div class=\"button-parent\">\r\n <div class=\"quantity\" *ngIf=\"addedQuantity\">\r\n <div class=\"plus\" (click)=\"addOrSubtractQuantity('SUBSTRACT')\">-</div>\r\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{addedQuantity}}</div>\r\n <!-- <input type=\"number\" (keyup)=\"changeQuantity(quantity.value)\" [value]=\"addedQuantity\" #quantity> -->\r\n <div class=\"minus\" (click)=\"addOrSubtractQuantity('ADD')\">+</div>\r\n </div>\r\n <div *ngIf=\"!addedQuantity\">\r\n <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\">{{data?.content?.button}}</button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"product-sku\">\r\n <div *ngIf=\"responseData?.itemInventory\">SKU :\r\n {{responseData?.itemInventory?.openingStock}}</div>\r\n <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <span\r\n *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName}} <ng-container *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n </span></div>\r\n <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n </span></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row prod-desc\" *ngIf=\"false\">\r\n <div class=\"tab-group\">\r\n <div class=\"tab\">Description</div>\r\n </div>\r\n <div style=\"margin-top: 10px;\" class=\"body-large\" *ngIf=\"responseData?.properties?.description\">{{responseData?.properties?.description}}</div>\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>\r\n</section>\r\n", styles: [".product-desc{display:flex}.row{margin-top:25px}.prod-img-block{display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px}.img-list img{height:100px;width:100%;cursor:pointer}.item-img img{height:500px;width:460px}.price{font-weight:600;font-family:Poppins;font-size:20px;margin-top:15px}.product-desc{margin-top:15px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;color:#848484;font-family:Poppins;margin-top:.5rem}.tab-group{display:flex;gap:10px;overflow-y:scroll}.tab{font-family:Poppins;font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black}@media screen and (max-width: 500px){.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column}.img-list{flex-direction:row;overflow-y:scroll}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}}.send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.body-large{color:#848484}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"] }]
|
|
4427
4571
|
}], ctorParameters: () => [{ type: Object, decorators: [{
|
|
4428
4572
|
type: Inject,
|
|
4429
4573
|
args: [PLATFORM_ID]
|
|
4430
|
-
}] }, { type: EventsService }, { type: i2$5.MatSnackBar }], propDecorators: { data: [{
|
|
4574
|
+
}] }, { type: EventsService }, { type: i2$5.MatSnackBar }, { type: i2$4.ActivatedRoute }, { type: RestService }, { type: CartService }], propDecorators: { data: [{
|
|
4431
4575
|
type: Input
|
|
4432
4576
|
}], responseData: [{
|
|
4433
4577
|
type: Input
|
|
@@ -4470,11 +4614,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
|
|
|
4470
4614
|
}] } });
|
|
4471
4615
|
|
|
4472
4616
|
class ProductListComponent extends BaseSection {
|
|
4473
|
-
constructor(platformId, _eventService, router) {
|
|
4617
|
+
constructor(platformId, _eventService, router, activatedRoute) {
|
|
4474
4618
|
super();
|
|
4475
4619
|
this.platformId = platformId;
|
|
4476
4620
|
this._eventService = _eventService;
|
|
4477
4621
|
this.router = router;
|
|
4622
|
+
this.activatedRoute = activatedRoute;
|
|
4478
4623
|
this.pricingMin = 0;
|
|
4479
4624
|
this.pricingMax = 100;
|
|
4480
4625
|
// will come from backend as shop and resturant can have diffrent filters
|
|
@@ -4484,6 +4629,7 @@ class ProductListComponent extends BaseSection {
|
|
|
4484
4629
|
{ name: "Early Arrival", value: "EARLY" }
|
|
4485
4630
|
];
|
|
4486
4631
|
this.screenWidth = 0;
|
|
4632
|
+
this.filterList = [];
|
|
4487
4633
|
this.categories = [
|
|
4488
4634
|
{ option: 'Women’s Clothing', status: true },
|
|
4489
4635
|
{ option: 'Man Fashion', status: false },
|
|
@@ -4503,12 +4649,27 @@ class ProductListComponent extends BaseSection {
|
|
|
4503
4649
|
this.content = this.data?.content;
|
|
4504
4650
|
this.styles = this.data?.styles;
|
|
4505
4651
|
this.button = this.data?.action.buttons[0];
|
|
4652
|
+
this.activatedRoute.queryParams.subscribe((qParam) => {
|
|
4653
|
+
const categories = qParam["category"].split("+").map((category) => category.replaceAll("_", " ")).filter((category) => category.length > 0);
|
|
4654
|
+
this.categories.forEach((category) => {
|
|
4655
|
+
category.status = categories.includes(category.option);
|
|
4656
|
+
});
|
|
4657
|
+
this.filterList = categories;
|
|
4658
|
+
});
|
|
4659
|
+
}
|
|
4660
|
+
removeFilter(filter) {
|
|
4661
|
+
this.filterList = this.filterList.filter((f) => f != filter);
|
|
4662
|
+
this.categories.forEach((category) => {
|
|
4663
|
+
category.status = this.filterList.includes(category.option);
|
|
4664
|
+
});
|
|
4665
|
+
// sorting should add
|
|
4666
|
+
this.navigateFilter("");
|
|
4506
4667
|
}
|
|
4507
4668
|
getProductWidth() {
|
|
4508
4669
|
return this.screenWidth > 475 ? (this.screenWidth < 1025 ? '25%' : 'calc(' + ((100 / (this.styles?.elementInRow || 4))) + '%)') : (this.styles?.mobileColumn === 1 ? '100%' : '50%');
|
|
4509
4670
|
}
|
|
4510
4671
|
proceedToProductDesc(productId) {
|
|
4511
|
-
this.router.navigate(['
|
|
4672
|
+
this.router.navigate(['details'], { queryParams: { id: productId } });
|
|
4512
4673
|
// this._eventService.redirectToPage.emit({redirectTo: '/details', data: {productId: productId}})
|
|
4513
4674
|
}
|
|
4514
4675
|
clearFilter() {
|
|
@@ -4519,11 +4680,14 @@ class ProductListComponent extends BaseSection {
|
|
|
4519
4680
|
}
|
|
4520
4681
|
applyFilter(category, type) {
|
|
4521
4682
|
let sorting = "";
|
|
4522
|
-
let selectedCategory = "";
|
|
4523
4683
|
if (type == "FILTER")
|
|
4524
4684
|
category.status = !category.status;
|
|
4525
4685
|
else if (type == "SORT")
|
|
4526
4686
|
sorting = category?.target?.value;
|
|
4687
|
+
this.navigateFilter(sorting);
|
|
4688
|
+
}
|
|
4689
|
+
navigateFilter(sorting) {
|
|
4690
|
+
let selectedCategory = "";
|
|
4527
4691
|
this.categories.filter((category) => category.status).map((category) => {
|
|
4528
4692
|
return {
|
|
4529
4693
|
...category,
|
|
@@ -4532,8 +4696,8 @@ class ProductListComponent extends BaseSection {
|
|
|
4532
4696
|
}).forEach((category) => selectedCategory += (category.slug + "+"));
|
|
4533
4697
|
this.router.navigate(['/'], { queryParams: { minPrice: this.pricingMin, maxPrice: this.pricingMax, category: selectedCategory, sorting: sorting } });
|
|
4534
4698
|
}
|
|
4535
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ProductListComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: i2$4.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4536
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ProductListComponent, isStandalone: true, selector: "simpo-product-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n (hovering)=\"showEditTabs($event)\">\r\n <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\" style=\"width: 20%;\">\r\n <div class=\"filter body-large\">\r\n Filters\r\n </div>\r\n <div class=\"clear\" (click)=\"clearFilter()\">\r\n Clear all\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center justify-content-between\" style=\"width: 80%;\">\r\n <div style=\"color: #6c757d82;\" class=\"fs-6 fw-normal\">Showing 1-12 of 50 Results</div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\r\n <div class=\"fs-6 fw-normal mr-3\" style=\"color: #6c757d82;\">Sort by</div>\r\n <select (change)=\"applyFilter($event, 'SORT')\">\r\n <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{filter.name}}</option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"filter-side\">\r\n\r\n <div class=\"categories-section\">\r\n <div class=\"categories heading-small\">\r\n Shop by categories\r\n </div>\r\n
|
|
4699
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ProductListComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: i2$4.Router }, { token: i2$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4700
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ProductListComponent, isStandalone: true, selector: "simpo-product-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n (hovering)=\"showEditTabs($event)\">\r\n <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\" style=\"width: 20%;\">\r\n <div class=\"filter body-large\">\r\n Filters\r\n </div>\r\n <div class=\"clear\" (click)=\"clearFilter()\">\r\n Clear all\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center justify-content-between\" style=\"width: 80%;\">\r\n <div style=\"color: #6c757d82;\" class=\"fs-6 fw-normal\">Showing 1-12 of 50 Results</div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\r\n <div class=\"fs-6 fw-normal mr-3\" style=\"color: #6c757d82;\">Sort by</div>\r\n <select (change)=\"applyFilter($event, 'SORT')\">\r\n <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{filter.name}}</option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"filter-side\">\r\n\r\n <div class=\"d-flex flex-column m-auto\" style=\"width: 95%;\">\r\n <ng-container *ngFor=\"let filter of filterList\">\r\n <div class=\"d-flex justify-content-between w-100 chip\">\r\n <span>{{filter}}</span>\r\n <span style=\"cursor: pointer;\" (click)=\"removeFilter(filter)\">X</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"categories-section\">\r\n <div class=\"categories heading-small\">\r\n Shop by categories\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let category of categories\" (click)=\"applyFilter(category, 'FILTER')\">\r\n <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"category.status\" />\r\n <div>{{category.option}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"price-section\">\r\n <div class=\"categories heading-small\">\r\n Shop by price\r\n </div>\r\n <div>\r\n <mat-slider min=\"200\" max=\"500\" style=\"width: 250px;\">\r\n <input value=\"300\" matSliderStartThumb [(ngModel)]=\"pricingMin\">\r\n <input value=\"400\" matSliderEndThumb [(ngModel)]=\"pricingMax\">\r\n </mat-slider>\r\n </div>\r\n <div class=\"price-button-section\">\r\n <div class=\"button-section\">\r\n <button (click)=\"applyFilter()\">Filter</button>\r\n </div>\r\n <div class=\"price-range\">\r\n Price: ${{ pricingMin }} - ${{ pricingMax }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n <div *ngFor=\"let product of responseData\" class=\"product\" [style.width]=\"getProductWidth()\" (click)=\"proceedToProductDesc(product.itemId)\" style=\"cursor: pointer;\">\r\n <div *ngIf=\"!(product.itemImages.length > 0 && product.itemImages[0].imgUrl)\" class=\"default-image\">\r\n <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" alt=\"\">\r\n </div>\r\n <div *ngIf=\"product.itemImages.length > 0 && product.itemImages[0].imgUrl\">\r\n <img [src]=\"product.itemImages[0].imgUrl\" alt=\"\" class=\"product-img\">\r\n </div>\r\n <div class=\"mt-2\">\r\n <div class=\"product-name heading-large text-left\">\r\n {{product.name}}</div>\r\n <div class=\"price body-large text-left\">\r\n ${{product.price.sellingPrice}}\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\">{{content?.button}}</button>\r\n </div> -->\r\n <simpo-pagnination style=\"width: 100%;\" class=\"mt-15\"></simpo-pagnination>\r\n </div>\r\n </div>\r\n </div>\r\n\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: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.add-to-cart-btn{margin-top:15px}.add-to-cart-btn button{height:35px;font-size:16px!important}.filter-side{width:20%}.filter-top-section{padding:0 2rem}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.categories{display:flex;padding:1rem 2rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 2rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem}.button-section button{position:relative;background:#0267c1;color:#fff;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px}.chip{background:#0267c1;padding:8px 15px;border-radius:3px;margin:3px 0;color:#fff;transition:.3s opacity ease}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;justify-content:space-between}.price-range{padding-right:22px;color:#93959e;font-size:15px}.right-side{width:80%}@media screen and (max-width: 475px){.product-img{height:250px}.default-image img{height:250px}.filter-side{display:none}.right-side{width:100%}}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.category-options div{position:relative;top:3px}\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: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i7.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i7.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "component", type: PagninationComponent, selector: "simpo-pagnination", inputs: ["totalPages", "currentPage"] }, { kind: "directive", type:
|
|
4537
4701
|
//directive
|
|
4538
4702
|
AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }] }); }
|
|
4539
4703
|
}
|
|
@@ -4552,11 +4716,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
|
|
|
4552
4716
|
HoverDirective,
|
|
4553
4717
|
ButtonDirectiveDirective,
|
|
4554
4718
|
MatIcon
|
|
4555
|
-
], template: "<section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n (hovering)=\"showEditTabs($event)\">\r\n <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\" style=\"width: 20%;\">\r\n <div class=\"filter body-large\">\r\n Filters\r\n </div>\r\n <div class=\"clear\" (click)=\"clearFilter()\">\r\n Clear all\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center justify-content-between\" style=\"width: 80%;\">\r\n <div style=\"color: #6c757d82;\" class=\"fs-6 fw-normal\">Showing 1-12 of 50 Results</div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\r\n <div class=\"fs-6 fw-normal mr-3\" style=\"color: #6c757d82;\">Sort by</div>\r\n <select (change)=\"applyFilter($event, 'SORT')\">\r\n <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{filter.name}}</option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"filter-side\">\r\n\r\n <div class=\"categories-section\">\r\n <div class=\"categories heading-small\">\r\n Shop by categories\r\n </div>\r\n
|
|
4719
|
+
], template: "<section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n (hovering)=\"showEditTabs($event)\">\r\n <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\" style=\"width: 20%;\">\r\n <div class=\"filter body-large\">\r\n Filters\r\n </div>\r\n <div class=\"clear\" (click)=\"clearFilter()\">\r\n Clear all\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center justify-content-between\" style=\"width: 80%;\">\r\n <div style=\"color: #6c757d82;\" class=\"fs-6 fw-normal\">Showing 1-12 of 50 Results</div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\r\n <div class=\"fs-6 fw-normal mr-3\" style=\"color: #6c757d82;\">Sort by</div>\r\n <select (change)=\"applyFilter($event, 'SORT')\">\r\n <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{filter.name}}</option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"filter-side\">\r\n\r\n <div class=\"d-flex flex-column m-auto\" style=\"width: 95%;\">\r\n <ng-container *ngFor=\"let filter of filterList\">\r\n <div class=\"d-flex justify-content-between w-100 chip\">\r\n <span>{{filter}}</span>\r\n <span style=\"cursor: pointer;\" (click)=\"removeFilter(filter)\">X</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"categories-section\">\r\n <div class=\"categories heading-small\">\r\n Shop by categories\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let category of categories\" (click)=\"applyFilter(category, 'FILTER')\">\r\n <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"category.status\" />\r\n <div>{{category.option}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"price-section\">\r\n <div class=\"categories heading-small\">\r\n Shop by price\r\n </div>\r\n <div>\r\n <mat-slider min=\"200\" max=\"500\" style=\"width: 250px;\">\r\n <input value=\"300\" matSliderStartThumb [(ngModel)]=\"pricingMin\">\r\n <input value=\"400\" matSliderEndThumb [(ngModel)]=\"pricingMax\">\r\n </mat-slider>\r\n </div>\r\n <div class=\"price-button-section\">\r\n <div class=\"button-section\">\r\n <button (click)=\"applyFilter()\">Filter</button>\r\n </div>\r\n <div class=\"price-range\">\r\n Price: ${{ pricingMin }} - ${{ pricingMax }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n <div *ngFor=\"let product of responseData\" class=\"product\" [style.width]=\"getProductWidth()\" (click)=\"proceedToProductDesc(product.itemId)\" style=\"cursor: pointer;\">\r\n <div *ngIf=\"!(product.itemImages.length > 0 && product.itemImages[0].imgUrl)\" class=\"default-image\">\r\n <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" alt=\"\">\r\n </div>\r\n <div *ngIf=\"product.itemImages.length > 0 && product.itemImages[0].imgUrl\">\r\n <img [src]=\"product.itemImages[0].imgUrl\" alt=\"\" class=\"product-img\">\r\n </div>\r\n <div class=\"mt-2\">\r\n <div class=\"product-name heading-large text-left\">\r\n {{product.name}}</div>\r\n <div class=\"price body-large text-left\">\r\n ${{product.price.sellingPrice}}\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\">{{content?.button}}</button>\r\n </div> -->\r\n <simpo-pagnination style=\"width: 100%;\" class=\"mt-15\"></simpo-pagnination>\r\n </div>\r\n </div>\r\n </div>\r\n\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: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.add-to-cart-btn{margin-top:15px}.add-to-cart-btn button{height:35px;font-size:16px!important}.filter-side{width:20%}.filter-top-section{padding:0 2rem}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.categories{display:flex;padding:1rem 2rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 2rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem}.button-section button{position:relative;background:#0267c1;color:#fff;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px}.chip{background:#0267c1;padding:8px 15px;border-radius:3px;margin:3px 0;color:#fff;transition:.3s opacity ease}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;justify-content:space-between}.price-range{padding-right:22px;color:#93959e;font-size:15px}.right-side{width:80%}@media screen and (max-width: 475px){.product-img{height:250px}.default-image img{height:250px}.filter-side{display:none}.right-side{width:100%}}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.category-options div{position:relative;top:3px}\n"] }]
|
|
4556
4720
|
}], ctorParameters: () => [{ type: Object, decorators: [{
|
|
4557
4721
|
type: Inject,
|
|
4558
4722
|
args: [PLATFORM_ID]
|
|
4559
|
-
}] }, { type: EventsService }, { type: i2$4.Router }], propDecorators: { responseData: [{
|
|
4723
|
+
}] }, { type: EventsService }, { type: i2$4.Router }, { type: i2$4.ActivatedRoute }], propDecorators: { responseData: [{
|
|
4560
4724
|
type: Input
|
|
4561
4725
|
}], data: [{
|
|
4562
4726
|
type: Input
|
|
@@ -4666,6 +4830,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
|
|
|
4666
4830
|
// updatedTimeStamp: string
|
|
4667
4831
|
// }
|
|
4668
4832
|
|
|
4833
|
+
class Product {
|
|
4834
|
+
// createdTimeStamp: string
|
|
4835
|
+
// updatedTimeStamp: string
|
|
4836
|
+
constructor(json) {
|
|
4837
|
+
this.itemId = json?.["itemId"];
|
|
4838
|
+
this.storeId = json?.["storeId"];
|
|
4839
|
+
this.name = json?.["name"];
|
|
4840
|
+
this.itemCategorisation = json?.["itemCategorisation"];
|
|
4841
|
+
this.itemInventory = json?.["itemInventory"];
|
|
4842
|
+
this.itemStatus = json?.["itemStatus"];
|
|
4843
|
+
this.itemType = json?.["itemType"];
|
|
4844
|
+
this.itemVariant = json?.["itemVariant"];
|
|
4845
|
+
this.itemImages = json?.["itemImages"];
|
|
4846
|
+
this.itemPacks = json?.["itemPacks"];
|
|
4847
|
+
this.addOnToItem = json?.["addOnToItem"];
|
|
4848
|
+
this.unit = json?.["unit"];
|
|
4849
|
+
this.price = json?.["price"];
|
|
4850
|
+
this.categoryId = json?.["categoryId"];
|
|
4851
|
+
this.descriptor = json?.["descriptor"];
|
|
4852
|
+
this.rating = json?.["rating"];
|
|
4853
|
+
this.recommended = json?.["recommended"];
|
|
4854
|
+
this.returnable = json?.["returnable"];
|
|
4855
|
+
this.availableOnCod = json?.["availableOnCod"];
|
|
4856
|
+
this.quantity = json?.["quantity"];
|
|
4857
|
+
}
|
|
4858
|
+
}
|
|
4859
|
+
|
|
4669
4860
|
/*
|
|
4670
4861
|
* Public API Surface of simpo-ui
|
|
4671
4862
|
*/
|
|
@@ -4676,5 +4867,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
|
|
|
4676
4867
|
* Generated bundle index. Do not edit.
|
|
4677
4868
|
*/
|
|
4678
4869
|
|
|
4679
|
-
export { AddNewSectionComponent, AlignContent, AnimationDirective, BANNERALIGNMENT, BANNERHALIGN, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BorderDirective, ButtonDirectiveDirective, CartComponent, ChannelType, CheckoutComponent, ChooseUsSectionComponent, ColorDirective, ColumnDirectiveDirective, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, 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, ProductDescComponent, ProductListComponent, RecentBlogPostSectionComponent, RedirectionLinkType, SPACING$1 as SPACING, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialSectionComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, VALIGN, VideoSectionComponent, ViewBlogComponent, animation, applySpacing, applyStyle, contentAlignment, fitContent, fitScreen, fontSize, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective };
|
|
4870
|
+
export { AddNewSectionComponent, AlignContent, AnimationDirective, BANNERALIGNMENT, BANNERHALIGN, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BorderDirective, ButtonDirectiveDirective, CartComponent, ChannelType, CheckoutComponent, ChooseUsSectionComponent, ColorDirective, ColumnDirectiveDirective, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, EventsService, FaqSectionComponent, FeaturedCategoryComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterSectionComponent, FooterTypes, HALIGN, HeaderButtonStyle, HeaderTextComponent, HoverDirective, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LocationSectionComponent, LogoShowcaseComponent, MapType, NavbarSectionComponent, ObjectPositionDirective, OverlayDirective, OverlayValue, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductDescComponent, ProductListComponent, RecentBlogPostSectionComponent, RedirectionLinkType, SPACING$1 as SPACING, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialSectionComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, VALIGN, VideoSectionComponent, ViewBlogComponent, animation, applySpacing, applyStyle, contentAlignment, fitContent, fitScreen, fontSize, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective };
|
|
4680
4871
|
//# sourceMappingURL=simpo-component-library.mjs.map
|