@nyaruka/temba-components 0.75.0 → 0.75.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -0
- package/demo/index.html +1 -1
- package/dist/{47acce75.js → 42372647.js} +51 -32
- package/dist/index.js +51 -32
- package/dist/static/svg/index.svg +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/compose/Compose.js +0 -1
- package/out-tsc/src/compose/Compose.js.map +1 -1
- package/out-tsc/src/contacts/ContactFieldEditor.js +0 -1
- package/out-tsc/src/contacts/ContactFieldEditor.js.map +1 -1
- package/out-tsc/src/dialog/Dialog.js +20 -2
- package/out-tsc/src/dialog/Dialog.js.map +1 -1
- package/out-tsc/src/dropdown/Dropdown.js +46 -42
- package/out-tsc/src/dropdown/Dropdown.js.map +1 -1
- package/out-tsc/src/lightbox/Lightbox.js +2 -3
- package/out-tsc/src/lightbox/Lightbox.js.map +1 -1
- package/out-tsc/src/list/TembaList.js +8 -1
- package/out-tsc/src/list/TembaList.js.map +1 -1
- package/out-tsc/src/list/TembaMenu.js +5 -2
- package/out-tsc/src/list/TembaMenu.js.map +1 -1
- package/out-tsc/src/vectoricon/index.js +2 -2
- package/out-tsc/src/vectoricon/index.js.map +1 -1
- package/package.json +1 -1
- package/src/compose/Compose.ts +0 -1
- package/src/contacts/ContactFieldEditor.ts +0 -1
- package/src/dialog/Dialog.ts +20 -6
- package/src/dropdown/Dropdown.ts +41 -30
- package/src/lightbox/Lightbox.ts +2 -3
- package/src/list/TembaList.ts +7 -1
- package/src/list/TembaMenu.ts +5 -2
- package/src/vectoricon/index.ts +2 -2
- package/static/svg/index.svg +1 -1
- package/static/svg/work/traced/volume-min.svg +1 -0
- package/static/svg/work/used/volume-min.svg +3 -0
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),d={module:{uri:i},exports:r,require:l};t[i]=Promise.all(n.map((e=>d[e]||l(e)))).then((e=>(s(...e),r)))}}define(["./workbox-919adfb7"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"42372647.js",revision:"50d8f02b8297e5411865a105f1e99563"},{url:"templates/components-body.html",revision:"c496b733ded9266a28e59ed5f17a6ba8"},{url:"templates/components-head.html",revision:"e0430f4e1f143fe2d612e068a78ea19b"}],{}),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/3b35805a68d2c7b67aa7736034230bc1/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\": \"42372647.js\",\n \"revision\": \"50d8f02b8297e5411865a105f1e99563\"\n },\n {\n \"url\": \"templates/components-body.html\",\n \"revision\": \"c496b733ded9266a28e59ed5f17a6ba8\"\n },\n {\n \"url\": \"templates/components-head.html\",\n \"revision\": \"e0430f4e1f143fe2d612e068a78ea19b\"\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/42372647.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.75.3"</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/42372647.js" crossorigin="anonymous">
|
|
@@ -330,7 +330,6 @@ export class Compose extends FormElement {
|
|
|
330
330
|
this.requestUpdate('currentQuickReplies');
|
|
331
331
|
}
|
|
332
332
|
handleOptInChange(event) {
|
|
333
|
-
console.log('changed', this.currentOptin, event.target.values);
|
|
334
333
|
this.currentOptin = event.target.values;
|
|
335
334
|
this.requestUpdate('optIn');
|
|
336
335
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Compose.js","sourceRoot":"","sources":["../../../src/compose/Compose.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { FormElement } from '../FormElement';\nimport { property } from 'lit/decorators.js';\nimport { Icon } from '../vectoricon';\nimport { Attachment, CustomEventType, Language } from '../interfaces';\nimport {\n formatFileSize,\n getClasses,\n postFormData,\n truncate,\n DEFAULT_MEDIA_ENDPOINT,\n WebResponse,\n isImageAttachment,\n} from '../utils';\nimport { Completion } from '../completion/Completion';\nimport { Select } from '../select/Select';\nimport { TabPane } from '../tabpane/TabPane';\nimport { EventHandler } from '../RapidElement';\n\nexport class Compose extends FormElement {\n static get styles() {\n return css`\n .container {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n position: relative;\n\n border-radius: var(--curvature-widget);\n background: var(--color-widget-bg);\n border: var(--compose-border, 1px solid var(--color-widget-border));\n transition: all ease-in-out var(--transition-speed);\n box-shadow: var(--compose-shadow, var(--widget-box-shadow));\n caret-color: var(--input-caret);\n }\n\n .drop-mask {\n opacity: 0;\n pointer-events: none;\n position: absolute;\n height: 100%;\n width: 100%;\n bottom: 0;\n right: 0;\n background: rgba(210, 243, 184, 0.8);\n border-radius: var(--curvature-widget);\n transition: opacity ease-in-out var(--transition-speed);\n display: flex;\n align-items: center;\n text-align: center;\n }\n\n .highlight .drop-mask {\n opacity: 1;\n }\n\n .drop-mask > div {\n margin: auto;\n border-radius: var(--curvature-widget);\n font-weight: 400;\n color: rgba(0, 0, 0, 0.5);\n }\n\n .items {\n }\n\n .chatbox {\n --color-widget-border: none;\n --curvature-widget: var(\n --compose-curvature,\n var(--curvature) var(--curvature) 0px 0px\n );\n --textarea-min-height: var(--textarea-min-height, 4em);\n --widget-box-shadow: none;\n padding: var(--compose-padding, 0px);\n }\n\n .attachments {\n }\n .attachments-list {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0.2em;\n }\n .attachment-item {\n padding: 0.4em;\n }\n .attachment-item.error {\n background: #fff;\n color: rgba(250, 0, 0, 0.75);\n padding: 0.2em;\n margin: 0.3em 0.5em;\n border-radius: var(--curvature);\n display: block;\n }\n\n .remove-item {\n position: absolute;\n --icon-color: #ccc;\n background: #fff;\n border-radius: 99%;\n transform: scale(0);\n transition: transform 200ms linear;\n }\n\n .attachment-item:hover .remove-item {\n transform: scale(1);\n }\n\n .remove-item:hover {\n --icon-color: #333;\n cursor: pointer;\n }\n\n .remove-item.error:hover {\n background: rgba(250, 0, 0, 0.1);\n }\n\n .remove-item.error {\n background: rgba(250, 0, 0, 0.05);\n color: rgba(250, 0, 0, 0.75);\n }\n .attachment-name {\n align-self: center;\n font-size: 12px;\n padding: 2px 8px;\n }\n\n .actions {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0em;\n background: #f9f9f9;\n border-bottom-left-radius: var(--curvature);\n border-bottom-right-radius: var(--curvature);\n border-top: solid 1px var(--color-widget-border);\n }\n\n #upload-input {\n display: none;\n }\n .upload-label {\n display: flex;\n align-items: center;\n }\n .upload-icon {\n color: rgb(102, 102, 102);\n }\n .actions-right {\n display: flex;\n align-items: center;\n }\n temba-charcount {\n margin-right: 5px;\n overflow: hidden;\n --temba-charcount-counts-margin-top: 0px;\n --temba-charcount-summary-margin-top: 0px;\n --temba-charcount-summary-position: fixed;\n --temba-charcount-summary-right: 105px;\n --temba-charcount-summary-bottom: 105px;\n }\n temba-button {\n --button-y: 1px;\n --button-x: 12px;\n }\n .send-error {\n color: rgba(250, 0, 0, 0.75);\n font-size: var(--help-text-size);\n }\n\n .language {\n margin-bottom: 0.6em;\n display: block;\n }\n\n .top-right {\n align-items: center;\n display: flex;\n }\n\n #send-button {\n margin: 0.3em;\n }\n\n temba-tabs {\n --focused-tab-color: #f4f4f4;\n }\n\n .quick-replies {\n margin: 0.8em;\n }\n\n .add-attachment {\n padding: 1em;\n background: #eee;\n border-radius: var(--curvature);\n color: #aaa;\n margin: 0.5em;\n }\n\n .add-attachment:hover {\n background: #e9e9e9;\n cursor: pointer;\n }\n\n temba-loading {\n margin: auto 1em;\n }\n\n .optins {\n padding: 1em;\n }\n `;\n }\n\n @property({ type: Number })\n index = 1;\n\n @property({ type: Number })\n maxAttachments = 3;\n\n @property({ type: Number })\n maxLength = 640;\n\n @property({ type: Boolean })\n completion: boolean;\n\n @property({ type: Boolean })\n chatbox: boolean;\n\n @property({ type: Boolean })\n attachments: boolean;\n\n @property({ type: Boolean })\n quickReplies: boolean;\n\n @property({ type: Boolean })\n optIns: boolean;\n\n @property({ type: Boolean })\n counter: boolean;\n\n @property({ type: Boolean })\n pendingDrop: boolean;\n\n @property({ type: Boolean })\n button: boolean;\n\n @property({ type: String })\n currentText = '';\n\n @property({ type: String })\n initialText = '';\n\n @property({ type: String })\n accept = ''; //e.g. \".xls,.xlsx\"\n\n @property({ type: String, attribute: false })\n endpoint = DEFAULT_MEDIA_ENDPOINT;\n\n @property({ type: Boolean, attribute: false })\n uploading: boolean;\n\n @property({ type: Array })\n languages: Language[] = [];\n\n @property({ type: Array })\n currentAttachments: Attachment[] = [];\n\n @property({ type: Array })\n currentQuickReplies: { name: string; value: string }[] = [];\n\n @property({ type: Array })\n currentOptin: { name: string; uuid: string }[] = [];\n\n @property({ type: String })\n optinEndpoint = '/api/v2/optins.json';\n\n @property({ type: Array, attribute: false })\n failedAttachments: Attachment[] = [];\n\n @property({ type: String })\n buttonName = 'Send';\n\n @property({ type: Boolean, attribute: false })\n buttonDisabled = true;\n\n @property({ type: String, attribute: false })\n buttonError = '';\n\n @property({ type: Boolean, attribute: 'widget_only' })\n widgetOnly: boolean;\n\n @property({ type: Array })\n errors: string[];\n\n @property({ type: Object })\n langValues: {\n [lang: string]: {\n text: string;\n attachments: Attachment[];\n quick_replies: string[];\n optin?: { name: string; uuid: string };\n };\n } = {};\n\n @property({ type: String })\n currentLanguage = 'und';\n\n public constructor() {\n super();\n }\n\n private isBaseLanguage(): boolean {\n return (\n this.currentLanguage == 'und' ||\n this.currentLanguage == this.languages[0].iso\n );\n }\n\n private handleTabChanged() {\n const tabs = this.shadowRoot.querySelector('temba-tabs') as TabPane;\n const tab = tabs.getCurrentTab();\n if (tab) {\n // check we are going for the first attachment\n if (tab.icon == 'attachment') {\n if (this.currentAttachments.length == 0) {\n this.handleUploadFileIconClicked();\n }\n }\n }\n }\n\n public getEventHandlers(): EventHandler[] {\n return [\n { event: CustomEventType.ContextChanged, method: this.handleTabChanged },\n ];\n }\n\n public firstUpdated(changes: Map<string, any>): void {\n super.firstUpdated(changes);\n\n if (changes.has('languages') && this.languages.length > 0) {\n this.currentLanguage = this.languages[0].iso;\n }\n\n if (changes.has('value')) {\n this.langValues = this.getDeserializedValue() || {};\n }\n this.setFocusOnChatbox();\n }\n\n public updated(changes: Map<string, any>): void {\n super.updated(changes);\n\n if (changes.has('currentLanguage') && this.langValues) {\n let langValue = {\n text: '',\n attachments: [],\n quick_replies: [],\n };\n\n if (this.currentLanguage in this.langValues) {\n langValue = this.langValues[this.currentLanguage];\n }\n\n this.currentText = langValue.text;\n this.initialText = langValue.text;\n this.currentAttachments = langValue.attachments;\n this.currentQuickReplies = (langValue.quick_replies || []).map(value => {\n return { name: value, value };\n });\n this.currentOptin = langValue['optin'] ? [langValue['optin']] : [];\n this.setFocusOnChatbox();\n\n // TODO: this feels like it shouldn't be needed\n const chatbox = this.shadowRoot.querySelector('.chatbox') as any;\n if (chatbox) {\n chatbox.value = this.initialText;\n }\n this.resetTabs();\n this.requestUpdate('currentAttachments');\n }\n\n if (\n (this.langValues &&\n (changes.has('currentText') ||\n changes.has('currentAttachments') ||\n changes.has('currentQuickReplies'))) ||\n changes.has('currentOptin')\n ) {\n this.toggleButton();\n\n const trimmed = this.currentText ? this.currentText.trim() : '';\n if (\n trimmed ||\n this.currentAttachments.length > 0 ||\n this.currentQuickReplies.length > 0\n ) {\n this.langValues[this.currentLanguage] = {\n text: trimmed,\n attachments: this.currentAttachments,\n quick_replies: this.currentQuickReplies.map(option => option.value),\n optin: this.currentOptin.length > 0 ? this.currentOptin[0] : null,\n };\n } else {\n delete this.langValues[this.currentLanguage];\n }\n this.fireCustomEvent(CustomEventType.ContentChanged, this.langValues);\n this.requestUpdate('langValues');\n this.setValue(this.langValues);\n }\n }\n\n private setFocusOnChatbox(): void {\n if (this.chatbox) {\n const completion = this.shadowRoot.querySelector(\n '.chatbox'\n ) as Completion;\n if (completion) {\n window.setTimeout(() => {\n completion.focus();\n // this.resetTabs();\n }, 0);\n }\n }\n }\n\n public reset(): void {\n (this.shadowRoot.querySelector('.chatbox') as HTMLInputElement).value = '';\n this.initialText = '';\n this.currentText = '';\n this.currentQuickReplies = [];\n this.currentAttachments = [];\n this.failedAttachments = [];\n this.buttonError = '';\n }\n\n private handleQuickReplyChange(event: InputEvent) {\n this.requestUpdate('currentQuickReplies');\n }\n\n private handleOptInChange(event: InputEvent) {\n console.log('changed', this.currentOptin, (event.target as any).values);\n this.currentOptin = (event.target as any).values;\n this.requestUpdate('optIn');\n }\n\n private handleChatboxChange(evt: Event) {\n const chatbox = evt.target as HTMLInputElement;\n this.currentText = chatbox.value;\n }\n\n private handleDragEnter(evt: DragEvent): void {\n this.highlight(evt);\n }\n\n private handleDragOver(evt: DragEvent): void {\n this.highlight(evt);\n }\n\n private handleDragLeave(evt: DragEvent): void {\n this.unhighlight(evt);\n }\n\n private handleDrop(evt: DragEvent): void {\n if (this.canAcceptAttachments()) {\n this.unhighlight(evt);\n const dt = evt.dataTransfer;\n if (dt) {\n const files = dt.files;\n this.uploadFiles(files);\n }\n }\n }\n\n private preventDefaults(evt: Event): void {\n evt.preventDefault();\n evt.stopPropagation();\n }\n\n private highlight(evt: DragEvent): void {\n if (this.canAcceptAttachments()) {\n this.pendingDrop = true;\n this.preventDefaults(evt);\n }\n }\n\n private unhighlight(evt: DragEvent): void {\n if (this.canAcceptAttachments()) {\n this.pendingDrop = false;\n this.preventDefaults(evt);\n }\n }\n\n private handleUploadFileIconClicked(): void {\n this.dispatchEvent(new Event('change'));\n }\n\n private handleUploadFileInputChanged(evt: Event): void {\n const target = evt.target as HTMLInputElement;\n const files = target.files;\n this.uploadFiles(files);\n }\n\n public canAcceptAttachments() {\n return (\n this.attachments && this.currentAttachments.length < this.maxAttachments\n );\n }\n\n public uploadFiles(files: FileList): void {\n let filesToUpload = [];\n if (this.currentAttachments && this.currentAttachments.length > 0) {\n //remove duplicate files that have already been uploaded\n filesToUpload = [...files].filter(file => {\n const index = this.currentAttachments.findIndex(\n value => value.filename === file.name && value.size === file.size\n );\n if (index === -1) {\n return file;\n }\n });\n } else {\n filesToUpload = [...files];\n }\n filesToUpload.map(fileToUpload => {\n this.uploadFile(fileToUpload);\n });\n }\n\n private uploadFile(file: File): void {\n this.uploading = true;\n\n const url = this.endpoint;\n const payload = new FormData();\n payload.append('file', file);\n postFormData(url, payload)\n .then((response: WebResponse) => {\n if (this.currentAttachments.length >= this.maxAttachments) {\n this.addFailedAttachment(file, 'Too many attachments');\n } else {\n const attachment = response.json as Attachment;\n if (attachment) {\n this.addCurrentAttachment(attachment);\n }\n }\n })\n .catch((error: WebResponse) => {\n let uploadError = '';\n if (error.status === 400) {\n uploadError = error.json.file[0];\n } else {\n uploadError = 'Server failure';\n }\n console.error(uploadError);\n this.addFailedAttachment(file, uploadError);\n })\n .finally(() => {\n this.uploading = false;\n });\n }\n\n private addCurrentAttachment(attachmentToAdd: any) {\n this.currentAttachments.push(attachmentToAdd);\n this.requestUpdate('currentAttachments');\n }\n private removeCurrentAttachment(attachmentToRemove: any) {\n this.currentAttachments = this.currentAttachments.filter(\n currentAttachment => currentAttachment !== attachmentToRemove\n );\n this.requestUpdate('currentAttachments');\n }\n\n private addFailedAttachment(file: File, error: string) {\n const failedAttachment = {\n uuid: Math.random().toString(36).slice(2, 6),\n content_type: file.type,\n filename: file.name,\n url: file.name,\n size: file.size,\n error: error,\n } as Attachment;\n this.failedAttachments.push(failedAttachment);\n this.requestUpdate('failedAttachments');\n }\n private removeFailedAttachment(attachmentToRemove: any) {\n this.failedAttachments = this.failedAttachments.filter(\n (failedAttachment: any) => failedAttachment !== attachmentToRemove\n );\n this.requestUpdate('failedAttachments');\n }\n\n private handleRemoveFileClicked(evt: Event): void {\n const target = evt.target as HTMLDivElement;\n\n const currentAttachmentToRemove = this.currentAttachments.find(\n ({ uuid }) => uuid === target.id\n );\n if (currentAttachmentToRemove) {\n this.removeCurrentAttachment(currentAttachmentToRemove);\n }\n\n const failedAttachmentToRemove = this.failedAttachments.find(\n ({ uuid }) => uuid === target.id\n );\n if (failedAttachmentToRemove) {\n this.removeFailedAttachment(failedAttachmentToRemove);\n }\n }\n\n public toggleButton() {\n if (this.button) {\n this.buttonError = '';\n const chatboxEmpty = this.currentText.trim().length === 0;\n const attachmentsEmpty = this.currentAttachments.length === 0;\n if (this.chatbox && this.attachments) {\n this.buttonDisabled = chatboxEmpty && attachmentsEmpty;\n } else if (this.chatbox) {\n this.buttonDisabled = chatboxEmpty;\n } else if (this.attachments) {\n this.buttonDisabled = attachmentsEmpty;\n } else {\n this.buttonDisabled = true;\n }\n }\n }\n\n private handleSendClick(evt: Event) {\n evt.stopPropagation();\n this.handleSend();\n }\n\n private handleSendEnter(evt: KeyboardEvent) {\n if (this.button) {\n if (evt.key === 'Enter' && !evt.shiftKey) {\n if (this.completion) {\n const chat = evt.target as Completion;\n if (!chat.hasVisibleOptions()) {\n this.handleSend();\n this.preventDefaults(evt);\n }\n } else {\n this.handleSend();\n this.preventDefaults(evt);\n }\n }\n }\n }\n\n private handleSend() {\n if (!this.buttonDisabled) {\n this.buttonDisabled = true;\n const name = this.buttonName;\n this.fireCustomEvent(CustomEventType.ButtonClicked, { name });\n }\n }\n\n private handleLanguageChange(evt: Event) {\n const select = evt.target as Select;\n this.currentLanguage = select.values[0].iso;\n }\n\n public resetTabs() {\n (this.shadowRoot.querySelector('temba-tabs') as TabPane).index = -1;\n }\n\n public render(): TemplateResult {\n return html`\n <temba-field\n name=${this.name}\n .errors=${this.errors}\n .widgetOnly=${this.widgetOnly}\n .value=${this.value}\n >\n ${this.languages.length > 1\n ? html`<temba-select\n @change=${this.handleLanguageChange}\n class=\"language\"\n name=\"language\"\n .staticOptions=${this.languages}\n valueKey=\"iso\"\n >\n </temba-select>`\n : null}\n\n <div\n class=${getClasses({ container: true, highlight: this.pendingDrop })}\n @dragenter=\"${this.handleDragEnter}\"\n @dragover=\"${this.handleDragOver}\"\n @dragleave=\"${this.handleDragLeave}\"\n @drop=\"${this.handleDrop}\"\n >\n <div class=\"drop-mask\"><div>Upload Attachment</div></div>\n\n ${this.chatbox ? html`${this.getChatbox()}` : null}\n\n <div class=\"items actions\">${this.getActions()}</div>\n </div>\n </temba-field>\n `;\n }\n\n private getChatbox(): TemplateResult {\n if (this.completion) {\n return html`<temba-completion\n class=\"chatbox\"\n .value=${this.initialText}\n gsm\n textarea\n autogrow\n maxlength=${this.maxLength}\n @change=${this.handleChatboxChange}\n @keydown=${this.handleSendEnter}\n placeholder=\"Write something here\"\n >\n </temba-completion>`;\n } else {\n return html`<temba-textinput\n class=\"chatbox\"\n gsm\n textarea\n autogrow\n maxlength=${this.maxLength}\n .value=${this.initialText}\n @change=${this.handleChatboxChange}\n @keydown=${this.handleSendEnter}\n placeholder=\"Write something here\"\n >\n </temba-textinput>`;\n }\n }\n\n private getAttachments(): TemplateResult {\n return html`\n ${this.attachments\n ? html` <div class=\"attachments-list\">\n ${this.currentAttachments.map(validAttachment => {\n return html` <div class=\"attachment-item\">\n <temba-icon\n class=\"remove-item\"\n @click=\"${this.handleRemoveFileClicked}\"\n id=\"${validAttachment.uuid}\"\n name=\"${Icon.delete_small}\"\n ></temba-icon>\n ${isImageAttachment(validAttachment)\n ? html`<temba-thumbnail\n url=\"${validAttachment.url}\"\n ></temba-thumbnail>`\n : html`<temba-thumbnail\n label=\"${validAttachment.content_type.split('/')[1]}\"\n ></temba-thumbnail>`}\n </div>`;\n })}\n ${this.getUploader()}\n </div>\n ${this.failedAttachments.map(invalidAttachment => {\n return html` <div class=\"attachment-item error\">\n <div\n class=\"remove-item error\"\n @click=\"${this.handleRemoveFileClicked}\"\n >\n <temba-icon\n id=\"${invalidAttachment.uuid}\"\n name=\"${Icon.delete_small}\"\n ></temba-icon>\n </div>\n <div class=\"attachment-name\">\n <span\n title=\"${invalidAttachment.filename} (${formatFileSize(\n 0,\n 0\n )}) - Attachment failed - ${invalidAttachment.error}\"\n >${truncate(invalidAttachment.filename, 25)}\n (${formatFileSize(0, 0)}) - Attachment failed</span\n >\n </div>\n </div>`;\n })}`\n : null}\n `;\n }\n\n private getActions(): TemplateResult {\n const showOptins = this.optIns && this.isBaseLanguage();\n return html`\n <temba-tabs\n embedded\n focusedname\n bottom\n refresh=\"${this.currentAttachments.length}|${this.index}|${this\n .currentQuickReplies.length}|${showOptins}|${this.currentOptin}\"\n >\n ${this.attachments\n ? html`<temba-tab\n name=\"Attachments\"\n icon=\"attachment\"\n .count=${this.currentAttachments.length}\n >\n <div class=\"items attachments\">${this.getAttachments()}</div>\n </temba-tab>`\n : null}\n ${this.quickReplies\n ? html`<temba-tab\n name=\"Quick Replies\"\n icon=\"quick_replies\"\n .count=${this.currentQuickReplies.length}\n >\n <temba-select\n @change=${this.handleQuickReplyChange}\n .values=${this.currentQuickReplies}\n class=\"quick-replies\"\n tags\n multi\n searchable\n expressions\n placeholder=\"Add Quick Reply\"\n ></temba-select>\n </temba-tab>`\n : null}\n <temba-tab\n name=\"Opt-in\"\n icon=\"channel_fba\"\n ?hidden=${!showOptins}\n ?checked=${this.currentOptin.length > 0}\n >\n <temba-select\n @change=${this.handleOptInChange}\n .values=${this.currentOptin}\n endpoint=\"${this.optinEndpoint}\"\n class=\"optins\"\n searchable\n clearable\n placeholder=\"Select an opt-in to use for Facebook (optional)\"\n ></temba-select>\n </temba-tab>\n\n <div slot=\"tab-right\" class=\"top-right\">\n ${this.buttonError\n ? html`<div class=\"send-error\">${this.buttonError}</div>`\n : null}\n ${this.counter ? this.getCounter() : null}\n ${this.button ? this.getButton() : null}\n </div>\n </temba-tabs>\n `;\n }\n\n private getUploader(): TemplateResult {\n if (this.uploading) {\n return html`<temba-loading units=\"3\" size=\"12\"></temba-loading>`;\n } else {\n return this.currentAttachments.length < this.maxAttachments\n ? html`<input\n type=\"file\"\n id=\"upload-input\"\n multiple\n accept=\"${this.accept}\"\n @change=\"${this.handleUploadFileInputChanged}\"\n />\n <label\n id=\"upload-label\"\n class=\"actions-left upload-label\"\n for=\"upload-input\"\n >\n <div\n class=\"add-attachment\"\n @click=\"${this.handleUploadFileIconClicked}\"\n >\n <temba-icon name=\"add\" size=\"1.5\"></temba-icon>\n </div>\n </label>`\n : null;\n }\n }\n\n private getCounter(): TemplateResult {\n return html`<temba-charcount\n .text=\"${this.currentText}\"\n ></temba-charcount>`;\n }\n\n private getButton(): TemplateResult {\n return html` <temba-button\n id=\"send-button\"\n name=${this.buttonName}\n @click=${this.handleSendClick}\n ?disabled=${this.buttonDisabled}\n ></temba-button>`;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"Compose.js","sourceRoot":"","sources":["../../../src/compose/Compose.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { FormElement } from '../FormElement';\nimport { property } from 'lit/decorators.js';\nimport { Icon } from '../vectoricon';\nimport { Attachment, CustomEventType, Language } from '../interfaces';\nimport {\n formatFileSize,\n getClasses,\n postFormData,\n truncate,\n DEFAULT_MEDIA_ENDPOINT,\n WebResponse,\n isImageAttachment,\n} from '../utils';\nimport { Completion } from '../completion/Completion';\nimport { Select } from '../select/Select';\nimport { TabPane } from '../tabpane/TabPane';\nimport { EventHandler } from '../RapidElement';\n\nexport class Compose extends FormElement {\n static get styles() {\n return css`\n .container {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n position: relative;\n\n border-radius: var(--curvature-widget);\n background: var(--color-widget-bg);\n border: var(--compose-border, 1px solid var(--color-widget-border));\n transition: all ease-in-out var(--transition-speed);\n box-shadow: var(--compose-shadow, var(--widget-box-shadow));\n caret-color: var(--input-caret);\n }\n\n .drop-mask {\n opacity: 0;\n pointer-events: none;\n position: absolute;\n height: 100%;\n width: 100%;\n bottom: 0;\n right: 0;\n background: rgba(210, 243, 184, 0.8);\n border-radius: var(--curvature-widget);\n transition: opacity ease-in-out var(--transition-speed);\n display: flex;\n align-items: center;\n text-align: center;\n }\n\n .highlight .drop-mask {\n opacity: 1;\n }\n\n .drop-mask > div {\n margin: auto;\n border-radius: var(--curvature-widget);\n font-weight: 400;\n color: rgba(0, 0, 0, 0.5);\n }\n\n .items {\n }\n\n .chatbox {\n --color-widget-border: none;\n --curvature-widget: var(\n --compose-curvature,\n var(--curvature) var(--curvature) 0px 0px\n );\n --textarea-min-height: var(--textarea-min-height, 4em);\n --widget-box-shadow: none;\n padding: var(--compose-padding, 0px);\n }\n\n .attachments {\n }\n .attachments-list {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0.2em;\n }\n .attachment-item {\n padding: 0.4em;\n }\n .attachment-item.error {\n background: #fff;\n color: rgba(250, 0, 0, 0.75);\n padding: 0.2em;\n margin: 0.3em 0.5em;\n border-radius: var(--curvature);\n display: block;\n }\n\n .remove-item {\n position: absolute;\n --icon-color: #ccc;\n background: #fff;\n border-radius: 99%;\n transform: scale(0);\n transition: transform 200ms linear;\n }\n\n .attachment-item:hover .remove-item {\n transform: scale(1);\n }\n\n .remove-item:hover {\n --icon-color: #333;\n cursor: pointer;\n }\n\n .remove-item.error:hover {\n background: rgba(250, 0, 0, 0.1);\n }\n\n .remove-item.error {\n background: rgba(250, 0, 0, 0.05);\n color: rgba(250, 0, 0, 0.75);\n }\n .attachment-name {\n align-self: center;\n font-size: 12px;\n padding: 2px 8px;\n }\n\n .actions {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0em;\n background: #f9f9f9;\n border-bottom-left-radius: var(--curvature);\n border-bottom-right-radius: var(--curvature);\n border-top: solid 1px var(--color-widget-border);\n }\n\n #upload-input {\n display: none;\n }\n .upload-label {\n display: flex;\n align-items: center;\n }\n .upload-icon {\n color: rgb(102, 102, 102);\n }\n .actions-right {\n display: flex;\n align-items: center;\n }\n temba-charcount {\n margin-right: 5px;\n overflow: hidden;\n --temba-charcount-counts-margin-top: 0px;\n --temba-charcount-summary-margin-top: 0px;\n --temba-charcount-summary-position: fixed;\n --temba-charcount-summary-right: 105px;\n --temba-charcount-summary-bottom: 105px;\n }\n temba-button {\n --button-y: 1px;\n --button-x: 12px;\n }\n .send-error {\n color: rgba(250, 0, 0, 0.75);\n font-size: var(--help-text-size);\n }\n\n .language {\n margin-bottom: 0.6em;\n display: block;\n }\n\n .top-right {\n align-items: center;\n display: flex;\n }\n\n #send-button {\n margin: 0.3em;\n }\n\n temba-tabs {\n --focused-tab-color: #f4f4f4;\n }\n\n .quick-replies {\n margin: 0.8em;\n }\n\n .add-attachment {\n padding: 1em;\n background: #eee;\n border-radius: var(--curvature);\n color: #aaa;\n margin: 0.5em;\n }\n\n .add-attachment:hover {\n background: #e9e9e9;\n cursor: pointer;\n }\n\n temba-loading {\n margin: auto 1em;\n }\n\n .optins {\n padding: 1em;\n }\n `;\n }\n\n @property({ type: Number })\n index = 1;\n\n @property({ type: Number })\n maxAttachments = 3;\n\n @property({ type: Number })\n maxLength = 640;\n\n @property({ type: Boolean })\n completion: boolean;\n\n @property({ type: Boolean })\n chatbox: boolean;\n\n @property({ type: Boolean })\n attachments: boolean;\n\n @property({ type: Boolean })\n quickReplies: boolean;\n\n @property({ type: Boolean })\n optIns: boolean;\n\n @property({ type: Boolean })\n counter: boolean;\n\n @property({ type: Boolean })\n pendingDrop: boolean;\n\n @property({ type: Boolean })\n button: boolean;\n\n @property({ type: String })\n currentText = '';\n\n @property({ type: String })\n initialText = '';\n\n @property({ type: String })\n accept = ''; //e.g. \".xls,.xlsx\"\n\n @property({ type: String, attribute: false })\n endpoint = DEFAULT_MEDIA_ENDPOINT;\n\n @property({ type: Boolean, attribute: false })\n uploading: boolean;\n\n @property({ type: Array })\n languages: Language[] = [];\n\n @property({ type: Array })\n currentAttachments: Attachment[] = [];\n\n @property({ type: Array })\n currentQuickReplies: { name: string; value: string }[] = [];\n\n @property({ type: Array })\n currentOptin: { name: string; uuid: string }[] = [];\n\n @property({ type: String })\n optinEndpoint = '/api/v2/optins.json';\n\n @property({ type: Array, attribute: false })\n failedAttachments: Attachment[] = [];\n\n @property({ type: String })\n buttonName = 'Send';\n\n @property({ type: Boolean, attribute: false })\n buttonDisabled = true;\n\n @property({ type: String, attribute: false })\n buttonError = '';\n\n @property({ type: Boolean, attribute: 'widget_only' })\n widgetOnly: boolean;\n\n @property({ type: Array })\n errors: string[];\n\n @property({ type: Object })\n langValues: {\n [lang: string]: {\n text: string;\n attachments: Attachment[];\n quick_replies: string[];\n optin?: { name: string; uuid: string };\n };\n } = {};\n\n @property({ type: String })\n currentLanguage = 'und';\n\n public constructor() {\n super();\n }\n\n private isBaseLanguage(): boolean {\n return (\n this.currentLanguage == 'und' ||\n this.currentLanguage == this.languages[0].iso\n );\n }\n\n private handleTabChanged() {\n const tabs = this.shadowRoot.querySelector('temba-tabs') as TabPane;\n const tab = tabs.getCurrentTab();\n if (tab) {\n // check we are going for the first attachment\n if (tab.icon == 'attachment') {\n if (this.currentAttachments.length == 0) {\n this.handleUploadFileIconClicked();\n }\n }\n }\n }\n\n public getEventHandlers(): EventHandler[] {\n return [\n { event: CustomEventType.ContextChanged, method: this.handleTabChanged },\n ];\n }\n\n public firstUpdated(changes: Map<string, any>): void {\n super.firstUpdated(changes);\n\n if (changes.has('languages') && this.languages.length > 0) {\n this.currentLanguage = this.languages[0].iso;\n }\n\n if (changes.has('value')) {\n this.langValues = this.getDeserializedValue() || {};\n }\n this.setFocusOnChatbox();\n }\n\n public updated(changes: Map<string, any>): void {\n super.updated(changes);\n\n if (changes.has('currentLanguage') && this.langValues) {\n let langValue = {\n text: '',\n attachments: [],\n quick_replies: [],\n };\n\n if (this.currentLanguage in this.langValues) {\n langValue = this.langValues[this.currentLanguage];\n }\n\n this.currentText = langValue.text;\n this.initialText = langValue.text;\n this.currentAttachments = langValue.attachments;\n this.currentQuickReplies = (langValue.quick_replies || []).map(value => {\n return { name: value, value };\n });\n this.currentOptin = langValue['optin'] ? [langValue['optin']] : [];\n this.setFocusOnChatbox();\n\n // TODO: this feels like it shouldn't be needed\n const chatbox = this.shadowRoot.querySelector('.chatbox') as any;\n if (chatbox) {\n chatbox.value = this.initialText;\n }\n this.resetTabs();\n this.requestUpdate('currentAttachments');\n }\n\n if (\n (this.langValues &&\n (changes.has('currentText') ||\n changes.has('currentAttachments') ||\n changes.has('currentQuickReplies'))) ||\n changes.has('currentOptin')\n ) {\n this.toggleButton();\n\n const trimmed = this.currentText ? this.currentText.trim() : '';\n if (\n trimmed ||\n this.currentAttachments.length > 0 ||\n this.currentQuickReplies.length > 0\n ) {\n this.langValues[this.currentLanguage] = {\n text: trimmed,\n attachments: this.currentAttachments,\n quick_replies: this.currentQuickReplies.map(option => option.value),\n optin: this.currentOptin.length > 0 ? this.currentOptin[0] : null,\n };\n } else {\n delete this.langValues[this.currentLanguage];\n }\n this.fireCustomEvent(CustomEventType.ContentChanged, this.langValues);\n this.requestUpdate('langValues');\n this.setValue(this.langValues);\n }\n }\n\n private setFocusOnChatbox(): void {\n if (this.chatbox) {\n const completion = this.shadowRoot.querySelector(\n '.chatbox'\n ) as Completion;\n if (completion) {\n window.setTimeout(() => {\n completion.focus();\n // this.resetTabs();\n }, 0);\n }\n }\n }\n\n public reset(): void {\n (this.shadowRoot.querySelector('.chatbox') as HTMLInputElement).value = '';\n this.initialText = '';\n this.currentText = '';\n this.currentQuickReplies = [];\n this.currentAttachments = [];\n this.failedAttachments = [];\n this.buttonError = '';\n }\n\n private handleQuickReplyChange(event: InputEvent) {\n this.requestUpdate('currentQuickReplies');\n }\n\n private handleOptInChange(event: InputEvent) {\n this.currentOptin = (event.target as any).values;\n this.requestUpdate('optIn');\n }\n\n private handleChatboxChange(evt: Event) {\n const chatbox = evt.target as HTMLInputElement;\n this.currentText = chatbox.value;\n }\n\n private handleDragEnter(evt: DragEvent): void {\n this.highlight(evt);\n }\n\n private handleDragOver(evt: DragEvent): void {\n this.highlight(evt);\n }\n\n private handleDragLeave(evt: DragEvent): void {\n this.unhighlight(evt);\n }\n\n private handleDrop(evt: DragEvent): void {\n if (this.canAcceptAttachments()) {\n this.unhighlight(evt);\n const dt = evt.dataTransfer;\n if (dt) {\n const files = dt.files;\n this.uploadFiles(files);\n }\n }\n }\n\n private preventDefaults(evt: Event): void {\n evt.preventDefault();\n evt.stopPropagation();\n }\n\n private highlight(evt: DragEvent): void {\n if (this.canAcceptAttachments()) {\n this.pendingDrop = true;\n this.preventDefaults(evt);\n }\n }\n\n private unhighlight(evt: DragEvent): void {\n if (this.canAcceptAttachments()) {\n this.pendingDrop = false;\n this.preventDefaults(evt);\n }\n }\n\n private handleUploadFileIconClicked(): void {\n this.dispatchEvent(new Event('change'));\n }\n\n private handleUploadFileInputChanged(evt: Event): void {\n const target = evt.target as HTMLInputElement;\n const files = target.files;\n this.uploadFiles(files);\n }\n\n public canAcceptAttachments() {\n return (\n this.attachments && this.currentAttachments.length < this.maxAttachments\n );\n }\n\n public uploadFiles(files: FileList): void {\n let filesToUpload = [];\n if (this.currentAttachments && this.currentAttachments.length > 0) {\n //remove duplicate files that have already been uploaded\n filesToUpload = [...files].filter(file => {\n const index = this.currentAttachments.findIndex(\n value => value.filename === file.name && value.size === file.size\n );\n if (index === -1) {\n return file;\n }\n });\n } else {\n filesToUpload = [...files];\n }\n filesToUpload.map(fileToUpload => {\n this.uploadFile(fileToUpload);\n });\n }\n\n private uploadFile(file: File): void {\n this.uploading = true;\n\n const url = this.endpoint;\n const payload = new FormData();\n payload.append('file', file);\n postFormData(url, payload)\n .then((response: WebResponse) => {\n if (this.currentAttachments.length >= this.maxAttachments) {\n this.addFailedAttachment(file, 'Too many attachments');\n } else {\n const attachment = response.json as Attachment;\n if (attachment) {\n this.addCurrentAttachment(attachment);\n }\n }\n })\n .catch((error: WebResponse) => {\n let uploadError = '';\n if (error.status === 400) {\n uploadError = error.json.file[0];\n } else {\n uploadError = 'Server failure';\n }\n console.error(uploadError);\n this.addFailedAttachment(file, uploadError);\n })\n .finally(() => {\n this.uploading = false;\n });\n }\n\n private addCurrentAttachment(attachmentToAdd: any) {\n this.currentAttachments.push(attachmentToAdd);\n this.requestUpdate('currentAttachments');\n }\n private removeCurrentAttachment(attachmentToRemove: any) {\n this.currentAttachments = this.currentAttachments.filter(\n currentAttachment => currentAttachment !== attachmentToRemove\n );\n this.requestUpdate('currentAttachments');\n }\n\n private addFailedAttachment(file: File, error: string) {\n const failedAttachment = {\n uuid: Math.random().toString(36).slice(2, 6),\n content_type: file.type,\n filename: file.name,\n url: file.name,\n size: file.size,\n error: error,\n } as Attachment;\n this.failedAttachments.push(failedAttachment);\n this.requestUpdate('failedAttachments');\n }\n private removeFailedAttachment(attachmentToRemove: any) {\n this.failedAttachments = this.failedAttachments.filter(\n (failedAttachment: any) => failedAttachment !== attachmentToRemove\n );\n this.requestUpdate('failedAttachments');\n }\n\n private handleRemoveFileClicked(evt: Event): void {\n const target = evt.target as HTMLDivElement;\n\n const currentAttachmentToRemove = this.currentAttachments.find(\n ({ uuid }) => uuid === target.id\n );\n if (currentAttachmentToRemove) {\n this.removeCurrentAttachment(currentAttachmentToRemove);\n }\n\n const failedAttachmentToRemove = this.failedAttachments.find(\n ({ uuid }) => uuid === target.id\n );\n if (failedAttachmentToRemove) {\n this.removeFailedAttachment(failedAttachmentToRemove);\n }\n }\n\n public toggleButton() {\n if (this.button) {\n this.buttonError = '';\n const chatboxEmpty = this.currentText.trim().length === 0;\n const attachmentsEmpty = this.currentAttachments.length === 0;\n if (this.chatbox && this.attachments) {\n this.buttonDisabled = chatboxEmpty && attachmentsEmpty;\n } else if (this.chatbox) {\n this.buttonDisabled = chatboxEmpty;\n } else if (this.attachments) {\n this.buttonDisabled = attachmentsEmpty;\n } else {\n this.buttonDisabled = true;\n }\n }\n }\n\n private handleSendClick(evt: Event) {\n evt.stopPropagation();\n this.handleSend();\n }\n\n private handleSendEnter(evt: KeyboardEvent) {\n if (this.button) {\n if (evt.key === 'Enter' && !evt.shiftKey) {\n if (this.completion) {\n const chat = evt.target as Completion;\n if (!chat.hasVisibleOptions()) {\n this.handleSend();\n this.preventDefaults(evt);\n }\n } else {\n this.handleSend();\n this.preventDefaults(evt);\n }\n }\n }\n }\n\n private handleSend() {\n if (!this.buttonDisabled) {\n this.buttonDisabled = true;\n const name = this.buttonName;\n this.fireCustomEvent(CustomEventType.ButtonClicked, { name });\n }\n }\n\n private handleLanguageChange(evt: Event) {\n const select = evt.target as Select;\n this.currentLanguage = select.values[0].iso;\n }\n\n public resetTabs() {\n (this.shadowRoot.querySelector('temba-tabs') as TabPane).index = -1;\n }\n\n public render(): TemplateResult {\n return html`\n <temba-field\n name=${this.name}\n .errors=${this.errors}\n .widgetOnly=${this.widgetOnly}\n .value=${this.value}\n >\n ${this.languages.length > 1\n ? html`<temba-select\n @change=${this.handleLanguageChange}\n class=\"language\"\n name=\"language\"\n .staticOptions=${this.languages}\n valueKey=\"iso\"\n >\n </temba-select>`\n : null}\n\n <div\n class=${getClasses({ container: true, highlight: this.pendingDrop })}\n @dragenter=\"${this.handleDragEnter}\"\n @dragover=\"${this.handleDragOver}\"\n @dragleave=\"${this.handleDragLeave}\"\n @drop=\"${this.handleDrop}\"\n >\n <div class=\"drop-mask\"><div>Upload Attachment</div></div>\n\n ${this.chatbox ? html`${this.getChatbox()}` : null}\n\n <div class=\"items actions\">${this.getActions()}</div>\n </div>\n </temba-field>\n `;\n }\n\n private getChatbox(): TemplateResult {\n if (this.completion) {\n return html`<temba-completion\n class=\"chatbox\"\n .value=${this.initialText}\n gsm\n textarea\n autogrow\n maxlength=${this.maxLength}\n @change=${this.handleChatboxChange}\n @keydown=${this.handleSendEnter}\n placeholder=\"Write something here\"\n >\n </temba-completion>`;\n } else {\n return html`<temba-textinput\n class=\"chatbox\"\n gsm\n textarea\n autogrow\n maxlength=${this.maxLength}\n .value=${this.initialText}\n @change=${this.handleChatboxChange}\n @keydown=${this.handleSendEnter}\n placeholder=\"Write something here\"\n >\n </temba-textinput>`;\n }\n }\n\n private getAttachments(): TemplateResult {\n return html`\n ${this.attachments\n ? html` <div class=\"attachments-list\">\n ${this.currentAttachments.map(validAttachment => {\n return html` <div class=\"attachment-item\">\n <temba-icon\n class=\"remove-item\"\n @click=\"${this.handleRemoveFileClicked}\"\n id=\"${validAttachment.uuid}\"\n name=\"${Icon.delete_small}\"\n ></temba-icon>\n ${isImageAttachment(validAttachment)\n ? html`<temba-thumbnail\n url=\"${validAttachment.url}\"\n ></temba-thumbnail>`\n : html`<temba-thumbnail\n label=\"${validAttachment.content_type.split('/')[1]}\"\n ></temba-thumbnail>`}\n </div>`;\n })}\n ${this.getUploader()}\n </div>\n ${this.failedAttachments.map(invalidAttachment => {\n return html` <div class=\"attachment-item error\">\n <div\n class=\"remove-item error\"\n @click=\"${this.handleRemoveFileClicked}\"\n >\n <temba-icon\n id=\"${invalidAttachment.uuid}\"\n name=\"${Icon.delete_small}\"\n ></temba-icon>\n </div>\n <div class=\"attachment-name\">\n <span\n title=\"${invalidAttachment.filename} (${formatFileSize(\n 0,\n 0\n )}) - Attachment failed - ${invalidAttachment.error}\"\n >${truncate(invalidAttachment.filename, 25)}\n (${formatFileSize(0, 0)}) - Attachment failed</span\n >\n </div>\n </div>`;\n })}`\n : null}\n `;\n }\n\n private getActions(): TemplateResult {\n const showOptins = this.optIns && this.isBaseLanguage();\n return html`\n <temba-tabs\n embedded\n focusedname\n bottom\n refresh=\"${this.currentAttachments.length}|${this.index}|${this\n .currentQuickReplies.length}|${showOptins}|${this.currentOptin}\"\n >\n ${this.attachments\n ? html`<temba-tab\n name=\"Attachments\"\n icon=\"attachment\"\n .count=${this.currentAttachments.length}\n >\n <div class=\"items attachments\">${this.getAttachments()}</div>\n </temba-tab>`\n : null}\n ${this.quickReplies\n ? html`<temba-tab\n name=\"Quick Replies\"\n icon=\"quick_replies\"\n .count=${this.currentQuickReplies.length}\n >\n <temba-select\n @change=${this.handleQuickReplyChange}\n .values=${this.currentQuickReplies}\n class=\"quick-replies\"\n tags\n multi\n searchable\n expressions\n placeholder=\"Add Quick Reply\"\n ></temba-select>\n </temba-tab>`\n : null}\n <temba-tab\n name=\"Opt-in\"\n icon=\"channel_fba\"\n ?hidden=${!showOptins}\n ?checked=${this.currentOptin.length > 0}\n >\n <temba-select\n @change=${this.handleOptInChange}\n .values=${this.currentOptin}\n endpoint=\"${this.optinEndpoint}\"\n class=\"optins\"\n searchable\n clearable\n placeholder=\"Select an opt-in to use for Facebook (optional)\"\n ></temba-select>\n </temba-tab>\n\n <div slot=\"tab-right\" class=\"top-right\">\n ${this.buttonError\n ? html`<div class=\"send-error\">${this.buttonError}</div>`\n : null}\n ${this.counter ? this.getCounter() : null}\n ${this.button ? this.getButton() : null}\n </div>\n </temba-tabs>\n `;\n }\n\n private getUploader(): TemplateResult {\n if (this.uploading) {\n return html`<temba-loading units=\"3\" size=\"12\"></temba-loading>`;\n } else {\n return this.currentAttachments.length < this.maxAttachments\n ? html`<input\n type=\"file\"\n id=\"upload-input\"\n multiple\n accept=\"${this.accept}\"\n @change=\"${this.handleUploadFileInputChanged}\"\n />\n <label\n id=\"upload-label\"\n class=\"actions-left upload-label\"\n for=\"upload-input\"\n >\n <div\n class=\"add-attachment\"\n @click=\"${this.handleUploadFileIconClicked}\"\n >\n <temba-icon name=\"add\" size=\"1.5\"></temba-icon>\n </div>\n </label>`\n : null;\n }\n }\n\n private getCounter(): TemplateResult {\n return html`<temba-charcount\n .text=\"${this.currentText}\"\n ></temba-charcount>`;\n }\n\n private getButton(): TemplateResult {\n return html` <temba-button\n id=\"send-button\"\n name=${this.buttonName}\n @click=${this.handleSendClick}\n ?disabled=${this.buttonDisabled}\n ></temba-button>`;\n }\n}\n"]}
|
|
@@ -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":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAa,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,UAAU,EAAe,MAAM,UAAU,CAAC;AAEnD,IAAK,MAKJ;AALD,WAAK,MAAM;IACT,6BAAmB,CAAA;IACnB,6BAAmB,CAAA;IACnB,2BAAiB,CAAA;IACjB,yBAAe,CAAA;AACjB,CAAC,EALI,MAAM,KAAN,MAAM,QAKV;AAED,MAAM,OAAO,kBAAmB,SAAQ,YAAY;IAApD;;QAiBE,SAAI,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;QAG5C,cAAS,GAAG,EAAE,CAAC;QAGf,WAAM,GAAW,MAAM,CAAC,KAAK,CAAC;QAG9B,aAAQ,GAAG,KAAK,CAAC;QAGjB,UAAK,GAAG,KAAK,CAAC;IA2ahB,CAAC;IAzaC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwOT,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,aAAa,CAAC,CAAC;QAC7C,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,cAAc,CAAC,QAAqB;QACzC,IAAI,QAAQ,CAAC,MAAM,KAAK,GAAG,EAAE;YAC3B,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC5C,gCAAgC;YAChC,iDAAiD;YACjD,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC;YAC3B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;SACpB;aAAM;YACL,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC;SAC9B;IACH,CAAC;IAEM,YAAY;QACjB,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CACzC,mCAAmC,CACrB,CAAC;QAEjB,IAAI,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE;YAC9B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YAClB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;YAC5B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;YACzB,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;SAC1B;IACH,CAAC;IAEM,YAAY,CAAC,GAAU;QAC5B,GAAG,CAAC,cAAc,EAAE,CAAC;QACrB,GAAG,CAAC,eAAe,EAAE,CAAC;IACxB,CAAC;IAEM,gBAAgB,CAAC,GAAU;QAChC,GAAG,CAAC,cAAc,EAAE,CAAC;QACrB,GAAG,CAAC,eAAe,EAAE,CAAC;QACtB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;IACpB,CAAC;IAEM,WAAW,CAAC,GAAkB;QACnC,MAAM,KAAK,GAAG,GAAG,CAAC,aAA0B,CAAC;QAC7C,IAAI,GAAG,CAAC,GAAG,KAAK,OAAO,EAAE;YACvB,KAAK,CAAC,IAAI,EAAE,CAAC;YACb,IAAI,CAAC,YAAY,EAAE,CAAC;SACrB;aAAM;YACL,IAAI,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE;gBAC9B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;aACnB;SACF;IACH,CAAC;IAEO,YAAY,CAAC,IAAY;QAC/B,IAAI,IAAI,KAAK,SAAS,EAAE;YACtB,OAAO,SAAS,CAAC,MAAM,CAAC;SACzB;QACD,OAAO,SAAS,CAAC,IAAI,CAAC;IACxB,CAAC;IAEM,MAAM;QACX,MAAM,KAAK,GAAG,IAAI,CAAA;QACd,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA;;;;qBAIO,IAAI,CAAC,YAAY;2BACX;YACnB,CAAC,CAAC,IAAI,CAAA,IAAI,IAAI,CAAC,MAAM,KAAK,MAAM,CAAC,MAAM;gBACnC,CAAC,CAAC,IAAI,CAAA;;wBAEM,IAAI,CAAC,gBAAgB;6BAChB;gBACjB,CAAC,CAAC,IAAI;YACN,IAAI,CAAC,MAAM,KAAK,MAAM,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK;gBAC7C,CAAC,CAAC,IAAI,CAAA,qBAAqB,IAAI,CAAC,OAAO,iBAAiB;gBACxD,CAAC,CAAC,IAAI;YACN,IAAI,CAAC,MAAM,KAAK,MAAM,CAAC,OAAO;gBAC9B,CAAC,CAAC,IAAI,CAAA;qCACmB,IAAI,CAAC,aAAa;4BAC3B;gBAChB,CAAC,CAAC,IAAI,EAAE;WACT,CAAC;QAER,OAAO,IAAI,CAAA;;gBAEC,IAAI,CAAC,MAAM;YACnB,GAAG;YACH,UAAU,CAAC;gBACT,OAAO,EAAE,IAAI;gBACb,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK;gBACjB,KAAK,EAAE,CAAC,IAAI,CAAC,KAAK;gBAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,OAAO,EAAE,CAAC,IAAI,CAAC,QAAQ;gBACvB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC;;UAEA,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,gBAAgB;4BACnB,IAAI,CAAC,QAAQ;;;;sCAIH,IAAI,CAAC,IAAI;;;;oCAIX,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;;sBAEvD,KAAK;;;;aAId;YACH,CAAC,CAAC,IAAI,CAAA;;yBAES,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;yBACxC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;yBAC5B,IAAI,CAAC,WAAW;0BACf,IAAI,CAAC,YAAY;uBACpB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;4BACvB,IAAI,CAAC,QAAQ;;;sCAGH,IAAI,CAAC,IAAI;;;;;oCAKX,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,KAAK;gBAC1D,CAAC,CAAC,OAAO;gBACT,CAAC,CAAC,EAAE;6BACG,IAAI,CAAC,eAAe;;sBAE3B,KAAK;;;;;8BAKG,IAAI,CAAC,MAAM;;;;;;8BAMX,IAAI,CAAC,IAAI;;;;;;;aAO1B;;KAER,CAAC;IACJ,CAAC;CACF;AAtcC;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;gDACiB;AAG5C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDACZ;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACG;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACd","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"]}
|
|
@@ -45,6 +45,19 @@ export class Dialog extends ResizeElement {
|
|
|
45
45
|
height: 100vh;
|
|
46
46
|
}
|
|
47
47
|
|
|
48
|
+
.mobile .flex {
|
|
49
|
+
height: 100%;
|
|
50
|
+
position: fixed;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.mobile .grow-top {
|
|
54
|
+
flex-grow: 0;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.mobile .grow-bottom {
|
|
58
|
+
flex-grow: 0;
|
|
59
|
+
}
|
|
60
|
+
|
|
48
61
|
.grow-top {
|
|
49
62
|
flex-grow: 1;
|
|
50
63
|
}
|
|
@@ -69,6 +82,10 @@ export class Dialog extends ResizeElement {
|
|
|
69
82
|
pointer-events: none;
|
|
70
83
|
}
|
|
71
84
|
|
|
85
|
+
.mobile.dialog-mask .dialog-container {
|
|
86
|
+
border-radius: 0px;
|
|
87
|
+
}
|
|
88
|
+
|
|
72
89
|
.dialog-mask .dialog-container {
|
|
73
90
|
position: relative;
|
|
74
91
|
transition: transform var(--transition-speed) var(--bounce),
|
|
@@ -336,6 +353,7 @@ export class Dialog extends ResizeElement {
|
|
|
336
353
|
'dialog-loading': this.loading,
|
|
337
354
|
'dialog-animation-end': this.animationEnd,
|
|
338
355
|
'dialog-ready': this.ready,
|
|
356
|
+
mobile: this.isMobile(),
|
|
339
357
|
})}"
|
|
340
358
|
>
|
|
341
359
|
<div style="position: absolute; width: 100%;">
|
|
@@ -355,7 +373,7 @@ export class Dialog extends ResizeElement {
|
|
|
355
373
|
class="dialog-container"
|
|
356
374
|
>
|
|
357
375
|
${header}
|
|
358
|
-
<div class="dialog-body" @keypress=${this.handleKeyUp}
|
|
376
|
+
<div class="dialog-body" @keypress=${this.handleKeyUp}>
|
|
359
377
|
${this.body ? this.body : html `<slot></slot>`}
|
|
360
378
|
<temba-loading units="6" size="8"></temba-loading>
|
|
361
379
|
</div>
|
|
@@ -378,7 +396,7 @@ export class Dialog extends ResizeElement {
|
|
|
378
396
|
`)}
|
|
379
397
|
</div>
|
|
380
398
|
</div>
|
|
381
|
-
<div class="grow-bottom"
|
|
399
|
+
<div class="grow-bottom"></div>
|
|
382
400
|
</div>
|
|
383
401
|
</div>
|
|
384
402
|
</div>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/dialog/Dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { property } from 'lit/decorators.js';\nimport { TemplateResult, html, css, PropertyValueMap } from 'lit';\nimport { Button } from '../button/Button';\nimport { RapidElement } from '../RapidElement';\nimport { CustomEventType } from '../interfaces';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { getClasses } from '../utils';\nimport { ResizeElement } from '../ResizeElement';\n\nexport enum ButtonType {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n DESTRUCTIVE = 'destructive',\n}\nexport class DialogButton {\n name?: string;\n id?: string;\n details?: any;\n type?: string;\n closes?: boolean;\n}\n\nexport class Dialog extends ResizeElement {\n static get widths(): { [size: string]: string } {\n return {\n small: '400px',\n medium: '600px',\n large: '655px',\n };\n }\n\n static get styles() {\n return css`\n :host {\n position: absolute;\n z-index: 10000;\n font-family: var(--font-family);\n background: white;\n }\n\n .flex-grow {\n flex-grow: 1;\n }\n\n .flex {\n display: flex;\n flex-direction: column;\n width: 100%;\n position: relative;\n left: 0px;\n top: 0px;\n align-items: center;\n height: 100vh;\n }\n\n .grow-top {\n flex-grow: 1;\n }\n\n .grow-bottom {\n flex-grow: 3;\n }\n\n .bottom-padding {\n padding: 3rem;\n }\n\n .dialog-mask {\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.5);\n opacity: 0;\n position: fixed;\n top: 0px;\n left: 0px;\n transition: opacity linear calc(var(--transition-speed) / 2ms);\n pointer-events: none;\n }\n\n .dialog-mask .dialog-container {\n position: relative;\n transition: transform var(--transition-speed) var(--bounce),\n opacity ease-in-out calc(var(--transition-speed) - 50ms);\n border-radius: var(--curvature);\n box-shadow: 0px 0px 2px 4px rgba(0, 0, 0, 0.06);\n overflow: hidden;\n transform: scale(0.9) translatey(2em);\n background: white;\n margin: auto;\n display: flex;\n flex-direction: column;\n }\n\n .dialog-body {\n background: #fff;\n overflow-y: auto;\n flex-grow: 1;\n }\n\n .dialog-mask.dialog-open {\n opacity: 1;\n pointer-events: auto;\n }\n\n .dialog-mask.dialog-open .dialog-container {\n top: inherit;\n }\n\n .dialog-mask.dialog-animation-end .dialog-container {\n transform: scale(1) !important;\n }\n\n .dialog-mask.dialog-ready .dialog-container {\n transform: none;\n }\n\n .dialog-mask.dialog-loading .dialog-container {\n margin-top: -10000px;\n }\n\n .header-text {\n display: flex;\n flex-direction: row;\n align-items: center;\n font-size: 20px;\n padding: 12px 20px;\n font-weight: 300;\n color: var(--header-text);\n background: var(--header-bg);\n }\n\n .header-text .title {\n flex-grow: 1;\n }\n\n .header-text .status {\n font-size: 0.6em;\n font-weight: bold;\n }\n\n .dialog-footer {\n background: var(--color-primary-light);\n padding: 10px;\n display: flex;\n flex-flow: row;\n align-items: center;\n }\n\n temba-button {\n margin-left: 10px;\n }\n\n .dialog-body temba-loading {\n position: absolute;\n right: 12px;\n margin-top: -30px;\n padding-bottom: 9px;\n display: none;\n }\n\n #page-loader {\n text-align: center;\n display: block;\n position: relative;\n opacity: 0;\n margin: auto;\n margin-top: 30px;\n width: 154px;\n transition: opacity calc(var(--transition-speed) * 5ms) ease-in\n calc(var(--transition-speed * 2));\n visibility: hidden;\n }\n\n .dialog-mask.dialog-loading #page-loader {\n opacity: 1;\n visibility: visible;\n }\n\n #submit-loader {\n flex-grow: 1;\n text-align: right;\n }\n `;\n }\n\n @property({ type: Boolean })\n open: boolean;\n\n @property()\n header: string;\n\n @property()\n body: string;\n\n @property({ type: Boolean })\n submitting: boolean;\n\n @property({ type: Boolean })\n destructive: boolean;\n\n @property({ type: Boolean })\n disabled: boolean;\n\n @property({ type: Boolean })\n loading: boolean;\n\n @property({ type: Boolean })\n hideOnClick: boolean;\n\n @property({ type: Boolean })\n noFocus: boolean;\n\n @property()\n size = 'medium';\n\n @property({ type: String })\n primaryButtonName = 'Ok';\n\n @property({ type: String })\n cancelButtonName = 'Cancel';\n\n @property({ type: String })\n width = null;\n\n @property()\n submittingName = 'Saving';\n\n @property()\n animationEnd: boolean;\n\n @property()\n ready: boolean;\n\n @property({ type: Array })\n buttons: DialogButton[] = [];\n\n @property({ attribute: false })\n onButtonClicked: (button: Button) => void;\n\n scrollOffset: any = 0;\n\n public constructor() {\n super();\n }\n\n protected firstUpdated(\n changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n ): void {\n if (changes.has('cancelButtonName') && this.cancelButtonName) {\n this.buttons.push({\n name: this.cancelButtonName,\n type: ButtonType.SECONDARY,\n closes: true,\n });\n }\n\n if (changes.has('primaryButtonName') && this.primaryButtonName) {\n this.buttons.push({\n name: this.primaryButtonName,\n type: ButtonType.PRIMARY,\n });\n }\n }\n\n public updated(changedProperties: Map<string, any>) {\n if (changedProperties.has('open')) {\n const body = document.querySelector('body');\n\n if (this.open) {\n this.animationEnd = true;\n window.setTimeout(() => {\n this.ready = true;\n this.animationEnd = false;\n }, 400);\n\n this.scrollOffset = -document.documentElement.scrollTop;\n body.style.position = 'fixed';\n body.style.overflowY = 'scroll';\n body.style.top = this.scrollOffset + 'px';\n body.style.width = '100%';\n body.style.overflowY = 'hidden';\n } else {\n body.style.position = '';\n body.style.overflowY = '';\n body.style.width = '';\n body.style.marginRight = '';\n body.style.paddingRight = '0px';\n window.scrollTo(0, parseInt(this.scrollOffset || '0') * -1);\n }\n\n // make sure our buttons aren't in progress on show\n if (this.open && !changedProperties.get('open')) {\n this.shadowRoot\n .querySelectorAll('temba-button')\n .forEach((button: Button) => {\n if (button) button.submitting = false;\n });\n\n if (!this.noFocus) {\n this.focusFirstInput();\n }\n } else {\n window.setTimeout(() => {\n this.ready = false;\n }, 400);\n }\n }\n }\n\n public focusFirstInput(): void {\n window.setTimeout(() => {\n let input = this.querySelector(\n 'temba-textinput, temba-completion, input[type=\"text\"], textarea'\n ) as any;\n if (input) {\n input = input.textInputElement || input.inputElement || input;\n if (!input.readOnly) {\n input.focus();\n input.click();\n }\n }\n }, 100);\n }\n\n public handleClick(evt: MouseEvent) {\n const button = evt.currentTarget as Button;\n if (!button.disabled) {\n let detail: DialogButton = {};\n if (button.index >= 0 && button.index < this.buttons.length) {\n detail = this.buttons[button.index];\n }\n\n this.fireCustomEvent(CustomEventType.ButtonClicked, { button, detail });\n if (button.name === this.cancelButtonName || (detail && detail.closes)) {\n this.open = false;\n }\n }\n }\n\n private getDocumentHeight(): number {\n const body = document.body;\n const html = document.documentElement;\n return Math.max(\n body.scrollHeight,\n body.offsetHeight,\n html.clientHeight,\n html.scrollHeight,\n html.offsetHeight\n );\n }\n\n private clickCancel() {\n const cancel = this.getCancelButton();\n if (cancel) {\n cancel.click();\n }\n }\n\n public getCancelButton(): Button {\n return this.shadowRoot.querySelector(\n `temba-button[name='${this.cancelButtonName}']`\n );\n }\n\n public getPrimaryButton(): Button {\n return this.shadowRoot.querySelector(`temba-button[primary]`);\n }\n\n private handleKeyUp(event: KeyboardEvent) {\n if (event.key === 'Escape') {\n this.clickCancel();\n }\n }\n\n private handleClickMask(event: MouseEvent) {\n if (this.hideOnClick) {\n const id = (event.target as HTMLElement).id;\n if (id === 'dialog-mask' || id === 'dialog-bg') {\n this.fireCustomEvent(CustomEventType.DialogHidden);\n this.clickCancel();\n }\n }\n }\n\n public show(): void {\n this.open = true;\n }\n\n public hide(): void {\n this.open = false;\n }\n\n public render(): TemplateResult {\n const dialogStyle = {\n width: this.width,\n minWidth: '250px',\n maxWidth: '600px',\n };\n if (!this.width) {\n dialogStyle['width'] = Dialog.widths[this.size];\n }\n\n if (this.isMobile()) {\n dialogStyle['width'] = '100%';\n dialogStyle['height'] = '100%';\n delete dialogStyle['maxWidth'];\n }\n\n const header = this.header\n ? html`\n <div class=\"dialog-header\">\n <div class=\"header-text\">\n <div class=\"title\">${this.header}</div>\n </div>\n </div>\n `\n : null;\n\n return html`\n <div\n id=\"dialog-mask\"\n @click=${this.handleClickMask}\n class=\"dialog-mask ${getClasses({\n 'dialog-open': this.open,\n 'dialog-loading': this.loading,\n 'dialog-animation-end': this.animationEnd,\n 'dialog-ready': this.ready,\n })}\"\n >\n <div style=\"position: absolute; width: 100%;\">\n <temba-loading\n id=\"page-loader\"\n units=\"6\"\n size=\"12\"\n color=\"#ccc\"\n ></temba-loading>\n </div>\n\n <div class=\"flex\">\n <div class=\"grow-top\" style=\"${\n this.isMobile() ? 'flex-grow:0' : ''\n }\"></div>\n <div\n @keyup=${this.handleKeyUp}\n style=${styleMap(dialogStyle)}\n class=\"dialog-container\"\n >\n ${header}\n <div class=\"dialog-body\" @keypress=${this.handleKeyUp} ${\n this.isMobile() ? 'flex-grow:1;max-height:\"\"' : ''\n } >\n ${this.body ? this.body : html`<slot></slot>`}\n <temba-loading units=\"6\" size=\"8\"></temba-loading>\n </div>\n\n <div class=\"dialog-footer\">\n <div class=\"flex-grow\">\n <slot name=\"gutter\"></slot>\n </div>\n ${this.buttons.map(\n (button: DialogButton, index) => html`\n <temba-button\n name=${button.name}\n ?destructive=${button.type == 'primary' && this.destructive}\n ?primary=${button.type == 'primary' && !this.destructive}\n ?secondary=${button.type == 'secondary'}\n ?submitting=${this.submitting}\n ?disabled=${this.disabled && !button.closes}\n index=${index}\n @click=${this.handleClick}\n ></temba-button>\n `\n )}\n </div>\n </div>\n <div class=\"grow-bottom\" style=\"${\n this.isMobile() ? 'flex-grow:0' : ''\n }\"></div>\n </div>\n </div>\n </div>\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/dialog/Dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { property } from 'lit/decorators.js';\nimport { TemplateResult, html, css, PropertyValueMap } from 'lit';\nimport { Button } from '../button/Button';\nimport { RapidElement } from '../RapidElement';\nimport { CustomEventType } from '../interfaces';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { getClasses } from '../utils';\nimport { ResizeElement } from '../ResizeElement';\n\nexport enum ButtonType {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n DESTRUCTIVE = 'destructive',\n}\nexport class DialogButton {\n name?: string;\n id?: string;\n details?: any;\n type?: string;\n closes?: boolean;\n}\n\nexport class Dialog extends ResizeElement {\n static get widths(): { [size: string]: string } {\n return {\n small: '400px',\n medium: '600px',\n large: '655px',\n };\n }\n\n static get styles() {\n return css`\n :host {\n position: absolute;\n z-index: 10000;\n font-family: var(--font-family);\n background: white;\n }\n\n .flex-grow {\n flex-grow: 1;\n }\n\n .flex {\n display: flex;\n flex-direction: column;\n width: 100%;\n position: relative;\n left: 0px;\n top: 0px;\n align-items: center;\n height: 100vh;\n }\n\n .mobile .flex {\n height: 100%;\n position: fixed;\n }\n\n .mobile .grow-top {\n flex-grow: 0;\n }\n\n .mobile .grow-bottom {\n flex-grow: 0;\n }\n\n .grow-top {\n flex-grow: 1;\n }\n\n .grow-bottom {\n flex-grow: 3;\n }\n\n .bottom-padding {\n padding: 3rem;\n }\n\n .dialog-mask {\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.5);\n opacity: 0;\n position: fixed;\n top: 0px;\n left: 0px;\n transition: opacity linear calc(var(--transition-speed) / 2ms);\n pointer-events: none;\n }\n\n .mobile.dialog-mask .dialog-container {\n border-radius: 0px;\n }\n\n .dialog-mask .dialog-container {\n position: relative;\n transition: transform var(--transition-speed) var(--bounce),\n opacity ease-in-out calc(var(--transition-speed) - 50ms);\n border-radius: var(--curvature);\n box-shadow: 0px 0px 2px 4px rgba(0, 0, 0, 0.06);\n overflow: hidden;\n transform: scale(0.9) translatey(2em);\n background: white;\n margin: auto;\n display: flex;\n flex-direction: column;\n }\n\n .dialog-body {\n background: #fff;\n overflow-y: auto;\n flex-grow: 1;\n }\n\n .dialog-mask.dialog-open {\n opacity: 1;\n pointer-events: auto;\n }\n\n .dialog-mask.dialog-open .dialog-container {\n top: inherit;\n }\n\n .dialog-mask.dialog-animation-end .dialog-container {\n transform: scale(1) !important;\n }\n\n .dialog-mask.dialog-ready .dialog-container {\n transform: none;\n }\n\n .dialog-mask.dialog-loading .dialog-container {\n margin-top: -10000px;\n }\n\n .header-text {\n display: flex;\n flex-direction: row;\n align-items: center;\n font-size: 20px;\n padding: 12px 20px;\n font-weight: 300;\n color: var(--header-text);\n background: var(--header-bg);\n }\n\n .header-text .title {\n flex-grow: 1;\n }\n\n .header-text .status {\n font-size: 0.6em;\n font-weight: bold;\n }\n\n .dialog-footer {\n background: var(--color-primary-light);\n padding: 10px;\n display: flex;\n flex-flow: row;\n align-items: center;\n }\n\n temba-button {\n margin-left: 10px;\n }\n\n .dialog-body temba-loading {\n position: absolute;\n right: 12px;\n margin-top: -30px;\n padding-bottom: 9px;\n display: none;\n }\n\n #page-loader {\n text-align: center;\n display: block;\n position: relative;\n opacity: 0;\n margin: auto;\n margin-top: 30px;\n width: 154px;\n transition: opacity calc(var(--transition-speed) * 5ms) ease-in\n calc(var(--transition-speed * 2));\n visibility: hidden;\n }\n\n .dialog-mask.dialog-loading #page-loader {\n opacity: 1;\n visibility: visible;\n }\n\n #submit-loader {\n flex-grow: 1;\n text-align: right;\n }\n `;\n }\n\n @property({ type: Boolean })\n open: boolean;\n\n @property()\n header: string;\n\n @property()\n body: string;\n\n @property({ type: Boolean })\n submitting: boolean;\n\n @property({ type: Boolean })\n destructive: boolean;\n\n @property({ type: Boolean })\n disabled: boolean;\n\n @property({ type: Boolean })\n loading: boolean;\n\n @property({ type: Boolean })\n hideOnClick: boolean;\n\n @property({ type: Boolean })\n noFocus: boolean;\n\n @property()\n size = 'medium';\n\n @property({ type: String })\n primaryButtonName = 'Ok';\n\n @property({ type: String })\n cancelButtonName = 'Cancel';\n\n @property({ type: String })\n width = null;\n\n @property()\n submittingName = 'Saving';\n\n @property()\n animationEnd: boolean;\n\n @property()\n ready: boolean;\n\n @property({ type: Array })\n buttons: DialogButton[] = [];\n\n @property({ attribute: false })\n onButtonClicked: (button: Button) => void;\n\n scrollOffset: any = 0;\n\n public constructor() {\n super();\n }\n\n protected firstUpdated(\n changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n ): void {\n if (changes.has('cancelButtonName') && this.cancelButtonName) {\n this.buttons.push({\n name: this.cancelButtonName,\n type: ButtonType.SECONDARY,\n closes: true,\n });\n }\n\n if (changes.has('primaryButtonName') && this.primaryButtonName) {\n this.buttons.push({\n name: this.primaryButtonName,\n type: ButtonType.PRIMARY,\n });\n }\n }\n\n public updated(changedProperties: Map<string, any>) {\n if (changedProperties.has('open')) {\n const body = document.querySelector('body');\n\n if (this.open) {\n this.animationEnd = true;\n window.setTimeout(() => {\n this.ready = true;\n this.animationEnd = false;\n }, 400);\n\n this.scrollOffset = -document.documentElement.scrollTop;\n body.style.position = 'fixed';\n body.style.overflowY = 'scroll';\n body.style.top = this.scrollOffset + 'px';\n body.style.width = '100%';\n body.style.overflowY = 'hidden';\n } else {\n body.style.position = '';\n body.style.overflowY = '';\n body.style.width = '';\n body.style.marginRight = '';\n body.style.paddingRight = '0px';\n window.scrollTo(0, parseInt(this.scrollOffset || '0') * -1);\n }\n\n // make sure our buttons aren't in progress on show\n if (this.open && !changedProperties.get('open')) {\n this.shadowRoot\n .querySelectorAll('temba-button')\n .forEach((button: Button) => {\n if (button) button.submitting = false;\n });\n\n if (!this.noFocus) {\n this.focusFirstInput();\n }\n } else {\n window.setTimeout(() => {\n this.ready = false;\n }, 400);\n }\n }\n }\n\n public focusFirstInput(): void {\n window.setTimeout(() => {\n let input = this.querySelector(\n 'temba-textinput, temba-completion, input[type=\"text\"], textarea'\n ) as any;\n if (input) {\n input = input.textInputElement || input.inputElement || input;\n if (!input.readOnly) {\n input.focus();\n input.click();\n }\n }\n }, 100);\n }\n\n public handleClick(evt: MouseEvent) {\n const button = evt.currentTarget as Button;\n if (!button.disabled) {\n let detail: DialogButton = {};\n if (button.index >= 0 && button.index < this.buttons.length) {\n detail = this.buttons[button.index];\n }\n\n this.fireCustomEvent(CustomEventType.ButtonClicked, { button, detail });\n if (button.name === this.cancelButtonName || (detail && detail.closes)) {\n this.open = false;\n }\n }\n }\n\n private getDocumentHeight(): number {\n const body = document.body;\n const html = document.documentElement;\n return Math.max(\n body.scrollHeight,\n body.offsetHeight,\n html.clientHeight,\n html.scrollHeight,\n html.offsetHeight\n );\n }\n\n private clickCancel() {\n const cancel = this.getCancelButton();\n if (cancel) {\n cancel.click();\n }\n }\n\n public getCancelButton(): Button {\n return this.shadowRoot.querySelector(\n `temba-button[name='${this.cancelButtonName}']`\n );\n }\n\n public getPrimaryButton(): Button {\n return this.shadowRoot.querySelector(`temba-button[primary]`);\n }\n\n private handleKeyUp(event: KeyboardEvent) {\n if (event.key === 'Escape') {\n this.clickCancel();\n }\n }\n\n private handleClickMask(event: MouseEvent) {\n if (this.hideOnClick) {\n const id = (event.target as HTMLElement).id;\n if (id === 'dialog-mask' || id === 'dialog-bg') {\n this.fireCustomEvent(CustomEventType.DialogHidden);\n this.clickCancel();\n }\n }\n }\n\n public show(): void {\n this.open = true;\n }\n\n public hide(): void {\n this.open = false;\n }\n\n public render(): TemplateResult {\n const dialogStyle = {\n width: this.width,\n minWidth: '250px',\n maxWidth: '600px',\n };\n if (!this.width) {\n dialogStyle['width'] = Dialog.widths[this.size];\n }\n\n if (this.isMobile()) {\n dialogStyle['width'] = '100%';\n dialogStyle['height'] = '100%';\n delete dialogStyle['maxWidth'];\n }\n\n const header = this.header\n ? html`\n <div class=\"dialog-header\">\n <div class=\"header-text\">\n <div class=\"title\">${this.header}</div>\n </div>\n </div>\n `\n : null;\n\n return html`\n <div\n id=\"dialog-mask\"\n @click=${this.handleClickMask}\n class=\"dialog-mask ${getClasses({\n 'dialog-open': this.open,\n 'dialog-loading': this.loading,\n 'dialog-animation-end': this.animationEnd,\n 'dialog-ready': this.ready,\n mobile: this.isMobile(),\n })}\"\n >\n <div style=\"position: absolute; width: 100%;\">\n <temba-loading\n id=\"page-loader\"\n units=\"6\"\n size=\"12\"\n color=\"#ccc\"\n ></temba-loading>\n </div>\n\n <div class=\"flex\">\n <div class=\"grow-top\" style=\"${\n this.isMobile() ? 'flex-grow:0' : ''\n }\"></div>\n <div\n @keyup=${this.handleKeyUp}\n style=${styleMap(dialogStyle)}\n class=\"dialog-container\"\n >\n ${header}\n <div class=\"dialog-body\" @keypress=${this.handleKeyUp}>\n ${this.body ? this.body : html`<slot></slot>`}\n <temba-loading units=\"6\" size=\"8\"></temba-loading>\n </div>\n\n <div class=\"dialog-footer\">\n <div class=\"flex-grow\">\n <slot name=\"gutter\"></slot>\n </div>\n ${this.buttons.map(\n (button: DialogButton, index) => html`\n <temba-button\n name=${button.name}\n ?destructive=${button.type == 'primary' && this.destructive}\n ?primary=${button.type == 'primary' && !this.destructive}\n ?secondary=${button.type == 'secondary'}\n ?submitting=${this.submitting}\n ?disabled=${this.disabled && !button.closes}\n index=${index}\n @click=${this.handleClick}\n ></temba-button>\n `\n )}\n </div>\n </div>\n <div class=\"grow-bottom\"></div>\n </div>\n </div>\n </div>\n `;\n }\n}\n"]}
|