@nyaruka/temba-components 0.77.0 → 0.78.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/CHANGELOG.md +9 -5
- package/dist/{105420e8.js → 736dd89d.js} +8 -14
- package/dist/index.js +8 -14
- package/dist/sw.js +1 -1
- package/dist/sw.js.map +1 -1
- package/dist/templates/components-body.html +1 -1
- package/dist/templates/components-head.html +1 -1
- package/out-tsc/src/date/TembaDate.js +10 -16
- package/out-tsc/src/date/TembaDate.js.map +1 -1
- package/out-tsc/test/temba-date.test.js +11 -1
- package/out-tsc/test/temba-date.test.js.map +1 -1
- package/package.json +1 -1
- package/screenshots/truth/date/date-inline.png +0 -0
- package/screenshots/truth/date/date.png +0 -0
- package/screenshots/truth/date/datetime.png +0 -0
- package/screenshots/truth/date/duration.png +0 -0
- package/src/date/TembaDate.ts +11 -16
- package/test/temba-date.test.ts +16 -4
package/CHANGELOG.md
CHANGED
|
@@ -4,8 +4,16 @@ All notable changes to this project will be documented in this file. Dates are d
|
|
|
4
4
|
|
|
5
5
|
Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
|
|
6
6
|
|
|
7
|
+
#### [v0.78.0](https://github.com/nyaruka/temba-components/compare/v0.77.0...v0.78.0)
|
|
8
|
+
|
|
9
|
+
- Rework `temba-date` to be inline span instead of div [`#406`](https://github.com/nyaruka/temba-components/pull/406)
|
|
10
|
+
- Add test to ensure date renders inline [`abcbc1f`](https://github.com/nyaruka/temba-components/commit/abcbc1f226e59a39b6f53d00d9178adb68df852d)
|
|
11
|
+
- Rework temba-date to be inline [`78af86e`](https://github.com/nyaruka/temba-components/commit/78af86e22b92cd2546b62bfc7bd46250250b84cf)
|
|
12
|
+
|
|
7
13
|
#### [v0.77.0](https://github.com/nyaruka/temba-components/compare/v0.76.0...v0.77.0)
|
|
8
14
|
|
|
15
|
+
> 29 March 2024
|
|
16
|
+
|
|
9
17
|
- Updates for template components as a list [`#405`](https://github.com/nyaruka/temba-components/pull/405)
|
|
10
18
|
|
|
11
19
|
#### [v0.76.0](https://github.com/nyaruka/temba-components/compare/v0.75.3...v0.76.0)
|
|
@@ -264,16 +272,12 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
|
|
|
264
272
|
- Fix reading created_by for msg events [`#364`](https://github.com/nyaruka/temba-components/pull/364)
|
|
265
273
|
- Add logical icon names for optin and optout [`#365`](https://github.com/nyaruka/temba-components/pull/365)
|
|
266
274
|
|
|
267
|
-
#### [v0.58.8](https://github.com/nyaruka/temba-components/compare/v0.58.
|
|
275
|
+
#### [v0.58.8](https://github.com/nyaruka/temba-components/compare/v0.58.6...v0.58.8)
|
|
268
276
|
|
|
269
277
|
> 28 September 2023
|
|
270
278
|
|
|
271
279
|
- Update publish.yml [`7dc7d69`](https://github.com/nyaruka/temba-components/commit/7dc7d69822942b39c3b35e06846cfd4c65108b2d)
|
|
272
280
|
|
|
273
|
-
#### [v0.58.7](https://github.com/nyaruka/temba-components/compare/v0.58.6...v0.58.7)
|
|
274
|
-
|
|
275
|
-
> 28 September 2023
|
|
276
|
-
|
|
277
281
|
#### [v0.58.6](https://github.com/nyaruka/temba-components/compare/v0.58.5...v0.58.6)
|
|
278
282
|
|
|
279
283
|
> 28 September 2023
|
|
@@ -6110,27 +6110,21 @@ function t(t,e,i,o){var n,s=arguments.length,r=s<3?e:null===o?o=Object.getOwnPro
|
|
|
6110
6110
|
</div>
|
|
6111
6111
|
`}}t([ae({type:String})],ih.prototype,"endpoint",void 0),t([ae({type:Number})],ih.prototype,"legacy",void 0),t([ae({type:Array,attribute:!1})],ih.prototype,"buttons",void 0),t([ae({type:Array,attribute:!1})],ih.prototype,"items",void 0);const oh={date:ws.DATE_SHORT,datetime:ws.DATETIME_SHORT,time:ws.TIME_SIMPLE,timedate:"timedate",duration:"duration",relative:"relative",day:"LLL d"};class nh extends se{constructor(){super(...arguments),this.display="date"}static get styles(){return r`
|
|
6112
6112
|
.date {
|
|
6113
|
-
display:
|
|
6114
|
-
overflow: hidden;
|
|
6115
|
-
text-overflow: ellipsis;
|
|
6116
|
-
white-space: nowrap;
|
|
6113
|
+
display: inline;
|
|
6117
6114
|
}
|
|
6118
|
-
`}firstUpdated(t){super.firstUpdated(t),this.store=document.querySelector("temba-store")}updated(t){super.updated(t),t.has("value")&&(this.datetime=ws.fromISO(this.value))}connectedCallback(){super.connectedCallback()}render(){if(this.datetime&&this.store){this.datetime.setLocale(this.store.getLocale());let t="";if(this.display===oh.timedate){const e=Math.abs(this.datetime.diffNow().milliseconds/1e3/60/60);t=e<24?this.datetime.toLocaleString(oh.time):e<8760?this.datetime.toFormat(oh.day):this.datetime.toLocaleString(oh.date)}else if(this.display===oh.relative){if(Math.abs(this.datetime.diffNow().milliseconds/1e3/60)<1)return D`<
|
|
6115
|
+
`}firstUpdated(t){super.firstUpdated(t),this.store=document.querySelector("temba-store")}updated(t){super.updated(t),t.has("value")&&(this.datetime=ws.fromISO(this.value))}connectedCallback(){super.connectedCallback()}render(){if(this.datetime&&this.store){this.datetime.setLocale(this.store.getLocale());let t="";if(this.display===oh.timedate){const e=Math.abs(this.datetime.diffNow().milliseconds/1e3/60/60);t=e<24?this.datetime.toLocaleString(oh.time):e<8760?this.datetime.toFormat(oh.day):this.datetime.toLocaleString(oh.date)}else if(this.display===oh.relative){if(Math.abs(this.datetime.diffNow().milliseconds/1e3/60)<1)return D`<span
|
|
6119
6116
|
class="date"
|
|
6120
6117
|
title="${this.datetime.toLocaleString(oh.datetime)}"
|
|
6121
|
-
|
|
6122
|
-
|
|
6123
|
-
</div>`;t=this.store.getShortDuration(this.datetime)}else if(this.display===oh.duration){if(Math.abs(this.datetime.diffNow().milliseconds/1e3/60)<1)return D`<div
|
|
6118
|
+
>just now</span
|
|
6119
|
+
>`;t=this.store.getShortDuration(this.datetime)}else if(this.display===oh.duration){if(Math.abs(this.datetime.diffNow().milliseconds/1e3/60)<1)return D`<span
|
|
6124
6120
|
class="date"
|
|
6125
6121
|
title="${this.datetime.toLocaleString(oh.datetime)}"
|
|
6126
|
-
|
|
6127
|
-
|
|
6128
|
-
</div>`;t=this.store.getShortDuration(this.datetime)}else t=this.display===oh.day?this.datetime.toLocaleString(oh.day):this.datetime.toLocaleString(oh[this.display]);return D`<div
|
|
6122
|
+
>just now</span
|
|
6123
|
+
>`;t=this.store.getShortDuration(this.datetime)}else t=this.display===oh.day?this.datetime.toLocaleString(oh.day):this.datetime.toLocaleString(oh[this.display]);return D`<span
|
|
6129
6124
|
class="date"
|
|
6130
6125
|
title="${this.datetime.toLocaleString(oh.datetime)}"
|
|
6131
|
-
|
|
6132
|
-
|
|
6133
|
-
</div>`}}}t([ae({type:String})],nh.prototype,"value",void 0),t([ae({type:String})],nh.prototype,"display",void 0),t([ae({type:Object,attribute:!1})],nh.prototype,"datetime",void 0);let sh=class extends se{constructor(){super(...arguments),this.body=D`<temba-loading></temba-loading>`}static get styles(){return r``}updated(t){super.updated(t),t.has("endpoint")&&Nt(this.endpoint).then((t=>{this.body=Ys(t.body)}))}render(){return D`${this.body}`}};t([ae({type:String})],sh.prototype,"endpoint",void 0),t([ae({attribute:!1})],sh.prototype,"body",void 0),sh=t([(t=>e=>"function"==typeof e?((t,e)=>(customElements.define(t,e),e))(t,e):((t,e)=>{const{kind:i,elements:o}=e;return{kind:i,elements:o,finisher(e){customElements.define(t,e)}}})(t,e))("temba-remote")],sh);var rh=sh;class ah extends he{static get styles(){return r`
|
|
6126
|
+
>${t}</span
|
|
6127
|
+
>`}}}t([ae({type:String})],nh.prototype,"value",void 0),t([ae({type:String})],nh.prototype,"display",void 0),t([ae({type:Object,attribute:!1})],nh.prototype,"datetime",void 0);let sh=class extends se{constructor(){super(...arguments),this.body=D`<temba-loading></temba-loading>`}static get styles(){return r``}updated(t){super.updated(t),t.has("endpoint")&&Nt(this.endpoint).then((t=>{this.body=Ys(t.body)}))}render(){return D`${this.body}`}};t([ae({type:String})],sh.prototype,"endpoint",void 0),t([ae({attribute:!1})],sh.prototype,"body",void 0),sh=t([(t=>e=>"function"==typeof e?((t,e)=>(customElements.define(t,e),e))(t,e):((t,e)=>{const{kind:i,elements:o}=e;return{kind:i,elements:o,finisher(e){customElements.define(t,e)}}})(t,e))("temba-remote")],sh);var rh=sh;class ah extends he{static get styles(){return r`
|
|
6134
6128
|
.container {
|
|
6135
6129
|
display: flex;
|
|
6136
6130
|
flex-direction: column;
|
package/dist/index.js
CHANGED
|
@@ -6110,27 +6110,21 @@ function t(t,e,i,o){var n,s=arguments.length,r=s<3?e:null===o?o=Object.getOwnPro
|
|
|
6110
6110
|
</div>
|
|
6111
6111
|
`}}t([ae({type:String})],ih.prototype,"endpoint",void 0),t([ae({type:Number})],ih.prototype,"legacy",void 0),t([ae({type:Array,attribute:!1})],ih.prototype,"buttons",void 0),t([ae({type:Array,attribute:!1})],ih.prototype,"items",void 0);const oh={date:ws.DATE_SHORT,datetime:ws.DATETIME_SHORT,time:ws.TIME_SIMPLE,timedate:"timedate",duration:"duration",relative:"relative",day:"LLL d"};class nh extends se{constructor(){super(...arguments),this.display="date"}static get styles(){return r`
|
|
6112
6112
|
.date {
|
|
6113
|
-
display:
|
|
6114
|
-
overflow: hidden;
|
|
6115
|
-
text-overflow: ellipsis;
|
|
6116
|
-
white-space: nowrap;
|
|
6113
|
+
display: inline;
|
|
6117
6114
|
}
|
|
6118
|
-
`}firstUpdated(t){super.firstUpdated(t),this.store=document.querySelector("temba-store")}updated(t){super.updated(t),t.has("value")&&(this.datetime=ws.fromISO(this.value))}connectedCallback(){super.connectedCallback()}render(){if(this.datetime&&this.store){this.datetime.setLocale(this.store.getLocale());let t="";if(this.display===oh.timedate){const e=Math.abs(this.datetime.diffNow().milliseconds/1e3/60/60);t=e<24?this.datetime.toLocaleString(oh.time):e<8760?this.datetime.toFormat(oh.day):this.datetime.toLocaleString(oh.date)}else if(this.display===oh.relative){if(Math.abs(this.datetime.diffNow().milliseconds/1e3/60)<1)return D`<
|
|
6115
|
+
`}firstUpdated(t){super.firstUpdated(t),this.store=document.querySelector("temba-store")}updated(t){super.updated(t),t.has("value")&&(this.datetime=ws.fromISO(this.value))}connectedCallback(){super.connectedCallback()}render(){if(this.datetime&&this.store){this.datetime.setLocale(this.store.getLocale());let t="";if(this.display===oh.timedate){const e=Math.abs(this.datetime.diffNow().milliseconds/1e3/60/60);t=e<24?this.datetime.toLocaleString(oh.time):e<8760?this.datetime.toFormat(oh.day):this.datetime.toLocaleString(oh.date)}else if(this.display===oh.relative){if(Math.abs(this.datetime.diffNow().milliseconds/1e3/60)<1)return D`<span
|
|
6119
6116
|
class="date"
|
|
6120
6117
|
title="${this.datetime.toLocaleString(oh.datetime)}"
|
|
6121
|
-
|
|
6122
|
-
|
|
6123
|
-
</div>`;t=this.store.getShortDuration(this.datetime)}else if(this.display===oh.duration){if(Math.abs(this.datetime.diffNow().milliseconds/1e3/60)<1)return D`<div
|
|
6118
|
+
>just now</span
|
|
6119
|
+
>`;t=this.store.getShortDuration(this.datetime)}else if(this.display===oh.duration){if(Math.abs(this.datetime.diffNow().milliseconds/1e3/60)<1)return D`<span
|
|
6124
6120
|
class="date"
|
|
6125
6121
|
title="${this.datetime.toLocaleString(oh.datetime)}"
|
|
6126
|
-
|
|
6127
|
-
|
|
6128
|
-
</div>`;t=this.store.getShortDuration(this.datetime)}else t=this.display===oh.day?this.datetime.toLocaleString(oh.day):this.datetime.toLocaleString(oh[this.display]);return D`<div
|
|
6122
|
+
>just now</span
|
|
6123
|
+
>`;t=this.store.getShortDuration(this.datetime)}else t=this.display===oh.day?this.datetime.toLocaleString(oh.day):this.datetime.toLocaleString(oh[this.display]);return D`<span
|
|
6129
6124
|
class="date"
|
|
6130
6125
|
title="${this.datetime.toLocaleString(oh.datetime)}"
|
|
6131
|
-
|
|
6132
|
-
|
|
6133
|
-
</div>`}}}t([ae({type:String})],nh.prototype,"value",void 0),t([ae({type:String})],nh.prototype,"display",void 0),t([ae({type:Object,attribute:!1})],nh.prototype,"datetime",void 0);let sh=class extends se{constructor(){super(...arguments),this.body=D`<temba-loading></temba-loading>`}static get styles(){return r``}updated(t){super.updated(t),t.has("endpoint")&&Nt(this.endpoint).then((t=>{this.body=Ys(t.body)}))}render(){return D`${this.body}`}};t([ae({type:String})],sh.prototype,"endpoint",void 0),t([ae({attribute:!1})],sh.prototype,"body",void 0),sh=t([(t=>e=>"function"==typeof e?((t,e)=>(customElements.define(t,e),e))(t,e):((t,e)=>{const{kind:i,elements:o}=e;return{kind:i,elements:o,finisher(e){customElements.define(t,e)}}})(t,e))("temba-remote")],sh);var rh=sh;class ah extends he{static get styles(){return r`
|
|
6126
|
+
>${t}</span
|
|
6127
|
+
>`}}}t([ae({type:String})],nh.prototype,"value",void 0),t([ae({type:String})],nh.prototype,"display",void 0),t([ae({type:Object,attribute:!1})],nh.prototype,"datetime",void 0);let sh=class extends se{constructor(){super(...arguments),this.body=D`<temba-loading></temba-loading>`}static get styles(){return r``}updated(t){super.updated(t),t.has("endpoint")&&Nt(this.endpoint).then((t=>{this.body=Ys(t.body)}))}render(){return D`${this.body}`}};t([ae({type:String})],sh.prototype,"endpoint",void 0),t([ae({attribute:!1})],sh.prototype,"body",void 0),sh=t([(t=>e=>"function"==typeof e?((t,e)=>(customElements.define(t,e),e))(t,e):((t,e)=>{const{kind:i,elements:o}=e;return{kind:i,elements:o,finisher(e){customElements.define(t,e)}}})(t,e))("temba-remote")],sh);var rh=sh;class ah extends he{static get styles(){return r`
|
|
6134
6128
|
.container {
|
|
6135
6129
|
display: flex;
|
|
6136
6130
|
flex-direction: column;
|
package/dist/sw.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
if(!self.define){let e,t={};const o=(o,n)=>(o=new URL(o+".js",n).href,t[o]||new Promise((t=>{if("document"in self){const e=document.createElement("script");e.src=o,e.onload=t,document.head.appendChild(e)}else e=o,importScripts(o),t()})).then((()=>{let e=t[o];if(!e)throw new Error(`Module ${o} didn’t register its module`);return e})));self.define=(n,s)=>{const i=e||("document"in self?document.currentScript.src:"")||location.href;if(t[i])return;let r={};const l=e=>o(e,i),
|
|
1
|
+
if(!self.define){let e,t={};const o=(o,n)=>(o=new URL(o+".js",n).href,t[o]||new Promise((t=>{if("document"in self){const e=document.createElement("script");e.src=o,e.onload=t,document.head.appendChild(e)}else e=o,importScripts(o),t()})).then((()=>{let e=t[o];if(!e)throw new Error(`Module ${o} didn’t register its module`);return e})));self.define=(n,s)=>{const i=e||("document"in self?document.currentScript.src:"")||location.href;if(t[i])return;let r={};const l=e=>o(e,i),c={module:{uri:i},exports:r,require:l};t[i]=Promise.all(n.map((e=>c[e]||l(e)))).then((e=>(s(...e),r)))}}define(["./workbox-919adfb7"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"736dd89d.js",revision:"5315b93c1141129c63615e9f0c3a9785"},{url:"templates/components-body.html",revision:"7d327fa077f6518e4afec37f08908225"},{url:"templates/components-head.html",revision:"8414a36f926372f37082d7cdb07cb5b6"}],{}),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/index.html"))),e.registerRoute("polyfills/*.js",new e.CacheFirst,"GET")}));
|
|
2
2
|
//# sourceMappingURL=sw.js.map
|
package/dist/sw.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sw.js","sources":["../../tmp/
|
|
1
|
+
{"version":3,"file":"sw.js","sources":["../../tmp/418d797d859dfd53ace27b464065ddae/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/workspaces/temba-components/node_modules/workbox-routing/registerRoute.mjs';\nimport {CacheFirst as workbox_strategies_CacheFirst} from '/workspaces/temba-components/node_modules/workbox-strategies/CacheFirst.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/workspaces/temba-components/node_modules/workbox-core/clientsClaim.mjs';\nimport {precacheAndRoute as workbox_precaching_precacheAndRoute} from '/workspaces/temba-components/node_modules/workbox-precaching/precacheAndRoute.mjs';\nimport {NavigationRoute as workbox_routing_NavigationRoute} from '/workspaces/temba-components/node_modules/workbox-routing/NavigationRoute.mjs';\nimport {createHandlerBoundToURL as workbox_precaching_createHandlerBoundToURL} from '/workspaces/temba-components/node_modules/workbox-precaching/createHandlerBoundToURL.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\n\n\n\n\n\n\nself.skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n/**\n * The precacheAndRoute() method efficiently caches and responds to\n * requests for URLs in the manifest.\n * See https://goo.gl/S9QRab\n */\nworkbox_precaching_precacheAndRoute([\n {\n \"url\": \"736dd89d.js\",\n \"revision\": \"5315b93c1141129c63615e9f0c3a9785\"\n },\n {\n \"url\": \"templates/components-body.html\",\n \"revision\": \"7d327fa077f6518e4afec37f08908225\"\n },\n {\n \"url\": \"templates/components-head.html\",\n \"revision\": \"8414a36f926372f37082d7cdb07cb5b6\"\n }\n], {});\n\nworkbox_routing_registerRoute(new workbox_routing_NavigationRoute(workbox_precaching_createHandlerBoundToURL(\"/index.html\")));\n\n\nworkbox_routing_registerRoute(\"polyfills/*.js\", new workbox_strategies_CacheFirst(), 'GET');\n\n\n\n\n"],"names":["self","skipWaiting","workbox_core_clientsClaim","workbox_precaching_precacheAndRoute","url","revision","workbox","registerRoute","workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"0nBAwBAA,KAAKC,cAELC,EAAAA,eAQAC,EAAAA,iBAAoC,CAClC,CACEC,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,qCAEb,CAAE,GAEwBC,EAAAC,cAAC,IAAIC,EAAAA,gBAAgCC,EAAAA,wBAA2C,iBAGhFH,EAAAC,cAAC,iBAAkB,IAAIG,aAAiC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/
|
|
1
|
+
<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/736dd89d.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.78.0"</script>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<script src="{{STATIC_URL}}croppie/croppie.js"></script><link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/
|
|
1
|
+
<script src="{{STATIC_URL}}croppie/croppie.js"></script><link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/736dd89d.js" crossorigin="anonymous">
|
|
@@ -20,10 +20,7 @@ export class TembaDate extends RapidElement {
|
|
|
20
20
|
static get styles() {
|
|
21
21
|
return css `
|
|
22
22
|
.date {
|
|
23
|
-
display:
|
|
24
|
-
overflow: hidden;
|
|
25
|
-
text-overflow: ellipsis;
|
|
26
|
-
white-space: nowrap;
|
|
23
|
+
display: inline;
|
|
27
24
|
}
|
|
28
25
|
`;
|
|
29
26
|
}
|
|
@@ -59,24 +56,22 @@ export class TembaDate extends RapidElement {
|
|
|
59
56
|
else if (this.display === Display.relative) {
|
|
60
57
|
const minutes = Math.abs(this.datetime.diffNow().milliseconds / 1000 / 60);
|
|
61
58
|
if (minutes < 1) {
|
|
62
|
-
return html `<
|
|
59
|
+
return html `<span
|
|
63
60
|
class="date"
|
|
64
61
|
title="${this.datetime.toLocaleString(Display.datetime)}"
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
</div>`;
|
|
62
|
+
>just now</span
|
|
63
|
+
>`;
|
|
68
64
|
}
|
|
69
65
|
formatted = this.store.getShortDuration(this.datetime);
|
|
70
66
|
}
|
|
71
67
|
else if (this.display === Display.duration) {
|
|
72
68
|
const minutes = Math.abs(this.datetime.diffNow().milliseconds / 1000 / 60);
|
|
73
69
|
if (minutes < 1) {
|
|
74
|
-
return html `<
|
|
70
|
+
return html `<span
|
|
75
71
|
class="date"
|
|
76
72
|
title="${this.datetime.toLocaleString(Display.datetime)}"
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
</div>`;
|
|
73
|
+
>just now</span
|
|
74
|
+
>`;
|
|
80
75
|
}
|
|
81
76
|
formatted = this.store.getShortDuration(this.datetime);
|
|
82
77
|
}
|
|
@@ -86,12 +81,11 @@ export class TembaDate extends RapidElement {
|
|
|
86
81
|
else {
|
|
87
82
|
formatted = this.datetime.toLocaleString(Display[this.display]);
|
|
88
83
|
}
|
|
89
|
-
return html `<
|
|
84
|
+
return html `<span
|
|
90
85
|
class="date"
|
|
91
86
|
title="${this.datetime.toLocaleString(Display.datetime)}"
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
</div>`;
|
|
87
|
+
>${formatted}</span
|
|
88
|
+
>`;
|
|
95
89
|
}
|
|
96
90
|
}
|
|
97
91
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TembaDate.js","sourceRoot":"","sources":["../../../src/date/TembaDate.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAoC,MAAM,KAAK,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE,QAAQ,CAAC,UAAU;IACzB,QAAQ,EAAE,QAAQ,CAAC,cAAc;IACjC,IAAI,EAAE,QAAQ,CAAC,WAAW;IAC1B,QAAQ,EAAE,UAAU;IACpB,QAAQ,EAAE,UAAU;IACpB,QAAQ,EAAE,UAAU;IACpB,GAAG,EAAE,OAAO;CACb,CAAC;AAEF,MAAM,OAAO,SAAU,SAAQ,YAAY;IAA3C;;
|
|
1
|
+
{"version":3,"file":"TembaDate.js","sourceRoot":"","sources":["../../../src/date/TembaDate.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { Store } from '../store/Store';\nimport { DateTime } from 'luxon';\n\nexport const Display = {\n date: DateTime.DATE_SHORT,\n datetime: DateTime.DATETIME_SHORT,\n time: DateTime.TIME_SIMPLE,\n timedate: 'timedate',\n duration: 'duration',\n relative: 'relative',\n day: 'LLL d',\n};\n\nexport class TembaDate extends RapidElement {\n static get styles() {\n return css`\n .date {\n display: inline;\n }\n `;\n }\n\n @property({ type: String })\n value: string;\n\n @property({ type: String })\n display = 'date';\n\n @property({ type: Object, attribute: false })\n datetime: DateTime;\n\n store: Store;\n\n protected firstUpdated(\n changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n ): void {\n super.firstUpdated(changedProperties);\n this.store = document.querySelector('temba-store');\n }\n\n protected updated(\n changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n ): void {\n super.updated(changedProperties);\n if (changedProperties.has('value')) {\n this.datetime = DateTime.fromISO(this.value);\n }\n }\n\n public connectedCallback(): void {\n super.connectedCallback();\n }\n\n public render(): TemplateResult {\n if (this.datetime && this.store) {\n this.datetime.setLocale(this.store.getLocale());\n\n let formatted = '';\n if (this.display === Display.timedate) {\n const hours = Math.abs(\n this.datetime.diffNow().milliseconds / 1000 / 60 / 60\n );\n if (hours < 24) {\n formatted = this.datetime.toLocaleString(Display.time);\n } else if (hours < 24 * 365) {\n formatted = this.datetime.toFormat(Display.day);\n } else {\n formatted = this.datetime.toLocaleString(Display.date);\n }\n } else if (this.display === Display.relative) {\n const minutes = Math.abs(\n this.datetime.diffNow().milliseconds / 1000 / 60\n );\n if (minutes < 1) {\n return html`<span\n class=\"date\"\n title=\"${this.datetime.toLocaleString(Display.datetime)}\"\n >just now</span\n >`;\n }\n\n formatted = this.store.getShortDuration(this.datetime);\n } else if (this.display === Display.duration) {\n const minutes = Math.abs(\n this.datetime.diffNow().milliseconds / 1000 / 60\n );\n if (minutes < 1) {\n return html`<span\n class=\"date\"\n title=\"${this.datetime.toLocaleString(Display.datetime)}\"\n >just now</span\n >`;\n }\n formatted = this.store.getShortDuration(this.datetime);\n } else if (this.display === Display.day) {\n formatted = this.datetime.toLocaleString(Display.day);\n } else {\n formatted = this.datetime.toLocaleString(Display[this.display]);\n }\n\n return html`<span\n class=\"date\"\n title=\"${this.datetime.toLocaleString(Display.datetime)}\"\n >${formatted}</span\n >`;\n }\n }\n}\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
+
import { html, fixture, expect } from '@open-wc/testing';
|
|
1
2
|
import { assertScreenshot, getClip, getComponent, loadStore, mockNow, } from './utils.test';
|
|
2
|
-
import { expect } from '@open-wc/testing';
|
|
3
3
|
const TAG = 'temba-date';
|
|
4
4
|
export const getDate = async (attrs = {}) => {
|
|
5
5
|
attrs['width'] = 100;
|
|
@@ -34,5 +34,15 @@ describe('temba-date', () => {
|
|
|
34
34
|
await assertScreenshot('date/datetime', getClip(date));
|
|
35
35
|
expect(dateString).to.equal('11/18/1978, 9:22 AM');
|
|
36
36
|
});
|
|
37
|
+
it('renders inline', async () => {
|
|
38
|
+
const el = await fixture(html `
|
|
39
|
+
<span
|
|
40
|
+
>Your birthday is
|
|
41
|
+
<temba-date value="1978-11-18T02:22:00.000000-07:00"></temba-date
|
|
42
|
+
>!</span
|
|
43
|
+
>
|
|
44
|
+
`);
|
|
45
|
+
await assertScreenshot('date/date-inline', getClip(el));
|
|
46
|
+
});
|
|
37
47
|
});
|
|
38
48
|
//# sourceMappingURL=temba-date.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"temba-date.test.js","sourceRoot":"","sources":["../../test/temba-date.test.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"temba-date.test.js","sourceRoot":"","sources":["../../test/temba-date.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EACL,gBAAgB,EAChB,OAAO,EACP,YAAY,EACZ,SAAS,EACT,OAAO,GACR,MAAM,cAAc,CAAC;AAEtB,MAAM,GAAG,GAAG,YAAY,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG,KAAK,EAAE,QAAa,EAAE,EAAE,EAAE;IAC/C,KAAK,CAAC,OAAO,CAAC,GAAG,GAAG,CAAC;IACrB,OAAO,CAAC,MAAM,YAAY,CAAC,GAAG,EAAE,KAAK,CAAC,CAAc,CAAC;AACvD,CAAC,CAAC;AAEF,OAAO,CAAC,kCAAkC,CAAC,CAAC;AAE5C,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,UAAU,CAAC,GAAG,EAAE;QACd,SAAS,EAAE,CAAC;IACd,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iBAAiB,EAAE,KAAK,IAAI,EAAE;QAC/B,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,EAAE,KAAK,EAAE,kCAAkC,EAAE,CAAC,CAAC;QAC1E,MAAM,UAAU,GACd,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CACtC,CAAC,SAAS,CAAC;QAEZ,MAAM,gBAAgB,CAAC,WAAW,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;QACnD,MAAM,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAC5C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kBAAkB,EAAE,KAAK,IAAI,EAAE;QAChC,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC;YACzB,KAAK,EAAE,kCAAkC;YACzC,OAAO,EAAE,UAAU;SACpB,CAAC,CAAC;QACH,MAAM,UAAU,GACd,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CACtC,CAAC,SAAS,CAAC;QAEZ,MAAM,gBAAgB,CAAC,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;QACvD,MAAM,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;IAC9C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kBAAkB,EAAE,KAAK,IAAI,EAAE;QAChC,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC;YACzB,KAAK,EAAE,kCAAkC;YACzC,OAAO,EAAE,UAAU;SACpB,CAAC,CAAC;QACH,MAAM,UAAU,GACd,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CACtC,CAAC,SAAS,CAAC;QAEZ,MAAM,gBAAgB,CAAC,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;QACvD,MAAM,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC;IACrD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gBAAgB,EAAE,KAAK,IAAI,EAAE;QAC9B,MAAM,EAAE,GAAgB,MAAM,OAAO,CAAC,IAAI,CAAA;;;;;;KAMzC,CAAC,CAAC;QAEH,MAAM,gBAAgB,CAAC,kBAAkB,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { html, fixture, expect } from '@open-wc/testing';\nimport { TembaDate } from '../src/date/TembaDate';\nimport {\n assertScreenshot,\n getClip,\n getComponent,\n loadStore,\n mockNow,\n} from './utils.test';\n\nconst TAG = 'temba-date';\n\nexport const getDate = async (attrs: any = {}) => {\n attrs['width'] = 100;\n return (await getComponent(TAG, attrs)) as TembaDate;\n};\n\nmockNow('2022-12-02T21:00:00.000000-07:00');\n\ndescribe('temba-date', () => {\n beforeEach(() => {\n loadStore();\n });\n\n it('renders default', async () => {\n const date = await getDate({ value: '1978-11-18T02:22:00.000000-07:00' });\n const dateString = (\n date.shadowRoot.querySelector('.date') as HTMLSpanElement\n ).innerText;\n\n await assertScreenshot('date/date', getClip(date));\n expect(dateString).to.equal('11/18/1978');\n });\n\n it('renders duration', async () => {\n const date = await getDate({\n value: '1978-11-18T02:22:00.000000-07:00',\n display: 'duration',\n });\n const dateString = (\n date.shadowRoot.querySelector('.date') as HTMLSpanElement\n ).innerText;\n\n await assertScreenshot('date/duration', getClip(date));\n expect(dateString).to.equal('44 years ago');\n });\n\n it('renders datetime', async () => {\n const date = await getDate({\n value: '1978-11-18T02:22:00.000000-07:00',\n display: 'datetime',\n });\n const dateString = (\n date.shadowRoot.querySelector('.date') as HTMLSpanElement\n ).innerText;\n\n await assertScreenshot('date/datetime', getClip(date));\n expect(dateString).to.equal('11/18/1978, 9:22 AM');\n });\n\n it('renders inline', async () => {\n const el: HTMLElement = await fixture(html`\n <span\n >Your birthday is\n <temba-date value=\"1978-11-18T02:22:00.000000-07:00\"></temba-date\n >!</span\n >\n `);\n\n await assertScreenshot('date/date-inline', getClip(el));\n });\n});\n"]}
|
package/package.json
CHANGED
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
package/src/date/TembaDate.ts
CHANGED
|
@@ -18,10 +18,7 @@ export class TembaDate extends RapidElement {
|
|
|
18
18
|
static get styles() {
|
|
19
19
|
return css`
|
|
20
20
|
.date {
|
|
21
|
-
display:
|
|
22
|
-
overflow: hidden;
|
|
23
|
-
text-overflow: ellipsis;
|
|
24
|
-
white-space: nowrap;
|
|
21
|
+
display: inline;
|
|
25
22
|
}
|
|
26
23
|
`;
|
|
27
24
|
}
|
|
@@ -78,12 +75,11 @@ export class TembaDate extends RapidElement {
|
|
|
78
75
|
this.datetime.diffNow().milliseconds / 1000 / 60
|
|
79
76
|
);
|
|
80
77
|
if (minutes < 1) {
|
|
81
|
-
return html`<
|
|
78
|
+
return html`<span
|
|
82
79
|
class="date"
|
|
83
80
|
title="${this.datetime.toLocaleString(Display.datetime)}"
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
</div>`;
|
|
81
|
+
>just now</span
|
|
82
|
+
>`;
|
|
87
83
|
}
|
|
88
84
|
|
|
89
85
|
formatted = this.store.getShortDuration(this.datetime);
|
|
@@ -92,12 +88,11 @@ export class TembaDate extends RapidElement {
|
|
|
92
88
|
this.datetime.diffNow().milliseconds / 1000 / 60
|
|
93
89
|
);
|
|
94
90
|
if (minutes < 1) {
|
|
95
|
-
return html`<
|
|
91
|
+
return html`<span
|
|
96
92
|
class="date"
|
|
97
93
|
title="${this.datetime.toLocaleString(Display.datetime)}"
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
</div>`;
|
|
94
|
+
>just now</span
|
|
95
|
+
>`;
|
|
101
96
|
}
|
|
102
97
|
formatted = this.store.getShortDuration(this.datetime);
|
|
103
98
|
} else if (this.display === Display.day) {
|
|
@@ -105,12 +100,12 @@ export class TembaDate extends RapidElement {
|
|
|
105
100
|
} else {
|
|
106
101
|
formatted = this.datetime.toLocaleString(Display[this.display]);
|
|
107
102
|
}
|
|
108
|
-
|
|
103
|
+
|
|
104
|
+
return html`<span
|
|
109
105
|
class="date"
|
|
110
106
|
title="${this.datetime.toLocaleString(Display.datetime)}"
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
</div>`;
|
|
107
|
+
>${formatted}</span
|
|
108
|
+
>`;
|
|
114
109
|
}
|
|
115
110
|
}
|
|
116
111
|
}
|
package/test/temba-date.test.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { html, fixture, expect } from '@open-wc/testing';
|
|
1
2
|
import { TembaDate } from '../src/date/TembaDate';
|
|
2
3
|
import {
|
|
3
4
|
assertScreenshot,
|
|
@@ -6,7 +7,6 @@ import {
|
|
|
6
7
|
loadStore,
|
|
7
8
|
mockNow,
|
|
8
9
|
} from './utils.test';
|
|
9
|
-
import { expect } from '@open-wc/testing';
|
|
10
10
|
|
|
11
11
|
const TAG = 'temba-date';
|
|
12
12
|
|
|
@@ -25,7 +25,7 @@ describe('temba-date', () => {
|
|
|
25
25
|
it('renders default', async () => {
|
|
26
26
|
const date = await getDate({ value: '1978-11-18T02:22:00.000000-07:00' });
|
|
27
27
|
const dateString = (
|
|
28
|
-
date.shadowRoot.querySelector('.date') as
|
|
28
|
+
date.shadowRoot.querySelector('.date') as HTMLSpanElement
|
|
29
29
|
).innerText;
|
|
30
30
|
|
|
31
31
|
await assertScreenshot('date/date', getClip(date));
|
|
@@ -38,7 +38,7 @@ describe('temba-date', () => {
|
|
|
38
38
|
display: 'duration',
|
|
39
39
|
});
|
|
40
40
|
const dateString = (
|
|
41
|
-
date.shadowRoot.querySelector('.date') as
|
|
41
|
+
date.shadowRoot.querySelector('.date') as HTMLSpanElement
|
|
42
42
|
).innerText;
|
|
43
43
|
|
|
44
44
|
await assertScreenshot('date/duration', getClip(date));
|
|
@@ -51,10 +51,22 @@ describe('temba-date', () => {
|
|
|
51
51
|
display: 'datetime',
|
|
52
52
|
});
|
|
53
53
|
const dateString = (
|
|
54
|
-
date.shadowRoot.querySelector('.date') as
|
|
54
|
+
date.shadowRoot.querySelector('.date') as HTMLSpanElement
|
|
55
55
|
).innerText;
|
|
56
56
|
|
|
57
57
|
await assertScreenshot('date/datetime', getClip(date));
|
|
58
58
|
expect(dateString).to.equal('11/18/1978, 9:22 AM');
|
|
59
59
|
});
|
|
60
|
+
|
|
61
|
+
it('renders inline', async () => {
|
|
62
|
+
const el: HTMLElement = await fixture(html`
|
|
63
|
+
<span
|
|
64
|
+
>Your birthday is
|
|
65
|
+
<temba-date value="1978-11-18T02:22:00.000000-07:00"></temba-date
|
|
66
|
+
>!</span
|
|
67
|
+
>
|
|
68
|
+
`);
|
|
69
|
+
|
|
70
|
+
await assertScreenshot('date/date-inline', getClip(el));
|
|
71
|
+
});
|
|
60
72
|
});
|