import * as i0 from '@angular/core';
import { InjectionToken, Input, Directive, inject, INJECTOR, HostBinding, ContentChild, computed, effect, HostListener, Inject, Injectable, EventEmitter, untracked, booleanAttribute, ViewChild, ViewChildren, ContentChildren, Output, ChangeDetectionStrategy, ViewEncapsulation, Component, Optional, ElementRef, NgModule } from '@angular/core';
import { FocusKeyManager } from '@angular/cdk/a11y';
import { TAB, DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
import { NgTemplateOutlet } from '@angular/common';
import { RtlService, KeyUtil, resizeObservable } from '@fundamental-ngx/cdk/utils';
import { ButtonComponent } from '@fundamental-ngx/core/button';
import { PopoverComponent, PopoverControlComponent, PopoverBodyDirective } from '@fundamental-ngx/core/popover';
import { FdTranslatePipe } from '@fundamental-ngx/i18n';
import { Subscription, Subject, skip, filter, distinctUntilChanged, debounceTime, startWith, first, fromEvent } from 'rxjs';

const FD_OVERFLOW_EXPAND = new InjectionToken('FdOverflowLayoutExpand');

/**
 * Structural directive which is responsible for rendering the "More" button and handling further logic.
 */
class OverflowExpandDirective {
    /** @hidden */
    constructor(templateRef) {
        this.templateRef = templateRef;
    }
    /** @hidden */
    static ngTemplateContextGuard(dir, ctx) {
        return true;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OverflowExpandDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: OverflowExpandDirective, isStandalone: true, selector: "[fdOverflowExpand]", inputs: { fdOverflowExpandItems: "fdOverflowExpandItems" }, providers: [
            {
                provide: FD_OVERFLOW_EXPAND,
                useExisting: OverflowExpandDirective
            }
        ], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OverflowExpandDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fdOverflowExpand]',
                    providers: [
                        {
                            provide: FD_OVERFLOW_EXPAND,
                            useExisting: OverflowExpandDirective
                        }
                    ],
                    standalone: true
                }]
        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { fdOverflowExpandItems: [{
                type: Input
            }] } });

/**
 * Directive to hide component without actual destroying of the component instance.
 */
class OverflowItemContainerRefDirective {
    /**
     * Shows or hides element without destroying the view itself.
     * @param value
     */
    set hidden(value) {
        if (this._hidden === value) {
            return;
        }
        this._hidden = value;
        if (value && !this._detached) {
            this._viewRef = this._viewContainerRef.detach();
            this._detached = true;
        }
        else if (!value && this._viewRef && !this._viewRef.destroyed && this._detached) {
            this._viewRef = this._viewContainerRef.insert(this._viewRef);
            this._detached = false;
        }
    }
    /** @hidden */
    constructor(_templateRef, _viewContainerRef) {
        this._templateRef = _templateRef;
        this._viewContainerRef = _viewContainerRef;
        /** @hidden */
        this._detached = false;
        /** @hidden */
        this._hidden = false;
        // Create embedded view right away and manipulate its visibility later.
        this._viewContainerRef.createEmbeddedView(this._templateRef);
    }
    /** @hidden */
    ngOnDestroy() {
        this._viewRef?.destroy();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OverflowItemContainerRefDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: OverflowItemContainerRefDirective, isStandalone: true, selector: "[fdOverflowItemContainerRef]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OverflowItemContainerRefDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fdOverflowItemContainerRef]',
                    standalone: true
                }]
        }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }] });

const FD_OVERFLOW_ITEM_REF = new InjectionToken('OverflowLayoutItemRef');

/**
 * Structural directive which is used to pass the context of the item to the template engine.
 */
class OverflowItemRefDirective {
    /**
     * Whether the item is hidden.
     */
    set hidden(value) {
        this._hidden = value;
        this.overflowItem.hiddenChange.emit(value);
    }
    get hidden() {
        return this._hidden;
    }
    /** @hidden */
    constructor(templateRef) {
        this.templateRef = templateRef;
        /** @hidden */
        this._hidden = false;
        /** Whether the item is softly hidden. */
        this.softHidden = true;
        /** @hidden */
        this.injector = inject(INJECTOR);
    }
    /** @hidden */
    static ngTemplateContextGuard(dir, ctx) {
        return true;
    }
    /**
     * Sets the element reference of the `fdOverflowLayoutItem` directive.`
     * @param elmRef
     */
    setElementRef(elmRef) {
        if (this.elementRef) {
            return;
        }
        this.elementRef = elmRef;
    }
    /**
     * Sets the `fdOverflowLayoutItem` directive.
     * @param item
     */
    setOverflowItem(item) {
        this.overflowItem = item;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OverflowItemRefDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: OverflowItemRefDirective, isStandalone: true, selector: "[fdOverflowItemRef]", inputs: { item: ["fdOverflowItemRef", "item"] }, providers: [
            {
                provide: FD_OVERFLOW_ITEM_REF,
                useExisting: OverflowItemRefDirective
            }
        ], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OverflowItemRefDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fdOverflowItemRef]',
                    providers: [
                        {
                            provide: FD_OVERFLOW_ITEM_REF,
                            useExisting: OverflowItemRefDirective
                        }
                    ],
                    standalone: true
                }]
        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { item: [{
                type: Input,
                args: ['fdOverflowItemRef']
            }] } });

class OverflowLayoutItemContainerDirective {
    /** @hidden */
    constructor(elementRef) {
        this.elementRef = elementRef;
        /**
         * Whether this item is the first one in the array.
         */
        this.last = false;
        /**
         * Whether this item is the last one in the array.
         */
        this.first = false;
        /**
         * Whether this item is softly hidden. Used during free space calculation without flickering of the items.
         */
        this.softHidden = true;
        /** @hidden */
        this._initialClass = 'fd-overflow-layout__item';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OverflowLayoutItemContainerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: OverflowLayoutItemContainerDirective, isStandalone: true, selector: "[fdOverflowLayoutItemContainer]", inputs: { last: "last", first: "first", softHidden: "softHidden" }, host: { properties: { "class.fd-overflow-layout__item--last": "this.last", "class.fd-overflow-layout__item--first": "this.first", "class.fd-overflow-layout__item--soft-hidden": "this.softHidden", "class": "this._initialClass" } }, queries: [{ propertyName: "containerRef", first: true, predicate: OverflowItemContainerRefDirective, descendants: true }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OverflowLayoutItemContainerDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fdOverflowLayoutItemContainer]',
                    standalone: true
                }]
        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { last: [{
                type: Input
            }, {
                type: HostBinding,
                args: ['class.fd-overflow-layout__item--last']
            }], first: [{
                type: Input
            }, {
                type: HostBinding,
                args: ['class.fd-overflow-layout__item--first']
            }], softHidden: [{
                type: Input
            }, {
                type: HostBinding,
                args: ['class.fd-overflow-layout__item--soft-hidden']
            }], containerRef: [{
                type: ContentChild,
                args: [OverflowItemContainerRefDirective]
            }], _initialClass: [{
                type: HostBinding,
                args: ['class']
            }] } });

const FD_OVERFLOW_CONTAINER = new InjectionToken('FdOverflowContainer');

/**
 * Directive to wrap Overlay Layout "More" popover content.
 * Used to apply keyboard navigation through the items.
 */
class OverflowLayoutPopoverContentDirective {
    /**
     * Array of hidden items.
     */
    set items(value) {
        // Need to set items with a delay so that elementRef of the focusable item would refresh.
        setTimeout(() => {
            this._items = value;
            this._keyboardEventsManager?.destroy();
            this._keyboardEventsManager = new FocusKeyManager(this._items
                .filter((item) => item.overflowItem.focusableItem?.focusable)
                .map((item) => item.overflowItem.focusableItem))
                .withWrap()
                .withHorizontalOrientation(this._dir());
        });
    }
    /** @hidden */
    constructor(_overflowContainer) {
        this._overflowContainer = _overflowContainer;
        /** @hidden */
        this._initialClass = 'fd-overflow-layout__popover-container';
        /** @hidden */
        this._dir = computed(() => (this._rtlService?.rtl() ? 'rtl' : 'ltr'), ...(ngDevMode ? [{ debugName: "_dir" }] : []));
        /** @hidden */
        this._rtlService = inject(RtlService, { optional: true });
        this._overflowContainer?.registerPopoverContent(this);
        effect(() => {
            this._keyboardEventsManager = this._keyboardEventsManager?.withHorizontalOrientation(this._dir());
        });
    }
    /** @hidden */
    keyUpHandler(event) {
        if (KeyUtil.isKeyCode(event, TAB)) {
            const index = this._items.findIndex((item) => item.overflowItem.elmRef.nativeElement === event.target);
            if (index !== -1) {
                this._keyboardEventsManager?.setActiveItem(index);
            }
        }
        if (KeyUtil.isKeyCode(event, [DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW])) {
            event.preventDefault();
            // passing the event to key manager, so we get a change fired
            this._keyboardEventsManager?.onKeydown(event);
        }
    }
    /**
     * Focuses on the first tabbable element inside directive's element.
     */
    focusFirstTabbableElement() {
        this._keyboardEventsManager?.setActiveItem(0);
    }
    /** @hidden */
    ngOnDestroy() {
        this._keyboardEventsManager?.destroy();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OverflowLayoutPopoverContentDirective, deps: [{ token: FD_OVERFLOW_CONTAINER }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: OverflowLayoutPopoverContentDirective, isStandalone: true, selector: "[fdOverflowLayoutPopoverContent]", inputs: { items: "items" }, host: { listeners: { "keyup": "keyUpHandler($event)" }, properties: { "class": "this._initialClass" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OverflowLayoutPopoverContentDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fdOverflowLayoutPopoverContent]',
                    standalone: true
                }]
        }], ctorParameters: () => [{ type: undefined, decorators: [{
                    type: Inject,
                    args: [FD_OVERFLOW_CONTAINER]
                }] }], propDecorators: { items: [{
                type: Input
            }], _initialClass: [{
                type: HostBinding,
                args: ['class']
            }], keyUpHandler: [{
                type: HostListener,
                args: ['keyup', ['$event']]
            }] } });

