@dereekb/dbx-form 9.16.2 → 9.16.3

package/fesm2020/dereekb-dbx-form.mjs

@@ -26,7 +26,7 @@ import * as i1$2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i3$3 from '@angular/flex-layout/flex';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { objectIsEmpty, mergeObjectsFunction, filterFromPOJOFunction, mergeObjects, filterFromPOJO, asArray, objectHasNoKeys, addPlusPrefixToNumber, convertMaybeToArray, makeValuesGroupMap, findUnique, searchStringFilterFunction, caseInsensitiveFilterByIndexOfDecisionFactory, mergeIntoArray, lastValue, separateValues, arrayToMap, getValueFromGetter, filterMaybeValues, dateFromLogicalDate, WEBSITE_DOMAIN_NAME_REGEX, KeyValueTypleValueFilter, valuesFromPOJO, allObjectsAreEqual, isNumberDivisibleBy, nearestDivisibleValues, transformNumberFunction, concatArrays, transformStringFunction, US_STATE_CODE_STRING_REGEX, ZIP_CODE_STRING_REGEX, LAT_LNG_PATTERN, capitalizeFirstLetter, BooleanStringKeyArrayUtilityInstance } from '@dereekb/util';
+import { objectIsEmpty, mergeObjectsFunction, filterFromPOJOFunction, mergeObjects, filterFromPOJO, asArray, objectHasNoKeys, addPlusPrefixToNumber, convertMaybeToArray, makeValuesGroupMap, findUnique, searchStringFilterFunction, caseInsensitiveFilterByIndexOfDecisionFactory, mergeIntoArray, lastValue, separateValues, arrayToMap, cachedGetter, makeGetter, asDecisionFunction, getValueFromGetter, filterMaybeValues, dateFromLogicalDate, WEBSITE_DOMAIN_NAME_REGEX, KeyValueTypleValueFilter, valuesFromPOJO, allObjectsAreEqual, isNumberDivisibleBy, nearestDivisibleValues, transformNumberFunction, concatArrays, transformStringFunction, US_STATE_CODE_STRING_REGEX, ZIP_CODE_STRING_REGEX, LAT_LNG_PATTERN, capitalizeFirstLetter, BooleanStringKeyArrayUtilityInstance } from '@dereekb/util';
 import * as i2$1 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i2$2 from '@angular/flex-layout/extended';
