import * as i0 from '@angular/core';
import { Input, HostBinding, Directive, signal, ViewEncapsulation, ChangeDetectionStrategy, Component, EventEmitter, inject, DestroyRef, DOCUMENT, Inject, Injectable, computed, effect, HostListener, ViewChild, ContentChildren, Output, NgModule } from '@angular/core';
import { BusyIndicatorComponent } from '@fundamental-ngx/core/busy-indicator';
import { LEFT_ARROW, RIGHT_ARROW, UP_ARROW, DOWN_ARROW } from '@angular/cdk/keycodes';
import { NgTemplateOutlet, NgClass } from '@angular/common';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { RtlService, KeyUtil, resizeObservable } from '@fundamental-ngx/cdk/utils';
import { ButtonComponent } from '@fundamental-ngx/core/button';
import { FdTranslatePipe } from '@fundamental-ngx/i18n';
import { merge, fromEvent } from 'rxjs';
import { take, debounceTime } from 'rxjs/operators';

let carouselItemCounter$1 = 0;
class CarouselItemDirective {
    /** @hidden */
    constructor(_elementRef) {
        this._elementRef = _elementRef;
        /** Carousel Id, it has some default value if not set,  */
        this.id = 'carousel-item-id-' + carouselItemCounter$1++;
    }
    /** Native element  */
    get element() {
        return this._elementRef.nativeElement;
    }
    /** Width of element */
    getWidth() {
        return this.element.getBoundingClientRect().width || this.initialWidth;
    }
    /** Height of element */
    getHeight() {
        return this.element.getBoundingClientRect().height || this.initialHeight;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CarouselItemDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: CarouselItemDirective, isStandalone: true, selector: "[fd-carousel-item], [fdCarouselItem]", inputs: { value: "value", initialHeight: "initialHeight", initialWidth: "initialWidth", id: "id" }, host: { properties: { "attr.id": "this.id" } }, exportAs: ["fdCarouselItem"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CarouselItemDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fd-carousel-item], [fdCarouselItem]',
                    exportAs: 'fdCarouselItem',
                    standalone: true
                }]
        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { value: [{
                type: Input
            }], initialHeight: [{
                type: Input
            }], initialWidth: [{
                type: Input
            }], id: [{
                type: Input
            }, {
                type: HostBinding,
                args: ['attr.id']
            }] } });

let carouselItemCounter = 0;
class CarouselItemComponent {
    /** @hidden */
    set visibility(visibility) {
        this._visibility = visibility;
    }
    get visibility() {
        return this._visibility;
    }
    /** @hidden */
    constructor(_elementRef) {
        this._elementRef = _elementRef;
        /** Id of the Carousel items. */
        this.id = `fd-carousel-item-${carouselItemCounter++}`;
        /**
         * Loading indicator when item is not yet loaded
         */
        this.loading = false;
        /** Sets tooltip for carousel item */
        this.title = null;
        /** @hidden Hide/show slide, useful for managing tab order */
        this._visibility = 'visible';
        /** @hidden value for aria-setsize attribute */
        this.ariaSetsize = signal(0, ...(ngDevMode ? [{ debugName: "ariaSetsize" }] : []));
        /** @hidden value for aria-posinset attribute */
        this.ariaPosinset = signal(0, ...(ngDevMode ? [{ debugName: "ariaPosinset" }] : []));
        /** @hidden value for aria-selected attribute */
        this.ariaSelected = signal(false, ...(ngDevMode ? [{ debugName: "ariaSelected" }] : []));
        /** @hidden value for aria-hidden attribute */
        this.ariaHidden = signal(false, ...(ngDevMode ? [{ debugName: "ariaHidden" }] : []));
    }
    /** Native element  */
    get element() {
        return this._elementRef.nativeElement;
    }
    /** Width of element */
    getWidth() {
        return this.element.getBoundingClientRect().width || this.initialWidth;
    }
    /** Height of element */
    getHeight() {
        return this.element.getBoundingClientRect().height || this.initialHeight;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CarouselItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: CarouselItemComponent, isStandalone: true, selector: "fd-carousel-item", inputs: { id: "id", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaDescribedBy: "ariaDescribedBy", loading: "loading", title: "title", initialHeight: "initialHeight", initialWidth: "initialWidth", value: "value" }, host: { attributes: { "role": "option" }, properties: { "attr.aria-setsize": "ariaSetsize()", "attr.aria-posinset": "ariaPosinset()", "attr.aria-selected": "ariaSelected()", "attr.aria-hidden": "ariaHidden()", "attr.id": "this.id", "attr.aria-label": "this.ariaLabel", "attr.aria-labelledby": "this.ariaLabelledBy", "attr.aria-describedby": "this.ariaDescribedBy", "attr.title": "this.title", "style.visibility": "this._visibility" }, classAttribute: "fd-carousel__item fd-carousel__item--active" }, ngImport: i0, template: "<fd-busy-indicator [loading]=\"loading\" [style.max-width.%]=\"100\">\n    <ng-content></ng-content>\n</fd-busy-indicator>\n", styles: [".fd-carousel__slides{min-width:initial!important}.fd-carousel__item--active{display:flex;max-width:100%}\n"], dependencies: [{ kind: "component", type: BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "ariaValueText", "title", "label", "ariaLive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CarouselItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fd-carousel-item', host: {
                        role: 'option',
                        class: 'fd-carousel__item fd-carousel__item--active',
                        '[attr.aria-setsize]': 'ariaSetsize()',
                        '[attr.aria-posinset]': 'ariaPosinset()',
                        '[attr.aria-selected]': 'ariaSelected()',
                        '[attr.aria-hidden]': 'ariaHidden()'
                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [BusyIndicatorComponent], template: "<fd-busy-indicator [loading]=\"loading\" [style.max-width.%]=\"100\">\n    <ng-content></ng-content>\n</fd-busy-indicator>\n", styles: [".fd-carousel__slides{min-width:initial!important}.fd-carousel__item--active{display:flex;max-width:100%}\n"] }]
        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { id: [{
                type: Input
            }, {
                type: HostBinding,
                args: ['attr.id']
            }], ariaLabel: [{
                type: Input
            }, {
                type: HostBinding,
                args: ['attr.aria-label']
            }], ariaLabelledBy: [{
                type: Input
            }, {
                type: HostBinding,
                args: ['attr.aria-labelledby']
            }], ariaDescribedBy: [{
                type: Input
            }, {
                type: HostBinding,
                args: ['attr.aria-describedby']
            }], loading: [{
                type: Input
            }], title: [{
                type: Input
            }, {
                type: HostBinding,
                args: ['attr.title']
            }], initialHeight: [{
                type: Input
            }], initialWidth: [{
                type: Input
            }], value: [{
                type: Input
            }], _visibility: [{
                type: HostBinding,
                args: ['style.visibility']
            }] } });

