diff --git a/apps/doc/src/app/components/file-upload/examples/file-upload-custom-actions/file-upload-custom-actions.component.html b/apps/doc/src/app/components/file-upload/examples/file-upload-custom-actions/file-upload-custom-actions.component.html new file mode 100644 index 0000000000..c57e2908e6 --- /dev/null +++ b/apps/doc/src/app/components/file-upload/examples/file-upload-custom-actions/file-upload-custom-actions.component.html @@ -0,0 +1,8 @@ + diff --git a/apps/doc/src/app/components/file-upload/examples/file-upload-custom-actions/file-upload-custom-actions.component.less b/apps/doc/src/app/components/file-upload/examples/file-upload-custom-actions/file-upload-custom-actions.component.less new file mode 100644 index 0000000000..e69de29bb2 diff --git a/apps/doc/src/app/components/file-upload/examples/file-upload-custom-actions/file-upload-custom-actions.component.ts b/apps/doc/src/app/components/file-upload/examples/file-upload-custom-actions/file-upload-custom-actions.component.ts new file mode 100644 index 0000000000..0b38a6079c --- /dev/null +++ b/apps/doc/src/app/components/file-upload/examples/file-upload-custom-actions/file-upload-custom-actions.component.ts @@ -0,0 +1,49 @@ +import { ChangeDetectionStrategy, Component, signal } from '@angular/core'; +import { PrizmFilesProgress } from '@prizm-ui/components'; +import { PrizmIconsEnum } from '@prizm-ui/icons/full'; +import { getMultiMockFiles } from '../../files.utils'; +import { PrizmIconsFullRegistry } from '@prizm-ui/icons/core'; +import { prizmIconsPlay, prizmIconsReplay, prizmIconsPause } from '@prizm-ui/icons/full/source'; + +@Component({ + selector: 'prizm-file-upload-custom-actions', + templateUrl: './file-upload-custom-actions.component.html', + styleUrl: './file-upload-custom-actions.component.less', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class PrizmFileUploadCustomActionsComponent { + actions = signal({}); + files = signal([]); + + constructor(private iconsFullRegistry: PrizmIconsFullRegistry) { + this.iconsFullRegistry.registerIcons(prizmIconsPlay, prizmIconsReplay, prizmIconsPause); + getMultiMockFiles().then(files => { + this.files.set(files); + }); + } + + public onActionEvent(event): void { + console.log(event); + } + + public addedActions(): void { + this.actions.set({ + '1.jpeg': { + actions: [ + { event: 'event1.1', icon: PrizmIconsEnum.PLAY }, + { event: 'event1.2', icon: PrizmIconsEnum.PAUSE }, + { event: 'event1.3', icon: PrizmIconsEnum.REPLAY }, + ], + }, + '2.jpeg': { + actions: [{ event: 'event2', icon: PrizmIconsEnum.PAUSE }], + }, + '3.jpeg': { + actions: [ + { event: 'event3', icon: PrizmIconsEnum.REPLAY, disabled: true }, + { event: 'event3', icon: PrizmIconsEnum.REPLAY }, + ], + }, + }); + } +} diff --git a/apps/doc/src/app/components/file-upload/examples/file-upload-with-init-files/file-upload-with-init-files.component.html b/apps/doc/src/app/components/file-upload/examples/file-upload-with-init-files/file-upload-with-init-files.component.html new file mode 100644 index 0000000000..5f8497bcae --- /dev/null +++ b/apps/doc/src/app/components/file-upload/examples/file-upload-with-init-files/file-upload-with-init-files.component.html @@ -0,0 +1,8 @@ + diff --git a/apps/doc/src/app/components/file-upload/examples/file-upload-with-init-files/file-upload-with-init-files.component.less b/apps/doc/src/app/components/file-upload/examples/file-upload-with-init-files/file-upload-with-init-files.component.less new file mode 100644 index 0000000000..e69de29bb2 diff --git a/apps/doc/src/app/components/file-upload/examples/file-upload-with-init-files/file-upload-with-init-files.component.ts b/apps/doc/src/app/components/file-upload/examples/file-upload-with-init-files/file-upload-with-init-files.component.ts new file mode 100644 index 0000000000..82cd1d13fa --- /dev/null +++ b/apps/doc/src/app/components/file-upload/examples/file-upload-with-init-files/file-upload-with-init-files.component.ts @@ -0,0 +1,30 @@ +import { ChangeDetectionStrategy, Component, signal } from '@angular/core'; +import { getMultiMockFiles } from '../../files.utils'; + +@Component({ + selector: 'prizm-file-upload-with-init-files', + templateUrl: './file-upload-with-init-files.component.html', + styleUrl: './file-upload-with-init-files.component.less', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class PrizmFileUploadWithInitFilesComponent { + files = signal([]); + + constructor() { + getMultiMockFiles().then(files => { + this.files.set(files); + }); + } + + public onFilesChange(files: Array): void { + console.log('filesChange', files); + } + + public onFileAdded(fileName: string): void { + console.log('fileAdded', fileName); + } + + public onFileRemoved(fileName: string): void { + console.log('fileRemoved', fileName); + } +} diff --git a/apps/doc/src/app/components/file-upload/file-upload-example.component.html b/apps/doc/src/app/components/file-upload/file-upload-example.component.html index bd9d9de294..f891de1cf7 100644 --- a/apps/doc/src/app/components/file-upload/file-upload-example.component.html +++ b/apps/doc/src/app/components/file-upload/file-upload-example.component.html @@ -26,6 +26,14 @@

+ + + + + + + + @@ -39,9 +47,13 @@

[maxFilesCount]="maxFilesCount" [maxFileSize]="maxFileSize" [disabled]="disabled" + [files]="initFiles()" + (actionEvent)="onActionEvent($event)" (filesChange)="onFilesChange($event)" - (filesValidationErrors)="onfilesValidationErrors($event)" + (filesValidationErrors)="onFilesValidationErrors($event)" (filesCountError)="onFilesCountError($event)" + (fileAdded)="onFileAdded($event)" + (fileRemoved)="onFileRemoved($event)" (retry)="retry($event)" > @@ -92,6 +104,17 @@

Max files count + + Files + +