graphdb-workbench/dist/shared-components/collection/components/onto-search-resource-input/onto-search-resource-input.js

The web application for GraphDB APIs

import{h}from"@stencil/core";import{AutocompleteContextService,AutocompleteService,AutocompleteStorageService,EventService,NamespacesContextService,navigateTo,OntoToastrService,ResourceSearchStorageService,ServiceProvider,SubscriptionList,Suggestion,SuggestionSelectedPayload,SuggestionType,UriUtil}from"../../../../../api/dist/ontotext-workbench-api";import{TranslationService}from"../../services/translation.service";import{HtmlUtil}from"../../utils/html-util";import{OntoTooltipPlacement}from"../onto-tooltip/models/onto-tooltip-placement";import{ResourceSearchConstants}from"../../models/resource-search/resource-search-constants";export class OntoSearchResourceInput{constructor(){this.autocompleteService=ServiceProvider.get(AutocompleteService),this.autocompleteContextService=ServiceProvider.get(AutocompleteContextService),this.autocompleteStorageService=ServiceProvider.get(AutocompleteStorageService),this.resourceSearchStorageService=ServiceProvider.get(ResourceSearchStorageService),this.toastrService=ServiceProvider.get(OntoToastrService),this.eventService=ServiceProvider.get(EventService),this.namespaceContextService=ServiceProvider.get(NamespacesContextService),this.subscriptions=new SubscriptionList,this.autocompleteWarningShown=!1,this.skipValidation=!1,this.isHidden=!1,this.isAutocompleteEnabled=!1,this.handleInput=e=>{const t=e.target;t.value?(this.setInputValue(t.value),this.checkForAutocomplete()):this.clearInput()},this.clearInput=()=>{this.setInputValue(""),this.preserveSearch&&this.resourceSearchStorageService.clearStoredSearch()},this.onKeyDown=e=>{switch(e.key){case"Enter":this.onEnter(e);break;case"Escape":this.onEscape();break;case"ArrowUp":this.onArrowUp(e);break;case"ArrowDown":this.onArrowDown(e)}}}onVisibilityChange(e){var t;e?null===(t=this.searchResult)||void 0===t||t.clearSuggestions():this.setInputValue(this.resourceSearchStorageService.getInputValue())}connectedCallback(){this.onAutocompleteEnabledChange(),this.onNamespaceChange(),this.loadInputFromStorage()}disconnectedCallback(){this.subscriptions.unsubscribeAll()}render(){var e,t,s;return h("section",{key:"07393acc0648ecd5859d053d6769ece464b9c664",class:"search-resources-input"},h("div",{key:"9c95b8ca64d8334472d14518845a8c16a9568335",class:"input-row"},h("span",{key:"0efbbe550fadf44dfab837e05ce8857c724d5da7",class:"input-wrapper"},h("input",{key:"c55ffa901d87dd7569c1e55b5fb7e6689855f6d1",value:this.inputValue,id:this.context,type:"text",autocomplete:"off",placeholder:`${TranslationService.translate("rdf_search.labels.search")}...`,ref:e=>this.inputRef=e,onKeyDown:this.onKeyDown,"data-test":this.context,onInput:this.handleInput}),(null===(e=this.inputValue)||void 0===e?void 0:e.length)?h("i",{onClick:this.clearInput,"tooltip-content":TranslationService.translate("rdf_search.tooltips.clear"),"tooltip-placement":OntoTooltipPlacement.BOTTOM,class:"ri-close-line clear-input"}):""),null===(t=this.buttonConfig)||void 0===t?void 0:t.getButtons().getItems().map(e=>h("button",{key:e.label,onClick:this.handleButtonClick(e),class:e.selected?"selected":""},e.label))),h("span",{key:"94fa466d5f73e84247ac8efc45c12980f052a2b1",class:"hint"},TranslationService.translate("rdf_search.labels.hint")),h("section",{key:"b4d9379572bdfa66bc16b8218e86128a6807f399",class:"autocomplete-results-wrapper","data-test":"onto-autocomplete-results"},null===(s=this.searchResult)||void 0===s?void 0:s.suggestions.getItems().map(e=>h("p",{key:e.getId(),onClick:this.onSuggestionClick(e),"data-test":"onto-autocomplete-suggestion",onMouseMove:this.hoverSuggestion(e),class:`${e.isHovered()?"hovered":""} ${e.isSelected()?"selected":""}`,innerHTML:e.getDescription()}))))}handleButtonClick(e){return()=>this.buttonConfig=this.buttonConfig.selectButton(e)}loadAutocompleteResults(){var e;this.inputValue?this.isAutocompleteEnabled&&this.autocompleteService.search(this.inputValue).then(e=>{this.onResultsReceived(e)}):null===(e=this.searchResult)||void 0===e||e.clearSuggestions()}hoverSuggestion(e){return()=>this.searchResult=this.searchResult.hoverSuggestion(e)}onAutocompleteEnabledChange(){this.isAutocompleteEnabled=this.autocompleteStorageService.isEnabled(),this.subscriptions.add(this.autocompleteContextService.onAutocompleteEnabledChanged(e=>{this.isAutocompleteEnabled=null!=e?e:this.isAutocompleteEnabled}))}checkForAutocomplete(){if(this.inputValue.length>0&&!this.isAutocompleteEnabled&&!this.autocompleteWarningShown){this.autocompleteWarningShown=!0;const e=TranslationService.translate("rdf_search.toasts.autocomplete_is_off");this.toastrService.warning(`<a class="no-underline" style="font-weight: 500">${e}</a>`,{onClick:navigateTo("autocomplete"),removeOnClick:!0})}}onSuggestionClick(e){return t=>{e.setOverrideToVisual(t.ctrlKey||t.metaKey),this.searchRdfResource(e)}}searchRdfResource(e){e.getType()===SuggestionType.PREFIX?this.expandPrefix(e):(this.notifyRdfResourceSelected(e),this.preserveSearch&&this.resourceSearchStorageService.setLastSelected(e))}notifyRdfResourceSelected(e){var t;this.searchResult=null===(t=this.searchResult)||void 0===t?void 0:t.selectSuggestion(e),this.eventService.emit({NAME:ResourceSearchConstants.SUGGESTION_SELECTED_EVENT,payload:new SuggestionSelectedPayload(e,this.context)})}expandPrefix(e){this.setInputValue(this.namespaces.getByPrefix(e.getValue())),this.inputRef.focus()}setInputValue(e){this.inputValue=e,this.preserveSearch&&this.resourceSearchStorageService.setInputValue(this.inputValue),this.loadAutocompleteResults()}onNamespaceChange(){this.subscriptions.add(this.namespaceContextService.onNamespacesChanged(e=>{this.namespaces=e}))}onEnter(e){var t;let s=null===(t=this.searchResult)||void 0===t?void 0:t.getHoveredSuggestion();s||(s=new Suggestion({value:UriUtil.removeAngleBrackets(this.inputValue),type:SuggestionType.URI})),s.setOverrideToVisual(e.ctrlKey||e.metaKey),this.validateAndSearch(s)}onArrowUp(e){this.searchResult&&(this.searchResult=this.searchResult.hoverPreviousSuggestion(),this.displaySuggestion(e))}onArrowDown(e){this.searchResult&&(this.searchResult=this.searchResult.hoverNextSuggestion(),this.displaySuggestion(e))}displaySuggestion(e){e.preventDefault(),this.inputRef.value=this.searchResult.getHoveredSuggestion().getValue(),this.scrollToSuggestionBySelector("p.hovered")}getSuggestionValue(e){return e.getType()===SuggestionType.PREFIX?this.namespaces.getByPrefix(e.getValue()):e.getValue()}scrollToSuggestionBySelector(e,t){HtmlUtil.waitForElement(e).then(()=>{HtmlUtil.scrollElementIntoView(e,t)})}validateAndSearch(e){if(!this.skipValidation){if(!e.getValue())return void this.toastrService.error(TranslationService.translate("rdf_search.toasts.empty_input"));if(!UriUtil.isValidUri(this.getSuggestionValue(e)))return void this.toastrService.error(TranslationService.translate("rdf_search.toasts.invalid_uri"))}this.searchRdfResource(e)}onEscape(){this.preserveSearch||this.clearInput()}loadInputFromStorage(){this.preserveSearch&&(this.inputValue=this.resourceSearchStorageService.getInputValue()||"")}onResultsReceived(e){const t=null==e?void 0:e.getByValue(this.resourceSearchStorageService.getLastSelectedValue());t&&this.preserveSearch?(e.hoverSuggestion(t),this.searchResult=e.selectSuggestion(t),this.scrollToSuggestionBySelector("p.hovered.selected",{block:"start"})):(this.searchResult=e.hoverFirstSuggestion(),this.scrollToSuggestionBySelector("p.hovered",{block:"start"}))}static get is(){return"onto-search-resource-input"}static get originalStyleUrls(){return{$:["onto-search-resource-input.scss"]}}static get styleUrls(){return{$:["onto-search-resource-input.css"]}}static get properties(){return{context:{type:"string",mutable:!1,complexType:{original:"string",resolved:"string",references:{}},required:!1,optional:!1,docs:{tags:[],text:"The search resource component can appear more than once per page. This context\nis used to differentiate them. When a suggestion is selected different parents\nmay need to do different things. The context is emitted alongside the suggestion\nupon select."},getter:!1,setter:!1,reflect:!1,attribute:"context"},skipValidation:{type:"boolean",mutable:!1,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Whether the rdf resource pre-search validation should be skipped."},getter:!1,setter:!1,reflect:!1,attribute:"skip-validation",defaultValue:"false"},preserveSearch:{type:"boolean",mutable:!1,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Whether to preserve the input value and last selected suggestion\nIf true, both will be stored in local storage and loaded, when the component is rendered"},getter:!1,setter:!1,reflect:!1,attribute:"preserve-search"},isHidden:{type:"boolean",mutable:!1,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Whether the search component is currently hidden. Can be shown/hidden in the RDF search"},getter:!1,setter:!1,reflect:!1,attribute:"is-hidden",defaultValue:"false"},buttonConfig:{type:"unknown",mutable:!1,complexType:{original:"SearchButtonConfig",resolved:"SearchButtonConfig",references:{SearchButtonConfig:{location:"import",path:"@ontotext/workbench-api",id:"../api/dist/ontotext-workbench-api.d.ts::SearchButtonConfig",referenceLocation:"SearchButtonConfig"}}},required:!1,optional:!1,docs:{tags:[],text:"Button configuration for the search resource input.\nHolds buttons to be displayed, as well as additional configuration,\nsuch as whether the buttons should be treated as radio buttons."},getter:!1,setter:!1}}}static get states(){return{inputValue:{},searchResult:{},isAutocompleteEnabled:{}}}static get watchers(){return[{propName:"isHidden",methodName:"onVisibilityChange"}]}}