@fluid-topics/ft-reader-search-in-document 1.1.1

package/README.md

@@ -0,0 +1,19 @@
+A search component to retreive occurences in documents
+
+## Install
+
+```shell
+npm install @fluid-topics/ft-reader-search-in-document
+yarn add @fluid-topics/ft-reader-search-in-document
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ft-reader-search-in-document"
+
+function render() {
+    return html` <ft-search-in-doc foo="bar"></ft-search-in-doc> `
+}
+```

package/build/ft-reader-search-in-document.css.d.ts

@@ -0,0 +1,18 @@
+export declare const FtReaderSearchInDocumentCssVariables: {
+    searchFieldBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    searchFieldBorderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    searchFieldTextColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    searchFieldBorderRadius: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    resultsNumberColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    resultBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    resultBorderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    resultBorderRadius: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    resultTitleTextColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    resultBreadcrumbTextColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    resultContentTextColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    resultHighlightBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    resultHoverBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    resultHoverBorderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+};
+export declare const styles: import("lit").CSSResult;
+export declare const resultStyles: import("lit").CSSResult;

package/build/ft-reader-search-in-document.css.js

@@ -0,0 +1,89 @@
+import { css } from "lit";
+import { designSystemVariables, FtCssVariableFactory, setVariable } from "@fluid-topics/ft-wc-utils";
+import { FtCardCssVariables } from "@fluid-topics/ft-card/build/ft-card.css";
+import { FtSearchInputCssVariables } from "@fluid-topics/ft-search-input/build/ft-search-input.css";
+import { FtSearchResultAbstractCssVariables } from "@fluid-topics/ft-search-result-abstract/build/ft-search-result-abstract.css";
+import { FtRippleCssVariables } from "@fluid-topics/ft-ripple/build/ft-ripple.css";
+import { FtSearchResultTitleCssVariables } from "@fluid-topics/ft-search-result-title/build/ft-search-result-title.css";
+export const FtReaderSearchInDocumentCssVariables = {
+    searchFieldBackgroundColor: FtCssVariableFactory.extend("--ft-rsid-search-field-background-color", "", designSystemVariables.colorSurface),
+    searchFieldBorderColor: FtCssVariableFactory.extend("--ft-rsid-search-field-border-color", "", designSystemVariables.colorOutline),
+    searchFieldTextColor: FtCssVariableFactory.extend("--ft-rsid-search-field-text-color", "", designSystemVariables.colorOnSurface),
+    searchFieldBorderRadius: FtCssVariableFactory.extend("--ft-rsid-search-field-border-radius", "", designSystemVariables.borderRadiusS),
+    resultsNumberColor: FtCssVariableFactory.extend("--ft-rsid-results-number-color", "", designSystemVariables.colorOnSurfaceMedium),
+    resultBackgroundColor: FtCssVariableFactory.extend("--ft-rsid-result-background-color", "", designSystemVariables.colorSurface),
+    resultBorderColor: FtCssVariableFactory.extend("--ft-rsid-result-border-color", "", designSystemVariables.colorOutline),
+    resultBorderRadius: FtCssVariableFactory.extend("--ft-rsid-result-border-radius", "", designSystemVariables.borderRadiusS),
+    resultTitleTextColor: FtCssVariableFactory.extend("--ft-rsid-result-title-text-color", "", designSystemVariables.colorOnSurface),
+    resultBreadcrumbTextColor: FtCssVariableFactory.extend("--ft-rsid-result-breadcrumb-text-color", "", designSystemVariables.colorOnSurfaceMedium),
+    resultContentTextColor: FtCssVariableFactory.extend("--ft-rsid-result-content-text-color", "", designSystemVariables.colorOnSurface),
+    resultHighlightBackgroundColor: FtCssVariableFactory.create("--ft-rsid-result-highlight-background-color", "", "COLOR", "#FFF26E"),
+    resultHoverBackgroundColor: FtCssVariableFactory.extend("--ft-rsid-result-hover-background-color", "", designSystemVariables.colorPrimary),
+    resultHoverBorderColor: FtCssVariableFactory.extend("--ft-rsid-result-hover-border-color", "", designSystemVariables.colorPrimary),
+};
+// language=CSS
+export const styles = css `
+    .ft-search-in-doc--container {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    ft-search-input {
+        ${setVariable(FtSearchInputCssVariables.colorSurface, FtReaderSearchInDocumentCssVariables.searchFieldBackgroundColor)};
+        ${setVariable(FtSearchInputCssVariables.colorOutline, FtReaderSearchInDocumentCssVariables.searchFieldBorderColor)};
+        ${setVariable(FtSearchInputCssVariables.colorOnSurface, FtReaderSearchInDocumentCssVariables.searchFieldTextColor)};
+        ${setVariable(FtSearchInputCssVariables.borderRadius, FtReaderSearchInDocumentCssVariables.searchFieldBorderRadius)};
+    }
+
+    ft-search-results-number {
+        margin-left: 12px;
+    }
+
+    ft-search-results-number, ft-search-results::part(no-results-message) {
+        color: ${FtReaderSearchInDocumentCssVariables.resultsNumberColor};
+    }
+
+    ft-search-load-more-button {
+        margin: auto;
+    }
+`;
+// language=CSS
+export const resultStyles = css `
+    ft-card {
+        margin-bottom: 8px;
+        ${setVariable(FtCardCssVariables.elevation04, "none")};
+        ${setVariable(FtCardCssVariables.elevation02, "none")};
+        ${setVariable(FtCardCssVariables.borderStyle, "solid")};
+        ${setVariable(FtCardCssVariables.borderRadius, designSystemVariables.borderRadiusS)};
+        ${setVariable(FtCardCssVariables.colorSurface, FtReaderSearchInDocumentCssVariables.resultBackgroundColor)};
+        ${setVariable(FtCardCssVariables.borderColor, FtReaderSearchInDocumentCssVariables.resultBorderColor)};
+        ${setVariable(FtCardCssVariables.borderRadius, FtReaderSearchInDocumentCssVariables.resultBorderRadius)};
+    }
+
+    ft-search-result-title {
+        color: ${FtReaderSearchInDocumentCssVariables.resultTitleTextColor};
+        ${setVariable(FtSearchResultTitleCssVariables.highlightBackgroundColor, FtReaderSearchInDocumentCssVariables.resultHighlightBackgroundColor)};
+    }
+
+    .breadcrumb {
+        color: ${FtReaderSearchInDocumentCssVariables.resultBreadcrumbTextColor};
+    }
+
+    ft-search-result-abstract {
+        color: ${FtReaderSearchInDocumentCssVariables.resultContentTextColor};
+        ${setVariable(FtSearchResultAbstractCssVariables.highlightBackgroundColor, FtReaderSearchInDocumentCssVariables.resultHighlightBackgroundColor)};
+    }
+
+    ft-card:hover {
+        ${setVariable(FtCardCssVariables.hoverBorderColor, FtReaderSearchInDocumentCssVariables.resultHoverBorderColor)};
+        ${setVariable(FtRippleCssVariables.color, FtReaderSearchInDocumentCssVariables.resultHoverBackgroundColor)};
+    }
+
+    .result-container {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+    }
+
+`;

