UNPKG

primeng

Version:

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

534 lines (519 loc) 28.1 kB
import * as i2 from '@angular/common'; import { CommonModule } from '@angular/common'; import * as i0 from '@angular/core'; import { Injectable, EventEmitter, inject, ContentChildren, ContentChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core'; import * as i1 from '@angular/router'; import { RouterModule } from '@angular/router'; import { SharedModule, PrimeTemplate } from 'primeng/api'; import { BaseComponent } from 'primeng/basecomponent'; import { ChevronRightIcon, HomeIcon } from 'primeng/icons'; import * as i3 from 'primeng/tooltip'; import { TooltipModule } from 'primeng/tooltip'; import { BaseStyle } from 'primeng/base'; const theme = ({ dt }) => ` .p-breadcrumb { background: ${dt('breadcrumb.background')}; padding: ${dt('breadcrumb.padding')}; overflow-x: auto; } .p-breadcrumb-list { margin: 0; padding: 0; list-style-type: none; display: flex; align-items: center; flex-wrap: nowrap; gap: ${dt('breadcrumb.gap')}; } .p-breadcrumb-separator { display: flex; align-items: center; color: ${dt('breadcrumb.separator.color')}; } .p-breadcrumb-separator .p-icon:dir(rtl) { transform: rotate(180deg); } .p-breadcrumb::-webkit-scrollbar { display: none; } .p-breadcrumb-item-link { text-decoration: none; display: flex; align-items: center; gap: ${dt('breadcrumb.item.gap')}; transition: background ${dt('breadcrumb.transition.duration')}, color ${dt('breadcrumb.transition.duration')}, outline-color ${dt('breadcrumb.transition.duration')}, box-shadow ${dt('breadcrumb.transition.duration')}; border-radius: ${dt('breadcrumb.item.border.radius')}; outline-color: transparent; color: ${dt('breadcrumb.item.color')}; } .p-breadcrumb-item-link:focus-visible { box-shadow: ${dt('breadcrumb.item.focus.ring.shadow')}; outline: ${dt('breadcrumb.item.focus.ring.width')} ${dt('breadcrumb.item.focus.ring.style')} ${dt('breadcrumb.item.focus.ring.color')}; outline-offset: ${dt('breadcrumb.item.focus.ring.offset')}; } .p-breadcrumb-item-link:hover .p-breadcrumb-item-label { color: ${dt('breadcrumb.item.hover.color')}; } .p-breadcrumb-item-label { transition: inherit; } .p-breadcrumb-item-icon { color: ${dt('breadcrumb.item.icon.color')}; transition: inherit; } .p-breadcrumb-item-link:hover .p-breadcrumb-item-icon { color: ${dt('breadcrumb.item.icon.hover.color')}; } `; const classes = { root: 'p-breadcrumb p-component', list: 'p-breadcrumb-list', homeItem: 'p-breadcrumb-home-item', separator: 'p-breadcrumb-separator', item: ({ instance }) => ['p-breadcrumb-item', { 'p-disabled': instance.disabled() }], itemLink: 'p-breadcrumb-item-link', itemIcon: 'p-breadcrumb-item-icon', itemLabel: 'p-breadcrumb-item-label' }; class BreadCrumbStyle extends BaseStyle { name = 'breadcrumb'; theme = theme; classes = classes; static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BreadCrumbStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BreadCrumbStyle }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", 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 = {})); /** * Breadcrumb provides contextual information about page hierarchy. * @group Components */ class Breadcrumb extends BaseComponent { router; /** * An array of menuitems. * @group Props */ model; /** * Inline style of the component. * @group Props */ style; /** * Style class of the component. * @group Props */ styleClass; /** * MenuItem configuration for the home icon. * @group Props */ home; /** * Defines a string that labels the home icon for accessibility. * @group Props */ homeAriaLabel; /** * Fired when an item is selected. * @param {BreadcrumbItemClickEvent} event - custom click event. * @group Emits */ onItemClick = new EventEmitter(); _componentStyle = inject(BreadCrumbStyle); constructor(router) { super(); this.router = 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 }); } /** * Defines template option for item. * @group Templates */ itemTemplate; /** * Defines template option for separator. * @group Templates */ separatorTemplate; templates; _separatorTemplate; _itemTemplate; ngAfterContentInit() { 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; } }); } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: Breadcrumb, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: Breadcrumb, isStandalone: true, selector: "p-breadcrumb", inputs: { model: "model", style: "style", styleClass: "styleClass", home: "home", homeAriaLabel: "homeAriaLabel" }, outputs: { onItemClick: "onItemClick" }, providers: [BreadCrumbStyle], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true }, { propertyName: "separatorTemplate", first: true, predicate: ["separator"], descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, ngImport: i0, template: ` <nav [class]="styleClass" [ngStyle]="style" [ngClass]="'p-breadcrumb p-component'" [attr.data-pc-name]="'breadcrumb'" [attr.data-pc-section]="'root'"> <ol [attr.data-pc-section]="'menu'" class="p-breadcrumb-list"> <li [class]="home.styleClass" [attr.id]="home.id" [ngClass]="{ 'p-breadcrumb-home-item': true, 'p-disabled': home.disabled }" [ngStyle]="home.style" *ngIf="home && home.visible !== false" pTooltip [tooltipOptions]="home.tooltipOptions" [attr.data-pc-section]="'home'" > <a [href]="home.url ? home.url : null" *ngIf="!home.routerLink" [attr.aria-label]="homeAriaLabel" class="p-breadcrumb-item-link" (click)="onClick($event, home)" [target]="home.target" [attr.title]="home.title" [attr.tabindex]="home.disabled ? null : '0'" > <span *ngIf="home.icon" class="p-breadcrumb-item-icon" [ngClass]="home.icon" [ngStyle]="home?.style"></span> <HomeIcon *ngIf="!home.icon" [styleClass]="'p-breadcrumb-item-icon'" /> <ng-container *ngIf="home.label"> <span *ngIf="home.escape !== false; else htmlHomeLabel" class="p-breadcrumb-item-label">{{ home.label }}</span> <ng-template #htmlHomeLabel><span class="p-breadcrumb-item-label" [innerHTML]="home.label"></span></ng-template> </ng-container> </a> <a *ngIf="home.routerLink" [routerLink]="home.routerLink" [attr.aria-label]="homeAriaLabel" [queryParams]="home.queryParams" [routerLinkActiveOptions]="home.routerLinkActiveOptions || { exact: false }" class="p-breadcrumb-item-link" (click)="onClick($event, home)" [target]="home.target" [attr.title]="home.title" [attr.tabindex]="home.disabled ? null : '0'" [fragment]="home.fragment" [queryParamsHandling]="home.queryParamsHandling" [preserveFragment]="home.preserveFragment" [skipLocationChange]="home.skipLocationChange" [replaceUrl]="home.replaceUrl" [state]="home.state" > <span *ngIf="home.icon" class="p-breadcrumb-item-icon" [ngClass]="home.icon" [ngStyle]="home.iconStyle"></span> <HomeIcon *ngIf="!home.icon" [styleClass]="'p-breadcrumb-item-icon'" /> <ng-container *ngIf="home.label"> <span *ngIf="home.escape !== false; else htmlHomeRouteLabel" class="p-breadcrumb-item-label">{{ home.label }}</span> <ng-template #htmlHomeRouteLabel><span class="p-breadcrumb-item-label" [innerHTML]="home.label"></span></ng-template> </ng-container> </a> </li> <li *ngIf="model && home" class="p-breadcrumb-separator" [attr.data-pc-section]="'separator'"> <ChevronRightIcon *ngIf="!separatorTemplate && !_separatorTemplate" /> <ng-template *ngTemplateOutlet="separatorTemplate || _separatorTemplate"></ng-template> </li> <ng-template ngFor let-menuitem let-end="last" [ngForOf]="model"> <li *ngIf="menuitem.visible !== false" [class]="menuitem.styleClass" [attr.id]="menuitem.id" [ngStyle]="menuitem.style" [ngClass]="{ 'p-breadcrumb-item': true, 'p-disabled': menuitem.disabled }" pTooltip [tooltipOptions]="menuitem.tooltipOptions" [attr.data-pc-section]="'menuitem'" > @if (itemTemplate || _itemTemplate) { <ng-template *ngTemplateOutlet="itemTemplate || _itemTemplate; context: { $implicit: menuitem }"></ng-template> } @else { <a *ngIf="!menuitem?.routerLink" [attr.href]="menuitem?.url ? menuitem?.url : null" class="p-breadcrumb-item-link" (click)="onClick($event, menuitem)" [target]="menuitem?.target" [attr.title]="menuitem?.title" [attr.tabindex]="menuitem?.disabled ? null : '0'" > <ng-container *ngIf="!itemTemplate && !_itemTemplate"> <span *ngIf="menuitem?.icon" class="p-breadcrumb-item-icon" [ngClass]="menuitem?.icon" [ngStyle]="menuitem?.iconStyle"></span> <ng-container *ngIf="menuitem?.label"> <span *ngIf="menuitem?.escape !== false; else htmlLabel" class="p-breadcrumb-item-label">{{ menuitem?.label }}</span> <ng-template #htmlLabel><span class="p-breadcrumb-item-label" [innerHTML]="menuitem?.label"></span></ng-template> </ng-container> </ng-container> </a> <a *ngIf="menuitem?.routerLink" [routerLink]="menuitem?.routerLink" [queryParams]="menuitem?.queryParams" [routerLinkActiveOptions]="menuitem?.routerLinkActiveOptions || { exact: false }" class="p-breadcrumb-item-link" (click)="onClick($event, menuitem)" [target]="menuitem?.target" [attr.title]="menuitem?.title" [attr.tabindex]="menuitem?.disabled ? null : '0'" [fragment]="menuitem?.fragment" [queryParamsHandling]="menuitem?.queryParamsHandling" [preserveFragment]="menuitem?.preserveFragment" [skipLocationChange]="menuitem?.skipLocationChange" [replaceUrl]="menuitem?.replaceUrl" [state]="menuitem?.state" > <span *ngIf="menuitem?.icon" class="p-breadcrumb-item-icon" [ngClass]="menuitem?.icon" [ngStyle]="menuitem?.iconStyle"></span> <ng-container *ngIf="menuitem?.label"> <span *ngIf="menuitem?.escape !== false; else htmlRouteLabel" class="p-breadcrumb-item-label">{{ menuitem?.label }}</span> <ng-template #htmlRouteLabel><span class="p-breadcrumb-item-label" [innerHTML]="menuitem?.label"></span></ng-template> </ng-container> </a> } </li> <li *ngIf="!end && menuitem.visible !== false" class="p-breadcrumb-separator" [attr.data-pc-section]="'separator'"> <ChevronRightIcon *ngIf="!separatorTemplate && !_separatorTemplate" /> <ng-template *ngTemplateOutlet="separatorTemplate || _separatorTemplate"></ng-template> </li> </ng-template> </ol> </nav> `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: ChevronRightIcon, selector: "ChevronRightIcon" }, { kind: "component", type: HomeIcon, selector: "HomeIcon" }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: Breadcrumb, decorators: [{ type: Component, args: [{ selector: 'p-breadcrumb', standalone: true, imports: [CommonModule, RouterModule, TooltipModule, ChevronRightIcon, HomeIcon, SharedModule], template: ` <nav [class]="styleClass" [ngStyle]="style" [ngClass]="'p-breadcrumb p-component'" [attr.data-pc-name]="'breadcrumb'" [attr.data-pc-section]="'root'"> <ol [attr.data-pc-section]="'menu'" class="p-breadcrumb-list"> <li [class]="home.styleClass" [attr.id]="home.id" [ngClass]="{ 'p-breadcrumb-home-item': true, 'p-disabled': home.disabled }" [ngStyle]="home.style" *ngIf="home && home.visible !== false" pTooltip [tooltipOptions]="home.tooltipOptions" [attr.data-pc-section]="'home'" > <a [href]="home.url ? home.url : null" *ngIf="!home.routerLink" [attr.aria-label]="homeAriaLabel" class="p-breadcrumb-item-link" (click)="onClick($event, home)" [target]="home.target" [attr.title]="home.title" [attr.tabindex]="home.disabled ? null : '0'" > <span *ngIf="home.icon" class="p-breadcrumb-item-icon" [ngClass]="home.icon" [ngStyle]="home?.style"></span> <HomeIcon *ngIf="!home.icon" [styleClass]="'p-breadcrumb-item-icon'" /> <ng-container *ngIf="home.label"> <span *ngIf="home.escape !== false; else htmlHomeLabel" class="p-breadcrumb-item-label">{{ home.label }}</span> <ng-template #htmlHomeLabel><span class="p-breadcrumb-item-label" [innerHTML]="home.label"></span></ng-template> </ng-container> </a> <a *ngIf="home.routerLink" [routerLink]="home.routerLink" [attr.aria-label]="homeAriaLabel" [queryParams]="home.queryParams" [routerLinkActiveOptions]="home.routerLinkActiveOptions || { exact: false }" class="p-breadcrumb-item-link" (click)="onClick($event, home)" [target]="home.target" [attr.title]="home.title" [attr.tabindex]="home.disabled ? null : '0'" [fragment]="home.fragment" [queryParamsHandling]="home.queryParamsHandling" [preserveFragment]="home.preserveFragment" [skipLocationChange]="home.skipLocationChange" [replaceUrl]="home.replaceUrl" [state]="home.state" > <span *ngIf="home.icon" class="p-breadcrumb-item-icon" [ngClass]="home.icon" [ngStyle]="home.iconStyle"></span> <HomeIcon *ngIf="!home.icon" [styleClass]="'p-breadcrumb-item-icon'" /> <ng-container *ngIf="home.label"> <span *ngIf="home.escape !== false; else htmlHomeRouteLabel" class="p-breadcrumb-item-label">{{ home.label }}</span> <ng-template #htmlHomeRouteLabel><span class="p-breadcrumb-item-label" [innerHTML]="home.label"></span></ng-template> </ng-container> </a> </li> <li *ngIf="model && home" class="p-breadcrumb-separator" [attr.data-pc-section]="'separator'"> <ChevronRightIcon *ngIf="!separatorTemplate && !_separatorTemplate" /> <ng-template *ngTemplateOutlet="separatorTemplate || _separatorTemplate"></ng-template> </li> <ng-template ngFor let-menuitem let-end="last" [ngForOf]="model"> <li *ngIf="menuitem.visible !== false" [class]="menuitem.styleClass" [attr.id]="menuitem.id" [ngStyle]="menuitem.style" [ngClass]="{ 'p-breadcrumb-item': true, 'p-disabled': menuitem.disabled }" pTooltip [tooltipOptions]="menuitem.tooltipOptions" [attr.data-pc-section]="'menuitem'" > @if (itemTemplate || _itemTemplate) { <ng-template *ngTemplateOutlet="itemTemplate || _itemTemplate; context: { $implicit: menuitem }"></ng-template> } @else { <a *ngIf="!menuitem?.routerLink" [attr.href]="menuitem?.url ? menuitem?.url : null" class="p-breadcrumb-item-link" (click)="onClick($event, menuitem)" [target]="menuitem?.target" [attr.title]="menuitem?.title" [attr.tabindex]="menuitem?.disabled ? null : '0'" > <ng-container *ngIf="!itemTemplate && !_itemTemplate"> <span *ngIf="menuitem?.icon" class="p-breadcrumb-item-icon" [ngClass]="menuitem?.icon" [ngStyle]="menuitem?.iconStyle"></span> <ng-container *ngIf="menuitem?.label"> <span *ngIf="menuitem?.escape !== false; else htmlLabel" class="p-breadcrumb-item-label">{{ menuitem?.label }}</span> <ng-template #htmlLabel><span class="p-breadcrumb-item-label" [innerHTML]="menuitem?.label"></span></ng-template> </ng-container> </ng-container> </a> <a *ngIf="menuitem?.routerLink" [routerLink]="menuitem?.routerLink" [queryParams]="menuitem?.queryParams" [routerLinkActiveOptions]="menuitem?.routerLinkActiveOptions || { exact: false }" class="p-breadcrumb-item-link" (click)="onClick($event, menuitem)" [target]="menuitem?.target" [attr.title]="menuitem?.title" [attr.tabindex]="menuitem?.disabled ? null : '0'" [fragment]="menuitem?.fragment" [queryParamsHandling]="menuitem?.queryParamsHandling" [preserveFragment]="menuitem?.preserveFragment" [skipLocationChange]="menuitem?.skipLocationChange" [replaceUrl]="menuitem?.replaceUrl" [state]="menuitem?.state" > <span *ngIf="menuitem?.icon" class="p-breadcrumb-item-icon" [ngClass]="menuitem?.icon" [ngStyle]="menuitem?.iconStyle"></span> <ng-container *ngIf="menuitem?.label"> <span *ngIf="menuitem?.escape !== false; else htmlRouteLabel" class="p-breadcrumb-item-label">{{ menuitem?.label }}</span> <ng-template #htmlRouteLabel><span class="p-breadcrumb-item-label" [innerHTML]="menuitem?.label"></span></ng-template> </ng-container> </a> } </li> <li *ngIf="!end && menuitem.visible !== false" class="p-breadcrumb-separator" [attr.data-pc-section]="'separator'"> <ChevronRightIcon *ngIf="!separatorTemplate && !_separatorTemplate" /> <ng-template *ngTemplateOutlet="separatorTemplate || _separatorTemplate"></ng-template> </li> </ng-template> </ol> </nav> `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [BreadCrumbStyle] }] }], ctorParameters: () => [{ type: i1.Router }], propDecorators: { model: [{ type: Input }], style: [{ type: Input }], styleClass: [{ type: Input }], home: [{ type: Input }], homeAriaLabel: [{ type: Input }], onItemClick: [{ type: Output }], itemTemplate: [{ type: ContentChild, args: ['item'] }], separatorTemplate: [{ type: ContentChild, args: ['separator'] }], templates: [{ type: ContentChildren, args: [PrimeTemplate] }] } }); class BreadcrumbModule { static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: BreadcrumbModule, imports: [Breadcrumb, SharedModule], exports: [Breadcrumb, SharedModule] }); static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: BreadcrumbModule, imports: [Breadcrumb, SharedModule, SharedModule] }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", 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