@3kles/kles-ng-carousel/fesm2022/3kles-kles-ng-carousel.mjs

@3kles/kles-ng-carousel is a angular library to create carousel.

import * as i0 from '@angular/core';
import { Component, Input, NgModule } from '@angular/core';
import { animation, style, animate, keyframes, trigger, transition, useAnimation } from '@angular/animations';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

// =========================
// Enum for referencing animations
// =========================
var AnimationType;
(function (AnimationType) {
    AnimationType["Scale"] = "scale";
    AnimationType["Fade"] = "fade";
    AnimationType["Flip"] = "flip";
    AnimationType["JackInTheBox"] = "jackInTheBox";
})(AnimationType || (AnimationType = {}));
// =========================
// Scale
// =========================
const scaleIn = animation([
    style({ opacity: 0, transform: 'scale(0.5)' }), // start state
    animate('{{time}} cubic-bezier(0.785, 0.135, 0.15, 0.86)', style({ opacity: 1, transform: 'scale(1)' }))
]);
const scaleOut = animation([
    animate('{{time}} cubic-bezier(0.785, 0.135, 0.15, 0.86)', style({ opacity: 0, transform: 'scale(0.5)' }))
]);
// =========================
// Fade
// =========================
const fadeIn = animation([
    style({ opacity: 0 }), // start state
    animate('{{time}} cubic-bezier(0.785, 0.135, 0.15, 0.86)', style({ opacity: 1 }))
]);
const fadeOut = animation([
    animate('{{time}} cubic-bezier(0.785, 0.135, 0.15, 0.86)', style({ opacity: 0 }))
]);
// =========================
// Flip
// =========================
const flipIn = animation([
    animate('{{time}} cubic-bezier(0.785, 0.135, 0.15, 0.86)', keyframes([
        style({
            opacity: 1,
            transform: 'perspective(400px) rotate3d(1, 0, 0, 90deg)',
            offset: 0
        }), // start state
        style({ transform: 'perspective(400px)', offset: 1 })
    ]))
]);
const flipOut = animation([
// just hide it
]);
// =========================
// Jack in the box
// =========================
const jackIn = animation([
    animate('{{time}} ease-in', keyframes([
        style({
            animationFillMode: 'forwards',
            transform: 'scale(0.1) rotate(30deg)',
            transformOrigin: 'center bottom',
            offset: 0
        }),
        style({
            transform: 'rotate(-10deg)',
            offset: 0.5
        }),
        style({
            transform: 'rotate(3deg)',
            offset: 0.7
        }),
        style({
            transform: 'perspective(400px)',
            offset: 1
        })
    ]))
]);
const jackOut = animation([
// just hide it
]);

var IndicatorsPosition;
(function (IndicatorsPosition) {
    IndicatorsPosition["Below"] = "below";
    IndicatorsPosition["On"] = "on";
})(IndicatorsPosition || (IndicatorsPosition = {}));

