@fluid-topics/ft-search-breadcrumbs 1.4.1

package/README.md

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

package/build/SearchBreadcrumbsMessages.d.ts

@@ -0,0 +1,7 @@
+import { DefaultI18nMessages, I18nMessageContext, I18nMessages } from "@fluid-topics/ft-i18n/build/generator/I18nMessageContext";
+export interface SearchBreadcrumbsMessages extends I18nMessages {
+    olAriaLabel(): string;
+    menuShowMore(): string;
+}
+export declare const searchBreadcrumbsContext: I18nMessageContext<SearchBreadcrumbsMessages>;
+export declare const searchBreadcrumbsDefaultMessages: DefaultI18nMessages<SearchBreadcrumbsMessages>;

package/build/SearchBreadcrumbsMessages.js

@@ -0,0 +1,6 @@
+import { I18nMessageContext, } from "@fluid-topics/ft-i18n/build/generator/I18nMessageContext";
+export const searchBreadcrumbsContext = I18nMessageContext.build("searchBreadcrumbsComponent");
+export const searchBreadcrumbsDefaultMessages = {
+    olAriaLabel: "Breadcrumb",
+    menuShowMore: "Show more",
+};

package/build/ft-search-breadcrumbs.d.ts

@@ -0,0 +1,44 @@
+import { PropertyValues } from "lit";
+import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
+import { FtSearchBreadcrumbsProperties } from "./ft-search-breadcrumbs.properties";
+import { FtSearchResultComponent } from "@fluid-topics/ft-search-result-context/build/registration";
+import { FtSearchResultClusterEntry } from "@fluid-topics/public-api";
+interface FtSearchBreadcrumbsProperty {
+    id?: string;
+    breadcrumb: Array<string>;
+    result: FtSearchResultClusterEntry;
+}
+declare const FtSearchBreadcrumbs_base: typeof FtSearchResultComponent & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface>;
+export declare class FtSearchBreadcrumbs extends FtSearchBreadcrumbs_base implements FtSearchBreadcrumbsProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    separator: string;
+    multiline?: boolean;
+    truncate?: boolean;
+    truncateThreshold?: number;
+    truncateStartOffset?: number;
+    truncateEndOffset?: number;
+    useAsClusterSwitch: boolean;
+    goToDocumentOnSwitch: boolean;
+    private breadcrumbs;
+    private selectedBreadcrumbId?;
+    constructor();
+    get hasMultiBreadcrumbs(): boolean;
+    get selectedBreadcrumb(): FtSearchBreadcrumbsProperty | undefined;
+    protected buildArrayBreadcrumbs(): void;
+    protected willUpdate(props: PropertyValues): void;
+    protected onBreadcrumbSelected(e: CustomEvent): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private renderBreadcrumb;
+    private renderSplitBreadcrumb;
+    private renderBreadcrumbItems;
+    private renderTruncateBreadcrumb;
+    private renderBreadcrumbItem;
+    private renderSelectBreadcrumb;
+    private renderBreadcrumbMenu;
+    private onResultClick;
+    private onAuxClick;
+    private onContextMenu;
+    private renderSeparator;
+}
+export {};

package/build/ft-search-breadcrumbs.js

