@aurodesignsystem-dev/auro-datetime 0.0.0-pr82.3 → 0.0.0-pr82.5

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.
Files changed (8) hide show
  1. package/demo/api.md +97 -82
  2. package/demo/auro-datetime.min.js +207 -127
  3. package/dist/auro-datetime-BmzswYzJ.js +6 -0
  4. package/dist/index.d.ts +46 -22
  5. package/dist/index.js +1 -1
  6. package/dist/registered.js +1 -1
  7. package/package.json +1 -1
  8. package/dist/auro-datetime-HltPUs27.js +0 -6
package/demo/api.md CHANGED
@@ -7,16 +7,14 @@ The `auro-datetime` element is for the purposes of providing an easy to use date
7
7
 
8
8
  ### Properties & Attributes
9
9
 
10
- | Properties | Attributes | Modifiers | Type | Default | Description |
11
- | ---------- | ---------- | --------- | ------------------------------------------------------------------------------------------------ | ------- | ------------------------------------------------------------------------------------------------- |
12
- | cap | cap | | boolean | | Capitalize AM or PM designation |
13
- | locale | locale | | string | `en-US` | BCP 47 language tag for locale-aware date/time formatting (e.g. 'en-GB', 'de-DE', 'ja-JP'). |
14
- | month | month | | `short` \| `long` | `short` | Defines format of month |
15
- | setDate | setDate | | string | | Pass in string to set date |
16
- | timeZone | timeZone | | string | | Pass in string to define [timeZone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) |
17
- | type | type | | `date` \| `time` \| `year` \| `month` \| `weekday` \| `day` \| `numeric` \| `tzDate` \| `tzTime` | | Defines type of data to render |
18
- | utc | utc | | string | | Pass in ISO 8601 UTC formatted time code |
19
- | weekday | weekday | | `short` \| `long` | `short` | Defines format of weekday |
10
+ | Properties | Attributes | Modifiers | Type | Default | Description |
11
+ | ---------- | ---------- | --------- | ------------------------------------------------------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
12
+ | locale | locale | | string | `en-US` | BCP 47 language tag for locale-aware date/time formatting (e.g. 'en-GB', 'de-DE', 'ja-JP'). |
13
+ | month | month | | `short` \| `long` | `short` | Defines format of month |
14
+ | timeZone | timeZone | | string | | Pass in string to define [timeZone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones).<br>When set, the moment described by `value` is converted into this IANA zone for display.<br>When unset, the wall-clock time from the input string is rendered as-is. |
15
+ | type | type | | `date` \| `time` \| `year` \| `month` \| `weekday` \| `day` \| `numeric` | | Defines type of data to render |
16
+ | value | value | | string | | ISO 8601 date or date-time string. Examples:<br>- `2022-07-14T08:00:00-07:00` (with offset)<br>- `2022-07-14T08:00:00Z` (UTC)<br>- `2022-07-14T08:00:00` (no offset)<br>- `2022-07-14` (date only)<br><br>When omitted, the component renders today's date.<br>Invalid input is logged as a warning and renders nothing. |
17
+ | weekday | weekday | | `short` \| `long` | `short` | Defines format of weekday |
20
18
 
21
19
  ### Methods
22
20
 
@@ -72,39 +70,18 @@ The `auro-datetime` element is for the purposes of providing an easy to use date
72
70
 
73
71
  ## Property & Attribute Examples
74
72
 
75
- ### Time with Capitalization
76
-
77
- Using the `cap` attribute will return the basic time string with a capitalized `AM` or `PM`.
78
-
79
- <div class="exampleWrapper">
80
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/cap.html) -->
81
- <!-- The below content is automatically added from ../apiExamples/cap.html -->
82
- <auro-datetime type="time" cap></auro-datetime>
83
- <!-- AURO-GENERATED-CONTENT:END -->
84
- </div>
85
- <auro-accordion alignRight>
86
- <span slot="trigger">See code</span>
87
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/cap.html) -->
88
- <!-- The below code snippet is automatically added from ../apiExamples/cap.html -->
89
-
90
- ```html
91
- <auro-datetime type="time" cap></auro-datetime>
92
- ```
93
- <!-- AURO-GENERATED-CONTENT:END -->
94
- </auro-accordion>
95
-
96
73
  ### International Date Formatting
97
74
 
98
- Use the `locale` attribute with a [BCP 47 language tag](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument) to render dates and times in non-North American formats. When omitted, the component defaults to `en-US` formatting.
75
+ Use the `locale` attribute with a [BCP 47 language tag](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument) to render dates and times in a specific locale (e.g. `en-GB`, `de-DE`, `ja-JP`). When omitted, the component defaults to `en-US` formatting. The `locale` attribute controls **output formatting only** (month names, separators, 12/24-hour clock); it does not perform timezone conversion. Invalid tags are logged as a warning and fall back to `en-US`.
99
76
 
100
77
  #### Locale with type="date"
101
78
 
102
79
  <div class="exampleWrapper">
103
80
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/locale-date.html) -->
104
81
  <!-- The below content is automatically added from ../apiExamples/locale-date.html -->
105
- <auro-datetime type="date" locale="en-GB" utc="2020-09-22T01:38:22Z"></auro-datetime><br>
106
- <auro-datetime type="date" locale="de-DE" utc="2020-09-22T01:38:22Z"></auro-datetime><br>
107
- <auro-datetime type="date" locale="ja-JP" utc="2020-09-22T01:38:22Z"></auro-datetime>
82
+ <auro-datetime type="date" locale="en-GB" value="2020-09-22T01:38:22Z"></auro-datetime><br>
83
+ <auro-datetime type="date" locale="de-DE" value="2020-09-22T01:38:22Z"></auro-datetime><br>
84
+ <auro-datetime type="date" locale="ja-JP" value="2020-09-22T01:38:22Z"></auro-datetime>
108
85
  <!-- AURO-GENERATED-CONTENT:END -->
109
86
  </div>
110
87
  <auro-accordion alignRight>
