@fluid-topics/ft-floating-menu 1.3.20 → 1.3.22

package/build/ft-base-floating-menu.d.ts

@@ -3,6 +3,11 @@ import { FtIconVariants } from "@fluid-topics/ft-icon/build/ft-icon.properties";
 import { Position } from "@fluid-topics/ft-tooltip/build/ft-tooltip.properties";
 import { PropertyValues } from "lit";
 import { FtBaseFloatingMenuProperties, FtHorizontalAlignment, FtVerticalAlignment } from "./ft-base-floating-menu.properties";
+export declare class FtFloatingMenuStatusChangeEvent extends CustomEvent<{
+    open: boolean;
+}> {
+    constructor(open: boolean);
+}
 export declare class FloatingMenuCloseEvent extends CustomEvent<void> {
     constructor();
 }
@@ -31,6 +36,7 @@ export declare class FtBaseFloatingMenu extends FtLitElement implements FtBaseFl
     verticalAlignment: FtVerticalAlignment;
     disabled: boolean;
     closeMenuMatchers: string[];
+    protected updated(props: PropertyValues): void;
     protected render(): import("lit-html").TemplateResult<1>;
     toggleMenu(): void;
     openMenu(): void;

package/build/ft-base-floating-menu.js

@@ -6,11 +6,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html } from "lit";
 import { property, query, queryAssignedElements, state } from "lit/decorators.js";
-import { eventPathContainsMatchingElement, FtLitElement, jsonProperty, } from "@fluid-topics/ft-wc-utils";
+import { eventPathContainsMatchingElement, FtLitElement, jsonProperty } from "@fluid-topics/ft-wc-utils";
 import { classMap } from "lit/directives/class-map.js";
 import { FtFloatingMenuItem } from "./ft-floating-menu-item";
 import { FtIconVariants } from "@fluid-topics/ft-icon/build/ft-icon.properties";
 import { computeOffsetPosition } from "@fluid-topics/ft-wc-utils/build/floating";
+export class FtFloatingMenuStatusChangeEvent extends CustomEvent {
+    constructor(open) {
+        super("change", { detail: { open } });
+    }
+}
 export class FloatingMenuCloseEvent extends CustomEvent {
     constructor() {
         super("close-ft-floating-menu");
@@ -41,6 +46,12 @@ class FtBaseFloatingMenu extends FtLitElement {
             this.menuOpen = this.menuOpen && e.composedPath().includes(this.container);
         };
     }
+    updated(props) {
+        super.updated(props);
+        if (props.has("menuOpen")) {
+            this.dispatchEvent(new FtFloatingMenuStatusChangeEvent(this.menuOpen));
+        }
+    }
     render() {
         const classes = {
             "ft-floating-menu": true,
@@ -75,7 +86,7 @@ class FtBaseFloatingMenu extends FtLitElement {
                     <div id="ft-floating-menu-options"
                          class="ft-floating-menu--options"
                          part="options"
-                         @ft-floating-menu-item-select="${this.onItemSelect}">
+                         @ft-floating-menu-item-select=${this.onItemSelect}>
                         <slot id="ft-floating-menu-content"
                               @click=${this.onContentClick}
                               @close-ft-floating-menu=${this.onCloseEvent}