@fluid-topics/ft-reader-breadcrumbs 1.3.12

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

@@ -0,0 +1,9 @@
+export interface FtReaderBreadcrumbsProperties {
+    separator?: string;
+    displayMapTitle?: boolean;
+    multiline?: boolean;
+    useFloatingMenu?: boolean;
+    floatingMenuThreshold?: number;
+    floatingMenuStartOffset?: number;
+    floatingMenuEndOffset?: number;
+}

package/build/ft-reader-breadcrumbs.properties.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,12 @@
+export declare const FtReaderBreadcrumbsCssVariables: {
+    itemColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    itemColorHover: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    itemFontWeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    currentItemColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    currentItemFontWeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    separatorColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    separatorFontSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    separatorFontWeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    separatorSpacing: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+};
+export declare const styles: import("lit").CSSResult;

package/build/ft-reader-breadcrumbs.styles.js

@@ -0,0 +1,94 @@
+import { css } from "lit";
+import { designSystemVariables, FtCssVariableFactory, setVariable } from "@fluid-topics/ft-wc-utils";
+import { FtTypographyBody2CssVariables } from "@fluid-topics/ft-typography";
+import { foundation } from "@fluid-topics/design-system-variables";
+const itemColor = FtCssVariableFactory.extend("--ft-reader-breadcrumbs-item-color", "", designSystemVariables.colorOnSurface);
+const itemFontWeight = FtCssVariableFactory.create("--ft-reader-breadcrumbs-item-font-weight", "", "UNKNOWN", "normal");
+export const FtReaderBreadcrumbsCssVariables = {
+    itemColor: itemColor,
+    itemColorHover: FtCssVariableFactory.extend("--ft-reader-breadcrumbs-item-color-hover", "", designSystemVariables.colorPrimary),
+    itemFontWeight: itemFontWeight,
+    currentItemColor: FtCssVariableFactory.extend("--ft-reader-breadcrumbs-current-item-color", "", itemColor),
+    currentItemFontWeight: FtCssVariableFactory.extend("--ft-reader-breadcrumbs-current-item-font-weight", "", itemFontWeight),
+    separatorColor: FtCssVariableFactory.extend("--ft-reader-breadcrumbs-separator-color", "", designSystemVariables.colorOnSurface),
+    separatorFontSize: FtCssVariableFactory.create("--ft-reader-breadcrumbs-separator-font-size", "", "SIZE", "14px"),
+    separatorFontWeight: FtCssVariableFactory.create("--ft-reader-breadcrumbs-separator-font-weight", "", "UNKNOWN", "normal"),
+    separatorSpacing: FtCssVariableFactory.create("--ft-reader-breadcrumbs-separator-spacing", "", "SIZE", "8px"),
+};
+// language=CSS
+export const styles = css `
+    ol {
+        display: flex;
+        align-items: center;
+        gap: ${FtReaderBreadcrumbsCssVariables.separatorSpacing};
+        margin: 0;
+        padding: 0;
+        white-space: nowrap;
+    }
+
+    li {
+        list-style: none;
+        overflow: hidden;
+    }
+
+    li:last-child {
+        flex-shrink: 1;
+    }
+
+    .multiline ol {
+        flex-wrap: wrap;
+    }
+
+    .multiline li {
+        white-space: normal;
+    }
+
+    li.separator {
+        color: ${FtReaderBreadcrumbsCssVariables.separatorColor};
+        ${setVariable(FtTypographyBody2CssVariables.fontSize, FtReaderBreadcrumbsCssVariables.separatorFontSize)};
+        ${setVariable(FtTypographyBody2CssVariables.fontWeight, FtReaderBreadcrumbsCssVariables.separatorFontWeight)};
+        flex-shrink: 0;
+    }
+
+    li.separator ft-typography {
+        display: flex;
+    }
+
+    li.menu {
+        flex-shrink: 0;
+    }
+
+    .menu-item {
+        padding: ${foundation.spacing1};
+        position: relative;
+    }
+
+    .menu-item:hover {
+        padding: ${foundation.spacing1};
+    }
+
+    .menu-item [part=breadcrumb-link-label] {
+        padding: ${foundation.spacing3};
+    }
+
+    [part=breadcrumb-link-label] {
+        color: ${FtReaderBreadcrumbsCssVariables.itemColor};
+        ${setVariable(FtTypographyBody2CssVariables.fontWeight, FtReaderBreadcrumbsCssVariables.itemFontWeight)};
+    }
+
+    [part=breadcrumb-link-label]:hover {
+        color: ${FtReaderBreadcrumbsCssVariables.itemColorHover};
+    }
+
+    [part=breadcrumb-current-item] {
+        color: ${FtReaderBreadcrumbsCssVariables.currentItemColor};
+        ${setVariable(FtTypographyBody2CssVariables.fontWeight, FtReaderBreadcrumbsCssVariables.currentItemFontWeight)};
+    }
+
+    [part=breadcrumb-link-label],
+    [part=breadcrumb-current-item] {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+`;

