| 1 | import * as i0 from '@angular/core';
|
|---|
| 2 | import { Component, ViewEncapsulation, Input, ChangeDetectionStrategy, NgModule } from '@angular/core';
|
|---|
| 3 | import { trigger, state, style, transition, animate } from '@angular/animations';
|
|---|
| 4 | import * as i1 from '@angular/common';
|
|---|
| 5 | import { CommonModule } from '@angular/common';
|
|---|
| 6 | import * as i3 from '@angular/router';
|
|---|
| 7 | import { RouterModule } from '@angular/router';
|
|---|
| 8 | import * as i2 from 'primeng/tooltip';
|
|---|
| 9 | import { TooltipModule } from 'primeng/tooltip';
|
|---|
| 10 | import { DomHandler } from 'primeng/dom';
|
|---|
| 11 |
|
|---|
| 12 | class BasePanelMenuItem {
|
|---|
| 13 | constructor(ref) {
|
|---|
| 14 | this.ref = ref;
|
|---|
| 15 | }
|
|---|
| 16 | handleClick(event, item) {
|
|---|
| 17 | if (item.disabled) {
|
|---|
| 18 | event.preventDefault();
|
|---|
| 19 | return;
|
|---|
| 20 | }
|
|---|
| 21 | item.expanded = !item.expanded;
|
|---|
| 22 | this.ref.detectChanges();
|
|---|
| 23 | if (!item.url) {
|
|---|
| 24 | event.preventDefault();
|
|---|
| 25 | }
|
|---|
| 26 | if (item.command) {
|
|---|
| 27 | item.command({
|
|---|
| 28 | originalEvent: event,
|
|---|
| 29 | item: item
|
|---|
| 30 | });
|
|---|
| 31 | }
|
|---|
| 32 | }
|
|---|
| 33 | }
|
|---|
| 34 | class PanelMenuSub extends BasePanelMenuItem {
|
|---|
| 35 | constructor(ref) {
|
|---|
| 36 | super(ref);
|
|---|
| 37 | }
|
|---|
| 38 | onItemKeyDown(event) {
|
|---|
| 39 | let listItem = event.currentTarget;
|
|---|
| 40 | switch (event.code) {
|
|---|
| 41 | case 'Space':
|
|---|
| 42 | case 'Enter':
|
|---|
| 43 | if (listItem && !DomHandler.hasClass(listItem, 'p-disabled')) {
|
|---|
| 44 | listItem.click();
|
|---|
| 45 | }
|
|---|
| 46 | event.preventDefault();
|
|---|
| 47 | break;
|
|---|
| 48 | default:
|
|---|
| 49 | break;
|
|---|
| 50 | }
|
|---|
| 51 | }
|
|---|
| 52 | }
|
|---|
| 53 | PanelMenuSub.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: PanelMenuSub, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|---|
| 54 | PanelMenuSub.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: PanelMenuSub, selector: "p-panelMenuSub", inputs: { item: "item", expanded: "expanded", parentExpanded: "parentExpanded", transitionOptions: "transitionOptions", root: "root" }, host: { classAttribute: "p-element" }, usesInheritance: true, ngImport: i0, template: `
|
|---|
| 55 | <ul [ngClass]="{'p-submenu-list': true, 'p-panelmenu-root-submenu': root}" [@submenu]="expanded ? {value: 'visible', params: {transitionParams: transitionOptions, height: '*'}} : {value: 'hidden', params: {transitionParams: transitionOptions, height: '0'}}" role="tree">
|
|---|
| 56 | <ng-template ngFor let-child [ngForOf]="item.items">
|
|---|
| 57 | <li *ngIf="child.separator" class="p-menu-separator" role="separator">
|
|---|
| 58 | <li *ngIf="!child.separator" class="p-menuitem" [ngClass]="child.styleClass" [class.p-hidden]="child.visible === false" [ngStyle]="child.style" pTooltip [tooltipOptions]="child.tooltipOptions">
|
|---|
| 59 | <a *ngIf="!child.routerLink" (keydown)="onItemKeyDown($event)" [attr.href]="child.url" class="p-menuitem-link" [attr.tabindex]="!item.expanded || !parentExpanded ? null : child.disabled ? null : '0'" [attr.id]="child.id"
|
|---|
| 60 | [ngClass]="{'p-disabled':child.disabled}" role="treeitem" [attr.aria-expanded]="child.expanded"
|
|---|
| 61 | (click)="handleClick($event,child)" [attr.target]="child.target" [attr.title]="child.title">
|
|---|
| 62 | <span class="p-panelmenu-icon pi pi-fw" [ngClass]="{'pi-angle-right':!child.expanded,'pi-angle-down':child.expanded}" *ngIf="child.items"></span>
|
|---|
| 63 | <span class="p-menuitem-icon" [ngClass]="child.icon" *ngIf="child.icon"></span>
|
|---|
| 64 | <span class="p-menuitem-text" *ngIf="child.escape !== false; else htmlLabel">{{child.label}}</span>
|
|---|
| 65 | <ng-template #htmlLabel><span class="p-menuitem-text" [innerHTML]="child.label"></span></ng-template>
|
|---|
| 66 | </a>
|
|---|
| 67 | <a *ngIf="child.routerLink" (keydown)="onItemKeyDown($event)" [routerLink]="child.routerLink" [queryParams]="child.queryParams" [routerLinkActive]="'p-menuitem-link-active'" [routerLinkActiveOptions]="child.routerLinkActiveOptions||{exact:false}" class="p-menuitem-link"
|
|---|
| 68 | [ngClass]="{'p-disabled':child.disabled}" [attr.tabindex]="!item.expanded || !parentExpanded ? null : child.disabled ? null : '0'" [attr.id]="child.id" role="treeitem" [attr.aria-expanded]="child.expanded"
|
|---|
| 69 | (click)="handleClick($event,child)" [attr.target]="child.target" [attr.title]="child.title"
|
|---|
| 70 | [fragment]="child.fragment" [queryParamsHandling]="child.queryParamsHandling" [preserveFragment]="child.preserveFragment" [skipLocationChange]="child.skipLocationChange" [replaceUrl]="child.replaceUrl" [state]="child.state">
|
|---|
| 71 | <span class="p-panelmenu-icon pi pi-fw" [ngClass]="{'pi-angle-right':!child.expanded,'pi-angle-down':child.expanded}" *ngIf="child.items"></span>
|
|---|
| 72 | <span class="p-menuitem-icon" [ngClass]="child.icon" *ngIf="child.icon"></span>
|
|---|
| 73 | <span class="p-menuitem-text" *ngIf="child.escape !== false; else htmlRouteLabel">{{child.label}}</span>
|
|---|
| 74 | <ng-template #htmlRouteLabel><span class="p-menuitem-text" [innerHTML]="child.label"></span></ng-template>
|
|---|
| 75 | </a>
|
|---|
| 76 | <p-panelMenuSub [item]="child" [parentExpanded]="expanded && parentExpanded" [expanded]="child.expanded" [transitionOptions]="transitionOptions" *ngIf="child.items"></p-panelMenuSub>
|
|---|
| 77 | </li>
|
|---|
| 78 | </ng-template>
|
|---|
| 79 | </ul>
|
|---|
| 80 | `, isInline: true, components: [{ type: PanelMenuSub, selector: "p-panelMenuSub", inputs: ["item", "expanded", "parentExpanded", "transitionOptions", "root"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], animations: [
|
|---|
| 81 | trigger('submenu', [
|
|---|
| 82 | state('hidden', style({
|
|---|
| 83 | height: '0',
|
|---|
| 84 | overflow: 'hidden'
|
|---|
| 85 | })),
|
|---|
| 86 | state('visible', style({
|
|---|
| 87 | height: '*'
|
|---|
| 88 | })),
|
|---|
| 89 | transition('visible <=> hidden', [style({ overflow: 'hidden' }), animate('{{transitionParams}}')]),
|
|---|
| 90 | transition('void => *', animate(0))
|
|---|
| 91 | ])
|
|---|
| 92 | ], encapsulation: i0.ViewEncapsulation.None });
|
|---|
| 93 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: PanelMenuSub, decorators: [{
|
|---|
| 94 | type: Component,
|
|---|
| 95 | args: [{
|
|---|
| 96 | selector: 'p-panelMenuSub',
|
|---|
| 97 | template: `
|
|---|
| 98 | <ul [ngClass]="{'p-submenu-list': true, 'p-panelmenu-root-submenu': root}" [@submenu]="expanded ? {value: 'visible', params: {transitionParams: transitionOptions, height: '*'}} : {value: 'hidden', params: {transitionParams: transitionOptions, height: '0'}}" role="tree">
|
|---|
| 99 | <ng-template ngFor let-child [ngForOf]="item.items">
|
|---|
| 100 | <li *ngIf="child.separator" class="p-menu-separator" role="separator">
|
|---|
| 101 | <li *ngIf="!child.separator" class="p-menuitem" [ngClass]="child.styleClass" [class.p-hidden]="child.visible === false" [ngStyle]="child.style" pTooltip [tooltipOptions]="child.tooltipOptions">
|
|---|
| 102 | <a *ngIf="!child.routerLink" (keydown)="onItemKeyDown($event)" [attr.href]="child.url" class="p-menuitem-link" [attr.tabindex]="!item.expanded || !parentExpanded ? null : child.disabled ? null : '0'" [attr.id]="child.id"
|
|---|
| 103 | [ngClass]="{'p-disabled':child.disabled}" role="treeitem" [attr.aria-expanded]="child.expanded"
|
|---|
| 104 | (click)="handleClick($event,child)" [attr.target]="child.target" [attr.title]="child.title">
|
|---|
| 105 | <span class="p-panelmenu-icon pi pi-fw" [ngClass]="{'pi-angle-right':!child.expanded,'pi-angle-down':child.expanded}" *ngIf="child.items"></span>
|
|---|
| 106 | <span class="p-menuitem-icon" [ngClass]="child.icon" *ngIf="child.icon"></span>
|
|---|
| 107 | <span class="p-menuitem-text" *ngIf="child.escape !== false; else htmlLabel">{{child.label}}</span>
|
|---|
| 108 | <ng-template #htmlLabel><span class="p-menuitem-text" [innerHTML]="child.label"></span></ng-template>
|
|---|
| 109 | </a>
|
|---|
| 110 | <a *ngIf="child.routerLink" (keydown)="onItemKeyDown($event)" [routerLink]="child.routerLink" [queryParams]="child.queryParams" [routerLinkActive]="'p-menuitem-link-active'" [routerLinkActiveOptions]="child.routerLinkActiveOptions||{exact:false}" class="p-menuitem-link"
|
|---|
| 111 | [ngClass]="{'p-disabled':child.disabled}" [attr.tabindex]="!item.expanded || !parentExpanded ? null : child.disabled ? null : '0'" [attr.id]="child.id" role="treeitem" [attr.aria-expanded]="child.expanded"
|
|---|
| 112 | (click)="handleClick($event,child)" [attr.target]="child.target" [attr.title]="child.title"
|
|---|
| 113 | [fragment]="child.fragment" [queryParamsHandling]="child.queryParamsHandling" [preserveFragment]="child.preserveFragment" [skipLocationChange]="child.skipLocationChange" [replaceUrl]="child.replaceUrl" [state]="child.state">
|
|---|
| 114 | <span class="p-panelmenu-icon pi pi-fw" [ngClass]="{'pi-angle-right':!child.expanded,'pi-angle-down':child.expanded}" *ngIf="child.items"></span>
|
|---|
| 115 | <span class="p-menuitem-icon" [ngClass]="child.icon" *ngIf="child.icon"></span>
|
|---|
| 116 | <span class="p-menuitem-text" *ngIf="child.escape !== false; else htmlRouteLabel">{{child.label}}</span>
|
|---|
| 117 | <ng-template #htmlRouteLabel><span class="p-menuitem-text" [innerHTML]="child.label"></span></ng-template>
|
|---|
| 118 | </a>
|
|---|
| 119 | <p-panelMenuSub [item]="child" [parentExpanded]="expanded && parentExpanded" [expanded]="child.expanded" [transitionOptions]="transitionOptions" *ngIf="child.items"></p-panelMenuSub>
|
|---|
| 120 | </li>
|
|---|
| 121 | </ng-template>
|
|---|
| 122 | </ul>
|
|---|
| 123 | `,
|
|---|
| 124 | animations: [
|
|---|
| 125 | trigger('submenu', [
|
|---|
| 126 | state('hidden', style({
|
|---|
| 127 | height: '0',
|
|---|
| 128 | overflow: 'hidden'
|
|---|
| 129 | })),
|
|---|
| 130 | state('visible', style({
|
|---|
| 131 | height: '*'
|
|---|
| 132 | })),
|
|---|
| 133 | transition('visible <=> hidden', [style({ overflow: 'hidden' }), animate('{{transitionParams}}')]),
|
|---|
| 134 | transition('void => *', animate(0))
|
|---|
| 135 | ])
|
|---|
| 136 | ],
|
|---|
| 137 | encapsulation: ViewEncapsulation.None,
|
|---|
| 138 | host: {
|
|---|
| 139 | 'class': 'p-element'
|
|---|
| 140 | }
|
|---|
| 141 | }]
|
|---|
| 142 | }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { item: [{
|
|---|
| 143 | type: Input
|
|---|
| 144 | }], expanded: [{
|
|---|
| 145 | type: Input
|
|---|
| 146 | }], parentExpanded: [{
|
|---|
| 147 | type: Input
|
|---|
| 148 | }], transitionOptions: [{
|
|---|
| 149 | type: Input
|
|---|
| 150 | }], root: [{
|
|---|
| 151 | type: Input
|
|---|
| 152 | }] } });
|
|---|
| 153 | class PanelMenu extends BasePanelMenuItem {
|
|---|
| 154 | constructor(ref) {
|
|---|
| 155 | super(ref);
|
|---|
| 156 | this.multiple = true;
|
|---|
| 157 | this.transitionOptions = '400ms cubic-bezier(0.86, 0, 0.07, 1)';
|
|---|
| 158 | }
|
|---|
| 159 | collapseAll() {
|
|---|
| 160 | for (let item of this.model) {
|
|---|
| 161 | if (item.expanded) {
|
|---|
| 162 | item.expanded = false;
|
|---|
| 163 | }
|
|---|
| 164 | }
|
|---|
| 165 | }
|
|---|
| 166 | handleClick(event, item) {
|
|---|
| 167 | if (!this.multiple) {
|
|---|
| 168 | for (let modelItem of this.model) {
|
|---|
| 169 | if (item !== modelItem && modelItem.expanded) {
|
|---|
| 170 | modelItem.expanded = false;
|
|---|
| 171 | }
|
|---|
| 172 | }
|
|---|
| 173 | }
|
|---|
| 174 | this.animating = true;
|
|---|
| 175 | super.handleClick(event, item);
|
|---|
| 176 | }
|
|---|
| 177 | onToggleDone() {
|
|---|
| 178 | this.animating = false;
|
|---|
| 179 | }
|
|---|
| 180 | onItemKeyDown(event) {
|
|---|
| 181 | let listItem = event.currentTarget;
|
|---|
| 182 | switch (event.code) {
|
|---|
| 183 | case 'Space':
|
|---|
| 184 | case 'Enter':
|
|---|
| 185 | if (listItem && !DomHandler.hasClass(listItem, 'p-disabled')) {
|
|---|
| 186 | listItem.click();
|
|---|
| 187 | }
|
|---|
| 188 | event.preventDefault();
|
|---|
| 189 | break;
|
|---|
| 190 | default:
|
|---|
| 191 | break;
|
|---|
| 192 | }
|
|---|
| 193 | }
|
|---|
| 194 | }
|
|---|
| 195 | PanelMenu.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: PanelMenu, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|---|
| 196 | PanelMenu.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: PanelMenu, selector: "p-panelMenu", inputs: { model: "model", style: "style", styleClass: "styleClass", multiple: "multiple", transitionOptions: "transitionOptions" }, host: { classAttribute: "p-element" }, usesInheritance: true, ngImport: i0, template: `
|
|---|
| 197 | <div [class]="styleClass" [ngStyle]="style" [ngClass]="'p-panelmenu p-component'">
|
|---|
| 198 | <ng-container *ngFor="let item of model;let f=first;let l=last;">
|
|---|
| 199 | <div class="p-panelmenu-panel" [ngClass]="{'p-hidden': item.visible === false}">
|
|---|
| 200 | <div [ngClass]="{'p-component p-panelmenu-header':true, 'p-highlight':item.expanded,'p-disabled':item.disabled}" [class]="item.styleClass" [ngStyle]="item.style" pTooltip [tooltipOptions]="item.tooltipOptions">
|
|---|
| 201 | <a *ngIf="!item.routerLink" [attr.href]="item.url" (click)="handleClick($event,item)" (keydown)="onItemKeyDown($event)" [attr.tabindex]="item.disabled ? null : '0'" [attr.id]="item.id"
|
|---|
| 202 | [attr.target]="item.target" [attr.title]="item.title" class="p-panelmenu-header-link" [attr.aria-expanded]="item.expanded" [attr.id]="item.id + '_header'" [attr.aria-controls]="item.id +'_content'">
|
|---|
| 203 | <span *ngIf="item.items" class="p-panelmenu-icon pi" [ngClass]="{'pi-chevron-right':!item.expanded,'pi-chevron-down':item.expanded}"></span>
|
|---|
| 204 | <span class="p-menuitem-icon" [ngClass]="item.icon" *ngIf="item.icon"></span>
|
|---|
| 205 | <span class="p-menuitem-text" *ngIf="item.escape !== false; else htmlLabel">{{item.label}}</span>
|
|---|
| 206 | <ng-template #htmlLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
|
|---|
| 207 | </a>
|
|---|
| 208 | <a *ngIf="item.routerLink" [routerLink]="item.routerLink" [queryParams]="item.queryParams" [routerLinkActive]="'p-menuitem-link-active'" [routerLinkActiveOptions]="item.routerLinkActiveOptions||{exact:false}"
|
|---|
| 209 | (click)="handleClick($event,item)" (keydown)="onItemKeyDown($event)" [attr.target]="item.target" [attr.title]="item.title" class="p-panelmenu-header-link" [attr.id]="item.id" [attr.tabindex]="item.disabled ? null : '0'"
|
|---|
| 210 | [fragment]="item.fragment" [queryParamsHandling]="item.queryParamsHandling" [preserveFragment]="item.preserveFragment" [skipLocationChange]="item.skipLocationChange" [replaceUrl]="item.replaceUrl" [state]="item.state">
|
|---|
| 211 | <span *ngIf="item.items" class="p-panelmenu-icon pi" [ngClass]="{'pi-chevron-right':!item.expanded,'pi-chevron-down':item.expanded}"></span>
|
|---|
| 212 | <span class="p-menuitem-icon" [ngClass]="item.icon" *ngIf="item.icon"></span>
|
|---|
| 213 | <span class="p-menuitem-text" *ngIf="item.escape !== false; else htmlRouteLabel">{{item.label}}</span>
|
|---|
| 214 | <ng-template #htmlRouteLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
|
|---|
| 215 | </a>
|
|---|
| 216 | </div>
|
|---|
| 217 | <div *ngIf="item.items" class="p-toggleable-content" [@rootItem]="item.expanded ? {value: 'visible', params: {transitionParams: animating ? transitionOptions : '0ms', height: '*'}} : {value: 'hidden', params: {transitionParams: transitionOptions, height: '0'}}" (@rootItem.done)="onToggleDone()">
|
|---|
| 218 | <div class="p-panelmenu-content" role="region" [attr.id]="item.id +'_content' " [attr.aria-labelledby]="item.id +'_header'">
|
|---|
| 219 | <p-panelMenuSub [item]="item" [parentExpanded]="item.expanded" [expanded]="true" [transitionOptions]="transitionOptions" [root]="true"></p-panelMenuSub>
|
|---|
| 220 | </div>
|
|---|
| 221 | </div>
|
|---|
| 222 | </div>
|
|---|
| 223 | </ng-container>
|
|---|
| 224 | </div>
|
|---|
| 225 | `, isInline: true, styles: [".p-panelmenu .p-panelmenu-header-link{display:flex;align-items:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;position:relative;text-decoration:none}.p-panelmenu .p-panelmenu-header-link:focus{z-index:1}.p-panelmenu .p-submenu-list{margin:0;padding:0;list-style:none}.p-panelmenu .p-menuitem-link{display:flex;align-items:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;text-decoration:none}.p-panelmenu .p-menuitem-text{line-height:1}\n"], components: [{ type: PanelMenuSub, selector: "p-panelMenuSub", inputs: ["item", "expanded", "parentExpanded", "transitionOptions", "root"] }], directives: [{ type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], animations: [
|
|---|
| 226 | trigger('rootItem', [
|
|---|
| 227 | state('hidden', style({
|
|---|
| 228 | height: '0',
|
|---|
| 229 | overflow: 'hidden'
|
|---|
| 230 | })),
|
|---|
| 231 | state('visible', style({
|
|---|
| 232 | height: '*'
|
|---|
| 233 | })),
|
|---|
| 234 | transition('visible <=> hidden', [style({ overflow: 'hidden' }), animate('{{transitionParams}}')]),
|
|---|
| 235 | transition('void => *', animate(0))
|
|---|
| 236 | ])
|
|---|
| 237 | ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|---|
| 238 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: PanelMenu, decorators: [{
|
|---|
| 239 | type: Component,
|
|---|
| 240 | args: [{ selector: 'p-panelMenu', template: `
|
|---|
| 241 | <div [class]="styleClass" [ngStyle]="style" [ngClass]="'p-panelmenu p-component'">
|
|---|
| 242 | <ng-container *ngFor="let item of model;let f=first;let l=last;">
|
|---|
| 243 | <div class="p-panelmenu-panel" [ngClass]="{'p-hidden': item.visible === false}">
|
|---|
| 244 | <div [ngClass]="{'p-component p-panelmenu-header':true, 'p-highlight':item.expanded,'p-disabled':item.disabled}" [class]="item.styleClass" [ngStyle]="item.style" pTooltip [tooltipOptions]="item.tooltipOptions">
|
|---|
| 245 | <a *ngIf="!item.routerLink" [attr.href]="item.url" (click)="handleClick($event,item)" (keydown)="onItemKeyDown($event)" [attr.tabindex]="item.disabled ? null : '0'" [attr.id]="item.id"
|
|---|
| 246 | [attr.target]="item.target" [attr.title]="item.title" class="p-panelmenu-header-link" [attr.aria-expanded]="item.expanded" [attr.id]="item.id + '_header'" [attr.aria-controls]="item.id +'_content'">
|
|---|
| 247 | <span *ngIf="item.items" class="p-panelmenu-icon pi" [ngClass]="{'pi-chevron-right':!item.expanded,'pi-chevron-down':item.expanded}"></span>
|
|---|
| 248 | <span class="p-menuitem-icon" [ngClass]="item.icon" *ngIf="item.icon"></span>
|
|---|
| 249 | <span class="p-menuitem-text" *ngIf="item.escape !== false; else htmlLabel">{{item.label}}</span>
|
|---|
| 250 | <ng-template #htmlLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
|
|---|
| 251 | </a>
|
|---|
| 252 | <a *ngIf="item.routerLink" [routerLink]="item.routerLink" [queryParams]="item.queryParams" [routerLinkActive]="'p-menuitem-link-active'" [routerLinkActiveOptions]="item.routerLinkActiveOptions||{exact:false}"
|
|---|
| 253 | (click)="handleClick($event,item)" (keydown)="onItemKeyDown($event)" [attr.target]="item.target" [attr.title]="item.title" class="p-panelmenu-header-link" [attr.id]="item.id" [attr.tabindex]="item.disabled ? null : '0'"
|
|---|
| 254 | [fragment]="item.fragment" [queryParamsHandling]="item.queryParamsHandling" [preserveFragment]="item.preserveFragment" [skipLocationChange]="item.skipLocationChange" [replaceUrl]="item.replaceUrl" [state]="item.state">
|
|---|
| 255 | <span *ngIf="item.items" class="p-panelmenu-icon pi" [ngClass]="{'pi-chevron-right':!item.expanded,'pi-chevron-down':item.expanded}"></span>
|
|---|
| 256 | <span class="p-menuitem-icon" [ngClass]="item.icon" *ngIf="item.icon"></span>
|
|---|
| 257 | <span class="p-menuitem-text" *ngIf="item.escape !== false; else htmlRouteLabel">{{item.label}}</span>
|
|---|
| 258 | <ng-template #htmlRouteLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
|
|---|
| 259 | </a>
|
|---|
| 260 | </div>
|
|---|
| 261 | <div *ngIf="item.items" class="p-toggleable-content" [@rootItem]="item.expanded ? {value: 'visible', params: {transitionParams: animating ? transitionOptions : '0ms', height: '*'}} : {value: 'hidden', params: {transitionParams: transitionOptions, height: '0'}}" (@rootItem.done)="onToggleDone()">
|
|---|
| 262 | <div class="p-panelmenu-content" role="region" [attr.id]="item.id +'_content' " [attr.aria-labelledby]="item.id +'_header'">
|
|---|
| 263 | <p-panelMenuSub [item]="item" [parentExpanded]="item.expanded" [expanded]="true" [transitionOptions]="transitionOptions" [root]="true"></p-panelMenuSub>
|
|---|
| 264 | </div>
|
|---|
| 265 | </div>
|
|---|
| 266 | </div>
|
|---|
| 267 | </ng-container>
|
|---|
| 268 | </div>
|
|---|
| 269 | `, animations: [
|
|---|
| 270 | trigger('rootItem', [
|
|---|
| 271 | state('hidden', style({
|
|---|
| 272 | height: '0',
|
|---|
| 273 | overflow: 'hidden'
|
|---|
| 274 | })),
|
|---|
| 275 | state('visible', style({
|
|---|
| 276 | height: '*'
|
|---|
| 277 | })),
|
|---|
| 278 | transition('visible <=> hidden', [style({ overflow: 'hidden' }), animate('{{transitionParams}}')]),
|
|---|
| 279 | transition('void => *', animate(0))
|
|---|
| 280 | ])
|
|---|
| 281 | ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|---|
| 282 | 'class': 'p-element'
|
|---|
| 283 | }, styles: [".p-panelmenu .p-panelmenu-header-link{display:flex;align-items:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;position:relative;text-decoration:none}.p-panelmenu .p-panelmenu-header-link:focus{z-index:1}.p-panelmenu .p-submenu-list{margin:0;padding:0;list-style:none}.p-panelmenu .p-menuitem-link{display:flex;align-items:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;text-decoration:none}.p-panelmenu .p-menuitem-text{line-height:1}\n"] }]
|
|---|
| 284 | }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { model: [{
|
|---|
| 285 | type: Input
|
|---|
| 286 | }], style: [{
|
|---|
| 287 | type: Input
|
|---|
| 288 | }], styleClass: [{
|
|---|
| 289 | type: Input
|
|---|
| 290 | }], multiple: [{
|
|---|
| 291 | type: Input
|
|---|
| 292 | }], transitionOptions: [{
|
|---|
| 293 | type: Input
|
|---|
| 294 | }] } });
|
|---|
| 295 | class PanelMenuModule {
|
|---|
| 296 | }
|
|---|
| 297 | PanelMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: PanelMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|---|
| 298 | PanelMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: PanelMenuModule, declarations: [PanelMenu, PanelMenuSub], imports: [CommonModule, RouterModule, TooltipModule], exports: [PanelMenu, RouterModule, TooltipModule] });
|
|---|
| 299 | PanelMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: PanelMenuModule, imports: [[CommonModule, RouterModule, TooltipModule], RouterModule, TooltipModule] });
|
|---|
| 300 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: PanelMenuModule, decorators: [{
|
|---|
| 301 | type: NgModule,
|
|---|
| 302 | args: [{
|
|---|
| 303 | imports: [CommonModule, RouterModule, TooltipModule],
|
|---|
| 304 | exports: [PanelMenu, RouterModule, TooltipModule],
|
|---|
| 305 | declarations: [PanelMenu, PanelMenuSub]
|
|---|
| 306 | }]
|
|---|
| 307 | }] });
|
|---|
| 308 |
|
|---|
| 309 | /**
|
|---|
| 310 | * Generated bundle index. Do not edit.
|
|---|
| 311 | */
|
|---|
| 312 |
|
|---|
| 313 | export { BasePanelMenuItem, PanelMenu, PanelMenuModule, PanelMenuSub };
|
|---|
