Merge branch 'master' into add-maxlength-to-chips-component

primefaces · Jan 26, 2024 · 437a7b0 · 437a7b0
2 parents 340c051 + f305b27
commit 437a7b0
Show file tree

Hide file tree

Showing 13 changed files with 186 additions and 63 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,22 @@
 # Changelog
+## [17.4.0](https://github.com/primefaces/primeng/tree/17.4.0) (2024-01-24)
+
+[Full Changelog](https://github.com/primefaces/primeng/compare/17.3.3...17.4.0)
+
+**Implemented New Features and Enhancements:**
+- MultiSelect: selectedItemsLabel is not localized [\#14554](https://github.com/primefaces/primeng/issues/14554)
+
+**Fixed bugs:**
+- p-columnFilter: Missing icons to the table column filter dialog [\#14613](https://github.com/primefaces/primeng/issues/14613)
+- p-multiselect: Displaying the multiselect options dialog causes page to horizontally scroll [\#14611](https://github.com/primefaces/primeng/issues/14611)
+- p-calendar: Doesn't close on date selection in range mode [\#14558](https://github.com/primefaces/primeng/issues/14558)
+- ConfirmPopup arror right side rendering defect [\#14557](https://github.com/primefaces/primeng/issues/14557)
+- Dropdown: can't select input with Shift + Home / Shift + End [\#14540](https://github.com/primefaces/primeng/issues/14540)
+- TreeTable: StyleClass wont apply [\#14559](https://github.com/primefaces/primeng/issues/14559)
+- p-dropdown: optionValue is not working when object has property 'group' [\#14516](https://github.com/primefaces/primeng/issues/14516)
+- Table pSelectableRow: cannot type space into an pInputText component [\#14531](https://github.com/primefaces/primeng/issues/14531)
+- p-dropdown: Cannot clear dropdown programmatically [\#14544](https://github.com/primefaces/primeng/issues/14544)
+
 ## [17.3.3](https://github.com/primefaces/primeng/tree/17.3.3) (2024-01-18)
 
 [Full Changelog](https://github.com/primefaces/primeng/compare/17.3.2...17.3.3)
@@ -200,6 +218,18 @@
 - TypeError: this.focusedItemInfo.mutate is not a function [\#14119](https://github.com/primefaces/primeng/issues/14119)
 - Upgrade to Angular 17? [\#14063](https://github.com/primefaces/primeng/issues/14063)
 
+## ![LTS](https://www.primefaces.org/wp-content/uploads/2020/01/lts-icon-24.png "PrimeNG LTS") [16.9.4-LTS](https://www.npmjs.com/package/primeng/v/16.9.4-lts) (2024-01-19)
+
+**Fixed bugs:**
+- Table Virtual Scroll with Fixed Columns and Lazy Loading Causes Erratic Scrolling and Incomplete Data Display [\#14488](https://github.com/primefaces/primeng/issues/14488)
+- TreeTable with scrollHeight="flex" shrinks the header as the table rows are expanded. [\#14523](https://github.com/primefaces/primeng/issues/14523)
+- GalleriaThumbnail afterViewInit use platformBrowser instead of isPlatformBrowser. [\#14534](https://github.com/primefaces/primeng/issues/14534)
+- Autocomplete: focus not being applied when clicking around input [\#14530](https://github.com/primefaces/primeng/issues/14530)
+- Button | StyleClass does not work as expected [\#14583](https://github.com/primefaces/primeng/issues/14583)
+- MegaMenu | Error: Cannot read properties of undefined [\#14476](https://github.com/primefaces/primeng/issues/14476)
+- Table: Apply and Clear text buttons for filter menu are missing [\#14289](https://github.com/primefaces/primeng/issues/14289)
+- Dropdown: Infinite loop dynamic options array [\#14319](https://github.com/primefaces/primeng/issues/14319)
+
 ## ![LTS](https://www.primefaces.org/wp-content/uploads/2020/01/lts-icon-24.png "PrimeNG LTS") [16.9.3-LTS](https://www.npmjs.com/package/primeng/v/16.9.3-lts) (2023-12-28)
 
 **Fixed bugs:**
@@ -735,6 +765,16 @@
 - 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.15-LTS](https://www.npmjs.com/package/primeng/v/15.4.15-lts) (2024-01-19)
+
+**Fixed bugs:**
+- TreeTable with scrollHeight="flex" shrinks the header as the table rows are expanded. [\#14523](https://github.com/primefaces/primeng/issues/14523)
+- GalleriaThumbnail afterViewInit use platformBrowser instead of isPlatformBrowser [\#14534](https://github.com/primefaces/primeng/issues/14534)
+- Table Virtual Scroll with Fixed Columns and Lazy Loading Causes Erratic Scrolling and Incomplete Data Display [\#14488](https://github.com/primefaces/primeng/issues/14488)
+- Autocomplete: focus not being applied when clicking around input [\#14530](https://github.com/primefaces/primeng/issues/14530)
+- Button | StyleClass does not work as expected [\#14583](https://github.com/primefaces/primeng/issues/14583)
+
+
 ## ![LTS](https://www.primefaces.org/wp-content/uploads/2020/01/lts-icon-24.png "PrimeNG LTS") [15.4.14-LTS](https://www.npmjs.com/package/primeng/v/15.4.14-lts) (2023-12-14)
 
 **Fixed bugs:**

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

diff --git a/src/app/components/api/translationkeys.ts b/src/app/components/api/translationkeys.ts
@@ -43,4 +43,5 @@ export class TranslationKeys {
     public static readonly EMPTY_FILTER_MESSAGE = 'emptyFilterMessage';
     public static readonly SHOW_FILTER_MENU = 'Show Filter Menu';
     public static readonly HIDE_FILTER_MENU = 'Hide Filter Menu';
+    public static readonly SELECTION_MESSAGE = '{0} items selected';
 }
diff --git a/src/app/components/button/button.ts b/src/app/components/button/button.ts
@@ -411,6 +411,8 @@ export class Button implements AfterContentInit {
 
     @ContentChildren(PrimeTemplate) templates: QueryList<PrimeTemplate> | undefined;
 
+    constructor(public el: ElementRef) {}
+
     spinnerIconClass(): string {
         return Object.entries(this.iconClass())
             .filter(([, value]) => !!value)

diff --git a/src/app/components/calendar/calendar.ts b/src/app/components/calendar/calendar.ts
@@ -1486,7 +1486,7 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor {
             }
         }
 
-        if (this.isSingleSelection() && this.hideOnDateTimeSelect) {
+        if ((this.isSingleSelection() && this.hideOnDateTimeSelect) || (this.isRangeSelection() && this.value[1])) {
             setTimeout(() => {
                 event.preventDefault();
                 this.hideOverlay();

diff --git a/src/app/components/dropdown/dropdown.ts b/src/app/components/dropdown/dropdown.ts
@@ -268,13 +268,13 @@ export class DropdownItem {
                             <ng-template #buildInItems let-items let-scrollerOptions="options">
                                 <ul #items [attr.id]="id + '_list'" class="p-dropdown-items" [ngClass]="scrollerOptions.contentStyleClass" [style]="scrollerOptions.contentStyle" role="listbox">
                                     <ng-template ngFor let-option [ngForOf]="items" let-i="index">
-                                        <ng-container *ngIf="option.group">
+                                        <ng-container *ngIf="isOptionGroup(option)">
                                             <li class="p-dropdown-item-group" [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
                                                 <span *ngIf="!groupTemplate">{{ getOptionGroupLabel(option.optionGroup) }}</span>
                                                 <ng-container *ngTemplateOutlet="groupTemplate; context: { $implicit: option.optionGroup }"></ng-container>
                                             </li>
                                         </ng-container>
-                                        <ng-container *ngIf="!option.group">
+                                        <ng-container *ngIf="!isOptionGroup(option)">
                                             <p-dropdownItem
                                                 [id]="id + '_' + getOptionIndex(i, scrollerOptions)"
                                                 [option]="option"
@@ -930,6 +930,8 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
 
     selectedOption: any;
 
+    editableInputValue = computed(() => this.getOptionLabel(this.selectedOption) || this.modelValue() || '');
+
     constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, public zone: NgZone, public filterService: FilterService, public config: PrimeNGConfig) {
         effect(() => {
             const modelValue = this.modelValue();
@@ -939,7 +941,8 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
                 this.selectedOption = visibleOptions[this.findSelectedOptionIndex()];
                 this.cd.markForCheck();
             }
-            if ((modelValue !== undefined || modelValue !== null) && this.editable) {
+
+            if (modelValue !== undefined && this.editable) {
                 this.updateEditableLabel();
             }
         });
@@ -1109,7 +1112,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
 
     updateEditableLabel(): void {
         if (this.editableInputViewChild) {
-            this.editableInputViewChild.nativeElement.value = ObjectUtils.isNotEmpty(this.selectedOption) && this.selectedOption !== undefined ? this.getOptionLabel(this.selectedOption) : this.editableInputViewChild.nativeElement.value;
+            this.editableInputViewChild.nativeElement.value = this.getOptionLabel(this.selectedOption) || this.modelValue() || '';
         }
     }
 
@@ -1571,8 +1574,13 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
 
     onHomeKey(event: any, pressedInInputText: boolean = false) {
         if (pressedInInputText) {
-            event.currentTarget.setSelectionRange(0, 0);
-            this.focusedOptionIndex.set(-1);
+            const target = event.currentTarget;
+            if (event.shiftKey) {
+                target.setSelectionRange(0, target.value.length);
+            } else {
+                target.setSelectionRange(0, 0);
+                this.focusedOptionIndex.set(-1);
+            }
         } else {
             this.changeFocusedOptionIndex(event, this.findFirstOptionIndex());
 
@@ -1585,10 +1593,15 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
     onEndKey(event: any, pressedInInputText = false) {
         if (pressedInInputText) {
             const target = event.currentTarget;
-            const len = target.value.length;
 
-            target.setSelectionRange(len, len);
-            this.focusedOptionIndex.set(-1);
+            if (event.shiftKey) {
+                target.setSelectionRange(0, target.value.length);
+            } else {
+                const len = target.value.length;
+
+                target.setSelectionRange(len, len);
+                this.focusedOptionIndex.set(-1);
+            }
         } else {
             this.changeFocusedOptionIndex(event, this.findLastOptionIndex());
 

diff --git a/src/app/components/multiselect/multiselect.ts b/src/app/components/multiselect/multiselect.ts
@@ -1407,12 +1407,13 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft
 
     getSelectedItemsLabel() {
         let pattern = /{(.*?)}/;
+        let message = this.selectedItemsLabel ? this.selectedItemsLabel : this.config.getTranslation(TranslationKeys.SELECTION_MESSAGE);
 
-        if (pattern.test(this.selectedItemsLabel)) {
-            return this.selectedItemsLabel.replace(this.selectedItemsLabel.match(pattern)[0], this.modelValue().length + '');
+        if (pattern.test(message)) {
+            return message.replace(message.match(pattern)[0], this.modelValue().length + '');
         }
 
-        return this.selectedItemsLabel;
+        return message;
     }
 
     getOptionLabel(option: any) {
@@ -1915,7 +1916,7 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft
                         let selectedListItem = DomHandler.findSingle(this.itemsWrapper, '.p-multiselect-item.p-highlight');
 
                         if (selectedListItem) {
-                            selectedListItem.scrollIntoView({ block: 'nearest', inline: 'center' });
+                            selectedListItem.scrollIntoView({ block: 'nearest', inline: 'nearest' });
                         }
                     }
                 }

diff --git a/src/app/components/package.json b/src/app/components/package.json
@@ -1,6 +1,6 @@
 {
     "name": "primeng",
-    "version": "17.3.3",
+    "version": "17.4.0",
     "repository": {
         "type": "git",
         "url": "https://github.com/primefaces/primeng"

diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts
@@ -40,10 +40,12 @@ import { ArrowUpIcon } from 'primeng/icons/arrowup';
 import { CheckIcon } from 'primeng/icons/check';
 import { FilterIcon } from 'primeng/icons/filter';
 import { FilterSlashIcon } from 'primeng/icons/filterslash';
+import { PlusIcon } from 'primeng/icons/plus';
 import { SortAltIcon } from 'primeng/icons/sortalt';
 import { SortAmountDownIcon } from 'primeng/icons/sortamountdown';
 import { SortAmountUpAltIcon } from 'primeng/icons/sortamountupalt';
 import { SpinnerIcon } from 'primeng/icons/spinner';
+import { TrashIcon } from 'primeng/icons/trash';
 import { InputNumberModule } from 'primeng/inputnumber';
 import { InputTextModule } from 'primeng/inputtext';
 import { PaginatorModule } from 'primeng/paginator';
@@ -3660,28 +3662,33 @@ export class SelectableRow implements OnInit, OnDestroy {
     }
 
     onSpaceKey(event) {
-        this.onEnterKey(event);
+        const isInput = event.target instanceof HTMLInputElement || event.target instanceof HTMLSelectElement || event.target instanceof HTMLTextAreaElement;
+        if (isInput) {
+            return;
+        } else {
+            this.onEnterKey(event);
 
-        if (event.shiftKey && this.dt.selection !== null) {
-            const data = this.dt.dataToRender(this.dt.rows);
-            let index;
+            if (event.shiftKey && this.dt.selection !== null) {
+                const data = this.dt.dataToRender(this.dt.rows);
+                let index;
 
-            if (ObjectUtils.isNotEmpty(this.dt.selection) && this.dt.selection.length > 0) {
-                let firstSelectedRowIndex, lastSelectedRowIndex;
-                firstSelectedRowIndex = ObjectUtils.findIndexInList(this.dt.selection[0], data);
-                lastSelectedRowIndex = ObjectUtils.findIndexInList(this.dt.selection[this.dt.selection.length - 1], data);
+                if (ObjectUtils.isNotEmpty(this.dt.selection) && this.dt.selection.length > 0) {
+                    let firstSelectedRowIndex, lastSelectedRowIndex;
+                    firstSelectedRowIndex = ObjectUtils.findIndexInList(this.dt.selection[0], data);
+                    lastSelectedRowIndex = ObjectUtils.findIndexInList(this.dt.selection[this.dt.selection.length - 1], data);
 
-                index = this.index <= firstSelectedRowIndex ? lastSelectedRowIndex : firstSelectedRowIndex;
-            } else {
-                index = ObjectUtils.findIndexInList(this.dt.selection, data);
+                    index = this.index <= firstSelectedRowIndex ? lastSelectedRowIndex : firstSelectedRowIndex;
+                } else {
+                    index = ObjectUtils.findIndexInList(this.dt.selection, data);
+                }
+
+                this.dt.anchorRowIndex = index;
+                this.dt.selection = index !== this.index ? data.slice(Math.min(index, this.index), Math.max(index, this.index) + 1) : [this.data];
+                this.dt.selectRange(event, this.index);
             }
 
-            this.dt.anchorRowIndex = index;
-            this.dt.selection = index !== this.index ? data.slice(Math.min(index, this.index), Math.max(index, this.index) + 1) : [this.data];
-            this.dt.selectRange(event, this.index);
+            event.preventDefault();
         }
-
-        event.preventDefault();
     }
 
     focusRowChange(firstFocusableRow, currentFocusedRow) {
@@ -5022,15 +5029,15 @@ export class ReorderableRow implements AfterViewInit {
                                     [attr.aria-label]="removeRuleButtonLabel"
                                     [label]="removeRuleButtonLabel"
                                 >
-                                    <TrashIcon *ngIf="!removeRuleIconTemplate" />
+                                    <TrashIcon *ngIf="!removeRuleIconTemplate" [styleClass]="'p-button-icon-left'" />
                                     <ng-template *ngTemplateOutlet="removeRuleIconTemplate"></ng-template>
                                 </button>
                             </div>
                         </div>
                     </div>
                     <div class="p-column-filter-add-rule" *ngIf="isShowAddConstraint">
                         <button type="button" pButton [label]="addRuleButtonLabel" [attr.aria-label]="addRuleButtonLabel" class="p-column-filter-add-button p-button-text p-button-sm" (click)="addConstraint()" pRipple>
-                            <PlusIcon *ngIf="!addRuleIconTemplate" />
+                            <PlusIcon *ngIf="!addRuleIconTemplate" [styleClass]="'p-button-icon-left'" />
                             <ng-template *ngTemplateOutlet="addRuleIconTemplate"></ng-template>
                         </button>
                     </div>
@@ -5823,7 +5830,9 @@ export class ColumnFilterFormElement implements OnInit {
         SortAmountDownIcon,
         CheckIcon,
         FilterIcon,
-        FilterSlashIcon
+        FilterSlashIcon,
+        PlusIcon,
+        TrashIcon
     ],
     exports: [
         Table,

diff --git a/src/app/components/treetable/treetable.ts b/src/app/components/treetable/treetable.ts
@@ -3311,6 +3311,7 @@ export class TreeTableCellEditor implements AfterContentInit {
     selector: '[ttRow]',
     host: {
         class: 'p-element',
+        '[class]': `'p-element ' + styleClass`,
         '[attr.tabindex]': "'0'",
         '[attr.aria-expanded]': 'expanded',
         '[attr.aria-level]': 'level',
@@ -3323,6 +3324,10 @@ export class TTRow {
         return this.rowNode?.['level'] + 1;
     }
 
+    get styleClass() {
+        return this.rowNode?.node['styleClass'] || '';
+    }
+
     get expanded() {
         return this.rowNode?.node['expanded'];
     }

diff --git a/src/app/showcase/data/versions.json b/src/app/showcase/data/versions.json
@@ -1,6 +1,6 @@
 [
     {
-        "version": "v17.3.3",
+        "version": "v17.4.0",
         "name": "v17",
         "url": "https://primeng.org"
     },