@spartacus/storefront
Version:
Spartacus Storefront is a package that you can include in your application, which allows you to add default storefront features.
85 lines • 10.6 kB
JavaScript
import { Component, EventEmitter, forwardRef, Input, Output, ViewChild, } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@spartacus/core";
/**
* Component that adds a file upload control.
*/
export class FileUploadComponent {
constructor() {
/**
* Allowed file types. It's setting attribute used for OS window for choosing files.
*/
this.accept = '*';
/**
* Allows selecting multiple files.
*/
this.multiple = false;
// TODO: remove this event. Now it's used only to trigger some logic in the parent component.
// Prerequisites (changes in the parent component):
// - use an async validator that "opens file" using the value of the form control
// - "open file" on form submit, but not on the form control change
this.update = new EventEmitter();
// ControlValueAccessor START
this.onChangeCallback = () => { };
this.onTouchedCallback = () => { };
}
selectFile($event) {
var _a;
const files = (_a = $event.target) === null || _a === void 0 ? void 0 : _a.files;
this.onChangeCallback(files);
this.update.emit(files);
}
get selectedFiles() {
return Array.from(this.fileInput.nativeElement.files);
}
registerOnChange(callback) {
this.onChangeCallback = callback;
}
registerOnTouched(callback) {
this.onTouchedCallback = callback;
}
setDisabledState(disabled) {
this.fileInput.nativeElement.disabled = disabled;
}
writeValue(value) {
if (value instanceof FileList) {
this.fileInput.nativeElement.files = value;
}
}
}
FileUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
FileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: FileUploadComponent, selector: "cx-file-upload", inputs: { accept: "accept", multiple: "multiple" }, outputs: { update: "update" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => FileUploadComponent),
multi: true,
},
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, static: true }], ngImport: i0, template: "<input\n type=\"file\"\n aria-hidden=\"true\"\n [accept]=\"accept\"\n [multiple]=\"multiple\"\n (change)=\"selectFile($event)\"\n #fileInput\n/>\n<button\n [attr.aria-label]=\"'common.selectFile' | cxTranslate\"\n class=\"btn btn-action\"\n type=\"button\"\n (click)=\"fileInput.click()\"\n>\n <ng-content></ng-content>\n</button>\n<p *ngFor=\"let file of selectedFiles\">\n {{ file?.name }}\n</p>\n", directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "cxTranslate": i2.TranslatePipe } });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: FileUploadComponent, decorators: [{
type: Component,
args: [{
selector: 'cx-file-upload',
templateUrl: './file-upload.component.html',
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => FileUploadComponent),
multi: true,
},
],
// we cannot use onPush change detection as the form state isn't updated without explicit
// change detection, see https://github.com/angular/angular/issues/10816
}]
}], propDecorators: { accept: [{
type: Input
}], multiple: [{
type: Input
}], update: [{
type: Output
}], fileInput: [{
type: ViewChild,
args: ['fileInput', { static: true }]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmlsZS11cGxvYWQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc3RvcmVmcm9udGxpYi9zaGFyZWQvY29tcG9uZW50cy9mb3JtL2ZpbGUtdXBsb2FkL2ZpbGUtdXBsb2FkLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3N0b3JlZnJvbnRsaWIvc2hhcmVkL2NvbXBvbmVudHMvZm9ybS9maWxlLXVwbG9hZC9maWxlLXVwbG9hZC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUVULFlBQVksRUFDWixVQUFVLEVBQ1YsS0FBSyxFQUNMLE1BQU0sRUFDTixTQUFTLEdBQ1YsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUF3QixpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7O0FBRXpFOztHQUVHO0FBY0gsTUFBTSxPQUFPLG1CQUFtQjtJQWJoQztRQWNFOztXQUVHO1FBQ00sV0FBTSxHQUF1QixHQUFHLENBQUM7UUFDMUM7O1dBRUc7UUFDTSxhQUFRLEdBQWEsS0FBSyxDQUFDO1FBRXBDLDZGQUE2RjtRQUM3RixtREFBbUQ7UUFDbkQsaUZBQWlGO1FBQ2pGLG1FQUFtRTtRQUVuRSxXQUFNLEdBQUcsSUFBSSxZQUFZLEVBQW1CLENBQUM7UUFlN0MsNkJBQTZCO1FBQ25CLHFCQUFnQixHQUFhLEdBQUcsRUFBRSxHQUFFLENBQUMsQ0FBQztRQUN0QyxzQkFBaUIsR0FBYSxHQUFHLEVBQUUsR0FBRSxDQUFDLENBQUM7S0FnQmxEO0lBNUJDLFVBQVUsQ0FBQyxNQUFhOztRQUN0QixNQUFNLEtBQUssR0FBRyxNQUFDLE1BQU0sQ0FBQyxNQUEyQiwwQ0FBRSxLQUFLLENBQUM7UUFDekQsSUFBSSxDQUFDLGdCQUFnQixDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQzdCLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzFCLENBQUM7SUFFRCxJQUFJLGFBQWE7UUFDZixPQUFPLEtBQUssQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDeEQsQ0FBQztJQUtELGdCQUFnQixDQUFDLFFBQWtCO1FBQ2pDLElBQUksQ0FBQyxnQkFBZ0IsR0FBRyxRQUFRLENBQUM7SUFDbkMsQ0FBQztJQUNELGlCQUFpQixDQUFDLFFBQWtCO1FBQ2xDLElBQUksQ0FBQyxpQkFBaUIsR0FBRyxRQUFRLENBQUM7SUFDcEMsQ0FBQztJQUNELGdCQUFnQixDQUFDLFFBQWlCO1FBQ2hDLElBQUksQ0FBQyxTQUFTLENBQUMsYUFBYSxDQUFDLFFBQVEsR0FBRyxRQUFRLENBQUM7SUFDbkQsQ0FBQztJQUNELFVBQVUsQ0FBQyxLQUFVO1FBQ25CLElBQUksS0FBSyxZQUFZLFFBQVEsRUFBRTtZQUM3QixJQUFJLENBQUMsU0FBUyxDQUFDLGFBQWEsQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDO1NBQzVDO0lBQ0gsQ0FBQzs7Z0hBOUNVLG1CQUFtQjtvR0FBbkIsbUJBQW1CLDRIQVZuQjtRQUNUO1lBQ0UsT0FBTyxFQUFFLGlCQUFpQjtZQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLG1CQUFtQixDQUFDO1lBQ2xELEtBQUssRUFBRSxJQUFJO1NBQ1o7S0FDRixnSkN2QkgsNlpBbUJBOzJGRFFhLG1CQUFtQjtrQkFiL0IsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsZ0JBQWdCO29CQUMxQixXQUFXLEVBQUUsOEJBQThCO29CQUMzQyxTQUFTLEVBQUU7d0JBQ1Q7NEJBQ0UsT0FBTyxFQUFFLGlCQUFpQjs0QkFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsb0JBQW9CLENBQUM7NEJBQ2xELEtBQUssRUFBRSxJQUFJO3lCQUNaO3FCQUNGO29CQUNELHlGQUF5RjtvQkFDekYsd0VBQXdFO2lCQUN6RTs4QkFLVSxNQUFNO3NCQUFkLEtBQUs7Z0JBSUcsUUFBUTtzQkFBaEIsS0FBSztnQkFPTixNQUFNO3NCQURMLE1BQU07Z0JBSUcsU0FBUztzQkFEbEIsU0FBUzt1QkFBQyxXQUFXLEVBQUUsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBFbGVtZW50UmVmLFxuICBFdmVudEVtaXR0ZXIsXG4gIGZvcndhcmRSZWYsXG4gIElucHV0LFxuICBPdXRwdXQsXG4gIFZpZXdDaGlsZCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb250cm9sVmFsdWVBY2Nlc3NvciwgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5cbi8qKlxuICogQ29tcG9uZW50IHRoYXQgYWRkcyBhIGZpbGUgdXBsb2FkIGNvbnRyb2wuXG4gKi9cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2N4LWZpbGUtdXBsb2FkJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2ZpbGUtdXBsb2FkLmNvbXBvbmVudC5odG1sJyxcbiAgcHJvdmlkZXJzOiBbXG4gICAge1xuICAgICAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXG4gICAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBGaWxlVXBsb2FkQ29tcG9uZW50KSxcbiAgICAgIG11bHRpOiB0cnVlLFxuICAgIH0sXG4gIF0sXG4gIC8vIHdlIGNhbm5vdCB1c2Ugb25QdXNoIGNoYW5nZSBkZXRlY3Rpb24gYXMgdGhlIGZvcm0gc3RhdGUgaXNuJ3QgdXBkYXRlZCB3aXRob3V0IGV4cGxpY2l0XG4gIC8vIGNoYW5nZSBkZXRlY3Rpb24sIHNlZSBodHRwczovL2dpdGh1Yi5jb20vYW5ndWxhci9hbmd1bGFyL2lzc3Vlcy8xMDgxNlxufSlcbmV4cG9ydCBjbGFzcyBGaWxlVXBsb2FkQ29tcG9uZW50IGltcGxlbWVudHMgQ29udHJvbFZhbHVlQWNjZXNzb3Ige1xuICAvKipcbiAgICogQWxsb3dlZCBmaWxlIHR5cGVzLiBJdCdzIHNldHRpbmcgYXR0cmlidXRlIHVzZWQgZm9yIE9TIHdpbmRvdyBmb3IgY2hvb3NpbmcgZmlsZXMuXG4gICAqL1xuICBASW5wdXQoKSBhY2NlcHQ/OiBzdHJpbmcgfCBzdHJpbmdbXSA9ICcqJztcbiAgLyoqXG4gICAqIEFsbG93cyBzZWxlY3RpbmcgbXVsdGlwbGUgZmlsZXMuXG4gICAqL1xuICBASW5wdXQoKSBtdWx0aXBsZT86IGJvb2xlYW4gPSBmYWxzZTtcblxuICAvLyBUT0RPOiByZW1vdmUgdGhpcyBldmVudC4gTm93IGl0J3MgdXNlZCBvbmx5IHRvIHRyaWdnZXIgc29tZSBsb2dpYyBpbiB0aGUgcGFyZW50IGNvbXBvbmVudC5cbiAgLy8gUHJlcmVxdWlzaXRlcyAoY2hhbmdlcyBpbiB0aGUgcGFyZW50IGNvbXBvbmVudCk6XG4gIC8vIC0gdXNlIGFuIGFzeW5jIHZhbGlkYXRvciB0aGF0IFwib3BlbnMgZmlsZVwiIHVzaW5nIHRoZSB2YWx1ZSBvZiB0aGUgZm9ybSBjb250cm9sXG4gIC8vIC0gXCJvcGVuIGZpbGVcIiBvbiBmb3JtIHN1Ym1pdCwgYnV0IG5vdCBvbiB0aGUgZm9ybSBjb250cm9sIGNoYW5nZVxuICBAT3V0cHV0KClcbiAgdXBkYXRlID0gbmV3IEV2ZW50RW1pdHRlcjxGaWxlTGlzdCB8IG51bGw+KCk7XG5cbiAgQFZpZXdDaGlsZCgnZmlsZUlucHV0JywgeyBzdGF0aWM6IHRydWUgfSlcbiAgcHJvdGVjdGVkIGZpbGVJbnB1dDogRWxlbWVudFJlZjxIVE1MSW5wdXRFbGVtZW50PjtcblxuICBzZWxlY3RGaWxlKCRldmVudDogRXZlbnQpIHtcbiAgICBjb25zdCBmaWxlcyA9ICgkZXZlbnQudGFyZ2V0IGFzIEhUTUxJbnB1dEVsZW1lbnQpPy5maWxlcztcbiAgICB0aGlzLm9uQ2hhbmdlQ2FsbGJhY2soZmlsZXMpO1xuICAgIHRoaXMudXBkYXRlLmVtaXQoZmlsZXMpO1xuICB9XG5cbiAgZ2V0IHNlbGVjdGVkRmlsZXMoKTogRmlsZVtdIHwgdW5kZWZpbmVkIHtcbiAgICByZXR1cm4gQXJyYXkuZnJvbSh0aGlzLmZpbGVJbnB1dC5uYXRpdmVFbGVtZW50LmZpbGVzKTtcbiAgfVxuXG4gIC8vIENvbnRyb2xWYWx1ZUFjY2Vzc29yIFNUQVJUXG4gIHByb3RlY3RlZCBvbkNoYW5nZUNhbGxiYWNrOiBGdW5jdGlvbiA9ICgpID0+IHt9O1xuICBwcm90ZWN0ZWQgb25Ub3VjaGVkQ2FsbGJhY2s6IEZ1bmN0aW9uID0gKCkgPT4ge307XG4gIHJlZ2lzdGVyT25DaGFuZ2UoY2FsbGJhY2s6IEZ1bmN0aW9uKTogdm9pZCB7XG4gICAgdGhpcy5vbkNoYW5nZUNhbGxiYWNrID0gY2FsbGJhY2s7XG4gIH1cbiAgcmVnaXN0ZXJPblRvdWNoZWQoY2FsbGJhY2s6IEZ1bmN0aW9uKTogdm9pZCB7XG4gICAgdGhpcy5vblRvdWNoZWRDYWxsYmFjayA9IGNhbGxiYWNrO1xuICB9XG4gIHNldERpc2FibGVkU3RhdGUoZGlzYWJsZWQ6IGJvb2xlYW4pOiB2b2lkIHtcbiAgICB0aGlzLmZpbGVJbnB1dC5uYXRpdmVFbGVtZW50LmRpc2FibGVkID0gZGlzYWJsZWQ7XG4gIH1cbiAgd3JpdGVWYWx1ZSh2YWx1ZTogYW55KTogdm9pZCB7XG4gICAgaWYgKHZhbHVlIGluc3RhbmNlb2YgRmlsZUxpc3QpIHtcbiAgICAgIHRoaXMuZmlsZUlucHV0Lm5hdGl2ZUVsZW1lbnQuZmlsZXMgPSB2YWx1ZTtcbiAgICB9XG4gIH1cbiAgLy8gQ29udHJvbFZhbHVlQWNjZXNzb3IgRU5EXG59XG4iLCI8aW5wdXRcbiAgdHlwZT1cImZpbGVcIlxuICBhcmlhLWhpZGRlbj1cInRydWVcIlxuICBbYWNjZXB0XT1cImFjY2VwdFwiXG4gIFttdWx0aXBsZV09XCJtdWx0aXBsZVwiXG4gIChjaGFuZ2UpPVwic2VsZWN0RmlsZSgkZXZlbnQpXCJcbiAgI2ZpbGVJbnB1dFxuLz5cbjxidXR0b25cbiAgW2F0dHIuYXJpYS1sYWJlbF09XCInY29tbW9uLnNlbGVjdEZpbGUnIHwgY3hUcmFuc2xhdGVcIlxuICBjbGFzcz1cImJ0biBidG4tYWN0aW9uXCJcbiAgdHlwZT1cImJ1dHRvblwiXG4gIChjbGljayk9XCJmaWxlSW5wdXQuY2xpY2soKVwiXG4+XG4gIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbjwvYnV0dG9uPlxuPHAgKm5nRm9yPVwibGV0IGZpbGUgb2Ygc2VsZWN0ZWRGaWxlc1wiPlxuICB7eyBmaWxlPy5uYW1lIH19XG48L3A+XG4iXX0=