@fluid-topics/ftds-popover 2.1.0

package/README.md

@@ -0,0 +1,40 @@
+The design system popover component
+
+## Install
+
+```shell
+npm install @fluid-topics/ftds-popover
+yarn add @fluid-topics/ftds-popover
+```
+
+## Usage
+
+```typescript
+import {html} from "lit"
+import "@fluid-topics/ftds-link"
+import "@fluid-topics/ft-popover"
+
+function render() {
+    return html`
+        <ftds-popover heading="Popover heading">
+            Exemple popover content
+            <ftds-link slot="link" href="" variant="body-2-medium" family="brand" underlined>Example popover link</ftds-link>
+        </ftds-popover>
+    `
+}
+
+function render() {
+    return html`
+        <ftds-popover>
+            <ftds-popover-section slot="sections" heading="Popover section heading">
+                Example popover section content
+                <ftds-link slot="link">Example popover section link</ftds-link>
+            </ftds-popover-section>
+            <ftds-popover-section slot="sections">
+                Other example popover section content
+            </ftds-popover-section>
+        </ftds-popover>
+    `
+}
+
+```

package/build/define.d.ts

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

package/build/define.js

@@ -0,0 +1,3 @@
+import { customElements } from "@fluid-topics/ft-wc-utils";
+import definitions from "./definitions";
+customElements(definitions);

package/build/definitions.d.ts

@@ -0,0 +1,7 @@
+import { FtdsPopover } from "./ftds-popover";
+import { FtdsPopoverSection } from "./ftds-popover-section";
+declare const _default: {
+    "ftds-popover": typeof FtdsPopover;
+    "ftds-popover-section": typeof FtdsPopoverSection;
+};
+export default _default;

package/build/definitions.js

@@ -0,0 +1,6 @@
+import { FtdsPopover } from "./ftds-popover";
+import { FtdsPopoverSection } from "./ftds-popover-section";
+export default {
+    "ftds-popover": FtdsPopover,
+    "ftds-popover-section": FtdsPopoverSection,
+};

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

@@ -0,0 +1,13 @@
+import { nothing, PropertyValues } from "lit";
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtdsPopoverSectionProperties } from "./ftds-popover-section.properties";
+export declare class FtdsPopoverSection extends FtLitElement implements FtdsPopoverSectionProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    heading: string;
+    private popoverSectionLinkTypography;
+    private popoverSectionLinkSlot;
+    protected render(): import("lit-html").TemplateResult<1>;
+    renderHeading(): typeof nothing | import("lit-html").TemplateResult<1>;
+    protected updated(props: PropertyValues): void;
+}

package/build/ftds-popover-section.js

@@ -0,0 +1,61 @@
+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 { FtLitElement, unslotText, } from "@fluid-topics/ft-wc-utils";
+import { FtdsTypography, FtdsTypographyVariants, } from "@fluid-topics/ftds-typography";
+import { sectionStyles } from "./ftds-popover-section.styles";
+export class FtdsPopoverSection extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.heading = "";
+    }
+    render() {
+        return html `
+            <div class="ftds-popover-section--container">
+                <slot name="heading">
+                    ${this.renderHeading()}
+                </slot>
+                <div class="ftds-popover-section--content" part="content" id="ftds-popover-section-content">
+                    <ftds-typography variant="${FtdsTypographyVariants.body2medium}">
+                        <slot></slot>
+                    </ftds-typography>
+                </div>
+                <ftds-typography variant="${FtdsTypographyVariants.body2medium}" part="popover-section-link-typography" class="ftds-popover-section--link">
+                    <slot name="link"
+                          part="popover-section-link"
+                          @slotchange=${() => this.requestUpdate()}
+                    ></slot>
+                </ftds-typography>
+            </div>
+        `;
+    }
+    renderHeading() {
+        return this.heading ? html `
+            <div class="ftds-popover-section--heading" part="heading" id="ftds-popover-section-heading">
+                <ftds-typography element="span" variant="${FtdsTypographyVariants.body2semibold}">${this.heading}</ftds-typography>
+            </div>
+        ` : nothing;
+    }
+    updated(props) {
+        super.updated(props);
+        this.popoverSectionLinkTypography.hidden = unslotText(this.popoverSectionLinkSlot).trim().length === 0;
+    }
+}
+FtdsPopoverSection.elementDefinitions = {
+    "ftds-typography": FtdsTypography,
+};
+FtdsPopoverSection.styles = sectionStyles;
+__decorate([
+    property()
+], FtdsPopoverSection.prototype, "heading", void 0);
+__decorate([
+    query("[part=popover-section-link-typography]")
+], FtdsPopoverSection.prototype, "popoverSectionLinkTypography", void 0);
+__decorate([
+    query("[part=popover-section-link]")
+], FtdsPopoverSection.prototype, "popoverSectionLinkSlot", void 0);

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

