@limetech/lime-elements 38.23.5 → 38.24.0

package/dist/types/util/image-resize.d.ts

@@ -0,0 +1,138 @@
+/**
+ * Image resize utilities
+ *
+ * Overview
+ * --------
+ * This module provides a small, dependency-free utility to resize images on the client
+ * (in the browser) before uploading. It works by decoding an input `File` to an
+ * `ImageBitmap` (or falling back to an `HTMLImageElement`), drawing it onto a
+ * `Canvas`/`OffscreenCanvas` with the requested strategy (cover/contain), and
+ * then exporting the result to a new `File` with your preferred MIME type and
+ * quality.
+ *
+ * Why resize client-side?
+ * - Faster perceived uploads and lower bandwidth usage
+ * - Consistent avatar sizes and formats (e.g., JPEG 400x400)
+ * - No server-side transformation required for common cases
+ *
+ * Fit strategies
+ * - `cover` (default): The image is scaled to cover the target rectangle, and
+ *   the excess parts are center-cropped. Good for avatars.
+ * - `contain`: The image is scaled to fit entirely within the target rectangle
+ *   without cropping, letterboxing if needed. Good when you must preserve the
+ *   entire image.
+ *
+ * Decoding & EXIF orientation
+ * EXIF orientation is a piece of metadata stored inside image files
+ * (usually JPEGs) that tells image renderer software how the image should be displayed
+ * i.e., whether it should be rotated or flipped. This meta data is normally added
+ * to photos by digital cameras and phones.
+ * - When available, `createImageBitmap(file, { imageOrientation: 'from-image' })`
+ *   is used to automatically respect EXIF orientation.
+ * - If not available or it fails (e.g., unsupported format), we fall back to
+ *   decoding via an `HTMLImageElement`.
+ *
+ * OffscreenCanvas
+ * - If the environment supports `OffscreenCanvas`, it will be used for the draw
+ *   and encode operations for better performance in some cases. Otherwise, a
+ *   regular `HTMLCanvasElement` is used.
+ *
+ * HEIC/HEIF notes
+ * - All major browsers except Safari lack native HEIC/HEIF decoding.
+ *   In such cases the `resizeImage` function will throw when decoding fails.
+ *   The caller should catch and fall back
+ *   to using the original file or handle conversion on the server.
+ * - If we need guaranteed client-side HEIC->JPEG conversion, we must add a small
+ *   library or WASM module; this utility intentionally avoids extra dependencies.
+ *
+ * Output type & quality
+ * - Default output is `image/jpeg` with `quality=0.85`, which is typically
+ *   appropriate for avatars. You can switch to `image/png` to preserve
+ *   transparency.
+ * - The output filename extension is adjusted to match the chosen MIME type by
+ *   default (e.g., `.jpg` or `.png`). You can override naming via the `rename`
+ *   option.
+ *
+ * Error handling
+ * - Throws if canvas/context cannot be created or if canvas->blob conversion fails.
+ * - Decoding failures (unsupported type) will throw; caller can try/catch and
+ *   fall back to the original file.
+ *
+ * Performance tips
+ * - Keep target sizes reasonable (e.g., 256–1024 px) to avoid long processing
+ *   times on modest devices.
+ * - JPEG with quality 0.8–0.9 often strikes a good balance between size and
+ *   perceived quality for photos/avatars.
+ *
+ * Usage examples
+ * --------------
+ * Basic usage:
+ * ```ts
+ * import { resizeImage } from '@limetech/lime-elements/util/image-resize';
+ *
+ * const processed = await resizeImage(file, {
+ *   width: 400,
+ *   height: 400,
+ *   fit: 'cover',         // default; center-crops
+ *   type: 'image/jpeg',   // default
+ *   quality: 0.85,        // default
+ * });
+ * // Upload `processed` instead of the original file
+ * ```
+ *
+ * With custom naming:
+ * ```ts
+ * const processed = await resizeImage(file, {
+ *   width: 800,
+ *   height: 800,
+ *   fit: 'contain',
+ *   type: 'image/png',
+ *   rename: (name) => name.replace(/\.[^.]+$/, '') + '_resized.png',
+ * });
+ * ```
+ *
+ * In a Stencil component (simplified):
+ * ```tsx
+ * private async handleFilesSelected(file: File) {
+ *   try {
+ *     const resized = await resizeImage(file, { width: 400, height: 400 });
+ *     // build your FileInfo and emit
+ *   } catch {
+ *     // fall back to original
+ *   }
+ * }
+ * ```
+ */
+/**
+ * Options for client-side image resizing.
+ * @beta
+ */
+export type ResizeOptions = {
+  /** Target width in CSS pixels. */
+  width: number;
+  /** Target height in CSS pixels. */
+  height: number;
+  /** Fit strategy; defaults to 'cover'. */
+  fit?: 'cover' | 'contain';
+  /** Output MIME type; 'image/jpeg' by default. */
+  type?: 'image/jpeg' | 'image/png';
+  /** JPEG quality (0..1); used only for 'image/jpeg'. Defaults to 0.85. */
+  quality?: number;
+  /** Optional renaming function. Defaults to changing extension to match MIME. */
+  rename?: (originalName: string) => string;
+};
+/**
+ * Resize an image file on the client using Canvas/OffscreenCanvas.
+ * Returns a new File with the requested format and dimensions.
+ *
+ * Contract
+ * - Input: image `File`
+ * - Output: resized image as a new `File` with updated `type`, name, and size
+ * - Errors: may throw on decode failure or canvas export failure
+ *
+ * @beta
+ * @param file - The image file to resize.
+ * @param options - Configuration for the resize operation.
+ */
+export declare function resizeImage(file: File, options: ResizeOptions): Promise<File>;
+//# sourceMappingURL=image-resize.d.ts.map

