@fluid-topics/ft-reader-toc 2.2.5 → 2.2.6

package/build/definitions.d.ts

@@ -1,5 +1,7 @@
 import { FtReaderToc } from "./ft-reader-toc";
+import { FtReaderAccessibleToc } from "./ft-reader-accessible-toc";
 declare const _default: {
     "ft-reader-toc": typeof FtReaderToc;
+    "ft-reader-accessible-toc": typeof FtReaderAccessibleToc;
 };
 export default _default;

package/build/definitions.js

@@ -1,4 +1,6 @@
 import { FtReaderToc } from "./ft-reader-toc";
+import { FtReaderAccessibleToc } from "./ft-reader-accessible-toc";
 export default {
     "ft-reader-toc": FtReaderToc,
+    "ft-reader-accessible-toc": FtReaderAccessibleToc,
 };

package/build/ft-reader-accessible-toc.d.ts

@@ -0,0 +1,19 @@
+import { PropertyValues, TemplateResult } from "lit";
+import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
+import { TocNode } from "./ft-reader-toc.properties";
+import { FtReaderBaseToc } from "./ft-reader-base-toc";
+export declare class FtReaderAccessibleToc extends FtReaderBaseToc {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    private currentTocNode?;
+    protected willUpdate(props: PropertyValues<FtReaderBaseToc>): void;
+    private allTocIds;
+    protected render(): TemplateResult<1>;
+    protected renderNode(node: TocNode): TemplateResult;
+    private renderLinkIcon;
+    private renderNodeTag;
+    private onLinkClick;
+    private onKeyDown;
+    private get allLinks();
+    private selectNextNode;
+}

package/build/ft-reader-accessible-toc.js

