feat(core): implement upload-collection in fundamental-ngx

angular.json

@@ -4050,6 +4050,50 @@
           }
         }
       }
+    },
+    "core-upload-collection": {
+      "projectType": "library",
+      "root": "libs/core/src/lib/upload-collection",
+      "sourceRoot": "libs/core/src/lib/upload-collection",
+      "prefix": "fd",
+      "architect": {
+        "build": {
+          "builder": "@nrwl/angular:package",
+          "outputs": [
+            "dist/libs/core/upload-collection"
+          ],
+          "options": {
+            "tsConfig": "libs/core/src/lib/upload-collection/tsconfig.lib.json",
+            "project": "libs/core/src/lib/upload-collection/ng-package.json",
+            "updateBuildableProjectDepsInPackageJson": false
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "libs/core/src/lib/upload-collection/tsconfig.lib.prod.json"
+            }
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "libs/core/src/lib/upload-collection/test.ts",
+            "tsConfig": "libs/core/src/lib/upload-collection/tsconfig.spec.json",
+            "karmaConfig": "libs/core/src/lib/upload-collection/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "libs/core/src/lib/upload-collection/tsconfig.lib.json",
+              "libs/core/src/lib/upload-collection/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
     }
   },
   "defaultProject": "docs",

apps/docs/src/app/core/api-files.ts

@@ -383,4 +383,16 @@ export const API_FILES = {
         'ResizableCardLayoutComponent',
         'ResizableCardItemComponent'
     ],
+    uploadCollection: [
+        'UploadCollectionComponent',
+        'UploadCollectionButtonGroupComponent',
+        'UploadCollectionFormItemComponent',
+        'UploadCollectionItemDirective',
+        'UploadCollectionThumbnailDirective',
+        'UploadCollectionTitleDirective',
+        'UploadCollectionDescriptionDirective',
+        'UploadCollectionTextSeparatorDirective',
+        'UploadCollectionStatusGroupDirective',
+        'UploadCollectionTitleContainerDirective'
+    ]
 };

apps/docs/src/app/core/component-docs/upload-collection/examples/upload-collection-custom-example.component.html

@@ -0,0 +1,61 @@
+<fd-upload-collection>
+    <li
+        fd-list-item
+        fd-upload-collection-item
+        *ngFor="let file of files"
+        [fileName]="file.fileName"
+        [extension]="file.extension"
+        (deleteClicked)="deleteClicked($event, file)"
+        (fileNameChanged)="fileNameChanged($event)"
+    >
+        <span fd-list-thumbnail fd-upload-collection-thumbnail><fd-icon [glyph]="file.icon"></fd-icon></span>
+        <div fd-list-content>
+            <div fd-upload-collection-title-container>
+                <a href="#" fd-link fd-list-title fd-upload-collection-title></a>
+                <fd-upload-collection-form-item></fd-upload-collection-form-item>
+                <span
+                    *ngIf="file.marker1"
+                    fd-object-marker
+                    [glyph]="file.marker1"
+                    title="Favorite"
+                    aria-label="Favorite Icon"
+                ></span>
+                <span
+                    *ngIf="file.marker2"
+                    fd-object-marker
+                    [glyph]="file.marker2"
+                    title="Flag"
+                    aria-label="Favorite Flag"
+                ></span>
+            </div>
+            <div fd-upload-collection-description>
+                This is the file description
+                <span fd-upload-collection-text-separator></span>
+                This is an additional description
+            </div>
+            <div fd-upload-collection-status-group>
+                <span
+                    fd-object-status
+                    status="negative"
+                    label="Negative Object Status"
+                    title="Object status Negative"
+                    aria-label="Object status Negative"
+                ></span>
+                <span fd-upload-collection-text-separator></span>
+                <span
+                    fd-object-status
+                    status="positive"
+                    label="Positive Object Status"
+                    title="Object status Positive"
+                    aria-label="Object status Positive"
+                ></span>
+            </div>
+        </div>
+        <fd-upload-collection-button-group
+            [allowFileDeletion]="file.allowDelete"
+            [allowFileNameEdit]="file.allowEdit"
+            [disableFileDeletion]="file.disableDeletion"
+            [disableFileNameEdit]="file.disableEdit"
+        ></fd-upload-collection-button-group>
+    </li>
+</fd-upload-collection>

apps/docs/src/app/core/component-docs/upload-collection/examples/upload-collection-custom-example.component.ts