class OverflowLayoutListeningResult {
    constructor() {
        /** Whether to show more button */
        this.showMore = false;
        /** Overflow item s */
        this.items = [];
        /** Hidden overflow items */
        this.hiddenItems = [];
        /** Visible overflow items */
        this.visibleItems = [];
    }
}
class OverflowLayoutService {
    /**
     * Observable which emits when changes detection is required.
     */
    get detectChanges() {
        return this._detectChanges$.asObservable();
    }
    /**
     * Observable which emits when new calculation result is available.
     */
    get onResult() {
        return this._result$.asObservable();
    }
    /** @hidden */
    constructor(_elRef) {
        this._elRef = _elRef;
        /**
         * Overflow Layout calculation result.
         */
        this.result = new OverflowLayoutListeningResult();
        /** @hidden */
        this._listenToItemResize = true;
        /** @hidden */
        this._subscription = new Subscription();
        /** @hidden */
        this._allItems = [];
        /** @hidden */
        this._hiddenItems = [];
        /** @hidden */
        this._detectChanges$ = new Subject();
        /** @hidden */
        this._result$ = new Subject();
    }
    /** @hidden */
    ngOnDestroy() {
        this._subscription.unsubscribe();
    }
    /** @hidden */
    startListening(config) {
        this.setConfig(config);
        this.fitVisibleItems();
        this._listenToSizeChanges(this._elRef.nativeElement, this.config.itemsWrapper);
    }
    /** @hidden */
    setConfig(config) {
        this.config = config;
    }
    /**
     * Calculates available space for items and hides items that are not fitting into the container.
     */
    fitVisibleItems() {
        this._listenToItemResize = false;
        this._allItems = this.config.items;
        let allItems = [...this.config.items];
        let visibleContainerItems = [...this.config.visibleItems];
        this._elRef.nativeElement.style.height = `${this._elRef.nativeElement.clientHeight}px`;
        allItems.forEach((item, index) => {
            // Softly hide previously completely hidden item in order to correctly calculate it's size.
            item.softHidden = true;
            item.hidden = false;
            item.index = index;
            item.first = index === 0;
            item.last = index === allItems.length - 1;
            item.globalIndex = index;
            visibleContainerItems[index].containerRef.hidden = false;
        });
        this._detectChanges$.next();
        allItems = this.config.direction === 'right' ? allItems : allItems.reverse();
        visibleContainerItems =
            this.config.direction === 'right' ? visibleContainerItems : visibleContainerItems.reverse();
        this.result.showMore = false;
        this._emitResult();
        const containerWidth = this._elRef.nativeElement.getBoundingClientRect().width;
        const itemsContainerWidth = allItems.reduce((total, item) => total + (this._getElementWidth(item.elementRef.nativeElement) || 0), 0);
        if (containerWidth >= itemsContainerWidth &&
            this.config.visibleItems.length <= this.config.maxVisibleItems &&
            this._hiddenItems.length === 0) {
            // Make all items fully visible.
            allItems.forEach((item) => {
                item.softHidden = false;
            });
            this.result.showMore = false;
            this.result.hiddenItems = this._hiddenItems;
            this._emitResult();
            this._listenToItemResize = true;
            this._elRef.nativeElement.style.height = '';
            return;
        }
        this.result.showMore = true;
        this._emitResult();
        let fittingElmCount = 0;
        let fittingElmsWidth = 0;
        let shouldHideItems = false;
        const showMoreContainerWidth = Math.ceil(this.config.showMoreContainer ? this._getElementWidth(this.config.showMoreContainer) : 0);
        let layoutWidth = containerWidth - showMoreContainerWidth;
        // Try to find all forced visible items
        const forcedItemsIndexes = this._getForcedItemsIndexes();
        forcedItemsIndexes.forEach((itemIndex) => {
            const container = this.config.visibleItems[itemIndex];
            if (!container) {
                return;
            }
            const elementSize = this._getElementWidth(container.elementRef.nativeElement);
            layoutWidth -= elementSize;
        });
        const maxVisibleItems = this.config.maxVisibleItems -
            forcedItemsIndexes.filter((index) => index >= this.config.maxVisibleItems).length;
        if (layoutWidth < 0 && forcedItemsIndexes.length > 0) {
            console.warn('There is no enough space to fit all forced visible items into the container. Please adjust their visibility accordingly.');
        }
        this._detectChanges$.next();
        visibleContainerItems.forEach((item, index) => {
            const itemRef = allItems[index];
            // If item is forced to be visible, just display the item since it's size calculation was already taken care of in previous iteration.
            if (itemRef.overflowItem.forceVisibility) {
                return;
            }
            if (shouldHideItems && !itemRef.overflowItem.forceVisibility) {
                item.containerRef.hidden = true;
                item.softHidden = false;
                itemRef.hidden = true;
                return;
            }
            const elementSize = this._getElementWidth(item.elementRef.nativeElement);
            const combinedWidth = fittingElmsWidth + elementSize;
            const condition = (combinedWidth <= layoutWidth ||
                (item === this.config.visibleItems[this.config.visibleItems.length - 1] &&
                    combinedWidth <= layoutWidth + showMoreContainerWidth)) &&
                fittingElmCount < maxVisibleItems;
            if (condition) {
                fittingElmsWidth += elementSize;
                fittingElmCount++;
            }
            else if (!itemRef.overflowItem.forceVisibility) {
                shouldHideItems = true;
                item.softHidden = false;
                item.containerRef.hidden = true;
                itemRef.hidden = true;
            }
        });
        // Reverse original order back.
        allItems = this.config.direction === 'right' ? allItems : allItems.reverse();
        allItems.forEach((item) => {
            item.softHidden = false;
        });
        let hiddenItems = allItems.filter((i) => i.hidden);
        hiddenItems = this.config.reverseHiddenItems ? hiddenItems.reverse() : hiddenItems;
        const visibleItems = allItems.filter((i) => !i.hidden);
        visibleItems.forEach((item, index) => {
            item.index = index;
            item.first = index === 0;
            item.last = index === visibleItems.length - 1;
        });
        this._hiddenItems = hiddenItems.map((item, index) => {
            item.first = index === 0;
            item.last = index === hiddenItems.length - 1;
            item.index = index;
            return item;
        });
        this.result.showMore = this._hiddenItems.length > 0;
        this.result.hiddenItems = this._hiddenItems;
        this._emitResult();
        this._elRef.nativeElement.style.height = '';
        this._listenToItemResize = true;
    }
    /** @hidden */
    _getForcedItemsIndexes() {
        return this._allItems
            .map((item, index) => (item.overflowItem.forceVisibility ? index : -1))
            .filter((i) => i > -1);
    }
    /**
     * @hidden
     * Returns combined width of the element including margins.
     * @param element Element to calculate width of.
     */
    _getElementWidth(element) {
        const elementStyle = getComputedStyle(element);
        const elementWidth = element.getBoundingClientRect().width;
        const elementSize = elementWidth + parseFloat(elementStyle.marginLeft) + parseFloat(elementStyle.marginRight);
        return Math.ceil(elementSize);
    }
    /** @hidden */
    _emitResult() {
        this._result$.next(this.result);
    }
    /** @hidden */
    _listenToSizeChanges(...elements) {
        elements.forEach((element) => this._subscription.add(resizeObservable(element)
            .pipe(skip(1), filter(() => this._listenToItemResize), distinctUntilChanged(), debounceTime(30))
            .subscribe(() => {
            setTimeout(() => {
                this.fitVisibleItems();
            });
        })));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OverflowLayoutService, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OverflowLayoutService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OverflowLayoutService, decorators: [{
            type: Injectable
        }], ctorParameters: () => [{ type: i0.ElementRef }] });