@@ -0,0 +1,3 @@
+export interface FtdsPopoverSectionProperties {
+    heading?: string;
+}

package/build/ftds-popover-section.properties.js

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

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

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

package/build/ftds-popover-section.styles.js

@@ -0,0 +1,22 @@
+import { css } from "lit";
+import { popover } from "@fluid-topics/design-system-variables";
+// language=css
+export const sectionStyles = css `
+    .ftds-popover-section--heading ftds-typography {
+        flex-grow: 1;
+        flex-shrink: 1;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+
+    .ftds-popover-section--content {
+        color: ${popover.bodyColor};
+    }
+
+    .ftds-popover-section--container {
+        display: flex;
+        flex-direction: column;
+        gap: ${popover.contentSectionVerticalGap};
+    }
+`;

package/build/ftds-popover.d.ts

@@ -0,0 +1,53 @@
+import { nothing, PropertyValues, TemplateResult } from "lit";
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtdsPopoverMargins, FtdsPopoverProperties } from "./ftds-popover.properties";
+import { DesignSystemFamily, DesignSystemSize } from "@fluid-topics/design-system-variables";
+import { FtdsIcons, FtdsIconVariants } from "@fluid-topics/ftds-icon";
+import { Position } from "@fluid-topics/ft-tooltip";
+export declare class FtdsPopover extends FtLitElement implements FtdsPopoverProperties {
+    static styles: import("lit").CSSResult;
+    static elementDefinitions: ElementDefinitionsMap;
+    closeButtonLabel: string;
+    openButtonIcon: FtdsIcons;
+    openButtonIconVariant: FtdsIconVariants;
+    openButtonLabel: string;
+    openButtonTooltipPosition: Position;
+    opened: boolean;
+    hidden: boolean;
+    openButtonSize: DesignSystemSize;
+    openButtonFamily: DesignSystemFamily;
+    private isTriggerSlotAssigned;
+    heading: string;
+    margins: FtdsPopoverMargins;
+    private popoverWrapper?;
+    private triggerSlot?;
+    private openingButton?;
+    private closingButton?;
+    private popoverContentDiv?;
+    private popoverContentSlot?;
+    private slottedLinkContent?;
+    private popoverLinkTypography?;
+    private popoverSectionsDiv?;
+    private popoverSectionsSlot?;
+    private wrapperId;
+    private headingId;
+    private contentId;
+    private maxWidth;
+    get openingElement(): HTMLElement | undefined;
+    protected render(): typeof nothing | TemplateResult<1>;
+    private renderPopover;
+    private renderOpeningButton;
+    private renderClosingButton;
+    private renderFullContent;
+    private hideUnusedSlots;
+    private hasEmptySlot;
+    updated(properties: PropertyValues<FtdsPopover>): void;
+    close(): void;
+    open(): void;
+    private closeAndFocusOpeningButton;
+    private onTriggerSlotChange;
+    private onTriggerKeydown;
+    private watchFocusIn;
+    private watchEscapeKey;
+    private positionWrapper;
+}

package/build/ftds-popover.js

