Simplified installation part

primefaces · Dec 7, 2024 · 8502184 · 8502184
1 parent dfeae96
commit 8502184
Show file tree

Hide file tree

Showing 6 changed files with 663 additions and 662 deletions.
diff --git a/apps/showcase/doc/installation/installationdoc.module.ts b/apps/showcase/doc/installation/installationdoc.module.ts
@@ -9,13 +9,12 @@ import { DownloadDoc } from './downloaddoc';
 import { ExamplesDoc } from './examplesdoc';
 import { NextStepsDoc } from './nextstepsdoc';
 import { ProviderDoc } from './providerdoc';
-import { ThemeDoc } from './themedoc';
 import { VerifyDoc } from './verifydoc';
 import { VideosDoc } from './videos/videosdoc';
 
 @NgModule({
     imports: [CommonModule, RouterModule, AppCodeModule, FormsModule, AppDocModule, ButtonModule],
-    declarations: [DownloadDoc, ThemeDoc, ProviderDoc, VerifyDoc, NextStepsDoc, ExamplesDoc, VideosDoc],
+    declarations: [DownloadDoc, ProviderDoc, VerifyDoc, NextStepsDoc, ExamplesDoc, VideosDoc],
     exports: [AppDocModule]
 })
 export class InstallationDocModule {}
diff --git a/apps/showcase/doc/installation/providerdoc.ts b/apps/showcase/doc/installation/providerdoc.ts
@@ -5,7 +5,7 @@ import { Component } from '@angular/core';
     selector: 'provider-doc',
     template: `
         <app-docsectiontext>
-            <p>Add <i>providePrimeNG</i> and <i>provideAnimationsAsync</i> to the list of providers in your <i>app.config.ts</i>.</p>
+            <p>Add <i>providePrimeNG</i> and <i>provideAnimationsAsync</i> to the list of providers in your <i>app.config.ts</i> and use the <i>theme</i> property to configure a theme such as Aura.</p>
             <app-code [code]="code" [hideToggleCode]="true"></app-code>
         </app-docsectiontext>
     `
@@ -15,11 +15,16 @@ export class ProviderDoc {
         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({ /* options */ })
+        providePrimeNG({ 
+            theme: {
+                preset: Aura
+            }
+        })
     ]
 };`
     };

diff --git a/apps/showcase/doc/installation/themedoc.ts b/apps/showcase/doc/installation/themedoc.ts
diff --git a/apps/showcase/doc/installation/verifydoc.ts b/apps/showcase/doc/installation/verifydoc.ts
@@ -13,12 +13,16 @@ import { Component } from '@angular/core';
         <div class="card flex justify-center">
             <p-button label="Check"></p-button>
         </div>
-        <app-code [code]="code" [hideStackBlitz]="true" [hideCodeSandbox]="true"></app-code>
+        <app-code [code]="code1" [hideStackBlitz]="true" [hideCodeSandbox]="true" [hideToggleCode]="true" class="block mb-4"></app-code>
+        <app-code [code]="code2" [hideStackBlitz]="true" [hideCodeSandbox]="true" [hideToggleCode]="true"></app-code>
     `
 })
 export class VerifyDoc {
-    code: Code = {
-        typescript: `import { ButtonModule } from 'primeng/button';`,
+    code1: Code = {
+        typescript: `import { ButtonModule } from 'primeng/button';`
+    };
+
+    code2: Code = {
         html: `<div class="card flex justify-center">
     <p-button label="Check"></p-button>
 </div>`

diff --git a/apps/showcase/pages/installation/index.ts b/apps/showcase/pages/installation/index.ts
@@ -3,7 +3,6 @@ import { ExamplesDoc } from '@/doc/installation/examplesdoc';
 import { InstallationDocModule } from '@/doc/installation/installationdoc.module';
 import { NextStepsDoc } from '@/doc/installation/nextstepsdoc';
 import { ProviderDoc } from '@/doc/installation/providerdoc';
-import { ThemeDoc } from '@/doc/installation/themedoc';
 import { VerifyDoc } from '@/doc/installation/verifydoc';
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
@@ -25,11 +24,6 @@ export class InstallationDemo {
             label: 'Provider',
             component: ProviderDoc
         },
-        {
-            id: 'theme',
-            label: 'Theme',
-            component: ThemeDoc
-        },
         {
             id: 'verify',
             label: 'Verify',