@vaadin/context-menu 24.8.4 → 25.0.0-alpha10

package/src/vaadin-lit-context-menu-overlay.js

@@ -1,51 +0,0 @@
-/**
- * @license
- * Copyright (c) 2016 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { html, LitElement } from 'lit';
-import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
-import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
-import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { MenuOverlayMixin } from './vaadin-menu-overlay-mixin.js';
-import { styles } from './vaadin-menu-overlay-styles.js';
-
-/**
- * An element used internally by `<vaadin-context-menu>`. Not intended to be used separately.
- *
- * @customElement
- * @extends HTMLElement
- * @mixes DirMixin
- * @mixes MenuOverlayMixin
- * @mixes OverlayMixin
- * @mixes ThemableMixin
- * @protected
- */
-export class ContextMenuOverlay extends MenuOverlayMixin(
-  OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))),
-) {
-  static get is() {
-    return 'vaadin-context-menu-overlay';
-  }
-
-  static get styles() {
-    return [overlayStyles, styles];
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <div id="backdrop" part="backdrop" ?hidden="${!this.withBackdrop}"></div>
-      <div part="overlay" id="overlay" tabindex="0">
-        <div part="content" id="content">
-          <slot></slot>
-        </div>
-      </div>
-    `;
-  }
-}
-
-defineCustomElement(ContextMenuOverlay);

package/src/vaadin-lit-context-menu.js

@@ -1,79 +0,0 @@
-/**
- * @license
- * Copyright (c) 2016 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import './vaadin-contextmenu-event.js';
-import './vaadin-lit-context-menu-item.js';
-import './vaadin-lit-context-menu-list-box.js';
-import './vaadin-lit-context-menu-overlay.js';
-import { css, html, LitElement } from 'lit';
-import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
-import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { processTemplates } from '@vaadin/component-base/src/templates.js';
-import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
-import { ContextMenuMixin } from './vaadin-context-menu-mixin.js';
-
-/**
- * LitElement based version of `<vaadin-context-menu>` web component.
- *
- * ## Disclaimer
- *
- * This component is an experiment and not yet a part of Vaadin platform.
- * There is no ETA regarding specific Vaadin version where it'll land.
- * Feel free to try this code in your apps as per Apache 2.0 license.
- */
-class ContextMenu extends ContextMenuMixin(
-  OverlayClassMixin(ElementMixin(ThemePropertyMixin(PolylitMixin(LitElement)))),
-) {
-  static get is() {
-    return 'vaadin-context-menu';
-  }
-
-  static get styles() {
-    return css`
-      :host {
-        display: block;
-      }
-
-      :host([hidden]) {
-        display: none !important;
-      }
-    `;
-  }
-
-  /** @protected */
-  render() {
-    return html`<slot id="slot"></slot>`;
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    processTemplates(this);
-  }
-
-  /**
-   * @protected
-   * @override
-   */
-  createRenderRoot() {
-    const root = super.createRenderRoot();
-    root.appendChild(this._overlayElement);
-    return root;
-  }
-
-  /**
-   * Fired when an item is selected when the context menu is populated using the `items` API.
-   *
-   * @event item-selected
-   * @param {Object} detail
-   * @param {Object} detail.value the selected menu item
-   */
-}
-
-defineCustomElement(ContextMenu);
-export { ContextMenu };

package/theme/lumo/vaadin-lit-context-menu.d.ts

@@ -1,4 +0,0 @@
-import './vaadin-context-menu-item-styles.js';
-import './vaadin-context-menu-list-box-styles.js';
-import './vaadin-context-menu-overlay-styles.js';
-import '../../src/vaadin-lit-context-menu.js';

package/theme/lumo/vaadin-lit-context-menu.js

@@ -1,4 +0,0 @@
-import './vaadin-context-menu-item-styles.js';
-import './vaadin-context-menu-list-box-styles.js';
-import './vaadin-context-menu-overlay-styles.js';
-import '../../src/vaadin-lit-context-menu.js';

package/theme/material/vaadin-context-menu-item-styles.d.ts

@@ -1,5 +0,0 @@
-import '@vaadin/vaadin-material-styles/font-icons.js';
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/typography.js';
-declare const contextMenuItem: import("lit").CSSResult;
-export { contextMenuItem };

package/theme/material/vaadin-context-menu-item-styles.js

@@ -1,36 +0,0 @@
-import '@vaadin/vaadin-material-styles/font-icons.js';
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/typography.js';
-import { item } from '@vaadin/item/theme/material/vaadin-item-styles.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const contextMenuItem = css`
-  :host([aria-haspopup='true'])::after {
-    font-family: material-icons;
-    font-size: var(--material-icon-font-size);
-  }
-
-  :host(:not([dir='rtl'])[aria-haspopup='true'])::after {
-    content: var(--material-icons-chevron-right);
-    padding-left: 9px;
-    margin-right: -9px;
-  }
-
-  :host([dir='rtl'][aria-haspopup='true'])::after {
-    content: var(--material-icons-chevron-left);
-    padding-right: 9px;
-    margin-left: -9px;
-  }
-
-  :host([menu-item-checked]) [part='checkmark']::before {
-    content: var(--material-icons-check);
-  }
-
-  :host([expanded]) {
-    background-color: var(--material-secondary-background-color);
-  }
-`;
-
-registerStyles('vaadin-context-menu-item', [item, contextMenuItem], { moduleId: 'material-context-menu-item' });
-
-export { contextMenuItem };

package/theme/material/vaadin-context-menu-list-box-styles.d.ts

@@ -1,4 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/typography.js';
-declare const contextMenuListBox: import("lit").CSSResult;
-export { contextMenuListBox };

package/theme/material/vaadin-context-menu-list-box-styles.js

@@ -1,38 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/typography.js';
-import { listBox } from '@vaadin/list-box/theme/material/vaadin-list-box-styles.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const contextMenuListBox = css`
-  [part='items'] ::slotted([role='menuitem']) {
-    min-height: 36px;
-    padding: 8px 32px 8px 10px;
-    font-size: var(--material-small-font-size);
-    line-height: 24px;
-  }
-
-  :host([dir='rtl']) [part='items'] ::slotted([role='menuitem']) {
-    padding: 8px 10px 8px 32px;
-  }
-
-  [part='items'] ::slotted([role='menuitem']:hover:not([disabled])) {
-    background-color: var(--material-secondary-background-color);
-  }
-
-  [part='items'] ::slotted([role='menuitem'][focused]:not([disabled])) {
-    background-color: var(--material-divider-color);
-  }
-
-  @media (pointer: coarse) {
-    [part='items'] ::slotted([role='menuitem']:hover:not([disabled])),
-    [part='items'] ::slotted([role='menuitem'][focused]:not([disabled])) {
-      background-color: transparent;
-    }
-  }
-`;
-
-registerStyles('vaadin-context-menu-list-box', [listBox, contextMenuListBox], {
-  moduleId: 'material-context-menu-list-box',
-});
-
-export { contextMenuListBox };

package/theme/material/vaadin-context-menu-overlay-styles.d.ts

@@ -1,2 +0,0 @@
-declare const contextMenuOverlay: import("lit").CSSResult;
-export { contextMenuOverlay };

package/theme/material/vaadin-context-menu-overlay-styles.js

@@ -1,15 +0,0 @@
-import { menuOverlay } from '@vaadin/vaadin-material-styles/mixins/menu-overlay.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const contextMenuOverlay = css`
-  [part='overlay'] {
-    outline: none;
-    will-change: transform, opacity;
-  }
-`;
-
-registerStyles('vaadin-context-menu-overlay', [menuOverlay, contextMenuOverlay], {
-  moduleId: 'material-context-menu-overlay',
-});
-
-export { contextMenuOverlay };

package/theme/material/vaadin-context-menu.d.ts

@@ -1,4 +0,0 @@
-import './vaadin-context-menu-item-styles.js';
-import './vaadin-context-menu-list-box-styles.js';
-import './vaadin-context-menu-overlay-styles.js';
-import '../../src/vaadin-context-menu.js';

package/theme/material/vaadin-context-menu.js

@@ -1,4 +0,0 @@
-import './vaadin-context-menu-item-styles.js';
-import './vaadin-context-menu-list-box-styles.js';
-import './vaadin-context-menu-overlay-styles.js';
-import '../../src/vaadin-context-menu.js';

package/theme/material/vaadin-lit-context-menu.d.ts

@@ -1,4 +0,0 @@
-import './vaadin-context-menu-item-styles.js';
-import './vaadin-context-menu-list-box-styles.js';
-import './vaadin-context-menu-overlay-styles.js';
-import '../../src/vaadin-lit-context-menu.js';

package/theme/material/vaadin-lit-context-menu.js

@@ -1,4 +0,0 @@
-import './vaadin-context-menu-item-styles.js';
-import './vaadin-context-menu-list-box-styles.js';
-import './vaadin-context-menu-overlay-styles.js';
-import '../../src/vaadin-lit-context-menu.js';

package/vaadin-lit-context-menu.d.ts

@@ -1 +0,0 @@
-export * from './src/vaadin-context-menu.js';

package/vaadin-lit-context-menu.js

@@ -1,2 +0,0 @@
-import './theme/lumo/vaadin-lit-context-menu.js';
-export * from './src/vaadin-lit-context-menu.js';