@limetech/lime-elements 37.77.0 → 37.78.1

package/dist/lime-elements/{p-23bc6de0.js → p-e1e25236.js}

@@ -1,2 +1,2 @@
 const o=100;const t=50;const e=1.6;const n=2;const s=2;const c=(c,l)=>d=>{const a=d.clientX;const h=d.clientY;const m=a-c.x;const r=h-c.y;const f={x:m-c.width/s,y:r-c.height/s};const i=Math.sqrt(f.x**s+f.y**s);const u=Math.sqrt(Math.min(c.width,c.height)/t);const v=`\n            ${f.y/(o*u)},\n            ${-f.x/(o*u)},\n            0,\n            ${Math.log(i)*e/u}deg\n        `;l.style.setProperty("--limel-3d-hover-effect-rotate3d",v);const M=`\n            ${f.x*n+c.width/s}px\n            ${f.y*n+c.height/s}px\n        `;l.style.setProperty("--limel-3d-hover-effect-glow-position",M)};const l=o=>{let t;const e=()=>{const e=o.getBoundingClientRect();t=c(e,o);document.addEventListener("mousemove",t)};const n=()=>{document.removeEventListener("mousemove",t);o.style.removeProperty("--limel-3d-hover-effect-rotate3d");o.style.removeProperty("--limel-3d-hover-effect-glow-position")};return{handleMouseEnter:e,handleMouseLeave:n}};export{l as g};
-//# sourceMappingURL=p-23bc6de0.js.map
+//# sourceMappingURL=p-e1e25236.js.map

package/dist/lime-elements/p-e1e25236.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["MOUSE_SCALE_FACTOR","SCALING_BASE","ROTATION_DEGREE_MULTIPLIER","GLOW_POSITION_MULTIPLIER","CENTER_DIVISOR","tiltFollowingTheCursor","the3dElementBounds","element","e","mouseX","clientX","mouseY","clientY","leftX","x","topY","y","center","width","height","distance","Math","sqrt","scalingFactor","min","rotate3d","log","style","setProperty","glowPosition","getMouseEventHandlers","tiltCallback","handleMouseEnter","bounds","getBoundingClientRect","document","addEventListener","handleMouseLeave","removeEventListener","removeProperty"],"sources":["./src/util/3d-tilt-hover-effect.ts"],"sourcesContent":["/* eslint-disable tsdoc/syntax */\n/**\n * Utility functions for creating a 3D tilt hover effect.\n *\n * This module provides functions to enable a 3D tilt effect for consumer components,\n * allowing elements to visually follow the cursor's position and tilt towards it.\n * It also includes a glow effect for added interactivity.\n *\n * ## Usage\n *\n * 1. **Import the utility**:\n *\n * ```tsx\n * import { getMouseEventHandlers } from './path/to/3d-tilt-hover-effect';\n * ```\n *\n * 2. **Define the structure of your component**:\n *\n * To enable the 3D tilt effect, the host element of your component should act as\n * the \"parent-of-the-3d-element\", and a nested child element should act as\n * \"the-3d-element\" (the interactive element). This structure is necessary\n * to properly isolate the 3D transformations and maintain visual fidelity.\n *\n * For example:\n *\n * ```tsx\n * <Host>\n *     <section class=\"the-3d-element\">\n *         <!-- Your component content -->\n *     </section>\n * </Host>\n * ```\n *\n * Apply the required SCSS mixins to these elements:\n *\n * - **On the host element**:\n *   ```scss\n *   @include parent-of-the-3d-element;\n *   ```\n * - **On the nested \"interactive\" element**:\n *   ```scss\n *   @include the-3d-element;\n *   ```\n * - **For clickable interactive elements**:\n *   ```scss\n *   @include the-3d-element--clickable;\n *   ```\n * - **For the glow effect**:\n *   Add a `<limel-3d-hover-effect-glow />` inside \"the-3d-element\".\n *\n * 3. **Initialize in your component**:\n *\n * Use `getMouseEventHandlers()` to attach the required mouse event listeners\n * to the \"interactive element\" (`the-3d-element`). For example:\n *\n * ```tsx\n * @Element()\n * private host: HTMLElement;\n *\n * private handleMouseEnter: () => void;\n * private handleMouseLeave: () => void;\n *\n * public componentWillLoad() {\n *     const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(\n *         this.host.querySelector('.the-3d-element'),\n *     );\n *     this.handleMouseEnter = handleMouseEnter;\n *     this.handleMouseLeave = handleMouseLeave;\n * }\n * ```\n *\n * 4. **Attach event handlers in your render method**:\n *\n * ```tsx\n * public render() {\n *     return (\n *         <Host>\n *             <section\n *                 class=\"the-3d-element\"\n *                 onMouseEnter={this.handleMouseEnter}\n *                 onMouseLeave={this.handleMouseLeave}\n *             >\n *                 <!-- Your component content -->\n *                 <div class=\"limel-3d-hover-effect-glow\" />\n *             </section>\n *         </Host>\n *     );\n * }\n * ```\n *\n * ## Styling Notes\n *\n * - The host element (`parent-of-the-3d-element`) must have these styles:\n *   ```scss\n *   @include parent-of-the-3d-element;\n *   ```\n * - The nested \"interactive element\" (`the-3d-element`) should have:\n *   ```scss\n *   @include the-3d-element;\n *   ```\n * - For components like Card or Info Tile, using a nested \"interactive element\"\n *   is the only way to achieve the 3D effect, as the host serves as the parent\n *   and must maintain proper isolation for the effect.\n */\n/* eslint-enable tsdoc/syntax */\n\nexport const MOUSE_SCALE_FACTOR = 100;\nexport const SCALING_BASE = 50;\nexport const ROTATION_DEGREE_MULTIPLIER = 1.6;\nexport const GLOW_POSITION_MULTIPLIER = 2;\nexport const CENTER_DIVISOR = 2;\n\nexport const tiltFollowingTheCursor =\n    (the3dElementBounds: DOMRect, element: HTMLElement) => (e: MouseEvent) => {\n        const mouseX = e.clientX;\n        const mouseY = e.clientY;\n        const leftX = mouseX - the3dElementBounds.x;\n        const topY = mouseY - the3dElementBounds.y;\n        const center = {\n            x: leftX - the3dElementBounds.width / CENTER_DIVISOR,\n            y: topY - the3dElementBounds.height / CENTER_DIVISOR,\n        };\n        const distance = Math.sqrt(\n            center.x ** CENTER_DIVISOR + center.y ** CENTER_DIVISOR,\n        );\n\n        const scalingFactor = Math.sqrt(\n            Math.min(the3dElementBounds.width, the3dElementBounds.height) /\n                SCALING_BASE,\n        );\n\n        const rotate3d = `\n            ${center.y / (MOUSE_SCALE_FACTOR * scalingFactor)},\n            ${-center.x / (MOUSE_SCALE_FACTOR * scalingFactor)},\n            0,\n            ${(Math.log(distance) * ROTATION_DEGREE_MULTIPLIER) / scalingFactor}deg\n        `;\n        element.style.setProperty('--limel-3d-hover-effect-rotate3d', rotate3d);\n\n        const glowPosition = `\n            ${center.x * GLOW_POSITION_MULTIPLIER + the3dElementBounds.width / CENTER_DIVISOR}px\n            ${center.y * GLOW_POSITION_MULTIPLIER + the3dElementBounds.height / CENTER_DIVISOR}px\n        `;\n        element.style.setProperty(\n            '--limel-3d-hover-effect-glow-position',\n            glowPosition,\n        );\n    };\n\nexport const getMouseEventHandlers = (element: HTMLElement) => {\n    let tiltCallback: (e: MouseEvent) => void;\n\n    const handleMouseEnter = () => {\n        const bounds = element.getBoundingClientRect();\n        tiltCallback = tiltFollowingTheCursor(bounds, element);\n        document.addEventListener('mousemove', tiltCallback);\n    };\n\n    const handleMouseLeave = () => {\n        document.removeEventListener('mousemove', tiltCallback);\n        element.style.removeProperty('--limel-3d-hover-effect-rotate3d');\n        element.style.removeProperty('--limel-3d-hover-effect-glow-position');\n    };\n\n    return {\n        handleMouseEnter: handleMouseEnter,\n        handleMouseLeave: handleMouseLeave,\n    };\n};\n"],"mappings":"AA0GO,MAAMA,EAAqB,IAC3B,MAAMC,EAAe,GACrB,MAAMC,EAA6B,IACnC,MAAMC,EAA2B,EACjC,MAAMC,EAAiB,EAEvB,MAAMC,EACT,CAACC,EAA6BC,IAA0BC,IACpD,MAAMC,EAASD,EAAEE,QACjB,MAAMC,EAASH,EAAEI,QACjB,MAAMC,EAAQJ,EAASH,EAAmBQ,EAC1C,MAAMC,EAAOJ,EAASL,EAAmBU,EACzC,MAAMC,EAAS,CACXH,EAAGD,EAAQP,EAAmBY,MAAQd,EACtCY,EAAGD,EAAOT,EAAmBa,OAASf,GAE1C,MAAMgB,EAAWC,KAAKC,KAClBL,EAAOH,GAAKV,EAAiBa,EAAOD,GAAKZ,GAG7C,MAAMmB,EAAgBF,KAAKC,KACvBD,KAAKG,IAAIlB,EAAmBY,MAAOZ,EAAmBa,QAClDlB,GAGR,MAAMwB,EAAW,iBACXR,EAAOD,GAAKhB,EAAqBuB,qBAChCN,EAAOH,GAAKd,EAAqBuB,oCAEjCF,KAAKK,IAAIN,GAAYlB,EAA8BqB,iBAE1DhB,EAAQoB,MAAMC,YAAY,mCAAoCH,GAE9D,MAAMI,EAAe,iBACfZ,EAAOH,EAAIX,EAA2BG,EAAmBY,MAAQd,oBACjEa,EAAOD,EAAIb,EAA2BG,EAAmBa,OAASf,gBAExEG,EAAQoB,MAAMC,YACV,wCACAC,EACH,E,MAGIC,EAAyBvB,IAClC,IAAIwB,EAEJ,MAAMC,EAAmB,KACrB,MAAMC,EAAS1B,EAAQ2B,wBACvBH,EAAe1B,EAAuB4B,EAAQ1B,GAC9C4B,SAASC,iBAAiB,YAAaL,EAAa,EAGxD,MAAMM,EAAmB,KACrBF,SAASG,oBAAoB,YAAaP,GAC1CxB,EAAQoB,MAAMY,eAAe,oCAC7BhC,EAAQoB,MAAMY,eAAe,wCAAwC,EAGzE,MAAO,CACHP,iBAAkBA,EAClBK,iBAAkBA,EACrB,S"}

