@limetech/lime-elements 38.45.0 → 38.46.0

package/dist/lime-elements/p-67b697b4.entry.js

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

package/dist/lime-elements/p-67b697b4.entry.js.map

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

package/dist/lime-elements/p-8535dc16.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as t}from"./p-bdfa539c.js";const o='@charset "UTF-8";:host(limel-help-content){display:flex;box-sizing:border-box;flex-direction:column;gap:0.5rem;max-height:30rem;height:100%}limel-markdown{--limel-overflow-mask-vertical:linear-gradient(\n      to bottom,\n      transparent 0%,\n      black calc(0% + var(--limel-top-edge-fade-height, 1rem)),\n      black calc(100% - var(--limel-bottom-edge-fade-height, 1rem)),\n      transparent 100%\n  );-webkit-mask-image:var(--limel-overflow-mask-vertical);mask-image:var(--limel-overflow-mask-vertical);padding-top:var(--limel-top-edge-fade-height, 1rem);padding-bottom:var(--limel-bottom-edge-fade-height, 1rem);padding-right:1rem;padding-left:1rem;min-height:0;min-width:0;overflow:hidden auto}a{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;position:relative;cursor:pointer;transition:color 0.2s ease;color:rgb(var(--color-blue-default));position:sticky;bottom:0;text-decoration:none;font-size:var(--limel-theme-default-font-size);padding-bottom:0.125rem}a:before{transition:opacity 0.2s ease, transform 0.3s ease-out;content:"";position:absolute;inset:auto 0 0 0;width:calc(100% - 0.5rem);margin:auto;height:0.125rem;border-radius:1rem;background-color:currentColor;opacity:0;transform:scale(0.6)}a:hover{color:rgb(var(--color-blue-default))}a:hover:before{opacity:0.3;transform:scale(1)}span{padding:0 1rem 0.5rem 1rem;min-width:0}';const i=class{constructor(o){e(this,o);this.renderReadMoreLink=()=>{var e,o,i,r;if(!this.readMoreLink){return}return t("span",null,t("a",{href:(e=this.readMoreLink)===null||e===void 0?void 0:e.href,target:(o=this.readMoreLink)===null||o===void 0?void 0:o.target,title:(i=this.readMoreLink)===null||i===void 0?void 0:i.title,tabindex:"0"},(r=this.readMoreLink)===null||r===void 0?void 0:r.text))};this.value=undefined;this.readMoreLink=undefined}render(){return[t("limel-markdown",{value:this.value}),this.renderReadMoreLink()]}};i.style=o;export{i as limel_help_content};
-//# sourceMappingURL=p-8535dc16.entry.js.map

