@fluid-topics/ft-reader-toc 0.3.11 → 0.3.13

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

@@ -0,0 +1,11 @@
+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;
+    highlightedTextColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    highlightedFontWeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    highlightedBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    iconFontSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+};
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=ft-reader-toc.css.d.ts.map

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

@@ -0,0 +1,48 @@
+import { css } from "lit";
+import { designSystemVariables, FtCssVariableFactory, setVariable } from "@fluid-topics/ft-wc-utils";
+import { FtTypographyCssVariables } from "@fluid-topics/ft-typography/build/ft-typography.css";
+import { FtButtonCssVariables } from "@fluid-topics/ft-button/build/ft-button.css";
+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),
+    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"),
+    iconFontSize: FtCssVariableFactory.create("--ft-reader-toc-icon-font-size", "SIZE", "16px"),
+};
+// language=CSS
+export const styles = css `
+    .ft-reader-toc {
+        color: ${FtReaderTocCssVariables.textColor};
+    }
+
+    .ft-reader-toc--node-highlighted > .ft-reader-toc--link-container {
+        background-color: ${FtReaderTocCssVariables.highlightedBackgroundColor};
+        color: ${FtReaderTocCssVariables.highlightedTextColor};
+        ${setVariable(FtTypographyCssVariables.fontWeight, FtReaderTocCssVariables.highlightedFontWeight)}
+    }
+
+    .ft-reader-toc--link-container {
+        display: flex;
+        gap: 4px;
+        padding: ${FtReaderTocCssVariables.verticalSpacing} 4px; /* left padding is override on inline style */
+        align-items: center;
+    }
+
+    .ft-reader-toc-mobile .ft-reader-toc--toggle-container {
+        flex-shrink: 0;
+        width: calc(${FtReaderTocCssVariables.iconFontSize} + 12px); /*--ft-button-internal-horizontal-padding: 8px; in ft-button NOT dense*/
+    }
+
+    .ft-reader-toc-desktop .ft-reader-toc--toggle-container {
+        flex-shrink: 0;
+        width: calc(${FtReaderTocCssVariables.iconFontSize} + 4px); /*--ft-button-internal-horizontal-padding: 4px; in ft-button dense*/
+    }
+
+    ft-button {
+        ${setVariable(FtButtonCssVariables.iconSize, FtReaderTocCssVariables.iconFontSize)};
+        ${setVariable(FtButtonCssVariables.backgroundColor, "transparent")};
+    }
+`;
+//# sourceMappingURL=ft-reader-toc.css.js.map

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

@@ -1,31 +1,13 @@
 import { PropertyValues, TemplateResult } from "lit";
-import { ElementDefinitionsMap, ParametrizedLabels } from "@fluid-topics/ft-wc-utils";
+import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
 import { FtReaderComponent } from "@fluid-topics/ft-reader-context/build/registration";
