@dereekb/dbx-form 13.6.17 → 13.8.0

package/lib/forge/field/_field.scss

@@ -0,0 +1,14 @@
+@use './selection/selection';
+@use './wrapper/wrapper';
+@use '../style/shared';
+
+@mixin all-field-core() {
+  @include shared.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,15 @@
+@use './pickable/pickable';
+@use './searchable/searchable';
+@use './sourceselect/sourceselect';
+
+@mixin all-selection-core() {
+  @include pickable.core();
+  @include searchable.core();
+  @include sourceselect.core();
+}
+
+@mixin all-selection-theme($theme-config) {
+  @include pickable.theme($theme-config);
+  @include searchable.theme($theme-config);
+  @include sourceselect.theme($theme-config);
+}

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

@@ -0,0 +1,11 @@
+// MARK: Mixin
+@mixin core() {
+  // Container margin and 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.
+}
+
+@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,46 @@
+// MARK: Mixin
+@mixin core() {
+  // The forge source select renders inside the forgeFormFieldWrapper content area.
+  // The wrapper provides padding and the outlined border. Override the shared formly
+  // styles that were designed for the mat-form-field context.
+  dbx-forge-source-select-field {
+    // Position the loading bar at the very bottom of the wrapper outline
+    // by stretching the field container to fill the wrapper content area.
+    .dbx-source-select-field {
+      position: relative;
+      // Negate the wrapper's content padding so the field fills edge-to-edge,
+      // allowing the loading bar to sit at the bottom of the outline.
+      margin: calc(-1 * var(--mat-form-field-container-vertical-padding, 16px)) -16px -8px;
+      padding: var(--mat-form-field-container-vertical-padding, 16px) 16px 8px;
+      overflow: hidden;
+      border-radius: var(--mdc-outlined-text-field-container-shape, 8px);
+    }
+
+    .dbx-source-select-field-loading {
+      left: 1px;
+      right: 1px;
+      bottom: 1px;
+    }
+
+    // Override formly button styles that were tuned for the mat-form-field context.
+    // In the forge wrapper, the button sits inside the outline alongside the select.
+    .dbx-source-select-field-select {
+      flex: 1;
+    }
+
+    .mat-mdc-select {
+      display: inline-flex;
+    }
+
+    .dbx-source-select-field-content .dbx-source-select-field-button {
+      margin-top: 0;
+      height: auto;
+      overflow: visible;
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+
+@mixin theme($theme-config) {
+}

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

@@ -0,0 +1,62 @@
+@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;
+  }
+
+  // When a child field shows an inline error (e.g. searchable chip input validation),
+  // hide the wrapper's subscript hint so the error effectively replaces it.
+  dbx-forge-form-field-wrapper:has(.dbx-chip-input-error) .mat-mdc-form-field-hint-wrapper {
+    display: none;
+  }
+
+  // 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;
+  }
+}
+
+@mixin theme($theme-config) {
+}

package/lib/forge/style/_shared.scss

@@ -0,0 +1,26 @@
+// 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.
+  .dbx-forge-bare-input {
+    border: none;
+    outline: none;
+    width: 100%;
+    background: transparent;
+    color: var(--mat-sys-on-surface);
+    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: 4px 0;
+
+    &::placeholder {
+      color: var(--mat-sys-on-surface-variant);
+    }
+  }
+}

package/lib/form/_form.scss

@@ -4,6 +4,101 @@
 
 // MARK: Mixin
 @mixin core() {
+  // Forge flex row relative mode: override ng-forge grid column count
+  @for $i from 1 through 12 {
+    .dbx-forge-flex-#{$i} {
+      --df-grid-columns: #{$i};
+    }
+  }
+
+  // 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;
+  }
+
+  // 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;
+    }
+  }
 }
 
 @mixin theme($theme-config) {

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

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

package/lib/style/_all-theme.scss

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

package/package.json

@@ -1,21 +1,24 @@
 {
   "name": "@dereekb/dbx-form",
-  "version": "13.6.17",
+  "version": "13.8.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.6.17",
-    "@dereekb/dbx-core": "13.6.17",
-    "@dereekb/dbx-web": "13.6.17",
-    "@dereekb/model": "13.6.17",
-    "@dereekb/rxjs": "13.6.17",
-    "@dereekb/util": "13.6.17",
+    "@dereekb/date": "13.8.0",
+    "@dereekb/dbx-core": "13.8.0",
+    "@dereekb/dbx-web": "13.8.0",
+    "@dereekb/model": "13.8.0",
+    "@dereekb/rxjs": "13.8.0",
+    "@dereekb/util": "13.8.0",
+    "@dereekb/vitest": "13.8.0",
+    "@ng-forge/dynamic-forms": "^0.7.0",
+    "@ng-forge/dynamic-forms-material": "^0.7.0",
     "@ng-web-apis/geolocation": "^5.1.0",
     "@ngbracket/ngx-layout": "^21.0.0",
     "@ngrx/component-store": "^21.0.0",