simpo-component-library 1.2.0 → 1.2.2

package/fesm2022/simpo-component-library.mjs

@@ -78,6 +78,10 @@ class EventsService {
         this.openBlogListEvent = new EventEmitter();
         this.toggleEditorEvent = new EventEmitter();
         this.closeEditorEvent = new EventEmitter();
+        // Ecommerce event emitter
+        this.redirectToPage = new EventEmitter();
+        this.addToCart = new EventEmitter();
+        this.placeOrder = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: EventsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: EventsService, providedIn: 'root' }); }
@@ -1415,7 +1419,7 @@ class ContentFitDirective {
         if (this.layout?.fit === 'content') {
             fitContent(this.el.nativeElement);
         }
-        else {
+        else if (this.layout?.fit === 'screen') {
             fitScreen(this.el.nativeElement);
         }
         applySpacing(this.el.nativeElement, this.layout?.spacing);
@@ -2249,7 +2253,7 @@ class FaqSectionComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FaqSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: FaqSectionComponent, isStandalone: true, selector: "simpo-faq-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" \r\n  class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n    [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\">\r\n\r\n    <div *ngIf=\"!content?.image?.showImage\">\r\n      <div class=\"container-fluid flex-col\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n        [simpoLayout]=\"style?.layout\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n          <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\r\n        </div>\r\n\r\n        <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\"(click)=\"toggleContent(i)\">\r\n          <p class=\"heading-medium d-flex align-items-center justify-content-between position-relative\" data-toggle=\"collapse\">\r\n            <span style=\"display: block;\">{{itemData.inputText[0].value}}</span>\r\n            <mat-icon *ngIf=\"unCollapsedList.includes(i)\" style=\"position: absolute; right: 0px;\">keyboard_arrow_up</mat-icon>\r\n            <mat-icon *ngIf=\"!unCollapsedList.includes(i)\" style=\"position: absolute; right: 0px;\">keyboard_arrow_down</mat-icon>\r\n          </p>\r\n          <div class=\"body-large desc multi-collapse\" [ngClass]=\"{'collapse': unCollapsedList.includes(i)}\">{{itemData.inputText[1].value}}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"content?.image?.showImage\" class=\"row g-5\" [id]=\"data?.id\"\r\n      [simpoLayout]=\"style?.layout\" [simpoPositionLayoutDirective]=\"style?.positionLayout\"\r\n      [ngClass]=\"{ 'align-items-stretch': style?.positionLayout?.value === 'left' || style?.positionLayout?.value === 'right' }\">\r\n\r\n\r\n      <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15\"\r\n        [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"style?.contentAlignment\">\r\n\r\n        <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n          <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\r\n        </div>\r\n\r\n        <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\" (click)=\"toggleContent(i)\">\r\n          <p class=\"heading-medium d-flex align-items-center justify-content-between position-relative\" data-toggle=\"collapse\">\r\n            <span>{{itemData.inputText[0].value}}</span>\r\n            <mat-icon *ngIf=\"unCollapsedList.includes(i)\"style=\"position: absolute; right: 0px;\">keyboard_arrow_up</mat-icon>\r\n            <mat-icon *ngIf=\"!unCollapsedList.includes(i)\"style=\"position: absolute; right: 0px;\">keyboard_arrow_down</mat-icon>\r\n          </p>\r\n          <div class=\"body-large desc multi-collapse\" [ngClass]=\"{'collapse': unCollapsedList.includes(i)}\">{{itemData.inputText[1].value}}</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-10 col-sm-8 col-lg-6\" [simpoContainerAlignment]=\"stylesLayout\" *ngIf=\"content?.image?.showImage\">\r\n        <img [src]=\"content?.image?.url\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n          [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n          [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid h-100\"\r\n          [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\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: [".mb-2{margin-bottom:2.5rem!important}.data{display:flex;flex-direction:column;gap:1rem;padding-top:2.5rem;padding-bottom:2.5rem;box-shadow:#11182733 0 -1px inset;cursor:pointer}.flex-col{display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{height:auto;position:relative}.heading-large{margin-top:20px}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: HeadingElementComponent, selector: "simpo-heading-element", inputs: ["data"] }, { 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: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { 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: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: FaqSectionComponent, isStandalone: true, selector: "simpo-faq-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" \r\n  class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n    [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\">\r\n\r\n    <div *ngIf=\"!content?.image?.showImage\">\r\n      <div class=\"container-fluid flex-col\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n        [simpoLayout]=\"style?.layout\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n          <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\r\n        </div>\r\n\r\n        <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\"(click)=\"toggleContent(i)\">\r\n          <p class=\"heading-medium d-flex align-items-center justify-content-between position-relative\" data-toggle=\"collapse\">\r\n            <span style=\"display: block;\">{{itemData.inputText[0].value}}</span>\r\n            <mat-icon *ngIf=\"unCollapsedList.includes(i)\" style=\"position: absolute; right: 0px;\">keyboard_arrow_up</mat-icon>\r\n            <mat-icon *ngIf=\"!unCollapsedList.includes(i)\" style=\"position: absolute; right: 0px;\">keyboard_arrow_down</mat-icon>\r\n          </p>\r\n          <div class=\"body-large desc multi-collapse\" [ngClass]=\"{'collapse': unCollapsedList.includes(i)}\" [innerHTML]=\"itemData.inputText[1].value\"></div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"content?.image?.showImage\" class=\"row g-5\" [id]=\"data?.id\"\r\n      [simpoLayout]=\"style?.layout\" [simpoPositionLayoutDirective]=\"style?.positionLayout\"\r\n      [ngClass]=\"{ 'align-items-stretch': style?.positionLayout?.value === 'left' || style?.positionLayout?.value === 'right' }\">\r\n\r\n\r\n      <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15\"\r\n        [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"style?.contentAlignment\">\r\n\r\n        <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n          <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\r\n        </div>\r\n\r\n        <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\" (click)=\"toggleContent(i)\">\r\n          <p class=\"heading-medium d-flex align-items-center justify-content-between position-relative\" data-toggle=\"collapse\">\r\n            <span>{{itemData.inputText[0].value}}</span>\r\n            <mat-icon *ngIf=\"unCollapsedList.includes(i)\"style=\"position: absolute; right: 0px;\">keyboard_arrow_up</mat-icon>\r\n            <mat-icon *ngIf=\"!unCollapsedList.includes(i)\"style=\"position: absolute; right: 0px;\">keyboard_arrow_down</mat-icon>\r\n          </p>\r\n          <div class=\"body-large desc multi-collapse\" [ngClass]=\"{'collapse': unCollapsedList.includes(i)}\" [innerHTML]=\"itemData.inputText[1].value\"></div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-10 col-sm-8 col-lg-6\" [simpoContainerAlignment]=\"stylesLayout\" *ngIf=\"content?.image?.showImage\">\r\n        <img [src]=\"content?.image?.url\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n          [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n          [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid h-100\"\r\n          [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\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: [".mb-2{margin-bottom:2.5rem!important}.data{display:flex;flex-direction:column;gap:1rem;padding-top:2.5rem;padding-bottom:2.5rem;box-shadow:#11182733 0 -1px inset;cursor:pointer}.flex-col{display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{height:auto;position:relative}.heading-large{margin-top:20px}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: HeadingElementComponent, selector: "simpo-heading-element", inputs: ["data"] }, { 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: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { 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: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }] }); }
 }
@@ -2281,7 +2285,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                         ContentTitleDirective,
                         ObjectPositionDirective,
                         SimpoContainerAligment
-                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" \r\n  class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n    [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\">\r\n\r\n    <div *ngIf=\"!content?.image?.showImage\">\r\n      <div class=\"container-fluid flex-col\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n        [simpoLayout]=\"style?.layout\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n          <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\r\n        </div>\r\n\r\n        <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\"(click)=\"toggleContent(i)\">\r\n          <p class=\"heading-medium d-flex align-items-center justify-content-between position-relative\" data-toggle=\"collapse\">\r\n            <span style=\"display: block;\">{{itemData.inputText[0].value}}</span>\r\n            <mat-icon *ngIf=\"unCollapsedList.includes(i)\" style=\"position: absolute; right: 0px;\">keyboard_arrow_up</mat-icon>\r\n            <mat-icon *ngIf=\"!unCollapsedList.includes(i)\" style=\"position: absolute; right: 0px;\">keyboard_arrow_down</mat-icon>\r\n          </p>\r\n          <div class=\"body-large desc multi-collapse\" [ngClass]=\"{'collapse': unCollapsedList.includes(i)}\">{{itemData.inputText[1].value}}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"content?.image?.showImage\" class=\"row g-5\" [id]=\"data?.id\"\r\n      [simpoLayout]=\"style?.layout\" [simpoPositionLayoutDirective]=\"style?.positionLayout\"\r\n      [ngClass]=\"{ 'align-items-stretch': style?.positionLayout?.value === 'left' || style?.positionLayout?.value === 'right' }\">\r\n\r\n\r\n      <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15\"\r\n        [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"style?.contentAlignment\">\r\n\r\n        <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n          <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\r\n        </div>\r\n\r\n        <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\" (click)=\"toggleContent(i)\">\r\n          <p class=\"heading-medium d-flex align-items-center justify-content-between position-relative\" data-toggle=\"collapse\">\r\n            <span>{{itemData.inputText[0].value}}</span>\r\n            <mat-icon *ngIf=\"unCollapsedList.includes(i)\"style=\"position: absolute; right: 0px;\">keyboard_arrow_up</mat-icon>\r\n            <mat-icon *ngIf=\"!unCollapsedList.includes(i)\"style=\"position: absolute; right: 0px;\">keyboard_arrow_down</mat-icon>\r\n          </p>\r\n          <div class=\"body-large desc multi-collapse\" [ngClass]=\"{'collapse': unCollapsedList.includes(i)}\">{{itemData.inputText[1].value}}</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-10 col-sm-8 col-lg-6\" [simpoContainerAlignment]=\"stylesLayout\" *ngIf=\"content?.image?.showImage\">\r\n        <img [src]=\"content?.image?.url\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n          [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n          [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid h-100\"\r\n          [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\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: [".mb-2{margin-bottom:2.5rem!important}.data{display:flex;flex-direction:column;gap:1rem;padding-top:2.5rem;padding-bottom:2.5rem;box-shadow:#11182733 0 -1px inset;cursor:pointer}.flex-col{display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{height:auto;position:relative}.heading-large{margin-top:20px}\n"] }]
+                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" \r\n  class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n    [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\">\r\n\r\n    <div *ngIf=\"!content?.image?.showImage\">\r\n      <div class=\"container-fluid flex-col\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n        [simpoLayout]=\"style?.layout\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n          <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\r\n        </div>\r\n\r\n        <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\"(click)=\"toggleContent(i)\">\r\n          <p class=\"heading-medium d-flex align-items-center justify-content-between position-relative\" data-toggle=\"collapse\">\r\n            <span style=\"display: block;\">{{itemData.inputText[0].value}}</span>\r\n            <mat-icon *ngIf=\"unCollapsedList.includes(i)\" style=\"position: absolute; right: 0px;\">keyboard_arrow_up</mat-icon>\r\n            <mat-icon *ngIf=\"!unCollapsedList.includes(i)\" style=\"position: absolute; right: 0px;\">keyboard_arrow_down</mat-icon>\r\n          </p>\r\n          <div class=\"body-large desc multi-collapse\" [ngClass]=\"{'collapse': unCollapsedList.includes(i)}\" [innerHTML]=\"itemData.inputText[1].value\"></div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"content?.image?.showImage\" class=\"row g-5\" [id]=\"data?.id\"\r\n      [simpoLayout]=\"style?.layout\" [simpoPositionLayoutDirective]=\"style?.positionLayout\"\r\n      [ngClass]=\"{ 'align-items-stretch': style?.positionLayout?.value === 'left' || style?.positionLayout?.value === 'right' }\">\r\n\r\n\r\n      <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15\"\r\n        [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"style?.contentAlignment\">\r\n\r\n        <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n          <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\r\n        </div>\r\n\r\n        <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\" (click)=\"toggleContent(i)\">\r\n          <p class=\"heading-medium d-flex align-items-center justify-content-between position-relative\" data-toggle=\"collapse\">\r\n            <span>{{itemData.inputText[0].value}}</span>\r\n            <mat-icon *ngIf=\"unCollapsedList.includes(i)\"style=\"position: absolute; right: 0px;\">keyboard_arrow_up</mat-icon>\r\n            <mat-icon *ngIf=\"!unCollapsedList.includes(i)\"style=\"position: absolute; right: 0px;\">keyboard_arrow_down</mat-icon>\r\n          </p>\r\n          <div class=\"body-large desc multi-collapse\" [ngClass]=\"{'collapse': unCollapsedList.includes(i)}\" [innerHTML]=\"itemData.inputText[1].value\"></div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-10 col-sm-8 col-lg-6\" [simpoContainerAlignment]=\"stylesLayout\" *ngIf=\"content?.image?.showImage\">\r\n        <img [src]=\"content?.image?.url\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n          [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n          [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid h-100\"\r\n          [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\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: [".mb-2{margin-bottom:2.5rem!important}.data{display:flex;flex-direction:column;gap:1rem;padding-top:2.5rem;padding-bottom:2.5rem;box-shadow:#11182733 0 -1px inset;cursor:pointer}.flex-col{display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{height:auto;position:relative}.heading-large{margin-top:20px}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -2855,7 +2859,7 @@ class VideoSectionComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: VideoSectionComponent, deps: [{ token: i1.DomSanitizer }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: VideoSectionComponent, isStandalone: true, selector: "simpo-video-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], 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 #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div class=\"container-fluid main-section\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n            [simpoLayout]=\"style?.layout\">\r\n            <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n                <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large\" [innerHTML]=\"text.value\" [simpoContentTitleSpace]=\"headingSpace\">\r\n                </div>\r\n\r\n\r\n                <div class=\"video-section\" [ngStyle]=\"style?.fullScreen ? {'padding': '0px', 'margin': '0px'} : {}\">\r\n                    <iframe class=\"video\"\r\n                        [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'video': style?.layout?.fit === 'screen'}\"\r\n                        id=\"iframe\" frameborder=\"0\" allowfullscreen></iframe>\r\n\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: [".total-container{height:auto;position:relative}.video{width:100%;height:100vh}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom: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: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: VideoSectionComponent, isStandalone: true, selector: "simpo-video-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], 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 #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div class=\"container-fluid main-section\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n            [simpoLayout]=\"style?.layout\">\r\n            <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n                <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large\" [innerHTML]=\"text.value\" [simpoContentTitleSpace]=\"headingSpace\">\r\n                </div>\r\n\r\n\r\n                <div class=\"video-section\" [ngStyle]=\"style?.fullScreen ? {'padding': '0px', 'margin': '0px'} : {}\">\r\n                    <iframe class=\"video\"\r\n                        [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'video': style?.layout?.fit === 'screen'}\"\r\n                        [src]=\"dom.bypassSecurityTrustResourceUrl(getVideoLink)\" frameborder=\"0\" allowfullscreen></iframe>\r\n\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: [".total-container{height:auto;position:relative}.video{width:100%;height:100vh}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom: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: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 
                 //directive
                 ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: 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: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }] }); }
 }
