sk-front-lib 0.18.5 → 0.19.2

package/fesm2015/sk-front-lib-uploader.mjs

@@ -0,0 +1,546 @@
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Component, ViewEncapsulation, Inject, ViewChild, HostListener, EventEmitter, Directive, Input, Output, NgModule } from '@angular/core';
+import * as i5 from '@angular/material/legacy-button';
+import { MatLegacyButtonModule } from '@angular/material/legacy-button';
+import * as i1 from '@angular/material/legacy-dialog';
+import { MAT_LEGACY_DIALOG_DATA, MatLegacyDialogModule } from '@angular/material/legacy-dialog';
+import * as i6 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i7 from '@angular/material/legacy-list';
+import { MatLegacyListModule } from '@angular/material/legacy-list';
+import * as i10 from '@angular/material/legacy-progress-bar';
+import { MatLegacyProgressBarModule } from '@angular/material/legacy-progress-bar';
+import * as i4 from '@angular/material/toolbar';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import * as i11 from 'sk-front-lib';
+import { SkFrontLibModule } from 'sk-front-lib';
+import { FileType, SkFile } from 'sk-front-lib/model';
+import { animation, style, animate, trigger, transition, useAnimation, query, stagger, animateChild } from '@angular/animations';
+import { HttpRequest, HttpHeaders, HttpEventType } from '@angular/common/http';
+import { of } from 'rxjs';
+import { tap, last, map, catchError } from 'rxjs/operators';
+import * as i2 from 'sk-front-lib/api';
+import * as i8 from '@angular/material/core';
+import * as i9 from '@angular/material/divider';
+import * as _ from 'lodash';
+
+var SkUploaderFileItemType;
+(function (SkUploaderFileItemType) {
+    SkUploaderFileItemType[SkUploaderFileItemType["Local"] = 0] = "Local";
+    SkUploaderFileItemType[SkUploaderFileItemType["API"] = 1] = "API";
+    SkUploaderFileItemType[SkUploaderFileItemType["Unidentified"] = 2] = "Unidentified";
+})(SkUploaderFileItemType || (SkUploaderFileItemType = {}));
+var SkUploaderFileItemStatus;
+(function (SkUploaderFileItemStatus) {
+    SkUploaderFileItemStatus[SkUploaderFileItemStatus["WAIT"] = 0] = "WAIT";
+    SkUploaderFileItemStatus[SkUploaderFileItemStatus["READY"] = 1] = "READY";
+    SkUploaderFileItemStatus[SkUploaderFileItemStatus["UPLOADING"] = 2] = "UPLOADING";
+    SkUploaderFileItemStatus[SkUploaderFileItemStatus["PROCESS"] = 3] = "PROCESS";
+    SkUploaderFileItemStatus[SkUploaderFileItemStatus["DONE"] = 4] = "DONE";
+    SkUploaderFileItemStatus[SkUploaderFileItemStatus["ERROR"] = 5] = "ERROR";
+})(SkUploaderFileItemStatus || (SkUploaderFileItemStatus = {}));
+class SkUploaderFileItem {
+    constructor(localFile, skFile) {
+        this.localFile = localFile;
+        this.skFile = skFile;
+        this.state = SkUploaderFileItemStatus.WAIT;
+        this.progress = 0;
+        if (this.localFile && !this.skFile) {
+            this.itemType = SkUploaderFileItemType.Local;
+        }
+        else if (!this.localFile && this.skFile) {
+            this.itemType = SkUploaderFileItemType.API;
+            this.state = SkUploaderFileItemStatus.DONE;
+            this.progress = 100;
+        }
+        else {
+            this.itemType = SkUploaderFileItemType.Unidentified;
+        }
+    }
+    get filename() {
+        if (this.itemType === SkUploaderFileItemType.Local) {
+            return this.localFile.name;
+        }
+        else if (this.itemType === SkUploaderFileItemType.API) {
+            return this.skFile.sourceFilename;
+        }
+        else {
+            return 'Unknown File';
+        }
+    }
+    get size() {
+        if (this.itemType === SkUploaderFileItemType.Local) {
+            return this.localFile.size;
+        }
+        else if (this.itemType === SkUploaderFileItemType.API) {
+            return this.skFile.fileSize;
+        }
+        else {
+            return -1;
+        }
+    }
+    get mime() {
+        if (this.itemType === SkUploaderFileItemType.Local) {
+            return this.localFile.type;
+        }
+        else if (this.itemType === SkUploaderFileItemType.API) {
+            return this.skFile.mime;
+        }
+        else {
+            return '';
+        }
+    }
+    get icon() {
+        if (this.itemType === SkUploaderFileItemType.Local) {
+            return FileType.getMimeClass(this.localFile);
+        }
+        else if (this.itemType === SkUploaderFileItemType.API) {
+            return FileType.getMimeClass(this.skFile);
+        }
+        else {
+            return 'application';
+        }
+    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ Static Builder
+    // -----------------------------------------------------------------------------------------------------
+    static fromLocalFile(localFile) {
+        return new SkUploaderFileItem(localFile);
+    }
+    static fromApi(skFile) {
+        return new SkUploaderFileItem(null, skFile);
+    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ State Method
+    // -----------------------------------------------------------------------------------------------------
+    prepareUpload() {
+        this.state = SkUploaderFileItemStatus.READY;
+    }
+}
+
+const customAnimation = animation([
+    style({
+        opacity: '{{opacity}}',
+        transform: 'scale({{scale}}) translate3d({{x}}, {{y}}, {{z}})'
+    }),
+    animate('{{duration}} {{delay}} cubic-bezier(0.0, 0.0, 0.2, 1)', style('*'))
+], {
+    params: {
+        duration: '200ms',
+        delay: '0ms',
+        opacity: '0',
+        scale: '1',
+        x: '0',
+        y: '0',
+        z: '0'
+    }
+});
+const customOutAnimation = animation([
+    style('*'),
+    animate('{{duration}} {{delay}} cubic-bezier(0.0, 0.0, 0.2, 1)', style({
+        opacity: '{{opacity}}',
+        transform: 'scale({{scale}}) translate3d({{x}}, {{y}}, {{z}})'
+    }))
+], {
+    params: {
+        duration: '200ms',
+        delay: '0ms',
+        opacity: '0',
+        scale: '1',
+        x: '0',
+        y: '0',
+        z: '0'
+    }
+});
+const uploaderAnimations = [
+    trigger('animate', [transition('void => *', [useAnimation(customAnimation)])]),
+    trigger('animateOut', [transition('* => void', [useAnimation(customOutAnimation)])]),
+    trigger('animateStagger', [
+        transition('* => *', query('@*', [
+            stagger('100ms', [
+                animateChild()
+            ])
+        ], { optional: true })),
+    ]),
+];
+
+class SkFileUploader {
+    constructor(apiService, options, selectedFiles = []) {
+        this.apiService = apiService;
+        this.queue = [];
+        this.progress = 0;
+        this.options = {
+            autoUpload: false,
+            filters: [],
+            maxFileSize: 2 * 1024 * 1024 * 1024,
+            queueLimit: 1,
+            asyncLimit: 2,
+        };
+        this.setOptions(options);
+        this.setSelectedFiles(selectedFiles);
+    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ Data Accessor
+    // -----------------------------------------------------------------------------------------------------
+    // -----------------------------------------------------------------------------------------------------
+    // @ Uploader - Public methods
+    // -----------------------------------------------------------------------------------------------------
+    setOptions(options) {
+        this.options = Object.assign(this.options, options);
+        this.options.filters.unshift({ name: 'queueLimit', fn: this._queueLimitFilter });
+        if (this.options.maxFileSize) {
+            this.options.filters.unshift({ name: 'fileSize', fn: this._fileSizeFilter });
+        }
+        if (this.options.allowedFileType) {
+            this.options.filters.unshift({ name: 'fileType', fn: this._fileTypeFilter });
+        }
+        if (this.options.allowedMimeType) {
+            this.options.filters.unshift({ name: 'mimeType', fn: this._mimeTypeFilter });
+        }
+    }
+    setSelectedFiles(files) {
+        const items = files.map(file => SkUploaderFileItem.fromApi(file));
+        this.addToQueue(items);
+    }
+    addToQueue(files, filters) {
+        const arrayOfFilters = this._getFilters(filters);
+        files.forEach(item => {
+            if (this._isValidFile(item, arrayOfFilters, this.options) && !this._findByFilenameInQueue(item.filename)) {
+                this.queue.push(item);
+            }
+        });
+        this.updateProgress();
+    }
+    removeFromQueue(file) {
+        const index = this.queue.findIndex(value => value.filename === file.filename);
+        this.queue.splice(index, 1);
+        this.updateProgress();
+    }
+    clearQueue() {
+        while (this.queue.length) {
+            this.removeFromQueue(this.queue[0]);
+        }
+        this.progress = 0;
+    }
+    upload(item) {
+        this._processUpload(item);
+    }
+    uploadAll() {
+        const targetItems = this.getNotUploadedItems();
+        targetItems.forEach(item => {
+            item.prepareUpload();
+        });
+        if (targetItems.length > 0) {
+            const max = Math.min(targetItems.length, this.options.asyncLimit);
+            for (let i = 0; i < max; i++) {
+                this.upload(targetItems[i]);
+            }
+        }
+    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods.
+    // -----------------------------------------------------------------------------------------------------
+    updateProgress() {
+        const uploaded = this.getDoneItems().length;
+        const current = uploaded / this.queue.length * 100;
+        this.progress = Math.ceil(current);
+    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ Uploader - Filters
+    // -----------------------------------------------------------------------------------------------------
+    _isValidFile(file, filters, options) {
+        this._failFilterIndex = -1;
+        return !filters.length ? true : filters.every((filter) => {
+            this._failFilterIndex++;
+            return filter.fn.call(this, file, options);
+        });
+    }
+    _getFilters(filters) {
+        if (!filters) {
+            return this.options.filters;
+        }
+        if (Array.isArray(filters)) {
+            return filters;
+        }
+        if (typeof filters === 'string') {
+            const names = filters.match(/[^\s,]+/g);
+            return this.options.filters
+                .filter((filter) => names.indexOf(filter.name) !== -1);
+        }
+        return this.options.filters;
+    }
+    _queueLimitFilter() {
+        return this.options.queueLimit === undefined || this.queue.length < this.options.queueLimit;
+    }
+    _mimeTypeFilter(item) {
+        return !(this.options.allowedMimeType && this.options.allowedMimeType.indexOf(item.mime) === -1);
+    }
+    _fileSizeFilter(item) {
+        return !(this.options.maxFileSize && item.size > this.options.maxFileSize);
+    }
+    _fileTypeFilter(item) {
+        return !(this.options.allowedFileType &&
+            this.options.allowedFileType.indexOf(FileType.getMimeClass(item.localFile ? item.localFile : item.skFile)) === -1);
+    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ Uploader - Upload biz logic
+    // -----------------------------------------------------------------------------------------------------
+    _processUpload(item) {
+        if (item.state !== SkUploaderFileItemStatus.READY) {
+            return;
+        }
+        const formData = new FormData();
+        formData.append('file', item.localFile, item.filename);
+        const request = new HttpRequest('POST', this.apiService.apiServer + '/api/public/files/upload', formData, {
+            reportProgress: true,
+            headers: new HttpHeaders().set('Authorization', 'Bearer ' + this.apiService.getToken()).set('ngsw-bypass', 'true')
+        });
+        this.apiService.rawRequest(request).pipe(tap(event => {
+            switch (event.type) {
+                case HttpEventType.UploadProgress:
+                    // Compute and show the % done:
+                    const percentDone = Math.ceil(100 * event.loaded / event.total);
+                    item.progress = percentDone;
+                    if (item.progress >= 99) {
+                        item.state = SkUploaderFileItemStatus.PROCESS;
+                    }
+                    else {
+                        item.state = SkUploaderFileItemStatus.UPLOADING;
+                    }
+                    return;
+                case HttpEventType.Response:
+                    item.state = SkUploaderFileItemStatus.DONE;
+                    return;
+                default:
+                    return;
+            }
+        }), last(), // return last (completed) message to caller
+        map((result) => result.body.data ? new SkFile(result.body.data) : null), catchError(err => {
+            console.log(err);
+            item.state = SkUploaderFileItemStatus.ERROR;
+            return of(null);
+        })).subscribe(result => {
+            if (result instanceof SkFile) {
+                item.skFile = result;
+            }
+            this.updateProgress();
+            const nextItems = this.getReadyItems();
+            if (nextItems.length > 0) {
+                this.upload(nextItems[0]);
+            }
+        });
+    }
+    // -----------------------------------------------------------------------------------------------------
+    // @ Data Handlers
+    // -----------------------------------------------------------------------------------------------------
+    _findByFilenameInQueue(name) {
+        return this.queue.findIndex(value => value.filename === name) > -1;
+    }
+    getNotUploadedItems() {
+        return this.queue.filter((item) => item.state === SkUploaderFileItemStatus.WAIT);
+    }
+    getReadyItems() {
+        return this.queue.filter((item) => item.state === SkUploaderFileItemStatus.READY);
+    }
+    getDoneItems() {
+        return this.queue.filter((item) => item.state === SkUploaderFileItemStatus.DONE);
+    }
+}
+
+class SkUploaderComponent {
+    constructor(data, dialogRef, _apiService) {
+        this.data = data;
+        this.dialogRef = dialogRef;
+        this._apiService = _apiService;
+        this.dragClassActive = false;
+        this.uploader = new SkFileUploader(this._apiService, data.options, data.selectedFile);
+    }
+    static _getTransfer(event) {
+        return event.dataTransfer ? event.dataTransfer : event.originalEvent.dataTransfer;
+    }
+    static _haveFiles(types) {
+        if (!types) {
+            return false;
+        }
+        if (types.indexOf) {
+            return types.indexOf('Files') !== -1;
+        }
+        else if (types.contains) {
+            return types.contains('Files');
+        }
+        else {
+            return false;
+        }
+    }
+    ngOnInit() {
+    }
+    save() {
+        this.dialogRef.close(this.uploader.getDoneItems());
+    }
+    onDrop(event) {
+        const transfer = SkUploaderComponent._getTransfer(event);
+        if (!transfer) {
+            return;
+        }
+        this.preventAndStop(event);
+        this.fileAdd(transfer.files);
+        this.dragClassActive = false;
+    }
+    onDragOver(event) {
+        const transfer = SkUploaderComponent._getTransfer(event);
+        if (!SkUploaderComponent._haveFiles(transfer.types)) {
+            return;
+        }
+        this.preventAndStop(event);
+        this.dragClassActive = true;
+    }
+    onDragLeave(event) {
+        if (event.relatedTarget === this.dragEl.nativeElement) {
+            return;
+        }
+        this.preventAndStop(event);
+        this.dragClassActive = false;
+    }
+    // File methods
+    // onFile
+    fileAdd(files) {
+        if (!(files instanceof FileList)) {
+            return;
+        }
+        const list = [];
+        for (let i = 0; i < files.length; i++) {
+            list.push(SkUploaderFileItem.fromLocalFile(files.item(i)));
+        }
+        this.uploader.addToQueue(list);
+    }
+    onBrowseFileComplete() {
+        const files = this.fileEl.nativeElement.files;
+        this.fileAdd(files);
+    }
+    onDragComponentClick() {
+        this.fileEl.nativeElement.click();
+    }
+    preventAndStop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+}
+SkUploaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkUploaderComponent, deps: [{ token: MAT_LEGACY_DIALOG_DATA }, { token: i1.MatLegacyDialogRef }, { token: i2.SkApiService }], target: i0.ɵɵFactoryTarget.Component });
+SkUploaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SkUploaderComponent, selector: "sk-uploader", host: { listeners: { "drop": "onDrop($event)", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)" } }, viewQueries: [{ propertyName: "fileEl", first: true, predicate: ["file"], descendants: true }, { propertyName: "dragEl", first: true, predicate: ["drag"], descendants: true }], ngImport: i0, template: "<mat-toolbar class=\"dialog-title\" color=\"primary\">\n    <span class=\"title dialog-title\">File Uploader</span>\n    <div class=\"space-fill\"></div>\n    <button mat-icon-button mat-dialog-close aria-label=\"Close dialog\">\n        <mat-icon>close</mat-icon>\n    </button>\n</mat-toolbar>\n<div class=\"dialog-content\">\n    <input type=\"file\" style=\"display: none\" #file (change)=\"onBrowseFileComplete()\" multiple />\n    <div class=\"drag-section\" #drag (click)=\"onDragComponentClick()\" [class.active]=\"dragClassActive\">\n        <mat-icon>cloud_upload</mat-icon>\n        <p>Drag and drop or <strong>click to browse</strong></p>\n    </div>\n    <mat-list [@animateStagger]=\"{value:uploader.queue.length}\">\n        <h3 mat-subheader>Selected Files ({{uploader.queue.length}})</h3>\n        <mat-list-item class=\"selected-file\" *ngFor=\"let file of uploader.queue\"\n                       [@animate]=\"{value:'*',params:{x:'-25px', opacity:'0',duration:'200ms'}}\"\n                       [@animateOut]=\"{value:'*',params:{delay:'100ms',x:'-25px', opacity:'0',duration:'200ms'}}\"\n                       dense>\n            <mat-icon class=\"type-icon\" [ngClass]=\"file.icon\" matListIcon></mat-icon>\n            <div mat-line>\n                <span class=\"file-name\">{{ file.filename }}</span>\n                <span>{{ file.size | skByte }}</span>\n            </div>\n            <mat-progress-bar mat-line [mode]=\"file.state == 3 ? 'query' : 'determinate'\" [value]=\"file.progress\" color=\"accent\"></mat-progress-bar>\n            <div mat-line>\n                <ng-container [ngSwitch]=\"file.state\">\n                    <div *ngSwitchCase=\"0\">\n                        Selected\n                    </div>\n                    <div *ngSwitchCase=\"1\">\n                        Wait for upload\n                    </div>\n                    <div *ngSwitchCase=\"2\">\n                        Uploading\n                    </div>\n                    <div *ngSwitchCase=\"3\">\n                        Processing..\n                    </div>\n                    <div *ngSwitchCase=\"4\">\n                        Done.\n                    </div>\n                    <div *ngSwitchCase=\"5\">\n                        Failed\n                    </div>\n                </ng-container>\n            </div>\n            <button mat-icon-button (click)=\"uploader.removeFromQueue(file)\">\n                <mat-icon>delete</mat-icon>\n            </button>\n        </mat-list-item>\n        <mat-divider *ngIf=\"uploader.queue.length === 0\"\n                     [@animate]=\"{value:'*',params:{delay: '300ms', opacity:'0',duration:'200ms'}}\"></mat-divider>\n        <mat-list-item class=\"empty\" *ngIf=\"uploader.queue.length === 0\"\n                       [@animate]=\"{value:'*',params:{delay: '300ms', opacity:'0',duration:'200ms'}}\">\n            <h2 mat-line>No file selected..</h2>\n        </mat-list-item>\n    </mat-list>\n</div>\n<mat-progress-bar mat-line mode=\"determinate\" [value]=\"uploader.progress\"></mat-progress-bar>\n<div class=\"dialog-actions\">\n    <div>\n        <button mat-flat-button color=\"warn\" (click)=\"uploader.clearQueue()\" [disabled]=\"uploader.queue.length === 0\">Clear all</button>\n    </div>\n    <div>\n        <button mat-flat-button color=\"primary\"\n                *ngIf=\"uploader.getNotUploadedItems().length > 0\"\n                (click)=\"uploader.uploadAll()\">Start Upload</button>\n        <button mat-flat-button color=\"accent\"\n                *ngIf=\"uploader.getDoneItems().length === uploader.queue.length && uploader.getDoneItems().length > 0 \"\n                style=\"margin-left: 8px\" (click)=\"save()\">Save</button>\n    </div>\n</div>\n", styles: ["sk-uploader{display:flex;flex-direction:column;min-width:50vw;position:relative}sk-uploader .dialog-title{flex-shrink:0}sk-uploader .dialog-title .space-fill{flex:1 0 auto}sk-uploader .dialog-content{padding:16px;margin:0;overflow:scroll;overflow-x:hidden;flex:0 0 500px;max-height:500px}sk-uploader .dialog-content .drag-section{border:3px dashed #ccc;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}sk-uploader .dialog-content .drag-section .mat-icon{width:64px;height:64px;line-height:64px;font-size:64px}sk-uploader .dialog-content .drag-section p{cursor:pointer;font-size:14px}sk-uploader .dialog-content .drag-section .mat-icon,sk-uploader .dialog-content .drag-section p{color:#ccc}sk-uploader .dialog-content .drag-section.active{position:absolute;inset:0;width:100%;z-index:10;background-color:#2c393f}sk-uploader .dialog-content mat-list mat-list-item.selected-file{box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f;margin-bottom:8px}sk-uploader .dialog-content mat-list mat-list-item.selected-file .mat-list-icon,sk-uploader .dialog-content mat-list mat-list-item.selected-file mat-icon{width:32px!important;height:32px!important;line-height:32px!important;font-size:32px!important}sk-uploader .dialog-content mat-list mat-list-item.selected-file .mat-icon-button{margin-left:16px}sk-uploader .dialog-content mat-list mat-list-item.selected-file .mat-line{display:flex;flex-direction:row;align-items:center;justify-content:space-between}sk-uploader .dialog-content mat-list mat-list-item.selected-file .file-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}sk-uploader .dialog-actions{padding:16px;flex-shrink:0;border-top:1px solid rgba(0,0,0,.12);display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.MatLegacyDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i5.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatLegacyList, selector: "mat-list, mat-action-list", inputs: ["disableRipple", "disabled"], exportAs: ["matList"] }, { kind: "component", type: i7.MatLegacyListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["disableRipple", "disabled"], exportAs: ["matListItem"] }, { kind: "directive", type: i8.MatLine, selector: "[mat-line], [matLine]" }, { kind: "directive", type: i7.MatLegacyListIconCssMatStyler, selector: "[mat-list-icon], [matListIcon]" }, { kind: "directive", type: i7.MatLegacyListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "component", type: i9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i10.MatLegacyProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: i11.SkBytePipe, name: "skByte" }], animations: uploaderAnimations, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkUploaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sk-uploader', encapsulation: ViewEncapsulation.None, animations: uploaderAnimations, template: "<mat-toolbar class=\"dialog-title\" color=\"primary\">\n    <span class=\"title dialog-title\">File Uploader</span>\n    <div class=\"space-fill\"></div>\n    <button mat-icon-button mat-dialog-close aria-label=\"Close dialog\">\n        <mat-icon>close</mat-icon>\n    </button>\n</mat-toolbar>\n<div class=\"dialog-content\">\n    <input type=\"file\" style=\"display: none\" #file (change)=\"onBrowseFileComplete()\" multiple />\n    <div class=\"drag-section\" #drag (click)=\"onDragComponentClick()\" [class.active]=\"dragClassActive\">\n        <mat-icon>cloud_upload</mat-icon>\n        <p>Drag and drop or <strong>click to browse</strong></p>\n    </div>\n    <mat-list [@animateStagger]=\"{value:uploader.queue.length}\">\n        <h3 mat-subheader>Selected Files ({{uploader.queue.length}})</h3>\n        <mat-list-item class=\"selected-file\" *ngFor=\"let file of uploader.queue\"\n                       [@animate]=\"{value:'*',params:{x:'-25px', opacity:'0',duration:'200ms'}}\"\n                       [@animateOut]=\"{value:'*',params:{delay:'100ms',x:'-25px', opacity:'0',duration:'200ms'}}\"\n                       dense>\n            <mat-icon class=\"type-icon\" [ngClass]=\"file.icon\" matListIcon></mat-icon>\n            <div mat-line>\n                <span class=\"file-name\">{{ file.filename }}</span>\n                <span>{{ file.size | skByte }}</span>\n            </div>\n            <mat-progress-bar mat-line [mode]=\"file.state == 3 ? 'query' : 'determinate'\" [value]=\"file.progress\" color=\"accent\"></mat-progress-bar>\n            <div mat-line>\n                <ng-container [ngSwitch]=\"file.state\">\n                    <div *ngSwitchCase=\"0\">\n                        Selected\n                    </div>\n                    <div *ngSwitchCase=\"1\">\n                        Wait for upload\n                    </div>\n                    <div *ngSwitchCase=\"2\">\n                        Uploading\n                    </div>\n                    <div *ngSwitchCase=\"3\">\n                        Processing..\n                    </div>\n                    <div *ngSwitchCase=\"4\">\n                        Done.\n                    </div>\n                    <div *ngSwitchCase=\"5\">\n                        Failed\n                    </div>\n                </ng-container>\n            </div>\n            <button mat-icon-button (click)=\"uploader.removeFromQueue(file)\">\n                <mat-icon>delete</mat-icon>\n            </button>\n        </mat-list-item>\n        <mat-divider *ngIf=\"uploader.queue.length === 0\"\n                     [@animate]=\"{value:'*',params:{delay: '300ms', opacity:'0',duration:'200ms'}}\"></mat-divider>\n        <mat-list-item class=\"empty\" *ngIf=\"uploader.queue.length === 0\"\n                       [@animate]=\"{value:'*',params:{delay: '300ms', opacity:'0',duration:'200ms'}}\">\n            <h2 mat-line>No file selected..</h2>\n        </mat-list-item>\n    </mat-list>\n</div>\n<mat-progress-bar mat-line mode=\"determinate\" [value]=\"uploader.progress\"></mat-progress-bar>\n<div class=\"dialog-actions\">\n    <div>\n        <button mat-flat-button color=\"warn\" (click)=\"uploader.clearQueue()\" [disabled]=\"uploader.queue.length === 0\">Clear all</button>\n    </div>\n    <div>\n        <button mat-flat-button color=\"primary\"\n                *ngIf=\"uploader.getNotUploadedItems().length > 0\"\n                (click)=\"uploader.uploadAll()\">Start Upload</button>\n        <button mat-flat-button color=\"accent\"\n                *ngIf=\"uploader.getDoneItems().length === uploader.queue.length && uploader.getDoneItems().length > 0 \"\n                style=\"margin-left: 8px\" (click)=\"save()\">Save</button>\n    </div>\n</div>\n", styles: ["sk-uploader{display:flex;flex-direction:column;min-width:50vw;position:relative}sk-uploader .dialog-title{flex-shrink:0}sk-uploader .dialog-title .space-fill{flex:1 0 auto}sk-uploader .dialog-content{padding:16px;margin:0;overflow:scroll;overflow-x:hidden;flex:0 0 500px;max-height:500px}sk-uploader .dialog-content .drag-section{border:3px dashed #ccc;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}sk-uploader .dialog-content .drag-section .mat-icon{width:64px;height:64px;line-height:64px;font-size:64px}sk-uploader .dialog-content .drag-section p{cursor:pointer;font-size:14px}sk-uploader .dialog-content .drag-section .mat-icon,sk-uploader .dialog-content .drag-section p{color:#ccc}sk-uploader .dialog-content .drag-section.active{position:absolute;inset:0;width:100%;z-index:10;background-color:#2c393f}sk-uploader .dialog-content mat-list mat-list-item.selected-file{box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f;margin-bottom:8px}sk-uploader .dialog-content mat-list mat-list-item.selected-file .mat-list-icon,sk-uploader .dialog-content mat-list mat-list-item.selected-file mat-icon{width:32px!important;height:32px!important;line-height:32px!important;font-size:32px!important}sk-uploader .dialog-content mat-list mat-list-item.selected-file .mat-icon-button{margin-left:16px}sk-uploader .dialog-content mat-list mat-list-item.selected-file .mat-line{display:flex;flex-direction:row;align-items:center;justify-content:space-between}sk-uploader .dialog-content mat-list mat-list-item.selected-file .file-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}sk-uploader .dialog-actions{padding:16px;flex-shrink:0;border-top:1px solid rgba(0,0,0,.12);display:flex;justify-content:space-between}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [MAT_LEGACY_DIALOG_DATA]
+                    }] }, { type: i1.MatLegacyDialogRef }, { type: i2.SkApiService }];
+    }, propDecorators: { fileEl: [{
+                type: ViewChild,
+                args: ['file', { static: false }]
+            }], dragEl: [{
+                type: ViewChild,
+                args: ['drag', { static: false }]
+            }], onDrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }], onDragOver: [{
+                type: HostListener,
+                args: ['dragover', ['$event']]
+            }], onDragLeave: [{
+                type: HostListener,
+                args: ['dragleave', ['$event']]
+            }] } });
+
+class SkUploaderDirective {
+    constructor(_dialog) {
+        this._dialog = _dialog;
+        this.skUploaderFileSelected = new EventEmitter();
+    }
+    onClick() {
+        this._dialog.open(SkUploaderComponent, {
+            panelClass: 'mat-dialog-no-padding',
+            closeOnNavigation: true,
+            autoFocus: false,
+            data: {
+                options: this.skUploaderOptions,
+                selectedFile: !this.skSelected ? [] : (_.isArray(this.skSelected) ? this.skSelected : [this.skSelected])
+            }
+        }).afterClosed().subscribe((result) => {
+            if (result) {
+                this.skUploaderFileSelected.emit(result.map(item => item.skFile));
+            }
+        });
+    }
+}
+SkUploaderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkUploaderDirective, deps: [{ token: i1.MatLegacyDialog }], target: i0.ɵɵFactoryTarget.Directive });
+SkUploaderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SkUploaderDirective, selector: "[skUploader]", inputs: { skUploaderOptions: "skUploaderOptions", skSelected: "skSelected" }, outputs: { skUploaderFileSelected: "skUploaderFileSelected" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkUploaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[skUploader]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.MatLegacyDialog }]; }, propDecorators: { skUploaderOptions: [{
+                type: Input
+            }], skSelected: [{
+                type: Input
+            }], skUploaderFileSelected: [{
+                type: Output
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class SkUploaderModule {
+}
+SkUploaderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkUploaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkUploaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SkUploaderModule, declarations: [SkUploaderComponent,
+        SkUploaderDirective], imports: [CommonModule,
+        MatLegacyDialogModule,
+        MatToolbarModule,
+        MatLegacyButtonModule,
+        MatIconModule,
+        MatLegacyListModule,
+        MatLegacyProgressBarModule,
+        SkFrontLibModule], exports: [SkUploaderComponent,
+        SkUploaderDirective] });
+SkUploaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkUploaderModule, imports: [CommonModule,
+        MatLegacyDialogModule,
+        MatToolbarModule,
+        MatLegacyButtonModule,
+        MatIconModule,
+        MatLegacyListModule,
+        MatLegacyProgressBarModule,
+        SkFrontLibModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SkUploaderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        MatLegacyDialogModule,
+                        MatToolbarModule,
+                        MatLegacyButtonModule,
+                        MatIconModule,
+                        MatLegacyListModule,
+                        MatLegacyProgressBarModule,
+                        SkFrontLibModule
+                    ],
+                    declarations: [
+                        SkUploaderComponent,
+                        SkUploaderDirective
+                    ],
+                    exports: [
+                        SkUploaderComponent,
+                        SkUploaderDirective
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SkUploaderComponent, SkUploaderDirective, SkUploaderModule };
+//# sourceMappingURL=sk-front-lib-uploader.mjs.map