blob: 9ec34fe7e94685b490dcd32a8c61777181b9271e [file] [log] [blame]
import * as tslib_1 from "tslib";
import { Directive, Input, Output, EventEmitter, HostListener, HostBinding, Host, Optional, ElementRef, Renderer2, Component, ChangeDetectionStrategy, ViewChild, TemplateRef, ViewContainerRef, ChangeDetectorRef, forwardRef, ContentChild, Injectable, NgModule } from '@angular/core';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { NgModel, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { mixinDisabled, mixinControlValueAccessor } from '@covalent/core/common';
import { TemplatePortalDirective, PortalModule } from '@angular/cdk/portal';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import { CommonModule } from '@angular/common';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var TdFileSelectDirective = /** @class */ (function () {
/**
* @param {?} model
*/
function TdFileSelectDirective(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.onFileSelect = new EventEmitter();
}
Object.defineProperty(TdFileSelectDirective.prototype, "multiple", {
/**
* 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.
* @param {?} multiple
* @return {?}
*/
set: function (multiple) {
this._multiple = coerceBooleanProperty(multiple);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TdFileSelectDirective.prototype, "multipleBinding", {
/**
* Binds native 'multiple' attribute if [multiple] property is 'true'.
* @return {?}
*/
get: function () {
return this._multiple ? '' : undefined;
},
enumerable: true,
configurable: true
});
/**
* Listens to 'change' host event to get [HTMLInputElement] files.
* Emits the 'onFileSelect' event with a [FileList] or [File] depending if 'multiple' attr exists in host.
* Uses [(ngModel)] if declared, instead of emitting 'onFileSelect' event.
* @param {?} event
* @return {?}
*/
TdFileSelectDirective.prototype.onChange = function (event) {
if (event.target instanceof HTMLInputElement) {
var /** @type {?} */ fileInputEl = ((event.target));
var /** @type {?} */ files = fileInputEl.files;
if (files.length) {
var /** @type {?} */ value = this._multiple ? (files.length > 1 ? files : files[0]) : files[0];
this.model ? this.model.update.emit(value) : this.onFileSelect.emit(value);
}
}
};
return TdFileSelectDirective;
}());
TdFileSelectDirective.decorators = [
{ type: Directive, args: [{
selector: '[tdFileSelect]',
},] },
];
/** @nocollapse */
TdFileSelectDirective.ctorParameters = function () { return [
{ type: NgModel, decorators: [{ type: Optional }, { type: Host },] },
]; };
TdFileSelectDirective.propDecorators = {
"multiple": [{ type: Input, args: ['multiple',] },],
"onFileSelect": [{ type: Output, args: ['fileSelect',] },],
"multipleBinding": [{ type: HostBinding, args: ['attr.multiple',] },],
"onChange": [{ type: HostListener, args: ['change', ['$event'],] },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var TdFileDropBase = /** @class */ (function () {
function TdFileDropBase() {
}
return TdFileDropBase;
}());
/* tslint:disable-next-line */
var _TdFileDropMixinBase = mixinDisabled(TdFileDropBase);
var TdFileDropDirective = /** @class */ (function (_super) {
tslib_1.__extends(TdFileDropDirective, _super);
/**
* @param {?} _renderer
* @param {?} _element
*/
function TdFileDropDirective(_renderer, _element) {
var _this = _super.call(this) || this;
_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.onFileDrop = new EventEmitter();
return _this;
}
Object.defineProperty(TdFileDropDirective.prototype, "multiple", {
/**
* 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.
* @param {?} multiple
* @return {?}
*/
set: function (multiple) {
this._multiple = coerceBooleanProperty(multiple);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TdFileDropDirective.prototype, "multipleBinding", {
/**
* Binds native 'multiple' attribute if [multiple] property is 'true'.
* @return {?}
*/
get: function () {
return this._multiple ? '' : undefined;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TdFileDropDirective.prototype, "disabledBinding", {
/**
* Binds native 'disabled' attribute if [disabled] property is 'true'.
* @return {?}
*/
get: function () {
return this.disabled ? '' : undefined;
},
enumerable: true,
configurable: true
});
/**
* Listens to 'drop' host event to get validated transfer items.
* Emits the 'onFileDrop' event with a [FileList] or [File] depending if 'multiple' attr exists in host.
* Stops event propagation and default action from browser for 'drop' event.
* @param {?} event
* @return {?}
*/
TdFileDropDirective.prototype.onDrop = function (event) {
if (!this.disabled) {
var /** @type {?} */ transfer = ((event)).dataTransfer;
var /** @type {?} */ files = transfer.files;
if (files.length) {
var /** @type {?} */ value = this._multiple ? (files.length > 1 ? files : files[0]) : files[0];
this.onFileDrop.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.
* @param {?} event
* @return {?}
*/
TdFileDropDirective.prototype.onDragOver = function (event) {
var /** @type {?} */ 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.
* @param {?} event
* @return {?}
*/
TdFileDropDirective.prototype.onDragEnter = function (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.
* @param {?} event
* @return {?}
*/
TdFileDropDirective.prototype.onDragLeave = function (event) {
this._renderer.removeClass(this._element.nativeElement, 'drop-zone');
this._stopEvent(event);
};
/**
* Validates if the transfer item types are 'Files'.
* @param {?} types
* @return {?}
*/
TdFileDropDirective.prototype._typeCheck = function (types) {
var /** @type {?} */ dropEffect = 'none';
if (types) {
if ((((types)).contains && ((types)).contains('Files'))
|| (((types)).indexOf && ((types)).indexOf('Files') !== -1)) {
dropEffect = 'copy';
}
}
return dropEffect;
};
/**
* @param {?} event
* @return {?}
*/
TdFileDropDirective.prototype._stopEvent = function (event) {
event.preventDefault();
event.stopPropagation();
};
return TdFileDropDirective;
}(_TdFileDropMixinBase));
TdFileDropDirective.decorators = [
{ type: Directive, args: [{
selector: '[tdFileDrop]',
inputs: ['disabled'],
},] },
];
/** @nocollapse */
TdFileDropDirective.ctorParameters = function () { return [
{ type: Renderer2, },
{ type: ElementRef, },
]; };
TdFileDropDirective.propDecorators = {
"multiple": [{ type: Input, args: ['multiple',] },],
"onFileDrop": [{ type: Output, args: ['fileDrop',] },],
"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'],] },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var TdFileInputLabelDirective = /** @class */ (function (_super) {
tslib_1.__extends(TdFileInputLabelDirective, _super);
/**
* @param {?} templateRef
* @param {?} viewContainerRef
*/
function TdFileInputLabelDirective(templateRef, viewContainerRef) {
return _super.call(this, templateRef, viewContainerRef) || this;
}
return TdFileInputLabelDirective;
}(TemplatePortalDirective));
TdFileInputLabelDirective.decorators = [
{ type: Directive, args: [{
selector: '[td-file-input-label]ng-template',
},] },
];
/** @nocollapse */
TdFileInputLabelDirective.ctorParameters = function () { return [
{ type: TemplateRef, },
{ type: ViewContainerRef, },
]; };
var TdFileInputBase = /** @class */ (function () {
/**
* @param {?} _changeDetectorRef
*/
function TdFileInputBase(_changeDetectorRef) {
this._changeDetectorRef = _changeDetectorRef;
}
return TdFileInputBase;
}());
/* tslint:disable-next-line */
var _TdFileInputMixinBase = mixinControlValueAccessor(mixinDisabled(TdFileInputBase));
var TdFileInputComponent = /** @class */ (function (_super) {
tslib_1.__extends(TdFileInputComponent, _super);
/**
* @param {?} _renderer
* @param {?} _changeDetectorRef
*/
function TdFileInputComponent(_renderer, _changeDetectorRef) {
var _this = _super.call(this, _changeDetectorRef) || this;
_this._renderer = _renderer;
_this._multiple = false;
/**
* select?: function
* Event emitted a file is selected
* Emits a [File | FileList] object.
*/
_this.onSelect = new EventEmitter();
return _this;
}
Object.defineProperty(TdFileInputComponent.prototype, "inputElement", {
/**
* @return {?}
*/
get: function () {
return this._inputElement.nativeElement;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TdFileInputComponent.prototype, "multiple", {
/**
* @return {?}
*/
get: function () {
return this._multiple;
},
/**
* multiple?: boolean
* Sets if multiple files can be dropped/selected at once in [TdFileInputComponent].
* @param {?} multiple
* @return {?}
*/
set: function (multiple) {
this._multiple = coerceBooleanProperty(multiple);
},
enumerable: true,
configurable: true
});
/**
* Method executed when a file is selected.
* @param {?} files
* @return {?}
*/
TdFileInputComponent.prototype.handleSelect = function (files) {
this.writeValue(files);
this.onSelect.emit(files);
};
/**
* Used to clear the selected files from the [TdFileInputComponent].
* @return {?}
*/
TdFileInputComponent.prototype.clear = function () {
this.writeValue(undefined);
this._renderer.setProperty(this.inputElement, 'value', '');
};
/**
* Method executed when the disabled value changes
* @param {?} v
* @return {?}
*/
TdFileInputComponent.prototype.onDisabledChange = function (v) {
if (v) {
this.clear();
}
};
return TdFileInputComponent;
}(_TdFileInputMixinBase));
TdFileInputComponent.decorators = [
{ type: Component, args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(function () { return TdFileInputComponent; }),
multi: true,
}],
selector: 'td-file-input',
inputs: ['disabled', 'value'],
styles: [":host{ }\n :host .td-file-input{\n padding-left:8px;\n padding-right:8px; }\n :host input.td-file-input-hidden{\n display:none; }\n :host .drop-zone{\n border-radius:3px; }\n :host .drop-zone *{\n pointer-events:none; }\n"],
template: "<div>\n <button 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 <ng-content></ng-content>\n </button>\n <input #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</div>",
},] },
];
/** @nocollapse */
TdFileInputComponent.ctorParameters = function () { return [
{ type: Renderer2, },
{ type: ChangeDetectorRef, },
]; };
TdFileInputComponent.propDecorators = {
"_inputElement": [{ type: ViewChild, args: ['fileInput',] },],
"color": [{ type: Input, args: ['color',] },],
"multiple": [{ type: Input, args: ['multiple',] },],
"accept": [{ type: Input, args: ['accept',] },],
"onSelect": [{ type: Output, args: ['select',] },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var TdFileUploadBase = /** @class */ (function () {
/**
* @param {?} _changeDetectorRef
*/
function TdFileUploadBase(_changeDetectorRef) {
this._changeDetectorRef = _changeDetectorRef;
}
return TdFileUploadBase;
}());
/* tslint:disable-next-line */
var _TdFileUploadMixinBase = mixinControlValueAccessor(mixinDisabled(TdFileUploadBase));
var TdFileUploadComponent = /** @class */ (function (_super) {
tslib_1.__extends(TdFileUploadComponent, _super);
/**
* @param {?} _changeDetectorRef
*/
function TdFileUploadComponent(_changeDetectorRef) {
var _this = _super.call(this, _changeDetectorRef) || this;
_this._multiple = false;
_this._required = false;
/**
* defaultColor?: string
* Sets browse button color. Uses same color palette accepted as [MatButton] and defaults to 'primary'.
*/
_this.defaultColor = 'primary';
/**
* activeColor?: string
* Sets upload button color. Uses same color palette accepted as [MatButton] and defaults to 'accent'.
*/
_this.activeColor = 'accent';
/**
* cancelColor?: string
* 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.onSelect = new EventEmitter();
/**
* upload?: function
* Event emitted when upload button is clicked.
* Emits a [File | FileList] object.
*/
_this.onUpload = new EventEmitter();
/**
* cancel?: function
* Event emitted when cancel button is clicked.
*/
_this.onCancel = new EventEmitter();
return _this;
}
Object.defineProperty(TdFileUploadComponent.prototype, "multiple", {
/**
* @return {?}
*/
get: function () {
return this._multiple;
},
/**
* multiple?: boolean
* Sets if multiple files can be dropped/selected at once in [TdFileUploadComponent].
* @param {?} multiple
* @return {?}
*/
set: function (multiple) {
this._multiple = coerceBooleanProperty(multiple);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TdFileUploadComponent.prototype, "required", {
/**
* @return {?}
*/
get: function () {
return this._required;
},
/**
* required?: boolean
* Forces at least one file upload.
* Defaults to 'false'
* @param {?} required
* @return {?}
*/
set: function (required) {
this._required = coerceBooleanProperty(required);
},
enumerable: true,
configurable: true
});
/**
* Method executed when upload button is clicked.
* @return {?}
*/
TdFileUploadComponent.prototype.uploadPressed = function () {
if (this.value) {
this.onUpload.emit(this.value);
}
};
/**
* Method executed when a file is selected.
* @param {?} value
* @return {?}
*/
TdFileUploadComponent.prototype.handleSelect = function (value) {
this.value = value;
this.onSelect.emit(value);
};
/**
* Methods executed when cancel button is clicked.
* Clears files.
* @return {?}
*/
TdFileUploadComponent.prototype.cancel = function () {
this.value = undefined;
this.onCancel.emit(undefined);
// check if the file input is rendered before clearing it
if (this.fileInput) {
this.fileInput.clear();
}
};
/**
* Method executed when the disabled value changes
* @param {?} v
* @return {?}
*/
TdFileUploadComponent.prototype.onDisabledChange = function (v) {
if (v) {
this.cancel();
}
};
return TdFileUploadComponent;
}(_TdFileUploadMixinBase));
TdFileUploadComponent.decorators = [
{ type: Component, args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(function () { return TdFileUploadComponent; }),
multi: true,
}],
selector: 'td-file-upload',
inputs: ['disabled', 'value'],
styles: [".td-file-upload{\n padding-left:8px;\n padding-right:8px; }\n.td-file-upload-cancel{\n height:24px;\n width:24px;\n position:relative;\n top:24px;\n left:-12px; }\n ::ng-deep [dir='rtl'] .td-file-upload-cancel{\n right:-12px;\n left:0; }\n .td-file-upload-cancel mat-icon{\n border-radius:12px;\n vertical-align:baseline; }\n.drop-zone{\n border-radius:3px; }\n .drop-zone *{\n pointer-events:none; }\n"],
template: "<td-file-input *ngIf=\"!value\"\n [(ngModel)]=\"value\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n [accept]=\"accept\"\n [color]=\"defaultColor\"\n (select)=\"handleSelect($event)\">\n <ng-template [cdkPortalHost]=\"inputLabel\" [ngIf]=\"true\"></ng-template>\n</td-file-input>\n<div *ngIf=\"value\">\n <button #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 <ng-content></ng-content>\n </button>\n <button mat-icon-button\n type=\"button\"\n class=\"td-file-upload-cancel\"\n [color]=\"cancelColor\"\n (click)=\"cancel()\">\n <mat-icon>cancel</mat-icon>\n </button>\n</div>",
},] },
];
/** @nocollapse */
TdFileUploadComponent.ctorParameters = function () { return [
{ type: ChangeDetectorRef, },
]; };
TdFileUploadComponent.propDecorators = {
"fileInput": [{ type: ViewChild, args: [TdFileInputComponent,] },],
"inputLabel": [{ type: ContentChild, args: [TdFileInputLabelDirective,] },],
"defaultColor": [{ type: Input, args: ['defaultColor',] },],
"activeColor": [{ type: Input, args: ['activeColor',] },],
"cancelColor": [{ type: Input, args: ['cancelColor',] },],
"multiple": [{ type: Input, args: ['multiple',] },],
"required": [{ type: Input, args: ['required',] },],
"accept": [{ type: Input, args: ['accept',] },],
"onSelect": [{ type: Output, args: ['select',] },],
"onUpload": [{ type: Output, args: ['upload',] },],
"onCancel": [{ type: Output, args: ['cancel',] },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @record
*/
var TdFileService = /** @class */ (function () {
function TdFileService() {
this._progressSubject = new Subject();
this._progressObservable = this._progressSubject.asObservable();
}
Object.defineProperty(TdFileService.prototype, "progress", {
/**
* Gets progress observable to keep track of the files being uploaded.
* Needs to be supported by backend.
* @return {?}
*/
get: function () {
return this._progressObservable;
},
enumerable: true,
configurable: true
});
/**
* params:
* - options: IUploadOptions {
* url: string,
* method: 'post' | 'put',
* file?: File,
* headers?: {[key: string]: string},
* formData?: FormData
* }
*
* Uses underlying [XMLHttpRequest] to upload a file to a url.
* Will be depricated when angular fixes [Http] to allow [FormData] as body.
* @param {?} options
* @return {?}
*/
TdFileService.prototype.upload = function (options) {
var _this = this;
return new Observable(function (subscriber) {
var /** @type {?} */ xhr = new XMLHttpRequest();
var /** @type {?} */ formData = new FormData();
if (options.file !== undefined) {
formData.append('file', options.file);
}
else if (options.formData !== undefined) {
formData = options.formData;
}
else {
return subscriber.error('For [IUploadOptions] you have to set either the [file] or the [formData] property.');
}
xhr.upload.onprogress = function (event) {
var /** @type {?} */ progress = 0;
if (event.lengthComputable) {
progress = Math.round(event.loaded / event.total * 100);
}
_this._progressSubject.next(progress);
};
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
subscriber.next(xhr.response);
subscriber.complete();
}
else {
subscriber.error(xhr.response);
}
}
};
xhr.open(options.method, options.url, true);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
if (options.headers) {
for (var /** @type {?} */ key in options.headers) {
xhr.setRequestHeader(key, options.headers[key]);
}
}
xhr.send(formData);
});
};
return TdFileService;
}());
TdFileService.decorators = [
{ type: Injectable },
];
/** @nocollapse */
TdFileService.ctorParameters = function () { return []; };
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var TD_FILE = [
TdFileSelectDirective,
TdFileDropDirective,
TdFileUploadComponent,
TdFileInputComponent,
TdFileInputLabelDirective,
];
var CovalentFileModule = /** @class */ (function () {
function CovalentFileModule() {
}
return CovalentFileModule;
}());
CovalentFileModule.decorators = [
{ type: NgModule, args: [{
imports: [
FormsModule,
CommonModule,
MatIconModule,
MatButtonModule,
PortalModule,
],
declarations: [
TD_FILE,
],
exports: [
TD_FILE,
],
providers: [
TdFileService,
],
},] },
];
/** @nocollapse */
CovalentFileModule.ctorParameters = function () { return []; };
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Generated bundle index. Do not edit.
*/
export { CovalentFileModule, TdFileDropBase, _TdFileDropMixinBase, TdFileDropDirective, TdFileSelectDirective, TdFileInputLabelDirective, TdFileInputBase, _TdFileInputMixinBase, TdFileInputComponent, TdFileUploadBase, _TdFileUploadMixinBase, TdFileUploadComponent, TdFileService };
//# sourceMappingURL=covalent-core-file.js.map