@limetech/lime-elements 37.78.0 → 37.78.2

package/dist/lime-elements/p-23bc6de0.js.map

@@ -1 +0,0 @@
-{"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 `<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"],"mappings":"AA8GO,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/p-9fae6488.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["textEditorCss","TextEditor","constructor","hostRef","this","renderHelperLine","helperText","h","helperTextId","invalid","isInvalid","readonly","handleChange","event","stopPropagation","change","emit","detail","createRandomString","editorId","render","Host","class","renderLabel","renderEditor","value","id","renderPlaceholder","placeholder","contentType","onChange","customElements","disabled","language","triggerCharacters","triggers","label","htmlFor"],"sources":["./src/components/text-editor/text-editor.scss?tag=limel-text-editor&encapsulation=shadow","./src/components/text-editor/text-editor.tsx"],"sourcesContent":["@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins.scss';\n\n/**\n * @prop --text-editor-max-height: the tallest height the text editor can become when auto-resizing itself. Defaults to `calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)) - 4rem)`.\n * @prop --text-editor-fade-out-background-color: the color of the fade-out effect at the top and bottom of the text editor, when the text-editor is in readonly state. Defaults to rgb(var(--contrast-100)).\n */\n\n@include shared_input-select-picker.lime-looks-like-input-value;\n.lime-looks-like-input-value {\n    padding: var(--limel-text-editor-padding);\n}\n\n* {\n    box-sizing: border-box;\n}\n\n:host(limel-text-editor) {\n    --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color};\n    --limel-text-editor-background-color: #{shared_input-select-picker.$background-color-normal};\n    --limel-text-editor-label-color: #{shared_input-select-picker.$label-color};\n    --limel-prosemirror-adapter-toolbar-opacity: 0.6;\n    --limel-text-editor-padding: 0.25rem 1rem 0.75rem 1rem;\n    --limel-prosemirror-adapter-toolbar-grid-template-rows: 1fr;\n    --limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration: 0.3s;\n    --limel-prosemirror-adapter-toolbar-transition-timing-function: cubic-bezier(\n        0.19,\n        0.23,\n        0.26,\n        0.89\n    );\n\n    position: relative;\n    isolation: isolate;\n    display: flex;\n    flex-direction: column;\n\n    width: 100%;\n    min-width: 5rem;\n    min-height: 5rem;\n    height: 100%;\n    max-height: var(\n        --text-editor-max-height,\n        calc(\n            100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)) -\n                4rem\n        )\n    );\n    padding: 1px; // prevents visual defects that can appear due to the backdrop-filter and closeness to borders\n}\n\n:host(limel-text-editor:focus-within),\n:host(limel-text-editor:not([ui='minimal']):hover) {\n    --limel-prosemirror-adapter-toolbar-opacity: 1;\n}\n\n:host(limel-text-editor[ui='minimal']:not(:focus-within)) {\n    --limel-text-editor-padding: 0.75rem 1rem 0.75rem 1rem;\n    --limel-prosemirror-adapter-toolbar-grid-template-rows: 0fr;\n    --limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration: 0.46s;\n    --limel-prosemirror-adapter-action-bar-padding-top-bottom: 0;\n    --limel-prosemirror-adapter-toolbar-opacity: 0;\n    --limel-text-editor-placeholder-top: 0;\n    min-height: 2.5rem;\n}\n\n:host(limel-text-editor:hover) {\n    --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color--hovered};\n}\n\n:host(limel-text-editor:focus-within) {\n    --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color--focused};\n}\n\n:host(limel-text-editor:focus-within),\n:host(limel-text-editor:focus) {\n    .placeholder {\n        opacity: 0;\n    }\n}\n\n:host(limel-text-editor[disabled]:not([disabled='false'])) {\n    @include shared_input-select-picker.looks-disabled;\n\n    limel-prosemirror-adapter {\n        pointer-events: none;\n    }\n}\n\n:host(limel-text-editor[invalid]:not([invalid='false'])) {\n    --limel-text-editor-outline-color: var(--lime-error-text-color);\n}\n\n:host(limel-text-editor[readonly]:not([readonly='false'])) {\n    --limel-text-editor-padding: 0.75rem 1rem 0.75rem 1rem;\n    --limel-text-editor-placeholder-top: 0;\n    --limel-text-editor-outline-color: transparent;\n    --limel-text-editor-background-color: transparent;\n\n    limel-markdown {\n        // displayed when `readonly` instead of the adapter\n        display: block;\n        padding: var(--limel-text-editor-padding);\n        overflow-y: auto;\n\n        &:before,\n        &:after {\n            z-index: 1;\n            pointer-events: none;\n            content: '';\n            display: block;\n            position: absolute;\n            width: 100%;\n        }\n        &:after {\n            height: 1.75rem;\n            top: 0;\n            background: linear-gradient(\n                var(\n                    --text-editor-fade-out-background-color,\n                    rgb(var(--contrast-100))\n                ),\n                transparent\n            );\n        }\n\n        &:before {\n            height: 2rem;\n            bottom: -0.25rem;\n            background: linear-gradient(\n                transparent,\n                var(\n                    --text-editor-fade-out-background-color,\n                    rgb(var(--contrast-100))\n                )\n            );\n        }\n    }\n}\n\n.notched-outline {\n    transition: bottom\n        var(--limel-h-l-grid-template-rows-transition-speed, 0.46s)\n        cubic-bezier(1, 0.09, 0, 0.89);\n    pointer-events: none;\n    position: absolute;\n    inset: 0;\n    bottom: var(--limel-text-editor-notched-outline-bottom, 0);\n\n    display: flex;\n    background-color: var(--limel-text-editor-background-color);\n}\n\n.leading-outline,\n.notch,\n.trailing-outline {\n    transition: border-color 0.2s ease;\n    border-width: 1px;\n    border-style: solid;\n    border-color: var(--limel-text-editor-outline-color);\n}\n\n.leading-outline {\n    flex-shrink: 0;\n    width: 0.75rem;\n    border-right-width: 0;\n    border-top-left-radius: 0.25rem;\n    border-bottom-left-radius: 0.25rem;\n}\n\n.notch {\n    flex-shrink: 0;\n\n    position: relative;\n    z-index: 2;\n\n    border-top-width: 0;\n    border-right-width: 0;\n    border-left-width: 0;\n\n    max-width: calc(100% - 1.5rem);\n}\n\n.trailing-outline {\n    flex-grow: 1;\n    border-left-width: 0;\n    border-top-right-radius: 0.25rem;\n    border-bottom-right-radius: 0.25rem;\n}\n\nlabel {\n    transform: translateY(-50%);\n\n    @include mixins.truncate-text;\n    display: block;\n    padding: 0 0.25rem;\n\n    color: var(--limel-text-editor-label-color);\n    font-size: 0.65rem; // `10.4px` similar to MDC's floating label\n    letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);\n\n    :host(limel-text-editor[required]) & {\n        &::after {\n            content: '*';\n        }\n    }\n}\n\n.placeholder {\n    transition-property: top, padding;\n    transition-duration: var(\n        --limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration\n    );\n    transition-timing-function: var(\n        --limel-prosemirror-adapter-toolbar-transition-timing-function\n    );\n    @include mixins.truncate-text;\n    pointer-events: none;\n    position: absolute;\n    top: var(--limel-text-editor-placeholder-top, 2.25rem);\n    left: 0;\n    right: 0;\n\n    padding: var(--limel-text-editor-padding);\n    font-style: italic;\n    font-size: 0.875rem;\n    color: shared_input-select-picker.$input-placeholder-color;\n}\n\nlimel-prosemirror-adapter {\n    flex-grow: 1;\n\n    min-width: 0;\n    min-height: 0;\n    height: 100%;\n    overflow: hidden auto;\n}\n\n@include mixins.hide-helper-line-when-not-needed(limel-text-editor);\n:host(limel-text-editor.has-helper-text:focus-within),\n:host(limel-text-editor.has-helper-text[invalid]:not([invalid='false'])) {\n    .notched-outline {\n        --limel-text-editor-notched-outline-bottom: 1rem;\n    }\n}\n\n:host(limel-text-editor[allow-resize]) {\n    limel-prosemirror-adapter {\n        resize: vertical;\n    }\n}\n","import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { Languages } from '../date-picker/date.types';\nimport { createRandomString } from '../../util/random-string';\nimport { CustomElementDefinition } from '../../global/shared-types/custom-element.types';\nimport { TriggerCharacter, TriggerEventDetail } from './text-editor.types';\nimport { EditorUiType } from './types';\n\n/**\n * A rich text editor that offers a rich text editing experience with markdown support,\n * in the sense that you can easily type markdown syntax and see the rendered\n * result as rich text in real-time. For instance, you can type `# Hello, world!`\n * and see it directly turning to a heading 1 (an `<h1>` HTML element).\n *\n * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>\n * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.\n *\n * @exampleComponent limel-example-text-editor-basic\n * @exampleComponent limel-example-text-editor-as-form-component\n * @exampleComponent limel-example-text-editor-with-markdown\n * @exampleComponent limel-example-text-editor-with-html\n * @exampleComponent limel-example-text-editor-with-tables\n * @exampleComponent limel-example-text-editor-allow-resize\n * @exampleComponent limel-example-text-editor-size\n * @exampleComponent limel-example-text-editor-ui\n * @exampleComponent limel-example-text-editor-custom-element\n * @exampleComponent limel-example-text-editor-triggers\n * @exampleComponent limel-example-text-editor-composite\n * @beta\n */\n@Component({\n    tag: 'limel-text-editor',\n    shadow: { delegatesFocus: true },\n    styleUrl: 'text-editor.scss',\n})\nexport class TextEditor implements FormComponent<string> {\n    /** The type of content that the editor should handle and emit, defaults to `markdown`\n     *\n     * Assumed to be set only once, so not reactive to changes\n     */\n    @Prop()\n    public contentType: 'markdown' | 'html' = 'markdown';\n\n    /**\n     * Defines the language for translations.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    /**\n     * Set to `true` to disable the field.\n     * Use `disabled` to indicate that the field can normally be interacted\n     * with, but is currently disabled. This tells the user that if certain\n     * requirements are met, the field may become enabled again.\n     */\n    @Prop({ reflect: true })\n    public disabled?: boolean = false;\n\n    /**\n     * Set to `true` to make the component read-only.\n     * Use `readonly` when the field is only there to present the data it holds,\n     * and will not become possible for the current user to edit.\n     * :::note\n     * Consider that it might be better to use `limel-markdown`\n     * instead of `limel-text-editor` when the goal is visualizing data.\n     * :::\n     */\n    @Prop({ reflect: true })\n    public readonly?: boolean = false;\n\n    /**\n     * Optional helper text to display below the input field when it has focus\n     */\n    @Prop({ reflect: true })\n    public helperText?: string;\n\n    /**\n     * The placeholder text shown inside the input field,\n     * when the field is empty.\n     */\n    @Prop({ reflect: true })\n    public placeholder?: string;\n\n    /**\n     * The label of the editor\n     */\n    @Prop({ reflect: true })\n    public label?: string;\n\n    /**\n     * Set to `true` to indicate that the current value of the editor is\n     * invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid?: boolean = false;\n\n    /**\n     * Description of the text inside the editor as markdown\n     */\n    @Prop({ reflect: true })\n    public value: string;\n\n    /**\n     * A list of custom elements\n     *\n     * Any `CustomElement` that should be used inside the text editor needs\n     * to be defined here.\n     *\n     * @private\n     * @alpha\n     */\n    @Prop()\n    public customElements: CustomElementDefinition[] = [];\n\n    /**\n     * A set of trigger characters\n     *\n     * Defining a character here will enable trigger events to be sent if the\n     * character is detected in the editor.\n     *\n     * @private\n     * @alpha\n     */\n    @Prop()\n    public triggers: TriggerCharacter[] = [];\n\n    /**\n     * Set to `true` to indicate that the field is required.\n     *\n     * :::important\n     * An empty but required field is not automatically considered invalid.\n     * You must make sure to check the validity of the field on your own,\n     * and properly handle the `invalid` state.\n     * :::\n     */\n    @Prop({ reflect: true })\n    public required?: boolean = false;\n\n    /**\n     * Set to `true` to allow the user to vertically resize the editor.\n     * Set to `false` to disable the resize functionality.\n     */\n    @Prop({ reflect: true })\n    public allowResize: boolean = true;\n\n    /**\n     * Specifies the visual appearance of the editor.\n     *\n     * - `standard`: The default editor appearance with a full toolbar and\n     *    standard layout.\n     * - `minimal`: A compact editor appearance, ideal for limited space\n     *    scenarios such as mobile devices. In this mode, the toolbar is hidden\n     *    until the editor is focused.\n     */\n    @Prop({ reflect: true })\n    public ui?: EditorUiType = 'standard';\n\n    /**\n     * Dispatched when a change is made to the editor\n     */\n    @Event()\n    public change: EventEmitter<string>;\n\n    /**\n     * Dispatched if a trigger character is detected.\n     *\n     * @private\n     * @alpha\n     */\n    @Event()\n    public triggerStart: EventEmitter<TriggerEventDetail>;\n\n    /**\n     * Dispatched if a trigger session is ended. That is if the selection\n     * goes outside the trigger input or if something is inserted using the\n     * supplied `TextEditor` insert function.\n     *\n     * @private\n     * @alpha\n     */\n    @Event()\n    public triggerStop: EventEmitter<TriggerEventDetail>;\n\n    /**\n     * Dispatched if a input is changed during an active trigger.\n     *\n     * @private\n     * @alpha\n     */\n    @Event()\n    public triggerChange: EventEmitter<TriggerEventDetail>;\n\n    private helperTextId: string;\n    private editorId: string;\n\n    public constructor() {\n        this.helperTextId = createRandomString();\n        this.editorId = createRandomString();\n    }\n\n    public render() {\n        return (\n            <Host\n                class={{\n                    'has-helper-text': !!this.helperText,\n                }}\n            >\n                <span class=\"notched-outline\">\n                    <span class=\"leading-outline\" />\n                    {this.renderLabel()}\n                    <span class=\"trailing-outline\" />\n                </span>\n                {this.renderEditor()}\n            </Host>\n        );\n    }\n\n    private renderEditor() {\n        if (this.readonly && !this.value) {\n            return [\n                <span class=\"lime-looks-like-input-value\">–</span>,\n                this.renderHelperLine(),\n            ];\n        }\n\n        if (this.readonly) {\n            return [\n                <limel-markdown\n                    value={this.value}\n                    aria-controls={this.helperTextId}\n                    id={this.editorId}\n                />,\n                this.renderPlaceholder(),\n                this.renderHelperLine(),\n            ];\n        }\n\n        return [\n            <limel-prosemirror-adapter\n                aria-placeholder={this.placeholder}\n                contentType={this.contentType}\n                onChange={this.handleChange}\n                customElements={this.customElements}\n                value={this.value}\n                aria-controls={this.helperTextId}\n                id={this.editorId}\n                aria-disabled={this.disabled}\n                language={this.language}\n                triggerCharacters={this.triggers}\n                disabled={this.disabled}\n            />,\n            this.renderPlaceholder(),\n            this.renderHelperLine(),\n        ];\n    }\n\n    private renderLabel() {\n        if (!this.label) {\n            return;\n        }\n\n        return (\n            <span class=\"notch\">\n                <label htmlFor={this.editorId}>{this.label}</label>\n            </span>\n        );\n    }\n\n    private renderPlaceholder() {\n        if (!this.placeholder || this.value) {\n            return;\n        }\n\n        return (\n            <span class=\"placeholder\" aria-hidden=\"true\">\n                {this.placeholder}\n            </span>\n        );\n    }\n\n    private renderHelperLine = () => {\n        if (!this.helperText) {\n            return;\n        }\n\n        return (\n            <limel-helper-line\n                helperText={this.helperText}\n                helperTextId={this.helperTextId}\n                invalid={this.isInvalid()}\n            />\n        );\n    };\n\n    private isInvalid = () => {\n        if (this.readonly) {\n            // A readonly field can never be invalid.\n            return false;\n        }\n\n        if (this.invalid) {\n            return true;\n        }\n    };\n\n    private handleChange = (event: CustomEvent<string>) => {\n        event.stopPropagation();\n        this.change.emit(event.detail);\n    };\n}\n"],"mappings":"6FAAA,MAAMA,EAAgB,8rO,MCmCTC,EAAU,MAgKnBC,YAAAC,G,0KAqFQC,KAAAC,iBAAmB,KACvB,IAAKD,KAAKE,WAAY,CAClB,M,CAGJ,OACIC,EAAA,qBACID,WAAYF,KAAKE,WACjBE,aAAcJ,KAAKI,aACnBC,QAASL,KAAKM,aAChB,EAIFN,KAAAM,UAAY,KAChB,GAAIN,KAAKO,SAAU,CAEf,OAAO,K,CAGX,GAAIP,KAAKK,QAAS,CACd,OAAO,I,GAIPL,KAAAQ,aAAgBC,IACpBA,EAAMC,kBACNV,KAAKW,OAAOC,KAAKH,EAAMI,OAAO,E,iBA1QQ,W,cAMb,K,cASD,M,cAYA,M,uFA0BD,M,yCAkBwB,G,cAYb,G,cAYV,M,iBAOE,K,QAYH,WAyCvBb,KAAKI,aAAeU,IACpBd,KAAKe,SAAWD,G,CAGbE,SACH,OACIb,EAACc,EAAI,CACDC,MAAO,CACH,oBAAqBlB,KAAKE,aAG9BC,EAAA,QAAMe,MAAM,mBACRf,EAAA,QAAMe,MAAM,oBACXlB,KAAKmB,cACNhB,EAAA,QAAMe,MAAM,sBAEflB,KAAKoB,e,CAKVA,eACJ,GAAIpB,KAAKO,WAAaP,KAAKqB,MAAO,CAC9B,MAAO,CACHlB,EAAA,QAAMe,MAAM,+BAA6B,KACzClB,KAAKC,mB,CAIb,GAAID,KAAKO,SAAU,CACf,MAAO,CACHJ,EAAA,kBACIkB,MAAOrB,KAAKqB,MAAK,gBACFrB,KAAKI,aACpBkB,GAAItB,KAAKe,WAEbf,KAAKuB,oBACLvB,KAAKC,mB,CAIb,MAAO,CACHE,EAAA,gDACsBH,KAAKwB,YACvBC,YAAazB,KAAKyB,YAClBC,SAAU1B,KAAKQ,aACfmB,eAAgB3B,KAAK2B,eACrBN,MAAOrB,KAAKqB,MAAK,gBACFrB,KAAKI,aACpBkB,GAAItB,KAAKe,SAAQ,gBACFf,KAAK4B,SACpBC,SAAU7B,KAAK6B,SACfC,kBAAmB9B,KAAK+B,SACxBH,SAAU5B,KAAK4B,WAEnB5B,KAAKuB,oBACLvB,KAAKC,mB,CAILkB,cACJ,IAAKnB,KAAKgC,MAAO,CACb,M,CAGJ,OACI7B,EAAA,QAAMe,MAAM,SACRf,EAAA,SAAO8B,QAASjC,KAAKe,UAAWf,KAAKgC,O,CAKzCT,oBACJ,IAAKvB,KAAKwB,aAAexB,KAAKqB,MAAO,CACjC,M,CAGJ,OACIlB,EAAA,QAAMe,MAAM,cAAa,cAAa,QACjClB,KAAKwB,Y"}

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

@@ -1,2 +0,0 @@
-import{r as e,c as r,h as o,H as i,g as t}from"./p-443111b3.js";import{i as s}from"./p-91741e79.js";import{g as a}from"./p-2f777fdb.js";import{g as n}from"./p-23bc6de0.js";const d='@charset "UTF-8";*{box-sizing:border-box;min-width:0;min-height:0}:host(limel-card){display:flex;border-radius:var(--card-border-radius, 0.95rem)}section{box-sizing:border-box;display:flex;gap:0.5rem;flex-direction:column;border-radius:var(--card-border-radius, 0.95rem);border:1px solid rgb(var(--contrast-500));padding:0.25rem;background-color:var(--card-background-color, rgb(var(--contrast-300)))}:host(limel-card[orientation=landscape]) section{flex-direction:row}section:hover{border-color:transparent;background-color:var(--card-background-color--hovered, var(--card-background-color, rgb(var(--contrast-200))))}.body{flex-grow:1;display:flex;flex-direction:column;gap:0.5rem}img{flex-shrink:0;transition:filter 0.6s ease;object-fit:cover;border-radius:calc(var(--card-border-radius, 0.95rem) / 1.4)}:host(limel-card[orientation=portrait]) img{width:100%}:host(limel-card[orientation=landscape]) img{max-width:40%;height:100%}section:hover img,section:focus-visible img{transition-duration:0.2s;filter:saturate(1.3)}limel-markdown{padding:0.5rem 0.75rem}header{display:flex;justify-content:center;gap:0.5rem;padding:0.25rem 0.75rem}:host(limel-card[orientation=landscape]) header{padding-top:0.5rem}header:has(limel-icon){padding-left:0.25rem}header .headings{flex-grow:1;display:flex;flex-direction:column;gap:0.125rem}header limel-icon{flex-shrink:0;width:2rem}header h1{font-size:1.125rem;font-weight:500;color:var(--card-heading-color, rgb(var(--contrast-1100)));letter-spacing:-0.03125rem}header h2{font-size:0.875rem;font-weight:400;color:var(--card-subheading-color, rgb(var(--contrast-1000)))}header h1,header h2{word-break:break-word;hyphens:auto;-webkit-hyphens:auto;margin:0}limel-action-bar{--action-bar-background-color:transparent;padding:0.5rem;margin-left:auto}.limel-3d-hover-effect-glow{transition:background 0.4s ease, opacity 0.4s ease;pointer-events:none;position:absolute;inset:0;border-radius:var(--card-border-radius, 0.95rem);opacity:0.1;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}section:hover .limel-3d-hover-effect-glow{opacity:0.5}@media (prefers-reduced-motion){section:hover .limel-3d-hover-effect-glow{opacity:0.2}}:host(limel-card){isolation:isolate;transform-style:preserve-3d;perspective:1000px}@media (prefers-reduced-motion){:host(limel-card){perspective:2000px}}section{position:relative;transition-duration:0.8s;transition-property:transform, box-shadow, background-color;transition-timing-function:ease-out;transform:scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg)}section:focus{outline:none}section:hover,section:focus,section:focus-visible,section:focus-within{will-change:background-color, box-shadow, transform}section:hover,section:focus,section:focus-visible,section:active{transition-duration:0.2s}section:hover,section:focus-visible{box-shadow:var(--button-shadow-hovered), var(--shadow-depth-16)}section:hover{transform:scale3d(1.01, 1.01, 1.01) rotate3d(var(--limel-3d-hover-effect-rotate3d))}section:focus-visible{outline:none;transform:scale3d(1.01, 1.01, 1.01)}:host(limel-card[clickable]) section{cursor:pointer;box-shadow:var(--button-shadow-normal)}:host(limel-card[clickable]) section:hover,:host(limel-card[clickable]) section:focus-visible{box-shadow:var(--button-shadow-hovered), var(--shadow-depth-16)}:host(limel-card[clickable]) section:active{transform:scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);box-shadow:var(--button-shadow-pressed)}:host(limel-card[clickable]) section:focus-visible{box-shadow:var(--shadow-depth-8-focused), var(--button-shadow-hovered)}:host(limel-card[clickable]) section:focus-visible:active{box-shadow:var(--shadow-depth-8-focused), var(--button-shadow-pressed)}';const c=class{constructor(o){e(this,o);this.actionSelected=r(this,"actionSelected",7);this.handleActionSelect=e=>{e.stopPropagation();if(s(e.detail)){this.actionSelected.emit(e.detail)}};this.heading=undefined;this.subheading=undefined;this.image=undefined;this.icon=undefined;this.value=undefined;this.actions=[];this.clickable=false;this.orientation="portrait"}componentWillLoad(){const{handleMouseEnter:e,handleMouseLeave:r}=n(this.host);this.handleMouseEnter=e;this.handleMouseLeave=r}render(){return o(i,{onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave},o("section",{tabindex:this.clickable?0:""},this.renderImage(),o("div",{class:"body"},this.renderHeader(),this.renderSlot(),this.renderValue(),this.renderActionBar()),o("div",{class:"limel-3d-hover-effect-glow"})))}renderImage(){if(!this.image){return}return o("img",{src:this.image.src,alt:this.image.alt,loading:"lazy"})}renderHeader(){if(!this.heading&&!this.subheading&&!this.icon){return}return o("header",null,this.renderIcon(),o("div",{class:"headings"},this.renderHeading(),this.renderSubheading()))}renderIcon(){var e;const r=a(this.icon);const i=typeof this.icon!=="string"?(e=this.icon)===null||e===void 0?void 0:e.color:undefined;if(!r){return}return o("limel-icon",{style:{color:`${i}`},badge:true,name:r})}renderHeading(){if(!this.heading){return}return o("h1",null,this.heading)}renderSubheading(){if(!this.subheading){return}return o("h2",null,this.subheading)}renderSlot(){return o("slot",{name:"component"})}renderValue(){return o("limel-markdown",{value:this.value})}renderActionBar(){if(!this.actions.length){return}return o("limel-action-bar",{actions:this.actions,onItemSelected:this.handleActionSelect})}get host(){return t(this)}};c.style=d;export{c as limel_card};
-//# sourceMappingURL=p-ba4098bc.entry.js.map

package/dist/lime-elements/p-ba4098bc.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["cardCss","Card","this","handleActionSelect","event","stopPropagation","isItem","detail","actionSelected","emit","componentWillLoad","handleMouseEnter","handleMouseLeave","getMouseEventHandlers","host","render","h","Host","onMouseEnter","onMouseLeave","tabindex","clickable","renderImage","class","renderHeader","renderSlot","renderValue","renderActionBar","image","src","alt","loading","heading","subheading","icon","renderIcon","renderHeading","renderSubheading","getIconName","color","_a","undefined","style","badge","name","value","actions","length","onItemSelected"],"sources":["./src/components/card/card.scss?tag=limel-card&encapsulation=shadow","./src/components/card/card.tsx"],"sourcesContent":["/**\n* @prop --card-heading-color: color of the heading. Defaults to `--contrast-1100`;\n* @prop --card-subheading-color: color of the sub heading. Defaults to `--contrast-1000`;\n* @prop --card-border-radius: border radius of the card. Defaults to `0.95rem`;\n* @prop --card-background-color: background color of the card.\n* @prop --card-background-color--hovered: background color of the card, when hovered.\n*/\n\n@use '../../style/mixins';\n\n$default-border-radius: 0.95rem;\n\n* {\n    box-sizing: border-box;\n    min-width: 0;\n    min-height: 0;\n}\n\n:host(limel-card) {\n    display: flex;\n    border-radius: var(--card-border-radius, $default-border-radius);\n}\n\nsection {\n    box-sizing: border-box;\n\n    display: flex;\n    gap: 0.5rem;\n\n    flex-direction: column;\n    :host(limel-card[orientation='landscape']) & {\n        flex-direction: row;\n    }\n\n    border-radius: var(--card-border-radius, $default-border-radius);\n    border: 1px solid rgb(var(--contrast-500));\n\n    padding: 0.25rem;\n    background-color: var(--card-background-color, rgb(var(--contrast-300)));\n\n    &:hover {\n        border-color: transparent;\n        background-color: var(\n            --card-background-color--hovered,\n            var(--card-background-color, rgb(var(--contrast-200)))\n        );\n    }\n}\n\n.body {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n}\n\nimg {\n    flex-shrink: 0;\n    transition: filter 0.6s ease;\n    object-fit: cover;\n    border-radius: calc(\n        var(--card-border-radius, $default-border-radius) / 1.4\n    );\n    :host(limel-card[orientation='portrait']) & {\n        width: 100%;\n    }\n\n    :host(limel-card[orientation='landscape']) & {\n        max-width: 40%;\n        height: 100%;\n    }\n\n    section:hover &,\n    section:focus-visible & {\n        transition-duration: 0.2s;\n        filter: saturate(1.3);\n    }\n}\n\nlimel-markdown {\n    padding: 0.5rem 0.75rem;\n}\n\nheader {\n    display: flex;\n    justify-content: center;\n\n    gap: 0.5rem;\n\n    padding: 0.25rem 0.75rem;\n    :host(limel-card[orientation='landscape']) & {\n        padding-top: 0.5rem;\n    }\n\n    &:has(limel-icon) {\n        padding-left: 0.25rem;\n    }\n\n    .headings {\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n        gap: 0.125rem;\n    }\n\n    limel-icon {\n        flex-shrink: 0;\n        width: 2rem;\n    }\n\n    h1 {\n        font-size: 1.125rem;\n        font-weight: 500;\n        color: var(--card-heading-color, rgb(var(--contrast-1100)));\n        letter-spacing: -0.03125rem; // 0.5px\n    }\n\n    h2 {\n        font-size: 0.875rem;\n        font-weight: 400;\n        color: var(--card-subheading-color, rgb(var(--contrast-1000)));\n    }\n\n    h1,\n    h2 {\n        word-break: break-word;\n        hyphens: auto;\n        -webkit-hyphens: auto;\n        margin: 0;\n    }\n}\n\nlimel-action-bar {\n    --action-bar-background-color: transparent;\n    padding: 0.5rem;\n    margin-left: auto;\n}\n\n// The 3D effect\n@include mixins.limel-3d-hover-effect-glow(\n    section,\n    var(--card-border-radius, $default-border-radius)\n);\n\n:host(limel-card) {\n    @include mixins.parent-of-the-3d-element;\n}\n\nsection {\n    @include mixins.the-3d-element;\n\n    :host(limel-card[clickable]) & {\n        @include mixins.the-3d-element--clickable;\n    }\n}\n","import {\n    Component,\n    h,\n    Prop,\n    Event,\n    EventEmitter,\n    Element,\n    Host,\n} from '@stencil/core';\nimport { Image } from '../../global/shared-types/image.types';\nimport { Icon } from '../../global/shared-types/icon.types';\nimport { isItem } from '../action-bar/isItem';\nimport { getIconName } from '../icon/get-icon-props';\nimport { ListSeparator } from '../../global/shared-types/separator.types';\nimport { ActionBarItem } from '../action-bar/action-bar.types';\nimport { getMouseEventHandlers } from '../../util/3d-tilt-hover-effect';\n\n/**\n * Card is a component that displays content about a single topic,\n * in a structured way. It can contain a header, and some supporting media such\n * as an image or an icon, a body of text, or optional actions.\n *\n * @exampleComponent limel-example-card-basic\n * @exampleComponent limel-example-card-image\n * @exampleComponent limel-example-card-actions\n * @exampleComponent limel-example-card-clickable\n * @exampleComponent limel-example-card-orientation\n * @exampleComponent limel-example-card-slot\n * @exampleComponent limel-example-card-styling\n * @beta\n */\n@Component({\n    tag: 'limel-card',\n    shadow: true,\n    styleUrl: 'card.scss',\n})\nexport class Card {\n    /**\n     * Heading of the card,\n     * to provide a short title about the context.\n     */\n    @Prop({ reflect: true })\n    public heading?: string;\n\n    /**\n     * Subheading of the card\n     * to provide a short description of the context.\n     */\n    @Prop({ reflect: true })\n    public subheading?: string;\n\n    /**\n     * A hero image to display in the card,\n     * to enrich the content with visual information.\n     */\n    @Prop()\n    public image?: Image;\n\n    /**\n     * An icon, to display along with the heading and subheading.\n     */\n    @Prop({ reflect: true })\n    public icon?: string | Icon;\n\n    /**\n     * The content of the card.\n     * Supports markdown, to provide a rich text experience.\n     */\n    @Prop()\n    public value?: string;\n\n    /**\n     * Actions to display in the card,\n     * to provide the user with options to interact with the content.\n     */\n    @Prop()\n    public actions?: Array<ActionBarItem | ListSeparator> = [];\n\n    /**\n     * When true, improve the accessibility of the component and hints the user\n     * that the card can be interacted width.\n     */\n    @Prop({ reflect: true })\n    public clickable: boolean = false;\n\n    /**\n     * The orientation of the card,\n     * specially useful when the card has an image.\n     */\n    @Prop({ reflect: true })\n    public orientation: 'landscape' | 'portrait' = 'portrait';\n\n    /**\n     * Fired when a action bar item has been clicked.\n     */\n    @Event()\n    public actionSelected: EventEmitter<ActionBarItem>;\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        return (\n            <Host\n                onMouseEnter={this.handleMouseEnter}\n                onMouseLeave={this.handleMouseLeave}\n            >\n                <section tabindex={this.clickable ? 0 : ''}>\n                    {this.renderImage()}\n                    <div class=\"body\">\n                        {this.renderHeader()}\n                        {this.renderSlot()}\n                        {this.renderValue()}\n                        {this.renderActionBar()}\n                    </div>\n                    <div class=\"limel-3d-hover-effect-glow\" />\n                </section>\n            </Host>\n        );\n    }\n\n    private renderImage() {\n        if (!this.image) {\n            return;\n        }\n\n        return <img src={this.image.src} alt={this.image.alt} loading=\"lazy\" />;\n    }\n\n    private renderHeader() {\n        if (!this.heading && !this.subheading && !this.icon) {\n            return;\n        }\n\n        return (\n            <header>\n                {this.renderIcon()}\n                <div class=\"headings\">\n                    {this.renderHeading()}\n                    {this.renderSubheading()}\n                </div>\n            </header>\n        );\n    }\n\n    private renderIcon() {\n        const icon = getIconName(this.icon);\n        const color =\n            typeof this.icon !== 'string' ? this.icon?.color : undefined;\n\n        if (!icon) {\n            return;\n        }\n\n        return (\n            <limel-icon\n                style={{\n                    color: `${color}`,\n                }}\n                badge={true}\n                name={icon}\n            />\n        );\n    }\n\n    private renderHeading() {\n        if (!this.heading) {\n            return;\n        }\n\n        return <h1>{this.heading}</h1>;\n    }\n\n    private renderSubheading() {\n        if (!this.subheading) {\n            return;\n        }\n\n        return <h2>{this.subheading}</h2>;\n    }\n\n    private renderSlot() {\n        return <slot name=\"component\" />;\n    }\n\n    private renderValue() {\n        return <limel-markdown value={this.value} />;\n    }\n\n    private handleActionSelect = (\n        event: CustomEvent<ActionBarItem | ListSeparator>,\n    ) => {\n        event.stopPropagation();\n        if (isItem(event.detail)) {\n            this.actionSelected.emit(event.detail);\n        }\n    };\n\n    private renderActionBar() {\n        if (!this.actions.length) {\n            return;\n        }\n\n        return (\n            <limel-action-bar\n                actions={this.actions}\n                onItemSelected={this.handleActionSelect}\n            />\n        );\n    }\n}\n"],"mappings":"4KAAA,MAAMA,EAAU,gtH,MCoCHC,EAAI,M,wEAoKLC,KAAAC,mBACJC,IAEAA,EAAMC,kBACN,GAAIC,EAAOF,EAAMG,QAAS,CACtBL,KAAKM,eAAeC,KAAKL,EAAMG,O,+HAjIiB,G,eAO5B,M,iBAOmB,U,CAcxCG,oBACH,MAAMC,iBAAEA,EAAgBC,iBAAEA,GAAqBC,EAC3CX,KAAKY,MAETZ,KAAKS,iBAAmBA,EACxBT,KAAKU,iBAAmBA,C,CAGrBG,SACH,OACIC,EAACC,EAAI,CACDC,aAAchB,KAAKS,iBACnBQ,aAAcjB,KAAKU,kBAEnBI,EAAA,WAASI,SAAUlB,KAAKmB,UAAY,EAAI,IACnCnB,KAAKoB,cACNN,EAAA,OAAKO,MAAM,QACNrB,KAAKsB,eACLtB,KAAKuB,aACLvB,KAAKwB,cACLxB,KAAKyB,mBAEVX,EAAA,OAAKO,MAAM,gC,CAMnBD,cACJ,IAAKpB,KAAK0B,MAAO,CACb,M,CAGJ,OAAOZ,EAAA,OAAKa,IAAK3B,KAAK0B,MAAMC,IAAKC,IAAK5B,KAAK0B,MAAME,IAAKC,QAAQ,Q,CAG1DP,eACJ,IAAKtB,KAAK8B,UAAY9B,KAAK+B,aAAe/B,KAAKgC,KAAM,CACjD,M,CAGJ,OACIlB,EAAA,cACKd,KAAKiC,aACNnB,EAAA,OAAKO,MAAM,YACNrB,KAAKkC,gBACLlC,KAAKmC,oB,CAMdF,a,MACJ,MAAMD,EAAOI,EAAYpC,KAAKgC,MAC9B,MAAMK,SACKrC,KAAKgC,OAAS,UAAWM,EAAAtC,KAAKgC,QAAI,MAAAM,SAAA,SAAAA,EAAED,MAAQE,UAEvD,IAAKP,EAAM,CACP,M,CAGJ,OACIlB,EAAA,cACI0B,MAAO,CACHH,MAAO,GAAGA,KAEdI,MAAO,KACPC,KAAMV,G,CAKVE,gBACJ,IAAKlC,KAAK8B,QAAS,CACf,M,CAGJ,OAAOhB,EAAA,UAAKd,KAAK8B,Q,CAGbK,mBACJ,IAAKnC,KAAK+B,WAAY,CAClB,M,CAGJ,OAAOjB,EAAA,UAAKd,KAAK+B,W,CAGbR,aACJ,OAAOT,EAAA,QAAM4B,KAAK,a,CAGdlB,cACJ,OAAOV,EAAA,kBAAgB6B,MAAO3C,KAAK2C,O,CAY/BlB,kBACJ,IAAKzB,KAAK4C,QAAQC,OAAQ,CACtB,M,CAGJ,OACI/B,EAAA,oBACI8B,QAAS5C,KAAK4C,QACdE,eAAgB9C,KAAKC,oB"}

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

