@covalent/core 4.0.0-beta.4 → 4.1.0-develop.11

package/fesm2020/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,52 +51,52 @@ 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, [{
-        type: Directive,
-        args: [{
-                selector: '[tdFileSelect]',
-            }]
-    }], function () { return [{ type: i1.NgModel, decorators: [{
-                type: Optional
-            }, {
-                type: Host
-            }] }]; }, { multiple: [{
-            type: Input,
-            args: ['multiple']
-        }], fileSelect: [{
-            type: Output
-        }], multipleBinding: [{
-            type: HostBinding,
-            args: ['attr.multiple']
-        }], onChange: [{
-            type: HostListener,
-            args: ['change', ['$event']]
-        }] }); })();
+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]',
+                }]
+        }], ctorParameters: function () { return [{ type: i1.NgModel, decorators: [{
+                    type: Optional
+                }, {
+                    type: Host
+                }] }]; }, propDecorators: { multiple: [{
+                type: Input
+            }], fileSelect: [{
+                type: Output
+            }], multipleBinding: [{
+                type: HostBinding,
+                args: ['attr.multiple']
+            }], onChange: [{
+                type: HostListener,
+                args: ['change', ['$event']]
+            }] } });
 
 class TdFileDropBase {
 }
-/* tslint:disable-next-line */
-const _TdFileDropMixinBase = mixinDisabled(TdFileDropBase);
-class TdFileDropDirective extends _TdFileDropMixinBase {
-    constructor(_renderer, _element) {
-        super();
+class TdFileDropDirective {
+    constructor(_renderer, _element, _ngZone) {
         this._renderer = _renderer;
         this._element = _element;
+        this._ngZone = _ngZone;
         this._multiple = false;
+        this.disabled = false;
         /**
          * fileDrop?: function
          * Event emitted when a file or files are dropped in host element after being validated.
@@ -124,6 +124,28 @@ class TdFileDropDirective extends _TdFileDropMixinBase {
     get disabledBinding() {
         return this.disabled ? '' : undefined;
     }
+    ngOnInit() {
+        this._ngZone.runOutsideAngular(() => {
+            // Listens to 'dragenter' host event to add animation class 'drop-zone' which can be overriden in host.
+            // Stops event propagation and default action from browser for 'dragenter' event.
+            this._dragenterListener = this._renderer.listen(this._element.nativeElement, 'dragenter', (event) => {
+                if (!this.disabled) {
+                    this._renderer.addClass(this._element.nativeElement, 'drop-zone');
+                }
+                this._stopEvent(event);
+            });
+            // Listens to 'dragleave' host event to remove animation class 'drop-zone'.
+            // Stops event propagation and default action from browser for 'dragleave' event.
+            this._dragleaveListener = this._renderer.listen(this._element.nativeElement, 'dragleave', (event) => {
+                this._renderer.removeClass(this._element.nativeElement, 'drop-zone');
+                this._stopEvent(event);
+            });
+        });
+    }
+    ngOnDestroy() {
+        this._dragenterListener?.();
+        this._dragleaveListener?.();
+    }
     /**
      * Listens to 'drop' host event to get validated transfer items.
      * Emits the 'fileDrop' event with a [FileList] or [File] depending if 'multiple' attr exists in host.
@@ -131,10 +153,14 @@ class TdFileDropDirective extends _TdFileDropMixinBase {
      */
     onDrop(event) {
         if (!this.disabled) {
-            const transfer = event.dataTransfer;
+            const transfer = event.dataTransfer ?? 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);
             }
         }
@@ -147,10 +173,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 {
@@ -158,24 +186,6 @@ class TdFileDropDirective extends _TdFileDropMixinBase {
         }
         this._stopEvent(event);
     }
-    /**
-     * Listens to 'dragenter' host event to add animation class 'drop-zone' which can be overriden in host.
-     * Stops event propagation and default action from browser for 'dragenter' event.
-     */
-    onDragEnter(event) {
-        if (!this.disabled) {
-            this._renderer.addClass(this._element.nativeElement, 'drop-zone');
-        }
-        this._stopEvent(event);
-    }
-    /**
-     * Listens to 'dragleave' host event to remove animation class 'drop-zone'.
-     * Stops event propagation and default action from browser for 'dragleave' event.
-     */
-    onDragLeave(event) {
-        this._renderer.removeClass(this._element.nativeElement, 'drop-zone');
-        this._stopEvent(event);
-    }
     /**
      * Validates if the transfer item types are 'Files'.
      */
@@ -193,64 +203,49 @@ 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, [{
-        type: Directive,
-        args: [{
-                selector: '[tdFileDrop]',
-                inputs: ['disabled'],
-            }]
-    }], function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, { multiple: [{
-            type: Input,
-            args: ['multiple']
-        }], fileDrop: [{
-            type: Output
-        }], multipleBinding: [{
-            type: HostBinding,
-            args: ['attr.multiple']
-        }], disabledBinding: [{
-            type: HostBinding,
-            args: ['attr.disabled']
-        }], onDrop: [{
-            type: HostListener,
-            args: ['drop', ['$event']]
-        }], onDragOver: [{
-            type: HostListener,
-            args: ['dragover', ['$event']]
-        }], onDragEnter: [{
-            type: HostListener,
-            args: ['dragenter', ['$event']]
-        }], onDragLeave: [{
-            type: HostListener,
-            args: ['dragleave', ['$event']]
-        }] }); })();
+TdFileDropDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdFileDropDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], 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)" }, 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]' }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { multiple: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], fileDrop: [{
+                type: Output
+            }], multipleBinding: [{
+                type: HostBinding,
+                args: ['attr.multiple']
+            }], disabledBinding: [{
+                type: HostBinding,
+                args: ['attr.disabled']
+            }], onDrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }], onDragOver: [{
+                type: HostListener,
+                args: ['dragover', ['$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, [{
-        type: Directive,
-        args: [{
-                selector: '[td-file-input-label]ng-template',
-            }]
-    }], function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; }, null); })();
+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: '[tdFileInputLabel]ng-template',
+                }]
+        }], 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) {
@@ -262,7 +257,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;
@@ -282,7 +277,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].
@@ -304,107 +299,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, [{
-        type: Component,
-        args: [{ changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        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: [{
-            type: ViewChild,
-            args: ['fileInput', { static: true }]
-        }], color: [{
-            type: Input
-        }], multiple: [{
-            type: Input,
-            args: ['multiple']
-        }], accept: [{
-            type: Input
-        }], select: [{
-            type: Output
-        }] }); })();
+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),
+                            multi: true,
+                        },
+                    ], 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
+            }], accept: [{
+                type: Input
+            }], 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'.
@@ -425,7 +360,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.
@@ -459,6 +394,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.
      */
