@mintplayer/ng-bootstrap 13.1.11 → 13.1.13

package/fesm2015/mintplayer-ng-bootstrap.mjs

@@ -693,21 +693,35 @@ class BsContextMenuDirective {
         this.element.nativeElement.oncontextmenu = (ev) => {
             ev.preventDefault();
             this.checkAndCloseExisting(ev);
+            console.log('d', element.nativeElement);
             this.overlayRef = this.overlay.create({
-                scrollStrategy: this.overlay.scrollStrategies.noop(),
+                hasBackdrop: false,
+                scrollStrategy: this.overlay.scrollStrategies.reposition(),
                 positionStrategy: this.overlay.position()
-                    .global()
-                    .left(ev.x + 'px')
-                    .bottom((window.innerHeight - ev.y) + 'px')
-                    .top(ev.y + 'px')
+                    // .flexibleConnectedTo({ x: ev.x, y: ev.y })
+                    .flexibleConnectedTo(this.element)
+                    .withPositions([
+                    // element: TopLeft - dropdown: TopLeft
+                    { originX: "start", originY: "top", overlayX: "start", overlayY: "top", offsetX: ev.offsetX, offsetY: ev.offsetY },
+                    // // element: TopLeft - dropdown: BottomLeft
+                    // { originX: "start", originY: "top", overlayX: "start", overlayY: "bottom", offsetX: ev.offsetX, offsetY: ev.offsetY },
+                    // // element: TopLeft - dropdown: TopRight
+                    // { originX: "start", originY: "top", overlayX: "end", overlayY: "top", offsetX: ev.offsetX, offsetY: ev.offsetY },
+                    // // element: TopLeft - dropdown: BottomRight
+                    // { originX: "start", originY: "top", overlayX: "end", overlayY: "bottom", offsetX: ev.offsetX, offsetY: ev.offsetY },
+                ])
             });
             this.templatePortal = new TemplatePortal(this.templateRef, this.viewContainerRef);
-            this.overlayRef.attach(this.templatePortal);
+            const view = this.overlayRef.attach(this.templatePortal);
+            view.rootNodes.forEach(node => node.classList.add('position-static'));
         };
     }
     clickAnywhere(ev) {
         this.checkAndCloseExisting(ev);
     }
+    onBlur() {
+        this.close();
+    }
     close() {
         if (this.overlayRef) {
             this.overlayRef.detach();
@@ -722,7 +736,7 @@ class BsContextMenuDirective {
     }
 }
 BsContextMenuDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsContextMenuDirective, deps: [{ token: i1$1.Overlay }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: i0.ElementRef, host: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
-BsContextMenuDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BsContextMenuDirective, selector: "[bsContextMenu]", host: { listeners: { "document:click": "clickAnywhere($event)", "window:blur": "close()" } }, ngImport: i0 });
+BsContextMenuDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BsContextMenuDirective, selector: "[bsContextMenu]", host: { listeners: { "document:click": "clickAnywhere($event)", "window:blur": "onBlur()" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsContextMenuDirective, decorators: [{
             type: Directive,
             args: [{
@@ -737,7 +751,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
     }, propDecorators: { clickAnywhere: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
-            }], close: [{
+            }], onBlur: [{
                 type: HostListener,
                 args: ['window:blur']
             }] } });
@@ -1098,7 +1112,9 @@ class BsDropdownMenuDirective extends ClickOutsideDirective {
                     positionStrategy: this.overlay.position()
                         .flexibleConnectedTo(!this.dropdown.toggle ? dropdown.elementRef : this.dropdown.toggle.toggleButton)
                         .withPositions([
+                        // element: BottomLeft - dropdown: TopLeft
                         { originX: "start", originY: "bottom", overlayX: "start", overlayY: "top", offsetY: 0 },
+                        // element: TopLeft - dropdown: BottomLeft
                         { originX: "start", originY: "top", overlayX: "start", overlayY: "bottom", offsetY: 0 },
                     ]),
                 });
@@ -1313,6 +1329,395 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 }]
         }] });
 
