gnezim
108 lines
5.7 KiB
JavaScript
108 lines
5.7 KiB
JavaScript
import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef, Input, Output, NgModule } from '@angular/core';
|
|
import { CommonModule } from '@angular/common';
|
|
import { Router, ActivatedRoute, RouterModule } from '@angular/router';
|
|
|
|
class Steps {
|
|
constructor(router, route, cd) {
|
|
this.router = router;
|
|
this.route = route;
|
|
this.cd = cd;
|
|
this.activeIndex = 0;
|
|
this.readonly = true;
|
|
this.activeIndexChange = new EventEmitter();
|
|
}
|
|
ngOnInit() {
|
|
this.subscription = this.router.events.subscribe(() => this.cd.markForCheck());
|
|
}
|
|
itemClick(event, item, i) {
|
|
if (this.readonly || item.disabled) {
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
this.activeIndexChange.emit(i);
|
|
if (!item.url) {
|
|
event.preventDefault();
|
|
}
|
|
if (item.command) {
|
|
item.command({
|
|
originalEvent: event,
|
|
item: item,
|
|
index: i
|
|
});
|
|
}
|
|
}
|
|
isClickableRouterLink(item) {
|
|
return item.routerLink && !this.readonly && !item.disabled;
|
|
}
|
|
isActive(item, index) {
|
|
if (item.routerLink)
|
|
return this.router.isActive(item.routerLink, false) || this.router.isActive(this.router.createUrlTree([item.routerLink], { relativeTo: this.route }).toString(), false);
|
|
else
|
|
return index === this.activeIndex;
|
|
}
|
|
ngOnDestroy() {
|
|
this.subscription.unsubscribe();
|
|
}
|
|
}
|
|
Steps.decorators = [
|
|
{ type: Component, args: [{
|
|
selector: 'p-steps',
|
|
template: `
|
|
<div [ngClass]="{'p-steps p-component':true,'p-readonly':readonly}" [ngStyle]="style" [class]="styleClass">
|
|
<ul role="tablist">
|
|
<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"
|
|
[ngClass]="{'p-highlight p-steps-current': isActive(item, i), 'p-disabled': item.disabled || (readonly && !isActive(item, i))}">
|
|
<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"
|
|
(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')"
|
|
[fragment]="item.fragment" [queryParamsHandling]="item.queryParamsHandling" [preserveFragment]="item.preserveFragment" [skipLocationChange]="item.skipLocationChange" [replaceUrl]="item.replaceUrl" [state]="item.state">
|
|
<span class="p-steps-number">{{i + 1}}</span>
|
|
<span class="p-steps-title" *ngIf="item.escape !== false; else htmlLabel">{{item.label}}</span>
|
|
<ng-template #htmlLabel><span class="p-steps-title" [innerHTML]="item.label"></span></ng-template>
|
|
</a>
|
|
<ng-template #elseBlock>
|
|
<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"
|
|
[attr.tabindex]="item.disabled||(i !== activeIndex && readonly) ? null : (item.tabindex ? item.tabindex : '0')">
|
|
<span class="p-steps-number">{{i + 1}}</span>
|
|
<span class="p-steps-title" *ngIf="item.escape !== false; else htmlRouteLabel">{{item.label}}</span>
|
|
<ng-template #htmlRouteLabel><span class="p-steps-title" [innerHTML]="item.label"></span></ng-template>
|
|
</a>
|
|
</ng-template>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
`,
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
encapsulation: ViewEncapsulation.None,
|
|
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}"]
|
|
},] }
|
|
];
|
|
Steps.ctorParameters = () => [
|
|
{ type: Router },
|
|
{ type: ActivatedRoute },
|
|
{ type: ChangeDetectorRef }
|
|
];
|
|
Steps.propDecorators = {
|
|
activeIndex: [{ type: Input }],
|
|
model: [{ type: Input }],
|
|
readonly: [{ type: Input }],
|
|
style: [{ type: Input }],
|
|
styleClass: [{ type: Input }],
|
|
activeIndexChange: [{ type: Output }]
|
|
};
|
|
class StepsModule {
|
|
}
|
|
StepsModule.decorators = [
|
|
{ type: NgModule, args: [{
|
|
imports: [CommonModule, RouterModule],
|
|
exports: [Steps, RouterModule],
|
|
declarations: [Steps]
|
|
},] }
|
|
];
|
|
|
|
/**
|
|
* Generated bundle index. Do not edit.
|
|
*/
|
|
|
|
export { Steps, StepsModule };
|
|
//# sourceMappingURL=primeng-steps.js.map
|