Merge branch 'v18' of https://github.com/primefaces/primeng into v18

.vscode/settings.json

@@ -15,13 +15,5 @@
     "[typescript]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode",
         "editor.formatOnSave": true
-    },
-    "workbench.colorCustomizations": {
-        "commandCenter.border": "#15202b99",
-        "sash.hoverBorder": "#d0b79e",
-        "titleBar.activeBackground": "#c09d7b",
-        "titleBar.activeForeground": "#15202b",
-        "titleBar.inactiveBackground": "#c09d7b99",
-        "titleBar.inactiveForeground": "#15202b99"
     }
 }

apps/showcase/doc/configuration/configurationdoc.module.ts

@@ -4,19 +4,20 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { CspDoc } from './cspdoc';
+import { DynamicDoc } from './dynamicdoc';
 import { FilterModeDoc } from './filtermodedoc';
-import { ImportDoc } from './importdoc';
 import { ApiDoc } from './locale/apidoc';
-import { NgxTranslateDoc } from './locale/ngx-translatedoc';
 import { RepositoryDoc } from './locale/repositorydoc';
-import { SetLocaleDoc } from './locale/setlocaledoc';
+import { RuntimeDoc } from './locale/runtimedoc';
+import { TranslationDoc } from './locale/translationdoc';
+import { ProviderDoc } from './providerdoc';
 import { RippleDoc } from './rippledoc';
-import { ThemingDoc } from './themingdoc';
+import { ThemeDoc } from './themedoc';
 import { ZIndexDoc } from './zindexdoc';
 
 @NgModule({
     imports: [CommonModule, AppCodeModule, AppDocModule, RouterModule],
     exports: [AppDocModule],
-    declarations: [FilterModeDoc, ImportDoc, CspDoc, RippleDoc, ZIndexDoc, NgxTranslateDoc, ApiDoc, RepositoryDoc, SetLocaleDoc, ThemingDoc]
+    declarations: [FilterModeDoc, ProviderDoc, DynamicDoc, CspDoc, RippleDoc, ZIndexDoc, RuntimeDoc, ApiDoc, RepositoryDoc, TranslationDoc, ThemeDoc]
 })
 export class ConfigurationDocModule {}

apps/showcase/doc/configuration/cspdoc.ts

@@ -12,9 +12,10 @@ import { Component } from '@angular/core';
 })
 export class CspDoc {
     code: Code = {
-        basic: `constructor(private primengConfig: PrimeNGConfig) {
-    this.config.csp.set({nonce: '...'});
-}
-        `
+        typescript: `providePrimeNG({ 
+    csp: {
+        nonce: '...'
+    }
+})`
     };
 }

apps/showcase/doc/configuration/dynamicdoc.ts

@@ -0,0 +1,31 @@
+import { Code } from '@/domain/code';
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'dynamic-doc',
+    template: `
+        <app-docsectiontext>
+            <p>Inject the <i>PrimeNG</i> to your application to update the initial configuration at runtime.</p>
+        </app-docsectiontext>
+        <app-code [code]="code" [hideToggleCode]="true"></app-code>
+    `
+})
+export class DynamicDoc {
+    code: Code = {
+        typescript: `import { Component, OnInit } from '@angular/core';
+import { PrimeNG } from 'primeng/config';
+
+@Component({
+    selector: 'app-root',
+    templateUrl: './app.component.html'
+})
+export class AppComponent implements OnInit {
+
+    constructor(private primeng: PrimeNG) {}
+
+    ngOnInit() {
+        this.primeng.ripple.set(true);
+    }
+}`
+    };
+}

apps/showcase/doc/configuration/locale/ngx-translatedoc.ts → apps/showcase/doc/configuration/locale/runtimedoc.ts

@@ -5,16 +5,16 @@ import { Component } from '@angular/core';
     selector: 'ngx-translate-doc',
     template: `
         <app-docsectiontext>
-            <p>i18n API can easily be integrated with 3rd party libraries such as ngx-translate that even allows dynamically changing the language in the application.</p>
+            <p>The translations can be changed dynamically at runtime, here is an example with ngx-translate.</p>
         </app-docsectiontext>
         <app-code [code]="code" [hideToggleCode]="true"></app-code>
     `
 })
