@xui/date-range-picker 2.0.0-alpha.11 → 2.0.0-alpha.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1,89 +1,103 @@
|
|
|
1
|
-
<
|
|
2
|
-
|
|
1
|
+
<h1 align="center">xUI</h1>
|
|
2
|
+
|
|
3
|
+
<p align="center">
|
|
4
|
+
<strong>90 Angular components, one npm package each, themed from a single token layer.</strong>
|
|
5
|
+
</p>
|
|
6
|
+
|
|
7
|
+
<p align="center">
|
|
8
|
+
<a href="https://xuijs.org">Documentation</a> ·
|
|
9
|
+
<a href="https://develop--67d2b4c756077a325913e5d9.chromatic.com/?globals=theme:dark">Storybook</a> ·
|
|
10
|
+
<a href="https://stackblitz.com/fork/xui">StackBlitz</a> ·
|
|
11
|
+
<a href="#components">Components</a>
|
|
12
|
+
</p>
|
|
13
|
+
|
|
14
|
+
<p align="center">
|
|
15
|
+
<a href="https://github.com/rikarin/xui/actions/workflows/release.yml"><img src="https://github.com/rikarin/xui/actions/workflows/release.yml/badge.svg?branch=master" alt="Build status" /></a>
|
|
16
|
+
<a href="https://www.npmjs.com/package/@xui/core"><img src="https://img.shields.io/npm/v/%40xui/core.svg" alt="npm version" /></a>
|
|
17
|
+
<a href="https://www.npmjs.com/org/xui"><img src="https://img.shields.io/npm/dm/%40xui/core.svg" alt="Downloads" /></a>
|
|
18
|
+
<a href="https://app.netlify.com/sites/xui/deploys"><img src="https://api.netlify.com/api/v1/badges/fa0cfd14-97df-47fa-8a7c-152e6d4cfda2/deploy-status" alt="Netlify status" /></a>
|
|
3
19
|
</p>
|
|
4
20
|
|
|
5
21
|
---
|
|
6
22
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
[](https://app.netlify.com/sites/xui/deploys)
|
|
23
|
+
xUI is an Angular 22 component library styled with Tailwind CSS 4. You compose it from directives and
|
|
24
|
+
standalone components rather than configuring one monolith, and the set goes well past the
|
|
25
|
+
primitives: data tables, dock managers, omnibars, node graphs and date ranges are packages here, not
|
|
26
|
+
things you are left to build.
|
|
12
27
|
|
|
13
|
-
|
|
28
|
+
```ts
|
|
29
|
+
import { XuiButtonImports } from '@xui/button';
|
|
30
|
+
|
|
31
|
+
@Component({
|
|
32
|
+
imports: [XuiButtonImports],
|
|
33
|
+
template: `<button xuiButton color="primary">Save changes</button>`
|
|
34
|
+
})
|
|
35
|
+
export class Example {}
|
|
36
|
+
```
|
|
14
37
|
|
|
15
38
|
## Features
|
|
16
39
|
|
|
17
|
-
- **
|
|
18
|
-
|
|
19
|
-
- **
|
|
20
|
-
|
|
21
|
-
- **
|
|
22
|
-
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
-
|
|
28
|
-
|
|
29
|
-
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
| Spinner | [](https://www.npmjs.com/package/%40xui/spinner)<br />[](https://www.npmjs.com/package/%40xui/spinner)<br />[](https://bundlephobia.com/result?p=%40xui/spinner) | Spinner component |
|
|
53
|
-
| Status | [](https://www.npmjs.com/package/%40xui/status)<br />[](https://www.npmjs.com/package/%40xui/status)<br />[](https://bundlephobia.com/result?p=%40xui/status) | Status component |
|
|
54
|
-
| Table | [](https://www.npmjs.com/package/%40xui/table)<br />[](https://www.npmjs.com/package/%40xui/table)<br />[](https://bundlephobia.com/result?p=%40xui/table) | Table component |
|
|
55
|
-
|
|
56
|
-
## Installation
|
|
57
|
-
|
|
58
|
-
Install package with **PNPM**
|
|
40
|
+
- **One package per component.** Install `@xui/button` and you ship a button, not a library. Each
|
|
41
|
+
package exports an imports barrel for standalone components.
|
|
42
|
+
- **Signals throughout.** Signal inputs, `OnPush` and zoneless change detection; no `zone.js`
|
|
43
|
+
required.
|
|
44
|
+
- **Themed by tokens, not overrides.** Components style themselves with `bg-surface`,
|
|
45
|
+
`text-foreground-muted`, `border-error-muted`. Light and dark both work without a single `dark:`
|
|
46
|
+
class, and re-colouring an intent is one CSS variable.
|
|
47
|
+
- **Typed variants.** Every visual axis is a typed input backed by
|
|
48
|
+
[CVA](https://cva.style), and the `class` input merges through `tailwind-merge` — your utility
|
|
49
|
+
wins instead of fighting the component's.
|
|
50
|
+
- **Angular CDK underneath.** Overlays, focus traps, roving tabindex, typeahead, drag and drop and
|
|
51
|
+
bidi come from `@angular/cdk`, so keyboard behaviour and RTL are not reimplemented per component.
|
|
52
|
+
- **Built for coding agents.** An MCP server and an agent skill expose the real API of every
|
|
53
|
+
package — see [AI coding agents](#ai-coding-agents).
|
|
54
|
+
|
|
55
|
+
## Requirements
|
|
56
|
+
|
|
57
|
+
| | |
|
|
58
|
+
| ----------------------- | --- |
|
|
59
|
+
| Angular | 22 |
|
|
60
|
+
| Tailwind CSS | 4 |
|
|
61
|
+
| Node (development only) | 24 |
|
|
62
|
+
|
|
63
|
+
## Getting started
|
|
64
|
+
|
|
65
|
+
```bash
|
|
66
|
+
ng add @xui/core
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
That installs the core package and wires your global stylesheet: the theme import, the CDK overlay
|
|
70
|
+
stylesheet, and a `@source` glob pointing at the published packages. It is idempotent, so running it
|
|
71
|
+
again only adds what is missing. Use `nx add @xui/core` in an Nx workspace, and `--skip-overlay` if
|
|
72
|
+
you will not use dialogs, drawers, popovers, tooltips, menus or toasts.
|
|
73
|
+
|
|
74
|
+
Then add the components you need:
|
|
59
75
|
|
|
60
76
|
```bash
|
|
61
|
-
pnpm
|
|
77
|
+
pnpm add @xui/button @xui/dialog @xui/icon
|
|
62
78
|
```
|
|
63
79
|
|
|
64
80
|
## Theming
|
|
65
81
|
|
|
66
|
-
|
|
67
|
-
`text-foreground-muted`, `border-error-muted` — that resolve through the token layer shipped with
|
|
68
|
-
`@xui/core`. Import it once, after Tailwind:
|
|
82
|
+
To wire the styles by hand, import the token layer once after Tailwind:
|
|
69
83
|
|
|
70
84
|
```css
|
|
71
85
|
@import 'tailwindcss';
|
|
72
86
|
@import '@xui/core/styles/theme.css';
|
|
73
87
|
|
|
74
|
-
/* Only needed
|
|
75
|
-
|
|
88
|
+
/* Only needed for an overlay surface — popover, tooltip, menu, dialog, drawer
|
|
89
|
+
or toast. Without it, overlays render in the document flow. */
|
|
76
90
|
@import '@angular/cdk/overlay-prebuilt.css';
|
|
77
91
|
|
|
78
|
-
/*
|
|
92
|
+
/* Tailwind only emits utilities it can see, and it cannot see node_modules by default. */
|
|
79
93
|
@source '../node_modules/@xui';
|
|
80
94
|
```
|
|
81
95
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
96
|
+
Put `.dark` (or `[data-theme='dark']`) on `<html>` to switch themes; with neither present the theme
|
|
97
|
+
follows `prefers-color-scheme`. Both selectors work on any element, so a subtree can render in the
|
|
98
|
+
opposite theme.
|
|
85
99
|
|
|
86
|
-
Re-theme by overriding tokens after the import
|
|
100
|
+
Re-theme by overriding tokens after the import. The `darker` / `lighter` / `subtle` / `muted` /
|
|
87
101
|
`emphasis` steps of each intent are derived, so one declaration re-colours the whole ramp:
|
|
88
102
|
|
|
89
103
|
```css
|
|
@@ -93,37 +107,48 @@ Re-theme by overriding tokens after the import — the `darker` / `lighter` / `s
|
|
|
93
107
|
}
|
|
94
108
|
```
|
|
95
109
|
|
|
96
|
-
|
|
97
|
-
|
|
110
|
+
Controls share one density scale — 24 / 30 / 40px for `sm` / default / `lg` — so a button, an input
|
|
111
|
+
and a date field on the same row line up. Override `--control-height-md` to re-tune the library.
|
|
98
112
|
|
|
99
|
-
|
|
113
|
+
The full token reference, rendered in both themes, is the **Design tokens** page in Storybook.
|
|
100
114
|
|
|
101
|
-
|
|
115
|
+
## Components
|
|
102
116
|
|
|
103
|
-
|
|
117
|
+
<details>
|
|
118
|
+
<summary><strong>All 90 packages</strong>, grouped as they appear in Storybook</summary>
|
|
104
119
|
|
|
105
|
-
|
|
120
|
+
<br />
|
|
106
121
|
|
|
107
|
-
|
|
122
|
+
**Foundations** — [`@xui/icon`](https://www.npmjs.com/package/@xui/icon) · [`@xui/link`](https://www.npmjs.com/package/@xui/link) · [`@xui/text`](https://www.npmjs.com/package/@xui/text)
|
|
108
123
|
|
|
109
|
-
|
|
110
|
-
pnpm start
|
|
111
|
-
```
|
|
124
|
+
**Actions** — [`@xui/button`](https://www.npmjs.com/package/@xui/button) · [`@xui/button-group`](https://www.npmjs.com/package/@xui/button-group) · [`@xui/hotkeys`](https://www.npmjs.com/package/@xui/hotkeys)
|
|
112
125
|
|
|
113
|
-
|
|
126
|
+
**Forms** — [`@xui/cascader`](https://www.npmjs.com/package/@xui/cascader) · [`@xui/checkbox`](https://www.npmjs.com/package/@xui/checkbox) · [`@xui/color-picker`](https://www.npmjs.com/package/@xui/color-picker) · [`@xui/control-card`](https://www.npmjs.com/package/@xui/control-card) · [`@xui/control-group`](https://www.npmjs.com/package/@xui/control-group) · [`@xui/editable-text`](https://www.npmjs.com/package/@xui/editable-text) · [`@xui/file-input`](https://www.npmjs.com/package/@xui/file-input) · [`@xui/form-field`](https://www.npmjs.com/package/@xui/form-field) · [`@xui/html-select`](https://www.npmjs.com/package/@xui/html-select) · [`@xui/input`](https://www.npmjs.com/package/@xui/input) · [`@xui/input-otp`](https://www.npmjs.com/package/@xui/input-otp) · [`@xui/label`](https://www.npmjs.com/package/@xui/label) · [`@xui/multi-select`](https://www.npmjs.com/package/@xui/multi-select) · [`@xui/numeric-input`](https://www.npmjs.com/package/@xui/numeric-input) · [`@xui/radio`](https://www.npmjs.com/package/@xui/radio) · [`@xui/rate`](https://www.npmjs.com/package/@xui/rate) · [`@xui/rich-text-editor`](https://www.npmjs.com/package/@xui/rich-text-editor) · [`@xui/segmented-control`](https://www.npmjs.com/package/@xui/segmented-control) · [`@xui/select`](https://www.npmjs.com/package/@xui/select) · [`@xui/slider`](https://www.npmjs.com/package/@xui/slider) · [`@xui/suggest`](https://www.npmjs.com/package/@xui/suggest) · [`@xui/switch`](https://www.npmjs.com/package/@xui/switch) · [`@xui/tag-input`](https://www.npmjs.com/package/@xui/tag-input) · [`@xui/textarea`](https://www.npmjs.com/package/@xui/textarea) · [`@xui/transfer`](https://www.npmjs.com/package/@xui/transfer) · [`@xui/tree-select`](https://www.npmjs.com/package/@xui/tree-select) · [`@xui/upload`](https://www.npmjs.com/package/@xui/upload)
|
|
114
127
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
128
|
+
**Date & time** — [`@xui/date-input`](https://www.npmjs.com/package/@xui/date-input) · [`@xui/date-picker`](https://www.npmjs.com/package/@xui/date-picker) · [`@xui/date-range-input`](https://www.npmjs.com/package/@xui/date-range-input) · [`@xui/date-range-picker`](https://www.npmjs.com/package/@xui/date-range-picker) · [`@xui/time-picker`](https://www.npmjs.com/package/@xui/time-picker) · [`@xui/timezone-select`](https://www.npmjs.com/package/@xui/timezone-select)
|
|
129
|
+
|
|
130
|
+
**Data display** — [`@xui/avatar`](https://www.npmjs.com/package/@xui/avatar) · [`@xui/badge`](https://www.npmjs.com/package/@xui/badge) · [`@xui/card`](https://www.npmjs.com/package/@xui/card) · [`@xui/card-list`](https://www.npmjs.com/package/@xui/card-list) · [`@xui/carousel`](https://www.npmjs.com/package/@xui/carousel) · [`@xui/data-table`](https://www.npmjs.com/package/@xui/data-table) · [`@xui/descriptions`](https://www.npmjs.com/package/@xui/descriptions) · [`@xui/entity-title`](https://www.npmjs.com/package/@xui/entity-title) · [`@xui/kbd`](https://www.npmjs.com/package/@xui/kbd) · [`@xui/statistic`](https://www.npmjs.com/package/@xui/statistic) · [`@xui/status`](https://www.npmjs.com/package/@xui/status) · [`@xui/table`](https://www.npmjs.com/package/@xui/table) · [`@xui/tag`](https://www.npmjs.com/package/@xui/tag) · [`@xui/timeline`](https://www.npmjs.com/package/@xui/timeline) · [`@xui/tree`](https://www.npmjs.com/package/@xui/tree)
|
|
131
|
+
|
|
132
|
+
**Navigation** — [`@xui/breadcrumb`](https://www.npmjs.com/package/@xui/breadcrumb) · [`@xui/menubar`](https://www.npmjs.com/package/@xui/menubar) · [`@xui/navbar`](https://www.npmjs.com/package/@xui/navbar) · [`@xui/navigation-menu`](https://www.npmjs.com/package/@xui/navigation-menu) · [`@xui/pagination`](https://www.npmjs.com/package/@xui/pagination) · [`@xui/panel-stack`](https://www.npmjs.com/package/@xui/panel-stack) · [`@xui/steps`](https://www.npmjs.com/package/@xui/steps) · [`@xui/tabs`](https://www.npmjs.com/package/@xui/tabs)
|
|
133
|
+
|
|
134
|
+
**Overlays** — [`@xui/alert`](https://www.npmjs.com/package/@xui/alert) · [`@xui/alert-dialog`](https://www.npmjs.com/package/@xui/alert-dialog) · [`@xui/context-menu`](https://www.npmjs.com/package/@xui/context-menu) · [`@xui/dialog`](https://www.npmjs.com/package/@xui/dialog) · [`@xui/drawer`](https://www.npmjs.com/package/@xui/drawer) · [`@xui/menu`](https://www.npmjs.com/package/@xui/menu) · [`@xui/omnibar`](https://www.npmjs.com/package/@xui/omnibar) · [`@xui/popover`](https://www.npmjs.com/package/@xui/popover) · [`@xui/toast`](https://www.npmjs.com/package/@xui/toast) · [`@xui/tooltip`](https://www.npmjs.com/package/@xui/tooltip)
|
|
135
|
+
|
|
136
|
+
**Feedback** — [`@xui/callout`](https://www.npmjs.com/package/@xui/callout) · [`@xui/non-ideal-state`](https://www.npmjs.com/package/@xui/non-ideal-state) · [`@xui/progress-bar`](https://www.npmjs.com/package/@xui/progress-bar) · [`@xui/result`](https://www.npmjs.com/package/@xui/result) · [`@xui/skeleton`](https://www.npmjs.com/package/@xui/skeleton) · [`@xui/spinner`](https://www.npmjs.com/package/@xui/spinner)
|
|
137
|
+
|
|
138
|
+
**Layout** — [`@xui/accordion`](https://www.npmjs.com/package/@xui/accordion) · [`@xui/aspect-ratio`](https://www.npmjs.com/package/@xui/aspect-ratio) · [`@xui/collapse`](https://www.npmjs.com/package/@xui/collapse) · [`@xui/divider`](https://www.npmjs.com/package/@xui/divider) · [`@xui/dock-manager`](https://www.npmjs.com/package/@xui/dock-manager) · [`@xui/overflow-list`](https://www.npmjs.com/package/@xui/overflow-list) · [`@xui/scroll-area`](https://www.npmjs.com/package/@xui/scroll-area) · [`@xui/section`](https://www.npmjs.com/package/@xui/section) · [`@xui/splitter`](https://www.npmjs.com/package/@xui/splitter)
|
|
139
|
+
|
|
140
|
+
**Visualisation** — [`@xui/echarts`](https://www.npmjs.com/package/@xui/echarts) · [`@xui/konva`](https://www.npmjs.com/package/@xui/konva) · [`@xui/node-graph`](https://www.npmjs.com/package/@xui/node-graph)
|
|
141
|
+
|
|
142
|
+
</details>
|
|
118
143
|
|
|
119
144
|
## AI coding agents
|
|
120
145
|
|
|
121
146
|
Two pieces of tooling teach coding agents how to build with xUI.
|
|
122
147
|
|
|
123
|
-
**MCP server** — [`@xui/mcp`](
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
148
|
+
**MCP server** — [`@xui/mcp`](libs/mcp/README.md) exposes every package's real API (selectors, signal
|
|
149
|
+
inputs, variant axes, outputs), the design tokens, the docs and the Storybook examples as MCP tools.
|
|
150
|
+
It extracts them from the library sources, so every package is covered and the answers match the
|
|
151
|
+
installed version.
|
|
127
152
|
|
|
128
153
|
```json
|
|
129
154
|
{
|
|
@@ -133,85 +158,46 @@ answers match the installed version.
|
|
|
133
158
|
}
|
|
134
159
|
```
|
|
135
160
|
|
|
136
|
-
In this
|
|
137
|
-
once so it exists.
|
|
161
|
+
In this repository `.mcp.json` already points at `dist/libs/mcp/src/server.js` — run
|
|
162
|
+
`pnpm nx build mcp` once so it exists.
|
|
138
163
|
|
|
139
|
-
**Skill** — [`skills/xui`](
|
|
164
|
+
**Skill** — [`skills/xui`](skills/xui/SKILL.md) is the procedural knowledge: the three-layer
|
|
140
165
|
architecture, discovery through the MCP server, composition and styling rules, theming, the
|
|
141
166
|
generators, and the conventions for authoring a package inside the monorepo. `.claude/skills/xui`
|
|
142
167
|
links to it for agents working in this repository.
|
|
143
168
|
|
|
144
|
-
##
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
- [ ] Input OTP
|
|
180
|
-
- [ ] Toggle Group
|
|
181
|
-
|
|
182
|
-
### Additional
|
|
183
|
-
|
|
184
|
-
- [ ] Decagram
|
|
185
|
-
- [ ] Settings
|
|
186
|
-
- [ ] Drawer
|
|
187
|
-
- [ ] Panel Bar
|
|
188
|
-
- [ ] Textarea
|
|
189
|
-
- [ ] Time Picker
|
|
190
|
-
- [ ] Image Upload
|
|
191
|
-
- [ ] Banner
|
|
192
|
-
- [ ] Snack bar
|
|
193
|
-
|
|
194
|
-
## Opinionated "components"
|
|
195
|
-
|
|
196
|
-
- [ ] Graph View (Nodes)
|
|
197
|
-
- [ ] Analysis
|
|
198
|
-
- [ ] Charts (NG Charts?)
|
|
199
|
-
|
|
200
|
-
## CLI
|
|
201
|
-
|
|
202
|
-
Make cli to install the components
|
|
203
|
-
|
|
204
|
-
## TODO
|
|
205
|
-
|
|
206
|
-
- Button
|
|
207
|
-
|
|
208
|
-
- Icon
|
|
209
|
-
- Shine
|
|
210
|
-
|
|
211
|
-
- Breadcrumb
|
|
212
|
-
|
|
213
|
-
- fix styling issues
|
|
214
|
-
- on hover stuff
|
|
215
|
-
- data driven component
|
|
216
|
-
|
|
217
|
-
- adjust generator to generate stories into the apps/storybook
|
|
169
|
+
## Browser support
|
|
170
|
+
|
|
171
|
+
The browsers Angular itself supports — see the
|
|
172
|
+
[Angular browser support policy](https://angular.dev/reference/versions#browser-support).
|
|
173
|
+
|
|
174
|
+
## Development
|
|
175
|
+
|
|
176
|
+
The workspace is [Nx](https://nx.dev) + pnpm.
|
|
177
|
+
|
|
178
|
+
```bash
|
|
179
|
+
pnpm install
|
|
180
|
+
pnpm start # documentation site on :4200
|
|
181
|
+
pnpm storybook # component gallery on :4400
|
|
182
|
+
pnpm nx serve admin # the example admin application
|
|
183
|
+
pnpm test # unit tests
|
|
184
|
+
pnpm nx test-storybook ui-storybook # render every story in headless Chromium
|
|
185
|
+
pnpm build # build every package
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
Commits follow [Conventional Commits](https://www.conventionalcommits.org) and are linted — the
|
|
189
|
+
release is cut from them. See [docs/releasing.md](docs/releasing.md) for how a version is published,
|
|
190
|
+
[apps/ui-storybook/README.md](apps/ui-storybook/README.md) before writing stories, and
|
|
191
|
+
[apps/app/README.md](apps/app/README.md) for the documentation site, whose component pages are
|
|
192
|
+
generated from those same stories, and [apps/admin/README.md](apps/admin/README.md) for the example
|
|
193
|
+
admin application — a full app built from these packages, which is the fastest way to see how they
|
|
194
|
+
fit together.
|
|
195
|
+
|
|
196
|
+
## Contributing
|
|
197
|
+
|
|
198
|
+
Bugs and ideas are welcome in [issues](https://github.com/Rikarin/xui/issues). For a change of any
|
|
199
|
+
size, open an issue first so the API can be agreed before the code exists.
|
|
200
|
+
|
|
201
|
+
## License
|
|
202
|
+
|
|
203
|
+
See [LICENSE](LICENSE).
|
|
@@ -1,24 +1,28 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, model, numberAttribute, booleanAttribute, signal, linkedSignal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
2
|
+
import { inject, ElementRef, input, model, numberAttribute, booleanAttribute, signal, linkedSignal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
3
|
import { provideIcons, NgIcon } from '@ng-icons/core';
|
|
4
4
|
import { matChevronRightRound, matChevronLeftRound } from '@ng-icons/material-icons/round';
|
|
5
5
|
import { xui } from '@xui/core';
|
|
6
6
|
import { weekdayLabels, buildMonthGrid, monthYearLabel } from '@xui/core/calendar';
|
|
7
|
-
import {
|
|
7
|
+
import { injectXDateAdapter } from '@xui/core/date-time';
|
|
8
|
+
import { createXValueAccessor, provideXValueAccessor } from '@xui/core/forms';
|
|
8
9
|
import { XuiIcon } from '@xui/icon';
|
|
9
10
|
|
|
10
11
|
/**
|
|
11
12
|
* A multi-month calendar for choosing a date range. The first click sets the
|
|
12
13
|
* start, the second the end (hovering previews the span); clicking again starts a
|
|
13
|
-
* new range. `[(
|
|
14
|
+
* new range. `[(value)]` two-way binding; `T` is the active `DateAdapter`'s type.
|
|
15
|
+
* It is a full `ControlValueAccessor`, so `ngModel`/`formControl` bind to it
|
|
16
|
+
* directly.
|
|
14
17
|
*/
|
|
15
18
|
class XuiDateRangePicker {
|
|
16
|
-
adapter =
|
|
19
|
+
adapter = injectXDateAdapter();
|
|
20
|
+
host = inject(ElementRef);
|
|
17
21
|
class = input('', /* @ts-ignore */
|
|
18
22
|
...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
19
|
-
/** The chosen range. Two-way bindable with `[(
|
|
20
|
-
|
|
21
|
-
...(ngDevMode ? [{ debugName: "
|
|
23
|
+
/** The chosen range. Two-way bindable with `[(value)]`. */
|
|
24
|
+
value = model({ start: null, end: null }, /* @ts-ignore */
|
|
25
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
22
26
|
min = input(null, /* @ts-ignore */
|
|
23
27
|
...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
|
|
24
28
|
max = input(null, /* @ts-ignore */
|
|
@@ -32,10 +36,16 @@ class XuiDateRangePicker {
|
|
|
32
36
|
months = input(2, { ...(ngDevMode ? { debugName: "months" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
33
37
|
/** Allow the start and end to be the same day. */
|
|
34
38
|
allowSingleDayRange = input(false, { ...(ngDevMode ? { debugName: "allowSingleDayRange" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
39
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
40
|
+
cva = createXValueAccessor({
|
|
41
|
+
onWrite: range => this.value.set(range ?? { start: null, end: null }),
|
|
42
|
+
disabled: this.disabled
|
|
43
|
+
});
|
|
44
|
+
isDisabled = this.cva.disabled;
|
|
35
45
|
hover = signal(null, /* @ts-ignore */
|
|
36
46
|
...(ngDevMode ? [{ debugName: "hover" }] : /* istanbul ignore next */ []));
|
|
37
47
|
// The left-most month on screen, seeded from the range start (or today).
|
|
38
|
-
viewDate = linkedSignal({ ...(ngDevMode ? { debugName: "viewDate" } : /* istanbul ignore next */ {}), source: this.
|
|
48
|
+
viewDate = linkedSignal({ ...(ngDevMode ? { debugName: "viewDate" } : /* istanbul ignore next */ {}), source: this.value,
|
|
39
49
|
computation: (range, previous) => range.start ?? previous?.value ?? this.adapter.now() });
|
|
40
50
|
monthOffsets = computed(() => Array.from({ length: Math.max(1, this.months()) }, (_, i) => i), /* @ts-ignore */
|
|
41
51
|
...(ngDevMode ? [{ debugName: "monthOffsets" }] : /* istanbul ignore next */ []));
|
|
@@ -48,7 +58,7 @@ class XuiDateRangePicker {
|
|
|
48
58
|
firstDayOfWeek: this.firstDayOfWeek()
|
|
49
59
|
})), /* @ts-ignore */
|
|
50
60
|
...(ngDevMode ? [{ debugName: "grids" }] : /* istanbul ignore next */ []));
|
|
51
|
-
computedClass = computed(() => xui('bg-surface-raised border-border inline-block rounded-lg border p-3', this.class()), /* @ts-ignore */
|
|
61
|
+
computedClass = computed(() => xui('bg-surface-raised border-border inline-block rounded-lg border p-3', this.isDisabled() && 'opacity-50', this.class()), /* @ts-ignore */
|
|
52
62
|
...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
|
|
53
63
|
navClass = computed(() => xui('text-foreground-muted hover:bg-surface-inset hover:text-foreground flex size-7 items-center justify-center rounded'), /* @ts-ignore */
|
|
54
64
|
...(ngDevMode ? [{ debugName: "navClass" }] : /* istanbul ignore next */ []));
|
|
@@ -56,19 +66,19 @@ class XuiDateRangePicker {
|
|
|
56
66
|
return monthYearLabel(this.adapter, this.adapter.add(this.viewDate(), { months: offset }), this.locale());
|
|
57
67
|
}
|
|
58
68
|
isEndpoint(date) {
|
|
59
|
-
const { start, end } = this.
|
|
69
|
+
const { start, end } = this.value();
|
|
60
70
|
return (start != null && this.adapter.isSameDay(date, start)) || (end != null && this.adapter.isSameDay(date, end));
|
|
61
71
|
}
|
|
62
72
|
/** The provisional end while only a start is chosen (uses the hovered day). */
|
|
63
73
|
effectiveEnd() {
|
|
64
|
-
const { start, end } = this.
|
|
74
|
+
const { start, end } = this.value();
|
|
65
75
|
if (end != null) {
|
|
66
76
|
return end;
|
|
67
77
|
}
|
|
68
78
|
return start != null ? this.hover() : null;
|
|
69
79
|
}
|
|
70
80
|
inRange(date) {
|
|
71
|
-
const { start } = this.
|
|
81
|
+
const { start } = this.value();
|
|
72
82
|
const end = this.effectiveEnd();
|
|
73
83
|
if (start == null || end == null) {
|
|
74
84
|
return false;
|
|
@@ -82,13 +92,16 @@ class XuiDateRangePicker {
|
|
|
82
92
|
return xui('p-0 text-center', this.inRange(day.date) && !this.isEndpoint(day.date) && 'bg-primary/10');
|
|
83
93
|
}
|
|
84
94
|
dayClass(day) {
|
|
85
|
-
return xui('flex size-8 items-center justify-center rounded-full text-sm transition-colors',
|
|
95
|
+
return xui('flex size-8 items-center justify-center rounded-full text-sm transition-colors', day.inCurrentMonth ? 'text-foreground' : 'text-foreground-subtle', !day.disabled && 'hover:bg-surface-inset cursor-pointer', day.disabled && 'cursor-not-allowed opacity-40', day.isToday && !this.isEndpoint(day.date) && 'ring-border-strong ring-1', this.isEndpoint(day.date) && 'bg-primary text-primary-foreground hover:bg-primary');
|
|
86
96
|
}
|
|
87
97
|
shiftMonth(delta) {
|
|
88
98
|
this.viewDate.set(this.adapter.add(this.viewDate(), { months: delta }));
|
|
89
99
|
}
|
|
90
100
|
onClick(date) {
|
|
91
|
-
|
|
101
|
+
if (this.isDisabled()) {
|
|
102
|
+
return;
|
|
103
|
+
}
|
|
104
|
+
const { start, end } = this.value();
|
|
92
105
|
// Start a fresh range if there's no start, both ends are set, or the click is
|
|
93
106
|
// before the current start.
|
|
94
107
|
if (start == null || end != null || this.adapter.isBefore(date, start)) {
|
|
@@ -102,17 +115,35 @@ class XuiDateRangePicker {
|
|
|
102
115
|
this.commit({ start, end: date });
|
|
103
116
|
}
|
|
104
117
|
commit(range) {
|
|
105
|
-
// `model.set` emits `
|
|
106
|
-
this.
|
|
118
|
+
// `model.set` emits `valueChange` for `[(value)]` / `(valueChange)` consumers.
|
|
119
|
+
this.value.set(range);
|
|
120
|
+
this.cva.notifyChange(range);
|
|
121
|
+
}
|
|
122
|
+
/** Touched fires when focus leaves the calendar, not while moving inside it. */
|
|
123
|
+
onFocusOut(event) {
|
|
124
|
+
const next = event.relatedTarget;
|
|
125
|
+
if (!next || !this.host.nativeElement.contains(next)) {
|
|
126
|
+
this.cva.markTouched();
|
|
127
|
+
}
|
|
107
128
|
}
|
|
129
|
+
writeValue = this.cva.writeValue;
|
|
130
|
+
registerOnChange = this.cva.registerOnChange;
|
|
131
|
+
registerOnTouched = this.cva.registerOnTouched;
|
|
132
|
+
setDisabledState = this.cva.setDisabledState;
|
|
108
133
|
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiDateRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
109
|
-
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: XuiDateRangePicker, isStandalone: true, selector: "xui-date-range-picker", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null },
|
|
134
|
+
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: XuiDateRangePicker, isStandalone: true, selector: "xui-date-range-picker", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, months: { classPropertyName: "months", publicName: "months", isSignal: true, isRequired: false, transformFunction: null }, allowSingleDayRange: { classPropertyName: "allowSingleDayRange", publicName: "allowSingleDayRange", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "focusout": "onFocusOut($event)" }, properties: { "class": "computedClass()" } }, providers: [provideXValueAccessor((() => XuiDateRangePicker))], ngImport: i0, template: `
|
|
110
135
|
<div class="flex gap-6">
|
|
111
136
|
@for (offset of monthOffsets(); track offset) {
|
|
112
137
|
<div>
|
|
113
138
|
<div class="mb-2 flex items-center justify-between">
|
|
114
139
|
@if (offset === 0) {
|
|
115
|
-
<button
|
|
140
|
+
<button
|
|
141
|
+
type="button"
|
|
142
|
+
[class]="navClass()"
|
|
143
|
+
aria-label="Previous month"
|
|
144
|
+
[disabled]="isDisabled()"
|
|
145
|
+
(click)="shiftMonth(-1)"
|
|
146
|
+
>
|
|
116
147
|
<ng-icon xui name="matChevronLeftRound" size="sm" />
|
|
117
148
|
</button>
|
|
118
149
|
} @else {
|
|
@@ -120,7 +151,13 @@ class XuiDateRangePicker {
|
|
|
120
151
|
}
|
|
121
152
|
<div class="text-foreground text-sm font-semibold">{{ monthLabel(offset) }}</div>
|
|
122
153
|
@if (offset === monthOffsets().length - 1) {
|
|
123
|
-
<button
|
|
154
|
+
<button
|
|
155
|
+
type="button"
|
|
156
|
+
[class]="navClass()"
|
|
157
|
+
aria-label="Next month"
|
|
158
|
+
[disabled]="isDisabled()"
|
|
159
|
+
(click)="shiftMonth(1)"
|
|
160
|
+
>
|
|
124
161
|
<ng-icon xui name="matChevronRightRound" size="sm" />
|
|
125
162
|
</button>
|
|
126
163
|
} @else {
|
|
@@ -145,7 +182,7 @@ class XuiDateRangePicker {
|
|
|
145
182
|
<button
|
|
146
183
|
type="button"
|
|
147
184
|
[class]="dayClass(day)"
|
|
148
|
-
[disabled]="day.disabled"
|
|
185
|
+
[disabled]="day.disabled || isDisabled()"
|
|
149
186
|
(click)="onClick(day.date)"
|
|
150
187
|
(mouseenter)="hover.set(day.date)"
|
|
151
188
|
>
|
|
@@ -160,20 +197,27 @@ class XuiDateRangePicker {
|
|
|
160
197
|
</div>
|
|
161
198
|
}
|
|
162
199
|
</div>
|
|
163
|
-
`, 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", "
|
|
200
|
+
`, 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"] }], viewProviders: [provideIcons({ matChevronLeftRound, matChevronRightRound })], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
164
201
|
}
|
|
165
202
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiDateRangePicker, decorators: [{
|
|
166
203
|
type: Component,
|
|
167
204
|
args: [{
|
|
168
205
|
selector: 'xui-date-range-picker',
|
|
169
206
|
imports: [NgIcon, XuiIcon],
|
|
207
|
+
providers: [provideXValueAccessor((() => XuiDateRangePicker))],
|
|
170
208
|
template: `
|
|
171
209
|
<div class="flex gap-6">
|
|
172
210
|
@for (offset of monthOffsets(); track offset) {
|
|
173
211
|
<div>
|
|
174
212
|
<div class="mb-2 flex items-center justify-between">
|
|
175
213
|
@if (offset === 0) {
|
|
176
|
-
<button
|
|
214
|
+
<button
|
|
215
|
+
type="button"
|
|
216
|
+
[class]="navClass()"
|
|
217
|
+
aria-label="Previous month"
|
|
218
|
+
[disabled]="isDisabled()"
|
|
219
|
+
(click)="shiftMonth(-1)"
|
|
220
|
+
>
|
|
177
221
|
<ng-icon xui name="matChevronLeftRound" size="sm" />
|
|
178
222
|
</button>
|
|
179
223
|
} @else {
|
|
@@ -181,7 +225,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
181
225
|
}
|
|
182
226
|
<div class="text-foreground text-sm font-semibold">{{ monthLabel(offset) }}</div>
|
|
183
227
|
@if (offset === monthOffsets().length - 1) {
|
|
184
|
-
<button
|
|
228
|
+
<button
|
|
229
|
+
type="button"
|
|
230
|
+
[class]="navClass()"
|
|
231
|
+
aria-label="Next month"
|
|
232
|
+
[disabled]="isDisabled()"
|
|
233
|
+
(click)="shiftMonth(1)"
|
|
234
|
+
>
|
|
185
235
|
<ng-icon xui name="matChevronRightRound" size="sm" />
|
|
186
236
|
</button>
|
|
187
237
|
} @else {
|
|
@@ -206,7 +256,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
206
256
|
<button
|
|
207
257
|
type="button"
|
|
208
258
|
[class]="dayClass(day)"
|
|
209
|
-
[disabled]="day.disabled"
|
|
259
|
+
[disabled]="day.disabled || isDisabled()"
|
|
210
260
|
(click)="onClick(day.date)"
|
|
211
261
|
(mouseenter)="hover.set(day.date)"
|
|
212
262
|
>
|
|
@@ -223,13 +273,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
223
273
|
</div>
|
|
224
274
|
`,
|
|
225
275
|
host: {
|
|
226
|
-
'[class]': 'computedClass()'
|
|
276
|
+
'[class]': 'computedClass()',
|
|
277
|
+
'(focusout)': 'onFocusOut($event)'
|
|
227
278
|
},
|
|
228
279
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
229
280
|
encapsulation: ViewEncapsulation.None,
|
|
230
281
|
viewProviders: [provideIcons({ matChevronLeftRound, matChevronRightRound })]
|
|
231
282
|
}]
|
|
232
|
-
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }],
|
|
283
|
+
}], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], months: [{ type: i0.Input, args: [{ isSignal: true, alias: "months", required: false }] }], allowSingleDayRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowSingleDayRange", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
233
284
|
|
|
234
285
|
const XuiDateRangePickerImports = [XuiDateRangePicker];
|
|
235
286
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"xui-date-range-picker.mjs","sources":["../../../../../../libs/ui/date-range-picker/xui/src/lib/date-range-picker.ts","../../../../../../libs/ui/date-range-picker/xui/src/index.ts","../../../../../../libs/ui/date-range-picker/xui/src/xui-date-range-picker.ts"],"sourcesContent":["import { BooleanInput, NumberInput } from '@angular/cdk/coercion';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n input,\n linkedSignal,\n model,\n numberAttribute,\n signal,\n ViewEncapsulation\n} from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { matChevronLeftRound, matChevronRightRound } from '@ng-icons/material-icons/round';\nimport { xui } from '@xui/core';\nimport { buildMonthGrid, type CalendarDay, monthYearLabel, weekdayLabels } from '@xui/core/calendar';\nimport { injectDateAdapter, type XDateAdapter } from '@xui/core/date-time';\nimport { XuiIcon } from '@xui/icon';\nimport type { ClassValue } from 'clsx';\n\n/** A `[start, end]` date range; either end may be `null` while selecting. */\nexport interface XuiDateRange<T> {\n start: T | null;\n end: T | null;\n}\n\n/**\n * A multi-month calendar for choosing a date range. The first click sets the\n * start, the second the end (hovering previews the span); clicking again starts a\n * new range. `[(range)]` two-way binding; `T` is the active `DateAdapter`'s type.\n */\n@Component({\n selector: 'xui-date-range-picker',\n imports: [NgIcon, XuiIcon],\n template: `\n <div class=\"flex gap-6\">\n @for (offset of monthOffsets(); track offset) {\n <div>\n <div class=\"mb-2 flex items-center justify-between\">\n @if (offset === 0) {\n <button type=\"button\" [class]=\"navClass()\" aria-label=\"Previous month\" (click)=\"shiftMonth(-1)\">\n <ng-icon xui name=\"matChevronLeftRound\" size=\"sm\" />\n </button>\n } @else {\n <span class=\"size-7\"></span>\n }\n <div class=\"text-foreground text-sm font-semibold\">{{ monthLabel(offset) }}</div>\n @if (offset === monthOffsets().length - 1) {\n <button type=\"button\" [class]=\"navClass()\" aria-label=\"Next month\" (click)=\"shiftMonth(1)\">\n <ng-icon xui name=\"matChevronRightRound\" size=\"sm\" />\n </button>\n } @else {\n <span class=\"size-7\"></span>\n }\n </div>\n\n <table role=\"grid\" class=\"border-collapse\">\n <thead>\n <tr>\n @for (label of weekdays(); track $index) {\n <th class=\"text-foreground-muted pb-1 text-center text-xs font-medium\">{{ label }}</th>\n }\n </tr>\n </thead>\n <tbody>\n @for (week of grids()[offset]; track $index) {\n <tr>\n @for (day of week; track $index) {\n <!-- Selection belongs on the gridcell, not the button. -->\n <td [class]=\"cellClass(day)\" [attr.aria-selected]=\"isEndpoint(day.date)\">\n <button\n type=\"button\"\n [class]=\"dayClass(day)\"\n [disabled]=\"day.disabled\"\n (click)=\"onClick(day.date)\"\n (mouseenter)=\"hover.set(day.date)\"\n >\n {{ day.label }}\n </button>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n </div>\n `,\n host: {\n '[class]': 'computedClass()'\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n viewProviders: [provideIcons({ matChevronLeftRound, matChevronRightRound })]\n})\nexport class XuiDateRangePicker<T = Date> {\n private readonly adapter: XDateAdapter<T> = injectDateAdapter<T>();\n\n readonly class = input<ClassValue>('');\n\n /** The chosen range. Two-way bindable with `[(range)]`. */\n readonly range = model<XuiDateRange<T>>({ start: null, end: null });\n\n readonly min = input<T | null>(null);\n readonly max = input<T | null>(null);\n readonly dateFilter = input<((date: T) => boolean) | null>(null);\n readonly firstDayOfWeek = input<number, NumberInput>(0, { transform: numberAttribute });\n readonly locale = input<string | undefined>(undefined);\n\n /** How many contiguous months to show (1 or 2). */\n readonly months = input<number, NumberInput>(2, { transform: numberAttribute });\n\n /** Allow the start and end to be the same day. */\n readonly allowSingleDayRange = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n protected readonly hover = signal<T | null>(null);\n\n // The left-most month on screen, seeded from the range start (or today).\n private readonly viewDate = linkedSignal<XuiDateRange<T>, T>({\n source: this.range,\n computation: (range, previous) => range.start ?? previous?.value ?? this.adapter.now()\n });\n\n protected readonly monthOffsets = computed(() => Array.from({ length: Math.max(1, this.months()) }, (_, i) => i));\n protected readonly weekdays = computed(() => weekdayLabels(this.firstDayOfWeek(), this.locale()));\n\n protected readonly grids = computed(() =>\n this.monthOffsets().map(offset =>\n buildMonthGrid(this.adapter, this.adapter.add(this.viewDate(), { months: offset }), {\n min: this.min(),\n max: this.max(),\n dateFilter: this.dateFilter(),\n firstDayOfWeek: this.firstDayOfWeek()\n })\n )\n );\n\n protected readonly computedClass = computed(() =>\n xui('bg-surface-raised border-border inline-block rounded-lg border p-3', this.class())\n );\n protected readonly navClass = computed(() =>\n xui(\n 'text-foreground-muted hover:bg-surface-inset hover:text-foreground flex size-7 items-center justify-center rounded'\n )\n );\n\n protected monthLabel(offset: number): string {\n return monthYearLabel(this.adapter, this.adapter.add(this.viewDate(), { months: offset }), this.locale());\n }\n\n protected isEndpoint(date: T): boolean {\n const { start, end } = this.range();\n return (start != null && this.adapter.isSameDay(date, start)) || (end != null && this.adapter.isSameDay(date, end));\n }\n\n /** The provisional end while only a start is chosen (uses the hovered day). */\n private effectiveEnd(): T | null {\n const { start, end } = this.range();\n if (end != null) {\n return end;\n }\n return start != null ? this.hover() : null;\n }\n\n private inRange(date: T): boolean {\n const { start } = this.range();\n const end = this.effectiveEnd();\n if (start == null || end == null) {\n return false;\n }\n\n const [lo, hi] = this.adapter.isAfter(start, end) ? [end, start] : [start, end];\n return (\n !this.adapter.isBefore(date, this.adapter.startOfDay(lo)) &&\n !this.adapter.isAfter(date, this.adapter.startOfDay(hi))\n );\n }\n\n protected cellClass(day: CalendarDay<T>): string {\n // A continuous highlight strip behind the days that fall inside the range.\n return xui('p-0 text-center', this.inRange(day.date) && !this.isEndpoint(day.date) && 'bg-primary/10');\n }\n\n protected dayClass(day: CalendarDay<T>): string {\n return xui(\n 'flex size-8 items-center justify-center rounded-full text-sm transition-colors',\n 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus',\n day.inCurrentMonth ? 'text-foreground' : 'text-foreground-subtle',\n !day.disabled && 'hover:bg-surface-inset cursor-pointer',\n day.disabled && 'cursor-not-allowed opacity-40',\n day.isToday && !this.isEndpoint(day.date) && 'ring-border-strong ring-1',\n this.isEndpoint(day.date) && 'bg-primary text-primary-foreground hover:bg-primary'\n );\n }\n\n protected shiftMonth(delta: number): void {\n this.viewDate.set(this.adapter.add(this.viewDate(), { months: delta }));\n }\n\n protected onClick(date: T): void {\n const { start, end } = this.range();\n\n // Start a fresh range if there's no start, both ends are set, or the click is\n // before the current start.\n if (start == null || end != null || this.adapter.isBefore(date, start)) {\n this.commit({ start: date, end: null });\n return;\n }\n\n // Second click: complete the range (guard single-day unless allowed).\n if (this.adapter.isSameDay(date, start) && !this.allowSingleDayRange()) {\n return;\n }\n\n this.commit({ start, end: date });\n }\n\n private commit(range: XuiDateRange<T>): void {\n // `model.set` emits `rangeChange` for `[(range)]` / `(rangeChange)` consumers.\n this.range.set(range);\n }\n}\n","import { XuiDateRangePicker } from './lib/date-range-picker';\n\nexport * from './lib/date-range-picker';\n\nexport const XuiDateRangePickerImports = [XuiDateRangePicker] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;AA2BA;;;;AAIG;MAkEU,kBAAkB,CAAA;IACZ,OAAO,GAAoB,iBAAiB,EAAK;IAEzD,KAAK,GAAG,KAAK,CAAa,EAAE;8EAAC;;IAG7B,KAAK,GAAG,KAAK,CAAkB,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE;8EAAC;IAE1D,GAAG,GAAG,KAAK,CAAW,IAAI;4EAAC;IAC3B,GAAG,GAAG,KAAK,CAAW,IAAI;4EAAC;IAC3B,UAAU,GAAG,KAAK,CAAgC,IAAI;mFAAC;IACvD,cAAc,GAAG,KAAK,CAAsB,CAAC,sFAAI,SAAS,EAAE,eAAe,EAAA,CAAG;IAC9E,MAAM,GAAG,KAAK,CAAqB,SAAS;+EAAC;;IAG7C,MAAM,GAAG,KAAK,CAAsB,CAAC,8EAAI,SAAS,EAAE,eAAe,EAAA,CAAG;;IAGtE,mBAAmB,GAAG,KAAK,CAAwB,KAAK,2FAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;IAEhF,KAAK,GAAG,MAAM,CAAW,IAAI;8EAAC;;AAGhC,IAAA,QAAQ,GAAG,YAAY,CAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,UAAA,EAAA,8BAAA,EAAA,CAAA,EACtC,MAAM,EAAE,IAAI,CAAC,KAAK;QAClB,WAAW,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,KAAK,CAAC,KAAK,IAAI,QAAQ,EAAE,KAAK,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,EAAA,CACtF;AAEiB,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;qFAAC;AAC9F,IAAA,QAAQ,GAAG,QAAQ,CAAC,MAAM,aAAa,CAAC,IAAI,CAAC,cAAc,EAAE,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;iFAAC;AAE9E,IAAA,KAAK,GAAG,QAAQ,CAAC,MAClC,IAAI,CAAC,YAAY,EAAE,CAAC,GAAG,CAAC,MAAM,IAC5B,cAAc,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,EAAE;AAClF,QAAA,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE;AACf,QAAA,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE;AACf,QAAA,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE;AAC7B,QAAA,cAAc,EAAE,IAAI,CAAC,cAAc;AACpC,KAAA,CAAC,CACH;8EACF;AAEkB,IAAA,aAAa,GAAG,QAAQ,CAAC,MAC1C,GAAG,CAAC,oEAAoE,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;sFACxF;IACkB,QAAQ,GAAG,QAAQ,CAAC,MACrC,GAAG,CACD,oHAAoH,CACrH;iFACF;AAES,IAAA,UAAU,CAAC,MAAc,EAAA;AACjC,QAAA,OAAO,cAAc,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;IAC3G;AAEU,IAAA,UAAU,CAAC,IAAO,EAAA;QAC1B,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE;AACnC,QAAA,OAAO,CAAC,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,MAAM,GAAG,IAAI,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IACrH;;IAGQ,YAAY,GAAA;QAClB,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE;AACnC,QAAA,IAAI,GAAG,IAAI,IAAI,EAAE;AACf,YAAA,OAAO,GAAG;QACZ;AACA,QAAA,OAAO,KAAK,IAAI,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE,GAAG,IAAI;IAC5C;AAEQ,IAAA,OAAO,CAAC,IAAO,EAAA;QACrB,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE;AAC9B,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,YAAY,EAAE;QAC/B,IAAI,KAAK,IAAI,IAAI,IAAI,GAAG,IAAI,IAAI,EAAE;AAChC,YAAA,OAAO,KAAK;QACd;AAEA,QAAA,MAAM,CAAC,EAAE,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC;AAC/E,QAAA,QACE,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;AACzD,YAAA,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;IAE5D;AAEU,IAAA,SAAS,CAAC,GAAmB,EAAA;;QAErC,OAAO,GAAG,CAAC,iBAAiB,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,eAAe,CAAC;IACxG;AAEU,IAAA,QAAQ,CAAC,GAAmB,EAAA;QACpC,OAAO,GAAG,CACR,gFAAgF,EAChF,oFAAoF,EACpF,GAAG,CAAC,cAAc,GAAG,iBAAiB,GAAG,wBAAwB,EACjE,CAAC,GAAG,CAAC,QAAQ,IAAI,uCAAuC,EACxD,GAAG,CAAC,QAAQ,IAAI,+BAA+B,EAC/C,GAAG,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,2BAA2B,EACxE,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,qDAAqD,CACnF;IACH;AAEU,IAAA,UAAU,CAAC,KAAa,EAAA;QAChC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;IACzE;AAEU,IAAA,OAAO,CAAC,IAAO,EAAA;QACvB,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE;;;AAInC,QAAA,IAAI,KAAK,IAAI,IAAI,IAAI,GAAG,IAAI,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE;AACtE,YAAA,IAAI,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC;YACvC;QACF;;AAGA,QAAA,IAAI,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,EAAE;YACtE;QACF;QAEA,IAAI,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC;IACnC;AAEQ,IAAA,MAAM,CAAC,KAAsB,EAAA;;AAEnC,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC;IACvB;0HA7HW,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,uBAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,GAAA,EAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,GAAA,EAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,mBAAA,EAAA,EAAA,iBAAA,EAAA,qBAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,aAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,iBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EA9DnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAvDS,MAAM,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,KAAA,EAAA,MAAA,EAAA,aAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,OAAO,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAAA,OAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EA6DV,CAAC,YAAY,CAAC,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,CAAC,CAAC,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAEjE,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAjE9B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,uBAAuB;AACjC,oBAAA,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;AAC1B,oBAAA,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDT,EAAA,CAAA;AACD,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE;AACZ,qBAAA;oBACD,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,aAAa,EAAE,CAAC,YAAY,CAAC,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,CAAC;AAC5E,iBAAA;;;AC5FM,MAAM,yBAAyB,GAAG,CAAC,kBAAkB;;ACJ5D;;AAEG;;;;"}
|
|
1
|
+
{"version":3,"file":"xui-date-range-picker.mjs","sources":["../../../../../../libs/ui/date-range-picker/xui/src/lib/date-range-picker.ts","../../../../../../libs/ui/date-range-picker/xui/src/index.ts","../../../../../../libs/ui/date-range-picker/xui/src/xui-date-range-picker.ts"],"sourcesContent":["import { BooleanInput, NumberInput } from '@angular/cdk/coercion';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n ElementRef,\n inject,\n input,\n linkedSignal,\n model,\n numberAttribute,\n signal,\n ViewEncapsulation\n} from '@angular/core';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { matChevronLeftRound, matChevronRightRound } from '@ng-icons/material-icons/round';\nimport { xui } from '@xui/core';\nimport { buildMonthGrid, monthYearLabel, weekdayLabels, type XCalendarDay } from '@xui/core/calendar';\nimport { injectXDateAdapter, type XDateAdapter } from '@xui/core/date-time';\nimport { createXValueAccessor, provideXValueAccessor } from '@xui/core/forms';\nimport { XuiIcon } from '@xui/icon';\nimport type { ClassValue } from 'clsx';\n\n/** A `[start, end]` date range; either end may be `null` while selecting. */\nexport interface XuiDateRange<T> {\n start: T | null;\n end: T | null;\n}\n\n/**\n * A multi-month calendar for choosing a date range. The first click sets the\n * start, the second the end (hovering previews the span); clicking again starts a\n * new range. `[(value)]` two-way binding; `T` is the active `DateAdapter`'s type.\n * It is a full `ControlValueAccessor`, so `ngModel`/`formControl` bind to it\n * directly.\n */\n@Component({\n selector: 'xui-date-range-picker',\n imports: [NgIcon, XuiIcon],\n providers: [provideXValueAccessor(() => XuiDateRangePicker)],\n template: `\n <div class=\"flex gap-6\">\n @for (offset of monthOffsets(); track offset) {\n <div>\n <div class=\"mb-2 flex items-center justify-between\">\n @if (offset === 0) {\n <button\n type=\"button\"\n [class]=\"navClass()\"\n aria-label=\"Previous month\"\n [disabled]=\"isDisabled()\"\n (click)=\"shiftMonth(-1)\"\n >\n <ng-icon xui name=\"matChevronLeftRound\" size=\"sm\" />\n </button>\n } @else {\n <span class=\"size-7\"></span>\n }\n <div class=\"text-foreground text-sm font-semibold\">{{ monthLabel(offset) }}</div>\n @if (offset === monthOffsets().length - 1) {\n <button\n type=\"button\"\n [class]=\"navClass()\"\n aria-label=\"Next month\"\n [disabled]=\"isDisabled()\"\n (click)=\"shiftMonth(1)\"\n >\n <ng-icon xui name=\"matChevronRightRound\" size=\"sm\" />\n </button>\n } @else {\n <span class=\"size-7\"></span>\n }\n </div>\n\n <table role=\"grid\" class=\"border-collapse\">\n <thead>\n <tr>\n @for (label of weekdays(); track $index) {\n <th class=\"text-foreground-muted pb-1 text-center text-xs font-medium\">{{ label }}</th>\n }\n </tr>\n </thead>\n <tbody>\n @for (week of grids()[offset]; track $index) {\n <tr>\n @for (day of week; track $index) {\n <!-- Selection belongs on the gridcell, not the button. -->\n <td [class]=\"cellClass(day)\" [attr.aria-selected]=\"isEndpoint(day.date)\">\n <button\n type=\"button\"\n [class]=\"dayClass(day)\"\n [disabled]=\"day.disabled || isDisabled()\"\n (click)=\"onClick(day.date)\"\n (mouseenter)=\"hover.set(day.date)\"\n >\n {{ day.label }}\n </button>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n </div>\n `,\n host: {\n '[class]': 'computedClass()',\n '(focusout)': 'onFocusOut($event)'\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n viewProviders: [provideIcons({ matChevronLeftRound, matChevronRightRound })]\n})\nexport class XuiDateRangePicker<T = Date> implements ControlValueAccessor {\n private readonly adapter: XDateAdapter<T> = injectXDateAdapter<T>();\n private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n\n readonly class = input<ClassValue>('');\n\n /** The chosen range. Two-way bindable with `[(value)]`. */\n readonly value = model<XuiDateRange<T>>({ start: null, end: null });\n\n readonly min = input<T | null>(null);\n readonly max = input<T | null>(null);\n readonly dateFilter = input<((date: T) => boolean) | null>(null);\n readonly firstDayOfWeek = input<number, NumberInput>(0, { transform: numberAttribute });\n readonly locale = input<string | undefined>(undefined);\n\n /** How many contiguous months to show (1 or 2). */\n readonly months = input<number, NumberInput>(2, { transform: numberAttribute });\n\n /** Allow the start and end to be the same day. */\n readonly allowSingleDayRange = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n protected readonly cva = createXValueAccessor<XuiDateRange<T> | null>({\n onWrite: range => this.value.set(range ?? { start: null, end: null }),\n disabled: this.disabled\n });\n protected readonly isDisabled = this.cva.disabled;\n\n protected readonly hover = signal<T | null>(null);\n\n // The left-most month on screen, seeded from the range start (or today).\n private readonly viewDate = linkedSignal<XuiDateRange<T>, T>({\n source: this.value,\n computation: (range, previous) => range.start ?? previous?.value ?? this.adapter.now()\n });\n\n protected readonly monthOffsets = computed(() => Array.from({ length: Math.max(1, this.months()) }, (_, i) => i));\n protected readonly weekdays = computed(() => weekdayLabels(this.firstDayOfWeek(), this.locale()));\n\n protected readonly grids = computed(() =>\n this.monthOffsets().map(offset =>\n buildMonthGrid(this.adapter, this.adapter.add(this.viewDate(), { months: offset }), {\n min: this.min(),\n max: this.max(),\n dateFilter: this.dateFilter(),\n firstDayOfWeek: this.firstDayOfWeek()\n })\n )\n );\n\n protected readonly computedClass = computed(() =>\n xui(\n 'bg-surface-raised border-border inline-block rounded-lg border p-3',\n this.isDisabled() && 'opacity-50',\n this.class()\n )\n );\n protected readonly navClass = computed(() =>\n xui(\n 'text-foreground-muted hover:bg-surface-inset hover:text-foreground flex size-7 items-center justify-center rounded'\n )\n );\n\n protected monthLabel(offset: number): string {\n return monthYearLabel(this.adapter, this.adapter.add(this.viewDate(), { months: offset }), this.locale());\n }\n\n protected isEndpoint(date: T): boolean {\n const { start, end } = this.value();\n return (start != null && this.adapter.isSameDay(date, start)) || (end != null && this.adapter.isSameDay(date, end));\n }\n\n /** The provisional end while only a start is chosen (uses the hovered day). */\n private effectiveEnd(): T | null {\n const { start, end } = this.value();\n if (end != null) {\n return end;\n }\n return start != null ? this.hover() : null;\n }\n\n private inRange(date: T): boolean {\n const { start } = this.value();\n const end = this.effectiveEnd();\n if (start == null || end == null) {\n return false;\n }\n\n const [lo, hi] = this.adapter.isAfter(start, end) ? [end, start] : [start, end];\n return (\n !this.adapter.isBefore(date, this.adapter.startOfDay(lo)) &&\n !this.adapter.isAfter(date, this.adapter.startOfDay(hi))\n );\n }\n\n protected cellClass(day: XCalendarDay<T>): string {\n // A continuous highlight strip behind the days that fall inside the range.\n return xui('p-0 text-center', this.inRange(day.date) && !this.isEndpoint(day.date) && 'bg-primary/10');\n }\n\n protected dayClass(day: XCalendarDay<T>): string {\n return xui(\n 'flex size-8 items-center justify-center rounded-full text-sm transition-colors',\n day.inCurrentMonth ? 'text-foreground' : 'text-foreground-subtle',\n !day.disabled && 'hover:bg-surface-inset cursor-pointer',\n day.disabled && 'cursor-not-allowed opacity-40',\n day.isToday && !this.isEndpoint(day.date) && 'ring-border-strong ring-1',\n this.isEndpoint(day.date) && 'bg-primary text-primary-foreground hover:bg-primary'\n );\n }\n\n protected shiftMonth(delta: number): void {\n this.viewDate.set(this.adapter.add(this.viewDate(), { months: delta }));\n }\n\n protected onClick(date: T): void {\n if (this.isDisabled()) {\n return;\n }\n\n const { start, end } = this.value();\n\n // Start a fresh range if there's no start, both ends are set, or the click is\n // before the current start.\n if (start == null || end != null || this.adapter.isBefore(date, start)) {\n this.commit({ start: date, end: null });\n return;\n }\n\n // Second click: complete the range (guard single-day unless allowed).\n if (this.adapter.isSameDay(date, start) && !this.allowSingleDayRange()) {\n return;\n }\n\n this.commit({ start, end: date });\n }\n\n private commit(range: XuiDateRange<T>): void {\n // `model.set` emits `valueChange` for `[(value)]` / `(valueChange)` consumers.\n this.value.set(range);\n this.cva.notifyChange(range);\n }\n\n /** Touched fires when focus leaves the calendar, not while moving inside it. */\n protected onFocusOut(event: FocusEvent): void {\n const next = event.relatedTarget as Node | null;\n if (!next || !this.host.nativeElement.contains(next)) {\n this.cva.markTouched();\n }\n }\n\n readonly writeValue = this.cva.writeValue;\n readonly registerOnChange = this.cva.registerOnChange;\n readonly registerOnTouched = this.cva.registerOnTouched;\n readonly setDisabledState = this.cva.setDisabledState;\n}\n","import { XuiDateRangePicker } from './lib/date-range-picker';\n\nexport * from './lib/date-range-picker';\n\nexport const XuiDateRangePickerImports = [XuiDateRangePicker] 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/date-range-picker",
|
|
3
|
-
"version": "2.0.0-alpha.
|
|
3
|
+
"version": "2.0.0-alpha.13",
|
|
4
4
|
"description": "Modern Angular 22 UI Library based on TailwindCSS",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"angular",
|
|
@@ -38,10 +38,11 @@
|
|
|
38
38
|
"peerDependencies": {
|
|
39
39
|
"@angular/cdk": "22",
|
|
40
40
|
"@angular/core": "22",
|
|
41
|
+
"@angular/forms": "22",
|
|
41
42
|
"@ng-icons/core": "34",
|
|
42
43
|
"@ng-icons/material-icons": "34",
|
|
43
|
-
"@xui/core": "2.0.0-alpha.
|
|
44
|
-
"@xui/icon": "2.0.0-alpha.
|
|
44
|
+
"@xui/core": "2.0.0-alpha.13",
|
|
45
|
+
"@xui/icon": "2.0.0-alpha.13",
|
|
45
46
|
"clsx": "^2.1.1"
|
|
46
47
|
},
|
|
47
48
|
"publishConfig": {
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
+
import * as _xui_core_forms from '@xui/core/forms';
|
|
1
2
|
import * as _angular_core from '@angular/core';
|
|
2
3
|
import { NumberInput, BooleanInput } from '@angular/cdk/coercion';
|
|
3
|
-
import {
|
|
4
|
+
import { ControlValueAccessor } from '@angular/forms';
|
|
5
|
+
import { XCalendarDay } from '@xui/core/calendar';
|
|
4
6
|
import { ClassValue } from 'clsx';
|
|
5
7
|
|
|
6
8
|
/** A `[start, end]` date range; either end may be `null` while selecting. */
|
|
@@ -11,13 +13,16 @@ interface XuiDateRange<T> {
|
|
|
11
13
|
/**
|
|
12
14
|
* A multi-month calendar for choosing a date range. The first click sets the
|
|
13
15
|
* start, the second the end (hovering previews the span); clicking again starts a
|
|
14
|
-
* new range. `[(
|
|
16
|
+
* new range. `[(value)]` two-way binding; `T` is the active `DateAdapter`'s type.
|
|
17
|
+
* It is a full `ControlValueAccessor`, so `ngModel`/`formControl` bind to it
|
|
18
|
+
* directly.
|
|
15
19
|
*/
|
|
16
|
-
declare class XuiDateRangePicker<T = Date> {
|
|
20
|
+
declare class XuiDateRangePicker<T = Date> implements ControlValueAccessor {
|
|
17
21
|
private readonly adapter;
|
|
22
|
+
private readonly host;
|
|
18
23
|
readonly class: _angular_core.InputSignal<ClassValue>;
|
|
19
|
-
/** The chosen range. Two-way bindable with `[(
|
|
20
|
-
readonly
|
|
24
|
+
/** The chosen range. Two-way bindable with `[(value)]`. */
|
|
25
|
+
readonly value: _angular_core.ModelSignal<XuiDateRange<T>>;
|
|
21
26
|
readonly min: _angular_core.InputSignal<T | null>;
|
|
22
27
|
readonly max: _angular_core.InputSignal<T | null>;
|
|
23
28
|
readonly dateFilter: _angular_core.InputSignal<((date: T) => boolean) | null>;
|
|
@@ -27,11 +32,14 @@ declare class XuiDateRangePicker<T = Date> {
|
|
|
27
32
|
readonly months: _angular_core.InputSignalWithTransform<number, NumberInput>;
|
|
28
33
|
/** Allow the start and end to be the same day. */
|
|
29
34
|
readonly allowSingleDayRange: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
35
|
+
readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
36
|
+
protected readonly cva: _xui_core_forms.XValueAccessor<XuiDateRange<T> | null>;
|
|
37
|
+
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
30
38
|
protected readonly hover: _angular_core.WritableSignal<T | null>;
|
|
31
39
|
private readonly viewDate;
|
|
32
40
|
protected readonly monthOffsets: _angular_core.Signal<number[]>;
|
|
33
41
|
protected readonly weekdays: _angular_core.Signal<string[]>;
|
|
34
|
-
protected readonly grids: _angular_core.Signal<
|
|
42
|
+
protected readonly grids: _angular_core.Signal<XCalendarDay<T>[][][]>;
|
|
35
43
|
protected readonly computedClass: _angular_core.Signal<string>;
|
|
36
44
|
protected readonly navClass: _angular_core.Signal<string>;
|
|
37
45
|
protected monthLabel(offset: number): string;
|
|
@@ -39,13 +47,19 @@ declare class XuiDateRangePicker<T = Date> {
|
|
|
39
47
|
/** The provisional end while only a start is chosen (uses the hovered day). */
|
|
40
48
|
private effectiveEnd;
|
|
41
49
|
private inRange;
|
|
42
|
-
protected cellClass(day:
|
|
43
|
-
protected dayClass(day:
|
|
50
|
+
protected cellClass(day: XCalendarDay<T>): string;
|
|
51
|
+
protected dayClass(day: XCalendarDay<T>): string;
|
|
44
52
|
protected shiftMonth(delta: number): void;
|
|
45
53
|
protected onClick(date: T): void;
|
|
46
54
|
private commit;
|
|
55
|
+
/** Touched fires when focus leaves the calendar, not while moving inside it. */
|
|
56
|
+
protected onFocusOut(event: FocusEvent): void;
|
|
57
|
+
readonly writeValue: (value: XuiDateRange<T> | null) => void;
|
|
58
|
+
readonly registerOnChange: (fn: _xui_core_forms.XChangeFn<XuiDateRange<T> | null>) => void;
|
|
59
|
+
readonly registerOnTouched: (fn: _xui_core_forms.XTouchFn) => void;
|
|
60
|
+
readonly setDisabledState: (isDisabled: boolean) => void;
|
|
47
61
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<XuiDateRangePicker<any>, never>;
|
|
48
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<XuiDateRangePicker<any>, "xui-date-range-picker", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "
|
|
62
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<XuiDateRangePicker<any>, "xui-date-range-picker", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "months": { "alias": "months"; "required": false; "isSignal": true; }; "allowSingleDayRange": { "alias": "allowSingleDayRange"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
|
|
49
63
|
}
|
|
50
64
|
|
|
51
65
|
declare const XuiDateRangePickerImports: readonly [typeof XuiDateRangePicker];
|