Merge branch 'master' into 13596

src/app/components/image/image.ts

@@ -23,7 +23,7 @@ import { FocusTrapModule } from 'primeng/focustrap';
     template: `
         <span [ngClass]="containerClass()" [class]="styleClass" [ngStyle]="style">
             <img [attr.src]="src" [attr.alt]="alt" [attr.width]="width" [attr.height]="height" [ngStyle]="imageStyle" [class]="imageClass" (error)="imageError($event)" />
-            <button class="p-image-preview-indicator" *ngIf="preview" (click)="onImageClick()" #previewButton>
+            <button type="button" class="p-image-preview-indicator" *ngIf="preview" (click)="onImageClick()" #previewButton>
                 <ng-container *ngIf="indicatorTemplate; else defaultTemplate">
                     <ng-container *ngTemplateOutlet="indicatorTemplate"></ng-container>
                 </ng-container>

src/app/components/menu/menu.ts

@@ -168,7 +168,7 @@ export class MenuItemContent {
                         pTooltip
                         [tooltipOptions]="submenu.tooltipOptions"
                         role="none"
-                        [attr.id]="menuitemId(id, i)"
+                        [attr.id]="menuitemId(submenu, id, i)"
                     >
                         <span *ngIf="submenu.escape !== false; else htmlSubmenuLabel">{{ submenu.label }}</span>
                         <ng-template #htmlSubmenuLabel><span [innerHTML]="submenu.label | safeHtml"></span></ng-template>
@@ -179,7 +179,7 @@ export class MenuItemContent {
                             class="p-menuitem"
                             *ngIf="!item.separator"
                             [pMenuItemContent]="item"
-                            [ngClass]="{ 'p-hidden': item.visible === false || submenu.visible === false, 'p-focus': focusedOptionId() && menuitemId(id, i, j) === focusedOptionId(), 'p-disabled': disabled(item.disabled) }"
+                            [ngClass]="{ 'p-hidden': item.visible === false || submenu.visible === false, 'p-focus': focusedOptionId() && menuitemId(item, id, i, j) === focusedOptionId(), 'p-disabled': disabled(item.disabled) }"
                             [ngStyle]="item.style"
                             [class]="item.styleClass"
                             (onMenuItemClick)="itemClick($event)"
@@ -188,11 +188,11 @@ export class MenuItemContent {
                             role="menuitem"
                             [attr.data-pc-section]="'menuitem'"
                             [attr.aria-label]="label(item.label)"
-                            [attr.data-p-focused]="isItemFocused(menuitemId(id, i, j))"
+                            [attr.data-p-focused]="isItemFocused(menuitemId(item, id, i, j))"
                             [attr.data-p-disabled]="disabled(item.disabled)"
                             [attr.aria-disabled]="disabled(item.disabled)"
-                            [attr.id]="menuitemId(id, i, j)"
-                            [id]="menuitemId(id, i, j)"
+                            [attr.id]="menuitemId(item, id, i, j)"
+                            [id]="menuitemId(item, id, i, j)"
                         ></li>
                     </ng-template>
                 </ng-template>
@@ -202,7 +202,7 @@ export class MenuItemContent {
                         class="p-menuitem"
                         *ngIf="!item.separator"
                         [pMenuItemContent]="item"
-                        [ngClass]="{ 'p-hidden': item.visible === false, 'p-focus': focusedOptionId() && menuitemId(id, i) === focusedOptionId(), 'p-disabled': disabled(item.disabled) }"
+                        [ngClass]="{ 'p-hidden': item.visible === false, 'p-focus': focusedOptionId() && menuitemId(item, id, i, j) === focusedOptionId(), 'p-disabled': disabled(item.disabled) }"
                         [ngStyle]="item.style"
                         [class]="item.styleClass"
                         (onMenuItemClick)="itemClick($event)"
@@ -211,11 +211,11 @@ export class MenuItemContent {
                         role="menuitem"
                         [attr.data-pc-section]="'menuitem'"
                         [attr.aria-label]="label(item.label)"
-                        [attr.data-p-focused]="isItemFocused(menuitemId(id, i))"
+                        [attr.data-p-focused]="isItemFocused(menuitemId(item, id, i))"
                         [attr.data-p-disabled]="disabled(item.disabled)"
                         [attr.aria-disabled]="disabled(item.disabled)"
-                        [attr.id]="menuitemId(id, i)"
-                        [id]="menuitemId(id, i)"
+                        [attr.id]="menuitemId(item, id, i)"
+                        [id]="menuitemId(item, id, i)"
                     ></li>
                 </ng-template>
             </ul>
@@ -465,8 +465,8 @@ export class Menu implements OnDestroy {
         }
     }
 
-    menuitemId(id: string, index?: string, childIndex?: string) {
-        return `${id}_${index}${typeof childIndex !== 'undefined' ? '_' + childIndex : ''}`;
+    menuitemId(item: MenuItem, id: string, index?: string, childIndex?: string) {
+        return item?.id ?? `${id}_${index}${childIndex !== undefined ? '_' + childIndex : ''}`;
     }
 
     isItemFocused(id) {
@@ -501,8 +501,8 @@ export class Menu implements OnDestroy {
     onListBlur(event: FocusEvent | MouseEvent) {
         this.focused = false;
         this.changeFocusedOptionIndex(-1);
-        this.selectedOptionIndex.set(null);
-        this.focusedOptionIndex.set(null);
+        this.selectedOptionIndex.set(-1);
+        this.focusedOptionIndex.set(-1);
         this.onBlur.emit(event);
     }
 

src/app/components/tieredmenu/tieredmenu.ts

@@ -221,7 +221,7 @@ export class TieredMenuSub {
     @Output() menuKeydown: EventEmitter<any> = new EventEmitter();
 
     @ViewChild('sublist', { static: true }) sublistViewChild: ElementRef;
-
+  
     constructor(public el: ElementRef, public renderer: Renderer2, private cd: ChangeDetectorRef, @Inject(forwardRef(() => TieredMenu)) public tieredMenu: TieredMenu) {}
 
     positionSubmenu() {

src/app/showcase/doc/dynamicdialog/basicdoc.ts

@@ -10,8 +10,7 @@ import { ProductListDemo } from './productlistdemo';
     template: ` <section class="py-3">
         <app-docsectiontext [title]="title" [id]="id">
             <p>
