primeng 16.5.0 → 16.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/api/menuitem.d.ts +5 -1
- package/api/tooltipoptions.d.ts +1 -1
- package/breadcrumb/breadcrumb.d.ts +1 -0
- package/contextmenu/contextmenu.d.ts +3 -1
- package/esm2022/accordion/accordion.mjs +2 -2
- package/esm2022/api/menuitem.mjs +1 -1
- package/esm2022/api/tooltipoptions.mjs +1 -1
- package/esm2022/breadcrumb/breadcrumb.mjs +45 -18
- package/esm2022/button/button.mjs +2 -2
- package/esm2022/carousel/carousel.mjs +2 -1
- package/esm2022/contextmenu/contextmenu.mjs +176 -152
- package/esm2022/dock/dock.mjs +4 -4
- package/esm2022/dropdown/dropdown.mjs +2 -2
- package/esm2022/galleria/galleria.mjs +3 -3
- package/esm2022/image/image.mjs +11 -4
- package/esm2022/megamenu/megamenu.mjs +178 -154
- package/esm2022/menu/menu.mjs +150 -102
- package/esm2022/menubar/menubar.mjs +174 -150
- package/esm2022/multiselect/multiselect.mjs +3 -2
- package/esm2022/overlaypanel/overlaypanel.mjs +9 -3
- package/esm2022/panelmenu/panelmenu.mjs +141 -112
- package/esm2022/slidemenu/slidemenu.mjs +2 -2
- package/esm2022/speeddial/speeddial.mjs +2 -2
- package/esm2022/splitbutton/splitbutton.interface.mjs +1 -1
- package/esm2022/splitbutton/splitbutton.mjs +70 -14
- package/esm2022/steps/steps.mjs +1 -1
- package/esm2022/table/table.mjs +28 -20
- package/esm2022/tabmenu/tabmenu.mjs +18 -26
- package/esm2022/tabview/tabview.mjs +4 -4
- package/esm2022/tieredmenu/tieredmenu.mjs +172 -148
- package/esm2022/tooltip/tooltip.mjs +28 -31
- package/esm2022/treetable/treetable.mjs +1 -1
- package/fesm2022/primeng-accordion.mjs +1 -1
- package/fesm2022/primeng-accordion.mjs.map +1 -1
- package/fesm2022/primeng-breadcrumb.mjs +44 -17
- package/fesm2022/primeng-breadcrumb.mjs.map +1 -1
- package/fesm2022/primeng-button.mjs +1 -1
- package/fesm2022/primeng-button.mjs.map +1 -1
- package/fesm2022/primeng-carousel.mjs +1 -0
- package/fesm2022/primeng-carousel.mjs.map +1 -1
- package/fesm2022/primeng-contextmenu.mjs +175 -151
- package/fesm2022/primeng-contextmenu.mjs.map +1 -1
- package/fesm2022/primeng-dock.mjs +3 -3
- package/fesm2022/primeng-dock.mjs.map +1 -1
- package/fesm2022/primeng-dropdown.mjs +1 -1
- package/fesm2022/primeng-dropdown.mjs.map +1 -1
- package/fesm2022/primeng-galleria.mjs +2 -2
- package/fesm2022/primeng-galleria.mjs.map +1 -1
- package/fesm2022/primeng-image.mjs +10 -3
- package/fesm2022/primeng-image.mjs.map +1 -1
- package/fesm2022/primeng-megamenu.mjs +177 -153
- package/fesm2022/primeng-megamenu.mjs.map +1 -1
- package/fesm2022/primeng-menu.mjs +150 -102
- package/fesm2022/primeng-menu.mjs.map +1 -1
- package/fesm2022/primeng-menubar.mjs +173 -149
- package/fesm2022/primeng-menubar.mjs.map +1 -1
- package/fesm2022/primeng-multiselect.mjs +2 -1
- package/fesm2022/primeng-multiselect.mjs.map +1 -1
- package/fesm2022/primeng-overlaypanel.mjs +8 -2
- package/fesm2022/primeng-overlaypanel.mjs.map +1 -1
- package/fesm2022/primeng-panelmenu.mjs +140 -111
- package/fesm2022/primeng-panelmenu.mjs.map +1 -1
- package/fesm2022/primeng-slidemenu.mjs +1 -1
- package/fesm2022/primeng-slidemenu.mjs.map +1 -1
- package/fesm2022/primeng-speeddial.mjs +1 -1
- package/fesm2022/primeng-speeddial.mjs.map +1 -1
- package/fesm2022/primeng-splitbutton.mjs +69 -13
- package/fesm2022/primeng-splitbutton.mjs.map +1 -1
- package/fesm2022/primeng-steps.mjs +1 -1
- package/fesm2022/primeng-steps.mjs.map +1 -1
- package/fesm2022/primeng-table.mjs +27 -19
- package/fesm2022/primeng-table.mjs.map +1 -1
- package/fesm2022/primeng-tabmenu.mjs +17 -25
- package/fesm2022/primeng-tabmenu.mjs.map +1 -1
- package/fesm2022/primeng-tabview.mjs +3 -3
- package/fesm2022/primeng-tabview.mjs.map +1 -1
- package/fesm2022/primeng-tieredmenu.mjs +171 -147
- package/fesm2022/primeng-tieredmenu.mjs.map +1 -1
- package/fesm2022/primeng-tooltip.mjs +27 -30
- package/fesm2022/primeng-tooltip.mjs.map +1 -1
- package/fesm2022/primeng-treetable.mjs.map +1 -1
- package/image/image.d.ts +6 -1
- package/megamenu/megamenu.d.ts +3 -1
- package/menu/menu.d.ts +11 -5
- package/menubar/menubar.d.ts +3 -1
- package/overlaypanel/overlaypanel.d.ts +1 -0
- package/package.json +195 -195
- package/panelmenu/panelmenu.d.ts +5 -2
- package/splitbutton/splitbutton.d.ts +10 -1
- package/splitbutton/splitbutton.interface.d.ts +15 -0
- package/table/table.d.ts +2 -1
- package/tabmenu/tabmenu.d.ts +2 -2
- package/tieredmenu/tieredmenu.d.ts +3 -1
- package/tooltip/tooltip.d.ts +7 -12
- package/treetable/treetable.d.ts +1 -1
@@ -21,6 +21,7 @@ class PanelMenuSub {
|
|
21
21
|
panelId;
|
22
22
|
focusedItemId;
|
23
23
|
items;
|
24
|
+
itemTemplate;
|
24
25
|
level = 0;
|
25
26
|
activeItemPath;
|
26
27
|
root;
|
@@ -91,7 +92,7 @@ class PanelMenuSub {
|
|
91
92
|
this.itemToggle.emit(event);
|
92
93
|
}
|
93
94
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: PanelMenuSub, deps: [{ token: forwardRef(() => PanelMenu) }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
94
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: PanelMenuSub, selector: "p-panelMenuSub", inputs: { panelId: "panelId", focusedItemId: "focusedItemId", items: "items", level: "level", activeItemPath: "activeItemPath", root: "root", tabindex: "tabindex", transitionOptions: "transitionOptions", parentExpanded: "parentExpanded" }, outputs: { itemToggle: "itemToggle", menuFocus: "menuFocus", menuBlur: "menuBlur", menuKeyDown: "menuKeyDown" }, host: { classAttribute: "p-element" }, viewQueries: [{ propertyName: "listViewChild", first: true, predicate: ["list"], descendants: true }], ngImport: i0, template: `
|
95
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: PanelMenuSub, selector: "p-panelMenuSub", inputs: { panelId: "panelId", focusedItemId: "focusedItemId", items: "items", itemTemplate: "itemTemplate", level: "level", activeItemPath: "activeItemPath", root: "root", tabindex: "tabindex", transitionOptions: "transitionOptions", parentExpanded: "parentExpanded" }, outputs: { itemToggle: "itemToggle", menuFocus: "menuFocus", menuBlur: "menuBlur", menuKeyDown: "menuKeyDown" }, host: { classAttribute: "p-element" }, viewQueries: [{ propertyName: "listViewChild", first: true, predicate: ["list"], descendants: true }], ngImport: i0, template: `
|
95
96
|
<ul
|
96
97
|
#list
|
97
98
|
[ngClass]="{ 'p-submenu-list': true, 'p-panelmenu-root-list': root }"
|
@@ -110,7 +111,7 @@ class PanelMenuSub {
|
|
110
111
|
*ngIf="!processedItem.separator && isItemVisible(processedItem)"
|
111
112
|
[ngClass]="getItemClass(processedItem)"
|
112
113
|
role="treeitem"
|
113
|
-
[id]="getItemId(processedItem)"
|
114
|
+
[attr.id]="getItemId(processedItem)"
|
114
115
|
[attr.aria-label]="getItemProp(processedItem, 'label')"
|
115
116
|
[attr.aria-expanded]="isItemGroup(processedItem) ? isItemActive(processedItem) : undefined"
|
116
117
|
[attr.aria-level]="level + 1"
|
@@ -125,58 +126,63 @@ class PanelMenuSub {
|
|
125
126
|
[tooltipOptions]="getItemProp(processedItem, 'tooltipOptions')"
|
126
127
|
>
|
127
128
|
<div class="p-menuitem-content" (click)="onItemClick($event, processedItem)">
|
128
|
-
<
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
<ng-container *ngIf="
|
139
|
-
<
|
140
|
-
|
129
|
+
<ng-container *ngIf="!itemTemplate">
|
130
|
+
<a
|
131
|
+
*ngIf="!getItemProp(processedItem, 'routerLink')"
|
132
|
+
[attr.href]="getItemProp(processedItem, 'url')"
|
133
|
+
class="p-menuitem-link"
|
134
|
+
[ngClass]="{ 'p-disabled': getItemProp(processedItem, 'disabled') }"
|
135
|
+
[target]="getItemProp(processedItem, 'target')"
|
136
|
+
[attr.data-pc-section]="'action'"
|
137
|
+
[attr.tabindex]="!!parentExpanded ? '0' : '-1'"
|
138
|
+
>
|
139
|
+
<ng-container *ngIf="isItemGroup(processedItem)">
|
140
|
+
<ng-container *ngIf="!panelMenu.submenuIconTemplate">
|
141
|
+
<AngleDownIcon [styleClass]="'p-submenu-icon'" *ngIf="isItemActive(processedItem)" [ngStyle]="getItemProp(processedItem, 'iconStyle')" />
|
142
|
+
<AngleRightIcon [styleClass]="'p-submenu-icon'" *ngIf="!isItemActive(processedItem)" [ngStyle]="getItemProp(processedItem, 'iconStyle')" />
|
143
|
+
</ng-container>
|
144
|
+
<ng-template *ngTemplateOutlet="panelMenu.submenuIconTemplate"></ng-template>
|
141
145
|
</ng-container>
|
142
|
-
<
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
<
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
<
|
146
|
+
<span class="p-menuitem-icon" [ngClass]="processedItem.icon" *ngIf="processedItem.icon" [ngStyle]="getItemProp(processedItem, 'iconStyle')"></span>
|
147
|
+
<span class="p-menuitem-text" *ngIf="processedItem.item?.escape !== false; else htmlLabel">{{ getItemProp(processedItem, 'label') }}</span>
|
148
|
+
<ng-template #htmlLabel><span class="p-menuitem-text" [innerHTML]="getItemProp(processedItem, 'label')"></span></ng-template>
|
149
|
+
<span class="p-menuitem-badge" *ngIf="processedItem.badge" [ngClass]="processedItem.badgeStyleClass">{{ processedItem.badge }}</span>
|
150
|
+
</a>
|
151
|
+
<a
|
152
|
+
*ngIf="getItemProp(processedItem, 'routerLink')"
|
153
|
+
[routerLink]="getItemProp(processedItem, 'routerLink')"
|
154
|
+
[queryParams]="getItemProp(processedItem, 'queryParams')"
|
155
|
+
[routerLinkActive]="'p-menuitem-link-active'"
|
156
|
+
[routerLinkActiveOptions]="getItemProp(processedItem, 'routerLinkActiveOptions') || { exact: false }"
|
157
|
+
class="p-menuitem-link"
|
158
|
+
[ngClass]="{ 'p-disabled': getItemProp(processedItem, 'disabled') }"
|
159
|
+
[target]="getItemProp(processedItem, 'target')"
|
160
|
+
[attr.title]="getItemProp(processedItem, 'title')"
|
161
|
+
[fragment]="getItemProp(processedItem, 'fragment')"
|
162
|
+
[queryParamsHandling]="getItemProp(processedItem, 'queryParamsHandling')"
|
163
|
+
[preserveFragment]="getItemProp(processedItem, 'preserveFragment')"
|
164
|
+
[skipLocationChange]="getItemProp(processedItem, 'skipLocationChange')"
|
165
|
+
[replaceUrl]="getItemProp(processedItem, 'replaceUrl')"
|
166
|
+
[state]="getItemProp(processedItem, 'state')"
|
167
|
+
[attr.data-pc-section]="'action'"
|
168
|
+
[attr.tabindex]="!!parentExpanded ? '0' : '-1'"
|
169
|
+
>
|
170
|
+
<ng-container *ngIf="isItemGroup(processedItem)">
|
171
|
+
<ng-container *ngIf="!panelMenu.submenuIconTemplate">
|
172
|
+
<AngleDownIcon *ngIf="isItemActive(processedItem)" [styleClass]="'p-submenu-icon'" [ngStyle]="getItemProp(processedItem, 'iconStyle')" />
|
173
|
+
<AngleRightIcon *ngIf="!isItemActive(processedItem)" [styleClass]="'p-submenu-icon'" [ngStyle]="getItemProp(processedItem, 'iconStyle')" />
|
174
|
+
</ng-container>
|
175
|
+
<ng-template *ngTemplateOutlet="panelMenu.submenuIconTemplate"></ng-template>
|
172
176
|
</ng-container>
|
173
|
-
<
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
177
|
+
<span class="p-menuitem-icon" [ngClass]="processedItem.icon" *ngIf="processedItem.icon" [ngStyle]="getItemProp(processedItem, 'iconStyle')"></span>
|
178
|
+
<span class="p-menuitem-text" *ngIf="getItemProp(processedItem, 'escape') !== false; else htmlRouteLabel">{{ getItemProp(processedItem, 'label') }}</span>
|
179
|
+
<ng-template #htmlRouteLabel><span class="p-menuitem-text" [innerHTML]="getItemProp(processedItem, 'label')"></span></ng-template>
|
180
|
+
<span class="p-menuitem-badge" *ngIf="processedItem.badge" [ngClass]="getItemProp(processedItem, 'badgeStyleClass')">{{ getItemProp(processedItem, 'badge') }}</span>
|
181
|
+
</a>
|
182
|
+
</ng-container>
|
183
|
+
<ng-container *ngIf="itemTemplate">
|
184
|
+
<ng-template *ngTemplateOutlet="itemTemplate; context: { $implicit: processedItem.item }"></ng-template>
|
185
|
+
</ng-container>
|
180
186
|
</div>
|
181
187
|
<div class="p-toggleable-content" [@submenu]="getAnimation(processedItem)">
|
182
188
|
<p-panelMenuSub
|
@@ -184,6 +190,7 @@ class PanelMenuSub {
|
|
184
190
|
[id]="getItemId(processedItem) + '_list'"
|
185
191
|
[panelId]="panelId"
|
186
192
|
[items]="processedItem.items"
|
193
|
+
[itemTemplate]="itemTemplate"
|
187
194
|
[transitionOptions]="transitionOptions"
|
188
195
|
[focusedItemId]="focusedItemId"
|
189
196
|
[activeItemPath]="activeItemPath"
|
@@ -195,7 +202,7 @@ class PanelMenuSub {
|
|
195
202
|
</li>
|
196
203
|
</ng-template>
|
197
204
|
</ul>
|
198
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.RouterLink; }), selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.RouterLinkActive; }), selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.Tooltip; }), selector: "[pTooltip]", inputs: ["
|
205
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.RouterLink; }), selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.RouterLinkActive; }), selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.Tooltip; }), selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i0.forwardRef(function () { return AngleDownIcon; }), selector: "AngleDownIcon" }, { kind: "component", type: i0.forwardRef(function () { return AngleRightIcon; }), selector: "AngleRightIcon" }, { kind: "component", type: i0.forwardRef(function () { return PanelMenuSub; }), selector: "p-panelMenuSub", inputs: ["panelId", "focusedItemId", "items", "itemTemplate", "level", "activeItemPath", "root", "tabindex", "transitionOptions", "parentExpanded"], outputs: ["itemToggle", "menuFocus", "menuBlur", "menuKeyDown"] }], animations: [
|
199
206
|
trigger('submenu', [
|
200
207
|
state('hidden', style({
|
201
208
|
height: '0'
|
@@ -231,7 +238,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
|
|
231
238
|
*ngIf="!processedItem.separator && isItemVisible(processedItem)"
|
232
239
|
[ngClass]="getItemClass(processedItem)"
|
233
240
|
role="treeitem"
|
234
|
-
[id]="getItemId(processedItem)"
|
241
|
+
[attr.id]="getItemId(processedItem)"
|
235
242
|
[attr.aria-label]="getItemProp(processedItem, 'label')"
|
236
243
|
[attr.aria-expanded]="isItemGroup(processedItem) ? isItemActive(processedItem) : undefined"
|
237
244
|
[attr.aria-level]="level + 1"
|
@@ -246,58 +253,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
|
|
246
253
|
[tooltipOptions]="getItemProp(processedItem, 'tooltipOptions')"
|
247
254
|
>
|
248
255
|
<div class="p-menuitem-content" (click)="onItemClick($event, processedItem)">
|
249
|
-
<
|
250
|
-
|
251
|
-
|
252
|
-
|
253
|
-
|
254
|
-
|
255
|
-
|
256
|
-
|
257
|
-
|
258
|
-
|
259
|
-
<ng-container *ngIf="
|
260
|
-
<
|
261
|
-
|
256
|
+
<ng-container *ngIf="!itemTemplate">
|
257
|
+
<a
|
258
|
+
*ngIf="!getItemProp(processedItem, 'routerLink')"
|
259
|
+
[attr.href]="getItemProp(processedItem, 'url')"
|
260
|
+
class="p-menuitem-link"
|
261
|
+
[ngClass]="{ 'p-disabled': getItemProp(processedItem, 'disabled') }"
|
262
|
+
[target]="getItemProp(processedItem, 'target')"
|
263
|
+
[attr.data-pc-section]="'action'"
|
264
|
+
[attr.tabindex]="!!parentExpanded ? '0' : '-1'"
|
265
|
+
>
|
266
|
+
<ng-container *ngIf="isItemGroup(processedItem)">
|
267
|
+
<ng-container *ngIf="!panelMenu.submenuIconTemplate">
|
268
|
+
<AngleDownIcon [styleClass]="'p-submenu-icon'" *ngIf="isItemActive(processedItem)" [ngStyle]="getItemProp(processedItem, 'iconStyle')" />
|
269
|
+
<AngleRightIcon [styleClass]="'p-submenu-icon'" *ngIf="!isItemActive(processedItem)" [ngStyle]="getItemProp(processedItem, 'iconStyle')" />
|
270
|
+
</ng-container>
|
271
|
+
<ng-template *ngTemplateOutlet="panelMenu.submenuIconTemplate"></ng-template>
|
262
272
|
</ng-container>
|
263
|
-
<
|
264
|
-
|
265
|
-
|
266
|
-
|
267
|
-
|
268
|
-
<
|
269
|
-
|
270
|
-
|
271
|
-
|
272
|
-
|
273
|
-
|
274
|
-
|
275
|
-
|
276
|
-
|
277
|
-
|
278
|
-
|
279
|
-
|
280
|
-
|
281
|
-
|
282
|
-
|
283
|
-
|
284
|
-
|
285
|
-
|
286
|
-
|
287
|
-
|
288
|
-
|
289
|
-
|
290
|
-
|
291
|
-
|
292
|
-
<
|
273
|
+
<span class="p-menuitem-icon" [ngClass]="processedItem.icon" *ngIf="processedItem.icon" [ngStyle]="getItemProp(processedItem, 'iconStyle')"></span>
|
274
|
+
<span class="p-menuitem-text" *ngIf="processedItem.item?.escape !== false; else htmlLabel">{{ getItemProp(processedItem, 'label') }}</span>
|
275
|
+
<ng-template #htmlLabel><span class="p-menuitem-text" [innerHTML]="getItemProp(processedItem, 'label')"></span></ng-template>
|
276
|
+
<span class="p-menuitem-badge" *ngIf="processedItem.badge" [ngClass]="processedItem.badgeStyleClass">{{ processedItem.badge }}</span>
|
277
|
+
</a>
|
278
|
+
<a
|
279
|
+
*ngIf="getItemProp(processedItem, 'routerLink')"
|
280
|
+
[routerLink]="getItemProp(processedItem, 'routerLink')"
|
281
|
+
[queryParams]="getItemProp(processedItem, 'queryParams')"
|
282
|
+
[routerLinkActive]="'p-menuitem-link-active'"
|
283
|
+
[routerLinkActiveOptions]="getItemProp(processedItem, 'routerLinkActiveOptions') || { exact: false }"
|
284
|
+
class="p-menuitem-link"
|
285
|
+
[ngClass]="{ 'p-disabled': getItemProp(processedItem, 'disabled') }"
|
286
|
+
[target]="getItemProp(processedItem, 'target')"
|
287
|
+
[attr.title]="getItemProp(processedItem, 'title')"
|
288
|
+
[fragment]="getItemProp(processedItem, 'fragment')"
|
289
|
+
[queryParamsHandling]="getItemProp(processedItem, 'queryParamsHandling')"
|
290
|
+
[preserveFragment]="getItemProp(processedItem, 'preserveFragment')"
|
291
|
+
[skipLocationChange]="getItemProp(processedItem, 'skipLocationChange')"
|
292
|
+
[replaceUrl]="getItemProp(processedItem, 'replaceUrl')"
|
293
|
+
[state]="getItemProp(processedItem, 'state')"
|
294
|
+
[attr.data-pc-section]="'action'"
|
295
|
+
[attr.tabindex]="!!parentExpanded ? '0' : '-1'"
|
296
|
+
>
|
297
|
+
<ng-container *ngIf="isItemGroup(processedItem)">
|
298
|
+
<ng-container *ngIf="!panelMenu.submenuIconTemplate">
|
299
|
+
<AngleDownIcon *ngIf="isItemActive(processedItem)" [styleClass]="'p-submenu-icon'" [ngStyle]="getItemProp(processedItem, 'iconStyle')" />
|
300
|
+
<AngleRightIcon *ngIf="!isItemActive(processedItem)" [styleClass]="'p-submenu-icon'" [ngStyle]="getItemProp(processedItem, 'iconStyle')" />
|
301
|
+
</ng-container>
|
302
|
+
<ng-template *ngTemplateOutlet="panelMenu.submenuIconTemplate"></ng-template>
|
293
303
|
</ng-container>
|
294
|
-
<
|
295
|
-
|
296
|
-
|
297
|
-
|
298
|
-
|
299
|
-
|
300
|
-
|
304
|
+
<span class="p-menuitem-icon" [ngClass]="processedItem.icon" *ngIf="processedItem.icon" [ngStyle]="getItemProp(processedItem, 'iconStyle')"></span>
|
305
|
+
<span class="p-menuitem-text" *ngIf="getItemProp(processedItem, 'escape') !== false; else htmlRouteLabel">{{ getItemProp(processedItem, 'label') }}</span>
|
306
|
+
<ng-template #htmlRouteLabel><span class="p-menuitem-text" [innerHTML]="getItemProp(processedItem, 'label')"></span></ng-template>
|
307
|
+
<span class="p-menuitem-badge" *ngIf="processedItem.badge" [ngClass]="getItemProp(processedItem, 'badgeStyleClass')">{{ getItemProp(processedItem, 'badge') }}</span>
|
308
|
+
</a>
|
309
|
+
</ng-container>
|
310
|
+
<ng-container *ngIf="itemTemplate">
|
311
|
+
<ng-template *ngTemplateOutlet="itemTemplate; context: { $implicit: processedItem.item }"></ng-template>
|
312
|
+
</ng-container>
|
301
313
|
</div>
|
302
314
|
<div class="p-toggleable-content" [@submenu]="getAnimation(processedItem)">
|
303
315
|
<p-panelMenuSub
|
@@ -305,6 +317,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
|
|
305
317
|
[id]="getItemId(processedItem) + '_list'"
|
306
318
|
[panelId]="panelId"
|
307
319
|
[items]="processedItem.items"
|
320
|
+
[itemTemplate]="itemTemplate"
|
308
321
|
[transitionOptions]="transitionOptions"
|
309
322
|
[focusedItemId]="focusedItemId"
|
310
323
|
[activeItemPath]="activeItemPath"
|
@@ -343,6 +356,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
|
|
343
356
|
type: Input
|
344
357
|
}], items: [{
|
345
358
|
type: Input
|
359
|
+
}], itemTemplate: [{
|
360
|
+
type: Input
|
346
361
|
}], level: [{
|
347
362
|
type: Input
|
348
363
|
}], activeItemPath: [{
|
@@ -371,6 +386,7 @@ class PanelMenuList {
|
|
371
386
|
panelId;
|
372
387
|
id;
|
373
388
|
items;
|
389
|
+
itemTemplate;
|
374
390
|
parentExpanded;
|
375
391
|
expanded;
|
376
392
|
transitionOptions;
|
@@ -674,13 +690,14 @@ class PanelMenuList {
|
|
674
690
|
return matched;
|
675
691
|
}
|
676
692
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: PanelMenuList, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
677
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: PanelMenuList, selector: "p-panelMenuList", inputs: { panelId: "panelId", id: "id", items: "items", parentExpanded: "parentExpanded", expanded: "expanded", transitionOptions: "transitionOptions", root: "root", tabindex: "tabindex", activeItem: "activeItem" }, outputs: { itemToggle: "itemToggle", headerFocus: "headerFocus" }, host: { classAttribute: "p-element" }, viewQueries: [{ propertyName: "subMenuViewChild", first: true, predicate: ["submenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
|
693
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: PanelMenuList, selector: "p-panelMenuList", inputs: { panelId: "panelId", id: "id", items: "items", itemTemplate: "itemTemplate", parentExpanded: "parentExpanded", expanded: "expanded", transitionOptions: "transitionOptions", root: "root", tabindex: "tabindex", activeItem: "activeItem" }, outputs: { itemToggle: "itemToggle", headerFocus: "headerFocus" }, host: { classAttribute: "p-element" }, viewQueries: [{ propertyName: "subMenuViewChild", first: true, predicate: ["submenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
|
678
694
|
<p-panelMenuSub
|
679
695
|
#submenu
|
680
696
|
[root]="true"
|
681
697
|
[id]="panelId + '_list'"
|
682
698
|
[panelId]="panelId"
|
683
699
|
[tabindex]="tabindex"
|
700
|
+
[itemTemplate]="itemTemplate"
|
684
701
|
[focusedItemId]="focused ? focusedItemId : undefined"
|
685
702
|
[activeItemPath]="activeItemPath()"
|
686
703
|
[transitionOptions]="transitionOptions"
|
@@ -691,7 +708,7 @@ class PanelMenuList {
|
|
691
708
|
(menuFocus)="onFocus($event)"
|
692
709
|
(menuBlur)="onBlur($event)"
|
693
710
|
></p-panelMenuSub>
|
694
|
-
`, isInline: true, styles: ["@layer primeng{.p-panelmenu .p-panelmenu-header-action{display:flex;align-items:center;-webkit-user-select:none;user-select:none;cursor:pointer;position:relative;text-decoration:none}.p-panelmenu .p-panelmenu-header-action: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;user-select:none;cursor:pointer;text-decoration:none;position:relative;overflow:hidden}.p-panelmenu .p-menuitem-text{line-height:1}.p-panelmenu-expanded.p-toggleable-content:not(.ng-animating),.p-panelmenu .p-submenu-expanded:not(.ng-animating){overflow:visible}.p-panelmenu .p-toggleable-content,.p-panelmenu .p-submenu-list{overflow:hidden}}\n"], dependencies: [{ kind: "component", type: PanelMenuSub, selector: "p-panelMenuSub", inputs: ["panelId", "focusedItemId", "items", "level", "activeItemPath", "root", "tabindex", "transitionOptions", "parentExpanded"], outputs: ["itemToggle", "menuFocus", "menuBlur", "menuKeyDown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
711
|
+
`, isInline: true, styles: ["@layer primeng{.p-panelmenu .p-panelmenu-header-action{display:flex;align-items:center;-webkit-user-select:none;user-select:none;cursor:pointer;position:relative;text-decoration:none}.p-panelmenu .p-panelmenu-header-action: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;user-select:none;cursor:pointer;text-decoration:none;position:relative;overflow:hidden}.p-panelmenu .p-menuitem-text{line-height:1}.p-panelmenu-expanded.p-toggleable-content:not(.ng-animating),.p-panelmenu .p-submenu-expanded:not(.ng-animating){overflow:visible}.p-panelmenu .p-toggleable-content,.p-panelmenu .p-submenu-list{overflow:hidden}}\n"], dependencies: [{ kind: "component", type: PanelMenuSub, selector: "p-panelMenuSub", inputs: ["panelId", "focusedItemId", "items", "itemTemplate", "level", "activeItemPath", "root", "tabindex", "transitionOptions", "parentExpanded"], outputs: ["itemToggle", "menuFocus", "menuBlur", "menuKeyDown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
695
712
|
}
|
696
713
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: PanelMenuList, decorators: [{
|
697
714
|
type: Component,
|
@@ -702,6 +719,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
|
|
702
719
|
[id]="panelId + '_list'"
|
703
720
|
[panelId]="panelId"
|
704
721
|
[tabindex]="tabindex"
|
722
|
+
[itemTemplate]="itemTemplate"
|
705
723
|
[focusedItemId]="focused ? focusedItemId : undefined"
|
706
724
|
[activeItemPath]="activeItemPath()"
|
707
725
|
[transitionOptions]="transitionOptions"
|
@@ -721,6 +739,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
|
|
721
739
|
type: Input
|
722
740
|
}], items: [{
|
723
741
|
type: Input
|
742
|
+
}], itemTemplate: [{
|
743
|
+
type: Input
|
724
744
|
}], parentExpanded: [{
|
725
745
|
type: Input
|
726
746
|
}], expanded: [{
|
@@ -785,6 +805,7 @@ class PanelMenu {
|
|
785
805
|
templates;
|
786
806
|
containerViewChild;
|
787
807
|
submenuIconTemplate;
|
808
|
+
itemTemplate;
|
788
809
|
animating;
|
789
810
|
activeItem = signal(null);
|
790
811
|
ngOnInit() {
|
@@ -796,6 +817,12 @@ class PanelMenu {
|
|
796
817
|
case 'submenuicon':
|
797
818
|
this.submenuIconTemplate = item.template;
|
798
819
|
break;
|
820
|
+
case 'item':
|
821
|
+
this.itemTemplate = item.template;
|
822
|
+
break;
|
823
|
+
default:
|
824
|
+
this.itemTemplate = item.template;
|
825
|
+
break;
|
799
826
|
}
|
800
827
|
});
|
801
828
|
}
|
@@ -954,7 +981,7 @@ class PanelMenu {
|
|
954
981
|
[class]="getItemProp(item, 'styleClass')"
|
955
982
|
[ngStyle]="getItemProp(item, 'style')"
|
956
983
|
[pTooltip]="getItemProp(item, 'tooltip')"
|
957
|
-
[id]="getHeaderId(item, i)"
|
984
|
+
[attr.id]="getHeaderId(item, i)"
|
958
985
|
[tabindex]="0"
|
959
986
|
role="button"
|
960
987
|
[tooltipOptions]="getItemProp(item, 'tooltipOptions')"
|
@@ -1028,7 +1055,7 @@ class PanelMenu {
|
|
1028
1055
|
[@rootItem]="getAnimation(item)"
|
1029
1056
|
(@rootItem.done)="onToggleDone()"
|
1030
1057
|
role="region"
|
1031
|
-
[id]="getContentId(item, i)"
|
1058
|
+
[attr.id]="getContentId(item, i)"
|
1032
1059
|
[attr.aria-labelledby]="getHeaderId(item, i)"
|
1033
1060
|
[attr.data-pc-section]="'toggleablecontent'"
|
1034
1061
|
>
|
@@ -1036,6 +1063,7 @@ class PanelMenu {
|
|
1036
1063
|
<p-panelMenuList
|
1037
1064
|
[panelId]="getPanelId(i, item)"
|
1038
1065
|
[items]="getItemProp(item, 'items')"
|
1066
|
+
[itemTemplate]="itemTemplate"
|
1039
1067
|
[transitionOptions]="transitionOptions"
|
1040
1068
|
[root]="true"
|
1041
1069
|
[activeItem]="activeItem()"
|
@@ -1048,7 +1076,7 @@ class PanelMenu {
|
|
1048
1076
|
</div>
|
1049
1077
|
</ng-container>
|
1050
1078
|
</div>
|
1051
|
-
`, isInline: true, styles: ["@layer primeng{.p-panelmenu .p-panelmenu-header-action{display:flex;align-items:center;-webkit-user-select:none;user-select:none;cursor:pointer;position:relative;text-decoration:none}.p-panelmenu .p-panelmenu-header-action: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;user-select:none;cursor:pointer;text-decoration:none;position:relative;overflow:hidden}.p-panelmenu .p-menuitem-text{line-height:1}.p-panelmenu-expanded.p-toggleable-content:not(.ng-animating),.p-panelmenu .p-submenu-expanded:not(.ng-animating){overflow:visible}.p-panelmenu .p-toggleable-content,.p-panelmenu .p-submenu-list{overflow:hidden}}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.RouterLink; }), selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.RouterLinkActive; }), selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.Tooltip; }), selector: "[pTooltip]", inputs: ["
|
1079
|
+
`, isInline: true, styles: ["@layer primeng{.p-panelmenu .p-panelmenu-header-action{display:flex;align-items:center;-webkit-user-select:none;user-select:none;cursor:pointer;position:relative;text-decoration:none}.p-panelmenu .p-panelmenu-header-action: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;user-select:none;cursor:pointer;text-decoration:none;position:relative;overflow:hidden}.p-panelmenu .p-menuitem-text{line-height:1}.p-panelmenu-expanded.p-toggleable-content:not(.ng-animating),.p-panelmenu .p-submenu-expanded:not(.ng-animating){overflow:visible}.p-panelmenu .p-toggleable-content,.p-panelmenu .p-submenu-list{overflow:hidden}}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.RouterLink; }), selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.RouterLinkActive; }), selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.Tooltip; }), selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i0.forwardRef(function () { return ChevronDownIcon; }), selector: "ChevronDownIcon" }, { kind: "component", type: i0.forwardRef(function () { return ChevronRightIcon; }), selector: "ChevronRightIcon" }, { kind: "component", type: i0.forwardRef(function () { return PanelMenuList; }), selector: "p-panelMenuList", inputs: ["panelId", "id", "items", "itemTemplate", "parentExpanded", "expanded", "transitionOptions", "root", "tabindex", "activeItem"], outputs: ["itemToggle", "headerFocus"] }], animations: [
|
1052
1080
|
trigger('rootItem', [
|
1053
1081
|
state('hidden', style({
|
1054
1082
|
height: '0'
|
@@ -1072,7 +1100,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
|
|
1072
1100
|
[class]="getItemProp(item, 'styleClass')"
|
1073
1101
|
[ngStyle]="getItemProp(item, 'style')"
|
1074
1102
|
[pTooltip]="getItemProp(item, 'tooltip')"
|
1075
|
-
[id]="getHeaderId(item, i)"
|
1103
|
+
[attr.id]="getHeaderId(item, i)"
|
1076
1104
|
[tabindex]="0"
|
1077
1105
|
role="button"
|
1078
1106
|
[tooltipOptions]="getItemProp(item, 'tooltipOptions')"
|
@@ -1146,7 +1174,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
|
|
1146
1174
|
[@rootItem]="getAnimation(item)"
|
1147
1175
|
(@rootItem.done)="onToggleDone()"
|
1148
1176
|
role="region"
|
1149
|
-
[id]="getContentId(item, i)"
|
1177
|
+
[attr.id]="getContentId(item, i)"
|
1150
1178
|
[attr.aria-labelledby]="getHeaderId(item, i)"
|
1151
1179
|
[attr.data-pc-section]="'toggleablecontent'"
|
1152
1180
|
>
|
@@ -1154,6 +1182,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
|
|
1154
1182
|
<p-panelMenuList
|
1155
1183
|
[panelId]="getPanelId(i, item)"
|
1156
1184
|
[items]="getItemProp(item, 'items')"
|
1185
|
+
[itemTemplate]="itemTemplate"
|
1157
1186
|
[transitionOptions]="transitionOptions"
|
1158
1187
|
[root]="true"
|
1159
1188
|
[activeItem]="activeItem()"
|