@aurodesignsystem-dev/auro-datetime 0.0.0-pr78.0 → 0.0.0-pr82.1
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 +32 -13
- package/dist/auro-datetime-DxCkU1MY.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.
|
|
@@ -131,6 +131,7 @@ class AuroDatetime extends i {
|
|
|
131
131
|
_initializeDefaults() {
|
|
132
132
|
this.weekday = "short";
|
|
133
133
|
this.month = "short";
|
|
134
|
+
this.locale = "en-US";
|
|
134
135
|
|
|
135
136
|
/**
|
|
136
137
|
* @private
|
|
@@ -167,6 +168,14 @@ class AuroDatetime extends i {
|
|
|
167
168
|
*/
|
|
168
169
|
cap: { type: Boolean },
|
|
169
170
|
|
|
171
|
+
/**
|
|
172
|
+
* BCP 47 language tag for locale-aware date/time formatting (e.g. 'en-GB', 'de-DE', 'ja-JP').
|
|
173
|
+
* Defaults to 'en-US' when not set.
|
|
174
|
+
* @type {string}
|
|
175
|
+
* @default 'en-US'
|
|
176
|
+
*/
|
|
177
|
+
locale: { type: String },
|
|
178
|
+
|
|
170
179
|
/**
|
|
171
180
|
* Defines format of month
|
|
172
181
|
* @type {'short' | 'long'}
|
|
@@ -216,6 +225,16 @@ class AuroDatetime extends i {
|
|
|
216
225
|
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroDatetime);
|
|
217
226
|
}
|
|
218
227
|
|
|
228
|
+
willUpdate(changedProperties) {
|
|
229
|
+
if (changedProperties.has('locale') && this.locale) {
|
|
230
|
+
try {
|
|
231
|
+
Intl.getCanonicalLocales(this.locale);
|
|
232
|
+
} catch {
|
|
233
|
+
this.locale = "en-US";
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
}
|
|
237
|
+
|
|
219
238
|
firstUpdated() {
|
|
220
239
|
// Add the tag name as an attribute if it is different than the component name
|
|
221
240
|
this.runtimeUtils.handleComponentTagRename(this, "auro-datetime");
|
|
@@ -236,7 +255,7 @@ class AuroDatetime extends i {
|
|
|
236
255
|
newDate = new Date(this.setDate);
|
|
237
256
|
}
|
|
238
257
|
|
|
239
|
-
return newDate.toLocaleString(
|
|
258
|
+
return newDate.toLocaleString(this.locale, this.dateTemplate);
|
|
240
259
|
}
|
|
241
260
|
|
|
242
261
|
/**
|
|
@@ -272,7 +291,7 @@ class AuroDatetime extends i {
|
|
|
272
291
|
this.template.weekday = this.template;
|
|
273
292
|
}
|
|
274
293
|
|
|
275
|
-
return newDate.toLocaleString(
|
|
294
|
+
return newDate.toLocaleString(this.locale, this.template);
|
|
276
295
|
}
|
|
277
296
|
|
|
278
297
|
/**
|
|
@@ -292,7 +311,7 @@ class AuroDatetime extends i {
|
|
|
292
311
|
newDate = new Date(this.setDate);
|
|
293
312
|
}
|
|
294
313
|
|
|
295
|
-
return newDate.toLocaleString(
|
|
314
|
+
return newDate.toLocaleString(this.locale, this.dateTemplate);
|
|
296
315
|
}
|
|
297
316
|
|
|
298
317
|
/**
|
|
@@ -312,12 +331,12 @@ class AuroDatetime extends i {
|
|
|
312
331
|
|
|
313
332
|
if (this.cap) {
|
|
314
333
|
return newTime
|
|
315
|
-
.toLocaleString(
|
|
334
|
+
.toLocaleString(this.locale, this.timeTemplate)
|
|
316
335
|
.replace(/^0+/u, "");
|
|
317
336
|
}
|
|
318
337
|
|
|
319
338
|
return newTime
|
|
320
|
-
.toLocaleString(
|
|
339
|
+
.toLocaleString(this.locale, this.timeTemplate)
|
|
321
340
|
.replace(/^0+/u, "")
|
|
322
341
|
.toLowerCase();
|
|
323
342
|
}
|
|
@@ -334,16 +353,16 @@ class AuroDatetime extends i {
|
|
|
334
353
|
const newDateTime = new Date(scrubTimeZone);
|
|
335
354
|
|
|
336
355
|
if (this.cap) {
|
|
337
|
-
return newDateTime.toLocaleString(
|
|
356
|
+
return newDateTime.toLocaleString(this.locale, template).replace(/^0+/u, "");
|
|
338
357
|
}
|
|
339
358
|
|
|
340
359
|
return newDateTime
|
|
341
|
-
.toLocaleString(
|
|
360
|
+
.toLocaleString(this.locale, template)
|
|
342
361
|
.replace(/^0+/u, "")
|
|
343
362
|
.replace("AM", "am")
|
|
344
363
|
.replace("PM", "pm");
|
|
345
364
|
}
|
|
346
|
-
|
|
365
|
+
|
|
347
366
|
/**
|
|
348
367
|
* Internal function UI decision.
|
|
349
368
|
* @private
|
|
@@ -393,7 +412,7 @@ class AuroDatetime extends i {
|
|
|
393
412
|
|
|
394
413
|
// function that renders the HTML and CSS into the scope of the component
|
|
395
414
|
render() {
|
|
396
|
-
return
|
|
415
|
+
return b`
|
|
397
416
|
<slot name="pre"></slot>
|
|
398
417
|
<span class="yield">${this.whichDate()}</span>
|
|
399
418
|
<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.locale="en-US",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)}willUpdate(e){if(e.has("locale")&&this.locale)try{Intl.getCanonicalLocales(this.locale)}catch{this.locale="en-US"}}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,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,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,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,this.timeTemplate).replace(/^0+/u,""):e.toLocaleString(this.locale,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,e).replace(/^0+/u,""):a.toLocaleString(this.locale,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-DxCkU1MY.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-DxCkU1MY.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.1",
|
|
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};
|