@limetech/lime-elements 37.64.2 → 37.64.3

package/dist/lime-elements/p-32844d2b.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as n}from"./p-443111b3.js";const i="@charset \"UTF-8\";\n/**\n * Note! This file is exported to `dist/scss/` in the published\n * node module, for consumer projects to import.\n * That means this file cannot import from any file that isn't\n * also exported, keeping the same relative path.\n *\n * Or, just don't import anything, that works too.\n */\n/**\n* This can be used on a trigger element that opens a dropdown menu or a popover.\n*/\n/**\n * This mixin will mask out the content that is close to\n * the edges of a scrollable area.\n * - If the scrollable content has `overflow-y`, use `vertically`\n * as an argument for `$direction`.\n - If the scrollable content has `overflow-x`, use `horizontally`\n * as an argument for `$direction`.\n *\n * For the visual effect to work smoothly, we need to make sure that\n * the size of the fade-out edge effect is the same as the\n * internal paddings of the scrollable area. Otherwise, content of a\n * scrollable area that does not have a padding will fade out before\n * any scrolling has been done.\n * This is why this mixin already adds paddings, which automatically\n * default to the size of the fade-out effect.\n * This size defaults to `1rem`, but to override the size use\n * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`\n * when `vertically` argument is set, and use\n * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`\n * when `horizontally` argument is set.\n * Of course you can also programmatically increase and decrease the\n * size of these variables for each edge, based on the amount of\n * scrolling that has been done by the user. In this case, make sure\n * to add a custom padding where the mixin is used, to override\n * the paddings that are automatically added by the mixin in the\n * compiled CSS code.\n */\n/**\n* This mixin will add an animated underline to the bottom of an `a` elements.\n* Note that you may need to add `all: unset;` –depending on your use case–\n* before using this mixin.\n*/\n/**\n* This mixin creates a cross-browser font stack.\n* - `sans-serif` can be used for the UI of the components.\n* - `monospace` can be used for code.\n*\n* ⚠️ If we change the font stacks, we need to update\n* 1. the consumer documentation in `README.md`, and\n* 2. the CSS variables of `--kompendium-example-font-family`\n* in the `<style>` tag of `index.html`.\n*/\n/**\n* This mixin is a hack, using old CSS syntax\n* to enable you to truncate a piece of text,\n* after a certain number of lines.\n*/\n/**\n* @prop --info-tile-border-radius: defines the radius of corners of the info-tile. Defaults to `1rem`\n* @prop --info-tile-icon-color: defines the fill color of the info-tile icon. Defaults to `--contrast-1000`\n* @prop --info-tile-text-color: defines the color of the info-tile label. Defaults to `--contrast-1100`\n* @prop --info-tile-background-color: defines the backgrounds color of the info-tile icon. Defaults to `--contrast-100`\n* @prop --info-tile-badge-text-color: Text color of the notification badge. Defaults to `--color-white`\n* @prop --info-tile-badge-background-color: Background color of the notification badge. Defaults to `--color-red-default`\n* @prop --info-tile-progress-fill-color: Determines the color of the progressed section. Defaults to `--lime-primary-color`.\n* @prop --info-tile-progress-background-color: Determines the background color of the central section of the progress bar. Defaults to `--info-tile-background-color`.\n* @prop --info-tile-progress-suffix-color: Determines the color of the progress prefix. Defaults to `--contrast-1000`.\n * @prop --info-tile-progress-text-color: Determines the color of the progress value. Defaults to `--info-tile-text-color`.\n * @prop --info-tile-progress-prefix-color: Determines the color of the progress suffix. Defaults to `--contrast-1000`.\n*/\n:host(limel-info-tile) {\n  --badge-text-color: var(\n      --info-tile-badge-text-color,\n      rgb(var(--color-white))\n  );\n  --badge-background-color: var(\n      --info-tile-badge-background-color,\n      rgb(var(--color-red-default))\n  );\n  --circular-progress-text-color: var(\n      --info-tile-progress-text-color,\n      var(--info-tile-text-color)\n  );\n  --circular-progress-suffix-color: var(--info-tile-progress-suffix-color);\n  --circular-progress-prefix-color: var(--info-tile-progress-prefix-color);\n  --circular-progress-track-color: rgb(var(--contrast-800), 0.3);\n  --circular-progress-fill-color: var(--info-tile-progress-fill-color);\n  --circular-progress-background-color: var(\n      --info-tile-progress-background-color,\n      var(--info-tile-background-color)\n  );\n  --label-min-size: 0.75rem;\n  --label-preferred-size: 6cqw;\n  --label-max-size: 1rem;\n  --value-min-size: 1rem;\n  --value-preferred-size: 20cqw;\n  --value-max-size: 4rem;\n  --suffix-prefix-min-size: 0.75rem;\n  --suffix-prefix-preferred-size: 8cqw;\n  --suffix-prefix-max-size: 1.5rem;\n  --icon-min-size: 2rem;\n  --icon-preferred-size: 60cqh;\n  --icon-max-size: calc(100cqw - 0.5rem);\n  isolation: isolate;\n  container-type: size;\n  position: relative;\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n:host(limel-info-tile) * {\n  box-sizing: border-box;\n}\n\n:host(limel-info-tile[disabled]) a {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\na {\n  all: unset;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  align-items: flex-start;\n  height: 100%;\n  width: 100%;\n  flex-grow: 1;\n  padding: 0.25rem 1rem 0.5rem 1rem;\n  border-radius: var(--info-tile-border-radius, 1rem);\n  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n}\na.is-clickable {\n  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);\n  cursor: pointer;\n  color: var(--mdc-theme-on-surface);\n  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n  box-shadow: var(--button-shadow-normal);\n}\na.is-clickable:hover, a.is-clickable:focus, a.is-clickable:focus-visible {\n  will-change: color, background-color, box-shadow, transform;\n}\na.is-clickable:hover {\n  transform: translate3d(0, -0.04rem, 0);\n  color: var(--mdc-theme-on-surface);\n  background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));\n  box-shadow: var(--button-shadow-hovered);\n}\na.is-clickable:active {\n  --limel-clickable-transform-timing-function: cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );\n  transform: translate3d(0, 0.05rem, 0);\n  box-shadow: var(--button-shadow-pressed);\n}\na.is-clickable:hover, a.is-clickable:active {\n  --limel-clickable-transition-speed: 0.2s;\n  --limel-clickable-transform-speed: 0.16s;\n}\na.is-clickable:focus {\n  outline: none;\n}\na.is-clickable:focus-visible {\n  outline: none;\n  box-shadow: var(--shadow-depth-8-focused);\n}\n\n.icon {\n  z-index: 1;\n  position: absolute;\n  top: 0.5rem;\n  right: 0.75rem;\n  padding: 0.25rem;\n  aspect-ratio: 1/1;\n  color: var(--info-tile-icon-color, rgb(var(--contrast-1000)));\n  border-radius: 0;\n  height: clamp(var(--icon-min-size), var(--icon-preferred-size), var(--icon-max-size));\n}\n@supports not (container-type: size) {\n  .icon {\n    width: max(10%, 3rem);\n  }\n}\n.has-circular-progress .icon {\n  top: unset;\n  bottom: 0.5rem;\n  --icon-min-size: 1.5rem;\n  --icon-preferred-size: 20cqh;\n}\n\n.progress {\n  position: absolute;\n  top: 0.75rem;\n  right: 0.75rem;\n  --circular-progress-size: min(\n      var(--icon-preferred-size),\n      var(--icon-max-size)\n  );\n}\n@supports not (container-type: size) {\n  .progress {\n    --circular-progress-size: initial;\n  }\n}\n\n.label {\n  z-index: 1;\n  color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n  line-height: 1.2;\n  font-size: clamp(var(--label-min-size), var(--label-preferred-size), var(--label-max-size));\n}\n@supports not (container-type: size) {\n  .label {\n    font-size: 0.875rem;\n  }\n}\n\nlimel-badge {\n  position: absolute;\n  top: -0.25rem;\n  right: -0.25rem;\n}\n\nlimel-linear-progress {\n  --lime-primary-color: var(--info-tile-text-color);\n  position: absolute;\n  inset: auto 0 0 0;\n}\n\n.value-group {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n}\n\n.value-and-suffix,\n.label {\n  text-shadow: 0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100))), 0 0 0.25rem var(--info-tile-background-color, rgb(var(--contrast-100)));\n}\n\n.value-and-suffix {\n  display: flex;\n}\n\n.prefix,\n.suffix {\n  font-size: clamp(var(--suffix-prefix-min-size), var(--suffix-prefix-preferred-size), var(--suffix-prefix-max-size));\n  opacity: 0.7;\n}\n@supports not (container-type: size) {\n  .prefix,\n  .suffix {\n    font-size: 0.75rem;\n  }\n}\n\n.prefix {\n  align-self: flex-start;\n  line-height: normal;\n  transform: translateY(40%);\n}\n\n.value {\n  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.95);\n  transform-origin: left;\n  transform: translate3d(0, 0, 0) scale(1);\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  font-weight: bold;\n  line-height: normal;\n  font-size: clamp(var(--value-min-size), var(--value-preferred-size), var(--value-max-size));\n}\n@supports not (container-type: size) {\n  .value {\n    font-size: 1.5rem;\n  }\n}\n:host(limel-info-tile[loading]) .value {\n  opacity: 0.3;\n  transform: translate3d(0, 0, 0) scale(0.9);\n}\n\n.suffix {\n  transform: translateY(10%);\n}\n\n@container (width < 8rem) {\n  .progress {\n    top: 0.25rem;\n    right: 0.25rem;\n  }\n  a {\n    padding: 0.375rem;\n    gap: 0.125rem;\n  }\n}\n@container (width < 18.75rem) {\n  .progress {\n    top: 0.5rem;\n    right: 0.5rem;\n  }\n  .icon {\n    top: 0.25rem;\n    right: 0.5rem;\n  }\n  .has-circular-progress .icon {\n    right: 0.25rem;\n    bottom: 0.25rem;\n  }\n}\n@container (width < 40.5rem) {\n  .value {\n    --value-preferred-size: 13cqw;\n  }\n  .value.ch-1, .value.ch-2, .value.ch-3, .value.ch-4 {\n    --value-preferred-size: 20cqw;\n  }\n  .value.ch-5 {\n    --value-preferred-size: 18cqw;\n  }\n  .value.ch-6 {\n    --value-preferred-size: 17cqw;\n  }\n  .value.ch-7 {\n    --value-preferred-size: 16cqw;\n  }\n  .value.ch-8 {\n    --value-preferred-size: 15cqw;\n  }\n  .value.ch-9 {\n    --value-preferred-size: 14cqw;\n  }\n}\n@container (height > 8rem) {\n  a {\n    padding-top: 0.75rem;\n    padding-bottom: 1rem;\n  }\n}\n@container (height < 8rem) and (width > 8rem) {\n  .value {\n    --value-preferred-size: 32cqh !important;\n  }\n  .suffix,\n  .prefix {\n    --suffix-prefix-preferred-size: 16cqh !important;\n  }\n}\n@container (height > 18.75rem) {\n  .progress,\n  .icon {\n    position: relative;\n    top: unset;\n    right: unset;\n  }\n  a {\n    align-items: center;\n    justify-content: center;\n  }\n  .label {\n    text-align: center;\n  }\n  .has-circular-progress .icon {\n    position: absolute;\n    top: 0.5rem;\n    right: 0.5rem;\n    --icon-max-size: 3rem;\n  }\n}";const o=class{constructor(i){e(this,i);this.renderPrefix=()=>{if(this.prefix){return n("span",{class:"prefix"},this.prefix)}};this.renderValue=()=>{var e;const i=((e=this.value)!==null&&e!==void 0?e:"").toString().length;if(!this.value&&this.loading){return n("span",{class:"value"},"···")}if(this.value){return n("span",{class:{value:true,[`ch-${i}`]:true}},this.value)}};this.renderSuffix=()=>{if(this.suffix){return n("span",{class:"suffix"},this.suffix)}};this.renderIcon=()=>{if(this.icon){return n("limel-icon",{class:"icon",name:this.icon})}};this.renderProgress=()=>{var e,i;if(((e=this.progress)===null||e===void 0?void 0:e.value)||((i=this.progress)===null||i===void 0?void 0:i.value)===0){return n("limel-circular-progress",{class:"progress",prefix:this.progress.prefix,value:this.progress.value,suffix:this.progress.suffix,maxValue:this.progress.maxValue,displayPercentageColors:this.progress.displayPercentageColors})}};this.renderLabel=()=>{if(this.label){return n("span",{class:"label"},this.label)}};this.renderNotification=()=>{if(this.badge){return n("limel-badge",{label:this.badge})}};this.renderSpinner=()=>{if(this.loading){return n("limel-linear-progress",{indeterminate:true})}};this.value=undefined;this.icon=undefined;this.label=null;this.prefix=undefined;this.suffix=undefined;this.disabled=false;this.badge=undefined;this.loading=false;this.link=undefined;this.progress=undefined}render(){var e,i,o,r,t,s,a,l,c,d;const f=this.checkProps(this===null||this===void 0?void 0:this.prefix)+this.value+" "+this.checkProps(this===null||this===void 0?void 0:this.suffix)+this.checkProps(this===null||this===void 0?void 0:this.label)+". "+this.checkProps((e=this===null||this===void 0?void 0:this.progress)===null||e===void 0?void 0:e.prefix)+this.checkProps((i=this===null||this===void 0?void 0:this.progress)===null||i===void 0?void 0:i.value)+this.checkProps((o=this===null||this===void 0?void 0:this.progress)===null||o===void 0?void 0:o.suffix)+this.checkProps((r=this===null||this===void 0?void 0:this.link)===null||r===void 0?void 0:r.title);const h=!this.disabled?(t=this.link)===null||t===void 0?void 0:t.href:"#";return[n("a",{title:(s=this.link)===null||s===void 0?void 0:s.title,href:h,target:(a=this.link)===null||a===void 0?void 0:a.target,tabindex:"0","aria-label":f,"aria-disabled":this.disabled,"aria-busy":this.loading?"true":"false","aria-live":"polite",class:{"is-clickable":!!((l=this.link)===null||l===void 0?void 0:l.href)&&!this.disabled,"has-circular-progress":!!((c=this.progress)===null||c===void 0?void 0:c.value)||((d=this.progress)===null||d===void 0?void 0:d.value)===0}},this.renderIcon(),this.renderProgress(),n("div",{class:"value-group"},this.renderPrefix(),n("div",{class:"value-and-suffix"},this.renderValue(),this.renderSuffix()),this.renderSpinner()),this.renderLabel()),this.renderNotification()]}checkProps(e){return!e?"":e+" "}};o.style=i;export{o as limel_info_tile};
+//# sourceMappingURL=p-32844d2b.entry.js.map

