Merge branch 'master' into standalone-button

primefaces · May 15, 2024 · 38c0552 · 38c0552
2 parents 0acad20 + 86337e1
commit 38c0552
Show file tree

Hide file tree

Showing 12 changed files with 292 additions and 42 deletions.
diff --git a/src/app/components/button/button.interface.ts b/src/app/components/button/button.interface.ts
@@ -1,3 +1,4 @@
+import { NgClass } from '@angular/common';
 import { TemplateRef } from '@angular/core';
 
 /**
@@ -12,9 +13,19 @@ export interface ButtonTemplates {
     /**
      * Custom template of icon.
      */
-    icon(): TemplateRef<any>;
+    icon(context: {
+        /**
+         * Icon class.
+         */
+        class: NgClass;
+    }): TemplateRef<NgClass>;
     /**
      * Custom template of loadingicon.
      */
-    loadingicon(): TemplateRef<any>;
+    loadingicon(context: {
+        /**
+         * Icon class.
+         */
+        class: NgClass;
+    }): TemplateRef<NgClass>;
 }
diff --git a/src/app/components/button/button.ts b/src/app/components/button/button.ts
@@ -354,18 +354,14 @@ 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 pi-spin ' + loadingIcon" [ngClass]="iconClass()" [attr.aria-hidden]="true" [attr.data-pc-section]="'loadingicon'"></span>
+                    <span *ngIf="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" [ngClass]="iconClass()" [attr.aria-hidden]="true" [attr.data-pc-section]="'loadingicon'">
-                    <ng-template *ngTemplateOutlet="loadingIconTemplate"></ng-template>
-                </span>
+                <ng-template [ngIf]="loadingIconTemplate" *ngTemplateOutlet="loadingIconTemplate; context: { class: iconClass() }"></ng-template>
             </ng-container>
             <ng-container *ngIf="!loading">
                 <span *ngIf="icon && !iconTemplate" [class]="icon" [ngClass]="iconClass()" [attr.data-pc-section]="'icon'"></span>
-                <span *ngIf="!icon && iconTemplate" [ngClass]="iconClass()" [attr.data-pc-section]="'icon'">
-                    <ng-template [ngIf]="!icon" *ngTemplateOutlet="iconTemplate"></ng-template>
-                </span>
+                <ng-template [ngIf]="!icon && iconTemplate" *ngTemplateOutlet="iconTemplate; context: { class: iconClass() }"></ng-template>
             </ng-container>
             <span class="p-button-label" [attr.aria-hidden]="icon && !label" *ngIf="!contentTemplate && label" [attr.data-pc-section]="'label'">{{ label }}</span>
             <span [ngClass]="badgeStyleClass()" [class]="badgeClass" *ngIf="!contentTemplate && badge" [attr.data-pc-section]="'badge'">{{ badge }}</span>
