@aurodesignsystem-dev/auro-datetime 0.0.0-pr69.1 → 0.0.0-pr71.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 (10) hide show
  1. package/README.md +41 -53
  2. package/demo/api.md +124 -148
  3. package/demo/auro-datetime.min.js +51 -17
  4. package/demo/index.md +24 -57
  5. package/dist/auro-datetime-Dzbnt26-.js +6 -0
  6. package/dist/index.d.ts +194 -8
  7. package/dist/index.js +1 -1
  8. package/dist/registered.js +1 -1
  9. package/package.json +10 -5
  10. 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
- ## UI development browser support
31
+ ## Use Cases
32
32
 
33
- <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/browserSupport.md) -->
34
- For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
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
- [![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-datetime/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-datetime/actions/workflows/testPublish.yml)
43
+ [![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-datetime/release.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-datetime/actions/workflows/release.yml)
42
44
  [![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-datetime?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-datetime)
43
45
  [![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-datetime?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)
44
46
  ![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge)
@@ -49,17 +51,10 @@ $ npm i @aurodesignsystem/auro-datetime
49
51
 
50
52
  <!-- AURO-GENERATED-CONTENT:END -->
51
53
 
52
- ### Design Token CSS Custom Property dependency
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 component dependency within each component that is using the `<auro-datetime>` component.
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
- ## Use CDN
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
- ## auro-datetime use cases
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
- ## Development
89
+ ## Custom Component Registration for Version Management
114
90
 
115
- <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/developmentDescription.md) -->
116
- In order to develop against this project, if you are not part of the core team, you will be required to fork the project prior to submitting a pull request.
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
- Please be sure to review the [contribution guidelines](https://auro.alaskaair.com/contributing) for this project. Please make sure to **pay special attention** to the **conventional commits** section of the document.
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
- <!-- AURO-GENERATED-CONTENT:END -->
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
- <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/localhost.md) -->
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
- ```shell
128
- $ npm run dev
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
- Open [localhost:8000](http://localhost:8000/)
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
- ### Testing
136
-
137
- <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/testing.md) -->
138
- Automated tests are required for every Auro component. See `.\test\auro-datetime.test.js` for the tests for this component. Run `npm run test` to run the tests and check code coverage. Tests must pass and meet a certain coverage threshold to commit. See [the testing documentation](https://auro.alaskaair.com/support/tests) for more details.
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.md CHANGED
@@ -1,46 +1,46 @@
1
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/api.md) -->
2
- <!-- The below content is automatically added from ../docs/api.md -->
1
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
2
+ <!-- The below content is automatically added from ./../docs/api.md -->
3
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.
4
+ # auro-datetime
7
5
 
8
- ## Properties
6
+ ### Properties & Attributes
7
+
8
+ | Properties | Attributes | Modifiers | Type | Default | Description |
9
+ | ---------- | ---------- | --------- | ------------------------------------------------------------------------------------------------ | ------- | ------------------------------------------------------------------------------------------------- |
10
+ | cap | cap | | boolean | | Capitalize AM or PM designation |
11
+ | month | month | | string | `short` | Defines format of month |
12
+ | setDate | setDate | | string | | Pass in string to set date |
13
+ | timeZone | timeZone | | string | | Pass in string to define [timeZone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) |
14
+ | type | type | | `date` \| `time` \| `year` \| `month` \| `weekday` \| `day` \| `numeric` \| `tzDate` \| `tzTime` | | Defines type of data to render |
15
+ | utc | utc | | string | | Pass in ISO 8601 UTC formatted time code |
16
+ | weekday | weekday | | string | `short` | Defines format of weekday |
9
17
 
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]` |
18
+ ### Methods
19
19
 
20
- ## Slots
20
+ | Name | Parameters | Return | Description |
21
+ | -------- | ------------------------------------------------------------------- | ------ | ------------------------------------------------- |
22
+ | register | `name` (string) - The name of element that you want to register to. | | This will register this element with the browser. |
21
23
 
22
- | Name | Description |
23
- |--------|----------------------------------------------|
24
- | [post](#post) | Content that comes after the `pre` content |
25
- | [pre](#pre) | Content that comes before the `post` content |
24
+ ### Slots
25
+
26
+ | Name | Description |
27
+ | ---- | -------------------------------------------- |
28
+ | post | Content that comes after the `pre` content |
29
+ | pre | Content that comes before the `post` content |
26
30
  <!-- AURO-GENERATED-CONTENT:END -->
27
31
 
28
- ## API Examples
32
+ ## Basic Date
29
33
 
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
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 -->
35
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
36
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
37
37
  <auro-datetime type="date"></auro-datetime>
38
38
  <!-- AURO-GENERATED-CONTENT:END -->
39
39
  </div>
40
40
  <auro-accordion alignRight>
41
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 -->
42
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
43
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
44
44
 
45
45
  ```html
46
46
  <auro-datetime type="date"></auro-datetime>
@@ -48,39 +48,18 @@ Using the `auro-datetime` element with `type=date` will return the **current dat
48
48
  <!-- AURO-GENERATED-CONTENT:END -->
49
49
  </auro-accordion>
50
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>
51
+ ## Basic Time
71
52
 
72
- ### Basic Time
73
-
74
53
  <div class="exampleWrapper">
75
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basicTime.html) -->
76
- <!-- The below content is automatically added from ../apiExamples/basicTime.html -->
54
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-time.html) -->
55
+ <!-- The below content is automatically added from ./../apiExamples/basic-time.html -->
77
56
  <auro-datetime type="time"></auro-datetime>
78
57
  <!-- AURO-GENERATED-CONTENT:END -->
79
58
  </div>
80
59
  <auro-accordion alignRight>
81
60
  <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 -->
61
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-time.html) -->
62
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic-time.html -->
84
63
 
85
64
  ```html
86
65
  <auro-datetime type="time"></auro-datetime>
@@ -88,7 +67,9 @@ Using the `auro-datetime` element with `type=numeric` will return the **current
88
67
  <!-- AURO-GENERATED-CONTENT:END -->
89
68
  </auro-accordion>
90
69
 
91
- #### Time with Capitilization
70
+ ## Property & Attribute Examples
71
+
72
+ ### Time with Capitalization
92
73
 
93
74
  Using the `cap` attribute will return the basic time string with a capitalized `AM` or `PM`.
94
75
 
@@ -109,9 +90,9 @@ Using the `cap` attribute will return the basic time string with a capitalized `
109
90
  <!-- AURO-GENERATED-CONTENT:END -->
110
91
  </auro-accordion>
111
92
 
112
- ### Basic date with long weekday and month
93
+ ### Long Month and Weekday
113
94
 
114
- Using the additional `month` and `weekday` enum options with `type=date`, `auro-datetime` will return a customized string.
95
+ Use the `month="long"` attribute to display the full month name, and `weekday="long"` to display the full weekday name.
115
96
 
116
97
  <div class="exampleWrapper">
117
98
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/long.html) -->
@@ -135,72 +116,70 @@ Using the additional `month` and `weekday` enum options with `type=date`, `auro-
135
116
  Use the `setDate` property to inject a specific date into the element and parse as needed.
136
117
 
137
118
  <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>
119
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/set-date.html) -->
120
+ <!-- The below content is automatically added from ../apiExamples/set-date.html -->
121
+ <auro-datetime setDate="August 19, 1975 23:15:30"></auro-datetime><br>
122
+ <auro-datetime weekday="long" month="long" setDate="August 19, 1975 23:15:30"></auro-datetime><br>
142
123
  <auro-datetime type="time" setDate="August 19, 1975 23:15:30"></auro-datetime>
143
124
  <!-- AURO-GENERATED-CONTENT:END -->
144
125
  </div>
145
126
  <auro-accordion alignRight>
146
127
  <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 -->
128
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/set-date.html) -->
129
+ <!-- The below code snippet is automatically added from ../apiExamples/set-date.html -->
149
130
 
150
131
  ```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>
132
+ <auro-datetime setDate="August 19, 1975 23:15:30"></auro-datetime><br>
133
+ <auro-datetime weekday="long" month="long" setDate="August 19, 1975 23:15:30"></auro-datetime><br>
153
134
  <auro-datetime type="time" setDate="August 19, 1975 23:15:30"></auro-datetime>
154
135
  ```
155
136
  <!-- AURO-GENERATED-CONTENT:END -->
156
137
  </auro-accordion>
157
138
 
158
- ### Set date with UTC (Zulu) time code
139
+ ### Type
159
140
 
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`
141
+ Use `type` to define the type of data to render. Options are `[date, time, year, month, weekday, day, numeric, tzDate, tzTime]`.
142
+
143
+ #### Numeric Date
162
144
 
163
- Using the `utc` property, be sure to only use a properly-formatted UTC code.
145
+ Using the `auro-datetime` element with `type=numeric` will return the **current date** based on client local preferences as a numeric type.
164
146
 
165
147
  <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>
148
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/numeric-date.html) -->
149
+ <!-- The below content is automatically added from ../apiExamples/numeric-date.html -->
150
+ <auro-datetime type="numeric"></auro-datetime>
171
151
  <!-- AURO-GENERATED-CONTENT:END -->
172
152
  </div>
173
153
  <auro-accordion alignRight>
174
154
  <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 -->
155
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/numeric-date.html) -->
156
+ <!-- The below code snippet is automatically added from ../apiExamples/numeric-date.html -->
177
157
 
178
158
  ```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>
159
+ <auro-datetime type="numeric"></auro-datetime>
182
160
  ```
183
161
  <!-- AURO-GENERATED-CONTENT:END -->
184
162
  </auro-accordion>
185
163
 
186
- ### Set date with code +/- time zone
164
+ #### Set date with code +/- time zone
187
165
 
188
166
  <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>
167
+ <br />
189
168
  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
169
 
191
170
  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
171
 
193
172
  <div class="exampleWrapper">
194
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/plusMinus.html) -->
195
- <!-- The below content is automatically added from ../apiExamples/plusMinus.html -->
173
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/plus-minus.html) -->
174
+ <!-- The below content is automatically added from ../apiExamples/plus-minus.html -->
196
175
  <auro-datetime type="tzTime" setDate="2022-07-13T21:35:00-07:00"></auro-datetime><br>
197
176
  <auro-datetime type="tzDate" setDate="2022-07-13T21:35:00-07:00"></auro-datetime>
198
177
  <!-- AURO-GENERATED-CONTENT:END -->
199
178
  </div>
200
179
  <auro-accordion alignRight>
201
180
  <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 -->
181
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/plus-minus.html) -->
182
+ <!-- The below code snippet is automatically added from ../apiExamples/plus-minus.html -->
204
183
 
205
184
  ```html
206
185
  <auro-datetime type="tzTime" setDate="2022-07-13T21:35:00-07:00"></auro-datetime><br>
@@ -209,116 +188,113 @@ Example using `2022-07-13T21:35:00-07:00` with Pacific `(-07:00)` time zone duri
209
188
  <!-- AURO-GENERATED-CONTENT:END -->
210
189
  </auro-accordion>
211
190
 
212
- #### Example using Eastern Time Zone
191
+ ### Set date with UTC (Zulu) time code
213
192
 
214
- Example using `2022-07-14T06:00:00-04:00` with Eastern `(-04:00)` time zone.
193
+ <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>
194
+ `YYYY-MM-DDTHH:MM:SSZ`</auro-alert>
195
+ <br />
196
+ Using the `utc` property, be sure to only use a properly-formatted UTC code.
215
197
 
216
198
  <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>
199
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/utc.html) -->
200
+ <!-- The below content is automatically added from ../apiExamples/utc.html -->
201
+ <auro-datetime utc="2020-09-22T01:38:22Z"></auro-datetime><br>
202
+ <auro-datetime type="time" utc="2020-09-22T01:38:22Z"></auro-datetime><br>
203
+ <auro-datetime weekday="long" month="long" utc="2020-09-22T01:38:22Z"></auro-datetime>
221
204
  <!-- AURO-GENERATED-CONTENT:END -->
222
205
  </div>
223
206
  <auro-accordion alignRight>
224
207
  <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 -->
208
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/utc.html) -->
209
+ <!-- The below code snippet is automatically added from ../apiExamples/utc.html -->
227
210
 
228
211
  ```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>
212
+ <auro-datetime utc="2020-09-22T01:38:22Z"></auro-datetime><br>
213
+ <auro-datetime type="time" utc="2020-09-22T01:38:22Z"></auro-datetime><br>
214
+ <auro-datetime weekday="long" month="long" utc="2020-09-22T01:38:22Z"></auro-datetime>
231
215
  ```
232
216
  <!-- AURO-GENERATED-CONTENT:END -->
233
217
  </auro-accordion>
234
218
 
235
- #### Example using Hawaiian Time Zone
219
+ ## Slot Examples
220
+
221
+ ### Pre and Post Slots
236
222
 
237
- Example using `2022-07-14T08:00:00-10:00` with Hawaii `(-10:00)` time zone.
223
+ This example demonstrates the use of the `pre` and `post` slots to customize the content before and after the datetime output.
238
224
 
239
225
  <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>
226
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/slots.html) -->
227
+ <!-- The below content is automatically added from ../apiExamples/slots.html -->
228
+ <auro-datetime type="year">
229
+ <span slot="pre">In the year </span>
230
+ <span slot="post">
231
+ day<auro-datetime type="day"></auro-datetime>
232
+ of <auro-datetime type="month" month="long"></auro-datetime>
233
+ </span>falls on a <auro-datetime type="weekday" weekday="long"></auro-datetime>
234
+ </auro-datetime>
244
235
  <!-- AURO-GENERATED-CONTENT:END -->
