@fluid-topics/ft-floating-menu 0.3.22

package/README.md

@@ -0,0 +1,22 @@
+Floating menu component
+
+## Install
+
+```shell
+npm install @fluid-topics/ft-floating-menu
+yarn add @fluid-topics/ft-floating-menu
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ft-floating-menu"
+
+function render() {
+    return html` <ft-floating-menu>
+        <ft-floating-menu-item icon="help" value="1">help</ft-floating-menu-item>
+        <ft-floating-menu-item icon="check" value="2">check</ft-floating-menu-item>
+    </ft-floating-menu> `
+}
+```

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

@@ -0,0 +1,5 @@
+export declare const FtFloatingMenuItemCssVariables: {
+    iconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+};
+export declare const itemStyles: import("lit").CSSResult;
+//# sourceMappingURL=ft-floating-menu-item.css.d.ts.map

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

@@ -0,0 +1,31 @@
+import { css } from "lit";
+import { designSystemVariables, FtCssVariableFactory } from "@fluid-topics/ft-wc-utils";
+export const FtFloatingMenuItemCssVariables = {
+    iconColor: FtCssVariableFactory.extend("--ft-floating-menu-icon-color", designSystemVariables.colorOnSurfaceMedium)
+};
+// language=CSS
+export const itemStyles = css `
+    .ft-floating-menu-item {
+        cursor: pointer;
+        display: flex;
+        position: relative;
+        align-items: center;
+        justify-content: flex-start;
+        overflow: hidden;
+        padding: 0 16px;
+        outline: none;
+        height: 48px;
+    }
+    
+    ft-typography {
+        white-space: nowrap;
+    }
+
+    .ft-floating-menu-item ft-icon {
+        --ft-icon-font-size: 24px;
+        color: ${FtFloatingMenuItemCssVariables.iconColor};
+        margin-left: 0;
+        margin-right: 32px;
+    }
+`;
+//# sourceMappingURL=ft-floating-menu-item.css.js.map

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

@@ -0,0 +1,14 @@
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtFloatingMenuItemProperties } from "./ft-floating-menu-item.properties";
+export declare class FtFloatingMenuItemSelect extends CustomEvent<string> {
+    constructor(value: string);
+}
+export declare class FtFloatingMenuItem extends FtLitElement implements FtFloatingMenuItemProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    icon?: string;
+    value: string;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private onClick;
+}
+//# sourceMappingURL=ft-floating-menu-item.d.ts.map

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

@@ -0,0 +1,53 @@
+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 } from "lit/decorators.js";
+import { FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { itemStyles } from "./ft-floating-menu-item.css";
+import { FtIcon } from "@fluid-topics/ft-icon";
+import { FtRipple } from "@fluid-topics/ft-ripple";
+import { FtTypography } from "@fluid-topics/ft-typography";
+export class FtFloatingMenuItemSelect extends CustomEvent {
+    constructor(value) {
+        super("select", { detail: value, bubbles: true, composed: true });
+    }
+}
+export class FtFloatingMenuItem extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.value = "";
+    }
+    render() {
+        return html `
+            <div class="ft-floating-menu-item"
+                 @click=${this.onClick}>
+                <ft-ripple></ft-ripple>
+                <ft-icon variant="material">${this.icon}</ft-icon>
+                <ft-typography variant="body2">
+                    <slot></slot>
+                </ft-typography>
+            </div>
+        `;
+    }
+    onClick(event) {
+        this.dispatchEvent(new FtFloatingMenuItemSelect(this.value));
+    }
+}
+FtFloatingMenuItem.elementDefinitions = {
+    "ft-icon": FtIcon,
+    "ft-ripple": FtRipple,
+    "ft-typography": FtTypography,
+};
+// language=CSS
+FtFloatingMenuItem.styles = itemStyles;
+__decorate([
+    property({ type: String })
+], FtFloatingMenuItem.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], FtFloatingMenuItem.prototype, "value", void 0);
+//# sourceMappingURL=ft-floating-menu-item.js.map

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

@@ -0,0 +1,5 @@
+export interface FtFloatingMenuItemProperties {
+    icon?: string;
+    value: string;
+}
+//# sourceMappingURL=ft-floating-menu-item.properties.d.ts.map

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ft-floating-menu-item.properties.js.map

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

@@ -0,0 +1,8 @@
+export declare const FtFloatingMenuCssVariables: {
+    textColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    colorSurface: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    menuElevation: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    borderRadiusS: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+};
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=ft-floating-menu.css.d.ts.map

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