@@ -2686,12 +2686,30 @@ function textEditorField(config) {
 }
 
 class DbxFormRepeatArrayTypeComponent extends FieldArrayType {
+    constructor() {
+        super(...arguments);
+        this._labelForField = cachedGetter(() => {
+            const input = this.repeatArrayField.labelForField;
+            if (typeof input === 'function') {
+                return input;
+            }
+            else {
+                return makeGetter(input ?? '');
+            }
+        });
+        this._allowRemove = cachedGetter(() => {
+            return asDecisionFunction(this.field.props.allowRemove, true);
+        });
+    }
     get repeatArrayField() {
         return this.field.props;
     }
     get label() {
         return this.field.props.label ?? this.field.key;
     }
+    get description() {
+        return this.field.props.description;
+    }
     get addText() {
         return this.repeatArrayField.addText ?? 'Add';
     }
@@ -2704,7 +2722,24 @@ class DbxFormRepeatArrayTypeComponent extends FieldArrayType {
     get count() {
         return this.field.fieldGroup?.length ?? 0;
     }
-    get canAdd() {
+    get disableRearrange() {
+        return Boolean(this.field.props.disableRearrange);
+    }
+    get allowAdd() {
+        return this.field.props.allowAdd ?? true;
+    }
+    allowRemove(i) {
+        const array = this.model;
+        const value = array[i];
+        return this._allowRemove()({
+            i,
+            value
+        });
+    }
+    get addItemDisabled() {
+        return !this.canAddItem;
+    }
+    get canAddItem() {
         const max = this.max;
         if (max == null) {
             return true;
@@ -2740,64 +2775,70 @@ class DbxFormRepeatArrayTypeComponent extends FieldArrayType {
     drop(event) {
         this.swapIndexes(event.previousIndex, event.currentIndex);
     }
-    labelForItem(field) {
-        return getValueFromGetter(this.repeatArrayField.labelForField ?? '', field);
+    labelForItem(fieldConfig, i) {
+        const array = this.model;
+        const value = array[i];
+        return getValueFromGetter(this._labelForField(), {
+            i,
+            value,
+            fieldConfig
+        });
     }
 }
 DbxFormRepeatArrayTypeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxFormRepeatArrayTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
 DbxFormRepeatArrayTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.2", type: DbxFormRepeatArrayTypeComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div class="dbx-form-repeat-array">
-      <dbx-subsection [header]="label">
+      <dbx-subsection [header]="label" [hint]="description">
         <!-- Fields -->
-        <div class="dbx-form-repeat-array-fields" cdkDropList (cdkDropListDropped)="drop($event)">
+        <div class="dbx-form-repeat-array-fields" cdkDropList [cdkDropListDisabled]="disableRearrange" (cdkDropListDropped)="drop($event)">
           <div class="dbx-form-repeat-array-field" cdkDrag cdkDragLockAxis="y" *ngFor="let field of field.fieldGroup; let i = index; let last = last">
-            <div class="example-custom-placeholder" *cdkDragPlaceholder></div>
-            <dbx-bar>
-              <button cdkDragHandle mat-flat-button><mat-icon>drag_handle</mat-icon></button>
+            <div class="dbx-form-repeat-array-drag-placeholder" *cdkDragPlaceholder></div>
+            <dbx-bar class="dbx-bar-fixed-height">
+              <button *ngIf="!disableRearrange" cdkDragHandle mat-flat-button><mat-icon>drag_handle</mat-icon></button>
               <dbx-button-spacer></dbx-button-spacer>
               <h4>
                 <span class="repeat-array-number">{{ i + 1 }}</span>
-                <span>{{ labelForItem(field) }}</span>
+                <span>{{ labelForItem(field, i) }}</span>
               </h4>
               <span class="dbx-spacer"></span>
-              <button mat-flat-button color="warn" (click)="remove(i)">{{ removeText }}</button>
+              <dbx-button *ngIf="allowRemove(i)" color="warn" [text]="removeText" (buttonClick)="remove(i)"></dbx-button>
             </dbx-bar>
             <formly-field class="dbx-form-repeat-array-field-content" [field]="field"></formly-field>
           </div>
         </div>
         <!-- Add Button -->
         <div class="dbx-form-repeat-array-footer">
-          <button *ngIf="canAdd" mat-raised-button (click)="add()">{{ addText }}</button>
+          <dbx-button *ngIf="allowAdd" [raised]="true" [disabled]="addItemDisabled" [text]="addText" (buttonClick)="add()"></dbx-button>
         </div>
       </dbx-subsection>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4$5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i4$5.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: i1$1.DbxSubSectionComponent, selector: "dbx-subsection" }, { kind: "directive", type: i1$1.DbxBarDirective, selector: "dbx-bar,[dbxBar]", inputs: ["color"] }, { kind: "directive", type: i1$1.DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "component", type: i1$3.FormlyField, selector: "formly-field", inputs: ["field"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4$5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i4$5.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: i1$1.DbxSubSectionComponent, selector: "dbx-subsection" }, { kind: "directive", type: i1$1.DbxBarDirective, selector: "dbx-bar,[dbxBar]", inputs: ["color"] }, { kind: "component", type: i1$1.DbxButtonComponent, selector: "dbx-button", inputs: ["type", "raised", "stroked", "flat", "color", "customButtonColor", "customTextColor", "customSpinnerColor"] }, { kind: "directive", type: i1$1.DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "component", type: i1$3.FormlyField, selector: "formly-field", inputs: ["field"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImport: i0, type: DbxFormRepeatArrayTypeComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
     <div class="dbx-form-repeat-array">
-      <dbx-subsection [header]="label">
+      <dbx-subsection [header]="label" [hint]="description">
         <!-- Fields -->
-        <div class="dbx-form-repeat-array-fields" cdkDropList (cdkDropListDropped)="drop($event)">
+        <div class="dbx-form-repeat-array-fields" cdkDropList [cdkDropListDisabled]="disableRearrange" (cdkDropListDropped)="drop($event)">
           <div class="dbx-form-repeat-array-field" cdkDrag cdkDragLockAxis="y" *ngFor="let field of field.fieldGroup; let i = index; let last = last">
-            <div class="example-custom-placeholder" *cdkDragPlaceholder></div>
-            <dbx-bar>
-              <button cdkDragHandle mat-flat-button><mat-icon>drag_handle</mat-icon></button>
+            <div class="dbx-form-repeat-array-drag-placeholder" *cdkDragPlaceholder></div>
+            <dbx-bar class="dbx-bar-fixed-height">
+              <button *ngIf="!disableRearrange" cdkDragHandle mat-flat-button><mat-icon>drag_handle</mat-icon></button>
               <dbx-button-spacer></dbx-button-spacer>
               <h4>
                 <span class="repeat-array-number">{{ i + 1 }}</span>
-                <span>{{ labelForItem(field) }}</span>
+                <span>{{ labelForItem(field, i) }}</span>
               </h4>
               <span class="dbx-spacer"></span>
-              <button mat-flat-button color="warn" (click)="remove(i)">{{ removeText }}</button>
+              <dbx-button *ngIf="allowRemove(i)" color="warn" [text]="removeText" (buttonClick)="remove(i)"></dbx-button>
             </dbx-bar>
             <formly-field class="dbx-form-repeat-array-field-content" [field]="field"></formly-field>
           </div>
         </div>
         <!-- Add Button -->
         <div class="dbx-form-repeat-array-footer">
-          <button *ngIf="canAdd" mat-raised-button (click)="add()">{{ addText }}</button>
+          <dbx-button *ngIf="allowAdd" [raised]="true" [disabled]="addItemDisabled" [text]="addText" (buttonClick)="add()"></dbx-button>
         </div>
       </dbx-subsection>
     </div>
@@ -2855,15 +2896,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.2", ngImpor
         }] });
 
 function repeatArrayField(config) {
-    const { key, repeatFieldGroup, maxLength, addText, removeText, labelForField } = config;
+    const { key, label, description, repeatFieldGroup, maxLength, addText, removeText, labelForField, disableRearrange, allowAdd, allowRemove } = config;
     return formlyField({
         key,
         type: 'repeatarray',
         ...propsAndConfigForFieldConfig(config, {
+            label,
+            description,
             maxLength,
             labelForField,
             addText,
-            removeText
+            removeText,
+            disableRearrange,
+            allowAdd,
+            allowRemove
         }),
         fieldArray: {
             fieldGroup: asArray(repeatFieldGroup)