@fluid-topics/ft-reader-topic-metadata 0.3.21

package/README.md

@@ -0,0 +1,19 @@
+Metadata of a topic in integrated reader.
+
+## Install
+
+```shell
+npm install @fluid-topics/ft-reader-topic-metadata
+yarn add @fluid-topics/ft-reader-topic-metadata
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ft-reader-topic-metadata"
+
+function render() {
+    return html` <ft-reader-topic-metadata foo="bar"></ft-reader-topic-metadata> `
+}
+```

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

@@ -0,0 +1,3 @@
+export declare const FtReaderTopicMetadataCssVariables: {};
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=ft-reader-topic-metadata.css.d.ts.map

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

@@ -0,0 +1,9 @@
+import { css } from "lit";
+export const FtReaderTopicMetadataCssVariables = {};
+// language=CSS
+export const styles = css `
+    :host {
+        display: inline-block;
+    }
+`;
+//# sourceMappingURL=ft-reader-topic-metadata.css.js.map

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

@@ -0,0 +1,20 @@
+import { PropertyValues } from "lit";
+import { FtReaderTopicMetadataProperties } from "./ft-reader-topic-metadata.properties";
+import { FtReaderTopicComponent } from "@fluid-topics/ft-reader-topic-context/build/registration";
+import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
+export declare class FtReaderTopicMetadata extends FtReaderTopicComponent implements FtReaderTopicMetadataProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    key?: string;
+    editorMode: boolean;
+    private metadata?;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private renderContent;
+    private hideIfEmpty;
+    private get valueText();
+    private get tooltipText();
+    protected updated(props: PropertyValues): void;
+    protected onStoreAvailable(): void;
+    private updateContent;
+}
+//# sourceMappingURL=ft-reader-topic-metadata.d.ts.map

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

@@ -0,0 +1,91 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+import { styles } from "./ft-reader-topic-metadata.css";
+import { FtReaderTopicComponent } from "@fluid-topics/ft-reader-topic-context/build/registration";
+import { FtTooltip } from "@fluid-topics/ft-tooltip";
+import { FtChip } from "@fluid-topics/ft-chip";
+export class FtReaderTopicMetadata extends FtReaderTopicComponent {
+    constructor() {
+        super(...arguments);
+        this.editorMode = false;
+    }
+    render() {
+        return html `
+            <ft-tooltip text="${this.tooltipText}">
+                <ft-chip>
+                    ${this.renderContent()}
+                </ft-chip>
+            </ft-tooltip>
+            ${this.hideIfEmpty()}
+        `;
+    }
+    renderContent() {
+        if (this.metadata) {
+            return html `${this.valueText}`;
+        }
+        if (this.key) {
+            return html `no value for ${this.key}`;
+        }
+        else {
+            return html `no metadata selected`;
+        }
+    }
+    hideIfEmpty() {
+        if (!this.editorMode && !this.metadata) {
+            return html `
+                <style>
+                    :host {
+                        display: none !important;
+                    }
+                </style>
+            `;
+        }
+        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}` : "";
+    }
+    updated(props) {
+        super.updated(props);
+        if (["key", "tocNode"].some(p => props.has(p))) {
+            this.updateContent();
+        }
+    }
+    onStoreAvailable() {
+        super.onStoreAvailable();
+        this.updateContent();
+    }
+    updateContent() {
+        var _a;
+        this.metadata = undefined;
+        if (this.tocNode && this.key) {
+            (_a = this.service) === null || _a === void 0 ? void 0 : _a.getTopicInfo(this.tocNode.contentId).then(topic => this.metadata = topic.metadata.find(m => m.key === this.key)).catch(() => null);
+        }
+    }
+}
+FtReaderTopicMetadata.elementDefinitions = {
+    "ft-tooltip": FtTooltip,
+    "ft-chip": FtChip,
+};
+FtReaderTopicMetadata.styles = styles;
+__decorate([
+    property()
+], FtReaderTopicMetadata.prototype, "key", void 0);
+__decorate([
+    state()
+], FtReaderTopicMetadata.prototype, "editorMode", void 0);
+__decorate([
+    state()
+], FtReaderTopicMetadata.prototype, "metadata", void 0);
+//# sourceMappingURL=ft-reader-topic-metadata.js.map