Merge branch 'master' into master

CHANGELOG.md

@@ -1486,6 +1486,13 @@
 - Checkbox in p-treeNode always checked when using custom icon [\#12951](https://github.com/primefaces/primeng/issues/12951)
 - ConfirmDialog: Duplicated AcceptIcons [\#13001](https://github.com/primefaces/primeng/issues/13001)
 
+## ![LTS](https://www.primefaces.org/wp-content/uploads/2020/01/lts-icon-24.png "PrimeNG LTS") [15.4.25-LTS](https://www.npmjs.com/package/primeng/v/15.4.25-lts) (2024-08-01)
+
+**Fixed bugs:**
+- Password: Tooltip with tooltipEvent='focus' is never displayed [\#16106](https://github.com/primefaces/primeng/issues/16106)
+- Table> double call to (onLazyLoad) event [\#16070](https://github.com/primefaces/primeng/issues/16070)
+- pBadge | Add missing badgeStyle & badgeStyleClass to directive [\#16133](https://github.com/primefaces/primeng/issues/16133)
+
 ## ![LTS](https://www.primefaces.org/wp-content/uploads/2020/01/lts-icon-24.png "PrimeNG LTS") [15.4.24-LTS](https://www.npmjs.com/package/primeng/v/15.4.24-lts) (2024-07-24)
 
 **Fixed bugs:**

src/app/components/autocomplete/autocomplete.ts

@@ -881,6 +881,7 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr
     }
 
     constructor(
+        @Inject(DOCUMENT) private document: Document,
         public el: ElementRef,
         public renderer: Renderer2,
         public cd: ChangeDetectorRef,
@@ -1376,12 +1377,11 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr
         } else {
             if (this.focusedOptionIndex() !== -1) {
                 this.onOptionSelect(event, this.visibleOptions()[this.focusedOptionIndex()]);
+                event.preventDefault();
             }
 
             this.hide();
         }
-
-        event.preventDefault();
     }
 
     onEscapeKey(event) {

src/app/components/calendar/calendar.ts

@@ -3069,10 +3069,16 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor {
         } else if (this.overlay) {
             if (this.appendTo) {
                 if (this.view === 'date') {
-                    this.overlay.style.width = DomHandler.getOuterWidth(this.overlay) + 'px';
-                    this.overlay.style.minWidth = DomHandler.getOuterWidth(this.inputfieldViewChild?.nativeElement) + 'px';
+                    if (!this.overlay.style.width) {
+                        this.overlay.style.width = DomHandler.getOuterWidth(this.overlay) + 'px';
+                    }
+                    if (!this.overlay.style.minWidth) {
+                        this.overlay.style.minWidth = DomHandler.getOuterWidth(this.inputfieldViewChild?.nativeElement) + 'px';
+                    }
                 } else {
-                    this.overlay.style.width = DomHandler.getOuterWidth(this.inputfieldViewChild?.nativeElement) + 'px';
+                    if (!this.overlay.style.width) {
+                        this.overlay.style.width = DomHandler.getOuterWidth(this.inputfieldViewChild?.nativeElement) + 'px';
+                    }
                 }
 
                 DomHandler.absolutePosition(this.overlay, this.inputfieldViewChild?.nativeElement);

src/app/components/colorpicker/colorpicker.ts

@@ -401,9 +401,11 @@ export class ColorPicker implements ControlValueAccessor, OnDestroy {
             this.value = this.HEXtoHSB(this.defaultColor);
         }
 
-        this.updateColorSelector();
-        this.updateUI();
-        this.cd.markForCheck();
+        setTimeout(() => {
+            this.updateColorSelector();   
+            this.updateUI();
+            this.cd.markForCheck();
+        });
     }
 
     updateColorSelector() {

src/app/components/listbox/listbox.ts

@@ -49,16 +49,7 @@ export const LISTBOX_VALUE_ACCESSOR: any = {
     selector: 'p-listbox',
     template: `
         <div [attr.id]="id" [ngClass]="containerClass" [ngStyle]="style" [class]="styleClass" (focusout)="onFocusout($event)">
-            <span
-                #firstHiddenFocusableElement
-                role="presentation"
-                [attr.aria-hidden]="true"
-                class="p-hidden-accessible p-hidden-focusable"
-                [tabindex]="!disabled ? tabindex : -1"
-                (focus)="onFirstHiddenFocus($event)"
-                [attr.data-p-hidden-focusable]="true"
-            >
-            </span>
+            <span #firstHiddenFocusableElement role="presentation" class="p-hidden-accessible p-hidden-focusable" [tabindex]="!disabled ? tabindex : -1" (focus)="onFirstHiddenFocus($event)" [attr.data-p-hidden-focusable]="true"> </span>
             <div class="p-listbox-header" *ngIf="headerFacet || headerTemplate">
                 <ng-content select="p-header"></ng-content>
                 <ng-container *ngTemplateOutlet="headerTemplate; context: { $implicit: modelValue(), options: visibleOptions() }"></ng-container>
@@ -105,6 +96,7 @@ export const LISTBOX_VALUE_ACCESSOR: any = {
                             [tabindex]="!disabled && !focused ? tabindex : -1"
                             (input)="onFilterChange($event)"
                             (keydown)="onFilterKeyDown($event)"
+                            (focus)="onFilterFocus($event)"
                             (blur)="onFilterBlur($event)"
                         />
                         <SearchIcon *ngIf="!filterIconTemplate" [styleClass]="'p-listbox-filter-icon'" [attr.aria-hidden]="true" />
@@ -117,18 +109,18 @@ export const LISTBOX_VALUE_ACCESSOR: any = {
                     </span>
                 </ng-template>
             </div>
-            <div [ngClass]="'p-listbox-list-wrapper'" [ngStyle]="listStyle" [class]="listStyleClass" [style.max-height]="virtualScroll ? 'auto' : scrollHeight || 'auto'">
+            <div #wrapper [ngClass]="'p-listbox-list-wrapper'" [ngStyle]="listStyle" [class]="listStyleClass" [style.max-height]="virtualScroll ? 'auto' : scrollHeight || 'auto'" [attr.tabindex]="!disabled && '0'">
                 <p-scroller
                     #scroller
                     *ngIf="virtualScroll"
                     [items]="visibleOptions()"
                     [style]="{ height: scrollHeight }"
                     [itemSize]="virtualScrollItemSize"
                     [autoSize]="true"
-                    [tabindex]="-1"
                     [lazy]="lazy"
                     [options]="virtualScrollOptions"
                     (onLazyLoad)="onLazyLoad.emit($event)"
+                    [tabindex]="scrollerTabIndex"
                 >
                     <ng-template pTemplate="content" let-items let-scrollerOptions="options">
                         <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: items, options: scrollerOptions }"></ng-container>
@@ -226,16 +218,7 @@ export const LISTBOX_VALUE_ACCESSOR: any = {
             <span role="status" aria-live="polite" class="p-hidden-accessible">
                 {{ selectedMessageText }}
             </span>
-            <span
-                #lastHiddenFocusableElement
-                role="presentation"
-                [attr.aria-hidden]="true"
-                class="p-hidden-accessible p-hidden-focusable"
-                [tabindex]="!disabled ? tabindex : -1"
-                (focus)="onLastHiddenFocus($event)"
-                [attr.data-p-hidden-focusable]="true"
-            >
-            </span>
+            <span #lastHiddenFocusableElement role="presentation" class="p-hidden-accessible p-hidden-focusable" [tabindex]="!disabled ? tabindex : -1" (focus)="onLastHiddenFocus($event)" [attr.data-p-hidden-focusable]="true"> </span>
         </div>
     `,
     providers: [LISTBOX_VALUE_ACCESSOR],
@@ -545,6 +528,8 @@ export class Listbox implements AfterContentInit, OnInit, ControlValueAccessor,
 
     @ViewChild('list') listViewChild: Nullable<ElementRef>;
 
+    @ViewChild('wrapper') wrapperViewChild: Nullable<ElementRef>;
+
     @ContentChild(Header) headerFacet: Nullable<TemplateRef<any>>;
 
     @ContentChild(Footer) footerFacet: Nullable<TemplateRef<any>>;
@@ -593,6 +578,8 @@ export class Listbox implements AfterContentInit, OnInit, ControlValueAccessor,
 
     focused: boolean | undefined;
 
+    scrollerTabIndex: string = '0';
+
     get containerClass() {
         return {
             'p-listbox p-component': true,
@@ -949,6 +936,8 @@ export class Listbox implements AfterContentInit, OnInit, ControlValueAccessor,
     onFocusout(event: FocusEvent) {
         if (!this.el.nativeElement.contains(event.relatedTarget) && this.lastHiddenFocusableElement && this.firstHiddenFocusableElement) {
             this.firstHiddenFocusableElement.nativeElement.tabIndex = this.lastHiddenFocusableElement.nativeElement.tabIndex = undefined;
+            this.wrapperViewChild.nativeElement.tabIndex = '0';
+            this.scrollerTabIndex = '0';
         }
     }
 
@@ -957,6 +946,9 @@ export class Listbox implements AfterContentInit, OnInit, ControlValueAccessor,
         const focusedOptionIndex = this.focusedOptionIndex() !== -1 ? this.focusedOptionIndex() : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
         this.focusedOptionIndex.set(focusedOptionIndex);
         this.onFocus.emit(event);
+
+        this.wrapperViewChild.nativeElement.tabIndex = '-1';
+        this.scrollerTabIndex = '-1';
     }
 
     onListBlur(event: FocusEvent) {
@@ -1010,6 +1002,10 @@ export class Listbox implements AfterContentInit, OnInit, ControlValueAccessor,
 
         !this.virtualScrollerDisabled && this.scroller.scrollToIndex(0);
     }
+
+    onFilterFocus(event: FocusEvent){
+        this.wrapperViewChild.nativeElement.tabIndex = '-1';
+    }
 
     onFilterBlur(event: FocusEvent) {
         this.focusedOptionIndex.set(-1);

src/app/components/scroller/scroller.ts

@@ -866,7 +866,7 @@ export class Scroller implements OnInit, AfterContentInit, AfterViewChecked, OnD
     }
 
     setSpacerSize() {
-        if (this._items) {
+        if (this._scrollHeight !== '100%' && this._items) {
             const contentPos = this.getContentPosition();
             const setProp = (_name: string, _value: any, _size: number, _cpos: number = 0) => (this.spacerStyle = { ...this.spacerStyle, ...{ [`${_name}`]: (_value || []).length * _size + _cpos + 'px' } });
 

src/app/components/table/columnfilter.interface.ts

@@ -9,7 +9,7 @@ export interface TableColumnFilterTemplates {
     /**
      * Custom filter template.
      */
-    filterTemplate(context: {
+    filter(context: {
         /**
          * filterConstraint.value.
          */
@@ -74,27 +74,27 @@ export interface TableColumnFilterTemplates {
     /**
      * Custom header template.
      */
-    headerTemplate(): TemplateRef<any>;
+    header(): TemplateRef<any>;
     /**
      * Custom footer template.
      */
-    footerTemplate(): TemplateRef<any>;
+    footer(): TemplateRef<any>;
     /**
      * Custom filter icon template.
      */
-    filterIconTemplate(): TemplateRef<any>;
+    filtericon(): TemplateRef<any>;
     /**
      * Custom remove rule icon template.
      */
-    removeRuleIconTemplate(): TemplateRef<any>;
+    removeruleicon(): TemplateRef<any>;
     /**
      * Custom add rule icon template.
      */
-    addRuleIconTemplate(): TemplateRef<any>;
+    addruleicon(): TemplateRef<any>;
     /**
      * Custom clear filter icon template.
      */
-    clearFilterIconTemplate(): TemplateRef<any>;
+    clearfiltericon(): TemplateRef<any>;
 }
 
 /**

src/app/components/tree/tree.ts

@@ -100,7 +100,7 @@ import {
                     (dragend)="onDragStop($event)"
                     [ngClass]="{ 'p-treenode-selectable': tree.selectionMode && node.selectable !== false, 'p-treenode-dragover': draghoverNode, 'p-highlight': isSelected() }"
                 >
-                    <button type="button" [attr.data-pc-section]="'toggler'" class="p-tree-toggler p-link" (click)="toggle($event)" pRipple tabindex="-1" aria-hidden="true">
+                    <button type="button" [attr.data-pc-section]="'toggler'" class="p-tree-toggler p-link" (click)="toggle($event)" pRipple tabindex="-1">
                         <ng-container *ngIf="!tree.togglerIconTemplate">
                             <ng-container *ngIf="!node.loading">
                                 <ChevronRightIcon *ngIf="!node.expanded" [styleClass]="'p-tree-toggler-icon'" />
@@ -281,7 +281,10 @@ export class UITreeNode implements OnInit {
 
     ngOnInit() {
         (<TreeNode>this.node).parent = this.parentNode;
-        if (this.parentNode) {
+        const nativeElement = this.tree.el.nativeElement;
+        const pDialogWrapper = nativeElement.closest('p-dialog');
+
+        if (this.parentNode && !pDialogWrapper) {
             this.setAllNodesTabIndexes();
             this.tree.syncNodeOption(<TreeNode>this.node, <TreeNode<any>[]>this.tree.value, 'parent', this.tree.getNodeWithKey(<string>this.parentNode.key, <TreeNode<any>[]>this.tree.value));
         }

src/app/showcase/data/versions.json

@@ -5,12 +5,12 @@
         "url": "https://primeng.org"
     },
     {
-        "version": "v16.9.13-lts",
+        "version": "v16.9.14-lts",
         "name": "v16",
         "url": "https://www.primefaces.org/primeng-v16-lts/"
     },
     {
-        "version": "v15.4.24-lts",
+        "version": "v15.4.25-lts",
         "name": "v15",
         "url": "https://www.primefaces.org/primeng-v15-lts/"
     },

src/app/showcase/doc/calendar/accessibilitydoc.ts

@@ -87,7 +87,7 @@ import { Code } from '@domain/code';
                     </tr>
                     <tr>
                         <td><i>shift</i> + <i>tab</i></td>
-                        <td>Moves focus to the next focusable element within the popup.</td>
+                        <td>Moves focus to the previous focusable element within the popup.</td>
                     </tr>
                 </tbody>
             </table>

src/app/showcase/doc/colorpicker/formatdoc.ts

@@ -10,17 +10,17 @@ import { Code } from '@domain/code';
         <div class="card flex flex-wrap gap-3">
             <div class="flex-1 flex flex-column align-items-center gap-3">
                 <label for="cp-hex" class="font-bold block mb-2"> HEX </label>
-                <p-colorPicker [(ngModel)]="color" />
+                <p-colorPicker [(ngModel)]="color" inputId="cp-hex" />
                 <span>{{ color }}</span>
             </div>
             <div class="flex-1 flex flex-column align-items-center gap-3">
                 <label for="cp-rgb" class="font-bold block mb-2"> RGB </label>
-                <p-colorPicker [(ngModel)]="colorRGB" format="rgb" />
+                <p-colorPicker [(ngModel)]="colorRGB" format="rgb" inputId="cp-rgb" />
                 <span>{{ 'r:' + colorRGB.r + ' g:' + colorRGB.g + ' b:' + colorRGB.b }}</span>
             </div>
             <div class="flex-1 flex flex-column align-items-center gap-3">
                 <label for="cp-hsb" class="font-bold block mb-2"> HSB </label>
-                <p-colorPicker [(ngModel)]="colorHSB" format="hsb" />
+                <p-colorPicker [(ngModel)]="colorHSB" format="hsb" inputId="cp-hsb" />
                 <span>{{ 'h:' + colorHSB.h + ' s:' + colorHSB.s + ' b:' + colorHSB.b }}</span>
             </div>
         </div>