@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.
671 lines (665 loc) • 71 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.
*
*/
'use strict';
var index = require('./index-CX75Y_sA.js');
const CopyButton = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
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 (index.h(index.Host, { key: '30c4993a4b0dd5bb0453f1e4564b95a6dc1fbe76', class: 'inline-block align-baseline text-xs' }, this.copied && (index.h("span", { key: '0e86f99522d6a10f954e0dc898fb1f438766dabc', class: "sr-only", "aria-live": "assertive" }, "Content copied to clipboard")), index.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 index.getElement(this); }
};
const PidActions = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.actions = [];
this.darkMode = 'system';
}
render() {
if (this.actions.length === 0) {
return null;
}
const isDarkMode = this.darkMode === 'dark' || (this.darkMode === 'system' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
const containerId = this.actionsId || `actions-${Math.random().toString(36).substring(2, 11)}`;
return (index.h("div", { id: containerId, class: `actions-container sticky right-0 bottom-0 left-0 z-20 mt-auto w-full border-t ${isDarkMode ? 'border-gray-700 bg-gray-800' : 'border-gray-200 bg-white'} p-1`, role: "toolbar", "aria-label": "Available actions" }, index.h("span", { id: `${containerId}-desc`, class: "sr-only" }, "The following links open related resources in new tabs"), index.h("div", { class: "flex flex-wrap justify-between gap-1", "aria-describedby": `${containerId}-desc` }, this.actions.map((action, index$1) => {
const baseClasses = 'p-1 font-semibold text-sm rounded border transition-colors duration-200';
const focusClasses = 'focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-500';
let styleClasses;
if (isDarkMode) {
switch (action.style) {
case 'primary':
styleClasses = 'bg-blue-700 text-white hover:bg-blue-600 border-blue-600';
break;
case 'secondary':
styleClasses = 'bg-slate-700 text-blue-300 hover:bg-slate-600 border-slate-600';
break;
case 'danger':
styleClasses = 'bg-red-700 text-white hover:bg-red-600 border-red-600';
break;
default:
styleClasses = 'bg-gray-700 text-gray-200 hover:bg-gray-600 border-gray-600';
}
}
else {
switch (action.style) {
case 'primary':
styleClasses = 'bg-blue-500 text-white hover:bg-blue-600 border-blue-400';
break;
case 'secondary':
styleClasses = 'bg-slate-200 text-blue-500 hover:bg-slate-300 border-slate-300';
break;
case 'danger':
styleClasses = 'bg-red-500 text-white hover:bg-red-600 border-red-400';
break;
default:
styleClasses = 'bg-gray-200 text-gray-700 hover:bg-gray-300 border-gray-300';
}
}
return (index.h("a", { key: `action-${action.title}-${index$1}`, href: action.link, class: `${baseClasses} ${styleClasses} ${focusClasses}`, rel: "noopener noreferrer", target: "_blank", "aria-label": `${action.title} (opens in new tab)`, title: `${action.title} - Opens in a new tab` }, index.h("span", null, action.title), index.h("span", { class: "sr-only" }, "(opens in new tab)")));
}))));
}
};
const collapsibleCss = "/*! 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-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--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-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease: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-yellow-50:oklch(98.7% .026 102.212);--color-green-50:oklch(98.2% .018 155.826);--color-blue-50:oklch(97% .014 254.604);--color-blue-200:oklch(88.2% .059 254.128);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-500:oklch(62.3% .214 259.815);--color-purple-50:oklch(97.7% .014 308.299);--color-slate-400:oklch(70.4% .04 256.788);--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-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;--text-lg:1.125rem;--text-lg--line-height:1.55556;--font-weight-medium:500;--font-weight-bold:700;--leading-normal:1.5;--radius-md:.375rem;--radius-lg:.5rem;--ease-in-out:cubic-bezier(.4,0,.2,1);--blur-sm:8px;--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{.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.top-0{top:calc(var(--spacing)*0)}.right-0{right:calc(var(--spacing)*0)}.bottom-0{bottom:calc(var(--spacing)*0)}.left-0{left:calc(var(--spacing)*0)}.z-50{z-index:50}.float-left{float:left}.container{width:100%}.mx-2{margin-inline:calc(var(--spacing)*2)}.my-0{margin-block:calc(var(--spacing)*0)}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-auto{margin-top:auto}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.ml-auto{margin-left:auto}.box-border{box-sizing:border-box}.block{display:block}.flex{display:flex}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.h-4{height:calc(var(--spacing)*4)}.h-full{height:100%}.min-h-0{min-height:calc(var(--spacing)*0)}.min-h-\\[3rem\\]{min-height:3rem}.w-3\\/4{width:75%}.w-4{width:calc(var(--spacing)*4)}.w-auto{width:auto}.w-full{width:100%}.max-w-full{max-width:100%}.min-w-0{min-width:calc(var(--spacing)*0)}.flex-shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.cursor-nwse-resize{cursor:nwse-resize}.cursor-pointer{cursor:pointer}.resize{resize:both}.list-disc{list-style-type:disc}.list-none{list-style-type:none}.flex-col{flex-direction:column}.flex-nowrap{flex-wrap:nowrap}.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)}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*4*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*4*var(--tw-space-y-reverse))}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.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-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-blue-200{border-color:var(--color-blue-200)}.border-gray-100{border-color:var(--color-gray-100)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-gray-600{border-color:var(--color-gray-600)}.border-gray-700{border-color:var(--color-gray-700)}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-500{background-color:var(--color-blue-500)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-gray-800{background-color:var(--color-gray-800)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-green-50{background-color:var(--color-green-50)}.bg-purple-50{background-color:var(--color-purple-50)}.bg-white{background-color:var(--color-white)}.bg-yellow-50{background-color:var(--color-yellow-50)}.p-0{padding:calc(var(--spacing)*0)}.p-2{padding:calc(var(--spacing)*2)}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.p-8{padding:calc(var(--spacing)*8)}.px-1{padding-inline:calc(var(--spacing)*1)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.py-0{padding-block:calc(var(--spacing)*0)}.py-1{padding-block:calc(var(--spacing)*1)}.pr-2{padding-right:calc(var(--spacing)*2)}.pl-5{padding-left:calc(var(--spacing)*5)}.text-center{text-align:center}.align-middle{vertical-align:middle}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.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))}.leading-normal{--tw-leading:var(--leading-normal);line-height:var(--leading-normal)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.text-clip{text-overflow:clip}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-gray-300{color:var(--color-gray-300)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-slate-400{color:var(--color-slate-400)}.text-white{color:var(--color-white)}.opacity-60{opacity:.6}.shadow,.shadow-sm{--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)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.transition-all,.transition-transform{transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.select-none{-webkit-user-select:none;user-select:none}.group-open\\:rotate-180:is(:where(.group):is([open],:popover-open,:open) *){rotate:180deg}.marker\\:hidden ::marker{display:none}.marker\\:hidden::marker{display:none}.marker\\:hidden ::-webkit-details-marker,.marker\\:hidden::-webkit-details-marker{display:none}.focus\\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\\:ring-2:focus-visible{--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-visible\\:ring-blue-400:focus-visible{--tw-ring-color:var(--color-blue-400)}.focus-visible\\:ring-offset-1:focus-visible{--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)}.\\[\\&\\:\\:-webkit-details-marker\\]\\:hidden::-webkit-details-marker{display: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-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--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-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial}}}@layer base{}@layer components;details summary::-webkit-details-marker{display:none}pid-collapsible{clear:both;display:block}pid-collapsible.resize-both{max-width:100%!important;overflow:auto!important;resize:both!important;transition:none!important;will-change:width,height}pid-collapsible.resize-both:after{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-width='2' d='M22 2 2 22M22 8 8 22m14-8-8 8'/%3E%3C/svg%3E\");background-position:100% 100%;background-repeat:no-repeat;bottom:0;content:\"\";cursor:nwse-resize;height:15px;pointer-events:none;position:absolute;right:0;width:15px;z-index:10}@supports ((-webkit-appearance:none)) and (not (display:-webkit-box)){pid-collapsible.resize-both{display:block!important;overflow:auto!important;position:relative!important;resize:both!important}pid-collapsible.resize-both:before{content:\"\";display:block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:-1}}@supports ((-webkit-appearance:none)){pid-collapsible details{display:flex!important;flex-direction:column!important;min-height:100%}}:root{--z-back:-1;--z-resize:10;--z-content:20;--z-footer:30;--z-header:50}:host{--initial-width:500px;--initial-height:300px;--min-width:300px;--min-height:200px;display:block}pid-collapsible summary:focus-visible{outline:2px solid #0ea5e9;outline-offset:2px}pid-collapsible .overflow-visible,pid-pagination .overflow-visible{overflow:visible!important}@property --tw-space-y-reverse{syntax:\"*\";inherits:false;initial-value:0}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-leading{syntax:\"*\";inherits:false}@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-backdrop-blur{syntax:\"*\";inherits:false}@property --tw-backdrop-brightness{syntax:\"*\";inherits:false}@property --tw-backdrop-contrast{syntax:\"*\";inherits:false}@property --tw-backdrop-grayscale{syntax:\"*\";inherits:false}@property --tw-backdrop-hue-rotate{syntax:\"*\";inherits:false}@property --tw-backdrop-invert{syntax:\"*\";inherits:false}@property --tw-backdrop-opacity{syntax:\"*\";inherits:false}@property --tw-backdrop-saturate{syntax:\"*\";inherits:false}@property --tw-backdrop-sepia{syntax:\"*\";inherits:false}@property --tw-duration{syntax:\"*\";inherits:false}@property --tw-ease{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 not all and (min-resolution:.001dpcm){@supports ((-webkit-appearance:none)){pid-collapsible details summary{display:block!important}pid-collapsible.resize-both{overflow:auto!important;position:relative!important;-webkit-resize:both!important;resize:both!important}pid-collapsible.resize-both:after{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-width='2' d='M22 2 2 22M22 8 8 22m14-8-8 8'/%3E%3C/svg%3E\");background-position:100% 100%;background-repeat:no-repeat;bottom:0;content:\"\";cursor:nwse-resize;height:15px;pointer-events:none;position:absolute;right:0;width:15px;z-index:10}}}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm){pid-collapsible{display:inline-block;margin-bottom:1px;transform:translateZ(0);vertical-align:top}pid-collapsible.resizing{contain:layout size;pointer-events:none}pid-collapsible:not(.resize-both):after{clear:both;content:\"\";display:block;height:0;visibility:hidden}pid-collapsible.resize-both{-webkit-resize:both!important}pid-collapsible.resize-both:after{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-width='2' d='M22 2 2 22M22 8 8 22m14-8-8 8'/%3E%3C/svg%3E\");background-position:100% 100%;background-repeat:no-repeat;bottom:0;content:\"\";cursor:nwse-resize;height:15px;pointer-events:none;position:absolute;right:0;width:15px;z-index:10}}@media (max-width:768px){:host{--initial-width:400px;--min-width:250px}}@media (max-width:480px){:host{--initial-width:300px;--min-width:200px}}@media (prefers-contrast:more){pid-collapsible summary{border:1px solid}pid-collapsible.resize-both:after{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-width='3' d='M22 2 2 22M22 8 8 22m14-8-8 8'/%3E%3C/svg%3E\");opacity:.9}}@media print{pid-collapsible.resize-both{resize:none!important}pid-collapsible.resize-both:after{display:none!important}}";
const CONSTANTS = {
DEFAULT_HEIGHT: '300px',
MIN_WIDTH: 300,
MIN_HEIGHT: 200,
PADDING_WIDTH: 40,
PADDING_HEIGHT: 60,
FOOTER_HEIGHT: 60,
};
const Z_INDICES = {
RESIZE_HANDLE: 10,
FOOTER_CONTENT: 30,
STICKY_ELEMENTS: 50,
};
const RESIZE_INDICATOR_SVG = `
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22 2L2 22" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<path d="M22 8L8 22" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<path d="M22 14L14 22" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
`;
const PidCollapsible = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.collapsibleToggle = index.createEvent(this, "collapsibleToggle");
this.contentHeightChange = index.createEvent(this, "contentHeightChange");
this.open = false;
this.emphasize = false;
this.darkMode = 'system';
this.lineHeight = 24;
this.showFooter = false;
this.isDarkMode = false;
this.isToggling = false;
this.resizeDebounceTimer = null;
this.lastResizeDimensions = { width: 0, height: 0 };
this.handleDarkModeChange = () => {
this.updateDarkMode();
};
this.handlePageChange = (event) => {
console.debug('Page changed to:', event.detail);
this.recalculateContentDimensions();
};
this.handleSafariCompatibility = (e) => {
if (!this.isSafari() || this.isToggling)
return;
this.isToggling = true;
e.preventDefault();
e.stopPropagation();
this.toggleCollapsible(e);
setTimeout(() => {
this.isToggling = false;
}, 100);
};
this.handleToggle = (event) => {
if (this.isToggling)
return;
this.toggleCollapsible(event);
};
}
watchOpen() {
this.updateAppearance();
if (this.open)
this.recalculateContentDimensions();
}
watchDarkMode() {
this.updateDarkMode();
}
componentWillLoad() {
this.currentWidth = this.initialWidth || '75%';
this.currentHeight = this.initialHeight || CONSTANTS.DEFAULT_HEIGHT;
this.initializeDarkMode();
}
componentDidLoad() {
this.setupResizeObserver();
this.updateAppearance();
this.addBrowserCompatibilityListeners();
this.addComponentEventListeners();
if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
this.el.style.display = 'inline-block';
this.el.style.verticalAlign = 'top';
const clearfix = document.createElement('div');
clearfix.style.clear = 'both';
clearfix.style.display = 'block';
clearfix.style.height = '0';
clearfix.style.visibility = 'hidden';
clearfix.classList.add('pid-collapsible-clearfix');
if (this.el.parentNode) {
this.el.parentNode.insertBefore(clearfix, this.el.nextSibling);
}
}
}
disconnectedCallback() {
this.cleanupResources();
if (this.el.parentNode) {
const clearfix = this.el.nextSibling;
if (clearfix instanceof HTMLElement && clearfix.classList.contains('pid-collapsible-clearfix')) {
this.el.parentNode.removeChild(clearfix);
}
}
this.cleanupDarkModeListener();
}
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.darkMode === 'dark';
}
}
updateDarkMode() {
if (this.darkMode === 'dark') {
this.isDarkMode = true;
}
else if (this.darkMode === 'light') {
this.isDarkMode = false;
}
else if (this.darkMode === 'system' && this.darkModeMediaQuery) {
this.isDarkMode = this.darkModeMediaQuery.matches;
}
}
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 recalculateContentDimensions() {
if (this.open) {
this.el.classList.add('resizing');
if (this.resizeDebounceTimer !== null) {
window.cancelAnimationFrame(this.resizeDebounceTimer);
}
return new Promise(resolve => {
this.resizeDebounceTimer = window.requestAnimationFrame(() => {
const dimensions = this.calculateContentDimensions();
requestAnimationFrame(() => {
const maxWidth = Math.max(dimensions.maxWidth, dimensions.contentWidth + CONSTANTS.PADDING_WIDTH);
const maxHeight = Math.max(dimensions.maxHeight, dimensions.contentHeight + CONSTANTS.PADDING_HEIGHT + (this.showFooter ? CONSTANTS.FOOTER_HEIGHT : 0));
this.el.style.maxWidth = `${maxWidth}px`;
this.el.style.maxHeight = `${maxHeight}px`;
const optimalWidth = dimensions.contentWidth + CONSTANTS.PADDING_WIDTH;
const optimalHeight = dimensions.contentHeight + CONSTANTS.PADDING_HEIGHT + (this.showFooter ? CONSTANTS.FOOTER_HEIGHT : 0);
if (!this.currentWidth || this.currentWidth === 'auto') {
this.currentWidth = this.initialWidth || '75%';
}
else if (!this.initialWidth) {
this.currentWidth = '75%';
}
else {
this.currentWidth = `${Math.max(optimalWidth, dimensions.contentWidth * 1)}px`;
}
if (!this.currentHeight || this.currentHeight === `${this.lineHeight}px`) {
this.currentHeight = this.initialHeight || `${optimalHeight}px`;
}
else {
this.currentHeight = `${optimalHeight}px`;
}
this.el.style.width = this.currentWidth;
this.el.style.height = this.currentHeight;
this.lastExpandedWidth = this.currentWidth;
this.lastExpandedHeight = this.currentHeight;
this.contentHeightChange.emit({ maxHeight });
this.el.classList.remove('resizing');
this.resizeDebounceTimer = null;
resolve(dimensions);
});
});
});
}
return null;
}
setupResizeObserver() {
if (!window.ResizeObserver) {
console.warn('ResizeObserver not supported in this browser');
return;
}
if (this.resizeObserver) {
this.resizeObserver.disconnect();
}
this.resizeObserver = new ResizeObserver(entries => {
if (!this.open)
return;
const entry = entries[0];
if (!entry)
return;
const width = entry.contentRect.width;
const height = entry.contentRect.height;
if (Math.abs(width - this.lastResizeDimensions.width) < 2 && Math.abs(height - this.lastResizeDimensions.height) < 2) {
return;
}
this.lastResizeDimensions = { width, height };
if (this.resizeDebounceTimer !== null) {
window.cancelAnimationFrame(this.resizeDebounceTimer);
}
this.resizeDebounceTimer = window.requestAnimationFrame(() => {
this.currentWidth = `${width}px`;
this.currentHeight = `${height}px`;
this.resizeDebounceTimer = null;
});
});
if (this.open) {
this.resizeObserver.observe(this.el);
}
}
addBrowserCompatibilityListeners() {
const details = this.el.querySelector('details');
if (!details)
return;
const summary = details.querySelector('summary');
if (!summary)
return;
summary.addEventListener('click', this.handleSafariCompatibility, { capture: true });
}
isSafari() {
return /^((?!chrome|android).)*safari/i.test(navigator.userAgent) && !/CriOS|FxiOS|EdgiOS/i.test(navigator.userAgent);
}
addComponentEventListeners() {
const dataTables = this.el.querySelectorAll('pid-data-table');
dataTables.forEach(dataTable => {
dataTable.addEventListener('pageChange', this.handlePageChange);
});
}
removeComponentEventListeners() {
const dataTables = this.el.querySelectorAll('pid-data-table');
dataTables.forEach(dataTable => {
dataTable.removeEventListener('pageChange', this.handlePageChange);
});
}
cleanupResources() {
if (this.resizeDebounceTimer !== null) {
window.cancelAnimationFrame(this.resizeDebounceTimer);
this.resizeDebounceTimer = null;
}
if (this.resizeObserver) {
this.resizeObserver.disconnect();
this.resizeObserver = null;
}
this.removeComponentEventListeners();
const details = this.el.querySelector('details');
if (details) {
const summary = details.querySelector('summary');
if (summary) {
summary.removeEventListener('click', this.handleSafariCompatibility, { capture: true });
}
}
}
updateAppearance() {
this.resetStyles();
if (this.open) {
this.applyExpandedStyles();
}
else {
this.applyCollapsedStyles();
}
}
resetStyles() {
const classesToRemove = ['resize-both', 'overflow-auto', 'w-auto', 'inline-block', 'align-middle', 'overflow-hidden', 'py-0', 'my-0', 'float-left', 'bg-white'];
classesToRemove.forEach(cls => {
if (this.el.classList.contains(cls)) {
this.el.classList.remove(cls);
}
});
this.el.style.width = '';
this.el.style.height = '';
this.el.style.maxWidth = '';
this.el.style.maxHeight = '';
this.el.style.resize = '';
this.el.style.lineHeight = '';
}
applyExpandedStyles() {
try {
this.el.classList.add('resize-both', 'overflow-auto', 'bg-white', 'relative', 'block');
const dimensions = this.calculateContentDimensions();
this.el.style.maxWidth = `${dimensions.maxWidth}px`;
this.el.style.maxHeight = `${dimensions.maxHeight}px`;
this.updateDimensions(dimensions);
const summary = this.el.querySelector('summary');
if (summary) {
summary.style.height = `${this.lineHeight}px`;
summary.style.minHeight = `${this.lineHeight}px`;
summary.style.maxHeight = `${this.lineHeight}px`;
}
this.el.style.resize = 'both';
this.addResizeIndicator();
if (this.resizeObserver) {
this.resizeObserver.observe(this.el);
}
}
catch (error) {
console.error('Failed to apply expanded styles:', error);
}
}
calculateContentDimensions() {
const contentElement = this.el.querySelector('.flex-grow');
const contentWidth = (contentElement === null || contentElement === void 0 ? void 0 : contentElement.scrollWidth) || CONSTANTS.MIN_WIDTH;
const contentHeight = (contentElement === null || contentElement === void 0 ? void 0 : contentElement.scrollHeight) || CONSTANTS.MIN_HEIGHT;
const footerHeight = this.showFooter ? CONSTANTS.FOOTER_HEIGHT : 0;
const maxWidth = contentWidth + CONSTANTS.PADDING_WIDTH;
const maxHeight = contentHeight + CONSTANTS.PADDING_HEIGHT + footerHeight;
return { contentWidth, contentHeight, maxWidth, maxHeight };
}
updateDimensions(dimensions) {
this.el.classList.add('resizing');
const { contentWidth, contentHeight, maxWidth, maxHeight } = dimensions;
const optimalWidth = Math.min(Math.max(contentWidth + CONSTANTS.PADDING_WIDTH, CONSTANTS.MIN_WIDTH), maxWidth);
this.currentWidth = `${optimalWidth}px`;
const footerHeight = this.showFooter ? CONSTANTS.FOOTER_HEIGHT : 0;
const optimalHeight = Math.min(Math.max(contentHeight + CONSTANTS.PADDING_HEIGHT + footerHeight, CONSTANTS.MIN_HEIGHT), maxHeight);
this.currentHeight = `${optimalHeight}px`;
this.lastExpandedWidth = this.currentWidth;
this.lastExpandedHeight = this.currentHeight;
requestAnimationFrame(() => {
this.el.style.width = this.currentWidth;
this.el.style.height = this.currentHeight;
this.el.classList.remove('resizing');
});
}
applyCollapsedStyles() {
if (this.el.style.width && this.el.style.width !== 'auto') {
this.lastExpandedWidth = this.el.style.width;
this.currentWidth = this.el.style.width;
}
if (this.el.style.height && this.el.style.height !== `${this.lineHeight}px`) {
this.lastExpandedHeight = this.el.style.height;
this.currentHeight = this.el.style.height;
}
if (this.lastExpandedWidth || this.lastExpandedHeight) {
console.debug('Storing dimensions for later restoration:', { width: this.lastExpandedWidth, height: this.lastExpandedHeight });
}
this.el.style.maxWidth = '';
this.el.style.maxHeight = '';
this.el.style.width = 'auto';
this.el.classList.add('w-auto', 'inline-block', 'align-middle', 'overflow-hidden', 'py-0', 'my-0');
this.el.style.height = `${this.lineHeight}px`;
this.el.style.lineHeight = `${this.lineHeight}px`;
this.el.style.minHeight = `${this.lineHeight}px`;
this.el.style.maxHeight = `${this.lineHeight}px`;
if (this.isSafari()) {
this.el.style.marginBottom = '1px';
this.el.style.verticalAlign = 'top';
}
this.el.style.resize = 'none';
this.removeResizeIndicator();
if (this.resizeObserver) {
this.resizeObserver.unobserve(this.el);
}
}
addResizeIndicator() {
try {
this.removeResizeIndicator();
const resizeIndicator = document.createElement('div');
resizeIndicator.className = `absolute bottom-0 right-0 w-4 h-4 opacity-60 pointer-events-none resize-indicator cursor-nwse-resize text-slate-400 z-${Z_INDICES.RESIZE_HANDLE}`;
resizeIndicator.innerHTML = RESIZE_INDICATOR_SVG;
resizeIndicator.setAttribute('aria-hidden', 'true');
this.el.appendChild(resizeIndicator);
}
catch (error) {
console.error('Failed to add resize indicator:', error);
}
}
removeResizeIndicator() {
const resizeIndicator = this.el.querySelector('.resize-indicator');
if (resizeIndicator) {
resizeIndicator.remove();
}
}
toggleCollapsible(event) {
this.isToggling = true;
event.stopPropagation();
event.preventDefault();
if (event.cancelable) {
event.stopImmediatePropagation();
}
const details = this.el.querySelector('details');
if (!details) {
this.isToggling = false;
return;
}
this.open = !this.open;
details.open = this.open;
this.collapsibleToggle.emit(this.open);
this.updateAppearance();
if (this.open && this.isSafari()) {
setTimeout(() => {
this.recalculateContentDimensions();
}, 50);
}
setTimeout(() => {
details.open = this.open;
setTimeout(() => {
this.isToggling = false;
}, 100);
}, 0);
}
getHostClasses() {
const baseClasses = ['relative', 'mx-2', 'font-sans', 'transition-all', 'duration-200', 'ease-in-out', 'box-border', 'leading-normal'];
baseClasses.push('w-3/4');
if (this.emphasize) {
if (this.isDarkMode) {
baseClasses.push('border', 'border-gray-600', 'rounded-md', 'shadow-sm');
}
else {
baseClasses.push('border', 'border-gray-300', 'rounded-md', 'shadow-sm');
}
}
if (this.open) {
baseClasses.push('mb-2', 'max-w-full', 'text-xs', 'block');
}
else {
baseClasses.push('my-0', 'text-sm', 'float-left');
}
if (this.isDarkMode) {
baseClasses.push('text-white');
}
return baseClasses.join(' ');
}
getDetailsClasses() {
const baseClasses = ['group', 'w-full', 'font-sans', 'transition-all', 'duration-200', 'ease-in-out', 'flex', 'flex-col'];
if (this.open) {
baseClasses.push('h-full', 'overflow-visible');
}
else {
baseClasses.push('text-clip', 'overflow-hidden');
}
if (this.isDarkMode) {
baseClasses.push('bg-gray-800', 'text-white');
}
return baseClasses.join(' ');
}
getSummaryClasses() {
const baseClasses = [
'font-bold',
'font-mono',
'cursor-pointer',
'list-none',
'flex',
'items-center',
'focus:outline-none',
'focus-visible:ring-2',
'focus-visible:ring-blue-400',
'focus-visible:ring-offset-1',
'rounded-lg',
'marker:hidden',
'[&::-webkit-details-marker]:hidden',
'select-none',
'box-border',
];
if (this.open) {
if (this.isDarkMode) {
baseClasses.push('sticky', 'top-0', 'bg-gray-800', `z-${Z_INDICES.STICKY_ELEMENTS}`, 'border-b', 'border-gray-700', 'px-2', 'py-0', 'overflow-visible', 'backdrop-blur-sm');
}
else {
baseClasses.push('sticky', 'top-0', 'bg-white', `z-${Z_INDICES.STICKY_ELEMENTS}`, 'border-b', 'border-gray-100', 'px-2', 'py-0', 'overflow-visible', 'backdrop-blur-sm');
}
}
else {
baseClasses.push('px-1', 'py-0', 'whitespace-nowrap', 'overflow-hidden', 'text-ellipsis', 'max-w-full');
}
baseClasses.push(`h-[${this.lineHeight}px]`);
return baseClasses.join(' ');
}
getContentClasses() {
const baseClasses = ['flex-grow', 'flex', 'flex-col', 'min-h-0'];
if (this.open) {
baseClasses.push('overflow-auto', 'p-2');
}
else {
baseClasses.push('overflow-hidden', 'p-0');
}
if (this.isDarkMode) {
baseClasses.push('bg-gray-800', 'text-white');
}
return baseClasses.join(' ');
}
getFooterClasses() {
const baseClasses = ['flex', 'flex-col', 'w-full', 'mt-auto', 'sticky', 'bottom-0', 'left-0', 'right-0', 'border-t', `z-${Z_INDICES.FOOTER_CONTENT}`, 'backdrop-blur-sm'];
if (this.isDarkMode) {
baseClasses.push('bg-gray-800', 'border-gray-700');
}
else {
baseClasses.push('bg-white', 'border-gray-200');
}
return baseClasses.join(' ');
}
getFooterActionsClasses() {
const baseClasses = ['flex', 'items-center', 'justify-between', 'gap-2', 'p-2', 'min-h-[3rem]', 'flex-shrink-0'];
if (this.isDarkMode) {
baseClasses.push('bg-gray-800');
}
else {
baseClasses.push('bg-white');
}
return baseClasses.join(' ');
}
render() {
const hostClasses = this.getHostClasses();
const detailsClasses = this.getDetailsClasses();
const summaryClasses = this.getSummaryClasses();
const contentClasses = this.getContentClasses();
const footerClasses = this.getFooterClasses();
const footerActionsClasses = this.getFooterActionsClasses();
return (index.h(index.Host, { key: 'd80da3a2a4b680852fb94d687b67a3eb11ba6bfe', class: hostClasses }, index.h("details", { key: 'b486f35478ff6abb10a3442cd556b787181acd88', class: detailsClasses, open: this.open, onToggle: this.handleToggle, onClick: e => {
e.stopPropagation();
e.stopImmediatePropagation();
} }, index.h("summary", { key: '83f43a1315f1b964a008f77e3fdbb45817a48ff4', class: summaryClasses, style: { lineHeight: `${this.lineHeight}px`, height: `${this.lineHeight}px` }, onClick: e => {
e.stopPropagation();
e.stopImmediatePropagation();