const DEFAULT_TRANSITION_DURATION = '150ms';
/** @dynamic */
class CarouselService {
    /** Current transition value in px */
    set currentTransitionPx(currentTransitionPx) {
        this._currentTransitionPx = currentTransitionPx;
    }
    get currentTransitionPx() {
        return this._currentTransitionPx;
    }
    /** @hidden */
    get elementsAtOnce() {
        const num = this.config?.elementsAtOnce ?? 1;
        return Math.max(1, num);
    }
    /** @hidden */
    constructor(_document) {
        this._document = _document;
        /** Event thrown when element is dragged. Emits "true" when drag starts and "false" when drag ends. */
        this.dragStateChange$ = new EventEmitter();
        /** Event thrown, when active element is changed */
        this.activeChange$ = new EventEmitter();
        /** Set to true for rtl mode */
        this.isRtl = false;
        /** @hidden */
        this._lastDistance = 0;
        /** @hidden */
        this._currentTransitionPx = 0;
        /** @hidden */
        this._initialDragPosition = 0;
        /** @hidden */
        this._lastDragPosition = 0;
        /** @hidden */
        this._listenToMouseMove = false;
        /** @hidden */
        this._dragStarted = false;
        /**
         * @hidden
         */
        this._destroyRef = inject(DestroyRef);
    }
    /** @hidden */
    ngOnDestroy() {
        this.activeChange$.complete();
        this.dragStateChange$.complete();
    }
    /** set initial values for the service */
    initialise(config, items, listElementReference) {
        this.config = config;
        this.setElement(listElementReference);
        this.setItems(items);
        if (this.config.gestureSupport) {
            this._setupGestures();
        }
    }
    /** update config value for the service */
    updateConfig(config) {
        this.config = config;
    }
    /** set element ref */
    setElement(elementRef) {
        this._element = elementRef.nativeElement;
    }
    /** set items and assign active item, if not already there */
    setItems(items) {
        this.items = items;
        if (!this.active) {
            this.active = this.items.first;
        }
    }
    /** Change active element */
    goToItem(item, smooth) {
        let index = this._getIndexOfItem(item);
        if (this.config.infinite) {
            this._centerActive(index);
            index = this._getIndexOfItem(item);
        }
        this._transitionToIndex(index, smooth);
    }
    /** pick next element and set it active */
    pickNext() {
        if (!this.active) {
            this.active = this.items.first;
        }
        const activeItemIndex = this._getIndexOfItem(this.active);
        const itemToActivate = this.items.get(activeItemIndex + 1) ?? this.items.first;
        this.goToItem(itemToActivate, true);
        this.active = itemToActivate;
    }
    /** pick previous element and set it active */
    pickPrevious() {
        if (!this.active) {
            this.active = this.items.get(2);
        }
        const activeItemIndex = this._getIndexOfItem(this.active);
        let itemToActivate = this.items.get(activeItemIndex - 1);
        // case where slides can move infinitely in one direction
        // handle case where on-load activeItemIndex = 0 and activeItemIndex - 1 returns undefined item from item array.
        if (!itemToActivate) {
            itemToActivate = this.items.last;
        }
        this.goToItem(itemToActivate, true);
        this.active = itemToActivate;
    }
    /** @hidden */
    _centerActive(index) {
        const size = this._getSize(this.items.first);
        if (isNaN(size)) {
            return;
        }
        const middleIndex = Math.ceil(this.items.length / 2);
        const offset = Math.ceil(this.elementsAtOnce / 2);
        const missingItems = index + offset - middleIndex;
        const array = this.items.toArray();
        if (missingItems > 0) {
            for (let i = 0; i < missingItems; i++) {
                const item = array.shift();
                item && array.push(item);
            }
        }
        else {
            for (let i = 0; i < Math.abs(missingItems); i++) {
                const item = array.pop();
                item && array.unshift(item);
            }
        }
        /** Changing order of elements in QueryList and Native HTML */
        this.items.reset(array);
        this.items.forEach((item) => item.element.parentNode?.appendChild(item.element));
        /**
         * For proper animation it's needed to transform elements,
         * by changing transition by amount of elements placed at top/bottom
         */
        this._element.style.transitionDuration = '0s';
        this._transitionCarousel(this._currentTransitionPx + this._getSize(this.items.first) * missingItems);
    }
    /** @hidden */
    _transitionToIndex(index, smooth) {
        let transitionPx = this._getSize(this.items.first) * index;
        this._element.style.transitionDuration = smooth ? this._getTransition() : '0s';
        if (!this.isRtl || (this.config.vertical && this.isRtl)) {
            transitionPx = -transitionPx;
        }
        this._transitionCarousel(transitionPx);
    }
    /** @hidden Get closes element, based on current transition */
    _getClosest() {
        /** If transition is positive, it should go to first element */
        if (!this.config.infinite &&
            ((!this.config.vertical &&
                ((!this.isRtl && this._currentTransitionPx > 0) || (this.isRtl && this._currentTransitionPx < 0))) ||
                (this.config.vertical && this._currentTransitionPx > 0))) {
            return this.items.first;
        }
        const size = this._getSize(this.items.first);
        /** When scroll is after half of element, then ext one should be active */
        const halfApproached = Math.abs(this._currentTransitionPx % size) > size / 2;
        /**
         * Index based on transition px divided by size of elements,
         * every element should have same width, otherwise it should be looped through all elements,
         * which is not good for performance
         */
        let index = Math.ceil(Math.abs(this._currentTransitionPx / size));
        // When elementsAtOnce > 1, swiping should stop at last index - elementsAtOnce
        const elementsAtOnce = this.elementsAtOnce;
        if (!this.config.infinite && elementsAtOnce > 1) {
            // When there're less items in the carousel than the area might display, it should stop to first
            if (this.items.length < elementsAtOnce) {
                return this.items.first;
            }
            if (index + elementsAtOnce >= this.items.length) {
                return this.items.get(this.items.length - elementsAtOnce) ?? this.items.first;
            }
        }
        index = index + (halfApproached ? 0 : -1);
        const item = this.items.get(index);
        /** Checking if transition went out of scope of array */
        return item || this.items.last;
    }
    /** @hidden */
    _getIndexOfItem(item) {
        if (!item) {
            return -1;
        }
        return this.items.toArray().findIndex((_item) => _item === item);
    }
    /** @hidden Getting size of carousel, width for horizontal, height for vertical */
    _getSize(item) {
        if (this.config.vertical) {
            return item.getHeight();
        }
        return item.getWidth();
    }
    /** @hidden */
    _handlePan(delta) {
        const distance = delta - this._lastDistance;
        this._lastDistance = delta;
        this._transitionCarousel(this._currentTransitionPx + distance);
    }
    /** @hidden */
    _handlePanEnd(delta) {
        this._handlePan(delta);
        const closestItem = this._getClosest();
        this.goToItem(closestItem, true);
        if (!this.active) {
            this.active = closestItem;
            this.activeChange$.emit({
                item: closestItem,
                after: delta < 0
            });
        }
        else if (this.active !== closestItem) {
            this.active = closestItem;
            this.activeChange$.emit({
                item: closestItem,
                after: delta < 0
            });
        }
        this.dragStateChange$.emit(false);
        this._lastDistance = 0;
    }
    /**
     * @hidden Animates the carousel to the currently selected slide.
     */
    _transitionCarousel(transitionPx) {
        this._currentTransitionPx = transitionPx;
        const axis = this.config.vertical ? 'Y' : 'X';
        this._element.style.transform = `translate${axis}(${this._currentTransitionPx}px)`;
    }
    /** @hidden Pam Start handler, removes transition duration, */
    _handlePanStart() {
        this._element.style.transitionDuration = '0s';
        this.dragStateChange$.emit(true);
    }
    /** @hidden */
    _setupGestures() {
        this._setupDragStart();
        this._setupDrag();
        this._setupDragEnd();
    }
    /** @hidden */
    _subscribeToEvents(events, element, callback) {
        merge(events.map((e) => fromEvent(element, e, { passive: true }))).forEach((evt) => {
            evt.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((event) => {
                callback(event);
            });
        });
    }
    /** @hidden */
    _setupDragStart() {
        const events = ['mousedown', 'touchstart'];
        this._subscribeToEvents(events, this._element, (event) => {
            this._listenToMouseMove = true;
            this._lastDragPosition = this._initialDragPosition = this._getDragCoordinate(event);
            this._handlePanStart();
        });
    }
    /** @hidden */
    _setupDrag() {
        const events = ['mousemove', 'touchmove'];
        if (!this._document) {
            throw new Error(`Could not setup drag event subscription. Expected to get document ref, got ${this._document} instead`);
        }
        this._subscribeToEvents(events, this._document, (event) => {
            const coordinate = this._getDragCoordinate(event);
            if (!this._listenToMouseMove || coordinate === this._lastDragPosition) {
                return;
            }
            this._dragStarted = true;
            this._handlePan(this._getDraggedDelta(coordinate));
        });
    }
    /** @hidden */
    _setupDragEnd() {
        const events = ['mouseup', 'touchend'];
        if (!this._document) {
            throw new Error(`Could not setup drag event subscription. Expected to get document ref, got ${this._document} instead`);
        }
        this._subscribeToEvents(events, this._document, (event) => {
            if (!this._listenToMouseMove) {
                return;
            }
            if (this._dragStarted) {
                this._handlePanEnd(this._getDraggedDelta(this._getDragCoordinate(event)));
            }
            else {
                this.dragStateChange$.emit(false);
            }
            this._listenToMouseMove = false;
            this._dragStarted = false;
        });
    }
    /** @hidden */
    _getTransition() {
        return this.config?.transition ?? DEFAULT_TRANSITION_DURATION;
    }
    /** @hidden */
    _getDraggedDelta(offset) {
        this._lastDragPosition = offset;
        return offset - this._initialDragPosition;
    }
    /** @hidden */
    _getDragCoordinate(event) {
        let coordinates;
        if (this._isTouchEvent(event)) {
            coordinates = event.touches[0] || event.changedTouches[0];
        }
        else {
            coordinates = event;
        }
        return this.config.vertical ? coordinates.pageY : coordinates.pageX;
    }
    /** @hidden */
    _isTouchEvent(event) {
        return window.TouchEvent && event instanceof TouchEvent;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CarouselService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CarouselService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CarouselService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root'
                }]
        }], ctorParameters: () => [{ type: Document, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }] });

const CarouselResourceStringsEN = {
    fd_carousel_of: 'of',
    fd_carousel_reader: 'Displaying item'
};

