@fluid-topics/ftds-floating-menu 2.1.0

package/README.md

@@ -0,0 +1,19 @@
+The design system floating menu component
+
+## Install
+
+```shell
+npm install @fluid-topics/ftds-floating-menu
+yarn add @fluid-topics/ftds-floating-menu
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ftds-floating-menu"
+
+function render() {
+    return html` <ftds-floating-menu foo="bar"></ftds-floating-menu> `
+}
+```

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,9 @@
+import { FtdsFloatingMenu } from "./ftds-floating-menu";
+import { FtdsFloatingMenuItem } from "./ftds-floating-menu-item";
+import { FtdsFloatingMenuLabel } from "./ftds-floating-menu-label";
+declare const _default: {
+    "ftds-floating-menu": typeof FtdsFloatingMenu;
+    "ftds-floating-menu-item": typeof FtdsFloatingMenuItem;
+    "ftds-floating-menu-label": typeof FtdsFloatingMenuLabel;
+};
+export default _default;

package/build/definitions.js

@@ -0,0 +1,8 @@
+import { FtdsFloatingMenu } from "./ftds-floating-menu";
+import { FtdsFloatingMenuItem } from "./ftds-floating-menu-item";
+import { FtdsFloatingMenuLabel } from "./ftds-floating-menu-label";
+export default {
+    "ftds-floating-menu": FtdsFloatingMenu,
+    "ftds-floating-menu-item": FtdsFloatingMenuItem,
+    "ftds-floating-menu-label": FtdsFloatingMenuLabel,
+};

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

@@ -0,0 +1,20 @@
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtdsFloatingMenuItemProperties } from "./ftds-floating-menu-item.properties";
+import { FtdsIcons, FtdsIconVariants } from "@fluid-topics/ftds-icon";
+import { ClassInfo } from "lit/directives/class-map.js";
+export declare class FtdsFloatingMenuItemSelectEvent extends CustomEvent<string> {
+    constructor(value: string);
+}
+export declare class FtdsFloatingMenuItem extends FtLitElement implements FtdsFloatingMenuItemProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    iconVariant?: FtdsIconVariants;
+    icon?: FtdsIcons;
+    value: string;
+    notFocusable: boolean;
+    disabled: boolean;
+    get floatingClasses(): ClassInfo;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private onClick;
+    private onKeyDown;
+}

package/build/ftds-floating-menu-item.js

@@ -0,0 +1,90 @@
+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 } from "lit/decorators.js";
+import { FtLitElement, } from "@fluid-topics/ft-wc-utils";
+import { itemStyles } from "./ftds-floating-menu-item.styles";
+import { FtdsIcon, } from "@fluid-topics/ftds-icon";
+import { FtRipple } from "@fluid-topics/ft-ripple";
+import { FtdsTypography, FtdsTypographyVariants, } from "@fluid-topics/ftds-typography";
+import { classMap, } from "lit/directives/class-map.js";
+export class FtdsFloatingMenuItemSelectEvent extends CustomEvent {
+    constructor(value) {
+        super("ftds-floating-menu-item-select", { detail: value, bubbles: true, composed: true });
+    }
+}
+export class FtdsFloatingMenuItem extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.value = "";
+        this.notFocusable = false;
+        this.disabled = false;
+    }
+    get floatingClasses() {
+        return {
+            "ftds-floating-menu-item": true,
+            "ftds-floating-menu-item--disabled": this.disabled,
+        };
+    }
+    render() {
+        return html `
+            <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
+                    ?disabled=${this.disabled}
+                ></ft-ripple>
+                ${this.icon ? html `
+                        <ftds-icon .variant=${this.iconVariant} .icon=${this.icon}></ftds-icon>
+                    ` : nothing}
+                <ftds-typography variant="${FtdsTypographyVariants.body2regular}">
+                    <slot></slot>
+                </ftds-typography>
+            </div>
+        `;
+    }
+    onClick(event) {
+        if (this.disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            event.stopImmediatePropagation();
+        }
+        else {
+            this.dispatchEvent(new FtdsFloatingMenuItemSelectEvent(this.value));
+        }
+    }
+    onKeyDown(event) {
+        if (event.key == "Enter" || event.key == " ") {
+            event.preventDefault();
+            this.dispatchEvent(new FtdsFloatingMenuItemSelectEvent(this.value));
+        }
+    }
+}
+FtdsFloatingMenuItem.elementDefinitions = {
+    "ftds-icon": FtdsIcon,
+    "ft-ripple": FtRipple,
+    "ftds-typography": FtdsTypography,
+};
+// language=CSS
+FtdsFloatingMenuItem.styles = itemStyles;
+__decorate([
+    property()
+], FtdsFloatingMenuItem.prototype, "iconVariant", void 0);
+__decorate([
+    property()
+], FtdsFloatingMenuItem.prototype, "icon", void 0);
+__decorate([
+    property()
+], FtdsFloatingMenuItem.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsFloatingMenuItem.prototype, "notFocusable", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsFloatingMenuItem.prototype, "disabled", void 0);

