@taiga-ui/kit
Version:
Taiga UI Angular main components kit
440 lines (434 loc) • 23.8 kB
JavaScript
import { __decorate, __param } from 'tslib';
import { EventEmitter, Optional, Self, Inject, ChangeDetectorRef, Input, Output, ViewChild, Component, ChangeDetectionStrategy, forwardRef, HostBinding, NgModule } from '@angular/core';
import { NgControl } from '@angular/forms';
import { AbstractTuiNullableControl, isNativeFocused, EMPTY_ARRAY, TUI_IS_MOBILE, tuiDefaultProp, tuiPure, TUI_FOCUSABLE_ITEM_ACCESSOR, TuiLetModule, TuiFocusedModule, TuiFocusVisibleModule, TuiPressedModule, TuiHoveredModule, TuiFocusableModule, TuiDroppableModule, TuiPreventDefaultModule } from '@taiga-ui/cdk';
import { TUI_MODE, MODE_PROVIDER, TuiWrapperModule, TuiSvgModule, TuiLinkModule, TuiLoaderModule, TuiButtonModule, TuiGroupModule } from '@taiga-ui/core';
import { TUI_INPUT_FILE_TEXTS, TUI_DIGITAL_INFORMATION_UNITS, TUI_FILE_TEXTS } from '@taiga-ui/kit/tokens';
import { formatSize } from '@taiga-ui/kit/utils/files';
import { of, Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { CommonModule } from '@angular/common';
import { PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
import { DomSanitizer } from '@angular/platform-browser';
var TuiInputFileComponent_1;
const DEFAULT_MAX_SIZE = 30 * 1000 * 1000; // 30 MB
// @dynamic
let TuiInputFileComponent = TuiInputFileComponent_1 = class TuiInputFileComponent extends AbstractTuiNullableControl {
constructor(control, changeDetectorRef, isMobile, inputFileTexts$, mode$, units$) {
super(control, changeDetectorRef);
this.isMobile = isMobile;
this.inputFileTexts$ = inputFileTexts$;
this.mode$ = mode$;
this.units$ = units$;
this.link = '';
this.label = '';
this.accept = '';
this.multiple = false;
this.size = 'm';
this.showSize = true;
this.maxFileSize = DEFAULT_MAX_SIZE;
this.loadingFiles = [];
this.rejectedFiles = [];
this.rejectedFilesChange = new EventEmitter();
this.dataTransfer = null;
}
get nativeFocusableElement() {
return this.input ? this.input.nativeElement : null;
}
get focused() {
return isNativeFocused(this.nativeFocusableElement);
}
get allowDelete() {
return !this.computedDisabled && !this.readOnly;
}
get computedLink$() {
return this.computeLink$(this.fileDragged, this.multiple, this.link);
}
get computedLabel$() {
return this.computeLabel$(this.isMobile, this.fileDragged, this.multiple, this.label);
}
// @bad TODO: refactor after IE is dropped
get fileDragged() {
return (!!this.dataTransfer &&
Array.prototype.indexOf.call(this.dataTransfer.types, 'Files') !== -1);
}
get acceptArray() {
return this.getAcceptArray(this.accept);
}
get arrayValue() {
return this.getValueArray(this.value);
}
get readyFiles() {
return this.getReadyFiles(this.arrayValue, this.loadingFiles);
}
get computedLoading() {
return this.getLoadingFiles(this.arrayValue, this.loadingFiles);
}
get hasFiles() {
return !!this.rejectedFiles.length || !!this.arrayValue.length;
}
onHovered(hovered) {
this.updateHovered(hovered);
}
onFocused(focused) {
this.updateFocused(focused);
}
onPressed(pressed) {
this.updatePressed(pressed);
}
// TODO: refactor i18n messages
onFilesSelected(input, texts, units) {
this.processSelectedFiles(input.files, texts, units);
input.value = '';
}
onDropped(event, texts, units) {
this.processSelectedFiles(event.files, texts, units);
}
onDragOver(dataTransfer) {
this.dataTransfer = dataTransfer;
}
removeFile(removedFile) {
this.updateValue(this.multiple ? this.arrayValue.filter(file => file !== removedFile) : null);
}
removeRejectedFile(removedFile) {
this.updateRejectedFiles(this.rejectedFiles.filter(file => file !== removedFile));
}
getAppearance(mode) {
return mode === null ? '' : "outline" /* Outline */;
}
computeLink$(fileDragged, multiple, link) {
if (fileDragged) {
return of('');
}
return this.inputFileTexts$.pipe(map(texts => multiple && link === ''
? texts.defaultLinkMultiple
: link || texts.defaultLinkSingle));
}
computeLabel$(isMobile, fileDragged, multiple, label) {
if (isMobile) {
return of('');
}
if (fileDragged) {
return this.inputFileTexts$.pipe(map(texts => (multiple ? texts.dropMultiple : texts.drop)));
}
return this.inputFileTexts$.pipe(map(texts => multiple && label === ''
? texts.defaultLabelMultiple
: label || texts.defaultLabelSingle));
}
getValueArray(value) {
if (!value) {
return EMPTY_ARRAY;
}
return value instanceof Array ? value : [value];
}
getReadyFiles(value, loading) {
return value.filter(file => loading.indexOf(file) === -1);
}
getLoadingFiles(value, loading) {
return loading.filter(file => value.indexOf(file) !== -1);
}
getAcceptArray(accept) {
return accept.toLowerCase().split(',');
}
processSelectedFiles(files, texts, units) {
// IE11 after selecting a file through the open dialog generates a second event passing an empty FileList.
if (files === null || files.length === 0) {
return;
}
const newFiles = this.multiple ? Array.from(files) : [files[0]];
const tooBigFiles = newFiles.filter(file => file.size > this.maxFileSize);
const wrongFormatFiles = newFiles.filter(file => !this.isFormatAcceptable(file) && tooBigFiles.indexOf(file) === -1);
const acceptedFiles = newFiles.filter(file => tooBigFiles.indexOf(file) === -1 && wrongFormatFiles.indexOf(file) === -1);
this.updateRejectedFiles([
...tooBigFiles.map(file => ({
name: file.name,
type: file.type,
size: file.size,
content: texts.maxSizeRejectionReason + formatSize(units, this.maxFileSize),
})),
...wrongFormatFiles.map(file => ({
name: file.name,
type: file.type,
size: file.size,
content: texts.formatRejectionReason,
})),
]);
this.updateValue(this.multiple
? [...this.arrayValue, ...acceptedFiles]
: acceptedFiles[0] || null);
}
isFormatAcceptable(file) {
if (!this.accept) {
return true;
}
const extension = '.' + (file.name.split('.').pop() || '').toLowerCase();
return this.acceptArray.some(format => format === extension ||
format === file.type ||
(format.split('/')[1] === '*' &&
file.type.split('/')[0] === format.split('/')[0]));
}
updateRejectedFiles(rejectedFiles) {
this.rejectedFiles = rejectedFiles;
this.rejectedFilesChange.emit(rejectedFiles);
}
};
TuiInputFileComponent.ctorParameters = () => [
{ type: NgControl, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NgControl,] }] },
{ type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] },
{ type: Boolean, decorators: [{ type: Inject, args: [TUI_IS_MOBILE,] }] },
{ type: Observable, decorators: [{ type: Inject, args: [TUI_INPUT_FILE_TEXTS,] }] },
{ type: Observable, decorators: [{ type: Inject, args: [TUI_MODE,] }] },
{ type: Observable, decorators: [{ type: Inject, args: [TUI_DIGITAL_INFORMATION_UNITS,] }] }
];
__decorate([
Input(),
tuiDefaultProp()
], TuiInputFileComponent.prototype, "link", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputFileComponent.prototype, "label", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputFileComponent.prototype, "accept", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputFileComponent.prototype, "multiple", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputFileComponent.prototype, "size", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputFileComponent.prototype, "showSize", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputFileComponent.prototype, "maxFileSize", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputFileComponent.prototype, "loadingFiles", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputFileComponent.prototype, "rejectedFiles", void 0);
__decorate([
Output()
], TuiInputFileComponent.prototype, "rejectedFilesChange", void 0);
__decorate([
ViewChild('input')
], TuiInputFileComponent.prototype, "input", void 0);
__decorate([
tuiPure
], TuiInputFileComponent.prototype, "computeLink$", null);
__decorate([
tuiPure
], TuiInputFileComponent.prototype, "computeLabel$", null);
__decorate([
tuiPure
], TuiInputFileComponent.prototype, "getValueArray", null);
__decorate([
tuiPure
], TuiInputFileComponent.prototype, "getReadyFiles", null);
__decorate([
tuiPure
], TuiInputFileComponent.prototype, "getLoadingFiles", null);
__decorate([
tuiPure
], TuiInputFileComponent.prototype, "getAcceptArray", null);
TuiInputFileComponent = TuiInputFileComponent_1 = __decorate([
Component({
selector: 'tui-input-file',
template: "<tui-wrapper\n *ngIf=\"multiple || !value\"\n class=\"wrapper\"\n [class.wrapper_mobile]=\"isMobile\"\n [class.wrapper_has-files]=\"hasFiles\"\n [appearance]=\"getAppearance(mode$ | async)\"\n [focused]=\"computedFocused\"\n [hovered]=\"computedHovered || fileDragged\"\n [pressed]=\"computedPressed\"\n [readOnly]=\"readOnly\"\n [disabled]=\"computedDisabled\"\n>\n <label\n *ngIf=\"(units$ | async) as units\"\n automation-id=\"tui-input-file__label\"\n >\n <a tuiLink>\n <span\n polymorpheus-outlet\n class=\"inline\"\n [content]=\"computedLink$ | async\"\n ></span>\n </a>\n <ng-container *ngIf=\"computedLabel$ | async as computedLabel\">\n <span> </span>\n <span\n polymorpheus-outlet\n class=\"inline\"\n [content]=\"computedLabel\"\n ></span>\n </ng-container>\n <input\n *ngIf=\"!readOnly && !computedDisabled && (inputFileTexts$ | async) as texts\"\n #input\n class=\"native\"\n type=\"file\"\n tuiPreventDefault=\"mousedown\"\n [id]=\"id\"\n [accept]=\"accept\"\n [multiple]=\"multiple\"\n [tuiFocusable]=\"focusable\"\n (change)=\"onFilesSelected(input, texts, units)\"\n (tuiHoveredChange)=\"onHovered($event)\"\n (tuiFocusedChange)=\"onFocused($event)\"\n (tuiPressedChange)=\"onPressed($event)\"\n (tuiDroppableDropped)=\"onDropped($event, texts, units)\"\n (tuiDroppableDragOverChange)=\"onDragOver($event)\"\n />\n </label>\n</tui-wrapper>\n\n<section\n *tuiLet=\"mode$ | async as mode\"\n tuiGroup\n class=\"files\"\n orientation=\"vertical\"\n [collapsed]=\"true\"\n>\n <tui-file\n *ngFor=\"let file of rejectedFiles\"\n automation-id=\"tui-input-file__error\"\n state=\"error\"\n [attr.data-mode]=\"mode\"\n [showSize]=\"showSize\"\n [allowDelete]=\"allowDelete\"\n [size]=\"size\"\n [file]=\"file\"\n (fileRemoved)=\"removeRejectedFile(file)\"\n ></tui-file>\n <tui-file\n *ngFor=\"let file of computedLoading\"\n automation-id=\"tui-input-file__loading\"\n state=\"loading\"\n [attr.data-mode]=\"mode\"\n [showSize]=\"showSize\"\n [allowDelete]=\"allowDelete\"\n [size]=\"size\"\n [file]=\"file\"\n (fileRemoved)=\"removeFile(file)\"\n ></tui-file>\n <tui-file\n *ngFor=\"let file of readyFiles\"\n automation-id=\"tui-input-file__file\"\n [attr.data-mode]=\"mode\"\n [showSize]=\"showSize\"\n [allowDelete]=\"allowDelete\"\n [size]=\"size\"\n [file]=\"file\"\n (fileRemoved)=\"removeFile(file)\"\n ></tui-file>\n</section>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
MODE_PROVIDER,
{
provide: TUI_FOCUSABLE_ITEM_ACCESSOR,
useExisting: forwardRef(() => TuiInputFileComponent_1),
},
],
styles: [":host{font:var(--tui-font-text-m);display:block;word-wrap:break-word;color:var(--tui-text-02)}.native{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.native::-webkit-file-upload-button{display:none}.inline{display:inline}.wrapper{display:flex;flex:1;justify-content:center;align-items:center;min-height:var(--tui-height-l);border-radius:var(--tui-radius-m);padding:16px 8px;box-sizing:border-box}.wrapper:after{border:1px dashed;color:var(--tui-link)}.wrapper_mobile:after{border-style:solid}.wrapper_has-files{margin-bottom:8px}.wrapper[data-state=hovered]{background:var(--tui-secondary)}.wrapper[data-state=hovered]:after{color:var(--tui-link-hover)}.wrapper[data-state=pressed]{background:var(--tui-secondary-hover)}.wrapper[data-state=readonly]{pointer-events:none}.wrapper[data-state=readonly]:after{color:var(--tui-text-03)}.wrapper[data-state=disabled]{opacity:var(--tui-disabled-opacity);pointer-events:none}.wrapper[data-state=disabled]:after{color:var(--tui-text-03)}.wrapper._focused:after{border-style:solid;border-width:2px;color:var(--tui-focus)}.files{display:flex}"]
}),
__param(0, Optional()),
__param(0, Self()),
__param(0, Inject(NgControl)),
__param(1, Inject(ChangeDetectorRef)),
__param(2, Inject(TUI_IS_MOBILE)),
__param(3, Inject(TUI_INPUT_FILE_TEXTS)),
__param(4, Inject(TUI_MODE)),
__param(5, Inject(TUI_DIGITAL_INFORMATION_UNITS))
], TuiInputFileComponent);
// @dynamic
let TuiFileComponent = class TuiFileComponent {
constructor(isMobile, sanitizer, fileTexts$, units$) {
this.isMobile = isMobile;
this.sanitizer = sanitizer;
this.fileTexts$ = fileTexts$;
this.units$ = units$;
this.file = { name: '' };
this.state = "normal" /* Normal */;
this.size = 'm';
this.allowDelete = true;
this.showSize = true;
this.fileRemoved = new EventEmitter();
this.focused = false;
}
get preview() {
return this.isBig ? this.createPreview(this.file, this.sanitizer) : '';
}
get isBig() {
return this.size === 'l';
}
get isLoading() {
return this.state === "loading" /* Loading */;
}
get isError() {
return this.state === "error" /* Error */;
}
get isDeleted() {
return this.state === "deleted" /* Deleted */;
}
get icon() {
if (this.state === "normal" /* Normal */ && this.isBig) {
return 'tuiIconDefaultDocLarge';
}
switch (this.state) {
case "deleted" /* Deleted */:
return 'tuiIconTrashLarge';
case "error" /* Error */:
return 'tuiIconAlertCircleLarge';
default:
return 'tuiIconCheckCircleLarge';
}
}
get src() {
return this.file.src || '';
}
get name() {
return this.file.name.split('.').slice(0, -1).join('.');
}
get type() {
return '.' + this.file.name.split('.').pop() || '';
}
get content$() {
return this.calculateContent$(this.state, this.file, this.fileTexts$);
}
get fileSize$() {
return this.calculateFileSize$(this.file, this.units$);
}
onRemoveClick() {
this.fileRemoved.emit();
}
onFocusVisible(focusVisible) {
this.focused = focusVisible;
}
calculateContent$(state, file, fileTexts$) {
return state === "error" /* Error */ && !file.content
? fileTexts$.pipe(map(texts => texts.loadingError))
: of(this.file.content || '');
}
calculateFileSize$(file, units$) {
return units$.pipe(map(units => formatSize(units, file.size)));
}
createPreview(file, sanitizer) {
if (file.src) {
return file.src;
}
if (file instanceof File && file.type && file.type.startsWith('image/')) {
return sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(file));
}
return '';
}
};
TuiFileComponent.ctorParameters = () => [
{ type: Boolean, decorators: [{ type: Inject, args: [TUI_IS_MOBILE,] }] },
{ type: DomSanitizer, decorators: [{ type: Inject, args: [DomSanitizer,] }] },
{ type: Observable, decorators: [{ type: Inject, args: [TUI_FILE_TEXTS,] }] },
{ type: Observable, decorators: [{ type: Inject, args: [TUI_DIGITAL_INFORMATION_UNITS,] }] }
];
__decorate([
Input(),
tuiDefaultProp()
], TuiFileComponent.prototype, "file", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiFileComponent.prototype, "state", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiFileComponent.prototype, "size", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiFileComponent.prototype, "allowDelete", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiFileComponent.prototype, "showSize", void 0);
__decorate([
Output()
], TuiFileComponent.prototype, "fileRemoved", void 0);
__decorate([
HostBinding('class._focused')
], TuiFileComponent.prototype, "focused", void 0);
__decorate([
HostBinding('class._link')
], TuiFileComponent.prototype, "src", null);
__decorate([
tuiPure
], TuiFileComponent.prototype, "calculateContent$", null);
__decorate([
tuiPure
], TuiFileComponent.prototype, "calculateFileSize$", null);
__decorate([
tuiPure
], TuiFileComponent.prototype, "createPreview", null);
TuiFileComponent = __decorate([
Component({
selector: 'tui-file',
changeDetection: ChangeDetectionStrategy.OnPush,
template: "<ng-container *ngIf=\"!src; else withLink\">\n <ng-container *ngTemplateOutlet=\"fileInfoTemplate\"></ng-container>\n</ng-container>\n\n<ng-template #withLink>\n <a\n class=\"link\"\n rel=\"noreferrer noopener\"\n target=\"_blank\"\n [href]=\"src\"\n (tuiFocusVisibleChange)=\"onFocusVisible($event)\"\n >\n <ng-container *ngTemplateOutlet=\"fileInfoTemplate\"></ng-container>\n </a>\n</ng-template>\n\n<ng-template #fileInfoTemplate>\n <div class=\"preview\" [class.preview_big]=\"isBig\">\n <img\n *ngIf=\"preview && (fileTexts$ | async) as texts; else loader\"\n automation-id=\"tui-file__preview\"\n class=\"image\"\n [alt]=\"texts.preview\"\n [src]=\"preview\"\n />\n <ng-template #loader>\n <tui-loader\n *ngIf=\"isLoading; else svg\"\n automation-id=\"tui-file__loader\"\n class=\"loader\"\n [inheritColor]=\"isBig\"\n ></tui-loader>\n </ng-template>\n <ng-template #svg>\n <tui-svg\n class=\"icon\"\n automation-id=\"tui-file__icon\"\n [class.icon_deleted]=\"isDeleted\"\n [class.icon_error]=\"isError\"\n [src]=\"icon\"\n ></tui-svg>\n </ng-template>\n </div>\n <div class=\"wrapper\">\n <div class=\"text\">\n <div automation-id=\"tui-file__name\" class=\"name\">{{name}}</div>\n <div automation-id=\"tui-file__type\" class=\"type\">{{type}}</div>\n <div\n *ngIf=\"showSize && (fileSize$ | async) as fileSize\"\n automation-id=\"tui-file__size\"\n class=\"size\"\n >\n {{fileSize}}\n </div>\n </div>\n <div\n polymorpheus-outlet\n *ngIf=\"content$ | async as content\"\n automation-id=\"tui-file__content\"\n class=\"content\"\n [content]=\"content\"\n ></div>\n </div>\n <button\n *ngIf=\"allowDelete && (fileTexts$ | async) as texts\"\n automation-id=\"tui-file__remove\"\n tuiIconButton\n type=\"button\"\n size=\"xs\"\n icon=\"tuiIconCloseLarge\"\n appearance=\"icon\"\n class=\"remove\"\n [title]=\"texts.remove\"\n [class.remove_mobile]=\"isMobile\"\n (click.prevent)=\"onRemoveClick()\"\n ></button>\n</ng-template>\n",
styles: [":host{font:var(--tui-font-text-m);position:relative;display:flex;border:1px solid var(--tui-base-03);border-radius:var(--tui-radius-m)}:host[data-mode=onDark]{color:var(--tui-text-01-night)}:host:not(._link){padding:9px 35px 9px 9px}:host:hover .remove{opacity:1}:host._focused{border-color:var(--tui-focus);box-shadow:0 0 0 1px inset var(--tui-focus)}.link{display:flex;flex:1;padding:9px 35px 9px 9px;text-decoration:none;outline:0;cursor:pointer;color:var(--tui-text-01);max-width:calc(100% - 44px)}.link:hover{background-color:var(--tui-base-02)}.preview{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;margin-right:12px;border-radius:var(--tui-radius-m);overflow:hidden;color:rgba(0,0,0,.24)}.preview_big{width:64px;height:64px;margin-right:16px}.preview_big:before{position:absolute;top:0;left:0;width:100%;height:100%;content:'';background:#333;opacity:.08}.image{max-width:100%;max-height:100%}.loader{position:absolute;top:0;left:0;width:100%;height:100%}.icon{position:absolute;top:0;left:0;width:100%;height:100%;color:var(--tui-success-fill)}.icon_error{color:var(--tui-error-fill)}.icon_deleted{color:var(--tui-base-06)}.remove{transition-property:opacity;transition-duration:.3s;transition-timing-function:ease-in-out;position:absolute;top:10px;right:10px;opacity:0}.remove:focus,.remove_mobile{opacity:1}.wrapper{display:flex;flex-direction:column;justify-content:center;overflow:hidden}.text{display:flex}.size{flex-shrink:0;opacity:var(--tui-disabled-opacity);margin-left:8px}.type{flex-shrink:0}.name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.content{font:var(--tui-font-text-s);color:var(--tui-error-fill)}"]
}),
__param(0, Inject(TUI_IS_MOBILE)),
__param(1, Inject(DomSanitizer)),
__param(2, Inject(TUI_FILE_TEXTS)),
__param(3, Inject(TUI_DIGITAL_INFORMATION_UNITS))
], TuiFileComponent);
let TuiInputFileModule = class TuiInputFileModule {
};
TuiInputFileModule = __decorate([
NgModule({
imports: [
CommonModule,
PolymorpheusModule,
TuiLetModule,
TuiFocusedModule,
TuiFocusVisibleModule,
TuiPressedModule,
TuiHoveredModule,
TuiFocusableModule,
TuiDroppableModule,
TuiWrapperModule,
TuiSvgModule,
TuiLinkModule,
TuiLoaderModule,
TuiButtonModule,
TuiPreventDefaultModule,
TuiGroupModule,
],
declarations: [TuiFileComponent, TuiInputFileComponent],
exports: [TuiInputFileComponent],
})
], TuiInputFileModule);
/**
* Generated bundle index. Do not edit.
*/
export { TuiFileComponent, TuiInputFileComponent, TuiInputFileModule };
//# sourceMappingURL=taiga-ui-kit-components-input-file.js.map