@@ -113,9 +90,9 @@ Use the `locale` attribute with a [BCP 47 language tag](https://developer.mozill
113
90
  <!-- The below code snippet is automatically added from ../apiExamples/locale-date.html -->
114
91
 
115
92
  ```html
116
- <auro-datetime type="date" locale="en-GB" utc="2020-09-22T01:38:22Z"></auro-datetime><br>
117
- <auro-datetime type="date" locale="de-DE" utc="2020-09-22T01:38:22Z"></auro-datetime><br>
118
- <auro-datetime type="date" locale="ja-JP" utc="2020-09-22T01:38:22Z"></auro-datetime>
93
+ <auro-datetime type="date" locale="en-GB" value="2020-09-22T01:38:22Z"></auro-datetime><br>
94
+ <auro-datetime type="date" locale="de-DE" value="2020-09-22T01:38:22Z"></auro-datetime><br>
95
+ <auro-datetime type="date" locale="ja-JP" value="2020-09-22T01:38:22Z"></auro-datetime>
119
96
  ```
120
97
  <!-- AURO-GENERATED-CONTENT:END -->
121
98
  </auro-accordion>
@@ -125,9 +102,9 @@ Use the `locale` attribute with a [BCP 47 language tag](https://developer.mozill
125
102
  <div class="exampleWrapper">
126
103
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/locale-numeric.html) -->
127
104
  <!-- The below content is automatically added from ../apiExamples/locale-numeric.html -->
128
- <auro-datetime type="numeric" locale="en-GB" utc="2020-09-22T01:38:22Z"></auro-datetime><br>
129
- <auro-datetime type="numeric" locale="de-DE" utc="2020-09-22T01:38:22Z"></auro-datetime><br>
130
- <auro-datetime type="numeric" locale="ja-JP" utc="2020-09-22T01:38:22Z"></auro-datetime>
105
+ <auro-datetime type="numeric" locale="en-GB" value="2020-09-22T01:38:22Z"></auro-datetime><br>
106
+ <auro-datetime type="numeric" locale="de-DE" value="2020-09-22T01:38:22Z"></auro-datetime><br>
107
+ <auro-datetime type="numeric" locale="ja-JP" value="2020-09-22T01:38:22Z"></auro-datetime>
131
108
  <!-- AURO-GENERATED-CONTENT:END -->
132
109
  </div>
133
110
  <auro-accordion alignRight>
@@ -136,9 +113,38 @@ Use the `locale` attribute with a [BCP 47 language tag](https://developer.mozill
136
113
  <!-- The below code snippet is automatically added from ../apiExamples/locale-numeric.html -->
137
114
 
138
115
  ```html
139
- <auro-datetime type="numeric" locale="en-GB" utc="2020-09-22T01:38:22Z"></auro-datetime><br>
140
- <auro-datetime type="numeric" locale="de-DE" utc="2020-09-22T01:38:22Z"></auro-datetime><br>
141
- <auro-datetime type="numeric" locale="ja-JP" utc="2020-09-22T01:38:22Z"></auro-datetime>
116
+ <auro-datetime type="numeric" locale="en-GB" value="2020-09-22T01:38:22Z"></auro-datetime><br>
117
+ <auro-datetime type="numeric" locale="de-DE" value="2020-09-22T01:38:22Z"></auro-datetime><br>
118
+ <auro-datetime type="numeric" locale="ja-JP" value="2020-09-22T01:38:22Z"></auro-datetime>
119
+ ```
120
+ <!-- AURO-GENERATED-CONTENT:END -->
121
+ </auro-accordion>
122
+
123
+ #### Locale with type="time"
124
+
125
+ Time is the most format-divergent type across locales. The examples below highlight four distinct patterns: 12-hour with a Latin am/pm suffix (`en-US`), 24-hour with no marker (`de-DE`), 12-hour with a Korean period prefix (`ko-KR` → `오후`), and 12-hour with Arabic-Indic digits and an Arabic period marker (`ar-EG` → `م`).
126
+
127
+ Note: the choice of 12-hour vs 24-hour is decided by the runtime's `Intl.DateTimeFormat` per locale, not by this component. Several locales (`zh-CN`, `ja-JP`, `de-DE`, `fr-FR`, `en-GB`) default to a 24-hour clock for the short-time skeleton even though the language has 12-hour period words available — the component honors whatever the platform produces.
128
+
129
+ <div class="exampleWrapper">
130
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/locale-time.html) -->
131
+ <!-- The below content is automatically added from ../apiExamples/locale-time.html -->
132
+ <auro-datetime type="time" locale="en-US" value="2020-09-22T14:05:00"></auro-datetime><br>
133
+ <auro-datetime type="time" locale="de-DE" value="2020-09-22T14:05:00"></auro-datetime><br>
134
+ <auro-datetime type="time" locale="ko-KR" value="2020-09-22T14:05:00"></auro-datetime><br>
135
+ <auro-datetime type="time" locale="ar-EG" value="2020-09-22T14:05:00"></auro-datetime>
136
+ <!-- AURO-GENERATED-CONTENT:END -->
137
+ </div>
138
+ <auro-accordion alignRight>
139
+ <span slot="trigger">See code</span>
140
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/locale-time.html) -->
141
+ <!-- The below code snippet is automatically added from ../apiExamples/locale-time.html -->
142
+
143
+ ```html
144
+ <auro-datetime type="time" locale="en-US" value="2020-09-22T14:05:00"></auro-datetime><br>
145
+ <auro-datetime type="time" locale="de-DE" value="2020-09-22T14:05:00"></auro-datetime><br>
146
+ <auro-datetime type="time" locale="ko-KR" value="2020-09-22T14:05:00"></auro-datetime><br>
147
+ <auro-datetime type="time" locale="ar-EG" value="2020-09-22T14:05:00"></auro-datetime>
142
148
  ```
143
149
  <!-- AURO-GENERATED-CONTENT:END -->
144
150
  </auro-accordion>
@@ -164,16 +170,23 @@ Use the `month="long"` attribute to display the full month name, and `weekday="l
164
170
  <!-- AURO-GENERATED-CONTENT:END -->
165
171
  </auro-accordion>
166
172
 
167
- ### Set date/time with string
173
+ ### Set date/time with `value`
174
+
175
+ Use the `value` attribute to pass a single ISO 8601 date or date-time string into the element. The `value` attribute is locale-agnostic and replaces the previous `setDate` and `utc` attributes. Accepted shapes include:
176
+
177
+ - `2022-07-14T08:00:00-07:00` (date-time with offset)
178
+ - `2022-07-14T08:00:00Z` (UTC, Zulu designator)
179
+ - `2022-07-14T08:00:00` (date-time, no offset)
180
+ - `2022-07-14` (date only)
168
181
 
169
- Use the `setDate` property to inject a specific date into the element and parse as needed.
182
+ Invalid input is logged as a warning and renders nothing.
170
183
 
171
184
  <div class="exampleWrapper">
172
185
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/set-date.html) -->
173
186
  <!-- The below content is automatically added from ../apiExamples/set-date.html -->
174
- <auro-datetime setDate="August 19, 1975 23:15:30"></auro-datetime><br>
175
- <auro-datetime weekday="long" month="long" setDate="August 19, 1975 23:15:30"></auro-datetime><br>
176
- <auro-datetime type="time" setDate="August 19, 1975 23:15:30"></auro-datetime>
187
+ <auro-datetime value="1975-08-19T23:15:30"></auro-datetime><br>
188
+ <auro-datetime weekday="long" month="long" value="1975-08-19T23:15:30"></auro-datetime><br>
189
+ <auro-datetime type="time" value="1975-08-19T23:15:30"></auro-datetime>
177
190
  <!-- AURO-GENERATED-CONTENT:END -->
178
191
  </div>
179
192
  <auro-accordion alignRight>
@@ -182,16 +195,16 @@ Use the `setDate` property to inject a specific date into the element and parse
182
195
  <!-- The below code snippet is automatically added from ../apiExamples/set-date.html -->
183
196
 
184
197
  ```html