/** Page limit to switch to numerical indicator */
const ICON_PAGE_INDICATOR_LIMIT = 8;
var SlideDirection;
(function (SlideDirection) {
    SlideDirection[SlideDirection["None"] = 0] = "None";
    SlideDirection[SlideDirection["NEXT"] = 1] = "NEXT";
    SlideDirection[SlideDirection["PREVIOUS"] = 2] = "PREVIOUS";
})(SlideDirection || (SlideDirection = {}));
let carouselCounter = 0;
class CarouselActiveSlides {
    constructor(activeItems, slideDirection) {
        this.activeItems = activeItems;
        this.slideDirection = slideDirection;
    }
}
class CarouselComponent {
    /**
     * An accessor that sets the resource strings.
     * By default it uses EN resources.
     */
    set resourceStrings(value) {
        this._resourceStrings = Object.assign({}, this._resourceStrings, value);
    }
    /**
     * An accessor that returns the resource strings.
     */
    get resourceStrings() {
        return this._resourceStrings;
    }
    /** Number of items to be visible at a time */
    set visibleSlidesCount(value) {
        this._visibleSlidesCount = value;
        this._visibleSlidesNumericCount = this._getVisibleSlidesCount();
    }
    get visibleSlidesCount() {
        return this._visibleSlidesCount;
    }
    /** @hidden */
    get _contentSizePx() {
        return this._slidesWrapperSize ? `${this._slidesWrapperSize}px` : this.width;
    }
    /** @hidden */
    constructor(_elementRef, _renderer, _changeDetectorRef, _carouselService, _zone) {
        this._elementRef = _elementRef;
        this._renderer = _renderer;
        this._changeDetectorRef = _changeDetectorRef;
        this._carouselService = _carouselService;
        this._zone = _zone;
        /** ID for the Carousel. */
        this.id = `fd-carousel-${carouselCounter++}`;
        /** Sets aria-label attribute for carousel */
        this.ariaLabel = null;
        /** Sets position of page indicator container. Default position is bottom. */
        this.pageIndicatorsOrientation = 'bottom';
        /** Width for carousel container */
        this.width = '100%';
        /** If carousel is in circular loop */
        this.loop = false;
        /** Shows/hides optional navigation button */
        this.navigation = true;
        /** Show navigation button in page indicator container or inside content. Default is page indicator container on true value */
        this.navigatorInPageIndicator = true;
        /** Convert to Numeric page indicator */
        this.numericIndicator = false;
        /** Shows/hides optional page indicator container  */
        this.pageIndicatorContainer = true;
        /** Shows/hides optional page indicator */
        this.pageIndicator = true;
        /** Sets sliding duration in millie seconds. Default is 150 */
        this.slideTransitionDuration = 150;
        /** Is swipe enabled */
        this.swipeEnabled = true;
        /** Is carousel is vertical. Default value is false. */
        this.vertical = false;
        /** Whether to hide top border of the Pagination Container. */
        this.noPaginationContainerBorder = false;
        /** Background configuration for the Content container. */
        this.contentBackground = 'translucent';
        /** Background configuration for the Pagination container */
        this.pageIndicatorBackground = 'solid';
        /** An event that is emitted after a slide transition has happened */
        this.slideChange = new EventEmitter();
        /** @hidden Start index of currently active items */
        this.currentActiveSlidesStartIndex = 0;
        /** @hidden End index of currently active items */
        this.currentActiveSlidesEndIndex = 0;
        /** @hidden an array of id(s) of currently active item(s) */
        this.currentActiveSlidesIds = [];
        /** @hidden the total number of slides in the carousel */
        this.totalSlides = 0;
        /** @hidden Make left navigation button disabled */
        this.leftButtonDisabled = false;
        /** @hidden Make right navigation button disabled */
        this.rightButtonDisabled = false;
        /** @hidden Fake array for counting number of page indicator */
        this.pageIndicatorsCountArray = [];
        /** @hidden */
        this._slidesWrapperSize = 0;
        /** @hidden handles rtl service */
        this.dir = computed(() => (this._isRtl() ? 'rtl' : 'ltr'), ...(ngDevMode ? [{ debugName: "dir" }] : []));
        /** @hidden */
        this._visibleSlidesCount = 1;
        /** @hidden */
        this._visibleSlidesNumericCount = 1;
        /** @hidden */
        this._resourceStrings = CarouselResourceStringsEN;
        /** @hidden */
        this._config = {};
        /** @hidden */
        this._slidesCopy = [];
        /** @hidden */
        this._slideSwiped = false;
        /** @hidden */
        this._destroyRef = inject(DestroyRef);
        /** @hidden */
        this._rtlService = inject(RtlService, {
            optional: true
        });
        /** @hidden */
        this._isRtl = computed(() => this._rtlService?.rtl() ?? false, ...(ngDevMode ? [{ debugName: "_isRtl" }] : []));
        effect(() => {
            const isRtl = this._isRtl();
            this._carouselService.isRtl = isRtl;
            if (this._carouselService.items && this._carouselService.active) {
                this._carouselService.goToItem(this._carouselService.active, false);
            }
        });
    }
    /** @hidden */
    handleKeyboardEvent(event) {
        if (KeyUtil.isKeyCode(event, [LEFT_ARROW, RIGHT_ARROW]) ||
            (this.vertical && KeyUtil.isKeyCode(event, [UP_ARROW, DOWN_ARROW]))) {
            event.preventDefault();
            if (KeyUtil.isKeyCode(event, LEFT_ARROW)) {
                this._isRtl() ? this.next() : this.previous();
            }
            if (KeyUtil.isKeyCode(event, RIGHT_ARROW)) {
                this._isRtl() ? this.previous() : this.next();
            }
            if (KeyUtil.isKeyCode(event, UP_ARROW)) {
                this.previous();
            }
            if (KeyUtil.isKeyCode(event, DOWN_ARROW)) {
                this.next();
            }
            this.carouselContainer.nativeElement.focus();
        }
    }
    /** @hidden */
    ngOnChanges(changes) {
        if (changes.visibleSlidesCount && this.slides?.length > 0) {
            this._notifySlideChange(SlideDirection.None);
        }
    }
    /** @hidden */
    ngAfterContentInit() {
        // On carousel load, display first slide + number of slide visible
        this.currentActiveSlidesStartIndex = 0;
        this.currentActiveSlidesEndIndex = this._visibleSlidesNumericCount - 1;
        this.currentActiveSlidesIds = [];
        this.totalSlides = this.slides.length;
        this.slides.forEach((slide, index) => {
            const isActive = index >= this.currentActiveSlidesStartIndex && index <= this.currentActiveSlidesEndIndex;
            slide.ariaSetsize.set(this.totalSlides);
            slide.ariaPosinset.set(index + 1);
            slide.ariaHidden.set(!isActive);
            slide.ariaSelected.set(isActive);
            if (isActive) {
                this.currentActiveSlidesIds.push(slide.id);
            }
        });
        this.ariaActivedescendant = this.currentActiveSlidesIds.join(' ');
        // Change pagination display to numeric, if item count is more than 8
        if (this.slides.length > ICON_PAGE_INDICATOR_LIMIT) {
            this.numericIndicator = true;
        }
        if (this.slides.length > 0) {
            this._initializeCarousel();
        }
        else {
            this.leftButtonDisabled = true;
            this.rightButtonDisabled = true;
            // Disable swipe when there is no carousel item
            this.swipeEnabled = false;
            this.navigation = false;
        }
        // Keep copy of original slide array, for indicator purpose.
        // In case of looped carousel, original slides array changes.
        this._slidesCopy = this.slides.toArray();
        this._subscribeServiceEvents();
        // Subscribe to dynamic update of slides
        this.slides.changes.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => this._onSlideUpdates());
        this._changeDetectorRef.markForCheck();
    }
    /** @hidden */
    ngAfterViewInit() {
        this._initializeServiceConfig();
        this._carouselService.initialise(this._config, this.slides, this.slideContainer);
        this._previousVisibleSlidesCount = this._visibleSlidesNumericCount;
        this._resizeContentContainer();
    }
    /** @hidden */
    ngAfterViewChecked() {
        if (this._previousVisibleSlidesCount && this._previousVisibleSlidesCount !== this._visibleSlidesNumericCount) {
            this._initializeCarousel();
            this._initializeServiceConfig();
            this._carouselService.updateConfig(this._config);
            this._previousVisibleSlidesCount = this._visibleSlidesNumericCount;
            this._changeDetectorRef.detectChanges();
        }
    }
    /** @hidden */
    get _showNavigationButtonInPageIndicatorContainer() {
        return this.navigatorInPageIndicator && this.pageIndicatorsCountArray.length > 1;
    }
    /** @hidden */
    get _showNavigationButtonInContent() {
        return !this.navigatorInPageIndicator && this.pageIndicatorsCountArray.length > 1;
    }
    /** @hidden */
    get _showPageIndicatorContainer() {
        return this.pageIndicatorContainer && (this.pageIndicatorsCountArray.length > 0 || this.numericIndicator);
    }
    /** @hidden */
    get getPageIndicatorLabel() {
        return `${this.currentActiveSlidesStartIndex + 1} ${this.resourceStrings.fd_carousel_of} ${this.pageIndicatorsCountArray.length}`;
    }
    /** @hidden */
    get screenReaderLabel() {
        return `${this.resourceStrings.fd_carousel_reader} ${this.currentActiveSlidesStartIndex + 1} ${this.resourceStrings.fd_carousel_of} ${this.pageIndicatorsCountArray.length}`;
    }
    /** @hidden */
    _focus() {
        const el = this._elementRef.nativeElement;
        if (el !== document.activeElement) {
            el.focus({
                preventScroll: true
            });
        }
    }
    /** Transitions to the previous slide in the carousel. */
    previous() {
        if (!this.loop && this.currentActiveSlidesStartIndex <= 0) {
            return;
        }
        this.rightButtonDisabled = false;
        this._adjustActiveItemPosition(SlideDirection.PREVIOUS);
        this._preventDefaultBtnFocus();
        this._carouselService.pickPrevious();
        this._notifySlideChange(SlideDirection.PREVIOUS);
        this._changeDetectorRef.detectChanges();
    }
    /** Transitions to the next slide in the carousel. */
    next() {
        if (!this.loop && this.currentActiveSlidesStartIndex >= this.pageIndicatorsCountArray.length - 1) {
            return;
        }
        // Moving to next slide
        this.leftButtonDisabled = false;
        this._adjustActiveItemPosition(SlideDirection.NEXT);
        this._preventDefaultBtnFocus();
        this._carouselService.pickNext();
        this._notifySlideChange(SlideDirection.NEXT);
        this._changeDetectorRef.detectChanges();
    }
    /** @hidden Subscribe to carousel service events */
    _subscribeServiceEvents() {
        this._carouselService.activeChange$.subscribe((event) => this._onSlideSwipe(event));
        this._carouselService.dragStateChange$.subscribe((event) => this._onSlideDrag(event));
    }
    /**
     * @hidden Prevent native focus flow related to button, if button will be disable on focus state.
     * It works only if carousel is not in circular loop.
     */
    _preventDefaultBtnFocus() {
        if (this.loop) {
            return;
        }
        const isFirst = this.currentActiveSlidesStartIndex === 0;
        const isLast = this.currentActiveSlidesStartIndex === this.pageIndicatorsCountArray.length - 1;
        if (isFirst || isLast) {
            this._elementRef.nativeElement.focus({
                preventScroll: true
            });
        }
    }
    /** @hidden Adjust position of active item, based on slide direction */
    _adjustActiveItemPosition(slideDirection, step = 1) {
        // Move one step in the direction
        const positionAdjustment = slideDirection === SlideDirection.NEXT ? step : -step;
        this.currentActiveSlidesStartIndex = this.currentActiveSlidesStartIndex + positionAdjustment;
        // If carousel set to loop
        if (this.loop) {
            if (this.currentActiveSlidesStartIndex < 0) {
                this.currentActiveSlidesStartIndex = this.slides.length + this.currentActiveSlidesStartIndex;
            }
            else if (this.currentActiveSlidesStartIndex >= this.slides.length) {
                this.currentActiveSlidesStartIndex = this.currentActiveSlidesStartIndex % this.slides.length;
            }
        }
        else {
            this._buttonVisibility();
        }
    }
    /** @hidden Handles navigation button visibility */
    _buttonVisibility() {
        if (!this.loop) {
            // Need to disable navigation button if either direction limit has reached.
            if (this.currentActiveSlidesStartIndex === 0) {
                this.leftButtonDisabled = true;
                this.rightButtonDisabled = false;
            }
            else if (this.slides.length - 1 === this.currentActiveSlidesStartIndex) {
                this.rightButtonDisabled = true;
                this.leftButtonDisabled = false;
            }
            else if (this._visibleSlidesNumericCount > 1 &&
                this.currentActiveSlidesStartIndex + this._visibleSlidesNumericCount >= this.slides.length) {
                this.rightButtonDisabled = true;
            }
            else {
                this.leftButtonDisabled = false;
                this.rightButtonDisabled = false;
            }
            if (this.slides.length === 1) {
                this.leftButtonDisabled = true;
                this.rightButtonDisabled = true;
            }
        }
    }
    /** @hidden Handle when slide is added or removed */
    _onSlideUpdates() {
        this._slidesCopy = this.slides.toArray();
        this.currentActiveSlidesStartIndex = 0;
        this._carouselService.initialise(this._config, this.slides, this.slideContainer);
        this._carouselService.active = null;
        if (this.vertical) {
            this._renderer.setStyle(this.slideContainer?.nativeElement, 'transform', 'translateY(0px)');
        }
        else {
            this._renderer.setStyle(this.slideContainer?.nativeElement, 'transform', 'translateX(0px)');
        }
        this._initializeCarousel();
        this._changeDetectorRef.detectChanges();
    }
    /** @hidden Initialize carousel with visible items */
    _initializeCarousel() {
        this._zone.onMicrotaskEmpty.pipe(take(1)).subscribe(() => {
            // Handles navigator button enabled/disabled state
            this._buttonVisibility();
            let arrayLength;
            // set page indicator count with fake array, to use in template
            if (this.loop && this._visibleSlidesNumericCount > 1) {
                // If loop with multi item visible.
                arrayLength = this.slides.length;
            }
            else {
                arrayLength = this.slides.length - this._visibleSlidesNumericCount + 1;
            }
            const pageIndicatorsIfZeroCount = this.slides.length === 0 ? 0 : 1;
            this.pageIndicatorsCountArray = new Array(arrayLength > 0 ? arrayLength : pageIndicatorsIfZeroCount);
            this._goToFirstItem();
            this.slides.forEach((_slide, index) => {
                if (index >= this.currentActiveSlidesStartIndex &&
                    index < this.currentActiveSlidesStartIndex + this._visibleSlidesNumericCount) {
                    _slide.visibility = 'visible';
                }
                else {
                    _slide.visibility = 'hidden';
                }
            });
            this._changeDetectorRef.detectChanges();
        });
    }
    /** @hidden */
    _goToFirstItem() {
        if (this.pageIndicatorsCountArray.length === 0 &&
            this._carouselService.currentTransitionPx !== 0 &&
            this.slides.length > 1) {
            this.currentActiveSlidesStartIndex = 0;
            this._carouselService.goToItem(this.slides.first);
        }
    }
    /** @hidden Initialize config for Carousel service */
    _initializeServiceConfig() {
        this._config.vertical = this.vertical;
        this._config.elementsAtOnce = this._visibleSlidesNumericCount;
        this._config.gestureSupport = this.swipeEnabled;
        this._config.infinite = this.loop;
        this._config.transition = String(this.slideTransitionDuration) + 'ms';
        // Carousel service expects transition in string format with unit.
    }
    /**
     * @hidden Returns the slide swapping steps
     */
    _getStepTaken(event, actualActiveSlideIndex) {
        let stepsCalculated;
        if ((!this._isRtl() && event.after) ||
            (this._isRtl() && !event.after && !this.vertical) ||
            (this.vertical && event.after)) {
            if (actualActiveSlideIndex === 0 && this.currentActiveSlidesStartIndex === 0) {
                stepsCalculated = 0;
            }
            else if (actualActiveSlideIndex > this.currentActiveSlidesStartIndex) {
                stepsCalculated = actualActiveSlideIndex - this.currentActiveSlidesStartIndex;
            }
            else {
                stepsCalculated = this.slides.length - this.currentActiveSlidesStartIndex + actualActiveSlideIndex;
            }
        }
        else {
            // Special case, when first left swipe before slides are rotated in carousel service
            if (actualActiveSlideIndex === 0 && this.currentActiveSlidesStartIndex === 0) {
                stepsCalculated = 0;
            }
            else if (actualActiveSlideIndex < this.currentActiveSlidesStartIndex) {
                stepsCalculated = this.currentActiveSlidesStartIndex - actualActiveSlideIndex;
            }
            else {
                stepsCalculated = this.currentActiveSlidesStartIndex + this.slides.length - actualActiveSlideIndex;
            }
        }
        return stepsCalculated;
    }
    /** @hidden Handles notification on visible slide change */
    _notifySlideChange(slideDirection, firstActiveSlide) {
        const activeSlides = [];
        let firstActiveSlideIndex;
        if (this.loop) {
            firstActiveSlide = this._carouselService.active;
        }
        if (firstActiveSlide) {
            firstActiveSlideIndex = this.slides.toArray().findIndex((_item) => _item === firstActiveSlide);
        }
        else {
            firstActiveSlideIndex = this.currentActiveSlidesStartIndex;
        }
        for (let activeSlideIndex = 0; activeSlideIndex < this._visibleSlidesNumericCount; activeSlideIndex++) {
            const index = firstActiveSlideIndex + activeSlideIndex;
            const slide = this.slides.get(index);
            if (slide) {
                activeSlides.push(slide);
                slide.visibility = 'visible';
            }
        }
        this._manageSlideVisibility(firstActiveSlideIndex);
        const direction = slideDirection === SlideDirection.NEXT ? 'Next' : 'Previous';
        this.slideChange.emit(new CarouselActiveSlides(activeSlides, direction));
    }
    /** @hidden Manages visibility for slides. Useful in managing tab order */
    _manageSlideVisibility(firstActiveSlideIndex) {
        setTimeout(() => {
            const lastActiveSlideIndex = firstActiveSlideIndex + this._visibleSlidesNumericCount;
            this.currentActiveSlidesIds = [];
            this.slides.forEach((slide, index) => {
                const isVisible = index >= firstActiveSlideIndex && index < lastActiveSlideIndex;
                // Only update visibility if it has changed
                if (slide.visibility !== (isVisible ? 'visible' : 'hidden')) {
                    slide.visibility = isVisible ? 'visible' : 'hidden';
                }
                if (isVisible) {
                    this.currentActiveSlidesIds.push(slide.id);
                }
                slide.ariaHidden.set(!isVisible);
                slide.ariaSelected.set(isVisible);
            });
            this.ariaActivedescendant = this.currentActiveSlidesIds.join(' ');
            this._changeDetectorRef.markForCheck();
        }, this.slideTransitionDuration);
    }
    /** @hidden On Swiping of slide, manage page indicator */
    _onSlideSwipe(event) {
        this._slideSwiped = true;
        const firstActiveSlide = event.item;
        const actualActiveSlideIndex = this._slidesCopy.findIndex((_slide) => _slide === firstActiveSlide);
        const stepTaken = this._getStepTaken(event, actualActiveSlideIndex);
        if (stepTaken > 0) {
            let slideDirection;
            if (!this._isRtl()) {
                slideDirection = event.after ? SlideDirection.NEXT : SlideDirection.PREVIOUS;
            }
            else {
                // vertical carousel slide direction is same in ltr and rtl
                if (this.vertical) {
                    slideDirection = event.after ? SlideDirection.NEXT : SlideDirection.PREVIOUS;
                }
                else {
                    slideDirection = event.after ? SlideDirection.PREVIOUS : SlideDirection.NEXT;
                }
            }
            this._adjustActiveItemPosition(slideDirection, stepTaken);
            this._notifySlideChange(slideDirection, firstActiveSlide);
            this._changeDetectorRef.detectChanges();
        }
    }
    /**
     * @hidden Making slides visible when slides are dragged. Otherwise, it looses the effect.
     */
    _onSlideDrag(isDragging) {
        if (isDragging) {
            this.slides.forEach((_slide) => {
                _slide.visibility = 'visible';
            });
            this._slideSwiped = false;
            this._changeDetectorRef.markForCheck();
        }
        else {
            // After slide limit reached, if dragging starts then revert visibility
            if (!this._slideSwiped && !this.loop) {
                this._manageSlideVisibility(this.currentActiveSlidesStartIndex);
            }
        }
    }
    /**
     * @hidden
     * Resizes inner carousel container to fit all items in the viewport and hide those which are not fully in it.
     */
    _resizeContentContainer() {
        merge(resizeObservable(this.slideContainer.nativeElement), resizeObservable(this.carouselContainer.nativeElement))
            .pipe(debounceTime(100), takeUntilDestroyed(this._destroyRef))
            .subscribe(() => {
            const { width, slides } = this._getFittingSlidesAndWidth();
            if (this.visibleSlidesCount === 'auto') {
                this._visibleSlidesNumericCount = slides;
                const totalSlides = this.slides.length;
                let needleSlideIndex = this.currentActiveSlidesStartIndex;
                // If amount of slides insufficient to fill whole carousel, slide back a bit.
                if (this.currentActiveSlidesStartIndex + slides > totalSlides) {
                    needleSlideIndex =
                        this.currentActiveSlidesStartIndex -
                            (this.currentActiveSlidesStartIndex + slides - totalSlides);
                }
                const needleSlide = this.slides.get(needleSlideIndex);
                this.currentActiveSlidesStartIndex = needleSlideIndex;
                this._carouselService.active = needleSlide;
                // Refresh carousel config and transition to the current slide.
                this._initializeCarousel();
                needleSlide && this._carouselService.goToItem(needleSlide);
                this._notifySlideChange(SlideDirection.None);
            }
            if (this._slidesWrapperSize !== width) {
                this._slidesWrapperSize = width;
            }
            this._changeDetectorRef.detectChanges();
        });
    }
    /**
     * @hidden
     * Calculates how many slides can be shown within current carousel viewport.
     * @returns Object containing fitting slides count and total width of those slides.
     */
    _getFittingSlidesAndWidth() {
        if (!this.carouselContainer) {
            return {
                width: 0,
                slides: 1
            };
        }
        const { width } = this.carouselContainer.nativeElement.getBoundingClientRect();
        let maxSize = 0;
        let slidesCount = 0;
        const carouselSlides = this.slides.toArray();
        const previousSlides = carouselSlides.splice(0, this.currentActiveSlidesStartIndex);
        const getSlides = (slides) => {
            for (const slide of slides) {
                const slideWidth = slide.getWidth();
                if (!slideWidth) {
                    break;
                }
                const newSize = maxSize + slideWidth;
                if (newSize > width) {
                    break;
                }
                maxSize = newSize;
                slidesCount++;
            }
        };
        getSlides(carouselSlides);
        // If with of the rest of the slides is lesser than carouse's viewport, add previous slides to it.
        if (maxSize < width) {
            getSlides(previousSlides);
        }
        return {
            width: maxSize,
            slides: slidesCount
        };
    }
    /** @hidden */
    _getVisibleSlidesCount() {
        if (this._visibleSlidesCount !== 'auto') {
            return this._visibleSlidesCount;
        }
        const { slides } = this._getFittingSlidesAndWidth();
        return slides;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CarouselComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: CarouselService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: CarouselComponent, isStandalone: true, selector: "fd-carousel", inputs: { id: "id", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaDescribedBy: "ariaDescribedBy", pageIndicatorsOrientation: "pageIndicatorsOrientation", height: "height", width: "width", loop: "loop", navigation: "navigation", navigatorInPageIndicator: "navigatorInPageIndicator", numericIndicator: "numericIndicator", pageIndicatorContainer: "pageIndicatorContainer", pageIndicator: "pageIndicator", resourceStrings: "resourceStrings", slideTransitionDuration: "slideTransitionDuration", swipeEnabled: "swipeEnabled", vertical: "vertical", noPaginationContainerBorder: "noPaginationContainerBorder", contentBackground: "contentBackground", pageIndicatorBackground: "pageIndicatorBackground", visibleSlidesCount: "visibleSlidesCount" }, outputs: { slideChange: "slideChange" }, host: { listeners: { "keydown": "handleKeyboardEvent($event)" }, properties: { "style.width": "width", "attr.id": "this.id" } }, providers: [CarouselService], queries: [{ propertyName: "slides", predicate: CarouselItemComponent, descendants: true }], viewQueries: [{ propertyName: "slideContainer", first: true, predicate: ["slideContainer"], descendants: true }, { propertyName: "carouselContainer", first: true, predicate: ["carouselContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section\n    class=\"fd-carousel\"\n    [class.fd-carousel--no-navigation]=\"!navigation\"\n    tabindex=\"0\"\n    [style.height]=\"height\"\n    [style.width]=\"width\"\n    [attr.dir]=\"dir()\"\n    role=\"listbox\"\n    aria-roledescription=\"Carousel\"\n    [attr.aria-activedescendant]=\"ariaActivedescendant\"\n    #carouselContainer\n    (click)=\"_focus()\"\n>\n    @if (_showPageIndicatorContainer && pageIndicatorsOrientation === 'top') {\n        <ng-template [ngTemplateOutlet]=\"pageIndicatorContainer\"></ng-template>\n    }\n    <div\n        class=\"fd-carousel__content\"\n        [class.fd-carousel__content--horizontal]=\"!vertical\"\n        [ngClass]=\"'fd-carousel__content--' + contentBackground\"\n        [style.width]=\"_contentSizePx\"\n    >\n        @if (_showNavigationButtonInContent) {\n            <ng-template [ngTemplateOutlet]=\"buttonLeft\"></ng-template>\n        }\n        <div #slideContainer class=\"fd-carousel__slides\">\n            <ng-content></ng-content>\n        </div>\n        @if (_showNavigationButtonInContent) {\n            <ng-template [ngTemplateOutlet]=\"buttonRight\"></ng-template>\n        }\n    </div>\n    @if (_showPageIndicatorContainer && pageIndicatorsOrientation === 'bottom') {\n        <ng-template [ngTemplateOutlet]=\"pageIndicatorContainer\"></ng-template>\n    }\n    <div [style.display]=\"'none'\" role=\"region\" [attr.id]=\"id + '-accessibility'\" aria-live=\"polite\" dir=\"ltr\">\n        {{ screenReaderLabel }}\n    </div>\n</section>\n<ng-template #pageIndicatorContainer>\n    <div\n        class=\"fd-carousel__page-indicator-container\"\n        [class.fd-carousel__page-indicator-container--no-border]=\"noPaginationContainerBorder\"\n        [ngClass]=\"'fd-carousel__page-indicator-container--' + pageIndicatorBackground\"\n    >\n        @if (_showNavigationButtonInPageIndicatorContainer) {\n            <ng-template [ngTemplateOutlet]=\"buttonLeft\"></ng-template>\n        }\n        <ng-template [ngTemplateOutlet]=\"pageIndicators\"> </ng-template>\n        @if (_showNavigationButtonInPageIndicatorContainer) {\n            <ng-template [ngTemplateOutlet]=\"buttonRight\"></ng-template>\n        }\n    </div>\n</ng-template>\n<ng-template #pageIndicators>\n    @if (numericIndicator) {\n        <div class=\"fd-carousel__page-indicators\">\n            @if (pageIndicator) {\n                <div class=\"fd-carousel__text\" dir=\"ltr\">\n                    {{ getPageIndicatorLabel }}\n                </div>\n            }\n        </div>\n    }\n    @if (!numericIndicator && _showNavigationButtonInPageIndicatorContainer) {\n        <div class=\"fd-carousel__page-indicators\" [attr.dir]=\"dir()\">\n            @if (pageIndicator) {\n                @for (item of pageIndicatorsCountArray; track item; let i = $index) {\n                    <span\n                        role=\"img\"\n                        [attr.aria-label]=\"\n                            'coreCarousel.pageIndicatorLabel' | fdTranslate: { itemNum: i + 1, totalNum: totalSlides }\n                        \"\n                        class=\"fd-carousel__page-indicator\"\n                        [class.fd-carousel__page-indicator--active]=\"i === currentActiveSlidesStartIndex\"\n                    ></span>\n                }\n            }\n        </div>\n    }\n</ng-template>\n<ng-template #buttonLeft>\n    <button\n        fd-button\n        role=\"button\"\n        class=\"fd-carousel__button\"\n        [class.fd-carousel__button--left]=\"!vertical\"\n        [class.fd-carousel__button--up]=\"vertical\"\n        [style.z-index]=\"1\"\n        [attr.aria-label]=\"'coreCarousel.leftNavigationBtnLabel' | fdTranslate\"\n        (click)=\"previous(); $event.stopPropagation()\"\n        [disabled]=\"leftButtonDisabled\"\n        [attr.title]=\"'coreCarousel.leftNavigationBtnLabel' | fdTranslate\"\n        [glyph]=\"vertical ? 'slim-arrow-up' : 'slim-arrow-left'\"\n    ></button>\n</ng-template>\n<ng-template #buttonRight>\n    <button\n        fd-button\n        role=\"button\"\n        class=\"fd-carousel__button\"\n        [class.fd-carousel__button--right]=\"!vertical\"\n        [class.fd-carousel__button--down]=\"vertical\"\n        [style.z-index]=\"1\"\n        [attr.aria-label]=\"'coreCarousel.rightNavigationBtnLabel' | fdTranslate\"\n        (click)=\"next(); $event.stopPropagation()\"\n        [disabled]=\"rightButtonDisabled\"\n        [attr.title]=\"'coreCarousel.rightNavigationBtnLabel' | fdTranslate\"\n        [glyph]=\"vertical ? 'slim-arrow-down' : 'slim-arrow-right'\"\n    ></button>\n</ng-template>\n", styles: [".fd-carousel{--fdCarousel_Button_Display:block;--fdCarousel_Content_Background:var(--sapBackgroundColor);--fdCarousel_Page_Indicator_Margin:var(--fdCarousel_Dot_Margin);--fdCarousel_Page_Indicator_Size:var(--fdCarousel_Dot_Size);--fdCarousel_Page_Indicator_Background_Color:var(--fdCarousel_Dot_Background);--fdCarousel_Page_Indicator_Border:var(--fdCarousel_Dot_Border);--fdCarousel_Page_Indicator_Container_Background:var(--sapPageFooter_Background);border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%;max-width:100%;min-width:15.5rem;width:100%}.fd-carousel:after,.fd-carousel:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel.is-focus,.fd-carousel:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth)}.fd-carousel.is-hover .fd-carousel__content .fd-carousel__button,.fd-carousel:hover .fd-carousel__content .fd-carousel__button{--fdCarousel_Button_Display:block}.fd-carousel .fd-carousel__button+.fd-carousel__button{-webkit-margin-start:.5rem;margin-inline-start:.5rem}.fd-carousel__content{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-ms-flex-preferred-size:100%;background:var(--fdCarousel_Content_Background);flex-basis:100%;overflow:hidden;position:relative}.fd-carousel__content:after,.fd-carousel__content:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel__content .fd-carousel__button{--fdCarousel_Button_Display:none;-webkit-box-shadow:var(--sapContent_Shadow0);box-shadow:var(--sapContent_Shadow0);margin-block:0;margin-inline:0;position:absolute}.fd-carousel__content .fd-carousel__button--left,.fd-carousel__content .fd-carousel__button--right{top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.fd-carousel__content .fd-carousel__button--down,.fd-carousel__content .fd-carousel__button--up{left:50%;-webkit-transform:translateX(-50%);transform:translate(-50%)}.fd-carousel__content .fd-carousel__button--down[dir=rtl]>[class*=sap-icon],.fd-carousel__content .fd-carousel__button--up[dir=rtl]>[class*=sap-icon],[dir=rtl] .fd-carousel__content .fd-carousel__button--down>[class*=sap-icon],[dir=rtl] .fd-carousel__content .fd-carousel__button--up>[class*=sap-icon]{-webkit-transform:rotate(0deg);transform:rotate(0)}.fd-carousel__content .fd-carousel__button--left{left:.5rem}.fd-carousel__content .fd-carousel__button--left[dir=rtl],[dir=rtl] .fd-carousel__content .fd-carousel__button--left{left:auto;right:.5rem}.fd-carousel__content .fd-carousel__button--right{right:.5rem}.fd-carousel__content .fd-carousel__button--right[dir=rtl],[dir=rtl] .fd-carousel__content .fd-carousel__button--right{left:.5rem;right:auto}.fd-carousel__content .fd-carousel__button--up{top:.5rem}.fd-carousel__content .fd-carousel__button--down{bottom:.5rem}.fd-carousel__content .fd-carousel__item img{height:auto;min-width:100%}.fd-carousel__content--horizontal .fd-carousel__slides{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;-ms-touch-action:pan-y;touch-action:pan-y;width:100%}.fd-carousel__content--horizontal .fd-carousel__item img{min-height:100%;min-width:auto;width:auto}.fd-carousel__content--solid{--fdCarousel_Content_Background:var(--sapGroup_ContentBackground)}.fd-carousel__content--transparent{--fdCarousel_Content_Background:transparent}.fd-carousel__slides{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:100%;line-height:normal;margin-block:0;margin-inline:0;min-height:-webkit-fit-content;min-height:-moz-fit-content;min-height:fit-content;padding-block:0;padding-inline:0;-ms-touch-action:pan-x;touch-action:pan-x;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-tap-highlight-color:rgba(0,0,0,0);--fdMessage_Page_Container_Corner_Radius:0}.fd-carousel__slides:after,.fd-carousel__slides:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel__item{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:none;height:100%;line-height:0}.fd-carousel__item:after,.fd-carousel__item:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel__item--active{display:block}.fd-carousel__item img{pointer-events:none}.fd-carousel__page-indicator-container{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:var(--fdCarousel_Page_Indicator_Container_Background);border-top:var(--fdCarousel_Pagination_Border);max-height:3.5rem;min-height:2.75rem;padding-block:.375rem;padding-inline:.5rem}.fd-carousel__page-indicator-container:after,.fd-carousel__page-indicator-container:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel__page-indicator-container:first-child{border-bottom:var(--fdCarousel_Pagination_Border);border-top:none}.fd-carousel__page-indicator-container--translucent{--fdCarousel_Page_Indicator_Container_Background:var(--sapBackgroundColor)}.fd-carousel__page-indicator-container--transparent{--fdCarousel_Page_Indicator_Container_Background:transparent}.fd-carousel__page-indicator-container--no-border{border-top-color:transparent}.fd-carousel__page-indicator-container--no-border:first-child{border-bottom-color:transparent;border-top:none}.fd-carousel__page-indicators{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;min-width:9rem;padding-block:.5rem;padding-inline:.5rem}.fd-carousel__page-indicators:after,.fd-carousel__page-indicators:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel__page-indicator{background-color:var(--fdCarousel_Page_Indicator_Background_Color);border:0;border:var(--fdCarousel_Page_Indicator_Border);border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdCarousel_Page_Indicator_Size);line-height:normal;list-style-type:none;margin-block:0;margin-inline:0;margin-inline:var(--fdCarousel_Page_Indicator_Margin);max-height:var(--fdCarousel_Page_Indicator_Size);max-width:var(--fdCarousel_Page_Indicator_Size);min-height:var(--fdCarousel_Page_Indicator_Size);min-width:var(--fdCarousel_Page_Indicator_Size);padding-block:0;padding-inline:0;width:var(--fdCarousel_Page_Indicator_Size)}.fd-carousel__page-indicator:after,.fd-carousel__page-indicator:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel__page-indicator--active{--fdCarousel_Page_Indicator_Size:.5rem;--fdCarousel_Page_Indicator_Margin:.25rem;--fdCarousel_Page_Indicator_Border:var(--fdCarousel_Dot_Selected_Border);--fdCarousel_Page_Indicator_Background_Color:var(--fdCarousel_Dot_Selected_Background)}.fd-carousel__text{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapPageFooter_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;overflow:hidden;padding-block:0;padding-inline:0;text-align:center;text-overflow:ellipsis;white-space:nowrap}.fd-carousel__text:after,.fd-carousel__text:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel .fd-carousel__button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:50%;display:var(--fdCarousel_Button_Display);height:2.125rem;margin-block:.25rem;margin-inline:.25rem;max-height:2.125rem;max-width:2.125rem;min-height:2.125rem;min-width:2.125rem;padding-block:0;padding-inline:0;width:2.125rem}.fd-carousel .fd-carousel__button:before{inset:-.25rem;width:auto}.fd-carousel .fd-carousel__button[dir=rtl]>[class*=sap-icon],[dir=rtl] .fd-carousel .fd-carousel__button>[class*=sap-icon]{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fd-carousel .fd-carousel__button.is-focus,.fd-carousel .fd-carousel__button:focus{z-index:5}.fd-carousel .fd-carousel__button.is-focus:after,.fd-carousel .fd-carousel__button:focus:after{--fdButton_Focus_Border_Radius:50%}.fd-carousel--no-navigation .fd-carousel__button,.fd-carousel--no-navigation.is-hover .fd-carousel__content .fd-carousel__button,.fd-carousel--no-navigation:hover .fd-carousel__content .fd-carousel__button{--fdCarousel_Button_Display:none}.fd-carousel__item fd-busy-indicator{display:block;height:100%;width:100%}\n/*! Bundled license information:\n\nfundamental-styles/dist/carousel.css:\n  (*!\n   * Fundamental Library Styles v0.40.1\n   * Copyright (c) 2025 SAP SE or an SAP affiliate company.\n   * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n   *)\n*/\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CarouselComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fd-carousel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [CarouselService], host: {
                        '[style.width]': 'width'
                    }, imports: [NgTemplateOutlet, NgClass, ButtonComponent, FdTranslatePipe], template: "<section\n    class=\"fd-carousel\"\n    [class.fd-carousel--no-navigation]=\"!navigation\"\n    tabindex=\"0\"\n    [style.height]=\"height\"\n    [style.width]=\"width\"\n    [attr.dir]=\"dir()\"\n    role=\"listbox\"\n    aria-roledescription=\"Carousel\"\n    [attr.aria-activedescendant]=\"ariaActivedescendant\"\n    #carouselContainer\n    (click)=\"_focus()\"\n>\n    @if (_showPageIndicatorContainer && pageIndicatorsOrientation === 'top') {\n        <ng-template [ngTemplateOutlet]=\"pageIndicatorContainer\"></ng-template>\n    }\n    <div\n        class=\"fd-carousel__content\"\n        [class.fd-carousel__content--horizontal]=\"!vertical\"\n        [ngClass]=\"'fd-carousel__content--' + contentBackground\"\n        [style.width]=\"_contentSizePx\"\n    >\n        @if (_showNavigationButtonInContent) {\n            <ng-template [ngTemplateOutlet]=\"buttonLeft\"></ng-template>\n        }\n        <div #slideContainer class=\"fd-carousel__slides\">\n            <ng-content></ng-content>\n        </div>\n        @if (_showNavigationButtonInContent) {\n            <ng-template [ngTemplateOutlet]=\"buttonRight\"></ng-template>\n        }\n    </div>\n    @if (_showPageIndicatorContainer && pageIndicatorsOrientation === 'bottom') {\n        <ng-template [ngTemplateOutlet]=\"pageIndicatorContainer\"></ng-template>\n    }\n    <div [style.display]=\"'none'\" role=\"region\" [attr.id]=\"id + '-accessibility'\" aria-live=\"polite\" dir=\"ltr\">\n        {{ screenReaderLabel }}\n    </div>\n</section>\n<ng-template #pageIndicatorContainer>\n    <div\n        class=\"fd-carousel__page-indicator-container\"\n        [class.fd-carousel__page-indicator-container--no-border]=\"noPaginationContainerBorder\"\n        [ngClass]=\"'fd-carousel__page-indicator-container--' + pageIndicatorBackground\"\n    >\n        @if (_showNavigationButtonInPageIndicatorContainer) {\n            <ng-template [ngTemplateOutlet]=\"buttonLeft\"></ng-template>\n        }\n        <ng-template [ngTemplateOutlet]=\"pageIndicators\"> </ng-template>\n        @if (_showNavigationButtonInPageIndicatorContainer) {\n            <ng-template [ngTemplateOutlet]=\"buttonRight\"></ng-template>\n        }\n    </div>\n</ng-template>\n<ng-template #pageIndicators>\n    @if (numericIndicator) {\n        <div class=\"fd-carousel__page-indicators\">\n            @if (pageIndicator) {\n                <div class=\"fd-carousel__text\" dir=\"ltr\">\n                    {{ getPageIndicatorLabel }}\n                </div>\n            }\n        </div>\n    }\n    @if (!numericIndicator && _showNavigationButtonInPageIndicatorContainer) {\n        <div class=\"fd-carousel__page-indicators\" [attr.dir]=\"dir()\">\n            @if (pageIndicator) {\n                @for (item of pageIndicatorsCountArray; track item; let i = $index) {\n                    <span\n                        role=\"img\"\n                        [attr.aria-label]=\"\n                            'coreCarousel.pageIndicatorLabel' | fdTranslate: { itemNum: i + 1, totalNum: totalSlides }\n                        \"\n                        class=\"fd-carousel__page-indicator\"\n                        [class.fd-carousel__page-indicator--active]=\"i === currentActiveSlidesStartIndex\"\n                    ></span>\n                }\n            }\n        </div>\n    }\n</ng-template>\n<ng-template #buttonLeft>\n    <button\n        fd-button\n        role=\"button\"\n        class=\"fd-carousel__button\"\n        [class.fd-carousel__button--left]=\"!vertical\"\n        [class.fd-carousel__button--up]=\"vertical\"\n        [style.z-index]=\"1\"\n        [attr.aria-label]=\"'coreCarousel.leftNavigationBtnLabel' | fdTranslate\"\n        (click)=\"previous(); $event.stopPropagation()\"\n        [disabled]=\"leftButtonDisabled\"\n        [attr.title]=\"'coreCarousel.leftNavigationBtnLabel' | fdTranslate\"\n        [glyph]=\"vertical ? 'slim-arrow-up' : 'slim-arrow-left'\"\n    ></button>\n</ng-template>\n<ng-template #buttonRight>\n    <button\n        fd-button\n        role=\"button\"\n        class=\"fd-carousel__button\"\n        [class.fd-carousel__button--right]=\"!vertical\"\n        [class.fd-carousel__button--down]=\"vertical\"\n        [style.z-index]=\"1\"\n        [attr.aria-label]=\"'coreCarousel.rightNavigationBtnLabel' | fdTranslate\"\n        (click)=\"next(); $event.stopPropagation()\"\n        [disabled]=\"rightButtonDisabled\"\n        [attr.title]=\"'coreCarousel.rightNavigationBtnLabel' | fdTranslate\"\n        [glyph]=\"vertical ? 'slim-arrow-down' : 'slim-arrow-right'\"\n    ></button>\n</ng-template>\n", styles: [".fd-carousel{--fdCarousel_Button_Display:block;--fdCarousel_Content_Background:var(--sapBackgroundColor);--fdCarousel_Page_Indicator_Margin:var(--fdCarousel_Dot_Margin);--fdCarousel_Page_Indicator_Size:var(--fdCarousel_Dot_Size);--fdCarousel_Page_Indicator_Background_Color:var(--fdCarousel_Dot_Background);--fdCarousel_Page_Indicator_Border:var(--fdCarousel_Dot_Border);--fdCarousel_Page_Indicator_Container_Background:var(--sapPageFooter_Background);border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%;max-width:100%;min-width:15.5rem;width:100%}.fd-carousel:after,.fd-carousel:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel.is-focus,.fd-carousel:focus{outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth)}.fd-carousel.is-hover .fd-carousel__content .fd-carousel__button,.fd-carousel:hover .fd-carousel__content .fd-carousel__button{--fdCarousel_Button_Display:block}.fd-carousel .fd-carousel__button+.fd-carousel__button{-webkit-margin-start:.5rem;margin-inline-start:.5rem}.fd-carousel__content{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-ms-flex-preferred-size:100%;background:var(--fdCarousel_Content_Background);flex-basis:100%;overflow:hidden;position:relative}.fd-carousel__content:after,.fd-carousel__content:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel__content .fd-carousel__button{--fdCarousel_Button_Display:none;-webkit-box-shadow:var(--sapContent_Shadow0);box-shadow:var(--sapContent_Shadow0);margin-block:0;margin-inline:0;position:absolute}.fd-carousel__content .fd-carousel__button--left,.fd-carousel__content .fd-carousel__button--right{top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.fd-carousel__content .fd-carousel__button--down,.fd-carousel__content .fd-carousel__button--up{left:50%;-webkit-transform:translateX(-50%);transform:translate(-50%)}.fd-carousel__content .fd-carousel__button--down[dir=rtl]>[class*=sap-icon],.fd-carousel__content .fd-carousel__button--up[dir=rtl]>[class*=sap-icon],[dir=rtl] .fd-carousel__content .fd-carousel__button--down>[class*=sap-icon],[dir=rtl] .fd-carousel__content .fd-carousel__button--up>[class*=sap-icon]{-webkit-transform:rotate(0deg);transform:rotate(0)}.fd-carousel__content .fd-carousel__button--left{left:.5rem}.fd-carousel__content .fd-carousel__button--left[dir=rtl],[dir=rtl] .fd-carousel__content .fd-carousel__button--left{left:auto;right:.5rem}.fd-carousel__content .fd-carousel__button--right{right:.5rem}.fd-carousel__content .fd-carousel__button--right[dir=rtl],[dir=rtl] .fd-carousel__content .fd-carousel__button--right{left:.5rem;right:auto}.fd-carousel__content .fd-carousel__button--up{top:.5rem}.fd-carousel__content .fd-carousel__button--down{bottom:.5rem}.fd-carousel__content .fd-carousel__item img{height:auto;min-width:100%}.fd-carousel__content--horizontal .fd-carousel__slides{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;-ms-touch-action:pan-y;touch-action:pan-y;width:100%}.fd-carousel__content--horizontal .fd-carousel__item img{min-height:100%;min-width:auto;width:auto}.fd-carousel__content--solid{--fdCarousel_Content_Background:var(--sapGroup_ContentBackground)}.fd-carousel__content--transparent{--fdCarousel_Content_Background:transparent}.fd-carousel__slides{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:100%;line-height:normal;margin-block:0;margin-inline:0;min-height:-webkit-fit-content;min-height:-moz-fit-content;min-height:fit-content;padding-block:0;padding-inline:0;-ms-touch-action:pan-x;touch-action:pan-x;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-tap-highlight-color:rgba(0,0,0,0);--fdMessage_Page_Container_Corner_Radius:0}.fd-carousel__slides:after,.fd-carousel__slides:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel__item{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:none;height:100%;line-height:0}.fd-carousel__item:after,.fd-carousel__item:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel__item--active{display:block}.fd-carousel__item img{pointer-events:none}.fd-carousel__page-indicator-container{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:var(--fdCarousel_Page_Indicator_Container_Background);border-top:var(--fdCarousel_Pagination_Border);max-height:3.5rem;min-height:2.75rem;padding-block:.375rem;padding-inline:.5rem}.fd-carousel__page-indicator-container:after,.fd-carousel__page-indicator-container:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel__page-indicator-container:first-child{border-bottom:var(--fdCarousel_Pagination_Border);border-top:none}.fd-carousel__page-indicator-container--translucent{--fdCarousel_Page_Indicator_Container_Background:var(--sapBackgroundColor)}.fd-carousel__page-indicator-container--transparent{--fdCarousel_Page_Indicator_Container_Background:transparent}.fd-carousel__page-indicator-container--no-border{border-top-color:transparent}.fd-carousel__page-indicator-container--no-border:first-child{border-bottom-color:transparent;border-top:none}.fd-carousel__page-indicators{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;min-width:9rem;padding-block:.5rem;padding-inline:.5rem}.fd-carousel__page-indicators:after,.fd-carousel__page-indicators:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel__page-indicator{background-color:var(--fdCarousel_Page_Indicator_Background_Color);border:0;border:var(--fdCarousel_Page_Indicator_Border);border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:var(--fdCarousel_Page_Indicator_Size);line-height:normal;list-style-type:none;margin-block:0;margin-inline:0;margin-inline:var(--fdCarousel_Page_Indicator_Margin);max-height:var(--fdCarousel_Page_Indicator_Size);max-width:var(--fdCarousel_Page_Indicator_Size);min-height:var(--fdCarousel_Page_Indicator_Size);min-width:var(--fdCarousel_Page_Indicator_Size);padding-block:0;padding-inline:0;width:var(--fdCarousel_Page_Indicator_Size)}.fd-carousel__page-indicator:after,.fd-carousel__page-indicator:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel__page-indicator--active{--fdCarousel_Page_Indicator_Size:.5rem;--fdCarousel_Page_Indicator_Margin:.25rem;--fdCarousel_Page_Indicator_Border:var(--fdCarousel_Dot_Selected_Border);--fdCarousel_Page_Indicator_Background_Color:var(--fdCarousel_Dot_Selected_Background)}.fd-carousel__text{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapPageFooter_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:normal;margin-block:0;margin-inline:0;overflow:hidden;padding-block:0;padding-inline:0;text-align:center;text-overflow:ellipsis;white-space:nowrap}.fd-carousel__text:after,.fd-carousel__text:before{-webkit-box-sizing:inherit;box-sizing:inherit;font-size:inherit}.fd-carousel .fd-carousel__button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:50%;display:var(--fdCarousel_Button_Display);height:2.125rem;margin-block:.25rem;margin-inline:.25rem;max-height:2.125rem;max-width:2.125rem;min-height:2.125rem;min-width:2.125rem;padding-block:0;padding-inline:0;width:2.125rem}.fd-carousel .fd-carousel__button:before{inset:-.25rem;width:auto}.fd-carousel .fd-carousel__button[dir=rtl]>[class*=sap-icon],[dir=rtl] .fd-carousel .fd-carousel__button>[class*=sap-icon]{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fd-carousel .fd-carousel__button.is-focus,.fd-carousel .fd-carousel__button:focus{z-index:5}.fd-carousel .fd-carousel__button.is-focus:after,.fd-carousel .fd-carousel__button:focus:after{--fdButton_Focus_Border_Radius:50%}.fd-carousel--no-navigation .fd-carousel__button,.fd-carousel--no-navigation.is-hover .fd-carousel__content .fd-carousel__button,.fd-carousel--no-navigation:hover .fd-carousel__content .fd-carousel__button{--fdCarousel_Button_Display:none}.fd-carousel__item fd-busy-indicator{display:block;height:100%;width:100%}\n/*! Bundled license information:\n\nfundamental-styles/dist/carousel.css:\n  (*!\n   * Fundamental Library Styles v0.40.1\n   * Copyright (c) 2025 SAP SE or an SAP affiliate company.\n   * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n   *)\n*/\n"] }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: CarouselService }, { type: i0.NgZone }], propDecorators: { id: [{
                type: Input
            }, {
                type: HostBinding,
                args: ['attr.id']
            }], ariaLabel: [{
                type: Input
            }], ariaLabelledBy: [{
                type: Input
            }], ariaDescribedBy: [{
                type: Input
            }], pageIndicatorsOrientation: [{
                type: Input
            }], height: [{
                type: Input
            }], width: [{
                type: Input
            }], loop: [{
                type: Input
            }], navigation: [{
                type: Input
            }], navigatorInPageIndicator: [{
                type: Input
            }], numericIndicator: [{
                type: Input
            }], pageIndicatorContainer: [{
                type: Input
            }], pageIndicator: [{
                type: Input
            }], resourceStrings: [{
                type: Input
            }], slideTransitionDuration: [{
                type: Input
            }], swipeEnabled: [{
                type: Input
            }], vertical: [{
                type: Input
            }], noPaginationContainerBorder: [{
                type: Input
            }], contentBackground: [{
                type: Input
            }], pageIndicatorBackground: [{
                type: Input
            }], visibleSlidesCount: [{
                type: Input
            }], slideChange: [{
                type: Output
            }], slides: [{
                type: ContentChildren,
                args: [CarouselItemComponent, {
                        descendants: true
                    }]
            }], slideContainer: [{
                type: ViewChild,
                args: ['slideContainer']
            }], carouselContainer: [{
                type: ViewChild,
                args: ['carouselContainer']
            }], handleKeyboardEvent: [{
                type: HostListener,
                args: ['keydown', ['$event']]
            }] } });

