@fluid-topics/ft-reader-metadata 0.3.15

package/README.md

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

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

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

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

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

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

@@ -0,0 +1,18 @@
+import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
+import { FtReaderMetadataProperties } from "./ft-reader-metadata.properties";
+import { FtReaderComponent } from "@fluid-topics/ft-reader-context/build/registration";
+export declare class FtReaderMetadata extends FtReaderComponent implements FtReaderMetadataProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    key?: string;
+    maxLength?: number;
+    keepVisible: boolean;
+    private map?;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private renderContent;
+    private hideIfEmpty;
+    private get metadata();
+    private get valueText();
+    private get tooltipText();
+}
+//# sourceMappingURL=ft-reader-metadata.d.ts.map

package/build/ft-reader-metadata.js

@@ -0,0 +1,86 @@
+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 } from "lit/decorators.js";
+import { redux } from "@fluid-topics/ft-wc-utils";
+import { styles } from "./ft-reader-metadata.css";
+import { FtReaderComponent } from "@fluid-topics/ft-reader-context/build/registration";
+import { FtTooltip } from "@fluid-topics/ft-tooltip";
+import { FtChip } from "@fluid-topics/ft-chip";
+export class FtReaderMetadata extends FtReaderComponent {
+    constructor() {
+        super(...arguments);
+        this.keepVisible = 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.keepVisible) {
+            if (this.key) {
+                return html `no value for ${this.key}`;
+            }
+            else {
+                return html `no metadata selected`;
+            }
+        }
+        return nothing;
+    }
+    hideIfEmpty() {
+        console.log("HIDEIFEMPTY", this.key, this.metadata, this.map);
+        if (!this.keepVisible && !this.metadata) {
+            return html `
+                <style>
+                    :host {
+                        display: none !important;
+                    }
+                </style>
+            `;
+        }
+        return nothing;
+    }
+    get metadata() {
+        var _a, _b;
+        return (_b = (_a = this.map) === null || _a === void 0 ? void 0 : _a.metadata) === null || _b === void 0 ? void 0 : _b.find(m => m.key == this.key);
+    }
+    get valueText() {
+        var _a;
+        let value = ((_a = this.metadata) === null || _a === void 0 ? void 0 : _a.values.join(", ")) || "";
+        return this.maxLength ? (value === null || value === void 0 ? void 0 : value.substring(0, this.maxLength)) + "..." : value;
+    }
+    get tooltipText() {
+        return this.metadata ? `${this.key}: ${this.valueText}` : "";
+    }
+}
+FtReaderMetadata.elementDefinitions = {
+    "ft-tooltip": FtTooltip,
+    "ft-chip": FtChip,
+};
+FtReaderMetadata.styles = styles;
+__decorate([
+    property()
+], FtReaderMetadata.prototype, "key", void 0);
+__decorate([
+    property({ attribute: "max-length", type: Number })
+], FtReaderMetadata.prototype, "maxLength", void 0);
+__decorate([
+    property({ attribute: false })
+], FtReaderMetadata.prototype, "keepVisible", void 0);
+__decorate([
+    redux()
+], FtReaderMetadata.prototype, "map", void 0);
+//# sourceMappingURL=ft-reader-metadata.js.map