import { Component, Input, ViewChild } from '@angular/core';
import { SimpoElementsModule } from '../../elements';
import { CommonModule } from '@angular/common';
import { SimpoComponentModule } from '../../components';
import { MatGridListModule } from '@angular/material/grid-list';
import { SimpoButtonComponent } from '../../elements/simpo-button/simpo-button.component';
import { AnimationDirective } from '../../directive/animation-directive';
import { BackgroundDirective } from '../../directive/background-directive';
import { ContentFitDirective } from '../../directive/content-fit-directive';
import { BannerContentFitDirective } from '../../directive/banner-content-fit-directive';
import { BorderDirective } from '../../directive/border-directive';
import { ButtonDirectiveDirective } from '../../directive/button-directive.directive';
import { ColumnDirectiveDirective } from '../../directive/column-directive.directive';
import { ContainerFitDirective } from '../../directive/container-fir.directive';
import { simpoConetenAlignmentDirective } from '../../directive/content-alignment-directive';
import { CornerDirective } from '../../directive/corner-directive';
import { SimpoFooterLayoutDirective } from '../../directive/footer-layout-directive';
import { HoverDirective } from '../../directive/hover-element-directive';
import { ImageDirectiveDirective } from '../../directive/image-directive.directive';
import { OverlayDirective } from '../../directive/overlay-directive';
import { PositionLayoutDirectiveDirective } from '../../directive/position-layout-directive.directive';
import { TextBackgroundDirectiveDirective } from '../../directive/text-background-directive.directive';
import { ObjectPositionDirective } from '../../directive/image-position.directive';
import BaseSection from '../BaseSection';
import { ColorDirective } from '../../directive/color.directive';
import { SimpoContainerAligment } from '../../directive/container-alignment.directive';
import { SimpoBlurContentDirective } from '../../directive/blur-content.directive';
import { RemoveCarouselDirective } from './../../directive/removeCarousel-directive';
import { BannerSectionComponent } from '../banner-section/banner-section.component';
import { SimpoBorderlessDirective } from '../../directive/borderlessImage.directive';
import { SanitizeHtmlPipe } from '../../services/sanitizeHtml';
import { SvgDividerComponent } from '../../elements/svg-divider/svg-divider.component';
import { TextEditorComponent } from '../../elements/text-editor/text-editor.component';
import * as i0 from "@angular/core";
import * as i1 from "./../../services/events.service";
import * as i2 from "../../elements/simpo-button/simpo-button.component";
import * as i3 from "../../elements/svg-divider/svg-divider.component";
import * as i4 from "@angular/common";
import * as i5 from "../../components/hover-elements/hover-elements.component";
import * as i6 from "../../components/delete-hover-element/delete-hover-element.component";
export class CarouselBannerComponent extends BaseSection {
    selectSlide(index) {
        this.currentIndex = index;
    }
    constructor(_eventService) {
        super();
        this._eventService = _eventService;
        this.currentIndex = 1;
    }
    ngOnInit() {
        this.deleteSelected = this.delete;
        // this.content = this.data?.content;
        // this.styles = this.data?.styles;
        const id = this.data?.id;
        // const action = this.data?.action;
        // if(!this.styles  || !this.content) {
        //   return;
        // }
        // this._eventService.stopCarouselEvent.subscribe((res:any)=>{
        // })
        // let a = document.querySelector('data-ride');
    }
    // ngAfterViewInit(){
    //   this._eventService.stopCarouselEvent.subscribe((res:any)=>{
    //     this.selectSlide(res.activeItem)
    //     this.currentIndex = res.activeItem;
    //     this.carouselElement1.nativeElement.setAttribute('data-interval','false')
    //   })
    // }
    // get stylesLayout() {
    //   return {...this.styles?.layout} as LayOutModel;
    // }
    // get getBlurValue() {
    //   return this.styles?.blur;
    // }
    // get getBackgroundColor() {
    //   return {...this.styles?.background} as BackgroundModel
    // }
    // get getBackgroundOpacity() {
    //   if (this.styles?.overlay)
    //     return this.opacityValue(this.styles.overlay);
    //   return '0';
    // }
    get stylesLayout() {
        return { ...this.styles?.layout };
    }
    get getJustifyContent() {
        return "justify-content: center !important;";
    }
    get canMergeNavbar() {
        return this.styles?.merge;
    }
    get isBorderlessImage() {
        return this.styles?.borderLessImage && (this.styles?.positionLayout.value == "left" || this.styles?.positionLayout.value == "right");
    }
    get getPositionLayout() {
        return { ...this.styles?.positionLayout };
    }
    opacityValue(value) {
        switch (value) {
            case "LIGHT":
                return '0.2';
            case "MODERATE":
                return '0.3';
            case "STRONG":
                return '0.5';
            case "VERY_STRONG":
                return '0.7';
            default:
                return '0';
        }
    }
    editSection() {
        this._eventService.toggleEditorEvent.emit(false);
        setTimeout(() => {
            this._eventService.editSection.emit({ data: this.data });
        }, 100);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CarouselBannerComponent, deps: [{ token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CarouselBannerComponent, isStandalone: true, selector: "simpo-carousel-banner", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "carouselElement1", first: true, predicate: ["carouselExampleInterval1"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- <section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\r\n    <div id=\"carouselExampleInterval1\" class=\"carousel slide\" data-ride=\"carousel\" data-interval=\"false\"\r\n        #carouselExampleInterval1\r\n        [ngClass]=\"data?.styles?.bannerAnimation?.value === 'Horizontal' ? '' : 'carousel-fade'\">\r\n        <div class=\"carousel-inner\">\r\n            <ng-container *ngFor=\"let item of data?.listBanners ;let i = index\">\r\n                <div [id]=\"item?.id\" class=\"carousel-item total-container\" [simpoBackground]=\"item?.styles?.background\"\r\n                    class=\"h-100 d-flex\">\r\n                    <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n                    <div class=\"px-4 py-5\"\r\n                        [ngClass]=\"{'col-lg-6 col-xxl-6': isBorderlessImage(item), 'w-100 col-xxl-8': !isBorderlessImage(item)}\"\r\n                        [id]=\"item?.id\" #mainContainer [simpoOverlay]=\"item?.styles?.background\"\r\n                        [simpoBorder]=\"item?.styles?.border\">\r\n                        <div class=\"row g-5 justify-content-start\" [id]=\"item?.id\"\r\n                            [simpoAnimation]=\"item?.styles?.animation\" [simpoLayout]=\"item?.styles?.layout\"\r\n                            [simpoPositionLayoutDirective]=\"item?.styles?.positionLayout\"\r\n                            [ngClass]=\"{ 'align-items-stretch': item?.styles?.positionLayout?.value === 'left' || item?.styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n                            <div class=\"col-10 col-sm-8 col-lg-6\"\r\n                                *ngIf=\"item?.content?.image?.showImage && !isBorderlessImage(item)\"\r\n                                [simpoContainerAlignment]=\"stylesLayout(item)\">\r\n                                <img loading=\"lazy\"  [src]=\"item?.content?.image?.url\" [simpoImageDirective]=\"item?.styles?.image\"\r\n                                    [id]=\"item?.id\" [simpoObjectPosition]=\"item?.content?.image?.position\"\r\n                                    [simpoCorner]=\"item?.styles?.corners\"\r\n                                    [class]=\"item?.id+(item?.content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n                                    style=\"object-fit: cover;\" [alt]=\"item?.content?.image?.altText\" width=\"700\"\r\n                                    height=\"500\" loading=\"lazy\" />\r\n                            </div>\r\n                            <div class=\"d-flex flex-column justify-content-start gap-15\"\r\n                                [ngClass]=\"{'col-lg-12': isBorderlessImage(item), 'col-lg-6': !isBorderlessImage(item)}\"\r\n                                [simpoContainerAlignment]=\"stylesLayout(item)\" [id]=\"item?.id\"\r\n                                [simpoContentAlignment]=\"item?.styles?.contentAlignment\">\r\n                                <div *ngFor=\"let text of item?.content?.inputText\">\r\n                                    <div [innerHTML]=\"text.value\" class=\"text-element\"\r\n                                        [ngClass]=\"text.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                                    </div>\r\n                                </div>\r\n                                <div *ngFor=\"let extraList of item?.content?.listItem?.data\" class=\"carder\">\r\n                                    <ng-container *ngFor=\"let listItem of extraList?.inputText\">\r\n                                        <div class=\"card_wrapper\" *ngIf=\"listItem.value != ''\">\r\n                                            <div class=\"container_card visible\">\r\n                                                <div class=\"card-section\">\r\n                                                    <div class=\"second-part-card\">\r\n\r\n                                                    </div>\r\n                                                    <div class=\"first-part-card\"\r\n                                                        [ngClass]=\"listItem.label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                                                        <img loading=\"lazy\"  class=\"tick-img\"\r\n                                                            src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/933997c1718790303127907598c1696063061900green_verified_image.png\"\r\n                                                            alt=\"something\"\r\n                                                            style=\"width: 5%;height: 5%;position:relative\" />\r\n\r\n                                                        {{ listItem.value }}\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n                                    </ng-container>\r\n                                </div>\r\n                                <div *ngIf=\"item?.action && item?.action?.display\"\r\n                                    class=\"button-display d-flex gap-3\"\r\n                                    [simpoContainerAlignment]=\"stylesLayout(item)\">\r\n                                    <div *ngFor=\"let button of item?.action?.buttons\">\r\n                                        <app-button-element [buttonContent]=\"button.content\"\r\n                                            [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n                                            [sectionId]=\"item?.id\"\r\n                                            [color]=\"item?.styles?.background?.accentColor\"></app-button-element>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <ng-template #ImageSection>\r\n                    <div class=\"col-10 col-sm-8 col-lg-6\"\r\n                        [ngStyle]=\"{'width': item?.styles?.positionLayout?.value === 'right' ? 'fit-content' : ''}\"\r\n                        style=\"padding: 0px !important;\" *ngIf=\"item?.content?.image?.showImage && isBorderlessImage;\"\r\n                        [simpoBorderless]=\"getPositionLayout(item)\">\r\n                        <img loading=\"lazy\"  [src]=\"item?.content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n                            [alt]=\"item?.content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n                    </div>\r\n                </ng-template>\r\n            </ng-container>\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</section> -->\r\n\r\n<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\r\n    [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage}\"\r\n    [attr.style]=\"customClass\">\r\n    <div class=\"flex relative fix-safari-flickering\">\r\n        <div class=\"flex break-word w-full items-center\">\r\n            <div id=\"carouselExampleControls\" class=\"carousel slide\" data-bs-ride=\"carousel\">\r\n                <!-- <ol class=\"carousel-indicators\">\r\n                    <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n                        data-bs-target=\"#carouselExampleInterval\" [attr.data-bs-slide-to]=\"i\"></li>\r\n                </ol> -->\r\n                <div class=\"carousel-inner\">\r\n                    <div *ngFor=\"let item of data?.content?.listItem?.data; let i = index\" class=\"carousel-item\"\r\n                        [ngClass]=\"{'active': i === currentIndex}\">\r\n                        <div [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"data?.styles?.positionLayout\"\r\n                            [ngClass]=\"{ 'align-items-stretch': data?.styles?.positionLayout?.value === 'left' || data?.styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n                            <div [id]=\"item?.id\"\r\n                                [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage}\"\r\n                                [simpoBackground]=\"item?.styles?.background\" style=\"height: 100%;\">\r\n                                <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n                                <div [simpoAnimation]=\"data?.styles?.animation\" [id]=\"data?.id\"\r\n                                    [simpoLayout]=\"data?.styles?.layout\">\r\n                                    <div class=\"px-4 py-5\"\r\n                                        [ngClass]=\"{'col-lg-6 col-xxl-6': isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage}\"\r\n                                        [id]=\"data?.id\" #mainContainer [simpoBorder]=\"item?.styles?.border\">\r\n                                        <div class=\"row g-5 justify-content-start\" [id]=\"data?.id\"\r\n                                            [simpoPositionLayoutDirective]=\"data?.styles?.positionLayout\"\r\n                                            [ngClass]=\"{ 'align-items-stretch': data?.styles?.positionLayout?.value === 'left' || data?.styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n                                            <div class=\"col-10 col-sm-8 col-lg-6\"\r\n                                                *ngIf=\"item?.image?.showImage && !isBorderlessImage\"\r\n                                                [simpoContainerAlignment]=\"stylesLayout\">\r\n                                                <img [src]=\"item?.image?.url\"\r\n                                                    [simpoImageDirective]=\"item?.styles?.image\" [id]=\"item?.id\"\r\n                                                    [simpoObjectPosition]=\"item?.image?.position\"\r\n                                                    [simpoCorner]=\"item?.styles?.corners\"\r\n                                                    [class]=\"item?.id+(item?.image?.id || '')\"\r\n                                                    class=\"d-block w-100 insideImg\" style=\"object-fit: cover;\"\r\n                                                    [alt]=\"item?.image?.altText\" width=\"700\" height=\"500\"\r\n                                                    loading=\"lazy\" />\r\n                                            </div>\r\n                                            <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n                                                [ngClass]=\"{'col-lg-12': isBorderlessImage, 'col-lg-6': !isBorderlessImage}\"\r\n                                                [simpoContainerAlignment]=\"stylesLayout\" [id]=\"item?.id\"\r\n                                                [simpoContentAlignment]=\"item?.styles?.contentAlignment\">\r\n                                                <div *ngFor=\"let ipText of item?.inputText; let j = index\">\r\n                                                    <!-- <div [innerHTML]=\"ipText.value | sanitizeHtml\" class=\"text-element\"\r\n                                                        [ngClass]=\"ipText.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                                                    </div> -->\r\n                                                    <simpo-text-editor [(value)]=\"ipText.value\"\r\n                                                        [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"j\" [itemIndex]=\"i\" [isRTE]=\"ipText.isRTE\"></simpo-text-editor>\r\n                                                </div>\r\n                                                <div *ngFor=\"let itemData of item?.additionalData; let k = index\" 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=\"second-part-card\">\r\n\r\n                                                                </div>\r\n                                                                <div class=\"first-part-card d-flex align-items-center\"\r\n                                                                    [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                                                                    <img class=\"tick-img\"\r\n                                                                        src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/933997c1718790303127907598c1696063061900green_verified_image.png\"\r\n                                                                        alt=\"something\" style=\"width: 20px;\" />\r\n                                                                    <simpo-text-editor [(value)]=\"itemData.content\"\r\n                                                                        [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"k\" [itemIndex]=\"i\"></simpo-text-editor>\r\n                                                                    <!-- {{ itemData.content }} -->\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                                <div *ngIf=\"item?.action && item?.action?.display\"\r\n                                                    class=\"button-display\" [simpoContainerAlignment]=\"stylesLayout\">\r\n                                                    <div *ngFor=\"let button of item?.action?.buttons\">\r\n                                                        <app-button-element [buttonContent]=\"button.content\"\r\n                                                            [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n                                                            [sectionId]=\"item?.id\" [edit]=\"edit\"\r\n                                                            [color]=\"item?.styles?.background?.accentColor\"\r\n                                                            [backgroundInfo]=\"item?.styles?.background\"></app-button-element>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <ng-template #ImageSection>\r\n                                    <div class=\"col-10 col-sm-8 col-lg-6\"\r\n                                        [ngStyle]=\"{'width': styles?.positionLayout?.value === 'right' ? 'fit-content' : ''}\"\r\n                                        style=\"padding: 0px !important;\"\r\n                                        *ngIf=\"item?.image?.showImage && isBorderlessImage;\"\r\n                                        [simpoBorderless]=\"getPositionLayout\">\r\n                                        <img [src]=\"item?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n                                            [alt]=\"item?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n                                    </div>\r\n                                </ng-template>\r\n\r\n                                <!-- <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container> -->\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"styles?.devider?.display\">\r\n        <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n            [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\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>", styles: [".total-container{height:auto;position:relative}.carousel-indicators li{width:10px;height:10px;background-color:#332e2e;border-radius:50%}.carousel-indicators .active{width:20px;height:10px;background-color:#fff;margin:1px;border-radius:0}.carousel-inner{position:relative;width:100%}.overlay{position:absolute;top:0;left:0;height:100%;width:100%;opacity:0}.carousel-item{position:relative;width:100%;height:100%}.carousel-indicators{bottom:0!important}.carousel-indicators .circle{width:10px;height:10px;border-radius:50%;background-color:gray}.heading-large{margin-left:1%;margin-right:1%}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}li{list-style:none}.heading-large{margin-left:0%!important}@media (min-width: 860px){.md\\:flex-row{flex-direction:row}}@media (min-width: 860px){.md\\:w-max{width:max-content}}@media (min-width: 860px){.md\\:inline-flex{display:inline-flex}}.btn-container{display:flex;justify-content:center;width:auto}.btn{padding:1rem 1.5rem}.customclass{display:inline-flex;flex-direction:row;gap:1rem;width:100%;margin-top:2rem}@media (max-width: 800px){.customclass{flex-direction:column;align-items:center}.btn-container{width:100%}.btn{width:100%;padding:1rem}}.pb-20{padding-bottom:50px}.pt-20{padding-top:50px}.d-flex-important{display:flex!important}.button-display{display:flex;gap:10px}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: i2.SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "component", type: i3.SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i5.HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: i6.DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: SimpoBorderlessDirective, selector: "[simpoBorderless]", inputs: ["simpoBorderless"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { 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: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CarouselBannerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'simpo-carousel-banner', standalone: true, imports: [
                        SimpoElementsModule,
                        CommonModule,
                        SimpoComponentModule,
                        MatGridListModule,
                        SimpoButtonComponent,
                        SimpoBorderlessDirective,
                        AnimationDirective,
                        BackgroundDirective,
                        simpoConetenAlignmentDirective,
                        ContentFitDirective,
                        BannerContentFitDirective,
                        BorderDirective,
                        ButtonDirectiveDirective,
                        ColumnDirectiveDirective,
                        ContainerFitDirective,
                        simpoConetenAlignmentDirective,
                        CornerDirective,
                        SimpoFooterLayoutDirective,
                        HoverDirective,
                        ImageDirectiveDirective,
                        OverlayDirective,
                        PositionLayoutDirectiveDirective,
                        TextBackgroundDirectiveDirective,
                        ObjectPositionDirective,
                        ColorDirective,
                        SimpoContainerAligment,
                        SimpoBlurContentDirective,
                        RemoveCarouselDirective,
                        BannerSectionComponent,
                        SanitizeHtmlPipe, SvgDividerComponent,
                        TextEditorComponent
                    ], template: "<!-- <section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\r\n    <div id=\"carouselExampleInterval1\" class=\"carousel slide\" data-ride=\"carousel\" data-interval=\"false\"\r\n        #carouselExampleInterval1\r\n        [ngClass]=\"data?.styles?.bannerAnimation?.value === 'Horizontal' ? '' : 'carousel-fade'\">\r\n        <div class=\"carousel-inner\">\r\n            <ng-container *ngFor=\"let item of data?.listBanners ;let i = index\">\r\n                <div [id]=\"item?.id\" class=\"carousel-item total-container\" [simpoBackground]=\"item?.styles?.background\"\r\n                    class=\"h-100 d-flex\">\r\n                    <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n                    <div class=\"px-4 py-5\"\r\n                        [ngClass]=\"{'col-lg-6 col-xxl-6': isBorderlessImage(item), 'w-100 col-xxl-8': !isBorderlessImage(item)}\"\r\n                        [id]=\"item?.id\" #mainContainer [simpoOverlay]=\"item?.styles?.background\"\r\n                        [simpoBorder]=\"item?.styles?.border\">\r\n                        <div class=\"row g-5 justify-content-start\" [id]=\"item?.id\"\r\n                            [simpoAnimation]=\"item?.styles?.animation\" [simpoLayout]=\"item?.styles?.layout\"\r\n                            [simpoPositionLayoutDirective]=\"item?.styles?.positionLayout\"\r\n                            [ngClass]=\"{ 'align-items-stretch': item?.styles?.positionLayout?.value === 'left' || item?.styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n                            <div class=\"col-10 col-sm-8 col-lg-6\"\r\n                                *ngIf=\"item?.content?.image?.showImage && !isBorderlessImage(item)\"\r\n                                [simpoContainerAlignment]=\"stylesLayout(item)\">\r\n                                <img loading=\"lazy\"  [src]=\"item?.content?.image?.url\" [simpoImageDirective]=\"item?.styles?.image\"\r\n                                    [id]=\"item?.id\" [simpoObjectPosition]=\"item?.content?.image?.position\"\r\n                                    [simpoCorner]=\"item?.styles?.corners\"\r\n                                    [class]=\"item?.id+(item?.content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n                                    style=\"object-fit: cover;\" [alt]=\"item?.content?.image?.altText\" width=\"700\"\r\n                                    height=\"500\" loading=\"lazy\" />\r\n                            </div>\r\n                            <div class=\"d-flex flex-column justify-content-start gap-15\"\r\n                                [ngClass]=\"{'col-lg-12': isBorderlessImage(item), 'col-lg-6': !isBorderlessImage(item)}\"\r\n                                [simpoContainerAlignment]=\"stylesLayout(item)\" [id]=\"item?.id\"\r\n                                [simpoContentAlignment]=\"item?.styles?.contentAlignment\">\r\n                                <div *ngFor=\"let text of item?.content?.inputText\">\r\n                                    <div [innerHTML]=\"text.value\" class=\"text-element\"\r\n                                        [ngClass]=\"text.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                                    </div>\r\n                                </div>\r\n                                <div *ngFor=\"let extraList of item?.content?.listItem?.data\" class=\"carder\">\r\n                                    <ng-container *ngFor=\"let listItem of extraList?.inputText\">\r\n                                        <div class=\"card_wrapper\" *ngIf=\"listItem.value != ''\">\r\n                                            <div class=\"container_card visible\">\r\n                                                <div class=\"card-section\">\r\n                                                    <div class=\"second-part-card\">\r\n\r\n                                                    </div>\r\n                                                    <div class=\"first-part-card\"\r\n                                                        [ngClass]=\"listItem.label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                                                        <img loading=\"lazy\"  class=\"tick-img\"\r\n                                                            src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/933997c1718790303127907598c1696063061900green_verified_image.png\"\r\n                                                            alt=\"something\"\r\n                                                            style=\"width: 5%;height: 5%;position:relative\" />\r\n\r\n                                                        {{ listItem.value }}\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n                                    </ng-container>\r\n                                </div>\r\n                                <div *ngIf=\"item?.action && item?.action?.display\"\r\n                                    class=\"button-display d-flex gap-3\"\r\n                                    [simpoContainerAlignment]=\"stylesLayout(item)\">\r\n                                    <div *ngFor=\"let button of item?.action?.buttons\">\r\n                                        <app-button-element [buttonContent]=\"button.content\"\r\n                                            [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n                                            [sectionId]=\"item?.id\"\r\n                                            [color]=\"item?.styles?.background?.accentColor\"></app-button-element>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <ng-template #ImageSection>\r\n                    <div class=\"col-10 col-sm-8 col-lg-6\"\r\n                        [ngStyle]=\"{'width': item?.styles?.positionLayout?.value === 'right' ? 'fit-content' : ''}\"\r\n                        style=\"padding: 0px !important;\" *ngIf=\"item?.content?.image?.showImage && isBorderlessImage;\"\r\n                        [simpoBorderless]=\"getPositionLayout(item)\">\r\n                        <img loading=\"lazy\"  [src]=\"item?.content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n                            [alt]=\"item?.content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n                    </div>\r\n                </ng-template>\r\n            </ng-container>\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</section> -->\r\n\r\n<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\r\n    [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage}\"\r\n    [attr.style]=\"customClass\">\r\n    <div class=\"flex relative fix-safari-flickering\">\r\n        <div class=\"flex break-word w-full items-center\">\r\n            <div id=\"carouselExampleControls\" class=\"carousel slide\" data-bs-ride=\"carousel\">\r\n                <!-- <ol class=\"carousel-indicators\">\r\n                    <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n                        data-bs-target=\"#carouselExampleInterval\" [attr.data-bs-slide-to]=\"i\"></li>\r\n                </ol> -->\r\n                <div class=\"carousel-inner\">\r\n                    <div *ngFor=\"let item of data?.content?.listItem?.data; let i = index\" class=\"carousel-item\"\r\n                        [ngClass]=\"{'active': i === currentIndex}\">\r\n                        <div [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"data?.styles?.positionLayout\"\r\n                            [ngClass]=\"{ 'align-items-stretch': data?.styles?.positionLayout?.value === 'left' || data?.styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n                            <div [id]=\"item?.id\"\r\n                                [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage}\"\r\n                                [simpoBackground]=\"item?.styles?.background\" style=\"height: 100%;\">\r\n                                <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n                                <div [simpoAnimation]=\"data?.styles?.animation\" [id]=\"data?.id\"\r\n                                    [simpoLayout]=\"data?.styles?.layout\">\r\n                                    <div class=\"px-4 py-5\"\r\n                                        [ngClass]=\"{'col-lg-6 col-xxl-6': isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage}\"\r\n                                        [id]=\"data?.id\" #mainContainer [simpoBorder]=\"item?.styles?.border\">\r\n                                        <div class=\"row g-5 justify-content-start\" [id]=\"data?.id\"\r\n                                            [simpoPositionLayoutDirective]=\"data?.styles?.positionLayout\"\r\n                                            [ngClass]=\"{ 'align-items-stretch': data?.styles?.positionLayout?.value === 'left' || data?.styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n                                            <div class=\"col-10 col-sm-8 col-lg-6\"\r\n                                                *ngIf=\"item?.image?.showImage && !isBorderlessImage\"\r\n                                                [simpoContainerAlignment]=\"stylesLayout\">\r\n                                                <img [src]=\"item?.image?.url\"\r\n                                                    [simpoImageDirective]=\"item?.styles?.image\" [id]=\"item?.id\"\r\n                                                    [simpoObjectPosition]=\"item?.image?.position\"\r\n                                                    [simpoCorner]=\"item?.styles?.corners\"\r\n                                                    [class]=\"item?.id+(item?.image?.id || '')\"\r\n                                                    class=\"d-block w-100 insideImg\" style=\"object-fit: cover;\"\r\n                                                    [alt]=\"item?.image?.altText\" width=\"700\" height=\"500\"\r\n                                                    loading=\"lazy\" />\r\n                                            </div>\r\n                                            <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n                                                [ngClass]=\"{'col-lg-12': isBorderlessImage, 'col-lg-6': !isBorderlessImage}\"\r\n                                                [simpoContainerAlignment]=\"stylesLayout\" [id]=\"item?.id\"\r\n                                                [simpoContentAlignment]=\"item?.styles?.contentAlignment\">\r\n                                                <div *ngFor=\"let ipText of item?.inputText; let j = index\">\r\n                                                    <!-- <div [innerHTML]=\"ipText.value | sanitizeHtml\" class=\"text-element\"\r\n                                                        [ngClass]=\"ipText.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                                                    </div> -->\r\n                                                    <simpo-text-editor [(value)]=\"ipText.value\"\r\n                                                        [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"j\" [itemIndex]=\"i\" [isRTE]=\"ipText.isRTE\"></simpo-text-editor>\r\n                                                </div>\r\n                                                <div *ngFor=\"let itemData of item?.additionalData; let k = index\" 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=\"second-part-card\">\r\n\r\n                                                                </div>\r\n                                                                <div class=\"first-part-card d-flex align-items-center\"\r\n                                                                    [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n                                                                    <img class=\"tick-img\"\r\n                                                                        src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/933997c1718790303127907598c1696063061900green_verified_image.png\"\r\n                                                                        alt=\"something\" style=\"width: 20px;\" />\r\n                                                                    <simpo-text-editor [(value)]=\"itemData.content\"\r\n                                                                        [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"k\" [itemIndex]=\"i\"></simpo-text-editor>\r\n                                                                    <!-- {{ itemData.content }} -->\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                                <div *ngIf=\"item?.action && item?.action?.display\"\r\n                                                    class=\"button-display\" [simpoContainerAlignment]=\"stylesLayout\">\r\n                                                    <div *ngFor=\"let button of item?.action?.buttons\">\r\n                                                        <app-button-element [buttonContent]=\"button.content\"\r\n                                                            [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n                                                            [sectionId]=\"item?.id\" [edit]=\"edit\"\r\n                                                            [color]=\"item?.styles?.background?.accentColor\"\r\n                                                            [backgroundInfo]=\"item?.styles?.background\"></app-button-element>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                                <ng-template #ImageSection>\r\n                                    <div class=\"col-10 col-sm-8 col-lg-6\"\r\n                                        [ngStyle]=\"{'width': styles?.positionLayout?.value === 'right' ? 'fit-content' : ''}\"\r\n                                        style=\"padding: 0px !important;\"\r\n                                        *ngIf=\"item?.image?.showImage && isBorderlessImage;\"\r\n                                        [simpoBorderless]=\"getPositionLayout\">\r\n                                        <img [src]=\"item?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n                                            [alt]=\"item?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n                                    </div>\r\n                                </ng-template>\r\n\r\n                                <!-- <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container> -->\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <ng-container *ngIf=\"styles?.devider?.display\">\r\n        <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n            [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\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>", styles: [".total-container{height:auto;position:relative}.carousel-indicators li{width:10px;height:10px;background-color:#332e2e;border-radius:50%}.carousel-indicators .active{width:20px;height:10px;background-color:#fff;margin:1px;border-radius:0}.carousel-inner{position:relative;width:100%}.overlay{position:absolute;top:0;left:0;height:100%;width:100%;opacity:0}.carousel-item{position:relative;width:100%;height:100%}.carousel-indicators{bottom:0!important}.carousel-indicators .circle{width:10px;height:10px;border-radius:50%;background-color:gray}.heading-large{margin-left:1%;margin-right:1%}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}li{list-style:none}.heading-large{margin-left:0%!important}@media (min-width: 860px){.md\\:flex-row{flex-direction:row}}@media (min-width: 860px){.md\\:w-max{width:max-content}}@media (min-width: 860px){.md\\:inline-flex{display:inline-flex}}.btn-container{display:flex;justify-content:center;width:auto}.btn{padding:1rem 1.5rem}.customclass{display:inline-flex;flex-direction:row;gap:1rem;width:100%;margin-top:2rem}@media (max-width: 800px){.customclass{flex-direction:column;align-items:center}.btn-container{width:100%}.btn{width:100%;padding:1rem}}.pb-20{padding-bottom:50px}.pt-20{padding-top:50px}.d-flex-important{display:flex!important}.button-display{display:flex;gap:10px}\n"] }]
        }], ctorParameters: () => [{ type: i1.EventsService }], propDecorators: { carouselElement1: [{
                type: ViewChild,
                args: ['carouselExampleInterval1']
            }], data: [{
                type: Input
            }], index: [{
                type: Input
            }], edit: [{
                type: Input
            }], delete: [{
                type: Input
            }], customClass: [{
                type: Input
            }], nextComponentColor: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 