-                Dynamic dialogs require an instance of a <i>DialogService</i> that is responsible for displaying a dialog with a component as its content. Since the dynamically loaded content is not defined at build time, a configuration is necessary
-                using the <i>entryComponents</i> of your parent module. Calling <i>open</i> method of <i>DialogService</i> will display dynamic dialog. First parameter of <i>open</i> method is the type of component to load and the second parameter is
+                Dynamic dialogs require an instance of a <i>DialogService</i> that is responsible for displaying a dialog with a component as its content. Calling <i>open</i> method of <i>DialogService</i> will display dynamic dialog. First parameter of <i>open</i> method is the type of component to load and the second parameter is
                 the configuration of the Dialog such as <i>header</i>, <i>width</i> and more.
             </p>
         </app-docsectiontext>

src/app/showcase/doc/table/paginatorprogrammaticdoc.ts

@@ -24,6 +24,7 @@ import { CustomerService } from '../../service/customerservice';
                 [first]="first"
                 [tableStyle]="{ 'min-width': '50rem' }"
                 currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
+                (onPage)="pageChange($event)"
                 [rowsPerPageOptions]="[10, 25, 50]"
             >
                 <ng-template pTemplate="header">
@@ -82,6 +83,11 @@ export class PaginatorProgrammaticDoc {
         this.first = 0;
     }
 
+    pageChange(event) {
+        this.first = event.first;
+        this.rows = event.rows;
+    }
+
     isLastPage(): boolean {
         return this.customers ? this.first === this.customers.length - this.rows : true;
     }
