fix: Fixed #17588 Fixed #17601

apps/showcase/app/app.config.ts

@@ -11,6 +11,6 @@ export const appConfig: ApplicationConfig = {
         provideRouter(routes, withInMemoryScrolling({ anchorScrolling: 'enabled', scrollPositionRestoration: 'enabled' })), // withEnabledBlockingInitialNavigation()
         provideHttpClient(withFetch()),
         provideAnimationsAsync(),
-        providePrimeNG({ theme: Noir, ripple: false, inputVariant: 'filled' })
+        providePrimeNG({ theme: Noir, ripple: false })
     ]
 };

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

@@ -6,6 +6,7 @@ import { RouterModule } from '@angular/router';
 import { CspDoc } from './cspdoc';
 import { DynamicDoc } from './dynamicdoc';
 import { FilterModeDoc } from './filtermodedoc';
+import { InputVariantDoc } from './inputvariantdoc';
 import { ApiDoc } from './locale/apidoc';
 import { RepositoryDoc } from './locale/repositorydoc';
 import { RuntimeDoc } from './locale/runtimedoc';
@@ -18,6 +19,6 @@ import { ZIndexDoc } from './zindexdoc';
 @NgModule({
     imports: [CommonModule, AppCodeModule, AppDocModule, RouterModule],
     exports: [AppDocModule],
-    declarations: [FilterModeDoc, ProviderDoc, DynamicDoc, CspDoc, RippleDoc, ZIndexDoc, RuntimeDoc, ApiDoc, RepositoryDoc, TranslationDoc, ThemeDoc]
+    declarations: [FilterModeDoc, ProviderDoc, DynamicDoc, InputVariantDoc, CspDoc, RippleDoc, ZIndexDoc, RuntimeDoc, ApiDoc, RepositoryDoc, TranslationDoc, ThemeDoc]
 })
 export class ConfigurationDocModule {}

apps/showcase/doc/configuration/filtermodedoc.ts

@@ -13,23 +13,12 @@ import { Component } from '@angular/core';
 })
 export class FilterModeDoc {
     code: Code = {
-        typescript: `import { PrimeNG } from 'primeng/config';
-
-@Component({
-    selector: 'app-root',
-    templateUrl: './app.component.html'
-})
-export class AppComponent implements OnInit {
-
-    constructor(private primeng: PrimeNG) {}
-
-    ngOnInit() {
-        primeng.filterMatchModeOptions = {
-            text: [FilterMatchMode.STARTS_WITH, FilterMatchMode.CONTAINS, FilterMatchMode.NOT_CONTAINS, FilterMatchMode.ENDS_WITH, FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS],
-            numeric: [FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.LESS_THAN, FilterMatchMode.LESS_THAN_OR_EQUAL_TO, FilterMatchMode.GREATER_THAN, FilterMatchMode.GREATER_THAN_OR_EQUAL_TO],
-            date: [FilterMatchMode.DATE_IS, FilterMatchMode.DATE_IS_NOT, FilterMatchMode.DATE_BEFORE, FilterMatchMode.DATE_AFTER]
-        };
+        typescript: `providePrimeNG({
+    filterMatchModeOptions: {
+        text: [FilterMatchMode.STARTS_WITH, FilterMatchMode.CONTAINS, FilterMatchMode.NOT_CONTAINS, FilterMatchMode.ENDS_WITH, FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS],
+        numeric: [FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.LESS_THAN, FilterMatchMode.LESS_THAN_OR_EQUAL_TO, FilterMatchMode.GREATER_THAN, FilterMatchMode.GREATER_THAN_OR_EQUAL_TO],
+        date: [FilterMatchMode.DATE_IS, FilterMatchMode.DATE_IS_NOT, FilterMatchMode.DATE_BEFORE, FilterMatchMode.DATE_AFTER]
     }
-}`
+})`
     };
 }

apps/showcase/doc/configuration/inputvariantdoc.ts

@@ -0,0 +1,23 @@
+import { Code } from '@/domain/code';
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'inputvariant-doc',
+    standalone: false,
+    template: `
+        <app-docsectiontext>
+            <p>
+                Input fields come in two styles, default is <i>outlined</i> with borders around the field whereas <i>filled</i> alternative adds a background color to the field. A theme such as Material may add more additional design changes per each
+                variant.
+            </p>
+        </app-docsectiontext>
+        <app-code [code]="code" [hideToggleCode]="true"></app-code>
+    `
+})
+export class InputVariantDoc {
+    code: Code = {
+        typescript: `providePrimeNG({
+    inputVariant: 'filled' 
+})`
+    };
+}

apps/showcase/doc/configuration/zindexdoc.ts

@@ -17,24 +17,13 @@ import { Component } from '@angular/core';
 })
 export class ZIndexDoc {
     code: Code = {
-        typescript: `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.zIndex = {
-            modal: 1100,    // dialog, sidebar
-            overlay: 1000,  // dropdown, overlaypanel
-            menu: 1000,     // overlay menus
-            tooltip: 1100   // tooltip
-        };
+        typescript: `providePrimeNG({
+    zIndex: {
+        modal: 1100,    // dialog, sidebar
+        overlay: 1000,  // dropdown, overlaypanel
+        menu: 1000,     // overlay menus
+        tooltip: 1100   // tooltip
     }
-}`
+})`
     };
 }

apps/showcase/pages/configuration/index.ts

@@ -2,6 +2,7 @@ import { ConfigurationDocModule } from '@/doc/configuration/configurationdoc.mod
 import { CspDoc } from '@/doc/configuration/cspdoc';
 import { DynamicDoc } from '@/doc/configuration/dynamicdoc';
 import { FilterModeDoc } from '@/doc/configuration/filtermodedoc';
+import { InputVariantDoc } from '@/doc/configuration/inputvariantdoc';
 import { ApiDoc } from '@/doc/configuration/locale/apidoc';
 import { RepositoryDoc } from '@/doc/configuration/locale/repositorydoc';
 import { RuntimeDoc } from '@/doc/configuration/locale/runtimedoc';
@@ -41,6 +42,11 @@ export class ConfigurationDemo {
             label: 'Ripple',
             component: RippleDoc
         },
+        {
+            id: 'inputvariant',
+            label: 'InputVariant',
+            component: InputVariantDoc
+        },
         {
             id: 'zIndex',
             label: 'ZIndex',

packages/primeng/src/config/primeng.ts

@@ -20,6 +20,8 @@ export type PrimeNGConfigType = {
     };
     overlayOptions?: OverlayOptions;
     translation?: Translation;
+    zIndex?: ZIndex;
+    filterMatchModeOptions?: any;
 } & ThemeConfigType;
 
 @Injectable({ providedIn: 'root' })