@ethlete/components 1.0.0-next.21 → 1.0.0-next.23
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/CHANGELOG.md +200 -0
- package/fesm2022/ethlete-components.mjs +20753 -8152
- package/fesm2022/ethlete-components.mjs.map +1 -1
- package/generators/icons/generator.js +3 -4
- package/package.json +2 -1
- package/types/ethlete-components.d.ts +6605 -2608
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,205 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 1.0.0-next.23
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`221c878`](https://github.com/ethlete-io/ethdk/commit/221c878d5f3e382ffed074bf93ab30afeda9d63f) Thanks [@TomTomB](https://github.com/TomTomB)! - Cascader: flat search across all levels. Implement the optional `search(query)` hook on the `CascaderDataSource` (returning root → match path chains) and the panel gains a search input that swaps the columns for a flat, breadcrumb-labelled result list — committing a match closes, while a branch-only match jumps the columns to it. New headless pieces `etCascaderSearch` and `etCascaderSearchOption`; `et-cascader` renders the input automatically (`searchPlaceholder` input) and Escape now clears an active query before closing the panel.
|
|
8
|
+
|
|
9
|
+
- [`221c878`](https://github.com/ethlete-io/ethdk/commit/221c878d5f3e382ffed074bf93ab30afeda9d63f) Thanks [@TomTomB](https://github.com/TomTomB)! - Cascader: `cascaderFromQuery` builds a `CascaderDataSource` from `@ethlete/query` creators — per-level loads (concurrent, deduped/cached by the client), optional flat-search wiring with debounce and `minQueryLength`, and a `resolvePath` passthrough. The cascader's default `toErrorMessage` now shows an `Error`'s `message` verbatim (falling back to the generic text), so query failure messages surface without extra wiring.
|
|
10
|
+
|
|
11
|
+
- [`221c878`](https://github.com/ethlete-io/ethdk/commit/221c878d5f3e382ffed074bf93ab30afeda9d63f) Thanks [@TomTomB](https://github.com/TomTomB)! - Cascader: multi-select via the new `multiple` input — activations toggle values (the form value becomes a `T[]`), the panel stays open, rows gain check squares, ancestors of a partial selection show an indeterminate dash and promote to a full checkmark once all their loaded descendants are selected. Search results toggle in place (keeping the result list), the trigger joins the selected labels, and programmatic values resolve their chains through `resolvePath`. The `value` model is now typed `T | T[] | null`.
|
|
12
|
+
|
|
13
|
+
- [`f005c94`](https://github.com/ethlete-io/ethdk/commit/f005c944f7edf67842d0a3e635d7e35e8de44445) Thanks [@TomTomB](https://github.com/TomTomB)! - Cascader: new `et-cascader` / `[etCascader]` (`CASCADER_IMPORTS`) — a generic hierarchy value control that browses an abstract `CascaderDataSource<T>` level by level (sync array, `Promise` or `Observable`, each level lazy-loaded). Miller columns on desktop, single-column drill in a bottom sheet on mobile; `selectableLevels` (`'leaf'` | `'any'`), `path`/`pathValue` chain, per-column loading/empty/error states with retry, full ARIA tree keyboard navigation, and signal-forms integration. Error block `ET3300`–`ET3399`.
|
|
14
|
+
|
|
15
|
+
Deep hierarchies stay compact: the desktop panel shows at most `maxVisibleColumns` (default 3) columns side by side, showing the whole drilled trail as a breadcrumb row below the columns once it overflows. All drilled levels ride a sliding track, so collapsing into a crumb (and navigating back out of one) is a coordinated slide rather than a pop. Navigating back is non-destructive — a crumb click or Arrow Left past the window edge slides the column window without discarding the deeper drill. Headless: `visibleColumns()`, `breadcrumbPath()`, `visibleColumnStart()`, `showColumn()`.
|
|
16
|
+
|
|
17
|
+
- [#3027](https://github.com/ethlete-io/ethdk/pull/3027) [`0a62001`](https://github.com/ethlete-io/ethdk/commit/0a6200181b706828bc8b228afb0743a269bd7e8e) Thanks [@github-actions](https://github.com/apps/github-actions)! - Forms: add `et-date-time-input` (+ headless `[etDateTimeInput]`), a combined date & time control with a string wire value — one field with a combined display format (strict-then-lenient typed entry, bare dates commit at midnight) and a picker overlay hosting calendar and time picker side by side (Date/Time tabs in the bottom sheet). A first day pick in the picker also commits at midnight — never the current wall-clock time.
|
|
18
|
+
|
|
19
|
+
- [`8bfe3ed`](https://github.com/ethlete-io/ethdk/commit/8bfe3ed805a760f13a5cef11125473b1342d747c) Thanks [@TomTomB](https://github.com/TomTomB)! - Date, time, date-time and date range inputs: new opt-in `mask` input. With a fixed-width numeric `displayFormat` (`dd.MM.yyyy`, `HH:mm`, …) typing gets guide placeholders (`__.__.____`), auto-inserted separators, paste filtering and a numeric soft keyboard; the lenient blur/Enter commit parsers stay authoritative. Formats a mask can't represent (locale formats like the default `P`/`p`, variable-width or text tokens) are refused with a dev-mode warning and typing stays unmasked. On the date range input each side is its own mask host, so the guide follows the focused field. The duration input deliberately gets no mask (unbounded first segment, right-anchored lenient entry). Supporting API: `[etInputMask]` now accepts `null` to disable the mask conditionally, and `InputMaskHost` grew an optional `resumeNativeSync()` for hosts whose mask can toggle off again.
|
|
20
|
+
|
|
21
|
+
- [`f005c94`](https://github.com/ethlete-io/ethdk/commit/f005c944f7edf67842d0a3e635d7e35e8de44445) Thanks [@TomTomB](https://github.com/TomTomB)! - Duration input: new `et-duration-input` / `[etDurationInput]` (`DURATION_INPUT_IMPORTS`) — a duration control whose value is total elapsed **milliseconds** (`number | null`), kept out of the `Date` system. Configurable segment layout (`durationFormat`, e.g. `mm:ss`, `hh:mm:ss`, `hh:mm:ss.SSS`) with a lenient typed parse (`130` → `1:30`) committing on blur/Enter. Error code `ET3050` inside the shared date-time block.
|
|
22
|
+
|
|
23
|
+
- [`4c6b6d0`](https://github.com/ethlete-io/ethdk/commit/4c6b6d000ba568d73c8b191c52fed3206b6a00a6) Thanks [@TomTomB](https://github.com/TomTomB)! - Chip: filter-chip support — `etSelectionList` + `etSelectionOption` compose directly onto `et-chip` for selectable chip groups (single or multiple), with a color-theme tonal selected state and hover/focus affordances. Selection options now tolerate late-bound `value` inputs (directive compositions no longer throw NG0950).
|
|
24
|
+
|
|
25
|
+
- [`04ffa53`](https://github.com/ethlete-io/ethdk/commit/04ffa53bf3b65977bd4f87d312781faa93057d1f) Thanks [@TomTomB](https://github.com/TomTomB)! - Forms: fix bugs and accessibility issues across the form controls, and add a few
|
|
26
|
+
opt-in APIs.
|
|
27
|
+
- **Fixes:** select-all no longer sticks on "mixed" when a disabled option is
|
|
28
|
+
present; a cascader value set programmatically now shows its breadcrumb (via a
|
|
29
|
+
new optional `resolvePath` on the cascader data source); typed date/time/range
|
|
30
|
+
values no longer leak the current wall-clock time; duration/date/time null the
|
|
31
|
+
value on an unparseable commit; masked inputs no longer break IME composition;
|
|
32
|
+
standalone `input[etInput]` now syncs on keystroke; number steppers mark the
|
|
33
|
+
field touched and can't leak their auto-repeat timer; OTP re-emits `completed`
|
|
34
|
+
when a full code is replaced; color inputs honor `[readonly]`.
|
|
35
|
+
- **Accessibility:** multi-select options and the select-all control now use
|
|
36
|
+
`role="checkbox"` (not `option`); a parse error is announced with a real
|
|
37
|
+
message and `aria-describedby`; the date picker panel is a named
|
|
38
|
+
`role="dialog"`; the cascader trigger's `aria-controls` resolves; select
|
|
39
|
+
panels keep only options inside the listbox; the phone country trigger and
|
|
40
|
+
cascader columns gained accessible names/typeahead; a schema-`hidden` field is
|
|
41
|
+
now actually hidden; Caps-Lock detection also samples on focus.
|
|
42
|
+
- **New inputs:** `parseErrorMessage` (date/time/date-time/duration/range),
|
|
43
|
+
password `hideLabel`, phone `countryLabel`, date-picker-panel `dialogLabel`.
|
|
44
|
+
- **Note:** the checkbox now toggles on `keydown` Space (matching switch and the
|
|
45
|
+
selection options), and the select panel renders its listbox as an inner
|
|
46
|
+
element — restyle if you targeted the panel host as the listbox.
|
|
47
|
+
|
|
48
|
+
- [`888ce8a`](https://github.com/ethlete-io/ethdk/commit/888ce8a504c7001f2fb50ae83302483d7148486a) Thanks [@TomTomB](https://github.com/TomTomB)! - Forms consistency: `readonly` and one-click clearing across more controls.
|
|
49
|
+
- Checkbox, switch and the three selection-list groups now honor `readonly` (e.g. from a `readonly(...)` schema): normal look, still focusable (`aria-readonly`), toggling/selecting blocked — arrows in a readonly radio group move focus without selecting.
|
|
50
|
+
- Date, time, date-time, duration and phone inputs render a clear (×) button while the focused field holds a value (`clearable`, default on; label via `clearLabel`), backed by a public `clearValue()` on their headless directives.
|
|
51
|
+
|
|
52
|
+
- [`85d7332`](https://github.com/ethlete-io/ethdk/commit/85d73327be9a5fc2154c5a0f0f2defe25e657a55) Thanks [@TomTomB](https://github.com/TomTomB)! - Masked input: the mask now attaches through a public `INPUT_MASK_HOST` contract (provided by `et-input` out of the box), so custom field directives can host `[etInputMask]` too. Pattern masks additionally expose `complete()` on the directive (`0`/`a`/`*` slots required, `9` optional; `null` for masks without completeness) via a new optional `MaskSpec.isComplete`.
|
|
53
|
+
|
|
54
|
+
- [`f005c94`](https://github.com/ethlete-io/ethdk/commit/f005c944f7edf67842d0a3e635d7e35e8de44445) Thanks [@TomTomB](https://github.com/TomTomB)! - Masked input: new `[etInputMask]` directive layering input masking onto `et-input` — pattern-string masks (`00-00-0000` style grammar) or `MaskSpec` objects, with `createCurrencyMask` / `createIbanMask` / `createCardMask` factories, raw-or-masked form values (`maskValueMode`, raw by default), focused-state guide placeholders (`placeholderChar`) and full caret handling (`MASKED_INPUT_IMPORTS`).
|
|
55
|
+
|
|
56
|
+
- [`f005c94`](https://github.com/ethlete-io/ethdk/commit/f005c944f7edf67842d0a3e635d7e35e8de44445) Thanks [@TomTomB](https://github.com/TomTomB)! - Number input: new `stepper` input on `et-number-input` rendering −/+ buttons with press-and-hold auto-repeat, `min`/`max` clamping and bound-aware disabling; the headless `NumberInputDirective` gains `stepBy(direction)` / `canStepUp` / `canStepDown`. Adds the `et-minus` built-in icon.
|
|
57
|
+
|
|
58
|
+
- [`f005c94`](https://github.com/ethlete-io/ethdk/commit/f005c944f7edf67842d0a3e635d7e35e8de44445) Thanks [@TomTomB](https://github.com/TomTomB)! - Password input: new `et-password-input` / `[etPasswordInput]` (`PASSWORD_INPUT_IMPORTS`) — reveal toggle (`revealed` model, `revealable`, `aria-pressed`), opt-in Caps Lock warning (`capsLockWarning`), and a `strength` signal (0–4 typing-feedback heuristic) for composing strength meters. Adds `et-eye` / `et-eye-slash` built-in icons.
|
|
59
|
+
|
|
60
|
+
- [`36ac99d`](https://github.com/ethlete-io/ethdk/commit/36ac99db8ccf70597d2dda3e845effe4e0687ba9) Thanks [@TomTomB](https://github.com/TomTomB)! - Select: full tag-input ergonomics in custom-value mode (`allowCustomValues`).
|
|
61
|
+
- A "Create …" listbox row (label via `createLabel`) now offers the query as a custom value even while options still match — keyboard-reachable via virtual focus; headless compositions use `customValueCandidate()` + `customValueOption`.
|
|
62
|
+
- New inputs: `customValueSeparators` (characters that commit while typing and split pastes), `commitCustomValueOnClose` (pending text commits on Tab/outside-click close instead of being discarded), `normalizeCustomValue` (map/reject raw text), and `maxSelection` (caps multi selection and locks the search input while full, exposed as `isFull()`; unselected options render disabled while full — deselecting frees them again).
|
|
63
|
+
- `commitCustomValue(raw)` is now public for imperative commits.
|
|
64
|
+
|
|
65
|
+
- [`f005c94`](https://github.com/ethlete-io/ethdk/commit/f005c944f7edf67842d0a3e635d7e35e8de44445) Thanks [@TomTomB](https://github.com/TomTomB)! - Select: new `et-select-option-group` / `[etSelectOptionGroup]` for labelled listbox sections. Grouping is presentational — options stay flat for keyboard navigation and typeahead — and a group hides itself once all its options are filtered out under `filterMode="internal"`. `role="group"` + `aria-labelledby`; token `--et-select-option-group-label-font-size`. Error code `ET1009`.
|
|
66
|
+
|
|
67
|
+
- [`b61ad0f`](https://github.com/ethlete-io/ethdk/commit/b61ad0fbe61ed1b0e7e8cd98e8d673ae91f10ff1) Thanks [@TomTomB](https://github.com/TomTomB)! - Select: new `selectOptionsFromV2Query` feeds the async select from a legacy `V2QueryClient` query (or a `createLegacyQueryCreator` interop wrapper) — the `V2QueryClient` counterpart of `selectOptionsFromQuery`, returning the same signal bundle.
|
|
68
|
+
|
|
69
|
+
- [`4f34f1f`](https://github.com/ethlete-io/ethdk/commit/4f34f1fa2ef1809f6b281d52fdc0f037923e88db) Thanks [@TomTomB](https://github.com/TomTomB)! - Select: new data-driven `options` input with built-in virtualization for large option lists.
|
|
70
|
+
- `options` takes `SelectOptionData[]` (`{ value, label, disabled? }`) — the select renders the rows itself and windows them, so only the rows near the viewport exist in the DOM (2000 options ≈ 15 rendered nodes). Internal filtering, keyboard navigation, typeahead and closed-panel label resolution work across the full data set.
|
|
71
|
+
- `etSelectOptionTemplate` customizes the row content of data-driven options, with the source entry (extra fields included) as template context.
|
|
72
|
+
- Headless: `etSelectViewport` marks the scroll container to window against, `etSelectVirtualOption` renders one windowed item, and `virtualizedItems()` / `virtualWindow` on `[etSelect]` expose the window state.
|
|
73
|
+
- Breaking for headless consumers of `SelectItem`: `elementRef` is now `element: Signal<HTMLElement | null>` (`null` for a data-driven option outside the rendered window).
|
|
74
|
+
|
|
75
|
+
- [`a41491d`](https://github.com/ethlete-io/ethdk/commit/a41491db447152e69902020d19bfc30bccf3b01d) Thanks [@TomTomB](https://github.com/TomTomB)! - Server violations → signal-forms bridge:
|
|
76
|
+
- `@ethlete/query`: `mapViolationsToFormErrors({ fieldTree, error, rewritePath?, onUnmappedViolation? })` maps an API error's violation list onto a signal form's fields (unmapped violations become form-level errors, violation-free failures degrade to a form-level `etServerError`), plus `extractFormViolations(error)`, `executeUntilSettled(query, executeArgs?)` for awaiting one execution as a settled snapshot, and the `isQueryErrorResponse` guard.
|
|
77
|
+
- `@ethlete/components`: `provideFormErrorMessageResolver(resolver)` lets apps centralize/localize the text `et-form-error` renders by error `kind`; the error's own `message` stays the default.
|
|
78
|
+
|
|
79
|
+
- [`f005c94`](https://github.com/ethlete-io/ethdk/commit/f005c944f7edf67842d0a3e635d7e35e8de44445) Thanks [@TomTomB](https://github.com/TomTomB)! - Slider: new `et-slider` (single value) and `et-range-slider` (`[start, end]` tuple with `minDistance`) form controls, plus the headless `[etSlider]` / `[etRangeSlider]` / `[etSliderTrack]` / `[etSliderThumb]` directives and an `ng-template[etSliderThumbLabel]` value-label slot. Pointer drag with capture, full ARIA slider keyboard model, RTL-aware, signal-forms integrated (`SLIDER_IMPORTS`).
|
|
80
|
+
|
|
81
|
+
- [`53881a8`](https://github.com/ethlete-io/ethdk/commit/53881a84acf85f094baf50cf73e37fc88ac70461) Thanks [@TomTomB](https://github.com/TomTomB)! - Form field: new `wireFormSupport(support, refs)` helper owns the support-region view-child wiring for custom controls built on `injectFormSupport` (the built-in controls now use it).
|
|
82
|
+
|
|
83
|
+
### Patch Changes
|
|
84
|
+
|
|
85
|
+
- [`7c16ecf`](https://github.com/ethlete-io/ethdk/commit/7c16ecf4e8b74f228b3734f50146e8e669e61470) Thanks [@TomTomB](https://github.com/TomTomB)! - Calendar and select polish:
|
|
86
|
+
- Calendar: disabled days no longer react to hover, and the hovered endpoint of a range preview renders as a filled circle (like a selected date) instead of a half-filled band capped by a ring.
|
|
87
|
+
- Select: while the panel is open, async loading shows only the panel spinner instead of a second one in the field.
|
|
88
|
+
|
|
89
|
+
- [`ddb3413`](https://github.com/ethlete-io/ethdk/commit/ddb3413c2673a4f2f513598a208f376b36b7535b) Thanks [@TomTomB](https://github.com/TomTomB)! - Grid: dragging (or keyboard-moving) an item downward onto other items now swaps them into the vacated space when they fit, instead of requiring the drag to clear the entire collider before anything repositions.
|
|
90
|
+
|
|
91
|
+
- [`ddb3413`](https://github.com/ethlete-io/ethdk/commit/ddb3413c2673a4f2f513598a208f376b36b7535b) Thanks [@TomTomB](https://github.com/TomTomB)! - Grid items can now be moved with touch: `[etDragHandle]` sets `touch-action: none` on its host while enabled (the browser was claiming touch pointermoves for scrolling and cancelling the gesture), and read-only grids keep normal touch scrolling.
|
|
92
|
+
|
|
93
|
+
- [`06377b6`](https://github.com/ethlete-io/ethdk/commit/06377b6312fd32c7d1f497816fa91a655bf72d19) Thanks [@TomTomB](https://github.com/TomTomB)! - Overlay: a color theme provided on the app root component (e.g. `ProvideColorDirective` via `hostDirectives` plus `forceColor()`) now propagates into overlays even when they are opened without a `viewContainerRef`, and updates reactively while the overlay is open.
|
|
94
|
+
|
|
95
|
+
- [`f1841b7`](https://github.com/ethlete-io/ethdk/commit/f1841b7ec3a4f6e280c961d072a90fd2ceba75d7) Thanks [@TomTomB](https://github.com/TomTomB)! - Phone input: picking a country prefix now moves focus to the number field instead of back to the prefix toggle (closing the picker with Escape still refocuses the toggle).
|
|
96
|
+
|
|
97
|
+
- [`57a5104`](https://github.com/ethlete-io/ethdk/commit/57a5104d3805824cf6b28725c5d9aae670af9626) Thanks [@TomTomB](https://github.com/TomTomB)! - Select: rubber-band overscroll (macOS) no longer drags the panel background along with the list, exposing the page behind the overlay — the panel chrome now sits on a non-scrolling element around an inner `.et-select-panel-scroller`.
|
|
98
|
+
|
|
99
|
+
- [`fa0e118`](https://github.com/ethlete-io/ethdk/commit/fa0e1189f46a5359f5018fba15fbb405af646314) Thanks [@TomTomB](https://github.com/TomTomB)! - Select option checkmarks and menu radio/checkbox item indicators now render on the right (trailing) edge of their row instead of the left, so option labels align flush with the row start. Standalone form controls (checkbox, radio, switch, selection lists, cascader check squares) keep their leading position.
|
|
100
|
+
|
|
101
|
+
## 1.0.0-next.22
|
|
102
|
+
|
|
103
|
+
### Minor Changes
|
|
104
|
+
|
|
105
|
+
- [#3024](https://github.com/ethlete-io/ethdk/pull/3024) [`144832a`](https://github.com/ethlete-io/ethdk/commit/144832ae74abfdbe8f084c14d6a903ee2eda18cf) Thanks [@TomTomB](https://github.com/TomTomB)! - Calendar & date inputs: new date foundation for `@ethlete/components`.
|
|
106
|
+
- `et-calendar` (`CALENDAR_IMPORTS`): inline month calendar on plain `Date`s with single and range selection, `min`/`max`/`dateFilter`, localized labels and the full ARIA-grid keyboard model; headless `[etCalendar]` / `[etCalendarGrid]` / `[etCalendarCell]` for custom markup.
|
|
107
|
+
- `et-date-input` (`DATE_INPUT_IMPORTS`): `string`-valued date field (`valueFormat`, ISO by default) pairing strict typed entry against a locale-aware `displayFormat` with an anchored calendar picker; unparseable text stays visible and raises `parseError` while the value stays `null`.
|
|
108
|
+
- `et-date-range-input` (`DATE_RANGE_INPUT_IMPORTS`): one control with two fields sharing a range-mode picker; value `{ start: string | null; end: string | null }`.
|
|
109
|
+
- New `provideDateFormat` / `provideTimeFormat` / `provideDateLocale` tokens and a `date-fns` (v4) peer dependency.
|
|
110
|
+
|
|
111
|
+
- [#3022](https://github.com/ethlete-io/ethdk/pull/3022) [`d651c4c`](https://github.com/ethlete-io/ethdk/commit/d651c4ccacb309db808f71ebc6ceda8e5e0ffe82) Thanks [@github-actions](https://github.com/apps/github-actions)! - Chip: new `et-chip` component (pill with optional remove button, Backspace/Delete removal) plus headless `[etChip]` / `[etChipRemove]` directives, exported as `CHIP_IMPORTS`.
|
|
112
|
+
- Selection list: the item registry/selection API moved from the group directive onto its `selection` property (`list.selection.select(...)` instead of `list.select(...)` on the `SELECTION_LIST_TOKEN` contract); group behavior is unchanged.
|
|
113
|
+
- `SelectionListItem` gains optional `id` and `label` signals.
|
|
114
|
+
|
|
115
|
+
- [#3022](https://github.com/ethlete-io/ethdk/pull/3022) [`13fc0af`](https://github.com/ethlete-io/ethdk/commit/13fc0af8d5eabbe6da7461c6fb8507b2e2e0407f) Thanks [@github-actions](https://github.com/apps/github-actions)! - Date & time pickers (date, date range, time) open as a backdropped bottom sheet with drag-to-dismiss and touch-sized cells on viewports below the `md` breakpoint; anchored panels are unchanged from `md` up. Interactive controls (buttons, select trigger, calendar cells, time picker options, picker triggers) now set `touch-action` so taps activate without the double-tap-zoom delay on touch devices.
|
|
116
|
+
- Calendar: month navigation slides the new grid in from the travel direction (skipped under `prefers-reduced-motion`); the headless `[etCalendar]` exposes `navigationDirection` and `visibleMonthKey` for custom transitions. In the bottom sheet the calendar reserves the 6-week height so the sheet never resizes.
|
|
117
|
+
- Calendar / time picker: keyboard focus is no longer lost when the focused cell/option is re-created mid-interaction (month crossing, an off-step option leaving the list).
|
|
118
|
+
|
|
119
|
+
- [#3022](https://github.com/ethlete-io/ethdk/pull/3022) [`d651c4c`](https://github.com/ethlete-io/ethdk/commit/d651c4ccacb309db808f71ebc6ceda8e5e0ffe82) Thanks [@github-actions](https://github.com/apps/github-actions)! - Forms: new `et-otp-input` control (`OTP_INPUT_IMPORTS`) — segmented one-time-code/PIN entry backed by a single invisible native input for reliable SMS autofill (`autocomplete="one-time-code"`) and native paste. `length`/`charset` (numeric, alphanumeric or RegExp)/`masked` inputs, a `completed` output per full entry, separator-stripping paste handling, and tokens `--et-otp-input-segment-size/-gap/-radius`. Typed characters pop in and the active segment shows a blinking synthetic caret (both respect `prefers-reduced-motion`).
|
|
120
|
+
|
|
121
|
+
- [#3022](https://github.com/ethlete-io/ethdk/pull/3022) [`d651c4c`](https://github.com/ethlete-io/ethdk/commit/d651c4ccacb309db808f71ebc6ceda8e5e0ffe82) Thanks [@github-actions](https://github.com/apps/github-actions)! - Forms: new `et-rating` control (star rating, `RATING_IMPORTS`) — `FormValueControl<number | null>` implementing the slider pattern: hover preview, drag/swipe rating (mouse and touch, commits on release), half steps (`allowHalf`), click-again/Backspace to clear, arrow-key stepping, and a custom icon slot (`ng-template[etRatingIcon]`). The fill animates as one continuous sweep. Tokens `--et-rating-icon-size` / `--et-rating-gap`.
|
|
122
|
+
|
|
123
|
+
- [#3022](https://github.com/ethlete-io/ethdk/pull/3022) [`d651c4c`](https://github.com/ethlete-io/ethdk/commit/d651c4ccacb309db808f71ebc6ceda8e5e0ffe82) Thanks [@github-actions](https://github.com/apps/github-actions)! - Forms: new `et-tag-input` control (`TAG_INPUT_IMPORTS`) — free-text tags as removable chips with an inline field inside the `et-form-field` shell. Commits on configurable `separators` (Enter/comma by default) and blur, `normalizeTag`/`allowDuplicates`/`maxTags`, Backspace removes the last tag, and pastes split on separators and newlines. For tags with suggestions, compose the select (`multiple` + search + `allowCustomValues`) instead.
|
|
124
|
+
|
|
125
|
+
- [#3022](https://github.com/ethlete-io/ethdk/pull/3022) [`9431073`](https://github.com/ethlete-io/ethdk/commit/9431073bb693aa10bbb84d5196597cb2c4b7463f) Thanks [@github-actions](https://github.com/apps/github-actions)! - Forms: three new form-field controls and a small headless API addition.
|
|
126
|
+
- `et-textarea` (+ headless `TextareaDirective`): multi-line plain-text control with autosize on by default (`rows`, `minRows`, `maxRows`, `resize`).
|
|
127
|
+
- `et-number-input` (+ headless `NumberInputDirective`): numeric input whose form value is `number | null` (empty reads as `null`), with `min`/`max`/`step`; native spin buttons hidden.
|
|
128
|
+
- `et-color-input` (+ headless `ColorInputDirective`): native color picker as a swatch + hex value, form value `'#rrggbb' | null`; tokens `--et-color-input-swatch-size` / `--et-color-input-swatch-radius`.
|
|
129
|
+
- `InputDirective` (and the new input directives) now expose a public `nativeControl` signal referencing the native element, for integrations such as input masking.
|
|
130
|
+
|
|
131
|
+
- [#3022](https://github.com/ethlete-io/ethdk/pull/3022) [`e0b71b1`](https://github.com/ethlete-io/ethdk/commit/e0b71b19a3a14c2c2250d7a217299f7956bb5c3b) Thanks [@github-actions](https://github.com/apps/github-actions)! - Add `provideIconOverrides()` to swap the built-in `et-*` icons app-wide (or per subtree) — e.g. with your own Font Awesome set. Overrides are keyed by name/variant and merged on top of each component's own `provideIcons()`, so they reach into components that self-register the same name while leaving unlisted icons on their default. The override `name` autocompletes to the built-in set via the new `ET_BUILT_IN_ICON_NAMES` / `EtBuiltInIconName` exports, and any other string still registers a brand-new icon.
|
|
132
|
+
|
|
133
|
+
- [#3022](https://github.com/ethlete-io/ethdk/pull/3022) [`f168303`](https://github.com/ethlete-io/ethdk/commit/f168303bf0a78c559d6733d04c92a1a1c632d42a) Thanks [@github-actions](https://github.com/apps/github-actions)! - Rich text editor: new `et-multi-language-rich-text-editor` — authors the same content in several consumer-defined `languages`, switching between them from a toolbar dropdown that flags which languages are still empty. Its value is a `Record<languageCode, markdown>`, so every translation persists in one form field; bind it with `[formField]` and use the exported `requiredLanguages` validator to require specific translations.
|
|
134
|
+
|
|
135
|
+
- [#3024](https://github.com/ethlete-io/ethdk/pull/3024) [`144832a`](https://github.com/ethlete-io/ethdk/commit/144832ae74abfdbe8f084c14d6a903ee2eda18cf) Thanks [@TomTomB](https://github.com/TomTomB)! - Forms: new `et-phone-input` control (`PHONE_INPUT_IMPORTS`) — tel entry with a searchable country picker built on the select's headless core. Value is normalized `+<dial><national>`.
|
|
136
|
+
- Typing/pasting `+…` (or a `00…` international prefix) re-derives the country by longest dial-code match; manual picks survive shared codes like `+1`, switching countries keeps the national number, and a leading national trunk `0` is stripped (`0171…` → `+49171…`).
|
|
137
|
+
- Digits are grouped for display while unfocused (cosmetic only); the country picker searches names and dial codes, shows an empty state, keeps a fixed panel width, and takes custom flag art via `ng-template[etPhoneInputFlag]`.
|
|
138
|
+
- Zero runtime dependency: ISO + dial codes shipped, names via `Intl.DisplayNames`, emoji flags.
|
|
139
|
+
- The underlying select gained a `mirrorPanelWidth` input (off for compact triggers), with the panel capped at `min(400px, 100vw - 24px)`.
|
|
140
|
+
|
|
141
|
+
- [#3022](https://github.com/ethlete-io/ethdk/pull/3022) [`9431073`](https://github.com/ethlete-io/ethdk/commit/9431073bb693aa10bbb84d5196597cb2c4b7463f) Thanks [@github-actions](https://github.com/apps/github-actions)! - Rich text editor: the link flow is now a responsive popover (arrow-anchored on wider screens, a keyboard-pinned top sheet on touch) to edit a link's text and URL, with an open-in-new-tab toggle — replacing the browser `prompt()`. New-tab links persist through the Markdown value as raw HTML (`<a target="_blank" rel="noopener noreferrer">`); ordinary links stay `[text](url)`. `htmlToMarkdown` / `markdownToHtml` in `@ethlete/core` now round-trip `target="_blank"` anchors (sanitized href + forced `rel`). After applying a link the caret moves just past it, with a trailing space added when the link ends the line.
|
|
142
|
+
|
|
143
|
+
- [#3024](https://github.com/ethlete-io/ethdk/pull/3024) [`144832a`](https://github.com/ethlete-io/ethdk/commit/144832ae74abfdbe8f084c14d6a903ee2eda18cf) Thanks [@TomTomB](https://github.com/TomTomB)! - Rich text editor: mobile toolbar and editing fixes.
|
|
144
|
+
- On touch devices the static toolbar docks above the on-screen keyboard while editing (tracked via `visualViewport`, staying pinned as the page scrolls and inside a same-origin iframe) instead of sitting at the top under the platform's selection menu; it fades in only once the editor is active and its menus open without stealing keyboard focus. With a mouse/trackpad it stays at the top as before.
|
|
145
|
+
- The editable area's font size is floored at 16px on touch so iOS Safari no longer zooms the page on focus.
|
|
146
|
+
- Toggling a mark off at the end of a line is no longer undone by the next space.
|
|
147
|
+
- Escape (or the close button) in the link editor returns focus to the editor.
|
|
148
|
+
- Tab/Shift+Tab move between table cells and step the caret out past the first/last cell.
|
|
149
|
+
- `OverlayRef` gained `afterClosedEvent()`, which also reports how the overlay was closed (`escape`, `outside-pointer`, `api`, …).
|
|
150
|
+
|
|
151
|
+
- [#3022](https://github.com/ethlete-io/ethdk/pull/3022) [`9431073`](https://github.com/ethlete-io/ethdk/commit/9431073bb693aa10bbb84d5196597cb2c4b7463f) Thanks [@github-actions](https://github.com/apps/github-actions)! - Rich text editor:
|
|
152
|
+
- Table tool: the grid-size picker supports touch — drag across the grid to size the table and release to insert; when a table's header row was deleted the menu offers **Insert header row**, and inserting a row from the header now lands in the table body.
|
|
153
|
+
- The link editor and floating toolbar anchor to the selected text (not the full-width block) so the arrow points at the text, and the link editor now opens correctly in an empty editor.
|
|
154
|
+
- The trailing space inserted after atomic tokens (mentions, merge fields) and line-ending links is now a no-break space (Chrome dropped the plain one, gluing the next word); it still serializes as a regular space.
|
|
155
|
+
- Form field: the `inline` label mode now lays out correctly around rich text editors.
|
|
156
|
+
- `RichTextEditorToolDefinition` gains an optional `keydown` hook; table caret navigation now ships with `provideRichTextEditorTableTool` via that hook instead of being bundled into every editor (`editorDom.tableExit` / `tableEnter` are removed) — provide the table tool if your content can contain tables.
|
|
157
|
+
|
|
158
|
+
- [#3022](https://github.com/ethlete-io/ethdk/pull/3022) [`1f03013`](https://github.com/ethlete-io/ethdk/commit/1f03013609e8a734788db5b3b7657973fb430b87) Thanks [@github-actions](https://github.com/apps/github-actions)! - Rich text editor: toolbar accessibility and pressed-state polish.
|
|
159
|
+
- Toolbar buttons that open a menu or popover (heading, alignment, table, link) now show their pressed state while the popover is open.
|
|
160
|
+
- The toolbar is now a single tab stop following the ARIA toolbar pattern: Tab enters it, `ArrowLeft`/`ArrowRight` (plus `Home`/`End`) move focus between buttons, and the next Tab moves on to the editor content.
|
|
161
|
+
- `et-icon-button` now forwards the `emitAriaPressed` input, so `aria-pressed` can be suppressed on pressed-styled buttons that already expose `aria-expanded`.
|
|
162
|
+
|
|
163
|
+
- [#3024](https://github.com/ethlete-io/ethdk/pull/3024) [`144832a`](https://github.com/ethlete-io/ethdk/commit/144832ae74abfdbe8f084c14d6a903ee2eda18cf) Thanks [@TomTomB](https://github.com/TomTomB)! - Select: new `et-select` form control — a combobox-pattern trigger opening an anchored, width-mirrored listbox panel (`SELECT_IMPORTS`, plus the headless `[etSelect]` / `[etSelectTrigger]` / `ng-template[etSelectSurface]` / `[etSelectListbox]` / `[etSelectOption]` graph and `et-select-panel` / `et-select-option`). Integrates with `et-form-field` (new `select` control type, all label modes).
|
|
164
|
+
- Single select: full keyboard model — arrows/Home/End move virtual focus via `aria-activedescendant`, Enter/Space commit, typeahead while open, printable keys commit directly while closed; resolves a preselected value's label without ever opening the panel.
|
|
165
|
+
- Multi select (`multiple`): array value, options toggle without closing (`aria-multiselectable`), selection shown as removable `et-chip`s; `deselectOption(...)` and a customizable `ng-template[etSelectValue]`.
|
|
166
|
+
- Search (`input[etSelectSearch]`): inline searchable combobox; `filterMode` `'internal'` (default) or `'external'` (via the `queryChange` output), `allowCustomValues`, and `selectOptionsFromQuery(...)` to feed options from an `@ethlete/query` query (debounce, `minQueryLength`, `toHasMore` pagination).
|
|
167
|
+
- Async state inputs `loading` / `error` / `hasMoreItems` render default panel rows (spinner / alert / load-more via `loadMoreRequested`), each overridable through `ng-template[etSelectLoading]` / `[etSelectError]` / `[etSelectEmpty]`.
|
|
168
|
+
- `allowAddNew` shows an "Add new" row emitting `addNewRequested` with the current query (`addNewLabel`); a `clearable` (×) control clears the value; clicking anywhere on the control frame opens the panel.
|
|
169
|
+
- Options render with `content-visibility: auto` and animated hover so panels with thousands of options stay responsive; the panel animates its block size on content change.
|
|
170
|
+
- `readonly` chips (select and tag input) keep their normal look and drop the remove button; disabled form fields no longer show hover feedback.
|
|
171
|
+
- Form field exposes `controlFrameElement` on its contract so overlay-based controls can anchor their panels to the visible box.
|
|
172
|
+
|
|
173
|
+
- [#3022](https://github.com/ethlete-io/ethdk/pull/3022) [`bd8ec82`](https://github.com/ethlete-io/ethdk/commit/bd8ec8205d080bbfad58760dab13d346159b7a1c) Thanks [@github-actions](https://github.com/apps/github-actions)! - New time controls:
|
|
174
|
+
- `et-time-picker` (+ headless `[etTimePicker]` column/option directives): inline column-list time picker on `Date` values — columns derive from a date-fns format (12/24h, optional seconds, AM/PM), `minuteStep`/`secondStep`, roving-focus listbox columns with wrapping arrows and type-to-jump.
|
|
175
|
+
- `et-time-input` (+ headless `[etTimeInput]`): string-valued form control (`TIME_FORMAT` token, default `HH:mm`) with lenient typed parsing (`930` → 09:30, `9pm`, `9.30`) and an anchored time-picker overlay that stays open across part picks.
|
|
176
|
+
|
|
177
|
+
### Patch Changes
|
|
178
|
+
|
|
179
|
+
- [#3022](https://github.com/ethlete-io/ethdk/pull/3022) [`56a38d5`](https://github.com/ethlete-io/ethdk/commit/56a38d5f68c3f4a5d866757de23e06d0662aae25) Thanks [@github-actions](https://github.com/apps/github-actions)! - Date & time inputs: the picker trigger buttons now have a 44px tap target (invisible hit-area extension, no visual change). Time picker: options gain visual hierarchy (muted until interacted, tinted roving anchor, column separators) and the columns keep a half-faded number at each edge as a scroll cue.
|
|
180
|
+
|
|
181
|
+
- [#3022](https://github.com/ethlete-io/ethdk/pull/3022) [`1d8b757`](https://github.com/ethlete-io/ethdk/commit/1d8b7570f7d65a59616b99a93243b4ba7a9c9d53) Thanks [@github-actions](https://github.com/apps/github-actions)! - Icons: the `@ethlete/components:icons` generator no longer emits a `GENERATED_ICONS` aggregate array — spreading it into `provideIcons()` registered every icon and defeated tree shaking. Import the individual `IconDefinition` constants instead; re-running the generator removes the array from the generated file.
|
|
182
|
+
|
|
183
|
+
- [#3022](https://github.com/ethlete-io/ethdk/pull/3022) [`9431073`](https://github.com/ethlete-io/ethdk/commit/9431073bb693aa10bbb84d5196597cb2c4b7463f) Thanks [@github-actions](https://github.com/apps/github-actions)! - Overlay: anchored arrows (menu, tooltip, toggletip) now match the pane's actual background and border, so an arrow no longer stays a surface elevation too low when its pane sits on a raised surface (e.g. a menu opened from a filled form-field).
|
|
184
|
+
|
|
185
|
+
- [#3022](https://github.com/ethlete-io/ethdk/pull/3022) [`9431073`](https://github.com/ethlete-io/ethdk/commit/9431073bb693aa10bbb84d5196597cb2c4b7463f) Thanks [@github-actions](https://github.com/apps/github-actions)! - Overlays and menus now open on insecure origins (plain-HTTP pages on a LAN IP, not just `localhost`/HTTPS). Id generation used `crypto.randomUUID()`, which is `undefined` outside a secure context, so opening any dialog, sheet, anchored overlay or menu threw and only the backdrop appeared. A new `randomId()` helper in `@ethlete/core` uses `crypto.randomUUID()` when available and falls back to `getRandomValues` otherwise.
|
|
186
|
+
|
|
187
|
+
- [#3022](https://github.com/ethlete-io/ethdk/pull/3022) [`00b7c33`](https://github.com/ethlete-io/ethdk/commit/00b7c337e5ae0ac1bfc7186237b1ac2879eb018d) Thanks [@github-actions](https://github.com/apps/github-actions)! - Theming: overlay panes (menu, select) now resolve their color context through passive providers and apply it before the first painted frame.
|
|
188
|
+
- `ProvideColorDirective` gains `resolvedColor` — the color that actually applies at the provider's location, falling through passive providers like the CSS cascade does. `syncWithProvider` uses it, so a passive in-between provider (e.g. a form field's) no longer erases the theme inside a detached overlay pane.
|
|
189
|
+
- The menu and select panels install the context sync during construction instead of in an effect, eliminating a wrong-theme flash during the enter animation.
|
|
190
|
+
|
|
191
|
+
- [#3025](https://github.com/ethlete-io/ethdk/pull/3025) [`416cfb8`](https://github.com/ethlete-io/ethdk/commit/416cfb8c3f370783a96b2fe59b827e981cac7b17) Thanks [@TomTomB](https://github.com/TomTomB)! - Overlay sheets: fix the black gap that appeared at the docked edge while a sheet sprang into view. The enter spring overshoots slightly past the docked edge, and the filler meant to cover that gap was an `::after` strip positioned just outside the host — which sheets clip away with their `overflow: hidden` (kept for the rounded corners), so nothing painted and the page background showed through (most visible with sheets whose surface is painted on nested content, e.g. the date picker). The filler is now a solid offset `box-shadow`, which is not clipped by the host's own overflow and needs no change to the corner clipping. Its color is measured from the sheet's actually-painted surface at open time, so it matches even when that surface sits on nested content one elevation above the container host (where the host's own surface token would be a shade off).
|
|
192
|
+
|
|
193
|
+
- [#3022](https://github.com/ethlete-io/ethdk/pull/3022) [`1fa8e45`](https://github.com/ethlete-io/ethdk/commit/1fa8e4543c976658d0fbee5902ce43b9418932c3) Thanks [@github-actions](https://github.com/apps/github-actions)! - Overlay: the sidebar page component no longer triggers an `NG0912` component ID collision when `@ethlete/cdk` is loaded in the same app.
|
|
194
|
+
|
|
195
|
+
- [#3022](https://github.com/ethlete-io/ethdk/pull/3022) [`9431073`](https://github.com/ethlete-io/ethdk/commit/9431073bb693aa10bbb84d5196597cb2c4b7463f) Thanks [@github-actions](https://github.com/apps/github-actions)! - Rich text editor: the selection (floating) toolbar is now a pointer-device-only enhancement. On touch it fought the platform's native selection menu (Copy/Paste/…) and appeared unreliably, so it is suppressed there — the always-visible static toolbar covers formatting on touch. Mouse/trackpad behavior is unchanged.
|
|
196
|
+
|
|
197
|
+
- [#3022](https://github.com/ethlete-io/ethdk/pull/3022) [`428f971`](https://github.com/ethlete-io/ethdk/commit/428f9718c96038a4aa9fee603b11ea341c7fe99b) Thanks [@github-actions](https://github.com/apps/github-actions)! - Rich text editor fixes:
|
|
198
|
+
- The table size picker now supports arrow-key navigation (Enter/Space inserts the selected size, Escape/Tab close the menu from a focused cell).
|
|
199
|
+
- Toolbar buttons draw their focus ring on the button edge instead of 3px outside it, where it stacked on the field border and neighboring buttons.
|
|
200
|
+
- Applying a link with Enter no longer leaks a line break into the editor.
|
|
201
|
+
- Whitespace at the edges of the linked selection now stays outside the created anchor instead of being swallowed (e.g. the trailing space of a word selection).
|
|
202
|
+
|
|
3
203
|
## 1.0.0-next.21
|
|
4
204
|
|
|
5
205
|
### Minor Changes
|