import * as i0 from '@angular/core';
import { Component, ViewEncapsulation, HostBinding, Input, NgModule, EventEmitter, ContentChildren, ViewChild, Output } from '@angular/core';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { trigger, transition, animate, style } from '@angular/animations';
import * as i2 from '@angular/cdk/a11y';
import { FocusKeyManager } from '@angular/cdk/a11y';
import * as i1 from '@eui/core';

class UxCarouselItemComponent {
    get isActive() {
        return this._isActive;
    }
    set isActive(value) {
        this._isActive = coerceBooleanProperty(value);
    }
    constructor(host) {
        this.host = host;
        this.tabindex = '-1';
        this.e2eAttr = 'ux-carousel-item';
        this.id = 0;
        this._isActive = false;
    }
    focus() {
        this.host.nativeElement.focus();
    }
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UxCarouselItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UxCarouselItemComponent, selector: "ux-carousel-item", inputs: { styleClass: "styleClass", e2eAttr: "e2eAttr", id: "id", isActive: "isActive" }, host: { properties: { "attr.tabindex": "this.tabindex" } }, ngImport: i0, template: "<li *ngIf=\"isActive\" class=\"ux-carousel-item {{ styleClass }}\" attr.data-e2e=\"{{ e2eAttr }}\">\n    <ng-content></ng-content>\n</li>\n", styles: [".ux-carousel-items__content{align-items:center;display:flex;width:100%}.ux-carousel-items__list{margin:0;padding:0}.ux-carousel-items__arrow{cursor:pointer}.ux-carousel-items__arrow--inactive{cursor:not-allowed;color:var(--eui-base-color-grey-15)}.ux-carousel-items__arrow:hover:not(.ux-carousel-items__arrow--inactive){color:var(--eui-base-color-primary-100)}.ux-carousel-items__summary-indicators{align-items:center;display:flex;flex-wrap:wrap;justify-content:center}.ux-carousel-items__summary-indicators-item{color:var(--eui-base-color-grey-20);cursor:pointer;font-size:var(--eui-base-font-size-xl);margin:var(--eui-base-spacing-m) var(--eui-base-spacing-xs)}.ux-carousel-items .cdk-mouse-focused,.ux-carousel-items .cdk-keyboard-focused,.ux-carousel-items .cdk-program-focused{outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;-moz-outline-radius:var(--eui-base-border-radius);transition:outline .15s ease-in-out,border .15s ease-in-out}.ux-carousel-item{list-style:none}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UxCarouselItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ux-carousel-item', encapsulation: ViewEncapsulation.None, template: "<li *ngIf=\"isActive\" class=\"ux-carousel-item {{ styleClass }}\" attr.data-e2e=\"{{ e2eAttr }}\">\n    <ng-content></ng-content>\n</li>\n", styles: [".ux-carousel-items__content{align-items:center;display:flex;width:100%}.ux-carousel-items__list{margin:0;padding:0}.ux-carousel-items__arrow{cursor:pointer}.ux-carousel-items__arrow--inactive{cursor:not-allowed;color:var(--eui-base-color-grey-15)}.ux-carousel-items__arrow:hover:not(.ux-carousel-items__arrow--inactive){color:var(--eui-base-color-primary-100)}.ux-carousel-items__summary-indicators{align-items:center;display:flex;flex-wrap:wrap;justify-content:center}.ux-carousel-items__summary-indicators-item{color:var(--eui-base-color-grey-20);cursor:pointer;font-size:var(--eui-base-font-size-xl);margin:var(--eui-base-spacing-m) var(--eui-base-spacing-xs)}.ux-carousel-items .cdk-mouse-focused,.ux-carousel-items .cdk-keyboard-focused,.ux-carousel-items .cdk-program-focused{outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;-moz-outline-radius:var(--eui-base-border-radius);transition:outline .15s ease-in-out,border .15s ease-in-out}.ux-carousel-item{list-style:none}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { tabindex: [{
                type: HostBinding,
                args: ['attr.tabindex']
            }], styleClass: [{
                type: Input
            }], e2eAttr: [{
                type: Input
            }], id: [{
                type: Input
            }], isActive: [{
                type: Input
            }] } });
