@klippa/ngx-enhancy-forms 7.3.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:
@@ -1408,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 = [
@@ -1433,6 +1512,7 @@ NgxEnhancyFormsModule.decorators = [
                     SelectComponent,
                     SelectFooterComponent,
                     SortableItemsComponent,
+                    SortableGroupedItemsComponent,
                     TextInputComponent,
                     ToggleComponent,
                     FileInputComponent,
@@ -1457,6 +1537,7 @@ NgxEnhancyFormsModule.decorators = [
                     SelectComponent,
                     SelectFooterComponent,
                     SortableItemsComponent,
+                    SortableGroupedItemsComponent,
                     TextInputComponent,
                     ToggleComponent,
                     FileInputComponent,
@@ -1478,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, FileInputComponent, 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 };
+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