@bmat/angular/fesm2015/bmat-angular-forms-uploaders.js

import { Injectable, Directive, ElementRef, Input, HostListener, HostBinding, EventEmitter, Component, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Output, ViewChild, NgModule } from '@angular/core';
import { Subject, Observable, combineLatest, of, Subscription } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { CommonModule } from '@angular/common';

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * Service to share the upload events between draggable zones
 * and inputs
 */
class UploadEventsService {
    constructor() {
        this._uploads$ = new Subject();
        this.events$ = this._uploads$.pipe(switchMap((/**
         * @param {?} obs
         * @return {?}
         */
        obs => this.mergeIndividualUploads(obs))));
    }
    // tslint:disable-next-line:max-func-body-length
    /**
     * @param {?} fileList
     * @param {?=} dataType
     * @return {?}
     */
    readFiles(fileList, dataType = 3 /* None */) {
        /** @type {?} */
        const fileObservables = [];
        if (fileList) {
            // tslint:disable-next-line:prefer-for-of
            for (let i = 0; i < fileList.length; i += 1) {
                fileObservables.push(this.fileReaderObsFactory(fileList[i], dataType));
            }
        }
        this._uploads$.next(fileObservables);
    }
    /**
     * @private
     * @param {?} obs
     * @return {?}
     */
    mergeIndividualUploads(obs) {
        return new Observable((/**
         * @param {?} observer
         * @return {?}
         */
        observer => {
            /** @type {?} */
            const subs = combineLatest(obs).subscribe({
                next: (/**
                 * @param {?} events
                 * @return {?}
                 */
                events => {
                    /** @type {?} */
                    let aborted = false;
                    /** @type {?} */
                    let completedCount = 0;
                    /** @type {?} */
                    const next = {
                        files: events,
                        status: 0 /* EMPTY */,
                        error: null,
                    };
                    eventLoop: for (const event of events) {
                        switch (event.status) {
                            case 4 /* ABORT */:
                                next.status = 4 /* ABORT */;
                                aborted = true;
                                break eventLoop;
                            case 1 /* LOADING */:
                                next.status = 1 /* LOADING */;
                                break;
                            case 2 /* DONE */:
                                completedCount += 1;
                                break;
                            default:
                        }
                    }
                    if (aborted) {
                        for (const event of events) {
                            if (event.reader) {
                                event.reader.abort();
                            }
                        }
                    }
                    else if (completedCount === events.length) {
                        next.status = 2 /* DONE */;
                    }
                    observer.next(next);
                }),
                complete: (/**
                 * @return {?}
                 */
                () => observer.complete()),
                error: (/**
                 * @param {?} err
                 * @return {?}
                 */
                (err) => observer.error(err)),
            });
            return (/**
             * @return {?}
             */
            () => {
                subs.unsubscribe();
            });
        }));
    }
    // tslint:disable-next-line:max-func-body-length
    /**
     * @private
     * @param {?} file
     * @param {?} dataType
     * @return {?}
     */
    fileReaderObsFactory(file, dataType) {
        /** @type {?} */
        const fileData = {
            name: file.name,
            size: file.size,
            type: file.type,
            data: null,
            lastModified: file.lastModified,
            total: file.size,
            loaded: 0,
        };
        if (dataType === 3 /* None */) {
            fileData.data = file;
            return of(this.eventFactory(fileData, 2 /* DONE */, null));
        }
        // tslint:disable-next-line:max-func-body-length
        return new Observable((/**
         * @param {?} observer
         * @return {?}
         */
        observer => {
            /** @type {?} */
            let completed = false;
            /** @type {?} */
            const reader = new FileReader();
            reader.addEventListener('error', (/**
             * @return {?}
             */
            () => {
                observer.error(this.eventFactory(fileData, 3 /* ERROR */, reader));
                completed = true;
                observer.complete();
            }), { once: true });
            reader.addEventListener('abort', (/**
             * @return {?}
             */
            () => {
                observer.next(this.eventFactory(fileData, 4 /* ABORT */, reader));
                completed = true;
                observer.complete();
            }), { once: true });
            /** @type {?} */
            const onprogress = (/**
             * @param {?} e
             * @return {?}
             */
            (e) => {
                if (e.lengthComputable) {
                    fileData.total = e.total;
                    fileData.loaded = e.loaded;
                }
                observer.next(this.eventFactory(fileData, 1 /* LOADING */, reader));
            });
            reader.addEventListener('loadstart', (/**
             * @return {?}
             */
            () => {
                observer.next(this.eventFactory(fileData, 1 /* LOADING */, reader));
            }), { once: true });
            reader.addEventListener('load', (/**
             * @return {?}
             */
            () => {
                fileData.loaded = (/** @type {?} */ (fileData.size));
                fileData.data = reader.result;
                observer.next(this.eventFactory(fileData, 2 /* DONE */, reader));
                completed = true;
                observer.complete();
            }));
            switch (dataType) {
                case 0 /* ArrayBuffer */:
                    reader.readAsArrayBuffer(file);
                    break;
                case 1 /* DataURL */:
                    reader.readAsDataURL(file);
                    break;
                case 2 /* Text */:
                    reader.readAsText(file);
                    break;
                default:
                    observer.error(new TypeError('Invalid output type: Select ArrayBuffer, DataURL or Text'));
                    completed = true;
                    observer.complete();
                    return;
            }
            return (/**
             * @return {?}
             */
            () => {
                if (reader) {
                    if (!completed) {
                        reader.abort();
                    }
                    if (onprogress) {
                        reader.removeEventListener('progress', onprogress);
                    }
                }
            });
        }));
    }
    /**
     * @private
     * @param {?} file
     * @param {?} status
     * @param {?=} reader
     * @return {?}
     */
    eventFactory(file, status, reader = null) {
        return {
            status,
            reader,
            file: Object.assign({}, file),
        };
    }
}
UploadEventsService.decorators = [
    { type: Injectable }
];
/** @nocollapse */
UploadEventsService.ctorParameters = () => [];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * Implements the required callback and methods of file uploading
 */
