@fluid-topics/ft-popover 1.1.115

package/build/ftds-popover.d.ts

@@ -0,0 +1,29 @@
+import { nothing, PropertyValues } from "lit";
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtdsPopoverProperties } from "./ftds-popover.properties";
+import { DesignSystemFamily, DesignSystemSize } from "@fluid-topics/design-system-variables";
+import { Position } from "@fluid-topics/ft-tooltip";
+export declare class FtdsPopover extends FtLitElement implements FtdsPopoverProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    heading: string;
+    closeButtonLabel: string;
+    openButtonLabel: string;
+    openButtonTooltipPosition: Position;
+    opened: boolean;
+    openButtonSize: DesignSystemSize;
+    openButtonFamily: DesignSystemFamily;
+    private openingButton;
+    private closingButton;
+    private popoverWrapper;
+    static styles: import("lit").CSSResult;
+    protected render(): import("lit").TemplateResult<1>;
+    renderPopover(): import("lit").TemplateResult<1> | typeof nothing;
+    renderClosingButton(): import("lit").TemplateResult<1>;
+    renderHeading(): import("lit").TemplateResult<1> | typeof nothing;
+    updated(properties: PropertyValues<FtdsPopover>): void;
+    close(): void;
+    open(): void;
+    private watchFocusIn;
+    private watchEscapeKey;
+    private positionWrapper;
+}

package/build/ftds-popover.js

@@ -0,0 +1,169 @@
+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, query, } from "lit/decorators.js";
+import { computeFlipOffsetPosition, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtTypography } from "@fluid-topics/ft-typography";
+import { FtdsButton } from "@fluid-topics/ft-button";
+import { styles } from "./ftds-popover.styles";
+import { classMap } from "lit/directives/class-map.js";
+import { DesignSystemFamily, DesignSystemSize } from "@fluid-topics/design-system-variables";
+import { FtIcons } from "@fluid-topics/ft-icon";
+class FtdsPopover extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.heading = "";
+        this.closeButtonLabel = "close info";
+        this.openButtonLabel = "more info";
+        this.openButtonTooltipPosition = "bottom";
+        this.opened = false;
+        this.openButtonSize = DesignSystemSize.medium;
+        this.openButtonFamily = DesignSystemFamily.brand;
+        this.watchFocusIn = (event) => {
+            if (!event.composedPath().includes(this.popoverWrapper)) {
+                this.close();
+            }
+        };
+        this.watchEscapeKey = (event) => {
+            if (event.key === "Escape") {
+                this.close();
+                this.openingButton.focus();
+            }
+        };
+    }
+    render() {
+        const classes = {
+            "ftds-popover": true,
+            "ftds-popover--opened": this.opened
+        };
+        return html `
+            <div part="container" class="${classMap(classes)}">
+                <ftds-button @focusin="${this.close}"
+                             part="opening-button"
+                             size="${this.openButtonSize}" family="${this.openButtonFamily}" label="${this.openButtonLabel}"
+                             tooltipposition="${this.openButtonTooltipPosition}" icon="${FtIcons.CIRCLE_QUESTION}"
+                             aria-haspopup="true" aria-expanded="${this.opened}" aria-controls="ftds-popover-dialog"
+                             @click=${this.open}>
+                </ftds-button>
+                ${this.renderPopover()}
+            </div>
+        `;
+    }
+    renderPopover() {
+        return this.opened ? html `
+            <div class="ftds-popover--container">
+                <div class="ftds-popover--overlay" part="overlay" @click="${this.close}"></div>
+                <div class="ftds-popover--wrapper" part="wrapper" role="dialog" id="ftds-popover-dialog"
+                     aria-labelledby="ftds-popover-heading" aria-describedby="ftds-popover-content">
+                    ${this.renderClosingButton()}
+                    <slot name="heading">
+                        ${this.renderHeading()}
+                    </slot>
+                    <div class="ftds-popover--content" part="content" id="ftds-popover-content">
+                        <ft-typography variant="body-2-medium">
+                            <slot></slot>
+                        </ft-typography>
+                    </div>
+                    <ft-typography variant="body-2-medium">
+                        <slot name="link"
+                              part="popover-link"
+                              class="ftds-popover--link"
+                              @slotchange=${this.requestUpdate}
+                        ></slot>
+                    </ft-typography>
+                </div>
+            </div>
+        ` : nothing;
+    }
+    renderClosingButton() {
+        return html `
+            <div class="ftds-popover--closing-button">
+                <ftds-button icon="${FtIcons.CLOSE}" size="${DesignSystemSize.small}" family="${DesignSystemFamily.neutral}"
+                             part="closing-button" label="${this.closeButtonLabel}" @click=${this.close}></ftds-button>
+            </div>
+        `;
+    }
+    renderHeading() {
+        return this.heading ? html `
+            <div class="ftds-popover--heading" part="heading" id="ftds-popover-heading">
+                <ft-typography element="span" variant="body-2-semibold">${this.heading}</ft-typography>
+            </div>
+        ` : nothing;
+    }
+    updated(properties) {
+        super.updated(properties);
+        if (properties.has("opened")) {
+            if (this.opened) {
+                setTimeout(() => {
+                    this.positionWrapper();
+                    document.addEventListener("keydown", this.watchEscapeKey);
+                    document.addEventListener("focusin", this.watchFocusIn);
+                }, 0);
+            }
+            else {
+                document.removeEventListener("keydown", this.watchEscapeKey);
+                document.removeEventListener("focusin", this.watchFocusIn);
+            }
+        }
+    }
+    close() {
+        this.opened = false;
+        this.dispatchEvent(new CustomEvent("opened-changed", { detail: { opened: false } }));
+    }
+    open() {
+        this.opened = true;
+        this.dispatchEvent(new CustomEvent("opened-changed", { detail: { opened: true } }));
+    }
+    async positionWrapper() {
+        this.popoverWrapper.classList.remove("ftds-popover--wrapper-positioned");
+        this.popoverWrapper.style.left = "";
+        this.popoverWrapper.style.top = "";
+        const reference = this.openingButton;
+        const fallbackPlacements = ["right-start", "bottom-end", "right-end", "left-start", "left-end", "top-start", "top-end"];
+        const { x, y } = await computeFlipOffsetPosition(reference, this.popoverWrapper, "bottom-start", fallbackPlacements, "fixed");
+        this.popoverWrapper.style.left = `${x}px`;
+        this.popoverWrapper.style.top = `${y}px`;
+        this.popoverWrapper.classList.add("ftds-popover--wrapper-positioned");
+        this.closingButton.focus();
+    }
+}
+FtdsPopover.elementDefinitions = {
+    "ft-typography": FtTypography,
+    "ftds-button": FtdsButton,
+};
+FtdsPopover.styles = styles;
+__decorate([
+    property({ type: String })
+], FtdsPopover.prototype, "heading", void 0);
+__decorate([
+    property({ type: String })
+], FtdsPopover.prototype, "closeButtonLabel", void 0);
+__decorate([
+    property({ type: String })
+], FtdsPopover.prototype, "openButtonLabel", void 0);
+__decorate([
+    property({ type: String })
+], FtdsPopover.prototype, "openButtonTooltipPosition", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsPopover.prototype, "opened", void 0);
+__decorate([
+    property({ type: DesignSystemSize })
+], FtdsPopover.prototype, "openButtonSize", void 0);
+__decorate([
+    property({ type: DesignSystemFamily })
+], FtdsPopover.prototype, "openButtonFamily", void 0);
+__decorate([
+    query("[part=opening-button]")
+], FtdsPopover.prototype, "openingButton", void 0);
+__decorate([
+    query("[part=closing-button]")
+], FtdsPopover.prototype, "closingButton", void 0);
+__decorate([
+    query("[part=wrapper]")
+], FtdsPopover.prototype, "popoverWrapper", void 0);
+export { FtdsPopover };

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