package/build/ftds-floating-menu-item.properties.d.ts

@@ -0,0 +1,7 @@
+import { FtdsIconVariants } from "@fluid-topics/ftds-icon/build/ftds-icon.properties";
+import { FtdsIcons } from "@fluid-topics/ftds-icon";
+export interface FtdsFloatingMenuItemProperties {
+    iconVariant?: FtdsIconVariants;
+    icon?: FtdsIcons;
+    value: string;
+}

package/build/ftds-floating-menu-item.properties.js

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

package/build/ftds-floating-menu-item.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const FtdsFloatingMenuItemCssVariables: {
+    iconColor: import("@fluid-topics/design-system-variables").FtCssVariable;
+};
+export declare const itemStyles: import("lit").CSSResult;

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

@@ -0,0 +1,42 @@
+import { css } from "lit";
+import { designSystemVariables, FtCssVariableFactory, } from "@fluid-topics/ft-wc-utils";
+export const FtdsFloatingMenuItemCssVariables = {
+    iconColor: FtCssVariableFactory.extend("--ftds-floating-menu-icon-color", "", designSystemVariables.colorOnSurfaceMedium),
+};
+// language=CSS
+export const itemStyles = css `
+    .ftds-floating-menu-item {
+        cursor: pointer;
+        display: flex;
+        position: relative;
+        align-items: center;
+        justify-content: flex-start;
+        overflow: hidden;
+        padding: 4px 16px;
+        outline: none;
+        min-height: 48px;
+        gap: 16px;
+    }
+
+    .ftds-floating-menu-item--disabled {
+        cursor: default;
+        opacity: 0.4;
+    }
+
+    .ftds-floating-menu-item ftds-icon {
+        color: ${FtdsFloatingMenuItemCssVariables.iconColor};
+        margin-left: 0;
+        flex-shrink: 0;
+        flex-grow: 0;
+    }
+
+    .ftds-floating-menu-item ft-typography {
+        flex-shrink: 1;
+        flex-grow: 1;
+        width: max-content;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        word-break: break-word;
+        hyphens: auto;
+    }
+`;

package/build/ftds-floating-menu-label.d.ts

@@ -0,0 +1,7 @@
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtdsFloatingMenuLabelProperties } from "./ftds-floating-menu-label.properties";
+export declare class FtdsFloatingMenuLabel extends FtLitElement implements FtdsFloatingMenuLabelProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    protected render(): import("lit-html").TemplateResult<1>;
+}

package/build/ftds-floating-menu-label.js

@@ -0,0 +1,19 @@
+import { html } from "lit";
+import { FtLitElement, } from "@fluid-topics/ft-wc-utils";
+import { FtdsTypography, FtdsTypographyVariants, } from "@fluid-topics/ftds-typography";
+import { labelStyles } from "./ftds-floating-menu-label.styles";
+export class FtdsFloatingMenuLabel extends FtLitElement {
+    render() {
+        return html `
+            <div class="ft-floating-menu-label">
+                <ftds-typography variant="${FtdsTypographyVariants.caption1medium}">
+                    <slot></slot>
+                </ftds-typography>
+            </div>
+        `;
+    }
+}
+FtdsFloatingMenuLabel.elementDefinitions = {
+    "ftds-typography": FtdsTypography,
+};
+FtdsFloatingMenuLabel.styles = labelStyles;

