@limetech/lime-elements 38.45.0 → 38.46.0

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

@@ -0,0 +1,2 @@
+import{r as o,h as r,H as e}from"./p-bdfa539c.js";const t='@charset "UTF-8";limel-popover{display:flex;--popover-surface-width:min(calc(100vw - 4rem), 22rem)}button[slot=trigger]{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(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-sizing:border-box;display:flex;align-items:center;justify-content:center;color:rgb(var(--color-sky-default));border-radius:50%;box-shadow:0 0 0 1px rgb(var(--color-sky-lighter), 0.7);width:0.875rem;height:0.875rem;font-size:0.75rem}button[slot=trigger]:hover,button[slot=trigger]:focus,button[slot=trigger]:focus-visible{will-change:color, background-color, box-shadow, transform}button[slot=trigger]:hover,button[slot=trigger]:focus-visible{transform:translate3d(0, 0.01rem, 0);color:rgb(var(--color-sky-dark));background-color:var(--lime-elevated-surface-background-color)}button[slot=trigger]:hover{box-shadow:var(--button-shadow-hovered)}button[slot=trigger]: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)}button[slot=trigger]:hover,button[slot=trigger]:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button[slot=trigger]:focus{outline:none}button[slot=trigger]:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button[slot=trigger].is-open{color:rgb(var(--color-white));background-color:rgb(var(--color-sky-default));box-shadow:var(--button-shadow-inset)}';const s=class{constructor(r){o(this,r);this.openPopover=o=>{o.stopPropagation();this.isOpen=true};this.onPopoverClose=o=>{o.stopPropagation();this.isOpen=false};this.value=undefined;this.trigger="?";this.readMoreLink=undefined;this.openDirection="top-start";this.isOpen=false}render(){return r(e,null,r("limel-popover",{open:this.isOpen,onClose:this.onPopoverClose,openDirection:this.openDirection},r("button",{slot:"trigger",onClick:this.openPopover,class:{"is-open":this.isOpen}},this.trigger),r("limel-help-content",{value:this.value,readMoreLink:this.readMoreLink})))}};s.style=t;export{s as limel_help};
+//# sourceMappingURL=p-c3f85d29.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["helpCss","HelpComponent","this","openPopover","event","stopPropagation","isOpen","onPopoverClose","render","h","Host","open","onClose","openDirection","slot","onClick","class","trigger","value","readMoreLink"],"sources":["./src/components/help/help.scss?tag=limel-help&encapsulation=shadow","./src/components/help/help.tsx"],"sourcesContent":["@use '../../style/mixins';\n\nlimel-popover {\n    display: flex;\n    --popover-surface-width: min(calc(100vw - 4rem), 22rem);\n}\n\nbutton[slot='trigger'] {\n    all: unset;\n\n    @include mixins.is-flat-clickable(\n        $color--hovered: rgb(var(--color-sky-dark)),\n        $background-color: var(--lime-elevated-surface-background-color)\n    );\n    @include mixins.visualize-keyboard-focus;\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: rgb(var(--color-sky-default));\n    border-radius: 50%;\n    box-shadow: 0 0 0 1px rgb(var(--color-sky-lighter), 0.7);\n    width: 0.875rem;\n    height: 0.875rem;\n    font-size: 0.75rem;\n\n    &.is-open {\n        color: rgb(var(--color-white));\n        background-color: rgb(var(--color-sky-default));\n        box-shadow: var(--button-shadow-inset);\n    }\n}\n","import { Component, h, Prop, State, Host } from '@stencil/core';\nimport { OpenDirection } from '../menu/menu.types';\nimport { Help } from '../help/help.types';\nimport { Link } from '../../global/shared-types/link.types';\n\n/**\n * A good design is self-explanatory! However, sometimes concepts are\n * too complex to understand, no matter how well-designed a user interface is.\n * In such cases, contextual help can be a great way to provide users with\n * help precisely where and when users need it.\n *\n * In app interface design, providing contextual help emerges as a viable practice\n * for enhancing user experience and usability.\n * Contextual help serves as a quick-to-access guiding,\n * empowering users to more easily understand and navigate through\n * the intricacies of an application.\n *\n * Using this component designers empower users to grasp the functionality\n * of an app more effortlessly, minimizes the learning curve,\n * transforming complex features into accessible opportunities for exploration.\n *\n * @exampleComponent limel-example-help\n * @exampleComponent limel-example-read-more\n * @exampleComponent limel-example-open-direction\n * @exampleComponent limel-example-placement\n */\n@Component({\n    tag: 'limel-help',\n    shadow: true,\n    styleUrl: 'help.scss',\n})\nexport class HelpComponent implements Help {\n    /**\n     * {@inheritdoc Help.value}\n     */\n    @Prop()\n    public value: string;\n\n    /**\n     * {@inheritdoc Help.trigger}\n     */\n    @Prop()\n    public trigger: string = '?';\n\n    /**\n     * {@inheritdoc Help.readMoreLink}\n     */\n    @Prop()\n    public readMoreLink?: Link;\n\n    /**\n     * {@inheritdoc Help.openDirection}\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection = 'top-start';\n\n    @State()\n    private isOpen = false;\n\n    public render() {\n        return (\n            <Host>\n                <limel-popover\n                    open={this.isOpen}\n                    onClose={this.onPopoverClose}\n                    openDirection={this.openDirection}\n                >\n                    <button\n                        slot=\"trigger\"\n                        onClick={this.openPopover}\n                        class={{\n                            'is-open': this.isOpen,\n                        }}\n                    >\n                        {this.trigger}\n                    </button>\n                    <limel-help-content\n                        value={this.value}\n                        readMoreLink={this.readMoreLink}\n                    />\n                </limel-popover>\n            </Host>\n        );\n    }\n\n    private openPopover = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.isOpen = true;\n    };\n\n    private onPopoverClose = (event: CustomEvent) => {\n        event.stopPropagation();\n        this.isOpen = false;\n    };\n}\n"],"mappings":"kDAAA,MAAMA,EAAU,6yD,MC+BHC,EAAa,M,yBAsDdC,KAAAC,YAAeC,IACnBA,EAAMC,kBACNH,KAAKI,OAAS,IAAI,EAGdJ,KAAAK,eAAkBH,IACtBA,EAAMC,kBACNH,KAAKI,OAAS,KAAK,E,kCAlDE,I,+CAYa,Y,YAGrB,K,CAEVE,SACH,OACIC,EAACC,EAAI,KACDD,EAAA,iBACIE,KAAMT,KAAKI,OACXM,QAASV,KAAKK,eACdM,cAAeX,KAAKW,eAEpBJ,EAAA,UACIK,KAAK,UACLC,QAASb,KAAKC,YACda,MAAO,CACH,UAAWd,KAAKI,SAGnBJ,KAAKe,SAEVR,EAAA,sBACIS,MAAOhB,KAAKgB,MACZC,aAAcjB,KAAKiB,gB"}

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

@@ -0,0 +1,2 @@
+import{r as e,h as r,H as i}from"./p-bdfa539c.js";import{g as o}from"./p-d251f404.js";const a='@charset "UTF-8";:host(limel-header){display:flex;align-items:center;box-sizing:border-box;width:100%;background-color:var(--header-background-color, rgb(var(--contrast-300)));border-top-left-radius:var(--header-top-right-left-border-radius, 0.75rem);border-top-right-radius:var(--header-top-right-left-border-radius, 0.75rem);padding:0.25rem}.information{display:flex;flex-grow:1;align-items:center;min-width:0}.icon{--limel-icon-svg-margin:0.25rem;flex-shrink:0;color:var(--limel-header-icon-color, var(--header-icon-color, rgb(var(--contrast-1100))));background-color:var(--limel-header-icon-background-color, var(--header-icon-background-color, transparent));width:2.25rem;border-radius:0.56rem}.headings{min-width:0;margin-left:0.25rem}.heading,.subheading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0;padding:0}.heading{color:var(--header-heading-color, rgb(var(--contrast-1100)));font-size:1rem;font-weight:500}.subheading{color:var(--header-subheading-color, rgb(var(--contrast-900)));font-size:var(--limel-theme-default-small-font-size);font-weight:400}.subheading__supporting-text{color:var(--header-supporting-text-color, var(--header-subheading-color))}.subheading__supporting-text span{margin:0 0.125rem}slot[name=actions]{flex-shrink:0}:host(limel-header.is-narrow){padding:0.125rem 0.25rem}:host(limel-header.is-narrow) .icon{--limel-icon-svg-margin:0;width:1.25rem}:host(limel-header.is-narrow) .heading{font-size:0.9375rem}:host(limel-header.has-responsive-layout){display:grid;grid-template-columns:repeat(auto-fit, minmax(clamp(50%, var(--header-responsive-breakpoint, 22rem), 100%), 1fr))}:host(limel-header.has-responsive-layout) .headings{padding-right:0.5rem}:host(limel-header.has-responsive-layout) slot[name=actions]{display:flex;justify-content:flex-end}';const n=class{constructor(r){e(this,r);this.icon=undefined;this.heading=undefined;this.subheading=undefined;this.supportingText=undefined;this.subheadingDivider="·"}render(){return r(i,null,r("div",{class:"information"},this.renderIcon(),r("div",{class:"headings"},r("h1",{class:"heading",title:this.heading},this.heading),r("h2",{class:"subheading",title:this.subheading},this.subheading,this.renderSupportingText()))),r("slot",{name:"actions"},r("slot",null)))}renderIcon(){var e,i,a,n,t;const s=o(this.icon);if(!s){return}return r("limel-icon",{class:"icon",badge:true,name:s,style:{"--limel-header-icon-color":`${(i=(e=this.icon)===null||e===void 0?void 0:e.color)!==null&&i!==void 0?i:""}`,"--limel-header-icon-background-color":`${(n=(a=this.icon)===null||a===void 0?void 0:a.backgroundColor)!==null&&n!==void 0?n:""}`,title:`${(t=this.icon)===null||t===void 0?void 0:t.title}`}})}renderSupportingText(){if(!this.supportingText){return}return r("span",{class:"subheading__supporting-text"},this.renderSubheadingDivider(),this.supportingText)}renderSubheadingDivider(){if(!this.subheadingDivider){return}return r("span",null,this.subheadingDivider)}};n.style=a;export{n as limel_header};
+//# sourceMappingURL=p-d3d4fe88.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["headerCss","Header","render","h","Host","class","this","renderIcon","title","heading","subheading","renderSupportingText","name","icon","getIconName","badge","style","_b","_a","color","_d","_c","backgroundColor","_e","supportingText","renderSubheadingDivider","subheadingDivider"],"sources":["./src/components/header/header.scss?tag=limel-header&encapsulation=shadow","./src/components/header/header.tsx"],"sourcesContent":["@use '../../style/mixins.scss';\n@use '../../style/functions.scss';\n\n/**\n * @prop --header-background-color: Background color of header, defaults to `--contrast-300`.\n * @prop --header-heading-color: Color of heading text, defaults to `--contrast-1100`.\n * @prop --header-subheading-color: Color of subheading text, defaults to `--contrast-900`.\n * @prop --header-supporting-text-color: Color of supporting text in subheading, defaults to `--header-subheading-color`.\n * @prop --header-top-right-left-border-radius: Top-left and top-right border radius of header, defaults to `0.75rem`.\n * @prop --header-responsive-breakpoint: Defines the minimum allowed `width` of both information and actions areas in the header, defaults to `22rem`.\n */\n\n:host(limel-header) {\n    display: flex;\n    align-items: center;\n    box-sizing: border-box;\n    width: 100%;\n    background-color: var(--header-background-color, rgb(var(--contrast-300)));\n    border-top-left-radius: var(--header-top-right-left-border-radius, 0.75rem);\n    border-top-right-radius: var(\n        --header-top-right-left-border-radius,\n        0.75rem\n    );\n    padding: 0.25rem;\n}\n\n.information {\n    display: flex;\n    flex-grow: 1;\n    align-items: center;\n    min-width: 0;\n}\n\n.icon {\n    --limel-icon-svg-margin: 0.25rem;\n    flex-shrink: 0;\n    color: var(\n        --limel-header-icon-color,\n        var(--header-icon-color, rgb(var(--contrast-1100)))\n    );\n    background-color: var(\n        --limel-header-icon-background-color,\n        var(--header-icon-background-color, transparent)\n    );\n    width: 2.25rem;\n    border-radius: 0.56rem;\n}\n\n.headings {\n    min-width: 0;\n    margin-left: 0.25rem;\n}\n\n.heading,\n.subheading {\n    @include mixins.truncate-text;\n    margin: 0;\n    padding: 0;\n}\n\n.heading {\n    color: var(--header-heading-color, rgb(var(--contrast-1100)));\n    font-size: 1rem;\n    font-weight: 500;\n}\n\n.subheading {\n    color: var(--header-subheading-color, rgb(var(--contrast-900)));\n    font-size: var(--limel-theme-default-small-font-size);\n    font-weight: 400;\n}\n\n.subheading__supporting-text {\n    color: var(--header-supporting-text-color, var(--header-subheading-color));\n    span {\n        margin: 0 0.125rem;\n    }\n}\n\nslot[name='actions'] {\n    flex-shrink: 0;\n}\n\n:host(limel-header.is-narrow) {\n    padding: 0.125rem 0.25rem;\n\n    .icon {\n        --limel-icon-svg-margin: 0;\n        width: 1.25rem;\n    }\n\n    .heading {\n        font-size: functions.pxToRem(15);\n    }\n}\n\n:host(limel-header.has-responsive-layout) {\n    display: grid;\n    grid-template-columns: repeat(\n        auto-fit,\n        minmax(\n            clamp(\n                50%,\n                var(--header-responsive-breakpoint, functions.pxToRem(352)),\n                100%\n            ),\n            1fr\n        )\n    );\n    .headings {\n        padding-right: 0.5rem;\n    }\n    slot[name='actions'] {\n        display: flex;\n        justify-content: flex-end;\n    }\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\nimport { Icon } from '../../global/shared-types/icon.types';\nimport { getIconName } from '../icon/get-icon-props';\n\n/**\n * A header is the top most visual element in a component, page, card, or a view.\n *\n * ## Usage\n * A header is the first thing that clarifies a context for users.\n * Due to their positions in the UI hierarchy, headers are the most\n * prominent elements of a user interface; and because of that, they carry both\n * vital information and fundamental controls for the area of the interface\n * they represent.\n *\n * For example, when a header is placed on top of a card, it should quickly\n * explain the card to the user. When placed on top of a modal, it should easily\n * clarify what the modal is about. When displayed on top of a fullscreen view,\n * it should indicate where in the system users are, and what part of the app\n * they are looking at.\n *\n *\n * ## Layout\n * The vital information in a header is usually manifested in form of an icon,\n * and a heading. A subheading also could be added to provide supplementary\n * information. There is also a third place for displaying supplementary information\n * or \"supporting text\", which will be rendered as a part of the subheading.\n * Along with this information, headers can also include actions, controls, or\n * menus.\n *\n * :::important\n * Such actions or menus must affect the entire section of the interface\n * which the header is representing. For example, a _Delete_ button on a card\n * header must delete that entire card and its respective contents all together,\n * not for example a selected item which is visible in the content of that card.\n * :::\n *\n *\n * :::warning\n * Do not user background color on icons in the headers. It is much better and\n * much easier for the eye if your icon itself has a color.\n * Background colors behind icons make them look like \"call to action\" buttons\n * and take a lot of attention from users.\n * :::\n *\n * @exampleComponent limel-example-header\n * @exampleComponent limel-example-header-slot-actions\n * @exampleComponent limel-example-header-colors\n * @exampleComponent limel-example-header-responsive\n * @exampleComponent limel-example-header-narrow\n * @slot actions - Content (actions) to be put inside the far right surface of\n * the header\n * @slot [no name] - DEPRECATED. The `actions` slot used to be unnamed. This\n * behavior has been deprecated, and support will be dropped in a future\n * version. Please add `slot=\"actions\"` to your elements to ensure your code\n * will continue to work with future versions of Lime Elements.\n */\n@Component({\n    tag: 'limel-header',\n    shadow: true,\n    styleUrl: 'header.scss',\n})\nexport class Header {\n    /**\n     * Icon to display\n     */\n    @Prop()\n    public icon?: string | Icon;\n\n    /**\n     * Title to display\n     */\n    @Prop()\n    public heading?: string;\n\n    /**\n     * Subheading to display\n     */\n    @Prop()\n    public subheading?: string;\n\n    /**\n     * An extra string of text to display along with with the Subheading\n     */\n    @Prop()\n    public supportingText?: string;\n\n    /**\n     * The visual divider that separates the `subheading` and the `supportingText`.\n     * It must be a single character such as `-` or `,`.\n     */\n    @Prop()\n    public subheadingDivider?: string = '·';\n\n    public render() {\n        return (\n            <Host>\n                <div class=\"information\">\n                    {this.renderIcon()}\n                    <div class=\"headings\">\n                        <h1 class=\"heading\" title={this.heading}>\n                            {this.heading}\n                        </h1>\n                        <h2 class=\"subheading\" title={this.subheading}>\n                            {this.subheading}\n                            {this.renderSupportingText()}\n                        </h2>\n                    </div>\n                </div>\n                <slot name=\"actions\">\n                    <slot />\n                </slot>\n            </Host>\n        );\n    }\n\n    private renderIcon() {\n        const icon = getIconName(this.icon);\n\n        if (!icon) {\n            return;\n        }\n\n        return (\n            <limel-icon\n                class=\"icon\"\n                badge={true}\n                name={icon}\n                style={{\n                    '--limel-header-icon-color': `${(this.icon as Icon)?.color ?? ''}`,\n                    '--limel-header-icon-background-color': `${\n                        (this.icon as Icon)?.backgroundColor ?? ''\n                    }`,\n                    title: `${(this.icon as Icon)?.title}`,\n                }}\n            />\n        );\n    }\n\n    private renderSupportingText() {\n        if (!this.supportingText) {\n            return;\n        }\n\n        return (\n            <span class=\"subheading__supporting-text\">\n                {this.renderSubheadingDivider()}\n                {this.supportingText}\n            </span>\n        );\n    }\n\n    private renderSubheadingDivider() {\n        if (!this.subheadingDivider) {\n            return;\n        }\n\n        return <span>{this.subheadingDivider}</span>;\n    }\n}\n"],"mappings":"sFAAA,MAAMA,EAAY,8wD,MC6DLC,EAAM,M,mJA8BqB,G,CAE7BC,SACH,OACIC,EAACC,EAAI,KACDD,EAAA,OAAKE,MAAM,eACNC,KAAKC,aACNJ,EAAA,OAAKE,MAAM,YACPF,EAAA,MAAIE,MAAM,UAAUG,MAAOF,KAAKG,SAC3BH,KAAKG,SAEVN,EAAA,MAAIE,MAAM,aAAaG,MAAOF,KAAKI,YAC9BJ,KAAKI,WACLJ,KAAKK,0BAIlBR,EAAA,QAAMS,KAAK,WACPT,EAAA,c,CAMRI,a,cACJ,MAAMM,EAAOC,EAAYR,KAAKO,MAE9B,IAAKA,EAAM,CACP,M,CAGJ,OACIV,EAAA,cACIE,MAAM,OACNU,MAAO,KACPH,KAAMC,EACNG,MAAO,CACH,4BAA6B,IAAGC,GAAAC,EAACZ,KAAKO,QAAa,MAAAK,SAAA,SAAAA,EAAEC,SAAK,MAAAF,SAAA,EAAAA,EAAI,KAC9D,uCAAwC,IACpCG,GAAAC,EAACf,KAAKO,QAAa,MAAAQ,SAAA,SAAAA,EAAEC,mBAAe,MAAAF,SAAA,EAAAA,EAAI,KAE5CZ,MAAO,IAAGe,EAACjB,KAAKO,QAAa,MAAAU,SAAA,SAAAA,EAAEf,U,CAMvCG,uBACJ,IAAKL,KAAKkB,eAAgB,CACtB,M,CAGJ,OACIrB,EAAA,QAAME,MAAM,+BACPC,KAAKmB,0BACLnB,KAAKkB,e,CAKVC,0BACJ,IAAKnB,KAAKoB,kBAAmB,CACzB,M,CAGJ,OAAOvB,EAAA,YAAOG,KAAKoB,kB"}

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

