@limetech/lime-elements 39.17.3 → 39.18.0

package/dist/types/components.d.ts

@@ -9,8 +9,8 @@ import { ActionBarItem } from "./components/action-bar/action-bar.types";
 import { ListItem, ListSeparator } from "./components/list-item/list-item.types";
 import { DateType, Languages } from "./components/date-picker/date.types";
 import { MenuItem, MenuSearcher, OpenDirection, SurfaceWidth } from "./components/menu/menu.types";
+import { Icon, IconName } from "./global/shared-types/icon.types";
 import { BreadcrumbsItem } from "./components/breadcrumbs/breadcrumbs.types";
-import { Icon } from "./global/shared-types/icon.types";
 import { Button } from "./components/button/button.types";
 import { CalloutType } from "./components/callout/callout.types";
 import { Image } from "./global/shared-types/image.types";
@@ -53,8 +53,8 @@ export { ActionBarItem } from "./components/action-bar/action-bar.types";
 export { ListItem, ListSeparator } from "./components/list-item/list-item.types";
 export { DateType, Languages } from "./components/date-picker/date.types";
 export { MenuItem, MenuSearcher, OpenDirection, SurfaceWidth } from "./components/menu/menu.types";
+export { Icon, IconName } from "./global/shared-types/icon.types";
 export { BreadcrumbsItem } from "./components/breadcrumbs/breadcrumbs.types";
-export { Icon } from "./global/shared-types/icon.types";
 export { Button } from "./components/button/button.types";
 export { CalloutType } from "./components/callout/callout.types";
 export { Image } from "./global/shared-types/image.types";