package/build/ftds-floating-menu-label.properties.d.ts

@@ -0,0 +1,2 @@
+export interface FtdsFloatingMenuLabelProperties {
+}

package/build/ftds-floating-menu-label.properties.js

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

package/build/ftds-floating-menu-label.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const FtdsFloatingMenuLabelCssVariables: {
+    color: import("@fluid-topics/design-system-variables").FtCssVariable;
+};
+export declare const labelStyles: import("lit").CSSResult;

package/build/ftds-floating-menu-label.styles.js

@@ -0,0 +1,20 @@
+import { css } from "lit";
+import { designSystemVariables, FtCssVariableFactory, } from "@fluid-topics/ft-wc-utils";
+export const FtdsFloatingMenuLabelCssVariables = {
+    color: FtCssVariableFactory.extend("--ftds-floating-menu-label-color", "", designSystemVariables.colorOnSurfaceMedium),
+};
+// language=CSS
+export const labelStyles = css `
+    .ftds-floating-menu-label {
+        padding: 4px 8px;
+    }
+
+    .ftds-floating-menu-label ft-typography {
+        flex-shrink: 1;
+        flex-grow: 1;
+        width: max-content;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        color: ${FtdsFloatingMenuLabelCssVariables.color}
+    }
+`;

package/build/ftds-floating-menu.d.ts

@@ -0,0 +1,55 @@
+import { PropertyValues } from "lit";
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtdsIconVariants } from "@fluid-topics/ftds-icon/build/ftds-icon.properties";
+import { Position } from "@fluid-topics/ft-tooltip/build/ft-tooltip.properties";
+import { FtdsFloatingMenuProperties, FtdsHorizontalAlignment, FtdsVerticalAlignment } from "./ftds-floating-menu.properties";
+import { FtdsIcons } from "@fluid-topics/ftds-icon";
+export declare class FtdsFloatingMenuStatusChangeEvent extends CustomEvent<{
+    open: boolean;
+}> {
+    constructor(open: boolean);
+}
+export declare class FloatingMenuCloseEvent extends CustomEvent<void> {
+    constructor();
+}
+export declare class FtdsFloatingMenuSelectEvent extends CustomEvent<string> {
+    constructor(detail: string);
+}
+export declare class FtdsFloatingMenu extends FtLitElement implements FtdsFloatingMenuProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult[];
+    private menuOpen;
+    forceMenuOpen: boolean;
+    private container;
+    private menuWrapper;
+    private actionButton?;
+    private customToggle;
+    primary: boolean;
+    secondary: boolean;
+    tertiary: boolean;
+    neutral: boolean;
+    small: boolean;
+    label?: string;
+    tooltipPosition?: Position;
+    iconVariant: FtdsIconVariants;
+    icon: FtdsIcons;
+    text?: string;
+    horizontalAlignment: FtdsHorizontalAlignment;
+    verticalAlignment: FtdsVerticalAlignment;
+    disabled: boolean;
+    closeMenuMatchers: string[];
+    protected updated(props: PropertyValues): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+    toggleMenu(): void;
+    openMenu(): void;
+    closeMenu(): void;
+    private hideOptionsOnClickOutside;
+    private onCloseEvent;
+    private onItemSelect;
+    private onContentClick;
+    disconnectedCallback(): void;
+    protected contentAvailableCallback(props: PropertyValues): void;
+    private positionMenuWrapper;
+    private convertPlacement;
+    private onKeyDown;
+}

package/build/ftds-floating-menu.js

