@fluid-topics/ft-reader-breadcrumbs 1.3.12

package/README.md

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

package/build/ReaderBreadcrumbsMessage.d.ts

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

package/build/ReaderBreadcrumbsMessage.js

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

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

@@ -0,0 +1,30 @@
+import { PropertyValues } from "lit";
+import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
+import { FtReaderBreadcrumbsProperties } from "./ft-reader-breadcrumbs.properties";
+import { FtReaderComponent } from "@fluid-topics/ft-reader-context/build/registration";
+declare const FtReaderBreadcrumbs_base: typeof FtReaderComponent & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface>;
+export declare class FtReaderBreadcrumbs extends FtReaderBreadcrumbs_base implements FtReaderBreadcrumbsProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    separator: string;
+    displayMapTitle?: boolean;
+    multiline?: boolean;
+    useFloatingMenu?: boolean;
+    floatingMenuThreshold?: number;
+    floatingMenuStartOffset?: number;
+    floatingMenuEndOffset?: number;
+    private tocId?;
+    private mapTitle?;
+    private breadcrumb;
+    private ftFloatingMenu?;
+    constructor();
+    protected willUpdate(props: PropertyValues): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private renderBreadcrumbs;
+    private renderBreadcrumbArray;
+    private renderFloatingMenu;
+    private renderSeparator;
+    private renderBreadcrumbLink;
+    private renderBreadcrumbCurrentItem;
+}
+export {};

package/build/ft-reader-breadcrumbs.js

