@nyaruka/temba-components 0.113.0 → 0.114.0

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

@@ -13,62 +13,10 @@ import { Icon } from '../vectoricon';
 import { msg } from '@lit/localize';
 const LOOK_AHEAD = 20;
 export class Select extends FormElement {
-    constructor() {
-        super(...arguments);
-        this.hiddenInputs = [];
-        this.inputStyle = {};
-        this.multi = false;
-        this.searchOnFocus = false;
-        this.placeholder = '';
-        this.name = '';
-        this.nameKey = 'name';
-        this.valueKey = 'value';
-        this.queryParam = null;
-        this.input = '';
-        this.visibleOptions = [];
-        this.completionOptions = [];
-        this.quietMillis = 0;
-        this.searchable = false;
-        this.cache = true;
-        this.cacheKey = '';
-        this.focused = false;
-        this.disabled = false;
-        this.selectedIndex = -1;
-        this.anchorPosition = { left: 0, top: 0 };
-        this.tags = false;
-        this.flavor = 'default';
-        this.infoText = '';
-        this.values = [];
-        this.getName = (option) => option[this.nameKey || 'name'];
-        this.isMatch = (option, q) => {
-            const name = this.getName(option) || '';
-            return name.toLowerCase().indexOf(q) > -1;
-        };
-        this.getValue = (option) => option[this.valueKey || 'value'] || option.id;
-        this.sortFunction = null;
-        this.renderOptionDetail = () => html ``;
-        this.renderSelectedItem = this.renderSelectedItemDefault;
-        this.createArbitraryOption = this.createArbitraryOptionDefault;
-        this.getOptions = this.getOptionsDefault;
-        this.prepareOptions = (options) => options;
-        this.isComplete = this.isCompleteDefault;
-        this.staticOptions = [];
-        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 0;
-        };
-        this.next = null;
-        this.lruCache = lru(20, 60000);
-        this.getNameInternal = (option) => {
-            return this.getName(option);
-        };
-    }
     static get styles() {
         return css `
       :host {
+        --transition-speed: 0;
         font-family: var(--font-family);
         transition: all ease-in-out var(--transition-speed);
         display: inline;
@@ -81,6 +29,7 @@ export class Select extends FormElement {
       temba-options {
         --temba-options-font-size: var(--temba-select-selected-font-size);
         --icon-color: var(--color-text-dark);
+        --color-options-bg: #fff;
       }
 
       :host:focus {
@@ -361,8 +310,69 @@ export class Select extends FormElement {
       }
     `;
     }
