@fluid-topics/ft-reader-metadata 1.1.53 → 1.1.55

package/build/ReaderMetadataMessages.d.ts

@@ -0,0 +1,5 @@
+import { I18nMessageContext, I18nMessages } from "@fluid-topics/ft-i18n";
+export interface ReaderMetadataMessages extends I18nMessages {
+    itemWithNoValueForSwitchToRelatives(): string;
+}
+export declare const readerMetadataContext: I18nMessageContext<ReaderMetadataMessages>;

package/build/ReaderMetadataMessages.js

@@ -0,0 +1,2 @@
+import { I18nMessageContext } from "@fluid-topics/ft-i18n";
+export const readerMetadataContext = I18nMessageContext.build("designedReaderMapMetadata");

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

@@ -2,7 +2,8 @@ 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";
-export declare class FtReaderMetadata extends FtReaderComponent implements FtReaderMetadataProperties {
+declare const FtReaderMetadata_base: typeof FtReaderComponent & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface>;
+export declare class FtReaderMetadata extends FtReaderMetadata_base implements FtReaderMetadataProperties {
     static elementDefinitions: ElementDefinitionsMap;
     static styles: import("lit").CSSResult;
     key?: string;
@@ -10,20 +11,22 @@ export declare class FtReaderMetadata extends FtReaderComponent implements FtRea
     useForSwitchingToRelatives: boolean;
     editorMode: boolean;
     private metadata?;
-    private mapRelatives?;
+    private flatMetadata?;
     private map?;
     private relativeTopicPivotMetadata?;
     private relatives;
+    private noValueMessage;
+    constructor();
     setReaderStateManager(readerStateManager: FtReaderStateManager): void;
+    private updateRelatives;
     protected render(): import("lit").TemplateResult<1>;
-    private renderContent;
     private renderSwitchToRelatives;
+    private renderChip;
+    private renderChipContent;
     private renderRelativeItem;
-    private renderRelativeItemValue;
     private hideIfEmpty;
-    private get valueText();
-    private get tooltipText();
     private addTopicPivotParam;
-    private setRelatives;
     protected update(props: PropertyValues): void;
+    get metadataLabel(): string | undefined;
 }
+export {};

package/build/ft-reader-metadata.js

@@ -6,77 +6,91 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
-import { redux, reduxReactive } from "@fluid-topics/ft-wc-utils";
+import { ClusteringHelper, redux, reduxEventListener, reduxReactive } from "@fluid-topics/ft-wc-utils";
 import { styles } from "./ft-reader-metadata.styles";
 import { FtReaderComponent } from "@fluid-topics/ft-reader-context/build/registration";
 import { FtTooltip } from "@fluid-topics/ft-tooltip";
 import { FtChip } from "@fluid-topics/ft-chip";
-import { FtFloatingMenu, FtFloatingMenuItem } from "@fluid-topics/ft-floating-menu";
+import { FtFloatingMenu, FtFloatingMenuItem, FtFloatingMenuLabel } from "@fluid-topics/ft-floating-menu";
 import { getResultUrl } from "@fluid-topics/ft-search-result-context/build/utils";
 import { repeat } from "lit/directives/repeat.js";
 import { FtRipple } from "@fluid-topics/ft-ripple";
-class FtReaderMetadata extends FtReaderComponent {
+import { withI18n } from "@fluid-topics/ft-i18n/build/lit/i18n";
+import { readerMetadataContext } from "./ReaderMetadataMessages";
+import { i18n } from "@fluid-topics/ft-i18n";
+class FtReaderMetadata extends withI18n(FtReaderComponent) {
     constructor() {
-        super(...arguments);
+        super();
         this.multiLine = false;
         this.useForSwitchingToRelatives = false;
         this.editorMode = false;
         this.relatives = [];
+        this.noValueMessage = "No value";
+        this.addI18nContext(readerMetadataContext);
     }
     setReaderStateManager(readerStateManager) {
-        var _a;
         super.setReaderStateManager(readerStateManager);
         if (this.key && this.useForSwitchingToRelatives) {
             readerStateManager.registerMetadataForSwitchToRelatives(this.key);
         }
-        (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.store.eventBus.addEventListener("clustering-helper-created", () => this.setRelatives());
+    }
+    updateRelatives() {
+        var _a, _b, _c, _d;
+        if (this.useForSwitchingToRelatives && this.key) {
+            this.relatives = (_d = (_b = (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.clusteringHelper) === null || _b === void 0 ? void 0 : _b.computeClustersItemsForMetadata(this.key, ((_c = this.map) === null || _c === void 0 ? void 0 : _c.lang) || "en", this.noValueMessage)) !== null && _d !== void 0 ? _d : [];
+        }
+        else {
+            this.relatives = [];
+        }
     }
     render() {
+        return html `
+            ${this.useForSwitchingToRelatives && this.relatives.length > 0 ? this.renderSwitchToRelatives() : this.renderChip()}
+            ${this.hideIfEmpty()}
+        `;
+    }
+    renderSwitchToRelatives() {
+        return html `
+            <div part="floating-menu-container" class="ft-reader-metadata--container">
+                <ft-floating-menu part="floating-menu" text="Toggle collapsible" trailingIcon>
+                    ${this.renderChip(true)}
+                    <ft-floating-menu-label>${this.metadataLabel}</ft-floating-menu-label>
+                    ${repeat(this.relatives, relative => relative.metadata.value, relative => this.renderRelativeItem(relative.result, relative.metadata))}
+                </ft-floating-menu>
+            </div>
+        `;
+    }
+    renderChip(inFloatingMenu = false) {
+        var _a, _b;
         return html `
             <ft-tooltip part="tooltip"
+                        slot="${inFloatingMenu ? "toggle" : ""}"
                         class="${this.multiLine ? "ft-reader-metadata-multi-line" : ""}"
-                        text="${this.tooltipText}">
-                ${this.useForSwitchingToRelatives && this.metadata && this.metadata.values.length > 0 && this.relatives.length > 0
-            ? this.renderSwitchToRelatives()
-            : html `
-                        <ft-chip part="chip" ?multiLine=${this.multiLine}>
-                            ${this.renderContent()}
-                        </ft-chip>
-                    `}
+                        text="${`${this.metadataLabel}: ${(_b = (_a = this.flatMetadata) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : this.noValueMessage}`}">
+                <ft-chip part="chip"
+                         exportpartsPrefix="chip"
+                         trailingIcon icon="${inFloatingMenu ? "thin_arrow" : ""}"
+                         ?clickable=${inFloatingMenu}
+                         ?multiLine=${this.multiLine}>
+                    ${this.renderChipContent()}
+                </ft-chip>
             </ft-tooltip>
-            ${this.hideIfEmpty()}
         `;
     }
-    renderContent() {
+    renderChipContent() {
+        var _a, _b;
         if (this.metadata && this.metadata.values.length > 0) {
-            return html `${this.valueText}`;
+            return (_b = (_a = this.flatMetadata) === null || _a === void 0 ? void 0 : _a.displayValue) !== null && _b !== void 0 ? _b : this.noValueMessage;
         }
         if (this.editorMode) {
             if (this.key) {
-                return html `no value for ${this.key}`;
+                return `no value for ${this.key}`;
             }
             else {
-                return html `no metadata selected`;
+                return `no metadata selected`;
             }
         }
-        return nothing;
-    }
-    renderSwitchToRelatives() {
-        return html `
-            <div part="floating-menu-container" class="ft-reader-metadata--container">
-                <ft-floating-menu part="floating-menu" text="Toggle collapsible" trailingIcon>
-                    <ft-chip part="chip"
-                             ?multiLine=${this.multiLine}
-                             trailingIcon icon="thin_arrow"
-                             slot="toggle"
-                             clickable>
-                        ${this.renderContent()}
-                    </ft-chip>
-
-                    ${repeat(this.relatives, relative => relative.metadata.value, relative => this.renderRelativeItem(relative.result, relative.metadata))}
-                </ft-floating-menu>
-            </div>
-        `;
+        return this.noValueMessage;
     }
     renderRelativeItem(result, metadata) {
         return html `
@@ -85,18 +99,17 @@ class FtReaderMetadata extends FtReaderComponent {
                @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>
-                    ${this.renderRelativeItemValue(metadata.value, metadata.displayValue)}
+                    ${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>
             </a>
         `;
     }
-    renderRelativeItemValue(value, displayValue) {
-        return value === displayValue ? value : html `
-            <ft-tooltip part="relative-item-tooltip" text="${value}">${displayValue}</ft-tooltip>
-        `;
-    }
     hideIfEmpty() {
-        if (!this.editorMode && (!this.metadata || this.metadata.values.length == 0)) {
+        const theresNoMetadata = !this.metadata || this.metadata.values.length == 0;
+        const shouldHide = this.useForSwitchingToRelatives ? theresNoMetadata && this.relatives.length === 0 : theresNoMetadata;
+        if (!this.editorMode && shouldHide) {
             return html `
                 <style>
                     :host {
@@ -107,14 +120,6 @@ class FtReaderMetadata extends FtReaderComponent {
         }
         return nothing;
     }
-    get valueText() {
-        var _a, _b;
-        return (_b = (_a = this.metadata) === null || _a === void 0 ? void 0 : _a.values.join(", ")) !== null && _b !== void 0 ? _b : "";
-    }
-    get tooltipText() {
-        var _a, _b;
-        return this.metadata ? `${(_b = (_a = this.metadata) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : this.metadata.key}: ${this.valueText}` : "";
-    }
     addTopicPivotParam(e, result) {
         var _a, _b;
         const currentTocId = this.stateManager.store.getState().visibleTopics[0];
@@ -138,18 +143,9 @@ class FtReaderMetadata extends FtReaderComponent {
             });
         }
     }
-    setRelatives() {
-        var _a;
-        if (this.metadata && this.mapRelatives) {
-            this.relatives = this.stateManager.clusteringHelper.computeClustersItemsForMetadata(this.key, ((_a = this.map) === null || _a === void 0 ? void 0 : _a.lang) || "en");
-        }
-    }
     update(props) {
         var _a, _b, _c, _d;
         super.update(props);
-        if ((props.has("metadata") || props.has("mapRelatives"))) {
-            this.setRelatives();
-        }
         if (props.has("key") && this.useForSwitchingToRelatives) {
             if (props.get("key")) {
                 (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.unregisterMetadataForSwitchToRelatives(props.get("key"));
@@ -166,12 +162,28 @@ class FtReaderMetadata extends FtReaderComponent {
                 (_d = this.stateManager) === null || _d === void 0 ? void 0 : _d.unregisterMetadataForSwitchToRelatives(this.key);
             }
         }
+        if (props.has("metadata")) {
+            this.flatMetadata = this.metadata && this.metadata.values.length > 0 ? ClusteringHelper.flattenMetadata(this.metadata) : ({
+                key: this.key,
+                label: this.key,
+                value: undefined,
+                displayValue: undefined,
+            });
+        }
+    }
+    get metadataLabel() {
+        var _a, _b, _c, _d, _e, _f;
+        if (this.metadata) {
+            return this.metadata.label;
+        }
+        return (_f = (_d = (_c = (_b = (_a = this.stateManager) === null || _a === void 0 ? void 0 : _a.clusteringHelper) === null || _b === void 0 ? void 0 : _b.getMetadataDescriptor(this.key)) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : (_e = this.relatives.find(item => item.metadata.value)) === null || _e === void 0 ? void 0 : _e.metadata.label) !== null && _f !== void 0 ? _f : this.key;
     }
 }
 FtReaderMetadata.elementDefinitions = {
     "ft-chip": FtChip,
     "ft-floating-menu": FtFloatingMenu,
     "ft-floating-menu-item": FtFloatingMenuItem,
+    "ft-floating-menu-label": FtFloatingMenuLabel,
     "ft-ripple": FtRipple,
     "ft-tooltip": FtTooltip,
 };
@@ -193,8 +205,8 @@ __decorate([
     redux({ 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);
 __decorate([
-    redux({ selector: (s) => s.relatives })
-], FtReaderMetadata.prototype, "mapRelatives", void 0);
+    state()
+], FtReaderMetadata.prototype, "flatMetadata", void 0);
 __decorate([
     redux()
 ], FtReaderMetadata.prototype, "map", void 0);
@@ -204,4 +216,10 @@ __decorate([
 __decorate([
     state()
 ], FtReaderMetadata.prototype, "relatives", void 0);
+__decorate([
+    i18n(readerMetadataContext.properties.itemWithNoValueForSwitchToRelatives())
+], FtReaderMetadata.prototype, "noValueMessage", void 0);
+__decorate([
+    reduxEventListener({ eventName: "clustering-helper-created" })
+], FtReaderMetadata.prototype, "updateRelatives", null);
 export { FtReaderMetadata };