@fluid-topics/ft-reader-navigation-button 0.3.17

package/README.md

@@ -0,0 +1,20 @@
+Button used to navigate between pages in an integrated reader context.
+
+
+## Install
+
+```shell
+npm install @fluid-topics/ft-reader-navigation-button
+yarn add @fluid-topics/ft-reader-navigation-button
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ft-reader-navigation-button"
+
+function render() {
+    return html` <ft-reader-navigation-button foo="bar"></ft-reader-navigation-button> `
+}
+```

package/build/ft-reader-navigation-button.css.d.ts

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

package/build/ft-reader-navigation-button.css.js

@@ -0,0 +1,6 @@
+import { css } from "lit";
+export const FtReaderNavigationButtonCssVariables = {};
+// language=CSS
+export const styles = css `
+`;
+//# sourceMappingURL=ft-reader-navigation-button.css.js.map

package/build/ft-reader-navigation-button.d.ts

@@ -0,0 +1,27 @@
+import { nothing, PropertyValues } from "lit";
+import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
+import { FtReaderNavigationButtonProperties, FtReaderNavigationTarget } from "./ft-reader-navigation-button.properties";
+import { Position } from "@fluid-topics/ft-tooltip";
+import { FtReaderComponent } from "@fluid-topics/ft-reader-context/build/registration";
+import { FtIconVariants } from "@fluid-topics/ft-icon";
+export declare class FtReaderNavigationButton extends FtReaderComponent implements FtReaderNavigationButtonProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    target: FtReaderNavigationTarget;
+    content?: string;
+    tooltipPosition?: Position;
+    hideTooltip: boolean;
+    iconVariant?: FtIconVariants;
+    icon?: string;
+    trailingIcon: boolean;
+    keepVisible: boolean;
+    private currentPage?;
+    private targetPage?;
+    get isReady(): boolean;
+    private get defaultContent();
+    private get defaultIcon();
+    protected render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    protected update(props: PropertyValues): void;
+    private updateTarget;
+}
+//# sourceMappingURL=ft-reader-navigation-button.d.ts.map

package/build/ft-reader-navigation-button.js

@@ -0,0 +1,110 @@
+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 { redux } from "@fluid-topics/ft-wc-utils";
+import { styles } from "./ft-reader-navigation-button.css";
+import { FtButton } from "@fluid-topics/ft-button";
+import { FtReaderInternalLink } from "@fluid-topics/ft-reader-internal-link";
+import { FtReaderComponent } from "@fluid-topics/ft-reader-context/build/registration";
+import { FtIcons, FtIconVariants } from "@fluid-topics/ft-icon";
+export class FtReaderNavigationButton extends FtReaderComponent {
+    constructor() {
+        super(...arguments);
+        this.target = "next";
+        this.tooltipPosition = "bottom";
+        this.hideTooltip = false;
+        this.iconVariant = FtIconVariants.fluid_topics;
+        this.trailingIcon = false;
+        this.keepVisible = false;
+    }
+    get isReady() {
+        return this.currentPage != null;
+    }
+    get defaultContent() {
+        return this.target.substring(0, 1).toUpperCase() + this.target.substring(1);
+    }
+    get defaultIcon() {
+        return this.target === "next" ? FtIcons.THIN_ARROW_RIGHT : FtIcons.THIN_ARROW_LEFT;
+    }
+    render() {
+        var _a, _b, _c, _d, _e;
+        if (this.targetPage == null && !this.keepVisible) {
+            return nothing;
+        }
+        return html `
+            <ft-reader-internal-link .tocId=${(_a = this.targetPage) === null || _a === void 0 ? void 0 : _a.rootTocId}>
+                <ft-button ?forceTooltip=${!this.hideTooltip} 
+                           ?hideTooltip=${this.hideTooltip}
+                           ?trailingIcon=${this.trailingIcon}
+                           .label=${(_c = (_b = this.targetPage) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : ""}
+                           .tooltipPosition=${this.tooltipPosition}
+                           .iconVariant=${this.iconVariant}
+                           .icon=${(_d = this.icon) !== null && _d !== void 0 ? _d : this.defaultIcon}>
+                    ${(_e = this.content) !== null && _e !== void 0 ? _e : this.defaultContent}
+                </ft-button>
+            </ft-reader-internal-link>
+        `;
+    }
+    update(props) {
+        super.update(props);
+        if (props.has("currentPage")) {
+            this.updateTarget();
+        }
+    }
+    async updateTarget() {
+        var _a, _b;
+        if (this.currentPage) {
+            const targetPageNumber = this.currentPage.number + (this.target === "next" ? 1 : -1);
+            this.targetPage = await ((_a = this.service) === null || _a === void 0 ? void 0 : _a.getPage(targetPageNumber));
+            if (((_b = this.targetPage) === null || _b === void 0 ? void 0 : _b.number) !== targetPageNumber) {
+                this.targetPage = undefined;
+            }
+        }
+        else {
+            this.targetPage = undefined;
+        }
+    }
+}
+// Uncomment to use scoped web components
+FtReaderNavigationButton.elementDefinitions = {
+    "ft-button": FtButton,
+    "ft-reader-internal-link": FtReaderInternalLink
+};
+// language=CSS
+FtReaderNavigationButton.styles = styles;
+__decorate([
+    property()
+], FtReaderNavigationButton.prototype, "target", void 0);
+__decorate([
+    property()
+], FtReaderNavigationButton.prototype, "content", void 0);
+__decorate([
+    property()
+], FtReaderNavigationButton.prototype, "tooltipPosition", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtReaderNavigationButton.prototype, "hideTooltip", void 0);
+__decorate([
+    property()
+], FtReaderNavigationButton.prototype, "iconVariant", void 0);
+__decorate([
+    property()
+], FtReaderNavigationButton.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtReaderNavigationButton.prototype, "trailingIcon", void 0);
+__decorate([
+    property({ type: Boolean, attribute: false })
+], FtReaderNavigationButton.prototype, "keepVisible", void 0);
+__decorate([
+    redux()
+], FtReaderNavigationButton.prototype, "currentPage", void 0);
+__decorate([
+    state()
+], FtReaderNavigationButton.prototype, "targetPage", void 0);
+//# sourceMappingURL=ft-reader-navigation-button.js.map