@dereekb/dbx-form 13.7.0 → 13.9.0

package/lib/forge/_forge.scss

@@ -0,0 +1,14 @@
+@use './style/shared';
+@use './preset/preset';
+@use './field/field';
+
+@mixin all-forge-core() {
+  @include shared.core();
+  @include preset.core();
+  @include field.all-field-core();
+}
+
+@mixin all-forge-theme($theme-config) {
+  @include preset.theme($theme-config);
+  @include field.all-field-theme($theme-config);
+}

package/lib/forge/field/_field.scss

@@ -0,0 +1,12 @@
+@use './selection/selection';
+@use './wrapper/wrapper';
+
+@mixin all-field-core() {
+  @include selection.all-selection-core();
+  @include wrapper.core();
+}
+
+@mixin all-field-theme($theme-config) {
+  @include selection.all-selection-theme($theme-config);
+  @include wrapper.theme($theme-config);
+}

package/lib/forge/field/selection/_selection.scss

@@ -0,0 +1,18 @@
+@use './list/list';
+@use './pickable/pickable';
+@use './searchable/searchable';
+@use './sourceselect/sourceselect';
+
+@mixin all-selection-core() {
+  @include list.core();
+  @include pickable.core();
+  @include searchable.core();
+  @include sourceselect.core();
+}
+
+@mixin all-selection-theme($theme-config) {
+  @include list.theme($theme-config);
+  @include pickable.theme($theme-config);
+  @include searchable.theme($theme-config);
+  @include sourceselect.theme($theme-config);
+}

package/lib/forge/field/selection/list/_list.scss

@@ -0,0 +1,17 @@
+// MARK: Variables
+$default-dbx-forge-list-item-field-height: 300px;
+
+// MARK: Mixin
+@mixin core() {
+  .dbx-forge-list-item-field {
+    max-height: var(--dbx-forge-list-item-field-height, $default-dbx-forge-list-item-field-height);
+    overflow: auto;
+  }
+
+  .dbx-forge-list-field-disabled {
+    --mat-list-list-item-disabled-label-text-opacity: 1; // the forge disabled state already applies an opacity
+  }
+}
+
+@mixin theme($theme-config) {
+}

package/lib/forge/field/selection/pickable/_pickable.scss