package/dist/lime-elements/style/mixins.scss

@@ -457,42 +457,6 @@ $clickable-normal-state-transitions: (
     white-space: nowrap;
 }
 
-// This mixin designed to enhance the visual effects,
-// when the `tiltFollowingTheCursor` utility function from `3d-tilt-hover-effect.ts`
-// is implemented in a component.
-// This adds styles to a `<div class"limel-3d-hover-effect-glow" />`, needed to create
-// a glow effect on a 3D element when the parent element is hovered.
-// when the `tiltFollowingTheCursor` utility function from `3d-tilt-hover-effect.ts`
-// Parts of these styles are controlled by the `titleFollowingTheCursor` function.
-@mixin limel-3d-hover-effect-glow($the3dElement, $border-radius) {
-    .limel-3d-hover-effect-glow {
-        transition:
-            background 0.4s ease,
-            opacity 0.4s ease;
-        pointer-events: none;
-
-        position: absolute;
-        inset: 0;
-        border-radius: $border-radius;
-
-        opacity: 0.1;
-        #{$the3dElement}:hover & {
-            opacity: 0.5;
-            @media (prefers-reduced-motion) {
-                opacity: 0.2;
-            }
-        }
-
-        background-image: radial-gradient(
-            circle at var(--limel-3d-hover-effect-glow-position, 50% -20%),
-            rgb(var(--color-white), 0.3),
-            rgb(var(--color-white), 0)
-        );
-
-        mix-blend-mode: plus-lighter;
-    }
-}
-
 // These mixins below are designed to apply the necessary visual effects,
 // when the `tiltFollowingTheCursor` utility function from `3d-tilt-hover-effect.ts`
 // is implemented in a component.
@@ -545,6 +509,15 @@ $clickable-normal-state-transitions: (
         outline: none;
         transform: scale3d(1.01, 1.01, 1.01);
     }
+
+    &:hover {
+        limel-3d-hover-effect-glow {
+            --limel-3d-hover-effect-glow-opacity: 0.5;
+            @media (prefers-reduced-motion) {
+                --limel-3d-hover-effect-glow-opacity: 0.2;
+            }
+        }
+    }
 }
 
 @mixin the-3d-element--clickable {

package/dist/scss/mixins.scss

@@ -457,42 +457,6 @@ $clickable-normal-state-transitions: (
     white-space: nowrap;
 }
 
-// This mixin designed to enhance the visual effects,
-// when the `tiltFollowingTheCursor` utility function from `3d-tilt-hover-effect.ts`
-// is implemented in a component.
-// This adds styles to a `<div class"limel-3d-hover-effect-glow" />`, needed to create
-// a glow effect on a 3D element when the parent element is hovered.
-// when the `tiltFollowingTheCursor` utility function from `3d-tilt-hover-effect.ts`
-// Parts of these styles are controlled by the `titleFollowingTheCursor` function.
-@mixin limel-3d-hover-effect-glow($the3dElement, $border-radius) {
-    .limel-3d-hover-effect-glow {
-        transition:
-            background 0.4s ease,
-            opacity 0.4s ease;
-        pointer-events: none;
-
-        position: absolute;
-        inset: 0;
-        border-radius: $border-radius;
-
-        opacity: 0.1;
-        #{$the3dElement}:hover & {
-            opacity: 0.5;
-            @media (prefers-reduced-motion) {
-                opacity: 0.2;
-            }
-        }
-
-        background-image: radial-gradient(
-            circle at var(--limel-3d-hover-effect-glow-position, 50% -20%),
-            rgb(var(--color-white), 0.3),
-            rgb(var(--color-white), 0)
-        );
-
-        mix-blend-mode: plus-lighter;
-    }
-}
-
 // These mixins below are designed to apply the necessary visual effects,
 // when the `tiltFollowingTheCursor` utility function from `3d-tilt-hover-effect.ts`
 // is implemented in a component.
@@ -545,6 +509,15 @@ $clickable-normal-state-transitions: (
         outline: none;
         transform: scale3d(1.01, 1.01, 1.01);
     }
