@taiga-ui/kit
Version:
Taiga UI Angular main components kit
541 lines (535 loc) • 29.5 kB
JavaScript
import { __extends, __spread, __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 { isNativeFocused, EMPTY_ARRAY, TUI_IS_MOBILE, tuiDefaultProp, tuiPure, TUI_FOCUSABLE_ITEM_ACCESSOR, AbstractTuiNullableControl, 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 DEFAULT_MAX_SIZE = 30 * 1000 * 1000; // 30 MB
// @dynamic
var TuiInputFileComponent = /** @class */ (function (_super) {
__extends(TuiInputFileComponent, _super);
function TuiInputFileComponent(control, changeDetectorRef, isMobile, inputFileTexts$, mode$, units$) {
var _this = _super.call(this, control, changeDetectorRef) || this;
_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;
return _this;
}
TuiInputFileComponent_1 = TuiInputFileComponent;
Object.defineProperty(TuiInputFileComponent.prototype, "nativeFocusableElement", {
get: function () {
return this.input ? this.input.nativeElement : null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputFileComponent.prototype, "focused", {
get: function () {
return isNativeFocused(this.nativeFocusableElement);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputFileComponent.prototype, "allowDelete", {
get: function () {
return !this.computedDisabled && !this.readOnly;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputFileComponent.prototype, "computedLink$", {
get: function () {
return this.computeLink$(this.fileDragged, this.multiple, this.link);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputFileComponent.prototype, "computedLabel$", {
get: function () {
return this.computeLabel$(this.isMobile, this.fileDragged, this.multiple, this.label);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputFileComponent.prototype, "fileDragged", {
// @bad TODO: refactor after IE is dropped
get: function () {
return (!!this.dataTransfer &&
Array.prototype.indexOf.call(this.dataTransfer.types, 'Files') !== -1);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputFileComponent.prototype, "acceptArray", {
get: function () {
return this.getAcceptArray(this.accept);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputFileComponent.prototype, "arrayValue", {
get: function () {
return this.getValueArray(this.value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputFileComponent.prototype, "readyFiles", {
get: function () {
return this.getReadyFiles(this.arrayValue, this.loadingFiles);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputFileComponent.prototype, "computedLoading", {
get: function () {
return this.getLoadingFiles(this.arrayValue, this.loadingFiles);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputFileComponent.prototype, "hasFiles", {
get: function () {
return !!this.rejectedFiles.length || !!this.arrayValue.length;
},
enumerable: true,
configurable: true
});
TuiInputFileComponent.prototype.onHovered = function (hovered) {
this.updateHovered(hovered);
};
TuiInputFileComponent.prototype.onFocused = function (focused) {
this.updateFocused(focused);
};
TuiInputFileComponent.prototype.onPressed = function (pressed) {
this.updatePressed(pressed);
};
// TODO: refactor i18n messages
TuiInputFileComponent.prototype.onFilesSelected = function (input, texts, units) {
this.processSelectedFiles(input.files, texts, units);
input.value = '';
};
TuiInputFileComponent.prototype.onDropped = function (event, texts, units) {
this.processSelectedFiles(event.files, texts, units);
};
TuiInputFileComponent.prototype.onDragOver = function (dataTransfer) {
this.dataTransfer = dataTransfer;
};
TuiInputFileComponent.prototype.removeFile = function (removedFile) {
this.updateValue(this.multiple ? this.arrayValue.filter(function (file) { return file !== removedFile; }) : null);
};
TuiInputFileComponent.prototype.removeRejectedFile = function (removedFile) {
this.updateRejectedFiles(this.rejectedFiles.filter(function (file) { return file !== removedFile; }));
};
TuiInputFileComponent.prototype.getAppearance = function (mode) {
return mode === null ? '' : "outline" /* Outline */;
};
TuiInputFileComponent.prototype.computeLink$ = function (fileDragged, multiple, link) {
if (fileDragged) {
return of('');
}
return this.inputFileTexts$.pipe(map(function (texts) {
return multiple && link === ''
? texts.defaultLinkMultiple
: link || texts.defaultLinkSingle;
}));
};
TuiInputFileComponent.prototype.computeLabel$ = function (isMobile, fileDragged, multiple, label) {
if (isMobile) {
return of('');
}
if (fileDragged) {
return this.inputFileTexts$.pipe(map(function (texts) { return (multiple ? texts.dropMultiple : texts.drop); }));
}
return this.inputFileTexts$.pipe(map(function (texts) {
return multiple && label === ''
? texts.defaultLabelMultiple
: label || texts.defaultLabelSingle;
}));
};
TuiInputFileComponent.prototype.getValueArray = function (value) {
if (!value) {
return EMPTY_ARRAY;
}
return value instanceof Array ? value : [value];
};
TuiInputFileComponent.prototype.getReadyFiles = function (value, loading) {
return value.filter(function (file) { return loading.indexOf(file) === -1; });
};
TuiInputFileComponent.prototype.getLoadingFiles = function (value, loading) {
return loading.filter(function (file) { return value.indexOf(file) !== -1; });
};
TuiInputFileComponent.prototype.getAcceptArray = function (accept) {
return accept.toLowerCase().split(',');
};
TuiInputFileComponent.prototype.processSelectedFiles = function (files, texts, units) {
var _this = this;
// IE11 after selecting a file through the open dialog generates a second event passing an empty FileList.
if (files === null || files.length === 0) {
return;
}
var newFiles = this.multiple ? Array.from(files) : [files[0]];
var tooBigFiles = newFiles.filter(function (file) { return file.size > _this.maxFileSize; });
var wrongFormatFiles = newFiles.filter(function (file) { return !_this.isFormatAcceptable(file) && tooBigFiles.indexOf(file) === -1; });
var acceptedFiles = newFiles.filter(function (file) {
return tooBigFiles.indexOf(file) === -1 && wrongFormatFiles.indexOf(file) === -1;
});
this.updateRejectedFiles(__spread(tooBigFiles.map(function (file) { return ({
name: file.name,
type: file.type,
size: file.size,
content: texts.maxSizeRejectionReason + formatSize(units, _this.maxFileSize),
}); }), wrongFormatFiles.map(function (file) { return ({
name: file.name,
type: file.type,
size: file.size,
content: texts.formatRejectionReason,
}); })));
this.updateValue(this.multiple
? __spread(this.arrayValue, acceptedFiles) : acceptedFiles[0] || null);
};
TuiInputFileComponent.prototype.isFormatAcceptable = function (file) {
if (!this.accept) {
return true;
}
var extension = '.' + (file.name.split('.').pop() || '').toLowerCase();
return this.acceptArray.some(function (format) {
return format === extension ||
format === file.type ||
(format.split('/')[1] === '*' &&
file.type.split('/')[0] === format.split('/')[0]);
});
};
TuiInputFileComponent.prototype.updateRejectedFiles = function (rejectedFiles) {
this.rejectedFiles = rejectedFiles;
this.rejectedFilesChange.emit(rejectedFiles);
};
var TuiInputFileComponent_1;
TuiInputFileComponent.ctorParameters = function () { return [
{ 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(function () { return 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);
return TuiInputFileComponent;
}(AbstractTuiNullableControl));
// @dynamic
var TuiFileComponent = /** @class */ (function () {
function TuiFileComponent(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;
}
Object.defineProperty(TuiFileComponent.prototype, "preview", {
get: function () {
return this.isBig ? this.createPreview(this.file, this.sanitizer) : '';
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiFileComponent.prototype, "isBig", {
get: function () {
return this.size === 'l';
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiFileComponent.prototype, "isLoading", {
get: function () {
return this.state === "loading" /* Loading */;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiFileComponent.prototype, "isError", {
get: function () {
return this.state === "error" /* Error */;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiFileComponent.prototype, "isDeleted", {
get: function () {
return this.state === "deleted" /* Deleted */;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiFileComponent.prototype, "icon", {
get: function () {
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';
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiFileComponent.prototype, "src", {
get: function () {
return this.file.src || '';
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiFileComponent.prototype, "name", {
get: function () {
return this.file.name.split('.').slice(0, -1).join('.');
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiFileComponent.prototype, "type", {
get: function () {
return '.' + this.file.name.split('.').pop() || '';
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiFileComponent.prototype, "content$", {
get: function () {
return this.calculateContent$(this.state, this.file, this.fileTexts$);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiFileComponent.prototype, "fileSize$", {
get: function () {
return this.calculateFileSize$(this.file, this.units$);
},
enumerable: true,
configurable: true
});
TuiFileComponent.prototype.onRemoveClick = function () {
this.fileRemoved.emit();
};
TuiFileComponent.prototype.onFocusVisible = function (focusVisible) {
this.focused = focusVisible;
};
TuiFileComponent.prototype.calculateContent$ = function (state, file, fileTexts$) {
return state === "error" /* Error */ && !file.content
? fileTexts$.pipe(map(function (texts) { return texts.loadingError; }))
: of(this.file.content || '');
};
TuiFileComponent.prototype.calculateFileSize$ = function (file, units$) {
return units$.pipe(map(function (units) { return formatSize(units, file.size); }));
};
TuiFileComponent.prototype.createPreview = function (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 = function () { return [
{ 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);
return TuiFileComponent;
}());
var TuiInputFileModule = /** @class */ (function () {
function 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);
return TuiInputFileModule;
}());
/**
* Generated bundle index. Do not edit.
*/
export { TuiFileComponent, TuiInputFileComponent, TuiInputFileModule };
//# sourceMappingURL=taiga-ui-kit-components-input-file.js.map