@fluid-topics/ft-reader-metadata 1.3.4 → 1.3.5

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

@@ -2,7 +2,7 @@ import { PropertyValues } from "lit";
 import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
 import { FtReaderMetadataProperties } from "./ft-reader-metadata.properties";
 import { FtReaderComponent, FtReaderStateManager } from "@fluid-topics/ft-reader-context/build/registration";
-declare const FtReaderMetadata_base: typeof FtReaderComponent & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface> & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-app-context/build/mixins/withDateFormat").FtLitElementWithDateFormatInterface>;
+declare const FtReaderMetadata_base: typeof FtReaderComponent & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface> & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-app-context").FtLitElementWithDateFormatInterface>;
 export declare class FtReaderMetadata extends FtReaderMetadata_base implements FtReaderMetadataProperties {
     static elementDefinitions: ElementDefinitionsMap;
     static styles: import("lit").CSSResult;
@@ -13,11 +13,13 @@ export declare class FtReaderMetadata extends FtReaderMetadata_base implements F
     hierarchicalValueTruncatingLevel?: number;
     forceTooltip: boolean;
     editorMode: boolean;
+    translateValues: boolean;
     private metadata?;
     private flatMetadata?;
     private map?;
     private relativeTopicPivotMetadata?;
     private relatives;
+    private availableContentLocales?;
     private noValueMessage;
     constructor();
     setReaderStateManager(readerStateManager: FtReaderStateManager): void;
@@ -29,7 +31,7 @@ export declare class FtReaderMetadata extends FtReaderMetadata_base implements F
     private renderRelativeItem;
     private hideIfEmpty;
     private addTopicPivotParam;
-    protected update(props: PropertyValues): void;
+    protected willUpdate(props: PropertyValues): void;
     get metadataLabel(): string | undefined;
 }
 export {};

package/build/ft-reader-metadata.js

@@ -20,6 +20,8 @@ import { readerMetadataContext } from "./ReaderMetadataMessages";
 import { withDateFormat } from "@fluid-topics/ft-app-context/build/mixins/withDateFormat";
 import { i18n } from "@fluid-topics/ft-i18n";
 import { FtReaderStoreEvents } from "@fluid-topics/ft-reader-context";
