graphdb-workbench
Version:
The web application for GraphDB APIs
1 lines • 6.57 kB
JavaScript
"use strict";var index=require("./index-jdsA9lN2.js"),translation_service=require("./translation.service-DjdwDpXN.js"),dropdownItemAlignment=require("./dropdown-item-alignment-DD8H-alk.js"),tooltipUtil=require("./tooltip-util-CmDLnWqH.js"),ontoTooltipPlacement=require("./onto-tooltip-placement-CTomd-7A.js");require("@ontotext/workbench-api");const ontoDropdownCss=":root{--onto-dropdown-button-color:var(--secondary-color, #373a3c);--onto-dropdown-button-background-color:var(--primary-color, #ac2925);--onto-dropdown-item-hover:var(--primary-color-dark, #ac2925);--onto-dropdown-button-icon-color:var(--primary-color, #ac2925);--onto-dropdown-button-open-icon-color:var(--icon-on-primary-color, rgba(255, 255, 255, 0.8));--onto-dropdown-color:#FFFFFF}: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(--onto-dropdown-button-icon-color)}.onto-dropdown.closed .button-name{color:var(--onto-dropdown-button-color)}.onto-dropdown.open{background-color:var(--onto-dropdown-button-icon-color);color:#FFFFFF;height:2rem}.onto-dropdown.open .button-icon{color:var(--onto-dropdown-button-open-icon-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(--onto-dropdown-color);background-color:var(--onto-dropdown-button-background-color);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(--onto-dropdown-color);background-color:var(--onto-dropdown-button-background-color);text-align:end;white-space:nowrap;border:none;outline:none;width:100%}.onto-dropdown .onto-dropdown-menu-item:hover{cursor:pointer;background-color:var(--onto-dropdown-item-hover)}.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){index.registerInstance(this,o),this.valueChanged=index.createEvent(this,"valueChanged"),this.GUIDE_SELECTOR_ATTR="guide-selector",this.open=!1,this.buttonTooltipContent="",this.dropdownTooltipTrigger="manual",this.iconClass="",this.tooltipPlacement=ontoTooltipPlacement.OntoTooltipPlacement.LEFT,this.dropdownAlignment=dropdownItemAlignment.DropdownItemAlignment.LEFT,this.autoClose=!0,this.toggleButtonClickHandler=()=>{tooltipUtil.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.TooltipUtil.updateTooltipContent(this.dropdownButtonElement,this.buttonTooltipContent):tooltipUtil.TooltipUtil.destroyTooltip(this.dropdownButtonElement))}render(){var o,t;const n=this.dropdownAlignment===dropdownItemAlignment.DropdownItemAlignment.RIGHT?"onto-dropdown-right-item-alignment":"onto-dropdown-left-item-alignment",e="function"==typeof this.tooltipPlacement?this.tooltipPlacement(this.open):this.tooltipPlacement;return index.h("div",{key:"942c4ef2b310ba3919fb8c2f45a23c08baae3e0c",class:"onto-dropdown "+(this.open?"open":"closed")},index.h("button",Object.assign({key:"c8a99d149031b6eed3e588bb0a5701c423709b42",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?index.h("i",{class:"button-icon "+this.iconClass}):"",index.h("span",{key:"3bf548f42fcd7bc6d41e4c1418c2dc2f69f2aea6",class:"button-name"},null!==(o=this.dropdownButtonName)&&void 0!==o?o:this.translate(this.dropdownButtonNameLabelKey)),index.h("i",{key:"d83fb64fcf1b06ed61d8dcde8830641ede615274",class:"fa-light fa-angle-down "+(this.open?"fa-rotate-180":"")})),index.h("div",{key:"7d2b9d955ce207afd7e37c8e21b4488fa2a07ba8",class:"onto-dropdown-menu "+n},null===(t=this.items)||void 0===t?void 0:t.map(o=>{var t;return index.h("button",Object.assign({class:"onto-dropdown-menu-item "+o.cssClass},o.guideSelector?{[this.GUIDE_SELECTOR_ATTR]:o.guideSelector}:{},{"tooltip-placement":ontoTooltipPlacement.OntoTooltipPlacement.LEFT,"tooltip-trigger":o.dropdownTooltipTrigger},this.tooltipTheme?{"tooltip-theme":this.tooltipTheme}:{},{onMouseEnter:this.setDropdownItemTooltip(o),onClick:this.itemClickHandler(o.value)}),o.iconClass?index.h("span",{class:"onto-dropdown-option-icon "+o.iconClass}):"",index.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?translation_service.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){console.error(o)}return t}get hostElement(){return index.getElement(this)}};OntoDropdown.style=ontoDropdownCss,exports.onto_dropdown=OntoDropdown;