feat: added dbxStyleBody

- DbxStyleBody is used to apply the currently configured styling to body
- Updated DbxStyleService to handle configuration concerning which styles are available/appropriate or not

packages/dbx-form/src/_index.scss

@@ -1,4 +1,5 @@
 @use '@angular/material'as mat;
+@use './lib/style/all-theme' as dbx-form-theme;
 
 // Structural
 @forward './lib/style/core'show core;
@@ -9,3 +10,10 @@ get-dbx-form-theme-config;
 
 // Theme bundles
 @forward './lib/style/all-theme'show all-component-themes;
+
+// Create Theme
+@mixin theme($root-selector, $theme-config) {
+  #{$root-selector} {
+    @include dbx-form-theme.all-component-themes($theme-config);
+  }
+}

packages/dbx-form/src/lib/formly/field/selection/generic_TODO.scss

@@ -14,15 +14,6 @@
   }
 }
 
-.form-repeat-section {
-  .form-repeat-section-field {
-    h4 {
-      margin: 0;
-      display: inline;
-    }
-  }
-}
-
 .searchable-field-form-loading {
   margin: -18px;
 }

packages/dbx-form/src/lib/formly/field/value/array/_array.scss

@@ -1,12 +1,59 @@
+@use 'sass:map';
+@use 'sass:color';
 @use '../../../../style/theming';
 
 // MARK: Variables
 
 
 // MARK: Mixin
-@mixin core() {}
+@mixin core() {
 
-@mixin color($theme-config) {}
+  .example-custom-placeholder {
+    background: #ccc;
+    border: dotted 3px #999;
+    min-height: 100px;
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  }
+
+  .dbx-form-repeat-array {
+    .dbx-form-repeat-array-field {
+
+      @include theming.elevation(1);
+
+      h4 {
+        margin: 0;
+        display: inline;
+
+        .repeat-array-number {
+          margin-right: 4px;
+        }
+      }
+
+      padding: 0;
+      margin-bottom: 2px;
+      // border: 1px solid rgba(0, 0, 0, 0.04);
+
+      .dbx-form-repeat-array-field-content {
+        display: block;
+        padding: 6px;
+      }
+    }
+  }
+
+}
+
+@mixin color($theme-config) {
+  $color-config: theming.get-color-config($theme-config);
+  $background: map.get($color-config, 'background');
+
+  $form-repeat-array-field-bg: theming.get-color-from-palette($background, 'card');
+
+  .dbx-form-repeat-array-field {
+    background: $form-repeat-array-field-bg;
+    border: 4px solid $form-repeat-array-field-bg;
+  }
+
+}
 
 @mixin typography($typography-config) {}
 

packages/dbx-form/src/lib/formly/field/value/array/array.field.component.ts

@@ -1,49 +1,56 @@
+import { CdkDragDrop } from '@angular/cdk/drag-drop';
 import { Component } from '@angular/core';
-import { Maybe } from '@dereekb/util';
-import { FieldArrayType, FormlyTemplateOptions } from '@ngx-formly/core';
+import { GetterWithInput, getValueFromObjectOrGetter, Maybe } from '@dereekb/util';
+import { FieldArrayTypeConfig, FieldArrayType, FormlyTemplateOptions, FormlyFieldConfig } from '@ngx-formly/core';
 