185
- <auro-datetime setDate="August 19, 1975 23:15:30"></auro-datetime><br>
186
- <auro-datetime weekday="long" month="long" setDate="August 19, 1975 23:15:30"></auro-datetime><br>
187
- <auro-datetime type="time" setDate="August 19, 1975 23:15:30"></auro-datetime>
198
+ <auro-datetime value="1975-08-19T23:15:30"></auro-datetime><br>
199
+ <auro-datetime weekday="long" month="long" value="1975-08-19T23:15:30"></auro-datetime><br>
200
+ <auro-datetime type="time" value="1975-08-19T23:15:30"></auro-datetime>
188
201
  ```
189
202
  <!-- AURO-GENERATED-CONTENT:END -->
190
203
  </auro-accordion>
191
204
 
192
205
  ### Type
193
206
 
194
- Use `type` to define the type of data to render. Options are `[date, time, year, month, weekday, day, numeric, tzDate, tzTime]`.
207
+ Use `type` to define the type of data to render. Options are `[date, time, year, month, weekday, day, numeric]`.
195
208
 
196
209
  #### Numeric Date
197
210
 
@@ -214,19 +227,17 @@ Using the `auro-datetime` element with `type=numeric` will return the **current
214
227
  <!-- AURO-GENERATED-CONTENT:END -->
215
228
  </auro-accordion>
216
229
 
217
- #### Set date with code +/- time zone
230
+ #### Wall-clock display from offset
218
231
 
219
- <auro-alert type="information">The <code>auro-datetime</code> element <strong>does not</strong> support local/time zone conversion. The scope of this element is to use current or specifically assigned date/time data and return a string for display.</auro-alert>
220
- <br />
221
- Use `type="tzTime"`or `type="tzDate"` with the `setDate` property to define a new date object in a specific time zone using the `YYYY-MM-DDTHH:MM:SS-HH:MM` model.
232
+ When the `value` attribute contains a timezone offset (or `Z`) and no `timeZone` attribute is set, the component renders the **wall-clock** components from the input verbatim. This is the right behavior for displaying local airport time on a flight schedule, where the offset describes the location of the flight rather than the viewer.
222
233
 
223
- Example using `2022-07-13T21:35:00-07:00` with Pacific `(-07:00)` time zone during daylight saving time. (The offset is `(-06:00)` during standard time.)
234
+ Example using `2022-07-13T21:35:00-07:00`. The same string is rendered identically regardless of the viewer's location.
224
235
 
225
236
  <div class="exampleWrapper">
226
237
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/plus-minus.html) -->
227
238
  <!-- The below content is automatically added from ../apiExamples/plus-minus.html -->
228
- <auro-datetime type="tzTime" setDate="2022-07-13T21:35:00-07:00"></auro-datetime><br>
229
- <auro-datetime type="tzDate" setDate="2022-07-13T21:35:00-07:00"></auro-datetime>
239
+ <auro-datetime type="time" value="2022-07-13T21:35:00-07:00"></auro-datetime><br>
240
+ <auro-datetime type="date" value="2022-07-13T21:35:00-07:00"></auro-datetime>
230
241
  <!-- AURO-GENERATED-CONTENT:END -->
231
242
  </div>
232
243
  <auro-accordion alignRight>
@@ -235,25 +246,22 @@ Example using `2022-07-13T21:35:00-07:00` with Pacific `(-07:00)` time zone duri
235
246
  <!-- The below code snippet is automatically added from ../apiExamples/plus-minus.html -->
236
247
 
237
248
  ```html
238
- <auro-datetime type="tzTime" setDate="2022-07-13T21:35:00-07:00"></auro-datetime><br>
239
- <auro-datetime type="tzDate" setDate="2022-07-13T21:35:00-07:00"></auro-datetime>
249
+ <auro-datetime type="time" value="2022-07-13T21:35:00-07:00"></auro-datetime><br>
250
+ <auro-datetime type="date" value="2022-07-13T21:35:00-07:00"></auro-datetime>
240
251
  ```
241
252
  <!-- AURO-GENERATED-CONTENT:END -->
242
253
  </auro-accordion>
243
254
 
244
- ### Set date with UTC (Zulu) time code
255
+ ### UTC (Zulu) input
245
256
 
246
- <auro-alert type="information">Times are expressed in ISO 8601 date and time format in UTC (Coordinated Universal Time), with a special UTC designator ("Z").<br>
247
- `YYYY-MM-DDTHH:MM:SSZ`</auro-alert>
248
- <br />
249
- Using the `utc` property, be sure to only use a properly-formatted UTC code.
257
+ The `value` attribute also accepts ISO 8601 strings ending in the `Z` designator. Without a `timeZone` attribute, the wall-clock components are rendered as written. To convert into a viewer-meaningful timezone, also set `timeZone` (see the timezone example).
250
258
 
251
259
  <div class="exampleWrapper">
252
260
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/utc.html) -->
253
261
  <!-- The below content is automatically added from ../apiExamples/utc.html -->
254
- <auro-datetime utc="2020-09-22T01:38:22Z"></auro-datetime><br>
255
- <auro-datetime type="time" utc="2020-09-22T01:38:22Z"></auro-datetime><br>
256
- <auro-datetime weekday="long" month="long" utc="2020-09-22T01:38:22Z"></auro-datetime>
262
+ <auro-datetime value="2020-09-22T01:38:22Z"></auro-datetime><br>
263
+ <auro-datetime type="time" value="2020-09-22T01:38:22Z"></auro-datetime><br>
264
+ <auro-datetime weekday="long" month="long" value="2020-09-22T01:38:22Z"></auro-datetime>
257
265
  <!-- AURO-GENERATED-CONTENT:END -->
258
266
  </div>
259
267
  <auro-accordion alignRight>
@@ -262,13 +270,20 @@ Using the `utc` property, be sure to only use a properly-formatted UTC code.
262
270
  <!-- The below code snippet is automatically added from ../apiExamples/utc.html -->
263
271
 
264
272
  ```html
265
- <auro-datetime utc="2020-09-22T01:38:22Z"></auro-datetime><br>
266
- <auro-datetime type="time" utc="2020-09-22T01:38:22Z"></auro-datetime><br>
267
- <auro-datetime weekday="long" month="long" utc="2020-09-22T01:38:22Z"></auro-datetime>
273
+ <auro-datetime value="2020-09-22T01:38:22Z"></auro-datetime><br>
274
+ <auro-datetime type="time" value="2020-09-22T01:38:22Z"></auro-datetime><br>
275
+ <auro-datetime weekday="long" month="long" value="2020-09-22T01:38:22Z"></auro-datetime>
268
276
  ```
269
277
  <!-- AURO-GENERATED-CONTENT:END -->
270
278
  </auro-accordion>
271
279
 
280
+ ### Combining `value` and `timeZone`
281
+
282
+ How the `timeZone` attribute composes with the input depends on whether `value` carries an offset:
283
+
284
+ - **`value` has an offset (or `Z`):** the offset anchors the absolute moment; `timeZone` is the display zone. Example: `value="2022-07-14T08:00:00-04:00" timezone="US/Pacific"` renders as `5:00 am` (8am Eastern → 5am Pacific).
285
+ - **`value` has no offset:** the wall-clock is interpreted as being in `timeZone`, so display in that same zone matches the input verbatim. Example: `value="2022-07-14T08:00:00" timezone="US/Eastern"` renders as `8:00 am` regardless of where the viewer is. This is the recommended shape when consumers know the source zone but don't have an offset readily available (e.g. flight-schedule data keyed by airport).
286
+
272
287
  ## Slot Examples
273
288
 
274
289
  ### Pre and Post Slots
@@ -313,8 +328,8 @@ Example using `2022-07-14T06:00:00-04:00` with Eastern `(-04:00)` time zone.
313
328
  <div class="exampleWrapper">
314
329
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/east-plus-minus.html) -->
315
330
  <!-- The below content is automatically added from ../apiExamples/east-plus-minus.html -->
316
- <auro-datetime type="tzTime" setDate="2022-07-14T06:00:00-04:00"></auro-datetime><br>
317
- <auro-datetime type="tzDate" setDate="2022-07-14T06:00:00-04:00"></auro-datetime>
331
+ <auro-datetime type="time" value="2022-07-14T06:00:00-04:00"></auro-datetime><br>
332
+ <auro-datetime type="date" value="2022-07-14T06:00:00-04:00"></auro-datetime>
318
333
  <!-- AURO-GENERATED-CONTENT:END -->
319
334
  </div>
320
335
  <auro-accordion alignRight>
@@ -323,8 +338,8 @@ Example using `2022-07-14T06:00:00-04:00` with Eastern `(-04:00)` time zone.
323
338
  <!-- The below code snippet is automatically added from ../apiExamples/east-plus-minus.html -->
324
339
 
325
340
  ```html
