@covalent/core 4.0.0-beta.2 → 4.1.0-develop.2

package/fesm2015/covalent-core-file.mjs

@@ -1,18 +1,18 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, Directive, Optional, Host, Input, Output, HostBinding, HostListener, forwardRef, Component, ChangeDetectionStrategy, ViewChild, ContentChild, Injectable, NgModule } from '@angular/core';
-import * as i1$2 from '@angular/common';
+import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import * as i4 from '@angular/cdk/portal';
+import * as i6 from '@angular/cdk/portal';
 import { TemplatePortalDirective, PortalModule } from '@angular/cdk/portal';
-import * as i6 from '@angular/material/icon';
+import * as i3 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i1$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { mixinDisabled, mixinControlValueAccessor } from '@covalent/core/common';
-import * as i1$3 from '@angular/common/http';
+import { mixinControlValueAccessor, mixinDisabled } from '@covalent/core/common';
+import * as i1$2 from '@angular/common/http';
 import { HttpRequest, HttpHeaders, HttpParams, HttpEventType } from '@angular/common/http';
 import { Subject } from 'rxjs';
 import { tap } from 'rxjs/operators';
@@ -51,38 +51,35 @@ class TdFileSelectDirective {
     onChange(event) {
         if (event.target instanceof HTMLInputElement) {
             const fileInputEl = event.target;
-            const files = fileInputEl.files;
+            const files = fileInputEl.files || new FileList();
             if (files.length) {
-                const value = this._multiple ? (files.length > 1 ? files : files[0]) : files[0];
-                this.model ? this.model.update.emit(value) : this.fileSelect.emit(value);
+                const value = this._multiple
+                    ? files.length > 1
+                        ? files
+                        : files[0]
+                    : files[0];
+                this.model
+                    ? this.model.update.emit(value)
+                    : this.fileSelect.emit(value);
             }
         }
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdFileSelectDirective.ɵfac = function TdFileSelectDirective_Factory(t) { return new (t || TdFileSelectDirective)(i0.ɵɵdirectiveInject(i1.NgModel, 9)); };
-/** @nocollapse */ /** @nocollapse */ TdFileSelectDirective.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: TdFileSelectDirective, selectors: [["", "tdFileSelect", ""]], hostVars: 1, hostBindings: function TdFileSelectDirective_HostBindings(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵlistener("change", function TdFileSelectDirective_change_HostBindingHandler($event) { return ctx.onChange($event); });
-        }
-        if (rf & 2) {
-            i0.ɵɵattribute("multiple", ctx.multipleBinding);
-        }
-    }, inputs: { multiple: "multiple" }, outputs: { fileSelect: "fileSelect" } });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdFileSelectDirective, [{
+TdFileSelectDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdFileSelectDirective, deps: [{ token: i1.NgModel, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+TdFileSelectDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.2", type: TdFileSelectDirective, selector: "[tdFileSelect]", inputs: { multiple: "multiple" }, outputs: { fileSelect: "fileSelect" }, host: { listeners: { "change": "onChange($event)" }, properties: { "attr.multiple": "this.multipleBinding" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdFileSelectDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tdFileSelect]',
                 }]
-        }], function () {
+        }], ctorParameters: function () {
         return [{ type: i1.NgModel, decorators: [{
                         type: Optional
                     }, {
                         type: Host
                     }] }];
-    }, { multiple: [{
-                type: Input,
-                args: ['multiple']
+    }, propDecorators: { multiple: [{
+                type: Input
             }], fileSelect: [{
                 type: Output
             }], multipleBinding: [{
@@ -91,19 +88,16 @@ class TdFileSelectDirective {
             }], onChange: [{
                 type: HostListener,
                 args: ['change', ['$event']]
-            }] });
-})();
+            }] } });
 
 class TdFileDropBase {
 }
