simpo-component-library 1.3.0 → 1.3.1

package/fesm2022/simpo-component-library.mjs

@@ -11,15 +11,15 @@ import { MatDialogModule } from '@angular/material/dialog';
 import * as i2$3 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i1 from '@angular/platform-browser';
-import * as i2$4 from '@angular/router';
-import * as i2$5 from '@angular/material/snack-bar';
-import * as i2$6 from 'ngx-skeleton-loader';
+import * as i3 from '@angular/router';
+import * as i2$4 from '@angular/material/snack-bar';
+import * as i2$5 from 'ngx-skeleton-loader';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import * as mapboxgl from 'mapbox-gl';
 import * as i1$1 from '@angular/common/http';
 import { HttpClientModule } from '@angular/common/http';
 import { map } from 'rxjs';
-import * as i7 from '@angular/material/slider';
+import * as i8 from '@angular/material/slider';
 import { MatSliderModule } from '@angular/material/slider';
 import { MatSelectModule } from '@angular/material/select';
 
@@ -2980,10 +2980,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                 args: ['simpoSticky']
             }] } });
 
+var cartId = "";
+var orderedItems = [
+];
+var billdetails = {
+	totalNetValue: 0,
+	totalGrossValue: 0,
+	totalTax: 0,
+	totalOfferedValue: 0,
+	deliveryCharges: 0,
+	couponId: "",
+	discountAmount: 0,
+	afterDiscountAmount: 0,
+	taxBreakup: {
+		cgstValue: 0,
+		sgstValue: 0,
+		igstValue: 0
+	}
+};
+var locationDetails = {
+	countryId: "",
+	cityId: "",
+	stateId: "",
+	localityId: "",
+	countryName: "",
+	cityName: "",
+	stateName: "",
+	localityName: "",
+	pinCode: ""
+};
+var platform = "WEB";
+var totalAmount = 0;
+var UserCart = {
+	cartId: cartId,
+	orderedItems: orderedItems,
+	billdetails: billdetails,
+	locationDetails: locationDetails,
+	platform: platform,
+	totalAmount: totalAmount
+};
+
 class NavbarSectionComponent {
-    constructor(_eventService, router) {
+    constructor(_eventService, router, activatedRoute) {
         this._eventService = _eventService;
         this.router = router;
+        this.activatedRoute = activatedRoute;
         this.edit = false;
         this.scrollValue = 0;
         this.color = '#000000';
@@ -2993,7 +3034,10 @@ class NavbarSectionComponent {
         this.getScreenSize();
     }
     searchProducts() {
-        this.router.navigate(['/'], { queryParams: { searchTxt: this.searchText } });
+        if (this.searchText.length > 2)
+            this.router.navigate(['/list'], { queryParams: { searchTxt: this.searchText } });
+        else
+            this.router.navigate([''], { queryParams: { searchTxt: this.searchText } });
     }
     goToAccount() {
         this.router.navigate(['/profile']);
@@ -3012,6 +3056,9 @@ class NavbarSectionComponent {
         this.content = this.data?.content;
         this.style = this.data?.styles;
         this.action = this.data?.action;
+        this.activatedRoute.queryParams.subscribe((qParam) => {
+            this.searchText = qParam["searchTxt"];
+        });
         // if (this.style?.background && this.nextComponent.styles.merge) {
         //   this.style.background.color = this.nextComponent.styles.background.color;
         //   this.style.background.accentColor = this.nextComponent.styles.background.accentColor;
@@ -3079,8 +3126,11 @@ class NavbarSectionComponent {
             this._eventService.editSection.emit({ data: this.data });
         }, 100);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: NavbarSectionComponent, deps: [{ token: EventsService }, { token: i2$4.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: NavbarSectionComponent, isStandalone: true, selector: "simpo-navbar-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\" [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\r\n  <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\">\r\n    <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\">\r\n    <div class=\"container-fluid position-relative \">\r\n      <div class=\"w-50 left-logo-text d-flex\">\r\n        <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n        <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n          <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n            <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n            loading=\"lazy\">\r\n          </div>\r\n          <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n            <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n          *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\r\n          <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n          loading=\"lazy\">\r\n        </div>\r\n\r\n        <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"isEcommerceWebsite && screenWidth > 768\">\r\n          <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n            <a class=\"nav-link dropdown-toggle mx-2\" href=\"#\" [id]=\"'navbarDropdownMenuLink_' + idx\" role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">{{ link | uppercase }}</a>\r\n            <ul class=\"dropdown-menu fs-6 position-absolute\" [attr.aria-labelledby]=\"'navbarDropdownMenuLink_'+idx\">\r\n              <li *ngFor=\"let value of content?.ecomLinks?.[link]\"><a class=\"dropdown-item\" (click)=\"applyFilter(value)\">{{value}}</a></li>\r\n            </ul>\r\n          </ng-container>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"w-50 right-btn d-flex justify-content-end\">\r\n        <div *ngIf=\"screenWidth <= 768 && isEcommerceWebsite\" class=\"d-flex align-items-center justify-content-around\">\r\n          <i class=\"fa fa-search mx-2\" aria-hidden=\"true\"></i>\r\n          <mat-icon class=\"mx-2\">add_shopping_cart</mat-icon>\r\n          <mat-icon class=\"mx-2\">person_outline</mat-icon>\r\n        </div>\r\n        <button class=\"navbar-toggler menu-icon\" [simpoColor]=\"simpoColor\" [id]=\"data?.id\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\" *ngIf=\"screenWidth < 769\"\r\n          aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n          <hr>\r\n          <hr>\r\n          <hr>\r\n        </button>\r\n      </div>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <div class=\"collapse navbar-collapse\" *ngIf=\"screenWidth > 768\">\r\n          <div class=\"navbar-nav align-items-center\">\r\n            <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n              <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n                <ng-container *ngIf=\"item.showHeader\">\r\n                  <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"\r\n                  [bgColor]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n                </ng-container>\r\n              </ng-container>\r\n            </div>\r\n            <div class=\"d-flex\">\r\n              <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                  <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                    <div style=\"position: relative;margin-right: 10px;\">\r\n                      <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex\">\r\n              <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n                <div *ngFor=\"let button of action?.buttons\">\r\n                  <button class=\"button\" (click)=\"redirectTo(button?.content)\" simpoButtonDirective [scrollValue]=\"scrollValue\" [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button.styles\" [color]=\"accentColor\">{{button?.content?.label}}</button>\r\n                  <!-- <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                    [color]=\"data?.styles?.background?.accentColor\"></app-button-element> -->\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth <= 768\">\r\n          <div class=\"inner-height p-4\">\r\n            <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n              <div class=\"d-flex flex-column w-100\">\r\n                <div class=\"d-flex justify-content-between align-items-center\">\r\n                  <div class=\"title-row\">\r\n                    <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n                      <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n                        <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                        loading=\"lazy\">\r\n                      </div>\r\n                      <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n                        <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"d-flex gap-3 align-items-center\"\r\n                      *ngIf=\"content?.logo?.isImage\">\r\n                      <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                      loading=\"lazy\">\r\n                    </div>\r\n\r\n                  </div>\r\n                  <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n                    <mat-icon>close</mat-icon>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n                  <div class=\"d-flex flex-column gap-4 w-100\">\r\n                    <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n                      <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n                    </ng-container>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"d-flex flex-column\">\r\n                <div class=\"d-flex\">\r\n                  <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                    [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                    <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                      <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                        <div style=\"position: relative;margin-right: 10px;\">\r\n                          <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                        </div>\r\n                      </ng-container>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex mt-4\">\r\n                  <div *ngIf=\"action?.display\" class=\"button-display\">\r\n                    <div *ngFor=\"let button of action?.buttons\">\r\n                      <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                        [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <div class=\"collapse navbar-collapse position-absolute pr-0\" style=\"right: 0px;\" *ngIf=\"screenWidth > 768\">\r\n          <div class=\"container-fluid justify-content-between pr-0 d-flex\" style=\"max-width: 50vw;\">\r\n            <div class=\"input-group\">\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)=\"searchProducts()\">\r\n            </div>\r\n            <div class=\"d-flex flex-column align-items-center mx-3\" style=\"width: 60px; cursor: pointer;\" (click)=\"goToCart()\">\r\n              <mat-icon>add_shopping_cart</mat-icon>\r\n              <span class=\"text-dark fw-normal fs-6\">Bag</span>\r\n            </div>\r\n            <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n              <mat-icon>person_outline</mat-icon>\r\n              <span class=\"text-dark fw-normal fs-6\">Account</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </nav>\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>\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important}.right-btn{width:15%!important}}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:370px;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}.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}.mat-icon{color:#000}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: SimpoFooterLayoutDirective, selector: "[simpoFooterLayout]", inputs: ["simpoFooterLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
+    get getCartItemsCount() {
+        return UserCart?.orderedItems?.length;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: NavbarSectionComponent, deps: [{ token: EventsService }, { token: i3.Router }, { token: i3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: NavbarSectionComponent, isStandalone: true, selector: "simpo-navbar-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\" [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\r\n  <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\">\r\n    <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\">\r\n    <div class=\"container-fluid position-relative \">\r\n      <div class=\"w-50 left-logo-text d-flex\">\r\n        <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n        <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n          <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n            <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n            loading=\"lazy\">\r\n          </div>\r\n          <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n            <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n          *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\r\n          <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n          loading=\"lazy\">\r\n        </div>\r\n\r\n        <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"isEcommerceWebsite && screenWidth > 768\">\r\n          <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n            <a class=\"nav-link dropdown-toggle mx-2\" href=\"#\" [id]=\"'navbarDropdownMenuLink_' + idx\" role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">{{ link | uppercase }}</a>\r\n            <ul class=\"dropdown-menu fs-6 position-absolute\" [attr.aria-labelledby]=\"'navbarDropdownMenuLink_'+idx\">\r\n              <li *ngFor=\"let value of content?.ecomLinks?.[link]\"><a class=\"dropdown-item\" (click)=\"applyFilter(value)\">{{value}}</a></li>\r\n            </ul>\r\n          </ng-container>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"w-50 right-btn d-flex justify-content-end\">\r\n        <div *ngIf=\"screenWidth <= 768 && isEcommerceWebsite\" class=\"d-flex align-items-center justify-content-around\">\r\n          <i class=\"fa fa-search mx-2\" aria-hidden=\"true\"></i>\r\n          <mat-icon class=\"mx-2\">add_shopping_cart</mat-icon>\r\n          <mat-icon class=\"mx-2\">person_outline</mat-icon>\r\n        </div>\r\n        <button class=\"navbar-toggler menu-icon\" [simpoColor]=\"simpoColor\" [id]=\"data?.id\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\" *ngIf=\"screenWidth < 769\"\r\n          aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n          <hr>\r\n          <hr>\r\n          <hr>\r\n        </button>\r\n      </div>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <div class=\"collapse navbar-collapse\" *ngIf=\"screenWidth > 768\">\r\n          <div class=\"navbar-nav align-items-center\">\r\n            <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n              <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n                <ng-container *ngIf=\"item.showHeader\">\r\n                  <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"\r\n                  [bgColor]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n                </ng-container>\r\n              </ng-container>\r\n            </div>\r\n            <div class=\"d-flex\">\r\n              <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                  <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                    <div style=\"position: relative;margin-right: 10px;\">\r\n                      <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex\">\r\n              <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n                <div *ngFor=\"let button of action?.buttons\">\r\n                  <button class=\"button\" (click)=\"redirectTo(button?.content)\" simpoButtonDirective [scrollValue]=\"scrollValue\" [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button.styles\" [color]=\"accentColor\">{{button?.content?.label}}</button>\r\n                  <!-- <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                    [color]=\"data?.styles?.background?.accentColor\"></app-button-element> -->\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth <= 768\">\r\n          <div class=\"inner-height p-4\">\r\n            <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n              <div class=\"d-flex flex-column w-100\">\r\n                <div class=\"d-flex justify-content-between align-items-center\">\r\n                  <div class=\"title-row\">\r\n                    <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n                      <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n                        <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                        loading=\"lazy\">\r\n                      </div>\r\n                      <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n                        <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"d-flex gap-3 align-items-center\"\r\n                      *ngIf=\"content?.logo?.isImage\">\r\n                      <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                      loading=\"lazy\">\r\n                    </div>\r\n\r\n                  </div>\r\n                  <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n                    <mat-icon>close</mat-icon>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n                  <div class=\"d-flex flex-column gap-4 w-100\">\r\n                    <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n                      <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n                    </ng-container>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"d-flex flex-column\">\r\n                <div class=\"d-flex\">\r\n                  <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                    [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                    <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                      <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                        <div style=\"position: relative;margin-right: 10px;\">\r\n                          <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                        </div>\r\n                      </ng-container>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex mt-4\">\r\n                  <div *ngIf=\"action?.display\" class=\"button-display\">\r\n                    <div *ngFor=\"let button of action?.buttons\">\r\n                      <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                        [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <div class=\"collapse navbar-collapse position-absolute pr-0\" style=\"right: 0px;\" *ngIf=\"screenWidth > 768\">\r\n          <div class=\"container-fluid justify-content-between pr-0 d-flex\" style=\"max-width: 50vw;\">\r\n            <div class=\"input-group\">\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)=\"searchProducts()\">\r\n            </div>\r\n            <div class=\"d-flex flex-column align-items-center mx-3 position-relative\" style=\"width: 60px; cursor: pointer;\" (click)=\"goToCart()\">\r\n              <mat-icon>add_shopping_cart</mat-icon>\r\n              <span class=\"text-dark fw-normal fs-6\">Bag</span>\r\n              <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n            </div>\r\n            <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n              <mat-icon>person_outline</mat-icon>\r\n              <span class=\"text-dark fw-normal fs-6\">Account</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </nav>\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>\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important}.right-btn{width:15%!important}}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:-10px;right:10px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:370px;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}.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}.mat-icon{color:#000}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: SimpoFooterLayoutDirective, selector: "[simpoFooterLayout]", inputs: ["simpoFooterLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: NavbarSectionComponent, decorators: [{
             type: Component,
@@ -3104,8 +3154,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                         SimpoStickyDirective,
                         PositionLayoutDirectiveDirective,
                         TextBackgroundDirectiveDirective,
-                        ColorDirective], template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\" [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\r\n  <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\">\r\n    <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\">\r\n    <div class=\"container-fluid position-relative \">\r\n      <div class=\"w-50 left-logo-text d-flex\">\r\n        <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n        <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n          <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n            <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n            loading=\"lazy\">\r\n          </div>\r\n          <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n            <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n          *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\r\n          <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n          loading=\"lazy\">\r\n        </div>\r\n\r\n        <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"isEcommerceWebsite && screenWidth > 768\">\r\n          <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n            <a class=\"nav-link dropdown-toggle mx-2\" href=\"#\" [id]=\"'navbarDropdownMenuLink_' + idx\" role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">{{ link | uppercase }}</a>\r\n            <ul class=\"dropdown-menu fs-6 position-absolute\" [attr.aria-labelledby]=\"'navbarDropdownMenuLink_'+idx\">\r\n              <li *ngFor=\"let value of content?.ecomLinks?.[link]\"><a class=\"dropdown-item\" (click)=\"applyFilter(value)\">{{value}}</a></li>\r\n            </ul>\r\n          </ng-container>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"w-50 right-btn d-flex justify-content-end\">\r\n        <div *ngIf=\"screenWidth <= 768 && isEcommerceWebsite\" class=\"d-flex align-items-center justify-content-around\">\r\n          <i class=\"fa fa-search mx-2\" aria-hidden=\"true\"></i>\r\n          <mat-icon class=\"mx-2\">add_shopping_cart</mat-icon>\r\n          <mat-icon class=\"mx-2\">person_outline</mat-icon>\r\n        </div>\r\n        <button class=\"navbar-toggler menu-icon\" [simpoColor]=\"simpoColor\" [id]=\"data?.id\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\" *ngIf=\"screenWidth < 769\"\r\n          aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n          <hr>\r\n          <hr>\r\n          <hr>\r\n        </button>\r\n      </div>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <div class=\"collapse navbar-collapse\" *ngIf=\"screenWidth > 768\">\r\n          <div class=\"navbar-nav align-items-center\">\r\n            <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n              <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n                <ng-container *ngIf=\"item.showHeader\">\r\n                  <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"\r\n                  [bgColor]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n                </ng-container>\r\n              </ng-container>\r\n            </div>\r\n            <div class=\"d-flex\">\r\n              <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                  <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                    <div style=\"position: relative;margin-right: 10px;\">\r\n                      <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex\">\r\n              <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n                <div *ngFor=\"let button of action?.buttons\">\r\n                  <button class=\"button\" (click)=\"redirectTo(button?.content)\" simpoButtonDirective [scrollValue]=\"scrollValue\" [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button.styles\" [color]=\"accentColor\">{{button?.content?.label}}</button>\r\n                  <!-- <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                    [color]=\"data?.styles?.background?.accentColor\"></app-button-element> -->\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth <= 768\">\r\n          <div class=\"inner-height p-4\">\r\n            <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n              <div class=\"d-flex flex-column w-100\">\r\n                <div class=\"d-flex justify-content-between align-items-center\">\r\n                  <div class=\"title-row\">\r\n                    <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n                      <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n                        <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                        loading=\"lazy\">\r\n                      </div>\r\n                      <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n                        <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"d-flex gap-3 align-items-center\"\r\n                      *ngIf=\"content?.logo?.isImage\">\r\n                      <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                      loading=\"lazy\">\r\n                    </div>\r\n\r\n                  </div>\r\n                  <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n                    <mat-icon>close</mat-icon>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n                  <div class=\"d-flex flex-column gap-4 w-100\">\r\n                    <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n                      <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n                    </ng-container>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"d-flex flex-column\">\r\n                <div class=\"d-flex\">\r\n                  <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                    [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                    <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                      <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                        <div style=\"position: relative;margin-right: 10px;\">\r\n                          <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                        </div>\r\n                      </ng-container>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex mt-4\">\r\n                  <div *ngIf=\"action?.display\" class=\"button-display\">\r\n                    <div *ngFor=\"let button of action?.buttons\">\r\n                      <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                        [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <div class=\"collapse navbar-collapse position-absolute pr-0\" style=\"right: 0px;\" *ngIf=\"screenWidth > 768\">\r\n          <div class=\"container-fluid justify-content-between pr-0 d-flex\" style=\"max-width: 50vw;\">\r\n            <div class=\"input-group\">\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)=\"searchProducts()\">\r\n            </div>\r\n            <div class=\"d-flex flex-column align-items-center mx-3\" style=\"width: 60px; cursor: pointer;\" (click)=\"goToCart()\">\r\n              <mat-icon>add_shopping_cart</mat-icon>\r\n              <span class=\"text-dark fw-normal fs-6\">Bag</span>\r\n            </div>\r\n            <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n              <mat-icon>person_outline</mat-icon>\r\n              <span class=\"text-dark fw-normal fs-6\">Account</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </nav>\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>\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important}.right-btn{width:15%!important}}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:370px;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}.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}.mat-icon{color:#000}\n"] }]
-        }], ctorParameters: () => [{ type: EventsService }, { type: i2$4.Router }], propDecorators: { data: [{
+                        ColorDirective], template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\" [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\r\n  <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\">\r\n    <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\">\r\n    <div class=\"container-fluid position-relative \">\r\n      <div class=\"w-50 left-logo-text d-flex\">\r\n        <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n        <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n          <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n            <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n            loading=\"lazy\">\r\n          </div>\r\n          <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n            <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n          *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\r\n          <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n          loading=\"lazy\">\r\n        </div>\r\n\r\n        <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"isEcommerceWebsite && screenWidth > 768\">\r\n          <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n            <a class=\"nav-link dropdown-toggle mx-2\" href=\"#\" [id]=\"'navbarDropdownMenuLink_' + idx\" role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">{{ link | uppercase }}</a>\r\n            <ul class=\"dropdown-menu fs-6 position-absolute\" [attr.aria-labelledby]=\"'navbarDropdownMenuLink_'+idx\">\r\n              <li *ngFor=\"let value of content?.ecomLinks?.[link]\"><a class=\"dropdown-item\" (click)=\"applyFilter(value)\">{{value}}</a></li>\r\n            </ul>\r\n          </ng-container>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"w-50 right-btn d-flex justify-content-end\">\r\n        <div *ngIf=\"screenWidth <= 768 && isEcommerceWebsite\" class=\"d-flex align-items-center justify-content-around\">\r\n          <i class=\"fa fa-search mx-2\" aria-hidden=\"true\"></i>\r\n          <mat-icon class=\"mx-2\">add_shopping_cart</mat-icon>\r\n          <mat-icon class=\"mx-2\">person_outline</mat-icon>\r\n        </div>\r\n        <button class=\"navbar-toggler menu-icon\" [simpoColor]=\"simpoColor\" [id]=\"data?.id\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\" *ngIf=\"screenWidth < 769\"\r\n          aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n          <hr>\r\n          <hr>\r\n          <hr>\r\n        </button>\r\n      </div>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <div class=\"collapse navbar-collapse\" *ngIf=\"screenWidth > 768\">\r\n          <div class=\"navbar-nav align-items-center\">\r\n            <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n              <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n                <ng-container *ngIf=\"item.showHeader\">\r\n                  <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"\r\n                  [bgColor]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n                </ng-container>\r\n              </ng-container>\r\n            </div>\r\n            <div class=\"d-flex\">\r\n              <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                  <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                    <div style=\"position: relative;margin-right: 10px;\">\r\n                      <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex\">\r\n              <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n                <div *ngFor=\"let button of action?.buttons\">\r\n                  <button class=\"button\" (click)=\"redirectTo(button?.content)\" simpoButtonDirective [scrollValue]=\"scrollValue\" [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button.styles\" [color]=\"accentColor\">{{button?.content?.label}}</button>\r\n                  <!-- <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                    [color]=\"data?.styles?.background?.accentColor\"></app-button-element> -->\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth <= 768\">\r\n          <div class=\"inner-height p-4\">\r\n            <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n              <div class=\"d-flex flex-column w-100\">\r\n                <div class=\"d-flex justify-content-between align-items-center\">\r\n                  <div class=\"title-row\">\r\n                    <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n                      <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n                        <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                        loading=\"lazy\">\r\n                      </div>\r\n                      <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n                        <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"d-flex gap-3 align-items-center\"\r\n                      *ngIf=\"content?.logo?.isImage\">\r\n                      <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                      loading=\"lazy\">\r\n                    </div>\r\n\r\n                  </div>\r\n                  <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n                    <mat-icon>close</mat-icon>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n                  <div class=\"d-flex flex-column gap-4 w-100\">\r\n                    <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n                      <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n                    </ng-container>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"d-flex flex-column\">\r\n                <div class=\"d-flex\">\r\n                  <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                    [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                    <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                      <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                        <div style=\"position: relative;margin-right: 10px;\">\r\n                          <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                        </div>\r\n                      </ng-container>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex mt-4\">\r\n                  <div *ngIf=\"action?.display\" class=\"button-display\">\r\n                    <div *ngFor=\"let button of action?.buttons\">\r\n                      <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                        [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <div class=\"collapse navbar-collapse position-absolute pr-0\" style=\"right: 0px;\" *ngIf=\"screenWidth > 768\">\r\n          <div class=\"container-fluid justify-content-between pr-0 d-flex\" style=\"max-width: 50vw;\">\r\n            <div class=\"input-group\">\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)=\"searchProducts()\">\r\n            </div>\r\n            <div class=\"d-flex flex-column align-items-center mx-3 position-relative\" style=\"width: 60px; cursor: pointer;\" (click)=\"goToCart()\">\r\n              <mat-icon>add_shopping_cart</mat-icon>\r\n              <span class=\"text-dark fw-normal fs-6\">Bag</span>\r\n              <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n            </div>\r\n            <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n              <mat-icon>person_outline</mat-icon>\r\n              <span class=\"text-dark fw-normal fs-6\">Account</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </nav>\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>\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important}.right-btn{width:15%!important}}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:-10px;right:10px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:370px;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}.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}.mat-icon{color:#000}\n"] }]
+        }], ctorParameters: () => [{ type: EventsService }, { type: i3.Router }, { type: i3.ActivatedRoute }], propDecorators: { data: [{
                 type: Input
             }], nextComponent: [{
                 type: Input
@@ -3198,7 +3248,7 @@ class ContactUsComponent extends BaseSection {
     canShowContactField(field) {
         return Object.hasOwn(field, "status") ? field.status : true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ContactUsComponent, deps: [{ token: EventsService }, { token: PLATFORM_ID }, { token: i2$5.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ContactUsComponent, deps: [{ token: EventsService }, { token: PLATFORM_ID }, { token: i2$4.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ContactUsComponent, isStandalone: true, selector: "simpo-contact-us", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "screenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" (click)=\"editSection()\">\r\n    <div *ngIf=\"content?.image?.showImage === false\" class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n        [simpoBorder]=\"styles?.border\">\r\n        <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n            <div class=\"col-12 d-flex justify-content-evenly\" style=\"gap: 3rem;\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n            [ngClass]=\"{'align-items-center': styles?.positionLayout?.value === 'top'}\">\r\n              <div class=\"d-flex flex-column col-5 pt-5\">\r\n                <div  *ngFor=\"let item of content?.inputText\" [innerHTML]=\"item.value\"\r\n                    [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\" >\r\n                </div>\r\n              </div>\r\n                <div class=\"col-5 d-flex flex-wrap\" style=\"gap: 1rem;height: fit-content;\">\r\n                    <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n                        <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\" [feild]=\"feild\" [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\" *ngIf=\"canShowContactField(feild)\"></simpo-input-fields>\r\n                    </ng-container>\r\n                    <div class=\"w-100\">\r\n                      <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button }}</button>\r\n                    </div>\r\n                    <!-- <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button }}</button> -->\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <div *ngIf=\"content?.image?.showImage === true\" class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer\r\n      [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n      <div class=\"g-5 mobile-display\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\"\r\n        [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n        [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'align-items-center': styles?.positionLayout?.value === 'top'}\">\r\n        <div class=\"col-10 col-sm-8 col-lg-6 mobile-image\" *ngIf=\"content?.image?.showImage\">\r\n          <img [src]=\"content?.image?.url\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n            [simpoCorner]=\"styles?.corners\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n            class=\"d-block mx-lg-auto img-fluid h-100\" [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\"\r\n            loading=\"lazy\" />\r\n        </div>\r\n        <div class=\"d-flex flex-column mobile-text\" style=\"width: 46%;\" [ngClass]=\"{'pt-5': styles?.positionLayout?.value === 'top'}\" [id]=\"data?.id\">\r\n          <div class=\"d-flex flex-column\">\r\n            <div *ngFor=\"let item of content?.inputText\" [innerHTML]=\"item.value\"\r\n              [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n          </div>\r\n          <div class=\"d-flex flex-wrap\" style=\"gap: 1rem;height: fit-content;\">\r\n            <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n              <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\" [feild]=\"feild\"\r\n                [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\"></simpo-input-fields>\r\n            </ng-container>\r\n            <div class=\"w-100\">\r\n              <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n                [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button\r\n                }}</button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>\r\n", styles: [".send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.w-100{width:100%}@media only screen and (max-width: 475px){.col-12{display:flex;flex-direction:column-reverse}.pt-5{width:100%}.pt-5 div{font-size:24px}.col-5{width:100%}.send-btn{margin-left:0}.mobile-display{display:flex!important;flex-direction:column!important}.mobile-image{width:100%!important;padding:0!important}.mobile-text{width:100%!important;margin-top:3rem}.mobile-text .d-flex div{font-size:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: 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: InputFieldsComponent, selector: "simpo-input-fields", inputs: ["feild", "opacity", "bgColor", "sectionId"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: 
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }] }); }
@@ -3234,7 +3284,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
         }], ctorParameters: () => [{ type: EventsService }, { type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
-                }] }, { type: i2$5.MatSnackBar }], propDecorators: { data: [{
+                }] }, { type: i2$4.MatSnackBar }], propDecorators: { data: [{
                 type: Input
             }], index: [{
                 type: Input
@@ -3249,7 +3299,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
 
 class SkeletonLoaderSectionComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: SkeletonLoaderSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: SkeletonLoaderSectionComponent, isStandalone: true, selector: "simpo-skeleton-loader-section", inputs: { sectionType: "sectionType" }, ngImport: i0, template: "<div class=\"p-15\" style=\"width: 100%;\">\r\n  <div class=\"skeleton-parent\"\r\n    *ngIf=\"sectionType === 'service' || sectionType === 'teammember' || sectionType === 'imagegrid'\">\r\n    <div class=\"skeleton\">\r\n      <ngx-skeleton-loader 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      <div class=\"second-section-wrapper\">\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '80%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '90%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '60%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"skeleton\">\r\n      <ngx-skeleton-loader 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      <div class=\"second-section-wrapper\">\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '80%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '90%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '60%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"skeleton\">\r\n      <ngx-skeleton-loader 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      <div class=\"second-section-wrapper\">\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '80%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '90%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '60%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"banner-skeleton\" *ngIf=\"sectionType === 'banner' || sectionType === 'text_image'\">\r\n    <div style=\"width: 50%;\">\r\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n        width: '90%',\r\n        height: '400px',\r\n        'border-radius': '10px'\r\n      }\">\r\n      </ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"second-section-wrapper\" style=\"width: 50%;padding-top: 50px;\">\r\n      <div class=\"wrapper\">\r\n        <ngx-skeleton-loader [theme]=\"{\r\n            width: '80%',\r\n            'border-radius': '0',\r\n            height: '15px',\r\n            'margin-bottom': '10px'\r\n          }\"></ngx-skeleton-loader>\r\n      </div>\r\n      <div class=\"wrapper\">\r\n        <ngx-skeleton-loader [theme]=\"{\r\n            width: '90%',\r\n            'border-radius': '0',\r\n            height: '15px',\r\n            'margin-bottom': '10px'\r\n          }\"></ngx-skeleton-loader>\r\n      </div>\r\n      <div class=\"wrapper\">\r\n        <ngx-skeleton-loader [theme]=\"{\r\n            width: '60%',\r\n            'border-radius': '0',\r\n            height: '15px',\r\n            'margin-bottom': '10px'\r\n          }\"></ngx-skeleton-loader>\r\n      </div>\r\n      <div style=\"margin-top: 50px;\">\r\n        <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n            width: '130px',\r\n            height: '45px',\r\n            'border-radius': '10px'\r\n          }\">\r\n        </ngx-skeleton-loader>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"text-skeleton\" *ngIf=\"sectionType === 'text'\">\r\n    <div class=\"wrapper\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '80%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"wrapper\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '90%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"wrapper\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '60%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div style=\"margin-top: 50px;\">\r\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n          width: '130px',\r\n          height: '45px',\r\n          'border-radius': '10px'\r\n        }\">\r\n      </ngx-skeleton-loader>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"testimonial-skeleton\" *ngIf=\"sectionType === 'testimonial'\">\r\n    <div>\r\n      <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{ width: '80px', height: '80px' }\">\r\n      </ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"wrapper\" style=\"margin-top: 20px;\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '80%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"wrapper\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '90%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"wrapper\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '60%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div style=\"margin-top: 50px;\">\r\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n          width: '130px',\r\n          height: '45px',\r\n          'border-radius': '10px'\r\n        }\">\r\n      </ngx-skeleton-loader>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"image-skeleton\"\r\n    *ngIf=\"sectionType === 'imageCarousel' || sectionType === 'image' || sectionType === 'contact us'\">\r\n    <ngx-skeleton-loader count=\"1\" [theme]=\"{\r\n      'border-radius': '5px',\r\n      height: '50vh',\r\n      width: '100%'\r\n    }\"></ngx-skeleton-loader>\r\n  </div>\r\n</div>\r\n", styles: [".main-section{position:relative;left:25px}.p-15{padding:15px}.wrapper{width:100%;flex:1}.second-section-wrapper{width:100%;height:auto;flex:1}.skeleton-parent{display:flex;gap:15px}.skeleton{padding:10px;border:1px solid #e5e7eb;width:33.33%;border-radius:10px}.banner-skeleton{display:flex;gap:10px}.text-skeleton,.testimonial-skeleton{text-align:center}.image-skeleton{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i2$6.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: SkeletonLoaderSectionComponent, isStandalone: true, selector: "simpo-skeleton-loader-section", inputs: { sectionType: "sectionType" }, ngImport: i0, template: "<div class=\"p-15\" style=\"width: 100%;\">\r\n  <div class=\"skeleton-parent\"\r\n    *ngIf=\"sectionType === 'service' || sectionType === 'teammember' || sectionType === 'imagegrid'\">\r\n    <div class=\"skeleton\">\r\n      <ngx-skeleton-loader 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      <div class=\"second-section-wrapper\">\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '80%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '90%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '60%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"skeleton\">\r\n      <ngx-skeleton-loader 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      <div class=\"second-section-wrapper\">\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '80%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '90%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '60%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"skeleton\">\r\n      <ngx-skeleton-loader 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      <div class=\"second-section-wrapper\">\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '80%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '90%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n        <div class=\"wrapper\">\r\n          <ngx-skeleton-loader [theme]=\"{\r\n              width: '60%',\r\n              'border-radius': '0',\r\n              height: '15px',\r\n              'margin-bottom': '10px'\r\n            }\"></ngx-skeleton-loader>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"banner-skeleton\" *ngIf=\"sectionType === 'banner' || sectionType === 'text_image'\">\r\n    <div style=\"width: 50%;\">\r\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n        width: '90%',\r\n        height: '400px',\r\n        'border-radius': '10px'\r\n      }\">\r\n      </ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"second-section-wrapper\" style=\"width: 50%;padding-top: 50px;\">\r\n      <div class=\"wrapper\">\r\n        <ngx-skeleton-loader [theme]=\"{\r\n            width: '80%',\r\n            'border-radius': '0',\r\n            height: '15px',\r\n            'margin-bottom': '10px'\r\n          }\"></ngx-skeleton-loader>\r\n      </div>\r\n      <div class=\"wrapper\">\r\n        <ngx-skeleton-loader [theme]=\"{\r\n            width: '90%',\r\n            'border-radius': '0',\r\n            height: '15px',\r\n            'margin-bottom': '10px'\r\n          }\"></ngx-skeleton-loader>\r\n      </div>\r\n      <div class=\"wrapper\">\r\n        <ngx-skeleton-loader [theme]=\"{\r\n            width: '60%',\r\n            'border-radius': '0',\r\n            height: '15px',\r\n            'margin-bottom': '10px'\r\n          }\"></ngx-skeleton-loader>\r\n      </div>\r\n      <div style=\"margin-top: 50px;\">\r\n        <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n            width: '130px',\r\n            height: '45px',\r\n            'border-radius': '10px'\r\n          }\">\r\n        </ngx-skeleton-loader>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"text-skeleton\" *ngIf=\"sectionType === 'text'\">\r\n    <div class=\"wrapper\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '80%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"wrapper\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '90%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"wrapper\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '60%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div style=\"margin-top: 50px;\">\r\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n          width: '130px',\r\n          height: '45px',\r\n          'border-radius': '10px'\r\n        }\">\r\n      </ngx-skeleton-loader>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"testimonial-skeleton\" *ngIf=\"sectionType === 'testimonial'\">\r\n    <div>\r\n      <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{ width: '80px', height: '80px' }\">\r\n      </ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"wrapper\" style=\"margin-top: 20px;\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '80%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"wrapper\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '90%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div class=\"wrapper\">\r\n      <ngx-skeleton-loader [theme]=\"{\r\n          width: '60%',\r\n          'border-radius': '0',\r\n          height: '15px',\r\n          'margin-bottom': '10px'\r\n        }\"></ngx-skeleton-loader>\r\n    </div>\r\n    <div style=\"margin-top: 50px;\">\r\n      <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n          width: '130px',\r\n          height: '45px',\r\n          'border-radius': '10px'\r\n        }\">\r\n      </ngx-skeleton-loader>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"image-skeleton\"\r\n    *ngIf=\"sectionType === 'imageCarousel' || sectionType === 'image' || sectionType === 'contact us'\">\r\n    <ngx-skeleton-loader count=\"1\" [theme]=\"{\r\n      'border-radius': '5px',\r\n      height: '50vh',\r\n      width: '100%'\r\n    }\"></ngx-skeleton-loader>\r\n  </div>\r\n</div>\r\n", styles: [".main-section{position:relative;left:25px}.p-15{padding:15px}.wrapper{width:100%;flex:1}.second-section-wrapper{width:100%;height:auto;flex:1}.skeleton-parent{display:flex;gap:15px}.skeleton{padding:10px;border:1px solid #e5e7eb;width:33.33%;border-radius:10px}.banner-skeleton{display:flex;gap:10px}.text-skeleton,.testimonial-skeleton{text-align:center}.image-skeleton{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i2$5.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: SkeletonLoaderSectionComponent, decorators: [{
             type: Component,
@@ -3657,7 +3707,7 @@ class RecentBlogPostSectionComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: RecentBlogPostSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: RecentBlogPostSectionComponent, isStandalone: true, selector: "simpo-recent-blog-post-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", responseData: "responseData" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" (click)=\"editSection()\">\r\n  <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n      <div [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\" [ngStyle]=\"{'width' : (responseData.length || 0) == 0 ? '100%' : ''}\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value\"></div>\r\n        </div>\r\n        <div class=\"row\">\r\n          <div (click)=\"getBlogById(content.id)\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n            class=\"individual-cards\"\r\n            *ngFor=\"let content of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\">\r\n            <div class=\"image\">\r\n              <img [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n                [simpoCorner]=\"style?.corners\" class=\"d-block mx-lg-auto img-fluid h-100\" alt=\"\" *ngIf=\"content.img\"\r\n                loading=\"lazy\">\r\n              <img [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n                src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\"\r\n                alt=\"\" *ngIf=\"!content.img\"\r\n                loading=\"lazy\">\r\n            </div>\r\n            <div class=\"heading-medium title mt-4\">\r\n              {{content.postTitle}}\r\n            </div>\r\n            <div class=\"body-large adate mt-3\">\r\n              {{content.createdTimeStamp | date:'EEEE, MMM, d, y'}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div *ngIf=\"responseData?.length == 0\" class=\"row\">\r\n          <div class=\"no-blog-post\">\r\n            <mat-icon>info</mat-icon>This section won't be visible because you have no published blog posts.\r\n          </div>\r\n          <div class=\"skeleton\"  [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\" *ngFor=\"let i of [1,2,3]\">\r\n            <ngx-skeleton-loader 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            <div class=\"second-section-wrapper\">\r\n              <div class=\"wrapper\">\r\n                <ngx-skeleton-loader [theme]=\"{\r\n                width: '100%',\r\n                'border-radius': '0',\r\n                height: '15px',\r\n                'margin-bottom': '10px'\r\n              }\"></ngx-skeleton-loader>\r\n              </div>\r\n              <div class=\"wrapper\">\r\n                <ngx-skeleton-loader [theme]=\"{\r\n                  width: '90%',\r\n                  'border-radius': '0',\r\n                  height: '15px',\r\n                  'margin-bottom': '10px',\r\n                  'display' : 'flex'\r\n                }\"></ngx-skeleton-loader>\r\n              </div>\r\n              <div class=\"wrapper\">\r\n                <ngx-skeleton-loader [theme]=\"{\r\n                  width: '60%',\r\n                  'border-radius': '0',\r\n                  height: '15px',\r\n                  'margin-bottom': '10px',\r\n                  'display' : 'flex'\r\n                }\"></ngx-skeleton-loader>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"button-section mt-3rem\">\r\n          <button class=\"button\" (click)=\"openBlogList()\" simpoButtonDirective [id]=\"data?.id+(buttonData?.id || '')\"\r\n            [buttonStyle]=\"buttonData?.styles\"\r\n            [color]=\"data?.styles?.background?.accentColor\">{{buttonData?.content?.label}}</button>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.individual-cards{padding-bottom:30px}.individual-cards img{width:100%;height:37vh}.title{font-weight:500}.mt-3rem{margin-top:3rem}@media only screen and (max-width: 475px){.cards{flex-direction:column}.individual-cards{width:100%}.title{font-size:26px}}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.skeleton-parent{display:flex;gap:15px}.skeleton{padding:10px;border-radius:10px}.second-section-wrapper{width:100%;height:auto;flex:1}.wrapper{width:100%;flex:1}.no-blog-post{color:#5185ad;text-align:left;display:flex;align-items:center;gap:15px;height:55px;background:#f6fbff;font-size:16px;font-weight:600}\n"], dependencies: [{ kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i2$6.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: RecentBlogPostSectionComponent, isStandalone: true, selector: "simpo-recent-blog-post-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", responseData: "responseData" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" (click)=\"editSection()\">\r\n  <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n      <div [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\" [ngStyle]=\"{'width' : (responseData.length || 0) == 0 ? '100%' : ''}\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value\"></div>\r\n        </div>\r\n        <div class=\"row\">\r\n          <div (click)=\"getBlogById(content.id)\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n            class=\"individual-cards\"\r\n            *ngFor=\"let content of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\">\r\n            <div class=\"image\">\r\n              <img [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n                [simpoCorner]=\"style?.corners\" class=\"d-block mx-lg-auto img-fluid h-100\" alt=\"\" *ngIf=\"content.img\"\r\n                loading=\"lazy\">\r\n              <img [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n                src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\"\r\n                alt=\"\" *ngIf=\"!content.img\"\r\n                loading=\"lazy\">\r\n            </div>\r\n            <div class=\"heading-medium title mt-4\">\r\n              {{content.postTitle}}\r\n            </div>\r\n            <div class=\"body-large adate mt-3\">\r\n              {{content.createdTimeStamp | date:'EEEE, MMM, d, y'}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div *ngIf=\"responseData?.length == 0\" class=\"row\">\r\n          <div class=\"no-blog-post\">\r\n            <mat-icon>info</mat-icon>This section won't be visible because you have no published blog posts.\r\n          </div>\r\n          <div class=\"skeleton\"  [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\" *ngFor=\"let i of [1,2,3]\">\r\n            <ngx-skeleton-loader 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            <div class=\"second-section-wrapper\">\r\n              <div class=\"wrapper\">\r\n                <ngx-skeleton-loader [theme]=\"{\r\n                width: '100%',\r\n                'border-radius': '0',\r\n                height: '15px',\r\n                'margin-bottom': '10px'\r\n              }\"></ngx-skeleton-loader>\r\n              </div>\r\n              <div class=\"wrapper\">\r\n                <ngx-skeleton-loader [theme]=\"{\r\n                  width: '90%',\r\n                  'border-radius': '0',\r\n                  height: '15px',\r\n                  'margin-bottom': '10px',\r\n                  'display' : 'flex'\r\n                }\"></ngx-skeleton-loader>\r\n              </div>\r\n              <div class=\"wrapper\">\r\n                <ngx-skeleton-loader [theme]=\"{\r\n                  width: '60%',\r\n                  'border-radius': '0',\r\n                  height: '15px',\r\n                  'margin-bottom': '10px',\r\n                  'display' : 'flex'\r\n                }\"></ngx-skeleton-loader>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"button-section mt-3rem\">\r\n          <button class=\"button\" (click)=\"openBlogList()\" simpoButtonDirective [id]=\"data?.id+(buttonData?.id || '')\"\r\n            [buttonStyle]=\"buttonData?.styles\"\r\n            [color]=\"data?.styles?.background?.accentColor\">{{buttonData?.content?.label}}</button>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.individual-cards{padding-bottom:30px}.individual-cards img{width:100%;height:37vh}.title{font-weight:500}.mt-3rem{margin-top:3rem}@media only screen and (max-width: 475px){.cards{flex-direction:column}.individual-cards{width:100%}.title{font-size:26px}}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.skeleton-parent{display:flex;gap:15px}.skeleton{padding:10px;border-radius:10px}.second-section-wrapper{width:100%;height:auto;flex:1}.wrapper{width:100%;flex:1}.no-blog-post{color:#5185ad;text-align:left;display:flex;align-items:center;gap:15px;height:55px;background:#f6fbff;font-size:16px;font-weight:600}\n"], dependencies: [{ kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i2$5.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: RecentBlogPostSectionComponent, decorators: [{
             type: Component,
@@ -4272,8 +4322,10 @@ class RestService {
             this.environmentTypeSubscriber?.unsubscribe();
     }
     getFeaturedProduct(collectionId) {
-        const subIndustryId = JSON.parse(localStorage.getItem("bDetails") ?? "{}")?.subIndustryId;
-        return this.http.get(this.BASE_URL + `ecommerce/product/collection/id?collectionId=${collectionId || ''}&subIndustryId=${subIndustryId}`).pipe(map((response) => response.data.map((product) => new Product(product))));
+        let subIndustryId = JSON.parse(localStorage.getItem("bDetails") ?? "{}")?.subIndustryId;
+        if (!subIndustryId)
+            subIndustryId = JSON.parse(localStorage.getItem("websiteData") ?? "{}")?.subIndustryId;
+        return this.http.get(this.BASE_URL + `ecommerce/product/collection/id?collectionId=${collectionId || ''}&subIndustryId=${subIndustryId || ''}`).pipe(map((response) => response.data?.map((product) => new Product(product))));
     }
     getProductDetails(productId = null) {
         const payload = {
@@ -4283,6 +4335,35 @@ class RestService {
         };
         return this.http.put(this.BASE_URL + `ecommerce/product/item/search`, payload).pipe(map((response) => response.data.data.map((product) => new Product(product))));
     }
+    getAllCategories() {
+        const payload = {
+            pageNo: 0,
+            pageSize: 10,
+            businessId: localStorage.getItem("bId")
+        };
+        return this.http.put(this.BASE_URL + 'ecommerce/inventory/get/category', payload).pipe(map((response) => response.data.data?.map((category) => new Category(category))));
+    }
+    getAllCollections() {
+        const payload = {
+            pageNo: 0,
+            pageSize: 10,
+            businessId: localStorage.getItem("bId")
+        };
+        return this.http.put(this.BASE_URL + 'ecommerce/inventory/get/collection', payload).pipe(map((response) => response.data.data?.map((collection) => new Collection(collection))));
+    }
+    getFilteredProduct(collectionIds, categoryIds, searchText, minPrice, maxPrice, pageNo, size) {
+        const payload = {
+            "businessId": localStorage.getItem("bId"),
+            "collectionId": collectionIds,
+            "categoryId": categoryIds,
+            "searchText": searchText,
+            "minPrice": minPrice ?? 0,
+            "maxPrice": maxPrice ?? 0,
+            "pageNo": pageNo,
+            "pageSize": size
+        };
+        return this.http.put(this.BASE_URL + `ecommerce/product/item/search`, payload);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: RestService, deps: [{ token: i1$1.HttpClient }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: RestService, providedIn: 'root' }); }
 }
@@ -4338,8 +4419,8 @@ class FeaturedProductsComponent extends BaseSection {
         this.router.navigate([`details`], { queryParams: { id: productId } });
         // this._eventService.redirectToPage.emit({redirectTo: '/details', data: {productId: productId}})
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FeaturedProductsComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$4.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: FeaturedProductsComponent, isStandalone: true, selector: "simpo-featured-products", inputs: { data: "data", responseData: "responseData", index: "index", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\r\n   simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n    [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n    <div *ngFor=\"let item of content?.inputText\">\r\n      <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n      </div>\r\n    </div>\r\n    <img src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n      class=\"span-img mt-15\">\r\n    <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n      <div *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\" class=\"product\"\r\n        [style.width]=\"getProductWidth()\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n        <div *ngIf=\"!(product.itemImages.length > 0 && product.itemImages[0].imgUrl)\" class=\"default-image\">\r\n          <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" alt=\"\">\r\n        </div>\r\n        <div *ngIf=\"product.itemImages.length > 0 && product.itemImages[0].imgUrl\">\r\n          <img [src]=\"product.itemImages[0].imgUrl\" alt=\"\" class=\"product-img\">\r\n        </div>\r\n        <div class=\"mt-15\">\r\n          <div class=\"product-name heading-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n            {{product.name}}</div>\r\n          <div class=\"price body-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n            \u20B9\r\n            {{product.price.sellingPrice}}\r\n          </div>\r\n        </div>\r\n        <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n          <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n            [color]=\"styles?.background?.accentColor\">{{content?.button}}</button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (max-width: 475px){.product-img{height:250px}.default-image img{height:250px}}.add-to-cart-btn{margin-top:15px}.add-to-cart-btn button{height:35px;font-size:16px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "directive", type: 
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FeaturedProductsComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i3.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: FeaturedProductsComponent, isStandalone: true, selector: "simpo-featured-products", inputs: { data: "data", responseData: "responseData", index: "index", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\r\n   simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n    [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n    <div *ngFor=\"let item of content?.inputText\">\r\n      <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n      </div>\r\n    </div>\r\n    <img src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n      class=\"span-img mt-15\">\r\n    <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n      <div *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\" class=\"product\"\r\n        [style.width]=\"getProductWidth()\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n        <div *ngIf=\"!(product.itemImages.length > 0 && product.itemImages[0].imgUrl)\" class=\"default-image\">\r\n          <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" alt=\"\">\r\n        </div>\r\n        <div *ngIf=\"product.itemImages.length > 0 && product.itemImages[0].imgUrl\">\r\n          <img [src]=\"product.itemImages[0].imgUrl\" alt=\"\" class=\"product-img\">\r\n        </div>\r\n        <div class=\"mt-15\">\r\n          <div class=\"product-name heading-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n            {{product.name}}</div>\r\n          <div class=\"price body-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n            \u20B9\r\n            {{product.price.sellingPrice}}\r\n          </div>\r\n        </div>\r\n        <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n          <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n            [color]=\"styles?.background?.accentColor\">{{content?.button}}</button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (max-width: 475px){.product-img{height:250px}.default-image img{height:250px}}.add-to-cart-btn{margin-top:15px}.add-to-cart-btn button{height:35px;font-size:16px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "directive", type: 
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }] }); }
 }
@@ -4359,11 +4440,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                         TextBackgroundDirectiveDirective,
                         ColorDirective,
                         ButtonDirectiveDirective
-                    ], template: "<section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\r\n   simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n    [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n    <div *ngFor=\"let item of content?.inputText\">\r\n      <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n      </div>\r\n    </div>\r\n    <img src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n      class=\"span-img mt-15\">\r\n    <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n      <div *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\" class=\"product\"\r\n        [style.width]=\"getProductWidth()\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n        <div *ngIf=\"!(product.itemImages.length > 0 && product.itemImages[0].imgUrl)\" class=\"default-image\">\r\n          <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" alt=\"\">\r\n        </div>\r\n        <div *ngIf=\"product.itemImages.length > 0 && product.itemImages[0].imgUrl\">\r\n          <img [src]=\"product.itemImages[0].imgUrl\" alt=\"\" class=\"product-img\">\r\n        </div>\r\n        <div class=\"mt-15\">\r\n          <div class=\"product-name heading-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n            {{product.name}}</div>\r\n          <div class=\"price body-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n            \u20B9\r\n            {{product.price.sellingPrice}}\r\n          </div>\r\n        </div>\r\n        <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n          <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n            [color]=\"styles?.background?.accentColor\">{{content?.button}}</button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (max-width: 475px){.product-img{height:250px}.default-image img{height:250px}}.add-to-cart-btn{margin-top:15px}.add-to-cart-btn button{height:35px;font-size:16px!important}\n"] }]
+                    ], template: "<section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\r\n   simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n    [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n    <div *ngFor=\"let item of content?.inputText\">\r\n      <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n      </div>\r\n    </div>\r\n    <img src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n      class=\"span-img mt-15\">\r\n    <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n      <div *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\" class=\"product\"\r\n        [style.width]=\"getProductWidth()\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n        <div *ngIf=\"!(product.itemImages.length > 0 && product.itemImages[0].imgUrl)\" class=\"default-image\">\r\n          <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" alt=\"\">\r\n        </div>\r\n        <div *ngIf=\"product.itemImages.length > 0 && product.itemImages[0].imgUrl\">\r\n          <img [src]=\"product.itemImages[0].imgUrl\" alt=\"\" class=\"product-img\">\r\n        </div>\r\n        <div class=\"mt-15\">\r\n          <div class=\"product-name heading-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n            {{product.name}}</div>\r\n          <div class=\"price body-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n            \u20B9\r\n            {{product.price.sellingPrice}}\r\n          </div>\r\n        </div>\r\n        <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n          <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n            [color]=\"styles?.background?.accentColor\">{{content?.button}}</button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (max-width: 475px){.product-img{height:250px}.default-image img{height:250px}}.add-to-cart-btn{margin-top:15px}.add-to-cart-btn button{height:35px;font-size:16px!important}\n"] }]
         }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