@@ -2885,7 +2889,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                         OverlayDirective,
                         PositionLayoutDirectiveDirective,
                         TextBackgroundDirectiveDirective
-                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" (click)=\"editSection()\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div class=\"container-fluid main-section\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n            [simpoLayout]=\"style?.layout\">\r\n            <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n                <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large\" [innerHTML]=\"text.value\" [simpoContentTitleSpace]=\"headingSpace\">\r\n                </div>\r\n\r\n\r\n                <div class=\"video-section\" [ngStyle]=\"style?.fullScreen ? {'padding': '0px', 'margin': '0px'} : {}\">\r\n                    <iframe class=\"video\"\r\n                        [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'video': style?.layout?.fit === 'screen'}\"\r\n                        id=\"iframe\" frameborder=\"0\" allowfullscreen></iframe>\r\n\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: [".total-container{height:auto;position:relative}.video{width:100%;height:100vh}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
+                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" (click)=\"editSection()\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div class=\"container-fluid main-section\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n            [simpoLayout]=\"style?.layout\">\r\n            <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n                <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large\" [innerHTML]=\"text.value\" [simpoContentTitleSpace]=\"headingSpace\">\r\n                </div>\r\n\r\n\r\n                <div class=\"video-section\" [ngStyle]=\"style?.fullScreen ? {'padding': '0px', 'margin': '0px'} : {}\">\r\n                    <iframe class=\"video\"\r\n                        [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'video': style?.layout?.fit === 'screen'}\"\r\n                        [src]=\"dom.bypassSecurityTrustResourceUrl(getVideoLink)\" frameborder=\"0\" allowfullscreen></iframe>\r\n\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: [".total-container{height:auto;position:relative}.video{width:100%;height:100vh}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
         }], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -4207,6 +4211,362 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                 args: ['mainContainer']
             }] } });
 
