@kit-data-manager/pid-component/dist/components/p-YqWj7nPy.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 { p as proxyCustomElement, H, h, a as Host } from './index.js';

const CopyButton = proxyCustomElement(class CopyButton extends H {
    constructor() {
        super();
        this.__registerHost();
        this.copied = false;
        this.copyValue = async (event) => {
            event.stopPropagation();
            event.preventDefault();
            try {
                if ('clipboard' in navigator) {
                    try {
                        await navigator.clipboard.writeText(this.value);
                        this.showSuccess();
                        return;
                    }
                    catch (ignored) {
                    }
                }
                const textArea = document.createElement('textarea');
                textArea.value = this.value;
                textArea.setAttribute('aria-hidden', 'true');
                textArea.setAttribute('tabindex', '-1');
                textArea.setAttribute('readonly', 'readonly');
                textArea.className = 'fixed top-0 left-0 opacity-0 pointer-events-none z-[9999] w-[10em] h-[10em]';
                document.body.appendChild(textArea);
                setTimeout(() => {
                    textArea.focus();
                    textArea.select();
                    try {
                        const success = document.execCommand('copy');
                        if (success) {
                            this.showSuccess();
                        }
                        else {
                            const range = document.createRange();
                            range.selectNodeContents(textArea);
                            const selection = window.getSelection();
                            if (selection) {
                                selection.removeAllRanges();
                                selection.addRange(range);
                                textArea.setSelectionRange(0, textArea.value.length);
                                const secondAttempt = document.execCommand('copy');
                                if (secondAttempt) {
                                    this.showSuccess();
                                }
                            }
                        }
                    }
                    catch (ignored) {
                    }
                    finally {
                        document.body.removeChild(textArea);
                    }
                }, 200);
            }
            catch (err) {
                console.error('Failed to copy text: ', err);
            }
        };
    }
    showSuccess() {
        this.copied = true;
        setTimeout(() => {
            this.copied = false;
        }, 1500);
    }
    getAriaLabel() {
        const baseLabel = this.label || 'content';
        return this.copied ? `${baseLabel} copied to clipboard` : `Copy ${baseLabel} to clipboard`;
    }
    render() {
        const buttonText = this.copied ? '✓ Copied!' : 'Copy';
        const ariaLabel = this.getAriaLabel();
        const parentComponent = this.el.closest('pid-component');
        const isDarkMode = parentComponent === null || parentComponent === void 0 ? void 0 : parentComponent.classList.contains('bg-gray-800');
        return (h(Host, { key: '30c4993a4b0dd5bb0453f1e4564b95a6dc1fbe76', class: 'inline-block align-baseline text-xs' }, this.copied && (h("span", { key: '0e86f99522d6a10f954e0dc898fb1f438766dabc', class: "sr-only", "aria-live": "assertive" }, "Content copied to clipboard")), h("button", { key: '5fce7616e8ce231f5471674dc188287aa86559df', class: `${this.copied ? (isDarkMode ? 'bg-green-700' : 'bg-green-200') : isDarkMode ? 'bg-gray-700 hover:bg-gray-600' : 'bg-white hover:bg-blue-200'} relative z-30 max-h-min flex-none items-center rounded-md border ${isDarkMode ? 'border-gray-600 text-gray-200 hover:text-white' : 'border-slate-500 text-slate-800 hover:text-slate-900'} px-2 py-0.5 font-mono font-medium transition-colors duration-200 focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:outline-none`, onClick: e => this.copyValue(e), "aria-label": ariaLabel, title: ariaLabel, type: "button" }, buttonText)));
    }
    get el() { return this; }
}, [0, "copy-button", {
        "value": [1],
        "label": [1],
        "copied": [32]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["copy-button"];
    components.forEach(tagName => { switch (tagName) {
        case "copy-button":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, CopyButton);
            }
            break;
    } });
}

export { CopyButton as C, defineCustomElement as d };
//# sourceMappingURL=p-YqWj7nPy.js.map

//# sourceMappingURL=p-YqWj7nPy.js.map