@@ -0,0 +1,171 @@
+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, query, 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 { redux } from "@fluid-topics/ft-wc-utils";
+import { styles } from "./ft-reader-breadcrumbs.styles";
+import { FtReaderComponent } from "@fluid-topics/ft-reader-context/build/registration";
+import { FtReaderInternalLink } from "@fluid-topics/ft-reader-internal-link";
+import { FtTypography, FtTypographyVariants } from "@fluid-topics/ft-typography";
+import { splitBreadcrumbForMenu } from "./helpers/FtReaderBreadcrumbsMenuHelper";
+import { FtFloatingMenu, FtFloatingMenuItem } from "@fluid-topics/ft-floating-menu";
+import { withI18n } from "@fluid-topics/ft-i18n";
+import { readerBreadcrumbsContext, readerBreadcrumbsDefaultMessages } from "./ReaderBreadcrumbsMessage";
+import { FtRipple } from "@fluid-topics/ft-ripple";
+class FtReaderBreadcrumbs extends withI18n(FtReaderComponent) {
+    constructor() {
+        super();
+        this.separator = ">";
+        this.breadcrumb = [];
+        this.addI18nContext(readerBreadcrumbsContext, readerBreadcrumbsDefaultMessages);
+    }
+    willUpdate(props) {
+        var _a, _b, _c;
+        super.willUpdate(props);
+        if (props.has("tocId") && this.tocId !== undefined) {
+            this.breadcrumb = (_b = (_a = this.service) === null || _a === void 0 ? void 0 : _a.buildBreadcrumb(this.tocId)) !== null && _b !== void 0 ? _b : [];
+        }
+        if (props.has("breadcrumb")) {
+            (_c = this.ftFloatingMenu) === null || _c === void 0 ? void 0 : _c.closeMenu();
+        }
+    }
+    render() {
+        let breadcrumbs = this.breadcrumb;
+        if (this.displayMapTitle) {
+            breadcrumbs = [{ title: this.mapTitle, tocId: "root" }, ...this.breadcrumb];
+        }
+        const cssClasses = {
+            "ft-reader-breadcrumbs": true,
+            "multiline": !!this.multiline,
+        };
+        return html `
+            <nav part="breadcrumb-nav" class="${classMap(cssClasses)}" aria-label="${readerBreadcrumbsContext.messages.navAriaLabel()}">
+                <ol part="breadcrumb-list">
+                    ${this.renderBreadcrumbs(breadcrumbs)}
+                </ol>
+            </nav>
+        `;
+    }
+    renderBreadcrumbs(breadcrumbs) {
+        var _a;
+        if (!this.useFloatingMenu || breadcrumbs.length < ((_a = this.floatingMenuThreshold) !== null && _a !== void 0 ? _a : 0)) {
+            return this.renderBreadcrumbArray(breadcrumbs, true);
+        }
+        const splitBreadcrumbs = splitBreadcrumbForMenu(breadcrumbs, this.floatingMenuStartOffset, this.floatingMenuEndOffset);
+        return html `
+            ${this.renderBreadcrumbArray(splitBreadcrumbs.beforeMenu, false)}
+            ${splitBreadcrumbs.beforeMenu.length > 0 ? this.renderSeparator() : nothing}
+            ${this.renderFloatingMenu(splitBreadcrumbs.inMenu)}
+            ${this.renderBreadcrumbArray(splitBreadcrumbs.afterMenu, true)}`;
+    }
+    renderBreadcrumbArray(breadcrumbs, displayLastElementAsCurrent) {
+        return repeat(breadcrumbs, (breadcrumb) => breadcrumb.tocId, (breadcrumb, index) => {
+            const isLastElement = index === breadcrumbs.length - 1;
+            return html `
+                    <li>
+                        ${when(isLastElement && displayLastElementAsCurrent, () => this.renderBreadcrumbCurrentItem(breadcrumb), () => this.renderBreadcrumbLink(breadcrumb))}
+                    </li>
+                    ${isLastElement ? nothing : this.renderSeparator()}`;
+        });
+    }
+    renderFloatingMenu(breadcrumbs) {
+        if (breadcrumbs.length === 0) {
+            return nothing;
+        }
+        return html `
+            <li class="menu">
+                <ft-floating-menu icon="" text="..." label="${readerBreadcrumbsContext.messages.menuShowMore()}">
+                    ${repeat(breadcrumbs, (breadcrumb) => html `
+                                <div class="menu-item">
+                                    <ft-ripple></ft-ripple>
+                                    ${this.renderBreadcrumbLink(breadcrumb)}
+                                </div>`)}
+                </ft-floating-menu>
+            </li>
+            ${this.renderSeparator()}`;
+    }
+    renderSeparator() {
+        return html `
+            <li part="breadcrumb-separator" class="separator" aria-hidden="true">
+                <ft-typography element="span" variant="${FtTypographyVariants.body2}">
+                    ${this.separator}
+                </ft-typography>
+            </li>`;
+    }
+    renderBreadcrumbLink(breadcrumb) {
+        return html `
+            <ft-reader-internal-link part="breadcrumb-link"
+                                     tocId="${breadcrumb.tocId}"
+                                     removeStyle>
+                <ft-typography title="${breadcrumb.title}" part="breadcrumb-link-label" variant="${FtTypographyVariants.body2}">
+                    ${breadcrumb.title}
+                </ft-typography>
+            </ft-reader-internal-link>
+        `;
+    }
+    renderBreadcrumbCurrentItem(breadcrumb) {
+        return html `
+            <ft-typography
+                title="${breadcrumb.title}"
+                part="breadcrumb-current-item"
+                variant="${FtTypographyVariants.body2}"
+                aria-current="page">
+                ${breadcrumb.title}
+            </ft-typography>`;
+    }
+}
+FtReaderBreadcrumbs.elementDefinitions = {
+    "ft-typography": FtTypography,
+    "ft-reader-internal-link": FtReaderInternalLink,
+    "ft-floating-menu": FtFloatingMenu,
+    "ft-floating-menu-item": FtFloatingMenuItem,
+    "ft-ripple": FtRipple,
+};
+FtReaderBreadcrumbs.styles = styles;
+__decorate([
+    property()
+], FtReaderBreadcrumbs.prototype, "separator", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtReaderBreadcrumbs.prototype, "displayMapTitle", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtReaderBreadcrumbs.prototype, "multiline", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtReaderBreadcrumbs.prototype, "useFloatingMenu", void 0);
+__decorate([
+    property({ type: Number })
+], FtReaderBreadcrumbs.prototype, "floatingMenuThreshold", void 0);
+__decorate([
+    property({ type: Number })
+], FtReaderBreadcrumbs.prototype, "floatingMenuStartOffset", void 0);
+__decorate([
+    property({ type: Number })
+], FtReaderBreadcrumbs.prototype, "floatingMenuEndOffset", void 0);
+__decorate([
+    redux({
+        store: "reader",
+        selector: (state) => state.visibleTopics[0],
+    })
+], FtReaderBreadcrumbs.prototype, "tocId", void 0);
+__decorate([
+    redux({
+        store: "reader",
+        selector: (state) => { var _a; return (_a = state.map) === null || _a === void 0 ? void 0 : _a.title; },
+    })
+], FtReaderBreadcrumbs.prototype, "mapTitle", void 0);
+__decorate([
+    state()
+], FtReaderBreadcrumbs.prototype, "breadcrumb", void 0);
+__decorate([
+    query("ft-floating-menu")
+], FtReaderBreadcrumbs.prototype, "ftFloatingMenu", void 0);
+export { FtReaderBreadcrumbs };