package/package.json

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

package/dist/cjs/limel-badge_2.cjs.entry.js

@@ -1,138 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-174a078a.js');
-const format = require('./format-c8759d02.js');
-const randomString = require('./random-string-27fb6c74.js');
-require('./_commonjsHelpers-a5111d61.js');
-
-const badgeCss = "@charset \"UTF-8\";:host([hidden]){display:none}:host(limel-badge){--limel-min-badge-size:1rem;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;min-height:var(--limel-min-badge-size);min-width:var(--limel-min-badge-size)}span{cursor:default;box-sizing:border-box;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;font-size:0.6875rem;line-height:var(--limel-min-badge-size);color:var(--badge-text-color, rgb(var(--contrast-1200)));border-radius:var(--limel-min-badge-size);max-height:var(--limel-min-badge-size);min-width:0.5rem;min-height:0.5rem;background-color:var(--badge-background-color, rgb(var(--contrast-500)))}span:not(:empty){min-width:var(--limel-min-badge-size);max-width:var(--badge-max-width, 2.75rem);padding:0 0.28125rem}:host(.has-large-label) span{cursor:help}";
-
-const Badge = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.label = undefined;
-  }
-  render() {
-    return (index.h(index.Host, { title: this.labelIsLarge() ? this.label : '', class: {
-        'has-large-label': this.labelIsLarge(),
-      } }, index.h("span", null, this.renderLabel())));
-  }
-  renderLabel() {
-    if (typeof this.label === 'number') {
-      return format.abbreviate(this.label);
-    }
-    return this.label;
-  }
-  labelIsLarge() {
-    const largeNumericLabel = 999;
-    const largeStringLabel = 6;
-    if ((typeof this.label === 'number' &&
-      this.label > largeNumericLabel) ||
-      (typeof this.label === 'string' &&
-        this.label.length > largeStringLabel)) {
-      return true;
-    }
-  }
-};
-Badge.style = badgeCss;
-
-/**
- *
- * @param id
- * @param startingPoint
- */
-function getOwnerElement(id, startingPoint) {
-  let element = startingPoint;
-  do {
-    element = element.parentNode;
-  } while (element &&
-    element.nodeType !== Node.DOCUMENT_FRAGMENT_NODE &&
-    element.nodeType !== Node.DOCUMENT_NODE);
-  return element === null || element === void 0 ? void 0 : element.getElementById(id);
-}
-
-const DEFAULT_DELAY_FOR_SHOWING = 500;
-class TooltipTimer {
-  constructor(showCallback, hideCallback, delayForShowing = DEFAULT_DELAY_FOR_SHOWING) {
-    this.timerHandle = null;
-    this.showCallback = showCallback;
-    this.hideCallback = hideCallback;
-    this.delayForShowing = delayForShowing;
-  }
-  showAfterDelay() {
-    if (!this.timerHandle) {
-      this.timerHandle = setTimeout(this.showCallback, this.delayForShowing);
-    }
-  }
-  hide() {
-    clearTimeout(this.timerHandle);
-    this.timerHandle = null;
-    this.hideCallback();
-  }
-}
-
-const tooltipCss = ":host(limel-tooltip){position:absolute;pointer-events:none}";
-
-const DEFAULT_MAX_LENGTH = 50;
-const Tooltip = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.showTooltip = () => {
-      this.tooltipTimer.showAfterDelay();
-    };
-    this.hideTooltip = () => {
-      this.tooltipTimer.hide();
-    };
-    this.elementId = undefined;
-    this.label = undefined;
-    this.helperLabel = undefined;
-    this.maxlength = DEFAULT_MAX_LENGTH;
-    this.openDirection = 'top';
-    this.open = undefined;
-    this.portalId = randomString.createRandomString();
-    this.tooltipId = randomString.createRandomString();
-    this.tooltipTimer = new TooltipTimer(() => (this.open = true), () => (this.open = false));
-  }
-  connectedCallback() {
-    this.ownerElement = getOwnerElement(this.elementId, this.host);
-    this.setOwnerAriaLabel();
-    this.addListeners();
-  }
-  disconnectedCallback() {
-    this.removeListeners();
-  }
-  render() {
-    const tooltipZIndex = getComputedStyle(this.host).getPropertyValue('--tooltip-z-index');
-    return (index.h("div", { class: "trigger-anchor" }, index.h("limel-portal", { openDirection: this.openDirection, visible: this.open, containerId: this.portalId, containerStyle: {
-        'z-index': tooltipZIndex,
-        'pointer-events': 'none',
-      }, anchor: this.ownerElement }, index.h("limel-tooltip-content", { label: this.label, helperLabel: this.helperLabel, maxlength: this.maxlength, role: "tooltip", "aria-hidden": !this.open, id: this.tooltipId }))));
-  }
-  setOwnerAriaLabel() {
-    var _a;
-    (_a = this.ownerElement) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-describedby', this.tooltipId);
-  }
-  addListeners() {
-    var _a, _b, _c, _d;
-    (_a = this.ownerElement) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseover', this.showTooltip);
-    (_b = this.ownerElement) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseout', this.hideTooltip);
-    (_c = this.ownerElement) === null || _c === void 0 ? void 0 : _c.addEventListener('focus', this.showTooltip);
-    (_d = this.ownerElement) === null || _d === void 0 ? void 0 : _d.addEventListener('blur', this.hideTooltip);
-  }
-  removeListeners() {
-    var _a, _b, _c, _d;
-    (_a = this.ownerElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseover', this.showTooltip);
-    (_b = this.ownerElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseout', this.hideTooltip);
-    (_c = this.ownerElement) === null || _c === void 0 ? void 0 : _c.removeEventListener('focus', this.showTooltip);
-    (_d = this.ownerElement) === null || _d === void 0 ? void 0 : _d.removeEventListener('blur', this.hideTooltip);
-  }
-  get host() { return index.getElement(this); }
-};
-Tooltip.style = tooltipCss;
-
-exports.limel_badge = Badge;
-exports.limel_tooltip = Tooltip;
-
-//# sourceMappingURL=limel-badge_2.cjs.entry.js.map

package/dist/cjs/limel-badge_2.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"limel-badge.limel-tooltip.entry.cjs.js","mappings":"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","names":["h","Host","abbreviate","createRandomString"],"sources":["./src/components/badge/badge.scss?tag=limel-badge&encapsulation=shadow","./src/components/badge/badge.tsx","./src/components/tooltip/get-owner-element.tsx","./src/components/tooltip/tooltip-timer.ts","./src/components/tooltip/tooltip.scss?tag=limel-tooltip&encapsulation=shadow","./src/components/tooltip/tooltip.tsx"],"sourcesContent":["@use '../../style/functions';\n@use '../../style/mixins';\n\n/**\n * @prop --badge-background-color: badge background color\n * @prop --badge-text-color: badge text color\n * @prop --badge-max-width: maximum width of the badge, before its text gets truncated\n */\n\n:host([hidden]) {\n    display: none;\n}\n\n:host(limel-badge) {\n    --limel-min-badge-size: 1rem;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    flex-shrink: 0;\n    min-height: var(--limel-min-badge-size);\n    min-width: var(--limel-min-badge-size);\n}\n\nspan {\n    cursor: default;\n    box-sizing: border-box;\n\n    @include mixins.truncate-text;\n    text-align: center;\n    font-size: functions.pxToRem(11);\n    line-height: var(--limel-min-badge-size);\n\n    color: var(--badge-text-color, rgb(var(--contrast-1200)));\n\n    border-radius: var(--limel-min-badge-size);\n    max-height: var(--limel-min-badge-size);\n    min-width: 0.5rem;\n    min-height: 0.5rem;\n\n    background-color: var(--badge-background-color, rgb(var(--contrast-500)));\n\n    &:not(:empty) {\n        min-width: var(\n            --limel-min-badge-size\n        ); // ensures that a badge with only one character rendered as perfect circle\n        max-width: var(--badge-max-width, 2.75rem);\n        padding: 0 functions.pxToRem(4.5);\n    }\n}\n\n:host(.has-large-label) {\n    span {\n        cursor: help;\n    }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { abbreviate } from './format';\n\n/**\n * The Badge component can be used to display a notification badge,\n * optionally with a number or a text label.\n *\n * @exampleComponent limel-example-badge\n * @exampleComponent limel-example-badge-number\n * @exampleComponent limel-example-badge-string\n */\n@Component({\n    tag: 'limel-badge',\n    styleUrl: 'badge.scss',\n    shadow: true,\n})\nexport class Badge {\n    /**\n     * Label to display in the badge.\n     * Numeric labels larger than 999 will be rounded and abbreviated.\n     * String labels get truncated if their length is longer than\n     * six characters.\n     */\n    @Prop({ reflect: true })\n    public label?: number | string;\n\n    public render() {\n        return (\n            <Host\n                title={this.labelIsLarge() ? this.label : ''}\n                class={{\n                    'has-large-label': this.labelIsLarge(),\n                }}\n            >\n                <span>{this.renderLabel()}</span>\n            </Host>\n        );\n    }\n\n    private renderLabel() {\n        if (typeof this.label === 'number') {\n            return abbreviate(this.label);\n        }\n\n        return this.label;\n    }\n\n    private labelIsLarge() {\n        const largeNumericLabel = 999;\n        const largeStringLabel = 6;\n        if (\n            (typeof this.label === 'number' &&\n                this.label > largeNumericLabel) ||\n            (typeof this.label === 'string' &&\n                this.label.length > largeStringLabel)\n        ) {\n            return true;\n        }\n    }\n}\n","/**\n *\n * @param id\n * @param startingPoint\n */\nexport function getOwnerElement(\n    id: string,\n    startingPoint: Node\n): HTMLElement | undefined {\n    let element: Node = startingPoint;\n\n    do {\n        element = element.parentNode;\n    } while (\n        element &&\n        element.nodeType !== Node.DOCUMENT_FRAGMENT_NODE &&\n        element.nodeType !== Node.DOCUMENT_NODE\n    );\n\n    return (element as ShadowRoot)?.getElementById(id);\n}\n","const DEFAULT_DELAY_FOR_SHOWING = 500;\n\nexport class TooltipTimer {\n    private timerHandle: number | null = null;\n    private showCallback: Function;\n    private hideCallback: Function;\n    private delayForShowing: number;\n\n    constructor(\n        showCallback: Function,\n        hideCallback: Function,\n        delayForShowing: number = DEFAULT_DELAY_FOR_SHOWING\n    ) {\n        this.showCallback = showCallback;\n        this.hideCallback = hideCallback;\n        this.delayForShowing = delayForShowing;\n    }\n\n    showAfterDelay(): void {\n        if (!this.timerHandle) {\n            this.timerHandle = setTimeout(\n                this.showCallback,\n                this.delayForShowing\n            );\n        }\n    }\n\n    hide(): void {\n        clearTimeout(this.timerHandle);\n        this.timerHandle = null;\n        this.hideCallback();\n    }\n}\n","/**\n * @prop --tooltip-z-index: z-index of the tooltip.\n */\n\n:host(limel-tooltip) {\n    // Absolutely positioning ensures that this invisible element\n    // does not occupy visible space in the UI.\n    // Without this, `limel-tooltip` could in many cases\n    // mess up the layout, where it is used.\n    // For example, inside a `grid` or `flex` section,\n    // every instance of the tooltip would take some space,\n    // creating gaps and empty holes.\n    position: absolute;\n    pointer-events: none;\n}\n","import { Component, h, Prop, Element, State } from '@stencil/core';\nimport { JSX } from 'react';\nimport { createRandomString } from '../../util/random-string';\nimport { OpenDirection } from '../menu/menu.types';\nimport { getOwnerElement } from './get-owner-element';\nimport { TooltipTimer } from './tooltip-timer';\n\nconst DEFAULT_MAX_LENGTH = 50;\n\n/**\n * A tooltip can be used to display a descriptive text for any element.\n * The displayed content must be a brief and supplemental string of text,\n * identifying the element or describing its function for the user,\n * helping them better understand unfamiliar objects that aren't described\n * directly in the UI.\n *\n * ## Interaction\n * The tooltip appears after a slight delay, when the element is hovered;\n * and disappears as soon as the cursor leaves the element.\n * Therefore, users cannot interact with the tip, but if the trigger element\n * itself is interactive, it will remain interactible even with a tooltip bound\n * to it.\n *\n * :::note\n * In order to display the tooltip, the tooltip element and its trigger element\n * must be within the same document or document fragment (the same shadowRoot).\n * Often, it's easiest to just place them next to each other like in the example\n * below, but if you need to, you can place them differently.\n *\n * ```html\n * <limel-button icon=\"search\" id=\"tooltip-example\" />\n * <limel-tooltip label=\"Search\" elementId=\"tooltip-example\" />\n * ```\n * :::\n *\n * ## Usage\n * - Keep in mind that tooltips can be distracting, and can be perceived as an interruption.\n * Use them only when they add significant value.\n * - A good tip is concise, helpful, and informative.\n * Don't explain the obvious or simply repeat what is already on the screen.\n * When used correctly, supplemental info of a tooltip helps to [declutter the UI](/#/DesignGuidelines/decluttering.md/).\n * - If the tip is essential to the primary tasks that the user is performing,\n * such as warnings or important notes, include the information directly in the\n * interface instead.\n * - When a component offers a helper text (e.g. [Input field](/#/component/limel-input-field/)),\n * use that, not a tooltip.\n * - Make sure to use the tooltip on an element that users naturally and\n * effortlessly recognize can be hovered.\n *\n * @exampleComponent limel-example-tooltip-basic\n * @exampleComponent limel-example-tooltip-max-character\n * @exampleComponent limel-example-tooltip-composite\n */\n@Component({\n    tag: 'limel-tooltip',\n    shadow: true,\n    styleUrl: 'tooltip.scss',\n})\nexport class Tooltip {\n    /**\n     * ID of the owner element that the tooltip should describe.\n     * Must be a child within the same document fragment as the tooltip element\n     * itself.\n     */\n    @Prop({ reflect: true })\n    public elementId!: string;\n\n    /**\n     * Short descriptive text of the owner element.\n     */\n    @Prop({ reflect: true })\n    public label!: string;\n\n    /**\n     * Additional helper text for the element.\n     * Example usage can be a keyboard shortcut to activate the function of the\n     * owner element.\n     */\n    @Prop({ reflect: true })\n    public helperLabel?: string;\n\n    /**\n     * The maximum amount of characters before rendering 'label' and\n     * 'helperLabel' in two rows.\n     */\n    @Prop({ reflect: true })\n    public maxlength?: number = DEFAULT_MAX_LENGTH;\n\n    /**\n     * Decides the tooltip's location in relation to its trigger.\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection = 'top';\n\n    @Element()\n    private host: HTMLLimelTooltipElement;\n\n    @State()\n    private open: boolean;\n\n    private portalId: string;\n    private tooltipId: string;\n    private ownerElement: HTMLElement;\n    private tooltipTimer: TooltipTimer;\n\n    public constructor() {\n        this.portalId = createRandomString();\n        this.tooltipId = createRandomString();\n        this.tooltipTimer = new TooltipTimer(\n            () => (this.open = true),\n            () => (this.open = false)\n        );\n    }\n\n    public connectedCallback() {\n        this.ownerElement = getOwnerElement(this.elementId, this.host);\n        this.setOwnerAriaLabel();\n        this.addListeners();\n    }\n\n    public disconnectedCallback() {\n        this.removeListeners();\n    }\n\n    public render(): JSX.Element {\n        const tooltipZIndex = getComputedStyle(this.host).getPropertyValue(\n            '--tooltip-z-index'\n        );\n\n        return (\n            <div class=\"trigger-anchor\">\n                <limel-portal\n                    openDirection={this.openDirection}\n                    visible={this.open}\n                    containerId={this.portalId}\n                    containerStyle={{\n                        'z-index': tooltipZIndex,\n                        'pointer-events': 'none',\n                    }}\n                    anchor={this.ownerElement}\n                >\n                    <limel-tooltip-content\n                        label={this.label}\n                        helperLabel={this.helperLabel}\n                        maxlength={this.maxlength}\n                        role=\"tooltip\"\n                        aria-hidden={!this.open}\n                        id={this.tooltipId}\n                    />\n                </limel-portal>\n            </div>\n        );\n    }\n\n    private setOwnerAriaLabel() {\n        this.ownerElement?.setAttribute('aria-describedby', this.tooltipId);\n    }\n\n    private addListeners() {\n        this.ownerElement?.addEventListener('mouseover', this.showTooltip);\n        this.ownerElement?.addEventListener('mouseout', this.hideTooltip);\n        this.ownerElement?.addEventListener('focus', this.showTooltip);\n        this.ownerElement?.addEventListener('blur', this.hideTooltip);\n    }\n\n    private removeListeners() {\n        this.ownerElement?.removeEventListener('mouseover', this.showTooltip);\n        this.ownerElement?.removeEventListener('mouseout', this.hideTooltip);\n        this.ownerElement?.removeEventListener('focus', this.showTooltip);\n        this.ownerElement?.removeEventListener('blur', this.hideTooltip);\n    }\n\n    private showTooltip = () => {\n        this.tooltipTimer.showAfterDelay();\n    };\n\n    private hideTooltip = () => {\n        this.tooltipTimer.hide();\n    };\n}\n"],"version":3}