@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.
993 lines (989 loc) • 44.3 kB
TypeScript
/* eslint-disable */
/* tslint:disable */
/**
* This is an autogenerated file created by the Stencil compiler.
* It contains typing information for all components that exist in this project.
*/
import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
import { FoldableAction } from "./utils/FoldableAction";
import { FoldableItem } from "./utils/FoldableItem";
export { FoldableAction } from "./utils/FoldableAction";
export { FoldableItem } from "./utils/FoldableItem";
export namespace Components {
interface ColorHighlight {
/**
* The text to highlight.
* @type {string}
*/
"text": string;
}
interface CopyButton {
/**
* Dark mode setting for the button. When provided, this takes precedence over DOM-based dark mode detection.
* @type {'light' | 'dark' | 'system'}
* @public
* @default 'light'
*/
"darkMode": 'light' | 'dark' | 'system';
/**
* Optional custom label for the button. If not provided, a default label will be used.
* @type {string}
* @public
*/
"label"?: string;
/**
* The value to copy to the clipboard.
* @type {string}
* @public
*/
"value": string;
}
interface JsonViewer {
/**
* Collapse all nodes in the tree view
*/
"collapseAllNodes": () => Promise<void>;
/**
* The JSON data to display. Can be a JSON string or a JavaScript object.
*/
"data": string | object;
/**
* Set to true to open all nodes in tree view initially.
* @default false
*/
"expandAll": boolean;
/**
* Expand all nodes in the tree view
*/
"expandAllNodes": () => Promise<void>;
/**
* Maximum height of the viewer in pixels. Set to 0 for no limit.
* @default 500
*/
"maxHeight": number;
/**
* Set to true to enable line numbers in code view.
* @default true
*/
"showLineNumbers": boolean;
/**
* Theme for syntax highlighting. Options: 'light', 'dark', or 'system'. System will use the user's system preference.
* @default 'system'
*/
"theme": 'light' | 'dark' | 'system';
/**
* Initial view mode for the JSON data. Can be 'tree' or 'code'.
* @default 'tree'
*/
"viewMode": 'tree' | 'code';
}
interface LocaleVisualization {
/**
* The locale to visualize.
* @type {string}
* @public
*/
"locale": string;
/**
* Whether to show the flag of the region.
* @type {boolean}
* @public
* @default true
*/
"showFlag": boolean;
}
interface PidActions {
/**
* Array of actions to display
* @default []
*/
"actions": FoldableAction[];
/**
* Optional ID for the actions container for ARIA references
*/
"actionsId"?: string;
/**
* The dark mode setting for the component Options: "light", "dark", "system" Default: "system"
* @default 'system'
*/
"darkMode": 'light' | 'dark' | 'system';
}
/**
* Component for creating collapsible/expandable content sections
* with resize capability and cross-browser compatibility
*/
interface PidCollapsible {
/**
* The dark mode setting for the component Options: "light", "dark", "system" Default: "system"
* @default 'system'
*/
"darkMode": 'light' | 'dark' | 'system';
/**
* Whether to emphasize the component with border and shadow
* @default false
*/
"emphasize": boolean;
/**
* Whether to apply floating/overlay styling when expanded. When true, applies absolute positioning and z-index for overlay behavior.
* @default false
*/
"expanded": boolean;
/**
* Initial height when expanded
*/
"initialHeight"?: string;
/**
* Initial width when expanded
*/
"initialWidth"?: string;
/**
* Line height for collapsed state
* @default 24
*/
"lineHeight": number;
/**
* Whether the collapsible is open
* @description Controls whether the component is expanded (opened) or collapsed
* @default false
*/
"open": boolean;
/**
* Whether the preview should be scrollable (for subcomponents or expanded state).
* @default false
*/
"previewScrollable": boolean;
/**
* Public method to recalculate content dimensions Can be called externally, for example when pagination changes Optimized for better performance
*/
"recalculateContentDimensions": () => Promise<{ contentWidth: number; contentHeight: number; maxWidth: number; maxHeight: number; }>;
/**
* Whether to show the footer section
* @default false
*/
"showFooter": boolean;
}
interface PidComponent {
/**
* The current level of subcomponents. Defaults to 0. (optional)
* @type {number}
* @default 0
*/
"currentLevelOfSubcomponents": number;
/**
* The dark mode setting for the component Options: "light", "dark", "system" Default: "light" for better compatibility
* @type {string}
* @default 'light'
*/
"darkMode": 'light' | 'dark' | 'system';
/**
* Determines the default time to live (TTL) for entries in the IndexedDB. Defaults to 24 hours. Units are in milliseconds. (optional)
* @type {number}
* @default 24 * 60 * 60 * 1000
*/
"defaultTTL": number;
/**
* Determines whether components should be emphasized towards their surrounding by border and shadow. If set to true, border and shadows will be shown around the component. It not set, the component won't be surrounded by border and shadow. (optional)
* @type {boolean}
* @default true
*/
"emphasizeComponent": boolean;
/**
* When renderers is set and no listed renderer matches the value, this flag controls whether to fall back to the full default renderer registry. Default: true (always falls back to try all renderers). Set to false to strictly restrict detection to only the listed renderers. Not forwarded to child subcomponents. (optional)
* @type {boolean}
* @default true
*/
"fallbackToAll": boolean;
/**
* Initial height of the component (e.g. '300px', '50vh'). If not set, defaults to 300px.
* @type {string}
*/
"height"?: string;
/**
* Determines whether subcomponents should generally be shown or not. If set to true, the component won't show any subcomponents. If not set, the component will show subcomponents if the current level of subcomponents is not the total level of subcomponents or greater. (optional)
* @type {boolean}
*/
"hideSubcomponents": boolean;
/**
* The number of items to show in the table per page. Defaults to 10. (optional)
* @type {number}
* @default 10
*/
"itemsPerPage": number;
/**
* The total number of levels of subcomponents to show. Defaults to 1. (optional)
* @type {number}
* @default 1
*/
"levelOfSubcomponents": number;
/**
* Determines whether the component is open or not by default. (optional)
* @type {boolean}
*/
"openByDefault": boolean;
/**
* An ordered list of renderer keys to try first (JSON string array). These renderers are tried in the specified order as a non-binding preselection. If none match, the component falls back to the full default renderer registry (unless fallbackToAll is explicitly set to false). Not forwarded to child subcomponents — their types are independent. (optional) Example: '["DOIType", "ORCIDType", "HandleType"]'
* @type {string}
*/
"renderers"?: string;
/**
* A stringified JSON object containing settings for this component. The resulting object is passed to every subcomponent, so that every component has the same settings. Values and the according type are defined by the components themselves. (optional) Schema: ```typescript { type: string, values: { name: string, value: any }[] }[] ```
* @type {string}
* @default '[]'
*/
"settings": string;
/**
* Determines whether on the top level the copy button is shown. If set to true, the copy button is shown also on the top level. It not set, the copy button is only shown for sub-components. (optional)
* @type {boolean}
* @default true
*/
"showTopLevelCopy": boolean;
/**
* The value to parse, evaluate and render.
* @type {string}
*/
"value": string;
/**
* Initial width of the component (e.g. '500px', '50%'). If not set, defaults to 500px on large screens, 400px on medium screens, and 300px on small screens.
* @type {string}
*/
"width"?: string;
}
interface PidDataTable {
/**
* Current level of subcomponents
* @default 0
*/
"currentLevelOfSubcomponents": number;
/**
* Current page (0-based index)
* @default 0
*/
"currentPage": number;
/**
* The dark mode setting for the component Options: "light", "dark", "system" Default: "system"
* @default 'system'
*/
"darkMode": 'light' | 'dark' | 'system';
/**
* Whether to hide subcomponents
* @default false
*/
"hideSubcomponents": boolean;
/**
* Array of items to display in the table
* @default []
*/
"items": FoldableItem[];
/**
* Number of items to show per page
* @default 10
*/
"itemsPerPage": number;
/**
* Total level of subcomponents
* @default 1
*/
"levelOfSubcomponents": number;
/**
* Whether to load subcomponents
* @default false
*/
"loadSubcomponents": boolean;
/**
* Available page sizes
* @default [5, 10, 25, 50, 100]
*/
"pageSizes": number[];
/**
* Settings to pass to subcomponents
* @default '[]'
*/
"settings": string;
}
interface PidPagination {
/**
* Current page (0-based index)
* @default 0
*/
"currentPage": number;
/**
* The dark mode setting for the component Options: "light", "dark", "system" Default: "system"
* @default 'system'
*/
"darkMode": 'light' | 'dark' | 'system';
/**
* Number of items per page
* @default 10
*/
"itemsPerPage": number;
/**
* Available page sizes
* @default [5, 10, 25, 50, 100]
*/
"pageSizes": number[];
/**
* Whether to show the items per page control
* @default true
*/
"showItemsPerPageControl": boolean;
/**
* Total number of items
* @default 0
*/
"totalItems": number;
}
interface PidTooltip {
/**
* Dark mode setting for the tooltip. When provided, this takes precedence over DOM-based dark mode detection.
* @default 'light'
*/
"darkMode": 'light' | 'dark' | 'system';
/**
* Whether the tooltip should fit its content height exactly
* @default true
*/
"fitContent": boolean;
/**
* The maximum height of the tooltip
* @default '150px'
*/
"maxHeight": string;
/**
* The maximum width of the tooltip
* @default '250px'
*/
"maxWidth": string;
/**
* The preferred position of the tooltip (top or bottom)
* @default 'top'
*/
"position": 'top' | 'bottom';
/**
* The text to display in the tooltip
*/
"text": string;
}
}
export interface PidCollapsibleCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLPidCollapsibleElement;
}
export interface PidDataTableCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLPidDataTableElement;
}
export interface PidPaginationCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLPidPaginationElement;
}
export interface PidTooltipCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLPidTooltipElement;
}
declare global {
interface HTMLColorHighlightElement extends Components.ColorHighlight, HTMLStencilElement {
}
var HTMLColorHighlightElement: {
prototype: HTMLColorHighlightElement;
new (): HTMLColorHighlightElement;
};
interface HTMLCopyButtonElement extends Components.CopyButton, HTMLStencilElement {
}
var HTMLCopyButtonElement: {
prototype: HTMLCopyButtonElement;
new (): HTMLCopyButtonElement;
};
interface HTMLJsonViewerElement extends Components.JsonViewer, HTMLStencilElement {
}
var HTMLJsonViewerElement: {
prototype: HTMLJsonViewerElement;
new (): HTMLJsonViewerElement;
};
interface HTMLLocaleVisualizationElement extends Components.LocaleVisualization, HTMLStencilElement {
}
var HTMLLocaleVisualizationElement: {
prototype: HTMLLocaleVisualizationElement;
new (): HTMLLocaleVisualizationElement;
};
interface HTMLPidActionsElement extends Components.PidActions, HTMLStencilElement {
}
var HTMLPidActionsElement: {
prototype: HTMLPidActionsElement;
new (): HTMLPidActionsElement;
};
interface HTMLPidCollapsibleElementEventMap {
"collapsibleToggle": boolean;
"contentHeightChange": { maxHeight: number };
}
/**
* Component for creating collapsible/expandable content sections
* with resize capability and cross-browser compatibility
*/
interface HTMLPidCollapsibleElement extends Components.PidCollapsible, HTMLStencilElement {
addEventListener<K extends keyof HTMLPidCollapsibleElementEventMap>(type: K, listener: (this: HTMLPidCollapsibleElement, ev: PidCollapsibleCustomEvent<HTMLPidCollapsibleElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener<K extends keyof HTMLPidCollapsibleElementEventMap>(type: K, listener: (this: HTMLPidCollapsibleElement, ev: PidCollapsibleCustomEvent<HTMLPidCollapsibleElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLPidCollapsibleElement: {
prototype: HTMLPidCollapsibleElement;
new (): HTMLPidCollapsibleElement;
};
interface HTMLPidComponentElement extends Components.PidComponent, HTMLStencilElement {
}
var HTMLPidComponentElement: {
prototype: HTMLPidComponentElement;
new (): HTMLPidComponentElement;
};
interface HTMLPidDataTableElementEventMap {
"pageChange": number;
"itemsPerPageChange": number;
}
interface HTMLPidDataTableElement extends Components.PidDataTable, HTMLStencilElement {
addEventListener<K extends keyof HTMLPidDataTableElementEventMap>(type: K, listener: (this: HTMLPidDataTableElement, ev: PidDataTableCustomEvent<HTMLPidDataTableElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener<K extends keyof HTMLPidDataTableElementEventMap>(type: K, listener: (this: HTMLPidDataTableElement, ev: PidDataTableCustomEvent<HTMLPidDataTableElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLPidDataTableElement: {
prototype: HTMLPidDataTableElement;
new (): HTMLPidDataTableElement;
};
interface HTMLPidPaginationElementEventMap {
"pageChange": number;
"itemsPerPageChange": number;
}
interface HTMLPidPaginationElement extends Components.PidPagination, HTMLStencilElement {
addEventListener<K extends keyof HTMLPidPaginationElementEventMap>(type: K, listener: (this: HTMLPidPaginationElement, ev: PidPaginationCustomEvent<HTMLPidPaginationElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener<K extends keyof HTMLPidPaginationElementEventMap>(type: K, listener: (this: HTMLPidPaginationElement, ev: PidPaginationCustomEvent<HTMLPidPaginationElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLPidPaginationElement: {
prototype: HTMLPidPaginationElement;
new (): HTMLPidPaginationElement;
};
interface HTMLPidTooltipElementEventMap {
"tooltipExpansionChange": { expand: boolean; requiredHeight: number };
}
interface HTMLPidTooltipElement extends Components.PidTooltip, HTMLStencilElement {
addEventListener<K extends keyof HTMLPidTooltipElementEventMap>(type: K, listener: (this: HTMLPidTooltipElement, ev: PidTooltipCustomEvent<HTMLPidTooltipElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener<K extends keyof HTMLPidTooltipElementEventMap>(type: K, listener: (this: HTMLPidTooltipElement, ev: PidTooltipCustomEvent<HTMLPidTooltipElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLPidTooltipElement: {
prototype: HTMLPidTooltipElement;
new (): HTMLPidTooltipElement;
};
interface HTMLElementTagNameMap {
"color-highlight": HTMLColorHighlightElement;
"copy-button": HTMLCopyButtonElement;
"json-viewer": HTMLJsonViewerElement;
"locale-visualization": HTMLLocaleVisualizationElement;
"pid-actions": HTMLPidActionsElement;
"pid-collapsible": HTMLPidCollapsibleElement;
"pid-component": HTMLPidComponentElement;
"pid-data-table": HTMLPidDataTableElement;
"pid-pagination": HTMLPidPaginationElement;
"pid-tooltip": HTMLPidTooltipElement;
}
}
declare namespace LocalJSX {
type OneOf<K extends string, PropT, AttrT = PropT> = { [P in K]: PropT } & { [P in `attr:${K}` | `prop:${K}`]?: never } | { [P in `attr:${K}`]: AttrT } & { [P in K | `prop:${K}`]?: never } | { [P in `prop:${K}`]: PropT } & { [P in K | `attr:${K}`]?: never };
interface ColorHighlight {
/**
* The text to highlight.
* @type {string}
*/
"text": string;
}
interface CopyButton {
/**
* Dark mode setting for the button. When provided, this takes precedence over DOM-based dark mode detection.
* @type {'light' | 'dark' | 'system'}
* @public
* @default 'light'
*/
"darkMode"?: 'light' | 'dark' | 'system';
/**
* Optional custom label for the button. If not provided, a default label will be used.
* @type {string}
* @public
*/
"label"?: string;
/**
* The value to copy to the clipboard.
* @type {string}
* @public
*/
"value": string;
}
interface JsonViewer {
/**
* The JSON data to display. Can be a JSON string or a JavaScript object.
*/
"data"?: string | object;
/**
* Set to true to open all nodes in tree view initially.
* @default false
*/
"expandAll"?: boolean;
/**
* Maximum height of the viewer in pixels. Set to 0 for no limit.
* @default 500
*/
"maxHeight"?: number;
/**
* Set to true to enable line numbers in code view.
* @default true
*/
"showLineNumbers"?: boolean;
/**
* Theme for syntax highlighting. Options: 'light', 'dark', or 'system'. System will use the user's system preference.
* @default 'system'
*/
"theme"?: 'light' | 'dark' | 'system';
/**
* Initial view mode for the JSON data. Can be 'tree' or 'code'.
* @default 'tree'
*/
"viewMode"?: 'tree' | 'code';
}
interface LocaleVisualization {
/**
* The locale to visualize.
* @type {string}
* @public
*/
"locale": string;
/**
* Whether to show the flag of the region.
* @type {boolean}
* @public
* @default true
*/
"showFlag"?: boolean;
}
interface PidActions {
/**
* Array of actions to display
* @default []
*/
"actions"?: FoldableAction[];
/**
* Optional ID for the actions container for ARIA references
*/
"actionsId"?: string;
/**
* The dark mode setting for the component Options: "light", "dark", "system" Default: "system"
* @default 'system'
*/
"darkMode"?: 'light' | 'dark' | 'system';
}
/**
* Component for creating collapsible/expandable content sections
* with resize capability and cross-browser compatibility
*/
interface PidCollapsible {
/**
* The dark mode setting for the component Options: "light", "dark", "system" Default: "system"
* @default 'system'
*/
"darkMode"?: 'light' | 'dark' | 'system';
/**
* Whether to emphasize the component with border and shadow
* @default false
*/
"emphasize"?: boolean;
/**
* Whether to apply floating/overlay styling when expanded. When true, applies absolute positioning and z-index for overlay behavior.
* @default false
*/
"expanded"?: boolean;
/**
* Initial height when expanded
*/
"initialHeight"?: string;
/**
* Initial width when expanded
*/
"initialWidth"?: string;
/**
* Line height for collapsed state
* @default 24
*/
"lineHeight"?: number;
/**
* Event emitted when the collapsible is toggled
*/
"onCollapsibleToggle"?: (event: PidCollapsibleCustomEvent<boolean>) => void;
/**
* Event emitted when content dimensions need to be recalculated Useful for pagination to ensure proper height
*/
"onContentHeightChange"?: (event: PidCollapsibleCustomEvent<{ maxHeight: number }>) => void;
/**
* Whether the collapsible is open
* @description Controls whether the component is expanded (opened) or collapsed
* @default false
*/
"open"?: boolean;
/**
* Whether the preview should be scrollable (for subcomponents or expanded state).
* @default false
*/
"previewScrollable"?: boolean;
/**
* Whether to show the footer section
* @default false
*/
"showFooter"?: boolean;
}
interface PidComponent {
/**
* The current level of subcomponents. Defaults to 0. (optional)
* @type {number}
* @default 0
*/
"currentLevelOfSubcomponents"?: number;
/**
* The dark mode setting for the component Options: "light", "dark", "system" Default: "light" for better compatibility
* @type {string}
* @default 'light'
*/
"darkMode"?: 'light' | 'dark' | 'system';
/**
* Determines the default time to live (TTL) for entries in the IndexedDB. Defaults to 24 hours. Units are in milliseconds. (optional)
* @type {number}
* @default 24 * 60 * 60 * 1000
*/
"defaultTTL"?: number;
/**
* Determines whether components should be emphasized towards their surrounding by border and shadow. If set to true, border and shadows will be shown around the component. It not set, the component won't be surrounded by border and shadow. (optional)
* @type {boolean}
* @default true
*/
"emphasizeComponent"?: boolean;
/**
* When renderers is set and no listed renderer matches the value, this flag controls whether to fall back to the full default renderer registry. Default: true (always falls back to try all renderers). Set to false to strictly restrict detection to only the listed renderers. Not forwarded to child subcomponents. (optional)
* @type {boolean}
* @default true
*/
"fallbackToAll"?: boolean;
/**
* Initial height of the component (e.g. '300px', '50vh'). If not set, defaults to 300px.
* @type {string}
*/
"height"?: string;
/**
* Determines whether subcomponents should generally be shown or not. If set to true, the component won't show any subcomponents. If not set, the component will show subcomponents if the current level of subcomponents is not the total level of subcomponents or greater. (optional)
* @type {boolean}
*/
"hideSubcomponents"?: boolean;
/**
* The number of items to show in the table per page. Defaults to 10. (optional)
* @type {number}
* @default 10
*/
"itemsPerPage"?: number;
/**
* The total number of levels of subcomponents to show. Defaults to 1. (optional)
* @type {number}
* @default 1
*/
"levelOfSubcomponents"?: number;
/**
* Determines whether the component is open or not by default. (optional)
* @type {boolean}
*/
"openByDefault"?: boolean;
/**
* An ordered list of renderer keys to try first (JSON string array). These renderers are tried in the specified order as a non-binding preselection. If none match, the component falls back to the full default renderer registry (unless fallbackToAll is explicitly set to false). Not forwarded to child subcomponents — their types are independent. (optional) Example: '["DOIType", "ORCIDType", "HandleType"]'
* @type {string}
*/
"renderers"?: string;
/**
* A stringified JSON object containing settings for this component. The resulting object is passed to every subcomponent, so that every component has the same settings. Values and the according type are defined by the components themselves. (optional) Schema: ```typescript { type: string, values: { name: string, value: any }[] }[] ```
* @type {string}
* @default '[]'
*/
"settings"?: string;
/**
* Determines whether on the top level the copy button is shown. If set to true, the copy button is shown also on the top level. It not set, the copy button is only shown for sub-components. (optional)
* @type {boolean}
* @default true
*/
"showTopLevelCopy"?: boolean;
/**
* The value to parse, evaluate and render.
* @type {string}
*/
"value"?: string;
/**
* Initial width of the component (e.g. '500px', '50%'). If not set, defaults to 500px on large screens, 400px on medium screens, and 300px on small screens.
* @type {string}
*/
"width"?: string;
}
interface PidDataTable {
/**
* Current level of subcomponents
* @default 0
*/
"currentLevelOfSubcomponents"?: number;
/**
* Current page (0-based index)
* @default 0
*/
"currentPage"?: number;
/**
* The dark mode setting for the component Options: "light", "dark", "system" Default: "system"
* @default 'system'
*/
"darkMode"?: 'light' | 'dark' | 'system';
/**
* Whether to hide subcomponents
* @default false
*/
"hideSubcomponents"?: boolean;
/**
* Array of items to display in the table
* @default []
*/
"items"?: FoldableItem[];
/**
* Number of items to show per page
* @default 10
*/
"itemsPerPage"?: number;
/**
* Total level of subcomponents
* @default 1
*/
"levelOfSubcomponents"?: number;
/**
* Whether to load subcomponents
* @default false
*/
"loadSubcomponents"?: boolean;
/**
* Event emitted when items per page changes
*/
"onItemsPerPageChange"?: (event: PidDataTableCustomEvent<number>) => void;
/**
* Event emitted when page changes
*/
"onPageChange"?: (event: PidDataTableCustomEvent<number>) => void;
/**
* Available page sizes
* @default [5, 10, 25, 50, 100]
*/
"pageSizes"?: number[];
/**
* Settings to pass to subcomponents
* @default '[]'
*/
"settings"?: string;
}
interface PidPagination {
/**
* Current page (0-based index)
* @default 0
*/
"currentPage"?: number;
/**
* The dark mode setting for the component Options: "light", "dark", "system" Default: "system"
* @default 'system'
*/
"darkMode"?: 'light' | 'dark' | 'system';
/**
* Number of items per page
* @default 10
*/
"itemsPerPage"?: number;
/**
* Event emitted when items per page changes
*/
"onItemsPerPageChange"?: (event: PidPaginationCustomEvent<number>) => void;
/**
* Event emitted when page changes
*/
"onPageChange"?: (event: PidPaginationCustomEvent<number>) => void;
/**
* Available page sizes
* @default [5, 10, 25, 50, 100]
*/
"pageSizes"?: number[];
/**
* Whether to show the items per page control
* @default true
*/
"showItemsPerPageControl"?: boolean;
/**
* Total number of items
* @default 0
*/
"totalItems"?: number;
}
interface PidTooltip {
/**
* Dark mode setting for the tooltip. When provided, this takes precedence over DOM-based dark mode detection.
* @default 'light'
*/
"darkMode"?: 'light' | 'dark' | 'system';
/**
* Whether the tooltip should fit its content height exactly
* @default true
*/
"fitContent"?: boolean;
/**
* The maximum height of the tooltip
* @default '150px'
*/
"maxHeight"?: string;
/**
* The maximum width of the tooltip
* @default '250px'
*/
"maxWidth"?: string;
/**
* Event emitted when tooltip requires row expansion
*/
"onTooltipExpansionChange"?: (event: PidTooltipCustomEvent<{ expand: boolean; requiredHeight: number }>) => void;
/**
* The preferred position of the tooltip (top or bottom)
* @default 'top'
*/
"position"?: 'top' | 'bottom';
/**
* The text to display in the tooltip
*/
"text": string;
}
interface ColorHighlightAttributes {
"text": string;
}
interface CopyButtonAttributes {
"value": string;
"label": string;
"darkMode": 'light' | 'dark' | 'system';
}
interface JsonViewerAttributes {
"data": string | object;
"viewMode": 'tree' | 'code';
"maxHeight": number;
"showLineNumbers": boolean;
"expandAll": boolean;
"theme": 'light' | 'dark' | 'system';
}
interface LocaleVisualizationAttributes {
"locale": string;
"showFlag": boolean;
}
interface PidActionsAttributes {
"actionsId": string;
"darkMode": 'light' | 'dark' | 'system';
}
interface PidCollapsibleAttributes {
"open": boolean;
"emphasize": boolean;
"darkMode": 'light' | 'dark' | 'system';
"initialWidth": string;
"initialHeight": string;
"lineHeight": number;
"showFooter": boolean;
"expanded": boolean;
"previewScrollable": boolean;
}
interface PidComponentAttributes {
"value": string;
"settings": string;
"openByDefault": boolean;
"itemsPerPage": number;
"levelOfSubcomponents": number;
"currentLevelOfSubcomponents": number;
"hideSubcomponents": boolean;
"emphasizeComponent": boolean;
"showTopLevelCopy": boolean;
"defaultTTL": number;
"width": string;
"height": string;
"darkMode": 'light' | 'dark' | 'system';
"renderers": string;
"fallbackToAll": boolean;
}
interface PidDataTableAttributes {
"itemsPerPage": number;
"currentPage": number;
"loadSubcomponents": boolean;
"hideSubcomponents": boolean;
"currentLevelOfSubcomponents": number;
"levelOfSubcomponents": number;
"settings": string;
"darkMode": 'light' | 'dark' | 'system';
}
interface PidPaginationAttributes {
"currentPage": number;
"totalItems": number;
"itemsPerPage": number;
"showItemsPerPageControl": boolean;
"darkMode": 'light' | 'dark' | 'system';
}
interface PidTooltipAttributes {
"text": string;
"position": 'top' | 'bottom';
"maxWidth": string;
"maxHeight": string;
"fitContent": boolean;
"darkMode": 'light' | 'dark' | 'system';
}
interface IntrinsicElements {
"color-highlight": Omit<ColorHighlight, keyof ColorHighlightAttributes> & { [K in keyof ColorHighlight & keyof ColorHighlightAttributes]?: ColorHighlight[K] } & { [K in keyof ColorHighlight & keyof ColorHighlightAttributes as `attr:${K}`]?: ColorHighlightAttributes[K] } & { [K in keyof ColorHighlight & keyof ColorHighlightAttributes as `prop:${K}`]?: ColorHighlight[K] } & OneOf<"text", ColorHighlight["text"], ColorHighlightAttributes["text"]>;
"copy-button": Omit<CopyButton, keyof CopyButtonAttributes> & { [K in keyof CopyButton & keyof CopyButtonAttributes]?: CopyButton[K] } & { [K in keyof CopyButton & keyof CopyButtonAttributes as `attr:${K}`]?: CopyButtonAttributes[K] } & { [K in keyof CopyButton & keyof CopyButtonAttributes as `prop:${K}`]?: CopyButton[K] } & OneOf<"value", CopyButton["value"], CopyButtonAttributes["value"]>;
"json-viewer": Omit<JsonViewer, keyof JsonViewerAttributes> & { [K in keyof JsonViewer & keyof JsonViewerAttributes]?: JsonViewer[K] } & { [K in keyof JsonViewer & keyof JsonViewerAttributes as `attr:${K}`]?: JsonViewerAttributes[K] } & { [K in keyof JsonViewer & keyof JsonViewerAttributes as `prop:${K}`]?: JsonViewer[K] };
"locale-visualization": Omit<LocaleVisualization, keyof LocaleVisualizationAttributes> & { [K in keyof LocaleVisualization & keyof LocaleVisualizationAttributes]?: LocaleVisualization[K] } & { [K in keyof LocaleVisualization & keyof LocaleVisualizationAttributes as `attr:${K}`]?: LocaleVisualizationAttributes[K] } & { [K in keyof LocaleVisualization & keyof LocaleVisualizationAttributes as `prop:${K}`]?: LocaleVisualization[K] } & OneOf<"locale", LocaleVisualization["locale"], LocaleVisualizationAttributes["locale"]>;
"pid-actions": Omit<PidActions, keyof PidActionsAttributes> & { [K in keyof PidActions & keyof PidActionsAttributes]?: PidActions[K] } & { [K in keyof PidActions & keyof PidActionsAttributes as `attr:${K}`]?: PidActionsAttributes[K] } & { [K in keyof PidActions & keyof PidActionsAttributes as `prop:${K}`]?: PidActions[K] };
"pid-collapsible": Omit<PidCollapsible, keyof PidCollapsibleAttributes> & { [K in keyof PidCollapsible & keyof PidCollapsibleAttributes]?: PidCollapsible[K] } & { [K in keyof PidCollapsible & keyof PidCollapsibleAttributes as `attr:${K}`]?: PidCollapsibleAttributes[K] } & { [K in keyof PidCollapsible & keyof PidCollapsibleAttributes as `prop:${K}`]?: PidCollapsible[K] };
"pid-component": Omit<PidComponent, keyof PidComponentAttributes> & { [K in keyof PidComponent & keyof PidComponentAttributes]?: PidComponent[K] } & { [K in keyof PidComponent & keyof PidComponentAttributes as `attr:${K}`]?: PidComponentAttributes[K] } & { [K in keyof PidComponent & keyof PidComponentAttributes as `prop:${K}`]?: PidComponent[K] };
"pid-data-table": Omit<PidDataTable, keyof PidDataTableAttributes> & { [K in keyof PidDataTable & keyof PidDataTableAttributes]?: PidDataTable[K] } & { [K in keyof PidDataTable & keyof PidDataTableAttributes as `attr:${K}`]?: PidDataTableAttributes[K] } & { [K in keyof PidDataTable & keyof PidDataTableAttributes as `prop:${K}`]?: PidDataTable[K] };
"pid-pagination": Omit<PidPagination, keyof PidPaginationAttributes> & { [K in keyof PidPagination & keyof PidPaginationAttributes]?: PidPagination[K] } & { [K in keyof PidPagination & keyof PidPaginationAttributes as `attr:${K}`]?: PidPaginationAttributes[K] } & { [K in keyof PidPagination & keyof PidPaginationAttributes as `prop:${K}`]?: PidPagination[K] };
"pid-tooltip": Omit<PidTooltip, keyof PidTooltipAttributes> & { [K in keyof PidTooltip & keyof PidTooltipAttributes]?: PidTooltip[K] } & { [K in keyof PidTooltip & keyof PidTooltipAttributes as `attr:${K}`]?: PidTooltipAttributes[K] } & { [K in keyof PidTooltip & keyof PidTooltipAttributes as `prop:${K}`]?: PidTooltip[K] } & OneOf<"text", PidTooltip["text"], PidTooltipAttributes["text"]>;
}
}
export { LocalJSX as JSX };
declare module "@stencil/core" {
export namespace JSX {
interface IntrinsicElements {
"color-highlight": LocalJSX.IntrinsicElements["color-highlight"] & JSXBase.HTMLAttributes<HTMLColorHighlightElement>;
"copy-button": LocalJSX.IntrinsicElements["copy-button"] & JSXBase.HTMLAttributes<HTMLCopyButtonElement>;
"json-viewer": LocalJSX.IntrinsicElements["json-viewer"] & JSXBase.HTMLAttributes<HTMLJsonViewerElement>;
"locale-visualization": LocalJSX.IntrinsicElements["locale-visualization"] & JSXBase.HTMLAttributes<HTMLLocaleVisualizationElement>;
"pid-actions": LocalJSX.IntrinsicElements["pid-actions"] & JSXBase.HTMLAttributes<HTMLPidActionsElement>;
/**
* Component for creating collapsible/expandable content sections
* with resize capability and cross-browser compatibility
*/
"pid-collapsible": LocalJSX.IntrinsicElements["pid-collapsible"] & JSXBase.HTMLAttributes<HTMLPidCollapsibleElement>;
"pid-component": LocalJSX.IntrinsicElements["pid-component"] & JSXBase.HTMLAttributes<HTMLPidComponentElement>;
"pid-data-table": LocalJSX.IntrinsicElements["pid-data-table"] & JSXBase.HTMLAttributes<HTMLPidDataTableElement>;
"pid-pagination": LocalJSX.IntrinsicElements["pid-pagination"] & JSXBase.HTMLAttributes<HTMLPidPaginationElement>;
"pid-tooltip": LocalJSX.IntrinsicElements["pid-tooltip"] & JSXBase.HTMLAttributes<HTMLPidTooltipElement>;
}
}
}