@klippa/ngx-enhancy-forms 9.5.0 → 9.6.0

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

@@ -1838,6 +1838,8 @@
             var _this = _super.apply(this, __spread(arguments)) || this;
             _this.isLoading = false;
             _this.clearable = false;
+            _this.onlyShowUploadButton = false;
+            _this.useFullParentSize = false;
             return _this;
         }
         FileInputComponent.prototype.onChange = function (files) {
@@ -1846,6 +1848,8 @@
                 result.push(files.item(i));
             }
             this.setInnerValueAndNotify(result);
+            // to make sure we can select the same file again
+            this.fileInputEl.nativeElement.value = null;
         };
         FileInputComponent.prototype.getFileNames = function () {
             if (Array.isArray(this.innerValue)) {
@@ -1857,6 +1861,9 @@
             return null;
         };
         FileInputComponent.prototype.shouldShowClearButton = function () {
+            if (this.onlyShowUploadButton) {
+                return false;
+            }
             if (this.multiple) {
                 if (arrayIsSetAndFilled(this.innerValue)) {
                     return true;
@@ -1868,19 +1875,25 @@
             }
             return false;
         };
+        FileInputComponent.prototype.uploadFileClicked = function () {
+            this.fileInputEl.nativeElement.click();
+        };
         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\n\t\t\ttype=\"file\"\n\t\t\t(change)=\"onChange($event.target.files)\"\n\t\t\t[multiple]=\"multiple\"\n\t\t\t[disabled]=\"disabled\"\n\t\t>\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",
+                    template: "<div class=\"componentContainer\" [ngClass]=\"{fullParentSize: useFullParentSize}\">\n\t<div class=\"buttonContainer\">\n\t\t<klp-form-button class=\"uploadButton\" [isLoading]=\"isLoading\" (click)=\"uploadFileClicked()\">\n\t\t\tUpload a file\n\t\t</klp-form-button>\n\t\t<input\n\t\t\ttype=\"file\"\n\t\t\t#fileInput\n\t\t\t(change)=\"onChange($event.target.files)\"\n\t\t\t[multiple]=\"multiple\"\n\t\t\t[disabled]=\"disabled\"\n\t\t>\n\t</div>\n\t<div class=\"fileName\" *ngIf=\"!onlyShowUploadButton\">\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}"]
+                    styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{align-items:center;display:flex}.componentContainer.fullParentSize{height:100%;justify-content:center;position:relative}.componentContainer:not(.fullParentSize) .buttonContainer{position:relative}.componentContainer .buttonContainer{flex:0 0 auto}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 }]
+        clearable: [{ type: core.Input }],
+        onlyShowUploadButton: [{ type: core.Input }],
+        useFullParentSize: [{ type: core.Input }],
+        fileInputEl: [{ type: core.ViewChild, args: ['fileInput',] }]
     };
 
     var SortableGroupedItemsComponent = /** @class */ (function (_super) {