@kit-data-manager/pid-component/dist/components/p-DvNxtQhL.js

The PID-Component is a web component that can be used to evaluate and display FAIR Digital Objects, PIDs, ORCiDs, and possibly other identifiers in a user-friendly way. It is easily extensible to support other identifier types.

/*!
 * 
 * Copyright 2024-2026 Karlsruhe Institute of Technology.
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 *       https://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * 
 */
import{p as t,H as e,d as i,h as s,c as o,t as n}from"./p-Bw7bVt6t.js";const a=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.tooltipExpansionChange=i(this,"tooltipExpansionChange");this.isVisible=false;this.calculatedPosition="top";this.needsRowExpansion=false;this.position="top";this.maxWidth="250px";this.maxHeight="150px";this.fitContent=true;this.darkMode="light";this.tooltipId=`tooltip-${Math.random().toString(36).substring(2,11)}`;this.showTooltip=()=>{this.isVisible=true;setTimeout((()=>this.calculateOptimalPosition()),10)};this.hideTooltip=()=>{this.isVisible=false;this.restoreRowHeight()};this.toggleTooltip=t=>{t.preventDefault();t.stopPropagation();if(this.isVisible){this.hideTooltip()}else{this.showTooltip()}};this.handleButtonKeyDown=t=>{if(t.key==="Enter"||t.key===" "){t.preventDefault();this.toggleTooltip(t)}}}handleKeyDown(t){var e;if(t.key==="Escape"&&this.isVisible){this.hideTooltip();(e=this.buttonRef)===null||e===void 0?void 0:e.focus();t.preventDefault();t.stopPropagation()}}componentDidLoad(){this.calculatedPosition=this.position==="bottom"?"bottom":"top";this.tableRow=this.el.closest("tr")}getIsDarkMode(){if(this.darkMode==="dark"){return true}if(this.darkMode==="light"){return false}const t=this.el.closest("pid-component");if(t===null||t===void 0?void 0:t.classList.contains("bg-gray-800")){return true}if(this.darkMode==="system"){return window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches}return false}render(){const t=this.text&&this.text.trim().length>0;const e=`${this.isVisible?"Hide":"Show"} additional information`;const i=this.getIsDarkMode();return s(o,{key:"2ec01611ee20170c269867cca75dcc0617cbeb8a",class:"relative inline-block w-full",onMouseEnter:this.showTooltip,onMouseLeave:this.hideTooltip},this.isVisible&&s("span",{key:"71c1170e46db15c949c93747505810d0d998fe6d",class:"sr-only fixed","aria-live":"assertive"},"Information tooltip opened"),s("div",{key:"4abece66bd22d70d1f95a3f3fb8b36296e574f43",class:"flex items-center justify-between"},s("slot",{key:"08b1030dd634d91583efdd09d856d2327daee49f",name:"trigger"}),t&&s("button",{key:"1d9834e041f1967f9539624d2275ca773e9b4e6a",ref:t=>this.buttonRef=t,type:"button",class:`flex items-center rounded-full p-0.5 transition-colors duration-200 ${i?"text-gray-300 hover:bg-gray-700":"text-gray-600 hover:bg-gray-100"} focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:outline-hidden`,"aria-label":e,"aria-expanded":this.isVisible?"true":"false","aria-controls":this.tooltipId,"aria-describedby":this.isVisible?this.tooltipId:undefined,onClick:this.toggleTooltip,onKeyDown:this.handleButtonKeyDown,onFocus:this.showTooltip,onBlur:this.hideTooltip,tabIndex:0,title:e},s("svg",{key:"843032e15d8bdc55d8d797d44a415025822b8f4d","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",class:"icon icon-tabler icon-tabler-info-circle min-h-4 min-w-4 shrink-0",width:"20",height:"20",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor",fill:"none","stroke-linecap":"round","stroke-linejoin":"round",role:"img"},s("title",{key:"07c313618f1bdaa3fecbcd15b8537d5b05921b2e"},"Information icon"),s("desc",{key:"bd491f016a8a78c1b42494dba7464589d59aab4d"},"An icon indicating additional information is available"),s("path",{key:"52cbd7d3156efc50eb7d492b85a61663cf7136e4",stroke:"none",d:"M0 0h24v24H0z"}),s("circle",{key:"0ed085cb2563727f70970c249d27b56dbbed5401",cx:"12",cy:"12",r:"9"}),s("line",{key:"da0d079ddeb7a943e4a613a569d8425f0d2cb214",x1:"12",y1:"8",x2:"12.01",y2:"8"}),s("polyline",{key:"061ef2bcd8d73b7966a3ecc1fa86a85495c94ac2",points:"11 12 12 12 12 16 13 16"})))),t&&s("div",{key:"300f53d224ed53ec5056bbf50e69e59c201151b4",ref:t=>this.tooltipRef=t,id:this.tooltipId,role:"tooltip",class:`${this.isVisible?"block":"hidden"} absolute z-50 ${this.getPositionClasses(this.calculatedPosition)} w-full rounded border ${i?"border-gray-600 bg-gray-700 text-gray-200":"border-gray-300 bg-white text-gray-700"} p-1 text-xs whitespace-normal shadow-lg transition-opacity duration-200 ease-in-out`,style:this.getTooltipStyles(),"aria-live":"polite"},s("p",{key:"0f91843c7c982b4b992fdfc94c228d648830d8a4",class:"m-0 p-0"},this.text)))}calculateOptimalPosition(){if(!this.tooltipRef||!this.isVisible)return;const t=this.el.getBoundingClientRect();const e=this.el.closest("table");const i=(e===null||e===void 0?void 0:e.closest(".overflow-auto"))||(e===null||e===void 0?void 0:e.parentElement);if(!i){this.calculatedPosition=this.position==="bottom"?"bottom":"top";return}const s=i.getBoundingClientRect();const o=t.top-s.top;const n=s.bottom-t.bottom;const a=this.estimateTooltipHeight(this.text);const r=a+20;let d;let h=false;if(this.position==="top"&&o>=r){d=false}else if(this.position==="bottom"&&n>=r){d=true}else if(o>=n&&o>=r){d=false}else if(n>=r){d=true}else{d=true;h=true}this.calculatedPosition=d?"bottom":"top";this.needsRowExpansion=h;if(h){this.expandRowForTooltip(a)}}expandRowForTooltip(t){if(!this.tableRow)return;this.originalRowHeight=this.tableRow.style.height||"auto";const e=this.tableRow.offsetHeight;const i=t+40;const s=Math.max(e,i);this.tableRow.style.transition="height 0.2s ease-in-out";this.tableRow.style.height=`${s}px`;this.tooltipExpansionChange.emit({expand:true,requiredHeight:s})}restoreRowHeight(){if(!this.tableRow||!this.needsRowExpansion)return;this.tableRow.style.height=this.originalRowHeight||"auto";setTimeout((()=>{if(this.tableRow){this.tableRow.style.transition=""}}),200);this.needsRowExpansion=false;this.tooltipExpansionChange.emit({expand:false,requiredHeight:0})}estimateTooltipHeight(t){const e=document.createElement("div");e.setAttribute("aria-hidden","true");e.setAttribute("tabindex","-1");e.setAttribute("role","presentation");e.style.cssText=`\n      position: absolute;\n      visibility: hidden;\n      white-space: normal;\n      word-wrap: break-word;\n      max-width: ${this.maxWidth};\n      padding: 12px;\n      font-size: 12px;\n      line-height: 1.4;\n      border: 1px solid transparent;\n      pointer-events: none;\n    `;e.textContent=t;document.body.appendChild(e);const i=e.offsetHeight;document.body.removeChild(e);return i}getPositionClasses(t){switch(t){case"top":return"bottom-full left-0 mb-2";case"bottom":return"top-full left-0 mt-2";default:return"top-full left-0 mt-2"}}getTooltipStyles(){const t={maxWidth:this.maxWidth};if(this.needsRowExpansion||!this.fitContent){t.maxHeight=this.maxHeight;t.overflowY="auto"}return t}get el(){return this}},[260,"pid-tooltip",{text:[1],position:[1],maxWidth:[1,"max-width"],maxHeight:[1,"max-height"],fitContent:[4,"fit-content"],darkMode:[1,"dark-mode"],isVisible:[32],calculatedPosition:[32],needsRowExpansion:[32]},[[0,"keydown","handleKeyDown"]]]);function r(){if(typeof customElements==="undefined"){return}const t=["pid-tooltip"];t.forEach((t=>{switch(t){case"pid-tooltip":if(!customElements.get(n(t))){customElements.define(n(t),a)}break}}))}export{a as P,r as d};
//# sourceMappingURL=p-DvNxtQhL.js.map