@limetech/lime-elements 38.1.1 → 38.1.2

package/dist/lime-elements/{p-8bebeb6b.entry.js → p-dc6846e1.entry.js}

@@ -1,2 +1,2 @@
-import{r as i,c,h as e}from"./p-443111b3.js";import{c as r}from"./p-96460db3.js";const t='@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  )}.mdc-touch-target-wrapper{display:inline}.mdc-deprecated-chip-trailing-action__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}.mdc-deprecated-chip-trailing-action{border:none;display:inline-flex;position:relative;align-items:center;justify-content:center;box-sizing:border-box;padding:0;outline:none;cursor:pointer;-webkit-appearance:none;background:none}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__icon{height:18px;width:18px;font-size:18px}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action{color:#000;color:var(--mdc-theme-on-surface, #000)}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__touch{width:26px}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__icon{fill:currentColor;color:inherit}@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-deprecated-chip-trailing-action{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);will-change:transform, opacity}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple::before,.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded .mdc-deprecated-chip-trailing-action__ripple::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded .mdc-deprecated-chip-trailing-action__ripple::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded--unbounded .mdc-deprecated-chip-trailing-action__ripple::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded--foreground-activation .mdc-deprecated-chip-trailing-action__ripple::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded--foreground-deactivation .mdc-deprecated-chip-trailing-action__ripple::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple::before,.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple::after{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded .mdc-deprecated-chip-trailing-action__ripple::before,.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded .mdc-deprecated-chip-trailing-action__ripple::after{top:var(--mdc-ripple-top, calc(50% - 50%));left:var(--mdc-ripple-left, calc(50% - 50%));width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded .mdc-deprecated-chip-trailing-action__ripple::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple::before,.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple::after{background-color:#000;background-color:var(--mdc-ripple-color, var(--mdc-theme-on-surface, #000))}.mdc-deprecated-chip-trailing-action:hover .mdc-deprecated-chip-trailing-action__ripple::before,.mdc-deprecated-chip-trailing-action.mdc-ripple-surface--hover .mdc-deprecated-chip-trailing-action__ripple::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded--background-focused .mdc-deprecated-chip-trailing-action__ripple::before,.mdc-deprecated-chip-trailing-action:not(.mdc-ripple-upgraded):focus .mdc-deprecated-chip-trailing-action__ripple::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-deprecated-chip-trailing-action:not(.mdc-ripple-upgraded) .mdc-deprecated-chip-trailing-action__ripple::after{transition:opacity 150ms linear}.mdc-deprecated-chip-trailing-action:not(.mdc-ripple-upgraded):active .mdc-deprecated-chip-trailing-action__ripple::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple{position:absolute;box-sizing:content-box;width:100%;height:100%;overflow:hidden}.mdc-chip__icon--leading{color:rgba(0, 0, 0, 0.54)}.mdc-deprecated-chip-trailing-action{color:#000}.mdc-chip__icon--trailing{color:rgba(0, 0, 0, 0.54)}.mdc-chip__icon--trailing:hover{color:rgba(0, 0, 0, 0.62)}.mdc-chip__icon--trailing:focus{color:rgba(0, 0, 0, 0.87)}.mdc-chip__icon.mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden){width:20px;height:20px;font-size:20px}.mdc-deprecated-chip-trailing-action__icon{height:18px;width:18px;font-size:18px}.mdc-chip__icon.mdc-chip__icon--trailing{width:18px;height:18px;font-size:18px}.mdc-deprecated-chip-trailing-action{margin-left:4px;margin-right:-4px}[dir=rtl] .mdc-deprecated-chip-trailing-action,.mdc-deprecated-chip-trailing-action[dir=rtl]{margin-left:-4px;margin-right:4px;}.mdc-chip__icon--trailing{margin-left:4px;margin-right:-4px}[dir=rtl] .mdc-chip__icon--trailing,.mdc-chip__icon--trailing[dir=rtl]{margin-left:-4px;margin-right:4px;}.mdc-elevation-overlay{position:absolute;border-radius:inherit;pointer-events:none;opacity:0;opacity:var(--mdc-elevation-overlay-opacity, 0);transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);background-color:#fff;background-color:var(--mdc-elevation-overlay-color, #fff)}.mdc-chip{border-radius:16px;background-color:#e0e0e0;color:rgba(0, 0, 0, 0.87);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, inherit));font-size:0.8125rem;font-size:var(--mdc-typography-body2-font-size, 0.8125rem);line-height:1.625rem;line-height:var(--mdc-typography-body2-line-height, 1.625rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight, 400);letter-spacing:0.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, 0.0178571429em);text-decoration:inherit;text-decoration:var(--mdc-typography-body2-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform, inherit);height:32px;position:relative;display:inline-flex;align-items:center;box-sizing:border-box;padding:0 12px;border-width:0;outline:none;cursor:pointer;-webkit-appearance:none}.mdc-chip .mdc-chip__ripple{border-radius:16px}.mdc-chip:hover{color:rgba(0, 0, 0, 0.87)}.mdc-chip.mdc-chip--selected .mdc-chip__checkmark,.mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden){margin-left:-4px;margin-right:4px}[dir=rtl] .mdc-chip.mdc-chip--selected .mdc-chip__checkmark,[dir=rtl] .mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden),.mdc-chip.mdc-chip--selected .mdc-chip__checkmark[dir=rtl],.mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden)[dir=rtl]{margin-left:4px;margin-right:-4px;}.mdc-chip .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-chip::-moz-focus-inner{padding:0;border:0}.mdc-chip:hover{color:#000;color:var(--mdc-theme-on-surface, #000)}.mdc-chip .mdc-chip__touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-chip--exit{transition:opacity 75ms cubic-bezier(0.4, 0, 0.2, 1), width 150ms cubic-bezier(0, 0, 0.2, 1), padding 100ms linear, margin 100ms linear;opacity:0}.mdc-chip__overflow{text-overflow:ellipsis;overflow:hidden}.mdc-chip__text{white-space:nowrap}.mdc-chip__icon{border-radius:50%;outline:none;vertical-align:middle}.mdc-chip__checkmark{height:20px}.mdc-chip__checkmark-path{transition:stroke-dashoffset 150ms 50ms cubic-bezier(0.4, 0, 0.6, 1);stroke-width:2px;stroke-dashoffset:29.7833385;stroke-dasharray:29.7833385}.mdc-chip__primary-action:focus{outline:none}.mdc-chip--selected .mdc-chip__checkmark-path{stroke-dashoffset:0}.mdc-chip__icon--leading,.mdc-chip__icon--trailing{position:relative}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected{color:#26a69a;color:var(--mdc-theme-primary, #26a69a)}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected .mdc-chip__icon--leading{color:rgba(38, 166, 154, 0.54)}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected:hover{color:#26a69a;color:var(--mdc-theme-primary, #26a69a)}.mdc-chip-set--choice .mdc-chip .mdc-chip__checkmark-path{stroke:#26a69a;stroke:var(--mdc-theme-primary, #26a69a)}.mdc-chip-set--choice .mdc-chip--selected{background-color:#fff;background-color:var(--mdc-theme-surface, #fff)}.mdc-chip__checkmark-svg{width:0;height:20px;transition:width 150ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-chip--selected .mdc-chip__checkmark-svg{width:20px}.mdc-chip-set--filter .mdc-chip__icon--leading{transition:opacity 75ms linear;transition-delay:-50ms;opacity:1}.mdc-chip-set--filter .mdc-chip__icon--leading+.mdc-chip__checkmark{transition:opacity 75ms linear;transition-delay:80ms;opacity:0}.mdc-chip-set--filter .mdc-chip__icon--leading+.mdc-chip__checkmark .mdc-chip__checkmark-svg{transition:width 0ms}.mdc-chip-set--filter .mdc-chip--selected .mdc-chip__icon--leading{opacity:0}.mdc-chip-set--filter .mdc-chip--selected .mdc-chip__icon--leading+.mdc-chip__checkmark{width:0;opacity:1}.mdc-chip-set--filter .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading{width:0;opacity:0}.mdc-chip-set--filter .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading+.mdc-chip__checkmark{width:20px}.mdc-chip{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);will-change:transform, opacity}.mdc-chip .mdc-chip__ripple::before,.mdc-chip .mdc-chip__ripple::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-chip .mdc-chip__ripple::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-chip .mdc-chip__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-chip.mdc-ripple-upgraded .mdc-chip__ripple::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-chip.mdc-ripple-upgraded .mdc-chip__ripple::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-chip.mdc-ripple-upgraded--unbounded .mdc-chip__ripple::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-chip.mdc-ripple-upgraded--foreground-activation .mdc-chip__ripple::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.mdc-chip.mdc-ripple-upgraded--foreground-deactivation .mdc-chip__ripple::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-chip .mdc-chip__ripple::before,.mdc-chip .mdc-chip__ripple::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-chip.mdc-ripple-upgraded .mdc-chip__ripple::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-chip .mdc-chip__ripple::before,.mdc-chip .mdc-chip__ripple::after{background-color:rgba(0, 0, 0, 0.87);background-color:var(--mdc-ripple-color, rgba(0, 0, 0, 0.87))}.mdc-chip:hover .mdc-chip__ripple::before,.mdc-chip.mdc-ripple-surface--hover .mdc-chip__ripple::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-chip.mdc-ripple-upgraded--background-focused .mdc-chip__ripple::before,.mdc-chip.mdc-ripple-upgraded:focus-within .mdc-chip__ripple::before,.mdc-chip:not(.mdc-ripple-upgraded):focus .mdc-chip__ripple::before,.mdc-chip:not(.mdc-ripple-upgraded):focus-within .mdc-chip__ripple::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-chip:not(.mdc-ripple-upgraded) .mdc-chip__ripple::after{transition:opacity 150ms linear}.mdc-chip:not(.mdc-ripple-upgraded):active .mdc-chip__ripple::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-chip.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-chip .mdc-chip__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected .mdc-chip__ripple::before{opacity:0.16;opacity:var(--mdc-ripple-selected-opacity, 0.16)}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected .mdc-chip__ripple::before,.mdc-chip-set--choice .mdc-chip.mdc-chip--selected .mdc-chip__ripple::after{background-color:#26a69a;background-color:var(--mdc-ripple-color, var(--mdc-theme-primary, #26a69a))}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected:hover .mdc-chip__ripple::before,.mdc-chip-set--choice .mdc-chip.mdc-chip--selected.mdc-ripple-surface--hover .mdc-chip__ripple::before{opacity:0.24;opacity:var(--mdc-ripple-hover-opacity, 0.24)}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected.mdc-ripple-upgraded--background-focused .mdc-chip__ripple::before,.mdc-chip-set--choice .mdc-chip.mdc-chip--selected.mdc-ripple-upgraded:focus-within .mdc-chip__ripple::before,.mdc-chip-set--choice .mdc-chip.mdc-chip--selected:not(.mdc-ripple-upgraded):focus .mdc-chip__ripple::before,.mdc-chip-set--choice .mdc-chip.mdc-chip--selected:not(.mdc-ripple-upgraded):focus-within .mdc-chip__ripple::before{transition-duration:75ms;opacity:0.4;opacity:var(--mdc-ripple-focus-opacity, 0.4)}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected:not(.mdc-ripple-upgraded) .mdc-chip__ripple::after{transition:opacity 150ms linear}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected:not(.mdc-ripple-upgraded):active .mdc-chip__ripple::after{transition-duration:75ms;opacity:0.4;opacity:var(--mdc-ripple-press-opacity, 0.4)}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.4)}@keyframes mdc-chip-entry{from{transform:scale(0.8);opacity:0.4}to{transform:scale(1);opacity:1}}.mdc-chip-set{padding:4px;display:flex;flex-wrap:wrap;box-sizing:border-box}.mdc-chip-set .mdc-chip{margin:4px}.mdc-chip-set .mdc-chip--touch{margin-top:8px;margin-bottom:8px}.mdc-chip-set--input .mdc-chip{animation:mdc-chip-entry 100ms cubic-bezier(0, 0, 0.2, 1)}.mdc-chip{font-family:inherit}.mdc-chip{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), var(--limel-additional-clickable-transition-properties);cursor:pointer;color:var(--mdc-theme-on-surface);background-color:transparent;max-width:100%;min-width:2rem;padding:0 0.0625rem;display:inline-grid;grid-auto-flow:column;margin:0.125rem !important;font-size:0.875rem}.mdc-chip:hover,.mdc-chip:focus,.mdc-chip:focus-visible{will-change:color, background-color, box-shadow, transform}.mdc-chip: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)}.mdc-chip:active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);background-color:var(--mdc-theme-surface);box-shadow:var(--button-shadow-inset-pressed)}.mdc-chip:hover,.mdc-chip:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.mdc-chip:not(:last-child):after{content:"";display:block;height:1rem;width:0.125rem;border-radius:0.25rem;background-color:var(--button-group-text-color, rgb(var(--contrast-1200)));opacity:0.1;position:absolute;right:-0.1875rem;top:0;bottom:0;margin:auto}.mdc-chip label{cursor:pointer;transition:color 0.2s ease;display:flex;align-items:center}.mdc-chip label:has(>limel-badge) .mdc-chip__text{padding-right:0.25rem}.mdc-chip input[type=radio]{width:0;position:absolute;opacity:0}.mdc-chip input[type=radio]:focus-visible+label:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:3.75rem;box-shadow:var(--shadow-depth-8-focused);z-index:1}.mdc-chip span[role=gridcell]{min-width:0}.mdc-chip span[role=gridcell]:focus-within{outline:none;color:var(--mdc-theme-primary)}.mdc-chip span[role=gridcell]:only-child .mdc-chip__text{padding-left:0.75rem}.mdc-chip span[role=gridcell]:first-child .mdc-chip__text{padding-left:0.75rem}.mdc-chip.mdc-chip--selected{background-color:var(--mdc-theme-surface);box-shadow:var(--button-shadow-inset)}.mdc-chip.mdc-chip--selected:active{box-shadow:var(--button-shadow-inset-pressed)}.mdc-chip__text{font-size:0.8125rem;overflow:hidden;text-overflow:ellipsis;display:block;padding:0 0.75rem 0 0.25rem}.mdc-chip-set{align-items:center;border-radius:3.75rem;background-color:var(--button-group-background-color, rgb(var(--contrast-400)));padding:0;width:max-content;max-width:100%;flex-wrap:nowrap}.mdc-chip-set.disabled{cursor:not-allowed;opacity:0.4;pointer-events:none}limel-badge{margin-right:0.25rem;pointer-events:none}.mdc-chip:not(.mdc-chip--selected){--badge-background-color:rgb(var(--contrast-200))}';const a=class{constructor(e){i(this,e);this.change=c(this,"change",7);this.radioGroupName=r();this.setSelectedButton=()=>{var i;this.selectedButtonId=(i=this.value.find((i=>i.selected)))===null||i===void 0?void 0:i.id};this.value=[];this.disabled=false;this.selectedButtonId=undefined;this.renderButton=this.renderButton.bind(this);this.onChange=this.onChange.bind(this);this.renderContent=this.renderContent.bind(this)}componentWillLoad(){this.setSelectedButton()}render(){const i={"mdc-chip-set":true,disabled:this.disabled,"mdc-chip-set--choice":true};return e("div",{class:i,role:"grid"},this.value.map(this.renderButton))}renderButton(i){const c=`b${i.id}`;const r={"mdc-chip":true,"mdc-chip--selected":this.isButtonChecked(i)};return e("div",{class:r,role:"row"},e("span",{role:"gridcell"},e("input",{type:"radio",name:this.radioGroupName,checked:this.isButtonChecked(i),id:c,onChange:this.onChange}),e("label",{htmlFor:c},this.renderContent(i),this.renderBadge(i))))}renderContent(i){if(i.icon){return this.renderIcon(i)}return this.renderLabel(i)}isButtonChecked(i){return i.id===this.selectedButtonId}renderLabel(i){return e("span",{class:"mdc-chip__text"},i.title)}renderIcon(i){const c=`i${i.id}`;return[e("limel-icon",{id:c,class:"mdc-chip__icon","aria-label":i.title,name:i.icon,size:"small",badge:true}),e("limel-tooltip",{elementId:c,label:i.title})]}renderBadge(i){if(!i.badge){return}return e("limel-badge",{label:i.badge})}onChange(i){i.stopPropagation();const c=i.target;this.selectedButtonId=c.id.slice(1);const e=this.value.find((i=>i.id===this.selectedButtonId));this.change.emit(e)}valueChanged(){this.setSelectedButton()}static get watchers(){return{value:["valueChanged"]}}};a.style=t;export{a as limel_button_group};
-//# sourceMappingURL=p-8bebeb6b.entry.js.map
+import{r as i,c,h as e}from"./p-443111b3.js";import{c as r}from"./p-96460db3.js";const t='@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  )}.mdc-touch-target-wrapper{display:inline}.mdc-deprecated-chip-trailing-action__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}.mdc-deprecated-chip-trailing-action{border:none;display:inline-flex;position:relative;align-items:center;justify-content:center;box-sizing:border-box;padding:0;outline:none;cursor:pointer;-webkit-appearance:none;background:none}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__icon{height:18px;width:18px;font-size:18px}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action{color:#000;color:var(--mdc-theme-on-surface, #000)}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__touch{width:26px}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__icon{fill:currentColor;color:inherit}@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-deprecated-chip-trailing-action{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);will-change:transform, opacity}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple::before,.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded .mdc-deprecated-chip-trailing-action__ripple::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded .mdc-deprecated-chip-trailing-action__ripple::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded--unbounded .mdc-deprecated-chip-trailing-action__ripple::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded--foreground-activation .mdc-deprecated-chip-trailing-action__ripple::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded--foreground-deactivation .mdc-deprecated-chip-trailing-action__ripple::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple::before,.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple::after{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded .mdc-deprecated-chip-trailing-action__ripple::before,.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded .mdc-deprecated-chip-trailing-action__ripple::after{top:var(--mdc-ripple-top, calc(50% - 50%));left:var(--mdc-ripple-left, calc(50% - 50%));width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded .mdc-deprecated-chip-trailing-action__ripple::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple::before,.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple::after{background-color:#000;background-color:var(--mdc-ripple-color, var(--mdc-theme-on-surface, #000))}.mdc-deprecated-chip-trailing-action:hover .mdc-deprecated-chip-trailing-action__ripple::before,.mdc-deprecated-chip-trailing-action.mdc-ripple-surface--hover .mdc-deprecated-chip-trailing-action__ripple::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded--background-focused .mdc-deprecated-chip-trailing-action__ripple::before,.mdc-deprecated-chip-trailing-action:not(.mdc-ripple-upgraded):focus .mdc-deprecated-chip-trailing-action__ripple::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-deprecated-chip-trailing-action:not(.mdc-ripple-upgraded) .mdc-deprecated-chip-trailing-action__ripple::after{transition:opacity 150ms linear}.mdc-deprecated-chip-trailing-action:not(.mdc-ripple-upgraded):active .mdc-deprecated-chip-trailing-action__ripple::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple{position:absolute;box-sizing:content-box;width:100%;height:100%;overflow:hidden}.mdc-chip__icon--leading{color:rgba(0, 0, 0, 0.54)}.mdc-deprecated-chip-trailing-action{color:#000}.mdc-chip__icon--trailing{color:rgba(0, 0, 0, 0.54)}.mdc-chip__icon--trailing:hover{color:rgba(0, 0, 0, 0.62)}.mdc-chip__icon--trailing:focus{color:rgba(0, 0, 0, 0.87)}.mdc-chip__icon.mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden){width:20px;height:20px;font-size:20px}.mdc-deprecated-chip-trailing-action__icon{height:18px;width:18px;font-size:18px}.mdc-chip__icon.mdc-chip__icon--trailing{width:18px;height:18px;font-size:18px}.mdc-deprecated-chip-trailing-action{margin-left:4px;margin-right:-4px}[dir=rtl] .mdc-deprecated-chip-trailing-action,.mdc-deprecated-chip-trailing-action[dir=rtl]{margin-left:-4px;margin-right:4px;}.mdc-chip__icon--trailing{margin-left:4px;margin-right:-4px}[dir=rtl] .mdc-chip__icon--trailing,.mdc-chip__icon--trailing[dir=rtl]{margin-left:-4px;margin-right:4px;}.mdc-elevation-overlay{position:absolute;border-radius:inherit;pointer-events:none;opacity:0;opacity:var(--mdc-elevation-overlay-opacity, 0);transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);background-color:#fff;background-color:var(--mdc-elevation-overlay-color, #fff)}.mdc-chip{border-radius:16px;background-color:#e0e0e0;color:rgba(0, 0, 0, 0.87);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, inherit));font-size:0.8125rem;font-size:var(--mdc-typography-body2-font-size, 0.8125rem);line-height:1.625rem;line-height:var(--mdc-typography-body2-line-height, 1.625rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight, 400);letter-spacing:0.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, 0.0178571429em);text-decoration:inherit;text-decoration:var(--mdc-typography-body2-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform, inherit);height:32px;position:relative;display:inline-flex;align-items:center;box-sizing:border-box;padding:0 12px;border-width:0;outline:none;cursor:pointer;-webkit-appearance:none}.mdc-chip .mdc-chip__ripple{border-radius:16px}.mdc-chip:hover{color:rgba(0, 0, 0, 0.87)}.mdc-chip.mdc-chip--selected .mdc-chip__checkmark,.mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden){margin-left:-4px;margin-right:4px}[dir=rtl] .mdc-chip.mdc-chip--selected .mdc-chip__checkmark,[dir=rtl] .mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden),.mdc-chip.mdc-chip--selected .mdc-chip__checkmark[dir=rtl],.mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden)[dir=rtl]{margin-left:4px;margin-right:-4px;}.mdc-chip .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-chip::-moz-focus-inner{padding:0;border:0}.mdc-chip:hover{color:#000;color:var(--mdc-theme-on-surface, #000)}.mdc-chip .mdc-chip__touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-chip--exit{transition:opacity 75ms cubic-bezier(0.4, 0, 0.2, 1), width 150ms cubic-bezier(0, 0, 0.2, 1), padding 100ms linear, margin 100ms linear;opacity:0}.mdc-chip__overflow{text-overflow:ellipsis;overflow:hidden}.mdc-chip__text{white-space:nowrap}.mdc-chip__icon{border-radius:50%;outline:none;vertical-align:middle}.mdc-chip__checkmark{height:20px}.mdc-chip__checkmark-path{transition:stroke-dashoffset 150ms 50ms cubic-bezier(0.4, 0, 0.6, 1);stroke-width:2px;stroke-dashoffset:29.7833385;stroke-dasharray:29.7833385}.mdc-chip__primary-action:focus{outline:none}.mdc-chip--selected .mdc-chip__checkmark-path{stroke-dashoffset:0}.mdc-chip__icon--leading,.mdc-chip__icon--trailing{position:relative}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected{color:#26a69a;color:var(--mdc-theme-primary, #26a69a)}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected .mdc-chip__icon--leading{color:rgba(38, 166, 154, 0.54)}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected:hover{color:#26a69a;color:var(--mdc-theme-primary, #26a69a)}.mdc-chip-set--choice .mdc-chip .mdc-chip__checkmark-path{stroke:#26a69a;stroke:var(--mdc-theme-primary, #26a69a)}.mdc-chip-set--choice .mdc-chip--selected{background-color:#fff;background-color:var(--mdc-theme-surface, #fff)}.mdc-chip__checkmark-svg{width:0;height:20px;transition:width 150ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-chip--selected .mdc-chip__checkmark-svg{width:20px}.mdc-chip-set--filter .mdc-chip__icon--leading{transition:opacity 75ms linear;transition-delay:-50ms;opacity:1}.mdc-chip-set--filter .mdc-chip__icon--leading+.mdc-chip__checkmark{transition:opacity 75ms linear;transition-delay:80ms;opacity:0}.mdc-chip-set--filter .mdc-chip__icon--leading+.mdc-chip__checkmark .mdc-chip__checkmark-svg{transition:width 0ms}.mdc-chip-set--filter .mdc-chip--selected .mdc-chip__icon--leading{opacity:0}.mdc-chip-set--filter .mdc-chip--selected .mdc-chip__icon--leading+.mdc-chip__checkmark{width:0;opacity:1}.mdc-chip-set--filter .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading{width:0;opacity:0}.mdc-chip-set--filter .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading+.mdc-chip__checkmark{width:20px}.mdc-chip{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);will-change:transform, opacity}.mdc-chip .mdc-chip__ripple::before,.mdc-chip .mdc-chip__ripple::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-chip .mdc-chip__ripple::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-chip .mdc-chip__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-chip.mdc-ripple-upgraded .mdc-chip__ripple::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-chip.mdc-ripple-upgraded .mdc-chip__ripple::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-chip.mdc-ripple-upgraded--unbounded .mdc-chip__ripple::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-chip.mdc-ripple-upgraded--foreground-activation .mdc-chip__ripple::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.mdc-chip.mdc-ripple-upgraded--foreground-deactivation .mdc-chip__ripple::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-chip .mdc-chip__ripple::before,.mdc-chip .mdc-chip__ripple::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-chip.mdc-ripple-upgraded .mdc-chip__ripple::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-chip .mdc-chip__ripple::before,.mdc-chip .mdc-chip__ripple::after{background-color:rgba(0, 0, 0, 0.87);background-color:var(--mdc-ripple-color, rgba(0, 0, 0, 0.87))}.mdc-chip:hover .mdc-chip__ripple::before,.mdc-chip.mdc-ripple-surface--hover .mdc-chip__ripple::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-chip.mdc-ripple-upgraded--background-focused .mdc-chip__ripple::before,.mdc-chip.mdc-ripple-upgraded:focus-within .mdc-chip__ripple::before,.mdc-chip:not(.mdc-ripple-upgraded):focus .mdc-chip__ripple::before,.mdc-chip:not(.mdc-ripple-upgraded):focus-within .mdc-chip__ripple::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-chip:not(.mdc-ripple-upgraded) .mdc-chip__ripple::after{transition:opacity 150ms linear}.mdc-chip:not(.mdc-ripple-upgraded):active .mdc-chip__ripple::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-chip.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-chip .mdc-chip__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected .mdc-chip__ripple::before{opacity:0.16;opacity:var(--mdc-ripple-selected-opacity, 0.16)}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected .mdc-chip__ripple::before,.mdc-chip-set--choice .mdc-chip.mdc-chip--selected .mdc-chip__ripple::after{background-color:#26a69a;background-color:var(--mdc-ripple-color, var(--mdc-theme-primary, #26a69a))}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected:hover .mdc-chip__ripple::before,.mdc-chip-set--choice .mdc-chip.mdc-chip--selected.mdc-ripple-surface--hover .mdc-chip__ripple::before{opacity:0.24;opacity:var(--mdc-ripple-hover-opacity, 0.24)}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected.mdc-ripple-upgraded--background-focused .mdc-chip__ripple::before,.mdc-chip-set--choice .mdc-chip.mdc-chip--selected.mdc-ripple-upgraded:focus-within .mdc-chip__ripple::before,.mdc-chip-set--choice .mdc-chip.mdc-chip--selected:not(.mdc-ripple-upgraded):focus .mdc-chip__ripple::before,.mdc-chip-set--choice .mdc-chip.mdc-chip--selected:not(.mdc-ripple-upgraded):focus-within .mdc-chip__ripple::before{transition-duration:75ms;opacity:0.4;opacity:var(--mdc-ripple-focus-opacity, 0.4)}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected:not(.mdc-ripple-upgraded) .mdc-chip__ripple::after{transition:opacity 150ms linear}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected:not(.mdc-ripple-upgraded):active .mdc-chip__ripple::after{transition-duration:75ms;opacity:0.4;opacity:var(--mdc-ripple-press-opacity, 0.4)}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.4)}@keyframes mdc-chip-entry{from{transform:scale(0.8);opacity:0.4}to{transform:scale(1);opacity:1}}.mdc-chip-set{padding:4px;display:flex;flex-wrap:wrap;box-sizing:border-box}.mdc-chip-set .mdc-chip{margin:4px}.mdc-chip-set .mdc-chip--touch{margin-top:8px;margin-bottom:8px}.mdc-chip-set--input .mdc-chip{animation:mdc-chip-entry 100ms cubic-bezier(0, 0, 0.2, 1)}.mdc-chip{font-family:inherit}.mdc-chip{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;max-width:100%;min-width:2rem;padding:0 0.0625rem;display:inline-grid;grid-auto-flow:column;margin:0.125rem !important;font-size:0.875rem}.mdc-chip:hover,.mdc-chip:focus,.mdc-chip:focus-visible{will-change:color, background-color, box-shadow, transform}.mdc-chip: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)}.mdc-chip:active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);background-color:var(--mdc-theme-surface);box-shadow:var(--button-shadow-inset-pressed)}.mdc-chip:hover,.mdc-chip:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.mdc-chip:not(:last-child):after{content:"";display:block;height:1rem;width:0.125rem;border-radius:0.25rem;background-color:var(--button-group-text-color, rgb(var(--contrast-1200)));opacity:0.1;position:absolute;right:-0.1875rem;top:0;bottom:0;margin:auto}.mdc-chip label{cursor:pointer;transition:color 0.2s ease;display:flex;align-items:center}.mdc-chip label:has(>limel-badge) .mdc-chip__text{padding-right:0.25rem}.mdc-chip input[type=radio]{width:0;position:absolute;opacity:0}.mdc-chip input[type=radio]:focus-visible+label:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:3.75rem;box-shadow:var(--shadow-depth-8-focused);z-index:1}.mdc-chip span[role=gridcell]{min-width:0}.mdc-chip span[role=gridcell]:focus-within{outline:none;color:var(--mdc-theme-primary)}.mdc-chip span[role=gridcell]:only-child .mdc-chip__text{padding-left:0.75rem}.mdc-chip span[role=gridcell]:first-child .mdc-chip__text{padding-left:0.75rem}.mdc-chip.mdc-chip--selected{background-color:var(--mdc-theme-surface);box-shadow:var(--button-shadow-inset)}.mdc-chip.mdc-chip--selected:active{box-shadow:var(--button-shadow-inset-pressed)}.mdc-chip__text{font-size:0.8125rem;overflow:hidden;text-overflow:ellipsis;display:block;padding:0 0.75rem 0 0.25rem}.mdc-chip-set{align-items:center;border-radius:3.75rem;background-color:var(--button-group-background-color, rgb(var(--contrast-400)));padding:0;width:max-content;max-width:100%;flex-wrap:nowrap}.mdc-chip-set.disabled{cursor:not-allowed;opacity:0.4;pointer-events:none}limel-badge{margin-right:0.25rem;pointer-events:none}.mdc-chip:not(.mdc-chip--selected){--badge-background-color:rgb(var(--contrast-200))}';const p=class{constructor(e){i(this,e);this.change=c(this,"change",7);this.radioGroupName=r();this.setSelectedButton=()=>{var i;this.selectedButtonId=(i=this.value.find((i=>i.selected)))===null||i===void 0?void 0:i.id};this.value=[];this.disabled=false;this.selectedButtonId=undefined;this.renderButton=this.renderButton.bind(this);this.onChange=this.onChange.bind(this);this.renderContent=this.renderContent.bind(this)}componentWillLoad(){this.setSelectedButton()}render(){const i={"mdc-chip-set":true,disabled:this.disabled,"mdc-chip-set--choice":true};return e("div",{class:i,role:"grid"},this.value.map(this.renderButton))}renderButton(i){const c=`b${i.id}`;const r={"mdc-chip":true,"mdc-chip--selected":this.isButtonChecked(i)};return e("div",{class:r,role:"row"},e("span",{role:"gridcell"},e("input",{type:"radio",name:this.radioGroupName,checked:this.isButtonChecked(i),id:c,onChange:this.onChange}),e("label",{htmlFor:c},this.renderContent(i),this.renderBadge(i))))}renderContent(i){if(i.icon){return this.renderIcon(i)}return this.renderLabel(i)}isButtonChecked(i){return i.id===this.selectedButtonId}renderLabel(i){return e("span",{class:"mdc-chip__text"},i.title)}renderIcon(i){const c=`i${i.id}`;return[e("limel-icon",{id:c,class:"mdc-chip__icon","aria-label":i.title,name:i.icon,size:"small",badge:true}),e("limel-tooltip",{elementId:c,label:i.title})]}renderBadge(i){if(!i.badge){return}return e("limel-badge",{label:i.badge})}onChange(i){i.stopPropagation();const c=i.target;this.selectedButtonId=c.id.slice(1);const e=this.value.find((i=>i.id===this.selectedButtonId));this.change.emit(e)}valueChanged(){this.setSelectedButton()}static get watchers(){return{value:["valueChanged"]}}};p.style=t;export{p as limel_button_group};
+//# sourceMappingURL=p-dc6846e1.entry.js.map

