@xui/numeric-input 2.0.0-alpha.11 → 2.0.0-alpha.12
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 +142 -156
- package/fesm2022/xui-numeric-input.mjs +57 -45
- package/fesm2022/xui-numeric-input.mjs.map +1 -1
- package/package.json +3 -3
- package/types/xui-numeric-input.d.ts +28 -22
package/README.md
CHANGED
|
@@ -1,89 +1,103 @@
|
|
|
1
|
-
<
|
|
2
|
-
|
|
1
|
+
<h1 align="center">xUI</h1>
|
|
2
|
+
|
|
3
|
+
<p align="center">
|
|
4
|
+
<strong>90 Angular components, one npm package each, themed from a single token layer.</strong>
|
|
5
|
+
</p>
|
|
6
|
+
|
|
7
|
+
<p align="center">
|
|
8
|
+
<a href="https://xuijs.org">Documentation</a> ·
|
|
9
|
+
<a href="https://develop--67d2b4c756077a325913e5d9.chromatic.com/?globals=theme:dark">Storybook</a> ·
|
|
10
|
+
<a href="https://stackblitz.com/fork/xui">StackBlitz</a> ·
|
|
11
|
+
<a href="#components">Components</a>
|
|
12
|
+
</p>
|
|
13
|
+
|
|
14
|
+
<p align="center">
|
|
15
|
+
<a href="https://github.com/rikarin/xui/actions/workflows/release.yml"><img src="https://github.com/rikarin/xui/actions/workflows/release.yml/badge.svg?branch=master" alt="Build status" /></a>
|
|
16
|
+
<a href="https://www.npmjs.com/package/@xui/core"><img src="https://img.shields.io/npm/v/%40xui/core.svg" alt="npm version" /></a>
|
|
17
|
+
<a href="https://www.npmjs.com/org/xui"><img src="https://img.shields.io/npm/dm/%40xui/core.svg" alt="Downloads" /></a>
|
|
18
|
+
<a href="https://app.netlify.com/sites/xui/deploys"><img src="https://api.netlify.com/api/v1/badges/fa0cfd14-97df-47fa-8a7c-152e6d4cfda2/deploy-status" alt="Netlify status" /></a>
|
|
3
19
|
</p>
|
|
4
20
|
|
|
5
21
|
---
|
|
6
22
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
[](https://app.netlify.com/sites/xui/deploys)
|
|
23
|
+
xUI is an Angular 22 component library styled with Tailwind CSS 4. You compose it from directives and
|
|
24
|
+
standalone components rather than configuring one monolith, and the set goes well past the
|
|
25
|
+
primitives: data tables, dock managers, omnibars, node graphs and date ranges are packages here, not
|
|
26
|
+
things you are left to build.
|
|
12
27
|
|
|
13
|
-
|
|
28
|
+
```ts
|
|
29
|
+
import { XuiButtonImports } from '@xui/button';
|
|
30
|
+
|
|
31
|
+
@Component({
|
|
32
|
+
imports: [XuiButtonImports],
|
|
33
|
+
template: `<button xuiButton color="primary">Save changes</button>`
|
|
34
|
+
})
|
|
35
|
+
export class Example {}
|
|
36
|
+
```
|
|
14
37
|
|
|
15
38
|
## Features
|
|
16
39
|
|
|
17
|
-
- **
|
|
18
|
-
|
|
19
|
-
- **
|
|
20
|
-
|
|
21
|
-
- **
|
|
22
|
-
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
-
|
|
28
|
-
|
|
29
|
-
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
| Spinner | [](https://www.npmjs.com/package/%40xui/spinner)<br />[](https://www.npmjs.com/package/%40xui/spinner)<br />[](https://bundlephobia.com/result?p=%40xui/spinner) | Spinner component |
|
|
53
|
-
| Status | [](https://www.npmjs.com/package/%40xui/status)<br />[](https://www.npmjs.com/package/%40xui/status)<br />[](https://bundlephobia.com/result?p=%40xui/status) | Status component |
|
|
54
|
-
| Table | [](https://www.npmjs.com/package/%40xui/table)<br />[](https://www.npmjs.com/package/%40xui/table)<br />[](https://bundlephobia.com/result?p=%40xui/table) | Table component |
|
|
55
|
-
|
|
56
|
-
## Installation
|
|
57
|
-
|
|
58
|
-
Install package with **PNPM**
|
|
40
|
+
- **One package per component.** Install `@xui/button` and you ship a button, not a library. Each
|
|
41
|
+
package exports an imports barrel for standalone components.
|
|
42
|
+
- **Signals throughout.** Signal inputs, `OnPush` and zoneless change detection; no `zone.js`
|
|
43
|
+
required.
|
|
44
|
+
- **Themed by tokens, not overrides.** Components style themselves with `bg-surface`,
|
|
45
|
+
`text-foreground-muted`, `border-error-muted`. Light and dark both work without a single `dark:`
|
|
46
|
+
class, and re-colouring an intent is one CSS variable.
|
|
47
|
+
- **Typed variants.** Every visual axis is a typed input backed by
|
|
48
|
+
[CVA](https://cva.style), and the `class` input merges through `tailwind-merge` — your utility
|
|
49
|
+
wins instead of fighting the component's.
|
|
50
|
+
- **Angular CDK underneath.** Overlays, focus traps, roving tabindex, typeahead, drag and drop and
|
|
51
|
+
bidi come from `@angular/cdk`, so keyboard behaviour and RTL are not reimplemented per component.
|
|
52
|
+
- **Built for coding agents.** An MCP server and an agent skill expose the real API of every
|
|
53
|
+
package — see [AI coding agents](#ai-coding-agents).
|
|
54
|
+
|
|
55
|
+
## Requirements
|
|
56
|
+
|
|
57
|
+
| | |
|
|
58
|
+
| ----------------------- | --- |
|
|
59
|
+
| Angular | 22 |
|
|
60
|
+
| Tailwind CSS | 4 |
|
|
61
|
+
| Node (development only) | 24 |
|
|
62
|
+
|
|
63
|
+
## Getting started
|
|
64
|
+
|
|
65
|
+
```bash
|
|
66
|
+
ng add @xui/core
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
That installs the core package and wires your global stylesheet: the theme import, the CDK overlay
|
|
70
|
+
stylesheet, and a `@source` glob pointing at the published packages. It is idempotent, so running it
|
|
71
|
+
again only adds what is missing. Use `nx add @xui/core` in an Nx workspace, and `--skip-overlay` if
|
|
72
|
+
you will not use dialogs, drawers, popovers, tooltips, menus or toasts.
|
|
73
|
+
|
|
74
|
+
Then add the components you need:
|
|
59
75
|
|
|
60
76
|
```bash
|
|
61
|
-
pnpm
|
|
77
|
+
pnpm add @xui/button @xui/dialog @xui/icon
|
|
62
78
|
```
|
|
63
79
|
|
|
64
80
|
## Theming
|
|
65
81
|
|
|
66
|
-
|
|
67
|
-
`text-foreground-muted`, `border-error-muted` — that resolve through the token layer shipped with
|
|
68
|
-
`@xui/core`. Import it once, after Tailwind:
|
|
82
|
+
To wire the styles by hand, import the token layer once after Tailwind:
|
|
69
83
|
|
|
70
84
|
```css
|
|
71
85
|
@import 'tailwindcss';
|
|
72
86
|
@import '@xui/core/styles/theme.css';
|
|
73
87
|
|
|
74
|
-
/* Only needed
|
|
75
|
-
|
|
88
|
+
/* Only needed for an overlay surface — popover, tooltip, menu, dialog, drawer
|
|
89
|
+
or toast. Without it, overlays render in the document flow. */
|
|
76
90
|
@import '@angular/cdk/overlay-prebuilt.css';
|
|
77
91
|
|
|
78
|
-
/*
|
|
92
|
+
/* Tailwind only emits utilities it can see, and it cannot see node_modules by default. */
|
|
79
93
|
@source '../node_modules/@xui';
|
|
80
94
|
```
|
|
81
95
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
96
|
+
Put `.dark` (or `[data-theme='dark']`) on `<html>` to switch themes; with neither present the theme
|
|
97
|
+
follows `prefers-color-scheme`. Both selectors work on any element, so a subtree can render in the
|
|
98
|
+
opposite theme.
|
|
85
99
|
|
|
86
|
-
Re-theme by overriding tokens after the import
|
|
100
|
+
Re-theme by overriding tokens after the import. The `darker` / `lighter` / `subtle` / `muted` /
|
|
87
101
|
`emphasis` steps of each intent are derived, so one declaration re-colours the whole ramp:
|
|
88
102
|
|
|
89
103
|
```css
|
|
@@ -93,37 +107,48 @@ Re-theme by overriding tokens after the import — the `darker` / `lighter` / `s
|
|
|
93
107
|
}
|
|
94
108
|
```
|
|
95
109
|
|
|
96
|
-
|
|
97
|
-
|
|
110
|
+
Controls share one density scale — 24 / 30 / 40px for `sm` / default / `lg` — so a button, an input
|
|
111
|
+
and a date field on the same row line up. Override `--control-height-md` to re-tune the library.
|
|
98
112
|
|
|
99
|
-
|
|
113
|
+
The full token reference, rendered in both themes, is the **Design tokens** page in Storybook.
|
|
100
114
|
|
|
101
|
-
|
|
115
|
+
## Components
|
|
102
116
|
|
|
103
|
-
|
|
117
|
+
<details>
|
|
118
|
+
<summary><strong>All 90 packages</strong>, grouped as they appear in Storybook</summary>
|
|
104
119
|
|
|
105
|
-
|
|
120
|
+
<br />
|
|
106
121
|
|
|
107
|
-
|
|
122
|
+
**Foundations** — [`@xui/icon`](https://www.npmjs.com/package/@xui/icon) · [`@xui/link`](https://www.npmjs.com/package/@xui/link) · [`@xui/text`](https://www.npmjs.com/package/@xui/text)
|
|
108
123
|
|
|
109
|
-
|
|
110
|
-
pnpm start
|
|
111
|
-
```
|
|
124
|
+
**Actions** — [`@xui/button`](https://www.npmjs.com/package/@xui/button) · [`@xui/button-group`](https://www.npmjs.com/package/@xui/button-group) · [`@xui/hotkeys`](https://www.npmjs.com/package/@xui/hotkeys)
|
|
112
125
|
|
|
113
|
-
|
|
126
|
+
**Forms** — [`@xui/cascader`](https://www.npmjs.com/package/@xui/cascader) · [`@xui/checkbox`](https://www.npmjs.com/package/@xui/checkbox) · [`@xui/color-picker`](https://www.npmjs.com/package/@xui/color-picker) · [`@xui/control-card`](https://www.npmjs.com/package/@xui/control-card) · [`@xui/control-group`](https://www.npmjs.com/package/@xui/control-group) · [`@xui/editable-text`](https://www.npmjs.com/package/@xui/editable-text) · [`@xui/file-input`](https://www.npmjs.com/package/@xui/file-input) · [`@xui/form-field`](https://www.npmjs.com/package/@xui/form-field) · [`@xui/html-select`](https://www.npmjs.com/package/@xui/html-select) · [`@xui/input`](https://www.npmjs.com/package/@xui/input) · [`@xui/input-otp`](https://www.npmjs.com/package/@xui/input-otp) · [`@xui/label`](https://www.npmjs.com/package/@xui/label) · [`@xui/multi-select`](https://www.npmjs.com/package/@xui/multi-select) · [`@xui/numeric-input`](https://www.npmjs.com/package/@xui/numeric-input) · [`@xui/radio`](https://www.npmjs.com/package/@xui/radio) · [`@xui/rate`](https://www.npmjs.com/package/@xui/rate) · [`@xui/rich-text-editor`](https://www.npmjs.com/package/@xui/rich-text-editor) · [`@xui/segmented-control`](https://www.npmjs.com/package/@xui/segmented-control) · [`@xui/select`](https://www.npmjs.com/package/@xui/select) · [`@xui/slider`](https://www.npmjs.com/package/@xui/slider) · [`@xui/suggest`](https://www.npmjs.com/package/@xui/suggest) · [`@xui/switch`](https://www.npmjs.com/package/@xui/switch) · [`@xui/tag-input`](https://www.npmjs.com/package/@xui/tag-input) · [`@xui/textarea`](https://www.npmjs.com/package/@xui/textarea) · [`@xui/transfer`](https://www.npmjs.com/package/@xui/transfer) · [`@xui/tree-select`](https://www.npmjs.com/package/@xui/tree-select) · [`@xui/upload`](https://www.npmjs.com/package/@xui/upload)
|
|
114
127
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
128
|
+
**Date & time** — [`@xui/date-input`](https://www.npmjs.com/package/@xui/date-input) · [`@xui/date-picker`](https://www.npmjs.com/package/@xui/date-picker) · [`@xui/date-range-input`](https://www.npmjs.com/package/@xui/date-range-input) · [`@xui/date-range-picker`](https://www.npmjs.com/package/@xui/date-range-picker) · [`@xui/time-picker`](https://www.npmjs.com/package/@xui/time-picker) · [`@xui/timezone-select`](https://www.npmjs.com/package/@xui/timezone-select)
|
|
129
|
+
|
|
130
|
+
**Data display** — [`@xui/avatar`](https://www.npmjs.com/package/@xui/avatar) · [`@xui/badge`](https://www.npmjs.com/package/@xui/badge) · [`@xui/card`](https://www.npmjs.com/package/@xui/card) · [`@xui/card-list`](https://www.npmjs.com/package/@xui/card-list) · [`@xui/carousel`](https://www.npmjs.com/package/@xui/carousel) · [`@xui/data-table`](https://www.npmjs.com/package/@xui/data-table) · [`@xui/descriptions`](https://www.npmjs.com/package/@xui/descriptions) · [`@xui/entity-title`](https://www.npmjs.com/package/@xui/entity-title) · [`@xui/kbd`](https://www.npmjs.com/package/@xui/kbd) · [`@xui/statistic`](https://www.npmjs.com/package/@xui/statistic) · [`@xui/status`](https://www.npmjs.com/package/@xui/status) · [`@xui/table`](https://www.npmjs.com/package/@xui/table) · [`@xui/tag`](https://www.npmjs.com/package/@xui/tag) · [`@xui/timeline`](https://www.npmjs.com/package/@xui/timeline) · [`@xui/tree`](https://www.npmjs.com/package/@xui/tree)
|
|
131
|
+
|
|
132
|
+
**Navigation** — [`@xui/breadcrumb`](https://www.npmjs.com/package/@xui/breadcrumb) · [`@xui/menubar`](https://www.npmjs.com/package/@xui/menubar) · [`@xui/navbar`](https://www.npmjs.com/package/@xui/navbar) · [`@xui/navigation-menu`](https://www.npmjs.com/package/@xui/navigation-menu) · [`@xui/pagination`](https://www.npmjs.com/package/@xui/pagination) · [`@xui/panel-stack`](https://www.npmjs.com/package/@xui/panel-stack) · [`@xui/steps`](https://www.npmjs.com/package/@xui/steps) · [`@xui/tabs`](https://www.npmjs.com/package/@xui/tabs)
|
|
133
|
+
|
|
134
|
+
**Overlays** — [`@xui/alert`](https://www.npmjs.com/package/@xui/alert) · [`@xui/alert-dialog`](https://www.npmjs.com/package/@xui/alert-dialog) · [`@xui/context-menu`](https://www.npmjs.com/package/@xui/context-menu) · [`@xui/dialog`](https://www.npmjs.com/package/@xui/dialog) · [`@xui/drawer`](https://www.npmjs.com/package/@xui/drawer) · [`@xui/menu`](https://www.npmjs.com/package/@xui/menu) · [`@xui/omnibar`](https://www.npmjs.com/package/@xui/omnibar) · [`@xui/popover`](https://www.npmjs.com/package/@xui/popover) · [`@xui/toast`](https://www.npmjs.com/package/@xui/toast) · [`@xui/tooltip`](https://www.npmjs.com/package/@xui/tooltip)
|
|
135
|
+
|
|
136
|
+
**Feedback** — [`@xui/callout`](https://www.npmjs.com/package/@xui/callout) · [`@xui/non-ideal-state`](https://www.npmjs.com/package/@xui/non-ideal-state) · [`@xui/progress-bar`](https://www.npmjs.com/package/@xui/progress-bar) · [`@xui/result`](https://www.npmjs.com/package/@xui/result) · [`@xui/skeleton`](https://www.npmjs.com/package/@xui/skeleton) · [`@xui/spinner`](https://www.npmjs.com/package/@xui/spinner)
|
|
137
|
+
|
|
138
|
+
**Layout** — [`@xui/accordion`](https://www.npmjs.com/package/@xui/accordion) · [`@xui/aspect-ratio`](https://www.npmjs.com/package/@xui/aspect-ratio) · [`@xui/collapse`](https://www.npmjs.com/package/@xui/collapse) · [`@xui/divider`](https://www.npmjs.com/package/@xui/divider) · [`@xui/dock-manager`](https://www.npmjs.com/package/@xui/dock-manager) · [`@xui/overflow-list`](https://www.npmjs.com/package/@xui/overflow-list) · [`@xui/scroll-area`](https://www.npmjs.com/package/@xui/scroll-area) · [`@xui/section`](https://www.npmjs.com/package/@xui/section) · [`@xui/splitter`](https://www.npmjs.com/package/@xui/splitter)
|
|
139
|
+
|
|
140
|
+
**Visualisation** — [`@xui/echarts`](https://www.npmjs.com/package/@xui/echarts) · [`@xui/konva`](https://www.npmjs.com/package/@xui/konva) · [`@xui/node-graph`](https://www.npmjs.com/package/@xui/node-graph)
|
|
141
|
+
|
|
142
|
+
</details>
|
|
118
143
|
|
|
119
144
|
## AI coding agents
|
|
120
145
|
|
|
121
146
|
Two pieces of tooling teach coding agents how to build with xUI.
|
|
122
147
|
|
|
123
|
-
**MCP server** — [`@xui/mcp`](
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
148
|
+
**MCP server** — [`@xui/mcp`](libs/mcp/README.md) exposes every package's real API (selectors, signal
|
|
149
|
+
inputs, variant axes, outputs), the design tokens, the docs and the Storybook examples as MCP tools.
|
|
150
|
+
It extracts them from the library sources, so every package is covered and the answers match the
|
|
151
|
+
installed version.
|
|
127
152
|
|
|
128
153
|
```json
|
|
129
154
|
{
|
|
@@ -133,85 +158,46 @@ answers match the installed version.
|
|
|
133
158
|
}
|
|
134
159
|
```
|
|
135
160
|
|
|
136
|
-
In this
|
|
137
|
-
once so it exists.
|
|
161
|
+
In this repository `.mcp.json` already points at `dist/libs/mcp/src/server.js` — run
|
|
162
|
+
`pnpm nx build mcp` once so it exists.
|
|
138
163
|
|
|
139
|
-
**Skill** — [`skills/xui`](
|
|
164
|
+
**Skill** — [`skills/xui`](skills/xui/SKILL.md) is the procedural knowledge: the three-layer
|
|
140
165
|
architecture, discovery through the MCP server, composition and styling rules, theming, the
|
|
141
166
|
generators, and the conventions for authoring a package inside the monorepo. `.claude/skills/xui`
|
|
142
167
|
links to it for agents working in this repository.
|
|
143
168
|
|
|
144
|
-
##
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
- [ ] Input OTP
|
|
180
|
-
- [ ] Toggle Group
|
|
181
|
-
|
|
182
|
-
### Additional
|
|
183
|
-
|
|
184
|
-
- [ ] Decagram
|
|
185
|
-
- [ ] Settings
|
|
186
|
-
- [ ] Drawer
|
|
187
|
-
- [ ] Panel Bar
|
|
188
|
-
- [ ] Textarea
|
|
189
|
-
- [ ] Time Picker
|
|
190
|
-
- [ ] Image Upload
|
|
191
|
-
- [ ] Banner
|
|
192
|
-
- [ ] Snack bar
|
|
193
|
-
|
|
194
|
-
## Opinionated "components"
|
|
195
|
-
|
|
196
|
-
- [ ] Graph View (Nodes)
|
|
197
|
-
- [ ] Analysis
|
|
198
|
-
- [ ] Charts (NG Charts?)
|
|
199
|
-
|
|
200
|
-
## CLI
|
|
201
|
-
|
|
202
|
-
Make cli to install the components
|
|
203
|
-
|
|
204
|
-
## TODO
|
|
205
|
-
|
|
206
|
-
- Button
|
|
207
|
-
|
|
208
|
-
- Icon
|
|
209
|
-
- Shine
|
|
210
|
-
|
|
211
|
-
- Breadcrumb
|
|
212
|
-
|
|
213
|
-
- fix styling issues
|
|
214
|
-
- on hover stuff
|
|
215
|
-
- data driven component
|
|
216
|
-
|
|
217
|
-
- adjust generator to generate stories into the apps/storybook
|
|
169
|
+
## Browser support
|
|
170
|
+
|
|
171
|
+
The browsers Angular itself supports — see the
|
|
172
|
+
[Angular browser support policy](https://angular.dev/reference/versions#browser-support).
|
|
173
|
+
|
|
174
|
+
## Development
|
|
175
|
+
|
|
176
|
+
The workspace is [Nx](https://nx.dev) + pnpm.
|
|
177
|
+
|
|
178
|
+
```bash
|
|
179
|
+
pnpm install
|
|
180
|
+
pnpm start # documentation site on :4200
|
|
181
|
+
pnpm storybook # component gallery on :4400
|
|
182
|
+
pnpm nx serve admin # the example admin application
|
|
183
|
+
pnpm test # unit tests
|
|
184
|
+
pnpm nx test-storybook ui-storybook # render every story in headless Chromium
|
|
185
|
+
pnpm build # build every package
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
Commits follow [Conventional Commits](https://www.conventionalcommits.org) and are linted — the
|
|
189
|
+
release is cut from them. See [docs/releasing.md](docs/releasing.md) for how a version is published,
|
|
190
|
+
[apps/ui-storybook/README.md](apps/ui-storybook/README.md) before writing stories, and
|
|
191
|
+
[apps/app/README.md](apps/app/README.md) for the documentation site, whose component pages are
|
|
192
|
+
generated from those same stories, and [apps/admin/README.md](apps/admin/README.md) for the example
|
|
193
|
+
admin application — a full app built from these packages, which is the fastest way to see how they
|
|
194
|
+
fit together.
|
|
195
|
+
|
|
196
|
+
## Contributing
|
|
197
|
+
|
|
198
|
+
Bugs and ideas are welcome in [issues](https://github.com/Rikarin/xui/issues). For a change of any
|
|
199
|
+
size, open an issue first so the API can be agreed before the code exists.
|
|
200
|
+
|
|
201
|
+
## License
|
|
202
|
+
|
|
203
|
+
See [LICENSE](LICENSE).
|
|
@@ -1,28 +1,23 @@
|
|
|
1
1
|
import { NgTemplateOutlet } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import {
|
|
4
|
-
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
3
|
+
import { signal, input, numberAttribute, booleanAttribute, linkedSignal, computed, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
5
4
|
import { provideIcons, NgIcon } from '@ng-icons/core';
|
|
6
5
|
import { matKeyboardArrowDownRound, matKeyboardArrowUpRound } from '@ng-icons/material-icons/round';
|
|
7
|
-
import { xui } from '@xui/core';
|
|
6
|
+
import { createXConfigToken, xui } from '@xui/core';
|
|
7
|
+
import { uniqueId } from '@xui/core/a11y';
|
|
8
|
+
import { XFormFieldControl } from '@xui/core/form-field';
|
|
9
|
+
import { createXErrorState, createXValueAccessor, provideXValueAccessor } from '@xui/core/forms';
|
|
8
10
|
import { XuiIcon } from '@xui/icon';
|
|
9
11
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
+
/** Application-wide defaults for XuiNumericInput. */
|
|
13
|
+
const [injectXuiNumericInputConfig, provideXuiNumericInputConfig] = createXConfigToken('XuiNumericInputConfig', {
|
|
14
|
+
size: 'md',
|
|
12
15
|
buttonPosition: 'right',
|
|
13
16
|
stepSize: 1,
|
|
14
17
|
majorStepSize: 10,
|
|
15
18
|
minorStepSize: 0.1,
|
|
16
19
|
clampValueOnBlur: true
|
|
17
|
-
};
|
|
18
|
-
const XuiNumericInputConfigToken = new InjectionToken('XuiNumericInputConfig');
|
|
19
|
-
/** Application-wide defaults for XuiNumericInput. */
|
|
20
|
-
function provideXuiNumericInputConfig(config) {
|
|
21
|
-
return { provide: XuiNumericInputConfigToken, useValue: { ...defaultConfig, ...config } };
|
|
22
|
-
}
|
|
23
|
-
function injectXuiNumericInputConfig() {
|
|
24
|
-
return inject(XuiNumericInputConfigToken, { optional: true }) ?? defaultConfig;
|
|
25
|
-
}
|
|
20
|
+
});
|
|
26
21
|
|
|
27
22
|
/**
|
|
28
23
|
* A number field with stepper buttons and keyboard increment.
|
|
@@ -38,6 +33,15 @@ function injectXuiNumericInputConfig() {
|
|
|
38
33
|
*/
|
|
39
34
|
class XuiNumericInput {
|
|
40
35
|
config = injectXuiNumericInputConfig();
|
|
36
|
+
formState = createXErrorState();
|
|
37
|
+
fieldId = uniqueId('xui-numeric-input');
|
|
38
|
+
/** Error state for `xui-form-field`, derived from the optional bound form control. */
|
|
39
|
+
errorState = this.formState.errorState;
|
|
40
|
+
/** Points the form field's `<label for>` at the inner text field, not the host. */
|
|
41
|
+
controlId = signal(this.fieldId).asReadonly();
|
|
42
|
+
get ngControl() {
|
|
43
|
+
return this.formState.ngControl();
|
|
44
|
+
}
|
|
41
45
|
/** The user-defined classes on the wrapper. Merged last so they win. */
|
|
42
46
|
class = input('', /* @ts-ignore */
|
|
43
47
|
...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
@@ -55,10 +59,14 @@ class XuiNumericInput {
|
|
|
55
59
|
minorStepSize = input(this.config.minorStepSize, { ...(ngDevMode ? { debugName: "minorStepSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
56
60
|
clampValueOnBlur = input(this.config.clampValueOnBlur, { ...(ngDevMode ? { debugName: "clampValueOnBlur" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
57
61
|
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
+
cva = createXValueAccessor({
|
|
63
|
+
onWrite: value => {
|
|
64
|
+
this.value.set(value ?? null);
|
|
65
|
+
this.text.set(value == null ? '' : String(value));
|
|
66
|
+
},
|
|
67
|
+
disabled: this.disabled
|
|
68
|
+
});
|
|
69
|
+
isDisabled = this.cva.disabled;
|
|
62
70
|
// Aliased so the writable `value` linkedSignal below can own the public name.
|
|
63
71
|
// Coerce so `value="5"` (a string attribute) becomes the number 5, not the
|
|
64
72
|
// string "5" that would then concatenate under `+ stepSize`.
|
|
@@ -79,14 +87,14 @@ class XuiNumericInput {
|
|
|
79
87
|
return this.text() !== '' || value == null ? this.text() : String(value);
|
|
80
88
|
}, /* @ts-ignore */
|
|
81
89
|
...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
|
|
82
|
-
canIncrement = computed(() => !this.
|
|
90
|
+
canIncrement = computed(() => !this.isDisabled() && !this.atMax(this.value()), /* @ts-ignore */
|
|
83
91
|
...(ngDevMode ? [{ debugName: "canIncrement" }] : /* istanbul ignore next */ []));
|
|
84
|
-
canDecrement = computed(() => !this.
|
|
92
|
+
canDecrement = computed(() => !this.isDisabled() && !this.atMin(this.value()), /* @ts-ignore */
|
|
85
93
|
...(ngDevMode ? [{ debugName: "canDecrement" }] : /* istanbul ignore next */ []));
|
|
86
94
|
computedClass = computed(() => xui('border-border bg-surface-inset focus-within:border-focus inline-flex items-stretch overflow-hidden rounded-lg border transition-colors',
|
|
87
95
|
// The wrapper carries the control height so the stepper column cannot stretch the field
|
|
88
96
|
// past the shared scale.
|
|
89
|
-
this.size() === 'sm' ? 'h-(--control-height-sm)' : 'h-(--control-height-md)', this.
|
|
97
|
+
this.size() === 'sm' ? 'h-(--control-height-sm)' : 'h-(--control-height-md)', this.isDisabled() && 'cursor-not-allowed opacity-50', this.class()), /* @ts-ignore */
|
|
90
98
|
...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
|
|
91
99
|
fieldClass = computed(() => xui('text-foreground placeholder:text-foreground-subtle w-full min-w-0 bg-transparent tabular-nums outline-none', this.size() === 'sm' ? 'px-(--control-padding-sm) text-xs' : 'px-(--control-padding-md) text-sm'), /* @ts-ignore */
|
|
92
100
|
...(ngDevMode ? [{ debugName: "fieldClass" }] : /* istanbul ignore next */ []));
|
|
@@ -94,13 +102,11 @@ class XuiNumericInput {
|
|
|
94
102
|
...(ngDevMode ? [{ debugName: "stepperColumnClass" }] : /* istanbul ignore next */ []));
|
|
95
103
|
stepperClass = computed(() => 'text-foreground-muted hover:bg-hover-overlay hover:text-foreground flex flex-1 items-center justify-center px-1.5 disabled:pointer-events-none disabled:opacity-40', /* @ts-ignore */
|
|
96
104
|
...(ngDevMode ? [{ debugName: "stepperClass" }] : /* istanbul ignore next */ []));
|
|
97
|
-
onChange;
|
|
98
|
-
onTouched;
|
|
99
105
|
onInput(raw) {
|
|
100
106
|
this.text.set(raw);
|
|
101
107
|
const parsed = this.parse(raw);
|
|
102
108
|
this.value.set(parsed);
|
|
103
|
-
this.
|
|
109
|
+
this.cva.notifyChange(parsed);
|
|
104
110
|
}
|
|
105
111
|
onKeydown(event) {
|
|
106
112
|
if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') {
|
|
@@ -116,10 +122,10 @@ class XuiNumericInput {
|
|
|
116
122
|
}
|
|
117
123
|
// Re-sync the text with the committed value, dropping a half-typed entry.
|
|
118
124
|
this.text.set(this.value() == null ? '' : String(this.value()));
|
|
119
|
-
this.
|
|
125
|
+
this.cva.markTouched();
|
|
120
126
|
}
|
|
121
127
|
step(delta) {
|
|
122
|
-
if (this.
|
|
128
|
+
if (this.isDisabled()) {
|
|
123
129
|
return;
|
|
124
130
|
}
|
|
125
131
|
const base = this.value() ?? 0;
|
|
@@ -130,7 +136,7 @@ class XuiNumericInput {
|
|
|
130
136
|
}
|
|
131
137
|
commit(value) {
|
|
132
138
|
this.value.set(value);
|
|
133
|
-
this.
|
|
139
|
+
this.cva.notifyChange(value);
|
|
134
140
|
}
|
|
135
141
|
parse(raw) {
|
|
136
142
|
const trimmed = raw.trim();
|
|
@@ -158,32 +164,30 @@ class XuiNumericInput {
|
|
|
158
164
|
atMin(value) {
|
|
159
165
|
return value != null && this.min() != null && value <= this.min();
|
|
160
166
|
}
|
|
161
|
-
writeValue
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
registerOnChange(fn) {
|
|
166
|
-
this.onChange = fn;
|
|
167
|
-
}
|
|
168
|
-
registerOnTouched(fn) {
|
|
169
|
-
this.onTouched = fn;
|
|
170
|
-
}
|
|
171
|
-
setDisabledState(isDisabled) {
|
|
172
|
-
this.disabledByForm.set(isDisabled);
|
|
173
|
-
}
|
|
167
|
+
writeValue = this.cva.writeValue;
|
|
168
|
+
registerOnChange = this.cva.registerOnChange;
|
|
169
|
+
registerOnTouched = this.cva.registerOnTouched;
|
|
170
|
+
setDisabledState = this.cva.setDisabledState;
|
|
174
171
|
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiNumericInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
175
|
-
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: XuiNumericInput, isStandalone: true, selector: "xui-numeric-input", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, buttonPosition: { classPropertyName: "buttonPosition", publicName: "buttonPosition", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, stepSize: { classPropertyName: "stepSize", publicName: "stepSize", isSignal: true, isRequired: false, transformFunction: null }, majorStepSize: { classPropertyName: "majorStepSize", publicName: "majorStepSize", isSignal: true, isRequired: false, transformFunction: null }, minorStepSize: { classPropertyName: "minorStepSize", publicName: "minorStepSize", isSignal: true, isRequired: false, transformFunction: null }, clampValueOnBlur: { classPropertyName: "clampValueOnBlur", publicName: "clampValueOnBlur", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, providers: [
|
|
172
|
+
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: XuiNumericInput, isStandalone: true, selector: "xui-numeric-input", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, buttonPosition: { classPropertyName: "buttonPosition", publicName: "buttonPosition", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, stepSize: { classPropertyName: "stepSize", publicName: "stepSize", isSignal: true, isRequired: false, transformFunction: null }, majorStepSize: { classPropertyName: "majorStepSize", publicName: "majorStepSize", isSignal: true, isRequired: false, transformFunction: null }, minorStepSize: { classPropertyName: "minorStepSize", publicName: "minorStepSize", isSignal: true, isRequired: false, transformFunction: null }, clampValueOnBlur: { classPropertyName: "clampValueOnBlur", publicName: "clampValueOnBlur", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, providers: [
|
|
173
|
+
provideXValueAccessor((() => XuiNumericInput)),
|
|
174
|
+
{
|
|
175
|
+
provide: XFormFieldControl,
|
|
176
|
+
useExisting: forwardRef((() => XuiNumericInput))
|
|
177
|
+
}
|
|
178
|
+
], ngImport: i0, template: `
|
|
176
179
|
@if (buttonPosition() === 'left') {
|
|
177
180
|
<ng-container [ngTemplateOutlet]="steppers" />
|
|
178
181
|
}
|
|
179
182
|
|
|
180
183
|
<input
|
|
181
184
|
#field
|
|
185
|
+
[id]="fieldId"
|
|
182
186
|
type="text"
|
|
183
187
|
inputmode="decimal"
|
|
184
188
|
[class]="fieldClass()"
|
|
185
189
|
[value]="display()"
|
|
186
|
-
[disabled]="
|
|
190
|
+
[disabled]="isDisabled()"
|
|
187
191
|
[attr.placeholder]="placeholder()"
|
|
188
192
|
[attr.aria-label]="ariaLabel()"
|
|
189
193
|
role="spinbutton"
|
|
@@ -223,7 +227,7 @@ class XuiNumericInput {
|
|
|
223
227
|
</button>
|
|
224
228
|
</div>
|
|
225
229
|
</ng-template>
|
|
226
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: XuiIcon, selector: "ng-icon[xui]", inputs: ["class", "size", "color", "
|
|
230
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: XuiIcon, selector: "ng-icon[xui]", inputs: ["class", "size", "color", "label"], exportAs: ["xuiIcon"] }], viewProviders: [provideIcons({ matKeyboardArrowUpRound, matKeyboardArrowDownRound })], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
227
231
|
}
|
|
228
232
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiNumericInput, decorators: [{
|
|
229
233
|
type: Component,
|
|
@@ -232,7 +236,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
232
236
|
imports: [NgTemplateOutlet, NgIcon, XuiIcon],
|
|
233
237
|
viewProviders: [provideIcons({ matKeyboardArrowUpRound, matKeyboardArrowDownRound })],
|
|
234
238
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
235
|
-
|
|
239
|
+
encapsulation: ViewEncapsulation.None,
|
|
240
|
+
providers: [
|
|
241
|
+
provideXValueAccessor((() => XuiNumericInput)),
|
|
242
|
+
{
|
|
243
|
+
provide: XFormFieldControl,
|
|
244
|
+
useExisting: forwardRef((() => XuiNumericInput))
|
|
245
|
+
}
|
|
246
|
+
],
|
|
236
247
|
template: `
|
|
237
248
|
@if (buttonPosition() === 'left') {
|
|
238
249
|
<ng-container [ngTemplateOutlet]="steppers" />
|
|
@@ -240,11 +251,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
240
251
|
|
|
241
252
|
<input
|
|
242
253
|
#field
|
|
254
|
+
[id]="fieldId"
|
|
243
255
|
type="text"
|
|
244
256
|
inputmode="decimal"
|
|
245
257
|
[class]="fieldClass()"
|
|
246
258
|
[value]="display()"
|
|
247
|
-
[disabled]="
|
|
259
|
+
[disabled]="isDisabled()"
|
|
248
260
|
[attr.placeholder]="placeholder()"
|
|
249
261
|
[attr.aria-label]="ariaLabel()"
|
|
250
262
|
role="spinbutton"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"xui-numeric-input.mjs","sources":["../../../../../../libs/ui/numeric-input/xui/src/lib/numeric-input.token.ts","../../../../../../libs/ui/numeric-input/xui/src/lib/numeric-input.ts","../../../../../../libs/ui/numeric-input/xui/src/index.ts","../../../../../../libs/ui/numeric-input/xui/src/xui-numeric-input.ts"],"sourcesContent":["import { InjectionToken, ValueProvider, inject } from '@angular/core';\n\nexport type XuiNumericInputSize = 'default' | 'sm';\n/** Where the stepper buttons sit. */\nexport type XuiNumericButtonPosition = 'right' | 'left' | 'none';\n\nexport interface XuiNumericInputConfig {\n size: XuiNumericInputSize;\n buttonPosition: XuiNumericButtonPosition;\n /** Step applied by a click or ArrowUp/Down. */\n stepSize: number;\n /** Step when Shift is held — the coarse jump. */\n majorStepSize: number;\n /** Step when Alt is held — the fine nudge. */\n minorStepSize: number;\n /** Snap an out-of-range value back into [min, max] when focus leaves. */\n clampValueOnBlur: boolean;\n}\n\nconst defaultConfig: XuiNumericInputConfig = {\n size: 'default',\n buttonPosition: 'right',\n stepSize: 1,\n majorStepSize: 10,\n minorStepSize: 0.1,\n clampValueOnBlur: true\n};\n\nconst XuiNumericInputConfigToken = new InjectionToken<XuiNumericInputConfig>('XuiNumericInputConfig');\n\n/** Application-wide defaults for XuiNumericInput. */\nexport function provideXuiNumericInputConfig(config: Partial<XuiNumericInputConfig>): ValueProvider {\n return { provide: XuiNumericInputConfigToken, useValue: { ...defaultConfig, ...config } };\n}\n\nexport function injectXuiNumericInputConfig(): XuiNumericInputConfig {\n return inject(XuiNumericInputConfigToken, { optional: true }) ?? defaultConfig;\n}\n","import type { BooleanInput, NumberInput } from '@angular/cdk/coercion';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n booleanAttribute,\n computed,\n forwardRef,\n input,\n linkedSignal,\n numberAttribute,\n signal\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { matKeyboardArrowDownRound, matKeyboardArrowUpRound } from '@ng-icons/material-icons/round';\nimport { xui } from '@xui/core';\nimport type { ChangeFn, TouchFn } from '@xui/core/forms';\nimport { XuiIcon } from '@xui/icon';\nimport type { ClassValue } from 'clsx';\nimport {\n injectXuiNumericInputConfig,\n type XuiNumericButtonPosition,\n type XuiNumericInputSize\n} from './numeric-input.token';\n\n/**\n * A number field with stepper buttons and keyboard increment.\n *\n * ```html\n * <xui-numeric-input [(ngModel)]=\"quantity\" [min]=\"0\" [max]=\"99\" />\n * ```\n *\n * The value is a `number | null` (empty is `null`, not `0`, so \"no answer\" is\n * distinct from zero). ArrowUp/Down step by `stepSize`; Shift steps by\n * `majorStepSize`, Alt by `minorStepSize`. It is a `ControlValueAccessor`, so\n * forms bind to it directly, and it clamps into `[min, max]` on blur.\n */\n@Component({\n selector: 'xui-numeric-input',\n imports: [NgTemplateOutlet, NgIcon, XuiIcon],\n viewProviders: [provideIcons({ matKeyboardArrowUpRound, matKeyboardArrowDownRound })],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => XuiNumericInput), multi: true }],\n template: `\n @if (buttonPosition() === 'left') {\n <ng-container [ngTemplateOutlet]=\"steppers\" />\n }\n\n <input\n #field\n type=\"text\"\n inputmode=\"decimal\"\n [class]=\"fieldClass()\"\n [value]=\"display()\"\n [disabled]=\"disabledState()\"\n [attr.placeholder]=\"placeholder()\"\n [attr.aria-label]=\"ariaLabel()\"\n role=\"spinbutton\"\n [attr.aria-valuenow]=\"value()\"\n [attr.aria-valuemin]=\"min() ?? null\"\n [attr.aria-valuemax]=\"max() ?? null\"\n (input)=\"onInput(field.value)\"\n (keydown)=\"onKeydown($event)\"\n (blur)=\"onBlur()\"\n />\n\n @if (buttonPosition() === 'right') {\n <ng-container [ngTemplateOutlet]=\"steppers\" />\n }\n\n <ng-template #steppers>\n <div [class]=\"stepperColumnClass()\">\n <button\n type=\"button\"\n tabindex=\"-1\"\n aria-label=\"Increment\"\n [class]=\"stepperClass()\"\n [disabled]=\"!canIncrement()\"\n (click)=\"step(stepSize())\"\n >\n <ng-icon xui size=\"sm\" name=\"matKeyboardArrowUpRound\" />\n </button>\n <button\n type=\"button\"\n tabindex=\"-1\"\n aria-label=\"Decrement\"\n [class]=\"stepperClass()\"\n [disabled]=\"!canDecrement()\"\n (click)=\"step(-stepSize())\"\n >\n <ng-icon xui size=\"sm\" name=\"matKeyboardArrowDownRound\" />\n </button>\n </div>\n </ng-template>\n `,\n host: {\n '[class]': 'computedClass()'\n }\n})\nexport class XuiNumericInput implements ControlValueAccessor {\n private readonly config = injectXuiNumericInputConfig();\n\n /** The user-defined classes on the wrapper. Merged last so they win. */\n readonly class = input<ClassValue>('');\n readonly size = input<XuiNumericInputSize>(this.config.size);\n readonly buttonPosition = input<XuiNumericButtonPosition>(this.config.buttonPosition);\n\n readonly placeholder = input<string | null>(null);\n readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });\n\n readonly min = input<number | undefined, NumberInput>(undefined, { transform: numberAttribute });\n readonly max = input<number | undefined, NumberInput>(undefined, { transform: numberAttribute });\n readonly stepSize = input<number, NumberInput>(this.config.stepSize, { transform: numberAttribute });\n readonly majorStepSize = input<number, NumberInput>(this.config.majorStepSize, { transform: numberAttribute });\n readonly minorStepSize = input<number, NumberInput>(this.config.minorStepSize, { transform: numberAttribute });\n readonly clampValueOnBlur = input<boolean, BooleanInput>(this.config.clampValueOnBlur, {\n transform: booleanAttribute\n });\n\n readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n private readonly disabledByForm = signal(false);\n protected readonly disabledState = computed(() => this.disabled() || this.disabledByForm());\n\n // Aliased so the writable `value` linkedSignal below can own the public name.\n // Coerce so `value=\"5\"` (a string attribute) becomes the number 5, not the\n // string \"5\" that would then concatenate under `+ stepSize`.\n readonly valueInput = input<number | null, number | string | null | undefined>(null, {\n // eslint-disable-next-line @angular-eslint/no-input-rename\n alias: 'value',\n transform: raw => (raw == null || raw === '' ? null : Number(raw))\n });\n /** The current numeric value, or `null` when empty. Two-way via `value`. */\n readonly value = linkedSignal(this.valueInput);\n\n // The text the field shows. Kept separate from `value` so a half-typed entry\n // (\"-\", \"1.\") is preserved while the parsed value stays null/last-valid.\n private readonly text = signal<string>('');\n protected readonly display = computed(() => {\n const value = this.value();\n\n // Do not overwrite what the user is mid-typing with a formatted number.\n return this.text() !== '' || value == null ? this.text() : String(value);\n });\n\n protected readonly canIncrement = computed(() => !this.disabledState() && !this.atMax(this.value()));\n protected readonly canDecrement = computed(() => !this.disabledState() && !this.atMin(this.value()));\n\n protected readonly computedClass = computed(() =>\n xui(\n 'border-border bg-surface-inset focus-within:border-focus inline-flex items-stretch overflow-hidden rounded-lg border transition-colors',\n // The wrapper carries the control height so the stepper column cannot stretch the field\n // past the shared scale.\n this.size() === 'sm' ? 'h-(--control-height-sm)' : 'h-(--control-height-md)',\n this.disabledState() && 'cursor-not-allowed opacity-50',\n this.class()\n )\n );\n protected readonly fieldClass = computed(() =>\n xui(\n 'text-foreground placeholder:text-foreground-subtle w-full min-w-0 bg-transparent tabular-nums outline-none',\n this.size() === 'sm' ? 'px-(--control-padding-sm) text-xs' : 'px-(--control-padding-md) text-sm'\n )\n );\n protected readonly stepperColumnClass = computed(() => 'border-border flex shrink-0 flex-col border-s');\n protected readonly stepperClass = computed(\n () =>\n 'text-foreground-muted hover:bg-hover-overlay hover:text-foreground flex flex-1 items-center justify-center px-1.5 disabled:pointer-events-none disabled:opacity-40'\n );\n\n private onChange?: ChangeFn<number | null>;\n protected onTouched?: TouchFn;\n\n protected onInput(raw: string): void {\n this.text.set(raw);\n\n const parsed = this.parse(raw);\n this.value.set(parsed);\n this.onChange?.(parsed);\n }\n\n protected onKeydown(event: KeyboardEvent): void {\n if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') {\n return;\n }\n\n event.preventDefault();\n const magnitude = event.shiftKey ? this.majorStepSize() : event.altKey ? this.minorStepSize() : this.stepSize();\n this.step(event.key === 'ArrowUp' ? magnitude : -magnitude);\n }\n\n protected onBlur(): void {\n if (this.clampValueOnBlur()) {\n this.commit(this.clamp(this.value()));\n }\n\n // Re-sync the text with the committed value, dropping a half-typed entry.\n this.text.set(this.value() == null ? '' : String(this.value()));\n this.onTouched?.();\n }\n\n step(delta: number): void {\n if (this.disabledState()) {\n return;\n }\n\n const base = this.value() ?? 0;\n // Round to the step grid so 0.1 + 0.2 does not drift to 0.30000000000000004.\n const next = this.clamp(this.round(base + delta));\n this.commit(next);\n this.text.set(next == null ? '' : String(next));\n }\n\n private commit(value: number | null): void {\n this.value.set(value);\n this.onChange?.(value);\n }\n\n private parse(raw: string): number | null {\n const trimmed = raw.trim();\n\n if (trimmed === '' || trimmed === '-' || trimmed === '.' || trimmed === '-.') {\n return null;\n }\n\n const parsed = Number(trimmed);\n\n return Number.isFinite(parsed) ? parsed : this.value();\n }\n\n private clamp(value: number | null): number | null {\n if (value == null) {\n return null;\n }\n\n const min = this.min();\n const max = this.max();\n\n return Math.min(max ?? Infinity, Math.max(min ?? -Infinity, value));\n }\n\n private round(value: number): number {\n // Keep a sane number of decimals so step math stays exact.\n return Math.round(value * 1e10) / 1e10;\n }\n\n private atMax(value: number | null): boolean {\n return value != null && this.max() != null && value >= this.max()!;\n }\n\n private atMin(value: number | null): boolean {\n return value != null && this.min() != null && value <= this.min()!;\n }\n\n writeValue(value: number | null): void {\n this.value.set(value ?? null);\n this.text.set(value == null ? '' : String(value));\n }\n\n registerOnChange(fn: ChangeFn<number | null>): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: TouchFn): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.disabledByForm.set(isDisabled);\n }\n}\n","import { XuiNumericInput } from './lib/numeric-input';\n\nexport * from './lib/numeric-input';\nexport * from './lib/numeric-input.token';\n\nexport const XuiNumericInputImports = [XuiNumericInput] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"xui-numeric-input.mjs","sources":["../../../../../../libs/ui/numeric-input/xui/src/lib/numeric-input.token.ts","../../../../../../libs/ui/numeric-input/xui/src/lib/numeric-input.ts","../../../../../../libs/ui/numeric-input/xui/src/index.ts","../../../../../../libs/ui/numeric-input/xui/src/xui-numeric-input.ts"],"sourcesContent":["import { createXConfigToken } from '@xui/core';\n\nexport type XuiNumericInputSize = 'md' | 'sm';\n/** Where the stepper buttons sit. */\nexport type XuiNumericButtonPosition = 'right' | 'left' | 'none';\n\nexport interface XuiNumericInputConfig {\n size: XuiNumericInputSize;\n buttonPosition: XuiNumericButtonPosition;\n /** Step applied by a click or ArrowUp/Down. */\n stepSize: number;\n /** Step when Shift is held — the coarse jump. */\n majorStepSize: number;\n /** Step when Alt is held — the fine nudge. */\n minorStepSize: number;\n /** Snap an out-of-range value back into [min, max] when focus leaves. */\n clampValueOnBlur: boolean;\n}\n\n/** Application-wide defaults for XuiNumericInput. */\nexport const [injectXuiNumericInputConfig, provideXuiNumericInputConfig] = createXConfigToken<XuiNumericInputConfig>(\n 'XuiNumericInputConfig',\n {\n size: 'md',\n buttonPosition: 'right',\n stepSize: 1,\n majorStepSize: 10,\n minorStepSize: 0.1,\n clampValueOnBlur: true\n }\n);\n","import type { BooleanInput, NumberInput } from '@angular/cdk/coercion';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n ViewEncapsulation,\n booleanAttribute,\n computed,\n forwardRef,\n input,\n linkedSignal,\n numberAttribute,\n signal,\n type Signal\n} from '@angular/core';\nimport { ControlValueAccessor, type NgControl } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { matKeyboardArrowDownRound, matKeyboardArrowUpRound } from '@ng-icons/material-icons/round';\nimport { xui } from '@xui/core';\nimport { uniqueId } from '@xui/core/a11y';\nimport { XFormFieldControl } from '@xui/core/form-field';\nimport { createXErrorState, createXValueAccessor, provideXValueAccessor } from '@xui/core/forms';\nimport { XuiIcon } from '@xui/icon';\nimport type { ClassValue } from 'clsx';\nimport {\n injectXuiNumericInputConfig,\n type XuiNumericButtonPosition,\n type XuiNumericInputSize\n} from './numeric-input.token';\n\n/**\n * A number field with stepper buttons and keyboard increment.\n *\n * ```html\n * <xui-numeric-input [(ngModel)]=\"quantity\" [min]=\"0\" [max]=\"99\" />\n * ```\n *\n * The value is a `number | null` (empty is `null`, not `0`, so \"no answer\" is\n * distinct from zero). ArrowUp/Down step by `stepSize`; Shift steps by\n * `majorStepSize`, Alt by `minorStepSize`. It is a `ControlValueAccessor`, so\n * forms bind to it directly, and it clamps into `[min, max]` on blur.\n */\n@Component({\n selector: 'xui-numeric-input',\n imports: [NgTemplateOutlet, NgIcon, XuiIcon],\n viewProviders: [provideIcons({ matKeyboardArrowUpRound, matKeyboardArrowDownRound })],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n providers: [\n provideXValueAccessor(() => XuiNumericInput),\n {\n provide: XFormFieldControl,\n useExisting: forwardRef(() => XuiNumericInput)\n }\n ],\n template: `\n @if (buttonPosition() === 'left') {\n <ng-container [ngTemplateOutlet]=\"steppers\" />\n }\n\n <input\n #field\n [id]=\"fieldId\"\n type=\"text\"\n inputmode=\"decimal\"\n [class]=\"fieldClass()\"\n [value]=\"display()\"\n [disabled]=\"isDisabled()\"\n [attr.placeholder]=\"placeholder()\"\n [attr.aria-label]=\"ariaLabel()\"\n role=\"spinbutton\"\n [attr.aria-valuenow]=\"value()\"\n [attr.aria-valuemin]=\"min() ?? null\"\n [attr.aria-valuemax]=\"max() ?? null\"\n (input)=\"onInput(field.value)\"\n (keydown)=\"onKeydown($event)\"\n (blur)=\"onBlur()\"\n />\n\n @if (buttonPosition() === 'right') {\n <ng-container [ngTemplateOutlet]=\"steppers\" />\n }\n\n <ng-template #steppers>\n <div [class]=\"stepperColumnClass()\">\n <button\n type=\"button\"\n tabindex=\"-1\"\n aria-label=\"Increment\"\n [class]=\"stepperClass()\"\n [disabled]=\"!canIncrement()\"\n (click)=\"step(stepSize())\"\n >\n <ng-icon xui size=\"sm\" name=\"matKeyboardArrowUpRound\" />\n </button>\n <button\n type=\"button\"\n tabindex=\"-1\"\n aria-label=\"Decrement\"\n [class]=\"stepperClass()\"\n [disabled]=\"!canDecrement()\"\n (click)=\"step(-stepSize())\"\n >\n <ng-icon xui size=\"sm\" name=\"matKeyboardArrowDownRound\" />\n </button>\n </div>\n </ng-template>\n `,\n host: {\n '[class]': 'computedClass()'\n }\n})\nexport class XuiNumericInput implements ControlValueAccessor, XFormFieldControl {\n private readonly config = injectXuiNumericInputConfig();\n private readonly formState = createXErrorState();\n protected readonly fieldId = uniqueId('xui-numeric-input');\n\n /** Error state for `xui-form-field`, derived from the optional bound form control. */\n readonly errorState = this.formState.errorState;\n\n /** Points the form field's `<label for>` at the inner text field, not the host. */\n readonly controlId: Signal<string | null> = signal(this.fieldId).asReadonly();\n\n get ngControl(): NgControl | null {\n return this.formState.ngControl();\n }\n\n /** The user-defined classes on the wrapper. Merged last so they win. */\n readonly class = input<ClassValue>('');\n readonly size = input<XuiNumericInputSize>(this.config.size);\n readonly buttonPosition = input<XuiNumericButtonPosition>(this.config.buttonPosition);\n\n readonly placeholder = input<string | null>(null);\n readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });\n\n readonly min = input<number | undefined, NumberInput>(undefined, { transform: numberAttribute });\n readonly max = input<number | undefined, NumberInput>(undefined, { transform: numberAttribute });\n readonly stepSize = input<number, NumberInput>(this.config.stepSize, { transform: numberAttribute });\n readonly majorStepSize = input<number, NumberInput>(this.config.majorStepSize, { transform: numberAttribute });\n readonly minorStepSize = input<number, NumberInput>(this.config.minorStepSize, { transform: numberAttribute });\n readonly clampValueOnBlur = input<boolean, BooleanInput>(this.config.clampValueOnBlur, {\n transform: booleanAttribute\n });\n\n readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n protected readonly cva = createXValueAccessor<number | null>({\n onWrite: value => {\n this.value.set(value ?? null);\n this.text.set(value == null ? '' : String(value));\n },\n disabled: this.disabled\n });\n protected readonly isDisabled = this.cva.disabled;\n\n // Aliased so the writable `value` linkedSignal below can own the public name.\n // Coerce so `value=\"5\"` (a string attribute) becomes the number 5, not the\n // string \"5\" that would then concatenate under `+ stepSize`.\n readonly valueInput = input<number | null, number | string | null | undefined>(null, {\n // eslint-disable-next-line @angular-eslint/no-input-rename\n alias: 'value',\n transform: raw => (raw == null || raw === '' ? null : Number(raw))\n });\n /** The current numeric value, or `null` when empty. Two-way via `value`. */\n readonly value = linkedSignal(this.valueInput);\n\n // The text the field shows. Kept separate from `value` so a half-typed entry\n // (\"-\", \"1.\") is preserved while the parsed value stays null/last-valid.\n private readonly text = signal<string>('');\n protected readonly display = computed(() => {\n const value = this.value();\n\n // Do not overwrite what the user is mid-typing with a formatted number.\n return this.text() !== '' || value == null ? this.text() : String(value);\n });\n\n protected readonly canIncrement = computed(() => !this.isDisabled() && !this.atMax(this.value()));\n protected readonly canDecrement = computed(() => !this.isDisabled() && !this.atMin(this.value()));\n\n protected readonly computedClass = computed(() =>\n xui(\n 'border-border bg-surface-inset focus-within:border-focus inline-flex items-stretch overflow-hidden rounded-lg border transition-colors',\n // The wrapper carries the control height so the stepper column cannot stretch the field\n // past the shared scale.\n this.size() === 'sm' ? 'h-(--control-height-sm)' : 'h-(--control-height-md)',\n this.isDisabled() && 'cursor-not-allowed opacity-50',\n this.class()\n )\n );\n protected readonly fieldClass = computed(() =>\n xui(\n 'text-foreground placeholder:text-foreground-subtle w-full min-w-0 bg-transparent tabular-nums outline-none',\n this.size() === 'sm' ? 'px-(--control-padding-sm) text-xs' : 'px-(--control-padding-md) text-sm'\n )\n );\n protected readonly stepperColumnClass = computed(() => 'border-border flex shrink-0 flex-col border-s');\n protected readonly stepperClass = computed(\n () =>\n 'text-foreground-muted hover:bg-hover-overlay hover:text-foreground flex flex-1 items-center justify-center px-1.5 disabled:pointer-events-none disabled:opacity-40'\n );\n\n protected onInput(raw: string): void {\n this.text.set(raw);\n\n const parsed = this.parse(raw);\n this.value.set(parsed);\n this.cva.notifyChange(parsed);\n }\n\n protected onKeydown(event: KeyboardEvent): void {\n if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') {\n return;\n }\n\n event.preventDefault();\n const magnitude = event.shiftKey ? this.majorStepSize() : event.altKey ? this.minorStepSize() : this.stepSize();\n this.step(event.key === 'ArrowUp' ? magnitude : -magnitude);\n }\n\n protected onBlur(): void {\n if (this.clampValueOnBlur()) {\n this.commit(this.clamp(this.value()));\n }\n\n // Re-sync the text with the committed value, dropping a half-typed entry.\n this.text.set(this.value() == null ? '' : String(this.value()));\n this.cva.markTouched();\n }\n\n step(delta: number): void {\n if (this.isDisabled()) {\n return;\n }\n\n const base = this.value() ?? 0;\n // Round to the step grid so 0.1 + 0.2 does not drift to 0.30000000000000004.\n const next = this.clamp(this.round(base + delta));\n this.commit(next);\n this.text.set(next == null ? '' : String(next));\n }\n\n private commit(value: number | null): void {\n this.value.set(value);\n this.cva.notifyChange(value);\n }\n\n private parse(raw: string): number | null {\n const trimmed = raw.trim();\n\n if (trimmed === '' || trimmed === '-' || trimmed === '.' || trimmed === '-.') {\n return null;\n }\n\n const parsed = Number(trimmed);\n\n return Number.isFinite(parsed) ? parsed : this.value();\n }\n\n private clamp(value: number | null): number | null {\n if (value == null) {\n return null;\n }\n\n const min = this.min();\n const max = this.max();\n\n return Math.min(max ?? Infinity, Math.max(min ?? -Infinity, value));\n }\n\n private round(value: number): number {\n // Keep a sane number of decimals so step math stays exact.\n return Math.round(value * 1e10) / 1e10;\n }\n\n private atMax(value: number | null): boolean {\n return value != null && this.max() != null && value >= this.max()!;\n }\n\n private atMin(value: number | null): boolean {\n return value != null && this.min() != null && value <= this.min()!;\n }\n\n readonly writeValue = this.cva.writeValue;\n readonly registerOnChange = this.cva.registerOnChange;\n readonly registerOnTouched = this.cva.registerOnTouched;\n readonly setDisabledState = this.cva.setDisabledState;\n}\n","import { XuiNumericInput } from './lib/numeric-input';\n\nexport * from './lib/numeric-input';\nexport * from './lib/numeric-input.token';\n\nexport const XuiNumericInputImports = [XuiNumericInput] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xui/numeric-input",
|
|
3
|
-
"version": "2.0.0-alpha.
|
|
3
|
+
"version": "2.0.0-alpha.12",
|
|
4
4
|
"description": "Modern Angular 22 UI Library based on TailwindCSS",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"angular",
|
|
@@ -42,8 +42,8 @@
|
|
|
42
42
|
"@angular/forms": "22",
|
|
43
43
|
"@ng-icons/core": "34",
|
|
44
44
|
"@ng-icons/material-icons": "34",
|
|
45
|
-
"@xui/core": "2.0.0-alpha.
|
|
46
|
-
"@xui/icon": "2.0.0-alpha.
|
|
45
|
+
"@xui/core": "2.0.0-alpha.12",
|
|
46
|
+
"@xui/icon": "2.0.0-alpha.12",
|
|
47
47
|
"clsx": "^2.1.1"
|
|
48
48
|
},
|
|
49
49
|
"publishConfig": {
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
+
import * as _xui_core_forms from '@xui/core/forms';
|
|
1
2
|
import * as _angular_core from '@angular/core';
|
|
2
|
-
import {
|
|
3
|
+
import { Signal } from '@angular/core';
|
|
3
4
|
import { NumberInput, BooleanInput } from '@angular/cdk/coercion';
|
|
4
|
-
import { ControlValueAccessor } from '@angular/forms';
|
|
5
|
-
import {
|
|
5
|
+
import { ControlValueAccessor, NgControl } from '@angular/forms';
|
|
6
|
+
import { XFormFieldControl } from '@xui/core/form-field';
|
|
6
7
|
import { ClassValue } from 'clsx';
|
|
7
8
|
|
|
8
|
-
type XuiNumericInputSize = '
|
|
9
|
+
type XuiNumericInputSize = 'md' | 'sm';
|
|
9
10
|
/** Where the stepper buttons sit. */
|
|
10
11
|
type XuiNumericButtonPosition = 'right' | 'left' | 'none';
|
|
11
12
|
interface XuiNumericInputConfig {
|
|
@@ -21,8 +22,8 @@ interface XuiNumericInputConfig {
|
|
|
21
22
|
clampValueOnBlur: boolean;
|
|
22
23
|
}
|
|
23
24
|
/** Application-wide defaults for XuiNumericInput. */
|
|
24
|
-
declare
|
|
25
|
-
declare
|
|
25
|
+
declare const injectXuiNumericInputConfig: () => XuiNumericInputConfig;
|
|
26
|
+
declare const provideXuiNumericInputConfig: (config: Partial<XuiNumericInputConfig>) => _angular_core.ValueProvider;
|
|
26
27
|
|
|
27
28
|
/**
|
|
28
29
|
* A number field with stepper buttons and keyboard increment.
|
|
@@ -36,8 +37,15 @@ declare function injectXuiNumericInputConfig(): XuiNumericInputConfig;
|
|
|
36
37
|
* `majorStepSize`, Alt by `minorStepSize`. It is a `ControlValueAccessor`, so
|
|
37
38
|
* forms bind to it directly, and it clamps into `[min, max]` on blur.
|
|
38
39
|
*/
|
|
39
|
-
declare class XuiNumericInput implements ControlValueAccessor {
|
|
40
|
+
declare class XuiNumericInput implements ControlValueAccessor, XFormFieldControl {
|
|
40
41
|
private readonly config;
|
|
42
|
+
private readonly formState;
|
|
43
|
+
protected readonly fieldId: string;
|
|
44
|
+
/** Error state for `xui-form-field`, derived from the optional bound form control. */
|
|
45
|
+
readonly errorState: Signal<boolean>;
|
|
46
|
+
/** Points the form field's `<label for>` at the inner text field, not the host. */
|
|
47
|
+
readonly controlId: Signal<string | null>;
|
|
48
|
+
get ngControl(): NgControl | null;
|
|
41
49
|
/** The user-defined classes on the wrapper. Merged last so they win. */
|
|
42
50
|
readonly class: _angular_core.InputSignal<ClassValue>;
|
|
43
51
|
readonly size: _angular_core.InputSignal<XuiNumericInputSize>;
|
|
@@ -51,21 +59,19 @@ declare class XuiNumericInput implements ControlValueAccessor {
|
|
|
51
59
|
readonly minorStepSize: _angular_core.InputSignalWithTransform<number, NumberInput>;
|
|
52
60
|
readonly clampValueOnBlur: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
53
61
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
54
|
-
|
|
55
|
-
protected readonly
|
|
62
|
+
protected readonly cva: _xui_core_forms.XValueAccessor<number | null>;
|
|
63
|
+
protected readonly isDisabled: Signal<boolean>;
|
|
56
64
|
readonly valueInput: _angular_core.InputSignalWithTransform<number | null, string | number | null | undefined>;
|
|
57
65
|
/** The current numeric value, or `null` when empty. Two-way via `value`. */
|
|
58
66
|
readonly value: _angular_core.WritableSignal<number | null>;
|
|
59
67
|
private readonly text;
|
|
60
|
-
protected readonly display:
|
|
61
|
-
protected readonly canIncrement:
|
|
62
|
-
protected readonly canDecrement:
|
|
63
|
-
protected readonly computedClass:
|
|
64
|
-
protected readonly fieldClass:
|
|
65
|
-
protected readonly stepperColumnClass:
|
|
66
|
-
protected readonly stepperClass:
|
|
67
|
-
private onChange?;
|
|
68
|
-
protected onTouched?: TouchFn;
|
|
68
|
+
protected readonly display: Signal<string>;
|
|
69
|
+
protected readonly canIncrement: Signal<boolean>;
|
|
70
|
+
protected readonly canDecrement: Signal<boolean>;
|
|
71
|
+
protected readonly computedClass: Signal<string>;
|
|
72
|
+
protected readonly fieldClass: Signal<string>;
|
|
73
|
+
protected readonly stepperColumnClass: Signal<string>;
|
|
74
|
+
protected readonly stepperClass: Signal<string>;
|
|
69
75
|
protected onInput(raw: string): void;
|
|
70
76
|
protected onKeydown(event: KeyboardEvent): void;
|
|
71
77
|
protected onBlur(): void;
|
|
@@ -76,10 +82,10 @@ declare class XuiNumericInput implements ControlValueAccessor {
|
|
|
76
82
|
private round;
|
|
77
83
|
private atMax;
|
|
78
84
|
private atMin;
|
|
79
|
-
writeValue(value: number | null)
|
|
80
|
-
registerOnChange(fn:
|
|
81
|
-
registerOnTouched(fn:
|
|
82
|
-
setDisabledState(isDisabled: boolean)
|
|
85
|
+
readonly writeValue: (value: number | null) => void;
|
|
86
|
+
readonly registerOnChange: (fn: _xui_core_forms.XChangeFn<number | null>) => void;
|
|
87
|
+
readonly registerOnTouched: (fn: _xui_core_forms.XTouchFn) => void;
|
|
88
|
+
readonly setDisabledState: (isDisabled: boolean) => void;
|
|
83
89
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<XuiNumericInput, never>;
|
|
84
90
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<XuiNumericInput, "xui-numeric-input", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "buttonPosition": { "alias": "buttonPosition"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "stepSize": { "alias": "stepSize"; "required": false; "isSignal": true; }; "majorStepSize": { "alias": "majorStepSize"; "required": false; "isSignal": true; }; "minorStepSize": { "alias": "minorStepSize"; "required": false; "isSignal": true; }; "clampValueOnBlur": { "alias": "clampValueOnBlur"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "valueInput": { "alias": "value"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
85
91
|
}
|