@fluid-topics/ftds-floating-menu 2.1.0

package/build/ftds-floating-menu.properties.d.ts

@@ -0,0 +1,21 @@
+import { FtdsIconVariants } from "@fluid-topics/ftds-icon/build/ftds-icon.properties";
+import { Position } from "@fluid-topics/ft-tooltip/build/ft-tooltip.properties";
+import { FtdsIcons } from "@fluid-topics/ftds-icon";
+export type FtdsHorizontalAlignment = "left" | "right" | "center";
+export type FtdsVerticalAlignment = "bottom" | "top";
+export interface FtdsFloatingMenuProperties {
+    disabled?: boolean;
+    iconVariant?: FtdsIconVariants;
+    icon?: FtdsIcons;
+    label?: string;
+    tooltipPosition?: Position;
+    text?: string;
+    horizontalAlignment?: FtdsHorizontalAlignment;
+    verticalAlignment?: FtdsVerticalAlignment;
+    closeMenuMatchers?: string[];
+    primary?: boolean;
+    secondary?: boolean;
+    tertiary?: boolean;
+    neutral?: boolean;
+    small?: boolean;
+}

package/build/ftds-floating-menu.properties.js

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

package/build/ftds-floating-menu.styles.d.ts

@@ -0,0 +1,10 @@
+export declare const FtdsFloatingMenuCssVariables: {
+    zIndex: import("@fluid-topics/design-system-variables").FtCssVariable;
+    maxWidth: import("@fluid-topics/design-system-variables").FtCssVariable;
+    maxHeight: import("@fluid-topics/design-system-variables").FtCssVariable;
+    textColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+    colorSurface: import("@fluid-topics/design-system-variables").FtCssVariable;
+    menuElevation: import("@fluid-topics/design-system-variables").FtCssVariable;
+    borderRadiusS: import("@fluid-topics/design-system-variables").FtCssVariable;
+};
+export declare const styles: import("lit").CSSResult;

package/build/ftds-floating-menu.styles.js

@@ -0,0 +1,45 @@
+import { css } from "lit";
+import { designSystemVariables, FtCssVariableFactory, } from "@fluid-topics/ft-wc-utils";
+export const FtdsFloatingMenuCssVariables = {
+    zIndex: FtCssVariableFactory.create("--ftds-floating-menu-z-index", "", "NUMBER", "8"),
+    maxWidth: FtCssVariableFactory.create("--ftds-floating-menu-max-width", "", "SIZE", "300px"),
+    maxHeight: FtCssVariableFactory.create("--ftds-floating-menu-max-height", "", "SIZE", "500px"),
+    textColor: FtCssVariableFactory.extend("--ftds-floating-menu-text-color", "", designSystemVariables.colorOnSurfaceHigh),
+    colorSurface: FtCssVariableFactory.external(designSystemVariables.colorSurface, "Design system"),
+    menuElevation: FtCssVariableFactory.external(designSystemVariables.elevation02, "Design system"),
+    borderRadiusS: FtCssVariableFactory.external(designSystemVariables.borderRadiusS, "Design system"),
+};
+// language=CSS
+export const styles = css `
+    .ftds-floating-menu {
+        color: ${FtdsFloatingMenuCssVariables.textColor};
+        display: contents;
+    }
+
+    .ftds-floating-menu--wrapper {
+        position: fixed;
+        z-index: 10;
+        visibility: hidden;
+    }
+
+    .ftds-floating-menu--wrapper.ftds-floating-menu--wrapper-positioned {
+        visibility: visible;
+    }
+
+    .ftds-floating-menu--options {
+        display: none;
+        position: relative;
+        overflow: auto;
+        max-width: ${FtdsFloatingMenuCssVariables.maxWidth};
+        max-height: ${FtdsFloatingMenuCssVariables.maxHeight};
+        box-shadow: ${FtdsFloatingMenuCssVariables.menuElevation};
+        background-color: ${FtdsFloatingMenuCssVariables.colorSurface};
+        border-radius: ${FtdsFloatingMenuCssVariables.borderRadiusS};
+        color: ${FtdsFloatingMenuCssVariables.textColor};
+        z-index: ${FtdsFloatingMenuCssVariables.zIndex};
+    }
+
+    .ftds-floating-menu--open .ftds-floating-menu--options {
+        display: block;
+    }
+`;

package/build/index.d.ts

@@ -0,0 +1,11 @@
+export * from "./ftds-floating-menu.styles";
+export * from "./ftds-floating-menu.properties";
+export * from "./ftds-floating-menu";
+export * from "./ftds-floating-menu-item.styles";
+export * from "./ftds-floating-menu-item.properties";
+export * from "./ftds-floating-menu-item";
+export * from "./ftds-floating-menu-label.styles";
+export * from "./ftds-floating-menu-label.properties";
+export * from "./ftds-floating-menu-label";
+export { FtdsFloatingMenuSelectEvent, FtdsFloatingMenuStatusChangeEvent, } from "./ftds-floating-menu";
+import "./define";

package/build/index.js

@@ -0,0 +1,11 @@
+export * from "./ftds-floating-menu.styles";
+export * from "./ftds-floating-menu.properties";
+export * from "./ftds-floating-menu";
+export * from "./ftds-floating-menu-item.styles";
+export * from "./ftds-floating-menu-item.properties";
+export * from "./ftds-floating-menu-item";
+export * from "./ftds-floating-menu-label.styles";
+export * from "./ftds-floating-menu-label.properties";
+export * from "./ftds-floating-menu-label";
+export { FtdsFloatingMenuSelectEvent, FtdsFloatingMenuStatusChangeEvent, } from "./ftds-floating-menu";
+import "./define";

package/package.json

@@ -0,0 +1,35 @@
+{
+    "name": "@fluid-topics/ftds-floating-menu",
+    "version": "2.1.0",
+    "description": "The design system floating menu component",
+    "keywords": [
+        "Lit"
+    ],
+    "author": "Fluid Topics <devtopics@antidot.net>",
+    "license": "ISC",
+    "main": "build/index.js",
+    "web": "build/ftds-floating-menu.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": {
+        "@floating-ui/dom": "1.7.6",
+        "@fluid-topics/ft-ripple": "2.1.0",
+        "@fluid-topics/ft-tooltip": "2.1.0",
+        "@fluid-topics/ft-wc-utils": "2.1.0",
+        "@fluid-topics/ftds-button": "2.1.0",
+        "@fluid-topics/ftds-icon": "2.1.0",
+        "@fluid-topics/ftds-typography": "2.1.0",
+        "lit": "3.1.0"
+    },
+    "devDependencies": {
+        "@fluid-topics/ft-wc-test-utils": "2.1.0"
+    },
+    "gitHead": "4727cf19d04236ad1d2b2cb43ce1c46298834c7e"
+}