package/dist/lime-elements/p-8535dc16.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["limelHelpContentCss","HelpContent","this","renderReadMoreLink","readMoreLink","h","href","_a","target","_b","title","_c","tabindex","_d","text","render","value"],"sources":["./src/components/help/limel-help-content.scss?tag=limel-help-content&encapsulation=shadow","./src/components/help/help-content.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n:host(limel-help-content) {\n    display: flex;\n    box-sizing: border-box;\n    flex-direction: column;\n    gap: 0.5rem;\n\n    max-height: 30rem;\n    height: 100%;\n}\n\nlimel-markdown {\n    @include mixins.fade-out-overflowed-content-on-edges(vertically);\n\n    padding-right: 1rem;\n    padding-left: 1rem;\n    min-height: 0;\n    min-width: 0;\n    overflow: hidden auto;\n}\n\na {\n    @include mixins.truncate-text;\n    @include mixins.hyperlink;\n\n    position: sticky;\n    bottom: 0;\n\n    text-decoration: none;\n    font-size: var(--limel-theme-default-font-size);\n    padding-bottom: 0.125rem;\n}\n\nspan {\n    padding: 0 1rem 0.5rem 1rem;\n    min-width: 0;\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { Link } from '../../global/shared-types/link.types';\n\n/**\n * Help content\n * This is scrollable content that is placed in the popover of the Help component.\n * Moved here mostly to avoid having inlined styles in the parent component.\n * Since you cannot send styles to the Portal component, we need to have this\n * child component.\n *\n * @private\n */\n@Component({\n    tag: 'limel-help-content',\n    shadow: true,\n    styleUrl: 'limel-help-content.scss',\n})\nexport class HelpContent {\n    @Prop()\n    public value: string;\n\n    @Prop()\n    public readMoreLink?: Link;\n\n    public render() {\n        return [\n            <limel-markdown value={this.value} />,\n            this.renderReadMoreLink(),\n        ];\n    }\n\n    private renderReadMoreLink = () => {\n        if (!this.readMoreLink) {\n            return;\n        }\n\n        return (\n            <span>\n                <a\n                    href={this.readMoreLink?.href}\n                    target={this.readMoreLink?.target}\n                    title={this.readMoreLink?.title}\n                    tabindex=\"0\"\n                >\n                    {this.readMoreLink?.text}\n                </a>\n            </span>\n        );\n    };\n}\n"],"mappings":"2CAAA,MAAMA,EAAsB,80C,MCiBfC,EAAW,M,yBAcZC,KAAAC,mBAAqB,K,YACzB,IAAKD,KAAKE,aAAc,CACpB,M,CAGJ,OACIC,EAAA,YACIA,EAAA,KACIC,MAAMC,EAAAL,KAAKE,gBAAY,MAAAG,SAAA,SAAAA,EAAED,KACzBE,QAAQC,EAAAP,KAAKE,gBAAY,MAAAK,SAAA,SAAAA,EAAED,OAC3BE,OAAOC,EAAAT,KAAKE,gBAAY,MAAAO,SAAA,SAAAA,EAAED,MAC1BE,SAAS,MAERC,EAAAX,KAAKE,gBAAY,MAAAS,SAAA,SAAAA,EAAEC,MAErB,E,iDAtBRC,SACH,MAAO,CACHV,EAAA,kBAAgBW,MAAOd,KAAKc,QAC5Bd,KAAKC,qB"}

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

@@ -1,2 +0,0 @@
-import{r as o,h as r}from"./p-bdfa539c.js";const e='@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 t=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("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}))]}};t.style=e;export{t as limel_help};
-//# sourceMappingURL=p-b076958e.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["helpCss","HelpComponent","this","openPopover","event","stopPropagation","isOpen","onPopoverClose","render","h","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 } 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            <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        ];\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":"2CAAA,MAAMA,EAAU,6yD,MC+BHC,EAAa,M,yBAoDdC,KAAAC,YAAeC,IACnBA,EAAMC,kBACNH,KAAKI,OAAS,IAAI,EAGdJ,KAAAK,eAAkBH,IACtBA,EAAMC,kBACNH,KAAKI,OAAS,KAAK,E,kCAhDE,I,+CAYa,Y,YAGrB,K,CAEVE,SACH,MAAO,CACHC,EAAA,iBACIC,KAAMR,KAAKI,OACXK,QAAST,KAAKK,eACdK,cAAeV,KAAKU,eAEpBH,EAAA,UACII,KAAK,UACLC,QAASZ,KAAKC,YACdY,MAAO,CACH,UAAWb,KAAKI,SAGnBJ,KAAKc,SAEVP,EAAA,sBACIQ,MAAOf,KAAKe,MACZC,aAAchB,KAAKgB,gB"}

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

@@ -1,2 +0,0 @@
-import{r as i,c as t,h as e}from"./p-bdfa539c.js";import{t as s}from"./p-df36e1ae.js";import{g as r,a as n,b as a,c as h}from"./p-89524e09.js";import"./p-d251f404.js";const l='@charset "UTF-8";:host(limel-file){position:relative}.drag-and-drop-tip{pointer-events:none;position:absolute;box-sizing:border-box;margin:0.25rem;inset:0;display:flex;align-items:center;justify-content:flex-end;flex-wrap:nowrap;border-radius:0.25rem;border:1px dashed rgb(var(--contrast-700));padding:0 0.5rem}.drag-and-drop-tip .invisible-label-mock{flex-shrink:0;opacity:0;padding-right:1rem;padding-left:1.5rem}.drag-and-drop-tip .tip{font-size:smaller;color:var(--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 o={id:null,text:null,removable:true};const d=class{constructor(e){i(this,e);this.change=t(this,"change",7);this.interact=t(this,"interact",7);this.dropZoneTip=()=>this.getTranslation("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("limel-file-dropzone",{disabled:this.disabled||this.readonly||!!this.value,accept:this.accept,onFilesSelected:this.handleNewFiles},this.renderChipset()),this.renderDragAndDropTip()]}renderDragAndDropTip(){if(this.value||this.disabled||this.readonly){return}return e("div",{class:"drag-and-drop-tip"},e("span",{class:"invisible-label-mock",role:"presentation"},this.label),e("span",{class:"tip"},this.dropZoneTip()))}getChipArray(){if(!this.value){return[]}return[Object.assign(Object.assign({},o),{text:this.value.filename,id:this.value.id,icon:{name:r(this.value),title:n(this.value),color:a(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 s.get(i,this.language)}};d.style=l;export{d as limel_file};
-//# sourceMappingURL=p-e22edc40.entry.js.map

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

