graphdb-workbench/dist/shared-components/collection/components/onto-dropdown/onto-dropdown.js

The web application for GraphDB APIs

import{h}from"@stencil/core";import{TranslationService}from"../../services/translation.service";import{DropdownItemAlignment}from"../../models/dropdown/dropdown-item-alignment";import{TooltipUtil}from"../../utils/tooltip-util";import{OntoTooltipPlacement}from"../onto-tooltip/models/onto-tooltip-placement";import{LoggerProvider}from"../../services/logger-provider";export class OntoDropdown{constructor(){this.logger=LoggerProvider.logger,this.GUIDE_SELECTOR_ATTR="guide-selector",this.open=!1,this.buttonTooltipContent="",this.dropdownTooltipTrigger="manual",this.iconClass="",this.tooltipPlacement=OntoTooltipPlacement.LEFT,this.dropdownAlignment=DropdownItemAlignment.LEFT,this.autoClose=!1,this.toggleButtonClickHandler=()=>{TooltipUtil.destroyTooltip(this.dropdownButtonElement),this.buttonTooltipContent="",this.toggleComponent()}}keydownListener(t){"Escape"===t.key&&this.closeMenu()}mouseClickListener(t){const e=t.target;this.autoClose&&!this.hostElement.contains(e)&&this.closeMenu()}componentDidUpdate(){this.dropdownButtonElement&&(this.buttonTooltipContent&&""!==this.buttonTooltipContent?TooltipUtil.updateTooltipContent(this.dropdownButtonElement,this.buttonTooltipContent):TooltipUtil.destroyTooltip(this.dropdownButtonElement))}render(){var t,e;const o=this.dropdownAlignment===DropdownItemAlignment.RIGHT?"onto-dropdown-right-item-alignment":"onto-dropdown-left-item-alignment",n="function"==typeof this.tooltipPlacement?this.tooltipPlacement(this.open):this.tooltipPlacement;return h("div",{key:"cfe7e37b7e35a2c2f789db7627132e9f81fb3c52",class:"onto-dropdown "+(this.open?"open":"closed")},h("button",Object.assign({key:"c5dad75448c84a2ca04105429d14b331529b72a3",class:"onto-dropdown-button",ref:t=>this.dropdownButtonElement=t},this.dropdownButtonGuideSelector?{[this.GUIDE_SELECTOR_ATTR]:this.dropdownButtonGuideSelector}:{},{"tooltip-placement":n,"tooltip-trigger":this.dropdownTooltipTrigger,"tooltip-content":this.buttonTooltipContent},this.tooltipTheme?{"tooltip-theme":this.tooltipTheme}:{},{onMouseEnter:this.setDropdownButtonTooltip(),onClick:this.toggleButtonClickHandler}),this.iconClass?h("i",{class:"button-icon "+this.iconClass}):"",h("span",{key:"ba8774fa79bfbaf2829d924872fd912a4435f1b2",class:"button-name"},null!==(t=this.dropdownButtonName)&&void 0!==t?t:this.translate(this.dropdownButtonNameLabelKey)),h("i",{key:"e237048eb394e44f6d25f65c0c8834c761d14287",class:"fa-light fa-angle-down "+(this.open?"fa-rotate-180":"")})),h("div",{key:"cc19ea9e57cc629d6ad8957fb4d635d8e23eda43",class:"onto-dropdown-menu "+o},null===(e=this.items)||void 0===e?void 0:e.map(t=>{var e;return h("button",Object.assign({class:"onto-dropdown-menu-item "+t.cssClass},t.guideSelector?{[this.GUIDE_SELECTOR_ATTR]:t.guideSelector}:{},{"tooltip-placement":OntoTooltipPlacement.LEFT,"tooltip-trigger":t.dropdownTooltipTrigger},this.tooltipTheme?{"tooltip-theme":this.tooltipTheme}:{},{onMouseEnter:this.setDropdownItemTooltip(t),onClick:this.itemClickHandler(t.value)}),t.iconClass?h("span",{class:"onto-dropdown-option-icon "+t.iconClass}):"",h("span",null,null!==(e=t.name)&&void 0!==e?e:this.translate(t.nameLabelKey)))})))}setDropdownButtonTooltip(){return async()=>{var t;let e;e="function"==typeof this.dropdownButtonTooltip?await this.getTooltipContent(this.dropdownButtonTooltip):null!==(t=this.dropdownButtonTooltip)&&void 0!==t?t:this.translate(this.dropdownButtonTooltipLabelKey),this.buttonTooltipContent=e}}setDropdownItemTooltip(t){return async e=>{var o;const n=e.currentTarget;if("function"==typeof t.tooltip){let e=await this.getTooltipContent(t.tooltip);n.setAttribute("tooltip-content",e)}else n.setAttribute("tooltip-content",null!==(o=t.tooltip)&&void 0!==o?o:this.translate(t.tooltipLabelKey))}}itemClickHandler(t){return()=>this.onSelect(t)}translate(t){return t?TranslationService.translate(t):""}onSelect(t){this.open=!1,this.valueChanged.emit(t)}toggleComponent(){this.open=!this.open}closeMenu(){this.open=!1}async getTooltipContent(t){let e="";try{e=await t()}catch(t){this.logger.error(t)}return e}static get is(){return"onto-dropdown"}static get originalStyleUrls(){return{$:["onto-dropdown.scss"]}}static get styleUrls(){return{$:["onto-dropdown.css"]}}static get properties(){return{dropdownButtonName:{type:"string",attribute:"dropdown-button-name",mutable:!1,complexType:{original:"string",resolved:"string",references:{}},required:!1,optional:!1,docs:{tags:[],text:"The name for the dropdown button. This can either be a string (used directly as the button label)\nor a Stencil component (used to render the button content). It will be used if present;\notherwise, the {@link OntoDropdown#dropdownButtonNameLabelKey } will be used."},getter:!1,setter:!1,reflect:!1},dropdownButtonNameLabelKey:{type:"string",attribute:"dropdown-button-name-label-key",mutable:!1,complexType:{original:"string",resolved:"string",references:{}},required:!1,optional:!1,docs:{tags:[],text:"The translation label key for the dropdown button name. It will be used if {@link OntoDropdown#dropdownButtonName } is not present."},getter:!1,setter:!1,reflect:!1},dropdownButtonGuideSelector:{type:"string",attribute:"dropdown-button-guide-selector",mutable:!1,complexType:{original:"string",resolved:"string",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Defines the value of the `guide-selector` attribute for the dropdown trigger button."},getter:!1,setter:!1,reflect:!1},dropdownButtonTooltip:{type:"string",attribute:"dropdown-button-tooltip",mutable:!1,complexType:{original:"string | Awaitable<string>",resolved:"(() => Promise<string>) | string",references:{Awaitable:{location:"import",path:"@ontotext/workbench-api",id:"../api/dist/ontotext-workbench-api.d.ts::Awaitable"}}},required:!1,optional:!1,docs:{tags:[],text:"The dropdown button tooltip. It will be used if present; otherwise, the {@link OntoDropdown#dropdownButtonTooltipLabelKey } will be used."},getter:!1,setter:!1,reflect:!1},dropdownButtonTooltipLabelKey:{type:"string",attribute:"dropdown-button-tooltip-label-key",mutable:!1,complexType:{original:"string",resolved:"string",references:{}},required:!1,optional:!1,docs:{tags:[],text:"The translation label key for the dropdown button tooltip. It will be used if {@link OntoDropdown#dropdownButtonTooltip } is not present."},getter:!1,setter:!1,reflect:!1},dropdownTooltipTrigger:{type:"string",attribute:"dropdown-tooltip-trigger",mutable:!1,complexType:{original:"string",resolved:"string",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Specifies the events that trigger the dropdown button tooltip to appear. Multiple event names should be separated by spaces."},getter:!1,setter:!1,reflect:!1,defaultValue:"'manual'"},iconClass:{type:"string",attribute:"icon-class",mutable:!1,complexType:{original:"string",resolved:"string",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Icon class for the main dropdown button."},getter:!1,setter:!1,reflect:!1,defaultValue:"''"},items:{type:"unknown",attribute:"items",mutable:!1,complexType:{original:"DropdownItem<unknown>[]",resolved:"DropdownItem<unknown>[]",references:{DropdownItem:{location:"import",path:"../../models/dropdown/dropdown-item",id:"src/models/dropdown/dropdown-item.ts::DropdownItem"}}},required:!1,optional:!1,docs:{tags:[],text:"Array of dropdown options."},getter:!1,setter:!1},tooltipTheme:{type:"string",attribute:"tooltip-theme",mutable:!1,complexType:{original:"string",resolved:"string",references:{}},required:!1,optional:!1,docs:{tags:[],text:"The tooltip theme to be used. For more information {@link OntoTooltipConfiguration#theme }."},getter:!1,setter:!1,reflect:!1},tooltipPlacement:{type:"string",attribute:"tooltip-placement",mutable:!1,complexType:{original:"OntoTooltipPlacement | ((isOpen: boolean) => OntoTooltipPlacement)",resolved:"((isOpen: boolean) => OntoTooltipPlacement) | OntoTooltipPlacement.AUTO | OntoTooltipPlacement.BOTTOM | OntoTooltipPlacement.LEFT | OntoTooltipPlacement.RIGHT | OntoTooltipPlacement.TOP",references:{OntoTooltipPlacement:{location:"import",path:"../onto-tooltip/models/onto-tooltip-placement",id:"src/components/onto-tooltip/models/onto-tooltip-placement.ts::OntoTooltipPlacement"}}},required:!1,optional:!1,docs:{tags:[],text:"Specifies the items tooltip placement. Accepts a string of the placement or a function that returns the placement.\nThe function takes the isOpen parameter as a boolean and returns the placement as a string.\nIf not provided, the tooltip will be placed to the left."},getter:!1,setter:!1,reflect:!1,defaultValue:"OntoTooltipPlacement.LEFT"},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"},autoClose:{type:"boolean",attribute:"auto-close",mutable:!1,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Flag to determine if the dropdown should close automatically when a click occurs outside the dropdown."},getter:!1,setter:!1,reflect:!1,defaultValue:"false"}}}static get states(){return{open:{},buttonTooltipContent:{}}}static get events(){return[{method:"valueChanged",name:"valueChanged",bubbles:!0,cancelable:!0,composed:!0,docs:{tags:[],text:"Event emitted when a dropdown item is selected.\nThe event payload contains the value of the selected item."},complexType:{original:"any",resolved:"any",references:{}}}]}static get elementRef(){return"hostElement"}static get listeners(){return[{name:"keydown",method:"keydownListener",target:"window",capture:!1,passive:!1},{name:"click",method:"mouseClickListener",target:"window",capture:!1,passive:!1}]}}