-export class NgxTranslateDoc {
+export class RuntimeDoc {
     code: Code = {
         typescript: `
 import { Component, OnInit } from '@angular/core';
-import { PrimeNGConfig } from 'primeng/api';
+import { PrimeNG } from 'primeng/config';
 import { TranslateService } from '@ngx-translate/core';
 
 @Component({
@@ -23,15 +23,15 @@ import { TranslateService } from '@ngx-translate/core';
 })
 export class AppComponent implements OnInit {
 
-    constructor(private config: PrimeNGConfig, private translateService: TranslateService) {}
+    constructor(private config: PrimeNG, private translateService: TranslateService) {}
 
     ngOnInit() {
         this.translateService.setDefaultLang('en');
     }
 
     translate(lang: string) {
         this.translateService.use(lang);
-        this.translateService.get('primeng').subscribe(res => this.config.setTranslation(res));
+        this.translateService.get('primeng').subscribe(res => this.primeng.setTranslation(res));
     }
 }`
     };

apps/showcase/doc/configuration/locale/translationdoc.ts

@@ -0,0 +1,23 @@
+import { Code } from '@/domain/code';
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'translation-doc',
+    template: `
+        <app-docsectiontext>
+            <p>A translation is specified using the translation property during initialization.</p>
+            <app-code [code]="code" [hideToggleCode]="true"></app-code>
+        </app-docsectiontext>
+    `
+})
+export class TranslationDoc {
+    code: Code = {
+        typescript: `providePrimeNG({ 
+    translation: {
+        accept: 'Aceptar',
+        reject: 'Rechazar',
+        //translations
+    }
+})`
+    };
+}

apps/showcase/doc/configuration/providerdoc.ts

@@ -0,0 +1,26 @@
+import { Code } from '@/domain/code';
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'provider-doc',
+    template: `
+        <app-docsectiontext>
+            <p>The initial configuration is defined by the <i>providePrimeNG</i> provider during application startup.</p>
+        </app-docsectiontext>
+        <app-code [code]="code" [hideToggleCode]="true"></app-code>
+    `
+})
+export class ProviderDoc {
+    code: Code = {
+        typescript: `import { ApplicationConfig } from '@angular/core';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { providePrimeNG } from 'primeng/config';
+
+export const appConfig: ApplicationConfig = {
+    providers: [
+        provideAnimationsAsync(),
+        providePrimeNG({ /* options */ })
+    ]
+};`
+    };
+}

apps/showcase/doc/configuration/rippledoc.ts

@@ -5,27 +5,15 @@ import { Component } from '@angular/core';
     selector: 'ripple-doc',
     template: `
         <app-docsectiontext>
-            <p>Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled globally by injecting <i>PrimeNGConfig</i>.</p>
+            <p>Ripple is an optional animation for the supported components such as buttons. It is disabled by default.</p>
         </app-docsectiontext>
         <app-code [code]="code" [hideToggleCode]="true"></app-code>
     `
 })
 export class RippleDoc {
     code: Code = {
-        typescript: `import { Component, OnInit } from '@angular/core';
-import { PrimeNGConfig } from 'primeng/api';
-
-@Component({
-    selector: 'app-root',
-    templateUrl: './app.component.html'
-})
-export class AppComponent implements OnInit {
-
-    constructor(private primengConfig: PrimeNGConfig) {}
-
-    ngOnInit() {
-        this.primengConfig.ripple.set(true);
-    }
-}`
+        typescript: `providePrimeNG({ 
+    ripple: true
+})`
     };
 }

apps/showcase/doc/configuration/themedoc.ts

@@ -0,0 +1,37 @@
+import { Code } from '@/domain/code';
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'theming-doc',
+    template: `
+        <app-docsectiontext>
+            <p>PrimeNG provides 4 predefined themes out of the box; Aura, Material, Lara and Nora. See the <a routerLink="/theming">theming</a> documentation for details.</p>
+        </app-docsectiontext>
+        <app-code [code]="code" [hideToggleCode]="true"></app-code>
+    `
+})
+export class ThemeDoc {
+    code: Code = {
+        typescript: `import { ApplicationConfig } from '@angular/core';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { providePrimeNG } from 'primeng/config';
+
+import Aura from '@primeng/themes/aura';
+
+export const appConfig: ApplicationConfig = {
+    providers: [
+        provideAnimationsAsync(),
+        providePrimeNG({
+            theme: {
+                preset: Aura,
+                options: {
+                    prefix: 'p',
+                    darkModeSelector: 'system',
+                    cssLayer: false
+                }
+            }
+        })
+    ]
+};`
+    };
+}

apps/showcase/doc/configuration/zindexdoc.ts

@@ -10,7 +10,6 @@ import { Component } from '@angular/core';
                 layout where header section is fixed. In a case like this, dropdown needs to be displayed below the application header but a modal dialog should be displayed above. PrimeNG configuration offers the <i>zIndex</i> property to customize
                 the default values for components categories. Default values are described below and can be customized when setting up PrimeNG.
             </p>
-            <p class="doc-section-description">The ZIndex of all components is increased according to their groups in harmony with each other. When <i>autoZIndex</i> is false, each group increments its zIndex within itself.</p>
         </app-docsectiontext>
         <app-code [code]="code" [hideToggleCode]="true"></app-code>
     `