| | |
| | | const VARIANT_LABEL_INLINE = 'label-inline'; |
| | | const VARIANT_LABEL_HIDDEN = 'label-hidden'; |
| | | |
| | | const REGEX_SOSL_RESERVED = |
| | | /(\?|&|\||!|\{|\}|\[|\]|\(|\)|\^|~|\*|:|"|\+|-|\\)/g; |
| | | const REGEX_SOSL_RESERVED = /(\?|&|\||!|\{|\}|\[|\]|\(|\)|\^|~|\*|:|"|\+|-|\\)/g; |
| | | const REGEX_EXTRA_TRAP = /(\$|\\)/g; |
| | | |
| | | export default class LexLookup extends NavigationMixin(LightningElement) { |
| | |
| | | _curSelection = []; |
| | | _focusedResultIndex = null; |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | // PUBLIC FUNCTIONS AND GETTERS/SETTERS |
| | | @api |
| | | set selection(initialSelection) { |
| | | if (initialSelection) { |
| | | this._curSelection = Array.isArray(initialSelection) |
| | | ? initialSelection |
| | | : [initialSelection]; |
| | | this._curSelection = Array.isArray(initialSelection) ? initialSelection : [initialSelection]; |
| | | this.processSelectionUpdate(false); |
| | | } |
| | | } |
| | |
| | | let resultsLocal = JSON.parse(JSON.stringify(results)); |
| | | // Remove selected items from search results |
| | | const selectedIds = this._curSelection.map((sel) => sel.id); |
| | | resultsLocal = resultsLocal.filter( |
| | | (result) => selectedIds.indexOf(result.id) === -1 |
| | | ); |
| | | resultsLocal = resultsLocal.filter((result) => selectedIds.indexOf(result.id) === -1); |
| | | // Format results |
| | | const cleanSearchTerm = this._searchTerm |
| | | .replace(REGEX_SOSL_RESERVED, '.?') |
| | | .replace(REGEX_EXTRA_TRAP, '\\$1'); |
| | | const cleanSearchTerm = this._searchTerm.replace(REGEX_SOSL_RESERVED, '.?').replace(REGEX_EXTRA_TRAP, '\\$1'); |
| | | const regex = new RegExp(`(${cleanSearchTerm})`, 'gi'); |
| | | this._searchResults = resultsLocal.map((result) => { |
| | | // Format title and subtitle |
| | |
| | | result, |
| | | state: {}, |
| | | get classes() { |
| | | let cls = |
| | | 'slds-media slds-media_center slds-listbox__option slds-listbox__option_entity'; |
| | | let cls = 'slds-media slds-media_center slds-listbox__option slds-listbox__option_entity'; |
| | | if (result.subtitleFormatted) { |
| | | cls += ' slds-listbox__option_has-meta'; |
| | | } |
| | |
| | | |
| | | @api |
| | | getSelection() { |
| | | console.log('get selection:' + this._curSelection); |
| | | console.log('get selection:' +this._curSelection); |
| | | return this._curSelection; |
| | | } |
| | | |
| | |
| | | this.template.querySelector('input')?.blur(); |
| | | } |
| | | |
| | | connectedCallback() { |
| | | connectedCallback(){ |
| | | console.log('LexLookup accountValue = ' + this.accountValue); |
| | | console.log( |
| | | 'isDisabledForDealerText = ' + this.isDisabledForDealerText |
| | | ); |
| | | console.log('isDisabledForDealerText = ' + this.isDisabledForDealerText); |
| | | } |
| | | |
| | | // INTERNAL FUNCTIONS |
| | |
| | | this._searchTerm = newSearchTerm; |
| | | |
| | | // Compare clean new search term with current one and abort if identical |
| | | const newCleanSearchTerm = newSearchTerm |
| | | .trim() |
| | | .replace(REGEX_SOSL_RESERVED, '?') |
| | | .toLowerCase(); |
| | | const newCleanSearchTerm = newSearchTerm.trim().replace(REGEX_SOSL_RESERVED, '?').toLowerCase(); |
| | | if (this._cleanSearchTerm === newCleanSearchTerm) { |
| | | return; |
| | | } |
| | |
| | | this._cleanSearchTerm = newCleanSearchTerm; |
| | | |
| | | // Ignore search terms that are too small after removing special characters |
| | | if ( |
| | | newCleanSearchTerm.replace(/\?/g, '').length < |
| | | this.minSearchTermLength |
| | | ) { |
| | | if (newCleanSearchTerm.replace(/\?/g, '').length < this.minSearchTermLength) { |
| | | this.setSearchResults(this._defaultSearchResults); |
| | | return; |
| | | } |
| | |
| | | detail: { |
| | | searchTerm: this._cleanSearchTerm, |
| | | rawSearchTerm: newSearchTerm, |
| | | selectedIds: this._curSelection.map( |
| | | (element) => element.id |
| | | ) |
| | | selectedIds: this._curSelection.map((element) => element.id) |
| | | } |
| | | }); |
| | | this.dispatchEvent(searchEvent); |
| | |
| | | // If selection was changed by user, notify parent components |
| | | if (isUserInteraction) { |
| | | const selectedIds = this._curSelection.map((sel) => sel.id); |
| | | this.dispatchEvent( |
| | | new CustomEvent('selectionchange', { detail: selectedIds }) |
| | | ); |
| | | this.dispatchEvent(new CustomEvent('selectionchange', { detail: selectedIds })); |
| | | } |
| | | } |
| | | |
| | |
| | | this._focusedResultIndex = this._searchResults.length - 1; |
| | | } |
| | | event.preventDefault(); |
| | | } else if ( |
| | | event.keyCode === KEY_ENTER && |
| | | this._hasFocus && |
| | | this._focusedResultIndex >= 0 |
| | | ) { |
| | | } else if (event.keyCode === KEY_ENTER && this._hasFocus && this._focusedResultIndex >= 0) { |
| | | // If the user presses enter, and the box is open, and we have used arrows, |
| | | // treat this just like a click on the listbox item |
| | | const selectedId = this._searchResults[this._focusedResultIndex].id; |
| | | console.log('selectedid:' + selectedId); |
| | | this.template |
| | | .querySelector(`[data-recordid="${selectedId}"]`) |
| | | .click(); |
| | | console.log('selectedid:'+selectedId); |
| | | this.template.querySelector(`[data-recordid="${selectedId}"]`).click(); |
| | | event.preventDefault(); |
| | | } |
| | | } |
| | |
| | | const recordId = event.currentTarget.dataset.recordid; |
| | | |
| | | // Save selection |
| | | const selectedItem = this._searchResults.find( |
| | | (result) => result.id === recordId |
| | | ); |
| | | const selectedItem = this._searchResults.find((result) => result.id === recordId); |
| | | if (!selectedItem) { |
| | | return; |
| | | } |
| | |
| | | }); |
| | | this.dispatchEvent(blurEvent); |
| | | this._hasFocus = false; |
| | | if (!this.hasSelection()) { |
| | | if(!this.hasSelection()){ |
| | | this._searchTerm = ''; |
| | | } |
| | | } |
| | |
| | | return; |
| | | } |
| | | const recordId = event.currentTarget.name; |
| | | this._curSelection = this._curSelection.filter( |
| | | (item) => item.id !== recordId |
| | | ); |
| | | this._curSelection = this._curSelection.filter((item) => item.id !== recordId); |
| | | // Process selection update |
| | | this.processSelectionUpdate(true); |
| | | } |
| | |
| | | |
| | | handleNewRecordClick(event) { |
| | | const objectApiName = event.currentTarget.dataset.sobject; |
| | | const selection = this.newRecordOptions.find( |
| | | (option) => option.value === objectApiName |
| | | ); |
| | | const selection = this.newRecordOptions.find((option) => option.value === objectApiName); |
| | | |
| | | const preNavigateCallback = selection.preNavigateCallback |
| | | ? selection.preNavigateCallback |
| | |
| | | } |
| | | |
| | | get isListboxOpen() { |
| | | const isSearchTermValid = |
| | | this._cleanSearchTerm && |
| | | this._cleanSearchTerm.length >= this.minSearchTermLength; |
| | | const isSearchTermValid = this._cleanSearchTerm && this._cleanSearchTerm.length >= this.minSearchTermLength; |
| | | return ( |
| | | this._hasFocus && |
| | | this.isSelectionAllowed() && |
| | | (isSearchTermValid || |
| | | this.hasResults || |
| | | this.newRecordOptions?.length > 0) |
| | | (isSearchTermValid || this.hasResults || this.newRecordOptions?.length > 0) |
| | | ); |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | get getDropdownClass() { |
| | | let css = |
| | | 'slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click '; |
| | | let css = 'slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click '; |
| | | if (this.isListboxOpen) { |
| | | css += 'slds-is-open'; |
| | | } |
| | |
| | | if (this._hasFocus && this.hasResults) { |
| | | css += 'slds-has-focus '; |
| | | } |
| | | if ( |
| | | this._errors.length > 0 || |
| | | (this._isDirty && this.required && !this.hasSelection()) |
| | | ) { |
| | | if (this._errors.length > 0 || (this._isDirty && this.required && !this.hasSelection())) { |
| | | css += 'has-custom-error '; |
| | | } |
| | | if (!this.isMultiEntry) { |
| | | css += |
| | | 'slds-combobox__input-value ' + |
| | | (this.hasSelection() ? 'has-custom-border' : ''); |
| | | css += 'slds-combobox__input-value ' + (this.hasSelection() ? 'has-custom-border' : ''); |
| | | } |
| | | return css; |
| | | } |
| | |
| | | if (this.isMultiEntry) { |
| | | css += 'slds-input-has-icon_right'; |
| | | } else { |
| | | css += this.hasSelection() |
| | | ? 'slds-input-has-icon_left-right' |
| | | : 'slds-input-has-icon_right'; |
| | | css += this.hasSelection() ? 'slds-input-has-icon_left-right' : 'slds-input-has-icon_right'; |
| | | } |
| | | return css; |
| | | } |
| | |
| | | } |
| | | |
| | | get getSelectIconName() { |
| | | if (this._curSelection[0]) |
| | | console.log( |
| | | 'this._curSelection[0].icon = ' + this._curSelection[0].icon |
| | | ); |
| | | return this.hasSelection() |
| | | ? this._curSelection[0].icon |
| | | : 'standard:default'; |
| | | if(this._curSelection[0]) |
| | | console.log('this._curSelection[0].icon = ' + this._curSelection[0].icon); |
| | | return this.hasSelection() ? this._curSelection[0].icon : 'standard:default'; |
| | | } |
| | | |
| | | get getSelectIconClass() { |
| | | return ( |
| | | 'slds-combobox__input-entity-icon ' + |
| | | (this.hasSelection() ? '' : 'slds-hide') |
| | | ); |
| | | return 'slds-combobox__input-entity-icon ' + (this.hasSelection() ? '' : 'slds-hide'); |
| | | } |
| | | |
| | | get getInputValue() { |
| | | if (this.isMultiEntry) { |
| | | return this._searchTerm; |
| | | } |
| | | if (this.accountValue != '') { |
| | | if(this.accountValue != ''){ |
| | | return this.accountValue; |
| | | } |
| | | return this.hasSelection() |
| | | ? this._curSelection[0].title |
| | | : this._searchTerm; |
| | | return this.hasSelection() ? this._curSelection[0].title : this._searchTerm; |
| | | } |
| | | |
| | | get getInputTitle() { |
| | |
| | | get getListboxClass() { |
| | | return ( |
| | | 'slds-dropdown ' + |
| | | (this.scrollAfterNItems |
| | | ? `slds-dropdown_length-with-icon-${this.scrollAfterNItems} ` |
| | | : '') + |
| | | (this.scrollAfterNItems ? `slds-dropdown_length-with-icon-${this.scrollAfterNItems} ` : '') + |
| | | 'slds-dropdown_fluid' |
| | | ); |
| | | } |