245
236
  </div>
246
237
  <auro-accordion alignRight>
247
238
  <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 -->
239
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/slots.html) -->
240
+ <!-- The below code snippet is automatically added from ../apiExamples/slots.html -->
250
241
 
251
242
  ```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>
243
+ <auro-datetime type="year">
244
+ <span slot="pre">In the year </span>
245
+ <span slot="post">
246
+ day<auro-datetime type="day"></auro-datetime>
247
+ of <auro-datetime type="month" month="long"></auro-datetime>
248
+ </span>falls on a <auro-datetime type="weekday" weekday="long"></auro-datetime>
249
+ </auro-datetime>
254
250
  ```
255
251
  <!-- AURO-GENERATED-CONTENT:END -->
256
252
  </auro-accordion>
257
253
 
258
- ### Show current time based on time zone options
254
+ ## Common Usage Patterns & Functional Examples
255
+
256
+ ### Example using Eastern Time Zone
259
257
 
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)
258
+ Example using `2022-07-14T06:00:00-04:00` with Eastern `(-04:00)` time zone.
261
259
 
262
260
  <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>
261
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/east-plus-minus.html) -->
262
+ <!-- The below content is automatically added from ../apiExamples/east-plus-minus.html -->
263
+ <auro-datetime type="tzTime" setDate="2022-07-14T06:00:00-04:00"></auro-datetime><br>
264
+ <auro-datetime type="tzDate" setDate="2022-07-14T06:00:00-04:00"></auro-datetime>
273
265
  <!-- AURO-GENERATED-CONTENT:END -->