@@ -0,0 +1,232 @@
+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, } from "lit";
+import { property, query, queryAssignedElements, state, } from "lit/decorators.js";
+import { eventPathContainsMatchingElement, FtLitElement, jsonProperty, } from "@fluid-topics/ft-wc-utils";
+import { FtdsButton } from "@fluid-topics/ftds-button";
+import { classMap } from "lit/directives/class-map.js";
+import { FtdsFloatingMenuItem, } from "./ftds-floating-menu-item";
+import { FtdsIconVariants } from "@fluid-topics/ftds-icon/build/ftds-icon.properties";
+import { computeOffsetPosition } from "@fluid-topics/ft-wc-utils/build/floating";
+import { styles } from "./ftds-floating-menu.styles";
+import { FtdsIcons } from "@fluid-topics/ftds-icon";
+export class FtdsFloatingMenuStatusChangeEvent extends CustomEvent {
+    constructor(open) {
+        super("change", { detail: { open } });
+    }
+}
+export class FloatingMenuCloseEvent extends CustomEvent {
+    constructor() {
+        super("close-ftds-floating-menu");
+    }
+}
+export class FtdsFloatingMenuSelectEvent extends CustomEvent {
+    constructor(detail) {
+        super("select", { detail });
+    }
+}
+export class FtdsFloatingMenu extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.menuOpen = false;
+        this.forceMenuOpen = false;
+        this.primary = false;
+        this.secondary = false;
+        this.tertiary = false;
+        this.neutral = false;
+        this.small = false;
+        this.iconVariant = FtdsIconVariants.regular;
+        this.icon = FtdsIcons.ELLIPSIS_VERTICAL;
+        this.horizontalAlignment = "left";
+        this.verticalAlignment = "bottom";
+        this.disabled = false;
+        this.closeMenuMatchers = [];
+        this.hideOptionsOnClickOutside = (e) => {
+            this.menuOpen = this.menuOpen && e.composedPath().includes(this.container);
+        };
+    }
+    updated(props) {
+        super.updated(props);
+        if (props.has("menuOpen")) {
+            this.dispatchEvent(new FtdsFloatingMenuStatusChangeEvent(this.menuOpen));
+        }
+    }
+    render() {
+        const classes = {
+            "ftds-floating-menu": true,
+            "ftds-floating-menu--open": this.forceMenuOpen || this.menuOpen,
+            ["ftds-floating-menu--" + this.horizontalAlignment.toLowerCase()]: true,
+            ["ftds-floating-menu--" + this.verticalAlignment.toLowerCase()]: true,
+        };
+        return html `
+            <div part="container" class="${classMap(classes)}" @keydown=${this.onKeyDown}>
+                <slot name="toggle"
+                      part="toggle"
+                      @click=${this.toggleMenu}
+                      aria-controls="ftds-floating-menu-options"
+                      aria-expanded="${this.forceMenuOpen || this.menuOpen}">
+                    <ftds-button id="actions-button"
+                                 part="button"
+                                 ?primary=${this.primary}
+                                 ?secondary=${this.secondary}
+                                 ?tertiary=${this.tertiary}
+                                 ?neutral=${this.neutral}
+                                 ?small=${this.small}
+                                 dense round
+                                 icon="${this.icon}"
+                                 .iconVariant=${this.iconVariant}
+                                 .label=${this.label}
+                                 .tooltipPosition=${this.tooltipPosition}
+                                 ?disabled=${this.disabled}>
+                        ${this.text}
+                    </ftds-button>
+                </slot>
+                <div part="options-wrapper" class="ftds-floating-menu--wrapper">
+                    <div id="ftds-floating-menu-options"
+                         class="ftds-floating-menu--options"
+                         part="options"
+                         @ftds-floating-menu-item-select=${this.onItemSelect}>
+                        <slot id="ftds-floating-menu-content"
+                              @click=${this.onContentClick}
+                              @close-ftds-floating-menu=${this.onCloseEvent}
+                        ></slot>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+    toggleMenu() {
+        this.menuOpen = !this.menuOpen;
+    }
+    openMenu() {
+        this.menuOpen = true;
+    }
+    closeMenu() {
+        this.menuOpen = false;
+    }
+    onCloseEvent(e) {
+        e.stopPropagation();
+        this.closeMenu();
+    }
+    onItemSelect(e) {
+        e.stopPropagation();
+        this.dispatchEvent(new FtdsFloatingMenuSelectEvent(e.detail));
+        this.closeMenu();
+    }
+    onContentClick(e) {
+        if (eventPathContainsMatchingElement(e, this.closeMenuMatchers, this)) {
+            this.closeMenu();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener("click", this.hideOptionsOnClickOutside);
+    }
+    contentAvailableCallback(props) {
+        super.contentAvailableCallback(props);
+        if (props.has("menuOpen")) {
+            if (this.menuOpen) {
+                this.menuWrapper.classList.remove("ftds-floating-menu--wrapper-positioned");
+                this.positionMenuWrapper();
+                document.addEventListener("click", this.hideOptionsOnClickOutside);
+            }
+            else {
+                document.removeEventListener("click", this.hideOptionsOnClickOutside);
+            }
+        }
+    }
+    async positionMenuWrapper() {
+        this.menuWrapper.style.left = "";
+        this.menuWrapper.style.top = "";
+        const reference = this.customToggle.length > 0 ? this.customToggle[0] : this.actionButton;
+        const { x, y } = await computeOffsetPosition(reference, this.menuWrapper, this.convertPlacement());
+        this.menuWrapper.style.left = `${x}px`;
+        this.menuWrapper.style.top = `${y}px`;
+        this.menuWrapper.classList.add("ftds-floating-menu--wrapper-positioned");
+    }
+    convertPlacement() {
+        switch (this.horizontalAlignment) {
+            case "left":
+                return this.verticalAlignment + "-start";
+            case "right":
+                return this.verticalAlignment + "-end";
+            case "center":
+                return this.verticalAlignment + "-center";
+        }
+    }
+    onKeyDown(e) {
+        if (e.code == "Escape") {
+            this.closeMenu();
+            e.stopPropagation();
+        }
+    }
+}
+FtdsFloatingMenu.elementDefinitions = {
+    "ftds-floating-menu-item": FtdsFloatingMenuItem,
+    "ftds-button": FtdsButton,
+};
+FtdsFloatingMenu.styles = [styles];
+__decorate([
+    state()
+], FtdsFloatingMenu.prototype, "menuOpen", void 0);
+__decorate([
+    state()
+], FtdsFloatingMenu.prototype, "forceMenuOpen", void 0);
+__decorate([
+    query(".ftds-floating-menu")
+], FtdsFloatingMenu.prototype, "container", void 0);
+__decorate([
+    query(".ftds-floating-menu--wrapper")
+], FtdsFloatingMenu.prototype, "menuWrapper", void 0);
+__decorate([
+    query("#actions-button")
+], FtdsFloatingMenu.prototype, "actionButton", void 0);
+__decorate([
+    queryAssignedElements({ slot: "toggle" })
+], FtdsFloatingMenu.prototype, "customToggle", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsFloatingMenu.prototype, "primary", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsFloatingMenu.prototype, "secondary", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsFloatingMenu.prototype, "tertiary", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsFloatingMenu.prototype, "neutral", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsFloatingMenu.prototype, "small", void 0);
+__decorate([
+    property()
+], FtdsFloatingMenu.prototype, "label", void 0);
+__decorate([
+    property()
+], FtdsFloatingMenu.prototype, "tooltipPosition", void 0);
+__decorate([
+    property()
+], FtdsFloatingMenu.prototype, "iconVariant", void 0);
+__decorate([
+    property()
+], FtdsFloatingMenu.prototype, "icon", void 0);
+__decorate([
+    property()
+], FtdsFloatingMenu.prototype, "text", void 0);
+__decorate([
+    property()
+], FtdsFloatingMenu.prototype, "horizontalAlignment", void 0);
+__decorate([
+    property()
+], FtdsFloatingMenu.prototype, "verticalAlignment", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsFloatingMenu.prototype, "disabled", void 0);
+__decorate([
+    jsonProperty([])
+], FtdsFloatingMenu.prototype, "closeMenuMatchers", void 0);