@nyaruka/temba-components 0.118.2 → 0.118.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/dist/temba-components.js +1 -1
- package/dist/temba-components.js.map +1 -1
- package/out-tsc/src/date/TembaDate.js +2 -1
- package/out-tsc/src/date/TembaDate.js.map +1 -1
- package/out-tsc/test/temba-date.test.js +15 -7
- package/out-tsc/test/temba-date.test.js.map +1 -1
- package/package.json +1 -1
- package/screenshots/truth/date/datetime.png +0 -0
- package/screenshots/truth/date/timedate.png +0 -0
- package/src/date/TembaDate.ts +3 -1
- package/test/temba-date.test.ts +18 -7
|
@@ -44,7 +44,8 @@ export class TembaDate extends RapidElement {
|
|
|
44
44
|
let formatted = '';
|
|
45
45
|
if (this.display === Display.timedate) {
|
|
46
46
|
const hours = Math.abs(this.datetime.diffNow().milliseconds / 1000 / 60 / 60);
|
|
47
|
-
|
|
47
|
+
const day = this.datetime.get('day');
|
|
48
|
+
if (hours < 24 && day == DateTime.now().get('day')) {
|
|
48
49
|
formatted = this.datetime.toLocaleString(Display.time);
|
|
49
50
|
}
|
|
50
51
|
else if (hours < 24 * 365) {
|
|
@@ -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,SAAS,EAAE,WAAW;IACtB,GAAG,EAAE,OAAO;CACb,CAAC;AAEF,MAAM,OAAO,SAAU,SAAQ,YAAY;IAA3C;;QAaE,YAAO,GAAG,MAAM,CAAC;
|
|
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 countdown: 'countdown',\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\n const day = this.datetime.get('day');\n if (hours < 24 && day == DateTime.now().get('day')) {\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.countdown) {\n formatted = this.store.getCountdown(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"]}
|
|
@@ -5,20 +5,20 @@ export const getDate = async (attrs = {}) => {
|
|
|
5
5
|
attrs['width'] = 100;
|
|
6
6
|
return (await getComponent(TAG, attrs));
|
|
7
7
|
};
|
|
8
|
-
mockNow('2022-12-02T21:00:00.000000
|
|
8
|
+
mockNow('2022-12-02T21:00:00.000000');
|
|
9
9
|
describe('temba-date', () => {
|
|
10
10
|
beforeEach(() => {
|
|
11
11
|
loadStore();
|
|
12
12
|
});
|
|
13
13
|
it('renders default', async () => {
|
|
14
|
-
const date = await getDate({ value: '1978-11-18T02:22:00.000000
|
|
14
|
+
const date = await getDate({ value: '1978-11-18T02:22:00.000000' });
|
|
15
15
|
const dateString = date.shadowRoot.querySelector('.date').innerText;
|
|
16
16
|
await assertScreenshot('date/date', getClip(date));
|
|
17
17
|
expect(dateString).to.equal('11/18/1978');
|
|
18
18
|
});
|
|
19
19
|
it('renders duration', async () => {
|
|
20
20
|
const date = await getDate({
|
|
21
|
-
value: '1978-11-18T02:22:00.000000
|
|
21
|
+
value: '1978-11-18T02:22:00.000000',
|
|
22
22
|
display: 'duration'
|
|
23
23
|
});
|
|
24
24
|
const dateString = date.shadowRoot.querySelector('.date').innerText;
|
|
@@ -27,19 +27,27 @@ describe('temba-date', () => {
|
|
|
27
27
|
});
|
|
28
28
|
it('renders datetime', async () => {
|
|
29
29
|
const date = await getDate({
|
|
30
|
-
value: '1978-11-18T02:22:00.000000
|
|
30
|
+
value: '1978-11-18T02:22:00.000000',
|
|
31
31
|
display: 'datetime'
|
|
32
32
|
});
|
|
33
33
|
const dateString = date.shadowRoot.querySelector('.date').innerText;
|
|
34
34
|
await assertScreenshot('date/datetime', getClip(date));
|
|
35
|
-
expect(dateString).to.equal('11/18/1978,
|
|
35
|
+
expect(dateString).to.equal('11/18/1978, 2:22 AM');
|
|
36
|
+
});
|
|
37
|
+
it('renders timedate', async () => {
|
|
38
|
+
const date = await getDate({
|
|
39
|
+
value: '2022-12-01T21:30:00.000000',
|
|
40
|
+
display: 'timedate'
|
|
41
|
+
});
|
|
42
|
+
const dateString = date.shadowRoot.querySelector('.date').innerText;
|
|
43
|
+
await assertScreenshot('date/timedate', getClip(date));
|
|
44
|
+
expect(dateString).to.equal('Dec 1');
|
|
36
45
|
});
|
|
37
46
|
it('renders inline', async () => {
|
|
38
47
|
const el = await fixture(html `
|
|
39
48
|
<span
|
|
40
49
|
>Your birthday is
|
|
41
|
-
<temba-date value="1978-11-18T02:22:00.000000
|
|
42
|
-
>!</span
|
|
50
|
+
<temba-date value="1978-11-18T02:22:00.000000"></temba-date>!</span
|
|
43
51
|
>
|
|
44
52
|
`);
|
|
45
53
|
await assertScreenshot('date/date-inline', getClip(el));
|
|
@@ -1 +1 @@
|
|
|
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,EACR,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,
|
|
1
|
+
{"version":3,"file":"temba-date.test.js","sourceRoot":"","sources":["../../test/temba-date.test.ts"],"names":[],"mappings":"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","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');\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' });\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',\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',\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, 2:22 AM');\n });\n\n it('renders timedate', async () => {\n const date = await getDate({\n value: '2022-12-01T21:30:00.000000',\n display: 'timedate'\n });\n const dateString = (\n date.shadowRoot.querySelector('.date') as HTMLSpanElement\n ).innerText;\n await assertScreenshot('date/timedate', getClip(date));\n expect(dateString).to.equal('Dec 1');\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\"></temba-date>!</span\n >\n `);\n\n await assertScreenshot('date/date-inline', getClip(el));\n });\n});\n"]}
|
package/package.json
CHANGED
|
Binary file
|
|
Binary file
|
package/src/date/TembaDate.ts
CHANGED
|
@@ -64,7 +64,9 @@ export class TembaDate extends RapidElement {
|
|
|
64
64
|
const hours = Math.abs(
|
|
65
65
|
this.datetime.diffNow().milliseconds / 1000 / 60 / 60
|
|
66
66
|
);
|
|
67
|
-
|
|
67
|
+
|
|
68
|
+
const day = this.datetime.get('day');
|
|
69
|
+
if (hours < 24 && day == DateTime.now().get('day')) {
|
|
68
70
|
formatted = this.datetime.toLocaleString(Display.time);
|
|
69
71
|
} else if (hours < 24 * 365) {
|
|
70
72
|
formatted = this.datetime.toFormat(Display.day);
|
package/test/temba-date.test.ts
CHANGED
|
@@ -15,7 +15,7 @@ export const getDate = async (attrs: any = {}) => {
|
|
|
15
15
|
return (await getComponent(TAG, attrs)) as TembaDate;
|
|
16
16
|
};
|
|
17
17
|
|
|
18
|
-
mockNow('2022-12-02T21:00:00.000000
|
|
18
|
+
mockNow('2022-12-02T21:00:00.000000');
|
|
19
19
|
|
|
20
20
|
describe('temba-date', () => {
|
|
21
21
|
beforeEach(() => {
|
|
@@ -23,7 +23,7 @@ describe('temba-date', () => {
|
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
it('renders default', async () => {
|
|
26
|
-
const date = await getDate({ value: '1978-11-18T02:22:00.000000
|
|
26
|
+
const date = await getDate({ value: '1978-11-18T02:22:00.000000' });
|
|
27
27
|
const dateString = (
|
|
28
28
|
date.shadowRoot.querySelector('.date') as HTMLSpanElement
|
|
29
29
|
).innerText;
|
|
@@ -34,7 +34,7 @@ describe('temba-date', () => {
|
|
|
34
34
|
|
|
35
35
|
it('renders duration', async () => {
|
|
36
36
|
const date = await getDate({
|
|
37
|
-
value: '1978-11-18T02:22:00.000000
|
|
37
|
+
value: '1978-11-18T02:22:00.000000',
|
|
38
38
|
display: 'duration'
|
|
39
39
|
});
|
|
40
40
|
const dateString = (
|
|
@@ -47,7 +47,7 @@ describe('temba-date', () => {
|
|
|
47
47
|
|
|
48
48
|
it('renders datetime', async () => {
|
|
49
49
|
const date = await getDate({
|
|
50
|
-
value: '1978-11-18T02:22:00.000000
|
|
50
|
+
value: '1978-11-18T02:22:00.000000',
|
|
51
51
|
display: 'datetime'
|
|
52
52
|
});
|
|
53
53
|
const dateString = (
|
|
@@ -55,15 +55,26 @@ describe('temba-date', () => {
|
|
|
55
55
|
).innerText;
|
|
56
56
|
|
|
57
57
|
await assertScreenshot('date/datetime', getClip(date));
|
|
58
|
-
expect(dateString).to.equal('11/18/1978,
|
|
58
|
+
expect(dateString).to.equal('11/18/1978, 2:22 AM');
|
|
59
|
+
});
|
|
60
|
+
|
|
61
|
+
it('renders timedate', async () => {
|
|
62
|
+
const date = await getDate({
|
|
63
|
+
value: '2022-12-01T21:30:00.000000',
|
|
64
|
+
display: 'timedate'
|
|
65
|
+
});
|
|
66
|
+
const dateString = (
|
|
67
|
+
date.shadowRoot.querySelector('.date') as HTMLSpanElement
|
|
68
|
+
).innerText;
|
|
69
|
+
await assertScreenshot('date/timedate', getClip(date));
|
|
70
|
+
expect(dateString).to.equal('Dec 1');
|
|
59
71
|
});
|
|
60
72
|
|
|
61
73
|
it('renders inline', async () => {
|
|
62
74
|
const el: HTMLElement = await fixture(html`
|
|
63
75
|
<span
|
|
64
76
|
>Your birthday is
|
|
65
|
-
<temba-date value="1978-11-18T02:22:00.000000
|
|
66
|
-
>!</span
|
|
77
|
+
<temba-date value="1978-11-18T02:22:00.000000"></temba-date>!</span
|
|
67
78
|
>
|
|
68
79
|
`);
|
|
69
80
|
|