274
266
  </div>
275
267
  <auro-accordion alignRight>
276
268
  <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 -->
269
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/east-plus-minus.html) -->
270
+ <!-- The below code snippet is automatically added from ../apiExamples/east-plus-minus.html -->
279
271
 
280
272
  ```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>
273
+ <auro-datetime type="tzTime" setDate="2022-07-14T06:00:00-04:00"></auro-datetime><br>
274
+ <auro-datetime type="tzDate" setDate="2022-07-14T06:00:00-04:00"></auro-datetime>
289
275
  ```
290
276
  <!-- AURO-GENERATED-CONTENT:END -->
291
277
  </auro-accordion>
292
278
 
293
- ### Combinations and Slots
279
+ ### Example using Hawaiian Time Zone
294
280
 
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.
281
+ Example using `2022-07-14T08:00:00-10:00` with Hawaii `(-10:00)` time zone.
296
282
 
297
283
  <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>
284
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/hawaii-plus-minus.html) -->
285
+ <!-- The below content is automatically added from ../apiExamples/hawaii-plus-minus.html -->
286
+ <auro-datetime type="tzTime" setDate="2022-07-16T08:00:00-10:00"></auro-datetime><br>
287
+ <auro-datetime type="tzDate" setDate="2022-07-16T08:00:00-10:00"></auro-datetime>
307
288
  <!-- AURO-GENERATED-CONTENT:END -->
