@fluid-topics/ft-search-result-metadata 0.3.62

package/README.md

@@ -0,0 +1,21 @@
+Search result metadata for integrated search component
+
+## Install
+
+```shell
+npm install @fluid-topics/ft-search-result-metadata
+yarn add @fluid-topics/ft-search-result-metadata
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ft-search-result-metadata"
+
+function render() {
+    return html`<ft-search-result-context>
+                    <ft-search-result-metadata key="author"></ft-search-result-metadata>
+                </ft-search-result-context>`
+}
+```

package/build/SearchResultMetadataMessages.d.ts

@@ -0,0 +1,7 @@
+import { I18nMessageContext, I18nMessages } from "@fluid-topics/ft-i18n";
+export interface SearchResultMetadataMessages extends I18nMessages {
+    noKeySelected(): string;
+    noValuePresent(key: string): string;
+}
+export declare const searchResultMetadataContext: I18nMessageContext<SearchResultMetadataMessages>;
+//# sourceMappingURL=SearchResultMetadataMessages.d.ts.map

package/build/SearchResultMetadataMessages.js

@@ -0,0 +1,3 @@
+import { I18nMessageContext } from "@fluid-topics/ft-i18n";
+export const searchResultMetadataContext = I18nMessageContext.build("designedSearchResultMetadata");
+//# sourceMappingURL=SearchResultMetadataMessages.js.map

package/build/ft-search-result-metadata.css.d.ts

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

package/build/ft-search-result-metadata.css.js

@@ -0,0 +1,6 @@
+import { css } from "lit";
+export const FtSearchResultMetadataCssVariables = {};
+// language=CSS
+export const styles = css `
+`;
+//# sourceMappingURL=ft-search-result-metadata.css.js.map

package/build/ft-search-result-metadata.d.ts

@@ -0,0 +1,27 @@
+import { PropertyValues } from "lit";
+import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
+import { FtSearchResultMetadataProperties } from "./ft-search-result-metadata.properties";
+import { FtSearchResultComponent } from "@fluid-topics/ft-search-result-context/build/registration";
+declare const FtSearchResultMetadata_base: typeof FtSearchResultComponent & (new (...args: any[]) => import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface);
+export declare class FtSearchResultMetadata extends FtSearchResultMetadata_base implements FtSearchResultMetadataProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    key?: string;
+    useChip?: boolean;
+    /**
+     * @deprecated Use CSS
+     */
+    maxLength?: number;
+    private editorMode;
+    private metadata?;
+    constructor();
+    protected render(): import("lit-html").TemplateResult<1>;
+    private renderContent;
+    private getEllipsis;
+    protected updated(props: PropertyValues): void;
+    private selectMetadata;
+    private get valueText();
+    private get tooltipText();
+}
+export {};
+//# sourceMappingURL=ft-search-result-metadata.d.ts.map

package/build/ft-search-result-metadata.js

@@ -0,0 +1,107 @@
+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 } from "lit";
+import { property, state } from "lit/decorators.js";
+import { redux } from "@fluid-topics/ft-wc-utils";
+import { styles } from "./ft-search-result-metadata.css";
+import { FtSearchResultComponent } from "@fluid-topics/ft-search-result-context/build/registration";
+import { ftAppInfoStore } from "@fluid-topics/ft-app-context";
+import { withI18n } from "@fluid-topics/ft-i18n";
+import { searchResultMetadataContext } from "./SearchResultMetadataMessages";
+import { FtTooltip } from "@fluid-topics/ft-tooltip";
+import { FtChip } from "@fluid-topics/ft-chip";
+export class FtSearchResultMetadata extends withI18n(FtSearchResultComponent) {
+    constructor() {
+        super();
+        this.useChip = false;
+        this.editorMode = false;
+        this.addStore(ftAppInfoStore);
+        this.addI18nContext(searchResultMetadataContext);
+    }
+    render() {
+        if (this.useChip) {
+            return html `
+                <ft-tooltip text="${this.tooltipText}">
+                    <ft-chip>${this.renderContent()}</ft-chip>
+                </ft-tooltip>
+            `;
+        }
+        else {
+            return html `${this.renderContent()}`;
+        }
+    }
+    renderContent() {
+        if (this.metadata) {
+            return html `${this.getEllipsis(this.valueText)}`;
+        }
+        if (this.editorMode) {
+            if (this.key) {
+                return html `${searchResultMetadataContext.messages.noValuePresent(this.key)}`;
+            }
+            else {
+                return html `${searchResultMetadataContext.messages.noKeySelected()}`;
+            }
+        }
+        return html `
+            <style>
+                :host {
+                    display: none !important;
+                }
+            </style>
+        `;
+    }
+    getEllipsis(text) {
+        let cutText = this.maxLength ? text.substring(0, this.maxLength) : text;
+        return cutText + (cutText.length < text.length ? "..." : "");
+    }
+    updated(props) {
+        super.updated(props);
+        if (props.has("result") && this.result) {
+            this.metadata = this.selectMetadata(this.result);
+        }
+    }
+    selectMetadata(result) {
+        switch (result.type) {
+            case "MAP":
+                return result.map.metadata.find(m => m.key == this.key);
+            case "DOCUMENT":
+                return result.document.metadata.find(m => m.key == this.key);
+            case "TOPIC":
+                return result.topic.metadata.find(m => m.key == this.key);
+        }
+        return undefined;
+    }
+    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}` : "";
+    }
+}
+FtSearchResultMetadata.elementDefinitions = {
+    "ft-tooltip": FtTooltip,
+    "ft-chip": FtChip,
+};
+FtSearchResultMetadata.styles = styles;
+__decorate([
+    property()
+], FtSearchResultMetadata.prototype, "key", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtSearchResultMetadata.prototype, "useChip", void 0);
+__decorate([
+    property({ type: Number, attribute: "max-length" })
+], FtSearchResultMetadata.prototype, "maxLength", void 0);
+__decorate([
+    redux({ store: ftAppInfoStore.name })
+], FtSearchResultMetadata.prototype, "editorMode", void 0);
+__decorate([
+    state()
+], FtSearchResultMetadata.prototype, "metadata", void 0);
+//# sourceMappingURL=ft-search-result-metadata.js.map