@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.
845 lines (844 loc) • 34.3 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";
const CONSTANTS = {
DEFAULT_WIDTH: '500px',
DEFAULT_HEIGHT: '300px',
MIN_WIDTH: 300,
MIN_HEIGHT: 200,
PADDING_WIDTH: 40,
PADDING_HEIGHT: 60,
FOOTER_HEIGHT: 60,
};
const Z_INDICES = {
RESIZE_HANDLE: 10,
COPY_BUTTON: 20,
FOOTER_CONTENT: 30,
PAGINATION: 40,
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>
`;
export class PidCollapsible {
constructor() {
this.open = false;
this.emphasize = false;
this.darkMode = 'system';
this.lineHeight = 24;
this.showFooter = false;
this.expanded = false;
this.previewScrollable = false;
this.isDarkMode = false;
this.isToggling = false;
this.lastClickTime = 0;
this.pendingClickTimer = null;
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;
const target = e.target;
if ((target === null || target === void 0 ? void 0 : target.closest('copy-button')) || (target === null || target === void 0 ? void 0 : target.closest('[slot="summary-actions"]')) ||
(target === null || target === void 0 ? void 0 : target.closest('button')) || (target === null || target === void 0 ? void 0 : target.closest('a'))) {
return;
}
e.preventDefault();
e.stopPropagation();
this.performToggle(!this.open);
};
this.handleToggle = (event) => {
event.preventDefault();
event.stopPropagation();
const details = this.el.querySelector('details');
if (details) {
details.open = this.open;
}
};
this.handleSummaryClick = (event) => {
const path = event.composedPath();
const clickedInteractive = path.some(el => {
var _a;
return el instanceof HTMLElement && (el.tagName === 'BUTTON' ||
el.tagName === 'A' ||
el.tagName === 'COPY-BUTTON' ||
el.tagName === 'PID-ACTIONS' ||
((_a = el.getAttribute) === null || _a === void 0 ? void 0 : _a.call(el, 'role')) === 'button');
});
if (clickedInteractive) {
return;
}
event.preventDefault();
event.stopPropagation();
if (this.isToggling)
return;
const now = Date.now();
const elapsed = now - this.lastClickTime;
this.lastClickTime = now;
if (this.pendingClickTimer !== null) {
clearTimeout(this.pendingClickTimer);
this.pendingClickTimer = null;
}
if (elapsed < 300 && this.open) {
this.performToggle(false);
}
else {
this.pendingClickTimer = setTimeout(() => {
this.pendingClickTimer = null;
this.performToggle(!this.open);
}, 200);
}
};
}
watchOpen() {
this.updateAppearance();
if (this.open)
this.recalculateContentDimensions();
}
watchDarkMode() {
this.updateDarkMode();
}
componentWillLoad() {
this.currentWidth = this.initialWidth || CONSTANTS.DEFAULT_WIDTH;
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.verticalAlign = 'top';
}
}
disconnectedCallback() {
this.cleanupResources();
this.cleanupDarkModeListener();
}
async recalculateContentDimensions() {
if (this.open) {
if (this.resizeDebounceTimer !== null) {
window.cancelAnimationFrame(this.resizeDebounceTimer);
}
return new Promise(resolve => {
this.resizeDebounceTimer = window.requestAnimationFrame(() => {
if (this.lastExpandedWidth) {
this.currentWidth = this.lastExpandedWidth;
}
else {
this.currentWidth = this.initialWidth || this.getResponsiveDefaultWidth();
}
this.el.style.width = this.currentWidth;
this.el.style.height = 'auto';
this.el.style.maxHeight = 'max-content';
requestAnimationFrame(() => {
if (this.open) {
const actualHeight = this.el.scrollHeight;
this.el.style.height = `${actualHeight}px`;
this.el.style.maxHeight = `${actualHeight}px`;
}
this.lastExpandedWidth = this.currentWidth;
const dimensions = this.calculateContentDimensions();
this.contentHeightChange.emit({ maxHeight: dimensions.maxHeight });
this.resizeDebounceTimer = null;
resolve(dimensions);
});
});
});
}
return null;
}
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 (h(Host, { key: 'cbcf55c166323c79e344ead5bd5811d19088c6e4', class: hostClasses }, h("details", { key: '6b2e144d57340c7fc0637c62a1e618429ff423b4', class: detailsClasses, open: this.open, onToggle: this.handleToggle }, h("summary", { key: '4c053bf0b5a0609e7e5f37abf0892dc459dc08a5', class: summaryClasses, onClick: this.handleSummaryClick }, this.emphasize && (h("span", { key: '8a264bf2bd3223734bf3df20b244c987a02bb1dd' }, h("svg", { key: '2ea1c2df5db8316f4bdc14f3d1e1f2c8b3bb9403', class: `${this.isDarkMode ? 'text-gray-300' : 'text-gray-600'} transition-transform duration-200 group-open:rotate-180 mr-2 ml-1`, fill: "none", height: "12", width: "12", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "1.5", viewBox: "0 0 12 12", "aria-hidden": "true" }, h("path", { key: '3c4e317acb12ea1ac020f5ea6fe654c0b154ce0e', d: "M 2 3 l 4 6 l 4 -6" })))), h("span", { key: '3cbead450cf92831327ff381033ebe4c499af442', class: `block ${this.previewScrollable ? 'shrink-0' : 'min-w-0 whitespace-nowrap overflow-hidden text-ellipsis'}` }, h("slot", { key: '5706002a1de3ed07ddf9f5fc21e9c223c36b3eb4', name: "summary" })), h("div", { key: 'ca8c041962942bb4eec5d713aa6ad34d4dbd021a', class: `ml-auto shrink-0 ${this.previewScrollable ? 'sticky right-0' : ''}` }, h("slot", { key: '6fc238f5b0b681da07e37ae57e3aa1d3146e1895', name: "summary-actions" }))), h("div", { key: '41d4b51f1e6fd78ed9ff8e1fa7f7bb3dcfc45a25', class: `${contentClasses}` }, h("slot", { key: 'ef9f60ae2c92cbae6d16b68b68aa9def3b9c806b' })), this.showFooter && this.open && (h("div", { key: '2dade649916ee68dd3fe367e485ad5bbacd644d9', class: footerClasses }, h("div", { key: 'db9ac1fe6b58291e6ccd4f214b2123832962ccd4', class: `z-50 overflow-visible border-b ${this.isDarkMode ? 'border-gray-700 bg-gray-800' : 'border-gray-100 bg-white'}` }, h("slot", { key: '36ee7ecacee44fdf2a1f2e8d92a83f7e980f1ea7', name: "footer" })), h("div", { key: '38969d3f4c65671dc51e66cfbc076094115cb38c', class: footerActionsClasses }, h("div", { key: '9666f30918d3c437211c33d351e0d3cdc9a9ffd6', class: "grow overflow-visible" }, h("slot", { key: 'fb9431b73a3d54bf2d85db2ce51565a161b67715', name: "footer-left" })), h("div", { key: 'a599293e40865c70bf9936a4e3c377cf833986cc', class: "flex shrink-0 items-center gap-2 overflow-visible" }, h("slot", { key: '57c7cfe3db67cc7706d32281b1b580bd705f5432', name: "footer-actions" }))))))));
}
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);
}
}
}
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', 'align-top', 'overflow-hidden', 'py-0', 'my-0', 'float-left', 'bg-white', 'block'];
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 = '';
this.el.style.overflow = '';
}
applyExpandedStyles() {
try {
this.el.classList.add('resize-both', 'relative', 'block');
if (this.emphasize) {
this.el.classList.add('bg-white');
}
if (this.lastExpandedWidth) {
this.currentWidth = this.lastExpandedWidth;
}
else if (this.initialWidth) {
this.currentWidth = this.initialWidth;
}
else {
this.currentWidth = this.getResponsiveDefaultWidth();
}
this.el.style.width = this.currentWidth;
this.el.style.height = 'auto';
this.el.style.maxHeight = 'max-content';
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();
requestAnimationFrame(() => {
if (this.open) {
const actualHeight = this.el.scrollHeight;
this.el.style.height = `${actualHeight}px`;
this.el.style.maxHeight = `${actualHeight}px`;
}
});
if (this.resizeObserver) {
this.resizeObserver.observe(this.el);
}
}
catch (error) {
console.error('Failed to apply expanded styles:', error);
}
}
getResponsiveDefaultWidth() {
var _a;
let node = this.el;
while (node) {
const root = node.getRootNode();
if (root instanceof ShadowRoot) {
node = root.host;
continue;
}
if (node instanceof HTMLElement) {
const tag = node.tagName.toLowerCase();
if (tag === 'pid-component' || tag === 'pid-collapsible') {
node = node.parentElement;
continue;
}
}
break;
}
const container = node instanceof HTMLElement ? node : null;
const availableWidth = (_a = container === null || container === void 0 ? void 0 : container.clientWidth) !== null && _a !== void 0 ? _a : window.innerWidth;
if (availableWidth < 600) {
return '100%';
}
if (availableWidth <= 1024) {
return '70%';
}
return '50%';
}
calculateContentDimensions() {
const contentElement = this.el.querySelector('.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 };
}
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', 'py-0', 'my-0');
this.el.style.overflow = 'clip';
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 resizeIndicators = this.el.querySelectorAll('.resize-indicator');
resizeIndicators.forEach(indicator => indicator.remove());
}
performToggle(newOpen) {
this.isToggling = true;
const details = this.el.querySelector('details');
this.open = newOpen;
if (details) {
details.open = newOpen;
}
this.collapsibleToggle.emit(this.open);
this.updateAppearance();
if (this.open && this.isSafari()) {
setTimeout(() => this.recalculateContentDimensions(), 50);
}
setTimeout(() => {
if (details)
details.open = this.open;
this.isToggling = false;
}, 50);
}
getHostClasses() {
const baseClasses = ['relative', 'font-sans', 'leading-normal'];
if (this.emphasize) {
baseClasses.push('box-border', 'border', 'rounded-md', 'shadow-xs');
if (this.isDarkMode) {
baseClasses.push('border-gray-600');
}
else {
baseClasses.push('border-gray-300');
}
}
if (this.open) {
baseClasses.push('mb-2', 'max-w-full', 'text-xs', 'block');
}
else {
baseClasses.push(this.initialWidth === '100%' ? 'max-w-full' : 'max-w-md');
baseClasses.push('my-0', 'text-sm', 'inline-block');
}
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) {
}
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-hidden',
'focus-visible:ring-2',
'focus-visible:ring-blue-400',
'focus-visible:ring-offset-1',
'rounded-lg',
'marker:hidden',
'[&::-webkit-details-marker]:hidden',
'select-none',
'py-0',
'min-w-1/10',
];
if (this.open) {
baseClasses.push('sticky', 'top-0', `z-${Z_INDICES.STICKY_ELEMENTS}`, 'overflow-x-auto', 'backdrop-blur-xs');
if (this.isDarkMode) {
baseClasses.push('bg-gray-800');
if (this.emphasize) {
baseClasses.push('border-b', 'box-border', 'border-gray-700');
}
}
else {
baseClasses.push('bg-white', 'text-ellipsis');
if (this.emphasize) {
baseClasses.push('border-b', 'box-border', 'border-gray-100');
}
}
}
else {
baseClasses.push('whitespace-nowrap', 'overflow-hidden', 'text-ellipsis', 'truncate', 'max-w-full');
}
baseClasses.push(`h-[${this.lineHeight}px]`);
return baseClasses.join(' ');
}
getContentClasses() {
const baseClasses = ['grow', 'flex', 'flex-col', 'min-h-0'];
if (this.open) {
}
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-xs'];
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-1', 'min-h-12', 'shrink-0', 'overflow-x-auto'];
if (this.isDarkMode) {
baseClasses.push('bg-gray-800');
}
else {
baseClasses.push('bg-white');
}
return baseClasses.join(' ');
}
static get is() { return "pid-collapsible"; }
static get originalStyleUrls() {
return {
"$": ["collapsible.css"]
};
}
static get styleUrls() {
return {
"$": ["collapsible.css"]
};
}
static get properties() {
return {
"open": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "description",
"text": "Controls whether the component is expanded (opened) or collapsed"
}],
"text": "Whether the collapsible is open"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "open",
"defaultValue": "false"
},
"emphasize": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Whether to emphasize the component with border and shadow"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "emphasize",
"defaultValue": "false"
},
"darkMode": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'light' | 'dark' | 'system'",
"resolved": "\"dark\" | \"light\" | \"system\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The dark mode setting for the component\nOptions: \"light\", \"dark\", \"system\"\nDefault: \"system\""
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "dark-mode",
"defaultValue": "'system'"
},
"initialWidth": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Initial width when expanded"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "initial-width"
},
"initialHeight": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Initial height when expanded"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "initial-height"
},
"lineHeight": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Line height for collapsed state"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "line-height",
"defaultValue": "24"
},
"showFooter": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Whether to show the footer section"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "show-footer",
"defaultValue": "false"
},
"expanded": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Whether to apply floating/overlay styling when expanded.\nWhen true, applies absolute positioning and z-index for overlay behavior."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "expanded",
"defaultValue": "false"
},
"previewScrollable": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Whether the preview should be scrollable (for subcomponents or expanded state)."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "preview-scrollable",
"defaultValue": "false"
}
};
}
static get states() {
return {
"currentWidth": {},
"currentHeight": {},
"isDarkMode": {}
};
}
static get events() {
return [{
"method": "collapsibleToggle",
"name": "collapsibleToggle",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Event emitted when the collapsible is toggled"
},
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
}
}, {
"method": "contentHeightChange",
"name": "contentHeightChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Event emitted when content dimensions need to be recalculated\nUseful for pagination to ensure proper height"
},
"complexType": {
"original": "{ maxHeight: number }",
"resolved": "{ maxHeight: number; }",
"references": {}
}
}];
}
static get methods() {
return {
"recalculateContentDimensions": {
"complexType": {
"signature": "() => Promise<{ contentWidth: number; contentHeight: number; maxWidth: number; maxHeight: number; }>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<{ contentWidth: number; contentHeight: number; maxWidth: number; maxHeight: number; }>"
},
"docs": {
"text": "Public method to recalculate content dimensions\nCan be called externally, for example when pagination changes\nOptimized for better performance",
"tags": []
}
}
};
}
static get elementRef() { return "el"; }
static get watchers() {
return [{
"propName": "open",
"methodName": "watchOpen"
}, {
"propName": "darkMode",
"methodName": "watchDarkMode"
}];
}
}
//# sourceMappingURL=pid-collapsible.js.map