Merge remote-tracking branch 'origin/v18' into v18

primefaces · Dec 2, 2024 · a173984 · a173984
2 parents 05a96ce + 246261e
commit a173984
Show file tree

Hide file tree

Showing 19 changed files with 82 additions and 23 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,55 @@
 # Changelog
+## [18.0.0-rc.2](https://github.com/primefaces/primeng/tree/18.0.0-rc.2) (2024-10-29)
+[Full Changelog](https://github.com/primefaces/primeng/compare/18.0.0-rc.1...18.0.0-rc.2)
+
+**Implemented New Features and Enhancements:**
+- Add ImageCompare Component [\#16865](https://github.com/primefaces/primeng/issues/16865)
+- RTL Support [\#16793](https://github.com/primefaces/primeng/issues/16793)
+
+**Fixed bugs:**
+- MultiSelect v18: Wrong placeholder color - missing p-placeholder class [\#16479](https://github.com/primefaces/primeng/issues/16479)
+- Improve CascadeSelect's functionality [\#16884](https://github.com/primefaces/primeng/issues/16884)
+- PanelMenu | Hover is not working on child items. [\#16882](https://github.com/primefaces/primeng/issues/16882)
+- Focus state visuals does not apply to invalid form components [\#16855](https://github.com/primefaces/primeng/issues/16855)
+- Select (v18): overlap between outline and border with invalid state [\#16577](https://github.com/primefaces/primeng/issues/16577)
+- Tree | Tree component throws an error when pressing the Enter key: 'Cannot set properties of undefined.' [\#16879](https://github.com/primefaces/primeng/issues/16879)
+- Tree: Arrow Up not working [\#16874](https://github.com/primefaces/primeng/issues/16874)
+- ERROR TypeError: this.document.head.prepend is not a function in 18.0.0-rc.1 [\#16875](https://github.com/primefaces/primeng/issues/16875)
+- DatePicker: Calling focus on non existent selector breaks overlay [\#16872](https://github.com/primefaces/primeng/issues/16872)
+- DatePicker: Icons are wrong in RTL mode [\#16873](https://github.com/primefaces/primeng/issues/16873)
+- Fileupload | add chooseButtonProps & uploadButtonProps & cancelButtonProps [\#16869](https://github.com/primefaces/primeng/issues/16869)
+- v18 - CSS Layers for example with Tailwind CSS fail when appending styles to header and SSR enabled [\#16595](https://github.com/primefaces/primeng/issues/16595)
+- Splitter: Totally broken in v18 [\#16770](https://github.com/primefaces/primeng/issues/16770)
+- Component: AutoComplete virtualScroll broken (v18.0.0-rc.1) [\#16822](https://github.com/primefaces/primeng/issues/16822)
+- Filter button triggers sort [\#16817](https://github.com/primefaces/primeng/issues/16817)
+- Accordion - Ripple | unexpected behavior [\#16804](https://github.com/primefaces/primeng/issues/16804)
+- Component: FloatLabel, IftaLabel [\#16601](https://github.com/primefaces/primeng/issues/16601)
+- Component: FloatLabel and IftaLabel (v18) documentation lacks "Features" tab [\#16797](https://github.com/primefaces/primeng/issues/16797)
+- TreeTable (18.0.0-beta.3) - Disclosure triangles are missing [\#16712](https://github.com/primefaces/primeng/issues/16712)
+- DatePicker: "Cannot read properties of null" error when clicking on next/previous month button (18.0.0-beta.3) [\#16590](https://github.com/primefaces/primeng/issues/16590)
+- CascadeSelect | Set the default value of autoOptionFocus to false [\#16850](https://github.com/primefaces/primeng/issues/16850)
+- MultiSelect | Set the default value of autoOptionFocus to false [\#16847](https://github.com/primefaces/primeng/issues/16847)
+- Select | Set the default value of autoOptionFocus to false [\#16845](https://github.com/primefaces/primeng/issues/16845)
+- p-picklist Filter stop working in v18 beta-3 [\#16622](https://github.com/primefaces/primeng/issues/16622)
+- Password: ExpressionChangedAfterItHasBeenCheckedError on ToggleMask [\#16719](https://github.com/primefaces/primeng/issues/16719)
+- Panel Menu - wrong class when using routerLink [\#16683](https://github.com/primefaces/primeng/issues/16683)
+- Select v18: Checkmark not working [\#16419](https://github.com/primefaces/primeng/issues/16419)
+- Menu component templates not rendered v18.0.0-beta.4 [\#16765](https://github.com/primefaces/primeng/issues/16765)
+- p-buttonGroup throws console errors when styleClass is applied [\#16559](https://github.com/primefaces/primeng/issues/16559)
+- Data filter and sorting issue on v18 table [\#16360](https://github.com/primefaces/primeng/issues/16360)
+- DatePicker Component - Error on Month Switch: "Cannot read properties of null (reading 'focus')" [\#16720](https://github.com/primefaces/primeng/issues/16720)
+- Component: ConfirmDialog doesn't render buttons (v18.0.0-rc.1) [\#16780](https://github.com/primefaces/primeng/issues/16780)
+- Docs: Setting defined custom preset [\#16647](https://github.com/primefaces/primeng/issues/16647)
+- Input group with filled input visuals broken in Material Theme [\#16810](https://github.com/primefaces/primeng/issues/16810)
+- Better compatability with CSS libraries like Tailwind, Bootstrap [\#16809](https://github.com/primefaces/primeng/issues/16809)
+- Docs: "Icon Only" code example [\#16645](https://github.com/primefaces/primeng/issues/16645)
+- Component: Textarea, style is not being applied. [\#16678](https://github.com/primefaces/primeng/issues/16678)
+- Missleading typo leads to no theme in documentary [\#16763](https://github.com/primefaces/primeng/issues/16763)
+- Tab: disabled input is not disabling tab [\#16768](https://github.com/primefaces/primeng/issues/16768)
+- Docs: Theming is outdated (PrimeNg 18.0.0-rc.1) [\#16759](https://github.com/primefaces/primeng/issues/16759)
+- Typo code example in /showcase/doc/theming/themedoc.ts [\#16695](https://github.com/primefaces/primeng/issues/16695)
+- fix(docs): typo in theming#component [\#16643](https://github.com/primefaces/primeng/issues/16643)
+
 ## [17.17.0](https://github.com/primefaces/primeng/tree/17.17.0) (2024-05-16)
 [Full Changelog](https://github.com/primefaces/primeng/compare/17.16.1...17.17.0)
 

diff --git a/LICENSE.md b/LICENSE.md
@@ -4,7 +4,7 @@
 
 The MIT License (MIT)
 
-Copyright (c) 2016-2024 PrimeTek
+Copyright (c) 2016-2025 PrimeTek
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -9,3 +9,4 @@
 ### Website
 
 PrimeNG is a rich set of open source UI Components for Angular. Visit the [PrimeNG website](https://primeng.org/) for interactive demos, comprehensive documentation and additional resources.
+
diff --git a/apps/showcase/assets/data/menu.json b/apps/showcase/assets/data/menu.json
@@ -476,7 +476,7 @@
         {
             "name": "Figma UI Kit",
             "icon": "pi pi-pencil",
-            "href": "https://primeng.org/uikit"
+            "routerLink": "/uikit"
         },
         {
             "name": "Icons",
@@ -495,7 +495,7 @@
         {
             "name": "Templates",
             "icon": "pi pi-star",
-            "href": "https://primeng.org/templates"
+            "routerLink": "/templates"
         },
         {
             "name": "PrimeBlocks",

diff --git a/apps/showcase/components/doc/app.docsection-nav.component.ts b/apps/showcase/components/doc/app.docsection-nav.component.ts
@@ -1,6 +1,6 @@
 import { Doc } from '@/domain/doc';
 import { DOCUMENT, isPlatformBrowser, Location } from '@angular/common';
-import { Component, ElementRef, Inject, Input, NgZone, OnDestroy, OnInit, PLATFORM_ID, Renderer2, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, ElementRef, Inject, Input, NgZone, OnDestroy, OnInit, PLATFORM_ID, Renderer2, ViewChild } from '@angular/core';
 import { DomHandler } from 'primeng/dom';
 import { ObjectUtils } from 'primeng/utils';
 import { Subscription } from 'rxjs';
@@ -44,6 +44,7 @@ export class AppDocSectionNavComponent implements OnInit, OnDestroy {
     set activeId(val: string) {
         if (val !== this._activeId) {
             this._activeId = val;
+            this.cd.markForCheck();
         }
     }
 
@@ -60,7 +61,8 @@ export class AppDocSectionNavComponent implements OnInit, OnDestroy {
         @Inject(PLATFORM_ID) private platformId: any,
         private location: Location,
         private zone: NgZone,
-        private renderer: Renderer2
+        private renderer: Renderer2,
+        private cd: ChangeDetectorRef
     ) {}
 
     ngOnInit(): void {

diff --git a/apps/showcase/components/template/templatelicense.ts b/apps/showcase/components/template/templatelicense.ts
@@ -13,8 +13,8 @@ import { ButtonModule } from 'primeng/button';
                         <div class="flex-1 border border-surface rounded-xl lg:rounded-2xl p-6 min-w-80">
                             <span class="text-surface-600 dark:text-surface-400 font-semibold">{{ licenseData?.title }}</span>
                             <div class="text-surface-900 dark:text-surface-0 text-4xl font-semibold mt-4 mb-5">
-                                <span [ngClass]="{ 'text-muted-color line-through mr-4': licenseData?.discount_price }">{{ licenseData?.price }}</span>
-                                <span>{{ licenseData?.discount_price }}</span>
+                                <span [ngClass]="{ 'text-muted-color line-through mr-4': license?.showDiscount }">{{ licenseData?.price }}</span>
+                                <span *ngIf="license?.showDiscount">{{ licenseData?.discount_price }}</span>
                             </div>
                             <div class="flex flex-col gap-2 mb-5">
                                 <ng-container *ngFor="let txt of licenseData?.included; let j = index">

diff --git a/apps/showcase/doc/confirmdialog/headlessdoc.ts b/apps/showcase/doc/confirmdialog/headlessdoc.ts
@@ -10,7 +10,7 @@ import { ConfirmationService, MessageService } from 'primeng/api';
         </app-docsectiontext>
         <div class="card flex justify-center">
             <p-toast />
-            <p-confirmDialog #cd>
+            <p-confirmdialog #cd>
                 <ng-template #headless let-message let-onAccept="onAccept" let-onReject="onReject">
                     <div class="flex flex-col items-center p-8 bg-surface-0 dark:bg-surface-900 rounded">
                         <div class="rounded-full bg-primary text-primary-contrast inline-flex justify-center items-center h-24 w-24 -mt-20">
@@ -24,7 +24,7 @@ import { ConfirmationService, MessageService } from 'primeng/api';
                         </div>
                     </div>
                 </ng-template>
-            </p-confirmDialog>
+            </p-confirmdialog>
             <p-button (click)="confirm()" label="Save" />
         </div>
         <app-code [code]="code" selector="confirm-dialog-headless-demo"></app-code>
@@ -52,7 +52,7 @@ export class HeadlessDoc {
 
     code: Code = {
         basic: `<p-toast />
-<p-confirmDialog #cd>
+<p-confirmdialog #cd>
     <ng-template #headless let-message let-onAccept="onAccept" let-onReject="onReject">
         <div class="flex flex-col items-center p-8 bg-surface-0 dark:bg-surface-900 rounded">
             <div
@@ -68,12 +68,12 @@ export class HeadlessDoc {
             </div>
         </div>
     </ng-template>
-</p-confirmDialog>
+</p-confirmdialog>
 <p-button (click)="confirm()" label="Save"/>`,
 
         html: `<div class="card flex justify-center">
     <p-toast />
-    <p-confirmDialog #cd>
+    <p-confirmdialog #cd>
         <ng-template #headless let-message let-onAccept="onAccept" let-onReject="onReject">
             <div class="flex flex-col items-center p-8 bg-surface-0 dark:bg-surface-900 rounded">
                 <div
@@ -89,7 +89,7 @@ export class HeadlessDoc {
                 </div>
             </div>
         </ng-template>
-    </p-confirmDialog>
+    </p-confirmdialog>
     <p-button (click)="confirm()" label="Save"/>
 </div>`,
 

diff --git a/apps/showcase/pages/lts/index.ts b/apps/showcase/pages/lts/index.ts
@@ -148,8 +148,7 @@ import { TagModule } from 'primeng/tag';
                                 <hr class="my-4 mx-0 border-t border-0 border-surface" />
                                 <div class="flex gap-4 flex-wrap">
                                     <div class="flex gap-4 flex-wrap">
-                                        <span class="text-2xl text-muted-color line-through">$249</span>
-                                        <span class="text-2xl font-bold">$149</span>
+                                        <span class="text-2xl font-bold">$249</span>
                                     </div>
                                 </div>
                                 <hr class="my-4 mx-0 border-t border-0 border-surface" />
@@ -189,8 +188,7 @@ import { TagModule } from 'primeng/tag';
                                 <hr class="my-4 mx-0 border-t border-0 border-surface" />
                                 <div class="flex gap-4 flex-wrap">
                                     <div class="flex gap-4 flex-wrap">
-                                        <span class="text-2xl text-muted-color line-through">$990</span>
-                                        <span class="text-2xl font-bold">$490</span>
+                                        <span class="text-2xl font-bold">$990</span>
                                     </div>
                                 </div>
                                 <hr class="my-4 mx-0 border-t border-0 border-surface" />

diff --git a/apps/showcase/pages/templates/apollo/apollo.ts b/apps/showcase/pages/templates/apollo/apollo.ts
@@ -256,15 +256,18 @@ export class ApolloPage {
     license = {
         documentLink: 'https://apollo.primeng.org/documentation/',
         description: 'The download package is an Angular CLI-based project containing all source code of the application deployed at the live demo. The project code is written in TypeScript.',
+        showDiscount: false,
         licenseDetails: [
             {
                 title: 'Basic License',
                 price: '$59',
+                discount_price: '$39',
                 included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
             },
             {
                 title: 'Extended License',
                 price: '$590',
+                discount_price: '$390',
                 included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
             }
         ]

diff --git a/apps/showcase/pages/templates/atlantis/atlantis.ts b/apps/showcase/pages/templates/atlantis/atlantis.ts
@@ -197,6 +197,7 @@ export class AtlantisPage {
     license = {
         documentLink: 'https://atlantis.primeng.org/documentation',
         description: 'The download package is an Angular CLI-based project containing all source code of the application deployed at the live demo. The project code is written in TypeScript.',
+        showDiscount: false,
         licenseDetails: [
             {
                 title: 'Basic License',

diff --git a/apps/showcase/pages/templates/avalon/avalon.ts b/apps/showcase/pages/templates/avalon/avalon.ts
@@ -222,6 +222,7 @@ export class AvalonPage {
     license = {
         documentLink: 'https://avalon.primeng.org/documentation',
         description: 'The download package is an Angular CLI-based project containing all source code of the application deployed at the live demo. The project code is written in TypeScript.',
+        showDiscount: false,
         licenseDetails: [
             {
                 title: 'Basic License',

diff --git a/apps/showcase/pages/templates/diamond/diamond.ts b/apps/showcase/pages/templates/diamond/diamond.ts
@@ -221,6 +221,7 @@ export class DiamondPage {
     license = {
         documentLink: 'https://diamond.primeng.org/documentation/',
         description: 'The download package is an Angular CLI-based project containing all source code of the application deployed at the live demo. The project code is written in TypeScript.',
+        showDiscount: false,
         licenseDetails: [
             {
                 title: 'Basic License',

diff --git a/apps/showcase/pages/templates/freya/freya.ts b/apps/showcase/pages/templates/freya/freya.ts
@@ -214,6 +214,7 @@ export class FreyaPage {
     license = {
         documentLink: 'https://freya.primeng.org/documentation',
         description: 'The download package is an Angular CLI-based project containing all source code of the application deployed at the live demo. The project code is written in TypeScript.',
+        showDiscount: false,
         licenseDetails: [
             {
                 title: 'Basic License',

diff --git a/apps/showcase/pages/templates/poseidon/poseidon.ts b/apps/showcase/pages/templates/poseidon/poseidon.ts
@@ -171,6 +171,7 @@ export class PoseidonPage {
     license = {
         documentLink: 'https://poseidon.primeng.org/documentation/',
         description: 'The download package is an Angular CLI-based project containing all source code of the application deployed at the live demo. The project code is written in TypeScript.',
+        showDiscount: false,
         licenseDetails: [
             {
                 title: 'Basic License',

diff --git a/apps/showcase/pages/templates/ultima/ultima.ts b/apps/showcase/pages/templates/ultima/ultima.ts
@@ -216,6 +216,7 @@ export class UltimaPage {
     license = {
         documentLink: 'https://ultima.primeng.org/documentation/',
         description: 'The download package is an Angular CLI-based project containing all source code of the application deployed at the live demo. The project code is written in TypeScript.',
+        showDiscount: false,
         licenseDetails: [
             {
                 title: 'Basic License',

diff --git a/apps/showcase/pages/templates/verona/verona.ts b/apps/showcase/pages/templates/verona/verona.ts
@@ -206,6 +206,7 @@ export class VeronaPage {
     license = {
         documentLink: 'https://verona.primeng.org/documentation',
         description: 'The download package is an Angular CLI-based project containing all source code of the application deployed at the live demo. The project code is written in TypeScript.',
+        showDiscount: false,
         licenseDetails: [
             {
                 title: 'Basic License',

diff --git a/apps/showcase/pages/uikit/index.ts b/apps/showcase/pages/uikit/index.ts
@@ -165,8 +165,7 @@ import { Subscription } from 'rxjs';
                                 <div class="text-surface-600 dark:text-surface-200 font-medium">For individual designers</div>
                                 <hr class="my-4 mx-0 border-t border-0 border-surface" />
                                 <div class="flex gap-4 flex-wrap">
-                                    <span class="text-2xl font-bold text-surface-900 dark:text-surface-0 line-through text-muted-color">$99</span>
-                                    <span class="text-2xl font-bold text-surface-900 dark:text-surface-0">$49</span>
+                                    <span class="text-2xl font-bold text-surface-900 dark:text-surface-0">$249</span>
                                 </div>
                                 <hr class="my-4 mx-0 border-t border-0 border-surface" />
                                 <ul class="list-none p-0 m-0 grow text-lg">
@@ -209,8 +208,7 @@ import { Subscription } from 'rxjs';
                                 <hr class="my-4 mx-0 border-t border-0 border-surface" />
                                 <div class="flex gap-4 flex-wrap">
                                     <div class="flex gap-4 flex-wrap">
-                                        <span class="text-2xl font-bold text-surface-900 dark:text-surface-0 line-through text-muted-color">$249</span>
-                                        <span class="text-2xl font-bold text-surface-900 dark:text-surface-0">$149</span>
+                                        <span class="text-2xl font-bold text-surface-900 dark:text-surface-0">$990</span>
                                     </div>
                                 </div>
                                 <hr class="my-4 mx-0 border-t border-0 border-surface" />

diff --git a/packages/primeng/src/dropdown/dropdown.ts b/packages/primeng/src/dropdown/dropdown.ts
@@ -60,7 +60,6 @@ import { TooltipModule } from 'primeng/tooltip';
 import { Nullable } from 'primeng/ts-helpers';
 import { DropdownChangeEvent, DropdownFilterEvent, DropdownFilterOptions, DropdownLazyLoadEvent } from './dropdown.interface';
 import { DropdownStyle } from './style/dropdownstyle';
-import { useCustomJiti } from 'tailwindcss/src/lib/load-config';
 
 export const DROPDOWN_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR,

diff --git a/packages/themes/src/presets/material/button/index.ts b/packages/themes/src/presets/material/button/index.ts
@@ -498,7 +498,7 @@ export default {
     },
     css: ({ dt }) => `
 .p-button:focus-visible {
-    background: ${dt('button.primary.active.background')}
+    background: ${dt('button.primary.active.background')};
     border-color: ${dt('button.primary.active.background')};
 }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,3 +9,4 @@
		### Website

		PrimeNG is a rich set of open source UI Components for Angular. Visit the [PrimeNG website](https://primeng.org/) for interactive demos, comprehensive documentation and additional resources.