@fluid-topics/ft-popover 2.0.36 → 2.0.38

package/build/ft-base-popover.d.ts

@@ -3,6 +3,7 @@ import { FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { FtIcons } from "@fluid-topics/ft-icon";
 import { DesignSystemFamily, DesignSystemSize } from "@fluid-topics/design-system-variables";
 import { nothing, PropertyValues, TemplateResult } from "lit";
+import { ClassInfo } from "lit/directives/class-map.js";
 import { FtBaseButton } from "@fluid-topics/ft-button/build/ft-base-button";
 export interface FtBasePopoverProperties {
     opened?: boolean;
@@ -21,9 +22,11 @@ export declare abstract class FtBasePopover extends FtLitElement implements FtBa
     hidden: boolean;
     openButtonSize: DesignSystemSize;
     openButtonFamily: DesignSystemFamily;
+    private isTriggerSlotAssigned;
     protected abstract openingButton?: FtBaseButton;
     protected abstract closingButton?: FtBaseButton;
     private popoverWrapper?;
+    private triggerSlot?;
     protected abstract wrapperId: string;
     protected abstract headingId: string;
     protected abstract contentId: string;
@@ -32,13 +35,17 @@ export declare abstract class FtBasePopover extends FtLitElement implements FtBa
     protected abstract renderClosingButton(): TemplateResult;
     protected abstract renderFullContent(): TemplateResult;
     protected abstract hideUnusedSlots(): void;
+    get openingElement(): HTMLElement | undefined;
     protected render(): typeof nothing | TemplateResult<1>;
     protected renderPopover(): typeof nothing | TemplateResult<1>;
     updated(properties: PropertyValues<FtBasePopover>): void;
     close(): void;
     open(): void;
     protected closeAndFocusOpeningButton(): void;
+    private onTriggerSlotChange;
+    private onTriggerKeydown;
     private watchFocusIn;
     private watchEscapeKey;
     private positionWrapper;
+    protected getPopoverWrapperClasses(): ClassInfo;
 }

package/build/ft-base-popover.js

@@ -4,13 +4,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { computeOffsetAutoPosition, FtLitElement } from "@fluid-topics/ft-wc-utils";
-import { property, query } from "lit/decorators.js";
+import { computeOffsetAutoPosition, FtLitElement, } from "@fluid-topics/ft-wc-utils";
+import { property, query, state, } from "lit/decorators.js";
 import { FtIcons } from "@fluid-topics/ft-icon";
 import { DesignSystemFamily, DesignSystemSize, } from "@fluid-topics/design-system-variables";
-import { html, nothing } from "lit";
-import { classMap } from "lit/directives/class-map.js";
+import { html, nothing, } from "lit";
+import { classMap, } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { FtBaseButton } from "@fluid-topics/ft-button/build/ft-base-button";
 import { FtCssVariableFactory } from "@fluid-topics/design-system-variables/build/FtCssVariables";
 export class FtBasePopover extends FtLitElement {
     constructor() {
@@ -24,7 +25,19 @@ export class FtBasePopover extends FtLitElement {
         this.hidden = false;
         this.openButtonSize = DesignSystemSize.medium;
         this.openButtonFamily = DesignSystemFamily.info;
+        this.isTriggerSlotAssigned = false;
         this.maxWidth = FtCssVariableFactory.create("--ft-popover-max-width", "", "SIZE", "464px");
+        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();
@@ -34,17 +47,31 @@ export class FtBasePopover extends FtLitElement {
             var _a;
             if (event.key === "Escape") {
                 this.close();
-                (_a = this.openingButton) === null || _a === void 0 ? void 0 : _a.focus();
+                (_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)}">
-                ${this.renderOpeningButton()}
+                <slot name="trigger"
+                      @slotchange=${this.onTriggerSlotChange}
+                      @click=${this.open}
+                      @keydown=${this.onTriggerKeydown}
+                      @focusin=${this.close}
+                ></slot>
+                ${this.isTriggerSlotAssigned ? nothing : this.renderOpeningButton()}
                 ${this.renderPopover()}
             </div>
         `;
@@ -54,6 +81,7 @@ export class FtBasePopover extends FtLitElement {
             <div part="popover-container">
                 <div part="overlay" @click=${this.close}></div>
                 <div id="${this.wrapperId}" part="wrapper" role="dialog"
+                     class="${classMap(this.getPopoverWrapperClasses())}"
                      aria-labelledby="${ifDefined(this.heading ? `${this.headingId}` : undefined)}"
                      aria-describedby="${this.contentId}">
                     <div part="closing-button-container">
@@ -89,11 +117,13 @@ export class FtBasePopover extends FtLitElement {
         this.dispatchEvent(new CustomEvent("opened-changed", { detail: { opened: true } }));
     }
     closeAndFocusOpeningButton() {
-        var _a, _b;
+        var _a;
         this.close();
-        (_a = this.openingButton) === null || _a === void 0 ? void 0 : _a.focus();
+        (_a = this.openingElement) === null || _a === void 0 ? void 0 : _a.focus();
         if (window.FluidTopicsA11yHints.isKeyboardNavigation) {
-            (_b = this.openingButton) === null || _b === void 0 ? void 0 : _b.showTooltip();
+            if (this.openingElement instanceof FtBaseButton) {
+                this.openingElement.showTooltip();
+            }
         }
     }
     async positionWrapper() {
@@ -102,7 +132,7 @@ export class FtBasePopover extends FtLitElement {
             this.popoverWrapper.classList.remove("positioned");
             this.popoverWrapper.style.left = "";
             this.popoverWrapper.style.top = "";
-            if (this.openingButton) {
+            if (this.openingElement) {
                 const allowedPlacements = [
                     "bottom-start",
                     "right-start",
@@ -111,11 +141,11 @@ export class FtBasePopover extends FtLitElement {
                     "left-start",
                     "left-end",
                     "top-start",
-                    "top-end"
+                    "top-end",
                 ];
                 const defaultPlacement = "bottom-start";
                 const options = { placement: defaultPlacement, allowedPlacements: allowedPlacements, maxWidthCssVariable: this.maxWidth };
-                const { x, y } = await computeOffsetAutoPosition(this.openingButton, this.popoverWrapper, options);
+                const { x, y } = await computeOffsetAutoPosition(this.openingElement, this.popoverWrapper, options);
                 this.popoverWrapper.style.left = `${x}px`;
                 this.popoverWrapper.style.top = `${y}px`;
             }
@@ -127,6 +157,9 @@ export class FtBasePopover extends FtLitElement {
             (_b = this.closingButton) === null || _b === void 0 ? void 0 : _b.showTooltip();
         }
     }
+    getPopoverWrapperClasses() {
+        return {};
+    }
 }
 __decorate([
     property()
@@ -152,6 +185,12 @@ __decorate([
 __decorate([
     property({ type: DesignSystemFamily })
 ], FtBasePopover.prototype, "openButtonFamily", void 0);
+__decorate([
+    state()
+], FtBasePopover.prototype, "isTriggerSlotAssigned", void 0);
 __decorate([
     query(`[part="wrapper"]`)
 ], FtBasePopover.prototype, "popoverWrapper", void 0);
+__decorate([
+    query(`slot[name="trigger"]`)
+], FtBasePopover.prototype, "triggerSlot", void 0);