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.

19 lines 7.69 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{p as e,H as t,d as i,h as s,t as r}from"./p-Bw7bVt6t.js";const a=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.pageChange=i(this,"pageChange");this.itemsPerPageChange=i(this,"itemsPerPageChange");this.currentPage=0;this.totalItems=0;this.itemsPerPage=10;this.pageSizes=[5,10,25,50,100];this.showItemsPerPageControl=true;this.darkMode="system";this.handlePageChange=e=>{if(e>=0&&e<=this.totalPages-1){this.pageChange.emit(e);requestAnimationFrame((()=>{const e=this.el.closest("pid-collapsible");if(e&&typeof e.recalculateContentDimensions==="function"){e.recalculateContentDimensions()}}))}};this.handleItemsPerPageChange=e=>{this.itemsPerPageChange.emit(e);requestAnimationFrame((()=>{const e=this.el.closest("pid-collapsible");if(e&&typeof e.recalculateContentDimensions==="function"){e.recalculateContentDimensions()}}))}}get totalPages(){return Math.max(1,Math.ceil(this.totalItems/this.itemsPerPage))}get displayRange(){if(this.totalItems===0){return{start:0,end:0}}const e=this.currentPage*this.itemsPerPage+1;const t=Math.min((this.currentPage+1)*this.itemsPerPage,this.totalItems);return{start:e,end:t}}render(){if(this.totalItems<=0){return null}const e=this.getVisiblePageNumbers();const t=this.totalItems>this.itemsPerPage;const i=this.darkMode==="dark"||this.darkMode==="system"&&window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches;const r=`pagination-${Math.random().toString(36).substring(2,11)}`;return s("div",{class:`flex w-full resize-none flex-wrap items-center justify-between gap-2 ${i?"bg-gray-800 text-gray-200":"bg-white text-gray-800"} px-3 text-sm`,role:"navigation","aria-labelledby":`${r}-label`},s("span",{id:`${r}-label`,class:"sr-only"},"Pagination controls and display settings"),s("div",{class:`flex flex-wrap items-center gap-2 ${i?"text-gray-300":"text-gray-600"}`},this.showItemsPerPageControl&&s("div",{class:"flex items-center gap-1",role:"group","aria-label":"Items per page options"},s("span",{class:`text-xs whitespace-nowrap ${i?"text-gray-300":"text-gray-600"}`,id:`${r}-itemsperpage-label`},"Items per page:"),s("div",{class:`flex items-center gap-0.5 rounded-sm border ${i?"border-gray-600 bg-gray-700":"border-gray-200 bg-white"} p-0.5`,role:"toolbar","aria-labelledby":`${r}-itemsperpage-label`},this.pageSizes.map((e=>s("button",{key:`size-${e}`,onClick:()=>this.handleItemsPerPageChange(e),class:`resize-none rounded px-2 text-xs transition-colors ${this.itemsPerPage===e?"bg-blue-600 font-medium text-white py-0.5":i?"text-gray-200 hover:bg-gray-600 py-0":"text-gray-700 hover:bg-gray-100 py-0"}`,"aria-label":`Show ${e} items per page`,"aria-pressed":this.itemsPerPage===e?"true":"false","aria-current":this.itemsPerPage===e?"true":undefined,type:"button"},e))))),s("span",{class:`hidden text-xs whitespace-nowrap ${i?"text-gray-300":"text-gray-600"} sm:block`,role:"status","aria-live":"polite"},"Showing ",this.displayRange.start,"-",this.displayRange.end," of ",this.totalItems)),t&&s("div",{class:"flex items-center"},s("nav",{class:"isolate inline-flex resize-none -space-x-px rounded-md shadow-xs","aria-label":"Pagination",role:"navigation"},s("button",{onClick:()=>this.handlePageChange(this.currentPage-1),disabled:this.currentPage===0,class:`relative inline-flex resize-none items-center rounded-l-md px-2 py-0 ${i?"text-gray-300 ring-1 ring-gray-600 ring-inset hover:bg-gray-700":"text-gray-500 ring-1 ring-gray-300 ring-inset hover:bg-gray-50"} focus:z-20 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500 disabled:cursor-not-allowed disabled:opacity-50`,"aria-label":"Previous page",title:"Go to previous page",type:"button"},s("svg",{class:"h-4 w-4",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true",role:"img"},s("title",null,"Previous"),s("desc",null,"Arrow pointing to the left"),s("path",{"fill-rule":"evenodd",d:"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06-.02z","clip-rule":"evenodd"}))),e.map(((e,t)=>{if(e==="..."){return s("span",{key:`ellipsis-${t}`,class:`relative inline-flex resize-none items-center px-2 py-0 text-sm rounded ${i?"text-gray-300 ring-1 ring-gray-600 ring-inset":"text-gray-700 ring-1 ring-gray-300 ring-inset"}`,role:"separator","aria-label":"More pages","aria-hidden":"true"},s("span",{"aria-hidden":"true"},"..."),s("span",{class:"sr-only"},"More pages"))}const r=e;const a=r===this.currentPage;const n=r+1;return s("button",{key:`page-${r}`,onClick:()=>this.handlePageChange(r),class:a?"relative z-10 inline-flex resize-none items-center rounded bg-blue-600 px-2 py-0.5 text-xs font-semibold text-white focus:z-20 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600":`relative inline-flex resize-none items-center rounded px-2 py-0 text-xs ${i?"text-gray-200 ring-1 ring-gray-600 ring-inset hover:bg-gray-700":"text-gray-900 ring-1 ring-gray-300 ring-inset hover:bg-gray-50"} focus:z-20 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500`,"aria-label":`Page ${n}`,"aria-current":a?"page":undefined,type:"button",title:`Go to page ${n}`},n)})),s("button",{onClick:()=>this.handlePageChange(this.currentPage+1),disabled:this.currentPage>=this.totalPages-1,class:`relative inline-flex resize-none items-center rounded-r-md px-2 py-0 rounded ${i?"text-gray-300 ring-1 ring-gray-600 ring-inset hover:bg-gray-700":"text-gray-500 ring-1 ring-gray-300 ring-inset hover:bg-gray-50"} focus:z-20 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500 disabled:cursor-not-allowed disabled:opacity-50`,"aria-label":"Next page",title:"Go to next page",type:"button"},s("svg",{class:"h-4 w-4",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true",role:"img"},s("title",null,"Next"),s("desc",null,"Arrow pointing to the right"),s("path",{"fill-rule":"evenodd",d:"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z","clip-rule":"evenodd"}))))))}getVisiblePageNumbers(){const e=7;const t=[];if(this.totalPages<=e){return Array.from({length:this.totalPages},((e,t)=>t))}t.push(0);let i=Math.max(1,this.currentPage-1);let s=Math.min(this.totalPages-2,this.currentPage+1);if(s-i<2){if(this.currentPage<this.totalPages/2){s=Math.min(this.totalPages-2,i+2)}else{i=Math.max(1,s-2)}}if(i>1){t.push("...")}for(let e=i;e<=s;e++){t.push(e)}if(s<this.totalPages-2){t.push("...")}t.push(this.totalPages-1);return t}get el(){return this}},[0,"pid-pagination",{currentPage:[2,"current-page"],totalItems:[2,"total-items"],itemsPerPage:[2,"items-per-page"],pageSizes:[16],showItemsPerPageControl:[4,"show-items-per-page-control"],darkMode:[1,"dark-mode"]}]);function n(){if(typeof customElements==="undefined"){return}const e=["pid-pagination"];e.forEach((e=>{switch(e){case"pid-pagination":if(!customElements.get(r(e))){customElements.define(r(e),a)}break}}))}export{a as P,n as d}; //# sourceMappingURL=p-BIghWu1E.js.map