@@ -0,0 +1,36 @@
+// MARK: Mixin
+@mixin core() {
+  // Container margin and chip list max-height are defined in formly's _pickable.scss
+  // and apply to both formly and forge contexts (same class names).
+  //
+  // Bare input styling is provided by the .dbx-forge-bare-input class
+  // applied directly in the pickable templates.
+
+  // List variant styling
+  .dbx-pickable-item-field-list {
+    .dbx-pickable-item-field-list-content {
+      max-height: 300px;
+      overflow-y: auto;
+    }
+
+    .dbx-pickable-item-field-select-all {
+      padding: 4px 0;
+    }
+
+    .dbx-pickable-select-all-button {
+      background: none;
+      border: none;
+      cursor: pointer;
+      padding: 4px 16px;
+      font-size: 0.875rem;
+      color: var(--mat-sys-primary, inherit);
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+@mixin theme($theme-config) {
+}

package/lib/forge/field/selection/searchable/_searchable.scss

@@ -0,0 +1,34 @@
+@mixin core() {
+  dbx-forge-searchable-text-field,
+  dbx-forge-searchable-chip-field {
+    display: block;
+    width: 100%;
+  }
+
+  .dbx-searchable-field {
+    width: 100%;
+
+    > .dbx-searchable-text-field-input,
+    > .dbx-searchable-chip-field-input {
+      width: 100%;
+    }
+  }
+
+  // Bare input styling is provided by the .dbx-forge-bare-input class
+  // applied directly in the searchable templates.
+  //
+  // The show/hide pattern (.dbx-searchable-text-field-has-value) and
+  // .dbx-searchable-text-field-value width are defined in formly's _searchable.scss
+  // and apply to both formly and forge contexts (same class names).
+
+  // Reveal the search input when the ancestor form-field wrapper has focus.
+  // The forge wrapper uses :focus-within instead of the .mat-focused class.
+  .dbx-forge-form-field-wrapper:focus-within .dbx-searchable-text-field-has-value.dbx-searchable-text-field-show-value .dbx-searchable-text-field-input {
+    margin-top: 8px;
+    opacity: unset;
+    height: unset;
+  }
+}
+
+@mixin theme($theme-config) {
+}

package/lib/forge/field/selection/sourceselect/_sourceselect.scss

@@ -0,0 +1,30 @@
+// MARK: Mixin
+@mixin core() {
+  .dbx-source-select-field-loading {
+    position: absolute;
+    bottom: 5px;
+    left: 0px;
+    right: 0px;
+    overflow: hidden;
+    border-radius: 999px;
+  }
+
+  dbx-forge-source-select-field {
+    display: block;
+    width: 100%;
+
+    // mat-form-field needs relative positioning for the loading bar
+    .mat-mdc-form-field {
+      position: relative;
+    }
+
+    // Suffix button styling inside mat-form-field
+    .dbx-source-select-field-suffix {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+
+@mixin theme($theme-config) {
+}

package/lib/forge/field/wrapper/_wrapper.scss

@@ -0,0 +1,72 @@
+@use '../../../style/theming';
+
+// MARK: Variables
+$dbx-forge-form-field-slider-thumb-margin: 22px;
+
+// MARK: Mixin
+@mixin core() {
+  // Forge form-field wrapper: suppress child field label/hint/error inside the wrapper.
+  // The wrapper provides its own label (notched outline), hint, and error subscript.
+  dbx-forge-form-field-wrapper {
+    .slider-label,
+    mat-error,
+    [matError],
+    .mat-hint,
+    .df-mat-error,
+    .df-mat-hint {
+      display: none !important;
+    }
+  }
+
+  // Slider margin fix for the form-field wrapper (mirrors the formly number slider fix).
+  // Adds margin so the slider thumb doesn't overlap the outlined border.
+  dbx-forge-form-field-wrapper .mat-mdc-slider {
+    margin: $dbx-forge-form-field-slider-thumb-margin $dbx-forge-form-field-slider-thumb-margin 0;
+    width: calc(100% - #{$dbx-forge-form-field-slider-thumb-margin * 2}) !important;
+  }
+
+  // List selection field inside the form-field wrapper: reduce padding so the list
+  // items render at full width within the outlined border. Uses !important to
+  // override the component's scoped inline styles (ViewEncapsulation.Emulated
+  // adds attribute selectors that raise specificity above global rules).
+  dbx-forge-form-field-wrapper .dbx-forge-form-field-content:has(dbx-forge-list-selection-field) {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    padding-bottom: 0 !important;
+  }
+
+  // The wrapper's mat-mdc-form-field host class causes Angular Material's
+  // form-field line-height (24px) and letter-spacing (0.496px) to cascade
+  // into all descendants. For list selection fields this distorts the list
+  // item layout. Reset typography on the list field element so descendant
+  // components inherit normal values instead of the form-field overrides.
+  dbx-forge-form-field-wrapper dbx-forge-list-selection-field {
+    display: block;
+    line-height: normal;
+    letter-spacing: normal;
+  }
+
+  // Shared working bar spacing used by both the working field and working wrapper field.
+  .dbx-forge-working-bar {
+    margin-top: 4px;
+  }
+
+  // Flex layout wrapper: ng-forge's GroupFieldComponent applies `display: grid`
+  // and `gap: var(--df-grid-row-gap)` via :host styling (scoped attribute selector).
+  // Override both when our `dbx-flex-group` class is present so the flex sizing
+  // classes work. The dbx-flex-N children use padding for spacing instead of gap.
+  .df-group.dbx-flex-group {
+    display: flex !important;
+    flex-wrap: wrap;
+    gap: 0 !important;
+  }
+
+  .dbx-form-repeat-array-field {
+    .dbx-form-repeat-array-bar .dbx-chip {
+      margin-right: 3px;
+    }
+  }
+}
+
+@mixin theme($theme-config) {
+}

package/lib/{formly/form/_form.scss → forge/preset/_preset.scss}

@@ -6,18 +6,9 @@
 @mixin core() {
   .dbx-form-search-form {
     width: 100%;
-  }
-
-  // adapt the search form to fit in the header
-  // TODO: Consider test that other one-field input forms fit in the dbx-section-page-header
-  .dbx-section-page-header-search-form {
-    .mat-mdc-form-field .mat-mdc-form-field-wrapper {
-      margin: 0;
-      padding: 0;
 
-      .mat-mdc-form-field-infix {
-        padding: 11px;
-      }
+    .mat-mdc-notch-piece.mdc-notched-outline__notch {
+      width: 100%;
     }
   }
 
@@ -26,7 +17,7 @@
     display: flex;
     align-items: center;
 
-    .dbx-formly {
+    .dbx-forge {
       width: 100%;
     }
 

package/lib/forge/style/_shared.scss

@@ -0,0 +1,36 @@
+// Bare input class for forge fields rendered outside <mat-form-field>.
+// Resets the native input and applies Material body-large typography so
+// inputs inside the forge wrapper match their formly/mat-form-field counterparts.
+//
+// Apply by adding the class directly to <input> elements in forge templates.
+@mixin core() {
+  // Resets native <input> elements that render inside the forge form-field wrapper
+  // (outside a <mat-form-field>) so they match Material body-large typography.
+  // Used by pickable filter inputs and searchable text/chip field inputs.
+  input.dbx-forge-bare-input {
+    border: none;
+    outline: none;
+    width: 100%;
+    background: transparent;
+    font-family: var(--mat-sys-body-large-font);
+    font-size: var(--mat-sys-body-large-size);
+    line-height: var(--mat-sys-body-large-line-height);
+    letter-spacing: var(--mat-sys-body-large-tracking);
+    padding: 5px 0 3px;
+
+    &::placeholder {
+      color: var(--mat-sys-on-surface-variant);
+    }
+  }
+
+  .dbx-forge {
+    // pushes icons in fields like dbxForgeDateTimeField() away from the edge
+    .mat-mdc-form-field-icon-prefix {
+      padding-left: 4px;
+    }
+
+    .mat-mdc-form-field-icon-suffix {
+      padding-right: 4px;
+    }
+  }
+}

package/lib/form/_form.scss

@@ -4,6 +4,115 @@
 
 // MARK: Mixin
 @mixin core() {
+  // Forge styled box: outlined box around fields that don't use mat-form-field (checkbox, toggle, slider).
+  // Mirrors the Material outlined form-field appearance (border-radius, padding, min-height, hint styling).
+  .dbx-forge-styled-box {
+    mat-checkbox,
+    mat-slide-toggle {
+      border: 1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, 0.38)));
+      border-radius: var(--mdc-outlined-text-field-container-shape, 8px);
+      padding: 0 16px;
+      display: block;
+
+      &:hover {
+        border-color: var(--mdc-outlined-text-field-hover-outline-color, var(--mat-sys-on-surface, rgba(0, 0, 0, 0.87)));
+      }
+    }
+
+    mat-checkbox,
+    mat-slide-toggle {
+      .mdc-form-field {
+        width: 100%;
+
+        .mdc-label {
+          user-select: none;
+          width: 100%;
+          min-height: 56px;
+          display: inline-flex;
+          align-items: center;
+          padding-top: 6px;
+          padding-bottom: 6px;
+        }
+      }
+    }
+
+    // Style the hint to match Material's .mat-mdc-form-field-subscript-wrapper / .mat-mdc-form-field-bottom-align / .mat-mdc-form-field-hint-wrapper.
+    // We can't add those classes directly since ng-forge renders the element, so we mirror their styles.
+    .mat-hint {
+      display: block;
+      padding: 0 16px;
+      -moz-osx-font-smoothing: grayscale;
+      -webkit-font-smoothing: antialiased;
+      font-family: var(--mat-form-field-subscript-text-font, var(--mat-sys-body-small-font));
+      line-height: var(--mat-form-field-subscript-text-line-height, var(--mat-sys-body-small-line-height));
+      font-size: var(--mat-form-field-subscript-text-size, var(--mat-sys-body-small-size));
+      letter-spacing: var(--mat-form-field-subscript-text-tracking, var(--mat-sys-body-small-tracking));
+      font-weight: var(--mat-form-field-subscript-text-weight, var(--mat-sys-body-small-weight));
+      color: var(--mat-form-field-subscript-text-color, var(--mat-sys-on-surface-variant, rgba(0, 0, 0, 0.6)));
+
+      // Matches .mat-mdc-form-field-bottom-align::before spacing
+      &::before {
+        content: '';
+        display: inline-block;
+        height: 16px;
+      }
+    }
+  }
+
+  // Generic forge disabled class for fields that only need CSS-based disabling.
+  .dbx-forge-disabled {
+    opacity: 0.38;
+    pointer-events: none;
+    --mat-list-list-item-disabled-label-text-opacity: unset;
+  }
+
+  // Form-level disabled state: disables all interactive elements inside a forge form.
+  // Applied to <dbx-forge> host when the form is disabled. This handles built-in ng-forge
+  // material fields (input, textarea, select, datepicker, toggle, checkbox) that don't
+  // have custom disabled propagation. Custom forge field components additionally use
+  // inject(FORM_OPTIONS) for programmatic disabled handling (e.g. disabling FormControls).
+  .dbx-forge-form-disabled {
+    // Disable pointer events on all standard interactive elements
+    input,
+    textarea,
+    select,
+    button,
+    mat-select,
+    mat-slider,
+    mat-checkbox,
+    mat-slide-toggle,
+    mat-chip-listbox,
+    mat-chip-grid,
+    .mat-mdc-form-field {
+      pointer-events: none;
+    }
+
+    // Reduce opacity on form fields to indicate disabled state
+    .mat-mdc-form-field,
+    .dbx-forge-styled-box {
+      opacity: 0.38;
+    }
+
+    // Reduce opacity on hint/description/error elements that render outside mat-form-field.
+    // These custom forge field components render subscript text (hints, errors, descriptions)
+    // as siblings beside their mat-form-field containers, so the rule above does not reach them.
+    .dbx-forge-datetime-hint,
+    .dbx-forge-datetime-error,
+    .dbx-forge-datetime-desc,
+    .dbx-forge-daterange-field > mat-hint,
+    .dbx-forge-daterange-field > mat-error,
+    .dbx-form-repeat-array-bar,
+    .dbx-form-repeat-array-footer {
+      opacity: 0.38;
+    }
+
+    // The expand trigger has no mat-form-field wrapping and needs both visual
+    // and interaction disabling.
+    dbx-forge-expand-field {
+      opacity: 0.38;
+      pointer-events: none;
+    }
+  }
 }
 
 @mixin theme($theme-config) {

package/lib/formly/field/selection/sourceselect/_sourceselect.scss

@@ -4,13 +4,6 @@
 
 // MARK: Mixin
 @mixin core() {
-  .dbx-source-select-field-loading {
-    position: absolute;
-    bottom: 0px;
-    left: -16px;
-    right: -16px;
-  }
-
   .dbx-source-select-field-content {
     display: flex;
 

package/lib/formly/field/texteditor/_texteditor.scss

@@ -56,6 +56,14 @@
       color: var(--mat-sys-on-surface);
     }
   }
+
+  .dbx-texteditor-field-disabled {
+    .dbx-texteditor-field-input,
+    .dbx-texteditor-field-menu {
+      opacity: 0.38;
+      pointer-events: none;
+    }
+  }
 }
 
 @mixin theme($theme-config) {

package/lib/formly/field/value/array/_array.scss

@@ -9,6 +9,12 @@
     border: dotted 3px #999;
     min-height: 100px;
     transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+
+    // Hide the placeholder by default; CDK adds .cdk-drag-placeholder
+    // when it activates the element during a drag operation.
+    &:not(.cdk-drag-placeholder) {
+      display: none;
+    }
   }
 
   .dbx-form-repeat-array {

package/lib/formly/field/value/phone/_phone.scss

@@ -1,6 +1,8 @@
 @use '../../../../style/theming';
 
 // MARK: Variables
+$extension-input-width: 40px !default;
+$country-selector-width: 85px !default;
 
 // MARK: Mixin
 @mixin core() {
@@ -12,7 +14,7 @@
 
   .dbx-form-phone-field-phone-content button.country-selector {
     opacity: 100;
-    width: 105px;
+    width: var(--dbx-phone-field-country-selector-width, #{$country-selector-width});
   }
 
   .dbx-form-phone-field .ngx-mat-tel-input-container input:not(.country-search) {
@@ -27,6 +29,7 @@
   }
 
   .dbx-form-phone-field-extension-input {
+    width: var(--dbx-phone-field-extension-input-width, #{$extension-input-width});
     border: 0;
     border-bottom: 1px solid var(--mat-sys-outline);
     background: none;

package/lib/style/_all-core.scss

@@ -2,7 +2,7 @@
 @use '../formly/formly';
 @use '../layout/layout';
 @use '../formly/field/field';
-@use '../formly/form/form' as forms;
+@use '../forge/forge';
 @use '../extension/extension';
 
 // Includes all theming config
@@ -10,7 +10,7 @@
   @include form.core();
   @include formly.core();
   @include field.all-field-core();
-  @include forms.core();
+  @include forge.all-forge-core();
   @include layout.core();
   @include extension.all-extension-core($theme-config);
 }

package/lib/style/_all-theme.scss

@@ -2,7 +2,7 @@
 @use '../formly/formly';
 @use '../layout/layout';
 @use '../formly/field/field';
-@use '../formly/form/form' as forms;
+@use '../forge/forge';
 @use '../extension/extension';
 
 // Includes all theming config
@@ -10,7 +10,7 @@
   @include form.theme($theme-config);
   @include formly.theme($theme-config);
   @include field.all-field-theme($theme-config);
-  @include forms.theme($theme-config);
+  @include forge.all-forge-theme($theme-config);
   @include layout.theme($theme-config);
   @include extension.all-extension-theme($theme-config);
 }

package/lib/style/_all-typography.scss

@@ -3,7 +3,7 @@
 @use '../formly/formly';
 @use '../layout/layout';
 @use '../formly/field/field';
-@use '../formly/form/form' as forms;
+@use '../forge/forge';
 @use '../extension/extension';
 
 // Includes all of the typographic styles.

package/package.json

@@ -1,22 +1,24 @@
 {
   "name": "@dereekb/dbx-form",
-  "version": "13.7.0",
+  "version": "13.9.0",
   "peerDependencies": {
-    "@angular/cdk": "21.2.3",
-    "@angular/common": "21.2.3",
-    "@angular/core": "21.2.3",
-    "@angular/forms": "21.2.3",
-    "@angular/material": "21.2.3",
+    "@angular/cdk": "^21.2.3",
+    "@angular/common": "21.2.4",
+    "@angular/core": "21.2.4",
+    "@angular/forms": "21.2.4",
+    "@angular/material": "^21.2.3",
     "@angular/material-date-fns-adapter": "21.2.3",
-    "@angular/platform-browser": "21.2.3",
+    "@angular/platform-browser": "21.2.4",
     "@bobbyquantum/ngx-editor": "21.0.0",
-    "@dereekb/date": "13.7.0",
-    "@dereekb/dbx-core": "13.7.0",
-    "@dereekb/dbx-web": "13.7.0",
-    "@dereekb/model": "13.7.0",
-    "@dereekb/rxjs": "13.7.0",
-    "@dereekb/util": "13.7.0",
-    "@dereekb/vitest": "13.7.0",
+    "@dereekb/date": "13.9.0",
+    "@dereekb/dbx-core": "13.9.0",
+    "@dereekb/dbx-web": "13.9.0",
+    "@dereekb/model": "13.9.0",
+    "@dereekb/rxjs": "13.9.0",
+    "@dereekb/util": "13.9.0",
+    "@dereekb/vitest": "13.9.0",
+    "@ng-forge/dynamic-forms": "0.8.0-next.2",
+    "@ng-forge/dynamic-forms-material": "0.8.0-next.2",
     "@ng-web-apis/geolocation": "^5.1.0",
     "@ngbracket/ngx-layout": "^21.0.0",
     "@ngrx/component-store": "^21.0.0",