@@ -0,0 +1,219 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, nothing, } from "lit";
+import { map } from "lit/directives/map.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { FtTypography, FtTypographyVariants, } from "@fluid-topics/ft-typography";
+import { FtReaderTocCssVariables } from "./ft-reader-toc.styles";
+import { FtSkeleton } from "@fluid-topics/ft-skeleton";
+import { FtRipple } from "@fluid-topics/ft-ripple";
+import { accessibleStyles } from "./ft-reader-accessible-toc.styles";
+import { FtReaderBaseToc } from "./ft-reader-base-toc";
+import { classMap } from "lit/directives/class-map.js";
+import { FtChip } from "@fluid-topics/ft-chip";
+import { state } from "lit/decorators.js";
+export class FtReaderAccessibleToc extends FtReaderBaseToc {
+    willUpdate(props) {
+        var _a, _b, _c;
+        super.willUpdate(props);
+        if (props.has("toc") || props.has("highlightedTocIds")) {
+            const allTocIds = (_b = (_a = this.toc) === null || _a === void 0 ? void 0 : _a.flatMap((t) => this.allTocIds(t))) !== null && _b !== void 0 ? _b : [];
+            for (const tocId of allTocIds) {
+                if ((_c = this.highlightedTocIds) === null || _c === void 0 ? void 0 : _c.includes(tocId)) {
+                    this.currentTocNode = tocId;
+                    break;
+                }
+            }
+        }
+    }
+    allTocIds(toc) {
+        return [toc.tocId, ...(toc.children.flatMap((t) => this.allTocIds(t)))];
+    }
+    render() {
+        var _a, _b;
+        return html `
+            <div class="${classMap(this.tocClasses)}" part="container">
+                <ft-size-watcher @change=${this.onViewportSizeChange}></ft-size-watcher>
+                ${this.renderExpandCollapseAll()}
+                <div part="tree" role="tree" aria-label="${(_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.title}">
+                    ${map((_b = this.toc) !== null && _b !== void 0 ? _b : [], (node) => this.renderNode(node))}
+                </div>
+            </div>
+        `;
+    }
+    renderNode(node) {
+        var _a, _b, _c, _d;
+        const isHighlighted = (_a = this.highlightedTocIds) === null || _a === void 0 ? void 0 : _a.includes(node.tocId);
+        const isCurrent = node.tocId === this.currentTocNode;
+        const isExpanded = this.nodeIsExpanded(node);
+        const canDisplayChildren = node.children.length > 0;
+        const currentPageDepth = this.isCurrentPageToc ? ((_c = (_b = this.currentPage) === null || _b === void 0 ? void 0 : _b.breadcrumb.length) !== null && _c !== void 0 ? _c : 0) + 1 : 0;
+        const tabNumber = node.depth - 1 - currentPageDepth;
+        const styles = {
+            "padding-left": `calc( ${FtReaderTocCssVariables.tabulationSize} * ${tabNumber} + 4px)`, // +4px for padding before button
+        };
+        return html `
+            <div part="node ${isHighlighted ? "node-highlighted" : ""}"
+                 class="ft-reader-toc--node ${isHighlighted ? "ft-reader-toc--node-highlighted" : ""}"
+                 data-depth="${node.depth}">
+                ${this.translationLoading
+            ? html `
+                        <ft-skeleton></ft-skeleton>`
+            : html `
+                        <a part="node-link ${node.contentClass ? `node-link-class-${node.contentClass}` : ""}"
+                           class="ft-reader-toc--node-link"
+                           style="${styleMap(styles)}"
+                           href="${(_d = this.service) === null || _d === void 0 ? void 0 : _d.getLink(node.tocId)}"
+                           tabindex="${isCurrent ? "0" : "-1"}"
+                           data-tocId="${node.tocId}"
+                           data-depth="${node.depth}"
+                           role="treeitem"
+                           aria-owns="${ifDefined(canDisplayChildren ? `${node.tocId}-children` : undefined)}"
+                           aria-expanded="${ifDefined(canDisplayChildren ? isExpanded : undefined)}"
+                           aria-current="${ifDefined(isHighlighted ? "page" : undefined)}"
+                           @click=${(e) => this.onLinkClick(e, node.tocId)}
+                           @keydown=${this.onKeyDown}>
+                            ${this.renderLinkIcon(node)}
+                            ${this.renderNodeTag(node)}
+                            <ft-typography part="node-label" variant="${FtTypographyVariants.body2}">${node.title}</ft-typography>
+                        </a>
+                    `}
+                ${canDisplayChildren ? html `
+                        <div id="${node.tocId}-children"
+                             part="node-children"
+                             class="ft-reader-toc--node-children"
+                             role="group"
+                             ?hidden=${!isExpanded}>
+                            ${map(isExpanded ? node.children : [], (child) => this.renderNode(child))}
+                        </div>
+                    ` : nothing}
+            </div>
+        `;
+    }
+    renderLinkIcon(node) {
+        const canDisplayChildren = node.children.length > 0;
+        const isExpanded = this.nodeIsExpanded(node);
+        if (this.nodesToExpandExist && !this.expanded) {
+            if (canDisplayChildren) {
+                return html `
+                    <div part="node-icon-container">
+                        <ft-icon part="node-icon"
+                                 class="ft-reader-toc--node-icon"
+                                 data-expand-node="${node.tocId}"
+                                 .value=${isExpanded ? (this.collapseIcon || "MINUS") : (this.expandIcon || "PLUS")}
+                                 variant="${this.iconVariant}"
+                                 @click=${(e) => this.manuallyToggle(node.tocId, isExpanded, e)}
+                                 aria-hidden="true">
+                        </ft-icon>
+                        <ft-ripple>
+
+                        </ft-ripple>
+                    </div>
+                `;
+            }
+            else {
+                return this.getLeafNodeIcon();
+            }
+        }
+        else {
+            return !canDisplayChildren ? this.getLeafNodeIcon() : nothing;
+        }
+    }
+    renderNodeTag(node) {
+        if (!node.contentTag) {
+            return nothing;
+        }
+        const parts = ["node-tag", `node-tag-${node.contentTag}`];
+        if (node.contentClass) {
+            parts.push(`node-tag-class-${node.contentClass}`);
+        }
+        return html `
+            <ft-chip dense
+                     part="${parts.join(" ")}">
+                ${node.contentTag}
+            </ft-chip>
+        `;
+    }
+    onLinkClick(e, tocId) {
+        var _a, _b, _c;
+        if (!e.ctrlKey && !e.metaKey) {
+            e.preventDefault();
+            performance.mark(`fluid_topics__reader_link_click__${tocId}`);
+            (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.navigateToTopic(tocId);
+            (_b = this.stateManager) === null || _b === void 0 ? void 0 : _b.store.commands.clear(/^focus-topic-/);
+            (_c = this.stateManager) === null || _c === void 0 ? void 0 : _c.store.commands.add({ type: `focus-topic-${tocId}` });
+        }
+    }
+    onKeyDown(e) {
+        var _a, _b, _c, _d, _e;
+        const target = e.currentTarget;
+        switch (e.key) {
+            case "Home":
+                (_a = this.allLinks.shift()) === null || _a === void 0 ? void 0 : _a.focus();
+                break;
+            case "End":
+                (_b = this.allLinks.pop()) === null || _b === void 0 ? void 0 : _b.focus();
+                break;
+            case "ArrowDown":
+                this.selectNextNode(target, this.allLinks);
+                e.preventDefault();
+                break;
+            case "ArrowUp":
+                this.selectNextNode(target, this.allLinks.reverse());
+                e.preventDefault();
+                break;
+            case "ArrowRight":
+                if (target.ariaExpanded === "true") {
+                    this.selectNextNode(target, this.allLinks);
+                }
+                else if (target.ariaExpanded === "false") {
+                    this.manuallyToggle(target.getAttribute("data-tocId"), false);
+                }
+                e.preventDefault();
+                break;
+            case "ArrowLeft":
+                if (target.ariaExpanded === "true") {
+                    this.manuallyToggle(target.getAttribute("data-tocId"), true);
+                }
+                else {
+                    // node-link -> node -> node-children -> node (parent) -> link
+                    const parentNode = (_e = (_d = (_c = target.parentElement) === null || _c === void 0 ? void 0 : _c.parentElement) === null || _d === void 0 ? void 0 : _d.parentElement) === null || _e === void 0 ? void 0 : _e.querySelector("[part=\"node-link\"]");
+                    parentNode === null || parentNode === void 0 ? void 0 : parentNode.focus();
+                }
+                e.preventDefault();
+                break;
+        }
+    }
+    get allLinks() {
+        var _a, _b;
+        return Array.from((_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[part~=\"node-link\"]")) !== null && _b !== void 0 ? _b : []);
+    }
+    selectNextNode(target, nodes) {
+        let useNextNode = false;
+        for (const node of nodes) {
+            if (useNextNode) {
+                node.focus();
+                return;
+            }
+            if (node.getAttribute("data-tocId") === target.getAttribute("data-tocId")) {
+                useNextNode = true;
+            }
+        }
+    }
+}
+FtReaderAccessibleToc.elementDefinitions = {
+    ...FtReaderBaseToc.elementDefinitions,
+    "ft-typography": FtTypography,
+    "ft-skeleton": FtSkeleton,
+    "ft-ripple": FtRipple,
+    "ft-chip": FtChip,
+};
+FtReaderAccessibleToc.styles = accessibleStyles;
+__decorate([
+    state()
+], FtReaderAccessibleToc.prototype, "currentTocNode", void 0);

package/build/ft-reader-accessible-toc.styles.d.ts

@@ -0,0 +1 @@
+export declare const accessibleStyles: import("lit").CSSResult;

package/build/ft-reader-accessible-toc.styles.js

@@ -0,0 +1,75 @@
+import { css } from "lit";
+import { setVariable } from "@fluid-topics/ft-wc-utils";
+import { FtTypographyCssVariables } from "@fluid-topics/ft-typography/build/ft-typography.styles";
+import { FtButtonCssVariables } from "@fluid-topics/ft-button/build/ft-button.styles";
+import { FtReaderInternalLinkCssVariables } from "@fluid-topics/ft-reader-internal-link";
+import { FtIconCssVariables } from "@fluid-topics/ft-icon";
+import { FtReaderTocCssVariables } from "./ft-reader-toc.styles";
+// language=CSS
+export const accessibleStyles = css `
+    .ft-reader-toc {
+        color: ${FtReaderTocCssVariables.textColor};
+    }
+
+    [part~="node-highlighted"] > [part~="node-link"] {
+        background-color: ${FtReaderTocCssVariables.highlightedBackgroundColor};
+        color: ${FtReaderTocCssVariables.highlightedTextColor};
+        ${setVariable(FtTypographyCssVariables.fontWeight, FtReaderTocCssVariables.highlightedFontWeight)}
+    }
+
+    [part~="node-link"] {
+        display: flex;
+        gap: 4px;
+        padding: ${FtReaderTocCssVariables.verticalSpacing} 4px; /* left padding is override on inline style */
+        align-items: center;
+        text-decoration: none;
+        color: inherit;
+
+        &:hover {
+            color: ${FtReaderTocCssVariables.hoverColor};
+        }
+
+        &:focus {
+            outline-color: ${FtReaderInternalLinkCssVariables.outlineColor};
+        }
+    }
+
+    [part~="node-icon-container"] {
+        position: relative;
+        display: flex;
+        border-radius: 100%;
+        overflow: hidden;
+        color: ${FtReaderTocCssVariables.treeNodeIconColor};
+    }
+
+    [part~="node-icon"] {
+        ${setVariable(FtIconCssVariables.size, FtReaderTocCssVariables.iconFontSize)};
+    }
+
+    [part~="leaf-node-icon"] {
+        color: ${FtReaderTocCssVariables.leafNodeIconColor};
+        width: ${FtReaderTocCssVariables.iconFontSize};
+    }
+
+    .ft-reader-toc--expand-collapse-all-button {
+        ${setVariable(FtButtonCssVariables.color, FtReaderTocCssVariables.expandCollapseAllButtonColor)};
+        ${setVariable(FtButtonCssVariables.backgroundColor, FtReaderTocCssVariables.expandCollapseAllButtonBackgroundColor)};
+    }
+
+    .ft-reader-toc-expand-collapse-all-container {
+        margin: 8px 4px;
+        display: flex;
+    }
+
+    .ft-reader-toc-expand-collapse-all-right {
+        justify-content: flex-end;
+    }
+
+    .ft-reader-toc-expand-collapse-all-center {
+        justify-content: center;
+    }
+
+    .ft-reader-toc-expand-collapse-all-justify ft-button {
+        flex-grow: 1;
+    }
+`;

package/build/ft-reader-base-toc.d.ts

@@ -0,0 +1,61 @@
+import { nothing, PropertyValues, TemplateResult } from "lit";
+import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
+import { FtReaderComponent, FtReaderPage, FtReaderTocNode } from "@fluid-topics/ft-reader-context/build/registration";
+import { FtIconVariants } from "@fluid-topics/ft-icon";
+import { FtSizeCategory, FtSizeChangeEvent } from "@fluid-topics/ft-size-watcher";
+import { FtReaderTocProperties } from "./ft-reader-toc.properties";
+import { FtPagesTocNode } from "@fluid-topics/ft-reader-context/build/store/model";
+type TocNode = FtReaderTocNode | FtPagesTocNode;
+declare const FtReaderBaseToc_base: typeof FtReaderComponent & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface>;
+export declare abstract class FtReaderBaseToc extends FtReaderBaseToc_base implements FtReaderTocProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    expanded: boolean;
+    iconVariant: FtIconVariants;
+    collapseIcon: string;
+    expandIcon: string;
+    leafNodeIconVariant: FtIconVariants;
+    leafNodeIcon: string;
+    expandCollapseAll: boolean;
+    expandCollapseAllHideLabel: boolean;
+    expandCollapseAllTrailingIcon: boolean;
+    expandCollapseAllAlignment: "left" | "right" | "center" | "justify";
+    expandCollapseAllHideIcon: boolean;
+    expandCollapseAllIconVariant?: FtIconVariants;
+    collapseAllIcon: string;
+    expandAllIcon: string;
+    autoCollapse: boolean;
+    scrollCurrentTopicIntoView: boolean;
+    scope: FtReaderTocProperties["scope"];
+    empty: boolean;
+    toc?: Array<TocNode>;
+    currentPage?: FtReaderPage;
+    highlightedTocIds?: string[];
+    translationLoading?: boolean;
+    automaticallyExpandedNodes: Set<string>;
+    manuallyExpandedNodes: Set<string>;
+    manuallyCollapsedNodes: Set<string>;
+    expandAll: boolean;
+    viewportSize: FtSizeCategory;
+    nodesToExpandExist: boolean;
+    get isCurrentPageToc(): boolean;
+    protected nodeIsExpanded(node: TocNode): boolean;
+    constructor();
+    protected willUpdate(changedProperties: PropertyValues<FtReaderBaseToc>): void;
+    protected contentAvailableCallback(props: PropertyValues<FtReaderBaseToc>): void;
+    protected get tocClasses(): {
+        "ft-reader-toc": boolean;
+        "ft-reader-toc-mobile": boolean;
+        "ft-reader-toc-desktop": boolean;
+        "ft-reader-toc-loaded": boolean;
+        "ft-reader-toc-expanded": boolean;
+    };
+    protected renderExpandCollapseAll(): TemplateResult<1> | typeof nothing;
+    protected abstract renderNode(node: TocNode): TemplateResult;
+    protected buildAutomaticallyExpandedNodes(tocIdsToShow: Array<string>): Set<string>;
+    protected manuallyToggle(tocId: string, isExpanded: boolean, e?: MouseEvent): void;
+    protected onViewportSizeChange(event: FtSizeChangeEvent): void;
+    protected toggleExpandCollapseAll(): void;
+    protected getExpandCollapseAllTooltipPosition(): "left" | "right" | "bottom";
+    protected getLeafNodeIcon(): TemplateResult<1>;
+}
+export {};

