UNPKG

graphdb-workbench

Version:
2 lines 5.78 kB
export const __webpack_id__=18961;export const __webpack_ids__=[18961];export const __webpack_modules__={18961:(o,t,n)=>{n.r(t),n.d(t,{onto_dropdown:()=>l});var e=n(87848),i=n(79939),r=n(28499),s=n(90835),d=n(44123);n(57154);const l=class{constructor(o){(0,e.r)(this,o),this.valueChanged=(0,e.c)(this,"valueChanged"),this.logger=i.L.logger,this.GUIDE_SELECTOR_ATTR="guide-selector",this.open=!1,this.buttonTooltipContent="",this.dropdownTooltipTrigger="manual",this.iconClass="",this.tooltipPlacement=d.O.LEFT,this.dropdownAlignment=r.D.LEFT,this.autoClose=!1,this.toggleButtonClickHandler=()=>{s.T.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?s.T.updateTooltipContent(this.dropdownButtonElement,this.buttonTooltipContent):s.T.destroyTooltip(this.dropdownButtonElement))}render(){var o,t;const n=this.dropdownAlignment===r.D.RIGHT?"onto-dropdown-right-item-alignment":"onto-dropdown-left-item-alignment",i="function"==typeof this.tooltipPlacement?this.tooltipPlacement(this.open):this.tooltipPlacement;return(0,e.h)("div",{key:"cfe7e37b7e35a2c2f789db7627132e9f81fb3c52",class:"onto-dropdown "+(this.open?"open":"closed")},(0,e.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":i,"tooltip-trigger":this.dropdownTooltipTrigger,"tooltip-content":this.buttonTooltipContent},this.tooltipTheme?{"tooltip-theme":this.tooltipTheme}:{},{onMouseEnter:this.setDropdownButtonTooltip(),onClick:this.toggleButtonClickHandler}),this.iconClass?(0,e.h)("i",{class:"button-icon "+this.iconClass}):"",(0,e.h)("span",{key:"ba8774fa79bfbaf2829d924872fd912a4435f1b2",class:"button-name"},null!==(o=this.dropdownButtonName)&&void 0!==o?o:this.translate(this.dropdownButtonNameLabelKey)),(0,e.h)("i",{key:"e237048eb394e44f6d25f65c0c8834c761d14287",class:"fa-light fa-angle-down "+(this.open?"fa-rotate-180":"")})),(0,e.h)("div",{key:"cc19ea9e57cc629d6ad8957fb4d635d8e23eda43",class:"onto-dropdown-menu "+n},null===(t=this.items)||void 0===t?void 0:t.map(o=>{var t;return(0,e.h)("button",Object.assign({class:"onto-dropdown-menu-item "+o.cssClass},o.guideSelector?{[this.GUIDE_SELECTOR_ATTR]:o.guideSelector}:{},{"tooltip-placement":d.O.LEFT,"tooltip-trigger":o.dropdownTooltipTrigger},this.tooltipTheme?{"tooltip-theme":this.tooltipTheme}:{},{onMouseEnter:this.setDropdownItemTooltip(o),onClick:this.itemClickHandler(o.value)}),o.iconClass?(0,e.h)("span",{class:"onto-dropdown-option-icon "+o.iconClass}):"",(0,e.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?i.T.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(0,e.g)(this)}};l.style=":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}"},28499:(o,t,n)=>{var e;n.d(t,{D:()=>e}),function(o){o.RIGHT="right",o.LEFT="left"}(e||(e={}))}}; //# sourceMappingURL=18961.3fe635edef9b64109984.bundle.js.map