@@ -1,2 +0,0 @@
-import{r,h as e}from"./p-443111b3.js";const o='@charset "UTF-8";:host(limel-shortcut){--badge-text-color:var(\n      --shortcut-badge-text-color,\n      rgb(var(--color-white))\n  );--badge-background-color:var(\n      --shortcut-badge-background-color,\n      rgb(var(--color-red-default))\n  );position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;row-gap:0.0625rem}:host(limel-shortcut) *{box-sizing:border-box}:host(limel-shortcut[disabled]) a{opacity:0.5;box-shadow:unset;cursor:not-allowed}a{all:unset;transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--shortcut-background-color, var(--lime-elevated-surface-background-color));box-shadow:var(--button-shadow-normal);text-align:center;height:calc(100% - 1rem);width:calc(100% - 1rem);padding:0.5rem;border-radius:var(--shortcut-border-radius, 1rem)}a:hover,a:focus,a:focus-visible{will-change:color, background-color, box-shadow, transform}a:hover{transform:translate3d(0, -0.04rem, 0);color:var(--mdc-theme-on-surface);background-color:var(--shortcut-background-color, var(--lime-elevated-surface-background-color));box-shadow:var(--button-shadow-hovered)}a:active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}a:hover,a:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}a:focus{outline:none}a:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}limel-icon{display:flex;height:100%;width:100%;justify-content:center;color:var(--shortcut-icon-color, rgb(var(--contrast-1000)));border-radius:var(--shortcut-border-radius, 1rem)}span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;color:var(--shortcut-label-color, rgb(var(--contrast-1100)));font-size:0.75rem;text-align:center}limel-badge{position:absolute;top:-0.25rem;right:0.125rem}';const t=class{constructor(o){r(this,o);this.renderLabel=()=>{if(this.label){return e("span",{"aria-hidden":"true"},this.label)}};this.getAriaLabel=()=>{var r,e;if(this.label&&((r=this.link)===null||r===void 0?void 0:r.title)){return this.label+". "+this.link.title}if(this.label){return this.label}if((e=this.link)===null||e===void 0?void 0:e.title){return this.link.title}return undefined};this.renderNotification=()=>{if(this.badge){return e("limel-badge",{label:this.badge})}};this.icon=undefined;this.label=null;this.disabled=false;this.badge=undefined;this.link=undefined}render(){var r,o,t;return[e("a",{"aria-disabled":this.disabled,href:(r=this.link)===null||r===void 0?void 0:r.href,target:(o=this.link)===null||o===void 0?void 0:o.target,tabindex:"0","aria-label":this.getAriaLabel(),title:(t=this.link)===null||t===void 0?void 0:t.title},e("limel-icon",{name:this.icon})),this.renderLabel(),this.renderNotification()]}};t.style=o;export{t as limel_shortcut};
-//# sourceMappingURL=p-f3a613a3.entry.js.map

