ng-hub-ui-forms 22.2.0 → 22.4.0

package/README.md

@@ -92,7 +92,7 @@ mode — no Bootstrap dependency.
 
 ## 🎯 Features
 
-- **Fields** — `hub-input` (text/number/email/password/color/switch/checkbox/counter, with input-group addons & masks), `hub-otp-input`, `hub-textarea` (+ `hubAutoresize`), `hub-slider`, `hub-select` (dropdown / buttons / checkbox / radio formats, grouping, typeahead, custom templates), `hub-datepicker` (single & range, keyboard nav, i18n).
+- **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`), `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, typeahead, custom templates; the `buttons` / `checkbox` / `radio` formats are **deprecated** → use `hub-segmented`), `hub-datepicker` (single & range, keyboard nav, i18n).
 - **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.
 - **Containers** — `hub-fieldset` / `form[hubForm]` group fields and show their group errors; `hub-legend` renders an accessible legend.
 - **Configurable** — `provideHubForms({ … })` sets the invalid-feedback templates, datepicker locale/labels and more, app-wide or per instance.
@@ -156,6 +156,33 @@ npm install ng-hub-ui-forms @angular/cdk
 <hub-input formControlName="darkMode" format="switch" label="Dark mode" />
 ```
 
+#### Icon affix & typeahead (search boxes)
+
+Project a leading / trailing icon **inside** the field, emit a debounced term on every keystroke, and let the field render its own clear button:
+
+```html
+<!-- Project any icon (any pack via the shorthand) + debounced search + built-in clear -->
+<hub-input
+	label="Search frameworks"
+	[clearable]="true"
+	[debounceTime]="300"
+	(search)="onSearch($event)"
+>
+	<hub-icon hubInputPrefix name="fa:solid:magnifying-glass" />
+</hub-input>
+
+<!-- Projected affixes for any content (a unit label, an inline SVG…) -->
+<hub-input label="Amount">
+	<span hubInputPrefix>€</span>
+</hub-input>
+```
+
+- Project a `<hub-icon>` (or any element) into `hubInputPrefix` / `hubInputSuffix`; the field themes it with its `--hub-input-icon-*` tokens.
+- `[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.
+- The control reserves inline padding automatically so its text never sits under the affix.
+- Affixes use logical CSS properties, so `start`/`end` follow the writing direction and **flip automatically under `dir="rtl"`**.
+- `(search)` fires `debounceTime` ms after typing stops (`0` = every keystroke); identical consecutive terms are skipped, and `valueChange` stays synchronous.
+
 ### Select
 
 ```html
@@ -264,7 +291,7 @@ shared SCSS tokens; import them once at the app root:
 ```css
 hub-input,
 hub-select {
-	--hub-field-border-color: #cbd5e1;
+	--hub-input-border-color: #cbd5e1;
 	--hub-select-option-selected-bg: #e0e7ff;
 }
 ```
@@ -281,6 +308,28 @@ hub-input {
 }
 ```
 
+**`hub-slider`** — `--hub-slider-track-fill` takes a full `<image>` (e.g. a `linear-gradient(to right, …)`) for the filled part of the track, which renders intact clipped to the current percentage; `--hub-slider-value-space` is the value-bubble headroom and collapses to `0` on a `[showValue]="false"` (flush) slider:
+
+```css
+.gradient-slider {
+	--hub-slider-track-fill: linear-gradient(to right, #22c55e, #eab308, #ef4444);
+}
+```
+
+**`hub-select` inside a modal** — the dropdown panel stacks through `--hub-select-dropdown-z-index` (default `calc(var(--hub-sys-zindex-modal, 1055) + 5)`), so a select opened inside a `HubModal` renders above the dialog instead of being clipped underneath it.
+
+**`hub-segmented` variants & theming** — the `color` input tints the selected segment from the semantic families (`<hub-segmented color="primary">`); any of the `--hub-segmented-*` slots can be set directly, or in one call with the SCSS mixin:
+
+```scss
+@use 'ng-hub-ui-forms/styles' as *;
+
+.brand-toggle {
+	@include hub-segmented-theme($selected-bg: gold, $selected-color: #111, $radius: 999px);
+}
+```
+
+In single-select mode the selected pill slides between options (`--hub-segmented-indicator-transition`, default `0.2s ease`; disabled under `prefers-reduced-motion`).
+
 ---
 
 ## ✨ Signal Forms (opt-in)