@fundamental-ngx/core 0.35.3 → 0.35.4-rc.2

package/breadcrumb/fesm2015/fundamental-ngx-core-breadcrumb.mjs

@@ -1,17 +1,20 @@
 import * as i0 from '@angular/core';
-import { Component, ContentChild, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Optional, ContentChildren, ViewChild, Input, Directive, NgModule } from '@angular/core';
-import * as i5 from '@angular/common';
+import { Component, ViewEncapsulation, ChangeDetectionStrategy, ContentChild, forwardRef, EventEmitter, isDevMode, Optional, Input, Output, ContentChildren, ViewChild, Directive, NgModule } from '@angular/core';
+import * as i6 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3 from '@fundamental-ngx/core/link';
-import { LinkComponent, LinkModule } from '@fundamental-ngx/core/link';
-import * as i6 from '@angular/cdk/portal';
+import { ButtonModule } from '@fundamental-ngx/core/button';
+import * as i2 from '@fundamental-ngx/core/overflow-layout';
+import { OverflowLayoutComponent, OverflowLayoutModule } from '@fundamental-ngx/core/overflow-layout';
+import * as i7 from '@angular/cdk/portal';
 import { DomPortal, PortalModule } from '@angular/cdk/portal';
-import { BehaviorSubject, Subscription, startWith, map, tap, firstValueFrom, debounceTime } from 'rxjs';
-import * as i2 from '@fundamental-ngx/core/menu';
-import { MenuComponent, MenuModule } from '@fundamental-ngx/core/menu';
+import * as i4 from '@fundamental-ngx/core/link';
+import { LinkComponent, LinkModule } from '@fundamental-ngx/core/link';
 import * as i1 from '@fundamental-ngx/core/utils';
-import { PipeModule } from '@fundamental-ngx/core/utils';
-import * as i4 from '@fundamental-ngx/core/icon';
+import { DestroyedService, PipeModule } from '@fundamental-ngx/core/utils';
+import { BehaviorSubject, takeUntil } from 'rxjs';
+import * as i3 from '@fundamental-ngx/core/menu';
+import { MenuComponent, MenuModule } from '@fundamental-ngx/core/menu';
+import * as i5 from '@fundamental-ngx/core/icon';
 import { IconModule } from '@fundamental-ngx/core/icon';
 import { PopoverModule } from '@fundamental-ngx/core/popover';
 import { DeprecatedCompactDirective, CONTENT_DENSITY_DIRECTIVE, ContentDensityModule } from '@fundamental-ngx/core/content-density';
