@xui/time-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 +142 -156
- package/fesm2022/xui-time-picker.mjs +44 -20
- package/fesm2022/xui-time-picker.mjs.map +1 -1
- package/package.json +3 -2
- package/types/xui-time-picker.d.ts +19 -7
package/README.md
CHANGED
|
@@ -1,89 +1,103 @@
|
|
|
1
|
-
<
|
|
2
|
-
|
|
1
|
+
<h1 align="center">xUI</h1>
|
|
2
|
+
|
|
3
|
+
<p align="center">
|
|
4
|
+
<strong>90 Angular components, one npm package each, themed from a single token layer.</strong>
|
|
5
|
+
</p>
|
|
6
|
+
|
|
7
|
+
<p align="center">
|
|
8
|
+
<a href="https://xuijs.org">Documentation</a> ·
|
|
9
|
+
<a href="https://develop--67d2b4c756077a325913e5d9.chromatic.com/?globals=theme:dark">Storybook</a> ·
|
|
10
|
+
<a href="https://stackblitz.com/fork/xui">StackBlitz</a> ·
|
|
11
|
+
<a href="#components">Components</a>
|
|
12
|
+
</p>
|
|
13
|
+
|
|
14
|
+
<p align="center">
|
|
15
|
+
<a href="https://github.com/rikarin/xui/actions/workflows/release.yml"><img src="https://github.com/rikarin/xui/actions/workflows/release.yml/badge.svg?branch=master" alt="Build status" /></a>
|
|
16
|
+
<a href="https://www.npmjs.com/package/@xui/core"><img src="https://img.shields.io/npm/v/%40xui/core.svg" alt="npm version" /></a>
|
|
17
|
+
<a href="https://www.npmjs.com/org/xui"><img src="https://img.shields.io/npm/dm/%40xui/core.svg" alt="Downloads" /></a>
|
|
18
|
+
<a href="https://app.netlify.com/sites/xui/deploys"><img src="https://api.netlify.com/api/v1/badges/fa0cfd14-97df-47fa-8a7c-152e6d4cfda2/deploy-status" alt="Netlify status" /></a>
|
|
3
19
|
</p>
|
|
4
20
|
|
|
5
21
|
---
|
|
6
22
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
[](https://app.netlify.com/sites/xui/deploys)
|
|
23
|
+
xUI is an Angular 22 component library styled with Tailwind CSS 4. You compose it from directives and
|
|
24
|
+
standalone components rather than configuring one monolith, and the set goes well past the
|
|
25
|
+
primitives: data tables, dock managers, omnibars, node graphs and date ranges are packages here, not
|
|
26
|
+
things you are left to build.
|
|
12
27
|
|
|
13
|
-
|
|
28
|
+
```ts
|
|
29
|
+
import { XuiButtonImports } from '@xui/button';
|
|
30
|
+
|
|
31
|
+
@Component({
|
|
32
|
+
imports: [XuiButtonImports],
|
|
33
|
+
template: `<button xuiButton color="primary">Save changes</button>`
|
|
34
|
+
})
|
|
35
|
+
export class Example {}
|
|
36
|
+
```
|
|
14
37
|
|
|
15
38
|
## Features
|
|
16
39
|
|
|
17
|
-
- **
|
|
18
|
-
|
|
19
|
-
- **
|
|
20
|
-
|
|
21
|
-
- **
|
|
22
|
-
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
-
|
|
28
|
-
|
|
29
|
-
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
| Spinner | [](https://www.npmjs.com/package/%40xui/spinner)<br />[](https://www.npmjs.com/package/%40xui/spinner)<br />[](https://bundlephobia.com/result?p=%40xui/spinner) | Spinner component |
|
|
53
|
-
| Status | [](https://www.npmjs.com/package/%40xui/status)<br />[](https://www.npmjs.com/package/%40xui/status)<br />[](https://bundlephobia.com/result?p=%40xui/status) | Status component |
|
|
54
|
-
| Table | [](https://www.npmjs.com/package/%40xui/table)<br />[](https://www.npmjs.com/package/%40xui/table)<br />[](https://bundlephobia.com/result?p=%40xui/table) | Table component |
|
|
55
|
-
|
|
56
|
-
## Installation
|
|
57
|
-
|
|
58
|
-
Install package with **PNPM**
|
|
40
|
+
- **One package per component.** Install `@xui/button` and you ship a button, not a library. Each
|
|
41
|
+
package exports an imports barrel for standalone components.
|
|
42
|
+
- **Signals throughout.** Signal inputs, `OnPush` and zoneless change detection; no `zone.js`
|
|
43
|
+
required.
|
|
44
|
+
- **Themed by tokens, not overrides.** Components style themselves with `bg-surface`,
|
|
45
|
+
`text-foreground-muted`, `border-error-muted`. Light and dark both work without a single `dark:`
|
|
46
|
+
class, and re-colouring an intent is one CSS variable.
|
|
47
|
+
- **Typed variants.** Every visual axis is a typed input backed by
|
|
48
|
+
[CVA](https://cva.style), and the `class` input merges through `tailwind-merge` — your utility
|
|
49
|
+
wins instead of fighting the component's.
|
|
50
|
+
- **Angular CDK underneath.** Overlays, focus traps, roving tabindex, typeahead, drag and drop and
|
|
51
|
+
bidi come from `@angular/cdk`, so keyboard behaviour and RTL are not reimplemented per component.
|
|
52
|
+
- **Built for coding agents.** An MCP server and an agent skill expose the real API of every
|
|
53
|
+
package — see [AI coding agents](#ai-coding-agents).
|
|
54
|
+
|
|
55
|
+
## Requirements
|
|
56
|
+
|
|
57
|
+
| | |
|
|
58
|
+
| ----------------------- | --- |
|
|
59
|
+
| Angular | 22 |
|
|
60
|
+
| Tailwind CSS | 4 |
|
|
61
|
+
| Node (development only) | 24 |
|
|
62
|
+
|
|
63
|
+
## Getting started
|
|
64
|
+
|
|
65
|
+
```bash
|
|
66
|
+
ng add @xui/core
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
That installs the core package and wires your global stylesheet: the theme import, the CDK overlay
|
|
70
|
+
stylesheet, and a `@source` glob pointing at the published packages. It is idempotent, so running it
|
|
71
|
+
again only adds what is missing. Use `nx add @xui/core` in an Nx workspace, and `--skip-overlay` if
|
|
72
|
+
you will not use dialogs, drawers, popovers, tooltips, menus or toasts.
|
|
73
|
+
|
|
74
|
+
Then add the components you need:
|
|
59
75
|
|
|
60
76
|
```bash
|
|
61
|
-
pnpm
|
|
77
|
+
pnpm add @xui/button @xui/dialog @xui/icon
|
|
62
78
|
```
|
|
63
79
|
|
|
64
80
|
## Theming
|
|
65
81
|
|
|
66
|
-
|
|
67
|
-
`text-foreground-muted`, `border-error-muted` — that resolve through the token layer shipped with
|
|
68
|
-
`@xui/core`. Import it once, after Tailwind:
|
|
82
|
+
To wire the styles by hand, import the token layer once after Tailwind:
|
|
69
83
|
|
|
70
84
|
```css
|
|
71
85
|
@import 'tailwindcss';
|
|
72
86
|
@import '@xui/core/styles/theme.css';
|
|
73
87
|
|
|
74
|
-
/* Only needed
|
|
75
|
-
|
|
88
|
+
/* Only needed for an overlay surface — popover, tooltip, menu, dialog, drawer
|
|
89
|
+
or toast. Without it, overlays render in the document flow. */
|
|
76
90
|
@import '@angular/cdk/overlay-prebuilt.css';
|
|
77
91
|
|
|
78
|
-
/*
|
|
92
|
+
/* Tailwind only emits utilities it can see, and it cannot see node_modules by default. */
|
|
79
93
|
@source '../node_modules/@xui';
|
|
80
94
|
```
|
|
81
95
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
96
|
+
Put `.dark` (or `[data-theme='dark']`) on `<html>` to switch themes; with neither present the theme
|
|
97
|
+
follows `prefers-color-scheme`. Both selectors work on any element, so a subtree can render in the
|
|
98
|
+
opposite theme.
|
|
85
99
|
|
|
86
|
-
Re-theme by overriding tokens after the import
|
|
100
|
+
Re-theme by overriding tokens after the import. The `darker` / `lighter` / `subtle` / `muted` /
|
|
87
101
|
`emphasis` steps of each intent are derived, so one declaration re-colours the whole ramp:
|
|
88
102
|
|
|
89
103
|
```css
|
|
@@ -93,37 +107,48 @@ Re-theme by overriding tokens after the import — the `darker` / `lighter` / `s
|
|
|
93
107
|
}
|
|
94
108
|
```
|
|
95
109
|
|
|
96
|
-
|
|
97
|
-
|
|
110
|
+
Controls share one density scale — 24 / 30 / 40px for `sm` / default / `lg` — so a button, an input
|
|
111
|
+
and a date field on the same row line up. Override `--control-height-md` to re-tune the library.
|
|
98
112
|
|
|
99
|
-
|
|
113
|
+
The full token reference, rendered in both themes, is the **Design tokens** page in Storybook.
|
|
100
114
|
|
|
101
|
-
|
|
115
|
+
## Components
|
|
102
116
|
|
|
103
|
-
|
|
117
|
+
<details>
|
|
118
|
+
<summary><strong>All 90 packages</strong>, grouped as they appear in Storybook</summary>
|
|
104
119
|
|
|
105
|
-
|
|
120
|
+
<br />
|
|
106
121
|
|
|
107
|
-
|
|
122
|
+
**Foundations** — [`@xui/icon`](https://www.npmjs.com/package/@xui/icon) · [`@xui/link`](https://www.npmjs.com/package/@xui/link) · [`@xui/text`](https://www.npmjs.com/package/@xui/text)
|
|
108
123
|
|
|
109
|
-
|
|
110
|
-
pnpm start
|
|
111
|
-
```
|
|
124
|
+
**Actions** — [`@xui/button`](https://www.npmjs.com/package/@xui/button) · [`@xui/button-group`](https://www.npmjs.com/package/@xui/button-group) · [`@xui/hotkeys`](https://www.npmjs.com/package/@xui/hotkeys)
|
|
112
125
|
|
|
113
|
-
|
|
126
|
+
**Forms** — [`@xui/cascader`](https://www.npmjs.com/package/@xui/cascader) · [`@xui/checkbox`](https://www.npmjs.com/package/@xui/checkbox) · [`@xui/color-picker`](https://www.npmjs.com/package/@xui/color-picker) · [`@xui/control-card`](https://www.npmjs.com/package/@xui/control-card) · [`@xui/control-group`](https://www.npmjs.com/package/@xui/control-group) · [`@xui/editable-text`](https://www.npmjs.com/package/@xui/editable-text) · [`@xui/file-input`](https://www.npmjs.com/package/@xui/file-input) · [`@xui/form-field`](https://www.npmjs.com/package/@xui/form-field) · [`@xui/html-select`](https://www.npmjs.com/package/@xui/html-select) · [`@xui/input`](https://www.npmjs.com/package/@xui/input) · [`@xui/input-otp`](https://www.npmjs.com/package/@xui/input-otp) · [`@xui/label`](https://www.npmjs.com/package/@xui/label) · [`@xui/multi-select`](https://www.npmjs.com/package/@xui/multi-select) · [`@xui/numeric-input`](https://www.npmjs.com/package/@xui/numeric-input) · [`@xui/radio`](https://www.npmjs.com/package/@xui/radio) · [`@xui/rate`](https://www.npmjs.com/package/@xui/rate) · [`@xui/rich-text-editor`](https://www.npmjs.com/package/@xui/rich-text-editor) · [`@xui/segmented-control`](https://www.npmjs.com/package/@xui/segmented-control) · [`@xui/select`](https://www.npmjs.com/package/@xui/select) · [`@xui/slider`](https://www.npmjs.com/package/@xui/slider) · [`@xui/suggest`](https://www.npmjs.com/package/@xui/suggest) · [`@xui/switch`](https://www.npmjs.com/package/@xui/switch) · [`@xui/tag-input`](https://www.npmjs.com/package/@xui/tag-input) · [`@xui/textarea`](https://www.npmjs.com/package/@xui/textarea) · [`@xui/transfer`](https://www.npmjs.com/package/@xui/transfer) · [`@xui/tree-select`](https://www.npmjs.com/package/@xui/tree-select) · [`@xui/upload`](https://www.npmjs.com/package/@xui/upload)
|
|
114
127
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
128
|
+
**Date & time** — [`@xui/date-input`](https://www.npmjs.com/package/@xui/date-input) · [`@xui/date-picker`](https://www.npmjs.com/package/@xui/date-picker) · [`@xui/date-range-input`](https://www.npmjs.com/package/@xui/date-range-input) · [`@xui/date-range-picker`](https://www.npmjs.com/package/@xui/date-range-picker) · [`@xui/time-picker`](https://www.npmjs.com/package/@xui/time-picker) · [`@xui/timezone-select`](https://www.npmjs.com/package/@xui/timezone-select)
|
|
129
|
+
|
|
130
|
+
**Data display** — [`@xui/avatar`](https://www.npmjs.com/package/@xui/avatar) · [`@xui/badge`](https://www.npmjs.com/package/@xui/badge) · [`@xui/card`](https://www.npmjs.com/package/@xui/card) · [`@xui/card-list`](https://www.npmjs.com/package/@xui/card-list) · [`@xui/carousel`](https://www.npmjs.com/package/@xui/carousel) · [`@xui/data-table`](https://www.npmjs.com/package/@xui/data-table) · [`@xui/descriptions`](https://www.npmjs.com/package/@xui/descriptions) · [`@xui/entity-title`](https://www.npmjs.com/package/@xui/entity-title) · [`@xui/kbd`](https://www.npmjs.com/package/@xui/kbd) · [`@xui/statistic`](https://www.npmjs.com/package/@xui/statistic) · [`@xui/status`](https://www.npmjs.com/package/@xui/status) · [`@xui/table`](https://www.npmjs.com/package/@xui/table) · [`@xui/tag`](https://www.npmjs.com/package/@xui/tag) · [`@xui/timeline`](https://www.npmjs.com/package/@xui/timeline) · [`@xui/tree`](https://www.npmjs.com/package/@xui/tree)
|
|
131
|
+
|
|
132
|
+
**Navigation** — [`@xui/breadcrumb`](https://www.npmjs.com/package/@xui/breadcrumb) · [`@xui/menubar`](https://www.npmjs.com/package/@xui/menubar) · [`@xui/navbar`](https://www.npmjs.com/package/@xui/navbar) · [`@xui/navigation-menu`](https://www.npmjs.com/package/@xui/navigation-menu) · [`@xui/pagination`](https://www.npmjs.com/package/@xui/pagination) · [`@xui/panel-stack`](https://www.npmjs.com/package/@xui/panel-stack) · [`@xui/steps`](https://www.npmjs.com/package/@xui/steps) · [`@xui/tabs`](https://www.npmjs.com/package/@xui/tabs)
|
|
133
|
+
|
|
134
|
+
**Overlays** — [`@xui/alert`](https://www.npmjs.com/package/@xui/alert) · [`@xui/alert-dialog`](https://www.npmjs.com/package/@xui/alert-dialog) · [`@xui/context-menu`](https://www.npmjs.com/package/@xui/context-menu) · [`@xui/dialog`](https://www.npmjs.com/package/@xui/dialog) · [`@xui/drawer`](https://www.npmjs.com/package/@xui/drawer) · [`@xui/menu`](https://www.npmjs.com/package/@xui/menu) · [`@xui/omnibar`](https://www.npmjs.com/package/@xui/omnibar) · [`@xui/popover`](https://www.npmjs.com/package/@xui/popover) · [`@xui/toast`](https://www.npmjs.com/package/@xui/toast) · [`@xui/tooltip`](https://www.npmjs.com/package/@xui/tooltip)
|
|
135
|
+
|
|
136
|
+
**Feedback** — [`@xui/callout`](https://www.npmjs.com/package/@xui/callout) · [`@xui/non-ideal-state`](https://www.npmjs.com/package/@xui/non-ideal-state) · [`@xui/progress-bar`](https://www.npmjs.com/package/@xui/progress-bar) · [`@xui/result`](https://www.npmjs.com/package/@xui/result) · [`@xui/skeleton`](https://www.npmjs.com/package/@xui/skeleton) · [`@xui/spinner`](https://www.npmjs.com/package/@xui/spinner)
|
|
137
|
+
|
|
138
|
+
**Layout** — [`@xui/accordion`](https://www.npmjs.com/package/@xui/accordion) · [`@xui/aspect-ratio`](https://www.npmjs.com/package/@xui/aspect-ratio) · [`@xui/collapse`](https://www.npmjs.com/package/@xui/collapse) · [`@xui/divider`](https://www.npmjs.com/package/@xui/divider) · [`@xui/dock-manager`](https://www.npmjs.com/package/@xui/dock-manager) · [`@xui/overflow-list`](https://www.npmjs.com/package/@xui/overflow-list) · [`@xui/scroll-area`](https://www.npmjs.com/package/@xui/scroll-area) · [`@xui/section`](https://www.npmjs.com/package/@xui/section) · [`@xui/splitter`](https://www.npmjs.com/package/@xui/splitter)
|
|
139
|
+
|
|
140
|
+
**Visualisation** — [`@xui/echarts`](https://www.npmjs.com/package/@xui/echarts) · [`@xui/konva`](https://www.npmjs.com/package/@xui/konva) · [`@xui/node-graph`](https://www.npmjs.com/package/@xui/node-graph)
|
|
141
|
+
|
|
142
|
+
</details>
|
|
118
143
|
|
|
119
144
|
## AI coding agents
|
|
120
145
|
|
|
121
146
|
Two pieces of tooling teach coding agents how to build with xUI.
|
|
122
147
|
|
|
123
|
-
**MCP server** — [`@xui/mcp`](
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
148
|
+
**MCP server** — [`@xui/mcp`](libs/mcp/README.md) exposes every package's real API (selectors, signal
|
|
149
|
+
inputs, variant axes, outputs), the design tokens, the docs and the Storybook examples as MCP tools.
|
|
150
|
+
It extracts them from the library sources, so every package is covered and the answers match the
|
|
151
|
+
installed version.
|
|
127
152
|
|
|
128
153
|
```json
|
|
129
154
|
{
|
|
@@ -133,85 +158,46 @@ answers match the installed version.
|
|
|
133
158
|
}
|
|
134
159
|
```
|
|
135
160
|
|
|
136
|
-
In this
|
|
137
|
-
once so it exists.
|
|
161
|
+
In this repository `.mcp.json` already points at `dist/libs/mcp/src/server.js` — run
|
|
162
|
+
`pnpm nx build mcp` once so it exists.
|
|
138
163
|
|
|
139
|
-
**Skill** — [`skills/xui`](
|
|
164
|
+
**Skill** — [`skills/xui`](skills/xui/SKILL.md) is the procedural knowledge: the three-layer
|
|
140
165
|
architecture, discovery through the MCP server, composition and styling rules, theming, the
|
|
141
166
|
generators, and the conventions for authoring a package inside the monorepo. `.claude/skills/xui`
|
|
142
167
|
links to it for agents working in this repository.
|
|
143
168
|
|
|
144
|
-
##
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
- [ ] Input OTP
|
|
180
|
-
- [ ] Toggle Group
|
|
181
|
-
|
|
182
|
-
### Additional
|
|
183
|
-
|
|
184
|
-
- [ ] Decagram
|
|
185
|
-
- [ ] Settings
|
|
186
|
-
- [ ] Drawer
|
|
187
|
-
- [ ] Panel Bar
|
|
188
|
-
- [ ] Textarea
|
|
189
|
-
- [ ] Time Picker
|
|
190
|
-
- [ ] Image Upload
|
|
191
|
-
- [ ] Banner
|
|
192
|
-
- [ ] Snack bar
|
|
193
|
-
|
|
194
|
-
## Opinionated "components"
|
|
195
|
-
|
|
196
|
-
- [ ] Graph View (Nodes)
|
|
197
|
-
- [ ] Analysis
|
|
198
|
-
- [ ] Charts (NG Charts?)
|
|
199
|
-
|
|
200
|
-
## CLI
|
|
201
|
-
|
|
202
|
-
Make cli to install the components
|
|
203
|
-
|
|
204
|
-
## TODO
|
|
205
|
-
|
|
206
|
-
- Button
|
|
207
|
-
|
|
208
|
-
- Icon
|
|
209
|
-
- Shine
|
|
210
|
-
|
|
211
|
-
- Breadcrumb
|
|
212
|
-
|
|
213
|
-
- fix styling issues
|
|
214
|
-
- on hover stuff
|
|
215
|
-
- data driven component
|
|
216
|
-
|
|
217
|
-
- adjust generator to generate stories into the apps/storybook
|
|
169
|
+
## Browser support
|
|
170
|
+
|
|
171
|
+
The browsers Angular itself supports — see the
|
|
172
|
+
[Angular browser support policy](https://angular.dev/reference/versions#browser-support).
|
|
173
|
+
|
|
174
|
+
## Development
|
|
175
|
+
|
|
176
|
+
The workspace is [Nx](https://nx.dev) + pnpm.
|
|
177
|
+
|
|
178
|
+
```bash
|
|
179
|
+
pnpm install
|
|
180
|
+
pnpm start # documentation site on :4200
|
|
181
|
+
pnpm storybook # component gallery on :4400
|
|
182
|
+
pnpm nx serve admin # the example admin application
|
|
183
|
+
pnpm test # unit tests
|
|
184
|
+
pnpm nx test-storybook ui-storybook # render every story in headless Chromium
|
|
185
|
+
pnpm build # build every package
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
Commits follow [Conventional Commits](https://www.conventionalcommits.org) and are linted — the
|
|
189
|
+
release is cut from them. See [docs/releasing.md](docs/releasing.md) for how a version is published,
|
|
190
|
+
[apps/ui-storybook/README.md](apps/ui-storybook/README.md) before writing stories, and
|
|
191
|
+
[apps/app/README.md](apps/app/README.md) for the documentation site, whose component pages are
|
|
192
|
+
generated from those same stories, and [apps/admin/README.md](apps/admin/README.md) for the example
|
|
193
|
+
admin application — a full app built from these packages, which is the fastest way to see how they
|
|
194
|
+
fit together.
|
|
195
|
+
|
|
196
|
+
## Contributing
|
|
197
|
+
|
|
198
|
+
Bugs and ideas are welcome in [issues](https://github.com/Rikarin/xui/issues). For a change of any
|
|
199
|
+
size, open an issue first so the API can be agreed before the code exists.
|
|
200
|
+
|
|
201
|
+
## License
|
|
202
|
+
|
|
203
|
+
See [LICENSE](LICENSE).
|
|
@@ -1,17 +1,20 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, model, booleanAttribute,
|
|
2
|
+
import { inject, ElementRef, input, model, booleanAttribute, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
3
|
import { xui } from '@xui/core';
|
|
4
|
-
import {
|
|
4
|
+
import { injectXDateAdapter } from '@xui/core/date-time';
|
|
5
|
+
import { createXValueAccessor, provideXValueAccessor } from '@xui/core/forms';
|
|
5
6
|
|
|
6
7
|
const pad = (value, length = 2) => String(value).padStart(length, '0');
|
|
7
8
|
/**
|
|
8
9
|
* A time field with hour/minute (and optional second/millisecond) spin buttons.
|
|
9
10
|
* Arrow keys or the input step each field with wrap-around; `useAmPm` switches to
|
|
10
11
|
* a 12-hour clock with an AM/PM toggle. `[(value)]` two-way binding; `T` is the
|
|
11
|
-
* active `DateAdapter`'s type (a `Date` by default).
|
|
12
|
+
* active `DateAdapter`'s type (a `Date` by default). It is a full
|
|
13
|
+
* `ControlValueAccessor`, so `ngModel`/`formControl` bind to it directly.
|
|
12
14
|
*/
|
|
13
15
|
class XuiTimePicker {
|
|
14
|
-
adapter =
|
|
16
|
+
adapter = injectXDateAdapter();
|
|
17
|
+
host = inject(ElementRef);
|
|
15
18
|
class = input('', /* @ts-ignore */
|
|
16
19
|
...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
17
20
|
/** The current time. Two-way bindable with `[(value)]`. */
|
|
@@ -21,7 +24,11 @@ class XuiTimePicker {
|
|
|
21
24
|
...(ngDevMode ? [{ debugName: "precision" }] : /* istanbul ignore next */ []));
|
|
22
25
|
useAmPm = input(false, { ...(ngDevMode ? { debugName: "useAmPm" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
23
26
|
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
24
|
-
|
|
27
|
+
cva = createXValueAccessor({
|
|
28
|
+
onWrite: value => this.value.set(value ?? null),
|
|
29
|
+
disabled: this.disabled
|
|
30
|
+
});
|
|
31
|
+
isDisabled = this.cva.disabled;
|
|
25
32
|
pad = pad;
|
|
26
33
|
/** A concrete working value — the bound value, or today at 00:00 when empty. */
|
|
27
34
|
working = computed(() => this.value() ?? this.adapter.startOfDay(this.adapter.now()), /* @ts-ignore */
|
|
@@ -51,7 +58,7 @@ class XuiTimePicker {
|
|
|
51
58
|
...(ngDevMode ? [{ debugName: "displayHour" }] : /* istanbul ignore next */ []));
|
|
52
59
|
computedClass = computed(() => xui('inline-block', this.class()), /* @ts-ignore */
|
|
53
60
|
...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
|
|
54
|
-
groupClass = computed(() => xui('border-border bg-surface-inset inline-flex h-(--control-height-md) items-center gap-1 rounded-lg border px-(--control-padding-sm)', 'focus-within:border-focus transition-colors', this.
|
|
61
|
+
groupClass = computed(() => xui('border-border bg-surface-inset inline-flex h-(--control-height-md) items-center gap-1 rounded-lg border px-(--control-padding-sm)', 'focus-within:border-focus transition-colors', this.isDisabled() && 'cursor-not-allowed opacity-50'), /* @ts-ignore */
|
|
55
62
|
...(ngDevMode ? [{ debugName: "groupClass" }] : /* istanbul ignore next */ []));
|
|
56
63
|
fieldClass = computed(() => xui('text-foreground w-7 bg-transparent text-center text-sm tabular-nums outline-none'), /* @ts-ignore */
|
|
57
64
|
...(ngDevMode ? [{ debugName: "fieldClass" }] : /* istanbul ignore next */ []));
|
|
@@ -97,13 +104,28 @@ class XuiTimePicker {
|
|
|
97
104
|
wrap(value, size) {
|
|
98
105
|
return ((value % size) + size) % size;
|
|
99
106
|
}
|
|
107
|
+
/** The single write path for user edits — typing, arrow keys or the AM/PM toggle. */
|
|
100
108
|
commit(unit, value) {
|
|
109
|
+
if (this.isDisabled()) {
|
|
110
|
+
return;
|
|
111
|
+
}
|
|
101
112
|
const next = this.adapter.set(this.working(), { [unit]: value });
|
|
102
113
|
this.value.set(next);
|
|
103
|
-
this.
|
|
114
|
+
this.cva.notifyChange(next);
|
|
115
|
+
}
|
|
116
|
+
/** Touched fires when focus leaves the picker, not while moving between fields. */
|
|
117
|
+
onFocusOut(event) {
|
|
118
|
+
const next = event.relatedTarget;
|
|
119
|
+
if (!next || !this.host.nativeElement.contains(next)) {
|
|
120
|
+
this.cva.markTouched();
|
|
121
|
+
}
|
|
104
122
|
}
|
|
123
|
+
writeValue = this.cva.writeValue;
|
|
124
|
+
registerOnChange = this.cva.registerOnChange;
|
|
125
|
+
registerOnTouched = this.cva.registerOnTouched;
|
|
126
|
+
setDisabledState = this.cva.setDisabledState;
|
|
105
127
|
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: XuiTimePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
106
|
-
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: XuiTimePicker, isStandalone: true, selector: "xui-time-picker", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, precision: { classPropertyName: "precision", publicName: "precision", isSignal: true, isRequired: false, transformFunction: null }, useAmPm: { classPropertyName: "useAmPm", publicName: "useAmPm", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange",
|
|
128
|
+
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: XuiTimePicker, isStandalone: true, selector: "xui-time-picker", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, precision: { classPropertyName: "precision", publicName: "precision", isSignal: true, isRequired: false, transformFunction: null }, useAmPm: { classPropertyName: "useAmPm", publicName: "useAmPm", 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((() => XuiTimePicker))], ngImport: i0, template: `
|
|
107
129
|
<div [class]="groupClass()">
|
|
108
130
|
<input
|
|
109
131
|
type="text"
|
|
@@ -111,7 +133,7 @@ class XuiTimePicker {
|
|
|
111
133
|
role="spinbutton"
|
|
112
134
|
aria-label="Hours"
|
|
113
135
|
[class]="fieldClass()"
|
|
114
|
-
[disabled]="
|
|
136
|
+
[disabled]="isDisabled()"
|
|
115
137
|
[value]="pad(displayHour())"
|
|
116
138
|
[attr.aria-valuenow]="displayHour()"
|
|
117
139
|
(focus)="$any($event.target).select()"
|
|
@@ -125,7 +147,7 @@ class XuiTimePicker {
|
|
|
125
147
|
role="spinbutton"
|
|
126
148
|
aria-label="Minutes"
|
|
127
149
|
[class]="fieldClass()"
|
|
128
|
-
[disabled]="
|
|
150
|
+
[disabled]="isDisabled()"
|
|
129
151
|
[value]="pad(minute())"
|
|
130
152
|
[attr.aria-valuenow]="minute()"
|
|
131
153
|
(focus)="$any($event.target).select()"
|
|
@@ -141,7 +163,7 @@ class XuiTimePicker {
|
|
|
141
163
|
role="spinbutton"
|
|
142
164
|
aria-label="Seconds"
|
|
143
165
|
[class]="fieldClass()"
|
|
144
|
-
[disabled]="
|
|
166
|
+
[disabled]="isDisabled()"
|
|
145
167
|
[value]="pad(second())"
|
|
146
168
|
[attr.aria-valuenow]="second()"
|
|
147
169
|
(focus)="$any($event.target).select()"
|
|
@@ -158,7 +180,7 @@ class XuiTimePicker {
|
|
|
158
180
|
role="spinbutton"
|
|
159
181
|
aria-label="Milliseconds"
|
|
160
182
|
[class]="fieldClass() + ' w-10'"
|
|
161
|
-
[disabled]="
|
|
183
|
+
[disabled]="isDisabled()"
|
|
162
184
|
[value]="pad(millisecond(), 3)"
|
|
163
185
|
[attr.aria-valuenow]="millisecond()"
|
|
164
186
|
(focus)="$any($event.target).select()"
|
|
@@ -168,7 +190,7 @@ class XuiTimePicker {
|
|
|
168
190
|
}
|
|
169
191
|
|
|
170
192
|
@if (useAmPm()) {
|
|
171
|
-
<button type="button" [class]="ampmClass()" [disabled]="
|
|
193
|
+
<button type="button" [class]="ampmClass()" [disabled]="isDisabled()" (click)="toggleMeridiem()">
|
|
172
194
|
{{ isPm() ? 'PM' : 'AM' }}
|
|
173
195
|
</button>
|
|
174
196
|
}
|
|
@@ -180,6 +202,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
180
202
|
args: [{
|
|
181
203
|
selector: 'xui-time-picker',
|
|
182
204
|
imports: [],
|
|
205
|
+
providers: [provideXValueAccessor((() => XuiTimePicker))],
|
|
183
206
|
template: `
|
|
184
207
|
<div [class]="groupClass()">
|
|
185
208
|
<input
|
|
@@ -188,7 +211,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
188
211
|
role="spinbutton"
|
|
189
212
|
aria-label="Hours"
|
|
190
213
|
[class]="fieldClass()"
|
|
191
|
-
[disabled]="
|
|
214
|
+
[disabled]="isDisabled()"
|
|
192
215
|
[value]="pad(displayHour())"
|
|
193
216
|
[attr.aria-valuenow]="displayHour()"
|
|
194
217
|
(focus)="$any($event.target).select()"
|
|
@@ -202,7 +225,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
202
225
|
role="spinbutton"
|
|
203
226
|
aria-label="Minutes"
|
|
204
227
|
[class]="fieldClass()"
|
|
205
|
-
[disabled]="
|
|
228
|
+
[disabled]="isDisabled()"
|
|
206
229
|
[value]="pad(minute())"
|
|
207
230
|
[attr.aria-valuenow]="minute()"
|
|
208
231
|
(focus)="$any($event.target).select()"
|
|
@@ -218,7 +241,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
218
241
|
role="spinbutton"
|
|
219
242
|
aria-label="Seconds"
|
|
220
243
|
[class]="fieldClass()"
|
|
221
|
-
[disabled]="
|
|
244
|
+
[disabled]="isDisabled()"
|
|
222
245
|
[value]="pad(second())"
|
|
223
246
|
[attr.aria-valuenow]="second()"
|
|
224
247
|
(focus)="$any($event.target).select()"
|
|
@@ -235,7 +258,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
235
258
|
role="spinbutton"
|
|
236
259
|
aria-label="Milliseconds"
|
|
237
260
|
[class]="fieldClass() + ' w-10'"
|
|
238
|
-
[disabled]="
|
|
261
|
+
[disabled]="isDisabled()"
|
|
239
262
|
[value]="pad(millisecond(), 3)"
|
|
240
263
|
[attr.aria-valuenow]="millisecond()"
|
|
241
264
|
(focus)="$any($event.target).select()"
|
|
@@ -245,19 +268,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
245
268
|
}
|
|
246
269
|
|
|
247
270
|
@if (useAmPm()) {
|
|
248
|
-
<button type="button" [class]="ampmClass()" [disabled]="
|
|
271
|
+
<button type="button" [class]="ampmClass()" [disabled]="isDisabled()" (click)="toggleMeridiem()">
|
|
249
272
|
{{ isPm() ? 'PM' : 'AM' }}
|
|
250
273
|
</button>
|
|
251
274
|
}
|
|
252
275
|
</div>
|
|
253
276
|
`,
|
|
254
277
|
host: {
|
|
255
|
-
'[class]': 'computedClass()'
|
|
278
|
+
'[class]': 'computedClass()',
|
|
279
|
+
'(focusout)': 'onFocusOut($event)'
|
|
256
280
|
},
|
|
257
281
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
258
282
|
encapsulation: ViewEncapsulation.None
|
|
259
283
|
}]
|
|
260
|
-
}], 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"] }], precision: [{ type: i0.Input, args: [{ isSignal: true, alias: "precision", required: false }] }], useAmPm: [{ type: i0.Input, args: [{ isSignal: true, alias: "useAmPm", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }]
|
|
284
|
+
}], 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"] }], precision: [{ type: i0.Input, args: [{ isSignal: true, alias: "precision", required: false }] }], useAmPm: [{ type: i0.Input, args: [{ isSignal: true, alias: "useAmPm", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
261
285
|
|
|
262
286
|
const XuiTimePickerImports = [XuiTimePicker];
|
|
263
287
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"xui-time-picker.mjs","sources":["../../../../../../libs/ui/time-picker/xui/src/lib/time-picker.ts","../../../../../../libs/ui/time-picker/xui/src/index.ts","../../../../../../libs/ui/time-picker/xui/src/xui-time-picker.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n input,\n model,\n output,\n ViewEncapsulation\n} from '@angular/core';\nimport { xui } from '@xui/core';\nimport { injectDateAdapter } from '@xui/core/date-time';\nimport type { ClassValue } from 'clsx';\n\n/** How fine the picker edits. */\nexport type TimePrecision = 'minute' | 'second' | 'millisecond';\n\nconst pad = (value: number, length = 2): string => String(value).padStart(length, '0');\n\n/**\n * A time field with hour/minute (and optional second/millisecond) spin buttons.\n * Arrow keys or the input step each field with wrap-around; `useAmPm` switches to\n * a 12-hour clock with an AM/PM toggle. `[(value)]` two-way binding; `T` is the\n * active `DateAdapter`'s type (a `Date` by default).\n */\n@Component({\n selector: 'xui-time-picker',\n imports: [],\n template: `\n <div [class]=\"groupClass()\">\n <input\n type=\"text\"\n inputmode=\"numeric\"\n role=\"spinbutton\"\n aria-label=\"Hours\"\n [class]=\"fieldClass()\"\n [disabled]=\"disabled()\"\n [value]=\"pad(displayHour())\"\n [attr.aria-valuenow]=\"displayHour()\"\n (focus)=\"$any($event.target).select()\"\n (input)=\"onField('hour', $event)\"\n (keydown)=\"onKeydown('hour', $event)\"\n />\n <span class=\"text-foreground-muted text-sm\">:</span>\n <input\n type=\"text\"\n inputmode=\"numeric\"\n role=\"spinbutton\"\n aria-label=\"Minutes\"\n [class]=\"fieldClass()\"\n [disabled]=\"disabled()\"\n [value]=\"pad(minute())\"\n [attr.aria-valuenow]=\"minute()\"\n (focus)=\"$any($event.target).select()\"\n (input)=\"onField('minute', $event)\"\n (keydown)=\"onKeydown('minute', $event)\"\n />\n\n @if (showSeconds()) {\n <span class=\"text-foreground-muted text-sm\">:</span>\n <input\n type=\"text\"\n inputmode=\"numeric\"\n role=\"spinbutton\"\n aria-label=\"Seconds\"\n [class]=\"fieldClass()\"\n [disabled]=\"disabled()\"\n [value]=\"pad(second())\"\n [attr.aria-valuenow]=\"second()\"\n (focus)=\"$any($event.target).select()\"\n (input)=\"onField('second', $event)\"\n (keydown)=\"onKeydown('second', $event)\"\n />\n }\n\n @if (showMillis()) {\n <span class=\"text-foreground-muted text-sm\">.</span>\n <input\n type=\"text\"\n inputmode=\"numeric\"\n role=\"spinbutton\"\n aria-label=\"Milliseconds\"\n [class]=\"fieldClass() + ' w-10'\"\n [disabled]=\"disabled()\"\n [value]=\"pad(millisecond(), 3)\"\n [attr.aria-valuenow]=\"millisecond()\"\n (focus)=\"$any($event.target).select()\"\n (input)=\"onField('millisecond', $event)\"\n (keydown)=\"onKeydown('millisecond', $event)\"\n />\n }\n\n @if (useAmPm()) {\n <button type=\"button\" [class]=\"ampmClass()\" [disabled]=\"disabled()\" (click)=\"toggleMeridiem()\">\n {{ isPm() ? 'PM' : 'AM' }}\n </button>\n }\n </div>\n `,\n host: {\n '[class]': 'computedClass()'\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None\n})\nexport class XuiTimePicker<T = Date> {\n private readonly adapter = injectDateAdapter<T>();\n\n readonly class = input<ClassValue>('');\n\n /** The current time. Two-way bindable with `[(value)]`. */\n readonly value = model<T | null>(null);\n\n readonly precision = input<TimePrecision>('minute');\n readonly useAmPm = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n readonly timeChange = output<T>();\n\n protected readonly pad = pad;\n\n /** A concrete working value — the bound value, or today at 00:00 when empty. */\n private readonly working = computed(() => this.value() ?? this.adapter.startOfDay(this.adapter.now()));\n\n protected readonly showSeconds = computed(() => this.precision() !== 'minute');\n protected readonly showMillis = computed(() => this.precision() === 'millisecond');\n\n protected readonly hour24 = computed(() => this.adapter.getHours(this.working()));\n protected readonly minute = computed(() => this.adapter.getMinutes(this.working()));\n protected readonly second = computed(() => this.adapter.getSeconds(this.working()));\n protected readonly millisecond = computed(() => this.adapter.getMilliseconds(this.working()));\n protected readonly isPm = computed(() => this.hour24() >= 12);\n\n protected readonly displayHour = computed(() => {\n const hour = this.hour24();\n if (!this.useAmPm()) {\n return hour;\n }\n const twelve = hour % 12;\n return twelve === 0 ? 12 : twelve;\n });\n\n protected readonly computedClass = computed(() => xui('inline-block', this.class()));\n protected readonly groupClass = computed(() =>\n xui(\n 'border-border bg-surface-inset inline-flex h-(--control-height-md) items-center gap-1 rounded-lg border px-(--control-padding-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 w-7 bg-transparent text-center text-sm tabular-nums outline-none')\n );\n protected readonly ampmClass = computed(() =>\n xui('text-foreground-muted hover:bg-surface-raised ms-1 rounded px-1.5 py-0.5 text-xs font-medium')\n );\n\n private readonly ranges: Record<string, number> = { hour: 24, minute: 60, second: 60, millisecond: 1000 };\n\n protected onField(unit: 'hour' | 'minute' | 'second' | 'millisecond', event: Event): void {\n const raw = (event.target as HTMLInputElement).value.replace(/\\D/g, '');\n if (raw === '') {\n return;\n }\n\n let parsed = parseInt(raw, 10);\n if (unit === 'hour') {\n parsed = this.to24Hour(parsed);\n }\n this.commit(unit, this.wrap(parsed, this.ranges[unit]));\n }\n\n protected onKeydown(unit: 'hour' | 'minute' | 'second' | 'millisecond', event: KeyboardEvent): void {\n const step = event.key === 'ArrowUp' ? 1 : event.key === 'ArrowDown' ? -1 : 0;\n if (!step) {\n return;\n }\n\n event.preventDefault();\n const currentByUnit = {\n hour: this.hour24(),\n minute: this.minute(),\n second: this.second(),\n millisecond: this.millisecond()\n };\n this.commit(unit, this.wrap(currentByUnit[unit] + step, this.ranges[unit]));\n }\n\n protected toggleMeridiem(): void {\n this.commit('hour', this.wrap(this.hour24() + 12, 24));\n }\n\n /** Convert a typed 12-hour value into 24-hour, preserving the current meridiem. */\n private to24Hour(hour: number): number {\n if (!this.useAmPm()) {\n return hour;\n }\n\n const twelve = hour % 12;\n return this.isPm() ? twelve + 12 : twelve;\n }\n\n private wrap(value: number, size: number): number {\n return ((value % size) + size) % size;\n }\n\n private commit(unit: 'hour' | 'minute' | 'second' | 'millisecond', value: number): void {\n const next = this.adapter.set(this.working(), { [unit]: value });\n this.value.set(next);\n this.timeChange.emit(next);\n }\n}\n","import { XuiTimePicker } from './lib/time-picker';\n\nexport * from './lib/time-picker';\n\nexport const XuiTimePickerImports = [XuiTimePicker] 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-time-picker.mjs","sources":["../../../../../../libs/ui/time-picker/xui/src/lib/time-picker.ts","../../../../../../libs/ui/time-picker/xui/src/index.ts","../../../../../../libs/ui/time-picker/xui/src/xui-time-picker.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n ElementRef,\n inject,\n input,\n model,\n ViewEncapsulation\n} from '@angular/core';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { xui } from '@xui/core';\nimport { injectXDateAdapter } from '@xui/core/date-time';\nimport { createXValueAccessor, provideXValueAccessor } from '@xui/core/forms';\nimport type { ClassValue } from 'clsx';\n\n/** How fine the picker edits. */\nexport type XuiTimePrecision = 'minute' | 'second' | 'millisecond';\n\nconst pad = (value: number, length = 2): string => String(value).padStart(length, '0');\n\n/**\n * A time field with hour/minute (and optional second/millisecond) spin buttons.\n * Arrow keys or the input step each field with wrap-around; `useAmPm` switches to\n * a 12-hour clock with an AM/PM toggle. `[(value)]` two-way binding; `T` is the\n * active `DateAdapter`'s type (a `Date` by default). It is a full\n * `ControlValueAccessor`, so `ngModel`/`formControl` bind to it directly.\n */\n@Component({\n selector: 'xui-time-picker',\n imports: [],\n providers: [provideXValueAccessor(() => XuiTimePicker)],\n template: `\n <div [class]=\"groupClass()\">\n <input\n type=\"text\"\n inputmode=\"numeric\"\n role=\"spinbutton\"\n aria-label=\"Hours\"\n [class]=\"fieldClass()\"\n [disabled]=\"isDisabled()\"\n [value]=\"pad(displayHour())\"\n [attr.aria-valuenow]=\"displayHour()\"\n (focus)=\"$any($event.target).select()\"\n (input)=\"onField('hour', $event)\"\n (keydown)=\"onKeydown('hour', $event)\"\n />\n <span class=\"text-foreground-muted text-sm\">:</span>\n <input\n type=\"text\"\n inputmode=\"numeric\"\n role=\"spinbutton\"\n aria-label=\"Minutes\"\n [class]=\"fieldClass()\"\n [disabled]=\"isDisabled()\"\n [value]=\"pad(minute())\"\n [attr.aria-valuenow]=\"minute()\"\n (focus)=\"$any($event.target).select()\"\n (input)=\"onField('minute', $event)\"\n (keydown)=\"onKeydown('minute', $event)\"\n />\n\n @if (showSeconds()) {\n <span class=\"text-foreground-muted text-sm\">:</span>\n <input\n type=\"text\"\n inputmode=\"numeric\"\n role=\"spinbutton\"\n aria-label=\"Seconds\"\n [class]=\"fieldClass()\"\n [disabled]=\"isDisabled()\"\n [value]=\"pad(second())\"\n [attr.aria-valuenow]=\"second()\"\n (focus)=\"$any($event.target).select()\"\n (input)=\"onField('second', $event)\"\n (keydown)=\"onKeydown('second', $event)\"\n />\n }\n\n @if (showMillis()) {\n <span class=\"text-foreground-muted text-sm\">.</span>\n <input\n type=\"text\"\n inputmode=\"numeric\"\n role=\"spinbutton\"\n aria-label=\"Milliseconds\"\n [class]=\"fieldClass() + ' w-10'\"\n [disabled]=\"isDisabled()\"\n [value]=\"pad(millisecond(), 3)\"\n [attr.aria-valuenow]=\"millisecond()\"\n (focus)=\"$any($event.target).select()\"\n (input)=\"onField('millisecond', $event)\"\n (keydown)=\"onKeydown('millisecond', $event)\"\n />\n }\n\n @if (useAmPm()) {\n <button type=\"button\" [class]=\"ampmClass()\" [disabled]=\"isDisabled()\" (click)=\"toggleMeridiem()\">\n {{ isPm() ? 'PM' : 'AM' }}\n </button>\n }\n </div>\n `,\n host: {\n '[class]': 'computedClass()',\n '(focusout)': 'onFocusOut($event)'\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None\n})\nexport class XuiTimePicker<T = Date> implements ControlValueAccessor {\n private readonly adapter = injectXDateAdapter<T>();\n private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n\n readonly class = input<ClassValue>('');\n\n /** The current time. Two-way bindable with `[(value)]`. */\n readonly value = model<T | null>(null);\n\n readonly precision = input<XuiTimePrecision>('minute');\n readonly useAmPm = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n protected readonly cva = createXValueAccessor<T | null>({\n onWrite: value => this.value.set(value ?? null),\n disabled: this.disabled\n });\n protected readonly isDisabled = this.cva.disabled;\n\n protected readonly pad = pad;\n\n /** A concrete working value — the bound value, or today at 00:00 when empty. */\n private readonly working = computed(() => this.value() ?? this.adapter.startOfDay(this.adapter.now()));\n\n protected readonly showSeconds = computed(() => this.precision() !== 'minute');\n protected readonly showMillis = computed(() => this.precision() === 'millisecond');\n\n protected readonly hour24 = computed(() => this.adapter.getHours(this.working()));\n protected readonly minute = computed(() => this.adapter.getMinutes(this.working()));\n protected readonly second = computed(() => this.adapter.getSeconds(this.working()));\n protected readonly millisecond = computed(() => this.adapter.getMilliseconds(this.working()));\n protected readonly isPm = computed(() => this.hour24() >= 12);\n\n protected readonly displayHour = computed(() => {\n const hour = this.hour24();\n if (!this.useAmPm()) {\n return hour;\n }\n const twelve = hour % 12;\n return twelve === 0 ? 12 : twelve;\n });\n\n protected readonly computedClass = computed(() => xui('inline-block', this.class()));\n protected readonly groupClass = computed(() =>\n xui(\n 'border-border bg-surface-inset inline-flex h-(--control-height-md) items-center gap-1 rounded-lg border px-(--control-padding-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 w-7 bg-transparent text-center text-sm tabular-nums outline-none')\n );\n protected readonly ampmClass = computed(() =>\n xui('text-foreground-muted hover:bg-surface-raised ms-1 rounded px-1.5 py-0.5 text-xs font-medium')\n );\n\n private readonly ranges: Record<string, number> = { hour: 24, minute: 60, second: 60, millisecond: 1000 };\n\n protected onField(unit: 'hour' | 'minute' | 'second' | 'millisecond', event: Event): void {\n const raw = (event.target as HTMLInputElement).value.replace(/\\D/g, '');\n if (raw === '') {\n return;\n }\n\n let parsed = parseInt(raw, 10);\n if (unit === 'hour') {\n parsed = this.to24Hour(parsed);\n }\n this.commit(unit, this.wrap(parsed, this.ranges[unit]));\n }\n\n protected onKeydown(unit: 'hour' | 'minute' | 'second' | 'millisecond', event: KeyboardEvent): void {\n const step = event.key === 'ArrowUp' ? 1 : event.key === 'ArrowDown' ? -1 : 0;\n if (!step) {\n return;\n }\n\n event.preventDefault();\n const currentByUnit = {\n hour: this.hour24(),\n minute: this.minute(),\n second: this.second(),\n millisecond: this.millisecond()\n };\n this.commit(unit, this.wrap(currentByUnit[unit] + step, this.ranges[unit]));\n }\n\n protected toggleMeridiem(): void {\n this.commit('hour', this.wrap(this.hour24() + 12, 24));\n }\n\n /** Convert a typed 12-hour value into 24-hour, preserving the current meridiem. */\n private to24Hour(hour: number): number {\n if (!this.useAmPm()) {\n return hour;\n }\n\n const twelve = hour % 12;\n return this.isPm() ? twelve + 12 : twelve;\n }\n\n private wrap(value: number, size: number): number {\n return ((value % size) + size) % size;\n }\n\n /** The single write path for user edits — typing, arrow keys or the AM/PM toggle. */\n private commit(unit: 'hour' | 'minute' | 'second' | 'millisecond', value: number): void {\n if (this.isDisabled()) {\n return;\n }\n\n const next = this.adapter.set(this.working(), { [unit]: value });\n this.value.set(next);\n this.cva.notifyChange(next);\n }\n\n /** Touched fires when focus leaves the picker, not while moving between fields. */\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 { XuiTimePicker } from './lib/time-picker';\n\nexport * from './lib/time-picker';\n\nexport const XuiTimePickerImports = [XuiTimePicker] 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/time-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,7 +38,8 @@
|
|
|
38
38
|
"peerDependencies": {
|
|
39
39
|
"@angular/cdk": "22",
|
|
40
40
|
"@angular/core": "22",
|
|
41
|
-
"@
|
|
41
|
+
"@angular/forms": "22",
|
|
42
|
+
"@xui/core": "2.0.0-alpha.13",
|
|
42
43
|
"clsx": "^2.1.1"
|
|
43
44
|
},
|
|
44
45
|
"publishConfig": {
|
|
@@ -1,24 +1,29 @@
|
|
|
1
|
+
import * as _xui_core_forms from '@xui/core/forms';
|
|
1
2
|
import * as _angular_core from '@angular/core';
|
|
2
3
|
import { BooleanInput } from '@angular/cdk/coercion';
|
|
4
|
+
import { ControlValueAccessor } from '@angular/forms';
|
|
3
5
|
import { ClassValue } from 'clsx';
|
|
4
6
|
|
|
5
7
|
/** How fine the picker edits. */
|
|
6
|
-
type
|
|
8
|
+
type XuiTimePrecision = 'minute' | 'second' | 'millisecond';
|
|
7
9
|
/**
|
|
8
10
|
* A time field with hour/minute (and optional second/millisecond) spin buttons.
|
|
9
11
|
* Arrow keys or the input step each field with wrap-around; `useAmPm` switches to
|
|
10
12
|
* a 12-hour clock with an AM/PM toggle. `[(value)]` two-way binding; `T` is the
|
|
11
|
-
* active `DateAdapter`'s type (a `Date` by default).
|
|
13
|
+
* active `DateAdapter`'s type (a `Date` by default). It is a full
|
|
14
|
+
* `ControlValueAccessor`, so `ngModel`/`formControl` bind to it directly.
|
|
12
15
|
*/
|
|
13
|
-
declare class XuiTimePicker<T = Date> {
|
|
16
|
+
declare class XuiTimePicker<T = Date> implements ControlValueAccessor {
|
|
14
17
|
private readonly adapter;
|
|
18
|
+
private readonly host;
|
|
15
19
|
readonly class: _angular_core.InputSignal<ClassValue>;
|
|
16
20
|
/** The current time. Two-way bindable with `[(value)]`. */
|
|
17
21
|
readonly value: _angular_core.ModelSignal<T | null>;
|
|
18
|
-
readonly precision: _angular_core.InputSignal<
|
|
22
|
+
readonly precision: _angular_core.InputSignal<XuiTimePrecision>;
|
|
19
23
|
readonly useAmPm: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
20
24
|
readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
|
|
21
|
-
readonly
|
|
25
|
+
protected readonly cva: _xui_core_forms.XValueAccessor<T | null>;
|
|
26
|
+
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
22
27
|
protected readonly pad: (value: number, length?: number) => string;
|
|
23
28
|
/** A concrete working value — the bound value, or today at 00:00 when empty. */
|
|
24
29
|
private readonly working;
|
|
@@ -41,12 +46,19 @@ declare class XuiTimePicker<T = Date> {
|
|
|
41
46
|
/** Convert a typed 12-hour value into 24-hour, preserving the current meridiem. */
|
|
42
47
|
private to24Hour;
|
|
43
48
|
private wrap;
|
|
49
|
+
/** The single write path for user edits — typing, arrow keys or the AM/PM toggle. */
|
|
44
50
|
private commit;
|
|
51
|
+
/** Touched fires when focus leaves the picker, not while moving between fields. */
|
|
52
|
+
protected onFocusOut(event: FocusEvent): void;
|
|
53
|
+
readonly writeValue: (value: T | null) => void;
|
|
54
|
+
readonly registerOnChange: (fn: _xui_core_forms.XChangeFn<T | null>) => void;
|
|
55
|
+
readonly registerOnTouched: (fn: _xui_core_forms.XTouchFn) => void;
|
|
56
|
+
readonly setDisabledState: (isDisabled: boolean) => void;
|
|
45
57
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<XuiTimePicker<any>, never>;
|
|
46
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<XuiTimePicker<any>, "xui-time-picker", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "precision": { "alias": "precision"; "required": false; "isSignal": true; }; "useAmPm": { "alias": "useAmPm"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "value": "valueChange";
|
|
58
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<XuiTimePicker<any>, "xui-time-picker", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "precision": { "alias": "precision"; "required": false; "isSignal": true; }; "useAmPm": { "alias": "useAmPm"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
|
|
47
59
|
}
|
|
48
60
|
|
|
49
61
|
declare const XuiTimePickerImports: readonly [typeof XuiTimePicker];
|
|
50
62
|
|
|
51
63
|
export { XuiTimePicker, XuiTimePickerImports };
|
|
52
|
-
export type {
|
|
64
|
+
export type { XuiTimePrecision };
|