326
- <auro-datetime type="tzTime" setDate="2022-07-14T06:00:00-04:00"></auro-datetime><br>
327
- <auro-datetime type="tzDate" setDate="2022-07-14T06:00:00-04:00"></auro-datetime>
341
+ <auro-datetime type="time" value="2022-07-14T06:00:00-04:00"></auro-datetime><br>
342
+ <auro-datetime type="date" value="2022-07-14T06:00:00-04:00"></auro-datetime>
328
343
  ```
329
344
  <!-- AURO-GENERATED-CONTENT:END -->
330
345
  </auro-accordion>
@@ -336,8 +351,8 @@ Example using `2022-07-14T08:00:00-10:00` with Hawaii `(-10:00)` time zone.
336
351
  <div class="exampleWrapper">
337
352
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/hawaii-plus-minus.html) -->
338
353
  <!-- The below content is automatically added from ../apiExamples/hawaii-plus-minus.html -->
339
- <auro-datetime type="tzTime" setDate="2022-07-16T08:00:00-10:00"></auro-datetime><br>
340
- <auro-datetime type="tzDate" setDate="2022-07-16T08:00:00-10:00"></auro-datetime>
354
+ <auro-datetime type="time" value="2022-07-16T08:00:00-10:00"></auro-datetime><br>
355
+ <auro-datetime type="date" value="2022-07-16T08:00:00-10:00"></auro-datetime>
341
356
  <!-- AURO-GENERATED-CONTENT:END -->
342
357
  </div>
343
358
  <auro-accordion alignRight>
@@ -346,8 +361,8 @@ Example using `2022-07-14T08:00:00-10:00` with Hawaii `(-10:00)` time zone.
346
361
  <!-- The below code snippet is automatically added from ../apiExamples/hawaii-plus-minus.html -->
347
362
 
348
363
  ```html