class KlesCarouselComponent {
    constructor() {
        this.animationType = AnimationType.Fade;
        this.indicatorsPosition = IndicatorsPosition.On;
        this.indicatorsPositionEnum = IndicatorsPosition;
        this.currentSlide = 0;
    }
    onPreviousClick() {
        const previous = this.currentSlide - 1;
        this.currentSlide = previous < 0 ? this.slides.length - 1 : previous;
    }
    onNextClick() {
        const next = this.currentSlide + 1;
        this.currentSlide = next === this.slides.length ? 0 : next;
    }
    onClickIndicator(index) {
        console.log('ici', index);
        const next = index;
        this.currentSlide = next === this.slides.length ? 0 : next;
    }
    ngOnInit() {
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KlesCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: KlesCarouselComponent, selector: "kles-carousel", inputs: { slides: "slides", animationType: "animationType", indicatorsPosition: "indicatorsPosition" }, ngImport: i0, template: "<!-- carousel -->\n<div class=\"carousel\" [ngClass]=\"indicatorsPosition === indicatorsPositionEnum.Below ? 'carousel-indicators' : ''\">\n  @for (slide of slides; track slide.src) {\n    @if ($index === currentSlide) {\n      <img [src]=\"slide.src\" class=\"slide\" [@slideAnimation]=\"animationType\"/>\n    }\n  }\n\n  <!-- controls -->\n  <button class=\"control prev\" (click)=\"onPreviousClick()\">\n    <span class=\"arrow left\"></span>\n  </button>\n  <button class=\"control next\" (click)=\"onNextClick()\">\n    <span class=\"arrow right\"></span>\n  </button>\n\n  @if (indicatorsPosition === indicatorsPositionEnum.On) {\n    <ul class=\"indicators inside\">\n      @for (slide of slides; track slide.src) {\n        <li [ngClass]=\"{'active': currentSlide === $index }\" (click)=\"onClickIndicator($index)\"></li>\n      }\n    </ul>\n  }\n</div>\n\n@if (indicatorsPosition === indicatorsPositionEnum.Below) {\n  <ul class=\"indicators\">\n    @for (slide of slides; track slide.src) {\n      <li [ngClass]=\"{'active': currentSlide === $index }\" (click)=\"onClickIndicator($index)\"></li>\n    }\n  </ul>\n}", styles: [":host{flex:1;height:100%}.carousel{position:relative;min-height:200px;height:100%;width:inherit;overflow:hidden;border-radius:.5em}.carousel-indicators{height:calc(100% - 32px)}.slide{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;transition:transform .15s cubic-bezier(.25,.46,.45,.84);border-radius:.5em}.slide:hover{transform:scale(1.1)}.control{border:none;background-color:transparent;outline:0;position:absolute;cursor:pointer;display:flex;flex-direction:column;justify-content:center;padding:.5em;color:#fff;font-weight:700;font-size:3em;-webkit-user-select:none;user-select:none;height:100%;opacity:80%;transition:opacity .15s cubic-bezier(.25,.46,.45,.84)}.control:hover,.control:focus{opacity:1}.control.next{right:0}.control.prev{left:0}.arrow{display:block;border-left:.1em solid rgba(0,0,0,.24);border-bottom:.1em solid rgba(0,0,0,.24);width:.5em;height:.5em}.arrow.left{transform:rotate(45deg)}.arrow.right{transform:rotate(225deg)}.indicators{list-style:none;justify-content:center;padding-left:0;margin-right:15%;margin-left:15%;right:0;left:0;display:flex}.inside{position:absolute;bottom:10px}.indicators li{position:relative;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;width:25px;height:4px;margin-right:3px;margin-left:3px;text-indent:-999px;background-color:#b9b9b94d;-webkit-box-shadow:0px 0px 3px 0px rgba(0,0,0,.65);-moz-box-shadow:0px 0px 3px 0px rgba(0,0,0,.65);box-shadow:0 0 3px #000000a6;cursor:pointer}.indicators .active{background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
            trigger('slideAnimation', [
                /* scale */
                transition('void => scale', [
                    useAnimation(scaleIn, { params: { time: '500ms' } })
                ]),
                transition('scale => void', [
                    useAnimation(scaleOut, { params: { time: '500ms' } })
                ]),
                /* fade */
                transition('void => fade', [
                    useAnimation(fadeIn, { params: { time: '500ms' } })
                ]),
                transition('fade => void', [
                    useAnimation(fadeOut, { params: { time: '500ms' } })
                ]),
                /* flip */
                transition('void => flip', [
                    useAnimation(flipIn, { params: { time: '500ms' } })
                ]),
                transition('flip => void', [
                    useAnimation(flipOut, { params: { time: '500ms' } })
                ]),
                /* JackInTheBox */
                transition('void => jackInTheBox', [
                    useAnimation(jackIn, { params: { time: '700ms' } })
                ]),
                transition('jackInTheBox => void', [
                    useAnimation(jackOut, { params: { time: '700ms' } })
                ])
            ])
        ] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KlesCarouselComponent, decorators: [{
            type: Component,
            args: [{ selector: 'kles-carousel', animations: [
                        trigger('slideAnimation', [
                            /* scale */
                            transition('void => scale', [
                                useAnimation(scaleIn, { params: { time: '500ms' } })
                            ]),
                            transition('scale => void', [
                                useAnimation(scaleOut, { params: { time: '500ms' } })
                            ]),
                            /* fade */
                            transition('void => fade', [
                                useAnimation(fadeIn, { params: { time: '500ms' } })
                            ]),
                            transition('fade => void', [
                                useAnimation(fadeOut, { params: { time: '500ms' } })
                            ]),
                            /* flip */
                            transition('void => flip', [
                                useAnimation(flipIn, { params: { time: '500ms' } })
                            ]),
                            transition('flip => void', [
                                useAnimation(flipOut, { params: { time: '500ms' } })
                            ]),
                            /* JackInTheBox */
                            transition('void => jackInTheBox', [
                                useAnimation(jackIn, { params: { time: '700ms' } })
                            ]),
                            transition('jackInTheBox => void', [
                                useAnimation(jackOut, { params: { time: '700ms' } })
                            ])
                        ])
                    ], template: "<!-- carousel -->\n<div class=\"carousel\" [ngClass]=\"indicatorsPosition === indicatorsPositionEnum.Below ? 'carousel-indicators' : ''\">\n  @for (slide of slides; track slide.src) {\n    @if ($index === currentSlide) {\n      <img [src]=\"slide.src\" class=\"slide\" [@slideAnimation]=\"animationType\"/>\n    }\n  }\n\n  <!-- controls -->\n  <button class=\"control prev\" (click)=\"onPreviousClick()\">\n    <span class=\"arrow left\"></span>\n  </button>\n  <button class=\"control next\" (click)=\"onNextClick()\">\n    <span class=\"arrow right\"></span>\n  </button>\n\n  @if (indicatorsPosition === indicatorsPositionEnum.On) {\n    <ul class=\"indicators inside\">\n      @for (slide of slides; track slide.src) {\n        <li [ngClass]=\"{'active': currentSlide === $index }\" (click)=\"onClickIndicator($index)\"></li>\n      }\n    </ul>\n  }\n</div>\n\n@if (indicatorsPosition === indicatorsPositionEnum.Below) {\n  <ul class=\"indicators\">\n    @for (slide of slides; track slide.src) {\n      <li [ngClass]=\"{'active': currentSlide === $index }\" (click)=\"onClickIndicator($index)\"></li>\n    }\n  </ul>\n}", styles: [":host{flex:1;height:100%}.carousel{position:relative;min-height:200px;height:100%;width:inherit;overflow:hidden;border-radius:.5em}.carousel-indicators{height:calc(100% - 32px)}.slide{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;transition:transform .15s cubic-bezier(.25,.46,.45,.84);border-radius:.5em}.slide:hover{transform:scale(1.1)}.control{border:none;background-color:transparent;outline:0;position:absolute;cursor:pointer;display:flex;flex-direction:column;justify-content:center;padding:.5em;color:#fff;font-weight:700;font-size:3em;-webkit-user-select:none;user-select:none;height:100%;opacity:80%;transition:opacity .15s cubic-bezier(.25,.46,.45,.84)}.control:hover,.control:focus{opacity:1}.control.next{right:0}.control.prev{left:0}.arrow{display:block;border-left:.1em solid rgba(0,0,0,.24);border-bottom:.1em solid rgba(0,0,0,.24);width:.5em;height:.5em}.arrow.left{transform:rotate(45deg)}.arrow.right{transform:rotate(225deg)}.indicators{list-style:none;justify-content:center;padding-left:0;margin-right:15%;margin-left:15%;right:0;left:0;display:flex}.inside{position:absolute;bottom:10px}.indicators li{position:relative;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;width:25px;height:4px;margin-right:3px;margin-left:3px;text-indent:-999px;background-color:#b9b9b94d;-webkit-box-shadow:0px 0px 3px 0px rgba(0,0,0,.65);-moz-box-shadow:0px 0px 3px 0px rgba(0,0,0,.65);box-shadow:0 0 3px #000000a6;cursor:pointer}.indicators .active{background-color:#fff}\n"] }]
        }], ctorParameters: () => [], propDecorators: { slides: [{
                type: Input
            }], animationType: [{
                type: Input
            }], indicatorsPosition: [{
                type: Input
            }] } });

const components = [KlesCarouselComponent];
class KlesCarouselModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KlesCarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: KlesCarouselModule, declarations: [KlesCarouselComponent], imports: [CommonModule, FormsModule], exports: [KlesCarouselComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KlesCarouselModule, imports: [CommonModule, FormsModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KlesCarouselModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        components
                    ],
                    imports: [CommonModule, FormsModule],
                    exports: [
                        components,
                    ]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { AnimationType, IndicatorsPosition, KlesCarouselComponent, KlesCarouselModule, fadeIn, fadeOut, flipIn, flipOut, jackIn, jackOut, scaleIn, scaleOut };
//# sourceMappingURL=3kles-kles-ng-carousel.mjs.map