Merge branch 'accessibility' of https://github.com/primefaces/primeng …

…into accessibility
primefaces · Nov 1, 2023 · 25ed0db · 25ed0db
2 parents cc30e83 + 8088ddb
commit 25ed0db
Show file tree

Hide file tree

Showing 36 changed files with 823 additions and 540 deletions.
diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -1,5 +1,5 @@
 name: Bug report
-description: Create a report to help us improve
+description: Create a report to help PrimeNG improve.
 title: "Component: Title"
 labels: ['Status: Needs Triage']
 body:

diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
@@ -1,4 +1,7 @@
 contact_links:
+    - name: Feature request
+      url: https://github.com/orgs/primefaces/discussions/categories/primeng
+      about: Propose an enhancement at discussions.
     - name: Support
-      url: https://primeng.org/support
+      url: https://primeng.org/support/
       about: Professional support for the open source innovation.
diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,22 @@
 # Changelog
 
+## [16.6.0](https://github.com/primefaces/primeng/tree/16.6.0) (2023-10-26)
+
+[Full Changelog](https://github.com/primefaces/primeng/compare/16.5.1...16.6.0)
+
+**Implemented New Features and Enhancements:**
+- Menu | item template support [\#13910](https://github.com/primefaces/primeng/issues/13910)
+- Overlaypanel: OverlayPanel does not close on escape key press [\#13930](https://github.com/primefaces/primeng/issues/13930)
+- Accessibility | Tabview ink bar accessibility problems [\#13902](https://github.com/primefaces/primeng/issues/13902)
+
+**Fixed bugs:**
+- Component: Carousel | Circular Option is broken when first iteration is done [\#13821](https://github.com/primefaces/primeng/issues/13821)
+- Component: TreeTable selection binding no longer allows for single selection [\#13869](https://github.com/primefaces/primeng/issues/13869)
+- Component: MultiSelect ExpressionChangedAfterItHasBeenCheckedError when spam clicking [\#13942](https://github.com/primefaces/primeng/issues/13942)
+- pButton | Loading icon problem [\#13901](https://github.com/primefaces/primeng/issues/13901)
+- splitbutton: Accessibility does not appear to work as documented [\#13908](https://github.com/primefaces/primeng/issues/13908)
+- Galleria: Cannot read properties of undefined when tabbing through component [\#13945](https://github.com/primefaces/primeng/issues/13945)
+
 ## [16.5.1](https://github.com/primefaces/primeng/tree/16.5.1) (2023-10-18)
 
 [Full Changelog](https://github.com/primefaces/primeng/compare/16.5.0...16.5.1)
@@ -362,6 +379,14 @@
 - 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.11-LTS](https://www.npmjs.com/package/primeng/v/15.4.11-lts) (2023-10-19)
+**Fixed bugs:**
+- Password | Incorrect placement of close icon when [toggleMask]="true" [\#13817](https://github.com/primefaces/primeng/issues/13817)
+- Multiselect: Chips: Delete button not visible if label is too wide [\#13816](https://github.com/primefaces/primeng/issues/13816)
+- Multiselect: Incorrect view with selected items [\#13654](https://github.com/primefaces/primeng/issues/13654)
+- Textarea: autoResize doesn't work when used inside a Dialog [\#9231](https://github.com/primefaces/primeng/issues/9231)
+- Table | Column widths are not recalculated w/resize + drag & drop #38 [\#13875](https://github.com/primefaces/primeng/issues/13875)
+
 ## ![LTS](https://www.primefaces.org/wp-content/uploads/2020/01/lts-icon-24.png "PrimeNG LTS") [15.4.10-LTS](https://www.npmjs.com/package/primeng/v/15.4.10-lts) (2023-10-04)
 **Fixed bugs:**
 - Autocomplete Force Selection case sensitive issue [\#13578](https://github.com/primefaces/primeng/issues/13578)
@@ -632,6 +657,14 @@
 - Sidebar: Footer Templating [\#12259](https://github.com/primefaces/primeng/issues/12259)
 - Calendar: Day names don't update [\#12148](https://github.com/primefaces/primeng/issues/12148)
 
+## ![LTS](https://www.primefaces.org/wp-content/uploads/2020/01/lts-icon-24.png "PrimeNG LTS") [14.2.14-LTS](https://www.npmjs.com/package/primeng/v/14.2.14-lts) (2023-10-19)
+**Fixed bugs:**
+- Password | Incorrect placement of close icon when [toggleMask]="true" [\#13817](https://github.com/primefaces/primeng/issues/13817)
+- Multiselect: Chips: Delete button not visible if label is too wide [\#13816](https://github.com/primefaces/primeng/issues/13816)
+- Multiselect: Incorrect view with selected items [\#13654](https://github.com/primefaces/primeng/issues/13654)
+- Textarea: autoResize doesn't work when used inside a Dialog [\#9231](https://github.com/primefaces/primeng/issues/9231)
+- Table | Column widths are not recalculated w/resize + drag & drop #38 [\#13875](https://github.com/primefaces/primeng/issues/13875)
+
 ## ![LTS](https://www.primefaces.org/wp-content/uploads/2020/01/lts-icon-24.png "PrimeNG LTS") [14.2.13-LTS](https://www.npmjs.com/package/primeng/v/14.2.13-lts) (2023-10-04)
 **Fixed bugs:**
 - Calendar: onModelChange not called with keepInvalid=true if user enters a well-formatted date but outside allowed range [\#13132](https://github.com/primefaces/primeng/issues/13132)

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "primeng",
-    "version": "16.5.1",
+    "version": "16.6.0",
     "license": "SEE LICENSE IN LICENSE.md",
     "scripts": {
         "ng": "ng",

diff --git a/src/app/components/accordion/accordion.ts b/src/app/components/accordion/accordion.ts
@@ -422,7 +422,7 @@ export class Accordion implements BlockableUI, AfterContentInit, OnDestroy {
      */
     @Output() activeIndexChange: EventEmitter<number | number[]> = new EventEmitter<number | number[]>();
 
-    @ContentChildren(AccordionTab) tabList: QueryList<AccordionTab> | undefined;
+    @ContentChildren(AccordionTab, {descendants: true}) tabList: QueryList<AccordionTab> | undefined;
 
     tabListSubscription: Subscription | null = null;
 

diff --git a/src/app/components/api/menuitem.ts b/src/app/components/api/menuitem.ts
@@ -1,6 +1,6 @@
 import { QueryParamsHandling } from '@angular/router';
-import { TooltipOptions } from './tooltipoptions';
 import { MegaMenuItem } from './megamenuitem';
+import { TooltipOptions } from './tooltipoptions';
 
 /**
  * MenuItem provides the following properties. Note that not all of them may be utilized by the tabmenu component.
@@ -143,6 +143,10 @@ export interface MenuItem {
      * @see {TooltipOptions}
      */
     tooltipOptions?: TooltipOptions;
+    /**
+     * Optional
+     */
+    [key: string]: any;
 }
 
 /**

diff --git a/src/app/components/breadcrumb/breadcrumb.ts b/src/app/components/breadcrumb/breadcrumb.ts
@@ -87,10 +87,15 @@ import { BreadcrumbItemClickEvent } from './breadcrumb.interface';
                             [attr.tabindex]="item.disabled ? null : '0'"
                             [ariaCurrentWhenActive]="isCurrentUrl(item)"
                         >
-                            <span *ngIf="item.icon" class="p-menuitem-icon" [ngClass]="item.icon" [ngStyle]="item.iconStyle"></span>
-                            <ng-container *ngIf="item.label">
-                                <span *ngIf="item.escape !== false; else htmlLabel" class="p-menuitem-text">{{ item.label }}</span>
-                                <ng-template #htmlLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
+                            <ng-container *ngIf="!itemTemplate">
+                                <span *ngIf="item.icon" class="p-menuitem-icon" [ngClass]="item.icon" [ngStyle]="item.iconStyle"></span>
+                                <ng-container *ngIf="item.label">
+                                    <span *ngIf="item.escape !== false; else htmlLabel" class="p-menuitem-text">{{ item.label }}</span>
+                                    <ng-template #htmlLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
+                                </ng-container>
+                            </ng-container>
+                            <ng-container *ngIf="itemTemplate">
+                                <ng-template *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"></ng-template>
                             </ng-container>
                         </a>
                         <a
@@ -112,10 +117,15 @@ import { BreadcrumbItemClickEvent } from './breadcrumb.interface';
                             [state]="item.state"
                             [ariaCurrentWhenActive]="isCurrentUrl(item)"
                         >
-                            <span *ngIf="item.icon" class="p-menuitem-icon" [ngClass]="item.icon" [ngStyle]="item.iconStyle"></span>
-                            <ng-container *ngIf="item.label">
-                                <span *ngIf="item.escape !== false; else htmlRouteLabel" class="p-menuitem-text">{{ item.label }}</span>
-                                <ng-template #htmlRouteLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
+                            <ng-container *ngIf="!itemTemplate">
+                                <span *ngIf="item.icon" class="p-menuitem-icon" [ngClass]="item.icon" [ngStyle]="item.iconStyle"></span>
+                                <ng-container *ngIf="item.label">
+                                    <span *ngIf="item.escape !== false; else htmlRouteLabel" class="p-menuitem-text">{{ item.label }}</span>
+                                    <ng-template #htmlRouteLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
+                                </ng-container>
+                            </ng-container>
+                            <ng-container *ngIf="itemTemplate">
+                                <ng-template *ngTemplateOutlet="itemTemplate; context: { $implicit: item }"></ng-template>
                             </ng-container>
                         </a>
                     </li>
@@ -171,6 +181,8 @@ export class Breadcrumb implements AfterContentInit {
 
     separatorTemplate: TemplateRef<any> | undefined;
 
+    itemTemplate: TemplateRef<any> | undefined;
+
     constructor(private router: Router) {}
 
     onClick(event: MouseEvent, item: MenuItem) {
@@ -208,6 +220,12 @@ export class Breadcrumb implements AfterContentInit {
                 case 'separator':
                     this.separatorTemplate = item.template;
                     break;
+                case 'item':
+                    this.itemTemplate = item.template;
+                    break;
+                default:
+                    this.itemTemplate = item.template;
+                    break;
             }
         });
     }

diff --git a/src/app/components/button/button.ts b/src/app/components/button/button.ts
@@ -223,7 +223,7 @@ export class ButtonDirective implements AfterViewInit, OnDestroy {
     }
 
     getIconClass() {
-        return this.loading ? 'p-button-loading-icon ' + (this.loadingIcon ? this.loadingIcon : 'p-icon') : this.icon;
+        return this.loading ? 'p-button-loading-icon ' + (this.loadingIcon ? this.loadingIcon : 'p-icon') : this.icon || 'p-hidden';
     }
 
     ngOnDestroy() {

diff --git a/src/app/components/carousel/carousel.ts b/src/app/components/carousel/carousel.ts
@@ -798,6 +798,7 @@ export class Carousel implements AfterContentInit {
         this.onPage.emit({
             page: this.page
         });
+        this.cd.markForCheck();
     }
 
     startAutoplay() {