-export interface FormRepeatSectionConfig {
-  itemLabel?: string;
+export interface DbxFormRepeatArrayConfig {
+  labelForField?: string | GetterWithInput<string, FormlyFieldConfig>;
   addText?: string;
   removeText?: string;
 }
 
-export interface FormRepeatTypeTemplateOptions extends FormlyTemplateOptions, FormRepeatSectionConfig {
-  repeatSection?: FormRepeatSectionConfig;
+export interface DbxFormRepeatArrayTemplateOptions extends FormlyTemplateOptions, DbxFormRepeatArrayConfig {
+  repeatSection: DbxFormRepeatArrayConfig;
+}
+
+export interface DbxFormRepeatArrayFormlyConfig extends FieldArrayTypeConfig {
+  templateOptions: DbxFormRepeatArrayTemplateOptions;
 }
 
 @Component({
   template: `
-    <div class="form-repeat-section">
-      <!-- Fields -->
-      <div class="form-repeat-section-fields">
-        <ng-container *ngFor="let field of field.fieldGroup; let i = index; let last = last;">
-          <div class="form-repeat-section-field">
-            <div>
-              <h4><span>{{ itemLabel }}</span><span>{{ i + 1 }}</span></h4>
-              <dbx-button-spacer></dbx-button-spacer>
-              <button mat-button color="warn" (click)="remove(i)">{{ removeText }}</button>
+    <div class="dbx-form-repeat-array">
+      <dbx-subsection [header]="label">
+        <!-- Fields -->
+        <div class="dbx-form-repeat-array-fields" cdkDropList (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>
+                <dbx-button-spacer></dbx-button-spacer>
+                <h4><span class="repeat-array-number">{{ i + 1 }}</span><span>{{ labelForItem(field) }}</span></h4>
+                <span class="dbx-spacer"></span>
+                <button mat-flat-button color="warn" (click)="remove(i)">{{ removeText }}</button>
+              </dbx-bar>
+              <formly-field class="dbx-form-repeat-array-field-content" [field]="field"></formly-field>
             </div>
-            <formly-field [field]="field"></formly-field>
-          </div>
-          <mat-divider [inset]="true" *ngIf="!last"></mat-divider>
-        </ng-container>
-      </div>
-      <!-- Add Button -->
-      <div class="form-repeat-section-footer">
-        <button *ngIf="canAdd" mat-button (click)="add()">{{ addText }}</button>
-      </div>
+        </div>
+        <!-- Add Button -->
+        <div class="dbx-form-repeat-array-footer">
+          <button *ngIf="canAdd" mat-raised-button (click)="add()">{{ addText }}</button>
+        </div>
+      </dbx-subsection>
     </div>
   `
 })
-export class DbxFormRepeatTypeComponent extends FieldArrayType {
+export class DbxFormRepeatArrayTypeComponent extends FieldArrayType<DbxFormRepeatArrayFormlyConfig>{
 
-  get repeatSection(): FormRepeatSectionConfig {
-    return (this.to as FormRepeatTypeTemplateOptions).repeatSection ?? {};
+  get repeatSection(): DbxFormRepeatArrayConfig {
+    return this.to.repeatSection;
   }
 
-  get itemLabel(): string {
-    return this.repeatSection.itemLabel ?? '#';
+  get label(): string {
+    return this.field.templateOptions.label ?? this.field.key as string;
   }
 
   get addText(): string {
@@ -72,4 +79,41 @@ export class DbxFormRepeatTypeComponent extends FieldArrayType {
     }
   }
 
+  /**
+   * Moves the target index up one value.
+   * 
+   * @param index 
+   */
+  moveUp(index: number) {
+    if (index === 0) {
+      return;
+    }
+
+    this.swapIndexes(index, index - 1);
+  }
+
+  moveDown(index: number) {
+    this.swapIndexes(index, index + 1);
+  }
+
+  swapIndexes(currentIndex: number, targetIndex: number) {
+    const array: any[] = this.model;
+    const targetValue = array[currentIndex];
+
+    if (!targetValue) {
+      return;
+    }
+
+    this.remove(currentIndex);
+    this.add(targetIndex, targetValue);
+  }
+
+  drop(event: CdkDragDrop<any>) {
+    this.swapIndexes(event.previousIndex, event.currentIndex);
+  }
+
+  labelForItem(field: FormlyFieldConfig): string {
+    return getValueFromObjectOrGetter(this.repeatSection.labelForField ?? '', field);
+  }
+
 }

packages/dbx-form/src/lib/formly/field/value/array/array.field.module.ts

@@ -1,27 +1,35 @@
+import { MatIconModule } from '@angular/material/icon';
 import { MatDividerModule } from '@angular/material/divider';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { FormlyModule } from '@ngx-formly/core';
-import { DbxFormRepeatTypeComponent } from './array.field.component';
-import { DbxButtonModule } from '@dereekb/dbx-web';
+import { DbxFormRepeatArrayTypeComponent } from './array.field.component';
+import { DbxButtonModule, DbxSectionLayoutModule, DbxBarLayoutModule } from '@dereekb/dbx-web';
+import { MatButtonModule } from '@angular/material/button';
+import { DragDropModule } from '@angular/cdk/drag-drop';
 
 @NgModule({
   imports: [
     CommonModule,
     MatFormFieldModule,
     ReactiveFormsModule,
     MatDividerModule,
+    MatButtonModule,
+    MatIconModule,
+    DragDropModule,
+    DbxSectionLayoutModule,
+    DbxBarLayoutModule,
     DbxButtonModule,
     FormlyModule.forChild({
       types: [
-        { name: 'repeat', component: DbxFormRepeatTypeComponent }
+        { name: 'repeatarray', component: DbxFormRepeatArrayTypeComponent }
       ]
     })
   ],
   declarations: [
-    DbxFormRepeatTypeComponent
+    DbxFormRepeatArrayTypeComponent
   ],
   exports: []
 })

packages/dbx-form/src/lib/formly/field/value/array/array.field.ts

@@ -0,0 +1,29 @@
+import { FormlyFieldConfig } from '@ngx-formly/core';
+import { FieldConfig } from "../../field";
+import { DbxFormRepeatArrayConfig } from './array.field.component';
+
+export interface RepeatArrayFieldConfig extends DbxFormRepeatArrayConfig, FieldConfig {
+  label?: string;
+  repeatFieldGroup: FormlyFieldConfig[];
+  maxLength?: number;
+}
+
+export function repeatArrayField({ key, label, required = false, repeatFieldGroup, maxLength, addText, removeText, labelForField }: RepeatArrayFieldConfig): FormlyFieldConfig {
+  return {
+    key,
+    type: 'repeatarray',
+    templateOptions: {
+      label,
+      required,
+      repeatSection: {
+        labelForField,
+        addText,
+        removeText,
+      },
+      maxLength
+    },
+    fieldArray: {
+      fieldGroup: repeatFieldGroup
+    }
+  };
+}

packages/dbx-form/src/lib/formly/field/value/array/index.ts

@@ -1,2 +1,3 @@
 export * from './array.field.component';
 export * from './array.field.module';
+export * from './array.field';

packages/dbx-form/src/lib/formly/field/value/phone/phone.field.ts

@@ -54,7 +54,7 @@ export interface PhoneAndLabelFieldGroupConfig extends PhoneFormlyFieldsConfig {
   required?: boolean;
 }
 
-export function phoneAndLabelFieldGroup({ key = 'phone', label = 'Phone Number', required, phoneField, labelField }: PhoneAndLabelFieldGroupConfig): FormlyFieldConfig {
+export function phoneAndLabelFieldGroup({ key = 'phone', label = 'Phone Number', required = false, phoneField, labelField }: PhoneAndLabelFieldGroupConfig = {}): FormlyFieldConfig {
   return {
     key,
     wrappers: ['section'],
@@ -74,7 +74,7 @@ export interface PhoneListFieldConfig extends PhoneAndLabelFieldGroupConfig {
   }
 }
 
-export function phoneListField({ key = 'phones', label = 'Phone Numbers', repeatSection, required = false, maxPhones = 6, phoneField, labelField }: PhoneListFieldConfig): FormlyFieldConfig {
+export function phoneListField({ key = 'phones', label = 'Phone Numbers', repeatSection, required = false, maxPhones = 6, phoneField, labelField }: PhoneListFieldConfig = {}): FormlyFieldConfig {
   return {
     key,
     type: 'repeat',

packages/dbx-form/src/lib/formly/field/value/text/text.address.field.ts

@@ -3,6 +3,7 @@ import { textField } from './text.field';
 import { cityField, countryField, stateField, zipCodeField } from './text.additional.field';
 import { flexLayoutWrapper } from '../../wrapper/wrapper';
 import { FieldConfig } from '../../field';
+import { repeatArrayField } from '..';
 
 export const ADDRESS_LINE_MAX_LENGTH = 100;
 
@@ -56,22 +57,13 @@ export interface AddressListFieldConfig extends FieldConfig {
 }
 
 export function addressListField({ key = 'addresses', required = false, maxAddresses = 6 }: Partial<AddressListFieldConfig> = {}): FormlyFieldConfig {
-  return {
+  return repeatArrayField({
     key,
-    type: 'repeat',
-    wrappers: ['section'],
-    templateOptions: {
-      label: 'Addresses',
-      placeholder: '',
-      required,
-      repeatSection: {
-        addText: 'Add Address',
-        removeText: 'Remove Address'
-      },
-      maxLength: maxAddresses
-    },
-    fieldArray: {
-      fieldGroup: addressFormlyFields()
-    }
-  };
+    label: 'Addresses',
+    labelForField: 'Address',
+    addText: 'Add Address',
+    removeText: 'Remove Address',
+    maxLength: maxAddresses,
+    repeatFieldGroup: addressFormlyFields()
+  });
 }

packages/dbx-web/src/lib/button/button.module.ts

@@ -1,6 +1,4 @@
-import { MatIconModule } from '@angular/material/icon';
 import { NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
 import { MatProgressButtonsModule } from 'mat-progress-buttons';
 import { DbxButtonComponent } from './button.component';
 import { DbxButtonSpacerComponent } from './button.spacer.component';
@@ -9,15 +7,14 @@ import { CommonModule } from '@angular/common';
 @NgModule({
   imports: [
     CommonModule,
-    MatIconModule,
-    MatButtonModule,
     MatProgressButtonsModule
   ],
   declarations: [
     DbxButtonComponent,
     DbxButtonSpacerComponent
   ],
   exports: [
+    MatProgressButtonsModule,
     DbxButtonComponent,
     DbxButtonSpacerComponent
   ],

packages/dbx-web/src/lib/layout/bar/_bar.scss

@@ -19,7 +19,6 @@ $bar-vertical-padding: theming.$padding-1;
   }
 
   .dbx-bar {
-    height: 100%;
     box-sizing: border-box;
     padding: $bar-vertical-padding;
     display: flex;

packages/dbx-web/src/lib/layout/flex/_flex.scss

@@ -16,7 +16,7 @@ $dbx-flex-group-columns-count: 6;
 
     // padding: $dbx-flex-group-padding;
     margin: 0 #{-$dbx-flex-group-padding} #{-$dbx-flex-group-padding} 0;
-    padding: $dbx-flex-group-padding $dbx-flex-group-padding 0;
+    // padding: 0 $dbx-flex-group-padding $dbx-flex-group-padding 0;
 
     >* {
       box-sizing: border-box;

packages/dbx-web/src/lib/layout/style/index.ts

@@ -3,3 +3,4 @@ export * from './spacer.directive';
 export * from './style.directive';
 export * from './style.service';
 export * from './style.set.directive';
+export * from './style.body.directive';