@fluid-topics/ft-reader-toc 1.1.8 → 1.1.9

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

@@ -7,5 +7,8 @@ export declare const FtReaderTocCssVariables: {
     highlightedFontWeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     highlightedBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     iconFontSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    treeNodeIconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    leafNodeIconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    expandCollapseAllButtonColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
 };
 export declare const styles: import("lit").CSSResult;

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

@@ -11,6 +11,9 @@ export const FtReaderTocCssVariables = {
     highlightedFontWeight: FtCssVariableFactory.create("--ft-reader-toc-highlighted-font-weight", "", "UNKNOWN", "bold"),
     highlightedBackgroundColor: FtCssVariableFactory.create("--ft-reader-toc-highlighted-background-color", "", "COLOR", "transparent"),
     iconFontSize: FtCssVariableFactory.create("--ft-reader-toc-icon-font-size", "", "SIZE", "16px"),
+    treeNodeIconColor: FtCssVariableFactory.create("--ft-reader-toc-tree-node-icon-color", "", "COLOR", designSystemVariables.colorPrimary),
+    leafNodeIconColor: FtCssVariableFactory.create("--ft-reader-toc-leaf-node-icon-color", "", "COLOR", designSystemVariables.colorPrimary),
+    expandCollapseAllButtonColor: FtCssVariableFactory.create("--ft-reader-toc-expand-collapse-all-button-color", "", "COLOR", designSystemVariables.colorPrimary),
 };
 // language=CSS
 export const styles = css `
@@ -39,6 +42,18 @@ export const styles = css `
         ${setVariable(FtButtonCssVariables.iconSize, FtReaderTocCssVariables.iconFontSize)};
     }
 
+    .ft-reader-toc--leaf-node-icon {
+        color: ${FtReaderTocCssVariables.leafNodeIconColor};
+    }
+
+    .ft-reader-toc--tree-node-button {
+        ${setVariable(FtButtonCssVariables.color, FtReaderTocCssVariables.treeNodeIconColor)};
+    }
+
+    .ft-reader-toc--expand-collapse-all-button {
+        ${setVariable(FtButtonCssVariables.color, FtReaderTocCssVariables.expandCollapseAllButtonColor)};
+    }
+
     .ft-reader-toc--toggle-container {
         flex-shrink: 0;
     }
@@ -55,6 +70,14 @@ export const styles = css `
         width: 0;
     }
 
+    .ft-reader-toc-mobile .ft-reader-toc--leaf-node-icon {
+        width: calc(${FtReaderTocCssVariables.iconFontSize} + 12px);
+    }
+
+    .ft-reader-toc-desktop .ft-reader-toc--leaf-node-icon {
+        width: calc(${FtReaderTocCssVariables.iconFontSize} + 4px);
+    }
+
     .ft-reader-toc-expand-collapse-all-container {
         margin: 8px 4px;
         display: flex;

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

@@ -10,6 +10,8 @@ export declare class FtReaderToc extends FtReaderComponent implements FtReaderTo
     iconVariant: FtIconVariants;
     collapseIcon: string;
     expandIcon: string;
+    leafNodeIconVariant: FtIconVariants;
+    leafNodeIcon: string;
     expandCollapseAll: boolean;
     expandCollapseAllHideLabel: boolean;
     expandCollapseAllTrailingIcon: boolean;
@@ -44,4 +46,5 @@ export declare class FtReaderToc extends FtReaderComponent implements FtReaderTo
     private onViewportSizeChange;
     private toggleExpandCollapseAll;
     private getExpandCollapseAllTooltipPosition;
+    private getLeafNodeIcon;
 }

package/build/ft-reader-toc.js

@@ -13,7 +13,7 @@ import { deepEqual, jsonProperty, ParametrizedLabelResolver, redux } from "@flui
 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 { FtIconVariants } from "@fluid-topics/ft-icon";
+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 { DEFAULT_LABELS } from "./ft-reader-toc.properties";
@@ -25,6 +25,8 @@ class FtReaderToc extends FtReaderComponent {
         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;
@@ -92,6 +94,7 @@ class FtReaderToc extends FtReaderComponent {
                  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")
@@ -124,6 +127,7 @@ class FtReaderToc extends FtReaderComponent {
                                     ${canDisplayChildren ? html `
                                                 <ft-button
                                                         part="expand-collapse-node"
+                                                        class="ft-reader-toc--tree-node-button"
                                                         round hideTooltip
                                                         ?dense=${this.viewportSize !== FtSizeCategory.S}
                                                         label="${this.labelResolver.resolve(isExpanded
@@ -139,9 +143,9 @@ class FtReaderToc extends FtReaderComponent {
                                                         aria-expanded="${isExpanded}"
                                                 >
                                                 </ft-button>
-                                            ` : nothing}
+                                            ` : this.getLeafNodeIcon()}
                                 </div>
-                            ` : nothing}
+                            ` : !canDisplayChildren ? this.getLeafNodeIcon() : nothing}
                     <ft-reader-internal-link
                             part="node-link"
                             tocId="${node.tocId}"
@@ -203,10 +207,14 @@ class FtReaderToc extends FtReaderComponent {
                 return "bottom";
         }
     }
+    getLeafNodeIcon() {
+        return html `
+            <ft-icon class="ft-reader-toc--leaf-node-icon" .variant="${this.leafNodeIconVariant}" .value="${this.leafNodeIcon}"></ft-icon>`;
+    }
 }
-// Uncomment to use scoped web components
 FtReaderToc.elementDefinitions = {
     "ft-button": FtButton,
+    "ft-icon": FtIcon,
     "ft-reader-internal-link": FtReaderInternalLink,
     "ft-size-watcher": FtSizeWatcher,
     "ft-typography": FtTypography,
@@ -225,6 +233,12 @@ __decorate([
 __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);