Merge branch 'prod'

package.json

@@ -22,6 +22,7 @@
         "type": "git",
         "url": "https://github.com/primefaces/primeng.git"
     },
+    "type": "module",
     "devDependencies": {
         "@angular-devkit/build-angular": "^17.0.5",
         "@angular-eslint/eslint-plugin": "17.1.1",

src/app/showcase/doc/guides/csslayer/bootstrapdoc.ts

@@ -15,7 +15,6 @@ export class BootstrapDoc {
     code: Code = {
         basic: `@layer bootstrap-reboot, primeng
 
-@import "bootstrap-reboot.css" layer(bootstrap-rebooot);
-`
+@import "bootstrap-reboot.css" layer(bootstrap-rebooot);`
     };
 }

src/app/showcase/doc/guides/csslayer/resetdoc.ts

@@ -26,7 +26,6 @@ export class ResetDoc {
     input {
         /* CSS to Reset */
     }
-}
-`
+}`
     };
 }

src/app/showcase/doc/guides/csslayer/specificitydoc.ts

@@ -5,10 +5,9 @@ import { Code } from 'src/app/showcase/domain/code';
     selector: 'specificity-doc',
     template: `
         <app-docsectiontext>
-            <p class="notification">A CSS layer is utilized in styled mode only, in unstyled mode the built-in CSS classes are not included and as a result no layer is defined. This documentation only applies to styled mode.</p>
             <p>
                 The <i>&#64;layer</i> is a standard CSS feature to define cascade layers for a customizable order of precedence. If you need to become more familiar with layers, visit the documentation at
-                <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@layer">MDN</a> to begin with. PrimeNG wraps the built-in style classes under the <i>primeNG</i> cascade layer to make the library styles easy to override. CSS in your app
+                <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@layer">MDN</a> to begin with. PrimeNG wraps the built-in style classes under the <i>primeng</i> cascade layer to make the library styles easy to override. CSS in your app
                 without a layer has the highest CSS specificity, so you'll be able to override styles regardless of the location or how strong a class is written.
             </p>
             <p>

src/app/showcase/doc/guides/csslayer/tailwinddoc.ts

@@ -25,7 +25,6 @@ export class TailwindDoc {
 @layer tailwind-utilities {
     @tailwind components;
     @tailwind utilities;
-}
-    `
+}`
     };
 }

src/app/showcase/doc/installation/stylesdoc.ts

@@ -9,11 +9,18 @@ import { Code } from '../../domain/code';
                 Theme and Core styles are the necessary css files of the components, visit the <a href="/theming#themes" class="">Themes</a> section for the complete list of available themes to choose from. Styles can either be imported at
                 <i>angular.json</i> or <i>src/styles.css</i> file.
             </p>
-            <h3>angular.json</h3>
+            <h3>With angular.json</h3>
             <app-code [code]="code1" [hideToggleCode]="true"></app-code>
 
-            <h3>styles.css</h3>
+            <h3>With styles.css</h3>
             <app-code [code]="code2" [hideToggleCode]="true"></app-code>
+
+            <h3>CSS layer</h3>
+            <p>
+                The style classes of PrimeNG are defined under the <i>primeng</i> CSS layer to be easier to customize by having low specificity. If you are using a CSS library that styles default HTML elements such as Tailwind Preflight, Bootstrap,
+                Normalize, or similar, a custom CSS layer configuration would be necessary for compatibility. View the <a [routerLink]="['/guides/csslayer']">CSS Layer</a> guide for more information.
+            </p>
+            <app-code [code]="code3" [hideToggleCode]="true"></app-code>
         </app-docsectiontext>
     `
 })
@@ -31,4 +38,17 @@ export class StylesDoc {
         scss: `@import "primeng/resources/themes/lara-light-blue/theme.css";
 @import "primeng/resources/primeng.css";`
     };
+
+    code3: Code = {
+        scss: `/* Order */
+@layer reset, primeng;
+
+/* Reset CSS */
+@layer reset {
+    button,
+    input {
+        /* CSS to Reset */
+    }
+}`
+    };
 }

src/app/showcase/layout/app.config.ts

@@ -1,15 +1,10 @@
 import { ApplicationConfig } from '@angular/core';
-import { provideRouter, withDisabledInitialNavigation, withEnabledBlockingInitialNavigation, withInMemoryScrolling, withViewTransitions } from '@angular/router';
+import { provideRouter, withEnabledBlockingInitialNavigation, withInMemoryScrolling } from '@angular/router';
 
-import { routes } from './app.routes';
-import { provideClientHydration } from '@angular/platform-browser';
-import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { provideHttpClient, withFetch } from '@angular/common/http';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-    providers: [
-        provideRouter(routes, withInMemoryScrolling({ anchorScrolling: 'enabled', scrollPositionRestoration: 'enabled' }), withEnabledBlockingInitialNavigation(), withViewTransitions()),
-        provideHttpClient(withFetch()),
-        provideAnimationsAsync()
-    ]
+    providers: [provideRouter(routes, withInMemoryScrolling({ anchorScrolling: 'enabled', scrollPositionRestoration: 'enabled' }), withEnabledBlockingInitialNavigation()), provideHttpClient(withFetch()), provideAnimationsAsync()]
 };

src/app/showcase/pages/guides/csslayer/csslayerdemo.component.html

@@ -1 +1 @@
-<app-doc docTitle="CSS Layer - PrimeNG" header="CSS Layer" [docs]="docs" description="Best practices for the PrimeVue cascade layer in styled mode."></app-doc>
+<app-doc docTitle="CSS Layer - PrimeNG" header="CSS Layer" [docs]="docs" description="Best practices for the PrimeNG cascade layer in styled mode."></app-doc>