const FD_OVERFLOW_FOCUSABLE_ITEM = new InjectionToken('FdOverflowLayoutFocusableItem');

class OverflowLayoutComponent {
    /**
     * Maximum amount of visible items.
     */
    set maxVisibleItems(value) {
        if (value === this._maxVisibleItems) {
            return;
        }
        this._maxVisibleItems = value;
        this.triggerRecalculation();
    }
    get maxVisibleItems() {
        return this._maxVisibleItems;
    }
    /** @hidden */
    constructor(_elementRef, _ngZone, _cdr, _overflowLayoutService) {
        this._elementRef = _elementRef;
        this._ngZone = _ngZone;
        this._cdr = _cdr;
        this._overflowLayoutService = _overflowLayoutService;
        /**
         * Keyboard event to listen for keyboard navigation through items.
         */
        this.navigationTrigger = 'keyup';
        /** Direction of the fitting items calculation. */
        this.showMorePosition = 'right';
        /** Whether the show more button should be rendered */
        this.renderShowMoreButton = true;
        /** Whether to render hidden items in reverse order. */
        this.reverseHiddenItems = false;
        /** Whether to enable keyboard navigation. */
        this.enableKeyboardNavigation = true;
        /**
         * Event, triggered when amount of visible items has been changed.
         */
        this.visibleItemsCount = new EventEmitter();
        /**
         * Event, triggered when amount of hidden items has been changed.
         */
        this.hiddenItemsCount = new EventEmitter();
        /**
         * Event, triggered when hidden items have been changed.
         */
        this.hiddenItemsChange = new EventEmitter();
        /** @hidden */
        this._initialClass = 'fd-overflow-layout';
        /** @hidden */
        this._allItems = [];
        /** @hidden */
        this._hiddenItems = [];
        /** @hidden */
        this._showMore = false;
        /** @hidden */
        this._subscription = new Subscription();
        /** @hidden */
        this._fillTrigger$ = new Subject();
        /** @hidden */
        this._maxVisibleItems = Infinity;
        /** @hidden */
        this._canListenToResize = false;
        /** @hidden */
        this._dir = 'ltr';
        /** @hidden */
        this._rtl = inject(RtlService, { optional: true });
        /** Overflow Layout more button text */
        this.moreItemsButtonText = (count) => `${count} more`;
        this._subscription.add(this._fillTrigger$.pipe(debounceTime(30)).subscribe(() => {
            this._overflowLayoutService.setConfig(this._config);
            this._overflowLayoutService.fitVisibleItems();
        }));
        // React to RTL changes for keyboard navigation
        effect(() => {
            if (!this._rtl || !this.enableKeyboardNavigation) {
                return;
            }
            const isRtl = this._rtl.rtl();
            this._dir = isRtl ? 'rtl' : 'ltr';
            // Use untracked to avoid tracking _keyboardEventsManager
            untracked(() => {
                this._keyboardEventsManager = this._keyboardEventsManager?.withHorizontalOrientation(this._dir);
            });
        });
    }
    /** @hidden */
    get _config() {
        return {
            visibleItems: this._visibleItems.toArray(),
            items: this._items.toArray(),
            focusableItems: this._focusableOverflowItems.toArray(),
            itemsWrapper: this._itemsWrapper.nativeElement,
            showMoreContainer: this._showMoreContainer?.nativeElement,
            layoutContainerElement: this._layoutContainer.nativeElement,
            maxVisibleItems: this.maxVisibleItems,
            direction: this.showMorePosition,
            enableKeyboardNavigation: this.enableKeyboardNavigation,
            reverseHiddenItems: this.reverseHiddenItems
        };
    }
    /** @hidden */
    ngOnInit() {
        this._setupKeyboardListener();
    }
    /** @hidden */
    ngAfterViewInit() {
        this._subscription.add(this._overflowLayoutService.detectChanges.subscribe(() => {
            this._cdr.detectChanges();
        }));
        this._subscription.add(this._overflowLayoutService.onResult.subscribe((result) => {
            this._hiddenItems = result.hiddenItems;
            this._showMore = result.showMore;
            this.hiddenItemsChange.emit(result.hiddenItems);
            this.hiddenItemsCount.emit(result.hiddenItems.length);
            this.visibleItemsCount.emit(this._allItems.filter((i) => !i.hidden).length);
            this._cdr.detectChanges();
        }));
        this._subscription.add(this._items.changes.pipe(startWith(() => this._items)).subscribe(() => {
            this._allItems = this._items.toArray();
            this._cdr.detectChanges();
            this._overflowLayoutService.setConfig(this._config);
            this._overflowLayoutService.fitVisibleItems();
        }));
        this._setFocusKeyManager();
        // There might be cases when the elements are not rendered yet, but the component is initialized already.
        // It may happen when it's inside the components that are wrapping ng-content with ng-containers and so on.
        // IntersectionObserver is a good solution for this case, but it's hardly manageable when testing.
        this._ngZone.onStable.pipe(first()).subscribe(() => {
            this._overflowLayoutService.startListening(this._config);
            this._canListenToResize = true;
        });
    }
    /** @hidden */
    ngOnDestroy() {
        this._subscription.unsubscribe();
        this._keyboardEventsManager?.destroy();
        this._keyboardEventsManager = null;
    }
    /**
     * Triggers layout recalculation of the items.
     */
    triggerRecalculation() {
        if (!this._canListenToResize) {
            return;
        }
        this._fillTrigger$.next();
    }
    /**
     * Sets current focused element.
     * @param element Element that needs to be focused.
     */
    setFocusedElement(element) {
        const index = this._focusableOverflowItems.toArray().findIndex((item) => item === element);
        if (index !== -1) {
            this._keyboardEventsManager?.setActiveItem(index);
        }
    }
    /**
     * Registers popover content directive for main component.
     * @param content {OverflowPopoverContent} directive
     */
    registerPopoverContent(content) {
        this._overflowPopoverContent = content;
    }
    /** @hidden */
    _onPopoverStateChange(opened) {
        if (opened) {
            this._overflowPopoverContent?.focusFirstTabbableElement();
        }
    }
    /** @hidden */
    _setupKeyboardListener() {
        this._subscription.add(fromEvent(this._elementRef.nativeElement, this.navigationTrigger)
            .pipe(filter(() => this.enableKeyboardNavigation))
            .subscribe((event) => {
            if (KeyUtil.isKeyCode(event, TAB)) {
                const index = this._focusableOverflowItems
                    .toArray()
                    .findIndex((item) => item.focusable && item.elementRef.nativeElement === event.target);
                if (index !== -1) {
                    this._keyboardEventsManager?.setActiveItem(index);
                }
            }
            if (KeyUtil.isKeyCode(event, [DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW])) {
                event.preventDefault();
                // passing the event to key manager so, we get a change fired
                this._keyboardEventsManager?.onKeydown(event);
            }
        }));
    }
    /** @hidden */
    _setFocusKeyManager() {
        if (!this.enableKeyboardNavigation) {
            return;
        }
        this._dir = this._rtl?.rtl() ? 'rtl' : 'ltr';
        this._keyboardEventsManager?.destroy();
        this._keyboardEventsManager = new FocusKeyManager(this._focusableOverflowItems)
            .withWrap()
            .withHorizontalOrientation(this._dir)
            .withVerticalOrientation()
            .skipPredicate((item) => !item.navigable || item.hidden);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OverflowLayoutComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: OverflowLayoutService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: OverflowLayoutComponent, isStandalone: true, selector: "fd-overflow-layout", inputs: { maxVisibleItems: "maxVisibleItems", navigationTrigger: "navigationTrigger", showMorePosition: "showMorePosition", renderShowMoreButton: ["renderShowMoreButton", "renderShowMoreButton", booleanAttribute], reverseHiddenItems: "reverseHiddenItems", enableKeyboardNavigation: "enableKeyboardNavigation", ariaRole: "ariaRole", moreItemsButtonText: "moreItemsButtonText" }, outputs: { visibleItemsCount: "visibleItemsCount", hiddenItemsCount: "hiddenItemsCount", hiddenItemsChange: "hiddenItemsChange" }, host: { properties: { "class": "this._initialClass" } }, providers: [
            {
                provide: FD_OVERFLOW_CONTAINER,
                useExisting: OverflowLayoutComponent
            },
            OverflowLayoutService
        ], queries: [{ propertyName: "_moreButton", first: true, predicate: FD_OVERFLOW_EXPAND, descendants: true }, { propertyName: "_items", predicate: FD_OVERFLOW_ITEM_REF, descendants: true }, { propertyName: "_focusableOverflowItems", predicate: FD_OVERFLOW_FOCUSABLE_ITEM, descendants: true }], viewQueries: [{ propertyName: "_itemsWrapper", first: true, predicate: ["itemsWrapper"], descendants: true }, { propertyName: "_layoutContainer", first: true, predicate: ["layoutContainer"], descendants: true }, { propertyName: "_showMoreContainer", first: true, predicate: ["showMoreContainer"], descendants: true }, { propertyName: "_visibleItems", predicate: OverflowLayoutItemContainerDirective, descendants: true }], ngImport: i0, template: "@if (renderShowMoreButton && showMorePosition === 'left') {\n    <ng-template [ngTemplateOutlet]=\"showMore\"></ng-template>\n}\n<div class=\"fd-overflow-layout__items-container\" #layoutContainer>\n    <div class=\"fd-overflow-layout__items-wrapper\">\n        <div class=\"fd-overflow-layout__items\" #itemsWrapper [attr.role]=\"ariaRole\">\n            @for (item of _allItems; track item.templateRef) {\n                <div\n                    fdOverflowLayoutItemContainer\n                    [first]=\"item.first\"\n                    [last]=\"item.last\"\n                    [softHidden]=\"item.softHidden\"\n                    [attr.role]=\"ariaRole === 'list' ? 'listitem' : null\"\n                >\n                    <ng-container *fdOverflowItemContainerRef>\n                        <ng-template\n                            [ngTemplateOutlet]=\"item.templateRef\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: item.hidden,\n                                index: item.index,\n                                first: item.first,\n                                last: item.last,\n                                globalIndex: item.globalIndex,\n                                injector: item.injector\n                            }\"\n                        ></ng-template>\n                    </ng-container>\n                </div>\n            }\n        </div>\n    </div>\n</div>\n@if (renderShowMoreButton && showMorePosition === 'right') {\n    <ng-template [ngTemplateOutlet]=\"showMore\"></ng-template>\n}\n<ng-template #showMore>\n    <div class=\"fd-overflow-layout__more\" [style.display]=\"_showMore ? 'block' : 'none'\" #showMoreContainer>\n        <ng-template #defaultShowMore>\n            <fd-popover\n                (isOpenChange)=\"_onPopoverStateChange($event)\"\n                placement=\"bottom\"\n                [focusTrapped]=\"true\"\n                [focusAutoCapture]=\"true\"\n                [maxWidth]=\"312\"\n            >\n                <fd-popover-control>\n                    <button fd-button [fdMenu]=\"true\" fdType=\"transparent\">\n                        {{ 'coreOverflowLayout.moreItemsButton' | fdTranslate: { count: _hiddenItems.length } }}\n                    </button>\n                </fd-popover-control>\n                <ng-template fdPopoverBody>\n                    <div fdOverflowLayoutPopoverContent [items]=\"_hiddenItems\">\n                        @for (item of _hiddenItems; track item) {\n                            <ng-template\n                                [ngTemplateOutlet]=\"item.templateRef\"\n                                [ngTemplateOutletContext]=\"{\n                                    $implicit: item.hidden,\n                                    index: item.index,\n                                    first: item.first,\n                                    last: item.last,\n                                    globalIndex: item.globalIndex,\n                                    injector: item.injector\n                                }\"\n                            ></ng-template>\n                        }\n                    </div>\n                </ng-template>\n            </fd-popover>\n        </ng-template>\n        <ng-template\n            [ngTemplateOutlet]=\"_moreButton?.templateRef || defaultShowMore\"\n            [ngTemplateOutletContext]=\"{ $implicit: _hiddenItems }\"\n        ></ng-template>\n    </div>\n</ng-template>\n", styles: [".fd-overflow-layout{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-overflow-layout:before,.fd-overflow-layout:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout{display:flex;align-items:center;width:100%;justify-content:space-between}.fd-overflow-layout__items{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-overflow-layout__items:before,.fd-overflow-layout__items:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout__items{display:flex;align-items:center;display:inline-flex}.fd-overflow-layout__more{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-overflow-layout__more:before,.fd-overflow-layout__more:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout__more{display:flex;align-items:center;flex-shrink:0}.fd-overflow-layout__items-container{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-overflow-layout__items-container:before,.fd-overflow-layout__items-container:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout__items-container{position:relative}.fd-overflow-layout__items-wrapper{display:inline-flex}.fd-overflow-layout__popover-container{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-overflow-layout__popover-container:before,.fd-overflow-layout__popover-container:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout__popover-container{display:block;white-space:normal}.fd-overflow-layout__item--soft-hidden{opacity:0!important;position:absolute!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: OverflowLayoutItemContainerDirective, selector: "[fdOverflowLayoutItemContainer]", inputs: ["last", "first", "softHidden"] }, { kind: "directive", type: OverflowItemContainerRefDirective, selector: "[fdOverflowItemContainerRef]" }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["config", "title", "trigger", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll", "placement", "maxWidth", "fillControlMode", "closeOnOutsideClick", "closeOnEscapeKey", "disabled", "triggers", "focusTrapped", "focusAutoCapture", "restoreFocusOnClose", "noArrow", "disableScrollbar", "appendTo", "placementContainer", "scrollStrategy", "cdkPositions", "applyOverlay", "additionalBodyClass", "additionalTriggerClass", "closeOnNavigation", "fixedPosition", "resizable", "isOpen"], outputs: ["triggerChange", "isOpenChange", "beforeOpen"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "directive", type: PopoverBodyDirective, selector: "[fdPopoverBody]" }, { kind: "directive", type: OverflowLayoutPopoverContentDirective, selector: "[fdOverflowLayoutPopoverContent]", inputs: ["items"] }, { 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: OverflowLayoutComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fd-overflow-layout', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                        {
                            provide: FD_OVERFLOW_CONTAINER,
                            useExisting: OverflowLayoutComponent
                        },
                        OverflowLayoutService
                    ], imports: [
                        NgTemplateOutlet,
                        OverflowLayoutItemContainerDirective,
                        OverflowItemContainerRefDirective,
                        PopoverComponent,
                        PopoverControlComponent,
                        ButtonComponent,
                        PopoverBodyDirective,
                        OverflowLayoutPopoverContentDirective,
                        FdTranslatePipe
                    ], template: "@if (renderShowMoreButton && showMorePosition === 'left') {\n    <ng-template [ngTemplateOutlet]=\"showMore\"></ng-template>\n}\n<div class=\"fd-overflow-layout__items-container\" #layoutContainer>\n    <div class=\"fd-overflow-layout__items-wrapper\">\n        <div class=\"fd-overflow-layout__items\" #itemsWrapper [attr.role]=\"ariaRole\">\n            @for (item of _allItems; track item.templateRef) {\n                <div\n                    fdOverflowLayoutItemContainer\n                    [first]=\"item.first\"\n                    [last]=\"item.last\"\n                    [softHidden]=\"item.softHidden\"\n                    [attr.role]=\"ariaRole === 'list' ? 'listitem' : null\"\n                >\n                    <ng-container *fdOverflowItemContainerRef>\n                        <ng-template\n                            [ngTemplateOutlet]=\"item.templateRef\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: item.hidden,\n                                index: item.index,\n                                first: item.first,\n                                last: item.last,\n                                globalIndex: item.globalIndex,\n                                injector: item.injector\n                            }\"\n                        ></ng-template>\n                    </ng-container>\n                </div>\n            }\n        </div>\n    </div>\n</div>\n@if (renderShowMoreButton && showMorePosition === 'right') {\n    <ng-template [ngTemplateOutlet]=\"showMore\"></ng-template>\n}\n<ng-template #showMore>\n    <div class=\"fd-overflow-layout__more\" [style.display]=\"_showMore ? 'block' : 'none'\" #showMoreContainer>\n        <ng-template #defaultShowMore>\n            <fd-popover\n                (isOpenChange)=\"_onPopoverStateChange($event)\"\n                placement=\"bottom\"\n                [focusTrapped]=\"true\"\n                [focusAutoCapture]=\"true\"\n                [maxWidth]=\"312\"\n            >\n                <fd-popover-control>\n                    <button fd-button [fdMenu]=\"true\" fdType=\"transparent\">\n                        {{ 'coreOverflowLayout.moreItemsButton' | fdTranslate: { count: _hiddenItems.length } }}\n                    </button>\n                </fd-popover-control>\n                <ng-template fdPopoverBody>\n                    <div fdOverflowLayoutPopoverContent [items]=\"_hiddenItems\">\n                        @for (item of _hiddenItems; track item) {\n                            <ng-template\n                                [ngTemplateOutlet]=\"item.templateRef\"\n                                [ngTemplateOutletContext]=\"{\n                                    $implicit: item.hidden,\n                                    index: item.index,\n                                    first: item.first,\n                                    last: item.last,\n                                    globalIndex: item.globalIndex,\n                                    injector: item.injector\n                                }\"\n                            ></ng-template>\n                        }\n                    </div>\n                </ng-template>\n            </fd-popover>\n        </ng-template>\n        <ng-template\n            [ngTemplateOutlet]=\"_moreButton?.templateRef || defaultShowMore\"\n            [ngTemplateOutletContext]=\"{ $implicit: _hiddenItems }\"\n        ></ng-template>\n    </div>\n</ng-template>\n", styles: [".fd-overflow-layout{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-overflow-layout:before,.fd-overflow-layout:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout{display:flex;align-items:center;width:100%;justify-content:space-between}.fd-overflow-layout__items{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-overflow-layout__items:before,.fd-overflow-layout__items:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout__items{display:flex;align-items:center;display:inline-flex}.fd-overflow-layout__more{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-overflow-layout__more:before,.fd-overflow-layout__more:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout__more{display:flex;align-items:center;flex-shrink:0}.fd-overflow-layout__items-container{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-overflow-layout__items-container:before,.fd-overflow-layout__items-container:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout__items-container{position:relative}.fd-overflow-layout__items-wrapper{display:inline-flex}.fd-overflow-layout__popover-container{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0}.fd-overflow-layout__popover-container:before,.fd-overflow-layout__popover-container:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout__popover-container{display:block;white-space:normal}.fd-overflow-layout__item--soft-hidden{opacity:0!important;position:absolute!important}\n"] }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: OverflowLayoutService }], propDecorators: { maxVisibleItems: [{
                type: Input
            }], navigationTrigger: [{
                type: Input
            }], showMorePosition: [{
                type: Input
            }], renderShowMoreButton: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], reverseHiddenItems: [{
                type: Input
            }], enableKeyboardNavigation: [{
                type: Input
            }], ariaRole: [{
                type: Input
            }], visibleItemsCount: [{
                type: Output
            }], hiddenItemsCount: [{
                type: Output
            }], hiddenItemsChange: [{
                type: Output
            }], _items: [{
                type: ContentChildren,
                args: [FD_OVERFLOW_ITEM_REF, { descendants: true }]
            }], _moreButton: [{
                type: ContentChild,
                args: [FD_OVERFLOW_EXPAND]
            }], _focusableOverflowItems: [{
                type: ContentChildren,
                args: [FD_OVERFLOW_FOCUSABLE_ITEM, { descendants: true }]
            }], _visibleItems: [{
                type: ViewChildren,
                args: [OverflowLayoutItemContainerDirective]
            }], _itemsWrapper: [{
                type: ViewChild,
                args: ['itemsWrapper']
            }], _layoutContainer: [{
                type: ViewChild,
                args: ['layoutContainer']
            }], _showMoreContainer: [{
                type: ViewChild,
                args: ['showMoreContainer']
            }], _initialClass: [{
                type: HostBinding,
                args: ['class']
            }], moreItemsButtonText: [{
                type: Input
            }] } });

