@aurodesignsystem-dev/auro-datetime 0.0.0-pr62.0 → 0.0.0-pr64.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +41 -53
- package/demo/api.html +2 -2
- package/demo/api.md +124 -146
- package/demo/auro-datetime.min.js +57 -18
- package/demo/index.html +1 -1
- package/demo/index.md +24 -57
- package/dist/auro-datetime-jIlTbbhr.js +6 -0
- package/dist/index.d.ts +195 -8
- package/dist/index.js +1 -1
- package/dist/registered.js +1 -1
- package/package.json +17 -9
- package/dist/auro-datetime-CpzZl80P.js +0 -6
package/README.md
CHANGED
|
@@ -28,17 +28,19 @@ The `<auro-datetime>` custom element makes it really easy to add dates to your w
|
|
|
28
28
|
<!-- AURO-GENERATED-CONTENT This file is to be used for any additional content that should be included in the README.md which is specific to this component. -->
|
|
29
29
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
30
30
|
|
|
31
|
-
##
|
|
31
|
+
## Use Cases
|
|
32
32
|
|
|
33
|
-
<!-- AURO-GENERATED-CONTENT:START (
|
|
34
|
-
|
|
33
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
|
|
34
|
+
<!-- The below content is automatically added from ./docs/partials/useCases.md -->
|
|
35
|
+
The `<auro-datetime>` element should be used in situations where users may:
|
|
35
36
|
|
|
37
|
+
* A date and/or time is required
|
|
36
38
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
37
39
|
|
|
38
40
|
## Install
|
|
39
41
|
|
|
40
42
|
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentInstall.md) -->
|
|
41
|
-
[](https://github.com/AlaskaAirlines/auro-datetime/actions/workflows/release.yml)
|
|
42
44
|
[](https://www.npmjs.com/package/@aurodesignsystem/auro-datetime)
|
|
43
45
|
[](https://www.apache.org/licenses/LICENSE-2.0)
|
|
44
46
|
|
|
@@ -49,17 +51,10 @@ $ npm i @aurodesignsystem/auro-datetime
|
|
|
49
51
|
|
|
50
52
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
51
53
|
|
|
52
|
-
###
|
|
53
|
-
|
|
54
|
-
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/designTokens.md) -->
|
|
55
|
-
The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
|
|
56
|
-
|
|
57
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
58
|
-
|
|
59
|
-
### Define dependency in project component
|
|
54
|
+
### Define Dependency in Project
|
|
60
55
|
|
|
61
56
|
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImportDescription.md) -->
|
|
62
|
-
Defining the
|
|
57
|
+
Defining the dependency within each project that is using the `<auro-datetime>` component.
|
|
63
58
|
|
|
64
59
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
65
60
|
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImport.md) -->
|
|
@@ -68,17 +63,9 @@ Defining the component dependency within each component that is using the `<auro
|
|
|
68
63
|
import "@aurodesignsystem/auro-datetime";
|
|
69
64
|
```
|
|
70
65
|
|
|
71
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
72
|
-
**Reference component in HTML**
|
|
73
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
|
|
74
|
-
<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
|
|
75
|
-
|
|
76
|
-
```html
|
|
77
|
-
<auro-datetime type="date"></auro-datetime>
|
|
78
|
-
```
|
|
79
66
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
80
67
|
|
|
81
|
-
|
|
68
|
+
### Use CDN
|
|
82
69
|
|
|
83
70
|
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/bundleInstallDescription.md) -->
|
|
84
71
|
In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
|
|
@@ -89,18 +76,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
|
|
|
89
76
|
|
|
90
77
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
91
78
|
|
|
92
|
-
##
|
|
93
|
-
|
|
94
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
|
|
95
|
-
<!-- The below content is automatically added from ./docs/partials/useCases.md -->
|
|
96
|
-
The `<auro-datetime>` element should be used in situations where users may:
|
|
97
|
-
|
|
98
|
-
* A date and/or time is required
|
|
99
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
100
|
-
|
|
101
|
-
## API Code Examples
|
|
102
|
-
|
|
103
|
-
### Default auro-datetime
|
|
79
|
+
## Basic Example
|
|
104
80
|
|
|
105
81
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
|
|
106
82
|
<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
|
|
@@ -110,31 +86,43 @@ The `<auro-datetime>` element should be used in situations where users may:
|
|
|
110
86
|
```
|
|
111
87
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
112
88
|
|
|
113
|
-
##
|
|
89
|
+
## Custom Component Registration for Version Management
|
|
114
90
|
|
|
115
|
-
|
|
116
|
-
|
|
91
|
+
There are two key parts to every Auro component: the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element definition.
|
|
92
|
+
The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.
|
|
117
93
|
|
|
118
|
-
|
|
94
|
+
When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.
|
|
119
95
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
### Start development environment
|
|
96
|
+
However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts.
|
|
123
97
|
|
|
124
|
-
|
|
125
|
-
Once the project has been cloned to your local resource and you have installed all the dependencies you will need to open a shell session to run the **dev server**.
|
|
98
|
+
You can do this by importing only the component class and using the `register(name)` method with a unique name:
|
|
126
99
|
|
|
127
|
-
|
|
128
|
-
|
|
100
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
|
|
101
|
+
<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
|
|
102
|
+
|
|
103
|
+
```js
|
|
104
|
+
// Import the class only
|
|
105
|
+
import { AuroDatetime } from '@aurodesignsystem/auro-datetime/class';
|
|
106
|
+
|
|
107
|
+
// Register with a custom name if desired
|
|
108
|
+
AuroDatetime.register('custom-datetime');
|
|
129
109
|
```
|
|
130
110
|
|
|
131
|
-
|
|
132
|
-
|
|
111
|
+
This will create a new custom element `<custom-datetime>` that behaves exactly like `<auro-datetime>`, allowing both to coexist on the same page without interfering with each other.
|
|
133
112
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
113
|
+
<div class="exampleWrapper exampleWrapper--flex">
|
|
114
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./apiExamples/custom.html) -->
|
|
115
|
+
<!-- The below content is automatically added from ./apiExamples/custom.html -->
|
|
116
|
+
<custom-datetime type="date"></custom-datetime>
|
|
117
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
118
|
+
</div>
|
|
119
|
+
<auro-accordion alignRight>
|
|
120
|
+
<span slot="trigger">See code</span>
|
|
121
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/custom.html) -->
|
|
122
|
+
<!-- The below code snippet is automatically added from ./apiExamples/custom.html -->
|
|
134
123
|
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
124
|
+
```html
|
|
125
|
+
<custom-datetime type="date"></custom-datetime>
|
|
126
|
+
```
|
|
127
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
128
|
+
</auro-accordion>
|
package/demo/api.html
CHANGED
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
<script type="module" data-demo-script="true" src="./api.min.js"></script>
|
|
52
52
|
|
|
53
53
|
<!-- If additional elements are needed for the demo, add them here. -->
|
|
54
|
-
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest
|
|
55
|
-
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-alert@latest
|
|
54
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
|
|
55
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-alert@latest/+esm" type="module"></script>
|
|
56
56
|
</body>
|
|
57
57
|
</html>
|
package/demo/api.md
CHANGED
|
@@ -1,46 +1,48 @@
|
|
|
1
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src
|
|
2
|
-
<!-- The below content is automatically added from
|
|
1
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
|
|
2
|
+
<!-- The below content is automatically added from ./../docs/api.md -->
|
|
3
3
|
|
|
4
4
|
# auro-datetime
|
|
5
5
|
|
|
6
|
-
The auro-datetime
|
|
6
|
+
The `auro-datetime` element is for the purposes of providing an easy to use date and time API.
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
### Properties & Attributes
|
|
9
9
|
|
|
10
|
-
|
|
|
11
|
-
|
|
12
|
-
|
|
|
13
|
-
|
|
|
14
|
-
|
|
|
15
|
-
|
|
|
16
|
-
|
|
|
17
|
-
|
|
|
18
|
-
|
|
|
10
|
+
| Properties | Attributes | Modifiers | Type | Default | Description |
|
|
11
|
+
| ---------- | ---------- | --------- | ------------------------------------------------------------------------------------------------ | ------- | ------------------------------------------------------------------------------------------------- |
|
|
12
|
+
| cap | cap | | boolean | | Capitalize AM or PM designation |
|
|
13
|
+
| month | month | | `short` \| `long` | `short` | Defines format of month |
|
|
14
|
+
| setDate | setDate | | string | | Pass in string to set date |
|
|
15
|
+
| timeZone | timeZone | | string | | Pass in string to define [timeZone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) |
|
|
16
|
+
| type | type | | `date` \| `time` \| `year` \| `month` \| `weekday` \| `day` \| `numeric` \| `tzDate` \| `tzTime` | | Defines type of data to render |
|
|
17
|
+
| utc | utc | | string | | Pass in ISO 8601 UTC formatted time code |
|
|
18
|
+
| weekday | weekday | | `short` \| `long` | `short` | Defines format of weekday |
|
|
19
19
|
|
|
20
|
-
|
|
20
|
+
### Methods
|
|
21
21
|
|
|
22
|
-
| Name
|
|
23
|
-
|
|
24
|
-
|
|
|
25
|
-
|
|
22
|
+
| Name | Parameters | Return | Description |
|
|
23
|
+
| -------- | -------------------------------------------------------------------- | ------ | ------------------------------------------------- |
|
|
24
|
+
| register | `name` (string) - The name of the element that you want to register. | | This will register this element with the browser. |
|
|
25
|
+
|
|
26
|
+
### Slots
|
|
27
|
+
|
|
28
|
+
| Name | Description |
|
|
29
|
+
| ---- | -------------------------------------------- |
|
|
30
|
+
| post | Content that comes after the `pre` content |
|
|
31
|
+
| pre | Content that comes before the `post` content |
|
|
26
32
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
27
33
|
|
|
28
|
-
##
|
|
34
|
+
## Basic Date
|
|
29
35
|
|
|
30
|
-
### Basic Date
|
|
31
|
-
|
|
32
|
-
Using the `auro-datetime` element with `type=date` will return the **current date** based on client local preferences.
|
|
33
|
-
|
|
34
36
|
<div class="exampleWrapper">
|
|
35
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src
|
|
36
|
-
<!-- The below content is automatically added from
|
|
37
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
|
|
38
|
+
<!-- The below content is automatically added from ./../apiExamples/basic.html -->
|
|
37
39
|
<auro-datetime type="date"></auro-datetime>
|
|
38
40
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
39
41
|
</div>
|
|
40
42
|
<auro-accordion alignRight>
|
|
41
43
|
<span slot="trigger">See code</span>
|
|
42
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src
|
|
43
|
-
<!-- The below code snippet is automatically added from
|
|
44
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
|
|
45
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
|
|
44
46
|
|
|
45
47
|
```html
|
|
46
48
|
<auro-datetime type="date"></auro-datetime>
|
|
@@ -48,39 +50,18 @@ Using the `auro-datetime` element with `type=date` will return the **current dat
|
|
|
48
50
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
49
51
|
</auro-accordion>
|
|
50
52
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
Using the `auro-datetime` element with `type=numeric` will return the **current date** based on client local preferences as a numeric type.
|
|
54
|
-
|
|
55
|
-
<div class="exampleWrapper">
|
|
56
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/numericDate.html) -->
|
|
57
|
-
<!-- The below content is automatically added from ../apiExamples/numericDate.html -->
|
|
58
|
-
<auro-datetime type="numeric"></auro-datetime>
|
|
59
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
60
|
-
</div>
|
|
61
|
-
<auro-accordion alignRight>
|
|
62
|
-
<span slot="trigger">See code</span>
|
|
63
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/numericDate.html) -->
|
|
64
|
-
<!-- The below code snippet is automatically added from ../apiExamples/numericDate.html -->
|
|
65
|
-
|
|
66
|
-
```html
|
|
67
|
-
<auro-datetime type="numeric"></auro-datetime>
|
|
68
|
-
```
|
|
69
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
70
|
-
</auro-accordion>
|
|
53
|
+
## Basic Time
|
|
71
54
|
|
|
72
|
-
### Basic Time
|
|
73
|
-
|
|
74
55
|
<div class="exampleWrapper">
|
|
75
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src
|
|
76
|
-
<!-- The below content is automatically added from
|
|
56
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-time.html) -->
|
|
57
|
+
<!-- The below content is automatically added from ./../apiExamples/basic-time.html -->
|
|
77
58
|
<auro-datetime type="time"></auro-datetime>
|
|
78
59
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
79
60
|
</div>
|
|
80
61
|
<auro-accordion alignRight>
|
|
81
62
|
<span slot="trigger">See code</span>
|
|
82
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src
|
|
83
|
-
<!-- The below code snippet is automatically added from
|
|
63
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-time.html) -->
|
|
64
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/basic-time.html -->
|
|
84
65
|
|
|
85
66
|
```html
|
|
86
67
|
<auro-datetime type="time"></auro-datetime>
|
|
@@ -88,7 +69,9 @@ Using the `auro-datetime` element with `type=numeric` will return the **current
|
|
|
88
69
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
89
70
|
</auro-accordion>
|
|
90
71
|
|
|
91
|
-
|
|
72
|
+
## Property & Attribute Examples
|
|
73
|
+
|
|
74
|
+
### Time with Capitalization
|
|
92
75
|
|
|
93
76
|
Using the `cap` attribute will return the basic time string with a capitalized `AM` or `PM`.
|
|
94
77
|
|
|
@@ -109,9 +92,9 @@ Using the `cap` attribute will return the basic time string with a capitalized `
|
|
|
109
92
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
110
93
|
</auro-accordion>
|
|
111
94
|
|
|
112
|
-
###
|
|
95
|
+
### Long Month and Weekday
|
|
113
96
|
|
|
114
|
-
|
|
97
|
+
Use the `month="long"` attribute to display the full month name, and `weekday="long"` to display the full weekday name.
|
|
115
98
|
|
|
116
99
|
<div class="exampleWrapper">
|
|
117
100
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/long.html) -->
|
|
@@ -135,72 +118,70 @@ Using the additional `month` and `weekday` enum options with `type=date`, `auro-
|
|
|
135
118
|
Use the `setDate` property to inject a specific date into the element and parse as needed.
|
|
136
119
|
|
|
137
120
|
<div class="exampleWrapper">
|
|
138
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/
|
|
139
|
-
<!-- The below content is automatically added from ../apiExamples/
|
|
140
|
-
<auro-datetime setDate="August 19, 1975 23:15:30"></auro-datetime>
|
|
141
|
-
<auro-datetime weekday="long" month="long" setDate="August 19, 1975 23:15:30"></auro-datetime>
|
|
121
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/set-date.html) -->
|
|
122
|
+
<!-- The below content is automatically added from ../apiExamples/set-date.html -->
|
|
123
|
+
<auro-datetime setDate="August 19, 1975 23:15:30"></auro-datetime><br>
|
|
124
|
+
<auro-datetime weekday="long" month="long" setDate="August 19, 1975 23:15:30"></auro-datetime><br>
|
|
142
125
|
<auro-datetime type="time" setDate="August 19, 1975 23:15:30"></auro-datetime>
|
|
143
126
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
144
127
|
</div>
|
|
145
128
|
<auro-accordion alignRight>
|
|
146
129
|
<span slot="trigger">See code</span>
|
|
147
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/
|
|
148
|
-
<!-- The below code snippet is automatically added from ../apiExamples/
|
|
130
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/set-date.html) -->
|
|
131
|
+
<!-- The below code snippet is automatically added from ../apiExamples/set-date.html -->
|
|
149
132
|
|
|
150
133
|
```html
|
|
151
|
-
<auro-datetime setDate="August 19, 1975 23:15:30"></auro-datetime>
|
|
152
|
-
<auro-datetime weekday="long" month="long" setDate="August 19, 1975 23:15:30"></auro-datetime>
|
|
134
|
+
<auro-datetime setDate="August 19, 1975 23:15:30"></auro-datetime><br>
|
|
135
|
+
<auro-datetime weekday="long" month="long" setDate="August 19, 1975 23:15:30"></auro-datetime><br>
|
|
153
136
|
<auro-datetime type="time" setDate="August 19, 1975 23:15:30"></auro-datetime>
|
|
154
137
|
```
|
|
155
138
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
156
139
|
</auro-accordion>
|
|
157
140
|
|
|
158
|
-
###
|
|
141
|
+
### Type
|
|
159
142
|
|
|
160
|
-
|
|
161
|
-
|
|
143
|
+
Use `type` to define the type of data to render. Options are `[date, time, year, month, weekday, day, numeric, tzDate, tzTime]`.
|
|
144
|
+
|
|
145
|
+
#### Numeric Date
|
|
162
146
|
|
|
163
|
-
Using the `
|
|
147
|
+
Using the `auro-datetime` element with `type=numeric` will return the **current date** based on client local preferences as a numeric type.
|
|
164
148
|
|
|
165
149
|
<div class="exampleWrapper">
|
|
166
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/
|
|
167
|
-
<!-- The below content is automatically added from ../apiExamples/
|
|
168
|
-
<auro-datetime
|
|
169
|
-
<auro-datetime type="time" utc="2020-09-22T01:38:22Z"></auro-datetime><br>
|
|
170
|
-
<auro-datetime weekday="long" month="long" utc="2020-09-22T01:38:22Z"></auro-datetime>
|
|
150
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/numeric-date.html) -->
|
|
151
|
+
<!-- The below content is automatically added from ../apiExamples/numeric-date.html -->
|
|
152
|
+
<auro-datetime type="numeric"></auro-datetime>
|
|
171
153
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
172
154
|
</div>
|
|
173
155
|
<auro-accordion alignRight>
|
|
174
156
|
<span slot="trigger">See code</span>
|
|
175
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/
|
|
176
|
-
<!-- The below code snippet is automatically added from ../apiExamples/
|
|
157
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/numeric-date.html) -->
|
|
158
|
+
<!-- The below code snippet is automatically added from ../apiExamples/numeric-date.html -->
|
|
177
159
|
|
|
178
160
|
```html
|
|
179
|
-
<auro-datetime
|
|
180
|
-
<auro-datetime type="time" utc="2020-09-22T01:38:22Z"></auro-datetime><br>
|
|
181
|
-
<auro-datetime weekday="long" month="long" utc="2020-09-22T01:38:22Z"></auro-datetime>
|
|
161
|
+
<auro-datetime type="numeric"></auro-datetime>
|
|
182
162
|
```
|
|
183
163
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
184
164
|
</auro-accordion>
|
|
185
165
|
|
|
186
|
-
|
|
166
|
+
#### Set date with code +/- time zone
|
|
187
167
|
|
|
188
168
|
<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>
|
|
169
|
+
<br />
|
|
189
170
|
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.
|
|
190
171
|
|
|
191
172
|
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.)
|
|
192
173
|
|
|
193
174
|
<div class="exampleWrapper">
|
|
194
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/
|
|
195
|
-
<!-- The below content is automatically added from ../apiExamples/
|
|
175
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/plus-minus.html) -->
|
|
176
|
+
<!-- The below content is automatically added from ../apiExamples/plus-minus.html -->
|
|
196
177
|
<auro-datetime type="tzTime" setDate="2022-07-13T21:35:00-07:00"></auro-datetime><br>
|
|
197
178
|
<auro-datetime type="tzDate" setDate="2022-07-13T21:35:00-07:00"></auro-datetime>
|
|
198
179
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
199
180
|
</div>
|
|
200
181
|
<auro-accordion alignRight>
|
|
201
182
|
<span slot="trigger">See code</span>
|
|
202
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/
|
|
203
|
-
<!-- The below code snippet is automatically added from ../apiExamples/
|
|
183
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/plus-minus.html) -->
|
|
184
|
+
<!-- The below code snippet is automatically added from ../apiExamples/plus-minus.html -->
|
|
204
185
|
|
|
205
186
|
```html
|
|
206
187
|
<auro-datetime type="tzTime" setDate="2022-07-13T21:35:00-07:00"></auro-datetime><br>
|
|
@@ -209,116 +190,113 @@ Example using `2022-07-13T21:35:00-07:00` with Pacific `(-07:00)` time zone duri
|
|
|
209
190
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
210
191
|
</auro-accordion>
|
|
211
192
|
|
|
212
|
-
|
|
193
|
+
### Set date with UTC (Zulu) time code
|
|
213
194
|
|
|
214
|
-
|
|
195
|
+
<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>
|
|
196
|
+
`YYYY-MM-DDTHH:MM:SSZ`</auro-alert>
|
|
197
|
+
<br />
|
|
198
|
+
Using the `utc` property, be sure to only use a properly-formatted UTC code.
|
|
215
199
|
|
|
216
200
|
<div class="exampleWrapper">
|
|
217
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/
|
|
218
|
-
<!-- The below content is automatically added from ../apiExamples/
|
|
219
|
-
<auro-datetime
|
|
220
|
-
<auro-datetime type="
|
|
201
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/utc.html) -->
|
|
202
|
+
<!-- The below content is automatically added from ../apiExamples/utc.html -->
|
|
203
|
+
<auro-datetime utc="2020-09-22T01:38:22Z"></auro-datetime><br>
|
|
204
|
+
<auro-datetime type="time" utc="2020-09-22T01:38:22Z"></auro-datetime><br>
|
|
205
|
+
<auro-datetime weekday="long" month="long" utc="2020-09-22T01:38:22Z"></auro-datetime>
|
|
221
206
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
222
207
|
</div>
|
|
223
208
|
<auro-accordion alignRight>
|
|
224
209
|
<span slot="trigger">See code</span>
|
|
225
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/
|
|
226
|
-
<!-- The below code snippet is automatically added from ../apiExamples/
|
|
210
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/utc.html) -->
|
|
211
|
+
<!-- The below code snippet is automatically added from ../apiExamples/utc.html -->
|
|
227
212
|
|
|
228
213
|
```html
|
|
229
|
-
<auro-datetime
|
|
230
|
-
<auro-datetime type="
|
|
214
|
+
<auro-datetime utc="2020-09-22T01:38:22Z"></auro-datetime><br>
|
|
215
|
+
<auro-datetime type="time" utc="2020-09-22T01:38:22Z"></auro-datetime><br>
|
|
216
|
+
<auro-datetime weekday="long" month="long" utc="2020-09-22T01:38:22Z"></auro-datetime>
|
|
231
217
|
```
|
|
232
218
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
233
219
|
</auro-accordion>
|
|
234
220
|
|
|
235
|
-
|
|
221
|
+
## Slot Examples
|
|
222
|
+
|
|
223
|
+
### Pre and Post Slots
|
|
236
224
|
|
|
237
|
-
|
|
225
|
+
This example demonstrates the use of the `pre` and `post` slots to customize the content before and after the datetime output.
|
|
238
226
|
|
|
239
227
|
<div class="exampleWrapper">
|
|
240
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/
|
|
241
|
-
<!-- The below content is automatically added from ../apiExamples/
|
|
242
|
-
<auro-datetime type="
|
|
243
|
-
|
|
228
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/slots.html) -->
|
|
229
|
+
<!-- The below content is automatically added from ../apiExamples/slots.html -->
|
|
230
|
+
<auro-datetime type="year">
|
|
231
|
+
<span slot="pre">In the year </span>
|
|
232
|
+
<span slot="post">
|
|
233
|
+
day<auro-datetime type="day"></auro-datetime>
|
|
234
|
+
of <auro-datetime type="month" month="long"></auro-datetime>
|
|
235
|
+
</span>falls on a <auro-datetime type="weekday" weekday="long"></auro-datetime>
|
|
236
|
+
</auro-datetime>
|
|
244
237
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
245
238
|
</div>
|
|
246
239
|
<auro-accordion alignRight>
|
|
247
240
|
<span slot="trigger">See code</span>
|
|
248
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/
|
|
249
|
-
<!-- The below code snippet is automatically added from ../apiExamples/
|
|
241
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/slots.html) -->
|
|
242
|
+
<!-- The below code snippet is automatically added from ../apiExamples/slots.html -->
|
|
250
243
|
|
|
251
244
|
```html
|
|
252
|
-
<auro-datetime type="
|
|
253
|
-
<
|
|
245
|
+
<auro-datetime type="year">
|
|
246
|
+
<span slot="pre">In the year </span>
|
|
247
|
+
<span slot="post">
|
|
248
|
+
day<auro-datetime type="day"></auro-datetime>
|
|
249
|
+
of <auro-datetime type="month" month="long"></auro-datetime>
|
|
250
|
+
</span>falls on a <auro-datetime type="weekday" weekday="long"></auro-datetime>
|
|
251
|
+
</auro-datetime>
|
|
254
252
|
```
|
|
255
253
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
256
254
|
</auro-accordion>
|
|
257
255
|
|
|
258
|
-
|
|
256
|
+
## Common Usage Patterns & Functional Examples
|
|
257
|
+
|
|
258
|
+
### Example using Eastern Time Zone
|
|
259
259
|
|
|
260
|
-
|
|
260
|
+
Example using `2022-07-14T06:00:00-04:00` with Eastern `(-04:00)` time zone.
|
|
261
261
|
|
|
262
262
|
<div class="exampleWrapper">
|
|
263
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/
|
|
264
|
-
<!-- The below content is automatically added from ../apiExamples/
|
|
265
|
-
<
|
|
266
|
-
<
|
|
267
|
-
<p>West coast: <auro-datetime type="time" timezone="US/Pacific"></auro-datetime></p>
|
|
268
|
-
<p>Mountain: <auro-datetime type="time" timezone="US/Mountain"></auro-datetime></p>
|
|
269
|
-
<p>Mid-west: <auro-datetime type="time" timezone="US/Central"></auro-datetime></p>
|
|
270
|
-
<p>East coast: <auro-datetime type="time" timezone="US/Eastern"></auro-datetime></p>
|
|
271
|
-
<p>Puerto Rico: <auro-datetime type="time" timezone="America/Puerto_Rico"></auro-datetime></p>
|
|
272
|
-
<p>UTC: <auro-datetime type="time" timezone="UTC"></auro-datetime></p>
|
|
263
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/east-plus-minus.html) -->
|
|
264
|
+
<!-- The below content is automatically added from ../apiExamples/east-plus-minus.html -->
|
|
265
|
+
<auro-datetime type="tzTime" setDate="2022-07-14T06:00:00-04:00"></auro-datetime><br>
|
|
266
|
+
<auro-datetime type="tzDate" setDate="2022-07-14T06:00:00-04:00"></auro-datetime>
|
|
273
267
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
274
268
|
</div>
|
|
275
269
|
<auro-accordion alignRight>
|
|
276
270
|
<span slot="trigger">See code</span>
|
|
277
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/
|
|
278
|
-
<!-- The below code snippet is automatically added from ../apiExamples/
|
|
271
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/east-plus-minus.html) -->
|
|
272
|
+
<!-- The below code snippet is automatically added from ../apiExamples/east-plus-minus.html -->
|
|
279
273
|
|
|
280
274
|
```html
|
|
281
|
-
<
|
|
282
|
-
<
|
|
283
|
-
<p>West coast: <auro-datetime type="time" timezone="US/Pacific"></auro-datetime></p>
|
|
284
|
-
<p>Mountain: <auro-datetime type="time" timezone="US/Mountain"></auro-datetime></p>
|
|
285
|
-
<p>Mid-west: <auro-datetime type="time" timezone="US/Central"></auro-datetime></p>
|
|
286
|
-
<p>East coast: <auro-datetime type="time" timezone="US/Eastern"></auro-datetime></p>
|
|
287
|
-
<p>Puerto Rico: <auro-datetime type="time" timezone="America/Puerto_Rico"></auro-datetime></p>
|
|
288
|
-
<p>UTC: <auro-datetime type="time" timezone="UTC"></auro-datetime></p>
|
|
275
|
+
<auro-datetime type="tzTime" setDate="2022-07-14T06:00:00-04:00"></auro-datetime><br>
|
|
276
|
+
<auro-datetime type="tzDate" setDate="2022-07-14T06:00:00-04:00"></auro-datetime>
|
|
289
277
|
```
|
|
290
278
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
291
279
|
</auro-accordion>
|
|
292
280
|
|
|
293
|
-
###
|
|
281
|
+
### Example using Hawaiian Time Zone
|
|
294
282
|
|
|
295
|
-
|
|
283
|
+
Example using `2022-07-14T08:00:00-10:00` with Hawaii `(-10:00)` time zone.
|
|
296
284
|
|
|
297
285
|
<div class="exampleWrapper">
|
|
298
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/
|
|
299
|
-
<!-- The below content is automatically added from ../apiExamples/
|
|
300
|
-
<auro-datetime type="
|
|
301
|
-
|
|
302
|
-
<span slot="post">
|
|
303
|
-
day<auro-datetime type="day"></auro-datetime>
|
|
304
|
-
of <auro-datetime type="month" month="long"></auro-datetime>
|
|
305
|
-
</span>falls on a <auro-datetime type="weekday" weekday="long"></auro-datetime>
|
|
306
|
-
</auro-datetime>
|
|
286
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/hawaii-plus-minus.html) -->
|
|
287
|
+
<!-- The below content is automatically added from ../apiExamples/hawaii-plus-minus.html -->
|
|
288
|
+
<auro-datetime type="tzTime" setDate="2022-07-16T08:00:00-10:00"></auro-datetime><br>
|
|
289
|
+
<auro-datetime type="tzDate" setDate="2022-07-16T08:00:00-10:00"></auro-datetime>
|
|
307
290
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
308
291
|
</div>
|
|
309
292
|
<auro-accordion alignRight>
|
|
310
293
|
<span slot="trigger">See code</span>
|
|
311
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/
|
|
312
|
-
<!-- The below code snippet is automatically added from ../apiExamples/
|
|
294
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/hawaii-plus-minus.html) -->
|
|
295
|
+
<!-- The below code snippet is automatically added from ../apiExamples/hawaii-plus-minus.html -->
|
|
313
296
|
|
|
314
297
|
```html
|
|
315
|
-
<auro-datetime type="
|
|
316
|
-
|
|
317
|
-
<span slot="post">
|
|
318
|
-
day<auro-datetime type="day"></auro-datetime>
|
|
319
|
-
of <auro-datetime type="month" month="long"></auro-datetime>
|
|
320
|
-
</span>falls on a <auro-datetime type="weekday" weekday="long"></auro-datetime>
|
|
321
|
-
</auro-datetime>
|
|
298
|
+
<auro-datetime type="tzTime" setDate="2022-07-16T08:00:00-10:00"></auro-datetime><br>
|
|
299
|
+
<auro-datetime type="tzDate" setDate="2022-07-16T08:00:00-10:00"></auro-datetime>
|
|
322
300
|
```
|
|
323
301
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
324
|
-
</auro-accordion>
|
|
302
|
+
</auro-accordion>
|
|
@@ -66,6 +66,19 @@ class AuroLibraryRuntimeUtils {
|
|
|
66
66
|
|
|
67
67
|
return elemTag === tag || elem.hasAttribute(tag);
|
|
68
68
|
}
|
|
69
|
+
|
|
70
|
+
/**
|
|
71
|
+
* Gets the text content of a named slot.
|
|
72
|
+
* @returns {String}
|
|
73
|
+
* @private
|
|
74
|
+
*/
|
|
75
|
+
getSlotText(elem, name) {
|
|
76
|
+
const slot = elem.shadowRoot?.querySelector(`slot[name="${name}"]`);
|
|
77
|
+
const nodes = slot?.assignedNodes({ flatten: true }) || [];
|
|
78
|
+
const text = nodes.map(n => n.textContent?.trim()).join(' ').trim();
|
|
79
|
+
|
|
80
|
+
return text || null;
|
|
81
|
+
}
|
|
69
82
|
}
|
|
70
83
|
|
|
71
84
|
/**
|
|
@@ -98,22 +111,11 @@ const t=globalThis,i$1=t.trustedTypes,s$1=i$1?i$1.createPolicy("lit-html",{creat
|
|
|
98
111
|
// See LICENSE in the project root for license information.
|
|
99
112
|
|
|
100
113
|
|
|
101
|
-
// If using auroElement base class
|
|
102
|
-
// See instructions for importing auroElement base class https://git.io/JULq4
|
|
103
|
-
// import { html, css } from "lit";
|
|
104
|
-
// import AuroElement from '@aurodesignsystem/orion-web-core-style-sheets/dist/auroElement/auroElement';
|
|
105
|
-
|
|
106
114
|
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
|
|
107
115
|
/**
|
|
108
|
-
* The auro-datetime
|
|
116
|
+
* The `auro-datetime` element is for the purposes of providing an easy to use date and time API.
|
|
117
|
+
* @customElement auro-datetime
|
|
109
118
|
*
|
|
110
|
-
* @attr {String} type - Define type of data to render. Options are `[date, time, year, month, weekday, day, numeric, tzDate, tzTime]`
|
|
111
|
-
* @attr {String} utc - Pass in ISO 8601 UTC formatted time code
|
|
112
|
-
* @attr {String} weekday - Display long version of weekday. Option `[long]`
|
|
113
|
-
* @attr {String} month - Display long version of month. Option `[long]`
|
|
114
|
-
* @attr {String} timeZone - Pass in string to define [timeZone](https://docs.trifacta.com/display/DP/Supported+Time+Zone+Values)
|
|
115
|
-
* @attr {String} setDate - Pass in string to set date
|
|
116
|
-
* @attr {Boolean} cap - Capitalize AM or PM designation
|
|
117
119
|
* @slot pre - Content that comes before the `post` content
|
|
118
120
|
* @slot post - Content that comes after the `pre` content
|
|
119
121
|
*/
|
|
@@ -123,6 +125,10 @@ class AuroDatetime extends i {
|
|
|
123
125
|
constructor() {
|
|
124
126
|
super();
|
|
125
127
|
|
|
128
|
+
this._initializeDefaults();
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
_initializeDefaults() {
|
|
126
132
|
this.weekday = "short";
|
|
127
133
|
this.month = "short";
|
|
128
134
|
|
|
@@ -155,19 +161,52 @@ class AuroDatetime extends i {
|
|
|
155
161
|
static get properties() {
|
|
156
162
|
return {
|
|
157
163
|
// ...super.properties,
|
|
164
|
+
|
|
165
|
+
/**
|
|
166
|
+
* Capitalize AM or PM designation
|
|
167
|
+
*/
|
|
168
|
+
cap: { type: Boolean },
|
|
169
|
+
|
|
170
|
+
/**
|
|
171
|
+
* Defines format of month
|
|
172
|
+
* @type {'short' | 'long'}
|
|
173
|
+
* @default 'short'
|
|
174
|
+
*/
|
|
175
|
+
month: { type: String },
|
|
176
|
+
|
|
177
|
+
/**
|
|
178
|
+
* Pass in string to set date
|
|
179
|
+
*/
|
|
180
|
+
setDate: { type: String },
|
|
181
|
+
|
|
182
|
+
/**
|
|
183
|
+
* Pass in string to define [timeZone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)
|
|
184
|
+
*/
|
|
185
|
+
timeZone: { type: String },
|
|
186
|
+
|
|
187
|
+
/**
|
|
188
|
+
* Defines type of data to render
|
|
189
|
+
* @type {'date' | 'time' | 'year' | 'month' | 'weekday' | 'day' | 'numeric' | 'tzDate' | 'tzTime'}
|
|
190
|
+
*/
|
|
158
191
|
type: { type: String },
|
|
192
|
+
|
|
193
|
+
/**
|
|
194
|
+
* Pass in ISO 8601 UTC formatted time code
|
|
195
|
+
*/
|
|
159
196
|
utc: { type: String },
|
|
197
|
+
|
|
198
|
+
/**
|
|
199
|
+
* Defines format of weekday
|
|
200
|
+
* @type {'short' | 'long'}
|
|
201
|
+
* @default 'short'
|
|
202
|
+
*/
|
|
160
203
|
weekday: { type: String },
|
|
161
|
-
month: { type: String },
|
|
162
|
-
timeZone: { type: String },
|
|
163
|
-
setDate: { type: String },
|
|
164
|
-
cap: { type: Boolean },
|
|
165
204
|
};
|
|
166
205
|
}
|
|
167
206
|
|
|
168
207
|
/**
|
|
169
208
|
* This will register this element with the browser.
|
|
170
|
-
* @param {string} [name="auro-datetime"] - The name of element that you want to register
|
|
209
|
+
* @param {string} [name="auro-datetime"] - The name of the element that you want to register.
|
|
171
210
|
*
|
|
172
211
|
* @example
|
|
173
212
|
* AuroDatetime.register("custom-datetime") // this will register this element to <custom-datetime/>
|
package/demo/index.html
CHANGED
|
@@ -51,6 +51,6 @@
|
|
|
51
51
|
<script type="module" data-demo-script="true" src="./index.min.js"></script>
|
|
52
52
|
|
|
53
53
|
<!-- If additional elements are needed for the demo, add them here. -->
|
|
54
|
-
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest
|
|
54
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
|
|
55
55
|
</body>
|
|
56
56
|
</html>
|
package/demo/index.md
CHANGED
|
@@ -1,39 +1,37 @@
|
|
|
1
1
|
<!--
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
THIS PAGE'S CONTENT SHOULD BE KEPT MINIMAL.
|
|
3
|
+
ONLY ADD EXAMPLES THAT ARE TRULY NECESSARY FOR THE INDEX PAGE — THE BASIC EXAMPLE IS USUALLY ENOUGH.
|
|
4
|
+
ALL OTHER EXAMPLES SHOULD GO IN THE API DOCUMENTATION.
|
|
5
5
|
-->
|
|
6
6
|
|
|
7
|
-
# Datetime
|
|
8
|
-
|
|
9
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src
|
|
10
|
-
<!-- The below content is automatically added from
|
|
7
|
+
# Datetime
|
|
8
|
+
|
|
9
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
|
|
10
|
+
<!-- The below content is automatically added from ./../docs/partials/description.md -->
|
|
11
11
|
The `<auro-datetime>` custom element makes it really easy to add dates to your web app with a simple HTML API.
|
|
12
12
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
13
13
|
|
|
14
|
-
##
|
|
15
|
-
|
|
16
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src
|
|
17
|
-
<!-- The below content is automatically added from
|
|
14
|
+
## Use Cases
|
|
15
|
+
|
|
16
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
|
|
17
|
+
<!-- The below content is automatically added from ./../docs/partials/useCases.md -->
|
|
18
18
|
The `<auro-datetime>` element should be used in situations where users may:
|
|
19
19
|
|
|
20
20
|
* A date and/or time is required
|
|
21
21
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
22
22
|
|
|
23
|
-
##
|
|
24
|
-
|
|
25
|
-
### Basic Date
|
|
26
|
-
|
|
23
|
+
## Basic Date
|
|
24
|
+
|
|
27
25
|
<div class="exampleWrapper">
|
|
28
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src
|
|
29
|
-
<!-- The below content is automatically added from
|
|
26
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
|
|
27
|
+
<!-- The below content is automatically added from ./../apiExamples/basic.html -->
|
|
30
28
|
<auro-datetime type="date"></auro-datetime>
|
|
31
29
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
32
30
|
</div>
|
|
33
31
|
<auro-accordion alignRight>
|
|
34
32
|
<span slot="trigger">See code</span>
|
|
35
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src
|
|
36
|
-
<!-- The below code snippet is automatically added from
|
|
33
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
|
|
34
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
|
|
37
35
|
|
|
38
36
|
```html
|
|
39
37
|
<auro-datetime type="date"></auro-datetime>
|
|
@@ -41,53 +39,22 @@ The `<auro-datetime>` element should be used in situations where users may:
|
|
|
41
39
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
42
40
|
</auro-accordion>
|
|
43
41
|
|
|
44
|
-
|
|
45
|
-
|
|
42
|
+
## Basic Time
|
|
43
|
+
|
|
46
44
|
<div class="exampleWrapper">
|
|
47
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src
|
|
48
|
-
<!-- The below content is automatically added from
|
|
45
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-time.html) -->
|
|
46
|
+
<!-- The below content is automatically added from ./../apiExamples/basic-time.html -->
|
|
49
47
|
<auro-datetime type="time"></auro-datetime>
|
|
50
48
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
51
49
|
</div>
|
|
52
50
|
<auro-accordion alignRight>
|
|
53
51
|
<span slot="trigger">See code</span>
|
|
54
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src
|
|
55
|
-
<!-- The below code snippet is automatically added from
|
|
52
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-time.html) -->
|
|
53
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/basic-time.html -->
|
|
56
54
|
|
|
57
55
|
```html
|
|
58
56
|
<auro-datetime type="time"></auro-datetime>
|
|
59
57
|
```
|
|
60
58
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
61
|
-
</auro-accordion>
|
|
62
|
-
Having a closing statement about your example helps to really complete the thought with your reader.
|
|
63
|
-
|
|
64
|
-
## Recommended Use and Version Control
|
|
65
|
-
|
|
66
|
-
There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-datetime` custom element is defined automatically.
|
|
67
|
-
|
|
68
|
-
To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroDatetime.register(name)` method and pass in a unique name.
|
|
69
|
-
|
|
70
|
-
```js
|
|
71
|
-
import { AuroDatetime } from '@aurodesignsystem/auro-datetime/class';
|
|
72
|
-
|
|
73
|
-
AuroDatetime.register('custom-datetime');
|
|
74
|
-
```
|
|
75
|
-
|
|
76
|
-
This will create a new custom element that you can use in your HTML that will function identically to the `auro-datetime` element.
|
|
77
|
-
|
|
78
|
-
<div class="exampleWrapper">
|
|
79
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/custom.html) -->
|
|
80
|
-
<!-- The below content is automatically added from ../apiExamples/custom.html -->
|
|
81
|
-
<custom-datetime type="date"></custom-datetime>
|
|
82
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
83
|
-
</div>
|
|
84
|
-
<auro-accordion alignRight>
|
|
85
|
-
<span slot="trigger">See code</span>
|
|
86
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/custom.html) -->
|
|
87
|
-
<!-- The below code snippet is automatically added from ../apiExamples/custom.html -->
|
|
88
|
-
|
|
89
|
-
```html
|
|
90
|
-
<custom-datetime type="date"></custom-datetime>
|
|
91
|
-
```
|
|
92
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
93
59
|
</auro-accordion>
|
|
60
|
+
|
|
@@ -0,0 +1,6 @@
|
|
|
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.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},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)}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("en-us",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("en-us",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("en-us",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("en-us",this.timeTemplate).replace(/^0+/u,""):e.toLocaleString("en-us",this.timeTemplate).replace(/^0+/u,"").toLowerCase()}tzTime(e){const t=this.setDate.slice(0,-6),a=new Date(t);return this.cap?a.toLocaleString("en-us",e).replace(/^0+/u,""):a.toLocaleString("en-us",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};
|
package/dist/index.d.ts
CHANGED
|
@@ -1,10 +1,197 @@
|
|
|
1
|
-
import { LitElement, html } from 'lit';
|
|
2
1
|
|
|
3
|
-
|
|
4
|
-
<slot name="pre"></slot>
|
|
5
|
-
<span class="yield">${this.whichDate()}</span>
|
|
6
|
-
<slot name="post"></slot>
|
|
7
|
-
<slot></slot>
|
|
8
|
-
`}}
|
|
2
|
+
import type { AuroDatetime } from "src/auro-datetime.js";
|
|
9
3
|
|
|
10
|
-
|
|
4
|
+
/**
|
|
5
|
+
* This type can be used to create scoped tags for your components.
|
|
6
|
+
*
|
|
7
|
+
* Usage:
|
|
8
|
+
*
|
|
9
|
+
* ```ts
|
|
10
|
+
* import type { ScopedElements } from "path/to/library/jsx-integration";
|
|
11
|
+
*
|
|
12
|
+
* declare module "my-library" {
|
|
13
|
+
* namespace JSX {
|
|
14
|
+
* interface IntrinsicElements
|
|
15
|
+
* extends ScopedElements<'test-', ''> {}
|
|
16
|
+
* }
|
|
17
|
+
* }
|
|
18
|
+
* ```
|
|
19
|
+
*
|
|
20
|
+
* @deprecated Runtime scoped elements result in duplicate types and can confusing for developers. It is recommended to use the `prefix` and `suffix` options to generate new types instead.
|
|
21
|
+
*/
|
|
22
|
+
export type ScopedElements<
|
|
23
|
+
Prefix extends string = "",
|
|
24
|
+
Suffix extends string = ""
|
|
25
|
+
> = {
|
|
26
|
+
[Key in keyof CustomElements as `${Prefix}${Key}${Suffix}`]: CustomElements[Key];
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
type BaseProps<T extends HTMLElement> = {
|
|
30
|
+
|
|
31
|
+
/** Content added between the opening and closing tags of the element */
|
|
32
|
+
children?: any;
|
|
33
|
+
/** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
|
|
34
|
+
class?: string;
|
|
35
|
+
/** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
|
|
36
|
+
className?: string;
|
|
37
|
+
/** Takes an object where the key is the class name(s) and the value is a boolean expression. When true, the class is applied, and when false, it is removed. */
|
|
38
|
+
classList?: Record<string, boolean | undefined>;
|
|
39
|
+
/** Specifies the text direction of the element. */
|
|
40
|
+
dir?: "ltr" | "rtl";
|
|
41
|
+
/** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
|
|
42
|
+
exportparts?: string;
|
|
43
|
+
/** For <label> and <output>, lets you associate the label with some control. */
|
|
44
|
+
htmlFor?: string;
|
|
45
|
+
/** Specifies whether the element should be hidden. */
|
|
46
|
+
hidden?: boolean | string;
|
|
47
|
+
/** A unique identifier for the element. */
|
|
48
|
+
id?: string;
|
|
49
|
+
/** Keys tell React which array item each component corresponds to */
|
|
50
|
+
key?: string | number;
|
|
51
|
+
/** Specifies the language of the element. */
|
|
52
|
+
lang?: string;
|
|
53
|
+
/** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
|
|
54
|
+
part?: string;
|
|
55
|
+
/** Use the ref attribute with a variable to assign a DOM element to the variable once the element is rendered. */
|
|
56
|
+
ref?: T | ((e: T) => void);
|
|
57
|
+
/** Adds a reference for a custom element slot */
|
|
58
|
+
slot?: string;
|
|
59
|
+
/** Prop for setting inline styles */
|
|
60
|
+
style?: Record<string, string | number>;
|
|
61
|
+
/** Overrides the default Tab button behavior. Avoid using values other than -1 and 0. */
|
|
62
|
+
tabIndex?: number;
|
|
63
|
+
/** Specifies the tooltip text for the element. */
|
|
64
|
+
title?: string;
|
|
65
|
+
/** Passing 'no' excludes the element content from being translated. */
|
|
66
|
+
translate?: "yes" | "no";
|
|
67
|
+
/** The popover global attribute is used to designate an element as a popover element. */
|
|
68
|
+
popover?: "auto" | "hint" | "manual";
|
|
69
|
+
/** Turns an element element into a popover control button; takes the ID of the popover element to control as its value. */
|
|
70
|
+
popovertarget?: "top" | "bottom" | "left" | "right" | "auto";
|
|
71
|
+
/** Specifies the action to be performed on a popover element being controlled by a control element. */
|
|
72
|
+
popovertargetaction?: "show" | "hide" | "toggle";
|
|
73
|
+
|
|
74
|
+
} ;
|
|
75
|
+
|
|
76
|
+
type BaseEvents = {
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
export type AuroDatetimeProps = {
|
|
84
|
+
/** Capitalize AM or PM designation */
|
|
85
|
+
"cap"?: AuroDatetime['cap'];
|
|
86
|
+
/** Defines format of month */
|
|
87
|
+
"month"?: AuroDatetime['month'];
|
|
88
|
+
/** Pass in string to set date */
|
|
89
|
+
"setDate"?: AuroDatetime['setDate'];
|
|
90
|
+
/** Pass in string to define [timeZone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) */
|
|
91
|
+
"timeZone"?: AuroDatetime['timeZone'];
|
|
92
|
+
/** Defines type of data to render */
|
|
93
|
+
"type"?: AuroDatetime['type'];
|
|
94
|
+
/** Pass in ISO 8601 UTC formatted time code */
|
|
95
|
+
"utc"?: AuroDatetime['utc'];
|
|
96
|
+
/** Defines format of weekday */
|
|
97
|
+
"weekday"?: AuroDatetime['weekday'];
|
|
98
|
+
|
|
99
|
+
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
export type CustomElements = {
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
/**
|
|
106
|
+
* The `auro-datetime` element is for the purposes of providing an easy to use date and time API.
|
|
107
|
+
*
|
|
108
|
+
* ## Attributes & Properties
|
|
109
|
+
*
|
|
110
|
+
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
111
|
+
*
|
|
112
|
+
* - `cap`: Capitalize AM or PM designation
|
|
113
|
+
* - `month`: Defines format of month
|
|
114
|
+
* - `setDate`: Pass in string to set date
|
|
115
|
+
* - `timeZone`: Pass in string to define [timeZone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)
|
|
116
|
+
* - `type`: Defines type of data to render
|
|
117
|
+
* - `utc`: Pass in ISO 8601 UTC formatted time code
|
|
118
|
+
* - `weekday`: Defines format of weekday
|
|
119
|
+
*
|
|
120
|
+
* ## Slots
|
|
121
|
+
*
|
|
122
|
+
* Areas where markup can be added to the component.
|
|
123
|
+
*
|
|
124
|
+
* - `post`: Content that comes after the `pre` content
|
|
125
|
+
* - `pre`: Content that comes before the `post` content
|
|
126
|
+
*
|
|
127
|
+
* ## Methods
|
|
128
|
+
*
|
|
129
|
+
* Methods that can be called to access component functionality.
|
|
130
|
+
*
|
|
131
|
+
* - `_initializeDefaults() => void`: undefined
|
|
132
|
+
* - `register(name?: string = "auro-datetime") => void`: This will register this element with the browser.
|
|
133
|
+
*/
|
|
134
|
+
"auro-datetime": Partial<AuroDatetimeProps & BaseProps<AuroDatetime> & BaseEvents>;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
export type CustomCssProperties = {
|
|
138
|
+
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
|
|
142
|
+
declare module 'react' {
|
|
143
|
+
namespace JSX {
|
|
144
|
+
interface IntrinsicElements extends CustomElements {}
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
declare module 'preact' {
|
|
150
|
+
namespace JSX {
|
|
151
|
+
interface IntrinsicElements extends CustomElements {}
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
declare module '@builder.io/qwik' {
|
|
157
|
+
namespace JSX {
|
|
158
|
+
interface IntrinsicElements extends CustomElements {}
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
declare module '@stencil/core' {
|
|
164
|
+
namespace JSX {
|
|
165
|
+
interface IntrinsicElements extends CustomElements {}
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
declare module 'hono/jsx' {
|
|
171
|
+
namespace JSX {
|
|
172
|
+
interface IntrinsicElements extends CustomElements {}
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
declare module 'react-native' {
|
|
178
|
+
namespace JSX {
|
|
179
|
+
interface IntrinsicElements extends CustomElements {}
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
declare global {
|
|
185
|
+
namespace JSX {
|
|
186
|
+
interface IntrinsicElements extends CustomElements {}
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
}
|
|
190
|
+
declare global {
|
|
191
|
+
namespace svelteHTML {
|
|
192
|
+
interface IntrinsicElements extends CustomElements {}
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
|
|
197
|
+
export { AuroDatetime } from "./index.js";
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{A as AuroDatetime}from"./auro-datetime-
|
|
1
|
+
export{A as AuroDatetime}from"./auro-datetime-jIlTbbhr.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-jIlTbbhr.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-
|
|
10
|
+
"version": "0.0.0-pr64.0",
|
|
11
11
|
"description": "auro-datetime HTML custom element",
|
|
12
12
|
"repository": {
|
|
13
13
|
"type": "git",
|
|
@@ -18,15 +18,15 @@
|
|
|
18
18
|
"types": "dist/index.d.ts",
|
|
19
19
|
"license": "Apache-2.0",
|
|
20
20
|
"engines": {
|
|
21
|
-
"node": "
|
|
21
|
+
"node": ">=20"
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
24
|
"lit": "^3.3.1"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
|
-
"@aurodesignsystem/auro-cli": "^3.0
|
|
28
|
-
"@aurodesignsystem/auro-config": "^1.3.
|
|
29
|
-
"@aurodesignsystem/auro-library": "^5.5.
|
|
27
|
+
"@aurodesignsystem/auro-cli": "^3.5.0",
|
|
28
|
+
"@aurodesignsystem/auro-config": "^1.3.1",
|
|
29
|
+
"@aurodesignsystem/auro-library": "^5.5.4",
|
|
30
30
|
"husky": "^9.1.7"
|
|
31
31
|
},
|
|
32
32
|
"browserslist": [
|
|
@@ -37,7 +37,8 @@
|
|
|
37
37
|
"last 2 Safari major versions"
|
|
38
38
|
],
|
|
39
39
|
"publishConfig": {
|
|
40
|
-
"access": "public"
|
|
40
|
+
"access": "public",
|
|
41
|
+
"provenance": true
|
|
41
42
|
},
|
|
42
43
|
"keywords": [
|
|
43
44
|
"alaska airlines",
|
|
@@ -53,12 +54,18 @@
|
|
|
53
54
|
"lint:fix": "biome check --fix --no-errors-on-unmatched && stylelint \"./src/**/*.scss\" --fix",
|
|
54
55
|
"test": "auro test",
|
|
55
56
|
"test:watch": "auro test --watch",
|
|
56
|
-
"prepare": "husky"
|
|
57
|
+
"prepare": "husky",
|
|
58
|
+
"test:coverage": "auro test --coverage-report --open"
|
|
57
59
|
},
|
|
58
60
|
"exports": {
|
|
59
61
|
"./package.json": "./package.json",
|
|
60
62
|
"./readme.md": "./README.md",
|
|
61
|
-
".": "./
|
|
63
|
+
"./custom-elements.json": "./custom-elements.json",
|
|
64
|
+
".": {
|
|
65
|
+
"module": "./dist/registered.js",
|
|
66
|
+
"types": "./dist/index.d.ts",
|
|
67
|
+
"default": "./dist/registered.js"
|
|
68
|
+
},
|
|
62
69
|
"./demo/*.md": "./demo/*.md",
|
|
63
70
|
"./demo/*.js": "./demo/*.min.js",
|
|
64
71
|
"./class": {
|
|
@@ -74,5 +81,6 @@
|
|
|
74
81
|
"README.md",
|
|
75
82
|
"LICENSE",
|
|
76
83
|
"NOTICE"
|
|
77
|
-
]
|
|
84
|
+
],
|
|
85
|
+
"customElements": "custom-elements.json"
|
|
78
86
|
}
|
|
@@ -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)}}class s extends e{constructor(){super(),this.weekday="short",this.month="short",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{type:{type:String},utc:{type:String},weekday:{type:String},month:{type:String},timeZone:{type:String},setDate:{type:String},cap:{type:Boolean}}}static register(e="auro-datetime"){a.prototype.registerComponent(e,s)}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("en-us",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("en-us",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("en-us",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("en-us",this.timeTemplate).replace(/^0+/u,""):e.toLocaleString("en-us",this.timeTemplate).replace(/^0+/u,"").toLowerCase()}tzTime(e){const t=this.setDate.slice(0,-6),a=new Date(t);return this.cap?a.toLocaleString("en-us",e).replace(/^0+/u,""):a.toLocaleString("en-us",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};
|