@nyaruka/temba-components 0.129.3 → 0.129.5

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

@@ -31,6 +31,10 @@ export class Select extends FormElement {
         --temba-options-font-size: var(--temba-select-selected-font-size);
         --icon-color: var(--color-text-dark);
         --color-options-bg: #fff;
+        /* Always use normal border colors for options popup, even when select is in error state */
+        --color-widget-border: #ddd;
+        --color-focus: #007bff;
+        --widget-box-shadow-focused: 0 0 0 3px rgba(0, 123, 255, 0.25);
       }
 
       :host:focus {
@@ -354,6 +358,7 @@ export class Select extends FormElement {
         this.selectedIndex = -1;
         this.anchorPosition = { left: 0, top: 0 };
         this.tags = false;
+        this.emails = false;
         this.flavor = 'default';
         this.infoText = '';
         this.values = [];
@@ -419,7 +424,7 @@ export class Select extends FormElement {
                         }
                         this.staticOptions.push(option);
                         if (selected) {
-                            if (this.multi) {
+                            if (this.isMultiMode) {
                                 this.addValue(option);
                             }
                             else {
@@ -537,9 +542,11 @@ export class Select extends FormElement {
                             }
                         }
                         // remove any arbitrary values
-                        this.values = this.values.filter((value) => {
-                            return !value.arbitrary;
-                        });
+                        for (let i = this.values.length - 1; i >= 0; i--) {
+                            if (this.values[i].arbitrary) {
+                                this.values.splice(i, 1);
+                            }
+                        }
                         // reset our cache
                         this.cacheKey = new Date().getTime().toString();
                         this.fireEvent('change');
@@ -639,9 +646,13 @@ export class Select extends FormElement {
         else {
             const name = this.getAttribute('name');
             if (name) {
-                if (!this.multi && this.values.length === 1) {
+                if (!this.isMultiMode && this.values.length === 1) {
                     this.selection = this.values[0];
                     this.value = this.serializeValue(this.values[0]);
+                    // Ensure FormElement internals are updated
+                    if (this.internals) {
+                        this.internals.setFormValue(this.value);
+                    }
                 }
                 else {
                     if (this.inputRoot.parentElement) {
@@ -659,13 +670,13 @@ export class Select extends FormElement {
         }
     }
     setSelectedOption(option) {
-        if (this.multi) {
+        if (this.isMultiMode) {
             this.addValue(option);
         }
         else {
             this.setValues([option]);
         }
-        if (!this.multi || !this.searchable) {
+        if (!this.isMultiMode || !this.searchable) {
             this.blur();
             this.focused = false;
         }
@@ -682,7 +693,7 @@ export class Select extends FormElement {
             (this.cursorIndex || 0) > this.visibleOptions.length - LOOK_AHEAD);
     }
     handleOptionSelection(event) {
-        if (this.multi &&
+        if (this.isMultiMode &&
             this.maxItems > 0 &&
             this.values.length >= this.maxItems) {
             this.infoText = this.maxItemsText;
@@ -734,9 +745,24 @@ export class Select extends FormElement {
         this.removeValue(selectionToRemove);
         this.visibleOptions = [];
     }
-    createArbitraryOptionDefault() {
+    createArbitraryOptionDefault(input, _options) {
+        if (this.emails && input && this.isValidEmail(input)) {
+            return { name: input, value: input };
+        }
+        if (this.tags && input) {
+            return { name: input, value: input };
+        }
         return null;
     }
+    isValidEmail(email) {
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        return emailRegex.test(email);
+    }
+    // Helper method to determine if this select should behave as multi-select
+    // Returns true if multi is explicitly set OR if emails mode is enabled
+    get isMultiMode() {
+        return this.multi || this.emails;
+    }
     open() {
         this.shadowRoot.querySelector('.select-container').click();
     }
@@ -788,7 +814,7 @@ export class Select extends FormElement {
         // filter out any options already selected by id
         // TODO: should maybe be doing a deep equals here with option to optimize
         if (this.values.length > 0) {
-            if (this.multi) {
+            if (this.isMultiMode) {
                 options = options.filter((option) => !this.values.find((selected) => this.getValue(selected) === this.getValue(option)));
             }
             else {
@@ -802,7 +828,7 @@ export class Select extends FormElement {
                 this.requestUpdate('cursorIndex');
             }
         }
-        if (this.multi &&
+        if (this.isMultiMode &&
             this.maxItems > 0 &&
             this.values.length >= this.maxItems) {
             options = [];
@@ -842,6 +868,12 @@ export class Select extends FormElement {
                     options.splice(0, 0, { name: query, value: query });
                 }
             }
+            if (this.emails && q) {
+                if (this.isValidEmail(q) &&
+                    !options.find((option) => this.getValue(option) && this.getValue(option).toLowerCase() === q)) {
+                    options.splice(0, 0, { name: query, value: query });
+                }
+            }
             if (this.endpoint) {
                 let url = this.endpoint;
                 if (next) {
@@ -868,7 +900,7 @@ export class Select extends FormElement {
                     }
                 }
                 const cache = this.lruCache.get(url);
-                if (this.cache && !this.tags && cache) {
+                if (this.cache && !this.tags && !this.emails && cache) {
                     if (page === 0 && !this.next) {
                         this.cursorIndex = 0;
                         this.setVisibleOptions([...options, ...cache.options]);
@@ -885,7 +917,7 @@ export class Select extends FormElement {
                 if (this.searchable && !this.queryParam) {
                     fetchResults(url).then((results) => {
                         results = this.prepareOptions(results);
-                        if (this.cache && !this.tags) {
+                        if (this.cache && !this.tags && !this.emails) {
                             this.lruCache.set(url, {
                                 options: results,
                                 complete: true,
@@ -922,7 +954,7 @@ export class Select extends FormElement {
                             }
                             this.complete = this.isComplete(results, response);
                         }
-                        if (this.cache && !this.tags) {
+                        if (this.cache && !this.tags && !this.emails) {
                             this.lruCache.set(url, {
                                 options: results,
                                 complete: this.complete,
@@ -960,7 +992,7 @@ export class Select extends FormElement {
             this.visibleOptions = [];
             this.cursorIndex = 0;
         }
-        if (this.multi &&
+        if (this.isMultiMode &&
             this.maxItems > 0 &&
             this.values.length >= this.maxItems) {
             this.infoText = '';
@@ -977,7 +1009,7 @@ export class Select extends FormElement {
             value: ele.value,
             expression: true
         };
-        if (this.multi) {
+        if (this.isMultiMode) {
             if (!this.values.find((option) => {
                 return (option.expression &&
                     option.value &&
@@ -992,7 +1024,7 @@ export class Select extends FormElement {
             this.setValues([expression]);
         }
         this.input = '';
-        if (!this.multi) {
+        if (!this.isMultiMode) {
             this.blur();
         }
     }
@@ -1003,6 +1035,18 @@ export class Select extends FormElement {
             this.completionOptions.length === 0 &&
             this.input.indexOf('@') > -1) {
             this.addInputAsValue();
+            return;
+        }
+        // if we are in email mode and have a valid email, add it
+        if (evt.key === 'Enter' &&
+            this.emails &&
+            this.input &&
+            this.isValidEmail(this.input.trim()) &&
+            this.visibleOptions.length === 0) {
+            evt.preventDefault();
+            const emailOption = { name: this.input.trim(), value: this.input.trim() };
+            this.setSelectedOption(emailOption);
+            return;
         }
         // see if we should open our options on a key event
         if (evt.key === 'Enter' ||
@@ -1017,7 +1061,7 @@ export class Select extends FormElement {
             }
         }
         // focus our last item on delete
-        if (this.multi && evt.key === 'Backspace' && !this.input) {
+        if (this.isMultiMode && evt.key === 'Backspace' && !this.input) {
             if (this.visibleOptions.length > 0) {
                 this.visibleOptions = [];
                 return;
@@ -1130,7 +1174,8 @@ export class Select extends FormElement {
     }
     serializeValue(value) {
         // static options just use their value
-        if (!this.jsonValue && (this.staticOptions.length > 0 || this.tags)) {
+        if (!this.jsonValue &&
+            (this.staticOptions.length > 0 || this.isMultiMode)) {
             return value.value;
         }
         return super.serializeValue(value);
@@ -1159,13 +1204,17 @@ export class Select extends FormElement {
     }
     setValues(values) {
         const oldValues = this.values;
-        this.values = values;
+        this.values.splice(0, this.values.length, ...values);
         this.requestUpdate('values', oldValues);
+        this.updateInputs();
+        this.fireEvent('change');
     }
     addValue(value) {
         const oldValues = [...this.values];
         this.values.push(value);
         this.requestUpdate('values', oldValues);
+        this.updateInputs();
+        this.fireEvent('change');
     }
     removeValue(valueToRemove) {
         const oldValues = [...this.values];
@@ -1186,17 +1235,23 @@ export class Select extends FormElement {
         }
         this.requestUpdate('values', oldValues);
         this.infoText = '';
+        this.updateInputs();
+        this.fireEvent('change');
     }
     popValue() {
         const oldValues = [...this.values];
         this.values.pop();
         this.requestUpdate('values', oldValues);
         this.infoText = '';
+        this.updateInputs();
+        this.fireEvent('change');
     }
     clear() {
         const oldValues = this.values;
-        this.values = [];
+        this.values.splice(0, this.values.length);
         this.requestUpdate('values', oldValues);
+        this.updateInputs();
+        this.fireEvent('change');
     }
     shouldShowEmptyMessage() {
         return (this.attemptedOpen &&
@@ -1218,10 +1273,12 @@ export class Select extends FormElement {
                 fromIdx < this.values.length &&
                 toIdx < this.values.length) {
                 const oldValues = [...this.values];
-                // Move the item from fromIdx to toIdx
+                // Move the item using splice operations directly on this.values
                 const movedItem = this.values.splice(fromIdx, 1)[0];
                 this.values.splice(toIdx, 0, movedItem);
                 this.requestUpdate('values', oldValues);
+                this.updateInputs();
+                this.fireEvent('change');
             }
         }
     }
@@ -1230,7 +1287,7 @@ export class Select extends FormElement {
         const placeholderDiv = html `
       <div class="placeholder">${placeholder}</div>
     `;
-        const clear = this.clearable && this.values.length > 0 && !this.multi
+        const clear = this.clearable && this.values.length > 0 && !this.isMultiMode
             ? html `<temba-icon
             name="${Icon.select_clear}"
             size="1.1"
@@ -1239,8 +1296,8 @@ export class Select extends FormElement {
           />`
             : null;
         const classes = getClasses({
-            multi: this.multi,
-            single: !this.multi,
+            multi: this.isMultiMode,
+            single: !this.isMultiMode,
             searchable: this.searchable,
             empty: this.values.length === 0,
             options: this.visibleOptions.length > 0,
@@ -1273,8 +1330,8 @@ export class Select extends FormElement {
           </div>
         `
             : placeholderDiv;
-        const items = html `${!this.multi && !this.resolving ? input : null}
-    ${this.multi && this.values.length > 1
+        const items = html `${!this.isMultiMode && !this.resolving ? input : null}
+    ${this.isMultiMode && this.values.length > 1
             ? html `
           <temba-sortable-list
             horizontal
@@ -1314,7 +1371,7 @@ export class Select extends FormElement {
                 : ''}
                               "
                 >
-                  ${this.multi
+                  ${this.isMultiMode
                 ? html `
                         <div
                           class="remove-item"
@@ -1361,7 +1418,7 @@ export class Select extends FormElement {
                 : ''}
                           "
             >
-              ${this.multi
+              ${this.isMultiMode
                 ? html `
                     <div
                       class="remove-item"
@@ -1387,12 +1444,12 @@ export class Select extends FormElement {
                     </div>
                   `
                 : null}
-              ${!this.input || this.multi
+              ${!this.input || this.isMultiMode
                 ? this.renderSelectedItem(selected)
                 : null}
             </div>
           `)}
-    ${this.multi ? input : null}`;
+    ${this.isMultiMode ? input : null}`;
         return html `
             
       <temba-field
@@ -1428,7 +1485,7 @@ export class Select extends FormElement {
           ${clear}
 
           <slot name="right"></slot>
-          ${!this.tags
+          ${!this.tags && !this.emails
             ? html `<div
                   class="right-side arrow"
                   style="display:block;margin-right:5px"
@@ -1587,6 +1644,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], Select.prototype, "tags", void 0);
+__decorate([
+    property({ type: Boolean })
+], Select.prototype, "emails", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'space_select' })
 ], Select.prototype, "spaceSelect", void 0);