@klippa/ngx-enhancy-forms 7.1.6 → 7.3.0

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

@@ -32,7 +32,7 @@
         return s.substring(0, length) + '...';
     }
     function arrayIsSetAndFilled(arr) {
-        return arr !== null && arr !== undefined && arr.length > 0;
+        return Array.isArray(arr) && arr !== null && arr !== undefined && arr.length > 0;
     }
 
     var invalidFieldsSymbol = Symbol('Not all fields are valid');
@@ -340,6 +340,7 @@
             this.controlContainer = controlContainer;
             this.changed = new Array();
             this.touched = new Array();
+            this.prevValue = null;
             this.disabled = false;
             // we support both providing just the formControlName and the full formControl
             this.formControlName = null;
@@ -390,6 +391,7 @@
         };
         ValueAccessorBase.prototype.writeValue = function (value) {
             this.innerValue = value;
+            this.prevValue = value;
         };
         ValueAccessorBase.prototype.registerOnChange = function (fn) {
             this.changed.push(fn);
@@ -398,8 +400,34 @@
             this.touched.push(fn);
         };
         ValueAccessorBase.prototype.setInnerValueAndNotify = function (value) {
-            this.innerValue = value;
-            this.changed.forEach(function (fn) { return fn(value); });
+            var _this = this;
+            var actuallySetValue = function (valueToSet) {
+                _this.innerValue = valueToSet;
+                _this.prevValue = valueToSet;
+                _this.changed.forEach(function (fn) { return fn(valueToSet); });
+            };
+            if (isValueSet(this.innerValueChangeInterceptor)) {
+                this.latestInnerValueChangedInterceptorPromise = this.innerValueChangeInterceptor();
+                var myPromise_1 = this.latestInnerValueChangedInterceptorPromise;
+                this.latestInnerValueChangedInterceptorPromise.then(function () {
+                    if (_this.latestInnerValueChangedInterceptorPromise === myPromise_1) {
+                        actuallySetValue(value);
+                    }
+                    else {
+                        // ignore outdated promises
+                    }
+                }).catch(function () {
+                    if (_this.latestInnerValueChangedInterceptorPromise === myPromise_1) {
+                        actuallySetValue(_this.prevValue);
+                    }
+                    else {
+                        // ignore outdated promises
+                    }
+                });
+            }
+            else {
+                actuallySetValue(value);
+            }
         };
         ValueAccessorBase.prototype.resetToNull = function () {
             this.setInnerValueAndNotify(null);
@@ -424,6 +452,7 @@
     ]; };
     ValueAccessorBase.propDecorators = {
         disabled: [{ type: core.Input }],
+        innerValueChangeInterceptor: [{ type: core.Input }],
         formControlName: [{ type: core.Input }],
         formControl: [{ type: core.Input }],
         onTouch: [{ type: core.Output }]
@@ -1479,8 +1508,8 @@
             if (this.multiple) {
                 this.datePickerRef.close = function () {
                 };
-                if (this.selectedDates.some(function (e) { return e.getTime() === date.getTime(); })) {
-                    this.selectedDates = this.selectedDates.filter(function (e) { return e.getTime() !== date.getTime(); });
+                if (this.selectedDates.some(function (e) { return dateFns.isSameDay(e, date); })) {
+                    this.selectedDates = this.selectedDates.filter(function (e) { return !dateFns.isSameDay(e, date); });
                 }
                 else {
                     this.selectedDates = __spread(this.selectedDates, [date]);
@@ -1720,6 +1749,57 @@
                 },] }
     ];
 
+    var FileInputComponent = /** @class */ (function (_super) {
+        __extends(FileInputComponent, _super);
+        function FileInputComponent() {
+            var _this = _super.apply(this, __spread(arguments)) || this;
+            _this.isLoading = false;
+            _this.clearable = false;
+            return _this;
+        }
+        FileInputComponent.prototype.onChange = function (files) {
+            var result = [];
+            for (var i = 0; i < files.length; i++) {
+                result.push(files.item(i));
+            }
+            this.setInnerValueAndNotify(result);
+        };
+        FileInputComponent.prototype.getFileNames = function () {
+            if (Array.isArray(this.innerValue)) {
+                return this.innerValue.map(function (e) { return e.name; }).join(', ');
+            }
+            else if (this.innerValue instanceof File) {
+                return this.innerValue.name;
+            }
+            return null;
+        };
+        FileInputComponent.prototype.shouldShowClearButton = function () {
+            if (this.multiple) {
+                if (arrayIsSetAndFilled(this.innerValue)) {
+                    return true;
+                }
+                return false;
+            }
+            if (isValueSet(this.innerValue)) {
+                return true;
+            }
+            return false;
+        };
+        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 type=\"file\" (change)=\"onChange($event.target.files)\" [multiple]=\"multiple\">\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",
+                    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}"]
+                },] }
+    ];
+    FileInputComponent.propDecorators = {
+        isLoading: [{ type: core.Input }],
+        clearable: [{ type: core.Input }]
+    };
+
     var NgxEnhancyFormsModule = /** @class */ (function () {
         function NgxEnhancyFormsModule() {
         }
@@ -1750,6 +1830,7 @@
                         SortableItemsComponent,
                         TextInputComponent,
                         ToggleComponent,
+                        FileInputComponent,
                         FormCaptionComponent,
                         FormElementComponent,
                         FormErrorComponent,
@@ -1773,6 +1854,7 @@
                         SortableItemsComponent,
                         TextInputComponent,
                         ToggleComponent,
+                        FileInputComponent,
                         FormCaptionComponent,
                         FormElementComponent,
                         FormErrorComponent,
@@ -1801,6 +1883,7 @@
     exports.DateTimePickerComponent = DateTimePickerComponent;
     exports.EmailInputComponent = EmailInputComponent;
     exports.FORM_ERROR_MESSAGES = FORM_ERROR_MESSAGES;
+    exports.FileInputComponent = FileInputComponent;
     exports.FormCaptionComponent = FormCaptionComponent;
     exports.FormComponent = FormComponent;
     exports.FormElementComponent = FormElementComponent;