ng-hub-ui-forms 22.20.0 → 22.20.1

package/README.md

@@ -257,8 +257,33 @@ outermost on its side. A unit labels the field; the action sits beyond it.
 </hub-input>
 ```
 
+A slot can also hand over a **field**, not only an action. A price and the period it is a price
+of are one statement — "180 € a month" — and splitting them into two separate fields makes the
+reader put it back together on every row.
+
+```html
+<hub-input formControlName="rate" label="Rate" prepend="€">
+	<ng-template hubAppend>
+		<hub-select
+			formControlName="period"
+			[items]="periods"
+			bindLabel="name"
+			bindValue="id"
+			[clearable]="false"
+			placeholder="per"
+		/>
+	</ng-template>
+</hub-input>
+```
+
+`hub-input`, `hub-select`, `hub-textarea` and `hub-datepicker` are the four that close flush, and
+only as a **direct child** of the template — wrap one in a `<div>` and it falls back to the
+treatment an action gets.
+
 Whatever is projected wears the field's border, radius and height rather than its own, so a
-button does not draw a second, thicker seam beside the control.
+button does not draw a second, thicker seam beside the control. A projected field hands that over
+one level deeper — its host gives up the border and the inner control takes the squaring —
+because a field keeps its box on the control rather than on its host.
 
 > Import `HubPrependDirective` / `HubAppendDirective` from `ng-hub-ui-forms`.
 > `[hubSelectSuffix]` is **deprecated** in favour of `[hubAppend]`, which does the same on every

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

@@ -970,9 +970,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 
 /**
  * Marks content attached to the **inline-end edge** of a field (right in LTR, left in RTL) —
- * an icon, a button, anything richer than the text an `append` string can carry. This is the
- * slot for an action that operates on the field's value: search it, calculate it, copy it,
- * configure it.
+ * an icon, a button, another field, anything richer than the text an `append` string can carry.
+ * This is the slot for whatever operates on the field's value: search it, calculate it, copy it,
+ * configure it, or say what unit it is in.
+ *
+ * **A field is allowed too, not only an action.** `hub-input`, `hub-select`, `hub-textarea` and
+ * `hub-datepicker` may be projected here and close flush against the host field, which is how a
+ * price and the period it is a price of stay one statement — "180 € a month" — instead of two
+ * fields the reader has to put back together. It works a level deeper than for a button: a field
+ * keeps its box on the control inside it rather than on its host, so the host gives up the border
+ * and padding it should never have taken and the inner control takes the squaring. Only those
+ * four, and only as a **direct child** of the template — wrap one in a `<div>` and it falls back
+ * to the treatment an action gets.
  *
  * Works on every field that renders as a box with a value: `<hub-input>`, `<hub-select>`,
  * `<hub-textarea>` and `<hub-datepicker>`. Composes with the `append` input, which stays the
@@ -1010,7 +1019,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 
 /**
  * Marks content attached to the **inline-start edge** of a field (left in LTR, right in RTL) —
- * an icon, a button, anything richer than the text a `prepend` string can carry.
+ * an icon, a button, another field, anything richer than the text a `prepend` string can carry.
+ *
+ * **A field is allowed too, not only an action.** `hub-input`, `hub-select`, `hub-textarea` and
+ * `hub-datepicker` may be projected here and close flush against the host field, which is how a
+ * price and the period it is a price of stay one statement — "180 € a month" — instead of two
+ * fields the reader has to put back together. It works a level deeper than for a button: a field
+ * keeps its box on the control inside it rather than on its host, so the host gives up the border
+ * and padding it should never have taken and the inner control takes the squaring. Only those
+ * four, and only as a **direct child** of the template — wrap one in a `<div>` and it falls back
+ * to the treatment an action gets.
  *
  * Works on every field that renders as a box with a value: `<hub-input>`, `<hub-select>`,
  * `<hub-textarea>` and `<hub-datepicker>`. Composes with the `prepend` input, which stays the
@@ -1024,7 +1042,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * around an attached button.
  *
  * Whatever is projected wears the field's border, radius and height rather than its own, so a
- * `hubButton` does not draw a second, thicker seam beside the control.
+ * `hubButton` does not draw a second, thicker seam beside the control — and a projected field
+ * hands that over from its host to the control inside it, for the same reason.
  *
  * ```html
  * <hub-input formControlName="amount" label="Amount">