Merge branch 'master' into accessibility

primefaces · Aug 10, 2023 · 5eb07df · 5eb07df
2 parents d859c1c + 27b2abb
commit 5eb07df
Show file tree

Hide file tree

Showing 72 changed files with 281 additions and 125 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -134,6 +134,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.7-LTS](https://www.npmjs.com/package/primeng/v/15.4.7-lts) (2023-08-03)
+
+**Fixed bugs:**
+- TabView | Last element is not visible when scrolling=true [\#13371](https://github.com/primefaces/primeng/issues/13371)
+- Calendar | Icon is not visible (material compact theme) [\#13123](https://github.com/primefaces/primeng/issues/13123)
+- DynamicDialogRef - onClose Observable never completes [\#9732](https://github.com/primefaces/primeng/issues/9732)
+
 ## ![LTS](https://www.primefaces.org/wp-content/uploads/2020/01/lts-icon-24.png "PrimeNG LTS") [15.4.6-LTS](https://www.npmjs.com/package/primeng/v/15.4.6-lts) (2023-07-19)
 
 **Fixed bugs:**
@@ -369,6 +376,13 @@
 - 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.10-LTS](https://www.npmjs.com/package/primeng/v/14.2.10-lts) (2023-08-03)
+
+**Fixed bugs:**
+- Slidemenu: Separator class mismatch [\#13279](https://github.com/primefaces/primeng/issues/13279)
+- TabView | Last element is not visible when scrolling=true [\#13371](https://github.com/primefaces/primeng/issues/13371)
+- DynamicDialogRef - onClose Observable never completes [\#9732](https://github.com/primefaces/primeng/issues/9732)
+
 ## ![LTS](https://www.primefaces.org/wp-content/uploads/2020/01/lts-icon-24.png "PrimeNG LTS") [14.2.9-LTS](https://www.npmjs.com/package/primeng/v/14.2.9-lts) (2023-06-19)
 
 **Fixed bugs:**

diff --git a/src/app/components/accordion/accordion.ts b/src/app/components/accordion/accordion.ts
@@ -35,11 +35,11 @@ import { UniqueComponentId } from 'primeng/utils';
     selector: 'p-accordionTab',
     template: `
         <div class="p-accordion-tab" [class.p-accordion-tab-active]="selected" [ngClass]="tabStyleClass" [ngStyle]="tabStyle" [attr.data-pc-name]="'accordiontab'">
-            <div class="p-accordion-header" [class.p-highlight]="selected" [class.p-disabled]="disabled" [attr.data-p-disabled]="disabled" [attr.data-pc-section]="'header'">
+            <div class="p-accordion-header" role="heading" [attr.aria-level]="headerAriaLevel" [class.p-highlight]="selected" [class.p-disabled]="disabled" [attr.data-p-disabled]="disabled" [attr.data-pc-section]="'header'">
                 <a
                     [ngClass]="headerStyleClass"
                     [style]="headerStyle"
-                    role="tab"
+                    role="button"
                     class="p-accordion-header-link"
                     (click)="toggle($event)"
                     (keydown)="onKeydown($event)"
@@ -190,6 +190,11 @@ export class AccordionTab implements AfterContentInit, OnDestroy {
             this.changeDetector.detectChanges();
         }
     }
+    /**
+     * The aria-level that each accordion header will have. The default value is 2 as per W3C specifications
+     * @group Props
+     */
+    @Input() headerAriaLevel: number = 2;
     /**
      * Event triggered by changing the choice.
      * @param {boolean} value - Boolean value indicates that the option is changed.
@@ -328,7 +333,7 @@ export class AccordionTab implements AfterContentInit, OnDestroy {
 @Component({
     selector: 'p-accordion',
     template: `
-        <div [ngClass]="'p-accordion p-component'" [ngStyle]="style" [class]="styleClass" role="tablist">
+        <div [ngClass]="'p-accordion p-component'" [ngStyle]="style" [class]="styleClass">
             <ng-content></ng-content>
         </div>
     `,
@@ -384,6 +389,20 @@ export class Accordion implements BlockableUI, AfterContentInit, OnDestroy {
      * @group Props
      */
     @Input() selectOnFocus: boolean = false;
+    /**
+     * The aria-level that each accordion header will have. The default value is 2 as per W3C specifications
+     * @group Props
+     */
+    @Input() get headerAriaLevel(): number {
+        return this._headerAriaLevel;
+    }
+    set headerAriaLevel(val: number) {
+        if (typeof val === 'number' && val > 0) {
+            this._headerAriaLevel = val;
+        } else if (this._headerAriaLevel !== 2) {
+            this._headerAriaLevel = 2;
+        }
+    }
     /**
      * Callback to invoke when an active tab is collapsed by clicking on the header.
      * @param {AccordionTabCloseEvent} event - Custom tab close event.
@@ -408,6 +427,7 @@ export class Accordion implements BlockableUI, AfterContentInit, OnDestroy {
     tabListSubscription: Subscription | null = null;
 
     private _activeIndex: any;
+    private _headerAriaLevel: number = 2;
 
     preventActiveIndexPropagation: boolean = false;
 
@@ -536,6 +556,10 @@ export class Accordion implements BlockableUI, AfterContentInit, OnDestroy {
     initTabs() {
         this.tabs = (this.tabList as QueryList<AccordionTab>).toArray();
 
+        this.tabs.forEach(tab => {
+            tab.headerAriaLevel = this._headerAriaLevel;
+        })
+
         this.updateSelectionState();
         this.changeDetector.markForCheck();
     }

diff --git a/src/app/components/button/button.css b/src/app/components/button/button.css
@@ -68,3 +68,7 @@
     position: relative;
     z-index: 1;
 }
+
+p-button[iconpos="right"] spinnericon {
+    order: 1;
+}
diff --git a/src/app/components/button/button.ts b/src/app/components/button/button.ts
@@ -136,6 +136,11 @@ export class ButtonDirective implements AfterViewInit, OnDestroy {
             if (!this.icon && this.label) {
                 styleClass.push(INTERNAL_BUTTON_CLASSES.labelOnly);
             }
+
+            if(this.icon && !this.label && !ObjectUtils.isEmpty(this.htmlElement.textContent)){
+                styleClass.push(INTERNAL_BUTTON_CLASSES.iconOnly);
+            }
+
         }
 
         return styleClass;
@@ -199,22 +204,32 @@ export class ButtonDirective implements AfterViewInit, OnDestroy {
 
     updateIcon() {
         let iconElement = DomHandler.findSingle(this.htmlElement, '.p-button-icon');
+        let labelElement = DomHandler.findSingle(this.htmlElement, '.p-button-label');
 
         if (!this.icon && !this.loading) {
             iconElement && this.htmlElement.removeChild(iconElement);
             return;
         }
 
+        if(this.loading && !this.loadingIcon && iconElement) {
+            iconElement.innerHTML = this.spinnerIcon;
+        }
+
         if (iconElement) {
-            if (this.iconPos) iconElement.className = 'p-button-icon p-button-icon-' + this.iconPos + ' ' + this.getIconClass();
-            else iconElement.className = 'p-button-icon ' + this.getIconClass();
+            if (this.iconPos) {
+                iconElement.className = 'p-button-icon ' + (labelElement ? 'p-button-icon-' + this.iconPos : '' )+ ' ' + this.getIconClass();
+            }
+            else {
+                iconElement.className = 'p-button-icon ' + this.getIconClass();
+            } 
         } else {
             this.createIcon();
         }
     }
 
+
     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;
     }
 
     ngOnDestroy() {
@@ -246,10 +261,10 @@ export class ButtonDirective implements AfterViewInit, OnDestroy {
             <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
             <ng-container *ngIf="loading">
                 <ng-container *ngIf="!loadingIconTemplate">
-                    <span *ngIf="loadingIcon" [class]="'p-button-loading-icon' + icon" [ngClass]="iconClass()" [attr.aria-hidden]="true" [attr.data-pc-section]="'loadingicon'"></span>
-                    <SpinnerIcon *ngIf="!loadingIcon" [styleClass]="spinnerIconClass()" [spin]="true" [attr.aria-hidden]="true" [attr.data-pc-section]="'loadingicon'" />
+                    <span *ngIf="loadingIcon" [class]="'p-button-loading-icon pi-spin ' + loadingIcon" [ngClass]="iconClass()" [attr.aria-hidden]="true" [attr.data-pc-section]="'loadingicon'"></span>
+                    <SpinnerIcon *ngIf="!loadingIcon" [styleClass]="spinnerIconClass()" [spin]="true" [attr.aria-hidden]="true" [attr.data-pc-section]="'loadingicon'"/>
                 </ng-container>
-                <span *ngIf="loadingIconTemplate" class="p-button-loading-icon" [attr.aria-hidden]="true" [attr.data-pc-section]="'loadingicon'">
+                <span *ngIf="loadingIconTemplate" class="p-button-loading-icon" [ngClass]="iconClass()" [attr.aria-hidden]="true" [attr.data-pc-section]="'loadingicon'">
                     <ng-template *ngTemplateOutlet="loadingIconTemplate"></ng-template>
                 </span>
             </ng-container>
@@ -379,11 +394,11 @@ export class Button implements AfterContentInit {
     buttonClass() {
         return {
             'p-button p-component': true,
-            'p-button-icon-only': this.icon && !this.label,
+            'p-button-icon-only': (this.icon || this.iconTemplate || this.loadingIcon || this.loadingIconTemplate) && !this.label,
             'p-button-vertical': (this.iconPos === 'top' || this.iconPos === 'bottom') && this.label,
             'p-disabled': this.disabled || this.loading,
             'p-button-loading': this.loading,
-            'p-button-loading-label-only': this.loading && !this.icon && this.label
+            'p-button-loading-label-only': this.loading && !this.icon && this.label && !this.loadingIcon && this.iconPos === 'left'
         };
     }
 

diff --git a/src/app/components/contextmenu/contextmenu.ts b/src/app/components/contextmenu/contextmenu.ts
@@ -11,12 +11,14 @@ import {
     Inject,
     Input,
     NgModule,
+    OnChanges,
     OnDestroy,
     OnInit,
     Output,
     PLATFORM_ID,
     QueryList,
     Renderer2,
+    SimpleChanges,
     TemplateRef,
     ViewChild,
     ViewContainerRef,
@@ -379,7 +381,13 @@ export class ContextMenu implements OnInit, AfterContentInit, OnDestroy {
      * An array of menuitems.
      * @group Props
      */
-    @Input() model: MenuItem[] | undefined;
+    @Input() set model(value: MenuItem[] | undefined) {
+        this._model = value;
+        this._processedItems = this.createProcessedItems(this._model || []);
+    }
+    get model(): MenuItem[] | undefined {
+        return this._model;
+    }
     /**
      * Event for which the menu must be displayed.
      * @group Props
@@ -490,6 +498,8 @@ export class ContextMenu implements OnInit, AfterContentInit, OnDestroy {
 
     _processedItems: any[];
 
+    _model: MenuItem[] | undefined;
+
     get visibleItems() {
         const processedItem = this.activeItemPath().find((p) => p.key === this.focusedItemInfo().parentKey);
 
@@ -917,10 +927,6 @@ export class ContextMenu implements OnInit, AfterContentInit, OnDestroy {
             this.target = null;
         }
 
-        if (this.appendTo) {
-            this.renderer.appendChild(this.el.nativeElement, this.containerViewChild?.nativeElement);
-        }
-
         if (this.container && this.autoZIndex) {
             ZIndexUtils.clear(this.container);
         }

diff --git a/src/app/components/fileupload/fileupload.ts b/src/app/components/fileupload/fileupload.ts
@@ -69,7 +69,7 @@ import { FileBeforeUploadEvent, FileProgressEvent, FileRemoveEvent, FileSelectEv
                 </span>
 
                 <p-button *ngIf="!auto && showUploadButton" type="button" [label]="uploadButtonLabel" (onClick)="upload()" [disabled]="!hasFiles() || isFileLimitExceeded()" [styleClass]="uploadStyleClass">
-                    <span *ngIf="uploadIcon" [ngClass]="uploadIcon" [attr.aria-hidden]="true"></span>
+                    <span *ngIf="uploadIcon" [ngClass]="uploadIcon" [attr.aria-hidden]="true" class="p-button-icon p-button-icon-left"></span>
                     <ng-container *ngIf="!uploadIcon">
                         <UploadIcon *ngIf="!uploadIconTemplate" [styleClass]="'p-button-icon p-button-icon-left'" />
                         <span *ngIf="uploadIconTemplate" class="p-button-icon p-button-icon-left" [attr.aria-hidden]="true">
@@ -78,7 +78,7 @@ import { FileBeforeUploadEvent, FileProgressEvent, FileRemoveEvent, FileSelectEv
                     </ng-container>
                 </p-button>
                 <p-button *ngIf="!auto && showCancelButton" type="button" [label]="cancelButtonLabel" (onClick)="clear()" [disabled]="!hasFiles() || uploading" [styleClass]="cancelStyleClass">
-                    <span *ngIf="cancelIcon" [ngClass]="cancelIcon"></span>
+                    <span *ngIf="cancelIcon" [ngClass]="cancelIcon" class="p-button-icon p-button-icon-left"></span>
                     <ng-container *ngIf="!cancelIcon">
                         <TimesIcon *ngIf="!cancelIconTemplate" [styleClass]="'p-button-icon p-button-icon-left'" [attr.aria-hidden]="true" />
                         <span *ngIf="cancelIconTemplate" class="p-button-icon p-button-icon-left" [attr.aria-hidden]="true">
@@ -467,7 +467,7 @@ export class FileUpload implements AfterViewInit, AfterContentInit, OnInit, OnDe
         private http: HttpClient,
         public cd: ChangeDetectorRef,
         public config: PrimeNGConfig
-    ) {}
+    ) { }
 
     ngAfterContentInit() {
         this.templates?.forEach((item) => {
@@ -585,7 +585,7 @@ export class FileUpload implements AfterViewInit, AfterContentInit, OnInit, OnDe
     }
 
     validate(file: File): boolean {
-        this.msgs = [];
+        this.msgs = this.msgs || [];
         if (this.accept && !this.isFileTypeValid(file)) {
             this.msgs.push({
                 severity: 'error',
@@ -827,15 +827,18 @@ export class FileUpload implements AfterViewInit, AfterContentInit, OnInit, OnDe
     }
 
     formatSize(bytes: number) {
-        if (bytes == 0) {
+        const k = 1024;
+        const dm = 3;
+        const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+        if (bytes === 0) {
             return '0 B';
         }
-        let k = 1000,
-            dm = 3,
-            sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
-            i = Math.floor(Math.log(bytes) / Math.log(k));
 
-        return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        const formattedSize = (bytes / Math.pow(k, i)).toFixed(dm);
+
+        return `${formattedSize} ${sizes[i]}`;
     }
 
     onBasicUploaderClick() {
@@ -893,4 +896,4 @@ export class FileUpload implements AfterViewInit, AfterContentInit, OnInit, OnDe
     exports: [FileUpload, SharedModule, ButtonModule, ProgressBarModule, MessagesModule],
     declarations: [FileUpload]
 })
-export class FileUploadModule {}
+export class FileUploadModule { }
diff --git a/src/app/components/inputnumber/inputnumber.ts b/src/app/components/inputnumber/inputnumber.ts
@@ -440,9 +440,9 @@ export class InputNumber implements OnInit, AfterContentInit, OnChanges, Control
 
     value: Nullable<number>;
 
-    onModelChange: Function = () => {};
+    onModelChange: Function = () => { };
 
-    onModelTouched: Function = () => {};
+    onModelTouched: Function = () => { };
 
     focused: Nullable<boolean>;
 
@@ -482,7 +482,7 @@ export class InputNumber implements OnInit, AfterContentInit, OnChanges, Control
 
     private ngControl: NgControl | null = null;
 
-    constructor(@Inject(DOCUMENT) private document: Document, public el: ElementRef, private cd: ChangeDetectorRef, private readonly injector: Injector) {}
+    constructor(@Inject(DOCUMENT) private document: Document, public el: ElementRef, private cd: ChangeDetectorRef, private readonly injector: Injector) { }
 
     ngOnChanges(simpleChange: SimpleChanges) {
         const props = ['locale', 'localeMatcher', 'mode', 'currency', 'currencyDisplay', 'useGrouping', 'minFractionDigits', 'maxFractionDigits', 'prefix', 'suffix'];
@@ -919,6 +919,12 @@ export class InputNumber implements OnInit, AfterContentInit, OnChanges, Control
             event.preventDefault();
         }
 
+        const newValue = this.parseValue(this.input.nativeElement.value + char);
+        const newValueStr = newValue != null ? newValue.toString() : '';
+        if (this.maxlength && newValueStr.length > this.maxlength) {
+            return;
+        }
+
         if ((48 <= code && code <= 57) || isMinusSign || isDecimalSign) {
             this.insert(event, char, { isDecimalSign, isMinusSign });
         }
@@ -1214,6 +1220,13 @@ export class InputNumber implements OnInit, AfterContentInit, OnChanges, Control
         } else {
             let selectionStart = this.input.nativeElement.selectionStart;
             let selectionEnd = this.input.nativeElement.selectionEnd;
+
+            if (this.maxlength && newValue.length > this.maxlength) {
+                newValue = newValue.slice(0, this.maxlength);
+                selectionStart = Math.min(selectionStart, this.maxlength);
+                selectionEnd = Math.min(selectionEnd, this.maxlength);
+            }
+
             if (this.maxlength && this.maxlength < newValue.length) {
                 return;
             }
@@ -1368,4 +1381,4 @@ export class InputNumber implements OnInit, AfterContentInit, OnChanges, Control
     exports: [InputNumber, SharedModule],
     declarations: [InputNumber]
 })
-export class InputNumberModule {}
+export class InputNumberModule { }
diff --git a/src/app/components/inputtextarea/inputtextarea.spec.ts b/src/app/components/inputtextarea/inputtextarea.spec.ts
@@ -52,12 +52,12 @@ describe('InputTextarea', () => {
         fixture.detectChanges();
 
         const inputTextEl = fixture.debugElement.query(By.css('textarea'));
-        let cachedHeight = inputTextEl.nativeElement.style.height;
+        let cachedHeight = parseInt(inputTextEl.nativeElement.style.height);
         inputTextEl.nativeElement.value = 'primeng';
         inputTextEl.nativeElement.dispatchEvent(new Event('input'));
         fixture.detectChanges();
 
-        expect(inputTextEl.nativeElement.style.height).toBeGreaterThan(cachedHeight);
+        expect(parseInt(inputTextEl.nativeElement.style.height)).toBeGreaterThan(cachedHeight);
         expect(inputTextEl.nativeElement.style.overflow).toEqual('hidden');
     });