@limetech/lime-elements 33.14.0-next.5 → 33.14.0-next.9

package/dist/types/components/list/list-renderer.d.ts

@@ -1,4 +1,4 @@
-import { ListItem, ListSeparator } from '@limetech/lime-elements';
+import { ListItem, ListSeparator, MenuItem } from '@limetech/lime-elements';
 import { ListRendererConfig } from './list-renderer-config';
 export declare class ListRenderer {
   private defaultConfig;
@@ -6,23 +6,24 @@ export declare class ListRenderer {
   private hasIcons;
   private twoLines;
   private avatarList;
+  private commandKey;
   private applyTabIndexToItemAtIndex;
   constructor();
-  render(items: Array<ListItem | ListSeparator>, config?: ListRendererConfig): any;
+  render(items: Array<ListItem | ListSeparator | MenuItem>, config?: ListRendererConfig): any;
   /**
    * Determine which ListItem should have the `tab-index` attribute set,
    * and return the index at which that ListItem is located in `items`.
    * Returns `undefined` if no item should have the attribute set.
    * See https://github.com/material-components/material-components-web/tree/e66a43a75fef4f9179e24856649518e15e279a04/packages/mdc-list#accessibility
    *
-   * @param {Array<ListItem | ListSeparator>} items the items of the list, including any `ListSeparator`:s
+   * @param {Array<ListItem | ListSeparator | MenuItems>} items the items of the list, including any `ListSeparator`:s
    * @returns {number} the index as per the description
    */
   private getIndexForWhichToApplyTabIndex;
   /**
    * Render a single list item
    *
-   * @param {ListItem | ListSeparator} item the item to render
+   * @param {ListItem | ListSeparator | MenuItems} item the item to render
    * @param {number} index the index the item had in the `items` array
    * @returns {HTMLElement} the list item
    */
@@ -30,11 +31,12 @@ export declare class ListRenderer {
   /**
    * Render the text of the list item
    *
-   * @param {string} text primary text for the list item
-   * @param {string} secondaryText secondary text for the list item
+   * @param {ListItem | MenuItem} item the list item
    * @returns {HTMLElement | string} the text for the list item
    */
   private renderText;
+  private renderCommandText;
+  private isSimpleItem;
   /**
    * Render an icon for a list item
    *

package/dist/types/components/menu/menu.d.ts

@@ -1,5 +1,5 @@
-import { ListItem, ListSeparator } from '@limetech/lime-elements';
-import { OpenDirection } from './menu.types';
+import { ListSeparator } from '@limetech/lime-elements';
+import { MenuItem, OpenDirection } from './menu.types';
 /**
  * @slot trigger - Element to use as a trigger for the menu.
  * @exampleComponent limel-example-menu-basic
@@ -9,6 +9,7 @@ import { OpenDirection } from './menu.types';
  * @exampleComponent limel-example-menu-badge-icons
  * @exampleComponent limel-example-menu-grid
  * @exampleComponent limel-example-menu-composite
+ * @exampleComponent limel-example-menu-hotkeys
  */
 export declare class Menu {
   /**
@@ -21,7 +22,7 @@ export declare class Menu {
   /**
    * A list of items and separators to show in the menu.
    */
-  items: Array<ListItem | ListSeparator>;
+  items: Array<MenuItem | ListSeparator>;
   /**
    * Sets the disabled state of the menu.
    */
@@ -59,14 +60,21 @@ export declare class Menu {
    */
   private select;
   private host;
+  private list;
   private portalId;
   constructor();
   componentDidLoad(): void;
+  protected openWatcher(): void;
   render(): any;
+  componentDidRender(): void;
   private renderTrigger;
+  private setTriggerAttributes;
   private onClose;
   private onTriggerClick;
   private onListChange;
   private getPortalPosition;
   private getCssProperties;
+  private setListElement;
+  private focusMenuItem;
+  private isListItem;
 }

package/dist/types/components/menu/menu.types.d.ts

@@ -1 +1,8 @@
+import { ListItem } from '../list/list-item.types';
 export declare type OpenDirection = 'left' | 'right';
+export interface MenuItem extends ListItem {
+  /**
+   * The additional supporting text is used for shortcut commands and displayed in the list item.
+   */
+  commandText?: string;
+}

package/dist/types/components/tooltip/tooltip.d.ts

@@ -12,6 +12,7 @@
  * ```
  *
  * @exampleComponent limel-example-tooltip
+ * @private
  */
 export declare class Tooltip {
   /**
@@ -34,6 +35,7 @@ export declare class Tooltip {
   private host;
   private portalId;
   private tooltipId;
+  private showTooltipTimeoutHandle;
   constructor();
   connectedCallback(): void;
   disconnectedCallback(): void;

package/dist/types/components.d.ts

@@ -13,7 +13,7 @@ import { Action } from "./components/collapsible-section/action";
 import { ValidationStatus } from "./components/form/form.types";
 import { IconSize } from "./components/icon/icon.types";
 import { InputType } from "./components/input-field/input-field.types";
-import { OpenDirection } from "./components/menu/menu.types";
+import { MenuItem, OpenDirection } from "./components/menu/menu.types";
 import { ActionPosition, ActionScrollBehavior } from "./components/picker/actions.types";
 import { FlowItem } from "./components/progress-flow/progress-flow.types";
 import { Tab } from "./components/tab-bar/tab.types";
@@ -573,7 +573,7 @@ export namespace Components {
         /**
           * A list of items and separators to show in the menu.
          */
-        "items": Array<ListItem | ListSeparator>;
+        "items": Array<MenuItem | ListSeparator>;
         /**
           * Is displayed on the default trigger button.
           * @deprecated Use with default trigger has been deprecated. Please supply your own trigger element.
@@ -1862,7 +1862,7 @@ declare namespace LocalJSX {
         /**
           * A list of items and separators to show in the menu.
          */
-        "items"?: Array<ListItem | ListSeparator>;
+        "items"?: Array<MenuItem | ListSeparator>;
         /**
           * Is displayed on the default trigger button.
           * @deprecated Use with default trigger has been deprecated. Please supply your own trigger element.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "33.14.0-next.5",
+  "version": "33.14.0-next.9",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",

package/dist/lime-elements/p-1f3b6139.entry.js

@@ -1 +0,0 @@
-import{r as t,c as i,h as s,g as e}from"./p-fabb836f.js";import{c as r}from"./p-6c094f3f.js";import{z as o}from"./p-7c4d91f5.js";import"./p-acfbf7ac.js";import"./p-8bbe3720.js";import"./p-fc610f15.js";const n=class{constructor(s){t(this,s),this.cancel=i(this,"cancel",7),this.select=i(this,"select",7),this.label="",this.items=[],this.disabled=!1,this.openDirection="right",this.open=!1,this.badgeIcons=!1,this.gridLayout=!1,this.fixed=!1,this.onClose=()=>{this.cancel.emit(),this.open=!1},this.onTriggerClick=t=>{t.stopPropagation(),this.disabled||(this.open=!this.open)},this.onListChange=t=>{this.items=this.items.map((i=>i===t.detail?t.detail:i)),this.select.emit(t.detail),this.open=!1},this.portalId=r()}componentDidLoad(){this.host.querySelector('[slot="trigger"]')||console.warn("Using limel-menu with the default trigger is deprecated. Please provide your own trigger element.")}render(){const t=this.getCssProperties(),i=getComputedStyle(this.host).getPropertyValue("--dropdown-z-index"),e={"limel-portal--fixed":this.fixed},r=this.getPortalPosition();return s("div",{class:"mdc-menu-surface--anchor",onClick:this.onTriggerClick},s("slot",{name:"trigger"},this.renderTrigger()),s("limel-portal",{class:e,style:r,visible:this.open,containerId:this.portalId,openDirection:this.openDirection,position:this.fixed?"fixed":"absolute",containerStyle:{"z-index":i}},s("limel-menu-surface",{open:this.open,onDismiss:this.onClose,style:t},s("limel-list",{class:{"has-grid-layout has-interactive-items":this.gridLayout},items:this.items,type:"menu",badgeIcons:this.badgeIcons,onChange:this.onListChange}))))}renderTrigger(){return s("button",{class:`\n                    menu__trigger\n                    ${this.disabled?"":"menu__trigger-enabled"}\n                `,disabled:this.disabled},s("span",null,this.label))}getPortalPosition(){if(!this.fixed)return{};const t=this.host.getBoundingClientRect(),i={top:`${t.y+t.height}px`,left:`${t.x}px`};return"left"===this.openDirection&&(i.left=`${t.x+t.width}px`),i}getCssProperties(){const t=["--menu-surface-width","--list-grid-item-max-width","--list-grid-item-min-width","--list-grid-gap"],i=getComputedStyle(this.host),s=t.map((t=>i.getPropertyValue(t)));return o(t,s)}get host(){return e(this)}};n.style=":host{display:inline-block}:host([hidden]){display:none}.menu__trigger{border-color:transparent;border-width:1px;border-style:solid;background:none;color:rgb(var(--contrast-800));height:2.25rem}.menu__trigger-enabled:hover{border-color:rgb(var(--contrast-800));color:rgb(var(--contrast-1100))}.mdc-menu-surface--anchor{position:relative}";export{n as limel_menu}

package/dist/lime-elements/p-4e6042f7.entry.js

@@ -1 +0,0 @@
-import{r as t,h as i,g as e}from"./p-fabb836f.js";import{c as s}from"./p-6c094f3f.js";const o=class{constructor(i){t(this,i),this.showTooltip=()=>{this.open=!0},this.hideTooltip=()=>{this.open=!1},this.portalId=s(),this.tooltipId=s()}connectedCallback(){this.setOwnerAriaLabel(),this.addListeners()}disconnectedCallback(){this.removeListeners()}render(){const t=getComputedStyle(this.host).getPropertyValue("--tooltip-z-index");return i("div",{class:"trigger-anchor"},i("limel-portal",{visible:this.open,containerId:this.portalId,containerStyle:{"z-index":t}},i("limel-tooltip-content",{label:this.label,helperLabel:this.helperLabel,role:"tooltip","aria-hidden":!this.open,id:this.tooltipId})))}setOwnerAriaLabel(){const t=this.getOwnerElement();null==t||t.setAttribute("aria-describedby",this.tooltipId)}addListeners(){const t=this.getOwnerElement();null==t||t.addEventListener("mouseover",this.showTooltip),null==t||t.addEventListener("mouseout",this.hideTooltip),null==t||t.addEventListener("click",this.hideTooltip)}removeListeners(){const t=this.getOwnerElement();null==t||t.removeEventListener("mouseover",this.showTooltip),null==t||t.removeEventListener("mouseout",this.hideTooltip),null==t||t.removeEventListener("click",this.hideTooltip)}getOwnerElement(){var t;let i=this.host;do{i=i.parentNode}while(i&&i.nodeType!==Node.DOCUMENT_FRAGMENT_NODE&&i.nodeType!==Node.DOCUMENT_NODE);return null===(t=i)||void 0===t?void 0:t.getElementById(this.elementId)}get host(){return e(this)}};o.style=".trigger-anchor{display:inline-block;position:relative}.tooltip-container{color:#f1f1f1;background-color:#232324}";export{o as limel_tooltip}