const FD_OVERFLOW_ITEM = new InjectionToken('FdOverflowItem');

class OverflowLayoutFocusableItemDirective {
    /** @hidden */
    get _tabindex() {
        return this.focusable ? 0 : -1;
    }
    /** Whether the item is hidden. */
    get hidden() {
        return !!this._overflowItem?.hidden;
    }
    /** @hidden */
    constructor(_overflowContainer, _overflowItem, elementRef) {
        this._overflowContainer = _overflowContainer;
        this._overflowItem = _overflowItem;
        this.elementRef = elementRef;
        /** Whether the item should be focusable. */
        this.focusable = true;
        /** Whether the item should be navigable via keyboard. */
        this.navigable = true;
    }
    /** @hidden */
    _onFocus() {
        this._overflowContainer.setFocusedElement(this);
    }
    /** @hidden */
    ngOnInit() {
        if (this._overflowItem) {
            this._overflowItem.focusableItem = this;
        }
    }
    /** @hidden */
    focus() {
        this.elementRef.nativeElement.focus();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OverflowLayoutFocusableItemDirective, deps: [{ token: OverflowLayoutComponent }, { token: FD_OVERFLOW_ITEM, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: OverflowLayoutFocusableItemDirective, isStandalone: true, selector: "[fdOverflowLayoutFocusableItem], [fdOverflowLayoutItem][focusable]", inputs: { focusable: "focusable", navigable: "navigable" }, host: { listeners: { "focus": "_onFocus()" }, properties: { "attr.tabindex": "this._tabindex" } }, providers: [
            {
                provide: FD_OVERFLOW_FOCUSABLE_ITEM,
                useExisting: OverflowLayoutFocusableItemDirective
            }
        ], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OverflowLayoutFocusableItemDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fdOverflowLayoutFocusableItem], [fdOverflowLayoutItem][focusable]',
                    providers: [
                        {
                            provide: FD_OVERFLOW_FOCUSABLE_ITEM,
                            useExisting: OverflowLayoutFocusableItemDirective
                        }
                    ],
                    standalone: true
                }]
        }], ctorParameters: () => [{ type: OverflowLayoutComponent }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [FD_OVERFLOW_ITEM]
                }, {
                    type: Optional
                }] }, { type: i0.ElementRef }], propDecorators: { focusable: [{
                type: Input
            }], navigable: [{
                type: Input
            }], _tabindex: [{
                type: HostBinding,
                args: ['attr.tabindex']
            }], _onFocus: [{
                type: HostListener,
                args: ['focus']
            }] } });

