@bravura/ui 1.17.2 → 1.18.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change history
 
+## 1.18.0 (2022-04-05)
+
+* fix(file-upload): fix fileupload build error ([56d61fa](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/56d61fa))
+* fix(file-upload): fix janky animiation when upload link reveals ([9e5908f](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/9e5908f))
+* feat(currency-input): add currency input directive ([7b40640](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/7b40640))
+
 ## <small>1.17.2 (2022-04-04)</small>
 
 * fix(file-upload): fix inconsistent margins ([5ba3890](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/5ba3890))

package/bundles/bravura-ui-currency-input.umd.js

@@ -0,0 +1,317 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('bignumber.js'), require('rxjs')) :
+    typeof define === 'function' && define.amd ? define('@bravura/ui/currency-input', ['exports', '@angular/common', '@angular/core', '@angular/forms', 'bignumber.js', 'rxjs'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.bravura = global.bravura || {}, global.bravura.ui = global.bravura.ui || {}, global.bravura.ui["currency-input"] = {}), global.ng.common, global.ng.core, global.ng.forms, global.BigNumber, global.rxjs));
+})(this, (function (exports, common, i0, forms, BigNumber, rxjs) { 'use strict';
+
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+    function _interopNamespace(e) {
+        if (e && e.__esModule) return e;
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
+        }
+        n["default"] = e;
+        return Object.freeze(n);
+    }
+
+    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+    var BigNumber__default = /*#__PURE__*/_interopDefaultLegacy(BigNumber);
+
+    /* tslint:disable:no-empty */
+    var noop_consumer = function (_) { };
+    /**
+     * This directive will enhance an input element to format the numbers entered to a currency amount.
+     */
+    var CurrencyInputDirective = /** @class */ (function () {
+        function CurrencyInputDirective(_el, _renderer, _locale, _defaultCurrencyCode) {
+            this._el = _el;
+            this._renderer = _renderer;
+            this._locale = _locale;
+            this._defaultCurrencyCode = _defaultCurrencyCode;
+            /**
+             * true to allow negative input, otherwise false
+             * Default to false.
+             */
+            this.allowNegative = false;
+            /**
+             * Provide the currency code to format the entered amount.
+             * Uses angular token DEFAULT_CURRENCY_CODE by default.
+             */
+            this.currencyCode = '';
+            /**
+             * true if no decimal places allowed, otherwise false.
+             * Default to false.
+             */
+            this.wholeDollarOnly = false;
+            /**
+             * The format the of the amount either in wide or narrow.
+             */
+            this.format = 'narrow';
+            this.textCenter = 'right';
+            this.placeholder = '';
+            this.autocomplete = 'off';
+            this.type = 'text';
+            this.inputMode = 'decimal';
+            this.change = noop_consumer;
+            this.onTouch = rxjs.noop;
+            this._placeholderText = '0.00';
+            this._currencySymbol = '$';
+            this.wholeDollarOnly = false;
+            var userAgent = navigator.userAgent;
+            this._safari = !userAgent.match(/Firefox/i) && !userAgent.match(/Chrome/i) && !!userAgent.match(/safari/i);
+            this._currencyUpdated();
+        }
+        CurrencyInputDirective.prototype.ngOnInit = function () {
+            if (this.wholeDollarOnly) {
+                this._placeholderText = '0';
+            }
+        };
+        CurrencyInputDirective.prototype.ngOnChanges = function () {
+            this._currencyUpdated();
+            this.onInput();
+        };
+        CurrencyInputDirective.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            setTimeout(function () {
+                _this.placeholder = "" + _this._currencySymbol + _this._placeholderText;
+            });
+        };
+        CurrencyInputDirective.prototype.onInput = function () {
+            if (this._safari) {
+                if (!isNaN(parseFloat(this._el.nativeElement.value))) {
+                    this.change(Number(this._el.nativeElement.value));
+                }
+                else {
+                    this.change(null);
+                }
+            }
+            else {
+                this._formatCurrency(this._el);
+            }
+        };
+        CurrencyInputDirective.prototype.onFocus = function () {
+            if (this._safari) {
+                // remove comma and currency symbol
+                var reg = new RegExp("[," + this._currencySymbol + "]", 'g');
+                var number = this._el.nativeElement.value.replace(reg, '');
+                this._renderer.setProperty(this._el.nativeElement, 'value', number);
+            }
+        };
+        CurrencyInputDirective.prototype.onblur = function () {
+            this.onTouch();
+            this._formatCurrency(this._el, true);
+        };
+        CurrencyInputDirective.prototype.writeValue = function (value) {
+            this._renderer.setProperty(this._el.nativeElement, 'value', value);
+            this._formatCurrency(this._el, true);
+        };
+        CurrencyInputDirective.prototype.registerOnChange = function (fn) {
+            this.change = fn;
+        };
+        CurrencyInputDirective.prototype.registerOnTouched = function (fn) {
+            this.onTouch = fn;
+        };
+        CurrencyInputDirective.prototype._currencyUpdated = function () {
+            this.currencyCode = this.currencyCode || this._defaultCurrencyCode;
+            this._currencySymbol = common.getCurrencySymbol(this.currencyCode, this.format, this._locale) || '$';
+        };
+        CurrencyInputDirective.prototype._formatCurrency = function (input, blur) {
+            if (blur === void 0) { blur = false; }
+            // appends $ to value, validates decimal side
+            // and puts cursor back in right position.
+            // get input value
+            var input_val = input.nativeElement.value;
+            // don't validate empty input
+            if (input_val === '') {
+                this.change(null);
+                return;
+            }
+            var minus = this.allowNegative ? '-' : '';
+            // remove non digit values except currency symbol, period and hypen
+            var reg = new RegExp("[^0-9" + minus + this._currencySymbol + ".]", 'g');
+            var sanitiseValue = input_val.replace(reg, '');
+            if (sanitiseValue === '' || sanitiseValue === this._currencySymbol) {
+                this.change(null);
+                this._renderer.setProperty(input.nativeElement, 'value', '');
+                return;
+            }
+            else if ((this.allowNegative && sanitiseValue === "-" + this._currencySymbol) ||
+                sanitiseValue === '-' ||
+                sanitiseValue === '--') {
+                this.change(null);
+                this._renderer.setProperty(input.nativeElement, 'value', '-');
+                return;
+            }
+            var negative = this.allowNegative && input_val.indexOf('-') >= 0;
+            // original length
+            var original_len = input_val.length;
+            // initial caret position
+            var caret_pos = input.nativeElement.selectionStart;
+            // check for decimal
+            if (input_val.indexOf('.') >= 0) {
+                // get position of first decimal
+                // this prevents multiple decimals from
+                // being entered
+                var decimal_pos = input_val.indexOf('.');
+                // split number by decimal point
+                var left_side = input_val.substring(0, decimal_pos);
+                var right_side = input_val.substring(decimal_pos);
+                // add commas to left side of number
+                left_side = this._formatNumber(left_side, blur);
+                // no value append a zero for decimal values
+                if (!left_side.length) {
+                    left_side = '0';
+                }
+                if (!this.wholeDollarOnly) {
+                    // validate right side
+                    right_side = right_side.replace(/\D/g, '');
+                    // Limit decimal to only 2 digits
+                    var v = new BigNumber__default["default"]("0." + right_side).dp(2).toNumber();
+                    if (v) {
+                        var length = right_side.length > 1 ? 2 : 1;
+                        right_side = v.toFixed(length).substring(2, 4);
+                    }
+                    // On blur make sure 2 numbers after decimal
+                    if (blur) {
+                        right_side += '00';
+                    }
+                    right_side = right_side.substring(0, 2);
+                    // join number by .
+                    input_val = left_side + '.' + right_side;
+                }
+                else {
+                    input_val = left_side;
+                }
+            }
+            else {
+                input_val = this._formatNumber(input_val, blur);
+                // final formatting
+                if (blur && !this.wholeDollarOnly) {
+                    input_val += '.00';
+                }
+            }
+            // append the currency symbol
+            input_val = this._currencySymbol + input_val;
+            if (negative) {
+                // append the hypen back to the value if a negative value was entered
+                input_val = "-" + input_val;
+            }
+            var num = Number(input_val.replace(/[^0-9.-]/g, ''));
+            // update control value first with the number
+            this.change(Number(num));
+            if (blur && num === 0) {
+                input_val = "" + this._currencySymbol + this._placeholderText;
+            }
+            // update dom with the formatted value
+            this._renderer.setProperty(input.nativeElement, 'value', input_val);
+            // put caret back in the right position
+            var updated_len = input_val.length;
+            if (caret_pos) {
+                caret_pos = updated_len - original_len + caret_pos;
+            }
+            if (!this._safari) {
+                input.nativeElement.setSelectionRange(caret_pos, caret_pos);
+            }
+        };
+        // format the number into currency format
+        CurrencyInputDirective.prototype._formatNumber = function (n, blur) {
+            if (blur === void 0) { blur = false; }
+            // format number 1000000 to 1,234,567
+            n = n.replace(/\D/g, '');
+            if (blur) {
+                n = n.replace(/^0+/, '');
+            }
+            return n.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+        };
+        return CurrencyInputDirective;
+    }());
+    CurrencyInputDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: CurrencyInputDirective, deps: [{ token: i0__namespace.ElementRef, self: true }, { token: i0__namespace.Renderer2 }, { token: i0.LOCALE_ID }, { token: i0.DEFAULT_CURRENCY_CODE }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    CurrencyInputDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.7", type: CurrencyInputDirective, selector: "[buiCurrencyInput]", inputs: { allowNegative: "allowNegative", currencyCode: "currencyCode", wholeDollarOnly: "wholeDollarOnly", format: "format" }, host: { listeners: { "input": "onInput()", "focus": "onFocus()", "blur": "onblur()" }, properties: { "style.text-align": "this.textCenter", "placeholder": "this.placeholder", "autocomplete": "this.autocomplete", "type": "this.type", "attr.inputmode": "this.inputMode" } }, providers: [{ provide: forms.NG_VALUE_ACCESSOR, useExisting: i0.forwardRef(function () { return CurrencyInputDirective; }), multi: true }], usesOnChanges: true, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: CurrencyInputDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[buiCurrencyInput]',
+                        providers: [{ provide: forms.NG_VALUE_ACCESSOR, useExisting: i0.forwardRef(function () { return CurrencyInputDirective; }), multi: true }]
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: i0__namespace.ElementRef, decorators: [{
+                            type: i0.Self
+                        }] }, { type: i0__namespace.Renderer2 }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i0.LOCALE_ID]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i0.DEFAULT_CURRENCY_CODE]
+                        }] }];
+        }, propDecorators: { allowNegative: [{
+                    type: i0.Input
+                }], currencyCode: [{
+                    type: i0.Input
+                }], wholeDollarOnly: [{
+                    type: i0.Input
+                }], format: [{
+                    type: i0.Input
+                }], textCenter: [{
+                    type: i0.HostBinding,
+                    args: ['style.text-align']
+                }], placeholder: [{
+                    type: i0.HostBinding,
+                    args: ['placeholder']
+                }], autocomplete: [{
+                    type: i0.HostBinding,
+                    args: ['autocomplete']
+                }], type: [{
+                    type: i0.HostBinding,
+                    args: ['type']
+                }], inputMode: [{
+                    type: i0.HostBinding,
+                    args: ['attr.inputmode']
+                }], onInput: [{
+                    type: i0.HostListener,
+                    args: ['input']
+                }], onFocus: [{
+                    type: i0.HostListener,
+                    args: ['focus']
+                }], onblur: [{
+                    type: i0.HostListener,
+                    args: ['blur']
+                }] } });
+
+    var CurrencyInputModule = /** @class */ (function () {
+        function CurrencyInputModule() {
+        }
+        return CurrencyInputModule;
+    }());
+    CurrencyInputModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: CurrencyInputModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    CurrencyInputModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: CurrencyInputModule, declarations: [CurrencyInputDirective], imports: [common.CommonModule], exports: [CurrencyInputDirective] });
+    CurrencyInputModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: CurrencyInputModule, imports: [[common.CommonModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: CurrencyInputModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        declarations: [CurrencyInputDirective],
+                        imports: [common.CommonModule],
+                        exports: [CurrencyInputDirective]
+                    }]
+            }] });
+
+    /**
+     * Generated bundle index. Do not edit.
+     */
+
+    exports.CurrencyInputDirective = CurrencyInputDirective;
+    exports.CurrencyInputModule = CurrencyInputModule;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+}));
+//# sourceMappingURL=bravura-ui-currency-input.umd.js.map

