@bravura/ui 1.23.2 → 1.24.1

package/fesm2015/bravura-ui-file-upload.js

@@ -127,6 +127,13 @@ class FileUploadComponent {
         this.dropHint = 'Please release the mouse button to start uploading.';
         /** Specifies the total number of files accepted. A falsy value removes the limit.*/
         this.limit = 0;
+        /**
+         * specify the number of maximum bytes that can be uploaded.
+         * if number is specified, bytes are assumed, otherwise enter a string for specific size type.
+         */
+        this.fileSize = '10MB';
+        /** @ignore */
+        this._fileSizeExceedMsg = '';
         /** @ignore */
         this._uploadingItems = [];
         /** @ignore */
@@ -234,7 +241,7 @@ class FileUploadComponent {
         event.stopPropagation();
         this._onDndStopFrame();
         const files = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files;
-        if (files === null || files === void 0 ? void 0 : files.length) {
+        if ((files === null || files === void 0 ? void 0 : files.length) && this._validateFileSize(files)) {
             this._uploadFiles(Array.from(files));
         }
     }
@@ -268,7 +275,7 @@ class FileUploadComponent {
     /** @ignore */
     _handleFileSelection() {
         const fileList = this._fileInput.nativeElement.files;
-        if (fileList === null || fileList === void 0 ? void 0 : fileList.length) {
+        if ((fileList === null || fileList === void 0 ? void 0 : fileList.length) && this._validateFileSize(fileList)) {
             this._uploadFiles(Array.from(fileList));
             this._fileInput.nativeElement.value = '';
         }
@@ -281,6 +288,41 @@ class FileUploadComponent {
     get _initialising() {
         return !!this._initSubs && !this._initSubs.closed;
     }
+    returnFileSize(size) {
+        if (size < 1024) {
+            return `${size} bytes`;
+        }
+        else if (size >= 1024 && size < 1048576) {
+            return `${(size / 1024).toFixed(1)} KB`;
+        }
+        else {
+            return `${(size / 1048576).toFixed(1)} MB`;
+        }
+    }
+    _validateFileSize(files) {
+        this._fileSizeExceedMsg = '';
+        const maxSize = this.returnFileSize(this._getMaxBytes());
+        for (let i = 0; i < files.length; i++) {
+            if (files[i].size > this._getMaxBytes()) {
+                this._fileSizeExceedMsg = `Selected file/s has exceeded the allowable size of ${maxSize} per file`;
+                return false;
+            }
+        }
+        return true;
+    }
+    _getMaxBytes() {
+        if (typeof this.fileSize === 'string') {
+            if (this.fileSize.toUpperCase().endsWith('KB')) {
+                const kiloBytes = this.fileSize.substring(0, this.fileSize.indexOf('KB'));
+                return Number(kiloBytes) * 1024;
+            }
+            else if (this.fileSize.toUpperCase().endsWith('MB')) {
+                const megaBytes = this.fileSize.substring(0, this.fileSize.indexOf('MB'));
+                return Number(megaBytes) * 1048576;
+            }
+        }
+        return this.fileSize;
+    }
     _uploadFiles(files) {
         if (this._initialising || files.length > this.remaining) {
             return;
@@ -342,7 +384,7 @@ class FileUploadComponent {
     }
 }
 FileUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileUploadComponent, deps: [{ token: FileUploadService }], target: i0.ɵɵFactoryTarget.Component });
-FileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FileUploadComponent, selector: "bui-file-upload", inputs: { uploadActionText: "uploadActionText", fileUploadedLabel: "fileUploadedLabel", dragHint: "dragHint", dropHint: "dropHint", limit: "limit", types: "types" }, host: { listeners: { "dragenter": "onDragEnter($event)", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDndDrop($event)" }, properties: { "class.bui-dnd-active": "_overFrame && remaining >= _numberOfFilesDragged", "class.bui-dnd-over": "_overDropZone && remaining >= _numberOfFilesDragged", "class.bui-dnd-invalid": "_invalidFilesDragged" }, classAttribute: "bui-host bui-file-upload" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => FileUploadComponent), multi: true }], viewQueries: [{ propertyName: "_fileInput", first: true, predicate: ["fileInput"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div class=\"bui-file-upload-container\">\n\t<div\n\t\tclass=\"bui-file-upload-hint\"\n\t\t*ngIf=\"!_initialising && remaining > 0 && (!_itemAnimationInProgress || remaining > 1)\"\n\t>\n\t\t<ng-template [ngIf]=\"_invalidFilesDragged\" [ngIfElse]=\"validDnd\">\n\t\t\t<mat-icon [buiIcon]=\"'block'\" [size]=\"32\" color=\"warn\" variant=\"outlined\" style=\"opacity: 0.6\"></mat-icon>\n\t\t</ng-template>\n\t\t<ng-template #validDnd>\n\t\t\t<div *ngIf=\"!_overFrame && !_overDropZone\" class=\"bui-color-muted bui-upload-icon-link\" (click)=\"selectFiles()\">\n\t\t\t\t<mat-icon [buiIcon]=\"'fas fa-cloud-upload-alt'\" [size]=\"32\"></mat-icon>\n\t\t\t\t<a role=\"button\">{{ uploadActionText }}</a>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"_overFrame && !_overDropZone\" class=\"bui-color-light\">{{ dragHint }}</div>\n\t\t\t<div *ngIf=\"_overDropZone\" class=\"bui-color-light\">{{ dropHint }}</div>\n\t\t</ng-template>\n\t</div>\n\t<div\n\t\tclass=\"bui-file-upload-list\"\n\t\t[@slideOut]=\"_uploadingItems.length\"\n\t\t(@slideOut.start)=\"_itemAnimationStart.next()\"\n\t\t(@slideOut.done)=\"_itemAnimationDone.next()\"\n\t\t*ngIf=\"_uploadingItems.length\"\n\t>\n\t\t<span class=\"bui-file-uploaded-label\">{{ fileUploadedLabel }}</span>\n\n\t\t<ng-container *ngFor=\"let item of _uploadingItems; let idx = index\">\n\t\t\t<div class=\"bui-file-upload-item\" [class.in-progress]=\"!item.done\" #itemDiv>\n\t\t\t\t<div class=\"bui-file-upload-item-name\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<mat-icon class=\"bui-color-muted\">description</mat-icon>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\tclass=\"text\"\n\t\t\t\t\t\t\t*ngIf=\"item.done && !item.downloading; else staticName\"\n\t\t\t\t\t\t\thref=\"#{{ item.uploadedItem?.id }}\"\n\t\t\t\t\t\t\t(click)=\"$event.preventDefault(); _openItem(item)\"\n\t\t\t\t\t\t\tcontextmenu=\"false\"\n\t\t\t\t\t\t\tmatTooltip=\"Download\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ item.name }}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t\t<ng-template #staticName>\n\t\t\t\t\t\t\t<span class=\"text\">{{ item.name }}</span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"bui-file-upload-item-progress\">\n\t\t\t\t\t\t<mat-progress-bar\n\t\t\t\t\t\t\tmode=\"determinate\"\n\t\t\t\t\t\t\t[class.upload-completed]=\"item.done\"\n\t\t\t\t\t\t\t*ngIf=\"!item.downloading\"\n\t\t\t\t\t\t\t[value]=\"item.done ? 100 : item.progress * 100\"\n\t\t\t\t\t\t></mat-progress-bar>\n\t\t\t\t\t\t<mat-progress-bar mode=\"buffer\" *ngIf=\"item.downloading\"></mat-progress-bar>\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t<ng-template [ngIf]=\"item.done\" [ngIfElse]=\"inprogress\"> 100% </ng-template>\n\t\t\t\t\t\t\t<ng-template #inprogress>\n\t\t\t\t\t\t\t\t{{ item.progress | percent }}\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"bui-file-upload-item-action\">\n\t\t\t\t\t<button\n\t\t\t\t\t\tmat-icon-button\n\t\t\t\t\t\tcolor=\"primary\"\n\t\t\t\t\t\t(click)=\"item.cancel()\"\n\t\t\t\t\t\t(mouseenter)=\"itemDiv.classList.add('bui-file-upload-item-deleting')\"\n\t\t\t\t\t\t(mouseleave)=\"itemDiv.classList.remove('bui-file-upload-item-deleting')\"\n\t\t\t\t\t\tmatTooltip=\"Delete\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<mat-icon [buiIcon]=\"'cancel'\" style=\"line-height: 0.9\"></mat-icon>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<mat-divider *ngIf=\"idx < _uploadingItems.length - 1\"></mat-divider>\n\t\t</ng-container>\n\t</div>\n\t<input\n\t\ttype=\"file\"\n\t\t#fileInput\n\t\tstyle=\"display: none\"\n\t\taccept=\"{{ _accept }}\"\n\t\t(change)=\"_handleFileSelection()\"\n\t\t[multiple]=\"remaining > 1\"\n\t/>\n</div>\n", styles: [":host:not([hidden]){display:block;border-style:dashed;border-width:1px;border-color:var(--bui-color-muted);transition:all .12s;padding:3px}:host:not([hidden]).bui-dnd-active,:host:not([hidden]).bui-dnd-over{padding:0;border-width:4px}:host:not([hidden]).bui-dnd-invalid{cursor:no-drop}:host:not([hidden]) .bui-file-upload-hint{margin:.5rem;height:40px;justify-content:center;display:flex;align-items:center}:host:not([hidden]) .bui-file-upload-container{min-height:4rem;display:flex;align-items:center;flex-direction:column;justify-content:center;transition:initial}:host:not([hidden]) .bui-file-upload-container .bui-upload-icon-link{cursor:pointer;transition:color .1s cubic-bezier(.55,0,.55,.2);display:flex;align-items:center}:host:not([hidden]) .bui-file-upload-container .bui-upload-icon-link:hover{color:var(--bui-color-light)!important}:host:not([hidden]) .bui-file-upload-container .bui-upload-icon-link>*{margin:4px}:host:not([hidden]) .bui-file-upload-list{align-self:stretch;margin-top:calc(1rem - 4px)}:host:not([hidden]) .bui-file-upload-list .bui-file-uploaded-label{display:block;font-size:smaller;margin:0 calc(1rem - 4px) .5rem calc(1rem - 4px)}:host:not([hidden]) .bui-file-upload-list .bui-file-upload-item{display:flex;align-items:center;margin:0 calc(1rem - 4px);padding:.25rem 0;justify-content:space-between}:host:not([hidden]) .bui-file-upload-list .bui-file-upload-item:last-child{margin-bottom:calc(.5rem - 4px)}:host:not([hidden]) .bui-file-upload-list .bui-file-upload-item.in-progress .bui-file-upload-item-name{font-style:italic}:host:not([hidden]) .bui-file-upload-list .bui-file-upload-item.bui-file-upload-item-deleting{background-color:#8080801a;transition:background-color .1s cubic-bezier(.55,0,.55,.2)}:host:not([hidden]) .bui-file-upload-list .bui-file-upload-item-name{flex-grow:1;font-size:80%;display:flex;align-items:center;flex-wrap:wrap}:host:not([hidden]) .bui-file-upload-list .bui-file-upload-item-name>span{word-break:break-all;display:flex;align-items:center}:host:not([hidden]) .bui-file-upload-list .bui-file-upload-item-name>span>mat-icon{width:20px;height:20px;font-size:20px}:host:not([hidden]) .bui-file-upload-list .bui-file-upload-item-name a{color:var(--bui-color-primary)}:host:not([hidden]) .bui-file-upload-list .bui-file-upload-item-name .text{margin-left:.5rem;margin-right:.5rem}:host:not([hidden]) .bui-file-upload-list .bui-file-upload-item-progress{flex-grow:1;min-width:50%;display:flex;justify-content:flex-start;align-items:center;margin:.5rem 0}:host:not([hidden]) .bui-file-upload-list .bui-file-upload-item-progress .mat-progress-bar{max-width:100%;height:.4rem;border-radius:1rem}:host:not([hidden]) .bui-file-upload-list .bui-file-upload-item-progress>span{margin-inline-start:.5rem}:host:not([hidden]) .bui-file-upload-list .bui-file-upload-item-action{display:flex;align-items:center;height:1em;width:1.75em}:host:not([hidden]) .bui-file-upload-list .mat-divider{margin:0 calc(1rem - 4px) 0 calc(1rem - 4px)}:host:not([hidden]) .upload-completed{animation:pulse 1s ease-in-out}@keyframes pulse{0%{transform:scaleY(1)}50%{transform:scaleY(1.5)}to{transform:scaleY(1)}}\n"], components: [{ type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "mode", "value", "bufferValue"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.IconDirective, selector: "[buiIcon]", inputs: ["buiIcon", "size", "variant"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "percent": i6.PercentPipe }, animations: [
+FileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FileUploadComponent, selector: "bui-file-upload", inputs: { uploadActionText: "uploadActionText", fileUploadedLabel: "fileUploadedLabel", dragHint: "dragHint", dropHint: "dropHint", limit: "limit", fileSize: "fileSize", types: "types" }, host: { listeners: { "dragenter": "onDragEnter($event)", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDndDrop($event)" }, properties: { "class.bui-dnd-active": "_overFrame && remaining >= _numberOfFilesDragged", "class.bui-dnd-over": "_overDropZone && remaining >= _numberOfFilesDragged", "class.bui-dnd-invalid": "_invalidFilesDragged" }, classAttribute: "bui-host bui-file-upload" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => FileUploadComponent), multi: true }], viewQueries: [{ propertyName: "_fileInput", first: true, predicate: ["fileInput"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div class=\"bui-file-upload-container\">\n\t<div\n\t\tclass=\"bui-file-upload-hint\"\n\t\t*ngIf=\"!_initialising && remaining > 0 && (!_itemAnimationInProgress || remaining > 1)\"\n\t>\n\t\t<ng-template [ngIf]=\"_invalidFilesDragged\" [ngIfElse]=\"validDnd\">\n\t\t\t<mat-icon [buiIcon]=\"'block'\" [size]=\"32\" color=\"warn\" variant=\"outlined\" style=\"opacity: 0.6\"></mat-icon>\n\t\t</ng-template>\n\t\t<ng-template #validDnd>\n\t\t\t<div *ngIf=\"!_overFrame && !_overDropZone\" class=\"bui-color-muted bui-upload-icon-link\" (click)=\"selectFiles()\">\n\t\t\t\t<mat-icon [buiIcon]=\"'fas fa-cloud-upload-alt'\" [size]=\"32\"></mat-icon>\n\t\t\t\t<a role=\"button\">{{ uploadActionText }}</a>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"_overFrame && !_overDropZone\" class=\"bui-color-light\">{{ dragHint }}</div>\n\t\t\t<div *ngIf=\"_overDropZone\" class=\"bui-color-light\">{{ dropHint }}</div>\n\t\t</ng-template>\n\t</div>\n\t<div\n\t\tclass=\"bui-file-upload-list\"\n\t\t[@slideOut]=\"_uploadingItems.length\"\n\t\t(@slideOut.start)=\"_itemAnimationStart.next()\"\n\t\t(@slideOut.done)=\"_itemAnimationDone.next()\"\n\t\t*ngIf=\"_uploadingItems.length\"\n\t>\n\t\t<span class=\"bui-file-uploaded-label\">{{ fileUploadedLabel }}</span>\n\n\t\t<ng-container *ngFor=\"let item of _uploadingItems; let idx = index\">\n\t\t\t<div class=\"bui-file-upload-item\" [class.in-progress]=\"!item.done\" #itemDiv>\n\t\t\t\t<div class=\"bui-file-upload-item-name\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<mat-icon class=\"bui-color-muted\">description</mat-icon>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\tclass=\"text\"\n\t\t\t\t\t\t\t*ngIf=\"item.done && !item.downloading; else staticName\"\n\t\t\t\t\t\t\thref=\"#{{ item.uploadedItem?.id }}\"\n\t\t\t\t\t\t\t(click)=\"$event.preventDefault(); _openItem(item)\"\n\t\t\t\t\t\t\tcontextmenu=\"false\"\n\t\t\t\t\t\t\tmatTooltip=\"Download\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ item.name }}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t\t<ng-template #staticName>\n\t\t\t\t\t\t\t<span class=\"text\">{{ item.name }}</span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"bui-file-upload-item-progress\">\n\t\t\t\t\t\t<mat-progress-bar\n\t\t\t\t\t\t\tmode=\"determinate\"\n\t\t\t\t\t\t\t[class.upload-completed]=\"item.done\"\n\t\t\t\t\t\t\t*ngIf=\"!item.downloading\"\n\t\t\t\t\t\t\t[value]=\"item.done ? 100 : item.progress * 100\"\n\t\t\t\t\t\t></mat-progress-bar>\n\t\t\t\t\t\t<mat-progress-bar mode=\"buffer\" *ngIf=\"item.downloading\"></mat-progress-bar>\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t<ng-template [ngIf]=\"item.done\" [ngIfElse]=\"inprogress\"> 100% </ng-template>\n\t\t\t\t\t\t\t<ng-template #inprogress>\n\t\t\t\t\t\t\t\t{{ item.progress | percent }}\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"bui-file-upload-item-action\">\n\t\t\t\t\t<button\n\t\t\t\t\t\tmat-icon-button\n\t\t\t\t\t\tcolor=\"primary\"\n\t\t\t\t\t\t(click)=\"item.cancel()\"\n\t\t\t\t\t\t(mouseenter)=\"itemDiv.classList.add('bui-file-upload-item-deleting')\"\n\t\t\t\t\t\t(mouseleave)=\"itemDiv.classList.remove('bui-file-upload-item-deleting')\"\n\t\t\t\t\t\tmatTooltip=\"Delete\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<mat-icon [buiIcon]=\"'cancel'\" style=\"line-height: 0.9\"></mat-icon>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<mat-divider *ngIf=\"idx < _uploadingItems.length - 1\"></mat-divider>\n\t\t</ng-container>\n\t</div>\n\t<input\n\t\ttype=\"file\"\n\t\t#fileInput\n\t\tstyle=\"display: none\"\n\t\taccept=\"{{ _accept }}\"\n\t\t(change)=\"_handleFileSelection()\"\n\t\t[multiple]=\"remaining > 1\"\n\t/>\n\n\t<div *ngIf=\"_fileSizeExceedMsg\" class=\"bui-color-warn bui-file-size-exceed\">\n\t\t<span> {{ _fileSizeExceedMsg }}</span> <mat-icon role=\"button\" (click)=\"_fileSizeExceedMsg = ''\">cancel</mat-icon>\n\t</div>\n</div>\n", styles: [":host:not([hidden]){display:block;border-style:dashed;border-width:1px;border-color:var(--bui-color-muted);transition:all .12s;padding:3px}:host:not([hidden]).bui-dnd-active,:host:not([hidden]).bui-dnd-over{padding:0;border-width:4px}:host:not([hidden]) .bui-file-size-exceed{display:flex;align-items:center;margin-bottom:1rem}:host:not([hidden]) .bui-file-size-exceed mat-icon{margin-left:.2rem}:host:not([hidden]).bui-dnd-invalid{cursor:no-drop}:host:not([hidden]) .bui-file-upload-hint{margin:.5rem;height:40px;justify-content:center;display:flex;align-items:center}:host:not([hidden]) .bui-file-upload-container{min-height:4rem;display:flex;align-items:center;flex-direction:column;justify-content:center;transition:initial}:host:not([hidden]) .bui-file-upload-container .bui-upload-icon-link{cursor:pointer;transition:color .1s cubic-bezier(.55,0,.55,.2);display:flex;align-items:center}:host:not([hidden]) .bui-file-upload-container .bui-upload-icon-link:hover{color:var(--bui-color-light)!important}:host:not([hidden]) .bui-file-upload-container .bui-upload-icon-link>*{margin:4px}:host:not([hidden]) .bui-file-upload-list{align-self:stretch;margin-top:calc(1rem - 4px)}:host:not([hidden]) .bui-file-upload-list .bui-file-uploaded-label{display:block;font-size:smaller;margin:0 calc(1rem - 4px) .5rem calc(1rem - 4px)}:host:not([hidden]) .bui-file-upload-list .bui-file-upload-item{display:flex;align-items:center;margin:0 calc(1rem - 4px);padding:.25rem 0;justify-content:space-between}:host:not([hidden]) .bui-file-upload-list .bui-file-upload-item:last-child{margin-bottom:calc(.5rem - 4px)}:host:not([hidden]) .bui-file-upload-list .bui-file-upload-item.in-progress .bui-file-upload-item-name{font-style:italic}:host:not([hidden]) .bui-file-upload-list .bui-file-upload-item.bui-file-upload-item-deleting{background-color:#8080801a;transition:background-color .1s cubic-bezier(.55,0,.55,.2)}:host:not([hidden]) .bui-file-upload-list .bui-file-upload-item-name{flex-grow:1;font-size:80%;display:flex;align-items:center;flex-wrap:wrap}:host:not([hidden]) .bui-file-upload-list .bui-file-upload-item-name>span{word-break:break-all;display:flex;align-items:center}:host:not([hidden]) .bui-file-upload-list .bui-file-upload-item-name>span>mat-icon{width:20px;height:20px;font-size:20px}:host:not([hidden]) .bui-file-upload-list .bui-file-upload-item-name a{color:var(--bui-color-primary)}:host:not([hidden]) .bui-file-upload-list .bui-file-upload-item-name .text{margin-left:.5rem;margin-right:.5rem}:host:not([hidden]) .bui-file-upload-list .bui-file-upload-item-progress{flex-grow:1;min-width:50%;display:flex;justify-content:flex-start;align-items:center;margin:.5rem 0}:host:not([hidden]) .bui-file-upload-list .bui-file-upload-item-progress .mat-progress-bar{max-width:100%;height:.4rem;border-radius:1rem}:host:not([hidden]) .bui-file-upload-list .bui-file-upload-item-progress>span{margin-inline-start:.5rem}:host:not([hidden]) .bui-file-upload-list .bui-file-upload-item-action{display:flex;align-items:center;height:1em;width:1.75em}:host:not([hidden]) .bui-file-upload-list .mat-divider{margin:0 calc(1rem - 4px) 0 calc(1rem - 4px)}:host:not([hidden]) .upload-completed{animation:pulse 1s ease-in-out}@keyframes pulse{0%{transform:scaleY(1)}50%{transform:scaleY(1.5)}to{transform:scaleY(1)}}\n"], components: [{ type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "mode", "value", "bufferValue"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.IconDirective, selector: "[buiIcon]", inputs: ["buiIcon", "size", "variant"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "percent": i6.PercentPipe }, animations: [
         trigger('slideOut', [
             transition('* => *', [
                 query(':leave', stagger(100, animate('0.25s', style({ height: 0, overflow: 'hidden' }))), { optional: true })
@@ -380,6 +422,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], limit: [{
                 type: Input
+            }], fileSize: [{
+                type: Input
             }], types: [{
                 type: Input
             }], _fileInput: [{

package/fesm2015/bravura-ui-file-upload.js.map

@@ -1 +1 @@
-{"version":3,"file":"bravura-ui-file-upload.js","sources":["../../../projects/ui/file-upload/file-upload.service.ts","../../../projects/ui/file-upload/file-upload.component.ts","../../../projects/ui/file-upload/file-upload.component.html","../../../projects/ui/file-upload/file-upload.module.ts","../../../projects/ui/file-upload/bravura-ui-file-upload.ts"],"sourcesContent":["import { HttpEvent } from '@angular/common/http';\nimport { Injectable } from '@angular/core';\nimport { Observable } from 'rxjs';\n\n/**\n * This type represents a file or form item that has been sent as part of a multipart/form-data POST request.\n */\nexport class FileUploadItem {\n\t/** The original filename in the client's filesystem, as provided by the browser.  */\n\tname: string;\n\n\t/** The size of the file item. */\n\tsize: number;\n\n\t/** An alpha-numeric string that uniquely identifies the file item. */\n\tid: string;\n\n\t/** The content type (MIME type) of the file. */\n\ttype: string;\n\n\t/** @internal */\n\tconstructor(_id: string, _name: string, _size: number, _type: string) {\n\t\tthis.id = _id;\n\t\tthis.name = _name;\n\t\tthis.size = _size;\n\t\tthis.type = _type;\n\t}\n}\n\n/**\n * This is an API for processing file upload requests.\n *\n * A sub class of this type handles multiple file requests, sent using multipart/form-data encoding type, as specified by RFC 1867.\n *\n * Please extend this type and provide it in an injector at the same level, or ancestral to that, of the `FileUploadComponent`.\n */\n@Injectable()\nexport abstract class FileUploadService {\n\t/**\n\t * Upload a list of selected files from the browser. The returned `Observable` array provides the update of the uploading progress\n\t * through HTTP events.\n\t */\n\tabstract upload(files: File[]): Array<Observable<HttpEvent<FileUploadItem>>>;\n\n\t/** List all the uploaded file items in the current HTTP session. This list excludes the files still in the process of being uploaded*/\n\tabstract list(): Observable<FileUploadItem[]>;\n\n\t/** Get the content of an uploaded file item as a `Blob`. */\n\tabstract get(id: string): Observable<Blob>;\n\n\t/** Delete an uploaded file item from the server. */\n\tabstract delete(id: string): Observable<void>;\n\n\t/** Delete all uploaded file items in the current  HTTP session. */\n\tabstract clear?(): Observable<void>;\n}\n","import { animate, query, stagger, style, transition, trigger } from '@angular/animations';\nimport { HttpEvent, HttpEventType } from '@angular/common/http';\nimport { Component, ElementRef, forwardRef, HostListener, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { Observable, of, Subject, Subscription } from 'rxjs';\nimport { FileUploadItem, FileUploadService } from './file-upload.service';\n\n/** @ignore */\nclass UploadingItem {\n\tprogress = 0;\n\tuploadedItem: FileUploadItem | null | undefined;\n\tdownloadingSubs?: Subscription;\n\tprivate subscription: Subscription;\n\tprivate file?: File;\n\n\tconstructor(item: FileUploadItem, oncancel: (item: UploadingItem) => void);\n\tconstructor(\n\t\tevent$: Observable<HttpEvent<FileUploadItem>> | FileUploadItem,\n\t\tfile: File,\n\t\toncomplete: () => void,\n\t\toncancel: (item: UploadingItem) => void\n\t);\n\tconstructor(\n\t\tevent$: Observable<HttpEvent<FileUploadItem>> | FileUploadItem,\n\t\tfileOrOncancel?: File | ((item: UploadingItem) => void),\n\t\toncomplete?: () => void,\n\t\tprivate oncancel?: (item: UploadingItem) => void\n\t) {\n\t\tif (event$ instanceof Observable) {\n\t\t\tthis.file = fileOrOncancel as File;\n\t\t\tthis.subscription = event$.subscribe({\n\t\t\t\tnext: evt => {\n\t\t\t\t\tif (evt.type === HttpEventType.UploadProgress) {\n\t\t\t\t\t\tthis.progress = evt.loaded / (this.file as File).size;\n\t\t\t\t\t} else if (evt.type === HttpEventType.Response) {\n\t\t\t\t\t\tthis.uploadedItem = evt.body;\n\t\t\t\t\t\tthis.progress = 1;\n\t\t\t\t\t\toncomplete!();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t} else {\n\t\t\tthis.subscription = of(event$).subscribe();\n\t\t\tthis.uploadedItem = event$;\n\t\t\tthis.oncancel = fileOrOncancel as (item: UploadingItem) => void;\n\t\t}\n\t}\n\n\tcancel() {\n\t\tthis.subscription.unsubscribe();\n\t\tthis.oncancel!(this);\n\t}\n\n\tget done() {\n\t\treturn !!this.uploadedItem;\n\t}\n\n\tget name() {\n\t\treturn this.uploadedItem?.name || this.file?.name;\n\t}\n\n\tget downloading() {\n\t\treturn this.downloadingSubs && !this.downloadingSubs.closed;\n\t}\n}\n/**\n * A control value accessor component to provide the user interface for uploading files.\n *\n * The application that integrates this UI must provide an implementation of `FileUploadService`.\n *\n * The control's value is a list of alpha-numerical strings, which are the identifiers to the uploaded files.\n *\n * Example:\n *\n * ```html\n * <form>\n *  <bui-file-upload [(ngModel)]=\"uploadedFileIds\" name=\"myFiles\"></bui-file-upload>\n * </form>\n * ```\n *\n * @see FileUploadService\n */\n@Component({\n\thost: {\n\t\tclass: 'bui-host bui-file-upload',\n\t\t'[class.bui-dnd-active]': '_overFrame && remaining >= _numberOfFilesDragged',\n\t\t'[class.bui-dnd-over]': '_overDropZone && remaining >= _numberOfFilesDragged',\n\t\t'[class.bui-dnd-invalid]': '_invalidFilesDragged'\n\t},\n\tselector: 'bui-file-upload',\n\ttemplateUrl: './file-upload.component.html',\n\tstyleUrls: ['./file-upload.component.scss'],\n\tproviders: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => FileUploadComponent), multi: true }],\n\tanimations: [\n\t\ttrigger('slideOut', [\n\t\t\ttransition('* => *', [\n\t\t\t\tquery(':leave', stagger(100, animate('0.25s', style({ height: 0, overflow: 'hidden' }))), { optional: true })\n\t\t\t])\n\t\t])\n\t]\n})\nexport class FileUploadComponent implements OnInit, OnDestroy, ControlValueAccessor {\n\t/** @ignore */\n\t_value: string[] | null = null;\n\n\t/**\n\t * The caption of the button for opening file selection dialog.\n\t */\n\t@Input()\n\tuploadActionText = 'Drag files here to attach or browse';\n\n\t/**\n\t * The label for listing successful uploaded files.\n\t */\n\t@Input()\n\tfileUploadedLabel = 'List of files uploaded successfully';\n\n\t/**\n\t * The text to be displayed when the user starts to drag file items over the browser window.\n\t */\n\t@Input()\n\tdragHint = 'Please drag the files here.';\n\n\t/**\n\t * The text to be displayed when the user is dragging the file items over the drop zone.\n\t */\n\t@Input()\n\tdropHint = 'Please release the mouse button to start uploading.';\n\n\t/** Specifies the total number of files accepted. A falsy value removes the limit.*/\n\t@Input()\n\tlimit = 0;\n\n\t/**\n\t * Accepted MIME types\n\t *\n\t * @example ['text/*', 'image/png']\n\t */\n\t@Input()\n\tget types(): string[] {\n\t\treturn this._types;\n\t}\n\tset types(types: string[]) {\n\t\tif (Array.isArray(types) && types?.length) {\n\t\t\tthis._typeRegExps = [];\n\t\t\tthis._types = Array.from(types);\n\t\t\tthis._accept = this._types.join(',');\n\t\t\ttypes.forEach(t => this._typeRegExps.push(new RegExp(t.replace(/\\*/g, '.*'))));\n\t\t}\n\t}\n\n\t/** @ignore */\n\t_uploadingItems: UploadingItem[] = [];\n\n\t/** @ignore */\n\t_accept = '*/*';\n\n\t/** @ignore */\n\t_itemAnimationStart = new Subject<void>();\n\t/** @ignore */\n\t_itemAnimationDone = new Subject<void>();\n\t/** @ignore */\n\t_itemAnimationInProgress = false;\n\n\tprivate _onChange = (_: string[]) => {};\n\tprivate _onTouch = () => {};\n\tprivate _frameDndEnter: (event: DragEvent) => void;\n\tprivate _frameDndLeave: () => void;\n\tprivate _frameDndOver: (event: DragEvent) => void;\n\tprivate _frameDndStop: () => void;\n\tprivate _overFrameCounter = 0;\n\tprivate _overCounter = 0;\n\tprivate _typeRegExps: RegExp[] = [/.*\\/.*/];\n\tprivate _types: string[] = ['*/*'];\n\tprivate _initSubs?: Subscription;\n\tprivate _numberOfFilesDragged = 0;\n\n\t@ViewChild('fileInput', { read: ElementRef, static: true })\n\tprivate _fileInput!: ElementRef<HTMLInputElement>;\n\n\tconstructor(private _service: FileUploadService) {\n\t\tthis._onChange([]);\n\t\tthis._onTouch();\n\t\tthis._frameDndEnter = this._onDndEnterFrame.bind(this);\n\t\tthis._frameDndLeave = this._onDndLeaveFrame.bind(this);\n\t\tthis._frameDndStop = this._onDndStopFrame.bind(this);\n\t\tthis._frameDndOver = event => event.preventDefault();\n\t}\n\n\t/** @internal */\n\tngOnInit(): void {\n\t\tdocument.addEventListener('dragenter', this._frameDndEnter);\n\t\tdocument.addEventListener('dragleave', this._frameDndLeave);\n\t\tdocument.addEventListener('dragend', this._frameDndStop);\n\t\tdocument.addEventListener('drop', this._frameDndStop);\n\t\tdocument.addEventListener('dragover', this._frameDndOver);\n\t\tthis._itemAnimationStart.subscribe(() => (this._itemAnimationInProgress = true));\n\t\tthis._itemAnimationDone.subscribe(() => (this._itemAnimationInProgress = false));\n\t}\n\n\tngOnDestroy(): void {\n\t\tdocument.removeEventListener('dragenter', this._frameDndEnter);\n\t\tdocument.removeEventListener('dragleave', this._frameDndLeave);\n\t\tdocument.removeEventListener('dragend', this._frameDndStop);\n\t\tdocument.removeEventListener('drop', this._frameDndStop);\n\t\tdocument.removeEventListener('dragover', this._frameDndOver);\n\t\tthis._itemAnimationStart.complete();\n\t\tthis._itemAnimationDone.complete();\n\t}\n\n\t/** @internal */\n\twriteValue(obj: any): void {\n\t\tif (Array.isArray(obj)) {\n\t\t\tif (!this._value) {\n\t\t\t\tthis._acceptChange(obj);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst common = obj.filter(v => this._value!.includes(v));\n\t\t\tif (common.length === obj.length && common.length === this._value.length) {\n\t\t\t\treturn; // no change\n\t\t\t}\n\t\t\tthis._acceptChange(obj);\n\t\t} else {\n\t\t\tthis._value = null;\n\t\t}\n\t}\n\n\t/** @internal */\n\tregisterOnChange(fn: any): void {\n\t\tthis._onChange = fn;\n\t}\n\n\t/** @internal */\n\tregisterOnTouched(fn: any): void {\n\t\tthis._onTouch = fn;\n\t}\n\n\t/** @internal */\n\t@HostListener('dragenter', ['$event'])\n\tonDragEnter(event: DragEvent) {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\tthis._overCounter++;\n\t}\n\n\t/** @internal */\n\t@HostListener('dragover', ['$event'])\n\tonDragOver(event: Event) {\n\t\tevent.preventDefault();\n\t}\n\n\t/** @internal */\n\t@HostListener('dragleave', ['$event'])\n\tonDragLeave(event: Event) {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\tthis._overCounter--;\n\t}\n\n\t/** @internal */\n\t@HostListener('drop', ['$event'])\n\tonDndDrop(event: DragEvent) {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\tthis._onDndStopFrame();\n\t\tconst files = event.dataTransfer?.files;\n\t\tif (files?.length) {\n\t\t\tthis._uploadFiles(Array.from(files));\n\t\t}\n\t}\n\n\t/** Open the file selection dialog */\n\tselectFiles() {\n\t\tthis._fileInput.nativeElement.click();\n\t}\n\n\t/** @ignore */\n\t_openItem(item: UploadingItem) {\n\t\titem.downloadingSubs = this._service.get(item.uploadedItem!.id).subscribe(blob => {\n\t\t\tconst url = URL.createObjectURL(blob);\n\t\t\twindow.open(url, '_blank');\n\t\t});\n\t}\n\n\t/** @ignore */\n\tget _overFrame(): boolean {\n\t\treturn this._overFrameCounter > 0;\n\t}\n\n\t/** @ignore */\n\tget _overDropZone(): boolean {\n\t\treturn this._overCounter > 0;\n\t}\n\n\t/** Whether file uploading is in progress */\n\tget uploading(): boolean {\n\t\treturn this._uploadingItems.some(i => !i.done);\n\t}\n\n\t/** The remaining number of files allowed.*/\n\tget remaining(): number {\n\t\treturn this.limit ? this.limit - this._uploadingItems.length : Infinity;\n\t}\n\n\t/** @ignore */\n\t_handleFileSelection() {\n\t\tconst fileList = this._fileInput.nativeElement.files;\n\t\tif (fileList?.length) {\n\t\t\tthis._uploadFiles(Array.from(fileList));\n\t\t\tthis._fileInput.nativeElement.value = '';\n\t\t}\n\t}\n\n\t/** @ignore */\n\tget _invalidFilesDragged(): boolean {\n\t\treturn this._numberOfFilesDragged > this.remaining && (this._overFrame || this._overDropZone);\n\t}\n\n\t/** @ignore */\n\tget _initialising(): boolean {\n\t\treturn !!this._initSubs && !this._initSubs.closed;\n\t}\n\n\tprivate _uploadFiles(files: File[]) {\n\t\tif (this._initialising || files.length > this.remaining) {\n\t\t\treturn;\n\t\t}\n\t\tconst filtered = files.filter(\n\t\t\tf =>\n\t\t\t\t(!f.type || this._typeRegExps.some(regexp => f.type.match(regexp))) &&\n\t\t\t\t!this._uploadingItems.some(i => i.name === f.name)\n\t\t);\n\t\tconst observables = this._service.upload(filtered);\n\t\tconst items = filtered.map(\n\t\t\t(f, i) => new UploadingItem(observables[i], f, this._updateItems.bind(this), this._deleteItem.bind(this))\n\t\t);\n\t\tthis._uploadingItems = [...this._uploadingItems, ...items];\n\t}\n\n\tprivate _onDndEnterFrame(event: DragEvent) {\n\t\tevent.preventDefault();\n\t\tthis._numberOfFilesDragged = event.dataTransfer?.items?.length || 0;\n\t\tthis._overFrameCounter++;\n\t}\n\n\tprivate _onDndLeaveFrame() {\n\t\tthis._overFrameCounter--;\n\t}\n\n\tprivate _onDndStopFrame() {\n\t\tthis._overFrameCounter = 0;\n\t\tthis._overCounter = 0;\n\t}\n\n\tprivate _acceptChange(v: string[]) {\n\t\tthis._initSubs = this._service.list().subscribe(list => {\n\t\t\tthis._uploadingItems = list\n\t\t\t\t.filter(i => v.includes(i.id))\n\t\t\t\t.map(f => new UploadingItem(f, this._deleteItem.bind(this)));\n\t\t});\n\t}\n\n\tprivate _updateItems() {\n\t\tconst completed = this._uploadingItems.filter(i => !!i.uploadedItem);\n\t\tthis._uploadingItems = [...completed, ...this._uploadingItems.filter(i => !i.uploadedItem)];\n\t\tthis._updateValue(completed);\n\t}\n\n\tprivate _deleteItem(item: UploadingItem) {\n\t\tconst key = item.uploadedItem?.id;\n\t\tif (key) {\n\t\t\tthis._service.delete(key).subscribe(() => {\n\t\t\t\tthis._uploadingItems = this._uploadingItems.filter(i => i !== item);\n\t\t\t\tconst completed = this._uploadingItems.filter(i => !!i.uploadedItem);\n\t\t\t\tthis._updateValue(completed);\n\t\t\t});\n\t\t} else {\n\t\t\tthis._uploadingItems = this._uploadingItems.filter(i => i !== item);\n\t\t\tconst completed = this._uploadingItems.filter(i => !!i.uploadedItem);\n\t\t\tthis._updateValue(completed);\n\t\t}\n\t}\n\n\tprivate _updateValue(completed: UploadingItem[]) {\n\t\tconst completedIds = completed.map(c => c.uploadedItem!.id);\n\t\tthis._value = completedIds;\n\t\tif (!this._value.length) {\n\t\t\tthis._value = null;\n\t\t}\n\t\tthis._onChange(completedIds);\n\t}\n}\n","<div class=\"bui-file-upload-container\">\n\t<div\n\t\tclass=\"bui-file-upload-hint\"\n\t\t*ngIf=\"!_initialising && remaining > 0 && (!_itemAnimationInProgress || remaining > 1)\"\n\t>\n\t\t<ng-template [ngIf]=\"_invalidFilesDragged\" [ngIfElse]=\"validDnd\">\n\t\t\t<mat-icon [buiIcon]=\"'block'\" [size]=\"32\" color=\"warn\" variant=\"outlined\" style=\"opacity: 0.6\"></mat-icon>\n\t\t</ng-template>\n\t\t<ng-template #validDnd>\n\t\t\t<div *ngIf=\"!_overFrame && !_overDropZone\" class=\"bui-color-muted bui-upload-icon-link\" (click)=\"selectFiles()\">\n\t\t\t\t<mat-icon [buiIcon]=\"'fas fa-cloud-upload-alt'\" [size]=\"32\"></mat-icon>\n\t\t\t\t<a role=\"button\">{{ uploadActionText }}</a>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"_overFrame && !_overDropZone\" class=\"bui-color-light\">{{ dragHint }}</div>\n\t\t\t<div *ngIf=\"_overDropZone\" class=\"bui-color-light\">{{ dropHint }}</div>\n\t\t</ng-template>\n\t</div>\n\t<div\n\t\tclass=\"bui-file-upload-list\"\n\t\t[@slideOut]=\"_uploadingItems.length\"\n\t\t(@slideOut.start)=\"_itemAnimationStart.next()\"\n\t\t(@slideOut.done)=\"_itemAnimationDone.next()\"\n\t\t*ngIf=\"_uploadingItems.length\"\n\t>\n\t\t<span class=\"bui-file-uploaded-label\">{{ fileUploadedLabel }}</span>\n\n\t\t<ng-container *ngFor=\"let item of _uploadingItems; let idx = index\">\n\t\t\t<div class=\"bui-file-upload-item\" [class.in-progress]=\"!item.done\" #itemDiv>\n\t\t\t\t<div class=\"bui-file-upload-item-name\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<mat-icon class=\"bui-color-muted\">description</mat-icon>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\tclass=\"text\"\n\t\t\t\t\t\t\t*ngIf=\"item.done && !item.downloading; else staticName\"\n\t\t\t\t\t\t\thref=\"#{{ item.uploadedItem?.id }}\"\n\t\t\t\t\t\t\t(click)=\"$event.preventDefault(); _openItem(item)\"\n\t\t\t\t\t\t\tcontextmenu=\"false\"\n\t\t\t\t\t\t\tmatTooltip=\"Download\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ item.name }}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t\t<ng-template #staticName>\n\t\t\t\t\t\t\t<span class=\"text\">{{ item.name }}</span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"bui-file-upload-item-progress\">\n\t\t\t\t\t\t<mat-progress-bar\n\t\t\t\t\t\t\tmode=\"determinate\"\n\t\t\t\t\t\t\t[class.upload-completed]=\"item.done\"\n\t\t\t\t\t\t\t*ngIf=\"!item.downloading\"\n\t\t\t\t\t\t\t[value]=\"item.done ? 100 : item.progress * 100\"\n\t\t\t\t\t\t></mat-progress-bar>\n\t\t\t\t\t\t<mat-progress-bar mode=\"buffer\" *ngIf=\"item.downloading\"></mat-progress-bar>\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t<ng-template [ngIf]=\"item.done\" [ngIfElse]=\"inprogress\"> 100% </ng-template>\n\t\t\t\t\t\t\t<ng-template #inprogress>\n\t\t\t\t\t\t\t\t{{ item.progress | percent }}\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"bui-file-upload-item-action\">\n\t\t\t\t\t<button\n\t\t\t\t\t\tmat-icon-button\n\t\t\t\t\t\tcolor=\"primary\"\n\t\t\t\t\t\t(click)=\"item.cancel()\"\n\t\t\t\t\t\t(mouseenter)=\"itemDiv.classList.add('bui-file-upload-item-deleting')\"\n\t\t\t\t\t\t(mouseleave)=\"itemDiv.classList.remove('bui-file-upload-item-deleting')\"\n\t\t\t\t\t\tmatTooltip=\"Delete\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<mat-icon [buiIcon]=\"'cancel'\" style=\"line-height: 0.9\"></mat-icon>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<mat-divider *ngIf=\"idx < _uploadingItems.length - 1\"></mat-divider>\n\t\t</ng-container>\n\t</div>\n\t<input\n\t\ttype=\"file\"\n\t\t#fileInput\n\t\tstyle=\"display: none\"\n\t\taccept=\"{{ _accept }}\"\n\t\t(change)=\"_handleFileSelection()\"\n\t\t[multiple]=\"remaining > 1\"\n\t/>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FileUploadComponent } from './file-upload.component';\nimport { MatIconModule } from '@angular/material/icon';\nimport { IconFontModule } from '@bravura/ui/icon-font';\nimport { MatProgressBarModule } from '@angular/material/progress-bar';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatDividerModule } from '@angular/material/divider';\nimport { MatTooltipModule } from '@angular/material/tooltip';\n\n@NgModule({\n\tdeclarations: [FileUploadComponent],\n\timports: [\n\t\tCommonModule,\n\t\tMatIconModule,\n\t\tIconFontModule,\n\t\tMatProgressBarModule,\n\t\tMatButtonModule,\n\t\tMatDividerModule,\n\t\tMatTooltipModule\n\t],\n\texports: [FileUploadComponent]\n})\nexport class FileUploadModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAIA;;;MAGa,cAAc;;IAc1B,YAAY,GAAW,EAAE,KAAa,EAAE,KAAa,EAAE,KAAa;QACnE,IAAI,CAAC,EAAE,GAAG,GAAG,CAAC;QACd,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KAClB;CACD;AAED;;;;;;;MAQsB,iBAAiB;;+GAAjB,iBAAiB;mHAAjB,iBAAiB;4FAAjB,iBAAiB;kBADtC,UAAU;;;AC7BX;AACA,MAAM,aAAa;IAclB,YACC,MAA8D,EAC9D,cAAuD,EACvD,UAAuB,EACf,QAAwC;QAAxC,aAAQ,GAAR,QAAQ,CAAgC;QAjBjD,aAAQ,GAAG,CAAC,CAAC;QAmBZ,IAAI,MAAM,YAAY,UAAU,EAAE;YACjC,IAAI,CAAC,IAAI,GAAG,cAAsB,CAAC;YACnC,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC;gBACpC,IAAI,EAAE,GAAG;oBACR,IAAI,GAAG,CAAC,IAAI,KAAK,aAAa,CAAC,cAAc,EAAE;wBAC9C,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC,MAAM,GAAI,IAAI,CAAC,IAAa,CAAC,IAAI,CAAC;qBACtD;yBAAM,IAAI,GAAG,CAAC,IAAI,KAAK,aAAa,CAAC,QAAQ,EAAE;wBAC/C,IAAI,CAAC,YAAY,GAAG,GAAG,CAAC,IAAI,CAAC;wBAC7B,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;wBAClB,UAAW,EAAE,CAAC;qBACd;iBACD;aACD,CAAC,CAAC;SACH;aAAM;YACN,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC,SAAS,EAAE,CAAC;YAC3C,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC;YAC3B,IAAI,CAAC,QAAQ,GAAG,cAA+C,CAAC;SAChE;KACD;IAED,MAAM;QACL,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,CAAC;QAChC,IAAI,CAAC,QAAS,CAAC,IAAI,CAAC,CAAC;KACrB;IAED,IAAI,IAAI;QACP,OAAO,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC;KAC3B;IAED,IAAI,IAAI;;QACP,OAAO,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI,MAAI,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI,CAAA,CAAC;KAClD;IAED,IAAI,WAAW;QACd,OAAO,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC;KAC5D;CACD;AACD;;;;;;;;;;;;;;;;;MAoCa,mBAAmB;IA+E/B,YAAoB,QAA2B;QAA3B,aAAQ,GAAR,QAAQ,CAAmB;;QA7E/C,WAAM,GAAoB,IAAI,CAAC;;;;QAM/B,qBAAgB,GAAG,qCAAqC,CAAC;;;;QAMzD,sBAAiB,GAAG,qCAAqC,CAAC;;;;QAM1D,aAAQ,GAAG,6BAA6B,CAAC;;;;QAMzC,aAAQ,GAAG,qDAAqD,CAAC;;QAIjE,UAAK,GAAG,CAAC,CAAC;;QAqBV,oBAAe,GAAoB,EAAE,CAAC;;QAGtC,YAAO,GAAG,KAAK,CAAC;;QAGhB,wBAAmB,GAAG,IAAI,OAAO,EAAQ,CAAC;;QAE1C,uBAAkB,GAAG,IAAI,OAAO,EAAQ,CAAC;;QAEzC,6BAAwB,GAAG,KAAK,CAAC;QAEzB,cAAS,GAAG,CAAC,CAAW,QAAO,CAAC;QAChC,aAAQ,GAAG,SAAQ,CAAC;QAKpB,sBAAiB,GAAG,CAAC,CAAC;QACtB,iBAAY,GAAG,CAAC,CAAC;QACjB,iBAAY,GAAa,CAAC,QAAQ,CAAC,CAAC;QACpC,WAAM,GAAa,CAAC,KAAK,CAAC,CAAC;QAE3B,0BAAqB,GAAG,CAAC,CAAC;QAMjC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;QACnB,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACvD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACvD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACrD,IAAI,CAAC,aAAa,GAAG,KAAK,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;KACrD;;;;;;IAjDD,IACI,KAAK;QACR,OAAO,IAAI,CAAC,MAAM,CAAC;KACnB;IACD,IAAI,KAAK,CAAC,KAAe;QACxB,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,KAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,CAAA,EAAE;YAC1C,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;YACvB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAChC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YACrC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;SAC/E;KACD;;IAyCD,QAAQ;QACP,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QAC5D,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QAC5D,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACzD,QAAQ,CAAC,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACtD,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QAC1D,IAAI,CAAC,mBAAmB,CAAC,SAAS,CAAC,OAAO,IAAI,CAAC,wBAAwB,GAAG,IAAI,CAAC,CAAC,CAAC;QACjF,IAAI,CAAC,kBAAkB,CAAC,SAAS,CAAC,OAAO,IAAI,CAAC,wBAAwB,GAAG,KAAK,CAAC,CAAC,CAAC;KACjF;IAED,WAAW;QACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QAC/D,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QAC/D,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QAC5D,QAAQ,CAAC,mBAAmB,CAAC,MAAM,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACzD,QAAQ,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QAC7D,IAAI,CAAC,mBAAmB,CAAC,QAAQ,EAAE,CAAC;QACpC,IAAI,CAAC,kBAAkB,CAAC,QAAQ,EAAE,CAAC;KACnC;;IAGD,UAAU,CAAC,GAAQ;QAClB,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YACvB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;gBACjB,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;gBACxB,OAAO;aACP;YACD,MAAM,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,CAAC,IAAI,IAAI,CAAC,MAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;YACzD,IAAI,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE;gBACzE,OAAO;aACP;YACD,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;SACxB;aAAM;YACN,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;SACnB;KACD;;IAGD,gBAAgB,CAAC,EAAO;QACvB,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;KACpB;;IAGD,iBAAiB,CAAC,EAAO;QACxB,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;KACnB;;IAID,WAAW,CAAC,KAAgB;QAC3B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,YAAY,EAAE,CAAC;KACpB;;IAID,UAAU,CAAC,KAAY;QACtB,KAAK,CAAC,cAAc,EAAE,CAAC;KACvB;;IAID,WAAW,CAAC,KAAY;QACvB,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,YAAY,EAAE,CAAC;KACpB;;IAID,SAAS,CAAC,KAAgB;;QACzB,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,MAAM,KAAK,GAAG,MAAA,KAAK,CAAC,YAAY,0CAAE,KAAK,CAAC;QACxC,IAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,EAAE;YAClB,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;SACrC;KACD;;IAGD,WAAW;QACV,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;KACtC;;IAGD,SAAS,CAAC,IAAmB;QAC5B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,YAAa,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,IAAI;YAC7E,MAAM,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;YACtC,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;SAC3B,CAAC,CAAC;KACH;;IAGD,IAAI,UAAU;QACb,OAAO,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC;KAClC;;IAGD,IAAI,aAAa;QAChB,OAAO,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;KAC7B;;IAGD,IAAI,SAAS;QACZ,OAAO,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;KAC/C;;IAGD,IAAI,SAAS;QACZ,OAAO,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,QAAQ,CAAC;KACxE;;IAGD,oBAAoB;QACnB,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC;QACrD,IAAI,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,MAAM,EAAE;YACrB,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;YACxC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,GAAG,EAAE,CAAC;SACzC;KACD;;IAGD,IAAI,oBAAoB;QACvB,OAAO,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC;KAC9F;;IAGD,IAAI,aAAa;QAChB,OAAO,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;KAClD;IAEO,YAAY,CAAC,KAAa;QACjC,IAAI,IAAI,CAAC,aAAa,IAAI,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE;YACxD,OAAO;SACP;QACD,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAC5B,CAAC,IACA,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;YAClE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,IAAI,CAAC,CACnD,CAAC;QACF,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QACnD,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,CACzB,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CACzG,CAAC;QACF,IAAI,CAAC,eAAe,GAAG,CAAC,GAAG,IAAI,CAAC,eAAe,EAAE,GAAG,KAAK,CAAC,CAAC;KAC3D;IAEO,gBAAgB,CAAC,KAAgB;;QACxC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,qBAAqB,GAAG,CAAA,MAAA,MAAA,KAAK,CAAC,YAAY,0CAAE,KAAK,0CAAE,MAAM,KAAI,CAAC,CAAC;QACpE,IAAI,CAAC,iBAAiB,EAAE,CAAC;KACzB;IAEO,gBAAgB;QACvB,IAAI,CAAC,iBAAiB,EAAE,CAAC;KACzB;IAEO,eAAe;QACtB,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC;QAC3B,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;KACtB;IAEO,aAAa,CAAC,CAAW;QAChC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,SAAS,CAAC,IAAI;YACnD,IAAI,CAAC,eAAe,GAAG,IAAI;iBACzB,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;iBAC7B,GAAG,CAAC,CAAC,IAAI,IAAI,aAAa,CAAC,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;SAC9D,CAAC,CAAC;KACH;IAEO,YAAY;QACnB,MAAM,SAAS,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;QACrE,IAAI,CAAC,eAAe,GAAG,CAAC,GAAG,SAAS,EAAE,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC;QAC5F,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;KAC7B;IAEO,WAAW,CAAC,IAAmB;;QACtC,MAAM,GAAG,GAAG,MAAA,IAAI,CAAC,YAAY,0CAAE,EAAE,CAAC;QAClC,IAAI,GAAG,EAAE;YACR,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC;gBACnC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC;gBACpE,MAAM,SAAS,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;gBACrE,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;aAC7B,CAAC,CAAC;SACH;aAAM;YACN,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC;YACpE,MAAM,SAAS,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;YACrE,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;SAC7B;KACD;IAEO,YAAY,CAAC,SAA0B;QAC9C,MAAM,YAAY,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,YAAa,CAAC,EAAE,CAAC,CAAC;QAC5D,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC;QAC3B,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE;YACxB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;SACnB;QACD,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;KAC7B;;iHAjSW,mBAAmB;qGAAnB,mBAAmB,snBATpB,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,UAAU,CAAC,MAAM,mBAAmB,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,8GAqF5E,UAAU,2CCjL3C,shHAsFA,+qIDOa;QACX,OAAO,CAAC,UAAU,EAAE;YACnB,UAAU,CAAC,QAAQ,EAAE;gBACpB,KAAK,CAAC,QAAQ,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;aAC7G,CAAC;SACF,CAAC;KACF;4FAEW,mBAAmB;kBAnB/B,SAAS;mBAAC;oBACV,IAAI,EAAE;wBACL,KAAK,EAAE,0BAA0B;wBACjC,wBAAwB,EAAE,kDAAkD;wBAC5E,sBAAsB,EAAE,qDAAqD;wBAC7E,yBAAyB,EAAE,sBAAsB;qBACjD;oBACD,QAAQ,EAAE,iBAAiB;oBAC3B,WAAW,EAAE,8BAA8B;oBAC3C,SAAS,EAAE,CAAC,8BAA8B,CAAC;oBAC3C,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,UAAU,CAAC,yBAAyB,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;oBAC5G,UAAU,EAAE;wBACX,OAAO,CAAC,UAAU,EAAE;4BACnB,UAAU,CAAC,QAAQ,EAAE;gCACpB,KAAK,CAAC,QAAQ,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;6BAC7G,CAAC;yBACF,CAAC;qBACF;iBACD;qGASA,gBAAgB;sBADf,KAAK;gBAON,iBAAiB;sBADhB,KAAK;gBAON,QAAQ;sBADP,KAAK;gBAON,QAAQ;sBADP,KAAK;gBAKN,KAAK;sBADJ,KAAK;gBASF,KAAK;sBADR,KAAK;gBAwCE,UAAU;sBADjB,SAAS;uBAAC,WAAW,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE;gBA8D1D,WAAW;sBADV,YAAY;uBAAC,WAAW,EAAE,CAAC,QAAQ,CAAC;gBASrC,UAAU;sBADT,YAAY;uBAAC,UAAU,EAAE,CAAC,QAAQ,CAAC;gBAOpC,WAAW;sBADV,YAAY;uBAAC,WAAW,EAAE,CAAC,QAAQ,CAAC;gBASrC,SAAS;sBADR,YAAY;uBAAC,MAAM,EAAE,CAAC,QAAQ,CAAC;;;ME7OpB,gBAAgB;;8GAAhB,gBAAgB;+GAAhB,gBAAgB,iBAZb,mBAAmB,aAEjC,YAAY;QACZ,aAAa;QACb,cAAc;QACd,oBAAoB;QACpB,eAAe;QACf,gBAAgB;QAChB,gBAAgB,aAEP,mBAAmB;+GAEjB,gBAAgB,YAXnB;YACR,YAAY;YACZ,aAAa;YACb,cAAc;YACd,oBAAoB;YACpB,eAAe;YACf,gBAAgB;YAChB,gBAAgB;SAChB;4FAGW,gBAAgB;kBAb5B,QAAQ;mBAAC;oBACT,YAAY,EAAE,CAAC,mBAAmB,CAAC;oBACnC,OAAO,EAAE;wBACR,YAAY;wBACZ,aAAa;wBACb,cAAc;wBACd,oBAAoB;wBACpB,eAAe;wBACf,gBAAgB;wBAChB,gBAAgB;qBAChB;oBACD,OAAO,EAAE,CAAC,mBAAmB,CAAC;iBAC9B;;;ACtBD;;;;;;"}
+{"version":3,"file":"bravura-ui-file-upload.js","sources":["../../../projects/ui/file-upload/file-upload.service.ts","../../../projects/ui/file-upload/file-upload.component.ts","../../../projects/ui/file-upload/file-upload.component.html","../../../projects/ui/file-upload/file-upload.module.ts","../../../projects/ui/file-upload/bravura-ui-file-upload.ts"],"sourcesContent":["import { HttpEvent } from '@angular/common/http';\nimport { Injectable } from '@angular/core';\nimport { Observable } from 'rxjs';\n\n/**\n * This type represents a file or form item that has been sent as part of a multipart/form-data POST request.\n */\nexport class FileUploadItem {\n\t/** The original filename in the client's filesystem, as provided by the browser.  */\n\tname: string;\n\n\t/** The size of the file item. */\n\tsize: number;\n\n\t/** An alpha-numeric string that uniquely identifies the file item. */\n\tid: string;\n\n\t/** The content type (MIME type) of the file. */\n\ttype: string;\n\n\t/** @internal */\n\tconstructor(_id: string, _name: string, _size: number, _type: string) {\n\t\tthis.id = _id;\n\t\tthis.name = _name;\n\t\tthis.size = _size;\n\t\tthis.type = _type;\n\t}\n}\n\n/**\n * This is an API for processing file upload requests.\n *\n * A sub class of this type handles multiple file requests, sent using multipart/form-data encoding type, as specified by RFC 1867.\n *\n * Please extend this type and provide it in an injector at the same level, or ancestral to that, of the `FileUploadComponent`.\n */\n@Injectable()\nexport abstract class FileUploadService {\n\t/**\n\t * Upload a list of selected files from the browser. The returned `Observable` array provides the update of the uploading progress\n\t * through HTTP events.\n\t */\n\tabstract upload(files: File[]): Array<Observable<HttpEvent<FileUploadItem>>>;\n\n\t/** List all the uploaded file items in the current HTTP session. This list excludes the files still in the process of being uploaded*/\n\tabstract list(): Observable<FileUploadItem[]>;\n\n\t/** Get the content of an uploaded file item as a `Blob`. */\n\tabstract get(id: string): Observable<Blob>;\n\n\t/** Delete an uploaded file item from the server. */\n\tabstract delete(id: string): Observable<void>;\n\n\t/** Delete all uploaded file items in the current  HTTP session. */\n\tabstract clear?(): Observable<void>;\n}\n","import { animate, query, stagger, style, transition, trigger } from '@angular/animations';\nimport { HttpEvent, HttpEventType } from '@angular/common/http';\nimport { Component, ElementRef, forwardRef, HostListener, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { Observable, of, Subject, Subscription } from 'rxjs';\nimport { FileUploadItem, FileUploadService } from './file-upload.service';\n\n/** @ignore */\nclass UploadingItem {\n\tprogress = 0;\n\tuploadedItem: FileUploadItem | null | undefined;\n\tdownloadingSubs?: Subscription;\n\tprivate subscription: Subscription;\n\tprivate file?: File;\n\n\tconstructor(item: FileUploadItem, oncancel: (item: UploadingItem) => void);\n\tconstructor(\n\t\tevent$: Observable<HttpEvent<FileUploadItem>> | FileUploadItem,\n\t\tfile: File,\n\t\toncomplete: () => void,\n\t\toncancel: (item: UploadingItem) => void\n\t);\n\tconstructor(\n\t\tevent$: Observable<HttpEvent<FileUploadItem>> | FileUploadItem,\n\t\tfileOrOncancel?: File | ((item: UploadingItem) => void),\n\t\toncomplete?: () => void,\n\t\tprivate oncancel?: (item: UploadingItem) => void\n\t) {\n\t\tif (event$ instanceof Observable) {\n\t\t\tthis.file = fileOrOncancel as File;\n\t\t\tthis.subscription = event$.subscribe({\n\t\t\t\tnext: evt => {\n\t\t\t\t\tif (evt.type === HttpEventType.UploadProgress) {\n\t\t\t\t\t\tthis.progress = evt.loaded / (this.file as File).size;\n\t\t\t\t\t} else if (evt.type === HttpEventType.Response) {\n\t\t\t\t\t\tthis.uploadedItem = evt.body;\n\t\t\t\t\t\tthis.progress = 1;\n\t\t\t\t\t\toncomplete!();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t} else {\n\t\t\tthis.subscription = of(event$).subscribe();\n\t\t\tthis.uploadedItem = event$;\n\t\t\tthis.oncancel = fileOrOncancel as (item: UploadingItem) => void;\n\t\t}\n\t}\n\n\tcancel() {\n\t\tthis.subscription.unsubscribe();\n\t\tthis.oncancel!(this);\n\t}\n\n\tget done() {\n\t\treturn !!this.uploadedItem;\n\t}\n\n\tget name() {\n\t\treturn this.uploadedItem?.name || this.file?.name;\n\t}\n\n\tget downloading() {\n\t\treturn this.downloadingSubs && !this.downloadingSubs.closed;\n\t}\n}\n/**\n * A control value accessor component to provide the user interface for uploading files.\n *\n * The application that integrates this UI must provide an implementation of `FileUploadService`.\n *\n * The control's value is a list of alpha-numerical strings, which are the identifiers to the uploaded files.\n *\n * Example:\n *\n * ```html\n * <form>\n *  <bui-file-upload [(ngModel)]=\"uploadedFileIds\" name=\"myFiles\"></bui-file-upload>\n * </form>\n * ```\n *\n * @see FileUploadService\n */\n@Component({\n\thost: {\n\t\tclass: 'bui-host bui-file-upload',\n\t\t'[class.bui-dnd-active]': '_overFrame && remaining >= _numberOfFilesDragged',\n\t\t'[class.bui-dnd-over]': '_overDropZone && remaining >= _numberOfFilesDragged',\n\t\t'[class.bui-dnd-invalid]': '_invalidFilesDragged'\n\t},\n\tselector: 'bui-file-upload',\n\ttemplateUrl: './file-upload.component.html',\n\tstyleUrls: ['./file-upload.component.scss'],\n\tproviders: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => FileUploadComponent), multi: true }],\n\tanimations: [\n\t\ttrigger('slideOut', [\n\t\t\ttransition('* => *', [\n\t\t\t\tquery(':leave', stagger(100, animate('0.25s', style({ height: 0, overflow: 'hidden' }))), { optional: true })\n\t\t\t])\n\t\t])\n\t]\n})\nexport class FileUploadComponent implements OnInit, OnDestroy, ControlValueAccessor {\n\t/** @ignore */\n\t_value: string[] | null = null;\n\n\t/**\n\t * The caption of the button for opening file selection dialog.\n\t */\n\t@Input()\n\tuploadActionText = 'Drag files here to attach or browse';\n\n\t/**\n\t * The label for listing successful uploaded files.\n\t */\n\t@Input()\n\tfileUploadedLabel = 'List of files uploaded successfully';\n\n\t/**\n\t * The text to be displayed when the user starts to drag file items over the browser window.\n\t */\n\t@Input()\n\tdragHint = 'Please drag the files here.';\n\n\t/**\n\t * The text to be displayed when the user is dragging the file items over the drop zone.\n\t */\n\t@Input()\n\tdropHint = 'Please release the mouse button to start uploading.';\n\n\t/** Specifies the total number of files accepted. A falsy value removes the limit.*/\n\t@Input()\n\tlimit = 0;\n\n\t/**\n\t * specify the number of maximum bytes that can be uploaded.\n\t * if number is specified, bytes are assumed, otherwise enter a string for specific size type.\n\t */\n\t@Input()\n\tfileSize: number | string = '10MB';\n\n\t/**\n\t * Accepted MIME types\n\t *\n\t * @example ['text/*', 'image/png']\n\t */\n\t@Input()\n\tget types(): string[] {\n\t\treturn this._types;\n\t}\n\tset types(types: string[]) {\n\t\tif (Array.isArray(types) && types?.length) {\n\t\t\tthis._typeRegExps = [];\n\t\t\tthis._types = Array.from(types);\n\t\t\tthis._accept = this._types.join(',');\n\t\t\ttypes.forEach(t => this._typeRegExps.push(new RegExp(t.replace(/\\*/g, '.*'))));\n\t\t}\n\t}\n\n\t/** @ignore */\n\t_fileSizeExceedMsg: string = '';\n\n\t/** @ignore */\n\t_uploadingItems: UploadingItem[] = [];\n\n\t/** @ignore */\n\t_accept = '*/*';\n\n\t/** @ignore */\n\t_itemAnimationStart = new Subject<void>();\n\t/** @ignore */\n\t_itemAnimationDone = new Subject<void>();\n\t/** @ignore */\n\t_itemAnimationInProgress = false;\n\n\tprivate _onChange = (_: string[]) => {};\n\tprivate _onTouch = () => {};\n\tprivate _frameDndEnter: (event: DragEvent) => void;\n\tprivate _frameDndLeave: () => void;\n\tprivate _frameDndOver: (event: DragEvent) => void;\n\tprivate _frameDndStop: () => void;\n\tprivate _overFrameCounter = 0;\n\tprivate _overCounter = 0;\n\tprivate _typeRegExps: RegExp[] = [/.*\\/.*/];\n\tprivate _types: string[] = ['*/*'];\n\tprivate _initSubs?: Subscription;\n\tprivate _numberOfFilesDragged = 0;\n\n\t@ViewChild('fileInput', { read: ElementRef, static: true })\n\tprivate _fileInput!: ElementRef<HTMLInputElement>;\n\n\tconstructor(private _service: FileUploadService) {\n\t\tthis._onChange([]);\n\t\tthis._onTouch();\n\t\tthis._frameDndEnter = this._onDndEnterFrame.bind(this);\n\t\tthis._frameDndLeave = this._onDndLeaveFrame.bind(this);\n\t\tthis._frameDndStop = this._onDndStopFrame.bind(this);\n\t\tthis._frameDndOver = event => event.preventDefault();\n\t}\n\n\t/** @internal */\n\tngOnInit(): void {\n\t\tdocument.addEventListener('dragenter', this._frameDndEnter);\n\t\tdocument.addEventListener('dragleave', this._frameDndLeave);\n\t\tdocument.addEventListener('dragend', this._frameDndStop);\n\t\tdocument.addEventListener('drop', this._frameDndStop);\n\t\tdocument.addEventListener('dragover', this._frameDndOver);\n\t\tthis._itemAnimationStart.subscribe(() => (this._itemAnimationInProgress = true));\n\t\tthis._itemAnimationDone.subscribe(() => (this._itemAnimationInProgress = false));\n\t}\n\n\tngOnDestroy(): void {\n\t\tdocument.removeEventListener('dragenter', this._frameDndEnter);\n\t\tdocument.removeEventListener('dragleave', this._frameDndLeave);\n\t\tdocument.removeEventListener('dragend', this._frameDndStop);\n\t\tdocument.removeEventListener('drop', this._frameDndStop);\n\t\tdocument.removeEventListener('dragover', this._frameDndOver);\n\t\tthis._itemAnimationStart.complete();\n\t\tthis._itemAnimationDone.complete();\n\t}\n\n\t/** @internal */\n\twriteValue(obj: any): void {\n\t\tif (Array.isArray(obj)) {\n\t\t\tif (!this._value) {\n\t\t\t\tthis._acceptChange(obj);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst common = obj.filter(v => this._value!.includes(v));\n\t\t\tif (common.length === obj.length && common.length === this._value.length) {\n\t\t\t\treturn; // no change\n\t\t\t}\n\t\t\tthis._acceptChange(obj);\n\t\t} else {\n\t\t\tthis._value = null;\n\t\t}\n\t}\n\n\t/** @internal */\n\tregisterOnChange(fn: any): void {\n\t\tthis._onChange = fn;\n\t}\n\n\t/** @internal */\n\tregisterOnTouched(fn: any): void {\n\t\tthis._onTouch = fn;\n\t}\n\n\t/** @internal */\n\t@HostListener('dragenter', ['$event'])\n\tonDragEnter(event: DragEvent) {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\tthis._overCounter++;\n\t}\n\n\t/** @internal */\n\t@HostListener('dragover', ['$event'])\n\tonDragOver(event: Event) {\n\t\tevent.preventDefault();\n\t}\n\n\t/** @internal */\n\t@HostListener('dragleave', ['$event'])\n\tonDragLeave(event: Event) {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\tthis._overCounter--;\n\t}\n\n\t/** @internal */\n\t@HostListener('drop', ['$event'])\n\tonDndDrop(event: DragEvent) {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\tthis._onDndStopFrame();\n\t\tconst files = event.dataTransfer?.files;\n\t\tif (files?.length && this._validateFileSize(files)) {\n\t\t\tthis._uploadFiles(Array.from(files));\n\t\t}\n\t}\n\n\t/** Open the file selection dialog */\n\tselectFiles() {\n\t\tthis._fileInput.nativeElement.click();\n\t}\n\n\t/** @ignore */\n\t_openItem(item: UploadingItem) {\n\t\titem.downloadingSubs = this._service.get(item.uploadedItem!.id).subscribe(blob => {\n\t\t\tconst url = URL.createObjectURL(blob);\n\t\t\twindow.open(url, '_blank');\n\t\t});\n\t}\n\n\t/** @ignore */\n\tget _overFrame(): boolean {\n\t\treturn this._overFrameCounter > 0;\n\t}\n\n\t/** @ignore */\n\tget _overDropZone(): boolean {\n\t\treturn this._overCounter > 0;\n\t}\n\n\t/** Whether file uploading is in progress */\n\tget uploading(): boolean {\n\t\treturn this._uploadingItems.some(i => !i.done);\n\t}\n\n\t/** The remaining number of files allowed.*/\n\tget remaining(): number {\n\t\treturn this.limit ? this.limit - this._uploadingItems.length : Infinity;\n\t}\n\n\t/** @ignore */\n\t_handleFileSelection() {\n\t\tconst fileList = this._fileInput.nativeElement.files;\n\t\tif (fileList?.length && this._validateFileSize(fileList)) {\n\t\t\tthis._uploadFiles(Array.from(fileList));\n\t\t\tthis._fileInput.nativeElement.value = '';\n\t\t}\n\t}\n\n\t/** @ignore */\n\tget _invalidFilesDragged(): boolean {\n\t\treturn this._numberOfFilesDragged > this.remaining && (this._overFrame || this._overDropZone);\n\t}\n\n\t/** @ignore */\n\tget _initialising(): boolean {\n\t\treturn !!this._initSubs && !this._initSubs.closed;\n\t}\n\n\tprivate returnFileSize(size: number) {\n\t\tif (size < 1024) {\n\t\t\treturn `${size} bytes`;\n\t\t} else if (size >= 1024 && size < 1048576) {\n\t\t\treturn `${(size / 1024).toFixed(1)} KB`;\n\t\t} else {\n\t\t\treturn `${(size / 1048576).toFixed(1)} MB`;\n\t\t}\n\t}\n\n\tprivate _validateFileSize(files: FileList) {\n\t\tthis._fileSizeExceedMsg = '';\n\t\tconst maxSize = this.returnFileSize(this._getMaxBytes());\n\t\tfor (let i = 0; i < files.length; i++) {\n\t\t\tif (files[i]!.size > this._getMaxBytes()) {\n\t\t\t\tthis._fileSizeExceedMsg = `Selected file/s has exceeded the allowable size of ${maxSize} per file`;\n\t\t\t\treturn false;\n\t\t\t}\n\t\t}\n\t\treturn true;\n\t}\n\n\tprivate _getMaxBytes(): number {\n\t\tif (typeof this.fileSize === 'string') {\n\t\t\tif (this.fileSize.toUpperCase().endsWith('KB')) {\n\t\t\t\tconst kiloBytes = this.fileSize.substring(0, this.fileSize.indexOf('KB'));\n\t\t\t\treturn Number(kiloBytes) * 1024;\n\t\t\t} else if (this.fileSize.toUpperCase().endsWith('MB')) {\n\t\t\t\tconst megaBytes = this.fileSize.substring(0, this.fileSize.indexOf('MB'));\n\t\t\t\treturn Number(megaBytes) * 1048576;\n\t\t\t}\n\t\t}\n\t\treturn this.fileSize as number;\n\t}\n\n\tprivate _uploadFiles(files: File[]) {\n\t\tif (this._initialising || files.length > this.remaining) {\n\t\t\treturn;\n\t\t}\n\t\tconst filtered = files.filter(\n\t\t\tf =>\n\t\t\t\t(!f.type || this._typeRegExps.some(regexp => f.type.match(regexp))) &&\n\t\t\t\t!this._uploadingItems.some(i => i.name === f.name)\n\t\t);\n\t\tconst observables = this._service.upload(filtered);\n\t\tconst items = filtered.map(\n\t\t\t(f, i) => new UploadingItem(observables[i], f, this._updateItems.bind(this), this._deleteItem.bind(this))\n\t\t);\n\t\tthis._uploadingItems = [...this._uploadingItems, ...items];\n\t}\n\n\tprivate _onDndEnterFrame(event: DragEvent) {\n\t\tevent.preventDefault();\n\t\tthis._numberOfFilesDragged = event.dataTransfer?.items?.length || 0;\n\t\tthis._overFrameCounter++;\n\t}\n\n\tprivate _onDndLeaveFrame() {\n\t\tthis._overFrameCounter--;\n\t}\n\n\tprivate _onDndStopFrame() {\n\t\tthis._overFrameCounter = 0;\n\t\tthis._overCounter = 0;\n\t}\n\n\tprivate _acceptChange(v: string[]) {\n\t\tthis._initSubs = this._service.list().subscribe(list => {\n\t\t\tthis._uploadingItems = list\n\t\t\t\t.filter(i => v.includes(i.id))\n\t\t\t\t.map(f => new UploadingItem(f, this._deleteItem.bind(this)));\n\t\t});\n\t}\n\n\tprivate _updateItems() {\n\t\tconst completed = this._uploadingItems.filter(i => !!i.uploadedItem);\n\t\tthis._uploadingItems = [...completed, ...this._uploadingItems.filter(i => !i.uploadedItem)];\n\t\tthis._updateValue(completed);\n\t}\n\n\tprivate _deleteItem(item: UploadingItem) {\n\t\tconst key = item.uploadedItem?.id;\n\t\tif (key) {\n\t\t\tthis._service.delete(key).subscribe(() => {\n\t\t\t\tthis._uploadingItems = this._uploadingItems.filter(i => i !== item);\n\t\t\t\tconst completed = this._uploadingItems.filter(i => !!i.uploadedItem);\n\t\t\t\tthis._updateValue(completed);\n\t\t\t});\n\t\t} else {\n\t\t\tthis._uploadingItems = this._uploadingItems.filter(i => i !== item);\n\t\t\tconst completed = this._uploadingItems.filter(i => !!i.uploadedItem);\n\t\t\tthis._updateValue(completed);\n\t\t}\n\t}\n\n\tprivate _updateValue(completed: UploadingItem[]) {\n\t\tconst completedIds = completed.map(c => c.uploadedItem!.id);\n\t\tthis._value = completedIds;\n\t\tif (!this._value.length) {\n\t\t\tthis._value = null;\n\t\t}\n\t\tthis._onChange(completedIds);\n\t}\n}\n","<div class=\"bui-file-upload-container\">\n\t<div\n\t\tclass=\"bui-file-upload-hint\"\n\t\t*ngIf=\"!_initialising && remaining > 0 && (!_itemAnimationInProgress || remaining > 1)\"\n\t>\n\t\t<ng-template [ngIf]=\"_invalidFilesDragged\" [ngIfElse]=\"validDnd\">\n\t\t\t<mat-icon [buiIcon]=\"'block'\" [size]=\"32\" color=\"warn\" variant=\"outlined\" style=\"opacity: 0.6\"></mat-icon>\n\t\t</ng-template>\n\t\t<ng-template #validDnd>\n\t\t\t<div *ngIf=\"!_overFrame && !_overDropZone\" class=\"bui-color-muted bui-upload-icon-link\" (click)=\"selectFiles()\">\n\t\t\t\t<mat-icon [buiIcon]=\"'fas fa-cloud-upload-alt'\" [size]=\"32\"></mat-icon>\n\t\t\t\t<a role=\"button\">{{ uploadActionText }}</a>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"_overFrame && !_overDropZone\" class=\"bui-color-light\">{{ dragHint }}</div>\n\t\t\t<div *ngIf=\"_overDropZone\" class=\"bui-color-light\">{{ dropHint }}</div>\n\t\t</ng-template>\n\t</div>\n\t<div\n\t\tclass=\"bui-file-upload-list\"\n\t\t[@slideOut]=\"_uploadingItems.length\"\n\t\t(@slideOut.start)=\"_itemAnimationStart.next()\"\n\t\t(@slideOut.done)=\"_itemAnimationDone.next()\"\n\t\t*ngIf=\"_uploadingItems.length\"\n\t>\n\t\t<span class=\"bui-file-uploaded-label\">{{ fileUploadedLabel }}</span>\n\n\t\t<ng-container *ngFor=\"let item of _uploadingItems; let idx = index\">\n\t\t\t<div class=\"bui-file-upload-item\" [class.in-progress]=\"!item.done\" #itemDiv>\n\t\t\t\t<div class=\"bui-file-upload-item-name\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<mat-icon class=\"bui-color-muted\">description</mat-icon>\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\tclass=\"text\"\n\t\t\t\t\t\t\t*ngIf=\"item.done && !item.downloading; else staticName\"\n\t\t\t\t\t\t\thref=\"#{{ item.uploadedItem?.id }}\"\n\t\t\t\t\t\t\t(click)=\"$event.preventDefault(); _openItem(item)\"\n\t\t\t\t\t\t\tcontextmenu=\"false\"\n\t\t\t\t\t\t\tmatTooltip=\"Download\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ item.name }}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t\t<ng-template #staticName>\n\t\t\t\t\t\t\t<span class=\"text\">{{ item.name }}</span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</span>\n\t\t\t\t\t<div class=\"bui-file-upload-item-progress\">\n\t\t\t\t\t\t<mat-progress-bar\n\t\t\t\t\t\t\tmode=\"determinate\"\n\t\t\t\t\t\t\t[class.upload-completed]=\"item.done\"\n\t\t\t\t\t\t\t*ngIf=\"!item.downloading\"\n\t\t\t\t\t\t\t[value]=\"item.done ? 100 : item.progress * 100\"\n\t\t\t\t\t\t></mat-progress-bar>\n\t\t\t\t\t\t<mat-progress-bar mode=\"buffer\" *ngIf=\"item.downloading\"></mat-progress-bar>\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t<ng-template [ngIf]=\"item.done\" [ngIfElse]=\"inprogress\"> 100% </ng-template>\n\t\t\t\t\t\t\t<ng-template #inprogress>\n\t\t\t\t\t\t\t\t{{ item.progress | percent }}\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"bui-file-upload-item-action\">\n\t\t\t\t\t<button\n\t\t\t\t\t\tmat-icon-button\n\t\t\t\t\t\tcolor=\"primary\"\n\t\t\t\t\t\t(click)=\"item.cancel()\"\n\t\t\t\t\t\t(mouseenter)=\"itemDiv.classList.add('bui-file-upload-item-deleting')\"\n\t\t\t\t\t\t(mouseleave)=\"itemDiv.classList.remove('bui-file-upload-item-deleting')\"\n\t\t\t\t\t\tmatTooltip=\"Delete\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<mat-icon [buiIcon]=\"'cancel'\" style=\"line-height: 0.9\"></mat-icon>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<mat-divider *ngIf=\"idx < _uploadingItems.length - 1\"></mat-divider>\n\t\t</ng-container>\n\t</div>\n\t<input\n\t\ttype=\"file\"\n\t\t#fileInput\n\t\tstyle=\"display: none\"\n\t\taccept=\"{{ _accept }}\"\n\t\t(change)=\"_handleFileSelection()\"\n\t\t[multiple]=\"remaining > 1\"\n\t/>\n\n\t<div *ngIf=\"_fileSizeExceedMsg\" class=\"bui-color-warn bui-file-size-exceed\">\n\t\t<span> {{ _fileSizeExceedMsg }}</span> <mat-icon role=\"button\" (click)=\"_fileSizeExceedMsg = ''\">cancel</mat-icon>\n\t</div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FileUploadComponent } from './file-upload.component';\nimport { MatIconModule } from '@angular/material/icon';\nimport { IconFontModule } from '@bravura/ui/icon-font';\nimport { MatProgressBarModule } from '@angular/material/progress-bar';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatDividerModule } from '@angular/material/divider';\nimport { MatTooltipModule } from '@angular/material/tooltip';\n\n@NgModule({\n\tdeclarations: [FileUploadComponent],\n\timports: [\n\t\tCommonModule,\n\t\tMatIconModule,\n\t\tIconFontModule,\n\t\tMatProgressBarModule,\n\t\tMatButtonModule,\n\t\tMatDividerModule,\n\t\tMatTooltipModule\n\t],\n\texports: [FileUploadComponent]\n})\nexport class FileUploadModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2015/bravura-ui-panel.js

@@ -0,0 +1,218 @@
+import * as i0 from '@angular/core';
+import { Directive, Inject, Input, Component, ChangeDetectionStrategy, Host, NgModule } from '@angular/core';
+import { DOCUMENT, CommonModule } from '@angular/common';
+import { generateID } from '@bravura/ui/common';
+import * as i2 from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
+import * as i3 from '@bravura/ui/behavior';
+import { BehaviorModule } from '@bravura/ui/behavior';
+
+/**
+ * A "tinted" element has a shaded background specified by the `ThemePalette`, which
+ * is compatible with both light and dark themes.
+ */
+class TintedDirective {
+    constructor(_doc, elemRef) {
+        this._doc = _doc;
+        this._color = 'default';
+        this._addedStyle = this._doc.createElement('style');
+        this._attr = 'bui-tinted-' + generateID();
+        this._element = elemRef.nativeElement;
+        elemRef.nativeElement.setAttribute(this._attr, '');
+    }
+    /**
+     *  The base color of the shaded background
+     * @default 'primary'
+     */
+    get color() {
+        return this._color;
+    }
+    set color(c) {
+        this._color = c;
+        this.generateStyle();
+    }
+    ngOnInit() {
+        this._element.style.position = 'relative';
+        this.generateStyle();
+        this._element.appendChild(this._addedStyle);
+    }
+    ngOnDestroy() {
+        this._element.removeChild(this._addedStyle);
+    }
+    generateStyle() {
+        this._addedStyle.innerText =
+            `[${this._attr}]::after { position: absolute; opacity: 0.1; border-radius: inherit; display: block; content: ''; ` +
+                ` background-color: var(--bui-color-${this.color}); top: 0; left: 0; ` +
+                ` bottom: 0; right: 0; pointer-events: none; }`;
+    }
+}
+TintedDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TintedDirective, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+TintedDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TintedDirective, selector: "[buiTinted], bui-panel", inputs: { color: ["buiTinted", "color"] }, host: { classAttribute: "bui-host" }, exportAs: ["buiTinted"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TintedDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[buiTinted], bui-panel',
+                    host: { class: 'bui-host' },
+                    exportAs: 'buiTinted'
+                }]
+        }], ctorParameters: function () { return [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i0.ElementRef }]; }, propDecorators: { color: [{
+                type: Input,
+                args: ['buiTinted']
+            }] } });
+
+/**
+ * A `bui-panel` consists of a `mat-card` and a tinted backdrop.
+ *
+ * Unlike `mat-card`, `bui-panel` has a flat appearance by default and a transparent background.
+ * The backdrop is nearly transparent, blending the theme palette `color`
+ * and the effective background color of the DOM ancestors.
+ *
+ * `bui-panel` supports all the content child directives of `mat-card` as well as `bui-panel-section`.
+ *
+ * `bui-panel-section`s are subdivisions of `bui-panel` that rearrange their orientation based on the width of the container element.
+ *
+ */
+class PanelComponent {
+    constructor(_cd, _tinted) {
+        this._cd = _cd;
+        this._tinted = _tinted;
+        /**
+         * The width of the host element, at which the panel section container will change its orientation.
+         */
+        this.breakpoint = 600;
+        /** @ignore */
+        this._width = 600;
+        this._color = 'primary';
+        this._appearance = 'flat';
+    }
+    /**
+     * This property defines the background (shaded) and border colors of the panel
+     */
+    get color() {
+        return this._color;
+    }
+    set color(value) {
+        this._color = value;
+        this._tinted.color = value;
+        this._cd.markForCheck();
+    }
+    /**
+     * In contrast to using a `mat-card` alone, a `bui-panel` does not have a elevated appearance by default.
+     *
+     * This property can change the default appearance to
+     *
+     * * `raised` - the original `mat-card` default
+     * * `outline` - a `mat-card` with borders
+     * * `flat` - no border or elevation
+     */
+    get appearance() {
+        return this._appearance;
+    }
+    set appearance(value) {
+        this._appearance = value;
+        this._cd.markForCheck();
+    }
+    ngOnInit() { }
+    /** @ignore */
+    _resized(width) {
+        this._width = width;
+        this._cd.markForCheck();
+    }
+}
+PanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PanelComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TintedDirective, host: true }], target: i0.ɵɵFactoryTarget.Component });
+PanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PanelComponent, selector: "bui-panel", inputs: { backdropClass: "backdropClass", cardClass: "cardClass", color: "color", appearance: "appearance", breakpoint: "breakpoint" }, host: { properties: { "class.bui-panel-vertical": "_width < breakpoint", "class.bui-panel-horizontal": "_width >= breakpoint" }, classAttribute: "bui-panel bui-host" }, ngImport: i0, template: "<mat-card\n\t[buiSizingBy]=\"'parent'\"\n\t(buiResized)=\"_resized($event.width)\"\n\tclass=\"bui-border-{{ color || 'none' }} {{ cardClass }} {{\n\t\tappearance === 'flat' ? 'mat-elevation-z' : appearance === 'outlined' ? 'mat-elevation-z bui-panel-border' : ''\n\t}}\"\n>\n\t<ng-content></ng-content>\n</mat-card>\n", styles: [":host{position:relative}:host .bui-panel-border{border-width:1px;border-style:solid}:host ::ng-deep .bui-panel-section-container{display:flex;box-sizing:border-box!important}:host(:not([hidden])){display:block}:host(:not([hidden])) .mat-card{background-color:transparent}:host(.bui-panel-horizontal) ::ng-deep .bui-panel-section-container{flex-direction:row}:host(.bui-panel-vertical) ::ng-deep .bui-panel-section-container{flex-direction:column}\n"], components: [{ type: i2.MatCard, selector: "mat-card", exportAs: ["matCard"] }], directives: [{ type: i3.SizingDirective, selector: "[buiSizing],[buiResized],[buiSizingBy],[buiFixedHeight]", inputs: ["buiSizing", "sizingBy", "buiSizingBy", "buiFixedHeight"], outputs: ["buiResized"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PanelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bui-panel',
+                    templateUrl: './panel.component.html',
+                    styleUrls: ['./panel.component.scss'],
+                    host: {
+                        class: 'bui-panel bui-host',
+                        '[class.bui-panel-vertical]': `_width < breakpoint`,
+                        '[class.bui-panel-horizontal]': `_width >= breakpoint`
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: TintedDirective, decorators: [{
+                    type: Host
+                }] }]; }, propDecorators: { backdropClass: [{
+                type: Input
+            }], cardClass: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], appearance: [{
+                type: Input
+            }], breakpoint: [{
+                type: Input
+            }] } });
+
+const CONTAINER_PREFIX = 'bui-panel-section-container';
+const COUNT_ATTR = 'bui-section-count';
+/**
+ * `bui-panel-section`s are subdivisions of `bui-panel` that rearrange their orientation based on the width of the container element.
+ */
+class PanelSectionComponent {
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+    }
+    ngOnInit() {
+        this._parentElement = this._elementRef.nativeElement.parentElement;
+        this._parentElement.classList.add(CONTAINER_PREFIX);
+        this._calcCount(1);
+    }
+    ngOnDestroy() {
+        this._calcCount(-1);
+    }
+    _calcCount(delta) {
+        let count = this._parentElement.getAttribute(COUNT_ATTR);
+        if (count) {
+            this._parentElement.classList.remove(`${CONTAINER_PREFIX}-${count}`);
+        }
+        else {
+            count = '0';
+        }
+        count = `${Math.max(Number(count) + delta, 0)}`;
+        this._parentElement.setAttribute(COUNT_ATTR, count);
+        this._parentElement.classList.add(`${CONTAINER_PREFIX}-${count}`);
+    }
+}
+PanelSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PanelSectionComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+PanelSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PanelSectionComponent, selector: "bui-panel-section", host: { classAttribute: "bui-panel-section" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{flex-grow:1}:host-context(.bui-panel-horizontal) :host:not(:first-child){border-inline-start:1px solid rgba(128,128,128,.2);padding-inline-start:16px}:host-context(.bui-panel-horizontal) :host:not(:last-child){padding-inline-end:16px}:host-context(.bui-panel-vertical) :host:not(:first-child){border-top:1px solid rgba(128,128,128,.2);padding-top:16px}:host-context(.bui-panel-vertical) :host:not(:last-child){padding-bottom:16px}:host-context(.bui-panel-horizontal .bui-panel-section-container-2){flex-basis:50%}:host-context(.bui-panel-horizontal .bui-panel-section-container-3){flex-basis:33.3333333333%}:host-context(.bui-panel-horizontal .bui-panel-section-container-4){flex-basis:25%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PanelSectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bui-panel-section',
+                    templateUrl: './panel-section.component.html',
+                    styleUrls: ['./panel-section.component.scss'],
+                    host: {
+                        class: 'bui-panel-section'
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+class PanelModule {
+}
+PanelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PanelModule, declarations: [PanelComponent, PanelSectionComponent, TintedDirective], imports: [CommonModule, MatCardModule, BehaviorModule], exports: [MatCardModule, PanelComponent, PanelSectionComponent, TintedDirective] });
+PanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PanelModule, imports: [[CommonModule, MatCardModule, BehaviorModule], MatCardModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PanelModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PanelComponent, PanelSectionComponent, TintedDirective],
+                    imports: [CommonModule, MatCardModule, BehaviorModule],
+                    exports: [MatCardModule, PanelComponent, PanelSectionComponent, TintedDirective]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PanelComponent, PanelModule, PanelSectionComponent, TintedDirective };
+//# sourceMappingURL=bravura-ui-panel.js.map

package/fesm2015/bravura-ui-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bravura-ui-panel.js","sources":["../../../projects/ui/panel/tinted.directive.ts","../../../projects/ui/panel/panel.component.ts","../../../projects/ui/panel/panel.component.html","../../../projects/ui/panel/panel-section.component.ts","../../../projects/ui/panel/panel-section.component.html","../../../projects/ui/panel/panel.module.ts","../../../projects/ui/panel/bravura-ui-panel.ts"],"sourcesContent":["import { DOCUMENT } from '@angular/common';\nimport { Directive, ElementRef, Inject, Input, OnDestroy, OnInit } from '@angular/core';\nimport { ThemePalette } from '@angular/material/core';\nimport { generateID } from '@bravura/ui/common';\n\n/**\n * A \"tinted\" element has a shaded background specified by the `ThemePalette`, which\n * is compatible with both light and dark themes.\n */\n@Directive({\n\tselector: '[buiTinted], bui-panel',\n\thost: { class: 'bui-host' },\n\texportAs: 'buiTinted'\n})\nexport class TintedDirective implements OnInit, OnDestroy {\n\t/**\n\t *  The base color of the shaded background\n\t * @default 'primary'\n\t */\n\t@Input('buiTinted')\n\tget color(): ThemePalette {\n\t\treturn this._color;\n\t}\n\tset color(c: ThemePalette) {\n\t\tthis._color = c;\n\t\tthis.generateStyle();\n\t}\n\n\tprivate _color: any = 'default';\n\n\tprivate readonly _addedStyle: HTMLStyleElement;\n\tprivate readonly _attr: string;\n\tprivate _element: HTMLElement;\n\n\tconstructor(@Inject(DOCUMENT) private _doc: Document, elemRef: ElementRef<HTMLElement>) {\n\t\tthis._addedStyle = this._doc.createElement('style');\n\t\tthis._attr = 'bui-tinted-' + generateID();\n\t\tthis._element = elemRef.nativeElement;\n\t\telemRef.nativeElement.setAttribute(this._attr, '');\n\t}\n\n\tngOnInit(): void {\n\t\tthis._element.style.position = 'relative';\n\t\tthis.generateStyle();\n\t\tthis._element.appendChild(this._addedStyle);\n\t}\n\n\tngOnDestroy(): void {\n\t\tthis._element.removeChild(this._addedStyle);\n\t}\n\n\tprivate generateStyle(): void {\n\t\tthis._addedStyle.innerText =\n\t\t\t`[${this._attr}]::after { position: absolute; opacity: 0.1; border-radius: inherit; display: block; content: ''; ` +\n\t\t\t` background-color: var(--bui-color-${this.color}); top: 0; left: 0; ` +\n\t\t\t` bottom: 0; right: 0; pointer-events: none; }`;\n\t}\n}\n","import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Host, Input, OnInit } from '@angular/core';\nimport { ThemePalette } from '@angular/material/core';\nimport { TintedDirective } from './tinted.directive';\n\n/**\n * A `bui-panel` consists of a `mat-card` and a tinted backdrop.\n *\n * Unlike `mat-card`, `bui-panel` has a flat appearance by default and a transparent background.\n * The backdrop is nearly transparent, blending the theme palette `color`\n * and the effective background color of the DOM ancestors.\n *\n * `bui-panel` supports all the content child directives of `mat-card` as well as `bui-panel-section`.\n *\n * `bui-panel-section`s are subdivisions of `bui-panel` that rearrange their orientation based on the width of the container element.\n *\n */\n@Component({\n\tselector: 'bui-panel',\n\ttemplateUrl: './panel.component.html',\n\tstyleUrls: ['./panel.component.scss'],\n\thost: {\n\t\tclass: 'bui-panel bui-host',\n\t\t'[class.bui-panel-vertical]': `_width < breakpoint`,\n\t\t'[class.bui-panel-horizontal]': `_width >= breakpoint`\n\t},\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class PanelComponent implements OnInit {\n\t/**\n\t * Additional style classes on the tinted backdrop element.\n\t * @deprecated\n\t * @ignore\n\t */\n\t@Input()\n\tbackdropClass?: string;\n\n\t/**\n\t * Additional style classes on the `<mat-card>` element.\n\t */\n\t@Input()\n\tcardClass?: string;\n\n\t/**\n\t * This property defines the background (shaded) and border colors of the panel\n\t */\n\t@Input()\n\tget color(): ThemePalette {\n\t\treturn this._color;\n\t}\n\tset color(value: ThemePalette) {\n\t\tthis._color = value;\n\t\tthis._tinted.color = value;\n\t\tthis._cd.markForCheck();\n\t}\n\n\t/**\n\t * In contrast to using a `mat-card` alone, a `bui-panel` does not have a elevated appearance by default.\n\t *\n\t * This property can change the default appearance to\n\t *\n\t * * `raised` - the original `mat-card` default\n\t * * `outline` - a `mat-card` with borders\n\t * * `flat` - no border or elevation\n\t */\n\t@Input()\n\tget appearance(): 'outlined' | 'raised' | 'flat' {\n\t\treturn this._appearance;\n\t}\n\tset appearance(value: 'outlined' | 'raised' | 'flat') {\n\t\tthis._appearance = value;\n\t\tthis._cd.markForCheck();\n\t}\n\n\t/**\n\t * The width of the host element, at which the panel section container will change its orientation.\n\t */\n\t@Input()\n\tbreakpoint = 600;\n\n\t/** @ignore */\n\t_width = 600;\n\n\tprivate _color: ThemePalette = 'primary';\n\n\tprivate _appearance: 'outlined' | 'raised' | 'flat' = 'flat';\n\n\tconstructor(private _cd: ChangeDetectorRef, @Host() private _tinted: TintedDirective) {}\n\n\tngOnInit(): void {}\n\n\t/** @ignore */\n\t_resized(width: number): void {\n\t\tthis._width = width;\n\t\tthis._cd.markForCheck();\n\t}\n}\n","<mat-card\n\t[buiSizingBy]=\"'parent'\"\n\t(buiResized)=\"_resized($event.width)\"\n\tclass=\"bui-border-{{ color || 'none' }} {{ cardClass }} {{\n\t\tappearance === 'flat' ? 'mat-elevation-z' : appearance === 'outlined' ? 'mat-elevation-z bui-panel-border' : ''\n\t}}\"\n>\n\t<ng-content></ng-content>\n</mat-card>\n","import { ChangeDetectionStrategy, Component, ElementRef, OnDestroy, OnInit } from '@angular/core';\n\nconst CONTAINER_PREFIX = 'bui-panel-section-container';\n\nconst COUNT_ATTR = 'bui-section-count';\n/**\n * `bui-panel-section`s are subdivisions of `bui-panel` that rearrange their orientation based on the width of the container element.\n */\n@Component({\n\tselector: 'bui-panel-section',\n\ttemplateUrl: './panel-section.component.html',\n\tstyleUrls: ['./panel-section.component.scss'],\n\thost: {\n\t\tclass: 'bui-panel-section'\n\t},\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class PanelSectionComponent implements OnInit, OnDestroy {\n\tprivate _parentElement!: HTMLElement;\n\n\tconstructor(private _elementRef: ElementRef<HTMLElement>) {}\n\n\tngOnInit(): void {\n\t\tthis._parentElement = this._elementRef.nativeElement.parentElement!;\n\t\tthis._parentElement.classList.add(CONTAINER_PREFIX);\n\t\tthis._calcCount(1);\n\t}\n\n\tngOnDestroy(): void {\n\t\tthis._calcCount(-1);\n\t}\n\n\tprivate _calcCount(delta: number) {\n\t\tlet count = this._parentElement.getAttribute(COUNT_ATTR);\n\t\tif (count) {\n\t\t\tthis._parentElement.classList.remove(`${CONTAINER_PREFIX}-${count}`);\n\t\t} else {\n\t\t\tcount = '0';\n\t\t}\n\t\tcount = `${Math.max(Number(count) + delta, 0)}`;\n\t\tthis._parentElement.setAttribute(COUNT_ATTR, count);\n\t\tthis._parentElement.classList.add(`${CONTAINER_PREFIX}-${count}`);\n\t}\n}\n","<ng-content></ng-content>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { PanelComponent } from './panel.component';\nimport { MatCardModule } from '@angular/material/card';\nimport { BehaviorModule } from '@bravura/ui/behavior';\nimport { PanelSectionComponent } from './panel-section.component';\nimport { TintedDirective } from './tinted.directive';\n\n@NgModule({\n\tdeclarations: [PanelComponent, PanelSectionComponent, TintedDirective],\n\timports: [CommonModule, MatCardModule, BehaviorModule],\n\texports: [MatCardModule, PanelComponent, PanelSectionComponent, TintedDirective]\n})\nexport class PanelModule {}\n\nexport { PanelComponent, PanelSectionComponent, TintedDirective };\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2015/bravura-ui-radio-panel.js

@@ -35,7 +35,7 @@ class RadioPanelItemComponent extends MatRadioButton {
     }
 }
 RadioPanelItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RadioPanelItemComponent, deps: [{ token: MAT_RADIO_GROUP, optional: true }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.FocusMonitor }, { token: i2.UniqueSelectionDispatcher }, { token: ANIMATION_MODULE_TYPE, optional: true }, { token: MAT_RADIO_DEFAULT_OPTIONS, optional: true }, { token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
-RadioPanelItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RadioPanelItemComponent, selector: "bui-radio-panel-item", inputs: { disableRipple: "disableRipple", tabIndex: "tabIndex", title: "title", _tickPosition: "_tickPosition", tickPosition: "tickPosition" }, host: { listeners: { "focus": "_inputElement.nativeElement.focus()" }, properties: { "class.bui-radio-checked": "checked", "class.bui-disabled": "disabled", "class._mat-animation-noopable": "_noopAnimations", "class.mat-primary": "color === \"primary\"", "class.mat-accent": "color === \"accent\"", "class.mat-warn": "color === \"warn\"", "attr.tabindex": "null", "attr.id": "id", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "style.--panel-width": "this.panelWidth" }, classAttribute: "bui-radio-panel-item" }, queries: [{ propertyName: "contentOnSelect", first: true, predicate: ["contentOnSelect"], descendants: true }], exportAs: ["matRadioButton"], usesInheritance: true, ngImport: i0, template: "<label\n\tmatRipple\n\tmatRippleColor=\"rgba(128,128,128,.1)\"\n\t[matRippleDisabled]=\"disabled || checked\"\n\t[attr.for]=\"inputId\"\n\t#label\n\tclass=\"bui-radio-panel-item-label bui-border-{{ checked ? color : 'default' }}\"\n>\n\t<div class=\"bui-radio-panel-item-wrapper\" [class.bui-radio-tick-at-end]=\"tickPosition === 'end'\">\n\t\t<div class=\"bui-label-header\">\n\t\t\t<span class=\"bui-label-title\" [innerHTML]=\"title\"></span>\n\t\t\t<ng-content select=\"[buiRadioItemHeadingEnd]\"></ng-content>\n\t\t\t<span class=\"bui-radio-panel-item-circle\">\n\t\t\t\t<span\n\t\t\t\t\tclass=\"bui-persistent-ripple\"\n\t\t\t\t\tmatRipple\n\t\t\t\t\tmatRippleColor=\"rgba(128,128,128,.1)\"\n\t\t\t\t\t[matRippleCentered]=\"true\"\n\t\t\t\t\t[matRippleUnbounded]=\"true\"\n\t\t\t\t\t[matRippleTrigger]=\"label\"\n\t\t\t\t\t[matRippleRadius]=\"20\"\n\t\t\t\t\t*ngIf=\"!disabled\"\n\t\t\t\t></span>\n\t\t\t\t<mat-icon [color]=\"color\" *ngIf=\"checked\">check_circle</mat-icon>\n\t\t\t\t<mat-icon *ngIf=\"!checked\" class=\"bui-radio-panel-item-circle-unchecked\">radio_button_unchecked</mat-icon>\n\t\t\t</span>\n\t\t</div>\n\t\t<!-- The actual 'radio' part of the control. -->\n\t\t<span class=\"radio-container\">\n\t\t\t<input\n\t\t\t\t#input\n\t\t\t\tclass=\"mat-radio-input cdk-visually-hidden\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\t[id]=\"inputId\"\n\t\t\t\t[checked]=\"checked\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[tabIndex]=\"tabIndex\"\n\t\t\t\t[attr.name]=\"name\"\n\t\t\t\t[attr.value]=\"value\"\n\t\t\t\t[required]=\"required\"\n\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t\t\t\t[attr.aria-describedby]=\"ariaDescribedby\"\n\t\t\t\t(change)=\"_onInputInteraction($event)\"\n\t\t\t\t(click)=\"_onInputClick($event)\"\n\t\t\t/>\n\t\t</span>\n\n\t\t<div class=\"bui-label-content-gap\"></div>\n\t\t<!-- The label content for radio control. -->\n\t\t<div class=\"bui-label-content\">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t\t<div class=\"bui-label-content\" *ngIf=\"contentOnSelect && checked\" @slideInOut>\n\t\t\t<ng-container *ngTemplateOutlet=\"contentOnSelect\"></ng-container>\n\t\t</div>\n\t</div>\n</label>\n", styles: [":host .bui-ripple,:host .bui-persistent-ripple{position:absolute;top:0;right:0;bottom:0;left:0}:host .bui-radio-panel-item-overlay{background-color:#fff;opacity:0}:host .bui-radio-panel-item-circle{width:40px;height:40px}:host .bui-radio-panel-item-label{display:block;border-radius:5px;border:1px solid rgba(128,128,128,.2);padding:1px;position:relative;height:100%}:host .bui-radio-panel-item-label .bui-radio-panel-item-circle-unchecked{color:#80808066}:host .bui-radio-panel-item-wrapper.bui-radio-tick-at-end .bui-label-header{padding:calc(1rem - 10px) calc(1rem - 10px) 0 1rem;justify-content:space-between}:host .bui-radio-panel-item-wrapper:not(.bui-radio-tick-at-end) .bui-label-header{padding:calc(1rem - 10px) calc(1rem - 10px) 0 calc(1rem - 10px)}:host .bui-radio-panel-item-wrapper:not(.bui-radio-tick-at-end) .bui-radio-panel-item-circle{order:-1}:host .bui-label-header,:host .bui-radio-panel-item-circle{display:flex;align-items:center}:host .bui-label-header{margin-bottom:calc(1rem - 10px)}:host .bui-label-title{font-size:larger;font-weight:bold}:host .bui-radio-panel-item-circle{justify-content:center;position:relative}:host .bui-label-content:not(:empty){margin:0 1rem 1rem}:host .bui-label-content-gap{margin-top:calc(1rem - 10px)}@polyfill-unscoped-rule{content: \".bui-radio-panel-item-wrapper .bui-label-header [buiRadioItemHeadingEnd]\"; margin-left: auto;}:host(:not([hidden])){display:block}:host(:not(.bui-disabled)):not(.bui-radio-checked) .bui-radio-panel-item-label{cursor:pointer}:host(:not(.bui-disabled)) .bui-radio-panel-item-label:hover{border-width:2px;padding:0;border-color:#8080804d}:host(:not(.bui-disabled)).cdk-keyboard-focused .bui-persistent-ripple,:host(:not(.bui-disabled)).cdk-program-focused .bui-persistent-ripple{background-color:#80808033;border-radius:50%}:host-context(.radio-dir-row){--panel-width: 300px;margin-right:1rem;max-width:var(--panel-width);min-width:250px;margin-bottom:1rem}:host(.bui-disabled) .bui-radio-panel-item-wrapper>.bui-label-header,:host(.bui-disabled) .bui-radio-panel-item-wrapper>.bui-label-content{opacity:.5}:host-context(.radio-dir-row):not(:last-child){margin-right:1rem;margin-bottom:1rem}:host-context(.radio-dir-column):not(:last-child){margin-bottom:1rem}\n"], components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleRadius", "matRippleDisabled", "matRippleTrigger", "matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleAnimation"], exportAs: ["matRipple"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
+RadioPanelItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RadioPanelItemComponent, selector: "bui-radio-panel-item", inputs: { disableRipple: "disableRipple", tabIndex: "tabIndex", title: "title", _tickPosition: "_tickPosition", tickPosition: "tickPosition" }, host: { listeners: { "focus": "_inputElement.nativeElement.focus()" }, properties: { "class.bui-radio-checked": "checked", "class.bui-disabled": "disabled", "class._mat-animation-noopable": "_noopAnimations", "class.mat-primary": "color === \"primary\"", "class.mat-accent": "color === \"accent\"", "class.mat-warn": "color === \"warn\"", "attr.tabindex": "null", "attr.id": "id", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "style.--panel-width": "this.panelWidth" }, classAttribute: "bui-radio-panel-item" }, queries: [{ propertyName: "contentOnSelect", first: true, predicate: ["contentOnSelect"], descendants: true }], exportAs: ["matRadioButton"], usesInheritance: true, ngImport: i0, template: "<label\n\tmatRipple\n\tmatRippleColor=\"rgba(128,128,128,.1)\"\n\t[matRippleDisabled]=\"disabled || checked\"\n\t[attr.for]=\"inputId\"\n\t#label\n\tclass=\"bui-radio-panel-item-label bui-border-{{ checked ? color : 'default' }}\"\n>\n\t<div class=\"bui-radio-panel-item-wrapper\" [class.bui-radio-tick-at-end]=\"tickPosition === 'end'\">\n\t\t<div class=\"bui-label-header\">\n\t\t\t<span class=\"bui-label-title\" [innerHTML]=\"title\"></span>\n\t\t\t<ng-content select=\"[buiRadioItemHeadingEnd]\"></ng-content>\n\t\t\t<span class=\"bui-radio-panel-item-circle\">\n\t\t\t\t<span\n\t\t\t\t\tclass=\"bui-persistent-ripple\"\n\t\t\t\t\tmatRipple\n\t\t\t\t\tmatRippleColor=\"rgba(128,128,128,.1)\"\n\t\t\t\t\t[matRippleCentered]=\"true\"\n\t\t\t\t\t[matRippleUnbounded]=\"true\"\n\t\t\t\t\t[matRippleTrigger]=\"label\"\n\t\t\t\t\t[matRippleRadius]=\"20\"\n\t\t\t\t\t*ngIf=\"!disabled\"\n\t\t\t\t></span>\n\t\t\t\t<mat-icon [color]=\"color\" *ngIf=\"checked\">check_circle</mat-icon>\n\t\t\t\t<mat-icon *ngIf=\"!checked\" class=\"bui-radio-panel-item-circle-unchecked\">radio_button_unchecked</mat-icon>\n\t\t\t</span>\n\t\t</div>\n\t\t<!-- The actual 'radio' part of the control. -->\n\t\t<span class=\"radio-container\">\n\t\t\t<input\n\t\t\t\t#input\n\t\t\t\tclass=\"mat-radio-input cdk-visually-hidden\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\t[id]=\"inputId\"\n\t\t\t\t[checked]=\"checked\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[tabIndex]=\"tabIndex\"\n\t\t\t\t[attr.name]=\"name\"\n\t\t\t\t[attr.value]=\"value\"\n\t\t\t\t[required]=\"required\"\n\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t\t\t\t[attr.aria-describedby]=\"ariaDescribedby\"\n\t\t\t\t(change)=\"_onInputInteraction($event)\"\n\t\t\t\t(click)=\"_onInputClick($event)\"\n\t\t\t/>\n\t\t</span>\n\n\t\t<div class=\"bui-label-content-gap\"></div>\n\t\t<!-- The label content for radio control. -->\n\t\t<div class=\"bui-label-content\">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t\t<div class=\"bui-label-content\" *ngIf=\"contentOnSelect && checked\" @slideInOut>\n\t\t\t<ng-container *ngTemplateOutlet=\"contentOnSelect\"></ng-container>\n\t\t</div>\n\t</div>\n</label>\n", styles: [":host .bui-ripple,:host .bui-persistent-ripple{position:absolute;top:0;right:0;bottom:0;left:0}:host .bui-radio-panel-item-overlay{background-color:#fff;opacity:0}:host .bui-radio-panel-item-circle{width:40px;height:40px;flex-shrink:0}:host .bui-radio-panel-item-label{display:block;border-radius:5px;border:1px solid rgba(128,128,128,.2);padding:1px;position:relative;height:100%}:host .bui-radio-panel-item-label .bui-radio-panel-item-circle-unchecked{color:#80808066}:host .bui-radio-panel-item-wrapper.bui-radio-tick-at-end .bui-label-header{padding:calc(1rem - 10px) calc(1rem - 10px) 0 1rem;justify-content:space-between}:host .bui-radio-panel-item-wrapper:not(.bui-radio-tick-at-end) .bui-label-header{padding:calc(1rem - 10px) calc(1rem - 10px) 0 calc(1rem - 10px)}:host .bui-radio-panel-item-wrapper:not(.bui-radio-tick-at-end) .bui-radio-panel-item-circle{order:-1}:host .bui-label-header,:host .bui-radio-panel-item-circle{display:flex;align-items:center}:host .bui-label-header{margin-bottom:calc(1rem - 10px)}:host .bui-label-title{font-size:larger;font-weight:bold}:host .bui-radio-panel-item-circle{justify-content:center;position:relative}:host .bui-label-content:not(:empty){margin:0 1rem 1rem}:host .bui-label-content-gap{margin-top:calc(1rem - 10px)}@polyfill-unscoped-rule{content: \".bui-radio-panel-item-wrapper .bui-label-header [buiRadioItemHeadingEnd]\"; margin-left: auto;}:host(:not([hidden])){display:block}:host(:not(.bui-disabled)):not(.bui-radio-checked) .bui-radio-panel-item-label{cursor:pointer}:host(:not(.bui-disabled)) .bui-radio-panel-item-label:hover{border-width:2px;padding:0;border-color:#8080804d}:host(:not(.bui-disabled)).cdk-keyboard-focused .bui-persistent-ripple,:host(:not(.bui-disabled)).cdk-program-focused .bui-persistent-ripple{background-color:#80808033;border-radius:50%}:host-context(.radio-dir-row){--panel-width: 300px;margin-right:1rem;max-width:var(--panel-width);min-width:250px;margin-bottom:1rem}:host(.bui-disabled) .bui-radio-panel-item-wrapper>.bui-label-header,:host(.bui-disabled) .bui-radio-panel-item-wrapper>.bui-label-content{opacity:.5}:host-context(.radio-dir-row):not(:last-child){margin-right:1rem;margin-bottom:1rem}:host-context(.radio-dir-column):not(:last-child){margin-bottom:1rem}\n"], components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleRadius", "matRippleDisabled", "matRippleTrigger", "matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleAnimation"], exportAs: ["matRipple"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
         trigger('slideInOut', [
             state('void', style({ height: '0px', overflow: 'hidden' })),
             transition(':enter, :leave', animate('.25s'))
@@ -166,7 +166,7 @@ RadioPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             multi: true
         },
         { provide: MAT_RADIO_GROUP, useExisting: forwardRef(() => RadioPanelComponent) }
-    ], queries: [{ propertyName: "_radios", predicate: RadioPanelItemComponent, descendants: true }], exportAs: ["buiRadioPanel"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, styles: [":host{display:flex}:host.radio-dir-row{flex-direction:row;flex-wrap:wrap}:host.radio-dir-column{flex-direction:column}\n"] });
+    ], queries: [{ propertyName: "_radios", predicate: RadioPanelItemComponent, descendants: true }], exportAs: ["buiRadioPanel"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, styles: [":host:not([hidden]){display:flex}:host.radio-dir-row{flex-direction:row;flex-wrap:wrap}:host.radio-dir-column{flex-direction:column}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RadioPanelComponent, decorators: [{
             type: Component,
             args: [{