File Input control

angular.json

@@ -330,7 +330,7 @@
       }
     }
   },
-  "defaultProject": "angular-dxc-site",
+  "defaultProject": "dxc-ngx-cdk",
   "cli": {
     "analytics": false
   }

projects/dxc-ngx-cdk/src/lib/dxc-file-input/directives/file-format.directive.ts

@@ -0,0 +1,50 @@
+import { Directive, ElementRef, Input, Inject } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+
+@Directive({
+  selector: '[dxcFileFormat]'
+})
+export class FileFormatDirective {
+
+  @Input() format;
+
+  constructor(private elementRef: ElementRef, @Inject(DOCUMENT) private document: any) {
+  }
+
+   ngOnInit(): void {
+    let xmlns = "http://www.w3.org/2000/svg";
+    const commonPathChild = this.document.createElementNS(xmlns, "path");
+    commonPathChild.setAttributeNS(null, 'd', 'M0 0h24v24H0V0z');
+    commonPathChild.setAttributeNS(null, 'fill', 'none');
+    const child = this.document.createElementNS(xmlns, "path");
+    switch (this.categorizeFileFormat(this.format)) {
+      case 'image':
+        child.setAttributeNS(null, 'd', 'M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z');
+        break;
+      case 'video':
+        child.setAttributeNS(null, 'd', 'M4 6.47L5.76 10H20v8H4V6.47M22 4h-4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4z');
+        break;
+      case 'audio':
+        child.setAttributeNS(null, 'd', 'M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM8 15c0-1.66 1.34-3 3-3 .35 0 .69.07 1 .18V6h5v2h-3v7.03c-.02 1.64-1.35 2.97-3 2.97-1.66 0-3-1.34-3-3z');
+        break;
+      default:
+        child.setAttributeNS(null, 'd', 'M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z');
+        break;
+    }
+    this.elementRef.nativeElement.append(commonPathChild);
+    this.elementRef.nativeElement.append(child);
+   }
+
+   private categorizeFileFormat(fileFormat:string){
+    if (fileFormat.includes("image")) {
+      return 'image';
+    } else if (fileFormat.includes("video")) {
+      return 'video';
+
+    } else if (fileFormat.includes("audio")) {
+      return 'audio';
+
+    }
+    return 'default';
+   }
+}

projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file-error/dxc-file-error.component.html

@@ -0,0 +1,3 @@
+<span
+  class="errorMessage"
+  >{{error}}</span>

projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file-error/dxc-file-error.component.scss

@@ -0,0 +1,9 @@
+.errorMessage {
+  text-align: left;
+  letter-spacing: 0.37px;
+  color: var(--fileInput-errorMessageFontColor);
+  font-family: var(--fileInput-errorMessageFontFamily);
+  font-size: var(--fileInput-errorMessageFontSize);
+  font-weight: var(--fileInput-errorMessageFontWeight);
+  line-height: var(--fileInput-errorMessageLineHeight);
+}

projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file-error/dxc-file-error.component.ts

@@ -0,0 +1,19 @@
+import { ChangeDetectionStrategy, Component, HostBinding, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'dxc-file-error',
+  templateUrl: './dxc-file-error.component.html',
+  styleUrls: ['./dxc-file-error.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DxcFileErrorComponent implements OnInit {
+
+  @Input()
+  error: string;
+
+  constructor() { }
+
+  ngOnInit(): void {
+
+  }
+}

projects/dxc-ngx-cdk/src/lib/dxc-file-input/dxc-file-input.component.html

@@ -0,0 +1,53 @@
+<label class="label" htmlFor="{{ id }}">{{ label }}</label>
+<span *ngIf="helperText" class="helperText">{{ helperText }}</span>
+<div class="fileInputContainer">
+  <input
+    #fileInput
+    data-testid="input"
+    type="file"
+    (change)="onFileInput($event)"
+    [accept]="accept"
+  />
+  <dxc-button
+    *ngIf="mode === 'file'"
+    [label]="buttonLabel"
+    mode="secondary"
+    [disabled]="disabled"
+    (onClick)="fileInput.click()"
+    [tabIndexValue]="tabIndexValue"
+  ></dxc-button>
+  <div
+    *ngIf="mode !== 'file'"
+    class="dragDropArea"
+    [ngClass]="{
+      hovering: hoveringWithFile === true
+    }"
+    (drop)="drop($event)"
+    (dragleave)="dragLeave($event)"
+    (dragover)="dragOver($event)"
+  >
+    <dxc-button
+      [label]="buttonLabel"
+      mode="secondary"
+      [disabled]="disabled"
+      [tabIndexValue]="tabIndexValue"
+      (onClick)="fileInput.click()"
+    ></dxc-button>
+    <span *ngIf="mode === 'filedrop' || mode === 'dropzone'" class="dropLabel"
+      >or drop files</span
+    >
+  </div>
+  <div class="fileContainer">
+    <dxc-file
+      *ngFor="let file of value"
+      [file]="file"
+      [showPreview]="showPreview"
+      [multiple]="!hasSingleFile"
+      [mode]="mode"
+      [tabIndexValue]="tabIndexValue"
+      [updatable]="callbackFile?.observers?.length > 0"
+    ></dxc-file>
+  </div>
+</div>
+
+<dxc-file-error *ngIf="hasShowError" [error]="value[0]?.error"></dxc-file-error>