@klippa/ngx-enhancy-forms 14.13.0 → 14.15.0

package/fesm2020/klippa-ngx-enhancy-forms.mjs

@@ -1413,6 +1413,7 @@ class FormSubmitButtonComponent {
         this.variant = 'greenFilled';
         this.before = () => Promise.resolve();
         this.after = () => Promise.resolve();
+        this.disabled = false;
         this.setValidationError = (e) => {
             this.parentForm.formGroup.get(e.path)?.setErrors({ message: { value: e.message } });
         };
@@ -1436,10 +1437,10 @@ class FormSubmitButtonComponent {
     }
 }
 FormSubmitButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FormSubmitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FormSubmitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: FormSubmitButtonComponent, selector: "klp-form-submit-button", inputs: { isLoading: "isLoading", fullWidth: "fullWidth", variant: "variant", submitCallback: "submitCallback", before: "before", after: "after" }, host: { properties: { "class._fullWidth": "this.fullWidth" } }, ngImport: i0, template: "<klp-form-button\n\t\t[variant]=\"variant\"\n\t\t(click)=\"submitForm()\"\n\t\t[disabled]=\"isLoading\"\n\t\t[isLoading]=\"isLoading\"\n\t\t[fullWidth]=\"fullWidth\"\n\t\ttype=\"submit\"\n\t\t[ngClass]=\"fullWidth ? 'fullWidth' : ''\"\n\t>\n\t<ng-content></ng-content>\n</klp-form-button>\n", styles: [":host{display:inline-block}:host._fullWidth{display:block}.fullWidth{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "klp-form-button", inputs: ["variant", "size", "fullWidth", "hasBorder", "disabled", "isLoading", "type", "clickCallback"] }] });
+FormSubmitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: FormSubmitButtonComponent, selector: "klp-form-submit-button", inputs: { isLoading: "isLoading", fullWidth: "fullWidth", variant: "variant", submitCallback: "submitCallback", before: "before", after: "after", disabled: "disabled" }, host: { properties: { "class._fullWidth": "this.fullWidth" } }, ngImport: i0, template: "<klp-form-button\n\t\t[variant]=\"variant\"\n\t\t(click)=\"submitForm()\"\n\t\t[disabled]=\"isLoading || disabled\"\n\t\t[isLoading]=\"isLoading\"\n\t\t[fullWidth]=\"fullWidth\"\n\t\ttype=\"submit\"\n\t\t[ngClass]=\"fullWidth ? 'fullWidth' : ''\"\n\t>\n\t<ng-content></ng-content>\n</klp-form-button>\n", styles: [":host{display:inline-block}:host._fullWidth{display:block}.fullWidth{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "klp-form-button", inputs: ["variant", "size", "fullWidth", "hasBorder", "disabled", "isLoading", "type", "clickCallback"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FormSubmitButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'klp-form-submit-button', template: "<klp-form-button\n\t\t[variant]=\"variant\"\n\t\t(click)=\"submitForm()\"\n\t\t[disabled]=\"isLoading\"\n\t\t[isLoading]=\"isLoading\"\n\t\t[fullWidth]=\"fullWidth\"\n\t\ttype=\"submit\"\n\t\t[ngClass]=\"fullWidth ? 'fullWidth' : ''\"\n\t>\n\t<ng-content></ng-content>\n</klp-form-button>\n", styles: [":host{display:inline-block}:host._fullWidth{display:block}.fullWidth{width:100%}\n"] }]
+            args: [{ selector: 'klp-form-submit-button', template: "<klp-form-button\n\t\t[variant]=\"variant\"\n\t\t(click)=\"submitForm()\"\n\t\t[disabled]=\"isLoading || disabled\"\n\t\t[isLoading]=\"isLoading\"\n\t\t[fullWidth]=\"fullWidth\"\n\t\ttype=\"submit\"\n\t\t[ngClass]=\"fullWidth ? 'fullWidth' : ''\"\n\t>\n\t<ng-content></ng-content>\n</klp-form-button>\n", styles: [":host{display:inline-block}:host._fullWidth{display:block}.fullWidth{width:100%}\n"] }]
         }], propDecorators: { isLoading: [{
                 type: Input
             }], fullWidth: [{
@@ -1455,6 +1456,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                 type: Input
             }], after: [{
                 type: Input
+            }], disabled: [{
+                type: Input
             }] } });
 
 class MultipleValueAccessorBase extends ValueAccessorBase {
@@ -1981,6 +1984,7 @@ class FileInputComponent extends MultipleValueAccessorBase {
         this.clearable = false;
         this.onlyShowUploadButton = false;
         this.useFullParentSize = false;
+        this.buttonText = 'Upload a file';
     }
     onChange(files) {
         const result = [];
@@ -2020,10 +2024,10 @@ class FileInputComponent extends MultipleValueAccessorBase {
     }
 }
 FileInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FileInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FileInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: FileInputComponent, selector: "klp-form-file-input", inputs: { isLoading: "isLoading", clearable: "clearable", onlyShowUploadButton: "onlyShowUploadButton", useFullParentSize: "useFullParentSize" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: FileInputComponent, multi: true }], viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{fullParentSize: useFullParentSize}\">\n\t<div class=\"buttonContainer\">\n\t\t<input\n\t\t\ttype=\"file\"\n\t\t\t#nativeInputRef\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\t<klp-form-button class=\"uploadButton\" [isLoading]=\"isLoading\" (click)=\"uploadFileClicked()\">\n\t\t\tUpload a file\n\t\t</klp-form-button>\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", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{display:flex;align-items:center}.componentContainer.fullParentSize{height:100%;justify-content:center;position:relative}.componentContainer:not(.fullParentSize) .buttonContainer{position:relative}.componentContainer .buttonContainer{flex:0 0 auto}input{position:absolute;cursor:pointer;opacity:0;inset:0}.fileName{flex:1 1 0px;margin-left:.625rem;color:#515365;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clearButton{flex:0 0 auto}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "klp-form-button", inputs: ["variant", "size", "fullWidth", "hasBorder", "disabled", "isLoading", "type", "clickCallback"] }] });
+FileInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: FileInputComponent, selector: "klp-form-file-input", inputs: { isLoading: "isLoading", clearable: "clearable", onlyShowUploadButton: "onlyShowUploadButton", useFullParentSize: "useFullParentSize", buttonText: "buttonText" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: FileInputComponent, multi: true }], viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{fullParentSize: useFullParentSize}\">\n\t<div class=\"buttonContainer\">\n\t\t<input\n\t\t\ttype=\"file\"\n\t\t\t#nativeInputRef\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\t<klp-form-button class=\"uploadButton\" [isLoading]=\"isLoading\" (click)=\"uploadFileClicked()\">\n\t\t\t{{buttonText}}\n\t\t</klp-form-button>\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", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{display:flex;align-items:center}.componentContainer.fullParentSize{height:100%;justify-content:center;position:relative}.componentContainer:not(.fullParentSize) .buttonContainer{position:relative}.componentContainer .buttonContainer{flex:0 0 auto}input{position:absolute;cursor:pointer;opacity:0;inset:0}.fileName{flex:1 1 0px;margin-left:.625rem;color:#515365;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clearButton{flex:0 0 auto}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "klp-form-button", inputs: ["variant", "size", "fullWidth", "hasBorder", "disabled", "isLoading", "type", "clickCallback"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FileInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'klp-form-file-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: FileInputComponent, multi: true }], template: "<div class=\"componentContainer\" [ngClass]=\"{fullParentSize: useFullParentSize}\">\n\t<div class=\"buttonContainer\">\n\t\t<input\n\t\t\ttype=\"file\"\n\t\t\t#nativeInputRef\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\t<klp-form-button class=\"uploadButton\" [isLoading]=\"isLoading\" (click)=\"uploadFileClicked()\">\n\t\t\tUpload a file\n\t\t</klp-form-button>\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", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{display:flex;align-items:center}.componentContainer.fullParentSize{height:100%;justify-content:center;position:relative}.componentContainer:not(.fullParentSize) .buttonContainer{position:relative}.componentContainer .buttonContainer{flex:0 0 auto}input{position:absolute;cursor:pointer;opacity:0;inset:0}.fileName{flex:1 1 0px;margin-left:.625rem;color:#515365;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clearButton{flex:0 0 auto}\n"] }]
+            args: [{ selector: 'klp-form-file-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: FileInputComponent, multi: true }], template: "<div class=\"componentContainer\" [ngClass]=\"{fullParentSize: useFullParentSize}\">\n\t<div class=\"buttonContainer\">\n\t\t<input\n\t\t\ttype=\"file\"\n\t\t\t#nativeInputRef\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\t<klp-form-button class=\"uploadButton\" [isLoading]=\"isLoading\" (click)=\"uploadFileClicked()\">\n\t\t\t{{buttonText}}\n\t\t</klp-form-button>\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", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{display:flex;align-items:center}.componentContainer.fullParentSize{height:100%;justify-content:center;position:relative}.componentContainer:not(.fullParentSize) .buttonContainer{position:relative}.componentContainer .buttonContainer{flex:0 0 auto}input{position:absolute;cursor:pointer;opacity:0;inset:0}.fileName{flex:1 1 0px;margin-left:.625rem;color:#515365;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clearButton{flex:0 0 auto}\n"] }]
         }], propDecorators: { isLoading: [{
                 type: Input
             }], clearable: [{
@@ -2032,6 +2036,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                 type: Input
             }], useFullParentSize: [{
                 type: Input
+            }], buttonText: [{
+                type: Input
             }], nativeInputRef: [{
                 type: ViewChild,
                 args: ['nativeInputRef']