@limetech/lime-elements 37.67.0 → 37.69.0

package/dist/lime-elements/p-9f8aa8e7.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as i,H as t}from"./p-443111b3.js";import{g as r}from"./p-2f777fdb.js";const l="*{box-sizing:border-box;min-width:0}:host(limel-dynamic-label){--limel-dynamic-label-min-height:1.75rem;display:flex;gap:0.5rem;align-items:flex-start;border-radius:0.5rem;min-width:0}limel-icon{--limel-icon-svg-margin:0.125rem;border-radius:0.25rem;flex-shrink:0;width:var(--limel-dynamic-label-min-height);color:rgb(var(--contrast-900))}label{flex-grow:1;font-size:0.8125rem;line-height:normal;color:var(--mdc-theme-on-surface);padding-top:0.375rem}";const s=class{constructor(i){e(this,i);this.value=undefined;this.defaultLabel={};this.labels=[]}render(){var e,i;const t=this.labels.find((e=>e.value===this.value));return[this.renderIcon((e=t===null||t===void 0?void 0:t.icon)!==null&&e!==void 0?e:this.defaultLabel.icon),this.renderLabel((i=t===null||t===void 0?void 0:t.text)!==null&&i!==void 0?i:this.defaultLabel.text)]}renderIcon(e){const t=r(e);if(!t){return}let l;let s;if(typeof e==="object"){l=e.color;s=e.backgroundColor}const n={role:"presentation",name:t,style:{color:l,"background-color":s}};return i("limel-icon",Object.assign({},n))}renderLabel(e=""){return i("label",null,e)}};s.style=l;const n=":host(limel-helper-line){transition:opacity 0.2s ease;box-sizing:border-box;display:grid;min-width:0;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:0.6875rem;line-height:normal;color:rgb(var(--contrast-1200))}div{display:flex;justify-content:space-between;gap:0.75rem;overflow:hidden;padding:0 1rem}:host(limel-helper-line.invalid) .helper-text{color:var(--mdc-theme-error)}.counter{flex-shrink:0;margin-left:auto}.helper-text,.counter{padding-top:0.125rem}:host(limel-helper-line){transition:grid-template-rows var(--limel-h-l-grid-template-rows-transition-speed, 0.46s) cubic-bezier(1, 0.09, 0, 0.89);grid-template-rows:var(--limel-h-l-grid-template-rows, 1fr)}:host(limel-helper-line.hide){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}";const o=class{constructor(t){e(this,t);this.hasContent=()=>!!(this.maxLength>0||this.helperText&&this.helperText.length>0);this.renderHelperText=()=>{if(!this.helperText){return}return i("span",{class:"helper-text",id:this.helperTextId},this.helperText)};this.renderCharacterCounter=()=>{const e=`${this.length} / ${this.maxLength}`;if(!this.maxLength){return}return i("span",{class:"counter"},e)};this.helperText=undefined;this.length=undefined;this.maxLength=undefined;this.invalid=false;this.helperTextId=undefined}render(){return i(t,{tabIndex:-1,class:{invalid:this.invalid},style:!this.hasContent()?{display:"none"}:{},"aria-hidden":!this.hasContent()},i("div",null,this.renderHelperText(),this.renderCharacterCounter()))}};o.style=n;export{s as limel_dynamic_label,o as limel_helper_line};
+//# sourceMappingURL=p-9f8aa8e7.entry.js.map

package/dist/lime-elements/p-9f8aa8e7.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dynamicLabelCss","DynamicLabel","render","label","this","labels","find","l","value","renderIcon","_a","icon","defaultLabel","renderLabel","_b","text","iconName","getIconName","iconColor","iconBackgroundColor","color","backgroundColor","iconProps","role","name","style","h","Object","assign","helperLineCss","HelperLine","hasContent","maxLength","helperText","length","renderHelperText","class","id","helperTextId","renderCharacterCounter","counter","Host","tabIndex","invalid","display"],"sources":["./src/components/dynamic-label/dynamic-label.scss?tag=limel-dynamic-label&encapsulation=shadow","./src/components/dynamic-label/dynamic-label.tsx","./src/components/helper-line/helper-line.scss?tag=limel-helper-line&encapsulation=shadow","./src/components/helper-line/helper-line.tsx"],"sourcesContent":["* {\n    box-sizing: border-box;\n    min-width: 0;\n}\n\n:host(limel-dynamic-label) {\n    --limel-dynamic-label-min-height: 1.75rem;\n    display: flex;\n    gap: 0.5rem;\n    align-items: flex-start;\n    border-radius: 0.5rem;\n    min-width: 0;\n}\n\nlimel-icon {\n    --limel-icon-svg-margin: 0.125rem;\n    border-radius: 0.25rem;\n    flex-shrink: 0;\n    width: var(--limel-dynamic-label-min-height);\n    color: rgb(\n        var(--contrast-900)\n    ); // The default `false` color. Will be overwritten by `Icon`\n}\n\nlabel {\n    flex-grow: 1;\n    font-size: 0.8125rem; // `13px`, Like Checkbox & Switch\n    line-height: normal;\n    color: var(--mdc-theme-on-surface);\n    padding-top: 0.375rem;\n}\n","import { getIconName } from '../icon/get-icon-props';\nimport { Component, Prop, h } from '@stencil/core';\nimport { Label, LabelValue } from './label.types';\nimport { Icon } from '../../interface';\n\n/**\n * This components displays a different label depending on the current given\n * value. A label can consist of a text and an optional icon. If no matching\n * label is found among the given `labels`, the `defaultLabel` will be displayed.\n *\n * One use case of the component is to enhance the visualization of a `boolean`\n * field like a checkbox or switch in a `readonly` state.\n *\n * The reason we offer this component is that the default styling\n * of the Checkbox or Toggle switch in the `readonly` state may not always\n * provide the best way of _visualizing information_, potentially leading to\n * confusion and negatively affecting the end-users' experience.\n *\n * @exampleComponent limel-example-dynamic-label\n * @exampleComponent limel-example-dynamic-label-readonly-boolean\n * @beta\n */\n@Component({\n    tag: 'limel-dynamic-label',\n    shadow: true,\n    styleUrl: 'dynamic-label.scss',\n})\nexport class DynamicLabel {\n    /**\n     * The current value of the component which is used to match with the given\n     * `labels` to determine what label to display.\n     *\n     * If not matching label is found, the `defaultLabel` is displayed.\n     */\n    @Prop()\n    public value: LabelValue;\n\n    /**\n     * The label to display when no matching value is found in the `labels`\n     * array. This is a fallback label that ensures there's always a label\n     * displayed for the component.\n     */\n    @Prop({ reflect: true })\n    public defaultLabel: Omit<Label, 'value'> = {};\n\n    /**\n     * A list of available labels. Each label has a corresponding value that\n     * will be matched with the current `value` of the component to determine\n     * what label to display.\n     */\n    @Prop()\n    public labels: Label[] = [];\n\n    public render() {\n        const label = this.labels.find((l) => l.value === this.value);\n\n        return [\n            this.renderIcon(label?.icon ?? this.defaultLabel.icon),\n            this.renderLabel(label?.text ?? this.defaultLabel.text),\n        ];\n    }\n\n    private renderIcon(icon?: string | Icon) {\n        const iconName = getIconName(icon);\n        if (!iconName) {\n            return;\n        }\n\n        let iconColor: string | undefined;\n        let iconBackgroundColor: string | undefined;\n\n        if (typeof icon === 'object') {\n            iconColor = icon.color;\n            iconBackgroundColor = icon.backgroundColor;\n        }\n\n        const iconProps = {\n            role: 'presentation',\n            name: iconName,\n            style: {\n                color: iconColor,\n                'background-color': iconBackgroundColor,\n            },\n        };\n\n        return <limel-icon {...iconProps} />;\n    }\n\n    private renderLabel(label: string = '') {\n        return <label>{label}</label>;\n    }\n}\n",":host(limel-helper-line) {\n    transition: opacity 0.2s ease;\n\n    box-sizing: border-box;\n    display: grid;\n\n    min-width: 0; // prevents overflowing, if component is placed in flex containers\n\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-font-smoothing: antialiased;\n    font-size: 0.6875rem;\n    line-height: normal;\n\n    color: rgb(var(--contrast-1200));\n}\n\ndiv {\n    display: flex;\n    justify-content: space-between;\n    gap: 0.75rem;\n    overflow: hidden;\n    padding: 0 1rem;\n}\n\n:host(limel-helper-line.invalid) {\n    .helper-text {\n        color: var(--mdc-theme-error);\n    }\n}\n\n.counter {\n    flex-shrink: 0;\n    margin-left: auto;\n}\n\n.helper-text,\n.counter {\n    padding-top: 0.125rem;\n}\n\n// This animates height of the helper line, from `0` to `auto`.\n// To get this animation effect, the consumer component should\n// add `hide` classed accordingly.\n:host(limel-helper-line) {\n    transition: grid-template-rows\n        var(--limel-h-l-grid-template-rows-transition-speed, 0.46s)\n        cubic-bezier(1, 0.09, 0, 0.89);\n    grid-template-rows: var(--limel-h-l-grid-template-rows, 1fr);\n}\n\n:host(limel-helper-line.hide) {\n    --limel-h-l-grid-template-rows-transition-speed: 0.3s;\n    --limel-h-l-grid-template-rows: 0fr;\n}\n// End: animating height\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n/**\n * This is an internal and private component that many input fields\n * use to display a helper text, along with a character counter below the\n * input field.\n *\n * We created this to keep the visual styles the same everywhere\n * and to avoid importing styles separately.\n *\n * Also this enables us to open the helper line in limel-portal,\n * more easily without having to send the styles to the portal.\n *\n * @exampleComponent limel-example-helper-line\n * @exampleComponent limel-example-helper-line-invalid\n * @exampleComponent limel-example-helper-line-long-text\n * @exampleComponent limel-example-helper-line-long-text-no-counter\n * @exampleComponent limel-example-helper-line-character-counter\n * @exampleComponent limel-example-helper-line-empty\n * @exampleComponent limel-example-helper-line-animation\n * @private\n */\n@Component({\n    tag: 'limel-helper-line',\n    shadow: true,\n    styleUrl: 'helper-line.scss',\n})\nexport class HelperLine {\n    /**\n     * The helper text that is displayed on the left side.\n     */\n    @Prop({ reflect: true })\n    public helperText?: string;\n\n    /**\n     * Length of the current input value, coming from the parent component.\n     * Used in the character counter section on the right side.\n     */\n    @Prop({ reflect: true })\n    public length?: number;\n\n    /**\n     * Maximum length of the characters, defined on the parent component.\n     * Used in the character counter section on the right side.\n     */\n    @Prop({ reflect: true })\n    public maxLength?: number;\n\n    /**\n     * Turns `true`, when the parent component is invalid.\n     * For example, when the parent component is `required` but is left empty.\n     * Or when the input format is invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid?: boolean = false;\n\n    /**\n     * Used by `aria-controls` and `aria-describedby` in the parent component.\n     */\n    @Prop({ reflect: true })\n    public helperTextId?: string;\n\n    public render() {\n        return (\n            <Host\n                tabIndex={-1}\n                class={{\n                    invalid: this.invalid,\n                }}\n                style={!this.hasContent() ? { display: 'none' } : {}}\n                aria-hidden={!this.hasContent()}\n            >\n                <div>\n                    {this.renderHelperText()}\n                    {this.renderCharacterCounter()}\n                </div>\n            </Host>\n        );\n    }\n\n    private hasContent = () => {\n        return !!(\n            this.maxLength > 0 ||\n            (this.helperText && this.helperText.length > 0)\n        );\n    };\n\n    private renderHelperText = () => {\n        if (!this.helperText) {\n            return;\n        }\n\n        return (\n            <span class=\"helper-text\" id={this.helperTextId}>\n                {this.helperText}\n            </span>\n        );\n    };\n\n    private renderCharacterCounter = () => {\n        const counter = `${this.length} / ${this.maxLength}`;\n\n        if (!this.maxLength) {\n            return;\n        }\n\n        return <span class=\"counter\">{counter}</span>;\n    };\n}\n"],"mappings":"sFAAA,MAAMA,EAAkB,sc,MC2BXC,EAAY,M,gEAgBuB,G,YAQnB,E,CAElBC,S,QACH,MAAMC,EAAQC,KAAKC,OAAOC,MAAMC,GAAMA,EAAEC,QAAUJ,KAAKI,QAEvD,MAAO,CACHJ,KAAKK,YAAWC,EAAAP,IAAK,MAALA,SAAK,SAALA,EAAOQ,QAAI,MAAAD,SAAA,EAAAA,EAAIN,KAAKQ,aAAaD,MACjDP,KAAKS,aAAYC,EAAAX,IAAK,MAALA,SAAK,SAALA,EAAOY,QAAI,MAAAD,SAAA,EAAAA,EAAIV,KAAKQ,aAAaG,M,CAIlDN,WAAWE,GACf,MAAMK,EAAWC,EAAYN,GAC7B,IAAKK,EAAU,CACX,M,CAGJ,IAAIE,EACJ,IAAIC,EAEJ,UAAWR,IAAS,SAAU,CAC1BO,EAAYP,EAAKS,MACjBD,EAAsBR,EAAKU,e,CAG/B,MAAMC,EAAY,CACdC,KAAM,eACNC,KAAMR,EACNS,MAAO,CACHL,MAAOF,EACP,mBAAoBC,IAI5B,OAAOO,EAAA,aAAAC,OAAAC,OAAA,GAAgBN,G,CAGnBT,YAAYV,EAAgB,IAChC,OAAOuB,EAAA,aAAQvB,E,aCzFvB,MAAM0B,EAAgB,gzB,MC2BTC,EAAU,M,yBAqDX1B,KAAA2B,WAAa,OAEb3B,KAAK4B,UAAY,GAChB5B,KAAK6B,YAAc7B,KAAK6B,WAAWC,OAAS,GAI7C9B,KAAA+B,iBAAmB,KACvB,IAAK/B,KAAK6B,WAAY,CAClB,M,CAGJ,OACIP,EAAA,QAAMU,MAAM,cAAcC,GAAIjC,KAAKkC,cAC9BlC,KAAK6B,WACH,EAIP7B,KAAAmC,uBAAyB,KAC7B,MAAMC,EAAU,GAAGpC,KAAK8B,YAAY9B,KAAK4B,YAEzC,IAAK5B,KAAK4B,UAAW,CACjB,M,CAGJ,OAAON,EAAA,QAAMU,MAAM,WAAWI,EAAe,E,sFApDtB,M,4BAQpBtC,SACH,OACIwB,EAACe,EAAI,CACDC,UAAW,EACXN,MAAO,CACHO,QAASvC,KAAKuC,SAElBlB,OAAQrB,KAAK2B,aAAe,CAAEa,QAAS,QAAW,GAAE,eACtCxC,KAAK2B,cAEnBL,EAAA,WACKtB,KAAK+B,mBACL/B,KAAKmC,0B"}

package/dist/lime-elements/{p-03eea223.entry.js → p-a451cece.entry.js}

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

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

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as i,g as o}from"./p-443111b3.js";import{c as r}from"./p-3ccdc4a3.js";import{m as a,r as n}from"./p-869d6d77.js";import{g as s,a as l}from"./p-2f777fdb.js";const c='@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:0.875rem;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{transform:translate3d(0, -0.04rem, 0);color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color);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(--mdc-theme-primary) !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))}div[role=separator]{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){div[role=separator]{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 h=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(){a(this.host)}componentDidLoad(){this.triggerIconColorWarning()}disconnectedCallback(){n(this.host)}render(){if(!this.isItem(this.item)&&this.item.separator){return i("div",{role:"separator"})}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=s(this.item.icon);const e=l(this.item.icon,this.item.iconColor);return i("limel-icon",{name:t,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}if(this.item.text){return i("limel-tooltip",{elementId:this.tooltipId,label:this.item.text,helperLabel:this.item.commandText})}if(this.item.commandText){return i("limel-tooltip",{elementId:this.tooltipId,label:this.item.commandText})}}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)}};h.style=c;const d=class{constructor(i){t(this,i);this.select=e(this,"select",7);this.countOverflowedItems=()=>`+${this.numberOfMenuItems}`;this.handleSelect=t=>{t.stopPropagation();this.select.emit(t.detail)};this.items=undefined;this.openDirection="bottom-end"}render(){return[i("limel-menu",{openDirection:this.openDirection,items:this.items,onSelect:this.handleSelect},i("button",{slot:"trigger"},this.countOverflowedItems()))]}get numberOfMenuItems(){return this.items.filter((t=>this.isMenuItem(t))).length}isMenuItem(t){return!("separator"in t)}};export{h as limel_action_bar_item,d as limel_action_bar_overflow_menu};
+//# sourceMappingURL=p-a8e24972.entry.js.map

package/dist/lime-elements/p-a8e24972.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","role","id","type","onClick","disabled","isDisabled","class","selected","renderIcon","renderLabel","renderTooltip","isVisible","icon","name","getIconName","color","getIconColor","iconColor","style","iconOnly","text","elementId","label","helperLabel","commandText","console","warn","ActionBarOverflowMenu","countOverflowedItems","numberOfMenuItems","handleSelect","detail","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: functions.pxToRem(14);\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(--mdc-theme-primary) !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\ndiv[role='separator'] {\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/list-item.types';\nimport { createRandomString } from '../../../util/random-string';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../../util/make-enter-clickable';\nimport { getIconColor, getIconName } 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 host: HTMLLimelActionBarItemElement;\n\n    /**\n     * Used to attach the right tooltip to the right button\n     */\n    private 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 <div role=\"separator\" />;\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 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            const color = getIconColor(this.item.icon, this.item.iconColor);\n\n            return (\n                <limel-icon\n                    name={name}\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        if (this.item.text) {\n            return (\n                <limel-tooltip\n                    elementId={this.tooltipId}\n                    label={this.item.text}\n                    helperLabel={this.item.commandText}\n                />\n            );\n        }\n\n        if (this.item.commandText) {\n            return (\n                <limel-tooltip\n                    elementId={this.tooltipId}\n                    label={this.item.commandText}\n                />\n            );\n        }\n    }\n\n    private triggerIconColorWarning() {\n        if (this.isItem(this.item) && this.item.iconColor) {\n            /* eslint-disable-next-line no-console */\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 } from '@stencil/core';\nimport { ActionBarItem } from '../../action-bar/action-bar.types';\nimport { ListSeparator } from '../../list/list-item.types';\nimport { MenuItem, OpenDirection } from '../../menu/menu.types';\nimport { LimelMenuCustomEvent } from '../../../components';\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     * 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            <limel-menu\n                openDirection={this.openDirection}\n                items={this.items}\n                onSelect={this.handleSelect}\n            >\n                <button slot=\"trigger\">{this.countOverflowedItems()}</button>\n            </limel-menu>,\n        ];\n    }\n\n    private countOverflowedItems = () => {\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":"mLAAA,MAAMA,EAAmB,y9F,MCyBZC,EAAe,MAmCxBC,YAAAC,G,yCAsCQC,KAAAC,YAAeC,IACnBA,EAAMC,kBACNH,KAAKI,OAAOC,KAAKL,KAAKM,KAAK,E,mCAxDH,K,cAMD,MAWvBN,KAAKO,UAAYC,G,CAGdC,oBACHC,EAAmBV,KAAKW,K,CAGrBC,mBACHZ,KAAKa,yB,CAGFC,uBACHC,EAAqBf,KAAKW,K,CAGvBK,SACH,IAAKhB,KAAKiB,OAAOjB,KAAKM,OAASN,KAAKM,KAAKY,UAAW,CAChD,OAAOC,EAAA,OAAKC,KAAK,a,CAGrB,OACID,EAAA,UACIE,GAAIrB,KAAKO,UACTe,KAAK,SACLC,QAASvB,KAAKC,YACduB,SAAUxB,KAAKyB,aACfC,MAAO,CACH,cAAe1B,KAAKiB,OAAOjB,KAAKM,OAASN,KAAKM,KAAKqB,WAGtD3B,KAAK4B,aACL5B,KAAK6B,cACL7B,KAAK8B,gB,CAUVb,OAAOX,GACX,QAAS,cAAeA,E,CAGpBmB,aACJ,GAAIzB,KAAKiB,OAAOjB,KAAKM,OAASN,KAAKM,KAAKkB,SAAU,CAC9C,OAAO,I,CAGX,IAAKxB,KAAK+B,UAAW,CACjB,OAAO,I,EAIPH,aACJ,GAAI5B,KAAKiB,OAAOjB,KAAKM,QAAUN,KAAKM,KAAK0B,KAAM,CAC3C,M,CAGJ,GAAI,SAAUhC,KAAKM,KAAM,CACrB,MAAM2B,EAAOC,EAAYlC,KAAKM,KAAK0B,MACnC,MAAMG,EAAQC,EAAapC,KAAKM,KAAK0B,KAAMhC,KAAKM,KAAK+B,WAErD,OACIlB,EAAA,cACIc,KAAMA,EACNK,MAAO,CACH,+BAAgC,GAAGH,M,EAO/CN,cACJ,IAAK7B,KAAKiB,OAAOjB,KAAKM,OAASN,KAAKM,KAAKiC,SAAU,CAC/C,M,CAGJ,OAAOpB,EAAA,QAAMO,MAAM,QAAQ1B,KAAKM,KAAKkC,K,CAGjCV,gBACJ,IAAK9B,KAAKiB,OAAOjB,KAAKM,MAAO,CACzB,M,CAGJ,GAAIN,KAAKM,KAAKkC,KAAM,CAChB,OACIrB,EAAA,iBACIsB,UAAWzC,KAAKO,UAChBmC,MAAO1C,KAAKM,KAAKkC,KACjBG,YAAa3C,KAAKM,KAAKsC,a,CAKnC,GAAI5C,KAAKM,KAAKsC,YAAa,CACvB,OACIzB,EAAA,iBACIsB,UAAWzC,KAAKO,UAChBmC,MAAO1C,KAAKM,KAAKsC,a,EAMzB/B,0BACJ,GAAIb,KAAKiB,OAAOjB,KAAKM,OAASN,KAAKM,KAAK+B,UAAW,CAE/CQ,QAAQC,KACJ,uK,8CCjKHC,EAAqB,M,wDAoCtB/C,KAAAgD,qBAAuB,IACpB,IAAIhD,KAAKiD,oBAGZjD,KAAAkD,aAAgBhD,IACpBA,EAAMC,kBACNH,KAAKI,OAAOC,KAAKH,EAAMiD,OAAO,E,wCA3BI,Y,CAS/BnC,SACH,MAAO,CACHG,EAAA,cACIiC,cAAepD,KAAKoD,cACpBC,MAAOrD,KAAKqD,MACZC,SAAUtD,KAAKkD,cAEf/B,EAAA,UAAQoC,KAAK,WAAWvD,KAAKgD,yB,CAc7BC,wBACR,OAAOjD,KAAKqD,MAAMG,QAAQlD,GAASN,KAAKyD,WAAWnD,KAAOoD,M,CAGtDD,WAAWnD,GACf,QAAS,cAAeA,E"}

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

