@fluid-topics/ft-reader-topic-content 1.2.34 → 1.2.36

package/build/ft-reader-topic-content.d.ts

@@ -7,6 +7,10 @@ import "@fluid-topics/ft-icon";
 export declare class FtReaderTopicContent extends FtReaderTopicComponent implements FtReaderTopicContentProperties {
     static styles: import("lit").CSSResult[];
     map?: FtMap;
+    private translationProfileId?;
+    private translationDestinationLanguage?;
+    private translationLoading?;
+    private translationError?;
     scrollTarget?: FtReaderScrollTarget;
     content?: string;
     error?: Error;
@@ -24,4 +28,5 @@ export declare class FtReaderTopicContent extends FtReaderTopicComponent impleme
     protected onStoreAvailable(): void;
     renderTopicContent(): import("lit-html").TemplateResult<1>;
     private is404Error;
+    private getTopicLanguage;
 }

package/build/ft-reader-topic-content.js

@@ -19,7 +19,7 @@ class FtReaderTopicContent extends FtReaderTopicComponent {
         this.onContentAvailable = () => null;
     }
     render() {
-        var _a, _b;
+        var _a;
         if (!this.map || (!this.error && !this.content)) {
             return html `
                 <section class="topic-loading"></section>
@@ -29,14 +29,14 @@ class FtReaderTopicContent extends FtReaderTopicComponent {
             <style>
                 @import "${(_a = this.map) === null || _a === void 0 ? void 0 : _a.contentStyles.topicStylesheetUrl}";
             </style>
-            <section class="topic" lang="${(_b = this.map) === null || _b === void 0 ? void 0 : _b.lang}">
+            <section class="topic" lang="${this.getTopicLanguage()}">
                 ${this.renderTopicContent()}
             </section>
         `;
     }
     update(props) {
         super.update(props);
-        if (props.has("map") || props.has("tocNode")) {
+        if (["map", "tocNode", "translationDestinationLanguage", "translationProfileId"].some(p => props.has(p))) {
             this.updateContent();
         }
     }
@@ -45,7 +45,7 @@ class FtReaderTopicContent extends FtReaderTopicComponent {
         this.error = undefined;
         this.content = undefined;
         if (this.map && this.tocNode) {
-            (_a = this.service) === null || _a === void 0 ? void 0 : _a.getTopicContent(this.tocNode).then(content => this.contentPreprocessor(content || "<div class=\"empty-topic\"></div>")).then(content => this.content = content).catch(e => this.error = e);
+            (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.fetchTopicContent(this.tocNode).then(content => this.contentPreprocessor(content || "<div class=\"empty-topic\"></div>")).then(content => this.content = content).catch(e => this.error = e);
         }
     }
     contentAvailableCallback(props) {
@@ -117,7 +117,7 @@ class FtReaderTopicContent extends FtReaderTopicComponent {
         this.updateContent();
     }
     renderTopicContent() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         if (this.error) {
             return html `
                 <div class="topic-on-error">
@@ -129,15 +129,22 @@ class FtReaderTopicContent extends FtReaderTopicComponent {
             `;
         }
         const customClasses = (_b = (_a = this.map) === null || _a === void 0 ? void 0 : _a.contentStyles.customCssClasses.join(" ")) !== null && _b !== void 0 ? _b : "";
-        return html `
-            <div class="depth-${(_c = this.tocNode) === null || _c === void 0 ? void 0 : _c.depth} content-locale-${(_d = this.map) === null || _d === void 0 ? void 0 : _d.lang} ${customClasses}">
-                ${this.content != null ? unsafeHTML(`${this.content}`) : nothing}
-            </div>
-        `;
+        return this.translationLoading
+            ? html `
+                <ft-skeleton></ft-skeleton>`
+            : html `
+                <div class="depth-${(_c = this.tocNode) === null || _c === void 0 ? void 0 : _c.depth} content-locale-${this.getTopicLanguage()} ${customClasses}">
+                    ${this.content != null ? unsafeHTML(`${this.content}`) : nothing}
+                </div>
+            `;
     }
     is404Error() {
         return this.error.status === 404;
     }
+    getTopicLanguage() {
+        var _a;
+        return (this.translationDestinationLanguage && !this.translationError) ? this.translationDestinationLanguage.code : (_a = this.map) === null || _a === void 0 ? void 0 : _a.lang;
+    }
 }
 FtReaderTopicContent.styles = [
     styles,
@@ -146,6 +153,18 @@ FtReaderTopicContent.styles = [
 __decorate([
     redux()
 ], FtReaderTopicContent.prototype, "map", void 0);
+__decorate([
+    redux({ selector: (s) => s.translation.profileId })
+], FtReaderTopicContent.prototype, "translationProfileId", void 0);
+__decorate([
+    redux({ selector: (s) => s.translation.destinationLanguage })
+], FtReaderTopicContent.prototype, "translationDestinationLanguage", void 0);
+__decorate([
+    redux({ selector: (s) => s.translation.isLoading })
+], FtReaderTopicContent.prototype, "translationLoading", void 0);
+__decorate([
+    redux({ selector: (s) => s.translation.isError })
+], FtReaderTopicContent.prototype, "translationError", void 0);
 __decorate([
     redux()
 ], FtReaderTopicContent.prototype, "scrollTarget", void 0);