carbon-components-angular
Version:
Next generation components
196 lines • 14.6 kB
JavaScript
import { Component, EventEmitter, HostBinding, Input, Output, TemplateRef } from "@angular/core";
import * as i0 from "@angular/core";
import * as i1 from "carbon-components-angular/i18n";
import * as i2 from "@angular/common";
import * as i3 from "carbon-components-angular/button";
import * as i4 from "carbon-components-angular/loading";
import * as i5 from "carbon-components-angular/icon";
export class FileComponent {
constructor(i18n) {
this.i18n = i18n;
/**
* Accessible translations for the close and complete icons
*/
this.translations = this.i18n.get().FILE_UPLOADER;
this.size = "lg";
this.remove = new EventEmitter();
this.selectedFile = true;
}
get isInvalidText() {
return this.fileItem.invalidText;
}
get fileSizeSmall() {
return this.size === "sm";
}
get fileSizeMedium() {
return this.size === "md";
}
get fileSizeLarge() {
return this.size === "lg";
}
isTemplate(value) {
return value instanceof TemplateRef;
}
ngOnDestroy() {
this.remove.emit();
}
}
FileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FileComponent, deps: [{ token: i1.I18n }], target: i0.ɵɵFactoryTarget.Component });
FileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FileComponent, selector: "cds-file, ibm-file", inputs: { translations: "translations", fileItem: "fileItem", size: "size", nameTpl: "nameTpl", actionsTpl: "actionsTpl" }, outputs: { remove: "remove" }, host: { properties: { "class.cds--file__selected-file": "this.selectedFile", "class.cds--file__selected-file--invalid": "this.isInvalidText", "class.cds--file__selected-file--sm": "this.fileSizeSmall", "class.cds--file__selected-file--md": "this.fileSizeMedium", "class.cds--file__selected-file--lg": "this.fileSizeLarge" } }, ngImport: i0, template: `
<p class="cds--file-filename" [title]="fileItem.file.name">
<ng-template
*ngIf="isTemplate(nameTpl); else defaultName"
[]="nameTpl"
[]="{ $implicit: fileItem }">
</ng-template>
<ng-template
</p>
<span *ngIf="fileItem.state === 'edit'" class="cds--file__state-container">
<svg
*ngIf="isInvalidText"
cdsIcon="warning--filled"
class="cds--file--invalid"
size="16">
</svg>
<ng-template
*ngIf="isTemplate(actionsTpl); else defaultActions"
[]="actionsTpl"
[]="{ $implicit: fileItem }">
</ng-template>
<ng-template
<button
type="button"
cdsButton="ghost"
iconOnly="true"
[]="size"
[]="translations.REMOVE_BUTTON"
(click)="remove.emit()"
(keyup.enter)="remove.emit()"
(keyup.space)="remove.emit()">
<svg cdsIcon="trash-can" size="16"></svg>
</button>
</ng-template>
</span>
<span *ngIf="fileItem.state === 'upload'">
<div class="cds--inline-loading__animation">
<cds-loading size="sm"></cds-loading>
</div>
</span>
<span
*ngIf="fileItem.state === 'complete'"
class="cds--file__state-container">
<svg
cdsIcon="checkmark--filled"
size="16"
class="cds--file-complete"
[]="translations.CHECKMARK">
</svg>
</span>
<div
class="cds--form-requirement"
role="alert"
*ngIf="fileItem.invalid">
<div class="cds--form-requirement__title">
{{ fileItem.invalidTitle }}
</div>
<p class="cds--form-requirement__supplement">
{{ fileItem.invalidText }}
</p>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i4.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "directive", type: i5.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FileComponent, decorators: [{
type: Component,
args: [{
selector: "cds-file, ibm-file",
template: `
<p class="cds--file-filename" [title]="fileItem.file.name">
<ng-template
*ngIf="isTemplate(nameTpl); else defaultName"
[]="nameTpl"
[]="{ $implicit: fileItem }">
</ng-template>
<ng-template
</p>
<span *ngIf="fileItem.state === 'edit'" class="cds--file__state-container">
<svg
*ngIf="isInvalidText"
cdsIcon="warning--filled"
class="cds--file--invalid"
size="16">
</svg>
<ng-template
*ngIf="isTemplate(actionsTpl); else defaultActions"
[]="actionsTpl"
[]="{ $implicit: fileItem }">
</ng-template>
<ng-template
<button
type="button"
cdsButton="ghost"
iconOnly="true"
[]="size"
[]="translations.REMOVE_BUTTON"
(click)="remove.emit()"
(keyup.enter)="remove.emit()"
(keyup.space)="remove.emit()">
<svg cdsIcon="trash-can" size="16"></svg>
</button>
</ng-template>
</span>
<span *ngIf="fileItem.state === 'upload'">
<div class="cds--inline-loading__animation">
<cds-loading size="sm"></cds-loading>
</div>
</span>
<span
*ngIf="fileItem.state === 'complete'"
class="cds--file__state-container">
<svg
cdsIcon="checkmark--filled"
size="16"
class="cds--file-complete"
[]="translations.CHECKMARK">
</svg>
</span>
<div
class="cds--form-requirement"
role="alert"
*ngIf="fileItem.invalid">
<div class="cds--form-requirement__title">
{{ fileItem.invalidTitle }}
</div>
<p class="cds--form-requirement__supplement">
{{ fileItem.invalidText }}
</p>
</div>
`
}]
}], ctorParameters: function () { return [{ type: i1.I18n }]; }, propDecorators: { translations: [{
type: Input
}], fileItem: [{
type: Input
}], size: [{
type: Input
}], nameTpl: [{
type: Input
}], actionsTpl: [{
type: Input
}], remove: [{
type: Output
}], selectedFile: [{
type: HostBinding,
args: ["class.cds--file__selected-file"]
}], isInvalidText: [{
type: HostBinding,
args: ["class.cds--file__selected-file--invalid"]
}], fileSizeSmall: [{
type: HostBinding,
args: ["class.cds--file__selected-file--sm"]
}], fileSizeMedium: [{
type: HostBinding,
args: ["class.cds--file__selected-file--md"]
}], fileSizeLarge: [{
type: HostBinding,
args: ["class.cds--file__selected-file--lg"]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmlsZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvZmlsZS11cGxvYWRlci9maWxlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ04sU0FBUyxFQUNULFlBQVksRUFDWixXQUFXLEVBQ1gsS0FBSyxFQUVMLE1BQU0sRUFDTixXQUFXLEVBQ1gsTUFBTSxlQUFlLENBQUM7Ozs7Ozs7QUFzRXZCLE1BQU0sT0FBTyxhQUFhO0lBMEN6QixZQUFzQixJQUFVO1FBQVYsU0FBSSxHQUFKLElBQUksQ0FBTTtRQXpDaEM7O1dBRUc7UUFDTSxpQkFBWSxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsR0FBRyxFQUFFLENBQUMsYUFBYSxDQUFDO1FBTTdDLFNBQUksR0FBdUIsSUFBSSxDQUFDO1FBWS9CLFdBQU0sR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBRVMsaUJBQVksR0FBRyxJQUFJLENBQUM7SUFrQmhDLENBQUM7SUFoQnBDLElBQTRELGFBQWE7UUFDeEUsT0FBTyxJQUFJLENBQUMsUUFBUSxDQUFDLFdBQVcsQ0FBQztJQUNsQyxDQUFDO0lBRUQsSUFBdUQsYUFBYTtRQUNuRSxPQUFPLElBQUksQ0FBQyxJQUFJLEtBQUssSUFBSSxDQUFDO0lBQzNCLENBQUM7SUFFRCxJQUF1RCxjQUFjO1FBQ3BFLE9BQU8sSUFBSSxDQUFDLElBQUksS0FBSyxJQUFJLENBQUM7SUFDM0IsQ0FBQztJQUVELElBQXVELGFBQWE7UUFDbkUsT0FBTyxJQUFJLENBQUMsSUFBSSxLQUFLLElBQUksQ0FBQztJQUMzQixDQUFDO0lBSU0sVUFBVSxDQUFDLEtBQWM7UUFDL0IsT0FBTyxLQUFLLFlBQVksV0FBVyxDQUFDO0lBQ3JDLENBQUM7SUFFRCxXQUFXO1FBQ1YsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUNwQixDQUFDOzswR0FsRFcsYUFBYTs4RkFBYixhQUFhLDRoQkEvRGY7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7RUE2RFQ7MkZBRVcsYUFBYTtrQkFqRXpCLFNBQVM7bUJBQUM7b0JBQ1YsUUFBUSxFQUFFLG9CQUFvQjtvQkFDOUIsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0VBNkRUO2lCQUNEOzJGQUtTLFlBQVk7c0JBQXBCLEtBQUs7Z0JBSUcsUUFBUTtzQkFBaEIsS0FBSztnQkFFRyxJQUFJO3NCQUFaLEtBQUs7Z0JBS0csT0FBTztzQkFBZixLQUFLO2dCQUtHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBRUksTUFBTTtzQkFBZixNQUFNO2dCQUV3QyxZQUFZO3NCQUExRCxXQUFXO3VCQUFDLGdDQUFnQztnQkFFZSxhQUFhO3NCQUF4RSxXQUFXO3VCQUFDLHlDQUF5QztnQkFJQyxhQUFhO3NCQUFuRSxXQUFXO3VCQUFDLG9DQUFvQztnQkFJTSxjQUFjO3NCQUFwRSxXQUFXO3VCQUFDLG9DQUFvQztnQkFJTSxhQUFhO3NCQUFuRSxXQUFXO3VCQUFDLG9DQUFvQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG5cdENvbXBvbmVudCxcblx0RXZlbnRFbWl0dGVyLFxuXHRIb3N0QmluZGluZyxcblx0SW5wdXQsXG5cdE9uRGVzdHJveSxcblx0T3V0cHV0LFxuXHRUZW1wbGF0ZVJlZlxufSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuXG5pbXBvcnQgeyBJMThuIH0gZnJvbSBcImNhcmJvbi1jb21wb25lbnRzLWFuZ3VsYXIvaTE4blwiO1xuaW1wb3J0IHsgRmlsZUl0ZW0gfSBmcm9tIFwiLi9maWxlLWl0ZW0uaW50ZXJmYWNlXCI7XG5cbkBDb21wb25lbnQoe1xuXHRzZWxlY3RvcjogXCJjZHMtZmlsZSwgaWJtLWZpbGVcIixcblx0dGVtcGxhdGU6IGBcblx0XHQ8cCBjbGFzcz1cImNkcy0tZmlsZS1maWxlbmFtZVwiIFt0aXRsZV09XCJmaWxlSXRlbS5maWxlLm5hbWVcIj5cblx0XHRcdDxuZy10ZW1wbGF0ZVxuXHRcdFx0XHQqbmdJZj1cImlzVGVtcGxhdGUobmFtZVRwbCk7IGVsc2UgZGVmYXVsdE5hbWVcIlxuXHRcdFx0XHRbbmdUZW1wbGF0ZU91dGxldF09XCJuYW1lVHBsXCJcblx0XHRcdFx0W25nVGVtcGxhdGVPdXRsZXRDb250ZXh0XT1cInsgJGltcGxpY2l0OiBmaWxlSXRlbSB9XCI+XG5cdFx0XHQ8L25nLXRlbXBsYXRlPlxuXHRcdFx0PG5nLXRlbXBsYXRlICNkZWZhdWx0TmFtZT57eyBmaWxlSXRlbS5maWxlLm5hbWUgfX08L25nLXRlbXBsYXRlPlxuXHRcdDwvcD5cblx0XHQ8c3BhbiAqbmdJZj1cImZpbGVJdGVtLnN0YXRlID09PSAnZWRpdCdcIiBjbGFzcz1cImNkcy0tZmlsZV9fc3RhdGUtY29udGFpbmVyXCI+XG5cdFx0XHQ8c3ZnXG5cdFx0XHRcdCpuZ0lmPVwiaXNJbnZhbGlkVGV4dFwiXG5cdFx0XHRcdGNkc0ljb249XCJ3YXJuaW5nLS1maWxsZWRcIlxuXHRcdFx0XHRjbGFzcz1cImNkcy0tZmlsZS0taW52YWxpZFwiXG5cdFx0XHRcdHNpemU9XCIxNlwiPlxuXHRcdFx0PC9zdmc+XG5cdFx0XHQ8bmctdGVtcGxhdGVcblx0XHRcdFx0Km5nSWY9XCJpc1RlbXBsYXRlKGFjdGlvbnNUcGwpOyBlbHNlIGRlZmF1bHRBY3Rpb25zXCJcblx0XHRcdFx0W25nVGVtcGxhdGVPdXRsZXRdPVwiYWN0aW9uc1RwbFwiXG5cdFx0XHRcdFtuZ1RlbXBsYXRlT3V0bGV0Q29udGV4dF09XCJ7ICRpbXBsaWNpdDogZmlsZUl0ZW0gfVwiPlxuXHRcdFx0PC9uZy10ZW1wbGF0ZT5cblx0XHRcdDxuZy10ZW1wbGF0ZSAjZGVmYXVsdEFjdGlvbnM+XG5cdFx0XHRcdDxidXR0b25cblx0XHRcdFx0XHR0eXBlPVwiYnV0dG9uXCJcblx0XHRcdFx0XHRjZHNCdXR0b249XCJnaG9zdFwiXG5cdFx0XHRcdFx0aWNvbk9ubHk9XCJ0cnVlXCJcblx0XHRcdFx0XHRbc2l6ZV09XCJzaXplXCJcblx0XHRcdFx0XHRbYXR0ci5hcmlhLWxhYmVsXT1cInRyYW5zbGF0aW9ucy5SRU1PVkVfQlVUVE9OXCJcblx0XHRcdFx0XHQoY2xpY2spPVwicmVtb3ZlLmVtaXQoKVwiXG5cdFx0XHRcdFx0KGtleXVwLmVudGVyKT1cInJlbW92ZS5lbWl0KClcIlxuXHRcdFx0XHRcdChrZXl1cC5zcGFjZSk9XCJyZW1vdmUuZW1pdCgpXCI+XG5cdFx0XHRcdFx0PHN2ZyBjZHNJY29uPVwidHJhc2gtY2FuXCIgc2l6ZT1cIjE2XCI+PC9zdmc+XG5cdFx0XHRcdDwvYnV0dG9uPlxuXHRcdFx0PC9uZy10ZW1wbGF0ZT5cblx0XHQ8L3NwYW4+XG5cdFx0PHNwYW4gKm5nSWY9XCJmaWxlSXRlbS5zdGF0ZSA9PT0gJ3VwbG9hZCdcIj5cblx0XHRcdDxkaXYgY2xhc3M9XCJjZHMtLWlubGluZS1sb2FkaW5nX19hbmltYXRpb25cIj5cblx0XHRcdFx0PGNkcy1sb2FkaW5nIHNpemU9XCJzbVwiPjwvY2RzLWxvYWRpbmc+XG5cdFx0XHQ8L2Rpdj5cblx0XHQ8L3NwYW4+XG5cdFx0PHNwYW5cblx0XHRcdCpuZ0lmPVwiZmlsZUl0ZW0uc3RhdGUgPT09ICdjb21wbGV0ZSdcIlxuXHRcdFx0Y2xhc3M9XCJjZHMtLWZpbGVfX3N0YXRlLWNvbnRhaW5lclwiPlxuXHRcdFx0PHN2Z1xuXHRcdFx0XHRjZHNJY29uPVwiY2hlY2ttYXJrLS1maWxsZWRcIlxuXHRcdFx0XHRzaXplPVwiMTZcIlxuXHRcdFx0XHRjbGFzcz1cImNkcy0tZmlsZS1jb21wbGV0ZVwiXG5cdFx0XHRcdFthcmlhTGFiZWxdPVwidHJhbnNsYXRpb25zLkNIRUNLTUFSS1wiPlxuXHRcdFx0PC9zdmc+XG5cdFx0PC9zcGFuPlxuXHRcdDxkaXZcblx0XHRcdGNsYXNzPVwiY2RzLS1mb3JtLXJlcXVpcmVtZW50XCJcblx0XHRcdHJvbGU9XCJhbGVydFwiXG5cdFx0XHQqbmdJZj1cImZpbGVJdGVtLmludmFsaWRcIj5cblx0XHRcdDxkaXYgY2xhc3M9XCJjZHMtLWZvcm0tcmVxdWlyZW1lbnRfX3RpdGxlXCI+XG5cdFx0XHRcdHt7IGZpbGVJdGVtLmludmFsaWRUaXRsZSB9fVxuXHRcdFx0PC9kaXY+XG5cdFx0XHQ8cCBjbGFzcz1cImNkcy0tZm9ybS1yZXF1aXJlbWVudF9fc3VwcGxlbWVudFwiPlxuXHRcdFx0XHR7eyBmaWxlSXRlbS5pbnZhbGlkVGV4dCB9fVxuXHRcdFx0PC9wPlxuXHRcdDwvZGl2PlxuXHRgXG59KVxuZXhwb3J0IGNsYXNzIEZpbGVDb21wb25lbnQgaW1wbGVtZW50cyBPbkRlc3Ryb3kge1xuXHQvKipcblx0ICogQWNjZXNzaWJsZSB0cmFuc2xhdGlvbnMgZm9yIHRoZSBjbG9zZSBhbmQgY29tcGxldGUgaWNvbnNcblx0ICovXG5cdEBJbnB1dCgpIHRyYW5zbGF0aW9ucyA9IHRoaXMuaTE4bi5nZXQoKS5GSUxFX1VQTE9BREVSO1xuXHQvKipcblx0ICogQSBzaW5nbGUgYEZpbGVJdGVtYCBmcm9tIHRoZSBzZXQgb2YgYEZpbGVJdGVtYHNcblx0ICovXG5cdEBJbnB1dCgpIGZpbGVJdGVtOiBGaWxlSXRlbTtcblxuXHRASW5wdXQoKSBzaXplOiBcInNtXCIgfCBcIm1kXCIgfCBcImxnXCIgPSBcImxnXCI7XG5cblx0LyoqXG5cdCAqIEEgY3VzdG9tIHRlbXBsYXRlIGZvciB0aGUgZmlsZSBuYW1lXG5cdCAqL1xuXHRASW5wdXQoKSBuYW1lVHBsOiBUZW1wbGF0ZVJlZjx1bmtub3duPjtcblxuXHQvKipcblx0ICogQSBjdXN0b20gdGVtcGxhdGUgZm9yIHRoZSBhdmFpbGFibGUgZmlsZSBhY3Rpb25zXG5cdCAqL1xuXHRASW5wdXQoKSBhY3Rpb25zVHBsOiBUZW1wbGF0ZVJlZjx1bmtub3duPjtcblxuXHRAT3V0cHV0KCkgcmVtb3ZlID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG5cdEBIb3N0QmluZGluZyhcImNsYXNzLmNkcy0tZmlsZV9fc2VsZWN0ZWQtZmlsZVwiKSBzZWxlY3RlZEZpbGUgPSB0cnVlO1xuXG5cdEBIb3N0QmluZGluZyhcImNsYXNzLmNkcy0tZmlsZV9fc2VsZWN0ZWQtZmlsZS0taW52YWxpZFwiKSBnZXQgaXNJbnZhbGlkVGV4dCgpIHtcblx0XHRyZXR1cm4gdGhpcy5maWxlSXRlbS5pbnZhbGlkVGV4dDtcblx0fVxuXG5cdEBIb3N0QmluZGluZyhcImNsYXNzLmNkcy0tZmlsZV9fc2VsZWN0ZWQtZmlsZS0tc21cIikgZ2V0IGZpbGVTaXplU21hbGwoKSB7XG5cdFx0cmV0dXJuIHRoaXMuc2l6ZSA9PT0gXCJzbVwiO1xuXHR9XG5cblx0QEhvc3RCaW5kaW5nKFwiY2xhc3MuY2RzLS1maWxlX19zZWxlY3RlZC1maWxlLS1tZFwiKSBnZXQgZmlsZVNpemVNZWRpdW0oKSB7XG5cdFx0cmV0dXJuIHRoaXMuc2l6ZSA9PT0gXCJtZFwiO1xuXHR9XG5cblx0QEhvc3RCaW5kaW5nKFwiY2xhc3MuY2RzLS1maWxlX19zZWxlY3RlZC1maWxlLS1sZ1wiKSBnZXQgZmlsZVNpemVMYXJnZSgpIHtcblx0XHRyZXR1cm4gdGhpcy5zaXplID09PSBcImxnXCI7XG5cdH1cblxuXHRjb25zdHJ1Y3Rvcihwcm90ZWN0ZWQgaTE4bjogSTE4bikge31cblxuXHRwdWJsaWMgaXNUZW1wbGF0ZSh2YWx1ZTogdW5rbm93bik6IGJvb2xlYW4ge1xuXHRcdHJldHVybiB2YWx1ZSBpbnN0YW5jZW9mIFRlbXBsYXRlUmVmO1xuXHR9XG5cblx0bmdPbkRlc3Ryb3koKSB7XG5cdFx0dGhpcy5yZW1vdmUuZW1pdCgpO1xuXHR9XG59XG4iXX0=