package/build/ft-reader-base-toc.js

@@ -0,0 +1,253 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, nothing, } from "lit";
+import { property, state, } from "lit/decorators.js";
+import { hasChanged, redux, scrollHelper, } from "@fluid-topics/ft-wc-utils";
+import { FtReaderComponent, } from "@fluid-topics/ft-reader-context/build/registration";
+import { FtIcon, FtIconVariants, } from "@fluid-topics/ft-icon";
+import { FtButton } from "@fluid-topics/ft-button";
+import { FtSizeCategory, FtSizeWatcher, } from "@fluid-topics/ft-size-watcher";
+import { withI18n } from "@fluid-topics/ft-i18n";
+import { readerToc, readerTocDefaultMessages, } from "./FtReaderTocMessages";
+export class FtReaderBaseToc extends withI18n(FtReaderComponent) {
+    get isCurrentPageToc() {
+        return this.scope === "current-page";
+    }
+    nodeIsExpanded(node) {
+        return this.expanded || this.manuallyExpandedNodes.has(node.tocId) || ((this.expandAll || this.automaticallyExpandedNodes.has(node.tocId)) && !this.manuallyCollapsedNodes.has(node.tocId));
+    }
+    constructor() {
+        super();
+        this.expanded = false;
+        this.iconVariant = FtIconVariants.fluid_topics;
+        this.collapseIcon = "MINUS";
+        this.expandIcon = "PLUS";
+        this.leafNodeIconVariant = FtIconVariants.fluid_topics;
+        this.leafNodeIcon = "DOT";
+        this.expandCollapseAll = false;
+        this.expandCollapseAllHideLabel = false;
+        this.expandCollapseAllTrailingIcon = false;
+        this.expandCollapseAllAlignment = "left";
+        this.expandCollapseAllHideIcon = false;
+        this.collapseAllIcon = "ICON_COLLAPSE";
+        this.expandAllIcon = "ICON_EXPAND";
+        this.autoCollapse = false;
+        this.scrollCurrentTopicIntoView = false;
+        this.scope = "pages";
+        this.empty = true;
+        this.automaticallyExpandedNodes = new Set();
+        this.manuallyExpandedNodes = new Set();
+        this.manuallyCollapsedNodes = new Set();
+        this.expandAll = false;
+        this.viewportSize = FtSizeCategory.M;
+        this.nodesToExpandExist = false;
+        this.addI18nContext(readerToc, readerTocDefaultMessages);
+    }
+    willUpdate(changedProperties) {
+        var _a, _b, _c;
+        super.willUpdate(changedProperties);
+        if (changedProperties.has("toc")) {
+            this.nodesToExpandExist = ((_a = this.toc) !== null && _a !== void 0 ? _a : []).some((n) => n.children.length > 0);
+        }
+        if (changedProperties.has("highlightedTocIds") && !this.expanded) {
+            this.automaticallyExpandedNodes = this.buildAutomaticallyExpandedNodes((_b = this.highlightedTocIds) !== null && _b !== void 0 ? _b : []);
+        }
+        this.empty = ((_c = this.toc) !== null && _c !== void 0 ? _c : []).length === 0;
+    }
+    contentAvailableCallback(props) {
+        var _a, _b;
+        super.contentAvailableCallback(props);
+        if (this.scrollCurrentTopicIntoView && props.has("highlightedTocIds") && this.highlightedTocIds && ((_a = this.highlightedTocIds) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            const target = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(`[tocId="${this.highlightedTocIds[0]}"]`);
+            if (target) {
+                scrollHelper.scrollIntoViewIfPossible(target, { behavior: "instant", position: 0.25 });
+            }
+        }
+    }
+    get tocClasses() {
+        return {
+            "ft-reader-toc": true,
+            "ft-reader-toc-mobile": this.viewportSize === FtSizeCategory.S,
+            "ft-reader-toc-desktop": this.viewportSize !== FtSizeCategory.S,
+            "ft-reader-toc-loaded": this.currentPage != null,
+            "ft-reader-toc-expanded": this.expanded,
+        };
+    }
+    renderExpandCollapseAll() {
+        return this.expandCollapseAll && !this.expanded && this.nodesToExpandExist ? html `
+            <div part="expand-collapse-all-container"
+                 class="ft-reader-toc-expand-collapse-all-container ft-reader-toc-expand-collapse-all-${this.expandCollapseAllAlignment}">
+                <ft-button part="expand-collapse-all"
+                           class="ft-reader-toc--expand-collapse-all-button"
+                           iconVariant="${this.expandCollapseAllIconVariant}"
+                           icon="${this.expandCollapseAllHideIcon ? "" : (this.expandAll
+            ? (this.collapseAllIcon || "ICON_COLLAPSE")
+            : (this.expandAllIcon || "ICON_EXPAND"))}"
+                           label="${this.expandAll ? readerToc.messages.collapseAllLong() : readerToc.messages.expandAllLong()}"
+                           tooltipPosition="${this.getExpandCollapseAllTooltipPosition()}"
+                           ?trailingIcon=${this.expandCollapseAllTrailingIcon}
+                           @click=${() => this.toggleExpandCollapseAll()}>
+                    ${this.expandCollapseAllHideLabel ? "" : this.expandAll ? readerToc.messages.collapseAll() : readerToc.messages.expandAll()}
+                </ft-button>
+            </div>
+        ` : nothing;
+    }
+    buildAutomaticallyExpandedNodes(tocIdsToShow) {
+        var _a, _b;
+        const topicsToExpand = new Set(this.autoCollapse ? [] : this.automaticallyExpandedNodes);
+        for (const tocIdToShow of tocIdsToShow) {
+            let tocIdToExpand = tocIdToShow;
+            while (tocIdToExpand && !topicsToExpand.has(tocIdToExpand)) {
+                topicsToExpand.add(tocIdToExpand);
+                this.manuallyCollapsedNodes.delete(tocIdToExpand);
+                tocIdToExpand = (_b = (_a = this.service) === null || _a === void 0 ? void 0 : _a.getTocNodeNow(tocIdToExpand)) === null || _b === void 0 ? void 0 : _b.parentTocId;
+            }
+        }
+        return topicsToExpand;
+    }
+    manuallyToggle(tocId, isExpanded, e) {
+        e === null || e === void 0 ? void 0 : e.stopPropagation();
+        e === null || e === void 0 ? void 0 : e.preventDefault();
+        if (isExpanded) {
+            this.manuallyCollapsedNodes.add(tocId);
+            this.manuallyExpandedNodes.delete(tocId);
+        }
+        else {
+            this.manuallyExpandedNodes.add(tocId);
+            this.manuallyCollapsedNodes.delete(tocId);
+        }
+        this.requestUpdate();
+    }
+    onViewportSizeChange(event) {
+        this.viewportSize = event.detail.category;
+    }
+    toggleExpandCollapseAll() {
+        this.expandAll = !this.expandAll;
+        this.automaticallyExpandedNodes = new Set();
+        this.manuallyExpandedNodes = new Set();
+        this.manuallyCollapsedNodes = new Set();
+    }
+    getExpandCollapseAllTooltipPosition() {
+        switch (this.expandCollapseAllAlignment) {
+            case "right":
+                return "left";
+            case "left":
+                return "right";
+            default:
+                return "bottom";
+        }
+    }
+    getLeafNodeIcon() {
+        return html `
+            <ft-icon class="ft-reader-toc--leaf-node-icon"
+                     part="leaf-node-icon"
+                     .variant=${this.leafNodeIconVariant}
+                     .value=${this.leafNodeIcon}></ft-icon>
+        `;
+    }
+}
+FtReaderBaseToc.elementDefinitions = {
+    "ft-button": FtButton,
+    "ft-icon": FtIcon,
+    "ft-size-watcher": FtSizeWatcher,
+};
+__decorate([
+    property({ type: Boolean })
+], FtReaderBaseToc.prototype, "expanded", void 0);
+__decorate([
+    property()
+], FtReaderBaseToc.prototype, "iconVariant", void 0);
+__decorate([
+    property()
+], FtReaderBaseToc.prototype, "collapseIcon", void 0);
+__decorate([
+    property()
+], FtReaderBaseToc.prototype, "expandIcon", void 0);
+__decorate([
+    property()
+], FtReaderBaseToc.prototype, "leafNodeIconVariant", void 0);
+__decorate([
+    property()
+], FtReaderBaseToc.prototype, "leafNodeIcon", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtReaderBaseToc.prototype, "expandCollapseAll", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtReaderBaseToc.prototype, "expandCollapseAllHideLabel", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtReaderBaseToc.prototype, "expandCollapseAllTrailingIcon", void 0);
+__decorate([
+    property()
+], FtReaderBaseToc.prototype, "expandCollapseAllAlignment", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtReaderBaseToc.prototype, "expandCollapseAllHideIcon", void 0);
+__decorate([
+    property()
+], FtReaderBaseToc.prototype, "expandCollapseAllIconVariant", void 0);
+__decorate([
+    property()
+], FtReaderBaseToc.prototype, "collapseAllIcon", void 0);
+__decorate([
+    property()
+], FtReaderBaseToc.prototype, "expandAllIcon", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtReaderBaseToc.prototype, "autoCollapse", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtReaderBaseToc.prototype, "scrollCurrentTopicIntoView", void 0);
+__decorate([
+    property()
+], FtReaderBaseToc.prototype, "scope", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FtReaderBaseToc.prototype, "empty", void 0);
+__decorate([
+    redux({
+        selector: (s, self) => {
+            var _a, _b, _c;
+            if (self.isCurrentPageToc) {
+                return ((_a = s.paginationConfiguration) === null || _a === void 0 ? void 0 : _a.splitCurrentPageToc) ? (_b = s.currentPage) === null || _b === void 0 ? void 0 : _b.toc : undefined;
+            }
+            return ((_c = s.paginationConfiguration) === null || _c === void 0 ? void 0 : _c.splitCurrentPageToc) ? s.pagesToc : s.toc;
+        },
+    })
+], FtReaderBaseToc.prototype, "toc", void 0);
+__decorate([
+    redux()
+], FtReaderBaseToc.prototype, "currentPage", void 0);
+__decorate([
+    redux({
+        selector: (s, self) => {
+            var _a, _b;
+            return ((_a = s.paginationConfiguration) === null || _a === void 0 ? void 0 : _a.splitCurrentPageToc) && !self.isCurrentPageToc
+                ? (((_b = s.currentPage) === null || _b === void 0 ? void 0 : _b.rootTocId) ? [s.currentPage.rootTocId] : [])
+                : s.visibleTopics;
+        },
+    })
+], FtReaderBaseToc.prototype, "highlightedTocIds", void 0);
+__decorate([
+    redux({ selector: (s) => s.translation.isLoading })
+], FtReaderBaseToc.prototype, "translationLoading", void 0);
+__decorate([
+    state({ hasChanged })
+], FtReaderBaseToc.prototype, "automaticallyExpandedNodes", void 0);
+__decorate([
+    state({ hasChanged })
+], FtReaderBaseToc.prototype, "manuallyExpandedNodes", void 0);
+__decorate([
+    state({ hasChanged })
+], FtReaderBaseToc.prototype, "manuallyCollapsedNodes", void 0);
+__decorate([
+    state()
+], FtReaderBaseToc.prototype, "expandAll", void 0);
+__decorate([
+    state()
+], FtReaderBaseToc.prototype, "viewportSize", void 0);