@klippa/ngx-enhancy-forms 8.1.2 → 9.0.0

package/README.md

@@ -1,6 +1,6 @@
 # NgxEnhancyForms
 
-Enhancy Forms is the forms framework used for klippa frontend applications.
+Enhancy Forms is the forms framework used for Klippa frontend applications.
 
 Known Issues:
 - ngx-date-fns-adapter is not compatible with Angular 12. The date picker can be used, but cannot be internationalised.
@@ -150,7 +150,7 @@ class MultiParseDateFnsDateAdapter extends NgxDateFnsDateAdapter {
 	}
 }
 ```
-git
+
 ```ts
 @Component({
 	selector: 'app-login-form',

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

@@ -1320,39 +1320,30 @@
             return _this;
         }
         MultipleValueAccessorBase.prototype.writeValue = function (value) {
-            if (this.multiple) {
-                if (Array.isArray(value)) {
-                    _super.prototype.writeValue.call(this, value.filter(isValueSet));
-                }
-                else {
-                    _super.prototype.writeValue.call(this, [value].filter(isValueSet));
-                }
+            // if the outside world passes a value in the wrong format, it should be corrected
+            if (this.multiple && !Array.isArray(value)) {
+                var correctedVal = [value].filter(isValueSet);
+                _super.prototype.writeValue.call(this, correctedVal);
+                _super.prototype.setInnerValueAndNotify.call(this, correctedVal);
+            }
+            else if (!this.multiple && Array.isArray(value)) {
+                var correctedVal = value[0];
+                _super.prototype.writeValue.call(this, correctedVal);
+                _super.prototype.setInnerValueAndNotify.call(this, correctedVal);
             }
             else {
-                if (Array.isArray(value)) {
-                    _super.prototype.writeValue.call(this, value[0]);
-                }
-                else {
-                    _super.prototype.writeValue.call(this, value);
-                }
+                _super.prototype.writeValue.call(this, value);
             }
         };
         MultipleValueAccessorBase.prototype.setInnerValueAndNotify = function (value) {
-            if (this.multiple) {
-                if (Array.isArray(value)) {
-                    _super.prototype.setInnerValueAndNotify.call(this, value.filter(isValueSet));
-                }
-                else {
-                    _super.prototype.setInnerValueAndNotify.call(this, [value].filter(isValueSet));
-                }
+            if (this.multiple && !Array.isArray(value)) {
+                _super.prototype.setInnerValueAndNotify.call(this, [value].filter(isValueSet));
+            }
+            else if (!this.multiple && Array.isArray(value)) {
+                _super.prototype.setInnerValueAndNotify.call(this, value[0]);
             }
             else {
-                if (Array.isArray(value)) {
-                    _super.prototype.setInnerValueAndNotify.call(this, value[0]);
-                }
-                else {
-                    _super.prototype.setInnerValueAndNotify.call(this, value);
-                }
+                _super.prototype.setInnerValueAndNotify.call(this, value);
             }
         };
         return MultipleValueAccessorBase;
@@ -1920,6 +1911,7 @@
         __extends(HourMinuteInputComponent, _super);
         function HourMinuteInputComponent() {
             var _this = _super.apply(this, __spread(arguments)) || this;
+            _this.placeholders = ['hour', 'min'];
             _this.hoursTouched = false;
             _this.minutesTouched = false;
             return _this;
@@ -1994,11 +1986,14 @@
     HourMinuteInputComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'klp-form-hour-minute-input',
-                    template: "<div class=\"componentContainer\" [ngClass]=\"{disabled: disabled}\">\n\t<input class=\"hourInput\" maxlength=\"4\" placeholder=\"____\" [disabled]=\"disabled\" [(ngModel)]=\"hours\" (blur)=\"formatHours(); formatTime(); touchHours(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\">\n\t<div class=\"divider\">:</div>\n\t<input maxlength=\"2\" placeholder=\"__\" [disabled]=\"disabled\" [(ngModel)]=\"minutes\" (blur)=\"formatMinutes(); formatTime(); touchMinutes(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\">\n</div>\n",
+                    template: "<div class=\"componentContainer\" [ngClass]=\"{disabled: disabled}\">\n\t<input class=\"hourInput\" maxlength=\"4\" [placeholder]=\"placeholders[0]\" [disabled]=\"disabled\" [(ngModel)]=\"hours\" (blur)=\"formatHours(); formatTime(); touchHours(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\">\n\t<div class=\"divider\">:</div>\n\t<input maxlength=\"2\" [placeholder]=\"placeholders[1]\" [disabled]=\"disabled\" [(ngModel)]=\"minutes\" (blur)=\"formatMinutes(); formatTime(); touchMinutes(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\">\n</div>\n",
                     providers: [{ provide: forms.NG_VALUE_ACCESSOR, useExisting: HourMinuteInputComponent, multi: true }],
-                    styles: [":host{display:flex}.componentContainer{align-items:center;background:#fff;border:1px solid #e6ecf5;display:flex;flex:0 0 auto;height:42px;padding:6px .625rem}.componentContainer.disabled{background:#f9f9f9;cursor:not-allowed}.componentContainer input{border:none;color:#888da8;padding:0;text-align:center;width:20px}.componentContainer input.hourInput{width:40px}.componentContainer input::-moz-placeholder{color:#adadad}.componentContainer input:-ms-input-placeholder{color:#adadad}.componentContainer input::placeholder{color:#adadad}.componentContainer .divider{margin:0 .3125rem}"]
+                    styles: [":host{display:flex}.componentContainer{align-items:center;background:#fff;border:1px solid #e6ecf5;display:flex;flex:0 0 auto;height:42px;padding:6px .625rem}.componentContainer.disabled{background:#f9f9f9;cursor:not-allowed}.componentContainer input{border:none;color:#888da8;padding:0;text-align:center;width:30px}.componentContainer input.hourInput{width:50px}.componentContainer input::-moz-placeholder{color:#adadad}.componentContainer input:-ms-input-placeholder{color:#adadad}.componentContainer input::placeholder{color:#adadad}.componentContainer .divider{margin:0 .3125rem}"]
                 },] }
     ];
+    HourMinuteInputComponent.propDecorators = {
+        placeholders: [{ type: core.Input }]
+    };
 
     var NgxEnhancyFormsModule = /** @class */ (function () {
         function NgxEnhancyFormsModule() {