@klippa/ngx-enhancy-forms 5.0.0 → 5.2.1

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

@@ -31,6 +31,9 @@
         }
         return s.substring(0, length) + '...';
     }
+    function arrayIsSetAndFilled(arr) {
+        return arr !== null && arr !== undefined && arr.length > 0;
+    }
 
     var invalidFieldsSymbol = Symbol('Not all fields are valid');
     var SubFormDirective = /** @class */ (function () {
@@ -225,6 +228,7 @@
             this.customMessages = customMessages;
             this.direction = 'horizontal';
             this.captionSpacing = 'percentages';
+            this.spaceDistribution = '40-60';
             this.swapInputAndCaption = false;
             this.errorMessages = DEFAULT_ERROR_MESSAGES;
             this.customErrorHandlers = [];
@@ -234,9 +238,11 @@
                 return msg.replace("%" + key + "%", parameters[key]);
             }, message);
         };
-        FormElementComponent.prototype.registerControl = function (formControl) {
+        FormElementComponent.prototype.registerControl = function (formControl, input) {
+            if (input === void 0) { input = null; }
             this.attachedControl = formControl;
             this.parent.registerControl(formControl, this);
+            this.input = input;
         };
         FormElementComponent.prototype.unregisterControl = function (formControl) {
             this.attachedControl = null;
@@ -281,6 +287,12 @@
             // to give some breathing room, we scroll 100px more to the top
             (_a = this.getScrollableParent(this.internalComponentRef.nativeElement)) === null || _a === void 0 ? void 0 : _a.scrollBy(0, -100);
         };
+        FormElementComponent.prototype.isRequired = function () {
+            if (isValueSet(this.input)) {
+                return this.input.hasValidator('required');
+            }
+            return false;
+        };
         FormElementComponent.prototype.getErrorMessage = function (key) {
             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];
@@ -290,8 +302,8 @@
     FormElementComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'klp-form-element',
-                    template: "<ng-template #errorRef>\n\t<div *ngIf=\"getErrorToShow()\" class=\"errorContainer\">\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<ng-container *ngIf=\"direction === 'horizontal'\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n<div *ngIf=\"attachedControl\" class=\"componentContainer\" [ngClass]=\"{vertical: direction === 'vertical', reverseOrder: swapInputAndCaption}\" #internalComponentRef>\n\t<div class=\"caption\" [ngClass]=\"{ hasErrors: getErrorToShow() && attachedControl.touched, percentageSpacing: captionSpacing === 'percentages' }\">\n\t\t<div *ngIf=\"captionRef\" [ngTemplateOutlet]=\"captionRef\"></div>\n\t\t<div *ngIf=\"!captionRef\">{{caption}}</div>\n\t</div>\n\t<ng-container *ngIf=\"direction === 'vertical'\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t<div class=\"inputContainer\" [ngClass]=\"{ percentageSpacing: captionSpacing === 'percentages' }\">\n\t\t<ng-content></ng-content>\n\t</div>\n</div>\n",
-                    styles: [":host{display:block;margin-top:1.25rem}.componentContainer{align-items:center;display:flex}.componentContainer.reverseOrder{flex-direction:row-reverse;justify-content:flex-end}.componentContainer.vertical{display:block;margin-bottom:1rem}.componentContainer.vertical .inputContainer{margin-top:.3125rem}.componentContainer.vertical .errorContainer{margin-left:0}.caption{color:#515365;flex:0 0 auto;font-weight:700}.caption.percentageSpacing{flex:0 0 40%}.caption.hasErrors{color:#ff8000}.inputContainer{flex:0 0 auto}.inputContainer.percentageSpacing{flex:0 0 60%}.errorContainer{color:#ff8000;margin-left:40%}"]
+                    template: "<ng-template #errorRef>\n\t<div *ngIf=\"getErrorToShow()\" class=\"errorContainer\">\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<ng-container *ngIf=\"direction === 'horizontal'\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n<div class=\"componentContainer\" [ngClass]=\"{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}.componentContainer.reverseOrder{flex-direction:row-reverse;justify-content:flex-end}.componentContainer.vertical{display:block;margin-bottom:1rem}.componentContainer.vertical .inputContainer{margin-top:.3125rem}.componentContainer.vertical .errorContainer{margin-left:0}.captionRefContainer{display:flex}.caption{color:#515365;flex:0 0 auto;font-weight:700}.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;margin-left:40%}.errorContainer.d30-70{margin-left:30%}"]
                 },] }
     ];
     FormElementComponent.ctorParameters = function () { return [
@@ -302,6 +314,7 @@
         caption: [{ type: core.Input }],
         direction: [{ type: core.Input }],
         captionSpacing: [{ type: core.Input }],
+        spaceDistribution: [{ type: core.Input }],
         swapInputAndCaption: [{ type: core.Input }],
         internalComponentRef: [{ type: core.ViewChild, args: ['internalComponentRef',] }]
     };
@@ -325,10 +338,12 @@
             // we support both providing just the formControlName and the full formControl
             this.formControlName = null;
             this.formControl = null;
+            this.onTouch = new core.EventEmitter();
+            this.validators = [];
         }
         ValueAccessorBase.prototype.ngOnInit = function () {
             var _this = this;
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             if (this.formControl) {
                 this.attachedFormControl = this.formControl;
             }
@@ -343,7 +358,16 @@
                 this.attachedFormControl.statusChanges.subscribe(function () {
                     _this.disabled = _this.attachedFormControl.disabled;
                 });
-                (_c = this.parent) === null || _c === void 0 ? void 0 : _c.registerControl(this.attachedFormControl);
+                (_c = this.parent) === null || _c === void 0 ? void 0 : _c.registerControl(this.attachedFormControl, this);
+                if ((_d = this.attachedFormControl) === null || _d === void 0 ? void 0 : _d.validator) {
+                    var vals = this.attachedFormControl.validator({});
+                    if (isValueSet(vals)) {
+                        this.validators = Object.keys(vals);
+                    }
+                    else {
+                        this.validators = [];
+                    }
+                }
             }
         };
         ValueAccessorBase.prototype.isInErrorState = function () {
@@ -374,6 +398,12 @@
         ValueAccessorBase.prototype.resetToNull = function () {
             this.setInnerValueAndNotify(null);
         };
+        ValueAccessorBase.prototype.hasValidator = function (validatorName) {
+            if (arrayIsSetAndFilled(this.validators)) {
+                return this.validators.includes(validatorName);
+            }
+            return false;
+        };
         return ValueAccessorBase;
     }());
     ValueAccessorBase.decorators = [
@@ -389,7 +419,8 @@
     ValueAccessorBase.propDecorators = {
         disabled: [{ type: core.Input }],
         formControlName: [{ type: core.Input }],
-        formControl: [{ type: core.Input }]
+        formControl: [{ type: core.Input }],
+        onTouch: [{ type: core.Output }]
     };
 
     var ButtonComponent = /** @class */ (function () {
@@ -873,10 +904,9 @@
             this.onSearch.emit(value);
         };
         SelectComponent.prototype.getDefaultTranslation = function (key) {
-            var _this = this;
             switch (key) {
                 case 'placeholder':
-                    return function () { var _a; return (_a = _this.placeholder) !== null && _a !== void 0 ? _a : 'Pick an option'; };
+                    return function () { return 'Pick an option'; };
                 case 'amountSelected':
                     return function (amount) { return amount + " selected"; };
             }
@@ -884,6 +914,9 @@
         SelectComponent.prototype.getTranslation = function (key, params) {
             if (params === void 0) { params = null; }
             var _a, _b, _c;
+            if (key === 'placeholder' && stringIsSetAndFilled(this.placeholder)) {
+                return this.placeholder;
+            }
             return (_c = (_b = (_a = this.translations) === null || _a === void 0 ? void 0 : _a[key]) === null || _b === void 0 ? void 0 : _b.call(_a, params)) !== null && _c !== void 0 ? _c : this.getDefaultTranslation(key)(params);
         };
         return SelectComponent;
@@ -1283,10 +1316,9 @@
             }
         };
         DatePickerComponent.prototype.getDefaultTranslation = function (key) {
-            var _this = this;
             switch (key) {
                 case 'placeholder':
-                    return function () { var _a; return (_a = _this.placeholder) !== null && _a !== void 0 ? _a : 'Select date'; };
+                    return function () { return 'Select date'; };
             }
         };
         DatePickerComponent.prototype.getTranslation = function (key, params) {
@@ -1295,6 +1327,9 @@
             if (key === 'placeholder' && this.multiple) {
                 return '';
             }
+            if (key === 'placeholder' && stringIsSetAndFilled(this.placeholder)) {
+                return this.placeholder;
+            }
             return (_c = (_b = (_a = this.translations) === null || _a === void 0 ? void 0 : _a[key]) === null || _b === void 0 ? void 0 : _b.call(_a, params)) !== null && _c !== void 0 ? _c : this.getDefaultTranslation(key)(params);
         };
         return DatePickerComponent;
@@ -1572,10 +1607,9 @@
             }
         };
         DateTimePickerComponent.prototype.getDefaultTranslation = function (key) {
-            var _this = this;
             switch (key) {
                 case 'placeholder':
-                    return function () { var _a; return (_a = _this.placeholder) !== null && _a !== void 0 ? _a : 'Select date'; };
+                    return function () { return 'Select date'; };
                 case 'selectDays':
                     return function () { return 'Select day(s)'; };
                 case 'selectedDate':
@@ -1592,6 +1626,9 @@
             if (key === 'placeholder' && this.multiple) {
                 return '';
             }
+            if (key === 'placeholder' && stringIsSetAndFilled(this.placeholder)) {
+                return this.placeholder;
+            }
             return (_c = (_b = (_a = this.translations) === null || _a === void 0 ? void 0 : _a[key]) === null || _b === void 0 ? void 0 : _b.call(_a, params)) !== null && _c !== void 0 ? _c : this.getDefaultTranslation(key)(params);
         };
         return DateTimePickerComponent;