1 | import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef, Input, Output, NgModule } from '@angular/core';
|
2 | import { CommonModule } from '@angular/common';
|
3 | import { Router, ActivatedRoute, RouterModule } from '@angular/router';
|
4 |
|
5 | class Steps {
|
6 | constructor(router, route, cd) {
|
7 | this.router = router;
|
8 | this.route = route;
|
9 | this.cd = cd;
|
10 | this.activeIndex = 0;
|
11 | this.readonly = true;
|
12 | this.activeIndexChange = new EventEmitter();
|
13 | }
|
14 | ngOnInit() {
|
15 | this.subscription = this.router.events.subscribe(() => this.cd.markForCheck());
|
16 | }
|
17 | itemClick(event, item, i) {
|
18 | if (this.readonly || item.disabled) {
|
19 | event.preventDefault();
|
20 | return;
|
21 | }
|
22 | this.activeIndexChange.emit(i);
|
23 | if (!item.url) {
|
24 | event.preventDefault();
|
25 | }
|
26 | if (item.command) {
|
27 | item.command({
|
28 | originalEvent: event,
|
29 | item: item,
|
30 | index: i
|
31 | });
|
32 | }
|
33 | }
|
34 | isClickableRouterLink(item) {
|
35 | return item.routerLink && !this.readonly && !item.disabled;
|
36 | }
|
37 | isActive(item, index) {
|
38 | if (item.routerLink)
|
39 | return this.router.isActive(item.routerLink, false) || this.router.isActive(this.router.createUrlTree([item.routerLink], { relativeTo: this.route }).toString(), false);
|
40 | else
|
41 | return index === this.activeIndex;
|
42 | }
|
43 | ngOnDestroy() {
|
44 | this.subscription.unsubscribe();
|
45 | }
|
46 | }
|
47 | Steps.decorators = [
|
48 | { type: Component, args: [{
|
49 | selector: 'p-steps',
|
50 | template: `
|
51 | <div [ngClass]="{'p-steps p-component':true,'p-readonly':readonly}" [ngStyle]="style" [class]="styleClass">
|
52 | <ul role="tablist">
|
53 | <li *ngFor="let item of model; let i = index" class="p-steps-item" #menuitem [ngStyle]="item.style" [class]="item.styleClass" role="tab" [attr.aria-selected]="i === activeIndex" [attr.aria-expanded]="i === activeIndex"
|
54 | [ngClass]="{'p-highlight p-steps-current': isActive(item, i), 'p-disabled': item.disabled || (readonly && !isActive(item, i))}">
|
55 | <a *ngIf="isClickableRouterLink(item); else elseBlock" [routerLink]="item.routerLink" [queryParams]="item.queryParams" role="presentation" [routerLinkActive]="'p-menuitem-link-active'" [routerLinkActiveOptions]="item.routerLinkActiveOptions||{exact:false}" class="p-menuitem-link"
|
56 | (click)="itemClick($event, item, i)" (keydown.enter)="itemClick($event, item, i)" [attr.target]="item.target" [attr.id]="item.id" [attr.tabindex]="item.disabled || readonly ? null : (item.tabindex ? item.tabindex : '0')"
|
57 | [fragment]="item.fragment" [queryParamsHandling]="item.queryParamsHandling" [preserveFragment]="item.preserveFragment" [skipLocationChange]="item.skipLocationChange" [replaceUrl]="item.replaceUrl" [state]="item.state">
|
58 | <span class="p-steps-number">{{i + 1}}</span>
|
59 | <span class="p-steps-title" *ngIf="item.escape !== false; else htmlLabel">{{item.label}}</span>
|
60 | <ng-template #htmlLabel><span class="p-steps-title" [innerHTML]="item.label"></span></ng-template>
|
61 | </a>
|
62 | <ng-template #elseBlock>
|
63 | <a [attr.href]="item.url" class="p-menuitem-link" role="presentation" (click)="itemClick($event, item, i)" (keydown.enter)="itemClick($event, item, i)" [attr.target]="item.target" [attr.id]="item.id"
|
64 | [attr.tabindex]="item.disabled||(i !== activeIndex && readonly) ? null : (item.tabindex ? item.tabindex : '0')">
|
65 | <span class="p-steps-number">{{i + 1}}</span>
|
66 | <span class="p-steps-title" *ngIf="item.escape !== false; else htmlRouteLabel">{{item.label}}</span>
|
67 | <ng-template #htmlRouteLabel><span class="p-steps-title" [innerHTML]="item.label"></span></ng-template>
|
68 | </a>
|
69 | </ng-template>
|
70 | </li>
|
71 | </ul>
|
72 | </div>
|
73 | `,
|
74 | changeDetection: ChangeDetectionStrategy.OnPush,
|
75 | encapsulation: ViewEncapsulation.None,
|
76 | styles: [".p-steps{position:relative}.p-steps ul{list-style-type:none;margin:0;padding:0}.p-steps-item,.p-steps ul{display:-ms-flexbox;display:flex}.p-steps-item{-ms-flex:1 1 auto;-ms-flex-pack:center;flex:1 1 auto;justify-content:center;position:relative}.p-steps-item .p-menuitem-link{-ms-flex-align:center;-ms-flex-direction:column;align-items:center;display:-ms-inline-flexbox;display:inline-flex;flex-direction:column;overflow:hidden;text-decoration:none}.p-steps.p-steps-readonly .p-steps-item{cursor:auto}.p-steps-item.p-steps-current .p-menuitem-link{cursor:default}.p-steps-title{white-space:nowrap}.p-steps-number{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;display:-ms-flexbox;display:flex;justify-content:center}.p-steps-title{display:block}"]
|
77 | },] }
|
78 | ];
|
79 | Steps.ctorParameters = () => [
|
80 | { type: Router },
|
81 | { type: ActivatedRoute },
|
82 | { type: ChangeDetectorRef }
|
83 | ];
|
84 | Steps.propDecorators = {
|
85 | activeIndex: [{ type: Input }],
|
86 | model: [{ type: Input }],
|
87 | readonly: [{ type: Input }],
|
88 | style: [{ type: Input }],
|
89 | styleClass: [{ type: Input }],
|
90 | activeIndexChange: [{ type: Output }]
|
91 | };
|
92 | class StepsModule {
|
93 | }
|
94 | StepsModule.decorators = [
|
95 | { type: NgModule, args: [{
|
96 | imports: [CommonModule, RouterModule],
|
97 | exports: [Steps, RouterModule],
|
98 | declarations: [Steps]
|
99 | },] }
|
100 | ];
|
101 |
|
102 |
|
103 |
|
104 |
|
105 |
|
106 | export { Steps, StepsModule };
|
107 |
|