@@ -1 +0,0 @@
-{"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","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, 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            <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        ];\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":"uKAAA,MAAMA,EAAU,0pBCYhB,MAAMC,EAA0B,CAC5BC,GAAI,KACJC,KAAM,KACNC,UAAW,M,MA2CFC,EAAI,M,2FA2FLC,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,wDAlJZ,M,cAMA,M,cAOA,M,aAOV,M,YAMO,I,cAMK,I,CActBmB,SACH,MAAO,CACHC,EAAA,uBACIC,SAAUjB,KAAKiB,UAAYjB,KAAKkB,YAAclB,KAAKmB,MACnDC,OAAQpB,KAAKoB,OACbC,gBAAiBrB,KAAKG,gBAErBH,KAAKsB,iBAEVtB,KAAKuB,uB,CAILA,uBACJ,GAAIvB,KAAKmB,OAASnB,KAAKiB,UAAYjB,KAAKkB,SAAU,CAC9C,M,CAGJ,OACIF,EAAA,OAAKQ,MAAM,qBACPR,EAAA,QAAMQ,MAAM,uBAAuBC,KAAK,gBACnCzB,KAAK0B,OAEVV,EAAA,QAAMQ,MAAM,OAAOxB,KAAKC,e,CAc5B0B,eACJ,IAAK3B,KAAKmB,MAAO,CACb,MAAO,E,CAGX,MAAO,C,+BAEIxB,GAAiB,CACpBE,KAAMG,KAAKmB,MAAMS,SACjBhC,GAAII,KAAKmB,MAAMvB,GACfiC,KAAM,CACFC,KAAMC,EAAY/B,KAAKmB,OACvBa,MAAOC,EAAsBjC,KAAKmB,OAClCe,MAAOC,EAAanC,KAAKmB,OACzBiB,gBAAiBC,EAAuBrC,KAAKmB,QAEjDmB,KAAMtC,KAAKmB,MAAMmB,KACjBC,UAAWvC,KAAKmB,MAAMoB,Y,CAK1BjB,gBACJ,MAAMkB,EACFxB,EAAA,kBACIC,SAAUjB,KAAKiB,SACfC,SAAUlB,KAAKkB,SACfuB,QAASzC,KAAKyC,QACdf,MAAO1B,KAAK0B,MACZgB,YAAY,kBACZC,SAAU3C,KAAK2C,SACfC,SAAU5C,KAAKS,oBACfoC,WAAY7C,KAAKa,mBACjBiC,SAAU9C,KAAK8C,SACfC,KAAK,QACL5B,MAAOnB,KAAK2B,iBAIpB,GAAI3B,KAAKmB,MAAO,CACZ,OAAOqB,C,CAGX,OACIxB,EAAA,oBACII,OAAQpB,KAAKoB,OACbH,SAAUjB,KAAKiB,UAAYjB,KAAKkB,UAE/BsB,E,CAkBLnC,eAAeD,GACnBA,EAAMM,kBACNN,EAAM4C,gB,CAGF9C,eAAe+C,GACnB,OAAOC,EAAUC,IAAIF,EAAKjD,KAAK2C,S"}

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

