@kit-data-manager/pid-component/dist/esm/pid-data-table.entry.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 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 registerInstance, c as createEvent, h, a as getElement } from './index-DzUQJMIf.js';

const PidDataTable = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.pageChange = createEvent(this, "pageChange");
        this.itemsPerPageChange = createEvent(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((_, index) => {
            return index >= this.currentPage * this.itemsPerPage && index < this.currentPage * this.itemsPerPage + this.itemsPerPage;
        });
        const maxPage = Math.ceil(this.items.length / this.itemsPerPage) - 1;
        if (this.currentPage > maxPage && maxPage >= 0) {
            this.currentPage = maxPage;
        }
        this.recalculateContentDimensions();
    }
    recalculateContentDimensions() {
        requestAnimationFrame(() => {
            requestAnimationFrame(() => {
                const collapsible = this.el.closest('pid-collapsible');
                if (collapsible && typeof collapsible.recalculateContentDimensions === 'function') {
                    collapsible.recalculateContentDimensions();
                }
            });
        });
    }
    componentWillLoad() {
        this.updateFilteredItems();
    }
    componentDidLoad() {
        setTimeout(() => {
            this.recalculateContentDimensions();
        }, 0);
    }
    render() {
        const isDarkMode = this.darkMode === 'dark' || (this.darkMode === 'system' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
        if (this.items.length === 0) {
            return (h("div", { class: isDarkMode
                    ? '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" }, h("p", { class: "m-0" }, "No data available")));
        }
        return (h("div", { class: isDarkMode
                ? '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' }, h("div", { class: "relative z-10 w-full flex-grow overflow-auto" }, h("table", { id: this.tableId, class: `w-full table-fixed border-collapse text-left font-sans text-sm select-text ${isDarkMode ? 'text-gray-200' : ''}`, "aria-label": "Data table with properties and values", role: "table" }, h("thead", { class: "sticky top-0 z-20 rounded-t-lg bg-slate-600 text-slate-200" }, h("tr", { class: "font-semibold", role: "row" }, h("th", { class: "w-[25%] min-w-[150px] rounded-tl-lg p-2", scope: "col", role: "columnheader" }, "Key"), h("th", { class: "w-[75%] rounded-tr-lg p-2", scope: "col", role: "columnheader" }, "Value"))), h("tbody", { class: isDarkMode ? 'bg-gray-800' : 'bg-gray-50', role: "rowgroup" }, this.filteredItems.map((value, index) => (h("tr", { key: `item-${value.keyTitle}-${index}`, class: isDarkMode
                ? `odd:bg-gray-700 even:bg-gray-800 ${index !== this.filteredItems.length - 1 ? 'border-b border-gray-700' : ''}`
                : `odd:bg-slate-200 even:bg-gray-50 ${index !== this.filteredItems.length - 1 ? 'border-b border-gray-200' : ''}`, "aria-label": `Row for ${value.keyTitle} with value ${value.value}`, role: "row" }, h("td", { class: 'w-auto min-w-[150px] p-2 align-top font-mono', role: "cell" }, h("pid-tooltip", { text: value.keyTooltip || `Details for ${value.keyTitle}`, position: "top", maxHeight: "200px", "aria-label": `Information about ${value.keyTitle}` }, h("div", { slot: "trigger", class: "flex min-h-7 w-full items-center overflow-hidden" }, h("a", { href: value.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 ${value.keyTitle} in new tab` }, value.keyTitle)))), h("td", { class: 'relative w-full p-2 align-top text-sm select-text', role: "cell" }, h("div", { class: "grid w-full grid-cols-[minmax(0,1fr)_auto] items-start gap-2" }, h("div", { class: "min-w-0 overflow-x-auto break-words whitespace-normal" }, this.loadSubcomponents && !this.hideSubcomponents && value.renderDynamically ? (h("pid-component", { value: value.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 && value.renderDynamically ? (h("pid-component", { value: value.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" })) : (h("span", { class: 'inline-block w-full max-w-full overflow-x-auto font-mono text-sm break-words whitespace-normal' }, value.value))), h("div", { class: "flex-shrink-0" }, h("copy-button", { value: value.value, class: `visible z-50 cursor-pointer rounded-sm ${isDarkMode ? '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 ${value.keyTitle} value to clipboard`, title: `Copy ${value.keyTitle} value to clipboard` }))))))))))));
    }
    get el() { return getElement(this); }
    static get watchers() { return {
        "items": ["updateFilteredItems"],
        "currentPage": ["updateFilteredItems"],
        "itemsPerPage": ["updateFilteredItems"]
    }; }
};

export { PidDataTable as pid_data_table };
//# sourceMappingURL=pid-data-table.entry.js.map

//# sourceMappingURL=pid-data-table.entry.js.map