@klippa/ngx-enhancy-forms 7.1.6 → 7.2.0

package/bundles/klippa-ngx-enhancy-forms.umd.js

@@ -32,7 +32,7 @@
         return s.substring(0, length) + '...';
     }
     function arrayIsSetAndFilled(arr) {
-        return arr !== null && arr !== undefined && arr.length > 0;
+        return Array.isArray(arr) && arr !== null && arr !== undefined && arr.length > 0;
     }
 
     var invalidFieldsSymbol = Symbol('Not all fields are valid');
@@ -1720,6 +1720,57 @@
                 },] }
     ];
 
+    var FileInputComponent = /** @class */ (function (_super) {
+        __extends(FileInputComponent, _super);
+        function FileInputComponent() {
+            var _this = _super.apply(this, __spread(arguments)) || this;
+            _this.isLoading = false;
+            _this.clearable = false;
+            return _this;
+        }
+        FileInputComponent.prototype.onChange = function (files) {
+            var result = [];
+            for (var i = 0; i < files.length; i++) {
+                result.push(files.item(i));
+            }
+            this.setInnerValueAndNotify(result);
+        };
+        FileInputComponent.prototype.getFileNames = function () {
+            if (Array.isArray(this.innerValue)) {
+                return this.innerValue.map(function (e) { return e.name; }).join(', ');
+            }
+            else if (this.innerValue instanceof File) {
+                return this.innerValue.name;
+            }
+            return null;
+        };
+        FileInputComponent.prototype.shouldShowClearButton = function () {
+            if (this.multiple) {
+                if (arrayIsSetAndFilled(this.innerValue)) {
+                    return true;
+                }
+                return false;
+            }
+            if (isValueSet(this.innerValue)) {
+                return true;
+            }
+            return false;
+        };
+        return FileInputComponent;
+    }(MultipleValueAccessorBase));
+    FileInputComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'klp-form-file-input',
+                    template: "<div class=\"componentContainer\">\n\t<klp-form-button class=\"uploadButton\" [isLoading]=\"isLoading\">\n\t\tUpload a file\n\t\t<input type=\"file\" (change)=\"onChange($event.target.files)\" [multiple]=\"multiple\">\n\t</klp-form-button>\n\t<div class=\"fileName\">\n\t\t{{getFileNames()}}\n\t</div>\n\t<klp-form-button class=\"clearButton\" variant=\"white\" *ngIf=\"shouldShowClearButton()\" (click)=\"resetToNull()\">X</klp-form-button>\n</div>\n",
+                    providers: [{ provide: forms.NG_VALUE_ACCESSOR, useExisting: FileInputComponent, multi: true }],
+                    styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{align-items:center;display:flex}.uploadButton{flex:0 0 auto;position:relative}.uploadButton input{bottom:0;cursor:pointer;left:0;opacity:0;position:absolute;right:0;top:0}.fileName{color:#515365;flex:1 1 0px;margin-left:.625rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.clearButton{flex:0 0 auto}"]
+                },] }
+    ];
+    FileInputComponent.propDecorators = {
+        isLoading: [{ type: core.Input }],
+        clearable: [{ type: core.Input }]
+    };
+
     var NgxEnhancyFormsModule = /** @class */ (function () {
         function NgxEnhancyFormsModule() {
         }
@@ -1750,6 +1801,7 @@
                         SortableItemsComponent,
                         TextInputComponent,
                         ToggleComponent,
+                        FileInputComponent,
                         FormCaptionComponent,
                         FormElementComponent,
                         FormErrorComponent,
@@ -1773,6 +1825,7 @@
                         SortableItemsComponent,
                         TextInputComponent,
                         ToggleComponent,
+                        FileInputComponent,
                         FormCaptionComponent,
                         FormElementComponent,
                         FormErrorComponent,
@@ -1825,6 +1878,7 @@
     exports.invalidFieldsSymbol = invalidFieldsSymbol;
     exports.matDateFormatsFactory = matDateFormatsFactory;
     exports["ɵa"] = MaterialModule;
+    exports["ɵb"] = FileInputComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });