npm - @nyaruka/temba-components - Versions diffs - 0.129.8 → 0.129.10 - Mend

@nyaruka/temba-components 0.129.8 → 0.129.10

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.

Files changed (282) hide show

package/out-tsc/src/form/MessageEditor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MessageEditor.js","sourceRoot":"","sources":["../../../src/form/MessageEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, css, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { FormElement } from './FormElement';\nimport { Completion } from './Completion';\nimport { MediaPicker } from './MediaPicker';\nimport { Attachment } from '../interfaces';\nimport { getClasses } from '../utils';\nimport { Icon } from '../Icons';\n\n/*\n MessageEditor is a composed component that combines temba-completion and temba-media-picker\n * for editing messages with text completion and file attachments\n /\nexport class MessageEditor extends FormElement {\n static get styles() {\n return css`\n :host {\n display: block;\n }\n\n .message-editor-container {\n border: 1px solid var(--color-widget-border);\n border-radius: var(--curvature-widget);\n background: #fff;\n position: relative;\n transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\n }\n\n .message-editor-container:focus-within {\n border-color: var(--color-focus);\n box-shadow: var(--widget-box-shadow-focused);\n }\n\n .message-editor-container.highlight {\n border-color: rgba(156, 222, 106, 0.88);\n }\n\n / Hide the completion field border since we draw our own /\n .message-editor-container temba-completion::part(field) {\n border: none;\n box-shadow: none;\n border-radius: 0;\n }\n\n .message-editor-container temba-completion {\n --widget-box-shadow: none;\n --widget-box-shadow-focused: none;\n --widget-box-shadow-focused: none;\n --color-widget-border: transparent;\n --color-focus: transparent;\n }\n\n .completion-wrapper {\n }\n\n .media-wrapper {\n padding: 4px 8px;\n background: rgba(0, 0, 0, 0.03);\n border-top: 1px solid var(--color-widget-border);\n border-radius: 0 0 var(--curvature-widget) var(--curvature-widget);\n box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.05);\n margin-top: 3px;\n display: none;\n }\n .has-attachments .media-wrapper {\n display: flex;\n }\n\n / Override media picker styles to integrate better /\n .media-wrapper temba-media-picker {\n --color-widget-border: transparent;\n }\n\n .media-wrapper .attachments-list {\n padding: 0.2em 0;\n }\n\n .drop-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(210, 243, 184, 0.5);\n border-radius: var(--curvature-widget);\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.2s ease-in-out;\n z-index: 10;\n }\n\n .message-editor-container.highlight .drop-overlay {\n opacity: 1;\n }\n\n .drop-message {\n background: rgba(0, 0, 0, 0.8);\n color: white;\n padding: 12px 24px;\n border-radius: var(--curvature);\n font-weight: 500;\n }\n\n .attachment-icon {\n position: absolute;\n bottom: 4px;\n right: 4px;\n color: var(--color-text-dark);\n cursor: pointer;\n padding: 6px;\n border-radius: var(--curvature);\n transition: background-color 0.2s ease-in-out;\n display: block;\n }\n\n .has-attachments .attachment-icon {\n display: none;\n }\n\n .attachment-icon:hover {\n background-color: rgba(0, 0, 0, 0.05);\n }\n `;\n }\n\n @property({ type: String })\n name = '';\n\n @property({ type: String })\n value = '';\n\n @property({ type: String })\n placeholder = '';\n\n @property({ type: Boolean })\n textarea = true;\n\n @property({ type: Boolean })\n autogrow = true;\n\n @property({ type: Number })\n minHeight = 60;\n\n @property({ type: Number })\n maxLength: number;\n\n @property({ type: Boolean })\n session: boolean;\n\n @property({ type: Boolean })\n submitOnEnter = false;\n\n @property({ type: Boolean })\n gsm: boolean;\n\n @property({ type: Boolean })\n disableCompletion: boolean;\n\n @property({ type: String })\n counter: string;\n\n @property({ type: Array })\n attachments: (Attachment \| string)[] = [];\n\n @property({ type: String })\n accept = '';\n\n @property({ type: Number, attribute: 'max-attachments' })\n maxAttachments = 3;\n\n @property({ type: String })\n endpoint = '';\n\n @property({ type: Boolean, attribute: false })\n pendingDrop = false;\n\n @property({ type: Boolean, attribute: false })\n uploading = false;\n\n private completionElement: Completion;\n private mediaPickerElement: MediaPicker;\n\n public firstUpdated(changes: Map<string, any>) {\n super.firstUpdated(changes);\n\n this.completionElement = this.shadowRoot.querySelector(\n 'temba-completion'\n ) as Completion;\n\n // Get the visible media picker (either in media-wrapper or the hidden one)\n this.mediaPickerElement = this.shadowRoot.querySelector(\n 'temba-media-picker'\n ) as MediaPicker;\n\n // Set up proper attachment filtering and parsing\n this.parseAndFilterAttachments();\n }\n\n /\n Parse attachments and filter out runtime attachments for media picker\n /\n private parseAndFilterAttachments() {\n if (!this.attachments) return;\n\n // Filter out runtime attachments (those without '/' in content type)\n const staticAttachments = this.attachments.filter((attachment) => {\n if (typeof attachment === 'string') {\n const [contentType] = attachment.split(':');\n return contentType.includes('/');\n }\n return true;\n });\n\n // Convert string attachments to Attachment objects for media picker\n const mediaAttachments = staticAttachments.map((attachment) => {\n if (typeof attachment === 'string') {\n // split into content type and URL\n // e.g. \"image/jpeg:http://example.com/image.jpg\"\n const colonIndex = attachment.indexOf(':');\n const contentType = attachment.substring(0, colonIndex);\n const url = attachment.substring(colonIndex + 1);\n return {\n content_type: contentType,\n url: url,\n filename: this.getFilenameFromUrl(url),\n size: 0\n } as Attachment;\n }\n return attachment;\n });\n\n if (this.mediaPickerElement) {\n this.mediaPickerElement.attachments = mediaAttachments;\n }\n }\n\n /\n Check if there are any static attachments (excluding runtime attachments)\n */\n private hasStaticAttachments(): boolean {\n if (!this.attachments \|\| this.attachments.length === 0) return false;\n\n return this.attachments.some((attachment) => {\n if (typeof attachment === 'string') {\n const [contentType] = attachment.split(':');\n return contentType.includes('/');\n }\n return true;\n });\n }\n\n private getFilenameFromUrl(url: string): string {\n try {\n const urlObj = new URL(url);\n const pathname = urlObj.pathname;\n return pathname.substring(pathname.lastIndexOf('/') + 1) \|\| 'attachment';\n } catch {\n return 'attachment';\n }\n }\n\n private handleCompletionChange(event: Event) {\n event.stopPropagation();\n const completion = event.target as Completion;\n this.value = completion.value;\n this.fireEvent('change');\n }\n\n private handleMediaChange(event: Event) {\n event.stopPropagation();\n const mediaPicker = event.target as MediaPicker;\n // Convert media picker attachments back to the format expected by the form\n const formattedAttachments = mediaPicker.attachments.map((attachment) => {\n return `${attachment.content_type}:${attachment.url}`;\n });\n\n // Merge with any runtime attachments that were filtered out\n const runtimeAttachments = (this.attachments \|\| []).filter((attachment) => {\n if (typeof attachment === 'string') {\n const [contentType] = attachment.split(':');\n return !contentType.includes('/');\n }\n return false;\n }) as string[];\n\n this.attachments = [...runtimeAttachments, ...formattedAttachments];\n this.fireEvent('change');\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 this.unhighlight(evt);\n\n // Forward to media picker\n if (this.mediaPickerElement) {\n const files = [...evt.dataTransfer.files];\n this.mediaPickerElement.uploadFiles(files);\n }\n }\n\n private handleAttachmentIconClick(): void {\n // Trigger the file picker on the media picker\n if (this.mediaPickerElement) {\n const uploadInput = this.mediaPickerElement.shadowRoot.querySelector(\n '#upload-input'\n ) as HTMLInputElement;\n if (uploadInput) {\n uploadInput.click();\n }\n }\n }\n\n private highlight(evt: DragEvent): void {\n evt.preventDefault();\n evt.stopPropagation();\n\n // Always allow highlight for testing purposes, but in real usage check media picker\n this.pendingDrop = true;\n }\n\n private unhighlight(evt: DragEvent): void {\n evt.preventDefault();\n evt.stopPropagation();\n this.pendingDrop = false;\n }\n\n public updated(changedProperties: Map<string, any>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('attachments')) {\n // Re-query media picker since the DOM structure may have changed\n this.mediaPickerElement = this.shadowRoot.querySelector(\n 'temba-media-picker'\n ) as MediaPicker;\n }\n\n if (changedProperties.has('uploading')) {\n this.dispatchEvent(\n new CustomEvent('loading', {\n detail: { loading: this.uploading }\n })\n );\n }\n }\n\n public focus() {\n super.focus();\n if (this.completionElement) {\n this.completionElement.focus();\n }\n }\n\n public click() {\n super.click();\n if (this.completionElement) {\n this.completionElement.click();\n }\n }\n\n public render(): TemplateResult {\n const hasAttachments = this.hasStaticAttachments();\n\n return html`\n <temba-field\n name=${this.name}\n .label=${this.label}\n .helpText=${this.helpText}\n .errors=${this.errors}\n .widgetOnly=${this.widgetOnly}\n >\n <div\n class=${getClasses({\n 'message-editor-container': true,\n highlight: this.pendingDrop,\n 'has-attachments': hasAttachments\n })}\n @dragenter=${this.handleDragEnter}\n @dragover=${this.handleDragOver}\n @dragleave=${this.handleDragLeave}\n @drop=${this.handleDrop}\n >\n <div class=\"completion-wrapper\">\n <temba-completion\n name=${this.name}\n .value=${this.value}\n placeholder=${this.placeholder}\n ?textarea=${this.textarea}\n ?autogrow=${this.autogrow}\n ?session=${this.session}\n ?submitOnEnter=${this.submitOnEnter}\n ?gsm=${this.gsm}\n ?disableCompletion=${this.disableCompletion}\n maxlength=${ifDefined(this.maxLength)}\n counter=${ifDefined(this.counter)}\n minHeight=${ifDefined(this.minHeight)}\n widgetOnly\n @change=${this.handleCompletionChange}\n ></temba-completion>\n </div>\n\n <div class=\"media-wrapper \">\n <temba-media-picker\n .accept=${this.accept}\n .max=${this.maxAttachments}\n .endpoint=${this.endpoint}\n @change=${this.handleMediaChange}\n ignoreDrops\n ></temba-media-picker>\n </div>\n <temba-icon\n class=\"attachment-icon\"\n name=${Icon.attachment}\n size=\"1.2\"\n @click=${this.handleAttachmentIconClick}\n ></temba-icon>\n\n <div class=\"drop-overlay\"></div>\n\n <!-- Hidden media picker for handling uploads when no attachments are shown -->\n ${!hasAttachments\n ? html`<temba-media-picker\n style=\"display: none;\"\n .accept=${this.accept}\n .max=${this.maxAttachments}\n .endpoint=${this.endpoint}\n @change=${this.handleMediaChange}\n ignoreDrops\n ></temba-media-picker>`\n : ''}\n </div>\n </temba-field>\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"MessageEditor.js","sourceRoot":"","sources":["../../../src/form/MessageEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, css, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { FieldElement } from './FieldElement';\nimport { Completion } from './Completion';\nimport { MediaPicker } from './MediaPicker';\nimport { Attachment } from '../interfaces';\nimport { getClasses } from '../utils';\nimport { Icon } from '../Icons';\n\n/*\n MessageEditor is a composed component that combines temba-completion and temba-media-picker\n * for editing messages with text completion and file attachments\n /\nexport class MessageEditor extends FieldElement {\n static get styles() {\n return css`\n ${super.styles}\n :host {\n display: block;\n }\n\n .message-editor-container {\n border: 1px solid var(--color-widget-border);\n border-radius: var(--curvature-widget);\n background: #fff;\n position: relative;\n transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\n }\n\n .message-editor-container:focus-within {\n border-color: var(--color-focus);\n box-shadow: var(--widget-box-shadow-focused);\n }\n\n .message-editor-container.highlight {\n border-color: rgba(156, 222, 106, 0.88);\n }\n\n / Hide the completion field border since we draw our own /\n .message-editor-container temba-completion::part(field) {\n border: none;\n box-shadow: none;\n border-radius: 0;\n }\n\n .message-editor-container temba-completion {\n --widget-box-shadow: none;\n --widget-box-shadow-focused: none;\n --widget-box-shadow-focused: none;\n --color-widget-border: transparent;\n --color-focus: transparent;\n }\n\n .completion-wrapper {\n }\n\n .media-wrapper {\n padding: 4px 8px;\n background: rgba(0, 0, 0, 0.03);\n border-top: 1px solid var(--color-widget-border);\n border-radius: 0 0 var(--curvature-widget) var(--curvature-widget);\n box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.05);\n margin-top: 3px;\n display: none;\n }\n .has-attachments .media-wrapper {\n display: flex;\n }\n\n / Override media picker styles to integrate better /\n .media-wrapper temba-media-picker {\n --color-widget-border: transparent;\n }\n\n .media-wrapper .attachments-list {\n padding: 0.2em 0;\n }\n\n .drop-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(210, 243, 184, 0.5);\n border-radius: var(--curvature-widget);\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.2s ease-in-out;\n z-index: 10;\n }\n\n .message-editor-container.highlight .drop-overlay {\n opacity: 1;\n }\n\n .drop-message {\n background: rgba(0, 0, 0, 0.8);\n color: white;\n padding: 12px 24px;\n border-radius: var(--curvature);\n font-weight: 500;\n }\n\n .attachment-icon {\n position: absolute;\n bottom: 4px;\n right: 4px;\n color: var(--color-text-dark);\n cursor: pointer;\n padding: 6px;\n border-radius: var(--curvature);\n transition: background-color 0.2s ease-in-out;\n display: block;\n }\n\n .has-attachments .attachment-icon {\n display: none;\n }\n\n .attachment-icon:hover {\n background-color: rgba(0, 0, 0, 0.05);\n }\n `;\n }\n\n @property({ type: String })\n name = '';\n\n @property({ type: String })\n placeholder = '';\n\n @property({ type: Boolean })\n textarea = true;\n\n @property({ type: Boolean })\n autogrow = true;\n\n @property({ type: Number })\n minHeight = 60;\n\n @property({ type: Number })\n maxLength: number;\n\n @property({ type: Boolean })\n session: boolean;\n\n @property({ type: Boolean })\n submitOnEnter = false;\n\n @property({ type: Boolean })\n gsm: boolean;\n\n @property({ type: Boolean })\n disableCompletion: boolean;\n\n @property({ type: String })\n counter: string;\n\n @property({ type: Array })\n attachments: (Attachment \| string)[] = [];\n\n @property({ type: String })\n accept = '';\n\n @property({ type: Number, attribute: 'max-attachments' })\n maxAttachments = 3;\n\n @property({ type: String })\n endpoint = '';\n\n @property({ type: Boolean, attribute: false })\n pendingDrop = false;\n\n @property({ type: Boolean, attribute: false })\n uploading = false;\n\n private completionElement: Completion;\n private mediaPickerElement: MediaPicker;\n\n public firstUpdated(changes: Map<string, any>) {\n super.firstUpdated(changes);\n\n this.completionElement = this.shadowRoot.querySelector(\n 'temba-completion'\n ) as Completion;\n\n // Get the visible media picker (either in media-wrapper or the hidden one)\n this.mediaPickerElement = this.shadowRoot.querySelector(\n 'temba-media-picker'\n ) as MediaPicker;\n\n // Set up proper attachment filtering and parsing\n this.parseAndFilterAttachments();\n }\n\n /\n Parse attachments and filter out runtime attachments for media picker\n /\n private parseAndFilterAttachments() {\n if (!this.attachments) return;\n\n // Filter out runtime attachments (those without '/' in content type)\n const staticAttachments = this.attachments.filter((attachment) => {\n if (typeof attachment === 'string') {\n const [contentType] = attachment.split(':');\n return contentType.includes('/');\n }\n return true;\n });\n\n // Convert string attachments to Attachment objects for media picker\n const mediaAttachments = staticAttachments.map((attachment) => {\n if (typeof attachment === 'string') {\n // split into content type and URL\n // e.g. \"image/jpeg:http://example.com/image.jpg\"\n const colonIndex = attachment.indexOf(':');\n const contentType = attachment.substring(0, colonIndex);\n const url = attachment.substring(colonIndex + 1);\n return {\n content_type: contentType,\n url: url,\n filename: this.getFilenameFromUrl(url),\n size: 0\n } as Attachment;\n }\n return attachment;\n });\n\n if (this.mediaPickerElement) {\n this.mediaPickerElement.attachments = mediaAttachments;\n }\n }\n\n /\n Check if there are any static attachments (excluding runtime attachments)\n */\n private hasStaticAttachments(): boolean {\n if (!this.attachments \|\| this.attachments.length === 0) return false;\n\n return this.attachments.some((attachment) => {\n if (typeof attachment === 'string') {\n const [contentType] = attachment.split(':');\n return contentType.includes('/');\n }\n return true;\n });\n }\n\n private getFilenameFromUrl(url: string): string {\n try {\n const urlObj = new URL(url);\n const pathname = urlObj.pathname;\n return pathname.substring(pathname.lastIndexOf('/') + 1) \|\| 'attachment';\n } catch {\n return 'attachment';\n }\n }\n\n private handleCompletionChange(event: Event) {\n event.stopPropagation();\n const completion = event.target as Completion;\n this.value = completion.value;\n this.fireEvent('change');\n }\n\n private handleMediaChange(event: Event) {\n event.stopPropagation();\n const mediaPicker = event.target as MediaPicker;\n // Convert media picker attachments back to the format expected by the form\n const formattedAttachments = mediaPicker.attachments.map((attachment) => {\n return `${attachment.content_type}:${attachment.url}`;\n });\n\n // Merge with any runtime attachments that were filtered out\n const runtimeAttachments = (this.attachments \|\| []).filter((attachment) => {\n if (typeof attachment === 'string') {\n const [contentType] = attachment.split(':');\n return !contentType.includes('/');\n }\n return false;\n }) as string[];\n\n this.attachments = [...runtimeAttachments, ...formattedAttachments];\n this.fireEvent('change');\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 this.unhighlight(evt);\n\n // Forward to media picker\n if (this.mediaPickerElement) {\n const files = [...evt.dataTransfer.files];\n this.mediaPickerElement.uploadFiles(files);\n }\n }\n\n private handleAttachmentIconClick(): void {\n // Trigger the file picker on the media picker\n if (this.mediaPickerElement) {\n const uploadInput = this.mediaPickerElement.shadowRoot.querySelector(\n '#upload-input'\n ) as HTMLInputElement;\n if (uploadInput) {\n uploadInput.click();\n }\n }\n }\n\n private highlight(evt: DragEvent): void {\n evt.preventDefault();\n evt.stopPropagation();\n\n // Always allow highlight for testing purposes, but in real usage check media picker\n this.pendingDrop = true;\n }\n\n private unhighlight(evt: DragEvent): void {\n evt.preventDefault();\n evt.stopPropagation();\n this.pendingDrop = false;\n }\n\n public updated(changedProperties: Map<string, any>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('attachments')) {\n // Re-query media picker since the DOM structure may have changed\n this.mediaPickerElement = this.shadowRoot.querySelector(\n 'temba-media-picker'\n ) as MediaPicker;\n }\n\n if (changedProperties.has('uploading')) {\n this.dispatchEvent(\n new CustomEvent('loading', {\n detail: { loading: this.uploading }\n })\n );\n }\n }\n\n public focus() {\n super.focus();\n if (this.completionElement) {\n this.completionElement.focus();\n }\n }\n\n public click() {\n super.click();\n if (this.completionElement) {\n this.completionElement.click();\n }\n }\n\n public render(): TemplateResult {\n return this.renderField();\n }\n\n protected renderWidget(): TemplateResult {\n const hasAttachments = this.hasStaticAttachments();\n\n return html`\n <div\n class=${getClasses({\n 'message-editor-container': true,\n highlight: this.pendingDrop,\n 'has-attachments': hasAttachments\n })}\n @dragenter=${this.handleDragEnter}\n @dragover=${this.handleDragOver}\n @dragleave=${this.handleDragLeave}\n @drop=${this.handleDrop}\n >\n <div class=\"completion-wrapper\">\n <temba-completion\n name=${this.name}\n .value=${this.value}\n placeholder=${this.placeholder}\n ?textarea=${this.textarea}\n ?autogrow=${this.autogrow}\n ?session=${this.session}\n ?submitOnEnter=${this.submitOnEnter}\n ?gsm=${this.gsm}\n ?disableCompletion=${this.disableCompletion}\n maxlength=${ifDefined(this.maxLength)}\n counter=${ifDefined(this.counter)}\n minHeight=${ifDefined(this.minHeight)}\n widgetOnly\n @change=${this.handleCompletionChange}\n ></temba-completion>\n </div>\n\n <div class=\"media-wrapper \">\n <temba-media-picker\n .accept=${this.accept}\n .max=${this.maxAttachments}\n .endpoint=${this.endpoint}\n @change=${this.handleMediaChange}\n ignoreDrops\n ></temba-media-picker>\n </div>\n <temba-icon\n class=\"attachment-icon\"\n name=${Icon.attachment}\n size=\"1.2\"\n @click=${this.handleAttachmentIconClick}\n ></temba-icon>\n\n <div class=\"drop-overlay\"></div>\n\n <!-- Hidden media picker for handling uploads when no attachments are shown -->\n ${!hasAttachments\n ? html`<temba-media-picker\n style=\"display: none;\"\n .accept=${this.accept}\n .max=${this.maxAttachments}\n .endpoint=${this.endpoint}\n @change=${this.handleMediaChange}\n ignoreDrops\n ></temba-media-picker>`\n : ''}\n </div>\n `;\n }\n}\n"]}

package/out-tsc/src/form/TembaSlider.js CHANGED Viewed

@@ -2,9 +2,9 @@ import { __decorate } from "tslib";
 import { css, html } from 'lit';
 import { styleMap } from 'lit-html/directives/style-map.js';
 import { property } from 'lit/decorators.js';
-import { FormElement } from './FormElement';
+import { FieldElement } from './FieldElement';
 import { getClasses } from '../utils';
-export class TembaSlider extends FormElement {
+export class TembaSlider extends FieldElement {
     constructor() {
         super(...arguments);
         this.range = false;
@@ -128,7 +128,7 @@ export class TembaSlider extends FormElement {
         this.circleX = pctAsPixels + (pre ? pre.offsetWidth : 0);
         this.requestUpdate();
     }
-    render() {
+    renderWidget() {
         return html ` <div class="${getClasses({ grabbed: this.grabbed })}">
       <div
         style=${styleMap({ left: this.circleX + 'px' })}

package/out-tsc/src/form/TembaSlider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TembaSlider.js","sourceRoot":"","sources":["../../../src/form/TembaSlider.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,~~WAAW~~,EAAE,MAAM,~~eAAe~~,CAAC;~~AAC5C~~,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,MAAM,OAAO,WAAY,SAAQ,~~WAAW~~;~~IAA5C~~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~~MAAM~~;~~QACX~~,OAAO,IAAI,CAAA,gBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC;;gBAEpD,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,IAAI,EAAE,CAAC;;qBAElC,IAAI,CAAC,eAAe;;;UAG/B,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,oBAAoB,IAAI,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI;wCAC9B,IAAI,CAAC,eAAe;UAClD,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,qBAAqB,IAAI,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI;;WAE5D,CAAC;IACV,CAAC;CACF;AA3FC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACd;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACnB;AAGR;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACjB","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { property } from 'lit/decorators.js';\nimport { ~~FormElement~~ } from './~~FormElement~~';\nimport { getClasses } from '../utils';\n\nexport class TembaSlider extends ~~FormElement~~ {\n static get styles() {\n return css`\n :host {\n display: block;\n }\n\n .track {\n height: 2px;\n border-top: 0.5em solid #fff;\n border-bottom: 0.5em solid #fff;\n background: #ddd;\n flex-grow: 1;\n }\n\n .circle {\n margin-bottom: -1.05em;\n margin-left: -0.5em;\n width: 0.75em;\n height: 0.75em;\n border: 2px solid #999;\n border-radius: 999px;\n position: relative;\n background: #fff;\n box-shadow: 0 0 0 4px rgb(255, 255, 255);\n transition: transform 200ms ease-in-out;\n }\n\n .grabbed .track {\n cursor: pointer;\n }\n\n :hover .circle {\n border-color: #777;\n cursor: pointer;\n }\n\n .grabbed .circle {\n border-color: var(--color-primary-dark);\n background: #fff;\n }\n\n .grabbed .circle {\n transform: scale(1.2);\n }\n\n .wrapper {\n display: flex;\n align-items: center;\n }\n\n .pre,\n .post {\n font-size: 0.9em;\n color: #999;\n padding: 0em 1em;\n }\n `;\n }\n\n @property({ type: Boolean })\n range = false;\n\n @property({ type: Number })\n min = 0;\n\n @property({ type: Number })\n max = 100;\n\n circleX = 0;\n grabbed = false;\n\n public firstUpdated(changes: Map<string, any>) {\n super.firstUpdated(changes);\n this.handleMouseMove = this.handleMouseMove.bind(this);\n this.handleMouseUp = this.handleMouseUp.bind(this);\n }\n\n public updated(changedProperties: Map<string, any>): void {\n if (changedProperties.has('value')) {\n this.updateCircle();\n }\n }\n\n public updateValue(evt: MouseEvent) {\n const track = this.shadowRoot.querySelector('.track') as HTMLDivElement;\n const left = evt.pageX - track.offsetLeft;\n const pct = left / track.offsetWidth;\n\n const range = this.max - this.min;\n const pctAsValue = range * pct + this.min;\n this.value =\n '' + Math.max(this.min, Math.min(Math.round(pctAsValue), this.max));\n }\n\n public handleMouseMove(evt: MouseEvent) {\n if (this.grabbed) {\n this.updateValue(evt);\n }\n }\n\n public handleTrackDown(evt: MouseEvent) {\n this.grabbed = true;\n document.addEventListener('mousemove', this.handleMouseMove);\n document.addEventListener('mouseup', this.handleMouseUp);\n document.querySelector('html').classList.add('dragging');\n this.updateValue(evt);\n this.requestUpdate();\n }\n\n public handleMouseUp(evt: MouseEvent) {\n this.grabbed = false;\n this.updateValue(evt);\n this.requestUpdate();\n\n document.removeEventListener('mousemove', this.handleMouseMove);\n document.removeEventListener('mouseup', this.handleMouseUp);\n document.querySelector('html').classList.remove('dragging');\n }\n\n public updateCircle() {\n const track = this.shadowRoot.querySelector('.track') as HTMLDivElement;\n const pre = this.shadowRoot.querySelector('.pre') as HTMLDivElement;\n const range = this.max - this.min;\n let cValue = parseInt(this.value);\n if (!cValue \|\| cValue < this.min) {\n cValue = this.min;\n } else if (cValue > this.max) {\n cValue = this.max;\n }\n this.value = '' + cValue;\n const pct = (cValue - this.min) / range;\n const pctAsPixels = track.offsetWidth * pct;\n\n this.circleX = pctAsPixels + (pre ? pre.offsetWidth : 0);\n this.requestUpdate();\n }\n\n public ~~render~~(): TemplateResult {\n return html` <div class=\"${getClasses({ grabbed: this.grabbed })}\">\n <div\n style=${styleMap({ left: this.circleX + 'px' })}\n class=\"circle\"\n @mousedown=${this.handleTrackDown}\n ></div>\n <div class=\"wrapper\">\n ${this.range ? html`<div class=\"pre\">${this.min}</div>` : null}\n <div class=\"track\" @mousedown=${this.handleTrackDown}></div>\n ${this.range ? html`<div class=\"post\">${this.max}</div>` : null}\n </div>\n </div>`;\n }\n}\n"]}
1	+ {"version":3,"file":"TembaSlider.js","sourceRoot":"","sources":["../../../src/form/TembaSlider.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { property } from 'lit/decorators.js';\nimport { FieldElement } from './FieldElement';\nimport { getClasses } from '../utils';\n\nexport class TembaSlider extends FieldElement {\n static get styles() {\n return css`\n :host {\n display: block;\n }\n\n .track {\n height: 2px;\n border-top: 0.5em solid #fff;\n border-bottom: 0.5em solid #fff;\n background: #ddd;\n flex-grow: 1;\n }\n\n .circle {\n margin-bottom: -1.05em;\n margin-left: -0.5em;\n width: 0.75em;\n height: 0.75em;\n border: 2px solid #999;\n border-radius: 999px;\n position: relative;\n background: #fff;\n box-shadow: 0 0 0 4px rgb(255, 255, 255);\n transition: transform 200ms ease-in-out;\n }\n\n .grabbed .track {\n cursor: pointer;\n }\n\n :hover .circle {\n border-color: #777;\n cursor: pointer;\n }\n\n .grabbed .circle {\n border-color: var(--color-primary-dark);\n background: #fff;\n }\n\n .grabbed .circle {\n transform: scale(1.2);\n }\n\n .wrapper {\n display: flex;\n align-items: center;\n }\n\n .pre,\n .post {\n font-size: 0.9em;\n color: #999;\n padding: 0em 1em;\n }\n `;\n }\n\n @property({ type: Boolean })\n range = false;\n\n @property({ type: Number })\n min = 0;\n\n @property({ type: Number })\n max = 100;\n\n circleX = 0;\n grabbed = false;\n\n public firstUpdated(changes: Map<string, any>) {\n super.firstUpdated(changes);\n this.handleMouseMove = this.handleMouseMove.bind(this);\n this.handleMouseUp = this.handleMouseUp.bind(this);\n }\n\n public updated(changedProperties: Map<string, any>): void {\n if (changedProperties.has('value')) {\n this.updateCircle();\n }\n }\n\n public updateValue(evt: MouseEvent) {\n const track = this.shadowRoot.querySelector('.track') as HTMLDivElement;\n const left = evt.pageX - track.offsetLeft;\n const pct = left / track.offsetWidth;\n\n const range = this.max - this.min;\n const pctAsValue = range * pct + this.min;\n this.value =\n '' + Math.max(this.min, Math.min(Math.round(pctAsValue), this.max));\n }\n\n public handleMouseMove(evt: MouseEvent) {\n if (this.grabbed) {\n this.updateValue(evt);\n }\n }\n\n public handleTrackDown(evt: MouseEvent) {\n this.grabbed = true;\n document.addEventListener('mousemove', this.handleMouseMove);\n document.addEventListener('mouseup', this.handleMouseUp);\n document.querySelector('html').classList.add('dragging');\n this.updateValue(evt);\n this.requestUpdate();\n }\n\n public handleMouseUp(evt: MouseEvent) {\n this.grabbed = false;\n this.updateValue(evt);\n this.requestUpdate();\n\n document.removeEventListener('mousemove', this.handleMouseMove);\n document.removeEventListener('mouseup', this.handleMouseUp);\n document.querySelector('html').classList.remove('dragging');\n }\n\n public updateCircle() {\n const track = this.shadowRoot.querySelector('.track') as HTMLDivElement;\n const pre = this.shadowRoot.querySelector('.pre') as HTMLDivElement;\n const range = this.max - this.min;\n let cValue = parseInt(this.value);\n if (!cValue \|\| cValue < this.min) {\n cValue = this.min;\n } else if (cValue > this.max) {\n cValue = this.max;\n }\n this.value = '' + cValue;\n const pct = (cValue - this.min) / range;\n const pctAsPixels = track.offsetWidth * pct;\n\n this.circleX = pctAsPixels + (pre ? pre.offsetWidth : 0);\n this.requestUpdate();\n }\n\n public renderWidget(): TemplateResult {\n return html` <div class=\"${getClasses({ grabbed: this.grabbed })}\">\n <div\n style=${styleMap({ left: this.circleX + 'px' })}\n class=\"circle\"\n @mousedown=${this.handleTrackDown}\n ></div>\n <div class=\"wrapper\">\n ${this.range ? html`<div class=\"pre\">${this.min}</div>` : null}\n <div class=\"track\" @mousedown=${this.handleTrackDown}></div>\n ${this.range ? html`<div class=\"post\">${this.max}</div>` : null}\n </div>\n </div>`;\n }\n}\n"]}

package/out-tsc/src/form/TemplateEditor.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import { __decorate } from "tslib";
 import { property } from 'lit/decorators.js';
-import { FormElement } from './FormElement';
 import { html, css, LitElement } from 'lit';
 import { CustomEventType } from '../interfaces';
 import { getClasses } from '../utils';
-export class TemplateEditor extends FormElement {
+import { FieldElement } from './FieldElement';
+export class TemplateEditor extends FieldElement {
     constructor() {
         super(...arguments);
         this.pickersLoading = {};
@@ -373,7 +373,7 @@ export class TemplateEditor extends FormElement {
       <div class="buttons">${buttons}</div>
     </div>`;
     }
-    render() {
+    renderWidget() {
         let content = null;
         if (this.translation) {
             content = this.renderComponents(this.translation.components);

package/out-tsc/src/form/TemplateEditor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TemplateEditor.js","sourceRoot":"","sources":["../../../src/form/TemplateEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { property } from 'lit/decorators.js';\nimport { FormElement } from './FormElement';\nimport { TemplateResult, html, css, LitElement } from 'lit';\nimport { CustomEventType } from '../interfaces';\nimport { MediaPicker } from './MediaPicker';\nimport { getClasses } from '../utils';\n\ninterface Component {\n name: string;\n type: string;\n content: string;\n variables: { [key: string]: number };\n}\n\ninterface Translation {\n locale: string;\n status: string;\n channel: { uuid: string; name: string };\n components: Component[];\n variables: { type: string }[];\n}\n\ninterface Template {\n created_on: string;\n modified_on: string;\n name: string;\n uuid: string;\n base_translation: Translation;\n}\n\nexport class TemplateEditor extends FormElement {\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true\n };\n\n static get styles() {\n return css`\n .component {\n background: #fff;\n border: 1px solid var(--color-widget-border);\n border-radius: var(--curvature);\n padding: 1em;\n margin-top: 1em;\n }\n\n .content {\n }\n\n .picker {\n margin-bottom: 0.5em;\n display: block;\n }\n .param {\n display: flex;\n margin-bottom: 0.5em;\n align-items: center;\n }\n label {\n margin-right: 0.5em;\n }\n\n .content span {\n margin-right: 0.25em;\n }\n\n .error-message {\n padding-left: 0.5em;\n padding-bottom: 1em;\n }\n\n .variable {\n display: inline-block;\n margin: 0.25em 0em;\n margin-right: 0.25em;\n }\n\n .button-wrapper {\n background: #f9f9f9;\n border-radius: var(--curvature);\n padding: 0.5em;\n display: flex;\n flex-direction: column;\n }\n\n .button-header {\n font-weight: normal;\n margin-left: 0.25em;\n margin-bottom: -0.5em;\n font-size: 0.9em;\n color: #777;\n }\n\n .buttons {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n margin-bottom: 1em;\n }\n\n .button {\n background: #fff;\n padding: 0.3em 1em;\n border: 1px solid #e6e6e6;\n border-radius: var(--curvature);\n min-height: 23px;\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-right: 0.5em;\n margin-top: 0.5em;\n align-items: center;\n }\n\n .button .content {\n margin-bottom: 0;\n }\n\n .button .display {\n margin-right: 0.5em;\n background: #f9f9f9;\n padding: 0.25em 1em;\n border-radius: var(--curvature);\n }\n\n .variable {\n --temba-textinput-padding: 5px 5px;\n --temba-textinput-font-size: 0.9em;\n line-height: initial;\n }\n\n .template {\n background: #fff;\n border-radius: var(--curvature);\n border: 1px solid var(--color-widget-border);\n padding: 1em;\n line-height: 2.2em;\n max-height: 50vh;\n overflow-y: auto;\n overflow-x: hidden;\n padding-bottom: 0;\n }\n\n .label {\n font-size: 0.9em;\n color: #777;\n margin-left: 0.25em;\n }\n `;\n }\n\n @property({ type: String })\n url: string;\n\n // initial template uuid\n @property({ type: String })\n template: string;\n\n @property({ type: Object })\n selectedTemplate: Template;\n\n // initial variables, not reflected back\n @property({ type: Array })\n variables: string[];\n\n @property({ type: Array })\n currentVariables: string[];\n\n @property({ type: Object, attribute: false })\n translation: Translation;\n\n @property({ type: Boolean })\n translating: boolean;\n\n pickersLoading: { [key: number]: boolean } = {};\n\n textInputAttachments: { [index: number]: boolean } = {};\n\n public updated(changes: Map<string, any>): void {\n super.updated(changes);\n if (changes.has('template')) {\n this.textInputAttachments = {};\n this.currentVariables = this.variables \|\| [];\n\n // check if our variables should be a textinput\n if (this.currentVariables.length > 0) {\n this.currentVariables.forEach((variable, index) => {\n const split = variable.split(':');\n if (split.length > 1) {\n // we have a generary content type\n if (split[0].indexOf('/') === -1) {\n this.textInputAttachments[index] = true;\n }\n }\n });\n }\n }\n }\n\n private handleTemplateChanged(event: CustomEvent) {\n const prev = this.selectedTemplate;\n this.selectedTemplate = (event.target as any).values[0] as Template;\n if (prev) {\n this.currentVariables = [];\n this.textInputAttachments = {};\n }\n\n if (this.selectedTemplate) {\n this.translation = this.selectedTemplate.base_translation;\n if (this.translation) {\n this.variables = new Array(\n (this.translation.variables \|\| []).length\n ).fill('');\n } else {\n this.variables = [];\n }\n } else {\n this.translation = null;\n this.variables = [];\n }\n\n this.fireCustomEvent(CustomEventType.ContextChanged, {\n template: this.selectedTemplate,\n translation: this.translation,\n variables: this.currentVariables\n });\n }\n\n private handleAttachmentLoading(event: CustomEvent) {\n const media = event.target as MediaPicker;\n const index = parseInt(media.getAttribute('index'));\n this.pickersLoading[index] = event.detail.loading;\n this.requestUpdate();\n }\n\n private handleAttachmentsChanged(event: CustomEvent) {\n const media = event.target as MediaPicker;\n const index = parseInt(media.getAttribute('index'));\n\n if (media.attachments.length === 0) {\n this.currentVariables[index] = '';\n } else {\n const attachment = media.attachments[0];\n if (attachment.url && attachment.content_type) {\n this.currentVariables[\n index\n ] = `${attachment.content_type}:${attachment.url}`;\n } else {\n this.currentVariables[index] = ``;\n }\n }\n this.fireContentChange();\n this.requestUpdate('currentVariables');\n }\n\n private handleVariableChanged(event: InputEvent) {\n const target = event.target as HTMLInputElement;\n const variableIndex = parseInt(target.getAttribute('index'));\n const prefix = target.getAttribute('prefix') \|\| '';\n\n // add our prefix if we have a value\n let value = target.value;\n if (value) {\n value = prefix + value;\n }\n\n this.currentVariables[variableIndex] = value;\n this.fireContentChange();\n }\n\n private fireContentChange() {\n this.fireCustomEvent(CustomEventType.ContentChanged, {\n template: this.selectedTemplate,\n translation: this.translation,\n variables: this.currentVariables\n });\n }\n\n private renderVariables(component: Component) {\n // create a regex match based on the variable names\n const variableRegex = new RegExp(\n `{{(${Object.keys(component.variables \|\| []).join('\|')})}}`,\n 'g'\n );\n\n let variables = null;\n\n let parts = [];\n if (component.content && component.content.trim().length > 0) {\n parts = component.content?.split(variableRegex) \|\| [];\n }\n const currVariables = this.currentVariables \|\| [];\n if (parts.length > 0) {\n variables = parts.map((part, index) => {\n if (index % 2 === 0) {\n return html`<span class=\"text\">${part}</span>`;\n }\n const variableIndex = component.variables[part];\n\n return html`<temba-completion\n class=\"variable\"\n type=\"text\"\n value=${variableIndex < currVariables.length\n ? currVariables[variableIndex]\n : null}\n @keyup=${this.handleVariableChanged}\n name=\"${component.name}\"\n index=\"${variableIndex}\"\n placeholder=\"{{${part}}}\"\n ></temba-completion>`;\n });\n } else {\n variables = Object.values(component.variables).map((variableIndex) => {\n const variableSpec = this.translation.variables[variableIndex];\n if (\n variableSpec.type === 'image' \|\|\n variableSpec.type === 'document' \|\|\n variableSpec.type === 'audio' \|\|\n variableSpec.type === 'video'\n ) {\n let attachments = [];\n if (this.currentVariables[variableIndex]) {\n const parts = this.currentVariables[variableIndex].split(':');\n const content_type = parts[0];\n const url = parts.slice(1).join(':');\n attachments = [{ url, content_type }];\n }\n\n const loading = this.pickersLoading[variableIndex];\n\n const prefix = variableSpec.type + ':';\n let value =\n variableIndex < currVariables.length\n ? currVariables[variableIndex]\n : null;\n\n if (value && value.startsWith(prefix)) {\n value = value.slice(prefix.length);\n }\n\n return html`\n ${this.textInputAttachments[variableIndex]\n ? html` <div class=\"label\">\n ${variableSpec.type.charAt(0).toUpperCase() +\n variableSpec.type.slice(1)}\n URL\n </div>\n <div\n style=\"display:flex;align-items:center;margin-bottom:1em;\"\n >\n <temba-completion\n style=\"flex-grow:1; margin-right:1em;\"\n prefix=\"${prefix}\"\n index=${variableIndex}\n value=${value}\n @keyup=${this.handleVariableChanged}\n ></temba-completion>\n <temba-icon\n name=\"close\"\n clickable\n @click=${() => {\n this.textInputAttachments[variableIndex] = false;\n this.currentVariables[variableIndex] = '';\n this.requestUpdate();\n }}\n >\n </temba-icon>\n <div></div>\n </div>`\n : html`\n <div\n class=${getClasses({ loading })}\n style=\"\n display: flex; \n align-items: center; \n border-radius: var(--curvature);\n margin-bottom: 0.5em;\n ${attachments.length === 0 && !loading\n ? `background-color:rgba(0,0,0,.04);`\n : ``}\"\n >\n <temba-media-picker\n accept=\"${variableSpec.type === 'document'\n ? 'application/pdf'\n : variableSpec.type + '/*'}\"\n max=\"1\"\n index=${variableIndex}\n icon=\"attachment_${variableSpec.type}\"\n attachments=${JSON.stringify(attachments)}\n @temba-loading=${this.handleAttachmentLoading.bind(this)}\n @change=${this.handleAttachmentsChanged.bind(this)}\n ></temba-media-picker>\n <div style=\"flex-grow:1\">\n ${attachments.length == 0 && !loading\n ? html`Attach ${variableSpec.type} to continue`\n : ''}\n </div>\n <temba-icon\n clickable\n name=\"edit\"\n @click=${() => {\n this.currentVariables[variableIndex] = '';\n this.textInputAttachments[variableIndex] = true;\n this.requestUpdate();\n }}\n style=\"margin-right:1em\"\n ></temba-icon>\n </div>\n `}\n `;\n }\n });\n }\n\n return html`<div class=\"content\">${variables}</div> `;\n }\n\n public renderComponents(components: Component[]): TemplateResult {\n const nonButtons = components\n .filter((comp) => !comp.type.startsWith('button/'))\n .map(\n (component) =>\n html`<div class=\"${component['name']}\">\n ${this.renderVariables(component)}\n </div>`\n );\n const buttonComponents = components.filter((comp) =>\n comp.type.startsWith('button/')\n );\n const buttons =\n buttonComponents.length > 0 ? this.renderButtons(buttonComponents) : null;\n return html`<div class=\"main\">${nonButtons}</div>\n <div class=\"buttons\">\n ${buttons}\n <div></div>\n </div>`;\n }\n\n public renderButtons(components): TemplateResult {\n const buttons = components.map((component) => {\n if (component.display) {\n return html`\n <div class=\"button\">\n <div class=\"display\">${component.display}</div>\n ${this.renderVariables(component)}\n </div>\n `;\n } else {\n return html`\n <div class=\"button\">${this.renderVariables(component)}</div>\n `;\n }\n });\n return html`<div class=\"button-wrapper\">\n <div class=\"button-header\">Template Buttons</div>\n <div class=\"buttons\">${buttons}</div>\n </div>`;\n }\n\n public render(): TemplateResult {\n let content = null;\n if (this.translation) {\n content = this.renderComponents(this.translation.components);\n } else if (this.selectedTemplate) {\n content = html`<div class=\"error-message\">\n This template currently has no approved translations.\n </div>`;\n }\n\n return html`\n <div>\n <temba-select\n searchable\n ?clearable=${!this.translating}\n ?disabled=${this.translating}\n valuekey=\"uuid\"\n class=\"picker\"\n value=\"${this.template}\"\n endpoint=\"${this.url}\"\n shouldExclude=${(template) => template.status !== 'approved'}\n placeholder=\"Select a template\"\n @temba-content-changed=${this.swallowEvent}\n @change=${this.handleTemplateChanged}\n >\n </temba-select>\n ${content ? html` <div class=\"template\">${content}</div>` : null}\n </div>\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"TemplateEditor.js","sourceRoot":"","sources":["../../../src/form/TemplateEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { property } from 'lit/decorators.js';\nimport { TemplateResult, html, css, LitElement } from 'lit';\nimport { CustomEventType } from '../interfaces';\nimport { MediaPicker } from './MediaPicker';\nimport { getClasses } from '../utils';\nimport { FieldElement } from './FieldElement';\n\ninterface Component {\n name: string;\n type: string;\n content: string;\n variables: { [key: string]: number };\n}\n\ninterface Translation {\n locale: string;\n status: string;\n channel: { uuid: string; name: string };\n components: Component[];\n variables: { type: string }[];\n}\n\ninterface Template {\n created_on: string;\n modified_on: string;\n name: string;\n uuid: string;\n base_translation: Translation;\n}\n\nexport class TemplateEditor extends FieldElement {\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true\n };\n\n static get styles() {\n return css`\n .component {\n background: #fff;\n border: 1px solid var(--color-widget-border);\n border-radius: var(--curvature);\n padding: 1em;\n margin-top: 1em;\n }\n\n .content {\n }\n\n .picker {\n margin-bottom: 0.5em;\n display: block;\n }\n .param {\n display: flex;\n margin-bottom: 0.5em;\n align-items: center;\n }\n label {\n margin-right: 0.5em;\n }\n\n .content span {\n margin-right: 0.25em;\n }\n\n .error-message {\n padding-left: 0.5em;\n padding-bottom: 1em;\n }\n\n .variable {\n display: inline-block;\n margin: 0.25em 0em;\n margin-right: 0.25em;\n }\n\n .button-wrapper {\n background: #f9f9f9;\n border-radius: var(--curvature);\n padding: 0.5em;\n display: flex;\n flex-direction: column;\n }\n\n .button-header {\n font-weight: normal;\n margin-left: 0.25em;\n margin-bottom: -0.5em;\n font-size: 0.9em;\n color: #777;\n }\n\n .buttons {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n margin-bottom: 1em;\n }\n\n .button {\n background: #fff;\n padding: 0.3em 1em;\n border: 1px solid #e6e6e6;\n border-radius: var(--curvature);\n min-height: 23px;\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-right: 0.5em;\n margin-top: 0.5em;\n align-items: center;\n }\n\n .button .content {\n margin-bottom: 0;\n }\n\n .button .display {\n margin-right: 0.5em;\n background: #f9f9f9;\n padding: 0.25em 1em;\n border-radius: var(--curvature);\n }\n\n .variable {\n --temba-textinput-padding: 5px 5px;\n --temba-textinput-font-size: 0.9em;\n line-height: initial;\n }\n\n .template {\n background: #fff;\n border-radius: var(--curvature);\n border: 1px solid var(--color-widget-border);\n padding: 1em;\n line-height: 2.2em;\n max-height: 50vh;\n overflow-y: auto;\n overflow-x: hidden;\n padding-bottom: 0;\n }\n\n .label {\n font-size: 0.9em;\n color: #777;\n margin-left: 0.25em;\n }\n `;\n }\n\n @property({ type: String })\n url: string;\n\n // initial template uuid\n @property({ type: String })\n template: string;\n\n @property({ type: Object })\n selectedTemplate: Template;\n\n // initial variables, not reflected back\n @property({ type: Array })\n variables: string[];\n\n @property({ type: Array })\n currentVariables: string[];\n\n @property({ type: Object, attribute: false })\n translation: Translation;\n\n @property({ type: Boolean })\n translating: boolean;\n\n pickersLoading: { [key: number]: boolean } = {};\n\n textInputAttachments: { [index: number]: boolean } = {};\n\n public updated(changes: Map<string, any>): void {\n super.updated(changes);\n if (changes.has('template')) {\n this.textInputAttachments = {};\n this.currentVariables = this.variables \|\| [];\n\n // check if our variables should be a textinput\n if (this.currentVariables.length > 0) {\n this.currentVariables.forEach((variable, index) => {\n const split = variable.split(':');\n if (split.length > 1) {\n // we have a generary content type\n if (split[0].indexOf('/') === -1) {\n this.textInputAttachments[index] = true;\n }\n }\n });\n }\n }\n }\n\n private handleTemplateChanged(event: CustomEvent) {\n const prev = this.selectedTemplate;\n this.selectedTemplate = (event.target as any).values[0] as Template;\n if (prev) {\n this.currentVariables = [];\n this.textInputAttachments = {};\n }\n\n if (this.selectedTemplate) {\n this.translation = this.selectedTemplate.base_translation;\n if (this.translation) {\n this.variables = new Array(\n (this.translation.variables \|\| []).length\n ).fill('');\n } else {\n this.variables = [];\n }\n } else {\n this.translation = null;\n this.variables = [];\n }\n\n this.fireCustomEvent(CustomEventType.ContextChanged, {\n template: this.selectedTemplate,\n translation: this.translation,\n variables: this.currentVariables\n });\n }\n\n private handleAttachmentLoading(event: CustomEvent) {\n const media = event.target as MediaPicker;\n const index = parseInt(media.getAttribute('index'));\n this.pickersLoading[index] = event.detail.loading;\n this.requestUpdate();\n }\n\n private handleAttachmentsChanged(event: CustomEvent) {\n const media = event.target as MediaPicker;\n const index = parseInt(media.getAttribute('index'));\n\n if (media.attachments.length === 0) {\n this.currentVariables[index] = '';\n } else {\n const attachment = media.attachments[0];\n if (attachment.url && attachment.content_type) {\n this.currentVariables[\n index\n ] = `${attachment.content_type}:${attachment.url}`;\n } else {\n this.currentVariables[index] = ``;\n }\n }\n this.fireContentChange();\n this.requestUpdate('currentVariables');\n }\n\n private handleVariableChanged(event: InputEvent) {\n const target = event.target as HTMLInputElement;\n const variableIndex = parseInt(target.getAttribute('index'));\n const prefix = target.getAttribute('prefix') \|\| '';\n\n // add our prefix if we have a value\n let value = target.value;\n if (value) {\n value = prefix + value;\n }\n\n this.currentVariables[variableIndex] = value;\n this.fireContentChange();\n }\n\n private fireContentChange() {\n this.fireCustomEvent(CustomEventType.ContentChanged, {\n template: this.selectedTemplate,\n translation: this.translation,\n variables: this.currentVariables\n });\n }\n\n private renderVariables(component: Component) {\n // create a regex match based on the variable names\n const variableRegex = new RegExp(\n `{{(${Object.keys(component.variables \|\| []).join('\|')})}}`,\n 'g'\n );\n\n let variables = null;\n\n let parts = [];\n if (component.content && component.content.trim().length > 0) {\n parts = component.content?.split(variableRegex) \|\| [];\n }\n const currVariables = this.currentVariables \|\| [];\n if (parts.length > 0) {\n variables = parts.map((part, index) => {\n if (index % 2 === 0) {\n return html`<span class=\"text\">${part}</span>`;\n }\n const variableIndex = component.variables[part];\n\n return html`<temba-completion\n class=\"variable\"\n type=\"text\"\n value=${variableIndex < currVariables.length\n ? currVariables[variableIndex]\n : null}\n @keyup=${this.handleVariableChanged}\n name=\"${component.name}\"\n index=\"${variableIndex}\"\n placeholder=\"{{${part}}}\"\n ></temba-completion>`;\n });\n } else {\n variables = Object.values(component.variables).map((variableIndex) => {\n const variableSpec = this.translation.variables[variableIndex];\n if (\n variableSpec.type === 'image' \|\|\n variableSpec.type === 'document' \|\|\n variableSpec.type === 'audio' \|\|\n variableSpec.type === 'video'\n ) {\n let attachments = [];\n if (this.currentVariables[variableIndex]) {\n const parts = this.currentVariables[variableIndex].split(':');\n const content_type = parts[0];\n const url = parts.slice(1).join(':');\n attachments = [{ url, content_type }];\n }\n\n const loading = this.pickersLoading[variableIndex];\n\n const prefix = variableSpec.type + ':';\n let value =\n variableIndex < currVariables.length\n ? currVariables[variableIndex]\n : null;\n\n if (value && value.startsWith(prefix)) {\n value = value.slice(prefix.length);\n }\n\n return html`\n ${this.textInputAttachments[variableIndex]\n ? html` <div class=\"label\">\n ${variableSpec.type.charAt(0).toUpperCase() +\n variableSpec.type.slice(1)}\n URL\n </div>\n <div\n style=\"display:flex;align-items:center;margin-bottom:1em;\"\n >\n <temba-completion\n style=\"flex-grow:1; margin-right:1em;\"\n prefix=\"${prefix}\"\n index=${variableIndex}\n value=${value}\n @keyup=${this.handleVariableChanged}\n ></temba-completion>\n <temba-icon\n name=\"close\"\n clickable\n @click=${() => {\n this.textInputAttachments[variableIndex] = false;\n this.currentVariables[variableIndex] = '';\n this.requestUpdate();\n }}\n >\n </temba-icon>\n <div></div>\n </div>`\n : html`\n <div\n class=${getClasses({ loading })}\n style=\"\n display: flex; \n align-items: center; \n border-radius: var(--curvature);\n margin-bottom: 0.5em;\n ${attachments.length === 0 && !loading\n ? `background-color:rgba(0,0,0,.04);`\n : ``}\"\n >\n <temba-media-picker\n accept=\"${variableSpec.type === 'document'\n ? 'application/pdf'\n : variableSpec.type + '/*'}\"\n max=\"1\"\n index=${variableIndex}\n icon=\"attachment_${variableSpec.type}\"\n attachments=${JSON.stringify(attachments)}\n @temba-loading=${this.handleAttachmentLoading.bind(this)}\n @change=${this.handleAttachmentsChanged.bind(this)}\n ></temba-media-picker>\n <div style=\"flex-grow:1\">\n ${attachments.length == 0 && !loading\n ? html`Attach ${variableSpec.type} to continue`\n : ''}\n </div>\n <temba-icon\n clickable\n name=\"edit\"\n @click=${() => {\n this.currentVariables[variableIndex] = '';\n this.textInputAttachments[variableIndex] = true;\n this.requestUpdate();\n }}\n style=\"margin-right:1em\"\n ></temba-icon>\n </div>\n `}\n `;\n }\n });\n }\n\n return html`<div class=\"content\">${variables}</div> `;\n }\n\n public renderComponents(components: Component[]): TemplateResult {\n const nonButtons = components\n .filter((comp) => !comp.type.startsWith('button/'))\n .map(\n (component) =>\n html`<div class=\"${component['name']}\">\n ${this.renderVariables(component)}\n </div>`\n );\n const buttonComponents = components.filter((comp) =>\n comp.type.startsWith('button/')\n );\n const buttons =\n buttonComponents.length > 0 ? this.renderButtons(buttonComponents) : null;\n return html`<div class=\"main\">${nonButtons}</div>\n <div class=\"buttons\">\n ${buttons}\n <div></div>\n </div>`;\n }\n\n public renderButtons(components): TemplateResult {\n const buttons = components.map((component) => {\n if (component.display) {\n return html`\n <div class=\"button\">\n <div class=\"display\">${component.display}</div>\n ${this.renderVariables(component)}\n </div>\n `;\n } else {\n return html`\n <div class=\"button\">${this.renderVariables(component)}</div>\n `;\n }\n });\n return html`<div class=\"button-wrapper\">\n <div class=\"button-header\">Template Buttons</div>\n <div class=\"buttons\">${buttons}</div>\n </div>`;\n }\n\n public renderWidget(): TemplateResult {\n let content = null;\n if (this.translation) {\n content = this.renderComponents(this.translation.components);\n } else if (this.selectedTemplate) {\n content = html`<div class=\"error-message\">\n This template currently has no approved translations.\n </div>`;\n }\n\n return html`\n <div>\n <temba-select\n searchable\n ?clearable=${!this.translating}\n ?disabled=${this.translating}\n valuekey=\"uuid\"\n class=\"picker\"\n value=\"${this.template}\"\n endpoint=\"${this.url}\"\n shouldExclude=${(template) => template.status !== 'approved'}\n placeholder=\"Select a template\"\n @temba-content-changed=${this.swallowEvent}\n @change=${this.handleTemplateChanged}\n >\n </temba-select>\n ${content ? html` <div class=\"template\">${content}</div>` : null}\n </div>\n `;\n }\n}\n"]}

package/out-tsc/src/form/TextInput.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { html, css } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { styleMap } from 'lit-html/directives/style-map.js';
-import { FormElement } from './FormElement';
+import { FieldElement } from './FieldElement';
 import { sanitizeUnintendedUnicode } from '../utils';
 export var InputType;
 (function (InputType) {
@@ -11,9 +11,10 @@ export var InputType;
     InputType["Password"] = "password";
     InputType["Number"] = "number";
 })(InputType || (InputType = {}));
-export class TextInput extends FormElement {
+export class TextInput extends FieldElement {
     static get styles() {
         return css `
+      ${super.styles}
       .input-container {
         border-radius: var(--curvature-widget);
         cursor: var(--input-cursor);
@@ -152,7 +153,7 @@ export class TextInput extends FormElement {
     firstUpdated(changes) {
         super.firstUpdated(changes);
         this.inputElement = this.shadowRoot.querySelector('.textinput');
-        if (changes.has('counter')) {
+        if (changes.has('counter') && this.counter && this.counter.trim()) {
             let root = this.getParentModax();
             if (root) {
                 root = root.shadowRoot;
@@ -296,9 +297,14 @@ export class TextInput extends FormElement {
     }
     // TODO make this a formelement and have contactsearch set the root
     render() {
-        const containerStyle = {
-            height: `${this.textarea ? '100%' : 'auto'}`
-        };
+        return this.renderField();
+    }
+    renderWidget() {
+        const containerStyle = {};
+        if (this.counter) {
+            containerStyle['--counter-background'] =
+                'var(--color-widget-border, transparent)';
+        }
         const clear = this.clearable && this.inputElement && this.inputElement.value
             ? html `<temba-icon
             name="x"
@@ -389,31 +395,21 @@ export class TextInput extends FormElement {
             }
         }
         return html `
-      <temba-field
-        name=${this.name}
-        .label="${this.label}"
-        .helpText="${this.helpText}"
-        .errors=${this.errors}
-        .widgetOnly=${this.widgetOnly}
-        .hideLabel=${this.hideLabel}
-        .disabled=${this.disabled}
+      <div
+        class="input-container"
+        style=${styleMap(containerStyle)}
+        @click=${this.handleContainerClick}
       >
-        <div
-          class="input-container"
-          style=${styleMap(containerStyle)}
-          @click=${this.handleContainerClick}
-        >
-          <slot name="prefix"></slot>
+        <slot name="prefix"></slot>
-          ${input} ${clear}
-          <slot name="type" class="type-icon"
-            >${this.type === InputType.Number
+        ${input} ${clear}
+        <slot name="type" class="type-icon"
+          >${this.type === InputType.Number
             ? html `<temba-icon name="number"></temba-icon>`
             : null}</slot
-          >
-          <slot></slot>
-        </div>
-      </temba-field>
+        >
+        <slot></slot>
+      </div>
     `;
     }
 }

package/out-tsc/src/form/TextInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../src/form/TextInput.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { FormElement } from './FormElement';\nimport { Modax } from '../layout/Modax';\nimport { sanitizeUnintendedUnicode } from '../utils';\nimport { CharCount } from '../display/CharCount';\n\nexport enum InputType {\n Text = 'text',\n Password = 'password',\n Number = 'number'\n}\n\nexport class TextInput extends FormElement {\n static get styles() {\n return css`\n .input-container {\n border-radius: var(--curvature-widget);\n cursor: var(--input-cursor);\n background: var(--color-widget-bg);\n border: 1px solid var(--color-widget-border);\n transition: all ease-in-out var(--transition-speed);\n display: flex;\n flex-direction: row;\n align-items: stretch;\n box-shadow: var(--widget-box-shadow);\n caret-color: var(--input-caret);\n }\n\n .clear-icon {\n --icon-color: var(--color-text-dark-secondary);\n cursor: pointer;\n margin: auto;\n padding-right: 10px;\n line-height: 1;\n }\n\n .clear-icon:hover {\n --icon-color: var(--color-text-dark);\n }\n\n .hidden {\n visibility: hidden;\n position: absolute;\n }\n\n .input-container:focus-within {\n border-color: var(--color-focus);\n background: var(--color-widget-bg-focused);\n box-shadow: var(--widget-box-shadow-focused);\n position: relative;\n }\n\n .input-container:hover {\n }\n\n textarea {\n height: var(--textarea-height);\n min-height: var(--textarea-min-height, var(--textarea-height));\n transition: height var(--transition-speed) ease-in-out;\n unicode-bidi: var(--unicode-bidi, normal);\n }\n\n .textinput:focus {\n }\n\n .textinput {\n padding: var(--temba-textinput-padding);\n border: none;\n flex: 1;\n margin: 0;\n background: transparent;\n color: var(--color-widget-text);\n font-family: var(--font-family);\n font-size: var(--temba-textinput-font-size);\n line-height: normal;\n cursor: var(--input-cursor);\n resize: none;\n width: 100%;\n }\n\n .textinput:focus {\n outline: none;\n box-shadow: none;\n cursor: text;\n color: var(--color-widget-text-focused, var(--color-widget-text));\n }\n\n .textinput::placeholder {\n color: var(--color-placeholder);\n }\n\n .grow-wrap {\n display: flex;\n align-items: stretch;\n width: 100%;\n margin-bottom: 1em;\n }\n\n .grow-wrap > div {\n border: 0px solid green;\n white-space: pre-wrap;\n width: 100%;\n padding: var(--temba-textinput-padding);\n flex: 1;\n margin: 0;\n background: none;\n color: var(--color-widget-text);\n font-family: var(--font-family);\n font-size: var(--temba-textinput-font-size);\n line-height: normal;\n cursor: text;\n resize: none;\n width: 100%;\n word-break: break-word;\n opacity: 0;\n z-index: -1;\n max-height: var(--temba-textinput-max-height, 30em);\n }\n\n .grow-wrap textarea {\n margin-left: -100%;\n height: 100%;\n flex-grow: 1;\n }\n\n input[type='number'] {\n appearance: none;\n }\n\n input[type='number']::-webkit-inner-spin-button {\n display: none;\n }\n\n .type-icon {\n color: #e3e3e3;\n }\n `;\n }\n\n @property({ type: Boolean })\n textarea: boolean;\n\n @property({ type: String })\n placeholder = '';\n\n @property({ type: Boolean })\n password: boolean;\n\n @property({ type: Number })\n maxlength: number;\n\n @property({ type: Object })\n inputElement: HTMLInputElement;\n\n @property({ type: Boolean })\n clearable: boolean;\n\n @property({ type: Boolean })\n gsm: boolean;\n\n @property({ type: String })\n counter: string;\n\n // if we are still loading\n @property({ type: Boolean })\n loading = true;\n\n @property({ type: Boolean })\n submitOnEnter = true;\n\n @property()\n onBlur: any;\n\n @property({ type: Boolean })\n autogrow = false;\n\n @property({ type: String })\n type = InputType.Text;\n\n counterElement: CharCount = null;\n cursorStart = -1;\n cursorEnd = -1;\n\n public constructor() {\n super();\n }\n\n public firstUpdated(changes: Map<string, any>) {\n super.firstUpdated(changes);\n\n this.inputElement = this.shadowRoot.querySelector('.textinput');\n\n if (changes.has('counter')) {\n let root = this.getParentModax() as any;\n if (root) {\n root = root.shadowRoot;\n }\n if (!root) {\n root = document;\n }\n this.counterElement = root.querySelector(this.counter);\n if (this.counterElement) {\n this.counterElement.text = this.value;\n }\n }\n }\n\n private updateAutogrowSize(): void {\n if (this.textarea && this.autogrow) {\n const autogrow = this.shadowRoot.querySelector(\n '.grow-wrap > div'\n ) as HTMLDivElement;\n if (autogrow) {\n autogrow.innerText = this.value + String.fromCharCode(10);\n }\n }\n }\n\n public updated(changes: Map<string, any>) {\n super.updated(changes);\n\n if (changes.has('value')) {\n if (changes.get('value') !== undefined) {\n this.fireEvent('change');\n }\n\n this.updateAutogrowSize();\n\n if (this.cursorStart > -1 && this.cursorEnd > -1) {\n this.inputElement.setSelectionRange(this.cursorStart, this.cursorEnd);\n this.cursorStart = -1;\n this.cursorEnd = -1;\n }\n }\n }\n\n public getDisplayValue() {\n return this.inputElement.value;\n }\n\n private handleClear(event: any): void {\n event.stopPropagation();\n event.preventDefault();\n this.value = null;\n }\n\n public getTextInput(): TextInput {\n return this;\n }\n\n public updateValue(value: string): void {\n const cursorStart = this.inputElement.selectionStart;\n const cursorEnd = this.inputElement.selectionEnd;\n const sanitized = this.sanitizeGSM(value);\n\n if (sanitized !== value) {\n this.cursorStart = cursorStart;\n this.cursorEnd = cursorEnd;\n }\n\n this.value = sanitized;\n\n if (this.textarea) {\n this.inputElement.value = this.value;\n }\n\n if (this.counterElement) {\n this.counterElement.text = value;\n }\n }\n\n private sanitizeGSM(text: string): string {\n return this.gsm ? sanitizeUnintendedUnicode(text) : text;\n }\n\n private handleChange(update: any): void {\n if (this.disabled) {\n return;\n }\n this.updateValue(update.target.value);\n this.fireEvent('change');\n }\n\n private handleContainerClick(): void {\n if (this.disabled) {\n return;\n }\n if (this.inputElement) {\n this.inputElement.click();\n }\n }\n\n private handleContainerFocus(): void {\n if (this.disabled) {\n return;\n }\n if (this.inputElement) {\n this.inputElement.focus();\n }\n }\n\n private handleInput(update: any): void {\n if (this.disabled) {\n return;\n }\n\n this.updateValue(update.target.value);\n this.fireEvent('input');\n }\n\n /** we just return the value since it should be a string */\n public serializeValue(value: any): string {\n return value;\n }\n\n public getParentModax(): Modax {\n let parent = this as HTMLElement;\n\n while (parent) {\n if (parent.parentElement) {\n parent = parent.parentElement;\n } else {\n parent = (parent as any).getRootNode().host;\n }\n\n if (!parent) {\n return null;\n }\n\n if (parent.tagName == 'TEMBA-MODAX') {\n return parent as Modax;\n }\n }\n }\n\n public getParentForm(): HTMLFormElement {\n let parent = this as HTMLElement;\n\n while (parent) {\n if (parent.parentElement) {\n parent = parent.parentElement;\n } else {\n parent = (parent as any).getRootNode().host;\n }\n\n if (!parent) {\n return null;\n }\n\n if (parent.tagName === 'FORM') {\n return parent as HTMLFormElement;\n }\n }\n }\n\n public click(): void {\n super.click();\n this.handleContainerClick();\n }\n\n public focus(): void {\n super.focus();\n this.handleContainerFocus();\n }\n\n // TODO make this a formelement and have contactsearch set the root\n public render(): TemplateResult {\n const containerStyle = {\n height: `${this.textarea ? '100%' : 'auto'}`\n };\n\n const clear =\n this.clearable && this.inputElement && this.inputElement.value\n ? html`<temba-icon\n name=\"x\"\n class=\"clear-icon\"\n @click=${this.handleClear}\n />`\n : null;\n\n let input = html`\n <input\n autofocus\n class=\"textinput\"\n autocomplete=\"off\"\n name=${this.name}\n type=\"${this.password \|\| this.type === InputType.Password\n ? 'password'\n : this.type}\"\n maxlength=\"${ifDefined(this.maxlength)}\"\n @change=${this.handleChange}\n @input=${this.handleInput}\n @blur=${this.blur}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n const input = this;\n\n if (this.submitOnEnter) {\n const parentModax = input.getParentModax();\n const parentForm = !parentModax ? input.getParentForm() : null;\n\n // if we don't have something to submit then bail\n if (!parentModax && !parentForm) {\n return false;\n }\n\n // don't submit disabled forms on enter\n if (parentModax && parentModax.disabled) {\n return false;\n }\n\n input.blur();\n\n // look for a form to submit\n window.setTimeout(function () {\n // first, look for a modax that contains us\n const modax = input.getParentModax();\n if (modax) {\n input.blur();\n\n modax.submit();\n } else {\n // otherwise, just look for a vanilla submit button\n const form = input.getParentForm();\n\n if (form) {\n const submitButton = form.querySelector(\n \"input[type='submit']\"\n ) as HTMLInputElement;\n if (submitButton) {\n submitButton.click();\n } else {\n form.submit();\n }\n }\n }\n }, 10);\n // this is needed for firefox, would be nice to\n // find a way to do this with a callback instead\n }\n }\n }}\n placeholder=${this.placeholder}\n .value=${this.value}\n .disabled=${this.disabled}\n />\n `;\n\n if (this.textarea) {\n input = html`\n <textarea\n class=\"textinput\"\n name=${this.name}\n maxlength=\"${ifDefined(this.maxlength)}\"\n placeholder=${this.placeholder}\n @change=${this.handleChange}\n @input=${this.handleInput}\n @blur=${this.blur}\n .value=${this.value}\n .disabled=${this.disabled}\n ></textarea>\n `;\n\n if (this.autogrow) {\n input = html` <div class=\"grow-wrap\">\n <div></div>\n ${input}\n </div>`;\n }\n }\n\n return html`\n <temba-field\n name=${this.name}\n .label=\"${this.label}\"\n .helpText=\"${this.helpText}\"\n .errors=${this.errors}\n .widgetOnly=${this.widgetOnly}\n .hideLabel=${this.hideLabel}\n .disabled=${this.disabled}\n >\n <div\n class=\"input-container\"\n style=${styleMap(containerStyle)}\n @click=${this.handleContainerClick}\n >\n <slot name=\"prefix\"></slot>\n\n ${input} ${clear}\n <slot name=\"type\" class=\"type-icon\"\n >${this.type === InputType.Number\n ? html`<temba-icon name=\"number\"></temba-icon>`\n : null}</slot\n >\n <slot></slot>\n </div>\n </temba-field>\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../src/form/TextInput.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { FieldElement } from './FieldElement';\nimport { Modax } from '../layout/Modax';\nimport { sanitizeUnintendedUnicode } from '../utils';\nimport { CharCount } from '../display/CharCount';\n\nexport enum InputType {\n Text = 'text',\n Password = 'password',\n Number = 'number'\n}\n\nexport class TextInput extends FieldElement {\n static get styles() {\n return css`\n ${super.styles}\n .input-container {\n border-radius: var(--curvature-widget);\n cursor: var(--input-cursor);\n background: var(--color-widget-bg);\n border: 1px solid var(--color-widget-border);\n transition: all ease-in-out var(--transition-speed);\n display: flex;\n flex-direction: row;\n align-items: stretch;\n box-shadow: var(--widget-box-shadow);\n caret-color: var(--input-caret);\n }\n\n .clear-icon {\n --icon-color: var(--color-text-dark-secondary);\n cursor: pointer;\n margin: auto;\n padding-right: 10px;\n line-height: 1;\n }\n\n .clear-icon:hover {\n --icon-color: var(--color-text-dark);\n }\n\n .hidden {\n visibility: hidden;\n position: absolute;\n }\n\n .input-container:focus-within {\n border-color: var(--color-focus);\n background: var(--color-widget-bg-focused);\n box-shadow: var(--widget-box-shadow-focused);\n position: relative;\n }\n\n .input-container:hover {\n }\n\n textarea {\n height: var(--textarea-height);\n min-height: var(--textarea-min-height, var(--textarea-height));\n transition: height var(--transition-speed) ease-in-out;\n unicode-bidi: var(--unicode-bidi, normal);\n }\n\n .textinput:focus {\n }\n\n .textinput {\n padding: var(--temba-textinput-padding);\n border: none;\n flex: 1;\n margin: 0;\n background: transparent;\n color: var(--color-widget-text);\n font-family: var(--font-family);\n font-size: var(--temba-textinput-font-size);\n line-height: normal;\n cursor: var(--input-cursor);\n resize: none;\n width: 100%;\n }\n\n .textinput:focus {\n outline: none;\n box-shadow: none;\n cursor: text;\n color: var(--color-widget-text-focused, var(--color-widget-text));\n }\n\n .textinput::placeholder {\n color: var(--color-placeholder);\n }\n\n .grow-wrap {\n display: flex;\n align-items: stretch;\n width: 100%;\n margin-bottom: 1em;\n }\n\n .grow-wrap > div {\n border: 0px solid green;\n white-space: pre-wrap;\n width: 100%;\n padding: var(--temba-textinput-padding);\n flex: 1;\n margin: 0;\n background: none;\n color: var(--color-widget-text);\n font-family: var(--font-family);\n font-size: var(--temba-textinput-font-size);\n line-height: normal;\n cursor: text;\n resize: none;\n width: 100%;\n word-break: break-word;\n opacity: 0;\n z-index: -1;\n max-height: var(--temba-textinput-max-height, 30em);\n }\n\n .grow-wrap textarea {\n margin-left: -100%;\n height: 100%;\n flex-grow: 1;\n }\n\n input[type='number'] {\n appearance: none;\n }\n\n input[type='number']::-webkit-inner-spin-button {\n display: none;\n }\n\n .type-icon {\n color: #e3e3e3;\n }\n `;\n }\n\n @property({ type: Boolean })\n textarea: boolean;\n\n @property({ type: String })\n placeholder = '';\n\n @property({ type: Boolean })\n password: boolean;\n\n @property({ type: Number })\n maxlength: number;\n\n @property({ type: Object })\n inputElement: HTMLInputElement;\n\n @property({ type: Boolean })\n clearable: boolean;\n\n @property({ type: Boolean })\n gsm: boolean;\n\n @property({ type: String })\n counter: string;\n\n // if we are still loading\n @property({ type: Boolean })\n loading = true;\n\n @property({ type: Boolean })\n submitOnEnter = true;\n\n @property()\n onBlur: any;\n\n @property({ type: Boolean })\n autogrow = false;\n\n @property({ type: String })\n type = InputType.Text;\n\n counterElement: CharCount = null;\n cursorStart = -1;\n cursorEnd = -1;\n\n public constructor() {\n super();\n }\n\n public firstUpdated(changes: Map<string, any>) {\n super.firstUpdated(changes);\n\n this.inputElement = this.shadowRoot.querySelector('.textinput');\n\n if (changes.has('counter') && this.counter && this.counter.trim()) {\n let root = this.getParentModax() as any;\n if (root) {\n root = root.shadowRoot;\n }\n if (!root) {\n root = document;\n }\n this.counterElement = root.querySelector(this.counter);\n if (this.counterElement) {\n this.counterElement.text = this.value;\n }\n }\n }\n\n private updateAutogrowSize(): void {\n if (this.textarea && this.autogrow) {\n const autogrow = this.shadowRoot.querySelector(\n '.grow-wrap > div'\n ) as HTMLDivElement;\n if (autogrow) {\n autogrow.innerText = this.value + String.fromCharCode(10);\n }\n }\n }\n\n public updated(changes: Map<string, any>) {\n super.updated(changes);\n\n if (changes.has('value')) {\n if (changes.get('value') !== undefined) {\n this.fireEvent('change');\n }\n\n this.updateAutogrowSize();\n\n if (this.cursorStart > -1 && this.cursorEnd > -1) {\n this.inputElement.setSelectionRange(this.cursorStart, this.cursorEnd);\n this.cursorStart = -1;\n this.cursorEnd = -1;\n }\n }\n }\n\n public getDisplayValue() {\n return this.inputElement.value;\n }\n\n private handleClear(event: any): void {\n event.stopPropagation();\n event.preventDefault();\n this.value = null;\n }\n\n public getTextInput(): TextInput {\n return this;\n }\n\n public updateValue(value: string): void {\n const cursorStart = this.inputElement.selectionStart;\n const cursorEnd = this.inputElement.selectionEnd;\n const sanitized = this.sanitizeGSM(value);\n\n if (sanitized !== value) {\n this.cursorStart = cursorStart;\n this.cursorEnd = cursorEnd;\n }\n\n this.value = sanitized;\n\n if (this.textarea) {\n this.inputElement.value = this.value;\n }\n\n if (this.counterElement) {\n this.counterElement.text = value;\n }\n }\n\n private sanitizeGSM(text: string): string {\n return this.gsm ? sanitizeUnintendedUnicode(text) : text;\n }\n\n private handleChange(update: any): void {\n if (this.disabled) {\n return;\n }\n this.updateValue(update.target.value);\n this.fireEvent('change');\n }\n\n private handleContainerClick(): void {\n if (this.disabled) {\n return;\n }\n if (this.inputElement) {\n this.inputElement.click();\n }\n }\n\n private handleContainerFocus(): void {\n if (this.disabled) {\n return;\n }\n if (this.inputElement) {\n this.inputElement.focus();\n }\n }\n\n private handleInput(update: any): void {\n if (this.disabled) {\n return;\n }\n\n this.updateValue(update.target.value);\n this.fireEvent('input');\n }\n\n /** we just return the value since it should be a string */\n public serializeValue(value: any): string {\n return value;\n }\n\n public getParentModax(): Modax {\n let parent = this as HTMLElement;\n\n while (parent) {\n if (parent.parentElement) {\n parent = parent.parentElement;\n } else {\n parent = (parent as any).getRootNode().host;\n }\n\n if (!parent) {\n return null;\n }\n\n if (parent.tagName == 'TEMBA-MODAX') {\n return parent as Modax;\n }\n }\n }\n\n public getParentForm(): HTMLFormElement {\n let parent = this as HTMLElement;\n\n while (parent) {\n if (parent.parentElement) {\n parent = parent.parentElement;\n } else {\n parent = (parent as any).getRootNode().host;\n }\n\n if (!parent) {\n return null;\n }\n\n if (parent.tagName === 'FORM') {\n return parent as HTMLFormElement;\n }\n }\n }\n\n public click(): void {\n super.click();\n this.handleContainerClick();\n }\n\n public focus(): void {\n super.focus();\n this.handleContainerFocus();\n }\n\n // TODO make this a formelement and have contactsearch set the root\n public render(): TemplateResult {\n return this.renderField();\n }\n\n protected renderWidget() {\n const containerStyle: any = {};\n if (this.counter) {\n containerStyle['--counter-background'] =\n 'var(--color-widget-border, transparent)';\n }\n\n const clear =\n this.clearable && this.inputElement && this.inputElement.value\n ? html`<temba-icon\n name=\"x\"\n class=\"clear-icon\"\n @click=${this.handleClear}\n />`\n : null;\n\n let input = html`\n <input\n autofocus\n class=\"textinput\"\n autocomplete=\"off\"\n name=${this.name}\n type=\"${this.password \|\| this.type === InputType.Password\n ? 'password'\n : this.type}\"\n maxlength=\"${ifDefined(this.maxlength)}\"\n @change=${this.handleChange}\n @input=${this.handleInput}\n @blur=${this.blur}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n const input = this;\n\n if (this.submitOnEnter) {\n const parentModax = input.getParentModax();\n const parentForm = !parentModax ? input.getParentForm() : null;\n\n // if we don't have something to submit then bail\n if (!parentModax && !parentForm) {\n return false;\n }\n\n // don't submit disabled forms on enter\n if (parentModax && parentModax.disabled) {\n return false;\n }\n\n input.blur();\n\n // look for a form to submit\n window.setTimeout(function () {\n // first, look for a modax that contains us\n const modax = input.getParentModax();\n if (modax) {\n input.blur();\n\n modax.submit();\n } else {\n // otherwise, just look for a vanilla submit button\n const form = input.getParentForm();\n\n if (form) {\n const submitButton = form.querySelector(\n \"input[type='submit']\"\n ) as HTMLInputElement;\n if (submitButton) {\n submitButton.click();\n } else {\n form.submit();\n }\n }\n }\n }, 10);\n // this is needed for firefox, would be nice to\n // find a way to do this with a callback instead\n }\n }\n }}\n placeholder=${this.placeholder}\n .value=${this.value}\n .disabled=${this.disabled}\n />\n `;\n\n if (this.textarea) {\n input = html`\n <textarea\n class=\"textinput\"\n name=${this.name}\n maxlength=\"${ifDefined(this.maxlength)}\"\n placeholder=${this.placeholder}\n @change=${this.handleChange}\n @input=${this.handleInput}\n @blur=${this.blur}\n .value=${this.value}\n .disabled=${this.disabled}\n ></textarea>\n `;\n\n if (this.autogrow) {\n input = html` <div class=\"grow-wrap\">\n <div></div>\n ${input}\n </div>`;\n }\n }\n\n return html`\n <div\n class=\"input-container\"\n style=${styleMap(containerStyle)}\n @click=${this.handleContainerClick}\n >\n <slot name=\"prefix\"></slot>\n\n ${input} ${clear}\n <slot name=\"type\" class=\"type-icon\"\n >${this.type === InputType.Number\n ? html`<temba-icon name=\"number\"></temba-icon>`\n : null}</slot\n >\n <slot></slot>\n </div>\n `;\n }\n}\n"]}