@fluid-topics/ft-reader-toc 0.3.31 → 0.3.33

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

@@ -2,6 +2,7 @@ export declare const FtReaderTocCssVariables: {
     tabulationSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     verticalSpacing: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     textColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    hoverColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     highlightedTextColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     highlightedFontWeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     highlightedBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;

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

@@ -6,6 +6,7 @@ export const FtReaderTocCssVariables = {
     tabulationSize: FtCssVariableFactory.create("--ft-reader-toc-tabulation-size", "SIZE", "16px"),
     verticalSpacing: FtCssVariableFactory.create("--ft-reader-toc-vertical-spacing", "SIZE", "4px"),
     textColor: FtCssVariableFactory.extend("--ft-reader-toc-text-color", designSystemVariables.colorOnSurface),
+    hoverColor: FtCssVariableFactory.extend("--ft-reader-toc-hover-color", designSystemVariables.colorPrimary),
     highlightedTextColor: FtCssVariableFactory.extend("--ft-reader-toc-highlighted-text-color", designSystemVariables.colorPrimary),
     highlightedFontWeight: FtCssVariableFactory.create("--ft-reader-toc-highlighted-font-weight", "UNKNOWN", "bold"),
     highlightedBackgroundColor: FtCssVariableFactory.create("--ft-reader-toc-highlighted-background-color", "COLOR", "transparent"),
@@ -30,6 +31,14 @@ export const styles = css `
         align-items: center;
     }
 
+    .ft-reader-toc--link-container ft-reader-internal-link:hover {
+        color: ${FtReaderTocCssVariables.hoverColor};
+    }
+
+    ft-button {
+        ${setVariable(FtButtonCssVariables.iconSize, FtReaderTocCssVariables.iconFontSize)};
+    }
+
     .ft-reader-toc--toggle-container {
         flex-shrink: 0;
     }
@@ -46,9 +55,21 @@ export const styles = css `
         width: 0;
     }
 
-    ft-button {
-        ${setVariable(FtButtonCssVariables.iconSize, FtReaderTocCssVariables.iconFontSize)};
-        ${setVariable(FtButtonCssVariables.backgroundColor, "transparent")};
+    .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;
     }
 `;
 //# sourceMappingURL=ft-reader-toc.css.js.map

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

@@ -10,6 +10,14 @@ export declare class FtReaderToc extends FtReaderComponent implements FtReaderTo
     iconVariant: FtIconVariants;
     collapseIcon: string;
     expandIcon: string;
+    expandCollapseAll: boolean;
+    expandCollapseAllHideLabel: boolean;
+    expandCollapseAllTrailingIcon: boolean;
+    expandCollapseAllAlignment: "left" | "right" | "center" | "justify";
+    expandCollapseAllHideIcon: boolean;
+    expandCollapseAllIconVariant: FtIconVariants;
+    collapseAllIcon: string;
+    expandAllIcon: string;
     autoCollapse: boolean;
     scope: FtReaderTocProperties["scope"];
     hideIfEmpty: boolean;
@@ -23,13 +31,18 @@ export declare class FtReaderToc extends FtReaderComponent implements FtReaderTo
     private automaticallyExpandedNodes;
     private manuallyExpandedNodes;
     private manuallyCollapsedNodes;
+    private expandAll;
     private viewportSize;
+    private nodesToExpandExist;
     get isCurrentPageToc(): boolean;
     protected update(changedProperties: PropertyValues): void;
     protected render(): TemplateResult<1>;
+    private renderExpandCollapseAll;
     private renderNode;
     private buildAutomaticallyExpandedNodes;
     private manuallyToggle;
     private onViewportSizeChange;
+    private toggleExpandCollapseAll;
+    private getExpandCollapseAllTooltipPosition;
 }
 //# sourceMappingURL=ft-reader-toc.d.ts.map

package/build/ft-reader-toc.js

@@ -25,6 +25,14 @@ export class FtReaderToc extends FtReaderComponent {
         this.iconVariant = FtIconVariants.fluid_topics;
         this.collapseIcon = "MINUS";
         this.expandIcon = "PLUS";
+        this.expandCollapseAll = false;
+        this.expandCollapseAllHideLabel = false;
+        this.expandCollapseAllTrailingIcon = false;
+        this.expandCollapseAllAlignment = "left";
+        this.expandCollapseAllHideIcon = false;
+        this.expandCollapseAllIconVariant = FtIconVariants.fluid_topics;
+        this.collapseAllIcon = "ICON_COLLAPSE";
+        this.expandAllIcon = "ICON_EXPAND";
         this.autoCollapse = false;
         this.scope = "pages";
         this.hideIfEmpty = false;
@@ -34,21 +42,26 @@ export class FtReaderToc extends FtReaderComponent {
         this.automaticallyExpandedNodes = new Set();
         this.manuallyExpandedNodes = new Set();
         this.manuallyCollapsedNodes = new Set();
+        this.expandAll = false;
         this.viewportSize = FtSizeCategory.M;
+        this.nodesToExpandExist = false;
     }
     get isCurrentPageToc() {
         return this.scope === "current-page";
     }
     update(changedProperties) {
-        var _a, _b;
+        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("labels")) {
             this.labelResolver = new ParametrizedLabelResolver(DEFAULT_LABELS, this.labels);
         }
         if (changedProperties.has("highlightedTocIds") && !this.expanded) {
-            this.automaticallyExpandedNodes = this.buildAutomaticallyExpandedNodes((_a = this.highlightedTocIds) !== null && _a !== void 0 ? _a : []);
+            this.automaticallyExpandedNodes = this.buildAutomaticallyExpandedNodes((_b = this.highlightedTocIds) !== null && _b !== void 0 ? _b : []);
         }
-        this.empty = ((_b = this.toc) !== null && _b !== void 0 ? _b : []).length === 0;
+        this.empty = ((_c = this.toc) !== null && _c !== void 0 ? _c : []).length === 0;
     }
     render() {
         var _a;
@@ -69,16 +82,34 @@ export class FtReaderToc extends FtReaderComponent {
             ` : nothing}
             <div class=${classMap(classes)}>
                 <ft-size-watcher @change=${this.onViewportSizeChange}></ft-size-watcher>
