@adia-ai/web-components 0.8.41 → 0.8.43
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/CHANGELOG.md +35 -0
- package/MIGRATION.md +240 -3
- package/USAGE.md +4 -4
- package/color/index.js +1 -1
- package/components/action-list/action-item.a2ui.json +7 -7
- package/components/action-list/action-item.yaml +21 -9
- package/components/action-list/action-list.class.js +13 -7
- package/components/action-list/action-list.d.ts +2 -2
- package/components/button/button.yaml +1 -1
- package/components/calendar-picker/calendar-picker.a2ui.json +1 -1
- package/components/calendar-picker/calendar-picker.class.js +2 -3
- package/components/calendar-picker/calendar-picker.css +16 -18
- package/components/calendar-picker/calendar-picker.yaml +2 -2
- package/components/card/card.css +3 -3
- package/components/chart/chart.a2ui.json +8 -8
- package/components/chart/chart.class.js +21 -19
- package/components/chart/chart.d.ts +6 -6
- package/components/chart/chart.yaml +16 -9
- package/components/chart-legend/chart-legend.a2ui.json +7 -11
- package/components/chart-legend/chart-legend.class.js +17 -8
- package/components/chart-legend/chart-legend.css +5 -2
- package/components/chart-legend/chart-legend.d.ts +2 -2
- package/components/chart-legend/chart-legend.yaml +12 -8
- package/components/check/check.css +9 -0
- package/components/{color-picker/color-picker.a2ui.json → color-area/color-area.a2ui.json} +15 -12
- package/components/{color-picker/color-picker.class.js → color-area/color-area.class.js} +10 -8
- package/components/color-area/color-area.css +185 -0
- package/components/color-area/color-area.d.ts +66 -0
- package/components/color-area/color-area.examples.md +19 -0
- package/components/color-area/color-area.js +17 -0
- package/components/{color-picker/color-picker.yaml → color-area/color-area.yaml} +17 -9
- package/components/color-input/color-input.a2ui.json +5 -5
- package/components/color-input/color-input.class.js +9 -6
- package/components/color-input/color-input.css +1 -1
- package/components/color-input/color-input.js +2 -2
- package/components/color-input/color-input.yaml +14 -12
- package/components/description-list/description-list.a2ui.json +1 -1
- package/components/description-list/description-list.css +1 -1
- package/components/description-list/description-list.d.ts +1 -1
- package/components/description-list/description-list.yaml +1 -1
- package/components/drilldown/drilldown.a2ui.json +3 -0
- package/components/drilldown/drilldown.css +8 -1
- package/components/drilldown/drilldown.yaml +2 -0
- package/components/field/field.a2ui.json +1 -1
- package/components/field/field.class.js +5 -2
- package/components/field/field.yaml +1 -1
- package/components/index.js +1 -4
- package/components/input/input.a2ui.json +4 -4
- package/components/input/input.class.js +8 -0
- package/components/input/input.css +6 -0
- package/components/input/input.yaml +11 -8
- package/components/integration-card/integration-card.examples.md +2 -1
- package/components/menu/menu-item.a2ui.json +7 -7
- package/components/menu/menu-item.yaml +20 -7
- package/components/menu/menu.class.js +13 -7
- package/components/menu/menu.d.ts +2 -2
- package/components/pane/pane.a2ui.json +11 -11
- package/components/pane/pane.class.js +8 -4
- package/components/pane/pane.css +15 -10
- package/components/pane/pane.d.ts +10 -9
- package/components/pane/pane.yaml +9 -7
- package/components/progress/progress.a2ui.json +1 -1
- package/components/progress/progress.class.js +2 -2
- package/components/progress/progress.d.ts +1 -1
- package/components/progress/progress.yaml +2 -2
- package/components/radio/radio.css +7 -0
- package/components/search/search.css +10 -1
- package/components/segment/segment.a2ui.json +1 -2
- package/components/segment/segment.css +10 -0
- package/components/segment/segment.yaml +1 -2
- package/components/segmented/segmented.a2ui.json +1 -3
- package/components/segmented/segmented.class.js +2 -2
- package/components/segmented/segmented.yaml +2 -4
- package/components/select/select.css +6 -0
- package/components/step-progress/step-progress.yaml +1 -1
- package/components/swatch/swatch.yaml +1 -1
- package/components/switch/switch.css +8 -0
- package/components/table-toolbar/table-toolbar.a2ui.json +42 -1
- package/components/table-toolbar/table-toolbar.class.js +166 -14
- package/components/table-toolbar/table-toolbar.css +46 -0
- package/components/table-toolbar/table-toolbar.d.ts +13 -1
- package/components/table-toolbar/table-toolbar.yaml +104 -14
- package/components/textarea/textarea.css +4 -0
- package/components/time-picker/time-picker.yaml +3 -2
- package/components/tree/tree.yaml +1 -1
- package/components/upload/upload.class.js +16 -0
- package/components/upload/upload.d.ts +7 -0
- package/components/upload/upload.yaml +7 -3
- package/core/icons.js +3 -1
- package/custom-elements.json +147 -468
- package/dist/host.min.css +1 -1
- package/dist/host.sheet.js +1 -1
- package/dist/theme-provider.min.js +1 -1
- package/dist/web-components.min.css +1 -1
- package/dist/web-components.min.js +88 -85
- package/dist/web-components.sheet.js +1 -1
- package/index.d.ts +9 -13
- package/package.json +1 -1
- package/patterns/admin-shell/admin-shell.examples.html +2 -2
- package/patterns/chart-in-card/chart-in-card.examples.html +10 -10
- package/patterns/conversion-funnel/conversion-funnel.html +2 -2
- package/patterns/editor-shell/editor-shell.examples.html +3 -3
- package/patterns/form-system/form-system.examples.html +1 -1
- package/styles/colors/semantics/features.css +8 -1
- package/styles/components.css +1 -4
- package/traits/arrow-grid-nav/arrow-grid-nav.js +1 -1
- package/traits/resize-observer/resize-observer.js +1 -1
- package/components/color-picker/color-picker.css +0 -182
- package/components/color-picker/color-picker.d.ts +0 -99
- package/components/color-picker/color-picker.examples.md +0 -19
- package/components/color-picker/color-picker.js +0 -17
- package/components/datetime-picker/datetime-picker.a2ui.json +0 -256
- package/components/datetime-picker/datetime-picker.class.js +0 -58
- package/components/datetime-picker/datetime-picker.css +0 -11
- package/components/datetime-picker/datetime-picker.d.ts +0 -87
- package/components/datetime-picker/datetime-picker.examples.md +0 -25
- package/components/datetime-picker/datetime-picker.js +0 -17
- package/components/datetime-picker/datetime-picker.yaml +0 -254
- package/components/progress-row/progress-row.a2ui.json +0 -107
- package/components/progress-row/progress-row.class.js +0 -118
- package/components/progress-row/progress-row.css +0 -60
- package/components/progress-row/progress-row.d.ts +0 -24
- package/components/progress-row/progress-row.examples.md +0 -7
- package/components/progress-row/progress-row.js +0 -17
- package/components/progress-row/progress-row.yaml +0 -85
- package/components/toggle-group/toggle-group.a2ui.json +0 -148
- package/components/toggle-group/toggle-group.class.js +0 -195
- package/components/toggle-group/toggle-group.css +0 -127
- package/components/toggle-group/toggle-group.d.ts +0 -50
- package/components/toggle-group/toggle-group.examples.md +0 -33
- package/components/toggle-group/toggle-group.js +0 -18
- package/components/toggle-group/toggle-group.yaml +0 -135
- package/components/toggle-group/toggle-option.a2ui.json +0 -86
- package/components/toggle-group/toggle-option.yaml +0 -75
|
@@ -1,256 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"$schema": "https://json-schema.org/draft/2020-12/schema",
|
|
3
|
-
"$id": "https://adiaui.dev/a2ui/v0_9/components/DatetimePicker.json",
|
|
4
|
-
"title": "DatetimePicker",
|
|
5
|
-
"description": "DEPRECATED (gh#1372, #1363 C3c) — folded into <calendar-picker-ui>'s widened `precision` axis. `<datetime-picker-ui>` is now a thin `UICalendarPicker` subclass (see datetime-picker.class.js) rather than an independent implementation: `precision` defaults to `\"minute\"` (not `\"date\"`) and `placeholder` defaults to `\"Select date and time\"`; every other prop/event/token is inherited unchanged from <calendar-picker-ui>. Existing markup keeps working, but new markup should reach for `<calendar-picker-ui precision=\"minute\">` (or `precision=\"second\"`) directly. See <calendar-picker-ui> for the full contract.",
|
|
6
|
-
"type": "object",
|
|
7
|
-
"allOf": [
|
|
8
|
-
{
|
|
9
|
-
"$ref": "common_types.json#/$defs/ComponentCommon"
|
|
10
|
-
},
|
|
11
|
-
{
|
|
12
|
-
"$ref": "common_types.json#/$defs/CatalogComponentCommon"
|
|
13
|
-
}
|
|
14
|
-
],
|
|
15
|
-
"properties": {
|
|
16
|
-
"required": {
|
|
17
|
-
"description": "Required for validation when inside a `<form>`.",
|
|
18
|
-
"type": "boolean",
|
|
19
|
-
"default": false
|
|
20
|
-
},
|
|
21
|
-
"component": {
|
|
22
|
-
"const": "DatetimePicker"
|
|
23
|
-
},
|
|
24
|
-
"disabled": {
|
|
25
|
-
"description": "Block all interaction. Trigger remains rendered but does not open the popover.",
|
|
26
|
-
"type": "boolean",
|
|
27
|
-
"default": false
|
|
28
|
-
},
|
|
29
|
-
"format": {
|
|
30
|
-
"description": "Trigger button date format. `short`: `Jan 1, 2026 14:30`; `long`: `January 1, 2026 14:30`; `iso`: full ISO string.",
|
|
31
|
-
"type": "string",
|
|
32
|
-
"enum": [
|
|
33
|
-
"short",
|
|
34
|
-
"long",
|
|
35
|
-
"iso"
|
|
36
|
-
],
|
|
37
|
-
"default": "short"
|
|
38
|
-
},
|
|
39
|
-
"hourcycle": {
|
|
40
|
-
"description": "Hour cycle for the time pane. Empty (default) derives from the\ndocument locale. `h12` forces a 12-hour cycle with an AM/PM\n(meridiem) segment; `h23` forces 24-hour cycle.\n",
|
|
41
|
-
"type": "string",
|
|
42
|
-
"enum": [
|
|
43
|
-
"",
|
|
44
|
-
"h12",
|
|
45
|
-
"h23"
|
|
46
|
-
],
|
|
47
|
-
"default": ""
|
|
48
|
-
},
|
|
49
|
-
"locale": {
|
|
50
|
-
"description": "BCP-47 locale tag used to derive hour-cycle when `hour-cycle` is empty. Falls back to `<html lang>` then to browser default.",
|
|
51
|
-
"type": "string",
|
|
52
|
-
"default": ""
|
|
53
|
-
},
|
|
54
|
-
"max": {
|
|
55
|
-
"description": "Latest selectable ISO 8601 datetime (inclusive). Days after are disabled in the calendar pane; times after are rejected by the time pane on the same day.",
|
|
56
|
-
"type": "string",
|
|
57
|
-
"default": ""
|
|
58
|
-
},
|
|
59
|
-
"min": {
|
|
60
|
-
"description": "Earliest selectable ISO 8601 datetime (inclusive). Days before are disabled in the calendar pane; times before are rejected by the time pane on the same day.",
|
|
61
|
-
"type": "string",
|
|
62
|
-
"default": ""
|
|
63
|
-
},
|
|
64
|
-
"name": {
|
|
65
|
-
"description": "Form field name. The ISO 8601 datetime is submitted under this key when the picker is inside a `<form>`.",
|
|
66
|
-
"type": "string",
|
|
67
|
-
"default": ""
|
|
68
|
-
},
|
|
69
|
-
"open": {
|
|
70
|
-
"description": "Whether the popover is currently open.",
|
|
71
|
-
"type": "boolean",
|
|
72
|
-
"default": false
|
|
73
|
-
},
|
|
74
|
-
"placeholder": {
|
|
75
|
-
"description": "Text shown in the trigger when the value is empty. Defaults to \"Select date and time\" HERE (vs. \"Select date...\" on the base `<calendar-picker-ui>`).",
|
|
76
|
-
"type": "string",
|
|
77
|
-
"default": "Select date and time"
|
|
78
|
-
},
|
|
79
|
-
"placement": {
|
|
80
|
-
"description": "Popover placement relative to the trigger. Default `bottom` centers the calendar+time panel under the trigger (ADR-0034 Rule 2 — ~600px panel >> trigger).",
|
|
81
|
-
"type": "string",
|
|
82
|
-
"enum": [
|
|
83
|
-
"top",
|
|
84
|
-
"bottom",
|
|
85
|
-
"left",
|
|
86
|
-
"right",
|
|
87
|
-
"top-start",
|
|
88
|
-
"top-end",
|
|
89
|
-
"bottom-start",
|
|
90
|
-
"bottom-end"
|
|
91
|
-
],
|
|
92
|
-
"default": "bottom"
|
|
93
|
-
},
|
|
94
|
-
"precision": {
|
|
95
|
-
"description": "Time-pane precision. `minute` (default HERE — `date` on the base `<calendar-picker-ui>`) emits `HH:mm`; `second` exposes the seconds segment and emits `HH:mm:ss`; `date` drops the time pane entirely (identical to the base class's own default).",
|
|
96
|
-
"type": "string",
|
|
97
|
-
"enum": [
|
|
98
|
-
"date",
|
|
99
|
-
"minute",
|
|
100
|
-
"second"
|
|
101
|
-
],
|
|
102
|
-
"default": "minute"
|
|
103
|
-
},
|
|
104
|
-
"readonly": {
|
|
105
|
-
"description": "Block edits; allow keyboard navigation for screen-reader inspection.",
|
|
106
|
-
"type": "boolean",
|
|
107
|
-
"default": false
|
|
108
|
-
},
|
|
109
|
-
"step": {
|
|
110
|
-
"description": "Per-Arrow-keypress increment in seconds for the time pane. 60 = minute precision (default), 900 = 15-minute, 1 = second precision.",
|
|
111
|
-
"type": "number",
|
|
112
|
-
"default": 60
|
|
113
|
-
},
|
|
114
|
-
"value": {
|
|
115
|
-
"description": "Current value as ISO 8601 datetime (\"YYYY-MM-DDTHH:mm\" or \"YYYY-MM-DDTHH:mm:ss\"). Empty when no value selected.",
|
|
116
|
-
"$ref": "common_types.json#/$defs/DynamicString"
|
|
117
|
-
}
|
|
118
|
-
},
|
|
119
|
-
"required": [
|
|
120
|
-
"component"
|
|
121
|
-
],
|
|
122
|
-
"unevaluatedProperties": false,
|
|
123
|
-
"x-adiaui": {
|
|
124
|
-
"anti_patterns": [
|
|
125
|
-
{
|
|
126
|
-
"fix": "{\"component\": \"DatetimePicker\", \"value\": \"2026-05-24T00:00\"}\n",
|
|
127
|
-
"why": "`value` is a date-only string — no time component. The contract requires\na full ISO 8601 datetime including the `T` and time segment.\n",
|
|
128
|
-
"wrong": "{\"component\": \"DatetimePicker\", \"value\": \"2026-05-24\"}\n"
|
|
129
|
-
},
|
|
130
|
-
{
|
|
131
|
-
"fix": "{\"component\": \"CalendarPicker\", \"precision\": \"minute\", \"name\": \"appointment\"}\n",
|
|
132
|
-
"why": "DatetimePicker is deprecated (gh#1372) — new generation should reach\nfor CalendarPicker's widened precision axis instead.\n",
|
|
133
|
-
"wrong": "{\"component\": \"DatetimePicker\", \"name\": \"appointment\"}\n"
|
|
134
|
-
}
|
|
135
|
-
],
|
|
136
|
-
"category": "input",
|
|
137
|
-
"composes": [
|
|
138
|
-
"calendar-grid-ui",
|
|
139
|
-
"time-picker-ui",
|
|
140
|
-
"divider-ui"
|
|
141
|
-
],
|
|
142
|
-
"events": {
|
|
143
|
-
"change": {
|
|
144
|
-
"description": "Fired when the value commits (date picked + time edited, OR Apply clicked in explicit-commit mode).",
|
|
145
|
-
"detail": {
|
|
146
|
-
"value": "string"
|
|
147
|
-
}
|
|
148
|
-
},
|
|
149
|
-
"close": {
|
|
150
|
-
"description": "Popover closed (without commit, or after commit).",
|
|
151
|
-
"detail": {
|
|
152
|
-
"reason": "string"
|
|
153
|
-
}
|
|
154
|
-
},
|
|
155
|
-
"input": {
|
|
156
|
-
"description": "Fired during partial selection (date picked but time still pending, or vice versa).",
|
|
157
|
-
"detail": {
|
|
158
|
-
"value": "string"
|
|
159
|
-
}
|
|
160
|
-
},
|
|
161
|
-
"invalid": {
|
|
162
|
-
"description": "A constraint failed (out of range, parse error).",
|
|
163
|
-
"detail": {
|
|
164
|
-
"reason": "string",
|
|
165
|
-
"value": "string"
|
|
166
|
-
}
|
|
167
|
-
},
|
|
168
|
-
"open": {
|
|
169
|
-
"description": "Popover opened (user clicked the trigger or pressed Enter / Space).",
|
|
170
|
-
"detail": {
|
|
171
|
-
"trigger": "string"
|
|
172
|
-
}
|
|
173
|
-
}
|
|
174
|
-
},
|
|
175
|
-
"examples": [
|
|
176
|
-
{
|
|
177
|
-
"description": "Form-field-wrapped picker with min/max bounds. Prefer the CalendarPicker[precision] form for NEW markup — see calendar-picker-ui's own \"datetime-picker\" example.",
|
|
178
|
-
"a2ui": "[\n {\n \"id\": \"field\",\n \"component\": \"Field\",\n \"label\": \"Appointment\",\n \"children\": [\"dt\"]\n },\n {\n \"id\": \"dt\",\n \"component\": \"DatetimePicker\",\n \"name\": \"appointment\",\n \"min\": \"2026-01-01T00:00\",\n \"max\": \"2026-12-31T23:59\"\n }\n]\n",
|
|
179
|
-
"name": "canonical"
|
|
180
|
-
}
|
|
181
|
-
],
|
|
182
|
-
"keywords": [
|
|
183
|
-
"datetimepicker",
|
|
184
|
-
"datetime-picker",
|
|
185
|
-
"datetime",
|
|
186
|
-
"date-time",
|
|
187
|
-
"dateandtime",
|
|
188
|
-
"appointment",
|
|
189
|
-
"schedule",
|
|
190
|
-
"timestamp"
|
|
191
|
-
],
|
|
192
|
-
"name": "UIDatetimePicker",
|
|
193
|
-
"parts": {},
|
|
194
|
-
"related": [
|
|
195
|
-
"calendar-picker",
|
|
196
|
-
"time-picker",
|
|
197
|
-
"date-range-picker",
|
|
198
|
-
"popover",
|
|
199
|
-
"field",
|
|
200
|
-
"button"
|
|
201
|
-
],
|
|
202
|
-
"slots": {
|
|
203
|
-
"footer": {
|
|
204
|
-
"description": "Optional Apply / Cancel buttons for explicit-commit flows. Spans both panes below the calendar + time area."
|
|
205
|
-
},
|
|
206
|
-
"trigger": {
|
|
207
|
-
"description": "Custom trigger replacement. When omitted, a default trigger is stamped (a plain clickable span, per the base `<calendar-picker-ui>` — NOT the old standalone datetime-picker's `<button-ui>` trigger; see the Consequences note below)."
|
|
208
|
-
}
|
|
209
|
-
},
|
|
210
|
-
"states": [
|
|
211
|
-
{
|
|
212
|
-
"description": "Closed, no pending selection.",
|
|
213
|
-
"name": "idle"
|
|
214
|
-
},
|
|
215
|
-
{
|
|
216
|
-
"description": "Popover open.",
|
|
217
|
-
"attribute": "open",
|
|
218
|
-
"name": "open"
|
|
219
|
-
},
|
|
220
|
-
{
|
|
221
|
-
"description": "Non-interactive; dimmed.",
|
|
222
|
-
"attribute": "disabled",
|
|
223
|
-
"name": "disabled"
|
|
224
|
-
},
|
|
225
|
-
{
|
|
226
|
-
"description": "Read-only; trigger keyboard-focusable but popover does not open.",
|
|
227
|
-
"attribute": "readonly",
|
|
228
|
-
"name": "readonly"
|
|
229
|
-
}
|
|
230
|
-
],
|
|
231
|
-
"status": "deprecated",
|
|
232
|
-
"synonyms": {
|
|
233
|
-
"appointment": [
|
|
234
|
-
"datetime",
|
|
235
|
-
"meeting",
|
|
236
|
-
"schedule"
|
|
237
|
-
],
|
|
238
|
-
"datetime": [
|
|
239
|
-
"date-time",
|
|
240
|
-
"timestamp",
|
|
241
|
-
"appointment",
|
|
242
|
-
"schedule"
|
|
243
|
-
],
|
|
244
|
-
"tags": [
|
|
245
|
-
"DateTimePicker",
|
|
246
|
-
"DateTimeInput",
|
|
247
|
-
"DatetimeInput",
|
|
248
|
-
"Timestamp"
|
|
249
|
-
]
|
|
250
|
-
},
|
|
251
|
-
"tag": "datetime-picker-ui",
|
|
252
|
-
"tokens": {},
|
|
253
|
-
"traits": [],
|
|
254
|
-
"version": 2
|
|
255
|
-
}
|
|
256
|
-
}
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Non-side-effect class export for `<datetime-picker-ui>`.
|
|
3
|
-
*
|
|
4
|
-
* Importing this file gives you the class without auto-registering the tag.
|
|
5
|
-
* Useful for test isolation, subclassing with tag-name override, or selective
|
|
6
|
-
* composition.
|
|
7
|
-
*
|
|
8
|
-
* The auto-register path stays at `@adia-ai/web-components/components/datetime-picker`
|
|
9
|
-
* (which imports this file + calls `defineIfFree()`).
|
|
10
|
-
*
|
|
11
|
-
* @see ../../USAGE.md#registration--auto-vs-explicit
|
|
12
|
-
*/
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* <datetime-picker-ui> — DEPRECATED (gh#1372, #1363 C3c).
|
|
16
|
-
*
|
|
17
|
-
* `<datetime-picker-ui>`'s full surface — trigger + popover, a
|
|
18
|
-
* `<calendar-grid-ui>` date pane + `<divider-ui>` + `<time-picker-ui>` time
|
|
19
|
-
* pane, form participation, constraint validation, the
|
|
20
|
-
* open/close/input/invalid event set — folded into `<calendar-picker-ui>`
|
|
21
|
-
* behind its widened `precision` axis (`date` | `minute` | `second`).
|
|
22
|
-
* `<datetime-picker-ui>` is now a thin compatibility alias per ADR-0057
|
|
23
|
-
* (`status: deprecated`): it subclasses `UICalendarPicker` directly rather
|
|
24
|
-
* than re-implementing any of that behavior, and only overrides the two
|
|
25
|
-
* defaults that made it feel like a distinct primitive — `precision`
|
|
26
|
-
* defaults to `"minute"` (not `"date"`) and `placeholder` defaults to
|
|
27
|
-
* `"Select date and time"`.
|
|
28
|
-
*
|
|
29
|
-
* Migrate: `<datetime-picker-ui>` → `<calendar-picker-ui precision="minute">`
|
|
30
|
-
* (or `precision="second"` for the former second-precision mode). This tag
|
|
31
|
-
* keeps working — it IS `<calendar-picker-ui>` under the hood — but will be
|
|
32
|
-
* removed in a future major; new markup should reach for
|
|
33
|
-
* `<calendar-picker-ui>` directly.
|
|
34
|
-
*
|
|
35
|
-
* @see ../calendar-picker/calendar-picker.class.js
|
|
36
|
-
*/
|
|
37
|
-
|
|
38
|
-
import { UICalendarPicker } from '../calendar-picker/calendar-picker.class.js';
|
|
39
|
-
|
|
40
|
-
export class UIDatetimePicker extends UICalendarPicker {
|
|
41
|
-
// static labelDeprecated is inherited unchanged from UICalendarPicker —
|
|
42
|
-
// this subclass adds no authored [label] attribute handling of its own.
|
|
43
|
-
|
|
44
|
-
// Same value as UICalendarPicker's — the alias stamps no icon of its own —
|
|
45
|
-
// but restated literally because scripts/release/check-required-icons.mjs
|
|
46
|
-
// text-scans each component's own class.js and cannot resolve inheritance
|
|
47
|
-
// (gh#1503).
|
|
48
|
-
static requiredIcons = ['calendar'];
|
|
49
|
-
|
|
50
|
-
static properties = {
|
|
51
|
-
...UICalendarPicker.properties,
|
|
52
|
-
// The only two defaults that differ from the folded-into base class —
|
|
53
|
-
// everything else (min/max/step/hourcycle/locale/open/format/
|
|
54
|
-
// placement/readonly/etc.) is inherited unchanged.
|
|
55
|
-
precision: { type: String, default: 'minute', reflect: true },
|
|
56
|
-
placeholder: { type: String, default: 'Select date and time', reflect: true },
|
|
57
|
-
};
|
|
58
|
-
}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
/* `<datetime-picker-ui>` is DEPRECATED (gh#1372, #1363 C3c) — a thin
|
|
2
|
-
* `UICalendarPicker` subclass (see datetime-picker.class.js), never its own
|
|
3
|
-
* independent implementation. Its visual contract lives entirely in
|
|
4
|
-
* ../calendar-picker/calendar-picker.css, whose `@scope (calendar-picker-ui,
|
|
5
|
-
* datetime-picker-ui)` root and `:is(calendar-picker-ui, datetime-picker-ui)`
|
|
6
|
-
* popover/pane selectors already cover this tag — one styling source, not
|
|
7
|
-
* two files drifting apart. This file intentionally carries no rules of its
|
|
8
|
-
* own; `packages/web-components/index.css` still imports it so the barrel's
|
|
9
|
-
* per-component import list stays complete and mechanical (no special-cased
|
|
10
|
-
* skip for a deprecated-but-still-shipping tag).
|
|
11
|
-
*/
|
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* `<datetime-picker-ui>` — DEPRECATED (gh#1372, #1363 C3c) — folded into <calendar-picker-ui>'s widened `precision` axis. `<datetime-picker-ui>` is now a thin `UICalendarPicker` subclass (see datetime-picker.class.js) rather than an independent implementation: `precision` defaults to `"minute"` (not `"date"`) and `placeholder` defaults to `"Select date and time"`; every other prop/event/token is inherited unchanged from <calendar-picker-ui>. Existing markup keeps working, but new markup should reach for `<calendar-picker-ui precision="minute">` (or `precision="second"`) directly. See <calendar-picker-ui> for the full contract.
|
|
3
|
-
*
|
|
4
|
-
* @see https://ui-kit.exe.xyz/site/components/datetime-picker
|
|
5
|
-
*
|
|
6
|
-
* Type declarations generated by scripts/build/dts-codegen.mjs from
|
|
7
|
-
* the component's `.a2ui.json` sidecar(s). Edit the source `.yaml`,
|
|
8
|
-
* run `npm run build:components`, then `npm run codegen:dts` to
|
|
9
|
-
* regenerate; or hand-author this file fully if rich event types are
|
|
10
|
-
* needed beyond what the yaml `events:` block can express.
|
|
11
|
-
*/
|
|
12
|
-
|
|
13
|
-
import { UIElement } from '../../core/element.js';
|
|
14
|
-
|
|
15
|
-
export interface DatetimePickerChangeEventDetail {
|
|
16
|
-
value: string;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
export type DatetimePickerChangeEvent = CustomEvent<DatetimePickerChangeEventDetail>;
|
|
20
|
-
export interface DatetimePickerCloseEventDetail {
|
|
21
|
-
reason: string;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
export type DatetimePickerCloseEvent = CustomEvent<DatetimePickerCloseEventDetail>;
|
|
25
|
-
export interface DatetimePickerInputEventDetail {
|
|
26
|
-
value: string;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
export type DatetimePickerInputEvent = CustomEvent<DatetimePickerInputEventDetail>;
|
|
30
|
-
export interface DatetimePickerInvalidEventDetail {
|
|
31
|
-
reason: string;
|
|
32
|
-
value: string;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
export type DatetimePickerInvalidEvent = CustomEvent<DatetimePickerInvalidEventDetail>;
|
|
36
|
-
export interface DatetimePickerOpenEventDetail {
|
|
37
|
-
trigger: string;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
export type DatetimePickerOpenEvent = CustomEvent<DatetimePickerOpenEventDetail>;
|
|
41
|
-
|
|
42
|
-
export class UIDatetimePicker extends UIElement {
|
|
43
|
-
/** Required for validation when inside a `<form>`. */
|
|
44
|
-
required: boolean;
|
|
45
|
-
/** Block all interaction. Trigger remains rendered but does not open the popover. */
|
|
46
|
-
disabled: boolean;
|
|
47
|
-
/** Trigger button date format. `short`: `Jan 1, 2026 14:30`; `long`: `January 1, 2026 14:30`; `iso`: full ISO string. */
|
|
48
|
-
format: 'short' | 'long' | 'iso';
|
|
49
|
-
/** Hour cycle for the time pane. Empty (default) derives from the
|
|
50
|
-
document locale. `h12` forces a 12-hour cycle with an AM/PM
|
|
51
|
-
(meridiem) segment; `h23` forces 24-hour cycle.
|
|
52
|
-
*/
|
|
53
|
-
hourcycle: '' | 'h12' | 'h23';
|
|
54
|
-
/** BCP-47 locale tag used to derive hour-cycle when `hour-cycle` is empty. Falls back to `<html lang>` then to browser default. */
|
|
55
|
-
locale: string;
|
|
56
|
-
/** Latest selectable ISO 8601 datetime (inclusive). Days after are disabled in the calendar pane; times after are rejected by the time pane on the same day. */
|
|
57
|
-
max: string;
|
|
58
|
-
/** Earliest selectable ISO 8601 datetime (inclusive). Days before are disabled in the calendar pane; times before are rejected by the time pane on the same day. */
|
|
59
|
-
min: string;
|
|
60
|
-
/** Form field name. The ISO 8601 datetime is submitted under this key when the picker is inside a `<form>`. */
|
|
61
|
-
name: string;
|
|
62
|
-
/** Whether the popover is currently open. */
|
|
63
|
-
open: boolean;
|
|
64
|
-
/** Text shown in the trigger when the value is empty. Defaults to "Select date and time" HERE (vs. "Select date..." on the base `<calendar-picker-ui>`). */
|
|
65
|
-
placeholder: string;
|
|
66
|
-
/** Popover placement relative to the trigger. Default `bottom` centers the calendar+time panel under the trigger (ADR-0034 Rule 2 — ~600px panel >> trigger). */
|
|
67
|
-
placement: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
|
|
68
|
-
/** Time-pane precision. `minute` (default HERE — `date` on the base `<calendar-picker-ui>`) emits `HH:mm`; `second` exposes the seconds segment and emits `HH:mm:ss`; `date` drops the time pane entirely (identical to the base class's own default). */
|
|
69
|
-
precision: 'date' | 'minute' | 'second';
|
|
70
|
-
/** Block edits; allow keyboard navigation for screen-reader inspection. */
|
|
71
|
-
readonly: boolean;
|
|
72
|
-
/** Per-Arrow-keypress increment in seconds for the time pane. 60 = minute precision (default), 900 = 15-minute, 1 = second precision. */
|
|
73
|
-
step: number;
|
|
74
|
-
/** Current value as ISO 8601 datetime ("YYYY-MM-DDTHH:mm" or "YYYY-MM-DDTHH:mm:ss"). Empty when no value selected. */
|
|
75
|
-
value: string;
|
|
76
|
-
|
|
77
|
-
addEventListener(type: 'change', listener: (ev: DatetimePickerChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
|
|
78
|
-
addEventListener(type: 'close', listener: (ev: DatetimePickerCloseEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
|
|
79
|
-
addEventListener(type: 'input', listener: (ev: DatetimePickerInputEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
|
|
80
|
-
addEventListener(type: 'invalid', listener: (ev: DatetimePickerInvalidEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
|
|
81
|
-
addEventListener(type: 'open', listener: (ev: DatetimePickerOpenEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
|
|
82
|
-
addEventListener<K extends keyof HTMLElementEventMap>(
|
|
83
|
-
type: K,
|
|
84
|
-
listener: (this: UIDatetimePicker, ev: HTMLElementEventMap[K]) => unknown,
|
|
85
|
-
options?: boolean | AddEventListenerOptions,
|
|
86
|
-
): void;
|
|
87
|
-
}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
# datetime-picker — Examples
|
|
2
|
-
|
|
3
|
-
## Canonical
|
|
4
|
-
|
|
5
|
-
```html
|
|
6
|
-
<field-ui label="Appointment">
|
|
7
|
-
<datetime-picker-ui name="appointment" min="2026-01-01T00:00" max="2026-12-31T23:59"></datetime-picker-ui>
|
|
8
|
-
</field-ui>
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
## Pre-selected
|
|
12
|
-
|
|
13
|
-
```html
|
|
14
|
-
<field-ui label="Meeting start">
|
|
15
|
-
<datetime-picker-ui value="2026-05-24T14:30"></datetime-picker-ui>
|
|
16
|
-
</field-ui>
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
## precision
|
|
20
|
-
|
|
21
|
-
```html
|
|
22
|
-
<field-ui label="Minute precision">
|
|
23
|
-
<datetime-picker-ui value="2026-05-24T14:30"></datetime-picker-ui>
|
|
24
|
-
</field-ui>
|
|
25
|
-
```
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* `<datetime-picker-ui>` — auto-registers the tag on import.
|
|
3
|
-
*
|
|
4
|
-
* For non-side-effect class import (test isolation, tag override), use
|
|
5
|
-
* the `class` subpath:
|
|
6
|
-
*
|
|
7
|
-
* import { UIDatetimePicker } from '@adia-ai/web-components/components/datetime-picker/class';
|
|
8
|
-
*
|
|
9
|
-
* @see ../../USAGE.md#registration--auto-vs-explicit
|
|
10
|
-
*/
|
|
11
|
-
|
|
12
|
-
import { defineIfFree } from '../../core/register.js';
|
|
13
|
-
import { UIDatetimePicker } from './datetime-picker.class.js';
|
|
14
|
-
|
|
15
|
-
defineIfFree('datetime-picker-ui', UIDatetimePicker);
|
|
16
|
-
|
|
17
|
-
export { UIDatetimePicker };
|