/**
 * Directive to mark element as part of for Overflow Layout Component items.
 */
class OverflowLayoutItemDirective {
    constructor() {
        /**
         * Event emitted when `hidden` property has been changed.
         */
        this.hiddenChange = new EventEmitter();
        /** Reference to the element */
        this.elmRef = inject(ElementRef);
        /** @hidden */
        this._overflowItemRef = inject(FD_OVERFLOW_ITEM_REF, {
            optional: true,
            skipSelf: true
        });
        /** @hidden */
        this._forceVisibility = false;
        /** @hidden */
        this._overflowContainer = inject(OverflowLayoutComponent);
    }
    /** Whether to force the visibility of the item. */
    set forceVisibility(value) {
        if (value === this._forceVisibility) {
            return;
        }
        this._forceVisibility = value;
        this._overflowContainer.triggerRecalculation();
    }
    get forceVisibility() {
        return this._forceVisibility;
    }
    /**
     * Whether the item is hidden.
     */
    set hidden(value) {
        this.hiddenChange.emit(value);
    }
    get hidden() {
        return this._overflowItemRef?.hidden === true;
    }
    /** @hidden */
    ngOnInit() {
        this._overflowItemRef?.setElementRef(this.elmRef);
        this._overflowItemRef?.setOverflowItem(this);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OverflowLayoutItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: OverflowLayoutItemDirective, isStandalone: true, selector: "[fdOverflowLayoutItem]", inputs: { forceVisibility: "forceVisibility" }, outputs: { hiddenChange: "hiddenChange" }, providers: [
            {
                provide: FD_OVERFLOW_ITEM,
                useExisting: OverflowLayoutItemDirective
            }
        ], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OverflowLayoutItemDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[fdOverflowLayoutItem]',
                    providers: [
                        {
                            provide: FD_OVERFLOW_ITEM,
                            useExisting: OverflowLayoutItemDirective
                        }
                    ],
                    standalone: true
                }]
        }], propDecorators: { forceVisibility: [{
                type: Input
            }], hiddenChange: [{
                type: Output
            }] } });