package/bundles/bravura-ui-currency-input.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bravura-ui-currency-input.umd.js","sources":["../../../projects/ui/currency-input/currency-input.directive.ts","../../../projects/ui/currency-input/currency-input.module.ts","../../../projects/ui/currency-input/bravura-ui-currency-input.ts"],"sourcesContent":["import { getCurrencySymbol } from '@angular/common';\nimport {\n\tAfterViewInit,\n\tDEFAULT_CURRENCY_CODE,\n\tDirective,\n\tElementRef,\n\tforwardRef,\n\tHostBinding,\n\tHostListener,\n\tInject,\n\tInput,\n\tLOCALE_ID,\n\tOnChanges,\n\tOnInit,\n\tRenderer2,\n\tSelf\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport BigNumber from 'bignumber.js';\nimport { noop } from 'rxjs';\n\n/* tslint:disable:no-empty */\nexport const noop_consumer = (_: any) => {};\n\n/**\n * This directive will enhance an input element to format the numbers entered to a currency amount.\n */\n@Directive({\n\tselector: '[buiCurrencyInput]',\n\tproviders: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CurrencyInputDirective), multi: true }]\n})\nexport class CurrencyInputDirective implements OnInit, OnChanges, AfterViewInit, ControlValueAccessor {\n\t/**\n\t * true to allow negative input, otherwise false\n\t * Default to false.\n\t */\n\t@Input()\n\tallowNegative: boolean = false;\n\n\t/**\n\t * Provide the currency code to format the entered amount.\n\t * Uses angular token DEFAULT_CURRENCY_CODE by default.\n\t */\n\t@Input()\n\tcurrencyCode: string = '';\n\n\t/**\n\t * true if no decimal places allowed, otherwise false.\n\t * Default to false.\n\t */\n\t@Input()\n\twholeDollarOnly = false;\n\n\t/**\n\t * The format the of the amount either in wide or narrow.\n\t */\n\t@Input()\n\tformat: 'narrow' | 'wide' = 'narrow';\n\n\t@HostBinding('style.text-align')\n\tprivate textCenter = 'right';\n\n\t@HostBinding('placeholder')\n\tprivate placeholder: string = '';\n\n\t@HostBinding('autocomplete')\n\tprivate autocomplete = 'off';\n\n\t@HostBinding('type')\n\tprivate type = 'text';\n\n\t@HostBinding('attr.inputmode')\n\tprivate inputMode = 'decimal';\n\n\tprivate change = noop_consumer;\n\tprivate onTouch = noop;\n\tprivate _safari: boolean;\n\tprivate _placeholderText: string = '0.00';\n\tprivate _currencySymbol: string = '$';\n\n\tconstructor(\n\t\t@Self() private _el: ElementRef<HTMLInputElement>,\n\t\tprivate _renderer: Renderer2,\n\t\t@Inject(LOCALE_ID) private _locale: string,\n\t\t@Inject(DEFAULT_CURRENCY_CODE) private _defaultCurrencyCode: string\n\t) {\n\t\tthis.wholeDollarOnly = false;\n\t\tconst userAgent = navigator.userAgent;\n\t\tthis._safari = !userAgent.match(/Firefox/i) && !userAgent.match(/Chrome/i) && !!userAgent.match(/safari/i);\n\t\tthis._currencyUpdated();\n\t}\n\n\tngOnInit() {\n\t\tif (this.wholeDollarOnly) {\n\t\t\tthis._placeholderText = '0';\n\t\t}\n\t}\n\n\tngOnChanges(): void {\n\t\tthis._currencyUpdated();\n\t\tthis.onInput();\n\t}\n\n\tngAfterViewInit() {\n\t\tsetTimeout(() => {\n\t\t\tthis.placeholder = `${this._currencySymbol}${this._placeholderText}`;\n\t\t});\n\t}\n\n\t@HostListener('input')\n\tonInput() {\n\t\tif (this._safari) {\n\t\t\tif (!isNaN(parseFloat(this._el.nativeElement.value))) {\n\t\t\t\tthis.change(Number(this._el.nativeElement.value));\n\t\t\t} else {\n\t\t\t\tthis.change(null);\n\t\t\t}\n\t\t} else {\n\t\t\tthis._formatCurrency(this._el);\n\t\t}\n\t}\n\n\t@HostListener('focus')\n\tonFocus() {\n\t\tif (this._safari) {\n\t\t\t// remove comma and currency symbol\n\t\t\tconst reg = new RegExp(`[,${this._currencySymbol}]`, 'g');\n\t\t\tlet number = this._el.nativeElement.value.replace(reg, '');\n\t\t\tthis._renderer.setProperty(this._el.nativeElement, 'value', number);\n\t\t}\n\t}\n\n\t@HostListener('blur')\n\tonblur() {\n\t\tthis.onTouch();\n\t\tthis._formatCurrency(this._el, true);\n\t}\n\n\twriteValue(value: any) {\n\t\tthis._renderer.setProperty(this._el.nativeElement, 'value', value);\n\t\tthis._formatCurrency(this._el, true);\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.change = fn;\n\t}\n\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouch = fn;\n\t}\n\n\tprivate _currencyUpdated() {\n\t\tthis.currencyCode = this.currencyCode || this._defaultCurrencyCode;\n\t\tthis._currencySymbol = getCurrencySymbol(this.currencyCode, this.format, this._locale) || '$';\n\t}\n\n\tprivate _formatCurrency(input: ElementRef<HTMLInputElement>, blur: boolean = false) {\n\t\t// appends $ to value, validates decimal side\n\t\t// and puts cursor back in right position.\n\t\t// get input value\n\t\tlet input_val = input.nativeElement.value;\n\n\t\t// don't validate empty input\n\t\tif (input_val === '') {\n\t\t\tthis.change(null);\n\t\t\treturn;\n\t\t}\n\n\t\tconst minus = this.allowNegative ? '-' : '';\n\n\t\t// remove non digit values except currency symbol, period and hypen\n\t\tconst reg = new RegExp(`[^0-9${minus}${this._currencySymbol}.]`, 'g');\n\n\t\tlet sanitiseValue = input_val.replace(reg, '');\n\n\t\tif (sanitiseValue === '' || sanitiseValue === this._currencySymbol) {\n\t\t\tthis.change(null);\n\t\t\tthis._renderer.setProperty(input.nativeElement, 'value', '');\n\t\t\treturn;\n\t\t} else if (\n\t\t\t(this.allowNegative && sanitiseValue === `-${this._currencySymbol}`) ||\n\t\t\tsanitiseValue === '-' ||\n\t\t\tsanitiseValue === '--'\n\t\t) {\n\t\t\tthis.change(null);\n\t\t\tthis._renderer.setProperty(input.nativeElement, 'value', '-');\n\t\t\treturn;\n\t\t}\n\n\t\tconst negative = this.allowNegative && input_val.indexOf('-') >= 0;\n\n\t\t// original length\n\t\tconst original_len = input_val.length;\n\n\t\t// initial caret position\n\t\tlet caret_pos = input.nativeElement.selectionStart;\n\n\t\t// check for decimal\n\t\tif (input_val.indexOf('.') >= 0) {\n\t\t\t// get position of first decimal\n\t\t\t// this prevents multiple decimals from\n\t\t\t// being entered\n\t\t\tlet decimal_pos = input_val.indexOf('.');\n\n\t\t\t// split number by decimal point\n\t\t\tlet left_side = input_val.substring(0, decimal_pos);\n\t\t\tlet right_side = input_val.substring(decimal_pos);\n\n\t\t\t// add commas to left side of number\n\t\t\tleft_side = this._formatNumber(left_side, blur);\n\n\t\t\t// no value append a zero for decimal values\n\t\t\tif (!left_side.length) {\n\t\t\t\tleft_side = '0';\n\t\t\t}\n\n\t\t\tif (!this.wholeDollarOnly) {\n\t\t\t\t// validate right side\n\t\t\t\tright_side = right_side.replace(/\\D/g, '');\n\n\t\t\t\t// Limit decimal to only 2 digits\n\t\t\t\tlet v = new BigNumber(`0.${right_side}`).dp(2).toNumber();\n\t\t\t\tif (v) {\n\t\t\t\t\tconst length = right_side.length > 1 ? 2 : 1;\n\t\t\t\t\tright_side = v.toFixed(length).substring(2, 4);\n\t\t\t\t}\n\n\t\t\t\t// On blur make sure 2 numbers after decimal\n\t\t\t\tif (blur) {\n\t\t\t\t\tright_side += '00';\n\t\t\t\t}\n\n\t\t\t\tright_side = right_side.substring(0, 2);\n\n\t\t\t\t// join number by .\n\t\t\t\tinput_val = left_side + '.' + right_side;\n\t\t\t} else {\n\t\t\t\tinput_val = left_side;\n\t\t\t}\n\t\t} else {\n\t\t\tinput_val = this._formatNumber(input_val, blur);\n\n\t\t\t// final formatting\n\t\t\tif (blur && !this.wholeDollarOnly) {\n\t\t\t\tinput_val += '.00';\n\t\t\t}\n\t\t}\n\n\t\t// append the currency symbol\n\t\tinput_val = this._currencySymbol + input_val;\n\n\t\tif (negative) {\n\t\t\t// append the hypen back to the value if a negative value was entered\n\t\t\tinput_val = `-${input_val}`;\n\t\t}\n\n\t\tconst num = Number(input_val.replace(/[^0-9.-]/g, ''));\n\n\t\t// update control value first with the number\n\t\tthis.change(Number(num));\n\n\t\tif (blur && num === 0) {\n\t\t\tinput_val = `${this._currencySymbol}${this._placeholderText}`;\n\t\t}\n\n\t\t// update dom with the formatted value\n\t\tthis._renderer.setProperty(input.nativeElement, 'value', input_val);\n\t\t// put caret back in the right position\n\t\tlet updated_len = input_val.length;\n\t\tif (caret_pos) {\n\t\t\tcaret_pos = updated_len - original_len + caret_pos;\n\t\t}\n\t\tif (!this._safari) {\n\t\t\tinput.nativeElement.setSelectionRange(caret_pos, caret_pos);\n\t\t}\n\t}\n\n\t// format the number into currency format\n\tprivate _formatNumber(n: string, blur: boolean = false) {\n\t\t// format number 1000000 to 1,234,567\n\t\tn = n.replace(/\\D/g, '');\n\t\tif (blur) {\n\t\t\tn = n.replace(/^0+/, '');\n\t\t}\n\t\treturn n.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');\n\t}\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { CurrencyInputDirective } from './currency-input.directive';\n\n@NgModule({\n\tdeclarations: [CurrencyInputDirective],\n\timports: [CommonModule],\n\texports: [CurrencyInputDirective]\n})\nexport class CurrencyInputModule {}\n\nexport { CurrencyInputDirective };\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["noop","getCurrencySymbol","BigNumber","LOCALE_ID","DEFAULT_CURRENCY_CODE","NG_VALUE_ACCESSOR","forwardRef","Directive","Self","Inject","Input","HostBinding","HostListener","CommonModule","NgModule"],"mappings":"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"}

package/bundles/bravura-ui-file-upload.umd.js

@@ -479,6 +479,12 @@
             this._uploadingItems = [];
             /** @ignore */
             this._accept = '*/*';
+            /** @ignore */
+            this._itemAnimationStart = new rxjs.Subject();
+            /** @ignore */
+            this._itemAnimationDone = new rxjs.Subject();
+            /** @ignore */
+            this._itemAnimationInProgress = false;
             this._onChange = function (_) { };
             this._onTouch = function () { };
             this._overFrameCounter = 0;
@@ -516,11 +522,14 @@
         });
         /** @internal */
         FileUploadComponent.prototype.ngOnInit = function () {
+            var _this = this;
             document.addEventListener('dragenter', this._frameDndEnter);
             document.addEventListener('dragleave', this._frameDndLeave);
             document.addEventListener('dragend', this._frameDndStop);
             document.addEventListener('drop', this._frameDndStop);
             document.addEventListener('dragover', this._frameDndOver);
+            this._itemAnimationStart.subscribe(function () { return (_this._itemAnimationInProgress = true); });
+            this._itemAnimationDone.subscribe(function () { return (_this._itemAnimationInProgress = false); });
         };
         FileUploadComponent.prototype.ngOnDestroy = function () {
             document.removeEventListener('dragenter', this._frameDndEnter);
@@ -528,6 +537,8 @@
             document.removeEventListener('dragend', this._frameDndStop);
             document.removeEventListener('drop', this._frameDndStop);
             document.removeEventListener('dragover', this._frameDndOver);
+            this._itemAnimationStart.complete();
+            this._itemAnimationDone.complete();
         };
         /** @internal */
         FileUploadComponent.prototype.writeValue = function (obj) {
@@ -714,7 +725,7 @@
         return FileUploadComponent;
     }());
     FileUploadComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: FileUploadComponent, deps: [{ token: FileUploadService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FileUploadComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", 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: forms.NG_VALUE_ACCESSOR, useExisting: i0.forwardRef(function () { return FileUploadComponent; }), multi: true }], viewQueries: [{ propertyName: "_fileInput", first: true, predicate: ["fileInput"], descendants: true, read: i0.ElementRef, static: true }], ngImport: i0__namespace, template: "<div class=\"bui-file-upload-container\">\n\t<div class=\"bui-file-upload-hint\" *ngIf=\"!_initialising && remaining > 0\">\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 class=\"bui-file-upload-list\" [@slideOut]=\"_uploadingItems.length\" *ngIf=\"_uploadingItems.length\">\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\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{{ item.name }}\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'\" [size]=\"18\" style=\"line-height: 1\"></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:4px}: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:none 0s ease 0s;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;text-align:left;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{margin-right:calc(1rem - 4px);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;margin-left:-.25rem;margin-right:.2rem}: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-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;margin-right:.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{-webkit-animation:pulse 1s ease-in-out;animation:pulse 1s ease-in-out}@-webkit-keyframes pulse{0%{transform:scaleY(1)}50%{transform:scaleY(1.5)}to{transform:scaleY(1)}}@keyframes pulse{0%{transform:scaleY(1)}50%{transform:scaleY(1.5)}to{transform:scaleY(1)}}\n"], components: [{ type: i2__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3__namespace.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "mode", "value", "bufferValue"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i4__namespace.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__namespace.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.IconDirective, selector: "[buiIcon]", inputs: ["buiIcon", "size", "variant"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "percent": i6__namespace.PercentPipe }, animations: [
+    FileUploadComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", 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: forms.NG_VALUE_ACCESSOR, useExisting: i0.forwardRef(function () { return FileUploadComponent; }), multi: true }], viewQueries: [{ propertyName: "_fileInput", first: true, predicate: ["fileInput"], descendants: true, read: i0.ElementRef, static: true }], ngImport: i0__namespace, 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\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{{ item.name }}\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'\" [size]=\"18\" style=\"line-height: 1\"></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:4px}: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:none 0s ease 0s;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;text-align:left;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{margin-right:calc(1rem - 4px);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;margin-left:-.25rem;margin-right:.2rem}: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-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;margin-right:.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{-webkit-animation:pulse 1s ease-in-out;animation:pulse 1s ease-in-out}@-webkit-keyframes pulse{0%{transform:scaleY(1)}50%{transform:scaleY(1.5)}to{transform:scaleY(1)}}@keyframes pulse{0%{transform:scaleY(1)}50%{transform:scaleY(1.5)}to{transform:scaleY(1)}}\n"], components: [{ type: i2__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3__namespace.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "mode", "value", "bufferValue"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i4__namespace.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__namespace.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.IconDirective, selector: "[buiIcon]", inputs: ["buiIcon", "size", "variant"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8__namespace.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "percent": i6__namespace.PercentPipe }, animations: [
             animations.trigger('slideOut', [
                 animations.transition('* => *', [
                     animations.query(':leave', animations.stagger(100, animations.animate('0.25s', animations.style({ height: 0, overflow: 'hidden' }))), { optional: true })