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 { BorderDirective } from '../../directive/border-directive';
import { HoverDirective } from '../../directive/hover-element-directive';
import { OverlayDirective } from '../../directive/overlay-directive';
import BaseSection from '../BaseSection';
import { SimpoContainerAligment } from '../../directive/container-alignment.directive';
import { SimpoBlurContentDirective } from '../../directive/blur-content.directive';
import { TextEditorComponent } from '../../elements/text-editor/text-editor.component';
import { ImageEditorDirective } from '../../directive/image-editor.directive';
import { SpacingHorizontalDirective } from '../../directive/spacing-horizontal.directive';
import { SpacingAroundDirective } from '../../directive/spacing-around.directive';
import { ObjectPositionDirective } from './../../directive/image-position.directive';
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 BannerCarouselComponent extends BaseSection {
    constructor(_eventService) {
        super();
        this._eventService = _eventService;
        this._mainContainer = null;
        this.currentIndex = 0;
        this.isEditorOpen = false;
    }
    ngOnInit() {
        this.deleteSelected = this.delete;
        this.content = this.data?.content;
        this.styles = this.data?.styles;
        this.editorSubscription = this._eventService.toggleEditorEvent.subscribe((isEditorOpen) => {
            this.isEditorOpen = isEditorOpen;
            if (isEditorOpen) {
                this.controlAutoSlide(false);
            }
            else {
                this.controlAutoSlide(true);
            }
        });
    }
    ngAfterViewInit() {
        setTimeout(() => {
            this.initializeCarousel();
            if (!this.isEditorOpen) {
                this.controlAutoSlide(true);
            }
        }, 200);
    }
    ngOnDestroy() {
        if (this.editorSubscription) {
            this.editorSubscription.unsubscribe();
        }
        if (this.carouselInstance) {
            this.carouselInstance.pause();
            this.carouselInstance.dispose();
        }
    }
    initializeCarousel() {
        if (!this.carouselElement || typeof bootstrap === 'undefined')
            return;
        const carouselNative = this.carouselElement.nativeElement;
        this.carouselInstance = bootstrap.Carousel.getOrCreateInstance(carouselNative, {
            interval: 3000,
            ride: 'carousel',
            pause: false,
            wrap: true,
            touch: true
        });
    }
    controlAutoSlide(shouldStart) {
        setTimeout(() => {
            if (!this.carouselElement || typeof bootstrap === 'undefined')
                return;
            const carouselNative = this.carouselElement.nativeElement;
            if (!this.carouselInstance) {
                this.carouselInstance = bootstrap.Carousel.getOrCreateInstance(carouselNative, {
                    interval: 3000,
                    ride: 'carousel',
                    pause: false,
                    wrap: true,
                    touch: true
                });
            }
            if (shouldStart) {
                this.carouselInstance.pause();
                this.carouselInstance.cycle();
            }
            else {
                this.carouselInstance.pause();
            }
        }, 150);
    }
    selectSlide(index) {
        this.currentIndex = index;
        if (this.carouselInstance) {
            this.carouselInstance.to(index);
        }
    }
    get stylesLayout() {
        return { ...this.styles?.layout };
    }
    get getBlurValue() {
        return this.styles?.background?.blur;
    }
    get getBackgroundColor() {
        return { ...this.styles?.background };
    }
    get getBackgroundOpacity() {
        if (this.styles?.background?.overlay) {
            return this.opacityValue(this.styles.background?.overlay);
        }
        return '0';
    }
    opacityValue(value) {
        switch (value) {
            case 'VERY_STRONG':
                return '0.5';
            case 'STRONG':
                return '0.6';
            case 'MODERATE':
                return '0.7';
            case 'LIGHT':
                return '0.8';
            default:
                return '1';
        }
    }
    editSection() {
        if (window.innerWidth <= 475)
            return;
        this.controlAutoSlide(false);
        this._eventService.toggleEditorEvent.emit(true);
        setTimeout(() => {
            this._eventService.editSection.emit({ data: this.data });
        }, 100);
    }
    getScreenSize() {
        return window.innerWidth;
    }
    getSectionMinHeight() {
        const fit = this.styles?.layout?.fit;
        const isMobile = this.getScreenSize() <= 475;
        if (fit === 'screen')
            return isMobile ? '100vh' : 'calc(75vh + 134px)';
        if (fit === 'content')
            return isMobile ? '560px' : '420px';
        return isMobile ? '560px' : '420px';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BannerCarouselComponent, deps: [{ token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BannerCarouselComponent, isStandalone: true, selector: "simpo-banner-carousel", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "carouselElement", first: true, predicate: ["carouselElement"], descendants: true }, { propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div class=\"banner-carousel-shell flex relative fix-safari-flickering\" [ngStyle]=\"{\r\n      'min-height': getSectionMinHeight(),\r\n       'padding-top': '0px',\r\n       'padding-bottom': '0px'\r\n     }\" [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\">\r\n    <div class=\"flex break-word w-full items-center overflow-hidden banner-carousel-content\" [id]=\"data?.id\">\r\n\r\n      <div #carouselElement id=\"carouselExampleInterval\" class=\"carousel slide banner-carousel\" data-bs-ride=\"carousel\"\r\n        data-bs-pause=\"false\">\r\n\r\n        <ol class=\"carousel-indicators\" *ngIf=\"(content?.listItem?.data?.length || 0) > 1\">\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\">\r\n          </li>\r\n        </ol>\r\n\r\n        <div class=\"carousel-inner banner-carousel-inner\">\r\n          <div *ngFor=\"let item of content?.listItem?.data; let i = index\" class=\"carousel-item banner-carousel-item\"\r\n            [ngClass]=\"{'active': i === currentIndex}\">\r\n            <img loading=\"lazy\" [src]=\"item.image.url\" [simpoBlurContent]=\"getBlurValue\" [id]=\"data?.id\"\r\n              [simpoObjectPosition]=\"item?.image?.position\" class=\"imgclass banner-carousel-image\"\r\n              [alt]=\"item?.image?.altText || 'Carousel image'\" [appImageEditor]=\"edit || false\"\r\n              [class]=\"data?.id+item.image.id\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [itemIndex]=\"i\"\r\n              *ngIf=\"item?.image?.url\" />\r\n          </div>\r\n\r\n          <div class=\"col-xxl-8 mx-auto relative opacity-100 position-relative text-wrapper\" text-content-layer\r\n            style=\"z-index: 1;\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n            [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"styles?.layout\">\r\n\r\n            <div class=\"row g-5 justify-content-start content-side text-container\" [id]=\"data?.id\"\r\n              [simpoAnimation]=\"styles?.animation\"\r\n              [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n              <div class=\"col-lg-6 w-full max-w-2xl items-start d-flex flex-column \"\r\n                [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\">\r\n                <div *ngFor=\"let item of content?.inputText; let i = index\">\r\n                  <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n                    <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"item.isRTE\"></simpo-text-editor>\r\n                  </div>\r\n                </div>\r\n\r\n                <div *ngIf=\"data?.action && data?.action?.display\" class=\"customclass w-full mb-3\" [ngClass]=\"[\r\n                                                styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n                                                styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n                                                styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n                                            ]\">\r\n                  <div *ngFor=\"let button of data?.action?.buttons\" class=\"btn-container \">\r\n                    <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                      [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n                      [color]=\"data?.styles?.background?.accentColor\"\r\n                      [backgroundInfo]=\"data?.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\r\n        <a class=\"carousel-control-prev\" data-bs-target=\"#carouselExampleInterval\" role=\"button\" data-bs-slide=\"prev\"\r\n          *ngIf=\"(content?.listItem?.data?.length || 0) > 1\">\r\n          <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n          <span class=\"sr-only\">Previous</span>\r\n        </a>\r\n\r\n        <a class=\"carousel-control-next\" data-bs-target=\"#carouselExampleInterval\" role=\"button\" data-bs-slide=\"next\"\r\n          *ngIf=\"(content?.listItem?.data?.length || 0) > 1\">\r\n          <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n          <span class=\"sr-only\">Next</span>\r\n        </a>\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\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\" (click)=\"editSection()\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n\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;width:100%}.banner-carousel-shell{width:100%;position:relative;overflow:hidden}.banner-carousel-content{width:100%}.banner-carousel{width:100%;position:relative}.carousel-inner,.banner-carousel-inner{position:relative;width:100%;height:100%}.carousel-item,.banner-carousel-item{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;transition:transform .9s cubic-bezier(.16,1,.3,1)!important;overflow:hidden}.carousel-item.active,.banner-carousel-item.active{position:absolute;inset:0;pointer-events:auto;z-index:1}.banner-carousel-image,.carousel-item img{position:absolute;top:0;left:0;width:100%;height:100%!important;min-height:100%;min-width:100%;object-fit:cover;z-index:0;transition:object-position .25s ease}.overlay{position:absolute;inset:0;width:100%;height:100%;opacity:0;z-index:1}.text-content-layer{position:relative!important;z-index:2!important;display:flex;align-items:center;justify-content:center;min-height:inherit;width:100%;pointer-events:auto}.carousel-indicators li{width:10px;height:10px;background-color:#332e2e80;border-radius:50%;display:inline-block;margin:0 5px;border:none;transition:background-color .3s ease}.carousel-control-next,.carousel-control-prev{width:5%!important}.carousel-indicators .active{width:10px;height:10px;background-color:#fff;border-radius:50%}.carousel-indicators{bottom:0!important;z-index:3}.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}}@media screen and (max-width: 475px){.banner-carousel-shell,.banner-carousel,.carousel-inner,.banner-carousel-inner{min-height:560px!important;height:auto!important}.carousel-item,.banner-carousel-item,.carousel-item.active,.banner-carousel-item.active{min-height:560px!important;height:100%!important}.banner-carousel-image,.carousel-item img{width:100%!important;height:100%!important;min-height:560px!important;object-fit:cover!important}.carousel-indicators{margin-bottom:unset!important}.text-content-layer{position:relative!important;inset:unset;min-height:560px!important;padding-top:24px;padding-bottom:24px}.text-wrapper{width:100%!important;padding-left:18px;padding-right:18px}.text-container{width:100%!important;margin:0!important}}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}.text-wrapper{width:88vw!important}.text-container{width:86vw!important;padding-top:2rem}\n"], dependencies: [{ kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { 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.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: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: SimpoBlurContentDirective, selector: "[simpoBlurContent]", inputs: ["simpoBlurContent"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData", "itemIndex"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BannerCarouselComponent, decorators: [{
            type: Component,
            args: [{ selector: 'simpo-banner-carousel', standalone: true, imports: [
                        ObjectPositionDirective,
                        SimpoElementsModule,
                        CommonModule,
                        SimpoComponentModule,
                        MatGridListModule,
                        SimpoButtonComponent,
                        AnimationDirective,
                        BackgroundDirective,
                        ContentFitDirective,
                        BorderDirective,
                        HoverDirective,
                        OverlayDirective,
                        SimpoContainerAligment,
                        SimpoBlurContentDirective,
                        TextEditorComponent,
                        ImageEditorDirective,
                        SpacingHorizontalDirective,
                        SpacingAroundDirective
                    ], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div class=\"banner-carousel-shell flex relative fix-safari-flickering\" [ngStyle]=\"{\r\n      'min-height': getSectionMinHeight(),\r\n       'padding-top': '0px',\r\n       'padding-bottom': '0px'\r\n     }\" [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\">\r\n    <div class=\"flex break-word w-full items-center overflow-hidden banner-carousel-content\" [id]=\"data?.id\">\r\n\r\n      <div #carouselElement id=\"carouselExampleInterval\" class=\"carousel slide banner-carousel\" data-bs-ride=\"carousel\"\r\n        data-bs-pause=\"false\">\r\n\r\n        <ol class=\"carousel-indicators\" *ngIf=\"(content?.listItem?.data?.length || 0) > 1\">\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\">\r\n          </li>\r\n        </ol>\r\n\r\n        <div class=\"carousel-inner banner-carousel-inner\">\r\n          <div *ngFor=\"let item of content?.listItem?.data; let i = index\" class=\"carousel-item banner-carousel-item\"\r\n            [ngClass]=\"{'active': i === currentIndex}\">\r\n            <img loading=\"lazy\" [src]=\"item.image.url\" [simpoBlurContent]=\"getBlurValue\" [id]=\"data?.id\"\r\n              [simpoObjectPosition]=\"item?.image?.position\" class=\"imgclass banner-carousel-image\"\r\n              [alt]=\"item?.image?.altText || 'Carousel image'\" [appImageEditor]=\"edit || false\"\r\n              [class]=\"data?.id+item.image.id\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [itemIndex]=\"i\"\r\n              *ngIf=\"item?.image?.url\" />\r\n          </div>\r\n\r\n          <div class=\"col-xxl-8 mx-auto relative opacity-100 position-relative text-wrapper\" text-content-layer\r\n            style=\"z-index: 1;\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n            [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"styles?.layout\">\r\n\r\n            <div class=\"row g-5 justify-content-start content-side text-container\" [id]=\"data?.id\"\r\n              [simpoAnimation]=\"styles?.animation\"\r\n              [ngClass]=\"{'align-items-stretch':styles?.layout?.align==='left' || styles?.layout?.align==='center' || styles?.layout?.align==='right'}\">\r\n              <div class=\"col-lg-6 w-full max-w-2xl items-start d-flex flex-column \"\r\n                [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\">\r\n                <div *ngFor=\"let item of content?.inputText; let i = index\">\r\n                  <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n                    <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"item.isRTE\"></simpo-text-editor>\r\n                  </div>\r\n                </div>\r\n\r\n                <div *ngIf=\"data?.action && data?.action?.display\" class=\"customclass w-full mb-3\" [ngClass]=\"[\r\n                                                styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n                                                styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n                                                styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n                                            ]\">\r\n                  <div *ngFor=\"let button of data?.action?.buttons\" class=\"btn-container \">\r\n                    <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                      [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n                      [color]=\"data?.styles?.background?.accentColor\"\r\n                      [backgroundInfo]=\"data?.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\r\n        <a class=\"carousel-control-prev\" data-bs-target=\"#carouselExampleInterval\" role=\"button\" data-bs-slide=\"prev\"\r\n          *ngIf=\"(content?.listItem?.data?.length || 0) > 1\">\r\n          <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n          <span class=\"sr-only\">Previous</span>\r\n        </a>\r\n\r\n        <a class=\"carousel-control-next\" data-bs-target=\"#carouselExampleInterval\" role=\"button\" data-bs-slide=\"next\"\r\n          *ngIf=\"(content?.listItem?.data?.length || 0) > 1\">\r\n          <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n          <span class=\"sr-only\">Next</span>\r\n        </a>\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\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\" (click)=\"editSection()\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n\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;width:100%}.banner-carousel-shell{width:100%;position:relative;overflow:hidden}.banner-carousel-content{width:100%}.banner-carousel{width:100%;position:relative}.carousel-inner,.banner-carousel-inner{position:relative;width:100%;height:100%}.carousel-item,.banner-carousel-item{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;transition:transform .9s cubic-bezier(.16,1,.3,1)!important;overflow:hidden}.carousel-item.active,.banner-carousel-item.active{position:absolute;inset:0;pointer-events:auto;z-index:1}.banner-carousel-image,.carousel-item img{position:absolute;top:0;left:0;width:100%;height:100%!important;min-height:100%;min-width:100%;object-fit:cover;z-index:0;transition:object-position .25s ease}.overlay{position:absolute;inset:0;width:100%;height:100%;opacity:0;z-index:1}.text-content-layer{position:relative!important;z-index:2!important;display:flex;align-items:center;justify-content:center;min-height:inherit;width:100%;pointer-events:auto}.carousel-indicators li{width:10px;height:10px;background-color:#332e2e80;border-radius:50%;display:inline-block;margin:0 5px;border:none;transition:background-color .3s ease}.carousel-control-next,.carousel-control-prev{width:5%!important}.carousel-indicators .active{width:10px;height:10px;background-color:#fff;border-radius:50%}.carousel-indicators{bottom:0!important;z-index:3}.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}}@media screen and (max-width: 475px){.banner-carousel-shell,.banner-carousel,.carousel-inner,.banner-carousel-inner{min-height:560px!important;height:auto!important}.carousel-item,.banner-carousel-item,.carousel-item.active,.banner-carousel-item.active{min-height:560px!important;height:100%!important}.banner-carousel-image,.carousel-item img{width:100%!important;height:100%!important;min-height:560px!important;object-fit:cover!important}.carousel-indicators{margin-bottom:unset!important}.text-content-layer{position:relative!important;inset:unset;min-height:560px!important;padding-top:24px;padding-bottom:24px}.text-wrapper{width:100%!important;padding-left:18px;padding-right:18px}.text-container{width:100%!important;margin:0!important}}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}.text-wrapper{width:88vw!important}.text-container{width:86vw!important;padding-top:2rem}\n"] }]
        }], ctorParameters: () => [{ type: i1.EventsService }], propDecorators: { data: [{
                type: Input
            }], index: [{
                type: Input
            }], edit: [{
                type: Input
            }], delete: [{
                type: Input
            }], customClass: [{
                type: Input
            }], nextComponentColor: [{
                type: Input
            }], carouselElement: [{
                type: ViewChild,
                args: ['carouselElement']
            }], _mainContainer: [{
                type: ViewChild,
                args: ['mainContainer']
            }] } });
//# sourceMappingURL=data:application/json;base64, 