-export interface FtReaderTocProperties {
-    expanded?: boolean;
-    collapseIcon?: string;
-    expandIcon?: string;
-    autoCollapse?: boolean;
-}
-export interface FtReaderTocLabels extends ParametrizedLabels {
-    expand?: string;
-    collapse?: string;
-}
-export declare const DEFAULT_LABELS: FtReaderTocLabels;
-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;
-    highlightedTextColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    highlightedFontWeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    highlightedBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    iconFontFamily: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    iconFontSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-};
+import { FtIconVariants } from "@fluid-topics/ft-icon";
+import { FtReaderTocLabels, FtReaderTocProperties } from "./ft-reader-toc.properties";
 export declare class FtReaderToc extends FtReaderComponent implements FtReaderTocProperties {
     static elementDefinitions: ElementDefinitionsMap;
     static styles: import("lit").CSSResult;
     expanded: boolean;
+    iconVariant: FtIconVariants;
     collapseIcon: string;
     expandIcon: string;
     autoCollapse: boolean;

package/build/ft-reader-toc.js

@@ -4,36 +4,25 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { css, html, nothing } from "lit";
+import { html, nothing } from "lit";
 import { repeat } from "lit/directives/repeat.js";
 import { classMap } from "lit/directives/class-map.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { property, state } from "lit/decorators.js";
-import { deepEqual, designSystemVariables, FtCssVariableFactory, jsonProperty, ParametrizedLabelResolver, redux, setVariable } from "@fluid-topics/ft-wc-utils";
+import { deepEqual, jsonProperty, ParametrizedLabelResolver, redux } from "@fluid-topics/ft-wc-utils";
 import { FtReaderComponent, } from "@fluid-topics/ft-reader-context/build/registration";
-import { FtTypography, FtTypographyCssVariables } from "@fluid-topics/ft-typography";
+import { FtTypography } from "@fluid-topics/ft-typography";
 import { FtReaderInternalLink } from "@fluid-topics/ft-reader-internal-link";
-import { FtIconCssVariables, FtIconVariants } from "@fluid-topics/ft-icon";
-import { FtButton, FtButtonCssVariables } from "@fluid-topics/ft-button";
+import { FtIconVariants } from "@fluid-topics/ft-icon";
+import { FtButton } from "@fluid-topics/ft-button";
 import { FtSizeCategory, FtSizeWatcher } from "@fluid-topics/ft-size-watcher";
-export const DEFAULT_LABELS = {
-    expand: "Expand {0}",
-    collapse: "Collapse {0}",
-};
-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),
-    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"),
-    iconFontFamily: FtCssVariableFactory.create("--ft-reader-toc-icon-font-family", "UNKNOWN", "ft-icons"),
-    iconFontSize: FtCssVariableFactory.create("--ft-reader-toc-icon-font-size", "SIZE", "16px"),
-};
+import { DEFAULT_LABELS } from "./ft-reader-toc.properties";
+import { FtReaderTocCssVariables, styles } from "./ft-reader-toc.css";
 export class FtReaderToc extends FtReaderComponent {
     constructor() {
         super(...arguments);
         this.expanded = false;
+        this.iconVariant = FtIconVariants.fluid_topics;
         this.collapseIcon = "MINUS";
         this.expandIcon = "PLUS";
         this.autoCollapse = false;
@@ -74,6 +63,7 @@ export class FtReaderToc extends FtReaderComponent {
         const isHighlighted = this.splitToc ? ((_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.rootTocId) === node.tocId : (_b = this.visibleTopics) === null || _b === void 0 ? void 0 : _b.includes(node.tocId);
         const isExpanded = this.expanded || this.manuallyExpandedNodes.has(node.tocId) || (this.automaticallyExpandedNodes.has(node.tocId) && !this.manuallyCollapsedNodes.has(node.tocId));
         const canDisplayChildren = !shouldSplit && node.children.length > 0;
+        const displayToggle = canDisplayChildren && !this.expanded;
         const styles = {
             "padding-left": `calc( ${FtReaderTocCssVariables.tabulationSize} * ${node.depth - 1} + 4px)` // +4px for padding before button
         };
@@ -81,15 +71,15 @@ export class FtReaderToc extends FtReaderComponent {
             <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">
-                        ${canDisplayChildren
+                        ${displayToggle
             ? html `
                                     <ft-button round hideTooltip
                                                ?dense=${this.viewportSize !== FtSizeCategory.S}
                                                label="${this.labelResolver.resolve(isExpanded ? "collapse" : "expand", node.title)}"
-                                               iconVariant="${FtIconVariants.fluid_topics}"
+                                               iconVariant="${this.iconVariant}"
                                                icon="${(isExpanded ? this.collapseIcon : this.expandIcon)}"
                                                @click=${() => this.manuallyToggle(node.tocId, isExpanded)}
-                                               data-expand-node=${node.tocId}
+                                               data-expand-node="${node.tocId}"
                                     >
                                     </ft-button>
                                 `
@@ -148,43 +138,13 @@ FtReaderToc.elementDefinitions = {
     "ft-typography": FtTypography,
 };
 // language=CSS
-FtReaderToc.styles = css `
-        .ft-reader-toc {
-            color: ${FtReaderTocCssVariables.textColor};
-        }
-
-        .ft-reader-toc--node-highlighted > .ft-reader-toc--link-container {
-            background-color: ${FtReaderTocCssVariables.highlightedBackgroundColor};
-            color: ${FtReaderTocCssVariables.highlightedTextColor};
-            ${setVariable(FtTypographyCssVariables.fontWeight, FtReaderTocCssVariables.highlightedFontWeight)}
-        }
-
-        .ft-reader-toc--link-container {
-            display: flex;
-            gap: 4px;
-            padding: ${FtReaderTocCssVariables.verticalSpacing} 4px; /* left padding is override on inline style */
-            align-items: center;
-        }
-
-        .ft-reader-toc-mobile .ft-reader-toc--toggle-container {
-            flex-shrink: 0;
-            width: calc(${FtReaderTocCssVariables.iconFontSize} + 12px); /*--ft-button-internal-horizontal-padding: 8px; in ft-button NOT dense*/
-        }
-
-        .ft-reader-toc-desktop .ft-reader-toc--toggle-container {
-            flex-shrink: 0;
-            width: calc(${FtReaderTocCssVariables.iconFontSize} + 4px); /*--ft-button-internal-horizontal-padding: 4px; in ft-button dense*/
-        }
-
-        ft-button {
-            ${setVariable(FtIconCssVariables.fluidTopicsFontFamily, FtReaderTocCssVariables.iconFontFamily)};
-            ${setVariable(FtButtonCssVariables.iconSize, FtReaderTocCssVariables.iconFontSize)};
-            ${setVariable(FtButtonCssVariables.backgroundColor, "transparent")};
-        }
-    `;
+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);