@@ -0,0 +1,202 @@
+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 { repeat } from "lit/directives/repeat.js";
+import { when } from "lit/directives/when.js";
+import { classMap } from "lit/directives/class-map.js";
+import { accessBreadcrumb, accessResultId, numberProperty, } from "@fluid-topics/ft-wc-utils";
+import { styles } from "./ft-search-breadcrumbs.styles";
+import { FtTypography, FtTypographyVariants, } from "@fluid-topics/ft-typography";
+import { withI18n } from "@fluid-topics/ft-i18n";
+import { searchBreadcrumbsContext, searchBreadcrumbsDefaultMessages, } from "./SearchBreadcrumbsMessages";
+import { FtRipple } from "@fluid-topics/ft-ripple";
+import { FtSearchResultComponent } from "@fluid-topics/ft-search-result-context/build/registration";
+import { FtSelect, FtSelectOption, } from "@fluid-topics/ft-select";
+import { getResultUrl } from "@fluid-topics/ft-search-result-context/build/utils";
+import { SearchResultClickEvent, SearchResultOpenContextMenuEvent, } from "@fluid-topics/ft-search-context/build/utils";
+import { splitBreadcrumbForMenu } from "@fluid-topics/ft-reader-breadcrumbs/build/helpers/FtReaderBreadcrumbsMenuHelper";
+class FtSearchBreadcrumbs extends withI18n(FtSearchResultComponent) {
+    constructor() {
+        super();
+        this.separator = ">";
+        this.useAsClusterSwitch = false;
+        this.goToDocumentOnSwitch = false;
+        this.breadcrumbs = [];
+        this.addI18nContext(searchBreadcrumbsContext, searchBreadcrumbsDefaultMessages);
+    }
+    get hasMultiBreadcrumbs() {
+        return this.breadcrumbs.length > 1 && this.useAsClusterSwitch;
+    }
+    get selectedBreadcrumb() {
+        return this.breadcrumbs.find((b) => b.id === this.selectedBreadcrumbId);
+    }
+    buildArrayBreadcrumbs() {
+        const newBreadcrumbs = [];
+        if (this.cluster) {
+            this.cluster.entries.forEach((entry) => {
+                newBreadcrumbs.push({ id: accessResultId(entry), breadcrumb: accessBreadcrumb(entry), result: entry });
+            });
+        }
+        this.breadcrumbs = newBreadcrumbs;
+        this.selectedBreadcrumbId = accessResultId(this.result);
+    }
+    willUpdate(props) {
+        super.willUpdate(props);
+        this.buildArrayBreadcrumbs();
+    }
+    onBreadcrumbSelected(e) {
+        var _a, _b;
+        e.stopPropagation();
+        this.selectedBreadcrumbId = e.detail;
+        const resultSelected = (_a = this.selectedBreadcrumb) === null || _a === void 0 ? void 0 : _a.result;
+        if (resultSelected) {
+            (_b = this.resultStateManager) === null || _b === void 0 ? void 0 : _b.selectResult(resultSelected);
+        }
+    }
+    render() {
+        return html `
+            ${when(this.hasMultiBreadcrumbs, () => this.renderSelectBreadcrumb(), () => when(this.breadcrumbs.length > 0, () => this.renderBreadcrumb(this.breadcrumbs[0])))}
+        `;
+    }
+    renderBreadcrumb(breadcrumb, slot) {
+        const cssClasses = {
+            "ft-search-breadcrumbs": true,
+            "multiline": !!this.multiline,
+        };
+        return html `
+            <ol slot="${slot}" part="breadcrumb-list" class="${classMap(cssClasses)}" aria-label="${searchBreadcrumbsContext.messages.olAriaLabel()}">
+                ${this.renderSplitBreadcrumb(breadcrumb)}
+            </ol>`;
+    }
+    renderSplitBreadcrumb(breadcrumbs) {
+        var _a;
+        if (!this.truncate || breadcrumbs.breadcrumb.length < ((_a = this.truncateThreshold) !== null && _a !== void 0 ? _a : 0)) {
+            return this.renderBreadcrumbItems(breadcrumbs.breadcrumb);
+        }
+        const splitBreadcrumbs = splitBreadcrumbForMenu(breadcrumbs.breadcrumb, this.truncateStartOffset, this.truncateEndOffset);
+        return html `
+            ${this.renderBreadcrumbItems(splitBreadcrumbs.beforeMenu)}
+            ${splitBreadcrumbs.beforeMenu.length > 0 ? this.renderSeparator() : nothing}
+            ${when(splitBreadcrumbs.inMenu.length > 0, () => this.renderTruncateBreadcrumb())}
+            ${this.renderBreadcrumbItems(splitBreadcrumbs.afterMenu)}`;
+    }
+    renderBreadcrumbItems(breadcrumbItems) {
+        return repeat(breadcrumbItems, (breadcrumbItem, index) => {
+            const isLastElement = index === breadcrumbItems.length - 1;
+            return html `
+                    ${this.renderBreadcrumbItem(breadcrumbItem, breadcrumbItem, isLastElement)}
+                    ${isLastElement ? nothing : this.renderSeparator()}`;
+        });
+    }
+    renderTruncateBreadcrumb() {
+        return html `
+            ${this.renderBreadcrumbItem("...", undefined)}
+            ${this.renderSeparator()}`;
+    }
+    renderBreadcrumbItem(item, title, isCurrent = false) {
+        return html `
+            <li>
+                <ft-typography
+                    title="${title}"
+                    part="${isCurrent ? "breadcrumb-current-item" : "breadcrumb-label"}"
+                    variant="${FtTypographyVariants.body2}"
+                    ?aria-current=${isCurrent ? "page" : undefined}>
+                    ${item}
+                </ft-typography>
+            </li>`;
+    }
+    renderSelectBreadcrumb() {
+        var _a;
+        const selectedBreadcrumb = (_a = this.selectedBreadcrumb) !== null && _a !== void 0 ? _a : this.breadcrumbs[0];
+        return html `
+            <ft-select
+                outlined
+                @change=${this.onBreadcrumbSelected}
+            >
+                ${this.renderBreadcrumb(selectedBreadcrumb, "input-value")}
+                ${repeat(this.breadcrumbs, (item) => item.id, (item) => this.renderBreadcrumbMenu(item))}
+            </ft-select>`;
+    }
+    renderBreadcrumbMenu(item) {
+        if (this.selectedBreadcrumbId === item.id) {
+            return nothing;
+        }
+        return when(this.goToDocumentOnSwitch, () => html `
+                <a href="${getResultUrl(item.result)}" @click=${() => this.onResultClick(item.result)}
+                   @auxclick=${(e) => this.onAuxClick(e, item.result)}
+                   @contextmenu=${() => this.onContextMenu(item.result)}>
+                    ${this.renderBreadcrumb(item)}
+                </a>`, () => {
+            var _a;
+            return html `
+                <ft-select-option
+                    value="${(_a = item.id) !== null && _a !== void 0 ? _a : "ft:no_value"}"
+                >
+                    ${this.renderBreadcrumb(item)}
+                </ft-select-option>
+            `;
+        });
+    }
+    onResultClick(result) {
+        this.dispatchEvent(new SearchResultClickEvent(result, this.rank));
+    }
+    onAuxClick(e, result) {
+        if (e.button == 1) {
+            this.onResultClick(result);
+        }
+    }
+    onContextMenu(result) {
+        this.dispatchEvent(new SearchResultOpenContextMenuEvent(result, this.rank));
+    }
+    renderSeparator() {
+        return html `
+            <li part="breadcrumb-separator" class="separator" aria-hidden="true">
+                <ft-typography element="span" variant="${FtTypographyVariants.body2}">
+                    ${this.separator}
+                </ft-typography>
+            </li>`;
+    }
+}
+FtSearchBreadcrumbs.elementDefinitions = {
+    "ft-typography": FtTypography,
+    "ft-ripple": FtRipple,
+    "ft-select": FtSelect,
+    "ft-select-option": FtSelectOption,
+};
+FtSearchBreadcrumbs.styles = styles;
+__decorate([
+    property()
+], FtSearchBreadcrumbs.prototype, "separator", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtSearchBreadcrumbs.prototype, "multiline", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtSearchBreadcrumbs.prototype, "truncate", void 0);
+__decorate([
+    numberProperty()
+], FtSearchBreadcrumbs.prototype, "truncateThreshold", void 0);
+__decorate([
+    numberProperty()
+], FtSearchBreadcrumbs.prototype, "truncateStartOffset", void 0);
+__decorate([
+    numberProperty()
+], FtSearchBreadcrumbs.prototype, "truncateEndOffset", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtSearchBreadcrumbs.prototype, "useAsClusterSwitch", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtSearchBreadcrumbs.prototype, "goToDocumentOnSwitch", void 0);
+__decorate([
+    state()
+], FtSearchBreadcrumbs.prototype, "breadcrumbs", void 0);
+__decorate([
+    state()
+], FtSearchBreadcrumbs.prototype, "selectedBreadcrumbId", void 0);
+export { FtSearchBreadcrumbs };