@xui/alert 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-alert.mjs +38 -36
- package/fesm2022/xui-alert.mjs.map +1 -1
- package/package.json +4 -4
- package/types/xui-alert.d.ts +19 -19
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-alert.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, model, input, booleanAttribute, output, computed, effect, untracked, ChangeDetectionStrategy, Component, inject, Injectable } from '@angular/core';
|
|
2
|
+
import { InjectionToken, model, input, booleanAttribute, output, computed, effect, untracked, ViewEncapsulation, ChangeDetectionStrategy, Component, inject, Injectable } from '@angular/core';
|
|
3
3
|
import { provideIcons, NgIcon } from '@ng-icons/core';
|
|
4
4
|
import { matErrorRound, matWarningRound, matCheckCircleRound, matInfoRound } from '@ng-icons/material-icons/round';
|
|
5
5
|
import * as i1 from '@xui/button';
|
|
@@ -8,25 +8,25 @@ import * as i2 from '@xui/dialog';
|
|
|
8
8
|
import { XuiDialogImports, XuiDialogRef, XuiDialogFooter, XuiDialogService } from '@xui/dialog';
|
|
9
9
|
import { XuiIcon } from '@xui/icon';
|
|
10
10
|
|
|
11
|
-
/** Icon each
|
|
12
|
-
const
|
|
11
|
+
/** Icon each color implies, unless the caller overrides it. */
|
|
12
|
+
const XUI_ALERT_COLOR_ICON = {
|
|
13
13
|
none: null,
|
|
14
14
|
primary: 'matInfoRound',
|
|
15
15
|
success: 'matCheckCircleRound',
|
|
16
16
|
warning: 'matWarningRound',
|
|
17
17
|
error: 'matErrorRound'
|
|
18
18
|
};
|
|
19
|
-
/** Colour for the icon,
|
|
20
|
-
const
|
|
19
|
+
/** Colour class for the icon, per alert colour. */
|
|
20
|
+
const XUI_ALERT_COLOR_ICON_CLASS = {
|
|
21
21
|
none: 'text-foreground-muted',
|
|
22
22
|
primary: 'text-primary-emphasis',
|
|
23
23
|
success: 'text-success-emphasis',
|
|
24
24
|
warning: 'text-warning-emphasis',
|
|
25
25
|
error: 'text-error-emphasis'
|
|
26
26
|
};
|
|
27
|
-
/** Button colour that matches the
|
|
28
|
-
function alertConfirmColor(
|
|
29
|
-
return
|
|
27
|
+
/** Button colour that matches the alert colour — `none` confirms in the primary colour. */
|
|
28
|
+
function alertConfirmColor(color) {
|
|
29
|
+
return color === 'none' ? 'primary' : color;
|
|
30
30
|
}
|
|
31
31
|
const XUI_ALERT_OPTIONS = new InjectionToken('XuiAlertOptions');
|
|
32
32
|
|
|
@@ -35,7 +35,7 @@ const XUI_ALERT_OPTIONS = new InjectionToken('XuiAlertOptions');
|
|
|
35
35
|
* irreversible.
|
|
36
36
|
*
|
|
37
37
|
* ```html
|
|
38
|
-
* <xui-alert [(
|
|
38
|
+
* <xui-alert [(open)]="confirming" color="error" confirmText="Delete"
|
|
39
39
|
* cancelText="Cancel" (confirmed)="remove()">
|
|
40
40
|
* Delete this project? This cannot be undone.
|
|
41
41
|
* </xui-alert>
|
|
@@ -43,17 +43,17 @@ const XUI_ALERT_OPTIONS = new InjectionToken('XuiAlertOptions');
|
|
|
43
43
|
*
|
|
44
44
|
* A preset over `@xui/dialog`: no title bar, no close button, and a fixed pair
|
|
45
45
|
* of actions. Dismissing it any other way — Escape, the backdrop — counts as a
|
|
46
|
-
* cancel, so `(
|
|
46
|
+
* cancel, so `(cancelled)` fires however the user backs out. For a promise-based
|
|
47
47
|
* confirmation opened from code, use `XuiAlertService`.
|
|
48
48
|
*/
|
|
49
49
|
class XuiAlert {
|
|
50
50
|
wasOpen = false;
|
|
51
51
|
settled = false;
|
|
52
|
-
|
|
53
|
-
...(ngDevMode ? [{ debugName: "
|
|
54
|
-
|
|
55
|
-
...(ngDevMode ? [{ debugName: "
|
|
56
|
-
/** Override the icon the
|
|
52
|
+
open = model(false, /* @ts-ignore */
|
|
53
|
+
...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
|
|
54
|
+
color = input('none', /* @ts-ignore */
|
|
55
|
+
...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
56
|
+
/** Override the icon the color implies. Pass `null` to show none. */
|
|
57
57
|
icon = input(undefined, /* @ts-ignore */
|
|
58
58
|
...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
59
59
|
confirmText = input('Confirm', /* @ts-ignore */
|
|
@@ -64,27 +64,27 @@ class XuiAlert {
|
|
|
64
64
|
canEscapeKeyClose = input(true, { ...(ngDevMode ? { debugName: "canEscapeKeyClose" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
65
65
|
canOutsideClickClose = input(false, { ...(ngDevMode ? { debugName: "canOutsideClickClose" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
66
66
|
confirmed = output();
|
|
67
|
-
|
|
67
|
+
cancelled = output();
|
|
68
68
|
resolvedIcon = computed(() => {
|
|
69
69
|
const override = this.icon();
|
|
70
|
-
return override === undefined ?
|
|
70
|
+
return override === undefined ? XUI_ALERT_COLOR_ICON[this.color()] : override;
|
|
71
71
|
}, /* @ts-ignore */
|
|
72
72
|
...(ngDevMode ? [{ debugName: "resolvedIcon" }] : /* istanbul ignore next */ []));
|
|
73
|
-
iconClass = computed(() =>
|
|
73
|
+
iconClass = computed(() => XUI_ALERT_COLOR_ICON_CLASS[this.color()], /* @ts-ignore */
|
|
74
74
|
...(ngDevMode ? [{ debugName: "iconClass" }] : /* istanbul ignore next */ []));
|
|
75
|
-
confirmColor = computed(() => alertConfirmColor(this.
|
|
75
|
+
confirmColor = computed(() => alertConfirmColor(this.color()), /* @ts-ignore */
|
|
76
76
|
...(ngDevMode ? [{ debugName: "confirmColor" }] : /* istanbul ignore next */ []));
|
|
77
77
|
constructor() {
|
|
78
78
|
// A close that is neither confirm nor cancel — Escape, the backdrop — is
|
|
79
79
|
// still the user backing out, so report it as a cancel.
|
|
80
80
|
effect(() => {
|
|
81
|
-
const open = this.
|
|
81
|
+
const open = this.open();
|
|
82
82
|
untracked(() => {
|
|
83
83
|
if (open) {
|
|
84
84
|
this.settled = false;
|
|
85
85
|
}
|
|
86
86
|
else if (this.wasOpen && !this.settled) {
|
|
87
|
-
this.
|
|
87
|
+
this.cancelled.emit();
|
|
88
88
|
}
|
|
89
89
|
this.wasOpen = open;
|
|
90
90
|
});
|
|
@@ -93,17 +93,17 @@ class XuiAlert {
|
|
|
93
93
|
confirm() {
|
|
94
94
|
this.settled = true;
|
|
95
95
|
this.confirmed.emit();
|
|
96
|
-
this.
|
|
96
|
+
this.open.set(false);
|
|
97
97
|
}
|
|
98
98
|
cancel() {
|
|
99
99
|
this.settled = true;
|
|
100
|
-
this.
|
|
101
|
-
this.
|
|
100
|
+
this.cancelled.emit();
|
|
101
|
+
this.open.set(false);
|
|
102
102
|
}
|
|
103
103
|
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
104
|
-
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: XuiAlert, isStandalone: true, selector: "xui-alert", inputs: {
|
|
104
|
+
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: XuiAlert, isStandalone: true, selector: "xui-alert", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, confirmText: { classPropertyName: "confirmText", publicName: "confirmText", isSignal: true, isRequired: false, transformFunction: null }, cancelText: { classPropertyName: "cancelText", publicName: "cancelText", isSignal: true, isRequired: false, transformFunction: null }, canEscapeKeyClose: { classPropertyName: "canEscapeKeyClose", publicName: "canEscapeKeyClose", isSignal: true, isRequired: false, transformFunction: null }, canOutsideClickClose: { classPropertyName: "canOutsideClickClose", publicName: "canOutsideClickClose", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", confirmed: "confirmed", cancelled: "cancelled" }, ngImport: i0, template: `
|
|
105
105
|
<xui-dialog
|
|
106
|
-
[(
|
|
106
|
+
[(open)]="open"
|
|
107
107
|
size="sm"
|
|
108
108
|
[showCloseButton]="false"
|
|
109
109
|
[canEscapeKeyClose]="canEscapeKeyClose()"
|
|
@@ -122,7 +122,7 @@ class XuiAlert {
|
|
|
122
122
|
<button xuiButton [color]="confirmColor()" (click)="confirm()">{{ confirmText() }}</button>
|
|
123
123
|
</xui-dialog-footer>
|
|
124
124
|
</xui-dialog>
|
|
125
|
-
`, isInline: true, dependencies: [{ 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", "
|
|
125
|
+
`, isInline: true, dependencies: [{ 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: "directive", type: i1.XuiButton, selector: "[xuiButton]", inputs: ["color", "size", "variant", "class", "fill", "alignText", "active", "loading"], exportAs: ["xuiButton"] }, { kind: "component", type: i2.XuiDialog, selector: "xui-dialog", inputs: ["class", "title", "icon", "size", "canEscapeKeyClose", "canOutsideClickClose", "showCloseButton", "open"], outputs: ["openChange"] }, { kind: "component", type: i2.XuiDialogFooter, selector: "xui-dialog-footer", inputs: ["class", "align"] }], viewProviders: [provideIcons({ matInfoRound, matCheckCircleRound, matWarningRound, matErrorRound })], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
126
126
|
}
|
|
127
127
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiAlert, decorators: [{
|
|
128
128
|
type: Component,
|
|
@@ -131,9 +131,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
131
131
|
imports: [NgIcon, XuiIcon, XuiButtonImports, XuiDialogImports],
|
|
132
132
|
viewProviders: [provideIcons({ matInfoRound, matCheckCircleRound, matWarningRound, matErrorRound })],
|
|
133
133
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
134
|
+
encapsulation: ViewEncapsulation.None,
|
|
134
135
|
template: `
|
|
135
136
|
<xui-dialog
|
|
136
|
-
[(
|
|
137
|
+
[(open)]="open"
|
|
137
138
|
size="sm"
|
|
138
139
|
[showCloseButton]="false"
|
|
139
140
|
[canEscapeKeyClose]="canEscapeKeyClose()"
|
|
@@ -154,7 +155,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
154
155
|
</xui-dialog>
|
|
155
156
|
`
|
|
156
157
|
}]
|
|
157
|
-
}], ctorParameters: () => [], propDecorators: {
|
|
158
|
+
}], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], confirmText: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmText", required: false }] }], cancelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelText", required: false }] }], canEscapeKeyClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEscapeKeyClose", required: false }] }], canOutsideClickClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "canOutsideClickClose", required: false }] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }] } });
|
|
158
159
|
|
|
159
160
|
/**
|
|
160
161
|
* The body rendered by `XuiAlertService`. Not exported — the service is the
|
|
@@ -164,12 +165,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
164
165
|
class XuiConfirmDialog {
|
|
165
166
|
options = inject(XUI_ALERT_OPTIONS);
|
|
166
167
|
ref = inject(XuiDialogRef);
|
|
167
|
-
|
|
168
|
-
resolvedIcon = computed(() => this.options.icon === undefined ?
|
|
168
|
+
color = this.options.color ?? 'none';
|
|
169
|
+
resolvedIcon = computed(() => this.options.icon === undefined ? XUI_ALERT_COLOR_ICON[this.color] : this.options.icon, /* @ts-ignore */
|
|
169
170
|
...(ngDevMode ? [{ debugName: "resolvedIcon" }] : /* istanbul ignore next */ []));
|
|
170
|
-
iconClass = computed(() =>
|
|
171
|
+
iconClass = computed(() => XUI_ALERT_COLOR_ICON_CLASS[this.color], /* @ts-ignore */
|
|
171
172
|
...(ngDevMode ? [{ debugName: "iconClass" }] : /* istanbul ignore next */ []));
|
|
172
|
-
confirmColor = computed(() => alertConfirmColor(this.
|
|
173
|
+
confirmColor = computed(() => alertConfirmColor(this.color), /* @ts-ignore */
|
|
173
174
|
...(ngDevMode ? [{ debugName: "confirmColor" }] : /* istanbul ignore next */ []));
|
|
174
175
|
close(result) {
|
|
175
176
|
this.ref.close(result);
|
|
@@ -188,7 +189,7 @@ class XuiConfirmDialog {
|
|
|
188
189
|
}
|
|
189
190
|
<button xuiButton [color]="confirmColor()" (click)="close(true)">{{ options.confirmText ?? 'Confirm' }}</button>
|
|
190
191
|
</xui-dialog-footer>
|
|
191
|
-
`, isInline: true, dependencies: [{ 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", "
|
|
192
|
+
`, isInline: true, dependencies: [{ 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: "directive", type: i1.XuiButton, selector: "[xuiButton]", inputs: ["color", "size", "variant", "class", "fill", "alignText", "active", "loading"], exportAs: ["xuiButton"] }, { kind: "component", type: XuiDialogFooter, selector: "xui-dialog-footer", inputs: ["class", "align"] }], viewProviders: [provideIcons({ matInfoRound, matCheckCircleRound, matWarningRound, matErrorRound })], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
192
193
|
}
|
|
193
194
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiConfirmDialog, decorators: [{
|
|
194
195
|
type: Component,
|
|
@@ -197,6 +198,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
197
198
|
imports: [NgIcon, XuiIcon, XuiButtonImports, XuiDialogFooter],
|
|
198
199
|
viewProviders: [provideIcons({ matInfoRound, matCheckCircleRound, matWarningRound, matErrorRound })],
|
|
199
200
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
201
|
+
encapsulation: ViewEncapsulation.None,
|
|
200
202
|
template: `
|
|
201
203
|
<div class="flex gap-3 px-6 py-6">
|
|
202
204
|
@if (resolvedIcon()) {
|
|
@@ -217,7 +219,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
217
219
|
* Opens a confirmation from code and resolves to the user's answer.
|
|
218
220
|
*
|
|
219
221
|
* ```ts
|
|
220
|
-
* if (await this.alerts.confirm({ message: 'Delete this?',
|
|
222
|
+
* if (await this.alerts.confirm({ message: 'Delete this?', color: 'error', confirmText: 'Delete', cancelText: 'Cancel' })) {
|
|
221
223
|
* this.remove();
|
|
222
224
|
* }
|
|
223
225
|
* ```
|
|
@@ -253,5 +255,5 @@ const XuiAlertImports = [XuiAlert];
|
|
|
253
255
|
* Generated bundle index. Do not edit.
|
|
254
256
|
*/
|
|
255
257
|
|
|
256
|
-
export {
|
|
258
|
+
export { XUI_ALERT_COLOR_ICON, XUI_ALERT_COLOR_ICON_CLASS, XUI_ALERT_OPTIONS, XuiAlert, XuiAlertImports, XuiAlertService, alertConfirmColor };
|
|
257
259
|
//# sourceMappingURL=xui-alert.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"xui-alert.mjs","sources":["../../../../../../libs/ui/alert/xui/src/lib/alert-config.ts","../../../../../../libs/ui/alert/xui/src/lib/alert.ts","../../../../../../libs/ui/alert/xui/src/lib/alert.service.ts","../../../../../../libs/ui/alert/xui/src/index.ts","../../../../../../libs/ui/alert/xui/src/xui-alert.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\n\n/** The colour and default icon an alert takes. */\nexport type XuiAlertIntent = 'none' | 'primary' | 'success' | 'warning' | 'error';\n\n/** Icon each intent implies, unless the caller overrides it. */\nexport const XUI_ALERT_INTENT_ICON: Record<XuiAlertIntent, string | null> = {\n none: null,\n primary: 'matInfoRound',\n success: 'matCheckCircleRound',\n warning: 'matWarningRound',\n error: 'matErrorRound'\n};\n\n/** Colour for the icon, by intent. */\nexport const XUI_ALERT_INTENT_ICON_CLASS: Record<XuiAlertIntent, string> = {\n none: 'text-foreground-muted',\n primary: 'text-primary-emphasis',\n success: 'text-success-emphasis',\n warning: 'text-warning-emphasis',\n error: 'text-error-emphasis'\n};\n\n/** Button colour that matches the intent — `none` confirms in the primary colour. */\nexport function alertConfirmColor(intent: XuiAlertIntent): 'primary' | 'success' | 'warning' | 'error' {\n return intent === 'none' ? 'primary' : intent;\n}\n\n/** Options for the imperative `XuiAlertService.confirm()`. */\nexport interface XuiAlertOptions {\n message: string;\n intent?: XuiAlertIntent;\n /** Override the icon the intent implies. Pass `null` for none. */\n icon?: string | null;\n confirmText?: string;\n /** Omit for an acknowledge-only alert with no cancel button. */\n cancelText?: string;\n canEscapeKeyClose?: boolean;\n canOutsideClickClose?: boolean;\n}\n\nexport const XUI_ALERT_OPTIONS = new InjectionToken<XuiAlertOptions>('XuiAlertOptions');\n","import type { BooleanInput } from '@angular/cdk/coercion';\nimport {\n ChangeDetectionStrategy,\n Component,\n booleanAttribute,\n computed,\n effect,\n input,\n model,\n output,\n untracked\n} from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { matCheckCircleRound, matErrorRound, matInfoRound, matWarningRound } from '@ng-icons/material-icons/round';\nimport { XuiButtonImports } from '@xui/button';\nimport { XuiDialogImports } from '@xui/dialog';\nimport { XuiIcon } from '@xui/icon';\nimport {\n XUI_ALERT_INTENT_ICON,\n XUI_ALERT_INTENT_ICON_CLASS,\n alertConfirmColor,\n type XuiAlertIntent\n} from './alert-config';\n\n/**\n * A small modal that asks the user to confirm or cancel before something\n * irreversible.\n *\n * ```html\n * <xui-alert [(isOpen)]=\"confirming\" intent=\"error\" confirmText=\"Delete\"\n * cancelText=\"Cancel\" (confirmed)=\"remove()\">\n * Delete this project? This cannot be undone.\n * </xui-alert>\n * ```\n *\n * A preset over `@xui/dialog`: no title bar, no close button, and a fixed pair\n * of actions. Dismissing it any other way — Escape, the backdrop — counts as a\n * cancel, so `(canceled)` fires however the user backs out. For a promise-based\n * confirmation opened from code, use `XuiAlertService`.\n */\n@Component({\n selector: 'xui-alert',\n imports: [NgIcon, XuiIcon, XuiButtonImports, XuiDialogImports],\n viewProviders: [provideIcons({ matInfoRound, matCheckCircleRound, matWarningRound, matErrorRound })],\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n <xui-dialog\n [(isOpen)]=\"isOpen\"\n size=\"sm\"\n [showCloseButton]=\"false\"\n [canEscapeKeyClose]=\"canEscapeKeyClose()\"\n [canOutsideClickClose]=\"canOutsideClickClose()\"\n >\n <div class=\"flex gap-3 px-6 py-6\">\n @if (resolvedIcon()) {\n <ng-icon xui size=\"xl\" [name]=\"resolvedIcon()!\" [class]=\"iconClass()\" class=\"shrink-0\" />\n }\n <div class=\"text-foreground pt-0.5 text-sm\"><ng-content /></div>\n </div>\n <xui-dialog-footer>\n @if (cancelText()) {\n <button xuiButton variant=\"ghost\" (click)=\"cancel()\">{{ cancelText() }}</button>\n }\n <button xuiButton [color]=\"confirmColor()\" (click)=\"confirm()\">{{ confirmText() }}</button>\n </xui-dialog-footer>\n </xui-dialog>\n `\n})\nexport class XuiAlert {\n private wasOpen = false;\n private settled = false;\n\n readonly isOpen = model(false);\n\n readonly intent = input<XuiAlertIntent>('none');\n /** Override the icon the intent implies. Pass `null` to show none. */\n readonly icon = input<string | null | undefined>(undefined);\n\n readonly confirmText = input('Confirm');\n /** Omit for an acknowledge-only alert with no cancel button. */\n readonly cancelText = input<string | null>(null);\n\n readonly canEscapeKeyClose = input<boolean, BooleanInput>(true, { transform: booleanAttribute });\n readonly canOutsideClickClose = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n readonly confirmed = output<void>();\n readonly canceled = output<void>();\n\n protected readonly resolvedIcon = computed(() => {\n const override = this.icon();\n\n return override === undefined ? XUI_ALERT_INTENT_ICON[this.intent()] : override;\n });\n protected readonly iconClass = computed(() => XUI_ALERT_INTENT_ICON_CLASS[this.intent()]);\n protected readonly confirmColor = computed(() => alertConfirmColor(this.intent()));\n\n constructor() {\n // A close that is neither confirm nor cancel — Escape, the backdrop — is\n // still the user backing out, so report it as a cancel.\n effect(() => {\n const open = this.isOpen();\n\n untracked(() => {\n if (open) {\n this.settled = false;\n } else if (this.wasOpen && !this.settled) {\n this.canceled.emit();\n }\n\n this.wasOpen = open;\n });\n });\n }\n\n protected confirm(): void {\n this.settled = true;\n this.confirmed.emit();\n this.isOpen.set(false);\n }\n\n protected cancel(): void {\n this.settled = true;\n this.canceled.emit();\n this.isOpen.set(false);\n }\n}\n","import { ChangeDetectionStrategy, Component, Injectable, computed, inject } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { matCheckCircleRound, matErrorRound, matInfoRound, matWarningRound } from '@ng-icons/material-icons/round';\nimport { XuiButtonImports } from '@xui/button';\nimport { XuiDialogFooter, XuiDialogRef, XuiDialogService } from '@xui/dialog';\nimport { XuiIcon } from '@xui/icon';\nimport {\n XUI_ALERT_INTENT_ICON,\n XUI_ALERT_INTENT_ICON_CLASS,\n XUI_ALERT_OPTIONS,\n alertConfirmColor,\n type XuiAlertOptions\n} from './alert-config';\n\n/**\n * The body rendered by `XuiAlertService`. Not exported — the service is the\n * only thing that mounts it, and it closes the dialog with the boolean result\n * the promise resolves to.\n */\n@Component({\n selector: 'xui-confirm-dialog',\n imports: [NgIcon, XuiIcon, XuiButtonImports, XuiDialogFooter],\n viewProviders: [provideIcons({ matInfoRound, matCheckCircleRound, matWarningRound, matErrorRound })],\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n <div class=\"flex gap-3 px-6 py-6\">\n @if (resolvedIcon()) {\n <ng-icon xui size=\"xl\" [name]=\"resolvedIcon()!\" [class]=\"iconClass()\" class=\"shrink-0\" />\n }\n <div class=\"text-foreground pt-0.5 text-sm\">{{ options.message }}</div>\n </div>\n <xui-dialog-footer>\n @if (options.cancelText) {\n <button xuiButton variant=\"ghost\" (click)=\"close(false)\">{{ options.cancelText }}</button>\n }\n <button xuiButton [color]=\"confirmColor()\" (click)=\"close(true)\">{{ options.confirmText ?? 'Confirm' }}</button>\n </xui-dialog-footer>\n `\n})\nexport class XuiConfirmDialog {\n protected readonly options = inject(XUI_ALERT_OPTIONS);\n private readonly ref = inject<XuiDialogRef<boolean>>(XuiDialogRef);\n\n private readonly intent = this.options.intent ?? 'none';\n protected readonly resolvedIcon = computed(() =>\n this.options.icon === undefined ? XUI_ALERT_INTENT_ICON[this.intent] : this.options.icon\n );\n protected readonly iconClass = computed(() => XUI_ALERT_INTENT_ICON_CLASS[this.intent]);\n protected readonly confirmColor = computed(() => alertConfirmColor(this.intent));\n\n protected close(result: boolean): void {\n this.ref.close(result);\n }\n}\n\n/**\n * Opens a confirmation from code and resolves to the user's answer.\n *\n * ```ts\n * if (await this.alerts.confirm({ message: 'Delete this?', intent: 'error', confirmText: 'Delete', cancelText: 'Cancel' })) {\n * this.remove();\n * }\n * ```\n *\n * A thin layer over `XuiDialogService` that mounts a fixed confirm/cancel body\n * and settles its promise `true` on confirm, `false` on cancel or any dismissal\n * — so a caller can simply `await` the answer.\n */\n@Injectable({ providedIn: 'root' })\nexport class XuiAlertService {\n private readonly dialogs = inject(XuiDialogService);\n\n async confirm(options: XuiAlertOptions): Promise<boolean> {\n const ref = this.dialogs.open<XuiConfirmDialog, boolean>(XuiConfirmDialog, {\n size: 'sm',\n canEscapeKeyClose: options.canEscapeKeyClose ?? true,\n canOutsideClickClose: options.canOutsideClickClose ?? false,\n ariaLabel: options.message,\n providers: [{ provide: XUI_ALERT_OPTIONS, useValue: options }]\n });\n\n // A dismissal (Escape, backdrop) resolves `undefined`; treat it as declining.\n return (await ref.closed) === true;\n }\n}\n","import { XuiAlert } from './lib/alert';\n\nexport * from './lib/alert';\nexport * from './lib/alert-config';\n// XuiConfirmDialog is intentionally not exported — it is an internal of the service.\nexport { XuiAlertService } from './lib/alert.service';\n\nexport const XuiAlertImports = [XuiAlert] 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-alert.mjs","sources":["../../../../../../libs/ui/alert/xui/src/lib/alert-config.ts","../../../../../../libs/ui/alert/xui/src/lib/alert.ts","../../../../../../libs/ui/alert/xui/src/lib/alert.service.ts","../../../../../../libs/ui/alert/xui/src/index.ts","../../../../../../libs/ui/alert/xui/src/xui-alert.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\n\n/** The colour and default icon an alert takes. */\nexport type XuiAlertColor = 'none' | 'primary' | 'success' | 'warning' | 'error';\n\n/** Icon each color implies, unless the caller overrides it. */\nexport const XUI_ALERT_COLOR_ICON: Record<XuiAlertColor, string | null> = {\n none: null,\n primary: 'matInfoRound',\n success: 'matCheckCircleRound',\n warning: 'matWarningRound',\n error: 'matErrorRound'\n};\n\n/** Colour class for the icon, per alert colour. */\nexport const XUI_ALERT_COLOR_ICON_CLASS: Record<XuiAlertColor, string> = {\n none: 'text-foreground-muted',\n primary: 'text-primary-emphasis',\n success: 'text-success-emphasis',\n warning: 'text-warning-emphasis',\n error: 'text-error-emphasis'\n};\n\n/** Button colour that matches the alert colour — `none` confirms in the primary colour. */\nexport function alertConfirmColor(color: XuiAlertColor): 'primary' | 'success' | 'warning' | 'error' {\n return color === 'none' ? 'primary' : color;\n}\n\n/** Options for the imperative `XuiAlertService.confirm()`. */\nexport interface XuiAlertOptions {\n message: string;\n color?: XuiAlertColor;\n /** Override the icon the color implies. Pass `null` for none. */\n icon?: string | null;\n confirmText?: string;\n /** Omit for an acknowledge-only alert with no cancel button. */\n cancelText?: string;\n canEscapeKeyClose?: boolean;\n canOutsideClickClose?: boolean;\n}\n\nexport const XUI_ALERT_OPTIONS = new InjectionToken<XuiAlertOptions>('XuiAlertOptions');\n","import type { BooleanInput } from '@angular/cdk/coercion';\nimport {\n ChangeDetectionStrategy,\n Component,\n ViewEncapsulation,\n booleanAttribute,\n computed,\n effect,\n input,\n model,\n output,\n untracked\n} from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { matCheckCircleRound, matErrorRound, matInfoRound, matWarningRound } from '@ng-icons/material-icons/round';\nimport { XuiButtonImports } from '@xui/button';\nimport { XuiDialogImports } from '@xui/dialog';\nimport { XuiIcon } from '@xui/icon';\nimport {\n XUI_ALERT_COLOR_ICON,\n XUI_ALERT_COLOR_ICON_CLASS,\n alertConfirmColor,\n type XuiAlertColor\n} from './alert-config';\n\n/**\n * A small modal that asks the user to confirm or cancel before something\n * irreversible.\n *\n * ```html\n * <xui-alert [(open)]=\"confirming\" color=\"error\" confirmText=\"Delete\"\n * cancelText=\"Cancel\" (confirmed)=\"remove()\">\n * Delete this project? This cannot be undone.\n * </xui-alert>\n * ```\n *\n * A preset over `@xui/dialog`: no title bar, no close button, and a fixed pair\n * of actions. Dismissing it any other way — Escape, the backdrop — counts as a\n * cancel, so `(cancelled)` fires however the user backs out. For a promise-based\n * confirmation opened from code, use `XuiAlertService`.\n */\n@Component({\n selector: 'xui-alert',\n imports: [NgIcon, XuiIcon, XuiButtonImports, XuiDialogImports],\n viewProviders: [provideIcons({ matInfoRound, matCheckCircleRound, matWarningRound, matErrorRound })],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n template: `\n <xui-dialog\n [(open)]=\"open\"\n size=\"sm\"\n [showCloseButton]=\"false\"\n [canEscapeKeyClose]=\"canEscapeKeyClose()\"\n [canOutsideClickClose]=\"canOutsideClickClose()\"\n >\n <div class=\"flex gap-3 px-6 py-6\">\n @if (resolvedIcon()) {\n <ng-icon xui size=\"xl\" [name]=\"resolvedIcon()!\" [class]=\"iconClass()\" class=\"shrink-0\" />\n }\n <div class=\"text-foreground pt-0.5 text-sm\"><ng-content /></div>\n </div>\n <xui-dialog-footer>\n @if (cancelText()) {\n <button xuiButton variant=\"ghost\" (click)=\"cancel()\">{{ cancelText() }}</button>\n }\n <button xuiButton [color]=\"confirmColor()\" (click)=\"confirm()\">{{ confirmText() }}</button>\n </xui-dialog-footer>\n </xui-dialog>\n `\n})\nexport class XuiAlert {\n private wasOpen = false;\n private settled = false;\n\n readonly open = model(false);\n\n readonly color = input<XuiAlertColor>('none');\n /** Override the icon the color implies. Pass `null` to show none. */\n readonly icon = input<string | null | undefined>(undefined);\n\n readonly confirmText = input('Confirm');\n /** Omit for an acknowledge-only alert with no cancel button. */\n readonly cancelText = input<string | null>(null);\n\n readonly canEscapeKeyClose = input<boolean, BooleanInput>(true, { transform: booleanAttribute });\n readonly canOutsideClickClose = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n readonly confirmed = output<void>();\n readonly cancelled = output<void>();\n\n protected readonly resolvedIcon = computed(() => {\n const override = this.icon();\n\n return override === undefined ? XUI_ALERT_COLOR_ICON[this.color()] : override;\n });\n protected readonly iconClass = computed(() => XUI_ALERT_COLOR_ICON_CLASS[this.color()]);\n protected readonly confirmColor = computed(() => alertConfirmColor(this.color()));\n\n constructor() {\n // A close that is neither confirm nor cancel — Escape, the backdrop — is\n // still the user backing out, so report it as a cancel.\n effect(() => {\n const open = this.open();\n\n untracked(() => {\n if (open) {\n this.settled = false;\n } else if (this.wasOpen && !this.settled) {\n this.cancelled.emit();\n }\n\n this.wasOpen = open;\n });\n });\n }\n\n protected confirm(): void {\n this.settled = true;\n this.confirmed.emit();\n this.open.set(false);\n }\n\n protected cancel(): void {\n this.settled = true;\n this.cancelled.emit();\n this.open.set(false);\n }\n}\n","import { ChangeDetectionStrategy, Component, Injectable, ViewEncapsulation, computed, inject } from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { matCheckCircleRound, matErrorRound, matInfoRound, matWarningRound } from '@ng-icons/material-icons/round';\nimport { XuiButtonImports } from '@xui/button';\nimport { XuiDialogFooter, XuiDialogRef, XuiDialogService } from '@xui/dialog';\nimport { XuiIcon } from '@xui/icon';\nimport {\n XUI_ALERT_COLOR_ICON,\n XUI_ALERT_COLOR_ICON_CLASS,\n XUI_ALERT_OPTIONS,\n alertConfirmColor,\n type XuiAlertOptions\n} from './alert-config';\n\n/**\n * The body rendered by `XuiAlertService`. Not exported — the service is the\n * only thing that mounts it, and it closes the dialog with the boolean result\n * the promise resolves to.\n */\n@Component({\n selector: 'xui-confirm-dialog',\n imports: [NgIcon, XuiIcon, XuiButtonImports, XuiDialogFooter],\n viewProviders: [provideIcons({ matInfoRound, matCheckCircleRound, matWarningRound, matErrorRound })],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n template: `\n <div class=\"flex gap-3 px-6 py-6\">\n @if (resolvedIcon()) {\n <ng-icon xui size=\"xl\" [name]=\"resolvedIcon()!\" [class]=\"iconClass()\" class=\"shrink-0\" />\n }\n <div class=\"text-foreground pt-0.5 text-sm\">{{ options.message }}</div>\n </div>\n <xui-dialog-footer>\n @if (options.cancelText) {\n <button xuiButton variant=\"ghost\" (click)=\"close(false)\">{{ options.cancelText }}</button>\n }\n <button xuiButton [color]=\"confirmColor()\" (click)=\"close(true)\">{{ options.confirmText ?? 'Confirm' }}</button>\n </xui-dialog-footer>\n `\n})\nexport class XuiConfirmDialog {\n protected readonly options = inject(XUI_ALERT_OPTIONS);\n private readonly ref = inject<XuiDialogRef<boolean>>(XuiDialogRef);\n\n private readonly color = this.options.color ?? 'none';\n protected readonly resolvedIcon = computed(() =>\n this.options.icon === undefined ? XUI_ALERT_COLOR_ICON[this.color] : this.options.icon\n );\n protected readonly iconClass = computed(() => XUI_ALERT_COLOR_ICON_CLASS[this.color]);\n protected readonly confirmColor = computed(() => alertConfirmColor(this.color));\n\n protected close(result: boolean): void {\n this.ref.close(result);\n }\n}\n\n/**\n * Opens a confirmation from code and resolves to the user's answer.\n *\n * ```ts\n * if (await this.alerts.confirm({ message: 'Delete this?', color: 'error', confirmText: 'Delete', cancelText: 'Cancel' })) {\n * this.remove();\n * }\n * ```\n *\n * A thin layer over `XuiDialogService` that mounts a fixed confirm/cancel body\n * and settles its promise `true` on confirm, `false` on cancel or any dismissal\n * — so a caller can simply `await` the answer.\n */\n@Injectable({ providedIn: 'root' })\nexport class XuiAlertService {\n private readonly dialogs = inject(XuiDialogService);\n\n async confirm(options: XuiAlertOptions): Promise<boolean> {\n const ref = this.dialogs.open<XuiConfirmDialog, boolean>(XuiConfirmDialog, {\n size: 'sm',\n canEscapeKeyClose: options.canEscapeKeyClose ?? true,\n canOutsideClickClose: options.canOutsideClickClose ?? false,\n ariaLabel: options.message,\n providers: [{ provide: XUI_ALERT_OPTIONS, useValue: options }]\n });\n\n // A dismissal (Escape, backdrop) resolves `undefined`; treat it as declining.\n return (await ref.closed) === true;\n }\n}\n","import { XuiAlert } from './lib/alert';\n\nexport * from './lib/alert';\nexport * from './lib/alert-config';\n// XuiConfirmDialog is intentionally not exported — it is an internal of the service.\nexport { XuiAlertService } from './lib/alert.service';\n\nexport const XuiAlertImports = [XuiAlert] 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/alert",
|
|
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",
|
|
@@ -40,9 +40,9 @@
|
|
|
40
40
|
"@angular/core": "22",
|
|
41
41
|
"@ng-icons/core": "34",
|
|
42
42
|
"@ng-icons/material-icons": "34",
|
|
43
|
-
"@xui/button": "2.0.0-alpha.
|
|
44
|
-
"@xui/dialog": "2.0.0-alpha.
|
|
45
|
-
"@xui/icon": "2.0.0-alpha.
|
|
43
|
+
"@xui/button": "2.0.0-alpha.12",
|
|
44
|
+
"@xui/dialog": "2.0.0-alpha.12",
|
|
45
|
+
"@xui/icon": "2.0.0-alpha.12"
|
|
46
46
|
},
|
|
47
47
|
"publishConfig": {
|
|
48
48
|
"access": "public"
|
package/types/xui-alert.d.ts
CHANGED
|
@@ -3,18 +3,18 @@ import { InjectionToken } from '@angular/core';
|
|
|
3
3
|
import { BooleanInput } from '@angular/cdk/coercion';
|
|
4
4
|
|
|
5
5
|
/** The colour and default icon an alert takes. */
|
|
6
|
-
type
|
|
7
|
-
/** Icon each
|
|
8
|
-
declare const
|
|
9
|
-
/** Colour for the icon,
|
|
10
|
-
declare const
|
|
11
|
-
/** Button colour that matches the
|
|
12
|
-
declare function alertConfirmColor(
|
|
6
|
+
type XuiAlertColor = 'none' | 'primary' | 'success' | 'warning' | 'error';
|
|
7
|
+
/** Icon each color implies, unless the caller overrides it. */
|
|
8
|
+
declare const XUI_ALERT_COLOR_ICON: Record<XuiAlertColor, string | null>;
|
|
9
|
+
/** Colour class for the icon, per alert colour. */
|
|
10
|
+
declare const XUI_ALERT_COLOR_ICON_CLASS: Record<XuiAlertColor, string>;
|
|
11
|
+
/** Button colour that matches the alert colour — `none` confirms in the primary colour. */
|
|
12
|
+
declare function alertConfirmColor(color: XuiAlertColor): 'primary' | 'success' | 'warning' | 'error';
|
|
13
13
|
/** Options for the imperative `XuiAlertService.confirm()`. */
|
|
14
14
|
interface XuiAlertOptions {
|
|
15
15
|
message: string;
|
|
16
|
-
|
|
17
|
-
/** Override the icon the
|
|
16
|
+
color?: XuiAlertColor;
|
|
17
|
+
/** Override the icon the color implies. Pass `null` for none. */
|
|
18
18
|
icon?: string | null;
|
|
19
19
|
confirmText?: string;
|
|
20
20
|
/** Omit for an acknowledge-only alert with no cancel button. */
|
|
@@ -29,7 +29,7 @@ declare const XUI_ALERT_OPTIONS: InjectionToken<XuiAlertOptions>;
|
|
|
29
29
|
* irreversible.
|
|
30
30
|
*
|
|
31
31
|
* ```html
|
|
32
|
-
* <xui-alert [(
|
|
32
|
+
* <xui-alert [(open)]="confirming" color="error" confirmText="Delete"
|
|
33
33
|
* cancelText="Cancel" (confirmed)="remove()">
|
|
34
34
|
* Delete this project? This cannot be undone.
|
|
35
35
|
* </xui-alert>
|
|
@@ -37,15 +37,15 @@ declare const XUI_ALERT_OPTIONS: InjectionToken<XuiAlertOptions>;
|
|
|
37
37
|
*
|
|
38
38
|
* A preset over `@xui/dialog`: no title bar, no close button, and a fixed pair
|
|
39
39
|
* of actions. Dismissing it any other way — Escape, the backdrop — counts as a
|
|
40
|
-
* cancel, so `(
|
|
40
|
+
* cancel, so `(cancelled)` fires however the user backs out. For a promise-based
|
|
41
41
|
* confirmation opened from code, use `XuiAlertService`.
|
|
42
42
|
*/
|
|
43
43
|
declare class XuiAlert {
|
|
44
44
|
private wasOpen;
|
|
45
45
|
private settled;
|
|
46
|
-
readonly
|
|
47
|
-
readonly
|
|
48
|
-
/** Override the icon the
|
|
46
|
+
readonly open: _angular_core.ModelSignal<boolean>;
|
|
47
|
+
readonly color: _angular_core.InputSignal<XuiAlertColor>;
|
|
48
|
+
/** Override the icon the color implies. Pass `null` to show none. */
|
|
49
49
|
readonly icon: _angular_core.InputSignal<string | null | undefined>;
|
|
50
50
|
readonly confirmText: _angular_core.InputSignal<string>;
|
|
51
51
|
/** Omit for an acknowledge-only alert with no cancel button. */
|
|
@@ -53,7 +53,7 @@ declare class XuiAlert {
|
|
|
53
53
|
readonly canEscapeKeyClose: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
54
54
|
readonly canOutsideClickClose: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
55
55
|
readonly confirmed: _angular_core.OutputEmitterRef<void>;
|
|
56
|
-
readonly
|
|
56
|
+
readonly cancelled: _angular_core.OutputEmitterRef<void>;
|
|
57
57
|
protected readonly resolvedIcon: _angular_core.Signal<string | null>;
|
|
58
58
|
protected readonly iconClass: _angular_core.Signal<string>;
|
|
59
59
|
protected readonly confirmColor: _angular_core.Signal<"primary" | "success" | "warning" | "error">;
|
|
@@ -61,14 +61,14 @@ declare class XuiAlert {
|
|
|
61
61
|
protected confirm(): void;
|
|
62
62
|
protected cancel(): void;
|
|
63
63
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<XuiAlert, never>;
|
|
64
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<XuiAlert, "xui-alert", never, { "
|
|
64
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<XuiAlert, "xui-alert", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "confirmText": { "alias": "confirmText"; "required": false; "isSignal": true; }; "cancelText": { "alias": "cancelText"; "required": false; "isSignal": true; }; "canEscapeKeyClose": { "alias": "canEscapeKeyClose"; "required": false; "isSignal": true; }; "canOutsideClickClose": { "alias": "canOutsideClickClose"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "confirmed": "confirmed"; "cancelled": "cancelled"; }, never, ["*"], true, never>;
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
/**
|
|
68
68
|
* Opens a confirmation from code and resolves to the user's answer.
|
|
69
69
|
*
|
|
70
70
|
* ```ts
|
|
71
|
-
* if (await this.alerts.confirm({ message: 'Delete this?',
|
|
71
|
+
* if (await this.alerts.confirm({ message: 'Delete this?', color: 'error', confirmText: 'Delete', cancelText: 'Cancel' })) {
|
|
72
72
|
* this.remove();
|
|
73
73
|
* }
|
|
74
74
|
* ```
|
|
@@ -86,5 +86,5 @@ declare class XuiAlertService {
|
|
|
86
86
|
|
|
87
87
|
declare const XuiAlertImports: readonly [typeof XuiAlert];
|
|
88
88
|
|
|
89
|
-
export {
|
|
90
|
-
export type {
|
|
89
|
+
export { XUI_ALERT_COLOR_ICON, XUI_ALERT_COLOR_ICON_CLASS, XUI_ALERT_OPTIONS, XuiAlert, XuiAlertImports, XuiAlertService, alertConfirmColor };
|
|
90
|
+
export type { XuiAlertColor, XuiAlertOptions };
|