carbon-components-angular
Version:
Next generation components
144 lines • 11.4 kB
JavaScript
import { Component, Input, Output, EventEmitter, HostBinding } 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/loading";
import * as i4 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";
}
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" }, 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">{{fileItem.file.name}}</p>
<span
*ngIf="fileItem.state === 'edit'"
class="cds--file__state-container">
<svg
*ngIf="isInvalidText"
cdsIcon="warning--filled"
class="cds--file--invalid"
size="16">
</svg>
<button
type="button"
class="cds--file-close"
[]="translations.REMOVE_BUTTON"
tabindex="0"
(click)="remove.emit()"
(keyup.enter)="remove.emit()"
(keyup.space)="remove.emit()">
<svg cdsIcon="close" size="16"></svg>
</button>
</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: "component", type: i3.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "directive", type: i4.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">{{fileItem.file.name}}</p>
<span
*ngIf="fileItem.state === 'edit'"
class="cds--file__state-container">
<svg
*ngIf="isInvalidText"
cdsIcon="warning--filled"
class="cds--file--invalid"
size="16">
</svg>
<button
type="button"
class="cds--file-close"
[]="translations.REMOVE_BUTTON"
tabindex="0"
(click)="remove.emit()"
(keyup.enter)="remove.emit()"
(keyup.space)="remove.emit()">
<svg cdsIcon="close" size="16"></svg>
</button>
</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
}], 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmlsZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvZmlsZS11cGxvYWRlci9maWxlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ04sU0FBUyxFQUNULEtBQUssRUFDTCxNQUFNLEVBQ04sWUFBWSxFQUNaLFdBQVcsRUFFWCxNQUFNLGVBQWUsQ0FBQzs7Ozs7O0FBZ0R2QixNQUFNLE9BQU8sYUFBYTtJQStCekIsWUFBc0IsSUFBVTtRQUFWLFNBQUksR0FBSixJQUFJLENBQU07UUE5QmhDOztXQUVHO1FBQ00saUJBQVksR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLEdBQUcsRUFBRSxDQUFDLGFBQWEsQ0FBQztRQU03QyxTQUFJLEdBQXVCLElBQUksQ0FBQztRQUUvQixXQUFNLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUVTLGlCQUFZLEdBQUcsSUFBSSxDQUFDO0lBaUJoQyxDQUFDO0lBZnBDLElBQTRELGFBQWE7UUFDeEUsT0FBTyxJQUFJLENBQUMsUUFBUSxDQUFDLFdBQVcsQ0FBQztJQUNsQyxDQUFDO0lBRUQsSUFBdUQsYUFBYTtRQUNuRSxPQUFPLElBQUksQ0FBQyxJQUFJLEtBQUssSUFBSSxDQUFDO0lBQzNCLENBQUM7SUFFRCxJQUF1RCxjQUFjO1FBQ3BFLE9BQU8sSUFBSSxDQUFDLElBQUksS0FBSyxJQUFJLENBQUM7SUFDM0IsQ0FBQztJQUVELElBQXVELGFBQWE7UUFDbkUsT0FBTyxJQUFJLENBQUMsSUFBSSxLQUFLLElBQUksQ0FBQztJQUMzQixDQUFDO0lBR0QsV0FBVztRQUNWLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDcEIsQ0FBQzs7MEdBbkNXLGFBQWE7OEZBQWIsYUFBYSw4ZUF6Q2Y7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztFQXVDVDsyRkFFVyxhQUFhO2tCQTNDekIsU0FBUzttQkFBQztvQkFDVixRQUFRLEVBQUUsb0JBQW9CO29CQUM5QixRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztFQXVDVDtpQkFDRDsyRkFLUyxZQUFZO3NCQUFwQixLQUFLO2dCQUlHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBRUcsSUFBSTtzQkFBWixLQUFLO2dCQUVJLE1BQU07c0JBQWYsTUFBTTtnQkFFd0MsWUFBWTtzQkFBMUQsV0FBVzt1QkFBQyxnQ0FBZ0M7Z0JBRWUsYUFBYTtzQkFBeEUsV0FBVzt1QkFBQyx5Q0FBeUM7Z0JBSUMsYUFBYTtzQkFBbkUsV0FBVzt1QkFBQyxvQ0FBb0M7Z0JBSU0sY0FBYztzQkFBcEUsV0FBVzt1QkFBQyxvQ0FBb0M7Z0JBSU0sYUFBYTtzQkFBbkUsV0FBVzt1QkFBQyxvQ0FBb0MiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuXHRDb21wb25lbnQsXG5cdElucHV0LFxuXHRPdXRwdXQsXG5cdEV2ZW50RW1pdHRlcixcblx0SG9zdEJpbmRpbmcsXG5cdE9uRGVzdHJveVxufSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuXG5pbXBvcnQgeyBJMThuIH0gZnJvbSBcImNhcmJvbi1jb21wb25lbnRzLWFuZ3VsYXIvaTE4blwiO1xuaW1wb3J0IHsgRmlsZUl0ZW0gfSBmcm9tIFwiLi9maWxlLWl0ZW0uaW50ZXJmYWNlXCI7XG5cbkBDb21wb25lbnQoe1xuXHRzZWxlY3RvcjogXCJjZHMtZmlsZSwgaWJtLWZpbGVcIixcblx0dGVtcGxhdGU6IGBcblx0XHQ8cCBjbGFzcz1cImNkcy0tZmlsZS1maWxlbmFtZVwiIFt0aXRsZV09XCJmaWxlSXRlbS5maWxlLm5hbWVcIj57e2ZpbGVJdGVtLmZpbGUubmFtZX19PC9wPlxuXHRcdDxzcGFuXG5cdFx0XHQqbmdJZj1cImZpbGVJdGVtLnN0YXRlID09PSAnZWRpdCdcIlxuXHRcdFx0Y2xhc3M9XCJjZHMtLWZpbGVfX3N0YXRlLWNvbnRhaW5lclwiPlxuXHRcdFx0PHN2Z1xuXHRcdFx0XHQqbmdJZj1cImlzSW52YWxpZFRleHRcIlxuXHRcdFx0XHRjZHNJY29uPVwid2FybmluZy0tZmlsbGVkXCJcblx0XHRcdFx0Y2xhc3M9XCJjZHMtLWZpbGUtLWludmFsaWRcIlxuXHRcdFx0XHRzaXplPVwiMTZcIj5cblx0XHRcdDwvc3ZnPlxuXHRcdFx0PGJ1dHRvblxuXHRcdFx0XHR0eXBlPVwiYnV0dG9uXCJcblx0XHRcdFx0Y2xhc3M9XCJjZHMtLWZpbGUtY2xvc2VcIlxuXHRcdFx0XHRbYXR0ci5hcmlhLWxhYmVsXT1cInRyYW5zbGF0aW9ucy5SRU1PVkVfQlVUVE9OXCJcblx0XHRcdFx0dGFiaW5kZXg9XCIwXCJcblx0XHRcdFx0KGNsaWNrKT1cInJlbW92ZS5lbWl0KClcIlxuXHRcdFx0XHQoa2V5dXAuZW50ZXIpPVwicmVtb3ZlLmVtaXQoKVwiXG5cdFx0XHRcdChrZXl1cC5zcGFjZSk9XCJyZW1vdmUuZW1pdCgpXCI+XG5cdFx0XHRcdDxzdmcgY2RzSWNvbj1cImNsb3NlXCIgc2l6ZT1cIjE2XCI+PC9zdmc+XG5cdFx0XHQ8L2J1dHRvbj5cblx0XHQ8L3NwYW4+XG5cdFx0PHNwYW4gKm5nSWY9XCJmaWxlSXRlbS5zdGF0ZSA9PT0gJ3VwbG9hZCdcIj5cblx0XHRcdDxkaXYgY2xhc3M9XCJjZHMtLWlubGluZS1sb2FkaW5nX19hbmltYXRpb25cIj5cblx0XHRcdFx0PGNkcy1sb2FkaW5nIHNpemU9XCJzbVwiPjwvY2RzLWxvYWRpbmc+XG5cdFx0XHQ8L2Rpdj5cblx0XHQ8L3NwYW4+XG5cdFx0PHNwYW4gKm5nSWY9XCJmaWxlSXRlbS5zdGF0ZSA9PT0gJ2NvbXBsZXRlJ1wiIGNsYXNzPVwiY2RzLS1maWxlX19zdGF0ZS1jb250YWluZXJcIj5cblx0XHRcdDxzdmdcblx0XHRcdFx0Y2RzSWNvbj1cImNoZWNrbWFyay0tZmlsbGVkXCJcblx0XHRcdFx0c2l6ZT1cIjE2XCJcblx0XHRcdFx0Y2xhc3M9XCJjZHMtLWZpbGUtY29tcGxldGVcIlxuXHRcdFx0XHRbYXJpYUxhYmVsXT1cInRyYW5zbGF0aW9ucy5DSEVDS01BUktcIj5cblx0XHRcdDwvc3ZnPlxuXHRcdDwvc3Bhbj5cblx0XHQ8ZGl2IGNsYXNzPVwiY2RzLS1mb3JtLXJlcXVpcmVtZW50XCIgcm9sZT1cImFsZXJ0XCIgKm5nSWY9XCJmaWxlSXRlbS5pbnZhbGlkXCI+XG5cdFx0XHQ8ZGl2IGNsYXNzPVwiY2RzLS1mb3JtLXJlcXVpcmVtZW50X190aXRsZVwiPnt7ZmlsZUl0ZW0uaW52YWxpZFRpdGxlfX08L2Rpdj5cblx0XHRcdDxwIGNsYXNzPVwiY2RzLS1mb3JtLXJlcXVpcmVtZW50X19zdXBwbGVtZW50XCI+e3tmaWxlSXRlbS5pbnZhbGlkVGV4dH19PC9wPlxuXHRcdDwvZGl2PlxuXHRgXG59KVxuZXhwb3J0IGNsYXNzIEZpbGVDb21wb25lbnQgaW1wbGVtZW50cyBPbkRlc3Ryb3kge1xuXHQvKipcblx0ICogQWNjZXNzaWJsZSB0cmFuc2xhdGlvbnMgZm9yIHRoZSBjbG9zZSBhbmQgY29tcGxldGUgaWNvbnNcblx0ICovXG5cdEBJbnB1dCgpIHRyYW5zbGF0aW9ucyA9IHRoaXMuaTE4bi5nZXQoKS5GSUxFX1VQTE9BREVSO1xuXHQvKipcblx0ICogQSBzaW5nbGUgYEZpbGVJdGVtYCBmcm9tIHRoZSBzZXQgb2YgYEZpbGVJdGVtYHNcblx0ICovXG5cdEBJbnB1dCgpIGZpbGVJdGVtOiBGaWxlSXRlbTtcblxuXHRASW5wdXQoKSBzaXplOiBcInNtXCIgfCBcIm1kXCIgfCBcImxnXCIgPSBcImxnXCI7XG5cblx0QE91dHB1dCgpIHJlbW92ZSA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuXHRASG9zdEJpbmRpbmcoXCJjbGFzcy5jZHMtLWZpbGVfX3NlbGVjdGVkLWZpbGVcIikgc2VsZWN0ZWRGaWxlID0gdHJ1ZTtcblxuXHRASG9zdEJpbmRpbmcoXCJjbGFzcy5jZHMtLWZpbGVfX3NlbGVjdGVkLWZpbGUtLWludmFsaWRcIikgZ2V0IGlzSW52YWxpZFRleHQoKSB7XG5cdFx0cmV0dXJuIHRoaXMuZmlsZUl0ZW0uaW52YWxpZFRleHQ7XG5cdH1cblxuXHRASG9zdEJpbmRpbmcoXCJjbGFzcy5jZHMtLWZpbGVfX3NlbGVjdGVkLWZpbGUtLXNtXCIpIGdldCBmaWxlU2l6ZVNtYWxsKCkge1xuXHRcdHJldHVybiB0aGlzLnNpemUgPT09IFwic21cIjtcblx0fVxuXG5cdEBIb3N0QmluZGluZyhcImNsYXNzLmNkcy0tZmlsZV9fc2VsZWN0ZWQtZmlsZS0tbWRcIikgZ2V0IGZpbGVTaXplTWVkaXVtKCkge1xuXHRcdHJldHVybiB0aGlzLnNpemUgPT09IFwibWRcIjtcblx0fVxuXG5cdEBIb3N0QmluZGluZyhcImNsYXNzLmNkcy0tZmlsZV9fc2VsZWN0ZWQtZmlsZS0tbGdcIikgZ2V0IGZpbGVTaXplTGFyZ2UoKSB7XG5cdFx0cmV0dXJuIHRoaXMuc2l6ZSA9PT0gXCJsZ1wiO1xuXHR9XG5cdGNvbnN0cnVjdG9yKHByb3RlY3RlZCBpMThuOiBJMThuKSB7fVxuXG5cdG5nT25EZXN0cm95KCkge1xuXHRcdHRoaXMucmVtb3ZlLmVtaXQoKTtcblx0fVxufVxuIl19