package/dist/lime-elements/{p-7d215789.entry.js.map → p-32844d2b.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["infoTileCss","InfoTile","this","renderPrefix","prefix","h","class","renderValue","characterCount","_a","value","toString","length","loading","renderSuffix","suffix","renderIcon","icon","name","renderProgress","progress","_b","maxValue","displayPercentageColors","renderLabel","label","renderNotification","badge","renderSpinner","indeterminate","render","extendedAriaLabel","checkProps","_c","_d","link","title","disabled","_e","href","_f","target","_g","tabindex","_h","_j","_k","propValue"],"sources":["./src/components/info-tile/info-tile.scss?tag=limel-info-tile&encapsulation=shadow","./src/components/info-tile/info-tile.tsx"],"sourcesContent":["/**\n* @prop --info-tile-border-radius: defines the radius of corners of the info-tile. Defaults to `1rem`\n* @prop --info-tile-icon-color: defines the fill color of the info-tile icon. Defaults to `--contrast-1000`\n* @prop --info-tile-text-color: defines the color of the info-tile label. Defaults to `--contrast-1100`\n* @prop --info-tile-background-color: defines the backgrounds color of the info-tile icon. Defaults to `--contrast-100`\n* @prop --info-tile-badge-text-color: Text color of the notification badge. Defaults to `--color-white`\n* @prop --info-tile-badge-background-color: Background color of the notification badge. Defaults to `--color-red-default`\n* @prop --info-tile-progress-fill-color: Determines the color of the progressed section. Defaults to `--lime-primary-color`.\n* @prop --info-tile-progress-background-color: Determines the background color of the central section of the progress bar. Defaults to `--info-tile-background-color`.\n* @prop --info-tile-progress-suffix-color: Determines the color of the progress prefix. Defaults to `--contrast-1000`.\n * @prop --info-tile-progress-text-color: Determines the color of the progress value. Defaults to `--info-tile-text-color`.\n * @prop --info-tile-progress-prefix-color: Determines the color of the progress suffix. Defaults to `--contrast-1000`.\n*/\n\n@use '../../style/mixins';\n\n:host(limel-info-tile) {\n    --badge-text-color: var(\n        --info-tile-badge-text-color,\n        rgb(var(--color-white))\n    );\n    --badge-background-color: var(\n        --info-tile-badge-background-color,\n        rgb(var(--color-red-default))\n    );\n\n    --circular-progress-text-color: var(\n        --info-tile-progress-text-color,\n        var(--info-tile-text-color)\n    );\n    --circular-progress-suffix-color: var(--info-tile-progress-suffix-color);\n    --circular-progress-prefix-color: var(--info-tile-progress-prefix-color);\n    --circular-progress-track-color: rgb(var(--contrast-800), 0.3);\n    --circular-progress-fill-color: var(--info-tile-progress-fill-color);\n    --circular-progress-background-color: var(\n        --info-tile-progress-background-color,\n        var(--info-tile-background-color)\n    );\n\n    --label-min-size: 0.75rem;\n    --label-preferred-size: 6cqw;\n    --label-max-size: 1rem;\n\n    --value-min-size: 1rem;\n    --value-preferred-size: 20cqw;\n    --value-max-size: 4rem;\n\n    --suffix-prefix-min-size: 0.75rem;\n    --suffix-prefix-preferred-size: 8cqw;\n    --suffix-prefix-max-size: 1.5rem;\n\n    --icon-min-size: 2rem;\n    --icon-preferred-size: 60cqh;\n    --icon-max-size: calc(100cqw - 0.5rem);\n\n    isolation: isolate;\n    container-type: size;\n    position: relative;\n    display: flex;\n\n    width: 100%;\n    height: 100%;\n\n    * {\n        box-sizing: border-box;\n    }\n}\n\n:host(limel-info-tile[disabled]) {\n    a {\n        opacity: 0.5;\n        cursor: not-allowed;\n    }\n}\n\na {\n    all: unset;\n    overflow: hidden;\n\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    align-items: flex-start;\n\n    height: 100%;\n    width: 100%;\n    flex-grow: 1;\n\n    padding: 0.25rem 1rem 0.5rem 1rem;\n    border-radius: var(--info-tile-border-radius, 1rem);\n    background-color: var(\n        --info-tile-background-color,\n        var(--lime-elevated-surface-background-color)\n    );\n\n    &.is-clickable {\n        @include mixins.is-elevated-clickable(\n            $background-color:\n                var(\n                    --info-tile-background-color,\n                    var(--lime-elevated-surface-background-color)\n                ),\n            $background-color--hovered:\n                var(\n                    --info-tile-background-color,\n                    var(--lime-elevated-surface-background-color)\n                )\n        );\n        @include mixins.visualize-keyboard-focus;\n    }\n}\n\n.icon {\n    z-index: 1;\n    position: absolute;\n    top: 0.5rem;\n    right: 0.75rem;\n    padding: 0.25rem;\n\n    aspect-ratio: 1/1;\n\n    color: var(--info-tile-icon-color, rgb(var(--contrast-1000)));\n\n    border-radius: 0;\n    height: clamp(\n        var(--icon-min-size),\n        var(--icon-preferred-size),\n        var(--icon-max-size)\n    );\n\n    @supports not (container-type: size) {\n        width: max(10%, 3rem);\n    }\n\n    .has-circular-progress & {\n        top: unset;\n        bottom: 0.5rem;\n        --icon-min-size: 1.5rem;\n        --icon-preferred-size: 20cqh;\n    }\n}\n\n.progress {\n    position: absolute;\n    top: 0.75rem;\n    right: 0.75rem;\n\n    --circular-progress-size: min(\n        var(--icon-preferred-size),\n        var(--icon-max-size)\n    );\n    @supports not (container-type: size) {\n        --circular-progress-size: initial;\n    }\n}\n\n.label {\n    z-index: 1;\n    color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n\n    line-height: 1.2;\n    font-size: clamp(\n        var(--label-min-size),\n        var(--label-preferred-size),\n        var(--label-max-size)\n    );\n    @supports not (container-type: size) {\n        font-size: 0.875rem;\n    }\n}\n\nlimel-badge {\n    position: absolute;\n    top: -0.25rem;\n    right: -0.25rem;\n}\n\nlimel-linear-progress {\n    --lime-primary-color: var(--info-tile-text-color);\n    position: absolute;\n    inset: auto 0 0 0;\n}\n\n.value-group {\n    position: relative;\n    z-index: 1;\n    display: flex;\n    flex-direction: column;\n    color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n}\n\n.value-and-suffix,\n.label {\n    text-shadow:\n        0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100))),\n        0 0 0.25rem var(--info-tile-background-color, rgb(var(--contrast-100)));\n}\n\n.value-and-suffix {\n    display: flex;\n}\n\n.prefix,\n.suffix {\n    font-size: clamp(\n        var(--suffix-prefix-min-size),\n        var(--suffix-prefix-preferred-size),\n        var(--suffix-prefix-max-size)\n    );\n    opacity: 0.7;\n\n    @supports not (container-type: size) {\n        font-size: 0.75rem;\n    }\n}\n\n.prefix {\n    align-self: flex-start;\n    line-height: normal;\n    transform: translateY(40%);\n}\n\n.value {\n    transition:\n        opacity 0.2s ease,\n        transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.95);\n    transform-origin: left;\n    transform: translate3d(0, 0, 0) scale(1);\n\n    @include mixins.truncate-text;\n    font-weight: bold;\n    line-height: normal;\n\n    font-size: clamp(\n        var(--value-min-size),\n        var(--value-preferred-size),\n        var(--value-max-size)\n    );\n    @supports not (container-type: size) {\n        font-size: 1.5rem;\n    }\n\n    :host(limel-info-tile[loading]) & {\n        opacity: 0.3;\n        transform: translate3d(0, 0, 0) scale(0.9);\n    }\n}\n\n.suffix {\n    transform: translateY(10%);\n}\n\n$xs: 8rem; //128px:\n$s: 18.75rem; //300px\n$m: 40.5rem; //648px\n$l: 62.5rem; //1000px\n\n@container (width < #{$xs}) {\n    .progress {\n        top: 0.25rem;\n        right: 0.25rem;\n    }\n    a {\n        padding: 0.375rem;\n        gap: 0.125rem;\n    }\n}\n\n@container (width < #{$s}) {\n    .progress {\n        top: 0.5rem;\n        right: 0.5rem;\n    }\n    .icon {\n        top: 0.25rem;\n        right: 0.5rem;\n        .has-circular-progress & {\n            right: 0.25rem;\n            bottom: 0.25rem;\n        }\n    }\n}\n\n@container (width < #{$m}) {\n    .value {\n        &.ch-1,\n        &.ch-2,\n        &.ch-3,\n        &.ch-4 {\n            --value-preferred-size: 20cqw;\n        }\n        &.ch-5 {\n            --value-preferred-size: 18cqw;\n        }\n        &.ch-6 {\n            --value-preferred-size: 17cqw;\n        }\n        &.ch-7 {\n            --value-preferred-size: 16cqw;\n        }\n        &.ch-8 {\n            --value-preferred-size: 15cqw;\n        }\n        &.ch-9 {\n            --value-preferred-size: 14cqw;\n        }\n        --value-preferred-size: 13cqw;\n    }\n}\n\n@container (height > #{$xs}) {\n    a {\n        padding-top: 0.75rem;\n        padding-bottom: 1rem;\n    }\n}\n\n@container (height < #{$xs}) and (width > #{$xs}) {\n    .value {\n        --value-preferred-size: 32cqh !important;\n    }\n    .suffix,\n    .prefix {\n        --suffix-prefix-preferred-size: 16cqh !important;\n    }\n}\n\n@container (height > #{$s}) {\n    .progress,\n    .icon {\n        position: relative;\n        top: unset;\n        right: unset;\n    }\n    a {\n        align-items: center;\n        justify-content: center;\n    }\n    .label {\n        text-align: center;\n        // -webkit-line-clamp: 3;\n    }\n    .has-circular-progress {\n        .icon {\n            position: absolute;\n            top: 0.5rem;\n            right: 0.5rem;\n            --icon-max-size: 3rem;\n        }\n    }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { InfoTileProgress } from '../info-tile/info-tile.types';\nimport { Link } from '../../global/shared-types/link.types';\n\n/**\n * This component can be used on places such as a start page or a dashboard.\n * It offers features for visualizing aggregated data along with supplementary\n * information.\n *\n * If clicking on the component should navigate the user to\n * a new screen or web page, you need to provide a URL,\n * using the `link` property.\n *\n * @exampleComponent limel-example-info-tile\n * @exampleComponent limel-example-info-tile-badge\n * @exampleComponent limel-example-info-tile-progress\n * @exampleComponent limel-example-info-tile-loading\n * @exampleComponent limel-example-info-tile-styling\n */\n@Component({\n    tag: 'limel-info-tile',\n    shadow: true,\n    styleUrl: 'info-tile.scss',\n})\nexport class InfoTile {\n    /**\n     * A piece of text or number that is the main piece of information\n     * which the component is intended to visualize.\n     */\n    @Prop({ reflect: true })\n    public value: number | string;\n\n    /**\n     * Name of icon for the info tile.\n     */\n    @Prop()\n    public icon?: string;\n\n    /**\n     * The text to show below the info tile. Long labels will be truncated.\n     */\n    @Prop({ reflect: true })\n    public label?: string = null;\n\n    /**\n     * A string of text that is visually placed before the value.\n     */\n    @Prop({ reflect: true })\n    public prefix?: string;\n\n    /**\n     * A string of text that is visually placed after the value.\n     */\n    @Prop({ reflect: true })\n    public suffix?: string;\n\n    /**\n     * Set to `true` if info tile is disabled.\n     */\n    @Prop({ reflect: true })\n    public disabled? = false;\n\n    /**\n     * If supplied, the info tile will display a notification badge.\n     */\n    @Prop({ reflect: true })\n    public badge?: number | string;\n\n    /**\n     * Set to `true` to put the component in the `loading` state.\n     * This does _not_ disable the link. To do so, the\n     * `disabled` property should be set to `true` as well.\n     */\n    @Prop({ reflect: true })\n    public loading? = false;\n\n    /**\n     * If supplied, the info tile will be a clickable link.\n     *\n     * Supplying a value also adds an elevated effect using a shadow,\n     * as well as `cursor: pointer`, which appears on hover.\n     * While we strongly recommend supplying a link whenever the\n     * component should act as a link, if this is not possible, and\n     * you need to provide interaction through a click handler,\n     * you can still get the correct styling by supplying a `Link`\n     * object with the `href` property set to `'#'`.\n     */\n    @Prop()\n    public link?: Link;\n\n    /**\n     * Properties of the optional circular progress bar.\n     *\n     * Defaults:\n     * - `maxValue`: 100\n     * - `suffix`: %\n     * - `displayPercentageColors`: false\n     *\n     * Colors change with intervals of 10 %.\n     */\n    @Prop()\n    public progress?: InfoTileProgress;\n\n    public render() {\n        const extendedAriaLabel =\n            this.checkProps(this?.prefix) +\n            this.value +\n            ' ' +\n            this.checkProps(this?.suffix) +\n            this.checkProps(this?.label) +\n            '. ' +\n            this.checkProps(this?.progress?.prefix) +\n            this.checkProps(this?.progress?.value) +\n            this.checkProps(this?.progress?.suffix) +\n            this.checkProps(this?.link?.title);\n\n        const link = !this.disabled ? this.link?.href : '#';\n\n        return [\n            <a\n                title={this.link?.title}\n                href={link}\n                target={this.link?.target}\n                tabindex=\"0\"\n                aria-label={extendedAriaLabel}\n                aria-disabled={this.disabled}\n                aria-busy={this.loading ? 'true' : 'false'}\n                aria-live=\"polite\"\n                class={{\n                    'is-clickable': !!this.link?.href && !this.disabled,\n                    'has-circular-progress':\n                        !!this.progress?.value || this.progress?.value === 0,\n                }}\n            >\n                {this.renderIcon()}\n                {this.renderProgress()}\n                <div class=\"value-group\">\n                    {this.renderPrefix()}\n                    <div class=\"value-and-suffix\">\n                        {this.renderValue()}\n                        {this.renderSuffix()}\n                    </div>\n                    {this.renderSpinner()}\n                </div>\n                {this.renderLabel()}\n            </a>,\n            this.renderNotification(),\n        ];\n    }\n\n    private checkProps(propValue) {\n        return !propValue ? '' : propValue + ' ';\n    }\n\n    private renderPrefix = () => {\n        if (this.prefix) {\n            return <span class=\"prefix\">{this.prefix}</span>;\n        }\n    };\n\n    private renderValue = () => {\n        const characterCount = (this.value ?? '').toString().length;\n\n        if (!this.value && this.loading) {\n            return <span class=\"value\">···</span>;\n        }\n\n        if (this.value) {\n            return (\n                <span\n                    class={{\n                        value: true,\n                        [`ch-${characterCount}`]: true,\n                    }}\n                >\n                    {this.value}\n                </span>\n            );\n        }\n    };\n\n    private renderSuffix = () => {\n        if (this.suffix) {\n            return <span class=\"suffix\">{this.suffix}</span>;\n        }\n    };\n\n    private renderIcon = () => {\n        if (this.icon) {\n            return <limel-icon class=\"icon\" name={this.icon} />;\n        }\n    };\n\n    private renderProgress = () => {\n        if (this.progress?.value || this.progress?.value === 0) {\n            return (\n                <limel-circular-progress\n                    class=\"progress\"\n                    prefix={this.progress.prefix}\n                    value={this.progress.value}\n                    suffix={this.progress.suffix}\n                    maxValue={this.progress.maxValue}\n                    displayPercentageColors={\n                        this.progress.displayPercentageColors\n                    }\n                />\n            );\n        }\n    };\n\n    private renderLabel = () => {\n        if (this.label) {\n            return <span class=\"label\">{this.label}</span>;\n        }\n    };\n\n    private renderNotification = () => {\n        if (this.badge) {\n            return <limel-badge label={this.badge} />;\n        }\n    };\n\n    private renderSpinner = () => {\n        if (this.loading) {\n            return <limel-linear-progress indeterminate={true} />;\n        }\n    };\n}\n"],"mappings":"2CAAA,MAAMA,EAAc,k/U,MCwBPC,EAAQ,M,yBAkITC,KAAAC,aAAe,KACnB,GAAID,KAAKE,OAAQ,CACb,OAAOC,EAAA,QAAMC,MAAM,UAAUJ,KAAKE,O,GAIlCF,KAAAK,YAAc,K,MAClB,MAAMC,IAAkBC,EAAAP,KAAKQ,SAAK,MAAAD,SAAA,EAAAA,EAAI,IAAIE,WAAWC,OAErD,IAAKV,KAAKQ,OAASR,KAAKW,QAAS,CAC7B,OAAOR,EAAA,QAAMC,MAAM,SAAO,M,CAG9B,GAAIJ,KAAKQ,MAAO,CACZ,OACIL,EAAA,QACIC,MAAO,CACHI,MAAO,KACP,CAAC,MAAMF,KAAmB,OAG7BN,KAAKQ,M,GAMdR,KAAAY,aAAe,KACnB,GAAIZ,KAAKa,OAAQ,CACb,OAAOV,EAAA,QAAMC,MAAM,UAAUJ,KAAKa,O,GAIlCb,KAAAc,WAAa,KACjB,GAAId,KAAKe,KAAM,CACX,OAAOZ,EAAA,cAAYC,MAAM,OAAOY,KAAMhB,KAAKe,M,GAI3Cf,KAAAiB,eAAiB,K,QACrB,KAAIV,EAAAP,KAAKkB,YAAQ,MAAAX,SAAA,SAAAA,EAAEC,UAASW,EAAAnB,KAAKkB,YAAQ,MAAAC,SAAA,SAAAA,EAAEX,SAAU,EAAG,CACpD,OACIL,EAAA,2BACIC,MAAM,WACNF,OAAQF,KAAKkB,SAAShB,OACtBM,MAAOR,KAAKkB,SAASV,MACrBK,OAAQb,KAAKkB,SAASL,OACtBO,SAAUpB,KAAKkB,SAASE,SACxBC,wBACIrB,KAAKkB,SAASG,yB,GAO1BrB,KAAAsB,YAAc,KAClB,GAAItB,KAAKuB,MAAO,CACZ,OAAOpB,EAAA,QAAMC,MAAM,SAASJ,KAAKuB,M,GAIjCvB,KAAAwB,mBAAqB,KACzB,GAAIxB,KAAKyB,MAAO,CACZ,OAAOtB,EAAA,eAAaoB,MAAOvB,KAAKyB,O,GAIhCzB,KAAA0B,cAAgB,KACpB,GAAI1B,KAAKW,QAAS,CACd,OAAOR,EAAA,yBAAuBwB,cAAe,M,uDAtL7B,K,0DAkBL,M,kCAcD,M,4CA6BXC,S,wBACH,MAAMC,EACF7B,KAAK8B,WAAW9B,OAAI,MAAJA,YAAI,SAAJA,KAAME,QACtBF,KAAKQ,MACL,IACAR,KAAK8B,WAAW9B,OAAI,MAAJA,YAAI,SAAJA,KAAMa,QACtBb,KAAK8B,WAAW9B,OAAI,MAAJA,YAAI,SAAJA,KAAMuB,OACtB,KACAvB,KAAK8B,YAAWvB,EAAAP,OAAI,MAAJA,YAAI,SAAJA,KAAMkB,YAAQ,MAAAX,SAAA,SAAAA,EAAEL,QAChCF,KAAK8B,YAAWX,EAAAnB,OAAI,MAAJA,YAAI,SAAJA,KAAMkB,YAAQ,MAAAC,SAAA,SAAAA,EAAEX,OAChCR,KAAK8B,YAAWC,EAAA/B,OAAI,MAAJA,YAAI,SAAJA,KAAMkB,YAAQ,MAAAa,SAAA,SAAAA,EAAElB,QAChCb,KAAK8B,YAAWE,EAAAhC,OAAI,MAAJA,YAAI,SAAJA,KAAMiC,QAAI,MAAAD,SAAA,SAAAA,EAAEE,OAEhC,MAAMD,GAAQjC,KAAKmC,UAAWC,EAAApC,KAAKiC,QAAI,MAAAG,SAAA,SAAAA,EAAEC,KAAO,IAEhD,MAAO,CACHlC,EAAA,KACI+B,OAAOI,EAAAtC,KAAKiC,QAAI,MAAAK,SAAA,SAAAA,EAAEJ,MAClBG,KAAMJ,EACNM,QAAQC,EAAAxC,KAAKiC,QAAI,MAAAO,SAAA,SAAAA,EAAED,OACnBE,SAAS,IAAG,aACAZ,EAAiB,gBACd7B,KAAKmC,SAAQ,YACjBnC,KAAKW,QAAU,OAAS,QAAO,YAChC,SACVP,MAAO,CACH,mBAAkBsC,EAAA1C,KAAKiC,QAAI,MAAAS,SAAA,SAAAA,EAAEL,QAASrC,KAAKmC,SAC3C,4BACMQ,EAAA3C,KAAKkB,YAAQ,MAAAyB,SAAA,SAAAA,EAAEnC,UAASoC,EAAA5C,KAAKkB,YAAQ,MAAA0B,SAAA,SAAAA,EAAEpC,SAAU,IAG1DR,KAAKc,aACLd,KAAKiB,iBACNd,EAAA,OAAKC,MAAM,eACNJ,KAAKC,eACNE,EAAA,OAAKC,MAAM,oBACNJ,KAAKK,cACLL,KAAKY,gBAETZ,KAAK0B,iBAET1B,KAAKsB,eAEVtB,KAAKwB,qB,CAILM,WAAWe,GACf,OAAQA,EAAY,GAAKA,EAAY,G"}
+{"version":3,"names":["infoTileCss","InfoTile","this","renderPrefix","prefix","h","class","renderValue","characterCount","_a","value","toString","length","loading","renderSuffix","suffix","renderIcon","icon","name","renderProgress","progress","_b","maxValue","displayPercentageColors","renderLabel","label","renderNotification","badge","renderSpinner","indeterminate","render","extendedAriaLabel","checkProps","_c","_d","link","title","disabled","_e","href","_f","target","_g","tabindex","_h","_j","_k","propValue"],"sources":["./src/components/info-tile/info-tile.scss?tag=limel-info-tile&encapsulation=shadow","./src/components/info-tile/info-tile.tsx"],"sourcesContent":["/**\n* @prop --info-tile-border-radius: defines the radius of corners of the info-tile. Defaults to `1rem`\n* @prop --info-tile-icon-color: defines the fill color of the info-tile icon. Defaults to `--contrast-1000`\n* @prop --info-tile-text-color: defines the color of the info-tile label. Defaults to `--contrast-1100`\n* @prop --info-tile-background-color: defines the backgrounds color of the info-tile icon. Defaults to `--contrast-100`\n* @prop --info-tile-badge-text-color: Text color of the notification badge. Defaults to `--color-white`\n* @prop --info-tile-badge-background-color: Background color of the notification badge. Defaults to `--color-red-default`\n* @prop --info-tile-progress-fill-color: Determines the color of the progressed section. Defaults to `--lime-primary-color`.\n* @prop --info-tile-progress-background-color: Determines the background color of the central section of the progress bar. Defaults to `--info-tile-background-color`.\n* @prop --info-tile-progress-suffix-color: Determines the color of the progress prefix. Defaults to `--contrast-1000`.\n * @prop --info-tile-progress-text-color: Determines the color of the progress value. Defaults to `--info-tile-text-color`.\n * @prop --info-tile-progress-prefix-color: Determines the color of the progress suffix. Defaults to `--contrast-1000`.\n*/\n\n@use '../../style/mixins';\n\n:host(limel-info-tile) {\n    --badge-text-color: var(\n        --info-tile-badge-text-color,\n        rgb(var(--color-white))\n    );\n    --badge-background-color: var(\n        --info-tile-badge-background-color,\n        rgb(var(--color-red-default))\n    );\n\n    --circular-progress-text-color: var(\n        --info-tile-progress-text-color,\n        var(--info-tile-text-color)\n    );\n    --circular-progress-suffix-color: var(--info-tile-progress-suffix-color);\n    --circular-progress-prefix-color: var(--info-tile-progress-prefix-color);\n    --circular-progress-track-color: rgb(var(--contrast-800), 0.3);\n    --circular-progress-fill-color: var(--info-tile-progress-fill-color);\n    --circular-progress-background-color: var(\n        --info-tile-progress-background-color,\n        var(--info-tile-background-color)\n    );\n\n    --label-min-size: 0.75rem;\n    --label-preferred-size: 6cqw;\n    --label-max-size: 1rem;\n\n    --value-min-size: 1rem;\n    --value-preferred-size: 20cqw;\n    --value-max-size: 4rem;\n\n    --suffix-prefix-min-size: 0.75rem;\n    --suffix-prefix-preferred-size: 8cqw;\n    --suffix-prefix-max-size: 1.5rem;\n\n    --icon-min-size: 2rem;\n    --icon-preferred-size: 60cqh;\n    --icon-max-size: calc(100cqw - 0.5rem);\n\n    isolation: isolate;\n    container-type: size;\n    position: relative;\n    display: flex;\n\n    width: 100%;\n    height: 100%;\n\n    * {\n        box-sizing: border-box;\n    }\n}\n\n:host(limel-info-tile[disabled]) {\n    a {\n        opacity: 0.5;\n        cursor: not-allowed;\n    }\n}\n\na {\n    all: unset;\n    overflow: hidden;\n\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    align-items: flex-start;\n\n    height: 100%;\n    width: 100%;\n    flex-grow: 1;\n\n    padding: 0.25rem 1rem 0.5rem 1rem;\n    border-radius: var(--info-tile-border-radius, 1rem);\n    background-color: var(\n        --info-tile-background-color,\n        var(--lime-elevated-surface-background-color)\n    );\n\n    &.is-clickable {\n        @include mixins.is-elevated-clickable(\n            $background-color:\n                var(\n                    --info-tile-background-color,\n                    var(--lime-elevated-surface-background-color)\n                ),\n            $background-color--hovered:\n                var(\n                    --info-tile-background-color,\n                    var(--lime-elevated-surface-background-color)\n                )\n        );\n        @include mixins.visualize-keyboard-focus;\n    }\n}\n\n.icon {\n    z-index: 1;\n    position: absolute;\n    top: 0.5rem;\n    right: 0.75rem;\n    padding: 0.25rem;\n\n    aspect-ratio: 1/1;\n\n    color: var(--info-tile-icon-color, rgb(var(--contrast-1000)));\n\n    border-radius: 0;\n    height: clamp(\n        var(--icon-min-size),\n        var(--icon-preferred-size),\n        var(--icon-max-size)\n    );\n\n    @supports not (container-type: size) {\n        width: max(10%, 3rem);\n    }\n\n    .has-circular-progress & {\n        top: unset;\n        bottom: 0.5rem;\n        --icon-min-size: 1.5rem;\n        --icon-preferred-size: 20cqh;\n    }\n}\n\n.progress {\n    position: absolute;\n    top: 0.75rem;\n    right: 0.75rem;\n\n    --circular-progress-size: min(\n        var(--icon-preferred-size),\n        var(--icon-max-size)\n    );\n    @supports not (container-type: size) {\n        --circular-progress-size: initial;\n    }\n}\n\n.label {\n    z-index: 1;\n    color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n\n    line-height: 1.2;\n    font-size: clamp(\n        var(--label-min-size),\n        var(--label-preferred-size),\n        var(--label-max-size)\n    );\n    @supports not (container-type: size) {\n        font-size: 0.875rem;\n    }\n}\n\nlimel-badge {\n    position: absolute;\n    top: -0.25rem;\n    right: -0.25rem;\n}\n\nlimel-linear-progress {\n    --lime-primary-color: var(--info-tile-text-color);\n    position: absolute;\n    inset: auto 0 0 0;\n}\n\n.value-group {\n    position: relative;\n    z-index: 1;\n    display: flex;\n    flex-direction: column;\n    color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n}\n\n.value-and-suffix,\n.label {\n    text-shadow:\n        0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100))),\n        0 0 0.25rem var(--info-tile-background-color, rgb(var(--contrast-100)));\n}\n\n.value-and-suffix {\n    display: flex;\n}\n\n.prefix,\n.suffix {\n    font-size: clamp(\n        var(--suffix-prefix-min-size),\n        var(--suffix-prefix-preferred-size),\n        var(--suffix-prefix-max-size)\n    );\n    opacity: 0.7;\n\n    @supports not (container-type: size) {\n        font-size: 0.75rem;\n    }\n}\n\n.prefix {\n    align-self: flex-start;\n    line-height: normal;\n    transform: translateY(40%);\n}\n\n.value {\n    transition:\n        opacity 0.2s ease,\n        transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.95);\n    transform-origin: left;\n    transform: translate3d(0, 0, 0) scale(1);\n\n    @include mixins.truncate-text;\n    font-weight: bold;\n    line-height: normal;\n\n    font-size: clamp(\n        var(--value-min-size),\n        var(--value-preferred-size),\n        var(--value-max-size)\n    );\n    @supports not (container-type: size) {\n        font-size: 1.5rem;\n    }\n\n    :host(limel-info-tile[loading]) & {\n        opacity: 0.3;\n        transform: translate3d(0, 0, 0) scale(0.9);\n    }\n}\n\n.suffix {\n    transform: translateY(10%);\n}\n\n$xs: 8rem; //128px:\n$s: 18.75rem; //300px\n$m: 40.5rem; //648px\n$l: 62.5rem; //1000px\n\n@container (width < #{$xs}) {\n    .progress {\n        top: 0.25rem;\n        right: 0.25rem;\n    }\n    a {\n        padding: 0.375rem;\n        gap: 0.125rem;\n    }\n}\n\n@container (width < #{$s}) {\n    .progress {\n        top: 0.5rem;\n        right: 0.5rem;\n    }\n    .icon {\n        top: 0.25rem;\n        right: 0.5rem;\n        .has-circular-progress & {\n            right: 0.25rem;\n            bottom: 0.25rem;\n        }\n    }\n}\n\n@container (width < #{$m}) {\n    .value {\n        &.ch-1,\n        &.ch-2,\n        &.ch-3,\n        &.ch-4 {\n            --value-preferred-size: 20cqw;\n        }\n        &.ch-5 {\n            --value-preferred-size: 18cqw;\n        }\n        &.ch-6 {\n            --value-preferred-size: 17cqw;\n        }\n        &.ch-7 {\n            --value-preferred-size: 16cqw;\n        }\n        &.ch-8 {\n            --value-preferred-size: 15cqw;\n        }\n        &.ch-9 {\n            --value-preferred-size: 14cqw;\n        }\n        --value-preferred-size: 13cqw;\n    }\n}\n\n@container (height > #{$xs}) {\n    a {\n        padding-top: 0.75rem;\n        padding-bottom: 1rem;\n    }\n}\n\n@container (height < #{$xs}) and (width > #{$xs}) {\n    .value {\n        --value-preferred-size: 32cqh !important;\n    }\n    .suffix,\n    .prefix {\n        --suffix-prefix-preferred-size: 16cqh !important;\n    }\n}\n\n@container (height > #{$s}) {\n    .progress,\n    .icon {\n        position: relative;\n        top: unset;\n        right: unset;\n    }\n    a {\n        align-items: center;\n        justify-content: center;\n    }\n    .label {\n        text-align: center;\n        // -webkit-line-clamp: 3;\n    }\n    .has-circular-progress {\n        .icon {\n            position: absolute;\n            top: 0.5rem;\n            right: 0.5rem;\n            --icon-max-size: 3rem;\n        }\n    }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { InfoTileProgress } from '../info-tile/info-tile.types';\nimport { Link } from '../../global/shared-types/link.types';\n\n/**\n * This component can be used on places such as a start page or a dashboard.\n * It offers features for visualizing aggregated data along with supplementary\n * information.\n *\n * If clicking on the component should navigate the user to\n * a new screen or web page, you need to provide a URL,\n * using the `link` property.\n *\n * @exampleComponent limel-example-info-tile\n * @exampleComponent limel-example-info-tile-badge\n * @exampleComponent limel-example-info-tile-progress\n * @exampleComponent limel-example-info-tile-loading\n * @exampleComponent limel-example-info-tile-styling\n */\n@Component({\n    tag: 'limel-info-tile',\n    shadow: true,\n    styleUrl: 'info-tile.scss',\n})\nexport class InfoTile {\n    /**\n     * A piece of text or number that is the main piece of information\n     * which the component is intended to visualize.\n     */\n    @Prop({ reflect: true })\n    public value: number | string;\n\n    /**\n     * Name of icon for the info tile.\n     */\n    @Prop()\n    public icon?: string;\n\n    /**\n     * The text to show below the info tile. Long labels will be truncated.\n     */\n    @Prop({ reflect: true })\n    public label?: string = null;\n\n    /**\n     * A string of text that is visually placed before the value.\n     */\n    @Prop({ reflect: true })\n    public prefix?: string;\n\n    /**\n     * A string of text that is visually placed after the value.\n     */\n    @Prop({ reflect: true })\n    public suffix?: string;\n\n    /**\n     * Set to `true` if info tile is disabled.\n     */\n    @Prop({ reflect: true })\n    public disabled? = false;\n\n    /**\n     * If supplied, the info tile will display a notification badge.\n     */\n    @Prop({ reflect: true })\n    public badge?: number | string;\n\n    /**\n     * Set to `true` to put the component in the `loading` state.\n     * This does _not_ disable the link. To do so, the\n     * `disabled` property should be set to `true` as well.\n     */\n    @Prop({ reflect: true })\n    public loading? = false;\n\n    /**\n     * If supplied, the info tile will be a clickable link.\n     *\n     * Supplying a value also adds an elevated effect using a shadow,\n     * as well as `cursor: pointer`, which appears on hover.\n     * While we strongly recommend supplying a link whenever the\n     * component should act as a link, if this is not possible, and\n     * you need to provide interaction through a click handler,\n     * you can still get the correct styling by supplying a `Link`\n     * object with the `href` property set to `'#'`.\n     */\n    @Prop()\n    public link?: Link;\n\n    /**\n     * Properties of the optional circular progress bar.\n     *\n     * Defaults:\n     * - `maxValue`: 100\n     * - `suffix`: %\n     * - `displayPercentageColors`: false\n     *\n     * Colors change with intervals of 10 %.\n     */\n    @Prop()\n    public progress?: InfoTileProgress;\n\n    public render() {\n        const extendedAriaLabel =\n            this.checkProps(this?.prefix) +\n            this.value +\n            ' ' +\n            this.checkProps(this?.suffix) +\n            this.checkProps(this?.label) +\n            '. ' +\n            this.checkProps(this?.progress?.prefix) +\n            this.checkProps(this?.progress?.value) +\n            this.checkProps(this?.progress?.suffix) +\n            this.checkProps(this?.link?.title);\n\n        const link = !this.disabled ? this.link?.href : '#';\n\n        return [\n            <a\n                title={this.link?.title}\n                href={link}\n                target={this.link?.target}\n                tabindex=\"0\"\n                aria-label={extendedAriaLabel}\n                aria-disabled={this.disabled}\n                aria-busy={this.loading ? 'true' : 'false'}\n                aria-live=\"polite\"\n                class={{\n                    'is-clickable': !!this.link?.href && !this.disabled,\n                    'has-circular-progress':\n                        !!this.progress?.value || this.progress?.value === 0,\n                }}\n            >\n                {this.renderIcon()}\n                {this.renderProgress()}\n                <div class=\"value-group\">\n                    {this.renderPrefix()}\n                    <div class=\"value-and-suffix\">\n                        {this.renderValue()}\n                        {this.renderSuffix()}\n                    </div>\n                    {this.renderSpinner()}\n                </div>\n                {this.renderLabel()}\n            </a>,\n            this.renderNotification(),\n        ];\n    }\n\n    private checkProps(propValue) {\n        return !propValue ? '' : propValue + ' ';\n    }\n\n    private renderPrefix = () => {\n        if (this.prefix) {\n            return <span class=\"prefix\">{this.prefix}</span>;\n        }\n    };\n\n    private renderValue = () => {\n        const characterCount = (this.value ?? '').toString().length;\n\n        if (!this.value && this.loading) {\n            return <span class=\"value\">···</span>;\n        }\n\n        if (this.value) {\n            return (\n                <span\n                    class={{\n                        value: true,\n                        [`ch-${characterCount}`]: true,\n                    }}\n                >\n                    {this.value}\n                </span>\n            );\n        }\n    };\n\n    private renderSuffix = () => {\n        if (this.suffix) {\n            return <span class=\"suffix\">{this.suffix}</span>;\n        }\n    };\n\n    private renderIcon = () => {\n        if (this.icon) {\n            return <limel-icon class=\"icon\" name={this.icon} />;\n        }\n    };\n\n    private renderProgress = () => {\n        if (this.progress?.value || this.progress?.value === 0) {\n            return (\n                <limel-circular-progress\n                    class=\"progress\"\n                    prefix={this.progress.prefix}\n                    value={this.progress.value}\n                    suffix={this.progress.suffix}\n                    maxValue={this.progress.maxValue}\n                    displayPercentageColors={\n                        this.progress.displayPercentageColors\n                    }\n                />\n            );\n        }\n    };\n\n    private renderLabel = () => {\n        if (this.label) {\n            return <span class=\"label\">{this.label}</span>;\n        }\n    };\n\n    private renderNotification = () => {\n        if (this.badge) {\n            return <limel-badge label={this.badge} />;\n        }\n    };\n\n    private renderSpinner = () => {\n        if (this.loading) {\n            return <limel-linear-progress indeterminate={true} />;\n        }\n    };\n}\n"],"mappings":"2CAAA,MAAMA,EAAc,goW,MCwBPC,EAAQ,M,yBAkITC,KAAAC,aAAe,KACnB,GAAID,KAAKE,OAAQ,CACb,OAAOC,EAAA,QAAMC,MAAM,UAAUJ,KAAKE,O,GAIlCF,KAAAK,YAAc,K,MAClB,MAAMC,IAAkBC,EAAAP,KAAKQ,SAAK,MAAAD,SAAA,EAAAA,EAAI,IAAIE,WAAWC,OAErD,IAAKV,KAAKQ,OAASR,KAAKW,QAAS,CAC7B,OAAOR,EAAA,QAAMC,MAAM,SAAO,M,CAG9B,GAAIJ,KAAKQ,MAAO,CACZ,OACIL,EAAA,QACIC,MAAO,CACHI,MAAO,KACP,CAAC,MAAMF,KAAmB,OAG7BN,KAAKQ,M,GAMdR,KAAAY,aAAe,KACnB,GAAIZ,KAAKa,OAAQ,CACb,OAAOV,EAAA,QAAMC,MAAM,UAAUJ,KAAKa,O,GAIlCb,KAAAc,WAAa,KACjB,GAAId,KAAKe,KAAM,CACX,OAAOZ,EAAA,cAAYC,MAAM,OAAOY,KAAMhB,KAAKe,M,GAI3Cf,KAAAiB,eAAiB,K,QACrB,KAAIV,EAAAP,KAAKkB,YAAQ,MAAAX,SAAA,SAAAA,EAAEC,UAASW,EAAAnB,KAAKkB,YAAQ,MAAAC,SAAA,SAAAA,EAAEX,SAAU,EAAG,CACpD,OACIL,EAAA,2BACIC,MAAM,WACNF,OAAQF,KAAKkB,SAAShB,OACtBM,MAAOR,KAAKkB,SAASV,MACrBK,OAAQb,KAAKkB,SAASL,OACtBO,SAAUpB,KAAKkB,SAASE,SACxBC,wBACIrB,KAAKkB,SAASG,yB,GAO1BrB,KAAAsB,YAAc,KAClB,GAAItB,KAAKuB,MAAO,CACZ,OAAOpB,EAAA,QAAMC,MAAM,SAASJ,KAAKuB,M,GAIjCvB,KAAAwB,mBAAqB,KACzB,GAAIxB,KAAKyB,MAAO,CACZ,OAAOtB,EAAA,eAAaoB,MAAOvB,KAAKyB,O,GAIhCzB,KAAA0B,cAAgB,KACpB,GAAI1B,KAAKW,QAAS,CACd,OAAOR,EAAA,yBAAuBwB,cAAe,M,uDAtL7B,K,0DAkBL,M,kCAcD,M,4CA6BXC,S,wBACH,MAAMC,EACF7B,KAAK8B,WAAW9B,OAAI,MAAJA,YAAI,SAAJA,KAAME,QACtBF,KAAKQ,MACL,IACAR,KAAK8B,WAAW9B,OAAI,MAAJA,YAAI,SAAJA,KAAMa,QACtBb,KAAK8B,WAAW9B,OAAI,MAAJA,YAAI,SAAJA,KAAMuB,OACtB,KACAvB,KAAK8B,YAAWvB,EAAAP,OAAI,MAAJA,YAAI,SAAJA,KAAMkB,YAAQ,MAAAX,SAAA,SAAAA,EAAEL,QAChCF,KAAK8B,YAAWX,EAAAnB,OAAI,MAAJA,YAAI,SAAJA,KAAMkB,YAAQ,MAAAC,SAAA,SAAAA,EAAEX,OAChCR,KAAK8B,YAAWC,EAAA/B,OAAI,MAAJA,YAAI,SAAJA,KAAMkB,YAAQ,MAAAa,SAAA,SAAAA,EAAElB,QAChCb,KAAK8B,YAAWE,EAAAhC,OAAI,MAAJA,YAAI,SAAJA,KAAMiC,QAAI,MAAAD,SAAA,SAAAA,EAAEE,OAEhC,MAAMD,GAAQjC,KAAKmC,UAAWC,EAAApC,KAAKiC,QAAI,MAAAG,SAAA,SAAAA,EAAEC,KAAO,IAEhD,MAAO,CACHlC,EAAA,KACI+B,OAAOI,EAAAtC,KAAKiC,QAAI,MAAAK,SAAA,SAAAA,EAAEJ,MAClBG,KAAMJ,EACNM,QAAQC,EAAAxC,KAAKiC,QAAI,MAAAO,SAAA,SAAAA,EAAED,OACnBE,SAAS,IAAG,aACAZ,EAAiB,gBACd7B,KAAKmC,SAAQ,YACjBnC,KAAKW,QAAU,OAAS,QAAO,YAChC,SACVP,MAAO,CACH,mBAAkBsC,EAAA1C,KAAKiC,QAAI,MAAAS,SAAA,SAAAA,EAAEL,QAASrC,KAAKmC,SAC3C,4BACMQ,EAAA3C,KAAKkB,YAAQ,MAAAyB,SAAA,SAAAA,EAAEnC,UAASoC,EAAA5C,KAAKkB,YAAQ,MAAA0B,SAAA,SAAAA,EAAEpC,SAAU,IAG1DR,KAAKc,aACLd,KAAKiB,iBACNd,EAAA,OAAKC,MAAM,eACNJ,KAAKC,eACNE,EAAA,OAAKC,MAAM,oBACNJ,KAAKK,cACLL,KAAKY,gBAETZ,KAAK0B,iBAET1B,KAAKsB,eAEVtB,KAAKwB,qB,CAILM,WAAWe,GACf,OAAQA,EAAY,GAAKA,EAAY,G"}

