@xui/date-input 2.0.0-alpha.11 → 2.0.0-alpha.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +142 -156
- package/fesm2022/xui-date-input.mjs +61 -30
- package/fesm2022/xui-date-input.mjs.map +1 -1
- package/package.json +6 -5
- package/types/xui-date-input.d.ts +17 -6
package/README.md
CHANGED
|
@@ -1,89 +1,103 @@
|
|
|
1
|
-
<
|
|
2
|
-
|
|
1
|
+
<h1 align="center">xUI</h1>
|
|
2
|
+
|
|
3
|
+
<p align="center">
|
|
4
|
+
<strong>90 Angular components, one npm package each, themed from a single token layer.</strong>
|
|
5
|
+
</p>
|
|
6
|
+
|
|
7
|
+
<p align="center">
|
|
8
|
+
<a href="https://xuijs.org">Documentation</a> ·
|
|
9
|
+
<a href="https://develop--67d2b4c756077a325913e5d9.chromatic.com/?globals=theme:dark">Storybook</a> ·
|
|
10
|
+
<a href="https://stackblitz.com/fork/xui">StackBlitz</a> ·
|
|
11
|
+
<a href="#components">Components</a>
|
|
12
|
+
</p>
|
|
13
|
+
|
|
14
|
+
<p align="center">
|
|
15
|
+
<a href="https://github.com/rikarin/xui/actions/workflows/release.yml"><img src="https://github.com/rikarin/xui/actions/workflows/release.yml/badge.svg?branch=master" alt="Build status" /></a>
|
|
16
|
+
<a href="https://www.npmjs.com/package/@xui/core"><img src="https://img.shields.io/npm/v/%40xui/core.svg" alt="npm version" /></a>
|
|
17
|
+
<a href="https://www.npmjs.com/org/xui"><img src="https://img.shields.io/npm/dm/%40xui/core.svg" alt="Downloads" /></a>
|
|
18
|
+
<a href="https://app.netlify.com/sites/xui/deploys"><img src="https://api.netlify.com/api/v1/badges/fa0cfd14-97df-47fa-8a7c-152e6d4cfda2/deploy-status" alt="Netlify status" /></a>
|
|
3
19
|
</p>
|
|
4
20
|
|
|
5
21
|
---
|
|
6
22
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
[](https://app.netlify.com/sites/xui/deploys)
|
|
23
|
+
xUI is an Angular 22 component library styled with Tailwind CSS 4. You compose it from directives and
|
|
24
|
+
standalone components rather than configuring one monolith, and the set goes well past the
|
|
25
|
+
primitives: data tables, dock managers, omnibars, node graphs and date ranges are packages here, not
|
|
26
|
+
things you are left to build.
|
|
12
27
|
|
|
13
|
-
|
|
28
|
+
```ts
|
|
29
|
+
import { XuiButtonImports } from '@xui/button';
|
|
30
|
+
|
|
31
|
+
@Component({
|
|
32
|
+
imports: [XuiButtonImports],
|
|
33
|
+
template: `<button xuiButton color="primary">Save changes</button>`
|
|
34
|
+
})
|
|
35
|
+
export class Example {}
|
|
36
|
+
```
|
|
14
37
|
|
|
15
38
|
## Features
|
|
16
39
|
|
|
17
|
-
- **
|
|
18
|
-
|
|
19
|
-
- **
|
|
20
|
-
|
|
21
|
-
- **
|
|
22
|
-
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
-
|
|
28
|
-
|
|
29
|
-
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
| Spinner | [](https://www.npmjs.com/package/%40xui/spinner)<br />[](https://www.npmjs.com/package/%40xui/spinner)<br />[](https://bundlephobia.com/result?p=%40xui/spinner) | Spinner component |
|
|
53
|
-
| Status | [](https://www.npmjs.com/package/%40xui/status)<br />[](https://www.npmjs.com/package/%40xui/status)<br />[](https://bundlephobia.com/result?p=%40xui/status) | Status component |
|
|
54
|
-
| Table | [](https://www.npmjs.com/package/%40xui/table)<br />[](https://www.npmjs.com/package/%40xui/table)<br />[](https://bundlephobia.com/result?p=%40xui/table) | Table component |
|
|
55
|
-
|
|
56
|
-
## Installation
|
|
57
|
-
|
|
58
|
-
Install package with **PNPM**
|
|
40
|
+
- **One package per component.** Install `@xui/button` and you ship a button, not a library. Each
|
|
41
|
+
package exports an imports barrel for standalone components.
|
|
42
|
+
- **Signals throughout.** Signal inputs, `OnPush` and zoneless change detection; no `zone.js`
|
|
43
|
+
required.
|
|
44
|
+
- **Themed by tokens, not overrides.** Components style themselves with `bg-surface`,
|
|
45
|
+
`text-foreground-muted`, `border-error-muted`. Light and dark both work without a single `dark:`
|
|
46
|
+
class, and re-colouring an intent is one CSS variable.
|
|
47
|
+
- **Typed variants.** Every visual axis is a typed input backed by
|
|
48
|
+
[CVA](https://cva.style), and the `class` input merges through `tailwind-merge` — your utility
|
|
49
|
+
wins instead of fighting the component's.
|
|
50
|
+
- **Angular CDK underneath.** Overlays, focus traps, roving tabindex, typeahead, drag and drop and
|
|
51
|
+
bidi come from `@angular/cdk`, so keyboard behaviour and RTL are not reimplemented per component.
|
|
52
|
+
- **Built for coding agents.** An MCP server and an agent skill expose the real API of every
|
|
53
|
+
package — see [AI coding agents](#ai-coding-agents).
|
|
54
|
+
|
|
55
|
+
## Requirements
|
|
56
|
+
|
|
57
|
+
| | |
|
|
58
|
+
| ----------------------- | --- |
|
|
59
|
+
| Angular | 22 |
|
|
60
|
+
| Tailwind CSS | 4 |
|
|
61
|
+
| Node (development only) | 24 |
|
|
62
|
+
|
|
63
|
+
## Getting started
|
|
64
|
+
|
|
65
|
+
```bash
|
|
66
|
+
ng add @xui/core
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
That installs the core package and wires your global stylesheet: the theme import, the CDK overlay
|
|
70
|
+
stylesheet, and a `@source` glob pointing at the published packages. It is idempotent, so running it
|
|
71
|
+
again only adds what is missing. Use `nx add @xui/core` in an Nx workspace, and `--skip-overlay` if
|
|
72
|
+
you will not use dialogs, drawers, popovers, tooltips, menus or toasts.
|
|
73
|
+
|
|
74
|
+
Then add the components you need:
|
|
59
75
|
|
|
60
76
|
```bash
|
|
61
|
-
pnpm
|
|
77
|
+
pnpm add @xui/button @xui/dialog @xui/icon
|
|
62
78
|
```
|
|
63
79
|
|
|
64
80
|
## Theming
|
|
65
81
|
|
|
66
|
-
|
|
67
|
-
`text-foreground-muted`, `border-error-muted` — that resolve through the token layer shipped with
|
|
68
|
-
`@xui/core`. Import it once, after Tailwind:
|
|
82
|
+
To wire the styles by hand, import the token layer once after Tailwind:
|
|
69
83
|
|
|
70
84
|
```css
|
|
71
85
|
@import 'tailwindcss';
|
|
72
86
|
@import '@xui/core/styles/theme.css';
|
|
73
87
|
|
|
74
|
-
/* Only needed
|
|
75
|
-
|
|
88
|
+
/* Only needed for an overlay surface — popover, tooltip, menu, dialog, drawer
|
|
89
|
+
or toast. Without it, overlays render in the document flow. */
|
|
76
90
|
@import '@angular/cdk/overlay-prebuilt.css';
|
|
77
91
|
|
|
78
|
-
/*
|
|
92
|
+
/* Tailwind only emits utilities it can see, and it cannot see node_modules by default. */
|
|
79
93
|
@source '../node_modules/@xui';
|
|
80
94
|
```
|
|
81
95
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
96
|
+
Put `.dark` (or `[data-theme='dark']`) on `<html>` to switch themes; with neither present the theme
|
|
97
|
+
follows `prefers-color-scheme`. Both selectors work on any element, so a subtree can render in the
|
|
98
|
+
opposite theme.
|
|
85
99
|
|
|
86
|
-
Re-theme by overriding tokens after the import
|
|
100
|
+
Re-theme by overriding tokens after the import. The `darker` / `lighter` / `subtle` / `muted` /
|
|
87
101
|
`emphasis` steps of each intent are derived, so one declaration re-colours the whole ramp:
|
|
88
102
|
|
|
89
103
|
```css
|
|
@@ -93,37 +107,48 @@ Re-theme by overriding tokens after the import — the `darker` / `lighter` / `s
|
|
|
93
107
|
}
|
|
94
108
|
```
|
|
95
109
|
|
|
96
|
-
|
|
97
|
-
|
|
110
|
+
Controls share one density scale — 24 / 30 / 40px for `sm` / default / `lg` — so a button, an input
|
|
111
|
+
and a date field on the same row line up. Override `--control-height-md` to re-tune the library.
|
|
98
112
|
|
|
99
|
-
|
|
113
|
+
The full token reference, rendered in both themes, is the **Design tokens** page in Storybook.
|
|
100
114
|
|
|
101
|
-
|
|
115
|
+
## Components
|
|
102
116
|
|
|
103
|
-
|
|
117
|
+
<details>
|
|
118
|
+
<summary><strong>All 90 packages</strong>, grouped as they appear in Storybook</summary>
|
|
104
119
|
|
|
105
|
-
|
|
120
|
+
<br />
|
|
106
121
|
|
|
107
|
-
|
|
122
|
+
**Foundations** — [`@xui/icon`](https://www.npmjs.com/package/@xui/icon) · [`@xui/link`](https://www.npmjs.com/package/@xui/link) · [`@xui/text`](https://www.npmjs.com/package/@xui/text)
|
|
108
123
|
|
|
109
|
-
|
|
110
|
-
pnpm start
|
|
111
|
-
```
|
|
124
|
+
**Actions** — [`@xui/button`](https://www.npmjs.com/package/@xui/button) · [`@xui/button-group`](https://www.npmjs.com/package/@xui/button-group) · [`@xui/hotkeys`](https://www.npmjs.com/package/@xui/hotkeys)
|
|
112
125
|
|
|
113
|
-
|
|
126
|
+
**Forms** — [`@xui/cascader`](https://www.npmjs.com/package/@xui/cascader) · [`@xui/checkbox`](https://www.npmjs.com/package/@xui/checkbox) · [`@xui/color-picker`](https://www.npmjs.com/package/@xui/color-picker) · [`@xui/control-card`](https://www.npmjs.com/package/@xui/control-card) · [`@xui/control-group`](https://www.npmjs.com/package/@xui/control-group) · [`@xui/editable-text`](https://www.npmjs.com/package/@xui/editable-text) · [`@xui/file-input`](https://www.npmjs.com/package/@xui/file-input) · [`@xui/form-field`](https://www.npmjs.com/package/@xui/form-field) · [`@xui/html-select`](https://www.npmjs.com/package/@xui/html-select) · [`@xui/input`](https://www.npmjs.com/package/@xui/input) · [`@xui/input-otp`](https://www.npmjs.com/package/@xui/input-otp) · [`@xui/label`](https://www.npmjs.com/package/@xui/label) · [`@xui/multi-select`](https://www.npmjs.com/package/@xui/multi-select) · [`@xui/numeric-input`](https://www.npmjs.com/package/@xui/numeric-input) · [`@xui/radio`](https://www.npmjs.com/package/@xui/radio) · [`@xui/rate`](https://www.npmjs.com/package/@xui/rate) · [`@xui/rich-text-editor`](https://www.npmjs.com/package/@xui/rich-text-editor) · [`@xui/segmented-control`](https://www.npmjs.com/package/@xui/segmented-control) · [`@xui/select`](https://www.npmjs.com/package/@xui/select) · [`@xui/slider`](https://www.npmjs.com/package/@xui/slider) · [`@xui/suggest`](https://www.npmjs.com/package/@xui/suggest) · [`@xui/switch`](https://www.npmjs.com/package/@xui/switch) · [`@xui/tag-input`](https://www.npmjs.com/package/@xui/tag-input) · [`@xui/textarea`](https://www.npmjs.com/package/@xui/textarea) · [`@xui/transfer`](https://www.npmjs.com/package/@xui/transfer) · [`@xui/tree-select`](https://www.npmjs.com/package/@xui/tree-select) · [`@xui/upload`](https://www.npmjs.com/package/@xui/upload)
|
|
114
127
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
128
|
+
**Date & time** — [`@xui/date-input`](https://www.npmjs.com/package/@xui/date-input) · [`@xui/date-picker`](https://www.npmjs.com/package/@xui/date-picker) · [`@xui/date-range-input`](https://www.npmjs.com/package/@xui/date-range-input) · [`@xui/date-range-picker`](https://www.npmjs.com/package/@xui/date-range-picker) · [`@xui/time-picker`](https://www.npmjs.com/package/@xui/time-picker) · [`@xui/timezone-select`](https://www.npmjs.com/package/@xui/timezone-select)
|
|
129
|
+
|
|
130
|
+
**Data display** — [`@xui/avatar`](https://www.npmjs.com/package/@xui/avatar) · [`@xui/badge`](https://www.npmjs.com/package/@xui/badge) · [`@xui/card`](https://www.npmjs.com/package/@xui/card) · [`@xui/card-list`](https://www.npmjs.com/package/@xui/card-list) · [`@xui/carousel`](https://www.npmjs.com/package/@xui/carousel) · [`@xui/data-table`](https://www.npmjs.com/package/@xui/data-table) · [`@xui/descriptions`](https://www.npmjs.com/package/@xui/descriptions) · [`@xui/entity-title`](https://www.npmjs.com/package/@xui/entity-title) · [`@xui/kbd`](https://www.npmjs.com/package/@xui/kbd) · [`@xui/statistic`](https://www.npmjs.com/package/@xui/statistic) · [`@xui/status`](https://www.npmjs.com/package/@xui/status) · [`@xui/table`](https://www.npmjs.com/package/@xui/table) · [`@xui/tag`](https://www.npmjs.com/package/@xui/tag) · [`@xui/timeline`](https://www.npmjs.com/package/@xui/timeline) · [`@xui/tree`](https://www.npmjs.com/package/@xui/tree)
|
|
131
|
+
|
|
132
|
+
**Navigation** — [`@xui/breadcrumb`](https://www.npmjs.com/package/@xui/breadcrumb) · [`@xui/menubar`](https://www.npmjs.com/package/@xui/menubar) · [`@xui/navbar`](https://www.npmjs.com/package/@xui/navbar) · [`@xui/navigation-menu`](https://www.npmjs.com/package/@xui/navigation-menu) · [`@xui/pagination`](https://www.npmjs.com/package/@xui/pagination) · [`@xui/panel-stack`](https://www.npmjs.com/package/@xui/panel-stack) · [`@xui/steps`](https://www.npmjs.com/package/@xui/steps) · [`@xui/tabs`](https://www.npmjs.com/package/@xui/tabs)
|
|
133
|
+
|
|
134
|
+
**Overlays** — [`@xui/alert`](https://www.npmjs.com/package/@xui/alert) · [`@xui/alert-dialog`](https://www.npmjs.com/package/@xui/alert-dialog) · [`@xui/context-menu`](https://www.npmjs.com/package/@xui/context-menu) · [`@xui/dialog`](https://www.npmjs.com/package/@xui/dialog) · [`@xui/drawer`](https://www.npmjs.com/package/@xui/drawer) · [`@xui/menu`](https://www.npmjs.com/package/@xui/menu) · [`@xui/omnibar`](https://www.npmjs.com/package/@xui/omnibar) · [`@xui/popover`](https://www.npmjs.com/package/@xui/popover) · [`@xui/toast`](https://www.npmjs.com/package/@xui/toast) · [`@xui/tooltip`](https://www.npmjs.com/package/@xui/tooltip)
|
|
135
|
+
|
|
136
|
+
**Feedback** — [`@xui/callout`](https://www.npmjs.com/package/@xui/callout) · [`@xui/non-ideal-state`](https://www.npmjs.com/package/@xui/non-ideal-state) · [`@xui/progress-bar`](https://www.npmjs.com/package/@xui/progress-bar) · [`@xui/result`](https://www.npmjs.com/package/@xui/result) · [`@xui/skeleton`](https://www.npmjs.com/package/@xui/skeleton) · [`@xui/spinner`](https://www.npmjs.com/package/@xui/spinner)
|
|
137
|
+
|
|
138
|
+
**Layout** — [`@xui/accordion`](https://www.npmjs.com/package/@xui/accordion) · [`@xui/aspect-ratio`](https://www.npmjs.com/package/@xui/aspect-ratio) · [`@xui/collapse`](https://www.npmjs.com/package/@xui/collapse) · [`@xui/divider`](https://www.npmjs.com/package/@xui/divider) · [`@xui/dock-manager`](https://www.npmjs.com/package/@xui/dock-manager) · [`@xui/overflow-list`](https://www.npmjs.com/package/@xui/overflow-list) · [`@xui/scroll-area`](https://www.npmjs.com/package/@xui/scroll-area) · [`@xui/section`](https://www.npmjs.com/package/@xui/section) · [`@xui/splitter`](https://www.npmjs.com/package/@xui/splitter)
|
|
139
|
+
|
|
140
|
+
**Visualisation** — [`@xui/echarts`](https://www.npmjs.com/package/@xui/echarts) · [`@xui/konva`](https://www.npmjs.com/package/@xui/konva) · [`@xui/node-graph`](https://www.npmjs.com/package/@xui/node-graph)
|
|
141
|
+
|
|
142
|
+
</details>
|
|
118
143
|
|
|
119
144
|
## AI coding agents
|
|
120
145
|
|
|
121
146
|
Two pieces of tooling teach coding agents how to build with xUI.
|
|
122
147
|
|
|
123
|
-
**MCP server** — [`@xui/mcp`](
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
148
|
+
**MCP server** — [`@xui/mcp`](libs/mcp/README.md) exposes every package's real API (selectors, signal
|
|
149
|
+
inputs, variant axes, outputs), the design tokens, the docs and the Storybook examples as MCP tools.
|
|
150
|
+
It extracts them from the library sources, so every package is covered and the answers match the
|
|
151
|
+
installed version.
|
|
127
152
|
|
|
128
153
|
```json
|
|
129
154
|
{
|
|
@@ -133,85 +158,46 @@ answers match the installed version.
|
|
|
133
158
|
}
|
|
134
159
|
```
|
|
135
160
|
|
|
136
|
-
In this
|
|
137
|
-
once so it exists.
|
|
161
|
+
In this repository `.mcp.json` already points at `dist/libs/mcp/src/server.js` — run
|
|
162
|
+
`pnpm nx build mcp` once so it exists.
|
|
138
163
|
|
|
139
|
-
**Skill** — [`skills/xui`](
|
|
164
|
+
**Skill** — [`skills/xui`](skills/xui/SKILL.md) is the procedural knowledge: the three-layer
|
|
140
165
|
architecture, discovery through the MCP server, composition and styling rules, theming, the
|
|
141
166
|
generators, and the conventions for authoring a package inside the monorepo. `.claude/skills/xui`
|
|
142
167
|
links to it for agents working in this repository.
|
|
143
168
|
|
|
144
|
-
##
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
- [ ] Input OTP
|
|
180
|
-
- [ ] Toggle Group
|
|
181
|
-
|
|
182
|
-
### Additional
|
|
183
|
-
|
|
184
|
-
- [ ] Decagram
|
|
185
|
-
- [ ] Settings
|
|
186
|
-
- [ ] Drawer
|
|
187
|
-
- [ ] Panel Bar
|
|
188
|
-
- [ ] Textarea
|
|
189
|
-
- [ ] Time Picker
|
|
190
|
-
- [ ] Image Upload
|
|
191
|
-
- [ ] Banner
|
|
192
|
-
- [ ] Snack bar
|
|
193
|
-
|
|
194
|
-
## Opinionated "components"
|
|
195
|
-
|
|
196
|
-
- [ ] Graph View (Nodes)
|
|
197
|
-
- [ ] Analysis
|
|
198
|
-
- [ ] Charts (NG Charts?)
|
|
199
|
-
|
|
200
|
-
## CLI
|
|
201
|
-
|
|
202
|
-
Make cli to install the components
|
|
203
|
-
|
|
204
|
-
## TODO
|
|
205
|
-
|
|
206
|
-
- Button
|
|
207
|
-
|
|
208
|
-
- Icon
|
|
209
|
-
- Shine
|
|
210
|
-
|
|
211
|
-
- Breadcrumb
|
|
212
|
-
|
|
213
|
-
- fix styling issues
|
|
214
|
-
- on hover stuff
|
|
215
|
-
- data driven component
|
|
216
|
-
|
|
217
|
-
- adjust generator to generate stories into the apps/storybook
|
|
169
|
+
## Browser support
|
|
170
|
+
|
|
171
|
+
The browsers Angular itself supports — see the
|
|
172
|
+
[Angular browser support policy](https://angular.dev/reference/versions#browser-support).
|
|
173
|
+
|
|
174
|
+
## Development
|
|
175
|
+
|
|
176
|
+
The workspace is [Nx](https://nx.dev) + pnpm.
|
|
177
|
+
|
|
178
|
+
```bash
|
|
179
|
+
pnpm install
|
|
180
|
+
pnpm start # documentation site on :4200
|
|
181
|
+
pnpm storybook # component gallery on :4400
|
|
182
|
+
pnpm nx serve admin # the example admin application
|
|
183
|
+
pnpm test # unit tests
|
|
184
|
+
pnpm nx test-storybook ui-storybook # render every story in headless Chromium
|
|
185
|
+
pnpm build # build every package
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
Commits follow [Conventional Commits](https://www.conventionalcommits.org) and are linted — the
|
|
189
|
+
release is cut from them. See [docs/releasing.md](docs/releasing.md) for how a version is published,
|
|
190
|
+
[apps/ui-storybook/README.md](apps/ui-storybook/README.md) before writing stories, and
|
|
191
|
+
[apps/app/README.md](apps/app/README.md) for the documentation site, whose component pages are
|
|
192
|
+
generated from those same stories, and [apps/admin/README.md](apps/admin/README.md) for the example
|
|
193
|
+
admin application — a full app built from these packages, which is the fastest way to see how they
|
|
194
|
+
fit together.
|
|
195
|
+
|
|
196
|
+
## Contributing
|
|
197
|
+
|
|
198
|
+
Bugs and ideas are welcome in [issues](https://github.com/Rikarin/xui/issues). For a change of any
|
|
199
|
+
size, open an issue first so the API can be agreed before the code exists.
|
|
200
|
+
|
|
201
|
+
## License
|
|
202
|
+
|
|
203
|
+
See [LICENSE](LICENSE).
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, model,
|
|
2
|
+
import { input, model, numberAttribute, booleanAttribute, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
3
|
import { provideIcons, NgIcon } from '@ng-icons/core';
|
|
4
4
|
import { matCalendarTodayRound } from '@ng-icons/material-icons/round';
|
|
5
5
|
import { xui } from '@xui/core';
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
6
|
+
import { injectXDateAdapter, defaultXDateFormat, defaultXDateParse } from '@xui/core/date-time';
|
|
7
|
+
import { createXValueAccessor, provideXValueAccessor } from '@xui/core/forms';
|
|
8
8
|
import * as i2 from '@xui/date-picker';
|
|
9
9
|
import { XuiDatePickerImports } from '@xui/date-picker';
|
|
10
10
|
import { XuiIcon } from '@xui/icon';
|
|
@@ -15,10 +15,11 @@ import { XuiPopoverImports } from '@xui/popover';
|
|
|
15
15
|
* A date field: a text input paired with a popover calendar. Type a date (parsed
|
|
16
16
|
* best-effort, or via a custom `parseDate`) or pick one from the calendar.
|
|
17
17
|
* `[(value)]` two-way binding; `T` is the active `DateAdapter`'s type (`Date`
|
|
18
|
-
* by default).
|
|
18
|
+
* by default). It is a full `ControlValueAccessor`, so `ngModel`/`formControl`
|
|
19
|
+
* bind to it directly.
|
|
19
20
|
*/
|
|
20
21
|
class XuiDateInput {
|
|
21
|
-
adapter =
|
|
22
|
+
adapter = injectXDateAdapter();
|
|
22
23
|
class = input('', /* @ts-ignore */
|
|
23
24
|
...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
24
25
|
/** The selected date. Two-way bindable with `[(value)]`. */
|
|
@@ -30,8 +31,7 @@ class XuiDateInput {
|
|
|
30
31
|
...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
|
|
31
32
|
dateFilter = input(null, /* @ts-ignore */
|
|
32
33
|
...(ngDevMode ? [{ debugName: "dateFilter" }] : /* istanbul ignore next */ []));
|
|
33
|
-
firstDayOfWeek = input(0, /*
|
|
34
|
-
...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
|
|
34
|
+
firstDayOfWeek = input(0, { ...(ngDevMode ? { debugName: "firstDayOfWeek" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
35
35
|
placeholder = input('YYYY-MM-DD', /* @ts-ignore */
|
|
36
36
|
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
37
37
|
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
@@ -39,22 +39,27 @@ class XuiDateInput {
|
|
|
39
39
|
locale = input(undefined, /* @ts-ignore */
|
|
40
40
|
...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
|
|
41
41
|
/** Format a value for the input. Defaults to a locale short date. */
|
|
42
|
-
formatDate = input((
|
|
42
|
+
formatDate = input(defaultXDateFormat(this.adapter), /* @ts-ignore */
|
|
43
43
|
...(ngDevMode ? [{ debugName: "formatDate" }] : /* istanbul ignore next */ []));
|
|
44
44
|
/** Parse typed text into a value, or `null` if it can't. Defaults to `Date.parse`. */
|
|
45
|
-
parseDate = input(
|
|
46
|
-
const ms = Date.parse(text);
|
|
47
|
-
return Number.isNaN(ms) ? null : new Date(ms);
|
|
48
|
-
}, /* @ts-ignore */
|
|
45
|
+
parseDate = input(defaultXDateParse, /* @ts-ignore */
|
|
49
46
|
...(ngDevMode ? [{ debugName: "parseDate" }] : /* istanbul ignore next */ []));
|
|
50
|
-
dateChange = output();
|
|
51
47
|
open = model(false, /* @ts-ignore */
|
|
52
48
|
...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
|
|
53
49
|
typed = signal(null, /* @ts-ignore */
|
|
54
50
|
...(ngDevMode ? [{ debugName: "typed" }] : /* istanbul ignore next */ []));
|
|
51
|
+
cva = createXValueAccessor({
|
|
52
|
+
onWrite: value => {
|
|
53
|
+
// A form write replaces any half-typed text — the display must show it.
|
|
54
|
+
this.typed.set(null);
|
|
55
|
+
this.value.set(value ?? null);
|
|
56
|
+
},
|
|
57
|
+
disabled: this.disabled
|
|
58
|
+
});
|
|
59
|
+
isDisabled = this.cva.disabled;
|
|
55
60
|
computedClass = computed(() => xui('inline-block', this.class()), /* @ts-ignore */
|
|
56
61
|
...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
|
|
57
|
-
groupClass = computed(() => xui('border-border bg-surface-inset flex h-(--control-height-md) w-full min-w-48 items-center rounded-lg border pe-1 ps-(--control-padding-md) text-sm', 'focus-within:border-focus transition-colors', this.
|
|
62
|
+
groupClass = computed(() => xui('border-border bg-surface-inset flex h-(--control-height-md) w-full min-w-48 items-center rounded-lg border pe-1 ps-(--control-padding-md) text-sm', 'focus-within:border-focus transition-colors', this.isDisabled() && 'cursor-not-allowed opacity-50'), /* @ts-ignore */
|
|
58
63
|
...(ngDevMode ? [{ debugName: "groupClass" }] : /* istanbul ignore next */ []));
|
|
59
64
|
fieldClass = computed(() => xui('text-foreground placeholder:text-foreground-subtle flex-1 bg-transparent outline-none'), /* @ts-ignore */
|
|
60
65
|
...(ngDevMode ? [{ debugName: "fieldClass" }] : /* istanbul ignore next */ []));
|
|
@@ -73,6 +78,16 @@ class XuiDateInput {
|
|
|
73
78
|
onType(event) {
|
|
74
79
|
this.typed.set(event.target.value);
|
|
75
80
|
}
|
|
81
|
+
onBlur() {
|
|
82
|
+
this.commitTyped();
|
|
83
|
+
this.cva.markTouched();
|
|
84
|
+
}
|
|
85
|
+
onOpenChange(open) {
|
|
86
|
+
this.open.set(open);
|
|
87
|
+
if (!open) {
|
|
88
|
+
this.cva.markTouched();
|
|
89
|
+
}
|
|
90
|
+
}
|
|
76
91
|
commitTyped() {
|
|
77
92
|
const typed = this.typed();
|
|
78
93
|
if (typed === null) {
|
|
@@ -93,33 +108,44 @@ class XuiDateInput {
|
|
|
93
108
|
this.typed.set(null);
|
|
94
109
|
this.setValue(date);
|
|
95
110
|
if (this.closeOnSelection()) {
|
|
111
|
+
// Closing from here bypasses the trigger's `openChange`, so touch explicitly.
|
|
96
112
|
this.open.set(false);
|
|
113
|
+
this.cva.markTouched();
|
|
97
114
|
}
|
|
98
115
|
}
|
|
116
|
+
/** The single write path for user edits — typed text or a calendar pick. */
|
|
99
117
|
setValue(date) {
|
|
100
118
|
this.value.set(date);
|
|
101
|
-
this.
|
|
119
|
+
this.cva.notifyChange(date);
|
|
102
120
|
}
|
|
121
|
+
writeValue = this.cva.writeValue;
|
|
122
|
+
registerOnChange = this.cva.registerOnChange;
|
|
123
|
+
registerOnTouched = this.cva.registerOnTouched;
|
|
124
|
+
setDisabledState = this.cva.setDisabledState;
|
|
103
125
|
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiDateInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
104
|
-
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: XuiDateInput, isStandalone: true, selector: "xui-date-input", 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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelection: { classPropertyName: "closeOnSelection", publicName: "closeOnSelection", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, formatDate: { classPropertyName: "formatDate", publicName: "formatDate", isSignal: true, isRequired: false, transformFunction: null }, parseDate: { classPropertyName: "parseDate", publicName: "parseDate", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange",
|
|
126
|
+
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: XuiDateInput, isStandalone: true, selector: "xui-date-input", 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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelection: { classPropertyName: "closeOnSelection", publicName: "closeOnSelection", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, formatDate: { classPropertyName: "formatDate", publicName: "formatDate", isSignal: true, isRequired: false, transformFunction: null }, parseDate: { classPropertyName: "parseDate", publicName: "parseDate", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", open: "openChange" }, host: { properties: { "class": "computedClass()" } }, providers: [provideXValueAccessor((() => XuiDateInput))], ngImport: i0, template: `
|
|
105
127
|
<div [class]="groupClass()">
|
|
106
128
|
<input
|
|
107
129
|
type="text"
|
|
108
130
|
[class]="fieldClass()"
|
|
109
131
|
[value]="displayValue()"
|
|
110
132
|
[placeholder]="placeholder()"
|
|
111
|
-
[disabled]="
|
|
133
|
+
[disabled]="isDisabled()"
|
|
112
134
|
(input)="onType($event)"
|
|
113
|
-
(blur)="
|
|
135
|
+
(blur)="onBlur()"
|
|
114
136
|
(keydown.enter)="commitTyped()"
|
|
115
137
|
/>
|
|
138
|
+
<!-- The [disabled] binding feeds the popover trigger directive's input, so
|
|
139
|
+
the native attribute needs its own binding to actually disable the button. -->
|
|
116
140
|
<button
|
|
117
141
|
type="button"
|
|
118
142
|
[class]="triggerClass()"
|
|
119
143
|
aria-label="Open calendar"
|
|
120
|
-
[disabled]="
|
|
144
|
+
[disabled]="isDisabled()"
|
|
145
|
+
[attr.disabled]="isDisabled() ? '' : null"
|
|
121
146
|
[xuiPopover]="panel"
|
|
122
|
-
[
|
|
147
|
+
[open]="open()"
|
|
148
|
+
(openChange)="onOpenChange($event)"
|
|
123
149
|
[role]="'dialog'"
|
|
124
150
|
[minimal]="true"
|
|
125
151
|
placement="bottom-end"
|
|
@@ -130,21 +156,22 @@ class XuiDateInput {
|
|
|
130
156
|
|
|
131
157
|
<ng-template #panel>
|
|
132
158
|
<xui-date-picker
|
|
133
|
-
[
|
|
159
|
+
[value]="value()"
|
|
134
160
|
[min]="min()"
|
|
135
161
|
[max]="max()"
|
|
136
162
|
[dateFilter]="dateFilter()"
|
|
137
163
|
[firstDayOfWeek]="firstDayOfWeek()"
|
|
138
|
-
(
|
|
164
|
+
(valueChange)="onPick($event)"
|
|
139
165
|
/>
|
|
140
166
|
</ng-template>
|
|
141
|
-
`, 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", "
|
|
167
|
+
`, 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.XuiPopover, selector: "[xuiPopover]", inputs: ["xuiPopover", "context", "interactionKind", "placement", "offset", "hoverOpenDelay", "hoverCloseDelay", "minimal", "matchTargetWidth", "disabled", "panelClass", "role", "ariaLabel", "open"], outputs: ["openChange", "opened", "closed"], exportAs: ["xuiPopover"] }, { kind: "component", type: i2.XuiDatePicker, selector: "xui-date-picker", inputs: ["class", "value", "min", "max", "dateFilter", "firstDayOfWeek", "locale", "showActionsBar", "disabled"], outputs: ["valueChange"] }], viewProviders: [provideIcons({ matCalendarTodayRound })], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
142
168
|
}
|
|
143
169
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiDateInput, decorators: [{
|
|
144
170
|
type: Component,
|
|
145
171
|
args: [{
|
|
146
172
|
selector: 'xui-date-input',
|
|
147
173
|
imports: [NgIcon, XuiIcon, XuiPopoverImports, XuiDatePickerImports],
|
|
174
|
+
providers: [provideXValueAccessor((() => XuiDateInput))],
|
|
148
175
|
template: `
|
|
149
176
|
<div [class]="groupClass()">
|
|
150
177
|
<input
|
|
@@ -152,18 +179,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
152
179
|
[class]="fieldClass()"
|
|
153
180
|
[value]="displayValue()"
|
|
154
181
|
[placeholder]="placeholder()"
|
|
155
|
-
[disabled]="
|
|
182
|
+
[disabled]="isDisabled()"
|
|
156
183
|
(input)="onType($event)"
|
|
157
|
-
(blur)="
|
|
184
|
+
(blur)="onBlur()"
|
|
158
185
|
(keydown.enter)="commitTyped()"
|
|
159
186
|
/>
|
|
187
|
+
<!-- The [disabled] binding feeds the popover trigger directive's input, so
|
|
188
|
+
the native attribute needs its own binding to actually disable the button. -->
|
|
160
189
|
<button
|
|
161
190
|
type="button"
|
|
162
191
|
[class]="triggerClass()"
|
|
163
192
|
aria-label="Open calendar"
|
|
164
|
-
[disabled]="
|
|
193
|
+
[disabled]="isDisabled()"
|
|
194
|
+
[attr.disabled]="isDisabled() ? '' : null"
|
|
165
195
|
[xuiPopover]="panel"
|
|
166
|
-
[
|
|
196
|
+
[open]="open()"
|
|
197
|
+
(openChange)="onOpenChange($event)"
|
|
167
198
|
[role]="'dialog'"
|
|
168
199
|
[minimal]="true"
|
|
169
200
|
placement="bottom-end"
|
|
@@ -174,12 +205,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
174
205
|
|
|
175
206
|
<ng-template #panel>
|
|
176
207
|
<xui-date-picker
|
|
177
|
-
[
|
|
208
|
+
[value]="value()"
|
|
178
209
|
[min]="min()"
|
|
179
210
|
[max]="max()"
|
|
180
211
|
[dateFilter]="dateFilter()"
|
|
181
212
|
[firstDayOfWeek]="firstDayOfWeek()"
|
|
182
|
-
(
|
|
213
|
+
(valueChange)="onPick($event)"
|
|
183
214
|
/>
|
|
184
215
|
</ng-template>
|
|
185
216
|
`,
|
|
@@ -190,7 +221,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
190
221
|
encapsulation: ViewEncapsulation.None,
|
|
191
222
|
viewProviders: [provideIcons({ matCalendarTodayRound })]
|
|
192
223
|
}]
|
|
193
|
-
}], 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 }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], closeOnSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelection", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], formatDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatDate", required: false }] }], parseDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseDate", required: false }] }],
|
|
224
|
+
}], 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 }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], closeOnSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelection", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], formatDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatDate", required: false }] }], parseDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseDate", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }] } });
|
|
194
225
|
|
|
195
226
|
const XuiDateInputImports = [XuiDateInput];
|
|
196
227
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"xui-date-input.mjs","sources":["../../../../../../libs/ui/date-input/xui/src/lib/date-input.ts","../../../../../../libs/ui/date-input/xui/src/index.ts","../../../../../../libs/ui/date-input/xui/src/xui-date-input.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n input,\n model,\n output,\n signal,\n ViewEncapsulation\n} from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { matCalendarTodayRound } from '@ng-icons/material-icons/round';\nimport { xui } from '@xui/core';\nimport { toJsDate } from '@xui/core/calendar';\nimport { injectDateAdapter } from '@xui/core/date-time';\nimport { XuiDatePickerImports } from '@xui/date-picker';\nimport { XuiIcon } from '@xui/icon';\nimport { XuiPopoverImports } from '@xui/popover';\nimport type { ClassValue } from 'clsx';\n\n/**\n * A date field: a text input paired with a popover calendar. Type a date (parsed\n * best-effort, or via a custom `parseDate`) or pick one from the calendar.\n * `[(value)]` two-way binding; `T` is the active `DateAdapter`'s type (`Date`\n * by default).\n */\n@Component({\n selector: 'xui-date-input',\n imports: [NgIcon, XuiIcon, XuiPopoverImports, XuiDatePickerImports],\n template: `\n <div [class]=\"groupClass()\">\n <input\n type=\"text\"\n [class]=\"fieldClass()\"\n [value]=\"displayValue()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n (input)=\"onType($event)\"\n (blur)=\"commitTyped()\"\n (keydown.enter)=\"commitTyped()\"\n />\n <button\n type=\"button\"\n [class]=\"triggerClass()\"\n aria-label=\"Open calendar\"\n [disabled]=\"disabled()\"\n [xuiPopover]=\"panel\"\n [(isOpen)]=\"open\"\n [role]=\"'dialog'\"\n [minimal]=\"true\"\n placement=\"bottom-end\"\n >\n <ng-icon xui name=\"matCalendarTodayRound\" size=\"sm\" />\n </button>\n </div>\n\n <ng-template #panel>\n <xui-date-picker\n [selected]=\"value()\"\n [min]=\"min()\"\n [max]=\"max()\"\n [dateFilter]=\"dateFilter()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n (dateChange)=\"onPick($event)\"\n />\n </ng-template>\n `,\n host: {\n '[class]': 'computedClass()'\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n viewProviders: [provideIcons({ matCalendarTodayRound })]\n})\nexport class XuiDateInput<T = Date> {\n private readonly adapter = injectDateAdapter<T>();\n\n readonly class = input<ClassValue>('');\n\n /** The selected date. Two-way bindable with `[(value)]`. */\n readonly value = model<T | null>(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>(0);\n\n readonly placeholder = input<string>('YYYY-MM-DD');\n readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n readonly closeOnSelection = input<boolean, BooleanInput>(true, { transform: booleanAttribute });\n readonly locale = input<string | undefined>(undefined);\n\n /** Format a value for the input. Defaults to a locale short date. */\n readonly formatDate = input<(date: T, locale?: string) => string>((date, locale) =>\n new Intl.DateTimeFormat(locale, { year: 'numeric', month: '2-digit', day: '2-digit' }).format(\n toJsDate(this.adapter, date)\n )\n );\n\n /** Parse typed text into a value, or `null` if it can't. Defaults to `Date.parse`. */\n readonly parseDate = input<(text: string) => T | null>(text => {\n const ms = Date.parse(text);\n return Number.isNaN(ms) ? null : (new Date(ms) as unknown as T);\n });\n\n readonly dateChange = output<T | null>();\n\n protected readonly open = model(false);\n private readonly typed = signal<string | null>(null);\n\n protected readonly computedClass = computed(() => xui('inline-block', this.class()));\n protected readonly groupClass = computed(() =>\n xui(\n 'border-border bg-surface-inset flex h-(--control-height-md) w-full min-w-48 items-center rounded-lg border pe-1 ps-(--control-padding-md) text-sm',\n 'focus-within:border-focus transition-colors',\n this.disabled() && 'cursor-not-allowed opacity-50'\n )\n );\n protected readonly fieldClass = computed(() =>\n xui('text-foreground placeholder:text-foreground-subtle flex-1 bg-transparent outline-none')\n );\n protected readonly triggerClass = computed(() =>\n xui(\n 'text-foreground-muted hover:bg-surface-raised hover:text-foreground flex size-8 items-center justify-center rounded'\n )\n );\n\n /** The input shows the live typing, else the formatted value. */\n protected readonly displayValue = computed(() => {\n const typed = this.typed();\n if (typed !== null) {\n return typed;\n }\n\n const value = this.value();\n return value == null ? '' : this.formatDate()(value, this.locale());\n });\n\n protected onType(event: Event): void {\n this.typed.set((event.target as HTMLInputElement).value);\n }\n\n protected commitTyped(): void {\n const typed = this.typed();\n if (typed === null) {\n return;\n }\n\n this.typed.set(null);\n if (typed.trim() === '') {\n this.setValue(null);\n return;\n }\n\n const parsed = this.parseDate()(typed);\n if (parsed != null) {\n this.setValue(parsed);\n }\n // On a parse failure, fall back to the formatted current value (display resets).\n }\n\n protected onPick(date: T | null): void {\n this.typed.set(null);\n this.setValue(date);\n if (this.closeOnSelection()) {\n this.open.set(false);\n }\n }\n\n private setValue(date: T | null): void {\n this.value.set(date);\n this.dateChange.emit(date);\n }\n}\n","import { XuiDateInput } from './lib/date-input';\n\nexport * from './lib/date-input';\n\nexport const XuiDateInputImports = [XuiDateInput] 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-date-input.mjs","sources":["../../../../../../libs/ui/date-input/xui/src/lib/date-input.ts","../../../../../../libs/ui/date-input/xui/src/index.ts","../../../../../../libs/ui/date-input/xui/src/xui-date-input.ts"],"sourcesContent":["import { BooleanInput, NumberInput } from '@angular/cdk/coercion';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n input,\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 { matCalendarTodayRound } from '@ng-icons/material-icons/round';\nimport { xui } from '@xui/core';\nimport { defaultXDateFormat, defaultXDateParse, injectXDateAdapter } from '@xui/core/date-time';\nimport { createXValueAccessor, provideXValueAccessor } from '@xui/core/forms';\nimport { XuiDatePickerImports } from '@xui/date-picker';\nimport { XuiIcon } from '@xui/icon';\nimport { XuiPopoverImports } from '@xui/popover';\nimport type { ClassValue } from 'clsx';\n\n/**\n * A date field: a text input paired with a popover calendar. Type a date (parsed\n * best-effort, or via a custom `parseDate`) or pick one from the calendar.\n * `[(value)]` two-way binding; `T` is the active `DateAdapter`'s type (`Date`\n * by default). It is a full `ControlValueAccessor`, so `ngModel`/`formControl`\n * bind to it directly.\n */\n@Component({\n selector: 'xui-date-input',\n imports: [NgIcon, XuiIcon, XuiPopoverImports, XuiDatePickerImports],\n providers: [provideXValueAccessor(() => XuiDateInput)],\n template: `\n <div [class]=\"groupClass()\">\n <input\n type=\"text\"\n [class]=\"fieldClass()\"\n [value]=\"displayValue()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n (input)=\"onType($event)\"\n (blur)=\"onBlur()\"\n (keydown.enter)=\"commitTyped()\"\n />\n <!-- The [disabled] binding feeds the popover trigger directive's input, so\n the native attribute needs its own binding to actually disable the button. -->\n <button\n type=\"button\"\n [class]=\"triggerClass()\"\n aria-label=\"Open calendar\"\n [disabled]=\"isDisabled()\"\n [attr.disabled]=\"isDisabled() ? '' : null\"\n [xuiPopover]=\"panel\"\n [open]=\"open()\"\n (openChange)=\"onOpenChange($event)\"\n [role]=\"'dialog'\"\n [minimal]=\"true\"\n placement=\"bottom-end\"\n >\n <ng-icon xui name=\"matCalendarTodayRound\" size=\"sm\" />\n </button>\n </div>\n\n <ng-template #panel>\n <xui-date-picker\n [value]=\"value()\"\n [min]=\"min()\"\n [max]=\"max()\"\n [dateFilter]=\"dateFilter()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n (valueChange)=\"onPick($event)\"\n />\n </ng-template>\n `,\n host: {\n '[class]': 'computedClass()'\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n viewProviders: [provideIcons({ matCalendarTodayRound })]\n})\nexport class XuiDateInput<T = Date> implements ControlValueAccessor {\n private readonly adapter = injectXDateAdapter<T>();\n\n readonly class = input<ClassValue>('');\n\n /** The selected date. Two-way bindable with `[(value)]`. */\n readonly value = model<T | null>(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\n readonly placeholder = input<string>('YYYY-MM-DD');\n readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n readonly closeOnSelection = input<boolean, BooleanInput>(true, { transform: booleanAttribute });\n readonly locale = input<string | undefined>(undefined);\n\n /** Format a value for the input. Defaults to a locale short date. */\n readonly formatDate = input<(date: T, locale?: string) => string>(defaultXDateFormat(this.adapter));\n\n /** Parse typed text into a value, or `null` if it can't. Defaults to `Date.parse`. */\n readonly parseDate = input<(text: string) => T | null>(defaultXDateParse);\n\n protected readonly open = model(false);\n private readonly typed = signal<string | null>(null);\n\n protected readonly cva = createXValueAccessor<T | null>({\n onWrite: value => {\n // A form write replaces any half-typed text — the display must show it.\n this.typed.set(null);\n this.value.set(value ?? null);\n },\n disabled: this.disabled\n });\n protected readonly isDisabled = this.cva.disabled;\n\n protected readonly computedClass = computed(() => xui('inline-block', this.class()));\n protected readonly groupClass = computed(() =>\n xui(\n 'border-border bg-surface-inset flex h-(--control-height-md) w-full min-w-48 items-center rounded-lg border pe-1 ps-(--control-padding-md) text-sm',\n 'focus-within:border-focus transition-colors',\n this.isDisabled() && 'cursor-not-allowed opacity-50'\n )\n );\n protected readonly fieldClass = computed(() =>\n xui('text-foreground placeholder:text-foreground-subtle flex-1 bg-transparent outline-none')\n );\n protected readonly triggerClass = computed(() =>\n xui(\n 'text-foreground-muted hover:bg-surface-raised hover:text-foreground flex size-8 items-center justify-center rounded'\n )\n );\n\n /** The input shows the live typing, else the formatted value. */\n protected readonly displayValue = computed(() => {\n const typed = this.typed();\n if (typed !== null) {\n return typed;\n }\n\n const value = this.value();\n return value == null ? '' : this.formatDate()(value, this.locale());\n });\n\n protected onType(event: Event): void {\n this.typed.set((event.target as HTMLInputElement).value);\n }\n\n protected onBlur(): void {\n this.commitTyped();\n this.cva.markTouched();\n }\n\n protected onOpenChange(open: boolean): void {\n this.open.set(open);\n if (!open) {\n this.cva.markTouched();\n }\n }\n\n protected commitTyped(): void {\n const typed = this.typed();\n if (typed === null) {\n return;\n }\n\n this.typed.set(null);\n if (typed.trim() === '') {\n this.setValue(null);\n return;\n }\n\n const parsed = this.parseDate()(typed);\n if (parsed != null) {\n this.setValue(parsed);\n }\n // On a parse failure, fall back to the formatted current value (display resets).\n }\n\n protected onPick(date: T | null): void {\n this.typed.set(null);\n this.setValue(date);\n if (this.closeOnSelection()) {\n // Closing from here bypasses the trigger's `openChange`, so touch explicitly.\n this.open.set(false);\n this.cva.markTouched();\n }\n }\n\n /** The single write path for user edits — typed text or a calendar pick. */\n private setValue(date: T | null): void {\n this.value.set(date);\n this.cva.notifyChange(date);\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 { XuiDateInput } from './lib/date-input';\n\nexport * from './lib/date-input';\n\nexport const XuiDateInputImports = [XuiDateInput] 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-input",
|
|
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,12 +38,13 @@
|
|
|
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/date-picker": "2.0.0-alpha.
|
|
45
|
-
"@xui/icon": "2.0.0-alpha.
|
|
46
|
-
"@xui/popover": "2.0.0-alpha.
|
|
44
|
+
"@xui/core": "2.0.0-alpha.13",
|
|
45
|
+
"@xui/date-picker": "2.0.0-alpha.13",
|
|
46
|
+
"@xui/icon": "2.0.0-alpha.13",
|
|
47
|
+
"@xui/popover": "2.0.0-alpha.13",
|
|
47
48
|
"clsx": "^2.1.1"
|
|
48
49
|
},
|
|
49
50
|
"publishConfig": {
|
|
@@ -1,14 +1,17 @@
|
|
|
1
|
+
import * as _xui_core_forms from '@xui/core/forms';
|
|
1
2
|
import * as _angular_core from '@angular/core';
|
|
2
|
-
import { BooleanInput } from '@angular/cdk/coercion';
|
|
3
|
+
import { NumberInput, BooleanInput } from '@angular/cdk/coercion';
|
|
4
|
+
import { ControlValueAccessor } from '@angular/forms';
|
|
3
5
|
import { ClassValue } from 'clsx';
|
|
4
6
|
|
|
5
7
|
/**
|
|
6
8
|
* A date field: a text input paired with a popover calendar. Type a date (parsed
|
|
7
9
|
* best-effort, or via a custom `parseDate`) or pick one from the calendar.
|
|
8
10
|
* `[(value)]` two-way binding; `T` is the active `DateAdapter`'s type (`Date`
|
|
9
|
-
* by default).
|
|
11
|
+
* by default). It is a full `ControlValueAccessor`, so `ngModel`/`formControl`
|
|
12
|
+
* bind to it directly.
|
|
10
13
|
*/
|
|
11
|
-
declare class XuiDateInput<T = Date> {
|
|
14
|
+
declare class XuiDateInput<T = Date> implements ControlValueAccessor {
|
|
12
15
|
private readonly adapter;
|
|
13
16
|
readonly class: _angular_core.InputSignal<ClassValue>;
|
|
14
17
|
/** The selected date. Two-way bindable with `[(value)]`. */
|
|
@@ -16,7 +19,7 @@ declare class XuiDateInput<T = Date> {
|
|
|
16
19
|
readonly min: _angular_core.InputSignal<T | null>;
|
|
17
20
|
readonly max: _angular_core.InputSignal<T | null>;
|
|
18
21
|
readonly dateFilter: _angular_core.InputSignal<((date: T) => boolean) | null>;
|
|
19
|
-
readonly firstDayOfWeek: _angular_core.
|
|
22
|
+
readonly firstDayOfWeek: _angular_core.InputSignalWithTransform<number, NumberInput>;
|
|
20
23
|
readonly placeholder: _angular_core.InputSignal<string>;
|
|
21
24
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
22
25
|
readonly closeOnSelection: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
@@ -25,9 +28,10 @@ declare class XuiDateInput<T = Date> {
|
|
|
25
28
|
readonly formatDate: _angular_core.InputSignal<(date: T, locale?: string) => string>;
|
|
26
29
|
/** Parse typed text into a value, or `null` if it can't. Defaults to `Date.parse`. */
|
|
27
30
|
readonly parseDate: _angular_core.InputSignal<(text: string) => T | null>;
|
|
28
|
-
readonly dateChange: _angular_core.OutputEmitterRef<T | null>;
|
|
29
31
|
protected readonly open: _angular_core.ModelSignal<boolean>;
|
|
30
32
|
private readonly typed;
|
|
33
|
+
protected readonly cva: _xui_core_forms.XValueAccessor<T | null>;
|
|
34
|
+
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
31
35
|
protected readonly computedClass: _angular_core.Signal<string>;
|
|
32
36
|
protected readonly groupClass: _angular_core.Signal<string>;
|
|
33
37
|
protected readonly fieldClass: _angular_core.Signal<string>;
|
|
@@ -35,11 +39,18 @@ declare class XuiDateInput<T = Date> {
|
|
|
35
39
|
/** The input shows the live typing, else the formatted value. */
|
|
36
40
|
protected readonly displayValue: _angular_core.Signal<string>;
|
|
37
41
|
protected onType(event: Event): void;
|
|
42
|
+
protected onBlur(): void;
|
|
43
|
+
protected onOpenChange(open: boolean): void;
|
|
38
44
|
protected commitTyped(): void;
|
|
39
45
|
protected onPick(date: T | null): void;
|
|
46
|
+
/** The single write path for user edits — typed text or a calendar pick. */
|
|
40
47
|
private setValue;
|
|
48
|
+
readonly writeValue: (value: T | null) => void;
|
|
49
|
+
readonly registerOnChange: (fn: _xui_core_forms.XChangeFn<T | null>) => void;
|
|
50
|
+
readonly registerOnTouched: (fn: _xui_core_forms.XTouchFn) => void;
|
|
51
|
+
readonly setDisabledState: (isDisabled: boolean) => void;
|
|
41
52
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<XuiDateInput<any>, never>;
|
|
42
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<XuiDateInput<any>, "xui-date-input", 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; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "closeOnSelection": { "alias": "closeOnSelection"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "formatDate": { "alias": "formatDate"; "required": false; "isSignal": true; }; "parseDate": { "alias": "parseDate"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "
|
|
53
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<XuiDateInput<any>, "xui-date-input", 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; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "closeOnSelection": { "alias": "closeOnSelection"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "formatDate": { "alias": "formatDate"; "required": false; "isSignal": true; }; "parseDate": { "alias": "parseDate"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "open": "openChange"; }, never, never, true, never>;
|
|
43
54
|
}
|
|
44
55
|
|
|
45
56
|
declare const XuiDateInputImports: readonly [typeof XuiDateInput];
|