package/dist/lime-elements/p-f3a613a3.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["shortcutCss","Shortcut","this","renderLabel","label","h","getAriaLabel","_a","link","title","_b","undefined","renderNotification","badge","render","disabled","href","target","tabindex","_c","name","icon"],"sources":["./src/components/shortcut/shortcut.scss?tag=limel-shortcut&encapsulation=shadow","./src/components/shortcut/shortcut.tsx"],"sourcesContent":["/**\n* @prop --shortcut-border-radius: defines the radius of corners of the shortcut. Defaults to `1rem`\n* @prop --shortcut-icon-color: defines the fill color of the shortcut icon. Defaults to `--contrast-1000`\n* @prop --shortcut-label-color: defines the color of the shortcut label. Defaults to `--contrast-1100`\n* @prop --shortcut-background-color: defines the backgrounds color of the shortcut icon. Defaults to `--lime-elevated-surface-background-color`\n* @prop --shortcut-badge-text-color: Text color of the notification badge. Defaults to `--color-white`\n* @prop --shortcut-badge-background-color: Background color of the notification badge. Defaults to `--color-red-default`\n*/\n\n@use '../../style/mixins';\n\n:host(limel-shortcut) {\n    --badge-text-color: var(\n        --shortcut-badge-text-color,\n        rgb(var(--color-white))\n    );\n    --badge-background-color: var(\n        --shortcut-badge-background-color,\n        rgb(var(--color-red-default))\n    );\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    row-gap: 0.0625rem; //1px\n\n    * {\n        box-sizing: border-box;\n    }\n}\n\n:host(limel-shortcut[disabled]) {\n    a {\n        opacity: 0.5;\n        box-shadow: unset;\n        cursor: not-allowed;\n    }\n}\n\na {\n    all: unset;\n    @include mixins.is-elevated-clickable(\n        $background-color: var(\n                --shortcut-background-color,\n                var(--lime-elevated-surface-background-color)\n            ),\n        $background-color--hovered: var(\n                --shortcut-background-color,\n                var(--lime-elevated-surface-background-color)\n            )\n    );\n    @include mixins.visualize-keyboard-focus;\n    text-align: center;\n\n    height: calc(100% - 1rem);\n    width: calc(100% - 1rem);\n    padding: 0.5rem;\n\n    border-radius: var(--shortcut-border-radius, 1rem);\n}\n\nlimel-icon {\n    display: flex;\n    height: 100%;\n    width: 100%;\n    justify-content: center;\n    color: var(--shortcut-icon-color, rgb(var(--contrast-1000)));\n    border-radius: var(--shortcut-border-radius, 1rem);\n}\n\nspan {\n    @include mixins.truncate-text;\n    width: 100%;\n    color: var(--shortcut-label-color, rgb(var(--contrast-1100)));\n    font-size: 0.75rem;\n    text-align: center;\n}\n\nlimel-badge {\n    position: absolute;\n    top: -0.25rem;\n    right: 0.125rem;\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { Link } from '../../global/shared-types/link.types';\n\n/**\n * This component can be used on places such as a start page or a dashboard.\n * Clicking on the component should navigate the user to a new screen,\n * to which you need to provide a URL, by specifying an `href` for the `link` property.\n *\n * By default, this navigation will happen within the same browser tab.\n * However, it is possible to override that behavior, by specifying a `target`\n * for the `link` property\n *\n * @exampleComponent limel-example-shortcut\n * @exampleComponent limel-example-shortcut-notification\n * @exampleComponent limel-example-shortcut-styling\n * @exampleComponent limel-example-shortcut-with-click-handler\n */\n\n@Component({\n    tag: 'limel-shortcut',\n    shadow: true,\n    styleUrl: 'shortcut.scss',\n})\nexport class Shortcut {\n    /**\n     * Name of icon for the shortcut.\n     */\n    @Prop({ reflect: true })\n    public icon: string;\n\n    /**\n     * The text to show below the shortcut. Long label will be truncated.\n     */\n    @Prop({ reflect: true })\n    public label?: string = null;\n\n    /**\n     * Set to `true` if shortcut is disabled.\n     */\n    @Prop({ reflect: true })\n    public disabled?: boolean = false;\n\n    /**\n     * If specified, will display a notification badge\n     * on the shortcut.\n     */\n    @Prop({ reflect: true })\n    public badge?: number | string;\n\n    /**\n     * If supplied, the shortcut will be a clickable link.\n     */\n    @Prop()\n    public link?: Link;\n\n    public render() {\n        return [\n            <a\n                aria-disabled={this.disabled}\n                href={this.link?.href}\n                target={this.link?.target}\n                tabindex=\"0\"\n                aria-label={this.getAriaLabel()}\n                title={this.link?.title}\n            >\n                <limel-icon name={this.icon} />\n            </a>,\n            this.renderLabel(),\n            this.renderNotification(),\n        ];\n    }\n\n    private renderLabel = () => {\n        if (this.label) {\n            return <span aria-hidden=\"true\">{this.label}</span>;\n        }\n    };\n\n    private getAriaLabel = () => {\n        if (this.label && this.link?.title) {\n            return this.label + '. ' + this.link.title;\n        }\n\n        if (this.label) {\n            return this.label;\n        }\n\n        if (this.link?.title) {\n            return this.link.title;\n        }\n\n        return undefined;\n    };\n\n    private renderNotification = () => {\n        if (this.badge) {\n            return <limel-badge label={this.badge} />;\n        }\n    };\n}\n"],"mappings":"sCAAA,MAAMA,EAAc,8rE,MCuBPC,EAAQ,M,yBAiDTC,KAAAC,YAAc,KAClB,GAAID,KAAKE,MAAO,CACZ,OAAOC,EAAA,sBAAkB,QAAQH,KAAKE,M,GAItCF,KAAAI,aAAe,K,QACnB,GAAIJ,KAAKE,SAASG,EAAAL,KAAKM,QAAI,MAAAD,SAAA,SAAAA,EAAEE,OAAO,CAChC,OAAOP,KAAKE,MAAQ,KAAOF,KAAKM,KAAKC,K,CAGzC,GAAIP,KAAKE,MAAO,CACZ,OAAOF,KAAKE,K,CAGhB,IAAIM,EAAAR,KAAKM,QAAI,MAAAE,SAAA,SAAAA,EAAED,MAAO,CAClB,OAAOP,KAAKM,KAAKC,K,CAGrB,OAAOE,SAAS,EAGZT,KAAAU,mBAAqB,KACzB,GAAIV,KAAKW,MAAO,CACZ,OAAOR,EAAA,eAAaD,MAAOF,KAAKW,O,kCA9DhB,K,cAMI,M,yCAerBC,S,UACH,MAAO,CACHT,EAAA,qBACmBH,KAAKa,SACpBC,MAAMT,EAAAL,KAAKM,QAAI,MAAAD,SAAA,SAAAA,EAAES,KACjBC,QAAQP,EAAAR,KAAKM,QAAI,MAAAE,SAAA,SAAAA,EAAEO,OACnBC,SAAS,IAAG,aACAhB,KAAKI,eACjBG,OAAOU,EAAAjB,KAAKM,QAAI,MAAAW,SAAA,SAAAA,EAAEV,OAElBJ,EAAA,cAAYe,KAAMlB,KAAKmB,QAE3BnB,KAAKC,cACLD,KAAKU,qB"}