feature(file-input): introducing file-input component. (closes #326) and (closes #286)

src/app/components/components/components.component.ts

@@ -35,10 +35,15 @@ export class ComponentsComponent implements AfterViewInit {
     route: 'expansion-panel',
     title: 'Expansion Panels',
   }, {
-    description: 'Upload input button',
-    icon: 'file_upload',
+    description: 'Text input for files',
+    icon: 'space_bar',
+    route: 'file-input',
+    title: 'File Input',
+  }, {
+    description: 'All-in-one upload button',
+    icon: 'attach_file',
     route: 'file-upload',
-    title: 'File Upload',
+    title: 'File Upload Button',
   }, {
     description: 'Small blocks for multiple items',
     icon: 'label_outline',

src/app/components/components/components.module.ts

@@ -7,6 +7,7 @@ import { ComponentsOverviewComponent }  from './overview/overview.component';
 import { HighlightDemoComponent } from './highlight/highlight.component';
 import { StepsDemoComponent } from './steps/steps.component';
 import { ExpansionPanelDemoComponent } from './expansion-panel/expansion-panel.component';
+import { FileInputDemoComponent } from './file-input/file-input.component';
 import { FileUploadDemoComponent } from './file-upload/file-upload.component';
 import { LoadingDemoComponent } from './loading/loading.component';
 import { MarkdownDemoComponent } from './markdown/markdown.component';
@@ -46,6 +47,7 @@ import { DocumentationToolsModule } from '../../documentation-tools';
     HighlightDemoComponent,
     StepsDemoComponent,
     ExpansionPanelDemoComponent,
+    FileInputDemoComponent,
     FileUploadDemoComponent,
     LoadingDemoComponent,
     MarkdownDemoComponent,

src/app/components/components/components.routes.ts

@@ -5,6 +5,7 @@ import { ComponentsOverviewComponent }  from './overview/overview.component';
 import { HighlightDemoComponent } from './highlight/highlight.component';
 import { StepsDemoComponent } from './steps/steps.component';
 import { ExpansionPanelDemoComponent } from './expansion-panel/expansion-panel.component';
+import { FileInputDemoComponent } from './file-input/file-input.component';
 import { FileUploadDemoComponent } from './file-upload/file-upload.component';
 import { LoadingDemoComponent } from './loading/loading.component';
 import { MarkdownDemoComponent } from './markdown/markdown.component';
@@ -41,6 +42,9 @@ const routes: Routes = [{
     }, {
       component: ExpansionPanelDemoComponent,
       path: 'expansion-panel',
+    }, {
+      component: FileInputDemoComponent,
+      path: 'file-input',
     }, {
       component: FileUploadDemoComponent,
       path: 'file-upload',

src/app/components/components/file-input/file-input.component.html

@@ -0,0 +1,104 @@
+<md-card>
+  <md-card-title>File Input</md-card-title>
+  <md-card-subtitle>single or multiple selection/drop</md-card-subtitle>
+  <md-divider></md-divider>
+  <md-tab-group md-stretch-tabs>
+    <md-tab>
+      <template md-tab-label>Demo</template>
+      <md-card-content>
+        <div layout="row">
+          <md-input-container tdFileDrop
+                              [disabled]="disabled"
+                              (fileDrop)="files = $event"
+                              (click)="fileInput.inputElement.click()"
+                              (keyup.enter)="fileInput.inputElement.click()"
+                              (keyup.delete)="fileInput.clear()"
+                              (keyup.backspace)="fileInput.clear()"
+                              flex>
+            <input md-input
+                   placeholder="select or drop files"
+                   [value]="files?.length ? (files?.length + ' files') : files?.name"
+                   [disabled]="disabled"
+                   readonly/>
+          </md-input-container>
+          <button md-icon-button *ngIf="files" (click)="fileInput.clear()" (keyup.enter)="fileInput.clear()">
+            <md-icon>cancel</md-icon>
+          </button>
+          <td-file-input class="push-left-sm push-right-sm" #fileInput [(ngModel)]="files" multiple [disabled]="disabled">
+            <md-icon>folder</md-icon>
+            Browse...
+          </td-file-input>
+          <span>
+            <button md-raised-button color="accent" [disabled]="!files">Submit</button>
+          </span>
+        </div>
+      </md-card-content>
+      <md-divider></md-divider>
+      <md-card-actions>
+        <button md-button color="primary" (click)="toggleDisabled()">Toggle Disable</button>
+      </md-card-actions>
+    </md-tab>
+    <md-tab>
+      <template md-tab-label>Code</template>
+      <md-card-content>
+        <p>HTML:</p>
+        <td-highlight lang="html">
+          <![CDATA[
+            <div layout="row">
+              <md-input-container tdFileDrop
+                                  [disabled]="disabled"
+                                  (fileDrop)="files = $event"
+                                  (click)="fileInput.inputElement.click()"
+                                  (keyup.enter)="fileInput.inputElement.click()"
+                                  (keyup.delete)="fileInput.clear()"
+                                  (keyup.backspace)="fileInput.clear()"
+                                  flex>
+                <input md-input
+                      placeholder="select or drop files"
+                      [value]="files?.length ? (files?.length + ' files') : files?.name"
+                      [disabled]="disabled"
+                      readonly/>
+              </md-input-container>
+              <button md-icon-button *ngIf="files" (click)="fileInput.clear()" (keyup.enter)="fileInput.clear()">
+                <md-icon>cancel</md-icon>
+              </button>
+              <td-file-input class="push-left-sm push-right-sm" #fileInput [(ngModel)]="files" multiple [disabled]="disabled">
+                <md-icon>folder</md-icon>
+                Browse...
+              </td-file-input>
+              <span>
+                <button md-raised-button color="accent" [disabled]="!files">Submit</button>
+              </span>
+            </div>
+          ]]>
+        </td-highlight>
+        <p>CSS:</p>
+        <td-highlight lang="typescript">
+          <![CDATA[
+            .drop-zone {
+              font-weight: 600;
+              /deep/ * {
+                pointer-events: none; //added to fix bug that re-throws dragleave/dragenter by child elements
+              }
+            }
+          ]]>
+        </td-highlight>
+        <p>Typescript:</p>
+        <td-highlight lang="typescript">
+          <![CDATA[
+            export class Demo {
+              files: File | FileList;
+              disabled: boolean = false;
+
+              toggleDisabled(): void {
+                this.disabled = !this.disabled;
+              }
+            }
+          ]]>
+        </td-highlight>
+      </md-card-content>
+    </md-tab>
+  </md-tab-group>
+</md-card>
+
+<td-readme-loader resourceUrl="platform/core/file/file-input/README.md"></td-readme-loader>

src/app/components/components/file-input/file-input.component.scss

@@ -0,0 +1,6 @@
+.drop-zone {
+  font-weight: 600;
+  /deep/ * {
+    pointer-events: none; //added to fix bug that re-throws dragleave/dragenter by child elements
+  }
+}

src/app/components/components/file-input/file-input.component.ts

@@ -0,0 +1,26 @@
+import { Component, HostBinding, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
+
+import { slideInDownAnimation } from '../../../app.animations';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'file-input-demo',
+  styleUrls: ['./file-input.component.scss'],
+  templateUrl: './file-input.component.html',
+  animations: [slideInDownAnimation],
+})
+export class FileInputDemoComponent {
+
+  @HostBinding('@routeAnimation') routeAnimation: boolean = true;
+  @HostBinding('class.td-route-animation') classAnimation: boolean = true;
+
+  disabled: boolean = false;
+
+  constructor(private _changeDetectorRef: ChangeDetectorRef) {}
+
+  toggleDisabled(): void {
+    this.disabled = !this.disabled;
+    this._changeDetectorRef.detectChanges();
+    this._changeDetectorRef.markForCheck();
+  }
+}