@limetech/lime-elements 33.13.0 → 33.14.0-next.12

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

@@ -42,7 +42,6 @@
  * @exampleComponent limel-example-header-responsive
  * @exampleComponent limel-example-header-narrow
  * @slot - Content (actions) to be put inside the far right surface of the header
- * @private
  */
 export declare class Header {
   /**

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<T = any> extends ListItem<T> {
+  /**
+   * The additional supporting text is used for shortcut commands and displayed in the list item.
+   */
+  commandText?: string;
+}

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

@@ -48,7 +48,6 @@
  *
  * @slot - Content to put inside the surface
  * @exampleComponent limel-example-popover
- * @private
  */
 export declare class Popover {
   /**

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

@@ -43,7 +43,9 @@ export declare class Select {
    */
   helperText: string;
   /**
-   * Currently selected value or values (if `multiple` is set).
+   * Currently selected value or values.
+   * If `multiple` is `true`, this must be an array. Otherwise it must be a
+   * single value.
    */
   value: Option | Option[];
   /**

package/dist/types/components/tab-bar/tab-bar.d.ts

@@ -47,6 +47,7 @@ export declare class TabBar {
   private tearDown;
   private setupListeners;
   private handleTabActivated;
+  private sortByInactive;
   private handleScroll;
   private handleLeftScrollClick;
   private handleRightScrollClick;

package/dist/types/components/tab-panel/tab-panel.d.ts

@@ -4,7 +4,8 @@ import { Tab } from '../tab-bar/tab.types';
  * The `limel-tab-panel` component uses the `limel-tab-bar` component together
  * with custom slotted components and will display the content for the currently
  * active tab. Each slotted component must have an id equal to the id of the
- * corresponding tab it belongs to.
+ * corresponding tab it belongs to. These components should implement the
+ * [TabPanelComponent](#/type/TabPanelComponent/) interface.
  *
  * The `limel-tab-panel` component will automatically set each tab configuration
  * on the corresponding slotted component as a property named `tab` so that the

package/dist/types/components/tab-panel/tab-panel.types.d.ts

@@ -0,0 +1,16 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { Tab } from '../tab-bar/tab.types';
+/**
+ * Interface for components rendered inside a `limel-tab-panel`
+ */
+export interface TabPanelComponent {
+  /**
+   * The tab that the component belongs to
+   */
+  tab: Tab;
+  /**
+   * Emit when the tab is updated for some reason, e.g. changing the text,
+   * icon or badge
+   */
+  changeTab?: EventEmitter<Tab>;
+}

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

@@ -0,0 +1,18 @@
+/**
+ * This component is used internally by `limel-tooltip`.
+ *
+ * @private
+ */
+export declare class TooltipContent {
+  /**
+   * Short descriptive text of the owner element.
+   */
+  label: string;
+  /**
+   * Additional helper text for the element.
+   * Example usage can be a keyboard shortcut to activate the function of the
+   * owner element.
+   */
+  helperLabel: string;
+  render(): any;
+}

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

@@ -0,0 +1,49 @@
+/**
+ * Tooltips display a text label identifying an element, such as a description
+ * of its function.
+ *
+ * In order to display the tooltip, the tooltip element and the owner element
+ * that it should describe must be within the same document or document
+ * fragment. A good practice is to just render them next to each other like so:
+ *
+ * ```html
+ * <limel-button icon="search" id="tooltip-example" />
+ * <limel-tooltip label="Search" elementId="tooltip-example" />
+ * ```
+ *
+ * @exampleComponent limel-example-tooltip
+ * @private
+ */
+export declare class Tooltip {
+  /**
+   * Short descriptive text of the owner element.
+   */
+  label: string;
+  /**
+   * Additional helper text for the element.
+   * Example usage can be a keyboard shortcut to activate the function of the
+   * owner element.
+   */
+  helperLabel: string;
+  /**
+   * ID of the owner element that the tooltip should describe.
+   * Must be a child within the same document fragment as the tooltip element
+   * itself.
+   */
+  elementId: string;
+  private open;
+  private host;
+  private portalId;
+  private tooltipId;
+  private showTooltipTimeoutHandle;
+  constructor();
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  render(): any;
+  private setOwnerAriaLabel;
+  private addListeners;
+  private removeListeners;
+  private showTooltip;
+  private hideTooltip;
+  private getOwnerElement;
+}

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.
@@ -765,7 +765,7 @@ export namespace Components {
          */
         "required": boolean;
         /**
-          * Currently selected value or values (if `multiple` is set).
+          * Currently selected value or values. If `multiple` is `true`, this must be an array. Otherwise it must be a single value.
          */
         "value": Option | Option[];
     }
@@ -927,6 +927,30 @@ export namespace Components {
          */
         "totalRows": number;
     }
+    interface LimelTooltip {
+        /**
+          * ID of the owner element that the tooltip should describe. Must be a child within the same document fragment as the tooltip element itself.
+         */
+        "elementId": string;
+        /**
+          * Additional helper text for the element. Example usage can be a keyboard shortcut to activate the function of the owner element.
+         */
+        "helperLabel": string;
+        /**
+          * Short descriptive text of the owner element.
+         */
+        "label": string;
+    }
+    interface LimelTooltipContent {
+        /**
+          * Additional helper text for the element. Example usage can be a keyboard shortcut to activate the function of the owner element.
+         */
+        "helperLabel": string;
+        /**
+          * Short descriptive text of the owner element.
+         */
+        "label": string;
+    }
 }
 declare global {
     interface HTMLLimelBadgeElement extends Components.LimelBadge, HTMLStencilElement {
@@ -1163,6 +1187,18 @@ declare global {
         prototype: HTMLLimelTableElement;
         new (): HTMLLimelTableElement;
     };
+    interface HTMLLimelTooltipElement extends Components.LimelTooltip, HTMLStencilElement {
+    }
+    var HTMLLimelTooltipElement: {
+        prototype: HTMLLimelTooltipElement;
+        new (): HTMLLimelTooltipElement;
+    };
+    interface HTMLLimelTooltipContentElement extends Components.LimelTooltipContent, HTMLStencilElement {
+    }
+    var HTMLLimelTooltipContentElement: {
+        prototype: HTMLLimelTooltipContentElement;
+        new (): HTMLLimelTooltipContentElement;
+    };
     interface HTMLElementTagNameMap {
         "limel-badge": HTMLLimelBadgeElement;
         "limel-banner": HTMLLimelBannerElement;
@@ -1203,6 +1239,8 @@ declare global {
         "limel-tab-bar": HTMLLimelTabBarElement;
         "limel-tab-panel": HTMLLimelTabPanelElement;
         "limel-table": HTMLLimelTableElement;
+        "limel-tooltip": HTMLLimelTooltipElement;
+        "limel-tooltip-content": HTMLLimelTooltipContentElement;
     }
 }
 declare namespace LocalJSX {
@@ -1824,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.
@@ -2056,7 +2094,7 @@ declare namespace LocalJSX {
          */
         "required"?: boolean;
         /**
-          * Currently selected value or values (if `multiple` is set).
+          * Currently selected value or values. If `multiple` is `true`, this must be an array. Otherwise it must be a single value.
          */
         "value"?: Option | Option[];
     }
@@ -2258,6 +2296,30 @@ declare namespace LocalJSX {
          */
         "totalRows"?: number;
     }
+    interface LimelTooltip {
+        /**
+          * ID of the owner element that the tooltip should describe. Must be a child within the same document fragment as the tooltip element itself.
+         */
+        "elementId": string;
+        /**
+          * Additional helper text for the element. Example usage can be a keyboard shortcut to activate the function of the owner element.
+         */
+        "helperLabel"?: string;
+        /**
+          * Short descriptive text of the owner element.
+         */
+        "label": string;
+    }
+    interface LimelTooltipContent {
+        /**
+          * Additional helper text for the element. Example usage can be a keyboard shortcut to activate the function of the owner element.
+         */
+        "helperLabel"?: string;
+        /**
+          * Short descriptive text of the owner element.
+         */
+        "label"?: string;
+    }
     interface IntrinsicElements {
         "limel-badge": LimelBadge;
         "limel-banner": LimelBanner;
@@ -2298,6 +2360,8 @@ declare namespace LocalJSX {
         "limel-tab-bar": LimelTabBar;
         "limel-tab-panel": LimelTabPanel;
         "limel-table": LimelTable;
+        "limel-tooltip": LimelTooltip;
+        "limel-tooltip-content": LimelTooltipContent;
     }
 }
 export { LocalJSX as JSX };
@@ -2343,6 +2407,8 @@ declare module "@stencil/core" {
             "limel-tab-bar": LocalJSX.LimelTabBar & JSXBase.HTMLAttributes<HTMLLimelTabBarElement>;
             "limel-tab-panel": LocalJSX.LimelTabPanel & JSXBase.HTMLAttributes<HTMLLimelTabPanelElement>;
             "limel-table": LocalJSX.LimelTable & JSXBase.HTMLAttributes<HTMLLimelTableElement>;
+            "limel-tooltip": LocalJSX.LimelTooltip & JSXBase.HTMLAttributes<HTMLLimelTooltipElement>;
+            "limel-tooltip-content": LocalJSX.LimelTooltipContent & JSXBase.HTMLAttributes<HTMLLimelTooltipContentElement>;
         }
     }
 }

package/dist/types/interface.d.ts

@@ -17,4 +17,5 @@ export * from './components/progress-flow/progress-flow.types';
 export * from './components/select/option.types';
 export * from './components/spinner/spinner.types';
 export * from './components/tab-bar/tab.types';
+export * from './components/tab-panel/tab-panel.types';
 export * from './components/table/table.types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "33.13.0",
+  "version": "33.14.0-next.12",
   "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}