-                }] }, { type: EventsService }, { type: RestService }, { type: i2$4.Router }], propDecorators: { data: [{
+                }] }, { type: EventsService }, { type: RestService }, { type: i3.Router }], propDecorators: { data: [{
                 type: Input
             }], responseData: [{
                 type: Input
@@ -4427,46 +4508,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                 type: Input
             }] } });
 
-var cartId = "";
-var orderedItems = [
-];
-var billdetails = {
-	totalNetValue: 0,
-	totalGrossValue: 0,
-	totalTax: 0,
-	totalOfferedValue: 0,
-	deliveryCharges: 0,
-	couponId: "",
-	discountAmount: 0,
-	afterDiscountAmount: 0,
-	taxBreakup: {
-		cgstValue: 0,
-		sgstValue: 0,
-		igstValue: 0
-	}
-};
-var locationDetails = {
-	countryId: "",
-	cityId: "",
-	stateId: "",
-	localityId: "",
-	countryName: "",
-	cityName: "",
-	stateName: "",
-	localityName: "",
-	pinCode: ""
-};
-var platform = "WEB";
-var totalAmount = 0;
-var UserCart = {
-	cartId: cartId,
-	orderedItems: orderedItems,
-	billdetails: billdetails,
-	locationDetails: locationDetails,
-	platform: platform,
-	totalAmount: totalAmount
-};
-
 class OrderedItems {
     constructor(json) {
         this.itemId = json?.["itemId"];
@@ -4574,17 +4615,17 @@ class ProductDescComponent extends BaseSection {
         this.addToCart(type);
     }
     addToCart(type = 'ADD') {
-        if (this.addedQuantity < 0) {
-            this.snackBar.open('Please add quantity', 'close', { duration: 1500 });
-            return;
-        }
+        // if(this.addedQuantity < 0) {
+        //   this.snackBar.open('Please add quantity','close', {duration: 1500});
+        //   return;
+        // }
         if (type == 'ADD')
             this.responseData.quantity += 1;
         else
             this.responseData.quantity -= 1;
         this.cartService.addItemToCart(this.responseData);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ProductDescComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: i2$5.MatSnackBar }, { token: i2$4.ActivatedRoute }, { token: RestService }, { token: CartService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ProductDescComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: i2$4.MatSnackBar }, { token: i3.ActivatedRoute }, { token: RestService }, { token: CartService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\">\r\n  <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n    <div class=\"row\">\r\n      <div class=\"col-lg-6 col-12\">\r\n        <div class=\"prod-img-block\">\r\n          <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n            <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n              <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\">\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"item-img\">\r\n            <img [src]=\"currentImg\" alt=\"\">\r\n          </div>\r\n          <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n            <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n              <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\">\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-lg-6 col-12 product-detail\">\r\n        <div class=\"heading-large\">{{responseData.name}}</div>\r\n        <div class=\"price\">\u20B9 {{responseData.price.sellingPrice}}</div>\r\n        <div class=\"product-desc body-large\" *ngIf=\"responseData?.descriptor?.name\">{{responseData.descriptor.name}}</div>\r\n\r\n        <div class=\"button-parent\">\r\n          <div class=\"quantity\" *ngIf=\"addedQuantity\">\r\n            <div class=\"plus\" (click)=\"addOrSubtractQuantity('SUBSTRACT')\">-</div>\r\n            <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{addedQuantity}}</div>\r\n            <!-- <input type=\"number\" (keyup)=\"changeQuantity(quantity.value)\" [value]=\"addedQuantity\" #quantity> -->\r\n            <div class=\"minus\" (click)=\"addOrSubtractQuantity('ADD')\">+</div>\r\n          </div>\r\n          <div *ngIf=\"!addedQuantity\">\r\n            <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\">{{data?.content?.button}}</button>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"product-sku\">\r\n          <div *ngIf=\"responseData?.itemInventory\">SKU :\r\n            {{responseData.itemInventory.openingStock}}</div>\r\n          <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <span\r\n              *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName}} <ng-container *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n            </span></div>\r\n          <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n              *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n            </span></div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"row prod-desc\" *ngIf=\"false\">\r\n      <div class=\"tab-group\">\r\n        <div class=\"tab\">Description</div>\r\n      </div>\r\n      <div style=\"margin-top: 10px;\" class=\"body-large\" *ngIf=\"responseData.properties.description\">{{responseData.properties.description}}</div>\r\n    </div>\r\n  </section>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".product-desc{display:flex}.row{margin-top:25px}.prod-img-block{display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px}.img-list img{height:100px;width:100%;cursor:pointer}.item-img img{height:500px;width:460px}.price{font-weight:600;font-family:Poppins;font-size:20px;margin-top:15px}.product-desc{margin-top:15px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;color:#848484;font-family:Poppins;margin-top:.5rem}.tab-group{display:flex;gap:10px;overflow-y:scroll}.tab{font-family:Poppins;font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black}@media screen and (max-width: 500px){.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column}.img-list{flex-direction:row;overflow-y:scroll}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}}.send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.body-large{color:#848484}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: HttpClientModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 
                 //DIRECTIVE
                 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"] }] }); }
@@ -4604,7 +4645,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
         }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
-                }] }, { type: EventsService }, { type: i2$5.MatSnackBar }, { type: i2$4.ActivatedRoute }, { type: RestService }, { type: CartService }], propDecorators: { data: [{
+                }] }, { type: EventsService }, { type: i2$4.MatSnackBar }, { type: i3.ActivatedRoute }, { type: RestService }, { type: CartService }], propDecorators: { data: [{
                 type: Input
             }], responseData: [{
                 type: Input
@@ -4622,17 +4663,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
 class PagninationComponent {
     constructor(router) {
         this.router = router;
-        this.totalPages = 5;
-        this.currentPage = 2;
+        this.totalPages = 1;
+        this.currentPage = 1;
         this.bound = 5;
     }
+    ngOnInit() {
+    }
     goToNext() {
         this.router.navigate(['/'], { queryParams: { pageNo: this.currentPage + 1 } });
     }
     goToPrev() {
         this.router.navigate(['/'], { queryParams: { pageNo: this.currentPage - 1 } });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: PagninationComponent, deps: [{ token: i2$4.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: PagninationComponent, deps: [{ token: i3.Router }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: PagninationComponent, isStandalone: true, selector: "simpo-pagnination", inputs: { totalPages: "totalPages", currentPage: "currentPage" }, ngImport: i0, template: "<section class=\"d-flex w-100 justify-content-center\">\r\n    <div class=\"pagniation-btn\" (click)=\"goToPrev()\" [style.visibility]=\"currentPage == 1 ? 'hidden' : 'visible'\">Prev</div>\r\n    <ng-container *ngFor=\"let _ of [].constructor(totalPages); let idx = index\">\r\n        <span class=\"pagniation-btn\" [ngClass]=\"{'selected-page': (idx +1) == currentPage}\" *ngIf=\"idx < 5\">{{idx +1}}</span>\r\n    </ng-container>\r\n    <div *ngIf=\"totalPages > 6\" class=\"d-flex align-items-center\">\r\n        <span class=\"pagniation-btn fs-2\">...</span>\r\n        <span class=\"pagniation-btn\">{{totalPages}}</span>\r\n    </div>\r\n    <div class=\"pagniation-btn\" (click)=\"goToNext()\" [style.visibility]=\"currentPage == totalPages ? 'hidden' : 'visible'\">Next</div>\r\n</section>", styles: [".pagniation-btn{font-size:14px;padding:5px;border-radius:2px;width:45px;height:40px;cursor:pointer;display:flex;align-items:center;justify-content:center}.selected-page{background-color:#000;color:#fff}\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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: PagninationComponent, decorators: [{
@@ -4640,17 +4683,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
             args: [{ selector: 'simpo-pagnination', standalone: true, imports: [
                         CommonModule
                     ], template: "<section class=\"d-flex w-100 justify-content-center\">\r\n    <div class=\"pagniation-btn\" (click)=\"goToPrev()\" [style.visibility]=\"currentPage == 1 ? 'hidden' : 'visible'\">Prev</div>\r\n    <ng-container *ngFor=\"let _ of [].constructor(totalPages); let idx = index\">\r\n        <span class=\"pagniation-btn\" [ngClass]=\"{'selected-page': (idx +1) == currentPage}\" *ngIf=\"idx < 5\">{{idx +1}}</span>\r\n    </ng-container>\r\n    <div *ngIf=\"totalPages > 6\" class=\"d-flex align-items-center\">\r\n        <span class=\"pagniation-btn fs-2\">...</span>\r\n        <span class=\"pagniation-btn\">{{totalPages}}</span>\r\n    </div>\r\n    <div class=\"pagniation-btn\" (click)=\"goToNext()\" [style.visibility]=\"currentPage == totalPages ? 'hidden' : 'visible'\">Next</div>\r\n</section>", styles: [".pagniation-btn{font-size:14px;padding:5px;border-radius:2px;width:45px;height:40px;cursor:pointer;display:flex;align-items:center;justify-content:center}.selected-page{background-color:#000;color:#fff}\n"] }]
-        }], ctorParameters: () => [{ type: i2$4.Router }], propDecorators: { totalPages: [{
+        }], ctorParameters: () => [{ type: i3.Router }], propDecorators: { totalPages: [{
                 type: Input
             }], currentPage: [{
                 type: Input
             }] } });
 
 class ProductListComponent extends BaseSection {
-    constructor(platformId, _eventService, router, activatedRoute) {
+    constructor(platformId, _eventService, restService, router, activatedRoute) {
         super();
         this.platformId = platformId;
         this._eventService = _eventService;
+        this.restService = restService;
         this.router = router;
         this.activatedRoute = activatedRoute;
         this.pricingMin = 0;
@@ -4663,14 +4707,12 @@ class ProductListComponent extends BaseSection {
         ];
         this.screenWidth = 0;
         this.filterList = [];
-        this.categories = [
-            { option: 'Women’s Clothing', status: true },
-            { option: 'Man Fashion', status: false },
-            { option: 'Kid’s Clothing', status: false },
-            { option: 'Jewelry & Watches', status: false },
-            { option: 'Bags & Shoes', status: false },
-            { option: 'Toys & Kids', status: false },
-        ];
+        this.totalCount = 0;
+        this.pageNo = 0;
+        this.size = 20;
+        this.searchTxt = "";
+        this.categories = [];
+        this.collections = [];
         if (isPlatformBrowser(this.platformId)) {
             this.getScreenSize();
         }
@@ -4682,19 +4724,36 @@ class ProductListComponent extends BaseSection {
         this.content = this.data?.content;
         this.styles = this.data?.styles;
         this.button = this.data?.action.buttons[0];
+        this.getAllCategories();
+        this.getAllCategory();
         this.activatedRoute.queryParams.subscribe((qParam) => {
             const categories = qParam["category"]?.split("+")?.map((category) => category.replaceAll("_", " ")).filter((category) => category.length > 0);
-            this.categories?.forEach((category) => {
-                category.status = categories.includes(category.option);
-            });
-            this.filterList = categories;
+            const collections = qParam["collection"]?.split("+")?.map((collection) => collection.replaceAll("_", " ")).filter((collection) => collection.length > 0);
+            this.categories?.forEach((category) => category.status = categories?.includes(category?.option));
+            this.collections?.forEach((collection) => collection.status = collections?.includes(collection?.option));
+            this.searchTxt = qParam["searchTxt"];
+            this.filterList = [
+                ...this.categories?.filter((category) => category.status).map((category) => { return { id: category.id, name: category.option }; }),
+                ...this.collections?.filter((collection) => collection.status).map((collection) => { return { id: collection.id, name: collection.option }; })
+            ];
+            this.filterItemList();
         });
     }
-    removeFilter(filter) {
-        this.filterList = this.filterList.filter((f) => f != filter);
-        this.categories.forEach((category) => {
-            category.status = this.filterList.includes(category.option);
+    getAllCategories() {
+        this.restService.getAllCollections().subscribe((response) => {
+            this.categories = response.filter((category) => category.featuredCollection || true).map((category) => { return { option: category.collectionName, id: category.collectionId, status: false }; });
         });
+    }
+    getAllCategory() {
+        this.restService.getAllCategories().subscribe((response) => {
+            this.collections = response.filter((collection) => collection.featuredCategory || true).map((collection) => { return { option: collection.categoryName, id: collection.categoryId, status: false }; });
+        });
+    }
+    removeFilter(filter) {
+        this.filterList = this.filterList.filter((f) => f.id != filter.id);
+        const filterListIds = this.filterList.map((filter) => filter.id);
+        this.categories.forEach((category) => category.status = filterListIds.includes(category.id));
+        this.collections.forEach((collection) => collection.status = filterListIds.includes(collection.id));
         // sorting should add
         this.navigateFilter("");
     }
@@ -4707,6 +4766,7 @@ class ProductListComponent extends BaseSection {
     }
     clearFilter() {
         this.categories.forEach((category) => category.status = false);
+        this.collections.forEach((collection) => collection.status = false);
         this.pricingMin = 0;
         this.pricingMax = 100;
         this.router.navigate(['/']);
@@ -4721,16 +4781,34 @@ class ProductListComponent extends BaseSection {
     }
     navigateFilter(sorting) {
         let selectedCategory = "";
+        let selectedCollection = "";
         this.categories.filter((category) => category.status).map((category) => {
             return {
                 ...category,
                 slug: category.option.replaceAll(" ", "_")
             };
         }).forEach((category) => selectedCategory += (category.slug + "+"));
-        this.router.navigate(['/'], { queryParams: { minPrice: this.pricingMin, maxPrice: this.pricingMax, category: selectedCategory, sorting: sorting } });
+        this.collections.filter((collection) => collection.status).map((collection) => {
+            return {
+                ...collection,
+                slug: collection.option.replaceAll(" ", "_")
+            };
+        }).forEach((collection) => selectedCollection += (collection.slug + "+"));
+        this.router.navigate(['/'], { queryParams: { minPrice: this.pricingMin, maxPrice: this.pricingMax, category: selectedCategory, collection: selectedCollection, sorting: sorting } });
+    }
+    filterItemList() {
+        const collectionIds = this.collections.filter((collection) => collection.status).map((collection) => collection.id);
+        const categoryIds = this.categories.filter((category) => category.status).map((category) => category.id);
+        this.restService.getFilteredProduct(collectionIds, categoryIds, this.searchTxt, this.pricingMin, this.pricingMax, this.pageNo, this.size).subscribe((response) => {
+            this.responseData = response.data.data;
+            this.totalCount = response.data.count;
+        });
+    }
+    get getTotalPage() {
+        return Math.ceil(this.totalCount / this.size);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ProductListComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: i2$4.Router }, { token: i2$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ProductListComponent, isStandalone: true, selector: "simpo-product-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\">\r\n  <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n    <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\" style=\"width: 20%;\">\r\n      <div class=\"filter body-large\">\r\n        Filters\r\n      </div>\r\n      <div class=\"clear\" (click)=\"clearFilter()\">\r\n        Clear all\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex align-items-center justify-content-between\" style=\"width: 80%;\">\r\n     <div style=\"color: #6c757d82;\" class=\"fs-6 fw-normal\">Showing 1-12 of 50 Results</div>\r\n     <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\r\n        <div class=\"fs-6 fw-normal mr-3\" style=\"color: #6c757d82;\">Sort by</div>\r\n        <select (change)=\"applyFilter($event, 'SORT')\">\r\n            <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{filter.name}}</option>\r\n        </select>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"d-flex justify-content-between\">\r\n    <div class=\"filter-side\">\r\n\r\n      <div class=\"d-flex flex-column m-auto\" style=\"width: 95%;\">\r\n        <ng-container *ngFor=\"let filter of filterList\">\r\n          <div class=\"d-flex justify-content-between w-100 chip\">\r\n            <span>{{filter}}</span>\r\n            <span style=\"cursor: pointer;\" (click)=\"removeFilter(filter)\">X</span>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"categories-section\">\r\n        <div class=\"categories heading-small\">\r\n          Shop by categories\r\n        </div>\r\n        <div class=\"category-options\" *ngFor=\"let category of categories\" (click)=\"applyFilter(category, 'FILTER')\">\r\n          <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"category.status\" />\r\n          <div>{{category.option}}</div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"price-section\">\r\n        <div class=\"categories heading-small\">\r\n          Shop by price\r\n        </div>\r\n        <div>\r\n          <mat-slider min=\"200\" max=\"500\" style=\"width: 250px;\">\r\n            <input value=\"300\" matSliderStartThumb [(ngModel)]=\"pricingMin\">\r\n            <input value=\"400\" matSliderEndThumb [(ngModel)]=\"pricingMax\">\r\n          </mat-slider>\r\n        </div>\r\n        <div class=\"price-button-section\">\r\n          <div class=\"button-section\">\r\n            <button (click)=\"applyFilter()\">Filter</button>\r\n          </div>\r\n          <div class=\"price-range\">\r\n            Price: ${{ pricingMin }} - ${{ pricingMax }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n      <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n        <div *ngFor=\"let product of responseData\" class=\"product\" [style.width]=\"getProductWidth()\" (click)=\"proceedToProductDesc(product.itemId)\" style=\"cursor: pointer;\">\r\n          <div *ngIf=\"!(product.itemImages.length > 0 && product.itemImages[0].imgUrl)\" class=\"default-image\">\r\n            <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" alt=\"\">\r\n          </div>\r\n          <div *ngIf=\"product.itemImages.length > 0 && product.itemImages[0].imgUrl\">\r\n            <img [src]=\"product.itemImages[0].imgUrl\" alt=\"\" class=\"product-img\">\r\n          </div>\r\n          <div class=\"mt-2\">\r\n            <div class=\"product-name heading-large text-left\">\r\n              {{product.name}}</div>\r\n            <div class=\"price body-large text-left\">\r\n              ${{product.price.sellingPrice}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <!-- <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n          <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n            [color]=\"styles?.background?.accentColor\">{{content?.button}}</button>\r\n        </div> -->\r\n          <simpo-pagnination style=\"width: 100%;\" class=\"mt-15\"></simpo-pagnination>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.add-to-cart-btn{margin-top:15px}.add-to-cart-btn button{height:35px;font-size:16px!important}.filter-side{width:20%}.filter-top-section{padding:0 2rem}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.categories{display:flex;padding:1rem 2rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 2rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem}.button-section button{position:relative;background:#0267c1;color:#fff;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px}.chip{background:#0267c1;padding:8px 15px;border-radius:3px;margin:3px 0;color:#fff;transition:.3s opacity ease}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;justify-content:space-between}.price-range{padding-right:22px;color:#93959e;font-size:15px}.right-side{width:80%}@media screen and (max-width: 475px){.product-img{height:250px}.default-image img{height:250px}.filter-side{display:none}.right-side{width:100%}}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.category-options div{position:relative;top:3px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i7.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i7.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "component", type: PagninationComponent, selector: "simpo-pagnination", inputs: ["totalPages", "currentPage"] }, { kind: "directive", type: 
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ProductListComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i3.Router }, { token: i3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ProductListComponent, isStandalone: true, selector: "simpo-product-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\">\r\n  <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n    <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\" style=\"width: 20%;\">\r\n      <div class=\"filter body-large\">\r\n        Filters\r\n      </div>\r\n      <div class=\"clear\" (click)=\"clearFilter()\">\r\n        Clear all\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex align-items-center justify-content-between\" style=\"width: 80%;\">\r\n     <div style=\"color: #6c757d82;\" class=\"fs-6 fw-normal\">Showing {{pageNo*size +1}}-{{size}} 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 justify-content-between\">\r\n    <div class=\"filter-side\">\r\n\r\n      <div class=\"d-flex flex-column m-auto\" style=\"width: 95%;\">\r\n        <ng-container *ngFor=\"let filter of filterList\">\r\n          <div class=\"d-flex justify-content-between w-100 chip\">\r\n            <span>{{filter.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 min=\"200\" max=\"500\" style=\"width: 250px;\">\r\n            <input value=\"300\" matSliderStartThumb [(ngModel)]=\"pricingMin\">\r\n            <input value=\"400\" matSliderEndThumb [(ngModel)]=\"pricingMax\">\r\n          </mat-slider>\r\n        </div>\r\n        <div class=\"price-button-section\">\r\n          <div class=\"button-section\">\r\n            <button (click)=\"applyFilter()\">Filter</button>\r\n          </div>\r\n          <div class=\"price-range\">\r\n            Price: ${{ pricingMin }} - ${{ pricingMax }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n      <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n        <div *ngFor=\"let product of responseData\" class=\"product\" [style.width]=\"getProductWidth()\" (click)=\"proceedToProductDesc(product.itemId)\" style=\"cursor: pointer;\">\r\n          <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\" class=\"default-image\">\r\n            <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" alt=\"\">\r\n          </div>\r\n          <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\">\r\n            <img [src]=\"product.itemImages?.[0]?.imgUrl\" alt=\"\" class=\"product-img\">\r\n          </div>\r\n          <div class=\"mt-2\">\r\n            <div class=\"product-name heading-large text-left\">\r\n              {{product.name}}</div>\r\n            <div class=\"price body-large text-left\">\r\n              ${{product.price.sellingPrice}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <!-- <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n          <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n            [color]=\"styles?.background?.accentColor\">{{content?.button}}</button>\r\n        </div> -->\r\n          <simpo-pagnination style=\"width: 100%;\" class=\"mt-15\" [totalPages]=\"getTotalPage\" [currentPage]=\"pageNo +1\" ></simpo-pagnination>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;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{margin-top:15px}.add-to-cart-btn button{height:35px;font-size:16px!important}.filter-side{width:20%}.filter-top-section{padding:0 2rem}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.categories{display:flex;padding:1rem 2rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 2rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem}.button-section button{position:relative;background:#0267c1;color:#fff;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px}.chip{background:#0267c1;padding:8px 15px;border-radius:3px;margin:3px 0;color:#fff;transition:.3s opacity ease}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;justify-content:space-between}.price-range{padding-right:22px;color:#93959e;font-size:15px}.right-side{width:80%}@media screen and (max-width: 475px){.product-img{height:250px}.default-image img{height:250px}.filter-side{display:none}.right-side{width:100%}}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i8.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i8.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "component", type: PagninationComponent, selector: "simpo-pagnination", inputs: ["totalPages", "currentPage"] }, { kind: "directive", type: 
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }] }); }
 }
@@ -4749,11 +4827,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                         HoverDirective,
                         ButtonDirectiveDirective,
                         MatIcon
-                    ], template: "<section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\">\r\n  <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n    <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\" style=\"width: 20%;\">\r\n      <div class=\"filter body-large\">\r\n        Filters\r\n      </div>\r\n      <div class=\"clear\" (click)=\"clearFilter()\">\r\n        Clear all\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex align-items-center justify-content-between\" style=\"width: 80%;\">\r\n     <div style=\"color: #6c757d82;\" class=\"fs-6 fw-normal\">Showing 1-12 of 50 Results</div>\r\n     <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\r\n        <div class=\"fs-6 fw-normal mr-3\" style=\"color: #6c757d82;\">Sort by</div>\r\n        <select (change)=\"applyFilter($event, 'SORT')\">\r\n            <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{filter.name}}</option>\r\n        </select>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"d-flex justify-content-between\">\r\n    <div class=\"filter-side\">\r\n\r\n      <div class=\"d-flex flex-column m-auto\" style=\"width: 95%;\">\r\n        <ng-container *ngFor=\"let filter of filterList\">\r\n          <div class=\"d-flex justify-content-between w-100 chip\">\r\n            <span>{{filter}}</span>\r\n            <span style=\"cursor: pointer;\" (click)=\"removeFilter(filter)\">X</span>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"categories-section\">\r\n        <div class=\"categories heading-small\">\r\n          Shop by categories\r\n        </div>\r\n        <div class=\"category-options\" *ngFor=\"let category of categories\" (click)=\"applyFilter(category, 'FILTER')\">\r\n          <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"category.status\" />\r\n          <div>{{category.option}}</div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"price-section\">\r\n        <div class=\"categories heading-small\">\r\n          Shop by price\r\n        </div>\r\n        <div>\r\n          <mat-slider min=\"200\" max=\"500\" style=\"width: 250px;\">\r\n            <input value=\"300\" matSliderStartThumb [(ngModel)]=\"pricingMin\">\r\n            <input value=\"400\" matSliderEndThumb [(ngModel)]=\"pricingMax\">\r\n          </mat-slider>\r\n        </div>\r\n        <div class=\"price-button-section\">\r\n          <div class=\"button-section\">\r\n            <button (click)=\"applyFilter()\">Filter</button>\r\n          </div>\r\n          <div class=\"price-range\">\r\n            Price: ${{ pricingMin }} - ${{ pricingMax }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n      <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n        <div *ngFor=\"let product of responseData\" class=\"product\" [style.width]=\"getProductWidth()\" (click)=\"proceedToProductDesc(product.itemId)\" style=\"cursor: pointer;\">\r\n          <div *ngIf=\"!(product.itemImages.length > 0 && product.itemImages[0].imgUrl)\" class=\"default-image\">\r\n            <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" alt=\"\">\r\n          </div>\r\n          <div *ngIf=\"product.itemImages.length > 0 && product.itemImages[0].imgUrl\">\r\n            <img [src]=\"product.itemImages[0].imgUrl\" alt=\"\" class=\"product-img\">\r\n          </div>\r\n          <div class=\"mt-2\">\r\n            <div class=\"product-name heading-large text-left\">\r\n              {{product.name}}</div>\r\n            <div class=\"price body-large text-left\">\r\n              ${{product.price.sellingPrice}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <!-- <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n          <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n            [color]=\"styles?.background?.accentColor\">{{content?.button}}</button>\r\n        </div> -->\r\n          <simpo-pagnination style=\"width: 100%;\" class=\"mt-15\"></simpo-pagnination>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.add-to-cart-btn{margin-top:15px}.add-to-cart-btn button{height:35px;font-size:16px!important}.filter-side{width:20%}.filter-top-section{padding:0 2rem}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.categories{display:flex;padding:1rem 2rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 2rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem}.button-section button{position:relative;background:#0267c1;color:#fff;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px}.chip{background:#0267c1;padding:8px 15px;border-radius:3px;margin:3px 0;color:#fff;transition:.3s opacity ease}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;justify-content:space-between}.price-range{padding-right:22px;color:#93959e;font-size:15px}.right-side{width:80%}@media screen and (max-width: 475px){.product-img{height:250px}.default-image img{height:250px}.filter-side{display:none}.right-side{width:100%}}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.category-options div{position:relative;top:3px}\n"] }]
+                    ], template: "<section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\">\r\n  <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n    <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\" style=\"width: 20%;\">\r\n      <div class=\"filter body-large\">\r\n        Filters\r\n      </div>\r\n      <div class=\"clear\" (click)=\"clearFilter()\">\r\n        Clear all\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex align-items-center justify-content-between\" style=\"width: 80%;\">\r\n     <div style=\"color: #6c757d82;\" class=\"fs-6 fw-normal\">Showing {{pageNo*size +1}}-{{size}} 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 justify-content-between\">\r\n    <div class=\"filter-side\">\r\n\r\n      <div class=\"d-flex flex-column m-auto\" style=\"width: 95%;\">\r\n        <ng-container *ngFor=\"let filter of filterList\">\r\n          <div class=\"d-flex justify-content-between w-100 chip\">\r\n            <span>{{filter.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 min=\"200\" max=\"500\" style=\"width: 250px;\">\r\n            <input value=\"300\" matSliderStartThumb [(ngModel)]=\"pricingMin\">\r\n            <input value=\"400\" matSliderEndThumb [(ngModel)]=\"pricingMax\">\r\n          </mat-slider>\r\n        </div>\r\n        <div class=\"price-button-section\">\r\n          <div class=\"button-section\">\r\n            <button (click)=\"applyFilter()\">Filter</button>\r\n          </div>\r\n          <div class=\"price-range\">\r\n            Price: ${{ pricingMin }} - ${{ pricingMax }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n      <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n        <div *ngFor=\"let product of responseData\" class=\"product\" [style.width]=\"getProductWidth()\" (click)=\"proceedToProductDesc(product.itemId)\" style=\"cursor: pointer;\">\r\n          <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\" class=\"default-image\">\r\n            <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" alt=\"\">\r\n          </div>\r\n          <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\">\r\n            <img [src]=\"product.itemImages?.[0]?.imgUrl\" alt=\"\" class=\"product-img\">\r\n          </div>\r\n          <div class=\"mt-2\">\r\n            <div class=\"product-name heading-large text-left\">\r\n              {{product.name}}</div>\r\n            <div class=\"price body-large text-left\">\r\n              ${{product.price.sellingPrice}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <!-- <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n          <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n            [color]=\"styles?.background?.accentColor\">{{content?.button}}</button>\r\n        </div> -->\r\n          <simpo-pagnination style=\"width: 100%;\" class=\"mt-15\" [totalPages]=\"getTotalPage\" [currentPage]=\"pageNo +1\" ></simpo-pagnination>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;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{margin-top:15px}.add-to-cart-btn button{height:35px;font-size:16px!important}.filter-side{width:20%}.filter-top-section{padding:0 2rem}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.categories{display:flex;padding:1rem 2rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 2rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem}.button-section button{position:relative;background:#0267c1;color:#fff;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px}.chip{background:#0267c1;padding:8px 15px;border-radius:3px;margin:3px 0;color:#fff;transition:.3s opacity ease}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;justify-content:space-between}.price-range{padding-right:22px;color:#93959e;font-size:15px}.right-side{width:80%}@media screen and (max-width: 475px){.product-img{height:250px}.default-image img{height:250px}.filter-side{display:none}.right-side{width:100%}}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}\n"] }]
         }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
