@aurodesignsystem-dev/auro-datetime 0.0.0-pr71.1 → 0.0.0-pr71.3
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/demo/api.md +8 -6
- package/demo/auro-datetime.min.js +10 -5
- package/dist/auro-datetime-C2O0ACdc.js +6 -0
- package/dist/index.d.ts +2 -1
- package/dist/index.js +1 -1
- package/dist/registered.js +1 -1
- package/package.json +2 -2
- package/dist/auro-datetime-Dzbnt26-.js +0 -6
package/demo/api.md
CHANGED
|
@@ -1,25 +1,27 @@
|
|
|
1
1
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
|
|
2
2
|
<!-- The below content is automatically added from ./../docs/api.md -->
|
|
3
3
|
|
|
4
|
-
# auro-datetime
|
|
4
|
+
# auro-datetime
|
|
5
|
+
|
|
6
|
+
The `auro-datetime` custom element is for the purposes of providing an easy to use date and time API.
|
|
5
7
|
|
|
6
8
|
### Properties & Attributes
|
|
7
9
|
|
|
8
10
|
| Properties | Attributes | Modifiers | Type | Default | Description |
|
|
9
11
|
| ---------- | ---------- | --------- | ------------------------------------------------------------------------------------------------ | ------- | ------------------------------------------------------------------------------------------------- |
|
|
10
12
|
| cap | cap | | boolean | | Capitalize AM or PM designation |
|
|
11
|
-
| month | month | |
|
|
13
|
+
| month | month | | `short` \| `long` | `short` | Defines format of month |
|
|
12
14
|
| setDate | setDate | | string | | Pass in string to set date |
|
|
13
15
|
| timeZone | timeZone | | string | | Pass in string to define [timeZone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) |
|
|
14
16
|
| type | type | | `date` \| `time` \| `year` \| `month` \| `weekday` \| `day` \| `numeric` \| `tzDate` \| `tzTime` | | Defines type of data to render |
|
|
15
17
|
| utc | utc | | string | | Pass in ISO 8601 UTC formatted time code |
|
|
16
|
-
| weekday | weekday | |
|
|
18
|
+
| weekday | weekday | | `short` \| `long` | `short` | Defines format of weekday |
|
|
17
19
|
|
|
18
20
|
### Methods
|
|
19
21
|
|
|
20
|
-
| Name | Parameters
|
|
21
|
-
| -------- |
|
|
22
|
-
| register | `name` (string) - The name of element that you want to register
|
|
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. |
|
|
23
25
|
|
|
24
26
|
### Slots
|
|
25
27
|
|
|
@@ -113,6 +113,7 @@ const t=globalThis,i$1=t.trustedTypes,s$1=i$1?i$1.createPolicy("lit-html",{creat
|
|
|
113
113
|
|
|
114
114
|
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
|
|
115
115
|
/**
|
|
116
|
+
* The `auro-datetime` custom element is for the purposes of providing an easy to use date and time API.
|
|
116
117
|
* @customElement auro-datetime
|
|
117
118
|
*
|
|
118
119
|
* @slot pre - Content that comes before the `post` content
|
|
@@ -124,8 +125,7 @@ class AuroDatetime extends i {
|
|
|
124
125
|
constructor() {
|
|
125
126
|
super();
|
|
126
127
|
|
|
127
|
-
this.
|
|
128
|
-
this.month = "short";
|
|
128
|
+
this.privateDefaults();
|
|
129
129
|
|
|
130
130
|
/**
|
|
131
131
|
* @private
|
|
@@ -133,6 +133,11 @@ class AuroDatetime extends i {
|
|
|
133
133
|
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
134
134
|
}
|
|
135
135
|
|
|
136
|
+
privateDefaults() {
|
|
137
|
+
this.weekday = "short";
|
|
138
|
+
this.month = "short";
|
|
139
|
+
}
|
|
140
|
+
|
|
136
141
|
connectedCallback() {
|
|
137
142
|
super.connectedCallback();
|
|
138
143
|
|
|
@@ -165,7 +170,7 @@ class AuroDatetime extends i {
|
|
|
165
170
|
/**
|
|
166
171
|
* Defines format of month
|
|
167
172
|
* @type {'short' | 'long'}
|
|
168
|
-
* @default
|
|
173
|
+
* @default 'short'
|
|
169
174
|
*/
|
|
170
175
|
month: { type: String },
|
|
171
176
|
|
|
@@ -193,7 +198,7 @@ class AuroDatetime extends i {
|
|
|
193
198
|
/**
|
|
194
199
|
* Defines format of weekday
|
|
195
200
|
* @type {'short' | 'long'}
|
|
196
|
-
* @default
|
|
201
|
+
* @default 'short'
|
|
197
202
|
*/
|
|
198
203
|
weekday: { type: String },
|
|
199
204
|
};
|
|
@@ -201,7 +206,7 @@ class AuroDatetime extends i {
|
|
|
201
206
|
|
|
202
207
|
/**
|
|
203
208
|
* This will register this element with the browser.
|
|
204
|
-
* @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.
|
|
205
210
|
*
|
|
206
211
|
* @example
|
|
207
212
|
* AuroDatetime.register("custom-datetime") // this will register this element to <custom-datetime/>
|
|
@@ -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.privateDefaults(),this.runtimeUtils=new a}privateDefaults(){this.weekday="short",this.month="short"}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
|
@@ -103,7 +103,7 @@ export type AuroDatetimeProps = {
|
|
|
103
103
|
|
|
104
104
|
|
|
105
105
|
/**
|
|
106
|
-
*
|
|
106
|
+
* The `auro-datetime` custom element is for the purposes of providing an easy to use date and time API.
|
|
107
107
|
*
|
|
108
108
|
* ## Attributes & Properties
|
|
109
109
|
*
|
|
@@ -128,6 +128,7 @@ export type AuroDatetimeProps = {
|
|
|
128
128
|
*
|
|
129
129
|
* Methods that can be called to access component functionality.
|
|
130
130
|
*
|
|
131
|
+
* - `privateDefaults() => void`: undefined
|
|
131
132
|
* - `register(name?: string = "auro-datetime") => void`: This will register this element with the browser.
|
|
132
133
|
*/
|
|
133
134
|
"auro-datetime": Partial<AuroDatetimeProps & BaseProps<AuroDatetime> & BaseEvents>;
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{A as AuroDatetime}from"./auro-datetime-
|
|
1
|
+
export{A as AuroDatetime}from"./auro-datetime-C2O0ACdc.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-C2O0ACdc.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-pr71.
|
|
10
|
+
"version": "0.0.0-pr71.3",
|
|
11
11
|
"description": "auro-datetime HTML custom element",
|
|
12
12
|
"repository": {
|
|
13
13
|
"type": "git",
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"lit": "^3.3.1"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
|
-
"@aurodesignsystem/auro-cli": "^3.4.
|
|
27
|
+
"@aurodesignsystem/auro-cli": "^3.4.2",
|
|
28
28
|
"@aurodesignsystem/auro-config": "^1.3.1",
|
|
29
29
|
"@aurodesignsystem/auro-library": "^5.5.4",
|
|
30
30
|
"husky": "^9.1.7"
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import{LitElement as e,html as t}from"lit";class a{registerComponent(e,t){customElements.get(e)||customElements.define(e,class extends t{})}closestElement(e,t=this,a=(t,s=t&&t.closest(e))=>t&&t!==document&&t!==window?s||a(t.getRootNode().host):null){return a(t)}handleComponentTagRename(e,t){const a=t.toLowerCase();e.tagName.toLowerCase()!==a&&e.setAttribute(a,!0)}elementMatch(e,t){const a=t.toLowerCase();return e.tagName.toLowerCase()===a||e.hasAttribute(a)}getSlotText(e,t){const a=e.shadowRoot?.querySelector(`slot[name="${t}"]`);return(a?.assignedNodes({flatten:!0})||[]).map(e=>e.textContent?.trim()).join(" ").trim()||null}}class s extends e{constructor(){super(),this.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};
|