ng-hub-ui-forms 22.25.0 → 22.27.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -5
- package/fesm2022/ng-hub-ui-forms.mjs +138 -48
- package/fesm2022/ng-hub-ui-forms.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/_group-addons.scss +52 -3
- package/styles/_tokens.scss +3 -0
- package/types/ng-hub-ui-forms.d.ts +30 -2
package/README.md
CHANGED
|
@@ -92,7 +92,7 @@ mode — no Bootstrap dependency.
|
|
|
92
92
|
|
|
93
93
|
## 🎯 Features
|
|
94
94
|
|
|
95
|
-
- **Fields** — `hub-input` (text/number/email/password/color/switch/checkbox/counter, with input-group addons & masks, projected in-field affixes, a built-in `clearable` button and debounced typeahead `search`; the `file` format is **deprecated** → use `hub-file-input`), `hub-otp-input`, `hub-textarea` (+ `hubAutoresize`), `hub-slider` (single / dual thumb, gradient fill), `hub-segmented` (segmented control field — single & multiple selection, horizontal & vertical, with label + validation), `hub-select` (dropdown format, grouping, client-side search via `searchable` **and** server-side async typeahead via a `typeahead` Subject, tag creation with `addTag`, custom templates, `prepend` / `append` group addons and attached icons/buttons via `hubPrepend` / `hubAppend`; the `buttons` / `checkbox` / `radio` formats are **deprecated** → use `hub-segmented`), `hub-datepicker` (single & range at any granularity from a year to a second, time picking, min/max down to the minute, keyboard nav, i18n), `hub-file-input` (drag & drop, clipboard paste, type/size limits, previews, optional upload progress).
|
|
95
|
+
- **Fields** — `hub-input` (text/number/email/password/color/switch/checkbox/counter, with input-group addons & masks, projected in-field affixes, a built-in `clearable` button, the mixed `indeterminate` state on checkboxes and debounced typeahead `search`; the `file` format is **deprecated** → use `hub-file-input`), `hub-otp-input`, `hub-textarea` (+ `hubAutoresize`), `hub-slider` (single / dual thumb, gradient fill), `hub-segmented` (segmented control field — single & multiple selection, horizontal & vertical, with label + validation), `hub-select` (dropdown format, grouping, client-side search via `searchable` **and** server-side async typeahead via a `typeahead` Subject, tag creation with `addTag`, custom templates, `prepend` / `append` group addons and attached icons/buttons via `hubPrepend` / `hubAppend`; the `buttons` / `checkbox` / `radio` formats are **deprecated** → use `hub-segmented`), `hub-datepicker` (single & range at any granularity from a year to a second, time picking, min/max down to the minute, keyboard nav, i18n), `hub-file-input` (drag & drop, clipboard paste, type/size limits, previews, optional upload progress).
|
|
96
96
|
- **Automatic error display** — bind a field and its control errors render below it; `hub-fieldset`, `form[hubForm]` and `hub-legend` surface group- and form-level (cross-field) errors the same way, with zero wiring.
|
|
97
97
|
- **Containers** — `hub-fieldset` / `form[hubForm]` group fields and show their group errors; `hub-legend` renders an accessible legend.
|
|
98
98
|
- **Configurable** — `provideHubForms({ … })` sets the invalid-feedback templates, datepicker locale/labels, file-input labels and more, app-wide or per instance.
|
|
@@ -179,6 +179,7 @@ Project a leading / trailing icon **inside** the field, emit a debounced term on
|
|
|
179
179
|
```
|
|
180
180
|
|
|
181
181
|
- Project a `<hub-icon>` (or any element) into `hubInputPrefix` / `hubInputSuffix`; the field themes it with its `--hub-input-icon-*` tokens.
|
|
182
|
+
- `[(indeterminate)]` puts a `checkbox` in the mixed state — the honest answer for a "select all" over a partially selected list. It reflects the native DOM property, so it is announced as mixed, and it is two-way: clicking a mixed checkbox picks a side, so the component clears it and tells you. The `switch` format ignores it.
|
|
182
183
|
- `[clearable]` renders an internal ✕ button once the field holds a value — it resets the control and emits an empty `search` term (no manual suffix wiring). The glyph is the swappable `--hub-input-clear-icon` token.
|
|
183
184
|
- The control reserves inline padding automatically so its text never sits under the affix.
|
|
184
185
|
- Affixes use logical CSS properties, so `start`/`end` follow the writing direction and **flip automatically under `dir="rtl"`**.
|
|
@@ -258,8 +259,8 @@ one place: `--hub-field-floating-inset` (how far the value drops), `--hub-field-
|
|
|
258
259
|
#### Addons and attached content
|
|
259
260
|
|
|
260
261
|
`prepend` / `append` are group addons carrying **text** — a currency, a unit, a protocol.
|
|
261
|
-
Available on `hub-input`, `hub-select`, `hub-textarea` and `hub-
|
|
262
|
-
renders as a box with a value.
|
|
262
|
+
Available on `hub-input`, `hub-select`, `hub-textarea`, `hub-datepicker` and `hub-timepicker`:
|
|
263
|
+
every field that renders as a box with a value.
|
|
263
264
|
|
|
264
265
|
```html
|
|
265
266
|
<hub-input formControlName="amount" label="Amount" prepend="€" append=".00" />
|
|
@@ -299,8 +300,8 @@ reader put it back together on every row.
|
|
|
299
300
|
</hub-input>
|
|
300
301
|
```
|
|
301
302
|
|
|
302
|
-
`hub-input`, `hub-select`, `hub-textarea` and `hub-
|
|
303
|
-
only as a **direct child** of the template — wrap one in a `<div>` and it falls back to the
|
|
303
|
+
`hub-input`, `hub-select`, `hub-textarea`, `hub-datepicker` and `hub-timepicker` are the five that
|
|
304
|
+
close flush, and only as a **direct child** of the template — wrap one in a `<div>` and it falls back to the
|
|
304
305
|
treatment an action gets.
|
|
305
306
|
|
|
306
307
|
Whatever is projected wears the field's border, radius and height rather than its own, so a
|