349
- <auro-datetime type="tzTime" setDate="2022-07-16T08:00:00-10:00"></auro-datetime><br>
350
- <auro-datetime type="tzDate" setDate="2022-07-16T08:00:00-10:00"></auro-datetime>
364
+ <auro-datetime type="time" value="2022-07-16T08:00:00-10:00"></auro-datetime><br>
365
+ <auro-datetime type="date" value="2022-07-16T08:00:00-10:00"></auro-datetime>
351
366
  ```
352
367
  <!-- AURO-GENERATED-CONTENT:END -->
353
- </auro-accordion>
368
+ </auro-accordion>
package/demo/auro-datetime.min.js CHANGED
@@ -111,6 +111,9 @@ const t=globalThis,i$1=t=>t,s$1=t.trustedTypes,e=s$1?s$1.createPolicy("lit-html"
111
111
  // See LICENSE in the project root for license information.
112
112
 
113
113
 
114
+ const ISO_8601_REGEX =
115
+ /^(\d{4}-\d{2}-\d{2}(?:T\d{2}:\d{2}(?::\d{2}(?:\.\d+)?)?)?)(Z|[+-]\d{2}:\d{2})?$/u;
116
+
114
117
  // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
115
118
  /**
116
119
  * The `auro-datetime` element is for the purposes of providing an easy to use date and time API.
@@ -133,12 +136,50 @@ class AuroDatetime extends i {
133
136
  this.month = "short";
134
137
  this.locale = "en-US";
135
138
 
139
+ /**
140
+ * Tracks invalid locale inputs already warned about, so a parent that
141
+ * re-renders with the same bad value doesn't flood the console.
142
+ * @private
143
+ */
144
+ this._warnedLocales = new Set();
145
+
146
+ /**
147
+ * @private
148
+ */
149
+ this._effectiveLocale = this._resolveLocale(this.locale);
150
+
136
151
  /**
137
152
  * @private
138
153
  */
139
154
  this.runtimeUtils = new AuroLibraryRuntimeUtils();
140
155
  }
141
156
 
157
+ /**
158
+ * Validate and canonicalize a BCP 47 locale tag. Falls back to "en-US"
159
+ * for empty or invalid input. The first invalid value seen per element
160
+ * is logged via `console.warn`; subsequent identical inputs are silent.
161
+ *
162
+ * @private
163
+ * @param {string} input - User-supplied locale tag.
164
+ * @returns {string} Canonical locale tag (e.g. "en-GB"), or "en-US" on fallback.
165
+ */
166
+ _resolveLocale(input) {
167
+ if (!input) {
168
+ return "en-US";
169
+ }
170
+ try {
171
+ return Intl.getCanonicalLocales(input)[0];
172
+ } catch {
173
+ if (this._warnedLocales && !this._warnedLocales.has(input)) {
174
+ this._warnedLocales.add(input);
175
+ console.warn(
176
+ `auro-datetime: "${input}" is not a valid BCP 47 locale tag. Falling back to "en-US".`,
177
+ );
178
+ }
179
+ return "en-US";
180
+ }
181
+ }
182
+
142
183
  connectedCallback() {
143
184
  super.connectedCallback();
144
185
 
@@ -152,10 +193,7 @@ class AuroDatetime extends i {
152
193
  this.timeTemplate = {
153
194
  hour: "2-digit",
154
195
  minute: "2-digit",
155
- timeZone: this.timeZone,
156
196
  };
157
-
158
- this.template = {};
159
197
  }
160
198
 
161
199
  // function to define props used within the scope of this component
@@ -163,11 +201,6 @@ class AuroDatetime extends i {
163
201
  return {
164
202
  // ...super.properties,
165
203
 
166
- /**
167
- * Capitalize AM or PM designation
168
- */
169
- cap: { type: Boolean },
170
-
171
204
  /**
172
205
  * BCP 47 language tag for locale-aware date/time formatting (e.g. 'en-GB', 'de-DE', 'ja-JP').
173
206
  * @type {string}
@@ -183,25 +216,29 @@ class AuroDatetime extends i {
183
216
  month: { type: String },
184
217
 
185
218
  /**
186
- * Pass in string to set date
187
- */
188
- setDate: { type: String },
189
-
190
- /**
191
- * Pass in string to define [timeZone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)
219
+ * Pass in string to define [timeZone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones).
220
+ * When set, the moment described by `value` is converted into this IANA zone for display.
221
+ * When unset, the wall-clock time from the input string is rendered as-is.
192
222
  */
193
223
  timeZone: { type: String },
194
224
 
195
225
  /**
196
226
  * Defines type of data to render
197
- * @type {'date' | 'time' | 'year' | 'month' | 'weekday' | 'day' | 'numeric' | 'tzDate' | 'tzTime'}
227
+ * @type {'date' | 'time' | 'year' | 'month' | 'weekday' | 'day' | 'numeric'}
198
228
  */
199
229
  type: { type: String },
200
230
 
201
231
  /**
202
- * Pass in ISO 8601 UTC formatted time code
232
+ * ISO 8601 date or date-time string. Examples:
233
+ * - `2022-07-14T08:00:00-07:00` (with offset)
234
+ * - `2022-07-14T08:00:00Z` (UTC)
235
+ * - `2022-07-14T08:00:00` (no offset)
236
+ * - `2022-07-14` (date only)
237
+ *
238
+ * When omitted, the component renders today's date.
239
+ * Invalid input is logged as a warning and renders nothing.
203
240
  */
204
- utc: { type: String },
241
+ value: { type: String },
205
242
 
206
243
  /**
207
244
  * Defines format of weekday
@@ -225,13 +262,8 @@ class AuroDatetime extends i {
225
262
  }
226
263
 
227
264
  willUpdate(changedProperties) {
228
- if (changedProperties.has('locale') && this.locale) {
229
- try {
230
- Intl.getCanonicalLocales(this.locale);
231
- } catch {
232
- console.warn(`auro-datetime: "${this.locale}" is not a valid BCP 47 locale tag. Falling back to "en-US".`);
233
- this.locale = "en-US";
234
- }
265
+ if (changedProperties.has("locale")) {
266
+ this._effectiveLocale = this._resolveLocale(this.locale);
235
267
  }
236
268
  }
237
269
 
@@ -241,170 +273,218 @@ class AuroDatetime extends i {
241
273
  }
242
274
 
243
275
  /**
244
- * Internal function generate date string.
276
+ * Construct a UTC Date that, when displayed in the given IANA timezone,
277
+ * shows the supplied wall-clock components. Used when `value` has no
278
+ * offset but `timeZone` is set — the wall-clock is interpreted as being
279
+ * in the target zone rather than the viewer's local zone.
280
+ *
281
+ * Algorithm: parse the wall-clock as if it were UTC (a "naive" Date),
282
+ * ask Intl what that moment looks like in the target zone, and use the
283
+ * delta between the two to recover the true UTC moment.
284
+ *
245
285
  * @private
246
- * @returns {string} - Date string.
286
+ * @param {string} localISO - ISO string with no offset, e.g. "2022-07-14T08:00:00".
287
+ * @param {string} timeZone - IANA zone, e.g. "US/Eastern".
288
+ * @returns {Date}
247
289
  */
248
- humanDate() {
249
- let newDate = new Date();
290
+ _zonedWallClockToUtc(localISO, timeZone) {
291
+ const naiveUtc = new Date(`${localISO}Z`);
292
+ const parts = new Intl.DateTimeFormat("en-US", {
293
+ timeZone,
294
+ hourCycle: "h23",
295
+ year: "numeric",
296
+ month: "2-digit",
297
+ day: "2-digit",
298
+ hour: "2-digit",
299
+ minute: "2-digit",
300
+ second: "2-digit",
301
+ }).formatToParts(naiveUtc);
302
+ const lookup = Object.fromEntries(
303
+ parts.filter((p) => p.type !== "literal").map((p) => [p.type, p.value]),
304
+ );
305
+ const seenInZone = new Date(
306
+ `${lookup.year}-${lookup.month}-${lookup.day}T${lookup.hour}:${lookup.minute}:${lookup.second}Z`,
307
+ );
308
+ const offsetMs = naiveUtc.getTime() - seenInZone.getTime();
309
+ return new Date(naiveUtc.getTime() + offsetMs);
310
+ }
311
+
312
+ /**
313
+ * Resolve the `value` and `timeZone` attributes into a Date and an optional
314
+ * timeZone option for `Intl.DateTimeFormat`.
315
+ *
316
+ * Behavior:
317
+ * - No `value`: returns today's date. `timeZone` (if any) is honored.
318
+ * - `value` invalid: warns and returns `{ date: null }`.
319
+ * - `timeZone` set + input has offset/Z: parses as an absolute moment
320
+ * (offset honored) and asks `toLocaleString` to convert into the target zone.
321
+ * - `timeZone` set + input has no offset: interprets the wall-clock as
322
+ * being in the target zone, so display in that zone matches the input
323
+ * verbatim. This is viewer-independent.
324
+ * - Default (no `timeZone`): strips the offset/Z from the input and treats
325
+ * the remaining wall-clock components as local time, so they render verbatim.
326
+ *
327
+ * @private
328
+ * @returns {{ date: Date | null, timeZoneOption: string | undefined }}
329
+ */
330
+ _resolveInputDate() {
331
+ if (!this.value) {
332
+ return { date: new Date(), timeZoneOption: this.timeZone || undefined };
333
+ }
334
+
335
+ const match = this.value.match(ISO_8601_REGEX);
336
+ if (!match) {
337
+ console.warn(
338
+ `auro-datetime: "${this.value}" is not a valid ISO 8601 string.`,
339
+ );
340
+ return { date: null, timeZoneOption: undefined };
341
+ }
250
342
 
251
- if (this.utc) {
252
- this.dateTemplate.timeZone = "UTC";
253
- newDate = new Date(this.utc);
254
- } else if (this.setDate) {
255
- newDate = new Date(this.setDate);
343
+ const localPart = match[1];
344
+ const hasOffset = Boolean(match[2]);
345
+ const normalized = localPart.includes("T")
346
+ ? localPart
347
+ : `${localPart}T00:00:00`;
348
+
349
+ if (this.timeZone) {
350
+ if (hasOffset) {
351
+ return { date: new Date(this.value), timeZoneOption: this.timeZone };
352
+ }
353
+ // No offset: the wall-clock is ambiguous without a zone. Treat it as
354
+ // being in `timeZone` so the rendered output matches the input
355
+ // regardless of where the viewer is.
356
+ return {
357
+ date: this._zonedWallClockToUtc(normalized, this.timeZone),
358
+ timeZoneOption: this.timeZone,
359
+ };
256
360
  }
257
361
 
258
- return newDate.toLocaleString(this.locale, this.dateTemplate);
362
+ // Wall-clock: keep the components in the input verbatim. JS parses
363
+ // bare "YYYY-MM-DD" as UTC midnight, which shifts the date in the
364
+ // viewer's timezone; appending a time forces local-time parsing.
365
+ return { date: new Date(normalized), timeZoneOption: undefined };
259
366
  }
260
367
 
261
368
  /**
262
- * Internal function to determine new Date object based on input type.
369
+ * Internal function to generate full date string.
263
370
  * @private
264
371
  * @returns {string} - Date string.
265
372
  */
266
- humanDateConversion() {
267
- let newDate = new Date();
373
+ humanDate() {
374
+ const { date, timeZoneOption } = this._resolveInputDate();
375
+ if (!date) {
376
+ return "";
377
+ }
378
+ const template = { ...this.dateTemplate };
379
+ if (timeZoneOption) {
380
+ template.timeZone = timeZoneOption;
381
+ }
382
+ return date.toLocaleString(this._effectiveLocale, template);
383
+ }
268
384
 
269
- if (this.utc) {
270
- this.template.timeZone = "UTC";
271
- newDate = new Date(this.utc);
272
- } else if (this.setDate) {
273
- newDate = new Date(this.setDate);
385
+ /**
386
+ * Internal function to format a single date part (year/month/weekday/day).
387
+ * @private
388
+ * @returns {string} - Date string.
389
+ */
390
+ humanDateConversion() {
391
+ const { date, timeZoneOption } = this._resolveInputDate();
392
+ if (!date) {
393
+ return "";
394
+ }
395
+ const template = {};
396
+ if (timeZoneOption) {
397
+ template.timeZone = timeZoneOption;
274
398
  }
275
399
 
276
400
  switch (this.type) {
277
401
  case "day":
278
- this.template.day = "numeric";
402
+ template.day = "numeric";
279
403
  break;
280
404
  case "month":
281
- this.template.month = this.month;
405
+ template.month = this.month;
282
406
  break;
283
407
  case "year":
284
- this.template.year = "numeric";
408
+ template.year = "numeric";
285
409
  break;
286
410
  case "weekday":
287
- this.template.weekday = this.weekday;
411
+ template.weekday = this.weekday;
288
412
  break;
289
-
290
- default:
291
- this.template.weekday = this.template;
292
413
  }
293
414
 
294
- return newDate.toLocaleString(this.locale, this.template);
415
+ return date.toLocaleString(this._effectiveLocale, template);
295
416
  }
296
417
 
297
418
  /**
298
- * Internal function generate numeric date string 00/00/0000.
419
+ * Internal function to generate numeric date string MM/DD/YYYY.
299
420
  * @private
300
421
  * @returns {string} - Date string.
301
422
  */
302
423
  numericDate() {
303
- this.dateTemplate.month = "numeric";
304
- Reflect.deleteProperty(this.dateTemplate, "weekday");
305
- let newDate = new Date();
306
-
307
- if (this.utc) {
308
- this.dateTemplate.timeZone = "UTC";
309
- newDate = new Date(this.utc);
310
- } else if (this.setDate) {
311
- newDate = new Date(this.setDate);
424
+ const { date, timeZoneOption } = this._resolveInputDate();
425
+ if (!date) {
426
+ return "";
312
427
  }
313
-
314
- return newDate.toLocaleString(this.locale, this.dateTemplate);
428
+ const template = { ...this.dateTemplate, month: "numeric" };
429
+ Reflect.deleteProperty(template, "weekday");
430
+ if (timeZoneOption) {
431
+ template.timeZone = timeZoneOption;
432
+ }
433
+ return date.toLocaleString(this._effectiveLocale, template);
315
434
  }
316
435
 
317
436
  /**
318
- * Internal function generate standard time string.
437
+ * Internal function to generate standard time string.
319
438
  * @private
320
439
  * @returns {string} - Time string.
321
440
  */
322
441
  humanTime() {
323
- let newTime = new Date();
324
-
325
- if (this.utc) {
326
- this.timeTemplate.timeZone = "UTC";
327
- newTime = new Date(this.utc);
328
- } else if (this.setDate) {
329
- newTime = new Date(this.setDate);
442
+ const { date, timeZoneOption } = this._resolveInputDate();
443
+ if (!date) {
444
+ return "";
330
445
  }
331
-
332
- if (this.cap) {
333
- return newTime
334
- .toLocaleString(this.locale, this.timeTemplate)
335
- .replace(/^0+/u, "");
446
+ const template = { ...this.timeTemplate };
447
+ if (timeZoneOption) {
448
+ template.timeZone = timeZoneOption;
336
449
  }
337
450
 
338
- return newTime
339
- .toLocaleString(this.locale, this.timeTemplate)
340
- .replace(/^0+/u, "")
341
- .toLowerCase();
342
- }
343
-
344
- /**
345
- * Internal function to generate proper time zone local.
346
- * @private
347
- * @returns {string} - Date/Time zone string.
348
- * @param {string} template - Determines which template model to use.
349
- */
350
- tzTime(template) {
351
- const scrubNumber = -6;
352
- const scrubTimeZone = this.setDate.slice(0, scrubNumber);
353
- const newDateTime = new Date(scrubTimeZone);
354
-
355
- if (this.cap) {
356
- return newDateTime.toLocaleString(this.locale, template).replace(/^0+/u, "");
451
+ const formatted = date.toLocaleString(this._effectiveLocale, template);
452
+
453
+ // Detect a 12-hour rendered output by the presence of a Latin-script
454
+ // period marker. The pattern matches `am`, `pm`, `a.m.`, `p.m.`
455
+ // (case-insensitive), so it catches en-US (`PM`), en-AU/hi-IN (`pm`),
456
+ // and en-CA/es-MX (`p.m.`) alike. Non-Latin period markers (ko `오후`,
457
+ // ar `م`, zh-TW `下午`) have no ASCII a/p+m chars and correctly fall
458
+ // through unchanged. 24h locales (en-GB, de-DE, fr-FR, ja-JP …) also
459
+ // fall through, preserving their leading zeros.
460
+ if (!/[ap]\.?m\.?/iu.test(formatted)) {
461
+ return formatted;
357
462
  }
358
463
 
359
- return newDateTime
360
- .toLocaleString(this.locale, template)
361
- .replace(/^0+/u, "")
362
- .replace("AM", "am")
363
- .replace("PM", "pm");
464
+ return formatted.replace(/^0+/u, "").toLowerCase();
364
465
  }
365
-
466
+
366
467
  /**
367
468
  * Internal function UI decision.
368
469
  * @private
369
- * @returns {function} - Function determines which style of date data to show.
470
+ * @returns {string} - String determined by `type` (or full date if no type set).
370
471
  */
371
472
  whichDate() {
372
- let result = "";
373
-
374
473
  switch (this.type) {
375
474
  case "date":
376
- result = this.humanDate();
377
- break;
378
- case "tzDate":
379
- result = this.tzTime(this.dateTemplate);
380
- break;
381
- case "tzTime":
382
- result = this.tzTime(this.timeTemplate);
383
- break;
475
+ return this.humanDate();
384
476
  case "time":
385
- result = this.humanTime();
386
- break;
477
+ return this.humanTime();
387
478
  case "year":
388
479
  case "month":
389
480
  case "weekday":
390
481
  case "day":
391
- result = this.humanDateConversion();
392
- break;
482
+ return this.humanDateConversion();
393
483
  case "numeric":
394
- result = this.numericDate();
395
- break;
484
+ return this.numericDate();
396
485
  default:
397
- this.humanDate();
398
- }
399
-
400
- if (this.setDate && !this.type) {
401
- return this.humanDate();
486
+ return this.humanDate();
402
487
  }
403
- if (this.utc && !this.type) {
404
- return this.humanDate();
405
- }
406
-
407
- return result;
408
488
  }
409
489
 
410
490
  // When using auroElement, use the following attribute and function when hiding content from screen readers.
package/dist/auro-datetime-BmzswYzJ.js ADDED
@@ -0,0 +1,6 @@
1
+ import{LitElement as e,html as t}from"lit";class n{registerComponent(e,t){customElements.get(e)||customElements.define(e,class extends t{})}closestElement(e,t=this,n=(t,i=t&&t.closest(e))=>t&&t!==document&&t!==window?i||n(t.getRootNode().host):null){return n(t)}handleComponentTagRename(e,t){const n=t.toLowerCase();e.tagName.toLowerCase()!==n&&e.setAttribute(n,!0)}elementMatch(e,t){const n=t.toLowerCase();return e.tagName.toLowerCase()===n||e.hasAttribute(n)}getSlotText(e,t){const n=e.shadowRoot?.querySelector(`slot[name="${t}"]`);return(n?.assignedNodes({flatten:!0})||[]).map(e=>e.textContent?.trim()).join(" ").trim()||null}}const i=/^(\d{4}-\d{2}-\d{2}(?:T\d{2}:\d{2}(?::\d{2}(?:\.\d+)?)?)?)(Z|[+-]\d{2}:\d{2})?$/u;class a extends e{constructor(){super(),this._initializeDefaults()}_initializeDefaults(){this.weekday="short",this.month="short",this.locale="en-US",this._warnedLocales=new Set,this._effectiveLocale=this._resolveLocale(this.locale),this.runtimeUtils=new n}_resolveLocale(e){if(!e)return"en-US";try{return Intl.getCanonicalLocales(e)[0]}catch{return this._warnedLocales&&!this._warnedLocales.has(e)&&(this._warnedLocales.add(e),console.warn(`auro-datetime: "${e}" is not a valid BCP 47 locale tag. Falling back to "en-US".`)),"en-US"}}connectedCallback(){super.connectedCallback(),this.dateTemplate={weekday:this.weekday,year:"numeric",month:this.month,day:"numeric"},this.timeTemplate={hour:"2-digit",minute:"2-digit"}}static get properties(){return{locale:{type:String},month:{type:String},timeZone:{type:String},type:{type:String},value:{type:String},weekday:{type:String}}}static register(e="auro-datetime"){n.prototype.registerComponent(e,a)}willUpdate(e){e.has("locale")&&(this._effectiveLocale=this._resolveLocale(this.locale))}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-datetime")}_zonedWallClockToUtc(e,t){const n=new Date(`${e}Z`),i=new Intl.DateTimeFormat("en-US",{timeZone:t,hourCycle:"h23",year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit"}).formatToParts(n),a=Object.fromEntries(i.filter(e=>"literal"!==e.type).map(e=>[e.type,e.value])),o=new Date(`${a.year}-${a.month}-${a.day}T${a.hour}:${a.minute}:${a.second}Z`),s=n.getTime()-o.getTime();return new Date(n.getTime()+s)}_resolveInputDate(){if(!this.value)return{date:new Date,timeZoneOption:this.timeZone||void 0};const e=this.value.match(i);if(!e)return console.warn(`auro-datetime: "${this.value}" is not a valid ISO 8601 string.`),{date:null,timeZoneOption:void 0};const t=e[1],n=Boolean(e[2]),a=t.includes("T")?t:`${t}T00:00:00`;return this.timeZone?n?{date:new Date(this.value),timeZoneOption:this.timeZone}:{date:this._zonedWallClockToUtc(a,this.timeZone),timeZoneOption:this.timeZone}:{date:new Date(a),timeZoneOption:void 0}}humanDate(){const{date:e,timeZoneOption:t}=this._resolveInputDate();if(!e)return"";const n={...this.dateTemplate};return t&&(n.timeZone=t),e.toLocaleString(this._effectiveLocale,n)}humanDateConversion(){const{date:e,timeZoneOption:t}=this._resolveInputDate();if(!e)return"";const n={};switch(t&&(n.timeZone=t),this.type){case"day":n.day="numeric";break;case"month":n.month=this.month;break;case"year":n.year="numeric";break;case"weekday":n.weekday=this.weekday}return e.toLocaleString(this._effectiveLocale,n)}numericDate(){const{date:e,timeZoneOption:t}=this._resolveInputDate();if(!e)return"";const n={...this.dateTemplate,month:"numeric"};return Reflect.deleteProperty(n,"weekday"),t&&(n.timeZone=t),e.toLocaleString(this._effectiveLocale,n)}humanTime(){const{date:e,timeZoneOption:t}=this._resolveInputDate();if(!e)return"";const n={...this.timeTemplate};t&&(n.timeZone=t);const i=e.toLocaleString(this._effectiveLocale,n);return/[ap]\.?m\.?/iu.test(i)?i.replace(/^0+/u,"").toLowerCase():i}whichDate(){switch(this.type){case"date":default:return this.humanDate();case"time":return this.humanTime();case"year":case"month":case"weekday":case"day":return this.humanDateConversion();case"numeric":return this.numericDate()}}render(){return t`
2
+ <slot name="pre"></slot>
3
+ <span class="yield">${this.whichDate()}</span>
4
+ <slot name="post"></slot>
5
+ <slot></slot>
6
+ `}}export{a as A};
package/dist/index.d.ts CHANGED
@@ -73,39 +73,49 @@ type BaseProps<T extends HTMLElement> = {
73
73
  type BaseEvents = {};
74
74
 
75
75
  export type AuroDatetimeProps = {
76
- /** Capitalize AM or PM designation */
77
- cap?: AuroDatetime["cap"];
78
76
  /** BCP 47 language tag for locale-aware date/time formatting (e.g. 'en-GB', 'de-DE', 'ja-JP'). */
79
77
  locale?: AuroDatetime["locale"];
80
78
  /** Defines format of month */
81
79
  month?: AuroDatetime["month"];
82
- /** Pass in string to set date */
83
- setDate?: AuroDatetime["setDate"];
84
- /** Pass in string to define [timeZone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) */
80
+ /** Pass in string to define [timeZone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones).
81
+ When set, the moment described by `value` is converted into this IANA zone for display.
82
+ When unset, the wall-clock time from the input string is rendered as-is. */
85
83
  timeZone?: AuroDatetime["timeZone"];
86
84
  /** Defines type of data to render */
87
85
  type?: AuroDatetime["type"];
88
- /** Pass in ISO 8601 UTC formatted time code */
89
- utc?: AuroDatetime["utc"];
86
+ /** ISO 8601 date or date-time string. Examples:
87
+ - `2022-07-14T08:00:00-07:00` (with offset)
88
+ - `2022-07-14T08:00:00Z` (UTC)
89
+ - `2022-07-14T08:00:00` (no offset)
90
+ - `2022-07-14` (date only)
91
+
92
+ When omitted, the component renders today's date.
93
+ Invalid input is logged as a warning and renders nothing. */
94
+ value?: AuroDatetime["value"];
90
95
  /** Defines format of weekday */
91
96
  weekday?: AuroDatetime["weekday"];
92
97
  };
93
98
 
94
99
  export type AuroDatetimeSolidJsProps = {
95
- /** Capitalize AM or PM designation */
96
- "prop:cap"?: AuroDatetime["cap"];
97
100
  /** BCP 47 language tag for locale-aware date/time formatting (e.g. 'en-GB', 'de-DE', 'ja-JP'). */
98
101
  "prop:locale"?: AuroDatetime["locale"];
99
102
  /** Defines format of month */
100
103
  "prop:month"?: AuroDatetime["month"];
101
- /** Pass in string to set date */
102
- "prop:setDate"?: AuroDatetime["setDate"];
103
- /** Pass in string to define [timeZone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) */
104
+ /** Pass in string to define [timeZone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones).
105
+ When set, the moment described by `value` is converted into this IANA zone for display.
106
+ When unset, the wall-clock time from the input string is rendered as-is. */
104
107
  "prop:timeZone"?: AuroDatetime["timeZone"];
105
108
  /** Defines type of data to render */
106
109
  "prop:type"?: AuroDatetime["type"];
107
- /** Pass in ISO 8601 UTC formatted time code */
108
- "prop:utc"?: AuroDatetime["utc"];
110
+ /** ISO 8601 date or date-time string. Examples:
111
+ - `2022-07-14T08:00:00-07:00` (with offset)
112
+ - `2022-07-14T08:00:00Z` (UTC)
113
+ - `2022-07-14T08:00:00` (no offset)
114
+ - `2022-07-14` (date only)
115
+
116
+ When omitted, the component renders today's date.
117
+ Invalid input is logged as a warning and renders nothing. */
118
+ "prop:value"?: AuroDatetime["value"];
109
119
  /** Defines format of weekday */
110
120
  "prop:weekday"?: AuroDatetime["weekday"];
111
121
 
@@ -123,13 +133,20 @@ export type CustomElements = {
123
133
  *
124
134
  * Component attributes and properties that can be applied to the element or by using JavaScript.
125
135
  *
126
- * - `cap`: Capitalize AM or PM designation
127
136
  * - `locale`: BCP 47 language tag for locale-aware date/time formatting (e.g. 'en-GB', 'de-DE', 'ja-JP').
128
137
  * - `month`: Defines format of month
129
- * - `setDate`: Pass in string to set date
130
- * - `timeZone`: Pass in string to define [timeZone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)
138
+ * - `timeZone`: Pass in string to define [timeZone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones).
139
+ * When set, the moment described by `value` is converted into this IANA zone for display.
140
+ * When unset, the wall-clock time from the input string is rendered as-is.
131
141
  * - `type`: Defines type of data to render
132
- * - `utc`: Pass in ISO 8601 UTC formatted time code
142
+ * - `value`: ISO 8601 date or date-time string. Examples:
143
+ * - `2022-07-14T08:00:00-07:00` (with offset)
144
+ * - `2022-07-14T08:00:00Z` (UTC)
145
+ * - `2022-07-14T08:00:00` (no offset)
146
+ * - `2022-07-14` (date only)
147
+ *
148
+ * When omitted, the component renders today's date.
149
+ * Invalid input is logged as a warning and renders nothing.
133
150
  * - `weekday`: Defines format of weekday
134
151
  *
135
152
  * ## Slots
@@ -159,13 +176,20 @@ export type CustomElementsSolidJs = {
159
176
  *
160
177
  * Component attributes and properties that can be applied to the element or by using JavaScript.
161
178
  *
162
- * - `cap`: Capitalize AM or PM designation
163
179
  * - `locale`: BCP 47 language tag for locale-aware date/time formatting (e.g. 'en-GB', 'de-DE', 'ja-JP').
164
180
  * - `month`: Defines format of month
165
- * - `setDate`: Pass in string to set date
166
- * - `timeZone`: Pass in string to define [timeZone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)
181
+ * - `timeZone`: Pass in string to define [timeZone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones).
182
+ * When set, the moment described by `value` is converted into this IANA zone for display.
183
+ * When unset, the wall-clock time from the input string is rendered as-is.
167
184
  * - `type`: Defines type of data to render
168
- * - `utc`: Pass in ISO 8601 UTC formatted time code
185
+ * - `value`: ISO 8601 date or date-time string. Examples:
186
+ * - `2022-07-14T08:00:00-07:00` (with offset)
187
+ * - `2022-07-14T08:00:00Z` (UTC)
188
+ * - `2022-07-14T08:00:00` (no offset)
189
+ * - `2022-07-14` (date only)
190
+ *
191
+ * When omitted, the component renders today's date.
192
+ * Invalid input is logged as a warning and renders nothing.
169
193
  * - `weekday`: Defines format of weekday
170
194
  *
171
195
  * ## Slots
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- export{A as AuroDatetime}from"./auro-datetime-HltPUs27.js";import"lit";
1
+ export{A as AuroDatetime}from"./auro-datetime-BmzswYzJ.js";import"lit";
package/dist/registered.js CHANGED
@@ -1 +1 @@
1
- import{A as r}from"./auro-datetime-HltPUs27.js";import"lit";r.register();
1
+ import{A as r}from"./auro-datetime-BmzswYzJ.js";import"lit";r.register();
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  "================================================================================"
8
8
  ],
9
9
  "name": "@aurodesignsystem-dev/auro-datetime",
10
- "version": "0.0.0-pr82.3",
10
+ "version": "0.0.0-pr82.5",
11
11
  "description": "auro-datetime HTML custom element",
12
12
  "repository": {
13
13
  "type": "git",
package/dist/auro-datetime-HltPUs27.js DELETED
@@ -1,6 +0,0 @@
1
- import{LitElement as e,html as t}from"lit";class a{registerComponent(e,t){customElements.get(e)||customElements.define(e,class extends t{})}closestElement(e,t=this,a=(t,s=t&&t.closest(e))=>t&&t!==document&&t!==window?s||a(t.getRootNode().host):null){return a(t)}handleComponentTagRename(e,t){const a=t.toLowerCase();e.tagName.toLowerCase()!==a&&e.setAttribute(a,!0)}elementMatch(e,t){const a=t.toLowerCase();return e.tagName.toLowerCase()===a||e.hasAttribute(a)}getSlotText(e,t){const a=e.shadowRoot?.querySelector(`slot[name="${t}"]`);return(a?.assignedNodes({flatten:!0})||[]).map(e=>e.textContent?.trim()).join(" ").trim()||null}}class s extends e{constructor(){super(),this._initializeDefaults()}_initializeDefaults(){this.weekday="short",this.month="short",this.locale="en-US",this.runtimeUtils=new a}connectedCallback(){super.connectedCallback(),this.dateTemplate={weekday:this.weekday,year:"numeric",month:this.month,day:"numeric"},this.timeTemplate={hour:"2-digit",minute:"2-digit",timeZone:this.timeZone},this.template={}}static get properties(){return{cap:{type:Boolean},locale:{type:String},month:{type:String},setDate:{type:String},timeZone:{type:String},type:{type:String},utc:{type:String},weekday:{type:String}}}static register(e="auro-datetime"){a.prototype.registerComponent(e,s)}willUpdate(e){if(e.has("locale")&&this.locale)try{Intl.getCanonicalLocales(this.locale)}catch{console.warn(`auro-datetime: "${this.locale}" is not a valid BCP 47 locale tag. Falling back to "en-US".`),this.locale="en-US"}}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-datetime")}humanDate(){let e=new Date;return this.utc?(this.dateTemplate.timeZone="UTC",e=new Date(this.utc)):this.setDate&&(e=new Date(this.setDate)),e.toLocaleString(this.locale,this.dateTemplate)}humanDateConversion(){let e=new Date;switch(this.utc?(this.template.timeZone="UTC",e=new Date(this.utc)):this.setDate&&(e=new Date(this.setDate)),this.type){case"day":this.template.day="numeric";break;case"month":this.template.month=this.month;break;case"year":this.template.year="numeric";break;case"weekday":this.template.weekday=this.weekday;break;default:this.template.weekday=this.template}return e.toLocaleString(this.locale,this.template)}numericDate(){this.dateTemplate.month="numeric",Reflect.deleteProperty(this.dateTemplate,"weekday");let e=new Date;return this.utc?(this.dateTemplate.timeZone="UTC",e=new Date(this.utc)):this.setDate&&(e=new Date(this.setDate)),e.toLocaleString(this.locale,this.dateTemplate)}humanTime(){let e=new Date;return this.utc?(this.timeTemplate.timeZone="UTC",e=new Date(this.utc)):this.setDate&&(e=new Date(this.setDate)),this.cap?e.toLocaleString(this.locale,this.timeTemplate).replace(/^0+/u,""):e.toLocaleString(this.locale,this.timeTemplate).replace(/^0+/u,"").toLowerCase()}tzTime(e){const t=this.setDate.slice(0,-6),a=new Date(t);return this.cap?a.toLocaleString(this.locale,e).replace(/^0+/u,""):a.toLocaleString(this.locale,e).replace(/^0+/u,"").replace("AM","am").replace("PM","pm")}whichDate(){let e="";switch(this.type){case"date":e=this.humanDate();break;case"tzDate":e=this.tzTime(this.dateTemplate);break;case"tzTime":e=this.tzTime(this.timeTemplate);break;case"time":e=this.humanTime();break;case"year":case"month":case"weekday":case"day":e=this.humanDateConversion();break;case"numeric":e=this.numericDate();break;default:this.humanDate()}return this.setDate&&!this.type||this.utc&&!this.type?this.humanDate():e}render(){return t`
2
- <slot name="pre"></slot>
3
- <span class="yield">${this.whichDate()}</span>
4
- <slot name="post"></slot>
5
- <slot></slot>
6
- `}}export{s as A};