@@ -0,0 +1,299 @@
+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, state, } from "lit/decorators.js";
+import { computeOffsetAutoPosition, FtLitElement, unslotText, } from "@fluid-topics/ft-wc-utils";
+import { FtdsTypography, FtdsTypographyVariants, } from "@fluid-topics/ftds-typography";
+import { FtdsButton } from "@fluid-topics/ftds-button";
+import { FtdsPopoverMargins, } from "./ftds-popover.properties";
+import { DesignSystemFamily, DesignSystemSize, popover, } from "@fluid-topics/design-system-variables";
+import { FtdsIcons, FtdsIconVariants, } from "@fluid-topics/ftds-icon";
+import { styles } from "./ftds-popover.styles";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+export class FtdsPopover extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.closeButtonLabel = "close info";
+        this.openButtonIcon = FtdsIcons.CIRCLE_QUESTION;
+        this.openButtonIconVariant = FtdsIconVariants.regular;
+        this.openButtonLabel = "more info";
+        this.openButtonTooltipPosition = "bottom";
+        this.opened = false;
+        this.hidden = false;
+        this.openButtonSize = DesignSystemSize.medium;
+        this.openButtonFamily = DesignSystemFamily.info;
+        this.isTriggerSlotAssigned = false;
+        this.heading = "";
+        this.margins = FtdsPopoverMargins.default;
+        this.wrapperId = "ftds-popover-wrapper";
+        this.headingId = "ftds-popover-heading";
+        this.contentId = "ftds-popover-content";
+        this.maxWidth = popover.maxWidth;
+        this.onTriggerSlotChange = () => {
+            var _a, _b;
+            const assignedTrigger = (_b = (_a = this.triggerSlot) === null || _a === void 0 ? void 0 : _a.assignedElements()) !== null && _b !== void 0 ? _b : [];
+            this.isTriggerSlotAssigned = assignedTrigger.length > 0;
+        };
+        this.onTriggerKeydown = (event) => {
+            if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                this.open();
+            }
+        };
+        this.watchFocusIn = (event) => {
+            if (this.popoverWrapper && !event.composedPath().includes(this.popoverWrapper)) {
+                this.close();
+            }
+        };
+        this.watchEscapeKey = (event) => {
+            var _a;
+            if (event.key === "Escape") {
+                this.close();
+                (_a = this.openingElement) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        };
+    }
+    get openingElement() {
+        var _a;
+        const assignedTrigger = (_a = this.triggerSlot) === null || _a === void 0 ? void 0 : _a.assignedElements();
+        if ((assignedTrigger === null || assignedTrigger === void 0 ? void 0 : assignedTrigger.length) && assignedTrigger[0] instanceof HTMLElement) {
+            return assignedTrigger[0];
+        }
+        return this.openingButton;
+    }
+    render() {
+        const classes = {
+            opened: this.opened,
+        };
+        return this.hidden ? nothing : html `
+            <div part="root-container" class="${classMap(classes)}">
+                <slot name="trigger"
+                      @slotchange=${this.onTriggerSlotChange}
+                      @click=${this.open}
+                      @keydown=${this.onTriggerKeydown}
+                      @focusin=${this.close}
+                ></slot>
+                ${this.isTriggerSlotAssigned ? nothing : this.renderOpeningButton()}
+                ${this.renderPopover()}
+            </div>
+        `;
+    }
+    renderPopover() {
+        const wrapperClasses = {
+            "ftds-popover--dense": this.margins === FtdsPopoverMargins.dense,
+        };
+        return this.opened ? html `
+            <div part="popover-container">
+                <div part="overlay" @click=${this.close}></div>
+                <div id="${this.wrapperId}" part="wrapper" role="dialog"
+                     class="${classMap(wrapperClasses)}"
+                     aria-labelledby="${ifDefined(this.heading ? `${this.headingId}` : undefined)}"
+                     aria-describedby="${this.contentId}">
+                    <div part="closing-button-container">
+                        ${this.renderClosingButton()}
+                    </div>
+                    ${this.renderFullContent()}
+                </div>
+            </div>
+        ` : nothing;
+    }
+    renderOpeningButton() {
+        return html `
+            <ftds-button @focusin=${this.close}
+                         part="opening-button"
+                         icon="${this.openButtonIcon}"
+                         variant="${this.openButtonIconVariant}"
+                         size="${this.openButtonSize}" family="${this.openButtonFamily}"
+                         label="${this.openButtonLabel}" tooltipposition="${this.openButtonTooltipPosition}"
+                         aria-haspopup="true" aria-expanded="${this.opened}" aria-controls="${this.wrapperId}"
+                         @click=${this.open}>
+            </ftds-button>
+        `;
+    }
+    renderClosingButton() {
+        return html `
+            <ftds-button part="closing-button"
+                         icon="${FtdsIcons.XMARK}"
+                         size="${DesignSystemSize.small}"
+                         family="${DesignSystemFamily.neutral}"
+                         label="${this.closeButtonLabel}"
+                         @click=${this.closeAndFocusOpeningButton}>
+            </ftds-button>
+        `;
+    }
+    renderFullContent() {
+        return html `
+            <slot name="heading">
+                ${this.heading ? html `
+                        <div id="ftds-popover-heading" part="heading">
+                            <ftds-typography element="span" variant="${FtdsTypographyVariants.body2semibold}">
+                                ${this.heading}
+                            </ftds-typography>
+                        </div>
+                    ` : nothing}
+            </slot>
+            <div id="ftds-popover-content" part="content">
+                <ftds-typography variant="${FtdsTypographyVariants.body2medium}">
+                    <slot part="popover-content-slot"></slot>
+                </ftds-typography>
+            </div>
+            <ftds-typography variant="${FtdsTypographyVariants.body2medium}" part="popover-link-typography">
+                <slot name="link"
+                      part="popover-link"
+                      @slotchange=${() => this.requestUpdate()}
+                ></slot>
+            </ftds-typography>
+            <div part="popover-sections">
+                <slot name="sections" part="popover-sections-slot"></slot>
+            </div>
+        `;
+    }
+    hideUnusedSlots() {
+        var _a, _b, _c;
+        (_a = this.popoverLinkTypography) === null || _a === void 0 ? void 0 : _a.classList.toggle("hidden", this.hasEmptySlot(this.slottedLinkContent));
+        (_b = this.popoverContentDiv) === null || _b === void 0 ? void 0 : _b.classList.toggle("hidden", this.hasEmptySlot(this.popoverContentSlot));
+        (_c = this.popoverSectionsDiv) === null || _c === void 0 ? void 0 : _c.classList.toggle("hidden", this.hasEmptySlot(this.popoverSectionsSlot));
+    }
+    hasEmptySlot(slot) {
+        return unslotText(slot).trim().length === 0;
+    }
+    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 } }));
+    }
+    closeAndFocusOpeningButton() {
+        var _a;
+        this.close();
+        (_a = this.openingElement) === null || _a === void 0 ? void 0 : _a.focus();
+        if (window.FluidTopicsA11yHints.isKeyboardNavigation && this.openingElement instanceof FtdsButton) {
+            this.openingElement.showTooltip();
+        }
+    }
+    async positionWrapper() {
+        var _a, _b;
+        if (this.popoverWrapper) {
+            this.popoverWrapper.classList.remove("positioned");
+            this.popoverWrapper.style.left = "";
+            this.popoverWrapper.style.top = "";
+            if (this.openingElement) {
+                const allowedPlacements = [
+                    "bottom-start",
+                    "right-start",
+                    "bottom-end",
+                    "right-end",
+                    "left-start",
+                    "left-end",
+                    "top-start",
+                    "top-end",
+                ];
+                const defaultPlacement = "bottom-start";
+                const options = { placement: defaultPlacement, allowedPlacements: allowedPlacements, maxWidthCssVariable: this.maxWidth };
+                const { x, y } = await computeOffsetAutoPosition(this.openingElement, this.popoverWrapper, options);
+                this.popoverWrapper.style.left = `${x}px`;
+                this.popoverWrapper.style.top = `${y}px`;
+            }
+            this.popoverWrapper.classList.add("positioned");
+        }
+        this.hideUnusedSlots();
+        (_a = this.closingButton) === null || _a === void 0 ? void 0 : _a.focus();
+        if (window.FluidTopicsA11yHints.isKeyboardNavigation) {
+            (_b = this.closingButton) === null || _b === void 0 ? void 0 : _b.showTooltip();
+        }
+    }
+}
+FtdsPopover.styles = styles;
+FtdsPopover.elementDefinitions = {
+    "ftds-typography": FtdsTypography,
+    "ftds-button": FtdsButton,
+};
+__decorate([
+    property()
+], FtdsPopover.prototype, "closeButtonLabel", void 0);
+__decorate([
+    property()
+], FtdsPopover.prototype, "openButtonIcon", void 0);
+__decorate([
+    property()
+], FtdsPopover.prototype, "openButtonIconVariant", void 0);
+__decorate([
+    property()
+], FtdsPopover.prototype, "openButtonLabel", void 0);
+__decorate([
+    property()
+], FtdsPopover.prototype, "openButtonTooltipPosition", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsPopover.prototype, "opened", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsPopover.prototype, "hidden", void 0);
+__decorate([
+    property({ type: DesignSystemSize })
+], FtdsPopover.prototype, "openButtonSize", void 0);
+__decorate([
+    property({ type: DesignSystemFamily })
+], FtdsPopover.prototype, "openButtonFamily", void 0);
+__decorate([
+    state()
+], FtdsPopover.prototype, "isTriggerSlotAssigned", void 0);
+__decorate([
+    property()
+], FtdsPopover.prototype, "heading", void 0);
+__decorate([
+    property()
+], FtdsPopover.prototype, "margins", void 0);
+__decorate([
+    query(`[part="wrapper"]`)
+], FtdsPopover.prototype, "popoverWrapper", void 0);
+__decorate([
+    query(`slot[name="trigger"]`)
+], FtdsPopover.prototype, "triggerSlot", 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="content"]`)
+], FtdsPopover.prototype, "popoverContentDiv", void 0);
+__decorate([
+    query(`[part="popover-content-slot"]`)
+], FtdsPopover.prototype, "popoverContentSlot", void 0);
+__decorate([
+    query(`[part="popover-link"]`)
+], FtdsPopover.prototype, "slottedLinkContent", void 0);
+__decorate([
+    query(`[part="popover-link-typography"]`)
+], FtdsPopover.prototype, "popoverLinkTypography", void 0);
+__decorate([
+    query(`[part="popover-sections"]`)
+], FtdsPopover.prototype, "popoverSectionsDiv", void 0);
+__decorate([
+    query(`[part="popover-sections-slot"]`)
+], FtdsPopover.prototype, "popoverSectionsSlot", void 0);