+                ${this.renderExpandCollapseAll()}
                 ${repeat((_a = this.toc) !== null && _a !== void 0 ? _a : [], node => node.tocId, 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"
+                        iconVariant="${this.expandCollapseAllIconVariant}"
+                        icon="${this.expandCollapseAllHideIcon ? "" : (this.expandAll ? (this.collapseAllIcon || "ICON_COLLAPSE") : (this.expandAllIcon || "ICON_EXPAND"))}"
+                        label="${this.labelResolver.resolve(this.expandAll ? "collapseAllLong" : "expandAllLong")}"
+                        tooltipPosition="${this.getExpandCollapseAllTooltipPosition()}"
+                        ?trailingIcon=${this.expandCollapseAllTrailingIcon}
+                        @click=${() => this.toggleExpandCollapseAll()}
+                >
+                    ${this.expandCollapseAllHideLabel ? "" : this.labelResolver.resolve(this.expandAll ? "collapseAll" : "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.automaticallyExpandedNodes.has(node.tocId) && !this.manuallyCollapsedNodes.has(node.tocId));
+        const isExpanded = this.expanded || this.manuallyExpandedNodes.has(node.tocId) || ((this.expandAll || this.automaticallyExpandedNodes.has(node.tocId)) && !this.manuallyCollapsedNodes.has(node.tocId));
         const canDisplayChildren = node.children.length > 0;
-        const displayToggle = canDisplayChildren && !this.expanded;
         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 = {
@@ -87,36 +118,39 @@ export class FtReaderToc extends FtReaderComponent {
         return html `
             <div class="ft-reader-toc--node ${isHighlighted ? "ft-reader-toc--node-highlighted" : ""}">
                 <div class="ft-reader-toc--link-container" data-depth="${node.depth}" style=${styleMap(styles)}>
-                    <div class="ft-reader-toc--toggle-container">
-                        ${displayToggle
-            ? html `
-                                    <ft-button round hideTooltip
-                                               ?dense=${this.viewportSize !== FtSizeCategory.S}
-                                               label="${this.labelResolver.resolve(isExpanded ? "collapse" : "expand", node.title)}"
-                                               iconVariant="${this.iconVariant}"
-                                               icon="${(isExpanded ? this.collapseIcon : this.expandIcon)}"
-                                               @click=${() => this.manuallyToggle(node.tocId, isExpanded)}
-                                               data-expand-node="${node.tocId}"
-                                    >
-                                    </ft-button>
-                                `
-            : nothing}
-                    </div>
+                    ${this.nodesToExpandExist && !this.expanded ? html `
+                                <div class="ft-reader-toc--toggle-container">
+                                    ${canDisplayChildren ? html `
+                                                <ft-button
+                                                        part="expand-collapse-node"
+                                                        round hideTooltip
+                                                        ?dense=${this.viewportSize !== FtSizeCategory.S}
+                                                        label="${this.labelResolver.resolve(isExpanded ? "collapse" : "expand", node.title)}"
+                                                        iconVariant="${this.iconVariant}"
+                                                        icon="${isExpanded ? (this.collapseIcon || "MINUS") : (this.expandIcon || "PLUS")}"
+                                                        @click=${() => this.manuallyToggle(node.tocId, isExpanded)}
+                                                        data-expand-node="${node.tocId}"
+                                                        aria-controls="${node.tocId}-children"
+                                                        aria-expanded="${isExpanded}"
+                                                >
+                                                </ft-button>
+                                            ` : nothing}
+                                </div>
+                            ` : nothing}
                     <ft-reader-internal-link
+                            part="node-link"
                             tocId="${node.tocId}"
                             removeStyle>
-                        <ft-typography variant="body2">${node.title}</ft-typography>
+                        <ft-typography part="node-label" variant="body2">${node.title}</ft-typography>
                     </ft-reader-internal-link>
                 </div>
-                ${canDisplayChildren
-            ? html `
-                            <div class="ft-reader-toc--node-children">
+                ${canDisplayChildren ? html `
+                            <div class="ft-reader-toc--node-children" id="${node.tocId}-children" ?hidden=${!isExpanded}>
                                 ${isExpanded
-                ? repeat(node.children, (child) => child.tocId, child => this.renderNode(child))
-                : nothing}
-                            </div>
-                        `
+            ? repeat(node.children, (child) => child.tocId, child => this.renderNode(child))
             : nothing}
+                            </div>
+                        ` : nothing}
             </div>
         `;
     }
@@ -147,6 +181,22 @@ export class FtReaderToc extends FtReaderComponent {
     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";
+        }
+    }
 }
 // Uncomment to use scoped web components
 FtReaderToc.elementDefinitions = {
@@ -169,6 +219,30 @@ __decorate([
 __decorate([
     property()
 ], FtReaderToc.prototype, "expandIcon", 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);
@@ -211,6 +285,9 @@ __decorate([
 __decorate([
     state({ hasChanged: (value, oldValue) => !deepEqual(value, oldValue) })
 ], FtReaderToc.prototype, "manuallyCollapsedNodes", void 0);
+__decorate([
+    state()
+], FtReaderToc.prototype, "expandAll", void 0);
 __decorate([
     state()
 ], FtReaderToc.prototype, "viewportSize", void 0);