graphdb-workbench
Version:
The web application for GraphDB APIs
1 lines • 3.11 kB
JavaScript
import{Host,h}from"@stencil/core";import{DropdownItem}from"../../models/dropdown/dropdown-item";import{ServiceProvider,LanguageService,LanguageContextService}from"../../../../../api/dist/ontotext-workbench-api";import{DropdownItemAlignment}from"../../models/dropdown/dropdown-item-alignment";export class OntoLanguageSelector{constructor(){this.languageService=ServiceProvider.get(LanguageService),this.languageContextService=ServiceProvider.get(LanguageContextService),this.items=[],this.dropdownAlignment=DropdownItemAlignment.LEFT}connectedCallback(){this.onLanguageChangeSubscription=this.languageContextService.onSelectedLanguageChanged(e=>this.changeLanguage(e)),this.items=this.getLanguageDropdownOptions()}disconnectedCallback(){this.onLanguageChangeSubscription&&this.onLanguageChangeSubscription()}render(){var e,t;return h(Host,{key:"faabdc9c474b053c32f4ae2c45cd79bd6166a255"},h("onto-dropdown",{key:"6c169e99e7bbddb3c76a126e83d05de1be615add",class:"onto-language-selector",onValueChanged:this.valueChangeHandler(),dropdownButtonNameLabelKey:this.currentLanguage?void 0:"language_selector.toggle_menu.label",dropdownButtonName:null!==(e=this.currentLanguage)&&void 0!==e?e:void 0,dropdownButtonTooltipLabelKey:this.currentLanguage?"language_selector.toggle_menu.tooltip":"language_selector.toggle_menu.label",dropdownAlignment:null!==(t=this.dropdownAlignment)&&void 0!==t?t:DropdownItemAlignment.RIGHT,dropdownTooltipTrigger:"mouseenter focus",iconClass:"icon-translation",items:this.items}))}valueChangeHandler(){return e=>this.onSelectedLanguageChanged(e)}changeLanguage(e){let t=e;t||(t=this.languageService.getDefaultLanguage()),this.currentLanguage=t,this.items=this.getLanguageDropdownOptions()}onSelectedLanguageChanged(e){this.languageContextService.updateSelectedLanguage(e.detail)}getLanguageDropdownOptions(){return this.languageService.getSupportedLanguages().map(e=>{const t=this.currentLanguage===e?"icon-tick":"";return(new DropdownItem).setNameLabelKey(`language_selector.language.${e}.label`).setTooltipLabelKey(`language_selector.language.${e}.tooltip.`+(this.currentLanguage===e?"selected":"not_selected")).setIconClass(t).setCssClass(e).setValue(e).setDropdownTooltipTrigger("mouseenter focus")})}static get is(){return"onto-language-selector"}static get originalStyleUrls(){return{$:["onto-language-selector.scss"]}}static get styleUrls(){return{$:["onto-language-selector.css"]}}static get properties(){return{dropdownAlignment:{type:"string",attribute:"dropdown-alignment",mutable:!1,complexType:{original:"DropdownItemAlignment",resolved:"DropdownItemAlignment.LEFT | DropdownItemAlignment.RIGHT",references:{DropdownItemAlignment:{location:"import",path:"../../models/dropdown/dropdown-item-alignment",id:"src/models/dropdown/dropdown-item-alignment.ts::DropdownItemAlignment"}}},required:!1,optional:!1,docs:{tags:[],text:"Specifies the dropdown items' alignment. If not provided, the items and the dropdown button will be aligned to the left."},getter:!1,setter:!1,reflect:!1,defaultValue:"DropdownItemAlignment.LEFT"}}}static get states(){return{currentLanguage:{}}}}