package/dist/lime-elements/p-493e2b10.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as t,H as o,g as r}from"./p-443111b3.js";import{m as a,r as n}from"./p-869d6d77.js";const i='@charset "UTF-8";:host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}:host{display:inline-block}:host([hidden]){display:none}:host([aria-expanded=true]) button,:host([aria-expanded]:not([aria-expanded=false])) button{box-shadow:var(--button-shadow-inset-pressed) !important}button.mdc-button{font-family:inherit}button{display:flex;align-items:center;justify-content:center;gap:0.125rem;border:none;border-radius:0.4rem;padding-top:0;padding-right:var(--button-padding-right, 0.5rem);padding-bottom:0;padding-left:var(--button-padding-left, 0.5rem);min-height:2.25rem;width:100%}button:disabled{cursor:not-allowed}button:disabled.outlined{border-color:rgba(var(--contrast-1700), 0.2)}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(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}button:not(:disabled):focus{outline:none}button:not(:disabled):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}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(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-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);box-shadow:var(--button-shadow-pressed)}button:not(:disabled):hover,button:not(:disabled):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}:host(limel-button[primary]) button:not(:disabled){color:var(--mdc-theme-on-primary, rgb(var(--color-white)));background-color:var(--mdc-theme-primary, rgb(var(--color-teal-default)))}:host(limel-button[primary]) button:disabled{background-color:rgba(var(--contrast-1700), 0.15)}:host(limel-button:not([primary])) button:not(:disabled){color:var(--mdc-theme-primary, rgb(var(--color-teal-default)))}:host(limel-button:not([primary])) button:disabled{color:rgba(var(--contrast-1600), 0.37);background-color:rgba(var(--contrast-1600), 0.1)}.icon{width:1.25rem;flex-shrink:0}.label{font-size:0.875rem;font-weight:600;letter-spacing:0.03125rem;padding:0 0.25rem}limel-spinner{position:absolute}limel-icon{vertical-align:top}svg{height:1.875rem;opacity:0;pointer-events:none;position:absolute;width:1.875rem}svg line{stroke:rgb(var(--contrast-600));stroke-width:2}limel-icon,.label,limel-spinner,svg{transition:opacity 300ms ease-in-out}.loading limel-icon,.loading .label{opacity:0}.loading limel-spinner{opacity:1}.just-loaded limel-icon,.just-loaded .label,.just-failed limel-icon,.just-failed .label{opacity:0}.just-loaded svg,.just-failed svg{opacity:1}.just-failed{background-color:var(--lime-error-text-color) !important;animation:shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both}.outlined{border:1px solid;border-color:var(--mdc-theme-primary)}@keyframes shake{10%,90%{transform:translate3d(-0.0625rem, 0, 0)}20%,80%{transform:translate3d(0.125rem, 0, 0)}30%,50%,70%{transform:translate3d(-0.1875rem, 0, 0)}40%,60%{transform:translate3d(0.1875rem, 0, 0)}}@keyframes reduced-presence{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0.7)}}:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded){animation:reduced-presence 0.3s ease forwards;transition:padding 0.3s ease, min-width 0.3s ease;transition-delay:0.3s;padding:0;min-width:0}:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) .label{transition:font-size 0.8s ease;transition-delay:0.3s;font-size:0;opacity:0}:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) limel-icon,:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) limel-spinner,:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) svg,:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) .icon{transition:all 0.3s ease;transition-delay:0.3s;opacity:0;width:0;height:0}';const s=class{constructor(t){e(this,t);this.filterClickWhenDisabled=e=>{if(this.disabled){e.preventDefault()}};this.label=undefined;this.primary=false;this.outlined=false;this.icon=undefined;this.disabled=false;this.loading=false;this.loadingFailed=false;this.justLoaded=false}componentWillLoad(){a(this.host)}disconnectedCallback(){n(this.host)}render(){return t(o,{onClick:this.filterClickWhenDisabled},t("button",{class:{loading:this.loading,"just-loaded":this.justLoaded&&!this.loadingFailed,"just-failed":this.justLoaded&&this.loadingFailed,outlined:this.outlined},disabled:this.disabled||this.loading,"aria-busy":this.loading?"true":"false","aria-live":"polite"},this.renderIcon(),this.renderLabel(),this.renderSpinner(),t("svg",{viewBox:"0 0 30 30"},this.renderLoadingIcons())))}loadingWatcher(e,t){if(t&&!e){this.justLoaded=true;const e=2e3;this.justLoadedTimeout=window.setTimeout((()=>{this.justLoaded=false}),e)}else if(e){this.justLoaded=false;window.clearTimeout(this.justLoadedTimeout)}}renderLoadingIcons(){if(this.loadingFailed){return[t("line",{x1:"9",y1:"9",x2:"21",y2:"21"}),t("line",{x1:"21",y1:"9",x2:"9",y2:"21"})]}return[t("line",{x1:"8",y1:"14",x2:"15",y2:"20"}),t("line",{x1:"23",y1:"9",x2:"14",y2:"20"})]}renderIcon(){if(!this.icon){return}return t("limel-icon",{class:"icon",name:this.icon})}renderLabel(){if(!this.label){return}return t("span",{class:"label"},this.label)}renderSpinner(){if(!this.loading){return}return t("limel-spinner",{limeBranded:false})}static get delegatesFocus(){return true}get host(){return r(this)}static get watchers(){return{loading:["loadingWatcher"]}}};s.style=i;export{s as limel_button};
+//# sourceMappingURL=p-493e2b10.entry.js.map

