@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.
139 lines (136 loc) • 10.2 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 { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
const PidPagination = proxyCustomElement(class PidPagination extends H {
constructor() {
super();
this.__registerHost();
this.pageChange = createEvent(this, "pageChange");
this.itemsPerPageChange = createEvent(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 = (page) => {
if (page >= 0 && page <= this.totalPages - 1) {
this.pageChange.emit(page);
requestAnimationFrame(() => {
const collapsible = this.el.closest('pid-collapsible');
if (collapsible && typeof collapsible.recalculateContentDimensions === 'function') {
collapsible.recalculateContentDimensions();
}
});
}
};
this.handleItemsPerPageChange = (size) => {
this.itemsPerPageChange.emit(size);
requestAnimationFrame(() => {
const collapsible = this.el.closest('pid-collapsible');
if (collapsible && typeof collapsible.recalculateContentDimensions === 'function') {
collapsible.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 start = this.currentPage * this.itemsPerPage + 1;
const end = Math.min((this.currentPage + 1) * this.itemsPerPage, this.totalItems);
return { start, end };
}
getVisiblePageNumbers() {
const maxPages = 7;
const pages = [];
if (this.totalPages <= maxPages) {
return Array.from({ length: this.totalPages }, (_, i) => i);
}
pages.push(0);
let rangeStart = Math.max(1, this.currentPage - 1);
let rangeEnd = Math.min(this.totalPages - 2, this.currentPage + 1);
if (rangeEnd - rangeStart < 2) {
if (this.currentPage < this.totalPages / 2) {
rangeEnd = Math.min(this.totalPages - 2, rangeStart + 2);
}
else {
rangeStart = Math.max(1, rangeEnd - 2);
}
}
if (rangeStart > 1) {
pages.push('...');
}
for (let i = rangeStart; i <= rangeEnd; i++) {
pages.push(i);
}
if (rangeEnd < this.totalPages - 2) {
pages.push('...');
}
pages.push(this.totalPages - 1);
return pages;
}
render() {
if (this.totalItems <= 0) {
return null;
}
const visiblePages = this.getVisiblePageNumbers();
const needsPagination = this.totalItems > this.itemsPerPage;
const isDarkMode = this.darkMode === 'dark' || (this.darkMode === 'system' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
const paginationId = `pagination-${Math.random().toString(36).substring(2, 11)}`;
return (h("div", { class: `flex w-full resize-none flex-wrap items-center justify-between gap-2 ${isDarkMode ? 'bg-gray-800 text-gray-200' : 'bg-white text-gray-800'} px-3 py-1 text-sm`, role: "navigation", "aria-labelledby": `${paginationId}-label` }, h("span", { id: `${paginationId}-label`, class: "sr-only" }, "Pagination controls and display settings"), h("div", { class: `flex flex-wrap items-center gap-2 ${isDarkMode ? 'text-gray-300' : 'text-gray-600'}` }, this.showItemsPerPageControl && (h("div", { class: "flex items-center gap-1", role: "group", "aria-label": "Items per page options" }, h("span", { class: `text-xs whitespace-nowrap ${isDarkMode ? 'text-gray-300' : 'text-gray-600'}`, id: `${paginationId}-itemsperpage-label` }, "Items per page:"), h("div", { class: `flex items-center gap-0.5 rounded border ${isDarkMode ? 'border-gray-600 bg-gray-700' : 'border-gray-200 bg-white'} p-0.5`, role: "toolbar", "aria-labelledby": `${paginationId}-itemsperpage-label` }, this.pageSizes.map(size => (h("button", { key: `size-${size}`, onClick: () => this.handleItemsPerPageChange(size), class: `resize-none rounded px-2 py-0.5 text-xs transition-colors ${this.itemsPerPage === size ? 'bg-blue-600 font-medium text-white' : isDarkMode ? 'text-gray-200 hover:bg-gray-600' : 'text-gray-700 hover:bg-gray-100'}`, "aria-label": `Show ${size} items per page`, "aria-pressed": this.itemsPerPage === size ? 'true' : 'false', "aria-current": this.itemsPerPage === size ? 'true' : undefined, type: "button" }, size)))))), h("span", { class: `hidden text-xs whitespace-nowrap ${isDarkMode ? 'text-gray-300' : 'text-gray-600'} sm:block`, role: "status", "aria-live": "polite" }, "Showing ", this.displayRange.start, "-", this.displayRange.end, " of ", this.totalItems)), needsPagination && (h("div", { class: "flex items-center" }, h("nav", { class: "isolate inline-flex resize-none -space-x-px rounded-md shadow-sm", "aria-label": "Pagination", role: "navigation" }, h("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-1.5 ${isDarkMode ? '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-none 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" }, h("svg", { class: "h-4 w-4", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", role: "img" }, h("title", null, "Previous"), h("desc", null, "Arrow pointing to the left"), h("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" }))), visiblePages.map((page, i) => {
if (page === '...') {
return (h("span", { key: `ellipsis-${i}`, class: `relative inline-flex resize-none items-center px-2 py-1.5 text-sm ${isDarkMode ? '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" }, h("span", { "aria-hidden": "true" }, "..."), h("span", { class: "sr-only" }, "More pages")));
}
const pageNum = page;
const isCurrentPage = pageNum === this.currentPage;
const humanPageNum = pageNum + 1;
return (h("button", { key: `page-${pageNum}`, onClick: () => this.handlePageChange(pageNum), class: isCurrentPage
? 'relative z-10 inline-flex resize-none items-center bg-blue-600 px-2 py-1.5 text-xs font-semibold text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600'
: `relative inline-flex resize-none items-center px-2 py-1.5 text-xs ${isDarkMode ? '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-none focus-visible:ring-2 focus-visible:ring-blue-500`, "aria-label": `Page ${humanPageNum}`, "aria-current": isCurrentPage ? 'page' : undefined, type: "button", title: `Go to page ${humanPageNum}` }, humanPageNum));
}), h("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-1.5 ${isDarkMode ? '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-none 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" }, h("svg", { class: "h-4 w-4", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", role: "img" }, h("title", null, "Next"), h("desc", null, "Arrow pointing to the right"), h("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" }))))))));
}
get el() { return this; }
}, [0, "pid-pagination", {
"currentPage": [2, "current-page"],
"totalItems": [2, "total-items"],
"itemsPerPage": [2, "items-per-page"],
"pageSizes": [16, "page-sizes"],
"showItemsPerPageControl": [4, "show-items-per-page-control"],
"darkMode": [1, "dark-mode"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["pid-pagination"];
components.forEach(tagName => { switch (tagName) {
case "pid-pagination":
if (!customElements.get(tagName)) {
customElements.define(tagName, PidPagination);
}
break;
} });
}
export { PidPagination as P, defineCustomElement as d };
//# sourceMappingURL=p-CzJxnn-P.js.map
//# sourceMappingURL=p-CzJxnn-P.js.map