@fluid-topics/ft-reader-toc 0.3.7

package/README.md

@@ -0,0 +1,19 @@
+Main table of content for integrated reader
+
+## Install
+
+```shell
+npm install @fluid-topics/ft-reader-toc
+yarn add @fluid-topics/ft-reader-toc
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ft-reader-toc"
+
+function render() {
+    return html` <ft-reader-toc foo="bar"></ft-reader-toc> `
+}
+```

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

@@ -0,0 +1,21 @@
+import { TemplateResult } from "lit";
+import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
+import { FtReaderComponent } from "@fluid-topics/ft-reader-context/build/registration";
+export interface FtReaderTocProperties {
+}
+export declare const FtReaderTocCssVariables: {
+    colorPrimary: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    colorOnPrimary: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    tabulationSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+};
+export declare class FtReaderToc extends FtReaderComponent implements FtReaderTocProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    private toc?;
+    private splitToc?;
+    private currentPage?;
+    private visibleTopics?;
+    protected render(): TemplateResult<1>;
+    private renderNode;
+}
+//# sourceMappingURL=ft-reader-toc.d.ts.map

package/build/ft-reader-toc.js

@@ -0,0 +1,75 @@
+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 { css, html, nothing } from "lit";
+import { repeat } from "lit/directives/repeat.js";
+import { designSystemVariables, FtCssVariableFactory, redux } from "@fluid-topics/ft-wc-utils";
+import { FtReaderComponent, } from "@fluid-topics/ft-reader-context/build/registration";
+import { FtButton } from "@fluid-topics/ft-button";
+import { FtTypography } from "@fluid-topics/ft-typography";
+import { FtReaderInternalLink } from "@fluid-topics/ft-reader-internal-link";
+export const FtReaderTocCssVariables = {
+    colorPrimary: FtCssVariableFactory.external(designSystemVariables.colorPrimary, "Design system"),
+    colorOnPrimary: FtCssVariableFactory.external(designSystemVariables.colorOnPrimary, "Design system"),
+    tabulationSize: FtCssVariableFactory.create("--ft-reader-toc-tabulation-size", "SIZE", "8px"),
+};
+export class FtReaderToc extends FtReaderComponent {
+    render() {
+        var _a;
+        return html `
+            <div class="ft-reader-toc">
+                ${repeat((_a = this.toc) !== null && _a !== void 0 ? _a : [], node => node.tocId, node => this.renderNode(node))}
+            </div>
+        `;
+    }
+    renderNode(node) {
+        var _a, _b;
+        const shouldSplit = this.splitToc && node.page != null && !node.page.onItsOwn;
+        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);
+        return html `
+            <div class="ft-reader-toc--node">
+                <ft-reader-internal-link
+                        class="${isHighlighted ? "ft-reader-toc--node-visible" : ""}"
+                        tocId=${node.tocId}>
+                    <ft-typography variant="body2">${node.title}</ft-typography>
+                </ft-reader-internal-link>
+                <div class="ft-reader-toc--node-children">
+                    ${shouldSplit ? nothing : repeat(node.children, (child) => child.tocId, child => this.renderNode(child))}
+                </div>
+            </div>
+        `;
+    }
+}
+// Uncomment to use scoped web components
+FtReaderToc.elementDefinitions = {
+    "ft-button": FtButton,
+    "ft-typography": FtTypography,
+    "ft-reader-internal-link": FtReaderInternalLink
+};
+// language=CSS
+FtReaderToc.styles = css `
+        .ft-reader-toc--node-visible {
+            background-color: ${FtReaderTocCssVariables.colorPrimary};
+            color: ${FtReaderTocCssVariables.colorOnPrimary};
+        }
+
+        .ft-reader-toc--node-children {
+            padding-left: ${FtReaderTocCssVariables.tabulationSize};
+        }
+    `;
+__decorate([
+    redux()
+], FtReaderToc.prototype, "toc", void 0);
+__decorate([
+    redux((s) => { var _a; return (_a = s.map) === null || _a === void 0 ? void 0 : _a.shouldSplitCurrentPageToc; })
+], FtReaderToc.prototype, "splitToc", void 0);
+__decorate([
+    redux()
+], FtReaderToc.prototype, "currentPage", void 0);
+__decorate([
+    redux()
+], FtReaderToc.prototype, "visibleTopics", void 0);
+//# sourceMappingURL=ft-reader-toc.js.map