package/dist/lime-elements/{p-c1cbba2c.entry.js.map → p-493e2b10.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["buttonCss","Button","this","filterClickWhenDisabled","e","disabled","preventDefault","componentWillLoad","makeEnterClickable","host","disconnectedCallback","removeEnterClickable","render","h","Host","onClick","class","loading","justLoaded","loadingFailed","outlined","renderIcon","renderLabel","renderSpinner","viewBox","renderLoadingIcons","loadingWatcher","newValue","oldValue","TIMEOUT","justLoadedTimeout","window","setTimeout","clearTimeout","x1","y1","x2","y2","icon","name","label","limeBranded"],"sources":["./src/components/button/button.scss?tag=limel-button&encapsulation=shadow","./src/components/button/button.tsx"],"sourcesContent":["@use '../../style/functions';\n@use '../../style/mixins';\n\n@use '../../style/internal/lime-theme';\n\n:host {\n    display: inline-block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n@include mixins.visualize-aria-expanded('button');\n\nbutton.mdc-button {\n    // As long as this component is depended on MDC,\n    // we need to force it to be font-agnostic.\n    // When MDC-dependency is removed, this block can also be removed.\n    // However, on removal of MDC-dependency, we should also make sure to check\n    // other font-related styles that might be set by MDC,\n    // such as `letter-spacing` or `font-size`.\n    font-family: inherit;\n}\n\nbutton {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.125rem;\n\n    border: none;\n    border-radius: 0.4rem;\n    padding: {\n        top: 0;\n        right: var(--button-padding-right, 0.5rem);\n        bottom: 0;\n        left: var(--button-padding-left, 0.5rem);\n    }\n\n    min-height: 2.25rem;\n    width: 100%;\n\n    &:disabled {\n        cursor: not-allowed;\n\n        &.outlined {\n            border-color: rgba(var(--contrast-1700), 0.2);\n        }\n    }\n\n    &:not(:disabled) {\n        @include mixins.visualize-keyboard-focus;\n        @include mixins.is-elevated-clickable();\n    }\n\n    :host(limel-button[primary]) & {\n        &:not(:disabled) {\n            color: var(--mdc-theme-on-primary, rgb(var(--color-white)));\n            background-color: var(\n                --mdc-theme-primary,\n                rgb(var(--color-teal-default))\n            );\n        }\n        &:disabled {\n            background-color: rgba(var(--contrast-1700), 0.15);\n        }\n    }\n\n    :host(limel-button:not([primary])) & {\n        &:not(:disabled) {\n            color: var(--mdc-theme-primary, rgb(var(--color-teal-default)));\n        }\n        &:disabled {\n            color: rgba(var(--contrast-1600), 0.37);\n            background-color: rgba(var(--contrast-1600), 0.1);\n        }\n    }\n}\n\n.icon {\n    width: 1.25rem;\n    flex-shrink: 0;\n}\n\n.label {\n    font-size: 0.875rem;\n    font-weight: 600;\n    letter-spacing: functions.pxToRem(0.5);\n    padding: 0 0.25rem;\n}\n\nlimel-spinner {\n    position: absolute;\n}\n\nlimel-icon {\n    vertical-align: top;\n}\n\nsvg {\n    height: functions.pxToRem(30);\n    opacity: 0;\n    pointer-events: none;\n    position: absolute;\n    width: functions.pxToRem(30);\n\n    line {\n        stroke: rgb(var(--contrast-600));\n        stroke-width: 2;\n    }\n}\n\nlimel-icon,\n.label,\nlimel-spinner,\nsvg {\n    transition: opacity 300ms ease-in-out;\n}\n\n.loading {\n    limel-icon,\n    .label {\n        opacity: 0;\n    }\n    limel-spinner {\n        opacity: 1;\n    }\n}\n\n.just-loaded,\n.just-failed {\n    limel-icon,\n    .label {\n        opacity: 0;\n    }\n    svg {\n        opacity: 1;\n    }\n}\n\n.just-failed {\n    background-color: var(--lime-error-text-color) !important;\n    animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;\n}\n\n.outlined {\n    border: 1px solid;\n    border-color: var(--mdc-theme-primary);\n}\n\n@keyframes shake {\n    10%,\n    90% {\n        transform: translate3d(#{functions.pxToRem(-1)}, 0, 0);\n    }\n\n    20%,\n    80% {\n        transform: translate3d(#{functions.pxToRem(2)}, 0, 0);\n    }\n\n    30%,\n    50%,\n    70% {\n        transform: translate3d(#{functions.pxToRem(-3)}, 0, 0);\n    }\n\n    40%,\n    60% {\n        transform: translate3d(#{functions.pxToRem(3)}, 0, 0);\n    }\n}\n\n@import './partial-styles/_has-reduced-presence';\n","import { Component, h, Prop, State, Watch, Element, Host } from '@stencil/core';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../util/make-enter-clickable';\n\n/**\n * @exampleComponent limel-example-button-basic\n * @exampleComponent limel-example-button-primary\n * @exampleComponent limel-example-button-outlined\n * @exampleComponent limel-example-button-disabled\n * @exampleComponent limel-example-button-icon\n * @exampleComponent limel-example-button-loading\n * @exampleComponent limel-example-button-click-success\n * @exampleComponent limel-example-button-click-fail\n * @exampleComponent limel-example-button-reduce-presence\n * @exampleComponent limel-example-button-colors\n * @exampleComponent limel-example-button-composite\n */\n@Component({\n    tag: 'limel-button',\n    shadow: { delegatesFocus: true },\n    styleUrl: 'button.scss',\n})\nexport class Button {\n    /**\n     * The text to show on the button.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Set to `true` to make the button primary.\n     */\n    @Prop({ reflect: true })\n    public primary = false;\n\n    /**\n     * Set to `true` to make the button outlined.\n     */\n    @Prop({ reflect: true })\n    public outlined = false;\n\n    /**\n     * Set icon for the button\n     */\n    @Prop({ reflect: true })\n    public icon: string;\n\n    /**\n     * Set to `true` to disable the button.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Set to `true` to put the button in the `loading` state.\n     * This also disables the button.\n     */\n    @Prop({ reflect: true })\n    public loading = false;\n\n    /**\n     * Set to `true` to indicate failure instead of success when the button is\n     * no longer in the `loading` state.\n     */\n    @Prop({ reflect: true })\n    public loadingFailed = false;\n\n    @State()\n    private justLoaded = false;\n\n    @Element()\n    private host: HTMLElement;\n\n    private justLoadedTimeout?: number;\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public render() {\n        return (\n            <Host onClick={this.filterClickWhenDisabled}>\n                <button\n                    class={{\n                        loading: this.loading,\n                        'just-loaded': this.justLoaded && !this.loadingFailed,\n                        'just-failed': this.justLoaded && this.loadingFailed,\n                        outlined: this.outlined,\n                    }}\n                    disabled={this.disabled || this.loading}\n                    aria-busy={this.loading ? 'true' : 'false'}\n                    aria-live=\"polite\"\n                >\n                    {this.renderIcon()}\n                    {this.renderLabel()}\n                    {this.renderSpinner()}\n                    <svg viewBox=\"0 0 30 30\">{this.renderLoadingIcons()}</svg>\n                </button>\n            </Host>\n        );\n    }\n\n    @Watch('loading')\n    protected loadingWatcher(newValue: boolean, oldValue: boolean) {\n        if (oldValue && !newValue) {\n            this.justLoaded = true;\n            const TIMEOUT = 2000;\n            this.justLoadedTimeout = window.setTimeout(() => {\n                this.justLoaded = false;\n            }, TIMEOUT);\n        } else if (newValue) {\n            this.justLoaded = false;\n            window.clearTimeout(this.justLoadedTimeout);\n        }\n    }\n\n    private renderLoadingIcons() {\n        if (this.loadingFailed) {\n            return [\n                <line x1=\"9\" y1=\"9\" x2=\"21\" y2=\"21\" />,\n                <line x1=\"21\" y1=\"9\" x2=\"9\" y2=\"21\" />,\n            ];\n        }\n\n        return [\n            <line x1=\"8\" y1=\"14\" x2=\"15\" y2=\"20\" />,\n            <line x1=\"23\" y1=\"9\" x2=\"14\" y2=\"20\" />,\n        ];\n    }\n\n    private renderIcon() {\n        if (!this.icon) {\n            return;\n        }\n\n        return <limel-icon class=\"icon\" name={this.icon} />;\n    }\n\n    private renderLabel() {\n        if (!this.label) {\n            return;\n        }\n\n        return <span class=\"label\">{this.label}</span>;\n    }\n\n    private renderSpinner() {\n        if (!this.loading) {\n            return;\n        }\n\n        return <limel-spinner limeBranded={false} />;\n    }\n\n    private filterClickWhenDisabled = (e) => {\n        if (this.disabled) {\n            e.preventDefault();\n        }\n    };\n}\n"],"mappings":"oGAAA,MAAMA,EAAY,00J,MCwBLC,EAAM,M,yBAwIPC,KAAAC,wBAA2BC,IAC/B,GAAIF,KAAKG,SAAU,CACfD,EAAEE,gB,qCA/HO,M,cAMC,M,kCAYA,M,aAOD,M,mBAOM,M,gBAGF,K,CAOdC,oBACHC,EAAmBN,KAAKO,K,CAGrBC,uBACHC,EAAqBT,KAAKO,K,CAGvBG,SACH,OACIC,EAACC,EAAI,CAACC,QAASb,KAAKC,yBAChBU,EAAA,UACIG,MAAO,CACHC,QAASf,KAAKe,QACd,cAAef,KAAKgB,aAAehB,KAAKiB,cACxC,cAAejB,KAAKgB,YAAchB,KAAKiB,cACvCC,SAAUlB,KAAKkB,UAEnBf,SAAUH,KAAKG,UAAYH,KAAKe,QAAO,YAC5Bf,KAAKe,QAAU,OAAS,QAAO,YAChC,UAETf,KAAKmB,aACLnB,KAAKoB,cACLpB,KAAKqB,gBACNV,EAAA,OAAKW,QAAQ,aAAatB,KAAKuB,uB,CAOrCC,eAAeC,EAAmBC,GACxC,GAAIA,IAAaD,EAAU,CACvBzB,KAAKgB,WAAa,KAClB,MAAMW,EAAU,IAChB3B,KAAK4B,kBAAoBC,OAAOC,YAAW,KACvC9B,KAAKgB,WAAa,KAAK,GACxBW,E,MACA,GAAIF,EAAU,CACjBzB,KAAKgB,WAAa,MAClBa,OAAOE,aAAa/B,KAAK4B,kB,EAIzBL,qBACJ,GAAIvB,KAAKiB,cAAe,CACpB,MAAO,CACHN,EAAA,QAAMqB,GAAG,IAAIC,GAAG,IAAIC,GAAG,KAAKC,GAAG,OAC/BxB,EAAA,QAAMqB,GAAG,KAAKC,GAAG,IAAIC,GAAG,IAAIC,GAAG,O,CAIvC,MAAO,CACHxB,EAAA,QAAMqB,GAAG,IAAIC,GAAG,KAAKC,GAAG,KAAKC,GAAG,OAChCxB,EAAA,QAAMqB,GAAG,KAAKC,GAAG,IAAIC,GAAG,KAAKC,GAAG,O,CAIhChB,aACJ,IAAKnB,KAAKoC,KAAM,CACZ,M,CAGJ,OAAOzB,EAAA,cAAYG,MAAM,OAAOuB,KAAMrC,KAAKoC,M,CAGvChB,cACJ,IAAKpB,KAAKsC,MAAO,CACb,M,CAGJ,OAAO3B,EAAA,QAAMG,MAAM,SAASd,KAAKsC,M,CAG7BjB,gBACJ,IAAKrB,KAAKe,QAAS,CACf,M,CAGJ,OAAOJ,EAAA,iBAAe4B,YAAa,O"}
+{"version":3,"names":["buttonCss","Button","this","filterClickWhenDisabled","e","disabled","preventDefault","componentWillLoad","makeEnterClickable","host","disconnectedCallback","removeEnterClickable","render","h","Host","onClick","class","loading","justLoaded","loadingFailed","outlined","renderIcon","renderLabel","renderSpinner","viewBox","renderLoadingIcons","loadingWatcher","newValue","oldValue","TIMEOUT","justLoadedTimeout","window","setTimeout","clearTimeout","x1","y1","x2","y2","icon","name","label","limeBranded"],"sources":["./src/components/button/button.scss?tag=limel-button&encapsulation=shadow","./src/components/button/button.tsx"],"sourcesContent":["@use '../../style/functions';\n@use '../../style/mixins';\n\n@use '../../style/internal/lime-theme';\n\n:host {\n    display: inline-block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n@include mixins.visualize-aria-expanded('button');\n\nbutton.mdc-button {\n    // As long as this component is depended on MDC,\n    // we need to force it to be font-agnostic.\n    // When MDC-dependency is removed, this block can also be removed.\n    // However, on removal of MDC-dependency, we should also make sure to check\n    // other font-related styles that might be set by MDC,\n    // such as `letter-spacing` or `font-size`.\n    font-family: inherit;\n}\n\nbutton {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.125rem;\n\n    border: none;\n    border-radius: 0.4rem;\n    padding: {\n        top: 0;\n        right: var(--button-padding-right, 0.5rem);\n        bottom: 0;\n        left: var(--button-padding-left, 0.5rem);\n    }\n\n    min-height: 2.25rem;\n    width: 100%;\n\n    &:disabled {\n        cursor: not-allowed;\n\n        &.outlined {\n            border-color: rgba(var(--contrast-1700), 0.2);\n        }\n    }\n\n    &:not(:disabled) {\n        @include mixins.visualize-keyboard-focus;\n        @include mixins.is-elevated-clickable();\n    }\n\n    :host(limel-button[primary]) & {\n        &:not(:disabled) {\n            color: var(--mdc-theme-on-primary, rgb(var(--color-white)));\n            background-color: var(\n                --mdc-theme-primary,\n                rgb(var(--color-teal-default))\n            );\n        }\n        &:disabled {\n            background-color: rgba(var(--contrast-1700), 0.15);\n        }\n    }\n\n    :host(limel-button:not([primary])) & {\n        &:not(:disabled) {\n            color: var(--mdc-theme-primary, rgb(var(--color-teal-default)));\n        }\n        &:disabled {\n            color: rgba(var(--contrast-1600), 0.37);\n            background-color: rgba(var(--contrast-1600), 0.1);\n        }\n    }\n}\n\n.icon {\n    width: 1.25rem;\n    flex-shrink: 0;\n}\n\n.label {\n    font-size: 0.875rem;\n    font-weight: 600;\n    letter-spacing: functions.pxToRem(0.5);\n    padding: 0 0.25rem;\n}\n\nlimel-spinner {\n    position: absolute;\n}\n\nlimel-icon {\n    vertical-align: top;\n}\n\nsvg {\n    height: functions.pxToRem(30);\n    opacity: 0;\n    pointer-events: none;\n    position: absolute;\n    width: functions.pxToRem(30);\n\n    line {\n        stroke: rgb(var(--contrast-600));\n        stroke-width: 2;\n    }\n}\n\nlimel-icon,\n.label,\nlimel-spinner,\nsvg {\n    transition: opacity 300ms ease-in-out;\n}\n\n.loading {\n    limel-icon,\n    .label {\n        opacity: 0;\n    }\n    limel-spinner {\n        opacity: 1;\n    }\n}\n\n.just-loaded,\n.just-failed {\n    limel-icon,\n    .label {\n        opacity: 0;\n    }\n    svg {\n        opacity: 1;\n    }\n}\n\n.just-failed {\n    background-color: var(--lime-error-text-color) !important;\n    animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;\n}\n\n.outlined {\n    border: 1px solid;\n    border-color: var(--mdc-theme-primary);\n}\n\n@keyframes shake {\n    10%,\n    90% {\n        transform: translate3d(#{functions.pxToRem(-1)}, 0, 0);\n    }\n\n    20%,\n    80% {\n        transform: translate3d(#{functions.pxToRem(2)}, 0, 0);\n    }\n\n    30%,\n    50%,\n    70% {\n        transform: translate3d(#{functions.pxToRem(-3)}, 0, 0);\n    }\n\n    40%,\n    60% {\n        transform: translate3d(#{functions.pxToRem(3)}, 0, 0);\n    }\n}\n\n@import './partial-styles/_has-reduced-presence';\n","import { Component, h, Prop, State, Watch, Element, Host } from '@stencil/core';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../util/make-enter-clickable';\n\n/**\n * @exampleComponent limel-example-button-basic\n * @exampleComponent limel-example-button-primary\n * @exampleComponent limel-example-button-outlined\n * @exampleComponent limel-example-button-disabled\n * @exampleComponent limel-example-button-icon\n * @exampleComponent limel-example-button-loading\n * @exampleComponent limel-example-button-click-success\n * @exampleComponent limel-example-button-click-fail\n * @exampleComponent limel-example-button-reduce-presence\n * @exampleComponent limel-example-button-colors\n * @exampleComponent limel-example-button-composite\n */\n@Component({\n    tag: 'limel-button',\n    shadow: { delegatesFocus: true },\n    styleUrl: 'button.scss',\n})\nexport class Button {\n    /**\n     * The text to show on the button.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Set to `true` to make the button primary.\n     */\n    @Prop({ reflect: true })\n    public primary = false;\n\n    /**\n     * Set to `true` to make the button outlined.\n     */\n    @Prop({ reflect: true })\n    public outlined = false;\n\n    /**\n     * Set icon for the button\n     */\n    @Prop({ reflect: true })\n    public icon: string;\n\n    /**\n     * Set to `true` to disable the button.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Set to `true` to put the button in the `loading` state.\n     * This also disables the button.\n     */\n    @Prop({ reflect: true })\n    public loading = false;\n\n    /**\n     * Set to `true` to indicate failure instead of success when the button is\n     * no longer in the `loading` state.\n     */\n    @Prop({ reflect: true })\n    public loadingFailed = false;\n\n    @State()\n    private justLoaded = false;\n\n    @Element()\n    private host: HTMLElement;\n\n    private justLoadedTimeout?: number;\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public render() {\n        return (\n            <Host onClick={this.filterClickWhenDisabled}>\n                <button\n                    class={{\n                        loading: this.loading,\n                        'just-loaded': this.justLoaded && !this.loadingFailed,\n                        'just-failed': this.justLoaded && this.loadingFailed,\n                        outlined: this.outlined,\n                    }}\n                    disabled={this.disabled || this.loading}\n                    aria-busy={this.loading ? 'true' : 'false'}\n                    aria-live=\"polite\"\n                >\n                    {this.renderIcon()}\n                    {this.renderLabel()}\n                    {this.renderSpinner()}\n                    <svg viewBox=\"0 0 30 30\">{this.renderLoadingIcons()}</svg>\n                </button>\n            </Host>\n        );\n    }\n\n    @Watch('loading')\n    protected loadingWatcher(newValue: boolean, oldValue: boolean) {\n        if (oldValue && !newValue) {\n            this.justLoaded = true;\n            const TIMEOUT = 2000;\n            this.justLoadedTimeout = window.setTimeout(() => {\n                this.justLoaded = false;\n            }, TIMEOUT);\n        } else if (newValue) {\n            this.justLoaded = false;\n            window.clearTimeout(this.justLoadedTimeout);\n        }\n    }\n\n    private renderLoadingIcons() {\n        if (this.loadingFailed) {\n            return [\n                <line x1=\"9\" y1=\"9\" x2=\"21\" y2=\"21\" />,\n                <line x1=\"21\" y1=\"9\" x2=\"9\" y2=\"21\" />,\n            ];\n        }\n\n        return [\n            <line x1=\"8\" y1=\"14\" x2=\"15\" y2=\"20\" />,\n            <line x1=\"23\" y1=\"9\" x2=\"14\" y2=\"20\" />,\n        ];\n    }\n\n    private renderIcon() {\n        if (!this.icon) {\n            return;\n        }\n\n        return <limel-icon class=\"icon\" name={this.icon} />;\n    }\n\n    private renderLabel() {\n        if (!this.label) {\n            return;\n        }\n\n        return <span class=\"label\">{this.label}</span>;\n    }\n\n    private renderSpinner() {\n        if (!this.loading) {\n            return;\n        }\n\n        return <limel-spinner limeBranded={false} />;\n    }\n\n    private filterClickWhenDisabled = (e) => {\n        if (this.disabled) {\n            e.preventDefault();\n        }\n    };\n}\n"],"mappings":"oGAAA,MAAMA,EAAY,m9K,MCwBLC,EAAM,M,yBAwIPC,KAAAC,wBAA2BC,IAC/B,GAAIF,KAAKG,SAAU,CACfD,EAAEE,gB,qCA/HO,M,cAMC,M,kCAYA,M,aAOD,M,mBAOM,M,gBAGF,K,CAOdC,oBACHC,EAAmBN,KAAKO,K,CAGrBC,uBACHC,EAAqBT,KAAKO,K,CAGvBG,SACH,OACIC,EAACC,EAAI,CAACC,QAASb,KAAKC,yBAChBU,EAAA,UACIG,MAAO,CACHC,QAASf,KAAKe,QACd,cAAef,KAAKgB,aAAehB,KAAKiB,cACxC,cAAejB,KAAKgB,YAAchB,KAAKiB,cACvCC,SAAUlB,KAAKkB,UAEnBf,SAAUH,KAAKG,UAAYH,KAAKe,QAAO,YAC5Bf,KAAKe,QAAU,OAAS,QAAO,YAChC,UAETf,KAAKmB,aACLnB,KAAKoB,cACLpB,KAAKqB,gBACNV,EAAA,OAAKW,QAAQ,aAAatB,KAAKuB,uB,CAOrCC,eAAeC,EAAmBC,GACxC,GAAIA,IAAaD,EAAU,CACvBzB,KAAKgB,WAAa,KAClB,MAAMW,EAAU,IAChB3B,KAAK4B,kBAAoBC,OAAOC,YAAW,KACvC9B,KAAKgB,WAAa,KAAK,GACxBW,E,MACA,GAAIF,EAAU,CACjBzB,KAAKgB,WAAa,MAClBa,OAAOE,aAAa/B,KAAK4B,kB,EAIzBL,qBACJ,GAAIvB,KAAKiB,cAAe,CACpB,MAAO,CACHN,EAAA,QAAMqB,GAAG,IAAIC,GAAG,IAAIC,GAAG,KAAKC,GAAG,OAC/BxB,EAAA,QAAMqB,GAAG,KAAKC,GAAG,IAAIC,GAAG,IAAIC,GAAG,O,CAIvC,MAAO,CACHxB,EAAA,QAAMqB,GAAG,IAAIC,GAAG,KAAKC,GAAG,KAAKC,GAAG,OAChCxB,EAAA,QAAMqB,GAAG,KAAKC,GAAG,IAAIC,GAAG,KAAKC,GAAG,O,CAIhChB,aACJ,IAAKnB,KAAKoC,KAAM,CACZ,M,CAGJ,OAAOzB,EAAA,cAAYG,MAAM,OAAOuB,KAAMrC,KAAKoC,M,CAGvChB,cACJ,IAAKpB,KAAKsC,MAAO,CACb,M,CAGJ,OAAO3B,EAAA,QAAMG,MAAM,SAASd,KAAKsC,M,CAG7BjB,gBACJ,IAAKrB,KAAKe,QAAS,CACf,M,CAGJ,OAAOJ,EAAA,iBAAe4B,YAAa,O"}