@@ -0,0 +1,2 @@
+import{r as i,c as t,h as e,H as s}from"./p-bdfa539c.js";import{t as r}from"./p-df36e1ae.js";import{g as n,a,b as l,c as h}from"./p-89524e09.js";import"./p-d251f404.js";const o='@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(--limel-theme-text-secondary-on-background-color);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 d={id:null,text:null,removable:true};const p=class{constructor(e){i(this,e);this.change=t(this,"change",7);this.interact=t(this,"interact",7);this.dropZoneTip=()=>this.getTranslation("file.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===0?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(s,null,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({},d),{text:this.value.filename,id:this.value.id,icon:{name:n(this.value),title:a(this.value),color:l(this.value),backgroundColor:h(this.value)},href:this.value.href,menuItems:this.value.menuItems})]}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 r.get(i,this.language)}};p.style=o;export{p as limel_file};
+//# sourceMappingURL=p-d759e826.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["fileCss","DEFAULT_FILE_CHIP","id","text","removable","File","this","dropZoneTip","getTranslation","handleNewFiles","event","preventAndStop","change","emit","detail","handleChipSetChange","stopPropagation","file","length","handleChipInteract","interact","render","h","Host","disabled","readonly","value","accept","onFilesSelected","renderChipset","renderDragAndDropTip","class","role","label","getChipArray","filename","icon","name","getFileIcon","title","getFileExtensionTitle","color","getFileColor","backgroundColor","getFileBackgroundColor","href","menuItems","chipset","invalid","leadingIcon","language","onChange","onInteract","required","type","preventDefault","key","translate","get"],"sources":["./src/components/file/file.scss?tag=limel-file&encapsulation=shadow","./src/components/file/file.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n/**\n * @prop --icon-background-color: Background color of the icon. Defaults to `--contrast-400`.\n * @prop --icon-color: Color of the icon. Defaults to `--contrast-1100`.\n */\n\n:host(limel-file) {\n    position: relative;\n}\n\n.drag-and-drop-tip {\n    pointer-events: none;\n    position: absolute;\n    box-sizing: border-box;\n    margin: 0.25rem;\n    inset: 0;\n\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    flex-wrap: nowrap;\n\n    border-radius: 0.25rem;\n    border: 1px dashed rgb(var(--contrast-700));\n\n    padding: 0 0.5rem;\n\n    .invisible-label-mock {\n        flex-shrink: 0;\n        opacity: 0;\n        padding-right: 1rem;\n        padding-left: 1.5rem;\n    }\n\n    .tip {\n        font-size: smaller;\n        color: var(--limel-theme-text-secondary-on-background-color);\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;\n        @include mixins.truncate-text-on-line(2);\n    }\n}\n","import translate from '../../global/translations';\nimport { Chip } from '../chip-set/chip.types';\nimport { Languages } from '../date-picker/date.types';\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport {\n    getFileBackgroundColor,\n    getFileColor,\n    getFileExtensionTitle,\n    getFileIcon,\n} from '../../util/file-metadata';\nimport { FileInfo } from '../../global/shared-types/file.types';\n\nconst DEFAULT_FILE_CHIP: Chip = {\n    id: null,\n    text: null,\n    removable: true,\n};\n\n/**\n * This component lets end-users select a *single* file from their device\n * storage. Regardless of the user's device or operating system, this component\n * opens up a file picker dialog that allows the user to choose a file.\n *\n * ## Using correct labels\n *\n * This file picker can be used in different contexts. The component's distinct\n * visual design including the upload icon hints end-users that this is not a\n * normal input field like other fields in the form for example.\n *\n * :::important\n * you need to use a descriptive `label` that clarifies the\n * functionality of the file picker, and/or provides users with clear\n * instructions.\n *\n * Depending on the context, you may need to avoid labels such as:\n * - File\n * - Document\n *\n * and instead consider using labels like:\n * - Attach a file\n * - Upload a file\n * - Choose a document\n * - Choose a file\n *\n * and similar phrases...\n * :::\n *\n * @exampleComponent limel-example-file\n * @exampleComponent limel-example-file-custom-icon\n * @exampleComponent limel-example-file-menu-items\n * @exampleComponent limel-example-file-accepted-types\n * @exampleComponent limel-example-file-composite\n */\n@Component({\n    tag: 'limel-file',\n    shadow: true,\n    styleUrl: 'file.scss',\n})\nexport class File {\n    /**\n     * The selected file.\n     */\n    @Prop()\n    public value: FileInfo;\n\n    /**\n     * The input label.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Set to `true` to indicate that the field is required.\n     */\n    @Prop({ reflect: true })\n    public required: boolean = false;\n\n    /**\n     * True if the input should be disabled\n     */\n    @Prop({ reflect: true })\n    public disabled: boolean = false;\n\n    /**\n     * Set to `true` to disable adding and removing files, but allow interaction\n     * with any already existing file.\n     */\n    @Prop({ reflect: true })\n    public readonly: boolean = false;\n\n    /**\n     * Set to `true` to indicate that the current value of the chosen file is\n     * invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * The [accepted file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers)\n     */\n    @Prop({ reflect: true })\n    public accept: string = '*';\n\n    /**\n     * Defines the localisation for translations.\n     */\n    @Prop()\n    public language: Languages = 'en';\n\n    /**\n     * Dispatched when a file is selected/deselected\n     */\n    @Event()\n    private change: EventEmitter<FileInfo>;\n\n    /**\n     * Dispatched when clicking on a chip\n     */\n    @Event()\n    private interact: EventEmitter<number | string>;\n\n    public render() {\n        return (\n            <Host>\n                <limel-file-dropzone\n                    disabled={this.disabled || this.readonly || !!this.value}\n                    accept={this.accept}\n                    onFilesSelected={this.handleNewFiles}\n                >\n                    {this.renderChipset()}\n                </limel-file-dropzone>\n                {this.renderDragAndDropTip()}\n            </Host>\n        );\n    }\n\n    private renderDragAndDropTip() {\n        if (this.value || this.disabled || this.readonly) {\n            return;\n        }\n\n        return (\n            <div class=\"drag-and-drop-tip\">\n                <span class=\"invisible-label-mock\" role=\"presentation\">\n                    {this.label}\n                </span>\n                <span class=\"tip\">{this.dropZoneTip()}</span>\n            </div>\n        );\n    }\n\n    private dropZoneTip = (): string => {\n        return this.getTranslation('file.drag-and-drop-tips');\n    };\n\n    private handleNewFiles = (event: CustomEvent<FileInfo[]>) => {\n        this.preventAndStop(event);\n        this.change.emit(event.detail[0]);\n    };\n\n    private getChipArray(): Chip[] {\n        if (!this.value) {\n            return [];\n        }\n\n        return [\n            {\n                ...DEFAULT_FILE_CHIP,\n                text: this.value.filename,\n                id: this.value.id,\n                icon: {\n                    name: getFileIcon(this.value),\n                    title: getFileExtensionTitle(this.value),\n                    color: getFileColor(this.value),\n                    backgroundColor: getFileBackgroundColor(this.value),\n                },\n                href: this.value.href,\n                menuItems: this.value.menuItems,\n            },\n        ];\n    }\n\n    private renderChipset() {\n        const chipset = (\n            <limel-chip-set\n                disabled={this.disabled}\n                readonly={this.readonly}\n                invalid={this.invalid}\n                label={this.label}\n                leadingIcon=\"upload_to_cloud\"\n                language={this.language}\n                onChange={this.handleChipSetChange}\n                onInteract={this.handleChipInteract}\n                required={this.required}\n                type=\"input\"\n                value={this.getChipArray()}\n            />\n        );\n\n        if (this.value) {\n            return chipset;\n        }\n\n        return (\n            <limel-file-input\n                accept={this.accept}\n                disabled={this.disabled || this.readonly}\n            >\n                {chipset}\n            </limel-file-input>\n        );\n    }\n\n    private handleChipSetChange = (event: CustomEvent) => {\n        event.stopPropagation();\n        const file = event.detail.length === 0 ? event.detail[0] : null;\n        if (!file) {\n            this.change.emit(file);\n        }\n    };\n\n    private handleChipInteract = (event: CustomEvent<Chip>) => {\n        this.preventAndStop(event);\n        this.interact.emit(event.detail.id);\n    };\n\n    private preventAndStop(event: Event) {\n        event.stopPropagation();\n        event.preventDefault();\n    }\n\n    private getTranslation(key: string) {\n        return translate.get(key, this.language);\n    }\n}\n"],"mappings":"yKAAA,MAAMA,EAAU,0pBCYhB,MAAMC,EAA0B,CAC5BC,GAAI,KACJC,KAAM,KACNC,UAAW,M,MA2CFC,EAAI,M,2FA6FLC,KAAAC,YAAc,IACXD,KAAKE,eAAe,2BAGvBF,KAAAG,eAAkBC,IACtBJ,KAAKK,eAAeD,GACpBJ,KAAKM,OAAOC,KAAKH,EAAMI,OAAO,GAAG,EAwD7BR,KAAAS,oBAAuBL,IAC3BA,EAAMM,kBACN,MAAMC,EAAOP,EAAMI,OAAOI,SAAW,EAAIR,EAAMI,OAAO,GAAK,KAC3D,IAAKG,EAAM,CACPX,KAAKM,OAAOC,KAAKI,E,GAIjBX,KAAAa,mBAAsBT,IAC1BJ,KAAKK,eAAeD,GACpBJ,KAAKc,SAASP,KAAKH,EAAMI,OAAOZ,GAAG,E,wDApJZ,M,cAMA,M,cAOA,M,aAOV,M,YAMO,I,cAMK,I,CActBmB,SACH,OACIC,EAACC,EAAI,KACDD,EAAA,uBACIE,SAAUlB,KAAKkB,UAAYlB,KAAKmB,YAAcnB,KAAKoB,MACnDC,OAAQrB,KAAKqB,OACbC,gBAAiBtB,KAAKG,gBAErBH,KAAKuB,iBAETvB,KAAKwB,uB,CAKVA,uBACJ,GAAIxB,KAAKoB,OAASpB,KAAKkB,UAAYlB,KAAKmB,SAAU,CAC9C,M,CAGJ,OACIH,EAAA,OAAKS,MAAM,qBACPT,EAAA,QAAMS,MAAM,uBAAuBC,KAAK,gBACnC1B,KAAK2B,OAEVX,EAAA,QAAMS,MAAM,OAAOzB,KAAKC,e,CAc5B2B,eACJ,IAAK5B,KAAKoB,MAAO,CACb,MAAO,E,CAGX,MAAO,C,+BAEIzB,GAAiB,CACpBE,KAAMG,KAAKoB,MAAMS,SACjBjC,GAAII,KAAKoB,MAAMxB,GACfkC,KAAM,CACFC,KAAMC,EAAYhC,KAAKoB,OACvBa,MAAOC,EAAsBlC,KAAKoB,OAClCe,MAAOC,EAAapC,KAAKoB,OACzBiB,gBAAiBC,EAAuBtC,KAAKoB,QAEjDmB,KAAMvC,KAAKoB,MAAMmB,KACjBC,UAAWxC,KAAKoB,MAAMoB,Y,CAK1BjB,gBACJ,MAAMkB,EACFzB,EAAA,kBACIE,SAAUlB,KAAKkB,SACfC,SAAUnB,KAAKmB,SACfuB,QAAS1C,KAAK0C,QACdf,MAAO3B,KAAK2B,MACZgB,YAAY,kBACZC,SAAU5C,KAAK4C,SACfC,SAAU7C,KAAKS,oBACfqC,WAAY9C,KAAKa,mBACjBkC,SAAU/C,KAAK+C,SACfC,KAAK,QACL5B,MAAOpB,KAAK4B,iBAIpB,GAAI5B,KAAKoB,MAAO,CACZ,OAAOqB,C,CAGX,OACIzB,EAAA,oBACIK,OAAQrB,KAAKqB,OACbH,SAAUlB,KAAKkB,UAAYlB,KAAKmB,UAE/BsB,E,CAkBLpC,eAAeD,GACnBA,EAAMM,kBACNN,EAAM6C,gB,CAGF/C,eAAegD,GACnB,OAAOC,EAAUC,IAAIF,EAAKlD,KAAK4C,S"}

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

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as i,g as o,H as r}from"./p-bdfa539c.js";import{c as n}from"./p-ad52787a.js";import{m as a,r as s}from"./p-4e77c9a5.js";import{b as l,g as c,a as h}from"./p-d251f404.js";const d='@charset "UTF-8";limel-action-bar-item{transition:opacity 0.2s ease-in-out;position:relative;display:flex;align-items:center}limel-action-bar-item:not([is-visible]){opacity:0;pointer-events:none}button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:0.25rem;width:100%;min-width:var(--action-bar-item-height);max-width:var(--action-bar-item-max-width, 10rem);height:var(--action-bar-item-height);color:var(--limel-action-bar-item-text-color);border-radius:var(--action-bar-item-height);font-size:var(--limel-theme-default-font-size);padding:0 0.25rem}button:not([disabled]){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(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color)}button:not([disabled]):hover,button:not([disabled]):focus,button:not([disabled]):focus-visible{will-change:color, background-color, box-shadow, transform}button:not([disabled]):hover,button:not([disabled]):focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color)}button:not([disabled]):hover{box-shadow:var(--button-shadow-hovered)}button:not([disabled]):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);background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-inset-pressed)}button:not([disabled]):hover,button:not([disabled]):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button:not([disabled]):focus{outline:none}button:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button:has(.text){padding:0 0.5rem}button[disabled]{opacity:0.4}button.is-selected{color:var(--lime-primary-color, var(--limel-theme-primary-color)) !important}button.is-selected:not(:hover){box-shadow:var(--button-shadow-inset)}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.25rem}limel-icon{flex-shrink:0;width:calc(var(--action-bar-item-height) - 0.75rem);height:calc(var(--action-bar-item-height) - 0.75rem);color:var(--action-bar-item-icon-color, var(--limel-action-bar-item-text-color))}hr{all:unset;width:1px;height:1.5rem;border-radius:var(--action-bar-item-height);background-color:var(--limel-action-bar-item-text-color);opacity:0.2}@media (pointer: fine){hr{margin-right:0.5rem;margin-left:0.5rem}}limel-menu{--notification-badge-background-color:rgb(var(--contrast-600));--notification-badge-text-color:rgb(var(--contrast-1200))}limel-menu[open] button{box-shadow:var(--button-shadow-inset)}button[slot=trigger]{animation:fade-in ease-out 0.25s;font-size:0.75rem;font-weight:bold;transform:translate3d(0, 0, 0)}@keyframes fade-in{0%{scale:0.8;opacity:0}100%{scale:1;opacity:1}}';const b=class{constructor(i){t(this,i);this.select=e(this,"select",7);this.handleClick=t=>{t.stopPropagation();this.select.emit(this.item)};this.item=undefined;this.isVisible=true;this.selected=false;this.tooltipId=n()}componentWillLoad(){a(this.host)}componentDidLoad(){this.triggerIconColorWarning()}disconnectedCallback(){s(this.host)}render(){if(!this.isItem(this.item)&&this.item.separator){return i("hr",null)}return i("button",{id:this.tooltipId,type:"button",onClick:this.handleClick,disabled:this.isDisabled(),class:{"is-selected":this.isItem(this.item)&&this.item.selected}},this.renderIcon(),this.renderLabel(),this.renderTooltip())}isItem(t){return!("separator"in t)}isDisabled(){if(this.isItem(this.item)&&this.item.disabled){return true}if(!this.isVisible){return true}}renderIcon(){if(this.isItem(this.item)&&!this.item.icon){return}if("icon"in this.item){const t=c(this.item.icon);const e=h(this.item.icon,this.item.iconColor);const o=l(this.item.icon);return i("limel-icon",{name:t,"aria-label":o,"aria-hidden":o?null:"true",style:{"--action-bar-item-icon-color":`${e}`}})}}renderLabel(){if(!this.isItem(this.item)||this.item.iconOnly){return}return i("span",{class:"text"},this.item.text)}renderTooltip(){if(!this.isItem(this.item)){return}return i("limel-tooltip",{elementId:this.tooltipId,label:this.getTooltipLabel(this.item),helperLabel:this.item.commandText})}getTooltipLabel(t){const e=l(t.icon);const i=t.text;if(e&&i){return`${e} ${i}`}return i}triggerIconColorWarning(){if(this.isItem(this.item)&&this.item.iconColor){console.warn("The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.")}}get host(){return o(this)}};b.style=d;const m=class{constructor(o){t(this,o);this.select=e(this,"select",7);this.getOverflowTriggerContent=()=>{if(this.overFlowIcon){const{color:t,name:e,title:o}=this.overFlowIcon;return i("limel-icon",{style:{color:t},name:e,"aria-label":o})}return`+${this.numberOfMenuItems}`};this.handleSelect=t=>{t.stopPropagation();this.select.emit(t.detail)};this.items=undefined;this.openDirection="bottom-end";this.overFlowIcon=undefined}render(){return i(r,null,i("limel-menu",{openDirection:this.openDirection,items:this.items,onSelect:this.handleSelect},i("button",{slot:"trigger"},this.getOverflowTriggerContent())))}get numberOfMenuItems(){return this.items.filter((t=>this.isMenuItem(t))).length}isMenuItem(t){return!("separator"in t)}};export{b as limel_action_bar_item,m as limel_action_bar_overflow_menu};
+//# sourceMappingURL=p-f3180d48.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["actionBarItemCss","ActionBarButton","constructor","hostRef","this","handleClick","event","stopPropagation","select","emit","item","tooltipId","createRandomString","componentWillLoad","makeEnterClickable","host","componentDidLoad","triggerIconColorWarning","disconnectedCallback","removeEnterClickable","render","isItem","separator","h","id","type","onClick","disabled","isDisabled","class","selected","renderIcon","renderLabel","renderTooltip","isVisible","icon","name","getIconName","color","getIconColor","iconColor","title","getIconTitle","style","iconOnly","text","elementId","label","getTooltipLabel","helperLabel","commandText","iconTitle","tooltipLabel","console","warn","ActionBarOverflowMenu","getOverflowTriggerContent","overFlowIcon","numberOfMenuItems","handleSelect","detail","Host","openDirection","items","onSelect","slot","filter","isMenuItem","length"],"sources":["./src/components/action-bar/action-bar-item/action-bar-item.scss?tag=limel-action-bar-item","./src/components/action-bar/action-bar-item/action-bar-item.tsx","./src/components/action-bar/action-bar-item/action-bar-overflow-menu.tsx"],"sourcesContent":["@use '../../../style/mixins';\n@use '../../../style/functions';\n\nlimel-action-bar-item {\n    transition: opacity 0.2s ease-in-out;\n    position: relative;\n    display: flex;\n    align-items: center;\n\n    &:not([is-visible]) {\n        opacity: 0;\n        pointer-events: none;\n    }\n}\n\nbutton {\n    all: unset;\n\n    &:not([disabled]) {\n        @include mixins.is-flat-inset-clickable(\n            $color: var(--limel-action-bar-item-text-color),\n            $color--hovered: var(--limel-action-bar-item-text-color),\n            $background-color: var(--action-bar-background-color),\n            $background-color--hovered: var(--action-bar-background-color),\n            $background-color--inset: var(--action-bar-background-color)\n        );\n        @include mixins.visualize-keyboard-focus;\n    }\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.25rem;\n\n    width: 100%;\n    min-width: var(--action-bar-item-height);\n    max-width: var(--action-bar-item-max-width, 10rem);\n    height: var(--action-bar-item-height);\n    color: var(--limel-action-bar-item-text-color);\n\n    border-radius: var(--action-bar-item-height);\n    font-size: var(--limel-theme-default-font-size);\n    padding: 0 0.25rem;\n\n    &:has(.text) {\n        padding: 0 0.5rem;\n    }\n\n    &[disabled] {\n        opacity: 0.4;\n    }\n\n    &.is-selected {\n        &:not(:hover) {\n            box-shadow: var(--button-shadow-inset);\n        }\n        color: var(\n            --lime-primary-color,\n            var(--limel-theme-primary-color)\n        ) !important;\n    }\n}\n\n.text {\n    @include mixins.truncate-text();\n    padding: 0 0.25rem;\n}\n\nlimel-icon {\n    flex-shrink: 0;\n    width: calc(var(--action-bar-item-height) - 0.75rem);\n    height: calc(var(--action-bar-item-height) - 0.75rem);\n    color: var(\n        --action-bar-item-icon-color,\n        var(--limel-action-bar-item-text-color)\n    );\n}\n\nhr {\n    all: unset;\n    width: 1px;\n    height: 1.5rem;\n    border-radius: var(--action-bar-item-height);\n    background-color: var(--limel-action-bar-item-text-color);\n    opacity: 0.2;\n\n    @media (pointer: fine) {\n        margin-right: 0.5rem;\n        margin-left: 0.5rem;\n    }\n}\n\n// 👇 Overflow menu\n\nlimel-menu {\n    --notification-badge-background-color: rgb(var(--contrast-600));\n    --notification-badge-text-color: rgb(var(--contrast-1200));\n\n    &[open] {\n        button {\n            box-shadow: var(--button-shadow-inset);\n        }\n    }\n}\n\nbutton[slot='trigger'] {\n    animation: fade-in ease-out 0.25s;\n    font-size: 0.75rem;\n    font-weight: bold;\n    transform: translate3d(0, 0, 0);\n}\n\n@keyframes fade-in {\n    0% {\n        scale: 0.8;\n        opacity: 0;\n    }\n    100% {\n        scale: 1;\n        opacity: 1;\n    }\n}\n","import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n} from '@stencil/core';\nimport { ActionBarItem } from '../../action-bar/action-bar.types';\nimport { ListSeparator } from '../../list-item/list-item.types';\nimport { createRandomString } from '../../../util/random-string';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../../util/make-enter-clickable';\nimport {\n    getIconColor,\n    getIconName,\n    getIconTitle,\n} from '../../icon/get-icon-props';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-action-bar-item',\n    shadow: false,\n    styleUrl: 'action-bar-item.scss',\n})\nexport class ActionBarButton {\n    /**\n     * Item that is placed in the action bar.\n     */\n    @Prop()\n    public item!: ActionBarItem | ListSeparator;\n\n    /**\n     * Fired when a action bar item has been clicked.\n     * @public\n     */\n    @Event()\n    public select: EventEmitter<ActionBarItem | ListSeparator>;\n\n    /**\n     * When the item is displayed in the available width,\n     * this will be `false`.\n     */\n    @Prop({ reflect: true })\n    public isVisible: boolean = true;\n\n    /**\n     * When the item is selected, this will be `true`.\n     */\n    @Prop({ reflect: true })\n    public selected: boolean = false;\n\n    @Element()\n    private readonly host: HTMLLimelActionBarItemElement;\n\n    /**\n     * Used to attach the right tooltip to the right button\n     */\n    private readonly tooltipId: string;\n\n    constructor() {\n        this.tooltipId = createRandomString();\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public componentDidLoad() {\n        this.triggerIconColorWarning();\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public render() {\n        if (!this.isItem(this.item) && this.item.separator) {\n            return <hr />;\n        }\n\n        return (\n            <button\n                id={this.tooltipId}\n                type=\"button\"\n                onClick={this.handleClick}\n                disabled={this.isDisabled()}\n                class={{\n                    'is-selected': this.isItem(this.item) && this.item.selected,\n                }}\n            >\n                {this.renderIcon()}\n                {this.renderLabel()}\n                {this.renderTooltip()}\n            </button>\n        );\n    }\n\n    private readonly handleClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.select.emit(this.item);\n    };\n\n    private isItem(item: ActionBarItem | ListSeparator): item is ActionBarItem {\n        return !('separator' in item);\n    }\n\n    private isDisabled() {\n        if (this.isItem(this.item) && this.item.disabled) {\n            return true;\n        }\n\n        if (!this.isVisible) {\n            return true;\n        }\n    }\n\n    private renderIcon() {\n        if (this.isItem(this.item) && !this.item.icon) {\n            return;\n        }\n\n        if ('icon' in this.item) {\n            const name = getIconName(this.item.icon);\n\n            const color = getIconColor(this.item.icon, this.item.iconColor);\n            const title = getIconTitle(this.item.icon);\n\n            return (\n                <limel-icon\n                    name={name}\n                    aria-label={title}\n                    aria-hidden={title ? null : 'true'}\n                    style={{\n                        '--action-bar-item-icon-color': `${color}`,\n                    }}\n                />\n            );\n        }\n    }\n\n    private renderLabel() {\n        if (!this.isItem(this.item) || this.item.iconOnly) {\n            return;\n        }\n\n        return <span class=\"text\">{this.item.text}</span>;\n    }\n\n    private renderTooltip() {\n        if (!this.isItem(this.item)) {\n            return;\n        }\n\n        return (\n            <limel-tooltip\n                elementId={this.tooltipId}\n                label={this.getTooltipLabel(this.item)}\n                helperLabel={this.item.commandText}\n            />\n        );\n    }\n\n    private getTooltipLabel(item: ActionBarItem): string {\n        const iconTitle = getIconTitle(item.icon);\n        const tooltipLabel = item.text;\n\n        if (iconTitle && tooltipLabel) {\n            return `${iconTitle} ${tooltipLabel}`;\n        }\n\n        return tooltipLabel;\n    }\n\n    private triggerIconColorWarning() {\n        if (this.isItem(this.item) && this.item.iconColor) {\n            console.warn(\n                \"The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.\"\n            );\n        }\n    }\n}\n","import { Component, Prop, h, Event, EventEmitter, Host } from '@stencil/core';\nimport { ActionBarItem } from '../../action-bar/action-bar.types';\nimport { ListSeparator } from '../../list-item/list-item.types';\nimport { MenuItem, OpenDirection } from '../../menu/menu.types';\nimport { LimelMenuCustomEvent } from '../../../components';\nimport { Icon } from '../../../global/shared-types/icon.types';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-action-bar-overflow-menu',\n    shadow: false,\n})\nexport class ActionBarOverflowMenu {\n    /**\n     * List of the items that should be rendered in the overflow menu.\n     */\n    @Prop()\n    public items: Array<MenuItem | ListSeparator>;\n\n    /**\n     * Defines the location that the content of the overflow menu\n     * appears, in relation to its trigger.\n     * It defaults to `bottom-end`, since in normal scenarios\n     * (for example when the action bar is not floating at the bottom of the screen)\n     * this menu is the right-most item in the user interface of the component.\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection = 'bottom-end';\n\n    /**\n     * Icon to display in the overflow menu trigger.\n     * If not provided, the number of items in the overflow menu will be displayed.\n     */\n    @Prop()\n    public overFlowIcon?: Icon;\n\n    /**\n     * Fired when an item in the action bar overflow menu has been clicked.\n     * @public\n     */\n    @Event()\n    public select: EventEmitter<ActionBarItem>;\n\n    public render() {\n        return (\n            <Host>\n                <limel-menu\n                    openDirection={this.openDirection}\n                    items={this.items}\n                    onSelect={this.handleSelect}\n                >\n                    <button slot=\"trigger\">\n                        {this.getOverflowTriggerContent()}\n                    </button>\n                </limel-menu>\n            </Host>\n        );\n    }\n\n    private getOverflowTriggerContent = () => {\n        if (this.overFlowIcon) {\n            const { color, name, title } = this.overFlowIcon;\n\n            return (\n                <limel-icon\n                    style={{\n                        color: color,\n                    }}\n                    name={name}\n                    aria-label={title}\n                />\n            );\n        }\n\n        return `+${this.numberOfMenuItems}`;\n    };\n\n    private handleSelect = (event: LimelMenuCustomEvent<MenuItem>) => {\n        event.stopPropagation();\n        this.select.emit(event.detail);\n    };\n\n    private get numberOfMenuItems() {\n        return this.items.filter((item) => this.isMenuItem(item)).length;\n    }\n\n    private isMenuItem(item: MenuItem | ListSeparator): item is MenuItem {\n        return !('separator' in item);\n    }\n}\n"],"mappings":"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"}

