@xui/form-field 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-form-field.mjs +39 -24
- package/fesm2022/xui-form-field.mjs.map +1 -1
- package/package.json +2 -2
- package/types/xui-form-field.d.ts +23 -10
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,6 +1,6 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, computed, ChangeDetectionStrategy, Component, contentChild, ElementRef, contentChildren, booleanAttribute, effect
|
|
3
|
-
import { xui } from '@xui/core';
|
|
2
|
+
import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, contentChild, ElementRef, contentChildren, booleanAttribute, effect } from '@angular/core';
|
|
3
|
+
import { xui, createXConfigToken } from '@xui/core';
|
|
4
4
|
import { XFormFieldControl } from '@xui/core/form-field';
|
|
5
5
|
import { cva } from 'class-variance-authority';
|
|
6
6
|
|
|
@@ -10,13 +10,14 @@ class XuiError {
|
|
|
10
10
|
computedClass = computed(() => xui('block text-error text-sm font-medium', this.class()), /* @ts-ignore */
|
|
11
11
|
...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
|
|
12
12
|
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiError, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13
|
-
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: XuiError, isStandalone: true, selector: "xui-error", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13
|
+
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: XuiError, isStandalone: true, selector: "xui-error", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
14
14
|
}
|
|
15
15
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiError, decorators: [{
|
|
16
16
|
type: Component,
|
|
17
17
|
args: [{
|
|
18
18
|
selector: 'xui-error',
|
|
19
19
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
20
|
+
encapsulation: ViewEncapsulation.None,
|
|
20
21
|
template: '<ng-content />',
|
|
21
22
|
host: {
|
|
22
23
|
'[class]': 'computedClass()'
|
|
@@ -24,8 +25,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
24
25
|
}]
|
|
25
26
|
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
26
27
|
|
|
28
|
+
const [injectXuiFormFieldConfig, provideXuiFormFieldConfig] = createXConfigToken('XuiFormFieldConfig', {
|
|
29
|
+
color: 'none',
|
|
30
|
+
inline: false
|
|
31
|
+
});
|
|
32
|
+
|
|
27
33
|
let nextId = 0;
|
|
28
|
-
const
|
|
34
|
+
const formFieldRootVariants = cva('', {
|
|
29
35
|
variants: {
|
|
30
36
|
inline: {
|
|
31
37
|
false: 'block space-y-2',
|
|
@@ -34,20 +40,21 @@ const rootVariants = cva('', {
|
|
|
34
40
|
},
|
|
35
41
|
defaultVariants: { inline: false }
|
|
36
42
|
});
|
|
37
|
-
/** `
|
|
38
|
-
const
|
|
43
|
+
/** `color` tints the label and helper text with a deliberate accent. */
|
|
44
|
+
const formFieldColorText = cva('', {
|
|
39
45
|
variants: {
|
|
40
|
-
|
|
46
|
+
color: {
|
|
41
47
|
none: '',
|
|
42
48
|
primary: 'text-primary',
|
|
43
49
|
success: 'text-success',
|
|
44
50
|
warning: 'text-warning',
|
|
45
|
-
|
|
51
|
+
error: 'text-error'
|
|
46
52
|
}
|
|
47
53
|
},
|
|
48
|
-
defaultVariants: {
|
|
54
|
+
defaultVariants: { color: 'none' }
|
|
49
55
|
});
|
|
50
56
|
class XuiFormField {
|
|
57
|
+
config = injectXuiFormFieldConfig();
|
|
51
58
|
control = contentChild(XFormFieldControl, /* @ts-ignore */
|
|
52
59
|
...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
|
|
53
60
|
controlEl = contentChild(XFormFieldControl, { ...(ngDevMode ? { debugName: "controlEl" } : /* istanbul ignore next */ {}), read: ElementRef });
|
|
@@ -68,25 +75,31 @@ class XuiFormField {
|
|
|
68
75
|
helperText = input('', /* @ts-ignore */
|
|
69
76
|
...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
|
|
70
77
|
/** A deliberate accent for the label and helper text. */
|
|
71
|
-
|
|
72
|
-
...(ngDevMode ? [{ debugName: "
|
|
78
|
+
color = input(this.config.color, /* @ts-ignore */
|
|
79
|
+
...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
73
80
|
/** Lay the label beside the control rather than above it. */
|
|
74
|
-
inline = input(
|
|
81
|
+
inline = input(this.config.inline, { ...(ngDevMode ? { debugName: "inline" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
75
82
|
generatedId = `xui-form-field-${nextId++}`;
|
|
76
|
-
computedClass = computed(() => xui(
|
|
83
|
+
computedClass = computed(() => xui(formFieldRootVariants({ inline: this.inline() }), this.class()), /* @ts-ignore */
|
|
77
84
|
...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
|
|
78
|
-
labelClass = computed(() => xui('text-foreground block text-sm font-medium',
|
|
85
|
+
labelClass = computed(() => xui('text-foreground block text-sm font-medium', formFieldColorText({ color: this.color() })), /* @ts-ignore */
|
|
79
86
|
...(ngDevMode ? [{ debugName: "labelClass" }] : /* istanbul ignore next */ []));
|
|
80
|
-
helperClass = computed(() => xui('block text-sm text-foreground-subtle',
|
|
87
|
+
helperClass = computed(() => xui('block text-sm text-foreground-subtle', formFieldColorText({ color: this.color() })), /* @ts-ignore */
|
|
81
88
|
...(ngDevMode ? [{ debugName: "helperClass" }] : /* istanbul ignore next */ []));
|
|
82
89
|
/**
|
|
83
|
-
* The id the `<label>` points at — the control's
|
|
84
|
-
* the
|
|
90
|
+
* The id the `<label>` points at — the control's declared `controlId` when it
|
|
91
|
+
* has one (the focusable element inside a wrapping component), else the host
|
|
92
|
+
* element's own id, else the id we assign below. The fallback branches agree
|
|
93
|
+
* with the effect's assignment.
|
|
85
94
|
*/
|
|
86
95
|
labelFor = computed(() => {
|
|
87
96
|
if (!this.label()) {
|
|
88
97
|
return null;
|
|
89
98
|
}
|
|
99
|
+
const providedId = this.control()?.controlId?.();
|
|
100
|
+
if (providedId) {
|
|
101
|
+
return providedId;
|
|
102
|
+
}
|
|
90
103
|
const el = this.controlEl()?.nativeElement;
|
|
91
104
|
return el?.id || this.generatedId;
|
|
92
105
|
}, /* @ts-ignore */
|
|
@@ -99,17 +112,18 @@ class XuiFormField {
|
|
|
99
112
|
throw new Error('xui-form-field must contain an XFormFieldControl.');
|
|
100
113
|
}
|
|
101
114
|
});
|
|
102
|
-
// Give the projected control our generated id (unless it already has one
|
|
103
|
-
// the
|
|
115
|
+
// Give the projected control our generated id (unless it already has one, or
|
|
116
|
+
// it points the label at an inner element via `controlId`) so the rendered
|
|
117
|
+
// <label for> genuinely points at it.
|
|
104
118
|
effect(() => {
|
|
105
119
|
const el = this.controlEl()?.nativeElement;
|
|
106
|
-
if (this.label() && el && !el.id) {
|
|
120
|
+
if (this.label() && el && !el.id && !this.control()?.controlId?.()) {
|
|
107
121
|
el.id = this.generatedId;
|
|
108
122
|
}
|
|
109
123
|
});
|
|
110
124
|
}
|
|
111
125
|
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiFormField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
112
|
-
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: XuiFormField, isStandalone: true, selector: "xui-form-field", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelInfo: { classPropertyName: "labelInfo", publicName: "labelInfo", isSignal: true, isRequired: false, transformFunction: null }, subLabel: { classPropertyName: "subLabel", publicName: "subLabel", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null },
|
|
126
|
+
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: XuiFormField, isStandalone: true, selector: "xui-form-field", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelInfo: { classPropertyName: "labelInfo", publicName: "labelInfo", isSignal: true, isRequired: false, transformFunction: null }, subLabel: { classPropertyName: "subLabel", publicName: "subLabel", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, queries: [{ propertyName: "control", first: true, predicate: XFormFieldControl, descendants: true, isSignal: true }, { propertyName: "controlEl", first: true, predicate: XFormFieldControl, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "errorChildren", predicate: XuiError, isSignal: true }], ngImport: i0, template: `
|
|
113
127
|
@if (label() || subLabel()) {
|
|
114
128
|
<div [class]="inline() ? 'shrink-0' : ''">
|
|
115
129
|
@if (label()) {
|
|
@@ -186,7 +200,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
186
200
|
'[class]': 'computedClass()'
|
|
187
201
|
}
|
|
188
202
|
}]
|
|
189
|
-
}], ctorParameters: () => [], propDecorators: { control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => XFormFieldControl), { isSignal: true }] }], controlEl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => XFormFieldControl), { ...{ read: ElementRef }, isSignal: true }] }], errorChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => XuiError), { isSignal: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelInfo", required: false }] }], subLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "subLabel", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }],
|
|
203
|
+
}], ctorParameters: () => [], propDecorators: { control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => XFormFieldControl), { isSignal: true }] }], controlEl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => XFormFieldControl), { ...{ read: ElementRef }, isSignal: true }] }], errorChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => XuiError), { isSignal: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelInfo", required: false }] }], subLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "subLabel", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }] } });
|
|
190
204
|
|
|
191
205
|
class XuiHint {
|
|
192
206
|
class = input('', /* @ts-ignore */
|
|
@@ -194,13 +208,14 @@ class XuiHint {
|
|
|
194
208
|
computedClass = computed(() => xui('block text-sm text-foreground-subtle', this.class()), /* @ts-ignore */
|
|
195
209
|
...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
|
|
196
210
|
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiHint, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
197
|
-
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: XuiHint, isStandalone: true, selector: "xui-hint", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
211
|
+
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: XuiHint, isStandalone: true, selector: "xui-hint", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
198
212
|
}
|
|
199
213
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiHint, decorators: [{
|
|
200
214
|
type: Component,
|
|
201
215
|
args: [{
|
|
202
216
|
selector: 'xui-hint',
|
|
203
217
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
218
|
+
encapsulation: ViewEncapsulation.None,
|
|
204
219
|
template: '<ng-content />',
|
|
205
220
|
host: {
|
|
206
221
|
'[class]': 'computedClass()'
|
|
@@ -214,5 +229,5 @@ const XuiFormFieldImports = [XuiFormField, XuiError, XuiHint];
|
|
|
214
229
|
* Generated bundle index. Do not edit.
|
|
215
230
|
*/
|
|
216
231
|
|
|
217
|
-
export { XuiError, XuiFormField, XuiFormFieldImports, XuiHint };
|
|
232
|
+
export { XuiError, XuiFormField, XuiFormFieldImports, XuiHint, formFieldColorText, formFieldRootVariants, injectXuiFormFieldConfig, provideXuiFormFieldConfig };
|
|
218
233
|
//# sourceMappingURL=xui-form-field.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"xui-form-field.mjs","sources":["../../../../../../libs/ui/form-field/xui/src/lib/error.ts","../../../../../../libs/ui/form-field/xui/src/lib/form-field.ts","../../../../../../libs/ui/form-field/xui/src/lib/hint.ts","../../../../../../libs/ui/form-field/xui/src/index.ts","../../../../../../libs/ui/form-field/xui/src/xui-form-field.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { xui } from '@xui/core';\nimport type { ClassValue } from 'clsx';\n\n@Component({\n selector: 'xui-error',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: '<ng-content />',\n host: {\n '[class]': 'computedClass()'\n }\n})\nexport class XuiError {\n readonly class = input<ClassValue>('');\n\n protected computedClass = computed(() => xui('block text-error text-sm font-medium', this.class()));\n}\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n contentChild,\n contentChildren,\n effect,\n ElementRef,\n input,\n ViewEncapsulation\n} from '@angular/core';\nimport { xui } from '@xui/core';\nimport { XFormFieldControl } from '@xui/core/form-field';\nimport { cva, VariantProps } from 'class-variance-authority';\nimport type { ClassValue } from 'clsx';\nimport { XuiError } from './error';\n\nlet nextId = 0;\n\nconst rootVariants = cva('', {\n variants: {\n inline: {\n false: 'block space-y-2',\n true: 'flex items-baseline gap-3'\n }\n },\n defaultVariants: { inline: false }\n});\n\n/** `intent` tints the label and helper text with a deliberate accent. */\nconst intentText = cva('', {\n variants: {\n intent: {\n none: '',\n primary: 'text-primary',\n success: 'text-success',\n warning: 'text-warning',\n danger: 'text-error'\n }\n },\n defaultVariants: { intent: 'none' }\n});\n\nexport type FormFieldIntent = NonNullable<VariantProps<typeof intentText>['intent']>;\n\n@Component({\n selector: 'xui-form-field',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n template: `\n @if (label() || subLabel()) {\n <div [class]=\"inline() ? 'shrink-0' : ''\">\n @if (label()) {\n <label [attr.for]=\"labelFor()\" [class]=\"labelClass()\">\n {{ label() }}\n @if (labelInfo()) {\n <span class=\"text-foreground-subtle font-normal\">{{ labelInfo() }}</span>\n }\n </label>\n }\n @if (subLabel()) {\n <span class=\"text-foreground-muted block text-xs\">{{ subLabel() }}</span>\n }\n </div>\n }\n\n <div [class]=\"inline() ? 'flex-1 space-y-1.5' : 'space-y-1.5'\">\n <ng-content />\n\n @switch (hasDisplayedMessage()) {\n @case ('error') {\n <ng-content select=\"xui-error\" />\n }\n @default {\n <ng-content select=\"xui-hint\" />\n @if (helperText()) {\n <span [class]=\"helperClass()\">{{ helperText() }}</span>\n }\n }\n }\n </div>\n `,\n host: {\n '[class]': 'computedClass()'\n }\n})\nexport class XuiFormField {\n readonly control = contentChild(XFormFieldControl);\n private readonly controlEl = contentChild(XFormFieldControl, { read: ElementRef });\n readonly errorChildren = contentChildren(XuiError);\n\n readonly class = input<ClassValue>('');\n\n /** The primary label rendered above (or beside, when `inline`) the control. */\n readonly label = input<string>('');\n\n /** Secondary text shown next to the label, e.g. \"(optional)\". */\n readonly labelInfo = input<string>('');\n\n /** A smaller description under the label. */\n readonly subLabel = input<string>('');\n\n /** Muted helper text under the control, hidden while an error is shown. */\n readonly helperText = input<string>('');\n\n /** A deliberate accent for the label and helper text. */\n readonly intent = input<FormFieldIntent>('none');\n\n /** Lay the label beside the control rather than above it. */\n readonly inline = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n private readonly generatedId = `xui-form-field-${nextId++}`;\n\n protected readonly computedClass = computed(() => xui(rootVariants({ inline: this.inline() }), this.class()));\n\n protected readonly labelClass = computed(() =>\n xui('text-foreground block text-sm font-medium', intentText({ intent: this.intent() }))\n );\n\n protected readonly helperClass = computed(() =>\n xui('block text-sm text-foreground-subtle', intentText({ intent: this.intent() }))\n );\n\n /**\n * The id the `<label>` points at — the control's own id when it has one, else\n * the id we assign below. Both branches agree with the effect's assignment.\n */\n protected readonly labelFor = computed(() => {\n if (!this.label()) {\n return null;\n }\n\n const el = this.controlEl()?.nativeElement as HTMLElement | undefined;\n return el?.id || this.generatedId;\n });\n\n protected readonly hasDisplayedMessage = computed<'error' | 'hint'>(() =>\n this.errorChildren() && this.errorChildren().length > 0 && this.control()?.errorState() ? 'error' : 'hint'\n );\n\n constructor() {\n effect(() => {\n if (!this.control()) {\n throw new Error('xui-form-field must contain an XFormFieldControl.');\n }\n });\n\n // Give the projected control our generated id (unless it already has one) so\n // the rendered <label for> genuinely points at it.\n effect(() => {\n const el = this.controlEl()?.nativeElement as HTMLElement | undefined;\n if (this.label() && el && !el.id) {\n el.id = this.generatedId;\n }\n });\n }\n}\n","import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { xui } from '@xui/core';\nimport type { ClassValue } from 'clsx';\n\n@Component({\n selector: 'xui-hint',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: '<ng-content />',\n host: {\n '[class]': 'computedClass()'\n }\n})\nexport class XuiHint {\n readonly class = input<ClassValue>('');\n\n protected computedClass = computed(() => xui('block text-sm text-foreground-subtle', this.class()));\n}\n","import { XuiError } from './lib/error';\nimport { XuiFormField } from './lib/form-field';\nimport { XuiHint } from './lib/hint';\nexport * from './lib/error';\nexport * from './lib/form-field';\nexport * from './lib/hint';\n\nexport const XuiFormFieldImports = [XuiFormField, XuiError, XuiHint] 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-form-field.mjs","sources":["../../../../../../libs/ui/form-field/xui/src/lib/error.ts","../../../../../../libs/ui/form-field/xui/src/lib/form-field.token.ts","../../../../../../libs/ui/form-field/xui/src/lib/form-field.ts","../../../../../../libs/ui/form-field/xui/src/lib/hint.ts","../../../../../../libs/ui/form-field/xui/src/index.ts","../../../../../../libs/ui/form-field/xui/src/xui-form-field.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';\nimport { xui } from '@xui/core';\nimport type { ClassValue } from 'clsx';\n\n@Component({\n selector: 'xui-error',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n template: '<ng-content />',\n host: {\n '[class]': 'computedClass()'\n }\n})\nexport class XuiError {\n readonly class = input<ClassValue>('');\n\n protected computedClass = computed(() => xui('block text-error text-sm font-medium', this.class()));\n}\n","import { createXConfigToken } from '@xui/core';\nimport { XuiFormFieldColor } from './form-field';\n\nexport interface XuiFormFieldConfig {\n color: XuiFormFieldColor;\n inline: boolean;\n}\n\nexport const [injectXuiFormFieldConfig, provideXuiFormFieldConfig] = createXConfigToken<XuiFormFieldConfig>(\n 'XuiFormFieldConfig',\n {\n color: 'none',\n inline: false\n }\n);\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n contentChild,\n contentChildren,\n effect,\n ElementRef,\n input,\n ViewEncapsulation\n} from '@angular/core';\nimport { xui } from '@xui/core';\nimport { XFormFieldControl } from '@xui/core/form-field';\nimport { cva, VariantProps } from 'class-variance-authority';\nimport type { ClassValue } from 'clsx';\nimport { XuiError } from './error';\nimport { injectXuiFormFieldConfig } from './form-field.token';\n\nlet nextId = 0;\n\nexport const formFieldRootVariants = cva('', {\n variants: {\n inline: {\n false: 'block space-y-2',\n true: 'flex items-baseline gap-3'\n }\n },\n defaultVariants: { inline: false }\n});\n\n/** `color` tints the label and helper text with a deliberate accent. */\nexport const formFieldColorText = cva('', {\n variants: {\n color: {\n none: '',\n primary: 'text-primary',\n success: 'text-success',\n warning: 'text-warning',\n error: 'text-error'\n }\n },\n defaultVariants: { color: 'none' }\n});\n\nexport type XuiFormFieldColor = NonNullable<VariantProps<typeof formFieldColorText>['color']>;\n\n@Component({\n selector: 'xui-form-field',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n template: `\n @if (label() || subLabel()) {\n <div [class]=\"inline() ? 'shrink-0' : ''\">\n @if (label()) {\n <label [attr.for]=\"labelFor()\" [class]=\"labelClass()\">\n {{ label() }}\n @if (labelInfo()) {\n <span class=\"text-foreground-subtle font-normal\">{{ labelInfo() }}</span>\n }\n </label>\n }\n @if (subLabel()) {\n <span class=\"text-foreground-muted block text-xs\">{{ subLabel() }}</span>\n }\n </div>\n }\n\n <div [class]=\"inline() ? 'flex-1 space-y-1.5' : 'space-y-1.5'\">\n <ng-content />\n\n @switch (hasDisplayedMessage()) {\n @case ('error') {\n <ng-content select=\"xui-error\" />\n }\n @default {\n <ng-content select=\"xui-hint\" />\n @if (helperText()) {\n <span [class]=\"helperClass()\">{{ helperText() }}</span>\n }\n }\n }\n </div>\n `,\n host: {\n '[class]': 'computedClass()'\n }\n})\nexport class XuiFormField {\n private readonly config = injectXuiFormFieldConfig();\n\n readonly control = contentChild(XFormFieldControl);\n private readonly controlEl = contentChild(XFormFieldControl, { read: ElementRef });\n readonly errorChildren = contentChildren(XuiError);\n\n readonly class = input<ClassValue>('');\n\n /** The primary label rendered above (or beside, when `inline`) the control. */\n readonly label = input<string>('');\n\n /** Secondary text shown next to the label, e.g. \"(optional)\". */\n readonly labelInfo = input<string>('');\n\n /** A smaller description under the label. */\n readonly subLabel = input<string>('');\n\n /** Muted helper text under the control, hidden while an error is shown. */\n readonly helperText = input<string>('');\n\n /** A deliberate accent for the label and helper text. */\n readonly color = input<XuiFormFieldColor>(this.config.color);\n\n /** Lay the label beside the control rather than above it. */\n readonly inline = input<boolean, BooleanInput>(this.config.inline, { transform: booleanAttribute });\n\n private readonly generatedId = `xui-form-field-${nextId++}`;\n\n protected readonly computedClass = computed(() =>\n xui(formFieldRootVariants({ inline: this.inline() }), this.class())\n );\n\n protected readonly labelClass = computed(() =>\n xui('text-foreground block text-sm font-medium', formFieldColorText({ color: this.color() }))\n );\n\n protected readonly helperClass = computed(() =>\n xui('block text-sm text-foreground-subtle', formFieldColorText({ color: this.color() }))\n );\n\n /**\n * The id the `<label>` points at — the control's declared `controlId` when it\n * has one (the focusable element inside a wrapping component), else the host\n * element's own id, else the id we assign below. The fallback branches agree\n * with the effect's assignment.\n */\n protected readonly labelFor = computed(() => {\n if (!this.label()) {\n return null;\n }\n\n const providedId = this.control()?.controlId?.();\n\n if (providedId) {\n return providedId;\n }\n\n const el = this.controlEl()?.nativeElement as HTMLElement | undefined;\n return el?.id || this.generatedId;\n });\n\n protected readonly hasDisplayedMessage = computed<'error' | 'hint'>(() =>\n this.errorChildren() && this.errorChildren().length > 0 && this.control()?.errorState() ? 'error' : 'hint'\n );\n\n constructor() {\n effect(() => {\n if (!this.control()) {\n throw new Error('xui-form-field must contain an XFormFieldControl.');\n }\n });\n\n // Give the projected control our generated id (unless it already has one, or\n // it points the label at an inner element via `controlId`) so the rendered\n // <label for> genuinely points at it.\n effect(() => {\n const el = this.controlEl()?.nativeElement as HTMLElement | undefined;\n if (this.label() && el && !el.id && !this.control()?.controlId?.()) {\n el.id = this.generatedId;\n }\n });\n }\n}\n","import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';\nimport { xui } from '@xui/core';\nimport type { ClassValue } from 'clsx';\n\n@Component({\n selector: 'xui-hint',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n template: '<ng-content />',\n host: {\n '[class]': 'computedClass()'\n }\n})\nexport class XuiHint {\n readonly class = input<ClassValue>('');\n\n protected computedClass = computed(() => xui('block text-sm text-foreground-subtle', this.class()));\n}\n","import { XuiError } from './lib/error';\nimport { XuiFormField } from './lib/form-field';\nimport { XuiHint } from './lib/hint';\nexport * from './lib/error';\nexport * from './lib/form-field';\nexport * from './lib/form-field.token';\nexport * from './lib/hint';\n\nexport const XuiFormFieldImports = [XuiFormField, XuiError, XuiHint] 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/form-field",
|
|
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",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"peerDependencies": {
|
|
39
39
|
"@angular/cdk": "22",
|
|
40
40
|
"@angular/core": "22",
|
|
41
|
-
"@xui/core": "2.0.0-alpha.
|
|
41
|
+
"@xui/core": "2.0.0-alpha.12",
|
|
42
42
|
"class-variance-authority": "^0.7.1",
|
|
43
43
|
"clsx": "^2.1.1"
|
|
44
44
|
},
|
|
@@ -12,12 +12,16 @@ declare class XuiError {
|
|
|
12
12
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<XuiError, "xui-error", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
intent?: "none" | "primary" | "success" | "warning" | "danger" | null | undefined;
|
|
15
|
+
declare const formFieldRootVariants: (props?: ({
|
|
16
|
+
inline?: boolean | null | undefined;
|
|
18
17
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
19
|
-
|
|
18
|
+
/** `color` tints the label and helper text with a deliberate accent. */
|
|
19
|
+
declare const formFieldColorText: (props?: ({
|
|
20
|
+
color?: "none" | "primary" | "success" | "warning" | "error" | null | undefined;
|
|
21
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
22
|
+
type XuiFormFieldColor = NonNullable<VariantProps<typeof formFieldColorText>['color']>;
|
|
20
23
|
declare class XuiFormField {
|
|
24
|
+
private readonly config;
|
|
21
25
|
readonly control: _angular_core.Signal<XFormFieldControl | undefined>;
|
|
22
26
|
private readonly controlEl;
|
|
23
27
|
readonly errorChildren: _angular_core.Signal<readonly XuiError[]>;
|
|
@@ -31,7 +35,7 @@ declare class XuiFormField {
|
|
|
31
35
|
/** Muted helper text under the control, hidden while an error is shown. */
|
|
32
36
|
readonly helperText: _angular_core.InputSignal<string>;
|
|
33
37
|
/** A deliberate accent for the label and helper text. */
|
|
34
|
-
readonly
|
|
38
|
+
readonly color: _angular_core.InputSignal<XuiFormFieldColor>;
|
|
35
39
|
/** Lay the label beside the control rather than above it. */
|
|
36
40
|
readonly inline: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
37
41
|
private readonly generatedId;
|
|
@@ -39,14 +43,16 @@ declare class XuiFormField {
|
|
|
39
43
|
protected readonly labelClass: _angular_core.Signal<string>;
|
|
40
44
|
protected readonly helperClass: _angular_core.Signal<string>;
|
|
41
45
|
/**
|
|
42
|
-
* The id the `<label>` points at — the control's
|
|
43
|
-
* the
|
|
46
|
+
* The id the `<label>` points at — the control's declared `controlId` when it
|
|
47
|
+
* has one (the focusable element inside a wrapping component), else the host
|
|
48
|
+
* element's own id, else the id we assign below. The fallback branches agree
|
|
49
|
+
* with the effect's assignment.
|
|
44
50
|
*/
|
|
45
51
|
protected readonly labelFor: _angular_core.Signal<string | null>;
|
|
46
52
|
protected readonly hasDisplayedMessage: _angular_core.Signal<"error" | "hint">;
|
|
47
53
|
constructor();
|
|
48
54
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<XuiFormField, never>;
|
|
49
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<XuiFormField, "xui-form-field", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelInfo": { "alias": "labelInfo"; "required": false; "isSignal": true; }; "subLabel": { "alias": "subLabel"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "
|
|
55
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<XuiFormField, "xui-form-field", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelInfo": { "alias": "labelInfo"; "required": false; "isSignal": true; }; "subLabel": { "alias": "subLabel"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; }, {}, ["control", "controlEl", "errorChildren"], ["*", "xui-error", "xui-hint"], true, never>;
|
|
50
56
|
}
|
|
51
57
|
|
|
52
58
|
declare class XuiHint {
|
|
@@ -56,7 +62,14 @@ declare class XuiHint {
|
|
|
56
62
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<XuiHint, "xui-hint", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
57
63
|
}
|
|
58
64
|
|
|
65
|
+
interface XuiFormFieldConfig {
|
|
66
|
+
color: XuiFormFieldColor;
|
|
67
|
+
inline: boolean;
|
|
68
|
+
}
|
|
69
|
+
declare const injectXuiFormFieldConfig: () => XuiFormFieldConfig;
|
|
70
|
+
declare const provideXuiFormFieldConfig: (config: Partial<XuiFormFieldConfig>) => _angular_core.ValueProvider;
|
|
71
|
+
|
|
59
72
|
declare const XuiFormFieldImports: readonly [typeof XuiFormField, typeof XuiError, typeof XuiHint];
|
|
60
73
|
|
|
61
|
-
export { XuiError, XuiFormField, XuiFormFieldImports, XuiHint };
|
|
62
|
-
export type {
|
|
74
|
+
export { XuiError, XuiFormField, XuiFormFieldImports, XuiHint, formFieldColorText, formFieldRootVariants, injectXuiFormFieldConfig, provideXuiFormFieldConfig };
|
|
75
|
+
export type { XuiFormFieldColor, XuiFormFieldConfig };
|