@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.
722 lines (713 loc) • 34.7 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, EventEmitter, Directive, HostListener, HostBinding, Output, Input, Renderer2, ElementRef, NgZone, TemplateRef, ViewContainerRef, ChangeDetectorRef, forwardRef, ChangeDetectionStrategy, Component, ViewChild, ContentChild, Injectable, NgModule } from '@angular/core';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import * as i2 from '@angular/forms';
import { NgModel, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { TemplatePortalDirective, CdkPortalOutlet } from '@angular/cdk/portal';
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 i3 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import { MatIcon } from '@angular/material/icon';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import { HttpClient, HttpRequest, HttpParams, HttpHeaders, HttpEventType } from '@angular/common/http';
class TdFileSelectDirective {
model = inject(NgModel, { optional: true, host: true });
_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;
}
/**
* 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 = function TdFileSelectDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdFileSelectDirective)(); };
static ɵdir = /*@__PURE__*/ 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" } });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdFileSelectDirective, [{
type: Directive,
args: [{
selector: '[tdFileSelect]',
}]
}], null, { multiple: [{
type: Input
}], fileSelect: [{
type: Output
}], multipleBinding: [{
type: HostBinding,
args: ['attr.multiple']
}], onChange: [{
type: HostListener,
args: ['change', ['$event']]
}] }); })();
class TdFileDropBase {
}
class TdFileDropDirective {
_renderer = inject(Renderer2);
_element = inject(ElementRef);
_ngZone = inject(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;
}
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 = function TdFileDropDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdFileDropDirective)(); };
static ɵdir = /*@__PURE__*/ 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); });
} if (rf & 2) {
i0.ɵɵattribute("multiple", ctx.multipleBinding)("disabled", ctx.disabledBinding);
} }, inputs: { multiple: "multiple", disabled: "disabled" }, outputs: { fileDrop: "fileDrop" } });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdFileDropDirective, [{
type: Directive,
args: [{ selector: '[tdFileDrop]' }]
}], null, { 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']]
}] }); })();
const _c0$1 = ["fileInputButton"];
const _c1 = ["fileInput"];
const _c2 = ["*"];
class TdFileInputLabelDirective extends TemplatePortalDirective {
constructor() {
const templateRef = inject(TemplateRef);
const viewContainerRef = inject(ViewContainerRef);
super(templateRef, viewContainerRef);
}
static ɵfac = function TdFileInputLabelDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdFileInputLabelDirective)(); };
static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TdFileInputLabelDirective, selectors: [["ng-template", "tdFileInputLabel", ""]], features: [i0.ɵɵInheritDefinitionFeature] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdFileInputLabelDirective, [{
type: Directive,
args: [{
selector: '[tdFileInputLabel]ng-template',
}]
}], () => [], null); })();
class TdFileInputBase {
_changeDetectorRef;
constructor(_changeDetectorRef) {
this._changeDetectorRef = _changeDetectorRef;
}
}
const _TdFileInputMixinBase = mixinControlValueAccessor(mixinDisabled(TdFileInputBase));
class TdFileInputComponent extends _TdFileInputMixinBase {
_ngZone = inject(NgZone);
_renderer = inject(Renderer2);
_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() {
const _changeDetectorRef = inject(ChangeDetectorRef);
super(_changeDetectorRef);
}
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 = function TdFileInputComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdFileInputComponent)(); };
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TdFileInputComponent, selectors: [["td-file-input"]], viewQuery: function TdFileInputComponent_Query(rf, ctx) { if (rf & 1) {
i0.ɵɵviewQuery(_c0$1, 7, ElementRef);
i0.ɵɵviewQuery(_c1, 7);
} if (rf & 2) {
let _t;
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._inputButton = _t.first);
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._inputElement = _t.first);
} }, inputs: { disabled: "disabled", value: "value", color: "color", multiple: "multiple", accept: "accept" }, outputs: { selectFile: "selectFile" }, features: [i0.ɵɵProvidersFeature([
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TdFileInputComponent),
multi: true,
},
]), i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c2, decls: 5, vars: 6, consts: [["fileInputButton", ""], ["fileInput", ""], ["mat-stroked-button", "", "type", "button", "tdFileDrop", "", 1, "td-file-input", 3, "fileDrop", "color", "multiple", "disabled"], ["type", "file", "tdFileSelect", "", 1, "td-file-input-hidden", 3, "fileSelect", "multiple", "disabled"]], template: function TdFileInputComponent_Template(rf, ctx) { if (rf & 1) {
const _r1 = i0.ɵɵgetCurrentView();
i0.ɵɵprojectionDef();
i0.ɵɵelementStart(0, "button", 2, 0);
i0.ɵɵlistener("fileDrop", function TdFileInputComponent_Template_button_fileDrop_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleSelect($event)); });
i0.ɵɵprojection(2);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(3, "input", 3, 1);
i0.ɵɵlistener("fileSelect", function TdFileInputComponent_Template_input_fileSelect_3_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleSelect($event)); });
i0.ɵɵelementEnd();
} if (rf & 2) {
i0.ɵɵproperty("color", ctx.color)("multiple", ctx.multiple)("disabled", ctx.disabled);
i0.ɵɵadvance(3);
i0.ɵɵproperty("multiple", ctx.multiple)("disabled", ctx.disabled);
i0.ɵɵattribute("accept", ctx.accept);
} }, dependencies: [MatButtonModule, i3.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%] .mdc-button__label{display:flex;align-items:center}[_nghost-%COMP%] .drop-zone[_ngcontent-%COMP%]{border-radius:3px}[_nghost-%COMP%] .drop-zone[_ngcontent-%COMP%] *[_ngcontent-%COMP%]{pointer-events:none}"], changeDetection: 0 });
}
(() => { (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'], imports: [MatButtonModule, TdFileDropDirective, TdFileSelectDirective], 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"] }]
}], () => [], { _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
}] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdFileInputComponent, { className: "TdFileInputComponent", filePath: "file-input/file-input.component.ts", lineNumber: 72 }); })();
const _c0 = ["*"];
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 _r1 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "td-file-input", 3);
i0.ɵɵtwoWayListener("ngModelChange", function TdFileUploadComponent_td_file_input_0_Template_td_file_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.value, $event) || (ctx_r1.value = $event); return i0.ɵɵresetView($event); });
i0.ɵɵlistener("selectFile", function TdFileUploadComponent_td_file_input_0_Template_td_file_input_selectFile_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.handleSelect(ctx_r1.value)); });
i0.ɵɵtemplate(1, TdFileUploadComponent_td_file_input_0_ng_template_1_Template, 0, 0, "ng-template", 4);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext();
i0.ɵɵtwoWayProperty("ngModel", ctx_r1.value);
i0.ɵɵproperty("multiple", ctx_r1.multiple)("disabled", ctx_r1.disabled)("accept", ctx_r1.accept)("color", ctx_r1.defaultColor);
i0.ɵɵadvance();
i0.ɵɵproperty("cdkPortalOutlet", ctx_r1.inputLabel)("ngIf", true);
} }
function TdFileUploadComponent_div_1_Template(rf, ctx) { if (rf & 1) {
const _r3 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "div")(1, "button", 5, 0);
i0.ɵɵlistener("keyup.delete", function TdFileUploadComponent_div_1_Template_button_keyup_delete_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1._cancel()); })("keyup.backspace", function TdFileUploadComponent_div_1_Template_button_keyup_backspace_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1._cancel()); })("keyup.escape", function TdFileUploadComponent_div_1_Template_button_keyup_escape_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1._cancel()); })("click", function TdFileUploadComponent_div_1_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.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(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1._cancel()); });
i0.ɵɵelementStart(5, "mat-icon");
i0.ɵɵtext(6, "cancel");
i0.ɵɵelementEnd()()();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext();
i0.ɵɵadvance();
i0.ɵɵproperty("color", ctx_r1.activeColor);
i0.ɵɵadvance(3);
i0.ɵɵproperty("color", ctx_r1.cancelColor);
} }
class TdFileUploadBase {
_changeDetectorRef;
constructor(_changeDetectorRef) {
this._changeDetectorRef = _changeDetectorRef;
}
}
class TdFileUploadComponent {
_changeDetectorRef = inject(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.
*/
// eslint-disable-next-line @angular-eslint/no-output-native
cancel = new EventEmitter();
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) {
if (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 = function TdFileUploadComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdFileUploadComponent)(); };
static ɵcmp = /*@__PURE__*/ 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: { defaultColor: "defaultColor", activeColor: "activeColor", cancelColor: "cancelColor", multiple: "multiple", required: "required", accept: "accept", disabled: "disabled", value: "value" }, outputs: { selectFile: "selectFile", upload: "upload", cancel: "cancel" }, features: [i0.ɵɵProvidersFeature([
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TdFileUploadComponent),
multi: true,
},
])], ngContentSelectors: _c0, decls: 2, vars: 2, consts: [["fileUpload", ""], [3, "ngModel", "multiple", "disabled", "accept", "color", "ngModelChange", "selectFile", 4, "ngIf"], [4, "ngIf"], [3, "ngModelChange", "selectFile", "ngModel", "multiple", "disabled", "accept", "color"], [3, "cdkPortalOutlet", "ngIf"], ["mat-raised-button", "", "type", "button", 1, "td-file-upload", 3, "keyup.delete", "keyup.backspace", "keyup.escape", "click", "color"], ["mat-icon-button", "", "type", "button", 1, "td-file-upload-cancel", 3, "click", "color"]], 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", 1)(1, TdFileUploadComponent_div_1_Template, 7, 2, "div", 2);
} if (rf & 2) {
i0.ɵɵproperty("ngIf", !ctx.value);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx.value);
} }, dependencies: [CommonModule, i1.NgIf, FormsModule, i2.NgControlStatus, i2.NgModel, TdFileInputComponent,
MatButtonModule, i3.MatButton, i3.MatIconButton, MatIcon,
CdkPortalOutlet], 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 });
}
(() => { (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', imports: [
CommonModule,
FormsModule,
TdFileInputComponent,
MatButtonModule,
MatIcon,
CdkPortalOutlet,
], 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(value)\"\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"] }]
}], null, { 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
}] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdFileUploadComponent, { className: "TdFileUploadComponent", filePath: "file-upload/file-upload.component.ts", lineNumber: 53 }); })();
class TdFileService {
_http = inject(HttpClient, { optional: true });
_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() {
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 = function TdFileService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdFileService)(); };
static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: TdFileService, factory: TdFileService.ɵfac });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdFileService, [{
type: Injectable
}], () => [], null); })();
const TD_FILE = [
TdFileSelectDirective,
TdFileDropDirective,
TdFileUploadComponent,
TdFileInputComponent,
TdFileInputLabelDirective,
];
/**
* @deprecated This module is deprecated and will be removed in future versions.
* Please migrate to using standalone components as soon as possible.
*/
class CovalentFileModule {
static ɵfac = function CovalentFileModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CovalentFileModule)(); };
static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: CovalentFileModule });
static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [TdFileService], imports: [TdFileUploadComponent,
TdFileInputComponent] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CovalentFileModule, [{
type: NgModule,
args: [{
imports: [TD_FILE],
exports: [TD_FILE],
providers: [TdFileService],
}]
}], null, null); })();
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(CovalentFileModule, { imports: [TdFileSelectDirective,
TdFileDropDirective,
TdFileUploadComponent,
TdFileInputComponent,
TdFileInputLabelDirective], exports: [TdFileSelectDirective,
TdFileDropDirective,
TdFileUploadComponent,
TdFileInputComponent,
TdFileInputLabelDirective] }); })();
/**
* Generated bundle index. Do not edit.
*/
export { CovalentFileModule, TdFileDropBase, TdFileDropDirective, TdFileInputBase, TdFileInputComponent, TdFileInputLabelDirective, TdFileSelectDirective, TdFileService, TdFileUploadBase, TdFileUploadComponent, _TdFileInputMixinBase };
//# sourceMappingURL=covalent-core-file.mjs.map