1 | import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, NgModule } from '@angular/core';
|
2 | import { CommonModule } from '@angular/common';
|
3 | import { RouterModule } from '@angular/router';
|
4 |
|
5 | class Breadcrumb {
|
6 | constructor() {
|
7 | this.onItemClick = new EventEmitter();
|
8 | }
|
9 | itemClick(event, item) {
|
10 | if (item.disabled) {
|
11 | event.preventDefault();
|
12 | return;
|
13 | }
|
14 | if (!item.url) {
|
15 | event.preventDefault();
|
16 | }
|
17 | if (item.command) {
|
18 | item.command({
|
19 | originalEvent: event,
|
20 | item: item
|
21 | });
|
22 | }
|
23 | this.onItemClick.emit({
|
24 | originalEvent: event,
|
25 | item: item
|
26 | });
|
27 | }
|
28 | onHomeClick(event) {
|
29 | if (this.home) {
|
30 | this.itemClick(event, this.home);
|
31 | }
|
32 | }
|
33 | }
|
34 | Breadcrumb.decorators = [
|
35 | { type: Component, args: [{
|
36 | selector: 'p-breadcrumb',
|
37 | template: `
|
38 | <div [class]="styleClass" [ngStyle]="style" [ngClass]="'p-breadcrumb p-component'">
|
39 | <ul>
|
40 | <li [class]="home.styleClass" [ngClass]="{'p-breadcrumb-home': true, 'p-disabled':home.disabled}" [ngStyle]="home.style" *ngIf="home">
|
41 | <a *ngIf="!home.routerLink" [href]="home.url ? home.url : null" class="p-menuitem-link" (click)="itemClick($event, home)"
|
42 | [attr.target]="home.target" [attr.title]="home.title" [attr.id]="home.id" [attr.tabindex]="home.disabled ? null : '0'">
|
43 | <span *ngIf="home.icon" class="p-menuitem-icon" [ngClass]="home.icon||'pi pi-home'"></span>
|
44 | <ng-container *ngIf="home.label">
|
45 | <span *ngIf="home.escape !== false; else htmlHomeLabel" class="p-menuitem-text">{{home.label}}</span>
|
46 | <ng-template #htmlHomeLabel><span class="p-menuitem-text" [innerHTML]="home.label"></span></ng-template>
|
47 | </ng-container>
|
48 | </a>
|
49 | <a *ngIf="home.routerLink" [routerLink]="home.routerLink" [queryParams]="home.queryParams" [routerLinkActive]="'p-menuitem-link-active'" [routerLinkActiveOptions]="home.routerLinkActiveOptions||{exact:false}" class="p-menuitem-link" (click)="itemClick($event, home)"
|
50 | [attr.target]="home.target" [attr.title]="home.title" [attr.id]="home.id" [attr.tabindex]="home.disabled ? null : '0'"
|
51 | [fragment]="home.fragment" [queryParamsHandling]="home.queryParamsHandling" [preserveFragment]="home.preserveFragment" [skipLocationChange]="home.skipLocationChange" [replaceUrl]="home.replaceUrl" [state]="home.state">
|
52 | <span *ngIf="home.icon" class="p-menuitem-icon" [ngClass]="home.icon||'pi pi-home'"></span>
|
53 | <ng-container *ngIf="home.label">
|
54 | <span *ngIf="home.escape !== false; else htmlHomeRouteLabel" class="p-menuitem-text">{{home.label}}</span>
|
55 | <ng-template #htmlHomeRouteLabel><span class="p-menuitem-text" [innerHTML]="home.label"></span></ng-template>
|
56 | </ng-container>
|
57 | </a>
|
58 | </li>
|
59 | <li class="p-breadcrumb-chevron pi pi-chevron-right" *ngIf="model&&home"></li>
|
60 | <ng-template ngFor let-item let-end="last" [ngForOf]="model">
|
61 | <li [class]="item.styleClass" [ngStyle]="item.style">
|
62 | <a *ngIf="!item.routerLink" [attr.href]="item.url ? item.url : null" class="p-menuitem-link" (click)="itemClick($event, item)"
|
63 | [attr.target]="item.target" [attr.title]="item.title" [attr.id]="item.id" [attr.tabindex]="item.disabled ? null : '0'">
|
64 | <span *ngIf="item.icon" class="p-menuitem-icon" [ngClass]="item.icon"></span>
|
65 | <ng-container *ngIf="item.label">
|
66 | <span *ngIf="item.escape !== false; else htmlLabel" class="p-menuitem-text">{{item.label}}</span>
|
67 | <ng-template #htmlLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
|
68 | </ng-container>
|
69 | </a>
|
70 | <a *ngIf="item.routerLink" [routerLink]="item.routerLink" [queryParams]="item.queryParams" [routerLinkActive]="'p-menuitem-link-active'" [routerLinkActiveOptions]="item.routerLinkActiveOptions||{exact:false}" class="p-menuitem-link" (click)="itemClick($event, item)"
|
71 | [attr.target]="item.target" [attr.title]="item.title" [attr.id]="item.id" [attr.tabindex]="item.disabled ? null : '0'"
|
72 | [fragment]="item.fragment" [queryParamsHandling]="item.queryParamsHandling" [preserveFragment]="item.preserveFragment" [skipLocationChange]="item.skipLocationChange" [replaceUrl]="item.replaceUrl" [state]="item.state">
|
73 | <span *ngIf="item.icon" class="p-menuitem-icon" [ngClass]="item.icon"></span>
|
74 | <ng-container *ngIf="item.label">
|
75 | <span *ngIf="item.escape !== false; else htmlRouteLabel" class="p-menuitem-text">{{item.label}}</span>
|
76 | <ng-template #htmlRouteLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
|
77 | </ng-container>
|
78 | </a>
|
79 | </li>
|
80 | <li class="p-breadcrumb-chevron pi pi-chevron-right" *ngIf="!end"></li>
|
81 | </ng-template>
|
82 | </ul>
|
83 | </div>
|
84 | `,
|
85 | changeDetection: ChangeDetectionStrategy.OnPush,
|
86 | encapsulation: ViewEncapsulation.None,
|
87 | styles: [".p-breadcrumb ul{-ms-flex-align:center;-ms-flex-wrap:wrap;align-items:center;display:-ms-flexbox;display:flex;flex-wrap:wrap;list-style-type:none;margin:0;padding:0}.p-breadcrumb .p-menuitem-text{line-height:1}.p-breadcrumb .p-menuitem-link{text-decoration:none}"]
|
88 | },] }
|
89 | ];
|
90 | Breadcrumb.propDecorators = {
|
91 | model: [{ type: Input }],
|
92 | style: [{ type: Input }],
|
93 | styleClass: [{ type: Input }],
|
94 | home: [{ type: Input }],
|
95 | onItemClick: [{ type: Output }]
|
96 | };
|
97 | class BreadcrumbModule {
|
98 | }
|
99 | BreadcrumbModule.decorators = [
|
100 | { type: NgModule, args: [{
|
101 | imports: [CommonModule, RouterModule],
|
102 | exports: [Breadcrumb, RouterModule],
|
103 | declarations: [Breadcrumb]
|
104 | },] }
|
105 | ];
|
106 |
|
107 |
|
108 |
|
109 |
|
110 |
|
111 | export { Breadcrumb, BreadcrumbModule };
|
112 |
|