@fluid-topics/ft-floating-menu 2.0.10 → 2.0.12

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

@@ -1,6 +1,7 @@
 import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { FtFloatingMenuItemProperties } from "./ft-floating-menu-item.properties";
 import { FtIconVariants } from "@fluid-topics/ft-icon";
+import { ClassInfo } from "lit/directives/class-map.js";
 export declare class FtFloatingMenuItemSelectEvent extends CustomEvent<string> {
     constructor(value: string);
 }
@@ -11,6 +12,8 @@ export declare class FtFloatingMenuItem extends FtLitElement implements FtFloati
     icon?: string;
     value: string;
     notFocusable: boolean;
+    disabled: boolean;
+    get floatingClasses(): ClassInfo;
     protected render(): import("lit-html").TemplateResult<1>;
     private onClick;
     private onKeyDown;

package/build/ft-floating-menu-item.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 { html, nothing } from "lit";
+import { html, nothing, } from "lit";
 import { property } from "lit/decorators.js";
-import { FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtLitElement, } from "@fluid-topics/ft-wc-utils";
 import { itemStyles } from "./ft-floating-menu-item.styles";
-import { FtIcon } from "@fluid-topics/ft-icon";
+import { FtIcon, } from "@fluid-topics/ft-icon";
 import { FtRipple } from "@fluid-topics/ft-ripple";
 import { FtTypography } from "@fluid-topics/ft-typography";
+import { classMap, } from "lit/directives/class-map.js";
 export class FtFloatingMenuItemSelectEvent extends CustomEvent {
     constructor(value) {
         super("ft-floating-menu-item-select", { detail: value, bubbles: true, composed: true });
@@ -21,17 +22,27 @@ class FtFloatingMenuItem extends FtLitElement {
         super(...arguments);
         this.value = "";
         this.notFocusable = false;
+        this.disabled = false;
+    }
+    get floatingClasses() {
+        return {
+            "ft-floating-menu-item": true,
+            "ft-floating-menu-item--disabled": this.disabled,
+        };
     }
     render() {
         return html `
-            <div class="ft-floating-menu-item"
-                 tabindex=${this.notFocusable ? "-1" : "0"}
+            <div class="${classMap(this.floatingClasses)}"
+                 tabindex="${(this.notFocusable || this.disabled) ? "-1" : "0"}"
+                 aria-disabled="${this.disabled}"
                  @keydown=${(e) => this.onKeyDown(e)}
                  @click=${this.onClick}>
-                <ft-ripple></ft-ripple>
+                <ft-ripple
+                    ?disabled=${this.disabled}
+                ></ft-ripple>
                 ${this.icon ? html `
-                            <ft-icon .variant="${this.iconVariant}" .value="${this.icon}"></ft-icon>
-                        ` : nothing}
+                        <ft-icon .variant=${this.iconVariant} .value=${this.icon}></ft-icon>
+                    ` : nothing}
                 <ft-typography variant="body2">
                     <slot></slot>
                 </ft-typography>
@@ -39,7 +50,14 @@ class FtFloatingMenuItem extends FtLitElement {
         `;
     }
     onClick(event) {
-        this.dispatchEvent(new FtFloatingMenuItemSelectEvent(this.value));
+        if (this.disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            event.stopImmediatePropagation();
+        }
+        else {
+            this.dispatchEvent(new FtFloatingMenuItemSelectEvent(this.value));
+        }
     }
     onKeyDown(event) {
         if (event.key == "Enter" || event.key == " ") {
@@ -67,4 +85,7 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], FtFloatingMenuItem.prototype, "notFocusable", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtFloatingMenuItem.prototype, "disabled", void 0);
 export { FtFloatingMenuItem };

package/build/ft-floating-menu-item.styles.js

@@ -1,7 +1,7 @@
 import { css } from "lit";
-import { designSystemVariables, FtCssVariableFactory } from "@fluid-topics/ft-wc-utils";
+import { designSystemVariables, FtCssVariableFactory, } from "@fluid-topics/ft-wc-utils";
 export const FtFloatingMenuItemCssVariables = {
-    iconColor: FtCssVariableFactory.extend("--ft-floating-menu-icon-color", "", designSystemVariables.colorOnSurfaceMedium)
+    iconColor: FtCssVariableFactory.extend("--ft-floating-menu-icon-color", "", designSystemVariables.colorOnSurfaceMedium),
 };
 // language=CSS
 export const itemStyles = css `
@@ -18,6 +18,11 @@ export const itemStyles = css `
         gap: 16px;
     }
 
+    .ft-floating-menu-item--disabled {
+        cursor: default;
+        opacity: 0.4;
+    }
+
     .ft-floating-menu-item ft-icon {
         color: ${FtFloatingMenuItemCssVariables.iconColor};
         margin-left: 0;