@@ -0,0 +1,44 @@
+import { css } from "lit";
+import { designSystemVariables, FtCssVariableFactory } from "@fluid-topics/ft-wc-utils";
+export const FtFloatingMenuCssVariables = {
+    textColor: FtCssVariableFactory.extend("--ft-floating-menu-text-color", designSystemVariables.colorOnSurfaceHigh),
+    colorSurface: FtCssVariableFactory.external(designSystemVariables.colorSurface, "Design system"),
+    menuElevation: FtCssVariableFactory.external(designSystemVariables.elevation02, "Design system"),
+    borderRadiusS: FtCssVariableFactory.external(designSystemVariables.borderRadiusS, "Design system"),
+};
+// language=CSS
+export const styles = css `
+    .ft-floating-menu {
+        color: ${FtFloatingMenuCssVariables.textColor};
+        position: relative;
+    }
+
+    .ft-floating-menu--options {
+        box-shadow: ${FtFloatingMenuCssVariables.menuElevation};
+        background-color: ${FtFloatingMenuCssVariables.colorSurface};
+        border-radius: ${FtFloatingMenuCssVariables.borderRadiusS};
+        color: ${FtFloatingMenuCssVariables.textColor};
+        display: none;
+        list-style: none;
+        left: 0;
+        max-width: calc(100vw - 32px);
+        max-height: calc(100vh - 32px);
+        margin: 0;
+        padding-left: 0;
+        position: absolute;
+        transform: scale(1);
+        transform-origin: left top;
+        overflow: auto;
+        top: 0;
+        transition: opacity 0.03s linear 0s, transform 0.12s cubic-bezier(0, 0, 0.2, 1) 0s, height 250ms cubic-bezier(0, 0, 0.2, 1) 0s;
+        opacity: 0;
+        will-change: transform, opacity;
+        z-index: 8;
+    }
+
+    .ft-floating-menu--open .ft-floating-menu--options {
+        display: inline-block;
+        opacity: 1;
+    }
+`;
+//# sourceMappingURL=ft-floating-menu.css.js.map

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

@@ -0,0 +1,15 @@
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtFloatingMenuProperties } from "./ft-floating-menu.properties";
+export declare class FtFloatingMenu extends FtLitElement implements FtFloatingMenuProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    private menuOpen;
+    private container;
+    private menuContainer;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private onClick;
+    private onClickItem;
+    private hideOptions;
+    disconnectedCallback(): void;
+}
+//# sourceMappingURL=ft-floating-menu.d.ts.map

package/build/ft-floating-menu.js

@@ -0,0 +1,75 @@
+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 { query, state } from "lit/decorators.js";
+import { FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { styles } from "./ft-floating-menu.css";
+import { FtButton } from "@fluid-topics/ft-button";
+import { classMap } from "lit/directives/class-map.js";
+import { FtFloatingMenuItem } from "./ft-floating-menu-item";
+export class FtFloatingMenu extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.menuOpen = false;
+        this.hideOptions = (e) => {
+            this.menuOpen = this.menuOpen && e.composedPath().includes(this.menuContainer);
+            if (!this.menuOpen) {
+                document.removeEventListener("click", this.hideOptions);
+            }
+        };
+    }
+    render() {
+        const classes = {
+            "ft-floating-menu": true,
+            "ft-floating-menu--open": this.menuOpen,
+        };
+        return html `
+            <div class="${classMap(classes)}">
+                <ft-button part="button"
+                           dense round
+                           icon="more_vert"
+                           id="actions-button"
+                           @click=${this.onClick}
+                           label="Menu">
+                </ft-button>
+                <div class="ft-floating-menu--options"
+                     @select="${this.onClickItem}">
+                    <slot></slot>
+                </div>
+            </div>
+        `;
+    }
+    onClick(event) {
+        console.log("open");
+        this.menuOpen = true;
+        setTimeout(() => document.addEventListener("click", this.hideOptions));
+    }
+    onClickItem(event) {
+        console.log("close");
+        this.menuOpen = false;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener("click", this.hideOptions);
+    }
+}
+FtFloatingMenu.elementDefinitions = {
+    "ft-button": FtButton,
+    "ft-floating-menu-item": FtFloatingMenuItem,
+};
+// language=CSS
+FtFloatingMenu.styles = styles;
+__decorate([
+    state()
+], FtFloatingMenu.prototype, "menuOpen", void 0);
+__decorate([
+    query(".ft-floating-menu")
+], FtFloatingMenu.prototype, "container", void 0);
+__decorate([
+    query(".ft-floating-menu--options")
+], FtFloatingMenu.prototype, "menuContainer", void 0);
+//# sourceMappingURL=ft-floating-menu.js.map