-/* tslint:disable-next-line */
-const _TdFileDropMixinBase = mixinDisabled(TdFileDropBase);
-class TdFileDropDirective extends _TdFileDropMixinBase {
+class TdFileDropDirective {
     constructor(_renderer, _element) {
-        super();
         this._renderer = _renderer;
         this._element = _element;
         this._multiple = false;
+        this.disabled = false;
         /**
          * fileDrop?: function
          * Event emitted when a file or files are dropped in host element after being validated.
@@ -137,11 +131,16 @@ class TdFileDropDirective extends _TdFileDropMixinBase {
      * Stops event propagation and default action from browser for 'drop' event.
      */
     onDrop(event) {
+        var _a;
         if (!this.disabled) {
-            const transfer = event.dataTransfer;
+            const transfer = (_a = event.dataTransfer) !== null && _a !== void 0 ? _a : new DataTransfer();
             const files = transfer.files;
             if (files.length) {
-                const value = this._multiple ? (files.length > 1 ? files : files[0]) : files[0];
+                const value = this._multiple
+                    ? files.length > 1
+                        ? files
+                        : files[0]
+                    : files[0];
                 this.fileDrop.emit(value);
             }
         }
@@ -154,10 +153,12 @@ class TdFileDropDirective extends _TdFileDropMixinBase {
      * Stops event propagation and default action from browser for 'dragover' event.
      */
     onDragOver(event) {
-        const transfer = event.dataTransfer;
+        const transfer = event.dataTransfer || new DataTransfer();
         transfer.dropEffect = this._typeCheck(transfer.types);
         if (this.disabled ||
-            (!this._multiple && ((transfer.items && transfer.items.length > 1) || transfer.mozItemCount > 1))) {
+            (!this._multiple &&
+                ((transfer.items && transfer.items.length > 1) ||
+                    transfer.mozItemCount > 1))) {
             transfer.dropEffect = 'none';
         }
         else {
@@ -200,25 +201,17 @@ class TdFileDropDirective extends _TdFileDropMixinBase {
         event.stopPropagation();
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdFileDropDirective.ɵfac = function TdFileDropDirective_Factory(t) { return new (t || TdFileDropDirective)(i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef)); };
-/** @nocollapse */ /** @nocollapse */ TdFileDropDirective.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: TdFileDropDirective, selectors: [["", "tdFileDrop", ""]], hostVars: 2, hostBindings: function TdFileDropDirective_HostBindings(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵlistener("drop", function TdFileDropDirective_drop_HostBindingHandler($event) { return ctx.onDrop($event); })("dragover", function TdFileDropDirective_dragover_HostBindingHandler($event) { return ctx.onDragOver($event); })("dragenter", function TdFileDropDirective_dragenter_HostBindingHandler($event) { return ctx.onDragEnter($event); })("dragleave", function TdFileDropDirective_dragleave_HostBindingHandler($event) { return ctx.onDragLeave($event); });
-        }
-        if (rf & 2) {
-            i0.ɵɵattribute("multiple", ctx.multipleBinding)("disabled", ctx.disabledBinding);
-        }
-    }, inputs: { disabled: "disabled", multiple: "multiple" }, outputs: { fileDrop: "fileDrop" }, features: [i0.ɵɵInheritDefinitionFeature] });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdFileDropDirective, [{
+TdFileDropDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdFileDropDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+TdFileDropDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.2", type: TdFileDropDirective, selector: "[tdFileDrop]", inputs: { multiple: "multiple", disabled: "disabled" }, outputs: { fileDrop: "fileDrop" }, host: { listeners: { "drop": "onDrop($event)", "dragover": "onDragOver($event)", "dragenter": "onDragEnter($event)", "dragleave": "onDragLeave($event)" }, properties: { "attr.multiple": "this.multipleBinding", "attr.disabled": "this.disabledBinding" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdFileDropDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tdFileDrop]',
-                    inputs: ['disabled'],
                 }]
-        }], function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, { multiple: [{
-                type: Input,
-                args: ['multiple']
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { multiple: [{
+                type: Input
+            }], disabled: [{
+                type: Input
             }], fileDrop: [{
                 type: Output
             }], multipleBinding: [{
@@ -239,32 +232,26 @@ class TdFileDropDirective extends _TdFileDropMixinBase {
             }], onDragLeave: [{
                 type: HostListener,
                 args: ['dragleave', ['$event']]
-            }] });
-})();
+            }] } });
 
-const _c0$1 = ["fileInput"];
-const _c1 = ["*"];
 class TdFileInputLabelDirective extends TemplatePortalDirective {
     constructor(templateRef, viewContainerRef) {
         super(templateRef, viewContainerRef);
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdFileInputLabelDirective.ɵfac = function TdFileInputLabelDirective_Factory(t) { return new (t || TdFileInputLabelDirective)(i0.ɵɵdirectiveInject(i0.TemplateRef), i0.ɵɵdirectiveInject(i0.ViewContainerRef)); };
-/** @nocollapse */ /** @nocollapse */ TdFileInputLabelDirective.ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: TdFileInputLabelDirective, selectors: [["ng-template", "td-file-input-label", ""]], features: [i0.ɵɵInheritDefinitionFeature] });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdFileInputLabelDirective, [{
+TdFileInputLabelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdFileInputLabelDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+TdFileInputLabelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.2", type: TdFileInputLabelDirective, selector: "[tdFileInputLabel]ng-template", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdFileInputLabelDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[td-file-input-label]ng-template',
+                    selector: '[tdFileInputLabel]ng-template',
                 }]
-        }], function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; }, null);
-})();
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; } });
 class TdFileInputBase {
     constructor(_changeDetectorRef) {
         this._changeDetectorRef = _changeDetectorRef;
     }
 }
