@klippa/ngx-enhancy-forms 9.4.1 → 9.6.0

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

@@ -47,6 +47,7 @@
             this.parent = parent;
             this.subFormPlaceholder = subFormPlaceholder;
             this.showErrorMessages = true;
+            this.errorMessageLocation = 'belowCaption';
             // we keep track of what form controls are actually rendered. Only those count when looking at form validation
             this.activeControls = [];
         }
@@ -199,6 +200,7 @@
     ]; };
     FormComponent.propDecorators = {
         showErrorMessages: [{ type: core.Input }],
+        errorMessageLocation: [{ type: core.Input }],
         formGroup: [{ type: core.Input }],
         patchValueInterceptor: [{ type: core.Input }]
     };
@@ -294,13 +296,17 @@
             var _a, _b, _c;
             return (_c = (_b = (_a = this.customMessages) === null || _a === void 0 ? void 0 : _a[key]) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : this.errorMessages[key];
         };
+        FormElementComponent.prototype.getErrorLocation = function () {
+            var _a, _b;
+            return (_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.errorMessageLocation) !== null && _b !== void 0 ? _b : 'belowCaption';
+        };
         return FormElementComponent;
     }());
     FormElementComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'klp-form-element',
-                    template: "<ng-template #errorRef>\n\t<div *ngIf=\"shouldShowErrorMessages() && getErrorToShow()\" class=\"errorContainer\" [ngClass]=\"{hasCaption: caption || captionRef, 'd30-70': spaceDistribution === '30-70'}\">\n\t\t<div *ngIf=\"showDefaultError('min')\">{{substituteParameters(getErrorMessage(\"min\"), {min: attachedControl.errors.min.min})}}</div>\n\t\t<div *ngIf=\"showDefaultError('max')\">{{substituteParameters(getErrorMessage(\"max\"), {max: attachedControl.errors.max.max})}}</div>\n\t\t<div *ngIf=\"showDefaultError('required')\">{{getErrorMessage(\"required\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('email')\">{{getErrorMessage(\"email\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('minlength')\">{{substituteParameters(getErrorMessage(\"minLength\"), {minLength: attachedControl.errors.minlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('maxlength')\">{{substituteParameters(getErrorMessage(\"maxLength\"), {maxLength: attachedControl.errors.maxlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('pattern')\">{{getErrorMessage(\"pattern\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('MatchPassword')\">{{getErrorMessage(\"matchPassword\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('date')\">{{getErrorMessage(\"date\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('message')\">{{attachedControl.errors.message.value}}</div>\n\t\t<div [ngTemplateOutlet]=\"getCustomErrorHandler(getErrorToShow())?.templateRef\"></div>\n\t</div>\n</ng-template>\n\n<ng-container *ngIf=\"direction === 'horizontal'\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\n<div class=\"componentContainer\" [ngClass]=\"{hasCaption: caption || captionRef, vertical: direction === 'vertical', reverseOrder: swapInputAndCaption}\" #internalComponentRef>\n\t<div class=\"caption\" *ngIf=\"caption || captionRef\" [ngClass]=\"{ hasErrors: getErrorToShow() && attachedControl.touched, percentageSpacing: captionSpacing === 'percentages', 'd30-70': spaceDistribution === '30-70' }\">\n\t\t<div *ngIf=\"captionRef\" class=\"captionRefContainer\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"captionRef\"></ng-container>\n\t\t\t<div *ngIf=\"isRequired()\">&nbsp;*</div>\n\t\t</div>\n\t\t<div *ngIf=\"!captionRef\">{{caption}}<span *ngIf=\"isRequired()\">&nbsp;*</span></div>\n\t</div>\n\t<ng-container *ngIf=\"direction === 'vertical'\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t<div class=\"inputContainer\" [ngClass]=\"{ percentageSpacing: captionSpacing === 'percentages', 'd30-70': spaceDistribution === '30-70' }\">\n\t\t<ng-content></ng-content>\n\t</div>\n</div>\n",
-                    styles: [":host{display:block}.componentContainer{align-items:center;display:flex;min-height:42px}.componentContainer:not(.hasCaption){display:block}.componentContainer:not(.hasCaption) .inputContainer{margin-top:0}.componentContainer.reverseOrder{flex-direction:row-reverse;justify-content:flex-end}.componentContainer.vertical{display:block}.componentContainer.vertical .inputContainer{margin-top:.3125rem}.componentContainer.vertical .errorContainer{margin-left:0}.componentContainer.vertical .caption{padding-right:0}.captionRefContainer{display:flex}.caption{color:#515365;flex:0 0 auto;font-weight:700;padding-right:1.25rem}.caption.percentageSpacing{flex:0 0 40%}.caption.percentageSpacing.d30-70{flex-basis:30%}.caption.hasErrors{color:#ff8000}.inputContainer{flex:1}.inputContainer.percentageSpacing{flex:0 0 60%}.inputContainer.percentageSpacing.d30-70{flex-basis:70%}.errorContainer{color:#ff8000}.errorContainer.hasCaption{margin-left:40%}.errorContainer.hasCaption.d30-70{margin-left:30%}"]
+                    template: "<ng-template #errorRef>\n\t<div *ngIf=\"shouldShowErrorMessages() && getErrorToShow()\" class=\"errorContainer\" [ngClass]=\"{hasCaption: caption || captionRef, 'd30-70': spaceDistribution === '30-70'}\">\n\t\t<div *ngIf=\"showDefaultError('min')\">{{substituteParameters(getErrorMessage(\"min\"), {min: attachedControl.errors.min.min})}}</div>\n\t\t<div *ngIf=\"showDefaultError('max')\">{{substituteParameters(getErrorMessage(\"max\"), {max: attachedControl.errors.max.max})}}</div>\n\t\t<div *ngIf=\"showDefaultError('required')\">{{getErrorMessage(\"required\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('email')\">{{getErrorMessage(\"email\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('minlength')\">{{substituteParameters(getErrorMessage(\"minLength\"), {minLength: attachedControl.errors.minlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('maxlength')\">{{substituteParameters(getErrorMessage(\"maxLength\"), {maxLength: attachedControl.errors.maxlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('pattern')\">{{getErrorMessage(\"pattern\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('MatchPassword')\">{{getErrorMessage(\"matchPassword\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('date')\">{{getErrorMessage(\"date\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('message')\">{{attachedControl.errors.message.value}}</div>\n\t\t<div [ngTemplateOutlet]=\"getCustomErrorHandler(getErrorToShow())?.templateRef\"></div>\n\t</div>\n</ng-template>\n\n<ng-container *ngIf=\"direction === 'horizontal'\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\n<div class=\"componentContainer\" [ngClass]=\"{hasCaption: caption || captionRef, vertical: direction === 'vertical', reverseOrder: swapInputAndCaption}\" #internalComponentRef>\n\t<div class=\"caption\" *ngIf=\"caption || captionRef\"\n\t\t[ngClass]=\"{\n\t\t\thasErrors: getErrorToShow() && attachedControl.touched,\n\t\t\tpercentageSpacing: captionSpacing === 'percentages', 'd30-70': spaceDistribution === '30-70',\n\t\t\twithErrorRightOfCaption: getErrorLocation() === 'rightOfCaption'\n\t\t}\"\n\t>\n\t\t<div *ngIf=\"captionRef\" class=\"captionRefContainer\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"captionRef\"></ng-container>\n\t\t\t<div *ngIf=\"isRequired()\">&nbsp;*</div>\n\t\t</div>\n\t\t<div *ngIf=\"!captionRef\">{{caption}}<span *ngIf=\"isRequired()\">&nbsp;*</span></div>\n\t\t<div class=\"rightOfCaptionError\">\n\t\t\t<ng-container *ngIf=\"direction === 'vertical' && getErrorLocation() === 'rightOfCaption'\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t</div>\n\t</div>\n\t<ng-container *ngIf=\"direction === 'vertical' && getErrorLocation() === 'belowCaption'\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t<div class=\"inputContainer\" [ngClass]=\"{ percentageSpacing: captionSpacing === 'percentages', 'd30-70': spaceDistribution === '30-70' }\">\n\t\t<ng-content></ng-content>\n\t</div>\n</div>\n",
+                    styles: [":host{display:block}.componentContainer{align-items:center;display:flex;min-height:42px}.componentContainer:not(.hasCaption){display:block}.componentContainer:not(.hasCaption) .inputContainer{margin-top:0}.componentContainer.reverseOrder{flex-direction:row-reverse;justify-content:flex-end}.componentContainer.vertical{display:block}.componentContainer.vertical .inputContainer{margin-top:.3125rem}.componentContainer.vertical .errorContainer{margin-left:0}.componentContainer.vertical .caption{padding-right:0}.captionRefContainer{display:flex}.caption{color:#515365;flex:0 0 auto;font-weight:700;padding-right:1.25rem}.caption.percentageSpacing{flex:0 0 40%}.caption.percentageSpacing.d30-70{flex-basis:30%}.caption.hasErrors{color:#ff8000}.caption.withErrorRightOfCaption{display:flex;gap:2.5rem;justify-content:space-between}.caption.withErrorRightOfCaption .rightOfCaptionError{font-weight:400;overflow:hidden}.caption.withErrorRightOfCaption .rightOfCaptionError *{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inputContainer{flex:1}.inputContainer.percentageSpacing{flex:0 0 60%}.inputContainer.percentageSpacing.d30-70{flex-basis:70%}.errorContainer{color:#ff8000}.errorContainer.hasCaption{margin-left:40%}.errorContainer.hasCaption.d30-70{margin-left:30%}"]
                 },] }
     ];
     FormElementComponent.ctorParameters = function () { return [
@@ -1832,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) {
@@ -1840,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)) {
@@ -1851,6 +1861,9 @@
             return null;
         };
         FileInputComponent.prototype.shouldShowClearButton = function () {
+            if (this.onlyShowUploadButton) {
+                return false;
+            }
             if (this.multiple) {
                 if (arrayIsSetAndFilled(this.innerValue)) {
                     return true;
@@ -1862,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) {