UNPKG

graphdb-workbench

Version:
2 lines 6.24 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:()=>s});var e=n(87848),i=n(77050),r=n(28499),d=n(37792),l=n(44123);n(57154);const s=class{constructor(o){(0,e.r)(this,o),this.valueChanged=(0,e.c)(this,"valueChanged"),this.GUIDE_SELECTOR_ATTR="guide-selector",this.open=!1,this.buttonTooltipContent="",this.dropdownTooltipTrigger="manual",this.iconClass="",this.tooltipPlacement=l.O.LEFT,this.dropdownAlignment=r.D.LEFT,this.autoClose=!0,this.toggleButtonClickHandler=()=>{d.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?d.T.updateTooltipContent(this.dropdownButtonElement,this.buttonTooltipContent):d.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:"942c4ef2b310ba3919fb8c2f45a23c08baae3e0c",class:"onto-dropdown "+(this.open?"open":"closed")},(0,e.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":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:"3bf548f42fcd7bc6d41e4c1418c2dc2f69f2aea6",class:"button-name"},null!==(o=this.dropdownButtonName)&&void 0!==o?o:this.translate(this.dropdownButtonNameLabelKey)),(0,e.h)("i",{key:"d83fb64fcf1b06ed61d8dcde8830641ede615274",class:"fa-light fa-angle-down "+(this.open?"fa-rotate-180":"")})),(0,e.h)("div",{key:"7d2b9d955ce207afd7e37c8e21b4488fa2a07ba8",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":l.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){console.error(o)}return t}get hostElement(){return(0,e.g)(this)}};s.style=":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}"},28499:(o,t,n)=>{var e;n.d(t,{D:()=>e}),function(o){o.RIGHT="right",o.LEFT="left"}(e||(e={}))}}; //# sourceMappingURL=18961.d83ba5fd0855f3cfa7d7.bundle.js.map