-/* tslint:disable-next-line */
 const _TdFileInputMixinBase = mixinControlValueAccessor(mixinDisabled(TdFileInputBase));
 class TdFileInputComponent extends _TdFileInputMixinBase {
     constructor(_renderer, _changeDetectorRef) {
@@ -276,7 +263,7 @@ class TdFileInputComponent extends _TdFileInputMixinBase {
          * Event emitted a file is selected
          * Emits a [File | FileList] object.
          */
-        this.select = new EventEmitter();
+        this.selectFile = new EventEmitter();
     }
     get inputElement() {
         return this._inputElement.nativeElement;
@@ -296,7 +283,7 @@ class TdFileInputComponent extends _TdFileInputMixinBase {
      */
     handleSelect(files) {
         this.writeValue(files);
-        this.select.emit(files);
+        this.selectFile.emit(files);
     }
     /**
      * Used to clear the selected files from the [TdFileInputComponent].
@@ -318,121 +305,47 @@ class TdFileInputComponent extends _TdFileInputMixinBase {
         this.disabled = isDisabled;
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdFileInputComponent.ɵfac = function TdFileInputComponent_Factory(t) { return new (t || TdFileInputComponent)(i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-/** @nocollapse */ /** @nocollapse */ TdFileInputComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TdFileInputComponent, selectors: [["td-file-input"]], viewQuery: function TdFileInputComponent_Query(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$1, 7);
-        }
-        if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._inputElement = _t.first);
-        }
-    }, inputs: { disabled: "disabled", value: "value", color: "color", multiple: "multiple", accept: "accept" }, outputs: { select: "select" }, features: [i0.ɵɵProvidersFeature([
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef((() => TdFileInputComponent)),
-                multi: true,
-            },
-        ]), i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c1, decls: 5, vars: 6, consts: [["mat-raised-button", "", "type", "button", "tdFileDrop", "", 1, "td-file-input", 3, "color", "multiple", "disabled", "keyup.enter", "click", "fileDrop"], ["type", "file", "tdFileSelect", "", 1, "td-file-input-hidden", 3, "multiple", "disabled", "fileSelect"], ["fileInput", ""]], template: function TdFileInputComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵprojectionDef();
-            i0.ɵɵelementStart(0, "div");
-            i0.ɵɵelementStart(1, "button", 0);
-            i0.ɵɵlistener("keyup.enter", function TdFileInputComponent_Template_button_keyup_enter_1_listener() { i0.ɵɵrestoreView(_r1); const _r0 = i0.ɵɵreference(4); return _r0.click(); })("click", function TdFileInputComponent_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r1); const _r0 = i0.ɵɵreference(4); return _r0.click(); })("fileDrop", function TdFileInputComponent_Template_button_fileDrop_1_listener($event) { return ctx.handleSelect($event); });
-            i0.ɵɵprojection(2);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(3, "input", 1, 2);
-            i0.ɵɵlistener("fileSelect", function TdFileInputComponent_Template_input_fileSelect_3_listener($event) { return ctx.handleSelect($event); });
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementEnd();
-        }
-        if (rf & 2) {
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("color", ctx.color)("multiple", ctx.multiple)("disabled", ctx.disabled);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("multiple", ctx.multiple)("disabled", ctx.disabled);
-            i0.ɵɵattribute("accept", ctx.accept);
-        }
-    }, directives: [i1$1.MatButton, TdFileDropDirective, TdFileSelectDirective], styles: ["[_nghost-%COMP%]   .td-file-input[_ngcontent-%COMP%]{padding-left:8px;padding-right:8px}[_nghost-%COMP%]   input.td-file-input-hidden[_ngcontent-%COMP%]{display:none}[_nghost-%COMP%]   .drop-zone[_ngcontent-%COMP%]{border-radius:3px}[_nghost-%COMP%]   .drop-zone[_ngcontent-%COMP%]   *[_ngcontent-%COMP%]{pointer-events:none}"], changeDetection: 0 });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdFileInputComponent, [{
+TdFileInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdFileInputComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TdFileInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TdFileInputComponent, selector: "td-file-input", inputs: { disabled: "disabled", value: "value", color: "color", multiple: "multiple", accept: "accept" }, outputs: { selectFile: "selectFile" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => TdFileInputComponent),
+            multi: true,
+        },
+    ], viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["fileInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<button\n  mat-raised-button\n  class=\"td-file-input\"\n  type=\"button\"\n  [color]=\"color\"\n  [multiple]=\"multiple\"\n  [disabled]=\"disabled\"\n  (keyup.enter)=\"fileInput.click()\"\n  (click)=\"fileInput.click()\"\n  (fileDrop)=\"handleSelect($event)\"\n  tdFileDrop\n>\n  <ng-content></ng-content>\n</button>\n<input\n  #fileInput\n  class=\"td-file-input-hidden\"\n  type=\"file\"\n  [attr.accept]=\"accept\"\n  (fileSelect)=\"handleSelect($event)\"\n  [multiple]=\"multiple\"\n  [disabled]=\"disabled\"\n  tdFileSelect\n/>\n", styles: [":host .td-file-input{padding-left:8px;padding-right:8px}:host input.td-file-input-hidden{display:none}:host .drop-zone{border-radius:3px}:host .drop-zone *{pointer-events:none}\n"], components: [{ type: i1$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: TdFileDropDirective, selector: "[tdFileDrop]", inputs: ["multiple", "disabled"], outputs: ["fileDrop"] }, { type: TdFileSelectDirective, selector: "[tdFileSelect]", inputs: ["multiple"], outputs: ["fileSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdFileInputComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef((() => TdFileInputComponent)),
+                            useExisting: forwardRef(() => TdFileInputComponent),
                             multi: true,
                         },
-                    ], selector: 'td-file-input', inputs: ['disabled', 'value'], template: "<div>\n  <button\n    mat-raised-button\n    class=\"td-file-input\"\n    type=\"button\"\n    [color]=\"color\"\n    [multiple]=\"multiple\"\n    [disabled]=\"disabled\"\n    (keyup.enter)=\"fileInput.click()\"\n    (click)=\"fileInput.click()\"\n    (fileDrop)=\"handleSelect($event)\"\n    tdFileDrop\n  >\n    <ng-content></ng-content>\n  </button>\n  <input\n    #fileInput\n    class=\"td-file-input-hidden\"\n    type=\"file\"\n    [attr.accept]=\"accept\"\n    (fileSelect)=\"handleSelect($event)\"\n    [multiple]=\"multiple\"\n    [disabled]=\"disabled\"\n    tdFileSelect\n  />\n</div>\n", styles: [":host .td-file-input{padding-left:8px;padding-right:8px}:host input.td-file-input-hidden{display:none}:host .drop-zone{border-radius:3px}:host .drop-zone *{pointer-events:none}\n"] }]
-        }], function () { return [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, { _inputElement: [{
+                    ], selector: 'td-file-input', inputs: ['disabled', 'value'], template: "<button\n  mat-raised-button\n  class=\"td-file-input\"\n  type=\"button\"\n  [color]=\"color\"\n  [multiple]=\"multiple\"\n  [disabled]=\"disabled\"\n  (keyup.enter)=\"fileInput.click()\"\n  (click)=\"fileInput.click()\"\n  (fileDrop)=\"handleSelect($event)\"\n  tdFileDrop\n>\n  <ng-content></ng-content>\n</button>\n<input\n  #fileInput\n  class=\"td-file-input-hidden\"\n  type=\"file\"\n  [attr.accept]=\"accept\"\n  (fileSelect)=\"handleSelect($event)\"\n  [multiple]=\"multiple\"\n  [disabled]=\"disabled\"\n  tdFileSelect\n/>\n", styles: [":host .td-file-input{padding-left:8px;padding-right:8px}:host input.td-file-input-hidden{display:none}:host .drop-zone{border-radius:3px}:host .drop-zone *{pointer-events:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { _inputElement: [{
                 type: ViewChild,
                 args: ['fileInput', { static: true }]
             }], color: [{
                 type: Input
             }], multiple: [{
-                type: Input,
-                args: ['multiple']
+                type: Input
             }], accept: [{
                 type: Input
-            }], select: [{
+            }], selectFile: [{
                 type: Output
-            }] });
-})();
+            }] } });
 