@@ -0,0 +1,42 @@
+import { Component, ContentChildren, QueryList } from '@angular/core';
+import { UploadCollectionItemDirective } from '@fundamental-ngx/core';
+
+@Component({
+    selector: 'fd-upload-collection-custom-example',
+    templateUrl: './upload-collection-custom-example.component.html'
+})
+export class UploadCollectionCustomExampleComponent {
+    files = [
+        {
+            fileName: 'File_Name_1',
+            extension: 'txt',
+            icon: 'activate',
+            allowEdit: false,
+            allowDelete: false,
+            marker1: 'flag',
+            marker2: 'add-favorite'
+        },
+        {
+            fileName: 'File_Name_2',
+            extension: 'jpg',
+            icon: 'calendar',
+            allowEdit: true,
+            allowDelete: true,
+            disableEdit: true,
+            disableDeletion: true
+        },
+        { fileName: 'File_Name_3', extension: 'pdf', icon: 'customer', allowEdit: true, allowDelete: false }
+    ];
+
+    @ContentChildren(UploadCollectionItemDirective, { descendants: true })
+    uploadCollectionItems: QueryList<UploadCollectionItemDirective>;
+
+    fileNameChanged(event: UploadCollectionItemDirective): void {
+        window.alert('User has updated the file name to ' + event.fileName);
+    }
+
+    deleteClicked(event: UploadCollectionItemDirective, file: any): void {
+        window.alert('User has deleted the file ' + event.fileName + '.' + event.extension);
+        this.files.splice(this.files.indexOf(file), 1);
+    }
+}

apps/docs/src/app/core/component-docs/upload-collection/examples/upload-collection-empty-example.component.html

@@ -0,0 +1,4 @@
+<fd-message-page glyph="attachment" *ngIf="!items.length">
+    <fd-message-page-title>No files found. </fd-message-page-title>
+    <fd-message-page-subtitle> Drop files to upload, or use the "+" button. </fd-message-page-subtitle>
+</fd-message-page>

apps/docs/src/app/core/component-docs/upload-collection/examples/upload-collection-empty-example.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'fd-upload-collection-empty-example',
+    templateUrl: './upload-collection-empty-example.component.html'
+})
+export class UploadCollectionEmptyExampleComponent {
+    items = [];
+}

apps/docs/src/app/core/component-docs/upload-collection/examples/upload-collection-example.component.html

@@ -0,0 +1,56 @@
+<fd-upload-collection>
+    <li
+        fd-list-item
+        fd-upload-collection-item
+        *ngFor="let file of files"
+        [fileName]="file.fileName"
+        [extension]="file.extension"
+        (deleteClicked)="deleteClicked($event, file)"
+        (fileNameChanged)="fileNameChanged($event)"
+    >
+        <span fd-list-thumbnail fd-upload-collection-thumbnail><fd-icon [glyph]="file.icon"></fd-icon></span>
+        <div fd-list-content>
+            <div fd-upload-collection-title-container>
+                <a href="#" fd-link fd-list-title fd-upload-collection-title></a>
+                <fd-upload-collection-form-item></fd-upload-collection-form-item>
+                <span
+                    *ngIf="file.marker1"
+                    fd-object-marker
+                    [glyph]="file.marker1"
+                    title="Favorite"
+                    aria-label="Favorite Icon"
+                ></span>
+                <span
+                    *ngIf="file.marker2"
+                    fd-object-marker
+                    [glyph]="file.marker2"
+                    title="Flag"
+                    aria-label="Favorite Flag"
+                ></span>
+            </div>
+            <div fd-upload-collection-description>
+                This is the file description
+                <span fd-upload-collection-text-separator></span>
+                This is an additional description
+            </div>
+            <div fd-upload-collection-status-group>
+                <span
+                    fd-object-status
+                    status="negative"
+                    label="Negative Object Status"
+                    title="Object status Negative"
+                    aria-label="Object status Negative"
+                ></span>
+                <span fd-upload-collection-text-separator></span>
+                <span
+                    fd-object-status
+                    status="positive"
+                    label="Positive Object Status"
+                    title="Object status Positive"
+                    aria-label="Object status Positive"
+                ></span>
+            </div>
+        </div>
+        <fd-upload-collection-button-group></fd-upload-collection-button-group>
+    </li>
+</fd-upload-collection>

apps/docs/src/app/core/component-docs/upload-collection/examples/upload-collection-example.component.ts

