@wawjs/ngx-prime 22.0.0

package/fesm2022/wawjs-ngx-prime-breadcrumb.mjs

@@ -0,0 +1,593 @@
+export * from '@wawjs/ngx-prime/types/breadcrumb';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, InjectionToken, inject, input, output, contentChild, contentChildren, ContentChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import * as i3 from '@angular/router';
+import { Router, RouterModule, RouterLink, RouterLinkActive } from '@angular/router';
+import { PrimeTemplate, SharedModule } from '@wawjs/ngx-prime/api';
+import { Badge } from '@wawjs/ngx-prime/badge';
+import { BaseComponent, PARENT_INSTANCE } from '@wawjs/ngx-prime/basecomponent';
+import * as i1 from '@wawjs/ngx-prime/bind';
+import { Bind } from '@wawjs/ngx-prime/bind';
+import { ChevronRightIcon, HomeIcon } from '@wawjs/ngx-prime/icons';
+import * as i4 from '@wawjs/ngx-prime/tooltip';
+import { TooltipModule } from '@wawjs/ngx-prime/tooltip';
+import { style } from '@wawjs/css-prime-styles/breadcrumb';
+import { BaseStyle } from '@wawjs/ngx-prime/base';
+
+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.1.2", ngImport: i0, type: BreadCrumbStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: BreadCrumbStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: BreadCrumbStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * Breadcrumb provides contextual information about page hierarchy.
+ *
+ * [Live Demo](https://www.ngx-prime.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();
+    _componentStyle = inject(BreadCrumbStyle);
+    router = inject(Router);
+    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
+        });
+    }
+    /**
+     * Custom item template.
+     * @group Templates
+     */
+    itemTemplate;
+    /**
+     * Custom separator template.
+     * @group Templates
+     */
+    separatorTemplate = contentChild('separator', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "separatorTemplate" }] : /* istanbul ignore next */ []));
+    templates = contentChildren(PrimeTemplate, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
+    _separatorTemplate;
+    _itemTemplate;
+    onAfterContentInit() {
+        this.templates()?.forEach((item) => {
+            switch (item.getType()) {
+                case 'separator':
+                    this._separatorTemplate = item.template;
+                    break;
+                case 'item':
+                    this._itemTemplate = item.template;
+                    break;
+                default:
+                    this._itemTemplate = item.template;
+                    break;
+            }
+        });
+    }
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptm('host'));
+    }
+    getPTOptions(item, index, key) {
+        return this.ptm(key, {
+            context: {
+                item,
+                index
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Breadcrumb, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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: "separatorTemplate", first: true, predicate: ["separator"], descendants: true, isSignal: true }, { propertyName: "templates", predicate: PrimeTemplate, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: 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 (home() && home()!.visible !== false) {
+                    <li [attr.id]="home()!.id" [class]="cn(cx('homeItem'), home()!.styleClass)" [ngStyle]="home()!.style" pTooltip [tooltipOptions]="home()!.tooltipOptions" [pBind]="ptm('homeItem')" [unstyled]="unstyled()">
+                        @if (itemTemplate || _itemTemplate) {
+                            <ng-template *ngTemplateOutlet="itemTemplate || _itemTemplate; context: { $implicit: home() }"></ng-template>
+                        } @else {
+                            @if (!home()!.routerLink) {
+                                <a
+                                    [href]="home()!.url ? home()!.url : null"
+                                    [attr.aria-label]="homeAriaLabel()"
+                                    [class]="cn(cx('itemLink'), home()!.linkClass)"
+                                    [ngStyle]="home()!.linkStyle"
+                                    (click)="onClick($event, home()!)"
+                                    [target]="home()!.target"
+                                    [attr.title]="home()!.title"
+                                    [attr.tabindex]="home()!.disabled ? null : home()!.tabindex || '0'"
+                                    [attr.data-automationid]="home()!.automationId"
+                                    [pBind]="ptm('itemLink')"
+                                >
+                                    @if (home()!.icon) {
+                                        <span [class]="cn(cx('itemIcon'), home()!.icon, home()!.iconClass)" [ngStyle]="home()!.iconStyle" [pBind]="ptm('itemIcon')"></span>
+                                    }
+                                    @if (!home()!.icon) {
+                                        <svg data-p-icon="home" [class]="cx('itemIcon')" [pBind]="ptm('itemIcon')" />
+                                    }
+                                    @if (home()!.label) {
+                                        @if (home()!.escape !== false) {
+                                            <span [class]="cn(cx('itemLabel'), home()!.labelClass)" [ngStyle]="home()!.labelStyle" [pBind]="ptm('itemLabel')">{{ home()!.label }}</span>
+                                        } @else {
+                                            <span [class]="cn(cx('itemLabel'), home()!.labelClass)" [ngStyle]="home()!.labelStyle" [innerHTML]="home()!.label" [pBind]="ptm('itemLabel')"></span>
+                                        }
+                                    }
+                                    @if (home()!.badge) {
+                                        <p-badge [styleClass]="home()!.badgeStyleClass" [value]="home()!.badge" [pt]="ptm('pcBadge')" [unstyled]="unstyled()" />
+                                    }
+                                </a>
+                            }
+                            @if (home()!.routerLink) {
+                                <a
+                                    [routerLink]="home()!.routerLink"
+                                    routerLinkActive="p-menuitem-link-active"
+                                    [attr.aria-label]="homeAriaLabel()"
+                                    [queryParams]="home()!.queryParams"
+                                    [routerLinkActiveOptions]="home()!.routerLinkActiveOptions || { exact: false }"
+                                    [class]="cn(cx('itemLink'), home()!.linkClass)"
+                                    [ngStyle]="home()!.linkStyle"
+                                    (click)="onClick($event, home()!)"
+                                    [target]="home()!.target"
+                                    [attr.title]="home()!.title"
+                                    [attr.tabindex]="home()!.disabled ? null : home()!.tabindex || '0'"
+                                    [attr.data-automationid]="home()!.automationId"
+                                    [fragment]="home()!.fragment"
+                                    [queryParamsHandling]="home()!.queryParamsHandling"
+                                    [preserveFragment]="home()!.preserveFragment"
+                                    [skipLocationChange]="home()!.skipLocationChange"
+                                    [replaceUrl]="home()!.replaceUrl"
+                                    [state]="home()!.state"
+                                    [pBind]="ptm('itemLink')"
+                                >
+                                    @if (home()!.icon) {
+                                        <span [class]="cn(cx('itemIcon'), home()!.icon, home()!.iconClass)" [ngStyle]="home()!.iconStyle" [pBind]="ptm('itemIcon')"></span>
+                                    }
+                                    @if (!home()!.icon) {
+                                        <svg data-p-icon="home" [class]="cx('itemIcon')" [pBind]="ptm('itemIcon')" />
+                                    }
+                                    @if (home()!.label) {
+                                        @if (home()!.escape !== false) {
+                                            <span [class]="cn(cx('itemLabel'), home()!.labelClass)" [ngStyle]="home()!.labelStyle" [pBind]="ptm('itemLabel')">{{ home()!.label }}</span>
+                                        } @else {
+                                            <span [class]="cn(cx('itemLabel'), home()!.labelClass)" [ngStyle]="home()!.labelStyle" [innerHTML]="home()!.label" [pBind]="ptm('itemLabel')"></span>
+                                        }
+                                    }
+                                    @if (home()!.badge) {
+                                        <p-badge [styleClass]="home()!.badgeStyleClass" [value]="home()!.badge" [pt]="ptm('pcBadge')" [unstyled]="unstyled()" />
+                                    }
+                                </a>
+                            }
+                        }
+                    </li>
+                }
+                @if (model() && home()) {
+                    <li [class]="cx('separator')" [pBind]="ptm('separator')">
+                        @if (!separatorTemplate() && !_separatorTemplate) {
+                            <svg data-p-icon="chevron-right" [pBind]="ptm('separatorIcon')" />
+                        }
+                        <ng-template *ngTemplateOutlet="separatorTemplate() || _separatorTemplate"></ng-template>
+                    </li>
+                }
+                @for (menuitem of model(); track menuitem; let end = $last; let 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 || _itemTemplate) {
+                                <ng-template *ngTemplateOutlet="itemTemplate || _itemTemplate; context: { $implicit: menuitem }"></ng-template>
+                            } @else {
+                                @if (!menuitem?.routerLink) {
+                                    <a
+                                        [attr.href]="menuitem?.url ? menuitem?.url : null"
+                                        [class]="cn(cx('itemLink'), menuitem?.linkClass)"
+                                        [ngStyle]="menuitem?.linkStyle"
+                                        (click)="onClick($event, menuitem)"
+                                        [target]="menuitem?.target"
+                                        [attr.title]="menuitem?.title"
+                                        [attr.tabindex]="menuitem?.disabled ? null : menuitem?.tabindex || '0'"
+                                        [attr.data-automationid]="menuitem?.automationId"
+                                        [pBind]="getPTOptions(menuitem, i, 'itemLink')"
+                                    >
+                                        @if (!itemTemplate && !_itemTemplate) {
+                                            @if (menuitem?.icon) {
+                                                <span [class]="cn(cx('itemIcon'), menuitem?.icon, menuitem?.iconClass)" [ngStyle]="menuitem?.iconStyle" [pBind]="getPTOptions(menuitem, i, 'itemIcon')"></span>
+                                            }
+                                            @if (menuitem?.label) {
+                                                @if (menuitem?.escape !== false) {
+                                                    <span [class]="cn(cx('itemLabel'), menuitem?.labelClass)" [ngStyle]="menuitem?.labelStyle" [pBind]="getPTOptions(menuitem, i, 'itemLabel')">{{ menuitem?.label }}</span>
+                                                } @else {
+                                                    <span [class]="cn(cx('itemLabel'), menuitem?.labelClass)" [ngStyle]="menuitem?.labelStyle" [innerHTML]="menuitem?.label" [pBind]="getPTOptions(menuitem, i, 'itemLabel')"></span>
+                                                }
+                                            }
+                                            @if (menuitem?.badge) {
+                                                <p-badge [styleClass]="menuitem?.badgeStyleClass" [value]="menuitem?.badge" [pt]="getPTOptions(menuitem, i, 'pcBadge')" [unstyled]="unstyled()" />
+                                            }
+                                        }
+                                    </a>
+                                }
+                                @if (menuitem?.routerLink) {
+                                    <a
+                                        [routerLink]="menuitem?.routerLink"
+                                        routerLinkActive="p-menuitem-link-active"
+                                        [queryParams]="menuitem?.queryParams"
+                                        [routerLinkActiveOptions]="menuitem?.routerLinkActiveOptions || { exact: false }"
+                                        [class]="cn(cx('itemLink'), menuitem?.linkClass)"
+                                        [ngStyle]="menuitem?.linkStyle"
+                                        (click)="onClick($event, menuitem)"
+                                        [target]="menuitem?.target"
+                                        [attr.title]="menuitem?.title"
+                                        [attr.tabindex]="menuitem?.disabled ? null : menuitem?.tabindex || '0'"
+                                        [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)" [ngStyle]="menuitem?.iconStyle" [pBind]="getPTOptions(menuitem, i, 'itemIcon')"></span>
+                                        }
+                                        @if (menuitem?.label) {
+                                            @if (menuitem?.escape !== false) {
+                                                <span [class]="cn(cx('itemLabel'), menuitem?.labelClass)" [ngStyle]="menuitem?.labelStyle" [pBind]="getPTOptions(menuitem, i, 'itemLabel')">{{ menuitem?.label }}</span>
+                                            } @else {
+                                                <span [class]="cn(cx('itemLabel'), menuitem?.labelClass)" [ngStyle]="menuitem?.labelStyle" [innerHTML]="menuitem?.label" [pBind]="getPTOptions(menuitem, i, 'itemLabel')"></span>
+                                            }
+                                        }
+                                        @if (menuitem?.badge) {
+                                            <p-badge [styleClass]="menuitem?.badgeStyleClass" [value]="menuitem?.badge" [pt]="getPTOptions(menuitem, i, 'pcBadge')" [unstyled]="unstyled()" />
+                                        }
+                                    </a>
+                                }
+                            }
+                        </li>
+                    }
+                    @if (!end && menuitem.visible !== false) {
+                        <li [class]="cx('separator')" [pBind]="ptm('separator')">
+                            @if (!separatorTemplate() && !_separatorTemplate) {
+                                <svg data-p-icon="chevron-right" [pBind]="ptm('separatorIcon')" />
+                            }
+                            <ng-template *ngTemplateOutlet="separatorTemplate() || _separatorTemplate"></ng-template>
+                        </li>
+                    }
+                }
+            </ol>
+        </nav>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: i1.Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "component", type: ChevronRightIcon, selector: "[data-p-icon=\"chevron-right\"]" }, { kind: "component", type: HomeIcon, selector: "[data-p-icon=\"home\"]" }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Breadcrumb, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-breadcrumb',
+                    standalone: true,
+                    imports: [CommonModule, RouterModule, RouterLink, RouterLinkActive, TooltipModule, ChevronRightIcon, HomeIcon, SharedModule, Bind, Badge],
+                    template: `
+        <nav [pBind]="ptm('root')" [class]="cn(cx('root'), styleClass())" [style]="style()">
+            <ol [class]="cx('list')" [pBind]="ptm('list')">
+                @if (home() && home()!.visible !== false) {
+                    <li [attr.id]="home()!.id" [class]="cn(cx('homeItem'), home()!.styleClass)" [ngStyle]="home()!.style" pTooltip [tooltipOptions]="home()!.tooltipOptions" [pBind]="ptm('homeItem')" [unstyled]="unstyled()">
+                        @if (itemTemplate || _itemTemplate) {
+                            <ng-template *ngTemplateOutlet="itemTemplate || _itemTemplate; context: { $implicit: home() }"></ng-template>
+                        } @else {
+                            @if (!home()!.routerLink) {
+                                <a
+                                    [href]="home()!.url ? home()!.url : null"
+                                    [attr.aria-label]="homeAriaLabel()"
+                                    [class]="cn(cx('itemLink'), home()!.linkClass)"
+                                    [ngStyle]="home()!.linkStyle"
+                                    (click)="onClick($event, home()!)"
+                                    [target]="home()!.target"
+                                    [attr.title]="home()!.title"
+                                    [attr.tabindex]="home()!.disabled ? null : home()!.tabindex || '0'"
+                                    [attr.data-automationid]="home()!.automationId"
+                                    [pBind]="ptm('itemLink')"
+                                >
+                                    @if (home()!.icon) {
+                                        <span [class]="cn(cx('itemIcon'), home()!.icon, home()!.iconClass)" [ngStyle]="home()!.iconStyle" [pBind]="ptm('itemIcon')"></span>
+                                    }
+                                    @if (!home()!.icon) {
+                                        <svg data-p-icon="home" [class]="cx('itemIcon')" [pBind]="ptm('itemIcon')" />
+                                    }
+                                    @if (home()!.label) {
+                                        @if (home()!.escape !== false) {
+                                            <span [class]="cn(cx('itemLabel'), home()!.labelClass)" [ngStyle]="home()!.labelStyle" [pBind]="ptm('itemLabel')">{{ home()!.label }}</span>
+                                        } @else {
+                                            <span [class]="cn(cx('itemLabel'), home()!.labelClass)" [ngStyle]="home()!.labelStyle" [innerHTML]="home()!.label" [pBind]="ptm('itemLabel')"></span>
+                                        }
+                                    }
+                                    @if (home()!.badge) {
+                                        <p-badge [styleClass]="home()!.badgeStyleClass" [value]="home()!.badge" [pt]="ptm('pcBadge')" [unstyled]="unstyled()" />
+                                    }
+                                </a>
+                            }
+                            @if (home()!.routerLink) {
+                                <a
+                                    [routerLink]="home()!.routerLink"
+                                    routerLinkActive="p-menuitem-link-active"
+                                    [attr.aria-label]="homeAriaLabel()"
+                                    [queryParams]="home()!.queryParams"
+                                    [routerLinkActiveOptions]="home()!.routerLinkActiveOptions || { exact: false }"
+                                    [class]="cn(cx('itemLink'), home()!.linkClass)"
+                                    [ngStyle]="home()!.linkStyle"
+                                    (click)="onClick($event, home()!)"
+                                    [target]="home()!.target"
+                                    [attr.title]="home()!.title"
+                                    [attr.tabindex]="home()!.disabled ? null : home()!.tabindex || '0'"
+                                    [attr.data-automationid]="home()!.automationId"
+                                    [fragment]="home()!.fragment"
+                                    [queryParamsHandling]="home()!.queryParamsHandling"
+                                    [preserveFragment]="home()!.preserveFragment"
+                                    [skipLocationChange]="home()!.skipLocationChange"
+                                    [replaceUrl]="home()!.replaceUrl"
+                                    [state]="home()!.state"
+                                    [pBind]="ptm('itemLink')"
+                                >
+                                    @if (home()!.icon) {
+                                        <span [class]="cn(cx('itemIcon'), home()!.icon, home()!.iconClass)" [ngStyle]="home()!.iconStyle" [pBind]="ptm('itemIcon')"></span>
+                                    }
+                                    @if (!home()!.icon) {
+                                        <svg data-p-icon="home" [class]="cx('itemIcon')" [pBind]="ptm('itemIcon')" />
+                                    }
+                                    @if (home()!.label) {
+                                        @if (home()!.escape !== false) {
+                                            <span [class]="cn(cx('itemLabel'), home()!.labelClass)" [ngStyle]="home()!.labelStyle" [pBind]="ptm('itemLabel')">{{ home()!.label }}</span>
+                                        } @else {
+                                            <span [class]="cn(cx('itemLabel'), home()!.labelClass)" [ngStyle]="home()!.labelStyle" [innerHTML]="home()!.label" [pBind]="ptm('itemLabel')"></span>
+                                        }
+                                    }
+                                    @if (home()!.badge) {
+                                        <p-badge [styleClass]="home()!.badgeStyleClass" [value]="home()!.badge" [pt]="ptm('pcBadge')" [unstyled]="unstyled()" />
+                                    }
+                                </a>
+                            }
+                        }
+                    </li>
+                }
+                @if (model() && home()) {
+                    <li [class]="cx('separator')" [pBind]="ptm('separator')">
+                        @if (!separatorTemplate() && !_separatorTemplate) {
+                            <svg data-p-icon="chevron-right" [pBind]="ptm('separatorIcon')" />
+                        }
+                        <ng-template *ngTemplateOutlet="separatorTemplate() || _separatorTemplate"></ng-template>
+                    </li>
+                }
+                @for (menuitem of model(); track menuitem; let end = $last; let 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 || _itemTemplate) {
+                                <ng-template *ngTemplateOutlet="itemTemplate || _itemTemplate; context: { $implicit: menuitem }"></ng-template>
+                            } @else {
+                                @if (!menuitem?.routerLink) {
+                                    <a
+                                        [attr.href]="menuitem?.url ? menuitem?.url : null"
+                                        [class]="cn(cx('itemLink'), menuitem?.linkClass)"
+                                        [ngStyle]="menuitem?.linkStyle"
+                                        (click)="onClick($event, menuitem)"
+                                        [target]="menuitem?.target"
+                                        [attr.title]="menuitem?.title"
+                                        [attr.tabindex]="menuitem?.disabled ? null : menuitem?.tabindex || '0'"
+                                        [attr.data-automationid]="menuitem?.automationId"
+                                        [pBind]="getPTOptions(menuitem, i, 'itemLink')"
+                                    >
+                                        @if (!itemTemplate && !_itemTemplate) {
+                                            @if (menuitem?.icon) {
+                                                <span [class]="cn(cx('itemIcon'), menuitem?.icon, menuitem?.iconClass)" [ngStyle]="menuitem?.iconStyle" [pBind]="getPTOptions(menuitem, i, 'itemIcon')"></span>
+                                            }
+                                            @if (menuitem?.label) {
+                                                @if (menuitem?.escape !== false) {
+                                                    <span [class]="cn(cx('itemLabel'), menuitem?.labelClass)" [ngStyle]="menuitem?.labelStyle" [pBind]="getPTOptions(menuitem, i, 'itemLabel')">{{ menuitem?.label }}</span>
+                                                } @else {
+                                                    <span [class]="cn(cx('itemLabel'), menuitem?.labelClass)" [ngStyle]="menuitem?.labelStyle" [innerHTML]="menuitem?.label" [pBind]="getPTOptions(menuitem, i, 'itemLabel')"></span>
+                                                }
+                                            }
+                                            @if (menuitem?.badge) {
+                                                <p-badge [styleClass]="menuitem?.badgeStyleClass" [value]="menuitem?.badge" [pt]="getPTOptions(menuitem, i, 'pcBadge')" [unstyled]="unstyled()" />
+                                            }
+                                        }
+                                    </a>
+                                }
+                                @if (menuitem?.routerLink) {
+                                    <a
+                                        [routerLink]="menuitem?.routerLink"
+                                        routerLinkActive="p-menuitem-link-active"
+                                        [queryParams]="menuitem?.queryParams"
+                                        [routerLinkActiveOptions]="menuitem?.routerLinkActiveOptions || { exact: false }"
+                                        [class]="cn(cx('itemLink'), menuitem?.linkClass)"
+                                        [ngStyle]="menuitem?.linkStyle"
+                                        (click)="onClick($event, menuitem)"
+                                        [target]="menuitem?.target"
+                                        [attr.title]="menuitem?.title"
+                                        [attr.tabindex]="menuitem?.disabled ? null : menuitem?.tabindex || '0'"
+                                        [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)" [ngStyle]="menuitem?.iconStyle" [pBind]="getPTOptions(menuitem, i, 'itemIcon')"></span>
+                                        }
+                                        @if (menuitem?.label) {
+                                            @if (menuitem?.escape !== false) {
+                                                <span [class]="cn(cx('itemLabel'), menuitem?.labelClass)" [ngStyle]="menuitem?.labelStyle" [pBind]="getPTOptions(menuitem, i, 'itemLabel')">{{ menuitem?.label }}</span>
+                                            } @else {
+                                                <span [class]="cn(cx('itemLabel'), menuitem?.labelClass)" [ngStyle]="menuitem?.labelStyle" [innerHTML]="menuitem?.label" [pBind]="getPTOptions(menuitem, i, 'itemLabel')"></span>
+                                            }
+                                        }
+                                        @if (menuitem?.badge) {
+                                            <p-badge [styleClass]="menuitem?.badgeStyleClass" [value]="menuitem?.badge" [pt]="getPTOptions(menuitem, i, 'pcBadge')" [unstyled]="unstyled()" />
+                                        }
+                                    </a>
+                                }
+                            }
+                        </li>
+                    }
+                    @if (!end && menuitem.visible !== false) {
+                        <li [class]="cx('separator')" [pBind]="ptm('separator')">
+                            @if (!separatorTemplate() && !_separatorTemplate) {
+                                <svg data-p-icon="chevron-right" [pBind]="ptm('separatorIcon')" />
+                            }
+                            <ng-template *ngTemplateOutlet="separatorTemplate() || _separatorTemplate"></ng-template>
+                        </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: ContentChild,
+                args: ['item']
+            }], separatorTemplate: [{ type: i0.ContentChild, args: ['separator', { isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PrimeTemplate), { isSignal: true }] }] } });
+class BreadcrumbModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: BreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: BreadcrumbModule, imports: [Breadcrumb, SharedModule], exports: [Breadcrumb, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: BreadcrumbModule, imports: [Breadcrumb, SharedModule, SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", 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=wawjs-ngx-prime-breadcrumb.mjs.map