ng-hub-ui-forms 22.23.0 → 22.23.2

package/fesm2022/ng-hub-ui-forms.mjs

@@ -9453,6 +9453,22 @@ function hubMinFiles(min) {
     };
 }
 
+/**
+ * A control the adapter creates is embedded, not stacked.
+ *
+ * Field hosts carry `margin-bottom: var(--hub-field-stack-gap)` so that fields written one
+ * under another in a form breathe. A control created *into another component's chrome* —
+ * a table's search group, a paginator's row — is not in that list and never was: the gap
+ * made the group taller than the field, so anything stretching beside it came out taller
+ * too. A table's search button overshot its own field by exactly that margin.
+ *
+ * Zeroed on the host through the token the family already exposes, so nothing has to write
+ * a rule that reaches into the control — and so every library that wires this adapter gets
+ * it, rather than each one discovering it separately.
+ */
+function markEmbedded(element) {
+    element.style.setProperty('--hub-field-stack-gap', '0');
+}
 /**
  * Ready-made {@link HubFormControlAdapter} backed by `HubInputComponent` /
  * `HubSelectComponent`.
@@ -9469,6 +9485,7 @@ const hubFormControlAdapter = {
     create(container, config) {
         if (config.kind === 'select') {
             const ref = container.createComponent(HubSelectComponent);
+            markEmbedded(ref.location.nativeElement);
             ref.setInput('items', (config.options ?? []).map((option) => ({ ...option })));
             ref.setInput('bindLabel', 'label');
             ref.setInput('bindValue', 'value');
@@ -9492,6 +9509,7 @@ const hubFormControlAdapter = {
             };
         }
         const ref = container.createComponent(HubInputComponent);
+        markEmbedded(ref.location.nativeElement);
         ref.setInput('type', config.type ?? 'text');
         if (config.placeholder) {
             ref.setInput('placeholder', config.placeholder);