class FileUploadDirective {
    /**
     * @param {?} _elementRef
     * @param {?} _uploadEventsService
     */
    constructor(_elementRef, _uploadEventsService) {
        this._elementRef = _elementRef;
        this._uploadEventsService = _uploadEventsService;
    }
    /**
     * @param {?} e
     * @return {?}
     */
    onInputChange(e) {
        e.preventDefault();
        /** @type {?} */
        const next = this._elementRef.nativeElement.files &&
            this._elementRef.nativeElement.files.length
            ? this._elementRef.nativeElement.files
            : null;
        this._uploadEventsService.readFiles(next, this.dataType);
    }
}
FileUploadDirective.decorators = [
    { type: Directive, args: [{
                selector: 'input[bmFileUpload]',
            },] }
];
/** @nocollapse */
FileUploadDirective.ctorParameters = () => [
    { type: ElementRef },
    { type: UploadEventsService }
];
FileUploadDirective.propDecorators = {
    dataType: [{ type: Input }],
    onInputChange: [{ type: HostListener, args: ['change', ['$event'],] }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * Make an element a draggable target
 */
class FileUploadDraggableDirective {
    /**
     * @param {?} _uploadEventsService
     */
    constructor(_uploadEventsService) {
        this._uploadEventsService = _uploadEventsService;
    }
    /**
     * @param {?} event
     * @return {?}
     */
    ondragover(event) {
        if (!this.disabled) {
            event.preventDefault();
            this.dragHover = true;
        }
    }
    /**
     * @return {?}
     */
    ondragleave() {
        this.dragHover = false;
    }
    /**
     * @param {?} event
     * @return {?}
     */
    ondrop(event) {
        const { dataTransfer } = event;
        if (!this.disabled && dataTransfer) {
            dataTransfer.dropEffect = 'copy';
            this._uploadEventsService.readFiles(dataTransfer.files, this.dataType);
            event.preventDefault();
        }
    }
}
FileUploadDraggableDirective.decorators = [
    { type: Directive, args: [{ selector: '[bmFileUploadDraggable]' },] }
];
/** @nocollapse */
FileUploadDraggableDirective.ctorParameters = () => [
    { type: UploadEventsService }
];
FileUploadDraggableDirective.propDecorators = {
    disabled: [{ type: Input }],
    dataType: [{ type: Input }],
    dragHover: [{ type: HostBinding, args: ['class.drag-hover',] }],
    ondragover: [{ type: HostListener, args: ['dragover', ['$event'],] }],
    ondragleave: [{ type: HostListener, args: ['dragleave',] }],
    ondrop: [{ type: HostListener, args: ['drop', ['$event'],] }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class BMFileUploaderComponent {
    /**
     * @param {?} _uploadEventsService
     */
    constructor(_uploadEventsService) {
        this._uploadEventsService = _uploadEventsService;
        this.abort = new EventEmitter();
        this.done = new EventEmitter();
        this.empty = new EventEmitter();
        this.error = new EventEmitter();
        this.loading = new EventEmitter();
        this.multipleInt = 0;
        this._subs = Subscription.EMPTY;
    }
    /**
     * @param {?} v
     * @return {?}
     */
    set multiple(v) {
        this.multipleInt = v ? 1 : 0;
    }
    /**
     * @return {?}
     */
    get multiple() {
        return this.multipleInt === 1;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this._uploadEventsService.events$.subscribe({
            // tslint:disable-next-line:cyclomatic-complexity
            next: (/**
             * @param {?} event
             * @return {?}
             */
            event => {
                switch (event.status) {
                    case 4 /* ABORT */:
                        this.abort.emit(event);
                        if (this._onChangeCb) {
                            this._onChangeCb([]);
                        }
                        break;
                    case 2 /* DONE */:
                        this.done.emit(event);
                        if (this._onChangeCb) {
                            this._onChangeCb(event.files.map((/**
                             * @param {?} e
                             * @return {?}
                             */
                            e => e.file)));
                        }
                        break;
                    case 0 /* EMPTY */:
                        this.empty.emit(event);
                        if (this._onChangeCb) {
                            this._onChangeCb([]);
                        }
                        break;
                    case 3 /* ERROR */:
                        this.error.emit(event);
                        if (this._onChangeCb) {
                            this._onChangeCb([]);
                        }
                        break;
                    case 1 /* LOADING */:
                        this.loading.emit(event);
                        if (this._onTouchedCb) {
                            this._onTouchedCb();
                        }
                        break;
                    default:
                }
            }),
        });
    }
    /**
     * @return {?}
     */
    ngOnDestroy() {
        this._subs.unsubscribe();
    }
    /**
     * @return {?}
     */
    onFocusin() {
        if (this._onTouchedCb) {
            this._onTouchedCb();
        }
    }
    /**
     * @param {?} val
     * @return {?}
     */
    writeValue(val) {
        if (val instanceof FileList) {
            this._uploadEventsService.readFiles(val, this.dataType);
        }
        else {
            this._uploadEventsService.readFiles(null, this.dataType);
        }
    }
    /**
     * @param {?} fn
     * @return {?}
     */
    registerOnChange(fn) {
        this._onChangeCb = fn;
    }
    /**
     * @param {?} fn
     * @return {?}
     */
    registerOnTouched(fn) {
        this._onTouchedCb = fn;
    }
    /**
     * @param {?} isDisabled
     * @return {?}
     */
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
    }
}
BMFileUploaderComponent.decorators = [
    { type: Component, args: [{
                selector: 'bm-file-upload',
                template: "<input\n  [accept]=\"accept\"\n  [dataType]=\"dataType\"\n  [disabled]=\"disabled\"\n  [multiple]=\"multiple\"\n  #inputFile\n  bmFileUpload\n  class=\"bm-visual-hidden\"\n  tabindex=\"-1\"\n  type=\"file\"\n/>\n<div\n  [dataType]=\"dataType\"\n  [disabled]=\"disabled\"\n  bmFileUploadDraggable\n  class=\"bm-file-upload-drop-area\"\n>\n  <ng-content></ng-content>\n  <div>\n    <i class=\"fas fa-upload bm-file-upload__upload-icon\" aria-hidden=\"true\"></i>\n    <div>\n      <p i18n>\n        Drag &amp; Drop your audio {multipleInt, plural, =0 {file} =1 {files}}\n      </p>\n      <p>\n        <button\n          (click)=\"inputFile.click()\"\n          (focusin)=\"onFocusin()\"\n          [disabled]=\"disabled\"\n          class=\"bm-button bm-button--primary\"\n          type=\"button\"\n          i18n=\"Select files|Text in the button inside the draggable area of the file-uploader\"\n        >\n          Select {multipleInt, plural, =0 {file} =1 {files}}\n        </button>\n      </p>\n    </div>\n  </div>\n  <ng-content select=\"[bmFileUploadFooter]\"></ng-content>\n</div>\n",
                providers: [
                    {
                        provide: NG_VALUE_ACCESSOR,
                        // tslint:disable-next-line:no-forward-ref
                        useExisting: forwardRef((/**
                         * @return {?}
                         */
                        () => BMFileUploaderComponent)),
                        multi: true,
                    },
                    UploadEventsService,
                ],
                changeDetection: ChangeDetectionStrategy.OnPush,
                // tslint:disable-next-line:use-component-view-encapsulation
                encapsulation: ViewEncapsulation.None,
                styles: [".bm-file-upload--drag-hover .bm-file-upload-drop-area{border-width:2px}.bm-file-upload__upload-icon{font-size:3em}.bm-file-upload-drop-area{box-sizing:border-box;border:1px dashed var(--header-background-color,#3e71ad);border-radius:3px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:1em}.bm-file-upload-drop-area p{font-size:.9rem;margin:.5rem 0}.bm-file-upload-drop-area *{pointer-events:none}.bm-file-upload-drop-area button{pointer-events:auto}"]
            }] }
];
/** @nocollapse */
BMFileUploaderComponent.ctorParameters = () => [
    { type: UploadEventsService }
];
BMFileUploaderComponent.propDecorators = {
    accept: [{ type: Input }],
    dataType: [{ type: Input }],
    disabled: [{ type: Input }],
    multiple: [{ type: Input }],
    abort: [{ type: Output }],
    done: [{ type: Output }],
    empty: [{ type: Output }],
    error: [{ type: Output }],
    loading: [{ type: Output }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class BMClickFileUploaderComponent {
    /**
     * @param {?} _uploadEventsService
     */
    constructor(_uploadEventsService) {
        this._uploadEventsService = _uploadEventsService;
        this.abort = new EventEmitter();
        this.done = new EventEmitter();
        this.empty = new EventEmitter();
        this.error = new EventEmitter();
        this.loading = new EventEmitter();
        this._subs = Subscription.EMPTY;
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this._uploadEventsService.events$.subscribe({
            // tslint:disable-next-line:cyclomatic-complexity
            next: (/**
             * @param {?} event
             * @return {?}
             */
            event => {
                switch (event.status) {
                    case 4 /* ABORT */:
                        this.abort.emit(event);
                        if (this._onChangeCb) {
                            this._onChangeCb([]);
                        }
                        break;
                    case 2 /* DONE */:
                        this.done.emit(event);
                        if (this._onChangeCb) {
                            this._onChangeCb(event.files.map((/**
                             * @param {?} e
                             * @return {?}
                             */
                            e => e.file)));
                        }
                        break;
                    case 0 /* EMPTY */:
                        this.empty.emit(event);
                        if (this._onChangeCb) {
                            this._onChangeCb([]);
                        }
                        break;
                    case 3 /* ERROR */:
                        this.error.emit(event);
                        if (this._onChangeCb) {
                            this._onChangeCb([]);
                        }
                        break;
                    case 1 /* LOADING */:
                        this.loading.emit(event);
                        if (this._onTouchedCb) {
                            this._onTouchedCb();
                        }
                        break;
                    default:
                }
            }),
        });
    }
    /**
     * @return {?}
     */
    ngOnDestroy() {
        this._subs.unsubscribe();
    }
    /**
     * @return {?}
     */
    onFocusin() {
        if (this._onTouchedCb) {
            this._onTouchedCb();
        }
    }
    /**
     * @param {?} val
     * @return {?}
     */
    writeValue(val) {
        if (val instanceof FileList) {
            this._uploadEventsService.readFiles(val, this.dataType);
        }
        else {
            this._inputElement.nativeElement.value = '';
            this._uploadEventsService.readFiles(null, this.dataType);
        }
    }
    /**
     * @param {?} fn
     * @return {?}
     */
    registerOnChange(fn) {
        this._onChangeCb = fn;
    }
    /**
     * @param {?} fn
     * @return {?}
     */
    registerOnTouched(fn) {
        this._onTouchedCb = fn;
    }
    /**
     * @param {?} isDisabled
     * @return {?}
     */
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
    }
}
BMClickFileUploaderComponent.decorators = [
    { type: Component, args: [{
                selector: 'bm-click-file-upload',
                template: "<input\n  [accept]=\"accept\"\n  [dataType]=\"dataType\"\n  [disabled]=\"disabled\"\n  [multiple]=\"multiple\"\n  #inputFile\n  bmFileUpload\n  class=\"bm-visual-hidden\"\n  tabindex=\"-1\"\n  type=\"file\"\n/>\n<button\n  (click)=\"inputFile.click()\"\n  (focusin)=\"onFocusin()\"\n  [dataType]=\"dataType\"\n  [disabled]=\"disabled\"\n  bmFileUploadDraggable\n  class=\"bm-click-file-upload-drop-area\"\n>\n  <ng-content></ng-content>\n</button>\n",
                providers: [
                    {
                        provide: NG_VALUE_ACCESSOR,
                        // tslint:disable-next-line:no-forward-ref
                        useExisting: forwardRef((/**
                         * @return {?}
                         */
                        () => BMClickFileUploaderComponent)),
                        multi: true,
                    },
                    UploadEventsService,
                ],
                changeDetection: ChangeDetectionStrategy.OnPush,
                // tslint:disable-next-line:use-component-view-encapsulation
                encapsulation: ViewEncapsulation.None,
                styles: [".bm-click-file-upload-drop-area{background:0 0;border:0;display:inline-block}"]
            }] }
];
/** @nocollapse */
BMClickFileUploaderComponent.ctorParameters = () => [
    { type: UploadEventsService }
];
BMClickFileUploaderComponent.propDecorators = {
    accept: [{ type: Input }],
    dataType: [{ type: Input }],
    disabled: [{ type: Input }],
    multiple: [{ type: Input }],
    abort: [{ type: Output }],
    done: [{ type: Output }],
    empty: [{ type: Output }],
    error: [{ type: Output }],
    loading: [{ type: Output }],
    _inputElement: [{ type: ViewChild, args: ['inputFile', { read: ElementRef, static: true },] }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class UploadersModule {
}
UploadersModule.decorators = [
    { type: NgModule, args: [{
                imports: [CommonModule],
                declarations: [
                    BMClickFileUploaderComponent,
                    BMFileUploaderComponent,
                    FileUploadDirective,
                    FileUploadDraggableDirective,
                ],
                exports: [
                    BMClickFileUploaderComponent,
                    BMFileUploaderComponent,
                    FileUploadDirective,
                    FileUploadDraggableDirective,
                ],
            },] }
];

export { BMClickFileUploaderComponent, BMFileUploaderComponent, FileUploadDirective, FileUploadDraggableDirective, UploadersModule, UploadEventsService as ɵa };
//# sourceMappingURL=bmat-angular-forms-uploaders.js.map