@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.
90 lines (89 loc) • 3.63 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
*
* http://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 {
render() {
function copyValue(event, value) {
if ('clipboard' in navigator) {
navigator.clipboard.writeText(value).then(() => showSuccess());
}
else {
const textArea = document.createElement('textarea');
textArea.value = value;
textArea.style.opacity = '0';
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
const success = document.execCommand('copy');
console.debug(`Deprecated Text copy was ${success ? 'successful' : 'unsuccessful'}.`);
showSuccess();
}
catch (err) {
console.error(err.name, err.message);
}
document.body.removeChild(textArea);
}
function showSuccess() {
const el = event.target;
el.innerText = '✓ Copied!';
el.classList.remove('hover:bg-blue-200');
el.classList.remove('bg-white');
el.classList.add('bg-green-200');
setTimeout(() => {
el.classList.remove('bg-green-200');
el.classList.add('hover:bg-blue-200');
el.classList.add('bg-white');
el.innerText = 'Copy';
}, 1500);
}
}
return (h(Host, { key: 'b2cfb19eeb72103bd07d7d8f7596a6b2f343f506', class: 'inline-block align-baseline text-xs' }, h("button", { key: '3bbbe4e78d3d2b31f873354f229077e781df9e6f', class: 'bg-white border border-slate-500 text-slate-800 font-medium font-mono rounded-md px-2 py-0.5 hover:bg-blue-200 hover:text-slate-900 flex-none max-h-min items-center', onClick: event => copyValue(event, this.value) }, "Copy")));
}
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,
"attribute": "value",
"reflect": false
}
};
}
}
//# sourceMappingURL=copy-button.js.map