dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
89 lines (88 loc) • 5.12 kB
TypeScript
import { PropertyValueMap } from 'lit';
import { DdsElement } from '../../internal/dds-hu-element';
type Heading = {
level: number;
id: any;
text: any;
};
declare const DapDSTOC_base: typeof DdsElement & {
new (...args: any[]): import('../../internal/mixin/sizedMixin').SizedElementInterface;
prototype: import('../../internal/mixin/sizedMixin').SizedElementInterface;
};
/**
* `dap-ds-toc`
* @summary A table of contents (TOC) is a list of links that allows users to quickly navigate to sections within a document.
* @element dap-ds-toc
* @title - toc
*
* @property { 'xs' | 'sm' | 'md' | 'lg' } size - The size of the TOC. Default is `lg.
* @property {string} sizeMap - Responsive size map (e.g. "md:lg").
*
* @event {{ selectedItem: HTMLAnchorElement, anchorElement: IntersectionObserverEntry | HTMLElement }} dds-anchor-change - Event that is triggered when the anchor changes.
*
* @csspart base - The main container of the toc.
*
* @cssproperty --dds-toc-border-width - Width of the TOC border. (default: var(--dds-border-width-base))
* @cssproperty --dds-toc-border-color - Color of the TOC border. (default: var(--dds-border-neutral-divider))
* @cssproperty --dds-toc-title-color - Color of the TOC title. (default: var(--dds-text-neutral-strong))
* @cssproperty --dds-toc-title-font-size - Font size of the TOC title. (default: var(--dds-font-base))
* @cssproperty --dds-toc-title-font-weight - Font weight of the TOC title. (default: var(--dds-font-weight-bold))
* @cssproperty --dds-toc-title-line-height - Line height of the TOC title. (default: 1.25)
* @cssproperty --dds-toc-link-color - Color of the TOC links. (default: var(--dds-button-subtle-text-neutral-enabled))
* @cssproperty --dds-toc-link-active-color - Color of the active TOC link. (default: var(--dds-button-subtle-text-enabled))
* @cssproperty --dds-toc-link-border-color - Border color of the active TOC link. (default: var(--dds-border-brand-base))
* @cssproperty --dds-toc-link-line-height - Line height of the TOC links. (default: 1.2)
* @cssproperty --dds-toc-link-padding - Padding of the TOC links. (default: var(--dds-spacing-200))
* @cssproperty --dds-toc-indent-level-0 - Indent level of the TOC items. (default: var(--dds-spacing-400))
* @cssproperty --dds-toc-indent-level-1 - Indent level of the TOC items. (default: var(--dds-spacing-800))
* @cssproperty --dds-toc-indent-level-2 - Indent level of the TOC items. (default: var(--dds-spacing-1200))
* @cssproperty --dds-toc-indent-level-3 - Indent level of the TOC items. (default: var(--dds-spacing-1600))
* @cssproperty --dds-toc-indent-level-4 - Indent level of the TOC items. (default: var(--dds-spacing-2000))
* @cssproperty --dds-toc-indent-level-5 - Indent level of the TOC items. (default: var(--dds-spacing-2400))
*/
export default class DapDSTOC extends DapDSTOC_base {
static tagName: string;
/** The root element to observe [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#root) */
root: string;
/** The margin around the root element to observe [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) */
rootMargin: string;
/** The margin around the last anchor to observe [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) */
lastAnchorRootMargin: string;
/** The threshold to trigger [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold) */
threshold: number[];
/** The minimum heading level to include in the TOC. The default value is `2`. */
minHeadingLevel: number;
/** The maximum heading level to include in the TOC. The default value is `3`. */
maxHeadingLevel: number;
/** Whether to indent the TOC items. */
noIndent: boolean;
/** The header of the TOC. */
header: string;
private _observer;
private _lastAnchorObserver;
private _anchors;
private _activeAnchor;
private _selectors;
private _items;
private _intersectionData;
private _debounceTimer;
static readonly styles: import('lit').CSSResult;
constructor();
get activeAnchor(): HTMLAnchorElement;
get anchors(): HTMLElement[];
get items(): Heading[];
connectedCallback(): void;
protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): Promise<void>;
attributeChangedCallback(name: string, oldValue: any, newValue: any): Promise<void>;
updated(changedProperties: Map<PropertyKey, unknown>): Promise<void>;
disconnectedCallback(): void;
private readonly onScroll;
renderTree(): Promise<void>;
getAnchors(minHeadingLevel: number, maxHeadingLevel: number): HTMLElement[];
setActiveAnchor(element: HTMLAnchorElement, entry: IntersectionObserverEntry | HTMLElement): void;
private readonly getHeaders;
buildTree(headers: any[]): string;
private readonly _handleIntersect;
private readonly _updateActiveAnchor;
}
export {};