simpo-component-library 1.2.5 → 1.2.6
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/featured-products/featured-products.component.mjs +24 -10
- package/esm2022/lib/ecommerce/sections/product-list/product-list.component.mjs +27 -7
- package/esm2022/lib/ecommerce/styles/product.modal.mjs +26 -2
- package/esm2022/lib/sections/features-section/features-section.component.mjs +1 -1
- package/esm2022/lib/services/rest.service.mjs +30 -0
- package/fesm2022/simpo-component-library.mjs +97 -13
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/lib/ecommerce/sections/featured-products/featured-products.component.d.ts +6 -2
- package/lib/ecommerce/sections/product-list/product-list.component.d.ts +8 -4
- package/lib/ecommerce/styles/product.modal.d.ts +4 -16
- package/lib/sections/features-section/features-section.component.d.ts +1 -1
- package/lib/services/rest.service.d.ts +11 -0
- package/package.json +1 -1
- package/simpo-component-library-1.2.6.tgz +0 -0
- package/simpo-component-library-1.2.5.tgz +0 -0
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { Injectable } from "@angular/core";
|
|
2
|
+
import { map } from "rxjs";
|
|
3
|
+
import { Product } from "../../public-api";
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
import * as i1 from "@angular/common/http";
|
|
6
|
+
export class RestService {
|
|
7
|
+
constructor(http) {
|
|
8
|
+
this.http = http;
|
|
9
|
+
this.BASE_URL = "https://dev-api.simpo.ai/";
|
|
10
|
+
}
|
|
11
|
+
getProductByBusiness(searchTxt = "") {
|
|
12
|
+
const businessId = "1ef4fe51-6dfc-6199-b966-0f9244067fd0";
|
|
13
|
+
const payload = {
|
|
14
|
+
businessId: businessId,
|
|
15
|
+
pageNo: 0,
|
|
16
|
+
pageSize: 100,
|
|
17
|
+
searchText: searchTxt
|
|
18
|
+
};
|
|
19
|
+
return this.http.put(this.BASE_URL + `ecommerce/product/item/search`, payload).pipe(map((response) => response.data.data.map((product) => new Product(product))));
|
|
20
|
+
}
|
|
21
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: RestService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
22
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: RestService, providedIn: 'root' }); }
|
|
23
|
+
}
|
|
24
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: RestService, decorators: [{
|
|
25
|
+
type: Injectable,
|
|
26
|
+
args: [{
|
|
27
|
+
providedIn: 'root',
|
|
28
|
+
}]
|
|
29
|
+
}], ctorParameters: () => [{ type: i1.HttpClient }] });
|
|
30
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmVzdC5zZXJ2aWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc2ltcG8tdWkvc3JjL2xpYi9zZXJ2aWNlcy9yZXN0LnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMzQyxPQUFPLEVBQUUsR0FBRyxFQUFjLE1BQU0sTUFBTSxDQUFDO0FBQ3ZDLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQzs7O0FBSzNDLE1BQU0sT0FBTyxXQUFXO0lBSXBCLFlBQ3FCLElBQWdCO1FBQWhCLFNBQUksR0FBSixJQUFJLENBQVk7UUFIcEIsYUFBUSxHQUFXLDJCQUEyQixDQUFDO0lBSTVELENBQUM7SUFFTCxvQkFBb0IsQ0FBQyxZQUFvQixFQUFFO1FBQ3ZDLE1BQU0sVUFBVSxHQUFXLHNDQUFzQyxDQUFDO1FBQ2xFLE1BQU0sT0FBTyxHQUFHO1lBQ1osVUFBVSxFQUFFLFVBQVU7WUFDdEIsTUFBTSxFQUFFLENBQUM7WUFDVCxRQUFRLEVBQUUsR0FBRztZQUNiLFVBQVUsRUFBRSxTQUFTO1NBQ3hCLENBQUE7UUFDRCxPQUFPLElBQUksQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxRQUFRLEdBQUcsK0JBQStCLEVBQUUsT0FBTyxDQUFDLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLFFBQWEsRUFBQyxFQUFFLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsT0FBWSxFQUFDLEVBQUUsQ0FBQyxJQUFJLE9BQU8sQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztJQUM5SyxDQUFDOzhHQWpCUSxXQUFXO2tIQUFYLFdBQVcsY0FGUixNQUFNOzsyRkFFVCxXQUFXO2tCQUh2QixVQUFVO21CQUFDO29CQUNSLFVBQVUsRUFBRSxNQUFNO2lCQUNyQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEh0dHBDbGllbnQgfSBmcm9tIFwiQGFuZ3VsYXIvY29tbW9uL2h0dHBcIjtcclxuaW1wb3J0IHsgSW5qZWN0YWJsZSB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XHJcbmltcG9ydCB7IG1hcCwgT2JzZXJ2YWJsZSB9IGZyb20gXCJyeGpzXCI7XHJcbmltcG9ydCB7IFByb2R1Y3QgfSBmcm9tIFwiLi4vLi4vcHVibGljLWFwaVwiO1xyXG5cclxuQEluamVjdGFibGUoe1xyXG4gICAgcHJvdmlkZWRJbjogJ3Jvb3QnLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgUmVzdFNlcnZpY2Uge1xyXG5cclxuICAgIHByaXZhdGUgcmVhZG9ubHkgQkFTRV9VUkw6IHN0cmluZyA9IFwiaHR0cHM6Ly9kZXYtYXBpLnNpbXBvLmFpL1wiO1xyXG5cclxuICAgIGNvbnN0cnVjdG9yKFxyXG4gICAgICAgIHByaXZhdGUgcmVhZG9ubHkgaHR0cDogSHR0cENsaWVudFxyXG4gICAgKSB7IH1cclxuXHJcbiAgICBnZXRQcm9kdWN0QnlCdXNpbmVzcyhzZWFyY2hUeHQ6IHN0cmluZyA9IFwiXCIpIHtcclxuICAgICAgICBjb25zdCBidXNpbmVzc0lkOiBzdHJpbmcgPSBcIjFlZjRmZTUxLTZkZmMtNjE5OS1iOTY2LTBmOTI0NDA2N2ZkMFwiO1xyXG4gICAgICAgIGNvbnN0IHBheWxvYWQgPSB7XHJcbiAgICAgICAgICAgIGJ1c2luZXNzSWQ6IGJ1c2luZXNzSWQsXHJcbiAgICAgICAgICAgIHBhZ2VObzogMCxcclxuICAgICAgICAgICAgcGFnZVNpemU6IDEwMCxcclxuICAgICAgICAgICAgc2VhcmNoVGV4dDogc2VhcmNoVHh0XHJcbiAgICAgICAgfVxyXG4gICAgICAgIHJldHVybiB0aGlzLmh0dHAucHV0KHRoaXMuQkFTRV9VUkwgKyBgZWNvbW1lcmNlL3Byb2R1Y3QvaXRlbS9zZWFyY2hgLCBwYXlsb2FkKS5waXBlKG1hcCgocmVzcG9uc2U6IGFueSk9PiByZXNwb25zZS5kYXRhLmRhdGEubWFwKChwcm9kdWN0OiBhbnkpPT4gbmV3IFByb2R1Y3QocHJvZHVjdCkpKSk7XHJcbiAgICB9XHJcblxyXG59Il19
|
|
@@ -16,6 +16,9 @@ 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 { map } from 'rxjs';
|
|
20
|
+
import * as i1$1 from '@angular/common/http';
|
|
21
|
+
import { HttpClientModule } from '@angular/common/http';
|
|
19
22
|
import * as i7 from '@angular/material/slider';
|
|
20
23
|
import { MatSliderModule } from '@angular/material/slider';
|
|
21
24
|
import { MatSelectModule } from '@angular/material/select';
|
|
@@ -4247,11 +4250,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
|
|
|
4247
4250
|
args: ['mainContainer']
|
|
4248
4251
|
}] } });
|
|
4249
4252
|
|
|
4253
|
+
class RestService {
|
|
4254
|
+
constructor(http) {
|
|
4255
|
+
this.http = http;
|
|
4256
|
+
this.BASE_URL = "https://dev-api.simpo.ai/";
|
|
4257
|
+
}
|
|
4258
|
+
getProductByBusiness(searchTxt = "") {
|
|
4259
|
+
const businessId = "1ef4fe51-6dfc-6199-b966-0f9244067fd0";
|
|
4260
|
+
const payload = {
|
|
4261
|
+
businessId: businessId,
|
|
4262
|
+
pageNo: 0,
|
|
4263
|
+
pageSize: 100,
|
|
4264
|
+
searchText: searchTxt
|
|
4265
|
+
};
|
|
4266
|
+
return this.http.put(this.BASE_URL + `ecommerce/product/item/search`, payload).pipe(map((response) => response.data.data.map((product) => new Product(product))));
|
|
4267
|
+
}
|
|
4268
|
+
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 }); }
|
|
4269
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: RestService, providedIn: 'root' }); }
|
|
4270
|
+
}
|
|
4271
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: RestService, decorators: [{
|
|
4272
|
+
type: Injectable,
|
|
4273
|
+
args: [{
|
|
4274
|
+
providedIn: 'root',
|
|
4275
|
+
}]
|
|
4276
|
+
}], ctorParameters: () => [{ type: i1$1.HttpClient }] });
|
|
4277
|
+
|
|
4250
4278
|
class FeaturedProductsComponent extends BaseSection {
|
|
4251
|
-
constructor(platformId, _eventService) {
|
|
4279
|
+
constructor(platformId, _eventService, restService, router) {
|
|
4252
4280
|
super();
|
|
4253
4281
|
this.platformId = platformId;
|
|
4254
4282
|
this._eventService = _eventService;
|
|
4283
|
+
this.restService = restService;
|
|
4284
|
+
this.router = router;
|
|
4255
4285
|
this.edit = true;
|
|
4256
4286
|
this.screenWidth = 0;
|
|
4257
4287
|
if (isPlatformBrowser(this.platformId)) {
|
|
@@ -4265,6 +4295,9 @@ class FeaturedProductsComponent extends BaseSection {
|
|
|
4265
4295
|
this.content = this.data?.content;
|
|
4266
4296
|
this.styles = this.data?.styles;
|
|
4267
4297
|
this.button = this.data?.action.buttons[0];
|
|
4298
|
+
this.restService.getProductByBusiness().subscribe((response) => {
|
|
4299
|
+
this.responseData = response;
|
|
4300
|
+
});
|
|
4268
4301
|
}
|
|
4269
4302
|
getProductWidth() {
|
|
4270
4303
|
return this.screenWidth > 475 ? (this.screenWidth < 1025 ? '25%' : 'calc(' + ((100 / (this.styles?.elementInRow || 4))) + '%)') : (this.styles?.mobileColumn === 1 ? '100%' : '50%');
|
|
@@ -4273,10 +4306,13 @@ class FeaturedProductsComponent extends BaseSection {
|
|
|
4273
4306
|
return [0, (this.styles?.maximumProduct || 0)];
|
|
4274
4307
|
}
|
|
4275
4308
|
proceedToProductDesc(productId) {
|
|
4276
|
-
this.
|
|
4309
|
+
this.router.navigate([`details/${productId}`]);
|
|
4310
|
+
// this._eventService.redirectToPage.emit({redirectTo: '/details', data: {productId: productId}})
|
|
4277
4311
|
}
|
|
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: "
|
|
4312
|
+
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 }); }
|
|
4313
|
+
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)" } }, providers: [RestService], 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: "ngmodule", type:
|
|
4314
|
+
// SharedModule,
|
|
4315
|
+
HttpClientModule }, { kind: "directive", type:
|
|
4280
4316
|
//directive
|
|
4281
4317
|
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
4318
|
}
|
|
@@ -4284,6 +4320,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
|
|
|
4284
4320
|
type: Component,
|
|
4285
4321
|
args: [{ selector: 'simpo-featured-products', standalone: true, imports: [CommonModule, FormsModule,
|
|
4286
4322
|
SimpoComponentModule,
|
|
4323
|
+
// SharedModule,
|
|
4324
|
+
HttpClientModule,
|
|
4287
4325
|
//directive
|
|
4288
4326
|
AnimationDirective,
|
|
4289
4327
|
ContentFitDirective,
|
|
@@ -4295,11 +4333,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
|
|
|
4295
4333
|
TextBackgroundDirectiveDirective,
|
|
4296
4334
|
ColorDirective,
|
|
4297
4335
|
ButtonDirectiveDirective
|
|
4298
|
-
], 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"] }]
|
|
4336
|
+
], providers: [RestService], 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"] }]
|
|
4299
4337
|
}], ctorParameters: () => [{ type: Object, decorators: [{
|
|
4300
4338
|
type: Inject,
|
|
4301
4339
|
args: [PLATFORM_ID]
|
|
4302
|
-
}] }, { type: EventsService }], propDecorators: { data: [{
|
|
4340
|
+
}] }, { type: EventsService }, { type: RestService }, { type: i2$4.Router }], propDecorators: { data: [{
|
|
4303
4341
|
type: Input
|
|
4304
4342
|
}], responseData: [{
|
|
4305
4343
|
type: Input
|
|
@@ -4470,11 +4508,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
|
|
|
4470
4508
|
}] } });
|
|
4471
4509
|
|
|
4472
4510
|
class ProductListComponent extends BaseSection {
|
|
4473
|
-
constructor(platformId, _eventService, router) {
|
|
4511
|
+
constructor(platformId, _eventService, router, activatedRoute) {
|
|
4474
4512
|
super();
|
|
4475
4513
|
this.platformId = platformId;
|
|
4476
4514
|
this._eventService = _eventService;
|
|
4477
4515
|
this.router = router;
|
|
4516
|
+
this.activatedRoute = activatedRoute;
|
|
4478
4517
|
this.pricingMin = 0;
|
|
4479
4518
|
this.pricingMax = 100;
|
|
4480
4519
|
// will come from backend as shop and resturant can have diffrent filters
|
|
@@ -4484,6 +4523,7 @@ class ProductListComponent extends BaseSection {
|
|
|
4484
4523
|
{ name: "Early Arrival", value: "EARLY" }
|
|
4485
4524
|
];
|
|
4486
4525
|
this.screenWidth = 0;
|
|
4526
|
+
this.filterList = [];
|
|
4487
4527
|
this.categories = [
|
|
4488
4528
|
{ option: 'Women’s Clothing', status: true },
|
|
4489
4529
|
{ option: 'Man Fashion', status: false },
|
|
@@ -4503,6 +4543,21 @@ class ProductListComponent extends BaseSection {
|
|
|
4503
4543
|
this.content = this.data?.content;
|
|
4504
4544
|
this.styles = this.data?.styles;
|
|
4505
4545
|
this.button = this.data?.action.buttons[0];
|
|
4546
|
+
this.activatedRoute.queryParams.subscribe((qParam) => {
|
|
4547
|
+
const categories = qParam["category"].split("+").map((category) => category.replaceAll("_", " ")).filter((category) => category.length > 0);
|
|
4548
|
+
this.categories.forEach((category) => {
|
|
4549
|
+
category.status = categories.includes(category.option);
|
|
4550
|
+
});
|
|
4551
|
+
this.filterList = categories;
|
|
4552
|
+
});
|
|
4553
|
+
}
|
|
4554
|
+
removeFilter(filter) {
|
|
4555
|
+
this.filterList = this.filterList.filter((f) => f != filter);
|
|
4556
|
+
this.categories.forEach((category) => {
|
|
4557
|
+
category.status = this.filterList.includes(category.option);
|
|
4558
|
+
});
|
|
4559
|
+
// sorting should add
|
|
4560
|
+
this.navigateFilter("");
|
|
4506
4561
|
}
|
|
4507
4562
|
getProductWidth() {
|
|
4508
4563
|
return this.screenWidth > 475 ? (this.screenWidth < 1025 ? '25%' : 'calc(' + ((100 / (this.styles?.elementInRow || 4))) + '%)') : (this.styles?.mobileColumn === 1 ? '100%' : '50%');
|
|
@@ -4519,11 +4574,14 @@ class ProductListComponent extends BaseSection {
|
|
|
4519
4574
|
}
|
|
4520
4575
|
applyFilter(category, type) {
|
|
4521
4576
|
let sorting = "";
|
|
4522
|
-
let selectedCategory = "";
|
|
4523
4577
|
if (type == "FILTER")
|
|
4524
4578
|
category.status = !category.status;
|
|
4525
4579
|
else if (type == "SORT")
|
|
4526
4580
|
sorting = category?.target?.value;
|
|
4581
|
+
this.navigateFilter(sorting);
|
|
4582
|
+
}
|
|
4583
|
+
navigateFilter(sorting) {
|
|
4584
|
+
let selectedCategory = "";
|
|
4527
4585
|
this.categories.filter((category) => category.status).map((category) => {
|
|
4528
4586
|
return {
|
|
4529
4587
|
...category,
|
|
@@ -4532,8 +4590,8 @@ class ProductListComponent extends BaseSection {
|
|
|
4532
4590
|
}).forEach((category) => selectedCategory += (category.slug + "+"));
|
|
4533
4591
|
this.router.navigate(['/'], { queryParams: { minPrice: this.pricingMin, maxPrice: this.pricingMax, category: selectedCategory, sorting: sorting } });
|
|
4534
4592
|
}
|
|
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
|
|
4593
|
+
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 }); }
|
|
4594
|
+
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
4595
|
//directive
|
|
4538
4596
|
AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }] }); }
|
|
4539
4597
|
}
|
|
@@ -4552,11 +4610,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
|
|
|
4552
4610
|
HoverDirective,
|
|
4553
4611
|
ButtonDirectiveDirective,
|
|
4554
4612
|
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
|
|
4613
|
+
], 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
4614
|
}], ctorParameters: () => [{ type: Object, decorators: [{
|
|
4557
4615
|
type: Inject,
|
|
4558
4616
|
args: [PLATFORM_ID]
|
|
4559
|
-
}] }, { type: EventsService }, { type: i2$4.Router }], propDecorators: { responseData: [{
|
|
4617
|
+
}] }, { type: EventsService }, { type: i2$4.Router }, { type: i2$4.ActivatedRoute }], propDecorators: { responseData: [{
|
|
4560
4618
|
type: Input
|
|
4561
4619
|
}], data: [{
|
|
4562
4620
|
type: Input
|
|
@@ -4666,6 +4724,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
|
|
|
4666
4724
|
// updatedTimeStamp: string
|
|
4667
4725
|
// }
|
|
4668
4726
|
|
|
4727
|
+
class Product {
|
|
4728
|
+
// createdTimeStamp: string
|
|
4729
|
+
// updatedTimeStamp: string
|
|
4730
|
+
constructor(json) {
|
|
4731
|
+
this.itemId = json?.["itemId"];
|
|
4732
|
+
this.storeId = json?.["storeId"];
|
|
4733
|
+
this.name = json?.["name"];
|
|
4734
|
+
this.itemCategorisation = json?.["itemCategorisation"];
|
|
4735
|
+
this.itemInventory = json?.["itemInventory"];
|
|
4736
|
+
this.itemStatus = json?.["itemStatus"];
|
|
4737
|
+
this.itemType = json?.["itemType"];
|
|
4738
|
+
this.itemVariant = json?.["itemVariant"];
|
|
4739
|
+
this.itemImages = json?.["itemImages"];
|
|
4740
|
+
this.itemPacks = json?.["itemPacks"];
|
|
4741
|
+
this.addOnToItem = json?.["addOnToItem"];
|
|
4742
|
+
this.unit = json?.["unit"];
|
|
4743
|
+
this.price = json?.["price"];
|
|
4744
|
+
this.categoryId = json?.["categoryId"];
|
|
4745
|
+
this.descriptor = json?.["descriptor"];
|
|
4746
|
+
this.rating = json?.["rating"];
|
|
4747
|
+
this.recommended = json?.["recommended"];
|
|
4748
|
+
this.returnable = json?.["returnable"];
|
|
4749
|
+
this.availableOnCod = json?.["availableOnCod"];
|
|
4750
|
+
}
|
|
4751
|
+
}
|
|
4752
|
+
|
|
4669
4753
|
/*
|
|
4670
4754
|
* Public API Surface of simpo-ui
|
|
4671
4755
|
*/
|
|
@@ -4676,5 +4760,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
|
|
|
4676
4760
|
* Generated bundle index. Do not edit.
|
|
4677
4761
|
*/
|
|
4678
4762
|
|
|
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 };
|
|
4763
|
+
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
4764
|
//# sourceMappingURL=simpo-component-library.mjs.map
|