@covalent/core
Version:
Core Teradata UI Platform for layouts, icons, custom components and themes. This should be added as a dependency for any project that wants to use layouts, icons and themes for Angular Material.
653 lines (644 loc) • 32.4 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Directive, Optional, Host, Input, Output, HostBinding, HostListener, forwardRef, ElementRef, Component, ChangeDetectionStrategy, ViewChild, ContentChild, Injectable, NgModule } from '@angular/core';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i1 from '@angular/forms';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import * as i5 from '@angular/cdk/portal';
import { TemplatePortalDirective, PortalModule } from '@angular/cdk/portal';
import * as i3 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i4 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { ENTER } from '@angular/cdk/keycodes';
import { Subject, merge, fromEvent } from 'rxjs';
import { filter, takeUntil, tap } from 'rxjs/operators';
import { mixinControlValueAccessor, mixinDisabled } from '@covalent/core/common';
import * as i1$1 from '@angular/common/http';
import { HttpRequest, HttpHeaders, HttpParams, HttpEventType } from '@angular/common/http';
class TdFileSelectDirective {
model;
_multiple = false;
/**
* 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);
}
/**
* fileSelect?: function
* Event emitted when a file or files are selected in host [HTMLInputElement].
* Emits a [FileList | File] object.
* Alternative to not use [(ngModel)].
*/
fileSelect = new EventEmitter();
/**
* Binds native 'multiple' attribute if [multiple] property is 'true'.
*/
get multipleBinding() {
return this._multiple ? '' : undefined;
}
constructor(model) {
this.model = model;
}
/**
* 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 || 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);
}
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdFileSelectDirective, deps: [{ token: i1.NgModel, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.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: "17.1.2", ngImport: i0, type: TdFileSelectDirective, decorators: [{
type: Directive,
args: [{
selector: '[tdFileSelect]',
}]
}], ctorParameters: () => [{ 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 {
}
class TdFileDropDirective {
_renderer;
_element;
_ngZone;
_multiple = false;
_dragenterListener;
_dragleaveListener;
_dragoverListener;
/**
* 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);
}
disabled = false;
/**
* fileDrop?: function
* Event emitted when a file or files are dropped in host element after being validated.
* Emits a [FileList | File] object.
*/
fileDrop = new EventEmitter();
/**
* 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;
}
constructor(_renderer, _element, _ngZone) {
this._renderer = _renderer;
this._element = _element;
this._ngZone = _ngZone;
}
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);
});
// 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.
this._dragoverListener = this._renderer.listen(this._element.nativeElement, 'dragover', (event) => {
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))) {
transfer.dropEffect = 'none';
}
else {
transfer.dropEffect = 'copy';
}
this._stopEvent(event);
});
});
}
ngOnDestroy() {
this._dragenterListener?.();
this._dragleaveListener?.();
this._dragoverListener?.();
}
/**
* 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 ?? new 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);
}
/**
* 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();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdFileDropDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.2", type: TdFileDropDirective, selector: "[tdFileDrop]", inputs: { multiple: "multiple", disabled: "disabled" }, outputs: { fileDrop: "fileDrop" }, host: { listeners: { "drop": "onDrop($event)" }, properties: { "attr.multiple": "this.multipleBinding", "attr.disabled": "this.disabledBinding" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdFileDropDirective, decorators: [{
type: Directive,
args: [{ selector: '[tdFileDrop]' }]
}], ctorParameters: () => [{ 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']]
}] } });
class TdFileInputLabelDirective extends TemplatePortalDirective {
constructor(templateRef, viewContainerRef) {
super(templateRef, viewContainerRef);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdFileInputLabelDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.2", type: TdFileInputLabelDirective, selector: "[tdFileInputLabel]ng-template", usesInheritance: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdFileInputLabelDirective, decorators: [{
type: Directive,
args: [{
selector: '[tdFileInputLabel]ng-template',
}]
}], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }] });
class TdFileInputBase {
_changeDetectorRef;
constructor(_changeDetectorRef) {
this._changeDetectorRef = _changeDetectorRef;
}
}
const _TdFileInputMixinBase = mixinControlValueAccessor(mixinDisabled(TdFileInputBase));
class TdFileInputComponent extends _TdFileInputMixinBase {
_ngZone;
_renderer;
_multiple = false;
/** The native `<button class="td-file-input"></button>` element */
_inputButton;
/** The native `<input type="file"> element */
_inputElement;
get inputElement() {
return this._inputElement.nativeElement;
}
/**
* color?: 'accent' | 'primary' | 'warn'
* Sets button color. Uses same color palette accepted as [MatButton].
*/
color;
/**
* 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;
}
/**
* accept?: string
* Sets files accepted when opening the file browser dialog.
* Same as 'accept' attribute in <input/> element.
*/
accept;
/**
* select?: function
* Event emitted a file is selected
* Emits a [File | FileList] object.
*/
selectFile = new EventEmitter();
_destroy$ = new Subject();
constructor(_ngZone, _renderer, _changeDetectorRef) {
super(_changeDetectorRef);
this._ngZone = _ngZone;
this._renderer = _renderer;
}
ngOnInit() {
this._ngZone.runOutsideAngular(() => {
merge(fromEvent(this._inputButton.nativeElement, 'click'), fromEvent(this._inputButton.nativeElement, 'keyup').pipe(filter((event) => event.keyCode === ENTER)))
.pipe(takeUntil(this._destroy$))
.subscribe(() => this._inputElement.nativeElement.click());
});
}
ngOnDestroy() {
this._destroy$.next();
}
/**
* Method executed when a file is selected.
*/
handleSelect(files) {
this.writeValue(files);
this.selectFile.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;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdFileInputComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.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: "_inputButton", first: true, predicate: ["fileInputButton"], descendants: true, read: ElementRef, static: true }, { propertyName: "_inputElement", first: true, predicate: ["fileInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<button\n #fileInputButton\n mat-stroked-button\n class=\"td-file-input\"\n type=\"button\"\n [color]=\"color\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\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 ::ng-deep .mdc-button__label{display:flex;align-items:center}:host .drop-zone{border-radius:3px}:host .drop-zone *{pointer-events:none}\n"], dependencies: [{ kind: "component", type: i4.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: TdFileSelectDirective, selector: "[tdFileSelect]", inputs: ["multiple"], outputs: ["fileSelect"] }, { kind: "directive", type: TdFileDropDirective, selector: "[tdFileDrop]", inputs: ["multiple", "disabled"], outputs: ["fileDrop"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.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 #fileInputButton\n mat-stroked-button\n class=\"td-file-input\"\n type=\"button\"\n [color]=\"color\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\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 ::ng-deep .mdc-button__label{display:flex;align-items:center}:host .drop-zone{border-radius:3px}:host .drop-zone *{pointer-events:none}\n"] }]
}], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { _inputButton: [{
type: ViewChild,
args: ['fileInputButton', { static: true, read: ElementRef }]
}], _inputElement: [{
type: ViewChild,
args: ['fileInput', { static: true }]
}], color: [{
type: Input
}], multiple: [{
type: Input
}], accept: [{
type: Input
}], selectFile: [{
type: Output
}] } });
class TdFileUploadBase {
_changeDetectorRef;
constructor(_changeDetectorRef) {
this._changeDetectorRef = _changeDetectorRef;
}
}
class TdFileUploadComponent {
_changeDetectorRef;
_multiple = false;
_required = false;
_disabled = false;
fileInput;
inputLabel;
/**
* defaultColor?: 'accent' | 'primary' | 'warn'
* Sets browse button color. Uses same color palette accepted as [MatButton] and defaults to 'primary'.
*/
defaultColor = 'primary';
/**
* activeColor?: 'accent' | 'primary' | 'warn'
* Sets upload button color. Uses same color palette accepted as [MatButton] and defaults to 'accent'.
*/
activeColor = 'accent';
/**
* cancelColor?: 'accent' | 'primary' | 'warn'
* Sets cancel button color. Uses same color palette accepted as [MatButton] and defaults to 'warn'.
*/
cancelColor = 'warn';
/**
* 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;
}
/**
* accept?: string
* Sets files accepted when opening the file browser dialog.
* Same as 'accept' attribute in <input/> element.
*/
accept;
set disabled(disabled) {
this._disabled = disabled;
this.onDisabledChange(disabled);
}
get disabled() {
return this._disabled;
}
value;
/**
* select?: function
* Event emitted when a file is selected.
* Emits a [File | FileList] object.
*/
selectFile = new EventEmitter();
/**
* upload?: function
* Event emitted when upload button is clicked.
* Emits a [File | FileList] object.
*/
upload = new EventEmitter();
/**
* cancel?: function
* Event emitted when cancel button is clicked.
*/
cancel = new EventEmitter();
constructor(_changeDetectorRef) {
this._changeDetectorRef = _changeDetectorRef;
}
writeValue(value) {
this.value = value;
this._changeDetectorRef.markForCheck();
}
registerOnChange() {
//
}
registerOnTouched() {
//
}
/**
* 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.selectFile.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();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdFileUploadComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.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"], dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i5.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: TdFileInputComponent, selector: "td-file-input", inputs: ["disabled", "value", "color", "multiple", "accept"], outputs: ["selectFile"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.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: () => [{ 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 {
_http;
_progressSubject = new Subject();
_progressObservable;
/**
* Gets progress observable to keep track of the files being uploaded.
* Needs to be supported by backend.
*/
get progress() {
return this._progressObservable;
}
/**
* 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._progressObservable = this._progressSubject.asObservable();
}
/**
* 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 ?? 0)));
break;
case HttpEventType.Response:
this._progressSubject.next(100);
break;
default:
break;
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdFileService, deps: [{ token: i1$1.HttpClient, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdFileService });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdFileService, decorators: [{
type: Injectable
}], ctorParameters: () => [{ type: i1$1.HttpClient, decorators: [{
type: Optional
}] }] });
const TD_FILE = [
TdFileSelectDirective,
TdFileDropDirective,
TdFileUploadComponent,
TdFileInputComponent,
TdFileInputLabelDirective,
];
class CovalentFileModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CovalentFileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: CovalentFileModule, declarations: [TdFileSelectDirective,
TdFileDropDirective,
TdFileUploadComponent,
TdFileInputComponent,
TdFileInputLabelDirective], imports: [FormsModule,
CommonModule,
MatIconModule,
MatButtonModule,
PortalModule], exports: [TdFileSelectDirective,
TdFileDropDirective,
TdFileUploadComponent,
TdFileInputComponent,
TdFileInputLabelDirective] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CovalentFileModule, providers: [TdFileService], imports: [FormsModule,
CommonModule,
MatIconModule,
MatButtonModule,
PortalModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.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, _TdFileInputMixinBase };
//# sourceMappingURL=covalent-core-file.mjs.map