@fluid-topics/ft-search-breadcrumbs 1.4.1

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

@@ -0,0 +1,10 @@
+export interface FtSearchBreadcrumbsProperties {
+    separator?: string;
+    multiline?: boolean;
+    truncate?: boolean;
+    useAsClusterSwitch?: boolean;
+    goToDocumentOnSwitch?: boolean;
+    truncateThreshold?: number;
+    truncateStartOffset?: number;
+    truncateEndOffset?: number;
+}

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

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

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

@@ -0,0 +1,12 @@
+export declare const FtSearchBreadcrumbsCssVariables: {
+    itemColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    itemFontSize: 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-search-breadcrumbs.styles.js

@@ -0,0 +1,109 @@
+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";
+import { FtTooltipCssVariables } from "@fluid-topics/ft-tooltip";
+const itemColor = FtCssVariableFactory.extend("--ft-search-breadcrumbs-item-color", "", designSystemVariables.colorOnSurface);
+const itemFontWeight = FtCssVariableFactory.create("--ft-search-breadcrumbs-item-font-weight", "", "UNKNOWN", "normal");
+export const FtSearchBreadcrumbsCssVariables = {
+    itemColor: itemColor,
+    itemFontSize: FtCssVariableFactory.create("--ft-search-breadcrumbs-item-font-size", "", "SIZE", "14px"),
+    itemFontWeight: itemFontWeight,
+    currentItemColor: FtCssVariableFactory.extend("--ft-search-breadcrumbs-current-item-color", "", itemColor),
+    currentItemFontWeight: FtCssVariableFactory.extend("--ft-search-breadcrumbs-current-item-font-weight", "", itemFontWeight),
+    separatorColor: FtCssVariableFactory.extend("--ft-search-breadcrumbs-separator-color", "", designSystemVariables.colorOnSurface),
+    separatorFontSize: FtCssVariableFactory.create("--ft-search-breadcrumbs-separator-font-size", "", "SIZE", "14px"),
+    separatorFontWeight: FtCssVariableFactory.create("--ft-search-breadcrumbs-separator-font-weight", "", "UNKNOWN", "normal"),
+    separatorSpacing: FtCssVariableFactory.create("--ft-search-breadcrumbs-separator-spacing", "", "SIZE", "8px"),
+};
+// language=CSS
+export const styles = css `
+    :host {
+        ${setVariable(FtTooltipCssVariables.maxWidth, "100%")};
+    }
+
+    a {
+        all: unset;
+    }
+
+    ol {
+        display: flex;
+        align-items: center;
+        gap: ${FtSearchBreadcrumbsCssVariables.separatorSpacing};
+        margin: 0;
+        padding: 0;
+        white-space: nowrap;
+    }
+
+    li {
+        list-style: none;
+        overflow: hidden;
+    }
+
+    li:last-child {
+        flex-shrink: 1;
+    }
+
+    .multiline {
+        flex-wrap: wrap;
+    }
+
+    .multiline li {
+        white-space: normal;
+    }
+
+    li.separator {
+        color: ${FtSearchBreadcrumbsCssVariables.separatorColor};
+        ${setVariable(FtTypographyBody2CssVariables.fontSize, FtSearchBreadcrumbsCssVariables.separatorFontSize)};
+        ${setVariable(FtTypographyBody2CssVariables.fontWeight, FtSearchBreadcrumbsCssVariables.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-label] {
+        padding: ${foundation.spacing3};
+    }
+
+
+    [part=breadcrumb-label] {
+        color: ${FtSearchBreadcrumbsCssVariables.itemColor};
+        ${setVariable(FtTypographyBody2CssVariables.fontWeight, FtSearchBreadcrumbsCssVariables.itemFontWeight)};
+    }
+
+    [part=breadcrumb-current-item] {
+        color: ${FtSearchBreadcrumbsCssVariables.currentItemColor};
+        ${setVariable(FtTypographyBody2CssVariables.fontWeight, FtSearchBreadcrumbsCssVariables.currentItemFontWeight)};
+    }
+
+    [part=breadcrumb-label],
+    [part=breadcrumb-current-item] {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        ${setVariable(FtTypographyBody2CssVariables.fontSize, FtSearchBreadcrumbsCssVariables.itemFontSize)};
+    }
+
+    [slot="input-value"] {
+        min-width: 0;
+    }
+
+    [part=tooltip] {
+        white-space: normal;
+    }
+`;

package/build/index.d.ts

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

package/build/index.js

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

package/package.json

@@ -0,0 +1,29 @@
+{
+    "name": "@fluid-topics/ft-search-breadcrumbs",
+    "version": "1.4.1",
+    "description": "search breadcrumbs component",
+    "keywords": [
+        "Lit"
+    ],
+    "author": "Fluid Topics <devtopics@antidot.net>",
+    "license": "ISC",
+    "main": "build/index.js",
+    "web": "build/ft-search-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-wc-utils": "1.4.1",
+        "lit": "3.1.0"
+    },
+    "devDependencies": {
+        "@fluid-topics/ft-wc-test-utils": "1.4.1"
+    },
+    "gitHead": "1afa9ec0ae6a444d5dbd791dd7ecf2cee8766f8c"
+}