@@ -472,7 +424,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.
@@ -493,68 +445,52 @@ 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, [{
-        type: Component,
-        args: [{ changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        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: [{
-            type: ViewChild,
-            args: [TdFileInputComponent]
-        }], inputLabel: [{
-            type: ContentChild,
-            args: [TdFileInputLabelDirective]
-        }], defaultColor: [{
-            type: Input
-        }], activeColor: [{
-            type: Input
-        }], cancelColor: [{
-            type: Input
-        }], multiple: [{
-            type: Input,
-            args: ['multiple']
-        }], required: [{
-            type: Input,
-            args: ['required']
-        }], accept: [{
-            type: Input
-        }], select: [{
-            type: Output
-        }], upload: [{
-            type: Output
-        }], cancel: [{
-            type: Output
-        }] }); })();
+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),
+                            multi: true,
+                        },
+                    ], 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: [{
+                type: ContentChild,
+                args: [TdFileInputLabelDirective]
+            }], defaultColor: [{
+                type: Input
+            }], activeColor: [{
+                type: Input
+            }], cancelColor: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], accept: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], selectFile: [{
+                type: Output
+            }], upload: [{
+                type: Output
+            }], cancel: [{
+                type: Output
+            }] } });
 
 class TdFileService {
     /**
@@ -586,7 +522,9 @@ 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) {
         switch (event.type) {
@@ -594,7 +532,7 @@ class TdFileService {
                 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) / (event.total ?? 0)));
                 break;
             case HttpEventType.Response:
                 this._progressSubject.next(100);
@@ -604,13 +542,13 @@ 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, [{
-        type: Injectable
-    }], function () { return [{ type: i1$3.HttpClient, decorators: [{
-                type: Optional
-            }] }]; }, null); })();
+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
+        }], ctorParameters: function () { return [{ type: i1$2.HttpClient, decorators: [{
+                    type: Optional
+                }] }]; } });
 
 const TD_FILE = [
     TdFileSelectDirective,
@@ -621,31 +559,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, [{
-        type: NgModule,
-        args: [{
-                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,
+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,
+        TdFileInputLabelDirective], imports: [FormsModule,
+        CommonModule,
+        MatIconModule,
+        MatButtonModule,
+        PortalModule], exports: [TdFileSelectDirective,
         TdFileDropDirective,
         TdFileUploadComponent,
         TdFileInputComponent,
-        TdFileInputLabelDirective] }); })();
+        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,
+                    ],
+                    declarations: [TD_FILE],
+                    exports: [TD_FILE],
+                    providers: [TdFileService],
+                }]
+        }] });
 
 /**
  * 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