-function TdFileUploadComponent_td_file_input_0_ng_template_1_Template(rf, ctx) { }
-function TdFileUploadComponent_td_file_input_0_Template(rf, ctx) {
-    if (rf & 1) {
-        const _r4 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "td-file-input", 2);
-        i0.ɵɵlistener("ngModelChange", function TdFileUploadComponent_td_file_input_0_Template_td_file_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r3 = i0.ɵɵnextContext(); return ctx_r3.value = $event; })("select", function TdFileUploadComponent_td_file_input_0_Template_td_file_input_select_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r5 = i0.ɵɵnextContext(); return ctx_r5.handleSelect($event); });
-        i0.ɵɵtemplate(1, TdFileUploadComponent_td_file_input_0_ng_template_1_Template, 0, 0, "ng-template", 3);
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const ctx_r0 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("ngModel", ctx_r0.value)("multiple", ctx_r0.multiple)("disabled", ctx_r0.disabled)("accept", ctx_r0.accept)("color", ctx_r0.defaultColor);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("cdkPortalOutlet", ctx_r0.inputLabel)("ngIf", true);
-    }
-}
-function TdFileUploadComponent_div_1_Template(rf, ctx) {
-    if (rf & 1) {
-        const _r8 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "div");
-        i0.ɵɵelementStart(1, "button", 4, 5);
-        i0.ɵɵlistener("keyup.delete", function TdFileUploadComponent_div_1_Template_button_keyup_delete_1_listener() { i0.ɵɵrestoreView(_r8); const ctx_r7 = i0.ɵɵnextContext(); return ctx_r7._cancel(); })("keyup.backspace", function TdFileUploadComponent_div_1_Template_button_keyup_backspace_1_listener() { i0.ɵɵrestoreView(_r8); const ctx_r9 = i0.ɵɵnextContext(); return ctx_r9._cancel(); })("keyup.escape", function TdFileUploadComponent_div_1_Template_button_keyup_escape_1_listener() { i0.ɵɵrestoreView(_r8); const ctx_r10 = i0.ɵɵnextContext(); return ctx_r10._cancel(); })("click", function TdFileUploadComponent_div_1_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r8); const ctx_r11 = i0.ɵɵnextContext(); return ctx_r11.uploadPressed(); });
-        i0.ɵɵprojection(3);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(4, "button", 6);
-        i0.ɵɵlistener("click", function TdFileUploadComponent_div_1_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r8); const ctx_r12 = i0.ɵɵnextContext(); return ctx_r12._cancel(); });
-        i0.ɵɵelementStart(5, "mat-icon");
-        i0.ɵɵtext(6, "cancel");
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementEnd();
-    }
-    if (rf & 2) {
-        const ctx_r1 = i0.ɵɵnextContext();
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("color", ctx_r1.activeColor);
-        i0.ɵɵadvance(3);
-        i0.ɵɵproperty("color", ctx_r1.cancelColor);
-    }
-}
-const _c0 = ["*"];
 class TdFileUploadBase {
     constructor(_changeDetectorRef) {
         this._changeDetectorRef = _changeDetectorRef;
     }
 }
