@klippa/ngx-enhancy-forms 7.2.0 → 7.4.0

package/fesm2015/klippa-ngx-enhancy-forms.js

@@ -1,7 +1,7 @@
 import { Directive, Input, Component, SkipSelf, Optional, InjectionToken, Host, Inject, ViewChild, EventEmitter, Output, HostBinding, ContentChild, TemplateRef, ChangeDetectorRef, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormArray, FormGroup, FormControl, ControlContainer, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import { isString } from 'lodash';
+import { isString, isArray } from 'lodash';
 import { SortablejsModule } from 'ngx-sortablejs';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { parse, format, isSameDay, startOfMonth, endOfMonth } from 'date-fns';
@@ -23,12 +23,6 @@ function numberIsSet(value) {
 function isValueSet(value) {
     return value !== null && value !== undefined;
 }
-function removeDuplicatesFromArray(array) {
-    return array.filter((c, i) => {
-        const firstOccurrenceIndex = array.findIndex((c2) => c2 === c);
-        return i === firstOccurrenceIndex;
-    });
-}
 function stringOrArrayIsSetAndEmpty(value) {
     return value !== null && value !== undefined && value.length === 0;
 }
@@ -38,9 +32,6 @@ function truncateString(s, length) {
     }
     return s.substring(0, length) + '...';
 }
-function arrayIsSetAndFilled(arr) {
-    return Array.isArray(arr) && arr !== null && arr !== undefined && arr.length > 0;
-}
 
 const invalidFieldsSymbol = Symbol('Not all fields are valid');
 class SubFormDirective {
@@ -321,6 +312,49 @@ FormElementComponent.propDecorators = {
     internalComponentRef: [{ type: ViewChild, args: ['internalComponentRef',] }]
 };
 
+function removeDuplicatesFromArraysWithComparator(comparator, ...arrays) {
+    let combined = [];
+    for (const array of arrays) {
+        combined = combined.concat(array);
+    }
+    return combined.filter((c, i) => {
+        const firstOccurrenceIndex = combined.findIndex((c2) => comparator(c, c2));
+        return i === firstOccurrenceIndex;
+    });
+}
+function removeDuplicatesFromArray(array) {
+    return array.filter((c, i) => {
+        const firstOccurrenceIndex = array.findIndex((c2) => c2 === c);
+        return i === firstOccurrenceIndex;
+    });
+}
+function insertAtIndex(arr, index, item) {
+    arr.splice(index, 0, item);
+}
+function arrayIsSetAndFilled(arr) {
+    return isArray(arr) && arr !== null && arr !== undefined && arr.length > 0;
+}
+function asArray(value) {
+    if (isValueSet(value)) {
+        if (Array.isArray(value)) {
+            return value;
+        }
+        return [value];
+    }
+    return [];
+}
+function splitArrayByCondition(value, condition) {
+    return value.reduce((acc, cur) => {
+        if (condition(cur)) {
+            acc.push([]);
+        }
+        else {
+            acc[acc.length - 1].push(cur);
+        }
+        return acc;
+    }, [[]]);
+}
+
 /**
  * This component is a base in order to create a component that supports ngModel.
  * Some important things to know about it:
@@ -336,6 +370,7 @@ class ValueAccessorBase {
         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;
@@ -385,6 +420,7 @@ class ValueAccessorBase {
     }
     writeValue(value) {
         this.innerValue = value;
+        this.prevValue = value;
     }
     registerOnChange(fn) {
         this.changed.push(fn);
@@ -393,8 +429,33 @@ class ValueAccessorBase {
         this.touched.push(fn);
     }
     setInnerValueAndNotify(value) {
-        this.innerValue = value;
-        this.changed.forEach((fn) => fn(value));
+        const actuallySetValue = (valueToSet) => {
+            this.innerValue = valueToSet;
+            this.prevValue = valueToSet;
+            this.changed.forEach((fn) => fn(valueToSet));
+        };
+        if (isValueSet(this.innerValueChangeInterceptor)) {
+            this.latestInnerValueChangedInterceptorPromise = this.innerValueChangeInterceptor();
+            const myPromise = this.latestInnerValueChangedInterceptorPromise;
+            this.latestInnerValueChangedInterceptorPromise.then(() => {
+                if (this.latestInnerValueChangedInterceptorPromise === myPromise) {
+                    actuallySetValue(value);
+                }
+                else {
+                    // ignore outdated promises
+                }
+            }).catch(() => {
+                if (this.latestInnerValueChangedInterceptorPromise === myPromise) {
+                    actuallySetValue(this.prevValue);
+                }
+                else {
+                    // ignore outdated promises
+                }
+            });
+        }
+        else {
+            actuallySetValue(value);
+        }
     }
     resetToNull() {
         this.setInnerValueAndNotify(null);
@@ -418,6 +479,7 @@ ValueAccessorBase.ctorParameters = () => [
 ];
 ValueAccessorBase.propDecorators = {
     disabled: [{ type: Input }],
+    innerValueChangeInterceptor: [{ type: Input }],
     formControlName: [{ type: Input }],
     formControl: [{ type: Input }],
     onTouch: [{ type: Output }]
@@ -1096,8 +1158,8 @@ class DateTimePickerComponent extends MultipleValueAccessorBase {
         if (this.multiple) {
             this.datePickerRef.close = () => {
             };
-            if (this.selectedDates.some((e) => e.getTime() === date.getTime())) {
-                this.selectedDates = this.selectedDates.filter((e) => e.getTime() !== date.getTime());
+            if (this.selectedDates.some((e) => isSameDay(e, date))) {
+                this.selectedDates = this.selectedDates.filter((e) => !isSameDay(e, date));
             }
             else {
                 this.selectedDates = [...this.selectedDates, date];
@@ -1380,6 +1442,51 @@ FileInputComponent.propDecorators = {
     clearable: [{ type: Input }]
 };
 
+class SortableGroupedItemsComponent extends ValueAccessorBase {
+    constructor() {
+        super(...arguments);
+        this.reloader = true; // sortable items doesnt correctly update, so we have this boolean that flips to rerender the sortable items comp
+    }
+    writeValue(value) {
+        super.writeValue(value);
+        this.reloader = false;
+        setTimeout(() => {
+            if (arrayIsSetAndFilled(value)) {
+                this.items = value.flatMap(e => [...e, '']);
+            }
+            else {
+                this.items = [];
+            }
+            this.reloader = true;
+        });
+    }
+    onItemsRearranged(value) {
+        const result = splitArrayByCondition(value, e => e === '').filter(arrayIsSetAndFilled);
+        this.setInnerValueAndNotify(result);
+        this.reloader = false;
+        setTimeout(() => {
+            this.items = [...this.items, ''].filter((e, i) => {
+                if (i === 0 && e === '') {
+                    return false;
+                }
+                if (e === '' && this.items[i - 1] === '') {
+                    return false;
+                }
+                return true;
+            });
+            this.reloader = true;
+        });
+    }
+}
+SortableGroupedItemsComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'klp-form-sortable-grouped-items',
+                template: "<ng-container *ngIf=\"reloader\">\n\t<klp-form-sortable-items\n\t\t[(ngModel)]=\"items\"\n\t\t(ngModelChange)=\"onItemsRearranged($event)\"\n\t>\n\t\t<ng-template let-item=\"item\">\n\t\t\t<div>{{item}}</div>\n\t\t</ng-template>\n\t</klp-form-sortable-items>\n</ng-container>\n",
+                providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SortableGroupedItemsComponent, multi: true }],
+                styles: [":host{display:block}"]
+            },] }
+];
+
 class NgxEnhancyFormsModule {
 }
 NgxEnhancyFormsModule.decorators = [
@@ -1405,6 +1512,7 @@ NgxEnhancyFormsModule.decorators = [
                     SelectComponent,
                     SelectFooterComponent,
                     SortableItemsComponent,
+                    SortableGroupedItemsComponent,
                     TextInputComponent,
                     ToggleComponent,
                     FileInputComponent,
@@ -1429,6 +1537,7 @@ NgxEnhancyFormsModule.decorators = [
                     SelectComponent,
                     SelectFooterComponent,
                     SortableItemsComponent,
+                    SortableGroupedItemsComponent,
                     TextInputComponent,
                     ToggleComponent,
                     FileInputComponent,
@@ -1450,5 +1559,5 @@ NgxEnhancyFormsModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonComponent, CheckboxComponent, DATE_PICKER_LOCALE, DATE_PICKER_TRANSLATIONS, DATE_TIME_PICKER_TRANSLATIONS, DEFAULT_ERROR_MESSAGES, DatePickerComponent, DateTimePickerComponent, EmailInputComponent, FORM_ERROR_MESSAGES, FormCaptionComponent, FormComponent, FormElementComponent, FormErrorComponent, FormSubmitButtonComponent, KLP_DATE_FORMATS, LoadingIndicatorComponent, MultipleValueAccessorBase, NgxEnhancyFormsModule, NumberInputComponent, PasswordFieldComponent, SELECT_TRANSLATIONS, SelectComponent, SelectFooterComponent, SortableItemsComponent, SubFormDirective, TextInputComponent, ToggleComponent, ValueAccessorBase, dateValidator, invalidDateKey, invalidFieldsSymbol, matDateFormatsFactory, MaterialModule as ɵa, FileInputComponent as ɵb };
+export { ButtonComponent, CheckboxComponent, DATE_PICKER_LOCALE, DATE_PICKER_TRANSLATIONS, DATE_TIME_PICKER_TRANSLATIONS, DEFAULT_ERROR_MESSAGES, DatePickerComponent, DateTimePickerComponent, EmailInputComponent, FORM_ERROR_MESSAGES, FileInputComponent, FormCaptionComponent, FormComponent, FormElementComponent, FormErrorComponent, FormSubmitButtonComponent, KLP_DATE_FORMATS, LoadingIndicatorComponent, MultipleValueAccessorBase, NgxEnhancyFormsModule, NumberInputComponent, PasswordFieldComponent, SELECT_TRANSLATIONS, SelectComponent, SelectFooterComponent, SortableGroupedItemsComponent, SortableItemsComponent, SubFormDirective, TextInputComponent, ToggleComponent, ValueAccessorBase, dateValidator, invalidDateKey, invalidFieldsSymbol, matDateFormatsFactory, MaterialModule as ɵa };
 //# sourceMappingURL=klippa-ngx-enhancy-forms.js.map