import { CommonModule } from '@angular/common';
import { Component, Input, ViewChild, } from '@angular/core';
import Swiper from 'swiper';
import { Autoplay, EffectCoverflow, EffectCube, EffectFade, EffectFlip, Navigation, Pagination } from 'swiper/modules';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
/**
 * val-swipe-carousel
 *
 * A powerful carousel component built on Swiper with multiple transition effects,
 * navigation, pagination, and responsive breakpoints.
 *
 * @example
 * <val-swipe-carousel
 *   [items]="slides"
 *   [itemTemplate]="slideTemplate"
 *   [props]="{ effect: 'coverflow', pagination: true }"
 * ></val-swipe-carousel>
 *
 * <ng-template #slideTemplate let-item>
 *   <div class="slide-content">{{ item.title }}</div>
 * </ng-template>
 *
 * @input items - Array of items to render as slides
 * @input itemTemplate - Template reference for rendering each slide
 * @input props - Configuration options (effect, pagination, navigation, etc.)
 */
export class SwipeCarouselComponent {
    constructor() {
        /**
         * Array of items to render as slides.
         */
        this.items = [];
        this.defaultOptions = {
            slidesPerView: 1,
            spaceBetween: 10,
            loop: true,
            centeredSlides: true,
            effect: 'slide',
            pagination: true,
            navigation: true,
            scaleEffect: true,
            breakpoints: {
                768: {
                    slidesPerView: 1.5,
                    spaceBetween: 40,
                },
                1024: {
                    slidesPerView: 1.7,
                    spaceBetween: 50,
                },
            },
        };
    }
    ngOnChanges(changes) {
        if (changes['items'] || changes['props']) {
            this.destroySwiper();
            if (this.items && this.items.length > 0 && this.swiperContainer) {
                setTimeout(() => this.initSwiper(), 0);
            }
        }
    }
    ngAfterViewInit() {
        if (this.items && this.items.length > 0) {
            this.initSwiper();
        }
    }
    ngOnDestroy() {
        this.destroySwiper();
    }
    initSwiper() {
        const options = { ...this.defaultOptions, ...this.props };
        const swiperConfig = {
            modules: [Navigation, Pagination, EffectFade, EffectCube, EffectCoverflow, EffectFlip, Autoplay],
            slidesPerView: options.slidesPerView,
            spaceBetween: options.spaceBetween,
            loop: options.loop,
            centeredSlides: options.centeredSlides,
            effect: options.effect,
            autoplay: options.autoplay,
            breakpoints: options.breakpoints,
            pagination: options.pagination !== false
                ? {
                    el: '.swiper-pagination',
                    clickable: true,
                }
                : false,
            navigation: options.navigation !== false
                ? {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                }
                : false,
        };
        // Effect-specific configurations
        if (options.effect === 'coverflow') {
            swiperConfig.coverflowEffect = {
                rotate: 50,
                stretch: 0,
                depth: 100,
                modifier: 1,
                slideShadows: false,
            };
        }
        if (options.effect === 'cube') {
            swiperConfig.cubeEffect = {
                shadow: true,
                slideShadows: true,
                shadowOffset: 20,
                shadowScale: 0.94,
            };
        }
        this.swiper = new Swiper(this.swiperContainer.nativeElement, swiperConfig);
    }
    destroySwiper() {
        if (this.swiper) {
            this.swiper.destroy(true, true);
            this.swiper = undefined;
        }
    }
    // Public API for external control
    /**
     * Navigate to previous slide.
     */
    slidePrev() {
        this.swiper?.slidePrev();
    }
    /**
     * Navigate to next slide.
     */
    slideNext() {
        this.swiper?.slideNext();
    }
    /**
     * Navigate to specific slide by index.
     */
    slideTo(index) {
        this.swiper?.slideTo(index);
    }
    /**
     * Get the Swiper instance for advanced control.
     */
    getSwiperInstance() {
        return this.swiper;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SwipeCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SwipeCarouselComponent, isStandalone: true, selector: "val-swipe-carousel", inputs: { items: "items", itemTemplate: "itemTemplate", props: "props" }, viewQueries: [{ propertyName: "swiperContainer", first: true, predicate: ["swiperContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
    <div
      class="carousel-wrapper"
      [class.scale-effect]="props?.scaleEffect !== false"
      [class.no-padding]="!props?.navigation"
      [style.padding]="props?.wrapperPadding"
    >
      <div class="swiper-container" #swiperContainer>
        <div class="swiper-wrapper">
          @for (item of items; track $index) {
            <div class="swiper-slide">
              <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item, index: $index }"></ng-container>
            </div>
          }
        </div>

        <div *ngIf="props?.pagination !== false" class="swiper-pagination"></div>
      </div>

      <div *ngIf="props?.navigation !== false" class="swiper-button-prev"></div>
      <div *ngIf="props?.navigation !== false" class="swiper-button-next"></div>
    </div>
  `, isInline: true, styles: ["@charset \"UTF-8\";.swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translateZ(0);z-index:10}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:50%;background:var(--ion-color-medium, #999);opacity:.7;margin:0 4px;cursor:pointer;transition:all .3s ease}.swiper-pagination-bullet-active{opacity:1;background:var(--ion-color-primary, #3880ff);width:10px;height:10px}.carousel-wrapper{position:relative;width:100%;padding:0 50px}.carousel-wrapper.no-padding{padding:0}.carousel-wrapper .swiper-container{width:100%;overflow:visible}.carousel-wrapper .swiper-wrapper{padding-bottom:32px}.carousel-wrapper .swiper-slide{display:flex;justify-content:center;align-items:center;padding:2px 0}.carousel-wrapper.scale-effect .swiper-slide{transform:scale(.85);opacity:.7;transition:transform .3s ease,opacity .3s ease}.carousel-wrapper.scale-effect .swiper-slide.swiper-slide-active{transform:scale(1);opacity:1}.carousel-wrapper .swiper-pagination{bottom:0!important;left:50%;transform:translate(-50%);width:auto}.carousel-wrapper .swiper-button-prev,.carousel-wrapper .swiper-button-next{position:absolute;top:calc(50% - 16px);transform:translateY(-50%);width:45px;height:45px;background-color:var(--ion-background-color, #ffffff);border-radius:50%;box-shadow:0 4px 10px #00000026;display:flex;justify-content:center;align-items:center;cursor:pointer;z-index:10;transition:box-shadow .2s ease,transform .2s ease;border:none;outline:none}.carousel-wrapper .swiper-button-prev:hover,.carousel-wrapper .swiper-button-next:hover{box-shadow:0 6px 14px #0003;transform:translateY(-50%) scale(1.05)}.carousel-wrapper .swiper-button-prev:after,.carousel-wrapper .swiper-button-next:after{font-size:1.5rem;color:var(--ion-color-primary, #3880ff);font-weight:700}.carousel-wrapper .swiper-button-prev{left:0}.carousel-wrapper .swiper-button-prev:after{content:\"\\2039\"}.carousel-wrapper .swiper-button-next{right:0}.carousel-wrapper .swiper-button-next:after{content:\"\\203a\"}.carousel-wrapper .swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SwipeCarouselComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-swipe-carousel', standalone: true, imports: [CommonModule], template: `
    <div
      class="carousel-wrapper"
      [class.scale-effect]="props?.scaleEffect !== false"
      [class.no-padding]="!props?.navigation"
      [style.padding]="props?.wrapperPadding"
    >
      <div class="swiper-container" #swiperContainer>
        <div class="swiper-wrapper">
          @for (item of items; track $index) {
            <div class="swiper-slide">
              <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item, index: $index }"></ng-container>
            </div>
          }
        </div>

        <div *ngIf="props?.pagination !== false" class="swiper-pagination"></div>
      </div>

      <div *ngIf="props?.navigation !== false" class="swiper-button-prev"></div>
      <div *ngIf="props?.navigation !== false" class="swiper-button-next"></div>
    </div>
  `, styles: ["@charset \"UTF-8\";.swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translateZ(0);z-index:10}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:50%;background:var(--ion-color-medium, #999);opacity:.7;margin:0 4px;cursor:pointer;transition:all .3s ease}.swiper-pagination-bullet-active{opacity:1;background:var(--ion-color-primary, #3880ff);width:10px;height:10px}.carousel-wrapper{position:relative;width:100%;padding:0 50px}.carousel-wrapper.no-padding{padding:0}.carousel-wrapper .swiper-container{width:100%;overflow:visible}.carousel-wrapper .swiper-wrapper{padding-bottom:32px}.carousel-wrapper .swiper-slide{display:flex;justify-content:center;align-items:center;padding:2px 0}.carousel-wrapper.scale-effect .swiper-slide{transform:scale(.85);opacity:.7;transition:transform .3s ease,opacity .3s ease}.carousel-wrapper.scale-effect .swiper-slide.swiper-slide-active{transform:scale(1);opacity:1}.carousel-wrapper .swiper-pagination{bottom:0!important;left:50%;transform:translate(-50%);width:auto}.carousel-wrapper .swiper-button-prev,.carousel-wrapper .swiper-button-next{position:absolute;top:calc(50% - 16px);transform:translateY(-50%);width:45px;height:45px;background-color:var(--ion-background-color, #ffffff);border-radius:50%;box-shadow:0 4px 10px #00000026;display:flex;justify-content:center;align-items:center;cursor:pointer;z-index:10;transition:box-shadow .2s ease,transform .2s ease;border:none;outline:none}.carousel-wrapper .swiper-button-prev:hover,.carousel-wrapper .swiper-button-next:hover{box-shadow:0 6px 14px #0003;transform:translateY(-50%) scale(1.05)}.carousel-wrapper .swiper-button-prev:after,.carousel-wrapper .swiper-button-next:after{font-size:1.5rem;color:var(--ion-color-primary, #3880ff);font-weight:700}.carousel-wrapper .swiper-button-prev{left:0}.carousel-wrapper .swiper-button-prev:after{content:\"\\2039\"}.carousel-wrapper .swiper-button-next{right:0}.carousel-wrapper .swiper-button-next:after{content:\"\\203a\"}.carousel-wrapper .swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}\n"] }]
        }], propDecorators: { items: [{
                type: Input
            }], itemTemplate: [{
                type: Input
            }], props: [{
                type: Input
            }], swiperContainer: [{
                type: ViewChild,
                args: ['swiperContainer']
            }] } });
//# sourceMappingURL=data:application/json;base64, 