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

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

@@ -1,55 +1,13 @@
-import { PropertyValues, TemplateResult } from "lit";
+import { 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 } from "@fluid-topics/ft-size-watcher";
-import { FtReaderTocProperties } from "./ft-reader-toc.properties";
+import { FtReaderTocNode } from "@fluid-topics/ft-reader-context/build/registration";
 import { FtPagesTocNode } from "@fluid-topics/ft-reader-context/build/store/model";
+import { FtReaderBaseToc } from "./ft-reader-base-toc";
 type TocNode = FtReaderTocNode | FtPagesTocNode;
-declare const FtReaderToc_base: typeof FtReaderComponent & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface>;
-export declare class FtReaderToc extends FtReaderToc_base implements FtReaderTocProperties {
+export declare class FtReaderToc extends FtReaderBaseToc {
     static elementDefinitions: ElementDefinitionsMap;
     static styles: import("lit").CSSResult;
-    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[];
-    private translationLoading?;
-    automaticallyExpandedNodes: Set<string>;
-    manuallyExpandedNodes: Set<string>;
-    manuallyCollapsedNodes: Set<string>;
-    expandAll: boolean;
-    viewportSize: FtSizeCategory;
-    nodesToExpandExist: boolean;
-    get isCurrentPageToc(): boolean;
-    constructor();
-    protected update(changedProperties: PropertyValues<FtReaderToc>): void;
-    protected contentAvailableCallback(props: PropertyValues<FtReaderToc>): void;
     protected render(): TemplateResult<1>;
-    private renderExpandCollapseAll;
-    private renderNode;
-    private buildAutomaticallyExpandedNodes;
-    private manuallyToggle;
-    private onViewportSizeChange;
-    private toggleExpandCollapseAll;
-    private getExpandCollapseAllTooltipPosition;
-    private getLeafNodeIcon;
+    protected renderNode(node: TocNode): TemplateResult;
 }
 export {};

package/build/ft-reader-toc.js

@@ -1,118 +1,31 @@
-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 { classMap } from "lit/directives/class-map.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-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 { FtTypography } from "@fluid-topics/ft-typography";
 import { FtReaderInternalLink } from "@fluid-topics/ft-reader-internal-link";
-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 { FtSizeCategory } from "@fluid-topics/ft-size-watcher";
 import { FtReaderTocCssVariables, styles, } from "./ft-reader-toc.styles";
 import { FtSkeleton } from "@fluid-topics/ft-skeleton";
-import { withI18n } from "@fluid-topics/ft-i18n";
-import { readerToc, readerTocDefaultMessages, } from "./FtReaderTocMessages";
-export class FtReaderToc extends withI18n(FtReaderComponent) {
-    get isCurrentPageToc() {
-        return this.scope === "current-page";
-    }
-    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);
-    }
-    update(changedProperties) {
-        var _a, _b, _c;
-        super.update(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 });
-            }
-        }
-    }
+import { readerToc } from "./FtReaderTocMessages";
+import { FtReaderBaseToc } from "./ft-reader-base-toc";
+import { classMap } from "lit/directives/class-map.js";
+export class FtReaderToc extends FtReaderBaseToc {
     render() {
-        var _a;
-        const classes = {
-            "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,
-        };
+        var _a, _b;
         return html `
-            <div class="${classMap(classes)}">
+            <div class="${classMap(this.tocClasses)}" role="tree" aria-label="${(_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.title}">
                 <ft-size-watcher @change=${this.onViewportSizeChange}></ft-size-watcher>
                 ${this.renderExpandCollapseAll()}
-                ${map((_a = this.toc) !== null && _a !== void 0 ? _a : [], (node) => this.renderNode(node))}
+                ${map((_b = this.toc) !== null && _b !== void 0 ? _b : [], (node) => this.renderNode(node))}
             </div>
         `;
     }
-    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;
-    }
     renderNode(node) {
         var _a, _b, _c;
         const isHighlighted = (_a = this.highlightedTocIds) === null || _a === void 0 ? void 0 : _a.includes(node.tocId);
-        const isExpanded = this.expanded || this.manuallyExpandedNodes.has(node.tocId) || ((this.expandAll || this.automaticallyExpandedNodes.has(node.tocId)) && !this.manuallyCollapsedNodes.has(node.tocId));
+        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;
@@ -164,161 +77,12 @@ export class FtReaderToc extends withI18n(FtReaderComponent) {
             </div>
         `;
     }
-    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) {
-        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>
-        `;
-    }
 }
 FtReaderToc.elementDefinitions = {
+    ...FtReaderBaseToc.elementDefinitions,
     "ft-button": FtButton,
-    "ft-icon": FtIcon,
     "ft-reader-internal-link": FtReaderInternalLink,
-    "ft-size-watcher": FtSizeWatcher,
     "ft-typography": FtTypography,
     "ft-skeleton": FtSkeleton,
 };
-// language=CSS
 FtReaderToc.styles = styles;
-__decorate([
-    property({ type: Boolean })
-], FtReaderToc.prototype, "expanded", void 0);
-__decorate([
-    property()
-], FtReaderToc.prototype, "iconVariant", void 0);
-__decorate([
-    property()
-], FtReaderToc.prototype, "collapseIcon", void 0);
-__decorate([
-    property()
-], FtReaderToc.prototype, "expandIcon", void 0);
-__decorate([
-    property()
-], FtReaderToc.prototype, "leafNodeIconVariant", void 0);
-__decorate([
-    property()
-], FtReaderToc.prototype, "leafNodeIcon", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtReaderToc.prototype, "expandCollapseAll", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtReaderToc.prototype, "expandCollapseAllHideLabel", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtReaderToc.prototype, "expandCollapseAllTrailingIcon", void 0);
-__decorate([
-    property()
-], FtReaderToc.prototype, "expandCollapseAllAlignment", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtReaderToc.prototype, "expandCollapseAllHideIcon", void 0);
-__decorate([
-    property()
-], FtReaderToc.prototype, "expandCollapseAllIconVariant", void 0);
-__decorate([
-    property()
-], FtReaderToc.prototype, "collapseAllIcon", void 0);
-__decorate([
-    property()
-], FtReaderToc.prototype, "expandAllIcon", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtReaderToc.prototype, "autoCollapse", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtReaderToc.prototype, "scrollCurrentTopicIntoView", void 0);
-__decorate([
-    property()
-], FtReaderToc.prototype, "scope", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], FtReaderToc.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;
-        },
-    })
-], FtReaderToc.prototype, "toc", void 0);
-__decorate([
-    redux()
-], FtReaderToc.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;
-        },
-    })
-], FtReaderToc.prototype, "highlightedTocIds", void 0);
-__decorate([
-    redux({ selector: (s) => s.translation.isLoading })
-], FtReaderToc.prototype, "translationLoading", void 0);
-__decorate([
-    state({ hasChanged })
-], FtReaderToc.prototype, "automaticallyExpandedNodes", void 0);
-__decorate([
-    state({ hasChanged })
-], FtReaderToc.prototype, "manuallyExpandedNodes", void 0);
-__decorate([
-    state({ hasChanged })
-], FtReaderToc.prototype, "manuallyCollapsedNodes", void 0);
-__decorate([
-    state()
-], FtReaderToc.prototype, "expandAll", void 0);
-__decorate([
-    state()
-], FtReaderToc.prototype, "viewportSize", void 0);