@klippa/ngx-enhancy-forms 8.0.0 → 8.1.0

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

@@ -1910,6 +1910,98 @@
                 },] }
     ];
 
+    var invalidTimeKey = '--invalid_time--';
+    function timeValidator(control) {
+        var invalid = control.value === invalidTimeKey;
+        return invalid ? { date: control.value } : null;
+    }
+
+    var HourMinuteInputComponent = /** @class */ (function (_super) {
+        __extends(HourMinuteInputComponent, _super);
+        function HourMinuteInputComponent() {
+            var _this = _super.apply(this, __spread(arguments)) || this;
+            _this.hoursTouched = false;
+            _this.minutesTouched = false;
+            return _this;
+        }
+        HourMinuteInputComponent.prototype.formatHours = function () {
+            if (!stringIsSetAndFilled(this.hours)) {
+                this.hours = '0';
+            }
+        };
+        HourMinuteInputComponent.prototype.formatMinutes = function () {
+            if (!stringIsSetAndFilled(this.minutes)) {
+                this.minutes = '0';
+            }
+        };
+        HourMinuteInputComponent.prototype.formatTime = function () {
+            if (Number.isFinite(Number(this.hours)) && this.hours.length === 1) {
+                this.hours = '0' + this.hours;
+            }
+            if (Number.isFinite(Number(this.minutes)) && this.minutes.length === 1) {
+                this.minutes = '0' + this.minutes;
+            }
+        };
+        HourMinuteInputComponent.prototype.writeValue = function (value) {
+            if (Number.isFinite(value)) {
+                this.hours = Math.floor(value / 60) + '';
+                this.minutes = value % 60 + '';
+                this.formatTime();
+                _super.prototype.writeValue.call(this, value);
+            }
+            else {
+                this.hours = '';
+                this.minutes = '';
+                _super.prototype.writeValue.call(this, invalidTimeKey);
+            }
+        };
+        HourMinuteInputComponent.prototype.notifyNewTime = function () {
+            var parsedHours = Number(this.hours);
+            var parsedMinutes = Number(this.minutes);
+            // when all inputs are empty
+            if (!stringIsSetAndFilled(this.hours) && !stringIsSetAndFilled(this.minutes)) {
+                this.setInnerValueAndNotify(null);
+                return;
+            }
+            // if we have valid time
+            if (stringIsSetAndFilled(this.hours) &&
+                Number.isFinite(parsedHours) &&
+                parsedHours >= 0 &&
+                parsedHours <= 99 &&
+                stringIsSetAndFilled(this.minutes) &&
+                Number.isFinite(parsedMinutes) &&
+                parsedMinutes >= 0 &&
+                parsedMinutes <= 59) {
+                this.setInnerValueAndNotify(parsedHours * 60 + parsedMinutes);
+                return;
+            }
+            // all other cases, we are not in a valid state
+            this.setInnerValueAndNotify(invalidTimeKey);
+        };
+        HourMinuteInputComponent.prototype.touchHours = function () {
+            this.hoursTouched = true;
+            this.determineAllTouched();
+        };
+        HourMinuteInputComponent.prototype.touchMinutes = function () {
+            this.minutesTouched = true;
+            this.determineAllTouched();
+        };
+        HourMinuteInputComponent.prototype.determineAllTouched = function () {
+            if (this.hoursTouched && this.minutesTouched) {
+                this.touch();
+            }
+        };
+        return HourMinuteInputComponent;
+    }(ValueAccessorBase));
+    HourMinuteInputComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'klp-form-hour-minute-input',
+                    template: "<div class=\"componentContainer\" [ngClass]=\"{disabled: disabled}\">\n\t<input maxlength=\"2\" 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",
+                    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::-moz-placeholder{color:#adadad}.componentContainer input:-ms-input-placeholder{color:#adadad}.componentContainer input::placeholder{color:#adadad}.componentContainer .divider{margin:0 .3125rem}"]
+                },] }
+    ];
+
     var NgxEnhancyFormsModule = /** @class */ (function () {
         function NgxEnhancyFormsModule() {
         }
@@ -1948,6 +2040,7 @@
                         FormSubmitButtonComponent,
                         FormComponent,
                         SubFormDirective,
+                        HourMinuteInputComponent
                     ],
                     exports: [
                         ValueAccessorBase,
@@ -1973,6 +2066,7 @@
                         FormSubmitButtonComponent,
                         FormComponent,
                         SubFormDirective,
+                        HourMinuteInputComponent
                     ]
                 },] }
     ];
@@ -2001,6 +2095,7 @@
     exports.FormElementComponent = FormElementComponent;
     exports.FormErrorComponent = FormErrorComponent;
     exports.FormSubmitButtonComponent = FormSubmitButtonComponent;
+    exports.HourMinuteInputComponent = HourMinuteInputComponent;
     exports.KLP_DATE_FORMATS = KLP_DATE_FORMATS;
     exports.LoadingIndicatorComponent = LoadingIndicatorComponent;
     exports.MultipleValueAccessorBase = MultipleValueAccessorBase;