@@ -0,0 +1,2 @@
+import{r as t,h as e}from"./p-443111b3.js";import{t as a}from"./p-8915fa60.js";import{c as r}from"./p-3ccdc4a3.js";const i='@charset "UTF-8";:host(limel-chart){--chart-axis-line-color:var(\n      --limel-chart-axis-line-color,\n      rgb(var(--contrast-900))\n  );box-sizing:border-box;isolation:isolate;display:flex;width:100%;height:100%;min-width:0;min-height:0;padding:var(--limel-chart-padding)}table{all:unset;border-collapse:collapse;border-spacing:0;empty-cells:show;position:relative;display:flex;width:100%;height:100%;min-width:0;min-height:0}table colgroup,table thead,table tbody,table tr,table th,table td{all:unset}table caption,table colgroup,table thead,table tfoot,table th,table td{position:absolute;width:0;height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap}*,*:before,*:after{box-sizing:border-box}.chart{position:relative;flex-grow:1;width:100%;height:100%;min-height:0;min-width:0}.chart:has(.item:hover) .item,.chart:has(.item:focus-visible) .item{opacity:0.4}.item{transition:background-color 0.2s ease, filter 0.2s ease, opacity 0.4s ease;cursor:help}.item:focus-visible,.item:hover{opacity:1 !important}limel-spinner{margin:auto}:host(limel-chart[type=bar]) .chart,:host(limel-chart[type=dot]) .chart,:host(limel-chart[type=line]) .chart,:host(limel-chart[type=area]) .chart{display:flex;background-color:var(--chart-background-color, transparent)}:host(limel-chart[type=bar]) .item,:host(limel-chart[type=dot]) .item,:host(limel-chart[type=line]) .item,:host(limel-chart[type=area]) .item{position:relative;mix-blend-mode:hard-light}:host(limel-chart[type=bar]) .item:focus,:host(limel-chart[type=dot]) .item:focus,:host(limel-chart[type=line]) .item:focus,:host(limel-chart[type=area]) .item:focus{outline:none}:host(limel-chart[type=bar]) .item:focus-visible,:host(limel-chart[type=dot]) .item:focus-visible,:host(limel-chart[type=line]) .item:focus-visible,:host(limel-chart[type=area]) .item:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}:host(limel-chart[type=bar][orientation=landscape]),:host(limel-chart[type=dot][orientation=landscape]),:host(limel-chart[type=line][orientation=landscape]),:host(limel-chart[type=area][orientation=landscape]){--limel-chart-padding:0.5rem 0.5rem 0.5rem 2rem}:host(limel-chart[type=bar][orientation=landscape]) .chart,:host(limel-chart[type=dot][orientation=landscape]) .chart,:host(limel-chart[type=line][orientation=landscape]) .chart,:host(limel-chart[type=area][orientation=landscape]) .chart{flex-direction:row;align-items:flex-end;overflow:auto hidden;padding:0 0.125rem}:host(limel-chart[type=bar][orientation=landscape]) .item,:host(limel-chart[type=dot][orientation=landscape]) .item,:host(limel-chart[type=line][orientation=landscape]) .item,:host(limel-chart[type=area][orientation=landscape]) .item{min-width:0.5rem;width:inherit}:host(limel-chart[type=bar][orientation=portrait]),:host(limel-chart[type=dot][orientation=portrait]),:host(limel-chart[type=line][orientation=portrait]),:host(limel-chart[type=area][orientation=portrait]){--limel-chart-padding:0.5rem 0.5rem 1rem 0.5rem}:host(limel-chart[type=bar][orientation=portrait]) .chart,:host(limel-chart[type=dot][orientation=portrait]) .chart,:host(limel-chart[type=line][orientation=portrait]) .chart,:host(limel-chart[type=area][orientation=portrait]) .chart{flex-direction:column;overflow:hidden auto;padding:0.125rem 0}:host(limel-chart[type=bar][orientation=portrait]) .item,:host(limel-chart[type=dot][orientation=portrait]) .item,:host(limel-chart[type=line][orientation=portrait]) .item,:host(limel-chart[type=area][orientation=portrait]) .item{min-height:0.5rem;height:inherit}:host(limel-chart[type=pie]) table,:host(limel-chart[type=doughnut]) table,:host(limel-chart[type=ring]) table{min-height:2rem;min-width:2rem}:host(limel-chart[type=pie]) .chart,:host(limel-chart[type=pie]) .item,:host(limel-chart[type=doughnut]) .chart,:host(limel-chart[type=doughnut]) .item,:host(limel-chart[type=ring]) .chart,:host(limel-chart[type=ring]) .item{aspect-ratio:1;display:flex;margin:auto}:host(limel-chart[type=pie]) .chart,:host(limel-chart[type=doughnut]) .chart,:host(limel-chart[type=ring]) .chart{justify-content:center;align-items:center}:host(limel-chart[type=pie]) .chart:before,:host(limel-chart[type=doughnut]) .chart:before,:host(limel-chart[type=ring]) .chart:before{aspect-ratio:1;content:"";position:absolute;z-index:0;inset:0;margin:auto;border-radius:50%;max-width:100%;max-height:100%;background-color:var(--chart-background-color, rgb(var(--contrast-200)))}:host(limel-chart[type=pie]) .item,:host(limel-chart[type=doughnut]) .item,:host(limel-chart[type=ring]) .item{max-width:100%;max-height:100%;border-radius:50%;position:absolute;inset:0}:host(limel-chart[type=bar]) .chart,:host(limel-chart[type=dot]) .chart{gap:0.5rem}:host(limel-chart[type=bar]) .item,:host(limel-chart[type=dot]) .item{display:flex;align-items:center;justify-content:center;border-radius:var(--chart-item-border-radius, 0.125rem)}:host(limel-chart[type=bar]) .item{background:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)))}:host(limel-chart[type=dot]) .item:before,:host(limel-chart[type=dot]) .item:after{content:"";position:absolute;margin:auto;width:0.5rem;height:0.5rem;border-radius:50%}:host(limel-chart[type=dot]) .item::after{background-color:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)))}:host(limel-chart[type=dot]) .item.has-start-value:before{background-color:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)))}:host(limel-chart[type=bar][orientation=landscape]) .item,:host(limel-chart[type=dot][orientation=landscape]) .item{height:calc(var(--limel-chart-item-size) * 1%);bottom:calc(var(--limel-chart-item-offset) * 1%)}:host(limel-chart[type=bar][orientation=landscape]) .item.has-negative-value-only,:host(limel-chart[type=dot][orientation=landscape]) .item.has-negative-value-only{height:calc(var(--limel-chart-item-size) * -1%);transform-origin:bottom;transform:rotateX(180deg)}:host(limel-chart[type=dot][orientation=landscape]) .item.has-start-value,:host(limel-chart[type=dot][orientation=landscape]) .item:hover,:host(limel-chart[type=dot][orientation=landscape]) .item:focus-visible{background:linear-gradient(to bottom, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) center/1px 100% no-repeat}:host(limel-chart[type=dot][orientation=landscape]) .item:before{inset:auto 0 0 0;transform:translateY(50%)}:host(limel-chart[type=dot][orientation=landscape]) .item::after{inset:0 0 auto 0;transform:translateY(-50%)}:host(limel-chart[type=bar][orientation=portrait]) .item,:host(limel-chart[type=dot][orientation=portrait]) .item{width:calc(var(--limel-chart-item-size) * 1%);left:calc(var(--limel-chart-item-offset) * 1%)}:host(limel-chart[type=bar][orientation=portrait]) .item.has-negative-value-only,:host(limel-chart[type=dot][orientation=portrait]) .item.has-negative-value-only{width:calc(var(--limel-chart-item-size) * -1%);transform-origin:left;transform:rotateY(180deg)}:host(limel-chart[type=dot][orientation=portrait]) .item.has-start-value,:host(limel-chart[type=dot][orientation=portrait]) .item:hover,:host(limel-chart[type=dot][orientation=portrait]) .item:focus-visible{background:linear-gradient(to right, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) center/100% 1px no-repeat}:host(limel-chart[type=dot][orientation=portrait]) .item:before{inset:0 auto 0 0;transform:translateX(-50%)}:host(limel-chart[type=dot][orientation=portrait]) .item:after{inset:0 0 0 auto;transform:translateX(50%)}:host(limel-chart[type=area]) .item,:host(limel-chart[type=line]) .item{position:relative}:host(limel-chart[type=area]) .item:after,:host(limel-chart[type=line]) .item:after{margin:auto;width:0.5rem;height:0.5rem;border-radius:50%;border:1px solid rgb(var(--contrast-100))}:host(limel-chart[type=area]) .item:before,:host(limel-chart[type=line]) .item:before{inset:0}:host(limel-chart[type=area]) .item:after,:host(limel-chart[type=area]) .item:before,:host(limel-chart[type=line]) .item:after,:host(limel-chart[type=line]) .item:before{transition:border-color 0.2s ease, opacity 0.4s ease;content:"";position:absolute;background:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)))}:host(limel-chart[type=area]) .item:hover:after,:host(limel-chart[type=area]) .item:focus-visible:after,:host(limel-chart[type=line]) .item:hover:after,:host(limel-chart[type=line]) .item:focus-visible:after{border-color:transparent}:host(limel-chart[type=line][orientation=landscape]) .item,:host(limel-chart[type=area][orientation=landscape]) .item{height:100%}:host(limel-chart[type=line][orientation=landscape]) .item:after,:host(limel-chart[type=area][orientation=landscape]) .item:after{transform:translateX(-50%) translateY(50%);left:0;bottom:calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1%)}:host(limel-chart[type=line][orientation=portrait]) .item,:host(limel-chart[type=area][orientation=portrait]) .item{width:100%}:host(limel-chart[type=line][orientation=portrait]) .item:after,:host(limel-chart[type=area][orientation=portrait]) .item:after{transform:translateX(-50%) translateY(-50%);left:calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1%)}:host(limel-chart[type=area]) .item:after{opacity:0}:host(limel-chart[type=area]) .item:hover:after,:host(limel-chart[type=area]) .item:focus-visible:after{opacity:1}:host(limel-chart[type=area]) .item:hover:before,:host(limel-chart[type=area]) .item:focus-visible:before{opacity:0.7}:host(limel-chart[type=area][orientation=landscape]){}:host(limel-chart[type=area][orientation=landscape]) .item:before{clip-path:polygon(0 calc((100 - var(--limel-chart-item-offset)) * 1%), 0 calc((100 - (var(--limel-chart-item-size) + var(--limel-chart-item-offset))) * 1%), 100% calc((100 - (var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset))) * 1%), 100% calc((100 - var(--limel-chart-next-item-offset)) * 1%))}:host(limel-chart[type=area][orientation=portrait]){}:host(limel-chart[type=area][orientation=portrait]) .item:before{clip-path:polygon(calc(var(--limel-chart-item-offset) * 1%) 0, calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1%) 0, calc((var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset)) * 1%) 100%, calc(var(--limel-chart-next-item-offset) * 1%) 100%)}:host(limel-chart[type=line]){--limel-chart-line-thickness:0.125rem}:host(limel-chart[type=line]) .item:hover:before{opacity:0.4}:host(limel-chart[type=line][orientation=landscape]){}:host(limel-chart[type=line][orientation=landscape]) .item:hover{background:linear-gradient(to bottom, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) left/1px 100% no-repeat}:host(limel-chart[type=line][orientation=landscape]) .item:before{clip-path:polygon(0 calc((100 - (var(--limel-chart-item-size) + var(--limel-chart-item-offset))) * 1%), 0 calc((100 - (var(--limel-chart-item-size) + var(--limel-chart-item-offset))) * 1% + var(--limel-chart-line-thickness)), 100% calc((100 - (var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset))) * 1% + var(--limel-chart-line-thickness)), 100% calc((100 - (var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset))) * 1%))}:host(limel-chart[type=line][orientation=portrait]){}:host(limel-chart[type=line][orientation=portrait]) .item:hover{background:linear-gradient(to right, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) top/100% 1px no-repeat}:host(limel-chart[type=line][orientation=portrait]) .item:before{clip-path:polygon(calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1%) 0, calc((var(--limel-chart-item-size) + var(--limel-chart-item-offset)) * 1% + var(--limel-chart-line-thickness)) 0, calc((var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset)) * 1% + var(--limel-chart-line-thickness)) 100%, calc((var(--limel-chart-next-item-size) + var(--limel-chart-next-item-offset)) * 1%) 100%)}:host(limel-chart[type=pie]) .item,:host(limel-chart[type=doughnut]) .item{background:conic-gradient(transparent 0 calc(var(--limel-chart-item-offset) * 1%), var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8))) calc(var(--limel-chart-item-offset) * 1%) calc(var(--limel-chart-item-offset) * 1% + var(--limel-chart-item-size) * 1%), transparent calc(var(--limel-chart-item-offset) * 1% + var(--limel-chart-item-size) * 1%))}:host(limel-chart[type=pie]) .item:focus,:host(limel-chart[type=pie]) .item:focus-visible,:host(limel-chart[type=doughnut]) .item:focus,:host(limel-chart[type=doughnut]) .item:focus-visible{outline:none}:host(limel-chart[type=pie]) .item,:host(limel-chart[type=doughnut]) .item{pointer-events:none}:host(limel-chart[type=doughnut]) .chart:after{aspect-ratio:1;content:"";position:absolute;inset:0;margin:auto;max-width:60%;max-height:60%;border-radius:50%;background-color:rgb(var(--contrast-100))}:host(limel-chart[type=ring]) .chart:after{content:"";position:absolute;inset:0;aspect-ratio:1;border-radius:50%;max-height:calc(100% - var(--limel-chart-number-of-items) * 100% / (var(--limel-chart-number-of-items) + 1));max-width:calc(100% - var(--limel-chart-number-of-items) * 100% / (var(--limel-chart-number-of-items) + 1));background-color:var(--limel-chart-background-color, rgb(var(--contrast-200)))}:host(limel-chart[type=ring]) .chart:has(.item:hover) .item,:host(limel-chart[type=ring]) .chart:has(.item:focus-visible) .item{opacity:1;filter:grayscale(1)}:host(limel-chart[type=ring]) .chart:after,:host(limel-chart[type=ring]) .item{margin:auto;border:1px solid var(--limel-chart-background-color, rgb(var(--contrast-400)))}:host(limel-chart[type=ring]) .item{background:conic-gradient(var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8))) 0 calc(var(--limel-chart-item-offset) * 1% + var(--limel-chart-item-size) * 1%), var(--chart-background-color, rgb(var(--contrast-200))) calc(var(--limel-chart-item-offset) * 1% + var(--limel-chart-item-size) * 1%));max-width:calc(100% - var(--limel-chart-item-index) * 100% / (var(--limel-chart-number-of-items) + 1));max-height:calc(100% - var(--limel-chart-item-index) * 100% / (var(--limel-chart-number-of-items) + 1))}:host(limel-chart[type=ring]) .item:focus{outline:none}:host(limel-chart[type=ring]) .item:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}:host(limel-chart[type=ring]) .item:focus-visible,:host(limel-chart[type=ring]) .item:hover{filter:grayscale(0) !important}:host(limel-chart[type=stacked-bar]) .chart{display:flex;border-radius:0.25rem;overflow:hidden;background-color:var(--chart-background-color, rgb(var(--contrast-800), 0.2))}:host(limel-chart[type=stacked-bar]) .item{display:flex;border-radius:var(--chart-item-border-radius, 0);background:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)))}:host(limel-chart[type=stacked-bar]) .item:focus{outline:none}:host(limel-chart[type=stacked-bar]) .item:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}:host(limel-chart[type=stacked-bar]) .item:last-of-type{box-shadow:none !important}:host(limel-chart[type=stacked-bar][orientation=landscape]) .chart{flex-direction:row}:host(limel-chart[type=stacked-bar][orientation=landscape]) .item{min-height:0.5rem;width:calc(var(--limel-chart-item-size) * 1%);box-shadow:-1px 0 0 0 var(--chart-item-divider-color, rgb(var(--color-white), 0.6)) inset}:host(limel-chart[type=stacked-bar][orientation=portrait]) .chart{flex-direction:column-reverse}:host(limel-chart[type=stacked-bar][orientation=portrait]) .item{min-width:0.5rem;height:calc(var(--limel-chart-item-size) * 1%);box-shadow:0 -1px 0 0 rgb(var(--color-white), 0.6) inset}:host(limel-chart[type=nps]){--limel-chart-nps-gauge-angel:220deg}:host(limel-chart[type=nps]) table{min-height:4rem;min-width:4rem}:host(limel-chart[type=nps]) .chart{position:relative;display:flex;justify-content:center;align-items:center;aspect-ratio:1;margin:auto;width:unset;height:unset;max-width:100%;max-height:100%;rotate:calc(var(--limel-chart-nps-gauge-angel) / 2 * -1);transform:translate(-15%, -5%)}:host(limel-chart[type=nps]) .chart:before,:host(limel-chart[type=nps]) .chart:after{content:"";aspect-ratio:1;position:absolute;border-radius:50%;z-index:-1;min-height:0;min-width:0}:host(limel-chart[type=nps]) .chart:before{height:100%;max-height:100%;background:conic-gradient(rgb(var(--color-coral-default)) 0deg calc(var(--limel-chart-nps-gauge-angel) / 2), rgb(var(--color-amber-light)) calc(var(--limel-chart-nps-gauge-angel) / 2) calc(var(--limel-chart-nps-gauge-angel) * 0.65), rgb(var(--color-lime-light)) calc(var(--limel-chart-nps-gauge-angel) * 0.65) calc(var(--limel-chart-nps-gauge-angel) * 0.85), rgb(var(--color-lime-default)) calc(var(--limel-chart-nps-gauge-angel) * 0.85) var(--limel-chart-nps-gauge-angel), transparent var(--limel-chart-nps-gauge-angel))}:host(limel-chart[type=nps]) .chart:after{height:calc(100% - min(3rem, 20%) * 2);max-height:calc(100% - min(3rem, 20%) * 2);background:conic-gradient(var(--chart-background-color, rgb(var(--contrast-100))) 0deg var(--limel-chart-nps-gauge-angel), transparent var(--limel-chart-nps-gauge-angel))}:host(limel-chart[type=nps]) .item{display:flex;align-items:flex-start;justify-content:center;border-radius:0.5rem;position:absolute;height:calc(50% - min(3rem, 20%) + 0.5rem);width:0.5rem;transform:translateY(-50%) rotate(calc((var(--limel-chart-item-value) + 100) / 200 * var(--limel-chart-nps-gauge-angel)));transform-origin:bottom}:host(limel-chart[type=nps]) .item:focus{outline:none}:host(limel-chart[type=nps]) .item:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}:host(limel-chart[type=nps]) .item:hover,:host(limel-chart[type=nps]) .item:focus-visible{background:linear-gradient(to bottom, rgb(var(--contrast-800), 0.4) 0%, rgb(var(--contrast-800), 0.4) 100%) center/1px 100% no-repeat}:host(limel-chart[type=nps]) .item:before,:host(limel-chart[type=nps]) .item:after{content:"";position:absolute}:host(limel-chart[type=nps]) .item:before{transform:translateY(-60%);width:0.4rem;border-radius:1rem;border-color:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)));border-style:solid;border-bottom-width:1.75rem;border-right-color:transparent;border-left-color:transparent;border-top-color:transparent}:host(limel-chart[type=nps]) .item:after{border-radius:50%;background-color:var(--limel-chart-item-color, var(--chart-item-color, rgb(var(--contrast-1100), 0.8)));aspect-ratio:1;height:clamp(0.75rem, 10%, 1.25rem);border:0.125rem solid rgb(var(--contrast-100), 0.8);box-shadow:var(--shadow-depth-8)}.axises{position:absolute;display:flex;justify-content:space-between;min-height:100%;min-width:100%;height:100%;width:100%}.axis-line{transition:opacity 0.4s ease;position:relative;opacity:0.2;font-size:0.625rem;border-color:var(--limel-chart-axis-line-color)}.axis-line:hover{opacity:0.6;transition-duration:0.2s}.axis-line.zero-line{opacity:0.6;z-index:1}.axis-line limel-badge{--badge-background-color:transparent;--badge-text-color:currentColor;position:absolute;text-align:right;min-width:2rem}:host(limel-chart[orientation=landscape]) .axises{flex-direction:column-reverse}:host(limel-chart[orientation=landscape]) .axis-line{border-bottom:1px solid;transform:translateY(50%)}:host(limel-chart[orientation=landscape]) .axis-line limel-badge{bottom:0;left:-2rem;transform:translateY(50%)}:host(limel-chart[orientation=portrait]) .axises{flex-direction:row}:host(limel-chart[orientation=portrait]) .axis-line{border-left:1px solid;transform:translateX(-50%)}:host(limel-chart[orientation=portrait]) .axis-line limel-badge{bottom:-1rem;right:-1rem}';const o=100;const l=10;const h=class{constructor(e){t(this,e);this.language="en";this.accessibleLabel=undefined;this.accessibleItemsLabel=undefined;this.items=undefined;this.type="stacked-bar";this.orientation="landscape";this.maxValue=undefined;this.axisIncrement=undefined;this.loading=false}componentWillLoad(){this.recalculateRangeData()}render(){if(this.loading){return e("limel-spinner",{limeBranded:false})}return e("table",{"aria-busy":this.loading?"true":"false","aria-live":"polite",style:{"--limel-chart-number-of-items":this.items.length.toString()}},this.renderCaption(),this.renderTableHeader(),this.renderAxises(),e("tbody",{class:"chart"},this.renderItems()))}renderCaption(){if(!this.accessibleLabel){return}return e("caption",null,this.accessibleLabel)}renderTableHeader(){return e("thead",null,e("tr",null,e("th",{scope:"col"},this.accessibleItemsLabel),e("th",{scope:"col"},a.get("value",this.language))))}renderAxises(){if(!["bar","dot","area","line"].includes(this.type)){return}const{minValue:t,maxValue:a}=this.range;const r=[];const i=Math.floor(t/this.axisIncrement)*this.axisIncrement;const o=Math.ceil(a/this.axisIncrement)*this.axisIncrement;for(let t=i;t<=o;t+=this.axisIncrement){r.push(e("div",{class:{"axis-line":true,"zero-line":t===0},role:"presentation"},e("limel-badge",{label:t})))}return e("div",{class:"axises",role:"presentation"},r)}renderItems(){var t;if(!((t=this.items)===null||t===void 0?void 0:t.length)){return}let a=0;return this.items.map(((t,i)=>{const o=r();const l=this.calculateSizeAndOffset(t);const h=l.size;let n=l.offset;if(this.type==="pie"||this.type==="doughnut"){n=a;a+=h}return e("tr",{style:this.getItemStyle(t,i,h,n),class:this.getItemClass(t),key:o,id:o,tabIndex:0},e("th",null,this.getItemText(t)),e("td",null,this.getFormattedValue(t)),this.renderTooltip(t,o,h))}))}getItemStyle(t,e,a,r){const i={"--limel-chart-item-offset":`${r}`,"--limel-chart-item-size":`${a}`,"--limel-chart-item-index":`${e}`,"--limel-chart-item-value":`${t.value}`};if(t.color){i["--limel-chart-item-color"]=t.color}if(this.type==="line"||this.type==="area"){const t=this.calculateSizeAndOffset(this.items[e+1]);i["--limel-chart-next-item-size"]=`${t.size}`;i["--limel-chart-next-item-offset"]=`${t.offset}`}return i}getItemClass(t){return{item:true,"has-start-value":Array.isArray(t.value),"has-negative-value-only":this.getMaximumValue(t)<0&&!this.isRangeItem(t)}}calculateSizeAndOffset(t){const{minValue:e,totalRange:a}=this.range;if(!t){return{size:0,offset:0}}let r=0;if(this.isRangeItem(t)){r=this.getMinimumValue(t)}const i=(r-e)/a*o;const l=(this.getMaximumValue(t)-e)/a*o;return{size:l-i,offset:i}}getFormattedValue(t){const{value:e,formattedValue:a}=t;if(a){return a}if(Array.isArray(e)){return`${e[0]} — ${e[1]}`}return`${e}`}getItemText(t){return t.text}renderTooltip(t,a,r){const i=this.getItemText(t);const o=2;const l=this.getFormattedValue(t);const h={label:i,helperLabel:l,elementId:a};if(this.type!=="bar"&&this.type!=="dot"&&this.type!=="nps"){h.label=`${i} (${r.toFixed(o)}%)`}return e("limel-tooltip",Object.assign({},h,{openDirection:this.orientation==="portrait"?"right":"top"}))}calculateRange(){var t;if(this.range){return this.range}const e=Math.min(0,...this.items.map(this.getMinimumValue));const a=Math.max(...this.items.map(this.getMaximumValue));const r=this.items.reduce(((t,e)=>t+this.getMaximumValue(e)),0);let i=(t=this.maxValue)!==null&&t!==void 0?t:a;if((this.type==="pie"||this.type==="doughnut")&&!this.maxValue){i=r}if(!this.axisIncrement){this.axisIncrement=this.calculateAxisIncrement(this.items)}const o=Math.ceil(i/this.axisIncrement)*this.axisIncrement;const l=Math.floor(e/this.axisIncrement)*this.axisIncrement;const h=o-l;return{minValue:l,maxValue:o,totalRange:h}}calculateAxisIncrement(t,e=l){const a=Math.max(...t.map((t=>{const e=t.value;if(Array.isArray(e)){return Math.max(...e)}return e})));const r=a/e;const i=10**Math.floor(Math.log10(r));return Math.ceil(r/i)*i}getMinimumValue(t){const e=t.value;return Array.isArray(e)?Math.min(...e):e}getMaximumValue(t){const e=t.value;return Array.isArray(e)?Math.max(...e):e}isRangeItem(t){return Array.isArray(t.value)}handleChange(){this.range=null;this.recalculateRangeData()}recalculateRangeData(){this.range=this.calculateRange()}static get watchers(){return{items:["handleChange"],axisIncrement:["handleChange"],maxValue:["handleChange"]}}};h.style=i;export{h as limel_chart};
+//# sourceMappingURL=p-d696f6b8.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["chartCss","PERCENT","DEFAULT_INCREMENT_SIZE","Chart","componentWillLoad","this","recalculateRangeData","render","loading","h","limeBranded","style","items","length","toString","renderCaption","renderTableHeader","renderAxises","class","renderItems","accessibleLabel","scope","accessibleItemsLabel","translate","get","language","includes","type","minValue","maxValue","range","lines","adjustedMinRange","Math","floor","axisIncrement","adjustedMaxRange","ceil","value","push","role","label","_a","cumulativeOffset","map","item","index","itemId","createRandomString","sizeAndOffset","calculateSizeAndOffset","size","offset","getItemStyle","getItemClass","key","id","tabIndex","getItemText","getFormattedValue","renderTooltip","color","nextItem","Array","isArray","getMaximumValue","isRangeItem","totalRange","startValue","getMinimumValue","normalizedStart","normalizedEnd","formattedValue","text","PERCENT_DECIMAL","tooltipProps","helperLabel","elementId","toFixed","Object","assign","openDirection","orientation","calculateRange","minRange","min","maxRange","max","totalSum","reduce","sum","finalMaxRange","calculateAxisIncrement","visualMaxValue","visualMinValue","steps","roughStep","magnitude","log10","handleChange"],"sources":["./src/components/chart/chart.scss?tag=limel-chart&encapsulation=shadow","./src/components/chart/chart.tsx"],"sourcesContent":["@use '../../style/mixins';\n$min-item-size: 0.5rem;\n$default-item-color: var(--chart-item-color, rgb(var(--contrast-1100), 0.8));\n\n/**\n* @prop --chart-background-color: Defines the background color of the chart. Defaults to `transparent` for _most_ chart types.\n* @prop --chart-item-color: If no color is defined for chart items, this color will be use. Defaults to `rgb(var(--contrast-1100), 0.8)`.\n* @prop --chart-item-divider-color: Defines the color that visually separates items in some charts, such as `stacked-bar` chart items. Defaults to `rgb(var(--color-white), 0.6)`.\n* @prop --chart-axis-line-color: Defines color of the axis lines. Defaults to `--contrast-900`. Note that lines have opacity as well, and get opaque on hover.\n* @prop --chart-item-border-radius: Defines the roundness of corners of items in a chart. Defaults to different values depending on the chart type. Does not have any effect on `pie` and `doughnut` types.\n*/\n\n:host(limel-chart) {\n    --chart-axis-line-color: var(\n        --limel-chart-axis-line-color,\n        rgb(var(--contrast-900))\n    );\n    box-sizing: border-box;\n    isolation: isolate;\n\n    display: flex;\n    width: 100%;\n    height: 100%;\n    min-width: 0;\n    min-height: 0;\n    padding: var(--limel-chart-padding);\n}\n\ntable {\n    // Since these are mainly \"resets\", no styles should be before them.\n    all: unset;\n    border-collapse: collapse;\n    border-spacing: 0;\n    empty-cells: show;\n\n    position: relative;\n    display: flex;\n    width: 100%;\n    height: 100%;\n    min-width: 0;\n    min-height: 0;\n\n    colgroup,\n    thead,\n    tbody,\n    tr,\n    th,\n    td {\n        all: unset;\n    }\n\n    caption,\n    colgroup,\n    thead,\n    tfoot,\n    th,\n    td {\n        @include mixins.visually-hidden;\n    }\n}\n\n*,\n*:before,\n*:after {\n    box-sizing: border-box;\n}\n\n.chart {\n    position: relative;\n    flex-grow: 1;\n    width: 100%;\n    height: 100%;\n    min-height: 0;\n    min-width: 0;\n\n    &:has(.item:hover),\n    &:has(.item:focus-visible) {\n        .item {\n            opacity: 0.4;\n        }\n    }\n}\n\n.item {\n    transition:\n        background-color 0.2s ease,\n        filter 0.2s ease,\n        opacity 0.4s ease;\n    cursor: help;\n\n    &:focus-visible,\n    &:hover {\n        opacity: 1 !important;\n    }\n}\n\nlimel-spinner {\n    margin: auto;\n}\n\n@mixin line(\n    $direction: vertical,\n    $color: rgb(var(--contrast-800), 0.4),\n    $position: center\n) {\n    @if $direction == vertical {\n        background: linear-gradient(to bottom, $color 0%, $color 100%)\n            $position/1px\n            100%\n            no-repeat;\n    } @else if $direction == horizontal {\n        background: linear-gradient(to right, $color 0%, $color 100%)\n            $position/100%\n            1px\n            no-repeat;\n    }\n}\n\n@import './partial-styles/_layout-for-charts-with-x-y-axises';\n@import './partial-styles/_layout-for-charts-with-circular-shape';\n@import './partial-styles/_bar-gantt-dot';\n@import './partial-styles/_area_line';\n@import './partial-styles/_pie-doughnut';\n@import './partial-styles/_ring';\n@import './partial-styles/_stacked-bar';\n@import './partial-styles/_nps';\n@import './partial-styles/_axises';\n","import { Component, h, Prop, Watch } from '@stencil/core';\nimport { Languages } from '../date-picker/date.types';\nimport translate from '../../global/translations';\nimport { createRandomString } from '../../util/random-string';\nimport { ChartItem } from './chart.types';\n\nconst PERCENT = 100;\nconst DEFAULT_INCREMENT_SIZE = 10;\n\n/**\n * A chart is a graphical representation of data, in which\n * visual symbols such as such bars, dots, lines, or slices, represent\n * each data point, in comparison to others.\n *\n * @exampleComponent limel-example-chart-stacked-bar\n * @exampleComponent limel-example-chart-orientation\n * @exampleComponent limel-example-chart-max-value\n * @exampleComponent limel-example-chart-type-bar\n * @exampleComponent limel-example-chart-type-dot\n * @exampleComponent limel-example-chart-type-area\n * @exampleComponent limel-example-chart-type-line\n * @exampleComponent limel-example-chart-type-pie\n * @exampleComponent limel-example-chart-type-doughnut\n * @exampleComponent limel-example-chart-type-ring\n * @exampleComponent limel-example-chart-type-gantt\n * @exampleComponent limel-example-chart-type-nps\n * @exampleComponent limel-example-chart-multi-axis\n * @exampleComponent limel-example-chart-multi-axis-with-negative-start-values\n * @exampleComponent limel-example-chart-multi-axis-area-with-negative-start-values\n * @exampleComponent limel-example-chart-axis-increment\n * @exampleComponent limel-example-chart-accessibility\n * @exampleComponent limel-example-chart-styling\n * @exampleComponent limel-example-chart-creative-styling\n * @beta\n */\n\n@Component({\n    tag: 'limel-chart',\n    shadow: true,\n    styleUrl: 'chart.scss',\n})\nexport class Chart {\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     * Helps users of assistive technologies to understand\n     * the context of the chart, and what is being displayed.\n     */\n    @Prop({ reflect: true })\n    public accessibleLabel?: string;\n\n    /**\n     * Helps users of assistive technologies to understand\n     * what the items in the chart represent.\n     */\n    @Prop({ reflect: true })\n    public accessibleItemsLabel?: string;\n\n    /**\n     * List of items in the chart,\n     * each representing a data point.\n     */\n    @Prop()\n    public items!: ChartItem[];\n\n    /**\n     * Defines how items are visualized in the chart.\n     */\n    @Prop({ reflect: true })\n    public type?:\n        | 'area'\n        | 'bar'\n        | 'doughnut'\n        | 'line'\n        | 'nps'\n        | 'pie'\n        | 'ring'\n        | 'dot'\n        | 'stacked-bar' = 'stacked-bar';\n\n    /**\n     * Defines whether the chart is intended to be displayed wide or tall.\n     * Does not have any effect on chart types which generate circular forms.\n     */\n    @Prop({ reflect: true })\n    public orientation?: 'landscape' | 'portrait' = 'landscape';\n\n    /**\n     * Specifies the range that items' values could be in.\n     * This is used in calculation of the size of the items in the chart.\n     * When not provided, the sum of all values in the items will be considered as the range.\n     */\n    @Prop({ reflect: true })\n    public maxValue?: number;\n\n    /**\n     * Specifies the increment for the axis lines.\n     */\n    @Prop({ reflect: true })\n    public axisIncrement?: number;\n\n    /**\n     * Indicates whether the chart is in a loading state.\n     */\n    @Prop({ reflect: true })\n    public loading: boolean = false;\n\n    private range: {\n        minValue: number;\n        maxValue: number;\n        totalRange: number;\n    };\n\n    public componentWillLoad() {\n        this.recalculateRangeData();\n    }\n\n    public render() {\n        if (this.loading) {\n            return <limel-spinner limeBranded={false} />;\n        }\n\n        return (\n            <table\n                aria-busy={this.loading ? 'true' : 'false'}\n                aria-live=\"polite\"\n                style={{\n                    '--limel-chart-number-of-items':\n                        this.items.length.toString(),\n                }}\n            >\n                {this.renderCaption()}\n                {this.renderTableHeader()}\n                {this.renderAxises()}\n                <tbody class=\"chart\">{this.renderItems()}</tbody>\n            </table>\n        );\n    }\n\n    private renderCaption() {\n        if (!this.accessibleLabel) {\n            return;\n        }\n\n        return <caption>{this.accessibleLabel}</caption>;\n    }\n\n    private renderTableHeader() {\n        return (\n            <thead>\n                <tr>\n                    <th scope=\"col\">{this.accessibleItemsLabel}</th>\n                    <th scope=\"col\">{translate.get('value', this.language)}</th>\n                </tr>\n            </thead>\n        );\n    }\n\n    private renderAxises() {\n        if (!['bar', 'dot', 'area', 'line'].includes(this.type)) {\n            return;\n        }\n\n        const { minValue, maxValue } = this.range;\n        const lines = [];\n        const adjustedMinRange =\n            Math.floor(minValue / this.axisIncrement) * this.axisIncrement;\n        const adjustedMaxRange =\n            Math.ceil(maxValue / this.axisIncrement) * this.axisIncrement;\n\n        for (\n            let value = adjustedMinRange;\n            value <= adjustedMaxRange;\n            value += this.axisIncrement\n        ) {\n            lines.push(\n                <div\n                    class={{\n                        'axis-line': true,\n                        'zero-line': value === 0,\n                    }}\n                    role=\"presentation\"\n                >\n                    <limel-badge label={value} />\n                </div>,\n            );\n        }\n\n        return (\n            <div class=\"axises\" role=\"presentation\">\n                {lines}\n            </div>\n        );\n    }\n\n    private renderItems() {\n        if (!this.items?.length) {\n            return;\n        }\n\n        let cumulativeOffset = 0;\n\n        return this.items.map((item, index) => {\n            const itemId = createRandomString();\n            const sizeAndOffset = this.calculateSizeAndOffset(item);\n            const size = sizeAndOffset.size;\n            let offset = sizeAndOffset.offset;\n\n            if (this.type === 'pie' || this.type === 'doughnut') {\n                offset = cumulativeOffset;\n                cumulativeOffset += size;\n            }\n\n            return (\n                <tr\n                    style={this.getItemStyle(item, index, size, offset)}\n                    class={this.getItemClass(item)}\n                    key={itemId}\n                    id={itemId}\n                    tabIndex={0}\n                >\n                    <th>{this.getItemText(item)}</th>\n                    <td>{this.getFormattedValue(item)}</td>\n                    {this.renderTooltip(item, itemId, size)}\n                </tr>\n            );\n        });\n    }\n\n    private getItemStyle(\n        item: ChartItem,\n        index: number,\n        size: number,\n        offset: number,\n    ): Record<string, string> {\n        const style: Record<string, string> = {\n            '--limel-chart-item-offset': `${offset}`,\n            '--limel-chart-item-size': `${size}`,\n            '--limel-chart-item-index': `${index}`,\n            '--limel-chart-item-value': `${item.value}`,\n        };\n\n        if (item.color) {\n            style['--limel-chart-item-color'] = item.color;\n        }\n\n        if (this.type === 'line' || this.type === 'area') {\n            const nextItem = this.calculateSizeAndOffset(this.items[index + 1]);\n\n            style['--limel-chart-next-item-size'] = `${nextItem.size}`;\n            style['--limel-chart-next-item-offset'] = `${nextItem.offset}`;\n        }\n\n        return style;\n    }\n\n    private getItemClass(item: ChartItem) {\n        return {\n            item: true,\n            'has-start-value': Array.isArray(item.value),\n            'has-negative-value-only':\n                this.getMaximumValue(item) < 0 && !this.isRangeItem(item),\n        };\n    }\n\n    private calculateSizeAndOffset(item?: ChartItem) {\n        const { minValue, totalRange } = this.range;\n        if (!item) {\n            return {\n                size: 0,\n                offset: 0,\n            };\n        }\n\n        let startValue = 0;\n        if (this.isRangeItem(item)) {\n            startValue = this.getMinimumValue(item);\n        }\n\n        const normalizedStart =\n            ((startValue - minValue) / totalRange) * PERCENT;\n        const normalizedEnd =\n            ((this.getMaximumValue(item) - minValue) / totalRange) * PERCENT;\n\n        return {\n            size: normalizedEnd - normalizedStart,\n            offset: normalizedStart,\n        };\n    }\n\n    private getFormattedValue(item: ChartItem): string {\n        const { value, formattedValue } = item;\n\n        if (formattedValue) {\n            return formattedValue;\n        }\n\n        if (Array.isArray(value)) {\n            return `${value[0]} — ${value[1]}`;\n        }\n\n        return `${value}`;\n    }\n\n    private getItemText(item: ChartItem): string {\n        return item.text;\n    }\n\n    private renderTooltip(item: ChartItem, itemId: string, size: number) {\n        const text = this.getItemText(item);\n        const PERCENT_DECIMAL = 2;\n        const formattedValue = this.getFormattedValue(item);\n\n        const tooltipProps: any = {\n            label: text,\n            helperLabel: formattedValue,\n            elementId: itemId,\n        };\n\n        if (this.type !== 'bar' && this.type !== 'dot' && this.type !== 'nps') {\n            tooltipProps.label = `${text} (${size.toFixed(PERCENT_DECIMAL)}%)`;\n        }\n\n        return (\n            <limel-tooltip\n                {...tooltipProps}\n                openDirection={\n                    this.orientation === 'portrait' ? 'right' : 'top'\n                }\n            />\n        );\n    }\n\n    private calculateRange() {\n        if (this.range) {\n            return this.range;\n        }\n\n        const minRange = Math.min(0, ...this.items.map(this.getMinimumValue));\n        const maxRange = Math.max(...this.items.map(this.getMaximumValue));\n        const totalSum = this.items.reduce(\n            (sum, item) => sum + this.getMaximumValue(item),\n            0,\n        );\n\n        let finalMaxRange = this.maxValue ?? maxRange;\n        if (\n            (this.type === 'pie' || this.type === 'doughnut') &&\n            !this.maxValue\n        ) {\n            finalMaxRange = totalSum;\n        }\n\n        if (!this.axisIncrement) {\n            this.axisIncrement = this.calculateAxisIncrement(this.items);\n        }\n\n        const visualMaxValue =\n            Math.ceil(finalMaxRange / this.axisIncrement) * this.axisIncrement;\n        const visualMinValue =\n            Math.floor(minRange / this.axisIncrement) * this.axisIncrement;\n        const totalRange = visualMaxValue - visualMinValue;\n\n        return {\n            minValue: visualMinValue,\n            maxValue: visualMaxValue,\n            totalRange: totalRange,\n        };\n    }\n\n    private calculateAxisIncrement(\n        items: ChartItem[],\n        steps: number = DEFAULT_INCREMENT_SIZE,\n    ) {\n        const maxValue = Math.max(\n            ...items.map((item) => {\n                const value = item.value;\n                if (Array.isArray(value)) {\n                    return Math.max(...value);\n                }\n\n                return value;\n            }),\n        );\n\n        const roughStep = maxValue / steps;\n        // eslint-disable-next-line no-magic-numbers\n        const magnitude = 10 ** Math.floor(Math.log10(roughStep));\n\n        return Math.ceil(roughStep / magnitude) * magnitude;\n    }\n\n    private getMinimumValue(item: ChartItem): number {\n        const value = item.value;\n\n        return Array.isArray(value) ? Math.min(...value) : value;\n    }\n\n    private getMaximumValue(item: ChartItem): number {\n        const value = item.value;\n\n        return Array.isArray(value) ? Math.max(...value) : value;\n    }\n\n    private isRangeItem(item: ChartItem): item is ChartItem<[number, number]> {\n        return Array.isArray(item.value);\n    }\n\n    @Watch('items')\n    @Watch('axisIncrement')\n    @Watch('maxValue')\n    handleChange() {\n        this.range = null;\n        this.recalculateRangeData();\n    }\n\n    private recalculateRangeData() {\n        this.range = this.calculateRange();\n    }\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import{r as t,h as i,g as e}from"./p-443111b3.js";import{g as r}from"./p-2c35fb9d.js";class s{constructor(t){this.promises={};this.cache=t}async get(t,i=""){const e=await this.cache;const r=this.getUrl(t,i);let s=await e.match(r);if(!s){s=await this.fetchData(r,e)}return this.getIcon(s)}async fetchData(t,i){let e=this.promises[t];if(e===undefined){e=i.add(t);this.promises[t]=e}await e;return i.match(t)}async getIcon(t){let i=await t.text();i=i.replace(/#000000/g,"currentColor");if(!this.validSvg(i)){throw new Error("Invalid SVG")}return i}validSvg(t){const i=new DOMParser;const e=i.parseFromString(t,"image/svg+xml");return e.documentElement.tagName.toLowerCase()==="svg"}getUrl(t,i){let e=i||"";if(i&&!i.endsWith("/")){e=`${i}/`}return`${e}assets/icons/${t}.svg`}}class n{constructor(){this.cache={};this.resolveFunctions={}}async get(t,i=""){if(!this.cache[t]){this.cache[t]=await this.getIcon(t,i)}return this.cache[t]}getIcon(t,i){return new Promise((e=>{if(!this.resolveFunctions[t]){this.resolveFunctions[t]=[];this.fetchData(t,i)}this.resolveFunctions[t].push(e)}))}async fetchData(t,i){let e=i||"";if(i&&!i.endsWith("/")){e=`${i}/`}const r=await fetch(`${e}assets/icons/${t}.svg`);let s=await r.text();s=s.replace(/#000000/g,"currentColor");if(!this.validSvg(s)){throw new Error("Invalid SVG")}this.resolvePromises(t,s)}validSvg(t){const i=new DOMParser;const e=i.parseFromString(t,"image/svg+xml");return e.documentElement.tagName.toLowerCase()==="svg"}resolvePromises(t,i){const e=this.resolveFunctions[t];e.forEach((t=>{t(i)}));this.resolveFunctions[t]=null}}const o="@limetech/lime-elements/icons";function a(){try{const t=caches.open(o);return new s(t)}catch(t){return new n}}const h=(()=>a())();const m=":host{background-color:var(--icon-background-color, transparent);border-radius:50%;display:inline-block;line-height:0;box-sizing:border-box}:host svg{fill:currentColor;height:100%;pointer-events:none;width:100%}:host div{margin:var(--limel-icon-svg-margin, 0)}:host([hidden]){display:none}:host([size=x-small]){height:1rem !important;width:1rem !important}:host([size=small]){height:1.25rem !important;width:1.25rem !important}:host([size=medium]){height:1.5rem !important;width:1.5rem !important}:host([size=large]){height:1.75rem !important;width:1.75rem !important}:host([badge][size=x-small]){height:1.5rem !important;width:1.5rem !important;--limel-icon-svg-margin:0.25rem}:host([badge][size=small]){height:1.75rem !important;width:1.75rem !important;--limel-icon-svg-margin:0.25rem}:host([badge][size=medium]){height:2.5rem !important;width:2.5rem !important;--limel-icon-svg-margin:0.5rem}:host([badge][size=large]){height:2.75rem !important;width:2.75rem !important;--limel-icon-svg-margin:0.5rem}";const c=class{constructor(i){t(this,i);this.size=undefined;this.name=undefined;this.badge=undefined}componentDidLoad(){this.loadIcon(this.name)}render(){return i("div",{class:"container"})}async loadIcon(t){if(t===undefined||t===""){return}const i=await this.loadSvg(t);this.renderSvg(i)}loadSvg(t){return h.get(t,r.iconPath)}renderSvg(t){const i=this.host.shadowRoot.querySelector("div.container");if(i){i.innerHTML=t}}get host(){return e(this)}static get watchers(){return{name:["loadIcon"]}}};c.style=m;export{c as limel_icon};
+//# sourceMappingURL=p-d93f1964.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["CacheStorageIconCache","constructor","cache","this","promises","async","name","path","url","getUrl","response","match","fetchData","getIcon","requestPromise","undefined","add","svgData","text","replace","validSvg","Error","data","parser","DOMParser","svgDoc","parseFromString","documentElement","tagName","toLowerCase","iconPath","endsWith","InMemoryIconCache","resolveFunctions","Promise","resolve","push","fetch","resolvePromises","resolves","forEach","CACHE_NAME","createIconCache","caches","open","_a","iconCache","iconCss","Icon","componentDidLoad","loadIcon","render","h","class","loadSvg","renderSvg","get","globalConfig","container","host","shadowRoot","querySelector","innerHTML"],"sources":["./src/global/icon-cache/cache-storage-icon-cache.ts","./src/global/icon-cache/in-memory-icon-cache.ts","./src/global/icon-cache/factory.ts","./src/components/icon/icon.scss?tag=limel-icon&encapsulation=shadow","./src/components/icon/icon.tsx"],"sourcesContent":["export class CacheStorageIconCache {\n    /*\n     * Cache of all loaded SVGs\n     */\n    private cache: Promise<Cache>;\n\n    private promises: Record<string, Promise<void>> = {};\n\n    constructor(cache: Promise<Cache>) {\n        this.cache = cache;\n    }\n\n    /**\n     * Get icon data from the cache\n     *\n     * @param name - Name of the icon\n     * @param path - Path on the server where the assets are located\n     * @returns SVG markup\n     */\n    public async get(name: string, path = ''): Promise<string> {\n        const cache = await this.cache;\n        const url = this.getUrl(name, path);\n\n        let response = await cache.match(url);\n        if (!response) {\n            response = await this.fetchData(url, cache);\n        }\n\n        return this.getIcon(response);\n    }\n\n    private async fetchData(url: string, cache: Cache): Promise<Response> {\n        let requestPromise = this.promises[url];\n        if (requestPromise === undefined) {\n            requestPromise = cache.add(url);\n            this.promises[url] = requestPromise;\n        }\n\n        await requestPromise;\n\n        return cache.match(url);\n    }\n\n    /*\n     * Get icon data from a response\n     */\n    private async getIcon(response: Response): Promise<string> {\n        let svgData = await response.text();\n\n        // Some of the icons in the Icons8 library have hard coded black color on some of the paths.\n        // In order to apply coloring with CSS, these have to be set to 'currentColor'\n        svgData = svgData.replace(/#000000/g, 'currentColor');\n\n        if (!this.validSvg(svgData)) {\n            throw new Error('Invalid SVG');\n        }\n\n        return svgData;\n    }\n\n    /*\n     * Check if the given data is a valid SVG document\n     */\n    private validSvg(data) {\n        const parser = new DOMParser();\n        const svgDoc = parser.parseFromString(data, 'image/svg+xml');\n\n        return svgDoc.documentElement.tagName.toLowerCase() === 'svg';\n    }\n\n    private getUrl(name: string, path: string): string {\n        let iconPath = path || '';\n        if (path && !path.endsWith('/')) {\n            iconPath = `${path}/`;\n        }\n\n        return `${iconPath}assets/icons/${name}.svg`;\n    }\n}\n","export class InMemoryIconCache {\n    /*\n     * Cache of all loaded SVGs\n     */\n    private cache = {};\n\n    /*\n     * Contains resolve functions for all unresolved promises that are waiting for SVG data.\n     */\n    private resolveFunctions = {};\n\n    /**\n     * Get icon data from the cache\n     *\n     * @param name - Name of the icon\n     * @param path - Path on the server where the assets are located\n     * @returns SVG markup\n     */\n    public async get(name: string, path = ''): Promise<string> {\n        if (!this.cache[name]) {\n            this.cache[name] = await this.getIcon(name, path);\n        }\n\n        return this.cache[name];\n    }\n\n    /*\n     * Creates and returns a promise that will be resolved when SVG data is available\n     */\n    private getIcon(name, path) {\n        return new Promise((resolve) => {\n            if (!this.resolveFunctions[name]) {\n                this.resolveFunctions[name] = [];\n                this.fetchData(name, path);\n            }\n\n            this.resolveFunctions[name].push(resolve);\n        });\n    }\n\n    /*\n     * Fetch SVG data from the server\n     */\n    private async fetchData(name, path) {\n        let iconPath = path || '';\n        if (path && !path.endsWith('/')) {\n            iconPath = `${path}/`;\n        }\n\n        const response = await fetch(`${iconPath}assets/icons/${name}.svg`);\n\n        let svgData = await response.text();\n\n        // Some of the icons in the Icons8 library have hard coded black color on some of the paths.\n        // In order to apply coloring with CSS, these have to be set to 'currentColor'\n        svgData = svgData.replace(/#000000/g, 'currentColor');\n        if (!this.validSvg(svgData)) {\n            throw new Error('Invalid SVG');\n        }\n\n        this.resolvePromises(name, svgData);\n    }\n\n    /*\n     * Check if the given data is a valid SVG document\n     */\n    private validSvg(data) {\n        const parser = new DOMParser();\n        const svgDoc = parser.parseFromString(data, 'image/svg+xml');\n\n        return svgDoc.documentElement.tagName.toLowerCase() === 'svg';\n    }\n\n    /*\n     * Resolve all promises waiting for data for a specific icon\n     */\n    private resolvePromises(name, svgData) {\n        const resolves = this.resolveFunctions[name];\n        resolves.forEach((resolve) => {\n            resolve(svgData);\n        });\n        this.resolveFunctions[name] = null;\n    }\n}\n","import { CacheStorageIconCache } from './cache-storage-icon-cache';\nimport { InMemoryIconCache } from './in-memory-icon-cache';\n\nconst CACHE_NAME = '@limetech/lime-elements/icons';\n\nfunction createIconCache() {\n    try {\n        const cache = caches.open(CACHE_NAME);\n\n        return new CacheStorageIconCache(cache);\n    } catch {\n        return new InMemoryIconCache();\n    }\n}\n\nexport default (() => {\n    return createIconCache();\n})();\n","/**\n * @prop --icon-background-color: Background color when attribute `badge` is set to `true`. Defaults to `transparent`.\n */\n\n:host {\n    background-color: var(--icon-background-color, transparent);\n    border-radius: 50%;\n    display: inline-block;\n    line-height: 0;\n    box-sizing: border-box;\n\n    svg {\n        fill: currentColor;\n        height: 100%;\n        pointer-events: none;\n        width: 100%;\n    }\n\n    div {\n        margin: var(--limel-icon-svg-margin, 0);\n    }\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n:host([size='x-small']) {\n    height: 1rem !important;\n    width: 1rem !important;\n}\n:host([size='small']) {\n    height: 1.25rem !important;\n    width: 1.25rem !important;\n}\n:host([size='medium']) {\n    height: 1.5rem !important;\n    width: 1.5rem !important;\n}\n:host([size='large']) {\n    height: 1.75rem !important;\n    width: 1.75rem !important;\n}\n\n:host([badge][size='x-small']) {\n    height: 1.5rem !important;\n    width: 1.5rem !important;\n\n    --limel-icon-svg-margin: 0.25rem;\n}\n:host([badge][size='small']) {\n    height: 1.75rem !important;\n    width: 1.75rem !important;\n\n    --limel-icon-svg-margin: 0.25rem;\n}\n:host([badge][size='medium']) {\n    height: 2.5rem !important;\n    width: 2.5rem !important;\n\n    --limel-icon-svg-margin: 0.5rem;\n}\n:host([badge][size='large']) {\n    height: 2.75rem !important;\n    width: 2.75rem !important;\n\n    --limel-icon-svg-margin: 0.5rem;\n}\n","import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport { globalConfig } from '../../global/config';\nimport iconCache from '../../global/icon-cache/factory';\nimport { IconSize } from './icon.types';\n\n/**\n * Search for an icon and **click on it to copy its name to clipboard**.\n * <limel-example-icon-finder />\n *\n * *******\n *\n * :::important\n * To install your icon set correctly, please read the [documentation here](#/).\n * :::\n *\n * The size and color of the icon is normally set in CSS, however there are a few\n * standard sizes defined that can be used with the `size` property.\n *\n * :::note\n * There are icons included in the `@lundalogik/lime-icons8` package which are\n * designed by our designers at Lime.\n * The names of these icons start with `-lime-`, which makes them easy to\n * find using the Icon Finder tool below.\n *\n * Some of the multi-colored `-lime-` icons use our own CSS variables\n * (instead of HEX or RGB) values to visualize their colors. Thus, you must import\n * our color palette css files into your project to render the icons properly.\n * Read more about our [Color System](#/DesignGuidelines/color-system.md/)\n * and how to do this.\n * :::\n *\n * @exampleComponent limel-example-icon-name\n * @exampleComponent limel-example-icon-size\n * @exampleComponent limel-example-icon-color\n */\n@Component({\n    tag: 'limel-icon',\n    shadow: true,\n    styleUrl: 'icon.scss',\n})\nexport class Icon {\n    /**\n     * Size of the icon\n     */\n    @Prop({ reflect: true })\n    public size: IconSize;\n\n    /**\n     * Name of the icon\n     */\n    @Prop({ reflect: true })\n    public name: string;\n\n    /**\n     * Set to `true` to give the icon a round background with some padding.\n     * Only works when the `size` attribute is also set.\n     */\n    @Prop({ reflect: true })\n    public badge: boolean;\n\n    @Element()\n    private host: HTMLLimelIconElement;\n\n    public componentDidLoad() {\n        this.loadIcon(this.name);\n    }\n\n    public render() {\n        return <div class=\"container\" />;\n    }\n\n    @Watch('name')\n    protected async loadIcon(name: string) {\n        if (name === undefined || name === '') {\n            return;\n        }\n\n        const svgData = await this.loadSvg(name);\n        this.renderSvg(svgData);\n    }\n\n    /**\n     * Load the SVG data for the icon from the icon cache\n     *\n     * @param name - name of the icon\n     * @returns the icon SVG data\n     */\n    private loadSvg(name: string) {\n        return iconCache.get(name, globalConfig.iconPath);\n    }\n\n    /*\n     * There is no way to style external SVG files with CSS, i.e. SVGs loaded\n     * with <img src=\"file.svg\" /> or <object data=\"file.svg\" type=\"image/svg+xml\" />\n     * will remain the way they look in the file.\n     * Therefore we inject the svg as inline markup instead.\n     */\n    private renderSvg(svgData: string) {\n        const container = this.host.shadowRoot.querySelector('div.container');\n        if (container) {\n            container.innerHTML = svgData;\n        }\n    }\n}\n"],"mappings":"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"}

