breadcrumbs.html

<!--
@TODO: check when updated to Angular 20.x (#DS-4034)
resolved SSR issue with official hack https://github.com/angular/angular/issues/50543#issuecomment-1572900259
-->
<ng-content />
@let allItems = items();
@if (allItems.length < minVisibleItems || wrapMode() !== 'auto') {
    @for (item of allItems; track item) {
        <div class="kbq-breadcrumb-item__container">
            <ng-container *ngTemplateOutlet="breadcrumbTemplate; context: { $implicit: item, last: $last }" />
            @if (!$last) {
                <ng-container [ngTemplateOutlet]="separatorTemplate" />
            }
        </div>
    }
} @else {
    @let firstItem = allItems[0];
    @let lastItem = allItems[allItems.length - 1];
    <div #kbqOverflowItems="kbqOverflowItems" kbqOverflowItems reverseOverflowOrder class="layout-align-start-center">
        <div class="kbq-breadcrumb-item__container" [kbqOverflowItem]="0" [order]="allItems.length">
            <ng-container *ngTemplateOutlet="breadcrumbTemplate; context: { $implicit: firstItem, last: false }" />
            <ng-container [ngTemplateOutlet]="separatorTemplate" />
        </div>
        <div kbqOverflowItemsResult class="kbq-breadcrumb-item__container">
            <button
                #breadcrumbsResult
                kbq-button
                kbqBreadcrumb
                class="kbq-breadcrumb__expand"
                [kbqDropdownTriggerFor]="hiddenBreadcrumbsDropdown"
                [kbqStyle]="KbqButtonStyles.Transparent"
            >
                <i kbq-icon="kbq-ellipsis-horizontal_16" [color]="KbqComponentColors.ContrastFade"></i>
            </button>
            <ng-container [ngTemplateOutlet]="separatorTemplate" />

            <kbq-dropdown #hiddenBreadcrumbsDropdown="kbqDropdown">
                @for (item of allItems; track item) {
                    @if (kbqOverflowItems.hiddenItemIDs().has($index)) {
                        <a kbq-dropdown-item [routerLink]="item.routerLink?.urlTree" [disabled]="item.disabled()">
                            {{ item.text() }}
                        </a>
                    }
                }
            </kbq-dropdown>
        </div>
        @for (item of itemsExcludingEdges(); track item) {
            <div class="kbq-breadcrumb-item__container" [kbqOverflowItem]="$index + 1">
                <ng-container *ngTemplateOutlet="breadcrumbTemplate; context: { $implicit: item, last: false }" />
                <ng-container [ngTemplateOutlet]="separatorTemplate" />
            </div>
        }
        <div alwaysVisible class="kbq-breadcrumb-item__container" [kbqOverflowItem]="allItems.length - 1">
            <ng-container *ngTemplateOutlet="breadcrumbTemplate; context: { $implicit: lastItem, last: true }" />
        </div>
    </div>
}

<ng-template #breadcrumbTemplate let-item let-last="last">
    @let customTemplateRef = item.customTemplateRef();
    @if (customTemplateRef) {
        <ng-container [ngTemplateOutlet]="customTemplateRef" />
    } @else {
        <a
            kbq-button
            kbq-title
            kbqBreadcrumb
            [focusable]="!item.disabled() && !last"
            [routerLink]="item.routerLink?.urlTree"
            [attr.aria-current]="last ? 'page' : null"
            [disabled]="item.disabled() || last"
            [kbqPlacementPriority]="PopUpPlacements.Bottom"
            [kbqTooltipArrow]="false"
        >
            {{ item.text() }}
        </a>
    }
</ng-template>

<ng-template #separatorTemplate>
    @let separatorTemplate = separator();
    @if (separatorTemplate) {
        <ng-container [ngTemplateOutlet]="separatorTemplate" />
    } @else {
        <i kbq-icon="" class="kbq-breadcrumb__separator" [color]="KbqComponentColors.ContrastFade">&nbsp;/&nbsp;</i>
    }
</ng-template>