diff --git a/src/app/showcase/doc/avatar/icondoc.ts b/src/app/showcase/doc/avatar/icondoc.ts index de47a7d531d..2f3d9b365b4 100644 --- a/src/app/showcase/doc/avatar/icondoc.ts +++ b/src/app/showcase/doc/avatar/icondoc.ts @@ -22,7 +22,7 @@ import { Code } from '@domain/code';
Badge
- +
@@ -64,7 +64,8 @@ export class IconDoc { icon="pi pi-user" pBadge value="4" - size="xlarge" />`, + size="xlarge" + badgeSize="large" />`, html: `
Icon
+ size="xlarge" + badgeSize="large" />
`, typescript: `import { Component } from '@angular/core'; import { AvatarModule } from 'primeng/avatar'; diff --git a/src/app/showcase/doc/avatar/imagedoc.ts b/src/app/showcase/doc/avatar/imagedoc.ts index 39132d1c948..cdf526c26de 100644 --- a/src/app/showcase/doc/avatar/imagedoc.ts +++ b/src/app/showcase/doc/avatar/imagedoc.ts @@ -16,7 +16,7 @@ import { Code } from '@domain/code';
Badge
- +
Gravatar
@@ -48,7 +48,8 @@ export class ImageDoc { pBadge value="4" image="https://primefaces.org/cdn/primeng/images/demo/avatar/walter.jpg" - size="xlarge" /> + size="xlarge" + badgeSize="large" /> + size="xlarge" + badgeSize="large" />
Gravatar
diff --git a/src/app/showcase/doc/avatar/labeldoc.ts b/src/app/showcase/doc/avatar/labeldoc.ts index 8c3923be246..ae9e0864690 100644 --- a/src/app/showcase/doc/avatar/labeldoc.ts +++ b/src/app/showcase/doc/avatar/labeldoc.ts @@ -66,7 +66,8 @@ export class LabelDoc { pBadge styleClass="mr-2" value="4" - size="xlarge" />`, + size="xlarge" + badgeSize="large" />`, html: `
Label
diff --git a/src/app/showcase/doc/button/badgedoc.ts b/src/app/showcase/doc/button/badgedoc.ts index 4cef3224f3e..b9cabeca489 100644 --- a/src/app/showcase/doc/button/badgedoc.ts +++ b/src/app/showcase/doc/button/badgedoc.ts @@ -8,8 +8,8 @@ import { Code } from '@domain/code';

Buttons have built-in badge support with badge and badgeClass properties.

- - + +
` @@ -20,17 +20,17 @@ export class BadgeDoc { `, html: `
- +
`, diff --git a/src/app/showcase/doc/fileupload/templatedoc.ts b/src/app/showcase/doc/fileupload/templatedoc.ts index 97e918e1670..b9ee610d24d 100644 --- a/src/app/showcase/doc/fileupload/templatedoc.ts +++ b/src/app/showcase/doc/fileupload/templatedoc.ts @@ -1,4 +1,4 @@ -import { Component, inject } from '@angular/core'; +import { Component } from '@angular/core'; import { Code } from '@domain/code'; import { PrimeNGConfig } from 'primeng/api'; @@ -67,7 +67,7 @@ import { PrimeNGConfig } from 'primeng/api'; ` }) export class TemplateDoc { - config = inject(PrimeNGConfig); + constructor(private config: PrimeNGConfig) {} choose(event, callback) { callback(); @@ -97,38 +97,149 @@ export class TemplateDoc { code: Code = { basic: ` - -
Upload 3 Files
- - -
Custom UI to display a file
- - -
Additional content.
- + +
+
+ + + +
+ + {{ totalSize }}B / 1Mb + +
+ + +
+
Pending
+
+
+
+ +
+ {{ file.name }} +
{{ formatSize(file.size) }}
+ +
+
+
+
+
Completed
+
+
+
+ +
+ {{ file.name }} +
{{ formatSize(file.size) }}
+ + +
+
+
+ + +
+ +

Drag and drop files to here to upload.

+
+ `, - html: ` -
+ html: `
- -
Upload 3 Files
+ +
+
+ + + +
+ + {{ totalSize }}B / 1Mb + +
- -
Custom UI to display a file
+ +
+
Pending
+
+
+
+ +
+ {{ file.name }} +
{{ formatSize(file.size) }}
+ +
+
+
+
+
Completed
+
+
+
+ +
+ {{ file.name }} +
{{ formatSize(file.size) }}
+ + +
+
+
- -
Additional content.
+ +
+ +

Drag and drop files to here to upload.

+
`, - typescript: ` -import { Component, Input } from '@angular/core'; - + typescript: `import { Component } from '@angular/core'; +import { PrimeNGConfig} from 'primeng/api'; +import { FileUploadModule } from 'primeng/fileupload'; +import { ButtonModule } from 'primeng/button'; +import { CommonModule } from '@angular/common'; +import { BadgeModule } from 'primeng/badge'; +import { HttpClientModule } from '@angular/common/http'; +import { ProgressBarModule } from 'primeng/progressbar'; + @Component({ selector: 'file-upload-template-demo', templateUrl: './file-upload-template-demo.html', + standalone: true, + imports: [FileUploadModule, ButtonModule, BadgeModule, ProgressBarModule, HttpClientModule, CommonModule] }) -export class FileUploadTemplateDemo {}` +export class FileUploadTemplateDemo { + constructor(private config: PrimeNGConfig) {} + + choose(event, callback) { + callback(); + } + + onRemoveTemplatingFile(event, file, removeFileCallback, index) { + removeFileCallback(event, index); + } + + uploadEvent(callback) { + callback(); + } + + formatSize(bytes) { + const k = 1024; + const dm = 3; + const sizes = this.config.translation.fileSizeTypes; + if (bytes === 0) { + return \`0 \${sizes[0]}\`; + } + + const i = Math.floor(Math.log(bytes) / Math.log(k)); + const formattedSize = parseFloat((bytes / Math.pow(k, i)).toFixed(dm)); + + return \`\${formattedSize} \${sizes[i]}\`; + } +}` }; } diff --git a/src/app/showcase/doc/splitbutton/templatedoc.ts b/src/app/showcase/doc/splitbutton/templatedoc.ts index d33f6ecee92..53337fc1a66 100644 --- a/src/app/showcase/doc/splitbutton/templatedoc.ts +++ b/src/app/showcase/doc/splitbutton/templatedoc.ts @@ -10,7 +10,7 @@ import { Code } from '@domain/code';
- + logo @@ -24,6 +24,8 @@ import { Code } from '@domain/code'; providers: [MessageService] }) export class TemplateDoc { + items: MenuItem[]; + constructor(private messageService: MessageService) { this.items = [ { @@ -44,8 +46,6 @@ export class TemplateDoc { ]; } - items: MenuItem[]; - save(severity: string) { this.messageService.add({ severity: severity, summary: 'Success', detail: 'Data Saved' }); } @@ -62,14 +62,36 @@ export class TemplateDoc { basic: ``, + severity="contrast" + [model]="items"> + + + logo + PrimeNG + + +`, html: `
+ severity="contrast" + [model]="items"> + + + logo + PrimeNG + + +
`, typescript: `import { Component } from '@angular/core'; @@ -86,7 +108,7 @@ import { ToastModule } from 'primeng/toast'; }) export class SplitButtonTemplateDemo { items: MenuItem[]; - + constructor(private messageService: MessageService) { this.items = [ {