@dereekb/dbx-form 13.10.0 → 13.10.2

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

@@ -46,16 +46,63 @@ $dbx-forge-form-field-slider-thumb-margin: 22px;
     letter-spacing: normal;
   }
 
+  // Boolean fields (mat-checkbox / mat-slide-toggle): make the whole content
+  // box clickable. Stretches the Material `<label for="...">` to fill the
+  // rectangle so native HTML label-click delegation toggles the control on
+  // any click in the box. No overlay and no positioning resets, so MDC
+  // ripple and focus indicator stay anchored where Material expects.
+  //
+  // Disabled state already applies `pointer-events: none` on
+  // `.dbx-forge-form-field-content` (see formfield.wrapper.component.ts),
+  // so disabled clicks remain blocked.
+  dbx-forge-form-field-wrapper .dbx-forge-form-field-content:has(mat-checkbox),
+  dbx-forge-form-field-wrapper .dbx-forge-form-field-content:has(mat-slide-toggle) {
+    cursor: pointer;
+
+    mat-checkbox,
+    mat-slide-toggle {
+      display: block;
+      width: 100%;
+    }
+
+    .mdc-form-field {
+      display: flex;
+      width: 100%;
+      align-items: center;
+    }
+
+    // Negative margins cancel the wrapper's 16/16/8 padding so the label's
+    // hit-area reaches the outlined edges; matching padding restores visual
+    // spacing for the label text itself. Padding-left/inline-start is left
+    // alone so Material's gap between the control and the label text is
+    // preserved.
+    .mdc-form-field > label {
+      flex: 1 1 auto;
+      align-self: stretch;
+      display: flex;
+      align-items: center;
+      margin: -16px -16px -8px 0;
+      padding-top: 16px;
+      padding-right: 16px;
+      padding-bottom: 8px;
+      cursor: pointer;
+      min-height: 0;
+    }
+  }
+
   // 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 {
+  // and `gap: var(--df-grid-row-gap)` via :host styling, and ContainerFieldComponent
+  // applies `display: block`. Both are scoped via attribute selectors and tie
+  // class-selector specificity, so override with `!important` whenever 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,
+  .df-container.dbx-flex-group {
     display: flex !important;
     flex-wrap: wrap;
     gap: 0 !important;

package/lib/forge/preset/_preset.scss

@@ -21,6 +21,7 @@
       width: 100%;
     }
 
+    // df-mat-input / mat-form-field rendering (e.g. dbx-form-search-form's text input)
     .mat-mdc-form-field > .mat-mdc-text-field-wrapper {
       padding: 0;
 
@@ -36,23 +37,78 @@
         @include theming.hide-mdc-notched-outline-border;
       }
     }
-  }
 
