@nyaruka/temba-components 0.129.8 → 0.129.10

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

@@ -5,7 +5,7 @@ import { property, state } from 'lit/decorators.js';
 import { getUrl, getClasses, fetchResults, postJSON } from '../../utils';
 import '../../display/Options';
 import '../../list/SortableList';
-import { FormElement } from '../../form/FormElement';
+import { FieldElement } from '../../form/FieldElement';
 import { lru } from 'tiny-lru';
 import { CustomEventType } from '../../interfaces';
 import { renderCompletionOption, updateInputElementWithCompletion, executeCompletionQuery } from '../../excellent/helpers';
@@ -13,9 +13,11 @@ import { styleMap } from 'lit-html/directives/style-map.js';
 import { Icon } from '../../Icons';
 import { msg } from '@lit/localize';
 const LOOK_AHEAD = 20;
-export class Select extends FormElement {
+export class Select extends FieldElement {
     static get styles() {
         return css `
+      ${super.styles}
+
       :host {
         --transition-speed: 0;
         font-family: var(--font-family);
@@ -198,6 +200,7 @@ export class Select extends FormElement {
 
       .multi temba-sortable-list {
         margin: 0 !important;
+        flex-grow: 1;
       }
 
       input {
@@ -231,6 +234,12 @@ export class Select extends FormElement {
 
       .multi .input-wrapper {
         margin-left: 2px !important;
+        margin-right: 2px !important;
+        margin-top: 2px;
+        margin-bottom: 2px;
+        flex-shrink: 0;
+        min-width: 100px;
+        align-self: center;
       }
 
       .input-wrapper:focus-within .placeholder {
@@ -266,11 +275,6 @@ export class Select extends FormElement {
         box-shadow: none !important;
       }
 
-      .multi .input-wrapper {
-        flex-shrink: 0;
-        min-width: 100px;
-      }
-
       .input-wrapper .searchbox {
       }
 
@@ -286,6 +290,17 @@ export class Select extends FormElement {
         margin-left: 6px;
       }
 
+      .empty .placeholder {
+        display: block;
+      }
+
+      .multi .placeholder {
+        display: block;
+        margin: 2px 2px;
+        padding: 2px 8px;
+        align-self: center;
+      }
+
       .footer {
         padding: 5px 10px;
         background: var(--color-primary-light);
@@ -298,7 +313,7 @@ export class Select extends FormElement {
       .small {
         --temba-select-selected-padding: 6px;
         --temba-select-selected-line-height: 12px;
-        --temba-select-selected-font-size: 12px;
+        --temba-select-selected-font-size: 14px;
         --temba-select-min-height: 2.28em;
       }
 
@@ -331,6 +346,14 @@ export class Select extends FormElement {
       }
     `;
     }
+    // Override the setter to ensure values is always an array
+    set values(newValues) {
+        this._values = Array.isArray(newValues) ? newValues : [];
+        this.requestUpdate('values');
+    }
+    get values() {
+        return this._values || [];
+    }
     constructor() {
         super();
         this.hiddenInputs = [];
@@ -361,8 +384,10 @@ export class Select extends FormElement {
         this.emails = false;
         this.flavor = 'default';
         this.infoText = '';
-        this.values = [];
-        this.getName = (option) => option[this.nameKey || 'name'];
+        this._values = [];
+        this.getName = (option) => {
+            return option[this.nameKey || 'name'];
+        };
         this.isMatch = this.isMatchDefault;
         this.getValue = (option) => option[this.valueKey || 'value'] || option.id;
         this.sortFunction = null;
@@ -377,14 +402,16 @@ export class Select extends FormElement {
         this.alphaSort = (a, b) => {
             // by default, all endpoint values are sorted by name
             if (this.endpoint) {
-                return this.getName(a).localeCompare(this.getName(b));
+                return this.getNameInternal(a).localeCompare(this.getNameInternal(b));
             }
             return 0;
         };
         this.next = null;
         this.lruCache = lru(20, 60000);
         this.getNameInternal = (option) => {
-            return this.getName(option);
+            return this.getName
+                ? this.getName(option)
+                : option[this.nameKey || 'name'] || '';
         };
         this.renderOptionDefault = this.renderOptionDefault.bind(this);
         this.renderSelectedItemDefault = this.renderSelectedItemDefault.bind(this);
@@ -396,7 +423,7 @@ export class Select extends FormElement {
         return options;
     }
     isMatchDefault(option, q) {
-        const name = this.getName(option) || '';
+        const name = this.getNameInternal(option) || '';
         return name.toLowerCase().indexOf(q) > -1;
     }
     handleSlotChange() {
@@ -1164,7 +1191,7 @@ export class Select extends FormElement {
               name="${icon}"
               style="margin-right:0.5em;"
             ></temba-icon>`
-            : null}<span>${this.getName(option)}</span>
+            : null}<span>${this.getNameInternal(option)}</span>
       </div>
     `;
     }
@@ -1282,11 +1309,13 @@ export class Select extends FormElement {
             }
         }
     }
-    render() {
+    renderWidget() {
         const placeholder = this.values.length === 0 ? this.placeholder : '';
-        const placeholderDiv = html `
-      <div class="placeholder">${placeholder}</div>
-    `;
+        // Single unified placeholder - shows when empty and (not focused OR not searchable)
+        const shouldShowPlaceholder = this.values.length === 0 && (!this.focused || !this.searchable);
+        const placeholderElement = shouldShowPlaceholder
+            ? html `<div class="placeholder">${placeholder}</div>`
+            : null;
         const clear = this.clearable && this.values.length > 0 && !this.isMultiMode
             ? html `<temba-icon
             name="${Icon.select_clear}"
@@ -1326,10 +1355,9 @@ export class Select extends FormElement {
               .value=${this.input}
             />
             <div id="anchor" style=${styleMap(anchorStyles)}></div>
-            ${placeholderDiv}
           </div>
         `
-            : placeholderDiv;
+            : null;
         const items = html `${!this.isMultiMode && !this.resolving ? input : null}
     ${this.isMultiMode && this.values.length > 1
             ? html `
@@ -1400,9 +1428,10 @@ export class Select extends FormElement {
                   ${this.renderSelectedItem(selected)}
                 </div>
               `)}
+            ${this.searchable && this.focused ? input : null}
           </temba-sortable-list>
         `
-            : this.values.map((selected, index) => html `
+            : html `${this.values.map((selected, index) => html `
             <div
               class="selected-item ${index === this.selectedIndex
                 ? 'focused'
@@ -1449,18 +1478,9 @@ export class Select extends FormElement {
                 : null}
             </div>
           `)}
-    ${this.isMultiMode ? input : null}`;
+        ${this.isMultiMode && this.searchable && this.focused ? input : null}
+        ${placeholderElement}`}`;
         return html `
-            
-      <temba-field
-        name=${this.name}
-        .label=${this.label}
-        .helpText=${this.helpText}
-        .errors=${this.errors}
-        .widgetOnly=${this.widgetOnly}
-        .hideErrors=${this.hideErrors}
-        ?disabled=${this.disabled}
-      >
         <slot></slot>
         <div class="wrapper-bg">
         
@@ -1544,8 +1564,10 @@ export class Select extends FormElement {
             </div>`
             : null}
     </temba-options>
-  </temba-field>
-  `;
+    `;
+    }
+    render() {
+        return this.renderField();
     }
 }
 __decorate([
@@ -1670,7 +1692,7 @@ __decorate([
 ], Select.prototype, "infoText", void 0);
 __decorate([
     property({ type: Array })
-], Select.prototype, "values", void 0);
+], Select.prototype, "values", null);
 __decorate([
     property({ type: Object })
 ], Select.prototype, "selection", void 0);