@limetech/lime-elements 37.78.0 → 37.78.2

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/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
@@ -3047,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
@@ -4466,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;
@@ -4537,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
@@ -7608,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;
@@ -7682,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

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.78.0",
+  "version": "37.78.2",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -46,7 +46,7 @@
     "@commitlint/config-conventional": "^19.6.0",
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.16.0",
-    "@microsoft/api-extractor": "^7.48.1",
+    "@microsoft/api-extractor": "^7.49.0",
     "@popperjs/core": "^2.11.8",
     "@rjsf/core": "^2.4.2",
     "@rollup/plugin-node-resolve": "^13.3.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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"}