primeng/fesm2022/primeng-breadcrumb.mjs

PrimeNG is a premium UI library for Angular featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock,

export * from 'primeng/types/breadcrumb';
import { NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, InjectionToken, inject, input, output, contentChild, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import * as i2 from '@angular/router';
import { RouterModule, RouterLink, RouterLinkActive } from '@angular/router';
import { SharedModule } from 'primeng/api';
import { Badge } from 'primeng/badge';
import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
import * as i1 from 'primeng/bind';
import { Bind } from 'primeng/bind';
import { ChevronRight } from '@primeicons/angular/chevron-right';
import { Home } from '@primeicons/angular/home';
import * as i3 from 'primeng/tooltip';
import { TooltipModule } from 'primeng/tooltip';
import { style as style$1 } from '@primeuix/styles/breadcrumb';
import { BaseStyle } from 'primeng/base';

const style = /*css*/ `
${style$1}

/* For PrimeNG */
p-breadcrumb {
    max-width: 100%;
}
`;
const classes = {
    root: () => ['p-breadcrumb p-component'],
    list: 'p-breadcrumb-list',
    homeItem: 'p-breadcrumb-home-item',
    separator: 'p-breadcrumb-separator',
    item: ({ menuitem }) => ['p-breadcrumb-item', { 'p-disabled': menuitem.disabled }],
    itemLink: 'p-breadcrumb-item-link',
    itemIcon: 'p-breadcrumb-item-icon',
    itemLabel: 'p-breadcrumb-item-label'
};
class BreadCrumbStyle extends BaseStyle {
    name = 'breadcrumb';
    style = style;
    classes = classes;
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BreadCrumbStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BreadCrumbStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BreadCrumbStyle, decorators: [{
            type: Injectable
        }] });
/**
 *
 * Breadcrumb provides contextual information about page hierarchy.
 *
 * [Live Demo](https://www.primeng.org/breadcrumb/)
 *
 * @module breadcrumbstyle
 *
 */
var BreadcrumbClasses;
(function (BreadcrumbClasses) {
    /**
     * Class name of the root element
     */
    BreadcrumbClasses["root"] = "p-breadcrumb";
    /**
     * Class name of the list element
     */
    BreadcrumbClasses["list"] = "p-breadcrumb-list";
    /**
     * Class name of the home item element
     */
    BreadcrumbClasses["homeItem"] = "p-breadcrumb-home-item";
    /**
     * Class name of the separator element
     */
    BreadcrumbClasses["separator"] = "p-breadcrumb-separator";
    /**
     * Class name of the item element
     */
    BreadcrumbClasses["item"] = "p-breadcrumb-item";
    /**
     * Class name of the item link element
     */
    BreadcrumbClasses["itemLink"] = "p-breadcrumb-item-link";
    /**
     * Class name of the item icon element
     */
    BreadcrumbClasses["itemIcon"] = "p-breadcrumb-item-icon";
    /**
     * Class name of the item label element
     */
    BreadcrumbClasses["itemLabel"] = "p-breadcrumb-item-label";
})(BreadcrumbClasses || (BreadcrumbClasses = {}));

const BREADCRUMB_INSTANCE = new InjectionToken('BREADCRUMB_INSTANCE');
/**
 * Breadcrumb provides contextual information about page hierarchy.
 * @group Components
 */