package/dist/lime-elements/{p-0f484317.entry.js → p-dd031410.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as i,h as e,g as r}from"./p-443111b3.js";import{t as a}from"./p-fe15bcbb.js";import{c as s}from"./p-3ccdc4a3.js";class o{constructor(){this.snackbarElements=[]}add(t){const i=this.getPopover(t);i===null||i===void 0?void 0:i.showPopover();this.snackbarElements=[t,...this.snackbarElements];this.emitOffsets()}remove(t){const i=this.getPopover(t);i===null||i===void 0?void 0:i.hidePopover();this.snackbarElements=this.snackbarElements.filter((i=>i!==t));this.emitOffsets()}emitOffsets(){let t=0;this.snackbarElements.forEach((i=>{i.dispatchEvent(new CustomEvent("changeOffset",{detail:t}));t+=this.getPopover(i).getBoundingClientRect().height}))}getPopover(t){return t.shadowRoot.querySelector("[popover]")}}const n="*{box-sizing:border-box}aside{background:none;border:none;inset:unset;overflow:visible;padding:0.5rem 0.5rem 0 0.5rem;right:0;width:var(--limel-snackbar-width, 21rem);top:calc(var(--snackbar-distance-to-top-edge) + env(safe-area-inset-top, 0));transition:opacity var(--limel-snackbar-opacity-transition-speed, 0.2s) ease, top var(--limel-snackbar-top-transition-speed, 0.46s) cubic-bezier(1, 0.09, 0, 0.89), transform var(--limel-snackbar-top-transition-speed, 0.46s) ease;transform:translate3d(0, 0, 0);opacity:1}aside.is-closing{transform:translate3d(2rem, 0, 0);opacity:0;--limel-snackbar-top-transition-speed:0.2s;--limel-snackbar-opacity-transition-speed:0.2s}.surface{overflow:hidden;padding:0.5rem;display:flex;align-items:center;justify-content:flex-start;gap:0.25rem;min-height:3.25rem;border-radius:0.75rem;background-color:rgb(var(--contrast-1400));box-shadow:var(--shadow-depth-8), var(--shadow-depth-16)}.label{color:rgb(var(--contrast-100));-webkit-font-smoothing:antialiased;font-size:0.8125rem;font-weight:400;padding:0 0.25rem;width:100%;flex-grow:1}.actions{display:flex;flex-shrink:0;align-items:center;box-sizing:border-box;gap:0.5rem}.dismiss,.actions{--lime-elevated-surface-background-color:rgb(\n      var(--contrast-1300)\n  )}.dismiss{--mdc-theme-on-surface:rgb(var(--contrast-100));--icon-background-color:var(--lime-elevated-surface-background-color);--fill-color:var(--mdc-theme-primary);--track-color:rgb(var(--contrast-800), 0.2);transition:opacity 0.1s ease, transform 0.1s ease;position:absolute;top:-0.375rem;left:-0.375rem;transform:scale(0.7);display:flex;align-items:center;justify-content:center}.dismiss svg{position:absolute;transform:rotate(90deg);fill:transparent;stroke-dasharray:100;stroke-linecap:round}aside:popover-open .dismiss svg{animation:timeout var(--snackbar-timeout) linear forwards}.dismiss .is-closing{transform:scale(0.5);opacity:0}.dismiss-button{transform:scale(0.8);margin:0;padding:0}@keyframes timeout{0%{stroke-width:4;stroke-dashoffset:0;opacity:1}100%{stroke-width:1;stroke-dashoffset:-100;opacity:0.7}}.limel-portal--container{font-family:var(--limel-portal-font-family, inherit);opacity:0;display:none}.limel-portal--container.is-visible{opacity:1;display:inline-block}.limel-portal--container.is-visible>*{will-change:opacity, transform}@keyframes fade-in{from{opacity:0;transform:scale(0.94)}to{opacity:1;transform:scale(1) translate3d(0, 0, 0)}}@keyframes fade-out{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.94) translate3d(0, 0, 0)}}.limel-portal--container>*{animation:fade-in 0.18s cubic-bezier(0.11, 0.59, 0.18, 1.26) forwards}.limel-portal--container.is-hiding>*{animation:fade-out 0.22s ease forwards}.limel-portal--container[data-popper-placement=left-start]>*{transform-origin:right top}.limel-portal--container[data-popper-placement=left]>*{transform-origin:right center}.limel-portal--container[data-popper-placement=left-end]>*{transform-origin:right bottom}.limel-portal--container[data-popper-placement=top-start]>*{transform-origin:left bottom}.limel-portal--container[data-popper-placement=top]>*{transform-origin:center bottom}.limel-portal--container[data-popper-placement=top-end]>*{transform-origin:right bottom}.limel-portal--container[data-popper-placement=right-start]>*{transform-origin:left top}.limel-portal--container[data-popper-placement=right]>*{transform-origin:left center}.limel-portal--container[data-popper-placement=right-end]>*{transform-origin:left bottom}.limel-portal--container[data-popper-placement=bottom-start]>*{transform-origin:left top}.limel-portal--container[data-popper-placement=bottom]>*{transform-origin:center top}.limel-portal--container[data-popper-placement=bottom-end]>*{transform-origin:right top}";const l=new o;const c=300;const p=class{constructor(e){t(this,e);this.action=i(this,"action",7);this.hide=i(this,"hide",7);this.handleOpen=()=>{if(this.isOpen){return}this.isOpen=true;this.closing=false;l.add(this.host);if(this.timeout&&this.timeout!==-1){this.timeoutId=window.setTimeout(this.handleClose,Math.max(this.timeout-c,c))}};this.handleClose=()=>{if(!this.isOpen){return}this.closing=true;if(this.timeoutId){clearTimeout(this.timeoutId);this.timeoutId=undefined}setTimeout((()=>{this.isOpen=false;l.remove(this.host);this.hide.emit();this.offset=0}),c)};this.handleClickAction=()=>{this.action.emit()};this.open=false;this.message=undefined;this.timeout=5e3;this.actionText=undefined;this.dismissible=true;this.multiline=undefined;this.language="en";this.offset=0;this.isOpen=false;this.closing=true;this.snackbarId=s()}componentDidLoad(){if(this.open){requestAnimationFrame(this.handleOpen)}}onChangeIndex(t){t.stopPropagation();this.offset=t.detail}watchOpen(){if(this.open){this.handleOpen()}else{this.handleClose()}this.isOpen=this.open}async show(){console.warn("The `show` method in `limel-snackbar` is deprecated. Please use the `open` property instead.");if(!this.open){this.handleOpen()}}render(){return e("aside",{popover:"manual",style:{"--snackbar-timeout":`${Math.max(this.timeout||0,0)}ms`,"--snackbar-distance-to-top-edge":`${this.offset}px`},class:{open:this.open,"is-closing":this.closing,"limel-portal--parent":true},id:this.snackbarId,role:this.setAriaRoles(),"aria-relevant":this.open?"additions":undefined},e("div",{class:"surface","aria-atomic":"false"},e("div",{class:"label"},this.message),this.renderActions(this.actionText),this.renderDismissButton(this.dismissible)))}setAriaRoles(){if(!this.open){return undefined}if(!this.timeout||this.timeout===-1){return"alertdialog"}return"status"}renderActions(t){if(!t){return}return e("div",{class:"actions","aria-atomic":"true"},this.renderActionButton(t))}renderActionButton(t){if(!t){return}return e("limel-button",{label:t,onClick:this.handleClickAction})}renderDismissButton(t){if(!t){return}const i=a.get("snackbar.dismiss",this.language);return e("div",{class:"dismiss"},this.renderTimeoutVisualization(),e("limel-icon-button",{class:"dismiss-button",icon:"multiply",label:i,onClick:this.handleClose,"aria-controls":this.snackbarId}))}renderTimeoutVisualization(){if(!this.timeout||this.timeout===-1){return}return e("svg",{width:"36",height:"36",viewBox:"0 0 36 36"},e("circle",{r:"18",cx:"18",cy:"18",fill:"var(--track-color)"}),e("path",{class:"track",d:"M 18,18 m -16,0 a 16,16 0 1,0 32,0 a 16,16 0 1,0 -32,0",stroke:"var(--fill-color)"}))}get host(){return r(this)}static get watchers(){return{open:["watchOpen"]}}};p.style=n;export{p as limel_snackbar};
-//# sourceMappingURL=p-0f484317.entry.js.map
+import{r as t,c as i,h as e,g as r}from"./p-443111b3.js";import{t as a}from"./p-8915fa60.js";import{c as s}from"./p-3ccdc4a3.js";class o{constructor(){this.snackbarElements=[]}add(t){const i=this.getPopover(t);i===null||i===void 0?void 0:i.showPopover();this.snackbarElements=[t,...this.snackbarElements];this.emitOffsets()}remove(t){const i=this.getPopover(t);i===null||i===void 0?void 0:i.hidePopover();this.snackbarElements=this.snackbarElements.filter((i=>i!==t));this.emitOffsets()}emitOffsets(){let t=0;this.snackbarElements.forEach((i=>{i.dispatchEvent(new CustomEvent("changeOffset",{detail:t}));t+=this.getPopover(i).getBoundingClientRect().height}))}getPopover(t){return t.shadowRoot.querySelector("[popover]")}}const n="*{box-sizing:border-box}aside{background:none;border:none;inset:unset;overflow:visible;padding:0.5rem 0.5rem 0 0.5rem;right:0;width:var(--limel-snackbar-width, 21rem);top:calc(var(--snackbar-distance-to-top-edge) + env(safe-area-inset-top, 0));transition:opacity var(--limel-snackbar-opacity-transition-speed, 0.2s) ease, top var(--limel-snackbar-top-transition-speed, 0.46s) cubic-bezier(1, 0.09, 0, 0.89), transform var(--limel-snackbar-top-transition-speed, 0.46s) ease;transform:translate3d(0, 0, 0);opacity:1}aside.is-closing{transform:translate3d(2rem, 0, 0);opacity:0;--limel-snackbar-top-transition-speed:0.2s;--limel-snackbar-opacity-transition-speed:0.2s}.surface{overflow:hidden;padding:0.5rem;display:flex;align-items:center;justify-content:flex-start;gap:0.25rem;min-height:3.25rem;border-radius:0.75rem;background-color:rgb(var(--contrast-1400));box-shadow:var(--shadow-depth-8), var(--shadow-depth-16)}.label{color:rgb(var(--contrast-100));-webkit-font-smoothing:antialiased;font-size:0.8125rem;font-weight:400;padding:0 0.25rem;width:100%;flex-grow:1}.actions{display:flex;flex-shrink:0;align-items:center;box-sizing:border-box;gap:0.5rem}.dismiss,.actions{--lime-elevated-surface-background-color:rgb(\n      var(--contrast-1300)\n  )}.dismiss{--mdc-theme-on-surface:rgb(var(--contrast-100));--icon-background-color:var(--lime-elevated-surface-background-color);--fill-color:var(--mdc-theme-primary);--track-color:rgb(var(--contrast-800), 0.2);transition:opacity 0.1s ease, transform 0.1s ease;position:absolute;top:-0.375rem;left:-0.375rem;transform:scale(0.7);display:flex;align-items:center;justify-content:center}.dismiss svg{position:absolute;transform:rotate(90deg);fill:transparent;stroke-dasharray:100;stroke-linecap:round}aside:popover-open .dismiss svg{animation:timeout var(--snackbar-timeout) linear forwards}.dismiss .is-closing{transform:scale(0.5);opacity:0}.dismiss-button{transform:scale(0.8);margin:0;padding:0}@keyframes timeout{0%{stroke-width:4;stroke-dashoffset:0;opacity:1}100%{stroke-width:1;stroke-dashoffset:-100;opacity:0.7}}.limel-portal--container{font-family:var(--limel-portal-font-family, inherit);opacity:0;display:none}.limel-portal--container.is-visible{opacity:1;display:inline-block}.limel-portal--container.is-visible>*{will-change:opacity, transform}@keyframes fade-in{from{opacity:0;transform:scale(0.94)}to{opacity:1;transform:scale(1) translate3d(0, 0, 0)}}@keyframes fade-out{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.94) translate3d(0, 0, 0)}}.limel-portal--container>*{animation:fade-in 0.18s cubic-bezier(0.11, 0.59, 0.18, 1.26) forwards}.limel-portal--container.is-hiding>*{animation:fade-out 0.22s ease forwards}.limel-portal--container[data-popper-placement=left-start]>*{transform-origin:right top}.limel-portal--container[data-popper-placement=left]>*{transform-origin:right center}.limel-portal--container[data-popper-placement=left-end]>*{transform-origin:right bottom}.limel-portal--container[data-popper-placement=top-start]>*{transform-origin:left bottom}.limel-portal--container[data-popper-placement=top]>*{transform-origin:center bottom}.limel-portal--container[data-popper-placement=top-end]>*{transform-origin:right bottom}.limel-portal--container[data-popper-placement=right-start]>*{transform-origin:left top}.limel-portal--container[data-popper-placement=right]>*{transform-origin:left center}.limel-portal--container[data-popper-placement=right-end]>*{transform-origin:left bottom}.limel-portal--container[data-popper-placement=bottom-start]>*{transform-origin:left top}.limel-portal--container[data-popper-placement=bottom]>*{transform-origin:center top}.limel-portal--container[data-popper-placement=bottom-end]>*{transform-origin:right top}";const l=new o;const c=300;const p=class{constructor(e){t(this,e);this.action=i(this,"action",7);this.hide=i(this,"hide",7);this.handleOpen=()=>{if(this.isOpen){return}this.isOpen=true;this.closing=false;l.add(this.host);if(this.timeout&&this.timeout!==-1){this.timeoutId=window.setTimeout(this.handleClose,Math.max(this.timeout-c,c))}};this.handleClose=()=>{if(!this.isOpen){return}this.closing=true;if(this.timeoutId){clearTimeout(this.timeoutId);this.timeoutId=undefined}setTimeout((()=>{this.isOpen=false;l.remove(this.host);this.hide.emit();this.offset=0}),c)};this.handleClickAction=()=>{this.action.emit()};this.open=false;this.message=undefined;this.timeout=5e3;this.actionText=undefined;this.dismissible=true;this.multiline=undefined;this.language="en";this.offset=0;this.isOpen=false;this.closing=true;this.snackbarId=s()}componentDidLoad(){if(this.open){requestAnimationFrame(this.handleOpen)}}onChangeIndex(t){t.stopPropagation();this.offset=t.detail}watchOpen(){if(this.open){this.handleOpen()}else{this.handleClose()}this.isOpen=this.open}async show(){console.warn("The `show` method in `limel-snackbar` is deprecated. Please use the `open` property instead.");if(!this.open){this.handleOpen()}}render(){return e("aside",{popover:"manual",style:{"--snackbar-timeout":`${Math.max(this.timeout||0,0)}ms`,"--snackbar-distance-to-top-edge":`${this.offset}px`},class:{open:this.open,"is-closing":this.closing,"limel-portal--parent":true},id:this.snackbarId,role:this.setAriaRoles(),"aria-relevant":this.open?"additions":undefined},e("div",{class:"surface","aria-atomic":"false"},e("div",{class:"label"},this.message),this.renderActions(this.actionText),this.renderDismissButton(this.dismissible)))}setAriaRoles(){if(!this.open){return undefined}if(!this.timeout||this.timeout===-1){return"alertdialog"}return"status"}renderActions(t){if(!t){return}return e("div",{class:"actions","aria-atomic":"true"},this.renderActionButton(t))}renderActionButton(t){if(!t){return}return e("limel-button",{label:t,onClick:this.handleClickAction})}renderDismissButton(t){if(!t){return}const i=a.get("snackbar.dismiss",this.language);return e("div",{class:"dismiss"},this.renderTimeoutVisualization(),e("limel-icon-button",{class:"dismiss-button",icon:"multiply",label:i,onClick:this.handleClose,"aria-controls":this.snackbarId}))}renderTimeoutVisualization(){if(!this.timeout||this.timeout===-1){return}return e("svg",{width:"36",height:"36",viewBox:"0 0 36 36"},e("circle",{r:"18",cx:"18",cy:"18",fill:"var(--track-color)"}),e("path",{class:"track",d:"M 18,18 m -16,0 a 16,16 0 1,0 32,0 a 16,16 0 1,0 -32,0",stroke:"var(--fill-color)"}))}get host(){return r(this)}static get watchers(){return{open:["watchOpen"]}}};p.style=n;export{p as limel_snackbar};
+//# sourceMappingURL=p-dd031410.entry.js.map

