@aurodesignsystem-dev/auro-datetime 0.0.0-pr62.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.
Files changed (18) hide show
  1. package/CHANGELOG.md +269 -0
  2. package/LICENSE +201 -0
  3. package/NOTICE +2 -0
  4. package/README.md +140 -0
  5. package/demo/api.html +57 -0
  6. package/demo/api.js +1 -0
  7. package/demo/api.md +324 -0
  8. package/demo/api.min.js +3 -0
  9. package/demo/auro-datetime.min.js +366 -0
  10. package/demo/index.html +56 -0
  11. package/demo/index.js +5 -0
  12. package/demo/index.md +93 -0
  13. package/demo/index.min.js +6 -0
  14. package/dist/auro-datetime-CpzZl80P.js +6 -0
  15. package/dist/index.d.ts +10 -0
  16. package/dist/index.js +1 -0
  17. package/dist/registered.js +1 -0
  18. package/package.json +78 -0
package/demo/api.html ADDED
@@ -0,0 +1,57 @@
1
+ <!--
2
+ Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
3
+ See LICENSE in the project root for license information.
4
+
5
+ HTML in this document is standardized and NOT to be edited.
6
+ All demo code should be added/edited in ./demo/api.md
7
+
8
+ With the exception of adding custom elements if needed for the demo.
9
+
10
+ ----------------------- DO NOT EDIT -----------------------------
11
+
12
+ -->
13
+
14
+ <!DOCTYPE html>
15
+ <html lang="en">
16
+ <head>
17
+ <meta charset="UTF-8" />
18
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
+ <title>Auro Web Component Demo | auro-datetime</title>
20
+
21
+ <!-- Prism.js Stylesheet -->
22
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
23
+
24
+ <!-- Legacy reference is still needed to support auro-datetime's use of legacy token values at this time -->
25
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
+
27
+ <!-- Design Token Alaska Theme -->
28
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
29
+
30
+ <!-- Webcore Stylesheet Alaska Theme -->
31
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
+
33
+ <!-- Demo Specific Styles -->
34
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
35
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
36
+ </head>
37
+ <body class="auro-markdown">
38
+ <main></main>
39
+
40
+ <script type="module">
41
+ import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
42
+ import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
43
+ fetch('./api.md')
44
+ .then((response) => response.text())
45
+ .then((text) => {
46
+ const rawHtml = marked.parse(text);
47
+ document.querySelector('main').innerHTML = rawHtml;
48
+ Prism.highlightAll();
49
+ });
50
+ </script>
51
+ <script type="module" data-demo-script="true" src="./api.min.js"></script>
52
+
53
+ <!-- If additional elements are needed for the demo, add them here. -->
54
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
55
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-alert@latest/dist/auro-alert__bundled.js" type="module"></script>
56
+ </body>
57
+ </html>
package/demo/api.js ADDED
@@ -0,0 +1 @@
1
+ import "../src/registered";
package/demo/api.md ADDED
@@ -0,0 +1,324 @@
1
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/api.md) -->
2
+ <!-- The below content is automatically added from ../docs/api.md -->
3
+
4
+ # auro-datetime
5
+
6
+ The auro-datetime custom element is for the purposes of providing an easy to use date and time API.
7
+
8
+ ## Properties
9
+
10
+ | Property | Attribute | Type | Default | Description |
11
+ |------------|------------|-----------|---------|--------------------------------------------------|
12
+ | [cap](#cap) | `cap` | `Boolean` | | Capitalize AM or PM designation |
13
+ | [month](#month) | `month` | `String` | "short" | Display long version of month. Option `[long]` |
14
+ | [setDate](#setDate) | `setDate` | `String` | | Pass in string to set date |
15
+ | [timeZone](#timeZone) | `timeZone` | `String` | | Pass in string to define [timeZone](https://docs.trifacta.com/display/DP/Supported+Time+Zone+Values) |
16
+ | [type](#type) | `type` | `String` | | Define type of data to render. Options are `[date, time, year, month, weekday, day, numeric, tzDate, tzTime]` |
17
+ | [utc](#utc) | `utc` | `String` | | Pass in ISO 8601 UTC formatted time code |
18
+ | [weekday](#weekday) | `weekday` | `String` | "short" | Display long version of weekday. Option `[long]` |
19
+
20
+ ## Slots
21
+
22
+ | Name | Description |
23
+ |--------|----------------------------------------------|
24
+ | [post](#post) | Content that comes after the `pre` content |
25
+ | [pre](#pre) | Content that comes before the `post` content |
26
+ <!-- AURO-GENERATED-CONTENT:END -->
27
+
28
+ ## API Examples
29
+
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
+ <div class="exampleWrapper">
35
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic.html) -->
36
+ <!-- The below content is automatically added from ../apiExamples/basic.html -->
37
+ <auro-datetime type="date"></auro-datetime>
38
+ <!-- AURO-GENERATED-CONTENT:END -->
39
+ </div>
40
+ <auro-accordion alignRight>
41
+ <span slot="trigger">See code</span>
42
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basic.html) -->
43
+ <!-- The below code snippet is automatically added from ../apiExamples/basic.html -->
44
+
45
+ ```html
46
+ <auro-datetime type="date"></auro-datetime>
47
+ ```
48
+ <!-- AURO-GENERATED-CONTENT:END -->
49
+ </auro-accordion>
50
+
51
+ #### Numeric Date
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>
71
+
72
+ ### Basic Time
73
+
74
+ <div class="exampleWrapper">
75
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basicTime.html) -->
76
+ <!-- The below content is automatically added from ../apiExamples/basicTime.html -->
77
+ <auro-datetime type="time"></auro-datetime>
78
+ <!-- AURO-GENERATED-CONTENT:END -->
79
+ </div>
80
+ <auro-accordion alignRight>
81
+ <span slot="trigger">See code</span>
82
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basicTime.html) -->
83
+ <!-- The below code snippet is automatically added from ../apiExamples/basicTime.html -->
84
+
85
+ ```html
86
+ <auro-datetime type="time"></auro-datetime>
87
+ ```
88
+ <!-- AURO-GENERATED-CONTENT:END -->
89
+ </auro-accordion>
90
+
91
+ #### Time with Capitilization
92
+
93
+ Using the `cap` attribute will return the basic time string with a capitalized `AM` or `PM`.
94
+
95
+ <div class="exampleWrapper">
96
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/cap.html) -->
97
+ <!-- The below content is automatically added from ../apiExamples/cap.html -->
98
+ <auro-datetime type="time" cap></auro-datetime>
99
+ <!-- AURO-GENERATED-CONTENT:END -->
100
+ </div>
101
+ <auro-accordion alignRight>
102
+ <span slot="trigger">See code</span>
103
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/cap.html) -->
104
+ <!-- The below code snippet is automatically added from ../apiExamples/cap.html -->
105
+
106
+ ```html
107
+ <auro-datetime type="time" cap></auro-datetime>
108
+ ```
109
+ <!-- AURO-GENERATED-CONTENT:END -->
110
+ </auro-accordion>
111
+
112
+ ### Basic date with long weekday and month
113
+
114
+ Using the additional `month` and `weekday` enum options with `type=date`, `auro-datetime` will return a customized string.
115
+
116
+ <div class="exampleWrapper">
117
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/long.html) -->
118
+ <!-- The below content is automatically added from ../apiExamples/long.html -->
119
+ <auro-datetime type="date" month="long" weekday="long"></auro-datetime>
120
+ <!-- AURO-GENERATED-CONTENT:END -->
121
+ </div>
122
+ <auro-accordion alignRight>
123
+ <span slot="trigger">See code</span>
124
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/long.html) -->
125
+ <!-- The below code snippet is automatically added from ../apiExamples/long.html -->
126
+
127
+ ```html
128
+ <auro-datetime type="date" month="long" weekday="long"></auro-datetime>
129
+ ```
130
+ <!-- AURO-GENERATED-CONTENT:END -->
131
+ </auro-accordion>
132
+
133
+ ### Set date/time with string
134
+
135
+ Use the `setDate` property to inject a specific date into the element and parse as needed.
136
+
137
+ <div class="exampleWrapper">
138
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/setDate.html) -->
139
+ <!-- The below content is automatically added from ../apiExamples/setDate.html -->
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>
142
+ <auro-datetime type="time" setDate="August 19, 1975 23:15:30"></auro-datetime>
143
+ <!-- AURO-GENERATED-CONTENT:END -->
144
+ </div>
145
+ <auro-accordion alignRight>
146
+ <span slot="trigger">See code</span>
147
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/setDate.html) -->
148
+ <!-- The below code snippet is automatically added from ../apiExamples/setDate.html -->
149
+
150
+ ```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>
153
+ <auro-datetime type="time" setDate="August 19, 1975 23:15:30"></auro-datetime>
154
+ ```
155
+ <!-- AURO-GENERATED-CONTENT:END -->
156
+ </auro-accordion>
157
+
158
+ ### Set date with UTC (Zulu) time code
159
+
160
+ > Times are expressed in ISO 8601 date and time format in UTC (Coordinated Universal Time), with a special UTC designator ("Z").<br>
161
+ > `YYYY-MM-DDTHH:MM:SSZ`
162
+
163
+ Using the `utc` property, be sure to only use a properly-formatted UTC code.
164
+
165
+ <div class="exampleWrapper">
166
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/utc.html) -->
167
+ <!-- The below content is automatically added from ../apiExamples/utc.html -->
168
+ <auro-datetime utc="2020-09-22T01:38:22Z"></auro-datetime><br>
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>
171
+ <!-- AURO-GENERATED-CONTENT:END -->
172
+ </div>
173
+ <auro-accordion alignRight>
174
+ <span slot="trigger">See code</span>
175
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/utc.html) -->
176
+ <!-- The below code snippet is automatically added from ../apiExamples/utc.html -->
177
+
178
+ ```html
179
+ <auro-datetime utc="2020-09-22T01:38:22Z"></auro-datetime><br>
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>
182
+ ```
183
+ <!-- AURO-GENERATED-CONTENT:END -->
184
+ </auro-accordion>
185
+
186
+ ### Set date with code +/- time zone
187
+
188
+ <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>
189
+ 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
+
191
+ 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
+
193
+ <div class="exampleWrapper">
194
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/plusMinus.html) -->
195
+ <!-- The below content is automatically added from ../apiExamples/plusMinus.html -->
196
+ <auro-datetime type="tzTime" setDate="2022-07-13T21:35:00-07:00"></auro-datetime><br>
197
+ <auro-datetime type="tzDate" setDate="2022-07-13T21:35:00-07:00"></auro-datetime>
198
+ <!-- AURO-GENERATED-CONTENT:END -->
199
+ </div>
200
+ <auro-accordion alignRight>
201
+ <span slot="trigger">See code</span>
202
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/plusMinus.html) -->
203
+ <!-- The below code snippet is automatically added from ../apiExamples/plusMinus.html -->
204
+
205
+ ```html
206
+ <auro-datetime type="tzTime" setDate="2022-07-13T21:35:00-07:00"></auro-datetime><br>
207
+ <auro-datetime type="tzDate" setDate="2022-07-13T21:35:00-07:00"></auro-datetime>
208
+ ```
209
+ <!-- AURO-GENERATED-CONTENT:END -->
210
+ </auro-accordion>
211
+
212
+ #### Example using Eastern Time Zone
213
+
214
+ Example using `2022-07-14T06:00:00-04:00` with Eastern `(-04:00)` time zone.
215
+
216
+ <div class="exampleWrapper">
217
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/eastPlusMinus.html) -->
218
+ <!-- The below content is automatically added from ../apiExamples/eastPlusMinus.html -->
219
+ <auro-datetime type="tzTime" setDate="2022-07-14T06:00:00-04:00"></auro-datetime><br>
220
+ <auro-datetime type="tzDate" setDate="2022-07-14T06:00:00-04:00"></auro-datetime>
221
+ <!-- AURO-GENERATED-CONTENT:END -->
222
+ </div>
223
+ <auro-accordion alignRight>
224
+ <span slot="trigger">See code</span>
225
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/eastPlusMinus.html) -->
226
+ <!-- The below code snippet is automatically added from ../apiExamples/eastPlusMinus.html -->
227
+
228
+ ```html
229
+ <auro-datetime type="tzTime" setDate="2022-07-14T06:00:00-04:00"></auro-datetime><br>
230
+ <auro-datetime type="tzDate" setDate="2022-07-14T06:00:00-04:00"></auro-datetime>
231
+ ```
232
+ <!-- AURO-GENERATED-CONTENT:END -->
233
+ </auro-accordion>
234
+
235
+ #### Example using Hawaiian Time Zone
236
+
237
+ Example using `2022-07-14T08:00:00-10:00` with Hawaii `(-10:00)` time zone.
238
+
239
+ <div class="exampleWrapper">
240
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/hawaiiPlusMinus.html) -->
241
+ <!-- The below content is automatically added from ../apiExamples/hawaiiPlusMinus.html -->
242
+ <auro-datetime type="tzTime" setDate="2022-07-16T08:00:00-10:00"></auro-datetime><br>
243
+ <auro-datetime type="tzDate" setDate="2022-07-16T08:00:00-10:00"></auro-datetime>
244
+ <!-- AURO-GENERATED-CONTENT:END -->
245
+ </div>
246
+ <auro-accordion alignRight>
247
+ <span slot="trigger">See code</span>
248
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/hawaiiPlusMinus.html) -->
249
+ <!-- The below code snippet is automatically added from ../apiExamples/hawaiiPlusMinus.html -->
250
+
251
+ ```html
252
+ <auro-datetime type="tzTime" setDate="2022-07-16T08:00:00-10:00"></auro-datetime><br>
253
+ <auro-datetime type="tzDate" setDate="2022-07-16T08:00:00-10:00"></auro-datetime>
254
+ ```
255
+ <!-- AURO-GENERATED-CONTENT:END -->
256
+ </auro-accordion>
257
+
258
+ ### Show current time based on time zone options
259
+
260
+ Using the `timezone` enum option, users can designate specifically what the **current time** is in any supported timezone. See all [timezone options](https://docs.trifacta.com/display/DP/Supported+Time+Zone+Values)
261
+
262
+ <div class="exampleWrapper">
263
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/timezone.html) -->
264
+ <!-- The below content is automatically added from ../apiExamples/timezone.html -->
265
+ <p>Current location: <auro-datetime type="time"></auro-datetime></p>
266
+ <p>Hawai'i: <auro-datetime type="time" timezone="US/Hawaii"></auro-datetime></p>
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>
273
+ <!-- AURO-GENERATED-CONTENT:END -->
274
+ </div>
275
+ <auro-accordion alignRight>
276
+ <span slot="trigger">See code</span>
277
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/timezone.html) -->
278
+ <!-- The below code snippet is automatically added from ../apiExamples/timezone.html -->
279
+
280
+ ```html
281
+ <p>Current location: <auro-datetime type="time"></auro-datetime></p>
282
+ <p>Hawai'i: <auro-datetime type="time" timezone="US/Hawaii"></auro-datetime></p>
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>
289
+ ```
290
+ <!-- AURO-GENERATED-CONTENT:END -->
291
+ </auro-accordion>
292
+
293
+ ### Combinations and Slots
294
+
295
+ The `auro-datetime` component also supports a wide series of use cases and slots for positioning content. See the following examples for inspiration and use.
296
+
297
+ <div class="exampleWrapper">
298
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/slots.html) -->
299
+ <!-- The below content is automatically added from ../apiExamples/slots.html -->
300
+ <auro-datetime type="year">
301
+ <span slot="pre">In the year </span>
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>
307
+ <!-- AURO-GENERATED-CONTENT:END -->
308
+ </div>
309
+ <auro-accordion alignRight>
310
+ <span slot="trigger">See code</span>
311
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/slots.html) -->
312
+ <!-- The below code snippet is automatically added from ../apiExamples/slots.html -->
313
+
314
+ ```html
315
+ <auro-datetime type="year">
316
+ <span slot="pre">In the year </span>
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>
322
+ ```
323
+ <!-- AURO-GENERATED-CONTENT:END -->
324
+ </auro-accordion>
package/demo/api.min.js ADDED
@@ -0,0 +1,3 @@
1
+ import { A as AuroDatetime } from './auro-datetime.min.js';
2
+
3
+ AuroDatetime.register();