package/dist/lime-elements/p-609b34fd.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as e,H as o,g as n}from"./p-443111b3.js";import{m as s,r as a}from"./p-869d6d77.js";import{c as i}from"./p-3ccdc4a3.js";const r='@charset "UTF-8";:host([hidden]){display:none}:host([aria-expanded=true]) button,:host([aria-expanded]:not([aria-expanded=false])) button{box-shadow:var(--button-shadow-inset-pressed) !important}button{all:unset;display:inline-flex;align-items:center;justify-content:center;height:2.25rem;width:2.25rem;border-radius:50%}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(--mdc-theme-on-surface);background-color:var(--icon-background-color, transparent)}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.01rem, 0);color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-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);box-shadow:var(--button-shadow-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:disabled{cursor:not-allowed;color:var(--mdc-theme-text-disabled-on-background)}:host([elevated]) button{box-shadow:var(--button-shadow-normal)}:host([elevated]) button:disabled{box-shadow:var(--button-shadow-normal)}limel-icon{width:1.25rem}';const l=class{constructor(e){t(this,e);this.tooltipId=i();this.filterClickWhenDisabled=t=>{if(this.disabled){t.preventDefault()}};this.icon=undefined;this.elevated=false;this.label=undefined;this.disabled=false}connectedCallback(){this.initialize()}componentWillLoad(){s(this.host)}disconnectedCallback(){a(this.host)}componentDidLoad(){this.initialize()}initialize(){const t=this.host.shadowRoot.querySelector(".mdc-icon-button");if(!t){return}}render(){const t={};if(this.host.hasAttribute("tabindex")){t.tabindex=this.host.getAttribute("tabindex")}return e(o,{onClick:this.filterClickWhenDisabled},e("button",Object.assign({disabled:this.disabled,id:this.tooltipId},t),e("limel-icon",{name:this.icon,badge:true}),this.renderTooltip(this.tooltipId)))}renderTooltip(t){if(this.label){return e("limel-tooltip",{elementId:t,label:this.label})}}static get delegatesFocus(){return true}get host(){return n(this)}};l.style=r;export{l as limel_icon_button};
+//# sourceMappingURL=p-609b34fd.entry.js.map

