From c5561cf3b006b245cbe51486e4fd59e3064611a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Thu, 9 May 2024 15:32:25 +0300 Subject: [PATCH 01/11] updated splitbutton templatedoc example --- .../showcase/doc/splitbutton/templatedoc.ts | 34 +++++++++++++++---- 1 file changed, 28 insertions(+), 6 deletions(-) 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 = [ { From c9351b47187bc2cbce1fb8a1aa094b272755ee48 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Thu, 9 May 2024 15:34:53 +0300 Subject: [PATCH 02/11] updated button badgedoc example --- src/app/showcase/doc/button/badgedoc.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) 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: `
- +
`, From fbde11ba69da9e5c0d04f3407a77e3a8c56ed857 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Thu, 9 May 2024 16:19:37 +0300 Subject: [PATCH 03/11] Fixes #15435 - FileUpload | Templating enhancements --- .../fileupload/fileupload.interface.ts | 74 ++++++++++++++++++- src/app/components/fileupload/fileupload.ts | 48 ++++++++++-- .../showcase/doc/fileupload/templatedoc.ts | 46 +++++++++--- 3 files changed, 152 insertions(+), 16 deletions(-) diff --git a/src/app/components/fileupload/fileupload.interface.ts b/src/app/components/fileupload/fileupload.interface.ts index ee803b6b84c..aaa175fdceb 100644 --- a/src/app/components/fileupload/fileupload.interface.ts +++ b/src/app/components/fileupload/fileupload.interface.ts @@ -12,6 +12,20 @@ export interface UploadEvent { */ originalEvent: HttpEvent; } +/** + * Remove uploaded file event. + * @group Events + */ +export interface RemoveUploadedFileEvent { + /** + * Removed file. + */ + file: any; + /** + * Uploaded files. + */ + files: any[]; +} /** * Form data event. * @group Events @@ -128,6 +142,31 @@ export interface FileUploadTemplates { * Custom template of file. */ file(): TemplateRef; + /** + * Custom template of file. + */ + header(context: { + /** + * File list. + */ + $implicit: any; + /** + * Uploaded files list. + */ + uploadedFiles: any; + /** + * Callback to invoke on choose button click. + */ + chooseCallback: VoidFunction; + /** + * Callback to invoke on clear button click. + */ + clearCallback: VoidFunction; + /** + * Callback to invoke on upload. + */ + uploadCallback: VoidFunction; + }): TemplateRef; /** * Custom template of content. */ @@ -136,7 +175,40 @@ export interface FileUploadTemplates { * File list. */ $implicit: any; - }): TemplateRef<{ $implicit: any }>; + /** + * Uploaded files list. + */ + uploadedFiles: any; + /** + * Upload progress. + */ + progress: any; + /** + * Status messages about upload process. + */ + messages: any; + /** + * Callback to invoke on choose button click. + */ + chooseCallback: VoidFunction; + /** + * Callback to invoke on clear button click. + */ + removeFileCallback: VoidFunction; + /** + * Callback to invoke on clear button click. + */ + clearCallback: VoidFunction; + /** + * Callback to invoke on upload. + */ + uploadCallback: VoidFunction; + /** + * Callback to invoke on remove uploaded file, accepts index as a parameter. + * @param index Index of the file to remove. + */ + removeUploadedFileCallback: VoidFunction; + }): TemplateRef; /** * Custom template of toolbar. */ diff --git a/src/app/components/fileupload/fileupload.ts b/src/app/components/fileupload/fileupload.ts index 22e5d03f4e9..e192cb0b591 100755 --- a/src/app/components/fileupload/fileupload.ts +++ b/src/app/components/fileupload/fileupload.ts @@ -23,7 +23,8 @@ import { ViewChild, ViewEncapsulation, booleanAttribute, - numberAttribute + numberAttribute, + signal } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; import { BlockableUI, Message, PrimeNGConfig, PrimeTemplate, SharedModule, TranslationKeys } from 'primeng/api'; @@ -37,7 +38,7 @@ import { ProgressBarModule } from 'primeng/progressbar'; import { RippleModule } from 'primeng/ripple'; import { VoidListener } from 'primeng/ts-helpers'; import { Subscription } from 'rxjs'; -import { FileBeforeUploadEvent, FileProgressEvent, FileRemoveEvent, FileSelectEvent, FileSendEvent, FileUploadErrorEvent, FileUploadEvent, FileUploadHandlerEvent } from './fileupload.interface'; +import { FileBeforeUploadEvent, FileProgressEvent, FileRemoveEvent, FileSelectEvent, FileSendEvent, FileUploadErrorEvent, FileUploadEvent, FileUploadHandlerEvent, RemoveUploadedFileEvent } from './fileupload.interface'; /** * FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations. * @group Components @@ -46,6 +47,18 @@ import { FileBeforeUploadEvent, FileProgressEvent, FileRemoveEvent, FileSelectEv selector: 'p-fileUpload', template: `
+
- +
@@ -126,7 +139,7 @@ import { FileBeforeUploadEvent, FileProgressEvent, FileRemoveEvent, FileSelectEv
- +
@@ -417,6 +430,12 @@ export class FileUpload implements AfterViewInit, AfterContentInit, OnInit, OnDe * @group Emits */ @Output() onImageError: EventEmitter = new EventEmitter(); + /** + * This event is triggered if an error occurs while loading an image file. + * @param {RemoveUploadedFileEvent} event - Remove event. + * @group Emits + */ + @Output() onRemoveUploadedFile: EventEmitter = new EventEmitter(); @ContentChildren(PrimeTemplate) templates: QueryList | undefined; @@ -490,6 +509,8 @@ export class FileUpload implements AfterViewInit, AfterContentInit, OnInit, OnDe dragOverListener: VoidListener; + public uploadedFiles = []; + constructor( @Inject(DOCUMENT) private document: Document, @Inject(PLATFORM_ID) private platformId: any, @@ -741,7 +762,7 @@ export class FileUpload implements AfterViewInit, AfterContentInit, OnInit, OnDe } else { this.onError.emit({ files: this.files }); } - + this.uploadedFiles.push(...this.files); this.clear(); break; case HttpEventType.UploadProgress: { @@ -774,13 +795,28 @@ export class FileUpload implements AfterViewInit, AfterContentInit, OnInit, OnDe this.clearInputElement(); this.cd.markForCheck(); } - + /** + * Removes a single file. + * @param {Event} event - Browser event. + * @param {Number} index - Index of the file. + * @group Method + */ remove(event: Event, index: number) { this.clearInputElement(); this.onRemove.emit({ originalEvent: event, file: this.files[index] }); this.files.splice(index, 1); this.checkFileLimit(this.files); } + /** + * Removes uploaded file. + * @param {Number} index - Index of the file to be removed. + * @group Method + */ + removeUploadedFile(index) { + let removedFile = this.uploadedFiles.splice(index, 1)[0]; + this.uploadedFiles = [...this.uploadedFiles]; + this.onRemoveUploadedFile.emit({ file: removedFile, files: this.uploadedFiles }); + } isFileLimitExceeded() { const isAutoMode = this.auto; diff --git a/src/app/showcase/doc/fileupload/templatedoc.ts b/src/app/showcase/doc/fileupload/templatedoc.ts index 45d9aa7f12c..97e918e1670 100644 --- a/src/app/showcase/doc/fileupload/templatedoc.ts +++ b/src/app/showcase/doc/fileupload/templatedoc.ts @@ -1,5 +1,6 @@ -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { Code } from '@domain/code'; +import { PrimeNGConfig } from 'primeng/api'; @Component({ selector: 'file-upload-template-demo', @@ -13,20 +14,20 @@ import { Code } from '@domain/code'; >
- +
- - - + + +
{{ totalSize }}B / 1Mb
- -
+ +
Pending
@@ -36,7 +37,6 @@ import { Code } from '@domain/code'; {{ file.name }}
{{ formatSize(file.size) }}
-
@@ -50,7 +50,7 @@ import { Code } from '@domain/code'; {{ file.name }}
{{ formatSize(file.size) }}
- +
@@ -67,6 +67,34 @@ import { Code } from '@domain/code'; ` }) export class TemplateDoc { + config = inject(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]}`; + } + code: Code = { basic: ` From 7e8cd6a623f1e38af746edd2c66f3975bf3524b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Thu, 9 May 2024 16:21:07 +0300 Subject: [PATCH 04/11] Add template doc --- src/app/showcase/pages/fileupload/fileuploaddemo.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/app/showcase/pages/fileupload/fileuploaddemo.ts b/src/app/showcase/pages/fileupload/fileuploaddemo.ts index db69b0192de..63efc1a03be 100755 --- a/src/app/showcase/pages/fileupload/fileuploaddemo.ts +++ b/src/app/showcase/pages/fileupload/fileuploaddemo.ts @@ -27,11 +27,11 @@ export class FileUploadDemo { label: 'Auto', component: AutoDoc }, - // { - // id: 'template', - // label: 'Template', - // component: TemplateDoc - // }, + { + id: 'template', + label: 'Template', + component: TemplateDoc + }, { id: 'advanced', label: 'Advanced', From 89b023ec227c0184492a2e95965e4c0d891cbb36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Thu, 9 May 2024 16:21:29 +0300 Subject: [PATCH 05/11] Update apidoc --- src/app/showcase/doc/apidoc/index.json | 82 +++++++++++++++++++++++--- 1 file changed, 75 insertions(+), 7 deletions(-) diff --git a/src/app/showcase/doc/apidoc/index.json b/src/app/showcase/doc/apidoc/index.json index ed1a477fdfd..4c1b4563b4e 100644 --- a/src/app/showcase/doc/apidoc/index.json +++ b/src/app/showcase/doc/apidoc/index.json @@ -1272,7 +1272,7 @@ "name": "severity", "optional": false, "readonly": false, - "type": "string", + "type": "\"success\" | \"info\" | \"warning\" | \"primary\" | \"help\" | \"danger\" | \"secondary\" | \"contrast\"", "description": "Severity level of the message." }, { @@ -4554,7 +4554,7 @@ "name": "severity", "optional": false, "readonly": false, - "type": "\"success\" | \"info\" | \"warning\" | \"danger\"", + "type": "\"success\" | \"info\" | \"warning\" | \"primary\" | \"help\" | \"danger\" | \"secondary\" | \"contrast\"", "description": "Severity type of the badge." }, { @@ -4965,7 +4965,7 @@ "name": "severity", "optional": false, "readonly": false, - "type": "string", + "type": "\"success\" | \"info\" | \"warning\" | \"primary\" | \"help\" | \"danger\" | \"secondary\" | \"contrast\"", "description": "Defines the style of the button." }, { @@ -11803,6 +11803,16 @@ } ], "description": "This event is triggered if an error occurs while loading an image file." + }, + { + "name": "onRemoveUploadedFile", + "parameters": [ + { + "name": "event", + "type": "RemoveUploadedFileEvent" + } + ], + "description": "This event is triggered if an error occurs while loading an image file." } ] }, @@ -11818,6 +11828,33 @@ "name": "clear", "parameters": [], "description": "Clears the files list." + }, + { + "name": "remove", + "parameters": [ + { + "name": "event", + "type": "Event", + "description": "Browser event." + }, + { + "name": "index", + "type": "number", + "description": "Index of the file." + } + ], + "description": "Removes a single file." + }, + { + "name": "removeUploadedFile", + "parameters": [ + { + "name": "index", + "type": "any", + "description": "Index of the file to be removed." + } + ], + "description": "Removes uploaded file." } ] } @@ -11841,6 +11878,26 @@ } ] }, + { + "name": "RemoveUploadedFileEvent", + "description": "Remove uploaded file event.", + "props": [ + { + "name": "file", + "optional": false, + "readonly": false, + "type": "any", + "description": "Removed file." + }, + { + "name": "files", + "optional": false, + "readonly": false, + "type": "any[]", + "description": "Uploaded files." + } + ] + }, { "name": "FormDataEvent", "description": "Form data event.", @@ -12018,13 +12075,24 @@ "parameters": [], "description": "Custom template of file." }, + { + "parent": "fileupload", + "name": "header", + "parameters": [ + { + "name": "context", + "type": "{\n \t $implicit: any, // File list.\n \t uploadedFiles: any, // Uploaded files list.\n \t chooseCallback: VoidFunction, // Callback to invoke on choose button click.\n \t clearCallback: VoidFunction, // Callback to invoke on clear button click.\n \t uploadCallback: VoidFunction, // Callback to invoke on upload.\n }" + } + ], + "description": "Custom template of file." + }, { "parent": "fileupload", "name": "content", "parameters": [ { "name": "context", - "type": "{\n \t $implicit: any, // File list.\n }" + "type": "{\n \t $implicit: any, // File list.\n \t uploadedFiles: any, // Uploaded files list.\n \t progress: any, // Upload progress.\n \t messages: any, // Status messages about upload process.\n \t chooseCallback: VoidFunction, // Callback to invoke on choose button click.\n \t removeFileCallback: VoidFunction, // Callback to invoke on clear button click.\n \t clearCallback: VoidFunction, // Callback to invoke on clear button click.\n \t uploadCallback: VoidFunction, // Callback to invoke on upload.\n \t removeUploadedFileCallback: VoidFunction, // Callback to invoke on remove uploaded file, accepts index as a parameter.\n }" } ], "description": "Custom template of content." @@ -21274,8 +21342,8 @@ "name": "size", "optional": false, "readonly": false, - "type": "string", - "description": "Size of the Circle or Square." + "type": "\"square\" | \"circle\"", + "description": "Size of the skeleton." }, { "name": "width", @@ -25321,7 +25389,7 @@ "name": "severity", "optional": false, "readonly": false, - "type": "string", + "type": "\"success\" | \"info\" | \"warning\" | \"danger\" | \"secondary\" | \"contrast\"", "description": "Severity type of the tag." }, { From 1140db0ca50159bef0a727ca84d856fcbbf89f3b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Thu, 9 May 2024 16:21:54 +0300 Subject: [PATCH 06/11] Code format --- src/app/components/dropdown/dropdown.ts | 2 +- src/app/components/inputnumber/inputnumber.ts | 11 ++--------- src/app/components/inputotp/inputotp.ts | 2 +- src/app/components/table/table.ts | 8 ++++---- src/app/components/tooltip/tooltip.ts | 2 +- src/app/showcase/doc/button/linkdoc.ts | 2 +- src/app/showcase/doc/splitbutton/sizesdoc.ts | 2 +- 7 files changed, 11 insertions(+), 18 deletions(-) diff --git a/src/app/components/dropdown/dropdown.ts b/src/app/components/dropdown/dropdown.ts index 4469925f92d..3594b81f369 100755 --- a/src/app/components/dropdown/dropdown.ts +++ b/src/app/components/dropdown/dropdown.ts @@ -1222,7 +1222,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV updatePlaceHolderForFloatingLabel(): void { const parentElement = this.el.nativeElement.parentElement; const isInFloatingLabel = parentElement.classList.contains('p-float-label'); - if(parentElement && isInFloatingLabel && !this.selectedOption) { + if (parentElement && isInFloatingLabel && !this.selectedOption) { const label = parentElement.querySelector('label'); if (label) { this._placeholder.set(label.textContent); diff --git a/src/app/components/inputnumber/inputnumber.ts b/src/app/components/inputnumber/inputnumber.ts index 1638050e45b..6fe94ec2102 100644 --- a/src/app/components/inputnumber/inputnumber.ts +++ b/src/app/components/inputnumber/inputnumber.ts @@ -622,14 +622,11 @@ export class InputNumber implements OnInit, AfterContentInit, OnChanges, Control } getPrefixExpression(): RegExp { - if (this.prefix) { this.prefixChar = this.prefix; - } else { const formatter = new Intl.NumberFormat(this.locale, { style: this.mode, currency: this.currency, currencyDisplay: this.currencyDisplay }); this.prefixChar = formatter.format(1).split('1')[0]; - } return new RegExp(`${this.escapeRegExp(this.prefixChar || '')}`, 'g'); @@ -881,11 +878,8 @@ export class InputNumber implements OnInit, AfterContentInit, OnChanges, Control case 'Backspace': { event.preventDefault(); - if (selectionStart === selectionEnd) { - - if((selectionStart == 1 && this.prefix)|| (selectionStart == inputValue.length && this.suffix)){ - + if ((selectionStart == 1 && this.prefix) || (selectionStart == inputValue.length && this.suffix)) { break; } @@ -932,8 +926,7 @@ export class InputNumber implements OnInit, AfterContentInit, OnChanges, Control event.preventDefault(); if (selectionStart === selectionEnd) { - - if((selectionStart == 0 && this.prefix)|| (selectionStart == inputValue.length-1 && this.suffix)){ + if ((selectionStart == 0 && this.prefix) || (selectionStart == inputValue.length - 1 && this.suffix)) { break; } const deleteChar = inputValue.charAt(selectionStart); diff --git a/src/app/components/inputotp/inputotp.ts b/src/app/components/inputotp/inputotp.ts index 9d2f05b6e37..b2061e3f174 100644 --- a/src/app/components/inputotp/inputotp.ts +++ b/src/app/components/inputotp/inputotp.ts @@ -283,7 +283,7 @@ export class InputOtp implements AfterContentInit { if (event.altKey || event.ctrlKey || event.metaKey) { return; } - + switch (event.code) { case 'ArrowLeft': this.moveToPrev(event); diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts index 79d4913f07d..7db130cad16 100644 --- a/src/app/components/table/table.ts +++ b/src/app/components/table/table.ts @@ -5269,13 +5269,13 @@ export class ColumnFilter implements AfterContentInit { * @param {AnimationEvent} originalEvent - animation event. * @group Emits */ - @Output() onShow: EventEmitter<{originalEvent: AnimationEvent}> = new EventEmitter<{originalEvent: AnimationEvent}>(); + @Output() onShow: EventEmitter<{ originalEvent: AnimationEvent }> = new EventEmitter<{ originalEvent: AnimationEvent }>(); /** * Callback to invoke on overlay is hidden. * @param {AnimationEvent} originalEvent - animation event. * @group Emits */ - @Output() onHide: EventEmitter<{originalEvent: AnimationEvent}> = new EventEmitter<{originalEvent: AnimationEvent}>(); + @Output() onHide: EventEmitter<{ originalEvent: AnimationEvent }> = new EventEmitter<{ originalEvent: AnimationEvent }>(); @ViewChild('icon') icon: Nullable; @@ -5611,7 +5611,7 @@ export class ColumnFilter implements AfterContentInit { }; this.overlaySubscription = this.overlayService.clickObservable.subscribe(this.overlayEventListener); - this.onShow.emit({originalEvent: event}) + this.onShow.emit({ originalEvent: event }); break; case 'void': @@ -5631,7 +5631,7 @@ export class ColumnFilter implements AfterContentInit { break; case 'void': ZIndexUtils.clear(event.element); - this.onHide.emit({originalEvent: event}) + this.onHide.emit({ originalEvent: event }); break; } } diff --git a/src/app/components/tooltip/tooltip.ts b/src/app/components/tooltip/tooltip.ts index b135cd2171c..0e03d2aad3a 100755 --- a/src/app/components/tooltip/tooltip.ts +++ b/src/app/components/tooltip/tooltip.ts @@ -428,7 +428,7 @@ export class Tooltip implements AfterViewInit, OnDestroy { setTimeout(() => { this.align(); }, 100); - + DomHandler.fadeIn(this.container, 250); if (this.getOption('tooltipZIndex') === 'auto') ZIndexUtils.set('tooltip', this.container, this.config.zIndex.tooltip); diff --git a/src/app/showcase/doc/button/linkdoc.ts b/src/app/showcase/doc/button/linkdoc.ts index 0628329baa6..e830dbcddd6 100644 --- a/src/app/showcase/doc/button/linkdoc.ts +++ b/src/app/showcase/doc/button/linkdoc.ts @@ -10,7 +10,7 @@ import { Code } from '@domain/code';
External - Router + Router
` diff --git a/src/app/showcase/doc/splitbutton/sizesdoc.ts b/src/app/showcase/doc/splitbutton/sizesdoc.ts index d001332beed..1e21022b62a 100644 --- a/src/app/showcase/doc/splitbutton/sizesdoc.ts +++ b/src/app/showcase/doc/splitbutton/sizesdoc.ts @@ -68,7 +68,7 @@ export class SizesDoc { [model]="items" (onClick)="save('info')" size="lg" />`, - + html: `
Date: Thu, 9 May 2024 16:41:17 +0300 Subject: [PATCH 07/11] Refactor on condition & fix typo --- src/app/components/badge/badge.ts | 16 +++++++++++++--- src/app/showcase/doc/avatar/labeldoc.ts | 2 +- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/src/app/components/badge/badge.ts b/src/app/components/badge/badge.ts index 571daebfa07..473a6b0a284 100755 --- a/src/app/components/badge/badge.ts +++ b/src/app/components/badge/badge.ts @@ -124,13 +124,23 @@ export class BadgeDirective implements OnChanges, AfterViewInit { return; } - if (this.badgeSize || this.size) { - if (this.badgeSize === 'large' || this.size === 'large') { + if (this.badgeSize) { + if (this.badgeSize === 'large') { DomHandler.addClass(badge, 'p-badge-lg'); DomHandler.removeClass(badge, 'p-badge-xl'); } - if (this.badgeSize === 'xlarge' || this.size === 'xlarge') { + if (this.badgeSize === 'xlarge') { + DomHandler.addClass(badge, 'p-badge-xl'); + DomHandler.removeClass(badge, 'p-badge-lg'); + } + } else if (this.size && !this.badgeSize) { + if (this.size === 'large') { + DomHandler.addClass(badge, 'p-badge-lg'); + DomHandler.removeClass(badge, 'p-badge-xl'); + } + + if (this.size === 'xlarge') { DomHandler.addClass(badge, 'p-badge-xl'); DomHandler.removeClass(badge, 'p-badge-lg'); } diff --git a/src/app/showcase/doc/avatar/labeldoc.ts b/src/app/showcase/doc/avatar/labeldoc.ts index 2c7e153f739..91a15403f88 100644 --- a/src/app/showcase/doc/avatar/labeldoc.ts +++ b/src/app/showcase/doc/avatar/labeldoc.ts @@ -22,7 +22,7 @@ import { Code } from '@domain/code';
Badge
- +
From 7935abf0521a09b767d4131ee04783141325effb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Thu, 9 May 2024 16:41:55 +0300 Subject: [PATCH 08/11] Fix typo --- src/app/showcase/doc/avatar/labeldoc.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/showcase/doc/avatar/labeldoc.ts b/src/app/showcase/doc/avatar/labeldoc.ts index 91a15403f88..8c3923be246 100644 --- a/src/app/showcase/doc/avatar/labeldoc.ts +++ b/src/app/showcase/doc/avatar/labeldoc.ts @@ -110,7 +110,8 @@ export class LabelDoc { pBadge styleClass="mr-2" value="4" - size="xlarge" /> + size="xlarge" + badgeSize="large" /> `, typescript: `import { Component } from '@angular/core'; From bdee41adefbabddfcfa40a57eeb6067cb171b16d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Thu, 9 May 2024 16:48:24 +0300 Subject: [PATCH 09/11] refactor avatar labeldoc --- src/app/showcase/doc/avatar/labeldoc.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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
From 0c2886f3ffc540bd093ee448d00b2fb0681de48f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Thu, 9 May 2024 16:54:37 +0300 Subject: [PATCH 10/11] updated avatar icon && image doc examples --- src/app/showcase/doc/avatar/icondoc.ts | 8 +++++--- src/app/showcase/doc/avatar/imagedoc.ts | 8 +++++--- 2 files changed, 10 insertions(+), 6 deletions(-) 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
From 9ed7602e307db403bd32164f8e480bae870a53f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Thu, 9 May 2024 18:14:21 +0300 Subject: [PATCH 11/11] update fileupload templatedoc --- .../showcase/doc/fileupload/templatedoc.ts | 157 +++++++++++++++--- 1 file changed, 134 insertions(+), 23 deletions(-) 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]}\`; + } +}` }; }