package/dist/lime-elements/style/mixins.scss

@@ -440,3 +440,19 @@ $clickable-normal-state-transitions: (
     -webkit-box-orient: vertical;
     -webkit-line-clamp: $max-lines;
 }
+
+// Hide element visually while keeping it accessible to assistive technologies
+// See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
+// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
+@mixin visually-hidden {
+    position: absolute;
+    width: 0;
+    height: 0;
+    margin: -1px;
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+}

package/dist/scss/mixins.scss

@@ -440,3 +440,19 @@ $clickable-normal-state-transitions: (
     -webkit-box-orient: vertical;
     -webkit-line-clamp: $max-lines;
 }
+
+// Hide element visually while keeping it accessible to assistive technologies
+// See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
+// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
+@mixin visually-hidden {
+    position: absolute;
+    width: 0;
+    height: 0;
+    margin: -1px;
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+}

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

@@ -0,0 +1,75 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { Image } from '../../global/shared-types/image.types';
+import { Icon } from '../../global/shared-types/icon.types';
+import { ListSeparator } from '../../global/shared-types/separator.types';
+import { ActionBarItem } from '../action-bar/action-bar.types';
+/**
+ * Card is a component that displays content about a single topic,
+ * in a structured way. It can contain a header, and some supporting media such
+ * as an image or an icon, a body of text, or optional actions.
+ *
+ * @exampleComponent limel-example-card-basic
+ * @exampleComponent limel-example-card-image
+ * @exampleComponent limel-example-card-actions
+ * @exampleComponent limel-example-card-clickable
+ * @exampleComponent limel-example-card-orientation
+ * @exampleComponent limel-example-card-slot
+ * @exampleComponent limel-example-card-styling
+ * @beta
+ */
+export declare class Card {
+  /**
+   * Heading of the card,
+   * to provide a short title about the context.
+   */
+  heading?: string;
+  /**
+   * Subheading of the card
+   * to provide a short description of the context.
+   */
+  subheading?: string;
+  /**
+   * A hero image to display in the card,
+   * to enrich the content with visual information.
+   */
+  image?: Image;
+  /**
+   * An icon, to display along with the heading and subheading.
+   */
+  icon?: string | Icon;
+  /**
+   * The content of the card.
+   * Supports markdown, to provide a rich text experience.
+   */
+  value?: string;
+  /**
+   * Actions to display in the card,
+   * to provide the user with options to interact with the content.
+   */
+  actions?: Array<ActionBarItem | ListSeparator>;
+  /**
+   * When true, improve the accessibility of the component and hints the user
+   * that the card can be interacted width.
+   */
+  clickable: boolean;
+  /**
+   * The orientation of the card,
+   * specially useful when the card has an image.
+   */
+  orientation: 'landscape' | 'portrait';
+  /**
+   * Fired when a action bar item has been clicked.
+   */
+  actionSelected: EventEmitter<ActionBarItem>;
+  render(): any;
+  private renderImage;
+  private renderHeader;
+  private renderIcon;
+  private renderHeading;
+  private renderSubheading;
+  private renderSlot;
+  private renderValue;
+  private handleActionSelect;
+  private renderActionBar;
+}
+//# sourceMappingURL=card.d.ts.map

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

