simpo-component-library 1.4.217 → 1.4.219
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/cart/cart.component.mjs +13 -10
- package/esm2022/lib/ecommerce/sections/featured-products/featured-products.component.mjs +4 -4
- package/esm2022/lib/ecommerce/sections/product-desc/product-desc.component.mjs +8 -5
- package/esm2022/lib/ecommerce/sections/product-list/product-list.component.mjs +40 -6
- package/esm2022/lib/ecommerce/sections/user-profile/user-profile.component.mjs +1 -3
- package/esm2022/lib/ecommerce/sections/whislist/whislist.component.mjs +10 -7
- package/esm2022/lib/ecommerce/styles/OrderedItems.modal.mjs +7 -1
- package/esm2022/lib/services/rest.service.mjs +19 -4
- package/fesm2022/simpo-component-library.mjs +94 -32
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/lib/ecommerce/sections/cart/cart.component.d.ts +3 -2
- package/lib/ecommerce/sections/product-list/product-list.component.d.ts +3 -0
- package/lib/ecommerce/sections/whislist/whislist.component.d.ts +1 -0
- package/lib/ecommerce/styles/OrderedItems.modal.d.ts +2 -0
- package/lib/services/rest.service.d.ts +12 -3
- package/package.json +1 -1
- package/simpo-component-library-1.4.218.tgz +0 -0
- package/simpo-component-library-1.4.219.tgz +0 -0
|
@@ -3081,7 +3081,12 @@ class RestService {
|
|
|
3081
3081
|
"pageNo": pageNo,
|
|
3082
3082
|
"pageSize": size
|
|
3083
3083
|
};
|
|
3084
|
-
return this.http.put(this.BASE_URL + `ecommerce/product/item/search`, payload)
|
|
3084
|
+
return this.http.put(this.BASE_URL + `ecommerce/product/item/search`, payload).pipe(map((response) => {
|
|
3085
|
+
return {
|
|
3086
|
+
count: response.data.count,
|
|
3087
|
+
data: response.data.data?.map((product) => new Product(product))
|
|
3088
|
+
};
|
|
3089
|
+
}));
|
|
3085
3090
|
}
|
|
3086
3091
|
getProductByCategoryId(categoryId) {
|
|
3087
3092
|
const payload = {
|
|
@@ -3091,7 +3096,12 @@ class RestService {
|
|
|
3091
3096
|
"pageNo": 0,
|
|
3092
3097
|
"pageSize": 10
|
|
3093
3098
|
};
|
|
3094
|
-
return this.http.put(this.BASE_URL + `ecommerce/product/item/search`, payload)
|
|
3099
|
+
return this.http.put(this.BASE_URL + `ecommerce/product/item/search`, payload).pipe(map((response) => {
|
|
3100
|
+
return {
|
|
3101
|
+
count: response.count,
|
|
3102
|
+
data: response.data.data?.map((product) => new Product(product))
|
|
3103
|
+
};
|
|
3104
|
+
}));
|
|
3095
3105
|
}
|
|
3096
3106
|
getProductByCollectionId(collectionId) {
|
|
3097
3107
|
const payload = {
|
|
@@ -3101,7 +3111,12 @@ class RestService {
|
|
|
3101
3111
|
"pageNo": 0,
|
|
3102
3112
|
"pageSize": 10
|
|
3103
3113
|
};
|
|
3104
|
-
return this.http.put(this.BASE_URL + `ecommerce/product/item/search`, payload)
|
|
3114
|
+
return this.http.put(this.BASE_URL + `ecommerce/product/item/search`, payload).pipe(map((response) => {
|
|
3115
|
+
return {
|
|
3116
|
+
count: response.count,
|
|
3117
|
+
data: response.data.data?.map((product) => new Product(product))
|
|
3118
|
+
};
|
|
3119
|
+
}));
|
|
3105
3120
|
}
|
|
3106
3121
|
generateOTP(mobile, countryCode) {
|
|
3107
3122
|
const businessId = localStorage.getItem("bId") ?? localStorage.getItem("businessId") ?? "1ef4fe51-6dfc-6199-b966-0f9244067fd0";
|
|
@@ -5129,6 +5144,12 @@ class OrderedItems {
|
|
|
5129
5144
|
this.quantity = json?.["quantity"];
|
|
5130
5145
|
this.discountedPrice = json?.["price"]?.["discountedPrice"];
|
|
5131
5146
|
this.taxAfterDiscount = json?.["taxAfterDiscount"];
|
|
5147
|
+
this.itemVariant = json?.["itemVariant"];
|
|
5148
|
+
json?.["itemVariant"]?.forEach((varient) => {
|
|
5149
|
+
if (varient.variantId == varientId) {
|
|
5150
|
+
this.itemVariant = varient;
|
|
5151
|
+
}
|
|
5152
|
+
});
|
|
5132
5153
|
}
|
|
5133
5154
|
}
|
|
5134
5155
|
|
|
@@ -5445,9 +5466,9 @@ class FeaturedProductsComponent extends BaseSection {
|
|
|
5445
5466
|
return present;
|
|
5446
5467
|
}
|
|
5447
5468
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FeaturedProductsComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$3.Router }, { token: CartService }, { token: i5$1.MatBottomSheet }, { token: StorageServiceService }, { token: i5.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5448
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FeaturedProductsComponent, isStandalone: true, selector: "simpo-featured-products", inputs: { data: "data", responseData: "responseData", index: "index", isRelatedProduct: "isRelatedProduct", edit: "edit", delete: "delete" }, outputs: { changeDetailProduct: "changeDetailProduct" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"container-fluid total-container\" [id]=\"data?.id\">\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 <ng-container *ngIf=\"!filterLoading\">\r\n <div class=\"product-parent\" *ngIf=\"responseData && responseData?.length\">\r\n <div *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\" class=\"product\"\r\n [style.width]=\"getProductWidth()\">\r\n <div *ngIf=\"!(product.itemImages?.length && product.itemImages[0].imgUrl)\" class=\"default-image\" (click)=\"proceedToProductDesc(product)\">\r\n <img src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n </div>\r\n <div *ngIf=\"product.itemImages?.length && product.itemImages[0].imgUrl\" (click)=\"proceedToProductDesc(product)\" class=\"position-relative\">\r\n <div class=\"tags\">\r\n <div class=\"tag\" *ngIf=\"product.itemInventory && product.itemInventory.lowStockQuantity < 5\">Selling Fast</div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <img [id]=\"'preview_'+idx\" [src]=\"product.itemImages[product.prviewIdx]?.imgUrl\" alt=\"\" class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\" (mouseleave)=\"product.prviewIdx = 0\">\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.length > 30 ? (product.name | slice: 0:27) + '...' : product.name }}</div>\r\n <div class=\"varient-list\" *ngIf=\"product.itemVariant?.length\">\r\n <ng-container *ngFor=\"let varient of product.itemVariant; let idx = index\">\r\n <img [src]=\"varient.variantImages[0].imgUrl\" alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\" [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\" (click)=\"selectVarient(product, varient)\">\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"price body-large d-flex\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.value}}\r\n </div>\r\n <div class=\"discounted-price\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.discountedPrice}}\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\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\" (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\r\n <div class=\"quantity\" *ngIf=\"product.quantity\">\r\n <span (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n <span>{{product.quantity}}</span>\r\n <span (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n </div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"action-btn\">\r\n <a [href]=\"data?.action?.buttons?.[1]?.content?.redirectionUrl\" simpoButtonDirective [id]=\"data?.id+(data?.action?.buttons?.[1]?.id || '')\" [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"styles?.background?.accentColor\" >{{data?.action?.buttons?.[1]?.content?.label }}</a>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n </section>\r\n</ng-container>\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading || filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer;position:relative}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:1000;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.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}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (max-width: 475px){.product-img{height:220px}.default-image img{height:250px}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.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: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "component", type: i11.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type:
|
|
5469
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FeaturedProductsComponent, isStandalone: true, selector: "simpo-featured-products", inputs: { data: "data", responseData: "responseData", index: "index", isRelatedProduct: "isRelatedProduct", edit: "edit", delete: "delete" }, outputs: { changeDetailProduct: "changeDetailProduct" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"container-fluid total-container\" [id]=\"data?.id\" 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 <ng-container *ngIf=\"!filterLoading\">\r\n <div class=\"product-parent\" *ngIf=\"responseData && responseData?.length\">\r\n <div *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\" class=\"product\"\r\n [style.width]=\"getProductWidth()\">\r\n <div *ngIf=\"!(product.itemImages?.length && product.itemImages[0].imgUrl)\" class=\"default-image\" (click)=\"proceedToProductDesc(product)\">\r\n <img src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n </div>\r\n <div *ngIf=\"product.itemImages?.length && product.itemImages[0].imgUrl\" (click)=\"proceedToProductDesc(product)\" class=\"position-relative\">\r\n <div class=\"tags\">\r\n <div class=\"tag\" *ngIf=\"product.itemInventory && product.itemInventory.lowStockQuantity < 5\">Selling Fast</div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <img [id]=\"'preview_'+idx\" [src]=\"product.itemImages[product.prviewIdx]?.imgUrl\" alt=\"\" class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\" (mouseleave)=\"product.prviewIdx = 0\">\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.length > 30 ? (product.name | slice: 0:27) + '...' : product.name }}</div>\r\n <div class=\"varient-list\" *ngIf=\"product.itemVariant?.length\">\r\n <ng-container *ngFor=\"let varient of product.itemVariant; let idx = index\">\r\n <img [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\" [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\" (click)=\"selectVarient(product, varient)\">\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"price body-large d-flex\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.value}}\r\n </div>\r\n <div class=\"discounted-price\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.discountedPrice}}\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\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\" (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\r\n <div class=\"quantity\" *ngIf=\"product.quantity\">\r\n <span (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n <span>{{product.quantity}}</span>\r\n <span (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n </div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"action-btn\">\r\n <a [href]=\"data?.action?.buttons?.[1]?.content?.redirectionUrl\" simpoButtonDirective [id]=\"data?.id+(data?.action?.buttons?.[1]?.id || '')\" [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"styles?.background?.accentColor\" >{{data?.action?.buttons?.[1]?.content?.label }}</a>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n </section>\r\n</ng-container>\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading || filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer;position:relative}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:1000;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.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}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (max-width: 475px){.product-img{height:220px}.default-image img{height:250px}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.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: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "component", type: i11.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type:
|
|
5449
5470
|
//directive
|
|
5450
|
-
MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i12.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
|
|
5471
|
+
MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { 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: "ngmodule", type: MatBottomSheetModule }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i12.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
|
|
5451
5472
|
}
|
|
5452
5473
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FeaturedProductsComponent, decorators: [{
|
|
5453
5474
|
type: Component,
|
|
@@ -5469,7 +5490,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
5469
5490
|
MatBottomSheetModule,
|
|
5470
5491
|
ButtonDirectiveDirective,
|
|
5471
5492
|
ToastModule
|
|
5472
|
-
], providers: [MessageService], template: "\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"container-fluid total-container\" [id]=\"data?.id\">\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 <ng-container *ngIf=\"!filterLoading\">\r\n <div class=\"product-parent\" *ngIf=\"responseData && responseData?.length\">\r\n <div *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\" class=\"product\"\r\n [style.width]=\"getProductWidth()\">\r\n <div *ngIf=\"!(product.itemImages?.length && product.itemImages[0].imgUrl)\" class=\"default-image\" (click)=\"proceedToProductDesc(product)\">\r\n <img src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n </div>\r\n <div *ngIf=\"product.itemImages?.length && product.itemImages[0].imgUrl\" (click)=\"proceedToProductDesc(product)\" class=\"position-relative\">\r\n <div class=\"tags\">\r\n <div class=\"tag\" *ngIf=\"product.itemInventory && product.itemInventory.lowStockQuantity < 5\">Selling Fast</div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <img [id]=\"'preview_'+idx\" [src]=\"product.itemImages[product.prviewIdx]?.imgUrl\" alt=\"\" class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\" (mouseleave)=\"product.prviewIdx = 0\">\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.length > 30 ? (product.name | slice: 0:27) + '...' : product.name }}</div>\r\n <div class=\"varient-list\" *ngIf=\"product.itemVariant?.length\">\r\n <ng-container *ngFor=\"let varient of product.itemVariant; let idx = index\">\r\n <img [src]=\"varient.variantImages[0]
|
|
5493
|
+
], providers: [MessageService], template: "\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"container-fluid total-container\" [id]=\"data?.id\" 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 <ng-container *ngIf=\"!filterLoading\">\r\n <div class=\"product-parent\" *ngIf=\"responseData && responseData?.length\">\r\n <div *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\" class=\"product\"\r\n [style.width]=\"getProductWidth()\">\r\n <div *ngIf=\"!(product.itemImages?.length && product.itemImages[0].imgUrl)\" class=\"default-image\" (click)=\"proceedToProductDesc(product)\">\r\n <img src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n </div>\r\n <div *ngIf=\"product.itemImages?.length && product.itemImages[0].imgUrl\" (click)=\"proceedToProductDesc(product)\" class=\"position-relative\">\r\n <div class=\"tags\">\r\n <div class=\"tag\" *ngIf=\"product.itemInventory && product.itemInventory.lowStockQuantity < 5\">Selling Fast</div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <img [id]=\"'preview_'+idx\" [src]=\"product.itemImages[product.prviewIdx]?.imgUrl\" alt=\"\" class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\" (mouseleave)=\"product.prviewIdx = 0\">\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.length > 30 ? (product.name | slice: 0:27) + '...' : product.name }}</div>\r\n <div class=\"varient-list\" *ngIf=\"product.itemVariant?.length\">\r\n <ng-container *ngFor=\"let varient of product.itemVariant; let idx = index\">\r\n <img [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\" [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\" (click)=\"selectVarient(product, varient)\">\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"price body-large d-flex\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.value}}\r\n </div>\r\n <div class=\"discounted-price\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.discountedPrice}}\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\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\" (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\r\n <div class=\"quantity\" *ngIf=\"product.quantity\">\r\n <span (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n <span>{{product.quantity}}</span>\r\n <span (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n </div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"action-btn\">\r\n <a [href]=\"data?.action?.buttons?.[1]?.content?.redirectionUrl\" simpoButtonDirective [id]=\"data?.id+(data?.action?.buttons?.[1]?.id || '')\" [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"styles?.background?.accentColor\" >{{data?.action?.buttons?.[1]?.content?.label }}</a>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n </section>\r\n</ng-container>\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n<ngx-skeleton-loader *ngIf=\"isLoading || filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer;position:relative}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:1000;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.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}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (max-width: 475px){.product-img{height:220px}.default-image img{height:250px}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}\n"] }]
|
|
5473
5494
|
}], ctorParameters: () => [{ type: Object, decorators: [{
|
|
5474
5495
|
type: Inject,
|
|
5475
5496
|
args: [PLATFORM_ID]
|
|
@@ -5640,7 +5661,6 @@ class ProductDescComponent extends BaseSection {
|
|
|
5640
5661
|
this.USER_CART?.forEach((item) => {
|
|
5641
5662
|
if (item.itemId == productId) {
|
|
5642
5663
|
if (this.responseData.itemVariant.length > 0) {
|
|
5643
|
-
const itemVariant = this.getItemVarient();
|
|
5644
5664
|
if (itemVariant && item.varientId == itemVariant.variantId) {
|
|
5645
5665
|
itemVariant.quantity = item.quantity;
|
|
5646
5666
|
this.responseData.quantity = item.quantity;
|
|
@@ -5745,6 +5765,8 @@ class ProductDescComponent extends BaseSection {
|
|
|
5745
5765
|
if (itemVarient) {
|
|
5746
5766
|
itemVarient.quantity = itemVarient.quantity + 1;
|
|
5747
5767
|
this.responseData.quantity = itemVarient.quantity;
|
|
5768
|
+
this.responseData.itemInventory = itemVarient.itemInventory;
|
|
5769
|
+
this.responseData.itemImages = itemVarient.variantImages;
|
|
5748
5770
|
}
|
|
5749
5771
|
this.cartService.addItemToCart(this.responseData, itemVarient?.variantId);
|
|
5750
5772
|
}
|
|
@@ -5770,6 +5792,8 @@ class ProductDescComponent extends BaseSection {
|
|
|
5770
5792
|
if (this.responseData.itemVariant?.length > 0) {
|
|
5771
5793
|
const itemVarient = this.getItemVarient();
|
|
5772
5794
|
if (itemVarient) {
|
|
5795
|
+
this.responseData.itemInventory = itemVarient.itemInventory;
|
|
5796
|
+
this.responseData.itemImages = itemVarient.variantImages;
|
|
5773
5797
|
itemVarient.wishlist = true;
|
|
5774
5798
|
this.cartService.addItemToFavourite(this.responseData, itemVarient.variantId);
|
|
5775
5799
|
}
|
|
@@ -5794,14 +5818,14 @@ class ProductDescComponent extends BaseSection {
|
|
|
5794
5818
|
}
|
|
5795
5819
|
getProductByCategory() {
|
|
5796
5820
|
this.restService.getProductByCategoryId(this.responseData?.itemCategorisation?.itemCategories?.[0]?.refId ?? "").subscribe((response) => {
|
|
5797
|
-
this.relatedProductData = response.data?.
|
|
5821
|
+
this.relatedProductData = response.data?.filter((product) => this.responseData.itemId != product.itemId);
|
|
5798
5822
|
if (this.relatedProductData?.length == 0)
|
|
5799
5823
|
this.getProductByCollection();
|
|
5800
5824
|
});
|
|
5801
5825
|
}
|
|
5802
5826
|
getProductByCollection() {
|
|
5803
5827
|
this.restService.getProductByCollectionId(this.responseData?.itemCategorisation?.itemCollection?.[0].refId ?? "").subscribe((response) => {
|
|
5804
|
-
this.relatedProductData = response.data?.
|
|
5828
|
+
this.relatedProductData = response.data?.filter((product) => this.responseData.itemId != product.itemId);
|
|
5805
5829
|
});
|
|
5806
5830
|
}
|
|
5807
5831
|
changeProduct(product) {
|
|
@@ -5829,7 +5853,7 @@ class ProductDescComponent extends BaseSection {
|
|
|
5829
5853
|
return present;
|
|
5830
5854
|
}
|
|
5831
5855
|
get isItemOutOfStock() {
|
|
5832
|
-
return this.responseData.itemInventory
|
|
5856
|
+
return this.responseData.itemInventory?.openingStock == 0;
|
|
5833
5857
|
}
|
|
5834
5858
|
get currency() {
|
|
5835
5859
|
return BUSINESS_CONSTANTS.CURRENCY;
|
|
@@ -6096,11 +6120,45 @@ class ProductListComponent extends BaseSection {
|
|
|
6096
6120
|
return;
|
|
6097
6121
|
}
|
|
6098
6122
|
product.quantity += (type == 'ADD' ? 1 : -1);
|
|
6099
|
-
|
|
6123
|
+
if (product.itemVariant.length) {
|
|
6124
|
+
const itemVarient = this.getItemVarient(product, product.varientId);
|
|
6125
|
+
if (itemVarient) {
|
|
6126
|
+
itemVarient.quantity = product.quantity;
|
|
6127
|
+
this.cartService.addItemToCart(product, itemVarient.variantId);
|
|
6128
|
+
}
|
|
6129
|
+
}
|
|
6130
|
+
else {
|
|
6131
|
+
this.cartService.addItemToCart(product);
|
|
6132
|
+
}
|
|
6100
6133
|
}
|
|
6101
6134
|
searchProduct() {
|
|
6102
6135
|
this.navigateFilter(this.sortBy ?? "lowestPrice");
|
|
6103
6136
|
}
|
|
6137
|
+
selectVarient(product, varient) {
|
|
6138
|
+
// nedd to change
|
|
6139
|
+
product.varientId = varient.variantId;
|
|
6140
|
+
product.itemImages = varient.variantImages;
|
|
6141
|
+
product.price = varient.itemVariantPrice;
|
|
6142
|
+
product.itemInventory = varient.itemInventory;
|
|
6143
|
+
product.quantity = this.getVarientQuantity(varient);
|
|
6144
|
+
product.whislist = this.isVarientPresentInWishtlist(varient);
|
|
6145
|
+
}
|
|
6146
|
+
getVarientQuantity(productVarient) {
|
|
6147
|
+
let itemQuantity = 0;
|
|
6148
|
+
this.USER_CART?.forEach((item) => {
|
|
6149
|
+
if (productVarient.variantId == item.varientId)
|
|
6150
|
+
itemQuantity = item.quantity;
|
|
6151
|
+
});
|
|
6152
|
+
return itemQuantity;
|
|
6153
|
+
}
|
|
6154
|
+
isVarientPresentInWishtlist(productVarient) {
|
|
6155
|
+
let present = false;
|
|
6156
|
+
this.USER_WISHLIST?.forEach((item) => {
|
|
6157
|
+
if (productVarient.variantId == item.varientId)
|
|
6158
|
+
present = true;
|
|
6159
|
+
});
|
|
6160
|
+
return present;
|
|
6161
|
+
}
|
|
6104
6162
|
applyFilter(category, type) {
|
|
6105
6163
|
let sorting = "";
|
|
6106
6164
|
this.pageNo = 1;
|
|
@@ -6134,8 +6192,8 @@ class ProductListComponent extends BaseSection {
|
|
|
6134
6192
|
const categoryIds = this.categories.filter((category) => category.status).map((category) => category.id);
|
|
6135
6193
|
this.filterLoading = true;
|
|
6136
6194
|
this.restService.getFilteredProduct(collectionIds, categoryIds, this.searchTxt, this.pricingMin, this.pricingMax, this.sortBy ?? "lowestPrice", this.pageNo - 1, this.size).subscribe((response) => {
|
|
6137
|
-
this.responseData = response.data
|
|
6138
|
-
this.totalPages = Math.ceil(response.
|
|
6195
|
+
this.responseData = response.data;
|
|
6196
|
+
this.totalPages = Math.ceil(response.count / this.size);
|
|
6139
6197
|
this.storageService.getUserCart().then((cartResponse) => {
|
|
6140
6198
|
cartResponse.onsuccess = (cartData) => {
|
|
6141
6199
|
this.USER_CART = cartData.target.result;
|
|
@@ -6223,7 +6281,7 @@ class ProductListComponent extends BaseSection {
|
|
|
6223
6281
|
return Math.min(this.totalCount, (((this.pageNo - 1) * this.size + 1) + this.size));
|
|
6224
6282
|
}
|
|
6225
6283
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductListComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$3.Router }, { token: i2$3.ActivatedRoute }, { token: StorageServiceService }, { token: i5$1.MatBottomSheet }, { token: i3.MatDialog }, { token: CartService }, { token: i5.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6226
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", 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)" } }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n\r\n<div class=\"input-group\" *ngIf=\"isMobile\">\r\n <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\r\n</div>\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n (hovering)=\"showEditTabs($event)\">\r\n\r\n <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\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%;margin-left: 10px;\">\r\n <div style=\"color: #6c757d82;\" class=\"fs-6 fw-normal\">Showing {{(pageNo -1)*size +1}}-{{minSize}} of {{ totalCount }} 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 w-100 onlyMobile\" style=\"gap: 5px; overflow-x: auto;\">\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.name}}</span>\r\n <span style=\"cursor: pointer; margin-left: 5px;\" (click)=\"removeFilter(filter)\">X</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"filter-side onlyDesktop\">\r\n <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\r\n </div>\r\n <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n <ng-container *ngIf=\"!filterLoading\">\r\n <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n <div *ngFor=\"let product of responseData\" class=\"product\" [style.width]=\"getProductWidth()\" style=\"cursor: pointer;\">\r\n <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\" class=\"default-image position-relative\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n <img src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n </div>\r\n <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\" class=\"position-relative\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n <img [src]=\"product?.itemImages?.[0]?.imgUrl\" alt=\"\" class=\"product-img\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n </div>\r\n <div class=\"mt-2\">\r\n <div class=\"product-name heading-large text-left\">{{product.name}}</div>\r\n <div class=\"d-flex align-item-center justify-content-between\">\r\n <div class=\"price body-large text-left d-flex align-items-center\">\r\n <!-- <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.value}}\r\n </div> -->\r\n <div class=\"discounted-price\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.discountedPrice}}\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\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\" (click)=\"addItemToCart($event, product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\r\n <div class=\"quantity\" *ngIf=\"product.quantity\">\r\n <span (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n <span>{{product.quantity}}</span>\r\n <span (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n </div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <simpo-pagnination style=\"width: 100%;\" class=\"mt-15\" [totalPages]=\"totalPages\" [currentPage]=\"pageNo\" (paginationChange)=\"paginationChange($event)\"></simpo-pagnination>\r\n </div>\r\n\r\n <section class=\"empty-cart\" *ngIf=\"responseData?.length == 0\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img style=\"height: 150px; width: 150px;\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <div class=\"heading-medium d-flex justify-content-center\">\r\n Product list is empty\r\n </div>\r\n <div class=\"description d-flex justify-content-center mt-4\">\r\n Looks like no item is present with filter. Go ahead & explore top categories.\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"bottom-filter\">\r\n <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\r\n <mat-icon>sort</mat-icon>\r\n <span>Sort by</span>\r\n </div>\r\n <div class=\"divider\"></div>\r\n <div class=\"d-flex filter-text \" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\r\n <mat-icon>filter_list</mat-icon>\r\n <span>Filter</span>\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</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading || filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #FilterSection>\r\n <section>\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.name}}</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\" *ngIf=\"categories?.length\">\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 | uppercase}}</div>\r\n </div>\r\n </div>\r\n <div class=\"categories-section\" *ngIf=\"collections?.length\">\r\n <div class=\"categories heading-small\">\r\n Shop by collections\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let collection of collections\" (click)=\"applyFilter(collection, 'FILTER')\">\r\n <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"collection.status\" />\r\n <div>{{collection.option | uppercase}}</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 class=\"mat-slider\" [min]=\"minProductPrice\" [max]=\"maxProductPrice\" style=\"width: 250px;\">\r\n <input matSliderStartThumb [(ngModel)]=\"pricingMin\">\r\n <input 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: <span [innerHtml]='currency'></span>{{ pricingMin }} - <span [innerHtml]='currency'></span>{{ pricingMax | formateAmount }}\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #SortingSection>\r\n <section style=\"padding: 10px\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\r\n <span>Sort by</span>\r\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n </div>\r\n <mat-radio-group class=\"d-flex flex-column\">\r\n <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"applyFilter($event, 'SORT')\">{{sortingType.name}}</mat-radio-button>\r\n </mat-radio-group>\r\n </section>\r\n</ng-template>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal;text-align:left}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px;text-align:left}.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 button{height:35px;font-size:16px!important}.fav-icon{position:absolute;z-index:1000;padding:5px;right:3px;top:3px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.discounted-price{margin-top:-3px}.filter-side{width:19%;position:sticky;top:0;height:fit-content}.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%;margin-left:10px}.bottom-filter{display:none}.onlyMobile{display:none!important}@media screen and (max-width: 475px){.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:block!important}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:1000;width:100%;margin-left:-12px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:220px}.default-image img{height:220px}.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}.input-group{position:relative;width:95%;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:auto}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}\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: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i7.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i7.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.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: "component", type: i11.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i14.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i14.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "component", type: PagninationComponent, selector: "simpo-pagnination", inputs: ["totalPages", "currentPage"], outputs: ["paginationChange"] }, { kind: "directive", type:
|
|
6284
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", 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)" } }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n\r\n<div class=\"input-group\" *ngIf=\"isMobile\">\r\n <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\r\n</div>\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n (hovering)=\"showEditTabs($event)\">\r\n\r\n <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\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%;margin-left: 10px;\">\r\n <div style=\"color: #6c757d82;\" class=\"fs-6 fw-normal\">Showing {{(pageNo -1)*size +1}}-{{minSize}} of {{ totalCount }} 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 w-100 onlyMobile\" style=\"gap: 5px; overflow-x: auto;\">\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.name}}</span>\r\n <span style=\"cursor: pointer; margin-left: 5px;\" (click)=\"removeFilter(filter)\">X</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"filter-side onlyDesktop\">\r\n <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\r\n </div>\r\n <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n <ng-container *ngIf=\"!filterLoading\">\r\n <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n <div *ngFor=\"let product of responseData\" class=\"product\" [style.width]=\"getProductWidth()\" style=\"cursor: pointer;\">\r\n <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\" class=\"default-image position-relative\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n <img src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n </div>\r\n <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\" class=\"position-relative\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n <img [src]=\"product?.itemImages?.[0]?.imgUrl\" alt=\"\" class=\"product-img\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n </div>\r\n <div class=\"mt-2\">\r\n <div class=\"product-name heading-large text-left\">{{product.name}}</div>\r\n <div class=\"varient-list\" *ngIf=\"product.itemVariant?.length\">\r\n <ng-container *ngFor=\"let varient of product.itemVariant; let idx = index\">\r\n <img [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\" [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\" (click)=\"selectVarient(product, varient)\">\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex align-item-center justify-content-between\">\r\n <div class=\"price body-large text-left d-flex align-items-center\">\r\n <!-- <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.value}}\r\n </div> -->\r\n <div class=\"discounted-price\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.discountedPrice}}\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\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\" (click)=\"addItemToCart($event, product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\r\n <div class=\"quantity\" *ngIf=\"product.quantity\">\r\n <span (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n <span>{{product.quantity}}</span>\r\n <span (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n </div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <simpo-pagnination style=\"width: 100%;\" class=\"mt-15\" [totalPages]=\"totalPages\" [currentPage]=\"pageNo\" (paginationChange)=\"paginationChange($event)\"></simpo-pagnination>\r\n </div>\r\n\r\n <section class=\"empty-cart\" *ngIf=\"responseData?.length == 0\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img style=\"height: 150px; width: 150px;\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <div class=\"heading-medium d-flex justify-content-center\">\r\n Product list is empty\r\n </div>\r\n <div class=\"description d-flex justify-content-center mt-4\">\r\n Looks like no item is present with filter. Go ahead & explore top categories.\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"bottom-filter\">\r\n <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\r\n <mat-icon>sort</mat-icon>\r\n <span>Sort by</span>\r\n </div>\r\n <div class=\"divider\"></div>\r\n <div class=\"d-flex filter-text \" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\r\n <mat-icon>filter_list</mat-icon>\r\n <span>Filter</span>\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</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading || filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #FilterSection>\r\n <section>\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.name}}</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\" *ngIf=\"categories?.length\">\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 | uppercase}}</div>\r\n </div>\r\n </div>\r\n <div class=\"categories-section\" *ngIf=\"collections?.length\">\r\n <div class=\"categories heading-small\">\r\n Shop by collections\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let collection of collections\" (click)=\"applyFilter(collection, 'FILTER')\">\r\n <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"collection.status\" />\r\n <div>{{collection.option | uppercase}}</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 class=\"mat-slider\" [min]=\"minProductPrice\" [max]=\"maxProductPrice\" style=\"width: 250px;\">\r\n <input matSliderStartThumb [(ngModel)]=\"pricingMin\">\r\n <input 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: <span [innerHtml]='currency'></span>{{ pricingMin }} - <span [innerHtml]='currency'></span>{{ pricingMax | formateAmount }}\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #SortingSection>\r\n <section style=\"padding: 10px\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\r\n <span>Sort by</span>\r\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n </div>\r\n <mat-radio-group class=\"d-flex flex-column\">\r\n <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"applyFilter($event, 'SORT')\">{{sortingType.name}}</mat-radio-button>\r\n </mat-radio-group>\r\n </section>\r\n</ng-template>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal;text-align:left}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px;text-align:left}.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 button{height:35px;font-size:16px!important}.fav-icon{position:absolute;z-index:1000;padding:5px;right:3px;top:3px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.discounted-price{margin-top:-3px}.filter-side{width:19%;position:sticky;top:0;height:fit-content}.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%;margin-left:10px}.bottom-filter{display:none}.onlyMobile{display:none!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:30px;width:30px;border-radius:50%;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}@media screen and (max-width: 475px){.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:block!important}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:1000;width:100%;margin-left:-12px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:220px}.default-image img{height:220px}.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}.input-group{position:relative;width:95%;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:auto}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}\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: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i7.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i7.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.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: "component", type: i11.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i14.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i14.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "component", type: PagninationComponent, selector: "simpo-pagnination", inputs: ["totalPages", "currentPage"], outputs: ["paginationChange"] }, { kind: "directive", type:
|
|
6227
6285
|
//directive
|
|
6228
6286
|
AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i15.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i15.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "pipe", type: FormateAmount, name: "formateAmount" }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i12.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
|
|
6229
6287
|
}
|
|
@@ -6246,7 +6304,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
6246
6304
|
MatRadioModule,
|
|
6247
6305
|
FormateAmount,
|
|
6248
6306
|
ToastModule
|
|
6249
|
-
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n\r\n<div class=\"input-group\" *ngIf=\"isMobile\">\r\n <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\r\n</div>\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n (hovering)=\"showEditTabs($event)\">\r\n\r\n <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\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%;margin-left: 10px;\">\r\n <div style=\"color: #6c757d82;\" class=\"fs-6 fw-normal\">Showing {{(pageNo -1)*size +1}}-{{minSize}} of {{ totalCount }} 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 w-100 onlyMobile\" style=\"gap: 5px; overflow-x: auto;\">\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.name}}</span>\r\n <span style=\"cursor: pointer; margin-left: 5px;\" (click)=\"removeFilter(filter)\">X</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"filter-side onlyDesktop\">\r\n <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\r\n </div>\r\n <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n <ng-container *ngIf=\"!filterLoading\">\r\n <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n <div *ngFor=\"let product of responseData\" class=\"product\" [style.width]=\"getProductWidth()\" style=\"cursor: pointer;\">\r\n <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\" class=\"default-image position-relative\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n <img src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n </div>\r\n <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\" class=\"position-relative\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n <img [src]=\"product?.itemImages?.[0]?.imgUrl\" alt=\"\" class=\"product-img\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n </div>\r\n <div class=\"mt-2\">\r\n <div class=\"product-name heading-large text-left\">{{product.name}}</div>\r\n <div class=\"d-flex align-item-center justify-content-between\">\r\n <div class=\"price body-large text-left d-flex align-items-center\">\r\n <!-- <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.value}}\r\n </div> -->\r\n <div class=\"discounted-price\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.discountedPrice}}\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\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\" (click)=\"addItemToCart($event, product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\r\n <div class=\"quantity\" *ngIf=\"product.quantity\">\r\n <span (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n <span>{{product.quantity}}</span>\r\n <span (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n </div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <simpo-pagnination style=\"width: 100%;\" class=\"mt-15\" [totalPages]=\"totalPages\" [currentPage]=\"pageNo\" (paginationChange)=\"paginationChange($event)\"></simpo-pagnination>\r\n </div>\r\n\r\n <section class=\"empty-cart\" *ngIf=\"responseData?.length == 0\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img style=\"height: 150px; width: 150px;\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <div class=\"heading-medium d-flex justify-content-center\">\r\n Product list is empty\r\n </div>\r\n <div class=\"description d-flex justify-content-center mt-4\">\r\n Looks like no item is present with filter. Go ahead & explore top categories.\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"bottom-filter\">\r\n <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\r\n <mat-icon>sort</mat-icon>\r\n <span>Sort by</span>\r\n </div>\r\n <div class=\"divider\"></div>\r\n <div class=\"d-flex filter-text \" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\r\n <mat-icon>filter_list</mat-icon>\r\n <span>Filter</span>\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</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading || filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #FilterSection>\r\n <section>\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.name}}</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\" *ngIf=\"categories?.length\">\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 | uppercase}}</div>\r\n </div>\r\n </div>\r\n <div class=\"categories-section\" *ngIf=\"collections?.length\">\r\n <div class=\"categories heading-small\">\r\n Shop by collections\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let collection of collections\" (click)=\"applyFilter(collection, 'FILTER')\">\r\n <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"collection.status\" />\r\n <div>{{collection.option | uppercase}}</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 class=\"mat-slider\" [min]=\"minProductPrice\" [max]=\"maxProductPrice\" style=\"width: 250px;\">\r\n <input matSliderStartThumb [(ngModel)]=\"pricingMin\">\r\n <input 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: <span [innerHtml]='currency'></span>{{ pricingMin }} - <span [innerHtml]='currency'></span>{{ pricingMax | formateAmount }}\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #SortingSection>\r\n <section style=\"padding: 10px\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\r\n <span>Sort by</span>\r\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n </div>\r\n <mat-radio-group class=\"d-flex flex-column\">\r\n <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"applyFilter($event, 'SORT')\">{{sortingType.name}}</mat-radio-button>\r\n </mat-radio-group>\r\n </section>\r\n</ng-template>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal;text-align:left}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px;text-align:left}.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 button{height:35px;font-size:16px!important}.fav-icon{position:absolute;z-index:1000;padding:5px;right:3px;top:3px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.discounted-price{margin-top:-3px}.filter-side{width:19%;position:sticky;top:0;height:fit-content}.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%;margin-left:10px}.bottom-filter{display:none}.onlyMobile{display:none!important}@media screen and (max-width: 475px){.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:block!important}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:1000;width:100%;margin-left:-12px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:220px}.default-image img{height:220px}.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}.input-group{position:relative;width:95%;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:auto}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}\n"] }]
|
|
6307
|
+
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n\r\n<div class=\"input-group\" *ngIf=\"isMobile\">\r\n <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\r\n</div>\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n (hovering)=\"showEditTabs($event)\">\r\n\r\n <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\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%;margin-left: 10px;\">\r\n <div style=\"color: #6c757d82;\" class=\"fs-6 fw-normal\">Showing {{(pageNo -1)*size +1}}-{{minSize}} of {{ totalCount }} 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 w-100 onlyMobile\" style=\"gap: 5px; overflow-x: auto;\">\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.name}}</span>\r\n <span style=\"cursor: pointer; margin-left: 5px;\" (click)=\"removeFilter(filter)\">X</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"filter-side onlyDesktop\">\r\n <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\r\n </div>\r\n <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n <ng-container *ngIf=\"!filterLoading\">\r\n <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n <div *ngFor=\"let product of responseData\" class=\"product\" [style.width]=\"getProductWidth()\" style=\"cursor: pointer;\">\r\n <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\" class=\"default-image position-relative\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n <img src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n </div>\r\n <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\" class=\"position-relative\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n <img [src]=\"product?.itemImages?.[0]?.imgUrl\" alt=\"\" class=\"product-img\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n </div>\r\n <div class=\"mt-2\">\r\n <div class=\"product-name heading-large text-left\">{{product.name}}</div>\r\n <div class=\"varient-list\" *ngIf=\"product.itemVariant?.length\">\r\n <ng-container *ngFor=\"let varient of product.itemVariant; let idx = index\">\r\n <img [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\" [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\" (click)=\"selectVarient(product, varient)\">\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex align-item-center justify-content-between\">\r\n <div class=\"price body-large text-left d-flex align-items-center\">\r\n <!-- <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.value}}\r\n </div> -->\r\n <div class=\"discounted-price\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.discountedPrice}}\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\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\" (click)=\"addItemToCart($event, product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\r\n <div class=\"quantity\" *ngIf=\"product.quantity\">\r\n <span (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n <span>{{product.quantity}}</span>\r\n <span (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n </div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <simpo-pagnination style=\"width: 100%;\" class=\"mt-15\" [totalPages]=\"totalPages\" [currentPage]=\"pageNo\" (paginationChange)=\"paginationChange($event)\"></simpo-pagnination>\r\n </div>\r\n\r\n <section class=\"empty-cart\" *ngIf=\"responseData?.length == 0\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img style=\"height: 150px; width: 150px;\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <div class=\"heading-medium d-flex justify-content-center\">\r\n Product list is empty\r\n </div>\r\n <div class=\"description d-flex justify-content-center mt-4\">\r\n Looks like no item is present with filter. Go ahead & explore top categories.\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"bottom-filter\">\r\n <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\r\n <mat-icon>sort</mat-icon>\r\n <span>Sort by</span>\r\n </div>\r\n <div class=\"divider\"></div>\r\n <div class=\"d-flex filter-text \" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\r\n <mat-icon>filter_list</mat-icon>\r\n <span>Filter</span>\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</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading || filterLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #FilterSection>\r\n <section>\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.name}}</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\" *ngIf=\"categories?.length\">\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 | uppercase}}</div>\r\n </div>\r\n </div>\r\n <div class=\"categories-section\" *ngIf=\"collections?.length\">\r\n <div class=\"categories heading-small\">\r\n Shop by collections\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let collection of collections\" (click)=\"applyFilter(collection, 'FILTER')\">\r\n <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"collection.status\" />\r\n <div>{{collection.option | uppercase}}</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 class=\"mat-slider\" [min]=\"minProductPrice\" [max]=\"maxProductPrice\" style=\"width: 250px;\">\r\n <input matSliderStartThumb [(ngModel)]=\"pricingMin\">\r\n <input 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: <span [innerHtml]='currency'></span>{{ pricingMin }} - <span [innerHtml]='currency'></span>{{ pricingMax | formateAmount }}\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #SortingSection>\r\n <section style=\"padding: 10px\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\r\n <span>Sort by</span>\r\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n </div>\r\n <mat-radio-group class=\"d-flex flex-column\">\r\n <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"applyFilter($event, 'SORT')\">{{sortingType.name}}</mat-radio-button>\r\n </mat-radio-group>\r\n </section>\r\n</ng-template>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal;text-align:left}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px;text-align:left}.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 button{height:35px;font-size:16px!important}.fav-icon{position:absolute;z-index:1000;padding:5px;right:3px;top:3px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.discounted-price{margin-top:-3px}.filter-side{width:19%;position:sticky;top:0;height:fit-content}.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%;margin-left:10px}.bottom-filter{display:none}.onlyMobile{display:none!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:30px;width:30px;border-radius:50%;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}@media screen and (max-width: 475px){.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:block!important}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:1000;width:100%;margin-left:-12px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:220px}.default-image img{height:220px}.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}.input-group{position:relative;width:95%;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:auto}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}\n"] }]
|
|
6250
6308
|
}], ctorParameters: () => [{ type: Object, decorators: [{
|
|
6251
6309
|
type: Inject,
|
|
6252
6310
|
args: [PLATFORM_ID]
|
|
@@ -6668,13 +6726,13 @@ class CartComponent extends BaseSection {
|
|
|
6668
6726
|
}
|
|
6669
6727
|
removeItemFromCart(item) {
|
|
6670
6728
|
item.quantity = 0;
|
|
6671
|
-
this.loadingItems.push(item.
|
|
6729
|
+
this.loadingItems.push(item.varientId);
|
|
6672
6730
|
if (this.USER_CART_ITEMS)
|
|
6673
|
-
this.USER_CART_ITEMS = this.USER_CART_ITEMS.filter((product) => product.
|
|
6731
|
+
this.USER_CART_ITEMS = this.USER_CART_ITEMS.filter((product) => product.varientId != item.varientId);
|
|
6674
6732
|
this.cartInfo.orderedItems = this.USER_CART_ITEMS;
|
|
6675
6733
|
this.responseData = this.cartInfo;
|
|
6676
6734
|
this.cartService.addItemFromCartPage(item, this.responseData).subscribe((response) => {
|
|
6677
|
-
this.loadingItems = this.loadingItems.filter((idx) => idx != item.
|
|
6735
|
+
this.loadingItems = this.loadingItems.filter((idx) => idx != item.varientId);
|
|
6678
6736
|
// this.responseData = this.storageService.calculateBillingDetails();
|
|
6679
6737
|
this.cartInfo.billdetails.totalGrossValue = 0;
|
|
6680
6738
|
this.cartInfo.billdetails.totalTax = 0;
|
|
@@ -6696,10 +6754,10 @@ class CartComponent extends BaseSection {
|
|
|
6696
6754
|
else {
|
|
6697
6755
|
item.quantity -= 1;
|
|
6698
6756
|
}
|
|
6699
|
-
this.loadingItems.push(item.
|
|
6757
|
+
this.loadingItems.push(item.varientId);
|
|
6700
6758
|
if (item.quantity) {
|
|
6701
6759
|
this.cartService.addItemFromCartPage(item, this.responseData).subscribe((response) => {
|
|
6702
|
-
this.loadingItems = this.loadingItems.filter((idx) => idx != item.
|
|
6760
|
+
this.loadingItems = this.loadingItems.filter((idx) => idx != item.varientId);
|
|
6703
6761
|
this.cartInfo.billdetails.totalGrossValue = 0;
|
|
6704
6762
|
this.cartInfo.billdetails.totalTax = 0;
|
|
6705
6763
|
this.cartInfo.billdetails.totalNetValue = 0;
|
|
@@ -6745,8 +6803,8 @@ class CartComponent extends BaseSection {
|
|
|
6745
6803
|
this.messageService.add({ severity: 'error', summary: 'Payment Failure', detail: 'Please try again' });
|
|
6746
6804
|
});
|
|
6747
6805
|
}
|
|
6748
|
-
isItemLoading(
|
|
6749
|
-
return this.loadingItems.includes(
|
|
6806
|
+
isItemLoading(varientId) {
|
|
6807
|
+
return this.loadingItems.includes(varientId);
|
|
6750
6808
|
}
|
|
6751
6809
|
addressSelected(index) {
|
|
6752
6810
|
this.selectedAddressIdx = index;
|
|
@@ -6754,6 +6812,9 @@ class CartComponent extends BaseSection {
|
|
|
6754
6812
|
isItemOutOfStock(product) {
|
|
6755
6813
|
return false; // need condition
|
|
6756
6814
|
}
|
|
6815
|
+
getKeys(object) {
|
|
6816
|
+
return Object.keys(object);
|
|
6817
|
+
}
|
|
6757
6818
|
get getAddressList() {
|
|
6758
6819
|
return this.userDetails ? [...this.userDetails?.addressDetailsList] : [];
|
|
6759
6820
|
}
|
|
@@ -6764,7 +6825,7 @@ class CartComponent extends BaseSection {
|
|
|
6764
6825
|
return BUSINESS_CONSTANTS.CURRENCY;
|
|
6765
6826
|
}
|
|
6766
6827
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CartComponent, deps: [{ token: EventsService }, { token: CartService }, { token: i2$3.Router }, { token: RestService }, { token: i3.MatDialog }, { token: StorageServiceService }, { token: i5.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6767
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CartComponent, isStandalone: true, selector: "simpo-cart", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\" [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\" *ngIf=\"responseData?.orderedItems?.length\">\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'BAG'}\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'ADDRESS'}\" (click)=\"currentTab = 'ADDRESS'\">Address</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'PAYMENT'}\" style=\"cursor: auto;\">Payment</span>\r\n </div>\r\n <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container [ngSwitch]=\"currentTab\">\r\n <div class=\"left-panel\" *ngSwitchCase=\"'BAG'\">\r\n <div class=\"my-bag\">\r\n My Bag <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n </div>\r\n <div class=\"cart-items\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n <div class=\"item-parent d-flex\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n </div>\r\n <div class=\"col-md-6 h-100\" [style.width.px]=\"isMobile ? '200' : ''\" style=\"margin-left: 10px;\">\r\n <div class=\"lh-23\">\r\n <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n </div>\r\n <div class=\"item-quantity\">\r\n <ng-container *ngIf=\"!isItemLoading(item.itemId)\">\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n </ng-container>\r\n <ng-container *ngIf=\"isItemLoading(item.itemId)\">\r\n <div class=\"d-flex\"> <i class=\"fa fa-spinner fa-spin\" style=\"font-size:24px; margin-right: 10px;\"></i> <span>Loading...</span></div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4 position-relative\" style=\"margin-left: auto;\">\r\n <div class=\"item-price\"><span [innerHTML]='currency'></span> {{((item.discountedPrice) * item.quantity) | number: '1.0-2'}}</div>\r\n <div>\r\n <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\" [style.right.px]=\"isMobile ? '5' : '0'\">delete</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"left-panel\" *ngSwitchCase=\"'ADDRESS'\">\r\n <simpo-address [isCart]=\"true\" [responseData]=\"getAddressList\" [data]=\"data\" (selectedAddress)=\"addressSelected($event)\"></simpo-address>\r\n </div>\r\n <div class=\"left-panel\" *ngSwitchCase=\"'PAYMENT'\"></div>\r\n </ng-container>\r\n <div class=\"right-panel\">\r\n <div class=\"my-bag\">\r\n Price Details\r\n </div>\r\n <div class=\"price-details\">\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\">Total Price</div>\r\n <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</div>\r\n </div>\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\">Total Tax</div>\r\n <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalTax ?? 0) | number: '1.0-2'}}</div>\r\n </div>\r\n <div class=\"price-parent-block\"\r\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n <div class=\"price-type\">Delivery Charge</div>\r\n <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges | number: '1.0-2'}}</div>\r\n </div>\r\n <hr>\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span> {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</div>\r\n </div>\r\n\r\n <div class=\"button-parent\">\r\n <ng-container *ngIf=\"currentTab == 'BAG'\">\r\n <div class=\"btn\" (click)=\"proceedToCheckout()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout Cart'}}</div>\r\n <div class=\"btn\" (click)=\"proceedToListPage()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue Shopping'}}</div>\r\n </ng-container>\r\n \r\n <ng-container *ngIf=\"currentTab == 'ADDRESS'\">\r\n <div class=\"btn\" (click)=\"proceedToPayment()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[2]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[2]?.content?.label ?? 'Place Order'}}</div>\r\n </ng-container>\r\n <!-- <div *ngFor=\"let button of data?.action?.buttons;let i = index\">\r\n <button class=\"btn\" (click)=\"i == 0 ? proceedToCheckout() : proceedToListPage()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{text.value}}</div>\r\n </ng-container>\r\n <!-- <div class=\"description d-flex mt-4\">\r\n Looks like you have not added anything to your cart. Go ahead & explore top categories.\r\n </div> -->\r\n </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\r\n </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important;border:1px solid lightgray}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.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}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel,.right-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap}.product-img{width:82px}.col-md-6{margin-left:18px!important}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { 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: "component", type: i11.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type:
|
|
6828
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CartComponent, isStandalone: true, selector: "simpo-cart", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\" [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\" *ngIf=\"responseData?.orderedItems?.length\">\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'BAG'}\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'ADDRESS'}\" (click)=\"currentTab = 'ADDRESS'\">Address</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'PAYMENT'}\" style=\"cursor: auto;\">Payment</span>\r\n </div>\r\n <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container [ngSwitch]=\"currentTab\">\r\n <div class=\"left-panel\" *ngSwitchCase=\"'BAG'\">\r\n <div class=\"my-bag\">\r\n My Bag <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n </div>\r\n <div class=\"cart-items\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n <div class=\"item-parent d-flex\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n </div>\r\n <div class=\"col-md-6 h-100\" [style.width.px]=\"isMobile ? '200' : ''\" style=\"margin-left: 10px;\">\r\n <div class=\"lh-23\">\r\n <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n </div>\r\n <ng-container *ngIf=\"item.itemVariant\"> \r\n <div class=\"d-flex align-items-center\" *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\r\n <div class=\"fw-bold\">{{ varient }} : </div>\r\n <!-- <div class=\"fw-normal\" style=\"margin-left: 5px; height: 13px; width: 13px; border-radius: 50%;\" *ngIf=\"varient.toLowerCase() == 'color'\" [style.backgroundColor]=\"item.itemVariant.properties[varient]\"></div> -->\r\n <div class=\"fw-normal\" style=\"margin-left: 5px;\"> {{ item.itemVariant.properties[varient] | uppercase }}</div>\r\n </div>\r\n </ng-container>\r\n <div class=\"item-quantity\">\r\n <ng-container *ngIf=\"!isItemLoading(item.varientId)\">\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n </ng-container>\r\n <ng-container *ngIf=\"isItemLoading(item.varientId)\">\r\n <div class=\"d-flex\"> <i class=\"fa fa-spinner fa-spin\" style=\"font-size:24px; margin-right: 10px;\"></i> <span>Loading...</span></div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4 position-relative\" style=\"margin-left: auto;\">\r\n <div class=\"item-price\"><span [innerHTML]='currency'></span> {{((item.discountedPrice) * item.quantity) | number: '1.0-2'}}</div>\r\n <div>\r\n <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\" [style.right.px]=\"isMobile ? '5' : '0'\">delete</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"left-panel\" *ngSwitchCase=\"'ADDRESS'\">\r\n <simpo-address [isCart]=\"true\" [responseData]=\"getAddressList\" [data]=\"data\" (selectedAddress)=\"addressSelected($event)\"></simpo-address>\r\n </div>\r\n <div class=\"left-panel\" *ngSwitchCase=\"'PAYMENT'\"></div>\r\n </ng-container>\r\n <div class=\"right-panel\">\r\n <div class=\"my-bag\">\r\n Price Details\r\n </div>\r\n <div class=\"price-details\">\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\">Total Price</div>\r\n <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</div>\r\n </div>\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\">Total Tax</div>\r\n <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalTax ?? 0) | number: '1.0-2'}}</div>\r\n </div>\r\n <div class=\"price-parent-block\"\r\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n <div class=\"price-type\">Delivery Charge</div>\r\n <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges | number: '1.0-2'}}</div>\r\n </div>\r\n <hr>\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span> {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</div>\r\n </div>\r\n\r\n <div class=\"button-parent\">\r\n <ng-container *ngIf=\"currentTab == 'BAG'\">\r\n <div class=\"btn\" (click)=\"proceedToCheckout()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout Cart'}}</div>\r\n <div class=\"btn\" (click)=\"proceedToListPage()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue Shopping'}}</div>\r\n </ng-container>\r\n \r\n <ng-container *ngIf=\"currentTab == 'ADDRESS'\">\r\n <div class=\"btn\" (click)=\"proceedToPayment()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[2]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[2]?.content?.label ?? 'Place Order'}}</div>\r\n </ng-container>\r\n <!-- <div *ngFor=\"let button of data?.action?.buttons;let i = index\">\r\n <button class=\"btn\" (click)=\"i == 0 ? proceedToCheckout() : proceedToListPage()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{text.value}}</div>\r\n </ng-container>\r\n <!-- <div class=\"description d-flex mt-4\">\r\n Looks like you have not added anything to your cart. Go ahead & explore top categories.\r\n </div> -->\r\n </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\r\n </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important;border:1px solid lightgray}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.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}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel,.right-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap}.product-img{width:82px}.col-md-6{margin-left:18px!important}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { 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: "component", type: i11.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type:
|
|
6768
6829
|
//DIRECTIVE
|
|
6769
6830
|
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"] }, { kind: "component", type: AddressComponent, selector: "simpo-address", inputs: ["responseData", "data", "isCart"], outputs: ["selectedAddress"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i12.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
|
|
6770
6831
|
}
|
|
@@ -6783,7 +6844,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
6783
6844
|
HoverDirective,
|
|
6784
6845
|
AddressComponent,
|
|
6785
6846
|
ToastModule
|
|
6786
|
-
], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\" [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\" *ngIf=\"responseData?.orderedItems?.length\">\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'BAG'}\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'ADDRESS'}\" (click)=\"currentTab = 'ADDRESS'\">Address</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'PAYMENT'}\" style=\"cursor: auto;\">Payment</span>\r\n </div>\r\n <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container [ngSwitch]=\"currentTab\">\r\n <div class=\"left-panel\" *ngSwitchCase=\"'BAG'\">\r\n <div class=\"my-bag\">\r\n My Bag <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n </div>\r\n <div class=\"cart-items\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n <div class=\"item-parent d-flex\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n </div>\r\n <div class=\"col-md-6 h-100\" [style.width.px]=\"isMobile ? '200' : ''\" style=\"margin-left: 10px;\">\r\n <div class=\"lh-23\">\r\n <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n </div>\r\n <div class=\"item-quantity\">\r\n <ng-container *ngIf=\"!isItemLoading(item.itemId)\">\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n </ng-container>\r\n <ng-container *ngIf=\"isItemLoading(item.itemId)\">\r\n <div class=\"d-flex\"> <i class=\"fa fa-spinner fa-spin\" style=\"font-size:24px; margin-right: 10px;\"></i> <span>Loading...</span></div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4 position-relative\" style=\"margin-left: auto;\">\r\n <div class=\"item-price\"><span [innerHTML]='currency'></span> {{((item.discountedPrice) * item.quantity) | number: '1.0-2'}}</div>\r\n <div>\r\n <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\" [style.right.px]=\"isMobile ? '5' : '0'\">delete</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"left-panel\" *ngSwitchCase=\"'ADDRESS'\">\r\n <simpo-address [isCart]=\"true\" [responseData]=\"getAddressList\" [data]=\"data\" (selectedAddress)=\"addressSelected($event)\"></simpo-address>\r\n </div>\r\n <div class=\"left-panel\" *ngSwitchCase=\"'PAYMENT'\"></div>\r\n </ng-container>\r\n <div class=\"right-panel\">\r\n <div class=\"my-bag\">\r\n Price Details\r\n </div>\r\n <div class=\"price-details\">\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\">Total Price</div>\r\n <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</div>\r\n </div>\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\">Total Tax</div>\r\n <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalTax ?? 0) | number: '1.0-2'}}</div>\r\n </div>\r\n <div class=\"price-parent-block\"\r\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n <div class=\"price-type\">Delivery Charge</div>\r\n <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges | number: '1.0-2'}}</div>\r\n </div>\r\n <hr>\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span> {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</div>\r\n </div>\r\n\r\n <div class=\"button-parent\">\r\n <ng-container *ngIf=\"currentTab == 'BAG'\">\r\n <div class=\"btn\" (click)=\"proceedToCheckout()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout Cart'}}</div>\r\n <div class=\"btn\" (click)=\"proceedToListPage()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue Shopping'}}</div>\r\n </ng-container>\r\n \r\n <ng-container *ngIf=\"currentTab == 'ADDRESS'\">\r\n <div class=\"btn\" (click)=\"proceedToPayment()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[2]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[2]?.content?.label ?? 'Place Order'}}</div>\r\n </ng-container>\r\n <!-- <div *ngFor=\"let button of data?.action?.buttons;let i = index\">\r\n <button class=\"btn\" (click)=\"i == 0 ? proceedToCheckout() : proceedToListPage()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{text.value}}</div>\r\n </ng-container>\r\n <!-- <div class=\"description d-flex mt-4\">\r\n Looks like you have not added anything to your cart. Go ahead & explore top categories.\r\n </div> -->\r\n </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\r\n </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important;border:1px solid lightgray}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.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}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel,.right-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap}.product-img{width:82px}.col-md-6{margin-left:18px!important}}\n"] }]
|
|
6847
|
+
], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\" [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\" *ngIf=\"responseData?.orderedItems?.length\">\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'BAG'}\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'ADDRESS'}\" (click)=\"currentTab = 'ADDRESS'\">Address</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'PAYMENT'}\" style=\"cursor: auto;\">Payment</span>\r\n </div>\r\n <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container [ngSwitch]=\"currentTab\">\r\n <div class=\"left-panel\" *ngSwitchCase=\"'BAG'\">\r\n <div class=\"my-bag\">\r\n My Bag <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n </div>\r\n <div class=\"cart-items\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n <div class=\"item-parent d-flex\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n </div>\r\n <div class=\"col-md-6 h-100\" [style.width.px]=\"isMobile ? '200' : ''\" style=\"margin-left: 10px;\">\r\n <div class=\"lh-23\">\r\n <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n </div>\r\n <ng-container *ngIf=\"item.itemVariant\"> \r\n <div class=\"d-flex align-items-center\" *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\r\n <div class=\"fw-bold\">{{ varient }} : </div>\r\n <!-- <div class=\"fw-normal\" style=\"margin-left: 5px; height: 13px; width: 13px; border-radius: 50%;\" *ngIf=\"varient.toLowerCase() == 'color'\" [style.backgroundColor]=\"item.itemVariant.properties[varient]\"></div> -->\r\n <div class=\"fw-normal\" style=\"margin-left: 5px;\"> {{ item.itemVariant.properties[varient] | uppercase }}</div>\r\n </div>\r\n </ng-container>\r\n <div class=\"item-quantity\">\r\n <ng-container *ngIf=\"!isItemLoading(item.varientId)\">\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n </ng-container>\r\n <ng-container *ngIf=\"isItemLoading(item.varientId)\">\r\n <div class=\"d-flex\"> <i class=\"fa fa-spinner fa-spin\" style=\"font-size:24px; margin-right: 10px;\"></i> <span>Loading...</span></div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4 position-relative\" style=\"margin-left: auto;\">\r\n <div class=\"item-price\"><span [innerHTML]='currency'></span> {{((item.discountedPrice) * item.quantity) | number: '1.0-2'}}</div>\r\n <div>\r\n <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\" [style.right.px]=\"isMobile ? '5' : '0'\">delete</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"left-panel\" *ngSwitchCase=\"'ADDRESS'\">\r\n <simpo-address [isCart]=\"true\" [responseData]=\"getAddressList\" [data]=\"data\" (selectedAddress)=\"addressSelected($event)\"></simpo-address>\r\n </div>\r\n <div class=\"left-panel\" *ngSwitchCase=\"'PAYMENT'\"></div>\r\n </ng-container>\r\n <div class=\"right-panel\">\r\n <div class=\"my-bag\">\r\n Price Details\r\n </div>\r\n <div class=\"price-details\">\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\">Total Price</div>\r\n <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</div>\r\n </div>\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\">Total Tax</div>\r\n <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalTax ?? 0) | number: '1.0-2'}}</div>\r\n </div>\r\n <div class=\"price-parent-block\"\r\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n <div class=\"price-type\">Delivery Charge</div>\r\n <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges | number: '1.0-2'}}</div>\r\n </div>\r\n <hr>\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span> {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</div>\r\n </div>\r\n\r\n <div class=\"button-parent\">\r\n <ng-container *ngIf=\"currentTab == 'BAG'\">\r\n <div class=\"btn\" (click)=\"proceedToCheckout()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout Cart'}}</div>\r\n <div class=\"btn\" (click)=\"proceedToListPage()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue Shopping'}}</div>\r\n </ng-container>\r\n \r\n <ng-container *ngIf=\"currentTab == 'ADDRESS'\">\r\n <div class=\"btn\" (click)=\"proceedToPayment()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[2]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[2]?.content?.label ?? 'Place Order'}}</div>\r\n </ng-container>\r\n <!-- <div *ngFor=\"let button of data?.action?.buttons;let i = index\">\r\n <button class=\"btn\" (click)=\"i == 0 ? proceedToCheckout() : proceedToListPage()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{text.value}}</div>\r\n </ng-container>\r\n <!-- <div class=\"description d-flex mt-4\">\r\n Looks like you have not added anything to your cart. Go ahead & explore top categories.\r\n </div> -->\r\n </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\r\n </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important;border:1px solid lightgray}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.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}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel,.right-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap}.product-img{width:82px}.col-md-6{margin-left:18px!important}}\n"] }]
|
|
6787
6848
|
}], ctorParameters: () => [{ type: EventsService }, { type: CartService }, { type: i2$3.Router }, { type: RestService }, { type: i3.MatDialog }, { type: StorageServiceService }, { type: i5.MessageService }], propDecorators: { data: [{
|
|
6788
6849
|
type: Input
|
|
6789
6850
|
}], responseData: [{
|
|
@@ -6980,7 +7041,7 @@ class WhislistComponent extends BaseSection {
|
|
|
6980
7041
|
this.storageService.removeProductFromWishlist(product.itemId).onsuccess = (wislistResponse) => {
|
|
6981
7042
|
console.log("Success");
|
|
6982
7043
|
// this.storageService.addProductToCart(product).onsuccess = (cartResponse) => {
|
|
6983
|
-
this.USER_WISHLIST_ITEMS = this.USER_WISHLIST_ITEMS.filter((item) => item.
|
|
7044
|
+
this.USER_WISHLIST_ITEMS = this.USER_WISHLIST_ITEMS.filter((item) => item.varientId != product.varientId);
|
|
6984
7045
|
this.wishlistInfo.orderedItems = this.USER_WISHLIST_ITEMS;
|
|
6985
7046
|
this.responseData = this.wishlistInfo;
|
|
6986
7047
|
// }
|
|
@@ -7001,14 +7062,14 @@ class WhislistComponent extends BaseSection {
|
|
|
7001
7062
|
});
|
|
7002
7063
|
}
|
|
7003
7064
|
deleteFromWhislist(product) {
|
|
7004
|
-
this.USER_WISHLIST_ITEMS = this.USER_WISHLIST_ITEMS.filter((item) => item.
|
|
7065
|
+
this.USER_WISHLIST_ITEMS = this.USER_WISHLIST_ITEMS.filter((item) => item.varientId != product.varientId);
|
|
7005
7066
|
this.wishlistInfo.orderedItems = this.USER_WISHLIST_ITEMS;
|
|
7006
7067
|
this.responseData = this.wishlistInfo;
|
|
7007
7068
|
if (this.storageService.getUser()) {
|
|
7008
7069
|
this.cartService.removeItemFromWishlistPage(product, this.wishlistInfo).subscribe((response) => { });
|
|
7009
7070
|
}
|
|
7010
7071
|
else {
|
|
7011
|
-
const transaction = this.storageService.removeProductFromWishlist(product.
|
|
7072
|
+
const transaction = this.storageService.removeProductFromWishlist(product.varientId);
|
|
7012
7073
|
}
|
|
7013
7074
|
}
|
|
7014
7075
|
addToFav(item, type) {
|
|
@@ -7018,7 +7079,7 @@ class WhislistComponent extends BaseSection {
|
|
|
7018
7079
|
item.quantity -= 1;
|
|
7019
7080
|
if (this.storageService.getUser()) {
|
|
7020
7081
|
this.wishlistInfo.orderedItems?.forEach((product) => {
|
|
7021
|
-
if (item.
|
|
7082
|
+
if (item.varientId == product.varientId)
|
|
7022
7083
|
product.quantity = item.quantity;
|
|
7023
7084
|
});
|
|
7024
7085
|
this.cartService.addItemFromWishlistPage(item, this.wishlistInfo).subscribe((response) => { });
|
|
@@ -7027,11 +7088,14 @@ class WhislistComponent extends BaseSection {
|
|
|
7027
7088
|
this.storageService.addProductToWishlist(item);
|
|
7028
7089
|
}
|
|
7029
7090
|
}
|
|
7091
|
+
getKeys(object) {
|
|
7092
|
+
return Object.keys(object);
|
|
7093
|
+
}
|
|
7030
7094
|
get currency() {
|
|
7031
7095
|
return BUSINESS_CONSTANTS.CURRENCY;
|
|
7032
7096
|
}
|
|
7033
7097
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: WhislistComponent, deps: [{ token: CartService }, { token: EventsService }, { token: StorageServiceService }, { token: RestService }, { token: i5.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7034
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: WhislistComponent, isStandalone: true, selector: "simpo-whislist", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div class=\"left-panel\">\r\n <div class=\"my-bag\">\r\n My Wishlist <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n </div>\r\n \r\n <div class=\"d-flex flex-wrap justify-content-between\" style=\"gap: 10px;\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n <div class=\"cart-items\">\r\n <div class=\"row item-parent\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n </div>\r\n <div class=\"col-md-6 h-100 item-desc\">\r\n <div class=\"lh-23\">\r\n <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{item.discountedPrice}}\r\n </div>\r\n <div class=\"d-flex action-btn\" style=\"gap: 5px;\">\r\n <div class=\"item-quantity\" *ngIf=\"item.quantity\">\r\n <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\r\n </div>\r\n <div class=\"item-quantity\" *ngIf=\"!item.quantity\" (click)=\"addToFav(item, 'ADD')\">Add Quantity</div>\r\n <div class=\"item-quantity\" (click)=\"moveToCart(item)\">Move to Cart</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"position-relative itemPrice\" style=\"margin-left: auto; width: 30%;\">\r\n <div class=\"item-price\" *ngIf=\"item.quantity\"><span [innerHTML]='currency'></span> {{(item.discountedPrice) * item.quantity}}</div>\r\n <div>\r\n <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\">delete</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <div class=\"heading-medium d-flex justify-content-center\">\r\n Your Whislist is empty\r\n </div>\r\n <div class=\"description d-flex mt-4\">\r\n Looks like you have not added anything to your Whislist. Go ahead & explore top categories.\r\n </div>\r\n </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 \r\n </section>\r\n</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>", styles: [".cart-parent{display:flex;flex-wrap:wrap;margin-top:15px;gap:20px}.left-panel{width:100%}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.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}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media only screen and (max-width: 475px){.cart-parent{flex-direction:column}.item-parent{flex-direction:row!important;flex-wrap:nowrap!important}.cart-items,.left-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-desc{width:73%}.itemPrice{width:24%!important}.action-btn{flex-wrap:wrap}.action-btn .item-quantity{width:100%;text-align:center;justify-content:center!important}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "component", type: i11.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { 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: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i12.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
|
|
7098
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: WhislistComponent, isStandalone: true, selector: "simpo-whislist", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\" [id]=\"data?.id\"\r\n [simpoAnimation]=\"styles?.animation\">\r\n <div class=\"left-panel\">\r\n <div class=\"my-bag\">\r\n My Wishlist <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n </div>\r\n\r\n <div class=\"d-flex flex-wrap justify-content-between\" style=\"gap: 10px;\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n <div class=\"cart-items\">\r\n <div class=\"row item-parent\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n </div>\r\n <div class=\"col-md-6 h-100 item-desc\">\r\n <div class=\"lh-23\">\r\n <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{item.discountedPrice}}\r\n </div>\r\n <ng-container *ngIf=\"item.itemVariant\"> \r\n <div class=\"d-flex align-items-center\" *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\r\n <div class=\"fw-bold\">{{ varient }} : </div>\r\n <!-- <div class=\"fw-normal\" style=\"margin-left: 5px; height: 13px; width: 13px; border-radius: 50%;\" *ngIf=\"varient.toLowerCase() == 'color'\" [style.backgroundColor]=\"item.itemVariant.properties[varient]\"></div> -->\r\n <div class=\"fw-normal\" style=\"margin-left: 5px;\"> {{ item.itemVariant.properties[varient] | uppercase }}</div>\r\n </div>\r\n </ng-container>\r\n <div class=\"d-flex action-btn\" style=\"gap: 5px;\">\r\n <div class=\"item-quantity\" *ngIf=\"item.quantity\">\r\n <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\r\n </div>\r\n <div class=\"item-quantity\" *ngIf=\"!item.quantity\" (click)=\"addToFav(item, 'ADD')\">Add Quantity\r\n </div>\r\n <div class=\"item-quantity\" (click)=\"moveToCart(item)\">Move to Cart</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"position-relative itemPrice\" style=\"margin-left: auto; width: 30%;\">\r\n <div class=\"item-price\" *ngIf=\"item.quantity\"><span [innerHTML]='currency'></span>\r\n {{(item.discountedPrice) * item.quantity}}</div>\r\n <div>\r\n <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\">delete</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <div class=\"heading-medium d-flex justify-content-center\">\r\n Your Whislist is empty\r\n </div>\r\n <div class=\"description d-flex mt-4\">\r\n Looks like you have not added anything to your Whislist. Go ahead & explore top categories.\r\n </div>\r\n </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\r\n </section>\r\n</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>", styles: [".cart-parent{display:flex;flex-wrap:wrap;margin-top:15px;gap:20px}.left-panel{width:100%}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.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}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media only screen and (max-width: 475px){.cart-parent{flex-direction:column}.item-parent{flex-direction:row!important;flex-wrap:nowrap!important}.cart-items,.left-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-desc{width:73%}.itemPrice{width:24%!important}.action-btn{flex-wrap:wrap}.action-btn .item-quantity{width:100%;text-align:center;justify-content:center!important}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "component", type: i11.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { 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.UpperCasePipe, name: "uppercase" }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i12.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
|
|
7035
7099
|
}
|
|
7036
7100
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: WhislistComponent, decorators: [{
|
|
7037
7101
|
type: Component,
|
|
@@ -7045,7 +7109,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
7045
7109
|
ContentFitDirective,
|
|
7046
7110
|
HoverDirective,
|
|
7047
7111
|
ToastModule
|
|
7048
|
-
], providers: [MessageService], template: "
|
|
7112
|
+
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"></p-toast>\r\n<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\" [id]=\"data?.id\"\r\n [simpoAnimation]=\"styles?.animation\">\r\n <div class=\"left-panel\">\r\n <div class=\"my-bag\">\r\n My Wishlist <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n </div>\r\n\r\n <div class=\"d-flex flex-wrap justify-content-between\" style=\"gap: 10px;\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n <div class=\"cart-items\">\r\n <div class=\"row item-parent\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n </div>\r\n <div class=\"col-md-6 h-100 item-desc\">\r\n <div class=\"lh-23\">\r\n <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{item.discountedPrice}}\r\n </div>\r\n <ng-container *ngIf=\"item.itemVariant\"> \r\n <div class=\"d-flex align-items-center\" *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\r\n <div class=\"fw-bold\">{{ varient }} : </div>\r\n <!-- <div class=\"fw-normal\" style=\"margin-left: 5px; height: 13px; width: 13px; border-radius: 50%;\" *ngIf=\"varient.toLowerCase() == 'color'\" [style.backgroundColor]=\"item.itemVariant.properties[varient]\"></div> -->\r\n <div class=\"fw-normal\" style=\"margin-left: 5px;\"> {{ item.itemVariant.properties[varient] | uppercase }}</div>\r\n </div>\r\n </ng-container>\r\n <div class=\"d-flex action-btn\" style=\"gap: 5px;\">\r\n <div class=\"item-quantity\" *ngIf=\"item.quantity\">\r\n <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\r\n </div>\r\n <div class=\"item-quantity\" *ngIf=\"!item.quantity\" (click)=\"addToFav(item, 'ADD')\">Add Quantity\r\n </div>\r\n <div class=\"item-quantity\" (click)=\"moveToCart(item)\">Move to Cart</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"position-relative itemPrice\" style=\"margin-left: auto; width: 30%;\">\r\n <div class=\"item-price\" *ngIf=\"item.quantity\"><span [innerHTML]='currency'></span>\r\n {{(item.discountedPrice) * item.quantity}}</div>\r\n <div>\r\n <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\">delete</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <div class=\"heading-medium d-flex justify-content-center\">\r\n Your Whislist is empty\r\n </div>\r\n <div class=\"description d-flex mt-4\">\r\n Looks like you have not added anything to your Whislist. Go ahead & explore top categories.\r\n </div>\r\n </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\r\n </section>\r\n</ng-container>\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>", styles: [".cart-parent{display:flex;flex-wrap:wrap;margin-top:15px;gap:20px}.left-panel{width:100%}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.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}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media only screen and (max-width: 475px){.cart-parent{flex-direction:column}.item-parent{flex-direction:row!important;flex-wrap:nowrap!important}.cart-items,.left-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-desc{width:73%}.itemPrice{width:24%!important}.action-btn{flex-wrap:wrap}.action-btn .item-quantity{width:100%;text-align:center;justify-content:center!important}}\n"] }]
|
|
7049
7113
|
}], ctorParameters: () => [{ type: CartService }, { type: EventsService }, { type: StorageServiceService }, { type: RestService }, { type: i5.MessageService }], propDecorators: { responseData: [{
|
|
7050
7114
|
type: Input
|
|
7051
7115
|
}], data: [{
|
|
@@ -7301,10 +7365,8 @@ class UserProfileComponent extends BaseSection {
|
|
|
7301
7365
|
}
|
|
7302
7366
|
async editProfileData(type) {
|
|
7303
7367
|
// TODO: Should be OTP based validation
|
|
7304
|
-
// debugger;
|
|
7305
7368
|
// if (!this.userDetails)
|
|
7306
7369
|
// return;
|
|
7307
|
-
// debugger;
|
|
7308
7370
|
// if (type == "EMAIL") {
|
|
7309
7371
|
// const { value: email } = await Swal.fire({
|
|
7310
7372
|
// title: "User Details",
|