package/dist/types/components/action-bar/action-bar-item/action-bar-overflow-menu.d.ts

@@ -29,7 +29,7 @@ export declare class ActionBarOverflowMenu {
    * @public
    */
   select: EventEmitter<ActionBarItem>;
-  render(): any[];
+  render(): any;
   private getOverflowTriggerContent;
   private handleSelect;
   private get numberOfMenuItems();

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

@@ -49,6 +49,6 @@ export declare class Callout {
    * Will translate the default headings for supported languages.
    */
   language: Languages;
-  render(): any[];
+  render(): any;
 }
 //# sourceMappingURL=callout.d.ts.map

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

@@ -15,6 +15,7 @@ import { ActionBarItem } from '../action-bar/action-bar.types';
  * @exampleComponent limel-example-card-orientation
  * @exampleComponent limel-example-card-slot
  * @exampleComponent limel-example-card-styling
+ * @exampleComponent limel-example-card-scrollable-shadow
  */
 export declare class Card {
   /**
@@ -60,10 +61,18 @@ export declare class Card {
    * Fired when a action bar item has been clicked.
    */
   actionSelected: EventEmitter<ActionBarItem>;
+  private canScrollUp;
+  private canScrollDown;
+  private markdownElement?;
   private host;
   private handleMouseEnter;
   private handleMouseLeave;
+  private markdownResizeObserver?;
   componentWillLoad(): void;
+  disconnectedCallback(): void;
+  componentDidLoad(): void;
+  private setMarkdownElement;
+  private checkIfScrollable;
   render(): any;
   private renderImage;
   private renderHeader;

package/dist/types/components/chip-set/chip-set.d.ts

@@ -188,7 +188,7 @@ export declare class ChipSet {
   componentDidLoad(): void;
   componentDidUpdate(): void;
   disconnectedCallback(): void;
-  render(): any[];
+  render(): any;
   private getContentProps;
   private renderContent;
   private readonly getValue;

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

@@ -78,7 +78,7 @@ export declare class File {
    * Dispatched when clicking on a chip
    */
   private interact;
-  render(): any[];
+  render(): any;
   private renderDragAndDropTip;
   private dropZoneTip;
   private handleNewFiles;

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

@@ -73,7 +73,7 @@ export declare class Header {
    * It must be a single character such as `-` or `,`.
    */
   subheadingDivider?: string;
-  render(): any[];
+  render(): any;
   private renderIcon;
   private renderSupportingText;
   private renderSubheadingDivider;

package/dist/types/components/help/help-content.d.ts

@@ -11,7 +11,7 @@ import { Link } from '../../global/shared-types/link.types';
 export declare class HelpContent {
   value: string;
   readMoreLink?: Link;
-  render(): any[];
+  render(): any;
   private renderReadMoreLink;
 }
 //# sourceMappingURL=help-content.d.ts.map

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

@@ -40,7 +40,7 @@ export declare class HelpComponent implements Help {
    */
   openDirection: OpenDirection;
   private isOpen;
-  render(): any[];
+  render(): any;
   private openPopover;
   private onPopoverClose;
 }

package/dist/types/components/input-field/input-field.d.ts

@@ -164,7 +164,7 @@ export declare class InputField {
   componentDidLoad(): void;
   disconnectedCallback(): void;
   componentDidUpdate(): void;
-  render(): any[];
+  render(): any;
   protected valueWatcher(newValue: string): void;
   protected completionsWatcher(): void;
   private initialize;

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

@@ -52,7 +52,7 @@ export declare class Markdown {
   private imageIntersectionObserver;
   componentDidLoad(): Promise<void>;
   disconnectedCallback(): void;
-  render(): any[];
+  render(): any;
   private setupImageIntersectionObserver;
   private cleanupImageIntersectionObserver;
 }

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

@@ -13,7 +13,7 @@ export declare class Spinner {
    * Gives the spinner the shape of Lime Technologies' logo
    */
   limeBranded: boolean;
-  render(): any[];
+  render(): any;
   private renderSpinner;
 }
 //# sourceMappingURL=spinner.d.ts.map

package/dist/types/components.d.ts

@@ -417,6 +417,7 @@ export namespace Components {
      * @exampleComponent limel-example-card-orientation
      * @exampleComponent limel-example-card-slot
      * @exampleComponent limel-example-card-styling
+     * @exampleComponent limel-example-card-scrollable-shadow
      */
     interface LimelCard {
         /**
@@ -3839,6 +3840,7 @@ declare global {
      * @exampleComponent limel-example-card-orientation
      * @exampleComponent limel-example-card-slot
      * @exampleComponent limel-example-card-styling
+     * @exampleComponent limel-example-card-scrollable-shadow
      */
     interface HTMLLimelCardElement extends Components.LimelCard, HTMLStencilElement {
     }
@@ -5667,6 +5669,7 @@ declare namespace LocalJSX {
      * @exampleComponent limel-example-card-orientation
      * @exampleComponent limel-example-card-slot
      * @exampleComponent limel-example-card-styling
+     * @exampleComponent limel-example-card-scrollable-shadow
      */
     interface LimelCard {
         /**
@@ -9259,6 +9262,7 @@ declare module "@stencil/core" {
              * @exampleComponent limel-example-card-orientation
              * @exampleComponent limel-example-card-slot
              * @exampleComponent limel-example-card-styling
+             * @exampleComponent limel-example-card-scrollable-shadow
              */
             "limel-card": LocalJSX.LimelCard & JSXBase.HTMLAttributes<HTMLLimelCardElement>;
             /**

package/package.json

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

package/dist/lime-elements/p-26c56b38.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["chipCss","Chip","this","renderAsButton","h","id","identifier","class","role","disabled","readonly","loading","onKeyDown","handleDeleteKeyDown","renderSpinner","renderPicture","renderLabel","renderBadge","renderProgressBar","renderRemoveButton","renderActionsMenu","renderAsLink","rel","getRel","_a","link","target","_b","href","title","tabindex","text","filterClickWhenDisabled","e","preventDefault","handleRemoveClick","event","stopPropagation","remove","emit","removable","keys","DELETE","BACKSPACE","includes","key","removeChipLabel","getTranslation","actionMenuLabel","translate","get","language","handleActionMenuSelect","menuItem","detail","value","menuItemSelected","handleActionMenuCancel","crypto","randomUUID","componentWillLoad","makeEnterClickable","host","disconnectedCallback","removeEnterClickable","render","Host","onClick","icon","getIconName","image","isEmpty","src","alt","badge","name","style","color","backgroundColor","label","menuItems","length","svgData","tabIndex","innerHTML","getMenuItems","items","onSelect","openDirection","onCancel","slot","separator","indeterminate","progress","currentPercentage","handleKeyboardEvent","textValue","isArrowLeft","ARROW_LEFT","isArrowRight","ARROW_RIGHT","isEnter","ENTER","isDelete","isBackspace","isEscape","ESCAPE","handleLeft","handleRight","handleEnter","handleDelete","handleBackspace","handleEscape","inputChipIndexSelected","emitInteraction","removeChip","repeat","chipSetCss","ChipSet","constructor","hostRef","handleKeyDown","renderContent","type","renderInputChips","map","renderChip","getValue","chip","Object","assign","selected","selectedChipIds","floatLabelAbove","editMode","hasHelperText","helperText","undefined","renderHelperLine","maxItems","maxLength","invalid","isInvalid","catchInputChipClicks","Lime","isSelectableChip","updateSelectedChipIds","change","handleRemoveChip","newValue","filter","clearAllChipsLabel","labelId","createRandomString","bind","renderInputChip","isFull","handleTextFieldFocus","handleInputBlur","handleTextInput","inputFieldOnChange","inputHidden","handleDeleteAllIconClick","renderDelimiter","connectedCallback","initialize","async","emptyInput","shadowRoot","querySelector","focus","startEdit","syncEmptyInput","componentDidLoad","triggerIconColorWarning","mdcTextField","MDCTextField","componentDidUpdate","input","destroy","classes","leadingIcon","clearAllButton","required","hasValue","hasLeadingIcon","hasFloatingLabel","getContentProps","handleChangeChips","oldValue","isEqual","inputType","hidden","onBlur","onFocus","onInput","onChange","placeholder","searchLabel","autocomplete","renderLeadingIcon","renderClearAllChipsButton","blurred","emptyInputOnBlur","setTimeout","stopEdit","trim","interact","chipType","chipProps","getChipProps","index","chips","isLastChip","onRemove","getHref","getTarget","updateChoiceTypeSelectedIds","updateFilterTypeSelectedIds","isChipSelected","removeChipIdFromSelectedChipIds","addChipIdToSelectedChipIds","chipId","delimiter","iconFillColor","iconBackgroundColor","iconTitle","console","warn"],"sources":["./src/components/chip/chip.scss?tag=limel-chip&encapsulation=shadow","./src/components/chip/chip.tsx","./src/components/chip-set/chip-set-input-helpers.ts","./src/components/chip-set/chip-set.scss?tag=limel-chip-set&encapsulation=shadow","./src/components/chip-set/chip-set.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n/**\n* @prop --chip-max-width: Maximum width of the chip. Defaults to `10rem`. Keep in mind that the chips should not appear too big.\n* @prop --chip-progress-color: Color of the progress bar. Defaults to `rgb(var(--contrast-700))`.\n* @prop --chip-readonly-border-color: Color of the border in readonly state. Defaults to `rgb(var(--contrast-800), 0.5)`.\n*/\n\n:host(limel-chip) {\n    --limel-chip-height: var(--limel-chip-size, 1.75rem);\n    --limel-chip-gap: 0.5rem;\n    isolation: isolate;\n    display: inline-flex;\n    align-items: center;\n    min-width: 0;\n}\n\n:host(limel-chip[size='small']) {\n    --limel-chip-height: 1.5rem;\n    --limel-chip-gap: 0.25rem;\n}\n\n* {\n    box-sizing: border-box;\n}\n\n.chip {\n    all: unset;\n    position: relative;\n\n    min-width: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.25rem;\n\n    max-width: min(var(--chip-max-width, 100%), 25rem);\n    height: var(--limel-chip-height);\n\n    border-radius: var(--limel-chip-height);\n    font-size: clamp(\n        0.8125rem /* 13px */,\n        calc(var(--limel-chip-height) - 0.875rem /* 14px */),\n        1rem\n    );\n    padding: 0 0.125rem;\n\n    &:has(limel-icon),\n    &:has(img) {\n        .text {\n            padding-left: 0;\n        }\n    }\n\n    &:not([disabled]) {\n        @include mixins.visualize-keyboard-focus;\n        @include mixins.is-elevated-inset-clickable;\n    }\n\n    &:has(limel-badge) {\n        padding-right: 0.375rem;\n\n        .text {\n            padding-right: 0;\n        }\n    }\n\n    &:has(+ .remove-button:hover) {\n        box-shadow: var(--shadow-depth-8-error);\n    }\n\n    &:has(+ limel-menu),\n    &:has(+ .trailing-button) {\n        padding-right: calc(var(--limel-chip-height) + 0.125rem);\n\n        .text {\n            padding-right: 0;\n        }\n    }\n}\n\n:host(limel-chip[disabled]:not([disabled='false'])) {\n    .chip {\n        // Similar to `limel-button[disabled]`\n        color: rgba(var(--contrast-1600), 0.37);\n        background-color: rgba(var(--contrast-1600), 0.1);\n        box-shadow: none;\n    }\n}\n\n:host(limel-chip[readonly]:not([readonly='false'])) {\n    .chip {\n        box-shadow: 0 0 0 1px\n            var(--chip-readonly-border-color, rgb(var(--contrast-800), 0.5));\n    }\n}\n\n:host(limel-chip[selected]:not([selected='false'])) {\n    .chip {\n        box-shadow: var(--button-shadow-inset);\n\n        &:focus-visible {\n            box-shadow:\n                var(--button-shadow-inset), var(--shadow-depth-8-focused);\n        }\n\n        &:active {\n            box-shadow: var(--button-shadow-inset-pressed);\n        }\n    }\n    .text {\n        color: var(--lime-primary-color, var(--limel-theme-primary-color));\n    }\n}\n\n@include mixins.visualize-aria-expanded('.chip');\n\n:host(limel-chip[type='filter']) {\n    .chip {\n        border-top-left-radius: 0.5rem;\n        border-bottom-left-radius: 0.5rem;\n\n        &:after {\n            content: '';\n            transition:\n                background-color 0.4s ease 0.2s,\n                box-shadow 0.6s ease 0.2s;\n            box-sizing: border-box;\n            position: absolute;\n            bottom: 0.125rem;\n            left: 0.125rem;\n            width: 0.5rem;\n            height: 0.5rem;\n            border-radius: 50%;\n            background-color: rgb(var(--contrast-800), 0.8);\n            box-shadow: 0 0 0 1px rgb(var(--color-white)) inset;\n        }\n    }\n}\n\n:host(limel-chip[type='filter'][selected]) {\n    .chip {\n        &:after {\n            background-color: rgb(var(--color-green-default));\n            box-shadow:\n                0 0 0.375rem 0 rgb(var(--color-green-light)),\n                0 0 0 1px rgb(var(--color-white)) inset;\n        }\n    }\n}\n\n:host(limel-chip[invalid]) {\n    .chip {\n        @include mixins.add-chessboard-background();\n        background-color: rgb(var(--color-red-default));\n    }\n\n    .text {\n        color: rgb(var(--color-white));\n    }\n}\n\nimg,\nlimel-icon {\n    flex-shrink: 0;\n    width: calc(var(--limel-chip-height) - 0.25rem);\n    height: calc(var(--limel-chip-height) - 0.25rem);\n}\n\nimg {\n    object-fit: cover;\n    border-radius: 50%;\n}\n\nlimel-icon {\n    padding: 0.0625rem;\n}\n\nlimel-badge {\n    pointer-events: none;\n}\n\n.text {\n    @include mixins.truncate-text;\n    line-height: 1.2;\n    padding: 0 0.5rem;\n    font-size: var(--limel-theme-default-font-size);\n}\n\n.trailing-button {\n    all: unset;\n    @include mixins.is-flat-clickable();\n\n    z-index: 1;\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    margin-left: calc(var(--limel-chip-height) * -1 + 0.125rem);\n    margin-right: 0.125rem;\n    width: calc(var(--limel-chip-height) - 0.25rem);\n    height: calc(var(--limel-chip-height) - 0.25rem);\n\n    border-radius: 50%;\n\n    svg {\n        transition:\n            color 0.2s ease,\n            transform 0.2s ease;\n        width: 1.25rem;\n    }\n\n    &.remove-button:hover {\n        color: rgb(var(--color-red-dark));\n        svg {\n            transform: scale(0.8);\n        }\n    }\n}\n\nlimel-menu {\n    button[slot='trigger'] {\n        @include mixins.visualize-keyboard-focus;\n    }\n\n    &[open] {\n        button[slot='trigger'] {\n            box-shadow: var(--button-shadow-inset);\n        }\n    }\n}\n\n@import './partial-styles/_loading.scss';\n@import './partial-styles/_progress.scss';\n","import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n} from '@stencil/core';\nimport { Icon } from '../../global/shared-types/icon.types';\nimport { Languages } from '../date-picker/date.types';\nimport { Link } from '../../global/shared-types/link.types';\nimport { getRel } from '../../util/link-helper';\nimport { getIconName } from '../icon/get-icon-props';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport translate from '../../global/translations';\nimport { BACKSPACE, DELETE } from '../../util/keycodes';\nimport { ChipType, Chip as OldChipInterface } from '../chip-set/chip.types';\nimport { Image } from '../../global/shared-types/image.types';\nimport { isEmpty } from 'lodash-es';\n\nimport { ListSeparator } from '../list-item/list-item.types';\nimport { LimelMenuCustomEvent, MenuItem } from '../../components';\n\ninterface ChipInterface extends Omit<OldChipInterface, 'id' | 'badge'> {\n    /**\n     * Identifier for the chip. Must be unique.\n     */\n    identifier?: number | string;\n\n    /**\n     * The value of the badge.\n     */\n    badge?: string | number;\n}\n\n/**\n * Chips and buttons are both interactive elements in UI design,\n * but they serve different purposes and are used in different contexts.\n *\n * :::warning\n * Do not use the chip component carelessly, as an alternative for\n * [`limel-button`](#/component/limel-button/) in the UI design!\n *\n * **Buttons:**\n * Buttons are used to trigger actions. They are typically used to\n * submit forms, open dialogs, initiate a process, or perform any action\n * that changes the state of the application.\n * Buttons' labels usually contain action words, in other words, the labels is\n * a _verb in imperative mood_ such as \"Submit\" or \"Delete\".\n * Buttons are placed in areas where it's clear they will initiate\n * an action when clicked.\n *\n * **Chips:**\n * Chips however are elements which may look like buttons, but they are\n * representing choices, filters, or tags, in a small block\n * or clearly bundled into a group. Chips are rarely used alone in the\n * user interface.\n * They are often used in a so called \"chip-set\", or placed together in\n * a section of the UI, where the user can expect more than one chip to be present.\n *\n * For example, a chip may represent a filter in a filter bar, or a tag in a tag list,\n * or an item in a shopping list.\n * Clicking a chip can also trigger an action, for example toggling a filter ON or OFF,\n * or opening a page with all posts tagged with the tag represented by the chip,\n * or navigating to a page with more information about the item in the shopping list.\n * :::\n *\n * @exampleComponent limel-example-chip-button\n * @exampleComponent limel-example-chip-link\n * @exampleComponent limel-example-chip-icon-colors\n * @exampleComponent limel-example-chip-image\n * @exampleComponent limel-example-chip-badge\n * @exampleComponent limel-example-chip-filter\n * @exampleComponent limel-example-chip-removable\n * @exampleComponent limel-example-chip-menu\n * @exampleComponent limel-example-chip-loading\n * @exampleComponent limel-example-chip-progress\n * @exampleComponent limel-example-chip-size\n * @exampleComponent limel-example-chip-readonly-border\n * @exampleComponent limel-example-chip-aria-role\n */\n@Component({\n    tag: 'limel-chip',\n    shadow: { delegatesFocus: true },\n    styleUrl: 'chip.scss',\n})\nexport class Chip implements ChipInterface {\n    /**\n     * Defines the language for translations.\n     * Will translate the translatable strings on the components.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    /**\n     * Label displayed on the chip\n     */\n    @Prop({ reflect: true })\n    public text: string;\n\n    /**\n     * Icon of the chip.\n     */\n    @Prop()\n    public icon?: string | Icon;\n\n    /**\n     * A picture to be displayed instead of the icon on the chip.\n     */\n    @Prop()\n    public image?: Image;\n\n    /**\n     * If supplied, the chip will become a clickable link.\n     */\n    @Prop()\n    public link?: Omit<Link, 'text'>;\n\n    /**\n     * The value of the badge, displayed on the chip.\n     */\n    @Prop({ reflect: true })\n    public badge?: string | number;\n\n    /**\n     * Set to `true` to disable the chip.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Set to `true` to render the chip as a static UI element.\n     * Useful when the parent component has a `readonly` state.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to visualize the chip in a \"selected\" state.\n     * This is typically used when the chip is used in a chip-set\n     * along with other chips.\n     */\n    @Prop({ reflect: true })\n    public selected = false;\n\n    /**\n     * Set to `true` to visualize the chip in an \"invalid\" or \"error\" state.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * Set to `true` to render a remove button on the chip.\n     */\n    @Prop({ reflect: true })\n    public removable = false;\n\n    /**\n     * Set to `filter` to render the chip with a distinct style\n     * suitable for visualizing filters.\n     *\n     */\n    @Prop({ reflect: true })\n    public type?: ChipType = 'default';\n\n    /**\n     * Set to `true` to put the component in the `loading` state,\n     * and render an indeterminate progress indicator inside the chip.\n     * This does _not_ disable the interactivity of the chip!\n     */\n    @Prop({ reflect: true })\n    public loading? = false;\n\n    /**\n     * Reflects the current value of a progress bar on the chip,\n     * visualizing the percentage of an ongoing process.\n     * Must be a number between `0` and `100`.\n     */\n    @Prop({ reflect: true })\n    public progress?: number;\n\n    /**\n     * Identifier for the chip. Must be unique.\n     */\n    @Prop({ reflect: true })\n    public identifier?: number | string = crypto.randomUUID();\n\n    /**\n     * Defines the size of the chip.\n     */\n    @Prop({ reflect: true })\n    public size: 'small' | 'default' = 'default';\n\n    /**\n     * When provided, the chip will render an ellipsis menu with the supplied items.\n     * Also, this will hide the \"remove button\" when `removable={true}`, as\n     * the remove button will automatically become the last item in the menu.\n     */\n    @Prop()\n    public menuItems?: Array<MenuItem | ListSeparator> = [];\n\n    /**\n     * Fired when clicking on the remove button of a `removable` chip.\n     * The value of `identifier` is emitted as the event detail.\n     */\n    @Event()\n    public remove: EventEmitter<number | string>;\n\n    /**\n     * Emitted when a menu item is selected from the actions menu.\n     */\n    @Event()\n    public menuItemSelected: EventEmitter<MenuItem>;\n\n    @Element()\n    private host: HTMLLimelChipElement;\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public render() {\n        return (\n            <Host onClick={this.filterClickWhenDisabled}>\n                {this.link ? this.renderAsLink() : this.renderAsButton()}\n            </Host>\n        );\n    }\n\n    private renderAsButton = () => {\n        return [\n            <button\n                id={'chip-' + this.identifier}\n                class=\"chip\"\n                role=\"button\"\n                disabled={this.disabled || this.readonly}\n                aria-busy={this.loading ? 'true' : 'false'}\n                aria-live=\"polite\"\n                onKeyDown={this.handleDeleteKeyDown}\n            >\n                {this.renderSpinner()}\n                {this.renderPicture()}\n                {this.renderLabel()}\n                {this.renderBadge()}\n                {this.renderProgressBar()}\n            </button>,\n            this.renderRemoveButton(),\n            this.renderActionsMenu(),\n        ];\n    };\n\n    private renderAsLink = () => {\n        const rel = getRel(this.link?.target, this.link?.rel);\n\n        return [\n            <a\n                id={'chip-' + this.identifier}\n                class=\"chip\"\n                href={this.link.href}\n                title={this.link.title}\n                target={this.link.target}\n                rel={rel}\n                aria-disabled={this.disabled || this.readonly}\n                tabindex={this.disabled || this.readonly ? -1 : 0}\n                onKeyDown={this.handleDeleteKeyDown}\n            >\n                {this.renderSpinner()}\n                {this.renderPicture()}\n                {this.renderLabel()}\n                {this.renderBadge()}\n                {this.renderProgressBar()}\n            </a>,\n            this.renderRemoveButton(),\n            this.renderActionsMenu(),\n        ];\n    };\n\n    private renderLabel = () => {\n        return <span class=\"text\">{this.text}</span>;\n    };\n\n    private renderPicture() {\n        const icon = getIconName(this.icon);\n\n        if (!icon && !this.image) {\n            return;\n        }\n\n        if (!isEmpty(this.image)) {\n            return (\n                <img src={this.image.src} alt={this.image.alt} loading=\"lazy\" />\n            );\n        }\n\n        return (\n            <limel-icon\n                badge={true}\n                name={icon}\n                style={{\n                    color: `${(this.icon as Icon)?.color}`,\n                    'background-color': `${\n                        (this.icon as Icon)?.backgroundColor\n                    }`,\n                }}\n            />\n        );\n    }\n\n    private renderBadge() {\n        if (!this.badge) {\n            return;\n        }\n\n        return <limel-badge label={this.badge} />;\n    }\n\n    private renderRemoveButton() {\n        if (\n            !this.removable ||\n            this.readonly ||\n            this.disabled ||\n            !!this.menuItems?.length\n        ) {\n            return;\n        }\n\n        const svgData =\n            '<svg viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"m8 8 16 16M24 8 8 24\"/></svg>';\n\n        return (\n            <button\n                class=\"trailing-button remove-button\"\n                tabIndex={-1}\n                aria-label={this.removeChipLabel()}\n                aria-controls={'chip-' + this.identifier}\n                innerHTML={svgData}\n                onClick={this.handleRemoveClick}\n            />\n        );\n    }\n\n    private renderActionsMenu() {\n        if (!this.menuItems?.length) {\n            return;\n        }\n\n        const svgData =\n            '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" xml:space=\"preserve\"><circle fill=\"currentColor\" cx=\"16\" cy=\"16\" r=\"2\"/><circle fill=\"currentColor\" cx=\"16\" cy=\"24\" r=\"2\"/><circle fill=\"currentColor\" cx=\"16\" cy=\"8\" r=\"2\"/></svg>';\n\n        const menuItems = this.getMenuItems();\n\n        return (\n            <limel-menu\n                items={menuItems}\n                onSelect={this.handleActionMenuSelect}\n                openDirection=\"bottom-end\"\n                onCancel={this.handleActionMenuCancel}\n            >\n                <button\n                    slot=\"trigger\"\n                    disabled={this.disabled}\n                    class=\"trailing-button\"\n                    aria-label={this.actionMenuLabel()}\n                    innerHTML={svgData}\n                />\n            </limel-menu>\n        );\n    }\n\n    private getMenuItems() {\n        let menuItems = [...this.menuItems];\n\n        if (this.removable) {\n            menuItems = [\n                ...menuItems,\n                { separator: true },\n                {\n                    text: this.removeChipLabel(),\n                    icon: {\n                        name: 'delete_sign',\n                        color: 'rgb(var(--color-red-default))',\n                    },\n                    value: '_remove',\n                },\n            ];\n        }\n\n        return menuItems;\n    }\n\n    private filterClickWhenDisabled = (e) => {\n        if (this.disabled || this.readonly) {\n            e.preventDefault();\n        }\n    };\n\n    private handleRemoveClick = (event: MouseEvent | KeyboardEvent) => {\n        event.stopPropagation();\n        this.remove.emit(this.identifier);\n    };\n\n    private handleDeleteKeyDown = (event: KeyboardEvent) => {\n        if (!this.removable) {\n            return;\n        }\n\n        const keys = [DELETE, BACKSPACE];\n\n        if (keys.includes(event.key)) {\n            this.handleRemoveClick(event);\n        }\n    };\n\n    private removeChipLabel = (): string => {\n        return `${this.getTranslation('remove')} ${this.text}`;\n    };\n\n    private actionMenuLabel = (): string => {\n        return this.getTranslation('file-viewer.more-actions');\n    };\n\n    private getTranslation = (key: string) => {\n        return translate.get(key, this.language);\n    };\n\n    private renderSpinner() {\n        if (!this.loading) {\n            return;\n        }\n\n        return <limel-linear-progress indeterminate={true} />;\n    }\n\n    private renderProgressBar() {\n        if (!this.progress) {\n            return;\n        }\n\n        const currentPercentage = this.progress + '%';\n\n        return (\n            <div\n                role=\"progressbar\"\n                aria-label=\"%\"\n                aria-valuemin=\"0\"\n                aria-valuemax=\"100\"\n                aria-valuenow={this.progress}\n                style={{\n                    '--limel-chip-progress-percentage': currentPercentage,\n                }}\n            />\n        );\n    }\n\n    private handleActionMenuSelect = (\n        event: LimelMenuCustomEvent<MenuItem>\n    ) => {\n        const menuItem = event.detail;\n\n        if (!menuItem) {\n            return;\n        }\n\n        if (menuItem.value === '_remove') {\n            this.remove.emit(this.identifier);\n\n            return;\n        }\n\n        this.menuItemSelected.emit(menuItem);\n    };\n\n    private handleActionMenuCancel = (event: LimelMenuCustomEvent<void>) => {\n        event.stopPropagation();\n    };\n}\n","import {\n    ARROW_LEFT,\n    ARROW_RIGHT,\n    BACKSPACE,\n    DELETE,\n    ENTER,\n    ESCAPE,\n} from '../../util/keycodes';\n\n/**\n * Key handler for the input field.\n * Lets the user select, activate, and remove chips with the keyboard.\n *\n * @param event - event\n \n */\nexport function handleKeyboardEvent(event: KeyboardEvent) {\n    if (this.textValue.length > 0) {\n        // If there is any text in the input field, keyboard input should\n        // navigate the text, not the chips.\n        return;\n    }\n\n    if (!this.value?.length) {\n        // If there are no chips, there is nothing to select.\n        return;\n    }\n\n    const isArrowLeft = event.key === ARROW_LEFT;\n    const isArrowRight = event.key === ARROW_RIGHT;\n    const isEnter = event.key === ENTER;\n    const isDelete = event.key === DELETE;\n    const isBackspace = event.key === BACKSPACE;\n    const isEscape = event.key === ESCAPE;\n\n    if (isArrowLeft) {\n        return handleLeft(this, event);\n    }\n\n    if (isArrowRight) {\n        return handleRight(this, event);\n    }\n\n    if (isEnter) {\n        return handleEnter(this, event);\n    }\n\n    if (isDelete) {\n        return handleDelete(this, event);\n    }\n\n    if (isBackspace) {\n        return handleBackspace(this, event);\n    }\n\n    if (isEscape) {\n        return handleEscape(this, event);\n    }\n}\n\nfunction handleLeft(host, event) {\n    event.preventDefault();\n    if (host.inputChipIndexSelected === null) {\n        host.inputChipIndexSelected = host.value.length - 1;\n\n        return;\n    }\n\n    if (host.inputChipIndexSelected <= 0) {\n        return;\n    }\n\n    host.inputChipIndexSelected -= 1;\n}\n\nfunction handleRight(host, event) {\n    event.preventDefault();\n    if (host.inputChipIndexSelected === null) {\n        host.inputChipIndexSelected = 0;\n\n        return;\n    }\n\n    if (host.inputChipIndexSelected >= host.value.length - 1) {\n        return;\n    }\n\n    host.inputChipIndexSelected += 1;\n}\n\nfunction handleEnter(host, event) {\n    if (host.inputChipIndexSelected !== null) {\n        event.preventDefault();\n        host.emitInteraction(host.value[host.inputChipIndexSelected]);\n    }\n}\n\nfunction handleEscape(host, event) {\n    if (host.inputChipIndexSelected !== null) {\n        event.preventDefault();\n        host.inputChipIndexSelected = null;\n    }\n}\n\nfunction handleDelete(host, event) {\n    if (host.inputChipIndexSelected !== null) {\n        event.preventDefault();\n        removeChip(host);\n    }\n}\n\nfunction handleBackspace(host, event) {\n    if (host.inputChipIndexSelected !== null) {\n        event.preventDefault();\n        removeChip(host);\n    } else if (!event.repeat) {\n        host.inputChipIndexSelected = host.value.length - 1;\n    }\n}\n\nfunction removeChip(host) {\n    if (host.inputChipIndexSelected !== null) {\n        host.removeChip(host.value[host.inputChipIndexSelected].id);\n        host.inputChipIndexSelected = null;\n    }\n}\n","@use '../../style/functions';\n@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins';\n\n@use '@material/textfield';\n@use '@material/textfield/icon';\n\n/**\n * @prop --icon-background-color: Background color of the icon. Defaults to transparent.\n * @prop --icon-color: Color of the icon. Defaults to `rgb(var(--contrast-1100))`.\n * @prop --background-color: Background color of the field when type is set to input.\n * @prop --background-color-disabled: Background color of the field when type is set to input and the component is disabled or readonly.\n * @prop --input-chip-set-selected-chip-color: Color of the highlight around selected chips in input chip-sets.\n */\n\n@include textfield.core-styles;\n@include icon.icon-core-styles;\n\n@include shared_input-select-picker.leading-icon;\n\n$height-of-chip-set-input: functions.pxToRem(36);\n$leading-icon-space: 1.5rem;\n\n:host(limel-chip-set) {\n    isolation: isolate;\n}\n\n:host(limel-chip-set[type='input']) {\n    limel-notched-outline {\n        [slot='content'] {\n            min-height: shared_input-select-picker.$height-of-mdc-text-field;\n        }\n    }\n}\n\n:host(limel-chip-set:not([type='input'])) {\n    .limel-notched-outline {\n        --limel-notched-outline-border-color: transparent;\n        --limel-notched-outline-background-color: transparent;\n    }\n}\n\n.mdc-chip-set {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: 0.5rem;\n    min-height: shared_input-select-picker.$height-of-mdc-text-field;\n    position: relative;\n\n    &.mdc-chip-set--input {\n        padding: 0.4rem 0.5rem;\n        width: 100%;\n    }\n\n    &.has-clear-all-button {\n        &.mdc-chip-set--input {\n            padding-right: functions.pxToRem(\n                32\n            ); // This leaves space for \"clear all\" button and avoids overlapping with chips\n        }\n    }\n}\n\n.mdc-text-field__input {\n    .mdc-text-field:not(.mdc-text-field--disabled) & {\n        color: shared_input-select-picker.$input-text-color;\n        font-size: var(--limel-theme-default-font-size) !important;\n        font-family: inherit !important;\n    }\n    .mdc-text-field.mdc-text-field--disabled & {\n        color: shared_input-select-picker.$input-text-color-disabled;\n    }\n}\n\n.mdc-text-field {\n    height: auto;\n    cursor: text;\n    flex-wrap: wrap;\n    row-gap: 0.5rem;\n\n    .mdc-text-field__input {\n        @include shared_input-select-picker.input-field-placeholder;\n\n        width: auto;\n        padding: 0 0.5rem;\n\n        flex-grow: 1;\n        flex-shrink: 0;\n\n        &.hidden {\n            // This class is added, as soon as there is a chip selected and displayed\n            // This input field should not be visually visible as it breaks the UI in some cases\n            // But it should be rendered to be able to tab between fields and do other keyboard commands /Kia\n            transition: all 0s;\n            opacity: 0;\n            position: absolute;\n            z-index: -100; // to let users interact with chips, in case they're covered\n        }\n        &[type='search'] {\n            -webkit-appearance: textfield; // Removes the default magnifying glass icon on iOS which appears automatically on input fields with type of search\n            background-color: transparent; // overides styles caused by previous line\n\n            &::-webkit-search-cancel-button {\n                display: none; // removes the default X button\n            }\n        }\n    }\n}\n\n.clear-all-button {\n    @include mixins.clear-all-button;\n    @include mixins.visualize-keyboard-focus;\n\n    position: absolute;\n    right: 0.5rem;\n    top: calc(#{shared_input-select-picker.$height-of-mdc-text-field} / 4);\n\n    opacity: 0; // Is hidden, but can receive focus (such as when navigating through tab indexes).\n\n    &:focus,\n    .has-chips:not(.disabled):hover &,\n    .has-chips:not(.disabled).mdc-text-field--focused & {\n        opacity: 1;\n        outline: none;\n    }\n\n    .mdc-chip-set:not(.has-chips) &,\n    .has-chips.disabled & {\n        display: none; // Won't receive focus when disabled\n    }\n}\n\n.has-leading-icon {\n    &:not(.has-chips) {\n        .mdc-text-field__input {\n            padding-left: $leading-icon-space;\n        }\n    }\n\n    limel-chip {\n        &:first-of-type {\n            margin-left: 1.5rem;\n        }\n    }\n\n    .search-icon {\n        transition: transform 0.2s ease;\n        position: absolute;\n        top: functions.pxToRem(9);\n        left: 0.25rem;\n    }\n\n    limel-icon {\n        background-color: transparent;\n    }\n}\n\n.delimiter {\n    opacity: 0.5;\n    padding: 0 functions.pxToRem(2);\n    color: var(--limel-theme-on-surface-color);\n}\n\nlimel-chip {\n    border-radius: 2rem;\n\n    &.can-be-removed {\n        // When chip is selected with keyboard (backspace / arrow-keys) to be deleted\n        box-shadow: var(--shadow-depth-8-error);\n    }\n}\n\n@import './partial-styles/_readonly';\n@import './partial-styles/_helper-text';\n","import { Chip, ChipType } from '../chip-set/chip.types';\nimport { Languages } from '../date-picker/date.types';\nimport { MDCTextField } from '@material/textfield';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Method,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { handleKeyboardEvent } from './chip-set-input-helpers';\nimport translate from '../../global/translations';\nimport { getHref, getTarget } from '../../util/link-helper';\nimport { isEqual } from 'lodash-es';\nimport { LimelChipCustomEvent } from '../../components';\nimport { createRandomString } from '../../util/random-string';\n\n/**\n * :::note\n * **Regarding `click` and `interact` events:**\n *\n * The `interact` event is emitted when a chip is interacted with, and is\n * the recommended way to listen for chip interactions.\n *\n * However, if you need to handle clicks differently depending on which chip\n * was clicked, or whether the click was on a chip or elsewhere, you need to\n * listen to the native `click` event instead.\n *\n * Native `click` events are passed through, and if the click came from\n * a chip, the chip object is available in the event object under\n * `<event object>.Lime.chip`.\n *\n * Example usage:\n * ```ts\n * private handleClick(event: Event) {\n *     if (event && 'Lime' in event && (event.Lime as any).chip) {\n *         if ((event.Lime as { chip: Chip }).chip.href) {\n *             // Chip has href, so let the browser open the link.\n *             return;\n *         }\n *         // handle click on chip without href\n *     } else {\n *         // handle click elsewhere\n *     }\n * }\n * ```\n * :::\n *\n * @exampleComponent limel-example-chip-set\n * @exampleComponent limel-example-chip-set-choice\n * @exampleComponent limel-example-chip-set-filter\n * @exampleComponent limel-example-chip-set-filter-badge\n * @exampleComponent limel-example-chip-set-input\n * @exampleComponent limel-example-chip-set-input-type-with-menu-items\n * @exampleComponent limel-example-chip-set-input-type-text\n * @exampleComponent limel-example-chip-set-input-type-search\n * @exampleComponent limel-example-chip-icon-color\n * @exampleComponent limel-example-chip-set-image\n * @exampleComponent limel-example-chip-set-composite\n */\n@Component({\n    tag: 'limel-chip-set',\n    shadow: { delegatesFocus: true },\n    styleUrl: 'chip-set.scss',\n})\nexport class ChipSet {\n    /**\n     * List of chips for the set\n     */\n    @Prop()\n    public value: Chip[] = [];\n\n    /**\n     * Type of chip set\n     *\n     * - `choice` renders a set of selectable chips where only one is selectable. The `removable` property is ignored\n     * - `filter` renders a set of selectable chips where all are selectable.\n     * - `input` renders a set of chips that can be used in conjunction with an input field\n     *\n     * If no type is set, a basic set of chips without additional functionality will be rendered\n     */\n    @Prop({ reflect: true })\n    public type?: 'choice' | 'filter' | 'input';\n\n    /**\n     * Label for the chip-set\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Optional helper text to display below the chipset.\n     * When type is `input`, the helper text is displayed below the\n     * input field when it has focus.\n     * When type is not `input`, the helper text is always displayed\n     * if the device is touch screen; otherwise it is shown when chip-set\n     * is hovered or focused using keyboard navigation.\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * True if the chip set should be disabled\n     */\n    @Prop({ reflect: true })\n    public disabled: boolean = false;\n\n    /**\n     * For chip-sets of type `input`, set to `true` to disable adding and\n     * removing chips, but allow interaction with existing chips in the set.\n     * For any other types, setting either `readonly` or `disabled` disables\n     * the chip-set.\n     */\n    @Prop({ reflect: true })\n    public readonly: boolean = false;\n\n    /**\n     * Set to `true` to indicate that the current value of the input field is\n     * invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * For chip-sets of type `input`. Value to use for the `type` attribute on the\n     * input field inside the chip-set.\n     */\n    @Prop({ reflect: true })\n    public inputType: 'search' | 'text' = 'text';\n\n    /**\n     * For chip-sets of type `input`. Limits the maximum number of chips.\n     * When the value is `0` or not set, no limit is applied.\n     */\n    @Prop({ reflect: true })\n    public maxItems: number;\n\n    /**\n     * True if the control requires a value\n     */\n    @Prop({ reflect: true })\n    public required: boolean = false;\n\n    /**\n     * Search label to display when type is `input` and component is in search mode\n     */\n    @Prop({ reflect: true })\n    public searchLabel: string;\n\n    /**\n     * Whether the input field should be emptied when the chip-set loses focus.\n     */\n    @Prop({ reflect: true })\n    public emptyInputOnBlur: boolean = true;\n\n    /**\n     * Whether the \"Clear all\" buttons should be shown\n     */\n    @Prop()\n    public clearAllButton: boolean = true;\n\n    /**\n     * For chip-sets of type `input`. When the value is null, no leading icon is used.\n     * Leading icon to show to the far left in the text field\n     */\n    @Prop({ reflect: true })\n    public leadingIcon: string = null;\n\n    /**\n     * For chip-set of type `input`. Sets delimiters between chips.\n     */\n    @Prop({ reflect: true })\n    public delimiter: string = null;\n\n    /**\n     * For chip-set of type `input`, defines whether the input field should have autocomplete enabled.\n     * Read more about the `autocomplete` attribute\n     * [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete).\n     */\n    @Prop({ reflect: true })\n    public autocomplete: string = 'off';\n\n    /**\n     * Defines the language for translations.\n     * Will translate the translatable strings on the components. For example, the clear all chips label.\n     */\n    @Prop()\n    public language: Languages = 'en';\n\n    /**\n     * Dispatched when a chip is interacted with\n     */\n    @Event()\n    private readonly interact: EventEmitter<Chip>;\n\n    /**\n     * Dispatched when a chip is selected/deselected\n     */\n    @Event()\n    private readonly change: EventEmitter<Chip | Chip[]>;\n\n    /**\n     * Emitted when an input chip set has received focus and editing in the text field has started\n     */\n    @Event()\n    private readonly startEdit: EventEmitter<void>;\n\n    /**\n     * Emitted when an input chip set has lost focus and editing in the text field has ended\n     */\n    @Event()\n    private readonly stopEdit: EventEmitter<void>;\n\n    /**\n     * Dispatched when the input is changed for type `input`\n     */\n    @Event()\n    private readonly input: EventEmitter<string>;\n\n    @Element()\n    private readonly host: HTMLLimelChipSetElement;\n\n    @State()\n    private editMode: boolean = false;\n\n    @State()\n    private textValue: string = '';\n\n    @State()\n    private blurred: boolean = false;\n\n    @State()\n    private inputChipIndexSelected: number = null;\n\n    @State()\n    private selectedChipIds: Array<string | number>;\n\n    private mdcTextField: MDCTextField;\n    private readonly handleKeyDown = handleKeyboardEvent;\n    private labelId: string;\n\n    constructor() {\n        this.labelId = createRandomString();\n        this.renderChip = this.renderChip.bind(this);\n        this.renderInputChip = this.renderInputChip.bind(this);\n        this.isFull = this.isFull.bind(this);\n        this.handleTextFieldFocus = this.handleTextFieldFocus.bind(this);\n        this.handleInputBlur = this.handleInputBlur.bind(this);\n        this.handleTextInput = this.handleTextInput.bind(this);\n        this.inputFieldOnChange = this.inputFieldOnChange.bind(this);\n        this.handleKeyDown = this.handleKeyDown.bind(this);\n        this.inputHidden = this.inputHidden.bind(this);\n        this.handleDeleteAllIconClick =\n            this.handleDeleteAllIconClick.bind(this);\n        this.renderDelimiter = this.renderDelimiter.bind(this);\n    }\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    private initialize() {\n        if (this.value.length > 0) {\n            this.selectedChipIds = this.value\n                .filter((chip) => chip.selected)\n                .map((chip) => chip.id);\n        }\n    }\n\n    /**\n     * Used to find out whether the chip-set is in edit mode.\n     *\n     * @returns `true` if the chip-set is in edit mode, `false` otherwise.\n     */\n    @Method()\n    public async getEditMode(): Promise<boolean> {\n        return this.editMode;\n    }\n\n    /**\n     * Used to set focus to the chip-set input field.\n     *\n     * @param emptyInput - if `true`, any text in the input is discarded\n     * @returns does not return anything, but methods have to be async\n     */\n    @Method()\n    public async setFocus(emptyInput: boolean = false) {\n        if (this.disabled || this.readonly) {\n            return;\n        }\n\n        this.editMode = true;\n        if (emptyInput) {\n            this.textValue = '';\n        }\n\n        this.host.shadowRoot.querySelector('input').focus();\n        this.startEdit.emit();\n    }\n\n    /**\n     * Used to empty the input field. Used in conjunction with `emptyInputOnBlur` to let the\n     * consumer control when the input is emptied.\n     *\n     * @returns does not return anything, but methods have to be async\n     */\n    @Method()\n    public async emptyInput() {\n        this.syncEmptyInput();\n    }\n\n    public componentDidLoad() {\n        this.triggerIconColorWarning(this.value);\n\n        if (this.type === 'input') {\n            this.mdcTextField = new MDCTextField(\n                this.host.shadowRoot.querySelector('.mdc-text-field')\n            );\n        }\n    }\n\n    public componentDidUpdate() {\n        const input = this.host.shadowRoot.querySelector('input');\n        if (input && this.editMode) {\n            input.focus();\n        }\n    }\n\n    public disconnectedCallback() {\n        if (this.mdcTextField) {\n            this.mdcTextField.destroy();\n        }\n    }\n\n    public render() {\n        const classes = {\n            'mdc-chip-set': true,\n            'mdc-text-field--with-trailing-icon': true,\n            disabled: this.disabled || this.readonly,\n        };\n\n        if (this.type) {\n            classes[`mdc-chip-set--${this.type}`] = true;\n        }\n\n        if (this.type === 'input') {\n            Object.assign(classes, {\n                'mdc-text-field': true,\n                'mdc-text-field--outlined': true,\n                'mdc-chip-set--input': true,\n                'lime-text-field--readonly': this.readonly,\n                'has-chips': this.value.length > 0,\n                'has-leading-icon': this.leadingIcon !== null,\n                'has-clear-all-button': this.clearAllButton,\n            });\n        }\n\n        const value = this.getValue();\n\n        return [\n            <limel-notched-outline\n                labelId={this.labelId}\n                label={this.label}\n                required={this.required}\n                invalid={this.invalid || this.isInvalid()}\n                disabled={this.disabled}\n                readonly={this.readonly}\n                hasValue={!!this.value?.length}\n                hasLeadingIcon={!!this.leadingIcon}\n                hasFloatingLabel={this.floatLabelAbove()}\n            >\n                <div slot=\"content\" {...this.getContentProps()} class={classes}>\n                    {this.renderContent(value)}\n                </div>\n            </limel-notched-outline>,\n            this.renderHelperLine(),\n        ];\n    }\n\n    private getContentProps() {\n        if (this.type === 'input') {\n            return {\n                onClick: this.handleTextFieldFocus,\n            };\n        }\n\n        return {\n            role: 'grid',\n        };\n    }\n\n    private renderContent = (value: Chip[]) => {\n        if (this.type === 'input') {\n            return this.renderInputChips();\n        }\n\n        return value.map(this.renderChip);\n    };\n\n    private readonly getValue = () => {\n        return this.value.map((chip) => ({\n            ...chip,\n            ...(this.type && {\n                selected: this.selectedChipIds.includes(chip.id),\n            }),\n        }));\n    };\n\n    @Watch('value')\n    protected handleChangeChips(newValue: Chip[], oldValue: Chip[]) {\n        if (isEqual(newValue, oldValue)) {\n            return;\n        }\n\n        this.syncEmptyInput();\n        this.initialize();\n    }\n\n    private renderInputChips() {\n        return [\n            this.value.map(this.renderInputChip),\n            <input\n                tabIndex={this.disabled || this.readonly ? -1 : 0}\n                type={this.inputType}\n                id={this.labelId}\n                disabled={this.readonly || this.disabled}\n                class={{\n                    'mdc-text-field__input': true,\n                    hidden: this.inputHidden(),\n                }}\n                value={this.textValue}\n                onBlur={this.handleInputBlur}\n                onFocus={this.handleTextFieldFocus}\n                onKeyDown={this.handleKeyDown}\n                onInput={this.handleTextInput}\n                // Some browsers emit a change event on input elements, we need to stop\n                // that event from propagating since we are emitting our own change event\n                onChange={this.inputFieldOnChange}\n                placeholder={this.isFull() ? '' : this.searchLabel}\n                readonly={this.isFull()}\n                autocomplete={this.autocomplete}\n            />,\n            this.renderLeadingIcon(),\n            this.renderClearAllChipsButton(),\n        ];\n    }\n\n    private readonly floatLabelAbove = () => {\n        if (\n            this.value.length > 0 ||\n            this.editMode ||\n            this.readonly ||\n            this.textValue\n        ) {\n            return true;\n        }\n    };\n\n    private isFull(): boolean {\n        return !!this.maxItems && this.value.length >= this.maxItems;\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        if (!this.required) {\n            return false;\n        }\n\n        if (!this.blurred) {\n            return false;\n        }\n\n        return !this.value?.length;\n    }\n\n    private inputFieldOnChange(event) {\n        event.stopPropagation();\n    }\n\n    /**\n     * Enter edit mode when the text field receives focus. When editMode is true, the input element will be visible\n     */\n    private handleTextFieldFocus() {\n        if (this.disabled || this.readonly) {\n            return;\n        }\n\n        if (this.editMode) {\n            return;\n        }\n\n        this.editMode = true;\n        this.startEdit.emit();\n    }\n\n    /**\n     * Exit edit mode when the input element loses focus. This makes sure the input element does not take up any\n     * additional space when the user it not typing anything\n     */\n    private handleInputBlur() {\n        if (this.emptyInputOnBlur) {\n            this.syncEmptyInput();\n        }\n\n        this.editMode = false;\n        this.blurred = true;\n        this.inputChipIndexSelected = null;\n\n        // This timeout is needed in order to let a new element receive focus\n        setTimeout(() => {\n            this.stopEdit.emit();\n        }, 0);\n    }\n\n    private syncEmptyInput() {\n        this.textValue = '';\n    }\n\n    private inputHidden() {\n        if (this.editMode) {\n            return this.isFull();\n        }\n\n        // If there are chips in the picker, hide the input to avoid the input\n        // being placed on a new line and adding ugly space beneath the chips.\n        // If there are no chips, show the input, or the picker will look weird.\n        return !!this.value?.length;\n    }\n\n    private handleTextInput(event) {\n        event.stopPropagation();\n        this.inputChipIndexSelected = null;\n        this.textValue = event.target.value;\n        this.input.emit(event.target.value?.trim());\n    }\n\n    private emitInteraction(chip: Chip) {\n        this.interact.emit(chip);\n    }\n\n    private renderChip(chip: Chip) {\n        const chipType: ChipType =\n            this.type === 'filter' ? 'filter' : 'default';\n\n        const chipProps = this.getChipProps(chip, chipType);\n\n        return <limel-chip {...chipProps} />;\n    }\n\n    private readonly hasHelperText = () => {\n        return this.helperText !== null && this.helperText !== undefined;\n    };\n\n    private readonly renderHelperLine = () => {\n        const maxItems = this.maxItems === 1 ? undefined : this.maxItems;\n\n        if (!maxItems && !this.hasHelperText()) {\n            return;\n        }\n\n        return (\n            <limel-helper-line\n                length={this.value.length}\n                maxLength={maxItems}\n                helperText={this.helperText}\n                invalid={this.isInvalid()}\n            />\n        );\n    };\n\n    private renderInputChip(chip: Chip, index: number, chips: Chip[]) {\n        const chipProps = this.getChipProps(chip, 'default');\n        const isLastChip = index === chips.length - 1;\n\n        return [\n            <limel-chip\n                key={chip.id}\n                class={{\n                    'can-be-removed': this.inputChipIndexSelected === index,\n                }}\n                {...chipProps}\n            />,\n            !(isLastChip && this.inputHidden()) && this.renderDelimiter(),\n        ];\n    }\n\n    private getChipProps(chip: Chip, chipType: ChipType) {\n        const removable =\n            this.type === 'input' && chip.removable && !this.readonly;\n        const readonly = this.readonly && this.type !== 'input';\n\n        return {\n            role: 'row',\n            identifier: chip.id,\n            text: chip.text,\n            icon: chip.icon,\n            image: chip.image,\n            badge: chip.badge,\n            selected: chip.selected,\n            disabled: this.disabled,\n            loading: chip.loading,\n            readonly: readonly,\n            type: chipType,\n            removable: removable,\n            menuItems: chip.menuItems,\n            onClick: this.catchInputChipClicks(chip),\n            onRemove: this.handleRemoveChip,\n            ...(chip.href && {\n                link: {\n                    href: getHref(chip.href),\n                    target: getTarget(chip.href),\n                },\n            }),\n        };\n    }\n\n    private readonly catchInputChipClicks = (chip: Chip) => (event: Event) => {\n        /*\n         * We need to add the `chip` to the event object so that the consumer\n         * can get the chip object when the chip is clicked.\n         * This is necessary for the consumer to be able to handle the click\n         * event itself, based on which chip was clicked, or whether the click\n         * was on a chip or elsewhere. The reason the consumer can't just look\n         * at the event target is that that information is hidden by the\n         * shadow DOM.\n         *\n         * See documentation for the `interact` event for more information.\n         */\n        (event as any).Lime = { chip: chip };\n\n        if (this.isSelectableChip(chip)) {\n            this.updateSelectedChipIds(chip);\n            this.change.emit(chip);\n        }\n\n        this.emitInteraction(chip);\n    };\n\n    private isSelectableChip(chip: Chip): boolean {\n        return this.type !== 'input' && 'selected' in chip;\n    }\n\n    private updateSelectedChipIds(chip: Chip): void {\n        chip.selected = !chip.selected;\n        const id = chip.id;\n        if (this.type === 'choice') {\n            this.updateChoiceTypeSelectedIds(id);\n        } else {\n            this.updateFilterTypeSelectedIds(id);\n        }\n    }\n\n    private updateChoiceTypeSelectedIds(id: number | string): void {\n        this.selectedChipIds = this.isChipSelected(id) ? [] : [id];\n    }\n\n    private isChipSelected(id: number | string): boolean {\n        return this.selectedChipIds.includes(id);\n    }\n\n    private updateFilterTypeSelectedIds(id: number | string): void {\n        if (this.isChipSelected(id)) {\n            this.removeChipIdFromSelectedChipIds(id);\n        } else {\n            this.addChipIdToSelectedChipIds(id);\n        }\n    }\n\n    private removeChipIdFromSelectedChipIds(id: number | string): void {\n        this.selectedChipIds = this.selectedChipIds.filter(\n            (chipId) => chipId !== id\n        );\n    }\n\n    private addChipIdToSelectedChipIds(id: number | string): void {\n        this.selectedChipIds = [...this.selectedChipIds, id];\n    }\n\n    private readonly handleRemoveChip = (\n        event: LimelChipCustomEvent<string | number>\n    ) => {\n        this.removeChip(event.detail);\n    };\n\n    private readonly removeChip = (identifier: string | number) => {\n        const newValue = this.value.filter((chip) => {\n            return chip.id !== identifier;\n        });\n        this.change.emit(newValue);\n    };\n\n    private renderLeadingIcon() {\n        if (!this.leadingIcon) {\n            return;\n        }\n\n        return (\n            <i class=\"mdc-text-field__icon search-icon\">\n                <limel-icon name={this.leadingIcon} />\n            </i>\n        );\n    }\n\n    private renderClearAllChipsButton() {\n        if (this.disabled || this.readonly || !this.clearAllButton) {\n            return;\n        }\n\n        return (\n            <a\n                href=\"\"\n                onClick={this.handleDeleteAllIconClick}\n                class=\"mdc-text-field__icon clear-all-button\"\n                tabindex=\"0\"\n                role=\"button\"\n                title={this.clearAllChipsLabel()}\n                aria-label={this.clearAllChipsLabel()}\n            />\n        );\n    }\n\n    private readonly clearAllChipsLabel = (): string => {\n        return translate.get('chip-set.clear-all', this.language);\n    };\n\n    private handleDeleteAllIconClick(event: Event) {\n        event.preventDefault();\n        this.change.emit([]);\n    }\n\n    private renderDelimiter() {\n        if (!this.delimiter) {\n            return;\n        }\n\n        return <div class=\"delimiter\">{this.delimiter}</div>;\n    }\n\n    private triggerIconColorWarning(value: Chip[]) {\n        for (const chip of value) {\n            if (\n                chip.icon &&\n                (chip.iconFillColor ||\n                    chip.iconBackgroundColor ||\n                    chip.iconTitle)\n            ) {\n                console.warn(\n                    \"The `iconFillColor`, `iconBackgroundColor`, and `iconTitle` props are deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name', `iconBackgroundColor: 'color-name', and `iconTitle: 'title'`, write `icon { name: 'icon-name', color: 'color-name', backgroundColor: 'color-name', title: 'title' }`.\"\n                );\n            }\n        }\n    }\n}\n"],"mappings":"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"}

package/dist/lime-elements/p-2a616374.entry.js

@@ -1,2 +0,0 @@
-import{r as o,h as t}from"./p-bdfa539c.js";import{t as r}from"./p-df36e1ae.js";const l={note:"info",important:"exclamation_mark",tip:"idea",caution:"high_priority",warning:"error"};function n(o,t="note"){var r;if(o){return o}return(r=l[t])!==null&&r!==void 0?r:l.note}function e(o,t="note",l="en"){if(o){return o}const n=`callout.${t}`;try{return r.get(n,l)}catch(o){return r.get(n,"en")}}const i=':host(limel-callout){display:flex;border-radius:0.5rem;overflow:hidden;--limel-callout-tint-color:var(\n      --callout-color,\n      rgb(var(--color-contrast-100))\n  );color:var(--callout-text-color, rgb(var(--contrast-1100)));font-size:var(--limel-theme-default-font-size)}:host([type=note]){--limel-callout-tint-color:var(\n      --callout-color,\n      rgb(var(--color-gray-default))\n  )}:host([type=important]){--limel-callout-tint-color:var(\n      --callout-color,\n      rgb(var(--color-sky-default))\n  )}:host([type=tip]){--limel-callout-tint-color:var(\n      --callout-color,\n      rgb(var(--color-green-default))\n  )}:host([type=caution]){--limel-callout-tint-color:var(\n      --callout-color,\n      rgb(var(--color-orange-light))\n  )}:host([type=warning]){--limel-callout-tint-color:var(\n      --callout-color,\n      rgb(var(--color-red-dark))\n  )}.side{padding:0.25rem;position:relative}.side:before{content:"";position:absolute;inset:0;opacity:0.2;background-color:var(--limel-callout-tint-color)}.side limel-icon{width:1.5rem;color:var(--limel-callout-tint-color);margin-top:0.0625rem}.main{display:flex;flex:1;flex-direction:column;gap:0.5rem;padding:0.25rem 0.5rem 0.5rem 0.5rem;background-color:var(--callout-background-color, rgb(var(--contrast-300)))}.heading{margin:0;font-size:1rem;font-weight:600}';const a=class{constructor(t){o(this,t);this.heading=undefined;this.icon=undefined;this.type="note";this.language="en"}render(){return[t("div",{class:"side",role:"presentation"},t("limel-icon",{name:n(this.icon,this.type)})),t("div",{class:"main"},t("h1",{class:"heading"},e(this.heading,this.type,this.language)),t("slot",null))]}};a.style=i;export{a as limel_callout};
-//# sourceMappingURL=p-2a616374.entry.js.map

package/dist/lime-elements/p-2a616374.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["calloutIcons","note","important","tip","caution","warning","getIcon","icon","type","_a","getHeading","heading","language","key","translate","get","calloutCss","Callout","render","h","class","role","name","this"],"sources":["./src/components/callout/callout.helpers.ts","./src/components/callout/callout.scss?tag=limel-callout&encapsulation=shadow","./src/components/callout/callout.tsx"],"sourcesContent":["import translate from '../../global/translations';\n\nconst calloutIcons: Record<string, string> = {\n    note: 'info',\n    important: 'exclamation_mark',\n    tip: 'idea',\n    caution: 'high_priority',\n    warning: 'error',\n};\n\n/**\n *\n * @param icon\n * @param type\n */\nexport function getIcon(icon: string, type: string = 'note'): string {\n    if (icon) {\n        return icon;\n    }\n\n    return calloutIcons[type] ?? calloutIcons.note;\n}\n\n/**\n *\n * @param heading\n * @param type\n * @param language\n */\nexport function getHeading(\n    heading: string,\n    type: string = 'note',\n    language: string = 'en'\n): string {\n    if (heading) {\n        return heading;\n    }\n\n    const key = `callout.${type}`;\n\n    try {\n        return translate.get(key, language);\n    } catch {\n        return translate.get(key, 'en');\n    }\n}\n","/**\n * @prop --callout-text-color: Text color of the component. Defaults to `--contrast-1100`.\n * @prop --callout-background-color: Background color of the component. Defaults to `--contrast-300`.\n * @prop --callout-color: Color used in the UI to add more contextual meaning about the type of the information. This color is different based on the chosen `type`, but you can override it using this prop.\n*/\n\n:host(limel-callout) {\n    display: flex;\n    border-radius: 0.5rem;\n    overflow: hidden;\n\n    --limel-callout-tint-color: var(\n        --callout-color,\n        rgb(var(--color-contrast-100))\n    );\n    color: var(--callout-text-color, rgb(var(--contrast-1100)));\n    font-size: var(--limel-theme-default-font-size);\n}\n:host([type='note']) {\n    --limel-callout-tint-color: var(\n        --callout-color,\n        rgb(var(--color-gray-default))\n    );\n}\n:host([type='important']) {\n    --limel-callout-tint-color: var(\n        --callout-color,\n        rgb(var(--color-sky-default))\n    );\n}\n:host([type='tip']) {\n    --limel-callout-tint-color: var(\n        --callout-color,\n        rgb(var(--color-green-default))\n    );\n}\n:host([type='caution']) {\n    --limel-callout-tint-color: var(\n        --callout-color,\n        rgb(var(--color-orange-light))\n    );\n}\n:host([type='warning']) {\n    --limel-callout-tint-color: var(\n        --callout-color,\n        rgb(var(--color-red-dark))\n    );\n}\n\n.side {\n    padding: 0.25rem;\n    position: relative;\n\n    &:before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        opacity: 0.2;\n        background-color: var(--limel-callout-tint-color);\n    }\n\n    limel-icon {\n        width: 1.5rem;\n        color: var(--limel-callout-tint-color);\n        margin-top: 0.0625rem; // ensures vertical alignment with the `heading`\n    }\n}\n\n.main {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: 0.5rem;\n    padding: 0.25rem 0.5rem 0.5rem 0.5rem;\n    background-color: var(--callout-background-color, rgb(var(--contrast-300)));\n}\n\n.heading {\n    margin: 0;\n    font-size: 1rem;\n    font-weight: 600;\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { CalloutType } from '../callout/callout.types';\nimport { Languages } from '../date-picker/date.types';\nimport { getHeading, getIcon } from './callout.helpers';\n\n/**\n * Callouts—also known as Admonitions—are useful for including supportive or\n * special content within a large piece of text, or even inside a user\n * interface.\n *\n * When used in a document or text based user interface, the callout attracts\n * the reader's attention to a particular piece of information, without\n * significantly interrupting their flow of reading the document.\n *\n * In a user interface, a callout is more intrusive to the end-user. Still, it\n * could be a good choice when you intend to slightly disturb the user's\n * attention, and challenge them to pay extra attention to the information\n * presented. In such cases, a callout should not be used as a static and\n * constantly present element of the UI. Rather, it should be displayed when\n * something unusual or remarkable demands the user's attention.\n *\n * @exampleComponent limel-example-callout-note\n * @exampleComponent limel-example-callout-important\n * @exampleComponent limel-example-callout-tip\n * @exampleComponent limel-example-callout-caution\n * @exampleComponent limel-example-callout-warning\n * @exampleComponent limel-example-callout-rich-content\n * @exampleComponent limel-example-callout-custom-heading\n * @exampleComponent limel-example-callout-custom-icon\n * @exampleComponent limel-example-callout-styles\n * @exampleComponent limel-example-custom-type\n * @exampleComponent limel-example-callout-composite\n */\n@Component({\n    tag: 'limel-callout',\n    shadow: true,\n    styleUrl: 'callout.scss',\n})\nexport class Callout {\n    /**\n     * Heading of the callout, which can be used to override the\n     * default heading which is displayed based on the chosen `type`.\n     */\n    @Prop({ reflect: true })\n    public heading?: string;\n\n    /**\n     * Icon of the callout, which can be used to override the\n     * default icon which is displayed based on the chosen `type`.\n     */\n    @Prop({ reflect: true })\n    public icon?: string;\n\n    /**\n     * Defines how the component is visualized, for example\n     * which heading, color or icon is used in its user interface.\n     */\n    @Prop({ reflect: true })\n    public type?: CalloutType = 'note';\n\n    /**\n     * Defines the language for translations.\n     * Will translate the default headings for supported languages.\n     */\n    @Prop()\n    public language: Languages = 'en';\n\n    public render() {\n        return [\n            <div class=\"side\" role=\"presentation\">\n                <limel-icon name={getIcon(this.icon, this.type)} />\n            </div>,\n            <div class=\"main\">\n                <h1 class=\"heading\">\n                    {getHeading(this.heading, this.type, this.language)}\n                </h1>\n                <slot />\n            </div>,\n        ];\n    }\n}\n"],"mappings":"+EAEA,MAAMA,EAAuC,CACzCC,KAAM,OACNC,UAAW,mBACXC,IAAK,OACLC,QAAS,gBACTC,QAAS,S,SAQGC,EAAQC,EAAcC,EAAe,Q,MACjD,GAAID,EAAM,CACN,OAAOA,C,CAGX,OAAOE,EAAAT,EAAaQ,MAAK,MAAAC,SAAA,EAAAA,EAAIT,EAAaC,IAC9C,C,SAQgBS,EACZC,EACAH,EAAe,OACfI,EAAmB,MAEnB,GAAID,EAAS,CACT,OAAOA,C,CAGX,MAAME,EAAM,WAAWL,IAEvB,IACI,OAAOM,EAAUC,IAAIF,EAAKD,E,CAC5B,MAAAH,GACE,OAAOK,EAAUC,IAAIF,EAAK,K,CAElC,CC7CA,MAAMG,EAAa,uzC,MCsCNC,EAAO,M,8EAoBY,O,cAOC,I,CAEtBC,SACH,MAAO,CACHC,EAAA,OAAKC,MAAM,OAAOC,KAAK,gBACnBF,EAAA,cAAYG,KAAMhB,EAAQiB,KAAKhB,KAAMgB,KAAKf,SAE9CW,EAAA,OAAKC,MAAM,QACPD,EAAA,MAAIC,MAAM,WACLV,EAAWa,KAAKZ,QAASY,KAAKf,KAAMe,KAAKX,WAE9CO,EAAA,c"}

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

@@ -1,2 +0,0 @@
-import{r as e,h as r}from"./p-bdfa539c.js";import{g as i}from"./p-d251f404.js";const o='@charset "UTF-8";:host(limel-header){display:flex;align-items:center;box-sizing:border-box;width:100%;background-color:var(--header-background-color, rgb(var(--contrast-300)));border-top-left-radius:var(--header-top-right-left-border-radius, 0.75rem);border-top-right-radius:var(--header-top-right-left-border-radius, 0.75rem);padding:0.25rem}.information{display:flex;flex-grow:1;align-items:center;min-width:0}.icon{--limel-icon-svg-margin:0.25rem;flex-shrink:0;color:var(--limel-header-icon-color, var(--header-icon-color, rgb(var(--contrast-1100))));background-color:var(--limel-header-icon-background-color, var(--header-icon-background-color, transparent));width:2.25rem;border-radius:0.56rem}.headings{min-width:0;margin-left:0.25rem}.heading,.subheading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0;padding:0}.heading{color:var(--header-heading-color, rgb(var(--contrast-1100)));font-size:1rem;font-weight:500}.subheading{color:var(--header-subheading-color, rgb(var(--contrast-900)));font-size:var(--limel-theme-default-small-font-size);font-weight:400}.subheading__supporting-text{color:var(--header-supporting-text-color, var(--header-subheading-color))}.subheading__supporting-text span{margin:0 0.125rem}slot[name=actions]{flex-shrink:0}:host(limel-header.is-narrow){padding:0.125rem 0.25rem}:host(limel-header.is-narrow) .icon{--limel-icon-svg-margin:0;width:1.25rem}:host(limel-header.is-narrow) .heading{font-size:0.9375rem}:host(limel-header.has-responsive-layout){display:grid;grid-template-columns:repeat(auto-fit, minmax(clamp(50%, var(--header-responsive-breakpoint, 22rem), 100%), 1fr))}:host(limel-header.has-responsive-layout) .headings{padding-right:0.5rem}:host(limel-header.has-responsive-layout) slot[name=actions]{display:flex;justify-content:flex-end}';const a=class{constructor(r){e(this,r);this.icon=undefined;this.heading=undefined;this.subheading=undefined;this.supportingText=undefined;this.subheadingDivider="·"}render(){return[r("div",{class:"information"},this.renderIcon(),r("div",{class:"headings"},r("h1",{class:"heading",title:this.heading},this.heading),r("h2",{class:"subheading",title:this.subheading},this.subheading,this.renderSupportingText()))),r("slot",{name:"actions"},r("slot",null))]}renderIcon(){var e,o,a,t,n;const s=i(this.icon);if(!s){return}return r("limel-icon",{class:"icon",badge:true,name:s,style:{"--limel-header-icon-color":`${(o=(e=this.icon)===null||e===void 0?void 0:e.color)!==null&&o!==void 0?o:""}`,"--limel-header-icon-background-color":`${(t=(a=this.icon)===null||a===void 0?void 0:a.backgroundColor)!==null&&t!==void 0?t:""}`,title:`${(n=this.icon)===null||n===void 0?void 0:n.title}`}})}renderSupportingText(){if(!this.supportingText){return}return r("span",{class:"subheading__supporting-text"},this.renderSubheadingDivider(),this.supportingText)}renderSubheadingDivider(){if(!this.subheadingDivider){return}return r("span",null,this.subheadingDivider)}};a.style=o;export{a as limel_header};
-//# sourceMappingURL=p-32611964.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["headerCss","Header","render","h","class","this","renderIcon","title","heading","subheading","renderSupportingText","name","icon","getIconName","badge","style","_b","_a","color","_d","_c","backgroundColor","_e","supportingText","renderSubheadingDivider","subheadingDivider"],"sources":["./src/components/header/header.scss?tag=limel-header&encapsulation=shadow","./src/components/header/header.tsx"],"sourcesContent":["@use '../../style/mixins.scss';\n@use '../../style/functions.scss';\n\n/**\n * @prop --header-background-color: Background color of header, defaults to `--contrast-300`.\n * @prop --header-heading-color: Color of heading text, defaults to `--contrast-1100`.\n * @prop --header-subheading-color: Color of subheading text, defaults to `--contrast-900`.\n * @prop --header-supporting-text-color: Color of supporting text in subheading, defaults to `--header-subheading-color`.\n * @prop --header-top-right-left-border-radius: Top-left and top-right border radius of header, defaults to `0.75rem`.\n * @prop --header-responsive-breakpoint: Defines the minimum allowed `width` of both information and actions areas in the header, defaults to `22rem`.\n */\n\n:host(limel-header) {\n    display: flex;\n    align-items: center;\n    box-sizing: border-box;\n    width: 100%;\n    background-color: var(--header-background-color, rgb(var(--contrast-300)));\n    border-top-left-radius: var(--header-top-right-left-border-radius, 0.75rem);\n    border-top-right-radius: var(\n        --header-top-right-left-border-radius,\n        0.75rem\n    );\n    padding: 0.25rem;\n}\n\n.information {\n    display: flex;\n    flex-grow: 1;\n    align-items: center;\n    min-width: 0;\n}\n\n.icon {\n    --limel-icon-svg-margin: 0.25rem;\n    flex-shrink: 0;\n    color: var(\n        --limel-header-icon-color,\n        var(--header-icon-color, rgb(var(--contrast-1100)))\n    );\n    background-color: var(\n        --limel-header-icon-background-color,\n        var(--header-icon-background-color, transparent)\n    );\n    width: 2.25rem;\n    border-radius: 0.56rem;\n}\n\n.headings {\n    min-width: 0;\n    margin-left: 0.25rem;\n}\n\n.heading,\n.subheading {\n    @include mixins.truncate-text;\n    margin: 0;\n    padding: 0;\n}\n\n.heading {\n    color: var(--header-heading-color, rgb(var(--contrast-1100)));\n    font-size: 1rem;\n    font-weight: 500;\n}\n\n.subheading {\n    color: var(--header-subheading-color, rgb(var(--contrast-900)));\n    font-size: var(--limel-theme-default-small-font-size);\n    font-weight: 400;\n}\n\n.subheading__supporting-text {\n    color: var(--header-supporting-text-color, var(--header-subheading-color));\n    span {\n        margin: 0 0.125rem;\n    }\n}\n\nslot[name='actions'] {\n    flex-shrink: 0;\n}\n\n:host(limel-header.is-narrow) {\n    padding: 0.125rem 0.25rem;\n\n    .icon {\n        --limel-icon-svg-margin: 0;\n        width: 1.25rem;\n    }\n\n    .heading {\n        font-size: functions.pxToRem(15);\n    }\n}\n\n:host(limel-header.has-responsive-layout) {\n    display: grid;\n    grid-template-columns: repeat(\n        auto-fit,\n        minmax(\n            clamp(\n                50%,\n                var(--header-responsive-breakpoint, functions.pxToRem(352)),\n                100%\n            ),\n            1fr\n        )\n    );\n    .headings {\n        padding-right: 0.5rem;\n    }\n    slot[name='actions'] {\n        display: flex;\n        justify-content: flex-end;\n    }\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { Icon } from '../../global/shared-types/icon.types';\nimport { getIconName } from '../icon/get-icon-props';\n\n/**\n * A header is the top most visual element in a component, page, card, or a view.\n *\n * ## Usage\n * A header is the first thing that clarifies a context for users.\n * Due to their positions in the UI hierarchy, headers are the most\n * prominent elements of a user interface; and because of that, they carry both\n * vital information and fundamental controls for the area of the interface\n * they represent.\n *\n * For example, when a header is placed on top of a card, it should quickly\n * explain the card to the user. When placed on top of a modal, it should easily\n * clarify what the modal is about. When displayed on top of a fullscreen view,\n * it should indicate where in the system users are, and what part of the app\n * they are looking at.\n *\n *\n * ## Layout\n * The vital information in a header is usually manifested in form of an icon,\n * and a heading. A subheading also could be added to provide supplementary\n * information. There is also a third place for displaying supplementary information\n * or \"supporting text\", which will be rendered as a part of the subheading.\n * Along with this information, headers can also include actions, controls, or\n * menus.\n *\n * :::important\n * Such actions or menus must affect the entire section of the interface\n * which the header is representing. For example, a _Delete_ button on a card\n * header must delete that entire card and its respective contents all together,\n * not for example a selected item which is visible in the content of that card.\n * :::\n *\n *\n * :::warning\n * Do not user background color on icons in the headers. It is much better and\n * much easier for the eye if your icon itself has a color.\n * Background colors behind icons make them look like \"call to action\" buttons\n * and take a lot of attention from users.\n * :::\n *\n * @exampleComponent limel-example-header\n * @exampleComponent limel-example-header-slot-actions\n * @exampleComponent limel-example-header-colors\n * @exampleComponent limel-example-header-responsive\n * @exampleComponent limel-example-header-narrow\n * @slot actions - Content (actions) to be put inside the far right surface of\n * the header\n * @slot [no name] - DEPRECATED. The `actions` slot used to be unnamed. This\n * behavior has been deprecated, and support will be dropped in a future\n * version. Please add `slot=\"actions\"` to your elements to ensure your code\n * will continue to work with future versions of Lime Elements.\n */\n@Component({\n    tag: 'limel-header',\n    shadow: true,\n    styleUrl: 'header.scss',\n})\nexport class Header {\n    /**\n     * Icon to display\n     */\n    @Prop()\n    public icon?: string | Icon;\n\n    /**\n     * Title to display\n     */\n    @Prop()\n    public heading?: string;\n\n    /**\n     * Subheading to display\n     */\n    @Prop()\n    public subheading?: string;\n\n    /**\n     * An extra string of text to display along with with the Subheading\n     */\n    @Prop()\n    public supportingText?: string;\n\n    /**\n     * The visual divider that separates the `subheading` and the `supportingText`.\n     * It must be a single character such as `-` or `,`.\n     */\n    @Prop()\n    public subheadingDivider?: string = '·';\n\n    public render() {\n        return [\n            <div class=\"information\">\n                {this.renderIcon()}\n                <div class=\"headings\">\n                    <h1 class=\"heading\" title={this.heading}>\n                        {this.heading}\n                    </h1>\n                    <h2 class=\"subheading\" title={this.subheading}>\n                        {this.subheading}\n                        {this.renderSupportingText()}\n                    </h2>\n                </div>\n            </div>,\n            <slot name=\"actions\">\n                <slot />\n            </slot>,\n        ];\n    }\n\n    private renderIcon() {\n        const icon = getIconName(this.icon);\n\n        if (!icon) {\n            return;\n        }\n\n        return (\n            <limel-icon\n                class=\"icon\"\n                badge={true}\n                name={icon}\n                style={{\n                    '--limel-header-icon-color': `${(this.icon as Icon)?.color ?? ''}`,\n                    '--limel-header-icon-background-color': `${\n                        (this.icon as Icon)?.backgroundColor ?? ''\n                    }`,\n                    title: `${(this.icon as Icon)?.title}`,\n                }}\n            />\n        );\n    }\n\n    private renderSupportingText() {\n        if (!this.supportingText) {\n            return;\n        }\n\n        return (\n            <span class=\"subheading__supporting-text\">\n                {this.renderSubheadingDivider()}\n                {this.supportingText}\n            </span>\n        );\n    }\n\n    private renderSubheadingDivider() {\n        if (!this.subheadingDivider) {\n            return;\n        }\n\n        return <span>{this.subheadingDivider}</span>;\n    }\n}\n"],"mappings":"+EAAA,MAAMA,EAAY,8wD,MC6DLC,EAAM,M,mJA8BqB,G,CAE7BC,SACH,MAAO,CACHC,EAAA,OAAKC,MAAM,eACNC,KAAKC,aACNH,EAAA,OAAKC,MAAM,YACPD,EAAA,MAAIC,MAAM,UAAUG,MAAOF,KAAKG,SAC3BH,KAAKG,SAEVL,EAAA,MAAIC,MAAM,aAAaG,MAAOF,KAAKI,YAC9BJ,KAAKI,WACLJ,KAAKK,0BAIlBP,EAAA,QAAMQ,KAAK,WACPR,EAAA,c,CAKJG,a,cACJ,MAAMM,EAAOC,EAAYR,KAAKO,MAE9B,IAAKA,EAAM,CACP,M,CAGJ,OACIT,EAAA,cACIC,MAAM,OACNU,MAAO,KACPH,KAAMC,EACNG,MAAO,CACH,4BAA6B,IAAGC,GAAAC,EAACZ,KAAKO,QAAa,MAAAK,SAAA,SAAAA,EAAEC,SAAK,MAAAF,SAAA,EAAAA,EAAI,KAC9D,uCAAwC,IACpCG,GAAAC,EAACf,KAAKO,QAAa,MAAAQ,SAAA,SAAAA,EAAEC,mBAAe,MAAAF,SAAA,EAAAA,EAAI,KAE5CZ,MAAO,IAAGe,EAACjB,KAAKO,QAAa,MAAAU,SAAA,SAAAA,EAAEf,U,CAMvCG,uBACJ,IAAKL,KAAKkB,eAAgB,CACtB,M,CAGJ,OACIpB,EAAA,QAAMC,MAAM,+BACPC,KAAKmB,0BACLnB,KAAKkB,e,CAKVC,0BACJ,IAAKnB,KAAKoB,kBAAmB,CACzB,M,CAGJ,OAAOtB,EAAA,YAAOE,KAAKoB,kB"}

package/dist/lime-elements/p-4d225689.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as i,g as o}from"./p-bdfa539c.js";import{c as r}from"./p-ad52787a.js";import{m as n,r as a}from"./p-4e77c9a5.js";import{b as s,g as l,a as c}from"./p-d251f404.js";const h='@charset "UTF-8";limel-action-bar-item{transition:opacity 0.2s ease-in-out;position:relative;display:flex;align-items:center}limel-action-bar-item:not([is-visible]){opacity:0;pointer-events:none}button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:0.25rem;width:100%;min-width:var(--action-bar-item-height);max-width:var(--action-bar-item-max-width, 10rem);height:var(--action-bar-item-height);color:var(--limel-action-bar-item-text-color);border-radius:var(--action-bar-item-height);font-size:var(--limel-theme-default-font-size);padding:0 0.25rem}button:not([disabled]){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(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color)}button:not([disabled]):hover,button:not([disabled]):focus,button:not([disabled]):focus-visible{will-change:color, background-color, box-shadow, transform}button:not([disabled]):hover,button:not([disabled]):focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color)}button:not([disabled]):hover{box-shadow:var(--button-shadow-hovered)}button:not([disabled]):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);background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-inset-pressed)}button:not([disabled]):hover,button:not([disabled]):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button:not([disabled]):focus{outline:none}button:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button:has(.text){padding:0 0.5rem}button[disabled]{opacity:0.4}button.is-selected{color:var(--lime-primary-color, var(--limel-theme-primary-color)) !important}button.is-selected:not(:hover){box-shadow:var(--button-shadow-inset)}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.25rem}limel-icon{flex-shrink:0;width:calc(var(--action-bar-item-height) - 0.75rem);height:calc(var(--action-bar-item-height) - 0.75rem);color:var(--action-bar-item-icon-color, var(--limel-action-bar-item-text-color))}hr{all:unset;width:1px;height:1.5rem;border-radius:var(--action-bar-item-height);background-color:var(--limel-action-bar-item-text-color);opacity:0.2}@media (pointer: fine){hr{margin-right:0.5rem;margin-left:0.5rem}}limel-menu{--notification-badge-background-color:rgb(var(--contrast-600));--notification-badge-text-color:rgb(var(--contrast-1200))}limel-menu[open] button{box-shadow:var(--button-shadow-inset)}button[slot=trigger]{animation:fade-in ease-out 0.25s;font-size:0.75rem;font-weight:bold;transform:translate3d(0, 0, 0)}@keyframes fade-in{0%{scale:0.8;opacity:0}100%{scale:1;opacity:1}}';const d=class{constructor(i){t(this,i);this.select=e(this,"select",7);this.handleClick=t=>{t.stopPropagation();this.select.emit(this.item)};this.item=undefined;this.isVisible=true;this.selected=false;this.tooltipId=r()}componentWillLoad(){n(this.host)}componentDidLoad(){this.triggerIconColorWarning()}disconnectedCallback(){a(this.host)}render(){if(!this.isItem(this.item)&&this.item.separator){return i("hr",null)}return i("button",{id:this.tooltipId,type:"button",onClick:this.handleClick,disabled:this.isDisabled(),class:{"is-selected":this.isItem(this.item)&&this.item.selected}},this.renderIcon(),this.renderLabel(),this.renderTooltip())}isItem(t){return!("separator"in t)}isDisabled(){if(this.isItem(this.item)&&this.item.disabled){return true}if(!this.isVisible){return true}}renderIcon(){if(this.isItem(this.item)&&!this.item.icon){return}if("icon"in this.item){const t=l(this.item.icon);const e=c(this.item.icon,this.item.iconColor);const o=s(this.item.icon);return i("limel-icon",{name:t,"aria-label":o,"aria-hidden":o?null:"true",style:{"--action-bar-item-icon-color":`${e}`}})}}renderLabel(){if(!this.isItem(this.item)||this.item.iconOnly){return}return i("span",{class:"text"},this.item.text)}renderTooltip(){if(!this.isItem(this.item)){return}return i("limel-tooltip",{elementId:this.tooltipId,label:this.getTooltipLabel(this.item),helperLabel:this.item.commandText})}getTooltipLabel(t){const e=s(t.icon);const i=t.text;if(e&&i){return`${e} ${i}`}return i}triggerIconColorWarning(){if(this.isItem(this.item)&&this.item.iconColor){console.warn("The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.")}}get host(){return o(this)}};d.style=h;const b=class{constructor(o){t(this,o);this.select=e(this,"select",7);this.getOverflowTriggerContent=()=>{if(this.overFlowIcon){const{color:t,name:e,title:o}=this.overFlowIcon;return i("limel-icon",{style:{color:t},name:e,"aria-label":o})}return`+${this.numberOfMenuItems}`};this.handleSelect=t=>{t.stopPropagation();this.select.emit(t.detail)};this.items=undefined;this.openDirection="bottom-end";this.overFlowIcon=undefined}render(){return[i("limel-menu",{openDirection:this.openDirection,items:this.items,onSelect:this.handleSelect},i("button",{slot:"trigger"},this.getOverflowTriggerContent()))]}get numberOfMenuItems(){return this.items.filter((t=>this.isMenuItem(t))).length}isMenuItem(t){return!("separator"in t)}};export{d as limel_action_bar_item,b as limel_action_bar_overflow_menu};
-//# sourceMappingURL=p-4d225689.entry.js.map