sk-front-lib 0.18.2 → 0.18.4

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

@@ -1,546 +0,0 @@
-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