@limetech/lime-elements 38.14.0 → 38.16.0

package/dist/types/components.d.ts

@@ -904,6 +904,7 @@ export namespace Components {
      * @exampleComponent limel-example-collapsible-section-external-control
      * @exampleComponent limel-example-collapsible-section-with-slider
      * @exampleComponent limel-example-collapsible-section-invalid
+     * @exampleComponent limel-example-collapsible-section-icon
      * @exampleComponent limel-example-collapsible-section-css-props
      */
     interface LimelCollapsibleSection {
@@ -915,6 +916,10 @@ export namespace Components {
           * Text to display in the header of the section
          */
         "header": string;
+        /**
+          * Icon to display in the header of the section
+         */
+        "icon"?: string | Icon;
         /**
           * `true` if the section is invalid, `false` if valid. This can be used to indicate that the content inside the section is invalid.
          */
@@ -1695,6 +1700,7 @@ export namespace Components {
      * @exampleComponent limel-example-info-tile-badge
      * @exampleComponent limel-example-info-tile-progress
      * @exampleComponent limel-example-info-tile-loading
+     * @exampleComponent limel-example-info-tile-primary-slot
      * @exampleComponent limel-example-info-tile-styling
      */
     interface LimelInfoTile {
@@ -3611,6 +3617,7 @@ declare global {
      * @exampleComponent limel-example-collapsible-section-external-control
      * @exampleComponent limel-example-collapsible-section-with-slider
      * @exampleComponent limel-example-collapsible-section-invalid
+     * @exampleComponent limel-example-collapsible-section-icon
      * @exampleComponent limel-example-collapsible-section-css-props
      */
     interface HTMLLimelCollapsibleSectionElement extends Components.LimelCollapsibleSection, HTMLStencilElement {
@@ -4073,6 +4080,7 @@ declare global {
      * @exampleComponent limel-example-info-tile-badge
      * @exampleComponent limel-example-info-tile-progress
      * @exampleComponent limel-example-info-tile-loading
+     * @exampleComponent limel-example-info-tile-primary-slot
      * @exampleComponent limel-example-info-tile-styling
      */
     interface HTMLLimelInfoTileElement extends Components.LimelInfoTile, HTMLStencilElement {
@@ -5599,6 +5607,7 @@ declare namespace LocalJSX {
      * @exampleComponent limel-example-collapsible-section-external-control
      * @exampleComponent limel-example-collapsible-section-with-slider
      * @exampleComponent limel-example-collapsible-section-invalid
+     * @exampleComponent limel-example-collapsible-section-icon
      * @exampleComponent limel-example-collapsible-section-css-props
      */
     interface LimelCollapsibleSection {
@@ -5610,6 +5619,10 @@ declare namespace LocalJSX {
           * Text to display in the header of the section
          */
         "header"?: string;
+        /**
+          * Icon to display in the header of the section
+         */
+        "icon"?: string | Icon;
         /**
           * `true` if the section is invalid, `false` if valid. This can be used to indicate that the content inside the section is invalid.
          */
@@ -6487,6 +6500,7 @@ declare namespace LocalJSX {
      * @exampleComponent limel-example-info-tile-badge
      * @exampleComponent limel-example-info-tile-progress
      * @exampleComponent limel-example-info-tile-loading
+     * @exampleComponent limel-example-info-tile-primary-slot
      * @exampleComponent limel-example-info-tile-styling
      */
     interface LimelInfoTile {
@@ -8403,6 +8417,7 @@ declare module "@stencil/core" {
              * @exampleComponent limel-example-collapsible-section-external-control
              * @exampleComponent limel-example-collapsible-section-with-slider
              * @exampleComponent limel-example-collapsible-section-invalid
+             * @exampleComponent limel-example-collapsible-section-icon
              * @exampleComponent limel-example-collapsible-section-css-props
              */
             "limel-collapsible-section": LocalJSX.LimelCollapsibleSection & JSXBase.HTMLAttributes<HTMLLimelCollapsibleSectionElement>;
@@ -8750,6 +8765,7 @@ declare module "@stencil/core" {
              * @exampleComponent limel-example-info-tile-badge
              * @exampleComponent limel-example-info-tile-progress
              * @exampleComponent limel-example-info-tile-loading
+             * @exampleComponent limel-example-info-tile-primary-slot
              * @exampleComponent limel-example-info-tile-styling
              */
             "limel-info-tile": LocalJSX.LimelInfoTile & JSXBase.HTMLAttributes<HTMLLimelInfoTileElement>;

package/package.json

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

package/dist/lime-elements/p-690a1a02.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as o,h as r,g as t}from"./p-288f0842.js";import{d as n}from"./p-c70b1ea3.js";import{m as i,r as a}from"./p-f221011c.js";import{c as s}from"./p-96460db3.js";const l='@charset "UTF-8";:host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}:host(limel-collapsible-section){--border-radius-of-header:0.75rem;display:block}:host([hidden]){display:none}.open-close-toggle{all:unset;position:absolute;inset:0;width:100%;transition:background-color 0.4s ease, border-radius 0.1s ease;cursor:pointer;z-index:-1;background-color:var(--closed-header-background-color, rgb(var(--contrast-200)));border-radius:var(--border-radius-of-header)}.open-close-toggle:focus{outline:none}.open-close-toggle:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.open-close-toggle:hover{background-color:var(--open-header-background-color, rgb(var(--contrast-300)))}section.open .open-close-toggle{background-color:var(--open-header-background-color, rgb(var(--contrast-100)));border-radius:var(--border-radius-of-header) var(--border-radius-of-header) 0 0}section.open .open-close-toggle:hover{background-color:var(--open-header-background-color, rgb(var(--contrast-300)))}.title,.divider-line,.expand-icon{pointer-events:none}section{transition:box-shadow 0.4s ease;border-radius:var(--border-radius-of-header)}section[aria-invalid]:not([aria-invalid=false]){--header-stroke-color:rgb(var(--color-red-default)) !important}section[aria-invalid]:not([aria-invalid=false]):not(.open){box-shadow:0 0 0 1px rgb(var(--color-red-default))}header{isolation:isolate;position:relative;align-items:center;display:flex;justify-content:space-between;padding-left:0.5rem;height:2.5rem}.title{font-size:1rem;font-weight:300;color:var(--mdc-theme-on-surface);justify-self:flex-start;user-select:none;padding-right:0.5rem;height:auto;max-height:3rem;line-height:1.2rem;display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}.divider-line{transition:opacity 0.3s ease 0.3s;flex-grow:1;height:0.125rem;border-radius:1rem;background-color:var(--header-stroke-color, rgb(var(--contrast-900)));margin-right:0.5rem;opacity:0}section.open .divider-line{opacity:0.16}.actions{justify-self:flex-end;flex-shrink:0}::slotted([slot=header]){margin-right:0.5rem}.body{background-color:var(--body-background-color, var(--contrast-100));padding-left:var(--body-padding, 1.25rem);padding-right:var(--body-padding, 1.25rem);border-radius:0 0 var(--border-radius-of-header) var(--border-radius-of-header)}.body{--limel-cs-opacity-transition-speed:0.1s;--limel-cs-opacity-transition-delay:0s;--limel-cs-grid-template-rows-transition-speed:0.3s;transition:grid-template-rows var(--limel-cs-grid-template-rows-transition-speed) cubic-bezier(1, 0.09, 0, 0.89);display:grid;grid-template-rows:0fr}.body slot{transition:opacity var(--limel-cs-opacity-transition-speed) ease var(--limel-cs-opacity-transition-delay);display:block;overflow:hidden;opacity:0}section.open .body{--limel-cs-opacity-transition-speed:0.4s;--limel-cs-opacity-transition-delay:0.3s;--limel-cs-grid-template-rows-transition-speed:0.46s;grid-template-rows:1fr}section.open .body slot{opacity:1}header:hover+.body{will-change:grid-template-rows}header:hover+.body slot{will-change:opacity}.expand-icon{position:relative;height:1.875rem;margin:0 1rem 0 0.5rem;width:0.75rem;flex-shrink:0}.line{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:100%;border-radius:1rem;height:0.125rem;background-color:var(--header-stroke-color, rgb(var(--contrast-900)))}.line:first-of-type,.line:last-of-type{transition:opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s}.line:first-of-type{transform:rotate3d(0, 0, 1, 90deg)}.line:last-of-type{transform:rotate3d(0, 0, 1, -90deg)}.line:nth-of-type(2),.line:nth-of-type(3){transition:opacity 0.2s ease, transform 0.18s ease}section.open .line:first-of-type,section.open .line:last-of-type{transition:opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s}section.open .line:first-of-type{transform:rotate3d(0, 0, 1, 0deg)}section.open .line:last-of-type{transform:rotate3d(0, 0, 1, 0deg)}section.open .line:nth-of-type(2),section.open .line:nth-of-type(3){transition:opacity 1s ease, transform 0.4s ease}section.open .line:nth-of-type(2){transform:translate3d(0, -1rem, 0);opacity:0}section.open .line:nth-of-type(3){transform:translate3d(0, 1rem, 0);opacity:0}.open-close-toggle:hover+.expand-icon .line:first-of-type{transform:rotate3d(0, 0, 1, 0deg)}.open-close-toggle:hover+.expand-icon .line:last-of-type{transform:rotate3d(0, 0, 1, 0deg)}.open-close-toggle:hover+.expand-icon .line:nth-of-type(2),.open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transition:opacity 0.5s ease 0.4s, transform 0.7s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s}.open-close-toggle:hover+.expand-icon .line:nth-of-type(2){transform:translate3d(0, -0.5rem, 0);opacity:0.4}.open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transform:translate3d(0, 0.5rem, 0);opacity:0.4}section.open .open-close-toggle:hover+.expand-icon .line:first-of-type,section.open .open-close-toggle:hover+.expand-icon .line:last-of-type{transition:opacity 0.2s ease 0.4s, transform 0.4s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s}section.open .open-close-toggle:hover+.expand-icon .line:first-of-type{transform:rotate3d(0, 0, 1, 45deg)}section.open .open-close-toggle:hover+.expand-icon .line:last-of-type{transform:rotate3d(0, 0, 1, -45deg)}section.open .open-close-toggle:hover+.expand-icon .line:nth-of-type(2){transform:translate3d(0, -1rem, 0);opacity:0}section.open .open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transform:translate3d(0, 1rem, 0);opacity:0}';const c=class{constructor(t){e(this,t);this.open=o(this,"open",7);this.close=o(this,"close",7);this.action=o(this,"action",7);this.bodyId=s();this.onClick=()=>{this.handleInteraction()};this.handleInteraction=()=>{this.isOpen=!this.isOpen;if(this.isOpen){this.open.emit();const e=100;setTimeout(n,e)}else{this.close.emit()}};this.renderActions=()=>{if(!this.actions){return}return r("div",{class:"actions"},this.actions.map(this.renderActionButton))};this.renderActionButton=e=>r("limel-icon-button",{icon:e.icon,label:e.label,disabled:e.disabled,onClick:this.handleActionClick(e)});this.handleActionClick=e=>o=>{o.stopPropagation();this.action.emit(e)};this.isOpen=false;this.header=undefined;this.invalid=false;this.actions=undefined}componentDidRender(){const e=this.host.shadowRoot.querySelector(".open-close-toggle");i(e)}disconnectedCallback(){const e=this.host.shadowRoot.querySelector(".open-close-toggle");a(e)}render(){return r("section",{class:`${this.isOpen?"open":""}`,"aria-invalid":this.invalid},r("header",null,r("button",{class:"open-close-toggle",onClick:this.onClick,"aria-controls":this.bodyId}),r("div",{class:"expand-icon"},r("div",{class:"line"}),r("div",{class:"line"}),r("div",{class:"line"}),r("div",{class:"line"})),r("h2",{class:"title mdc-typography mdc-typography--headline2"},this.header),r("div",{class:"divider-line"}),this.renderHeaderSlot(),this.renderActions()),r("div",{class:"body","aria-hidden":String(!this.isOpen),id:this.bodyId},r("slot",null)))}renderHeaderSlot(){return r("slot",{name:"header"})}get host(){return t(this)}};c.style=l;export{c as limel_collapsible_section};
-//# sourceMappingURL=p-690a1a02.entry.js.map

package/dist/lime-elements/p-690a1a02.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["collapsibleSectionCss","CollapsibleSection","this","bodyId","createRandomString","onClick","handleInteraction","isOpen","open","emit","waitForUiToRender","setTimeout","dispatchResizeEvent","close","renderActions","actions","h","class","map","renderActionButton","action","icon","label","disabled","handleActionClick","event","stopPropagation","componentDidRender","button","host","shadowRoot","querySelector","makeEnterClickable","disconnectedCallback","removeEnterClickable","render","invalid","header","renderHeaderSlot","String","id","name"],"sources":["./src/components/collapsible-section/collapsible-section.scss?tag=limel-collapsible-section&encapsulation=shadow","./src/components/collapsible-section/collapsible-section.tsx"],"sourcesContent":["@use '../../style/internal/lime-theme';\n@use '../../style/mixins';\n@use '../../style/internal/shared_input-select-picker';\n\n/**\n * @prop --closed-header-background-color: background color for header when closed\n * @prop --open-header-background-color: background color for header when open\n * @prop --header-stroke-color: color of the animated icons that visualize collapsed or normal states of the headers, as well as the divider line on headers\n * @prop --body-background-color: background color for body\n * @prop --body-padding: space around content of the body\n */\n\n:host(limel-collapsible-section) {\n    --border-radius-of-header: 0.75rem;\n    display: block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n.open-close-toggle {\n    all: unset;\n    position: absolute;\n    inset: 0;\n    width: 100%; // for Firefox\n    @include mixins.visualize-keyboard-focus;\n    transition:\n        background-color 0.4s ease,\n        border-radius 0.1s ease;\n    cursor: pointer;\n    z-index: -1;\n\n    background-color: var(\n        --closed-header-background-color,\n        rgb(var(--contrast-200))\n    );\n    border-radius: var(--border-radius-of-header);\n\n    &:hover {\n        background-color: var(\n            --open-header-background-color,\n            rgb(var(--contrast-300))\n        );\n    }\n\n    section.open & {\n        background-color: var(\n            --open-header-background-color,\n            rgb(var(--contrast-100))\n        );\n        border-radius: var(--border-radius-of-header)\n            var(--border-radius-of-header) 0 0;\n        &:hover {\n            background-color: var(\n                --open-header-background-color,\n                rgb(var(--contrast-300))\n            );\n        }\n    }\n}\n\n.title,\n.divider-line,\n.expand-icon {\n    pointer-events: none;\n}\n\nsection {\n    transition: box-shadow 0.4s ease;\n    border-radius: var(--border-radius-of-header);\n\n    &[aria-invalid]:not([aria-invalid='false']) {\n        --header-stroke-color: rgb(var(--color-red-default)) !important;\n\n        &:not(.open) {\n            box-shadow: 0 0 0 1px rgb(var(--color-red-default));\n        }\n    }\n}\n\nheader {\n    isolation: isolate;\n    position: relative;\n\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n\n    padding-left: 0.5rem;\n    height: shared_input-select-picker.$height-of-mdc-text-field;\n}\n\n.title {\n    font-size: 1rem;\n    font-weight: 300;\n    color: var(--mdc-theme-on-surface);\n\n    justify-self: flex-start;\n\n    user-select: none; // mostly to improve experience on Android, where tapping on sections selects the text too\n\n    padding-right: 0.5rem;\n\n    // Below tries to render text in two lines,\n    // and then truncate if there is no more space\n    height: auto;\n    max-height: 3rem;\n    line-height: 1.2rem;\n    @include mixins.truncate-text-on-line(2);\n}\n\n.divider-line {\n    transition: opacity 0.3s ease 0.3s;\n    flex-grow: 1;\n    height: 0.125rem;\n    border-radius: 1rem;\n    background-color: var(--header-stroke-color, rgb(var(--contrast-900)));\n    margin-right: 0.5rem;\n\n    opacity: 0;\n\n    section.open & {\n        opacity: 0.16;\n    }\n}\n\n.actions {\n    justify-self: flex-end;\n    flex-shrink: 0;\n}\n\n::slotted([slot='header']) {\n    margin-right: 0.5rem;\n}\n\n.body {\n    background-color: var(--body-background-color, var(--contrast-100));\n    padding-left: var(--body-padding, 1.25rem);\n    padding-right: var(--body-padding, 1.25rem);\n    border-radius: 0 0 var(--border-radius-of-header)\n        var(--border-radius-of-header);\n}\n\n// This animates height of the body,\n// from `0` to `auto`\n.body {\n    // All below vars are for internal use only!\n    --limel-cs-opacity-transition-speed: 0.1s;\n    --limel-cs-opacity-transition-delay: 0s;\n    --limel-cs-grid-template-rows-transition-speed: 0.3s;\n    transition: grid-template-rows\n        var(--limel-cs-grid-template-rows-transition-speed)\n        cubic-bezier(1, 0.09, 0, 0.89);\n    display: grid;\n    grid-template-rows: 0fr;\n\n    slot {\n        transition: opacity var(--limel-cs-opacity-transition-speed) ease\n            var(--limel-cs-opacity-transition-delay);\n        display: block;\n        overflow: hidden;\n        opacity: 0;\n    }\n}\n\nsection.open {\n    .body {\n        --limel-cs-opacity-transition-speed: 0.4s;\n        --limel-cs-opacity-transition-delay: 0.3s;\n        --limel-cs-grid-template-rows-transition-speed: 0.46s;\n        grid-template-rows: 1fr;\n\n        slot {\n            opacity: 1;\n        }\n    }\n}\n\nheader:hover {\n    + .body {\n        will-change: grid-template-rows;\n\n        slot {\n            will-change: opacity;\n        }\n    }\n}\n\n// End: animating height\n\n@import './partial-styles/expand-icon.scss';\n","import {\n    Component,\n    Event,\n    Element,\n    EventEmitter,\n    h,\n    Prop,\n} from '@stencil/core';\nimport { dispatchResizeEvent } from '../../util/dispatch-resize-event';\nimport { Action } from './action';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport { createRandomString } from '../../util/random-string';\n\n/**\n * A collapsible section can be used to group related content together\n * and hide the group when not needed.\n * Using this component can help to:\n * - Save vertical space by hiding non-essential content\n * - Improve content organization and scannability of the user interface\n * - Reduce cognitive load by displaying only a set of relevant information at a time\n * - Or disclose complex information, progressively to the user\n *\n * @slot - Content to put inside the collapsible section\n * @slot header - Optional slot for custom header content\n *\n * @exampleComponent limel-example-collapsible-section-basic\n * @exampleComponent limel-example-collapsible-section-actions\n * @exampleComponent limel-example-collapsible-section-with-custom-header-component\n * @exampleComponent limel-example-collapsible-section-external-control\n * @exampleComponent limel-example-collapsible-section-with-slider\n * @exampleComponent limel-example-collapsible-section-invalid\n * @exampleComponent limel-example-collapsible-section-css-props\n */\n@Component({\n    tag: 'limel-collapsible-section',\n    shadow: true,\n    styleUrl: 'collapsible-section.scss',\n})\nexport class CollapsibleSection {\n    /**\n     * `true` if the section is expanded, `false` if collapsed.\n     */\n    @Prop({ mutable: true, reflect: true })\n    public isOpen: boolean = false;\n\n    /**\n     * Text to display in the header of the section\n     */\n    @Prop({ reflect: true })\n    public header: string;\n\n    /**\n     * `true` if the section is invalid, `false` if valid.\n     * This can be used to indicate that the content inside the section is invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * Actions to place to the far right inside the header\n     */\n    @Prop()\n    public actions: Action[];\n\n    /**\n     * Emitted when the section is expanded\n     */\n    @Event()\n    private open: EventEmitter<void>;\n\n    /**\n     * Emitted when the section is collapsed\n     */\n    @Event()\n    private close: EventEmitter<void>;\n\n    /**\n     * Emitted when an action is clicked inside the header\n     */\n    @Event()\n    private action: EventEmitter<Action>;\n\n    @Element()\n    private host: HTMLElement;\n\n    private bodyId = createRandomString();\n\n    public componentDidRender() {\n        const button = this.host.shadowRoot.querySelector(\n            '.open-close-toggle',\n        ) as HTMLElement;\n\n        makeEnterClickable(button);\n    }\n\n    public disconnectedCallback() {\n        const button = this.host.shadowRoot.querySelector(\n            '.open-close-toggle',\n        ) as HTMLElement;\n\n        removeEnterClickable(button);\n    }\n\n    public render() {\n        return (\n            <section\n                class={`${this.isOpen ? 'open' : ''}`}\n                aria-invalid={this.invalid}\n            >\n                <header>\n                    <button\n                        class=\"open-close-toggle\"\n                        onClick={this.onClick}\n                        aria-controls={this.bodyId}\n                    />\n                    <div class=\"expand-icon\">\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                        <div class=\"line\" />\n                    </div>\n                    <h2 class=\"title mdc-typography mdc-typography--headline2\">\n                        {this.header}\n                    </h2>\n                    <div class=\"divider-line\" />\n                    {this.renderHeaderSlot()}\n                    {this.renderActions()}\n                </header>\n                <div\n                    class=\"body\"\n                    aria-hidden={String(!this.isOpen)}\n                    id={this.bodyId}\n                >\n                    <slot />\n                </div>\n            </section>\n        );\n    }\n\n    private onClick = () => {\n        this.handleInteraction();\n    };\n\n    private handleInteraction = () => {\n        this.isOpen = !this.isOpen;\n\n        if (this.isOpen) {\n            this.open.emit();\n            const waitForUiToRender = 100;\n            setTimeout(dispatchResizeEvent, waitForUiToRender);\n        } else {\n            this.close.emit();\n        }\n    };\n\n    private renderActions = () => {\n        if (!this.actions) {\n            return;\n        }\n\n        return (\n            <div class=\"actions\">\n                {this.actions.map(this.renderActionButton)}\n            </div>\n        );\n    };\n\n    private renderHeaderSlot() {\n        return <slot name=\"header\" />;\n    }\n\n    private renderActionButton = (action: Action) => {\n        return (\n            <limel-icon-button\n                icon={action.icon}\n                label={action.label}\n                disabled={action.disabled}\n                onClick={this.handleActionClick(action)}\n            />\n        );\n    };\n\n    private handleActionClick = (action: Action) => (event: MouseEvent) => {\n        event.stopPropagation();\n        this.action.emit(action);\n    };\n}\n"],"mappings":"4KAAA,MAAMA,EAAwB,k9M,MCyCjBC,EAAkB,M,gHA+CnBC,KAAAC,OAASC,IAsDTF,KAAAG,QAAU,KACdH,KAAKI,mBAAmB,EAGpBJ,KAAAI,kBAAoB,KACxBJ,KAAKK,QAAUL,KAAKK,OAEpB,GAAIL,KAAKK,OAAQ,CACbL,KAAKM,KAAKC,OACV,MAAMC,EAAoB,IAC1BC,WAAWC,EAAqBF,E,KAC7B,CACHR,KAAKW,MAAMJ,M,GAIXP,KAAAY,cAAgB,KACpB,IAAKZ,KAAKa,QAAS,CACf,M,CAGJ,OACIC,EAAA,OAAKC,MAAM,WACNf,KAAKa,QAAQG,IAAIhB,KAAKiB,oBACrB,EAQNjB,KAAAiB,mBAAsBC,GAEtBJ,EAAA,qBACIK,KAAMD,EAAOC,KACbC,MAAOF,EAAOE,MACdC,SAAUH,EAAOG,SACjBlB,QAASH,KAAKsB,kBAAkBJ,KAKpClB,KAAAsB,kBAAqBJ,GAAoBK,IAC7CA,EAAMC,kBACNxB,KAAKkB,OAAOX,KAAKW,EAAO,E,YA7IH,M,mCAaR,M,uBA+BVO,qBACH,MAAMC,EAAS1B,KAAK2B,KAAKC,WAAWC,cAChC,sBAGJC,EAAmBJ,E,CAGhBK,uBACH,MAAML,EAAS1B,KAAK2B,KAAKC,WAAWC,cAChC,sBAGJG,EAAqBN,E,CAGlBO,SACH,OACInB,EAAA,WACIC,MAAO,GAAGf,KAAKK,OAAS,OAAS,KAAI,eACvBL,KAAKkC,SAEnBpB,EAAA,cACIA,EAAA,UACIC,MAAM,oBACNZ,QAASH,KAAKG,QAAO,gBACNH,KAAKC,SAExBa,EAAA,OAAKC,MAAM,eACPD,EAAA,OAAKC,MAAM,SACXD,EAAA,OAAKC,MAAM,SACXD,EAAA,OAAKC,MAAM,SACXD,EAAA,OAAKC,MAAM,UAEfD,EAAA,MAAIC,MAAM,kDACLf,KAAKmC,QAEVrB,EAAA,OAAKC,MAAM,iBACVf,KAAKoC,mBACLpC,KAAKY,iBAEVE,EAAA,OACIC,MAAM,OAAM,cACCsB,QAAQrC,KAAKK,QAC1BiC,GAAItC,KAAKC,QAETa,EAAA,c,CAkCRsB,mBACJ,OAAOtB,EAAA,QAAMyB,KAAK,U"}

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

@@ -1,2 +0,0 @@
-import{r as i,c as t,h as e}from"./p-288f0842.js";import{t as s}from"./p-bcaea01a.js";import{g as r,a,b as n,c as h}from"./p-05ab1a40.js";import"./p-bd547592.js";const l='@charset "UTF-8";:host(limel-file){position:relative}.drag-and-drop-tip{pointer-events:none;position:absolute;box-sizing:border-box;margin:0.25rem;inset:0;display:flex;align-items:center;justify-content:flex-end;flex-wrap:nowrap;border-radius:0.25rem;border:1px dashed rgb(var(--contrast-700));padding:0 0.5rem}.drag-and-drop-tip .invisible-label-mock{flex-shrink:0;opacity:0;padding-right:1rem;padding-left:1.5rem}.drag-and-drop-tip .tip{font-size:smaller;color:var(--mdc-theme-text-secondary-on-background);height:auto;max-height:3rem;line-height:1;display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}';const o={id:null,text:null,removable:true};const d=class{constructor(e){i(this,e);this.change=t(this,"change",7);this.interact=t(this,"interact",7);this.dropZoneTip=()=>this.getTranslation("drag-and-drop-tips");this.handleNewFiles=i=>{this.preventAndStop(i);this.change.emit(i.detail[0])};this.handleChipSetChange=i=>{i.stopPropagation();const t=!i.detail.length?i.detail[0]:null;if(!t){this.change.emit(t)}};this.handleChipInteract=i=>{this.preventAndStop(i);this.interact.emit(i.detail.id)};this.value=undefined;this.label=undefined;this.required=false;this.disabled=false;this.readonly=false;this.invalid=false;this.accept="*";this.language="en"}render(){return[e("limel-file-dropzone",{disabled:this.disabled||this.readonly||!!this.value,accept:this.accept,onFilesSelected:this.handleNewFiles},this.renderChipset()),this.renderDragAndDropTip()]}renderDragAndDropTip(){if(this.value||this.disabled||this.readonly){return}return e("div",{class:"drag-and-drop-tip"},e("span",{class:"invisible-label-mock",role:"presentation"},this.label),e("span",{class:"tip"},this.dropZoneTip()))}getChipArray(){if(!this.value){return[]}return[Object.assign(Object.assign({},o),{text:this.value.filename,id:this.value.id,icon:{name:r(this.value),title:a(this.value),color:n(this.value),backgroundColor:h(this.value)},href:this.value.href})]}renderChipset(){const i=e("limel-chip-set",{disabled:this.disabled,readonly:this.readonly,invalid:this.invalid,label:this.label,leadingIcon:"upload_to_cloud",language:this.language,onChange:this.handleChipSetChange,onInteract:this.handleChipInteract,required:this.required,type:"input",value:this.getChipArray()});if(this.value){return i}return e("limel-file-input",{accept:this.accept,disabled:this.disabled||this.readonly},i)}preventAndStop(i){i.stopPropagation();i.preventDefault()}getTranslation(i){return s.get(`file.${i}`,this.language)}};d.style=l;export{d as limel_file};
-//# sourceMappingURL=p-acec0f52.entry.js.map

package/dist/lime-elements/p-dc3d2ee1.js

@@ -1,2 +0,0 @@
-import{g as n,a as t,b as r,c as e}from"./p-05ab1a40.js";function o(o){const i={id:crypto.randomUUID(),filename:o.name,contentType:o.type,size:o.size,fileContent:o};i.icon={name:n(i),title:t(i),color:r(i),backgroundColor:e(i)};return i}function i(n,t){if(t===undefined||t==="*"){return true}const r=t.split(",").map((n=>n.trim()));return r.some((t=>{if(t===n.contentType){return true}if(t.endsWith("/*")){const r=t.split("/")[0];return n.contentType.startsWith(`${r}/`)}if(t.startsWith(".")){const r=t.split(".")[1];return n.contentType.endsWith(`/${r}`)}}))}export{o as c,i};
-//# sourceMappingURL=p-dc3d2ee1.js.map

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

@@ -1,2 +0,0 @@
-import{r as e,h as n,H as i,g as o}from"./p-288f0842.js";import{g as r}from"./p-e1e25236.js";const t="@charset \"UTF-8\";\n/**\n * Note! This file is exported to `dist/scss/` in the published\n * node module, for consumer projects to import.\n * That means this file cannot import from any file that isn't\n * also exported, keeping the same relative path.\n *\n * Or, just don't import anything, that works too.\n */\n/**\n* This can be used on a trigger element that opens a dropdown menu or a popover.\n*/\n/**\n * This mixin will mask out the content that is close to\n * the edges of a scrollable area.\n * - If the scrollable content has `overflow-y`, use `vertically`\n * as an argument for `$direction`.\n - If the scrollable content has `overflow-x`, use `horizontally`\n * as an argument for `$direction`.\n *\n * For the visual effect to work smoothly, we need to make sure that\n * the size of the fade-out edge effect is the same as the\n * internal paddings of the scrollable area. Otherwise, content of a\n * scrollable area that does not have a padding will fade out before\n * any scrolling has been done.\n * This is why this mixin already adds paddings, which automatically\n * default to the size of the fade-out effect.\n * This size defaults to `1rem`, but to override the size use\n * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`\n * when `vertically` argument is set, and use\n * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`\n * when `horizontally` argument is set.\n * Of course you can also programmatically increase and decrease the\n * size of these variables for each edge, based on the amount of\n * scrolling that has been done by the user. In this case, make sure\n * to add a custom padding where the mixin is used, to override\n * the paddings that are automatically added by the mixin in the\n * compiled CSS code.\n */\n/**\n* This mixin will add an animated underline to the bottom of an `a` elements.\n* Note that you may need to add `all: unset;` –depending on your use case–\n* before using this mixin.\n*/\n/**\n* This mixin creates a cross-browser font stack.\n* - `sans-serif` can be used for the UI of the components.\n* - `monospace` can be used for code.\n*\n* ⚠️ If we change the font stacks, we need to update\n* 1. the consumer documentation in `README.md`, and\n* 2. the CSS variables of `--kompendium-example-font-family`\n* in the `<style>` tag of `index.html`.\n*/\n/**\n* This mixin is a hack, using old CSS syntax\n* to enable you to truncate a piece of text,\n* after a certain number of lines.\n*/\n/**\n * The breakpoints below are used to create responsive designs\n * in Lime's products. Therefore, they are here to get distributed\n * to all components in other private repos, which rely on this `mixins`\n * file, to create consistent styles.\n *\n * :::important\n * In very rare cases you should used media queries!\n * Nowadays, there are many better ways of achieving responsive design\n * without media queries. For example, using CSS Grid, Flexbox, and their features.\n * :::\n */\n/**\n  * Media query mixins for responsive design based on screen width.\n  * Note that these mixins do not detect the device type!\n  */\n/**\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: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  --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  --label-min-size: 0.75rem;\n  --label-preferred-size: 6cqw;\n  --label-max-size: 1rem;\n  --value-min-size: 1rem;\n  --value-preferred-size: 20cqw;\n  --value-max-size: 4rem;\n  --suffix-prefix-min-size: 0.75rem;\n  --suffix-prefix-preferred-size: 8cqw;\n  --suffix-prefix-max-size: 1.5rem;\n  --icon-min-size: 2rem;\n  --icon-preferred-size: 60cqh;\n  --icon-max-size: calc(100cqw - 0.5rem);\n  container-type: size;\n  position: relative;\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n:host(limel-info-tile) * {\n  box-sizing: border-box;\n}\n\n:host(limel-info-tile[disabled]) a {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\na {\n  all: unset;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  align-items: flex-start;\n  height: 100%;\n  width: 100%;\n  flex-grow: 1;\n  padding: 0.25rem 1rem 0.5rem 1rem;\n  border-radius: var(--info-tile-border-radius, 1rem);\n  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n}\n\n.icon {\n  z-index: 1;\n  position: absolute;\n  top: 0.5rem;\n  right: 0.75rem;\n  padding: 0.25rem;\n  aspect-ratio: 1/1;\n  color: var(--info-tile-icon-color, rgb(var(--contrast-1000)));\n  border-radius: 0;\n  height: clamp(var(--icon-min-size), var(--icon-preferred-size), var(--icon-max-size));\n}\n@supports not (container-type: size) {\n  .icon {\n    width: max(10%, 3rem);\n  }\n}\n.has-circular-progress .icon {\n  top: unset;\n  bottom: 0.5rem;\n  --icon-min-size: 1.5rem;\n  --icon-preferred-size: 20cqh;\n}\n\n.progress {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.75rem;\n  --circular-progress-size: min(\n      var(--icon-preferred-size),\n      var(--icon-max-size)\n  );\n}\n@supports not (container-type: size) {\n  .progress {\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  line-height: 1.2;\n  font-size: clamp(var(--label-min-size), var(--label-preferred-size), var(--label-max-size));\n}\n@supports not (container-type: size) {\n  .label {\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: 0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100))), 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(var(--suffix-prefix-min-size), var(--suffix-prefix-preferred-size), var(--suffix-prefix-max-size));\n  opacity: 0.7;\n}\n@supports not (container-type: size) {\n  .prefix,\n  .suffix {\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: opacity 0.2s ease, 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  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  font-weight: bold;\n  line-height: normal;\n  font-size: clamp(var(--value-min-size), var(--value-preferred-size), var(--value-max-size));\n}\n@supports not (container-type: size) {\n  .value {\n    font-size: 1.5rem;\n  }\n}\n:host(limel-info-tile[loading]) .value {\n  opacity: 0.3;\n  transform: translate3d(0, 0, 0) scale(0.9);\n}\n\n.suffix {\n  transform: translateY(10%);\n}\n\n@container (width < 8rem) {\n  .progress {\n    top: 0.25rem;\n    right: 0.25rem;\n  }\n  a {\n    padding: 0.375rem;\n    gap: 0.125rem;\n  }\n}\n@container (width < 18.75rem) {\n  .progress {\n    top: 0.5rem;\n    right: 0.5rem;\n  }\n  .icon {\n    top: 0.25rem;\n    right: 0.5rem;\n  }\n  .has-circular-progress .icon {\n    right: 0.25rem;\n    bottom: 0.25rem;\n  }\n}\n@container (width < 40.5rem) {\n  .value {\n    --value-preferred-size: 13cqw;\n  }\n  .value.ch-1, .value.ch-2, .value.ch-3, .value.ch-4 {\n    --value-preferred-size: 20cqw;\n  }\n  .value.ch-5 {\n    --value-preferred-size: 18cqw;\n  }\n  .value.ch-6 {\n    --value-preferred-size: 17cqw;\n  }\n  .value.ch-7 {\n    --value-preferred-size: 16cqw;\n  }\n  .value.ch-8 {\n    --value-preferred-size: 15cqw;\n  }\n  .value.ch-9 {\n    --value-preferred-size: 14cqw;\n  }\n}\n@container (height > 8rem) {\n  a {\n    padding-top: 0.75rem;\n    padding-bottom: 1rem;\n  }\n}\n@container (height < 8rem) and (width > 8rem) {\n  .value {\n    --value-preferred-size: 32cqh !important;\n  }\n  .suffix,\n  .prefix {\n    --suffix-prefix-preferred-size: 16cqh !important;\n  }\n}\n@container (height > 18.75rem) {\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  }\n  .has-circular-progress .icon {\n    position: absolute;\n    top: 0.5rem;\n    right: 0.5rem;\n    --icon-max-size: 3rem;\n  }\n}\nlimel-3d-hover-effect-glow {\n  border-radius: var(--info-tile-border-radius, 1rem);\n}\n\n:host(limel-info-tile) {\n  isolation: isolate;\n  transform-style: preserve-3d;\n  perspective: 1000px;\n}\n@media (prefers-reduced-motion) {\n  :host(limel-info-tile) {\n    perspective: 2000px;\n  }\n}\n\na {\n  position: relative;\n  transition-duration: 0.8s;\n  transition-property: transform, box-shadow, background-color;\n  transition-timing-function: ease-out;\n  transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);\n}\na:focus {\n  outline: none;\n}\na:hover, a:focus, a:focus-visible, a:focus-within {\n  will-change: background-color, box-shadow, transform;\n}\na:hover, a:focus, a:focus-visible, a:active {\n  transition-duration: 0.2s;\n}\na:hover, a:focus-visible {\n  box-shadow: var(--button-shadow-hovered), var(--shadow-depth-16);\n}\na:hover {\n  transform: scale3d(1.01, 1.01, 1.01) rotate3d(var(--limel-3d-hover-effect-rotate3d));\n}\na:focus-visible {\n  outline: none;\n  transform: scale3d(1.01, 1.01, 1.01);\n}\na:hover limel-3d-hover-effect-glow {\n  --limel-3d-hover-effect-glow-opacity: 0.5;\n}\n@media (prefers-reduced-motion) {\n  a:hover limel-3d-hover-effect-glow {\n    --limel-3d-hover-effect-glow-opacity: 0.2;\n  }\n}\na.is-clickable {\n  cursor: pointer;\n  box-shadow: var(--button-shadow-normal);\n}\na.is-clickable:hover, a.is-clickable:focus-visible {\n  box-shadow: var(--button-shadow-hovered), var(--shadow-depth-16);\n}\na.is-clickable:active {\n  transform: scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);\n  box-shadow: var(--button-shadow-pressed);\n}\na.is-clickable:focus-visible {\n  box-shadow: var(--shadow-depth-8-focused), var(--button-shadow-hovered);\n}\na.is-clickable:focus-visible:active {\n  box-shadow: var(--shadow-depth-8-focused), var(--button-shadow-pressed);\n}";const s=class{constructor(i){e(this,i);this.renderPrefix=()=>{if(this.prefix){return n("span",{class:"prefix"},this.prefix)}};this.renderValue=()=>{var e;const i=((e=this.value)!==null&&e!==void 0?e:"").toString().length;if(!this.value&&this.loading){return n("span",{class:"value"},"···")}if(this.value){return n("span",{class:{value:true,[`ch-${i}`]:true}},this.value)}};this.renderSuffix=()=>{if(this.suffix){return n("span",{class:"suffix"},this.suffix)}};this.renderIcon=()=>{if(this.icon){return n("limel-icon",{class:"icon",name:this.icon})}};this.renderProgress=()=>{var e,i;if(((e=this.progress)===null||e===void 0?void 0:e.value)||((i=this.progress)===null||i===void 0?void 0:i.value)===0){return n("limel-circular-progress",{class:"progress",prefix:this.progress.prefix,value:this.progress.value,suffix:this.progress.suffix,maxValue:this.progress.maxValue,displayPercentageColors:this.progress.displayPercentageColors})}};this.renderLabel=()=>{if(this.label){return n("span",{class:"label"},this.label)}};this.renderNotification=()=>{if(this.badge){return n("limel-badge",{label:this.badge})}};this.renderSpinner=()=>{if(this.loading){return n("limel-linear-progress",{indeterminate:true})}};this.value=undefined;this.icon=undefined;this.label=null;this.prefix=undefined;this.suffix=undefined;this.disabled=false;this.badge=undefined;this.loading=false;this.link=undefined;this.progress=undefined}componentWillLoad(){const{handleMouseEnter:e,handleMouseLeave:n}=r(this.host);this.handleMouseEnter=e;this.handleMouseLeave=n}render(){var e,o,r,t,s,a,l,c,d,h;const f=this.checkProps(this===null||this===void 0?void 0:this.prefix)+this.value+" "+this.checkProps(this===null||this===void 0?void 0:this.suffix)+this.checkProps(this===null||this===void 0?void 0:this.label)+". "+this.checkProps((e=this===null||this===void 0?void 0:this.progress)===null||e===void 0?void 0:e.prefix)+this.checkProps((o=this===null||this===void 0?void 0:this.progress)===null||o===void 0?void 0:o.value)+this.checkProps((r=this===null||this===void 0?void 0:this.progress)===null||r===void 0?void 0:r.suffix)+this.checkProps((t=this===null||this===void 0?void 0:this.link)===null||t===void 0?void 0:t.title);const u=!this.disabled?(s=this.link)===null||s===void 0?void 0:s.href:"#";return n(i,{onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave},n("a",{title:(a=this.link)===null||a===void 0?void 0:a.title,href:u,target:(l=this.link)===null||l===void 0?void 0:l.target,tabindex:"0","aria-label":f,"aria-disabled":this.disabled,"aria-busy":this.loading?"true":"false","aria-live":"polite",class:{"is-clickable":!!((c=this.link)===null||c===void 0?void 0:c.href)&&!this.disabled,"has-circular-progress":!!((d=this.progress)===null||d===void 0?void 0:d.value)||((h=this.progress)===null||h===void 0?void 0:h.value)===0}},this.renderIcon(),this.renderProgress(),n("div",{class:"value-group"},this.renderPrefix(),n("div",{class:"value-and-suffix"},this.renderValue(),this.renderSuffix()),this.renderSpinner()),this.renderLabel(),n("limel-3d-hover-effect-glow",null)),this.renderNotification())}checkProps(e){return!e?"":e+" "}get host(){return o(this)}};s.style=t;export{s as limel_info_tile};
-//# sourceMappingURL=p-fc078f90.entry.js.map

package/dist/lime-elements/p-fc078f90.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\nlimel-3d-hover-effect-glow {\n    border-radius: 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                    <limel-3d-hover-effect-glow />\n                </a>\n                {this.renderNotification()}\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":"6FAAA,MAAMA,EAAc,wkY,MCyBPC,EAAQ,M,yBAuJTC,KAAAC,aAAe,KACnB,GAAID,KAAKE,OAAQ,CACb,OAAOC,EAAA,QAAMC,MAAM,UAAUJ,KAAKE,O,GAIlCF,KAAAK,YAAc,K,MAClB,MAAMC,IAAkBC,EAAAP,KAAKQ,SAAK,MAAAD,SAAA,EAAAA,EAAI,IAAIE,WAAWC,OAErD,IAAKV,KAAKQ,OAASR,KAAKW,QAAS,CAC7B,OAAOR,EAAA,QAAMC,MAAM,SAAO,M,CAG9B,GAAIJ,KAAKQ,MAAO,CACZ,OACIL,EAAA,QACIC,MAAO,CACHI,MAAO,KACP,CAAC,MAAMF,KAAmB,OAG7BN,KAAKQ,M,GAMdR,KAAAY,aAAe,KACnB,GAAIZ,KAAKa,OAAQ,CACb,OAAOV,EAAA,QAAMC,MAAM,UAAUJ,KAAKa,O,GAIlCb,KAAAc,WAAa,KACjB,GAAId,KAAKe,KAAM,CACX,OAAOZ,EAAA,cAAYC,MAAM,OAAOY,KAAMhB,KAAKe,M,GAI3Cf,KAAAiB,eAAiB,K,QACrB,KAAIV,EAAAP,KAAKkB,YAAQ,MAAAX,SAAA,SAAAA,EAAEC,UAASW,EAAAnB,KAAKkB,YAAQ,MAAAC,SAAA,SAAAA,EAAEX,SAAU,EAAG,CACpD,OACIL,EAAA,2BACIC,MAAM,WACNF,OAAQF,KAAKkB,SAAShB,OACtBM,MAAOR,KAAKkB,SAASV,MACrBK,OAAQb,KAAKkB,SAASL,OACtBO,SAAUpB,KAAKkB,SAASE,SACxBC,wBACIrB,KAAKkB,SAASG,yB,GAO1BrB,KAAAsB,YAAc,KAClB,GAAItB,KAAKuB,MAAO,CACZ,OAAOpB,EAAA,QAAMC,MAAM,SAASJ,KAAKuB,M,GAIjCvB,KAAAwB,mBAAqB,KACzB,GAAIxB,KAAKyB,MAAO,CACZ,OAAOtB,EAAA,eAAaoB,MAAOvB,KAAKyB,O,GAIhCzB,KAAA0B,cAAgB,KACpB,GAAI1B,KAAKW,QAAS,CACd,OAAOR,EAAA,yBAAuBwB,cAAe,M,uDA3M7B,K,0DAkBL,M,kCAcD,M,4CAmCXC,oBACH,MAAMC,iBAAEA,EAAgBC,iBAAEA,GAAqBC,EAC3C/B,KAAKgC,MAEThC,KAAK6B,iBAAmBA,EACxB7B,KAAK8B,iBAAmBA,C,CAGrBG,S,wBACH,MAAMC,EACFlC,KAAKmC,WAAWnC,OAAI,MAAJA,YAAI,SAAJA,KAAME,QACtBF,KAAKQ,MACL,IACAR,KAAKmC,WAAWnC,OAAI,MAAJA,YAAI,SAAJA,KAAMa,QACtBb,KAAKmC,WAAWnC,OAAI,MAAJA,YAAI,SAAJA,KAAMuB,OACtB,KACAvB,KAAKmC,YAAW5B,EAAAP,OAAI,MAAJA,YAAI,SAAJA,KAAMkB,YAAQ,MAAAX,SAAA,SAAAA,EAAEL,QAChCF,KAAKmC,YAAWhB,EAAAnB,OAAI,MAAJA,YAAI,SAAJA,KAAMkB,YAAQ,MAAAC,SAAA,SAAAA,EAAEX,OAChCR,KAAKmC,YAAWC,EAAApC,OAAI,MAAJA,YAAI,SAAJA,KAAMkB,YAAQ,MAAAkB,SAAA,SAAAA,EAAEvB,QAChCb,KAAKmC,YAAWE,EAAArC,OAAI,MAAJA,YAAI,SAAJA,KAAMsC,QAAI,MAAAD,SAAA,SAAAA,EAAEE,OAEhC,MAAMD,GAAQtC,KAAKwC,UAAWC,EAAAzC,KAAKsC,QAAI,MAAAG,SAAA,SAAAA,EAAEC,KAAO,IAEhD,OACIvC,EAACwC,EAAI,CACDC,aAAc5C,KAAK6B,iBACnBgB,aAAc7C,KAAK8B,kBAEnB3B,EAAA,KACIoC,OAAOO,EAAA9C,KAAKsC,QAAI,MAAAQ,SAAA,SAAAA,EAAEP,MAClBG,KAAMJ,EACNS,QAAQC,EAAAhD,KAAKsC,QAAI,MAAAU,SAAA,SAAAA,EAAED,OACnBE,SAAS,IAAG,aACAf,EAAiB,gBACdlC,KAAKwC,SAAQ,YACjBxC,KAAKW,QAAU,OAAS,QAAO,YAChC,SACVP,MAAO,CACH,mBAAkB8C,EAAAlD,KAAKsC,QAAI,MAAAY,SAAA,SAAAA,EAAER,QAAS1C,KAAKwC,SAC3C,4BACMW,EAAAnD,KAAKkB,YAAQ,MAAAiC,SAAA,SAAAA,EAAE3C,UACjB4C,EAAApD,KAAKkB,YAAQ,MAAAkC,SAAA,SAAAA,EAAE5C,SAAU,IAGhCR,KAAKc,aACLd,KAAKiB,iBACNd,EAAA,OAAKC,MAAM,eACNJ,KAAKC,eACNE,EAAA,OAAKC,MAAM,oBACNJ,KAAKK,cACLL,KAAKY,gBAETZ,KAAK0B,iBAET1B,KAAKsB,cACNnB,EAAA,oCAEHH,KAAKwB,qB,CAKVW,WAAWkB,GACf,OAAQA,EAAY,GAAKA,EAAY,G"}