+class BsProgressComponent {
+    constructor() {
+        this.progressClass = true;
+        this.height = null;
+        this.isIndeterminate = false;
+    }
+}
+BsProgressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BsProgressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsProgressComponent, selector: "bs-progress", inputs: { height: "height", isIndeterminate: "isIndeterminate" }, host: { properties: { "class.progress": "this.progressClass", "style.height.px": "this.height" } }, ngImport: i0, template: "<ng-content *ngIf=\"!isIndeterminate\"></ng-content>\n<div *ngIf=\"isIndeterminate\" class=\"progress-bar progress-bar-infinite\" role=\"progressbar\" aria-valuenow=\"infinite\"></div>", styles: ["@keyframes progress-infinite{0%{width:10%;margin-left:0%}25%{width:70%;margin-left:15%}50%{width:10%;margin-left:90%}75%{width:70%;margin-left:15%}to{width:10%;margin-left:0%}}.progress-bar-infinite{animation:progress-infinite 1.5s infinite}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsProgressComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-progress', template: "<ng-content *ngIf=\"!isIndeterminate\"></ng-content>\n<div *ngIf=\"isIndeterminate\" class=\"progress-bar progress-bar-infinite\" role=\"progressbar\" aria-valuenow=\"infinite\"></div>", styles: ["@keyframes progress-infinite{0%{width:10%;margin-left:0%}25%{width:70%;margin-left:15%}50%{width:10%;margin-left:90%}75%{width:70%;margin-left:15%}to{width:10%;margin-left:0%}}.progress-bar-infinite{animation:progress-infinite 1.5s infinite}\n"] }]
+        }], propDecorators: { progressClass: [{
+                type: HostBinding,
+                args: ['class.progress']
+            }], height: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['style.height.px']
+            }], isIndeterminate: [{
+                type: Input
+            }] } });
+
+class BsProgressBarComponent {
+    constructor() {
+        this.destroyed$ = new Subject();
+        this.minimum$ = new BehaviorSubject(0);
+        this.maximum$ = new BehaviorSubject(100);
+        this.value$ = new BehaviorSubject(50);
+        this.color$ = new BehaviorSubject(Color.primary);
+        this.striped = false;
+        this.animated = false;
+        this.progressBar = true;
+        this.colorClass = 'bg-primary';
+        this.widthStyle = '0';
+        this.role = 'progressbar';
+        this.valueNow = 50;
+        this.valueMin = 0;
+        this.valueMax = 100;
+        this.percentage$ = combineLatest([this.minimum$, this.maximum$, this.value$])
+            .pipe(map(([minimum, maximum, value]) => {
+            return (value - minimum) / (maximum - minimum) * 100;
+        }));
+        this.width$ = this.percentage$
+            .pipe(map((width) => {
+            return String(width) + '%';
+        }));
+        this.colorClass$ = this.color$
+            .pipe(map((color) => {
+            const name = Color[color];
+            return `bg-${name}`;
+        }));
+        this.colorClass$
+            .pipe(takeUntil(this.destroyed$))
+            .subscribe((color) => {
+            this.colorClass = color;
+        });
+        this.width$
+            .pipe(takeUntil(this.destroyed$))
+            .subscribe((width) => {
+            this.widthStyle = width;
+        });
+        this.value$
+            .pipe(takeUntil(this.destroyed$))
+            .subscribe((value) => {
+            this.valueNow = value;
+        });
+        this.minimum$
+            .pipe(takeUntil(this.destroyed$))
+            .subscribe((value) => {
+            this.valueMin = value;
+        });
+        this.maximum$
+            .pipe(takeUntil(this.destroyed$))
+            .subscribe((value) => {
+            this.valueMax = value;
+        });
+    }
+    set minimum(value) {
+        this.minimum$.next(value);
+    }
+    set maximum(value) {
+        this.maximum$.next(value);
+    }
+    set value(value) {
+        this.value$.next(value);
+    }
+    set color(value) {
+        this.color$.next(value);
+    }
+    ngOnDestroy() {
+        this.destroyed$.next(true);
+    }
+}
+BsProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BsProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsProgressBarComponent, selector: "bs-progress-bar", inputs: { minimum: "minimum", maximum: "maximum", value: "value", color: "color", striped: "striped", animated: "animated" }, host: { properties: { "class.progress-bar-striped": "this.striped", "class.progress-bar-animated": "this.animated", "class.progress-bar": "this.progressBar", "class": "this.colorClass", "style.width": "this.widthStyle", "attr.role": "this.role", "attr.aria-valuenow": "this.valueNow", "attr.aria-valuemin": "this.valueMin", "attr.aria-valuemax": "this.valueMax" } }, ngImport: i0, template: "", styles: [""] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-progress-bar', template: "", styles: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { minimum: [{
+                type: Input
+            }], maximum: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], striped: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.progress-bar-striped']
+            }], animated: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.progress-bar-animated']
+            }], progressBar: [{
+                type: HostBinding,
+                args: ['class.progress-bar']
+            }], colorClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], widthStyle: [{
+                type: HostBinding,
+                args: ['style.width']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], valueNow: [{
+                type: HostBinding,
+                args: ['attr.aria-valuenow']
+            }], valueMin: [{
+                type: HostBinding,
+                args: ['attr.aria-valuemin']
+            }], valueMax: [{
+                type: HostBinding,
+                args: ['attr.aria-valuemax']
+            }] } });
+
+class BsForDirective {
+    onMouseClick() {
+        if (!('tagName' in this.bsFor)) {
+            this.bsFor.focus();
+        }
+        else if (this.bsFor.tagName.toLowerCase() !== 'input') {
+            this.bsFor.focus();
+        }
+        else if (this.bsFor.type.toLowerCase() === 'file') {
+            this.bsFor.click();
+        }
+        else {
+            this.bsFor.focus();
+        }
+    }
+}
+BsForDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsForDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+BsForDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BsForDirective, selector: "[bsFor]", inputs: { bsFor: "bsFor" }, host: { listeners: { "click": "onMouseClick()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsForDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bsFor]'
+                }]
+        }], propDecorators: { bsFor: [{
+                type: Input
+            }], onMouseClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class BsFormatBytesPipe {
+    transform(value, decimals = 2) {
+        if (value === 0) {
+            return "0 Bytes";
+        }
+        const k = 1024;
+        const dm = decimals <= 0 ? 0 : decimals;
+        const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+        const i = Math.floor(Math.log(value) / Math.log(k));
+        return parseFloat((value / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+    }
+}
+BsFormatBytesPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsFormatBytesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+BsFormatBytesPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsFormatBytesPipe, name: "bsFormatBytes" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsFormatBytesPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'bsFormatBytes'
+                }]
+        }] });
+
+class BsFileUploadComponent {
+    constructor() {
+        this.dropFilesCaption = 'Drop your files here';
+        this.browseFilesCaption = 'Browse for files';
+        this.placeholder = 'Drop files to upload';
+        this.isDraggingFile = false;
+        this.files = [];
+        this.filesDropped = new EventEmitter();
+    }
+    onChange(event) {
+        console.log('event', event);
+        if (!event.target)
+            return;
+        if (!('files' in event.target))
+            return;
+        if (!event.target['files'])
+            return;
+        const files = event.target.files;
+        if (!files)
+            return;
+        this.processDroppedFiles(files);
+    }
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (event.dataTransfer) {
+            this.isDraggingFile = true;
+            event.dataTransfer.effectAllowed = "copy";
+        }
+    }
+    onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDraggingFile = false;
+    }
+    onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDraggingFile = false;
+        if (event.dataTransfer && event.dataTransfer.files) {
+            this.processDroppedFiles(event.dataTransfer.files);
+        }
+    }
+    processDroppedFiles(fileList) {
+        const newFiles = [...Array(fileList.length).keys()]
+            .map(i => fileList.item(i))
+            .filter(f => !!f)
+            .map(f => ({ file: f, progress: 0 }));
+        this.files.push(...newFiles);
+        this.filesDropped.emit(newFiles);
+    }
+}
+BsFileUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BsFileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsFileUploadComponent, selector: "bs-file-upload", inputs: { dropFilesCaption: "dropFilesCaption", browseFilesCaption: "browseFilesCaption", placeholder: "placeholder", files: "files" }, outputs: { filesDropped: "filesDropped" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" } }, ngImport: i0, template: "<div class=\"dropzone border position-relative p-5\" [class.dragging]=\"isDraggingFile\">\n    <input type=\"file\" multiple #fileUpload (change)=\"onChange($event)\" [title]=\"placeholder\" [placeholder]=\"placeholder\" class=\"position-absolute w-100 h-100\">\n    <!-- <img src=\"/assets/ic-file-upload.svg\" [alt]=\"placeholder\"> -->\n    <span class=\"h3 d-block\">{{ dropFilesCaption }}</span>\n    <label class=\"btn btn-primary position-relative\" [bsFor]=\"fileUpload\">{{ browseFilesCaption }}</label>\n</div>\n<ul class=\"list-group files-list\">\n    <li class=\"list-group-item\" *ngFor=\"let upload of files\">\n        <ng-container *ngTemplateOutlet=\"fileTemplate ?? defaultFileTemplate; context: { $implicit: upload }\"></ng-container>\n    </li>\n</ul>\n\n<ng-template #defaultFileTemplate let-upload>\n    <div class=\"d-flex flex-row mx-auto\">\n        <div class=\"file-img\"></div>\n        <div class=\"flex-grow-1 text-start px-2\">\n            <span class=\"d-block text-truncate text-secondary\">{{ upload.file.name }}</span>\n            <span class=\"d-block text-grey mb-0\">{{ upload.file.size | bsFormatBytes }}</span>\n            <bs-progress [height]=\"4\">\n                <bs-progress-bar [minimum]=\"0\" [maximum]=\"upload.file.size\" [value]=\"upload.progress\"></bs-progress-bar>\n            </bs-progress>\n        </div>\n    </div>\n</ng-template>", styles: [".dropzone{z-index:1}.dropzone.dragging{border:4px solid #CB1535!important;background:#DC88A8;margin:-3px -3px -4px}.dropzone input{opacity:0;z-index:2;top:0;left:0}.dropzone .btn{z-index:5}.files-list{margin-top:-1px}.files-list .d-flex{max-width:400px}.text-grey{color:#999}.list-group span{margin:-5px auto}\n"], components: [{ type: BsProgressComponent, selector: "bs-progress", inputs: ["height", "isIndeterminate"] }, { type: BsProgressBarComponent, selector: "bs-progress-bar", inputs: ["minimum", "maximum", "value", "color", "striped", "animated"] }], directives: [{ type: BsForDirective, selector: "[bsFor]", inputs: ["bsFor"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "bsFormatBytes": BsFormatBytesPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsFileUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-file-upload', template: "<div class=\"dropzone border position-relative p-5\" [class.dragging]=\"isDraggingFile\">\n    <input type=\"file\" multiple #fileUpload (change)=\"onChange($event)\" [title]=\"placeholder\" [placeholder]=\"placeholder\" class=\"position-absolute w-100 h-100\">\n    <!-- <img src=\"/assets/ic-file-upload.svg\" [alt]=\"placeholder\"> -->\n    <span class=\"h3 d-block\">{{ dropFilesCaption }}</span>\n    <label class=\"btn btn-primary position-relative\" [bsFor]=\"fileUpload\">{{ browseFilesCaption }}</label>\n</div>\n<ul class=\"list-group files-list\">\n    <li class=\"list-group-item\" *ngFor=\"let upload of files\">\n        <ng-container *ngTemplateOutlet=\"fileTemplate ?? defaultFileTemplate; context: { $implicit: upload }\"></ng-container>\n    </li>\n</ul>\n\n<ng-template #defaultFileTemplate let-upload>\n    <div class=\"d-flex flex-row mx-auto\">\n        <div class=\"file-img\"></div>\n        <div class=\"flex-grow-1 text-start px-2\">\n            <span class=\"d-block text-truncate text-secondary\">{{ upload.file.name }}</span>\n            <span class=\"d-block text-grey mb-0\">{{ upload.file.size | bsFormatBytes }}</span>\n            <bs-progress [height]=\"4\">\n                <bs-progress-bar [minimum]=\"0\" [maximum]=\"upload.file.size\" [value]=\"upload.progress\"></bs-progress-bar>\n            </bs-progress>\n        </div>\n    </div>\n</ng-template>", styles: [".dropzone{z-index:1}.dropzone.dragging{border:4px solid #CB1535!important;background:#DC88A8;margin:-3px -3px -4px}.dropzone input{opacity:0;z-index:2;top:0;left:0}.dropzone .btn{z-index:5}.files-list{margin-top:-1px}.files-list .d-flex{max-width:400px}.text-grey{color:#999}.list-group span{margin:-5px auto}\n"] }]
+        }], propDecorators: { dropFilesCaption: [{
+                type: Input
+            }], browseFilesCaption: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], files: [{
+                type: Input
+            }], filesDropped: [{
+                type: Output
+            }], onDragOver: [{
+                type: HostListener,
+                args: ['dragover', ['$event']]
+            }], onDragLeave: [{
+                type: HostListener,
+                args: ['dragleave', ['$event']]
+            }], onDrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }] } });
+
+class BsFileUploadTemplateDirective {
+    constructor(fileUploadComponent, templateRef) {
+        fileUploadComponent.fileTemplate = templateRef;
+    }
+}
+BsFileUploadTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsFileUploadTemplateDirective, deps: [{ token: BsFileUploadComponent }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+BsFileUploadTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BsFileUploadTemplateDirective, selector: "[bsFileUploadTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsFileUploadTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bsFileUploadTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: BsFileUploadComponent }, { type: i0.TemplateRef }]; } });
+
+class BsForModule {
+}
+BsForModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsForModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BsForModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsForModule, declarations: [BsForDirective], imports: [CommonModule], exports: [BsForDirective] });
+BsForModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsForModule, imports: [[
+            CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsForModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BsForDirective
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        BsForDirective
+                    ]
+                }]
+        }] });
+
+class BsProgressBarModule {
+}
+BsProgressBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BsProgressBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsProgressBarModule, declarations: [BsProgressBarComponent,
+        BsProgressComponent], imports: [CommonModule], exports: [BsProgressBarComponent,
+        BsProgressComponent] });
+BsProgressBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsProgressBarModule, imports: [[
+            CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsProgressBarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BsProgressBarComponent,
+                        BsProgressComponent
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        BsProgressBarComponent,
+                        BsProgressComponent
+                    ]
+                }]
+        }] });
+
+class BsFormatBytesModule {
+}
+BsFormatBytesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsFormatBytesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BsFormatBytesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsFormatBytesModule, declarations: [BsFormatBytesPipe], imports: [CommonModule], exports: [BsFormatBytesPipe] });
+BsFormatBytesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsFormatBytesModule, imports: [[
+            CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsFormatBytesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BsFormatBytesPipe
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        BsFormatBytesPipe
+                    ]
+                }]
+        }] });
+
+class BsFileUploadModule {
+}
+BsFileUploadModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsFileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BsFileUploadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsFileUploadModule, declarations: [BsFileUploadComponent,
+        BsFileUploadTemplateDirective], imports: [CommonModule,
+        BsForModule,
+        BsFormatBytesModule,
+        BsProgressBarModule], exports: [BsFileUploadComponent,
+        BsFileUploadTemplateDirective] });
+BsFileUploadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsFileUploadModule, imports: [[
+            CommonModule,
+            BsForModule,
+            BsFormatBytesModule,
+            BsProgressBarModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsFileUploadModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        BsFileUploadComponent,
+                        BsFileUploadTemplateDirective
+                    ],
+                    imports: [
+                        CommonModule,
+                        BsForModule,
+                        BsFormatBytesModule,
+                        BsProgressBarModule
+                    ],
+                    exports: [
+                        BsFileUploadComponent,
+                        BsFileUploadTemplateDirective
+                    ]
+                }]
+        }] });
+
 class BsListGroupItemComponent {
     constructor() {
     }
@@ -1725,173 +2130,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 }]
         }] });
 
