@aurodesignsystem-dev/auro-datetime 0.0.0-pr112.1 → 0.0.0-pr112.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +7 -7
- package/demo/api.md +11 -11
- package/demo/api.min.js +7 -7
- package/demo/index.min.js +7 -7
- package/dist/auro-datetime-dJCvhV16.js +6 -0
- package/dist/index.d.ts +6 -6
- package/dist/index.js +1 -1
- package/dist/registered.js +1 -1
- package/package.json +1 -1
- package/dist/auro-datetime-CRsYbYbt.js +0 -6
package/custom-elements.json
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"declarations": [
|
|
9
9
|
{
|
|
10
10
|
"kind": "class",
|
|
11
|
-
"description": "Shows a date or time as text, formatted for a language and region you choose and, optionally, a specific time zone.\n\n**Key capabilities**\n- **What to show**: `type` picks the full date, the time, a numeric date, or a single part, such as the year or weekday.\n- **Date and time to show**: `value` takes
|
|
11
|
+
"description": "Shows a date or time as text, formatted for a language and region you choose and, optionally, a specific time zone.\n\n**Key capabilities**\n- **What to show**: `type` picks the full date, the time, a numeric date, or a single part, such as the year or weekday.\n- **Date and time to show**: `value` takes a `YYYY-MM-DD` date or a `YYYY-MM-DDTHH:MM` date-time, with optional seconds and offset; without it, the element shows the current date and time.\n- **Language formatting**: `locale` formats month names, separators, and the 12- or 24-hour clock for a language, such as `de-DE`.\n- **Time zones**: `timezone` shows the moment in a time zone, such as `America/Los_Angeles`.\n- **Name length**: `month=\"long\"` and `weekday=\"long\"` spell out the month and weekday names.\n\n**Example**\n```html\n<auro-datetime type=\"date\" value=\"2022-07-14T08:00:00\"></auro-datetime>\n```",
|
|
12
12
|
"name": "AuroDatetime",
|
|
13
13
|
"slots": [
|
|
14
14
|
{
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
}
|
|
63
63
|
}
|
|
64
64
|
],
|
|
65
|
-
"description": "Checks a BCP 47 locale tag and returns its canonical form. Empty or invalid\ninput falls back to
|
|
65
|
+
"description": "Checks a BCP 47 locale tag and returns its canonical form. Empty or invalid\ninput falls back to `en-US`. Each invalid value logs a console warning the\nfirst time this element sees it.",
|
|
66
66
|
"privacy": "private",
|
|
67
67
|
"return": {
|
|
68
68
|
"type": {
|
|
@@ -96,14 +96,14 @@
|
|
|
96
96
|
"parameters": [
|
|
97
97
|
{
|
|
98
98
|
"name": "localISO",
|
|
99
|
-
"description": "The ISO 8601 date-time with no offset, such as
|
|
99
|
+
"description": "The ISO 8601 date-time with no offset, such as `2022-07-14T08:00:00`.",
|
|
100
100
|
"type": {
|
|
101
101
|
"text": "string"
|
|
102
102
|
}
|
|
103
103
|
},
|
|
104
104
|
{
|
|
105
105
|
"name": "timeZone",
|
|
106
|
-
"description": "The IANA time zone name, such as
|
|
106
|
+
"description": "The IANA time zone name, such as `America/New_York`.",
|
|
107
107
|
"type": {
|
|
108
108
|
"text": "string"
|
|
109
109
|
}
|
|
@@ -239,7 +239,7 @@
|
|
|
239
239
|
"type": {
|
|
240
240
|
"text": "string"
|
|
241
241
|
},
|
|
242
|
-
"description": "Sets the date or time to show, as
|
|
242
|
+
"description": "Sets the date or time to show, as a `YYYY-MM-DD` date or a `YYYY-MM-DDTHH:MM` date-time, with optional seconds and fractional seconds and an optional `Z` or `±HH:MM` offset, such as `2022-07-14`, `2022-07-14T08:00:00`, or `2022-07-14T08:00:00-07:00`. Without it, the element shows the current date and time from when it last rendered; it doesn't currently update as time passes. Invalid input, including an empty value or another ISO 8601 form, such as `20220714` or a `+0700` offset, logs a console warning and shows nothing.",
|
|
243
243
|
"attribute": "value",
|
|
244
244
|
"category": "behavior"
|
|
245
245
|
},
|
|
@@ -311,7 +311,7 @@
|
|
|
311
311
|
"type": {
|
|
312
312
|
"text": "string"
|
|
313
313
|
},
|
|
314
|
-
"description": "Sets the date or time to show, as
|
|
314
|
+
"description": "Sets the date or time to show, as a `YYYY-MM-DD` date or a `YYYY-MM-DDTHH:MM` date-time, with optional seconds and fractional seconds and an optional `Z` or `±HH:MM` offset, such as `2022-07-14`, `2022-07-14T08:00:00`, or `2022-07-14T08:00:00-07:00`. Without it, the element shows the current date and time from when it last rendered; it doesn't currently update as time passes. Invalid input, including an empty value or another ISO 8601 form, such as `20220714` or a `+0700` offset, logs a console warning and shows nothing.",
|
|
315
315
|
"fieldName": "value",
|
|
316
316
|
"category": "behavior"
|
|
317
317
|
},
|
|
@@ -369,5 +369,5 @@
|
|
|
369
369
|
"exports": []
|
|
370
370
|
}
|
|
371
371
|
],
|
|
372
|
-
"package": "@aurodesignsystem-dev/auro-datetime@0.0.0-pr112.
|
|
372
|
+
"package": "@aurodesignsystem-dev/auro-datetime@0.0.0-pr112.2"
|
|
373
373
|
}
|
package/demo/api.md
CHANGED
|
@@ -7,7 +7,7 @@ Shows a date or time as text, formatted for a language and region you choose and
|
|
|
7
7
|
|
|
8
8
|
**Key capabilities**
|
|
9
9
|
- **What to show**: `type` picks the full date, the time, a numeric date, or a single part, such as the year or weekday.
|
|
10
|
-
- **Date and time to show**: `value` takes
|
|
10
|
+
- **Date and time to show**: `value` takes a `YYYY-MM-DD` date or a `YYYY-MM-DDTHH:MM` date-time, with optional seconds and offset; without it, the element shows the current date and time.
|
|
11
11
|
- **Language formatting**: `locale` formats month names, separators, and the 12- or 24-hour clock for a language, such as `de-DE`.
|
|
12
12
|
- **Time zones**: `timezone` shows the moment in a time zone, such as `America/Los_Angeles`.
|
|
13
13
|
- **Name length**: `month="long"` and `weekday="long"` spell out the month and weekday names.
|
|
@@ -17,14 +17,14 @@ Shows a date or time as text, formatted for a language and region you choose and
|
|
|
17
17
|
|
|
18
18
|
### Properties and attributes
|
|
19
19
|
|
|
20
|
-
| Properties | Attributes | Modifiers | Type | Default | Description
|
|
21
|
-
| ---------- | ---------- | --------- | ------------------------------------------------------------------------ | ------- |
|
|
22
|
-
| locale | locale | | string | `en-US` | Sets the language and region used to format the date or time, such as `en-GB`, `de-DE`, or `ja-JP` (a BCP 47 language tag). It changes month and weekday names, separators, and whether times use a 12- or 24-hour clock, but not the time zone. A malformed tag logs a console warning and falls back to `en-US`; a well-formed tag the browser doesn't support, such as `zz-ZZ`, uses the browser's default language instead, with no warning.
|
|
23
|
-
| month | month | | "short" \| "long" | `short` | Sets how the month name is written: `short`, such as "Jul", or `long`, such as "July". It applies to the full date and to `type="month"`.
|
|
24
|
-
| timezone | timezone | | string | | Sets the time zone to show the date or time in, such as `America/Los_Angeles` or `UTC` (an IANA time zone name). When `value` has an offset or `Z`, the element converts that moment into this zone; when it has none, the element reads `value` as a time already in this zone. Without it, or with an invalid name, which logs a console warning, the element shows the date and time in `value` as written, or the current date and time in the viewer's own time zone when `value` isn't set.
|
|
25
|
-
| type | type | | "date" \| "time" \| "year" \| "month" \| "weekday" \| "day" \| "numeric" | | Sets which part of the date or time to show: `date` for the full date, such as "Thu, Jul 14, 2022", `numeric` for a numeric date, such as "7/14/2022", `time` for the hour and minute, such as "8:00 am", or `year`, `month`, `weekday`, or `day` for that part alone. Without it, or with any other value, the element shows the full date.
|
|
26
|
-
| value | value | | string | | Sets the date or time to show, as
|
|
27
|
-
| weekday | weekday | | "short" \| "long" | `short` | Sets how the weekday name is written: `short`, such as "Thu", or `long`, such as "Thursday". It applies to the full date and to `type="weekday"`.
|
|
20
|
+
| Properties | Attributes | Modifiers | Type | Default | Description |
|
|
21
|
+
| ---------- | ---------- | --------- | ------------------------------------------------------------------------ | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
22
|
+
| locale | locale | | string | `en-US` | Sets the language and region used to format the date or time, such as `en-GB`, `de-DE`, or `ja-JP` (a BCP 47 language tag). It changes month and weekday names, separators, and whether times use a 12- or 24-hour clock, but not the time zone. A malformed tag logs a console warning and falls back to `en-US`; a well-formed tag the browser doesn't support, such as `zz-ZZ`, uses the browser's default language instead, with no warning. |
|
|
23
|
+
| month | month | | "short" \| "long" | `short` | Sets how the month name is written: `short`, such as "Jul", or `long`, such as "July". It applies to the full date and to `type="month"`. |
|
|
24
|
+
| timezone | timezone | | string | | Sets the time zone to show the date or time in, such as `America/Los_Angeles` or `UTC` (an IANA time zone name). When `value` has an offset or `Z`, the element converts that moment into this zone; when it has none, the element reads `value` as a time already in this zone. Without it, or with an invalid name, which logs a console warning, the element shows the date and time in `value` as written, or the current date and time in the viewer's own time zone when `value` isn't set. |
|
|
25
|
+
| type | type | | "date" \| "time" \| "year" \| "month" \| "weekday" \| "day" \| "numeric" | | Sets which part of the date or time to show: `date` for the full date, such as "Thu, Jul 14, 2022", `numeric` for a numeric date, such as "7/14/2022", `time` for the hour and minute, such as "8:00 am", or `year`, `month`, `weekday`, or `day` for that part alone. Without it, or with any other value, the element shows the full date. |
|
|
26
|
+
| value | value | | string | | Sets the date or time to show, as a `YYYY-MM-DD` date or a `YYYY-MM-DDTHH:MM` date-time, with optional seconds and fractional seconds and an optional `Z` or `±HH:MM` offset, such as `2022-07-14`, `2022-07-14T08:00:00`, or `2022-07-14T08:00:00-07:00`. Without it, the element shows the current date and time from when it last rendered; it doesn't currently update as time passes. Invalid input, including an empty value or another ISO 8601 form, such as `20220714` or a `+0700` offset, logs a console warning and shows nothing. |
|
|
27
|
+
| weekday | weekday | | "short" \| "long" | `short` | Sets how the weekday name is written: `short`, such as "Thu", or `long`, such as "Thursday". It applies to the full date and to `type="weekday"`. |
|
|
28
28
|
|
|
29
29
|
### Methods
|
|
30
30
|
|
|
@@ -106,14 +106,14 @@ Use `type` to choose what to show: `date` for the full date, `numeric` for a sho
|
|
|
106
106
|
|
|
107
107
|
### Value
|
|
108
108
|
|
|
109
|
-
Use `value` to set the date or time to show, as
|
|
109
|
+
Use `value` to set the date or time to show, as a `YYYY-MM-DD` date or a `YYYY-MM-DDTHH:MM` date-time, with optional seconds and fractional seconds and an optional `Z` or `±HH:MM` offset. It replaces the `setDate` and `utc` attributes from earlier versions. It accepts forms such as these:
|
|
110
110
|
|
|
111
111
|
- `2022-07-14T08:00:00-07:00`: a date and time with an offset.
|
|
112
112
|
- `2022-07-14T08:00:00Z`: a date and time in UTC.
|
|
113
113
|
- `2022-07-14T08:00:00`: a date and time with no offset.
|
|
114
114
|
- `2022-07-14`: a date only.
|
|
115
115
|
|
|
116
|
-
Without `timezone`, the element shows the date and time as written in `value`, ignoring any offset or `Z`. Invalid input, including an empty value, logs a console warning and shows nothing.
|
|
116
|
+
Without `timezone`, the element shows the date and time as written in `value`, ignoring any offset or `Z`. Invalid input, including an empty value or another ISO 8601 form, such as `20220714` or a `+0700` offset, logs a console warning and shows nothing.
|
|
117
117
|
|
|
118
118
|
<div class="exampleWrapper">
|
|
119
119
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/set-date.html) -->
|
package/demo/api.min.js
CHANGED
|
@@ -119,7 +119,7 @@ const ISO_8601_REGEX =
|
|
|
119
119
|
*
|
|
120
120
|
* **Key capabilities**
|
|
121
121
|
* - **What to show**: `type` picks the full date, the time, a numeric date, or a single part, such as the year or weekday.
|
|
122
|
-
* - **Date and time to show**: `value` takes
|
|
122
|
+
* - **Date and time to show**: `value` takes a `YYYY-MM-DD` date or a `YYYY-MM-DDTHH:MM` date-time, with optional seconds and offset; without it, the element shows the current date and time.
|
|
123
123
|
* - **Language formatting**: `locale` formats month names, separators, and the 12- or 24-hour clock for a language, such as `de-DE`.
|
|
124
124
|
* - **Time zones**: `timezone` shows the moment in a time zone, such as `America/Los_Angeles`.
|
|
125
125
|
* - **Name length**: `month="long"` and `weekday="long"` spell out the month and weekday names.
|
|
@@ -193,12 +193,12 @@ class AuroDatetime extends i {
|
|
|
193
193
|
|
|
194
194
|
/**
|
|
195
195
|
* Checks a BCP 47 locale tag and returns its canonical form. Empty or invalid
|
|
196
|
-
* input falls back to
|
|
196
|
+
* input falls back to `en-US`. Each invalid value logs a console warning the
|
|
197
197
|
* first time this element sees it.
|
|
198
198
|
*
|
|
199
199
|
* @private
|
|
200
200
|
* @param {string} input - The locale tag set on the element.
|
|
201
|
-
* @returns {string} The canonical locale tag, such as
|
|
201
|
+
* @returns {string} The canonical locale tag, such as `en-GB`, or `en-US` for empty or invalid input.
|
|
202
202
|
*/
|
|
203
203
|
_resolveLocale(input) {
|
|
204
204
|
if (!input) {
|
|
@@ -210,7 +210,7 @@ class AuroDatetime extends i {
|
|
|
210
210
|
if (this._warnedLocales && !this._warnedLocales.has(input)) {
|
|
211
211
|
this._warnedLocales.add(input);
|
|
212
212
|
console.warn(
|
|
213
|
-
`auro-datetime: "${input}" is not a valid BCP 47 locale tag. Falling back to
|
|
213
|
+
`auro-datetime: "${input}" is not a valid BCP 47 locale tag. Falling back to \`en-US\`.`,
|
|
214
214
|
);
|
|
215
215
|
}
|
|
216
216
|
return "en-US";
|
|
@@ -281,7 +281,7 @@ class AuroDatetime extends i {
|
|
|
281
281
|
type: { type: String },
|
|
282
282
|
|
|
283
283
|
/**
|
|
284
|
-
* Sets the date or time to show, as
|
|
284
|
+
* Sets the date or time to show, as a `YYYY-MM-DD` date or a `YYYY-MM-DDTHH:MM` date-time, with optional seconds and fractional seconds and an optional `Z` or `±HH:MM` offset, such as `2022-07-14`, `2022-07-14T08:00:00`, or `2022-07-14T08:00:00-07:00`. Without it, the element shows the current date and time from when it last rendered; it doesn't currently update as time passes. Invalid input, including an empty value or another ISO 8601 form, such as `20220714` or a `+0700` offset, logs a console warning and shows nothing.
|
|
285
285
|
* @type {string}
|
|
286
286
|
* @category behavior
|
|
287
287
|
*/
|
|
@@ -334,8 +334,8 @@ class AuroDatetime extends i {
|
|
|
334
334
|
* the two to find the real moment.
|
|
335
335
|
*
|
|
336
336
|
* @private
|
|
337
|
-
* @param {string} localISO - The ISO 8601 date-time with no offset, such as
|
|
338
|
-
* @param {string} timeZone - The IANA time zone name, such as
|
|
337
|
+
* @param {string} localISO - The ISO 8601 date-time with no offset, such as `2022-07-14T08:00:00`.
|
|
338
|
+
* @param {string} timeZone - The IANA time zone name, such as `America/New_York`.
|
|
339
339
|
* @returns {Date} The moment that reads as `localISO` in `timeZone`.
|
|
340
340
|
*/
|
|
341
341
|
_zonedWallClockToUtc(localISO, timeZone) {
|
package/demo/index.min.js
CHANGED
|
@@ -119,7 +119,7 @@ const ISO_8601_REGEX =
|
|
|
119
119
|
*
|
|
120
120
|
* **Key capabilities**
|
|
121
121
|
* - **What to show**: `type` picks the full date, the time, a numeric date, or a single part, such as the year or weekday.
|
|
122
|
-
* - **Date and time to show**: `value` takes
|
|
122
|
+
* - **Date and time to show**: `value` takes a `YYYY-MM-DD` date or a `YYYY-MM-DDTHH:MM` date-time, with optional seconds and offset; without it, the element shows the current date and time.
|
|
123
123
|
* - **Language formatting**: `locale` formats month names, separators, and the 12- or 24-hour clock for a language, such as `de-DE`.
|
|
124
124
|
* - **Time zones**: `timezone` shows the moment in a time zone, such as `America/Los_Angeles`.
|
|
125
125
|
* - **Name length**: `month="long"` and `weekday="long"` spell out the month and weekday names.
|
|
@@ -193,12 +193,12 @@ class AuroDatetime extends i {
|
|
|
193
193
|
|
|
194
194
|
/**
|
|
195
195
|
* Checks a BCP 47 locale tag and returns its canonical form. Empty or invalid
|
|
196
|
-
* input falls back to
|
|
196
|
+
* input falls back to `en-US`. Each invalid value logs a console warning the
|
|
197
197
|
* first time this element sees it.
|
|
198
198
|
*
|
|
199
199
|
* @private
|
|
200
200
|
* @param {string} input - The locale tag set on the element.
|
|
201
|
-
* @returns {string} The canonical locale tag, such as
|
|
201
|
+
* @returns {string} The canonical locale tag, such as `en-GB`, or `en-US` for empty or invalid input.
|
|
202
202
|
*/
|
|
203
203
|
_resolveLocale(input) {
|
|
204
204
|
if (!input) {
|
|
@@ -210,7 +210,7 @@ class AuroDatetime extends i {
|
|
|
210
210
|
if (this._warnedLocales && !this._warnedLocales.has(input)) {
|
|
211
211
|
this._warnedLocales.add(input);
|
|
212
212
|
console.warn(
|
|
213
|
-
`auro-datetime: "${input}" is not a valid BCP 47 locale tag. Falling back to
|
|
213
|
+
`auro-datetime: "${input}" is not a valid BCP 47 locale tag. Falling back to \`en-US\`.`,
|
|
214
214
|
);
|
|
215
215
|
}
|
|
216
216
|
return "en-US";
|
|
@@ -281,7 +281,7 @@ class AuroDatetime extends i {
|
|
|
281
281
|
type: { type: String },
|
|
282
282
|
|
|
283
283
|
/**
|
|
284
|
-
* Sets the date or time to show, as
|
|
284
|
+
* Sets the date or time to show, as a `YYYY-MM-DD` date or a `YYYY-MM-DDTHH:MM` date-time, with optional seconds and fractional seconds and an optional `Z` or `±HH:MM` offset, such as `2022-07-14`, `2022-07-14T08:00:00`, or `2022-07-14T08:00:00-07:00`. Without it, the element shows the current date and time from when it last rendered; it doesn't currently update as time passes. Invalid input, including an empty value or another ISO 8601 form, such as `20220714` or a `+0700` offset, logs a console warning and shows nothing.
|
|
285
285
|
* @type {string}
|
|
286
286
|
* @category behavior
|
|
287
287
|
*/
|
|
@@ -334,8 +334,8 @@ class AuroDatetime extends i {
|
|
|
334
334
|
* the two to find the real moment.
|
|
335
335
|
*
|
|
336
336
|
* @private
|
|
337
|
-
* @param {string} localISO - The ISO 8601 date-time with no offset, such as
|
|
338
|
-
* @param {string} timeZone - The IANA time zone name, such as
|
|
337
|
+
* @param {string} localISO - The ISO 8601 date-time with no offset, such as `2022-07-14T08:00:00`.
|
|
338
|
+
* @param {string} timeZone - The IANA time zone name, such as `America/New_York`.
|
|
339
339
|
* @returns {Date} The moment that reads as `localISO` in `timeZone`.
|
|
340
340
|
*/
|
|
341
341
|
_zonedWallClockToUtc(localISO, timeZone) {
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import{LitElement as e,html as t}from"lit";class i{registerComponent(e,t){customElements.get(e)||customElements.define(e,class extends t{})}closestElement(e,t=this,i=(t,n=t&&t.closest(e))=>t&&t!==document&&t!==window?n||i(t.getRootNode().host):null){return i(t)}handleComponentTagRename(e,t){const i=t.toLowerCase();e.tagName.toLowerCase()!==i&&e.setAttribute(i,!0)}elementMatch(e,t){const i=t.toLowerCase();return e.tagName.toLowerCase()===i||e.hasAttribute(i)}getSlotText(e,t){const i=e.shadowRoot?.querySelector(`slot[name="${t}"]`);return(i?.assignedNodes({flatten:!0})||[]).map(e=>e.textContent?.trim()).join(" ").trim()||null}}const n=/^(\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._warnedTimeZones=new Set,this._warnedValues=new Set,this._effectiveLocale=this._resolveLocale(this.locale),this._effectiveTimeZone=this._resolveTimeZone(this.timezone),this.runtimeUtils=new i}_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"}}_resolveTimeZone(e){if(e)try{return new Intl.DateTimeFormat(void 0,{timeZone:e}),e}catch{return void(this._warnedTimeZones&&!this._warnedTimeZones.has(e)&&(this._warnedTimeZones.add(e),console.warn(`auro-datetime: "${e}" is not a valid IANA timezone. Ignoring it.`)))}}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"){i.prototype.registerComponent(e,a)}willUpdate(e){e.has("locale")&&(this._effectiveLocale=this._resolveLocale(this.locale)),e.has("timezone")&&(this._effectiveTimeZone=this._resolveTimeZone(this.timezone))}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-datetime")}_zonedWallClockToUtc(e,t){const i=new Date(`${e}Z`),n=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(i),a=Object.fromEntries(n.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=i.getTime()-o.getTime();return new Date(i.getTime()+s)}_resolveInputDate(){const e=this._effectiveTimeZone;if(null==this.value)return{date:new Date,timeZoneOption:e};const t=this.value.match(n);if(!t)return this._warnedValues.has(this.value)||(this._warnedValues.add(this.value),console.warn(`auro-datetime: "${this.value}" is not a valid ISO 8601 string.`)),{date:null,timeZoneOption:void 0};const i=t[1],a=Boolean(t[2]);if(a&&!i.includes("T"))return this._warnedValues.has(this.value)||(this._warnedValues.add(this.value),console.warn(`auro-datetime: "${this.value}" is not a valid ISO 8601 string (offset/Z requires a time component).`)),{date:null,timeZoneOption:void 0};const o=i.includes("T")?i:`${i}T00:00:00`,s=(()=>e&&!a?this._zonedWallClockToUtc(o,e):e&&a?new Date(this.value):new Date(o))();return Number.isNaN(s.getTime())?(this._warnedValues.has(this.value)||(this._warnedValues.add(this.value),console.warn(`auro-datetime: "${this.value}" is not a valid ISO 8601 date.`)),{date:null,timeZoneOption:void 0}):{date:s,timeZoneOption:e}}humanDate(){const{date:e,timeZoneOption:t}=this._resolveInputDate();if(!e)return"";const i={weekday:this.weekday||"short",year:"numeric",month:this.month||"short",day:"numeric"};return t&&(i.timeZone=t),e.toLocaleString(this._effectiveLocale,i)}humanDateConversion(){const{date:e,timeZoneOption:t}=this._resolveInputDate();if(!e)return"";const i={};switch(t&&(i.timeZone=t),this.type){case"day":i.day="numeric";break;case"month":i.month=this.month||"short";break;case"year":i.year="numeric";break;case"weekday":i.weekday=this.weekday||"short"}return e.toLocaleString(this._effectiveLocale,i)}numericDate(){const{date:e,timeZoneOption:t}=this._resolveInputDate();if(!e)return"";const i={year:"numeric",month:"numeric",day:"numeric"};return t&&(i.timeZone=t),e.toLocaleString(this._effectiveLocale,i)}humanTime(){const{date:e,timeZoneOption:t}=this._resolveInputDate();if(!e)return"";const i={hour:"2-digit",minute:"2-digit"};t&&(i.timeZone=t);const n=e.toLocaleString(this._effectiveLocale,i);return/[ap]\.?m\.?/iu.test(n)?n.replace(/^0+/u,"").toLowerCase():n}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
|
@@ -85,7 +85,7 @@ export type AuroDatetimeProps = {
|
|
|
85
85
|
timezone?: AuroDatetime["timezone"];
|
|
86
86
|
/** Sets which part of the date or time to show: `date` for the full date, such as "Thu, Jul 14, 2022", `numeric` for a numeric date, such as "7/14/2022", `time` for the hour and minute, such as "8:00 am", or `year`, `month`, `weekday`, or `day` for that part alone. Without it, or with any other value, the element shows the full date. */
|
|
87
87
|
type?: AuroDatetime["type"];
|
|
88
|
-
/** Sets the date or time to show, as
|
|
88
|
+
/** Sets the date or time to show, as a `YYYY-MM-DD` date or a `YYYY-MM-DDTHH:MM` date-time, with optional seconds and fractional seconds and an optional `Z` or `±HH:MM` offset, such as `2022-07-14`, `2022-07-14T08:00:00`, or `2022-07-14T08:00:00-07:00`. Without it, the element shows the current date and time from when it last rendered; it doesn't currently update as time passes. Invalid input, including an empty value or another ISO 8601 form, such as `20220714` or a `+0700` offset, logs a console warning and shows nothing. */
|
|
89
89
|
value?: AuroDatetime["value"];
|
|
90
90
|
/** Sets how the weekday name is written: `short`, such as "Thu", or `long`, such as "Thursday". It applies to the full date and to `type="weekday"`. */
|
|
91
91
|
weekday?: AuroDatetime["weekday"];
|
|
@@ -100,7 +100,7 @@ export type AuroDatetimeSolidJsProps = {
|
|
|
100
100
|
"prop:timezone"?: AuroDatetime["timezone"];
|
|
101
101
|
/** Sets which part of the date or time to show: `date` for the full date, such as "Thu, Jul 14, 2022", `numeric` for a numeric date, such as "7/14/2022", `time` for the hour and minute, such as "8:00 am", or `year`, `month`, `weekday`, or `day` for that part alone. Without it, or with any other value, the element shows the full date. */
|
|
102
102
|
"prop:type"?: AuroDatetime["type"];
|
|
103
|
-
/** Sets the date or time to show, as
|
|
103
|
+
/** Sets the date or time to show, as a `YYYY-MM-DD` date or a `YYYY-MM-DDTHH:MM` date-time, with optional seconds and fractional seconds and an optional `Z` or `±HH:MM` offset, such as `2022-07-14`, `2022-07-14T08:00:00`, or `2022-07-14T08:00:00-07:00`. Without it, the element shows the current date and time from when it last rendered; it doesn't currently update as time passes. Invalid input, including an empty value or another ISO 8601 form, such as `20220714` or a `+0700` offset, logs a console warning and shows nothing. */
|
|
104
104
|
"prop:value"?: AuroDatetime["value"];
|
|
105
105
|
/** Sets how the weekday name is written: `short`, such as "Thu", or `long`, such as "Thursday". It applies to the full date and to `type="weekday"`. */
|
|
106
106
|
"prop:weekday"?: AuroDatetime["weekday"];
|
|
@@ -117,7 +117,7 @@ export type CustomElements = {
|
|
|
117
117
|
*
|
|
118
118
|
* **Key capabilities**
|
|
119
119
|
* - **What to show**: `type` picks the full date, the time, a numeric date, or a single part, such as the year or weekday.
|
|
120
|
-
* - **Date and time to show**: `value` takes
|
|
120
|
+
* - **Date and time to show**: `value` takes a `YYYY-MM-DD` date or a `YYYY-MM-DDTHH:MM` date-time, with optional seconds and offset; without it, the element shows the current date and time.
|
|
121
121
|
* - **Language formatting**: `locale` formats month names, separators, and the 12- or 24-hour clock for a language, such as `de-DE`.
|
|
122
122
|
* - **Time zones**: `timezone` shows the moment in a time zone, such as `America/Los_Angeles`.
|
|
123
123
|
* - **Name length**: `month="long"` and `weekday="long"` spell out the month and weekday names.
|
|
@@ -135,7 +135,7 @@ export type CustomElements = {
|
|
|
135
135
|
* - `month`: Sets how the month name is written: `short`, such as "Jul", or `long`, such as "July". It applies to the full date and to `type="month"`.
|
|
136
136
|
* - `timezone`: Sets the time zone to show the date or time in, such as `America/Los_Angeles` or `UTC` (an IANA time zone name). When `value` has an offset or `Z`, the element converts that moment into this zone; when it has none, the element reads `value` as a time already in this zone. Without it, or with an invalid name, which logs a console warning, the element shows the date and time in `value` as written, or the current date and time in the viewer's own time zone when `value` isn't set.
|
|
137
137
|
* - `type`: Sets which part of the date or time to show: `date` for the full date, such as "Thu, Jul 14, 2022", `numeric` for a numeric date, such as "7/14/2022", `time` for the hour and minute, such as "8:00 am", or `year`, `month`, `weekday`, or `day` for that part alone. Without it, or with any other value, the element shows the full date.
|
|
138
|
-
* - `value`: Sets the date or time to show, as
|
|
138
|
+
* - `value`: Sets the date or time to show, as a `YYYY-MM-DD` date or a `YYYY-MM-DDTHH:MM` date-time, with optional seconds and fractional seconds and an optional `Z` or `±HH:MM` offset, such as `2022-07-14`, `2022-07-14T08:00:00`, or `2022-07-14T08:00:00-07:00`. Without it, the element shows the current date and time from when it last rendered; it doesn't currently update as time passes. Invalid input, including an empty value or another ISO 8601 form, such as `20220714` or a `+0700` offset, logs a console warning and shows nothing.
|
|
139
139
|
* - `weekday`: Sets how the weekday name is written: `short`, such as "Thu", or `long`, such as "Thursday". It applies to the full date and to `type="weekday"`.
|
|
140
140
|
*
|
|
141
141
|
* ## Slots
|
|
@@ -163,7 +163,7 @@ export type CustomElementsSolidJs = {
|
|
|
163
163
|
*
|
|
164
164
|
* **Key capabilities**
|
|
165
165
|
* - **What to show**: `type` picks the full date, the time, a numeric date, or a single part, such as the year or weekday.
|
|
166
|
-
* - **Date and time to show**: `value` takes
|
|
166
|
+
* - **Date and time to show**: `value` takes a `YYYY-MM-DD` date or a `YYYY-MM-DDTHH:MM` date-time, with optional seconds and offset; without it, the element shows the current date and time.
|
|
167
167
|
* - **Language formatting**: `locale` formats month names, separators, and the 12- or 24-hour clock for a language, such as `de-DE`.
|
|
168
168
|
* - **Time zones**: `timezone` shows the moment in a time zone, such as `America/Los_Angeles`.
|
|
169
169
|
* - **Name length**: `month="long"` and `weekday="long"` spell out the month and weekday names.
|
|
@@ -181,7 +181,7 @@ export type CustomElementsSolidJs = {
|
|
|
181
181
|
* - `month`: Sets how the month name is written: `short`, such as "Jul", or `long`, such as "July". It applies to the full date and to `type="month"`.
|
|
182
182
|
* - `timezone`: Sets the time zone to show the date or time in, such as `America/Los_Angeles` or `UTC` (an IANA time zone name). When `value` has an offset or `Z`, the element converts that moment into this zone; when it has none, the element reads `value` as a time already in this zone. Without it, or with an invalid name, which logs a console warning, the element shows the date and time in `value` as written, or the current date and time in the viewer's own time zone when `value` isn't set.
|
|
183
183
|
* - `type`: Sets which part of the date or time to show: `date` for the full date, such as "Thu, Jul 14, 2022", `numeric` for a numeric date, such as "7/14/2022", `time` for the hour and minute, such as "8:00 am", or `year`, `month`, `weekday`, or `day` for that part alone. Without it, or with any other value, the element shows the full date.
|
|
184
|
-
* - `value`: Sets the date or time to show, as
|
|
184
|
+
* - `value`: Sets the date or time to show, as a `YYYY-MM-DD` date or a `YYYY-MM-DDTHH:MM` date-time, with optional seconds and fractional seconds and an optional `Z` or `±HH:MM` offset, such as `2022-07-14`, `2022-07-14T08:00:00`, or `2022-07-14T08:00:00-07:00`. Without it, the element shows the current date and time from when it last rendered; it doesn't currently update as time passes. Invalid input, including an empty value or another ISO 8601 form, such as `20220714` or a `+0700` offset, logs a console warning and shows nothing.
|
|
185
185
|
* - `weekday`: Sets how the weekday name is written: `short`, such as "Thu", or `long`, such as "Thursday". It applies to the full date and to `type="weekday"`.
|
|
186
186
|
*
|
|
187
187
|
* ## Slots
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{A as AuroDatetime}from"./auro-datetime-
|
|
1
|
+
export{A as AuroDatetime}from"./auro-datetime-dJCvhV16.js";import"lit";
|
package/dist/registered.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{A as r}from"./auro-datetime-
|
|
1
|
+
import{A as r}from"./auro-datetime-dJCvhV16.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-pr112.
|
|
10
|
+
"version": "0.0.0-pr112.2",
|
|
11
11
|
"description": "auro-datetime HTML custom element",
|
|
12
12
|
"repository": {
|
|
13
13
|
"type": "git",
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import{LitElement as e,html as t}from"lit";class i{registerComponent(e,t){customElements.get(e)||customElements.define(e,class extends t{})}closestElement(e,t=this,i=(t,n=t&&t.closest(e))=>t&&t!==document&&t!==window?n||i(t.getRootNode().host):null){return i(t)}handleComponentTagRename(e,t){const i=t.toLowerCase();e.tagName.toLowerCase()!==i&&e.setAttribute(i,!0)}elementMatch(e,t){const i=t.toLowerCase();return e.tagName.toLowerCase()===i||e.hasAttribute(i)}getSlotText(e,t){const i=e.shadowRoot?.querySelector(`slot[name="${t}"]`);return(i?.assignedNodes({flatten:!0})||[]).map(e=>e.textContent?.trim()).join(" ").trim()||null}}const n=/^(\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._warnedTimeZones=new Set,this._warnedValues=new Set,this._effectiveLocale=this._resolveLocale(this.locale),this._effectiveTimeZone=this._resolveTimeZone(this.timezone),this.runtimeUtils=new i}_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"}}_resolveTimeZone(e){if(e)try{return new Intl.DateTimeFormat(void 0,{timeZone:e}),e}catch{return void(this._warnedTimeZones&&!this._warnedTimeZones.has(e)&&(this._warnedTimeZones.add(e),console.warn(`auro-datetime: "${e}" is not a valid IANA timezone. Ignoring it.`)))}}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"){i.prototype.registerComponent(e,a)}willUpdate(e){e.has("locale")&&(this._effectiveLocale=this._resolveLocale(this.locale)),e.has("timezone")&&(this._effectiveTimeZone=this._resolveTimeZone(this.timezone))}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-datetime")}_zonedWallClockToUtc(e,t){const i=new Date(`${e}Z`),n=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(i),a=Object.fromEntries(n.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=i.getTime()-o.getTime();return new Date(i.getTime()+s)}_resolveInputDate(){const e=this._effectiveTimeZone;if(null==this.value)return{date:new Date,timeZoneOption:e};const t=this.value.match(n);if(!t)return this._warnedValues.has(this.value)||(this._warnedValues.add(this.value),console.warn(`auro-datetime: "${this.value}" is not a valid ISO 8601 string.`)),{date:null,timeZoneOption:void 0};const i=t[1],a=Boolean(t[2]);if(a&&!i.includes("T"))return this._warnedValues.has(this.value)||(this._warnedValues.add(this.value),console.warn(`auro-datetime: "${this.value}" is not a valid ISO 8601 string (offset/Z requires a time component).`)),{date:null,timeZoneOption:void 0};const o=i.includes("T")?i:`${i}T00:00:00`,s=(()=>e&&!a?this._zonedWallClockToUtc(o,e):e&&a?new Date(this.value):new Date(o))();return Number.isNaN(s.getTime())?(this._warnedValues.has(this.value)||(this._warnedValues.add(this.value),console.warn(`auro-datetime: "${this.value}" is not a valid ISO 8601 date.`)),{date:null,timeZoneOption:void 0}):{date:s,timeZoneOption:e}}humanDate(){const{date:e,timeZoneOption:t}=this._resolveInputDate();if(!e)return"";const i={weekday:this.weekday||"short",year:"numeric",month:this.month||"short",day:"numeric"};return t&&(i.timeZone=t),e.toLocaleString(this._effectiveLocale,i)}humanDateConversion(){const{date:e,timeZoneOption:t}=this._resolveInputDate();if(!e)return"";const i={};switch(t&&(i.timeZone=t),this.type){case"day":i.day="numeric";break;case"month":i.month=this.month||"short";break;case"year":i.year="numeric";break;case"weekday":i.weekday=this.weekday||"short"}return e.toLocaleString(this._effectiveLocale,i)}numericDate(){const{date:e,timeZoneOption:t}=this._resolveInputDate();if(!e)return"";const i={year:"numeric",month:"numeric",day:"numeric"};return t&&(i.timeZone=t),e.toLocaleString(this._effectiveLocale,i)}humanTime(){const{date:e,timeZoneOption:t}=this._resolveInputDate();if(!e)return"";const i={hour:"2-digit",minute:"2-digit"};t&&(i.timeZone=t);const n=e.toLocaleString(this._effectiveLocale,i);return/[ap]\.?m\.?/iu.test(n)?n.replace(/^0+/u,"").toLowerCase():n}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};
|