@xui/multi-select 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-multi-select.mjs +75 -67
- package/fesm2022/xui-multi-select.mjs.map +1 -1
- package/package.json +7 -6
- package/types/xui-multi-select.d.ts +19 -7
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,21 +1,21 @@
|
|
|
1
1
|
import { NgTemplateOutlet } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { input, booleanAttribute, model, output, signal, contentChild, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { input, booleanAttribute, model, output, signal, contentChild, computed, effect, untracked, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
4
4
|
import { provideIcons, NgIcon } from '@ng-icons/core';
|
|
5
5
|
import { matCheckRound } from '@ng-icons/material-icons/round';
|
|
6
6
|
import { xui } from '@xui/core';
|
|
7
|
-
import {
|
|
7
|
+
import { createXValueAccessor, provideXValueAccessor } from '@xui/core/forms';
|
|
8
|
+
import { createXQueryList, createXItemListPredicate, createXActiveOption, trackXItem } from '@xui/core/query';
|
|
8
9
|
import { XuiIcon } from '@xui/icon';
|
|
9
10
|
import * as i1 from '@xui/popover';
|
|
10
11
|
import { XuiPopoverImports } from '@xui/popover';
|
|
11
12
|
import { XuiSelectOption } from '@xui/select';
|
|
12
13
|
import { XuiTag } from '@xui/tag';
|
|
13
14
|
|
|
14
|
-
const defaultMatch = (text, query) => text.toLowerCase().includes(query.toLowerCase());
|
|
15
15
|
/**
|
|
16
16
|
* A filterable multi-select: an inline field of removable chips plus a query
|
|
17
17
|
* input opens a popover of options with a check on the chosen ones. Clicking an
|
|
18
|
-
* option toggles it (the popover stays open). `[(
|
|
18
|
+
* option toggles it (the popover stays open). `[(values)]` two-way binding.
|
|
19
19
|
*/
|
|
20
20
|
class XuiMultiSelect {
|
|
21
21
|
class = input('', /* @ts-ignore */
|
|
@@ -33,9 +33,16 @@ class XuiMultiSelect {
|
|
|
33
33
|
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
34
34
|
noResultsText = input('No results.', /* @ts-ignore */
|
|
35
35
|
...(ngDevMode ? [{ debugName: "noResultsText" }] : /* istanbul ignore next */ []));
|
|
36
|
-
/** The chosen items. Two-way bindable with `[(
|
|
37
|
-
|
|
38
|
-
...(ngDevMode ? [{ debugName: "
|
|
36
|
+
/** The chosen items. Two-way bindable with `[(values)]`, or via `formControl`/`ngModel`. */
|
|
37
|
+
values = model([], /* @ts-ignore */
|
|
38
|
+
...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
|
|
39
|
+
cva = createXValueAccessor({
|
|
40
|
+
onWrite: values => this.values.set(values ?? []),
|
|
41
|
+
disabled: this.disabled
|
|
42
|
+
});
|
|
43
|
+
isDisabled = this.cva.disabled;
|
|
44
|
+
/** Whether the popover has ever been open — so the initial closed state is not "touched". */
|
|
45
|
+
hasOpened = false;
|
|
39
46
|
itemAdded = output();
|
|
40
47
|
itemRemoved = output();
|
|
41
48
|
open = model(false, /* @ts-ignore */
|
|
@@ -44,31 +51,45 @@ class XuiMultiSelect {
|
|
|
44
51
|
...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
|
|
45
52
|
optionTemplate = contentChild((XuiSelectOption), /* @ts-ignore */
|
|
46
53
|
...(ngDevMode ? [{ debugName: "optionTemplate" }] : /* istanbul ignore next */ []));
|
|
47
|
-
list =
|
|
54
|
+
list = createXQueryList({
|
|
48
55
|
items: this.items,
|
|
49
56
|
query: this.query,
|
|
50
57
|
itemText: item => this.itemText()(item),
|
|
51
58
|
itemDisabled: item => this.itemDisabled()(item),
|
|
52
|
-
itemListPredicate: (
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
+
itemListPredicate: createXItemListPredicate({
|
|
60
|
+
itemText: this.itemText,
|
|
61
|
+
itemPredicate: this.itemPredicate
|
|
62
|
+
})
|
|
63
|
+
});
|
|
64
|
+
// Keyboard navigation over the filtered list (ArrowDown re-opens the popover;
|
|
65
|
+
// Enter toggles rather than selects).
|
|
66
|
+
nav = createXActiveOption({
|
|
67
|
+
list: this.list,
|
|
68
|
+
select: item => this.toggle(item),
|
|
69
|
+
close: () => this.open.set(false),
|
|
70
|
+
open: () => this.open.set(true)
|
|
59
71
|
});
|
|
60
72
|
computedClass = computed(() => xui('block', this.class()), /* @ts-ignore */
|
|
61
73
|
...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
|
|
62
|
-
controlClass = computed(() => xui('border-border bg-surface-inset flex min-h-(--control-height-md) w-full flex-wrap items-center gap-1.5 rounded-lg border px-(--control-padding-sm) py-1 text-sm', 'focus-within:border-focus cursor-text transition-colors', this.
|
|
74
|
+
controlClass = computed(() => xui('border-border bg-surface-inset flex min-h-(--control-height-md) w-full flex-wrap items-center gap-1.5 rounded-lg border px-(--control-padding-sm) py-1 text-sm', 'focus-within:border-focus cursor-text transition-colors', this.isDisabled() && 'cursor-not-allowed opacity-50'), /* @ts-ignore */
|
|
63
75
|
...(ngDevMode ? [{ debugName: "controlClass" }] : /* istanbul ignore next */ []));
|
|
76
|
+
constructor() {
|
|
77
|
+
// Mark the control touched once the popover closes after having been open.
|
|
78
|
+
effect(() => {
|
|
79
|
+
if (this.open()) {
|
|
80
|
+
this.hasOpened = true;
|
|
81
|
+
}
|
|
82
|
+
else if (this.hasOpened) {
|
|
83
|
+
untracked(() => this.cva.markTouched());
|
|
84
|
+
}
|
|
85
|
+
});
|
|
86
|
+
}
|
|
64
87
|
displayText(item) {
|
|
65
88
|
return this.itemText()(item);
|
|
66
89
|
}
|
|
67
|
-
trackItem
|
|
68
|
-
return item ?? index;
|
|
69
|
-
}
|
|
90
|
+
trackItem = trackXItem;
|
|
70
91
|
isSelected(item) {
|
|
71
|
-
return this.
|
|
92
|
+
return this.values().includes(item);
|
|
72
93
|
}
|
|
73
94
|
optionClass(item) {
|
|
74
95
|
return xui('flex cursor-pointer items-center gap-2 rounded px-2 py-1.5', this.list.isActive(item) && 'bg-primary/10', this.list.isDisabled(item) && 'pointer-events-none opacity-50');
|
|
@@ -79,35 +100,12 @@ class XuiMultiSelect {
|
|
|
79
100
|
this.list.activateFirst();
|
|
80
101
|
}
|
|
81
102
|
onKeydown(event) {
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
case 'ArrowUp':
|
|
89
|
-
event.preventDefault();
|
|
90
|
-
this.list.moveActiveItem(-1);
|
|
91
|
-
break;
|
|
92
|
-
case 'Enter': {
|
|
93
|
-
event.preventDefault();
|
|
94
|
-
const active = this.list.activeItem();
|
|
95
|
-
if (active != null) {
|
|
96
|
-
this.toggle(active);
|
|
97
|
-
}
|
|
98
|
-
break;
|
|
99
|
-
}
|
|
100
|
-
case 'Backspace':
|
|
101
|
-
// Remove the last chip when the query is empty.
|
|
102
|
-
if (this.query() === '' && this.selectedItems().length) {
|
|
103
|
-
this.remove(this.selectedItems()[this.selectedItems().length - 1]);
|
|
104
|
-
}
|
|
105
|
-
break;
|
|
106
|
-
case 'Escape':
|
|
107
|
-
this.open.set(false);
|
|
108
|
-
break;
|
|
109
|
-
default:
|
|
110
|
-
return;
|
|
103
|
+
if (this.nav.onKeydown(event)) {
|
|
104
|
+
return;
|
|
105
|
+
}
|
|
106
|
+
// Remove the last chip when Backspace is pressed on an empty query.
|
|
107
|
+
if (event.key === 'Backspace' && this.query() === '' && this.values().length) {
|
|
108
|
+
this.remove(this.values()[this.values().length - 1]);
|
|
111
109
|
}
|
|
112
110
|
}
|
|
113
111
|
toggle(item) {
|
|
@@ -117,28 +115,37 @@ class XuiMultiSelect {
|
|
|
117
115
|
this.isSelected(item) ? this.remove(item) : this.add(item);
|
|
118
116
|
}
|
|
119
117
|
add(item) {
|
|
120
|
-
this.
|
|
118
|
+
this.values.update(items => [...items, item]);
|
|
119
|
+
this.cva.notifyChange(this.values());
|
|
121
120
|
this.query.set('');
|
|
122
121
|
this.itemAdded.emit(item);
|
|
123
122
|
}
|
|
124
123
|
remove(item) {
|
|
125
|
-
this.
|
|
124
|
+
if (this.isDisabled()) {
|
|
125
|
+
return;
|
|
126
|
+
}
|
|
127
|
+
this.values.update(items => items.filter(i => i !== item));
|
|
128
|
+
this.cva.notifyChange(this.values());
|
|
126
129
|
this.itemRemoved.emit(item);
|
|
127
130
|
}
|
|
131
|
+
writeValue = this.cva.writeValue;
|
|
132
|
+
registerOnChange = this.cva.registerOnChange;
|
|
133
|
+
registerOnTouched = this.cva.registerOnTouched;
|
|
134
|
+
setDisabledState = this.cva.setDisabledState;
|
|
128
135
|
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiMultiSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
129
|
-
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: XuiMultiSelect, isStandalone: true, selector: "xui-multi-select", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, itemText: { classPropertyName: "itemText", publicName: "itemText", isSignal: true, isRequired: false, transformFunction: null }, itemPredicate: { classPropertyName: "itemPredicate", publicName: "itemPredicate", isSignal: true, isRequired: false, transformFunction: null }, itemDisabled: { classPropertyName: "itemDisabled", publicName: "itemDisabled", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null },
|
|
136
|
+
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: XuiMultiSelect, isStandalone: true, selector: "xui-multi-select", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, itemText: { classPropertyName: "itemText", publicName: "itemText", isSignal: true, isRequired: false, transformFunction: null }, itemPredicate: { classPropertyName: "itemPredicate", publicName: "itemPredicate", isSignal: true, isRequired: false, transformFunction: null }, itemDisabled: { classPropertyName: "itemDisabled", publicName: "itemDisabled", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { values: "valuesChange", itemAdded: "itemAdded", itemRemoved: "itemRemoved", open: "openChange" }, host: { properties: { "class": "computedClass()" } }, providers: [provideXValueAccessor((() => XuiMultiSelect))], queries: [{ propertyName: "optionTemplate", first: true, predicate: (XuiSelectOption), descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
130
137
|
<div
|
|
131
138
|
[class]="controlClass()"
|
|
132
139
|
[xuiPopover]="panel"
|
|
133
|
-
[(
|
|
140
|
+
[(open)]="open"
|
|
134
141
|
[role]="'listbox'"
|
|
135
142
|
[matchTargetWidth]="true"
|
|
136
143
|
[minimal]="true"
|
|
137
|
-
[disabled]="
|
|
144
|
+
[disabled]="isDisabled()"
|
|
138
145
|
placement="bottom-start"
|
|
139
146
|
>
|
|
140
|
-
@for (item of
|
|
141
|
-
<xui-tag minimal
|
|
147
|
+
@for (item of values(); track trackItem($index, item)) {
|
|
148
|
+
<xui-tag minimal color="primary" [removable]="!isDisabled()" (removed)="remove(item)">{{
|
|
142
149
|
displayText(item)
|
|
143
150
|
}}</xui-tag>
|
|
144
151
|
}
|
|
@@ -147,9 +154,9 @@ class XuiMultiSelect {
|
|
|
147
154
|
#search
|
|
148
155
|
type="text"
|
|
149
156
|
class="text-foreground placeholder:text-foreground-subtle min-w-24 flex-1 bg-transparent py-1 outline-none"
|
|
150
|
-
[placeholder]="
|
|
157
|
+
[placeholder]="values().length ? '' : placeholder()"
|
|
151
158
|
[value]="query()"
|
|
152
|
-
[disabled]="
|
|
159
|
+
[disabled]="isDisabled()"
|
|
153
160
|
(input)="onQuery($event)"
|
|
154
161
|
(keydown)="onKeydown($event)"
|
|
155
162
|
/>
|
|
@@ -189,7 +196,7 @@ class XuiMultiSelect {
|
|
|
189
196
|
}
|
|
190
197
|
</ul>
|
|
191
198
|
</ng-template>
|
|
192
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: XuiIcon, selector: "ng-icon[xui]", inputs: ["class", "size", "color", "
|
|
199
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: XuiIcon, selector: "ng-icon[xui]", inputs: ["class", "size", "color", "label"], exportAs: ["xuiIcon"] }, { kind: "component", type: XuiTag, selector: "xui-tag", inputs: ["class", "color", "minimal", "large", "round", "fill", "interactive", "removable", "icon"], outputs: ["removed"] }, { kind: "directive", type: i1.XuiPopover, selector: "[xuiPopover]", inputs: ["xuiPopover", "context", "interactionKind", "placement", "offset", "hoverOpenDelay", "hoverCloseDelay", "minimal", "matchTargetWidth", "disabled", "panelClass", "role", "ariaLabel", "open"], outputs: ["openChange", "opened", "closed"], exportAs: ["xuiPopover"] }], viewProviders: [provideIcons({ matCheckRound })], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
193
200
|
}
|
|
194
201
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiMultiSelect, decorators: [{
|
|
195
202
|
type: Component,
|
|
@@ -200,15 +207,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
200
207
|
<div
|
|
201
208
|
[class]="controlClass()"
|
|
202
209
|
[xuiPopover]="panel"
|
|
203
|
-
[(
|
|
210
|
+
[(open)]="open"
|
|
204
211
|
[role]="'listbox'"
|
|
205
212
|
[matchTargetWidth]="true"
|
|
206
213
|
[minimal]="true"
|
|
207
|
-
[disabled]="
|
|
214
|
+
[disabled]="isDisabled()"
|
|
208
215
|
placement="bottom-start"
|
|
209
216
|
>
|
|
210
|
-
@for (item of
|
|
211
|
-
<xui-tag minimal
|
|
217
|
+
@for (item of values(); track trackItem($index, item)) {
|
|
218
|
+
<xui-tag minimal color="primary" [removable]="!isDisabled()" (removed)="remove(item)">{{
|
|
212
219
|
displayText(item)
|
|
213
220
|
}}</xui-tag>
|
|
214
221
|
}
|
|
@@ -217,9 +224,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
217
224
|
#search
|
|
218
225
|
type="text"
|
|
219
226
|
class="text-foreground placeholder:text-foreground-subtle min-w-24 flex-1 bg-transparent py-1 outline-none"
|
|
220
|
-
[placeholder]="
|
|
227
|
+
[placeholder]="values().length ? '' : placeholder()"
|
|
221
228
|
[value]="query()"
|
|
222
|
-
[disabled]="
|
|
229
|
+
[disabled]="isDisabled()"
|
|
223
230
|
(input)="onQuery($event)"
|
|
224
231
|
(keydown)="onKeydown($event)"
|
|
225
232
|
/>
|
|
@@ -265,9 +272,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
265
272
|
},
|
|
266
273
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
267
274
|
encapsulation: ViewEncapsulation.None,
|
|
268
|
-
viewProviders: [provideIcons({ matCheckRound })]
|
|
275
|
+
viewProviders: [provideIcons({ matCheckRound })],
|
|
276
|
+
providers: [provideXValueAccessor((() => XuiMultiSelect))]
|
|
269
277
|
}]
|
|
270
|
-
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], itemText: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemText", required: false }] }], itemPredicate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemPredicate", required: false }] }], itemDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemDisabled", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }],
|
|
278
|
+
}], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], itemText: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemText", required: false }] }], itemPredicate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemPredicate", required: false }] }], itemDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemDisabled", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }, { type: i0.Output, args: ["valuesChange"] }], itemAdded: [{ type: i0.Output, args: ["itemAdded"] }], itemRemoved: [{ type: i0.Output, args: ["itemRemoved"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], optionTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => XuiSelectOption), { isSignal: true }] }] } });
|
|
271
279
|
|
|
272
280
|
const XuiMultiSelectImports = [XuiMultiSelect];
|
|
273
281
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"xui-multi-select.mjs","sources":["../../../../../../libs/ui/multi-select/xui/src/lib/multi-select.ts","../../../../../../libs/ui/multi-select/xui/src/index.ts","../../../../../../libs/ui/multi-select/xui/src/xui-multi-select.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n contentChild,\n input,\n model,\n output,\n signal,\n ViewEncapsulation\n} from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { matCheckRound } from '@ng-icons/material-icons/round';\nimport { xui } from '@xui/core';\nimport { createQueryList } from '@xui/core/query';\nimport { XuiIcon } from '@xui/icon';\nimport { XuiPopoverImports } from '@xui/popover';\nimport { XuiSelectOption } from '@xui/select';\nimport { XuiTag } from '@xui/tag';\nimport type { ClassValue } from 'clsx';\n\nconst defaultMatch = (text: string, query: string): boolean => text.toLowerCase().includes(query.toLowerCase());\n\n/**\n * A filterable multi-select: an inline field of removable chips plus a query\n * input opens a popover of options with a check on the chosen ones. Clicking an\n * option toggles it (the popover stays open). `[(selectedItems)]` two-way binding.\n */\n@Component({\n selector: 'xui-multi-select',\n imports: [NgTemplateOutlet, NgIcon, XuiIcon, XuiTag, XuiPopoverImports],\n template: `\n <div\n [class]=\"controlClass()\"\n [xuiPopover]=\"panel\"\n [(isOpen)]=\"open\"\n [role]=\"'listbox'\"\n [matchTargetWidth]=\"true\"\n [minimal]=\"true\"\n [disabled]=\"disabled()\"\n placement=\"bottom-start\"\n >\n @for (item of selectedItems(); track trackItem($index, item)) {\n <xui-tag minimal intent=\"primary\" [removable]=\"!disabled()\" (removed)=\"remove(item)\">{{\n displayText(item)\n }}</xui-tag>\n }\n\n <input\n #search\n type=\"text\"\n class=\"text-foreground placeholder:text-foreground-subtle min-w-24 flex-1 bg-transparent py-1 outline-none\"\n [placeholder]=\"selectedItems().length ? '' : placeholder()\"\n [value]=\"query()\"\n [disabled]=\"disabled()\"\n (input)=\"onQuery($event)\"\n (keydown)=\"onKeydown($event)\"\n />\n </div>\n\n <ng-template #panel>\n <ul role=\"listbox\" aria-multiselectable=\"true\" class=\"m-0 max-h-60 list-none overflow-y-auto p-1 text-sm\">\n @for (item of list.filteredItems(); track trackItem($index, item)) {\n <!-- Keyboard navigation runs through the query input, so options are\n pointer targets rather than individual tab stops. -->\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 [class]=\"optionClass(item)\"\n [attr.aria-selected]=\"isSelected(item)\"\n (click)=\"toggle(item)\"\n (mouseenter)=\"list.setActiveItem(item)\"\n >\n <ng-icon xui name=\"matCheckRound\" size=\"sm\" [class]=\"isSelected(item) ? 'text-primary' : 'invisible'\" />\n @if (optionTemplate(); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"{\n $implicit: item,\n item: item,\n active: list.isActive(item),\n selected: isSelected(item),\n index: $index\n }\"\n />\n } @else {\n {{ displayText(item) }}\n }\n </li>\n } @empty {\n <li class=\"text-foreground-muted px-2 py-2\">{{ noResultsText() }}</li>\n }\n </ul>\n </ng-template>\n `,\n host: {\n '[class]': 'computedClass()'\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n viewProviders: [provideIcons({ matCheckRound })]\n})\nexport class XuiMultiSelect<T> {\n readonly class = input<ClassValue>('');\n\n readonly items = input<readonly T[]>([]);\n readonly itemText = input<(item: T) => string>((item: T) => (item == null ? '' : String(item)));\n readonly itemPredicate = input<(query: string, item: T) => boolean>();\n readonly itemDisabled = input<(item: T) => boolean>(() => false);\n\n readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n readonly placeholder = input<string>('Select…');\n readonly noResultsText = input<string>('No results.');\n\n /** The chosen items. Two-way bindable with `[(selectedItems)]`. */\n readonly selectedItems = model<T[]>([]);\n\n readonly itemAdded = output<T>();\n readonly itemRemoved = output<T>();\n\n protected readonly open = model(false);\n protected readonly query = signal('');\n\n protected readonly optionTemplate = contentChild(XuiSelectOption<T>);\n\n protected readonly list = createQueryList<T>({\n items: this.items,\n query: this.query,\n itemText: item => this.itemText()(item),\n itemDisabled: item => this.itemDisabled()(item),\n itemListPredicate: (q, items) => {\n if (!q) {\n return items as T[];\n }\n\n const predicate = this.itemPredicate();\n return items.filter(item => (predicate ? predicate(q, item) : defaultMatch(this.itemText()(item), q)));\n }\n });\n\n protected readonly computedClass = computed(() => xui('block', this.class()));\n\n protected readonly controlClass = computed(() =>\n xui(\n 'border-border bg-surface-inset flex min-h-(--control-height-md) w-full flex-wrap items-center gap-1.5 rounded-lg border px-(--control-padding-sm) py-1 text-sm',\n 'focus-within:border-focus cursor-text transition-colors',\n this.disabled() && 'cursor-not-allowed opacity-50'\n )\n );\n\n protected displayText(item: T): string {\n return this.itemText()(item);\n }\n\n protected trackItem(index: number, item: T): unknown {\n return item ?? index;\n }\n\n protected isSelected(item: T): boolean {\n return this.selectedItems().includes(item);\n }\n\n protected optionClass(item: T): string {\n return xui(\n 'flex cursor-pointer items-center gap-2 rounded px-2 py-1.5',\n this.list.isActive(item) && 'bg-primary/10',\n this.list.isDisabled(item) && 'pointer-events-none opacity-50'\n );\n }\n\n protected onQuery(event: Event): void {\n this.query.set((event.target as HTMLInputElement).value);\n this.open.set(true);\n this.list.activateFirst();\n }\n\n protected onKeydown(event: KeyboardEvent): void {\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n this.open.set(true);\n this.list.moveActiveItem(1);\n break;\n case 'ArrowUp':\n event.preventDefault();\n this.list.moveActiveItem(-1);\n break;\n case 'Enter': {\n event.preventDefault();\n const active = this.list.activeItem();\n if (active != null) {\n this.toggle(active);\n }\n break;\n }\n case 'Backspace':\n // Remove the last chip when the query is empty.\n if (this.query() === '' && this.selectedItems().length) {\n this.remove(this.selectedItems()[this.selectedItems().length - 1]);\n }\n break;\n case 'Escape':\n this.open.set(false);\n break;\n default:\n return;\n }\n }\n\n protected toggle(item: T): void {\n if (this.list.isDisabled(item)) {\n return;\n }\n\n this.isSelected(item) ? this.remove(item) : this.add(item);\n }\n\n private add(item: T): void {\n this.selectedItems.update(items => [...items, item]);\n this.query.set('');\n this.itemAdded.emit(item);\n }\n\n protected remove(item: T): void {\n this.selectedItems.update(items => items.filter(i => i !== item));\n this.itemRemoved.emit(item);\n }\n}\n","import { XuiMultiSelect } from './lib/multi-select';\n\nexport * from './lib/multi-select';\n\nexport const XuiMultiSelectImports = [XuiMultiSelect] 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-multi-select.mjs","sources":["../../../../../../libs/ui/multi-select/xui/src/lib/multi-select.ts","../../../../../../libs/ui/multi-select/xui/src/index.ts","../../../../../../libs/ui/multi-select/xui/src/xui-multi-select.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n contentChild,\n effect,\n input,\n model,\n output,\n signal,\n untracked,\n ViewEncapsulation\n} from '@angular/core';\nimport type { ControlValueAccessor } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { matCheckRound } from '@ng-icons/material-icons/round';\nimport { xui } from '@xui/core';\nimport { createXValueAccessor, provideXValueAccessor } from '@xui/core/forms';\nimport { createXActiveOption, createXItemListPredicate, createXQueryList, trackXItem } from '@xui/core/query';\nimport { XuiIcon } from '@xui/icon';\nimport { XuiPopoverImports } from '@xui/popover';\nimport { XuiSelectOption } from '@xui/select';\nimport { XuiTag } from '@xui/tag';\nimport type { ClassValue } from 'clsx';\n\n/**\n * A filterable multi-select: an inline field of removable chips plus a query\n * input opens a popover of options with a check on the chosen ones. Clicking an\n * option toggles it (the popover stays open). `[(values)]` two-way binding.\n */\n@Component({\n selector: 'xui-multi-select',\n imports: [NgTemplateOutlet, NgIcon, XuiIcon, XuiTag, XuiPopoverImports],\n template: `\n <div\n [class]=\"controlClass()\"\n [xuiPopover]=\"panel\"\n [(open)]=\"open\"\n [role]=\"'listbox'\"\n [matchTargetWidth]=\"true\"\n [minimal]=\"true\"\n [disabled]=\"isDisabled()\"\n placement=\"bottom-start\"\n >\n @for (item of values(); track trackItem($index, item)) {\n <xui-tag minimal color=\"primary\" [removable]=\"!isDisabled()\" (removed)=\"remove(item)\">{{\n displayText(item)\n }}</xui-tag>\n }\n\n <input\n #search\n type=\"text\"\n class=\"text-foreground placeholder:text-foreground-subtle min-w-24 flex-1 bg-transparent py-1 outline-none\"\n [placeholder]=\"values().length ? '' : placeholder()\"\n [value]=\"query()\"\n [disabled]=\"isDisabled()\"\n (input)=\"onQuery($event)\"\n (keydown)=\"onKeydown($event)\"\n />\n </div>\n\n <ng-template #panel>\n <ul role=\"listbox\" aria-multiselectable=\"true\" class=\"m-0 max-h-60 list-none overflow-y-auto p-1 text-sm\">\n @for (item of list.filteredItems(); track trackItem($index, item)) {\n <!-- Keyboard navigation runs through the query input, so options are\n pointer targets rather than individual tab stops. -->\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 [class]=\"optionClass(item)\"\n [attr.aria-selected]=\"isSelected(item)\"\n (click)=\"toggle(item)\"\n (mouseenter)=\"list.setActiveItem(item)\"\n >\n <ng-icon xui name=\"matCheckRound\" size=\"sm\" [class]=\"isSelected(item) ? 'text-primary' : 'invisible'\" />\n @if (optionTemplate(); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"{\n $implicit: item,\n item: item,\n active: list.isActive(item),\n selected: isSelected(item),\n index: $index\n }\"\n />\n } @else {\n {{ displayText(item) }}\n }\n </li>\n } @empty {\n <li class=\"text-foreground-muted px-2 py-2\">{{ noResultsText() }}</li>\n }\n </ul>\n </ng-template>\n `,\n host: {\n '[class]': 'computedClass()'\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n viewProviders: [provideIcons({ matCheckRound })],\n providers: [provideXValueAccessor(() => XuiMultiSelect)]\n})\nexport class XuiMultiSelect<T> implements ControlValueAccessor {\n readonly class = input<ClassValue>('');\n\n readonly items = input<readonly T[]>([]);\n readonly itemText = input<(item: T) => string>((item: T) => (item == null ? '' : String(item)));\n readonly itemPredicate = input<(query: string, item: T) => boolean>();\n readonly itemDisabled = input<(item: T) => boolean>(() => false);\n\n readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n readonly placeholder = input<string>('Select…');\n readonly noResultsText = input<string>('No results.');\n\n /** The chosen items. Two-way bindable with `[(values)]`, or via `formControl`/`ngModel`. */\n readonly values = model<T[]>([]);\n\n protected readonly cva = createXValueAccessor<T[]>({\n onWrite: values => this.values.set(values ?? []),\n disabled: this.disabled\n });\n protected readonly isDisabled = this.cva.disabled;\n\n /** Whether the popover has ever been open — so the initial closed state is not \"touched\". */\n private hasOpened = false;\n\n readonly itemAdded = output<T>();\n readonly itemRemoved = output<T>();\n\n protected readonly open = model(false);\n protected readonly query = signal('');\n\n protected readonly optionTemplate = contentChild(XuiSelectOption<T>);\n\n protected readonly list = createXQueryList<T>({\n items: this.items,\n query: this.query,\n itemText: item => this.itemText()(item),\n itemDisabled: item => this.itemDisabled()(item),\n itemListPredicate: createXItemListPredicate({\n itemText: this.itemText,\n itemPredicate: this.itemPredicate\n })\n });\n\n // Keyboard navigation over the filtered list (ArrowDown re-opens the popover;\n // Enter toggles rather than selects).\n private readonly nav = createXActiveOption<T>({\n list: this.list,\n select: item => this.toggle(item),\n close: () => this.open.set(false),\n open: () => this.open.set(true)\n });\n\n protected readonly computedClass = computed(() => xui('block', this.class()));\n\n protected readonly controlClass = computed(() =>\n xui(\n 'border-border bg-surface-inset flex min-h-(--control-height-md) w-full flex-wrap items-center gap-1.5 rounded-lg border px-(--control-padding-sm) py-1 text-sm',\n 'focus-within:border-focus cursor-text transition-colors',\n this.isDisabled() && 'cursor-not-allowed opacity-50'\n )\n );\n\n constructor() {\n // Mark the control touched once the popover closes after having been open.\n effect(() => {\n if (this.open()) {\n this.hasOpened = true;\n } else if (this.hasOpened) {\n untracked(() => this.cva.markTouched());\n }\n });\n }\n\n protected displayText(item: T): string {\n return this.itemText()(item);\n }\n\n protected readonly trackItem = trackXItem;\n\n protected isSelected(item: T): boolean {\n return this.values().includes(item);\n }\n\n protected optionClass(item: T): string {\n return xui(\n 'flex cursor-pointer items-center gap-2 rounded px-2 py-1.5',\n this.list.isActive(item) && 'bg-primary/10',\n this.list.isDisabled(item) && 'pointer-events-none opacity-50'\n );\n }\n\n protected onQuery(event: Event): void {\n this.query.set((event.target as HTMLInputElement).value);\n this.open.set(true);\n this.list.activateFirst();\n }\n\n protected onKeydown(event: KeyboardEvent): void {\n if (this.nav.onKeydown(event)) {\n return;\n }\n\n // Remove the last chip when Backspace is pressed on an empty query.\n if (event.key === 'Backspace' && this.query() === '' && this.values().length) {\n this.remove(this.values()[this.values().length - 1]);\n }\n }\n\n protected toggle(item: T): void {\n if (this.list.isDisabled(item)) {\n return;\n }\n\n this.isSelected(item) ? this.remove(item) : this.add(item);\n }\n\n private add(item: T): void {\n this.values.update(items => [...items, item]);\n this.cva.notifyChange(this.values());\n this.query.set('');\n this.itemAdded.emit(item);\n }\n\n protected remove(item: T): void {\n if (this.isDisabled()) {\n return;\n }\n\n this.values.update(items => items.filter(i => i !== item));\n this.cva.notifyChange(this.values());\n this.itemRemoved.emit(item);\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 { XuiMultiSelect } from './lib/multi-select';\n\nexport * from './lib/multi-select';\n\nexport const XuiMultiSelectImports = [XuiMultiSelect] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;;AA4BA;;;;AAIG;MA4EU,cAAc,CAAA;IAChB,KAAK,GAAG,KAAK,CAAa,EAAE;8EAAC;IAE7B,KAAK,GAAG,KAAK,CAAe,EAAE;8EAAC;IAC/B,QAAQ,GAAG,KAAK,CAAsB,CAAC,IAAO,MAAM,IAAI,IAAI,IAAI,GAAG,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;iFAAC;AACtF,IAAA,aAAa,GAAG,KAAK;iGAAuC;AAC5D,IAAA,YAAY,GAAG,KAAK,CAAuB,MAAM,KAAK;qFAAC;IAEvD,QAAQ,GAAG,KAAK,CAAwB,KAAK,gFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;IAC/E,WAAW,GAAG,KAAK,CAAS,SAAS;oFAAC;IACtC,aAAa,GAAG,KAAK,CAAS,aAAa;sFAAC;;IAG5C,MAAM,GAAG,KAAK,CAAM,EAAE;+EAAC;IAEb,GAAG,GAAG,oBAAoB,CAAM;AACjD,QAAA,OAAO,EAAE,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,IAAI,EAAE,CAAC;QAChD,QAAQ,EAAE,IAAI,CAAC;AAChB,KAAA,CAAC;AACiB,IAAA,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ;;IAGzC,SAAS,GAAG,KAAK;IAEhB,SAAS,GAAG,MAAM,EAAK;IACvB,WAAW,GAAG,MAAM,EAAK;IAEf,IAAI,GAAG,KAAK,CAAC,KAAK;6EAAC;IACnB,KAAK,GAAG,MAAM,CAAC,EAAE;8EAAC;AAElB,IAAA,cAAc,GAAG,YAAY,EAAC,eAAkB;uFAAC;IAEjD,IAAI,GAAG,gBAAgB,CAAI;QAC5C,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,QAAQ,EAAE,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC;QACvC,YAAY,EAAE,IAAI,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC;QAC/C,iBAAiB,EAAE,wBAAwB,CAAC;YAC1C,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,aAAa,EAAE,IAAI,CAAC;SACrB;AACF,KAAA,CAAC;;;IAIe,GAAG,GAAG,mBAAmB,CAAI;QAC5C,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,MAAM,EAAE,IAAI,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;QACjC,KAAK,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC;QACjC,IAAI,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI;AAC/B,KAAA,CAAC;AAEiB,IAAA,aAAa,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;sFAAC;AAE1D,IAAA,YAAY,GAAG,QAAQ,CAAC,MACzC,GAAG,CACD,gKAAgK,EAChK,yDAAyD,EACzD,IAAI,CAAC,UAAU,EAAE,IAAI,+BAA+B,CACrD;qFACF;AAED,IAAA,WAAA,GAAA;;QAEE,MAAM,CAAC,MAAK;AACV,YAAA,IAAI,IAAI,CAAC,IAAI,EAAE,EAAE;AACf,gBAAA,IAAI,CAAC,SAAS,GAAG,IAAI;YACvB;AAAO,iBAAA,IAAI,IAAI,CAAC,SAAS,EAAE;gBACzB,SAAS,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;YACzC;AACF,QAAA,CAAC,CAAC;IACJ;AAEU,IAAA,WAAW,CAAC,IAAO,EAAA;AAC3B,QAAA,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC;IAC9B;IAEmB,SAAS,GAAG,UAAU;AAE/B,IAAA,UAAU,CAAC,IAAO,EAAA;QAC1B,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IACrC;AAEU,IAAA,WAAW,CAAC,IAAO,EAAA;QAC3B,OAAO,GAAG,CACR,4DAA4D,EAC5D,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,eAAe,EAC3C,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,gCAAgC,CAC/D;IACH;AAEU,IAAA,OAAO,CAAC,KAAY,EAAA;QAC5B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAE,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC;AACxD,QAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC;AACnB,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;IAC3B;AAEU,IAAA,SAAS,CAAC,KAAoB,EAAA;QACtC,IAAI,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE;YAC7B;QACF;;QAGA,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE;AAC5E,YAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACtD;IACF;AAEU,IAAA,MAAM,CAAC,IAAO,EAAA;QACtB,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE;YAC9B;QACF;QAEA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC;IAC5D;AAEQ,IAAA,GAAG,CAAC,IAAO,EAAA;AACjB,QAAA,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,GAAG,KAAK,EAAE,IAAI,CAAC,CAAC;QAC7C,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;AACpC,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC;AAClB,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;IAC3B;AAEU,IAAA,MAAM,CAAC,IAAO,EAAA;AACtB,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE;YACrB;QACF;QAEA,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC;QAC1D,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;AACpC,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;IAC7B;AAES,IAAA,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU;AAChC,IAAA,gBAAgB,GAAG,IAAI,CAAC,GAAG,CAAC,gBAAgB;AAC5C,IAAA,iBAAiB,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB;AAC9C,IAAA,gBAAgB,GAAG,IAAI,CAAC,GAAG,CAAC,gBAAgB;0HAxI1C,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAd,uBAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,cAAA,EAAA,SAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,IAAA,EAAA,YAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,iBAAA,EAAA,EAAA,EAAA,SAAA,EAFd,CAAC,qBAAqB,EAAC,MAAM,cAAc,EAAC,CAAC,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,gBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,GAgCP,eAAkB,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAtGzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAhES,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,MAAM,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,KAAA,EAAA,MAAA,EAAA,aAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,OAAO,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAAA,OAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,MAAM,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,SAAA,EAAA,OAAA,EAAA,OAAA,EAAA,MAAA,EAAA,aAAA,EAAA,WAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,SAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,YAAA,EAAA,MAAA,EAAA,WAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,EAAA,QAAA,EAAA,QAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAsEpC,CAAC,YAAY,CAAC,EAAE,aAAa,EAAE,CAAC,CAAC,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAGrC,cAAc,EAAA,UAAA,EAAA,CAAA;kBA3E1B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,kBAAkB;oBAC5B,OAAO,EAAE,CAAC,gBAAgB,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,iBAAiB,CAAC;AACvE,oBAAA,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DT,EAAA,CAAA;AACD,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE;AACZ,qBAAA;oBACD,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,aAAa,EAAE,CAAC,YAAY,CAAC,EAAE,aAAa,EAAE,CAAC,CAAC;oBAChD,SAAS,EAAE,CAAC,qBAAqB,EAAC,MAAK,cAAe,EAAC;AACxD,iBAAA;ixCA+BkD,eAAkB,CAAA,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;ACtI9D,MAAM,qBAAqB,GAAG,CAAC,cAAc;;ACJpD;;AAEG;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xui/multi-select",
|
|
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",
|
|
@@ -39,13 +39,14 @@
|
|
|
39
39
|
"@angular/cdk": "22",
|
|
40
40
|
"@angular/common": "22",
|
|
41
41
|
"@angular/core": "22",
|
|
42
|
+
"@angular/forms": "22",
|
|
42
43
|
"@ng-icons/core": "34",
|
|
43
44
|
"@ng-icons/material-icons": "34",
|
|
44
|
-
"@xui/core": "2.0.0-alpha.
|
|
45
|
-
"@xui/icon": "2.0.0-alpha.
|
|
46
|
-
"@xui/popover": "2.0.0-alpha.
|
|
47
|
-
"@xui/select": "2.0.0-alpha.
|
|
48
|
-
"@xui/tag": "2.0.0-alpha.
|
|
45
|
+
"@xui/core": "2.0.0-alpha.12",
|
|
46
|
+
"@xui/icon": "2.0.0-alpha.12",
|
|
47
|
+
"@xui/popover": "2.0.0-alpha.12",
|
|
48
|
+
"@xui/select": "2.0.0-alpha.12",
|
|
49
|
+
"@xui/tag": "2.0.0-alpha.12",
|
|
49
50
|
"clsx": "^2.1.1"
|
|
50
51
|
},
|
|
51
52
|
"publishConfig": {
|
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
import * as _xui_core_query from '@xui/core/query';
|
|
2
|
+
import * as _xui_core_forms from '@xui/core/forms';
|
|
2
3
|
import * as _angular_core from '@angular/core';
|
|
3
4
|
import { BooleanInput } from '@angular/cdk/coercion';
|
|
5
|
+
import { ControlValueAccessor } from '@angular/forms';
|
|
4
6
|
import { XuiSelectOption } from '@xui/select';
|
|
5
7
|
import { ClassValue } from 'clsx';
|
|
6
8
|
|
|
7
9
|
/**
|
|
8
10
|
* A filterable multi-select: an inline field of removable chips plus a query
|
|
9
11
|
* input opens a popover of options with a check on the chosen ones. Clicking an
|
|
10
|
-
* option toggles it (the popover stays open). `[(
|
|
12
|
+
* option toggles it (the popover stays open). `[(values)]` two-way binding.
|
|
11
13
|
*/
|
|
12
|
-
declare class XuiMultiSelect<T> {
|
|
14
|
+
declare class XuiMultiSelect<T> implements ControlValueAccessor {
|
|
13
15
|
readonly class: _angular_core.InputSignal<ClassValue>;
|
|
14
16
|
readonly items: _angular_core.InputSignal<readonly T[]>;
|
|
15
17
|
readonly itemText: _angular_core.InputSignal<(item: T) => string>;
|
|
@@ -18,18 +20,24 @@ declare class XuiMultiSelect<T> {
|
|
|
18
20
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
19
21
|
readonly placeholder: _angular_core.InputSignal<string>;
|
|
20
22
|
readonly noResultsText: _angular_core.InputSignal<string>;
|
|
21
|
-
/** The chosen items. Two-way bindable with `[(
|
|
22
|
-
readonly
|
|
23
|
+
/** The chosen items. Two-way bindable with `[(values)]`, or via `formControl`/`ngModel`. */
|
|
24
|
+
readonly values: _angular_core.ModelSignal<T[]>;
|
|
25
|
+
protected readonly cva: _xui_core_forms.XValueAccessor<T[]>;
|
|
26
|
+
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
27
|
+
/** Whether the popover has ever been open — so the initial closed state is not "touched". */
|
|
28
|
+
private hasOpened;
|
|
23
29
|
readonly itemAdded: _angular_core.OutputEmitterRef<T>;
|
|
24
30
|
readonly itemRemoved: _angular_core.OutputEmitterRef<T>;
|
|
25
31
|
protected readonly open: _angular_core.ModelSignal<boolean>;
|
|
26
32
|
protected readonly query: _angular_core.WritableSignal<string>;
|
|
27
33
|
protected readonly optionTemplate: _angular_core.Signal<XuiSelectOption<any> | undefined>;
|
|
28
|
-
protected readonly list: _xui_core_query.
|
|
34
|
+
protected readonly list: _xui_core_query.XQueryList<T>;
|
|
35
|
+
private readonly nav;
|
|
29
36
|
protected readonly computedClass: _angular_core.Signal<string>;
|
|
30
37
|
protected readonly controlClass: _angular_core.Signal<string>;
|
|
38
|
+
constructor();
|
|
31
39
|
protected displayText(item: T): string;
|
|
32
|
-
protected trackItem(index: number, item:
|
|
40
|
+
protected readonly trackItem: (index: number, item: unknown) => unknown;
|
|
33
41
|
protected isSelected(item: T): boolean;
|
|
34
42
|
protected optionClass(item: T): string;
|
|
35
43
|
protected onQuery(event: Event): void;
|
|
@@ -37,8 +45,12 @@ declare class XuiMultiSelect<T> {
|
|
|
37
45
|
protected toggle(item: T): void;
|
|
38
46
|
private add;
|
|
39
47
|
protected remove(item: T): void;
|
|
48
|
+
readonly writeValue: (value: T[]) => void;
|
|
49
|
+
readonly registerOnChange: (fn: _xui_core_forms.XChangeFn<T[]>) => void;
|
|
50
|
+
readonly registerOnTouched: (fn: _xui_core_forms.XTouchFn) => void;
|
|
51
|
+
readonly setDisabledState: (isDisabled: boolean) => void;
|
|
40
52
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<XuiMultiSelect<any>, never>;
|
|
41
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<XuiMultiSelect<any>, "xui-multi-select", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "itemText": { "alias": "itemText"; "required": false; "isSignal": true; }; "itemPredicate": { "alias": "itemPredicate"; "required": false; "isSignal": true; }; "itemDisabled": { "alias": "itemDisabled"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "noResultsText": { "alias": "noResultsText"; "required": false; "isSignal": true; }; "
|
|
53
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<XuiMultiSelect<any>, "xui-multi-select", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "itemText": { "alias": "itemText"; "required": false; "isSignal": true; }; "itemPredicate": { "alias": "itemPredicate"; "required": false; "isSignal": true; }; "itemDisabled": { "alias": "itemDisabled"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "noResultsText": { "alias": "noResultsText"; "required": false; "isSignal": true; }; "values": { "alias": "values"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "values": "valuesChange"; "itemAdded": "itemAdded"; "itemRemoved": "itemRemoved"; "open": "openChange"; }, ["optionTemplate"], never, true, never>;
|
|
42
54
|
}
|
|
43
55
|
|
|
44
56
|
declare const XuiMultiSelectImports: readonly [typeof XuiMultiSelect];
|