@@ -26,47 +29,69 @@ import { DeprecatedCompactDirective, CONTENT_DENSITY_DIRECTIVE, ContentDensityMo
  * ```
  */
 class BreadcrumbItemComponent {
-    constructor(_elementRef, renderer2, _cdR) {
-        this._elementRef = _elementRef;
-        this.renderer2 = renderer2;
-        this._cdR = _cdR;
-        this.show = () => this.renderer2.setStyle(this._elementRef.nativeElement, 'display', 'inline-block');
-        this.hide = () => this.renderer2.setStyle(this._elementRef.nativeElement, 'display', 'none');
-    }
     /** @hidden */
-    get elementRef() {
-        return this._elementRef;
-    }
-    /** @hidden */
-    get width() {
-        return this._elementRef.nativeElement.getBoundingClientRect().width;
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        /** @hidden */
+        this._attached = false;
     }
     /** @hidden */
-    get needsClickProxy() {
+    get _needsClickProxy() {
         var _a;
         return (!!((_a = this.breadcrumbLink) === null || _a === void 0 ? void 0 : _a.elementRef().nativeElement.getAttribute('href')) || !!this.breadcrumbLink.routerLink);
     }
     /** @hidden */
     ngAfterViewInit() {
-        if (this.breadcrumbLink) {
+        this._attach();
+    }
+    /**
+     * Sets breadcrumb item dom portal.
+     */
+    setPortal() {
+        if (!this.portal) {
+            this.portal = new DomPortal(this.elementRef);
+        }
+    }
+    /** @hidden */
+    _detach() {
+        var _a, _b, _c, _d;
+        if (!this._attached) {
+            return;
+        }
+        if ((_a = this.linkContentPortal) === null || _a === void 0 ? void 0 : _a.isAttached) {
+            (_b = this.linkContentPortal) === null || _b === void 0 ? void 0 : _b.detach();
+        }
+        if ((_c = this.breadcrumbItemPortal) === null || _c === void 0 ? void 0 : _c.isAttached) {
+            (_d = this.breadcrumbItemPortal) === null || _d === void 0 ? void 0 : _d.detach();
+        }
+        this._attached = false;
+    }
+    /** @hidden */
+    _attach() {
+        if (this._attached) {
+            return;
+        }
+        if (this.breadcrumbLink && this.breadcrumbLink.contentSpan) {
             this.linkContentPortal = new DomPortal(this.breadcrumbLink.contentSpan.nativeElement);
         }
         this.breadcrumbItemPortal = new DomPortal(this.elementRef.nativeElement.firstElementChild);
-        this._cdR.detectChanges();
+        this._attached = true;
     }
 }
-BreadcrumbItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: BreadcrumbItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-BreadcrumbItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: BreadcrumbItemComponent, selector: "fd-breadcrumb-item", host: { classAttribute: "fd-breadcrumb__item" }, queries: [{ propertyName: "breadcrumbLink", first: true, predicate: i0.forwardRef(function () { return LinkComponent; }), descendants: true }], ngImport: i0, template: '<div style="display: inline"><ng-content></ng-content></div>', isInline: true });
+BreadcrumbItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: BreadcrumbItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+BreadcrumbItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: BreadcrumbItemComponent, selector: "fd-breadcrumb-item", host: { classAttribute: "fd-breadcrumb__item" }, queries: [{ propertyName: "breadcrumbLink", first: true, predicate: i0.forwardRef(function () { return LinkComponent; }), descendants: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: BreadcrumbItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'fd-breadcrumb-item',
-                    template: '<div style="display: inline"><ng-content></ng-content></div>',
+                    template: '<ng-content></ng-content>',
                     host: {
                         class: 'fd-breadcrumb__item'
-                    }
+                    },
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { breadcrumbLink: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { breadcrumbLink: [{
                 type: ContentChild,
                 args: [forwardRef(() => LinkComponent)]
             }] } });
@@ -83,85 +108,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
  * ```
  */
 class BreadcrumbComponent {
-    constructor(elementRef, _rtlService, _cdRef, _resizeObserver, _ngZone) {
+    /** @hidden */
+    constructor(elementRef, _onDestroy$, _rtlService, _cdr) {
         this.elementRef = elementRef;
+        this._onDestroy$ = _onDestroy$;
         this._rtlService = _rtlService;
-        this._cdRef = _cdRef;
-        this._resizeObserver = _resizeObserver;
-        this._ngZone = _ngZone;
-        /** @hidden */
-        this._collapsedBreadcrumbItems = [];
-        /** @hidden */
-        this._placement$ = new BehaviorSubject('bottom-start');
+        this._cdr = _cdr;
         /** Whether to append items to the overflow dropdown in reverse order. Default is true. */
         this.reverse = false;
+        /**
+         * Event emitted when visible items count is changed.
+         */
+        this.visibleItemsCount = new EventEmitter();
+        /**
+         * Event emitted when hidden items count is changed.
+         */
+        this.hiddenItemsCount = new EventEmitter();
+        /**
+         * @hidden
+         * Array of breadcrumb items.
+         */
+        this._items = [];
         /** @hidden */
-        this._subscriptions = new Subscription();
-        /** @hidden */
-        this._itemToSize = new Map();
+        this._placement$ = new BehaviorSubject('bottom-start');
     }
-    /** @hidden */
-    ngOnInit() {
-        if (this._rtlService) {
-            this._subscriptions.add(this._rtlService.rtl.subscribe((value) => this._placement$.next(value ? 'bottom-end' : 'bottom-start')));
+    /**
+     * @deprecated
+     * Breadcrumbs component now uses more advanced calculation mechanism without the need of specifying the container element.
+     *
+     * The element to act as the breadcrumb container. When provided, the breadcrumb's responsive collapsing behavior
+     * performs better. When not provided, the immediate parent element's width will be used.
+     */
+    set containerElement(_) {
+        if (isDevMode()) {
+            console.warn('Breadcrumbs component now uses more advanced calculation mechanism without the need of specifying the container element.');
         }
     }
     /** @hidden */
-    ngAfterViewInit() {
-        this._subscriptions.add(this._breadcrumbItems.changes
-            .pipe(startWith(this._breadcrumbItems), map((items) => items.toArray()), map((items) => items.map((item) => [item, item.width])), tap((itemToSize) => (this._itemToSize = new Map(itemToSize))))
-            .subscribe());
-        firstValueFrom(this._ngZone.onStable).then(() => {
-            this._subscriptions.add(this._resizeObserver
-                .observe(this.containerElement || this.elementRef.nativeElement.parentElement)
-                // Add small delay for performance reasons.
-                .pipe(debounceTime(30))
-                .subscribe(() => this.onResize()));
-        });
+    ngOnInit() {
+        var _a;
+        (_a = this._rtlService) === null || _a === void 0 ? void 0 : _a.rtl.pipe(takeUntil(this._onDestroy$)).subscribe((value) => this._placement$.next(value ? 'bottom-end' : 'bottom-start'));
     }
     /** @hidden */
-    ngOnDestroy() {
-        this._subscriptions.unsubscribe();
-    }
-    /**
-     * Callback function when breadcrumbs container has been resized.
-     */
     onResize() {
-        if (!this.elementRef.nativeElement.parentElement) {
-            return;
-        }
-        this._containerBoundary = this.elementRef.nativeElement.parentElement.getBoundingClientRect().width;
-        if (this.containerElement) {
-            this._containerBoundary = this.containerElement.getBoundingClientRect().width;
-        }
-        if (this._overflowContainer) {
-            this._containerBoundary -= this._overflowContainer.nativeElement.getBoundingClientRect().width;
-        }
-        let visibleSum = 0;
-        const breadcrumbItemComponents = this._breadcrumbItems.toArray();
-        let i;
-        for (i = breadcrumbItemComponents.length - 1; i >= 0; i--) {
-            const breadcrumbItem = breadcrumbItemComponents[i];
-            const itemSize = this._itemToSize.has(breadcrumbItem)
-                ? this._itemToSize.get(breadcrumbItem)
-                : breadcrumbItem.width;
-            if (visibleSum + itemSize <= this._containerBoundary) {
-                visibleSum += itemSize;
-                breadcrumbItem.show();
-            }
-            else {
-                break;
-            }
-        }
-        const collapsedBreadcrumbItems = breadcrumbItemComponents.slice(0, ++i);
-        this._collapsedBreadcrumbItems = this.reverse ? collapsedBreadcrumbItems : collapsedBreadcrumbItems.reverse();
-        this._collapsedBreadcrumbItems.forEach((item) => item.hide());
-        this._cdRef.detectChanges();
-    }
-    /** @hidden */
-    _keyDownHandle(event) {
-        this._menuComponent.toggle();
-        event.preventDefault();
+        this._overflowLayout.triggerRecalculation();
     }
     /**
      * We catch interactions with item, Enter, Space, Mouse click and Touch click,
@@ -173,31 +163,68 @@ class BreadcrumbComponent {
             breadcrumbItem.breadcrumbLink.elementRef().nativeElement.click();
         }
     }
+    /** @hidden */
+    ngAfterViewInit() {
+        this._setItems();
+        this._contentItems.changes.subscribe(() => this._setItems());
+    }
+    /** @hidden */
+    _keyDownHandle(event) {
+        this._menuComponent.toggle();
+        event.preventDefault();
+    }
+    /** @hidden */
+    _onHiddenChange(isHidden, breadcrumb) {
+        if (!isHidden) {
+            breadcrumb._detach();
+        }
+        else {
+            breadcrumb._attach();
+        }
+    }
+    /** @hidden */
+    _onVisibleItemsCountChange(visibleItemsCount) {
+        this.visibleItemsCount.emit(visibleItemsCount);
+    }
+    /** @hidden */
+    _onHiddenItemsCountChange(hiddenItemsCount) {
+        this.hiddenItemsCount.emit(hiddenItemsCount);
+    }
+    /** @hidden */
+    _setItems() {
+        this._contentItems.forEach((item) => item.setPortal());
+        this._items = this._contentItems.toArray();
+        this._cdr.detectChanges();
+    }
 }
-BreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: i0.ElementRef }, { token: i1.RtlService, optional: true }, { token: i0.ChangeDetectorRef }, { token: i1.ResizeObserverService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-BreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: BreadcrumbComponent, selector: "fd-breadcrumb", inputs: { containerElement: "containerElement", reverse: "reverse" }, host: { classAttribute: "fd-breadcrumb" }, queries: [{ propertyName: "_breadcrumbItems", predicate: i0.forwardRef(function () { return BreadcrumbItemComponent; }) }], viewQueries: [{ propertyName: "_menuComponent", first: true, predicate: MenuComponent, descendants: true }, { propertyName: "_overflowContainer", first: true, predicate: ["overflowBreadcrumbsContainer"], descendants: true }], ngImport: i0, template: "<fd-menu #menu [closeOnEscapeKey]=\"true\" [focusAutoCapture]=\"true\" [placement]=\"_placement$ | async\">\n    <ng-container *ngFor=\"let breadcrumbItem of _collapsedBreadcrumbItems\">\n        <li fd-menu-item [disabled]=\"breadcrumbItem.breadcrumbLink ? breadcrumbItem.breadcrumbLink.disabled : false\">\n            <a\n                fd-menu-interactive\n                (click)=\"itemClicked(breadcrumbItem, $event)\"\n                (keydown.enter)=\"itemClicked(breadcrumbItem, $event)\"\n                (keydown.space)=\"itemClicked(breadcrumbItem, $event)\"\n            >\n                <ng-container *ngIf=\"breadcrumbItem?.breadcrumbLink; else portalContent\">\n                    <ng-container *ngIf=\"breadcrumbItem.breadcrumbLink._prefixIconName\">\n                        <fd-menu-addon\n                            position=\"before\"\n                            [glyph]=\"breadcrumbItem.breadcrumbLink._prefixIconName\"\n                        ></fd-menu-addon>\n                    </ng-container>\n                    <span fd-menu-title>\n                        <ng-container [cdkPortalOutlet]=\"breadcrumbItem.linkContentPortal\"></ng-container>\n                    </span>\n                    <ng-container *ngIf=\"breadcrumbItem.breadcrumbLink._postfixIconName\">\n                        <fd-menu-addon [glyph]=\"breadcrumbItem.breadcrumbLink._postfixIconName\"></fd-menu-addon>\n                    </ng-container>\n                </ng-container>\n                <ng-template #portalContent>\n                    <span fd-menu-title>\n                        <ng-container [cdkPortalOutlet]=\"breadcrumbItem.breadcrumbItemPortal\"></ng-container>\n                    </span>\n                </ng-template>\n            </a>\n        </li>\n    </ng-container>\n</fd-menu>\n\n<span\n    class=\"fd-breadcrumb__item\"\n    *ngIf=\"_collapsedBreadcrumbItems.length\"\n    [fdMenuTrigger]=\"menu\"\n    #overflowBreadcrumbsContainer\n>\n    <a\n        fd-link\n        tabindex=\"0\"\n        class=\"fd-breadcrumb__collapsed\"\n        (keydown.enter)=\"_keyDownHandle($event)\"\n        (keydown.space)=\"_keyDownHandle($event)\"\n    >\n        ...\n        <fd-icon glyph=\"slim-arrow-down\"></fd-icon>\n    </a>\n</span>\n\n<ng-content></ng-content>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.4\n * Copyright (c) 2022 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.fd-breadcrumb\n    .fd-breadcrumb__item\n    .fd-breadcrump__link\n*/.fd-breadcrumb{-webkit-box-sizing:border-box;-ms-flex-wrap:wrap;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-wrap:wrap;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);list-style:none;margin:0;padding:0}.fd-breadcrumb:after,.fd-breadcrumb:before{box-sizing:inherit;font-size:inherit}.fd-breadcrumb__item{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-breadcrumb__item:after,.fd-breadcrumb__item:before{box-sizing:inherit;font-size:inherit}.fd-breadcrumb__item:after{color:var(--sapContent_LabelColor);content:\"/\";margin-left:.25rem;margin-right:.25rem}.fd-breadcrumb__item:last-child:after{content:none}.fd-breadcrumb__item .fd-breadcrumb__popover-body{border:none;border-top-left-radius:.125rem;border-top-right-radius:.125rem}.fd-breadcrumb{display:inline-block;white-space:nowrap}.fd-breadcrumb .fd-breadcrumb__collapsed{cursor:pointer}\n"], components: [{ type: i2.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { type: i2.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { type: i2.MenuAddonDirective, selector: "fd-menu-addon", inputs: ["position", "glyph", "submenuIndicator", "ariaHidden"] }, { type: i3.LinkComponent, selector: "[fdLink], [fd-link], [fd-breadcrumb-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { type: i4.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.MenuInteractiveDirective, selector: "[fd-menu-interactive]" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MenuTitleDirective, selector: "[fd-menu-title]" }, { type: i6.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { type: i2.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }], pipes: { "async": i5.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+BreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: i0.ElementRef }, { token: i1.DestroyedService }, { token: i1.RtlService, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+BreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: BreadcrumbComponent, selector: "fd-breadcrumb", inputs: { containerElement: "containerElement", reverse: "reverse" }, outputs: { visibleItemsCount: "visibleItemsCount", hiddenItemsCount: "hiddenItemsCount" }, host: { classAttribute: "fd-breadcrumb" }, providers: [DestroyedService], queries: [{ propertyName: "_contentItems", predicate: BreadcrumbItemComponent }], viewQueries: [{ propertyName: "_menuComponent", first: true, predicate: MenuComponent, descendants: true }, { propertyName: "_overflowLayout", first: true, predicate: OverflowLayoutComponent, descendants: true }], ngImport: i0, template: "<fd-overflow-layout\n    [reverseHiddenItems]=\"reverse\"\n    showMorePosition=\"left\"\n    [enableKeyboardNavigation]=\"false\"\n    (visibleItemsCount)=\"_onVisibleItemsCountChange($event)\"\n    (hiddenItemsCount)=\"_onHiddenItemsCountChange($event)\"\n>\n    <ng-container *ngFor=\"let breadcrumb of _items\">\n        <div\n            *fdOverflowItemRef=\"breadcrumb; let hidden\"\n            fdOverflowLayoutItem\n            (hiddenChange)=\"_onHiddenChange($event, breadcrumb)\"\n        >\n            <ng-template [cdkPortalOutlet]=\"breadcrumb.portal\"></ng-template>\n        </div>\n    </ng-container>\n    <ng-container *fdOverflowExpand=\"let breadcrumbs; items: _items\">\n        <fd-menu #menu [closeOnEscapeKey]=\"true\" [focusAutoCapture]=\"true\" [placement]=\"_placement$ | async\">\n            <ng-container *ngFor=\"let breadcrumbItem of breadcrumbs\">\n                <li\n                    fd-menu-item\n                    [disabled]=\"\n                        breadcrumbItem.item.breadcrumbLink ? breadcrumbItem.item.breadcrumbLink.disabled : false\n                    \"\n                >\n                    <a\n                        fd-menu-interactive\n                        (click)=\"itemClicked(breadcrumbItem.item, $event)\"\n                        (keydown.enter)=\"itemClicked(breadcrumbItem.item, $event)\"\n                        (keydown.space)=\"itemClicked(breadcrumbItem.item, $event)\"\n                    >\n                        <ng-container *ngIf=\"breadcrumbItem?.item.breadcrumbLink; else portalContent\">\n                            <ng-container *ngIf=\"breadcrumbItem.item.breadcrumbLink._prefixIconName\">\n                                <fd-menu-addon\n                                    position=\"before\"\n                                    [glyph]=\"breadcrumbItem.item.breadcrumbLink._prefixIconName\"\n                                ></fd-menu-addon>\n                            </ng-container>\n                            <span fd-menu-title>\n                                <ng-container [cdkPortalOutlet]=\"breadcrumbItem.item.linkContentPortal\"></ng-container>\n                            </span>\n                            <ng-container *ngIf=\"breadcrumbItem.item.breadcrumbLink._postfixIconName\">\n                                <fd-menu-addon\n                                    [glyph]=\"breadcrumbItem.item.breadcrumbLink._postfixIconName\"\n                                ></fd-menu-addon>\n                            </ng-container>\n                        </ng-container>\n                        <ng-template #portalContent>\n                            <span fd-menu-title>\n                                <ng-container\n                                    [cdkPortalOutlet]=\"breadcrumbItem.item.breadcrumbItemPortal\"\n                                ></ng-container>\n                            </span>\n                        </ng-template>\n                    </a>\n                </li>\n            </ng-container>\n        </fd-menu>\n        <span class=\"fd-breadcrumb__item\" *ngIf=\"breadcrumbs.length > 0\" [fdMenuTrigger]=\"menu\">\n            <a\n                fd-link\n                tabindex=\"0\"\n                class=\"fd-breadcrumb__collapsed\"\n                (keydown.enter)=\"_keyDownHandle($event)\"\n                (keydown.space)=\"_keyDownHandle($event)\"\n            >\n                \u2026\n                <fd-icon glyph=\"slim-arrow-down\"></fd-icon>\n            </a>\n        </span>\n    </ng-container>\n</fd-overflow-layout>\n\n<ng-content></ng-content>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.4\n * Copyright (c) 2022 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.fd-breadcrumb\n    .fd-breadcrumb__item\n    .fd-breadcrump__link\n*/.fd-breadcrumb{-webkit-box-sizing:border-box;-ms-flex-wrap:wrap;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-wrap:wrap;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);list-style:none;margin:0;padding:0}.fd-breadcrumb:after,.fd-breadcrumb:before{box-sizing:inherit;font-size:inherit}.fd-breadcrumb__item{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-breadcrumb__item:after,.fd-breadcrumb__item:before{box-sizing:inherit;font-size:inherit}.fd-breadcrumb__item:after{color:var(--sapContent_LabelColor);content:\"/\";margin-left:.25rem;margin-right:.25rem}.fd-breadcrumb__item:last-child:after{content:none}.fd-breadcrumb__item .fd-breadcrumb__popover-body{border:none;border-top-left-radius:.125rem;border-top-right-radius:.125rem}.fd-breadcrumb{display:flex;white-space:nowrap}.fd-breadcrumb .fd-breadcrumb__collapsed{cursor:pointer}.fd-breadcrumb__item:last-child:after{content:\"/\"}.fd-overflow-layout__item--last .fd-breadcrumb__item:after{content:none}\n"], components: [{ type: i2.OverflowLayoutComponent, selector: "fd-overflow-layout", inputs: ["maxVisibleItems", "showMorePosition", "reverseHiddenItems", "enableKeyboardNavigation"], outputs: ["visibleItemsCount", "hiddenItemsCount"] }, { type: i3.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { type: i3.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { type: i3.MenuAddonDirective, selector: "fd-menu-addon", inputs: ["position", "glyph", "submenuIndicator", "ariaHidden"] }, { type: i4.LinkComponent, selector: "[fdLink], [fd-link], [fd-breadcrumb-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { type: i5.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.OverflowItemRefDirective, selector: "[fdOverflowItemRef]", inputs: ["fdOverflowItemRef"] }, { type: i2.OverflowLayoutItemDirective, selector: "[fdOverflowLayoutItem]", inputs: ["focusable", "forceVisibility"], outputs: ["hiddenChange"] }, { type: i7.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { type: i2.OverflowExpandDirective, selector: "[fdOverflowExpand]", inputs: ["fdOverflowExpandItems"] }, { type: i3.MenuInteractiveDirective, selector: "[fd-menu-interactive]" }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.MenuTitleDirective, selector: "[fd-menu-title]" }, { type: i3.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }], pipes: { "async": i6.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-breadcrumb', host: {
                         class: 'fd-breadcrumb'
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-menu #menu [closeOnEscapeKey]=\"true\" [focusAutoCapture]=\"true\" [placement]=\"_placement$ | async\">\n    <ng-container *ngFor=\"let breadcrumbItem of _collapsedBreadcrumbItems\">\n        <li fd-menu-item [disabled]=\"breadcrumbItem.breadcrumbLink ? breadcrumbItem.breadcrumbLink.disabled : false\">\n            <a\n                fd-menu-interactive\n                (click)=\"itemClicked(breadcrumbItem, $event)\"\n                (keydown.enter)=\"itemClicked(breadcrumbItem, $event)\"\n                (keydown.space)=\"itemClicked(breadcrumbItem, $event)\"\n            >\n                <ng-container *ngIf=\"breadcrumbItem?.breadcrumbLink; else portalContent\">\n                    <ng-container *ngIf=\"breadcrumbItem.breadcrumbLink._prefixIconName\">\n                        <fd-menu-addon\n                            position=\"before\"\n                            [glyph]=\"breadcrumbItem.breadcrumbLink._prefixIconName\"\n                        ></fd-menu-addon>\n                    </ng-container>\n                    <span fd-menu-title>\n                        <ng-container [cdkPortalOutlet]=\"breadcrumbItem.linkContentPortal\"></ng-container>\n                    </span>\n                    <ng-container *ngIf=\"breadcrumbItem.breadcrumbLink._postfixIconName\">\n                        <fd-menu-addon [glyph]=\"breadcrumbItem.breadcrumbLink._postfixIconName\"></fd-menu-addon>\n                    </ng-container>\n                </ng-container>\n                <ng-template #portalContent>\n                    <span fd-menu-title>\n                        <ng-container [cdkPortalOutlet]=\"breadcrumbItem.breadcrumbItemPortal\"></ng-container>\n                    </span>\n                </ng-template>\n            </a>\n        </li>\n    </ng-container>\n</fd-menu>\n\n<span\n    class=\"fd-breadcrumb__item\"\n    *ngIf=\"_collapsedBreadcrumbItems.length\"\n    [fdMenuTrigger]=\"menu\"\n    #overflowBreadcrumbsContainer\n>\n    <a\n        fd-link\n        tabindex=\"0\"\n        class=\"fd-breadcrumb__collapsed\"\n        (keydown.enter)=\"_keyDownHandle($event)\"\n        (keydown.space)=\"_keyDownHandle($event)\"\n    >\n        ...\n        <fd-icon glyph=\"slim-arrow-down\"></fd-icon>\n    </a>\n</span>\n\n<ng-content></ng-content>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.4\n * Copyright (c) 2022 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.fd-breadcrumb\n    .fd-breadcrumb__item\n    .fd-breadcrump__link\n*/.fd-breadcrumb{-webkit-box-sizing:border-box;-ms-flex-wrap:wrap;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-wrap:wrap;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);list-style:none;margin:0;padding:0}.fd-breadcrumb:after,.fd-breadcrumb:before{box-sizing:inherit;font-size:inherit}.fd-breadcrumb__item{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-breadcrumb__item:after,.fd-breadcrumb__item:before{box-sizing:inherit;font-size:inherit}.fd-breadcrumb__item:after{color:var(--sapContent_LabelColor);content:\"/\";margin-left:.25rem;margin-right:.25rem}.fd-breadcrumb__item:last-child:after{content:none}.fd-breadcrumb__item .fd-breadcrumb__popover-body{border:none;border-top-left-radius:.125rem;border-top-right-radius:.125rem}.fd-breadcrumb{display:inline-block;white-space:nowrap}.fd-breadcrumb .fd-breadcrumb__collapsed{cursor:pointer}\n"] }]
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [DestroyedService], template: "<fd-overflow-layout\n    [reverseHiddenItems]=\"reverse\"\n    showMorePosition=\"left\"\n    [enableKeyboardNavigation]=\"false\"\n    (visibleItemsCount)=\"_onVisibleItemsCountChange($event)\"\n    (hiddenItemsCount)=\"_onHiddenItemsCountChange($event)\"\n>\n    <ng-container *ngFor=\"let breadcrumb of _items\">\n        <div\n            *fdOverflowItemRef=\"breadcrumb; let hidden\"\n            fdOverflowLayoutItem\n            (hiddenChange)=\"_onHiddenChange($event, breadcrumb)\"\n        >\n            <ng-template [cdkPortalOutlet]=\"breadcrumb.portal\"></ng-template>\n        </div>\n    </ng-container>\n    <ng-container *fdOverflowExpand=\"let breadcrumbs; items: _items\">\n        <fd-menu #menu [closeOnEscapeKey]=\"true\" [focusAutoCapture]=\"true\" [placement]=\"_placement$ | async\">\n            <ng-container *ngFor=\"let breadcrumbItem of breadcrumbs\">\n                <li\n                    fd-menu-item\n                    [disabled]=\"\n                        breadcrumbItem.item.breadcrumbLink ? breadcrumbItem.item.breadcrumbLink.disabled : false\n                    \"\n                >\n                    <a\n                        fd-menu-interactive\n                        (click)=\"itemClicked(breadcrumbItem.item, $event)\"\n                        (keydown.enter)=\"itemClicked(breadcrumbItem.item, $event)\"\n                        (keydown.space)=\"itemClicked(breadcrumbItem.item, $event)\"\n                    >\n                        <ng-container *ngIf=\"breadcrumbItem?.item.breadcrumbLink; else portalContent\">\n                            <ng-container *ngIf=\"breadcrumbItem.item.breadcrumbLink._prefixIconName\">\n                                <fd-menu-addon\n                                    position=\"before\"\n                                    [glyph]=\"breadcrumbItem.item.breadcrumbLink._prefixIconName\"\n                                ></fd-menu-addon>\n                            </ng-container>\n                            <span fd-menu-title>\n                                <ng-container [cdkPortalOutlet]=\"breadcrumbItem.item.linkContentPortal\"></ng-container>\n                            </span>\n                            <ng-container *ngIf=\"breadcrumbItem.item.breadcrumbLink._postfixIconName\">\n                                <fd-menu-addon\n                                    [glyph]=\"breadcrumbItem.item.breadcrumbLink._postfixIconName\"\n                                ></fd-menu-addon>\n                            </ng-container>\n                        </ng-container>\n                        <ng-template #portalContent>\n                            <span fd-menu-title>\n                                <ng-container\n                                    [cdkPortalOutlet]=\"breadcrumbItem.item.breadcrumbItemPortal\"\n                                ></ng-container>\n                            </span>\n                        </ng-template>\n                    </a>\n                </li>\n            </ng-container>\n        </fd-menu>\n        <span class=\"fd-breadcrumb__item\" *ngIf=\"breadcrumbs.length > 0\" [fdMenuTrigger]=\"menu\">\n            <a\n                fd-link\n                tabindex=\"0\"\n                class=\"fd-breadcrumb__collapsed\"\n                (keydown.enter)=\"_keyDownHandle($event)\"\n                (keydown.space)=\"_keyDownHandle($event)\"\n            >\n                \u2026\n                <fd-icon glyph=\"slim-arrow-down\"></fd-icon>\n            </a>\n        </span>\n    </ng-container>\n</fd-overflow-layout>\n\n<ng-content></ng-content>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.4\n * Copyright (c) 2022 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.fd-breadcrumb\n    .fd-breadcrumb__item\n    .fd-breadcrump__link\n*/.fd-breadcrumb{-webkit-box-sizing:border-box;-ms-flex-wrap:wrap;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-wrap:wrap;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);list-style:none;margin:0;padding:0}.fd-breadcrumb:after,.fd-breadcrumb:before{box-sizing:inherit;font-size:inherit}.fd-breadcrumb__item{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-breadcrumb__item:after,.fd-breadcrumb__item:before{box-sizing:inherit;font-size:inherit}.fd-breadcrumb__item:after{color:var(--sapContent_LabelColor);content:\"/\";margin-left:.25rem;margin-right:.25rem}.fd-breadcrumb__item:last-child:after{content:none}.fd-breadcrumb__item .fd-breadcrumb__popover-body{border:none;border-top-left-radius:.125rem;border-top-right-radius:.125rem}.fd-breadcrumb{display:flex;white-space:nowrap}.fd-breadcrumb .fd-breadcrumb__collapsed{cursor:pointer}.fd-breadcrumb__item:last-child:after{content:\"/\"}.fd-overflow-layout__item--last .fd-breadcrumb__item:after{content:none}\n"] }]
         }], ctorParameters: function () {
-        return [{ type: i0.ElementRef }, { type: i1.RtlService, decorators: [{
+        return [{ type: i0.ElementRef }, { type: i1.DestroyedService }, { type: i1.RtlService, decorators: [{
                         type: Optional
-                    }] }, { type: i0.ChangeDetectorRef }, { type: i1.ResizeObserverService }, { type: i0.NgZone }];
-    }, propDecorators: { _breadcrumbItems: [{
+                    }] }, { type: i0.ChangeDetectorRef }];
+    }, propDecorators: { containerElement: [{
+                type: Input
+            }], reverse: [{
+                type: Input
+            }], visibleItemsCount: [{
+                type: Output
+            }], hiddenItemsCount: [{
+                type: Output
+            }], _contentItems: [{
                 type: ContentChildren,
-                args: [forwardRef(() => BreadcrumbItemComponent)]
+                args: [BreadcrumbItemComponent]
             }], _menuComponent: [{
                 type: ViewChild,
                 args: [MenuComponent]
-            }], _overflowContainer: [{
+            }], _overflowLayout: [{
                 type: ViewChild,
-                args: ['overflowBreadcrumbsContainer']
-            }], containerElement: [{
-                type: Input
-            }], reverse: [{
-                type: Input
+                args: [OverflowLayoutComponent]
             }] } });
 
 class DeprecatedBreadcrumbsCompactDirective extends DeprecatedCompactDirective {
@@ -236,7 +263,9 @@ BreadcrumbModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         LinkModule,
         PortalModule,
         PipeModule,
-        ContentDensityModule], exports: [BreadcrumbComponent,
+        ContentDensityModule,
+        OverflowLayoutModule,
+        ButtonModule], exports: [BreadcrumbComponent,
         BreadcrumbItemComponent,
         LinkModule,
         DeprecatedBreadcrumbsCompactDirective,
@@ -249,7 +278,9 @@ BreadcrumbModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", versio
             LinkModule,
             PortalModule,
             PipeModule,
-            ContentDensityModule
+            ContentDensityModule,
+            OverflowLayoutModule,
+            ButtonModule
         ], LinkModule,
         ContentDensityModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: BreadcrumbModule, decorators: [{
@@ -263,7 +294,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                         LinkModule,
                         PortalModule,
                         PipeModule,
-                        ContentDensityModule
+                        ContentDensityModule,
+                        OverflowLayoutModule,
+                        ButtonModule
                     ],
                     exports: [
                         BreadcrumbComponent,

package/breadcrumb/fesm2015/fundamental-ngx-core-breadcrumb.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"fundamental-ngx-core-breadcrumb.mjs","sources":["../../../../../libs/core/src/lib/breadcrumb/breadcrumb-item.component.ts","../../../../../libs/core/src/lib/breadcrumb/breadcrumb.component.ts","../../../../../libs/core/src/lib/breadcrumb/breadcrumb.component.html","../../../../../libs/core/src/lib/breadcrumb/deprecated-breadcrumbs-compact.directive.ts","../../../../../libs/core/src/lib/breadcrumb/breadcrumb.module.ts","../../../../../libs/core/src/lib/breadcrumb/fundamental-ngx-core-breadcrumb.ts"],"sourcesContent":["import {\n    AfterViewInit,\n    ChangeDetectorRef,\n    Component,\n    ContentChild,\n    ElementRef,\n    forwardRef,\n    Renderer2\n} from '@angular/core';\nimport { LinkComponent } from '@fundamental-ngx/core/link';\nimport { DomPortal } from '@angular/cdk/portal';\n\n/**\n * Breadcrumb item directive. Must have child breadcrumb link directives.\n *\n * ```html\n * <fd-breadcrumb-item>\n *     <a fd-link [routerLink]=\"'#'\">Breadcrumb Link</a>\n * </fd-breadcrumb-item>\n * ```\n */\n@Component({\n    selector: 'fd-breadcrumb-item',\n    template: '<div style=\"display: inline\"><ng-content></ng-content></div>',\n    host: {\n        class: 'fd-breadcrumb__item'\n    }\n})\nexport class BreadcrumbItemComponent implements AfterViewInit {\n    /** @hidden */\n    get elementRef(): ElementRef<HTMLElement> {\n        return this._elementRef;\n    }\n\n    /** @hidden */\n    @ContentChild(forwardRef(() => LinkComponent))\n    breadcrumbLink: LinkComponent;\n\n    /** @hidden */\n    get width(): number {\n        return this._elementRef.nativeElement.getBoundingClientRect().width;\n    }\n\n    /** In case there is no link in Item and breadcrumb item is non-interactive, we move whole item content to menu item title */\n    breadcrumbItemPortal: DomPortal<Element>;\n\n    /** When breadcrumb item has link in it, we are moving link content to menu item title */\n    linkContentPortal: DomPortal;\n\n    constructor(\n        private _elementRef: ElementRef<HTMLElement>,\n        private renderer2: Renderer2,\n        private _cdR: ChangeDetectorRef\n    ) {}\n\n    /** @hidden */\n    get needsClickProxy(): boolean {\n        return (\n            !!this.breadcrumbLink?.elementRef().nativeElement.getAttribute('href') || !!this.breadcrumbLink.routerLink\n        );\n    }\n\n    show = (): void => this.renderer2.setStyle(this._elementRef.nativeElement, 'display', 'inline-block');\n    hide = (): void => this.renderer2.setStyle(this._elementRef.nativeElement, 'display', 'none');\n\n    /** @hidden */\n    ngAfterViewInit(): void {\n        if (this.breadcrumbLink) {\n            this.linkContentPortal = new DomPortal<HTMLElement>(this.breadcrumbLink.contentSpan.nativeElement);\n        }\n        this.breadcrumbItemPortal = new DomPortal(this.elementRef.nativeElement.firstElementChild as Element);\n        this._cdR.detectChanges();\n    }\n}\n","import {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ContentChildren,\n    ElementRef,\n    forwardRef,\n    Input,\n    NgZone,\n    OnDestroy,\n    OnInit,\n    Optional,\n    QueryList,\n    ViewChild,\n    ViewEncapsulation\n} from '@angular/core';\nimport { BreadcrumbItemComponent } from './breadcrumb-item.component';\nimport { ResizeObserverService, RtlService } from '@fundamental-ngx/core/utils';\nimport { BehaviorSubject, debounceTime, firstValueFrom, map, startWith, Subscription, tap } from 'rxjs';\nimport { MenuComponent } from '@fundamental-ngx/core/menu';\nimport { Placement } from '@fundamental-ngx/core/shared';\n\n/**\n * Breadcrumb parent wrapper directive. Must have breadcrumb item child directives.\n *\n * ```html\n * <fd-breadcrumb>\n *     <fd-breadcrumb-item>\n *         <a fd-link [routerLink]=\"'#'\">Breadcrumb Link</a>\n *     </fd-breadcrumb-item>\n * </fd-breadcrumb>\n * ```\n */\n@Component({\n    // TODO to be discussed\n    // eslint-disable-next-line\n    selector: 'fd-breadcrumb',\n    host: {\n        class: 'fd-breadcrumb'\n    },\n    templateUrl: './breadcrumb.component.html',\n    styleUrls: ['./breadcrumb.component.scss'],\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class BreadcrumbComponent implements AfterViewInit, OnInit, OnDestroy {\n    /** @hidden */\n    @ContentChildren(forwardRef(() => BreadcrumbItemComponent))\n    _breadcrumbItems: QueryList<BreadcrumbItemComponent>;\n\n    /** @hidden */\n    @ViewChild(MenuComponent)\n    _menuComponent: MenuComponent;\n\n    @ViewChild('overflowBreadcrumbsContainer')\n    private readonly _overflowContainer: ElementRef<HTMLElement>;\n\n    /** @hidden */\n    _collapsedBreadcrumbItems: Array<BreadcrumbItemComponent> = [];\n\n    /** @hidden */\n    _placement$ = new BehaviorSubject<Placement>('bottom-start');\n\n    /**\n     * The element to act as the breadcrumb container. When provided, the breadcrumb's responsive collapsing behavior\n     * performs better. When not provided, the immediate parent element's width will be used.\n     */\n    @Input()\n    containerElement: HTMLElement;\n\n    /** Whether to append items to the overflow dropdown in reverse order. Default is true. */\n    @Input()\n    reverse = false;\n\n    /** @hidden */\n    _containerBoundary: number;\n\n    /** @hidden */\n    private _subscriptions = new Subscription();\n\n    /** @hidden */\n    private _itemToSize = new Map<BreadcrumbItemComponent, number>();\n\n    constructor(\n        public readonly elementRef: ElementRef<Element>,\n        @Optional() private readonly _rtlService: RtlService | null,\n        private readonly _cdRef: ChangeDetectorRef,\n        private readonly _resizeObserver: ResizeObserverService,\n        private readonly _ngZone: NgZone\n    ) {}\n\n    /** @hidden */\n    ngOnInit(): void {\n        if (this._rtlService) {\n            this._subscriptions.add(\n                this._rtlService.rtl.subscribe((value) => this._placement$.next(value ? 'bottom-end' : 'bottom-start'))\n            );\n        }\n    }\n\n    /** @hidden */\n    ngAfterViewInit(): void {\n        this._subscriptions.add(\n            this._breadcrumbItems.changes\n                .pipe(\n                    startWith(this._breadcrumbItems),\n                    map((items) => items.toArray() as BreadcrumbItemComponent[]),\n                    map((items) => items.map((item) => [item, item.width]) as [BreadcrumbItemComponent, number][]),\n                    tap((itemToSize: [BreadcrumbItemComponent, number][]) => (this._itemToSize = new Map(itemToSize)))\n                )\n                .subscribe()\n        );\n        firstValueFrom(this._ngZone.onStable).then(() => {\n            this._subscriptions.add(\n                this._resizeObserver\n                    .observe(this.containerElement || (this.elementRef.nativeElement.parentElement as Element))\n                    // Add small delay for performance reasons.\n                    .pipe(debounceTime(30))\n                    .subscribe(() => this.onResize())\n            );\n        });\n    }\n\n    /** @hidden */\n    ngOnDestroy(): void {\n        this._subscriptions.unsubscribe();\n    }\n\n    /**\n     * Callback function when breadcrumbs container has been resized.\n     */\n    onResize(): void {\n        if (!this.elementRef.nativeElement.parentElement) {\n            return;\n        }\n        this._containerBoundary = this.elementRef.nativeElement.parentElement.getBoundingClientRect().width;\n\n        if (this.containerElement) {\n            this._containerBoundary = this.containerElement.getBoundingClientRect().width;\n        }\n\n        if (this._overflowContainer) {\n            this._containerBoundary -= this._overflowContainer.nativeElement.getBoundingClientRect().width;\n        }\n\n        let visibleSum = 0;\n        const breadcrumbItemComponents = this._breadcrumbItems.toArray();\n        let i;\n        for (i = breadcrumbItemComponents.length - 1; i >= 0; i--) {\n            const breadcrumbItem = breadcrumbItemComponents[i];\n            const itemSize = this._itemToSize.has(breadcrumbItem)\n                ? (this._itemToSize.get(breadcrumbItem) as number)\n                : breadcrumbItem.width;\n            if (visibleSum + itemSize <= this._containerBoundary) {\n                visibleSum += itemSize;\n                breadcrumbItem.show();\n            } else {\n                break;\n            }\n        }\n        const collapsedBreadcrumbItems = breadcrumbItemComponents.slice(0, ++i);\n        this._collapsedBreadcrumbItems = this.reverse ? collapsedBreadcrumbItems : collapsedBreadcrumbItems.reverse();\n        this._collapsedBreadcrumbItems.forEach((item) => item.hide());\n        this._cdRef.detectChanges();\n    }\n\n    /** @hidden */\n    _keyDownHandle(event: Event): void {\n        this._menuComponent.toggle();\n        event.preventDefault();\n    }\n\n    /**\n     * We catch interactions with item, Enter, Space, Mouse click and Touch click,\n     * if original element had router link we are proxying click to that element\n     * */\n    itemClicked(breadcrumbItem: BreadcrumbItemComponent, $event: any): void {\n        if (breadcrumbItem.needsClickProxy) {\n            $event.preventDefault();\n            breadcrumbItem.breadcrumbLink.elementRef().nativeElement.click();\n        }\n    }\n}\n","<fd-menu #menu [closeOnEscapeKey]=\"true\" [focusAutoCapture]=\"true\" [placement]=\"_placement$ | async\">\n    <ng-container *ngFor=\"let breadcrumbItem of _collapsedBreadcrumbItems\">\n        <li fd-menu-item [disabled]=\"breadcrumbItem.breadcrumbLink ? breadcrumbItem.breadcrumbLink.disabled : false\">\n            <a\n                fd-menu-interactive\n                (click)=\"itemClicked(breadcrumbItem, $event)\"\n                (keydown.enter)=\"itemClicked(breadcrumbItem, $event)\"\n                (keydown.space)=\"itemClicked(breadcrumbItem, $event)\"\n            >\n                <ng-container *ngIf=\"breadcrumbItem?.breadcrumbLink; else portalContent\">\n                    <ng-container *ngIf=\"breadcrumbItem.breadcrumbLink._prefixIconName\">\n                        <fd-menu-addon\n                            position=\"before\"\n                            [glyph]=\"breadcrumbItem.breadcrumbLink._prefixIconName\"\n                        ></fd-menu-addon>\n                    </ng-container>\n                    <span fd-menu-title>\n                        <ng-container [cdkPortalOutlet]=\"breadcrumbItem.linkContentPortal\"></ng-container>\n                    </span>\n                    <ng-container *ngIf=\"breadcrumbItem.breadcrumbLink._postfixIconName\">\n                        <fd-menu-addon [glyph]=\"breadcrumbItem.breadcrumbLink._postfixIconName\"></fd-menu-addon>\n                    </ng-container>\n                </ng-container>\n                <ng-template #portalContent>\n                    <span fd-menu-title>\n                        <ng-container [cdkPortalOutlet]=\"breadcrumbItem.breadcrumbItemPortal\"></ng-container>\n                    </span>\n                </ng-template>\n            </a>\n        </li>\n    </ng-container>\n</fd-menu>\n\n<span\n    class=\"fd-breadcrumb__item\"\n    *ngIf=\"_collapsedBreadcrumbItems.length\"\n    [fdMenuTrigger]=\"menu\"\n    #overflowBreadcrumbsContainer\n>\n    <a\n        fd-link\n        tabindex=\"0\"\n        class=\"fd-breadcrumb__collapsed\"\n        (keydown.enter)=\"_keyDownHandle($event)\"\n        (keydown.space)=\"_keyDownHandle($event)\"\n    >\n        ...\n        <fd-icon glyph=\"slim-arrow-down\"></fd-icon>\n    </a>\n</span>\n\n<ng-content></ng-content>\n","import { Directive, forwardRef } from '@angular/core';\nimport { CONTENT_DENSITY_DIRECTIVE, DeprecatedCompactDirective } from '@fundamental-ngx/core/content-density';\n\n@Directive({\n    // eslint-disable-next-line @angular-eslint/directive-selector\n    selector: 'fd-breadcrumb[compact]',\n    providers: [\n        {\n            provide: CONTENT_DENSITY_DIRECTIVE,\n            useExisting: forwardRef(() => DeprecatedBreadcrumbsCompactDirective)\n        }\n    ]\n})\nexport class DeprecatedBreadcrumbsCompactDirective extends DeprecatedCompactDirective {\n    constructor() {\n        super('fd-breadcrumb');\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { BreadcrumbComponent } from './breadcrumb.component';\nimport { BreadcrumbItemComponent } from './breadcrumb-item.component';\nimport { IconModule } from '@fundamental-ngx/core/icon';\nimport { PopoverModule } from '@fundamental-ngx/core/popover';\nimport { MenuModule } from '@fundamental-ngx/core/menu';\nimport { LinkModule } from '@fundamental-ngx/core/link';\nimport { PortalModule } from '@angular/cdk/portal';\nimport { PipeModule } from '@fundamental-ngx/core/utils';\nimport { DeprecatedBreadcrumbsCompactDirective } from './deprecated-breadcrumbs-compact.directive';\nimport { ContentDensityModule } from '@fundamental-ngx/core/content-density';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        IconModule,\n        PopoverModule,\n        MenuModule,\n        LinkModule,\n        PortalModule,\n        PipeModule,\n        ContentDensityModule\n    ],\n    exports: [\n        BreadcrumbComponent,\n        BreadcrumbItemComponent,\n        LinkModule,\n        DeprecatedBreadcrumbsCompactDirective,\n        ContentDensityModule\n    ],\n    declarations: [BreadcrumbComponent, BreadcrumbItemComponent, DeprecatedBreadcrumbsCompactDirective]\n})\nexport class BreadcrumbModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"fundamental-ngx-core-breadcrumb.mjs","sources":["../../../../../libs/core/src/lib/breadcrumb/breadcrumb-item.component.ts","../../../../../libs/core/src/lib/breadcrumb/breadcrumb.component.ts","../../../../../libs/core/src/lib/breadcrumb/breadcrumb.component.html","../../../../../libs/core/src/lib/breadcrumb/deprecated-breadcrumbs-compact.directive.ts","../../../../../libs/core/src/lib/breadcrumb/breadcrumb.module.ts","../../../../../libs/core/src/lib/breadcrumb/fundamental-ngx-core-breadcrumb.ts"],"sourcesContent":["import { DomPortal } from '@angular/cdk/portal';\nimport {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    Component,\n    ContentChild,\n    ElementRef,\n    forwardRef,\n    ViewEncapsulation\n} from '@angular/core';\nimport { LinkComponent } from '@fundamental-ngx/core/link';\n\n/**\n * Breadcrumb item directive. Must have child breadcrumb link directives.\n *\n * ```html\n * <fd-breadcrumb-item>\n *     <a fd-link [routerLink]=\"'#'\">Breadcrumb Link</a>\n * </fd-breadcrumb-item>\n * ```\n */\n@Component({\n    selector: 'fd-breadcrumb-item',\n    template: '<ng-content></ng-content>',\n    host: {\n        class: 'fd-breadcrumb__item'\n    },\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class BreadcrumbItemComponent implements AfterViewInit {\n    /** @hidden */\n    @ContentChild(forwardRef(() => LinkComponent))\n    breadcrumbLink: LinkComponent;\n\n    /** In case there is no link in Item and breadcrumb item is non-interactive, we move whole item content to menu item title */\n    breadcrumbItemPortal: DomPortal<Element>;\n\n    /** When breadcrumb item has link in it, we are moving link content to menu item title */\n    linkContentPortal: DomPortal;\n\n    /**\n     * Breadcrumb item dom portal.\n     */\n    portal: DomPortal;\n\n    /** @hidden */\n    private _attached = false;\n\n    /** @hidden */\n    constructor(public readonly elementRef: ElementRef<HTMLElement>) {}\n\n    /** @hidden */\n    get _needsClickProxy(): boolean {\n        return (\n            !!this.breadcrumbLink?.elementRef().nativeElement.getAttribute('href') || !!this.breadcrumbLink.routerLink\n        );\n    }\n\n    /** @hidden */\n    ngAfterViewInit(): void {\n        this._attach();\n    }\n\n    /**\n     * Sets breadcrumb item dom portal.\n     */\n    setPortal(): void {\n        if (!this.portal) {\n            this.portal = new DomPortal(this.elementRef);\n        }\n    }\n\n    /** @hidden */\n    _detach(): void {\n        if (!this._attached) {\n            return;\n        }\n\n        if (this.linkContentPortal?.isAttached) {\n            this.linkContentPortal?.detach();\n        }\n\n        if (this.breadcrumbItemPortal?.isAttached) {\n            this.breadcrumbItemPortal?.detach();\n        }\n\n        this._attached = false;\n    }\n\n    /** @hidden */\n    _attach(): void {\n        if (this._attached) {\n            return;\n        }\n\n        if (this.breadcrumbLink && this.breadcrumbLink.contentSpan) {\n            this.linkContentPortal = new DomPortal<HTMLElement>(this.breadcrumbLink.contentSpan.nativeElement);\n        }\n\n        this.breadcrumbItemPortal = new DomPortal(this.elementRef.nativeElement.firstElementChild as Element);\n        this._attached = true;\n    }\n}\n","import {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ContentChildren,\n    ElementRef,\n    EventEmitter,\n    Input,\n    isDevMode,\n    OnInit,\n    Optional,\n    Output,\n    QueryList,\n    ViewChild,\n    ViewEncapsulation\n} from '@angular/core';\nimport { OverflowLayoutComponent } from '@fundamental-ngx/core/overflow-layout';\nimport { BreadcrumbItemComponent } from './breadcrumb-item.component';\nimport { DestroyedService, RtlService } from '@fundamental-ngx/core/utils';\nimport { BehaviorSubject, takeUntil } from 'rxjs';\nimport { MenuComponent } from '@fundamental-ngx/core/menu';\nimport { Placement } from '@fundamental-ngx/core/shared';\n\n/**\n * Breadcrumb parent wrapper directive. Must have breadcrumb item child directives.\n *\n * ```html\n * <fd-breadcrumb>\n *     <fd-breadcrumb-item>\n *         <a fd-link [routerLink]=\"'#'\">Breadcrumb Link</a>\n *     </fd-breadcrumb-item>\n * </fd-breadcrumb>\n * ```\n */\n@Component({\n    selector: 'fd-breadcrumb',\n    host: {\n        class: 'fd-breadcrumb'\n    },\n    templateUrl: './breadcrumb.component.html',\n    styleUrls: ['./breadcrumb.component.scss'],\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    providers: [DestroyedService]\n})\nexport class BreadcrumbComponent implements OnInit, AfterViewInit {\n    /**\n     * @deprecated\n     * Breadcrumbs component now uses more advanced calculation mechanism without the need of specifying the container element.\n     *\n     * The element to act as the breadcrumb container. When provided, the breadcrumb's responsive collapsing behavior\n     * performs better. When not provided, the immediate parent element's width will be used.\n     */\n    @Input()\n    set containerElement(_: HTMLElement) {\n        if (isDevMode()) {\n            console.warn(\n                'Breadcrumbs component now uses more advanced calculation mechanism without the need of specifying the container element.'\n            );\n        }\n    }\n\n    /** Whether to append items to the overflow dropdown in reverse order. Default is true. */\n    @Input()\n    reverse = false;\n\n    /**\n     * Event emitted when visible items count is changed.\n     */\n    @Output()\n    visibleItemsCount = new EventEmitter<number>();\n\n    /**\n     * Event emitted when hidden items count is changed.\n     */\n    @Output()\n    hiddenItemsCount = new EventEmitter<number>();\n\n    /** @hidden */\n    @ContentChildren(BreadcrumbItemComponent)\n    private readonly _contentItems: QueryList<BreadcrumbItemComponent>;\n\n    /** @hidden */\n    @ViewChild(MenuComponent)\n    private readonly _menuComponent: MenuComponent;\n\n    /** @hidden */\n    @ViewChild(OverflowLayoutComponent)\n    private readonly _overflowLayout: OverflowLayoutComponent;\n\n    /**\n     * @hidden\n     * Array of breadcrumb items.\n     */\n    _items: BreadcrumbItemComponent[] = [];\n\n    /** @hidden */\n    _placement$ = new BehaviorSubject<Placement>('bottom-start');\n\n    /** @hidden */\n    constructor(\n        public elementRef: ElementRef<HTMLElement>,\n        private _onDestroy$: DestroyedService,\n        @Optional() private _rtlService: RtlService | null,\n        private _cdr: ChangeDetectorRef\n    ) {}\n\n    /** @hidden */\n    ngOnInit(): void {\n        this._rtlService?.rtl\n            .pipe(takeUntil(this._onDestroy$))\n            .subscribe((value) => this._placement$.next(value ? 'bottom-end' : 'bottom-start'));\n    }\n\n    /** @hidden */\n    onResize(): void {\n        this._overflowLayout.triggerRecalculation();\n    }\n\n    /**\n     * We catch interactions with item, Enter, Space, Mouse click and Touch click,\n     * if original element had router link we are proxying click to that element\n     * */\n    itemClicked(breadcrumbItem: any, $event: any): void {\n        if (breadcrumbItem.needsClickProxy) {\n            $event.preventDefault();\n            breadcrumbItem.breadcrumbLink.elementRef().nativeElement.click();\n        }\n    }\n\n    /** @hidden */\n    ngAfterViewInit(): void {\n        this._setItems();\n\n        this._contentItems.changes.subscribe(() => this._setItems());\n    }\n\n    /** @hidden */\n    _keyDownHandle(event: Event): void {\n        this._menuComponent.toggle();\n        event.preventDefault();\n    }\n\n    /** @hidden */\n    _onHiddenChange(isHidden: boolean, breadcrumb: BreadcrumbItemComponent): void {\n        if (!isHidden) {\n            breadcrumb._detach();\n        } else {\n            breadcrumb._attach();\n        }\n    }\n\n    /** @hidden */\n    _onVisibleItemsCountChange(visibleItemsCount: number): void {\n        this.visibleItemsCount.emit(visibleItemsCount);\n    }\n\n    /** @hidden */\n    _onHiddenItemsCountChange(hiddenItemsCount: number): void {\n        this.hiddenItemsCount.emit(hiddenItemsCount);\n    }\n\n    /** @hidden */\n    private _setItems(): void {\n        this._contentItems.forEach((item) => item.setPortal());\n        this._items = this._contentItems.toArray();\n        this._cdr.detectChanges();\n    }\n}\n","<fd-overflow-layout\n    [reverseHiddenItems]=\"reverse\"\n    showMorePosition=\"left\"\n    [enableKeyboardNavigation]=\"false\"\n    (visibleItemsCount)=\"_onVisibleItemsCountChange($event)\"\n    (hiddenItemsCount)=\"_onHiddenItemsCountChange($event)\"\n>\n    <ng-container *ngFor=\"let breadcrumb of _items\">\n        <div\n            *fdOverflowItemRef=\"breadcrumb; let hidden\"\n            fdOverflowLayoutItem\n            (hiddenChange)=\"_onHiddenChange($event, breadcrumb)\"\n        >\n            <ng-template [cdkPortalOutlet]=\"breadcrumb.portal\"></ng-template>\n        </div>\n    </ng-container>\n    <ng-container *fdOverflowExpand=\"let breadcrumbs; items: _items\">\n        <fd-menu #menu [closeOnEscapeKey]=\"true\" [focusAutoCapture]=\"true\" [placement]=\"_placement$ | async\">\n            <ng-container *ngFor=\"let breadcrumbItem of breadcrumbs\">\n                <li\n                    fd-menu-item\n                    [disabled]=\"\n                        breadcrumbItem.item.breadcrumbLink ? breadcrumbItem.item.breadcrumbLink.disabled : false\n                    \"\n                >\n                    <a\n                        fd-menu-interactive\n                        (click)=\"itemClicked(breadcrumbItem.item, $event)\"\n                        (keydown.enter)=\"itemClicked(breadcrumbItem.item, $event)\"\n                        (keydown.space)=\"itemClicked(breadcrumbItem.item, $event)\"\n                    >\n                        <ng-container *ngIf=\"breadcrumbItem?.item.breadcrumbLink; else portalContent\">\n                            <ng-container *ngIf=\"breadcrumbItem.item.breadcrumbLink._prefixIconName\">\n                                <fd-menu-addon\n                                    position=\"before\"\n                                    [glyph]=\"breadcrumbItem.item.breadcrumbLink._prefixIconName\"\n                                ></fd-menu-addon>\n                            </ng-container>\n                            <span fd-menu-title>\n                                <ng-container [cdkPortalOutlet]=\"breadcrumbItem.item.linkContentPortal\"></ng-container>\n                            </span>\n                            <ng-container *ngIf=\"breadcrumbItem.item.breadcrumbLink._postfixIconName\">\n                                <fd-menu-addon\n                                    [glyph]=\"breadcrumbItem.item.breadcrumbLink._postfixIconName\"\n                                ></fd-menu-addon>\n                            </ng-container>\n                        </ng-container>\n                        <ng-template #portalContent>\n                            <span fd-menu-title>\n                                <ng-container\n                                    [cdkPortalOutlet]=\"breadcrumbItem.item.breadcrumbItemPortal\"\n                                ></ng-container>\n                            </span>\n                        </ng-template>\n                    </a>\n                </li>\n            </ng-container>\n        </fd-menu>\n        <span class=\"fd-breadcrumb__item\" *ngIf=\"breadcrumbs.length > 0\" [fdMenuTrigger]=\"menu\">\n            <a\n                fd-link\n                tabindex=\"0\"\n                class=\"fd-breadcrumb__collapsed\"\n                (keydown.enter)=\"_keyDownHandle($event)\"\n                (keydown.space)=\"_keyDownHandle($event)\"\n            >\n                …\n                <fd-icon glyph=\"slim-arrow-down\"></fd-icon>\n            </a>\n        </span>\n    </ng-container>\n</fd-overflow-layout>\n\n<ng-content></ng-content>\n","import { Directive, forwardRef } from '@angular/core';\nimport { CONTENT_DENSITY_DIRECTIVE, DeprecatedCompactDirective } from '@fundamental-ngx/core/content-density';\n\n@Directive({\n    // eslint-disable-next-line @angular-eslint/directive-selector\n    selector: 'fd-breadcrumb[compact]',\n    providers: [\n        {\n            provide: CONTENT_DENSITY_DIRECTIVE,\n            useExisting: forwardRef(() => DeprecatedBreadcrumbsCompactDirective)\n        }\n    ]\n})\nexport class DeprecatedBreadcrumbsCompactDirective extends DeprecatedCompactDirective {\n    constructor() {\n        super('fd-breadcrumb');\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ButtonModule } from '@fundamental-ngx/core/button';\nimport { OverflowLayoutModule } from '@fundamental-ngx/core/overflow-layout';\n\nimport { BreadcrumbComponent } from './breadcrumb.component';\nimport { BreadcrumbItemComponent } from './breadcrumb-item.component';\nimport { IconModule } from '@fundamental-ngx/core/icon';\nimport { PopoverModule } from '@fundamental-ngx/core/popover';\nimport { MenuModule } from '@fundamental-ngx/core/menu';\nimport { LinkModule } from '@fundamental-ngx/core/link';\nimport { PortalModule } from '@angular/cdk/portal';\nimport { PipeModule } from '@fundamental-ngx/core/utils';\nimport { DeprecatedBreadcrumbsCompactDirective } from './deprecated-breadcrumbs-compact.directive';\nimport { ContentDensityModule } from '@fundamental-ngx/core/content-density';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        IconModule,\n        PopoverModule,\n        MenuModule,\n        LinkModule,\n        PortalModule,\n        PipeModule,\n        ContentDensityModule,\n        OverflowLayoutModule,\n        ButtonModule\n    ],\n    exports: [\n        BreadcrumbComponent,\n        BreadcrumbItemComponent,\n        LinkModule,\n        DeprecatedBreadcrumbsCompactDirective,\n        ContentDensityModule\n    ],\n    declarations: [BreadcrumbComponent, BreadcrumbItemComponent, DeprecatedBreadcrumbsCompactDirective]\n})\nexport class BreadcrumbModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}