package/dist/lime-elements/{p-968c49d9.entry.js.map → p-609b34fd.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["iconButtonCss","IconButton","this","tooltipId","createRandomString","filterClickWhenDisabled","e","disabled","preventDefault","connectedCallback","initialize","componentWillLoad","makeEnterClickable","host","disconnectedCallback","removeEnterClickable","componentDidLoad","element","shadowRoot","querySelector","render","buttonAttributes","hasAttribute","tabindex","getAttribute","h","Host","onClick","Object","assign","id","name","icon","badge","renderTooltip","label","elementId"],"sources":["./src/components/icon-button/icon-button.scss?tag=limel-icon-button&encapsulation=shadow","./src/components/icon-button/icon-button.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n/**\n * @prop --icon-background-color: Background color of the button.\n */\n\n:host([hidden]) {\n    display: none;\n}\n\n@include mixins.visualize-aria-expanded('button');\n\nbutton {\n    all: unset;\n    &:not(:disabled) {\n        @include mixins.is-flat-clickable(\n            $background-color: var(--icon-background-color, transparent)\n        );\n        @include mixins.visualize-keyboard-focus;\n    }\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    height: 2.25rem;\n    width: 2.25rem;\n    border-radius: 50%;\n\n    &:disabled {\n        cursor: not-allowed;\n\n        color: var(--mdc-theme-text-disabled-on-background);\n    }\n}\n\n:host([elevated]) {\n    button {\n        box-shadow: var(--button-shadow-normal);\n        &:disabled {\n            box-shadow: var(--button-shadow-normal);\n        }\n    }\n}\n\nlimel-icon {\n    width: 1.25rem;\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport { createRandomString } from '../../util/random-string';\n\n/**\n * @exampleComponent limel-example-icon-button-basic\n * @exampleComponent limel-example-icon-button-disabled\n * @exampleComponent limel-example-icon-button-elevated\n * @exampleComponent limel-example-icon-button-toggle-state\n * @exampleComponent limel-example-icon-button-composite\n */\n@Component({\n    tag: 'limel-icon-button',\n    shadow: { delegatesFocus: true },\n    styleUrl: 'icon-button.scss',\n})\nexport class IconButton {\n    /**\n     * The icon to display.\n     */\n    @Prop({ reflect: true })\n    public icon: string;\n\n    /**\n     * Set to `true` to give the button our standard \"elevated\" look, lifting\n     * it off the flat layout.\n     */\n    @Prop({ reflect: true })\n    public elevated = false;\n\n    /**\n     * The text to show to screenreaders and other assistive tech.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Set to `true` to disable the button.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    @Element()\n    private host: HTMLLimelIconButtonElement;\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private tooltipId = createRandomString();\n\n    private initialize() {\n        const element = this.host.shadowRoot.querySelector('.mdc-icon-button');\n        if (!element) {\n            return;\n        }\n    }\n\n    public render() {\n        const buttonAttributes: { tabindex?: string } = {};\n\n        if (this.host.hasAttribute('tabindex')) {\n            buttonAttributes.tabindex = this.host.getAttribute('tabindex');\n        }\n\n        return (\n            <Host onClick={this.filterClickWhenDisabled}>\n                <button\n                    disabled={this.disabled}\n                    id={this.tooltipId}\n                    {...buttonAttributes}\n                >\n                    <limel-icon name={this.icon} badge={true} />\n                    {this.renderTooltip(this.tooltipId)}\n                </button>\n            </Host>\n        );\n    }\n    private renderTooltip(tooltipId) {\n        if (this.label) {\n            return <limel-tooltip elementId={tooltipId} label={this.label} />;\n        }\n    }\n\n    private filterClickWhenDisabled = (e) => {\n        if (this.disabled) {\n            e.preventDefault();\n        }\n    };\n}\n"],"mappings":"wIAAA,MAAMA,EAAgB,srC,MCmBTC,EAAU,M,yBA6CXC,KAAAC,UAAYC,IAmCZF,KAAAG,wBAA2BC,IAC/B,GAAIJ,KAAKK,SAAU,CACfD,EAAEE,gB,qCAtEQ,M,mCAYA,K,CAKXC,oBACHP,KAAKQ,Y,CAGFC,oBACHC,EAAmBV,KAAKW,K,CAGrBC,uBACHC,EAAqBb,KAAKW,K,CAGvBG,mBACHd,KAAKQ,Y,CAKDA,aACJ,MAAMO,EAAUf,KAAKW,KAAKK,WAAWC,cAAc,oBACnD,IAAKF,EAAS,CACV,M,EAIDG,SACH,MAAMC,EAA0C,GAEhD,GAAInB,KAAKW,KAAKS,aAAa,YAAa,CACpCD,EAAiBE,SAAWrB,KAAKW,KAAKW,aAAa,W,CAGvD,OACIC,EAACC,EAAI,CAACC,QAASzB,KAAKG,yBAChBoB,EAAA,SAAAG,OAAAC,OAAA,CACItB,SAAUL,KAAKK,SACfuB,GAAI5B,KAAKC,WACLkB,GAEJI,EAAA,cAAYM,KAAM7B,KAAK8B,KAAMC,MAAO,OACnC/B,KAAKgC,cAAchC,KAAKC,Y,CAKjC+B,cAAc/B,GAClB,GAAID,KAAKiC,MAAO,CACZ,OAAOV,EAAA,iBAAeW,UAAWjC,EAAWgC,MAAOjC,KAAKiC,O"}
+{"version":3,"names":["iconButtonCss","IconButton","this","tooltipId","createRandomString","filterClickWhenDisabled","e","disabled","preventDefault","connectedCallback","initialize","componentWillLoad","makeEnterClickable","host","disconnectedCallback","removeEnterClickable","componentDidLoad","element","shadowRoot","querySelector","render","buttonAttributes","hasAttribute","tabindex","getAttribute","h","Host","onClick","Object","assign","id","name","icon","badge","renderTooltip","label","elementId"],"sources":["./src/components/icon-button/icon-button.scss?tag=limel-icon-button&encapsulation=shadow","./src/components/icon-button/icon-button.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n/**\n * @prop --icon-background-color: Background color of the button.\n */\n\n:host([hidden]) {\n    display: none;\n}\n\n@include mixins.visualize-aria-expanded('button');\n\nbutton {\n    all: unset;\n    &:not(:disabled) {\n        @include mixins.is-flat-clickable(\n            $background-color: var(--icon-background-color, transparent)\n        );\n        @include mixins.visualize-keyboard-focus;\n    }\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    height: 2.25rem;\n    width: 2.25rem;\n    border-radius: 50%;\n\n    &:disabled {\n        cursor: not-allowed;\n\n        color: var(--mdc-theme-text-disabled-on-background);\n    }\n}\n\n:host([elevated]) {\n    button {\n        box-shadow: var(--button-shadow-normal);\n        &:disabled {\n            box-shadow: var(--button-shadow-normal);\n        }\n    }\n}\n\nlimel-icon {\n    width: 1.25rem;\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport { createRandomString } from '../../util/random-string';\n\n/**\n * @exampleComponent limel-example-icon-button-basic\n * @exampleComponent limel-example-icon-button-disabled\n * @exampleComponent limel-example-icon-button-elevated\n * @exampleComponent limel-example-icon-button-toggle-state\n * @exampleComponent limel-example-icon-button-composite\n */\n@Component({\n    tag: 'limel-icon-button',\n    shadow: { delegatesFocus: true },\n    styleUrl: 'icon-button.scss',\n})\nexport class IconButton {\n    /**\n     * The icon to display.\n     */\n    @Prop({ reflect: true })\n    public icon: string;\n\n    /**\n     * Set to `true` to give the button our standard \"elevated\" look, lifting\n     * it off the flat layout.\n     */\n    @Prop({ reflect: true })\n    public elevated = false;\n\n    /**\n     * The text to show to screenreaders and other assistive tech.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Set to `true` to disable the button.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    @Element()\n    private host: HTMLLimelIconButtonElement;\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private tooltipId = createRandomString();\n\n    private initialize() {\n        const element = this.host.shadowRoot.querySelector('.mdc-icon-button');\n        if (!element) {\n            return;\n        }\n    }\n\n    public render() {\n        const buttonAttributes: { tabindex?: string } = {};\n\n        if (this.host.hasAttribute('tabindex')) {\n            buttonAttributes.tabindex = this.host.getAttribute('tabindex');\n        }\n\n        return (\n            <Host onClick={this.filterClickWhenDisabled}>\n                <button\n                    disabled={this.disabled}\n                    id={this.tooltipId}\n                    {...buttonAttributes}\n                >\n                    <limel-icon name={this.icon} badge={true} />\n                    {this.renderTooltip(this.tooltipId)}\n                </button>\n            </Host>\n        );\n    }\n    private renderTooltip(tooltipId) {\n        if (this.label) {\n            return <limel-tooltip elementId={tooltipId} label={this.label} />;\n        }\n    }\n\n    private filterClickWhenDisabled = (e) => {\n        if (this.disabled) {\n            e.preventDefault();\n        }\n    };\n}\n"],"mappings":"wIAAA,MAAMA,EAAgB,8zD,MCmBTC,EAAU,M,yBA6CXC,KAAAC,UAAYC,IAmCZF,KAAAG,wBAA2BC,IAC/B,GAAIJ,KAAKK,SAAU,CACfD,EAAEE,gB,qCAtEQ,M,mCAYA,K,CAKXC,oBACHP,KAAKQ,Y,CAGFC,oBACHC,EAAmBV,KAAKW,K,CAGrBC,uBACHC,EAAqBb,KAAKW,K,CAGvBG,mBACHd,KAAKQ,Y,CAKDA,aACJ,MAAMO,EAAUf,KAAKW,KAAKK,WAAWC,cAAc,oBACnD,IAAKF,EAAS,CACV,M,EAIDG,SACH,MAAMC,EAA0C,GAEhD,GAAInB,KAAKW,KAAKS,aAAa,YAAa,CACpCD,EAAiBE,SAAWrB,KAAKW,KAAKW,aAAa,W,CAGvD,OACIC,EAACC,EAAI,CAACC,QAASzB,KAAKG,yBAChBoB,EAAA,SAAAG,OAAAC,OAAA,CACItB,SAAUL,KAAKK,SACfuB,GAAI5B,KAAKC,WACLkB,GAEJI,EAAA,cAAYM,KAAM7B,KAAK8B,KAAMC,MAAO,OACnC/B,KAAKgC,cAAchC,KAAKC,Y,CAKjC+B,cAAc/B,GAClB,GAAID,KAAKiC,MAAO,CACZ,OAAOV,EAAA,iBAAeW,UAAWjC,EAAWgC,MAAOjC,KAAKiC,O"}

