simpo-component-library 1.0.1 → 1.0.2

package/fesm2022/simpo-component-library.mjs

@@ -3353,6 +3353,174 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                 type: Input
             }] } });
 
+class ProcessSectionComponent extends BaseSection {
+    constructor(_eventService) {
+        super();
+        this._eventService = _eventService;
+    }
+    ngOnInit() {
+        this.deleteSelected = this.delete;
+        this.content = this.data?.content;
+        this.styles = this.data?.styles;
+        if (!this.styles || !this.content)
+            return;
+        // this.styles.layout.bannerImageDisplay = this.content.image.showImage;
+    }
+    get stylesLayout() {
+        return { ...this.styles?.layout };
+    }
+    get getJustifyContent() {
+        return "justify-content: center !important;";
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ProcessSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ProcessSectionComponent, isStandalone: true, selector: "simpo-process-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\">\r\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n    [simpoBorder]=\"styles?.border\">\r\n    <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\"\r\n      [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n      [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\">\r\n\r\n      <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15\" [simpoContainerAlignment]=\"stylesLayout\"\r\n        [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n        <div *ngFor=\"let item of content?.inputText\">\r\n          <div [innerHTML]=\"item.value\" class=\"text-element\"\r\n            [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\" [id]=\"data?.id\"\r\n            [simpoColor]=\"styles?.background?.color\"></div>\r\n        </div>\r\n        <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n          <div class=\"card_wrapper\">\r\n            <div class=\"container_card visible\">\r\n              <div class=\"card-section\">\r\n                <div class=\"first-part-card\"\r\n                  [ngClass]=\"item.inputText[0].label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                  {{ item.inputText[0].value }}\r\n                </div>\r\n                <div class=\"second-part-card\">\r\n                  <img [src]=\"item.image.url\" [alt]=\"item.image.altText\" />\r\n                </div>\r\n                <div class=\"third-part-card\">\r\n\r\n\r\n                  <div class=\"text-element heading-medium\">\r\n                    {{ item.inputText[1].value }}\r\n                  </div>\r\n                  <div class=\"text-element\"\r\n                    [ngClass]=\"item.inputText[2].label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                    {{ item.inputText[2].value }}\r\n                  </div>\r\n\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\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]=\"styles?.image\" [id]=\"data?.id\"\r\n          [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.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</div>\r\n", styles: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}@media only screen and (max-width: 475px){.col-10{width:100%;height:32vh;padding-right:13px;padding-left:13px}}.text-element{inline-size:100%;overflow-wrap:break-word}.container_card .card-section{display:flex;align-items:center;gap:30px;padding:20px;border:1px solid rgba(116,33,252,.1);border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:40px;height:40px;border-radius:50%;border:1px solid rgba(116,33,252,.1);padding:10px;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.second-part-card .img{width:20px;height:20px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { 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: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { 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: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ProcessSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-process-section', standalone: true, imports: [SimpoElementsModule,
+                        CommonModule,
+                        SimpoComponentModule,
+                        MatGridListModule,
+                        SimpoButtonComponent,
+                        AnimationDirective,
+                        SimpoContainerAligment,
+                        BackgroundDirective,
+                        BannerContentFitDirective,
+                        BorderDirective,
+                        ButtonDirectiveDirective,
+                        ColumnDirectiveDirective,
+                        ContainerFitDirective,
+                        simpoConetenAlignmentDirective,
+                        ContentFitDirective,
+                        CornerDirective,
+                        SimpoFooterLayoutDirective,
+                        HoverDirective,
+                        ImageDirectiveDirective,
+                        OverlayDirective,
+                        PositionLayoutDirectiveDirective,
+                        TextBackgroundDirectiveDirective,
+                        ObjectPositionDirective,
+                        ColorDirective,
+                        TextSizeDirective], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\">\r\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n    [simpoBorder]=\"styles?.border\">\r\n    <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\"\r\n      [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n      [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\">\r\n\r\n      <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15\" [simpoContainerAlignment]=\"stylesLayout\"\r\n        [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n        <div *ngFor=\"let item of content?.inputText\">\r\n          <div [innerHTML]=\"item.value\" class=\"text-element\"\r\n            [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\" [id]=\"data?.id\"\r\n            [simpoColor]=\"styles?.background?.color\"></div>\r\n        </div>\r\n        <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n          <div class=\"card_wrapper\">\r\n            <div class=\"container_card visible\">\r\n              <div class=\"card-section\">\r\n                <div class=\"first-part-card\"\r\n                  [ngClass]=\"item.inputText[0].label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                  {{ item.inputText[0].value }}\r\n                </div>\r\n                <div class=\"second-part-card\">\r\n                  <img [src]=\"item.image.url\" [alt]=\"item.image.altText\" />\r\n                </div>\r\n                <div class=\"third-part-card\">\r\n\r\n\r\n                  <div class=\"text-element heading-medium\">\r\n                    {{ item.inputText[1].value }}\r\n                  </div>\r\n                  <div class=\"text-element\"\r\n                    [ngClass]=\"item.inputText[2].label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                    {{ item.inputText[2].value }}\r\n                  </div>\r\n\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\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]=\"styles?.image\" [id]=\"data?.id\"\r\n          [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.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</div>\r\n", styles: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}@media only screen and (max-width: 475px){.col-10{width:100%;height:32vh;padding-right:13px;padding-left:13px}}.text-element{inline-size:100%;overflow-wrap:break-word}.container_card .card-section{display:flex;align-items:center;gap:30px;padding:20px;border:1px solid rgba(116,33,252,.1);border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:40px;height:40px;border-radius:50%;border:1px solid rgba(116,33,252,.1);padding:10px;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.second-part-card .img{width:20px;height:20px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}\n"] }]
+        }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], edit: [{
+                type: Input
+            }], delete: [{
+                type: Input
+            }] } });
+
+class ProcessModernComponent extends BaseSection {
+    constructor(_eventService) {
+        super();
+        this._eventService = _eventService;
+    }
+    ngOnInit() {
+        this.deleteSelected = this.delete;
+        this.content = this.data?.content;
+        this.styles = this.data?.styles;
+        if (!this.styles || !this.content)
+            return;
+        // this.styles.layout.bannerImageDisplay = this.content.image.showImage;
+    }
+    get stylesLayout() {
+        return { ...this.styles?.layout };
+    }
+    get getJustifyContent() {
+        return "justify-content: center !important;";
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ProcessModernComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ProcessModernComponent, isStandalone: true, selector: "simpo-process-modern", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\">\r\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n    [simpoBorder]=\"styles?.border\">\r\n    <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n      <div class=\"px-5 py-4\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\">\r\n        <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n          <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n            <div *ngFor=\"let text of data?.content?.inputText\">\r\n              <div class=\"heading-large lh-2 mb-3\" [innerHTML]=\"text.value\"></div>\r\n            </div>\r\n          </div>\r\n          <!-- starting -->\r\n          <div *ngFor=\"let item of content?.listItem?.data ;let i = index\" class=\"single_card\">\r\n            <div class=\"rowFlexContainer\" [ngClass]=\"{'flex-row-reverse': i % 2 === 1}\">\r\n              <div class=\"imageContainer\">\r\n                <img class=\"section_image\" [src]=\"item.image.url\" [alt]=\"item.image.altText\"\r\n                  [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\">\r\n              </div>\r\n              <div class=\"content\">\r\n                <div class=\"numberStyle\">\r\n                  {{ i }}\r\n                </div>\r\n                <div class=\"contentHeading\">\r\n                  {{ item.inputText[0].value }}\r\n                </div>\r\n                <div class=\"contentDescription\">\r\n                  {{ item.inputText[1].value }}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <!-- ending -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>\r\n", styles: [".single_card{width:100%}.rowFlexContainer{display:flex;flex-direction:row;width:80%!important;margin:3% auto auto;justify-content:space-between!important}.flex-row-reverse{flex-direction:row-reverse}.imageContainer{width:40%!important;height:250px;line-height:30px}.section_image{width:100%;height:100%;object-fit:cover;border-radius:10px}.img{vertical-align:middle}.content{width:55%!important;height:100%;display:flex;flex-direction:column;justify-content:flex-start;font-size:18px;font-weight:600}.numberStyle{height:50px;padding:10px!important;border-radius:50%;border:1px solid black;width:50px!important;display:flex;align-items:center;justify-content:center}.contentHeading{margin-bottom:0;margin-top:20px;font-size:24px;font-weight:400}.contentDescription{padding-top:10px;line-height:28px;width:90%!important;text-overflow:ellipsis;overflow:hidden;font-size:18px;font-weight:400}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}@media only screen and (min-width: 428px) and (max-width: 500px){.rowFlexContainer,.rowFlexContainer .flex-row-reverse{width:90%!important;height:auto!important;flex-direction:column!important;padding:10px!important;border-radius:10px!important;border:1px solid lightgray!important}}@media only screen and (min-width: 428px) and (max-width: 500px){.imageContainer{width:100%!important;height:200px!important}}@media only screen and (min-width: 428px) and (max-width: 500px){.content{width:100%!important;margin-right:0}}@media only screen and (min-width: 428px) and (max-width: 500px){.numberStyle{margin-bottom:15px;width:12%}}@media only screen and (min-width: 428px) and (max-width: 500px){.contentDescription{width:100%!important}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { 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: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ProcessModernComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-process-modern', standalone: true, imports: [
+                        SimpoElementsModule,
+                        CommonModule,
+                        SimpoComponentModule,
+                        MatGridListModule,
+                        SimpoButtonComponent,
+                        //directive
+                        SimpoContainerAligment,
+                        AnimationDirective,
+                        BackgroundDirective,
+                        BannerContentFitDirective,
+                        BorderDirective,
+                        ButtonDirectiveDirective,
+                        ColumnDirectiveDirective,
+                        ContainerFitDirective,
+                        simpoConetenAlignmentDirective,
+                        ContentFitDirective,
+                        CornerDirective,
+                        SimpoFooterLayoutDirective,
+                        HoverDirective,
+                        ImageDirectiveDirective,
+                        OverlayDirective,
+                        PositionLayoutDirectiveDirective,
+                        TextBackgroundDirectiveDirective,
+                        ObjectPositionDirective,
+                        ColorDirective,
+                        TextSizeDirective
+                    ], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\">\r\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n    [simpoBorder]=\"styles?.border\">\r\n    <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n      <div class=\"px-5 py-4\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\">\r\n        <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n          <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n            <div *ngFor=\"let text of data?.content?.inputText\">\r\n              <div class=\"heading-large lh-2 mb-3\" [innerHTML]=\"text.value\"></div>\r\n            </div>\r\n          </div>\r\n          <!-- starting -->\r\n          <div *ngFor=\"let item of content?.listItem?.data ;let i = index\" class=\"single_card\">\r\n            <div class=\"rowFlexContainer\" [ngClass]=\"{'flex-row-reverse': i % 2 === 1}\">\r\n              <div class=\"imageContainer\">\r\n                <img class=\"section_image\" [src]=\"item.image.url\" [alt]=\"item.image.altText\"\r\n                  [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\">\r\n              </div>\r\n              <div class=\"content\">\r\n                <div class=\"numberStyle\">\r\n                  {{ i }}\r\n                </div>\r\n                <div class=\"contentHeading\">\r\n                  {{ item.inputText[0].value }}\r\n                </div>\r\n                <div class=\"contentDescription\">\r\n                  {{ item.inputText[1].value }}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <!-- ending -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>\r\n", styles: [".single_card{width:100%}.rowFlexContainer{display:flex;flex-direction:row;width:80%!important;margin:3% auto auto;justify-content:space-between!important}.flex-row-reverse{flex-direction:row-reverse}.imageContainer{width:40%!important;height:250px;line-height:30px}.section_image{width:100%;height:100%;object-fit:cover;border-radius:10px}.img{vertical-align:middle}.content{width:55%!important;height:100%;display:flex;flex-direction:column;justify-content:flex-start;font-size:18px;font-weight:600}.numberStyle{height:50px;padding:10px!important;border-radius:50%;border:1px solid black;width:50px!important;display:flex;align-items:center;justify-content:center}.contentHeading{margin-bottom:0;margin-top:20px;font-size:24px;font-weight:400}.contentDescription{padding-top:10px;line-height:28px;width:90%!important;text-overflow:ellipsis;overflow:hidden;font-size:18px;font-weight:400}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}@media only screen and (min-width: 428px) and (max-width: 500px){.rowFlexContainer,.rowFlexContainer .flex-row-reverse{width:90%!important;height:auto!important;flex-direction:column!important;padding:10px!important;border-radius:10px!important;border:1px solid lightgray!important}}@media only screen and (min-width: 428px) and (max-width: 500px){.imageContainer{width:100%!important;height:200px!important}}@media only screen and (min-width: 428px) and (max-width: 500px){.content{width:100%!important;margin-right:0}}@media only screen and (min-width: 428px) and (max-width: 500px){.numberStyle{margin-bottom:15px;width:12%}}@media only screen and (min-width: 428px) and (max-width: 500px){.contentDescription{width:100%!important}}\n"] }]
+        }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], edit: [{
+                type: Input
+            }], delete: [{
+                type: Input
+            }] } });
+
+class FeaturesSectionComponent extends BaseSection {
+    constructor(_eventService) {
+        super();
+        this._eventService = _eventService;
+        this.selectedTabIndex = 0;
+    }
+    ngOnInit() {
+        this.content = this.data?.content;
+        this.listItems = this.data?.content.listItem.data;
+        this.styles = this.data?.styles;
+        this.deleteSelected = this.delete;
+        this.changetab(0);
+    }
+    changetab(index) {
+        this.selectedTabIndex = index;
+        this.currentData = this.data?.content.listItem.data[this.selectedTabIndex];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FeaturesSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: FeaturesSectionComponent, isStandalone: true, selector: "simpo-features-section", inputs: { data: "data", edit: "edit", delete: "delete", index: "index" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [simpoBorder]=\"styles?.border\">\r\n  <div class=\"px-5 py-4\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\">\r\n    <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-medium mb-1\" [innerHTML]=\"text.value\"></div>\r\n        </div>\r\n        <div class=\"d-flex justify-content-between mt-5 mb-5\">\r\n          <div *ngFor=\"let tab of content?.listItem?.data; let index = index\">\r\n            <div class=\"tab\" [ngClass]=\"{'active': index === selectedTabIndex}\" (click)=\"changetab(index)\">\r\n              {{ tab.inputText[0].value }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"content d-flex g-15 mt-5\">\r\n        <div class=\"image\">\r\n          <img [src]=\"currentData?.image?.url\" alt=\"\"\r\n          [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"currentData?.image?.position\"\r\n          [simpoCorner]=\"styles?.corners\"\r\n          class=\"d-block mx-lg-auto img-fluid h-100\">\r\n        </div>\r\n        <div class=\"content-heading heading-large\"  [id]=\"data?.id\">\r\n          {{currentData?.inputText?.[1]?.value}}\r\n          <div class=\"content-description body-large mt-5\">\r\n            {{currentData?.inputText?.[2]?.value}}\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: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.content{padding:0px 10rem;width:90%;gap:3rem}.image img{width:80%}.content-heading{width:60%;text-align:start}.content-description{width:100%;text-align:start}.active{font-weight:700;letter-spacing:.8px;border-bottom:2px solid white;padding-bottom:20px}.tab{letter-spacing:.8px;border-bottom:2px solid;padding-bottom:20px;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: 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: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FeaturesSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-features-section', standalone: true, imports: [
+                        BackgroundDirective,
+                        HoverDirective,
+                        HoverElementsComponent,
+                        DeleteHoverElementComponent,
+                        CommonModule,
+                        OverlayDirective,
+                        BorderDirective,
+                        AnimationDirective,
+                        ContentFitDirective,
+                        simpoConetenAlignmentDirective,
+                        ImageDirectiveDirective,
+                        ObjectPositionDirective,
+                        CornerDirective
+                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [simpoBorder]=\"styles?.border\">\r\n  <div class=\"px-5 py-4\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\">\r\n    <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-medium mb-1\" [innerHTML]=\"text.value\"></div>\r\n        </div>\r\n        <div class=\"d-flex justify-content-between mt-5 mb-5\">\r\n          <div *ngFor=\"let tab of content?.listItem?.data; let index = index\">\r\n            <div class=\"tab\" [ngClass]=\"{'active': index === selectedTabIndex}\" (click)=\"changetab(index)\">\r\n              {{ tab.inputText[0].value }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"content d-flex g-15 mt-5\">\r\n        <div class=\"image\">\r\n          <img [src]=\"currentData?.image?.url\" alt=\"\"\r\n          [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"currentData?.image?.position\"\r\n          [simpoCorner]=\"styles?.corners\"\r\n          class=\"d-block mx-lg-auto img-fluid h-100\">\r\n        </div>\r\n        <div class=\"content-heading heading-large\"  [id]=\"data?.id\">\r\n          {{currentData?.inputText?.[1]?.value}}\r\n          <div class=\"content-description body-large mt-5\">\r\n            {{currentData?.inputText?.[2]?.value}}\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: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.content{padding:0px 10rem;width:90%;gap:3rem}.image img{width:80%}.content-heading{width:60%;text-align:start}.content-description{width:100%;text-align:start}.active{font-weight:700;letter-spacing:.8px;border-bottom:2px solid white;padding-bottom:20px}.tab{letter-spacing:.8px;border-bottom:2px solid;padding-bottom:20px;cursor:pointer}\n"] }]
+        }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
+                type: Input
+            }], edit: [{
+                type: Input
+            }], delete: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }] } });
+
 /*
  * Public API Surface of simpo-ui
  */