@@ -242,7 +242,7 @@ export namespace Components {
         /**
           * Set icon for the banner
          */
-        "icon": string;
+        "icon": IconName;
         /**
           * The text to show on the banner.
          */
@@ -318,7 +318,7 @@ export namespace Components {
         /**
           * Set icon for the button
          */
-        "icon": string | Icon;
+        "icon": IconName | Icon;
         /**
           * The text to show on the button.
          */
@@ -463,7 +463,7 @@ export namespace Components {
         /**
           * An icon, to display along with the heading and subheading.
          */
-        "icon"?: string | Icon;
+        "icon"?: IconName | Icon;
         /**
           * A hero image to display in the card, to enrich the content with visual information.
          */
@@ -706,7 +706,7 @@ export namespace Components {
         /**
           * Icon of the chip.
          */
-        "icon"?: string | Icon;
+        "icon"?: IconName | Icon;
         /**
           * Identifier for the chip. Must be unique.
           * @default crypto.randomUUID()
@@ -875,7 +875,7 @@ export namespace Components {
           * For chip-sets of type `input`. When the value is null, no leading icon is used. Leading icon to show to the far left in the text field
           * @default null
          */
-        "leadingIcon": string;
+        "leadingIcon": IconName;
         /**
           * For chip-sets of type `input`. Limits the maximum number of chips. When the value is `0` or not set, no limit is applied.
          */
@@ -1134,7 +1134,7 @@ export namespace Components {
         /**
           * Icon to display in the header of the section
          */
-        "icon"?: string | Icon;
+        "icon"?: IconName | Icon;
         /**
           * `true` if the section is invalid, `false` if valid. This can be used to indicate that the content inside the section is invalid.
           * @default false
@@ -1913,7 +1913,7 @@ export namespace Components {
         /**
           * Icon to display
          */
-        "icon"?: string | Icon;
+        "icon"?: IconName | Icon;
         /**
           * Subheading to display
          */
@@ -2091,7 +2091,7 @@ export namespace Components {
         /**
           * The icon to display.
          */
-        "icon": string | Icon;
+        "icon": IconName | Icon;
         /**
           * The text to show to screenreaders and other assistive tech. It is also displayed as a tooltip when the user hovers or focuses the button.
          */
@@ -2219,7 +2219,7 @@ export namespace Components {
         /**
           * Leading icon to show to the far left in the field.
          */
-        "leadingIcon": string;
+        "leadingIcon": IconName;
         /**
           * The locale to use for formatting numbers.
           * @default globalConfig.defaultLocale
@@ -2280,7 +2280,7 @@ export namespace Components {
         /**
           * Trailing icon to show to the far right in the field.
          */
-        "trailingIcon": string;
+        "trailingIcon": IconName;
         /**
           * Type of input.  Note** regarding type `url`: `limel-input` uses the native validation built into the browser for many types of input fields. The native validation for `url` is very strict, and does not allow relative urls, nor any other formats that are not a "fully qualified" url. To allow such urls, use the type `urlAsText` instead. `urlAsText` works exactly like `text` in all regards, except that it enables use of the `showLink` property.
           * @default 'text'
@@ -2808,7 +2808,7 @@ export namespace Components {
         /**
           * Leading icon to show to the far left in the text field
          */
-        "leadingIcon": string;
+        "leadingIcon": IconName;
         /**
           * True if multiple values are allowed
           * @default false
@@ -2997,7 +2997,7 @@ export namespace Components {
           * Placeholder icon of the component, displayed when no image is present.
           * @default 'user'
          */
-        "icon": string | Icon;
+        "icon": IconName | Icon;
         /**
           * How the image should fit within the container. - `cover` will fill the container and crop excess parts. - `contain` will scale the image to fit within the container without cropping.
           * @default 'cover'
@@ -3301,7 +3301,7 @@ export namespace Components {
         /**
           * Name of icon for the shortcut.
          */
-        "icon": string;
+        "icon": IconName;
         /**
           * The text to show below the shortcut. Long label will be truncated.
           * @default null
@@ -3488,7 +3488,7 @@ export namespace Components {
         /**
           * Set icon for the button
          */
-        "icon": string;
+        "icon": IconName;
         /**
           * A list of items and separators to show in the menu.
           * @default []
@@ -6645,7 +6645,7 @@ declare namespace LocalJSX {
         /**
           * Set icon for the banner
          */
-        "icon"?: string;
+        "icon"?: IconName;
         /**
           * The text to show on the banner.
          */
@@ -6721,7 +6721,7 @@ declare namespace LocalJSX {
         /**
           * Set icon for the button
          */
-        "icon"?: string | Icon;
+        "icon"?: IconName | Icon;
         /**
           * The text to show on the button.
          */
@@ -6870,7 +6870,7 @@ declare namespace LocalJSX {
         /**
           * An icon, to display along with the heading and subheading.
          */
-        "icon"?: string | Icon;
+        "icon"?: IconName | Icon;
         /**
           * A hero image to display in the card, to enrich the content with visual information.
          */
@@ -7125,7 +7125,7 @@ declare namespace LocalJSX {
         /**
           * Icon of the chip.
          */
-        "icon"?: string | Icon;
+        "icon"?: IconName | Icon;
         /**
           * Identifier for the chip. Must be unique.
           * @default crypto.randomUUID()
@@ -7292,7 +7292,7 @@ declare namespace LocalJSX {
           * For chip-sets of type `input`. When the value is null, no leading icon is used. Leading icon to show to the far left in the text field
           * @default null
          */
-        "leadingIcon"?: string;
+        "leadingIcon"?: IconName;
         /**
           * For chip-sets of type `input`. Limits the maximum number of chips. When the value is `0` or not set, no limit is applied.
          */
@@ -7569,7 +7569,7 @@ declare namespace LocalJSX {
         /**
           * Icon to display in the header of the section
          */
-        "icon"?: string | Icon;
+        "icon"?: IconName | Icon;
         /**
           * `true` if the section is invalid, `false` if valid. This can be used to indicate that the content inside the section is invalid.
           * @default false
@@ -8445,7 +8445,7 @@ declare namespace LocalJSX {
         /**
           * Icon to display
          */
-        "icon"?: string | Icon;
+        "icon"?: IconName | Icon;
         /**
           * Subheading to display
          */
@@ -8623,7 +8623,7 @@ declare namespace LocalJSX {
         /**
           * The icon to display.
          */
-        "icon"?: string | Icon;
+        "icon"?: IconName | Icon;
         /**
           * The text to show to screenreaders and other assistive tech. It is also displayed as a tooltip when the user hovers or focuses the button.
          */
@@ -8739,7 +8739,7 @@ declare namespace LocalJSX {
         /**
           * Leading icon to show to the far left in the field.
          */
-        "leadingIcon"?: string;
+        "leadingIcon"?: IconName;
         /**
           * The locale to use for formatting numbers.
           * @default globalConfig.defaultLocale
@@ -8808,7 +8808,7 @@ declare namespace LocalJSX {
         /**
           * Trailing icon to show to the far right in the field.
          */
-        "trailingIcon"?: string;
+        "trailingIcon"?: IconName;
         /**
           * Type of input.  Note** regarding type `url`: `limel-input` uses the native validation built into the browser for many types of input fields. The native validation for `url` is very strict, and does not allow relative urls, nor any other formats that are not a "fully qualified" url. To allow such urls, use the type `urlAsText` instead. `urlAsText` works exactly like `text` in all regards, except that it enables use of the `showLink` property.
           * @default 'text'
@@ -9363,7 +9363,7 @@ declare namespace LocalJSX {
         /**
           * Leading icon to show to the far left in the text field
          */
-        "leadingIcon"?: string;
+        "leadingIcon"?: IconName;
         /**
           * True if multiple values are allowed
           * @default false
@@ -9568,7 +9568,7 @@ declare namespace LocalJSX {
           * Placeholder icon of the component, displayed when no image is present.
           * @default 'user'
          */
-        "icon"?: string | Icon;
+        "icon"?: IconName | Icon;
         /**
           * How the image should fit within the container. - `cover` will fill the container and crop excess parts. - `contain` will scale the image to fit within the container without cropping.
           * @default 'cover'
@@ -9918,7 +9918,7 @@ declare namespace LocalJSX {
         /**
           * Name of icon for the shortcut.
          */
-        "icon"?: string;
+        "icon"?: IconName;
         /**
           * The text to show below the shortcut. Long label will be truncated.
           * @default null
@@ -10112,7 +10112,7 @@ declare namespace LocalJSX {
         /**
           * Set icon for the button
          */
-        "icon"?: string;
+        "icon"?: IconName;
         /**
           * A list of items and separators to show in the menu.
           * @default []
@@ -10653,7 +10653,7 @@ declare namespace LocalJSX {
     }
     interface LimelBannerAttributes {
         "message": string;
-        "icon": string;
+        "icon": IconName;
     }
     interface LimelBreadcrumbsAttributes {
         "divider": string;
@@ -10662,7 +10662,7 @@ declare namespace LocalJSX {
         "label": string;
         "primary": boolean;
         "outlined": boolean;
-        "icon": string | Icon;
+        "icon": IconName | Icon;
         "disabled": boolean;
         "loading": boolean;
         "loadingFailed": boolean;
@@ -10679,7 +10679,7 @@ declare namespace LocalJSX {
     interface LimelCardAttributes {
         "heading": string;
         "subheading": string;
-        "icon": string | Icon;
+        "icon": IconName | Icon;
         "value": string;
         "clickable": boolean;
         "orientation": 'landscape' | 'portrait';
@@ -10721,7 +10721,7 @@ declare namespace LocalJSX {
     interface LimelChipAttributes {
         "language": Languages;
         "text": string;
-        "icon": string | Icon;
+        "icon": IconName | Icon;
         "badge": string;
         "disabled": boolean;
         "readonly": boolean;
@@ -10747,7 +10747,7 @@ declare namespace LocalJSX {
         "searchLabel": string;
         "emptyInputOnBlur": boolean;
         "clearAllButton": boolean;
-        "leadingIcon": string;
+        "leadingIcon": IconName;
         "delimiter": string;
         "autocomplete": string;
         "language": Languages;
@@ -10792,7 +10792,7 @@ declare namespace LocalJSX {
     interface LimelCollapsibleSectionAttributes {
         "isOpen": boolean;
         "header": string;
-        "icon": string | Icon;
+        "icon": IconName | Icon;
         "invalid": boolean;
         "language": Languages;
     }
@@ -10905,7 +10905,7 @@ declare namespace LocalJSX {
         "disabled": boolean;
     }
     interface LimelHeaderAttributes {
-        "icon": string | Icon;
+        "icon": IconName | Icon;
         "heading": string;
         "subheading": string;
         "supportingText": string;
@@ -10936,7 +10936,7 @@ declare namespace LocalJSX {
         "badge": boolean;
     }
     interface LimelIconButtonAttributes {
-        "icon": string | Icon;
+        "icon": IconName | Icon;
         "elevated": boolean;
         "label": string;
         "helperLabel": string;
@@ -10963,8 +10963,8 @@ declare namespace LocalJSX {
         "suffix": string;
         "required": boolean;
         "value": string;
-        "trailingIcon": string;
-        "leadingIcon": string;
+        "trailingIcon": IconName;
+        "leadingIcon": IconName;
         "pattern": string;
         "type": InputType;
         "formatNumber": boolean;
@@ -11050,7 +11050,7 @@ declare namespace LocalJSX {
         "label": string;
         "searchLabel": string;
         "helperText": string;
-        "leadingIcon": string;
+        "leadingIcon": IconName;
         "emptyResultMessage": string;
         "required": boolean;
         "invalid": boolean;
@@ -11074,7 +11074,7 @@ declare namespace LocalJSX {
     interface LimelProfilePictureAttributes {
         "language": Languages;
         "label": string;
-        "icon": string | Icon;
+        "icon": IconName | Icon;
         "helperText": string;
         "disabled": boolean;
         "readonly": boolean;
@@ -11122,7 +11122,7 @@ declare namespace LocalJSX {
         "multiple": boolean;
     }
     interface LimelShortcutAttributes {
-        "icon": string;
+        "icon": IconName;
         "label": string;
         "disabled": boolean;
         "badge": string;
@@ -11158,7 +11158,7 @@ declare namespace LocalJSX {
     interface LimelSplitButtonAttributes {
         "label": string;
         "primary": boolean;
-        "icon": string;
+        "icon": IconName;
         "disabled": boolean;
         "loading": boolean;
         "loadingFailed": boolean;

package/dist/types/global/shared-types/file.types.d.ts

@@ -1,5 +1,5 @@
 import { MenuItem } from '../../components';
-import { Icon } from '../../global/shared-types/icon.types';
+import { Icon, IconName } from './icon.types';
 import { Color } from './color.types';
 import { ListSeparator } from './separator.types';
 /**
@@ -37,7 +37,7 @@ export interface FileInfo {
     /**
      * Name of the icon to use.
      */
-    icon?: string | Icon;
+    icon?: IconName | Icon;
     /**
      * Icon color. Overrides `--icon-color`.
      *

package/dist/types/global/shared-types/icon.types.d.ts

@@ -1,4 +1,33 @@
 import { Color } from './color.types';
+/**
+ * An empty interface intended for module augmentation by consuming packages.
+ *
+ * Packages can extend this interface to register their own icon names,
+ * enabling type-safe autocompletion for custom icon sets.
+ *
+ * @example
+ * ```ts
+ * declare module '@limetech/lime-elements' {
+ *     interface IconNameRegistry {
+ *         'my-custom-icon': string;
+ *         'another-icon': string;
+ *     }
+ * }
+ * ```
+ *
+ * @public
+ */
+export interface IconNameRegistry {
+}
+/**
+ * Represents a valid icon name.
+ *
+ * When `IconNameRegistry` is augmented, this type provides autocompletion
+ * for registered icon names while still accepting any string value.
+ *
+ * @public
+ */
+export type IconName = keyof IconNameRegistry extends never ? string : keyof IconNameRegistry | (string & {});
 /**
  * This interface is used to specify which icon to use in many components,
  * along with related properties, like color.
@@ -8,7 +37,7 @@ export interface Icon {
     /**
      * Name of the icon, refers to the icon's filename in lime-icons8 repository.
      */
-    name: string;
+    name: IconName;
     /**
      * Color of the icon.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "39.17.3",
+  "version": "39.18.0",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",

package/dist/lime-elements/p-6b956d6d.entry.js

@@ -1 +0,0 @@
-import{r as o,h as t,H as e,a as n}from"./p-DBTJNfo7.js";import{m as a,r as i}from"./p-BgTwPGeH.js";import{c as s}from"./p-JbKhhoXs.js";import{d as r,g as l}from"./p-CgNJbSP4.js";const d=class{constructor(t){o(this,t),this.elevated=!1,this.disabled=!1,this.tooltipId=s(),this.filterClickWhenDisabled=o=>{this.disabled&&o.preventDefault()}}connectedCallback(){this.initialize()}componentWillLoad(){a(this.host)}disconnectedCallback(){i(this.host)}componentDidLoad(){this.initialize()}initialize(){this.host.shadowRoot.querySelector(".mdc-icon-button")}render(){const o={};return this.host.hasAttribute("tabindex")&&(o.tabindex=this.host.getAttribute("tabindex")),t(e,{key:"0df3febef19dcdb72c7c7f3740090414b313be51",onClick:this.filterClickWhenDisabled},t("button",Object.assign({key:"119641239ebd336ca5af28ce3452c940a552eccb","aria-label":this.label,disabled:this.disabled,id:this.tooltipId},o),this.renderIcon(),this.renderTooltip(this.tooltipId)))}renderIcon(){var o,e;const n=l(this.icon),a=r(this.icon);return t("limel-icon",{name:n,"aria-label":a,"aria-hidden":a?null:"true",style:{color:`${null===(o=this.icon)||void 0===o?void 0:o.color}`,"--icon-background-color":`${null===(e=this.icon)||void 0===e?void 0:e.backgroundColor}`}})}renderTooltip(o){if(this.label)return t("limel-tooltip",{elementId:o,label:this.label,helperLabel:this.helperLabel})}static get delegatesFocus(){return!0}get host(){return n(this)}};d.style='@charset "UTF-8";:host([hidden]){display:none}:host([aria-expanded=true]) button,:host([aria-expanded]:not([aria-expanded=false])) button{box-shadow:var(--button-shadow-inset-pressed) !important}button{appearance:none;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit}button:not(:disabled){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:var(--icon-background-color, transparent)}button:not(:disabled):hover,button:not(:disabled):focus,button:not(:disabled):focus-visible{will-change:color, background-color, box-shadow, transform}button:not(:disabled):hover,button:not(:disabled):focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}button:not(:disabled):hover{box-shadow:var(--button-shadow-hovered)}button:not(:disabled):active{--limel-clickable-transform-timing-function:cubic-bezier(       0.83,       -0.15,       0.49,       1.16   );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}button:not(:disabled):hover,button:not(:disabled):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button:not(:disabled):focus{outline:none}button:not(:disabled):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button{display:inline-flex;align-items:center;justify-content:center;height:2.25rem;width:2.25rem;border-radius:50%}button:disabled{cursor:not-allowed;color:var(--limel-theme-text-disabled-on-background-color)}:host([elevated]) button:not(:hover):not(:active):not(:disabled):not(:focus-visible){box-shadow:var(--button-shadow-normal)}:host([elevated]) button:disabled{box-shadow:var(--button-shadow-normal)}limel-icon{padding:0.25rem;width:1.75rem}';export{d as limel_icon_button}

package/dist/lime-elements/p-8a6721f9.entry.js

@@ -1 +0,0 @@
-import{r as e,h as t,H as o,a}from"./p-DBTJNfo7.js";import{m as i,r}from"./p-BgTwPGeH.js";import{d as n,g as s}from"./p-CgNJbSP4.js";const l=class{constructor(t){e(this,t),this.primary=!1,this.outlined=!1,this.disabled=!1,this.loading=!1,this.loadingFailed=!1,this.justLoaded=!1,this.filterClickWhenDisabled=e=>{this.disabled&&e.preventDefault()}}componentWillLoad(){i(this.host)}disconnectedCallback(){r(this.host)}render(){return t(o,{key:"4d575a67e902fe7e6af291ea9b6df5aa9d83ba29",onClick:this.filterClickWhenDisabled},t("button",{key:"887b9453b5a707db5239f499118d2bb27cc65c1a",class:{loading:this.loading,"just-loaded":this.justLoaded&&!this.loadingFailed,"just-failed":this.justLoaded&&this.loadingFailed,outlined:this.outlined},disabled:this.disabled||this.loading,"aria-busy":this.loading?"true":"false","aria-live":"polite"},this.renderIcon(this.icon),this.renderLabel(),this.renderSpinner(),t("svg",{key:"d2b52f207f0d6c6af0c55ee7585f3b12a0ee4832",viewBox:"0 0 30 30"},this.renderLoadingIcons())))}loadingWatcher(e,t){this.hasFinishedLoading(e,t)?this.handleLoadingFinished():e&&this.handleLoadingStarted()}hasFinishedLoading(e,t){return t&&!e}handleLoadingFinished(){this.justLoaded=!0,this.justLoadedTimeout=window.setTimeout((()=>{this.justLoaded=!1}),2e3)}handleLoadingStarted(){this.justLoaded=!1,window.clearTimeout(this.justLoadedTimeout)}renderLoadingIcons(){return this.loadingFailed?[t("line",{x1:"9",y1:"9",x2:"21",y2:"21"}),t("line",{x1:"21",y1:"9",x2:"9",y2:"21"})]:[t("line",{x1:"8",y1:"14",x2:"15",y2:"20"}),t("line",{x1:"23",y1:"9",x2:"14",y2:"20"})]}renderIcon(e){const o=s(e);if(!o)return;const a=n(e);let i;return this.label||a||console.warn("⚠️ Accessibility warning: `limel-button` has no `label` and its `icon` has no `title`. This creates an inaccessible button for screen reader users. Please add either a `label`, a `title` to the `icon`, or use a `limel-tooltip`. See https://lundalogik.github.io/lime-elements/versions/latest/#/component/limel-button/ for more information."),"object"==typeof e&&(i=e.color),t("limel-icon",Object.assign({},{role:"presentation",name:o,"aria-label":a,"aria-hidden":a?null:"true",style:{color:i}}))}renderLabel(){if(this.label)return t("span",{class:"label"},this.label)}renderSpinner(){if(this.loading)return t("limel-spinner",{limeBranded:!1})}static get delegatesFocus(){return!0}get host(){return a(this)}static get watchers(){return{loading:[{loadingWatcher:0}]}}};l.style='@charset "UTF-8";@keyframes reduced-presence{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0.7)}}:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded){animation:reduced-presence 0.3s ease forwards;transition:padding 0.3s ease, min-width 0.3s ease;transition-delay:0.3s;padding:0;min-width:0}:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) .label{transition:font-size 0.8s ease;transition-delay:0.3s;font-size:0;opacity:0}:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) limel-icon,:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) limel-spinner,:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) svg,:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) .icon{transition:all 0.3s ease;transition-delay:0.3s;opacity:0;width:0;height:0}:host{display:inline-block}:host([hidden]){display:none}:host([aria-expanded=true]) button,:host([aria-expanded]:not([aria-expanded=false])) button{box-shadow:var(--button-shadow-inset-pressed) !important}button.mdc-button{font-family:inherit}button{--_primary-color:var(       --lime-primary-color,       var(--limel-theme-primary-color)   );display:flex;align-items:center;justify-content:center;gap:0.125rem;border:none;border-radius:0.4rem;padding-top:0;padding-right:var(--button-padding-right, 0.5rem);padding-bottom:0;padding-left:var(--button-padding-left, 0.5rem);min-height:2.25rem;width:100%}button:not(:disabled){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}button:not(:disabled):hover,button:not(:disabled):focus,button:not(:disabled):focus-visible{will-change:color, background-color, box-shadow, transform}button:not(:disabled):hover,button:not(:disabled):focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}button:not(:disabled):active{--limel-clickable-transform-timing-function:cubic-bezier(       0.83,       -0.15,       0.49,       1.16   );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}button:not(:disabled):hover,button:not(:disabled):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button:not(:disabled):focus{outline:none}button:not(:disabled):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button:disabled{cursor:not-allowed}:host(limel-button[primary]) button:not(:disabled){color:var(--lime-on-primary-color, var(--limel-theme-on-primary-color));background-color:var(--_primary-color)}:host(limel-button[primary]) button:disabled{background-color:color-mix(in srgb, var(--_primary-color), transparent 80%)}:host(limel-button:not([primary])) button:not(:disabled){color:var(--_primary-color)}:host(limel-button:not([primary])) button:disabled.outlined{color:color-mix(in srgb, var(--_primary-color), transparent 60%);border-color:color-mix(in srgb, var(--_primary-color), transparent 70%)}:host(limel-button:not([primary])) button:disabled:not(.outlined){color:rgba(var(--contrast-1100), 0.37);background-color:rgba(var(--contrast-900), 0.1)}.label{font-size:var(--limel-theme-default-font-size);font-weight:600;letter-spacing:0.03125rem;padding:0 0.25rem}limel-spinner{position:absolute}limel-icon{width:1.25rem;flex-shrink:0;vertical-align:top}svg{height:1.875rem;opacity:0;pointer-events:none;position:absolute;width:1.875rem}svg line{stroke:rgb(var(--contrast-600));stroke-width:2}limel-icon,.label,limel-spinner,svg{transition:opacity 300ms ease-in-out}.loading limel-icon,.loading .label{opacity:0}.loading limel-spinner{opacity:1}.just-loaded limel-icon,.just-loaded .label,.just-failed limel-icon,.just-failed .label{opacity:0}.just-loaded svg,.just-failed svg{opacity:1}.just-failed{background-color:var(--limel-theme-error-color) !important;animation:shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both}.outlined{border:1px solid;border-color:var(--_primary-color)}@keyframes shake{10%,90%{transform:translate3d(-0.0625rem, 0, 0)}20%,80%{transform:translate3d(0.125rem, 0, 0)}30%,50%,70%{transform:translate3d(-0.1875rem, 0, 0)}40%,60%{transform:translate3d(0.1875rem, 0, 0)}}';export{l as limel_button}

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

@@ -1 +0,0 @@
-import{r as t,c as i,h as s,a as h}from"./p-DBTJNfo7.js";import{i as e}from"./p-B9Ofc5RB.js";import{T as n,E as o,a as r,A as l,b as a}from"./p-rI0IeKpx.js";import{c as d}from"./p-JbKhhoXs.js";import{a as c,g as p}from"./p-CgNJbSP4.js";import{d as u}from"./p-BviYUVSD.js";import"./p-BJQylLSL.js";import"./p-D6dCQvwl.js";import"./p-BOEi1C7r.js";import"./p-oiMYqRQ0.js";const m=class{constructor(s){t(this,s),this.change=i(this,"change"),this.interact=i(this,"interact"),this.action=i(this,"action"),this.disabled=!1,this.readonly=!1,this.required=!1,this.invalid=!1,this.allItems=[],this.multiple=!1,this.delimiter=null,this.actions=[],this.actionPosition="bottom",this.actionScrollBehavior="sticky",this.badgeIcons=!1,this.textValue="",this.loading=!1,this.chips=[],this.chipSetEditMode=!1,this.getValueId=t=>{const i=t.value;return i&&"object"==typeof i?i.id:i},this.createChips=t=>t?this.multiple?t.map(this.createChip):[this.createChip(t)]:[],this.createChip=t=>{const i=p(t.icon),s=c(t.icon,t.iconColor);return{id:`${this.getValueId(t)}`,text:t.text,removable:!0,icon:i?{name:i,color:s}:void 0,image:t.image,value:t,menuItems:t.actions}},this.search=async t=>{const i=setTimeout((()=>{this.loading=!0})),s=this.searcher||this.defaultSearcher,h=await s(this.textValue);clearTimeout(i),this.handleSearchResult(t,h)},this.defaultSearcher=async t=>""===t?this.allItems.slice(0,20):this.allItems.filter((i=>{let s=i.text.toLowerCase();return i.secondaryText&&(s=s+" "+i.secondaryText.toLowerCase()),s.includes(t.toLowerCase())})).slice(0,20),this.handleTextInput=this.handleTextInput.bind(this),this.handleInputKeyDown=this.handleInputKeyDown.bind(this),this.handleDropdownKeyDown=this.handleDropdownKeyDown.bind(this),this.handleInputFieldFocus=this.handleInputFieldFocus.bind(this),this.handleChange=this.handleChange.bind(this),this.handleInteract=this.handleInteract.bind(this),this.handleListChange=this.handleListChange.bind(this),this.handleActionListChange=this.handleActionListChange.bind(this),this.handleStopEditAndBlur=this.handleStopEditAndBlur.bind(this),this.handleCloseMenu=this.handleCloseMenu.bind(this),this.onListKeyDown=this.onListKeyDown.bind(this),this.portalId=d(),this.debouncedSearch=u(this.search,300)}componentWillLoad(){this.chips=this.createChips(this.value)}componentDidLoad(){this.chipSet=this.host.shadowRoot.querySelector("limel-chip-set"),this.updateTabIndex()}disconnectedCallback(){this.debouncedSearch.cancel()}onDisabledChange(){this.updateTabIndex()}updateTabIndex(){this.host.setAttribute("tabindex",this.disabled||this.readonly?"-1":"0")}async componentWillUpdate(){this.chipSetEditMode=!1,this.chipSet&&(this.chipSetEditMode=await this.chipSet.getEditMode())}render(){const t={};return this.multiple||(t.maxItems=1),[s("limel-chip-set",Object.assign({key:"d7928164dfd143478fb1b4ed248fdfa6c7c55f68",type:"input",inputType:"search",label:this.label,helperText:this.helperText,leadingIcon:this.leadingIcon,value:this.chips,disabled:this.disabled,invalid:this.invalid,delimiter:this.renderDelimiter(),readonly:this.readonly,required:this.required,searchLabel:this.searchLabel,onInput:this.handleTextInput,onKeyDown:this.handleInputKeyDown,onChange:this.handleChange,onInteract:this.handleInteract,onStartEdit:this.handleInputFieldFocus,onStopEdit:this.handleStopEditAndBlur,emptyInputOnBlur:!1,clearAllButton:this.multiple&&!this.chipSetEditMode},t)),this.renderDropdown()]}onChangeValue(){this.chips=this.createChips(this.value)}renderDelimiter(){return this.multiple?this.delimiter:null}renderDropdown(){const t=this.getDropdownContent(),i=[];if(this.shouldShowDropDownContent()){const s=this.getActionContent();"top"===this.actionPosition&&i.push(s),t&&i.push(t),"bottom"===this.actionPosition&&i.push(s)}return this.renderPortal(i)}getActionContent(){var t,i;return 0===(null!==(i=null===(t=this.actions)||void 0===t?void 0:t.length)&&void 0!==i?i:0)?null:[s("limel-list",{class:{"static-actions-list":!0,"is-on-top":"top"===this.actionPosition,"is-at-bottom":"bottom"===this.actionPosition,"has-position-sticky":"sticky"===this.actionScrollBehavior},badgeIcons:!0,type:"selectable",onChange:this.handleActionListChange,items:this.actions.map(this.removeUnusedPropertiesOnAction)})]}removeUnusedPropertiesOnAction(t){return Object.assign(Object.assign({},t),{actions:[]})}shouldShowDropDownContent(){return!this.isFull()&&!!this.chipSetEditMode}getDropdownContent(){var t;if(this.shouldShowDropDownContent())return this.loading?this.renderSpinner():(null===(t=this.items)||void 0===t?void 0:t.length)?this.renderListResult():this.renderEmptyMessage()}isFull(){return!this.multiple&&!!this.value}renderSpinner(){return s("div",{style:{width:"100%",display:"flex","align-items":"center","justify-content":"center",padding:"1rem 0"}},s("limel-spinner",{limeBranded:!1}))}renderEmptyMessage(){if(this.emptyResultMessage)return s("p",{style:{color:"rgb(var(--contrast-1100))","text-align":"center",margin:"0.5rem 1rem"}},this.emptyResultMessage)}renderListResult(){return s("limel-list",{badgeIcons:this.badgeIcons,onChange:this.handleListChange,onKeyDown:this.onListKeyDown,type:"selectable",items:this.items})}onListKeyDown(t){[n,o,r].includes(t.key)&&this.chipSet.setFocus()}renderPortal(t=[]){const i=getComputedStyle(this.host).getPropertyValue("--dropdown-z-index");return s("limel-portal",{visible:t.length>0,containerId:this.portalId,inheritParentWidth:!0,containerStyle:{"z-index":i}},s("limel-menu-surface",{open:t.length>0,allowClicksElement:this.host,style:{"--menu-surface-width":"100%","max-height":"inherit",display:"flex"},onDismiss:this.handleCloseMenu},t))}handleStopEditAndBlur(){const t=this.host.shadowRoot.activeElement||document.activeElement,i=document.querySelector(`#${this.portalId}`);e(t,this.host)||e(t,i)||this.clearInputField()}async handleTextInput(t){t.stopPropagation();const i=t.detail;this.textValue=i,this.debouncedSearch(i),""===i&&this.debouncedSearch.flush()}handleListChange(t){var i;if(t.stopPropagation(),!this.value||this.value!==t.detail){let i=t.detail;this.multiple&&(i=[...this.value,t.detail]),this.change.emit(i),this.items=[]}this.multiple&&(this.textValue="",null===(i=this.chipSet)||void 0===i||i.setFocus(!0))}handleActionListChange(t){t.stopPropagation(),t.detail&&(this.action.emit(t.detail.value),this.items=[])}handleInputFieldFocus(){this.debouncedSearch(this.textValue)}handleChange(t){t.stopPropagation(),this.textValue="";let i=null;this.multiple&&(i=t.detail.map((t=>this.value.find((i=>`${this.getValueId(i)}`===t.id))))),this.change.emit(i)}handleInteract(t){t.stopPropagation(),this.interact.emit(t.detail?t.detail.value:t.detail)}handleInputKeyDown(t){const i=t.key===n&&!t.altKey&&!t.metaKey&&!t.shiftKey,s=t.key===l,h=t.key===a;if(!i&&!s&&!h)return;const e=document.querySelector(` #${this.portalId} limel-list`);if(e){if(i||h){const i=e.shadowRoot.querySelector(".mdc-deprecated-list-item");if(!i)return;return t.preventDefault(),void i.focus()}if(s){const i=[...e.shadowRoot.querySelectorAll(".mdc-deprecated-list-item")].at(-1);if(!i)return;t.preventDefault(),i.focus()}}}handleDropdownKeyDown(t){t.key===o&&(t.preventDefault(),this.textValue="",this.chipSet.setFocus(!0))}handleSearchResult(t,i){if(t===this.textValue){if(this.items=i,this.multiple){const t=this.value;this.items=i.filter((i=>!t.includes(i)))}this.loading=!1}}handleCloseMenu(){this.items.length>0||this.clearInputField()}clearInputField(){this.chipSet.emptyInput(),this.textValue="",this.handleSearchResult("",[]),this.debouncedSearch.cancel()}static get delegatesFocus(){return!0}get host(){return h(this)}static get watchers(){return{disabled:[{onDisabledChange:0}],value:[{onChangeValue:0}]}}};m.style=":host{position:relative;display:block}:host([hidden]){display:none}";export{m as limel_picker}