308
289
  </div>
309
290
  <auro-accordion alignRight>
310
291
  <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 -->
292
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/hawaii-plus-minus.html) -->
293
+ <!-- The below code snippet is automatically added from ../apiExamples/hawaii-plus-minus.html -->
313
294
 
314
295
  ```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>
296
+ <auro-datetime type="tzTime" setDate="2022-07-16T08:00:00-10:00"></auro-datetime><br>
297
+ <auro-datetime type="tzDate" setDate="2022-07-16T08:00:00-10:00"></auro-datetime>
322
298
  ```
323
299
  <!-- AURO-GENERATED-CONTENT:END -->
324
- </auro-accordion>
300
+ </auro-accordion>
package/demo/auro-datetime.min.js CHANGED
@@ -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,10 @@ 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 custom element is for the purposes of providing an easy to use date and time API.
116
+ * @customElement auro-datetime
109
117
  *
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
118
  * @slot pre - Content that comes before the `post` content
118
119
  * @slot post - Content that comes after the `pre` content
119
120
  */
@@ -155,13 +156,46 @@ class AuroDatetime extends i {
155
156
  static get properties() {
156
157
  return {
157
158
  // ...super.properties,
159
+
160
+ /**
161
+ * Capitalize AM or PM designation
162
+ */
163
+ cap: { type: Boolean },
164
+
165
+ /**
166
+ * Defines format of month
167
+ * @type {'short' | 'long'}
168
+ * @default {'short'}
169
+ */
170
+ month: { type: String },
171
+
172
+ /**
173
+ * Pass in string to set date
174
+ */
175
+ setDate: { type: String },
176
+
177
+ /**
178
+ * Pass in string to define [timeZone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)
179
+ */
180
+ timeZone: { type: String },
181
+
182
+ /**
183
+ * Defines type of data to render
184
+ * @type {'date' | 'time' | 'year' | 'month' | 'weekday' | 'day' | 'numeric' | 'tzDate' | 'tzTime'}
185
+ */
158
186
  type: { type: String },
187
+
188
+ /**
189
+ * Pass in ISO 8601 UTC formatted time code
190
+ */
159
191
  utc: { type: String },
192
+
193
+ /**
194
+ * Defines format of weekday
195
+ * @type {'short' | 'long'}
196
+ * @default {'short'}
197
+ */
160
198
  weekday: { type: String },
161
- month: { type: String },
162
- timeZone: { type: String },
163
- setDate: { type: String },
164
- cap: { type: Boolean },
165
199
  };
166
200
  }
167
201
 
package/demo/index.md CHANGED
@@ -1,39 +1,37 @@
1
1
  <!--
2
- The index.md file is a compiled document. No edits should be made directly to this file.
3
- README.md is created by running `npm run build:docs`.
4
- This file is generated based on a template fetched from `./docs/partials/index.md`
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=../docs/partials/description.md) -->
10
- <!-- The below content is automatically added from ../docs/partials/description.md -->
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
- ## auro-datetime 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 -->
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
- ## Example(s)
24
-
25
- ### Basic Date
26
-
23
+ ## Basic Date
24
+
27
25
  <div class="exampleWrapper">
