@fluid-topics/ft-reader-breadcrumbs 1.3.54 → 1.3.56

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

@@ -15,6 +15,8 @@ export declare class FtReaderBreadcrumbs extends FtReaderBreadcrumbs_base implem
     floatingMenuEndOffset?: number;
     private tocId?;
     private mapTitle?;
+    private toc?;
+    private translationLoading?;
     private breadcrumb;
     private ftFloatingMenu?;
     constructor();
@@ -26,5 +28,6 @@ export declare class FtReaderBreadcrumbs extends FtReaderBreadcrumbs_base implem
     private renderSeparator;
     private renderBreadcrumbLink;
     private renderBreadcrumbCurrentItem;
+    private renderLoader;
 }
 export {};

package/build/ft-reader-breadcrumbs.js

@@ -9,7 +9,7 @@ import { property, query, state } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
 import { when } from "lit/directives/when.js";
 import { classMap } from "lit/directives/class-map.js";
-import { redux } from "@fluid-topics/ft-wc-utils";
+import { numberProperty, redux } from "@fluid-topics/ft-wc-utils";
 import { styles } from "./ft-reader-breadcrumbs.styles";
 import { FtReaderComponent } from "@fluid-topics/ft-reader-context/build/registration";
 import { FtReaderInternalLink } from "@fluid-topics/ft-reader-internal-link";
@@ -19,6 +19,7 @@ import { FtFloatingMenu, FtFloatingMenuItem } from "@fluid-topics/ft-floating-me
 import { withI18n } from "@fluid-topics/ft-i18n";
 import { readerBreadcrumbsContext, readerBreadcrumbsDefaultMessages } from "./ReaderBreadcrumbsMessages";
 import { FtRipple } from "@fluid-topics/ft-ripple";
+import { FtSkeleton } from "@fluid-topics/ft-skeleton";
 class FtReaderBreadcrumbs extends withI18n(FtReaderComponent) {
     constructor() {
         super();
@@ -29,8 +30,8 @@ class FtReaderBreadcrumbs extends withI18n(FtReaderComponent) {
     willUpdate(props) {
         var _a, _b, _c;
         super.willUpdate(props);
-        if (props.has("tocId") && this.tocId !== undefined) {
-            this.breadcrumb = (_b = (_a = this.service) === null || _a === void 0 ? void 0 : _a.buildBreadcrumb(this.tocId)) !== null && _b !== void 0 ? _b : [];
+        if (["tocId", "toc"].some(p => props.has(p)) && this.tocId !== undefined) {
+            this.breadcrumb = (_b = (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.buildBreadcrumb(this.tocId)) !== null && _b !== void 0 ? _b : [];
         }
         if (props.has("breadcrumb")) {
             (_c = this.ftFloatingMenu) === null || _c === void 0 ? void 0 : _c.closeMenu();
@@ -70,7 +71,7 @@ class FtReaderBreadcrumbs extends withI18n(FtReaderComponent) {
             const isLastElement = index === breadcrumbs.length - 1;
             return html `
                     <li>
-                        ${when(isLastElement && displayLastElementAsCurrent, () => this.renderBreadcrumbCurrentItem(breadcrumb), () => this.renderBreadcrumbLink(breadcrumb))}
+                        ${when(this.translationLoading, () => this.renderLoader(), () => when(isLastElement && displayLastElementAsCurrent, () => this.renderBreadcrumbCurrentItem(breadcrumb), () => this.renderBreadcrumbLink(breadcrumb)))}
                     </li>
                     ${isLastElement ? nothing : this.renderSeparator()}`;
         });
@@ -120,6 +121,10 @@ class FtReaderBreadcrumbs extends withI18n(FtReaderComponent) {
                 ${breadcrumb.title}
             </ft-typography>`;
     }
+    renderLoader() {
+        return html `
+            <ft-skeleton part="loader"></ft-skeleton>`;
+    }
 }
 FtReaderBreadcrumbs.elementDefinitions = {
     "ft-typography": FtTypography,
@@ -127,6 +132,7 @@ FtReaderBreadcrumbs.elementDefinitions = {
     "ft-floating-menu": FtFloatingMenu,
     "ft-floating-menu-item": FtFloatingMenuItem,
     "ft-ripple": FtRipple,
+    "ft-skeleton": FtSkeleton,
 };
 FtReaderBreadcrumbs.styles = styles;
 __decorate([
@@ -142,13 +148,13 @@ __decorate([
     property({ type: Boolean })
 ], FtReaderBreadcrumbs.prototype, "useFloatingMenu", void 0);
 __decorate([
-    property({ type: Number })
+    numberProperty()
 ], FtReaderBreadcrumbs.prototype, "floatingMenuThreshold", void 0);
 __decorate([
-    property({ type: Number })
+    numberProperty()
 ], FtReaderBreadcrumbs.prototype, "floatingMenuStartOffset", void 0);
 __decorate([
-    property({ type: Number })
+    numberProperty()
 ], FtReaderBreadcrumbs.prototype, "floatingMenuEndOffset", void 0);
 __decorate([
     redux({
@@ -162,6 +168,15 @@ __decorate([
         selector: (state) => { var _a; return (_a = state.map) === null || _a === void 0 ? void 0 : _a.title; },
     })
 ], FtReaderBreadcrumbs.prototype, "mapTitle", void 0);
+__decorate([
+    redux({ store: "reader" })
+], FtReaderBreadcrumbs.prototype, "toc", void 0);
+__decorate([
+    redux({
+        store: "reader",
+        selector: (state) => state.translation.isLoading
+    })
+], FtReaderBreadcrumbs.prototype, "translationLoading", void 0);
 __decorate([
     state()
 ], FtReaderBreadcrumbs.prototype, "breadcrumb", void 0);