1 | import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ViewChild, ContentChildren, NgModule } from '@angular/core';
|
2 | import { CommonModule } from '@angular/common';
|
3 | import { RippleModule } from 'primeng/ripple';
|
4 | import { PrimeTemplate, SharedModule } from 'primeng/api';
|
5 | import { RouterModule } from '@angular/router';
|
6 | import { DomHandler } from 'primeng/dom';
|
7 |
|
8 | class TabMenu {
|
9 | ngAfterContentInit() {
|
10 | this.templates.forEach((item) => {
|
11 | switch (item.getType()) {
|
12 | case 'item':
|
13 | this.itemTemplate = item.template;
|
14 | break;
|
15 | default:
|
16 | this.itemTemplate = item.template;
|
17 | break;
|
18 | }
|
19 | });
|
20 | }
|
21 | ngAfterViewInit() {
|
22 | this.updateInkBar();
|
23 | }
|
24 | ngAfterViewChecked() {
|
25 | if (this.tabChanged) {
|
26 | this.updateInkBar();
|
27 | this.tabChanged = false;
|
28 | }
|
29 | }
|
30 | itemClick(event, item) {
|
31 | if (item.disabled) {
|
32 | event.preventDefault();
|
33 | return;
|
34 | }
|
35 | if (item.command) {
|
36 | item.command({
|
37 | originalEvent: event,
|
38 | item: item
|
39 | });
|
40 | }
|
41 | this.activeItem = item;
|
42 | this.tabChanged = true;
|
43 | }
|
44 | updateInkBar() {
|
45 | let tabHeader = DomHandler.findSingle(this.navbar.nativeElement, 'li.p-highlight');
|
46 | if (tabHeader) {
|
47 | this.inkbar.nativeElement.style.width = DomHandler.getWidth(tabHeader) + 'px';
|
48 | this.inkbar.nativeElement.style.left = DomHandler.getOffset(tabHeader).left - DomHandler.getOffset(this.navbar.nativeElement).left + 'px';
|
49 | }
|
50 | }
|
51 | }
|
52 | TabMenu.decorators = [
|
53 | { type: Component, args: [{
|
54 | selector: 'p-tabMenu',
|
55 | template: `
|
56 | <div [ngClass]="'p-tabmenu p-component'" [ngStyle]="style" [class]="styleClass">
|
57 | <ul #navbar class="p-tabmenu-nav p-reset" role="tablist">
|
58 | <li *ngFor="let item of model; let i = index" role="tab" [attr.aria-selected]="activeItem==item" [attr.aria-expanded]="activeItem==item"
|
59 | [ngClass]="{'p-tabmenuitem':true,'p-disabled':item.disabled,'p-highlight':activeItem==item,'p-hidden': item.visible === false}">
|
60 | <a *ngIf="!item.routerLink" [attr.href]="item.url" class="p-menuitem-link" role="presentation" (click)="itemClick($event,item)" [attr.tabindex]="item.disabled ? null : '0'"
|
61 | [attr.target]="item.target" [attr.title]="item.title" [attr.id]="item.id" pRipple>
|
62 | <ng-container *ngIf="!itemTemplate">
|
63 | <span class="p-menuitem-icon" [ngClass]="item.icon" *ngIf="item.icon"></span>
|
64 | <span class="p-menuitem-text" *ngIf="item.escape !== false; else htmlLabel">{{item.label}}</span>
|
65 | <ng-template #htmlLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
|
66 | </ng-container>
|
67 | <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item, index: i}"></ng-container>
|
68 | </a>
|
69 | <a *ngIf="item.routerLink" [routerLink]="item.routerLink" [queryParams]="item.queryParams" [routerLinkActive]="'p-menuitem-link-active'" [routerLinkActiveOptions]="item.routerLinkActiveOptions||{exact:false}"
|
70 | role="presentation" class="p-menuitem-link" (click)="itemClick($event,item)" [attr.tabindex]="item.disabled ? null : '0'"
|
71 | [attr.target]="item.target" [attr.title]="item.title" [attr.id]="item.id"
|
72 | [fragment]="item.fragment" [queryParamsHandling]="item.queryParamsHandling" [preserveFragment]="item.preserveFragment" [skipLocationChange]="item.skipLocationChange" [replaceUrl]="item.replaceUrl" [state]="item.state" pRipple>
|
73 | <ng-container *ngIf="!itemTemplate">
|
74 | <span class="p-menuitem-icon" [ngClass]="item.icon" *ngIf="item.icon"></span>
|
75 | <span class="p-menuitem-text" *ngIf="item.escape !== false; else htmlRouteLabel">{{item.label}}</span>
|
76 | <ng-template #htmlRouteLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
|
77 | </ng-container>
|
78 | <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item, index: i}"></ng-container>
|
79 | </a>
|
80 | </li>
|
81 | <li #inkbar class="p-tabmenu-ink-bar"></li>
|
82 | </ul>
|
83 | </div>
|
84 | `,
|
85 | changeDetection: ChangeDetectionStrategy.OnPush,
|
86 | encapsulation: ViewEncapsulation.None,
|
87 | styles: [".p-tabmenu-nav{-ms-flex-wrap:wrap;flex-wrap:wrap;list-style-type:none;margin:0;padding:0}.p-tabmenu-nav,.p-tabmenu-nav a{display:-ms-flexbox;display:flex}.p-tabmenu-nav a{-moz-user-select:none;-ms-flex-align:center;-ms-user-select:none;-webkit-user-select:none;align-items:center;cursor:pointer;overflow:hidden;position:relative;text-decoration:none;user-select:none}.p-tabmenu-nav a:focus{z-index:1}.p-tabmenu-nav .p-menuitem-text{line-height:1}.p-tabmenu-ink-bar{display:none;z-index:1}"]
|
88 | },] }
|
89 | ];
|
90 | TabMenu.propDecorators = {
|
91 | model: [{ type: Input }],
|
92 | activeItem: [{ type: Input }],
|
93 | popup: [{ type: Input }],
|
94 | style: [{ type: Input }],
|
95 | styleClass: [{ type: Input }],
|
96 | navbar: [{ type: ViewChild, args: ['navbar',] }],
|
97 | inkbar: [{ type: ViewChild, args: ['inkbar',] }],
|
98 | templates: [{ type: ContentChildren, args: [PrimeTemplate,] }]
|
99 | };
|
100 | class TabMenuModule {
|
101 | }
|
102 | TabMenuModule.decorators = [
|
103 | { type: NgModule, args: [{
|
104 | imports: [CommonModule, RouterModule, SharedModule, RippleModule],
|
105 | exports: [TabMenu, RouterModule, SharedModule],
|
106 | declarations: [TabMenu]
|
107 | },] }
|
108 | ];
|
109 |
|
110 |
|
111 |
|
112 |
|
113 |
|
114 | export { TabMenu, TabMenuModule };
|
115 |
|