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

@nyaruka/temba-components 0.129.6 → 0.129.8

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 (177) hide show

package/out-tsc/src/form/MessageEditor.js ADDED Viewed

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

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

@@ -0,0 +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 \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"]}

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

@@ -161,7 +161,17 @@ export class TextInput extends FormElement {
                 root = document;
             }
             this.counterElement = root.querySelector(this.counter);
-            this.counterElement.text = this.value;
+            if (this.counterElement) {
+                this.counterElement.text = this.value;
+            }
+        }
+    }
+    updateAutogrowSize() {
+        if (this.textarea && this.autogrow) {
+            const autogrow = this.shadowRoot.querySelector('.grow-wrap > div');
+            if (autogrow) {
+                autogrow.innerText = this.value + String.fromCharCode(10);
+            }
         }
     }
     updated(changes) {
@@ -170,10 +180,7 @@ export class TextInput extends FormElement {
             if (changes.get('value') !== undefined) {
                 this.fireEvent('change');
             }
-            if (this.textarea && this.autogrow) {
-                const autogrow = this.shadowRoot.querySelector('.grow-wrap > div');
-                autogrow.innerText = this.value + String.fromCharCode(10);
-            }
+            this.updateAutogrowSize();
             if (this.cursorStart > -1 && this.cursorEnd > -1) {
                 this.inputElement.setSelectionRange(this.cursorStart, this.cursorEnd);
                 this.cursorStart = -1;

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 this.counterElement.text = this.value;\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 if (this.textarea && this.autogrow) {\n const autogrow = this.shadowRoot.querySelector(\n '.grow-wrap > div'\n ) as HTMLDivElement;\n autogrow.innerText = this.value + String.fromCharCode(10);\n }\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 { 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"]}

package/out-tsc/src/form/select/Select.js CHANGED Viewed

@@ -57,7 +57,7 @@ export class Select extends FormElement {
         background: rgba(100, 100, 100, 0.05);
       }
-      . selected-item.multi .remove-item {
+      .selected-item.multi .remove-item {
         display: none;
       }
@@ -296,10 +296,10 @@ export class Select extends FormElement {
       }
       .small {
-        --temba-select-selected-padding: 7px;
-        --temba-select-selected-line-height: 13px;
+        --temba-select-selected-padding: 6px;
+        --temba-select-selected-line-height: 12px;
         --temba-select-selected-font-size: 12px;
-        --search-input-height: 7px !important;
+        --temba-select-min-height: 2.28em;
       }
       .info-text {