UNPKG

@kit-data-manager/pid-component

Version:

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.

18 lines 64.5 kB
/*! * * 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{r as t,h as e,H as i,c as s,d as o}from"./p-BeCqCMz1.js";import{r as n,c as r}from"./p-4OKsKdsp.js";import"./p-b75a0a4a.entry.js";const a=class{constructor(e){t(this,e);this.copied=false;this.darkMode="light";this.copyValue=t=>{t.stopPropagation();t.preventDefault();const e=document.createElement("textarea");e.value=this.value;e.setAttribute("aria-hidden","true");e.setAttribute("readonly","readonly");e.style.cssText="position:fixed;top:0;left:0;width:2em;height:2em;padding:0;border:none;outline:none;box-shadow:none;opacity:0;";document.body.appendChild(e);e.focus();e.select();e.setSelectionRange(0,e.value.length);let i=false;try{i=document.execCommand("copy")}catch(t){}document.body.removeChild(e);if(i){this.showSuccess();return}if("clipboard"in navigator){navigator.clipboard.writeText(this.value).then((()=>this.showSuccess()),(()=>{}))}}}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.copied?"✓ Copied!":"Copy";const s=this.getAriaLabel();const o=this.getIsDarkMode();return e(i,{key:"c5c3499428ec7ab4b306458dc25af78c26e1b91d",class:"inline-block align-baseline text-xs"},this.copied&&e("span",{key:"eab38ff718680f01488fb1a3fe0cf36547a09daa",class:"sr-only","aria-live":"assertive"},"Content copied to clipboard"),e("button",{key:"ac8d35bc7e2cb5038846adc8134b20ca31ac09e0",class:`${this.copied?o?"bg-green-700":"bg-green-200":o?"bg-gray-700 hover:bg-gray-600":"bg-white hover:bg-blue-200"} relative z-30 max-h-min flex-none items-center rounded-md border ${o?"border-gray-600 text-gray-200 hover:text-white":"border-slate-500 text-slate-800 hover:text-slate-900"} px-2 py-0.5 font-mono font-medium transition-colors duration-200 focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:outline-hidden`,onClick:t=>this.copyValue(t),"aria-label":s,title:s,type:"button"},t))}showSuccess(){this.copied=true;setTimeout((()=>{this.copied=false}),1500)}getAriaLabel(){const t=this.label||"content";return this.copied?`${t} copied to clipboard`:`Copy ${t} to clipboard`}get el(){return s(this)}};const l=class{constructor(e){t(this,e);this.actions=[];this.darkMode="system"}render(){if(this.actions.length===0){return null}const t=this.darkMode==="dark"||this.darkMode==="system"&&window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches;const i=this.actionsId||`actions-${Math.random().toString(36).substring(2,11)}`;return e("div",{id:i,class:`actions-container sticky right-0 bottom-0 left-0 z-20 w-full ${t?"bg-gray-800":"bg-white"}`,role:"toolbar","aria-label":"Available actions"},e("span",{id:`${i}-desc`,class:"sr-only"},"The following links open related resources in new tabs"),e("div",{class:"flex flex-wrap justify-between gap-1","aria-describedby":`${i}-desc`},this.actions.map(((i,s)=>{const o="p-1 font-semibold text-sm rounded-sm border transition-colors duration-200";const n="focus:outline-hidden focus:ring-2 focus:ring-offset-1 focus:ring-blue-500";let r;if(t){switch(i.style){case"primary":r="bg-blue-700 text-white hover:bg-blue-600 border-blue-600";break;case"secondary":r="bg-slate-700 text-blue-300 hover:bg-slate-600 border-slate-600";break;case"danger":r="bg-red-700 text-white hover:bg-red-600 border-red-600";break;default:r="bg-gray-700 text-gray-200 hover:bg-gray-600 border-gray-600"}}else{switch(i.style){case"primary":r="bg-blue-500 text-white hover:bg-blue-600 border-blue-400";break;case"secondary":r="bg-slate-200 text-blue-500 hover:bg-slate-300 border-slate-300";break;case"danger":r="bg-red-500 text-white hover:bg-red-600 border-red-400";break;default:r="bg-gray-200 text-gray-700 hover:bg-gray-300 border-gray-300"}}return e("a",{key:`action-${i.title}-${s}`,href:i.link,class:`${o} ${r} ${n}`,rel:"noopener noreferrer",target:"_blank","aria-label":`${i.title} (opens in new tab)`,title:`${i.title} - Opens in a new tab`},e("span",null,i.title),e("span",{class:"sr-only"},"(opens in new tab)"))}))))}};const h=()=>`details summary::-webkit-details-marker{display:none}pid-collapsible.resize-both{resize:both!important;overflow:auto!important;max-width:100%!important;will-change:width,height;transition:none!important}pid-collapsible[expanded]{position:absolute;z-index:50;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}@media not all and (min-resolution:.001dpcm){@supports (-webkit-appearance:none){pid-collapsible details{display:flex!important;flex-direction:column!important}pid-collapsible details summary{display:block!important}pid-collapsible.resize-both{-webkit-resize:both!important;resize:both!important;overflow:auto!important;position:relative!important}pid-collapsible.resize-both:after{content:"";position:absolute;bottom:0;right:0;width:15px;height:15px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-width='2' d='M22 2 2 22M22 8 8 22M22 14l-8 8'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:100% 100%;cursor:nwse-resize;z-index:10;pointer-events:none}}}pid-collapsible.resize-both:after{content:"";position:absolute;bottom:0;right:0;width:15px;height:15px;cursor:nwse-resize;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-width='2' d='M22 2 2 22M22 8 8 22M22 14l-8 8'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:100% 100%;z-index:10;pointer-events:none}@supports (-webkit-appearance:none) and (not (display:-webkit-box)){pid-collapsible.resize-both{resize:both!important;overflow:auto!important;display:block!important;position:relative!important}pid-collapsible.resize-both:before{content:"";display:block;width:100%;height:100%;position:absolute;top:0;left:0;pointer-events:none;z-index:-1}}@supports (-webkit-appearance:none){pid-collapsible details{display:-webkit-box!important;display:-webkit-flex!important;display:flex!important;-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;-webkit-flex-direction:column!important;flex-direction:column!important;min-height:100%}}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm){pid-collapsible{-webkit-transform:translateZ(0);transform:translateZ(0)}pid-collapsible.resizing{pointer-events:none;contain:layout size}pid-collapsible.resize-both{-webkit-resize:both!important}pid-collapsible.resize-both:after{content:"";position:absolute;bottom:0;right:0;width:15px;height:15px;cursor:nwse-resize;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-width='2' d='M22 2 2 22M22 8 8 22M22 14l-8 8'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:100% 100%;z-index:10;pointer-events:none}}:root{--z-back:-1;--z-resize:10;--z-content:20;--z-footer:30;--z-header:50}:host{display:block;--initial-width:500px;--initial-height:300px;--min-width:300px;--min-height:200px}@media (max-width:768px){:host{--initial-width:400px;--min-width:250px}}@media (max-width:480px){:host{--initial-width:300px;--min-width:200px}}@media (prefers-contrast:more){pid-collapsible summary{border:1px solid}pid-collapsible.resize-both:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-width='3' d='M22 2 2 22M22 8 8 22M22 14l-8 8'/%3E%3C/svg%3E");opacity:.9}}@media print{pid-collapsible.resize-both{resize:none!important}pid-collapsible.resize-both:after{display:none!important}}pid-collapsible summary:focus-visible{outline:2px solid #0ea5e9;outline-offset:2px}pid-collapsible .overflow-visible,pid-pagination .overflow-visible{overflow:visible!important}`;const d={DEFAULT_WIDTH:"500px",DEFAULT_HEIGHT:"300px",MIN_WIDTH:300,MIN_HEIGHT:200,PADDING_WIDTH:40,PADDING_HEIGHT:60,FOOTER_HEIGHT:60};const c={RESIZE_HANDLE:10,FOOTER_CONTENT:30,STICKY_ELEMENTS:50};const u=`\n <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path d="M22 2L2 22" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>\n <path d="M22 8L8 22" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>\n <path d="M22 14L14 22" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>\n </svg>\n`;const f=class{constructor(e){t(this,e);this.collapsibleToggle=o(this,"collapsibleToggle");this.contentHeightChange=o(this,"contentHeightChange");this.open=false;this.emphasize=false;this.darkMode="system";this.lineHeight=24;this.showFooter=false;this.expanded=false;this.previewScrollable=false;this.isDarkMode=false;this.isToggling=false;this.lastClickTime=0;this.pendingClickTimer=null;this.resizeDebounceTimer=null;this.lastResizeDimensions={width:0,height:0};this.handleDarkModeChange=()=>{this.updateDarkMode()};this.handlePageChange=t=>{console.debug("Page changed to:",t.detail);this.recalculateContentDimensions()};this.handleSafariCompatibility=t=>{if(!this.isSafari()||this.isToggling)return;const e=t.target;if((e===null||e===void 0?void 0:e.closest("copy-button"))||(e===null||e===void 0?void 0:e.closest('[slot="summary-actions"]'))||(e===null||e===void 0?void 0:e.closest("button"))||(e===null||e===void 0?void 0:e.closest("a"))){return}t.preventDefault();t.stopPropagation();this.performToggle(!this.open)};this.handleToggle=t=>{t.preventDefault();t.stopPropagation();const e=this.el.querySelector("details");if(e){e.open=this.open}};this.handleSummaryClick=t=>{const e=t.composedPath();const i=e.some((t=>{var e;return t instanceof HTMLElement&&(t.tagName==="BUTTON"||t.tagName==="A"||t.tagName==="COPY-BUTTON"||t.tagName==="PID-ACTIONS"||((e=t.getAttribute)===null||e===void 0?void 0:e.call(t,"role"))==="button")}));if(i){return}t.preventDefault();t.stopPropagation();if(this.isToggling)return;const s=Date.now();const o=s-this.lastClickTime;this.lastClickTime=s;if(this.pendingClickTimer!==null){clearTimeout(this.pendingClickTimer);this.pendingClickTimer=null}if(o<300&&this.open){this.performToggle(false)}else{this.pendingClickTimer=setTimeout((()=>{this.pendingClickTimer=null;this.performToggle(!this.open)}),200)}}}watchOpen(){this.updateAppearance();if(this.open)this.recalculateContentDimensions()}watchDarkMode(){this.updateDarkMode()}componentWillLoad(){this.currentWidth=this.initialWidth||d.DEFAULT_WIDTH;this.currentHeight=this.initialHeight||d.DEFAULT_HEIGHT;this.initializeDarkMode()}componentDidLoad(){this.setupResizeObserver();this.updateAppearance();this.addBrowserCompatibilityListeners();this.addComponentEventListeners();if(/^((?!chrome|android).)*safari/i.test(navigator.userAgent)){this.el.style.verticalAlign="top"}}disconnectedCallback(){this.cleanupResources();this.cleanupDarkModeListener()}async recalculateContentDimensions(){if(this.open){if(this.resizeDebounceTimer!==null){window.cancelAnimationFrame(this.resizeDebounceTimer)}return new Promise((t=>{this.resizeDebounceTimer=window.requestAnimationFrame((()=>{if(this.lastExpandedWidth){this.currentWidth=this.lastExpandedWidth}else{this.currentWidth=this.initialWidth||this.getResponsiveDefaultWidth()}this.el.style.width=this.currentWidth;this.el.style.height="auto";this.el.style.maxHeight="max-content";requestAnimationFrame((()=>{if(this.open){const t=this.el.scrollHeight;this.el.style.height=`${t}px`;this.el.style.maxHeight=`${t}px`}this.lastExpandedWidth=this.currentWidth;const e=this.calculateContentDimensions();this.contentHeightChange.emit({maxHeight:e.maxHeight});this.resizeDebounceTimer=null;t(e)}))}))}))}return null}render(){const t=this.getHostClasses();const s=this.getDetailsClasses();const o=this.getSummaryClasses();const n=this.getContentClasses();const r=this.getFooterClasses();const a=this.getFooterActionsClasses();return e(i,{key:"cbcf55c166323c79e344ead5bd5811d19088c6e4",class:t},e("details",{key:"6b2e144d57340c7fc0637c62a1e618429ff423b4",class:s,open:this.open,onToggle:this.handleToggle},e("summary",{key:"4c053bf0b5a0609e7e5f37abf0892dc459dc08a5",class:o,onClick:this.handleSummaryClick},this.emphasize&&e("span",{key:"8a264bf2bd3223734bf3df20b244c987a02bb1dd"},e("svg",{key:"2ea1c2df5db8316f4bdc14f3d1e1f2c8b3bb9403",class:`${this.isDarkMode?"text-gray-300":"text-gray-600"} transition-transform duration-200 group-open:rotate-180 mr-2 ml-1`,fill:"none",height:"12",width:"12",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"1.5",viewBox:"0 0 12 12","aria-hidden":"true"},e("path",{key:"3c4e317acb12ea1ac020f5ea6fe654c0b154ce0e",d:"M 2 3 l 4 6 l 4 -6"}))),e("span",{key:"3cbead450cf92831327ff381033ebe4c499af442",class:`block ${this.previewScrollable?"shrink-0":"min-w-0 whitespace-nowrap overflow-hidden text-ellipsis"}`},e("slot",{key:"5706002a1de3ed07ddf9f5fc21e9c223c36b3eb4",name:"summary"})),e("div",{key:"ca8c041962942bb4eec5d713aa6ad34d4dbd021a",class:`ml-auto shrink-0 ${this.previewScrollable?"sticky right-0":""}`},e("slot",{key:"6fc238f5b0b681da07e37ae57e3aa1d3146e1895",name:"summary-actions"}))),e("div",{key:"41d4b51f1e6fd78ed9ff8e1fa7f7bb3dcfc45a25",class:`${n}`},e("slot",{key:"ef9f60ae2c92cbae6d16b68b68aa9def3b9c806b"})),this.showFooter&&this.open&&e("div",{key:"2dade649916ee68dd3fe367e485ad5bbacd644d9",class:r},e("div",{key:"db9ac1fe6b58291e6ccd4f214b2123832962ccd4",class:`z-50 overflow-visible border-b ${this.isDarkMode?"border-gray-700 bg-gray-800":"border-gray-100 bg-white"}`},e("slot",{key:"36ee7ecacee44fdf2a1f2e8d92a83f7e980f1ea7",name:"footer"})),e("div",{key:"38969d3f4c65671dc51e66cfbc076094115cb38c",class:a},e("div",{key:"9666f30918d3c437211c33d351e0d3cdc9a9ffd6",class:"grow overflow-visible"},e("slot",{key:"fb9431b73a3d54bf2d85db2ce51565a161b67715",name:"footer-left"})),e("div",{key:"a599293e40865c70bf9936a4e3c377cf833986cc",class:"flex shrink-0 items-center gap-2 overflow-visible"},e("slot",{key:"57c7cfe3db67cc7706d32281b1b580bd705f5432",name:"footer-actions"}))))))}initializeDarkMode(){if(window.matchMedia){this.darkModeMediaQuery=window.matchMedia("(prefers-color-scheme: dark)");this.updateDarkMode();if(this.darkModeMediaQuery.addEventListener){this.darkModeMediaQuery.addEventListener("change",this.handleDarkModeChange)}else if(this.darkModeMediaQuery.addListener){this.darkModeMediaQuery.addListener(this.handleDarkModeChange)}}else{this.isDarkMode=this.darkMode==="dark"}}updateDarkMode(){if(this.darkMode==="dark"){this.isDarkMode=true}else if(this.darkMode==="light"){this.isDarkMode=false}else if(this.darkMode==="system"&&this.darkModeMediaQuery){this.isDarkMode=this.darkModeMediaQuery.matches}}cleanupDarkModeListener(){if(this.darkModeMediaQuery){if(this.darkModeMediaQuery.removeEventListener){this.darkModeMediaQuery.removeEventListener("change",this.handleDarkModeChange)}else if(this.darkModeMediaQuery.removeListener){this.darkModeMediaQuery.removeListener(this.handleDarkModeChange)}}}setupResizeObserver(){if(!window.ResizeObserver){console.warn("ResizeObserver not supported in this browser");return}if(this.resizeObserver){this.resizeObserver.disconnect()}this.resizeObserver=new ResizeObserver((t=>{if(!this.open)return;const e=t[0];if(!e)return;const i=e.contentRect.width;const s=e.contentRect.height;if(Math.abs(i-this.lastResizeDimensions.width)<2&&Math.abs(s-this.lastResizeDimensions.height)<2){return}this.lastResizeDimensions={width:i,height:s};if(this.resizeDebounceTimer!==null){window.cancelAnimationFrame(this.resizeDebounceTimer)}this.resizeDebounceTimer=window.requestAnimationFrame((()=>{this.currentWidth=`${i}px`;this.currentHeight=`${s}px`;this.resizeDebounceTimer=null}))}));if(this.open){this.resizeObserver.observe(this.el)}}addBrowserCompatibilityListeners(){const t=this.el.querySelector("details");if(!t)return;const e=t.querySelector("summary");if(!e)return;e.addEventListener("click",this.handleSafariCompatibility,{capture:true})}isSafari(){return/^((?!chrome|android).)*safari/i.test(navigator.userAgent)&&!/CriOS|FxiOS|EdgiOS/i.test(navigator.userAgent)}addComponentEventListeners(){const t=this.el.querySelectorAll("pid-data-table");t.forEach((t=>{t.addEventListener("pageChange",this.handlePageChange)}))}removeComponentEventListeners(){const t=this.el.querySelectorAll("pid-data-table");t.forEach((t=>{t.removeEventListener("pageChange",this.handlePageChange)}))}cleanupResources(){if(this.resizeDebounceTimer!==null){window.cancelAnimationFrame(this.resizeDebounceTimer);this.resizeDebounceTimer=null}if(this.resizeObserver){this.resizeObserver.disconnect();this.resizeObserver=null}this.removeComponentEventListeners();const t=this.el.querySelector("details");if(t){const e=t.querySelector("summary");if(e){e.removeEventListener("click",this.handleSafariCompatibility,{capture:true})}}}updateAppearance(){this.resetStyles();if(this.open){this.applyExpandedStyles()}else{this.applyCollapsedStyles()}}resetStyles(){const t=["resize-both","overflow-auto","w-auto","inline-block","align-middle","align-top","overflow-hidden","py-0","my-0","float-left","bg-white","block"];t.forEach((t=>{if(this.el.classList.contains(t)){this.el.classList.remove(t)}}));this.el.style.width="";this.el.style.height="";this.el.style.maxWidth="";this.el.style.maxHeight="";this.el.style.resize="";this.el.style.lineHeight="";this.el.style.overflow=""}applyExpandedStyles(){try{this.el.classList.add("resize-both","relative","block");if(this.emphasize){this.el.classList.add("bg-white")}if(this.lastExpandedWidth){this.currentWidth=this.lastExpandedWidth}else if(this.initialWidth){this.currentWidth=this.initialWidth}else{this.currentWidth=this.getResponsiveDefaultWidth()}this.el.style.width=this.currentWidth;this.el.style.height="auto";this.el.style.maxHeight="max-content";const t=this.el.querySelector("summary");if(t){t.style.height=`${this.lineHeight}px`;t.style.minHeight=`${this.lineHeight}px`;t.style.maxHeight=`${this.lineHeight}px`}this.el.style.resize="both";this.addResizeIndicator();requestAnimationFrame((()=>{if(this.open){const t=this.el.scrollHeight;this.el.style.height=`${t}px`;this.el.style.maxHeight=`${t}px`}}));if(this.resizeObserver){this.resizeObserver.observe(this.el)}}catch(t){console.error("Failed to apply expanded styles:",t)}}getResponsiveDefaultWidth(){var t;let e=this.el;while(e){const t=e.getRootNode();if(t instanceof ShadowRoot){e=t.host;continue}if(e instanceof HTMLElement){const t=e.tagName.toLowerCase();if(t==="pid-component"||t==="pid-collapsible"){e=e.parentElement;continue}}break}const i=e instanceof HTMLElement?e:null;const s=(t=i===null||i===void 0?void 0:i.clientWidth)!==null&&t!==void 0?t:window.innerWidth;if(s<600){return"100%"}if(s<=1024){return"70%"}return"50%"}calculateContentDimensions(){const t=this.el.querySelector(".grow");const e=(t===null||t===void 0?void 0:t.scrollWidth)||d.MIN_WIDTH;const i=(t===null||t===void 0?void 0:t.scrollHeight)||d.MIN_HEIGHT;const s=this.showFooter?d.FOOTER_HEIGHT:0;const o=e+d.PADDING_WIDTH;const n=i+d.PADDING_HEIGHT+s;return{contentWidth:e,contentHeight:i,maxWidth:o,maxHeight:n}}applyCollapsedStyles(){if(this.el.style.width&&this.el.style.width!=="auto"){this.lastExpandedWidth=this.el.style.width;this.currentWidth=this.el.style.width}if(this.el.style.height&&this.el.style.height!==`${this.lineHeight}px`){this.lastExpandedHeight=this.el.style.height;this.currentHeight=this.el.style.height}if(this.lastExpandedWidth||this.lastExpandedHeight){console.debug("Storing dimensions for later restoration:",{width:this.lastExpandedWidth,height:this.lastExpandedHeight})}this.el.style.maxWidth="";this.el.style.maxHeight="";this.el.style.width="auto";this.el.classList.add("w-auto","inline-block","py-0","my-0");this.el.style.overflow="clip";this.el.style.height=`${this.lineHeight}px`;this.el.style.lineHeight=`${this.lineHeight}px`;this.el.style.minHeight=`${this.lineHeight}px`;this.el.style.maxHeight=`${this.lineHeight}px`;if(this.isSafari()){this.el.style.marginBottom="1px";this.el.style.verticalAlign="top"}this.el.style.resize="none";this.removeResizeIndicator();if(this.resizeObserver){this.resizeObserver.unobserve(this.el)}}addResizeIndicator(){try{this.removeResizeIndicator();const t=document.createElement("div");t.className=`absolute bottom-0 right-0 w-4 h-4 opacity-60 pointer-events-none resize-indicator cursor-nwse-resize text-slate-400 z-${c.RESIZE_HANDLE}`;t.innerHTML=u;t.setAttribute("aria-hidden","true");this.el.appendChild(t)}catch(t){console.error("Failed to add resize indicator:",t)}}removeResizeIndicator(){const t=this.el.querySelectorAll(".resize-indicator");t.forEach((t=>t.remove()))}performToggle(t){this.isToggling=true;const e=this.el.querySelector("details");this.open=t;if(e){e.open=t}this.collapsibleToggle.emit(this.open);this.updateAppearance();if(this.open&&this.isSafari()){setTimeout((()=>this.recalculateContentDimensions()),50)}setTimeout((()=>{if(e)e.open=this.open;this.isToggling=false}),50)}getHostClasses(){const t=["relative","font-sans","leading-normal"];if(this.emphasize){t.push("box-border","border","rounded-md","shadow-xs");if(this.isDarkMode){t.push("border-gray-600")}else{t.push("border-gray-300")}}if(this.open){t.push("mb-2","max-w-full","text-xs","block")}else{t.push(this.initialWidth==="100%"?"max-w-full":"max-w-md");t.push("my-0","text-sm","inline-block")}if(this.isDarkMode){t.push("text-white")}return t.join(" ")}getDetailsClasses(){const t=["group","w-full","font-sans","transition-all","duration-200","ease-in-out","flex","flex-col"];if(this.open);else{t.push("text-clip","overflow-hidden")}if(this.isDarkMode){t.push("bg-gray-800","text-white")}return t.join(" ")}getSummaryClasses(){const t=["font-bold","font-mono","cursor-pointer","list-none","flex","items-center","focus:outline-hidden","focus-visible:ring-2","focus-visible:ring-blue-400","focus-visible:ring-offset-1","rounded-lg","marker:hidden","[&::-webkit-details-marker]:hidden","select-none","py-0","min-w-1/10"];if(this.open){t.push("sticky","top-0",`z-${c.STICKY_ELEMENTS}`,"overflow-x-auto","backdrop-blur-xs");if(this.isDarkMode){t.push("bg-gray-800");if(this.emphasize){t.push("border-b","box-border","border-gray-700")}}else{t.push("bg-white","text-ellipsis");if(this.emphasize){t.push("border-b","box-border","border-gray-100")}}}else{t.push("whitespace-nowrap","overflow-hidden","text-ellipsis","truncate","max-w-full")}t.push(`h-[${this.lineHeight}px]`);return t.join(" ")}getContentClasses(){const t=["grow","flex","flex-col","min-h-0"];if(this.open);else{t.push("overflow-hidden","p-0")}if(this.isDarkMode){t.push("bg-gray-800","text-white")}return t.join(" ")}getFooterClasses(){const t=["flex","flex-col","w-full","mt-auto","sticky","bottom-0","left-0","right-0","border-t",`z-${c.FOOTER_CONTENT}`,"backdrop-blur-xs"];if(this.isDarkMode){t.push("bg-gray-800","border-gray-700")}else{t.push("bg-white","border-gray-200")}return t.join(" ")}getFooterActionsClasses(){const t=["flex","items-center","justify-between","gap-2","p-1","min-h-12","shrink-0","overflow-x-auto"];if(this.isDarkMode){t.push("bg-gray-800")}else{t.push("bg-white")}return t.join(" ")}get el(){return s(this)}static get watchers(){return{open:[{watchOpen:0}],darkMode:[{watchDarkMode:0}]}}};f.style=h();function p(t){if(!t||t.length===0){return n}const e=[];for(const i of t){const t=n.find((t=>t.key===i));if(t){e.push(t)}else{console.warn(`Parser: Unknown renderer key "${i}" in ordered renderer list, skipping.`)}}return e}class b{static async getEstimatedPriority(t){for(let e=0;e<n.length;e++){const i=new n[e].constructor(t);const s=i.quickCheck();if(s===true){return e}if(s===undefined){const t=await i.hasMeaningfulInformation();if(t){return e}}}return 0}static getBestFitQuick(t,e){const i=p(e);if(e&&e.length>0){for(const e of i){const i=new e.constructor(t);if(i.quickCheck()){return e.key}}return null}let s=null;for(let e=i.length-1;e>=0;e--){const o=i[e];const n=new o.constructor(t);if(n.quickCheck()&&o.key!=="FallbackType"){s=o.key}}return s}static async getBestFit(t,e,i,s=true){const o=p(i);const n=i&&i.length>0;if(n){for(const i of o){const s=new i.constructor(t);const o=s.quickCheck();if(o===true){b.applySettings(s,e);await s.init();return s}if(o===undefined||!o){if(await s.hasMeaningfulInformation()){b.applySettings(s,e);await s.init();return s}}}if(s){return b.getBestFit(t,e,undefined,false)}return null}const r=[];for(let e=0;e<o.length;e++){const i=new o[e].constructor(t);const s=i.quickCheck();if(s===true||s===undefined){r.push({index:e,obj:i,uncertain:s===undefined})}}if(r.length===0){return null}const a=await Promise.all(r.map((async({index:t,obj:e})=>{const i=await e.hasMeaningfulInformation();const s=this.calculateRelevance(e,t);return{obj:e,meaningful:i,relevance:s,index:t}})));const l=a.filter((t=>t.meaningful));if(l.length===0){return null}l.sort(((t,e)=>{if(e.relevance!==t.relevance){return e.relevance-t.relevance}return t.index-e.index}));const h=l[0].obj;b.applySettings(h,e);await h.init();return h}static calculateRelevance(t,e){const i=1e3;const s=1;const o=1;const r=(n.length-e)*i;const a=t.items.length*s;const l=t.actions.length*o;return r+a+l}static applySettings(t,e){var i;try{const s=t.getSettingsKey();const o=(i=e.find((t=>t.type===s)))===null||i===void 0?void 0:i.values;if(o)t.settings=o}catch(t){console.warn("Error while adding settings to object:",t)}}}const g=(t,e)=>e.some((e=>t instanceof e));let m;let w;function y(){return m||(m=[IDBDatabase,IDBObjectStore,IDBIndex,IDBCursor,IDBTransaction])}function x(){return w||(w=[IDBCursor.prototype.advance,IDBCursor.prototype.continue,IDBCursor.prototype.continuePrimaryKey])}const v=new WeakMap;const k=new WeakMap;const $=new WeakMap;function C(t){const e=new Promise(((e,i)=>{const s=()=>{t.removeEventListener("success",o);t.removeEventListener("error",n)};const o=()=>{e(T(t.result));s()};const n=()=>{i(t.error);s()};t.addEventListener("success",o);t.addEventListener("error",n)}));$.set(e,t);return e}function z(t){if(v.has(t))return;const e=new Promise(((e,i)=>{const s=()=>{t.removeEventListener("complete",o);t.removeEventListener("error",n);t.removeEventListener("abort",n)};const o=()=>{e();s()};const n=()=>{i(t.error||new DOMException("AbortError","AbortError"));s()};t.addEventListener("complete",o);t.addEventListener("error",n);t.addEventListener("abort",n)}));v.set(t,e)}let M={get(t,e,i){if(t instanceof IDBTransaction){if(e==="done")return v.get(t);if(e==="store"){return i.objectStoreNames[1]?undefined:i.objectStore(i.objectStoreNames[0])}}return T(t[e])},set(t,e,i){t[e]=i;return true},has(t,e){if(t instanceof IDBTransaction&&(e==="done"||e==="store")){return true}return e in t}};function D(t){M=t(M)}function I(t){if(x().includes(t)){return function(...e){t.apply(E(this),e);return T(this.request)}}return function(...e){return T(t.apply(E(this),e))}}function P(t){if(typeof t==="function")return I(t);if(t instanceof IDBTransaction)z(t);if(g(t,y()))return new Proxy(t,M);return t}function T(t){if(t instanceof IDBRequest)return C(t);if(k.has(t))return k.get(t);const e=P(t);if(e!==t){k.set(t,e);$.set(e,t)}return e}const E=t=>$.get(t);function S(t,e,{blocked:i,upgrade:s,blocking:o,terminated:n}={}){const r=indexedDB.open(t,e);const a=T(r);if(s){r.addEventListener("upgradeneeded",(t=>{s(T(r.result),t.oldVersion,t.newVersion,T(r.transaction),t)}))}if(i){r.addEventListener("blocked",(t=>i(t.oldVersion,t.newVersion,t)))}a.then((t=>{if(n)t.addEventListener("close",(()=>n()));if(o){t.addEventListener("versionchange",(t=>o(t.oldVersion,t.newVersion,t)))}})).catch((()=>{}));return a}const B=["get","getKey","getAll","getAllKeys","count"];const O=["put","add","delete","clear"];const L=new Map;function F(t,e){if(!(t instanceof IDBDatabase&&!(e in t)&&typeof e==="string")){return}if(L.get(e))return L.get(e);const i=e.replace(/FromIndex$/,"");const s=e!==i;const o=O.includes(i);if(!(i in(s?IDBIndex:IDBObjectStore).prototype)||!(o||B.includes(i))){return}const n=async function(t,...e){const n=this.transaction(t,o?"readwrite":"readonly");let r=n.store;if(s)r=r.index(e.shift());return(await Promise.all([r[i](...e),o&&n.done]))[0]};L.set(e,n);return n}D((t=>({...t,get:(e,i,s)=>F(e,i)||t.get(e,i,s),has:(e,i)=>!!F(e,i)||t.has(e,i)})));const H=["continue","continuePrimaryKey","advance"];const A={};const N=new WeakMap;const _=new WeakMap;const R={get(t,e){if(!H.includes(e))return t[e];let i=A[e];if(!i){i=A[e]=function(...t){N.set(this,_.get(this)[e](...t))}}return i}};async function*j(...t){let e=this;if(!(e instanceof IDBCursor)){e=await e.openCursor(...t)}if(!e)return;e=e;const i=new Proxy(e,R);_.set(i,e);$.set(i,E(e));while(e){yield i;e=await(N.get(i)||e.continue());N.delete(i)}}function W(t,e){return e===Symbol.asyncIterator&&g(t,[IDBIndex,IDBObjectStore,IDBCursor])||e==="iterate"&&g(t,[IDBIndex,IDBObjectStore])}D((t=>({...t,get(e,i,s){if(W(e,i))return j;return t.get(e,i,s)},has(e,i){return W(e,i)||t.has(e,i)}})));const q="pid-component";const K=1;class G{constructor(){this.dbPromise=S(q,K,{upgrade(t){const e=t.createObjectStore("entities",{keyPath:"value"});e.createIndex("by-context","context",{unique:false});const i=t.createObjectStore("relations",{autoIncrement:true});i.createIndex("by-start","start",{unique:false});i.createIndex("by-description","description",{unique:false});i.createIndex("by-end","end",{unique:false})}})}async addEntity(t,e){const i=document.documentURI;const s=await this.dbPromise;const o=this.normalizeKey(t.value);await s.add("entities",{value:o,rendererKey:t.getSettingsKey(),orderedRendererKeys:e!==null&&e!==void 0?e:null,context:i,lastAccess:new Date,lastData:t.data}).catch((t=>{if(t.name==="ConstraintError"){console.debug("Entity already exists",t)}else console.error("Could not add entity",t)}));console.debug("added entity",t);const n=s.transaction("relations","readwrite");const r=[];for(const e of t.items){const i={start:t.value,description:e.keyTitle,end:e.value};const s=n.store.index("by-start");let o=await s.openCursor();let a=false;while(o){if(o.value.start===i.start&&o.value.end===i.end&&o.value.description===i.description){a=true;break}o=await o.continue()}if(!a){r.push(n.store.add(i))}}r.push(n.done);await Promise.all(r);console.debug("added relations",r)}async getEntity(t,e,i,s=true){var o,r;const a=this.normalizeKey(t);try{const s=await this.dbPromise;const r=await s.get("entities",a);if(r!==undefined){const s=r.orderedRendererKeys;const a=i!==null&&i!==void 0?i:null;const l=JSON.stringify(s)!==JSON.stringify(a);if(l||i&&i.length>0&&!i.includes(r.rendererKey)){console.debug("Ordered renderer keys changed or cached renderer not in ordered list, re-detecting",{cached:s,current:a,cachedRendererKey:r.rendererKey,currentAllowedKeys:i});await this.deleteEntity(t)}else{console.debug("Found entity for value in db",r,t);const i=(o=e.find((t=>t.type===r.rendererKey)))===null||o===void 0?void 0:o.values;const s=i===null||i===void 0?void 0:i.find((t=>t.name==="ttl"));if(s!=undefined&&s.value!=undefined&&((new Date).getTime()-r.lastAccess.getTime()>s.value||s.value===0)){console.log("TTL expired! Deleting entry in db",s.value,(new Date).getTime()-r.lastAccess.getTime());await this.deleteEntity(t)}else{console.log("TTL not expired or undefined",(new Date).getTime()-r.lastAccess.getTime());const e=new(n.find((t=>t.key===r.rendererKey)).constructor)(t,i);e.settings=i;await e.init(r.lastData);return e}}}}catch(t){console.error("Could not get entity from db",t)}console.debug("No valid entity found for value in db",t);const l=await b.getBestFit(t,e,i,s);if(l===null){console.debug("No renderer matched for value",t);return null}l.settings=(r=e.find((t=>t.type===l.getSettingsKey())))===null||r===void 0?void 0:r.values;await l.init();if(l.isResolvable()){await this.addEntity(l,i);console.debug("added entity to db",t,l)}else{console.debug("renderer not resolvable, skipping IndexedDB cache",t,l.getSettingsKey())}return l}async deleteEntity(t){const e=await this.dbPromise;const i=this.normalizeKey(t);await e.delete("entities",i);const s=e.transaction("relations","readwrite");const o=s.store.index("by-start");let n=await o.openCursor();while(n){if(n.value.start===t||n.value.end===t){await s.store.delete(n.primaryKey)}n=await n.continue()}console.log("deleted entity",t);await s.done}async clearEntities(){const t=await this.dbPromise;await t.clear("entities");await t.clear("relations");console.log("cleared entities")}normalizeKey(t){let e=t;if(typeof e!=="string"&&typeof e!=="number"){try{e=JSON.stringify(e)}catch(t){e=String(e)}console.warn("Converted entity value to string for IndexedDB key (delete):",e)}return e}}const J=()=>`details summary::-webkit-details-marker{display:none}:host{display:inline-block;vertical-align:baseline}::slotted(slot[name=summary]){max-width:50vw}:host([expanded]){max-width:100%;overflow:visible}.pid-preview-wrapper{max-width:50vw;overflow:hidden;text-overflow:ellipsis}.pid-preview-scroll{max-width:50vw;overflow-x:auto;white-space:nowrap;scrollbar-width:thin}.pid-preview-scroll::-webkit-scrollbar{height:4px}.pid-preview-scroll::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}.border{border-width:1px;border-style:solid}.border-gray-300{border-color:#d1d5db}.border-gray-600{border-color:#4b5563}.rounded-md{border-radius:.375rem}.shadow-xs{box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}.bg-white{background-color:#fff}.border-b{border-bottom-width:1px;border-bottom-style:solid}.border-gray-100{border-color:#f3f4f6}.border-gray-700{border-color:#374151}.overflow-x-auto{overflow-x:auto;scrollbar-width:thin}.overflow-x-auto::-webkit-scrollbar{height:3px}.overflow-x-auto::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}.overflow-x-auto::-webkit-scrollbar-track{background:transparent}`;const U=class{constructor(e){t(this,e);this.settings="[]";this.itemsPerPage=10;this.levelOfSubcomponents=1;this.currentLevelOfSubcomponents=0;this.emphasizeComponent=true;this.showTopLevelCopy=true;this.defaultTTL=24*60*60*1e3;this.darkMode="light";this.fallbackToAll=true;this.isDarkMode=false;this.items=[];this.actions=[];this.loadSubcomponents=false;this.displayStatus="loading";this.tablePage=0;this.temporarilyEmphasized=false;this.isExpanded=false;this._lineHeight=24;this.toggleSubcomponents=t=>{if(t){t.stopPropagation();this.isExpanded=t.detail;if(t.detail){if(!this.hideSubcomponents&&this.levelOfSubcomponents-this.currentLevelOfSubcomponents>0){this.loadSubcomponents=true;setTimeout((()=>{var t;const e=(t=this.el.shadowRoot)===null||t===void 0?void 0:t.querySelector("pid-collapsible");if(e&&typeof e.recalculateContentDimensions==="function"){e.recalculateContentDimensions()}}),50)}}else{this.loadSubcomponents=false}}};this.handleDarkModeChange=()=>{this.updateDarkMode()};this.blockEventPropagation=t=>{t.stopPropagation()}}get shouldShowFooter(){const t=this.actions.length>0;const e=this.items.length>this.itemsPerPage;return t||e}get shouldShowCollapsedPreview(){var t;return this.items.length===0&&this.actions.length===0&&!((t=this.identifierObject)===null||t===void 0?void 0:t.renderBody())||this.hideSubcomponents}componentDidLoad(){this.ensureComponentId();setTimeout((()=>{var t;const e=(t=this.el.shadowRoot)===null||t===void 0?void 0:t.querySelector("pid-collapsible");if(e&&typeof e.recalculateContentDimensions==="function"){e.recalculateContentDimensions()}}),50)}async watchValue(){this.displayStatus="loading";await this.componentWillLoad();setTimeout((()=>{var t;const e=(t=this.el.shadowRoot)===null||t===void 0?void 0:t.querySelector("pid-collapsible");if(e&&typeof e.recalculateContentDimensions==="function"){e.recalculateContentDimensions()}}),10)}async watchLoadSubcomponents(){this.temporarilyEmphasized=this.emphasizeComponent||this.loadSubcomponents;this._lineHeight=24}watchEmphasizeComponent(){this.temporarilyEmphasized=this.emphasizeComponent||this.loadSubcomponents}watchOpenByDefault(){this.isExpanded=this.openByDefault}watchIsExpanded(){if(this.isExpanded){this.el.setAttribute("expanded","")}else{this.el.removeAttribute("expanded")}}onItemsChange(){const t=Math.ceil(this.items.length/this.itemsPerPage)-1;if(this.tablePage>t&&t>=0){this.tablePage=t}}validateItemsPerPage(t){if(t<=0){console.warn(`pid-component: itemsPerPage prop must be positive. Received ${t}, defaulting to 10.`);this.itemsPerPage=10}}watchDarkMode(){this.updateDarkMode();if(this.identifierObject){const t=this.identifierObject.settings||[];const e=t.findIndex((t=>t.name==="darkMode"));if(e>=0){t[e].value=this.darkMode}else{t.push({name:"darkMode",value:this.darkMode})}this.identifierObject.settings=t}}async componentWillLoad(){var t,e;this.ensureComponentId();this.validateItemsPerPage(this.itemsPerPage);this.temporarilyEmphasized=this.emphasizeComponent||this.loadSubcomponents;if(this.openByDefault){if(!this.hideSubcomponents&&this.levelOfSubcomponents-this.currentLevelOfSubcomponents>0){this.isExpanded=true;this.loadSubcomponents=true}}this.initializeDarkMode();this.items=[];this.actions=[];let i;if(typeof this.settings==="string"&&this.settings.trim().length>0){try{i=JSON.parse(this.settings)}catch(t){console.error("Failed to parse settings.",t);i=[]}}else{i=[]}if(i.length===0){i.push({type:"default",values:[{name:"ttl",value:this.defaultTTL},{name:"darkMode",value:this.darkMode}]})}else{i.forEach((t=>{if(!t.values.some((t=>t.name==="ttl"))){t.values.push({name:"ttl",value:this.defaultTTL})}const e=t.values.findIndex((t=>t.name==="darkMode"));if(e>=0){t.values[e].value=this.darkMode}else{t.values.push({name:"darkMode",value:this.darkMode})}}))}let s;if(typeof this.renderers==="string"&&this.renderers.trim().length>0){try{s=JSON.parse(this.renderers);if(!Array.isArray(s)){console.error("renderers prop must be a JSON array of strings, got:",this.renderers);s=undefined}}catch(t){console.error("Failed to parse renderers prop:",t);s=undefined}}try{const t=new G;const e=await t.getEntity(this.value,i,s,this.fallbackToAll);if(e===null){this.displayStatus="unmatched";this.identifierObject=undefined;this.items=[];this.actions=[];return}this.identifierObject=e}catch(t){console.error("Failed to get entity from db",t);this.displayStatus="error";this.identifierObject=undefined;this.items=[];this.actions=[];return}if(!this.hideSubcomponents){const i=[];(((t=this.identifierObject)===null||t===void 0?void 0:t.items)||[]).forEach((t=>{if(!i.some((e=>t.equals(e)))){i.push(t)}}));this.items=i;this.items.sort(((t,e)=>{if(t.priority>e.priority)return 1;if(t.priority<e.priority)return-1;if(t.estimatedTypePriority>e.estimatedTypePriority)return 1;if(t.estimatedTypePriority<e.estimatedTypePriority)return-1;if(t.keyTitle&&e.keyTitle){return t.keyTitle.localeCompare(e.keyTitle)}return 0}));const s=[];(((e=this.identifierObject)===null||e===void 0?void 0:e.actions)||[]).forEach((t=>{if(!s.some((e=>t.equals(e)))){s.push(t)}}));this.actions=s;this.actions.sort(((t,e)=>t.priority-e.priority))}this.displayStatus="loaded";await r()}disconnectedCallback(){this.identifierObject=undefined;this.items=[];this.actions=[];if(this._abortController){this._abortController.abort();this._abortController=undefined}this.cleanupDarkModeListener()}render(){if(this.displayStatus==="unmatched"){return e(i,{class:"relative font-sans",style:{display:"none"}})}if(this.shouldShowCollapsedPreview){if(this.identifierObject!==undefined&&this.displayStatus==="loaded"){return e(i,{class:"relative font-sans","aria-label":`This component displays information about the identifier ${this.value}.`},this.renderCollapsedPreviewContent())}return e(i,{class:"relative font-sans","aria-label":`This component displays information about the identifier ${this.value}.`},this.renderStatusMessage())}return this.renderExpandedState()}ensureComponentId(){if(!this.el.id){this.el.id=`pid-component-${Math.random().toString(36).substring(2,9)}`}}initializeDarkMode(){if(window.matchMedia){this.darkModeMediaQuery=window.matchMedia("(prefers-color-scheme: dark)");this.updateDarkMode();if(this.darkModeMediaQuery.addEventListener){this.darkModeMediaQuery.addEventListener("change",this.handleDarkModeChange)}else if(this.darkModeMediaQuery.addListener){this.darkModeMediaQuery.addListener(this.handleDarkModeChange)}}else{this.isDarkMode=this.darkMode==="dark"}}updateDarkMode(){if(this.darkMode==="dark"){this.isDarkMode=true}else if(this.darkMode==="light"){this.isDarkMode=false}else if(this.darkMode==="system"&&this.darkModeMediaQuery){this.isDarkMode=this.darkModeMediaQuery.matches}}cleanupDarkModeListener(){if(this.darkModeMediaQuery){if(this.darkModeMediaQuery.removeEventListener){this.darkModeMediaQuery.removeEventListener("change",this.handleDarkModeChange)}else if(this.darkModeMediaQuery.removeListener){this.darkModeMediaQuery.removeListener(this.handleDarkModeChange)}}}shouldShowCopyButtonOnTopLevel(){return this.currentLevelOfSubcomponents===0&&this.showTopLevelCopy&&(this.emphasizeComponent||this.temporarilyEmphasized||this.isExpanded)}getPreviewClasses(){if(this.currentLevelOfSubcomponents===0){const t=this.emphasizeComponent||this.temporarilyEmphasized?"group rounded-md border py-0 shadow-sm "+(this.isDarkMode?"border-gray-600 bg-gray-800":"border-gray-300 bg-white")+" inline-flex cursor-pointer list-none flex-nowrap items-center overflow-hidden font-mono font-bold text-clip":(this.isDarkMode?"bg-gray-800/60":"")+" inline-flex cursor-pointer list-none flex-nowrap items-center font-mono font-bold";return t+(!this.isExpanded?` h-[${this._lineHeight||24}px] leading-[${this._lineHeight||24}px]`:"")}return""}renderCollapsedPreviewContent(){var t;return e("span",{class:this.getPreviewClasses(),tabIndex:0,role:"button","aria-label":`Identifier preview for ${this.value}`,"aria-expanded":this.isExpanded},e("span",{class:`inline-block font-mono font-medium select-all ${this.isExpanded?"text-xs":"text-sm"} ${this.isExpanded?"max-w-[60vw] overflow-x-auto whitespace-nowrap":"max-w-full truncate"}`},(t=this.identifierObject)===null||t===void 0?void 0:t.renderPreview()),this.shouldShowCopyButtonOnTopLevel()?e("copy-button",{value:this.identifierObject.value,class:"ml-auto shrink-0","aria-label":`Copy value: ${this.identifierObject.value}`,onClick:this.blockEventPropagation,"dark-mode":this.darkMode}):null)}renderStatusMessage(){if(this.displayStatus==="error"){return e("span",{class:"inline-flex items-center font-mono text-sm text-gray-600 dark:text-gray-300",role:"status"},this.value)}return e("span",{class:"inline-flex items-center font-mono text-sm text-gray-500",role:"status","aria-live":"polite"},this.value)}renderExpandedState(){var t,s;return e(i,{class:"relative font-sans","aria-label":`This component displays information about the identifier ${this.value}. It can be expanded to show more details.`},e("pid-collapsible",{expanded:this.isExpanded,open:this.isExpanded,previewScrollable:this.isExpanded,emphasize:this.emphasizeComponent||this.temporarilyEmphasized,initialWidth:this.currentLevelOfSubcomponents>0?"100%":this.width,initialHeight:this.height,lineHeight:this._lineHeight,showFooter:this.shouldShowFooter,darkMode:this.darkMode,onCollapsibleToggle:t=>this.toggleSubcomponents(t),onClick:this.blockEventPropagation,"aria-label":`Collapsible section for ${this.value}`,"aria-describedby":`${this.el.id}-description`},e("span",{slot:"summary",class:`font-mono font-medium select-all text-sm ${this.isExpanded?"overflow-x-auto whitespace-nowrap":"max-w-full truncate"}`,"aria-label":`Preview of ${this.value}`},(t=this.identifierObject)===null||t===void 0?void 0:t.renderPreview()),this.shouldShowCopyButtonOnTopLevel()?e("copy-button",{slot:"summary-actions",value:this.value,class:"ml-auto pl-2 shrink-0","aria-label":`Copy value: ${this.value}`,onClick:this.blockEventPropagation,"dark-mode":this.darkMode}):null,this.items.length>0?e("pid-data-table",{items:this.items,itemsPerPage:this.itemsPerPage,currentPage:this.tablePage,loadSubcomponents:this.loadSubcomponents,hideSubcomponents:this.hideSubcomponents,currentLevelOfSubcomponents:this.currentLevelOfSubcomponents,levelOfSubcomponents:this.levelOfSubcomponents,settings:this.settings,darkMode:this.darkMode,onPageChange:t=>this.tablePage=t.detail,class:"w-full grow overflow-x-clip overflow-y-auto","aria-label":`Data table for ${this.value}`,"aria-describedby":`${this.el.id}-table-description`}):null,this.items.length>0&&e("span",{id:`${this.el.id}-table-description`,class:"sr-only fixed"},"This table displays properties and values associated with the identifier ",this.value,"."),(s=this.identifierObject)===null||s===void 0?void 0:s.renderBody(),this.items.length>0&&e("div",{slot:"footer",class:`relative z-50 w-full overflow-visible ${this.isDarkMode?"bg-gray-800":"bg-white"}`},e("pid-pagination",{currentPage:this.tablePage,totalItems:this.items.length,itemsPerPage:this.itemsPerPage,darkMode:this.darkMode,onPageChange:t=>this.tablePage=t.detail,onItemsPerPageChange:t=>this.itemsPerPage=t.detail,"aria-label":`Pagination controls for ${this.value} data`,"aria-controls":`${this.el.id}-table`})),this.actions.length>0&&e("pid-actions",{slot:"footer-actions",actions:this.actions,darkMode:this.darkMode,class:"my-0 shrink-0 overflow-x-auto","aria-label":`Available actions for ${this.value}`})))}get el(){return s(this)}static get watchers(){return{value:[{watchValue:0}],loadSubcomponents:[{watchLoadSubcomponents:0}],emphasizeComponent:[{watchEmphasizeComponent:0}],openByDefault:[{watchOpenByDefault:0}],isExpanded:[{watchIsExpanded:0}],items:[{onItemsChange:0}],itemsPerPage:[{validateItemsPerPage:0}],darkMode:[{watchDarkMode:0}]}}};U.style=J();const V=class{constructor(e){t(this,e);this.pageChange=o(this,"pageChange");this.itemsPerPageChange=o(this,"itemsPerPageChange");this.items=[];this.itemsPerPage=10;this.currentPage=0;this.pageSizes=[5,10,25,50,100];this.loadSubcomponents=false;this.hideSubcomponents=false;this.currentLevelOfSubcomponents=0;this.levelOfSubcomponents=1;this.settings="[]";this.darkMode="system";this.filteredItems=[];this.tableId=`pid-data-table-${Math.random().toString(36).substring(2,9)}`}updateFilteredItems(){this.filteredItems=this.items.filter(((t,e)=>e>=this.currentPage*this.itemsPerPage&&e<this.currentPage*this.itemsPerPage+this.itemsPerPage));const t=Math.ceil(this.items.length/this.itemsPerPage)-1;if(this.currentPage>t&&t>=0){this.currentPage=t}this.recalculateContentDimensions()}componentWillLoad(){this.updateFilteredItems()}componentDidLoad(){setTimeout((()=>{this.recalculateContentDimensions()}),0)}render(){const t=this.darkMode==="dark"||this.darkMode==="system"&&window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches;if(this.items.length===0){return e("div",{class:t?"m-1 rounded-lg border border-gray-700 bg-gray-800 p-4 text-center text-gray-300":"m-1 rounded-lg border border-gray-200 bg-gray-50 p-4 text-center text-gray-500",role:"status","aria-live":"polite","aria-label":"No data available"},e("p",{class:"m-0"},"No data available"))}return e("table",{id:this.tableId,class:`w-full h-full table-auto border-collapse text-left font-sans text-sm select-text rounded-md overflow-y-auto ${t?"text-gray-200 bg-gray-800":"bg-gray-50"}`,"aria-label":"Data table with properties and values",role:"table"},e("thead",{class:"sticky top-0 z-20 p-1 rounded-md bg-slate-600 text-slate-200"},e("tr",{class:"font-semibold flex-col",role:"row"},e("th",{class:"w-1/5 flex-2 resize-x rounded-l-md p-1",scope:"col",role:"columnheader"},"Key"),e("th",{class:"min-w-36 w-4/5 flex-6 resize-x rounded-r-md p-1",scope:"col",role:"columnheader"},"Value"))),e("tbody",{class:t?"bg-gray-800 overflow-y-auto relative":"bg-gray-50 overflow-y-auto relative",role:"rowgroup"},this.filteredItems.map(((i,s)=>e("tr",{key:`item-${i.keyTitle}-${s}`,class:t?`odd:bg-gray-700 even:bg-gray-800 border-b border-gray-700 flex-col`:`odd:bg-slate-200 even:bg-gray-50 border-b border-gray-200 flex-col`,"aria-label":`Row for ${i.keyTitle} with value ${i.value}`,role:"row"},e("td",{class:"w-auto p-1 align-top font-mono flex-2 resize-x",role:"cell"},e("pid-tooltip",{text:i.keyTooltip||`Details for ${i.keyTitle}`,position:"top",maxHeight:"200px","aria-label":`Information about ${i.keyTitle}`},e("div",{slot:"trigger",class:"flex min-h-7 w-full items-center overflow-hidden"},e("a",{href:i.keyLink,target:"_blank",rel:"noopener noreferrer",class:"mr-2 truncate rounded-sm text-blue-600 underline hover:text-blue-800 focus:text-blue-900 focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:outline-hidden",onClick:t=>t.stopPropagation(),"aria-label":`Open ${i.keyTitle} in new tab`},i.keyTitle)))),e("td",{class:"relative w-full p-1 align-top text-sm select-text flex-6 resize-x",role:"cell"},e("div",{class:"grid w-full grid-cols-[minmax(0,1fr)_auto] items-start gap-2"},e("div",{class:"min-w-0 overflow-x-auto whitespace-normal"},this.loadSubcomponents&&!this.hideSubcomponents&&i.renderDynamically?e("pid-component",{value:i.value,levelOfSubcomponents:this.levelOfSubcomponents,currentLevelOfSubcomponents:this.curren