UNPKG

graphdb-workbench

Version:
2 lines 5.67 kB
export const __webpack_esm_id__=18961;export const __webpack_esm_ids__=[18961];export const __webpack_esm_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(84987),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.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:"36e8f37b8188fd8de748890b64e323346fd93d1d",class:"onto-dropdown "+(this.open?"open":"closed")},(0,e.h)("button",Object.assign({key:"079c4a67fc1e5d85d5cccb66c604308eaab6bcbc",class:"onto-dropdown-button",ref:o=>this.dropdownButtonElement=o},this.dropdownButtonGuideSelector?{[this.GUIDE_SELECTOR_ATTR]:this.dropdownButtonGuideSelector}:{},{"tooltip-placement":i,"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:"4d46c5f7a85f6e73e8d0230366d737cb06884354",class:"button-name"},null!==(o=this.dropdownButtonName)&&void 0!==o?o:this.translate(this.dropdownButtonNameLabelKey)),(0,e.h)("i",{key:"79bfa37905dc10589a19956eefdead58bb54a484",class:"ri-arrow-down-s-line "+(this.open?"rotate-180":"")})),(0,e.h)("div",{key:"b35baee3b82aac9305d4589c747c535811bf8a68",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},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 .ri-arrow-down-s-line{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.e155c04fc88447f95e6b.bundle.js.map