@fluid-topics/ft-reader-toc 1.2.24 → 1.2.25

package/build/FtReaderTocMessages.d.ts

@@ -0,0 +1,11 @@
+import { DefaultI18nMessages, I18nMessageContext, I18nMessages } from "@fluid-topics/ft-i18n";
+export interface FtReaderTocMessages extends I18nMessages {
+    expand(title: string): string;
+    collapse(title: string): string;
+    expandAll(): string;
+    expandAllLong(): string;
+    collapseAll(): string;
+    collapseAllLong(): string;
+}
+export declare const readerToc: I18nMessageContext<FtReaderTocMessages>;
+export declare const readerTocDefaultMessages: DefaultI18nMessages<FtReaderTocMessages>;

package/build/FtReaderTocMessages.js

@@ -0,0 +1,10 @@
+import { I18nMessageContext } from "@fluid-topics/ft-i18n";
+export const readerToc = I18nMessageContext.build("designedReaderToc");
+export const readerTocDefaultMessages = {
+    expand: "Expand {0}",
+    collapse: "Collapse {0}",
+    expandAll: "Expand all",
+    expandAllLong: "Expand all table of contents",
+    collapseAll: "Collapse all",
+    collapseAllLong: "Collapse all table of contents",
+};

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

@@ -1,12 +1,13 @@
 import { PropertyValues, TemplateResult } from "lit";
-import { ElementDefinitionsMap, ParametrizedLabelResolver } from "@fluid-topics/ft-wc-utils";
+import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
 import { FtReaderComponent, FtReaderPage, FtReaderTocNode } from "@fluid-topics/ft-reader-context/build/registration";
 import { FtIconVariants } from "@fluid-topics/ft-icon";
 import { FtSizeCategory } from "@fluid-topics/ft-size-watcher";
-import { FtReaderTocLabels, FtReaderTocProperties } from "./ft-reader-toc.properties";
+import { FtReaderTocProperties } from "./ft-reader-toc.properties";
 import { FtPagesTocNode } from "@fluid-topics/ft-reader-context/build/store/model";
 type TocNode = FtReaderTocNode | FtPagesTocNode;
-export declare class FtReaderToc extends FtReaderComponent implements FtReaderTocProperties {
+declare const FtReaderToc_base: typeof FtReaderComponent & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface>;
+export declare class FtReaderToc extends FtReaderToc_base implements FtReaderTocProperties {
     static elementDefinitions: ElementDefinitionsMap;
     static styles: import("lit").CSSResult;
     expanded: boolean;
@@ -27,8 +28,6 @@ export declare class FtReaderToc extends FtReaderComponent implements FtReaderTo
     scrollCurrentTopicIntoView: boolean;
     scope: FtReaderTocProperties["scope"];
     empty: boolean;
-    labels: FtReaderTocLabels;
-    labelResolver: ParametrizedLabelResolver<FtReaderTocLabels>;
     toc?: Array<TocNode>;
     currentPage?: FtReaderPage;
     highlightedTocIds?: string[];
@@ -39,6 +38,7 @@ export declare class FtReaderToc extends FtReaderComponent implements FtReaderTo
     viewportSize: FtSizeCategory;
     nodesToExpandExist: boolean;
     get isCurrentPageToc(): boolean;
+    constructor();
     protected update(changedProperties: PropertyValues<FtReaderToc>): void;
     protected contentAvailableCallback(props: PropertyValues<FtReaderToc>): void;
     protected render(): TemplateResult<1>;

package/build/ft-reader-toc.js

@@ -9,18 +9,22 @@ 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 { hasChanged, jsonProperty, ParametrizedLabelResolver, redux, scrollHelper } from "@fluid-topics/ft-wc-utils";
+import { hasChanged, redux, scrollHelper } from "@fluid-topics/ft-wc-utils";
 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 { 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";
 import { FtReaderTocCssVariables, styles } from "./ft-reader-toc.styles";
-class FtReaderToc extends FtReaderComponent {
+import { withI18n } from "@fluid-topics/ft-i18n";
+import { readerToc, readerTocDefaultMessages } from "./FtReaderTocMessages";
+class FtReaderToc extends withI18n(FtReaderComponent) {
+    get isCurrentPageToc() {
+        return this.scope === "current-page";
+    }
     constructor() {
-        super(...arguments);
+        super();
         this.expanded = false;
         this.iconVariant = FtIconVariants.fluid_topics;
         this.collapseIcon = "MINUS";
@@ -38,17 +42,13 @@ class FtReaderToc extends FtReaderComponent {
         this.scrollCurrentTopicIntoView = false;
         this.scope = "pages";
         this.empty = true;
-        this.labels = {};
-        this.labelResolver = new ParametrizedLabelResolver(DEFAULT_LABELS, {});
         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";
+        this.addI18nContext(readerToc, readerTocDefaultMessages);
     }
     update(changedProperties) {
         var _a, _b, _c;
@@ -56,9 +56,6 @@ class FtReaderToc extends FtReaderComponent {
         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((_b = this.highlightedTocIds) !== null && _b !== void 0 ? _b : []);
         }
@@ -101,11 +98,11 @@ class FtReaderToc extends FtReaderComponent {
                            icon="${this.expandCollapseAllHideIcon ? "" : (this.expandAll
             ? (this.collapseAllIcon || "ICON_COLLAPSE")
             : (this.expandAllIcon || "ICON_EXPAND"))}"
-                           label="${this.labelResolver.resolve(this.expandAll ? "collapseAllLong" : "expandAllLong")}"
+                           label="${this.expandAll ? readerToc.messages.collapseAllLong() : readerToc.messages.expandAllLong()}"
                            tooltipPosition="${this.getExpandCollapseAllTooltipPosition()}"
                            ?trailingIcon=${this.expandCollapseAllTrailingIcon}
                            @click=${() => this.toggleExpandCollapseAll()}>
-                    ${this.expandCollapseAllHideLabel ? "" : this.labelResolver.resolve(this.expandAll ? "collapseAll" : "expandAll")}
+                    ${this.expandCollapseAllHideLabel ? "" : this.expandAll ? readerToc.messages.collapseAll() : readerToc.messages.expandAll()}
                 </ft-button>
             </div>
         ` : nothing;
@@ -130,9 +127,7 @@ class FtReaderToc extends FtReaderComponent {
                                                    class="ft-reader-toc--tree-node-button"
                                                    round hideTooltip
                                                    ?dense=${this.viewportSize !== FtSizeCategory.S}
-                                                   label="${this.labelResolver.resolve(isExpanded
-            ? "collapse"
-            : "expand", node.title)}"
+                                                   label="${isExpanded ? readerToc.messages.collapse(node.title) : readerToc.messages.expand(node.title)}"
                                                    .iconVariant="${this.iconVariant}"
                                                    icon="${isExpanded
             ? (this.collapseIcon || "MINUS")
@@ -276,9 +271,6 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], FtReaderToc.prototype, "empty", void 0);
-__decorate([
-    jsonProperty({})
-], FtReaderToc.prototype, "labels", void 0);
 __decorate([
     redux({
         selector: (s, self) => {