@fluid-topics/ft-reader-topic-metadata 1.1.74 → 1.1.76

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

@@ -7,12 +7,14 @@ export declare class FtReaderTopicMetadata extends FtReaderTopicComponent implem
     static styles: import("lit").CSSResult;
     key?: string;
     multiLine: boolean;
+    displayLabel: boolean;
     editorMode: boolean;
     private metadata?;
+    private flatMetadata?;
     protected render(): import("lit").TemplateResult<1>;
-    private renderContent;
+    private renderChip;
+    private metadataValues;
     private hideIfEmpty;
-    private get valueText();
     private get tooltipText();
     protected update(props: PropertyValues): void;
     protected onStoreAvailable(): void;

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

@@ -8,29 +8,44 @@ import { html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 import { styles } from "./ft-reader-topic-metadata.styles";
 import { FtReaderTopicComponent } from "@fluid-topics/ft-reader-topic-context/build/registration";
+import { ClusteringHelper } from "@fluid-topics/ft-wc-utils";
 import { FtTooltip } from "@fluid-topics/ft-tooltip";
 import { FtChip } from "@fluid-topics/ft-chip";
 class FtReaderTopicMetadata extends FtReaderTopicComponent {
     constructor() {
         super(...arguments);
         this.multiLine = false;
+        this.displayLabel = false;
         this.editorMode = false;
     }
     render() {
         return html `
-            <ft-tooltip text="${this.tooltipText}">
-                <ft-chip part="chip"
-                         exportpartsPrefix="chip"
-                         ?multiLine=${this.multiLine}>
-                    ${this.renderContent()}
-                </ft-chip>
-            </ft-tooltip>
+            ${this.renderChip()}
             ${this.hideIfEmpty()}
         `;
     }
-    renderContent() {
-        if (this.metadata) {
-            return html `${this.valueText}`;
+    renderChip() {
+        var _a, _b, _c;
+        let chip = html `
+            <ft-chip part="chip"
+                     exportpartsPrefix="chip"
+                     ?multiLine=${this.multiLine}>
+                ${this.displayLabel ? html `
+                    <span part="label">${(_a = this.flatMetadata) === null || _a === void 0 ? void 0 : _a.label}: </span>
+                ` : nothing}
+                <span part="values">${this.metadataValues()}</span>
+            </ft-chip>
+        `;
+        return this.displayLabel && ((_b = this.flatMetadata) === null || _b === void 0 ? void 0 : _b.value) == ((_c = this.flatMetadata) === null || _c === void 0 ? void 0 : _c.displayValue) ? chip : html `
+            <ft-tooltip part="tooltip" text="${this.tooltipText}">
+                ${chip}
+            </ft-tooltip>
+        `;
+    }
+    metadataValues() {
+        var _a;
+        if (this.flatMetadata) {
+            return html `${(_a = this.flatMetadata) === null || _a === void 0 ? void 0 : _a.displayValue}`;
         }
         if (this.key) {
             return html `no value for ${this.key}`;
@@ -40,7 +55,7 @@ class FtReaderTopicMetadata extends FtReaderTopicComponent {
         }
     }
     hideIfEmpty() {
-        if (!this.editorMode && !this.metadata) {
+        if (!this.editorMode && !this.flatMetadata) {
             return html `
                 <style>
                     :host {
@@ -51,19 +66,17 @@ class FtReaderTopicMetadata extends FtReaderTopicComponent {
         }
         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}` : "";
+        return this.flatMetadata ? this.flatMetadata.label + ": " + this.flatMetadata.value : "";
     }
     update(props) {
         super.update(props);
         if (["key", "tocNode"].some(p => props.has(p))) {
             this.updateContent();
         }
+        if (props.has("metadata")) {
+            this.flatMetadata = ClusteringHelper.flattenMetadata(this.metadata);
+        }
     }
     onStoreAvailable() {
         super.onStoreAvailable();
@@ -88,10 +101,16 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], FtReaderTopicMetadata.prototype, "multiLine", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtReaderTopicMetadata.prototype, "displayLabel", void 0);
 __decorate([
     state()
 ], FtReaderTopicMetadata.prototype, "editorMode", void 0);
 __decorate([
     state()
 ], FtReaderTopicMetadata.prototype, "metadata", void 0);
+__decorate([
+    state()
+], FtReaderTopicMetadata.prototype, "flatMetadata", void 0);
 export { FtReaderTopicMetadata };