@nyaruka/temba-components 0.32.0 → 0.32.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/CHANGELOG.md +6 -0
- package/dist/{193d2225.js → d27d4001.js} +1 -1
- package/dist/index.js +1 -1
- 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/datepicker/DatePicker.js +2 -1
- package/out-tsc/src/datepicker/DatePicker.js.map +1 -1
- package/out-tsc/test/temba-datepicker.test.js +5 -0
- package/out-tsc/test/temba-datepicker.test.js.map +1 -1
- package/package.json +1 -1
- package/screenshots/truth/datepicker/date-truncated-time.png +0 -0
- package/src/datepicker/DatePicker.ts +2 -1
- package/test/temba-datepicker.test.ts +9 -0
package/CHANGELOG.md
CHANGED
|
@@ -4,8 +4,14 @@ 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.32.1](https://github.com/nyaruka/temba-components/compare/v0.32.0...v0.32.1)
|
|
8
|
+
|
|
9
|
+
- Truncate time when picking dates [`#205`](https://github.com/nyaruka/temba-components/pull/205)
|
|
10
|
+
|
|
7
11
|
#### [v0.32.0](https://github.com/nyaruka/temba-components/compare/v0.31.9...v0.32.0)
|
|
8
12
|
|
|
13
|
+
> 15 September 2022
|
|
14
|
+
|
|
9
15
|
- Remove lit-flatpickr [`#204`](https://github.com/nyaruka/temba-components/pull/204)
|
|
10
16
|
- Initial commit for html5 based datepicker [`a8fb395`](https://github.com/nyaruka/temba-components/commit/a8fb395c39890a9a30f580020430b1ead9711bbd)
|
|
11
17
|
- Support both date and datetime [`46073b7`](https://github.com/nyaruka/temba-components/commit/46073b7ca4b6248e46a982b72e3fb19ad84e68d8)
|
|
@@ -5096,7 +5096,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
|
|
|
5096
5096
|
margin: 0;
|
|
5097
5097
|
padding: 0;
|
|
5098
5098
|
}
|
|
5099
|
-
`}serializeValue(t){return t}firstUpdated(t){if(t.has("value"))if(this.time){if(this.timezone=this.timezone||Intl.DateTimeFormat().resolvedOptions().timeZone,this.timezoneFriendly=this.timezone.replace("_"," ").replace("/",", "),this.value){let t=Mo.fromSQL(this.value).setZone(this.timezone);t.invalid&&(t=Mo.fromISO(this.value).setZone(this.timezone)),this.datetime=t,this.setValue(this.datetime.toUTC().toISO())}}else this.
|
|
5099
|
+
`}serializeValue(t){return t}firstUpdated(t){if(t.has("value"))if(this.time){if(this.timezone=this.timezone||Intl.DateTimeFormat().resolvedOptions().timeZone,this.timezoneFriendly=this.timezone.replace("_"," ").replace("/",", "),this.value){let t=Mo.fromSQL(this.value).setZone(this.timezone);t.invalid&&(t=Mo.fromISO(this.value).setZone(this.timezone)),this.datetime=t,this.setValue(this.datetime.toUTC().toISO())}}else this.datetime=Mo.fromSQL(this.value),this.setValue(this.datetime.toISODate())}updated(t){super.updated(t),t.has("timezone")&&this.time&&(this.timezone=this.timezone||Intl.DateTimeFormat().resolvedOptions().timeZone,this.timezoneFriendly=this.timezone.replace("_"," ").replace("/",", "),this.requestUpdate("value"))}handleChange(t){t.preventDefault(),t.stopPropagation()}handleBlur(t){this.time?(this.datetime=Mo.fromISO(t.target.value,{zone:this.timezone}),this.setValue(this.datetime.toUTC().toISO())):this.setValue(t.target.value),this.fireEvent("change")}handleClicked(){this.shadowRoot.querySelector("input").focus()}render(){const t=gt({unset:!this.value});let e=null;return this.time&&this.datetime&&!this.datetime.invalid?e=this.datetime.toFormat("yyyy-LL-dd'T'HH:mm"):this.time||(e=this.value),P`
|
|
5100
5100
|
<temba-field
|
|
5101
5101
|
name=${this.name}
|
|
5102
5102
|
.label="${this.label}"
|
package/dist/index.js
CHANGED
|
@@ -5096,7 +5096,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
|
|
|
5096
5096
|
margin: 0;
|
|
5097
5097
|
padding: 0;
|
|
5098
5098
|
}
|
|
5099
|
-
`}serializeValue(t){return t}firstUpdated(t){if(t.has("value"))if(this.time){if(this.timezone=this.timezone||Intl.DateTimeFormat().resolvedOptions().timeZone,this.timezoneFriendly=this.timezone.replace("_"," ").replace("/",", "),this.value){let t=Mo.fromSQL(this.value).setZone(this.timezone);t.invalid&&(t=Mo.fromISO(this.value).setZone(this.timezone)),this.datetime=t,this.setValue(this.datetime.toUTC().toISO())}}else this.
|
|
5099
|
+
`}serializeValue(t){return t}firstUpdated(t){if(t.has("value"))if(this.time){if(this.timezone=this.timezone||Intl.DateTimeFormat().resolvedOptions().timeZone,this.timezoneFriendly=this.timezone.replace("_"," ").replace("/",", "),this.value){let t=Mo.fromSQL(this.value).setZone(this.timezone);t.invalid&&(t=Mo.fromISO(this.value).setZone(this.timezone)),this.datetime=t,this.setValue(this.datetime.toUTC().toISO())}}else this.datetime=Mo.fromSQL(this.value),this.setValue(this.datetime.toISODate())}updated(t){super.updated(t),t.has("timezone")&&this.time&&(this.timezone=this.timezone||Intl.DateTimeFormat().resolvedOptions().timeZone,this.timezoneFriendly=this.timezone.replace("_"," ").replace("/",", "),this.requestUpdate("value"))}handleChange(t){t.preventDefault(),t.stopPropagation()}handleBlur(t){this.time?(this.datetime=Mo.fromISO(t.target.value,{zone:this.timezone}),this.setValue(this.datetime.toUTC().toISO())):this.setValue(t.target.value),this.fireEvent("change")}handleClicked(){this.shadowRoot.querySelector("input").focus()}render(){const t=gt({unset:!this.value});let e=null;return this.time&&this.datetime&&!this.datetime.invalid?e=this.datetime.toFormat("yyyy-LL-dd'T'HH:mm"):this.time||(e=this.value),P`
|
|
5100
5100
|
<temba-field
|
|
5101
5101
|
name=${this.name}
|
|
5102
5102
|
.label="${this.label}"
|
package/dist/sw.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
if(!self.define){const e=e=>{"require"!==e&&(e+=".js");let r=Promise.resolve();return t[e]||(r=new Promise(async r=>{if("document"in self){const t=document.createElement("script");t.src=e,document.head.appendChild(t),t.onload=r}else importScripts(e),r()})),r.then(()=>{if(!t[e])throw new Error(`Module ${e} didn’t register its module`);return t[e]})},r=(r,t)=>{Promise.all(r.map(e)).then(e=>t(1===e.length?e[0]:e))},t={require:Promise.resolve(r)};self.define=(r,s,o)=>{t[r]||(t[r]=Promise.resolve().then(()=>{let t={};const n={uri:location.origin+r.slice(1)};return Promise.all(s.map(r=>{switch(r){case"exports":return t;case"module":return n;default:return e(r)}})).then(e=>{const r=o(...e);return t.default||(t.default=r),t})}))}}define("./sw.js",["./workbox-80efdfd1"],(function(e){"use strict";e.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"
|
|
1
|
+
if(!self.define){const e=e=>{"require"!==e&&(e+=".js");let r=Promise.resolve();return t[e]||(r=new Promise(async r=>{if("document"in self){const t=document.createElement("script");t.src=e,document.head.appendChild(t),t.onload=r}else importScripts(e),r()})),r.then(()=>{if(!t[e])throw new Error(`Module ${e} didn’t register its module`);return t[e]})},r=(r,t)=>{Promise.all(r.map(e)).then(e=>t(1===e.length?e[0]:e))},t={require:Promise.resolve(r)};self.define=(r,s,o)=>{t[r]||(t[r]=Promise.resolve().then(()=>{let t={};const n={uri:location.origin+r.slice(1)};return Promise.all(s.map(r=>{switch(r){case"exports":return t;case"module":return n;default:return e(r)}})).then(e=>{const r=o(...e);return t.default||(t.default=r),t})}))}}define("./sw.js",["./workbox-80efdfd1"],(function(e){"use strict";e.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"d27d4001.js",revision:"91d61804c50b753d8a520b1b1bfd134d"},{url:"templates/components-body.html",revision:"3c94c0eb00c9598f8981ab9fbcbc5be2"},{url:"templates/components-head.html",revision:"758fc3e0f59c2493f7fbfb7a568d3ee0"}],{}),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/e88f25390903d1e9f8044342e203d899/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/registerRoute.mjs';\nimport {CacheFirst as workbox_strategies_CacheFirst} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-strategies/CacheFirst.mjs';\nimport {skipWaiting as workbox_core_skipWaiting} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/skipWaiting.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/clientsClaim.mjs';\nimport {precacheAndRoute as workbox_precaching_precacheAndRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/precacheAndRoute.mjs';\nimport {NavigationRoute as workbox_routing_NavigationRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/NavigationRoute.mjs';\nimport {createHandlerBoundToURL as workbox_precaching_createHandlerBoundToURL} from '/home/runner/work/temba-components/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\nworkbox_core_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\": \"d27d4001.js\",\n \"revision\": \"91d61804c50b753d8a520b1b1bfd134d\"\n },\n {\n \"url\": \"templates/components-body.html\",\n \"revision\": \"3c94c0eb00c9598f8981ab9fbcbc5be2\"\n },\n {\n \"url\": \"templates/components-head.html\",\n \"revision\": \"758fc3e0f59c2493f7fbfb7a568d3ee0\"\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":["url","revision","workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"k1BAmCoC,CAClC,CACEA,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,qCAEb,oBAE2B,IAAIC,kBAAgCC,0BAA2C,iCAG/E,iBAAkB,IAAIC,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/d27d4001.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.32.1"</script>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/
|
|
1
|
+
<link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/d27d4001.js" crossorigin="anonymous">
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../src/datepicker/DatePicker.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css, PropertyValueMap } from 'lit';\nimport { property } from 'lit/decorators';\nimport { FormElement } from '../FormElement';\nimport { getClasses } from '../utils';\nimport { DateTime } from 'luxon';\n\nexport default class DatePicker extends FormElement {\n static get styles() {\n return css`\n :host {\n display: block;\n }\n\n .container {\n border-radius: var(--curvature);\n border: 1px solid var(--color-widget-border);\n display: flex;\n cursor: pointer;\n box-shadow: var(--widget-box-shadow);\n }\n\n .input-wrapper {\n padding: var(--temba-textinput-padding);\n flex-grow: 1;\n }\n\n .tz {\n margin-left: 0.5em;\n font-size: 0.8em;\n flex-direction: column;\n align-self: stretch;\n color: #888;\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n padding: 0em 1em;\n font-weight: 400;\n cursor: pointer;\n margin: auto;\n }\n\n .tz .label {\n font-size: 0.8em;\n color: #aaa;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .tz .zone {\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .tz-wrapper {\n background: #efefef;\n border-top-right-radius: var(--curvature);\n border-bottom-right-radius: var(--curvature);\n display: flex;\n flex-direction: row;\n align-items: center;\n }\n\n .container:focus-within {\n border-color: var(--color-focus);\n background: var(--color-widget-bg-focused);\n box-shadow: var(--widget-box-shadow-focused);\n }\n\n input {\n color: var(--color-widget-text);\n border: 0px;\n font-family: var(--font-family);\n font-weight: 300;\n outline: none;\n width: 100%;\n font-size: 13px;\n padding: 0px;\n margin: 0px;\n line-height: 1em;\n }\n\n input.unset {\n color: #ddd;\n }\n\n input.unset:focus {\n color: var(--color-widget-text);\n }\n\n input:focus {\n outline: none;\n }\n\n ::-webkit-calendar-picker-indicator {\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"15\" viewBox=\"0 0 24 24\"><path fill=\"%23bbbbbb\" d=\"M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z\"/></svg>');\n cursor: pointer;\n margin: 0;\n padding: 0;\n }\n\n ::-webkit-calendar-picker-indicator:hover {\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"15\" viewBox=\"0 0 24 24\"><path fill=\"%23777777\" d=\"M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z\"/></svg>');\n cursor: pointer;\n margin: 0;\n padding: 0;\n }\n `;\n }\n\n @property({ type: String })\n timezone = '';\n\n @property({ type: String })\n timezoneFriendly = '';\n\n @property({ type: Object })\n datetime = null;\n\n @property({ type: Boolean })\n time = false;\n\n /** we just return the value since it should be a string */\n public serializeValue(value: any): string {\n return value;\n }\n\n public constructor() {\n super();\n }\n\n protected firstUpdated(\n changed: PropertyValueMap<any> | Map<PropertyKey, unknown>\n ): void {\n if (changed.has('value')) {\n // default to the local browser zone\n if (this.time) {\n this.timezone =\n this.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone;\n this.timezoneFriendly = this.timezone\n .replace('_', ' ')\n .replace('/', ', ');\n\n if (this.value) {\n // we fire a change event on blur\n let datetime = DateTime.fromSQL(this.value).setZone(this.timezone);\n // if we can't read it as a sql stamp, try iso\n if (datetime.invalid) {\n datetime = DateTime.fromISO(this.value).setZone(this.timezone);\n }\n this.datetime = datetime;\n this.setValue(this.datetime.toUTC().toISO());\n }\n } else {\n this.setValue(this.value);\n }\n }\n }\n\n public updated(changed: Map<string, any>): void {\n super.updated(changed);\n if (changed.has('timezone') && this.time) {\n this.timezone =\n this.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone;\n this.timezoneFriendly = this.timezone\n .replace('_', ' ')\n .replace('/', ', ');\n this.requestUpdate('value');\n }\n }\n\n public handleChange(event) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n public handleBlur(event) {\n if (this.time) {\n this.datetime = DateTime.fromISO(event.target.value, {\n zone: this.timezone,\n });\n this.setValue(this.datetime.toUTC().toISO());\n } else {\n this.setValue(event.target.value);\n }\n this.fireEvent('change');\n }\n\n public handleClicked() {\n this.shadowRoot.querySelector('input').focus();\n }\n\n public render(): TemplateResult {\n const classes = getClasses({ unset: !this.value });\n\n let dateWidgetValue = null;\n if (this.time && this.datetime && !this.datetime.invalid) {\n dateWidgetValue = this.datetime.toFormat(\"yyyy-LL-dd'T'HH:mm\");\n } else if (!this.time) {\n dateWidgetValue = this.value;\n }\n\n return html`\n <temba-field\n name=${this.name}\n .label=\"${this.label}\"\n .helpText=\"${this.helpText}\"\n .errors=${this.errors}\n .widgetOnly=${this.widgetOnly}\n .hideLabel=${this.hideLabel}\n .disabled=${this.disabled}\n >\n <div class=\"container\" @click=${this.handleClicked}>\n <slot name=\"prefix\"></slot>\n <div class=\"input-wrapper\">\n <input\n class=${classes}\n name=${this.label}\n value=${dateWidgetValue}\n type=\"${this.time ? 'datetime-local' : 'date'}\"\n @change=${this.handleChange}\n @blur=${this.handleBlur}\n />\n </div>\n ${this.time\n ? html`\n <div class=\"tz-wrapper\">\n <div class=\"tz\">\n <div class=\"label\">Time Zone</div>\n <div class=\"zone\">${this.timezoneFriendly}</div>\n </div>\n </div>\n `\n : null}\n </div>\n </temba-field>\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../src/datepicker/DatePicker.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css, PropertyValueMap } from 'lit';\nimport { property } from 'lit/decorators';\nimport { FormElement } from '../FormElement';\nimport { getClasses } from '../utils';\nimport { DateTime } from 'luxon';\n\nexport default class DatePicker extends FormElement {\n static get styles() {\n return css`\n :host {\n display: block;\n }\n\n .container {\n border-radius: var(--curvature);\n border: 1px solid var(--color-widget-border);\n display: flex;\n cursor: pointer;\n box-shadow: var(--widget-box-shadow);\n }\n\n .input-wrapper {\n padding: var(--temba-textinput-padding);\n flex-grow: 1;\n }\n\n .tz {\n margin-left: 0.5em;\n font-size: 0.8em;\n flex-direction: column;\n align-self: stretch;\n color: #888;\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n padding: 0em 1em;\n font-weight: 400;\n cursor: pointer;\n margin: auto;\n }\n\n .tz .label {\n font-size: 0.8em;\n color: #aaa;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .tz .zone {\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .tz-wrapper {\n background: #efefef;\n border-top-right-radius: var(--curvature);\n border-bottom-right-radius: var(--curvature);\n display: flex;\n flex-direction: row;\n align-items: center;\n }\n\n .container:focus-within {\n border-color: var(--color-focus);\n background: var(--color-widget-bg-focused);\n box-shadow: var(--widget-box-shadow-focused);\n }\n\n input {\n color: var(--color-widget-text);\n border: 0px;\n font-family: var(--font-family);\n font-weight: 300;\n outline: none;\n width: 100%;\n font-size: 13px;\n padding: 0px;\n margin: 0px;\n line-height: 1em;\n }\n\n input.unset {\n color: #ddd;\n }\n\n input.unset:focus {\n color: var(--color-widget-text);\n }\n\n input:focus {\n outline: none;\n }\n\n ::-webkit-calendar-picker-indicator {\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"15\" viewBox=\"0 0 24 24\"><path fill=\"%23bbbbbb\" d=\"M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z\"/></svg>');\n cursor: pointer;\n margin: 0;\n padding: 0;\n }\n\n ::-webkit-calendar-picker-indicator:hover {\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"15\" viewBox=\"0 0 24 24\"><path fill=\"%23777777\" d=\"M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z\"/></svg>');\n cursor: pointer;\n margin: 0;\n padding: 0;\n }\n `;\n }\n\n @property({ type: String })\n timezone = '';\n\n @property({ type: String })\n timezoneFriendly = '';\n\n @property({ type: Object })\n datetime = null;\n\n @property({ type: Boolean })\n time = false;\n\n /** we just return the value since it should be a string */\n public serializeValue(value: any): string {\n return value;\n }\n\n public constructor() {\n super();\n }\n\n protected firstUpdated(\n changed: PropertyValueMap<any> | Map<PropertyKey, unknown>\n ): void {\n if (changed.has('value')) {\n // default to the local browser zone\n if (this.time) {\n this.timezone =\n this.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone;\n this.timezoneFriendly = this.timezone\n .replace('_', ' ')\n .replace('/', ', ');\n\n if (this.value) {\n // we fire a change event on blur\n let datetime = DateTime.fromSQL(this.value).setZone(this.timezone);\n // if we can't read it as a sql stamp, try iso\n if (datetime.invalid) {\n datetime = DateTime.fromISO(this.value).setZone(this.timezone);\n }\n this.datetime = datetime;\n this.setValue(this.datetime.toUTC().toISO());\n }\n } else {\n this.datetime = DateTime.fromSQL(this.value);\n this.setValue(this.datetime.toISODate());\n }\n }\n }\n\n public updated(changed: Map<string, any>): void {\n super.updated(changed);\n if (changed.has('timezone') && this.time) {\n this.timezone =\n this.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone;\n this.timezoneFriendly = this.timezone\n .replace('_', ' ')\n .replace('/', ', ');\n this.requestUpdate('value');\n }\n }\n\n public handleChange(event) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n public handleBlur(event) {\n if (this.time) {\n this.datetime = DateTime.fromISO(event.target.value, {\n zone: this.timezone,\n });\n this.setValue(this.datetime.toUTC().toISO());\n } else {\n this.setValue(event.target.value);\n }\n this.fireEvent('change');\n }\n\n public handleClicked() {\n this.shadowRoot.querySelector('input').focus();\n }\n\n public render(): TemplateResult {\n const classes = getClasses({ unset: !this.value });\n\n let dateWidgetValue = null;\n if (this.time && this.datetime && !this.datetime.invalid) {\n dateWidgetValue = this.datetime.toFormat(\"yyyy-LL-dd'T'HH:mm\");\n } else if (!this.time) {\n dateWidgetValue = this.value;\n }\n\n return html`\n <temba-field\n name=${this.name}\n .label=\"${this.label}\"\n .helpText=\"${this.helpText}\"\n .errors=${this.errors}\n .widgetOnly=${this.widgetOnly}\n .hideLabel=${this.hideLabel}\n .disabled=${this.disabled}\n >\n <div class=\"container\" @click=${this.handleClicked}>\n <slot name=\"prefix\"></slot>\n <div class=\"input-wrapper\">\n <input\n class=${classes}\n name=${this.label}\n value=${dateWidgetValue}\n type=\"${this.time ? 'datetime-local' : 'date'}\"\n @change=${this.handleChange}\n @blur=${this.handleBlur}\n />\n </div>\n ${this.time\n ? html`\n <div class=\"tz-wrapper\">\n <div class=\"tz\">\n <div class=\"label\">Time Zone</div>\n <div class=\"zone\">${this.timezoneFriendly}</div>\n </div>\n </div>\n `\n : null}\n </div>\n </temba-field>\n `;\n }\n}\n"]}
|
|
@@ -62,5 +62,10 @@ describe('temba-datepicker', () => {
|
|
|
62
62
|
expect(picker.value).to.equal('2024-12-25');
|
|
63
63
|
await assertScreenshot('datepicker/updated-keyboard-date', getClip(picker));
|
|
64
64
|
});
|
|
65
|
+
it('truncates time on dates', async () => {
|
|
66
|
+
const picker = await createPicker(getPickerHTML({ value: '2020-01-20 00:00:00' }));
|
|
67
|
+
expect(picker.value).to.equal('2020-01-20');
|
|
68
|
+
await assertScreenshot('datepicker/date-truncated-time', getClip(picker));
|
|
69
|
+
});
|
|
65
70
|
});
|
|
66
71
|
//# sourceMappingURL=temba-datepicker.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"temba-datepicker.test.js","sourceRoot":"","sources":["../../test/temba-datepicker.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, expect, assert } from '@open-wc/testing';\nimport DatePicker from '../src/datepicker/DatePicker';\nimport { assertScreenshot, getAttributes, getClip } from './utils.test';\n\nexport const getPickerHTML = (attrs: any = {}) => {\n return `<temba-datepicker ${getAttributes(attrs)}></temba-datepicker>`;\n};\n\nexport const createPicker = async (def: string) => {\n const parentNode = document.createElement('div');\n parentNode.setAttribute('style', 'width: 400px;');\n parentNode.id = 'parent';\n const picker: DatePicker = await fixture(def, { parentNode });\n return picker;\n};\n\ndescribe('temba-datepicker', () => {\n it('can create a date picker', async () => {\n const picker: DatePicker = await createPicker(getPickerHTML());\n assert.instanceOf(picker, DatePicker);\n await assertScreenshot('datepicker/date', getClip(picker));\n });\n\n it('can create a datetime picker', async () => {\n const picker: DatePicker = await createPicker(\n getPickerHTML({ time: true })\n );\n assert.instanceOf(picker, DatePicker);\n await assertScreenshot('datepicker/datetime', getClip(picker));\n });\n\n it('can be initialized with an iso date', async () => {\n const picker: DatePicker = await createPicker(\n getPickerHTML({ value: '2020-01-20T14:00Z', time: true })\n );\n\n // default should be browser locale, which for our tests is UTC\n expect(picker.timezone).to.equal('UTC');\n\n // we should display in the current locale\n await assertScreenshot('datepicker/initial-value', getClip(picker));\n\n // but our value should be our original value as a full iso date\n expect(picker.value).is.equal('2020-01-20T14:00:00.000Z');\n });\n\n it('can be initialized with a timezone', async () => {\n const picker: DatePicker = await createPicker(\n getPickerHTML({\n value: '2020-01-20T14:00Z',\n timezone: 'America/New_York',\n time: true,\n })\n );\n\n expect(picker.timezone).to.equal('America/New_York');\n\n // we should display in the eastern timezone\n await assertScreenshot('datepicker/initial-timezone', getClip(picker));\n expect(picker.value).to.equal('2020-01-20T14:00:00.000Z');\n });\n\n it('can be updated via keyboard', async () => {\n const picker: DatePicker = await createPicker(\n getPickerHTML({ value: '2020-01-20T14:00Z', id: 'picker', time: true })\n );\n\n // click into the picker and update the date\n await click('#picker');\n await typeInto('#picker', '01202024', false);\n\n // click away to update\n picker.blur();\n\n expect(picker.value).to.equal('2024-01-20T14:00:00.000Z');\n await assertScreenshot('datepicker/updated-keyboard', getClip(picker));\n });\n\n it('can update date via keyboard', async () => {\n const picker: DatePicker = await createPicker(\n getPickerHTML({ value: '2020-01-20', id: 'picker' })\n );\n\n // click into the picker and update the date\n await click('#picker');\n await typeInto('#picker', '12252024', false);\n\n // click away to update\n picker.blur();\n\n expect(picker.value).to.equal('2024-12-25');\n await assertScreenshot('datepicker/updated-keyboard-date', getClip(picker));\n });\n});\n"]}
|
|
1
|
+
{"version":3,"file":"temba-datepicker.test.js","sourceRoot":"","sources":["../../test/temba-datepicker.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, expect, assert } from '@open-wc/testing';\nimport DatePicker from '../src/datepicker/DatePicker';\nimport { assertScreenshot, getAttributes, getClip } from './utils.test';\n\nexport const getPickerHTML = (attrs: any = {}) => {\n return `<temba-datepicker ${getAttributes(attrs)}></temba-datepicker>`;\n};\n\nexport const createPicker = async (def: string) => {\n const parentNode = document.createElement('div');\n parentNode.setAttribute('style', 'width: 400px;');\n parentNode.id = 'parent';\n const picker: DatePicker = await fixture(def, { parentNode });\n return picker;\n};\n\ndescribe('temba-datepicker', () => {\n it('can create a date picker', async () => {\n const picker: DatePicker = await createPicker(getPickerHTML());\n assert.instanceOf(picker, DatePicker);\n await assertScreenshot('datepicker/date', getClip(picker));\n });\n\n it('can create a datetime picker', async () => {\n const picker: DatePicker = await createPicker(\n getPickerHTML({ time: true })\n );\n assert.instanceOf(picker, DatePicker);\n await assertScreenshot('datepicker/datetime', getClip(picker));\n });\n\n it('can be initialized with an iso date', async () => {\n const picker: DatePicker = await createPicker(\n getPickerHTML({ value: '2020-01-20T14:00Z', time: true })\n );\n\n // default should be browser locale, which for our tests is UTC\n expect(picker.timezone).to.equal('UTC');\n\n // we should display in the current locale\n await assertScreenshot('datepicker/initial-value', getClip(picker));\n\n // but our value should be our original value as a full iso date\n expect(picker.value).is.equal('2020-01-20T14:00:00.000Z');\n });\n\n it('can be initialized with a timezone', async () => {\n const picker: DatePicker = await createPicker(\n getPickerHTML({\n value: '2020-01-20T14:00Z',\n timezone: 'America/New_York',\n time: true,\n })\n );\n\n expect(picker.timezone).to.equal('America/New_York');\n\n // we should display in the eastern timezone\n await assertScreenshot('datepicker/initial-timezone', getClip(picker));\n expect(picker.value).to.equal('2020-01-20T14:00:00.000Z');\n });\n\n it('can be updated via keyboard', async () => {\n const picker: DatePicker = await createPicker(\n getPickerHTML({ value: '2020-01-20T14:00Z', id: 'picker', time: true })\n );\n\n // click into the picker and update the date\n await click('#picker');\n await typeInto('#picker', '01202024', false);\n\n // click away to update\n picker.blur();\n\n expect(picker.value).to.equal('2024-01-20T14:00:00.000Z');\n await assertScreenshot('datepicker/updated-keyboard', getClip(picker));\n });\n\n it('can update date via keyboard', async () => {\n const picker: DatePicker = await createPicker(\n getPickerHTML({ value: '2020-01-20', id: 'picker' })\n );\n\n // click into the picker and update the date\n await click('#picker');\n await typeInto('#picker', '12252024', false);\n\n // click away to update\n picker.blur();\n\n expect(picker.value).to.equal('2024-12-25');\n await assertScreenshot('datepicker/updated-keyboard-date', getClip(picker));\n });\n\n it('truncates time on dates', async () => {\n const picker: DatePicker = await createPicker(\n getPickerHTML({ value: '2020-01-20 00:00:00' })\n );\n\n expect(picker.value).to.equal('2020-01-20');\n await assertScreenshot('datepicker/date-truncated-time', getClip(picker));\n });\n});\n"]}
|
package/package.json
CHANGED
|
Binary file
|
|
@@ -151,7 +151,8 @@ export default class DatePicker extends FormElement {
|
|
|
151
151
|
this.setValue(this.datetime.toUTC().toISO());
|
|
152
152
|
}
|
|
153
153
|
} else {
|
|
154
|
-
this.
|
|
154
|
+
this.datetime = DateTime.fromSQL(this.value);
|
|
155
|
+
this.setValue(this.datetime.toISODate());
|
|
155
156
|
}
|
|
156
157
|
}
|
|
157
158
|
}
|
|
@@ -91,4 +91,13 @@ describe('temba-datepicker', () => {
|
|
|
91
91
|
expect(picker.value).to.equal('2024-12-25');
|
|
92
92
|
await assertScreenshot('datepicker/updated-keyboard-date', getClip(picker));
|
|
93
93
|
});
|
|
94
|
+
|
|
95
|
+
it('truncates time on dates', async () => {
|
|
96
|
+
const picker: DatePicker = await createPicker(
|
|
97
|
+
getPickerHTML({ value: '2020-01-20 00:00:00' })
|
|
98
|
+
);
|
|
99
|
+
|
|
100
|
+
expect(picker.value).to.equal('2020-01-20');
|
|
101
|
+
await assertScreenshot('datepicker/date-truncated-time', getClip(picker));
|
|
102
|
+
});
|
|
94
103
|
});
|