@@ -3363,5 +3531,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, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BorderDirective, ButtonDirectiveDirective, ChannelType, ChooseUsSectionComponent, ColorDirective, ColumnDirectiveDirective, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, EventsService, FaqSectionComponent, FooterSectionComponent, FooterTypes, HALIGN, HeaderButtonStyle, HeaderTextComponent, HoverDirective, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LocationSectionComponent, MapType, NavbarSectionComponent, ObjectPositionDirective, OverlayDirective, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, RecentBlogPostSectionComponent, RedirectionLinkType, SPACING$1 as SPACING, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialSectionComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, VALIGN, VideoSectionComponent, ViewBlogComponent, animation, applySpacing, applyStyle, contentAlignment, fitContent, fitScreen, fontSize, logoDirection, logoSpeed, logoType, mapStyle, simpoConetenAlignmentDirective };
+export { AddNewSectionComponent, AlignContent, AnimationDirective, BANNERALIGNMENT, BANNERHALIGN, BackgroundDirective, 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, MapType, NavbarSectionComponent, ObjectPositionDirective, OverlayDirective, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, RecentBlogPostSectionComponent, RedirectionLinkType, SPACING$1 as SPACING, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialSectionComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, VALIGN, VideoSectionComponent, ViewBlogComponent, animation, applySpacing, applyStyle, contentAlignment, fitContent, fitScreen, fontSize, logoDirection, logoSpeed, logoType, mapStyle, simpoConetenAlignmentDirective };
 //# sourceMappingURL=simpo-component-library.mjs.map