@@ -0,0 +1,94 @@
+import { Languages } from '../date-picker/date.types';
+import { ChartItem } from './chart.types';
+/**
+ * A chart is a graphical representation of data, in which
+ * visual symbols such as such bars, dots, lines, or slices, represent
+ * each data point, in comparison to others.
+ *
+ * @exampleComponent limel-example-chart-stacked-bar
+ * @exampleComponent limel-example-chart-orientation
+ * @exampleComponent limel-example-chart-max-value
+ * @exampleComponent limel-example-chart-type-bar
+ * @exampleComponent limel-example-chart-type-dot
+ * @exampleComponent limel-example-chart-type-area
+ * @exampleComponent limel-example-chart-type-line
+ * @exampleComponent limel-example-chart-type-pie
+ * @exampleComponent limel-example-chart-type-doughnut
+ * @exampleComponent limel-example-chart-type-ring
+ * @exampleComponent limel-example-chart-type-gantt
+ * @exampleComponent limel-example-chart-type-nps
+ * @exampleComponent limel-example-chart-multi-axis
+ * @exampleComponent limel-example-chart-multi-axis-with-negative-start-values
+ * @exampleComponent limel-example-chart-multi-axis-area-with-negative-start-values
+ * @exampleComponent limel-example-chart-axis-increment
+ * @exampleComponent limel-example-chart-accessibility
+ * @exampleComponent limel-example-chart-styling
+ * @exampleComponent limel-example-chart-creative-styling
+ * @beta
+ */
+export declare class Chart {
+  /**
+   * Defines the language for translations.
+   * Will translate the translatable strings on the components.
+   */
+  language: Languages;
+  /**
+   * Helps users of assistive technologies to understand
+   * the context of the chart, and what is being displayed.
+   */
+  accessibleLabel?: string;
+  /**
+   * Helps users of assistive technologies to understand
+   * what the items in the chart represent.
+   */
+  accessibleItemsLabel?: string;
+  /**
+   * List of items in the chart,
+   * each representing a data point.
+   */
+  items: ChartItem[];
+  /**
+   * Defines how items are visualized in the chart.
+   */
+  type?: 'area' | 'bar' | 'doughnut' | 'line' | 'nps' | 'pie' | 'ring' | 'dot' | 'stacked-bar';
+  /**
+   * Defines whether the chart is intended to be displayed wide or tall.
+   * Does not have any effect on chart types which generate circular forms.
+   */
+  orientation?: 'landscape' | 'portrait';
+  /**
+   * Specifies the range that items' values could be in.
+   * This is used in calculation of the size of the items in the chart.
+   * When not provided, the sum of all values in the items will be considered as the range.
+   */
+  maxValue?: number;
+  /**
+   * Specifies the increment for the axis lines.
+   */
+  axisIncrement?: number;
+  /**
+   * Indicates whether the chart is in a loading state.
+   */
+  loading: boolean;
+  private range;
+  componentWillLoad(): void;
+  render(): any;
+  private renderCaption;
+  private renderTableHeader;
+  private renderAxises;
+  private renderItems;
+  private getItemStyle;
+  private getItemClass;
+  private calculateSizeAndOffset;
+  private getFormattedValue;
+  private getItemText;
+  private renderTooltip;
+  private calculateRange;
+  private calculateAxisIncrement;
+  private getMinimumValue;
+  private getMaximumValue;
+  private isRangeItem;
+  handleChange(): void;
+  private recalculateRangeData;
+}
+//# sourceMappingURL=chart.d.ts.map

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

@@ -0,0 +1,25 @@
+/**
+ * Chart component props.
+ * @beta
+ */
+export interface ChartItem<T extends number | [number, number] = number | [number, number]> {
+  /**
+   * Label displayed for the item.
+   */
+  text: string;
+  /**
+   * Value of the item.
+   */
+  value: T;
+  /**
+   * Formatted value of the item
+   */
+  formattedValue?: string;
+  /**
+   * Color of the item in the chart. Defaults to a shade of grey.
+   * It is recommended to use distinct colors for each item,
+   * and make sure there is enough contrast between colors of adjacent items.
+   */
+  color?: string;
+}
+//# sourceMappingURL=chart.types.d.ts.map