package/dist/lime-elements/{p-8bebeb6b.entry.js.map → p-dc6846e1.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["buttonGroupCss","ButtonGroup","constructor","hostRef","this","radioGroupName","createRandomString","setSelectedButton","selectedButtonId","_a","value","find","button","selected","id","renderButton","bind","onChange","renderContent","componentWillLoad","render","classes","disabled","h","class","role","map","buttonId","isButtonChecked","type","name","checked","htmlFor","renderBadge","icon","renderIcon","renderLabel","title","iconId","size","badge","elementId","label","event","stopPropagation","target","slice","item","change","emit","valueChanged"],"sources":["./src/components/button-group/button-group.scss?tag=limel-button-group&encapsulation=shadow","./src/components/button-group/button-group.tsx"],"sourcesContent":["@use '../../style/internal/z-index';\n@use '../../style/functions';\n@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins';\n\n@use '@material/chips/deprecated/mdc-chips';\n/**\n* @prop --button-group-background-color: Background color of the component. Defaults to `--contrast-400`\n*/\n\n.mdc-chip {\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\n.mdc-chip {\n    @include mixins.is-flat-inset-clickable($background-color: transparent);\n    max-width: 100%;\n    min-width: functions.pxToRem(32);\n    padding: 0 functions.pxToRem(1);\n    display: inline-grid;\n    grid-auto-flow: column;\n    margin: functions.pxToRem(2) !important;\n    font-size: functions.pxToRem(14);\n\n    &:not(:last-child) {\n        &:after {\n            content: '';\n            display: block;\n\n            height: functions.pxToRem(16);\n            width: functions.pxToRem(2);\n            border-radius: functions.pxToRem(4);\n            background-color: var(\n                --button-group-text-color,\n                rgb(var(--contrast-1200))\n            );\n            opacity: 0.1;\n\n            position: absolute;\n            right: functions.pxToRem(-3);\n            top: 0;\n            bottom: 0;\n            margin: auto;\n        }\n    }\n\n    label {\n        cursor: pointer;\n        transition: color 0.2s ease;\n        display: flex;\n        align-items: center;\n        &:has(> limel-badge) {\n            .mdc-chip__text {\n                padding-right: 0.25rem;\n            }\n        }\n    }\n\n    input[type='radio'] {\n        width: 0;\n        position: absolute;\n        opacity: 0; // This removes some visual defects on iOS and Firefox, created by \"user agent styles\"\n\n        &:focus-visible {\n            + label {\n                &:after {\n                    // visualizes keyboard navigation on Chrome & Firefox\n                    // only when non-pointer input is being used,\n                    // e.g. tabbed into using keyboard\n                    content: '';\n                    display: block;\n                    position: absolute;\n                    top: 0;\n                    right: 0;\n                    bottom: 0;\n                    left: 0;\n                    border-radius: functions.pxToRem(60);\n                    box-shadow: var(--shadow-depth-8-focused);\n                    z-index: z-index.$button-group-radio-button-keyboard-focused;\n                }\n            }\n        }\n    }\n\n    span[role='gridcell'] {\n        min-width: 0; // This is needed to force mdc-chip__text (which is inside this span) to truncate\n\n        &:focus-within {\n            // Cannot use `:focus-visible` here, since it is the radio button\n            // which gets focused, which is inside this element…\n            // and we are removing or hiding the visual appearance of the button\n            outline: none;\n            color: var(--mdc-theme-primary);\n        }\n\n        &:only-child {\n            .mdc-chip__text {\n                padding-left: functions.pxToRem(12);\n            }\n        }\n\n        &:first-child {\n            .mdc-chip__text {\n                padding-left: functions.pxToRem(12);\n            }\n        }\n    }\n\n    &.mdc-chip--selected {\n        background-color: var(--mdc-theme-surface);\n        box-shadow: var(--button-shadow-inset);\n\n        &:active {\n            box-shadow: var(--button-shadow-inset-pressed);\n        }\n    }\n}\n\n.mdc-chip__text {\n    font-size: functions.pxToRem(13);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: block;\n    padding: 0 functions.pxToRem(12) 0 functions.pxToRem(4);\n}\n\n.mdc-chip-set {\n    align-items: center;\n    border-radius: functions.pxToRem(60);\n    background-color: var(\n        --button-group-background-color,\n        rgb(var(--contrast-400))\n    );\n    padding: 0;\n\n    width: max-content;\n    max-width: 100%;\n\n    flex-wrap: nowrap; // Not sure about this. It'll put items on one row, but also can look bad on action bars. Kia\n\n    &.disabled {\n        @include shared_input-select-picker.looks-disabled;\n        pointer-events: none;\n    }\n}\n\nlimel-badge {\n    margin-right: 0.25rem;\n    pointer-events: none;\n}\n\n.mdc-chip:not(.mdc-chip--selected) {\n    --badge-background-color: rgb(var(--contrast-200));\n}\n","import {\n    Component,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { Button } from '../button/button.types';\nimport { createRandomString } from '../../util/random-string';\n\n/**\n * A button group control is a linear set of two or more buttons.\n *\n * ## Usage\n *\n * Button groups are often used to display different views of the same thing. A\n * common example of this component is when you switch between [ Map | Transit\n * | Satellite ] views to look at an area on the map.\n *\n * In some cases, button groups may serve as quick filters as well. For example\n * a list of contacts, in which the user can switch to [ All | Favorites\n * | Frequently contacted ] can incorporate a button group to quickly filter out\n * items and display subsets of them.\n *\n * ## Layout\n *\n * The button groups are usually placed in top headers and action bars,\n * sometimes with other elements. Since the group items will always be rendered\n * in a row, you must make sure not to have too many buttons in the group.\n * Because if the container of your button group does not get enough space to\n * fit in all its buttons, they will have to truncate their text and may appear\n * very cramped together. Always think about how your button group will appear\n * on a small screen such as phones.\n * :::note\n * Button can contain text or icons, but not both simultaneously!\n * :::\n *\n * Within the group, icon buttons will all have the same width, while each text button\n * inherits its width from its content.\n *\n * @exampleComponent limel-example-button-group-icons\n * @exampleComponent limel-example-button-group\n * @exampleComponent limel-example-button-group-mix\n * @exampleComponent limel-example-button-group-badges\n * @exampleComponent limel-example-button-group-composite\n */\n@Component({\n    tag: 'limel-button-group',\n    shadow: true,\n    styleUrl: 'button-group.scss',\n})\nexport class ButtonGroup {\n    /**\n     * List of buttons for the group\n     */\n    @Prop()\n    public value: Button[] = [];\n\n    /**\n     * True if the button-group should be disabled\n     */\n    @Prop({ reflect: true })\n    public disabled: boolean = false;\n\n    /**\n     * Dispatched when a button is selected/deselected\n     */\n    @Event()\n    private change: EventEmitter<Button>;\n\n    @State()\n    private selectedButtonId: string;\n\n    private radioGroupName = createRandomString();\n\n    constructor() {\n        this.renderButton = this.renderButton.bind(this);\n        this.onChange = this.onChange.bind(this);\n        this.renderContent = this.renderContent.bind(this);\n    }\n\n    public componentWillLoad() {\n        this.setSelectedButton();\n    }\n\n    public render() {\n        const classes = {\n            'mdc-chip-set': true,\n            disabled: this.disabled,\n            'mdc-chip-set--choice': true,\n        };\n\n        return (\n            <div class={classes} role=\"grid\">\n                {this.value.map(this.renderButton)}\n            </div>\n        );\n    }\n\n    private renderButton(button: Button) {\n        // Prefix with 'b' because html IDs cannot start with a digit,\n        // and we need to differentiate from the ID on the limel-icon. /Ads\n        const buttonId = `b${button.id}`;\n\n        const classes = {\n            'mdc-chip': true,\n            'mdc-chip--selected': this.isButtonChecked(button),\n        };\n\n        return (\n            <div class={classes} role=\"row\">\n                <span role=\"gridcell\">\n                    <input\n                        type=\"radio\"\n                        name={this.radioGroupName}\n                        checked={this.isButtonChecked(button)}\n                        id={buttonId}\n                        onChange={this.onChange}\n                    />\n                    <label htmlFor={buttonId}>\n                        {this.renderContent(button)}\n                        {this.renderBadge(button)}\n                    </label>\n                </span>\n            </div>\n        );\n    }\n\n    private renderContent(button: Button) {\n        if (button.icon) {\n            return this.renderIcon(button);\n        }\n\n        return this.renderLabel(button);\n    }\n\n    private isButtonChecked(button: Button) {\n        return button.id === this.selectedButtonId;\n    }\n\n    private renderLabel(button: Button) {\n        return <span class=\"mdc-chip__text\">{button.title}</span>;\n    }\n\n    private renderIcon(button: Button) {\n        // Prefix with 'i' because html IDs cannot start with a digit,\n        // and we need to differentiate from the \"buttonId\". /Ads\n        const iconId = `i${button.id}`;\n\n        return [\n            <limel-icon\n                id={iconId}\n                class=\"mdc-chip__icon\"\n                aria-label={button.title}\n                name={button.icon}\n                size=\"small\"\n                badge={true}\n            />,\n            <limel-tooltip elementId={iconId} label={button.title} />,\n        ];\n    }\n\n    private renderBadge(button: Button) {\n        if (!button.badge) {\n            return;\n        }\n\n        return <limel-badge label={button.badge} />;\n    }\n\n    private onChange(event: Event) {\n        event.stopPropagation();\n        const target = event.target as HTMLInputElement;\n        // The ID is prefixed with `b` in the HTML, remember? /Ads\n        this.selectedButtonId = target.id.slice(1);\n        const button = this.value.find((item) => {\n            return item.id === this.selectedButtonId;\n        });\n        this.change.emit(button);\n    }\n\n    private setSelectedButton = () => {\n        this.selectedButtonId = this.value.find((button) => {\n            return button.selected;\n        })?.id;\n    };\n\n    @Watch('value')\n    protected valueChanged() {\n        this.setSelectedButton();\n    }\n}\n"],"mappings":"iFAAA,MAAMA,EAAiB,yrmB,MCqDVC,EAAW,MAwBpBC,YAAAC,G,yCAFQC,KAAAC,eAAiBC,IA4GjBF,KAAAG,kBAAoB,K,MACxBH,KAAKI,kBAAmBC,EAAAL,KAAKM,MAAMC,MAAMC,GAC9BA,EAAOC,cAChB,MAAAJ,SAAA,SAAAA,EAAEK,EAAE,E,WAhIe,G,cAME,M,gCAcvBV,KAAKW,aAAeX,KAAKW,aAAaC,KAAKZ,MAC3CA,KAAKa,SAAWb,KAAKa,SAASD,KAAKZ,MACnCA,KAAKc,cAAgBd,KAAKc,cAAcF,KAAKZ,K,CAG1Ce,oBACHf,KAAKG,mB,CAGFa,SACH,MAAMC,EAAU,CACZ,eAAgB,KAChBC,SAAUlB,KAAKkB,SACf,uBAAwB,MAG5B,OACIC,EAAA,OAAKC,MAAOH,EAASI,KAAK,QACrBrB,KAAKM,MAAMgB,IAAItB,KAAKW,c,CAKzBA,aAAaH,GAGjB,MAAMe,EAAW,IAAIf,EAAOE,KAE5B,MAAMO,EAAU,CACZ,WAAY,KACZ,qBAAsBjB,KAAKwB,gBAAgBhB,IAG/C,OACIW,EAAA,OAAKC,MAAOH,EAASI,KAAK,OACtBF,EAAA,QAAME,KAAK,YACPF,EAAA,SACIM,KAAK,QACLC,KAAM1B,KAAKC,eACX0B,QAAS3B,KAAKwB,gBAAgBhB,GAC9BE,GAAIa,EACJV,SAAUb,KAAKa,WAEnBM,EAAA,SAAOS,QAASL,GACXvB,KAAKc,cAAcN,GACnBR,KAAK6B,YAAYrB,K,CAO9BM,cAAcN,GAClB,GAAIA,EAAOsB,KAAM,CACb,OAAO9B,KAAK+B,WAAWvB,E,CAG3B,OAAOR,KAAKgC,YAAYxB,E,CAGpBgB,gBAAgBhB,GACpB,OAAOA,EAAOE,KAAOV,KAAKI,gB,CAGtB4B,YAAYxB,GAChB,OAAOW,EAAA,QAAMC,MAAM,kBAAkBZ,EAAOyB,M,CAGxCF,WAAWvB,GAGf,MAAM0B,EAAS,IAAI1B,EAAOE,KAE1B,MAAO,CACHS,EAAA,cACIT,GAAIwB,EACJd,MAAM,iBAAgB,aACVZ,EAAOyB,MACnBP,KAAMlB,EAAOsB,KACbK,KAAK,QACLC,MAAO,OAEXjB,EAAA,iBAAekB,UAAWH,EAAQI,MAAO9B,EAAOyB,Q,CAIhDJ,YAAYrB,GAChB,IAAKA,EAAO4B,MAAO,CACf,M,CAGJ,OAAOjB,EAAA,eAAamB,MAAO9B,EAAO4B,O,CAG9BvB,SAAS0B,GACbA,EAAMC,kBACN,MAAMC,EAASF,EAAME,OAErBzC,KAAKI,iBAAmBqC,EAAO/B,GAAGgC,MAAM,GACxC,MAAMlC,EAASR,KAAKM,MAAMC,MAAMoC,GACrBA,EAAKjC,KAAOV,KAAKI,mBAE5BJ,KAAK4C,OAAOC,KAAKrC,E,CAUXsC,eACN9C,KAAKG,mB"}
+{"version":3,"names":["buttonGroupCss","ButtonGroup","constructor","hostRef","this","radioGroupName","createRandomString","setSelectedButton","selectedButtonId","_a","value","find","button","selected","id","renderButton","bind","onChange","renderContent","componentWillLoad","render","classes","disabled","h","class","role","map","buttonId","isButtonChecked","type","name","checked","htmlFor","renderBadge","icon","renderIcon","renderLabel","title","iconId","size","badge","elementId","label","event","stopPropagation","target","slice","item","change","emit","valueChanged"],"sources":["./src/components/button-group/button-group.scss?tag=limel-button-group&encapsulation=shadow","./src/components/button-group/button-group.tsx"],"sourcesContent":["@use '../../style/internal/z-index';\n@use '../../style/functions';\n@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins';\n\n@use '@material/chips/deprecated/mdc-chips';\n/**\n* @prop --button-group-background-color: Background color of the component. Defaults to `--contrast-400`\n*/\n\n.mdc-chip {\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\n.mdc-chip {\n    @include mixins.is-flat-inset-clickable($background-color: transparent);\n    max-width: 100%;\n    min-width: functions.pxToRem(32);\n    padding: 0 functions.pxToRem(1);\n    display: inline-grid;\n    grid-auto-flow: column;\n    margin: functions.pxToRem(2) !important;\n    font-size: functions.pxToRem(14);\n\n    &:not(:last-child) {\n        &:after {\n            content: '';\n            display: block;\n\n            height: functions.pxToRem(16);\n            width: functions.pxToRem(2);\n            border-radius: functions.pxToRem(4);\n            background-color: var(\n                --button-group-text-color,\n                rgb(var(--contrast-1200))\n            );\n            opacity: 0.1;\n\n            position: absolute;\n            right: functions.pxToRem(-3);\n            top: 0;\n            bottom: 0;\n            margin: auto;\n        }\n    }\n\n    label {\n        cursor: pointer;\n        transition: color 0.2s ease;\n        display: flex;\n        align-items: center;\n        &:has(> limel-badge) {\n            .mdc-chip__text {\n                padding-right: 0.25rem;\n            }\n        }\n    }\n\n    input[type='radio'] {\n        width: 0;\n        position: absolute;\n        opacity: 0; // This removes some visual defects on iOS and Firefox, created by \"user agent styles\"\n\n        &:focus-visible {\n            + label {\n                &:after {\n                    // visualizes keyboard navigation on Chrome & Firefox\n                    // only when non-pointer input is being used,\n                    // e.g. tabbed into using keyboard\n                    content: '';\n                    display: block;\n                    position: absolute;\n                    top: 0;\n                    right: 0;\n                    bottom: 0;\n                    left: 0;\n                    border-radius: functions.pxToRem(60);\n                    box-shadow: var(--shadow-depth-8-focused);\n                    z-index: z-index.$button-group-radio-button-keyboard-focused;\n                }\n            }\n        }\n    }\n\n    span[role='gridcell'] {\n        min-width: 0; // This is needed to force mdc-chip__text (which is inside this span) to truncate\n\n        &:focus-within {\n            // Cannot use `:focus-visible` here, since it is the radio button\n            // which gets focused, which is inside this element…\n            // and we are removing or hiding the visual appearance of the button\n            outline: none;\n            color: var(--mdc-theme-primary);\n        }\n\n        &:only-child {\n            .mdc-chip__text {\n                padding-left: functions.pxToRem(12);\n            }\n        }\n\n        &:first-child {\n            .mdc-chip__text {\n                padding-left: functions.pxToRem(12);\n            }\n        }\n    }\n\n    &.mdc-chip--selected {\n        background-color: var(--mdc-theme-surface);\n        box-shadow: var(--button-shadow-inset);\n\n        &:active {\n            box-shadow: var(--button-shadow-inset-pressed);\n        }\n    }\n}\n\n.mdc-chip__text {\n    font-size: functions.pxToRem(13);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: block;\n    padding: 0 functions.pxToRem(12) 0 functions.pxToRem(4);\n}\n\n.mdc-chip-set {\n    align-items: center;\n    border-radius: functions.pxToRem(60);\n    background-color: var(\n        --button-group-background-color,\n        rgb(var(--contrast-400))\n    );\n    padding: 0;\n\n    width: max-content;\n    max-width: 100%;\n\n    flex-wrap: nowrap; // Not sure about this. It'll put items on one row, but also can look bad on action bars. Kia\n\n    &.disabled {\n        @include shared_input-select-picker.looks-disabled;\n        pointer-events: none;\n    }\n}\n\nlimel-badge {\n    margin-right: 0.25rem;\n    pointer-events: none;\n}\n\n.mdc-chip:not(.mdc-chip--selected) {\n    --badge-background-color: rgb(var(--contrast-200));\n}\n","import {\n    Component,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { Button } from '../button/button.types';\nimport { createRandomString } from '../../util/random-string';\n\n/**\n * A button group control is a linear set of two or more buttons.\n *\n * ## Usage\n *\n * Button groups are often used to display different views of the same thing. A\n * common example of this component is when you switch between [ Map | Transit\n * | Satellite ] views to look at an area on the map.\n *\n * In some cases, button groups may serve as quick filters as well. For example\n * a list of contacts, in which the user can switch to [ All | Favorites\n * | Frequently contacted ] can incorporate a button group to quickly filter out\n * items and display subsets of them.\n *\n * ## Layout\n *\n * The button groups are usually placed in top headers and action bars,\n * sometimes with other elements. Since the group items will always be rendered\n * in a row, you must make sure not to have too many buttons in the group.\n * Because if the container of your button group does not get enough space to\n * fit in all its buttons, they will have to truncate their text and may appear\n * very cramped together. Always think about how your button group will appear\n * on a small screen such as phones.\n * :::note\n * Button can contain text or icons, but not both simultaneously!\n * :::\n *\n * Within the group, icon buttons will all have the same width, while each text button\n * inherits its width from its content.\n *\n * @exampleComponent limel-example-button-group-icons\n * @exampleComponent limel-example-button-group\n * @exampleComponent limel-example-button-group-mix\n * @exampleComponent limel-example-button-group-badges\n * @exampleComponent limel-example-button-group-composite\n */\n@Component({\n    tag: 'limel-button-group',\n    shadow: true,\n    styleUrl: 'button-group.scss',\n})\nexport class ButtonGroup {\n    /**\n     * List of buttons for the group\n     */\n    @Prop()\n    public value: Button[] = [];\n\n    /**\n     * True if the button-group should be disabled\n     */\n    @Prop({ reflect: true })\n    public disabled: boolean = false;\n\n    /**\n     * Dispatched when a button is selected/deselected\n     */\n    @Event()\n    private change: EventEmitter<Button>;\n\n    @State()\n    private selectedButtonId: string;\n\n    private radioGroupName = createRandomString();\n\n    constructor() {\n        this.renderButton = this.renderButton.bind(this);\n        this.onChange = this.onChange.bind(this);\n        this.renderContent = this.renderContent.bind(this);\n    }\n\n    public componentWillLoad() {\n        this.setSelectedButton();\n    }\n\n    public render() {\n        const classes = {\n            'mdc-chip-set': true,\n            disabled: this.disabled,\n            'mdc-chip-set--choice': true,\n        };\n\n        return (\n            <div class={classes} role=\"grid\">\n                {this.value.map(this.renderButton)}\n            </div>\n        );\n    }\n\n    private renderButton(button: Button) {\n        // Prefix with 'b' because html IDs cannot start with a digit,\n        // and we need to differentiate from the ID on the limel-icon. /Ads\n        const buttonId = `b${button.id}`;\n\n        const classes = {\n            'mdc-chip': true,\n            'mdc-chip--selected': this.isButtonChecked(button),\n        };\n\n        return (\n            <div class={classes} role=\"row\">\n                <span role=\"gridcell\">\n                    <input\n                        type=\"radio\"\n                        name={this.radioGroupName}\n                        checked={this.isButtonChecked(button)}\n                        id={buttonId}\n                        onChange={this.onChange}\n                    />\n                    <label htmlFor={buttonId}>\n                        {this.renderContent(button)}\n                        {this.renderBadge(button)}\n                    </label>\n                </span>\n            </div>\n        );\n    }\n\n    private renderContent(button: Button) {\n        if (button.icon) {\n            return this.renderIcon(button);\n        }\n\n        return this.renderLabel(button);\n    }\n\n    private isButtonChecked(button: Button) {\n        return button.id === this.selectedButtonId;\n    }\n\n    private renderLabel(button: Button) {\n        return <span class=\"mdc-chip__text\">{button.title}</span>;\n    }\n\n    private renderIcon(button: Button) {\n        // Prefix with 'i' because html IDs cannot start with a digit,\n        // and we need to differentiate from the \"buttonId\". /Ads\n        const iconId = `i${button.id}`;\n\n        return [\n            <limel-icon\n                id={iconId}\n                class=\"mdc-chip__icon\"\n                aria-label={button.title}\n                name={button.icon}\n                size=\"small\"\n                badge={true}\n            />,\n            <limel-tooltip elementId={iconId} label={button.title} />,\n        ];\n    }\n\n    private renderBadge(button: Button) {\n        if (!button.badge) {\n            return;\n        }\n\n        return <limel-badge label={button.badge} />;\n    }\n\n    private onChange(event: Event) {\n        event.stopPropagation();\n        const target = event.target as HTMLInputElement;\n        // The ID is prefixed with `b` in the HTML, remember? /Ads\n        this.selectedButtonId = target.id.slice(1);\n        const button = this.value.find((item) => {\n            return item.id === this.selectedButtonId;\n        });\n        this.change.emit(button);\n    }\n\n    private setSelectedButton = () => {\n        this.selectedButtonId = this.value.find((button) => {\n            return button.selected;\n        })?.id;\n    };\n\n    @Watch('value')\n    protected valueChanged() {\n        this.setSelectedButton();\n    }\n}\n"],"mappings":"iFAAA,MAAMA,EAAiB,gomB,MCqDVC,EAAW,MAwBpBC,YAAAC,G,yCAFQC,KAAAC,eAAiBC,IA4GjBF,KAAAG,kBAAoB,K,MACxBH,KAAKI,kBAAmBC,EAAAL,KAAKM,MAAMC,MAAMC,GAC9BA,EAAOC,cAChB,MAAAJ,SAAA,SAAAA,EAAEK,EAAE,E,WAhIe,G,cAME,M,gCAcvBV,KAAKW,aAAeX,KAAKW,aAAaC,KAAKZ,MAC3CA,KAAKa,SAAWb,KAAKa,SAASD,KAAKZ,MACnCA,KAAKc,cAAgBd,KAAKc,cAAcF,KAAKZ,K,CAG1Ce,oBACHf,KAAKG,mB,CAGFa,SACH,MAAMC,EAAU,CACZ,eAAgB,KAChBC,SAAUlB,KAAKkB,SACf,uBAAwB,MAG5B,OACIC,EAAA,OAAKC,MAAOH,EAASI,KAAK,QACrBrB,KAAKM,MAAMgB,IAAItB,KAAKW,c,CAKzBA,aAAaH,GAGjB,MAAMe,EAAW,IAAIf,EAAOE,KAE5B,MAAMO,EAAU,CACZ,WAAY,KACZ,qBAAsBjB,KAAKwB,gBAAgBhB,IAG/C,OACIW,EAAA,OAAKC,MAAOH,EAASI,KAAK,OACtBF,EAAA,QAAME,KAAK,YACPF,EAAA,SACIM,KAAK,QACLC,KAAM1B,KAAKC,eACX0B,QAAS3B,KAAKwB,gBAAgBhB,GAC9BE,GAAIa,EACJV,SAAUb,KAAKa,WAEnBM,EAAA,SAAOS,QAASL,GACXvB,KAAKc,cAAcN,GACnBR,KAAK6B,YAAYrB,K,CAO9BM,cAAcN,GAClB,GAAIA,EAAOsB,KAAM,CACb,OAAO9B,KAAK+B,WAAWvB,E,CAG3B,OAAOR,KAAKgC,YAAYxB,E,CAGpBgB,gBAAgBhB,GACpB,OAAOA,EAAOE,KAAOV,KAAKI,gB,CAGtB4B,YAAYxB,GAChB,OAAOW,EAAA,QAAMC,MAAM,kBAAkBZ,EAAOyB,M,CAGxCF,WAAWvB,GAGf,MAAM0B,EAAS,IAAI1B,EAAOE,KAE1B,MAAO,CACHS,EAAA,cACIT,GAAIwB,EACJd,MAAM,iBAAgB,aACVZ,EAAOyB,MACnBP,KAAMlB,EAAOsB,KACbK,KAAK,QACLC,MAAO,OAEXjB,EAAA,iBAAekB,UAAWH,EAAQI,MAAO9B,EAAOyB,Q,CAIhDJ,YAAYrB,GAChB,IAAKA,EAAO4B,MAAO,CACf,M,CAGJ,OAAOjB,EAAA,eAAamB,MAAO9B,EAAO4B,O,CAG9BvB,SAAS0B,GACbA,EAAMC,kBACN,MAAMC,EAASF,EAAME,OAErBzC,KAAKI,iBAAmBqC,EAAO/B,GAAGgC,MAAM,GACxC,MAAMlC,EAASR,KAAKM,MAAMC,MAAMoC,GACrBA,EAAKjC,KAAOV,KAAKI,mBAE5BJ,KAAK4C,OAAOC,KAAKrC,E,CAUXsC,eACN9C,KAAKG,mB"}