@limetech/lime-elements 33.14.0-next.1 → 33.14.0-next.13

package/dist/lime-elements/p-f3779c9e.entry.js

@@ -0,0 +1 @@
+import{r as t,h as o}from"./p-fabb836f.js";const r=class{constructor(o){t(this,o)}render(){return o("div",{class:"tooltip-content"},o("div",{class:"label"},this.label),o("div",{class:"helper-label"},this.helperLabel))}};r.style=".tooltip-content{animation:display-tooltip 0.2s ease;display:flex;flex-direction:row;border-radius:0.25rem;padding:0.25rem 0.5rem;font-size:0.875rem;background-color:rgb(var(--contrast-1300));box-shadow:var(--shadow-depth-16)}.tooltip-content .label{color:rgb(var(--contrast-200))}.tooltip-content .helper-label{color:rgb(var(--contrast-800));padding:0 0 0 1rem}.tooltip-content .helper-label:empty{display:none}@keyframes display-tooltip{0%{opacity:0;transform:translate3d(0, 0, 0) scale(0.94)}100%{opacity:1;transform:translate3d(0, 0, 0) scale(1)}}";export{r as limel_tooltip_content}

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/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

@@ -1,13 +1,17 @@
 /**
+ * This component is used internally by `limel-tooltip`.
+ *
  * @private
  */
 export declare class TooltipContent {
   /**
-   *tip for the hovered element
+   * Short descriptive text of the owner element.
    */
   label: string;
   /**
-   *hotkey for the hovered element
+   * 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

@@ -1,20 +1,75 @@
 /**
+ * A tooltip can be used to display a descriptive text for any element.
+ * The displayed content must be a brief and supplemental string of text,
+ * identifying the element or describing its function for the user,
+ * helping them better understand unfamiliar objects that aren't described
+ * directly in the UI.
+ *
+ * ## Interaction
+ * The tooltip appears after a slight delay, when the element is hovered;
+ * and disappears as soon as the cursor leaves the element.
+ * Therefore, users cannot interact with the tip, but if the trigger element
+ * itself is interactive, it will remain interactible even with a tooltip bound
+ * to it.
+ *
+ * :::note
+ * In order to display the tooltip, the tooltip element and its trigger element
+ * must be within the same document or document fragment.
+ * A good practice is to just place them next to each other like below:
+ *
+ * ```html
+ * <limel-button icon="search" id="tooltip-example" />
+ * <limel-tooltip label="Search" elementId="tooltip-example" />
+ * ```
+ * :::
+ *
+ * ## Usage
+ * - Keep in mind that tooltips can be distracting, and can be perceived as an interruption.
+ * Use them only when they add significant value.
+ * - A good tip is concise, helpful, and informative.
+ * Don't explain the obvious or simply repeat what is already on the screen.
+ * When used correctly, supplemental info of a tooltip helps to [declutter the UI](/#/DesignGuidelines/decluttering.md/).
+ * - If the tip is essential to the primary tasks that the user is performing,
+ * such as warnings or important notes, include the information directly in the
+ * interface instead.
+ * - When a component offers a helper text (e.g. [Input field](/#/component/limel-input-field/)),
+ * use that, not a tooltip.
+ * - Make sure to use the tooltip on an element that users naturally and
+ * effortlessly recognize can be hovered.
+ *
  * @exampleComponent limel-example-tooltip
+ * @private
  */
 export declare class Tooltip {
   /**
-   *tip to the hovered element
+   * Short descriptive text of the owner element.
    */
   label: string;
   /**
-   *helperLabel to the hovered element
+   * Additional helper text for the element.
+   * Example usage can be a keyboard shortcut to activate the function of the
+   * owner element.
    */
   helperLabel: string;
   /**
-   *show if the element is hovered
+   * ID of the owner element that the tooltip should describe.
+   * Must be a child within the same document fragment as the tooltip element
+   * itself.
    */
-  open: boolean;
+  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.
@@ -929,25 +929,25 @@ export namespace Components {
     }
     interface LimelTooltip {
         /**
-          * helperLabel to the hovered element
+          * ID of the owner element that the tooltip should describe. Must be a child within the same document fragment as the tooltip element itself.
          */
-        "helperLabel": string;
+        "elementId": string;
         /**
-          * tip to the hovered element
+          * Additional helper text for the element. Example usage can be a keyboard shortcut to activate the function of the owner element.
          */
-        "label": string;
+        "helperLabel": string;
         /**
-          * show if the element is hovered
+          * Short descriptive text of the owner element.
          */
-        "open": boolean;
+        "label": string;
     }
     interface LimelTooltipContent {
         /**
-          * hotkey for the hovered element
+          * Additional helper text for the element. Example usage can be a keyboard shortcut to activate the function of the owner element.
          */
         "helperLabel": string;
         /**
-          * tip for the hovered element
+          * Short descriptive text of the owner element.
          */
         "label": string;
     }
@@ -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.
@@ -2298,25 +2298,25 @@ declare namespace LocalJSX {
     }
     interface LimelTooltip {
         /**
-          * helperLabel to the hovered element
+          * ID of the owner element that the tooltip should describe. Must be a child within the same document fragment as the tooltip element itself.
          */
-        "helperLabel"?: string;
+        "elementId": string;
         /**
-          * tip to the hovered element
+          * Additional helper text for the element. Example usage can be a keyboard shortcut to activate the function of the owner element.
          */
-        "label"?: string;
+        "helperLabel"?: string;
         /**
-          * show if the element is hovered
+          * Short descriptive text of the owner element.
          */
-        "open"?: boolean;
+        "label": string;
     }
     interface LimelTooltipContent {
         /**
-          * hotkey for the hovered element
+          * Additional helper text for the element. Example usage can be a keyboard shortcut to activate the function of the owner element.
          */
         "helperLabel"?: string;
         /**
-          * tip for the hovered element
+          * Short descriptive text of the owner element.
          */
         "label"?: string;
     }

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.14.0-next.1",
+  "version": "33.14.0-next.13",
   "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}