-  .dbx-section-page-header-search-bar-with-bottom-bar .mat-mdc-form-field > .mat-mdc-text-field-wrapper {
-    > .mat-mdc-form-field-flex > .mdc-notched-outline {
-      .mdc-notched-outline__notch,
-      .mdc-notched-outline__trailing {
-        border-bottom: var(--mdc-outlined-text-field-outline-width) solid;
-        border-radius: 0;
+    .mat-mdc-form-field-subscript-wrapper {
+      display: none;
+    }
+
+    // dbx-forge-form-field-wrapper rendering (e.g. boolean fields)
+    dbx-forge-form-field-wrapper {
+      > .dbx-forge-form-field-wrapper {
+        margin-top: 0;
+
+        > .dbx-forge-form-field-outline {
+          .dbx-forge-form-field-outline-leading {
+            display: none;
+          }
+
+          .dbx-forge-form-field-outline-leading,
+          .dbx-forge-form-field-outline-notch,
+          .dbx-forge-form-field-outline-trailing {
+            border: 0;
+          }
+        }
+
+        .dbx-forge-form-field-outline-label {
+          margin-left: -4px; // align with the input
+        }
+
+        .dbx-forge-form-field-content {
+          padding: 0;
+        }
       }
     }
+  }
 
-    &:hover,
-    &.mdc-text-field--focused {
+  .dbx-section-page-header-search-bar-with-bottom-bar {
+    // df-mat-input / mat-form-field rendering
+    .mat-mdc-form-field > .mat-mdc-text-field-wrapper {
       > .mat-mdc-form-field-flex > .mdc-notched-outline {
         .mdc-notched-outline__notch,
         .mdc-notched-outline__trailing {
-          border-bottom: var(--mdc-outlined-text-field-focus-outline-width) solid;
+          border-bottom: var(--mdc-outlined-text-field-outline-width) solid;
+          border-radius: 0;
+        }
+      }
+
+      &:hover,
+      &.mdc-text-field--focused {
+        > .mat-mdc-form-field-flex > .mdc-notched-outline {
+          .mdc-notched-outline__notch,
+          .mdc-notched-outline__trailing {
+            border-bottom-width: var(--mdc-outlined-text-field-focus-outline-width);
+          }
+        }
+      }
+    }
+
+    // dbx-forge-form-field-wrapper rendering
+    dbx-forge-form-field-wrapper > .dbx-forge-form-field-wrapper {
+      > .dbx-forge-form-field-outline {
+        .dbx-forge-form-field-outline-notch,
+        .dbx-forge-form-field-outline-trailing {
+          border-bottom: var(--mdc-outlined-text-field-outline-width) solid;
+          border-radius: 0;
+        }
+      }
+
+      &:hover,
+      &:focus-within {
+        > .dbx-forge-form-field-outline {
+          .dbx-forge-form-field-outline-notch,
+          .dbx-forge-form-field-outline-trailing {
+            border-bottom-width: var(--mdc-outlined-text-field-focus-outline-width);
+          }
         }
       }
     }

package/lib/form/_form.scss

@@ -4,61 +4,6 @@
 
 // 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;
@@ -88,8 +33,7 @@
     }
 
     // Reduce opacity on form fields to indicate disabled state
-    .mat-mdc-form-field,
-    .dbx-forge-styled-box {
+    .mat-mdc-form-field {
       opacity: 0.38;
     }
 

package/package.json

@@ -1,38 +1,38 @@
 {
   "name": "@dereekb/dbx-form",
-  "version": "13.10.0",
+  "version": "13.10.2",
   "peerDependencies": {
-    "@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.4",
+    "@angular/cdk": "^21.2.8",
+    "@angular/common": "21.2.10",
+    "@angular/core": "21.2.10",
+    "@angular/forms": "21.2.10",
+    "@angular/material": "^21.2.8",
+    "@angular/material-date-fns-adapter": "21.2.8",
+    "@angular/platform-browser": "21.2.10",
     "@bobbyquantum/ngx-editor": "21.0.0",
-    "@dereekb/date": "13.10.0",
-    "@dereekb/dbx-core": "13.10.0",
-    "@dereekb/dbx-web": "13.10.0",
-    "@dereekb/model": "13.10.0",
-    "@dereekb/rxjs": "13.10.0",
-    "@dereekb/util": "13.10.0",
-    "@dereekb/vitest": "13.10.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",
+    "@dereekb/date": "13.10.2",
+    "@dereekb/dbx-core": "13.10.2",
+    "@dereekb/dbx-web": "13.10.2",
+    "@dereekb/model": "13.10.2",
+    "@dereekb/rxjs": "13.10.2",
+    "@dereekb/util": "13.10.2",
+    "@dereekb/vitest": "13.10.2",
+    "@ng-forge/dynamic-forms": "git+https://git@github.com/dereekb/ng-forge#e3059f8881fb39b1b1d279cd89486469dbad226d",
+    "@ng-forge/dynamic-forms-material": "0.8.0-next.4",
+    "@ng-web-apis/geolocation": "^5.2.0",
     "@ngbracket/ngx-layout": "^21.0.0",
-    "@ngrx/component-store": "^21.0.0",
+    "@ngrx/component-store": "^21.1.0",
     "@ngx-formly/core": "git+https://git@github.com/dereekb/ngx-formly#996d1041c8d2afbe429985a5ad394e59327bfa1d",
     "@ngx-formly/material": "git+https://git@github.com/dereekb/ngx-formly#02e615006744374a587b5d35de3b2d137e2e05a8",
     "@uirouter/core": "^6.1.2",
-    "angular-calendar": "^0.32.1",
+    "angular-calendar": "^0.32.2",
     "change-case-all": "^2.1.0",
-    "date-fns": "^4.0.0",
-    "mapbox-gl": "^3.10.0",
+    "date-fns": "^4.1.0",
+    "mapbox-gl": "^3.22.0",
     "ng-overlay-container": "^21.0.1",
     "ngx-mapbox-gl": "git+https://git@github.com/dereekb/ngx-mapbox-gl#3f1d25b0661bc48abbd415dc79ca7f66568bae2e",
-    "ngx-mat-input-tel": "^21.0.0",
-    "rxjs": "^7.8.0"
+    "ngx-mat-input-tel": "^21.4.1",
+    "rxjs": "^7.8.2"
   },
   "dependencies": {
     "tslib": "^2.3.0"
@@ -61,5 +61,6 @@
   },
   "module": "fesm2022/dereekb-dbx-form.mjs",
   "typings": "types/dereekb-dbx-form.d.ts",
-  "sideEffects": false
+  "sideEffects": false,
+  "type": "module"
 }