-                }] }, { type: EventsService }, { type: i2$4.Router }, { type: i2$4.ActivatedRoute }], propDecorators: { responseData: [{
+                }] }, { type: EventsService }, { type: RestService }, { type: i3.Router }, { type: i3.ActivatedRoute }], propDecorators: { responseData: [{
                 type: Input
             }], data: [{
                 type: Input
@@ -4856,6 +4934,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                 type: Input
             }] } });
 
+class BaseCollection {
+    constructor(json) {
+        this.storeId = json?.["storeId"];
+        this.businessId = json?.["businessId"];
+        this.description = json?.["description"];
+        this.imgUrl = json?.["imgUrl"];
+        this.showInWebsite = json?.["showInWebsite"];
+        this.createdDetails = json?.["createdDetails"];
+        this.active = json?.["active"];
+    }
+}
+// export interface CreatedDetails {
+//   createdById: string
+//   createdByName: string
+//   createdTimeStamp: string
+//   updatedTimeStamp: string
+// }
+
+class Category extends BaseCollection {
+    constructor(json) {
+        super(json);
+        this.categoryId = json?.["categoryid"];
+        this.categoryName = json?.["categoryName"];
+        this.featuredCategory = json?.["featuredCategory"];
+    }
+}
 // export interface CreatedDetails {
 //   createdById: string
 //   createdByName: string
