@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.
335 lines (331 loc) • 32.5 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, h } from './index.js';
const jsonViewerCss = "/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial}}}@layer theme{:host,:root{--font-sans:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--color-red-500:oklch(63.7% .237 25.331);--color-green-100:oklch(96.2% .044 156.743);--color-green-400:oklch(79.2% .209 151.711);--color-green-600:oklch(62.7% .194 149.214);--color-green-800:oklch(44.8% .119 151.328);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-purple-400:oklch(71.4% .203 305.504);--color-purple-600:oklch(55.8% .288 302.321);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:1.33333;--text-sm:.875rem;--text-sm--line-height:1.42857;--font-weight-medium:500;--radius-md:.375rem;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,::backdrop,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}::file-selector-button{appearance:button;background-color:#0000;border:0 solid;border-radius:0;box-sizing:border-box;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;margin:0;margin-inline-end:4px;opacity:1;padding:0}:host,html{-webkit-text-size-adjust:100%;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);tab-size:4;-webkit-tap-highlight-color:transparent;line-height:1.5}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}button,input,optgroup,select,textarea{background-color:#0000;border-radius:0;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:currentColor;color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex;padding-block:0}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.collapse{visibility:collapse}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;white-space:nowrap;width:1px}.absolute,.sr-only{position:absolute}.fixed{position:fixed}.relative{position:relative}.top-2{top:calc(var(--spacing)*2)}.right-2{right:calc(var(--spacing)*2)}.z-10{z-index:10}.container{width:100%}.mr-2{margin-right:calc(var(--spacing)*2)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.ml-2{margin-left:calc(var(--spacing)*2)}.ml-4{margin-left:calc(var(--spacing)*4)}.flex{display:flex}.table{display:table}.h-4{height:calc(var(--spacing)*4)}.min-h-5{min-height:calc(var(--spacing)*5)}.w-4{width:calc(var(--spacing)*4)}.w-full{width:100%}.flex-grow{flex-grow:1}.cursor-pointer{cursor:pointer}.list-none{list-style-type:none}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.rounded{border-radius:.25rem}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l-2{border-left-style:var(--tw-border-style);border-left-width:2px}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-600{border-color:var(--color-gray-600)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-700{background-color:var(--color-gray-700)}.bg-gray-800{background-color:var(--color-gray-800)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-green-100{background-color:var(--color-green-100)}.bg-green-600{background-color:var(--color-green-600)}.bg-white{background-color:var(--color-white)}.p-1{padding:calc(var(--spacing)*1)}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.py-1{padding-block:calc(var(--spacing)*1)}.py-1\\.5{padding-block:calc(var(--spacing)*1.5)}.py-4{padding-block:calc(var(--spacing)*4)}.pr-12{padding-right:calc(var(--spacing)*12)}.pl-3{padding-left:calc(var(--spacing)*3)}.pl-5{padding-left:calc(var(--spacing)*5)}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.whitespace-pre-wrap{white-space:pre-wrap}.text-blue-400{color:var(--color-blue-400)}.text-blue-500{color:var(--color-blue-500)}.text-blue-600{color:var(--color-blue-600)}.text-gray-50{color:var(--color-gray-50)}.text-gray-200{color:var(--color-gray-200)}.text-gray-300{color:var(--color-gray-300)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-800{color:var(--color-gray-800)}.text-green-400{color:var(--color-green-400)}.text-green-600{color:var(--color-green-600)}.text-green-800{color:var(--color-green-800)}.text-purple-400{color:var(--color-purple-400)}.text-purple-600{color:var(--color-purple-600)}.text-red-500{color:var(--color-red-500)}.text-white{color:var(--color-white)}.opacity-0{opacity:0}.opacity-75{opacity:.75}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.transition-all,.transition-opacity{transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.select-none{-webkit-user-select:none;user-select:none}.focus\\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\\:ring-blue-500:focus{--tw-ring-color:var(--color-blue-500)}.focus\\:ring-offset-1:focus{--tw-ring-offset-width:1px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus\\:outline-none:focus{--tw-outline-style:none;outline-style:none}} /*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial}}}@layer base{}@layer components;@layer utilities{.absolute,.sr-only{position:absolute}}:host{--color-text-secondary:#6b7280;display:block;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}:host([theme=dark]){--color-text-secondary:#9ca3af;--color-background:#1f2937;--color-text:#f9fafb}:host([theme=light]){--color-text-secondary:#6b7280;--color-background:#fff;--color-text:#111827}summary:before{color:var(--color-text-secondary);content:\"\u25BA\";font-size:.75rem;left:0;position:absolute;transform:rotate(0);transition:transform .2s}details[open]>summary:before{transform:rotate(90deg)}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:\"*\";inherits:false}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}@media (hover:hover){.group-hover\\:opacity-100:is(:where(.group):hover *){opacity:1}.hover\\:border-blue-400:hover{border-color:var(--color-blue-400)}.hover\\:border-blue-600:hover{border-color:var(--color-blue-600)}.hover\\:bg-gray-50:hover{background-color:var(--color-gray-50)}.hover\\:bg-gray-200:hover{background-color:var(--color-gray-200)}.hover\\:bg-gray-600:hover{background-color:var(--color-gray-600)}.hover\\:bg-gray-700:hover{background-color:var(--color-gray-700)}.hover\\:text-gray-800:hover{color:var(--color-gray-800)}.hover\\:text-white:hover{color:var(--color-white)}.hover\\:opacity-100:hover{opacity:1}}";
const JsonViewer = proxyCustomElement(class JsonViewer extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.viewMode = 'tree';
this.maxHeight = 500;
this.showLineNumbers = true;
this.expandAll = false;
this.theme = 'system';
this.expandedNodes = new Set();
this.parsedData = null;
this.error = null;
this.copied = false;
this.isDarkMode = false;
this.sanitizeData = (data) => {
if (Array.isArray(data)) {
return data.map(this.sanitizeData);
}
if (data !== null && typeof data === 'object') {
const cleaned = {};
Object.entries(data).forEach(([key, value]) => {
if (!key.startsWith('$')) {
cleaned[key] = this.sanitizeData(value);
}
});
return cleaned;
}
return data;
};
this.toggleView = () => {
this.currentViewMode = this.currentViewMode === 'tree' ? 'code' : 'tree';
};
this.copyToClipboard = async () => {
try {
const jsonString = JSON.stringify(this.parsedData, null, 2);
await navigator.clipboard.writeText(jsonString);
this.copied = true;
setTimeout(() => {
this.copied = false;
}, 2000);
}
catch (err) {
console.error('Failed to copy JSON to clipboard:', err);
this.createFallbackCopyMethod(JSON.stringify(this.parsedData, null, 2));
}
};
this.handleDarkModeChange = () => {
this.updateDarkMode();
};
this.renderTreeNode = (key, value, depth = 0, path = '') => {
const isExpandable = typeof value === 'object' && value !== null;
const currentPath = path ? `${path}.${key}` : key;
const nodeId = `node-${currentPath}`;
const isArray = Array.isArray(value);
const handleKeyDown = (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
const details = e.target.closest('details');
if (details) {
details.open = !details.open;
if (details.open) {
this.expandedNodes.add(nodeId);
}
else {
this.expandedNodes.delete(nodeId);
}
this.expandedNodes = new Set(this.expandedNodes);
}
}
};
if (isExpandable) {
const entries = isArray ? Object.entries(value) : Object.entries(value);
const itemCount = entries.length;
const itemText = `${itemCount} ${itemCount === 1 ? 'item' : 'items'}`;
const nodeType = isArray ? 'array' : 'object';
const expandedState = this.expandedNodes.has(nodeId);
const toggleExpand = (e) => {
const details = e.target.closest('details');
if (details && details.open) {
this.expandedNodes.add(nodeId);
}
else {
this.expandedNodes.delete(nodeId);
}
this.expandedNodes = new Set(this.expandedNodes);
};
return (h("div", { class: "ml-4" }, h("details", { class: "mb-1", open: expandedState, onToggle: toggleExpand, id: nodeId }, h("summary", { class: `group relative flex cursor-pointer list-none items-center rounded py-1 pl-5 font-mono ${this.isDarkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-50'} focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:outline-none`, onKeyDown: handleKeyDown, tabIndex: 0, role: "button", "aria-expanded": expandedState ? 'true' : 'false', "aria-controls": `${nodeId}-content`, "aria-label": `${key}: ${nodeType} with ${itemText}, ${expandedState ? 'click to collapse' : 'click to expand'}` }, h("div", { class: "flex w-full items-center" }, h("span", { class: `mr-2 font-medium ${this.isDarkMode ? 'text-blue-400' : 'text-blue-600'}` }, key, ": "), h("span", { class: `flex items-center gap-1 ${this.isDarkMode ? 'text-gray-400' : 'text-gray-500'}` }, h("span", null, isArray ? '[' : '{'), h("span", null, itemText), h("span", null, isArray ? ']' : '}'), h("span", { class: `ml-2 text-xs opacity-0 transition-opacity duration-200 group-hover:opacity-100 ${this.isDarkMode ? 'text-blue-400' : 'text-blue-500'}`, "aria-hidden": "true" }, expandedState ? 'Click to collapse' : 'Click to expand')))), h("div", { id: `${nodeId}-content`, class: `ml-4 border-l-2 pl-3 ${this.isDarkMode ? 'border-gray-600' : 'border-gray-200'}`, role: "group", "aria-label": `Contents of ${key} ${nodeType}` }, entries.map(([k, v], index) => (h("div", { key: `${nodeId}-${index}` }, this.renderTreeNode(isArray ? `${k}` : k, v, depth + 1, currentPath))))))));
}
let valueClass = '';
let displayValue = JSON.stringify(value);
let valueType = typeof value;
if (valueType === 'string') {
valueClass = this.isDarkMode ? 'text-green-400' : 'text-green-600';
}
else if (valueType === 'number') {
valueClass = this.isDarkMode ? 'text-blue-400' : 'text-blue-600';
}
else if (valueType === 'boolean') {
valueClass = this.isDarkMode ? 'text-purple-400' : 'text-purple-600';
}
else if (value === null) {
valueClass = this.isDarkMode ? 'text-gray-400' : 'text-gray-500';
displayValue = 'null';
valueType = 'undefined';
}
return (h("div", { class: `flex items-center py-1 font-mono text-sm ${this.isDarkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-50'} rounded`, tabIndex: 0, role: "treeitem", "aria-label": `${key}: ${displayValue} (${valueType})` }, h("span", { class: `font-medium ${this.isDarkMode ? 'text-blue-400' : 'text-blue-600'}` }, key, ": "), h("span", { class: valueClass }, displayValue)));
};
this.formatCodeLine = (line) => {
const stringClass = this.isDarkMode ? 'text-green-400' : 'text-green-600';
const booleanClass = this.isDarkMode ? 'text-purple-400' : 'text-purple-600';
const nullClass = this.isDarkMode ? 'text-gray-400' : 'text-gray-500';
const numberClass = this.isDarkMode ? 'text-blue-400' : 'text-blue-600';
return line
.replace(/(".+?")(: )?/g, `<span class="${stringClass}">$1</span>$2`)
.replace(/: (true|false)([,}\]\s])/g, `: <span class="${booleanClass}">$1</span>$2`)
.replace(/: (null)([,}\]\s])/g, `: <span class="${nullClass}">$1</span>$2`)
.replace(/: ([0-9]+(\.[0-9]+)?)([,}\]\s])/g, `: <span class="${numberClass}">$1</span>$3`);
};
}
handleDataChange() {
this.parseData();
}
handleViewModeChange() {
this.currentViewMode = this.viewMode;
}
handleExpandAllChange() {
if (this.expandAll) {
this.expandAllNodes();
}
else {
this.collapseAllNodes();
}
}
handleThemeChange() {
this.updateDarkMode();
}
componentWillLoad() {
this.currentViewMode = this.viewMode;
this.parseData();
if (this.expandAll) {
this.expandAllNodes();
}
this.initializeDarkMode();
}
parseData() {
try {
let raw;
if (typeof this.data === 'string') {
raw = JSON.parse(this.data);
}
else if (this.data !== null && typeof this.data === 'object') {
raw = this.data;
}
else {
throw new Error('Invalid data format');
}
this.parsedData = this.sanitizeData(raw);
this.error = null;
}
catch (err) {
this.error = err.message;
this.parsedData = null;
}
}
createFallbackCopyMethod(text) {
const textArea = document.createElement('textarea');
textArea.style.position = 'fixed';
textArea.style.left = '-999999px';
textArea.style.top = '-999999px';
textArea.style.opacity = '0';
textArea.style.pointerEvents = 'none';
textArea.value = text;
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
const successful = document.execCommand('copy');
if (successful) {
this.copied = true;
setTimeout(() => {
this.copied = false;
}, 2000);
}
}
catch (err) {
console.error('Fallback copy failed:', err);
}
finally {
document.body.removeChild(textArea);
}
}
disconnectedCallback() {
this.cleanupDarkModeListener();
}
cleanupDarkModeListener() {
if (this.darkModeMediaQuery) {
if (this.darkModeMediaQuery.removeEventListener) {
this.darkModeMediaQuery.removeEventListener('change', this.handleDarkModeChange);
}
else if (this.darkModeMediaQuery.removeListener) {
this.darkModeMediaQuery.removeListener(this.handleDarkModeChange);
}
}
}
async expandAllNodes() {
this.expandNodeRecursive(this.parsedData, 'root');
}
async collapseAllNodes() {
this.expandedNodes = new Set();
}
expandNodeRecursive(data, path) {
if (data !== null && typeof data === 'object') {
this.expandedNodes.add(path);
Object.entries(data).forEach(([key, value]) => {
const newPath = path ? `${path}.${key}` : key;
this.expandNodeRecursive(value, newPath);
});
this.expandedNodes = new Set(this.expandedNodes);
}
}
initializeDarkMode() {
if (window.matchMedia) {
this.darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
this.updateDarkMode();
if (this.darkModeMediaQuery.addEventListener) {
this.darkModeMediaQuery.addEventListener('change', this.handleDarkModeChange);
}
else if (this.darkModeMediaQuery.addListener) {
this.darkModeMediaQuery.addListener(this.handleDarkModeChange);
}
}
else {
this.isDarkMode = this.theme === 'dark';
}
}
updateDarkMode() {
if (this.theme === 'dark') {
this.isDarkMode = true;
}
else if (this.theme === 'light') {
this.isDarkMode = false;
}
else if (this.theme === 'system' && this.darkModeMediaQuery) {
this.isDarkMode = this.darkModeMediaQuery.matches;
}
}
render() {
if (this.error) {
return (h("div", { class: "p-4 text-center text-red-500", role: "alert", "aria-live": "assertive" }, h("p", null, "Invalid JSON: ", this.error), h("slot", null)));
}
if (!this.parsedData) {
return (h("div", { class: "p-4 text-center text-gray-500", role: "status", "aria-live": "polite" }, h("p", null, "No data provided"), h("slot", null)));
}
const formattedJson = JSON.stringify(this.parsedData, null, 2);
const containerStyle = this.maxHeight > 0 ? { maxHeight: `${this.maxHeight}px` } : {};
const viewerId = `json-viewer-${Math.random().toString(36).substring(2, 11)}`;
const contentId = `${viewerId}-content`;
return (h("div", { class: `overflow-hidden rounded-lg border shadow ${this.isDarkMode ? 'border-gray-600 bg-gray-800 text-gray-50' : 'border-gray-200 bg-white text-gray-800'}`, role: "region", "aria-labelledby": `${viewerId}-title` }, h("div", { class: `flex items-center justify-between border-b p-3 ${this.isDarkMode ? 'border-gray-600' : 'border-gray-200'}` }, h("div", { class: "flex items-center gap-2" }, h("span", { id: `${viewerId}-title`, class: `text-sm font-medium ${this.isDarkMode ? 'text-gray-200' : 'text-gray-800'}` }, "JSON Viewer"), h("span", { class: `text-xs ${this.isDarkMode ? 'text-gray-400' : 'text-gray-500'}`, "aria-live": "polite" }, "(", Object.keys(this.parsedData).length, " ", Object.keys(this.parsedData).length === 1 ? 'property' : 'properties', ")")), h("button", { onClick: this.toggleView, class: `flex cursor-pointer items-center gap-1 rounded-md px-3 py-1.5 text-xs font-medium transition-all duration-200 ${this.isDarkMode
? 'border border-gray-600 bg-gray-900 text-gray-50 hover:border-blue-600 hover:bg-gray-700'
: 'border border-gray-200 bg-gray-100 text-gray-800 hover:border-blue-400 hover:bg-gray-50'} focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:outline-none`, "aria-controls": contentId, "aria-label": `Switch to ${this.currentViewMode === 'tree' ? 'code' : 'tree'} view`, type: "button" }, this.currentViewMode === 'tree' ? 'Code View' : 'Tree View')), h("div", { id: contentId, class: `relative overflow-auto ${this.isDarkMode ? 'bg-gray-800' : 'bg-white'}`, style: containerStyle, role: "group", "aria-label": `JSON data in ${this.currentViewMode} view` }, h("button", { onClick: this.copyToClipboard, class: `absolute top-2 right-2 z-10 rounded-md p-1 transition-all duration-200 ${this.copied
? this.isDarkMode
? 'bg-green-600 text-white'
: 'bg-green-100 text-green-800'
: this.isDarkMode
? 'bg-gray-700 text-gray-300 hover:bg-gray-600 hover:text-white'
: 'bg-gray-100 text-gray-600 hover:bg-gray-200 hover:text-gray-800'} opacity-75 hover:opacity-100 focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:outline-none`, title: this.copied ? 'Copied!' : 'Copy JSON to clipboard', "aria-label": this.copied ? 'JSON copied to clipboard' : 'Copy JSON to clipboard', type: "button" }, h("span", { class: "sr-only" }, this.copied ? 'Copied!' : 'Copy JSON'), this.copied ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "h-4 w-4", "aria-hidden": "true" }, h("title", null, "Check mark"), h("polyline", { points: "20 6 9 17 4 12" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "h-4 w-4", "aria-hidden": "true" }, h("title", null, "Copy icon"), h("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), h("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" })))), this.currentViewMode === 'tree' && (h("div", { class: `p-4 pr-12 ${this.isDarkMode ? '' : 'bg-gray-50'}` }, Object.entries(this.parsedData).map(([key, value], index) => (h("div", { key: `root-${index}` }, this.renderTreeNode(key, value, 0, 'root')))))), this.currentViewMode === 'code' && (h("div", { class: `pr-12 font-mono text-sm ${this.isDarkMode ? '' : 'bg-gray-50'}` }, this.showLineNumbers ? (h("div", { class: "flex" }, h("div", { class: `border-r px-2 py-4 text-right select-none ${this.isDarkMode ? 'border-gray-600 bg-gray-900 text-gray-400' : 'border-gray-200 bg-gray-100 text-gray-500'}` }, formattedJson.split('\n').map((_, i) => (h("div", { class: "min-h-5", key: `line-${i}` }, i + 1)))), h("pre", { class: `flex-grow overflow-x-auto p-4 whitespace-pre-wrap ${this.isDarkMode ? 'text-gray-200' : 'text-gray-800'}` }, formattedJson.split('\n').map((line, i) => (h("div", { class: "min-h-5", key: `code-${i}`, innerHTML: this.formatCodeLine(line) })))))) : (h("pre", { class: "flex-grow overflow-x-auto p-4 whitespace-pre-wrap" }, formattedJson.split('\n').map((line, i) => (h("div", { class: "min-h-5", key: `code-${i}`, innerHTML: this.formatCodeLine(line) }))))))))));
}
static get watchers() { return {
"data": ["handleDataChange"],
"viewMode": ["handleViewModeChange"],
"expandAll": ["handleExpandAllChange"],
"theme": ["handleThemeChange"]
}; }
static get style() { return jsonViewerCss; }
}, [1, "json-viewer", {
"data": [1],
"viewMode": [1, "view-mode"],
"maxHeight": [2, "max-height"],
"showLineNumbers": [4, "show-line-numbers"],
"expandAll": [4, "expand-all"],
"theme": [1],
"currentViewMode": [32],
"expandedNodes": [32],
"parsedData": [32],
"error": [32],
"copied": [32],
"isDarkMode": [32],
"expandAllNodes": [64],
"collapseAllNodes": [64]
}, undefined, {
"data": ["handleDataChange"],
"viewMode": ["handleViewModeChange"],
"expandAll": ["handleExpandAllChange"],
"theme": ["handleThemeChange"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["json-viewer"];
components.forEach(tagName => { switch (tagName) {
case "json-viewer":
if (!customElements.get(tagName)) {
customElements.define(tagName, JsonViewer);
}
break;
} });
}
export { JsonViewer as J, defineCustomElement as d };
//# sourceMappingURL=p-FGCLebgu.js.map
//# sourceMappingURL=p-FGCLebgu.js.map