@@ -104,6 +110,7 @@ export class PaginatorProgrammaticDoc {
     [showCurrentPageReport]="true"
     [tableStyle]="{ 'min-width': '50rem' }"
     currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
+    (onPage)="pageChange($event)"
     [rowsPerPageOptions]="[10, 25, 50]"
 >
     <ng-template pTemplate="header">
@@ -143,6 +150,7 @@ export class PaginatorProgrammaticDoc {
         [showCurrentPageReport]="true"
         [tableStyle]="{ 'min-width': '50rem' }"
         currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
+        (onPage)="pageChange($event)"
         [rowsPerPageOptions]="[10, 25, 50]"
     >
         <ng-template pTemplate="header">
@@ -203,6 +211,11 @@ export class TablePaginatorProgrammaticDemo {
         this.first = 0;
     }
 
+    pageChange(event) {
+        this.first = event.first;
+        this.rows = event.rows;
+    }
+
     isLastPage(): boolean {
         return this.customers ? this.first === this.customers.length - this.rows : true;
     }

src/app/showcase/layout/doc/codeeditor/templates.ts

@@ -711,7 +711,7 @@ export class AppModule {}`;
             content: {
                 name: `primeng-${selector}`,
                 description: `PrimeNG ${componentName}`,
-                licence: 'MIT',
+                license: 'MIT',
                 keywords: [],
                 scripts: {
                     ng: 'ng',

src/app/showcase/pages/landing/landing.component.html

@@ -1305,7 +1305,7 @@ <h5 class="m-0">Customers</h5>
                     <ul class="list-none p-0 m-0">
                         <li class="font-bold mb-5">Support</li>
                         <li class="mb-4">
-                            <a href="https://forum.primefaces.org/viewforum.php?f=57"
+                            <a href="https://github.com/orgs/primefaces/discussions"
                                 class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Forum</a>
                         </li>
                         <li class="mb-4">

src/app/showcase/pages/support/support.component.html

@@ -6,7 +6,7 @@
             <i class="pi pi-github absolute text-200" style="bottom: -50px; right: -50px; font-size: 200px; transform: rotateX(45deg) rotateY(0deg) rotateZ(-45deg)"></i>
             <div class="text-2xl text-900 font-semibold mb-3 relative">Community Support</div>
             <p class="m-0 line-height-3 relative text-lg text-800">
-                <a href="https://forum.primefaces.org/viewforum.php?f=57" class="text-primary hover:underline font-semibold">
+                <a href="https://github.com/orgs/primefaces/discussions" class="text-primary hover:underline font-semibold">
                     Forum
                 </a>
                 and

src/app/showcase/pages/team/team.component.html

@@ -97,6 +97,11 @@ <h1>Meet the Team</h1>
                 <span class="mb-2 text-xl font-bold">Burak Sağlam</span>
                 <span>Front-End Developer</span>
             </div>
+            <div class="flex flex-column align-items-center flex-auto">
+                <img src="https://primefaces.org/cdn/primeng/images/team/umit.jpg" class="border-circle mb-4" alt="Ümit Çelik" />
+                <span class="mb-2 text-xl font-bold">Ümit Çelik</span>
+                <span>UI/UX Designer</span>
+            </div>
         </div>
     </div>
 </div>

src/app/showcase/pages/uikit/uikit.component.html

@@ -133,7 +133,7 @@
     <div class="card mb-5" style="border-radius: 50px">
         <div class="text-900 font-bold text-5xl mb-4 text-center">Pricing</div>
         <div class="mb-2 text-center line-height-3 text-lg">Choose the right plan for your business. Whether you are an individual or a member of a team, UI Kit is available for affordable prices.</div>
-        <a href="https://www.primefaces.org/uikit/licenses" class="mb-6 text-primary-500 no-underline hover:underline text-center block">View Licence Details</a>
+        <a href="https://www.primefaces.org/uikit/licenses" class="mb-6 text-primary-500 no-underline hover:underline text-center block">View License Details</a>
 
         <div class="grid">
             <div class="col-12 lg:col-4">
@@ -300,7 +300,7 @@
             <div class="col-12 lg:col-4 px-2 lg:px-5">
                 <div class="text-xl text-900 line-height-3 mb-2 font-medium text-900">How can I get support?</div>
                 <p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">
-                    Support is provided by PrimeTek via <a href="https://forum.primefaces.org/viewforum.php?f=159" class="text-primary-500 no-underline hover:underline">a dedicated forum channel monitored</a> by PrimeTek support staff.
+                    Support is provided by PrimeTek via <a href="https://github.com/orgs/primefaces/discussions/categories/figma-ui-kit" class="text-primary-500 no-underline hover:underline">a dedicated forum channel monitored</a> by PrimeTek support staff.
                 </p>
 
                 <div class="text-xl text-900 line-height-3 mb-2 font-medium text-900">What does lifetime support mean?</div>

src/assets/showcase/data/menu.json

@@ -533,7 +533,7 @@
                 },
                 {
                     "name": "Forum",
-                    "href": "https://forum.primefaces.org/viewforum.php?f=35"
+                    "href": "https://github.com/orgs/primefaces/discussions"
                 },
                 {
                     "name": "Long Term Support",