@xui/transfer 2.0.0-alpha.11 → 2.0.0-alpha.13
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-transfer.mjs +58 -21
- package/fesm2022/xui-transfer.mjs.map +1 -1
- package/package.json +3 -2
- package/types/xui-transfer.d.ts +18 -5
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,37 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, model, booleanAttribute, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
2
|
+
import { inject, ElementRef, input, model, booleanAttribute, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
3
|
import { xui } from '@xui/core';
|
|
4
4
|
import { uniqueId } from '@xui/core/a11y';
|
|
5
|
+
import { createXValueAccessor, provideXValueAccessor } from '@xui/core/forms';
|
|
5
6
|
|
|
6
7
|
/**
|
|
7
8
|
* A dual list-box that moves items between a source and a target list. `items`
|
|
8
|
-
* is the full set; `
|
|
9
|
+
* is the full set; `values` (two-way) are the keys on the right. Check items
|
|
9
10
|
* and use the arrow buttons to move them; each side can be searched.
|
|
10
11
|
*
|
|
11
12
|
* ```html
|
|
12
|
-
* <xui-transfer [items]="all" [(
|
|
13
|
+
* <xui-transfer [items]="all" [(values)]="selected" searchable />
|
|
13
14
|
* ```
|
|
14
15
|
*/
|
|
15
16
|
class XuiTransfer {
|
|
16
17
|
SIDES = ['left', 'right'];
|
|
18
|
+
host = inject(ElementRef);
|
|
17
19
|
class = input('', /* @ts-ignore */
|
|
18
20
|
...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
19
21
|
items = input([], /* @ts-ignore */
|
|
20
22
|
...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
21
|
-
|
|
22
|
-
|
|
23
|
+
/** The target-list keys. Two-way bindable with `[(values)]`, or via `formControl`/`ngModel`. */
|
|
24
|
+
values = model([], /* @ts-ignore */
|
|
25
|
+
...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
|
|
23
26
|
titles = input(['Source', 'Target'], /* @ts-ignore */
|
|
24
27
|
...(ngDevMode ? [{ debugName: "titles" }] : /* istanbul ignore next */ []));
|
|
25
28
|
searchable = input(false, { ...(ngDevMode ? { debugName: "searchable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
29
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
30
|
+
cva = createXValueAccessor({
|
|
31
|
+
onWrite: values => this.values.set(values ?? []),
|
|
32
|
+
disabled: this.disabled
|
|
33
|
+
});
|
|
34
|
+
isDisabled = this.cva.disabled;
|
|
26
35
|
checkedLeft = signal(new Set(), /* @ts-ignore */
|
|
27
36
|
...(ngDevMode ? [{ debugName: "checkedLeft" }] : /* istanbul ignore next */ []));
|
|
28
37
|
checkedRight = signal(new Set(), /* @ts-ignore */
|
|
@@ -37,7 +46,7 @@ class XuiTransfer {
|
|
|
37
46
|
activeRight = signal(null, /* @ts-ignore */
|
|
38
47
|
...(ngDevMode ? [{ debugName: "activeRight" }] : /* istanbul ignore next */ []));
|
|
39
48
|
idPrefix = uniqueId('xui-transfer');
|
|
40
|
-
targetSet = computed(() => new Set(this.
|
|
49
|
+
targetSet = computed(() => new Set(this.values()), /* @ts-ignore */
|
|
41
50
|
...(ngDevMode ? [{ debugName: "targetSet" }] : /* istanbul ignore next */ []));
|
|
42
51
|
leftItems = computed(() => this.items().filter(item => !this.targetSet().has(item.key)), /* @ts-ignore */
|
|
43
52
|
...(ngDevMode ? [{ debugName: "leftItems" }] : /* istanbul ignore next */ []));
|
|
@@ -92,12 +101,15 @@ class XuiTransfer {
|
|
|
92
101
|
}
|
|
93
102
|
/** Move the active option and check it — clicking does both, so keys match. */
|
|
94
103
|
activate(side, item) {
|
|
104
|
+
if (this.isDisabled()) {
|
|
105
|
+
return;
|
|
106
|
+
}
|
|
95
107
|
(side === 'left' ? this.activeLeft : this.activeRight).set(item.key);
|
|
96
108
|
this.toggle(side, item);
|
|
97
109
|
}
|
|
98
110
|
onListKeydown(side, event) {
|
|
99
111
|
const options = this.filtered(side);
|
|
100
|
-
if (!options.length) {
|
|
112
|
+
if (!options.length || this.isDisabled()) {
|
|
101
113
|
return;
|
|
102
114
|
}
|
|
103
115
|
const current = Math.max(0, options.findIndex(item => item.key === this.activeKey(side)));
|
|
@@ -127,7 +139,7 @@ class XuiTransfer {
|
|
|
127
139
|
(side === 'left' ? this.activeLeft : this.activeRight).set(options[next].key);
|
|
128
140
|
}
|
|
129
141
|
toggle(side, item) {
|
|
130
|
-
if (item.disabled) {
|
|
142
|
+
if (item.disabled || this.isDisabled()) {
|
|
131
143
|
return;
|
|
132
144
|
}
|
|
133
145
|
const signalRef = side === 'left' ? this.checkedLeft : this.checkedRight;
|
|
@@ -141,6 +153,9 @@ class XuiTransfer {
|
|
|
141
153
|
signalRef.set(next);
|
|
142
154
|
}
|
|
143
155
|
toggleAll(side) {
|
|
156
|
+
if (this.isDisabled()) {
|
|
157
|
+
return;
|
|
158
|
+
}
|
|
144
159
|
const signalRef = side === 'left' ? this.checkedLeft : this.checkedRight;
|
|
145
160
|
const enabled = this.filtered(side).filter(item => !item.disabled);
|
|
146
161
|
if (this.allChecked(side)) {
|
|
@@ -155,24 +170,34 @@ class XuiTransfer {
|
|
|
155
170
|
}
|
|
156
171
|
}
|
|
157
172
|
move(to) {
|
|
173
|
+
if (this.isDisabled()) {
|
|
174
|
+
return;
|
|
175
|
+
}
|
|
158
176
|
if (to === 'right') {
|
|
159
177
|
const moving = this.leftItems().filter(item => !item.disabled && this.checkedLeft().has(item.key));
|
|
160
|
-
this.
|
|
178
|
+
this.values.set([...this.values(), ...moving.map(item => item.key)]);
|
|
161
179
|
this.checkedLeft.set(new Set());
|
|
162
180
|
}
|
|
163
181
|
else {
|
|
164
182
|
const movingKeys = new Set(this.rightItems()
|
|
165
183
|
.filter(item => !item.disabled && this.checkedRight().has(item.key))
|
|
166
184
|
.map(item => item.key));
|
|
167
|
-
this.
|
|
185
|
+
this.values.set(this.values().filter(key => !movingKeys.has(key)));
|
|
168
186
|
this.checkedRight.set(new Set());
|
|
169
187
|
}
|
|
188
|
+
this.cva.notifyChange(this.values());
|
|
189
|
+
}
|
|
190
|
+
/** Touched fires only when focus leaves the whole widget, not between its panes. */
|
|
191
|
+
onFocusOut(event) {
|
|
192
|
+
if (!this.host.nativeElement.contains(event.relatedTarget)) {
|
|
193
|
+
this.cva.markTouched();
|
|
194
|
+
}
|
|
170
195
|
}
|
|
171
|
-
computedClass = computed(() => xui('flex items-stretch', this.class()), /* @ts-ignore */
|
|
196
|
+
computedClass = computed(() => xui('flex items-stretch', this.isDisabled() && 'opacity-50', this.class()), /* @ts-ignore */
|
|
172
197
|
...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
|
|
173
198
|
panelClass = computed(() => xui('border-border bg-surface flex w-56 flex-col rounded-lg border'), /* @ts-ignore */
|
|
174
199
|
...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
|
|
175
|
-
searchClass = computed(() => xui('border-border bg-surface text-foreground focus:border-focus h-(--control-height-md) w-full rounded-md border px-(--control-padding-sm) text-sm focus:outline-none'), /* @ts-ignore */
|
|
200
|
+
searchClass = computed(() => xui('border-border bg-surface text-foreground focus-visible:border-focus h-(--control-height-md) w-full rounded-md border px-(--control-padding-sm) text-sm focus-visible:outline-none'), /* @ts-ignore */
|
|
176
201
|
...(ngDevMode ? [{ debugName: "searchClass" }] : /* istanbul ignore next */ []));
|
|
177
202
|
checkboxClass(active) {
|
|
178
203
|
return xui('flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center rounded border', active ? 'bg-primary border-primary text-primary-foreground' : 'border-border');
|
|
@@ -186,8 +211,12 @@ class XuiTransfer {
|
|
|
186
211
|
moveClass() {
|
|
187
212
|
return xui('border-border text-foreground hover:bg-surface-inset flex size-(--control-height-md) items-center justify-center rounded-md border disabled:pointer-events-none disabled:opacity-40');
|
|
188
213
|
}
|
|
214
|
+
writeValue = this.cva.writeValue;
|
|
215
|
+
registerOnChange = this.cva.registerOnChange;
|
|
216
|
+
registerOnTouched = this.cva.registerOnTouched;
|
|
217
|
+
setDisabledState = this.cva.setDisabledState;
|
|
189
218
|
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiTransfer, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
190
|
-
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: XuiTransfer, isStandalone: true, selector: "xui-transfer", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null },
|
|
219
|
+
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: XuiTransfer, isStandalone: true, selector: "xui-transfer", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, titles: { classPropertyName: "titles", publicName: "titles", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { values: "valuesChange" }, host: { listeners: { "focusout": "onFocusOut($event)" }, properties: { "class": "computedClass()" } }, providers: [provideXValueAccessor((() => XuiTransfer))], ngImport: i0, template: `
|
|
191
220
|
@for (side of SIDES; track side) {
|
|
192
221
|
<div [class]="panelClass()">
|
|
193
222
|
<div class="border-border flex items-center gap-2 border-b px-3 py-2">
|
|
@@ -195,6 +224,7 @@ class XuiTransfer {
|
|
|
195
224
|
type="button"
|
|
196
225
|
role="checkbox"
|
|
197
226
|
[class]="checkboxClass(allChecked(side))"
|
|
227
|
+
[disabled]="isDisabled()"
|
|
198
228
|
[attr.aria-checked]="allChecked(side) ? 'true' : someChecked(side) ? 'mixed' : 'false'"
|
|
199
229
|
[attr.aria-label]="'Select all in ' + title(side)"
|
|
200
230
|
(click)="toggleAll(side)"
|
|
@@ -221,6 +251,7 @@ class XuiTransfer {
|
|
|
221
251
|
<div class="border-border border-b p-2">
|
|
222
252
|
<input
|
|
223
253
|
[class]="searchClass()"
|
|
254
|
+
[disabled]="isDisabled()"
|
|
224
255
|
[value]="side === 'left' ? searchLeft() : searchRight()"
|
|
225
256
|
(input)="setSearch(side, $any($event.target).value)"
|
|
226
257
|
[attr.placeholder]="'Search'"
|
|
@@ -237,7 +268,8 @@ class XuiTransfer {
|
|
|
237
268
|
[attr.aria-label]="title(side)"
|
|
238
269
|
[attr.aria-activedescendant]="activeOptionId(side)"
|
|
239
270
|
class="min-h-40 flex-1 overflow-auto p-1"
|
|
240
|
-
[tabindex]="filtered(side).length ? 0 : -1"
|
|
271
|
+
[tabindex]="filtered(side).length && !isDisabled() ? 0 : -1"
|
|
272
|
+
[attr.aria-disabled]="isDisabled() || null"
|
|
241
273
|
(keydown)="onListKeydown(side, $event)"
|
|
242
274
|
>
|
|
243
275
|
@for (item of filtered(side); track item.key) {
|
|
@@ -280,7 +312,7 @@ class XuiTransfer {
|
|
|
280
312
|
<button
|
|
281
313
|
type="button"
|
|
282
314
|
[class]="moveClass()"
|
|
283
|
-
[disabled]="checkedCount('left') === 0"
|
|
315
|
+
[disabled]="isDisabled() || checkedCount('left') === 0"
|
|
284
316
|
(click)="move('right')"
|
|
285
317
|
aria-label="Move right"
|
|
286
318
|
>
|
|
@@ -297,7 +329,7 @@ class XuiTransfer {
|
|
|
297
329
|
<button
|
|
298
330
|
type="button"
|
|
299
331
|
[class]="moveClass()"
|
|
300
|
-
[disabled]="checkedCount('right') === 0"
|
|
332
|
+
[disabled]="isDisabled() || checkedCount('right') === 0"
|
|
301
333
|
(click)="move('left')"
|
|
302
334
|
aria-label="Move left"
|
|
303
335
|
>
|
|
@@ -328,6 +360,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
328
360
|
type="button"
|
|
329
361
|
role="checkbox"
|
|
330
362
|
[class]="checkboxClass(allChecked(side))"
|
|
363
|
+
[disabled]="isDisabled()"
|
|
331
364
|
[attr.aria-checked]="allChecked(side) ? 'true' : someChecked(side) ? 'mixed' : 'false'"
|
|
332
365
|
[attr.aria-label]="'Select all in ' + title(side)"
|
|
333
366
|
(click)="toggleAll(side)"
|
|
@@ -354,6 +387,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
354
387
|
<div class="border-border border-b p-2">
|
|
355
388
|
<input
|
|
356
389
|
[class]="searchClass()"
|
|
390
|
+
[disabled]="isDisabled()"
|
|
357
391
|
[value]="side === 'left' ? searchLeft() : searchRight()"
|
|
358
392
|
(input)="setSearch(side, $any($event.target).value)"
|
|
359
393
|
[attr.placeholder]="'Search'"
|
|
@@ -370,7 +404,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
370
404
|
[attr.aria-label]="title(side)"
|
|
371
405
|
[attr.aria-activedescendant]="activeOptionId(side)"
|
|
372
406
|
class="min-h-40 flex-1 overflow-auto p-1"
|
|
373
|
-
[tabindex]="filtered(side).length ? 0 : -1"
|
|
407
|
+
[tabindex]="filtered(side).length && !isDisabled() ? 0 : -1"
|
|
408
|
+
[attr.aria-disabled]="isDisabled() || null"
|
|
374
409
|
(keydown)="onListKeydown(side, $event)"
|
|
375
410
|
>
|
|
376
411
|
@for (item of filtered(side); track item.key) {
|
|
@@ -413,7 +448,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
413
448
|
<button
|
|
414
449
|
type="button"
|
|
415
450
|
[class]="moveClass()"
|
|
416
|
-
[disabled]="checkedCount('left') === 0"
|
|
451
|
+
[disabled]="isDisabled() || checkedCount('left') === 0"
|
|
417
452
|
(click)="move('right')"
|
|
418
453
|
aria-label="Move right"
|
|
419
454
|
>
|
|
@@ -430,7 +465,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
430
465
|
<button
|
|
431
466
|
type="button"
|
|
432
467
|
[class]="moveClass()"
|
|
433
|
-
[disabled]="checkedCount('right') === 0"
|
|
468
|
+
[disabled]="isDisabled() || checkedCount('right') === 0"
|
|
434
469
|
(click)="move('left')"
|
|
435
470
|
aria-label="Move left"
|
|
436
471
|
>
|
|
@@ -449,12 +484,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
449
484
|
}
|
|
450
485
|
`,
|
|
451
486
|
host: {
|
|
452
|
-
'[class]': 'computedClass()'
|
|
487
|
+
'[class]': 'computedClass()',
|
|
488
|
+
'(focusout)': 'onFocusOut($event)'
|
|
453
489
|
},
|
|
490
|
+
providers: [provideXValueAccessor((() => XuiTransfer))],
|
|
454
491
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
455
492
|
encapsulation: ViewEncapsulation.None
|
|
456
493
|
}]
|
|
457
|
-
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }],
|
|
494
|
+
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }, { type: i0.Output, args: ["valuesChange"] }], titles: [{ type: i0.Input, args: [{ isSignal: true, alias: "titles", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
458
495
|
|
|
459
496
|
const XuiTransferImports = [XuiTransfer];
|
|
460
497
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"xui-transfer.mjs","sources":["../../../../../../libs/ui/transfer/xui/src/lib/transfer.ts","../../../../../../libs/ui/transfer/xui/src/index.ts","../../../../../../libs/ui/transfer/xui/src/xui-transfer.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n input,\n model,\n signal,\n ViewEncapsulation\n} from '@angular/core';\nimport { xui } from '@xui/core';\nimport { uniqueId } from '@xui/core/a11y';\nimport type { ClassValue } from 'clsx';\n\nexport interface XuiTransferItem {\n key: string;\n title: string;\n disabled?: boolean;\n}\n\ntype Side = 'left' | 'right';\n\n/**\n * A dual list-box that moves items between a source and a target list. `items`\n * is the full set; `targetKeys` (two-way) are the keys on the right. Check items\n * and use the arrow buttons to move them; each side can be searched.\n *\n * ```html\n * <xui-transfer [items]=\"all\" [(targetKeys)]=\"selected\" searchable />\n * ```\n */\n@Component({\n selector: 'xui-transfer',\n template: `\n @for (side of SIDES; track side) {\n <div [class]=\"panelClass()\">\n <div class=\"border-border flex items-center gap-2 border-b px-3 py-2\">\n <button\n type=\"button\"\n role=\"checkbox\"\n [class]=\"checkboxClass(allChecked(side))\"\n [attr.aria-checked]=\"allChecked(side) ? 'true' : someChecked(side) ? 'mixed' : 'false'\"\n [attr.aria-label]=\"'Select all in ' + title(side)\"\n (click)=\"toggleAll(side)\"\n >\n @if (allChecked(side)) {\n <svg viewBox=\"0 0 24 24\" class=\"h-3 w-3\" fill=\"none\">\n <path\n d=\"M20 6 9 17l-5-5\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n } @else if (someChecked(side)) {\n <span class=\"bg-primary-foreground h-0.5 w-2\"></span>\n }\n </button>\n <span class=\"text-foreground text-sm font-medium\">{{ title(side) }}</span>\n <span class=\"text-foreground-muted ms-auto text-xs\">{{ checkedCount(side) }}/{{ list(side).length }}</span>\n </div>\n\n @if (searchable()) {\n <div class=\"border-border border-b p-2\">\n <input\n [class]=\"searchClass()\"\n [value]=\"side === 'left' ? searchLeft() : searchRight()\"\n (input)=\"setSearch(side, $any($event.target).value)\"\n [attr.placeholder]=\"'Search'\"\n aria-label=\"Search\"\n />\n </div>\n }\n\n <!-- A multi-select listbox: one tab stop per side, arrow keys move the\n active option, Space/Enter checks it. -->\n <ul\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-label]=\"title(side)\"\n [attr.aria-activedescendant]=\"activeOptionId(side)\"\n class=\"min-h-40 flex-1 overflow-auto p-1\"\n [tabindex]=\"filtered(side).length ? 0 : -1\"\n (keydown)=\"onListKeydown(side, $event)\"\n >\n @for (item of filtered(side); track item.key) {\n <!-- The keyboard path is the listbox's, not the option's: under\n aria-activedescendant the container holds the tab stop and the\n key handler, so a per-option one would be a second, conflicting\n tab stop. The lint rules only look at this element. -->\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n <li\n role=\"option\"\n [id]=\"optionId(side, item.key)\"\n [class]=\"itemClass(item, activeKey(side) === item.key)\"\n [attr.aria-selected]=\"checked(side).has(item.key)\"\n [attr.aria-disabled]=\"item.disabled ? true : null\"\n (click)=\"activate(side, item)\"\n >\n <span [class]=\"checkboxClass(checked(side).has(item.key))\">\n @if (checked(side).has(item.key)) {\n <svg viewBox=\"0 0 24 24\" class=\"h-3 w-3\" fill=\"none\">\n <path\n d=\"M20 6 9 17l-5-5\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n }\n </span>\n <span class=\"truncate\">{{ item.title }}</span>\n </li>\n } @empty {\n <li class=\"text-foreground-subtle px-2 py-6 text-center text-sm\">No items</li>\n }\n </ul>\n </div>\n\n @if (side === 'left') {\n <div class=\"flex flex-col justify-center gap-2 px-2\">\n <button\n type=\"button\"\n [class]=\"moveClass()\"\n [disabled]=\"checkedCount('left') === 0\"\n (click)=\"move('right')\"\n aria-label=\"Move right\"\n >\n <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\">\n <path\n d=\"M9 6l6 6-6 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n <button\n type=\"button\"\n [class]=\"moveClass()\"\n [disabled]=\"checkedCount('right') === 0\"\n (click)=\"move('left')\"\n aria-label=\"Move left\"\n >\n <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\">\n <path\n d=\"M15 6l-6 6 6 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </div>\n }\n }\n `,\n host: {\n '[class]': 'computedClass()'\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None\n})\nexport class XuiTransfer {\n protected readonly SIDES: Side[] = ['left', 'right'];\n\n readonly class = input<ClassValue>('');\n readonly items = input<XuiTransferItem[]>([]);\n readonly targetKeys = model<string[]>([]);\n readonly titles = input<[string, string]>(['Source', 'Target']);\n readonly searchable = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n private readonly checkedLeft = signal(new Set<string>());\n private readonly checkedRight = signal(new Set<string>());\n protected readonly searchLeft = signal('');\n protected readonly searchRight = signal('');\n\n /** The option the arrow keys are on, per side — see `aria-activedescendant`. */\n private readonly activeLeft = signal<string | null>(null);\n private readonly activeRight = signal<string | null>(null);\n private readonly idPrefix = uniqueId('xui-transfer');\n\n private readonly targetSet = computed(() => new Set(this.targetKeys()));\n protected readonly leftItems = computed(() => this.items().filter(item => !this.targetSet().has(item.key)));\n protected readonly rightItems = computed(() => this.items().filter(item => this.targetSet().has(item.key)));\n\n protected title(side: Side): string {\n return side === 'left' ? this.titles()[0] : this.titles()[1];\n }\n protected list(side: Side): XuiTransferItem[] {\n return side === 'left' ? this.leftItems() : this.rightItems();\n }\n protected checked(side: Side): Set<string> {\n return side === 'left' ? this.checkedLeft() : this.checkedRight();\n }\n\n protected filtered(side: Side): XuiTransferItem[] {\n const query = (side === 'left' ? this.searchLeft() : this.searchRight()).toLowerCase().trim();\n const list = this.list(side);\n return query ? list.filter(item => item.title.toLowerCase().includes(query)) : list;\n }\n\n protected checkedCount(side: Side): number {\n const checked = this.checked(side);\n return this.list(side).filter(item => checked.has(item.key)).length;\n }\n protected allChecked(side: Side): boolean {\n const enabled = this.filtered(side).filter(item => !item.disabled);\n return enabled.length > 0 && enabled.every(item => this.checked(side).has(item.key));\n }\n protected someChecked(side: Side): boolean {\n return this.checkedCount(side) > 0 && !this.allChecked(side);\n }\n\n protected setSearch(side: Side, value: string): void {\n (side === 'left' ? this.searchLeft : this.searchRight).set(value);\n // The old active option may have been filtered away.\n (side === 'left' ? this.activeLeft : this.activeRight).set(null);\n }\n\n // --- keyboard -------------------------------------------------------------\n\n protected optionId(side: Side, key: string): string {\n return `${this.idPrefix}-${side}-${key}`;\n }\n\n /** The active option's key, defaulting to the first one so a fresh Tab lands somewhere. */\n protected activeKey(side: Side): string | null {\n const active = side === 'left' ? this.activeLeft() : this.activeRight();\n const options = this.filtered(side);\n if (active && options.some(item => item.key === active)) {\n return active;\n }\n return options[0]?.key ?? null;\n }\n\n protected activeOptionId(side: Side): string | null {\n const key = this.activeKey(side);\n return key === null ? null : this.optionId(side, key);\n }\n\n /** Move the active option and check it — clicking does both, so keys match. */\n protected activate(side: Side, item: XuiTransferItem): void {\n (side === 'left' ? this.activeLeft : this.activeRight).set(item.key);\n this.toggle(side, item);\n }\n\n protected onListKeydown(side: Side, event: KeyboardEvent): void {\n const options = this.filtered(side);\n if (!options.length) {\n return;\n }\n\n const current = Math.max(\n 0,\n options.findIndex(item => item.key === this.activeKey(side))\n );\n let next: number;\n\n switch (event.key) {\n case 'ArrowDown':\n next = Math.min(options.length - 1, current + 1);\n break;\n case 'ArrowUp':\n next = Math.max(0, current - 1);\n break;\n case 'Home':\n next = 0;\n break;\n case 'End':\n next = options.length - 1;\n break;\n case ' ':\n case 'Enter':\n event.preventDefault();\n this.toggle(side, options[current]);\n return;\n default:\n return;\n }\n\n event.preventDefault();\n (side === 'left' ? this.activeLeft : this.activeRight).set(options[next].key);\n }\n\n protected toggle(side: Side, item: XuiTransferItem): void {\n if (item.disabled) {\n return;\n }\n const signalRef = side === 'left' ? this.checkedLeft : this.checkedRight;\n const next = new Set(signalRef());\n if (next.has(item.key)) {\n next.delete(item.key);\n } else {\n next.add(item.key);\n }\n signalRef.set(next);\n }\n\n protected toggleAll(side: Side): void {\n const signalRef = side === 'left' ? this.checkedLeft : this.checkedRight;\n const enabled = this.filtered(side).filter(item => !item.disabled);\n if (this.allChecked(side)) {\n const next = new Set(signalRef());\n enabled.forEach(item => next.delete(item.key));\n signalRef.set(next);\n } else {\n const next = new Set(signalRef());\n enabled.forEach(item => next.add(item.key));\n signalRef.set(next);\n }\n }\n\n protected move(to: Side): void {\n if (to === 'right') {\n const moving = this.leftItems().filter(item => !item.disabled && this.checkedLeft().has(item.key));\n this.targetKeys.set([...this.targetKeys(), ...moving.map(item => item.key)]);\n this.checkedLeft.set(new Set());\n } else {\n const movingKeys = new Set(\n this.rightItems()\n .filter(item => !item.disabled && this.checkedRight().has(item.key))\n .map(item => item.key)\n );\n this.targetKeys.set(this.targetKeys().filter(key => !movingKeys.has(key)));\n this.checkedRight.set(new Set());\n }\n }\n\n protected readonly computedClass = computed(() => xui('flex items-stretch', this.class()));\n protected readonly panelClass = computed(() => xui('border-border bg-surface flex w-56 flex-col rounded-lg border'));\n protected readonly searchClass = computed(() =>\n xui(\n 'border-border bg-surface text-foreground focus:border-focus h-(--control-height-md) w-full rounded-md border px-(--control-padding-sm) text-sm focus:outline-none'\n )\n );\n\n protected checkboxClass(active: boolean): string {\n return xui(\n 'flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center rounded border',\n active ? 'bg-primary border-primary text-primary-foreground' : 'border-border'\n );\n }\n protected itemClass(item: XuiTransferItem, active: boolean): string {\n return xui(\n 'flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm select-none',\n item.disabled ? 'text-foreground-subtle cursor-not-allowed' : 'hover:bg-surface-inset',\n // The list owns the tab stop, so the active option is marked here rather\n // than by a focus ring on the option itself.\n active && 'bg-surface-inset'\n );\n }\n protected moveClass(): string {\n return xui(\n 'border-border text-foreground hover:bg-surface-inset flex size-(--control-height-md) items-center justify-center rounded-md border disabled:pointer-events-none disabled:opacity-40'\n );\n }\n}\n","import { XuiTransfer } from './lib/transfer';\n\nexport * from './lib/transfer';\n\nexport const XuiTransferImports = [XuiTransfer] 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-transfer.mjs","sources":["../../../../../../libs/ui/transfer/xui/src/lib/transfer.ts","../../../../../../libs/ui/transfer/xui/src/index.ts","../../../../../../libs/ui/transfer/xui/src/xui-transfer.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n ElementRef,\n inject,\n input,\n model,\n signal,\n ViewEncapsulation\n} from '@angular/core';\nimport type { ControlValueAccessor } from '@angular/forms';\nimport { xui } from '@xui/core';\nimport { uniqueId } from '@xui/core/a11y';\nimport { createXValueAccessor, provideXValueAccessor } from '@xui/core/forms';\nimport type { ClassValue } from 'clsx';\n\nexport interface XuiTransferItem {\n key: string;\n title: string;\n disabled?: boolean;\n}\n\ntype Side = 'left' | 'right';\n\n/**\n * A dual list-box that moves items between a source and a target list. `items`\n * is the full set; `values` (two-way) are the keys on the right. Check items\n * and use the arrow buttons to move them; each side can be searched.\n *\n * ```html\n * <xui-transfer [items]=\"all\" [(values)]=\"selected\" searchable />\n * ```\n */\n@Component({\n selector: 'xui-transfer',\n template: `\n @for (side of SIDES; track side) {\n <div [class]=\"panelClass()\">\n <div class=\"border-border flex items-center gap-2 border-b px-3 py-2\">\n <button\n type=\"button\"\n role=\"checkbox\"\n [class]=\"checkboxClass(allChecked(side))\"\n [disabled]=\"isDisabled()\"\n [attr.aria-checked]=\"allChecked(side) ? 'true' : someChecked(side) ? 'mixed' : 'false'\"\n [attr.aria-label]=\"'Select all in ' + title(side)\"\n (click)=\"toggleAll(side)\"\n >\n @if (allChecked(side)) {\n <svg viewBox=\"0 0 24 24\" class=\"h-3 w-3\" fill=\"none\">\n <path\n d=\"M20 6 9 17l-5-5\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n } @else if (someChecked(side)) {\n <span class=\"bg-primary-foreground h-0.5 w-2\"></span>\n }\n </button>\n <span class=\"text-foreground text-sm font-medium\">{{ title(side) }}</span>\n <span class=\"text-foreground-muted ms-auto text-xs\">{{ checkedCount(side) }}/{{ list(side).length }}</span>\n </div>\n\n @if (searchable()) {\n <div class=\"border-border border-b p-2\">\n <input\n [class]=\"searchClass()\"\n [disabled]=\"isDisabled()\"\n [value]=\"side === 'left' ? searchLeft() : searchRight()\"\n (input)=\"setSearch(side, $any($event.target).value)\"\n [attr.placeholder]=\"'Search'\"\n aria-label=\"Search\"\n />\n </div>\n }\n\n <!-- A multi-select listbox: one tab stop per side, arrow keys move the\n active option, Space/Enter checks it. -->\n <ul\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-label]=\"title(side)\"\n [attr.aria-activedescendant]=\"activeOptionId(side)\"\n class=\"min-h-40 flex-1 overflow-auto p-1\"\n [tabindex]=\"filtered(side).length && !isDisabled() ? 0 : -1\"\n [attr.aria-disabled]=\"isDisabled() || null\"\n (keydown)=\"onListKeydown(side, $event)\"\n >\n @for (item of filtered(side); track item.key) {\n <!-- The keyboard path is the listbox's, not the option's: under\n aria-activedescendant the container holds the tab stop and the\n key handler, so a per-option one would be a second, conflicting\n tab stop. The lint rules only look at this element. -->\n <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n <li\n role=\"option\"\n [id]=\"optionId(side, item.key)\"\n [class]=\"itemClass(item, activeKey(side) === item.key)\"\n [attr.aria-selected]=\"checked(side).has(item.key)\"\n [attr.aria-disabled]=\"item.disabled ? true : null\"\n (click)=\"activate(side, item)\"\n >\n <span [class]=\"checkboxClass(checked(side).has(item.key))\">\n @if (checked(side).has(item.key)) {\n <svg viewBox=\"0 0 24 24\" class=\"h-3 w-3\" fill=\"none\">\n <path\n d=\"M20 6 9 17l-5-5\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n }\n </span>\n <span class=\"truncate\">{{ item.title }}</span>\n </li>\n } @empty {\n <li class=\"text-foreground-subtle px-2 py-6 text-center text-sm\">No items</li>\n }\n </ul>\n </div>\n\n @if (side === 'left') {\n <div class=\"flex flex-col justify-center gap-2 px-2\">\n <button\n type=\"button\"\n [class]=\"moveClass()\"\n [disabled]=\"isDisabled() || checkedCount('left') === 0\"\n (click)=\"move('right')\"\n aria-label=\"Move right\"\n >\n <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\">\n <path\n d=\"M9 6l6 6-6 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n <button\n type=\"button\"\n [class]=\"moveClass()\"\n [disabled]=\"isDisabled() || checkedCount('right') === 0\"\n (click)=\"move('left')\"\n aria-label=\"Move left\"\n >\n <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\">\n <path\n d=\"M15 6l-6 6 6 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </div>\n }\n }\n `,\n host: {\n '[class]': 'computedClass()',\n '(focusout)': 'onFocusOut($event)'\n },\n providers: [provideXValueAccessor(() => XuiTransfer)],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None\n})\nexport class XuiTransfer implements ControlValueAccessor {\n protected readonly SIDES: Side[] = ['left', 'right'];\n private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n\n readonly class = input<ClassValue>('');\n readonly items = input<XuiTransferItem[]>([]);\n /** The target-list keys. Two-way bindable with `[(values)]`, or via `formControl`/`ngModel`. */\n readonly values = model<string[]>([]);\n readonly titles = input<[string, string]>(['Source', 'Target']);\n readonly searchable = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n protected readonly cva = createXValueAccessor<string[]>({\n onWrite: values => this.values.set(values ?? []),\n disabled: this.disabled\n });\n protected readonly isDisabled = this.cva.disabled;\n\n private readonly checkedLeft = signal(new Set<string>());\n private readonly checkedRight = signal(new Set<string>());\n protected readonly searchLeft = signal('');\n protected readonly searchRight = signal('');\n\n /** The option the arrow keys are on, per side — see `aria-activedescendant`. */\n private readonly activeLeft = signal<string | null>(null);\n private readonly activeRight = signal<string | null>(null);\n private readonly idPrefix = uniqueId('xui-transfer');\n\n private readonly targetSet = computed(() => new Set(this.values()));\n protected readonly leftItems = computed(() => this.items().filter(item => !this.targetSet().has(item.key)));\n protected readonly rightItems = computed(() => this.items().filter(item => this.targetSet().has(item.key)));\n\n protected title(side: Side): string {\n return side === 'left' ? this.titles()[0] : this.titles()[1];\n }\n protected list(side: Side): XuiTransferItem[] {\n return side === 'left' ? this.leftItems() : this.rightItems();\n }\n protected checked(side: Side): Set<string> {\n return side === 'left' ? this.checkedLeft() : this.checkedRight();\n }\n\n protected filtered(side: Side): XuiTransferItem[] {\n const query = (side === 'left' ? this.searchLeft() : this.searchRight()).toLowerCase().trim();\n const list = this.list(side);\n return query ? list.filter(item => item.title.toLowerCase().includes(query)) : list;\n }\n\n protected checkedCount(side: Side): number {\n const checked = this.checked(side);\n return this.list(side).filter(item => checked.has(item.key)).length;\n }\n protected allChecked(side: Side): boolean {\n const enabled = this.filtered(side).filter(item => !item.disabled);\n return enabled.length > 0 && enabled.every(item => this.checked(side).has(item.key));\n }\n protected someChecked(side: Side): boolean {\n return this.checkedCount(side) > 0 && !this.allChecked(side);\n }\n\n protected setSearch(side: Side, value: string): void {\n (side === 'left' ? this.searchLeft : this.searchRight).set(value);\n // The old active option may have been filtered away.\n (side === 'left' ? this.activeLeft : this.activeRight).set(null);\n }\n\n // --- keyboard -------------------------------------------------------------\n\n protected optionId(side: Side, key: string): string {\n return `${this.idPrefix}-${side}-${key}`;\n }\n\n /** The active option's key, defaulting to the first one so a fresh Tab lands somewhere. */\n protected activeKey(side: Side): string | null {\n const active = side === 'left' ? this.activeLeft() : this.activeRight();\n const options = this.filtered(side);\n if (active && options.some(item => item.key === active)) {\n return active;\n }\n return options[0]?.key ?? null;\n }\n\n protected activeOptionId(side: Side): string | null {\n const key = this.activeKey(side);\n return key === null ? null : this.optionId(side, key);\n }\n\n /** Move the active option and check it — clicking does both, so keys match. */\n protected activate(side: Side, item: XuiTransferItem): void {\n if (this.isDisabled()) {\n return;\n }\n (side === 'left' ? this.activeLeft : this.activeRight).set(item.key);\n this.toggle(side, item);\n }\n\n protected onListKeydown(side: Side, event: KeyboardEvent): void {\n const options = this.filtered(side);\n if (!options.length || this.isDisabled()) {\n return;\n }\n\n const current = Math.max(\n 0,\n options.findIndex(item => item.key === this.activeKey(side))\n );\n let next: number;\n\n switch (event.key) {\n case 'ArrowDown':\n next = Math.min(options.length - 1, current + 1);\n break;\n case 'ArrowUp':\n next = Math.max(0, current - 1);\n break;\n case 'Home':\n next = 0;\n break;\n case 'End':\n next = options.length - 1;\n break;\n case ' ':\n case 'Enter':\n event.preventDefault();\n this.toggle(side, options[current]);\n return;\n default:\n return;\n }\n\n event.preventDefault();\n (side === 'left' ? this.activeLeft : this.activeRight).set(options[next].key);\n }\n\n protected toggle(side: Side, item: XuiTransferItem): void {\n if (item.disabled || this.isDisabled()) {\n return;\n }\n const signalRef = side === 'left' ? this.checkedLeft : this.checkedRight;\n const next = new Set(signalRef());\n if (next.has(item.key)) {\n next.delete(item.key);\n } else {\n next.add(item.key);\n }\n signalRef.set(next);\n }\n\n protected toggleAll(side: Side): void {\n if (this.isDisabled()) {\n return;\n }\n const signalRef = side === 'left' ? this.checkedLeft : this.checkedRight;\n const enabled = this.filtered(side).filter(item => !item.disabled);\n if (this.allChecked(side)) {\n const next = new Set(signalRef());\n enabled.forEach(item => next.delete(item.key));\n signalRef.set(next);\n } else {\n const next = new Set(signalRef());\n enabled.forEach(item => next.add(item.key));\n signalRef.set(next);\n }\n }\n\n protected move(to: Side): void {\n if (this.isDisabled()) {\n return;\n }\n if (to === 'right') {\n const moving = this.leftItems().filter(item => !item.disabled && this.checkedLeft().has(item.key));\n this.values.set([...this.values(), ...moving.map(item => item.key)]);\n this.checkedLeft.set(new Set());\n } else {\n const movingKeys = new Set(\n this.rightItems()\n .filter(item => !item.disabled && this.checkedRight().has(item.key))\n .map(item => item.key)\n );\n this.values.set(this.values().filter(key => !movingKeys.has(key)));\n this.checkedRight.set(new Set());\n }\n this.cva.notifyChange(this.values());\n }\n\n /** Touched fires only when focus leaves the whole widget, not between its panes. */\n protected onFocusOut(event: FocusEvent): void {\n if (!this.host.nativeElement.contains(event.relatedTarget as Node | null)) {\n this.cva.markTouched();\n }\n }\n\n protected readonly computedClass = computed(() =>\n xui('flex items-stretch', this.isDisabled() && 'opacity-50', this.class())\n );\n protected readonly panelClass = computed(() => xui('border-border bg-surface flex w-56 flex-col rounded-lg border'));\n protected readonly searchClass = computed(() =>\n xui(\n 'border-border bg-surface text-foreground focus-visible:border-focus h-(--control-height-md) w-full rounded-md border px-(--control-padding-sm) text-sm focus-visible:outline-none'\n )\n );\n\n protected checkboxClass(active: boolean): string {\n return xui(\n 'flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center rounded border',\n active ? 'bg-primary border-primary text-primary-foreground' : 'border-border'\n );\n }\n protected itemClass(item: XuiTransferItem, active: boolean): string {\n return xui(\n 'flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm select-none',\n item.disabled ? 'text-foreground-subtle cursor-not-allowed' : 'hover:bg-surface-inset',\n // The list owns the tab stop, so the active option is marked here rather\n // than by a focus ring on the option itself.\n active && 'bg-surface-inset'\n );\n }\n protected moveClass(): string {\n return xui(\n 'border-border text-foreground hover:bg-surface-inset flex size-(--control-height-md) items-center justify-center rounded-md border disabled:pointer-events-none disabled:opacity-40'\n );\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 { XuiTransfer } from './lib/transfer';\n\nexport * from './lib/transfer';\n\nexport const XuiTransferImports = [XuiTransfer] 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/transfer",
|
|
3
|
-
"version": "2.0.0-alpha.
|
|
3
|
+
"version": "2.0.0-alpha.13",
|
|
4
4
|
"description": "Modern Angular 22 UI Library based on TailwindCSS",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"angular",
|
|
@@ -38,7 +38,8 @@
|
|
|
38
38
|
"peerDependencies": {
|
|
39
39
|
"@angular/cdk": "22",
|
|
40
40
|
"@angular/core": "22",
|
|
41
|
-
"@
|
|
41
|
+
"@angular/forms": "22",
|
|
42
|
+
"@xui/core": "2.0.0-alpha.13",
|
|
42
43
|
"clsx": "^2.1.1"
|
|
43
44
|
},
|
|
44
45
|
"publishConfig": {
|
package/types/xui-transfer.d.ts
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
import * as _xui_core_forms from '@xui/core/forms';
|
|
1
2
|
import * as _angular_core from '@angular/core';
|
|
2
3
|
import { BooleanInput } from '@angular/cdk/coercion';
|
|
4
|
+
import { ControlValueAccessor } from '@angular/forms';
|
|
3
5
|
import { ClassValue } from 'clsx';
|
|
4
6
|
|
|
5
7
|
interface XuiTransferItem {
|
|
@@ -10,20 +12,25 @@ interface XuiTransferItem {
|
|
|
10
12
|
type Side = 'left' | 'right';
|
|
11
13
|
/**
|
|
12
14
|
* A dual list-box that moves items between a source and a target list. `items`
|
|
13
|
-
* is the full set; `
|
|
15
|
+
* is the full set; `values` (two-way) are the keys on the right. Check items
|
|
14
16
|
* and use the arrow buttons to move them; each side can be searched.
|
|
15
17
|
*
|
|
16
18
|
* ```html
|
|
17
|
-
* <xui-transfer [items]="all" [(
|
|
19
|
+
* <xui-transfer [items]="all" [(values)]="selected" searchable />
|
|
18
20
|
* ```
|
|
19
21
|
*/
|
|
20
|
-
declare class XuiTransfer {
|
|
22
|
+
declare class XuiTransfer implements ControlValueAccessor {
|
|
21
23
|
protected readonly SIDES: Side[];
|
|
24
|
+
private readonly host;
|
|
22
25
|
readonly class: _angular_core.InputSignal<ClassValue>;
|
|
23
26
|
readonly items: _angular_core.InputSignal<XuiTransferItem[]>;
|
|
24
|
-
|
|
27
|
+
/** The target-list keys. Two-way bindable with `[(values)]`, or via `formControl`/`ngModel`. */
|
|
28
|
+
readonly values: _angular_core.ModelSignal<string[]>;
|
|
25
29
|
readonly titles: _angular_core.InputSignal<[string, string]>;
|
|
26
30
|
readonly searchable: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
31
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
32
|
+
protected readonly cva: _xui_core_forms.XValueAccessor<string[]>;
|
|
33
|
+
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
27
34
|
private readonly checkedLeft;
|
|
28
35
|
private readonly checkedRight;
|
|
29
36
|
protected readonly searchLeft: _angular_core.WritableSignal<string>;
|
|
@@ -53,14 +60,20 @@ declare class XuiTransfer {
|
|
|
53
60
|
protected toggle(side: Side, item: XuiTransferItem): void;
|
|
54
61
|
protected toggleAll(side: Side): void;
|
|
55
62
|
protected move(to: Side): void;
|
|
63
|
+
/** Touched fires only when focus leaves the whole widget, not between its panes. */
|
|
64
|
+
protected onFocusOut(event: FocusEvent): void;
|
|
56
65
|
protected readonly computedClass: _angular_core.Signal<string>;
|
|
57
66
|
protected readonly panelClass: _angular_core.Signal<string>;
|
|
58
67
|
protected readonly searchClass: _angular_core.Signal<string>;
|
|
59
68
|
protected checkboxClass(active: boolean): string;
|
|
60
69
|
protected itemClass(item: XuiTransferItem, active: boolean): string;
|
|
61
70
|
protected moveClass(): string;
|
|
71
|
+
readonly writeValue: (value: string[]) => void;
|
|
72
|
+
readonly registerOnChange: (fn: _xui_core_forms.XChangeFn<string[]>) => void;
|
|
73
|
+
readonly registerOnTouched: (fn: _xui_core_forms.XTouchFn) => void;
|
|
74
|
+
readonly setDisabledState: (isDisabled: boolean) => void;
|
|
62
75
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<XuiTransfer, never>;
|
|
63
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<XuiTransfer, "xui-transfer", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "
|
|
76
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<XuiTransfer, "xui-transfer", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "values": { "alias": "values"; "required": false; "isSignal": true; }; "titles": { "alias": "titles"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "values": "valuesChange"; }, never, never, true, never>;
|
|
64
77
|
}
|
|
65
78
|
|
|
66
79
|
declare const XuiTransferImports: readonly [typeof XuiTransfer];
|