@@ -1,2 +0,0 @@
-import{r as e,h as t}from"./p-bdfa539c.js";import{m as o}from"./p-7192af6b.js";import{g as r}from"./p-2c35fb9d.js";import"./p-4e9b4087.js";class a{constructor(e){this.handleIntersection=e=>{for(const t of e){if(t.isIntersecting){const e=t.target;const o=e.dataset.src;if(o){e.setAttribute("src",o);delete e.dataset.src}this.observer.unobserve(e)}}};this.observer=new IntersectionObserver(this.handleIntersection);const t=e.querySelectorAll("img");for(const e of t){this.observer.observe(e)}}disconnect(){this.observer.disconnect()}}const l='@charset "UTF-8";code{font-family:ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;font-size:var(--limel-theme-default-small-font-size);letter-spacing:-0.0125rem;color:rgb(var(--contrast-1300));-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;display:inline-block;border-radius:0.25rem;padding:0.03125rem 0.25rem;background-color:rgb(var(--contrast-600))}pre>code{display:block;margin:0.5rem 0;padding:0.5rem 0.75rem;overflow:auto;white-space:pre-wrap}h1{font-size:1.5rem}h2{font-size:1.25rem}h3{font-size:1.125rem}h4{font-size:1rem}h5{font-size:var(--limel-theme-default-font-size)}h6{font-size:0.75rem}h1,h2{margin-top:0.5rem;margin-bottom:0.5rem;letter-spacing:-0.03125rem;font-weight:500}h3,h4{margin-top:0.75rem;margin-bottom:0.25rem;font-weight:600}h5,h6{margin-top:0.5rem;margin-bottom:0.125rem;font-weight:600}h1,h2,h3,h4,h5,h6{word-break:break-word;hyphens:auto;-webkit-hyphens:auto}:not([contenteditable=true]) h1,:not([contenteditable=true]) h2,:not([contenteditable=true]) h3,:not([contenteditable=true]) h4,:not([contenteditable=true]) h5,:not([contenteditable=true]) h6{text-wrap:balance}[contenteditable=true] h1,[contenteditable=true] h2,[contenteditable=true] h3,[contenteditable=true] h4,[contenteditable=true] h5,[contenteditable=true] h6{text-wrap:initial}:host(limel-markdown.truncate-paragraphs) p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}p,li{font-size:var(--limel-theme-default-font-size);word-break:break-word}a{word-break:break-all}p{margin-top:0;margin-bottom:0.5rem}p:only-child{margin-bottom:0}a{transition:color 0.2s ease;color:var(--markdown-hyperlink-color, rgb(var(--color-blue-dark)));text-decoration:none}a:hover{color:var(--markdown-hyperlink-color--hovered, rgb(var(--color-blue-default)))}hr{margin:1.75rem 0 2rem 0;border-width:0;border-top:1px solid rgb(var(--contrast-500))}ul{list-style:none}ul li{position:relative;margin-left:0.75rem}ul li:before{content:"";position:absolute;left:-0.5rem;top:0.5rem;width:0.25rem;height:0.25rem;border-radius:50%;background-color:rgb(var(--contrast-700));display:block}ol{margin-top:0.25rem;padding-left:1rem}ul{margin-top:0.25rem;padding-left:0}ul ul,ul ol,ol ol,ol ul{margin-left:0}li{margin-bottom:0.25rem}:host(limel-markdown:not(.no-table-styles)) table{table-layout:auto;min-width:100%;border-collapse:collapse;border-spacing:0;background:transparent;margin:0.75rem 0}:host(limel-markdown:not(.no-table-styles)) tbody{border:1px solid rgb(var(--contrast-400));border-radius:0.25rem}:host(limel-markdown:not(.no-table-styles)) th,:host(limel-markdown:not(.no-table-styles)) td{text-align:left;vertical-align:top;transition:background-color 0.2s ease;font-size:var(--limel-theme-default-font-size)}:host(limel-markdown:not(.no-table-styles)) td{padding:0.5rem 0.375rem 0.75rem 0.375rem}:host(limel-markdown:not(.no-table-styles)) tr th{background-color:rgb(var(--contrast-400));padding:0.25rem 0.375rem;font-weight:normal}:host(limel-markdown:not(.no-table-styles)) tr th:only-child{text-align:center}:host(limel-markdown:not(.no-table-styles)) tbody tr:nth-child(odd) td{background-color:rgb(var(--contrast-200))}:host(limel-markdown:not(.no-table-styles)) tbody tr:hover td{background-color:rgb(var(--contrast-300))}table{display:block;box-sizing:border-box;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}blockquote{position:relative;max-width:100%;margin:0.75rem 0;padding:0.5rem;border-left:0.25rem solid rgb(var(--contrast-500));background-color:rgb(var(--contrast-200))}blockquote:before,blockquote:after{position:absolute;line-height:0;font-size:2rem;opacity:0.4}blockquote:before{content:"“";left:-0.5rem;top:0.5rem}blockquote:after{content:"”";right:-0.25rem;bottom:-0.25rem}blockquote blockquote{padding-top:0;padding-right:0;padding-bottom:0;padding-left:0.25rem;border-color:rgb(var(--contrast-700));border-left-width:1px}blockquote blockquote:before,blockquote blockquote:after{display:none}blockquote:has(>blockquote){padding-left:0.25rem;padding-bottom:0}dl{display:grid;grid-template-columns:1fr 2fr;grid-template-rows:1fr;margin-bottom:2rem;border:1px solid rgb(var(--contrast-400));border-radius:0.375rem;background-color:rgb(var(--contrast-200))}dl dt,dl dd{padding:0.375rem 0.5rem;font-size:var(--limel-theme-default-font-size);margin:0}dl dt:nth-of-type(even),dl dd:nth-of-type(even){background-color:rgb(var(--contrast-300))}dl dt:first-child{border-top-left-radius:0.375rem}dl dt:last-child{border-bottom-left-radius:0.375rem}dl dd:first-child{border-top-right-radius:0.375rem}dl dd:last-child{border-bottom-right-radius:0.375rem}img{max-width:100%;border-radius:0.25rem}kbd{font-family:ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;font-weight:600;color:rgb(var(--contrast-1100));background-color:rgb(var(--contrast-200));white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:normal;padding:0.125rem 0.5rem;margin:0 0.25rem;box-shadow:var(--button-shadow-normal), 0 0.03125rem 0.21875rem 0 rgba(var(--contrast-100), 0.5) inset;border-radius:0.125rem;border-style:solid;border-color:rgba(var(--contrast-600), 0.8);border-width:0 1px 0.125rem 1px}:host(limel-markdown.adjust-for-table-cell) img{max-height:1.25rem;vertical-align:middle}:host(limel-markdown.adjust-for-table-cell) p{display:inline}:host(limel-markdown.adjust-for-table-cell) h1,:host(limel-markdown.adjust-for-table-cell) h2,:host(limel-markdown.adjust-for-table-cell) h3,:host(limel-markdown.adjust-for-table-cell) h4,:host(limel-markdown.adjust-for-table-cell) h5,:host(limel-markdown.adjust-for-table-cell) h6{display:inline-block;vertical-align:bottom;font-size:var(--limel-theme-default-font-size);margin:0 0.25rem 0 0;letter-spacing:normal;font-weight:500}:host(limel-markdown.adjust-for-table-cell) h1:before,:host(limel-markdown.adjust-for-table-cell) h2:before,:host(limel-markdown.adjust-for-table-cell) h3:before,:host(limel-markdown.adjust-for-table-cell) h4:before,:host(limel-markdown.adjust-for-table-cell) h5:before,:host(limel-markdown.adjust-for-table-cell) h6:before{opacity:0.6;vertical-align:middle;font-size:0.5rem;border-radius:0.25rem 0 0 0.25rem;padding:0.25rem;padding-right:2rem;margin-right:-1.75rem;background:linear-gradient(to right, rgb(var(--contrast-800), 0.6), rgb(var(--contrast-800), 0))}:host(limel-markdown.adjust-for-table-cell) h1:before{content:"H1"}:host(limel-markdown.adjust-for-table-cell) h2:before{content:"H2"}:host(limel-markdown.adjust-for-table-cell) h3:before{content:"H3"}:host(limel-markdown.adjust-for-table-cell) h4:before{content:"H4"}:host(limel-markdown.adjust-for-table-cell) h5:before{content:"H5"}:host(limel-markdown.adjust-for-table-cell) h6:before{content:"H6"}:host(limel-markdown.adjust-for-table-cell) pre{margin:0}:host(limel-markdown.adjust-for-table-cell) pre>code{padding:0.125rem;margin:0}:host(limel-markdown.adjust-for-table-cell) dl{margin:0}:host(limel-markdown.adjust-for-table-cell) dl dt,:host(limel-markdown.adjust-for-table-cell) dl dd{padding:0.00625rem 0.125rem}*,*::before,*::after{box-sizing:border-box}* :where(:not(img,video,svg,canvas,iframe)),*::before :where(:not(img,video,svg,canvas,iframe)),*::after :where(:not(img,video,svg,canvas,iframe)){min-width:0;min-height:0}hr{border-top:1px solid rgb(var(--contrast-700))}.MsoNormal{margin:0}:host(limel-markdown.reset-img-height) #markdown img{height:auto}';const n=class{constructor(t){e(this,t);this.imageIntersectionObserver=null;this.value="";this.whitelist=r.markdownWhitelist;this.lazyLoadImages=false;this.removeEmptyParagraphs=true}async textChanged(){var e;try{this.cleanupImageIntersectionObserver();const t=await o(this.value,{forceHardLineBreaks:true,whitelist:(e=this.whitelist)!==null&&e!==void 0?e:[],lazyLoadImages:this.lazyLoadImages,removeEmptyParagraphs:this.removeEmptyParagraphs});this.rootElement.innerHTML=t;this.setupImageIntersectionObserver()}catch(e){console.error(e)}}handleRemoveEmptyParagraphsChange(){return this.textChanged()}async componentDidLoad(){this.textChanged()}disconnectedCallback(){this.cleanupImageIntersectionObserver()}render(){return[t("div",{id:"markdown",ref:e=>this.rootElement=e})]}setupImageIntersectionObserver(){if(this.lazyLoadImages){this.imageIntersectionObserver=new a(this.rootElement)}}cleanupImageIntersectionObserver(){if(this.imageIntersectionObserver){this.imageIntersectionObserver.disconnect();this.imageIntersectionObserver=null}}static get watchers(){return{value:["textChanged"],removeEmptyParagraphs:["handleRemoveEmptyParagraphsChange"]}}};n.style=l;export{n as limel_markdown};
-//# sourceMappingURL=p-f8cbb607.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["ImageIntersectionObserver","constructor","containerElement","this","handleIntersection","entries","entry","isIntersecting","img","target","dataSrc","dataset","src","setAttribute","observer","unobserve","IntersectionObserver","images","querySelectorAll","observe","disconnect","markdownCss","Markdown","imageIntersectionObserver","globalConfig","markdownWhitelist","async","cleanupImageIntersectionObserver","html","markdownToHTML","value","forceHardLineBreaks","whitelist","_a","lazyLoadImages","removeEmptyParagraphs","rootElement","innerHTML","setupImageIntersectionObserver","error","console","handleRemoveEmptyParagraphsChange","textChanged","disconnectedCallback","render","h","id","ref","el"],"sources":["./src/components/markdown/image-intersection-observer.ts","./src/components/markdown/markdown.scss?tag=limel-markdown&encapsulation=shadow","./src/components/markdown/markdown.tsx"],"sourcesContent":["export class ImageIntersectionObserver {\n    private observer: IntersectionObserver;\n\n    /**\n     * @param containerElement - The element containing images to observe.\n     */\n    public constructor(containerElement: HTMLElement) {\n        this.observer = new IntersectionObserver(this.handleIntersection);\n\n        const images = containerElement.querySelectorAll('img');\n        for (const img of images) {\n            this.observer.observe(img);\n        }\n    }\n\n    public disconnect() {\n        this.observer.disconnect();\n    }\n\n    private readonly handleIntersection = (\n        entries: IntersectionObserverEntry[]\n    ) => {\n        for (const entry of entries) {\n            if (entry.isIntersecting) {\n                const img = entry.target as HTMLImageElement;\n                const dataSrc = img.dataset.src;\n\n                if (dataSrc) {\n                    img.setAttribute('src', dataSrc);\n                    delete img.dataset.src;\n                }\n\n                this.observer.unobserve(img);\n            }\n        }\n    };\n}\n","/**\n* @prop --markdown-hyperlink-color: color of text for hyperlinks. Defaults to `--color-blue-dark`;\n* @prop --markdown-hyperlink-color--hovered: color of text for hyperlinks when hovered. Defaults to `--color-blue-default`;\n*/\n\n@forward './partial-styles/pre-code';\n@forward './partial-styles/headings';\n@forward './partial-styles/body-text';\n@forward './partial-styles/lists';\n@forward './partial-styles/tables';\n@forward './partial-styles/blockquotes';\n@forward './partial-styles/definition-lists';\n@forward './partial-styles/img';\n@forward './partial-styles/kbd';\n@forward './partial-styles/_adjust-for-table-cell';\n\n*,\n*::before,\n*::after {\n    box-sizing: border-box;\n\n    & :where(:not(img, video, svg, canvas, iframe)) {\n        min-width: 0;\n        min-height: 0;\n    }\n}\n\n// body-text\nhr {\n    border-top: 1px solid rgb(var(--contrast-700));\n}\n\n.MsoNormal {\n    margin: 0;\n}\n\n:host(limel-markdown.reset-img-height) {\n    // This is not a publicly documented helper class, intended for CRM's internal use.\n    // Reset image height to auto to avoid issues with fixed heights in some markdown content\n    // e.g., content copied from MS Word or emails that are sent from a user that has\n    // added fixed heights to images that appear in the activity feed.\n    #markdown {\n        img {\n            height: auto;\n        }\n    }\n}\n","import { Component, h, Prop, Watch } from '@stencil/core';\nimport { markdownToHTML } from './markdown-parser';\nimport { globalConfig } from '../../global/config';\nimport { CustomElementDefinition } from '../../global/shared-types/custom-element.types';\nimport { ImageIntersectionObserver } from './image-intersection-observer';\n\n/**\n * The Markdown component receives markdown syntax\n * and renders it as HTML.\n *\n * @exampleComponent limel-example-markdown-headings\n * @exampleComponent limel-example-markdown-emphasis\n * @exampleComponent limel-example-markdown-lists\n * @exampleComponent limel-example-markdown-links\n * @exampleComponent limel-example-markdown-images\n * @exampleComponent limel-example-markdown-code\n * @exampleComponent limel-example-markdown-footnotes\n * @exampleComponent limel-example-markdown-tables\n * @exampleComponent limel-example-markdown-html\n * @exampleComponent limel-example-markdown-keys\n * @exampleComponent limel-example-markdown-blockquotes\n * @exampleComponent limel-example-markdown-horizontal-rule\n * @exampleComponent limel-example-markdown-custom-component\n * @exampleComponent limel-example-markdown-remove-empty-paragraphs\n * @exampleComponent limel-example-markdown-composite\n */\n@Component({\n    tag: 'limel-markdown',\n    styleUrl: 'markdown.scss',\n    shadow: true,\n})\nexport class Markdown {\n    /**\n     * The input text. Treated as GitHub Flavored Markdown, with the addition\n     * that any included HTML will be parsed and rendered as HTML, rather than\n     * as text.\n     */\n    @Prop()\n    public value: string = '';\n\n    /**\n     * Whitelisted html elements.\n     *\n     * Any custom element added here will not be sanitized and thus rendered.\n     * Can also be set via `limel-config`. Setting this property will override\n     * the global config.\n     * @alpha\n     */\n    @Prop()\n    public whitelist?: CustomElementDefinition[] =\n        globalConfig.markdownWhitelist;\n\n    /**\n     * Enable lazy loading for images\n     */\n    @Prop({ reflect: true })\n    public lazyLoadImages = false;\n\n    /**\n     * Set to `false` to preserve empty paragraphs before rendering.\n     * Empty paragraphs are paragraphs that do not contain\n     * any meaningful content (text, images, etc.), or only contain\n     * whitespace (`<br />` or `&nbsp;`).\n     */\n    @Prop({ reflect: true })\n    public removeEmptyParagraphs = true;\n\n    @Watch('value')\n    public async textChanged() {\n        try {\n            this.cleanupImageIntersectionObserver();\n\n            const html = await markdownToHTML(this.value, {\n                forceHardLineBreaks: true,\n                whitelist: this.whitelist ?? [],\n                lazyLoadImages: this.lazyLoadImages,\n                removeEmptyParagraphs: this.removeEmptyParagraphs,\n            });\n\n            this.rootElement.innerHTML = html;\n\n            this.setupImageIntersectionObserver();\n        } catch (error) {\n            console.error(error);\n        }\n    }\n\n    @Watch('removeEmptyParagraphs')\n    public handleRemoveEmptyParagraphsChange() {\n        return this.textChanged();\n    }\n\n    private rootElement: HTMLDivElement;\n    private imageIntersectionObserver: ImageIntersectionObserver | null = null;\n\n    public async componentDidLoad() {\n        this.textChanged();\n    }\n\n    public disconnectedCallback() {\n        this.cleanupImageIntersectionObserver();\n    }\n\n    public render() {\n        return [\n            <div\n                id=\"markdown\"\n                ref={(el) => (this.rootElement = el as HTMLDivElement)}\n            />,\n        ];\n    }\n\n    private setupImageIntersectionObserver() {\n        if (this.lazyLoadImages) {\n            this.imageIntersectionObserver = new ImageIntersectionObserver(\n                this.rootElement\n            );\n        }\n    }\n\n    private cleanupImageIntersectionObserver() {\n        if (this.imageIntersectionObserver) {\n            this.imageIntersectionObserver.disconnect();\n            this.imageIntersectionObserver = null;\n        }\n    }\n}\n"],"mappings":"iJAAaA,EAMTC,YAAmBC,GAaFC,KAAAC,mBACbC,IAEA,IAAK,MAAMC,KAASD,EAAS,CACzB,GAAIC,EAAMC,eAAgB,CACtB,MAAMC,EAAMF,EAAMG,OAClB,MAAMC,EAAUF,EAAIG,QAAQC,IAE5B,GAAIF,EAAS,CACTF,EAAIK,aAAa,MAAOH,UACjBF,EAAIG,QAAQC,G,CAGvBT,KAAKW,SAASC,UAAUP,E,IAzBhCL,KAAKW,SAAW,IAAIE,qBAAqBb,KAAKC,oBAE9C,MAAMa,EAASf,EAAiBgB,iBAAiB,OACjD,IAAK,MAAMV,KAAOS,EAAQ,CACtBd,KAAKW,SAASK,QAAQX,E,EAIvBY,aACHjB,KAAKW,SAASM,Y,EChBtB,MAAMC,EAAc,o0O,MC+BPC,EAAQ,M,yBA8DTnB,KAAAoB,0BAA8D,K,WAvD/C,G,eAYnBC,EAAaC,kB,oBAMO,M,2BASO,I,CAGxBC,oB,MACH,IACIvB,KAAKwB,mCAEL,MAAMC,QAAaC,EAAe1B,KAAK2B,MAAO,CAC1CC,oBAAqB,KACrBC,WAAWC,EAAA9B,KAAK6B,aAAS,MAAAC,SAAA,EAAAA,EAAI,GAC7BC,eAAgB/B,KAAK+B,eACrBC,sBAAuBhC,KAAKgC,wBAGhChC,KAAKiC,YAAYC,UAAYT,EAE7BzB,KAAKmC,gC,CACP,MAAOC,GACLC,QAAQD,MAAMA,E,EAKfE,oCACH,OAAOtC,KAAKuC,a,CAMThB,yBACHvB,KAAKuC,a,CAGFC,uBACHxC,KAAKwB,kC,CAGFiB,SACH,MAAO,CACHC,EAAA,OACIC,GAAG,WACHC,IAAMC,GAAQ7C,KAAKiC,YAAcY,I,CAKrCV,iCACJ,GAAInC,KAAK+B,eAAgB,CACrB/B,KAAKoB,0BAA4B,IAAIvB,EACjCG,KAAKiC,Y,EAKTT,mCACJ,GAAIxB,KAAKoB,0BAA2B,CAChCpB,KAAKoB,0BAA0BH,aAC/BjB,KAAKoB,0BAA4B,I"}