@kit-data-manager/pid-component/dist/components/p-Cxrz0dd5.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 i,d as e,h as s,c as o,t as n}from"./p-Bw7bVt6t.js";const r=()=>`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 a={DEFAULT_WIDTH:"500px",DEFAULT_HEIGHT:"300px",MIN_WIDTH:300,MIN_HEIGHT:200,PADDING_WIDTH:40,PADDING_HEIGHT:60,FOOTER_HEIGHT:60};const h={RESIZE_HANDLE:10,FOOTER_CONTENT:30,STICKY_ELEMENTS:50};const l=`\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 d=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.collapsibleToggle=e(this,"collapsibleToggle");this.contentHeightChange=e(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 i=t.target;if((i===null||i===void 0?void 0:i.closest("copy-button"))||(i===null||i===void 0?void 0:i.closest('[slot="summary-actions"]'))||(i===null||i===void 0?void 0:i.closest("button"))||(i===null||i===void 0?void 0:i.closest("a"))){return}t.preventDefault();t.stopPropagation();this.performToggle(!this.open)};this.handleToggle=t=>{t.preventDefault();t.stopPropagation();const i=this.el.querySelector("details");if(i){i.open=this.open}};this.handleSummaryClick=t=>{const e=t.composedPath();const s=e.some((t=>{var e;return t instanceof i&&(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(s){return}t.preventDefault();t.stopPropagation();if(this.isToggling)return;const o=Date.now();const n=o-this.lastClickTime;this.lastClickTime=o;if(this.pendingClickTimer!==null){clearTimeout(this.pendingClickTimer);this.pendingClickTimer=null}if(n<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||a.DEFAULT_WIDTH;this.currentHeight=this.initialHeight||a.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 i=this.calculateContentDimensions();this.contentHeightChange.emit({maxHeight:i.maxHeight});this.resizeDebounceTimer=null;t(i)}))}))}))}return null}render(){const t=this.getHostClasses();const i=this.getDetailsClasses();const e=this.getSummaryClasses();const n=this.getContentClasses();const r=this.getFooterClasses();const a=this.getFooterActionsClasses();return s(o,{key:"cbcf55c166323c79e344ead5bd5811d19088c6e4",class:t},s("details",{key:"6b2e144d57340c7fc0637c62a1e618429ff423b4",class:i,open:this.open,onToggle:this.handleToggle},s("summary",{key:"4c053bf0b5a0609e7e5f37abf0892dc459dc08a5",class:e,onClick:this.handleSummaryClick},this.emphasize&&s("span",{key:"8a264bf2bd3223734bf3df20b244c987a02bb1dd"},s("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"},s("path",{key:"3c4e317acb12ea1ac020f5ea6fe654c0b154ce0e",d:"M 2 3 l 4 6 l 4 -6"}))),s("span",{key:"3cbead450cf92831327ff381033ebe4c499af442",class:`block ${this.previewScrollable?"shrink-0":"min-w-0 whitespace-nowrap overflow-hidden text-ellipsis"}`},s("slot",{key:"5706002a1de3ed07ddf9f5fc21e9c223c36b3eb4",name:"summary"})),s("div",{key:"ca8c041962942bb4eec5d713aa6ad34d4dbd021a",class:`ml-auto shrink-0 ${this.previewScrollable?"sticky right-0":""}`},s("slot",{key:"6fc238f5b0b681da07e37ae57e3aa1d3146e1895",name:"summary-actions"}))),s("div",{key:"41d4b51f1e6fd78ed9ff8e1fa7f7bb3dcfc45a25",class:`${n}`},s("slot",{key:"ef9f60ae2c92cbae6d16b68b68aa9def3b9c806b"})),this.showFooter&&this.open&&s("div",{key:"2dade649916ee68dd3fe367e485ad5bbacd644d9",class:r},s("div",{key:"db9ac1fe6b58291e6ccd4f214b2123832962ccd4",class:`z-50 overflow-visible border-b ${this.isDarkMode?"border-gray-700 bg-gray-800":"border-gray-100 bg-white"}`},s("slot",{key:"36ee7ecacee44fdf2a1f2e8d92a83f7e980f1ea7",name:"footer"})),s("div",{key:"38969d3f4c65671dc51e66cfbc076094115cb38c",class:a},s("div",{key:"9666f30918d3c437211c33d351e0d3cdc9a9ffd6",class:"grow overflow-visible"},s("slot",{key:"fb9431b73a3d54bf2d85db2ce51565a161b67715",name:"footer-left"})),s("div",{key:"a599293e40865c70bf9936a4e3c377cf833986cc",class:"flex shrink-0 items-center gap-2 overflow-visible"},s("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 i=t[0];if(!i)return;const e=i.contentRect.width;const s=i.contentRect.height;if(Math.abs(e-this.lastResizeDimensions.width)<2&&Math.abs(s-this.lastResizeDimensions.height)<2){return}this.lastResizeDimensions={width:e,height:s};if(this.resizeDebounceTimer!==null){window.cancelAnimationFrame(this.resizeDebounceTimer)}this.resizeDebounceTimer=window.requestAnimationFrame((()=>{this.currentWidth=`${e}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 i=t.querySelector("summary");if(!i)return;i.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 i=t.querySelector("summary");if(i){i.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 i){const t=e.tagName.toLowerCase();if(t==="pid-component"||t==="pid-collapsible"){e=e.parentElement;continue}}break}const s=e instanceof i?e:null;const o=(t=s===null||s===void 0?void 0:s.clientWidth)!==null&&t!==void 0?t:window.innerWidth;if(o<600){return"100%"}if(o<=1024){return"70%"}return"50%"}calculateContentDimensions(){const t=this.el.querySelector(".grow");const i=(t===null||t===void 0?void 0:t.scrollWidth)||a.MIN_WIDTH;const e=(t===null||t===void 0?void 0:t.scrollHeight)||a.MIN_HEIGHT;const s=this.showFooter?a.FOOTER_HEIGHT:0;const o=i+a.PADDING_WIDTH;const n=e+a.PADDING_HEIGHT+s;return{contentWidth:i,contentHeight:e,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-${h.RESIZE_HANDLE}`;t.innerHTML=l;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 i=this.el.querySelector("details");this.open=t;if(i){i.open=t}this.collapsibleToggle.emit(this.open);this.updateAppearance();if(this.open&&this.isSafari()){setTimeout((()=>this.recalculateContentDimensions()),50)}setTimeout((()=>{if(i)i.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-${h.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-${h.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 this}static get watchers(){return{open:[{watchOpen:0}],darkMode:[{watchDarkMode:0}]}}static get style(){return r()}},[260,"pid-collapsible",{open:[1028],emphasize:[4],darkMode:[1,"dark-mode"],initialWidth:[1,"initial-width"],initialHeight:[1,"initial-height"],lineHeight:[2,"line-height"],showFooter:[4,"show-footer"],expanded:[4],previewScrollable:[4,"preview-scrollable"],currentWidth:[32],currentHeight:[32],isDarkMode:[32],recalculateContentDimensions:[64]},undefined,{open:[{watchOpen:0}],darkMode:[{watchDarkMode:0}]}]);function c(){if(typeof customElements==="undefined"){return}const t=["pid-collapsible"];t.forEach((t=>{switch(t){case"pid-collapsible":if(!customElements.get(n(t))){customElements.define(n(t),d)}break}}))}export{d as P,c as d};
//# sourceMappingURL=p-Cxrz0dd5.js.map