/**
 * @deprecated
 * Use direct imports of OverflowLayoutComponent,
        OverflowItemRefDirective,
        OverflowExpandDirective,
        OverflowLayoutItemDirective,
        OverflowItemContainerRefDirective,
        OverflowLayoutPopoverContentDirective,
        OverflowLayoutItemContainerDirective,
        OverflowLayoutFocusableItemDirective
 */
class OverflowLayoutModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OverflowLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: OverflowLayoutModule, imports: [OverflowLayoutComponent,
            OverflowItemRefDirective,
            OverflowExpandDirective,
            OverflowLayoutItemDirective,
            OverflowItemContainerRefDirective,
            OverflowLayoutPopoverContentDirective,
            OverflowLayoutItemContainerDirective,
            OverflowLayoutFocusableItemDirective], exports: [OverflowLayoutComponent,
            OverflowItemRefDirective,
            OverflowExpandDirective,
            OverflowLayoutItemDirective,
            OverflowItemContainerRefDirective,
            OverflowLayoutPopoverContentDirective,
            OverflowLayoutItemContainerDirective,
            OverflowLayoutFocusableItemDirective] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OverflowLayoutModule, imports: [OverflowLayoutComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: OverflowLayoutModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        OverflowLayoutComponent,
                        OverflowItemRefDirective,
                        OverflowExpandDirective,
                        OverflowLayoutItemDirective,
                        OverflowItemContainerRefDirective,
                        OverflowLayoutPopoverContentDirective,
                        OverflowLayoutItemContainerDirective,
                        OverflowLayoutFocusableItemDirective
                    ],
                    exports: [
                        OverflowLayoutComponent,
                        OverflowItemRefDirective,
                        OverflowExpandDirective,
                        OverflowLayoutItemDirective,
                        OverflowItemContainerRefDirective,
                        OverflowLayoutPopoverContentDirective,
                        OverflowLayoutItemContainerDirective,
                        OverflowLayoutFocusableItemDirective
                    ]
                }]
        }] });

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

export { FD_OVERFLOW_CONTAINER, FD_OVERFLOW_EXPAND, FD_OVERFLOW_ITEM, FD_OVERFLOW_ITEM_REF, OverflowExpandDirective, OverflowItemContainerRefDirective, OverflowItemRefDirective, OverflowLayoutComponent, OverflowLayoutFocusableItemDirective, OverflowLayoutItemContainerDirective, OverflowLayoutItemDirective, OverflowLayoutListeningResult, OverflowLayoutModule, OverflowLayoutPopoverContentDirective, OverflowLayoutService };
//# sourceMappingURL=fundamental-ngx-core-overflow-layout.mjs.map