package/dist/lime-elements/p-6500050d.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as o,h as t,H as i}from"./p-443111b3.js";const a='@charset "UTF-8";:host(limel-dock){--badge-background-color:rgb(var(--color-red-default));--badge-text-color:rgb(var(--color-white));--dock-item-height:2.75rem;--limel-dock-padding:0.25rem;--dock-expand-shrink-button-height:1rem;--limel-dock-item-text-color:var(\n      --dock-item-text-color,\n      rgb(var(--contrast-1100))\n  );--limel-dock-item-text-color--selected:var(\n      --dock-item-text-color--selected,\n      rgb(var(--contrast-1300))\n  );isolation:isolate;position:relative;display:inline-flex;flex-direction:column;background-color:var(--dock-background-color, rgb(var(--contrast-100)));box-shadow:var(--shadow-depth-8);padding-top:var(--dock-padding-top);padding-right:var(--dock-padding-right);padding-bottom:var(--dock-padding-bottom);padding-left:var(--dock-padding-left)}:host(limel-dock:not(.has-mobile-layout)){height:100%;width:calc(var(--limel-dock-padding) * 2 + var(--dock-item-height))}:host(limel-dock:not(.has-mobile-layout)) nav{padding-bottom:calc(var(--limel-dock-padding) + 0.25rem)}:host(limel-dock.expanded){width:var(--dock-expanded-max-width, max-content)}.footer-separator{margin-top:auto;justify-self:flex-end}nav{box-sizing:border-box;display:inline-flex;flex-direction:column;gap:0.375rem;flex-grow:1;padding:var(--limel-dock-padding);overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}nav::-webkit-scrollbar{display:none}:host(limel-dock.has-mobile-layout) nav{justify-content:space-between;flex-direction:row}limel-dock-button:first-of-type{--limel-custom-home-icon-enabler:var(--crm-custom-home-icon-enabler);--limel-custom-home-icon:var(--crm-custom-home-icon)}.expand-shrink{all:unset;box-sizing:border-box;transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--mdc-theme-on-surface);background-color:transparent;display:flex;justify-content:center;align-items:center;height:var(--dock-expand-shrink-button-height);padding:0 0.5rem;margin:var(--limel-dock-padding);border-radius:0.375rem}.expand-shrink:hover,.expand-shrink:focus,.expand-shrink:focus-visible{will-change:color, background-color, box-shadow, transform}.expand-shrink:hover{transform:translate3d(0, 0.01rem, 0);color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.expand-shrink:active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}.expand-shrink:hover,.expand-shrink:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.expand-shrink:focus{outline:none}.expand-shrink:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.expand-shrink.expanded{justify-content:flex-end}.expand-shrink.expanded limel-icon{transform:rotateY(180deg)}.expand-shrink limel-icon{width:calc(var(--dock-expand-shrink-button-height) - 0.25rem);color:var(--dock-item-icon-color, var(--limel-dock-item-text-color))}';const n=700;const r=class{constructor(i){e(this,i);this.itemSelected=o(this,"itemSelected",7);this.menuOpen=o(this,"menuOpen",7);this.close=o(this,"close",7);this.dockExpanded=o(this,"dockExpanded",7);this.renderSeparator=()=>this.useMobileLayout?null:t("span",{class:"footer-separator"});this.renderDockItem=e=>t("limel-dock-button",{class:{"dock-item":true,selected:e.selected},item:e,expanded:this.expanded&&!this.useMobileLayout,useMobileLayout:this.useMobileLayout});this.handleResize=()=>{if(window.innerWidth<=this.mobileBreakPoint){this.useMobileLayout=true}else{this.useMobileLayout=false}};this.toggleDockWidth=()=>{this.expanded=!this.expanded;this.dockExpanded.emit(this.expanded)};this.dockItems=[];this.dockFooterItems=[];this.accessibleLabel=undefined;this.expanded=false;this.allowResize=true;this.mobileBreakPoint=n;this.useMobileLayout=false}componentDidLoad(){this.resizeObserver=new ResizeObserver(this.handleResize);this.resizeObserver.observe(document.body)}disconnectedCallback(){this.resizeObserver.disconnect()}render(){return t(i,{class:{dock:true,expanded:this.expanded,"has-mobile-layout":this.useMobileLayout}},t("nav",{"aria-label":this.accessibleLabel},this.dockItems.map(this.renderDockItem),this.renderSeparator(),this.dockFooterItems.map(this.renderDockItem)),this.renderExpandShrinkToggle())}renderExpandShrinkToggle(){if(this.useMobileLayout||!this.allowResize){return}return t("button",{class:{"expand-shrink":true,expanded:this.expanded},onClick:this.toggleDockWidth},t("limel-icon",{name:"angle_right"}))}};r.style=a;export{r as limel_dock};
+//# sourceMappingURL=p-6500050d.entry.js.map

