@nyaruka/temba-components 0.74.0 → 0.75.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 +10 -0
- package/dist/{47acce75.js → b1ce10ca.js} +0 -1
- package/dist/index.js +0 -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/contacts/ContactFieldEditor.js +0 -1
- package/out-tsc/src/contacts/ContactFieldEditor.js.map +1 -1
- package/package.json +1 -1
- package/src/contacts/ContactFieldEditor.ts +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -4,8 +4,18 @@ 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.75.1](https://github.com/nyaruka/temba-components/compare/v0.75.0...v0.75.1)
|
|
8
|
+
|
|
9
|
+
- Fix z-index for field editor [`97680f3`](https://github.com/nyaruka/temba-components/commit/97680f3fbf50db701e1614b13eef5431d3f2be66)
|
|
10
|
+
|
|
11
|
+
#### [v0.75.0](https://github.com/nyaruka/temba-components/compare/v0.74.0...v0.75.0)
|
|
12
|
+
|
|
13
|
+
> 17 March 2024
|
|
14
|
+
|
|
7
15
|
#### [v0.74.0](https://github.com/nyaruka/temba-components/compare/v0.73.0...v0.74.0)
|
|
8
16
|
|
|
17
|
+
> 17 March 2024
|
|
18
|
+
|
|
9
19
|
- Tweaks to be more mobile friendly [`#402`](https://github.com/nyaruka/temba-components/pull/402)
|
|
10
20
|
|
|
11
21
|
#### [v0.73.0](https://github.com/nyaruka/temba-components/compare/v0.72.1...v0.73.0)
|
package/dist/index.js
CHANGED
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),f={module:{uri:i},exports:r,require:l};t[i]=Promise.all(n.map((e=>f[e]||l(e)))).then((e=>(s(...e),r)))}}define(["./workbox-919adfb7"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"b1ce10ca.js",revision:"1bb1a5e96e4759e1eb5b3f0e6ed55f93"},{url:"templates/components-body.html",revision:"09ff4a32480910ea35dd45af2e315762"},{url:"templates/components-head.html",revision:"78cf96f95257014056e96f04a719f79d"}],{}),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/da8ec5e7050047ed35e9ecb3f9fd15d1/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\": \"b1ce10ca.js\",\n \"revision\": \"1bb1a5e96e4759e1eb5b3f0e6ed55f93\"\n },\n {\n \"url\": \"templates/components-body.html\",\n \"revision\": \"09ff4a32480910ea35dd45af2e315762\"\n },\n {\n \"url\": \"templates/components-head.html\",\n \"revision\": \"78cf96f95257014056e96f04a719f79d\"\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/b1ce10ca.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.75.1"</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/b1ce10ca.js" crossorigin="anonymous">
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContactFieldEditor.js","sourceRoot":"","sources":["../../../src/contacts/ContactFieldEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { FormElement } from '../FormElement';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { InputType, TextInput } from '../textinput/TextInput';\nimport { Icon } from '../vectoricon';\nimport { getClasses, WebResponse } from '../utils';\n\nenum Status {\n Success = 'success',\n Failure = 'failure',\n Saving = 'saving',\n Ready = 'ready',\n}\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 ? Icon.copy : '';\n\n @property({ type: String })\n iconClass = '';\n\n @property({ type: String })\n status: Status = Status.Ready;\n\n @property({ type: Boolean })\n disabled = false;\n\n @property({ type: Boolean })\n dirty = false;\n\n static get styles() {\n return css`\n :host {\n --transition-speed: 0ms;\n }\n\n .wrapper {\n --temba-textinput-padding: 1.4em 0.8em 0.4em 0.8em;\n --disabled-opacity: 1;\n position: relative;\n --color-widget-bg: transparent;\n --color-widget-bg-focused: #fff;\n --widget-box-shadow: none;\n padding-bottom: 0.6em;\n border-bottom: 1px solid #ececec;\n }\n\n .wrapper.disabled {\n --color-widget-border: transparent;\n }\n\n .wrapper.mutable:hover {\n }\n\n .wrapper.mutable {\n --color-widget-border: rgb(235, 235, 235);\n --color-widget-bg: transparent;\n --input-cursor: pointer;\n\n border-bottom: none;\n margin-bottom: 0.5em;\n padding-bottom: 0em;\n }\n\n .mutable.success {\n --color-widget-border: rgba(var(--success-rgb), 0.6);\n }\n\n .mutable.failure {\n --color-widget-border: rgba(var(--error-rgb), 0.3) !important;\n }\n\n .mutable .dirty {\n --color-widget-border: rgb(235, 235, 235);\n }\n\n .prefix {\n border-top-left-radius: var(--curvature-widget);\n border-bottom-left-radius: var(--curvature-widget);\n cursor: pointer !important;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: flex;\n padding: 0em 0.5em;\n position: absolute;\n margin-top: 0.2em;\n pointer-events: none;\n }\n\n .wrapper {\n margin-bottom: 0.5em;\n }\n\n .prefix .name {\n padding: 0em 0.4em;\n color: rgba(100, 100, 100, 0.7);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: 0.8em;\n }\n\n .postfix {\n display: flex;\n align-items: stretch;\n margin-left: 1em;\n }\n\n .popper {\n background: rgba(0, 0, 0, 0.03);\n border-top-right-radius: var(--curvature-widget);\n border-bottom-right-radius: var(--curvature-widget);\n --icon-color: #888;\n display: flex;\n cursor: default;\n transition: all var(--transition-speed) ease-in-out;\n align-items: stretch;\n z-index: 1000;\n margin: -1px;\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:focus .popper,\n temba-textinput:hover .popper {\n display: flex;\n }\n\n .disabled temba-textinput .postfix {\n display: none;\n padding: none;\n }\n\n .unset temba-textinput .popper .copy,\n .unset temba-textinput .popper .search {\n display: none;\n }\n\n .unset temba-textinput:focus .popper .copy,\n .unset temba-textinput:hover .popper .copy,\n .unset temba-textinput:focus .popper .save,\n .unset temba-textinput:hover .popper .save {\n display: none;\n }\n\n .popper temba-icon {\n padding: 0.5em 0em;\n padding-right: 1em;\n }\n\n .popper:first-child {\n padding: 0.5em 0em;\n padding-right: 0.5em;\n padding-left: 1em;\n }\n\n .popper:last-child {\n padding-right: 0em;\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-datepicker {\n position: relative;\n }\n\n .save-state {\n display: flex;\n align-items: center;\n }\n\n .save-button {\n padding-right: 1em;\n }\n\n .dirty .copy,\n .dirty .search {\n display: none;\n }\n\n .saving .copy,\n .saving .search {\n display: none;\n }\n\n .success .copy,\n .success .search {\n display: none;\n }\n\n .failure .copy,\n .failure .search {\n display: none;\n }\n\n .popper.success {\n background: rgb(var(--success-rgb));\n }\n\n .popper.failure {\n background: rgb(var(--error-rgb));\n }\n\n .popper.success temba-icon,\n .popper.failure temba-icon {\n --icon-color: #fff !important;\n }\n\n .popper.dirty {\n background: rgba(0, 0, 0, 0.03);\n }\n\n temba-datepicker .popper {\n border-radius: 0px;\n }\n\n temba-datepicker .popper:first-child {\n padding: 0;\n }\n\n .dirty temba-datepicker .popper:first-child {\n padding-left: 1em;\n }\n\n .success temba-datepicker .popper:first-child {\n padding-left: 1em;\n }\n\n .failure temba-datepicker .popper:first-child {\n padding-left: 1em;\n }\n\n .saving temba-datepicker .popper:first-child {\n padding-left: 1em;\n }\n\n temba-datepicker .postfix {\n margin-left: 0;\n }\n\n .saving temba-datepicker,\n .saving temba-textinput {\n pointer-events: none !important;\n cursor: default !important;\n opacity: 0.7;\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('icon-action');\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 handleResponse(response: WebResponse) {\n if (response.status === 200) {\n this.value = response.json.fields[this.key];\n // this.status = Status.Success;\n // on success lets go back to ready state for now\n this.status = Status.Ready;\n this.dirty = false;\n } else {\n this.status = Status.Failure;\n }\n }\n\n public handleSubmit() {\n const input = this.shadowRoot.querySelector(\n 'temba-textinput, temba-datepicker'\n ) as FormElement;\n\n if (input.value !== this.value) {\n this.dirty = true;\n this.status = Status.Saving;\n this.value = input.value;\n this.fireEvent('change');\n }\n }\n\n public handleChange(evt: Event) {\n evt.preventDefault();\n evt.stopPropagation();\n }\n\n public handleDateChange(evt: Event) {\n evt.preventDefault();\n evt.stopPropagation();\n this.dirty = true;\n }\n\n public handleInput(evt: KeyboardEvent) {\n const input = evt.currentTarget as TextInput;\n if (evt.key === 'Enter') {\n input.blur();\n this.handleSubmit();\n } else {\n if (input.value !== this.value) {\n this.dirty = true;\n }\n }\n }\n\n private getInputType(type: string): string {\n if (type === 'numeric') {\n return InputType.Number;\n }\n return InputType.Text;\n }\n\n public render(): TemplateResult {\n const state = html`<div class=\"save-state\">\n ${this.dirty\n ? html`<temba-button\n class=\"save-button\"\n name=\"Save\"\n small\n @click=${this.handleSubmit}\n ></temba-button>`\n : html` ${this.status === Status.Saving\n ? html`<temba-icon\n spin\n name=\"${Icon.progress_spinner}\"\n ></temba-icon>`\n : null}\n ${this.status === Status.Success && !this.dirty\n ? html`<temba-icon name=\"${Icon.success}\"></temba-icon>`\n : null}\n ${this.status === Status.Failure\n ? html`<temba-tip text=\"Failed to save changes, try again later.\"\n ><temba-icon name=\"${Icon.alert_warning}\"></temba-icon\n ></temba-tip>`\n : null}`}\n </div>`;\n\n return html`\n <div\n class=${this.status +\n ' ' +\n getClasses({\n wrapper: true,\n set: !!this.value,\n unset: !this.value,\n disabled: this.disabled,\n mutable: !this.disabled,\n dirty: this.dirty,\n })}\n >\n ${this.type === 'datetime'\n ? html`\n <temba-datepicker\n timezone=${this.timezone}\n value=\"${this.value ? this.value : ''}\"\n @change=${this.handleDateChange}\n ?disabled=${this.disabled}\n time\n >\n <div class=\"prefix\" slot=\"prefix\">\n <div class=\"name\">${this.name}</div>\n </div>\n <div class=\"postfix\" slot=\"postfix\">\n <div\n class=\"popper ${this.status} ${this.dirty ? 'dirty' : ''}\"\n >\n ${state}\n </div>\n </div>\n </temba-datepicker>\n `\n : html`\n <temba-textinput\n class=\"${this.status} ${this.dirty ? 'dirty' : ''}\"\n value=\"${this.value ? this.value : ''}\"\n @keyup=${this.handleInput}\n @change=${this.handleChange}\n type=${this.getInputType(this.type)}\n ?disabled=${this.disabled}\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} ${this.status} ${this.dirty\n ? 'dirty'\n : ''}\"\n @click=${this.handleIconClick}\n >\n ${state}\n\n <temba-icon\n class=\"search\"\n icon-action=\"search\"\n name=\"${Icon.search}\"\n animateclick=\"pulse\"\n ></temba-icon>\n <temba-icon\n class=\"copy\"\n icon-action=\"copy\"\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"]}
|
|
1
|
+
{"version":3,"file":"ContactFieldEditor.js","sourceRoot":"","sources":["../../../src/contacts/ContactFieldEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { FormElement } from '../FormElement';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { InputType, TextInput } from '../textinput/TextInput';\nimport { Icon } from '../vectoricon';\nimport { getClasses, WebResponse } from '../utils';\n\nenum Status {\n Success = 'success',\n Failure = 'failure',\n Saving = 'saving',\n Ready = 'ready',\n}\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 ? Icon.copy : '';\n\n @property({ type: String })\n iconClass = '';\n\n @property({ type: String })\n status: Status = Status.Ready;\n\n @property({ type: Boolean })\n disabled = false;\n\n @property({ type: Boolean })\n dirty = false;\n\n static get styles() {\n return css`\n :host {\n --transition-speed: 0ms;\n }\n\n .wrapper {\n --temba-textinput-padding: 1.4em 0.8em 0.4em 0.8em;\n --disabled-opacity: 1;\n position: relative;\n --color-widget-bg: transparent;\n --color-widget-bg-focused: #fff;\n --widget-box-shadow: none;\n padding-bottom: 0.6em;\n border-bottom: 1px solid #ececec;\n }\n\n .wrapper.disabled {\n --color-widget-border: transparent;\n }\n\n .wrapper.mutable:hover {\n }\n\n .wrapper.mutable {\n --color-widget-border: rgb(235, 235, 235);\n --color-widget-bg: transparent;\n --input-cursor: pointer;\n\n border-bottom: none;\n margin-bottom: 0.5em;\n padding-bottom: 0em;\n }\n\n .mutable.success {\n --color-widget-border: rgba(var(--success-rgb), 0.6);\n }\n\n .mutable.failure {\n --color-widget-border: rgba(var(--error-rgb), 0.3) !important;\n }\n\n .mutable .dirty {\n --color-widget-border: rgb(235, 235, 235);\n }\n\n .prefix {\n border-top-left-radius: var(--curvature-widget);\n border-bottom-left-radius: var(--curvature-widget);\n cursor: pointer !important;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: flex;\n padding: 0em 0.5em;\n position: absolute;\n margin-top: 0.2em;\n pointer-events: none;\n }\n\n .wrapper {\n margin-bottom: 0.5em;\n }\n\n .prefix .name {\n padding: 0em 0.4em;\n color: rgba(100, 100, 100, 0.7);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: 0.8em;\n }\n\n .postfix {\n display: flex;\n align-items: stretch;\n margin-left: 1em;\n }\n\n .popper {\n background: rgba(0, 0, 0, 0.03);\n border-top-right-radius: var(--curvature-widget);\n border-bottom-right-radius: var(--curvature-widget);\n --icon-color: #888;\n display: flex;\n cursor: default;\n transition: all var(--transition-speed) ease-in-out;\n align-items: stretch;\n margin: -1px;\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:focus .popper,\n temba-textinput:hover .popper {\n display: flex;\n }\n\n .disabled temba-textinput .postfix {\n display: none;\n padding: none;\n }\n\n .unset temba-textinput .popper .copy,\n .unset temba-textinput .popper .search {\n display: none;\n }\n\n .unset temba-textinput:focus .popper .copy,\n .unset temba-textinput:hover .popper .copy,\n .unset temba-textinput:focus .popper .save,\n .unset temba-textinput:hover .popper .save {\n display: none;\n }\n\n .popper temba-icon {\n padding: 0.5em 0em;\n padding-right: 1em;\n }\n\n .popper:first-child {\n padding: 0.5em 0em;\n padding-right: 0.5em;\n padding-left: 1em;\n }\n\n .popper:last-child {\n padding-right: 0em;\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-datepicker {\n position: relative;\n }\n\n .save-state {\n display: flex;\n align-items: center;\n }\n\n .save-button {\n padding-right: 1em;\n }\n\n .dirty .copy,\n .dirty .search {\n display: none;\n }\n\n .saving .copy,\n .saving .search {\n display: none;\n }\n\n .success .copy,\n .success .search {\n display: none;\n }\n\n .failure .copy,\n .failure .search {\n display: none;\n }\n\n .popper.success {\n background: rgb(var(--success-rgb));\n }\n\n .popper.failure {\n background: rgb(var(--error-rgb));\n }\n\n .popper.success temba-icon,\n .popper.failure temba-icon {\n --icon-color: #fff !important;\n }\n\n .popper.dirty {\n background: rgba(0, 0, 0, 0.03);\n }\n\n temba-datepicker .popper {\n border-radius: 0px;\n }\n\n temba-datepicker .popper:first-child {\n padding: 0;\n }\n\n .dirty temba-datepicker .popper:first-child {\n padding-left: 1em;\n }\n\n .success temba-datepicker .popper:first-child {\n padding-left: 1em;\n }\n\n .failure temba-datepicker .popper:first-child {\n padding-left: 1em;\n }\n\n .saving temba-datepicker .popper:first-child {\n padding-left: 1em;\n }\n\n temba-datepicker .postfix {\n margin-left: 0;\n }\n\n .saving temba-datepicker,\n .saving temba-textinput {\n pointer-events: none !important;\n cursor: default !important;\n opacity: 0.7;\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('icon-action');\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 handleResponse(response: WebResponse) {\n if (response.status === 200) {\n this.value = response.json.fields[this.key];\n // this.status = Status.Success;\n // on success lets go back to ready state for now\n this.status = Status.Ready;\n this.dirty = false;\n } else {\n this.status = Status.Failure;\n }\n }\n\n public handleSubmit() {\n const input = this.shadowRoot.querySelector(\n 'temba-textinput, temba-datepicker'\n ) as FormElement;\n\n if (input.value !== this.value) {\n this.dirty = true;\n this.status = Status.Saving;\n this.value = input.value;\n this.fireEvent('change');\n }\n }\n\n public handleChange(evt: Event) {\n evt.preventDefault();\n evt.stopPropagation();\n }\n\n public handleDateChange(evt: Event) {\n evt.preventDefault();\n evt.stopPropagation();\n this.dirty = true;\n }\n\n public handleInput(evt: KeyboardEvent) {\n const input = evt.currentTarget as TextInput;\n if (evt.key === 'Enter') {\n input.blur();\n this.handleSubmit();\n } else {\n if (input.value !== this.value) {\n this.dirty = true;\n }\n }\n }\n\n private getInputType(type: string): string {\n if (type === 'numeric') {\n return InputType.Number;\n }\n return InputType.Text;\n }\n\n public render(): TemplateResult {\n const state = html`<div class=\"save-state\">\n ${this.dirty\n ? html`<temba-button\n class=\"save-button\"\n name=\"Save\"\n small\n @click=${this.handleSubmit}\n ></temba-button>`\n : html` ${this.status === Status.Saving\n ? html`<temba-icon\n spin\n name=\"${Icon.progress_spinner}\"\n ></temba-icon>`\n : null}\n ${this.status === Status.Success && !this.dirty\n ? html`<temba-icon name=\"${Icon.success}\"></temba-icon>`\n : null}\n ${this.status === Status.Failure\n ? html`<temba-tip text=\"Failed to save changes, try again later.\"\n ><temba-icon name=\"${Icon.alert_warning}\"></temba-icon\n ></temba-tip>`\n : null}`}\n </div>`;\n\n return html`\n <div\n class=${this.status +\n ' ' +\n getClasses({\n wrapper: true,\n set: !!this.value,\n unset: !this.value,\n disabled: this.disabled,\n mutable: !this.disabled,\n dirty: this.dirty,\n })}\n >\n ${this.type === 'datetime'\n ? html`\n <temba-datepicker\n timezone=${this.timezone}\n value=\"${this.value ? this.value : ''}\"\n @change=${this.handleDateChange}\n ?disabled=${this.disabled}\n time\n >\n <div class=\"prefix\" slot=\"prefix\">\n <div class=\"name\">${this.name}</div>\n </div>\n <div class=\"postfix\" slot=\"postfix\">\n <div\n class=\"popper ${this.status} ${this.dirty ? 'dirty' : ''}\"\n >\n ${state}\n </div>\n </div>\n </temba-datepicker>\n `\n : html`\n <temba-textinput\n class=\"${this.status} ${this.dirty ? 'dirty' : ''}\"\n value=\"${this.value ? this.value : ''}\"\n @keyup=${this.handleInput}\n @change=${this.handleChange}\n type=${this.getInputType(this.type)}\n ?disabled=${this.disabled}\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} ${this.status} ${this.dirty\n ? 'dirty'\n : ''}\"\n @click=${this.handleIconClick}\n >\n ${state}\n\n <temba-icon\n class=\"search\"\n icon-action=\"search\"\n name=\"${Icon.search}\"\n animateclick=\"pulse\"\n ></temba-icon>\n <temba-icon\n class=\"copy\"\n icon-action=\"copy\"\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"]}
|
package/package.json
CHANGED