@aurodesignsystem-dev/auro-datetime 0.0.0-pr82.4 → 0.0.0-pr83.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 +0 -51
- package/demo/auro-datetime.min.js +13 -36
- package/dist/auro-datetime-jIlTbbhr.js +6 -0
- package/dist/index.d.ts +66 -118
- package/dist/index.js +1 -1
- package/dist/registered.js +1 -1
- package/package.json +4 -4
- package/dist/auro-datetime-BwaHVIh8.js +0 -6
package/demo/api.md
CHANGED
|
@@ -10,7 +10,6 @@ The `auro-datetime` element is for the purposes of providing an easy to use date
|
|
|
10
10
|
| Properties | Attributes | Modifiers | Type | Default | Description |
|
|
11
11
|
| ---------- | ---------- | --------- | ------------------------------------------------------------------------------------------------ | ------- | ------------------------------------------------------------------------------------------------- |
|
|
12
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'). |
|
|
14
13
|
| month | month | | `short` \| `long` | `short` | Defines format of month |
|
|
15
14
|
| setDate | setDate | | string | | Pass in string to set date |
|
|
16
15
|
| timeZone | timeZone | | string | | Pass in string to define [timeZone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) |
|
|
@@ -93,56 +92,6 @@ Using the `cap` attribute will return the basic time string with a capitalized `
|
|
|
93
92
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
94
93
|
</auro-accordion>
|
|
95
94
|
|
|
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
|
-
|
|
146
95
|
### Long Month and Weekday
|
|
147
96
|
|
|
148
97
|
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(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;
|
|
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
|
|
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((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,this[e]=h.fromAttribute(s,t.type)??this._$Ej?.get(e)??null,this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){const e=this.constructor,h=this[t];if(i??=e.getPropertyOptions(t),!((i.hasChanged??f$1)(h,s)||i.useDefault&&i.reflect&&h===this._$Ej?.get(t)&&!this.hasAttribute(e._$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.0");
|
|
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.trustedTypes,s$1=i$1?i$1.createPolicy("lit-html",{createHTML:t=>t}):void 0,e="$lit$",h=`lit$${Math.random().toFixed(9).slice(2)}$`,o$1="?"+h,n=`<${o$1}>`,r=document,l=()=>r.createComment(""),c=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a=Array.isArray,u=t=>a(t)||"function"==typeof t?.[Symbol.iterator],d="[ \t\n\f\r]",f=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v=/-->/g,_=/>/g,m=RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p=/'/g,g=/"/g,$=/^(?:script|style|textarea|title)$/i,y=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x=y(1),T=Symbol.for("lit-noChange"),E=Symbol.for("lit-nothing"),A=new WeakMap,C=r.createTreeWalker(r,129);function P(t,i){if(!a(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s$1?s$1.createHTML(i):i}const V=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"<svg>":3===i?"<math>":"",c=f;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,y=0;for(;y<s.length&&(c.lastIndex=y,u=c.exec(s),null!==u);)y=c.lastIndex,c===f?"!--"===u[1]?c=v:void 0!==u[1]?c=_:void 0!==u[2]?($.test(u[2])&&(r=RegExp("</"+u[2],"g")),c=m):void 0!==u[3]&&(c=m):c===m?">"===u[0]?(c=r??f,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m:'"'===u[3]?g:p):c===g||c===p?c=m:c===v||c===_?c=f:(c=m,r=void 0);const x=c===m&&t[i+1].startsWith("/>")?" ":"";l+=c===f?s+n:d>=0?(o.push(a),s.slice(0,d)+e+s.slice(d)+h+x):s+h+(-2===d?i:x);}return [P(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),o]};class N{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=V(t,s);if(this.el=N.createElement(f,n),C.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(e)){const i=v[a++],s=r.getAttribute(t).split(h),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:c,name:e[2],strings:s,ctor:"."===e[1]?H:"?"===e[1]?I:"@"===e[1]?L:k}),r.removeAttribute(t);}else t.startsWith(h)&&(d.push({type:6,index:c}),r.removeAttribute(t));if($.test(r.tagName)){const t=r.textContent.split(h),s=t.length-1;if(s>0){r.textContent=i$1?i$1.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l()),C.nextNode(),d.push({type:2,index:++c});r.append(t[s],l());}}}else if(8===r.nodeType)if(r.data===o$1)d.push({type:2,index:c});else {let t=-1;for(;-1!==(t=r.data.indexOf(h,t+1));)d.push({type:7,index:c}),t+=h.length-1;}c++;}}static createElement(t,i){const s=r.createElement("template");return s.innerHTML=t,s}}function S(t,i,s=t,e){if(i===T)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=c(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=S(t,h._$AS(t,i.values),h,e)),i}class M{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??r).importNode(i,true);C.currentNode=e;let h=C.nextNode(),o=0,n=0,l=s[0];for(;void 0!==l;){if(o===l.index){let i;2===l.type?i=new R(h,h.nextSibling,this,t):1===l.type?i=new l.ctor(h,l.name,l.strings,this,t):6===l.type&&(i=new z(h,this,t)),this._$AV.push(i),l=s[++n];}o!==l?.index&&(h=C.nextNode(),o++);}return C.currentNode=r,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 R{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=E,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=S(this,t,i),c(t)?t===E||null==t||""===t?(this._$AH!==E&&this._$AR(),this._$AH=E):t!==this._$AH&&t!==T&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):u(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!==E&&c(this._$AH)?this._$AA.nextSibling.data=t:this.T(r.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=N.createElement(P(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new M(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=A.get(t.strings);return void 0===i&&A.set(t.strings,i=new N(t)),i}k(t){a(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 R(this.O(l()),this.O(l()),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,i){for(this._$AP?.(false,true,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){ void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t));}}class k{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=E,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=E;}_$AI(t,i=this,s,e){const h=this.strings;let o=false;if(void 0===h)t=S(this,t,i,0),o=!c(t)||t!==this._$AH&&t!==T,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=S(this,e[s+n],i,n),r===T&&(r=this._$AH[n]),o||=!c(r)||r!==this._$AH[n],r===E?t=E:t!==E&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===E?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}}class H extends k{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===E?void 0:t;}}class I extends k{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==E);}}class L extends k{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=S(this,t,i,0)??E)===T)return;const s=this._$AH,e=t===E&&s!==E||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==E&&(s===E||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){S(this,t);}}const j=t.litHtmlPolyfillSupport;j?.(N,R),(t.litHtmlVersions??=[]).push("3.3.0");const B=(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 R(i.insertBefore(l(),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=B(r,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return T}}i._$litElement$=true,i["finalized"]=true,s.litElementHydrateSupport?.({LitElement:i});const o=s.litElementPolyfillSupport;o?.({LitElement:i});(s.litElementVersions??=[]).push("4.2.0");
|
|
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,7 +131,6 @@ class AuroDatetime extends i {
|
|
|
131
131
|
_initializeDefaults() {
|
|
132
132
|
this.weekday = "short";
|
|
133
133
|
this.month = "short";
|
|
134
|
-
this.locale = "en-US";
|
|
135
134
|
|
|
136
135
|
/**
|
|
137
136
|
* @private
|
|
@@ -168,13 +167,6 @@ class AuroDatetime extends i {
|
|
|
168
167
|
*/
|
|
169
168
|
cap: { type: Boolean },
|
|
170
169
|
|
|
171
|
-
/**
|
|
172
|
-
* BCP 47 language tag for locale-aware date/time formatting (e.g. 'en-GB', 'de-DE', 'ja-JP').
|
|
173
|
-
* @type {string}
|
|
174
|
-
* @default 'en-US'
|
|
175
|
-
*/
|
|
176
|
-
locale: { type: String },
|
|
177
|
-
|
|
178
170
|
/**
|
|
179
171
|
* Defines format of month
|
|
180
172
|
* @type {'short' | 'long'}
|
|
@@ -224,21 +216,6 @@ class AuroDatetime extends i {
|
|
|
224
216
|
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroDatetime);
|
|
225
217
|
}
|
|
226
218
|
|
|
227
|
-
willUpdate(changedProperties) {
|
|
228
|
-
if (changedProperties.has("locale")) {
|
|
229
|
-
if (!this.locale) {
|
|
230
|
-
this.locale = "en-US";
|
|
231
|
-
} else {
|
|
232
|
-
try {
|
|
233
|
-
Intl.getCanonicalLocales(this.locale);
|
|
234
|
-
} catch {
|
|
235
|
-
console.warn(`auro-datetime: "${this.locale}" is not a valid BCP 47 locale tag. Falling back to "en-US".`);
|
|
236
|
-
this.locale = "en-US";
|
|
237
|
-
}
|
|
238
|
-
}
|
|
239
|
-
}
|
|
240
|
-
}
|
|
241
|
-
|
|
242
219
|
firstUpdated() {
|
|
243
220
|
// Add the tag name as an attribute if it is different than the component name
|
|
244
221
|
this.runtimeUtils.handleComponentTagRename(this, "auro-datetime");
|
|
@@ -259,7 +236,7 @@ class AuroDatetime extends i {
|
|
|
259
236
|
newDate = new Date(this.setDate);
|
|
260
237
|
}
|
|
261
238
|
|
|
262
|
-
return newDate.toLocaleString(
|
|
239
|
+
return newDate.toLocaleString("en-us", this.dateTemplate);
|
|
263
240
|
}
|
|
264
241
|
|
|
265
242
|
/**
|
|
@@ -295,7 +272,7 @@ class AuroDatetime extends i {
|
|
|
295
272
|
this.template.weekday = this.template;
|
|
296
273
|
}
|
|
297
274
|
|
|
298
|
-
return newDate.toLocaleString(
|
|
275
|
+
return newDate.toLocaleString("en-us", this.template);
|
|
299
276
|
}
|
|
300
277
|
|
|
301
278
|
/**
|
|
@@ -315,7 +292,7 @@ class AuroDatetime extends i {
|
|
|
315
292
|
newDate = new Date(this.setDate);
|
|
316
293
|
}
|
|
317
294
|
|
|
318
|
-
return newDate.toLocaleString(
|
|
295
|
+
return newDate.toLocaleString("en-us", this.dateTemplate);
|
|
319
296
|
}
|
|
320
297
|
|
|
321
298
|
/**
|
|
@@ -335,12 +312,12 @@ class AuroDatetime extends i {
|
|
|
335
312
|
|
|
336
313
|
if (this.cap) {
|
|
337
314
|
return newTime
|
|
338
|
-
.toLocaleString(
|
|
315
|
+
.toLocaleString("en-us", this.timeTemplate)
|
|
339
316
|
.replace(/^0+/u, "");
|
|
340
317
|
}
|
|
341
318
|
|
|
342
319
|
return newTime
|
|
343
|
-
.toLocaleString(
|
|
320
|
+
.toLocaleString("en-us", this.timeTemplate)
|
|
344
321
|
.replace(/^0+/u, "")
|
|
345
322
|
.toLowerCase();
|
|
346
323
|
}
|
|
@@ -357,16 +334,16 @@ class AuroDatetime extends i {
|
|
|
357
334
|
const newDateTime = new Date(scrubTimeZone);
|
|
358
335
|
|
|
359
336
|
if (this.cap) {
|
|
360
|
-
return newDateTime.toLocaleString(
|
|
337
|
+
return newDateTime.toLocaleString("en-us", template).replace(/^0+/u, "");
|
|
361
338
|
}
|
|
362
339
|
|
|
363
340
|
return newDateTime
|
|
364
|
-
.toLocaleString(
|
|
341
|
+
.toLocaleString("en-us", template)
|
|
365
342
|
.replace(/^0+/u, "")
|
|
366
343
|
.replace("AM", "am")
|
|
367
344
|
.replace("PM", "pm");
|
|
368
345
|
}
|
|
369
|
-
|
|
346
|
+
|
|
370
347
|
/**
|
|
371
348
|
* Internal function UI decision.
|
|
372
349
|
* @private
|
|
@@ -416,7 +393,7 @@ class AuroDatetime extends i {
|
|
|
416
393
|
|
|
417
394
|
// function that renders the HTML and CSS into the scope of the component
|
|
418
395
|
render() {
|
|
419
|
-
return
|
|
396
|
+
return x`
|
|
420
397
|
<slot name="pre"></slot>
|
|
421
398
|
<span class="yield">${this.whichDate()}</span>
|
|
422
399
|
<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},month:{type:String},setDate:{type:String},timeZone:{type:String},type:{type:String},utc:{type:String},weekday:{type:String}}}static register(e="auro-datetime"){a.prototype.registerComponent(e,s)}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-datetime")}humanDate(){let e=new Date;return this.utc?(this.dateTemplate.timeZone="UTC",e=new Date(this.utc)):this.setDate&&(e=new Date(this.setDate)),e.toLocaleString("en-us",this.dateTemplate)}humanDateConversion(){let e=new Date;switch(this.utc?(this.template.timeZone="UTC",e=new Date(this.utc)):this.setDate&&(e=new Date(this.setDate)),this.type){case"day":this.template.day="numeric";break;case"month":this.template.month=this.month;break;case"year":this.template.year="numeric";break;case"weekday":this.template.weekday=this.weekday;break;default:this.template.weekday=this.template}return e.toLocaleString("en-us",this.template)}numericDate(){this.dateTemplate.month="numeric",Reflect.deleteProperty(this.dateTemplate,"weekday");let e=new Date;return this.utc?(this.dateTemplate.timeZone="UTC",e=new Date(this.utc)):this.setDate&&(e=new Date(this.setDate)),e.toLocaleString("en-us",this.dateTemplate)}humanTime(){let e=new Date;return this.utc?(this.timeTemplate.timeZone="UTC",e=new Date(this.utc)):this.setDate&&(e=new Date(this.setDate)),this.cap?e.toLocaleString("en-us",this.timeTemplate).replace(/^0+/u,""):e.toLocaleString("en-us",this.timeTemplate).replace(/^0+/u,"").toLowerCase()}tzTime(e){const t=this.setDate.slice(0,-6),a=new Date(t);return this.cap?a.toLocaleString("en-us",e).replace(/^0+/u,""):a.toLocaleString("en-us",e).replace(/^0+/u,"").replace("AM","am").replace("PM","pm")}whichDate(){let e="";switch(this.type){case"date":e=this.humanDate();break;case"tzDate":e=this.tzTime(this.dateTemplate);break;case"tzTime":e=this.tzTime(this.timeTemplate);break;case"time":e=this.humanTime();break;case"year":case"month":case"weekday":case"day":e=this.humanDateConversion();break;case"numeric":e=this.numericDate();break;default:this.humanDate()}return this.setDate&&!this.type||this.utc&&!this.type?this.humanDate():e}render(){return t`
|
|
2
|
+
<slot name="pre"></slot>
|
|
3
|
+
<span class="yield">${this.whichDate()}</span>
|
|
4
|
+
<slot name="post"></slot>
|
|
5
|
+
<slot></slot>
|
|
6
|
+
`}}export{s as A};
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
|
|
1
2
|
import type { AuroDatetime } from "src/auro-datetime.js";
|
|
2
3
|
|
|
3
4
|
/**
|
|
@@ -20,12 +21,13 @@ import type { AuroDatetime } from "src/auro-datetime.js";
|
|
|
20
21
|
*/
|
|
21
22
|
export type ScopedElements<
|
|
22
23
|
Prefix extends string = "",
|
|
23
|
-
Suffix extends string = ""
|
|
24
|
+
Suffix extends string = ""
|
|
24
25
|
> = {
|
|
25
26
|
[Key in keyof CustomElements as `${Prefix}${Key}${Suffix}`]: CustomElements[Key];
|
|
26
27
|
};
|
|
27
28
|
|
|
28
29
|
type BaseProps<T extends HTMLElement> = {
|
|
30
|
+
|
|
29
31
|
/** Content added between the opening and closing tags of the element */
|
|
30
32
|
children?: any;
|
|
31
33
|
/** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
|
|
@@ -68,176 +70,122 @@ type BaseProps<T extends HTMLElement> = {
|
|
|
68
70
|
popovertarget?: "top" | "bottom" | "left" | "right" | "auto";
|
|
69
71
|
/** Specifies the action to be performed on a popover element being controlled by a control element. */
|
|
70
72
|
popovertargetaction?: "show" | "hide" | "toggle";
|
|
73
|
+
|
|
74
|
+
} ;
|
|
75
|
+
|
|
76
|
+
type BaseEvents = {
|
|
77
|
+
|
|
78
|
+
|
|
71
79
|
};
|
|
72
80
|
|
|
73
|
-
|
|
81
|
+
|
|
74
82
|
|
|
75
83
|
export type AuroDatetimeProps = {
|
|
76
84
|
/** Capitalize AM or PM designation */
|
|
77
|
-
cap?: AuroDatetime[
|
|
78
|
-
/** BCP 47 language tag for locale-aware date/time formatting (e.g. 'en-GB', 'de-DE', 'ja-JP'). */
|
|
79
|
-
locale?: AuroDatetime["locale"];
|
|
85
|
+
"cap"?: AuroDatetime['cap'];
|
|
80
86
|
/** Defines format of month */
|
|
81
|
-
month?: AuroDatetime[
|
|
87
|
+
"month"?: AuroDatetime['month'];
|
|
82
88
|
/** Pass in string to set date */
|
|
83
|
-
setDate?: AuroDatetime[
|
|
89
|
+
"setDate"?: AuroDatetime['setDate'];
|
|
84
90
|
/** Pass in string to define [timeZone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) */
|
|
85
|
-
timeZone?: AuroDatetime[
|
|
91
|
+
"timeZone"?: AuroDatetime['timeZone'];
|
|
86
92
|
/** Defines type of data to render */
|
|
87
|
-
type?: AuroDatetime[
|
|
93
|
+
"type"?: AuroDatetime['type'];
|
|
88
94
|
/** Pass in ISO 8601 UTC formatted time code */
|
|
89
|
-
utc?: AuroDatetime[
|
|
95
|
+
"utc"?: AuroDatetime['utc'];
|
|
90
96
|
/** Defines format of weekday */
|
|
91
|
-
weekday?: AuroDatetime[
|
|
92
|
-
};
|
|
97
|
+
"weekday"?: AuroDatetime['weekday'];
|
|
93
98
|
|
|
94
|
-
export type AuroDatetimeSolidJsProps = {
|
|
95
|
-
/** Capitalize AM or PM designation */
|
|
96
|
-
"prop:cap"?: AuroDatetime["cap"];
|
|
97
|
-
/** BCP 47 language tag for locale-aware date/time formatting (e.g. 'en-GB', 'de-DE', 'ja-JP'). */
|
|
98
|
-
"prop:locale"?: AuroDatetime["locale"];
|
|
99
|
-
/** Defines format of month */
|
|
100
|
-
"prop:month"?: AuroDatetime["month"];
|
|
101
|
-
/** Pass in string to set date */
|
|
102
|
-
"prop:setDate"?: AuroDatetime["setDate"];
|
|
103
|
-
/** Pass in string to define [timeZone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) */
|
|
104
|
-
"prop:timeZone"?: AuroDatetime["timeZone"];
|
|
105
|
-
/** Defines type of data to render */
|
|
106
|
-
"prop:type"?: AuroDatetime["type"];
|
|
107
|
-
/** Pass in ISO 8601 UTC formatted time code */
|
|
108
|
-
"prop:utc"?: AuroDatetime["utc"];
|
|
109
|
-
/** Defines format of weekday */
|
|
110
|
-
"prop:weekday"?: AuroDatetime["weekday"];
|
|
111
99
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
textContent?: string | number;
|
|
116
|
-
};
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
export type CustomElements = {
|
|
117
103
|
|
|
118
|
-
export type CustomElements = {
|
|
119
|
-
/**
|
|
120
|
-
* The `auro-datetime` element is for the purposes of providing an easy to use date and time API.
|
|
121
|
-
*
|
|
122
|
-
* ## Attributes & Properties
|
|
123
|
-
*
|
|
124
|
-
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
125
|
-
*
|
|
126
|
-
* - `cap`: Capitalize AM or PM designation
|
|
127
|
-
* - `locale`: BCP 47 language tag for locale-aware date/time formatting (e.g. 'en-GB', 'de-DE', 'ja-JP').
|
|
128
|
-
* - `month`: Defines format of month
|
|
129
|
-
* - `setDate`: Pass in string to set date
|
|
130
|
-
* - `timeZone`: Pass in string to define [timeZone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)
|
|
131
|
-
* - `type`: Defines type of data to render
|
|
132
|
-
* - `utc`: Pass in ISO 8601 UTC formatted time code
|
|
133
|
-
* - `weekday`: Defines format of weekday
|
|
134
|
-
*
|
|
135
|
-
* ## Slots
|
|
136
|
-
*
|
|
137
|
-
* Areas where markup can be added to the component.
|
|
138
|
-
*
|
|
139
|
-
* - `post`: Content that comes after the `pre` content
|
|
140
|
-
* - `pre`: Content that comes before the `post` content
|
|
141
|
-
*
|
|
142
|
-
* ## Methods
|
|
143
|
-
*
|
|
144
|
-
* Methods that can be called to access component functionality.
|
|
145
|
-
*
|
|
146
|
-
* - `_initializeDefaults() => void`: undefined
|
|
147
|
-
* - `register(name?: string = "auro-datetime") => void`: This will register this element with the browser.
|
|
148
|
-
*/
|
|
149
|
-
"auro-datetime": Partial<
|
|
150
|
-
AuroDatetimeProps & BaseProps<AuroDatetime> & BaseEvents
|
|
151
|
-
>;
|
|
152
|
-
};
|
|
153
104
|
|
|
154
|
-
export type CustomElementsSolidJs = {
|
|
155
105
|
/**
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
AuroDatetimeProps &
|
|
187
|
-
AuroDatetimeSolidJsProps &
|
|
188
|
-
BaseProps<AuroDatetime> &
|
|
189
|
-
BaseEvents
|
|
190
|
-
>;
|
|
191
|
-
};
|
|
106
|
+
* The `auro-datetime` element is for the purposes of providing an easy to use date and time API.
|
|
107
|
+
*
|
|
108
|
+
* ## Attributes & Properties
|
|
109
|
+
*
|
|
110
|
+
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
111
|
+
*
|
|
112
|
+
* - `cap`: Capitalize AM or PM designation
|
|
113
|
+
* - `month`: Defines format of month
|
|
114
|
+
* - `setDate`: Pass in string to set date
|
|
115
|
+
* - `timeZone`: Pass in string to define [timeZone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)
|
|
116
|
+
* - `type`: Defines type of data to render
|
|
117
|
+
* - `utc`: Pass in ISO 8601 UTC formatted time code
|
|
118
|
+
* - `weekday`: Defines format of weekday
|
|
119
|
+
*
|
|
120
|
+
* ## Slots
|
|
121
|
+
*
|
|
122
|
+
* Areas where markup can be added to the component.
|
|
123
|
+
*
|
|
124
|
+
* - `post`: Content that comes after the `pre` content
|
|
125
|
+
* - `pre`: Content that comes before the `post` content
|
|
126
|
+
*
|
|
127
|
+
* ## Methods
|
|
128
|
+
*
|
|
129
|
+
* Methods that can be called to access component functionality.
|
|
130
|
+
*
|
|
131
|
+
* - `_initializeDefaults() => void`: undefined
|
|
132
|
+
* - `register(name?: string = "auro-datetime") => void`: This will register this element with the browser.
|
|
133
|
+
*/
|
|
134
|
+
"auro-datetime": Partial<AuroDatetimeProps & BaseProps<AuroDatetime> & BaseEvents>;
|
|
135
|
+
}
|
|
192
136
|
|
|
193
|
-
export type CustomCssProperties = {
|
|
137
|
+
export type CustomCssProperties = {
|
|
194
138
|
|
|
195
|
-
declare module "react" {
|
|
196
|
-
namespace JSX {
|
|
197
|
-
interface IntrinsicElements extends CustomElements {}
|
|
198
|
-
}
|
|
199
139
|
}
|
|
200
140
|
|
|
201
|
-
|
|
141
|
+
|
|
142
|
+
declare module 'react' {
|
|
202
143
|
namespace JSX {
|
|
203
144
|
interface IntrinsicElements extends CustomElements {}
|
|
204
145
|
}
|
|
146
|
+
|
|
205
147
|
}
|
|
206
148
|
|
|
207
|
-
declare module
|
|
149
|
+
declare module 'preact' {
|
|
208
150
|
namespace JSX {
|
|
209
151
|
interface IntrinsicElements extends CustomElements {}
|
|
210
152
|
}
|
|
153
|
+
|
|
211
154
|
}
|
|
212
155
|
|
|
213
|
-
declare module
|
|
156
|
+
declare module '@builder.io/qwik' {
|
|
214
157
|
namespace JSX {
|
|
215
158
|
interface IntrinsicElements extends CustomElements {}
|
|
216
159
|
}
|
|
160
|
+
|
|
217
161
|
}
|
|
218
162
|
|
|
219
|
-
declare module
|
|
163
|
+
declare module '@stencil/core' {
|
|
220
164
|
namespace JSX {
|
|
221
165
|
interface IntrinsicElements extends CustomElements {}
|
|
222
166
|
}
|
|
167
|
+
|
|
223
168
|
}
|
|
224
169
|
|
|
225
|
-
declare module
|
|
170
|
+
declare module 'hono/jsx' {
|
|
226
171
|
namespace JSX {
|
|
227
172
|
interface IntrinsicElements extends CustomElements {}
|
|
228
173
|
}
|
|
174
|
+
|
|
229
175
|
}
|
|
230
176
|
|
|
231
|
-
declare module
|
|
177
|
+
declare module 'react-native' {
|
|
232
178
|
namespace JSX {
|
|
233
|
-
interface IntrinsicElements extends
|
|
179
|
+
interface IntrinsicElements extends CustomElements {}
|
|
234
180
|
}
|
|
181
|
+
|
|
235
182
|
}
|
|
236
183
|
|
|
237
184
|
declare global {
|
|
238
185
|
namespace JSX {
|
|
239
186
|
interface IntrinsicElements extends CustomElements {}
|
|
240
187
|
}
|
|
188
|
+
|
|
241
189
|
}
|
|
242
190
|
declare global {
|
|
243
191
|
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-jIlTbbhr.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-jIlTbbhr.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-pr83.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.1"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
|
-
"@aurodesignsystem/auro-cli": "^3.
|
|
27
|
+
"@aurodesignsystem/auro-cli": "^3.5.0",
|
|
28
28
|
"@aurodesignsystem/auro-config": "^1.3.1",
|
|
29
|
-
"@aurodesignsystem/auro-library": "^5.
|
|
29
|
+
"@aurodesignsystem/auro-library": "^5.5.4",
|
|
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.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"))if(this.locale)try{Intl.getCanonicalLocales(this.locale)}catch{console.warn(`auro-datetime: "${this.locale}" is not a valid BCP 47 locale tag. Falling back to "en-US".`),this.locale="en-US"}else 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};
|