+class FeaturedProductsComponent extends BaseSection {
+    constructor(platformId, _eventService) {
+        super();
+        this.platformId = platformId;
+        this._eventService = _eventService;
+        this.edit = true;
+        this.screenWidth = 0;
+        if (isPlatformBrowser(this.platformId)) {
+            this.getScreenSize();
+        }
+    }
+    getScreenSize() {
+        this.screenWidth = window.innerWidth;
+    }
+    ngOnInit() {
+        this.content = this.data?.content;
+        this.styles = this.data?.styles;
+        this.button = this.data?.action.buttons[0];
+    }
+    getProductWidth() {
+        return this.screenWidth > 475 ? (this.screenWidth < 1025 ? '25%' : 'calc(' + ((100 / (this.styles?.elementInRow || 4))) + '%)') : (this.styles?.mobileColumn === 1 ? '100%' : '50%');
+    }
+    getSliceParameters() {
+        return [0, (this.styles?.maximumProduct || 0)];
+    }
+    proceedToProductDesc(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 }], 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: "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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FeaturedProductsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-featured-products', standalone: true, imports: [CommonModule, FormsModule,
+                        SimpoComponentModule,
+                        //directive
+                        AnimationDirective,
+                        ContentFitDirective,
+                        BackgroundDirective,
+                        BorderDirective,
+                        CornerDirective,
+                        HoverDirective,
+                        OverlayDirective,
+                        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"] }]
+        }], ctorParameters: () => [{ type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: EventsService }], propDecorators: { data: [{
+                type: Input
+            }], responseData: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], delete: [{
+                type: Input
+            }], getScreenSize: [{
+                type: HostListener,
+                args: ["window: resize", ["$event"]]
+            }] } });
+
+class FeaturedCategoryComponent extends BaseSection {
+    constructor(platformId, _eventService) {
+        super();
+        this.platformId = platformId;
+        this._eventService = _eventService;
+    }
+    ngOnInit() {
+        this.content = this.data?.content;
+        this.styles = this.data?.styles;
+    }
+    getSliceParameters() {
+        return [0, (this.styles?.maximumProduct || 0)];
+    }
+    redirectToListPage(categoryId) {
+        this._eventService.redirectToPage.emit({ redirectTo: '/list', data: { categoryId: categoryId } });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FeaturedCategoryComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: FeaturedCategoryComponent, isStandalone: true, selector: "simpo-featured-category", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\r\n  [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n    [simpoAnimation]=\"styles?.animation\">\r\n    <div *ngFor=\"let item of content?.inputText\">\r\n      <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n      </div>\r\n    </div>\r\n    <img src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n      class=\"span-img mt-15\">\r\n    <div class=\"category-parent\">\r\n      <div *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\" (click)=\"redirectToListPage(data.categoryId)\">\r\n        <img [src]=\"data.imgUrl[0]\" alt=\"\" class=\"category-image\">\r\n        <div class=\"category-name body-large\">{{data.categoryName}}</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n", styles: [".mt-15{margin-top:15px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.category-parent{display:flex;margin-top:25px;gap:25px;overflow-x:scroll;justify-content:center}.category-image{height:230px;width:230px;border-radius:100%;margin-bottom:15px}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.category-image{height:75px;width:75px}.header{gap:7px}.category-parent{gap:15px;margin-top:15px;padding-left:0!important;padding-right:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FeaturedCategoryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-featured-category', standalone: true, imports: [CommonModule, FormsModule,
+                        SimpoComponentModule,
+                        //directive
+                        AnimationDirective,
+                        ContentFitDirective,
+                        BackgroundDirective,
+                        BorderDirective,
+                        CornerDirective,
+                        HoverDirective,
+                        OverlayDirective,
+                        TextBackgroundDirectiveDirective,
+                        ColorDirective
+                    ], template: "<section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\r\n  [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n    [simpoAnimation]=\"styles?.animation\">\r\n    <div *ngFor=\"let item of content?.inputText\">\r\n      <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n      </div>\r\n    </div>\r\n    <img src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n      class=\"span-img mt-15\">\r\n    <div class=\"category-parent\">\r\n      <div *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\" (click)=\"redirectToListPage(data.categoryId)\">\r\n        <img [src]=\"data.imgUrl[0]\" alt=\"\" class=\"category-image\">\r\n        <div class=\"category-name body-large\">{{data.categoryName}}</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n", styles: [".mt-15{margin-top:15px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.category-parent{display:flex;margin-top:25px;gap:25px;overflow-x:scroll;justify-content:center}.category-image{height:230px;width:230px;border-radius:100%;margin-bottom:15px}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.category-image{height:75px;width:75px}.header{gap:7px}.category-parent{gap:15px;margin-top:15px;padding-left:0!important;padding-right:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\n"] }]
+        }], ctorParameters: () => [{ type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: EventsService }], propDecorators: { data: [{
+                type: Input
+            }], responseData: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], edit: [{
+                type: Input
+            }], delete: [{
+                type: Input
+            }] } });
+
+class ProductDescComponent extends BaseSection {
+    constructor(platformId, _eventService, snackBar) {
+        super();
+        this.platformId = platformId;
+        this._eventService = _eventService;
+        this.snackBar = snackBar;
+        this.addedQuantity = 0;
+        if (isPlatformBrowser(this.platformId)) {
+            this.getScreenSize();
+        }
+    }
+    ngOnInit() {
+        this.styles = this.data?.styles;
+        this.currentImg = this.responseData?.itemImages[0]?.imgUrl;
+        this.button = this.data?.action?.buttons[0];
+        this.buttonId = (this.data ? this.data.id : '') + (this.button ? this.button.id : '');
+    }
+    getScreenSize() {
+        this.screenWidth = window.innerWidth;
+    }
+    changeImg(url) {
+        this.currentImg = url;
+    }
+    changeQuantity(quantity) {
+        if (quantity) {
+            this.addedQuantity = +quantity;
+        }
+    }
+    addOrSubtractQuantity(type) {
+        if (type == 'ADD') {
+            this.addedQuantity += 1;
+        }
+        else {
+            if (this.addedQuantity && this.addedQuantity > 0)
+                this.addedQuantity -= 1;
+            else
+                this.addedQuantity = 0;
+        }
+    }
+    addToCart() {
+        if (this.addedQuantity < 0) {
+            this.snackBar.open('Please add quantity', 'close', { duration: 1500 });
+            return;
+        }
+        this._eventService.addToCart.emit({ product: this.responseData, quantity: this.addedQuantity });
+    }
+    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 }], 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?.properties?.description\">{{responseData?.properties?.description}}</div>\r\n\r\n        <div class=\"button-parent\">\r\n          <div class=\"quantity\">\r\n            <div class=\"plus\" (click)=\"addOrSubtractQuantity('SUBSTRACT')\">-</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>\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?.sku}}</div>\r\n          <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <span\r\n              *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories\">{{cat.refName}},\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\">\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: 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ProductDescComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-product-desc', standalone: true, imports: [CommonModule, FormsModule,
+                        SimpoComponentModule,
+                        //DIRECTIVE
+                        ButtonDirectiveDirective,
+                        AnimationDirective,
+                        ContentFitDirective,
+                        HoverDirective
+                    ], 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?.properties?.description\">{{responseData?.properties?.description}}</div>\r\n\r\n        <div class=\"button-parent\">\r\n          <div class=\"quantity\">\r\n            <div class=\"plus\" (click)=\"addOrSubtractQuantity('SUBSTRACT')\">-</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>\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?.sku}}</div>\r\n          <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <span\r\n              *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories\">{{cat.refName}},\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\">\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"] }]
+        }], ctorParameters: () => [{ type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: EventsService }, { type: i2$4.MatSnackBar }], propDecorators: { data: [{
+                type: Input
+            }], responseData: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], edit: [{
+                type: Input
+            }], delete: [{
+                type: Input
+            }], getScreenSize: [{
+                type: HostListener,
+                args: ["window: resize", ["$event"]]
+            }] } });
+
+class ProductListComponent extends BaseSection {
+    constructor(platformId, _eventService) {
+        super();
+        this.platformId = platformId;
+        this._eventService = _eventService;
+        this.screenWidth = 0;
+        this.categories = [
+            { option: 'Women’s Clothing (9)' },
+            { option: 'Man Fashion (1)' },
+            { option: 'Kid’s Clothing (5)' },
+            { option: 'Jewelry & Watches (3)' },
+            { option: 'Bags & Shoes (7)' },
+            { option: 'Toys & Kids (2)' },
+        ];
+        if (isPlatformBrowser(this.platformId)) {
+            this.getScreenSize();
+        }
+    }
+    getScreenSize() {
+        this.screenWidth = window.innerWidth;
+    }
+    ngOnInit() {
+        this.content = this.data?.content;
+        this.styles = this.data?.styles;
+        this.button = this.data?.action.buttons[0];
+    }
+    getProductWidth() {
+        return this.screenWidth > 475 ? (this.screenWidth < 1025 ? '25%' : 'calc(' + ((100 / (this.styles?.elementInRow || 4))) + '%)') : (this.styles?.mobileColumn === 1 ? '100%' : '50%');
+    }
+    proceedToProductDesc(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: ProductListComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }], 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\">\r\n    <div class=\"filter-side\">\r\n      <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\">\r\n        <div class=\"filter body-large\">\r\n          Filters\r\n        </div>\r\n        <div class=\"clear\">\r\n          Clear all\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"categories-section\">\r\n        <div class=\"categories heading-small\">\r\n          Shop by categories\r\n        </div>\r\n\r\n        <div class=\"category-options\" *ngFor=\"let category of categories\">\r\n          <div>\r\n            <input type=\"radio\" name=\"\" id=\"\">\r\n          </div>\r\n          <div>\r\n            {{category.option}}\r\n          </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          <input type=\"range\" style=\"width: 80%; margin: 1rem 2rem;\">\r\n        </div>\r\n        <div class=\"price-button-section\">\r\n          <div class=\"button-section\">\r\n            <button>Filter</button>\r\n          </div>\r\n          <div class=\"price-range\">\r\n            Price: \u20B920 - \u20B9550\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)\">\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\">\r\n              {{product.name}}</div>\r\n            <div class=\"price body-large\">\r\n              \u20B9\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      </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}.categories{display:flex;padding:1rem 2rem;color:#000;font-size:19px!important}.category-options{display:flex;align-items:center;padding:.75rem 2rem;gap:11px}.button-section{width:26%;margin:2rem}.button-section button{background:#0267c1;color:#fff;border:none;padding:1rem;width:-2%;font-weight:600}.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%}}\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: 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
+                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ProductListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-product-list', standalone: true, imports: [CommonModule, FormsModule,
+                        SimpoComponentModule,
+                        //directive
+                        AnimationDirective,
+                        ContentFitDirective,
+                        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\">\r\n    <div class=\"filter-side\">\r\n      <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\">\r\n        <div class=\"filter body-large\">\r\n          Filters\r\n        </div>\r\n        <div class=\"clear\">\r\n          Clear all\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"categories-section\">\r\n        <div class=\"categories heading-small\">\r\n          Shop by categories\r\n        </div>\r\n\r\n        <div class=\"category-options\" *ngFor=\"let category of categories\">\r\n          <div>\r\n            <input type=\"radio\" name=\"\" id=\"\">\r\n          </div>\r\n          <div>\r\n            {{category.option}}\r\n          </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          <input type=\"range\" style=\"width: 80%; margin: 1rem 2rem;\">\r\n        </div>\r\n        <div class=\"price-button-section\">\r\n          <div class=\"button-section\">\r\n            <button>Filter</button>\r\n          </div>\r\n          <div class=\"price-range\">\r\n            Price: \u20B920 - \u20B9550\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)\">\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\">\r\n              {{product.name}}</div>\r\n            <div class=\"price body-large\">\r\n              \u20B9\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      </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}.categories{display:flex;padding:1rem 2rem;color:#000;font-size:19px!important}.category-options{display:flex;align-items:center;padding:.75rem 2rem;gap:11px}.button-section{width:26%;margin:2rem}.button-section button{background:#0267c1;color:#fff;border:none;padding:1rem;width:-2%;font-weight:600}.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%}}\n"] }]
+        }], ctorParameters: () => [{ type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: EventsService }], propDecorators: { responseData: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], edit: [{
+                type: Input
+            }], delete: [{
+                type: Input
+            }], getScreenSize: [{
+                type: HostListener,
+                args: ["window: resize", ["$event"]]
+            }] } });
+
+class CartComponent extends BaseSection {
+    constructor(_eventService) {
+        super();
+        this._eventService = _eventService;
+    }
+    ngOnInit() {
+        this.styles = this.data?.styles;
+    }
+    addOrSubtractQuantity(vlaue) {
+    }
+    proceedToCheckout() {
+        if (localStorage.getItem("userId")) {
+            this._eventService.redirectToPage.emit({ redirectTo: '/checkout', data: { cartdata: this.responseData } });
+        }
+    }
+    proceedToListPage() {
+        this._eventService.redirectToPage.emit({ redirectTo: '/list' });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CartComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: CartComponent, isStandalone: true, selector: "simpo-cart", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\"  [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n    <div class=\"left-panel\">\r\n      <div class=\"my-bag\">\r\n        My Bag&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n      </div>\r\n      <div class=\"cart-items\">\r\n        <ng-container *ngFor=\"let item of responseData?.orderedItems\">\r\n          <div class=\"row item-parent\">\r\n            <div class=\"col-md-1 h-100\">\r\n              <img class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n            </div>\r\n            <div class=\"col-md-7 h-100\">\r\n              <div class=\"lh-23\">\r\n                <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n                <div class=\"price-with-tax\">\r\n                  \u20B9 {{item.priceWithTax}}\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <div class=\"item-price\">\u20B9 {{item.totalPrice}}</div>\r\n              <div>\r\n                <mat-icon class=\"delete-item\">delete</mat-icon>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <hr>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n    <div class=\"right-panel\">\r\n      <div class=\"my-bag\">\r\n        Price Details\r\n      </div>\r\n      <div class=\"price-details\">\r\n        <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalNetValue\">\r\n          <div class=\"price-type\">Total MRP</div>\r\n          <div class=\"price-value\">\u20B9 {{responseData.billdetails.totalNetValue}}</div>\r\n        </div>\r\n        <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalTax\">\r\n          <div class=\"price-type\">Total Tax</div>\r\n          <div class=\"price-value\">\u20B9 {{responseData?.billdetails?.totalTax}}</div>\r\n        </div>\r\n        <div class=\"price-parent-block\"\r\n          *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n          <div class=\"price-type\">Delivery Charge</div>\r\n          <div class=\"price-value\">\u20B9 {{responseData.billdetails.deliveryCharges}}</div>\r\n        </div>\r\n        <hr>\r\n        <div class=\"price-parent-block\" *ngIf=\"responseData?.totalAmount\">\r\n          <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n          <div class=\"price-value\" style=\"font-weight: 600;\">\u20B9 {{responseData.totalAmount}}</div>\r\n        </div>\r\n\r\n        <div class=\"button-parent\">\r\n          <div *ngFor=\"let button of data?.action?.buttons;let i = index\">\r\n            <button class=\"btn\" (click)=\"i == 0 ? proceedToCheckout() : proceedToListPage()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button?.styles\"\r\n              [color]=\"styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n    <div>\r\n      <div class=\"cart-image\">\r\n        <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\r\n      </div>\r\n      <div class=\"cart-text\">\r\n        <div class=\"heading-medium d-flex justify-content-center\">\r\n          Your cart is empty\r\n        </div>\r\n        <div class=\"description d-flex mt-4\">\r\n          Looks like you have not added anything to your cart. Go ahead & explore top categories.\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.cart-items{padding:10px 20px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;font-family:Poppins;color:#000}.my-bag span{color:#939393}.item-parent{margin-top:20px}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px}.price-with-tax{font-weight:400;font-size:16px;color:#626262;font-family:Lexend}.item-sku{font-weight:400;font-size:14px;color:#626262;font-family:Lexend}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;font-family:Poppins;color:#141514}.product-img{border-radius:5px;height:66px}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px;font-family:Poppins}.coupon-desc{color:#939393;font-size:12px;font-family:Poppins;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600;font-family:Poppins}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;font-family:Poppins;color:#434443}.price-value{font-weight:500;font-family:Poppins;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.delete-item{text-align:right;position:absolute;right:16px;bottom:0}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel,.right-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-cart', standalone: true, imports: [FormsModule, CommonModule,
+                        MatIcon,
+                        SimpoComponentModule,
+                        //DIRECTIVE
+                        ButtonDirectiveDirective,
+                        AnimationDirective,
+                        ContentFitDirective,
+                        HoverDirective
+                    ], template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\"  [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n    <div class=\"left-panel\">\r\n      <div class=\"my-bag\">\r\n        My Bag&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n      </div>\r\n      <div class=\"cart-items\">\r\n        <ng-container *ngFor=\"let item of responseData?.orderedItems\">\r\n          <div class=\"row item-parent\">\r\n            <div class=\"col-md-1 h-100\">\r\n              <img class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n            </div>\r\n            <div class=\"col-md-7 h-100\">\r\n              <div class=\"lh-23\">\r\n                <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n                <div class=\"price-with-tax\">\r\n                  \u20B9 {{item.priceWithTax}}\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <div class=\"item-price\">\u20B9 {{item.totalPrice}}</div>\r\n              <div>\r\n                <mat-icon class=\"delete-item\">delete</mat-icon>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <hr>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n    <div class=\"right-panel\">\r\n      <div class=\"my-bag\">\r\n        Price Details\r\n      </div>\r\n      <div class=\"price-details\">\r\n        <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalNetValue\">\r\n          <div class=\"price-type\">Total MRP</div>\r\n          <div class=\"price-value\">\u20B9 {{responseData.billdetails.totalNetValue}}</div>\r\n        </div>\r\n        <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalTax\">\r\n          <div class=\"price-type\">Total Tax</div>\r\n          <div class=\"price-value\">\u20B9 {{responseData?.billdetails?.totalTax}}</div>\r\n        </div>\r\n        <div class=\"price-parent-block\"\r\n          *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n          <div class=\"price-type\">Delivery Charge</div>\r\n          <div class=\"price-value\">\u20B9 {{responseData.billdetails.deliveryCharges}}</div>\r\n        </div>\r\n        <hr>\r\n        <div class=\"price-parent-block\" *ngIf=\"responseData?.totalAmount\">\r\n          <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n          <div class=\"price-value\" style=\"font-weight: 600;\">\u20B9 {{responseData.totalAmount}}</div>\r\n        </div>\r\n\r\n        <div class=\"button-parent\">\r\n          <div *ngFor=\"let button of data?.action?.buttons;let i = index\">\r\n            <button class=\"btn\" (click)=\"i == 0 ? proceedToCheckout() : proceedToListPage()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button?.styles\"\r\n              [color]=\"styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n    <div>\r\n      <div class=\"cart-image\">\r\n        <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\r\n      </div>\r\n      <div class=\"cart-text\">\r\n        <div class=\"heading-medium d-flex justify-content-center\">\r\n          Your cart is empty\r\n        </div>\r\n        <div class=\"description d-flex mt-4\">\r\n          Looks like you have not added anything to your cart. Go ahead & explore top categories.\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.cart-items{padding:10px 20px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;font-family:Poppins;color:#000}.my-bag span{color:#939393}.item-parent{margin-top:20px}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px}.price-with-tax{font-weight:400;font-size:16px;color:#626262;font-family:Lexend}.item-sku{font-weight:400;font-size:14px;color:#626262;font-family:Lexend}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;font-family:Poppins;color:#141514}.product-img{border-radius:5px;height:66px}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px;font-family:Poppins}.coupon-desc{color:#939393;font-size:12px;font-family:Poppins;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600;font-family:Poppins}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;font-family:Poppins;color:#434443}.price-value{font-weight:500;font-family:Poppins;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.delete-item{text-align:right;position:absolute;right:16px;bottom:0}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel,.right-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}}\n"] }]
+        }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
+                type: Input
+            }], responseData: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], edit: [{
+                type: Input
+            }], delete: [{
+                type: Input
+            }] } });
+
+class CheckoutComponent extends BaseSection {
+    constructor(_eventService) {
+        super();
+        this._eventService = _eventService;
+        this.editDeliveryAddress = true;
+    }
+    ngOnInit() {
+        this.editDeliveryAddress = this.responseData?.userDetails ? true : false;
+        this.content = this.data?.content;
+        this.styles = this.data?.styles;
+        this.button = this.data?.action?.buttons[0];
+    }
+    placeOrder() {
+        this._eventService.placeOrder.emit({ cartData: this.responseData });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CheckoutComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: CheckoutComponent, isStandalone: true, selector: "simpo-checkout", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n    <div class=\"row\">\r\n      <div class=\"col-md-7 col-12\" *ngIf=\"editDeliveryAddress\">\r\n        <div class=\"shipping-label heading-large\">Shipping To</div>\r\n        <div class=\"row\">\r\n          <div class=\"col-md-6 col-12 input-parent\">\r\n            <label for=\"\">Name</label>\r\n            <input [(ngModel)]=\"responseData.userDetails.userName\" type=\"text\" placeholder=\"Enter Name\"\r\n              class=\"input-field\">\r\n          </div>\r\n          <div class=\"col-md-6 col-12 input-parent\">\r\n            <label for=\"\">Mobile Number</label>\r\n            <input [(ngModel)]=\"responseData.userDetails.mobile\" type=\"number\" placeholder=\"Enter number\"\r\n              class=\"input-field\">\r\n          </div>\r\n          <div class=\"col-md-6 col-12 input-parent\">\r\n            <label for=\"\">Email</label>\r\n            <input [(ngModel)]=\"responseData.userDetails.email\" type=\"email\" placeholder=\"Enter email\"\r\n              class=\"input-field\">\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"shipping-label\" style=\"margin-top: 15px;\">Shipping Address</div>\r\n        <div class=\"row\">\r\n          <div class=\"col-12 input-parent\">\r\n            <label for=\"\">Address</label>\r\n            <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.addressLine1\" type=\"text\"\r\n              placeholder=\"Flat/House No, Building, Colony\" class=\"input-field\">\r\n          </div>\r\n          <div class=\"col-md-6 col-12 input-parent\">\r\n            <label for=\"\">Locality/Area</label>\r\n            <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.localityName\" type=\"text\"\r\n              placeholder=\"Eg: Jaybheri Enclave, Gachibowli\" class=\"input-field\">\r\n          </div>\r\n          <div class=\"col-md-6 col-12 input-parent\">\r\n            <label for=\"\">Landmark</label>\r\n            <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.landmark\" type=\"text\"\r\n              placeholder=\"Eg: Near SBI Bank\" class=\"input-field\">\r\n          </div>\r\n          <div class=\"col-md-6 col-12 input-parent\">\r\n            <label for=\"\">Pincode</label>\r\n            <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.zipCode\" type=\"number\" placeholder=\"Eg: 500032\"\r\n              class=\"input-field\">\r\n          </div>\r\n          <div class=\"col-md-6 col-12 input-parent\">\r\n            <label for=\"\">City</label>\r\n            <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.cityName\" type=\"text\"\r\n              placeholder=\"Eg: Hyderabad\" class=\"input-field\">\r\n          </div>\r\n          <div class=\"col-md-6 col-12 input-parent\">\r\n            <label for=\"\">State</label>\r\n            <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.stateName\" type=\"text\"\r\n              placeholder=\"Eg: Telanghana\" class=\"input-field\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-md-7 col-12\" *ngIf=\"!editDeliveryAddress\">\r\n        <div class=\"shipping-label\">Delivery Address</div>\r\n        <div class=\"delivery-address\">\r\n          <div style=\"position: absolute;right: 15px;\">\r\n            <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/library-media/813827c1709186499689edit%201.png\"\r\n              alt=\"\" style=\"cursor: pointer;\" (click)=\"editDeliveryAddress = true\">\r\n          </div>\r\n          <div class=\"userName\">{{responseData?.userDetails.userName}}</div>\r\n          <div class=\"user-details\" style=\"margin-top: 5px;\">\r\n            {{responseData?.userDetails.deliveryAddress?.addressLine1}},\r\n            {{responseData?.userDetails.deliveryAddress?.localityName}}</div>\r\n          <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.cityName}},\r\n            {{responseData?.userDetails.deliveryAddress?.stateName}}</div>\r\n          <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.countryName}} -\r\n            {{responseData?.userDetails.deliveryAddress?.zipCode}}</div>\r\n          <div class=\"user-details\" style=\"margin-top: 5px;\">Phone : <span\r\n              style=\"font-weight: 500;\">{{responseData?.userDetails.mobile}}</span></div>\r\n        </div>\r\n      </div>\r\n      <div class=\"offset-md-1 col-md-4 col-12 right-section\">\r\n        <div class=\"shipping-label heading-large lh-normal\">\r\n          Price Details\r\n        </div>\r\n        <div class=\"price-details\">\r\n          <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalNetValue\">\r\n            <div class=\"price-type\">Total MRP</div>\r\n            <div class=\"price-value\">\u20B9 {{responseData.billdetails.totalNetValue}}</div>\r\n          </div>\r\n          <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalTax\">\r\n            <div class=\"price-type\">Total Tax</div>\r\n            <div class=\"price-value\">\u20B9 {{responseData?.billdetails?.totalTax}}</div>\r\n          </div>\r\n          <div class=\"price-parent-block\"\r\n            *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n            <div class=\"price-type\">Delivery Charge</div>\r\n            <div class=\"price-value\">\u20B9 {{responseData.billdetails.deliveryCharges}}</div>\r\n          </div>\r\n          <hr>\r\n          <div class=\"price-parent-block\" *ngIf=\"responseData?.totalAmount\">\r\n            <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n            <div class=\"price-value\" style=\"font-weight: 600;\">\u20B9 {{responseData.totalAmount}}</div>\r\n          </div>\r\n\r\n          <div class=\"button-parent\">\r\n            <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n              [color]=\"styles?.background?.accentColor\" (click)=\"placeOrder()\">{{content?.button}}</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\r\n</section>\r\n", styles: [".container{margin-top:30px}.shipping-label{font-weight:600;font-size:18px;color:#141514;margin-bottom:5px}.input-parent{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}.input-label{font-family:Inter;font-weight:400;font-size:14px;color:#141514}.input-field{height:40px;border:2px solid#D0D5DD;border-radius:5px;padding-left:10px;font-size:14px;outline:none}.my-bag{font-size:16px;font-weight:600;font-family:Poppins;color:#000}.my-bag span{color:#939393}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px;font-family:Poppins}.coupon-desc{color:#939393;font-size:12px;font-family:Poppins;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600;font-family:Poppins}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:14px;font-family:Poppins;color:#434443}.price-value{font-weight:500;font-family:Poppins;font-size:16px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}.button-parent button{padding-top:7px!important;padding-bottom:7px!important;font-size:16px!important}.delivery-address{border:1px solid#D0D5DD;padding:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;position:relative}.userName{font-size:18px;font-weight:500;font-family:Poppins;color:#000}.user-details{font-weight:400;font-size:16px;font-family:Poppins}.lh-normal{line-height:normal}hr{border:1px solid #E8E8E8}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (max-width : 500px){.right-section{margin-top:15px}}\n"], dependencies: [{ 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CheckoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-checkout', standalone: true, imports: [FormsModule, CommonModule,
+                        SimpoComponentModule,
+                        //DIRECTIVE
+                        ButtonDirectiveDirective,
+                        AnimationDirective,
+                        ContentFitDirective,
+                        HoverDirective
+                    ], template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n    <div class=\"row\">\r\n      <div class=\"col-md-7 col-12\" *ngIf=\"editDeliveryAddress\">\r\n        <div class=\"shipping-label heading-large\">Shipping To</div>\r\n        <div class=\"row\">\r\n          <div class=\"col-md-6 col-12 input-parent\">\r\n            <label for=\"\">Name</label>\r\n            <input [(ngModel)]=\"responseData.userDetails.userName\" type=\"text\" placeholder=\"Enter Name\"\r\n              class=\"input-field\">\r\n          </div>\r\n          <div class=\"col-md-6 col-12 input-parent\">\r\n            <label for=\"\">Mobile Number</label>\r\n            <input [(ngModel)]=\"responseData.userDetails.mobile\" type=\"number\" placeholder=\"Enter number\"\r\n              class=\"input-field\">\r\n          </div>\r\n          <div class=\"col-md-6 col-12 input-parent\">\r\n            <label for=\"\">Email</label>\r\n            <input [(ngModel)]=\"responseData.userDetails.email\" type=\"email\" placeholder=\"Enter email\"\r\n              class=\"input-field\">\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"shipping-label\" style=\"margin-top: 15px;\">Shipping Address</div>\r\n        <div class=\"row\">\r\n          <div class=\"col-12 input-parent\">\r\n            <label for=\"\">Address</label>\r\n            <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.addressLine1\" type=\"text\"\r\n              placeholder=\"Flat/House No, Building, Colony\" class=\"input-field\">\r\n          </div>\r\n          <div class=\"col-md-6 col-12 input-parent\">\r\n            <label for=\"\">Locality/Area</label>\r\n            <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.localityName\" type=\"text\"\r\n              placeholder=\"Eg: Jaybheri Enclave, Gachibowli\" class=\"input-field\">\r\n          </div>\r\n          <div class=\"col-md-6 col-12 input-parent\">\r\n            <label for=\"\">Landmark</label>\r\n            <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.landmark\" type=\"text\"\r\n              placeholder=\"Eg: Near SBI Bank\" class=\"input-field\">\r\n          </div>\r\n          <div class=\"col-md-6 col-12 input-parent\">\r\n            <label for=\"\">Pincode</label>\r\n            <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.zipCode\" type=\"number\" placeholder=\"Eg: 500032\"\r\n              class=\"input-field\">\r\n          </div>\r\n          <div class=\"col-md-6 col-12 input-parent\">\r\n            <label for=\"\">City</label>\r\n            <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.cityName\" type=\"text\"\r\n              placeholder=\"Eg: Hyderabad\" class=\"input-field\">\r\n          </div>\r\n          <div class=\"col-md-6 col-12 input-parent\">\r\n            <label for=\"\">State</label>\r\n            <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.stateName\" type=\"text\"\r\n              placeholder=\"Eg: Telanghana\" class=\"input-field\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-md-7 col-12\" *ngIf=\"!editDeliveryAddress\">\r\n        <div class=\"shipping-label\">Delivery Address</div>\r\n        <div class=\"delivery-address\">\r\n          <div style=\"position: absolute;right: 15px;\">\r\n            <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/library-media/813827c1709186499689edit%201.png\"\r\n              alt=\"\" style=\"cursor: pointer;\" (click)=\"editDeliveryAddress = true\">\r\n          </div>\r\n          <div class=\"userName\">{{responseData?.userDetails.userName}}</div>\r\n          <div class=\"user-details\" style=\"margin-top: 5px;\">\r\n            {{responseData?.userDetails.deliveryAddress?.addressLine1}},\r\n            {{responseData?.userDetails.deliveryAddress?.localityName}}</div>\r\n          <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.cityName}},\r\n            {{responseData?.userDetails.deliveryAddress?.stateName}}</div>\r\n          <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.countryName}} -\r\n            {{responseData?.userDetails.deliveryAddress?.zipCode}}</div>\r\n          <div class=\"user-details\" style=\"margin-top: 5px;\">Phone : <span\r\n              style=\"font-weight: 500;\">{{responseData?.userDetails.mobile}}</span></div>\r\n        </div>\r\n      </div>\r\n      <div class=\"offset-md-1 col-md-4 col-12 right-section\">\r\n        <div class=\"shipping-label heading-large lh-normal\">\r\n          Price Details\r\n        </div>\r\n        <div class=\"price-details\">\r\n          <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalNetValue\">\r\n            <div class=\"price-type\">Total MRP</div>\r\n            <div class=\"price-value\">\u20B9 {{responseData.billdetails.totalNetValue}}</div>\r\n          </div>\r\n          <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalTax\">\r\n            <div class=\"price-type\">Total Tax</div>\r\n            <div class=\"price-value\">\u20B9 {{responseData?.billdetails?.totalTax}}</div>\r\n          </div>\r\n          <div class=\"price-parent-block\"\r\n            *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n            <div class=\"price-type\">Delivery Charge</div>\r\n            <div class=\"price-value\">\u20B9 {{responseData.billdetails.deliveryCharges}}</div>\r\n          </div>\r\n          <hr>\r\n          <div class=\"price-parent-block\" *ngIf=\"responseData?.totalAmount\">\r\n            <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n            <div class=\"price-value\" style=\"font-weight: 600;\">\u20B9 {{responseData.totalAmount}}</div>\r\n          </div>\r\n\r\n          <div class=\"button-parent\">\r\n            <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n              [color]=\"styles?.background?.accentColor\" (click)=\"placeOrder()\">{{content?.button}}</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\r\n</section>\r\n", styles: [".container{margin-top:30px}.shipping-label{font-weight:600;font-size:18px;color:#141514;margin-bottom:5px}.input-parent{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}.input-label{font-family:Inter;font-weight:400;font-size:14px;color:#141514}.input-field{height:40px;border:2px solid#D0D5DD;border-radius:5px;padding-left:10px;font-size:14px;outline:none}.my-bag{font-size:16px;font-weight:600;font-family:Poppins;color:#000}.my-bag span{color:#939393}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px;font-family:Poppins}.coupon-desc{color:#939393;font-size:12px;font-family:Poppins;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600;font-family:Poppins}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:14px;font-family:Poppins;color:#434443}.price-value{font-weight:500;font-family:Poppins;font-size:16px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}.button-parent button{padding-top:7px!important;padding-bottom:7px!important;font-size:16px!important}.delivery-address{border:1px solid#D0D5DD;padding:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;position:relative}.userName{font-size:18px;font-weight:500;font-family:Poppins;color:#000}.user-details{font-weight:400;font-size:16px;font-family:Poppins}.lh-normal{line-height:normal}hr{border:1px solid #E8E8E8}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (max-width : 500px){.right-section{margin-top:15px}}\n"] }]
+        }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
+                type: Input
+            }], responseData: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], edit: [{
+                type: Input
+            }], delete: [{
+                type: Input
+            }] } });
+
+// export interface CreatedDetails {
+//   createdById: string
+//   createdByName: string
+//   createdTimeStamp: string
+//   updatedTimeStamp: string
+// }
+
 /*
  * Public API Surface of simpo-ui
  */
@@ -4217,5 +4577,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AddNewSectionComponent, AlignContent, AnimationDirective, BANNERALIGNMENT, BANNERHALIGN, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BorderDirective, ButtonDirectiveDirective, ChannelType, ChooseUsSectionComponent, ColorDirective, ColumnDirectiveDirective, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, EventsService, FaqSectionComponent, 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, 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, ChannelType, CheckoutComponent, ChooseUsSectionComponent, ColorDirective, ColumnDirectiveDirective, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, EventsService, FaqSectionComponent, FeaturedCategoryComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterSectionComponent, FooterTypes, HALIGN, HeaderButtonStyle, HeaderTextComponent, HoverDirective, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LocationSectionComponent, LogoShowcaseComponent, MapType, NavbarSectionComponent, ObjectPositionDirective, OverlayDirective, OverlayValue, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, ProductDescComponent, ProductListComponent, RecentBlogPostSectionComponent, RedirectionLinkType, SPACING$1 as SPACING, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialSectionComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, VALIGN, VideoSectionComponent, ViewBlogComponent, animation, applySpacing, applyStyle, contentAlignment, fitContent, fitScreen, fontSize, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective };
 //# sourceMappingURL=simpo-component-library.mjs.map