package/build/ft-reader-search-in-document.d.ts

@@ -0,0 +1,26 @@
+import { nothing, PropertyValues, TemplateResult } from "lit";
+import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
+import { FtReaderSearchInDocumentProperties } from "./ft-reader-search-in-document.properties";
+import { FtReaderComponent } from "@fluid-topics/ft-reader-context/build/registration";
+import { FtMap } from "@fluid-topics/public-api";
+import "@fluid-topics/ft-card";
+import "@fluid-topics/ft-search-result-title";
+import "@fluid-topics/ft-search-result-abstract";
+declare const FtReaderSearchInDocument_base: typeof FtReaderComponent & (new (...args: any[]) => import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface);
+export declare class FtReaderSearchInDocument extends FtReaderSearchInDocument_base implements FtReaderSearchInDocumentProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    map?: FtMap;
+    private searchContext?;
+    private searchResults?;
+    private hideResultTitle;
+    private hideResultBreadcrumb;
+    private hideResultAbstract;
+    private hideResultsNumber;
+    private uniqueId;
+    private get filters();
+    private renderResult;
+    protected render(): typeof nothing | TemplateResult<1>;
+    protected update(props: PropertyValues): void;
+}
+export {};

package/build/ft-reader-search-in-document.js

@@ -0,0 +1,124 @@
+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 { redux } from "@fluid-topics/ft-wc-utils";
+import { resultStyles, styles } from "./ft-reader-search-in-document.css";
+import { FtButton } from "@fluid-topics/ft-button";
+import { FtTypography } from "@fluid-topics/ft-typography";
+import { withI18n } from "@fluid-topics/ft-i18n";
+import { FtSearchContext } from "@fluid-topics/ft-search-context";
+import { FtReaderComponent } from "@fluid-topics/ft-reader-context/build/registration";
+import { FtSearchResultsNumber } from "@fluid-topics/ft-search-results-number";
+import { FtSearchInput } from "@fluid-topics/ft-search-input";
+import { FtSearchResults } from "@fluid-topics/ft-search-results";
+import "@fluid-topics/ft-card";
+import "@fluid-topics/ft-search-result-title";
+import "@fluid-topics/ft-search-result-abstract";
+import { property, query } from "lit/decorators.js";
+import { FtSearchLoadMoreButton } from "@fluid-topics/ft-search-load-more-button";
+class FtReaderSearchInDocument extends withI18n(FtReaderComponent) {
+    constructor() {
+        super(...arguments);
+        this.hideResultTitle = false;
+        this.hideResultBreadcrumb = false;
+        this.hideResultAbstract = false;
+        this.hideResultsNumber = false;
+        this.uniqueId = "search-in-document-" + ("" + Math.round(Math.random() * 999000)).padStart(6, "0");
+    }
+    get filters() {
+        return [
+            {
+                negative: false,
+                key: "ft:publicationId",
+                values: [this.map.id]
+            }
+        ];
+    }
+    renderResult(result) {
+        var _a;
+        return html `
+            <style> ${resultStyles}</style>
+            <ft-card clickable noheader>
+                <div class="result-container">
+                    ${this.hideResultTitle ? nothing : html `
+                        <ft-search-result-title></ft-search-result-title>`}
+                    ${this.hideResultBreadcrumb ? nothing : html `
+                        <ft-typography class="breadcrumb" variant="caption">${(_a = result.topic) === null || _a === void 0 ? void 0 : _a.breadcrumb.join(" > ")}</ft-typography>
+                    `}
+                    ${this.hideResultAbstract ? nothing : html `
+                        <ft-search-result-abstract></ft-search-result-abstract>
+                    `}
+                </div>
+            </ft-card>
+        `;
+    }
+    render() {
+        if (!this.map) {
+            return nothing;
+        }
+        return html `
+            <ft-search-context id="${this.uniqueId}"
+                               contentLocale="${this.map.lang}"
+                               .filters=${this.filters}
+                               scope="ALL_TOPICS"
+                               ignoreEmptyQuery>
+                <div class="ft-search-in-doc--container">
+                    <ft-search-input></ft-search-input>
+                    ${this.hideResultsNumber ? nothing : html `
+                        <ft-search-results-number></ft-search-results-number>
+                    `}
+                    <ft-search-results ?displayNoResultsMessage=${this.hideResultsNumber}
+                                       .renderResult=${(result) => this.renderResult(result)}></ft-search-results>
+                    <slot name="load-more">
+                        <ft-search-load-more-button></ft-search-load-more-button>
+                    </slot>
+                </div>
+            </ft-search-context>
+        `;
+    }
+    update(props) {
+        super.update(props);
+        if (props.has("map") && this.searchContext) {
+            this.searchContext.clear();
+        }
+        if (["hideResultTitle", "hideResultBreadcrumb", "hideResultAbstract"].some(p => props.has(p)) && this.searchResults) {
+            this.searchResults.requestUpdate();
+        }
+    }
+}
+FtReaderSearchInDocument.elementDefinitions = {
+    "ft-button": FtButton,
+    "ft-typography": FtTypography,
+    "ft-search-context": FtSearchContext,
+    "ft-search-input": FtSearchInput,
+    "ft-search-results-number": FtSearchResultsNumber,
+    "ft-search-results": FtSearchResults,
+    "ft-search-load-more-button": FtSearchLoadMoreButton
+};
+FtReaderSearchInDocument.styles = styles;
+__decorate([
+    redux()
+], FtReaderSearchInDocument.prototype, "map", void 0);
+__decorate([
+    query("ft-search-context")
+], FtReaderSearchInDocument.prototype, "searchContext", void 0);
+__decorate([
+    query("ft-search-results")
+], FtReaderSearchInDocument.prototype, "searchResults", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtReaderSearchInDocument.prototype, "hideResultTitle", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtReaderSearchInDocument.prototype, "hideResultBreadcrumb", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtReaderSearchInDocument.prototype, "hideResultAbstract", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtReaderSearchInDocument.prototype, "hideResultsNumber", void 0);
+export { FtReaderSearchInDocument };