import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, Input, Output, QueryList, Renderer2, } from '@angular/core';
import { CarouselItemComponent } from './carousel-item.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class CarouselComponent {
    constructor(el, renderer, cdr) {
        this.el = el;
        this.renderer = renderer;
        this.cdr = cdr;
        // 切换箭头的显示方式
        this.arrowTrigger = 'hover';
        // 是否自动播放
        this.autoplay = false;
        // 默认自动播放间隔时间
        this.autoplaySpeed = 3000;
        // 卡片切换动画速度，单位ms
        this.transitionSpeed = 500;
        // 卡片高度
        this.height = '100%';
        // 是否显示面板指示器
        this.showDots = true;
        // 面板指示器位置
        this.dotPosition = 'bottom';
        // 指示器触发滚动方式
        this.dotTrigger = 'click';
        // 当前激活面板索引，默认从0开始
        this.activeIndex = 0;
        // 卡片切换时，返回当前卡片索引，索引从0开始
        this.activeIndexChange = new EventEmitter();
        this.showArrow = false;
    }
    ngOnInit() {
        this.showArrow = this.arrowTrigger === 'always';
        this.itemContainer = this.el.nativeElement.querySelector('.devui-carousel-item-container');
    }
    ngOnChanges(changes) {
        const { arrowTrigger, activeIndex } = changes;
        if (arrowTrigger && !arrowTrigger.isFirstChange()) {
            this.showArrow = this.arrowTrigger === 'always';
        }
        if (activeIndex && activeIndex.currentValue !== this.currentIndex && !activeIndex.isFirstChange()) {
            this.translatePosition(this.activeIndex);
        }
        if (!this.autoplay || !this.autoplaySpeed) {
            this.clearScheduledTransition();
        }
        else {
            this.autoScheduleTransition();
        }
    }
    // 切换箭头监听事件，用于处理hover方式
    arrowMouseEvent(type) {
        if (this.arrowTrigger !== 'hover') {
            return;
        }
        if (type === 'enter') {
            this.showArrow = true;
        }
        else {
            this.showArrow = false;
        }
    }
    // 向前切换
    prev() {
        this.goTo(this.activeIndex - 1);
    }
    // 向后切换
    next() {
        this.goTo(this.activeIndex + 1);
    }
    // 指定跳转位置
    goTo(index) {
        if (index === this.activeIndex) {
            return;
        }
        this.renderer.setStyle(this.itemContainer, 'transition', `left ${this.transitionSpeed}ms ease`);
        if (index < 0 && this.activeIndex === 0) {
            // 第一个卡片向前切换
            this.activeIndex = this.itemCount - 1;
            const targetEl = this.el.nativeElement.querySelectorAll('d-carousel-item')[this.activeIndex];
            this.adjustPosition(targetEl, true);
            this.translatePosition(-1);
            this.adjustTransition(targetEl);
        }
        else if (index >= this.itemCount && this.activeIndex === this.itemCount - 1) {
            // 最后一个卡片向后切换
            this.activeIndex = 0;
            const targetEl = this.el.nativeElement.querySelectorAll('d-carousel-item')[this.activeIndex];
            this.adjustPosition(targetEl, false);
            this.translatePosition(this.itemCount);
            this.adjustTransition(targetEl);
        }
        else {
            this.activeIndex = index < 0 ? 0 : index > this.itemCount - 1 ? this.itemCount - 1 : index;
            this.translatePosition(this.activeIndex);
        }
        this.activeIndexChange.emit(this.activeIndex);
        this.currentIndex = this.activeIndex;
        this.cdr.detectChanges();
        this.autoScheduleTransition();
    }
    // 指示器触发切换函数
    switchStep(index, type) {
        if (type === this.dotTrigger) {
            this.goTo(index);
        }
    }
    // 调整首尾翻页后的动画
    adjustTransition(targetEl) {
        setTimeout(() => {
            this.renderer.removeStyle(this.itemContainer, 'transition');
            this.renderer.removeStyle(targetEl, 'transform');
            this.translatePosition(this.activeIndex);
        }, this.transitionSpeed);
    }
    // 调整首尾翻动时的位置
    adjustPosition(targetEl, firstToLast) {
        const wrapperRect = this.el.nativeElement.querySelector('.devui-carousel-item-wrapper').getBoundingClientRect();
        this.renderer.setStyle(targetEl, 'transform', `translateX(${(firstToLast ? -this.itemCount : this.itemCount) * wrapperRect.width}px)`);
    }
    // 翻页位移
    translatePosition(size) {
        this.renderer.setStyle(this.itemContainer, 'left', `${-size * 100}%`);
    }
    // 初始化container的宽度
    initCarouselWidth() {
        this.itemCount = this.items.length;
        this.renderer.setStyle(this.itemContainer, 'width', `${this.itemCount * 100}%`);
    }
    // 自动轮播调度任务
    autoScheduleTransition() {
        this.clearScheduledTransition();
        if (this.autoplay && this.autoplaySpeed) {
            this.scheduledId = setTimeout(() => {
                this.next();
            }, this.autoplaySpeed);
        }
    }
    // 清除自动轮播任务
    clearScheduledTransition() {
        if (this.scheduledId) {
            clearTimeout(this.scheduledId);
            this.scheduledId = null;
        }
    }
    ngAfterContentInit() {
        this.initCarouselWidth();
        this.translatePosition(this.activeIndex);
        this.renderer.setStyle(this.itemContainer, 'transition', `left ${this.transitionSpeed}ms ease`);
        // contentChildren 变化时，触发重新设置pane
        this.items.changes.subscribe((items) => {
            if (items.length !== this.itemCount) {
                this.activeIndex = 0;
                this.initCarouselWidth();
                this.translatePosition(this.activeIndex);
            }
        });
    }
    ngOnDestroy() {
        // 组件销毁时清理掉当前的定时任务
        this.clearScheduledTransition();
    }
}
CarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CarouselComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
CarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: CarouselComponent, selector: "d-carousel", inputs: { arrowTrigger: "arrowTrigger", autoplay: "autoplay", autoplaySpeed: "autoplaySpeed", transitionSpeed: "transitionSpeed", height: "height", showDots: "showDots", dotPosition: "dotPosition", dotTrigger: "dotTrigger", activeIndex: "activeIndex" }, outputs: { activeIndexChange: "activeIndexChange" }, queries: [{ propertyName: "items", predicate: CarouselItemComponent }], exportAs: ["dCarousel"], usesOnChanges: true, ngImport: i0, template: "<div\r\n  class=\"devui-carousel-container\"\r\n  [style.height]=\"height\"\r\n  (mouseenter)=\"arrowMouseEvent('enter')\"\r\n  (mouseleave)=\"arrowMouseEvent('leave')\"\r\n>\r\n  <!-- carousel arrow -->\r\n  <div class=\"devui-carousel-arrow\" *ngIf=\"arrowTrigger !== 'never' && showArrow\">\r\n    <button class=\"arrow-left\" (click)=\"prev()\">\r\n      <svg width=\"18px\" height=\"18px\" viewBox=\"0 0 16 16\" version=\"1.1\">\r\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n          <polygon\r\n            fill=\"#293040\"\r\n            fill-rule=\"nonzero\"\r\n            points=\"10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8\"\r\n          ></polygon>\r\n        </g>\r\n      </svg>\r\n    </button>\r\n    <button class=\"arrow-right\" (click)=\"next()\">\r\n      <svg width=\"18px\" height=\"18px\" viewBox=\"0 0 16 16\" version=\"1.1\">\r\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n          <polygon\r\n            fill=\"#293040\"\r\n            fill-rule=\"nonzero\"\r\n            transform=\"translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) \"\r\n            points=\"11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8\"\r\n          ></polygon>\r\n        </g>\r\n      </svg>\r\n    </button>\r\n  </div>\r\n  <!-- carousel items -->\r\n  <div class=\"devui-carousel-item-wrapper\">\r\n    <div class=\"devui-carousel-item-container\">\r\n      <ng-content select=\"d-carousel-item\"></ng-content>\r\n    </div>\r\n  </div>\r\n  <!-- carousel dots -->\r\n  <ul class=\"devui-carousel-dots {{ dotPosition }}\" *ngIf=\"items?.length > 1 && showDots\">\r\n    <li\r\n      class=\"dot-item\"\r\n      (click)=\"switchStep(index, 'click')\"\r\n      (mouseenter)=\"switchStep(index, 'hover')\"\r\n      [ngClass]=\"{ active: activeIndex === index }\"\r\n      *ngFor=\"let item of items; let index = index\"\r\n    >\r\n      <span class=\"dot-item-active-progress\" [ngStyle]=\"{ 'transition-duration': transitionSpeed + 'ms' }\"></span>\r\n    </li>\r\n  </ul>\r\n</div>\r\n", styles: [".devui-carousel-container{display:block;position:relative}.devui-carousel-container .devui-carousel-arrow{position:absolute;width:100%;top:50%}.devui-carousel-container .devui-carousel-arrow .arrow-left{position:absolute;top:-18px;z-index:2;cursor:pointer;width:36px;height:36px;border-radius:100%;background:rgba(255,255,255,.8);background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:0 8px 16px #252b3a1a;box-shadow:var(--devui-shadow-length-hover, 0 8px 16px 0) var(--devui-light-shadow, rgba(37, 43, 58, .1));display:inline-flex;align-items:center;justify-content:center;left:10px}.devui-carousel-container .devui-carousel-arrow .arrow-left:hover{background:#f5f5f5;background:var(--devui-area, #f5f5f5)}.devui-carousel-container .devui-carousel-arrow .arrow-left svg polygon{fill:#252b3a;fill:var(--devui-text, #252b3a)}.devui-carousel-container .devui-carousel-arrow .arrow-right{position:absolute;top:-18px;z-index:2;cursor:pointer;width:36px;height:36px;border-radius:100%;background:rgba(255,255,255,.8);background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:0 8px 16px #252b3a1a;box-shadow:var(--devui-shadow-length-hover, 0 8px 16px 0) var(--devui-light-shadow, rgba(37, 43, 58, .1));display:inline-flex;align-items:center;justify-content:center;right:10px}.devui-carousel-container .devui-carousel-arrow .arrow-right:hover{background:#f5f5f5;background:var(--devui-area, #f5f5f5)}.devui-carousel-container .devui-carousel-arrow .arrow-right svg polygon{fill:#252b3a;fill:var(--devui-text, #252b3a)}.devui-carousel-container .devui-carousel-item-wrapper{position:relative;overflow:hidden;height:100%}.devui-carousel-container .devui-carousel-item-wrapper .devui-carousel-item-container{display:flex;height:100%;position:relative}.devui-carousel-container .devui-carousel-item-wrapper .devui-carousel-item-container ::ng-deep d-carousel-item{flex:1;position:relative;height:100%}.devui-carousel-container .devui-carousel-dots{position:absolute;display:flex;justify-content:center;width:100%}.devui-carousel-container .devui-carousel-dots.bottom{bottom:8px}.devui-carousel-container .devui-carousel-dots.top{top:8px}.devui-carousel-container .devui-carousel-dots .dot-item{width:6px;height:6px;border-radius:4px;border-radius:var(--devui-border-radius-feedback, 4px);margin-right:8px;background:#71757f;background:var(--devui-icon-fill, #71757f);cursor:pointer}.devui-carousel-container .devui-carousel-dots .dot-item .dot-item-active-progress{width:0;display:inline-block;position:absolute}.devui-carousel-container .devui-carousel-dots .dot-item:hover{background:#252b3a;background:var(--devui-icon-fill-hover, #252b3a)}.devui-carousel-container .devui-carousel-dots .dot-item.active{width:24px;background-color:#71757f;background-color:var(--devui-icon-fill, #71757f);transition:all .1s cubic-bezier(.645,.045,.355,1);transition:all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-carousel-container .devui-carousel-dots .dot-item.active .dot-item-active-progress{width:24px;height:6px;background-color:#252b3a;background-color:var(--devui-icon-fill-active, #252b3a);border-radius:4px;border-radius:var(--devui-border-radius-feedback, 4px);transition-property:width;transition-timing-function:cubic-bezier(.16,.75,.5,1);transition-timing-function:var(--devui-animation-ease-out, cubic-bezier(.16, .75, .5, 1))}.devui-carousel-container .devui-carousel-arrow .arrow-left,.devui-carousel-container .devui-carousel-arrow .arrow-right{transition:background-color .3s cubic-bezier(.645,.045,.355,1);transition:background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: CarouselComponent, decorators: [{
            type: Component,
            args: [{ selector: 'd-carousel', exportAs: 'dCarousel', changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, template: "<div\r\n  class=\"devui-carousel-container\"\r\n  [style.height]=\"height\"\r\n  (mouseenter)=\"arrowMouseEvent('enter')\"\r\n  (mouseleave)=\"arrowMouseEvent('leave')\"\r\n>\r\n  <!-- carousel arrow -->\r\n  <div class=\"devui-carousel-arrow\" *ngIf=\"arrowTrigger !== 'never' && showArrow\">\r\n    <button class=\"arrow-left\" (click)=\"prev()\">\r\n      <svg width=\"18px\" height=\"18px\" viewBox=\"0 0 16 16\" version=\"1.1\">\r\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n          <polygon\r\n            fill=\"#293040\"\r\n            fill-rule=\"nonzero\"\r\n            points=\"10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8\"\r\n          ></polygon>\r\n        </g>\r\n      </svg>\r\n    </button>\r\n    <button class=\"arrow-right\" (click)=\"next()\">\r\n      <svg width=\"18px\" height=\"18px\" viewBox=\"0 0 16 16\" version=\"1.1\">\r\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n          <polygon\r\n            fill=\"#293040\"\r\n            fill-rule=\"nonzero\"\r\n            transform=\"translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) \"\r\n            points=\"11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8\"\r\n          ></polygon>\r\n        </g>\r\n      </svg>\r\n    </button>\r\n  </div>\r\n  <!-- carousel items -->\r\n  <div class=\"devui-carousel-item-wrapper\">\r\n    <div class=\"devui-carousel-item-container\">\r\n      <ng-content select=\"d-carousel-item\"></ng-content>\r\n    </div>\r\n  </div>\r\n  <!-- carousel dots -->\r\n  <ul class=\"devui-carousel-dots {{ dotPosition }}\" *ngIf=\"items?.length > 1 && showDots\">\r\n    <li\r\n      class=\"dot-item\"\r\n      (click)=\"switchStep(index, 'click')\"\r\n      (mouseenter)=\"switchStep(index, 'hover')\"\r\n      [ngClass]=\"{ active: activeIndex === index }\"\r\n      *ngFor=\"let item of items; let index = index\"\r\n    >\r\n      <span class=\"dot-item-active-progress\" [ngStyle]=\"{ 'transition-duration': transitionSpeed + 'ms' }\"></span>\r\n    </li>\r\n  </ul>\r\n</div>\r\n", styles: [".devui-carousel-container{display:block;position:relative}.devui-carousel-container .devui-carousel-arrow{position:absolute;width:100%;top:50%}.devui-carousel-container .devui-carousel-arrow .arrow-left{position:absolute;top:-18px;z-index:2;cursor:pointer;width:36px;height:36px;border-radius:100%;background:rgba(255,255,255,.8);background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:0 8px 16px #252b3a1a;box-shadow:var(--devui-shadow-length-hover, 0 8px 16px 0) var(--devui-light-shadow, rgba(37, 43, 58, .1));display:inline-flex;align-items:center;justify-content:center;left:10px}.devui-carousel-container .devui-carousel-arrow .arrow-left:hover{background:#f5f5f5;background:var(--devui-area, #f5f5f5)}.devui-carousel-container .devui-carousel-arrow .arrow-left svg polygon{fill:#252b3a;fill:var(--devui-text, #252b3a)}.devui-carousel-container .devui-carousel-arrow .arrow-right{position:absolute;top:-18px;z-index:2;cursor:pointer;width:36px;height:36px;border-radius:100%;background:rgba(255,255,255,.8);background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:0 8px 16px #252b3a1a;box-shadow:var(--devui-shadow-length-hover, 0 8px 16px 0) var(--devui-light-shadow, rgba(37, 43, 58, .1));display:inline-flex;align-items:center;justify-content:center;right:10px}.devui-carousel-container .devui-carousel-arrow .arrow-right:hover{background:#f5f5f5;background:var(--devui-area, #f5f5f5)}.devui-carousel-container .devui-carousel-arrow .arrow-right svg polygon{fill:#252b3a;fill:var(--devui-text, #252b3a)}.devui-carousel-container .devui-carousel-item-wrapper{position:relative;overflow:hidden;height:100%}.devui-carousel-container .devui-carousel-item-wrapper .devui-carousel-item-container{display:flex;height:100%;position:relative}.devui-carousel-container .devui-carousel-item-wrapper .devui-carousel-item-container ::ng-deep d-carousel-item{flex:1;position:relative;height:100%}.devui-carousel-container .devui-carousel-dots{position:absolute;display:flex;justify-content:center;width:100%}.devui-carousel-container .devui-carousel-dots.bottom{bottom:8px}.devui-carousel-container .devui-carousel-dots.top{top:8px}.devui-carousel-container .devui-carousel-dots .dot-item{width:6px;height:6px;border-radius:4px;border-radius:var(--devui-border-radius-feedback, 4px);margin-right:8px;background:#71757f;background:var(--devui-icon-fill, #71757f);cursor:pointer}.devui-carousel-container .devui-carousel-dots .dot-item .dot-item-active-progress{width:0;display:inline-block;position:absolute}.devui-carousel-container .devui-carousel-dots .dot-item:hover{background:#252b3a;background:var(--devui-icon-fill-hover, #252b3a)}.devui-carousel-container .devui-carousel-dots .dot-item.active{width:24px;background-color:#71757f;background-color:var(--devui-icon-fill, #71757f);transition:all .1s cubic-bezier(.645,.045,.355,1);transition:all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-carousel-container .devui-carousel-dots .dot-item.active .dot-item-active-progress{width:24px;height:6px;background-color:#252b3a;background-color:var(--devui-icon-fill-active, #252b3a);border-radius:4px;border-radius:var(--devui-border-radius-feedback, 4px);transition-property:width;transition-timing-function:cubic-bezier(.16,.75,.5,1);transition-timing-function:var(--devui-animation-ease-out, cubic-bezier(.16, .75, .5, 1))}.devui-carousel-container .devui-carousel-arrow .arrow-left,.devui-carousel-container .devui-carousel-arrow .arrow-right{transition:background-color .3s cubic-bezier(.645,.045,.355,1);transition:background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { arrowTrigger: [{
                type: Input
            }], autoplay: [{
                type: Input
            }], autoplaySpeed: [{
                type: Input
            }], transitionSpeed: [{
                type: Input
            }], height: [{
                type: Input
            }], showDots: [{
                type: Input
            }], dotPosition: [{
                type: Input
            }], dotTrigger: [{
                type: Input
            }], activeIndex: [{
                type: Input
            }], activeIndexChange: [{
                type: Output
            }], items: [{
                type: ContentChildren,
                args: [CarouselItemComponent]
            }] } });
//# sourceMappingURL=data:application/json;base64, 