@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.
19 lines • 5.77 kB
JavaScript
/*!
*
* Copyright 2024 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 e,c as t,h as s,a as l}from"./p-DzUQJMIf.js";const a=class{constructor(s){e(this,s);this.pageChange=t(this,"pageChange");this.itemsPerPageChange=t(this,"itemsPerPageChange");this.tableId=`pid-data-table-${Math.random().toString(36).substring(2,9)}`;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=[]}updateFilteredItems(){this.filteredItems=this.items.filter(((e,t)=>t>=this.currentPage*this.itemsPerPage&&t<this.currentPage*this.itemsPerPage+this.itemsPerPage));const e=Math.ceil(this.items.length/this.itemsPerPage)-1;if(this.currentPage>e&&e>=0){this.currentPage=e}this.recalculateContentDimensions()}recalculateContentDimensions(){requestAnimationFrame((()=>{requestAnimationFrame((()=>{const e=this.el.closest("pid-collapsible");if(e&&typeof e.recalculateContentDimensions==="function"){e.recalculateContentDimensions()}}))}))}componentWillLoad(){this.updateFilteredItems()}componentDidLoad(){setTimeout((()=>{this.recalculateContentDimensions()}),0)}render(){const e=this.darkMode==="dark"||this.darkMode==="system"&&window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches;if(this.items.length===0){return s("div",{class:e?"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"},s("p",{class:"m-0"},"No data available"))}return s("div",{class:e?"mx-1 flex h-full w-full flex-col rounded-lg border border-gray-700 bg-gray-800":"mx-1 flex h-full w-full flex-col rounded-lg border border-gray-200 bg-gray-50"},s("div",{class:"relative z-10 w-full flex-grow overflow-auto"},s("table",{id:this.tableId,class:`w-full table-fixed border-collapse text-left font-sans text-sm select-text ${e?"text-gray-200":""}`,"aria-label":"Data table with properties and values",role:"table"},s("thead",{class:"sticky top-0 z-20 rounded-t-lg bg-slate-600 text-slate-200"},s("tr",{class:"font-semibold",role:"row"},s("th",{class:"w-[25%] min-w-[150px] rounded-tl-lg p-2",scope:"col",role:"columnheader"},"Key"),s("th",{class:"w-[75%] rounded-tr-lg p-2",scope:"col",role:"columnheader"},"Value"))),s("tbody",{class:e?"bg-gray-800":"bg-gray-50",role:"rowgroup"},this.filteredItems.map(((t,l)=>s("tr",{key:`item-${t.keyTitle}-${l}`,class:e?`odd:bg-gray-700 even:bg-gray-800 ${l!==this.filteredItems.length-1?"border-b border-gray-700":""}`:`odd:bg-slate-200 even:bg-gray-50 ${l!==this.filteredItems.length-1?"border-b border-gray-200":""}`,"aria-label":`Row for ${t.keyTitle} with value ${t.value}`,role:"row"},s("td",{class:"w-auto min-w-[150px] p-2 align-top font-mono",role:"cell"},s("pid-tooltip",{text:t.keyTooltip||`Details for ${t.keyTitle}`,position:"top",maxHeight:"200px","aria-label":`Information about ${t.keyTitle}`},s("div",{slot:"trigger",class:"flex min-h-7 w-full items-center overflow-hidden"},s("a",{href:t.keyLink,target:"_blank",rel:"noopener noreferrer",class:"mr-2 truncate rounded 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-none",onClick:e=>e.stopPropagation(),"aria-label":`Open ${t.keyTitle} in new tab`},t.keyTitle)))),s("td",{class:"relative w-full p-2 align-top text-sm select-text",role:"cell"},s("div",{class:"grid w-full grid-cols-[minmax(0,1fr)_auto] items-start gap-2"},s("div",{class:"min-w-0 overflow-x-auto break-words whitespace-normal"},this.loadSubcomponents&&!this.hideSubcomponents&&t.renderDynamically?s("pid-component",{value:t.value,levelOfSubcomponents:this.levelOfSubcomponents,currentLevelOfSubcomponents:this.currentLevelOfSubcomponents+1,amountOfItems:this.itemsPerPage,settings:this.settings,openByDefault:false,darkMode:this.darkMode,class:"block w-full min-w-0"}):!this.hideSubcomponents&&this.currentLevelOfSubcomponents===this.levelOfSubcomponents&&t.renderDynamically?s("pid-component",{value:t.value,levelOfSubcomponents:this.currentLevelOfSubcomponents,currentLevelOfSubcomponents:this.currentLevelOfSubcomponents+1,amountOfItems:this.itemsPerPage,settings:this.settings,hideSubcomponents:true,openByDefault:false,darkMode:this.darkMode,class:"block w-full min-w-0"}):s("span",{class:"inline-block w-full max-w-full overflow-x-auto font-mono text-sm break-words whitespace-normal"},t.value)),s("div",{class:"flex-shrink-0"},s("copy-button",{value:t.value,class:`visible z-50 cursor-pointer rounded-sm ${e?"bg-gray-700/90 hover:bg-gray-600":"bg-white/90 hover:bg-white"} opacity-100 shadow-sm transition-all duration-200 hover:shadow-md`,"aria-label":`Copy ${t.keyTitle} value to clipboard`,title:`Copy ${t.keyTitle} value to clipboard`})))))))))))}get el(){return l(this)}static get watchers(){return{items:["updateFilteredItems"],currentPage:["updateFilteredItems"],itemsPerPage:["updateFilteredItems"]}}};export{a as pid_data_table};
//# sourceMappingURL=p-2d42a556.entry.js.map