+    constructor() {
+        super();
+        this.hiddenInputs = [];
+        this.inputStyle = {};
+        this.multi = false;
+        this.searchOnFocus = false;
+        this.placeholder = '';
+        this.name = '';
+        this.nameKey = 'name';
+        this.valueKey = 'value';
+        this.queryParam = null;
+        this.input = '';
+        this.visibleOptions = [];
+        this.completionOptions = [];
+        this.quietMillis = 0;
+        this.searchable = false;
+        this.cache = true;
+        this.cacheKey = '';
+        this.focused = false;
+        this.disabled = false;
+        this.selectedIndex = -1;
+        this.anchorPosition = { left: 0, top: 0 };
+        this.tags = false;
+        this.flavor = 'default';
+        this.infoText = '';
+        this.values = [];
+        this.getName = (option) => option[this.nameKey || 'name'];
+        this.isMatch = this.isMatchDefault;
+        this.getValue = (option) => option[this.valueKey || 'value'] || option.id;
+        this.sortFunction = null;
+        this.renderOptionDetail = () => html ``;
+        this.renderSelectedItem = this.renderSelectedItemDefault;
+        this.createArbitraryOption = this.createArbitraryOptionDefault;
+        this.getOptions = this.getOptionsDefault;
+        this.prepareOptions = this.prepareOptionsDefault;
+        this.isComplete = this.isCompleteDefault;
+        this.staticOptions = [];
+        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 0;
+        };
+        this.next = null;
+        this.lruCache = lru(20, 60000);
+        this.getNameInternal = (option) => {
+            return this.getName(option);
+        };
+        this.renderOptionDefault = this.renderOptionDefault.bind(this);
+        this.renderSelectedItemDefault = this.renderSelectedItemDefault.bind(this);
+        this.prepareOptionsDefault = this.prepareOptionsDefault.bind(this);
+        this.isMatchDefault = this.isMatchDefault.bind(this);
+    }
+    prepareOptionsDefault(options) {
+        return options;
+    }
+    isMatchDefault(option, q) {
+        const name = this.getName(option) || '';
+        return name.toLowerCase().indexOf(q) > -1;
+    }
     handleSlotChange() {
-        if (this.staticOptions.length === 0) {
+        if (this.staticOptions && this.staticOptions.length === 0) {
             for (const child of this.children) {
                 if (child.tagName === 'TEMBA-OPTION') {
                     const option = {};
@@ -370,10 +380,23 @@ export class Select extends FormElement {
                         option[attribute.name] = attribute.value;
                     }
                     if (option) {
+                        let selected = false;
+                        // if the option is marked as selected then accept it
+                        if (option['selected'] !== undefined) {
+                            delete option['selected'];
+                            selected = true;
+                        }
+                        // the option value might also match the widget value
+                        const selectValue = this.value || this.getAttribute('value');
+                        if (selectValue) {
+                            const optionValue = this.getValue(option);
+                            if (optionValue == selectValue) {
+                                selected = true;
+                            }
+                        }
                         this.staticOptions.push(option);
-                        if (child.getAttribute('selected') !== null ||
-                            this.getValue(option) == this.value) {
-                            if (this.getAttribute('multi') !== null) {
+                        if (selected) {
+                            if (this.multi) {
                                 this.addValue(option);
                             }
                             else {
@@ -384,43 +407,47 @@ export class Select extends FormElement {
                 }
             }
         }
-        this.checkSelectedOption();
         if (this.searchable && this.staticOptions.length === 0) {
             this.quietMillis = 200;
         }
     }
     checkSelectedOption() {
-        if (this.values.length === 0 && (!this.placeholder || this.value)) {
-            if (this.staticOptions.length == 0 && this.endpoint) {
-                const value = this.value;
-                // see if we need fetch to select an option
-                fetchResults(this.endpoint).then((results) => {
-                    if (results && results.length > 0) {
-                        if (value) {
-                            // if we started with a value, see if we can find it in the results
-                            const existing = results.find((option) => {
-                                return this.getValue(option) === value;
-                            });
-                            if (existing) {
-                                this.setValues([existing]);
-                                return;
-                            }
+        // see if we need fetch to select an option
+        if (this.value &&
+            this.values.length == 0 &&
+            this.staticOptions.length == 0 &&
+            this.endpoint) {
+            const value = this.value;
+            this.resolving = true;
+            fetchResults(this.endpoint).then((results) => {
+                if (results && results.length > 0) {
+                    if (value) {
+                        // if we started with a value, see if we can find it in the results
+                        const existing = results.find((option) => {
+                            return this.getValue(option) === value;
+                        });
+                        if (existing) {
+                            this.resolving = false;
+                            this.fetching = false;
+                            this.setValues([existing]);
+                            return;
                         }
-                        this.setValues([results[0]]);
                     }
-                });
+                    this.setValues([results[0]]);
+                    this.resolving = false;
+                }
+            });
+        }
+        else if (this.staticOptions.length > 0) {
+            if (this.getAttribute('multi') !== null) {
+                this.addValue(this.staticOptions[0]);
             }
-            else if (this.staticOptions.length > 0) {
-                if (this.getAttribute('multi') !== null) {
-                    this.addValue(this.staticOptions[0]);
+            else {
+                if (this.getAttribute('value')) {
+                    this.setSelectedValue(this.getAttribute('value'));
                 }
                 else {
-                    if (this.getAttribute('value')) {
-                        this.setSelectedValue(this.getAttribute('value'));
-                    }
-                    else {
-                        this.setValues([this.staticOptions[0]]);
-                    }
+                    this.setValues([this.staticOptions[0]]);
                 }
             }
         }
@@ -430,31 +457,30 @@ export class Select extends FormElement {
         this.anchorElement = this.shadowRoot.querySelector('.select-container');
         this.anchorExpressions = this.shadowRoot.querySelector('#anchor');
         this.shadowRoot.addEventListener('slotchange', this.handleSlotChange.bind(this));
-        this.checkSelectedOption();
     }
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        if (changedProperties.has('sorted')) {
+    updated(changes) {
+        super.updated(changes);
+        if (changes.has('sorted')) {
             this.sortFunction = this.sorted ? this.alphaSort : null;
         }
-        if (changedProperties.has('values')) {
+        if (changes.has('value')) {
+            if (this.value && !this.values.length) {
+                this.setSelectedValue(this.value);
+            }
+        }
+        if (changes.has('values')) {
             this.updateInputs();
-            if (this.multi ||
-                this.values.length === 1 ||
-                // fire change if being cleared
-                (this.values.length == 0 &&
-                    changedProperties.get('values') &&
-                    changedProperties.get('values').length > 0)) {
+            if (this.hasChanges(changes.get('values'))) {
                 this.fireEvent('change');
             }
         }
         // if our cache key changes, clear it out
-        if (changedProperties.has('cacheKey')) {
+        if (changes.has('cacheKey')) {
             this.lruCache.clear();
         }
-        if (changedProperties.has('input') &&
-            !changedProperties.has('values') &&
-            !changedProperties.has('options') &&
+        if (changes.has('input') &&
+            !changes.has('values') &&
+            !changes.has('options') &&
             this.focused) {
             if (this.lastQuery) {
                 window.clearTimeout(this.lastQuery);
@@ -468,14 +494,13 @@ export class Select extends FormElement {
                 }
             }, this.quietMillis);
         }
-        if (this.endpoint && changedProperties.has('fetching')) {
+        if (this.endpoint && changes.has('fetching')) {
             if (!this.fetching && !this.isPastFetchThreshold()) {
                 this.fireCustomEvent(CustomEventType.FetchComplete);
             }
         }
         // if our cursor changed, lets make sure our scrollbox is showing it
-        if ((changedProperties.has('cursorIndex') ||
-            changedProperties.has('visibleOptions')) &&
+        if ((changes.has('cursorIndex') || changes.has('visibleOptions')) &&
             this.endpoint &&
             !this.fetching) {
             if (this.isPastFetchThreshold()) {
@@ -487,10 +512,6 @@ export class Select extends FormElement {
                 }
             }
         }
-        // if they set an inital value, look through our static options for it
-        if (changedProperties.has('value') && this.value && !this.values.length) {
-            this.setSelectedValue(this.value);
-        }
         // default to the first option if we don't have a placeholder
         if (this.values.length === 0 &&
             !this.placeholder &&
@@ -498,6 +519,25 @@ export class Select extends FormElement {
             this.setValues([this.staticOptions[0]]);
         }
     }
+    hasChanges(prev) {
+        if (prev === undefined) {
+            return false;
+        }
+        let prevValues = undefined;
+        if (prev !== undefined) {
+            prevValues = (prev || [])
+                .map((option) => {
+                return this.getValue(option);
+            })
+                .join(',');
+        }
+        const newValues = (this.values || [])
+            .map((option) => {
+            return this.getValue(option);
+        })
+            .join(',');
+        return prevValues !== newValues;
+    }
     setSelectedValue(value) {
         if (this.staticOptions.length > 0) {
             const existing = this.staticOptions.find((option) => {
@@ -507,6 +547,9 @@ export class Select extends FormElement {
                 this.setValues([existing]);
             }
         }
+        else {
+            this.checkSelectedOption();
+        }
     }
     updateInputs() {
         for (let ele = null; (ele = this.hiddenInputs.pop());) {
@@ -560,6 +603,8 @@ export class Select extends FormElement {
             (this.cursorIndex || 0) > this.visibleOptions.length - LOOK_AHEAD);
     }
     handleOptionSelection(event) {
+        event.preventDefault();
+        event.stopPropagation();
         const selected = event.detail.selected;
         // check if we should post it
         if (selected.post && this.endpoint) {
@@ -607,7 +652,7 @@ export class Select extends FormElement {
         return null;
     }
     open() {
-        this.requestUpdate('input');
+        this.shadowRoot.querySelector('.select-container').click();
     }
     isOpen() {
         return this.visibleOptions.length > 0;
@@ -698,10 +743,6 @@ export class Select extends FormElement {
         this.completionOptions = [];
         if (!this.fetching) {
             this.fetching = true;
-            // make sure we cancel any previous request
-            // if (this.cancelToken) {
-            // this.cancelToken.cancel();
-            // }
             const options = [...this.staticOptions];
             const q = (query || '').trim().toLowerCase();
             if (this.tags && q) {
@@ -815,9 +856,6 @@ export class Select extends FormElement {
     handleFocus() {
         if (!this.focused && this.visibleOptions.length === 0) {
             this.focused = true;
-            if (this.searchOnFocus && !this.removingSelection) {
-                this.requestUpdate('input');
-            }
         }
     }
     handleBlur() {
@@ -941,30 +979,33 @@ export class Select extends FormElement {
         ];
     }
     handleArrowClick(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        if (this.visibleOptions.length > 0) {
-            this.visibleOptions = [];
-        }
-        else {
-            this.handleContainerClick(event);
+        if (this.isOpen()) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.blur();
         }
     }
-    renderSelectedItemDefault(option) {
+    renderOptionDefault(option) {
         if (!option) {
             return null;
         }
+        // special case for icons on any option type
+        const icon = option.icon;
         return html `
       <div class="option-name" style="display:flex">
-        ${option.icon
+        ${icon
             ? html `<temba-icon
-              name="${option.icon}"
+              name="${icon}"
               style="margin-right:0.5em;"
             ></temba-icon>`
             : null}<span>${this.getName(option)}</span>
       </div>
     `;
     }
+    renderSelectedItemDefault(option) {
+        const renderFn = this.renderOption || this.renderOptionDefault;
+        return renderFn(option, true);
+    }
     serializeValue(value) {
         // static options just use their value
         if (!this.jsonValue && (this.staticOptions.length > 0 || this.tags)) {
@@ -974,8 +1015,8 @@ export class Select extends FormElement {
     }
     setSelection(value) {
         for (const option of this.staticOptions) {
-            if (this.getValue(option.value) === value) {
-                if (this.values.length === 0 || this.values[0].value !== '' + value) {
+            if (this.getValue(option) === value) {
+                if (this.values.length === 0 || this.values[0].value != '' + value) {
                     this.setValues([option]);
                 }
                 return;
@@ -990,29 +1031,37 @@ export class Select extends FormElement {
             this.visibleOptions = [];
             this.requestUpdate();
         }
+        this.fireCustomEvent(CustomEventType.Selection, {
+            selected: null
+        });
     }
     setValues(values) {
+        const oldValues = this.values;
         this.values = values;
-        this.requestUpdate('values');
+        this.requestUpdate('values', oldValues);
     }
     addValue(value) {
+        const oldValues = [...this.values];
         this.values.push(value);
-        this.requestUpdate('values');
+        this.requestUpdate('values', oldValues);
     }
     removeValue(valueToRemove) {
+        const oldValues = [...this.values];
         const idx = this.values.indexOf(valueToRemove);
         if (idx > -1) {
             this.values.splice(idx, 1);
         }
-        this.requestUpdate('values');
+        this.requestUpdate('values', oldValues);
     }
     popValue() {
+        const oldValues = [...this.values];
         this.values.pop();
-        this.requestUpdate('values');
+        this.requestUpdate('values', oldValues);
     }
     clear() {
+        const oldValues = this.values;
         this.values = [];
-        this.requestUpdate('values');
+        this.requestUpdate('values', oldValues);
     }
     render() {
         const placeholder = this.values.length === 0 ? this.placeholder : '';
@@ -1081,11 +1130,15 @@ export class Select extends FormElement {
           class="select-container ${classes}"
           @click=${this.handleContainerClick}
         > 
-          
-          <div class="left-side">
+          <div class="left-side" >
           <slot name="prefix"></slot>
-            <div class="selected">
-              ${!this.multi ? input : null}
+            <div class="selected" >
+              ${this.resolving
+            ? html `<temba-loading
+                      style="margin-left:1em"
+                    ></temba-loading>`
+            : null}
+              ${!this.multi && !this.resolving ? input : null}
               ${this.values.map((selected, index) => html `
                   <div
                     class="selected-item ${index === this.selectedIndex
@@ -1097,12 +1150,6 @@ export class Select extends FormElement {
                           <div
                             class="remove-item"
                             style="margin-top:1px"
-                            @mousedown=${() => {
-                this.removingSelection = true;
-            }}
-                            @mouseup=${() => {
-                this.removingSelection = false;
-            }}
                             @click=${(evt) => {
                 evt.preventDefault();
                 evt.stopPropagation();
@@ -1129,7 +1176,7 @@ export class Select extends FormElement {
           <slot name="right"></slot>
           ${!this.tags
             ? html `<div
-                  class="right-side"
+                  class="right-side arrow"
                   style="display:block;margin-right:5px"
                   @click=${this.handleArrowClick}
                 >
@@ -1153,13 +1200,13 @@ export class Select extends FormElement {
     .cursorIndex=${this.cursorIndex}
     .renderOptionDetail=${this.renderOptionDetail}
     .renderOptionName=${this.renderOptionName}
-    .renderOption=${this.renderOption}
+    .renderOption=${this.renderOption || this.renderOptionDefault}
     .anchorTo=${this.anchorElement}
     .options=${this.visibleOptions}
     .spaceSelect=${this.spaceSelect}
     .nameKey=${this.nameKey}
     .getName=${this.getNameInternal}
-    static-width=${this.optionWidth}
+    ?static-width=${this.optionWidth}
     ?anchor-right=${this.anchorRight}
     ?visible=${this.visibleOptions.length > 0}
     ></temba-options>
@@ -1234,6 +1281,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], Select.prototype, "fetching", void 0);
+__decorate([
+    property({ type: Boolean })
+], Select.prototype, "resolving", void 0);
 __decorate([
     property({ type: Boolean })
 ], Select.prototype, "searchable", void 0);