+
+    &:hover {
+        limel-3d-hover-effect-glow {
+            --limel-3d-hover-effect-glow-opacity: 0.5;
+            @media (prefers-reduced-motion) {
+                --limel-3d-hover-effect-glow-opacity: 0.2;
+            }
+        }
+    }
 }
 
 @mixin the-3d-element--clickable {

package/dist/types/components/3d-hover-effect-glow/3d-hover-effect-glow.d.ts

@@ -0,0 +1,19 @@
+/**
+ * This component enhances the visual effects, when the `tiltFollowingTheCursor`
+ * utility function from `3d-tilt-hover-effect.ts` is implemented in a component.
+ *
+ * This component should be added to the HTML structure of the consumer component.
+ *
+ * This component carries its own styles which are needed to create a glow effect on the
+ * 3D element within the parent element, when the parent is hovered.
+ *
+ * The parent element must be using the `tiltFollowingTheCursor` utility function
+ * imported from `3d-tilt-hover-effect.ts`. This function will dynamically
+ * affect parts of the styles of this 3D glow effect.
+ *
+ * @private
+ */
+export declare class HoverEffectGlowComponent {
+  render(): any;
+}
+//# sourceMappingURL=3d-hover-effect-glow.d.ts.map

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

@@ -4,7 +4,7 @@ import { ListItem } from '../list/list-item.types';
 import { Searcher } from '../picker/searcher.types';
 import { PickerValue } from './value.types';
 /**
- * @exampleComponent limel-example-picker-single
+ * @exampleComponent limel-example-picker-basic
  * @exampleComponent limel-example-picker-multiple
  * @exampleComponent limel-example-picker-icons
  * @exampleComponent limel-example-picker-value-as-object
@@ -65,7 +65,18 @@ export declare class Picker {
    * See the docs for the type `Searcher` for type information on
    * the searcher function itself.
    */
-  searcher: Searcher;
+  searcher?: Searcher;
+  /**
+   * Only used if no `searcher` is provided. The picker will then use a
+   * default search function that filters the `allItems` based on the
+   * `text` and `secondaryText` properties of the items.
+   * This way, custom search functions are typically only needed when the
+   * search is done on the server.
+   * For performance reasons, the default searcher will never return more
+   * than 20 items, but if there are more than 20 items, the rest can be
+   * found by typing more characters in the search field.
+   */
+  allItems?: Array<ListItem<PickerValue>>;
   /**
    * True if multiple values are allowed
    */
@@ -161,6 +172,7 @@ export declare class Picker {
    */
   private handleTextInput;
   private search;
+  private defaultSearcher;
   /**
    * Change handler for the list
    *

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

@@ -35,7 +35,11 @@ export declare class Shortcut {
    * If supplied, the shortcut will be a clickable link.
    */
   link?: Link;
-  render(): any[];
+  private host;
+  private handleMouseEnter;
+  private handleMouseLeave;
+  componentWillLoad(): void;
+  render(): any;
   private renderLabel;
   private getAriaLabel;
   private renderNotification;

package/dist/types/components.d.ts

@@ -92,6 +92,19 @@ export { Layout } from "./components/table/layout";
 export { EditorUiType } from "./components/text-editor/types";
 export { EditorTextLink } from "./components/text-editor/prosemirror-adapter/menu/types";
 export namespace Components {
+    /**
+     * This component enhances the visual effects, when the `tiltFollowingTheCursor`
+     * utility function from `3d-tilt-hover-effect.ts` is implemented in a component.
+     * This component should be added to the HTML structure of the consumer component.
+     * This component carries its own styles which are needed to create a glow effect on the
+     * 3D element within the parent element, when the parent is hovered.
+     * The parent element must be using the `tiltFollowingTheCursor` utility function
+     * imported from `3d-tilt-hover-effect.ts`. This function will dynamically
+     * affect parts of the styles of this 3D glow effect.
+     * @private 
+     */
+    interface Limel3dHoverEffectGlow {
+    }
     /**
      * An action bar is a user interface element commonly found in software applications and websites.
      * It typically appears at the top of the screen or within a specific section
@@ -1989,7 +2002,7 @@ export namespace Components {
         "open": boolean;
     }
     /**
-     * @exampleComponent limel-example-picker-single
+     * @exampleComponent limel-example-picker-basic
      * @exampleComponent limel-example-picker-multiple
      * @exampleComponent limel-example-picker-icons
      * @exampleComponent limel-example-picker-value-as-object
@@ -2012,6 +2025,10 @@ export namespace Components {
           * Static actions that can be clicked by the user.
          */
         "actions": Array<ListItem<Action>>;
+        /**
+          * Only used if no `searcher` is provided. The picker will then use a default search function that filters the `allItems` based on the `text` and `secondaryText` properties of the items. This way, custom search functions are typically only needed when the search is done on the server. For performance reasons, the default searcher will never return more than 20 items, but if there are more than 20 items, the rest can be found by typing more characters in the search field.
+         */
+        "allItems"?: Array<ListItem<PickerValue>>;
         /**
           * Whether badge icons should be used in the result list or not
          */
@@ -2063,7 +2080,7 @@ export namespace Components {
         /**
           * A search function that takes a search-string as an argument, and returns a promise that will eventually be resolved with an array of `ListItem`:s.  See the docs for the type `Searcher` for type information on the searcher function itself.
          */
-        "searcher": Searcher;
+        "searcher"?: Searcher;
         /**
           * Currently selected value or values. Where the value can be an object.
          */
@@ -3043,6 +3060,23 @@ export interface LimelTextEditorLinkMenuCustomEvent<T> extends CustomEvent<T> {
     target: HTMLLimelTextEditorLinkMenuElement;
 }
 declare global {
+    /**
+     * This component enhances the visual effects, when the `tiltFollowingTheCursor`
+     * utility function from `3d-tilt-hover-effect.ts` is implemented in a component.
+     * This component should be added to the HTML structure of the consumer component.
+     * This component carries its own styles which are needed to create a glow effect on the
+     * 3D element within the parent element, when the parent is hovered.
+     * The parent element must be using the `tiltFollowingTheCursor` utility function
+     * imported from `3d-tilt-hover-effect.ts`. This function will dynamically
+     * affect parts of the styles of this 3D glow effect.
+     * @private 
+     */
+    interface HTMLLimel3dHoverEffectGlowElement extends Components.Limel3dHoverEffectGlow, HTMLStencilElement {
+    }
+    var HTMLLimel3dHoverEffectGlowElement: {
+        prototype: HTMLLimel3dHoverEffectGlowElement;
+        new (): HTMLLimel3dHoverEffectGlowElement;
+    };
     /**
      * An action bar is a user interface element commonly found in software applications and websites.
      * It typically appears at the top of the screen or within a specific section
@@ -4028,7 +4062,7 @@ declare global {
         new (): HTMLLimelMenuSurfaceElement;
     };
     /**
-     * @exampleComponent limel-example-picker-single
+     * @exampleComponent limel-example-picker-basic
      * @exampleComponent limel-example-picker-multiple
      * @exampleComponent limel-example-picker-icons
      * @exampleComponent limel-example-picker-value-as-object
@@ -4462,6 +4496,7 @@ declare global {
         new (): HTMLLimelTooltipContentElement;
     };
     interface HTMLElementTagNameMap {
+        "limel-3d-hover-effect-glow": HTMLLimel3dHoverEffectGlowElement;
         "limel-action-bar": HTMLLimelActionBarElement;
         "limel-action-bar-item": HTMLLimelActionBarItemElement;
         "limel-action-bar-overflow-menu": HTMLLimelActionBarOverflowMenuElement;
@@ -4533,6 +4568,19 @@ declare global {
     }
 }
 declare namespace LocalJSX {
+    /**
+     * This component enhances the visual effects, when the `tiltFollowingTheCursor`
+     * utility function from `3d-tilt-hover-effect.ts` is implemented in a component.
+     * This component should be added to the HTML structure of the consumer component.
+     * This component carries its own styles which are needed to create a glow effect on the
+     * 3D element within the parent element, when the parent is hovered.
+     * The parent element must be using the `tiltFollowingTheCursor` utility function
+     * imported from `3d-tilt-hover-effect.ts`. This function will dynamically
+     * affect parts of the styles of this 3D glow effect.
+     * @private 
+     */
+    interface Limel3dHoverEffectGlow {
+    }
     /**
      * An action bar is a user interface element commonly found in software applications and websites.
      * It typically appears at the top of the screen or within a specific section
@@ -6602,7 +6650,7 @@ declare namespace LocalJSX {
         "open"?: boolean;
     }
     /**
-     * @exampleComponent limel-example-picker-single
+     * @exampleComponent limel-example-picker-basic
      * @exampleComponent limel-example-picker-multiple
      * @exampleComponent limel-example-picker-icons
      * @exampleComponent limel-example-picker-value-as-object
@@ -6625,6 +6673,10 @@ declare namespace LocalJSX {
           * Static actions that can be clicked by the user.
          */
         "actions"?: Array<ListItem<Action>>;
+        /**
+          * Only used if no `searcher` is provided. The picker will then use a default search function that filters the `allItems` based on the `text` and `secondaryText` properties of the items. This way, custom search functions are typically only needed when the search is done on the server. For performance reasons, the default searcher will never return more than 20 items, but if there are more than 20 items, the rest can be found by typing more characters in the search field.
+         */
+        "allItems"?: Array<ListItem<PickerValue>>;
         /**
           * Whether badge icons should be used in the result list or not
          */
@@ -7600,6 +7652,7 @@ declare namespace LocalJSX {
         "maxlength"?: number;
     }
     interface IntrinsicElements {
+        "limel-3d-hover-effect-glow": Limel3dHoverEffectGlow;
         "limel-action-bar": LimelActionBar;
         "limel-action-bar-item": LimelActionBarItem;
         "limel-action-bar-overflow-menu": LimelActionBarOverflowMenu;
@@ -7674,6 +7727,18 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            /**
+             * This component enhances the visual effects, when the `tiltFollowingTheCursor`
+             * utility function from `3d-tilt-hover-effect.ts` is implemented in a component.
+             * This component should be added to the HTML structure of the consumer component.
+             * This component carries its own styles which are needed to create a glow effect on the
+             * 3D element within the parent element, when the parent is hovered.
+             * The parent element must be using the `tiltFollowingTheCursor` utility function
+             * imported from `3d-tilt-hover-effect.ts`. This function will dynamically
+             * affect parts of the styles of this 3D glow effect.
+             * @private 
+             */
+            "limel-3d-hover-effect-glow": LocalJSX.Limel3dHoverEffectGlow & JSXBase.HTMLAttributes<HTMLLimel3dHoverEffectGlowElement>;
             /**
              * An action bar is a user interface element commonly found in software applications and websites.
              * It typically appears at the top of the screen or within a specific section
@@ -8424,7 +8489,7 @@ declare module "@stencil/core" {
              */
             "limel-menu-surface": LocalJSX.LimelMenuSurface & JSXBase.HTMLAttributes<HTMLLimelMenuSurfaceElement>;
             /**
-             * @exampleComponent limel-example-picker-single
+             * @exampleComponent limel-example-picker-basic
              * @exampleComponent limel-example-picker-multiple
              * @exampleComponent limel-example-picker-icons
              * @exampleComponent limel-example-picker-value-as-object

package/dist/types/util/3d-tilt-hover-effect.d.ts

@@ -45,11 +45,7 @@
  *   @include the-3d-element--clickable;
  *   ```
  * - **For the glow effect**:
- *   Add a `<div class="limel-3d-hover-effect-glow" />` inside "the-3d-element",
- *   and use the following SCSS mixin:
- *   ```scss
- *   @include limel-3d-hover-effect-glow($selector, $border-radius);
- *   ```
+ *   Add a `<limel-3d-hover-effect-glow />` inside "the-3d-element".
  *
  * 3. **Initialize in your component**:
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "37.77.0",
+  "version": "37.78.1",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -59,8 +59,8 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/tabulator-tables": "^4.9.4",
-    "@typescript-eslint/eslint-plugin": "^8.18.1",
-    "@typescript-eslint/parser": "^8.18.1",
+    "@typescript-eslint/eslint-plugin": "^8.19.1",
+    "@typescript-eslint/parser": "^8.19.1",
     "codemirror": "^5.65.9",
     "cross-env": "^7.0.3",
     "dayjs": "^1.11.13",
@@ -69,7 +69,7 @@
     "eslint-plugin-ban": "^2.0.0",
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react": "^7.37.3",
     "eslint-plugin-sonarjs": "^3.0.1",
     "eslint-plugin-tsdoc": "^0.4.0",
     "flatpickr": "^4.6.13",
@@ -78,7 +78,7 @@
     "jest": "^27.5.1",
     "jest-cli": "^27.5.1",
     "jsonlint-mod": "^1.7.6",
-    "jsx-dom": "^8.1.5",
+    "jsx-dom": "^8.1.6",
     "kompendium": "^0.15.0",
     "lodash-es": "^4.17.21",
     "material-components-web": "^13.0.0",
@@ -90,7 +90,7 @@
     "prosemirror-markdown": "^1.13.1",
     "prosemirror-model": ">=1.22.1",
     "prosemirror-schema-basic": "^1.2.3",
-    "prosemirror-tables": "^1.6.1",
+    "prosemirror-tables": "^1.6.2",
     "puppeteer": "^19.11.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

package/dist/cjs/3d-tilt-hover-effect-f64da0a8.js.map

@@ -1 +0,0 @@
-{"file":"3d-tilt-hover-effect-f64da0a8.js","mappings":";;AAAA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2GA;AAEO,MAAM,kBAAkB,GAAG,GAAG,CAAC;AAC/B,MAAM,YAAY,GAAG,EAAE,CAAC;AACxB,MAAM,0BAA0B,GAAG,GAAG,CAAC;AACvC,MAAM,wBAAwB,GAAG,CAAC,CAAC;AACnC,MAAM,cAAc,GAAG,CAAC,CAAC;AAEzB,MAAM,sBAAsB,GAC/B,CAAC,kBAA2B,EAAE,OAAoB,KAAK,CAAC,CAAa;EACjE,MAAM,MAAM,GAAG,CAAC,CAAC,OAAO,CAAC;EACzB,MAAM,MAAM,GAAG,CAAC,CAAC,OAAO,CAAC;EACzB,MAAM,KAAK,GAAG,MAAM,GAAG,kBAAkB,CAAC,CAAC,CAAC;EAC5C,MAAM,IAAI,GAAG,MAAM,GAAG,kBAAkB,CAAC,CAAC,CAAC;EAC3C,MAAM,MAAM,GAAG;IACX,CAAC,EAAE,KAAK,GAAG,kBAAkB,CAAC,KAAK,GAAG,cAAc;IACpD,CAAC,EAAE,IAAI,GAAG,kBAAkB,CAAC,MAAM,GAAG,cAAc;GACvD,CAAC;EACF,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CACtB,MAAM,CAAC,CAAC,IAAI,cAAc,GAAG,MAAM,CAAC,CAAC,IAAI,cAAc,CAC1D,CAAC;EAEF,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAC3B,IAAI,CAAC,GAAG,CAAC,kBAAkB,CAAC,KAAK,EAAE,kBAAkB,CAAC,MAAM,CAAC;IACzD,YAAY,CACnB,CAAC;EAEF,MAAM,QAAQ,GAAG;cACX,MAAM,CAAC,CAAC,IAAI,kBAAkB,GAAG,aAAa,CAAC;cAC/C,CAAC,MAAM,CAAC,CAAC,IAAI,kBAAkB,GAAG,aAAa,CAAC;;cAEhD,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,0BAA0B,IAAI,aAAa;SACtE,CAAC;EACF,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,kCAAkC,EAAE,QAAQ,CAAC,CAAC;EAExE,MAAM,YAAY,GAAG;cACf,MAAM,CAAC,CAAC,GAAG,wBAAwB,GAAG,kBAAkB,CAAC,KAAK,GAAG,cAAc;cAC/E,MAAM,CAAC,CAAC,GAAG,wBAAwB,GAAG,kBAAkB,CAAC,MAAM,GAAG,cAAc;SACrF,CAAC;EACF,OAAO,CAAC,KAAK,CAAC,WAAW,CACrB,uCAAuC,EACvC,YAAY,CACf,CAAC;AACN,CAAC,CAAC;MAEO,qBAAqB,GAAG,CAAC,OAAoB;EACtD,IAAI,YAAqC,CAAC;EAE1C,MAAM,gBAAgB,GAAG;IACrB,MAAM,MAAM,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;IAC/C,YAAY,GAAG,sBAAsB,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACvD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;GACxD,CAAC;EAEF,MAAM,gBAAgB,GAAG;IACrB,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;IACxD,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,kCAAkC,CAAC,CAAC;IACjE,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,uCAAuC,CAAC,CAAC;GACzE,CAAC;EAEF,OAAO;IACH,gBAAgB,EAAE,gBAAgB;IAClC,gBAAgB,EAAE,gBAAgB;GACrC,CAAC;AACN;;;;","names":[],"sources":["./src/util/3d-tilt-hover-effect.ts"],"sourcesContent":["/* eslint-disable tsdoc/syntax */\n/**\n * Utility functions for creating a 3D tilt hover effect.\n *\n * This module provides functions to enable a 3D tilt effect for consumer components,\n * allowing elements to visually follow the cursor's position and tilt towards it.\n * It also includes a glow effect for added interactivity.\n *\n * ## Usage\n *\n * 1. **Import the utility**:\n *\n * ```tsx\n * import { getMouseEventHandlers } from './path/to/3d-tilt-hover-effect';\n * ```\n *\n * 2. **Define the structure of your component**:\n *\n * To enable the 3D tilt effect, the host element of your component should act as\n * the \"parent-of-the-3d-element\", and a nested child element should act as\n * \"the-3d-element\" (the interactive element). This structure is necessary\n * to properly isolate the 3D transformations and maintain visual fidelity.\n *\n * For example:\n *\n * ```tsx\n * <Host>\n *     <section class=\"the-3d-element\">\n *         <!-- Your component content -->\n *     </section>\n * </Host>\n * ```\n *\n * Apply the required SCSS mixins to these elements:\n *\n * - **On the host element**:\n *   ```scss\n *   @include parent-of-the-3d-element;\n *   ```\n * - **On the nested \"interactive\" element**:\n *   ```scss\n *   @include the-3d-element;\n *   ```\n * - **For clickable interactive elements**:\n *   ```scss\n *   @include the-3d-element--clickable;\n *   ```\n * - **For the glow effect**:\n *   Add a `<div class=\"limel-3d-hover-effect-glow\" />` inside \"the-3d-element\",\n *   and use the following SCSS mixin:\n *   ```scss\n *   @include limel-3d-hover-effect-glow($selector, $border-radius);\n *   ```\n *\n * 3. **Initialize in your component**:\n *\n * Use `getMouseEventHandlers()` to attach the required mouse event listeners\n * to the \"interactive element\" (`the-3d-element`). For example:\n *\n * ```tsx\n * @Element()\n * private host: HTMLElement;\n *\n * private handleMouseEnter: () => void;\n * private handleMouseLeave: () => void;\n *\n * public componentWillLoad() {\n *     const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(\n *         this.host.querySelector('.the-3d-element'),\n *     );\n *     this.handleMouseEnter = handleMouseEnter;\n *     this.handleMouseLeave = handleMouseLeave;\n * }\n * ```\n *\n * 4. **Attach event handlers in your render method**:\n *\n * ```tsx\n * public render() {\n *     return (\n *         <Host>\n *             <section\n *                 class=\"the-3d-element\"\n *                 onMouseEnter={this.handleMouseEnter}\n *                 onMouseLeave={this.handleMouseLeave}\n *             >\n *                 <!-- Your component content -->\n *                 <div class=\"limel-3d-hover-effect-glow\" />\n *             </section>\n *         </Host>\n *     );\n * }\n * ```\n *\n * ## Styling Notes\n *\n * - The host element (`parent-of-the-3d-element`) must have these styles:\n *   ```scss\n *   @include parent-of-the-3d-element;\n *   ```\n * - The nested \"interactive element\" (`the-3d-element`) should have:\n *   ```scss\n *   @include the-3d-element;\n *   ```\n * - For components like Card or Info Tile, using a nested \"interactive element\"\n *   is the only way to achieve the 3D effect, as the host serves as the parent\n *   and must maintain proper isolation for the effect.\n */\n/* eslint-enable tsdoc/syntax */\n\nexport const MOUSE_SCALE_FACTOR = 100;\nexport const SCALING_BASE = 50;\nexport const ROTATION_DEGREE_MULTIPLIER = 1.6;\nexport const GLOW_POSITION_MULTIPLIER = 2;\nexport const CENTER_DIVISOR = 2;\n\nexport const tiltFollowingTheCursor =\n    (the3dElementBounds: DOMRect, element: HTMLElement) => (e: MouseEvent) => {\n        const mouseX = e.clientX;\n        const mouseY = e.clientY;\n        const leftX = mouseX - the3dElementBounds.x;\n        const topY = mouseY - the3dElementBounds.y;\n        const center = {\n            x: leftX - the3dElementBounds.width / CENTER_DIVISOR,\n            y: topY - the3dElementBounds.height / CENTER_DIVISOR,\n        };\n        const distance = Math.sqrt(\n            center.x ** CENTER_DIVISOR + center.y ** CENTER_DIVISOR,\n        );\n\n        const scalingFactor = Math.sqrt(\n            Math.min(the3dElementBounds.width, the3dElementBounds.height) /\n                SCALING_BASE,\n        );\n\n        const rotate3d = `\n            ${center.y / (MOUSE_SCALE_FACTOR * scalingFactor)},\n            ${-center.x / (MOUSE_SCALE_FACTOR * scalingFactor)},\n            0,\n            ${(Math.log(distance) * ROTATION_DEGREE_MULTIPLIER) / scalingFactor}deg\n        `;\n        element.style.setProperty('--limel-3d-hover-effect-rotate3d', rotate3d);\n\n        const glowPosition = `\n            ${center.x * GLOW_POSITION_MULTIPLIER + the3dElementBounds.width / CENTER_DIVISOR}px\n            ${center.y * GLOW_POSITION_MULTIPLIER + the3dElementBounds.height / CENTER_DIVISOR}px\n        `;\n        element.style.setProperty(\n            '--limel-3d-hover-effect-glow-position',\n            glowPosition,\n        );\n    };\n\nexport const getMouseEventHandlers = (element: HTMLElement) => {\n    let tiltCallback: (e: MouseEvent) => void;\n\n    const handleMouseEnter = () => {\n        const bounds = element.getBoundingClientRect();\n        tiltCallback = tiltFollowingTheCursor(bounds, element);\n        document.addEventListener('mousemove', tiltCallback);\n    };\n\n    const handleMouseLeave = () => {\n        document.removeEventListener('mousemove', tiltCallback);\n        element.style.removeProperty('--limel-3d-hover-effect-rotate3d');\n        element.style.removeProperty('--limel-3d-hover-effect-glow-position');\n    };\n\n    return {\n        handleMouseEnter: handleMouseEnter,\n        handleMouseLeave: handleMouseLeave,\n    };\n};\n"],"version":3}

package/dist/esm/3d-tilt-hover-effect-a76fcd43.js.map

@@ -1 +0,0 @@
-{"file":"3d-tilt-hover-effect-a76fcd43.js","mappings":"AAAA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2GA;AAEO,MAAM,kBAAkB,GAAG,GAAG,CAAC;AAC/B,MAAM,YAAY,GAAG,EAAE,CAAC;AACxB,MAAM,0BAA0B,GAAG,GAAG,CAAC;AACvC,MAAM,wBAAwB,GAAG,CAAC,CAAC;AACnC,MAAM,cAAc,GAAG,CAAC,CAAC;AAEzB,MAAM,sBAAsB,GAC/B,CAAC,kBAA2B,EAAE,OAAoB,KAAK,CAAC,CAAa;EACjE,MAAM,MAAM,GAAG,CAAC,CAAC,OAAO,CAAC;EACzB,MAAM,MAAM,GAAG,CAAC,CAAC,OAAO,CAAC;EACzB,MAAM,KAAK,GAAG,MAAM,GAAG,kBAAkB,CAAC,CAAC,CAAC;EAC5C,MAAM,IAAI,GAAG,MAAM,GAAG,kBAAkB,CAAC,CAAC,CAAC;EAC3C,MAAM,MAAM,GAAG;IACX,CAAC,EAAE,KAAK,GAAG,kBAAkB,CAAC,KAAK,GAAG,cAAc;IACpD,CAAC,EAAE,IAAI,GAAG,kBAAkB,CAAC,MAAM,GAAG,cAAc;GACvD,CAAC;EACF,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CACtB,MAAM,CAAC,CAAC,IAAI,cAAc,GAAG,MAAM,CAAC,CAAC,IAAI,cAAc,CAC1D,CAAC;EAEF,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAC3B,IAAI,CAAC,GAAG,CAAC,kBAAkB,CAAC,KAAK,EAAE,kBAAkB,CAAC,MAAM,CAAC;IACzD,YAAY,CACnB,CAAC;EAEF,MAAM,QAAQ,GAAG;cACX,MAAM,CAAC,CAAC,IAAI,kBAAkB,GAAG,aAAa,CAAC;cAC/C,CAAC,MAAM,CAAC,CAAC,IAAI,kBAAkB,GAAG,aAAa,CAAC;;cAEhD,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,0BAA0B,IAAI,aAAa;SACtE,CAAC;EACF,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,kCAAkC,EAAE,QAAQ,CAAC,CAAC;EAExE,MAAM,YAAY,GAAG;cACf,MAAM,CAAC,CAAC,GAAG,wBAAwB,GAAG,kBAAkB,CAAC,KAAK,GAAG,cAAc;cAC/E,MAAM,CAAC,CAAC,GAAG,wBAAwB,GAAG,kBAAkB,CAAC,MAAM,GAAG,cAAc;SACrF,CAAC;EACF,OAAO,CAAC,KAAK,CAAC,WAAW,CACrB,uCAAuC,EACvC,YAAY,CACf,CAAC;AACN,CAAC,CAAC;MAEO,qBAAqB,GAAG,CAAC,OAAoB;EACtD,IAAI,YAAqC,CAAC;EAE1C,MAAM,gBAAgB,GAAG;IACrB,MAAM,MAAM,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;IAC/C,YAAY,GAAG,sBAAsB,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACvD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;GACxD,CAAC;EAEF,MAAM,gBAAgB,GAAG;IACrB,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;IACxD,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,kCAAkC,CAAC,CAAC;IACjE,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,uCAAuC,CAAC,CAAC;GACzE,CAAC;EAEF,OAAO;IACH,gBAAgB,EAAE,gBAAgB;IAClC,gBAAgB,EAAE,gBAAgB;GACrC,CAAC;AACN;;;;","names":[],"sources":["./src/util/3d-tilt-hover-effect.ts"],"sourcesContent":["/* eslint-disable tsdoc/syntax */\n/**\n * Utility functions for creating a 3D tilt hover effect.\n *\n * This module provides functions to enable a 3D tilt effect for consumer components,\n * allowing elements to visually follow the cursor's position and tilt towards it.\n * It also includes a glow effect for added interactivity.\n *\n * ## Usage\n *\n * 1. **Import the utility**:\n *\n * ```tsx\n * import { getMouseEventHandlers } from './path/to/3d-tilt-hover-effect';\n * ```\n *\n * 2. **Define the structure of your component**:\n *\n * To enable the 3D tilt effect, the host element of your component should act as\n * the \"parent-of-the-3d-element\", and a nested child element should act as\n * \"the-3d-element\" (the interactive element). This structure is necessary\n * to properly isolate the 3D transformations and maintain visual fidelity.\n *\n * For example:\n *\n * ```tsx\n * <Host>\n *     <section class=\"the-3d-element\">\n *         <!-- Your component content -->\n *     </section>\n * </Host>\n * ```\n *\n * Apply the required SCSS mixins to these elements:\n *\n * - **On the host element**:\n *   ```scss\n *   @include parent-of-the-3d-element;\n *   ```\n * - **On the nested \"interactive\" element**:\n *   ```scss\n *   @include the-3d-element;\n *   ```\n * - **For clickable interactive elements**:\n *   ```scss\n *   @include the-3d-element--clickable;\n *   ```\n * - **For the glow effect**:\n *   Add a `<div class=\"limel-3d-hover-effect-glow\" />` inside \"the-3d-element\",\n *   and use the following SCSS mixin:\n *   ```scss\n *   @include limel-3d-hover-effect-glow($selector, $border-radius);\n *   ```\n *\n * 3. **Initialize in your component**:\n *\n * Use `getMouseEventHandlers()` to attach the required mouse event listeners\n * to the \"interactive element\" (`the-3d-element`). For example:\n *\n * ```tsx\n * @Element()\n * private host: HTMLElement;\n *\n * private handleMouseEnter: () => void;\n * private handleMouseLeave: () => void;\n *\n * public componentWillLoad() {\n *     const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(\n *         this.host.querySelector('.the-3d-element'),\n *     );\n *     this.handleMouseEnter = handleMouseEnter;\n *     this.handleMouseLeave = handleMouseLeave;\n * }\n * ```\n *\n * 4. **Attach event handlers in your render method**:\n *\n * ```tsx\n * public render() {\n *     return (\n *         <Host>\n *             <section\n *                 class=\"the-3d-element\"\n *                 onMouseEnter={this.handleMouseEnter}\n *                 onMouseLeave={this.handleMouseLeave}\n *             >\n *                 <!-- Your component content -->\n *                 <div class=\"limel-3d-hover-effect-glow\" />\n *             </section>\n *         </Host>\n *     );\n * }\n * ```\n *\n * ## Styling Notes\n *\n * - The host element (`parent-of-the-3d-element`) must have these styles:\n *   ```scss\n *   @include parent-of-the-3d-element;\n *   ```\n * - The nested \"interactive element\" (`the-3d-element`) should have:\n *   ```scss\n *   @include the-3d-element;\n *   ```\n * - For components like Card or Info Tile, using a nested \"interactive element\"\n *   is the only way to achieve the 3D effect, as the host serves as the parent\n *   and must maintain proper isolation for the effect.\n */\n/* eslint-enable tsdoc/syntax */\n\nexport const MOUSE_SCALE_FACTOR = 100;\nexport const SCALING_BASE = 50;\nexport const ROTATION_DEGREE_MULTIPLIER = 1.6;\nexport const GLOW_POSITION_MULTIPLIER = 2;\nexport const CENTER_DIVISOR = 2;\n\nexport const tiltFollowingTheCursor =\n    (the3dElementBounds: DOMRect, element: HTMLElement) => (e: MouseEvent) => {\n        const mouseX = e.clientX;\n        const mouseY = e.clientY;\n        const leftX = mouseX - the3dElementBounds.x;\n        const topY = mouseY - the3dElementBounds.y;\n        const center = {\n            x: leftX - the3dElementBounds.width / CENTER_DIVISOR,\n            y: topY - the3dElementBounds.height / CENTER_DIVISOR,\n        };\n        const distance = Math.sqrt(\n            center.x ** CENTER_DIVISOR + center.y ** CENTER_DIVISOR,\n        );\n\n        const scalingFactor = Math.sqrt(\n            Math.min(the3dElementBounds.width, the3dElementBounds.height) /\n                SCALING_BASE,\n        );\n\n        const rotate3d = `\n            ${center.y / (MOUSE_SCALE_FACTOR * scalingFactor)},\n            ${-center.x / (MOUSE_SCALE_FACTOR * scalingFactor)},\n            0,\n            ${(Math.log(distance) * ROTATION_DEGREE_MULTIPLIER) / scalingFactor}deg\n        `;\n        element.style.setProperty('--limel-3d-hover-effect-rotate3d', rotate3d);\n\n        const glowPosition = `\n            ${center.x * GLOW_POSITION_MULTIPLIER + the3dElementBounds.width / CENTER_DIVISOR}px\n            ${center.y * GLOW_POSITION_MULTIPLIER + the3dElementBounds.height / CENTER_DIVISOR}px\n        `;\n        element.style.setProperty(\n            '--limel-3d-hover-effect-glow-position',\n            glowPosition,\n        );\n    };\n\nexport const getMouseEventHandlers = (element: HTMLElement) => {\n    let tiltCallback: (e: MouseEvent) => void;\n\n    const handleMouseEnter = () => {\n        const bounds = element.getBoundingClientRect();\n        tiltCallback = tiltFollowingTheCursor(bounds, element);\n        document.addEventListener('mousemove', tiltCallback);\n    };\n\n    const handleMouseLeave = () => {\n        document.removeEventListener('mousemove', tiltCallback);\n        element.style.removeProperty('--limel-3d-hover-effect-rotate3d');\n        element.style.removeProperty('--limel-3d-hover-effect-glow-position');\n    };\n\n    return {\n        handleMouseEnter: handleMouseEnter,\n        handleMouseLeave: handleMouseLeave,\n    };\n};\n"],"version":3}

package/dist/lime-elements/p-05c10bed.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["infoTileCss","InfoTile","this","renderPrefix","prefix","h","class","renderValue","characterCount","_a","value","toString","length","loading","renderSuffix","suffix","renderIcon","icon","name","renderProgress","progress","_b","maxValue","displayPercentageColors","renderLabel","label","renderNotification","badge","renderSpinner","indeterminate","componentWillLoad","handleMouseEnter","handleMouseLeave","getMouseEventHandlers","host","render","extendedAriaLabel","checkProps","_c","_d","link","title","disabled","_e","href","Host","onMouseEnter","onMouseLeave","_f","target","_g","tabindex","_h","_j","_k","propValue"],"sources":["./src/components/info-tile/info-tile.scss?tag=limel-info-tile&encapsulation=shadow","./src/components/info-tile/info-tile.tsx"],"sourcesContent":["/**\n* @prop --info-tile-border-radius: defines the radius of corners of the info-tile. Defaults to `1rem`\n* @prop --info-tile-icon-color: defines the fill color of the info-tile icon. Defaults to `--contrast-1000`\n* @prop --info-tile-text-color: defines the color of the info-tile label. Defaults to `--contrast-1100`\n* @prop --info-tile-background-color: defines the backgrounds color of the info-tile icon. Defaults to `--contrast-100`\n* @prop --info-tile-badge-text-color: Text color of the notification badge. Defaults to `--color-white`\n* @prop --info-tile-badge-background-color: Background color of the notification badge. Defaults to `--color-red-default`\n* @prop --info-tile-progress-fill-color: Determines the color of the progressed section. Defaults to `--lime-primary-color`.\n* @prop --info-tile-progress-background-color: Determines the background color of the central section of the progress bar. Defaults to `--info-tile-background-color`.\n* @prop --info-tile-progress-suffix-color: Determines the color of the progress prefix. Defaults to `--contrast-1000`.\n * @prop --info-tile-progress-text-color: Determines the color of the progress value. Defaults to `--info-tile-text-color`.\n * @prop --info-tile-progress-prefix-color: Determines the color of the progress suffix. Defaults to `--contrast-1000`.\n*/\n\n@use '../../style/mixins';\n\n:host(limel-info-tile) {\n    --badge-text-color: var(\n        --info-tile-badge-text-color,\n        rgb(var(--color-white))\n    );\n    --badge-background-color: var(\n        --info-tile-badge-background-color,\n        rgb(var(--color-red-default))\n    );\n\n    --circular-progress-text-color: var(\n        --info-tile-progress-text-color,\n        var(--info-tile-text-color)\n    );\n    --circular-progress-suffix-color: var(--info-tile-progress-suffix-color);\n    --circular-progress-prefix-color: var(--info-tile-progress-prefix-color);\n    --circular-progress-track-color: rgb(var(--contrast-800), 0.3);\n    --circular-progress-fill-color: var(--info-tile-progress-fill-color);\n    --circular-progress-background-color: var(\n        --info-tile-progress-background-color,\n        var(--info-tile-background-color)\n    );\n\n    --label-min-size: 0.75rem;\n    --label-preferred-size: 6cqw;\n    --label-max-size: 1rem;\n\n    --value-min-size: 1rem;\n    --value-preferred-size: 20cqw;\n    --value-max-size: 4rem;\n\n    --suffix-prefix-min-size: 0.75rem;\n    --suffix-prefix-preferred-size: 8cqw;\n    --suffix-prefix-max-size: 1.5rem;\n\n    --icon-min-size: 2rem;\n    --icon-preferred-size: 60cqh;\n    --icon-max-size: calc(100cqw - 0.5rem);\n\n    container-type: size;\n    position: relative;\n    display: flex;\n\n    width: 100%;\n    height: 100%;\n\n    * {\n        box-sizing: border-box;\n    }\n}\n\n:host(limel-info-tile[disabled]) {\n    a {\n        opacity: 0.5;\n        cursor: not-allowed;\n    }\n}\n\na {\n    all: unset;\n    overflow: hidden;\n\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    align-items: flex-start;\n\n    height: 100%;\n    width: 100%;\n    flex-grow: 1;\n\n    padding: 0.25rem 1rem 0.5rem 1rem;\n    border-radius: var(--info-tile-border-radius, 1rem);\n    background-color: var(\n        --info-tile-background-color,\n        var(--lime-elevated-surface-background-color)\n    );\n}\n\n.icon {\n    z-index: 1;\n    position: absolute;\n    top: 0.5rem;\n    right: 0.75rem;\n    padding: 0.25rem;\n\n    aspect-ratio: 1/1;\n\n    color: var(--info-tile-icon-color, rgb(var(--contrast-1000)));\n\n    border-radius: 0;\n    height: clamp(\n        var(--icon-min-size),\n        var(--icon-preferred-size),\n        var(--icon-max-size)\n    );\n\n    @supports not (container-type: size) {\n        width: max(10%, 3rem);\n    }\n\n    .has-circular-progress & {\n        top: unset;\n        bottom: 0.5rem;\n        --icon-min-size: 1.5rem;\n        --icon-preferred-size: 20cqh;\n    }\n}\n\n.progress {\n    position: absolute;\n    top: 0.75rem;\n    right: 0.75rem;\n\n    --circular-progress-size: min(\n        var(--icon-preferred-size),\n        var(--icon-max-size)\n    );\n    @supports not (container-type: size) {\n        --circular-progress-size: initial;\n    }\n}\n\n.label {\n    z-index: 1;\n    color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n\n    line-height: 1.2;\n    font-size: clamp(\n        var(--label-min-size),\n        var(--label-preferred-size),\n        var(--label-max-size)\n    );\n    @supports not (container-type: size) {\n        font-size: 0.875rem;\n    }\n}\n\nlimel-badge {\n    position: absolute;\n    top: -0.25rem;\n    right: -0.25rem;\n}\n\nlimel-linear-progress {\n    --lime-primary-color: var(--info-tile-text-color);\n    position: absolute;\n    inset: auto 0 0 0;\n}\n\n.value-group {\n    position: relative;\n    z-index: 1;\n    display: flex;\n    flex-direction: column;\n    color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n}\n\n.value-and-suffix,\n.label {\n    text-shadow:\n        0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100))),\n        0 0 0.25rem var(--info-tile-background-color, rgb(var(--contrast-100)));\n}\n\n.value-and-suffix {\n    display: flex;\n}\n\n.prefix,\n.suffix {\n    font-size: clamp(\n        var(--suffix-prefix-min-size),\n        var(--suffix-prefix-preferred-size),\n        var(--suffix-prefix-max-size)\n    );\n    opacity: 0.7;\n\n    @supports not (container-type: size) {\n        font-size: 0.75rem;\n    }\n}\n\n.prefix {\n    align-self: flex-start;\n    line-height: normal;\n    transform: translateY(40%);\n}\n\n.value {\n    transition:\n        opacity 0.2s ease,\n        transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.95);\n    transform-origin: left;\n    transform: translate3d(0, 0, 0) scale(1);\n\n    @include mixins.truncate-text;\n    font-weight: bold;\n    line-height: normal;\n\n    font-size: clamp(\n        var(--value-min-size),\n        var(--value-preferred-size),\n        var(--value-max-size)\n    );\n    @supports not (container-type: size) {\n        font-size: 1.5rem;\n    }\n\n    :host(limel-info-tile[loading]) & {\n        opacity: 0.3;\n        transform: translate3d(0, 0, 0) scale(0.9);\n    }\n}\n\n.suffix {\n    transform: translateY(10%);\n}\n\n$xs: 8rem; //128px:\n$s: 18.75rem; //300px\n$m: 40.5rem; //648px\n$l: 62.5rem; //1000px\n\n@container (width < #{$xs}) {\n    .progress {\n        top: 0.25rem;\n        right: 0.25rem;\n    }\n    a {\n        padding: 0.375rem;\n        gap: 0.125rem;\n    }\n}\n\n@container (width < #{$s}) {\n    .progress {\n        top: 0.5rem;\n        right: 0.5rem;\n    }\n    .icon {\n        top: 0.25rem;\n        right: 0.5rem;\n        .has-circular-progress & {\n            right: 0.25rem;\n            bottom: 0.25rem;\n        }\n    }\n}\n\n@container (width < #{$m}) {\n    .value {\n        &.ch-1,\n        &.ch-2,\n        &.ch-3,\n        &.ch-4 {\n            --value-preferred-size: 20cqw;\n        }\n        &.ch-5 {\n            --value-preferred-size: 18cqw;\n        }\n        &.ch-6 {\n            --value-preferred-size: 17cqw;\n        }\n        &.ch-7 {\n            --value-preferred-size: 16cqw;\n        }\n        &.ch-8 {\n            --value-preferred-size: 15cqw;\n        }\n        &.ch-9 {\n            --value-preferred-size: 14cqw;\n        }\n        --value-preferred-size: 13cqw;\n    }\n}\n\n@container (height > #{$xs}) {\n    a {\n        padding-top: 0.75rem;\n        padding-bottom: 1rem;\n    }\n}\n\n@container (height < #{$xs}) and (width > #{$xs}) {\n    .value {\n        --value-preferred-size: 32cqh !important;\n    }\n    .suffix,\n    .prefix {\n        --suffix-prefix-preferred-size: 16cqh !important;\n    }\n}\n\n@container (height > #{$s}) {\n    .progress,\n    .icon {\n        position: relative;\n        top: unset;\n        right: unset;\n    }\n    a {\n        align-items: center;\n        justify-content: center;\n    }\n    .label {\n        text-align: center;\n        // -webkit-line-clamp: 3;\n    }\n    .has-circular-progress {\n        .icon {\n            position: absolute;\n            top: 0.5rem;\n            right: 0.5rem;\n            --icon-max-size: 3rem;\n        }\n    }\n}\n\n// The 3D effect\n@include mixins.limel-3d-hover-effect-glow(\n    a,\n    var(--info-tile-border-radius, 1rem)\n);\n\n:host(limel-info-tile) {\n    @include mixins.parent-of-the-3d-element;\n}\n\na {\n    @include mixins.the-3d-element;\n\n    &.is-clickable {\n        @include mixins.the-3d-element--clickable;\n    }\n}\n","import { Component, Prop, h, Element, Host } from '@stencil/core';\nimport { InfoTileProgress } from '../info-tile/info-tile.types';\nimport { Link } from '../../global/shared-types/link.types';\nimport { getMouseEventHandlers } from '../../util/3d-tilt-hover-effect';\n\n/**\n * This component can be used on places such as a start page or a dashboard.\n * It offers features for visualizing aggregated data along with supplementary\n * information.\n *\n * If clicking on the component should navigate the user to\n * a new screen or web page, you need to provide a URL,\n * using the `link` property.\n *\n * @exampleComponent limel-example-info-tile\n * @exampleComponent limel-example-info-tile-badge\n * @exampleComponent limel-example-info-tile-progress\n * @exampleComponent limel-example-info-tile-loading\n * @exampleComponent limel-example-info-tile-styling\n */\n@Component({\n    tag: 'limel-info-tile',\n    shadow: true,\n    styleUrl: 'info-tile.scss',\n})\nexport class InfoTile {\n    /**\n     * A piece of text or number that is the main piece of information\n     * which the component is intended to visualize.\n     */\n    @Prop({ reflect: true })\n    public value: number | string;\n\n    /**\n     * Name of icon for the info tile.\n     */\n    @Prop()\n    public icon?: string;\n\n    /**\n     * The text to show below the info tile. Long labels will be truncated.\n     */\n    @Prop({ reflect: true })\n    public label?: string = null;\n\n    /**\n     * A string of text that is visually placed before the value.\n     */\n    @Prop({ reflect: true })\n    public prefix?: string;\n\n    /**\n     * A string of text that is visually placed after the value.\n     */\n    @Prop({ reflect: true })\n    public suffix?: string;\n\n    /**\n     * Set to `true` if info tile is disabled.\n     */\n    @Prop({ reflect: true })\n    public disabled? = false;\n\n    /**\n     * If supplied, the info tile will display a notification badge.\n     */\n    @Prop({ reflect: true })\n    public badge?: number | string;\n\n    /**\n     * Set to `true` to put the component in the `loading` state.\n     * This does _not_ disable the link. To do so, the\n     * `disabled` property should be set to `true` as well.\n     */\n    @Prop({ reflect: true })\n    public loading? = false;\n\n    /**\n     * If supplied, the info tile will be a clickable link.\n     *\n     * Supplying a value also adds an elevated effect using a shadow,\n     * as well as `cursor: pointer`, which appears on hover.\n     * While we strongly recommend supplying a link whenever the\n     * component should act as a link, if this is not possible, and\n     * you need to provide interaction through a click handler,\n     * you can still get the correct styling by supplying a `Link`\n     * object with the `href` property set to `'#'`.\n     */\n    @Prop()\n    public link?: Link;\n\n    /**\n     * Properties of the optional circular progress bar.\n     *\n     * Defaults:\n     * - `maxValue`: 100\n     * - `suffix`: %\n     * - `displayPercentageColors`: false\n     *\n     * Colors change with intervals of 10 %.\n     */\n    @Prop()\n    public progress?: InfoTileProgress;\n\n    @Element()\n    private host: HTMLElement;\n\n    private handleMouseEnter: () => void;\n    private handleMouseLeave: () => void;\n\n    public componentWillLoad() {\n        const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(\n            this.host,\n        );\n        this.handleMouseEnter = handleMouseEnter;\n        this.handleMouseLeave = handleMouseLeave;\n    }\n\n    public render() {\n        const extendedAriaLabel =\n            this.checkProps(this?.prefix) +\n            this.value +\n            ' ' +\n            this.checkProps(this?.suffix) +\n            this.checkProps(this?.label) +\n            '. ' +\n            this.checkProps(this?.progress?.prefix) +\n            this.checkProps(this?.progress?.value) +\n            this.checkProps(this?.progress?.suffix) +\n            this.checkProps(this?.link?.title);\n\n        const link = !this.disabled ? this.link?.href : '#';\n\n        return (\n            <Host\n                onMouseEnter={this.handleMouseEnter}\n                onMouseLeave={this.handleMouseLeave}\n            >\n                <a\n                    title={this.link?.title}\n                    href={link}\n                    target={this.link?.target}\n                    tabindex=\"0\"\n                    aria-label={extendedAriaLabel}\n                    aria-disabled={this.disabled}\n                    aria-busy={this.loading ? 'true' : 'false'}\n                    aria-live=\"polite\"\n                    class={{\n                        'is-clickable': !!this.link?.href && !this.disabled,\n                        'has-circular-progress':\n                            !!this.progress?.value ||\n                            this.progress?.value === 0,\n                    }}\n                >\n                    {this.renderIcon()}\n                    {this.renderProgress()}\n                    <div class=\"value-group\">\n                        {this.renderPrefix()}\n                        <div class=\"value-and-suffix\">\n                            {this.renderValue()}\n                            {this.renderSuffix()}\n                        </div>\n                        {this.renderSpinner()}\n                    </div>\n                    {this.renderLabel()}\n                </a>\n                {this.renderNotification()}\n                <div class=\"limel-3d-hover-effect-glow\" />\n            </Host>\n        );\n    }\n\n    private checkProps(propValue) {\n        return !propValue ? '' : propValue + ' ';\n    }\n\n    private renderPrefix = () => {\n        if (this.prefix) {\n            return <span class=\"prefix\">{this.prefix}</span>;\n        }\n    };\n\n    private renderValue = () => {\n        const characterCount = (this.value ?? '').toString().length;\n\n        if (!this.value && this.loading) {\n            return <span class=\"value\">···</span>;\n        }\n\n        if (this.value) {\n            return (\n                <span\n                    class={{\n                        value: true,\n                        [`ch-${characterCount}`]: true,\n                    }}\n                >\n                    {this.value}\n                </span>\n            );\n        }\n    };\n\n    private renderSuffix = () => {\n        if (this.suffix) {\n            return <span class=\"suffix\">{this.suffix}</span>;\n        }\n    };\n\n    private renderIcon = () => {\n        if (this.icon) {\n            return <limel-icon class=\"icon\" name={this.icon} />;\n        }\n    };\n\n    private renderProgress = () => {\n        if (this.progress?.value || this.progress?.value === 0) {\n            return (\n                <limel-circular-progress\n                    class=\"progress\"\n                    prefix={this.progress.prefix}\n                    value={this.progress.value}\n                    suffix={this.progress.suffix}\n                    maxValue={this.progress.maxValue}\n                    displayPercentageColors={\n                        this.progress.displayPercentageColors\n                    }\n                />\n            );\n        }\n    };\n\n    private renderLabel = () => {\n        if (this.label) {\n            return <span class=\"label\">{this.label}</span>;\n        }\n    };\n\n    private renderNotification = () => {\n        if (this.badge) {\n            return <limel-badge label={this.badge} />;\n        }\n    };\n\n    private renderSpinner = () => {\n        if (this.loading) {\n            return <limel-linear-progress indeterminate={true} />;\n        }\n    };\n}\n"],"mappings":"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"}