@fluid-topics/ftds-popover 2.1.0

package/build/ftds-popover.properties.d.ts

@@ -0,0 +1,14 @@
+import { Position } from "@fluid-topics/ft-tooltip";
+export interface FtdsPopoverProperties {
+    heading?: string;
+    opened?: boolean;
+    hidden?: boolean;
+    closeButtonLabel?: string;
+    openButtonLabel?: string;
+    openButtonTooltipPosition?: Position;
+    margins?: FtdsPopoverMargins;
+}
+export declare enum FtdsPopoverMargins {
+    default = "default",
+    dense = "dense"
+}

package/build/ftds-popover.properties.js

@@ -0,0 +1,5 @@
+export var FtdsPopoverMargins;
+(function (FtdsPopoverMargins) {
+    FtdsPopoverMargins["default"] = "default";
+    FtdsPopoverMargins["dense"] = "dense";
+})(FtdsPopoverMargins || (FtdsPopoverMargins = {}));

package/build/ftds-popover.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/build/ftds-popover.styles.js

@@ -0,0 +1,102 @@
+import { css } from "lit";
+import { popover } from "@fluid-topics/design-system-variables";
+// language=css
+export const styles = css `
+    :host {
+        position: relative;
+        display: inline-block;
+    }
+
+    [part="root-container"] {
+        position: relative;
+    }
+
+    [part="popover-container"] {
+        position: absolute;
+        z-index: 100;
+        display: block;
+        margin: auto;
+    }
+
+    [part="closing-button-container"] {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+    }
+
+    [part="overlay"] {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        opacity: 0;
+    }
+
+    [part="wrapper"] {
+        visibility: hidden;
+        position: fixed;
+        display: flex;
+        flex-direction: column;
+
+        max-width: ${popover.maxWidth};
+        min-width: ${popover.minWidth};
+        max-height: ${popover.maxHeight};
+
+        padding-left: ${popover.defaultHorizontalPadding};
+        padding-right: ${popover.defaultHorizontalPadding};
+        padding-top: ${popover.defaultVerticalPadding};
+        padding-bottom: ${popover.defaultVerticalPadding};
+        gap: ${popover.gap};
+
+        background-color: ${popover.backgroundColor};
+        border-radius: ${popover.borderRadius};
+        box-shadow: ${popover.shadow};
+
+        &.positioned {
+            visibility: visible;
+        }
+
+
+        &.ftds-popover--dense {
+            padding-left: ${popover.denseHorizontalPadding};
+            padding-right: ${popover.denseHorizontalPadding};
+            padding-top: ${popover.denseVerticalPadding};
+            padding-bottom: ${popover.denseVerticalPadding};
+        }
+    }
+
+    [part="heading"] {
+        flex-shrink: 0;
+
+        display: flex;
+        align-items: center;
+        gap: ${popover.gap};
+
+        color: ${popover.titleColor};
+    }
+
+    [part="heading"] ftds-typography {
+        flex-grow: 1;
+        flex-shrink: 1;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+
+    [part="content"] {
+        color: ${popover.bodyColor};
+    }
+
+    [part="popover-sections"] {
+        display: flex;
+        flex-direction: column;
+        gap: ${popover.multiSectionVerticalGap};
+    }
+
+    .hidden {
+        display: none;
+    }
+`;

package/build/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./ftds-popover";
+export * from "./ftds-popover.styles";
+export * from "./ftds-popover.properties";
+export * from "./ftds-popover-section";
+export * from "./ftds-popover-section.styles";
+export * from "./ftds-popover-section.properties";
+import "./define";

package/build/index.js

@@ -0,0 +1,7 @@
+export * from "./ftds-popover";
+export * from "./ftds-popover.styles";
+export * from "./ftds-popover.properties";
+export * from "./ftds-popover-section";
+export * from "./ftds-popover-section.styles";
+export * from "./ftds-popover-section.properties";
+import "./define";

package/package.json

@@ -0,0 +1,35 @@
+{
+    "name": "@fluid-topics/ftds-popover",
+    "version": "2.1.0",
+    "description": "The design system popover component",
+    "keywords": [
+        "Lit"
+    ],
+    "author": "Fluid Topics <devtopics@antidot.net>",
+    "license": "ISC",
+    "main": "build/index.js",
+    "web": "build/ftds-popover.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/design-system-variables": "3.5.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"
+}