graphdb-workbench
Version:
The web application for GraphDB APIs
1 lines • 6 kB
JavaScript
import{r as registerInstance,c as createEvent,h,g as getElement}from"./index-I_gcXFWK.js";import{L as LoggerProvider,T as TranslationService}from"./translation.service-nljGIprK.js";import{D as DropdownItemAlignment}from"./dropdown-item-alignment-DghTf3pJ.js";import{T as TooltipUtil}from"./tooltip-util-BqOc8q8q.js";import{O as OntoTooltipPlacement}from"./onto-tooltip-placement-D_J2-9CG.js";import"@ontotext/workbench-api";const ontoDropdownCss=":host{display:block}.onto-dropdown{position:relative;width:fit-content}.onto-dropdown.closed .onto-dropdown-menu{display:none}.onto-dropdown.closed .button-icon{color:var(--gw-primary-base)}.onto-dropdown.closed .button-name{color:var(--gw-secondary-base)}.onto-dropdown.open{background-color:var(--gw-primary-base);color:#FFFFFF;height:2rem}.onto-dropdown.open .button-icon{color:var(--icon-on-primary-color)}.onto-dropdown .onto-dropdown-button{display:flex;flex-direction:row;gap:0.3em;align-items:center;font-size:1rem;font-weight:400;padding:0.4em 1rem;line-height:1.5;border:1px solid transparent;outline:none;color:var(--gw-primary-contrast-color);background-color:var(--gw-primary-base);transition:all 0.15s ease-out}.onto-dropdown .onto-dropdown-button .button-icon{font-size:1.4em}.onto-dropdown .onto-dropdown-button .fa-angle-down{color:rgba(0, 0, 0, 0.35);font-size:1.1em;transition:all 0.2s ease-in}.onto-dropdown .onto-dropdown-menu{position:absolute;margin:0;padding:0;z-index:1000;overflow-y:auto;max-height:340px;min-width:100%}.onto-dropdown .onto-dropdown-menu-item{display:block;text-decoration:none;font-size:1rem;font-weight:400;padding:0.5em 1.2em;color:var(--gw-primary-contrast-color);background-color:var(--gw-primary-base);text-align:end;white-space:nowrap;border:none;outline:none;width:100%}.onto-dropdown .onto-dropdown-menu-item:hover{cursor:pointer;background-color:var(--gw-primary-dark)}.onto-dropdown .onto-dropdown-button:hover{cursor:pointer}.onto-dropdown .onto-dropdown-button:hover .button-icon{transform:scale(1.2)}.onto-dropdown .onto-dropdown-option-icon{margin-right:0.2em}.onto-dropdown .onto-dropdown-right-item-alignment{right:0;left:auto}",OntoDropdown=class{constructor(o){registerInstance(this,o),this.valueChanged=createEvent(this,"valueChanged"),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(o){"Escape"===o.key&&this.closeMenu()}mouseClickListener(o){const t=o.target;this.autoClose&&!this.hostElement.contains(t)&&this.closeMenu()}componentDidUpdate(){this.dropdownButtonElement&&(this.buttonTooltipContent&&""!==this.buttonTooltipContent?TooltipUtil.updateTooltipContent(this.dropdownButtonElement,this.buttonTooltipContent):TooltipUtil.destroyTooltip(this.dropdownButtonElement))}render(){var o,t;const n=this.dropdownAlignment===DropdownItemAlignment.RIGHT?"onto-dropdown-right-item-alignment":"onto-dropdown-left-item-alignment",e="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:o=>this.dropdownButtonElement=o},this.dropdownButtonGuideSelector?{[this.GUIDE_SELECTOR_ATTR]:this.dropdownButtonGuideSelector}:{},{"tooltip-placement":e,"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!==(o=this.dropdownButtonName)&&void 0!==o?o: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 "+n},null===(t=this.items)||void 0===t?void 0:t.map(o=>{var t;return h("button",Object.assign({class:"onto-dropdown-menu-item "+o.cssClass},o.guideSelector?{[this.GUIDE_SELECTOR_ATTR]:o.guideSelector}:{},{"tooltip-placement":OntoTooltipPlacement.LEFT,"tooltip-trigger":o.dropdownTooltipTrigger},this.tooltipTheme?{"tooltip-theme":this.tooltipTheme}:{},{onMouseEnter:this.setDropdownItemTooltip(o),onClick:this.itemClickHandler(o.value)}),o.iconClass?h("span",{class:"onto-dropdown-option-icon "+o.iconClass}):"",h("span",null,null!==(t=o.name)&&void 0!==t?t:this.translate(o.nameLabelKey)))})))}setDropdownButtonTooltip(){return async()=>{var o;let t;t="function"==typeof this.dropdownButtonTooltip?await this.getTooltipContent(this.dropdownButtonTooltip):null!==(o=this.dropdownButtonTooltip)&&void 0!==o?o:this.translate(this.dropdownButtonTooltipLabelKey),this.buttonTooltipContent=t}}setDropdownItemTooltip(o){return async t=>{var n;const e=t.currentTarget;if("function"==typeof o.tooltip){let t=await this.getTooltipContent(o.tooltip);e.setAttribute("tooltip-content",t)}else e.setAttribute("tooltip-content",null!==(n=o.tooltip)&&void 0!==n?n:this.translate(o.tooltipLabelKey))}}itemClickHandler(o){return()=>this.onSelect(o)}translate(o){return o?TranslationService.translate(o):""}onSelect(o){this.open=!1,this.valueChanged.emit(o)}toggleComponent(){this.open=!this.open}closeMenu(){this.open=!1}async getTooltipContent(o){let t="";try{t=await o()}catch(o){this.logger.error(o)}return t}get hostElement(){return getElement(this)}};OntoDropdown.style=ontoDropdownCss;export{OntoDropdown as onto_dropdown};