@@ -529,6 +525,7 @@ export class Button implements AfterContentInit {
 
     iconClass() {
         return {
+            [`p-button-loading-icon pi-spin ${this.loadingIcon ?? ''}`]: this.loading,
             'p-button-icon': true,
             'p-button-icon-left': this.iconPos === 'left' && this.label,
             'p-button-icon-right': this.iconPos === 'right' && this.label,

diff --git a/src/app/components/inputmask/inputmask.ts b/src/app/components/inputmask/inputmask.ts
@@ -94,7 +94,7 @@ export const INPUTMASK_VALUE_ACCESSOR: any = {
             (keydown)="onInputKeydown($event)"
             (keypress)="onKeyPress($event)"
             pAutoFocus
-            [variant]="variant"
+            [attr.variant]="variant"
             [autofocus]="autofocus"
             (input)="onInputChange($event)"
             (paste)="handleInputChange($event)"

diff --git a/src/app/components/inputnumber/inputnumber.ts b/src/app/components/inputnumber/inputnumber.ts
@@ -68,7 +68,7 @@ export const INPUTNUMBER_VALUE_ACCESSOR: any = {
                 [ngStyle]="inputStyle"
                 [class]="inputStyleClass"
                 [value]="formattedValue()"
-                [variant]="variant"
+                [attr.variant]="variant"
                 [attr.aria-valuemin]="min"
                 [attr.aria-valuemax]="max"
                 [attr.aria-valuenow]="value"

diff --git a/src/app/components/inputotp/inputotp.ts b/src/app/components/inputotp/inputotp.ts
@@ -321,18 +321,20 @@ export class InputOtp implements AfterContentInit {
     }
 
     onPaste(event) {
-        let paste = event.clipboardData.getData('text');
+        if (!this.disabled && !this.readonly) {
+            let paste = event.clipboardData.getData('text');
 
-        if (paste.length) {
-            let pastedCode = paste.substring(0, this.length + 1);
+            if (paste.length) {
+                let pastedCode = paste.substring(0, this.length + 1);
 
-            if (!this.integerOnly || !isNaN(pastedCode)) {
-                this.tokens = pastedCode.split('');
-                this.updateModel(event);
+                if (!this.integerOnly || !isNaN(pastedCode)) {
+                    this.tokens = pastedCode.split('');
+                    this.updateModel(event);
+                }
             }
-        }
 
-        event.preventDefault();
+            event.preventDefault();
+        }
     }
 
     getRange(n: number): number[] {

diff --git a/src/app/components/listbox/listbox.spec.ts b/src/app/components/listbox/listbox.spec.ts
@@ -43,7 +43,7 @@ describe('Listbox', () => {
             { label: 'VW', value: 'VW' },
             { label: 'Volvo', value: 'Volvo' }
         ];
-        const onOptionSelectSpy = spyOn(listbox, 'onOptionSelect').and.callThrough();
+        const onClickSpy = spyOn(listbox.onClick, 'emit').and.callThrough();
         fixture.detectChanges();
 
         const bmwEl = fixture.debugElement.query(By.css('ul')).children[1].nativeElement;
@@ -52,7 +52,7 @@ describe('Listbox', () => {
 
         const filterInputEl = fixture.debugElement.query(By.css('.p-listbox-filter-container')).query(By.css('input')).nativeElement;
         expect(filterInputEl.disabled).toEqual(true);
-        expect(onOptionSelectSpy).not.toHaveBeenCalled();
+        expect(onClickSpy).not.toHaveBeenCalled();
     });
 
     it('should call onOptionTouchEnd', () => {
@@ -101,7 +101,7 @@ describe('Listbox', () => {
         fixture.detectChanges();
 
         expect(onOptionTouchEndSpy).toHaveBeenCalled();
-        expect(listbox.optionTouched).toEqual(undefined);
+        expect(listbox.optionTouched).toBeTrue();
     });
 
     it('should change style and styleClass', () => {
@@ -259,7 +259,6 @@ describe('Listbox', () => {
         fixture.detectChanges();
 
         expect(listbox.value.length).toEqual(10);
-        expect(listbox.selectAll).toEqual(true);
         expect(selectAllEl.className).toContain('p-highlight');
         expect(onToggleAllSpy).toHaveBeenCalled();
     });
@@ -278,6 +277,7 @@ describe('Listbox', () => {
             { label: 'Volvo', value: 'Volvo' }
         ];
         listbox.filter = true;
+        listbox.optionLabel = 'label';
         fixture.detectChanges();
 
         const filterInputEl = fixture.debugElement.query(By.css('.p-listbox-filter-container')).children[0].nativeElement;
@@ -503,7 +503,6 @@ describe('Listbox', () => {
         fixture.detectChanges();
 
         expect(listbox.value.length).toEqual(0);
-        expect(listbox.selectAll).toEqual(false);
         expect(selectAllEl.className).not.toContain('p-highlight');
         expect(toggleAllSpy).toHaveBeenCalledTimes(2);
     });
@@ -577,6 +576,7 @@ describe('Listbox', () => {
         listbox.checkbox = true;
         listbox.filter = true;
         listbox.filterValue = 'o';
+        listbox.optionLabel = 'label';
         fixture.detectChanges();
 
         const headerCheckBoxReadonlyEl = fixture.debugElement.query(By.css('.p-checkbox.p-component')).query(By.css('input'));
@@ -609,27 +609,22 @@ describe('Listbox', () => {
             { label: 'VW', value: 'VW' },
             { label: 'Volvo', value: 'Volvo' }
         ];
-        const findNextOptionIndexSpy = spyOn(listbox, 'findNextOptionIndex').and.callThrough();
-        const findPrevOptionIndexSpy = spyOn(listbox, 'findPrevOptionIndex').and.callThrough();
+        const onArrowDownKeySpy = spyOn(listbox, 'onArrowDownKey').and.callThrough();
+        const onArrowUpKeySpy = spyOn(listbox, 'onArrowUpKey').and.callThrough();
         fixture.detectChanges();
 
-        const bmwEl = fixture.debugElement.query(By.css('ul')).children[1].nativeElement;
-        const event: any = document.createEvent('CustomEvent');
-        event.which = 40;
-        event.initEvent('keydown');
-        bmwEl.dispatchEvent(event);
+        const bmwEl = fixture.debugElement.query(By.css('.p-listbox-list')).nativeElement;
+        bmwEl.dispatchEvent(new KeyboardEvent('keydown', { code: 'ArrowDown' }));
         fixture.detectChanges();
 
-        event.which = 38;
-        bmwEl.dispatchEvent(event);
+        bmwEl.dispatchEvent(new KeyboardEvent('keydown', { code: 'ArrowUp' }));
         fixture.detectChanges();
 
-        event.which = 13;
-        bmwEl.dispatchEvent(event);
+        bmwEl.dispatchEvent(new KeyboardEvent('keydown', { code: 'Enter' }));
         fixture.detectChanges();
 
-        expect(findNextOptionIndexSpy).toHaveBeenCalled();
-        expect(findPrevOptionIndexSpy).toHaveBeenCalled();
-        expect(listbox.value).toEqual('BMW');
+        expect(onArrowDownKeySpy).toHaveBeenCalled();
+        expect(onArrowUpKeySpy).toHaveBeenCalled();
+        expect(listbox.value).toEqual('Audi');
     });
 });
diff --git a/src/app/components/listbox/listbox.ts b/src/app/components/listbox/listbox.ts
@@ -179,7 +179,7 @@ export const LISTBOX_VALUE_ACCESSOR: any = {
                                     [attr.aria-selected]="isSelected(option)"
                                     [attr.aria-disabled]="isOptionDisabled(option)"
                                     [attr.aria-setsize]="ariaSetSize"
-                                    [ariaPosInset]="getAriaPosInset(getOptionIndex(i, scrollerOptions))"
+                                    [attr.ariaPosInset]="getAriaPosInset(getOptionIndex(i, scrollerOptions))"
                                     (click)="onOptionSelect($event, option, getOptionIndex(i, scrollerOptions))"
                                     (dblclick)="onOptionDoubleClick($event, option)"
                                     (mousedown)="onOptionMouseDown($event, getOptionIndex(i, scrollerOptions))"

diff --git a/src/app/components/treeselect/treeselect.ts b/src/app/components/treeselect/treeselect.ts
@@ -170,6 +170,7 @@ export const TREESELECT_VALUE_ACCESSOR: any = {
                                 [virtualScrollItemSize]="virtualScrollItemSize"
                                 [virtualScrollOptions]="virtualScrollOptions"
                                 [_templateMap]="templateMap"
+                                [loading]="loading"
                             >
                                 <ng-container *ngIf="emptyTemplate">
                                     <ng-template pTemplate="empty">
@@ -425,6 +426,11 @@ export class TreeSelect implements AfterContentInit {
         this._hideTransitionOptions = val;
         console.warn('The hideTransitionOptions property is deprecated since v14.2.0, use overlayOptions property instead.');
     }
+    /**
+     * Displays a loader to indicate data load is in progress.
+     * @group Props
+     */
+    @Input({ transform: booleanAttribute }) loading: boolean | undefined;
     /**
      * Callback to invoke when a node is expanded.
      * @param {TreeSelectNodeExpandEvent} event - Custom node expand event.

diff --git a/src/app/showcase/doc/terminal/basicdoc.ts b/src/app/showcase/doc/terminal/basicdoc.ts
@@ -34,10 +34,14 @@ export class BasicDoc implements OnDestroy {
     }
 
     code: Code = {
-        basic: `<p>Enter "<strong>date</strong>" to display the current date, "<strong>greet &#123;0&#125;</strong>" for a message and "<strong>random</strong>" to get a random number.</p>
+        basic: `<p>Enter "<strong>date</strong>" to display the current date, 
+"<strong>greet &#123;0&#125;</strong>" for a message and "<strong>random</strong>" 
+to get a random number.</p>
 <p-terminal welcomeMessage="Welcome to PrimeNG" prompt="primeng $" />`,
         html: `<div class="card">
-    <p>Enter "<strong>date</strong>" to display the current date, "<strong>greet {0}</strong>" for a message and "<strong>random</strong>" to get a random number.</p>
+    <p>Enter "<strong>date</strong>" to display the current date,
+    "<strong>greet &#123;0&#125;</strong>" for a message and "<strong>random</strong>" 
+    to get a random number.</p>
     <p-terminal welcomeMessage="Welcome to PrimeNG" prompt="primeng $" />
 </div>`,
         typescript: `import { Component, OnDestroy } from '@angular/core';