@mintplayer/ng-bootstrap 13.1.9 → 13.1.14

package/fesm2020/mintplayer-ng-bootstrap.mjs

@@ -4,7 +4,7 @@ import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { SlideUpDownAnimation, FadeInOutAnimation, CarouselSlideAnimation, ColorTransitionAnimation } from '@mintplayer/ng-animations';
-import { Subject, BehaviorSubject, map, takeUntil, filter, take, Observable, combineLatest } from 'rxjs';
+import { Subject, BehaviorSubject, map, takeUntil, filter, take, Observable, combineLatest, debounceTime } from 'rxjs';
 import { map as map$1, takeUntil as takeUntil$1, take as take$1 } from 'rxjs/operators';
 import * as i1$1 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
@@ -693,33 +693,50 @@ 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);
     }
-    checkAndCloseExisting(ev) {
+    onBlur() {
+        this.close();
+    }
+    close() {
         if (this.overlayRef) {
-            if (!this.overlayRef.overlayElement.contains(ev.target)) {
-                this.overlayRef.detach();
-                this.overlayRef.dispose();
-                this.overlayRef = null;
-            }
+            this.overlayRef.detach();
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+    }
+    checkAndCloseExisting(ev) {
+        if (this.overlayRef && !this.overlayRef.overlayElement.contains(ev.target)) {
+            this.close();
         }
     }
 }
 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)" } }, 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: [{
@@ -732,6 +749,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 }] }]; }, propDecorators: { clickAnywhere: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
+            }], onBlur: [{
+                type: HostListener,
+                args: ['window:blur']
             }] } });
 
 class BsContextMenuModule {
@@ -1090,7 +1110,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 },
                     ]),
                 });
@@ -1190,9 +1212,13 @@ class BsDropdownDirective {
             this.isOpenChange.emit(value);
         }
     }
+    //#endregion
+    onBlur() {
+        this.isOpen = false;
+    }
 }
 BsDropdownDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsDropdownDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-BsDropdownDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BsDropdownDirective, selector: "[bsDropdown]", inputs: { hasBackdrop: "hasBackdrop", sameWidth: "sameWidth", closeOnClickOutside: "closeOnClickOutside", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange" }, queries: [{ propertyName: "menu", first: true, predicate: BsDropdownMenuDirective, descendants: true }, { propertyName: "toggle", first: true, predicate: BsDropdownToggleDirective, descendants: true }], ngImport: i0 });
+BsDropdownDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BsDropdownDirective, selector: "[bsDropdown]", inputs: { hasBackdrop: "hasBackdrop", sameWidth: "sameWidth", closeOnClickOutside: "closeOnClickOutside", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange" }, host: { listeners: { "window:blur": "onBlur()" } }, queries: [{ propertyName: "menu", first: true, predicate: BsDropdownMenuDirective, descendants: true }, { propertyName: "toggle", first: true, predicate: BsDropdownToggleDirective, descendants: true }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsDropdownDirective, decorators: [{
             type: Directive,
             args: [{
@@ -1214,6 +1240,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                 type: Output
             }], isOpen: [{
                 type: Input
+            }], onBlur: [{
+                type: HostListener,
+                args: ['window:blur']
             }] } });
 
 class BsDatepickerComponent {
@@ -1295,6 +1324,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() {
     }
@@ -1406,44 +1824,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
 
 class BsNavbarComponent {
     constructor() {
-        this.isExpanded = false;
+        this.isExpanded$ = new BehaviorSubject(false);
     }
     toggleExpanded() {
-        this.isExpanded = !this.isExpanded;
+        this.isExpanded$.pipe(take(1)).subscribe((isExpanded) => {
+            this.isExpanded$.next(!isExpanded);
+        });
     }
 }
 BsNavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BsNavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsNavbarComponent, selector: "bs-navbar", viewQueries: [{ propertyName: "nav", first: true, predicate: ["nav"], descendants: true }], ngImport: i0, template: "<nav #nav class=\"navbar navbar-expand-md position-fixed navbar-dark bg-dark\">\n    <div class=\"container-fluid\">\n        <div class=\"d-flex w-100 w-md-auto\">\n            <a class=\"navbar-brand mx-auto mx-md-unset\" href=\"#\">Navbar 2</a>\n            <button (click)=\"toggleExpanded()\" class=\"navbar-toggler align-self-end\" type=\"button\" data-toggle=\"collapse\">\n                <span class=\"navbar-toggler-icon\"></span>\n            </button>\n        </div>\n        <ng-content></ng-content>\n    </div>\n</nav>", styles: [":host ::ng-deep+*{padding-top:56px}nav{left:0;top:0;right:0;z-index:10}@media (min-width: 768px){.mx-md-unset{margin-left:0!important;margin-right:0!important}.w-md-auto{width:auto!important}}\n"] });
+BsNavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsNavbarComponent, selector: "bs-navbar", viewQueries: [{ propertyName: "nav", first: true, predicate: ["nav"], descendants: true }], ngImport: i0, template: "<nav #nav class=\"navbar navbar-expand-md position-fixed navbar-dark bg-dark\">\n    <div class=\"container-fluid\">\n        <div class=\"d-flex w-100 w-md-auto\">\n            <a class=\"navbar-brand mx-auto mx-md-unset\" href=\"#\">Navbar 2</a>\n            <button (click)=\"toggleExpanded()\" class=\"navbar-toggler align-self-end\" type=\"button\">\n                <span class=\"navbar-toggler-icon\"></span>\n            </button>\n        </div>\n        <ng-content></ng-content>\n    </div>\n</nav>", styles: [":host ::ng-deep+*{padding-top:56px}nav{left:0;top:0;right:0;z-index:10}@media (min-width: 768px){.mx-md-unset{margin-left:0!important;margin-right:0!important}.w-md-auto{width:auto!important}}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsNavbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-navbar', template: "<nav #nav class=\"navbar navbar-expand-md position-fixed navbar-dark bg-dark\">\n    <div class=\"container-fluid\">\n        <div class=\"d-flex w-100 w-md-auto\">\n            <a class=\"navbar-brand mx-auto mx-md-unset\" href=\"#\">Navbar 2</a>\n            <button (click)=\"toggleExpanded()\" class=\"navbar-toggler align-self-end\" type=\"button\" data-toggle=\"collapse\">\n                <span class=\"navbar-toggler-icon\"></span>\n            </button>\n        </div>\n        <ng-content></ng-content>\n    </div>\n</nav>", styles: [":host ::ng-deep+*{padding-top:56px}nav{left:0;top:0;right:0;z-index:10}@media (min-width: 768px){.mx-md-unset{margin-left:0!important;margin-right:0!important}.w-md-auto{width:auto!important}}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { nav: [{
+            args: [{ selector: 'bs-navbar', template: "<nav #nav class=\"navbar navbar-expand-md position-fixed navbar-dark bg-dark\">\n    <div class=\"container-fluid\">\n        <div class=\"d-flex w-100 w-md-auto\">\n            <a class=\"navbar-brand mx-auto mx-md-unset\" href=\"#\">Navbar 2</a>\n            <button (click)=\"toggleExpanded()\" class=\"navbar-toggler align-self-end\" type=\"button\">\n                <span class=\"navbar-toggler-icon\"></span>\n            </button>\n        </div>\n        <ng-content></ng-content>\n    </div>\n</nav>", styles: [":host ::ng-deep+*{padding-top:56px}nav{left:0;top:0;right:0;z-index:10}@media (min-width: 768px){.mx-md-unset{margin-left:0!important;margin-right:0!important}.w-md-auto{width:auto!important}}\n"] }]
+        }], propDecorators: { nav: [{
                 type: ViewChild,
                 args: ['nav']
             }] } });
 
 class BsNavbarNavComponent {
     constructor(bsNavbar) {
-        //#region collapse
-        this._collapse = true;
+        this.collapse$ = new BehaviorSubject(true);
+        this.windowWidth$ = new BehaviorSubject(null);
+        this.isResizing$ = new BehaviorSubject(false);
+        this.destroyed$ = new Subject();
         this.bsNavbar = bsNavbar;
+        this.showNavs$ = combineLatest([this.bsNavbar.isExpanded$, this.windowWidth$])
+            .pipe(filter(([isExpanded, windowWidth]) => {
+            return windowWidth !== null;
+        }))
+            .pipe(map(([isExpanded, windowWidth]) => {
+            if (windowWidth === null) {
+                throw 'windowWidth should not be null here';
+            }
+            else if (windowWidth >= 768) {
+                return true;
+            }
+            else if (isExpanded) {
+                return true;
+            }
+            else {
+                return false;
+            }
+        }));
+        this.windowWidth$
+            .pipe(debounceTime(300), takeUntil(this.destroyed$))
+            .subscribe(() => {
+            this.isResizing$.next(false);
+        });
+        this.onWindowResize();
     }
-    ngOnInit() {
+    ngOnDestroy() {
+        this.destroyed$.next(true);
     }
+    //#region collapse
     set collapse(value) {
-        this._collapse = value;
+        this.collapse$.next(value);
     }
     get collapse() {
-        return this._collapse;
+        return this.collapse$.value;
+    }
+    //#endregion
+    onWindowResize() {
+        this.isResizing$.next(true);
+        this.windowWidth$.next(window.innerWidth);
     }
 }
 BsNavbarNavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsNavbarNavComponent, deps: [{ token: BsNavbarComponent }], target: i0.ɵɵFactoryTarget.Component });
-BsNavbarNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsNavbarNavComponent, selector: "bs-navbar-nav", inputs: { collapse: "collapse" }, ngImport: i0, template: "<div class=\"navbar-collapse collapse w-100 show\" *ngIf=\"bsNavbar.isExpanded\" [@slideUpDown]>\n    <ul class=\"navbar-nav mr-auto\">\n        <ng-content></ng-content>\n    </ul>\n</div>", styles: [":host{margin-right:auto}@media screen and (max-width: 767px){:host{width:100%!important}.navbar-collapse.collapse{overflow:hidden}}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [SlideUpDownAnimation] });
+BsNavbarNavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsNavbarNavComponent, selector: "bs-navbar-nav", inputs: { collapse: "collapse" }, host: { listeners: { "window:resize": "onWindowResize()" } }, ngImport: i0, template: "<div class=\"navbar-collapse w-100 show\" [class.collapse]=\"collapse$ | async\" *ngIf=\"showNavs$ | async\" [@slideUpDown] [@.disabled]=\"isResizing$ | async\">\n    <ul class=\"navbar-nav mr-auto\">\n        <ng-content></ng-content>\n    </ul>\n</div>", styles: [":host{margin-right:auto}@media screen and (max-width: 767px){:host{width:100%!important}.navbar-collapse.collapse{overflow:hidden}}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i1.AsyncPipe }, animations: [SlideUpDownAnimation] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsNavbarNavComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bs-navbar-nav', animations: [SlideUpDownAnimation], template: "<div class=\"navbar-collapse collapse w-100 show\" *ngIf=\"bsNavbar.isExpanded\" [@slideUpDown]>\n    <ul class=\"navbar-nav mr-auto\">\n        <ng-content></ng-content>\n    </ul>\n</div>", styles: [":host{margin-right:auto}@media screen and (max-width: 767px){:host{width:100%!important}.navbar-collapse.collapse{overflow:hidden}}\n"] }]
+            args: [{ selector: 'bs-navbar-nav', animations: [SlideUpDownAnimation], template: "<div class=\"navbar-collapse w-100 show\" [class.collapse]=\"collapse$ | async\" *ngIf=\"showNavs$ | async\" [@slideUpDown] [@.disabled]=\"isResizing$ | async\">\n    <ul class=\"navbar-nav mr-auto\">\n        <ng-content></ng-content>\n    </ul>\n</div>", styles: [":host{margin-right:auto}@media screen and (max-width: 767px){:host{width:100%!important}.navbar-collapse.collapse{overflow:hidden}}\n"] }]
         }], ctorParameters: function () { return [{ type: BsNavbarComponent }]; }, propDecorators: { collapse: [{
                 type: Input
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize']
             }] } });
 
 class BsNavbarItemComponent {
@@ -1661,173 +2117,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 BsScrollOffsetService {
     constructor(routerConfig) {
         this.routerConfig = routerConfig;
@@ -1871,15 +2160,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
 
 class BsScrollspyComponent {
-    constructor(scrollOffsetService, document) {
+    constructor(scrollOffsetService, document, zone) {
         this.scrollOffsetService = scrollOffsetService;
+        this.zone = zone;
+        this.destroyed$ = new Subject();
+        this.viewInit$ = new BehaviorSubject(false);
+        this.contentInit$ = new BehaviorSubject(false);
         this.activeDirective = null;
         this.doc = document;
+        combineLatest([this.viewInit$, this.contentInit$])
+            .pipe(filter(([viewInit, contentInit]) => viewInit && contentInit), take(1))
+            .pipe(takeUntil(this.destroyed$))
+            .subscribe(() => {
+            // this.setActiveDirective();
+            this.scrollToCurrentInSpy();
+        });
     }
     ngAfterViewInit() {
-        this.onWindowScroll();
+        this.viewInit$.next(true);
+    }
+    ngAfterContentInit() {
+        this.contentInit$.next(true);
+    }
+    ngOnDestroy() {
+        this.destroyed$.next(true);
     }
     onWindowScroll() {
+        this.setActiveDirective();
+        this.scrollToCurrentInSpy();
+    }
+    setActiveDirective() {
         const offsetY = this.scrollOffsetService.getScrollOffset()[1];
         const dirs = this.directives.filter((d) => d.element.nativeElement.getBoundingClientRect().y < offsetY);
         if (this.directives.length === 0) {
@@ -1891,6 +2201,8 @@ class BsScrollspyComponent {
         else {
             this.activeDirective = dirs[dirs.length - 1];
         }
+    }
+    scrollToCurrentInSpy() {
         if (window && (window.innerWidth >= 768)) {
             if (this.activeDirective) {
                 const index = this.directives.toArray().findIndex((v, i) => v === this.activeDirective);
@@ -1908,7 +2220,7 @@ class BsScrollspyComponent {
         window.scrollTo({ top: y, behavior: 'smooth' });
     }
 }
-BsScrollspyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsScrollspyComponent, deps: [{ token: BsScrollOffsetService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
+BsScrollspyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsScrollspyComponent, deps: [{ token: BsScrollOffsetService }, { token: DOCUMENT }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
 BsScrollspyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BsScrollspyComponent, selector: "bs-scrollspy", host: { listeners: { "window:scroll": "onWindowScroll($event)" } }, queries: [{ propertyName: "directives", predicate: BsScrollspyDirective, descendants: true }], viewQueries: [{ propertyName: "anchors", predicate: ["anchor"], descendants: true }], ngImport: i0, template: "<div class=\"spy\">\n    <ul class=\"text-muted\">\n        <li *ngFor=\"let dir of directives; let i = index\">\n            <span [attr.data-index]=\"i\" class=\"cursor-pointer\" [ngClass]=\"'nav' + dir.element.nativeElement.tagName\" [class.fw-bold]=\"activeDirective?.element === dir.element\" (click)=\"scrollToHeader(dir)\" [title]=\"dir.element.nativeElement.textContent\" #anchor>\n                {{ dir.element.nativeElement.textContent }}\n            </span>\n        </li>\n    </ul>\n</div>\n<div class=\"content\">\n    <ng-content></ng-content>\n</div>", styles: [":host{display:block}.spy>ul{list-style-type:none;padding-left:0}.spy>ul>li:hover{color:rgba(var(--bs-dark-rgb),var(--bs-text-opacity))!important}.spy>ul>li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width: 768px){:host{display:grid;grid-template-areas:\"content toc\";grid-template-columns:auto 200px;grid-template-rows:auto;grid-gap:inherit;gap:inherit;grid-area:main}.spy{position:sticky;top:5rem;right:0;z-index:2;height:calc(100vh - 7rem);overflow-y:auto;grid-area:toc}.spy>ul{padding-left:2rem}}.navH2{margin-left:20px}.navH3{margin-left:40px}.navH4{margin-left:60px}\n"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsScrollspyComponent, decorators: [{
             type: Component,
@@ -1916,7 +2228,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
         }], ctorParameters: function () { return [{ type: BsScrollOffsetService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }]; }, propDecorators: { directives: [{
+                }] }, { type: i0.NgZone }]; }, propDecorators: { directives: [{
                 type: ContentChildren,
                 args: [BsScrollspyDirective, { descendants: true }]
             }], anchors: [{
@@ -2058,7 +2370,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
 class BsItemTemplateDirective {
     constructor(select2component, templateRef) {
         this.select2component = select2component;
-        console.log('template', templateRef);
         this.select2component.itemTemplate = templateRef;
     }
 }
@@ -2179,7 +2490,6 @@ class BsSnackbarService {
             width: '100%'
         });
         const componentInstance = overlayRef.attach(portal);
-        // componentInstance.
         componentInstance.instance['instance'] = {
             component: componentInstance,
             overlay: overlayRef
@@ -2428,6 +2738,9 @@ class BsTooltipDirective {
             this.hideTooltip();
         };
     }
+    onBlur() {
+        this.hideTooltip();
+    }
     showTooltip() {
         const positions = [];
         switch (this.bsTooltip) {
@@ -2490,7 +2803,7 @@ class BsTooltipDirective {
     }
 }
 BsTooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsTooltipDirective, deps: [{ token: i1$1.Overlay }, { token: i0.TemplateRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: i0.ElementRef, host: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
-BsTooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BsTooltipDirective, selector: "*[bsTooltip]", inputs: { bsTooltip: "bsTooltip" }, ngImport: i0 });
+BsTooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: BsTooltipDirective, selector: "*[bsTooltip]", inputs: { bsTooltip: "bsTooltip" }, host: { listeners: { "window:blur": "onBlur()" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BsTooltipDirective, decorators: [{
             type: Directive,
             args: [{
@@ -2500,7 +2813,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImpor
                     type: Host
                 }, {
                     type: SkipSelf
-                }] }]; }, propDecorators: { bsTooltip: [{
+                }] }]; }, propDecorators: { onBlur: [{
+                type: HostListener,
+                args: ['window:blur']
+            }], bsTooltip: [{
                 type: Input
             }] } });
 
@@ -2691,5 +3007,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