+import { FtAppInfoStoreName } from "@fluid-topics/ft-app-context";
+import { MetadataValueLocalizer } from "./utils/MetadataValueLocalizer";
 class FtReaderMetadata extends withDateFormat(withI18n(FtReaderComponent)) {
     constructor() {
         super();
@@ -29,6 +31,7 @@ class FtReaderMetadata extends withDateFormat(withI18n(FtReaderComponent)) {
         this.hierarchicalValueTruncatingLevel = 3;
         this.forceTooltip = false;
         this.editorMode = false;
+        this.translateValues = false;
         this.relatives = [];
         this.noValueMessage = "No value";
         this.addI18nContext(readerMetadataContext);
@@ -67,9 +70,9 @@ class FtReaderMetadata extends withDateFormat(withI18n(FtReaderComponent)) {
     }
     renderChip(inFloatingMenu = false) {
         var _a, _b, _c, _d, _e, _f;
-        let noTooltip = !this.forceTooltip && this.displayLabel && ((_a = this.flatMetadata) === null || _a === void 0 ? void 0 : _a.displayTooltipValue) == ((_b = this.flatMetadata) === null || _b === void 0 ? void 0 : _b.displayValue);
-        let tooltipLabel = `${this.metadataLabel}: ${(_d = (_c = this.flatMetadata) === null || _c === void 0 ? void 0 : _c.displayTooltipValue) !== null && _d !== void 0 ? _d : this.noValueMessage}`;
-        let chip = html `
+        const noTooltip = !this.forceTooltip && this.displayLabel && ((_a = this.flatMetadata) === null || _a === void 0 ? void 0 : _a.displayTooltipValue) == ((_b = this.flatMetadata) === null || _b === void 0 ? void 0 : _b.displayValue);
+        const tooltipLabel = `${this.metadataLabel}: ${(_d = (_c = this.flatMetadata) === null || _c === void 0 ? void 0 : _c.displayTooltipValue) !== null && _d !== void 0 ? _d : this.noValueMessage}`;
+        const chip = html `
             <ft-chip part="chip"
                      exportpartsPrefix="chip"
                      label="${tooltipLabel}"
@@ -108,15 +111,21 @@ class FtReaderMetadata extends withDateFormat(withI18n(FtReaderComponent)) {
         return this.noValueMessage;
     }
     renderRelativeItem(result, metadata) {
+        var _a, _b;
+        const translatedMetadata = this.translateValues
+            ? (_b = new MetadataValueLocalizer((_a = this.availableContentLocales) !== null && _a !== void 0 ? _a : []).localize(metadata)) !== null && _b !== void 0 ? _b : metadata
+            : metadata;
         return html `
             <a part="relative-item-link"
                href="${getResultUrl(result)}"
                @click=${(e) => this.addTopicPivotParam(e, result)}>
                 <ft-ripple part="relative-item-ripple"></ft-ripple>
-                <ft-floating-menu-item part="relative-item" value="${metadata.value}" notFocusable>
-                    ${metadata.value == null || metadata.value === metadata.displayValue ? metadata.displayValue : html `
-                        <ft-tooltip part="relative-item-tooltip" text="${(metadata.value)}">${metadata.displayValue}</ft-tooltip>
-                    `}
+                <ft-floating-menu-item part="relative-item" value="${translatedMetadata.value}" notFocusable>
+                    ${translatedMetadata.value == null || translatedMetadata.value === translatedMetadata.displayValue
+            ? translatedMetadata.displayValue
+            : html `
+                            <ft-tooltip part="relative-item-tooltip" text="${(translatedMetadata.value)}">${translatedMetadata.displayValue}</ft-tooltip>
+                        `}
                 </ft-floating-menu-item>
             </a>
         `;
@@ -135,15 +144,14 @@ class FtReaderMetadata extends withDateFormat(withI18n(FtReaderComponent)) {
         return nothing;
     }
     addTopicPivotParam(e, result) {
-        var _a, _b;
         const currentTocId = this.stateManager.store.getState().visibleTopics[0];
         if (currentTocId && result.type == "MAP") {
             e.stopPropagation();
             e.preventDefault();
-            const tocNode = (_a = this.service) === null || _a === void 0 ? void 0 : _a.getTocNodeNow(currentTocId);
-            (_b = this.service) === null || _b === void 0 ? void 0 : _b.getTopicInfo(tocNode).then((topicInfo) => {
-                const topicPivotMetadataValue = topicInfo === null || topicInfo === void 0 ? void 0 : topicInfo.metadata.find((metadata) => metadata.key == this.relativeTopicPivotMetadata);
-                let url = new URL(getResultUrl(result));
+            const tocNode = this.service.getTocNodeNow(currentTocId);
+            this.service.getTopicInfo(tocNode).then(topicInfo => {
+                const topicPivotMetadataValue = topicInfo === null || topicInfo === void 0 ? void 0 : topicInfo.metadata.find(metadata => metadata.key == this.relativeTopicPivotMetadata);
+                const url = new URL(getResultUrl(result));
                 if (topicPivotMetadataValue) {
                     topicPivotMetadataValue.values.forEach(value => url.searchParams.append("topicPivot", value));
                 }
@@ -157,9 +165,9 @@ class FtReaderMetadata extends withDateFormat(withI18n(FtReaderComponent)) {
             });
         }
     }
-    update(props) {
-        var _a, _b, _c, _d;
-        super.update(props);
+    willUpdate(props) {
+        var _a, _b, _c, _d, _e;
+        super.willUpdate(props);
         if (props.has("key") && this.useForSwitchingToRelatives) {
             if (props.get("key")) {
                 (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.unregisterMetadataForSwitchToRelatives(props.get("key"));
@@ -176,10 +184,13 @@ class FtReaderMetadata extends withDateFormat(withI18n(FtReaderComponent)) {
                 (_d = this.stateManager) === null || _d === void 0 ? void 0 : _d.unregisterMetadataForSwitchToRelatives(this.key);
             }
         }
-        if (props.has("metadata") || props.has("hierarchicalValueTruncatingLevel") || this.dateFormatOptionsChanged(props)) {
+        if (props.has("translateValues") || props.has("metadata") || props.has("hierarchicalValueTruncatingLevel") || this.dateFormatOptionsChanged(props)) {
             this.flatMetadata = this.metadata
                 ? ClusteringHelper.flattenMetadata(this.metadata, this.hierarchicalValueTruncatingLevel, this.getDateFormatter(this.metadata.key))
                 : undefined;
+            if (this.translateValues) {
+                this.flatMetadata = new MetadataValueLocalizer((_e = this.availableContentLocales) !== null && _e !== void 0 ? _e : []).localize(this.flatMetadata);
+            }
         }
     }
     get metadataLabel() {
@@ -221,6 +232,9 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], FtReaderMetadata.prototype, "editorMode", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtReaderMetadata.prototype, "translateValues", void 0);
 __decorate([
     redux({ store: "reader", selector: (s, e) => { var _a, _b; return (_b = (_a = s.map) === null || _a === void 0 ? void 0 : _a.metadata) === null || _b === void 0 ? void 0 : _b.find(m => m.key === e.key); } })
 ], FtReaderMetadata.prototype, "metadata", void 0);
@@ -236,6 +250,9 @@ __decorate([
 __decorate([
     state()
 ], FtReaderMetadata.prototype, "relatives", void 0);
+__decorate([
+    redux({ store: FtAppInfoStoreName })
+], FtReaderMetadata.prototype, "availableContentLocales", void 0);
 __decorate([
     i18n(readerMetadataContext.properties.itemWithNoValueForSwitchToRelatives())
 ], FtReaderMetadata.prototype, "noValueMessage", void 0);