@fluid-topics/ft-reader-toc 0.3.12 → 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,28 +1,8 @@
 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";
 import { FtIconVariants } from "@fluid-topics/ft-icon";
-export interface FtReaderTocProperties {
-    expanded?: boolean;
-    iconVariant?: FtIconVariants;
-    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;
-    iconFontSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-};
+import { FtReaderTocLabels, FtReaderTocProperties } from "./ft-reader-toc.properties";
 export declare class FtReaderToc extends FtReaderComponent implements FtReaderTocProperties {
     static elementDefinitions: ElementDefinitionsMap;
     static styles: import("lit").CSSResult;

package/build/ft-reader-toc.js

@@ -4,31 +4,20 @@ 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 { FtIconVariants } from "@fluid-topics/ft-icon";
-import { FtButton, FtButtonCssVariables } from "@fluid-topics/ft-button";
+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"),
-    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);
@@ -149,39 +138,7 @@ 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(FtButtonCssVariables.iconSize, FtReaderTocCssVariables.iconFontSize)};
-            ${setVariable(FtButtonCssVariables.backgroundColor, "transparent")};
-        }
-    `;
+FtReaderToc.styles = styles;
 __decorate([
     property({ type: Boolean })
 ], FtReaderToc.prototype, "expanded", void 0);