@aurodesignsystem-dev/auro-datetime 0.0.0-pr82.4 → 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 +206 -130
  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-BwaHVIh8.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
@@ -226,16 +263,7 @@ class AuroDatetime extends i {
226
263
 
227
264
  willUpdate(changedProperties) {
228
265
  if (changedProperties.has("locale")) {
229
- if (!this.locale) {
230
- this.locale = "en-US";
231
- } else {
232
- try {
233
- Intl.getCanonicalLocales(this.locale);
234
- } catch {
235
- console.warn(`auro-datetime: "${this.locale}" is not a valid BCP 47 locale tag. Falling back to "en-US".`);
236
- this.locale = "en-US";
237
- }
238
- }
266
+ this._effectiveLocale = this._resolveLocale(this.locale);
239
267
  }
240
268
  }
241
269
 
@@ -245,170 +273,218 @@ class AuroDatetime extends i {
245
273
  }
246
274
 
247
275
  /**
248
- * 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
+ *
249
285
  * @private
250
- * @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}
251
289
  */
252
- humanDate() {
253
- 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
+ }
254
342
 
255
- if (this.utc) {
256
- this.dateTemplate.timeZone = "UTC";
257
- newDate = new Date(this.utc);
258
- } else if (this.setDate) {
259
- 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
+ };
260
360
  }
261
361
 
262
- 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 };
263
366
  }
264
367
 
265
368
  /**
266
- * Internal function to determine new Date object based on input type.
369
+ * Internal function to generate full date string.
267
370
  * @private
268
371
  * @returns {string} - Date string.
269
372
  */
270
- humanDateConversion() {
271
- 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
+ }
272
384
 
273
- if (this.utc) {
274
- this.template.timeZone = "UTC";
275
- newDate = new Date(this.utc);
276
- } else if (this.setDate) {
277
- 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;
278
398
  }
279
399
 
280
400
  switch (this.type) {
281
401
  case "day":
282
- this.template.day = "numeric";
402
+ template.day = "numeric";
283
403
  break;
284
404
  case "month":
285
- this.template.month = this.month;
405
+ template.month = this.month;
286
406
  break;
287
407
  case "year":
288
- this.template.year = "numeric";
408
+ template.year = "numeric";
289
409
  break;
290
410
  case "weekday":
291
- this.template.weekday = this.weekday;
411
+ template.weekday = this.weekday;
292
412
  break;
293
-
294
- default:
295
- this.template.weekday = this.template;
296
413
  }
297
414
 
298
- return newDate.toLocaleString(this.locale, this.template);
415
+ return date.toLocaleString(this._effectiveLocale, template);
299
416
  }
300
417
 
301
418
  /**
302
- * Internal function generate numeric date string 00/00/0000.
419
+ * Internal function to generate numeric date string MM/DD/YYYY.
303
420
  * @private
304
421
  * @returns {string} - Date string.
305
422
  */
306
423
  numericDate() {
307
- this.dateTemplate.month = "numeric";
308
- Reflect.deleteProperty(this.dateTemplate, "weekday");
309
- let newDate = new Date();
310
-
311
- if (this.utc) {
312
- this.dateTemplate.timeZone = "UTC";
313
- newDate = new Date(this.utc);
314
- } else if (this.setDate) {
315
- newDate = new Date(this.setDate);
424
+ const { date, timeZoneOption } = this._resolveInputDate();
425
+ if (!date) {
426
+ return "";
316
427
  }
317
-
318
- 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);
319
434
  }
320
435
 
321
436
  /**
322
- * Internal function generate standard time string.
437
+ * Internal function to generate standard time string.
323
438
  * @private
324
439
  * @returns {string} - Time string.
325
440
  */
326
441
  humanTime() {
327
- let newTime = new Date();
328
-
329
- if (this.utc) {
330
- this.timeTemplate.timeZone = "UTC";
331
- newTime = new Date(this.utc);
332
- } else if (this.setDate) {
333
- newTime = new Date(this.setDate);
442
+ const { date, timeZoneOption } = this._resolveInputDate();
443
+ if (!date) {
444
+ return "";
334
445
  }
335
-
336
- if (this.cap) {
337
- return newTime
338
- .toLocaleString(this.locale, this.timeTemplate)
339
- .replace(/^0+/u, "");
446
+ const template = { ...this.timeTemplate };
447
+ if (timeZoneOption) {
448
+ template.timeZone = timeZoneOption;
340
449
  }
341
450
 
342
- return newTime
343
- .toLocaleString(this.locale, this.timeTemplate)
344
- .replace(/^0+/u, "")
345
- .toLowerCase();
346
- }
347
-
348
- /**
349
- * Internal function to generate proper time zone local.
350
- * @private
351
- * @returns {string} - Date/Time zone string.
352
- * @param {string} template - Determines which template model to use.
353
- */
354
- tzTime(template) {
355
- const scrubNumber = -6;
356
- const scrubTimeZone = this.setDate.slice(0, scrubNumber);
357
- const newDateTime = new Date(scrubTimeZone);
358
-
359
- if (this.cap) {
360
- 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;
361
462
  }
362
463
 
363
- return newDateTime
364
- .toLocaleString(this.locale, template)
365
- .replace(/^0+/u, "")
366
- .replace("AM", "am")
367
- .replace("PM", "pm");
464
+ return formatted.replace(/^0+/u, "").toLowerCase();
368
465
  }
369
-
466
+
370
467
  /**
371
468
  * Internal function UI decision.
372
469
  * @private
373
- * @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).
374
471
  */
375
472
  whichDate() {
376
- let result = "";
377
-
378
473
  switch (this.type) {
379
474
  case "date":
380
- result = this.humanDate();
381
- break;
382
- case "tzDate":
383
- result = this.tzTime(this.dateTemplate);
384
- break;
385
- case "tzTime":
386
- result = this.tzTime(this.timeTemplate);
387
- break;
475
+ return this.humanDate();
388
476
  case "time":
389
- result = this.humanTime();
390
- break;
477
+ return this.humanTime();
391
478
  case "year":
392
479
  case "month":
393
480
  case "weekday":
394
481
  case "day":
395
- result = this.humanDateConversion();
396
- break;
482
+ return this.humanDateConversion();
397
483
  case "numeric":
398
- result = this.numericDate();
399
- break;
484
+ return this.numericDate();
400
485
  default:
401
- this.humanDate();
402
- }
403
-
404
- if (this.setDate && !this.type) {
405
- return this.humanDate();
486
+ return this.humanDate();
406
487
  }
407
- if (this.utc && !this.type) {
408
- return this.humanDate();
409
- }
410
-
411
- return result;
412
488
  }
413
489
 
414
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-BwaHVIh8.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-BwaHVIh8.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.4",
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-BwaHVIh8.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"))if(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"}else 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};