-class BsProgressComponent {
-    constructor() {
-        this.progressClass = true;
-        this.height = null;
-        this.isIndeterminate = false;
-    }
-}
-BsProgressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BsProgressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsProgressComponent, selector: "bs-progress", inputs: { height: "height", isIndeterminate: "isIndeterminate" }, host: { properties: { "class.progress": "this.progressClass", "style.height.px": "this.height" } }, ngImport: i0, template: "<ng-content *ngIf=\"!isIndeterminate\"></ng-content>\n<div *ngIf=\"isIndeterminate\" class=\"progress-bar progress-bar-infinite\" role=\"progressbar\" aria-valuenow=\"infinite\"></div>", styles: ["@keyframes progress-infinite{0%{width:10%;margin-left:0%}25%{width:70%;margin-left:15%}50%{width:10%;margin-left:90%}75%{width:70%;margin-left:15%}to{width:10%;margin-left:0%}}.progress-bar-infinite{animation:progress-infinite 1.5s infinite}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsProgressComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'bs-progress', template: "<ng-content *ngIf=\"!isIndeterminate\"></ng-content>\n<div *ngIf=\"isIndeterminate\" class=\"progress-bar progress-bar-infinite\" role=\"progressbar\" aria-valuenow=\"infinite\"></div>", styles: ["@keyframes progress-infinite{0%{width:10%;margin-left:0%}25%{width:70%;margin-left:15%}50%{width:10%;margin-left:90%}75%{width:70%;margin-left:15%}to{width:10%;margin-left:0%}}.progress-bar-infinite{animation:progress-infinite 1.5s infinite}\n"] }]
-        }], propDecorators: { progressClass: [{
-                type: HostBinding,
-                args: ['class.progress']
-            }], height: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.height.px']
-            }], isIndeterminate: [{
-                type: Input
-            }] } });
-
-class BsProgressBarComponent {
-    constructor() {
-        this.destroyed$ = new Subject();
-        this.minimum$ = new BehaviorSubject(0);
-        this.maximum$ = new BehaviorSubject(100);
-        this.value$ = new BehaviorSubject(50);
-        this.color$ = new BehaviorSubject(Color.primary);
-        this.striped = false;
-        this.animated = false;
-        this.progressBar = true;
-        this.colorClass = 'bg-primary';
-        this.widthStyle = '0';
-        this.role = 'progressbar';
-        this.valueNow = 50;
-        this.valueMin = 0;
-        this.valueMax = 100;
-        this.percentage$ = combineLatest([this.minimum$, this.maximum$, this.value$])
-            .pipe(map(([minimum, maximum, value]) => {
-            return (value - minimum) / (maximum - minimum) * 100;
-        }));
-        this.width$ = this.percentage$
-            .pipe(map((width) => {
-            return String(width) + '%';
-        }));
-        this.colorClass$ = this.color$
-            .pipe(map((color) => {
-            const name = Color[color];
-            return `bg-${name}`;
-        }));
-        this.colorClass$
-            .pipe(takeUntil(this.destroyed$))
-            .subscribe((color) => {
-            this.colorClass = color;
-        });
-        this.width$
-            .pipe(takeUntil(this.destroyed$))
-            .subscribe((width) => {
-            this.widthStyle = width;
-        });
-        this.value$
-            .pipe(takeUntil(this.destroyed$))
-            .subscribe((value) => {
-            this.valueNow = value;
-        });
-        this.minimum$
-            .pipe(takeUntil(this.destroyed$))
-            .subscribe((value) => {
-            this.valueMin = value;
-        });
-        this.maximum$
-            .pipe(takeUntil(this.destroyed$))
-            .subscribe((value) => {
-            this.valueMax = value;
-        });
-    }
-    set minimum(value) {
-        this.minimum$.next(value);
-    }
-    set maximum(value) {
-        this.maximum$.next(value);
-    }
-    set value(value) {
-        this.value$.next(value);
-    }
-    set color(value) {
-        this.color$.next(value);
-    }
-    ngOnDestroy() {
-        this.destroyed$.next(true);
-    }
-}
-BsProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BsProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsProgressBarComponent, selector: "bs-progress-bar", inputs: { minimum: "minimum", maximum: "maximum", value: "value", color: "color", striped: "striped", animated: "animated" }, host: { properties: { "class.progress-bar-striped": "this.striped", "class.progress-bar-animated": "this.animated", "class.progress-bar": "this.progressBar", "class": "this.colorClass", "style.width": "this.widthStyle", "attr.role": "this.role", "attr.aria-valuenow": "this.valueNow", "attr.aria-valuemin": "this.valueMin", "attr.aria-valuemax": "this.valueMax" } }, ngImport: i0, template: "", styles: [""] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsProgressBarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'bs-progress-bar', template: "", styles: [""] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { minimum: [{
-                type: Input
-            }], maximum: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], striped: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.progress-bar-striped']
-            }], animated: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.progress-bar-animated']
-            }], progressBar: [{
-                type: HostBinding,
-                args: ['class.progress-bar']
-            }], colorClass: [{
-                type: HostBinding,
-                args: ['class']
-            }], widthStyle: [{
-                type: HostBinding,
-                args: ['style.width']
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], valueNow: [{
-                type: HostBinding,
-                args: ['attr.aria-valuenow']
-            }], valueMin: [{
-                type: HostBinding,
-                args: ['attr.aria-valuemin']
-            }], valueMax: [{
-                type: HostBinding,
-                args: ['attr.aria-valuemax']
-            }] } });
-
-class BsProgressBarModule {
-}
-BsProgressBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-BsProgressBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsProgressBarModule, declarations: [BsProgressBarComponent,
-        BsProgressComponent], imports: [CommonModule], exports: [BsProgressBarComponent,
-        BsProgressComponent] });
-BsProgressBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsProgressBarModule, imports: [[
-            CommonModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsProgressBarModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        BsProgressBarComponent,
-                        BsProgressComponent
-                    ],
-                    imports: [
-                        CommonModule
-                    ],
-                    exports: [
-                        BsProgressBarComponent,
-                        BsProgressComponent
-                    ]
-                }]
-        }] });
-
 class BsScrollspyDirective {
     constructor(element) {
         this.element = element;
@@ -2794,5 +3032,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BsAccordionComponent, BsAccordionModule, BsAccordionTabComponent, BsAccordionTabHeaderComponent, BsAlertCloseComponent, BsAlertComponent, BsAlertModule, BsCalendarComponent, BsCalendarModule, BsCardComponent, BsCardHeaderComponent, BsCardModule, BsCarouselComponent, BsCarouselImageDirective, BsCarouselModule, BsContextMenuDirective, BsContextMenuModule, BsDatatableColumnDirective, BsDatatableComponent, BsDatatableModule, BsDatepickerComponent, BsDatepickerModule, BsDropdownDirective, BsDropdownMenuDirective, BsDropdownModule, BsDropdownToggleDirective, BsFontColorPipe, BsFontColorPipeModule, BsItemTemplateDirective, BsListGroupComponent, BsListGroupItemComponent, BsListGroupModule, BsMultiselectComponent, BsMultiselectModule, BsNavbarComponent, BsNavbarDropdownComponent, BsNavbarItemComponent, BsNavbarModule, BsNavbarNavComponent, BsPaginationComponent, BsPaginationModule, BsProgressBarComponent, BsProgressBarModule, BsProgressComponent, BsRowTemplateDirective, BsScrollspyComponent, BsScrollspyDirective, BsScrollspyModule, BsSelect2Component, BsSelect2Module, BsSnackbarCloseDirective, BsSnackbarComponent, BsSnackbarModule, BsSnackbarService, BsTabControlComponent, BsTabControlModule, BsTabPageComponent, BsToggleButtonComponent, BsToggleButtonModule, BsTooltipDirective, BsTooltipModule, BsTypeaheadComponent, BsTypeaheadModule, Color, DatatableSettings, DropdownToggleDirective, NavLinkDirective, NavbarContentDirective, Position };
+export { BsAccordionComponent, BsAccordionModule, BsAccordionTabComponent, BsAccordionTabHeaderComponent, BsAlertCloseComponent, BsAlertComponent, BsAlertModule, BsCalendarComponent, BsCalendarModule, BsCardComponent, BsCardHeaderComponent, BsCardModule, BsCarouselComponent, BsCarouselImageDirective, BsCarouselModule, BsContextMenuDirective, BsContextMenuModule, BsDatatableColumnDirective, BsDatatableComponent, BsDatatableModule, BsDatepickerComponent, BsDatepickerModule, BsDropdownDirective, BsDropdownMenuDirective, BsDropdownModule, BsDropdownToggleDirective, BsFileUploadComponent, BsFileUploadModule, BsFileUploadTemplateDirective, BsFontColorPipe, BsFontColorPipeModule, BsForDirective, BsForModule, BsItemTemplateDirective, BsListGroupComponent, BsListGroupItemComponent, BsListGroupModule, BsMultiselectComponent, BsMultiselectModule, BsNavbarComponent, BsNavbarDropdownComponent, BsNavbarItemComponent, BsNavbarModule, BsNavbarNavComponent, BsPaginationComponent, BsPaginationModule, BsProgressBarComponent, BsProgressBarModule, BsProgressComponent, BsRowTemplateDirective, BsScrollspyComponent, BsScrollspyDirective, BsScrollspyModule, BsSelect2Component, BsSelect2Module, BsSnackbarCloseDirective, BsSnackbarComponent, BsSnackbarModule, BsSnackbarService, BsTabControlComponent, BsTabControlModule, BsTabPageComponent, BsToggleButtonComponent, BsToggleButtonModule, BsTooltipDirective, BsTooltipModule, BsTypeaheadComponent, BsTypeaheadModule, Color, DatatableSettings, DropdownToggleDirective, NavLinkDirective, NavbarContentDirective, Position };
 //# sourceMappingURL=mintplayer-ng-bootstrap.mjs.map