-/* tslint:disable-next-line */
-const _TdFileUploadMixinBase = mixinControlValueAccessor(mixinDisabled(TdFileUploadBase));
-class TdFileUploadComponent extends _TdFileUploadMixinBase {
+class TdFileUploadComponent {
     constructor(_changeDetectorRef) {
-        super(_changeDetectorRef);
+        this._changeDetectorRef = _changeDetectorRef;
         this._multiple = false;
         this._required = false;
+        this._disabled = false;
         /**
          * defaultColor?: 'accent' | 'primary' | 'warn'
          * Sets browse button color. Uses same color palette accepted as [MatButton] and defaults to 'primary'.
@@ -453,7 +366,7 @@ class TdFileUploadComponent extends _TdFileUploadMixinBase {
          * Event emitted when a file is selected.
          * Emits a [File | FileList] object.
          */
-        this.select = new EventEmitter();
+        this.selectFile = new EventEmitter();
         /**
          * upload?: function
          * Event emitted when upload button is clicked.
@@ -487,6 +400,23 @@ class TdFileUploadComponent extends _TdFileUploadMixinBase {
     get required() {
         return this._required;
     }
+    set disabled(disabled) {
+        this._disabled = disabled;
+        this.onDisabledChange(disabled);
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    writeValue(value) {
+        this.value = value;
+        this._changeDetectorRef.markForCheck();
+    }
+    registerOnChange() {
+        //
+    }
+    registerOnTouched() {
+        //
+    }
     /**
      * Method executed when upload button is clicked.
      */
@@ -500,7 +430,7 @@ class TdFileUploadComponent extends _TdFileUploadMixinBase {
      */
     handleSelect(value) {
         this.value = value;
-        this.select.emit(value);
+        this.selectFile.emit(value);
     }
     /**
      * Methods executed when cancel button is clicked.
@@ -521,52 +451,24 @@ class TdFileUploadComponent extends _TdFileUploadMixinBase {
         }
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdFileUploadComponent.ɵfac = function TdFileUploadComponent_Factory(t) { return new (t || TdFileUploadComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-/** @nocollapse */ /** @nocollapse */ TdFileUploadComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TdFileUploadComponent, selectors: [["td-file-upload"]], contentQueries: function TdFileUploadComponent_ContentQueries(rf, ctx, dirIndex) {
-        if (rf & 1) {
-            i0.ɵɵcontentQuery(dirIndex, TdFileInputLabelDirective, 5);
-        }
-        if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputLabel = _t.first);
-        }
-    }, viewQuery: function TdFileUploadComponent_Query(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵviewQuery(TdFileInputComponent, 5);
-        }
-        if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.fileInput = _t.first);
-        }
-    }, inputs: { disabled: "disabled", value: "value", defaultColor: "defaultColor", activeColor: "activeColor", cancelColor: "cancelColor", multiple: "multiple", required: "required", accept: "accept" }, outputs: { select: "select", upload: "upload", cancel: "cancel" }, features: [i0.ɵɵProvidersFeature([
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef((() => TdFileUploadComponent)),
-                multi: true,
-            },
-        ]), i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0, decls: 2, vars: 2, consts: [[3, "ngModel", "multiple", "disabled", "accept", "color", "ngModelChange", "select", 4, "ngIf"], [4, "ngIf"], [3, "ngModel", "multiple", "disabled", "accept", "color", "ngModelChange", "select"], [3, "cdkPortalOutlet", "ngIf"], ["mat-raised-button", "", "type", "button", 1, "td-file-upload", 3, "color", "keyup.delete", "keyup.backspace", "keyup.escape", "click"], ["fileUpload", ""], ["mat-icon-button", "", "type", "button", 1, "td-file-upload-cancel", 3, "color", "click"]], template: function TdFileUploadComponent_Template(rf, ctx) {
-        if (rf & 1) {
-            i0.ɵɵprojectionDef();
-            i0.ɵɵtemplate(0, TdFileUploadComponent_td_file_input_0_Template, 2, 7, "td-file-input", 0);
-            i0.ɵɵtemplate(1, TdFileUploadComponent_div_1_Template, 7, 2, "div", 1);
-        }
-        if (rf & 2) {
-            i0.ɵɵproperty("ngIf", !ctx.value);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", ctx.value);
-        }
-    }, directives: [i1$2.NgIf, TdFileInputComponent, i1.NgControlStatus, i1.NgModel, i4.CdkPortalOutlet, i1$1.MatButton, i6.MatIcon], styles: [".td-file-upload[_ngcontent-%COMP%]{padding-left:8px;padding-right:8px}.td-file-upload-cancel[_ngcontent-%COMP%]{height:24px;width:24px;position:relative;top:24px;left:-12px}  [dir=rtl] .td-file-upload-cancel{right:-12px;left:0}.td-file-upload-cancel[_ngcontent-%COMP%]   mat-icon[_ngcontent-%COMP%]{border-radius:12px;vertical-align:baseline}.drop-zone[_ngcontent-%COMP%]{border-radius:3px}.drop-zone[_ngcontent-%COMP%]   *[_ngcontent-%COMP%]{pointer-events:none}"], changeDetection: 0 });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdFileUploadComponent, [{
+TdFileUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdFileUploadComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TdFileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TdFileUploadComponent, selector: "td-file-upload", inputs: { defaultColor: "defaultColor", activeColor: "activeColor", cancelColor: "cancelColor", multiple: "multiple", required: "required", accept: "accept", disabled: "disabled", value: "value" }, outputs: { selectFile: "selectFile", upload: "upload", cancel: "cancel" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => TdFileUploadComponent),
+            multi: true,
+        },
+    ], queries: [{ propertyName: "inputLabel", first: true, predicate: TdFileInputLabelDirective, descendants: true }], viewQueries: [{ propertyName: "fileInput", first: true, predicate: TdFileInputComponent, descendants: true }], ngImport: i0, template: "<td-file-input\n  *ngIf=\"!value\"\n  [(ngModel)]=\"value\"\n  [multiple]=\"multiple\"\n  [disabled]=\"disabled\"\n  [accept]=\"accept\"\n  [color]=\"defaultColor\"\n  (selectFile)=\"(handleSelect)\"\n>\n  <ng-template [cdkPortalOutlet]=\"inputLabel\" [ngIf]=\"true\"></ng-template>\n</td-file-input>\n<div *ngIf=\"value\">\n  <button\n    #fileUpload\n    class=\"td-file-upload\"\n    mat-raised-button\n    type=\"button\"\n    [color]=\"activeColor\"\n    (keyup.delete)=\"_cancel()\"\n    (keyup.backspace)=\"_cancel()\"\n    (keyup.escape)=\"_cancel()\"\n    (click)=\"uploadPressed()\"\n  >\n    <ng-content></ng-content>\n  </button>\n  <button\n    mat-icon-button\n    type=\"button\"\n    class=\"td-file-upload-cancel\"\n    [color]=\"cancelColor\"\n    (click)=\"_cancel()\"\n  >\n    <mat-icon>cancel</mat-icon>\n  </button>\n</div>\n", styles: [".td-file-upload{padding-left:8px;padding-right:8px}.td-file-upload-cancel{height:24px;width:24px;position:relative;top:24px;left:-12px}::ng-deep [dir=rtl] .td-file-upload-cancel{right:-12px;left:0}.td-file-upload-cancel mat-icon{border-radius:12px;vertical-align:baseline}.drop-zone{border-radius:3px}.drop-zone *{pointer-events:none}\n"], components: [{ type: TdFileInputComponent, selector: "td-file-input", inputs: ["disabled", "value", "color", "multiple", "accept"], outputs: ["selectFile"] }, { type: i1$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdFileUploadComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef((() => TdFileUploadComponent)),
+                            useExisting: forwardRef(() => TdFileUploadComponent),
                             multi: true,
                         },
-                    ], selector: 'td-file-upload', inputs: ['disabled', 'value'], template: "<td-file-input\n  *ngIf=\"!value\"\n  [(ngModel)]=\"value\"\n  [multiple]=\"multiple\"\n  [disabled]=\"disabled\"\n  [accept]=\"accept\"\n  [color]=\"defaultColor\"\n  (select)=\"handleSelect($event)\"\n>\n  <ng-template [cdkPortalOutlet]=\"inputLabel\" [ngIf]=\"true\"></ng-template>\n</td-file-input>\n<div *ngIf=\"value\">\n  <button\n    #fileUpload\n    class=\"td-file-upload\"\n    mat-raised-button\n    type=\"button\"\n    [color]=\"activeColor\"\n    (keyup.delete)=\"_cancel()\"\n    (keyup.backspace)=\"_cancel()\"\n    (keyup.escape)=\"_cancel()\"\n    (click)=\"uploadPressed()\"\n  >\n    <ng-content></ng-content>\n  </button>\n  <button mat-icon-button type=\"button\" class=\"td-file-upload-cancel\" [color]=\"cancelColor\" (click)=\"_cancel()\">\n    <mat-icon>cancel</mat-icon>\n  </button>\n</div>\n", styles: [".td-file-upload{padding-left:8px;padding-right:8px}.td-file-upload-cancel{height:24px;width:24px;position:relative;top:24px;left:-12px}::ng-deep [dir=rtl] .td-file-upload-cancel{right:-12px;left:0}.td-file-upload-cancel mat-icon{border-radius:12px;vertical-align:baseline}.drop-zone{border-radius:3px}.drop-zone *{pointer-events:none}\n"] }]
-        }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { fileInput: [{
+                    ], selector: 'td-file-upload', template: "<td-file-input\n  *ngIf=\"!value\"\n  [(ngModel)]=\"value\"\n  [multiple]=\"multiple\"\n  [disabled]=\"disabled\"\n  [accept]=\"accept\"\n  [color]=\"defaultColor\"\n  (selectFile)=\"(handleSelect)\"\n>\n  <ng-template [cdkPortalOutlet]=\"inputLabel\" [ngIf]=\"true\"></ng-template>\n</td-file-input>\n<div *ngIf=\"value\">\n  <button\n    #fileUpload\n    class=\"td-file-upload\"\n    mat-raised-button\n    type=\"button\"\n    [color]=\"activeColor\"\n    (keyup.delete)=\"_cancel()\"\n    (keyup.backspace)=\"_cancel()\"\n    (keyup.escape)=\"_cancel()\"\n    (click)=\"uploadPressed()\"\n  >\n    <ng-content></ng-content>\n  </button>\n  <button\n    mat-icon-button\n    type=\"button\"\n    class=\"td-file-upload-cancel\"\n    [color]=\"cancelColor\"\n    (click)=\"_cancel()\"\n  >\n    <mat-icon>cancel</mat-icon>\n  </button>\n</div>\n", styles: [".td-file-upload{padding-left:8px;padding-right:8px}.td-file-upload-cancel{height:24px;width:24px;position:relative;top:24px;left:-12px}::ng-deep [dir=rtl] .td-file-upload-cancel{right:-12px;left:0}.td-file-upload-cancel mat-icon{border-radius:12px;vertical-align:baseline}.drop-zone{border-radius:3px}.drop-zone *{pointer-events:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { fileInput: [{
                 type: ViewChild,
                 args: [TdFileInputComponent]
             }], inputLabel: [{
@@ -579,21 +481,22 @@ class TdFileUploadComponent extends _TdFileUploadMixinBase {
             }], cancelColor: [{
                 type: Input
             }], multiple: [{
-                type: Input,
-                args: ['multiple']
+                type: Input
             }], required: [{
-                type: Input,
-                args: ['required']
+                type: Input
             }], accept: [{
                 type: Input
-            }], select: [{
+            }], disabled: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], selectFile: [{
                 type: Output
             }], upload: [{
                 type: Output
             }], cancel: [{
                 type: Output
-            }] });
-})();
+            }] } });
 
 class TdFileService {
     /**
@@ -625,15 +528,18 @@ class TdFileService {
             headers: new HttpHeaders(headers || {}),
             params: new HttpParams({ fromObject: params || {} }),
         });
-        return this._http.request(req).pipe(tap((event) => this.handleEvent(event)));
+        return this._http
+            .request(req)
+            .pipe(tap((event) => this.handleEvent(event)));
     }
     handleEvent(event) {
+        var _a;
         switch (event.type) {
             case HttpEventType.Sent:
                 this._progressSubject.next(0);
                 break;
             case HttpEventType.UploadProgress:
-                this._progressSubject.next(Math.round((100 * event.loaded) / event.total));
+                this._progressSubject.next(Math.round((100 * event.loaded) / ((_a = event.total) !== null && _a !== void 0 ? _a : 0)));
                 break;
             case HttpEventType.Response:
                 this._progressSubject.next(100);
@@ -643,17 +549,15 @@ class TdFileService {
         }
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdFileService.ɵfac = function TdFileService_Factory(t) { return new (t || TdFileService)(i0.ɵɵinject(i1$3.HttpClient, 8)); };
-/** @nocollapse */ /** @nocollapse */ TdFileService.ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: TdFileService, factory: TdFileService.ɵfac });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdFileService, [{
+TdFileService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdFileService, deps: [{ token: i1$2.HttpClient, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+TdFileService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdFileService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdFileService, decorators: [{
             type: Injectable
-        }], function () {
-        return [{ type: i1$3.HttpClient, decorators: [{
+        }], ctorParameters: function () {
+        return [{ type: i1$2.HttpClient, decorators: [{
                         type: Optional
                     }] }];
-    }, null);
-})();
+    } });
 
 const TD_FILE = [
     TdFileSelectDirective,
@@ -664,35 +568,46 @@ const TD_FILE = [
 ];
 class CovalentFileModule {
 }
-/** @nocollapse */ /** @nocollapse */ CovalentFileModule.ɵfac = function CovalentFileModule_Factory(t) { return new (t || CovalentFileModule)(); };
-/** @nocollapse */ /** @nocollapse */ CovalentFileModule.ɵmod = /** @pureOrBreakMyCode */ i0.ɵɵdefineNgModule({ type: CovalentFileModule });
-/** @nocollapse */ /** @nocollapse */ CovalentFileModule.ɵinj = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjector({ providers: [TdFileService], imports: [[FormsModule, CommonModule, MatIconModule, MatButtonModule, PortalModule]] });
-(function () {
-    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CovalentFileModule, [{
+CovalentFileModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentFileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CovalentFileModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentFileModule, declarations: [TdFileSelectDirective,
+        TdFileDropDirective,
+        TdFileUploadComponent,
+        TdFileInputComponent,
+        TdFileInputLabelDirective], imports: [FormsModule,
+        CommonModule,
+        MatIconModule,
+        MatButtonModule,
+        PortalModule], exports: [TdFileSelectDirective,
+        TdFileDropDirective,
+        TdFileUploadComponent,
+        TdFileInputComponent,
+        TdFileInputLabelDirective] });
+CovalentFileModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentFileModule, providers: [TdFileService], imports: [[
+            FormsModule,
+            CommonModule,
+            MatIconModule,
+            MatButtonModule,
+            PortalModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentFileModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [FormsModule, CommonModule, MatIconModule, MatButtonModule, PortalModule],
+                    imports: [
+                        FormsModule,
+                        CommonModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        PortalModule,
+                    ],
                     declarations: [TD_FILE],
                     exports: [TD_FILE],
                     providers: [TdFileService],
                 }]
-        }], null, null);
-})();
-(function () {
-    (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(CovalentFileModule, { declarations: [TdFileSelectDirective,
-            TdFileDropDirective,
-            TdFileUploadComponent,
-            TdFileInputComponent,
-            TdFileInputLabelDirective], imports: [FormsModule, CommonModule, MatIconModule, MatButtonModule, PortalModule], exports: [TdFileSelectDirective,
-            TdFileDropDirective,
-            TdFileUploadComponent,
-            TdFileInputComponent,
-            TdFileInputLabelDirective] });
-})();
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CovalentFileModule, TdFileDropBase, TdFileDropDirective, TdFileInputBase, TdFileInputComponent, TdFileInputLabelDirective, TdFileSelectDirective, TdFileService, TdFileUploadBase, TdFileUploadComponent, _TdFileDropMixinBase, _TdFileInputMixinBase, _TdFileUploadMixinBase };
+export { CovalentFileModule, TdFileDropBase, TdFileDropDirective, TdFileInputBase, TdFileInputComponent, TdFileInputLabelDirective, TdFileSelectDirective, TdFileService, TdFileUploadBase, TdFileUploadComponent, _TdFileInputMixinBase };
 //# sourceMappingURL=covalent-core-file.mjs.map