package/dist/lime-elements/{p-eb5ff7ca.entry.js.map → p-6500050d.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["dockCss","DEFAULT_MOBILE_BREAKPOINT","Dock","this","renderSeparator","useMobileLayout","h","class","renderDockItem","item","selected","expanded","handleResize","window","innerWidth","mobileBreakPoint","toggleDockWidth","dockExpanded","emit","componentDidLoad","resizeObserver","ResizeObserver","observe","document","body","disconnectedCallback","disconnect","render","Host","dock","accessibleLabel","dockItems","map","dockFooterItems","renderExpandShrinkToggle","allowResize","onClick","name"],"sources":["./src/components/dock/dock.scss?tag=limel-dock&encapsulation=shadow","./src/components/dock/dock.tsx"],"sourcesContent":["@use '../../style/mixins';\n@use '../../style/functions';\n@use '../../style/internal/variables';\n\n/**\n* @prop --dock-expanded-max-width: The maximum width of the Dock when it is expanded. Defaults to `max-content` which means the Dock will adjust its width to the widest dock item.\n* @prop --dock-background-color: Background color of the whole component, defaults to `--contrast-100`.\n* @prop --dock-item-background-color--selected: Background color of selected dock item, defaults to `--contrast-200`.\n* @prop --dock-item-text-color: Text of dock items, defaults to `--contrast-1100`.\n* @prop --dock-item-text-color--selected: Text color of selected dock item, defaults to `--contrast-1300`.\n* @prop --dock-item-icon-color: Color of the optional icons used in each dock item. Only affects inactive dock items, defaults to text colors for default or selected states.\n* @prop --dock-padding-top: Space of top side of the Dock. Can be used with environment variables, to take into account safe areas on mobile devices with rounded screen corners or those that have a \"notch\". For instance can be set to `env(safe-area-inset-top)`.\n* @prop --dock-padding-right: Space of the right side of the Dock. Can be used with environment variables, to take into account safe areas on mobile devices with rounded screen corners or those that have a \"notch\". For instance can be set to `env(safe-area-inset-right)`.\n* @prop --dock-padding-bottom: Space of the bottom side of the Dock. Can be used with environment variables, to take into account safe areas on mobile devices with rounded screen corners or those that have a \"notch\". For instance can be set to `env(safe-area-inset-bottom)`.\n* @prop --dock-padding-left: Space of the left side of the Dock. Can be used with environment variables, to take into account safe areas on mobile devices with rounded screen corners or those that have a \"notch\". For instance can be set to `env(safe-area-inset-left)`.\n* @prop --popover-surface-width: Defines the width of the popover that is opened for dock items with custom components. Defaults to `auto`.\n*/\n\n:host(limel-dock) {\n    --badge-background-color: rgb(var(--color-red-default));\n    --badge-text-color: rgb(var(--color-white));\n\n    --dock-item-height: 2.75rem;\n    --limel-dock-padding: 0.25rem;\n    --dock-expand-shrink-button-height: 1rem;\n\n    --limel-dock-item-text-color: var(\n        --dock-item-text-color,\n        rgb(var(--contrast-1100))\n    );\n    --limel-dock-item-text-color--selected: var(\n        --dock-item-text-color--selected,\n        rgb(var(--contrast-1300))\n    );\n\n    isolation: isolate;\n    position: relative;\n\n    display: inline-flex;\n    flex-direction: column;\n\n    background-color: var(--dock-background-color, rgb(var(--contrast-100)));\n    box-shadow: var(--shadow-depth-8);\n\n    padding-top: var(--dock-padding-top);\n    padding-right: var(--dock-padding-right);\n    padding-bottom: var(--dock-padding-bottom);\n    padding-left: var(--dock-padding-left);\n}\n\n:host(limel-dock:not(.has-mobile-layout)) {\n    height: 100%;\n    width: calc((var(--limel-dock-padding) * 2) + var(--dock-item-height));\n    nav {\n        padding-bottom: calc((var(--limel-dock-padding) + 0.25rem));\n    }\n}\n\n:host(limel-dock.expanded) {\n    width: var(--dock-expanded-max-width, max-content);\n}\n\n.footer-separator {\n    margin-top: auto;\n    justify-self: flex-end;\n}\n\nnav {\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-direction: column;\n    gap: functions.pxToRem(6);\n    flex-grow: 1;\n\n    padding: var(--limel-dock-padding); // needed for the focus effect\n\n    overflow-y: auto;\n    scrollbar-width: none; // This hides the scrollbars appearing under in Firefox\n    -ms-overflow-style: none; // Same as above for IE 11\n    &::-webkit-scrollbar {\n        display: none; // This hides the scrollbars appearing under in Chrome\n    }\n\n    :host(limel-dock.has-mobile-layout) & {\n        justify-content: space-between;\n        flex-direction: row;\n    }\n}\n\n// 👇 Below is a hidden and private prop\n// only for usage in Lime CRM components.\n// It enables our customers to override\n// the default Home icon, using an external URL\n// or an SVG code.\nlimel-dock-button {\n    &:first-of-type {\n        // `--crm-custom-home-icon-enabler`: in the CRM must be set to `''`\n        --limel-custom-home-icon-enabler: var(--crm-custom-home-icon-enabler);\n        // `--crm-custom-home-icon` in the CRM must be set to a url to an image file, or an SVG code\n        --limel-custom-home-icon: var(--crm-custom-home-icon);\n    }\n}\n\n@import './partial-styles/shrink-expand-button';\n","import {\n    Component,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    State,\n} from '@stencil/core';\nimport { DockItem } from './dock.types';\n\nconst DEFAULT_MOBILE_BREAKPOINT = 700;\n\n/**\n * @exampleComponent limel-example-dock-basic\n * @exampleComponent limel-example-dock-custom-component\n * @exampleComponent limel-example-dock-notification\n * @exampleComponent limel-example-dock-mobile\n * @exampleComponent limel-example-dock-expanded\n * @exampleComponent limel-example-dock-colors-css\n */\n@Component({\n    tag: 'limel-dock',\n    shadow: true,\n    styleUrl: 'dock.scss',\n})\nexport class Dock {\n    /**\n     * Items that are placed in the dock.\n     */\n    @Prop()\n    public dockItems: DockItem[] = [];\n\n    /**\n     * Items that are placed at the bottom of the dock. (Or at the end in mobile\n     * layout.)\n     */\n    @Prop()\n    public dockFooterItems?: DockItem[] = [];\n\n    /**\n     * A label used to describe the purpose of the navigation element to users\n     * of assistive technologies, like screen readers. Especially useful when\n     * there are multiple navigation elements in the user interface.\n     * Example value: \"Primary navigation\"\n     */\n    @Prop({ reflect: true })\n    public accessibleLabel?: string;\n\n    /**\n     * Defines the width of the component, when it loads.\n     * - `true`: shows both icons and labels of the Dock items.\n     * - `false`: only shows icons of the doc items, and displays\n     * their labels as tooltip.\n     *\n     * Note: when `useMobileLayout` is `true`, labels will always\n     * be shown as tooltips. Read more below…\n     */\n    @Prop({ reflect: true })\n    public expanded? = false;\n\n    /**\n     * Set to `false` if you do not want to allow end-users\n     * to exapnd or shrink the Dock. This will hide the\n     * expand/shrink button, and the only things that defines\n     * the layout will be the `expanded` property, and\n     * the `mobileBreakPoint`.\n     */\n    @Prop({ reflect: true })\n    public allowResize? = true;\n\n    /**\n     * Defines the breakpoint in pixles, at which the component will be rendered\n     * in a hoizontal layout. Default breakpoint is `700` pixels, which means\n     * when the screen size is smaller than `700px`, the component will automatically\n     * switch to a horizontal layout.\n     */\n    @Prop({ reflect: true })\n    public mobileBreakPoint?: number = DEFAULT_MOBILE_BREAKPOINT;\n\n    /**\n     * Fired when a dock item has been selected from the dock.\n     */\n    @Event()\n    public itemSelected: EventEmitter<DockItem>;\n\n    /**\n     * Fired when a dock menu is opened.\n     */\n    @Event()\n    public menuOpen: EventEmitter<DockItem>;\n\n    /**\n     * Fired when the popover is closed.\n     */\n    @Event()\n    public close: EventEmitter<void>;\n\n    /**\n     * Fired when a Dock is expanded or collapsed.\n     */\n    @Event()\n    private dockExpanded: EventEmitter<boolean>;\n\n    /**\n     * Is used to render the component horizontally, and place\n     * the Dock items in a row.\n     */\n    @State()\n    private useMobileLayout = false;\n\n    private resizeObserver: ResizeObserver;\n\n    public componentDidLoad() {\n        this.resizeObserver = new ResizeObserver(this.handleResize);\n        this.resizeObserver.observe(document.body);\n    }\n\n    disconnectedCallback() {\n        this.resizeObserver.disconnect();\n    }\n\n    public render() {\n        return (\n            <Host\n                class={{\n                    dock: true,\n                    expanded: this.expanded,\n                    'has-mobile-layout': this.useMobileLayout,\n                }}\n            >\n                <nav aria-label={this.accessibleLabel}>\n                    {this.dockItems.map(this.renderDockItem)}\n                    {this.renderSeparator()}\n                    {this.dockFooterItems.map(this.renderDockItem)}\n                </nav>\n                {this.renderExpandShrinkToggle()}\n            </Host>\n        );\n    }\n\n    private renderSeparator = () => {\n        return this.useMobileLayout ? null : <span class=\"footer-separator\" />;\n    };\n\n    private renderDockItem = (item: DockItem) => {\n        return (\n            <limel-dock-button\n                class={{\n                    'dock-item': true,\n                    selected: item.selected,\n                }}\n                item={item}\n                expanded={this.expanded && !this.useMobileLayout}\n                useMobileLayout={this.useMobileLayout}\n            />\n        );\n    };\n\n    private handleResize = () => {\n        if (window.innerWidth <= this.mobileBreakPoint) {\n            this.useMobileLayout = true;\n        } else {\n            this.useMobileLayout = false;\n        }\n    };\n\n    private renderExpandShrinkToggle() {\n        if (this.useMobileLayout || !this.allowResize) {\n            return;\n        }\n\n        return (\n            <button\n                class={{\n                    'expand-shrink': true,\n                    expanded: this.expanded,\n                }}\n                onClick={this.toggleDockWidth}\n            >\n                <limel-icon name=\"angle_right\" />\n            </button>\n        );\n    }\n\n    private toggleDockWidth = () => {\n        this.expanded = !this.expanded;\n        this.dockExpanded.emit(this.expanded);\n    };\n}\n"],"mappings":"yDAAA,MAAMA,EAAU,ymFCWhB,MAAMC,EAA4B,I,MAerBC,EAAI,M,+KAmHLC,KAAAC,gBAAkB,IACfD,KAAKE,gBAAkB,KAAOC,EAAA,QAAMC,MAAM,qBAG7CJ,KAAAK,eAAkBC,GAElBH,EAAA,qBACIC,MAAO,CACH,YAAa,KACbG,SAAUD,EAAKC,UAEnBD,KAAMA,EACNE,SAAUR,KAAKQ,WAAaR,KAAKE,gBACjCA,gBAAiBF,KAAKE,kBAK1BF,KAAAS,aAAe,KACnB,GAAIC,OAAOC,YAAcX,KAAKY,iBAAkB,CAC5CZ,KAAKE,gBAAkB,I,KACpB,CACHF,KAAKE,gBAAkB,K,GAsBvBF,KAAAa,gBAAkB,KACtBb,KAAKQ,UAAYR,KAAKQ,SACtBR,KAAKc,aAAaC,KAAKf,KAAKQ,SAAS,E,eA5JV,G,qBAOO,G,6CAqBnB,M,iBAUG,K,sBASaV,E,qBA+BT,K,CAInBkB,mBACHhB,KAAKiB,eAAiB,IAAIC,eAAelB,KAAKS,cAC9CT,KAAKiB,eAAeE,QAAQC,SAASC,K,CAGzCC,uBACItB,KAAKiB,eAAeM,Y,CAGjBC,SACH,OACIrB,EAACsB,EAAI,CACDrB,MAAO,CACHsB,KAAM,KACNlB,SAAUR,KAAKQ,SACf,oBAAqBR,KAAKE,kBAG9BC,EAAA,oBAAiBH,KAAK2B,iBACjB3B,KAAK4B,UAAUC,IAAI7B,KAAKK,gBACxBL,KAAKC,kBACLD,KAAK8B,gBAAgBD,IAAI7B,KAAKK,iBAElCL,KAAK+B,2B,CA+BVA,2BACJ,GAAI/B,KAAKE,kBAAoBF,KAAKgC,YAAa,CAC3C,M,CAGJ,OACI7B,EAAA,UACIC,MAAO,CACH,gBAAiB,KACjBI,SAAUR,KAAKQ,UAEnByB,QAASjC,KAAKa,iBAEdV,EAAA,cAAY+B,KAAK,gB"}
+{"version":3,"names":["dockCss","DEFAULT_MOBILE_BREAKPOINT","Dock","this","renderSeparator","useMobileLayout","h","class","renderDockItem","item","selected","expanded","handleResize","window","innerWidth","mobileBreakPoint","toggleDockWidth","dockExpanded","emit","componentDidLoad","resizeObserver","ResizeObserver","observe","document","body","disconnectedCallback","disconnect","render","Host","dock","accessibleLabel","dockItems","map","dockFooterItems","renderExpandShrinkToggle","allowResize","onClick","name"],"sources":["./src/components/dock/dock.scss?tag=limel-dock&encapsulation=shadow","./src/components/dock/dock.tsx"],"sourcesContent":["@use '../../style/mixins';\n@use '../../style/functions';\n@use '../../style/internal/variables';\n\n/**\n* @prop --dock-expanded-max-width: The maximum width of the Dock when it is expanded. Defaults to `max-content` which means the Dock will adjust its width to the widest dock item.\n* @prop --dock-background-color: Background color of the whole component, defaults to `--contrast-100`.\n* @prop --dock-item-background-color--selected: Background color of selected dock item, defaults to `--contrast-200`.\n* @prop --dock-item-text-color: Text of dock items, defaults to `--contrast-1100`.\n* @prop --dock-item-text-color--selected: Text color of selected dock item, defaults to `--contrast-1300`.\n* @prop --dock-item-icon-color: Color of the optional icons used in each dock item. Only affects inactive dock items, defaults to text colors for default or selected states.\n* @prop --dock-padding-top: Space of top side of the Dock. Can be used with environment variables, to take into account safe areas on mobile devices with rounded screen corners or those that have a \"notch\". For instance can be set to `env(safe-area-inset-top)`.\n* @prop --dock-padding-right: Space of the right side of the Dock. Can be used with environment variables, to take into account safe areas on mobile devices with rounded screen corners or those that have a \"notch\". For instance can be set to `env(safe-area-inset-right)`.\n* @prop --dock-padding-bottom: Space of the bottom side of the Dock. Can be used with environment variables, to take into account safe areas on mobile devices with rounded screen corners or those that have a \"notch\". For instance can be set to `env(safe-area-inset-bottom)`.\n* @prop --dock-padding-left: Space of the left side of the Dock. Can be used with environment variables, to take into account safe areas on mobile devices with rounded screen corners or those that have a \"notch\". For instance can be set to `env(safe-area-inset-left)`.\n* @prop --popover-surface-width: Defines the width of the popover that is opened for dock items with custom components. Defaults to `auto`.\n*/\n\n:host(limel-dock) {\n    --badge-background-color: rgb(var(--color-red-default));\n    --badge-text-color: rgb(var(--color-white));\n\n    --dock-item-height: 2.75rem;\n    --limel-dock-padding: 0.25rem;\n    --dock-expand-shrink-button-height: 1rem;\n\n    --limel-dock-item-text-color: var(\n        --dock-item-text-color,\n        rgb(var(--contrast-1100))\n    );\n    --limel-dock-item-text-color--selected: var(\n        --dock-item-text-color--selected,\n        rgb(var(--contrast-1300))\n    );\n\n    isolation: isolate;\n    position: relative;\n\n    display: inline-flex;\n    flex-direction: column;\n\n    background-color: var(--dock-background-color, rgb(var(--contrast-100)));\n    box-shadow: var(--shadow-depth-8);\n\n    padding-top: var(--dock-padding-top);\n    padding-right: var(--dock-padding-right);\n    padding-bottom: var(--dock-padding-bottom);\n    padding-left: var(--dock-padding-left);\n}\n\n:host(limel-dock:not(.has-mobile-layout)) {\n    height: 100%;\n    width: calc((var(--limel-dock-padding) * 2) + var(--dock-item-height));\n    nav {\n        padding-bottom: calc((var(--limel-dock-padding) + 0.25rem));\n    }\n}\n\n:host(limel-dock.expanded) {\n    width: var(--dock-expanded-max-width, max-content);\n}\n\n.footer-separator {\n    margin-top: auto;\n    justify-self: flex-end;\n}\n\nnav {\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-direction: column;\n    gap: functions.pxToRem(6);\n    flex-grow: 1;\n\n    padding: var(--limel-dock-padding); // needed for the focus effect\n\n    overflow-y: auto;\n    scrollbar-width: none; // This hides the scrollbars appearing under in Firefox\n    -ms-overflow-style: none; // Same as above for IE 11\n    &::-webkit-scrollbar {\n        display: none; // This hides the scrollbars appearing under in Chrome\n    }\n\n    :host(limel-dock.has-mobile-layout) & {\n        justify-content: space-between;\n        flex-direction: row;\n    }\n}\n\n// 👇 Below is a hidden and private prop\n// only for usage in Lime CRM components.\n// It enables our customers to override\n// the default Home icon, using an external URL\n// or an SVG code.\nlimel-dock-button {\n    &:first-of-type {\n        // `--crm-custom-home-icon-enabler`: in the CRM must be set to `''`\n        --limel-custom-home-icon-enabler: var(--crm-custom-home-icon-enabler);\n        // `--crm-custom-home-icon` in the CRM must be set to a url to an image file, or an SVG code\n        --limel-custom-home-icon: var(--crm-custom-home-icon);\n    }\n}\n\n@import './partial-styles/shrink-expand-button';\n","import {\n    Component,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    State,\n} from '@stencil/core';\nimport { DockItem } from './dock.types';\n\nconst DEFAULT_MOBILE_BREAKPOINT = 700;\n\n/**\n * @exampleComponent limel-example-dock-basic\n * @exampleComponent limel-example-dock-custom-component\n * @exampleComponent limel-example-dock-notification\n * @exampleComponent limel-example-dock-mobile\n * @exampleComponent limel-example-dock-expanded\n * @exampleComponent limel-example-dock-colors-css\n */\n@Component({\n    tag: 'limel-dock',\n    shadow: true,\n    styleUrl: 'dock.scss',\n})\nexport class Dock {\n    /**\n     * Items that are placed in the dock.\n     */\n    @Prop()\n    public dockItems: DockItem[] = [];\n\n    /**\n     * Items that are placed at the bottom of the dock. (Or at the end in mobile\n     * layout.)\n     */\n    @Prop()\n    public dockFooterItems?: DockItem[] = [];\n\n    /**\n     * A label used to describe the purpose of the navigation element to users\n     * of assistive technologies, like screen readers. Especially useful when\n     * there are multiple navigation elements in the user interface.\n     * Example value: \"Primary navigation\"\n     */\n    @Prop({ reflect: true })\n    public accessibleLabel?: string;\n\n    /**\n     * Defines the width of the component, when it loads.\n     * - `true`: shows both icons and labels of the Dock items.\n     * - `false`: only shows icons of the doc items, and displays\n     * their labels as tooltip.\n     *\n     * Note: when `useMobileLayout` is `true`, labels will always\n     * be shown as tooltips. Read more below…\n     */\n    @Prop({ reflect: true })\n    public expanded? = false;\n\n    /**\n     * Set to `false` if you do not want to allow end-users\n     * to exapnd or shrink the Dock. This will hide the\n     * expand/shrink button, and the only things that defines\n     * the layout will be the `expanded` property, and\n     * the `mobileBreakPoint`.\n     */\n    @Prop({ reflect: true })\n    public allowResize? = true;\n\n    /**\n     * Defines the breakpoint in pixles, at which the component will be rendered\n     * in a hoizontal layout. Default breakpoint is `700` pixels, which means\n     * when the screen size is smaller than `700px`, the component will automatically\n     * switch to a horizontal layout.\n     */\n    @Prop({ reflect: true })\n    public mobileBreakPoint?: number = DEFAULT_MOBILE_BREAKPOINT;\n\n    /**\n     * Fired when a dock item has been selected from the dock.\n     */\n    @Event()\n    public itemSelected: EventEmitter<DockItem>;\n\n    /**\n     * Fired when a dock menu is opened.\n     */\n    @Event()\n    public menuOpen: EventEmitter<DockItem>;\n\n    /**\n     * Fired when the popover is closed.\n     */\n    @Event()\n    public close: EventEmitter<void>;\n\n    /**\n     * Fired when a Dock is expanded or collapsed.\n     */\n    @Event()\n    private dockExpanded: EventEmitter<boolean>;\n\n    /**\n     * Is used to render the component horizontally, and place\n     * the Dock items in a row.\n     */\n    @State()\n    private useMobileLayout = false;\n\n    private resizeObserver: ResizeObserver;\n\n    public componentDidLoad() {\n        this.resizeObserver = new ResizeObserver(this.handleResize);\n        this.resizeObserver.observe(document.body);\n    }\n\n    disconnectedCallback() {\n        this.resizeObserver.disconnect();\n    }\n\n    public render() {\n        return (\n            <Host\n                class={{\n                    dock: true,\n                    expanded: this.expanded,\n                    'has-mobile-layout': this.useMobileLayout,\n                }}\n            >\n                <nav aria-label={this.accessibleLabel}>\n                    {this.dockItems.map(this.renderDockItem)}\n                    {this.renderSeparator()}\n                    {this.dockFooterItems.map(this.renderDockItem)}\n                </nav>\n                {this.renderExpandShrinkToggle()}\n            </Host>\n        );\n    }\n\n    private renderSeparator = () => {\n        return this.useMobileLayout ? null : <span class=\"footer-separator\" />;\n    };\n\n    private renderDockItem = (item: DockItem) => {\n        return (\n            <limel-dock-button\n                class={{\n                    'dock-item': true,\n                    selected: item.selected,\n                }}\n                item={item}\n                expanded={this.expanded && !this.useMobileLayout}\n                useMobileLayout={this.useMobileLayout}\n            />\n        );\n    };\n\n    private handleResize = () => {\n        if (window.innerWidth <= this.mobileBreakPoint) {\n            this.useMobileLayout = true;\n        } else {\n            this.useMobileLayout = false;\n        }\n    };\n\n    private renderExpandShrinkToggle() {\n        if (this.useMobileLayout || !this.allowResize) {\n            return;\n        }\n\n        return (\n            <button\n                class={{\n                    'expand-shrink': true,\n                    expanded: this.expanded,\n                }}\n                onClick={this.toggleDockWidth}\n            >\n                <limel-icon name=\"angle_right\" />\n            </button>\n        );\n    }\n\n    private toggleDockWidth = () => {\n        this.expanded = !this.expanded;\n        this.dockExpanded.emit(this.expanded);\n    };\n}\n"],"mappings":"yDAAA,MAAMA,EAAU,8sGCWhB,MAAMC,EAA4B,I,MAerBC,EAAI,M,+KAmHLC,KAAAC,gBAAkB,IACfD,KAAKE,gBAAkB,KAAOC,EAAA,QAAMC,MAAM,qBAG7CJ,KAAAK,eAAkBC,GAElBH,EAAA,qBACIC,MAAO,CACH,YAAa,KACbG,SAAUD,EAAKC,UAEnBD,KAAMA,EACNE,SAAUR,KAAKQ,WAAaR,KAAKE,gBACjCA,gBAAiBF,KAAKE,kBAK1BF,KAAAS,aAAe,KACnB,GAAIC,OAAOC,YAAcX,KAAKY,iBAAkB,CAC5CZ,KAAKE,gBAAkB,I,KACpB,CACHF,KAAKE,gBAAkB,K,GAsBvBF,KAAAa,gBAAkB,KACtBb,KAAKQ,UAAYR,KAAKQ,SACtBR,KAAKc,aAAaC,KAAKf,KAAKQ,SAAS,E,eA5JV,G,qBAOO,G,6CAqBnB,M,iBAUG,K,sBASaV,E,qBA+BT,K,CAInBkB,mBACHhB,KAAKiB,eAAiB,IAAIC,eAAelB,KAAKS,cAC9CT,KAAKiB,eAAeE,QAAQC,SAASC,K,CAGzCC,uBACItB,KAAKiB,eAAeM,Y,CAGjBC,SACH,OACIrB,EAACsB,EAAI,CACDrB,MAAO,CACHsB,KAAM,KACNlB,SAAUR,KAAKQ,SACf,oBAAqBR,KAAKE,kBAG9BC,EAAA,oBAAiBH,KAAK2B,iBACjB3B,KAAK4B,UAAUC,IAAI7B,KAAKK,gBACxBL,KAAKC,kBACLD,KAAK8B,gBAAgBD,IAAI7B,KAAKK,iBAElCL,KAAK+B,2B,CA+BVA,2BACJ,GAAI/B,KAAKE,kBAAoBF,KAAKgC,YAAa,CAC3C,M,CAGJ,OACI7B,EAAA,UACIC,MAAO,CACH,gBAAiB,KACjBI,SAAUR,KAAKQ,UAEnByB,QAASjC,KAAKa,iBAEdV,EAAA,cAAY+B,KAAK,gB"}