class UxCarouselItemComponentModule {
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UxCarouselItemComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: UxCarouselItemComponentModule, declarations: [UxCarouselItemComponent], imports: [CommonModule], exports: [UxCarouselItemComponent] }); }
    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UxCarouselItemComponentModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UxCarouselItemComponentModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [CommonModule],
                    exports: [UxCarouselItemComponent],
                    declarations: [UxCarouselItemComponent],
                }]
        }] });

// Custom eUI Slide in left & right animation (TODO: import from shared)
const euiSlideAnimation = () => trigger('slide', [
    transition('middle => right', [animate('500ms ease-out'), style({ transform: 'translateX(-100%)' })]),
    transition('middle => left', [animate('500ms ease-out'), style({ transform: 'translateX(100%)' })]),
]);
class UxCarouselItemsComponent {
    get isShowSummaryIndicators() {
        return this._isShowSummaryIndicators;
    }
    set isShowSummaryIndicators(value) {
        this._isShowSummaryIndicators = coerceBooleanProperty(value);
    }
    constructor(logService, focusMonitor, cdr, ngZone) {
        this.logService = logService;
        this.focusMonitor = focusMonitor;
        this.cdr = cdr;
        this.ngZone = ngZone;
        this.itemsArray = [];
        this.itemsLength = 0;
        this.currentItem = 0;
        this.animationStop = false;
        this.animationState = 'middle';
        this.itemSelect = new EventEmitter();
        this.e2eAttr = 'ux-carousel-items';
        this._isShowSummaryIndicators = true;
    }
    ngAfterContentInit() {
        this.focusMonitor.monitor(this.elRef, true).subscribe((origin) => this.ngZone.run(() => {
            // this.elRefOrigin = this.formatOrigin(origin);
            this.cdr.markForCheck();
        }));
        this.keyManager = new FocusKeyManager(this.items).withWrap();
        if (this.items.length > 0) {
            const activeItems = this.items.filter((item) => item.isActive);
            if (activeItems.length === 0) {
                this.selectItem(this.items.first);
            }
            else {
                this.currentItem = this.items['_results'].findIndex((element) => element.isActive);
                if (activeItems.length > 1) {
                    this.logService.error(`You provided ${activeItems.length} active items. You should provide only one active item!`);
                }
            }
            this.itemsArray = this.items.toArray();
            this.itemsLength = this.itemsArray.length;
        }
    }
    selectItem(item) {
        this.itemsArray.forEach((currentItem) => (currentItem.isActive = false));
        // Changing child already initialized normally produces ExpressionChangedAfterItHasBeenCheckedError
        // thus child change is made in microtask
        Promise.resolve().then(() => (item.isActive = true));
        this.keyManager.setNextItemActive();
        this.itemSelect.emit(item);
    }
    gotoItem(itemIndex) {
        if (this.currentItem <= itemIndex) {
            this.changeState('right');
        }
        else {
            this.changeState('left');
        }
        this.currentItem = itemIndex;
        this.selectItem(this.itemsArray[itemIndex]);
    }
    get isFirstItemActive() {
        return this.currentItem === 0;
    }
    get isLastItemActive() {
        return this.currentItem === this.itemsArray.length - 1;
    }
    goPrevious(event) {
        if (!this.isFirstItemActive) {
            this.changeState('left');
            this.currentItem--;
            this.selectItem(this.itemsArray[this.currentItem]);
            this.animationStop = false;
        }
        else {
            this.animationDone(event);
        }
    }
    goNext(event) {
        if (!this.isLastItemActive) {
            this.changeState('right');
            this.currentItem++;
            this.selectItem(this.itemsArray[this.currentItem]);
            this.animationStop = false;
        }
        else {
            this.animationDone(event);
        }
    }
    animationDone($event) {
        if ($event.fromState !== 'void') {
            this.changeState('middle');
        }
    }
    changeState(newState) {
        if (!this.animationStop) {
            this.animationState = newState;
        }
    }
    onKeyDown(event) {
        if (event.key === 'ArrowRight') {
            this.goNext(event);
        }
        else if (event.key === 'ArrowLeft') {
            this.goPrevious(event);
        }
        this.keyManager.onKeydown(event);
    }
    ngOnDestroy() {
        this.focusMonitor.stopMonitoring(this.elRef);
    }
    trackByFn(index, item) {
        return item.id;
    }
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UxCarouselItemsComponent, deps: [{ token: i1.LogService }, { token: i2.FocusMonitor }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UxCarouselItemsComponent, selector: "ux-carousel-items", inputs: { e2eAttr: "e2eAttr", isShowSummaryIndicators: "isShowSummaryIndicators" }, outputs: { itemSelect: "itemSelect" }, queries: [{ propertyName: "items", predicate: UxCarouselItemComponent, descendants: true }], viewQueries: [{ propertyName: "elRef", first: true, predicate: ["elRef"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"ux-carousel-items\" (keyup)=\"onKeyDown($event)\" role=\"application\" attr.data-e2e=\"{{ e2eAttr }}\">\n    <div class=\"ux-carousel-items__content\">\n        <span\n            class=\"eui-icon eui-icon-caret-left eui-icon-3x ux-carousel-items__arrow\"\n            [class.ux-carousel-items__arrow--inactive]=\"isFirstItemActive\"\n            (click)=\"goPrevious($event)\">\n        </span>\n        <div class=\"col\" [@slide]=\"animationState\" (@slide.done)=\"animationDone($event)\">\n            <ul class=\"ux-carousel-items__list\" aria-live=\"polite\" #elRef tabindex=\"0\">\n                <ng-content></ng-content>\n            </ul>\n        </div>\n        <span\n            class=\"eui-icon eui-icon-caret-right eui-icon-3x ux-carousel-items__arrow\"\n            [class.ux-carousel-items__arrow--inactive]=\"isLastItemActive\"\n            (click)=\"goNext($event)\">\n        </span>\n    </div>\n    <div *ngIf=\"isShowSummaryIndicators\" class=\"ux-carousel-items__summary-indicators\">\n        <span\n            *ngFor=\"let item of itemsArray; let i = index; trackBy: trackByFn\"\n            class=\"eui-icon ux-carousel-items__summary-indicators-item\"\n            (click)=\"gotoItem(i)\"\n            [ngClass]=\"i === currentItem ? 'eui-icon-circle eui-u-color-primary' : 'eui-icon-circle-thin eui-u-color-grey-light'\">\n        </span>\n    </div>\n</div>\n", styles: [".ux-carousel-items__content{align-items:center;display:flex;width:100%}.ux-carousel-items__list{margin:0;padding:0}.ux-carousel-items__arrow{cursor:pointer}.ux-carousel-items__arrow--inactive{cursor:not-allowed;color:var(--eui-base-color-grey-15)}.ux-carousel-items__arrow:hover:not(.ux-carousel-items__arrow--inactive){color:var(--eui-base-color-primary-100)}.ux-carousel-items__summary-indicators{align-items:center;display:flex;flex-wrap:wrap;justify-content:center}.ux-carousel-items__summary-indicators-item{color:var(--eui-base-color-grey-20);cursor:pointer;font-size:var(--eui-base-font-size-xl);margin:var(--eui-base-spacing-m) var(--eui-base-spacing-xs)}.ux-carousel-items .cdk-mouse-focused,.ux-carousel-items .cdk-keyboard-focused,.ux-carousel-items .cdk-program-focused{outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;-moz-outline-radius:var(--eui-base-border-radius);transition:outline .15s ease-in-out,border .15s ease-in-out}.ux-carousel-item{list-style:none}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [euiSlideAnimation()], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UxCarouselItemsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ux-carousel-items', animations: [euiSlideAnimation()], encapsulation: ViewEncapsulation.None, template: "<div class=\"ux-carousel-items\" (keyup)=\"onKeyDown($event)\" role=\"application\" attr.data-e2e=\"{{ e2eAttr }}\">\n    <div class=\"ux-carousel-items__content\">\n        <span\n            class=\"eui-icon eui-icon-caret-left eui-icon-3x ux-carousel-items__arrow\"\n            [class.ux-carousel-items__arrow--inactive]=\"isFirstItemActive\"\n            (click)=\"goPrevious($event)\">\n        </span>\n        <div class=\"col\" [@slide]=\"animationState\" (@slide.done)=\"animationDone($event)\">\n            <ul class=\"ux-carousel-items__list\" aria-live=\"polite\" #elRef tabindex=\"0\">\n                <ng-content></ng-content>\n            </ul>\n        </div>\n        <span\n            class=\"eui-icon eui-icon-caret-right eui-icon-3x ux-carousel-items__arrow\"\n            [class.ux-carousel-items__arrow--inactive]=\"isLastItemActive\"\n            (click)=\"goNext($event)\">\n        </span>\n    </div>\n    <div *ngIf=\"isShowSummaryIndicators\" class=\"ux-carousel-items__summary-indicators\">\n        <span\n            *ngFor=\"let item of itemsArray; let i = index; trackBy: trackByFn\"\n            class=\"eui-icon ux-carousel-items__summary-indicators-item\"\n            (click)=\"gotoItem(i)\"\n            [ngClass]=\"i === currentItem ? 'eui-icon-circle eui-u-color-primary' : 'eui-icon-circle-thin eui-u-color-grey-light'\">\n        </span>\n    </div>\n</div>\n", styles: [".ux-carousel-items__content{align-items:center;display:flex;width:100%}.ux-carousel-items__list{margin:0;padding:0}.ux-carousel-items__arrow{cursor:pointer}.ux-carousel-items__arrow--inactive{cursor:not-allowed;color:var(--eui-base-color-grey-15)}.ux-carousel-items__arrow:hover:not(.ux-carousel-items__arrow--inactive){color:var(--eui-base-color-primary-100)}.ux-carousel-items__summary-indicators{align-items:center;display:flex;flex-wrap:wrap;justify-content:center}.ux-carousel-items__summary-indicators-item{color:var(--eui-base-color-grey-20);cursor:pointer;font-size:var(--eui-base-font-size-xl);margin:var(--eui-base-spacing-m) var(--eui-base-spacing-xs)}.ux-carousel-items .cdk-mouse-focused,.ux-carousel-items .cdk-keyboard-focused,.ux-carousel-items .cdk-program-focused{outline:2px solid var(--eui-base-color-accessible-focus);outline-offset:-2px;-moz-outline-radius:var(--eui-base-border-radius);transition:outline .15s ease-in-out,border .15s ease-in-out}.ux-carousel-item{list-style:none}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.LogService }, { type: i2.FocusMonitor }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { items: [{
                type: ContentChildren,
                args: [UxCarouselItemComponent, { descendants: true }]
            }], elRef: [{
                type: ViewChild,
                args: ['elRef', { static: true }]
            }], itemSelect: [{
                type: Output
            }], e2eAttr: [{
                type: Input
            }], isShowSummaryIndicators: [{
                type: Input
            }] } });
class UxCarouselItemsComponentModule {
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UxCarouselItemsComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: UxCarouselItemsComponentModule, declarations: [UxCarouselItemsComponent], imports: [CommonModule, UxCarouselItemComponentModule], exports: [UxCarouselItemsComponent] }); }
    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UxCarouselItemsComponentModule, imports: [CommonModule, UxCarouselItemComponentModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UxCarouselItemsComponentModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [CommonModule, UxCarouselItemComponentModule],
                    exports: [UxCarouselItemsComponent],
                    declarations: [UxCarouselItemsComponent],
                }]
        }] });

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

export { UxCarouselItemComponent, UxCarouselItemComponentModule, UxCarouselItemsComponent, UxCarouselItemsComponentModule };
//# sourceMappingURL=eui-deprecated-ux-carousel-item.mjs.map