@@ -0,0 +1,8 @@
+import { Position } from "@fluid-topics/ft-tooltip";
+export interface FtdsPopoverProperties {
+    opened?: boolean;
+    heading?: string;
+    closeButtonLabel?: string;
+    openButtonLabel?: string;
+    openButtonTooltipPosition?: Position;
+}

package/build/ftds-popover.properties.js

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

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,83 @@
+import { css } from "lit";
+import { popover } from "@fluid-topics/design-system-variables";
+//language=css
+export const styles = css `
+    :host {
+        position: relative;
+        display: inline-block;
+    }
+
+    .ftds-popover {
+        position: relative;
+    }
+
+    .ftds-popover--container {
+        position: absolute;
+        z-index: 2;
+        display: block;
+        margin: auto;
+    }
+
+    .ftds-popover--closing-button {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+    }
+
+    .ftds-popover--overlay {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        opacity: 0;
+    }
+
+    .ftds-popover--wrapper {
+        visibility: hidden;
+        position: fixed;
+        display: flex;
+        flex-direction: column;
+
+        max-width: 464px;
+        width: max-content;
+
+        padding-left: ${popover.horizontalPadding};
+        padding-right: ${popover.horizontalPadding};
+        padding-top: ${popover.verticalPadding};
+        padding-bottom: ${popover.verticalPadding};
+        gap: ${popover.gap};
+
+        background-color: ${popover.backgroundColor};
+        border-radius: ${popover.borderRadius};
+        box-shadow: ${popover.shadow};
+    }
+
+    .ftds-popover--heading {
+        flex-shrink: 0;
+
+        display: flex;
+        align-items: center;
+        gap: ${popover.gap};
+
+        color: ${popover.titleColor};
+    }
+
+    .ftds-popover--heading ft-typography {
+        flex-grow: 1;
+        flex-shrink: 1;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+
+    .ftds-popover--content {
+        color: ${popover.bodyColor};
+    }
+
+    .ftds-popover--wrapper-positioned {
+        visibility: visible;
+    }
+`;

package/build/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./ftds-popover";
+export * from "./ftds-popover.styles";
+export * from "./ftds-popover.properties";

package/build/index.js

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

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@fluid-topics/ft-popover",
+  "version": "1.1.115",
+  "description": "A simple popover component",
+  "keywords": [
+    "Lit"
+  ],
+  "author": "Fluid Topics <devtopics@antidot.net>",
+  "license": "ISC",
+  "main": "build/index.js",
+  "web": "build/ft-popover.min.js",
+  "typings": "build/index",
+  "files": [
+    "build/**/*.ts",
+    "build/**/*.js"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
+  },
+  "dependencies": {
+    "@fluid-topics/design-system-variables": "0.0.29",
+    "@fluid-topics/ft-button": "1.1.115",
+    "@fluid-topics/ft-icon": "1.1.115",
+    "@fluid-topics/ft-link": "1.1.115",
+    "@fluid-topics/ft-typography": "1.1.115",
+    "@fluid-topics/ft-wc-utils": "1.1.115",
+    "lit": "3.1.0"
+  },
+  "gitHead": "7a0d8f324bb95d068d787990f2d1f1325399467f"
+}