@aurodesignsystem-dev/auro-datetime 0.0.0-pr78.0 → 0.0.0-pr82.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/demo/api.md +60 -9
- package/demo/auro-datetime.min.js +21 -13
- package/dist/auro-datetime-BobtS5w7.js +6 -0
- package/dist/index.d.ts +122 -66
- package/dist/index.js +1 -1
- package/dist/registered.js +1 -1
- package/package.json +4 -4
- package/dist/auro-datetime-jIlTbbhr.js +0 -6
package/demo/api.md
CHANGED
|
@@ -7,15 +7,16 @@ The `auro-datetime` element is for the purposes of providing an easy to use date
|
|
|
7
7
|
|
|
8
8
|
### Properties & Attributes
|
|
9
9
|
|
|
10
|
-
| Properties | Attributes | Modifiers | Type | Default | Description
|
|
11
|
-
| ---------- | ---------- | --------- | ------------------------------------------------------------------------------------------------ | ------- |
|
|
12
|
-
| cap | cap | | boolean | | Capitalize AM or PM designation
|
|
13
|
-
|
|
|
14
|
-
|
|
|
15
|
-
|
|
|
16
|
-
|
|
|
17
|
-
|
|
|
18
|
-
|
|
|
10
|
+
| Properties | Attributes | Modifiers | Type | Default | Description |
|
|
11
|
+
| ---------- | ---------- | --------- | ------------------------------------------------------------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
|
|
12
|
+
| cap | cap | | boolean | | Capitalize AM or PM designation |
|
|
13
|
+
| locale | locale | | string | `en-US` | BCP 47 language tag for locale-aware date/time formatting (e.g. 'en-GB', 'de-DE', 'ja-JP').<br>Defaults to 'en-US' when not set. |
|
|
14
|
+
| month | month | | `short` \| `long` | `short` | Defines format of month |
|
|
15
|
+
| setDate | setDate | | string | | Pass in string to set date |
|
|
16
|
+
| timeZone | timeZone | | string | | Pass in string to define [timeZone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) |
|
|
17
|
+
| type | type | | `date` \| `time` \| `year` \| `month` \| `weekday` \| `day` \| `numeric` \| `tzDate` \| `tzTime` | | Defines type of data to render |
|
|
18
|
+
| utc | utc | | string | | Pass in ISO 8601 UTC formatted time code |
|
|
19
|
+
| weekday | weekday | | `short` \| `long` | `short` | Defines format of weekday |
|
|
19
20
|
|
|
20
21
|
### Methods
|
|
21
22
|
|
|
@@ -92,6 +93,56 @@ Using the `cap` attribute will return the basic time string with a capitalized `
|
|
|
92
93
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
93
94
|
</auro-accordion>
|
|
94
95
|
|
|
96
|
+
### International Date Formatting
|
|
97
|
+
|
|
98
|
+
Use the `locale` attribute with a [BCP 47 language tag](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument) to render dates and times in non-North American formats. When omitted, the component defaults to `en-US` formatting.
|
|
99
|
+
|
|
100
|
+
#### Locale with type="date"
|
|
101
|
+
|
|
102
|
+
<div class="exampleWrapper">
|
|
103
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/locale-date.html) -->
|
|
104
|
+
<!-- The below content is automatically added from ../apiExamples/locale-date.html -->
|
|
105
|
+
<auro-datetime type="date" locale="en-GB" utc="2020-09-22T01:38:22Z"></auro-datetime><br>
|
|
106
|
+
<auro-datetime type="date" locale="de-DE" utc="2020-09-22T01:38:22Z"></auro-datetime><br>
|
|
107
|
+
<auro-datetime type="date" locale="ja-JP" utc="2020-09-22T01:38:22Z"></auro-datetime>
|
|
108
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
109
|
+
</div>
|
|
110
|
+
<auro-accordion alignRight>
|
|
111
|
+
<span slot="trigger">See code</span>
|
|
112
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/locale-date.html) -->
|
|
113
|
+
<!-- The below code snippet is automatically added from ../apiExamples/locale-date.html -->
|
|
114
|
+
|
|
115
|
+
```html
|
|
116
|
+
<auro-datetime type="date" locale="en-GB" utc="2020-09-22T01:38:22Z"></auro-datetime><br>
|
|
117
|
+
<auro-datetime type="date" locale="de-DE" utc="2020-09-22T01:38:22Z"></auro-datetime><br>
|
|
118
|
+
<auro-datetime type="date" locale="ja-JP" utc="2020-09-22T01:38:22Z"></auro-datetime>
|
|
119
|
+
```
|
|
120
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
121
|
+
</auro-accordion>
|
|
122
|
+
|
|
123
|
+
#### Locale with type="numeric"
|
|
124
|
+
|
|
125
|
+
<div class="exampleWrapper">
|
|
126
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/locale-numeric.html) -->
|
|
127
|
+
<!-- The below content is automatically added from ../apiExamples/locale-numeric.html -->
|
|
128
|
+
<auro-datetime type="numeric" locale="en-GB" utc="2020-09-22T01:38:22Z"></auro-datetime><br>
|
|
129
|
+
<auro-datetime type="numeric" locale="de-DE" utc="2020-09-22T01:38:22Z"></auro-datetime><br>
|
|
130
|
+
<auro-datetime type="numeric" locale="ja-JP" utc="2020-09-22T01:38:22Z"></auro-datetime>
|
|
131
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
132
|
+
</div>
|
|
133
|
+
<auro-accordion alignRight>
|
|
134
|
+
<span slot="trigger">See code</span>
|
|
135
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/locale-numeric.html) -->
|
|
136
|
+
<!-- The below code snippet is automatically added from ../apiExamples/locale-numeric.html -->
|
|
137
|
+
|
|
138
|
+
```html
|
|
139
|
+
<auro-datetime type="numeric" locale="en-GB" utc="2020-09-22T01:38:22Z"></auro-datetime><br>
|
|
140
|
+
<auro-datetime type="numeric" locale="de-DE" utc="2020-09-22T01:38:22Z"></auro-datetime><br>
|
|
141
|
+
<auro-datetime type="numeric" locale="ja-JP" utc="2020-09-22T01:38:22Z"></auro-datetime>
|
|
142
|
+
```
|
|
143
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
144
|
+
</auro-accordion>
|
|
145
|
+
|
|
95
146
|
### Long Month and Weekday
|
|
96
147
|
|
|
97
148
|
Use the `month="long"` attribute to display the full month name, and `weekday="long"` to display the full weekday name.
|
|
@@ -86,26 +86,26 @@ class AuroLibraryRuntimeUtils {
|
|
|
86
86
|
* Copyright 2019 Google LLC
|
|
87
87
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
88
88
|
*/
|
|
89
|
-
const t$1=globalThis,e$2=t$1.ShadowRoot&&(void 0===t$1.ShadyCSS||t$1.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$2=Symbol(),o$3=new WeakMap;let n$2 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$2)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$2&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$3.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$3.set(s,t));}return t}toString(){return this.cssText}};const r$2=t=>new n$2("string"==typeof t?t:t+"",void 0,s$2),S$1=(s,o)=>{if(e$2)s.adoptedStyleSheets=o.map(
|
|
89
|
+
const t$1=globalThis,e$2=t$1.ShadowRoot&&(void 0===t$1.ShadyCSS||t$1.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$2=Symbol(),o$3=new WeakMap;let n$2 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$2)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$2&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$3.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$3.set(s,t));}return t}toString(){return this.cssText}};const r$2=t=>new n$2("string"==typeof t?t:t+"",void 0,s$2),S$1=(s,o)=>{if(e$2)s.adoptedStyleSheets=o.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const e of o){const o=document.createElement("style"),n=t$1.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$2=e$2?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$2(e)})(t):t;
|
|
90
90
|
|
|
91
91
|
/**
|
|
92
92
|
* @license
|
|
93
93
|
* Copyright 2017 Google LLC
|
|
94
94
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
95
|
-
*/const{is:i$2,defineProperty:e$1,getOwnPropertyDescriptor:h$1,getOwnPropertyNames:r$1,getOwnPropertySymbols:o$2,getPrototypeOf:n$1}=Object,a$1=globalThis,c$1=a$1.trustedTypes,l$1=c$1?c$1.emptyScript:"",p$1=a$1.reactiveElementPolyfillSupport,d$1=(t,s)=>t,u$1={toAttribute(t,s){switch(s){case Boolean:t=t?l$1:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f$1=(t,s)=>!i$2(t,s),b={attribute:true,type:String,converter:u$1,reflect:false,useDefault:false,hasChanged:f$1};Symbol.metadata??=Symbol("metadata"),a$1.litPropertyMetadata??=new WeakMap;let y$1 = class y extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=b){if(s.state&&(s.attribute=false),this._$Ei(),this.prototype.hasOwnProperty(t)&&((s=Object.create(s)).wrapped=true),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),h=this.getPropertyDescriptor(t,i,s);void 0!==h&&e$1(this.prototype,t,h);}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=h$1(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get:e,set(s){const h=e?.call(this);r?.call(this,s),this.requestUpdate(t,h,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??b}static _$Ei(){if(this.hasOwnProperty(d$1("elementProperties")))return;const t=n$1(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$1("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d$1("properties"))){const t=this.properties,s=[...r$1(t),...o$2(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$2(s));}else void 0!==s&&i.push(c$2(s));return i}static _$Eu(t,s){const i=s.attribute;return false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise(
|
|
95
|
+
*/const{is:i$2,defineProperty:e$1,getOwnPropertyDescriptor:h$1,getOwnPropertyNames:r$1,getOwnPropertySymbols:o$2,getPrototypeOf:n$1}=Object,a$1=globalThis,c$1=a$1.trustedTypes,l$1=c$1?c$1.emptyScript:"",p$1=a$1.reactiveElementPolyfillSupport,d$1=(t,s)=>t,u$1={toAttribute(t,s){switch(s){case Boolean:t=t?l$1:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f$1=(t,s)=>!i$2(t,s),b$1={attribute:true,type:String,converter:u$1,reflect:false,useDefault:false,hasChanged:f$1};Symbol.metadata??=Symbol("metadata"),a$1.litPropertyMetadata??=new WeakMap;let y$1 = class y extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=b$1){if(s.state&&(s.attribute=false),this._$Ei(),this.prototype.hasOwnProperty(t)&&((s=Object.create(s)).wrapped=true),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),h=this.getPropertyDescriptor(t,i,s);void 0!==h&&e$1(this.prototype,t,h);}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=h$1(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get:e,set(s){const h=e?.call(this);r?.call(this,s),this.requestUpdate(t,h,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??b$1}static _$Ei(){if(this.hasOwnProperty(d$1("elementProperties")))return;const t=n$1(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$1("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d$1("properties"))){const t=this.properties,s=[...r$1(t),...o$2(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$2(s));}else void 0!==s&&i.push(c$2(s));return i}static _$Eu(t,s){const i=s.attribute;return false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(t=>t(this));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S$1(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach(t=>t.hostConnected?.());}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach(t=>t.hostDisconnected?.());}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$ET(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&true===i.reflect){const h=(void 0!==i.converter?.toAttribute?i.converter:u$1).toAttribute(s,i.type);this._$Em=t,null==h?this.removeAttribute(e):this.setAttribute(e,h),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u$1;this._$Em=e;const r=h.fromAttribute(s,t.type);this[e]=r??this._$Ej?.get(e)??r,this._$Em=null;}}requestUpdate(t,s,i,e=false,h){if(void 0!==t){const r=this.constructor;if(false===e&&(h=this[t]),i??=r.getPropertyOptions(t),!((i.hasChanged??f$1)(h,s)||i.useDefault&&i.reflect&&h===this._$Ej?.get(t)&&!this.hasAttribute(r._$Eu(t,i))))return;this.C(t,s,i);} false===this.isUpdatePending&&(this._$ES=this._$EP());}C(t,s,{useDefault:i,reflect:e,wrapped:h},r){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,r??s??this[t]),true!==h||void 0!==r)||(this._$AL.has(t)||(this.hasUpdated||i||(s=void 0),this._$AL.set(t,s)),true===e&&this._$Em!==t&&(this._$Eq??=new Set).add(t));}async _$EP(){this.isUpdatePending=true;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t){const{wrapped:t}=i,e=this[s];true!==t||this._$AL.has(s)||void 0===e||this.C(s,void 0,i,e);}}let t=false;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach(t=>t.hostUpdate?.()),this.update(s)):this._$EM();}catch(s){throw t=false,this._$EM(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach(t=>t.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=true,this.firstUpdated(t)),this.updated(t);}_$EM(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return true}update(t){this._$Eq&&=this._$Eq.forEach(t=>this._$ET(t,this[t])),this._$EM();}updated(t){}firstUpdated(t){}};y$1.elementStyles=[],y$1.shadowRootOptions={mode:"open"},y$1[d$1("elementProperties")]=new Map,y$1[d$1("finalized")]=new Map,p$1?.({ReactiveElement:y$1}),(a$1.reactiveElementVersions??=[]).push("2.1.2");
|
|
96
96
|
|
|
97
97
|
/**
|
|
98
98
|
* @license
|
|
99
99
|
* Copyright 2017 Google LLC
|
|
100
100
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
101
101
|
*/
|
|
102
|
-
const t=globalThis,i$1=t
|
|
102
|
+
const t=globalThis,i$1=t=>t,s$1=t.trustedTypes,e=s$1?s$1.createPolicy("lit-html",{createHTML:t=>t}):void 0,h="$lit$",o$1=`lit$${Math.random().toFixed(9).slice(2)}$`,n="?"+o$1,r=`<${n}>`,l=document,c=()=>l.createComment(""),a=t=>null===t||"object"!=typeof t&&"function"!=typeof t,u=Array.isArray,d=t=>u(t)||"function"==typeof t?.[Symbol.iterator],f="[ \t\n\f\r]",v=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,_=/-->/g,m=/>/g,p=RegExp(`>|${f}(?:([^\\s"'>=/]+)(${f}*=${f}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),g=/'/g,$=/"/g,y=/^(?:script|style|textarea|title)$/i,x=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),b=x(1),E=Symbol.for("lit-noChange"),A=Symbol.for("lit-nothing"),C=new WeakMap,P=l.createTreeWalker(l,129);function V(t,i){if(!u(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==e?e.createHTML(i):i}const N=(t,i)=>{const s=t.length-1,e=[];let n,l=2===i?"<svg>":3===i?"<math>":"",c=v;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,f=0;for(;f<s.length&&(c.lastIndex=f,u=c.exec(s),null!==u);)f=c.lastIndex,c===v?"!--"===u[1]?c=_:void 0!==u[1]?c=m:void 0!==u[2]?(y.test(u[2])&&(n=RegExp("</"+u[2],"g")),c=p):void 0!==u[3]&&(c=p):c===p?">"===u[0]?(c=n??v,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?p:'"'===u[3]?$:g):c===$||c===g?c=p:c===_||c===m?c=v:(c=p,n=void 0);const x=c===p&&t[i+1].startsWith("/>")?" ":"";l+=c===v?s+r:d>=0?(e.push(a),s.slice(0,d)+h+s.slice(d)+o$1+x):s+o$1+(-2===d?i:x);}return [V(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),e]};class S{constructor({strings:t,_$litType$:i},e){let r;this.parts=[];let l=0,a=0;const u=t.length-1,d=this.parts,[f,v]=N(t,i);if(this.el=S.createElement(f,e),P.currentNode=this.el.content,2===i||3===i){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=P.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(h)){const i=v[a++],s=r.getAttribute(t).split(o$1),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:l,name:e[2],strings:s,ctor:"."===e[1]?I:"?"===e[1]?L:"@"===e[1]?z:H}),r.removeAttribute(t);}else t.startsWith(o$1)&&(d.push({type:6,index:l}),r.removeAttribute(t));if(y.test(r.tagName)){const t=r.textContent.split(o$1),i=t.length-1;if(i>0){r.textContent=s$1?s$1.emptyScript:"";for(let s=0;s<i;s++)r.append(t[s],c()),P.nextNode(),d.push({type:2,index:++l});r.append(t[i],c());}}}else if(8===r.nodeType)if(r.data===n)d.push({type:2,index:l});else {let t=-1;for(;-1!==(t=r.data.indexOf(o$1,t+1));)d.push({type:7,index:l}),t+=o$1.length-1;}l++;}}static createElement(t,i){const s=l.createElement("template");return s.innerHTML=t,s}}function M(t,i,s=t,e){if(i===E)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=a(i)?void 0:i._$litDirective$;return h?.constructor!==o&&(h?._$AO?.(false),void 0===o?h=void 0:(h=new o(t),h._$AT(t,s,e)),void 0!==e?(s._$Co??=[])[e]=h:s._$Cl=h),void 0!==h&&(i=M(t,h._$AS(t,i.values),h,e)),i}class R{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:i},parts:s}=this._$AD,e=(t?.creationScope??l).importNode(i,true);P.currentNode=e;let h=P.nextNode(),o=0,n=0,r=s[0];for(;void 0!==r;){if(o===r.index){let i;2===r.type?i=new k(h,h.nextSibling,this,t):1===r.type?i=new r.ctor(h,r.name,r.strings,this,t):6===r.type&&(i=new Z(h,this,t)),this._$AV.push(i),r=s[++n];}o!==r?.index&&(h=P.nextNode(),o++);}return P.currentNode=l,e}p(t){let i=0;for(const s of this._$AV) void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}}class k{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=A,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cv=e?.isConnected??true;}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t?.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=M(this,t,i),a(t)?t===A||null==t||""===t?(this._$AH!==A&&this._$AR(),this._$AH=A):t!==this._$AH&&t!==E&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):d(t)?this.k(t):this._(t);}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t));}_(t){this._$AH!==A&&a(this._$AH)?this._$AA.nextSibling.data=t:this.T(l.createTextNode(t)),this._$AH=t;}$(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=S.createElement(V(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new R(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=C.get(t.strings);return void 0===i&&C.set(t.strings,i=new S(t)),i}k(t){u(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const h of t)e===i.length?i.push(s=new k(this.O(c()),this.O(c()),this,this.options)):s=i[e],s._$AI(h),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,s){for(this._$AP?.(false,true,s);t!==this._$AB;){const s=i$1(t).nextSibling;i$1(t).remove(),t=s;}}setConnected(t){ void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t));}}class H{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=A,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=h,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=A;}_$AI(t,i=this,s,e){const h=this.strings;let o=false;if(void 0===h)t=M(this,t,i,0),o=!a(t)||t!==this._$AH&&t!==E,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=M(this,e[s+n],i,n),r===E&&(r=this._$AH[n]),o||=!a(r)||r!==this._$AH[n],r===A?t=A:t!==A&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===A?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}}class I extends H{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===A?void 0:t;}}class L extends H{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==A);}}class z extends H{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=M(this,t,i,0)??A)===E)return;const s=this._$AH,e=t===A&&s!==A||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==A&&(s===A||e);e&&this.element.removeEventListener(this.name,this,s),h&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t);}}class Z{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){M(this,t);}}const B=t.litHtmlPolyfillSupport;B?.(S,k),(t.litHtmlVersions??=[]).push("3.3.2");const D=(t,i,s)=>{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new k(i.insertBefore(c(),t),t,void 0,s??{});}return h._$AI(t),h};
|
|
103
103
|
|
|
104
104
|
/**
|
|
105
105
|
* @license
|
|
106
106
|
* Copyright 2017 Google LLC
|
|
107
107
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
108
|
-
*/const s=globalThis;class i extends y$1{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const r=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=
|
|
108
|
+
*/const s=globalThis;class i extends y$1{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const r=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=D(r,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return E}}i._$litElement$=true,i["finalized"]=true,s.litElementHydrateSupport?.({LitElement:i});const o=s.litElementPolyfillSupport;o?.({LitElement:i});(s.litElementVersions??=[]).push("4.2.2");
|
|
109
109
|
|
|
110
110
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
111
111
|
// See LICENSE in the project root for license information.
|
|
@@ -167,6 +167,14 @@ class AuroDatetime extends i {
|
|
|
167
167
|
*/
|
|
168
168
|
cap: { type: Boolean },
|
|
169
169
|
|
|
170
|
+
/**
|
|
171
|
+
* BCP 47 language tag for locale-aware date/time formatting (e.g. 'en-GB', 'de-DE', 'ja-JP').
|
|
172
|
+
* Defaults to 'en-US' when not set.
|
|
173
|
+
* @type {string}
|
|
174
|
+
* @default 'en-US'
|
|
175
|
+
*/
|
|
176
|
+
locale: { type: String },
|
|
177
|
+
|
|
170
178
|
/**
|
|
171
179
|
* Defines format of month
|
|
172
180
|
* @type {'short' | 'long'}
|
|
@@ -236,7 +244,7 @@ class AuroDatetime extends i {
|
|
|
236
244
|
newDate = new Date(this.setDate);
|
|
237
245
|
}
|
|
238
246
|
|
|
239
|
-
return newDate.toLocaleString("en-us", this.dateTemplate);
|
|
247
|
+
return newDate.toLocaleString(this.locale || "en-us", this.dateTemplate);
|
|
240
248
|
}
|
|
241
249
|
|
|
242
250
|
/**
|
|
@@ -272,7 +280,7 @@ class AuroDatetime extends i {
|
|
|
272
280
|
this.template.weekday = this.template;
|
|
273
281
|
}
|
|
274
282
|
|
|
275
|
-
return newDate.toLocaleString("en-us", this.template);
|
|
283
|
+
return newDate.toLocaleString(this.locale || "en-us", this.template);
|
|
276
284
|
}
|
|
277
285
|
|
|
278
286
|
/**
|
|
@@ -292,7 +300,7 @@ class AuroDatetime extends i {
|
|
|
292
300
|
newDate = new Date(this.setDate);
|
|
293
301
|
}
|
|
294
302
|
|
|
295
|
-
return newDate.toLocaleString("en-us", this.dateTemplate);
|
|
303
|
+
return newDate.toLocaleString(this.locale || "en-us", this.dateTemplate);
|
|
296
304
|
}
|
|
297
305
|
|
|
298
306
|
/**
|
|
@@ -312,12 +320,12 @@ class AuroDatetime extends i {
|
|
|
312
320
|
|
|
313
321
|
if (this.cap) {
|
|
314
322
|
return newTime
|
|
315
|
-
.toLocaleString("en-us", this.timeTemplate)
|
|
323
|
+
.toLocaleString(this.locale || "en-us", this.timeTemplate)
|
|
316
324
|
.replace(/^0+/u, "");
|
|
317
325
|
}
|
|
318
326
|
|
|
319
327
|
return newTime
|
|
320
|
-
.toLocaleString("en-us", this.timeTemplate)
|
|
328
|
+
.toLocaleString(this.locale || "en-us", this.timeTemplate)
|
|
321
329
|
.replace(/^0+/u, "")
|
|
322
330
|
.toLowerCase();
|
|
323
331
|
}
|
|
@@ -334,16 +342,16 @@ class AuroDatetime extends i {
|
|
|
334
342
|
const newDateTime = new Date(scrubTimeZone);
|
|
335
343
|
|
|
336
344
|
if (this.cap) {
|
|
337
|
-
return newDateTime.toLocaleString("en-us", template).replace(/^0+/u, "");
|
|
345
|
+
return newDateTime.toLocaleString(this.locale || "en-us", template).replace(/^0+/u, "");
|
|
338
346
|
}
|
|
339
347
|
|
|
340
348
|
return newDateTime
|
|
341
|
-
.toLocaleString("en-us", template)
|
|
349
|
+
.toLocaleString(this.locale || "en-us", template)
|
|
342
350
|
.replace(/^0+/u, "")
|
|
343
351
|
.replace("AM", "am")
|
|
344
352
|
.replace("PM", "pm");
|
|
345
353
|
}
|
|
346
|
-
|
|
354
|
+
|
|
347
355
|
/**
|
|
348
356
|
* Internal function UI decision.
|
|
349
357
|
* @private
|
|
@@ -393,7 +401,7 @@ class AuroDatetime extends i {
|
|
|
393
401
|
|
|
394
402
|
// function that renders the HTML and CSS into the scope of the component
|
|
395
403
|
render() {
|
|
396
|
-
return
|
|
404
|
+
return b`
|
|
397
405
|
<slot name="pre"></slot>
|
|
398
406
|
<span class="yield">${this.whichDate()}</span>
|
|
399
407
|
<slot name="post"></slot>
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import{LitElement as e,html as t}from"lit";class a{registerComponent(e,t){customElements.get(e)||customElements.define(e,class extends t{})}closestElement(e,t=this,a=(t,s=t&&t.closest(e))=>t&&t!==document&&t!==window?s||a(t.getRootNode().host):null){return a(t)}handleComponentTagRename(e,t){const a=t.toLowerCase();e.tagName.toLowerCase()!==a&&e.setAttribute(a,!0)}elementMatch(e,t){const a=t.toLowerCase();return e.tagName.toLowerCase()===a||e.hasAttribute(a)}getSlotText(e,t){const a=e.shadowRoot?.querySelector(`slot[name="${t}"]`);return(a?.assignedNodes({flatten:!0})||[]).map(e=>e.textContent?.trim()).join(" ").trim()||null}}class s extends e{constructor(){super(),this._initializeDefaults()}_initializeDefaults(){this.weekday="short",this.month="short",this.runtimeUtils=new a}connectedCallback(){super.connectedCallback(),this.dateTemplate={weekday:this.weekday,year:"numeric",month:this.month,day:"numeric"},this.timeTemplate={hour:"2-digit",minute:"2-digit",timeZone:this.timeZone},this.template={}}static get properties(){return{cap:{type:Boolean},locale:{type:String},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(this.locale||"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(this.locale||"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(this.locale||"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(this.locale||"en-us",this.timeTemplate).replace(/^0+/u,""):e.toLocaleString(this.locale||"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(this.locale||"en-us",e).replace(/^0+/u,""):a.toLocaleString(this.locale||"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,4 +1,3 @@
|
|
|
1
|
-
|
|
2
1
|
import type { AuroDatetime } from "src/auro-datetime.js";
|
|
3
2
|
|
|
4
3
|
/**
|
|
@@ -21,13 +20,12 @@ import type { AuroDatetime } from "src/auro-datetime.js";
|
|
|
21
20
|
*/
|
|
22
21
|
export type ScopedElements<
|
|
23
22
|
Prefix extends string = "",
|
|
24
|
-
Suffix extends string = ""
|
|
23
|
+
Suffix extends string = "",
|
|
25
24
|
> = {
|
|
26
25
|
[Key in keyof CustomElements as `${Prefix}${Key}${Suffix}`]: CustomElements[Key];
|
|
27
26
|
};
|
|
28
27
|
|
|
29
28
|
type BaseProps<T extends HTMLElement> = {
|
|
30
|
-
|
|
31
29
|
/** Content added between the opening and closing tags of the element */
|
|
32
30
|
children?: any;
|
|
33
31
|
/** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
|
|
@@ -70,122 +68,180 @@ type BaseProps<T extends HTMLElement> = {
|
|
|
70
68
|
popovertarget?: "top" | "bottom" | "left" | "right" | "auto";
|
|
71
69
|
/** Specifies the action to be performed on a popover element being controlled by a control element. */
|
|
72
70
|
popovertargetaction?: "show" | "hide" | "toggle";
|
|
73
|
-
|
|
74
|
-
} ;
|
|
75
|
-
|
|
76
|
-
type BaseEvents = {
|
|
77
|
-
|
|
78
|
-
|
|
79
71
|
};
|
|
80
72
|
|
|
81
|
-
|
|
73
|
+
type BaseEvents = {};
|
|
82
74
|
|
|
83
75
|
export type AuroDatetimeProps = {
|
|
84
76
|
/** Capitalize AM or PM designation */
|
|
85
|
-
|
|
77
|
+
cap?: AuroDatetime["cap"];
|
|
78
|
+
/** BCP 47 language tag for locale-aware date/time formatting (e.g. 'en-GB', 'de-DE', 'ja-JP').
|
|
79
|
+
Defaults to 'en-US' when not set. */
|
|
80
|
+
locale?: AuroDatetime["locale"];
|
|
86
81
|
/** Defines format of month */
|
|
87
|
-
|
|
82
|
+
month?: AuroDatetime["month"];
|
|
88
83
|
/** Pass in string to set date */
|
|
89
|
-
|
|
84
|
+
setDate?: AuroDatetime["setDate"];
|
|
90
85
|
/** Pass in string to define [timeZone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) */
|
|
91
|
-
|
|
86
|
+
timeZone?: AuroDatetime["timeZone"];
|
|
92
87
|
/** Defines type of data to render */
|
|
93
|
-
|
|
88
|
+
type?: AuroDatetime["type"];
|
|
94
89
|
/** Pass in ISO 8601 UTC formatted time code */
|
|
95
|
-
|
|
90
|
+
utc?: AuroDatetime["utc"];
|
|
96
91
|
/** Defines format of weekday */
|
|
97
|
-
|
|
98
|
-
|
|
92
|
+
weekday?: AuroDatetime["weekday"];
|
|
93
|
+
};
|
|
99
94
|
|
|
100
|
-
|
|
95
|
+
export type AuroDatetimeSolidJsProps = {
|
|
96
|
+
/** Capitalize AM or PM designation */
|
|
97
|
+
"prop:cap"?: AuroDatetime["cap"];
|
|
98
|
+
/** BCP 47 language tag for locale-aware date/time formatting (e.g. 'en-GB', 'de-DE', 'ja-JP').
|
|
99
|
+
Defaults to 'en-US' when not set. */
|
|
100
|
+
"prop:locale"?: AuroDatetime["locale"];
|
|
101
|
+
/** Defines format of month */
|
|
102
|
+
"prop:month"?: AuroDatetime["month"];
|
|
103
|
+
/** Pass in string to set date */
|
|
104
|
+
"prop:setDate"?: AuroDatetime["setDate"];
|
|
105
|
+
/** Pass in string to define [timeZone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) */
|
|
106
|
+
"prop:timeZone"?: AuroDatetime["timeZone"];
|
|
107
|
+
/** Defines type of data to render */
|
|
108
|
+
"prop:type"?: AuroDatetime["type"];
|
|
109
|
+
/** Pass in ISO 8601 UTC formatted time code */
|
|
110
|
+
"prop:utc"?: AuroDatetime["utc"];
|
|
111
|
+
/** Defines format of weekday */
|
|
112
|
+
"prop:weekday"?: AuroDatetime["weekday"];
|
|
101
113
|
|
|
102
|
-
|
|
114
|
+
/** Set the innerHTML of the element */
|
|
115
|
+
innerHTML?: string;
|
|
116
|
+
/** Set the textContent of the element */
|
|
117
|
+
textContent?: string | number;
|
|
118
|
+
};
|
|
103
119
|
|
|
120
|
+
export type CustomElements = {
|
|
121
|
+
/**
|
|
122
|
+
* The `auro-datetime` element is for the purposes of providing an easy to use date and time API.
|
|
123
|
+
*
|
|
124
|
+
* ## Attributes & Properties
|
|
125
|
+
*
|
|
126
|
+
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
127
|
+
*
|
|
128
|
+
* - `cap`: Capitalize AM or PM designation
|
|
129
|
+
* - `locale`: BCP 47 language tag for locale-aware date/time formatting (e.g. 'en-GB', 'de-DE', 'ja-JP').
|
|
130
|
+
* Defaults to 'en-US' when not set.
|
|
131
|
+
* - `month`: Defines format of month
|
|
132
|
+
* - `setDate`: Pass in string to set date
|
|
133
|
+
* - `timeZone`: Pass in string to define [timeZone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)
|
|
134
|
+
* - `type`: Defines type of data to render
|
|
135
|
+
* - `utc`: Pass in ISO 8601 UTC formatted time code
|
|
136
|
+
* - `weekday`: Defines format of weekday
|
|
137
|
+
*
|
|
138
|
+
* ## Slots
|
|
139
|
+
*
|
|
140
|
+
* Areas where markup can be added to the component.
|
|
141
|
+
*
|
|
142
|
+
* - `post`: Content that comes after the `pre` content
|
|
143
|
+
* - `pre`: Content that comes before the `post` content
|
|
144
|
+
*
|
|
145
|
+
* ## Methods
|
|
146
|
+
*
|
|
147
|
+
* Methods that can be called to access component functionality.
|
|
148
|
+
*
|
|
149
|
+
* - `_initializeDefaults() => void`: undefined
|
|
150
|
+
* - `register(name?: string = "auro-datetime") => void`: This will register this element with the browser.
|
|
151
|
+
*/
|
|
152
|
+
"auro-datetime": Partial<
|
|
153
|
+
AuroDatetimeProps & BaseProps<AuroDatetime> & BaseEvents
|
|
154
|
+
>;
|
|
155
|
+
};
|
|
104
156
|
|
|
157
|
+
export type CustomElementsSolidJs = {
|
|
105
158
|
/**
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
159
|
+
* The `auro-datetime` element is for the purposes of providing an easy to use date and time API.
|
|
160
|
+
*
|
|
161
|
+
* ## Attributes & Properties
|
|
162
|
+
*
|
|
163
|
+
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
164
|
+
*
|
|
165
|
+
* - `cap`: Capitalize AM or PM designation
|
|
166
|
+
* - `locale`: BCP 47 language tag for locale-aware date/time formatting (e.g. 'en-GB', 'de-DE', 'ja-JP').
|
|
167
|
+
* Defaults to 'en-US' when not set.
|
|
168
|
+
* - `month`: Defines format of month
|
|
169
|
+
* - `setDate`: Pass in string to set date
|
|
170
|
+
* - `timeZone`: Pass in string to define [timeZone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)
|
|
171
|
+
* - `type`: Defines type of data to render
|
|
172
|
+
* - `utc`: Pass in ISO 8601 UTC formatted time code
|
|
173
|
+
* - `weekday`: Defines format of weekday
|
|
174
|
+
*
|
|
175
|
+
* ## Slots
|
|
176
|
+
*
|
|
177
|
+
* Areas where markup can be added to the component.
|
|
178
|
+
*
|
|
179
|
+
* - `post`: Content that comes after the `pre` content
|
|
180
|
+
* - `pre`: Content that comes before the `post` content
|
|
181
|
+
*
|
|
182
|
+
* ## Methods
|
|
183
|
+
*
|
|
184
|
+
* Methods that can be called to access component functionality.
|
|
185
|
+
*
|
|
186
|
+
* - `_initializeDefaults() => void`: undefined
|
|
187
|
+
* - `register(name?: string = "auro-datetime") => void`: This will register this element with the browser.
|
|
188
|
+
*/
|
|
189
|
+
"auro-datetime": Partial<
|
|
190
|
+
AuroDatetimeProps &
|
|
191
|
+
AuroDatetimeSolidJsProps &
|
|
192
|
+
BaseProps<AuroDatetime> &
|
|
193
|
+
BaseEvents
|
|
194
|
+
>;
|
|
195
|
+
};
|
|
136
196
|
|
|
137
|
-
export type CustomCssProperties = {
|
|
197
|
+
export type CustomCssProperties = {};
|
|
138
198
|
|
|
199
|
+
declare module "react" {
|
|
200
|
+
namespace JSX {
|
|
201
|
+
interface IntrinsicElements extends CustomElements {}
|
|
202
|
+
}
|
|
139
203
|
}
|
|
140
204
|
|
|
141
|
-
|
|
142
|
-
declare module 'react' {
|
|
205
|
+
declare module "preact" {
|
|
143
206
|
namespace JSX {
|
|
144
207
|
interface IntrinsicElements extends CustomElements {}
|
|
145
208
|
}
|
|
146
|
-
|
|
147
209
|
}
|
|
148
210
|
|
|
149
|
-
declare module
|
|
211
|
+
declare module "@builder.io/qwik" {
|
|
150
212
|
namespace JSX {
|
|
151
213
|
interface IntrinsicElements extends CustomElements {}
|
|
152
214
|
}
|
|
153
|
-
|
|
154
215
|
}
|
|
155
216
|
|
|
156
|
-
declare module
|
|
217
|
+
declare module "@stencil/core" {
|
|
157
218
|
namespace JSX {
|
|
158
219
|
interface IntrinsicElements extends CustomElements {}
|
|
159
220
|
}
|
|
160
|
-
|
|
161
221
|
}
|
|
162
222
|
|
|
163
|
-
declare module
|
|
223
|
+
declare module "hono/jsx" {
|
|
164
224
|
namespace JSX {
|
|
165
225
|
interface IntrinsicElements extends CustomElements {}
|
|
166
226
|
}
|
|
167
|
-
|
|
168
227
|
}
|
|
169
228
|
|
|
170
|
-
declare module
|
|
229
|
+
declare module "react-native" {
|
|
171
230
|
namespace JSX {
|
|
172
231
|
interface IntrinsicElements extends CustomElements {}
|
|
173
232
|
}
|
|
174
|
-
|
|
175
233
|
}
|
|
176
234
|
|
|
177
|
-
declare module
|
|
235
|
+
declare module "solid-js" {
|
|
178
236
|
namespace JSX {
|
|
179
|
-
interface IntrinsicElements extends
|
|
237
|
+
interface IntrinsicElements extends CustomElementsSolidJs {}
|
|
180
238
|
}
|
|
181
|
-
|
|
182
239
|
}
|
|
183
240
|
|
|
184
241
|
declare global {
|
|
185
242
|
namespace JSX {
|
|
186
243
|
interface IntrinsicElements extends CustomElements {}
|
|
187
244
|
}
|
|
188
|
-
|
|
189
245
|
}
|
|
190
246
|
declare global {
|
|
191
247
|
namespace svelteHTML {
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{A as AuroDatetime}from"./auro-datetime-
|
|
1
|
+
export{A as AuroDatetime}from"./auro-datetime-BobtS5w7.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-BobtS5w7.js";import"lit";r.register();
|
package/package.json
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"================================================================================"
|
|
8
8
|
],
|
|
9
9
|
"name": "@aurodesignsystem-dev/auro-datetime",
|
|
10
|
-
"version": "0.0.0-
|
|
10
|
+
"version": "0.0.0-pr82.0",
|
|
11
11
|
"description": "auro-datetime HTML custom element",
|
|
12
12
|
"repository": {
|
|
13
13
|
"type": "git",
|
|
@@ -21,12 +21,12 @@
|
|
|
21
21
|
"node": ">=20"
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"lit": "^3.3.
|
|
24
|
+
"lit": "^3.3.2"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
|
-
"@aurodesignsystem/auro-cli": "^3.
|
|
27
|
+
"@aurodesignsystem/auro-cli": "^3.6.0",
|
|
28
28
|
"@aurodesignsystem/auro-config": "^1.3.1",
|
|
29
|
-
"@aurodesignsystem/auro-library": "^5.
|
|
29
|
+
"@aurodesignsystem/auro-library": "^5.12.2",
|
|
30
30
|
"husky": "^9.1.7"
|
|
31
31
|
},
|
|
32
32
|
"browserslist": [
|
|
@@ -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._initializeDefaults()}_initializeDefaults(){this.weekday="short",this.month="short",this.runtimeUtils=new a}connectedCallback(){super.connectedCallback(),this.dateTemplate={weekday:this.weekday,year:"numeric",month:this.month,day:"numeric"},this.timeTemplate={hour:"2-digit",minute:"2-digit",timeZone:this.timeZone},this.template={}}static get properties(){return{cap:{type:Boolean},month:{type:String},setDate:{type:String},timeZone:{type:String},type:{type:String},utc:{type:String},weekday:{type:String}}}static register(e="auro-datetime"){a.prototype.registerComponent(e,s)}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-datetime")}humanDate(){let e=new Date;return this.utc?(this.dateTemplate.timeZone="UTC",e=new Date(this.utc)):this.setDate&&(e=new Date(this.setDate)),e.toLocaleString("en-us",this.dateTemplate)}humanDateConversion(){let e=new Date;switch(this.utc?(this.template.timeZone="UTC",e=new Date(this.utc)):this.setDate&&(e=new Date(this.setDate)),this.type){case"day":this.template.day="numeric";break;case"month":this.template.month=this.month;break;case"year":this.template.year="numeric";break;case"weekday":this.template.weekday=this.weekday;break;default:this.template.weekday=this.template}return e.toLocaleString("en-us",this.template)}numericDate(){this.dateTemplate.month="numeric",Reflect.deleteProperty(this.dateTemplate,"weekday");let e=new Date;return this.utc?(this.dateTemplate.timeZone="UTC",e=new Date(this.utc)):this.setDate&&(e=new Date(this.setDate)),e.toLocaleString("en-us",this.dateTemplate)}humanTime(){let e=new Date;return this.utc?(this.timeTemplate.timeZone="UTC",e=new Date(this.utc)):this.setDate&&(e=new Date(this.setDate)),this.cap?e.toLocaleString("en-us",this.timeTemplate).replace(/^0+/u,""):e.toLocaleString("en-us",this.timeTemplate).replace(/^0+/u,"").toLowerCase()}tzTime(e){const t=this.setDate.slice(0,-6),a=new Date(t);return this.cap?a.toLocaleString("en-us",e).replace(/^0+/u,""):a.toLocaleString("en-us",e).replace(/^0+/u,"").replace("AM","am").replace("PM","pm")}whichDate(){let e="";switch(this.type){case"date":e=this.humanDate();break;case"tzDate":e=this.tzTime(this.dateTemplate);break;case"tzTime":e=this.tzTime(this.timeTemplate);break;case"time":e=this.humanTime();break;case"year":case"month":case"weekday":case"day":e=this.humanDateConversion();break;case"numeric":e=this.numericDate();break;default:this.humanDate()}return this.setDate&&!this.type||this.utc&&!this.type?this.humanDate():e}render(){return t`
|
|
2
|
-
<slot name="pre"></slot>
|
|
3
|
-
<span class="yield">${this.whichDate()}</span>
|
|
4
|
-
<slot name="post"></slot>
|
|
5
|
-
<slot></slot>
|
|
6
|
-
`}}export{s as A};
|