@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.
173 lines (172 loc) • 7.07 kB
JavaScript
/*!
*
* 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 { h, Host } from "@stencil/core";
export class CopyButton {
constructor() {
this.copied = false;
this.darkMode = 'light';
this.copyValue = (event) => {
event.stopPropagation();
event.preventDefault();
const textArea = document.createElement('textarea');
textArea.value = this.value;
textArea.setAttribute('aria-hidden', 'true');
textArea.setAttribute('readonly', 'readonly');
textArea.style.cssText = 'position:fixed;top:0;left:0;width:2em;height:2em;padding:0;border:none;outline:none;box-shadow:none;opacity:0;';
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
textArea.setSelectionRange(0, textArea.value.length);
let copied = false;
try {
copied = document.execCommand('copy');
}
catch (_) {
}
document.body.removeChild(textArea);
if (copied) {
this.showSuccess();
return;
}
if ('clipboard' in navigator) {
navigator.clipboard.writeText(this.value).then(() => this.showSuccess(), () => {
});
}
};
}
getIsDarkMode() {
if (this.darkMode === 'dark') {
return true;
}
if (this.darkMode === 'light') {
return false;
}
const parentComponent = this.el.closest('pid-component');
if (parentComponent === null || parentComponent === void 0 ? void 0 : parentComponent.classList.contains('bg-gray-800')) {
return true;
}
if (this.darkMode === 'system') {
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
}
return false;
}
render() {
const buttonText = this.copied ? '✓ Copied!' : 'Copy';
const ariaLabel = this.getAriaLabel();
const isDarkMode = this.getIsDarkMode();
return (h(Host, { key: 'c5c3499428ec7ab4b306458dc25af78c26e1b91d', class: 'inline-block align-baseline text-xs' }, this.copied && (h("span", { key: 'eab38ff718680f01488fb1a3fe0cf36547a09daa', class: "sr-only", "aria-live": "assertive" }, "Content copied to clipboard")), h("button", { key: 'ac8d35bc7e2cb5038846adc8134b20ca31ac09e0', 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-hidden`, onClick: e => this.copyValue(e), "aria-label": ariaLabel, title: ariaLabel, type: "button" }, buttonText)));
}
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`;
}
static get is() { return "copy-button"; }
static get properties() {
return {
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [{
"name": "type",
"text": "{string}"
}, {
"name": "public",
"text": undefined
}],
"text": "The value to copy to the clipboard."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "value"
},
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "type",
"text": "{string}"
}, {
"name": "public",
"text": undefined
}],
"text": "Optional custom label for the button.\nIf not provided, a default label will be used."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "label"
},
"darkMode": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'light' | 'dark' | 'system'",
"resolved": "\"dark\" | \"light\" | \"system\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "type",
"text": "{'light' | 'dark' | 'system'}"
}, {
"name": "public",
"text": undefined
}],
"text": "Dark mode setting for the button.\nWhen provided, this takes precedence over DOM-based dark mode detection."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "dark-mode",
"defaultValue": "'light'"
}
};
}
static get states() {
return {
"copied": {}
};
}
static get elementRef() { return "el"; }
}
//# sourceMappingURL=copy-button.js.map