@@ -4863,6 +4967,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
 //   updatedTimeStamp: string
 // }
 
+class Collection extends BaseCollection {
+    constructor(json) {
+        super(json);
+        this.collectionId = json?.["collectionId"];
+        this.collectionName = json?.["collectionName"];
+        this.featuredCollection = json?.["featuredCategory"]; // should be featuredCollection but need to change in BE
+    }
+}
+
 class Product {
     // createdTimeStamp: string
     // updatedTimeStamp: string
@@ -4900,5 +5013,5 @@ class Product {
  * Generated bundle index. Do not edit.
  */
 
-export { AddNewSectionComponent, AlignContent, AnimationDirective, BANNERALIGNMENT, BANNERHALIGN, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BorderDirective, ButtonDirectiveDirective, CartComponent, ChannelType, CheckoutComponent, ChooseUsSectionComponent, ColorDirective, ColumnDirectiveDirective, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, EventsService, FaqSectionComponent, FeaturedCategoryComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterSectionComponent, FooterTypes, HALIGN, HeaderButtonStyle, HeaderTextComponent, HoverDirective, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LocationSectionComponent, LogoShowcaseComponent, MapType, NavbarSectionComponent, ObjectPositionDirective, OverlayDirective, OverlayValue, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductDescComponent, ProductListComponent, RecentBlogPostSectionComponent, RedirectionLinkType, SPACING$1 as SPACING, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialSectionComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, VALIGN, VideoSectionComponent, ViewBlogComponent, animation, applySpacing, applyStyle, contentAlignment, fitContent, fitScreen, fontSize, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective };
+export { AddNewSectionComponent, AlignContent, AnimationDirective, BANNERALIGNMENT, BANNERHALIGN, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BorderDirective, ButtonDirectiveDirective, CartComponent, Category, ChannelType, CheckoutComponent, ChooseUsSectionComponent, Collection, ColorDirective, ColumnDirectiveDirective, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, EventsService, FaqSectionComponent, FeaturedCategoryComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterSectionComponent, FooterTypes, HALIGN, HeaderButtonStyle, HeaderTextComponent, HoverDirective, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LocationSectionComponent, LogoShowcaseComponent, MapType, NavbarSectionComponent, ObjectPositionDirective, OverlayDirective, OverlayValue, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductDescComponent, ProductListComponent, RecentBlogPostSectionComponent, RedirectionLinkType, SPACING$1 as SPACING, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialSectionComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, VALIGN, VideoSectionComponent, ViewBlogComponent, animation, applySpacing, applyStyle, contentAlignment, fitContent, fitScreen, fontSize, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective };
 //# sourceMappingURL=simpo-component-library.mjs.map