class CarouselDirective {
    /** @hidden */
    get carouselService() {
        return this._carouselService;
    }
    /** @hidden */
    constructor(_elementRef, _carouselService) {
        this._elementRef = _elementRef;
        this._carouselService = _carouselService;
        /** Event thrown, when active element is changed */
        this.activeChange = new EventEmitter();
        /** Event thrown when element is dragged. Emits "true" when drag starts and "false" when drag ends. */
        this.dragStateChange = new EventEmitter();
    }
    /** @hidden */
    ngAfterContentInit() {
        this._carouselService.initialise(this.config, this.items, this._elementRef);
        this._carouselService.activeChange$.subscribe((event) => this.activeChange.emit(event));
        this._carouselService.dragStateChange$.subscribe((event) => this.dragStateChange.emit(event));
    }
    /** Change active element */
    goToItem(item, smooth) {
        this._carouselService.goToItem(item, smooth);
    }
    /** Pick previous carousel item */
    pickPrevious() {
        this._carouselService.pickPrevious();
    }
    /** Pick next carousel item */
    pickNext() {
        this._carouselService.pickNext();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CarouselDirective, deps: [{ token: i0.ElementRef }, { token: CarouselService }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: CarouselDirective, isStandalone: true, selector: "[fdCarousel]", inputs: { config: "config", active: "active" }, outputs: { activeChange: "activeChange", dragStateChange: "dragStateChange" }, host: { classAttribute: "fd-carousel_" }, providers: [CarouselService], queries: [{ propertyName: "items", predicate: CarouselItemDirective, descendants: true }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CarouselDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fdCarousel]',
                    host: {
                        class: 'fd-carousel_'
                    },
                    providers: [CarouselService],
                    standalone: true
                }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: CarouselService }], propDecorators: { config: [{
                type: Input
            }], active: [{
                type: Input
            }], activeChange: [{
                type: Output
            }], dragStateChange: [{
                type: Output
            }], items: [{
                type: ContentChildren,
                args: [CarouselItemDirective, { descendants: true }]
            }] } });

/**
 * @deprecated
 * Use direct imports of components and directives.
 */
class CarouselModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: CarouselModule, imports: [CarouselItemDirective, CarouselDirective, CarouselComponent, CarouselItemComponent], exports: [CarouselItemDirective, CarouselDirective, CarouselComponent, CarouselItemComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CarouselModule, providers: [CarouselService], imports: [CarouselComponent, CarouselItemComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CarouselModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [CarouselItemDirective, CarouselDirective, CarouselComponent, CarouselItemComponent],
                    exports: [CarouselItemDirective, CarouselDirective, CarouselComponent, CarouselItemComponent],
                    providers: [CarouselService]
                }]
        }] });

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

export { CarouselComponent, CarouselDirective, CarouselItemComponent, CarouselItemDirective, CarouselModule, CarouselService, DEFAULT_TRANSITION_DURATION, SlideDirection };
//# sourceMappingURL=fundamental-ngx-core-carousel.mjs.map
