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

[emoralesb05]

Description

Removed the file-selection part out of file-upload to create an atomic component thats able to be used stand-alone or part of file-upload.
#326 and #286

What's included?

• td-file-input component for stand-alone usage with ngModel support.

<td-file-input [(ngModel)]="files" color="primary" (select)="selectEvent($event)" accept=".ext,.anotherExt" [disabled]="disabled" multiple>
  <md-icon>attach_file</md-icon><span>Choose a file...</span>
</td-file-input>

• BREAKING CHANGE feature(file-upload): td-file-upload usage of td-file-input internally and added way to set its labels so its easier to for i18n usage [Enhancement] Test (and modify) all our components to make them support or handle i18n and l10n. #324:

<td-file-upload #singleFileUpload (select)="selectEvent($event)" (upload)="uploadEvent($event)" [disabled]="disabled">
    <md-icon>file_upload</md-icon><span>{{ singleFileUpload.files?.name }}</span>
    <template td-file-input-label>
      <md-icon>attach_file</md-icon><span>Choose a file...</span>
    </template>
  </td-file-upload>

• docs(file-upload): updated README.md for td-file-upload and load it as part of the docs.
• docs(file-upload): updated demo for td-file-upload with better examples.
• feature(file-upload): add (select) event to td-file-upload component.
• performance(file-upload): add OnPush change detection. [Performance] Make sure all our elements work under OnPush. #325

Test Steps

• ng serve
• Go to http://localhost:4200/#/components/file-upload and see updated demo and docs with loaded README.md
• Go to http://localhost:4200/#/components/file-input and see new demo and docs with loaded README.md

General Tests for Every PR

• ng serve --aot still works.
• npm run lint passes.
• npm test passes and code coverage is not lower.
• npm run build still works.

Screenshots or link to CodePen/Plunker/JSfiddle

[ilsiepotamus]

text does not disappear after a file is selected

[emoralesb05]

Thats an issue from material when using [value] which is fixed in their beta.2.

[richavyas]

[richavyas]

[richavyas]

UI gets distorted when one or more than one files are dropped or uploaded.

[richavyas]

Can tags be called by By.css or it should be By.directive? or were you actually calling it on class: td-file-input and missed the dot.

[emoralesb05]

By.css doesnt literally mean it needs to be a class. It just means it can be a css selector, which in this case is an element selector.