@doegis/core/widgets/Search.js

DOE GIS API

import{_ as e}from"../chunks/tslib.es6.js";import"../intl.js";import{eventKey as t}from"../core/events.js";import s from"../core/Handles.js";import{watch as r,on as n,initial as i}from"../core/reactiveUtils.js";import{escapeRegExpString as o}from"../core/string.js";import{property as l}from"../core/accessorSupport/decorators/property.js";import"../core/accessorSupport/ensureType.js";import"../core/arrayUtils.js";import{subclass as u}from"../core/accessorSupport/decorators/subclass.js";import a from"./Widget.js";import{CSS as c}from"./Search/css.js";import d from"./Search/SearchResultRenderer.js";import h from"./Search/SearchViewModel.js";import{storeNode as g,keepMenuItemWithinView as p,isActivationKey as m}from"./support/widgetUtils.js";import{messageBundle as v}from"./support/decorators/messageBundle.js";import{vmEvent as _}from"./support/decorators/vmEvent.js";import{tsx as M}from"./support/jsxFactory.js";import{substitute as S}from"../intl/substitute.js";const I=/<[a-z/][\s\S]*>/i;let w=class extends a{constructor(e,t){super(e,t),this._activeMenuItemIndex=-1,this._handles=new s,this._inputNode=null,this._menuItemCount=0,this._sourceMenuButtonNode=null,this._sourceListNode=null,this._suggestionListNode=null,this._searchResultRenderer=new d,this._locateFailed=null,this._container=null,this.activeMenu="none",this.disabled=!1,this.iconClass=c.widgetIcon,this.messages=null,this.messagesCommon=null,this.viewModel=new h,this._clearActiveMenu=()=>{this.activeMenu="none"},this._removeActiveMenu=e=>{const t=e.relatedTarget;t&&this._container?.contains(t)||this._clearActiveMenu()},this.addHandles([r((()=>this.searchTerm),(e=>{(e&&"warning"===this.activeMenu||!e&&!this.get("viewModel.selectedSuggestion.location"))&&this._clearActiveMenu()})),n((()=>this.viewModel?.allSources),"change",(()=>this._watchSourceChanges())),r((()=>this.activeMenu),(()=>this._resetActiveMenuItemIndex()),i),r((()=>this.viewModel?.defaultPopupTemplate),(e=>{e&&(e.content=this._renderSearchResultsContent.bind(this))}),i)])}destroy(){this._handles.destroy(),this._handles=null,this._cancelSuggest(),this._cancelSearch(),this._searchResultRenderer&&(this._searchResultRenderer.viewModel=null,this._searchResultRenderer.destroy(),this._searchResultRenderer=null)}get displayedSearchTerm(){return`${this.viewModel.searchTerm}`.trim()}get inputId(){return this._buildId("input")}get suggestionsMenuId(){return this._buildId("suggest-menu")}get sourceMenuId(){return this._buildId("source-menu")}get sourceMenuButtonId(){return this._buildId("source-menu-button")}get activeSource(){return this.viewModel.activeSource}get activeSourceIndex(){return this.viewModel.activeSourceIndex}set activeSourceIndex(e){this.viewModel.activeSourceIndex=e}get allPlaceholder(){return this.viewModel.allPlaceholder}set allPlaceholder(e){this.viewModel.allPlaceholder=e}get allSources(){return this.viewModel.allSources}get autoNavigate(){return this.viewModel.autoNavigate}set autoNavigate(e){this.viewModel.autoNavigate=e}get autoSelect(){return this.viewModel.autoSelect}set autoSelect(e){this.viewModel.autoSelect=e}get defaultSources(){return this.viewModel.defaultSources}get goToOverride(){return this.viewModel.goToOverride}set goToOverride(e){this.viewModel.goToOverride=e}get includeDefaultSources(){return this.viewModel.includeDefaultSources}set includeDefaultSources(e){this.viewModel.includeDefaultSources=e}get label(){return this.messages?.widgetLabel??""}set label(e){this._overrideIfSome("label",e)}get locationEnabled(){return this.viewModel.locationEnabled}set locationEnabled(e){this.viewModel.locationEnabled=e}get maxResults(){return this.viewModel.maxResults}set maxResults(e){this.viewModel.maxResults=e}get maxSuggestions(){return this.viewModel.maxSuggestions}set maxSuggestions(e){this.viewModel.maxSuggestions=e}get minSuggestCharacters(){return this.viewModel.minSuggestCharacters}set minSuggestCharacters(e){this.viewModel.minSuggestCharacters=e}get popupEnabled(){return this.viewModel.popupEnabled}set popupEnabled(e){this.viewModel.popupEnabled=e}get popupTemplate(){return this.viewModel.popupTemplate}set popupTemplate(e){this.viewModel.popupTemplate=e}get portal(){return this.viewModel.portal}set portal(e){this.viewModel.portal=e}get resultGraphic(){return this.viewModel.resultGraphic}set resultGraphic(e){this.viewModel.resultGraphic=e}get resultGraphicEnabled(){return this.viewModel.resultGraphicEnabled}set resultGraphicEnabled(e){this.viewModel.resultGraphicEnabled=e}get results(){return this.viewModel.results}get searchAllEnabled(){return this.viewModel.searchAllEnabled}set searchAllEnabled(e){this.viewModel.searchAllEnabled=e}get searchTerm(){return this.viewModel.searchTerm}set searchTerm(e){this.viewModel.searchTerm=e}get selectedResult(){return this.viewModel.selectedResult}get sources(){return this.viewModel.sources}set sources(e){this.viewModel.sources=e}get suggestions(){return this.viewModel.suggestions}get suggestionsEnabled(){return this.viewModel.suggestionsEnabled}set suggestionsEnabled(e){this.viewModel.suggestionsEnabled=e}get view(){return this.viewModel.view}set view(e){this.viewModel.view=e}clear(){this.viewModel.clear()}focus(){this._inputNode?.focus(),this.emit("search-focus")}blur(){this._inputNode?.blur(),this.emit("search-blur")}search(e){this._clearActiveMenu(),this._cancelSuggest(),this._cancelSearch();const t=new AbortController,{signal:s}=t;return this._searchController=t,this.viewModel.search(e,{signal:s}).catch((e=>{if(this._searchController===t)return this._clearActiveMenu(),this._searchController=null,e})).then((e=>{if(this._searchController===t)return this.activeMenu=e.numResults?"none":"warning",this._searchController=null,e}))}suggest(e){this._cancelSuggest();const t=new AbortController,{signal:s}=t;return this._suggestController=t,this.viewModel.suggest(e,null,{signal:s}).then((e=>{if(this._suggestController===t)return this._suggestController=null,e.numResults&&this._openSuggestionMenu(),this._scrollToTopSuggestion(),e})).catch((()=>{if(this._suggestController===t)return this._suggestController=null,null}))}render(){const{state:e}=this.viewModel,t={[c.disabled]:"disabled"===e,[c.esriWidgetDisabled]:this.disabled};return M("div",{class:this.classes(c.base,t)},"loading"===e?this.renderLoader():this.renderContainer())}renderSubmitButton(){const{messages:e,disabled:t}=this;return M("button",{"aria-label":e.searchButtonTitle,bind:this,disabled:t,class:this.classes(c.submitButton,c.button),key:"esri-search__submit-button",onclick:this._handleSearchButtonClick,title:e.searchButtonTitle,type:"button"},M("span",{"aria-hidden":"true",class:c.searchIcon}))}renderWarningMenu(){return M("div",{key:"esri-search__error-menu",class:this.classes(c.menu,c.warningMenu)},M("div",{class:c.warningMenuBody},this.renderWarning()))}renderSourceMenuButton(){const{messages:e,activeMenu:t,sourceMenuId:s,sourceMenuButtonId:r,disabled:n}=this,{activeSourceIndex:i,allSources:o}=this.viewModel;return o.length>1?M("button",{id:r,key:"esri-search__source-menu-button",bind:this,disabled:n,"aria-label":e.searchIn,title:e.searchIn,"aria-haspopup":"true","aria-expanded":("source"===t).toString(),"aria-controls":s,class:this.classes(c.sourcesButton,c.button),onclick:this._handleSourcesMenuToggleClick,onfocus:this._handleSourcesMenuToggleFocus,afterCreate:g,"data-node-ref":"_sourceMenuButtonNode",type:"button"},M("span",{"aria-hidden":"true",class:c.dropdownIcon}),M("span",{"aria-hidden":"true",class:c.dropupIcon}),M("span",{class:c.sourceName},this._getSourceName(i))):null}renderSourcesList(){const{allSources:e,searchAllEnabled:t}=this.viewModel,{_activeMenuItemIndex:s,activeMenu:r,sourceMenuId:n,sourceMenuButtonId:i}=this,o="source"===r&&s>-1?this._buildId("source-item",s):null;return e.length>1?M("ul",{"aria-activedescendant":o,"aria-labelledby":i,id:n,role:"menu",bind:this,afterCreate:g,onkeydown:this._handleSourceMenuKeydown,onkeyup:this._handleSourceMenuKeyup,"data-node-ref":"_sourceListNode",class:c.menuList,tabIndex:-1},t?this.renderSource(h.ALL_INDEX):null,e.map(((e,t)=>this.renderSource(t))).toArray()):null}renderSourcesMenu(){const{allSources:e}=this.viewModel;return e.length>1?M("div",{key:"esri-search__source-menu",class:this.classes(c.menu,c.sourcesMenu)},this.renderSourcesList()):null}renderLoader(){const{messages:e,messagesCommon:t,disabled:s}=this;return M("div",{class:c.loader,key:"base-loader",tabIndex:s?-1:null},M("span",{"aria-hidden":"true",class:c.loaderAnimation}),M("span",{class:c.fallbackText},e.searchButtonTitle),M("span",{class:c.loaderText},t.loading))}renderContainer(){const{allSources:e,state:t}=this.viewModel,{activeMenu:s}=this,r={[c.hasMultipleSources]:e.length>1,[c.isLoading]:"loading"===t,[c.isSearching]:"searching"===t,[c.showWarning]:"warning"===s,[c.showSources]:"source"===s,[c.showSuggestions]:"suggestion"===s};return M("div",{tabIndex:-1,afterCreate:e=>{this._container=e,e.addEventListener("focusout",this._removeActiveMenu)},afterRemoved:e=>{e.removeEventListener("focusout",this._removeActiveMenu)},class:this.classes(r,c.container),key:"base-container"},this.renderSourceMenuButton(),this.renderSourcesMenu(),this.renderInputContainer(),this.renderSubmitButton(),this.renderWarningMenu())}renderClearButton(){return this.searchTerm?M("button",{bind:this,disabled:this.disabled,class:this.classes(c.clearButton,c.button),key:"esri-search__clear-button",onclick:this._handleClearButtonClick,onfocus:this._clearActiveMenu,title:this.messages.clearButtonTitle,type:"button"},M("span",{"aria-hidden":"true",class:c.clearIcon})):null}renderLocationGroup(){const{messages:e,locationEnabled:t,displayedSearchTerm:s}=this,r=t&&!s,n="suggestion"===this.activeMenu&&0===this._activeMenuItemIndex;return r?M("ul",{role:"group",key:"esri-search__suggestion-list-current-location",class:this.classes(c.menuList,c.suggestionList,c.suggestionListCurrentLocation)},M("li",{bind:this,"data-current-location-item":!0,onclick:this._handleUseCurrentLocationClick,id:this._buildId("suggestion-item",0),"aria-selected":("suggestion"===this.activeMenu&&0===this._activeMenuItemIndex).toString(),role:"option",class:this.classes(c.menuItem,n?c.menuItemFocus:null)},M("span",{"aria-hidden":"true",class:c.locate})," ",e.useCurrentLocation)):null}renderInput(){const{activeMenu:e,locationEnabled:t,displayedSearchTerm:s,messages:r,suggestionsMenuId:n,inputId:i,_activeMenuItemIndex:o,disabled:l}=this,{maxInputLength:u,placeholder:a,searchTerm:d,suggestionCount:h}=this.viewModel,p=!(!(t&&!s)&&!h),m="suggestion"===e&&o>-1?this._buildId("suggestion-item",o):null;return M("input",{"aria-activedescendant":m,"aria-autocomplete":"list","aria-expanded":(p&&"suggestion"===e).toString(),"aria-controls":p?n:null,"aria-haspopup":"listbox","aria-label":r.searchButtonTitle,bind:this,disabled:l,placeholder:a,maxlength:u,autocomplete:"off",type:"text",class:this.classes(c.esriInput,c.input),value:d,id:i,role:"combobox",onkeyup:this._handleInputKeyup,onclick:this._openSuggestionMenu,oninput:this._handleInputPaste,onpaste:this._handleInputPaste,afterCreate:g,"data-node-ref":"_inputNode",onfocus:this.focus,onblur:this.blur,title:d?"":a})}renderForm(){return M("form",{key:"esri-search__form",bind:this,disabled:this.disabled,class:c.form,onsubmit:this._formSubmit,role:"search"},this.renderInput())}renderSuggestList(e){const{sourceIndex:t}=e,s=e.results.length,r=e.results;return s?M("ul",{role:"group",key:`esri-search__suggestion-list-${t}`,class:this.classes(c.menuList,c.suggestionList)},r.map((e=>this.renderSuggestion(e,this._menuItemCount++)))):null}renderSuggestionsGroup(){const{suggestions:e}=this.viewModel;return e?e.map((e=>[this.renderSuggestionHeader(e),this.renderSuggestList(e)])):null}renderSuggestionsMenu(){const{displayedSearchTerm:e,locationEnabled:t,suggestionsMenuId:s,inputId:r}=this,{suggestionCount:n}=this.viewModel,i=t&&!e||n;return this._menuItemCount=0,i?M("div",{id:s,key:"esri-search__suggestions-menu",class:this.classes(c.menu,c.suggestionsMenu),role:"listbox","aria-labelledby":r,bind:this,afterCreate:g,"data-node-ref":"_suggestionListNode"},this.renderLocationGroup(),this.renderSuggestionsGroup()):null}renderInputContainer(){return M("div",{key:"esri-search__input-container",class:c.inputContainer},this.renderForm(),this.renderSuggestionsMenu(),this.renderClearButton())}renderSuggestionHeader(e){const{allSources:t,activeSourceIndex:s}=this.viewModel,{sourceIndex:r}=e,n=e.results.length,i=t.length>1&&s===h.ALL_INDEX;return n&&i?M("div",{key:`esri-search__suggestion-header-${r}`,class:c.menuHeader},this._getSourceName(r)):null}renderSuggestion(e,t){const{_activeMenuItemIndex:s,messages:r}=this,{searchTerm:n}=this.viewModel;if(n){const{text:i}=e,o=i||r.untitledResult,l=I.test(o),u=[];if(l)u.push(M("div",{innerHTML:o}));else{const e=this._splitResult(o,n),t=n.toLowerCase();e.forEach(((e,s)=>{e&&e.length&&(e.toLowerCase()===t?u.push(M("strong",{key:s},e)):u.push(e))}))}const a="suggestion"===this.activeMenu&&s===t;return M("li",{bind:this,id:this._buildId("suggestion-item",t),"aria-selected":("suggestion"===this.activeMenu&&this._activeMenuItemIndex===t).toString(),onclick:this._handleSuggestionClick,key:`esri-search__suggestion_${t}`,"data-suggestion":e,role:"option",class:this.classes(c.menuItem,a?c.menuItemFocus:null)},u)}}renderSource(e){const{activeSourceIndex:t,searchAllEnabled:s}=this.viewModel,r={[c.menuItemActive]:e===t,[c.menuItemFocus]:"source"===this.activeMenu&&e===(s?this._activeMenuItemIndex-1:this._activeMenuItemIndex)},n=s?e+1:e;return M("li",{bind:this,key:`esri-search__source-${e}`,id:this._buildId("source-item",n),"aria-checked":(e===t).toString(),onclick:this._handleSourceClick,"data-source-index":e,role:"menuitemradio",class:this.classes(c.source,c.menuItem,r)},this._getSourceName(e))}renderNoResultsWarning(e){const{messages:t}=this,s=e?S(t.noResultsFoundForValue,{value:`"${e}"`}):t.noResultsFound;return M("div",{key:"esri-search__no_results"},M("div",{class:c.warningMenuHeader},t.noResults),M("div",{class:c.warningMenuText},s))}renderEmptySearchWarning(){const{messages:e}=this;return M("div",{key:"esri-search__empty-search"},M("span",{"aria-hidden":"true",class:c.noticeIcon}),M("span",{class:c.noValueText},e.emptyValue))}renderLocateWarning(){const{messages:e}=this;return M("div",{key:"esri-search__locate-error"},M("span",{"aria-hidden":"true",class:c.noticeIcon}),M("span",{class:c.noValueText},e.locateError))}renderWarning(){const{displayedSearchTerm:e,_locateFailed:t}=this,{viewModel:s}=this;return t?this.renderLocateWarning():s.selectedSuggestion?.location||e?this.renderNoResultsWarning(e):this.renderEmptySearchWarning()}_resetActiveMenuItemIndex(){this._activeMenuItemIndex=-1}_buildId(e,t){return`${this.id}-${e}${void 0===t?"":`-${t}`}`}_watchSourceChanges(){const{_handles:e,viewModel:{allSources:t}}=this,s="sources";e.remove(s),t.forEach((t=>e.add(r((()=>t.name),(()=>this.scheduleRender())),s)))}_handleSourcesMenuToggleFocus(){"source"!==this.activeMenu&&this._clearActiveMenu()}_handleSourcesMenuToggleClick(){const e="source"===this.activeMenu;this.activeMenu=e?"none":"source",this.renderNow(),"source"===this.activeMenu&&this._sourceListNode?.focus()}_handleClearButtonClick(){this.viewModel.clear(),this._focus()}_handleSearchButtonClick(){this.search()}_handleSuggestionClick(e){const t=e.currentTarget["data-suggestion"];t&&(this._focus(),this.search(t))}_handleUseCurrentLocationClick(){this._useCurrentLocation()}_useCurrentLocation(){this._focus("none"),this._cancelSuggest(),this._cancelSearch();const e=new AbortController,{signal:t}=e;this._searchController=e,this.viewModel.searchNearby({signal:t}).then((e=>{this.activeMenu=e.numResults?"none":"warning"})).catch((()=>{this._locateFailed=!0,this.activeMenu="warning"})).then((()=>{this._searchController=null}))}_handleSourceClick(e){this._setSourceFromMenuItem(e.currentTarget)}_setSourceFromMenuItem(e){if(!e)return;const t=e["data-source-index"];this.viewModel.activeSourceIndex=t,this._clearActiveMenu(),this._sourceMenuButtonNode?.focus()}_cancelSuggest(){this._suggestController&&(this._suggestController.abort(),this._suggestController=null)}_cancelSearch(){this._searchController&&(this._searchController.abort(),this._searchController=null),this._locateFailed=!1}_handleInputKeyup(e){const s=t(e);if(e.ctrlKey||e.metaKey||"Copy"===s||"ArrowLeft"===s||"ArrowRight"===s||"Shift"===s)return;if("Tab"===s||"Escape"===s||e.shiftKey&&"Tab"===s)return this._cancelSuggest(),void("Escape"===s&&this._clearActiveMenu());const r="Home"===s||"End"===s||"ArrowUp"===s||"ArrowDown"===s;if("Enter"===s&&this._activeMenuItemIndex<0)return void this._cancelSuggest();const n=this._suggestionListNode?.getElementsByTagName("li");if(n?.length){if("suggestion"!==this.activeMenu&&this._openSuggestionMenu(),r)return e.preventDefault(),this._cancelSuggest(),void this._handleItemNavigation(s,n,this._suggestionListNode);const t=n[this._activeMenuItemIndex];if("Enter"===s&&t){const e=t["data-suggestion"];return void(e?(this._focus(),this.search(e)):t["data-current-location-item"]&&this._useCurrentLocation())}}this.viewModel.searchTerm&&this.suggest()}_handleItemNavigation(e,t,s){const r=this._activeMenuItemIndex;"Home"===e&&(this._activeMenuItemIndex=0),"End"===e&&(this._activeMenuItemIndex=t.length-1),"ArrowUp"===e&&(this._activeMenuItemIndex=this._activeMenuItemIndex<=0?t.length-1:this._activeMenuItemIndex-1),"ArrowDown"===e&&(this._activeMenuItemIndex=this._activeMenuItemIndex===t.length-1?0:this._activeMenuItemIndex+1),r!==this._activeMenuItemIndex&&p(t[this._activeMenuItemIndex],s)}_scrollToTopSuggestion(){this._suggestionListNode&&(this._suggestionListNode.scrollTop=0)}_openSuggestionMenu(){this.activeMenu="suggestion"}_handleInputPaste(e){const t=e.target;this.viewModel.searchTerm!==t.value&&(this.viewModel.searchTerm=t.value),this.viewModel.searchTerm&&this.suggest()}_handleSourceMenuKeydown(e){const s=t(e);if(m(s)){e.preventDefault();const t=this._sourceListNode.getElementsByTagName("li")[this._activeMenuItemIndex];this._setSourceFromMenuItem(t)}else"ArrowUp"!==s&&"ArrowDown"!==s&&"End"!==s&&"Home"!==s||e.preventDefault()}_handleSourceMenuKeyup(e){const s=t(e),r="ArrowUp"===s||"ArrowDown"===s||"End"===s||"Home"===s;if(r&&e.preventDefault(),"Escape"===s)return this._clearActiveMenu(),void this._sourceMenuButtonNode?.focus();const n=this._sourceListNode?.getElementsByTagName("li");return n&&0!==n.length&&r?("source"!==this.activeMenu&&(this.activeMenu="source"),void this._handleItemNavigation(s,n,this._sourceListNode.parentElement)):void 0}_focus(e){this.focus(),e&&(this.activeMenu=e)}_formSubmit(e){e.preventDefault(),-1===this._activeMenuItemIndex&&this.search()}_getSourceName(e){const{messages:t}=this,s=this.viewModel,{allSources:r}=s,n=r.getItemAt(e);return e===h.ALL_INDEX?t.all:n&&n.name||t.untitledSource}_splitResult(e,t){const s=o(t);return e.replace(new RegExp(`(^|)(${s})(|$)`,"ig"),"$1|$2|$3").split("|")}_renderSearchResultsContent(){return this._searchResultRenderer.showMoreResultsOpen=!1,this._searchResultRenderer.viewModel=this.viewModel,this._searchResultRenderer}};e([l()],w.prototype,"_activeMenuItemIndex",void 0),e([l()],w.prototype,"displayedSearchTerm",null),e([l({readOnly:!0})],w.prototype,"inputId",null),e([l({readOnly:!0})],w.prototype,"suggestionsMenuId",null),e([l({readOnly:!0})],w.prototype,"sourceMenuId",null),e([l({readOnly:!0})],w.prototype,"sourceMenuButtonId",null),e([l()],w.prototype,"activeMenu",void 0),e([l({readOnly:!0})],w.prototype,"activeSource",null),e([l()],w.prototype,"activeSourceIndex",null),e([l()],w.prototype,"allPlaceholder",null),e([l({readOnly:!0})],w.prototype,"allSources",null),e([l()],w.prototype,"autoNavigate",null),e([l()],w.prototype,"autoSelect",null),e([l({readOnly:!0})],w.prototype,"defaultSources",null),e([l()],w.prototype,"disabled",void 0),e([l()],w.prototype,"goToOverride",null),e([l()],w.prototype,"iconClass",void 0),e([l()],w.prototype,"includeDefaultSources",null),e([l()],w.prototype,"label",null),e([l()],w.prototype,"locationEnabled",null),e([l()],w.prototype,"maxResults",null),e([l()],w.prototype,"maxSuggestions",null),e([l(),v("esri/widgets/Search/t9n/Search")],w.prototype,"messages",void 0),e([l(),v("esri/t9n/common")],w.prototype,"messagesCommon",void 0),e([l()],w.prototype,"minSuggestCharacters",null),e([l()],w.prototype,"popupEnabled",null),e([l()],w.prototype,"popupTemplate",null),e([l()],w.prototype,"portal",null),e([l()],w.prototype,"resultGraphic",null),e([l()],w.prototype,"resultGraphicEnabled",null),e([l({readOnly:!0})],w.prototype,"results",null),e([l()],w.prototype,"searchAllEnabled",null),e([l()],w.prototype,"searchTerm",null),e([l({readOnly:!0})],w.prototype,"selectedResult",null),e([l()],w.prototype,"sources",null),e([l({readOnly:!0})],w.prototype,"suggestions",null),e([l()],w.prototype,"suggestionsEnabled",null),e([l()],w.prototype,"view",null),e([_(["search-complete","search-clear","search-start","select-result","suggest-start","suggest-complete"]),l({type:h})],w.prototype,"viewModel",void 0),w=e([u("esri.widgets.Search")],w);const b=w;export{b as default};