28
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic.html) -->
29
- <!-- The below content is automatically added from ../apiExamples/basic.html -->
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=../apiExamples/basic.html) -->
36
- <!-- The below code snippet is automatically added from ../apiExamples/basic.html -->
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
- ### Basic Time
45
-
42
+ ## Basic Time
43
+
46
44
  <div class="exampleWrapper">
47
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basicTime.html) -->
48
- <!-- The below content is automatically added from ../apiExamples/basicTime.html -->
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=../apiExamples/basicTime.html) -->
55
- <!-- The below code snippet is automatically added from ../apiExamples/basicTime.html -->
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
+
package/dist/auro-datetime-Dzbnt26-.js ADDED
@@ -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.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,196 @@
1
- import { LitElement, html } from 'lit';
2
1
 
3
- 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,true);}elementMatch(e,t){const a=t.toLowerCase();return e.tagName.toLowerCase()===a||e.hasAttribute(a)}}class s extends LitElement{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 html`
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
- export { s as AuroDatetime };
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
+ *
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
+ * - `register(name?: string = "auro-datetime") => void`: This will register this element with the browser.
132
+ */
133
+ "auro-datetime": Partial<AuroDatetimeProps & BaseProps<AuroDatetime> & BaseEvents>;
134
+ }
135
+
136
+ export type CustomCssProperties = {
137
+
138
+ }
139
+
140
+
141
+ declare module 'react' {
142
+ namespace JSX {
143
+ interface IntrinsicElements extends CustomElements {}
144
+ }
145
+
146
+ }
147
+
148
+ declare module 'preact' {
149
+ namespace JSX {
150
+ interface IntrinsicElements extends CustomElements {}
151
+ }
152
+
153
+ }
154
+
155
+ declare module '@builder.io/qwik' {
156
+ namespace JSX {
157
+ interface IntrinsicElements extends CustomElements {}
158
+ }
159
+
160
+ }
161
+
162
+ declare module '@stencil/core' {
163
+ namespace JSX {
164
+ interface IntrinsicElements extends CustomElements {}
165
+ }
166
+
167
+ }
168
+
169
+ declare module 'hono/jsx' {
170
+ namespace JSX {
171
+ interface IntrinsicElements extends CustomElements {}
172
+ }
173
+
174
+ }
175
+
176
+ declare module 'react-native' {
177
+ namespace JSX {
178
+ interface IntrinsicElements extends CustomElements {}
179
+ }
180
+
181
+ }
182
+
183
+ declare global {
184
+ namespace JSX {
185
+ interface IntrinsicElements extends CustomElements {}
186
+ }
187
+
188
+ }
189
+ declare global {
190
+ namespace svelteHTML {
191
+ interface IntrinsicElements extends CustomElements {}
192
+ }
193
+ }
194
+
195
+
196
+ export { AuroDatetime } from "./index.js";
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- export{A as AuroDatetime}from"./auro-datetime-CpzZl80P.js";import"lit";
1
+ export{A as AuroDatetime}from"./auro-datetime-Dzbnt26-.js";import"lit";
package/dist/registered.js CHANGED
@@ -1 +1 @@
1
- import{A as r}from"./auro-datetime-CpzZl80P.js";import"lit";r.register();
1
+ import{A as r}from"./auro-datetime-Dzbnt26-.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-pr69.1",
10
+ "version": "0.0.0-pr71.0",
11
11
  "description": "auro-datetime HTML custom element",
12
12
  "repository": {
13
13
  "type": "git",
@@ -24,9 +24,9 @@
24
24
  "lit": "^3.3.1"
25
25
  },
26
26
  "devDependencies": {
27
- "@aurodesignsystem/auro-cli": "^3.0.3",
27
+ "@aurodesignsystem/auro-cli": "^3.4.1",
28
28
  "@aurodesignsystem/auro-config": "^1.3.1",
29
- "@aurodesignsystem/auro-library": "^5.5.3",
29
+ "@aurodesignsystem/auro-library": "^5.5.4",
30
30
  "husky": "^9.1.7"
31
31
  },
32
32
  "browserslist": [
@@ -60,7 +60,11 @@
60
60
  "exports": {
61
61
  "./package.json": "./package.json",
62
62
  "./readme.md": "./README.md",
63
- ".": "./dist/registered.js",
63
+ ".": {
64
+ "module": "./dist/registered.js",
65
+ "types": "./dist/index.d.ts",
66
+ "default": "./dist/registered.js"
67
+ },
64
68
  "./demo/*.md": "./demo/*.md",
65
69
  "./demo/*.js": "./demo/*.min.js",
66
70
  "./class": {
@@ -76,5 +80,6 @@
76
80
  "README.md",
77
81
  "LICENSE",
78
82
  "NOTICE"
79
- ]
83
+ ],
84
+ "customElements": "custom-elements.json"
80
85
  }
package/dist/auro-datetime-CpzZl80P.js DELETED
@@ -1,6 +0,0 @@
1
- import{LitElement as e,html as t}from"lit";class a{registerComponent(e,t){customElements.get(e)||customElements.define(e,class extends t{})}closestElement(e,t=this,a=(t,s=t&&t.closest(e))=>t&&t!==document&&t!==window?s||a(t.getRootNode().host):null){return a(t)}handleComponentTagRename(e,t){const a=t.toLowerCase();e.tagName.toLowerCase()!==a&&e.setAttribute(a,!0)}elementMatch(e,t){const a=t.toLowerCase();return e.tagName.toLowerCase()===a||e.hasAttribute(a)}}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};