@@ -0,0 +1,26 @@
+import { Component, ContentChildren, QueryList } from '@angular/core';
+import { UploadCollectionItemDirective } from '@fundamental-ngx/core';
+
+@Component({
+    selector: 'fd-upload-collection-example',
+    templateUrl: './upload-collection-example.component.html'
+})
+export class UploadCollectionExampleComponent {
+    files = [
+        { fileName: 'File_Name_1', extension: 'txt', icon: 'activate' },
+        { fileName: 'File_Name_2', extension: 'jpg', icon: 'calendar', marker1: 'flag', marker2: 'add-favorite' },
+        { fileName: 'File_Name_3', extension: 'pdf', icon: 'customer' }
+    ];
+
+    @ContentChildren(UploadCollectionItemDirective, { descendants: true })
+    uploadCollectionItems: QueryList<UploadCollectionItemDirective>;
+
+    fileNameChanged(event: UploadCollectionItemDirective): void {
+        window.alert('User has updated the file name to ' + event.fileName);
+    }
+
+    deleteClicked(event: UploadCollectionItemDirective, file: any): void {
+        window.alert('User has deleted the file ' + event.fileName + '.' + event.extension);
+        this.files.splice(this.files.indexOf(file), 1);
+    }
+}

apps/docs/src/app/core/component-docs/upload-collection/examples/upload-collection-small-example.component.html

@@ -0,0 +1,58 @@
+<div style="width: 29.5rem">
+    <fd-upload-collection [small]="true">
+        <li
+            fd-list-item
+            fd-upload-collection-item
+            *ngFor="let file of files"
+            [fileName]="file.fileName"
+            [extension]="file.extension"
+            (deleteClicked)="deleteClicked($event, file)"
+            (fileNameChanged)="fileNameChanged($event)"
+        >
+            <span fd-list-thumbnail fd-upload-collection-thumbnail><fd-icon [glyph]="file.icon"></fd-icon></span>
+            <div fd-list-content>
+                <div fd-upload-collection-title-container>
+                    <a href="#" fd-link fd-list-title fd-upload-collection-title></a>
+                    <fd-upload-collection-form-item></fd-upload-collection-form-item>
+                    <span
+                        *ngIf="file.marker1"
+                        fd-object-marker
+                        [glyph]="file.marker1"
+                        title="Favorite"
+                        aria-label="Favorite Icon"
+                    ></span>
+                    <span
+                        *ngIf="file.marker2"
+                        fd-object-marker
+                        [glyph]="file.marker2"
+                        title="Flag"
+                        aria-label="Favorite Flag"
+                    ></span>
+                </div>
+                <div fd-upload-collection-description>
+                    This is the file description
+                    <span fd-upload-collection-text-separator></span>
+                    This is an additional description
+                </div>
+                <div fd-upload-collection-status-group>
+                    <span
+                        fd-object-status
+                        status="negative"
+                        label="Negative Object Status"
+                        title="Object status Negative"
+                        aria-label="Object status Negative"
+                    ></span>
+                    <span fd-upload-collection-text-separator></span>
+                    <span
+                        fd-object-status
+                        status="positive"
+                        label="Positive Object Status"
+                        title="Object status Positive"
+                        aria-label="Object status Positive"
+                    ></span>
+                </div>
+            </div>
+            <fd-upload-collection-button-group></fd-upload-collection-button-group>
+        </li>
+    </fd-upload-collection>
+</div>

apps/docs/src/app/core/component-docs/upload-collection/examples/upload-collection-small-example.component.ts

@@ -0,0 +1,26 @@
+import { Component, ContentChildren, QueryList } from '@angular/core';
+import { UploadCollectionItemDirective } from '@fundamental-ngx/core';
+
+@Component({
+    selector: 'fd-upload-collection-small-example',
+    templateUrl: './upload-collection-small-example.component.html'
+})
+export class UploadCollectionSmallExampleComponent {
+    files = [
+        { fileName: 'File_Name_1', extension: 'txt', icon: 'activate' },
+        { fileName: 'File_Name_2', extension: 'jpg', icon: 'calendar' },
+        { fileName: 'File_Name_3', extension: 'pdf', icon: 'customer', marker1: 'flag', marker2: 'add-favorite' }
+    ];
+
+    @ContentChildren(UploadCollectionItemDirective, { descendants: true })
+    uploadCollectionItems: QueryList<UploadCollectionItemDirective>;
+
+    fileNameChanged(event: UploadCollectionItemDirective): void {
+        window.alert('User has updated the file name to ' + event.fileName);
+    }
+
+    deleteClicked(event: UploadCollectionItemDirective, file: any): void {
+        window.alert('User has deleted the file ' + event.fileName + '.' + event.extension);
+        this.files.splice(this.files.indexOf(file), 1);
+    }
+}