@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.
767 lines (766 loc) • 32.4 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 { 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.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 (h(Host, { key: 'd80da3a2a4b680852fb94d687b67a3eb11ba6bfe', class: hostClasses }, h("details", { key: 'b486f35478ff6abb10a3442cd556b787181acd88', class: detailsClasses, open: this.open, onToggle: this.handleToggle, onClick: e => {
e.stopPropagation();
e.stopImmediatePropagation();
} }, h("summary", { key: '83f43a1315f1b964a008f77e3fdbb45817a48ff4', class: summaryClasses, style: { lineHeight: `${this.lineHeight}px`, height: `${this.lineHeight}px` }, onClick: e => {
e.stopPropagation();
e.stopImmediatePropagation();
} }, h("span", { key: '74fe43b1a4985dfcce8e03bf46755bfc52469fdd', class: `inline-flex h-full items-center gap-1 pr-2 ${this.open ? 'flex-nowrap whitespace-nowrap' : 'min-w-0 flex-nowrap overflow-hidden'}` }, this.emphasize && (h("span", { key: 'af05d92691742cddcdd82ab5ad15c5a1cd36f44b', class: "flex h-full flex-shrink-0 items-center" }, h("svg", { key: 'f264f034a7b5eb6497228d49b3ecf66948b1414f', class: `${this.isDarkMode ? 'text-gray-300' : 'text-gray-600'} transition-transform duration-200 group-open:rotate-180`, 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: '050903b89912d2c5e8890e251069864b4bf96af3', d: "M 2 3 l 4 6 l 4 -6" })))), h("span", { key: 'ed1997263533c27516a02692d35b2b1c71fd8f23', class: `${this.open ? 'overflow-visible' : 'min-w-0 truncate'} flex h-full items-center` }, h("slot", { key: 'ed39d967ddff867b4637e45e7760b4fa4d5b2a1b', name: "summary" }))), h("div", { key: '51c0fcdb875f2f5a067587a8cefe20b5384823b1', class: "ml-auto flex h-full flex-shrink-0 items-center" }, h("slot", { key: 'bbb33dcd322fcb6ce29ce8f32c921d57e831db5e', name: "summary-actions" }))), h("div", { key: '07b70d0ad0b2d183856a0673060abf1adf47a6b9', class: `${contentClasses}` }, h("slot", { key: 'd9e4fc9cc82c966fd7a84959755443ab1352f9d2' })), this.showFooter && this.open && (h("div", { key: 'e77a6f33704487cf32ce3c6ea419ca79857dac40', class: footerClasses }, h("div", { key: '64581a1dc9285b2cf01bae72663e4618d2e3596c', class: `z-50 overflow-visible border-b ${this.isDarkMode ? 'border-gray-700 bg-gray-800' : 'border-gray-100 bg-white'}` }, h("slot", { key: '3716388ac91d77fb9ae828a786cf92b06d21912e', name: "footer" })), h("div", { key: 'bfafe9c0bbbedfc433960bf431ff4c3864e949c0', class: footerActionsClasses }, h("div", { key: '0d9aa1bb073e5a39ba537810232b0ff132305c29', class: "flex-grow overflow-visible" }, h("slot", { key: 'a85b8d920b3bc7ac5a9ca9a0077d070af26b5e82', name: "footer-left" })), h("div", { key: 'e2896745bcf4c037f86982a001a3afd09d2bfad5', class: "flex flex-shrink-0 items-center gap-2 overflow-visible" }, h("slot", { key: '240cab1871ee2780a45f2f6a3995d11cdb15ed45', name: "footer-actions" }))))))));
}
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",
"attribute": "open",
"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,
"defaultValue": "false"
},
"emphasize": {
"type": "boolean",
"attribute": "emphasize",
"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,
"defaultValue": "false"
},
"darkMode": {
"type": "string",
"attribute": "dark-mode",
"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,
"defaultValue": "'system'"
},
"initialWidth": {
"type": "string",
"attribute": "initial-width",
"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
},
"initialHeight": {
"type": "string",
"attribute": "initial-height",
"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
},
"lineHeight": {
"type": "number",
"attribute": "line-height",
"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,
"defaultValue": "24"
},
"showFooter": {
"type": "boolean",
"attribute": "show-footer",
"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,
"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<any>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<any>"
},
"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