package/build/helpers/FtReaderBreadcrumbsMenuHelper.d.ts

@@ -0,0 +1,7 @@
+import { FtReaderBreadcrumb } from "@fluid-topics/ft-reader-context";
+export interface SplitBreadcrumbs {
+    beforeMenu: Array<FtReaderBreadcrumb>;
+    inMenu: Array<FtReaderBreadcrumb>;
+    afterMenu: Array<FtReaderBreadcrumb>;
+}
+export declare function splitBreadcrumbForMenu(breadcrumbs: Array<FtReaderBreadcrumb>, startOffset?: number, endOffset?: number): SplitBreadcrumbs;

package/build/helpers/FtReaderBreadcrumbsMenuHelper.js

@@ -0,0 +1,23 @@
+export function splitBreadcrumbForMenu(breadcrumbs, startOffset = 0, endOffset = 0) {
+    if (breadcrumbs.length === 0) {
+        return {
+            beforeMenu: [],
+            inMenu: [],
+            afterMenu: [],
+        };
+    }
+    const actualEndOffset = Math.max(endOffset, 1);
+    const afterMenuElements = breadcrumbs.slice(actualEndOffset * -1);
+    if (startOffset + actualEndOffset >= breadcrumbs.length) {
+        return {
+            beforeMenu: [],
+            inMenu: [],
+            afterMenu: breadcrumbs,
+        };
+    }
+    return {
+        beforeMenu: breadcrumbs.slice(0, startOffset),
+        inMenu: breadcrumbs.slice(startOffset, breadcrumbs.length - afterMenuElements.length),
+        afterMenu: afterMenuElements,
+    };
+}

package/build/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./ft-reader-breadcrumbs.styles";
+export * from "./ft-reader-breadcrumbs.properties";
+export * from "./ft-reader-breadcrumbs";

package/build/index.js

@@ -0,0 +1,6 @@
+import { customElement } from "@fluid-topics/ft-wc-utils";
+import { FtReaderBreadcrumbs } from "./ft-reader-breadcrumbs";
+export * from "./ft-reader-breadcrumbs.styles";
+export * from "./ft-reader-breadcrumbs.properties";
+export * from "./ft-reader-breadcrumbs";
+customElement("ft-reader-breadcrumbs")(FtReaderBreadcrumbs);

package/package.json

@@ -0,0 +1,30 @@
+{
+    "name": "@fluid-topics/ft-reader-breadcrumbs",
+    "version": "1.3.12",
+    "description": "A component to display current visible topic breadcrumbs",
+    "keywords": [
+        "Lit"
+    ],
+    "author": "Fluid Topics <devtopics@antidot.net>",
+    "license": "ISC",
+    "main": "build/index.js",
+    "web": "build/ft-reader-breadcrumbs.min.js",
+    "typings": "build/index",
+    "files": [
+        "build/**/*.js",
+        "build/**/*.ts"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
+    },
+    "dependencies": {
+        "@fluid-topics/ft-floating-menu": "1.3.12",
+        "@fluid-topics/ft-reader-context": "1.3.12",
+        "@fluid-topics/ft-ripple": "1.3.12",
+        "@fluid-topics/ft-typography": "1.3.12",
+        "@fluid-topics/ft-wc-test-utils": "1.3.12",
+        "lit": "3.1.0"
+    },
+    "gitHead": "c0422158795c14ed01e51d1dc4d948e9b87fd328"
+}