@covalent/core 3.1.2-beta.6 → 4.0.0-beta.1

package/fesm2020/covalent-core-file.mjs

@@ -0,0 +1,651 @@
+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 { 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 { TemplatePortalDirective, PortalModule } from '@angular/cdk/portal';
+import * as i6 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 { HttpRequest, HttpHeaders, HttpParams, HttpEventType } from '@angular/common/http';
+import { Subject } from 'rxjs';
+import { tap } from 'rxjs/operators';
+
+class TdFileSelectDirective {
+    constructor(model) {
+        this.model = model;
+        this._multiple = false;
+        /**
+         * fileSelect?: function
+         * Event emitted when a file or files are selected in host [HTMLInputElement].
+         * Emits a [FileList | File] object.
+         * Alternative to not use [(ngModel)].
+         */
+        this.fileSelect = new EventEmitter();
+    }
+    /**
+     * multiple?: boolean
+     * Sets whether multiple files can be selected at once in host element, or just a single file.
+     * Can also be 'multiple' native attribute.
+     */
+    set multiple(multiple) {
+        this._multiple = coerceBooleanProperty(multiple);
+    }
+    /**
+     * Binds native 'multiple' attribute if [multiple] property is 'true'.
+     */
+    get multipleBinding() {
+        return this._multiple ? '' : undefined;
+    }
+    /**
+     * Listens to 'change' host event to get [HTMLInputElement] files.
+     * Emits the 'fileSelect' event with a [FileList] or [File] depending if 'multiple' attr exists in host.
+     * Uses [(ngModel)] if declared, instead of emitting 'fileSelect' event.
+     */
+    onChange(event) {
+        if (event.target instanceof HTMLInputElement) {
+            const fileInputEl = event.target;
+            const files = fileInputEl.files;
+            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);
+            }
+        }
+    }
+}
+/** @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']]
+        }] }); })();
+
+class TdFileDropBase {
+}
+/* tslint:disable-next-line */
+const _TdFileDropMixinBase = mixinDisabled(TdFileDropBase);
+class TdFileDropDirective extends _TdFileDropMixinBase {
+    constructor(_renderer, _element) {
+        super();
+        this._renderer = _renderer;
+        this._element = _element;
+        this._multiple = false;
+        /**
+         * fileDrop?: function
+         * Event emitted when a file or files are dropped in host element after being validated.
+         * Emits a [FileList | File] object.
+         */
+        this.fileDrop = new EventEmitter();
+    }
+    /**
+     * multiple?: boolean
+     * Sets whether multiple files can be dropped at once in host element, or just a single file.
+     * Can also be 'multiple' native attribute.
+     */
+    set multiple(multiple) {
+        this._multiple = coerceBooleanProperty(multiple);
+    }
+    /**
+     * Binds native 'multiple' attribute if [multiple] property is 'true'.
+     */
+    get multipleBinding() {
+        return this._multiple ? '' : undefined;
+    }
+    /**
+     * Binds native 'disabled' attribute if [disabled] property is 'true'.
+     */
+    get disabledBinding() {
+        return this.disabled ? '' : undefined;
+    }
+    /**
+     * 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.
+     * Stops event propagation and default action from browser for 'drop' event.
+     */
+    onDrop(event) {
+        if (!this.disabled) {
+            const transfer = event.dataTransfer;
+            const files = transfer.files;
+            if (files.length) {
+                const value = this._multiple ? (files.length > 1 ? files : files[0]) : files[0];
+                this.fileDrop.emit(value);
+            }
+        }
+        this._renderer.removeClass(this._element.nativeElement, 'drop-zone');
+        this._stopEvent(event);
+    }
+    /**
+     * Listens to 'dragover' host event to validate transfer items.
+     * Checks if 'multiple' attr exists in host to allow multiple file drops.
+     * Stops event propagation and default action from browser for 'dragover' event.
+     */
+    onDragOver(event) {
+        const transfer = event.dataTransfer;
+        transfer.dropEffect = this._typeCheck(transfer.types);
+        if (this.disabled ||
+            (!this._multiple && ((transfer.items && transfer.items.length > 1) || transfer.mozItemCount > 1))) {
+            transfer.dropEffect = 'none';
+        }
+        else {
+            transfer.dropEffect = 'copy';
+        }
+        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'.
+     */
+    _typeCheck(types) {
+        let dropEffect = 'none';
+        if (types &&
+            ((types.contains && types.contains('Files')) ||
+                (types.indexOf && types.indexOf('Files') !== -1))) {
+            dropEffect = 'copy';
+        }
+        return dropEffect;
+    }
+    _stopEvent(event) {
+        event.preventDefault();
+        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']]
+        }] }); })();
+
+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); })();
+class TdFileInputBase {
+    constructor(_changeDetectorRef) {
+        this._changeDetectorRef = _changeDetectorRef;
+    }
+}
+/* tslint:disable-next-line */
+const _TdFileInputMixinBase = mixinControlValueAccessor(mixinDisabled(TdFileInputBase));
+class TdFileInputComponent extends _TdFileInputMixinBase {
+    constructor(_renderer, _changeDetectorRef) {
+        super(_changeDetectorRef);
+        this._renderer = _renderer;
+        this._multiple = false;
+        /**
+         * select?: function
+         * Event emitted a file is selected
+         * Emits a [File | FileList] object.
+         */
+        this.select = new EventEmitter();
+    }
+    get inputElement() {
+        return this._inputElement.nativeElement;
+    }
+    /**
+     * multiple?: boolean
+     * Sets if multiple files can be dropped/selected at once in [TdFileInputComponent].
+     */
+    set multiple(multiple) {
+        this._multiple = coerceBooleanProperty(multiple);
+    }
+    get multiple() {
+        return this._multiple;
+    }
+    /**
+     * Method executed when a file is selected.
+     */
+    handleSelect(files) {
+        this.writeValue(files);
+        this.select.emit(files);
+    }
+    /**
+     * Used to clear the selected files from the [TdFileInputComponent].
+     */
+    clear() {
+        this.writeValue(undefined);
+        this._renderer.setProperty(this.inputElement, 'value', '');
+    }
+    /** Method executed when the disabled value changes */
+    onDisabledChange(v) {
+        if (v) {
+            this.clear();
+        }
+    }
+    /**
+     * Sets disable to the component. Implemented as part of ControlValueAccessor.
+     */
+    setDisabledState(isDisabled) {
+        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
+        }] }); })();
+
+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 {
+    constructor(_changeDetectorRef) {
+        super(_changeDetectorRef);
+        this._multiple = false;
+        this._required = false;
+        /**
+         * defaultColor?: 'accent' | 'primary' | 'warn'
+         * Sets browse button color. Uses same color palette accepted as [MatButton] and defaults to 'primary'.
+         */
+        this.defaultColor = 'primary';
+        /**
+         * activeColor?: 'accent' | 'primary' | 'warn'
+         * Sets upload button color. Uses same color palette accepted as [MatButton] and defaults to 'accent'.
+         */
+        this.activeColor = 'accent';
+        /**
+         * cancelColor?: 'accent' | 'primary' | 'warn'
+         * Sets cancel button color. Uses same color palette accepted as [MatButton] and defaults to 'warn'.
+         */
+        this.cancelColor = 'warn';
+        /**
+         * select?: function
+         * Event emitted when a file is selected.
+         * Emits a [File | FileList] object.
+         */
+        this.select = new EventEmitter();
+        /**
+         * upload?: function
+         * Event emitted when upload button is clicked.
+         * Emits a [File | FileList] object.
+         */
+        this.upload = new EventEmitter();
+        /**
+         * cancel?: function
+         * Event emitted when cancel button is clicked.
+         */
+        this.cancel = new EventEmitter();
+    }
+    /**
+     * multiple?: boolean
+     * Sets if multiple files can be dropped/selected at once in [TdFileUploadComponent].
+     */
+    set multiple(multiple) {
+        this._multiple = coerceBooleanProperty(multiple);
+    }
+    get multiple() {
+        return this._multiple;
+    }
+    /**
+     * required?: boolean
+     * Forces at least one file upload.
+     * Defaults to 'false'
+     */
+    set required(required) {
+        this._required = coerceBooleanProperty(required);
+    }
+    get required() {
+        return this._required;
+    }
+    /**
+     * Method executed when upload button is clicked.
+     */
+    uploadPressed() {
+        if (this.value) {
+            this.upload.emit(this.value);
+        }
+    }
+    /**
+     * Method executed when a file is selected.
+     */
+    handleSelect(value) {
+        this.value = value;
+        this.select.emit(value);
+    }
+    /**
+     * Methods executed when cancel button is clicked.
+     * Clears files.
+     */
+    _cancel() {
+        this.value = undefined;
+        this.cancel.emit();
+        // check if the file input is rendered before clearing it
+        if (this.fileInput) {
+            this.fileInput.clear();
+        }
+    }
+    /** Method executed when the disabled value changes */
+    onDisabledChange(v) {
+        if (v) {
+            this._cancel();
+        }
+    }
+}
+/** @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
+        }] }); })();
+
+class TdFileService {
+    /**
+     * Creates a new instance
+     * @param _http the http client instance
+     * @breaking-change 3.0.0 remove 'Optional' decorator once the legay upload method is removed
+     */
+    constructor(_http) {
+        this._http = _http;
+        this._progressSubject = new Subject();
+        this._progressObservable = this._progressSubject.asObservable();
+    }
+    /**
+     * Gets progress observable to keep track of the files being uploaded.
+     * Needs to be supported by backend.
+     */
+    get progress() {
+        return this._progressObservable;
+    }
+    /**
+     * Uploads a file to a URL.
+     */
+    send(url, method, body, { headers, params } = {}) {
+        if (!this._http) {
+            throw new Error('The HttpClient module needs to be imported at root module level');
+        }
+        const req = new HttpRequest(method.toUpperCase(), url, body, {
+            reportProgress: true,
+            headers: new HttpHeaders(headers || {}),
+            params: new HttpParams({ fromObject: params || {} }),
+        });
+        return this._http.request(req).pipe(tap((event) => this.handleEvent(event)));
+    }
+    handleEvent(event) {
+        switch (event.type) {
+            case HttpEventType.Sent:
+                this._progressSubject.next(0);
+                break;
+            case HttpEventType.UploadProgress:
+                this._progressSubject.next(Math.round((100 * event.loaded) / event.total));
+                break;
+            case HttpEventType.Response:
+                this._progressSubject.next(100);
+                break;
+            default:
+                break;
+        }
+    }
+}
+/** @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); })();
+
+const TD_FILE = [
+    TdFileSelectDirective,
+    TdFileDropDirective,
+    TdFileUploadComponent,
+    TdFileInputComponent,
+    TdFileInputLabelDirective,
+];
+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,
+        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 };
+//# sourceMappingURL=covalent-core-file.mjs.map