@xui/section 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-section.mjs +30 -22
- package/fesm2022/xui-section.mjs.map +1 -1
- package/package.json +4 -4
- package/types/xui-section.d.ts +21 -6
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).
|
package/fesm2022/xui-section.mjs
CHANGED
|
@@ -1,15 +1,20 @@
|
|
|
1
1
|
import { NgTemplateOutlet } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { input, booleanAttribute, model, computed, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { input, booleanAttribute, model, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
4
4
|
import { provideIcons, NgIcon } from '@ng-icons/core';
|
|
5
5
|
import { matExpandMoreRound } from '@ng-icons/material-icons/round';
|
|
6
6
|
import * as i1 from '@xui/collapse';
|
|
7
7
|
import { XuiCollapseImports } from '@xui/collapse';
|
|
8
|
-
import { xui } from '@xui/core';
|
|
8
|
+
import { createXConfigToken, xui } from '@xui/core';
|
|
9
9
|
import { uniqueId } from '@xui/core/a11y';
|
|
10
10
|
import { XuiIcon } from '@xui/icon';
|
|
11
11
|
import { cva } from 'class-variance-authority';
|
|
12
12
|
|
|
13
|
+
const [injectXuiSectionConfig, provideXuiSectionConfig] = createXConfigToken('XuiSectionConfig', {
|
|
14
|
+
elevation: 0,
|
|
15
|
+
compact: false
|
|
16
|
+
});
|
|
17
|
+
|
|
13
18
|
const sectionVariants = cva('bg-surface-raised border-border block overflow-hidden rounded-lg border', {
|
|
14
19
|
variants: {
|
|
15
20
|
elevation: {
|
|
@@ -33,7 +38,7 @@ const sectionVariants = cva('bg-surface-raised border-border block overflow-hidd
|
|
|
33
38
|
*
|
|
34
39
|
* When `collapsible`, the header becomes a button wired to the panel with
|
|
35
40
|
* `aria-expanded`/`aria-controls`, so the disclosure is operable by keyboard and
|
|
36
|
-
* announced correctly. `
|
|
41
|
+
* announced correctly. `open` is a model, so it works both uncontrolled and
|
|
37
42
|
* bound.
|
|
38
43
|
*
|
|
39
44
|
* The projected body goes through a single `ng-template` rendered into one of
|
|
@@ -42,10 +47,11 @@ const sectionVariants = cva('bg-surface-raised border-border block overflow-hidd
|
|
|
42
47
|
*/
|
|
43
48
|
class XuiSection {
|
|
44
49
|
panelId = uniqueId('xui-section-panel');
|
|
50
|
+
config = injectXuiSectionConfig();
|
|
45
51
|
/** The user-defined classes. Merged last so they win over the variant classes. */
|
|
46
52
|
class = input('', /* @ts-ignore */
|
|
47
53
|
...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
48
|
-
elevation = input(
|
|
54
|
+
elevation = input(this.config.elevation, /* @ts-ignore */
|
|
49
55
|
...(ngDevMode ? [{ debugName: "elevation" }] : /* istanbul ignore next */ []));
|
|
50
56
|
/** The header only renders when there is a title. */
|
|
51
57
|
title = input(null, /* @ts-ignore */
|
|
@@ -54,32 +60,32 @@ class XuiSection {
|
|
|
54
60
|
...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
|
|
55
61
|
collapsible = input(false, { ...(ngDevMode ? { debugName: "collapsible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
56
62
|
/** Reduce the header padding. */
|
|
57
|
-
compact = input(
|
|
63
|
+
compact = input(this.config.compact, { ...(ngDevMode ? { debugName: "compact" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
58
64
|
/** Open state of a collapsible section. Works bound or unbound. */
|
|
59
|
-
|
|
60
|
-
...(ngDevMode ? [{ debugName: "
|
|
65
|
+
open = model(true, /* @ts-ignore */
|
|
66
|
+
...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
|
|
61
67
|
computedClass = computed(() => xui(sectionVariants({ elevation: this.elevation() }), this.class()), /* @ts-ignore */
|
|
62
68
|
...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
|
|
63
69
|
computedHeaderClass = computed(() => xui('border-border flex items-center gap-2 border-b', this.compact() ? 'px-3 py-2' : 'px-4 py-3'), /* @ts-ignore */
|
|
64
70
|
...(ngDevMode ? [{ debugName: "computedHeaderClass" }] : /* istanbul ignore next */ []));
|
|
65
71
|
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
66
|
-
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: XuiSection, isStandalone: true, selector: "xui-section", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, elevation: { classPropertyName: "elevation", publicName: "elevation", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null },
|
|
72
|
+
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: XuiSection, isStandalone: true, selector: "xui-section", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, elevation: { classPropertyName: "elevation", publicName: "elevation", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { properties: { "class": "computedClass()" } }, ngImport: i0, template: `
|
|
67
73
|
@if (title()) {
|
|
68
74
|
<div [class]="computedHeaderClass()">
|
|
69
75
|
@if (collapsible()) {
|
|
70
76
|
<button
|
|
71
77
|
type="button"
|
|
72
|
-
class="-m-1 flex min-w-0 flex-1 items-center gap-2 rounded p-1 text-start
|
|
73
|
-
[attr.aria-expanded]="
|
|
78
|
+
class="-m-1 flex min-w-0 flex-1 items-center gap-2 rounded p-1 text-start"
|
|
79
|
+
[attr.aria-expanded]="open()"
|
|
74
80
|
[attr.aria-controls]="panelId"
|
|
75
|
-
(click)="
|
|
81
|
+
(click)="open.set(!open())"
|
|
76
82
|
>
|
|
77
83
|
<ng-icon
|
|
78
84
|
xui
|
|
79
85
|
size="sm"
|
|
80
86
|
name="matExpandMoreRound"
|
|
81
87
|
class="text-foreground-muted shrink-0 transition-transform duration-200"
|
|
82
|
-
[class.-rotate-90]="!
|
|
88
|
+
[class.-rotate-90]="!open()"
|
|
83
89
|
/>
|
|
84
90
|
<ng-container *ngTemplateOutlet="titleBlock" />
|
|
85
91
|
</button>
|
|
@@ -108,13 +114,13 @@ class XuiSection {
|
|
|
108
114
|
<ng-template #body><ng-content /></ng-template>
|
|
109
115
|
|
|
110
116
|
@if (collapsible()) {
|
|
111
|
-
<xui-collapse [id]="panelId" [
|
|
117
|
+
<xui-collapse [id]="panelId" [open]="open()">
|
|
112
118
|
<ng-container *ngTemplateOutlet="body" />
|
|
113
119
|
</xui-collapse>
|
|
114
120
|
} @else {
|
|
115
121
|
<ng-container *ngTemplateOutlet="body" />
|
|
116
122
|
}
|
|
117
|
-
`, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: XuiIcon, selector: "ng-icon[xui]", inputs: ["class", "size", "color", "
|
|
123
|
+
`, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: XuiIcon, selector: "ng-icon[xui]", inputs: ["class", "size", "color", "label"], exportAs: ["xuiIcon"] }, { kind: "component", type: i1.XuiCollapse, selector: "xui-collapse", inputs: ["class", "open", "keepChildrenMounted", "duration"], outputs: ["openChange", "transitionEnd"] }], viewProviders: [provideIcons({ matExpandMoreRound })], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
118
124
|
}
|
|
119
125
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiSection, decorators: [{
|
|
120
126
|
type: Component,
|
|
@@ -122,6 +128,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
122
128
|
selector: 'xui-section',
|
|
123
129
|
imports: [NgIcon, NgTemplateOutlet, XuiIcon, XuiCollapseImports],
|
|
124
130
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
131
|
+
encapsulation: ViewEncapsulation.None,
|
|
125
132
|
viewProviders: [provideIcons({ matExpandMoreRound })],
|
|
126
133
|
template: `
|
|
127
134
|
@if (title()) {
|
|
@@ -129,17 +136,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
129
136
|
@if (collapsible()) {
|
|
130
137
|
<button
|
|
131
138
|
type="button"
|
|
132
|
-
class="-m-1 flex min-w-0 flex-1 items-center gap-2 rounded p-1 text-start
|
|
133
|
-
[attr.aria-expanded]="
|
|
139
|
+
class="-m-1 flex min-w-0 flex-1 items-center gap-2 rounded p-1 text-start"
|
|
140
|
+
[attr.aria-expanded]="open()"
|
|
134
141
|
[attr.aria-controls]="panelId"
|
|
135
|
-
(click)="
|
|
142
|
+
(click)="open.set(!open())"
|
|
136
143
|
>
|
|
137
144
|
<ng-icon
|
|
138
145
|
xui
|
|
139
146
|
size="sm"
|
|
140
147
|
name="matExpandMoreRound"
|
|
141
148
|
class="text-foreground-muted shrink-0 transition-transform duration-200"
|
|
142
|
-
[class.-rotate-90]="!
|
|
149
|
+
[class.-rotate-90]="!open()"
|
|
143
150
|
/>
|
|
144
151
|
<ng-container *ngTemplateOutlet="titleBlock" />
|
|
145
152
|
</button>
|
|
@@ -168,7 +175,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
168
175
|
<ng-template #body><ng-content /></ng-template>
|
|
169
176
|
|
|
170
177
|
@if (collapsible()) {
|
|
171
|
-
<xui-collapse [id]="panelId" [
|
|
178
|
+
<xui-collapse [id]="panelId" [open]="open()">
|
|
172
179
|
<ng-container *ngTemplateOutlet="body" />
|
|
173
180
|
</xui-collapse>
|
|
174
181
|
} @else {
|
|
@@ -179,7 +186,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
179
186
|
'[class]': 'computedClass()'
|
|
180
187
|
}
|
|
181
188
|
}]
|
|
182
|
-
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], elevation: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevation", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }],
|
|
189
|
+
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], elevation: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevation", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }] } });
|
|
183
190
|
/**
|
|
184
191
|
* A padded content panel inside a section.
|
|
185
192
|
*
|
|
@@ -195,13 +202,14 @@ class XuiSectionCard {
|
|
|
195
202
|
computedClass = computed(() => xui('border-border block border-b last:border-b-0', this.padded() && 'p-4', this.class()), /* @ts-ignore */
|
|
196
203
|
...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
|
|
197
204
|
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiSectionCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
198
|
-
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: XuiSectionCard, isStandalone: true, selector: "xui-section-card", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, padded: { classPropertyName: "padded", publicName: "padded", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
205
|
+
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: XuiSectionCard, isStandalone: true, selector: "xui-section-card", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, padded: { classPropertyName: "padded", publicName: "padded", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
199
206
|
}
|
|
200
207
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiSectionCard, decorators: [{
|
|
201
208
|
type: Component,
|
|
202
209
|
args: [{
|
|
203
210
|
selector: 'xui-section-card',
|
|
204
211
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
212
|
+
encapsulation: ViewEncapsulation.None,
|
|
205
213
|
template: '<ng-content />',
|
|
206
214
|
host: {
|
|
207
215
|
'[class]': 'computedClass()'
|
|
@@ -215,5 +223,5 @@ const XuiSectionImports = [XuiSection, XuiSectionCard];
|
|
|
215
223
|
* Generated bundle index. Do not edit.
|
|
216
224
|
*/
|
|
217
225
|
|
|
218
|
-
export { XuiSection, XuiSectionCard, XuiSectionImports, sectionVariants };
|
|
226
|
+
export { XuiSection, XuiSectionCard, XuiSectionImports, injectXuiSectionConfig, provideXuiSectionConfig, sectionVariants };
|
|
219
227
|
//# sourceMappingURL=xui-section.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"xui-section.mjs","sources":["../../../../../../libs/ui/section/xui/src/lib/section.ts","../../../../../../libs/ui/section/xui/src/index.ts","../../../../../../libs/ui/section/xui/src/xui-section.ts"],"sourcesContent":["import type { BooleanInput } from '@angular/cdk/coercion';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { booleanAttribute, ChangeDetectionStrategy, Component, computed, input, model } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { matExpandMoreRound } from '@ng-icons/material-icons/round';\nimport { XuiCollapseImports } from '@xui/collapse';\nimport { xui } from '@xui/core';\nimport { uniqueId } from '@xui/core/a11y';\nimport { XuiIcon } from '@xui/icon';\nimport { cva, VariantProps } from 'class-variance-authority';\nimport type { ClassValue } from 'clsx';\n\nexport const sectionVariants = cva('bg-surface-raised border-border block overflow-hidden rounded-lg border', {\n variants: {\n elevation: {\n 0: 'shadow-elevation-0',\n 1: 'shadow-elevation-1'\n }\n },\n defaultVariants: {\n elevation: 0\n }\n});\n\nexport type SectionVariants = VariantProps<typeof sectionVariants>;\n\n/**\n * A titled container for a group of related content.\n *\n * ```html\n * <xui-section title=\"Details\" subtitle=\"Everything about this record\" collapsible>\n * <button xuiButton right-element size=\"sm\">Edit</button>\n * <div xuiSectionCard>…</div>\n * </xui-section>\n * ```\n *\n * When `collapsible`, the header becomes a button wired to the panel with\n * `aria-expanded`/`aria-controls`, so the disclosure is operable by keyboard and\n * announced correctly. `isOpen` is a model, so it works both uncontrolled and\n * bound.\n *\n * The projected body goes through a single `ng-template` rendered into one of\n * two places. Putting an `ng-content` in each branch instead would not work:\n * projection slots are static, so only the first would ever receive content.\n */\n@Component({\n selector: 'xui-section',\n imports: [NgIcon, NgTemplateOutlet, XuiIcon, XuiCollapseImports],\n changeDetection: ChangeDetectionStrategy.OnPush,\n viewProviders: [provideIcons({ matExpandMoreRound })],\n template: `\n @if (title()) {\n <div [class]=\"computedHeaderClass()\">\n @if (collapsible()) {\n <button\n type=\"button\"\n class=\"-m-1 flex min-w-0 flex-1 items-center gap-2 rounded p-1 text-start focus-visible:outline-5 focus-visible:outline-offset-2\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"panelId\"\n (click)=\"isOpen.set(!isOpen())\"\n >\n <ng-icon\n xui\n size=\"sm\"\n name=\"matExpandMoreRound\"\n class=\"text-foreground-muted shrink-0 transition-transform duration-200\"\n [class.-rotate-90]=\"!isOpen()\"\n />\n <ng-container *ngTemplateOutlet=\"titleBlock\" />\n </button>\n } @else {\n <div class=\"flex min-w-0 flex-1 items-center gap-2\">\n <ng-container *ngTemplateOutlet=\"titleBlock\" />\n </div>\n }\n\n <div class=\"flex shrink-0 items-center gap-2 empty:hidden\">\n <ng-content select=\"[right-element]\" />\n </div>\n </div>\n }\n\n <ng-template #titleBlock>\n <span class=\"flex min-w-0 flex-col\">\n <span class=\"text-foreground truncate font-semibold\">{{ title() }}</span>\n @if (subtitle()) {\n <span class=\"text-foreground-muted truncate text-sm\">{{ subtitle() }}</span>\n }\n </span>\n </ng-template>\n\n <!-- Body: rendered through one template, see the note on the class. -->\n <ng-template #body><ng-content /></ng-template>\n\n @if (collapsible()) {\n <xui-collapse [id]=\"panelId\" [isOpen]=\"isOpen()\">\n <ng-container *ngTemplateOutlet=\"body\" />\n </xui-collapse>\n } @else {\n <ng-container *ngTemplateOutlet=\"body\" />\n }\n `,\n host: {\n '[class]': 'computedClass()'\n }\n})\nexport class XuiSection {\n protected readonly panelId = uniqueId('xui-section-panel');\n\n /** The user-defined classes. Merged last so they win over the variant classes. */\n readonly class = input<ClassValue>('');\n readonly elevation = input<SectionVariants['elevation']>(0);\n\n /** The header only renders when there is a title. */\n readonly title = input<string | null>(null);\n readonly subtitle = input<string | null>(null);\n\n readonly collapsible = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n /** Reduce the header padding. */\n readonly compact = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n /** Open state of a collapsible section. Works bound or unbound. */\n readonly isOpen = model(true);\n\n protected readonly computedClass = computed(() =>\n xui(sectionVariants({ elevation: this.elevation() }), this.class())\n );\n\n protected readonly computedHeaderClass = computed(() =>\n xui('border-border flex items-center gap-2 border-b', this.compact() ? 'px-3 py-2' : 'px-4 py-3')\n );\n}\n\n/**\n * A padded content panel inside a section.\n *\n * A section can hold several, separated by hairlines — which is how a section\n * splits into rows without each one needing its own frame.\n */\n@Component({\n selector: 'xui-section-card',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: '<ng-content />',\n host: {\n '[class]': 'computedClass()'\n }\n})\nexport class XuiSectionCard {\n /** The user-defined classes. Merged last so they win over the base classes. */\n readonly class = input<ClassValue>('');\n\n /** Turn off the internal padding for content that supplies its own. */\n readonly padded = input<boolean, BooleanInput>(true, { transform: booleanAttribute });\n\n protected readonly computedClass = computed(() =>\n xui('border-border block border-b last:border-b-0', this.padded() && 'p-4', this.class())\n );\n}\n","import { XuiSection, XuiSectionCard } from './lib/section';\n\nexport * from './lib/section';\n\nexport const XuiSectionImports = [XuiSection, XuiSectionCard] 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-section.mjs","sources":["../../../../../../libs/ui/section/xui/src/lib/section.token.ts","../../../../../../libs/ui/section/xui/src/lib/section.ts","../../../../../../libs/ui/section/xui/src/index.ts","../../../../../../libs/ui/section/xui/src/xui-section.ts"],"sourcesContent":["import { createXConfigToken } from '@xui/core';\nimport type { XuiSectionVariants } from './section';\n\n/**\n * Application-wide defaults for XuiSection.\n *\n * Provide it once at the app root to re-skin every section without touching\n * call sites; individual inputs still override the configured value.\n */\nexport interface XuiSectionConfig {\n elevation: XuiSectionVariants['elevation'];\n /** Reduce the header padding. */\n compact: boolean;\n}\n\nexport const [injectXuiSectionConfig, provideXuiSectionConfig] = createXConfigToken<XuiSectionConfig>(\n 'XuiSectionConfig',\n {\n elevation: 0,\n compact: false\n }\n);\n","import type { BooleanInput } from '@angular/cdk/coercion';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n input,\n model,\n ViewEncapsulation\n} from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { matExpandMoreRound } from '@ng-icons/material-icons/round';\nimport { XuiCollapseImports } from '@xui/collapse';\nimport { xui } from '@xui/core';\nimport { uniqueId } from '@xui/core/a11y';\nimport { XuiIcon } from '@xui/icon';\nimport { cva, VariantProps } from 'class-variance-authority';\nimport type { ClassValue } from 'clsx';\nimport { injectXuiSectionConfig } from './section.token';\n\nexport const sectionVariants = cva('bg-surface-raised border-border block overflow-hidden rounded-lg border', {\n variants: {\n elevation: {\n 0: 'shadow-elevation-0',\n 1: 'shadow-elevation-1'\n }\n },\n defaultVariants: {\n elevation: 0\n }\n});\n\nexport type XuiSectionVariants = VariantProps<typeof sectionVariants>;\n\n/**\n * A titled container for a group of related content.\n *\n * ```html\n * <xui-section title=\"Details\" subtitle=\"Everything about this record\" collapsible>\n * <button xuiButton right-element size=\"sm\">Edit</button>\n * <div xuiSectionCard>…</div>\n * </xui-section>\n * ```\n *\n * When `collapsible`, the header becomes a button wired to the panel with\n * `aria-expanded`/`aria-controls`, so the disclosure is operable by keyboard and\n * announced correctly. `open` is a model, so it works both uncontrolled and\n * bound.\n *\n * The projected body goes through a single `ng-template` rendered into one of\n * two places. Putting an `ng-content` in each branch instead would not work:\n * projection slots are static, so only the first would ever receive content.\n */\n@Component({\n selector: 'xui-section',\n imports: [NgIcon, NgTemplateOutlet, XuiIcon, XuiCollapseImports],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n viewProviders: [provideIcons({ matExpandMoreRound })],\n template: `\n @if (title()) {\n <div [class]=\"computedHeaderClass()\">\n @if (collapsible()) {\n <button\n type=\"button\"\n class=\"-m-1 flex min-w-0 flex-1 items-center gap-2 rounded p-1 text-start\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-controls]=\"panelId\"\n (click)=\"open.set(!open())\"\n >\n <ng-icon\n xui\n size=\"sm\"\n name=\"matExpandMoreRound\"\n class=\"text-foreground-muted shrink-0 transition-transform duration-200\"\n [class.-rotate-90]=\"!open()\"\n />\n <ng-container *ngTemplateOutlet=\"titleBlock\" />\n </button>\n } @else {\n <div class=\"flex min-w-0 flex-1 items-center gap-2\">\n <ng-container *ngTemplateOutlet=\"titleBlock\" />\n </div>\n }\n\n <div class=\"flex shrink-0 items-center gap-2 empty:hidden\">\n <ng-content select=\"[right-element]\" />\n </div>\n </div>\n }\n\n <ng-template #titleBlock>\n <span class=\"flex min-w-0 flex-col\">\n <span class=\"text-foreground truncate font-semibold\">{{ title() }}</span>\n @if (subtitle()) {\n <span class=\"text-foreground-muted truncate text-sm\">{{ subtitle() }}</span>\n }\n </span>\n </ng-template>\n\n <!-- Body: rendered through one template, see the note on the class. -->\n <ng-template #body><ng-content /></ng-template>\n\n @if (collapsible()) {\n <xui-collapse [id]=\"panelId\" [open]=\"open()\">\n <ng-container *ngTemplateOutlet=\"body\" />\n </xui-collapse>\n } @else {\n <ng-container *ngTemplateOutlet=\"body\" />\n }\n `,\n host: {\n '[class]': 'computedClass()'\n }\n})\nexport class XuiSection {\n protected readonly panelId = uniqueId('xui-section-panel');\n private readonly config = injectXuiSectionConfig();\n\n /** The user-defined classes. Merged last so they win over the variant classes. */\n readonly class = input<ClassValue>('');\n readonly elevation = input<XuiSectionVariants['elevation']>(this.config.elevation);\n\n /** The header only renders when there is a title. */\n readonly title = input<string | null>(null);\n readonly subtitle = input<string | null>(null);\n\n readonly collapsible = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n /** Reduce the header padding. */\n readonly compact = input<boolean, BooleanInput>(this.config.compact, { transform: booleanAttribute });\n\n /** Open state of a collapsible section. Works bound or unbound. */\n readonly open = model(true);\n\n protected readonly computedClass = computed(() =>\n xui(sectionVariants({ elevation: this.elevation() }), this.class())\n );\n\n protected readonly computedHeaderClass = computed(() =>\n xui('border-border flex items-center gap-2 border-b', this.compact() ? 'px-3 py-2' : 'px-4 py-3')\n );\n}\n\n/**\n * A padded content panel inside a section.\n *\n * A section can hold several, separated by hairlines — which is how a section\n * splits into rows without each one needing its own frame.\n */\n@Component({\n selector: 'xui-section-card',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n template: '<ng-content />',\n host: {\n '[class]': 'computedClass()'\n }\n})\nexport class XuiSectionCard {\n /** The user-defined classes. Merged last so they win over the base classes. */\n readonly class = input<ClassValue>('');\n\n /** Turn off the internal padding for content that supplies its own. */\n readonly padded = input<boolean, BooleanInput>(true, { transform: booleanAttribute });\n\n protected readonly computedClass = computed(() =>\n xui('border-border block border-b last:border-b-0', this.padded() && 'p-4', this.class())\n );\n}\n","import { XuiSection, XuiSectionCard } from './lib/section';\n\nexport * from './lib/section';\nexport * from './lib/section.token';\n\nexport const XuiSectionImports = [XuiSection, XuiSectionCard] 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/section",
|
|
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",
|
|
@@ -41,9 +41,9 @@
|
|
|
41
41
|
"@angular/core": "22",
|
|
42
42
|
"@ng-icons/core": "^34.0.0",
|
|
43
43
|
"@ng-icons/material-icons": "^34.0.0",
|
|
44
|
-
"@xui/collapse": "2.0.0-alpha.
|
|
45
|
-
"@xui/core": "2.0.0-alpha.
|
|
46
|
-
"@xui/icon": "2.0.0-alpha.
|
|
44
|
+
"@xui/collapse": "2.0.0-alpha.12",
|
|
45
|
+
"@xui/core": "2.0.0-alpha.12",
|
|
46
|
+
"@xui/icon": "2.0.0-alpha.12",
|
|
47
47
|
"class-variance-authority": "^0.7.1",
|
|
48
48
|
"clsx": "^2.1.1"
|
|
49
49
|
},
|
package/types/xui-section.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ import { ClassValue } from 'clsx';
|
|
|
7
7
|
declare const sectionVariants: (props?: ({
|
|
8
8
|
elevation?: 0 | 1 | null | undefined;
|
|
9
9
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
10
|
-
type
|
|
10
|
+
type XuiSectionVariants = VariantProps<typeof sectionVariants>;
|
|
11
11
|
/**
|
|
12
12
|
* A titled container for a group of related content.
|
|
13
13
|
*
|
|
@@ -20,7 +20,7 @@ type SectionVariants = VariantProps<typeof sectionVariants>;
|
|
|
20
20
|
*
|
|
21
21
|
* When `collapsible`, the header becomes a button wired to the panel with
|
|
22
22
|
* `aria-expanded`/`aria-controls`, so the disclosure is operable by keyboard and
|
|
23
|
-
* announced correctly. `
|
|
23
|
+
* announced correctly. `open` is a model, so it works both uncontrolled and
|
|
24
24
|
* bound.
|
|
25
25
|
*
|
|
26
26
|
* The projected body goes through a single `ng-template` rendered into one of
|
|
@@ -29,6 +29,7 @@ type SectionVariants = VariantProps<typeof sectionVariants>;
|
|
|
29
29
|
*/
|
|
30
30
|
declare class XuiSection {
|
|
31
31
|
protected readonly panelId: string;
|
|
32
|
+
private readonly config;
|
|
32
33
|
/** The user-defined classes. Merged last so they win over the variant classes. */
|
|
33
34
|
readonly class: _angular_core.InputSignal<ClassValue>;
|
|
34
35
|
readonly elevation: _angular_core.InputSignal<0 | 1 | null | undefined>;
|
|
@@ -39,11 +40,11 @@ declare class XuiSection {
|
|
|
39
40
|
/** Reduce the header padding. */
|
|
40
41
|
readonly compact: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
41
42
|
/** Open state of a collapsible section. Works bound or unbound. */
|
|
42
|
-
readonly
|
|
43
|
+
readonly open: _angular_core.ModelSignal<boolean>;
|
|
43
44
|
protected readonly computedClass: _angular_core.Signal<string>;
|
|
44
45
|
protected readonly computedHeaderClass: _angular_core.Signal<string>;
|
|
45
46
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<XuiSection, never>;
|
|
46
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<XuiSection, "xui-section", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "elevation": { "alias": "elevation"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "
|
|
47
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<XuiSection, "xui-section", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "elevation": { "alias": "elevation"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["[right-element]", "*"], true, never>;
|
|
47
48
|
}
|
|
48
49
|
/**
|
|
49
50
|
* A padded content panel inside a section.
|
|
@@ -61,7 +62,21 @@ declare class XuiSectionCard {
|
|
|
61
62
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<XuiSectionCard, "xui-section-card", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "padded": { "alias": "padded"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
62
63
|
}
|
|
63
64
|
|
|
65
|
+
/**
|
|
66
|
+
* Application-wide defaults for XuiSection.
|
|
67
|
+
*
|
|
68
|
+
* Provide it once at the app root to re-skin every section without touching
|
|
69
|
+
* call sites; individual inputs still override the configured value.
|
|
70
|
+
*/
|
|
71
|
+
interface XuiSectionConfig {
|
|
72
|
+
elevation: XuiSectionVariants['elevation'];
|
|
73
|
+
/** Reduce the header padding. */
|
|
74
|
+
compact: boolean;
|
|
75
|
+
}
|
|
76
|
+
declare const injectXuiSectionConfig: () => XuiSectionConfig;
|
|
77
|
+
declare const provideXuiSectionConfig: (config: Partial<XuiSectionConfig>) => _angular_core.ValueProvider;
|
|
78
|
+
|
|
64
79
|
declare const XuiSectionImports: readonly [typeof XuiSection, typeof XuiSectionCard];
|
|
65
80
|
|
|
66
|
-
export { XuiSection, XuiSectionCard, XuiSectionImports, sectionVariants };
|
|
67
|
-
export type {
|
|
81
|
+
export { XuiSection, XuiSectionCard, XuiSectionImports, injectXuiSectionConfig, provideXuiSectionConfig, sectionVariants };
|
|
82
|
+
export type { XuiSectionConfig, XuiSectionVariants };
|