@nyaruka/temba-components 0.31.8 → 0.32.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 +15 -0
- package/demo/index.html +53 -12
- package/dist/193d2225.js +5440 -0
- package/dist/index.js +497 -407
- 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/FormElement.js +8 -0
- package/out-tsc/src/FormElement.js.map +1 -1
- package/out-tsc/src/contacts/ContactFieldEditor.js +58 -37
- package/out-tsc/src/contacts/ContactFieldEditor.js.map +1 -1
- package/out-tsc/src/contacts/ContactFields.js +9 -2
- package/out-tsc/src/contacts/ContactFields.js.map +1 -1
- package/out-tsc/src/datepicker/DatePicker.js +196 -46
- package/out-tsc/src/datepicker/DatePicker.js.map +1 -1
- package/out-tsc/src/list/TembaMenu.js +3 -0
- package/out-tsc/src/list/TembaMenu.js.map +1 -1
- package/out-tsc/src/options/Options.js +14 -2
- package/out-tsc/src/options/Options.js.map +1 -1
- package/out-tsc/src/select/Select.js +9 -2
- package/out-tsc/src/select/Select.js.map +1 -1
- package/out-tsc/src/store/Store.js +4 -1
- package/out-tsc/src/store/Store.js.map +1 -1
- package/out-tsc/src/tabpane/TabPane.js +2 -0
- package/out-tsc/src/tabpane/TabPane.js.map +1 -1
- package/out-tsc/src/textinput/TextInput.js +9 -113
- package/out-tsc/src/textinput/TextInput.js.map +1 -1
- package/out-tsc/temba-modules.js +2 -0
- package/out-tsc/temba-modules.js.map +1 -1
- package/out-tsc/test/temba-datepicker.test.js +66 -0
- package/out-tsc/test/temba-datepicker.test.js.map +1 -0
- package/out-tsc/test/temba-textinput.test.js +0 -47
- package/out-tsc/test/temba-textinput.test.js.map +1 -1
- package/out-tsc/test/temba-tip.test.js +5 -1
- package/out-tsc/test/temba-tip.test.js.map +1 -1
- package/package.json +1 -2
- package/screenshots/truth/datepicker/date.png +0 -0
- package/screenshots/truth/datepicker/datetime.png +0 -0
- package/screenshots/truth/datepicker/initial-timezone.png +0 -0
- package/screenshots/truth/datepicker/initial-value.png +0 -0
- package/screenshots/truth/datepicker/updated-keyboard-date.png +0 -0
- package/screenshots/truth/datepicker/updated-keyboard.png +0 -0
- package/src/FormElement.ts +6 -0
- package/src/contacts/ContactFieldEditor.ts +62 -38
- package/src/contacts/ContactFields.ts +9 -2
- package/src/datepicker/DatePicker.ts +201 -39
- package/src/list/TembaMenu.ts +4 -0
- package/src/options/Options.ts +15 -2
- package/src/select/Select.ts +9 -2
- package/src/store/Store.ts +5 -1
- package/src/tabpane/TabPane.ts +2 -0
- package/src/textinput/TextInput.ts +13 -129
- package/static/css/temba-components.css +5 -2
- package/temba-modules.ts +2 -0
- package/test/temba-datepicker.test.ts +94 -0
- package/test/temba-textinput.test.ts +0 -73
- package/test/temba-tip.test.ts +5 -1
- package/test-assets/style.css +4 -0
- package/dist/41f084a5.js +0 -5350
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:"193d2225.js",revision:"c7e8c8232aec09f7b22902cf2eae8297"},{url:"templates/components-body.html",revision:"0d257e3ce0aea0c848b6fc93824af73b"},{url:"templates/components-head.html",revision:"02dc3df226f8db28fb7ca42a749b28e7"}],{}),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/fd57cafc550e15880df4ac5ff363bc2e/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\": \"193d2225.js\",\n \"revision\": \"c7e8c8232aec09f7b22902cf2eae8297\"\n },\n {\n \"url\": \"templates/components-body.html\",\n \"revision\": \"0d257e3ce0aea0c848b6fc93824af73b\"\n },\n {\n \"url\": \"templates/components-head.html\",\n \"revision\": \"02dc3df226f8db28fb7ca42a749b28e7\"\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/193d2225.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.32.0"</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/193d2225.js" crossorigin="anonymous">
|
|
@@ -9,9 +9,11 @@ export class FormElement extends RapidElement {
|
|
|
9
9
|
constructor() {
|
|
10
10
|
super(...arguments);
|
|
11
11
|
this.hiddenInputs = [];
|
|
12
|
+
this.name = '';
|
|
12
13
|
this.values = [];
|
|
13
14
|
this.value = '';
|
|
14
15
|
this.inputRoot = this;
|
|
16
|
+
this.disabled = false;
|
|
15
17
|
}
|
|
16
18
|
setValue(value) {
|
|
17
19
|
if (!value) {
|
|
@@ -66,6 +68,9 @@ export class FormElement extends RapidElement {
|
|
|
66
68
|
}
|
|
67
69
|
}
|
|
68
70
|
}
|
|
71
|
+
__decorate([
|
|
72
|
+
property({ type: String })
|
|
73
|
+
], FormElement.prototype, "name", void 0);
|
|
69
74
|
__decorate([
|
|
70
75
|
property({ type: String, attribute: 'help_text' })
|
|
71
76
|
], FormElement.prototype, "helpText", void 0);
|
|
@@ -93,4 +98,7 @@ __decorate([
|
|
|
93
98
|
__decorate([
|
|
94
99
|
property({ attribute: false })
|
|
95
100
|
], FormElement.prototype, "inputRoot", void 0);
|
|
101
|
+
__decorate([
|
|
102
|
+
property({ type: Boolean })
|
|
103
|
+
], FormElement.prototype, "disabled", void 0);
|
|
96
104
|
//# sourceMappingURL=FormElement.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormElement.js","sourceRoot":"","sources":["../../src/FormElement.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C;;;GAGG;AACH,MAAM,OAAO,WAAY,SAAQ,YAAY;IAA7C;;QACU,iBAAY,GAAuB,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"FormElement.js","sourceRoot":"","sources":["../../src/FormElement.ts"],"names":[],"mappings":"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","sourcesContent":["import { RapidElement } from './RapidElement';\nimport { property } from 'lit/decorators';\n\n/**\n * FormElement is a component that appends a hidden input (outside of\n * its own shadow) with its value to be included in forms.\n */\nexport class FormElement extends RapidElement {\n private hiddenInputs: HTMLInputElement[] = [];\n\n @property({ type: String })\n name = '';\n\n @property({ type: String, attribute: 'help_text' })\n helpText: string;\n\n @property({ type: Boolean, attribute: 'help_always' })\n helpAlways: boolean;\n\n @property({ type: Boolean, attribute: 'widget_only' })\n widgetOnly: boolean;\n\n @property({ type: Boolean, attribute: 'hide_label' })\n hideLabel: boolean;\n\n @property({ type: String })\n label: string;\n\n @property({ type: Array })\n errors: string[];\n\n @property({ type: Array })\n values: any[] = [];\n\n @property({ type: String })\n value = '';\n\n @property({ attribute: false })\n inputRoot: HTMLElement = this;\n\n @property({ type: Boolean })\n disabled = false;\n\n public setValue(value: any) {\n if (!value) {\n this.setValues([]);\n } else {\n this.setValues([value]);\n }\n this.value = value;\n }\n\n public setValues(values: any[]) {\n this.values = values;\n this.requestUpdate('values');\n }\n\n public addValue(value: any) {\n this.values.push(value);\n this.requestUpdate('values');\n }\n\n public removeValue(valueToRemove: any) {\n this.values = this.values.filter((value: any) => value !== valueToRemove);\n this.requestUpdate('values');\n }\n\n public popValue() {\n this.values.pop();\n this.requestUpdate('values');\n }\n\n public clear() {\n this.values = [];\n this.requestUpdate('values');\n }\n\n public serializeValue(value: any): string {\n return JSON.stringify(value);\n }\n\n private updateInputs(): void {\n for (let ele = null; (ele = this.hiddenInputs.pop()); ) {\n ele.remove();\n }\n\n for (const value of this.values) {\n const ele = document.createElement('input');\n ele.setAttribute('type', 'hidden');\n ele.setAttribute('name', this.getAttribute('name'));\n ele.setAttribute('value', this.serializeValue(value));\n this.hiddenInputs.push(ele);\n this.inputRoot.parentElement.appendChild(ele);\n }\n }\n\n public updated(changedProperties: Map<string, any>) {\n super.updated(changedProperties);\n\n // if our cursor changed, lets make sure our scrollbox is showing it\n if (changedProperties.has('values')) {\n this.updateInputs();\n }\n }\n}\n"]}
|
|
@@ -11,6 +11,10 @@ export class ContactFieldEditor extends RapidElement {
|
|
|
11
11
|
}
|
|
12
12
|
static get styles() {
|
|
13
13
|
return css `
|
|
14
|
+
.wrapper {
|
|
15
|
+
--widget-box-shadow: none;
|
|
16
|
+
}
|
|
17
|
+
|
|
14
18
|
.prefix {
|
|
15
19
|
background: rgba(0, 0, 0, 0.05);
|
|
16
20
|
border-top-left-radius: var(--curvature-widget);
|
|
@@ -97,6 +101,11 @@ export class ContactFieldEditor extends RapidElement {
|
|
|
97
101
|
temba-icon[name='search'] {
|
|
98
102
|
margin-right: 1em;
|
|
99
103
|
}
|
|
104
|
+
|
|
105
|
+
temba-datepicker {
|
|
106
|
+
--curvature: 0px;
|
|
107
|
+
position: relative;
|
|
108
|
+
}
|
|
100
109
|
`;
|
|
101
110
|
}
|
|
102
111
|
connectedCallback() {
|
|
@@ -128,7 +137,7 @@ export class ContactFieldEditor extends RapidElement {
|
|
|
128
137
|
evt.stopPropagation();
|
|
129
138
|
}
|
|
130
139
|
handleSubmit() {
|
|
131
|
-
const input = this.shadowRoot.querySelector('temba-textinput');
|
|
140
|
+
const input = this.shadowRoot.querySelector('temba-textinput, temba-datepicker');
|
|
132
141
|
if (input.value !== this.value) {
|
|
133
142
|
this.value = input.value;
|
|
134
143
|
this.fireEvent('change');
|
|
@@ -148,44 +157,53 @@ export class ContactFieldEditor extends RapidElement {
|
|
|
148
157
|
render() {
|
|
149
158
|
return html `
|
|
150
159
|
<div class="wrapper ${this.value ? 'set' : 'unset'}">
|
|
151
|
-
|
|
152
|
-
value="${this.value ? this.value : ''}"
|
|
153
|
-
?datetimepicker=${this.type === 'datetime'}
|
|
154
|
-
@blur=${this.handleSubmit}
|
|
155
|
-
@keydown=${this.handleInput}
|
|
156
|
-
@change=${this.handleChange}
|
|
157
|
-
>
|
|
158
|
-
<div class="prefix" slot="prefix">
|
|
159
|
-
<div class="name">${this.name}</div>
|
|
160
|
-
${this.type === 'datetime'
|
|
161
|
-
? html `<div style="position: relative; padding-top: .75em;">
|
|
162
|
-
<temba-icon name="calendar" animateclick="pulse" />
|
|
163
|
-
</div>`
|
|
164
|
-
: null}
|
|
165
|
-
</div>
|
|
166
|
-
|
|
167
|
-
<div class="postfix">
|
|
168
|
-
<div
|
|
169
|
-
class="popper ${this.iconClass}"
|
|
170
|
-
@click=${this.handleIconClick}
|
|
171
|
-
>
|
|
172
|
-
${this.value
|
|
160
|
+
${this.type === 'datetime'
|
|
173
161
|
? html `
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
162
|
+
<temba-datepicker
|
|
163
|
+
timezone=${this.timezone}
|
|
164
|
+
value="${this.value ? this.value : ''}"
|
|
165
|
+
@change=${this.handleSubmit}
|
|
166
|
+
time
|
|
167
|
+
>
|
|
168
|
+
<div class="prefix" slot="prefix">
|
|
169
|
+
<div class="name">${this.name}</div>
|
|
178
170
|
</div>
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
171
|
+
</temba-datepicker>
|
|
172
|
+
`
|
|
173
|
+
: html `
|
|
174
|
+
<temba-textinput
|
|
175
|
+
value="${this.value ? this.value : ''}"
|
|
176
|
+
@blur=${this.handleSubmit}
|
|
177
|
+
@keydown=${this.handleInput}
|
|
178
|
+
@change=${this.handleChange}
|
|
179
|
+
>
|
|
180
|
+
<div class="prefix" slot="prefix">
|
|
181
|
+
<div class="name">${this.name}</div>
|
|
182
|
+
</div>
|
|
183
|
+
|
|
184
|
+
<div class="postfix">
|
|
185
|
+
<div
|
|
186
|
+
class="popper ${this.iconClass}"
|
|
187
|
+
@click=${this.handleIconClick}
|
|
188
|
+
>
|
|
189
|
+
${this.value
|
|
190
|
+
? html `
|
|
191
|
+
<temba-icon
|
|
192
|
+
name="search"
|
|
193
|
+
animateclick="pulse"
|
|
194
|
+
></temba-icon>
|
|
195
|
+
</div>
|
|
196
|
+
`
|
|
197
|
+
: null}
|
|
198
|
+
<temba-icon
|
|
199
|
+
name="${this.icon}"
|
|
200
|
+
animatechange="spin"
|
|
201
|
+
animateclick="pulse"
|
|
202
|
+
></temba-icon>
|
|
203
|
+
</div>
|
|
204
|
+
</div>
|
|
205
|
+
</temba-textinput>
|
|
206
|
+
`}
|
|
189
207
|
</div>
|
|
190
208
|
`;
|
|
191
209
|
}
|
|
@@ -202,6 +220,9 @@ __decorate([
|
|
|
202
220
|
__decorate([
|
|
203
221
|
property({ type: String })
|
|
204
222
|
], ContactFieldEditor.prototype, "type", void 0);
|
|
223
|
+
__decorate([
|
|
224
|
+
property({ type: String })
|
|
225
|
+
], ContactFieldEditor.prototype, "timezone", void 0);
|
|
205
226
|
__decorate([
|
|
206
227
|
property({ type: String })
|
|
207
228
|
], ContactFieldEditor.prototype, "icon", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContactFieldEditor.js","sourceRoot":"","sources":["../../../src/contacts/ContactFieldEditor.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"ContactFieldEditor.js","sourceRoot":"","sources":["../../../src/contacts/ContactFieldEditor.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAG/C,MAAM,OAAO,kBAAmB,SAAQ,YAAY;IAApD;;QAiBE,SAAI,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;QAGzC,cAAS,GAAG,EAAE,CAAC;IAmNjB,CAAC;IAjNC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgGT,CAAC;IACJ,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC/C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACnD,CAAC;IAEM,eAAe,CAAC,GAAe;QACpC,MAAM,GAAG,GAAG,GAAG,CAAC,MAAwB,CAAC;QACzC,MAAM,IAAI,GAAG,GAAG,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;QACtC,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,iBAAiB,CAAc,CAAC;QAE5E,IAAI,IAAI,KAAK,MAAM,EAAE;YACnB,IAAI,SAAS,CAAC,SAAS,EAAE;gBACvB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;gBAC3B,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,eAAe,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE;oBAC/D,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;wBACrB,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;oBACtB,CAAC,EAAE,GAAG,CAAC,CAAC;gBACV,CAAC,CAAC,CAAC;aACJ;SACF;QAED,IAAI,IAAI,KAAK,QAAQ,EAAE;YACrB,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,aAAa,EAAE;gBAClD,GAAG,EAAE,IAAI,CAAC,GAAG;gBACb,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CAAC;SACJ;QAED,GAAG,CAAC,cAAc,EAAE,CAAC;QACrB,GAAG,CAAC,eAAe,EAAE,CAAC;IACxB,CAAC;IAEM,YAAY;QACjB,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CACzC,mCAAmC,CACrB,CAAC;QACjB,IAAI,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE;YAC9B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;YACzB,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;SAC1B;QACD,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IAChD,CAAC;IAEM,YAAY,CAAC,GAAU;QAC5B,GAAG,CAAC,cAAc,EAAE,CAAC;QACrB,GAAG,CAAC,eAAe,EAAE,CAAC;IACxB,CAAC;IAEM,WAAW,CAAC,GAAkB;QACnC,IAAI,GAAG,CAAC,GAAG,KAAK,OAAO,EAAE;YACvB,MAAM,KAAK,GAAG,GAAG,CAAC,aAA0B,CAAC;YAC7C,KAAK,CAAC,IAAI,EAAE,CAAC;SACd;IACH,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;4BACa,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO;UAC9C,IAAI,CAAC,IAAI,KAAK,UAAU;YACxB,CAAC,CAAC,IAAI,CAAA;;2BAEW,IAAI,CAAC,QAAQ;yBACf,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;0BAC3B,IAAI,CAAC,YAAY;;;;sCAIL,IAAI,CAAC,IAAI;;;aAGlC;YACH,CAAC,CAAC,IAAI,CAAA;;yBAES,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;wBAC7B,IAAI,CAAC,YAAY;2BACd,IAAI,CAAC,WAAW;0BACjB,IAAI,CAAC,YAAY;;;sCAGL,IAAI,CAAC,IAAI;;;;;oCAKX,IAAI,CAAC,SAAS;6BACrB,IAAI,CAAC,eAAe;;sBAE3B,IAAI,CAAC,KAAK;gBACV,CAAC,CAAC,IAAI,CAAA;;;;;;iBAMX;gBACK,CAAC,CAAC,IAAI;;8BAEE,IAAI,CAAC,IAAI;;;;;;;aAO1B;;KAER,CAAC;IACJ,CAAC;CACF;AArOC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACf;AAGZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDACV;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACc;AAGzC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDACZ","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { FormElement } from '../FormElement';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { TextInput } from '../textinput/TextInput';\n\nexport class ContactFieldEditor extends RapidElement {\n @property({ type: String })\n key: string;\n\n @property({ type: String })\n value: string;\n\n @property({ type: String })\n name: string;\n\n @property({ type: String })\n type: string;\n\n @property({ type: String })\n timezone: string;\n\n @property({ type: String })\n icon = navigator.clipboard ? 'copy' : '';\n\n @property({ type: String })\n iconClass = '';\n\n static get styles() {\n return css`\n .wrapper {\n --widget-box-shadow: none;\n }\n\n .prefix {\n background: rgba(0, 0, 0, 0.05);\n border-top-left-radius: var(--curvature-widget);\n border-bottom-left-radius: var(--curvature-widget);\n color: #888;\n cursor: pointer;\n width: 200px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: flex;\n padding: 0em 0.5em;\n }\n\n .wrapper {\n margin-bottom: -1px;\n }\n\n .prefix .name {\n padding: 0.5em 0em;\n color: #888;\n width: 200px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .postfix {\n display: flex;\n align-items: stretch;\n }\n\n .popper {\n padding: 0.5em 0.75em;\n background: rgba(240, 240, 240, 1);\n border-top-right-radius: var(--curvature-widget);\n border-bottom-right-radius: var(--curvature-widget);\n --icon-color: #888;\n opacity: 0;\n cursor: default;\n transform: scale(0.5);\n transition: all 300ms ease-in-out;\n display: flex;\n align-items: stretch;\n z-index: 1000;\n }\n\n temba-icon[name='calendar'] {\n --icon-color: rgba(0, 0, 0, 0.2);\n }\n\n temba-icon:hover {\n --icon-color: rgba(0, 0, 0, 0.5);\n }\n\n temba-icon {\n cursor: pointer;\n --icon-color: rgba(0, 0, 0, 0.3);\n }\n\n temba-textinput:hover .popper {\n opacity: 1;\n transform: scale(1);\n }\n\n temba-textinput:focus .popper {\n opacity: 1;\n transform: scale(1);\n }\n\n .unset temba-textinput:focus .popper,\n .unset temba-textinput:hover .popper {\n opacity: 0;\n }\n\n .copy.clicked temba-icon {\n transform: scale(1.2);\n }\n\n temba-icon {\n transition: all 200ms ease-in-out;\n }\n\n temba-icon[name='search'] {\n margin-right: 1em;\n }\n\n temba-datepicker {\n --curvature: 0px;\n position: relative;\n }\n `;\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this.handleInput = this.handleInput.bind(this);\n this.handleSubmit = this.handleSubmit.bind(this);\n }\n\n public handleIconClick(evt: MouseEvent) {\n const ele = evt.target as HTMLDivElement;\n const icon = ele.getAttribute('name');\n const input = this.shadowRoot.querySelector('temba-textinput') as TextInput;\n\n if (icon === 'copy') {\n if (navigator.clipboard) {\n this.iconClass = 'clicked';\n navigator.clipboard.writeText(input.getDisplayValue()).then(() => {\n window.setTimeout(() => {\n this.iconClass = '';\n }, 300);\n });\n }\n }\n\n if (icon === 'search') {\n this.fireCustomEvent(CustomEventType.ButtonClicked, {\n key: this.key,\n value: this.value,\n });\n }\n\n evt.preventDefault();\n evt.stopPropagation();\n }\n\n public handleSubmit() {\n const input = this.shadowRoot.querySelector(\n 'temba-textinput, temba-datepicker'\n ) as FormElement;\n if (input.value !== this.value) {\n this.value = input.value;\n this.fireEvent('change');\n }\n this.icon = navigator.clipboard ? 'copy' : '';\n }\n\n public handleChange(evt: Event) {\n evt.preventDefault();\n evt.stopPropagation();\n }\n\n public handleInput(evt: KeyboardEvent) {\n if (evt.key === 'Enter') {\n const input = evt.currentTarget as TextInput;\n input.blur();\n }\n }\n\n public render(): TemplateResult {\n return html`\n <div class=\"wrapper ${this.value ? 'set' : 'unset'}\">\n ${this.type === 'datetime'\n ? html`\n <temba-datepicker\n timezone=${this.timezone}\n value=\"${this.value ? this.value : ''}\"\n @change=${this.handleSubmit}\n time\n >\n <div class=\"prefix\" slot=\"prefix\">\n <div class=\"name\">${this.name}</div>\n </div>\n </temba-datepicker>\n `\n : html`\n <temba-textinput\n value=\"${this.value ? this.value : ''}\"\n @blur=${this.handleSubmit}\n @keydown=${this.handleInput}\n @change=${this.handleChange}\n >\n <div class=\"prefix\" slot=\"prefix\">\n <div class=\"name\">${this.name}</div>\n </div>\n\n <div class=\"postfix\">\n <div\n class=\"popper ${this.iconClass}\"\n @click=${this.handleIconClick}\n >\n ${this.value\n ? html`\n <temba-icon\n name=\"search\"\n animateclick=\"pulse\"\n ></temba-icon>\n </div>\n `\n : null}\n <temba-icon\n name=\"${this.icon}\"\n animatechange=\"spin\"\n animateclick=\"pulse\"\n ></temba-icon>\n </div>\n </div>\n </temba-textinput>\n `}\n </div>\n `;\n }\n}\n"]}
|
|
@@ -9,7 +9,10 @@ export class ContactFields extends ContactStoreElement {
|
|
|
9
9
|
return css `
|
|
10
10
|
:host {
|
|
11
11
|
--curvature-widget: 0px;
|
|
12
|
-
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.fields {
|
|
15
|
+
box-shadow: var(--widget-box-shadow);
|
|
13
16
|
}
|
|
14
17
|
|
|
15
18
|
.field {
|
|
@@ -125,10 +128,11 @@ export class ContactFields extends ContactStoreElement {
|
|
|
125
128
|
value=${v}
|
|
126
129
|
type=${field.value_type}
|
|
127
130
|
@change=${this.handleFieldChanged}
|
|
131
|
+
timezone=${this.timezone}
|
|
128
132
|
></temba-contact-field>`;
|
|
129
133
|
});
|
|
130
134
|
return html `
|
|
131
|
-
<div class="${this.showAll || this.pinned ? 'show-all' : ''}">
|
|
135
|
+
<div class="fields ${this.showAll || this.pinned ? 'show-all' : ''}">
|
|
132
136
|
${fields}
|
|
133
137
|
</div>
|
|
134
138
|
|
|
@@ -161,4 +165,7 @@ __decorate([
|
|
|
161
165
|
__decorate([
|
|
162
166
|
property({ type: Boolean })
|
|
163
167
|
], ContactFields.prototype, "showAll", void 0);
|
|
168
|
+
__decorate([
|
|
169
|
+
property({ type: String })
|
|
170
|
+
], ContactFields.prototype, "timezone", void 0);
|
|
164
171
|
//# sourceMappingURL=ContactFields.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContactFields.js","sourceRoot":"","sources":["../../../src/contacts/ContactFields.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAoC,MAAM,KAAK,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAG5D,MAAM,cAAc,GAAG,EAAE,CAAC;AAE1B,MAAM,OAAO,aAAc,SAAQ,mBAAmB;IACpD,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"ContactFields.js","sourceRoot":"","sources":["../../../src/contacts/ContactFields.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { postJSON } from '../utils';\nimport { ContactFieldEditor } from './ContactFieldEditor';\nimport { ContactStoreElement } from './ContactStoreElement';\nimport { Checkbox } from '../checkbox/Checkbox';\n\nconst MIN_FOR_FILTER = 10;\n\nexport class ContactFields extends ContactStoreElement {\n static get styles() {\n return css`\n :host {\n --curvature-widget: 0px;\n }\n\n .fields {\n box-shadow: var(--widget-box-shadow);\n }\n\n .field {\n display: flex;\n margin: 0.3em 0.3em;\n box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.15);\n border-radius: 0px;\n align-items: center;\n overflow: hidden;\n }\n\n .show-all .unset {\n display: block;\n }\n\n .unset {\n display: none;\n }\n\n .field:hover {\n box-shadow: 1px 1px 6px 2px rgba(0, 0, 0, 0.05),\n 0px 0px 0px 2px var(--color-link-primary);\n cursor: pointer;\n }\n\n .label {\n padding: 0.25em 1em;\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n color: #777;\n font-size: 0.9em;\n font-weight: 400;\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1) inset;\n }\n\n .value {\n --icon-color: #ddd;\n max-width: 150px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n padding: 0.25em 1em;\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n font-size: 0.9em;\n }\n\n temba-contact-field {\n }\n\n .footer {\n margin-bottom: 0;\n display: flex;\n background: #fff;\n align-items: center;\n margin-top: 0.5em;\n }\n `;\n }\n\n @property({ type: Boolean })\n pinned: boolean;\n\n @property({ type: Boolean })\n system: boolean;\n\n @property({ type: Boolean })\n dirty: boolean;\n\n @property({ type: Boolean })\n showAll: boolean;\n\n @property({ type: String })\n timezone: string;\n\n connectedCallback(): void {\n super.connectedCallback();\n this.handleFieldChanged = this.handleFieldChanged.bind(this);\n }\n\n protected updated(\n changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n ): void {\n super.updated(changes);\n if (changes.has('data')) {\n if (Object.keys(this.data.fields).length <= MIN_FOR_FILTER) {\n this.showAll = true;\n }\n }\n }\n\n public handleFieldChanged(evt: InputEvent) {\n const field = evt.currentTarget as ContactFieldEditor;\n const value = field.value;\n this.data.fields[field.key] = value;\n postJSON('/api/v2/contacts.json?uuid=' + this.data.uuid, {\n fields: { [field.key]: value },\n }).then((response: any) => {\n this.updateStoreContact(response.json);\n });\n }\n\n public handleToggle(evt: Event) {\n const checkbox = evt.currentTarget as Checkbox;\n this.showAll = checkbox.checked;\n }\n\n public render(): TemplateResult {\n if (this.data) {\n const fieldsToShow = Object.entries(this.data.fields)\n .filter((entry: [string, string]) => {\n return (\n (this.pinned && this.store.getContactField(entry[0]).pinned) ||\n (!this.pinned && !this.store.getContactField(entry[0]).pinned)\n );\n })\n .sort((a: [string, string], b: [string, string]) => {\n const [ak] = a;\n const [bk] = b;\n const priority =\n this.store.getContactField(bk).priority -\n this.store.getContactField(ak).priority;\n if (priority !== 0) {\n return priority;\n }\n\n return ak.localeCompare(bk);\n });\n\n if (fieldsToShow.length == 0) {\n return html`<slot name=\"empty\"></slot>`;\n }\n\n const fields = fieldsToShow.map((entry: [string, string]) => {\n const [k, v] = entry;\n const field = this.store.getContactField(k);\n return html`<temba-contact-field\n class=${v ? 'set' : 'unset'}\n key=${field.key}\n name=${field.label}\n value=${v}\n type=${field.value_type}\n @change=${this.handleFieldChanged}\n timezone=${this.timezone}\n ></temba-contact-field>`;\n });\n\n return html`\n <div class=\"fields ${this.showAll || this.pinned ? 'show-all' : ''}\">\n ${fields}\n </div>\n\n ${!this.pinned && Object.keys(this.data.fields).length >= MIN_FOR_FILTER\n ? html`<div class=\"footer\">\n <div style=\"flex-grow: 1\"></div>\n <div>\n <temba-checkbox\n ?checked=${this.showAll}\n @change=${this.handleToggle}\n label=\"Show All\"\n />\n </div>\n </div>`\n : null}\n `;\n }\n\n return null;\n }\n}\n"]}
|
|
@@ -1,47 +1,115 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { html, css } from 'lit';
|
|
3
|
-
import { property
|
|
3
|
+
import { property } from 'lit/decorators';
|
|
4
4
|
import { FormElement } from '../FormElement';
|
|
5
|
-
import '
|
|
6
|
-
|
|
5
|
+
import { getClasses } from '../utils';
|
|
6
|
+
import { DateTime } from 'luxon';
|
|
7
|
+
export default class DatePicker extends FormElement {
|
|
7
8
|
constructor() {
|
|
8
|
-
super(
|
|
9
|
-
this.
|
|
10
|
-
this.
|
|
11
|
-
this.
|
|
9
|
+
super();
|
|
10
|
+
this.timezone = '';
|
|
11
|
+
this.timezoneFriendly = '';
|
|
12
|
+
this.datetime = null;
|
|
13
|
+
this.time = false;
|
|
12
14
|
}
|
|
13
15
|
static get styles() {
|
|
14
16
|
return css `
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
17
|
+
:host {
|
|
18
|
+
display: block;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.container {
|
|
22
|
+
border-radius: var(--curvature);
|
|
23
|
+
border: 1px solid var(--color-widget-border);
|
|
24
|
+
display: flex;
|
|
25
|
+
cursor: pointer;
|
|
26
|
+
box-shadow: var(--widget-box-shadow);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.input-wrapper {
|
|
30
|
+
padding: var(--temba-textinput-padding);
|
|
31
|
+
flex-grow: 1;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.tz {
|
|
35
|
+
margin-left: 0.5em;
|
|
36
|
+
font-size: 0.8em;
|
|
37
|
+
flex-direction: column;
|
|
38
|
+
align-self: stretch;
|
|
39
|
+
color: #888;
|
|
40
|
+
display: flex;
|
|
41
|
+
align-items: flex-start;
|
|
42
|
+
flex-direction: column;
|
|
43
|
+
padding: 0em 1em;
|
|
44
|
+
font-weight: 400;
|
|
45
|
+
cursor: pointer;
|
|
46
|
+
margin: auto;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.tz .label {
|
|
50
|
+
font-size: 0.8em;
|
|
51
|
+
color: #aaa;
|
|
52
|
+
white-space: nowrap;
|
|
53
|
+
text-overflow: ellipsis;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.tz .zone {
|
|
57
|
+
white-space: nowrap;
|
|
58
|
+
text-overflow: ellipsis;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.tz-wrapper {
|
|
62
|
+
background: #efefef;
|
|
63
|
+
border-top-right-radius: var(--curvature);
|
|
64
|
+
border-bottom-right-radius: var(--curvature);
|
|
65
|
+
display: flex;
|
|
66
|
+
flex-direction: row;
|
|
67
|
+
align-items: center;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.container:focus-within {
|
|
71
|
+
border-color: var(--color-focus);
|
|
72
|
+
background: var(--color-widget-bg-focused);
|
|
73
|
+
box-shadow: var(--widget-box-shadow-focused);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
input {
|
|
21
77
|
color: var(--color-widget-text);
|
|
78
|
+
border: 0px;
|
|
22
79
|
font-family: var(--font-family);
|
|
23
|
-
font-size: 13px;
|
|
24
|
-
cursor: text;
|
|
25
|
-
resize: none;
|
|
26
80
|
font-weight: 300;
|
|
81
|
+
outline: none;
|
|
27
82
|
width: 100%;
|
|
83
|
+
font-size: 13px;
|
|
84
|
+
padding: 0px;
|
|
85
|
+
margin: 0px;
|
|
86
|
+
line-height: 1em;
|
|
28
87
|
}
|
|
29
88
|
|
|
30
|
-
.
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
89
|
+
input.unset {
|
|
90
|
+
color: #ddd;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
input.unset:focus {
|
|
94
|
+
color: var(--color-widget-text);
|
|
34
95
|
}
|
|
35
96
|
|
|
36
|
-
|
|
97
|
+
input:focus {
|
|
37
98
|
outline: none;
|
|
38
|
-
box-shadow: none;
|
|
39
|
-
cursor: text;
|
|
40
99
|
}
|
|
41
100
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
101
|
+
::-webkit-calendar-picker-indicator {
|
|
102
|
+
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>');
|
|
103
|
+
cursor: pointer;
|
|
104
|
+
margin: 0;
|
|
105
|
+
padding: 0;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
::-webkit-calendar-picker-indicator:hover {
|
|
109
|
+
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>');
|
|
110
|
+
cursor: pointer;
|
|
111
|
+
margin: 0;
|
|
112
|
+
padding: 0;
|
|
45
113
|
}
|
|
46
114
|
`;
|
|
47
115
|
}
|
|
@@ -49,35 +117,117 @@ let DatePicker = class DatePicker extends FormElement {
|
|
|
49
117
|
serializeValue(value) {
|
|
50
118
|
return value;
|
|
51
119
|
}
|
|
120
|
+
firstUpdated(changed) {
|
|
121
|
+
if (changed.has('value')) {
|
|
122
|
+
// default to the local browser zone
|
|
123
|
+
if (this.time) {
|
|
124
|
+
this.timezone =
|
|
125
|
+
this.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone;
|
|
126
|
+
this.timezoneFriendly = this.timezone
|
|
127
|
+
.replace('_', ' ')
|
|
128
|
+
.replace('/', ', ');
|
|
129
|
+
if (this.value) {
|
|
130
|
+
// we fire a change event on blur
|
|
131
|
+
let datetime = DateTime.fromSQL(this.value).setZone(this.timezone);
|
|
132
|
+
// if we can't read it as a sql stamp, try iso
|
|
133
|
+
if (datetime.invalid) {
|
|
134
|
+
datetime = DateTime.fromISO(this.value).setZone(this.timezone);
|
|
135
|
+
}
|
|
136
|
+
this.datetime = datetime;
|
|
137
|
+
this.setValue(this.datetime.toUTC().toISO());
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
else {
|
|
141
|
+
this.setValue(this.value);
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
updated(changed) {
|
|
146
|
+
super.updated(changed);
|
|
147
|
+
if (changed.has('timezone') && this.time) {
|
|
148
|
+
this.timezone =
|
|
149
|
+
this.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone;
|
|
150
|
+
this.timezoneFriendly = this.timezone
|
|
151
|
+
.replace('_', ' ')
|
|
152
|
+
.replace('/', ', ');
|
|
153
|
+
this.requestUpdate('value');
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
handleChange(event) {
|
|
157
|
+
event.preventDefault();
|
|
158
|
+
event.stopPropagation();
|
|
159
|
+
}
|
|
160
|
+
handleBlur(event) {
|
|
161
|
+
if (this.time) {
|
|
162
|
+
this.datetime = DateTime.fromISO(event.target.value, {
|
|
163
|
+
zone: this.timezone,
|
|
164
|
+
});
|
|
165
|
+
this.setValue(this.datetime.toUTC().toISO());
|
|
166
|
+
}
|
|
167
|
+
else {
|
|
168
|
+
this.setValue(event.target.value);
|
|
169
|
+
}
|
|
170
|
+
this.fireEvent('change');
|
|
171
|
+
}
|
|
172
|
+
handleClicked() {
|
|
173
|
+
this.shadowRoot.querySelector('input').focus();
|
|
174
|
+
}
|
|
52
175
|
render() {
|
|
176
|
+
const classes = getClasses({ unset: !this.value });
|
|
177
|
+
let dateWidgetValue = null;
|
|
178
|
+
if (this.time && this.datetime && !this.datetime.invalid) {
|
|
179
|
+
dateWidgetValue = this.datetime.toFormat("yyyy-LL-dd'T'HH:mm");
|
|
180
|
+
}
|
|
181
|
+
else if (!this.time) {
|
|
182
|
+
dateWidgetValue = this.value;
|
|
183
|
+
}
|
|
53
184
|
return html `
|
|
54
|
-
<
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
185
|
+
<temba-field
|
|
186
|
+
name=${this.name}
|
|
187
|
+
.label="${this.label}"
|
|
188
|
+
.helpText="${this.helpText}"
|
|
189
|
+
.errors=${this.errors}
|
|
190
|
+
.widgetOnly=${this.widgetOnly}
|
|
191
|
+
.hideLabel=${this.hideLabel}
|
|
192
|
+
.disabled=${this.disabled}
|
|
61
193
|
>
|
|
62
|
-
<
|
|
63
|
-
|
|
194
|
+
<div class="container" @click=${this.handleClicked}>
|
|
195
|
+
<slot name="prefix"></slot>
|
|
196
|
+
<div class="input-wrapper">
|
|
197
|
+
<input
|
|
198
|
+
class=${classes}
|
|
199
|
+
name=${this.label}
|
|
200
|
+
value=${dateWidgetValue}
|
|
201
|
+
type="${this.time ? 'datetime-local' : 'date'}"
|
|
202
|
+
@change=${this.handleChange}
|
|
203
|
+
@blur=${this.handleBlur}
|
|
204
|
+
/>
|
|
205
|
+
</div>
|
|
206
|
+
${this.time
|
|
207
|
+
? html `
|
|
208
|
+
<div class="tz-wrapper">
|
|
209
|
+
<div class="tz">
|
|
210
|
+
<div class="label">Time Zone</div>
|
|
211
|
+
<div class="zone">${this.timezoneFriendly}</div>
|
|
212
|
+
</div>
|
|
213
|
+
</div>
|
|
214
|
+
`
|
|
215
|
+
: null}
|
|
216
|
+
</div>
|
|
217
|
+
</temba-field>
|
|
64
218
|
`;
|
|
65
219
|
}
|
|
66
|
-
}
|
|
67
|
-
__decorate([
|
|
68
|
-
property({ type: String })
|
|
69
|
-
], DatePicker.prototype, "placeholder", void 0);
|
|
220
|
+
}
|
|
70
221
|
__decorate([
|
|
71
222
|
property({ type: String })
|
|
72
|
-
], DatePicker.prototype, "
|
|
223
|
+
], DatePicker.prototype, "timezone", void 0);
|
|
73
224
|
__decorate([
|
|
74
225
|
property({ type: String })
|
|
75
|
-
], DatePicker.prototype, "
|
|
226
|
+
], DatePicker.prototype, "timezoneFriendly", void 0);
|
|
76
227
|
__decorate([
|
|
77
228
|
property({ type: Object })
|
|
78
|
-
], DatePicker.prototype, "
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
], DatePicker);
|
|
82
|
-
export default DatePicker;
|
|
229
|
+
], DatePicker.prototype, "datetime", void 0);
|
|
230
|
+
__decorate([
|
|
231
|
+
property({ type: Boolean })
|
|
232
|
+
], DatePicker.prototype, "time", void 0);
|
|
83
233
|
//# sourceMappingURL=DatePicker.js.map
|