class Breadcrumb extends BaseComponent {
    componentName = 'Breadcrumb';
    bindDirectiveInstance = inject(Bind, { self: true });
    /**
     * An array of menuitems.
     * @group Props
     */
    model = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "model" }] : /* istanbul ignore next */ []));
    /**
     * Inline style of the component.
     * @group Props
     */
    style = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "style" }] : /* istanbul ignore next */ []));
    /**
     * Style class of the component.
     * @group Props
     */
    styleClass = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "styleClass" }] : /* istanbul ignore next */ []));
    /**
     * MenuItem configuration for the home icon.
     * @group Props
     */
    home = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "home" }] : /* istanbul ignore next */ []));
    /**
     * Defines a string that labels the home icon for accessibility.
     * @group Props
     */
    homeAriaLabel = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "homeAriaLabel" }] : /* istanbul ignore next */ []));
    /**
     * Fired when an item is selected.
     * @param {BreadcrumbItemClickEvent} event - custom click event.
     * @group Emits
     */
    onItemClick = output();
    /**
     * Custom item template.
     * @group Templates
     */
    itemTemplate = contentChild('item', { ...(ngDevMode ? { debugName: "itemTemplate" } : /* istanbul ignore next */ {}), descendants: false });
    /**
     * Custom separator template.
     * @group Templates
     */
    separatorTemplate = contentChild('separator', { ...(ngDevMode ? { debugName: "separatorTemplate" } : /* istanbul ignore next */ {}), descendants: false });
    showHome = computed(() => this.home() && this.home().visible !== false, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "showHome" }] : /* istanbul ignore next */ []));
    homeContext = computed(() => ({ $implicit: this.home() }), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "homeContext" }] : /* istanbul ignore next */ []));
    homeHref = computed(() => this.home()?.url ?? null, /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "homeHref" }] : /* istanbul ignore next */ []));
    homeTabindex = computed(() => (this.home()?.disabled ? null : this.home()?.tabindex || '0'), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "homeTabindex" }] : /* istanbul ignore next */ []));
    showSeparator = computed(() => this.model() && this.home(), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "showSeparator" }] : /* istanbul ignore next */ []));
    _componentStyle = inject(BreadCrumbStyle);
    onClick(event, item) {
        if (item.disabled) {
            event.preventDefault();
            return;
        }
        if (!item.url && !item.routerLink) {
            event.preventDefault();
        }
        if (item.command) {
            item.command({
                originalEvent: event,
                item: item
            });
        }
        this.onItemClick.emit({
            originalEvent: event,
            item: item
        });
    }
    onAfterViewChecked() {
        this.bindDirectiveInstance.setAttrs(this.ptm('host'));
    }
    getPTOptions(item, index, key) {
        return this.ptm(key, {
            context: {
                item,
                index
            }
        });
    }
    getItemHref(item) {
        return item.url ?? null;
    }
    getItemTabindex(item) {
        return item.disabled ? null : item.tabindex || '0';
    }
    getRouterLinkActiveOptions(item) {
        return item.routerLinkActiveOptions || { exact: false };
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: Breadcrumb, deps: null, target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: Breadcrumb, isStandalone: true, selector: "p-breadcrumb", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, home: { classPropertyName: "home", publicName: "home", isSignal: true, isRequired: false, transformFunction: null }, homeAriaLabel: { classPropertyName: "homeAriaLabel", publicName: "homeAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onItemClick: "onItemClick" }, providers: [BreadCrumbStyle, { provide: BREADCRUMB_INSTANCE, useExisting: Breadcrumb }, { provide: PARENT_INSTANCE, useExisting: Breadcrumb }], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"], isSignal: true }, { propertyName: "separatorTemplate", first: true, predicate: ["separator"], isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
        <nav [pBind]="ptm('root')" [class]="cn(cx('root'), styleClass())" [style]="style()">
            <ol [class]="cx('list')" [pBind]="ptm('list')">
                @if (showHome()) {
                    @let homeItem = home()!;
                    <li [attr.id]="homeItem.id" [class]="cn(cx('homeItem'), homeItem.styleClass)" [style]="homeItem.style" pTooltip [tooltipOptions]="homeItem.tooltipOptions" [pBind]="ptm('homeItem')" [unstyled]="unstyled()">
                        @if (itemTemplate()) {
                            <ng-container *ngTemplateOutlet="itemTemplate(); context: homeContext()"></ng-container>
                        } @else {
                            @if (!homeItem.routerLink) {
                                <a
                                    [href]="homeHref()"
                                    [attr.aria-label]="homeAriaLabel()"
                                    [class]="cn(cx('itemLink'), homeItem.linkClass)"
                                    [style]="homeItem.linkStyle"
                                    (click)="onClick($event, homeItem)"
                                    [target]="homeItem.target"
                                    [attr.title]="homeItem.title"
                                    [attr.tabindex]="homeTabindex()"
                                    [attr.data-automationid]="homeItem.automationId"
                                    [pBind]="ptm('itemLink')"
                                >
                                    @if (homeItem.icon) {
                                        <span [class]="cn(cx('itemIcon'), homeItem.icon, homeItem.iconClass)" [style]="homeItem.iconStyle" [pBind]="ptm('itemIcon')"></span>
                                    } @else {
                                        <svg data-p-icon="home" [class]="cx('itemIcon')" [pBind]="ptm('itemIcon')" />
                                    }
                                    @if (homeItem.label) {
                                        @if (homeItem.escape !== false) {
                                            <span [class]="cn(cx('itemLabel'), homeItem.labelClass)" [style]="homeItem.labelStyle" [pBind]="ptm('itemLabel')">{{ homeItem.label }}</span>
                                        } @else {
                                            <span [class]="cn(cx('itemLabel'), homeItem.labelClass)" [style]="homeItem.labelStyle" [innerHTML]="homeItem.label" [pBind]="ptm('itemLabel')"></span>
                                        }
                                    }
                                    @if (homeItem.badge) {
                                        <p-badge [class]="homeItem.badgeStyleClass" [value]="homeItem.badge" [pt]="ptm('pcBadge')" [unstyled]="unstyled()" />
                                    }
                                </a>
                            } @else {
                                <a
                                    [routerLink]="homeItem.routerLink"
                                    routerLinkActive="p-menuitem-link-active"
                                    [attr.aria-label]="homeAriaLabel()"
                                    [queryParams]="homeItem.queryParams"
                                    [routerLinkActiveOptions]="getRouterLinkActiveOptions(homeItem)"
                                    [class]="cn(cx('itemLink'), homeItem.linkClass)"
                                    [style]="homeItem.linkStyle"
                                    (click)="onClick($event, homeItem)"
                                    [target]="homeItem.target"
                                    [attr.title]="homeItem.title"
                                    [attr.tabindex]="homeTabindex()"
                                    [attr.data-automationid]="homeItem.automationId"
                                    [fragment]="homeItem.fragment"
                                    [queryParamsHandling]="homeItem.queryParamsHandling"
                                    [preserveFragment]="homeItem.preserveFragment"
                                    [skipLocationChange]="homeItem.skipLocationChange"
                                    [replaceUrl]="homeItem.replaceUrl"
                                    [state]="homeItem.state"
                                    [pBind]="ptm('itemLink')"
                                >
                                    @if (homeItem.icon) {
                                        <span [class]="cn(cx('itemIcon'), homeItem.icon, homeItem.iconClass)" [style]="homeItem.iconStyle" [pBind]="ptm('itemIcon')"></span>
                                    } @else {
                                        <svg data-p-icon="home" [class]="cx('itemIcon')" [pBind]="ptm('itemIcon')" />
                                    }
                                    @if (homeItem.label) {
                                        @if (homeItem.escape !== false) {
                                            <span [class]="cn(cx('itemLabel'), homeItem.labelClass)" [style]="homeItem.labelStyle" [pBind]="ptm('itemLabel')">{{ homeItem.label }}</span>
                                        } @else {
                                            <span [class]="cn(cx('itemLabel'), homeItem.labelClass)" [style]="homeItem.labelStyle" [innerHTML]="homeItem.label" [pBind]="ptm('itemLabel')"></span>
                                        }
                                    }
                                    @if (homeItem.badge) {
                                        <p-badge [class]="homeItem.badgeStyleClass" [value]="homeItem.badge" [pt]="ptm('pcBadge')" [unstyled]="unstyled()" />
                                    }
                                </a>
                            }
                        }
                    </li>
                }
                @if (showSeparator()) {
                    <li [class]="cx('separator')" [pBind]="ptm('separator')">
                        @if (!separatorTemplate()) {
                            <svg data-p-icon="chevron-right" [pBind]="ptm('separatorIcon')" />
                        } @else {
                            <ng-container *ngTemplateOutlet="separatorTemplate()"></ng-container>
                        }
                    </li>
                }
                @for (menuitem of model(); track menuitem.id || $index; let end = $last, i = $index) {
                    @if (menuitem.visible !== false) {
                        <li
                            [class]="cn(cx('item', { menuitem }), menuitem.styleClass)"
                            [attr.id]="menuitem.id"
                            [style]="menuitem.style"
                            pTooltip
                            [tooltipOptions]="menuitem.tooltipOptions"
                            [pBind]="getPTOptions(menuitem, i, 'item')"
                            [pTooltipUnstyled]="unstyled()"
                        >
                            @if (itemTemplate()) {
                                <ng-container *ngTemplateOutlet="itemTemplate(); context: { $implicit: menuitem }"></ng-container>
                            } @else {
                                @if (!menuitem.routerLink) {
                                    <a
                                        [attr.href]="getItemHref(menuitem)"
                                        [class]="cn(cx('itemLink'), menuitem.linkClass)"
                                        [style]="menuitem.linkStyle"
                                        (click)="onClick($event, menuitem)"
                                        [target]="menuitem.target"
                                        [attr.title]="menuitem.title"
                                        [attr.tabindex]="getItemTabindex(menuitem)"
                                        [attr.data-automationid]="menuitem.automationId"
                                        [pBind]="getPTOptions(menuitem, i, 'itemLink')"
                                    >
                                        @if (menuitem.icon) {
                                            <span [class]="cn(cx('itemIcon'), menuitem.icon, menuitem.iconClass)" [style]="menuitem.iconStyle" [pBind]="getPTOptions(menuitem, i, 'itemIcon')"></span>
                                        }
                                        @if (menuitem.label) {
                                            @if (menuitem.escape !== false) {
                                                <span [class]="cn(cx('itemLabel'), menuitem.labelClass)" [style]="menuitem.labelStyle" [pBind]="getPTOptions(menuitem, i, 'itemLabel')">{{ menuitem.label }}</span>
                                            } @else {
                                                <span [class]="cn(cx('itemLabel'), menuitem.labelClass)" [style]="menuitem.labelStyle" [innerHTML]="menuitem.label" [pBind]="getPTOptions(menuitem, i, 'itemLabel')"></span>
                                            }
                                        }
                                        @if (menuitem.badge) {
                                            <p-badge [class]="menuitem.badgeStyleClass" [value]="menuitem.badge" [pt]="getPTOptions(menuitem, i, 'pcBadge')" [unstyled]="unstyled()" />
                                        }
                                    </a>
                                } @else {
                                    <a
                                        [routerLink]="menuitem.routerLink"
                                        routerLinkActive="p-menuitem-link-active"
                                        [queryParams]="menuitem.queryParams"
                                        [routerLinkActiveOptions]="getRouterLinkActiveOptions(menuitem)"
                                        [class]="cn(cx('itemLink'), menuitem.linkClass)"
                                        [style]="menuitem.linkStyle"
                                        (click)="onClick($event, menuitem)"
                                        [target]="menuitem.target"
                                        [attr.title]="menuitem.title"
                                        [attr.tabindex]="getItemTabindex(menuitem)"
                                        [attr.data-automationid]="menuitem.automationId"
                                        [fragment]="menuitem.fragment"
                                        [queryParamsHandling]="menuitem.queryParamsHandling"
                                        [preserveFragment]="menuitem.preserveFragment"
                                        [skipLocationChange]="menuitem.skipLocationChange"
                                        [replaceUrl]="menuitem.replaceUrl"
                                        [state]="menuitem.state"
                                        [pBind]="getPTOptions(menuitem, i, 'itemLink')"
                                    >
                                        @if (menuitem.icon) {
                                            <span [class]="cn(cx('itemIcon'), menuitem.icon, menuitem.iconClass)" [style]="menuitem.iconStyle" [pBind]="getPTOptions(menuitem, i, 'itemIcon')"></span>
                                        }
                                        @if (menuitem.label) {
                                            @if (menuitem.escape !== false) {
                                                <span [class]="cn(cx('itemLabel'), menuitem.labelClass)" [style]="menuitem.labelStyle" [pBind]="getPTOptions(menuitem, i, 'itemLabel')">{{ menuitem.label }}</span>
                                            } @else {
                                                <span [class]="cn(cx('itemLabel'), menuitem.labelClass)" [style]="menuitem.labelStyle" [innerHTML]="menuitem.label" [pBind]="getPTOptions(menuitem, i, 'itemLabel')"></span>
                                            }
                                        }
                                        @if (menuitem.badge) {
                                            <p-badge [class]="menuitem.badgeStyleClass" [value]="menuitem.badge" [pt]="getPTOptions(menuitem, i, 'pcBadge')" [unstyled]="unstyled()" />
                                        }
                                    </a>
                                }
                            }
                        </li>
                        @if (!end) {
                            <li [class]="cx('separator')" [pBind]="ptm('separator')">
                                @if (!separatorTemplate()) {
                                    <svg data-p-icon="chevron-right" [pBind]="ptm('separatorIcon')" />
                                } @else {
                                    <ng-container *ngTemplateOutlet="separatorTemplate()"></ng-container>
                                }
                            </li>
                        }
                    }
                }
            </ol>
        </nav>
    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: i1.Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "component", type: ChevronRight, selector: "svg[data-p-icon=\"chevron-right\"]" }, { kind: "component", type: Home, selector: "svg[data-p-icon=\"home\"]" }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: Badge, selector: "p-badge", inputs: ["badgeSize", "size", "severity", "value", "badgeDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: Breadcrumb, decorators: [{
            type: Component,
            args: [{
                    selector: 'p-breadcrumb',
                    standalone: true,
                    imports: [NgTemplateOutlet, RouterModule, RouterLink, RouterLinkActive, TooltipModule, ChevronRight, Home, SharedModule, Bind, Badge],
                    template: `
        <nav [pBind]="ptm('root')" [class]="cn(cx('root'), styleClass())" [style]="style()">
            <ol [class]="cx('list')" [pBind]="ptm('list')">
                @if (showHome()) {
                    @let homeItem = home()!;
                    <li [attr.id]="homeItem.id" [class]="cn(cx('homeItem'), homeItem.styleClass)" [style]="homeItem.style" pTooltip [tooltipOptions]="homeItem.tooltipOptions" [pBind]="ptm('homeItem')" [unstyled]="unstyled()">
                        @if (itemTemplate()) {
                            <ng-container *ngTemplateOutlet="itemTemplate(); context: homeContext()"></ng-container>
                        } @else {
                            @if (!homeItem.routerLink) {
                                <a
                                    [href]="homeHref()"
                                    [attr.aria-label]="homeAriaLabel()"
                                    [class]="cn(cx('itemLink'), homeItem.linkClass)"
                                    [style]="homeItem.linkStyle"
                                    (click)="onClick($event, homeItem)"
                                    [target]="homeItem.target"
                                    [attr.title]="homeItem.title"
                                    [attr.tabindex]="homeTabindex()"
                                    [attr.data-automationid]="homeItem.automationId"
                                    [pBind]="ptm('itemLink')"
                                >
                                    @if (homeItem.icon) {
                                        <span [class]="cn(cx('itemIcon'), homeItem.icon, homeItem.iconClass)" [style]="homeItem.iconStyle" [pBind]="ptm('itemIcon')"></span>
                                    } @else {
                                        <svg data-p-icon="home" [class]="cx('itemIcon')" [pBind]="ptm('itemIcon')" />
                                    }
                                    @if (homeItem.label) {
                                        @if (homeItem.escape !== false) {
                                            <span [class]="cn(cx('itemLabel'), homeItem.labelClass)" [style]="homeItem.labelStyle" [pBind]="ptm('itemLabel')">{{ homeItem.label }}</span>
                                        } @else {
                                            <span [class]="cn(cx('itemLabel'), homeItem.labelClass)" [style]="homeItem.labelStyle" [innerHTML]="homeItem.label" [pBind]="ptm('itemLabel')"></span>
                                        }
                                    }
                                    @if (homeItem.badge) {
                                        <p-badge [class]="homeItem.badgeStyleClass" [value]="homeItem.badge" [pt]="ptm('pcBadge')" [unstyled]="unstyled()" />
                                    }
                                </a>
                            } @else {
                                <a
                                    [routerLink]="homeItem.routerLink"
                                    routerLinkActive="p-menuitem-link-active"
                                    [attr.aria-label]="homeAriaLabel()"
                                    [queryParams]="homeItem.queryParams"
                                    [routerLinkActiveOptions]="getRouterLinkActiveOptions(homeItem)"
                                    [class]="cn(cx('itemLink'), homeItem.linkClass)"
                                    [style]="homeItem.linkStyle"
                                    (click)="onClick($event, homeItem)"
                                    [target]="homeItem.target"
                                    [attr.title]="homeItem.title"
                                    [attr.tabindex]="homeTabindex()"
                                    [attr.data-automationid]="homeItem.automationId"
                                    [fragment]="homeItem.fragment"
                                    [queryParamsHandling]="homeItem.queryParamsHandling"
                                    [preserveFragment]="homeItem.preserveFragment"
                                    [skipLocationChange]="homeItem.skipLocationChange"
                                    [replaceUrl]="homeItem.replaceUrl"
                                    [state]="homeItem.state"
                                    [pBind]="ptm('itemLink')"
                                >
                                    @if (homeItem.icon) {
                                        <span [class]="cn(cx('itemIcon'), homeItem.icon, homeItem.iconClass)" [style]="homeItem.iconStyle" [pBind]="ptm('itemIcon')"></span>
                                    } @else {
                                        <svg data-p-icon="home" [class]="cx('itemIcon')" [pBind]="ptm('itemIcon')" />
                                    }
                                    @if (homeItem.label) {
                                        @if (homeItem.escape !== false) {
                                            <span [class]="cn(cx('itemLabel'), homeItem.labelClass)" [style]="homeItem.labelStyle" [pBind]="ptm('itemLabel')">{{ homeItem.label }}</span>
                                        } @else {
                                            <span [class]="cn(cx('itemLabel'), homeItem.labelClass)" [style]="homeItem.labelStyle" [innerHTML]="homeItem.label" [pBind]="ptm('itemLabel')"></span>
                                        }
                                    }
                                    @if (homeItem.badge) {
                                        <p-badge [class]="homeItem.badgeStyleClass" [value]="homeItem.badge" [pt]="ptm('pcBadge')" [unstyled]="unstyled()" />
                                    }
                                </a>
                            }
                        }
                    </li>
                }
                @if (showSeparator()) {
                    <li [class]="cx('separator')" [pBind]="ptm('separator')">
                        @if (!separatorTemplate()) {
                            <svg data-p-icon="chevron-right" [pBind]="ptm('separatorIcon')" />
                        } @else {
                            <ng-container *ngTemplateOutlet="separatorTemplate()"></ng-container>
                        }
                    </li>
                }
                @for (menuitem of model(); track menuitem.id || $index; let end = $last, i = $index) {
                    @if (menuitem.visible !== false) {
                        <li
                            [class]="cn(cx('item', { menuitem }), menuitem.styleClass)"
                            [attr.id]="menuitem.id"
                            [style]="menuitem.style"
                            pTooltip
                            [tooltipOptions]="menuitem.tooltipOptions"
                            [pBind]="getPTOptions(menuitem, i, 'item')"
                            [pTooltipUnstyled]="unstyled()"
                        >
                            @if (itemTemplate()) {
                                <ng-container *ngTemplateOutlet="itemTemplate(); context: { $implicit: menuitem }"></ng-container>
                            } @else {
                                @if (!menuitem.routerLink) {
                                    <a
                                        [attr.href]="getItemHref(menuitem)"
                                        [class]="cn(cx('itemLink'), menuitem.linkClass)"
                                        [style]="menuitem.linkStyle"
                                        (click)="onClick($event, menuitem)"
                                        [target]="menuitem.target"
                                        [attr.title]="menuitem.title"
                                        [attr.tabindex]="getItemTabindex(menuitem)"
                                        [attr.data-automationid]="menuitem.automationId"
                                        [pBind]="getPTOptions(menuitem, i, 'itemLink')"
                                    >
                                        @if (menuitem.icon) {
                                            <span [class]="cn(cx('itemIcon'), menuitem.icon, menuitem.iconClass)" [style]="menuitem.iconStyle" [pBind]="getPTOptions(menuitem, i, 'itemIcon')"></span>
                                        }
                                        @if (menuitem.label) {
                                            @if (menuitem.escape !== false) {
                                                <span [class]="cn(cx('itemLabel'), menuitem.labelClass)" [style]="menuitem.labelStyle" [pBind]="getPTOptions(menuitem, i, 'itemLabel')">{{ menuitem.label }}</span>
                                            } @else {
                                                <span [class]="cn(cx('itemLabel'), menuitem.labelClass)" [style]="menuitem.labelStyle" [innerHTML]="menuitem.label" [pBind]="getPTOptions(menuitem, i, 'itemLabel')"></span>
                                            }
                                        }
                                        @if (menuitem.badge) {
                                            <p-badge [class]="menuitem.badgeStyleClass" [value]="menuitem.badge" [pt]="getPTOptions(menuitem, i, 'pcBadge')" [unstyled]="unstyled()" />
                                        }
                                    </a>
                                } @else {
                                    <a
                                        [routerLink]="menuitem.routerLink"
                                        routerLinkActive="p-menuitem-link-active"
                                        [queryParams]="menuitem.queryParams"
                                        [routerLinkActiveOptions]="getRouterLinkActiveOptions(menuitem)"
                                        [class]="cn(cx('itemLink'), menuitem.linkClass)"
                                        [style]="menuitem.linkStyle"
                                        (click)="onClick($event, menuitem)"
                                        [target]="menuitem.target"
                                        [attr.title]="menuitem.title"
                                        [attr.tabindex]="getItemTabindex(menuitem)"
                                        [attr.data-automationid]="menuitem.automationId"
                                        [fragment]="menuitem.fragment"
                                        [queryParamsHandling]="menuitem.queryParamsHandling"
                                        [preserveFragment]="menuitem.preserveFragment"
                                        [skipLocationChange]="menuitem.skipLocationChange"
                                        [replaceUrl]="menuitem.replaceUrl"
                                        [state]="menuitem.state"
                                        [pBind]="getPTOptions(menuitem, i, 'itemLink')"
                                    >
                                        @if (menuitem.icon) {
                                            <span [class]="cn(cx('itemIcon'), menuitem.icon, menuitem.iconClass)" [style]="menuitem.iconStyle" [pBind]="getPTOptions(menuitem, i, 'itemIcon')"></span>
                                        }
                                        @if (menuitem.label) {
                                            @if (menuitem.escape !== false) {
                                                <span [class]="cn(cx('itemLabel'), menuitem.labelClass)" [style]="menuitem.labelStyle" [pBind]="getPTOptions(menuitem, i, 'itemLabel')">{{ menuitem.label }}</span>
                                            } @else {
                                                <span [class]="cn(cx('itemLabel'), menuitem.labelClass)" [style]="menuitem.labelStyle" [innerHTML]="menuitem.label" [pBind]="getPTOptions(menuitem, i, 'itemLabel')"></span>
                                            }
                                        }
                                        @if (menuitem.badge) {
                                            <p-badge [class]="menuitem.badgeStyleClass" [value]="menuitem.badge" [pt]="getPTOptions(menuitem, i, 'pcBadge')" [unstyled]="unstyled()" />
                                        }
                                    </a>
                                }
                            }
                        </li>
                        @if (!end) {
                            <li [class]="cx('separator')" [pBind]="ptm('separator')">
                                @if (!separatorTemplate()) {
                                    <svg data-p-icon="chevron-right" [pBind]="ptm('separatorIcon')" />
                                } @else {
                                    <ng-container *ngTemplateOutlet="separatorTemplate()"></ng-container>
                                }
                            </li>
                        }
                    }
                }
            </ol>
        </nav>
    `,
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    encapsulation: ViewEncapsulation.None,
                    providers: [BreadCrumbStyle, { provide: BREADCRUMB_INSTANCE, useExisting: Breadcrumb }, { provide: PARENT_INSTANCE, useExisting: Breadcrumb }],
                    hostDirectives: [Bind]
                }]
        }], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], home: [{ type: i0.Input, args: [{ isSignal: true, alias: "home", required: false }] }], homeAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "homeAriaLabel", required: false }] }], onItemClick: [{ type: i0.Output, args: ["onItemClick"] }], itemTemplate: [{ type: i0.ContentChild, args: ['item', { ...{ descendants: false }, isSignal: true }] }], separatorTemplate: [{ type: i0.ContentChild, args: ['separator', { ...{ descendants: false }, isSignal: true }] }] } });
class BreadcrumbModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: BreadcrumbModule, imports: [Breadcrumb, SharedModule], exports: [Breadcrumb, SharedModule] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BreadcrumbModule, imports: [Breadcrumb, SharedModule, SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BreadcrumbModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [Breadcrumb, SharedModule],
                    exports: [Breadcrumb, SharedModule]
                }]
        }] });

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

export { BreadCrumbStyle, Breadcrumb, BreadcrumbClasses, BreadcrumbModule };
//# sourceMappingURL=primeng-breadcrumb.mjs.map