@limetech/lime-elements 37.2.8 → 37.4.0

package/dist/lime-elements/p-104120ab.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as i,H as d,g as l}from"./p-3075aa67.js";import{g as o}from"./p-2f777fdb.js";import{m as n,r as a}from"./p-fa37036b.js";import{t as r}from"./p-3ee3dcdc.js";import{D as c,B as m,i as f,j as s,k as h,l as x,m as p,n as g,a as u,d as b,E as _,c as v}from"./p-e03dfe70.js";import{g as w,a as y}from"./p-516619d3.js";import{M as k}from"./p-9ab3a908.js";import{i as z}from"./p-ade76f1d.js";import"./p-2ff3f85e.js";import"./p-11d5d44e.js";import"./p-dcc97cc2.js";import"./p-083d1db4.js";import"./p-eda23c05.js";import"./p-c93050d6.js";import"./p-4c3358cb.js";import"./p-0b1af919.js";import"./p-858c6b82.js";import"./p-9acf7b5d.js";const Y='@charset "UTF-8";:host(limel-chip){--limel-chip-height:1.75rem;--limel-chip-gap:0.5rem;isolation:isolate;display:inline-flex;align-items:center;min-width:0}*{box-sizing:border-box}.chip{all:unset;position:relative;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;max-width:var(--chip-max-width, 10rem);height:var(--limel-chip-height);border-radius:var(--limel-chip-height);font-size:0.875rem;padding:0 0.125rem}.chip:has(limel-icon) .text{padding-left:0.25rem}.chip:not([disabled]){transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}.chip:not([disabled]):focus{outline:none}.chip:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.chip:not([disabled]):hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.chip:not([disabled]):active{background-color:var(--mdc-theme-surface);box-shadow:var(--button-shadow-inset-pressed);transform:translate3d(0, 0.05rem, 0)}.chip:has(limel-badge){padding-right:0.375rem}.chip:has(limel-badge) .text{padding-right:0}.chip:has(+.remove-button:hover){box-shadow:var(--shadow-depth-8-error)}.chip:has(+.trailing-button){padding-right:calc(var(--limel-chip-height) + 0.125rem)}.chip:has(+.trailing-button) .text{padding-right:0}:host(limel-chip[disabled]) .chip{color:rgba(var(--contrast-1600), 0.37);background-color:rgba(var(--contrast-1600), 0.1);box-shadow:none}:host(limel-chip[readonly]) .chip{box-shadow:0 0 0 1px rgba(var(--contrast-800), 0.5)}:host(limel-chip[selected]) .chip{box-shadow:var(--button-shadow-inset)}:host(limel-chip[selected]) .chip:focus-visible{box-shadow:var(--button-shadow-inset), var(--shadow-depth-8-focused)}:host(limel-chip[selected]) .chip:active{box-shadow:var(--button-shadow-inset-pressed)}:host(limel-chip[selected]) .text{color:var(--mdc-theme-primary)}:host(limel-chip[type=filter]) .chip{border-top-left-radius:0.5rem;border-bottom-left-radius:0.5rem}:host(limel-chip[type=filter]) .chip:after{content:"";transition:background-color 0.4s ease 0.2s, box-shadow 0.6s ease 0.2s;box-sizing:border-box;position:absolute;bottom:0.125rem;left:0.125rem;width:0.5rem;height:0.5rem;border-radius:50%;background-color:rgb(var(--contrast-800), 0.8);box-shadow:0 0 0 1px rgb(var(--color-white)) inset}:host(limel-chip[type=filter][selected]) .chip:after{background-color:rgb(var(--color-green-default));box-shadow:0 0 0.375rem 0 rgb(var(--color-green-light)), 0 0 0 1px rgb(var(--color-white)) inset}limel-icon{flex-shrink:0;width:calc(var(--limel-chip-height) - 0.25rem);height:calc(var(--limel-chip-height) - 0.25rem);padding:0.0625rem}limel-badge{pointer-events:none}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.2;padding:0 0.5rem}.trailing-button{all:unset;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:transparent;z-index:1;flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-left:calc(var(--limel-chip-height) * -1 + 0.125rem);margin-right:0.125rem;width:calc(var(--limel-chip-height) - 0.25rem);height:calc(var(--limel-chip-height) - 0.25rem);border-radius:50%}.trailing-button:hover{color:rgb(var(--color-red-dark));background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.trailing-button:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.trailing-button svg{transition:color 0.2s ease, transform 0.2s ease;width:1.25rem}.trailing-button:hover svg{transform:scale(0.8)}';const C=class{constructor(d){t(this,d);this.remove=e(this,"remove",7);this.renderAsButton=()=>[i("button",{id:"chip-"+this.identifier,class:"chip",role:"button",disabled:this.disabled||this.readonly,onKeyDown:this.handleDeleteKeyDown},this.renderIcon(),this.renderLabel(),this.renderBadge()),this.renderRemoveButton()];this.renderAsLink=()=>[i("a",{id:"chip-"+this.identifier,class:"chip",href:this.link.href,title:this.link.title,target:this.link.target,"aria-disabled":this.disabled||this.readonly,tabindex:this.disabled||this.readonly?-1:0,onKeyDown:this.handleDeleteKeyDown},this.renderIcon(),this.renderLabel(),this.renderBadge()),this.renderRemoveButton()];this.renderLabel=()=>i("span",{class:"text"},this.text);this.filterClickWhenDisabled=t=>{if(this.disabled||this.readonly){t.preventDefault()}};this.handleRemoveClick=t=>{t.stopPropagation();this.remove.emit(this.identifier)};this.handleDeleteKeyDown=t=>{if(!this.removable){return}const e=[c,m];const i=[f,s];if(e.includes(t.key)||i.includes(t.keyCode)){this.handleRemoveClick(t)}};this.removeChipLabel=()=>r.get("chip-set.remove-chip",this.language);this.language="en";this.text=undefined;this.icon=undefined;this.link=undefined;this.badge=undefined;this.disabled=false;this.readonly=false;this.selected=false;this.removable=false;this.type="default";this.identifier=crypto.randomUUID()}componentWillLoad(){n(this.host)}disconnectedCallback(){a(this.host)}render(){return i(d,{onClick:this.filterClickWhenDisabled},this.link?this.renderAsLink():this.renderAsButton())}renderIcon(){var t,e;const d=o(this.icon);if(!d){return}return i("limel-icon",{badge:true,name:d,style:{color:`${(t=this.icon)===null||t===void 0?void 0:t.color}`,"background-color":`${(e=this.icon)===null||e===void 0?void 0:e.backgroundColor}`}})}renderBadge(){if(!this.badge){return}return i("limel-badge",{label:this.badge})}renderRemoveButton(){if(!this.removable||this.readonly||this.disabled){return}const t='<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="currentColor" stroke-width="2" d="m8 8 16 16M24 8 8 24"/></svg>';return i("button",{class:"trailing-button remove-button",tabIndex:-1,"aria-label":this.removeChipLabel,"aria-controls":"chip-"+this.identifier,innerHTML:t,onClick:this.handleRemoveClick})}get host(){return l(this)}};C.style=Y;function X(t){if(this.textValue.length){return}if(!this.value||!this.value.length){return}const e=t.key===h||t.keyCode===x;const i=t.key===p||t.keyCode===g;const d=t.key===u||t.keyCode===b;const l=t.key===c||t.keyCode===f;const o=t.key===m||t.keyCode===s;const n=t.key===_||t.keyCode===v;if(e){return j(this,t)}if(i){return T(this,t)}if(d){return I(this,t)}if(l){return G(this,t)}if(o){return B(this,t)}if(n){return F(this,t)}}function j(t,e){e.preventDefault();if(t.inputChipIndexSelected===null){t.inputChipIndexSelected=t.value.length-1;return}if(t.inputChipIndexSelected<=0){return}t.inputChipIndexSelected-=1}function T(t,e){e.preventDefault();if(t.inputChipIndexSelected===null){t.inputChipIndexSelected=0;return}if(t.inputChipIndexSelected>=t.value.length-1){return}t.inputChipIndexSelected+=1}function I(t,e){if(t.inputChipIndexSelected!==null){e.preventDefault();t.emitInteraction(t.value[t.inputChipIndexSelected])}}function F(t,e){if(t.inputChipIndexSelected!==null){e.preventDefault();t.inputChipIndexSelected=null}}function G(t,e){if(t.inputChipIndexSelected!==null){e.preventDefault();L(t)}}function B(t,e){if(t.inputChipIndexSelected!==null){e.preventDefault();L(t)}else if(!e.repeat){t.inputChipIndexSelected=t.value.length-1}}function L(t){if(t.inputChipIndexSelected!==null){t.removeChip(t.value[t.inputChipIndexSelected].id);t.inputChipIndexSelected=null}}const D='@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-notched-outline{display:flex;position:absolute;top:0;right:0;left:0;box-sizing:border-box;width:100%;max-width:100%;height:100%;text-align:left;pointer-events:none}[dir=rtl] .mdc-notched-outline,.mdc-notched-outline[dir=rtl]{text-align:right;}.mdc-notched-outline__leading,.mdc-notched-outline__notch,.mdc-notched-outline__trailing{box-sizing:border-box;height:100%;border-top:1px solid;border-bottom:1px solid;pointer-events:none}.mdc-notched-outline__leading{border-left:1px solid;border-right:none;width:12px}[dir=rtl] .mdc-notched-outline__leading,.mdc-notched-outline__leading[dir=rtl]{border-left:none;border-right:1px solid;}.mdc-notched-outline__trailing{border-left:none;border-right:1px solid;flex-grow:1}[dir=rtl] .mdc-notched-outline__trailing,.mdc-notched-outline__trailing[dir=rtl]{border-left:1px solid;border-right:none;}.mdc-notched-outline__notch{flex:0 0 auto;width:auto;max-width:calc(100% - 12px * 2)}.mdc-notched-outline .mdc-floating-label{display:inline-block;position:relative;max-width:100%}.mdc-notched-outline .mdc-floating-label--float-above{text-overflow:clip}.mdc-notched-outline--upgraded .mdc-floating-label--float-above{max-width:133.3333333333%}.mdc-notched-outline--notched .mdc-notched-outline__notch{padding-left:0;padding-right:8px;border-top:none}[dir=rtl] .mdc-notched-outline--notched .mdc-notched-outline__notch,.mdc-notched-outline--notched .mdc-notched-outline__notch[dir=rtl]{padding-left:8px;padding-right:0;}.mdc-notched-outline--no-label .mdc-notched-outline__notch{display:none}.mdc-floating-label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, inherit));font-size:0.875rem;font-size:var(--mdc-typography-subtitle1-font-size, 0.875rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight, 400);letter-spacing:0.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);text-decoration:inherit;text-decoration:var(--mdc-typography-subtitle1-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform, inherit);position:absolute;left:0;-webkit-transform-origin:left top;transform-origin:left top;line-height:1.15rem;text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:text;overflow:hidden;will-change:transform;transition:transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1)}[dir=rtl] .mdc-floating-label,.mdc-floating-label[dir=rtl]{right:0;left:auto;-webkit-transform-origin:right top;transform-origin:right top;text-align:right;}.mdc-floating-label--float-above{cursor:auto}.mdc-floating-label--required::after{margin-left:1px;margin-right:0px;content:"*"}[dir=rtl] .mdc-floating-label--required,.mdc-floating-label--required[dir=rtl]{}[dir=rtl] .mdc-floating-label--required::after,.mdc-floating-label--required[dir=rtl]::after{margin-left:0;margin-right:1px}.mdc-floating-label--float-above{transform:translateY(-106%) scale(0.75)}.mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-standard 250ms 1}@keyframes mdc-floating-label-shake-float-above-standard{0%{transform:translateX(calc(0 - 0%)) translateY(-106%) scale(0.75)}33%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(calc(4% - 0%)) translateY(-106%) scale(0.75)}66%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(calc(-4% - 0%)) translateY(-106%) scale(0.75)}100%{transform:translateX(calc(0 - 0%)) translateY(-106%) scale(0.75)}}@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-text-field--filled{--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-text-field--filled .mdc-text-field__ripple::before,.mdc-text-field--filled .mdc-text-field__ripple::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-text-field--filled .mdc-text-field__ripple::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-text-field--filled .mdc-text-field__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-text-field--filled.mdc-ripple-upgraded .mdc-text-field__ripple::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-text-field--filled.mdc-ripple-upgraded .mdc-text-field__ripple::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-text-field--filled.mdc-ripple-upgraded--unbounded .mdc-text-field__ripple::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-text-field--filled.mdc-ripple-upgraded--foreground-activation .mdc-text-field__ripple::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.mdc-text-field--filled.mdc-ripple-upgraded--foreground-deactivation .mdc-text-field__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-text-field--filled .mdc-text-field__ripple::before,.mdc-text-field--filled .mdc-text-field__ripple::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-text-field--filled.mdc-ripple-upgraded .mdc-text-field__ripple::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-text-field__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.mdc-text-field{border-top-left-radius:4px;border-top-left-radius:var(--mdc-shape-small, 4px);border-top-right-radius:4px;border-top-right-radius:var(--mdc-shape-small, 4px);border-bottom-right-radius:0;border-bottom-left-radius:0;display:inline-flex;align-items:baseline;padding:0 16px;position:relative;box-sizing:border-box;overflow:hidden;will-change:opacity, transform, color}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label{color:rgba(0, 0, 0, 0.6)}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input{color:rgba(0, 0, 0, 0.87)}@media all{.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input::placeholder{color:rgba(0, 0, 0, 0.54)}}@media all{.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input:-ms-input-placeholder{color:rgba(0, 0, 0, 0.54)}}.mdc-text-field .mdc-text-field__input{caret-color:#26a69a;caret-color:var(--mdc-theme-primary, #26a69a)}.mdc-text-field:not(.mdc-text-field--disabled)+.mdc-text-field-helper-line .mdc-text-field-helper-text{color:rgba(0, 0, 0, 0.6)}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field-character-counter,.mdc-text-field:not(.mdc-text-field--disabled)+.mdc-text-field-helper-line .mdc-text-field-character-counter{color:rgba(0, 0, 0, 0.6)}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon--leading{color:rgba(0, 0, 0, 0.54)}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon--trailing{color:rgba(0, 0, 0, 0.54)}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__affix--prefix{color:rgba(0, 0, 0, 0.6)}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__affix--suffix{color:rgba(0, 0, 0, 0.6)}.mdc-text-field .mdc-floating-label{top:50%;transform:translateY(-50%);pointer-events:none}.mdc-text-field__input{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, inherit));font-size:0.875rem;font-size:var(--mdc-typography-subtitle1-font-size, 0.875rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight, 400);letter-spacing:0.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);text-decoration:inherit;text-decoration:var(--mdc-typography-subtitle1-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform, inherit);height:28px;transition:opacity 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);width:100%;min-width:0;border:none;border-radius:0;background:none;appearance:none;padding:0}.mdc-text-field__input::-ms-clear{display:none}.mdc-text-field__input::-webkit-calendar-picker-indicator{display:none}.mdc-text-field__input:focus{outline:none}.mdc-text-field__input:invalid{box-shadow:none}@media all{.mdc-text-field__input::placeholder{transition:opacity 67ms 0ms cubic-bezier(0.4, 0, 0.2, 1);opacity:0}}@media all{.mdc-text-field__input:-ms-input-placeholder{transition:opacity 67ms 0ms cubic-bezier(0.4, 0, 0.2, 1);opacity:0}}@media all{.mdc-text-field--no-label .mdc-text-field__input::placeholder,.mdc-text-field--focused .mdc-text-field__input::placeholder{transition-delay:40ms;transition-duration:110ms;opacity:1}}@media all{.mdc-text-field--no-label .mdc-text-field__input:-ms-input-placeholder,.mdc-text-field--focused .mdc-text-field__input:-ms-input-placeholder{transition-delay:40ms;transition-duration:110ms;opacity:1}}.mdc-text-field__affix{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, inherit));font-size:0.875rem;font-size:var(--mdc-typography-subtitle1-font-size, 0.875rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight, 400);letter-spacing:0.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);text-decoration:inherit;text-decoration:var(--mdc-typography-subtitle1-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform, inherit);height:28px;transition:opacity 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);opacity:0;white-space:nowrap}.mdc-text-field--label-floating .mdc-text-field__affix,.mdc-text-field--no-label .mdc-text-field__affix{opacity:1}@supports (-webkit-hyphens: none){.mdc-text-field--outlined .mdc-text-field__affix{align-items:center;align-self:center;display:inline-flex;height:100%}}.mdc-text-field__affix--prefix{padding-left:0;padding-right:2px}[dir=rtl] .mdc-text-field__affix--prefix,.mdc-text-field__affix--prefix[dir=rtl]{padding-left:2px;padding-right:0;}.mdc-text-field--end-aligned .mdc-text-field__affix--prefix{padding-left:0;padding-right:12px}[dir=rtl] .mdc-text-field--end-aligned .mdc-text-field__affix--prefix,.mdc-text-field--end-aligned .mdc-text-field__affix--prefix[dir=rtl]{padding-left:12px;padding-right:0;}.mdc-text-field__affix--suffix{padding-left:12px;padding-right:0}[dir=rtl] .mdc-text-field__affix--suffix,.mdc-text-field__affix--suffix[dir=rtl]{padding-left:0;padding-right:12px;}.mdc-text-field--end-aligned .mdc-text-field__affix--suffix{padding-left:2px;padding-right:0}[dir=rtl] .mdc-text-field--end-aligned .mdc-text-field__affix--suffix,.mdc-text-field--end-aligned .mdc-text-field__affix--suffix[dir=rtl]{padding-left:0;padding-right:2px;}.mdc-text-field--filled{height:56px}.mdc-text-field--filled .mdc-text-field__ripple::before,.mdc-text-field--filled .mdc-text-field__ripple::after{background-color:rgba(0, 0, 0, 0.87);background-color:var(--mdc-ripple-color, rgba(0, 0, 0, 0.87))}.mdc-text-field--filled:hover .mdc-text-field__ripple::before,.mdc-text-field--filled.mdc-ripple-surface--hover .mdc-text-field__ripple::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-text-field--filled.mdc-ripple-upgraded--background-focused .mdc-text-field__ripple::before,.mdc-text-field--filled:not(.mdc-ripple-upgraded):focus .mdc-text-field__ripple::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-text-field--filled::before{display:inline-block;width:0;height:40px;content:"";vertical-align:0}.mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:whitesmoke}.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::before{border-bottom-color:rgba(0, 0, 0, 0.42)}.mdc-text-field--filled:not(.mdc-text-field--disabled):hover .mdc-line-ripple::before{border-bottom-color:rgba(0, 0, 0, 0.87)}.mdc-text-field--filled .mdc-line-ripple::after{border-bottom-color:#26a69a;border-bottom-color:var(--mdc-theme-primary, #26a69a)}.mdc-text-field--filled .mdc-floating-label{left:16px;right:initial}[dir=rtl] .mdc-text-field--filled .mdc-floating-label,.mdc-text-field--filled .mdc-floating-label[dir=rtl]{left:initial;right:16px;}.mdc-text-field--filled .mdc-floating-label--float-above{transform:translateY(-106%) scale(0.75)}.mdc-text-field--filled.mdc-text-field--no-label .mdc-text-field__input{height:100%}.mdc-text-field--filled.mdc-text-field--no-label .mdc-floating-label{display:none}.mdc-text-field--filled.mdc-text-field--no-label::before{display:none}@supports (-webkit-hyphens: none){.mdc-text-field--filled.mdc-text-field--no-label .mdc-text-field__affix{align-items:center;align-self:center;display:inline-flex;height:100%}}.mdc-text-field--outlined{height:56px;overflow:visible}.mdc-text-field--outlined .mdc-floating-label--float-above{transform:translateY(-37.25px) scale(1)}.mdc-text-field--outlined .mdc-floating-label--float-above{font-size:0.75rem}.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{transform:translateY(-34.75px) scale(0.75)}.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{font-size:1rem}.mdc-text-field--outlined .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-text-field-outlined 250ms 1}@keyframes mdc-floating-label-shake-float-above-text-field-outlined{0%{transform:translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75)}33%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(calc(4% - 0%)) translateY(-34.75px) scale(0.75)}66%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(calc(-4% - 0%)) translateY(-34.75px) scale(0.75)}100%{transform:translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75)}}.mdc-text-field--outlined .mdc-text-field__input{height:100%}.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing{border-color:rgba(0, 0, 0, 0.38)}.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:rgba(0, 0, 0, 0.87)}.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border-color:#26a69a;border-color:var(--mdc-theme-primary, #26a69a)}.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading{border-top-left-radius:4px;border-top-left-radius:var(--mdc-shape-small, 4px);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:4px;border-bottom-left-radius:var(--mdc-shape-small, 4px)}[dir=rtl] .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading,.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading[dir=rtl]{border-top-left-radius:0;border-top-right-radius:4px;border-top-right-radius:var(--mdc-shape-small, 4px);border-bottom-right-radius:4px;border-bottom-right-radius:var(--mdc-shape-small, 4px);border-bottom-left-radius:0;}@supports (top: max(0%)){.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading{width:max(12px, var(--mdc-shape-small, 4px))}}@supports (top: max(0%)){.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch{max-width:calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2)}}.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing{border-top-left-radius:0;border-top-right-radius:4px;border-top-right-radius:var(--mdc-shape-small, 4px);border-bottom-right-radius:4px;border-bottom-right-radius:var(--mdc-shape-small, 4px);border-bottom-left-radius:0}[dir=rtl] .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing,.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing[dir=rtl]{border-top-left-radius:4px;border-top-left-radius:var(--mdc-shape-small, 4px);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:4px;border-bottom-left-radius:var(--mdc-shape-small, 4px);}@supports (top: max(0%)){.mdc-text-field--outlined{padding-left:max(16px, calc(var(--mdc-shape-small, 4px) + 4px))}}@supports (top: max(0%)){.mdc-text-field--outlined{padding-right:max(16px, var(--mdc-shape-small, 4px))}}@supports (top: max(0%)){.mdc-text-field--outlined+.mdc-text-field-helper-line{padding-left:max(16px, calc(var(--mdc-shape-small, 4px) + 4px))}}@supports (top: max(0%)){.mdc-text-field--outlined+.mdc-text-field-helper-line{padding-right:max(16px, var(--mdc-shape-small, 4px))}}.mdc-text-field--outlined.mdc-text-field--with-leading-icon{padding-left:0}@supports (top: max(0%)){.mdc-text-field--outlined.mdc-text-field--with-leading-icon{padding-right:max(16px, var(--mdc-shape-small, 4px))}}[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-leading-icon,.mdc-text-field--outlined.mdc-text-field--with-leading-icon[dir=rtl]{padding-right:0;}@supports (top: max(0%)){[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-leading-icon,.mdc-text-field--outlined.mdc-text-field--with-leading-icon[dir=rtl]{padding-left:max(16px, var(--mdc-shape-small, 4px))}}.mdc-text-field--outlined.mdc-text-field--with-trailing-icon{padding-right:0}@supports (top: max(0%)){.mdc-text-field--outlined.mdc-text-field--with-trailing-icon{padding-left:max(16px, calc(var(--mdc-shape-small, 4px) + 4px))}}[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-trailing-icon,.mdc-text-field--outlined.mdc-text-field--with-trailing-icon[dir=rtl]{padding-left:0;}@supports (top: max(0%)){[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-trailing-icon,.mdc-text-field--outlined.mdc-text-field--with-trailing-icon[dir=rtl]{padding-right:max(16px, calc(var(--mdc-shape-small, 4px) + 4px))}}.mdc-text-field--outlined.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon{padding-left:0;padding-right:0}.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch{padding-top:1px}.mdc-text-field--outlined .mdc-text-field__ripple::before,.mdc-text-field--outlined .mdc-text-field__ripple::after{content:none}.mdc-text-field--outlined .mdc-floating-label{left:4px;right:initial}[dir=rtl] .mdc-text-field--outlined .mdc-floating-label,.mdc-text-field--outlined .mdc-floating-label[dir=rtl]{left:initial;right:4px;}.mdc-text-field--outlined .mdc-text-field__input{display:flex;border:none !important;background-color:transparent}.mdc-text-field--outlined .mdc-notched-outline{z-index:1}.mdc-text-field--textarea{flex-direction:column;align-items:center;width:auto;height:auto;padding:0;transition:none}.mdc-text-field--textarea .mdc-floating-label{top:19px}.mdc-text-field--textarea .mdc-floating-label:not(.mdc-floating-label--float-above){transform:none}.mdc-text-field--textarea .mdc-text-field__input{flex-grow:1;height:auto;min-height:1.5rem;overflow-x:hidden;overflow-y:auto;box-sizing:border-box;resize:none;padding:0 16px;line-height:1.5rem}.mdc-text-field--textarea.mdc-text-field--filled::before{display:none}.mdc-text-field--textarea.mdc-text-field--filled .mdc-floating-label--float-above{transform:translateY(-10.25px) scale(0.75)}.mdc-text-field--textarea.mdc-text-field--filled .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-textarea-filled 250ms 1}@keyframes mdc-floating-label-shake-float-above-textarea-filled{0%{transform:translateX(calc(0 - 0%)) translateY(-10.25px) scale(0.75)}33%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(calc(4% - 0%)) translateY(-10.25px) scale(0.75)}66%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(calc(-4% - 0%)) translateY(-10.25px) scale(0.75)}100%{transform:translateX(calc(0 - 0%)) translateY(-10.25px) scale(0.75)}}.mdc-text-field--textarea.mdc-text-field--filled .mdc-text-field__input{margin-top:23px;margin-bottom:9px}.mdc-text-field--textarea.mdc-text-field--filled.mdc-text-field--no-label .mdc-text-field__input{margin-top:16px;margin-bottom:16px}.mdc-text-field--textarea.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch{padding-top:0}.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label--float-above{transform:translateY(-27.25px) scale(1)}.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label--float-above{font-size:0.75rem}.mdc-text-field--textarea.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-text-field--textarea.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{transform:translateY(-24.75px) scale(0.75)}.mdc-text-field--textarea.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-text-field--textarea.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{font-size:1rem}.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-textarea-outlined 250ms 1}@keyframes mdc-floating-label-shake-float-above-textarea-outlined{0%{transform:translateX(calc(0 - 0%)) translateY(-24.75px) scale(0.75)}33%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(calc(4% - 0%)) translateY(-24.75px) scale(0.75)}66%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(calc(-4% - 0%)) translateY(-24.75px) scale(0.75)}100%{transform:translateX(calc(0 - 0%)) translateY(-24.75px) scale(0.75)}}.mdc-text-field--textarea.mdc-text-field--outlined .mdc-text-field__input{margin-top:16px;margin-bottom:16px}.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label{top:18px}.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field__input{margin-bottom:2px}.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field-character-counter{align-self:flex-end;padding:0 16px}.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field-character-counter::after{display:inline-block;width:0;height:16px;content:"";vertical-align:-16px}.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field-character-counter::before{display:none}.mdc-text-field__resizer{align-self:stretch;display:inline-flex;flex-direction:column;flex-grow:1;max-height:100%;max-width:100%;min-height:56px;min-width:fit-content;min-width:-moz-available;min-width:-webkit-fill-available;overflow:hidden;resize:both}.mdc-text-field--filled .mdc-text-field__resizer{transform:translateY(-1px)}.mdc-text-field--filled .mdc-text-field__resizer .mdc-text-field__input,.mdc-text-field--filled .mdc-text-field__resizer .mdc-text-field-character-counter{transform:translateY(1px)}.mdc-text-field--outlined .mdc-text-field__resizer{transform:translateX(-1px) translateY(-1px)}[dir=rtl] .mdc-text-field--outlined .mdc-text-field__resizer,.mdc-text-field--outlined .mdc-text-field__resizer[dir=rtl]{transform:translateX(1px) translateY(-1px);}.mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field__input,.mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field-character-counter{transform:translateX(1px) translateY(1px)}[dir=rtl] .mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field__input,[dir=rtl] .mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field-character-counter,.mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field__input[dir=rtl],.mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field-character-counter[dir=rtl]{transform:translateX(-1px) translateY(1px);}.mdc-text-field--with-leading-icon{padding-left:0;padding-right:16px}[dir=rtl] .mdc-text-field--with-leading-icon,.mdc-text-field--with-leading-icon[dir=rtl]{padding-left:16px;padding-right:0;}.mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label{max-width:calc(100% - 48px);left:48px;right:initial}[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label,.mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label[dir=rtl]{left:initial;right:48px;}.mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label--float-above{max-width:calc(100% / 0.75 - 64px / 0.75)}.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label{left:36px;right:initial}[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label,.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label[dir=rtl]{left:initial;right:36px;}.mdc-text-field--with-leading-icon.mdc-text-field--outlined :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch{max-width:calc(100% - 60px)}.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above{transform:translateY(-37.25px) translateX(-32px) scale(1)}[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above,.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above[dir=rtl]{transform:translateY(-37.25px) translateX(32px) scale(1);}.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above{font-size:0.75rem}.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{transform:translateY(-34.75px) translateX(-32px) scale(0.75)}[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above[dir=rtl],.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above[dir=rtl]{transform:translateY(-34.75px) translateX(32px) scale(0.75);}.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{font-size:1rem}.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-text-field-outlined-leading-icon 250ms 1}@keyframes mdc-floating-label-shake-float-above-text-field-outlined-leading-icon{0%{transform:translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75)}33%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(calc(4% - 32px)) translateY(-34.75px) scale(0.75)}66%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(calc(-4% - 32px)) translateY(-34.75px) scale(0.75)}100%{transform:translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75)}}[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined,.mdc-text-field--with-leading-icon.mdc-text-field--outlined[dir=rtl]{}[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--shake,.mdc-text-field--with-leading-icon.mdc-text-field--outlined[dir=rtl] .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-text-field-outlined-leading-icon 250ms 1}@keyframes mdc-floating-label-shake-float-above-text-field-outlined-leading-icon-rtl{0%{transform:translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75)}33%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(calc(4% - -32px)) translateY(-34.75px) scale(0.75)}66%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(calc(-4% - -32px)) translateY(-34.75px) scale(0.75)}100%{transform:translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75)}}.mdc-text-field--with-trailing-icon{padding-left:16px;padding-right:0}[dir=rtl] .mdc-text-field--with-trailing-icon,.mdc-text-field--with-trailing-icon[dir=rtl]{padding-left:0;padding-right:16px;}.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label{max-width:calc(100% - 64px)}.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label--float-above{max-width:calc(100% / 0.75 - 64px / 0.75)}.mdc-text-field--with-trailing-icon.mdc-text-field--outlined :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch{max-width:calc(100% - 60px)}.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon{padding-left:0;padding-right:0}.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label{max-width:calc(100% - 96px)}.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label--float-above{max-width:calc(100% / 0.75 - 96px / 0.75)}.mdc-text-field-helper-line{display:flex;justify-content:space-between;box-sizing:border-box}.mdc-text-field+.mdc-text-field-helper-line{padding-right:16px;padding-left:16px}.mdc-form-field>.mdc-text-field+label{align-self:flex-start}.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label{color:rgba(38, 166, 154, 0.87)}.mdc-text-field--focused .mdc-notched-outline__leading,.mdc-text-field--focused .mdc-notched-outline__notch,.mdc-text-field--focused .mdc-notched-outline__trailing{border-width:2px}.mdc-text-field--focused+.mdc-text-field-helper-line .mdc-text-field-helper-text:not(.mdc-text-field-helper-text--validation-msg){opacity:1}.mdc-text-field--focused.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch{padding-top:2px}.mdc-text-field--focused.mdc-text-field--outlined.mdc-text-field--textarea .mdc-notched-outline--notched .mdc-notched-outline__notch{padding-top:0}.mdc-text-field--invalid:not(.mdc-text-field--disabled):hover .mdc-line-ripple::before,.force-invalid:not(.mdc-text-field--disabled):hover .mdc-line-ripple::before{border-bottom-color:#b00020;border-bottom-color:var(--mdc-theme-error, #b00020)}.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple::after,.force-invalid:not(.mdc-text-field--disabled) .mdc-line-ripple::after{border-bottom-color:#b00020;border-bottom-color:var(--mdc-theme-error, #b00020)}.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-floating-label,.force-invalid:not(.mdc-text-field--disabled) .mdc-floating-label{color:#b00020;color:var(--mdc-theme-error, #b00020)}.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--invalid+.mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg,.force-invalid:not(.mdc-text-field--disabled)+.mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg{color:#b00020;color:var(--mdc-theme-error, #b00020)}.mdc-text-field--invalid .mdc-text-field__input,.force-invalid .mdc-text-field__input{caret-color:#b00020;caret-color:var(--mdc-theme-error, #b00020)}.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-text-field__icon--trailing,.force-invalid:not(.mdc-text-field--disabled) .mdc-text-field__icon--trailing{color:#b00020;color:var(--mdc-theme-error, #b00020)}.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple::before,.force-invalid:not(.mdc-text-field--disabled) .mdc-line-ripple::before{border-bottom-color:#b00020;border-bottom-color:var(--mdc-theme-error, #b00020)}.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,.force-invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,.force-invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing,.force-invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing{border-color:#b00020;border-color:var(--mdc-theme-error, #b00020)}.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,.force-invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,.force-invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing,.force-invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#b00020;border-color:var(--mdc-theme-error, #b00020)}.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,.force-invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,.force-invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing,.force-invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border-color:#b00020;border-color:var(--mdc-theme-error, #b00020)}.mdc-text-field--invalid+.mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg,.force-invalid+.mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg{opacity:1}.mdc-text-field--disabled{pointer-events:none}.mdc-text-field--disabled .mdc-text-field__input{color:rgba(0, 0, 0, 0.38)}@media all{.mdc-text-field--disabled .mdc-text-field__input::placeholder{color:rgba(0, 0, 0, 0.38)}}@media all{.mdc-text-field--disabled .mdc-text-field__input:-ms-input-placeholder{color:rgba(0, 0, 0, 0.38)}}.mdc-text-field--disabled .mdc-floating-label{color:rgba(0, 0, 0, 0.38)}.mdc-text-field--disabled+.mdc-text-field-helper-line .mdc-text-field-helper-text{color:rgba(0, 0, 0, 0.38)}.mdc-text-field--disabled .mdc-text-field-character-counter,.mdc-text-field--disabled+.mdc-text-field-helper-line .mdc-text-field-character-counter{color:rgba(0, 0, 0, 0.38)}.mdc-text-field--disabled .mdc-text-field__icon--leading{color:rgba(0, 0, 0, 0.3)}.mdc-text-field--disabled .mdc-text-field__icon--trailing{color:rgba(0, 0, 0, 0.3)}.mdc-text-field--disabled .mdc-text-field__affix--prefix{color:rgba(0, 0, 0, 0.38)}.mdc-text-field--disabled .mdc-text-field__affix--suffix{color:rgba(0, 0, 0, 0.38)}.mdc-text-field--disabled .mdc-line-ripple::before{border-bottom-color:rgba(0, 0, 0, 0.06)}.mdc-text-field--disabled .mdc-notched-outline__leading,.mdc-text-field--disabled .mdc-notched-outline__notch,.mdc-text-field--disabled .mdc-notched-outline__trailing{border-color:rgba(0, 0, 0, 0.06)}@media screen and (forced-colors: active), (-ms-high-contrast: active){.mdc-text-field--disabled .mdc-text-field__input::placeholder{color:GrayText}}@media screen and (forced-colors: active), (-ms-high-contrast: active){.mdc-text-field--disabled .mdc-text-field__input:-ms-input-placeholder{color:GrayText}}@media screen and (forced-colors: active), (-ms-high-contrast: active){.mdc-text-field--disabled .mdc-floating-label{color:GrayText}}@media screen and (forced-colors: active), (-ms-high-contrast: active){.mdc-text-field--disabled+.mdc-text-field-helper-line .mdc-text-field-helper-text{color:GrayText}}@media screen and (forced-colors: active), (-ms-high-contrast: active){.mdc-text-field--disabled .mdc-text-field-character-counter,.mdc-text-field--disabled+.mdc-text-field-helper-line .mdc-text-field-character-counter{color:GrayText}}@media screen and (forced-colors: active), (-ms-high-contrast: active){.mdc-text-field--disabled .mdc-text-field__icon--leading{color:GrayText}}@media screen and (forced-colors: active), (-ms-high-contrast: active){.mdc-text-field--disabled .mdc-text-field__icon--trailing{color:GrayText}}@media screen and (forced-colors: active), (-ms-high-contrast: active){.mdc-text-field--disabled .mdc-text-field__affix--prefix{color:GrayText}}@media screen and (forced-colors: active), (-ms-high-contrast: active){.mdc-text-field--disabled .mdc-text-field__affix--suffix{color:GrayText}}@media screen and (forced-colors: active), (-ms-high-contrast: active){.mdc-text-field--disabled .mdc-line-ripple::before{border-bottom-color:GrayText}}@media screen and (forced-colors: active), (-ms-high-contrast: active){.mdc-text-field--disabled .mdc-notched-outline__leading,.mdc-text-field--disabled .mdc-notched-outline__notch,.mdc-text-field--disabled .mdc-notched-outline__trailing{border-color:GrayText}}@media screen and (forced-colors: active){.mdc-text-field--disabled .mdc-text-field__input{background-color:Window}.mdc-text-field--disabled .mdc-floating-label{z-index:1}}.mdc-text-field--disabled .mdc-floating-label{cursor:default}.mdc-text-field--disabled.mdc-text-field--filled{background-color:#fafafa}.mdc-text-field--disabled.mdc-text-field--filled .mdc-text-field__ripple{display:none}.mdc-text-field--disabled .mdc-text-field__input{pointer-events:auto}.mdc-text-field--end-aligned .mdc-text-field__input{text-align:right}[dir=rtl] .mdc-text-field--end-aligned .mdc-text-field__input,.mdc-text-field--end-aligned .mdc-text-field__input[dir=rtl]{text-align:left;}[dir=rtl] .mdc-text-field--ltr-text,.mdc-text-field--ltr-text[dir=rtl]{}[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__input,[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix,.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__input,.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix{direction:ltr}[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--prefix,.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--prefix{padding-left:0;padding-right:2px}[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--suffix,.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--suffix{padding-left:12px;padding-right:0}[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__icon--leading,.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__icon--leading{order:1}[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--suffix,.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--suffix{order:2}[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__input,.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__input{order:3}[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--prefix,.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--prefix{order:4}[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__icon--trailing,.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__icon--trailing{order:5}[dir=rtl] .mdc-text-field--ltr-text.mdc-text-field--end-aligned,.mdc-text-field--ltr-text.mdc-text-field--end-aligned[dir=rtl]{}[dir=rtl] .mdc-text-field--ltr-text.mdc-text-field--end-aligned .mdc-text-field__input,.mdc-text-field--ltr-text.mdc-text-field--end-aligned[dir=rtl] .mdc-text-field__input{text-align:right}[dir=rtl] .mdc-text-field--ltr-text.mdc-text-field--end-aligned .mdc-text-field__affix--prefix,.mdc-text-field--ltr-text.mdc-text-field--end-aligned[dir=rtl] .mdc-text-field__affix--prefix{padding-right:12px}[dir=rtl] .mdc-text-field--ltr-text.mdc-text-field--end-aligned .mdc-text-field__affix--suffix,.mdc-text-field--ltr-text.mdc-text-field--end-aligned[dir=rtl] .mdc-text-field__affix--suffix{padding-left:2px}.mdc-text-field-helper-text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, inherit));font-size:0.6875rem;font-size:var(--mdc-typography-caption-font-size, 0.6875rem);line-height:0.875rem;line-height:var(--mdc-typography-caption-line-height, 0.875rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight, 400);letter-spacing:0.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, 0.0333333333em);text-decoration:inherit;text-decoration:var(--mdc-typography-caption-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform, inherit);display:block;margin-top:0;line-height:normal;margin:0;opacity:0;will-change:opacity;transition:opacity 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-text-field-helper-text::before{display:inline-block;width:0;height:16px;content:"";vertical-align:0}.mdc-text-field-helper-text--persistent{transition:none;opacity:1;will-change:initial}.mdc-text-field-character-counter{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, inherit));font-size:0.6875rem;font-size:var(--mdc-typography-caption-font-size, 0.6875rem);line-height:0.875rem;line-height:var(--mdc-typography-caption-line-height, 0.875rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight, 400);letter-spacing:0.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, 0.0333333333em);text-decoration:inherit;text-decoration:var(--mdc-typography-caption-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform, inherit);display:block;margin-top:0;line-height:normal;margin-left:auto;margin-right:0;padding-left:16px;padding-right:0;white-space:nowrap}.mdc-text-field-character-counter::before{display:inline-block;width:0;height:16px;content:"";vertical-align:0}[dir=rtl] .mdc-text-field-character-counter,.mdc-text-field-character-counter[dir=rtl]{margin-left:0;margin-right:auto;}[dir=rtl] .mdc-text-field-character-counter,.mdc-text-field-character-counter[dir=rtl]{padding-left:0;padding-right:16px;}.mdc-text-field__icon{align-self:center;cursor:pointer}.mdc-text-field__icon:not([tabindex]),.mdc-text-field__icon[tabindex="-1"]{cursor:default;pointer-events:none}.mdc-text-field__icon svg{display:block}.mdc-text-field__icon--leading{margin-left:16px;margin-right:8px}[dir=rtl] .mdc-text-field__icon--leading,.mdc-text-field__icon--leading[dir=rtl]{margin-left:8px;margin-right:16px;}.mdc-text-field__icon--trailing{padding:12px;margin-left:0px;margin-right:0px}[dir=rtl] .mdc-text-field__icon--trailing,.mdc-text-field__icon--trailing[dir=rtl]{margin-left:0px;margin-right:0px;}.mdc-text-field__icon{align-self:center;cursor:pointer}.mdc-text-field__icon:not([tabindex]),.mdc-text-field__icon[tabindex="-1"]{cursor:default;pointer-events:none}.mdc-text-field__icon svg{display:block}.mdc-text-field__icon--leading{margin-left:16px;margin-right:8px}[dir=rtl] .mdc-text-field__icon--leading,.mdc-text-field__icon--leading[dir=rtl]{margin-left:8px;margin-right:16px;}.mdc-text-field__icon--trailing{padding:12px;margin-left:0px;margin-right:0px}[dir=rtl] .mdc-text-field__icon--trailing,.mdc-text-field__icon--trailing[dir=rtl]{margin-left:0px;margin-right:0px;}.mdc-text-field.mdc-text-field--outlined{transition:background-color 0.2s ease;border-radius:0.25rem}.mdc-text-field.mdc-text-field--outlined .mdc-notched-outline__leading,.mdc-text-field.mdc-text-field--outlined .mdc-notched-outline__notch,.mdc-text-field.mdc-text-field--outlined .mdc-notched-outline__trailing{transition:border-color 0.2s ease}.mdc-text-field.mdc-text-field--outlined:not(.mdc-text-field--disabled){background-color:rgba(var(--contrast-200), 0.5)}.mdc-text-field.mdc-text-field--outlined:not(.mdc-text-field--disabled):hover{background-color:rgba(var(--contrast-200), 1)}.mdc-text-field.mdc-text-field--outlined.mdc-text-field--focused{background-color:rgba(var(--contrast-100), 0.8)}.mdc-text-field.mdc-text-field--outlined.mdc-text-field--disabled{background-color:transparent}.mdc-text-field.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--invalid):not(.force-invalid):not(.force-invalid) .mdc-notched-outline__leading,.mdc-text-field.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--invalid):not(.force-invalid):not(.force-invalid) .mdc-notched-outline__notch,.mdc-text-field.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--invalid):not(.force-invalid):not(.force-invalid) .mdc-notched-outline__trailing{border-color:rgba(var(--contrast-700), 0.65)}.mdc-text-field.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--invalid):not(.force-invalid):not(.force-invalid):not(.mdc-text-field--focused):not(.mdc-text-field--invalid):not(.force-invalid):not(.force-invalid):hover .mdc-notched-outline .mdc-notched-outline__leading,.mdc-text-field.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--invalid):not(.force-invalid):not(.force-invalid):not(.mdc-text-field--focused):not(.mdc-text-field--invalid):not(.force-invalid):not(.force-invalid):hover .mdc-notched-outline .mdc-notched-outline__notch,.mdc-text-field.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--invalid):not(.force-invalid):not(.force-invalid):not(.mdc-text-field--focused):not(.mdc-text-field--invalid):not(.force-invalid):not(.force-invalid):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:rgba(var(--contrast-700), 1)}.mdc-text-field.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--invalid):not(.force-invalid):not(.force-invalid).mdc-text-field--focused .mdc-notched-outline__leading,.mdc-text-field.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--invalid):not(.force-invalid):not(.force-invalid).mdc-text-field--focused .mdc-notched-outline__notch,.mdc-text-field.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--invalid):not(.force-invalid):not(.force-invalid).mdc-text-field--focused .mdc-notched-outline__trailing{border-color:var(--mdc-theme-primary)}.mdc-text-field .mdc-notched-outline__leading,.mdc-text-field .mdc-notched-outline__notch,.mdc-text-field .mdc-notched-outline__trailing,.mdc-text-field.mdc-text-field--focused .mdc-notched-outline__leading,.mdc-text-field.mdc-text-field--focused .mdc-notched-outline__notch,.mdc-text-field.mdc-text-field--focused .mdc-notched-outline__trailing{border-width:1px}.mdc-text-field.mdc-text-field--focused.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch{padding-top:0}.mdc-text-field__icon{color:rgb(var(--contrast-900));flex-shrink:0}.mdc-text-field__input,.mdc-floating-label{font-family:inherit}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label{color:rgba(var(--contrast-1200), 1)}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input{color:rgba(var(--contrast-1400), 1)}.mdc-text-field.mdc-text-field--disabled .mdc-floating-label{color:rgba(var(--contrast-1200), 0.5)}.mdc-text-field.mdc-text-field--disabled .mdc-text-field__input{color:rgba(var(--contrast-1400), 0.5)}.mdc-floating-label--float-above{transform:translateY(-1.6875rem) scale(0.75) !important}.mdc-text-field--with-leading-icon .mdc-floating-label--float-above{transform:translateY(-1.5625rem) translateX(-1.25rem) scale(0.75) !important}.mdc-text-field--outlined.mdc-text-field--with-leading-icon.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-text-field--outlined.mdc-text-field--with-leading-icon .mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-text-field--outlined.mdc-text-field--textarea.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-text-field--outlined.mdc-text-field--textarea .mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{font-size:0.875rem}.mdc-text-field--disabled{background-color:transparent}.mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly .mdc-text-field__input{background-color:transparent;color:rgba(var(--contrast-1400), 1)}.mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly .lime-looks-like-input-value{color:rgba(var(--contrast-1400), 1);opacity:1}.mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly .mdc-floating-label{color:rgba(var(--contrast-1200), 1)}.mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly .mdc-notched-outline__leading,.mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly .mdc-notched-outline__notch,.mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly .mdc-notched-outline__trailing{border-color:transparent}.mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly.mdc-text-field--invalid+.mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg,.mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly.force-invalid+.mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg{color:var(--lime-error-text-color)}.mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly.mdc-text-field--invalid .mdc-text-field__icon--trailing,.mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly.force-invalid .mdc-text-field__icon--trailing{color:var(--lime-error-text-color)}.mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly.mdc-text-field--with-trailing-icon input.mdc-text-field__input{pointer-events:none}.mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly.mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing{width:calc(100% - 1rem);position:absolute;left:0;display:flex;justify-content:flex-end;align-items:center;pointer-events:auto;color:rgba(var(--contrast-1200), 1);border-radius:0.25rem}.mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly.mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing limel-icon{width:1.5rem;margin-right:0.25rem}.mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly.mdc-text-field--with-trailing-icon:hover .mdc-text-field__icon--trailing:hover{box-shadow:var(--button-shadow-hovered)}.mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly.mdc-text-field--with-trailing-icon:hover .mdc-text-field__icon--trailing:active{box-shadow:var(--button-shadow-pressed)}.mdc-text-field__icon{color:rgb(var(--contrast-900));width:1.5rem;height:1.5rem}.lime-empty-value-for-readonly{z-index:1;position:absolute;top:0.875rem;left:1rem}.lime-looks-like-input-value{line-height:1.75rem;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:rgba(var(--contrast-1400), 1);font-size:0.875rem;font-weight:400;letter-spacing:0.009375em}.mdc-text-field--disabled .lime-looks-like-input-value{cursor:not-allowed;opacity:0.4}:host(limel-chip-set){isolation:isolate}.mdc-chip-set{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;min-height:2.5rem;position:relative}.mdc-chip-set.chip-set--with-label .lime-floating-label--float-above{padding-left:0.25rem}.mdc-chip-set.mdc-chip-set--input{padding:0.4rem 0.5rem;width:100%}.mdc-chip-set.has-clear-all-button.mdc-chip-set--input{padding-right:2rem}.mdc-text-field{height:auto;cursor:text;flex-wrap:wrap;row-gap:0.5rem}.mdc-text-field .mdc-text-field__input{width:auto;padding:0 0.75rem;flex-grow:1;flex-shrink:0}.mdc-text-field .mdc-text-field__input::placeholder{color:rgb(var(--contrast-900)) !important}.mdc-text-field .mdc-text-field__input.hidden{transition:all 0s;opacity:0;position:absolute;z-index:-100}.mdc-text-field .mdc-text-field__input[type=search]{-webkit-appearance:textfield;background-color:transparent}.mdc-text-field .mdc-text-field__input[type=search]::-webkit-search-cancel-button{display:none}.chip-set__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:120%;top:0.8125rem;padding-left:1.25rem}.lime-notched-outline--notched .mdc-notched-outline__notch{border-top:1px solid transparent !important}.lime-notched-outline--notched .mdc-notched-outline__notch .lime-floating-label--float-above{top:1.6875rem;transform:translateY(-34.75px) scale(0.75) !important;font-size:0.875rem}.clear-all-button{transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:rgb(var(--contrast-900));cursor:pointer;height:1.25rem;width:1.25rem;border-radius:50%;background-repeat:no-repeat;background-position:center;background-size:0.75rem;background-image:url("data:image/svg+xml; utf8, <svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 32 32\'><defs/><path fill=\'rgb(255,255,255)\' d=\'M7.219 5.781L5.78 7.22 14.563 16 5.78 24.781 7.22 26.22 16 17.437l8.781 8.782 1.438-1.438L17.437 16l8.782-8.781L24.78 5.78 16 14.563z\'/></svg>");position:absolute;right:0.5rem;top:calc(2.5rem / 4);opacity:0}.clear-all-button:hover{color:var(--mdc-theme-on-surface);background-color:rgb(var(--contrast-1100));box-shadow:var(--button-shadow-hovered)}.clear-all-button:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.clear-all-button:focus{outline:none}.clear-all-button:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.clear-all-button:focus,.has-chips:not(.mdc-text-field--disabled):hover .clear-all-button,.has-chips:not(.mdc-text-field--disabled).mdc-text-field--focused .clear-all-button{opacity:1;outline:none}:not(.has-chips) .clear-all-button,.has-chips.mdc-text-field--disabled .clear-all-button{display:none}.has-leading-icon:not(.has-chips) .mdc-text-field__input{padding-left:1.5rem}.has-leading-icon:not(.has-chips) .mdc-floating-label:not(.lime-floating-label--float-above){left:1.5rem}.has-leading-icon:not(.has-chips) .mdc-floating-label.mdc-floating-label--float-above{left:0.25rem}.has-leading-icon limel-chip:first-of-type{margin-left:1.5rem}.has-leading-icon .search-icon{transition:transform 0.2s ease;position:absolute;top:0.5625rem;left:0.25rem}.has-leading-icon limel-icon{background-color:transparent}.delimiter{opacity:0.5;padding:0 0.125rem;color:var(--mdc-theme-on-surface)}limel-chip{border-radius:2rem}limel-chip.can-be-removed{box-shadow:var(--shadow-depth-8-error)}:host(.is-file-picker.shows-dropzone[readonly]) .mdc-text-field:not(.has-chips) .mdc-notched-outline:before,:host(.is-file-picker.shows-dropzone[readonly]) .mdc-text-field:not(.has-chips) .mdc-notched-outline:after{display:none}:host{--dropzone-margin:0.125rem;--dropzone-color:rgb(var(--contrast-600))}:host(.highlight-dropzone){--dropzone-color:rgb(var(--color-lime-light))}:host(.is-file-picker.shows-dropzone) .mdc-text-field:not(.has-chips) .mdc-notched-outline:before,:host(.is-file-picker.shows-dropzone) .mdc-text-field:not(.has-chips) .mdc-notched-outline:after{box-sizing:border-box;position:absolute;margin:auto;top:var(--dropzone-margin);right:var(--dropzone-margin);bottom:var(--dropzone-margin)}:host(.is-file-picker.shows-dropzone) .mdc-text-field:not(.has-chips) .mdc-notched-outline:before{content:attr(dropzone-tip);display:inline-flex;align-items:center;justify-content:flex-end;padding:0 0.75rem;font-size:0.8125rem;line-height:1;color:var(--mdc-theme-text-secondary-on-background)}:host(.is-file-picker.shows-dropzone) .mdc-text-field:not(.has-chips) .mdc-notched-outline:after{content:"";left:var(--dropzone-margin);border-radius:0.375rem;border:2px dashed var(--dropzone-color);cursor:pointer}:host(.is-file-picker.shows-dropzone) .mdc-text-field:not(.has-chips).mdc-text-field--disabled .mdc-notched-outline:before,:host(.is-file-picker.shows-dropzone) .mdc-text-field:not(.has-chips).mdc-text-field--disabled .mdc-notched-outline:after{cursor:not-allowed;opacity:0.4;pointer-events:none}:host(.is-file-picker.shows-dropzone) .mdc-text-field:not(.has-chips):not(.lime-text-field--readonly) .mdc-notched-outline:before{width:50%;text-align:right}:host(.is-file-picker.shows-dropzone) .mdc-text-field:not(.has-chips):not(.lime-text-field--readonly) .mdc-notched-outline .mdc-notched-outline__notch{max-width:40%}:host(limel-chip-set:focus),:host(limel-chip-set:focus-visible),:host(limel-chip-set:focus-within),:host(limel-chip-set[invalid]:not([invalid=false])),:host(limel-chip-set[invalid=true]){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-chip-set){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-chip-set:focus) limel-helper-line,:host(limel-chip-set:focus-visible) limel-helper-line,:host(limel-chip-set:focus-within) limel-helper-line,:host(limel-chip-set:hover) limel-helper-line{will-change:grid-template-rows}.mdc-text-field.mdc-text-field--outlined{min-height:2.5rem}';const S=1;const q=class{constructor(d){t(this,d);this.interact=e(this,"interact",7);this.change=e(this,"change",7);this.startEdit=e(this,"startEdit",7);this.stopEdit=e(this,"stopEdit",7);this.input=e(this,"input",7);this.handleKeyDown=X;this.getValue=()=>this.value.map((t=>Object.assign(Object.assign({},t),this.type&&{selected:this.selectedChipIds.includes(t.id)})));this.renderEmptyValueForReadonly=()=>{if(this.readonly&&this.value.length===0){return i("span",{class:"lime-empty-value-for-readonly lime-looks-like-input-value"},"–")}};this.floatLabelAbove=()=>{if(!!this.value.length||this.editMode||this.readonly){return true}};this.dropZoneTip=()=>r.get("file.drag-and-drop-tips",this.language);this.hasHelperText=()=>this.helperText!==null&&this.helperText!==undefined;this.renderHelperLine=()=>{if(!this.maxItems&&!this.hasHelperText()){return}return i("limel-helper-line",{length:this.value.length,maxLength:this.maxItems,helperText:this.helperText,invalid:this.isInvalid()})};this.catchInputChipClicks=t=>()=>{if(this.isSelectableChip(t)){this.updateSelectedChipIds(t);this.change.emit(t)}this.emitInteraction(t)};this.handleRemoveChip=t=>{this.removeChip(t.detail)};this.removeChip=t=>{const e=this.value.filter((e=>e.id!==t));this.change.emit(e)};this.clearAllChipsLabel=()=>r.get("chip-set.clear-all",this.language);this.value=[];this.type=undefined;this.label=undefined;this.helperText=undefined;this.disabled=false;this.readonly=false;this.invalid=false;this.inputType="text";this.maxItems=undefined;this.required=false;this.searchLabel=undefined;this.emptyInputOnBlur=true;this.clearAllButton=true;this.leadingIcon=null;this.delimiter=null;this.language="en";this.editMode=false;this.textValue="";this.blurred=false;this.inputChipIndexSelected=null;this.selectedChipIds=undefined;this.renderChip=this.renderChip.bind(this);this.renderInputChip=this.renderInputChip.bind(this);this.isFull=this.isFull.bind(this);this.handleTextFieldFocus=this.handleTextFieldFocus.bind(this);this.handleInputBlur=this.handleInputBlur.bind(this);this.handleTextInput=this.handleTextInput.bind(this);this.inputFieldOnChange=this.inputFieldOnChange.bind(this);this.handleKeyDown=this.handleKeyDown.bind(this);this.inputHidden=this.inputHidden.bind(this);this.handleDeleteAllIconClick=this.handleDeleteAllIconClick.bind(this);this.renderDelimiter=this.renderDelimiter.bind(this)}connectedCallback(){this.initialize()}initialize(){if(this.value.length){this.selectedChipIds=this.value.filter((t=>t.selected)).map((t=>t.id))}}async getEditMode(){return this.editMode}async setFocus(t=false){if(this.disabled||this.readonly){return}this.editMode=true;if(t){this.textValue=""}this.host.shadowRoot.querySelector("input").focus();this.startEdit.emit()}async emptyInput(){this.syncEmptyInput()}componentDidLoad(){this.triggerIconColorWarning(this.value);if(this.type==="input"){this.mdcTextField=new k(this.host.shadowRoot.querySelector(".mdc-text-field"))}}componentDidUpdate(){const t=this.host.shadowRoot.querySelector("input");if(t&&this.editMode){t.focus()}}disconnectedCallback(){if(this.mdcTextField){this.mdcTextField.destroy()}}render(){if(this.type==="input"){return this.renderInputChips()}const t={"mdc-chip-set":true,disabled:this.disabled||this.readonly,"mdc-text-field--with-trailing-icon":true};if(this.type){t[`mdc-chip-set--${this.type}`]=true}const e=this.renderChipSetLabel();if(e){t["chip-set--with-label"]=true}const d=this.getValue();return i("div",{class:t,role:"grid"},e,d.map(this.renderChip),this.renderHelperLine())}handleChangeChips(t,e){if(z(t,e)){return}this.syncEmptyInput();this.initialize()}renderChipSetLabel(){if(!this.label){return}return i("label",{class:"chip-set__label mdc-floating-label mdc-floating-label--float-above"},this.label)}renderInputChips(){return[i("div",{class:{"mdc-text-field mdc-text-field--outlined":true,"mdc-chip-set mdc-chip-set--input":true,"force-invalid":this.isInvalid(),"mdc-text-field--disabled":this.readonly||this.disabled,"lime-text-field--readonly":this.readonly,"has-chips mdc-text-field--label-floating":this.value.length!==0,"has-leading-icon":this.leadingIcon!==null,"has-clear-all-button":this.clearAllButton},onClick:this.handleTextFieldFocus},this.value.map(this.renderInputChip),i("input",{tabIndex:S,type:this.inputType,id:"input-element",disabled:this.readonly||this.disabled,class:{"mdc-text-field__input":true,hidden:this.inputHidden()},value:this.textValue,onBlur:this.handleInputBlur,onFocus:this.handleTextFieldFocus,onKeyDown:this.handleKeyDown,onInput:this.handleTextInput,onChange:this.inputFieldOnChange,placeholder:this.isFull()?"":this.searchLabel,readonly:this.isFull()}),i("div",{class:{"mdc-notched-outline":true,"mdc-notched-outline--upgraded":true,"mdc-text-field--required":this.required,"lime-notched-outline--notched":this.floatLabelAbove()},"dropzone-tip":this.dropZoneTip()},i("div",{class:"mdc-notched-outline__leading"}),this.renderLabel(),i("div",{class:"mdc-notched-outline__trailing"})),this.renderLeadingIcon(),this.renderEmptyValueForReadonly(),this.renderClearAllChipsButton()),this.renderHelperLine()]}renderLabel(){const t={"mdc-floating-label":true,"mdc-text-field--disabled":this.readonly||this.disabled,"mdc-floating-label--required":this.required,"lime-floating-label--float-above":this.floatLabelAbove()};if(!this.label){return}return i("div",{class:"mdc-notched-outline__notch"},i("label",{class:t,htmlFor:"input-element"},this.label))}isFull(){return!!this.maxItems&&this.value.length>=this.maxItems}isInvalid(){if(this.readonly){return false}if(this.invalid){return true}if(!this.required){return false}if(!this.blurred){return false}return!this.value||!this.value.length}inputFieldOnChange(t){t.stopPropagation()}handleTextFieldFocus(){if(this.disabled||this.readonly){return}if(this.editMode){return}this.editMode=true;this.startEdit.emit()}handleInputBlur(){if(this.emptyInputOnBlur){this.syncEmptyInput()}this.editMode=false;this.blurred=true;this.inputChipIndexSelected=null;setTimeout((()=>{this.stopEdit.emit()}),0)}syncEmptyInput(){this.textValue=""}inputHidden(){if(this.editMode){return this.isFull()}return!!(this.value&&this.value.length)}handleTextInput(t){t.stopPropagation();this.inputChipIndexSelected=null;this.textValue=t.target.value;this.input.emit(t.target.value&&t.target.value.trim())}emitInteraction(t){this.interact.emit(t)}renderChip(t){const e=this.type==="filter"?"filter":"default";const d=this.getChipProps(t,e);return i("limel-chip",Object.assign({},d))}renderInputChip(t,e){const d=this.getChipProps(t,"default");return[i("limel-chip",Object.assign({key:t.id,class:{"can-be-removed":this.inputChipIndexSelected===e}},d)),this.renderDelimiter()]}getChipProps(t,e){const i=this.type==="input"&&t.removable;return Object.assign({role:"row",identifier:t.id,text:t.text,icon:t.icon,badge:t.badge,selected:t.selected,disabled:this.disabled,readonly:this.readonly,type:e,removable:i,onClick:this.catchInputChipClicks(t),onRemove:this.handleRemoveChip},t.href&&{link:{href:w(t.href),target:y(t.href)}})}isSelectableChip(t){return this.type!=="input"&&"selected"in t}updateSelectedChipIds(t){t.selected=!t.selected;const e=t.id;if(this.type==="choice"){this.updateChoiceTypeSelectedIds(e)}else{this.updateFilterTypeSelectedIds(e)}}updateChoiceTypeSelectedIds(t){this.selectedChipIds=this.isChipSelected(t)?[]:[t]}isChipSelected(t){return!!this.selectedChipIds.find((e=>e===t))}updateFilterTypeSelectedIds(t){if(this.isChipSelected(t)){this.removeChipIdFromSelectedChipIds(t)}else{this.addChipIdToSelectedChipIds(t)}}removeChipIdFromSelectedChipIds(t){this.selectedChipIds=this.selectedChipIds.filter((e=>e!==t))}addChipIdToSelectedChipIds(t){this.selectedChipIds=[...this.selectedChipIds,t]}renderLeadingIcon(){if(!this.leadingIcon){return}return i("i",{class:"mdc-text-field__icon search-icon"},i("limel-icon",{name:this.leadingIcon}))}renderClearAllChipsButton(){if(this.disabled||this.readonly||!this.clearAllButton){return}return i("a",{href:"",onClick:this.handleDeleteAllIconClick,class:"mdc-text-field__icon clear-all-button",tabindex:"0",role:"button",title:this.clearAllChipsLabel(),"aria-label":this.clearAllChipsLabel()})}handleDeleteAllIconClick(t){t.preventDefault();this.change.emit([])}renderDelimiter(){if(!this.delimiter){return}return i("div",{class:"delimiter"},this.delimiter)}triggerIconColorWarning(t){for(const e of t){if(e.icon&&(e.iconFillColor||e.iconBackgroundColor||e.iconTitle)){console.warn("The `iconFillColor`, `iconBackgroundColor`, and `iconTitle` props are deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name', `iconBackgroundColor: 'color-name', and `iconTitle: 'title'`, write `icon { name: 'icon-name', color: 'color-name', backgroundColor: 'color-name', title: 'title' }`.")}}}get host(){return l(this)}static get watchers(){return{value:["handleChangeChips"]}}};q.style=D;export{C as limel_chip,q as limel_chip_set};
+//# sourceMappingURL=p-104120ab.entry.js.map

package/dist/lime-elements/p-104120ab.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["chipCss","Chip","this","renderAsButton","h","id","identifier","class","role","disabled","readonly","onKeyDown","handleDeleteKeyDown","renderIcon","renderLabel","renderBadge","renderRemoveButton","renderAsLink","href","link","title","target","tabindex","text","filterClickWhenDisabled","e","preventDefault","handleRemoveClick","event","stopPropagation","remove","emit","removable","keys","DELETE","BACKSPACE","keycodes","DELETE_KEY_CODE","BACKSPACE_KEY_CODE","includes","key","keyCode","removeChipLabel","translate","get","language","crypto","randomUUID","componentWillLoad","makeEnterClickable","host","disconnectedCallback","removeEnterClickable","render","Host","onClick","icon","getIconName","badge","name","style","color","_a","_b","backgroundColor","label","svgData","tabIndex","innerHTML","handleKeyboardEvent","textValue","length","value","isLeft","ARROW_LEFT","ARROW_LEFT_KEY_CODE","isRight","ARROW_RIGHT","ARROW_RIGHT_KEY_CODE","isEnter","ENTER","ENTER_KEY_CODE","isDelete","isBackspace","isEscape","ESCAPE","ESCAPE_KEY_CODE","handleLeft","handleRight","handleEnter","handleDelete","handleBackspace","handleEscape","inputChipIndexSelected","emitInteraction","removeChip","repeat","chipSetCss","INPUT_FIELD_TABINDEX","ChipSet","constructor","hostRef","handleKeyDown","getValue","map","chip","Object","assign","type","selected","selectedChipIds","renderEmptyValueForReadonly","floatLabelAbove","editMode","dropZoneTip","hasHelperText","helperText","undefined","renderHelperLine","maxItems","maxLength","invalid","isInvalid","catchInputChipClicks","isSelectableChip","updateSelectedChipIds","change","handleRemoveChip","detail","newValue","filter","clearAllChipsLabel","renderChip","bind","renderInputChip","isFull","handleTextFieldFocus","handleInputBlur","handleTextInput","inputFieldOnChange","inputHidden","handleDeleteAllIconClick","renderDelimiter","connectedCallback","initialize","async","emptyInput","shadowRoot","querySelector","focus","startEdit","syncEmptyInput","componentDidLoad","triggerIconColorWarning","mdcTextField","MDCTextField","componentDidUpdate","input","destroy","renderInputChips","classes","chipSetLabel","renderChipSetLabel","handleChangeChips","oldValue","isEqual","leadingIcon","clearAllButton","inputType","hidden","onBlur","onFocus","onInput","onChange","placeholder","searchLabel","required","renderLeadingIcon","renderClearAllChipsButton","labelClassList","htmlFor","blurred","emptyInputOnBlur","setTimeout","stopEdit","trim","interact","chipType","chipProps","getChipProps","index","onRemove","getHref","getTarget","updateChoiceTypeSelectedIds","updateFilterTypeSelectedIds","isChipSelected","find","chipId","removeChipIdFromSelectedChipIds","addChipIdToSelectedChipIds","delimiter","iconFillColor","iconBackgroundColor","iconTitle","console","warn"],"sources":["./src/components/chip/chip.scss?tag=limel-chip&encapsulation=shadow","./src/components/chip/chip.tsx","./src/components/chip-set/chip-set-input-helpers.ts","./src/components/chip-set/chip-set.scss?tag=limel-chip-set&encapsulation=shadow","./src/components/chip-set/chip-set.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n/**\n* @prop --chip-max-width: Maximum width of the chip. Defaults to `10rem`. Keep in mind that the chips should not appear too big.\n*/\n\n:host(limel-chip) {\n    --limel-chip-height: 1.75rem;\n    --limel-chip-gap: 0.5rem;\n    isolation: isolate;\n    display: inline-flex;\n    align-items: center;\n    min-width: 0;\n}\n\n* {\n    box-sizing: border-box;\n}\n\n.chip {\n    all: unset;\n    position: relative;\n\n    min-width: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.25rem;\n\n    max-width: var(--chip-max-width, 10rem);\n    height: var(--limel-chip-height);\n\n    border-radius: var(--limel-chip-height);\n    font-size: 0.875rem;\n    padding: 0 0.125rem;\n\n    &:has(limel-icon) {\n        .text {\n            padding-left: 0.25rem;\n        }\n    }\n\n    &:not([disabled]) {\n        @include mixins.visualize-keyboard-focus;\n        @include mixins.is-elevated-inset-clickable;\n    }\n\n    &:has(limel-badge) {\n        padding-right: 0.375rem;\n\n        .text {\n            padding-right: 0;\n        }\n    }\n\n    &:has(+ .remove-button:hover) {\n        box-shadow: var(--shadow-depth-8-error);\n    }\n\n    &:has(+ .trailing-button) {\n        padding-right: calc(var(--limel-chip-height) + 0.125rem);\n\n        .text {\n            padding-right: 0;\n        }\n    }\n}\n\n:host(limel-chip[disabled]) {\n    .chip {\n        // Similar to `limel-button[disabled]`\n        color: rgba(var(--contrast-1600), 0.37);\n        background-color: rgba(var(--contrast-1600), 0.1);\n        box-shadow: none;\n    }\n}\n\n:host(limel-chip[readonly]) {\n    .chip {\n        box-shadow: 0 0 0 1px rgba(var(--contrast-800), 0.5);\n    }\n}\n\n:host(limel-chip[selected]) {\n    .chip {\n        box-shadow: var(--button-shadow-inset);\n\n        &:focus-visible {\n            box-shadow: var(--button-shadow-inset),\n                var(--shadow-depth-8-focused);\n        }\n\n        &:active {\n            box-shadow: var(--button-shadow-inset-pressed);\n        }\n    }\n    .text {\n        color: var(--mdc-theme-primary);\n    }\n}\n\n:host(limel-chip[type='filter']) {\n    .chip {\n        border-top-left-radius: 0.5rem;\n        border-bottom-left-radius: 0.5rem;\n\n        &:after {\n            content: '';\n            transition:\n                background-color 0.4s ease 0.2s,\n                box-shadow 0.6s ease 0.2s;\n            box-sizing: border-box;\n            position: absolute;\n            bottom: 0.125rem;\n            left: 0.125rem;\n            width: 0.5rem;\n            height: 0.5rem;\n            border-radius: 50%;\n            background-color: rgb(var(--contrast-800), 0.8);\n            box-shadow: 0 0 0 1px rgb(var(--color-white)) inset;\n        }\n    }\n}\n\n:host(limel-chip[type='filter'][selected]) {\n    .chip {\n        &:after {\n            background-color: rgb(var(--color-green-default));\n            box-shadow:\n                0 0 0.375rem 0 rgb(var(--color-green-light)),\n                0 0 0 1px rgb(var(--color-white)) inset;\n        }\n    }\n}\n\nlimel-icon {\n    flex-shrink: 0;\n    width: calc(var(--limel-chip-height) - 0.25rem);\n    height: calc(var(--limel-chip-height) - 0.25rem);\n    padding: 0.0625rem;\n}\n\nlimel-badge {\n    pointer-events: none;\n}\n\n.text {\n    @include mixins.truncate-text;\n    line-height: 1.2;\n    padding: 0 0.5rem;\n}\n\n.trailing-button {\n    all: unset;\n    @include mixins.is-flat-clickable(\n        $color--hovered: rgb(var(--color-red-dark))\n    );\n\n    z-index: 1;\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    margin-left: calc(var(--limel-chip-height) * -1 + 0.125rem);\n    margin-right: 0.125rem;\n    width: calc(var(--limel-chip-height) - 0.25rem);\n    height: calc(var(--limel-chip-height) - 0.25rem);\n\n    border-radius: 50%;\n\n    svg {\n        transition:\n            color 0.2s ease,\n            transform 0.2s ease;\n        width: 1.25rem;\n    }\n\n    &:hover {\n        svg {\n            transform: scale(0.8);\n        }\n    }\n}\n","import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n} from '@stencil/core';\nimport { Icon, Languages, Link } from '../../interface';\nimport { getIconName } from '../icon/get-icon-props';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport translate from '../../global/translations';\nimport {\n    BACKSPACE,\n    BACKSPACE_KEY_CODE,\n    DELETE,\n    DELETE_KEY_CODE,\n} from '../../util/keycodes';\nimport { ChipType, Chip as OldChipInterface } from '../chip-set/chip.types';\n\ninterface ChipInterface extends Omit<OldChipInterface, 'id' | 'badge'> {\n    /**\n     * Identifier for the chip. Must be unique.\n     */\n    identifier?: number | string;\n\n    /**\n     * The value of the badge.\n     */\n    badge?: string | number;\n}\n\n/**\n * Chips and buttons are both interactive elements in UI design,\n * but they serve different purposes and are used in different contexts.\n *\n * :::warning\n * Do not use the chip component carelessly, as an alternative for\n * [`limel-button`](#/component/limel-button/) in the UI design!\n *\n * **Buttons:**\n * Buttons are used to trigger actions. They are typically used to\n * submit forms, open dialogs, initiate a process, or perform any action\n * that changes the state of the application.\n * Buttons' labels usually contain action words, in other words, the labels is\n * a _verb in imperative mood_ such as \"Submit\" or \"Delete\".\n * Buttons are placed in areas where it's clear they will initiate\n * an action when clicked.\n *\n * **Chips:**\n * Chips however are elements which may look like buttons, but they are\n * representing choices, filters, or tags, in a small block\n * or clearly bundled into a group. Chips are rarely used alone in the\n * user interface.\n * They are often used in a so called \"chip-set\", or placed together in\n * a section of the UI, where the user can expect more than one chip to be present.\n *\n * For example, a chip may represent a filter in a filter bar, or a tag in a tag list,\n * or an item in a shopping list.\n * Clicking a chip can also trigger an action, for example toggling a filter ON or OFF,\n * or opening a page with all posts tagged with the tag represented by the chip,\n * or navigating to a page with more information about the item in the shopping list.\n * :::\n *\n * @private\n * @exampleComponent limel-example-chip-button\n * @exampleComponent limel-example-chip-link\n * @exampleComponent limel-example-chip-icon-colors\n * @exampleComponent limel-example-chip-badge\n * @exampleComponent limel-example-chip-filter\n * @exampleComponent limel-example-chip-removable\n * @exampleComponent limel-example-chip-aria-role\n */\n@Component({\n    tag: 'limel-chip',\n    shadow: true,\n    styleUrl: 'chip.scss',\n})\nexport class Chip implements ChipInterface {\n    /**\n     * Defines the language for translations.\n     * Will translate the translatable strings on the components.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    /**\n     * Label displayed on the chip\n     */\n    @Prop({ reflect: true })\n    public text: string;\n\n    /**\n     * Icon of the chip.\n     */\n    @Prop()\n    public icon?: string | Icon;\n\n    /**\n     * If supplied, the chip will become a clickable link.\n     */\n    @Prop()\n    public link?: Omit<Link, 'text'>;\n\n    /**\n     * The value of the badge, displayed on the chip.\n     */\n    @Prop({ reflect: true })\n    public badge?: string | number;\n\n    /**\n     * Set to `true` to disable the chip.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Set to `true` to render the chip as a static UI element.\n     * Useful when the parent component has a `readonly` state.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to visualize the chip in a \"selected\" state.\n     * This is typically used when the chip is used in a chip-set\n     * along with other chips.\n     */\n    @Prop({ reflect: true })\n    public selected = false;\n\n    /**\n     * Set to `true` to render a remove button on the chip.\n     */\n    @Prop({ reflect: true })\n    public removable = false;\n\n    /**\n     * Set to `filter` to render the chip with a distinct style\n     * suitable for visualizing filters.\n     *\n     * @beta\n     */\n    @Prop({ reflect: true })\n    public type?: ChipType = 'default';\n\n    /**\n     * Identifier for the chip. Must be unique.\n     */\n    @Prop({ reflect: true })\n    public identifier?: number | string = crypto.randomUUID();\n\n    /**\n     * Fired when clicking on the remove button of a `removable` chip.\n     * The value of `identifier` is emitted as the event detail.\n     */\n    @Event()\n    public remove: EventEmitter<number | string>;\n\n    @Element()\n    private host: HTMLLimelChipElement;\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public render() {\n        return (\n            <Host onClick={this.filterClickWhenDisabled}>\n                {this.link ? this.renderAsLink() : this.renderAsButton()}\n            </Host>\n        );\n    }\n\n    private renderAsButton = () => {\n        return [\n            <button\n                id={'chip-' + this.identifier}\n                class=\"chip\"\n                role=\"button\"\n                disabled={this.disabled || this.readonly}\n                onKeyDown={this.handleDeleteKeyDown}\n            >\n                {this.renderIcon()}\n                {this.renderLabel()}\n                {this.renderBadge()}\n            </button>,\n            this.renderRemoveButton(),\n        ];\n    };\n\n    private renderAsLink = () => {\n        return [\n            <a\n                id={'chip-' + this.identifier}\n                class=\"chip\"\n                href={this.link.href}\n                title={this.link.title}\n                target={this.link.target}\n                aria-disabled={this.disabled || this.readonly}\n                tabindex={this.disabled || this.readonly ? -1 : 0}\n                onKeyDown={this.handleDeleteKeyDown}\n            >\n                {this.renderIcon()}\n                {this.renderLabel()}\n                {this.renderBadge()}\n            </a>,\n            this.renderRemoveButton(),\n        ];\n    };\n\n    private renderLabel = () => {\n        return <span class=\"text\">{this.text}</span>;\n    };\n\n    private renderIcon() {\n        const icon = getIconName(this.icon);\n\n        if (!icon) {\n            return;\n        }\n\n        return (\n            <limel-icon\n                badge={true}\n                name={icon}\n                style={{\n                    color: `${(this.icon as Icon)?.color}`,\n                    'background-color': `${\n                        (this.icon as Icon)?.backgroundColor\n                    }`,\n                }}\n            />\n        );\n    }\n\n    private renderBadge() {\n        if (!this.badge) {\n            return;\n        }\n\n        return <limel-badge label={this.badge} />;\n    }\n\n    private renderRemoveButton() {\n        if (!this.removable || this.readonly || this.disabled) {\n            return;\n        }\n\n        const svgData =\n            '<svg viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"m8 8 16 16M24 8 8 24\"/></svg>';\n\n        return (\n            <button\n                class=\"trailing-button remove-button\"\n                tabIndex={-1}\n                aria-label={this.removeChipLabel}\n                aria-controls={'chip-' + this.identifier}\n                innerHTML={svgData}\n                onClick={this.handleRemoveClick}\n            />\n        );\n    }\n\n    private filterClickWhenDisabled = (e) => {\n        if (this.disabled || this.readonly) {\n            e.preventDefault();\n        }\n    };\n\n    private handleRemoveClick = (event: MouseEvent | KeyboardEvent) => {\n        event.stopPropagation();\n        this.remove.emit(this.identifier);\n    };\n\n    private handleDeleteKeyDown = (event: KeyboardEvent) => {\n        if (!this.removable) {\n            return;\n        }\n\n        const keys = [DELETE, BACKSPACE];\n        const keycodes = [DELETE_KEY_CODE, BACKSPACE_KEY_CODE];\n\n        if (keys.includes(event.key) || keycodes.includes(event.keyCode)) {\n            this.handleRemoveClick(event);\n        }\n    };\n\n    private removeChipLabel = (): string => {\n        return translate.get('chip-set.remove-chip', this.language);\n    };\n}\n","import {\n    ARROW_LEFT,\n    ARROW_LEFT_KEY_CODE,\n    ARROW_RIGHT,\n    ARROW_RIGHT_KEY_CODE,\n    BACKSPACE,\n    BACKSPACE_KEY_CODE,\n    DELETE,\n    DELETE_KEY_CODE,\n    ENTER,\n    ENTER_KEY_CODE,\n    ESCAPE,\n    ESCAPE_KEY_CODE,\n} from '../../util/keycodes';\n\n/**\n * Key handler for the input field.\n * Lets the user select, activate, and remove chips with the keyboard.\n *\n * @param event - event\n\n */\nexport function handleKeyboardEvent(event: KeyboardEvent) {\n    if (this.textValue.length) {\n        // If there is any text in the input field, keyboard input should\n        // navigate the text, not the chips.\n        return;\n    }\n\n    if (!this.value || !this.value.length) {\n        // If there are no chips, there is nothing to select.\n        return;\n    }\n\n    const isLeft =\n        event.key === ARROW_LEFT || event.keyCode === ARROW_LEFT_KEY_CODE;\n    const isRight =\n        event.key === ARROW_RIGHT || event.keyCode === ARROW_RIGHT_KEY_CODE;\n    const isEnter = event.key === ENTER || event.keyCode === ENTER_KEY_CODE;\n    const isDelete = event.key === DELETE || event.keyCode === DELETE_KEY_CODE;\n    const isBackspace =\n        event.key === BACKSPACE || event.keyCode === BACKSPACE_KEY_CODE;\n    const isEscape = event.key === ESCAPE || event.keyCode === ESCAPE_KEY_CODE;\n\n    if (isLeft) {\n        return handleLeft(this, event);\n    }\n\n    if (isRight) {\n        return handleRight(this, event);\n    }\n\n    if (isEnter) {\n        return handleEnter(this, event);\n    }\n\n    if (isDelete) {\n        return handleDelete(this, event);\n    }\n\n    if (isBackspace) {\n        return handleBackspace(this, event);\n    }\n\n    if (isEscape) {\n        return handleEscape(this, event);\n    }\n}\n\nfunction handleLeft(host, event) {\n    event.preventDefault();\n    if (host.inputChipIndexSelected === null) {\n        host.inputChipIndexSelected = host.value.length - 1;\n\n        return;\n    }\n\n    if (host.inputChipIndexSelected <= 0) {\n        return;\n    }\n\n    host.inputChipIndexSelected -= 1;\n}\n\nfunction handleRight(host, event) {\n    event.preventDefault();\n    if (host.inputChipIndexSelected === null) {\n        host.inputChipIndexSelected = 0;\n\n        return;\n    }\n\n    if (host.inputChipIndexSelected >= host.value.length - 1) {\n        return;\n    }\n\n    host.inputChipIndexSelected += 1;\n}\n\nfunction handleEnter(host, event) {\n    if (host.inputChipIndexSelected !== null) {\n        event.preventDefault();\n        host.emitInteraction(host.value[host.inputChipIndexSelected]);\n    }\n}\n\nfunction handleEscape(host, event) {\n    if (host.inputChipIndexSelected !== null) {\n        event.preventDefault();\n        host.inputChipIndexSelected = null;\n    }\n}\n\nfunction handleDelete(host, event) {\n    if (host.inputChipIndexSelected !== null) {\n        event.preventDefault();\n        removeChip(host);\n    }\n}\n\nfunction handleBackspace(host, event) {\n    if (host.inputChipIndexSelected !== null) {\n        event.preventDefault();\n        removeChip(host);\n    } else if (!event.repeat) {\n        host.inputChipIndexSelected = host.value.length - 1;\n    }\n}\n\nfunction removeChip(host) {\n    if (host.inputChipIndexSelected !== null) {\n        host.removeChip(host.value[host.inputChipIndexSelected].id);\n        host.inputChipIndexSelected = null;\n    }\n}\n","@use '../../style/functions';\n@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins';\n\n@use '../../style/internal/lime-theme';\n\n@use '@material/textfield';\n@use '@material/textfield/icon';\n@use '@material/notched-outline/mdc-notched-outline';\n@use '@material/floating-label';\n@use '@material/floating-label/mdc-floating-label';\n\n/**\n * @prop --icon-background-color: Background color of the icon. Defaults to transparent.\n * @prop --icon-color: Color of the icon. Defaults to `rgb(var(--contrast-1100))`.\n * @prop --background-color: Background color of the field when type is set to input.\n * @prop --background-color-disabled: Background color of the field when type is set to input and the component is disabled or readonly.\n * @prop --input-chip-set-selected-chip-color: Color of the highlight around selected chips in input chip-sets.\n */\n\n@include textfield.core-styles;\n@include icon.icon-core-styles;\n\n@include shared_input-select-picker.outlined-style-overrides;\n@include shared_input-select-picker.floating-label-overrides;\n@include shared_input-select-picker.cropped-label-hack;\n@include shared_input-select-picker.disabled-overrides;\n@include shared_input-select-picker.readonly-overrides;\n@include shared_input-select-picker.leading-icon;\n@include shared_input-select-picker.lime-empty-value-for-readonly;\n@include shared_input-select-picker.lime-looks-like-input-value;\n\n$height-of-chip-set-input: functions.pxToRem(36);\n$leading-icon-space: 1.5rem;\n\n:host(limel-chip-set) {\n    isolation: isolate;\n}\n\n.mdc-chip-set {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: 0.5rem;\n    min-height: shared_input-select-picker.$height-of-mdc-text-field;\n    position: relative;\n\n    &.chip-set--with-label {\n        .lime-floating-label--float-above {\n            padding-left: functions.pxToRem(4);\n        }\n    }\n\n    &.mdc-chip-set--input {\n        padding: 0.4rem 0.5rem;\n        width: 100%;\n    }\n\n    &.has-clear-all-button {\n        &.mdc-chip-set--input {\n            padding-right: functions.pxToRem(\n                32\n            ); // This leaves space for \"clear all\" button and avoids overlapping with chips\n        }\n    }\n}\n\n.mdc-text-field {\n    height: auto;\n    cursor: text;\n    flex-wrap: wrap;\n    row-gap: 0.5rem;\n\n    .mdc-text-field__input {\n        @include shared_input-select-picker.input-field-placeholder;\n\n        width: auto;\n        padding: 0 functions.pxToRem(12);\n\n        flex-grow: 1;\n        flex-shrink: 0;\n\n        &.hidden {\n            // This class is added, as soon as there is a chip selected and displayed\n            // This input field should not be visually visible as it breaks the UI in some cases\n            // But it should be rendered to be able to tab between fields and do other keyboard commands /Kia\n            transition: all 0s;\n            opacity: 0;\n            position: absolute;\n            z-index: -100; // to let users interact with chips, in case they're covered\n        }\n        &[type='search'] {\n            -webkit-appearance: textfield; // Removes the default magnifying glass icon on iOS which appears automatically on input fields with type of search\n            background-color: transparent; // overides styles caused by previous line\n\n            &::-webkit-search-cancel-button {\n                display: none; // removes the default X button\n            }\n        }\n    }\n}\n\n// used only in chipsets that do not have input\n.chip-set__label {\n    @include mixins.truncate-text;\n    width: 120%; // `120%` instead of `100%`,\n    // because this class is always together with `mdc-floating-label--float-above`,\n    // which scales the label down. So there is more horizontal space to display the label in.\n    top: functions.pxToRem(13);\n    padding-left: functions.pxToRem(20);\n}\n\n// Because MDC removes some classes in chipset, we add custom\n// classes with similar names and expected behavior & styles.\n// These class names start with `lime-`, instead of `mdc-`.\n.lime-notched-outline--notched {\n    .mdc-notched-outline__notch {\n        border-top: 1px solid transparent !important;\n\n        .lime-floating-label--float-above {\n            // This overrides MDC's original top value which is `top: 50%`.\n            // The reason is that a % value aligns the label in a wrong position\n            // vertically, when there are multiple rows of chips.\n            top: functions.pxToRem(27);\n\n            transform: translateY(-34.75px) scale(0.75) !important;\n            font-size: shared_input-select-picker.$cropped-label-hack--font-size;\n        }\n    }\n}\n\n.force-invalid {\n    @extend .mdc-text-field--invalid;\n}\n\n.clear-all-button {\n    @include mixins.clear-all-button;\n    @include mixins.visualize-keyboard-focus;\n\n    position: absolute;\n    right: 0.5rem;\n    top: calc(#{shared_input-select-picker.$height-of-mdc-text-field} / 4);\n\n    opacity: 0; // Is hidden, but can receive focus (such as when navigating through tab indexes).\n\n    &:focus,\n    .has-chips:not(.mdc-text-field--disabled):hover &,\n    .has-chips:not(.mdc-text-field--disabled).mdc-text-field--focused & {\n        opacity: 1;\n        outline: none;\n    }\n\n    :not(.has-chips) &,\n    .has-chips.mdc-text-field--disabled & {\n        display: none; // Won't receive focus when disabled\n    }\n}\n\n.has-leading-icon {\n    &:not(.has-chips) {\n        .mdc-text-field__input {\n            padding-left: $leading-icon-space;\n        }\n\n        .mdc-floating-label {\n            &:not(.lime-floating-label--float-above) {\n                left: $leading-icon-space;\n            }\n            &.mdc-floating-label--float-above {\n                left: functions.pxToRem(4);\n            }\n        }\n    }\n\n    limel-chip {\n        &:first-of-type {\n            margin-left: 1.5rem;\n        }\n    }\n\n    .search-icon {\n        transition: transform 0.2s ease;\n        position: absolute;\n        top: functions.pxToRem(9);\n        left: 0.25rem;\n    }\n\n    limel-icon {\n        background-color: transparent;\n    }\n}\n\n.delimiter {\n    opacity: 0.5;\n    padding: 0 functions.pxToRem(2);\n    color: var(--mdc-theme-on-surface);\n}\n\nlimel-chip {\n    border-radius: 2rem;\n\n    &.can-be-removed {\n        // When chip is selected with keyboard (backspace / arrow-keys) to be deleted\n        box-shadow: var(--shadow-depth-8-error);\n    }\n}\n\n@import './partial-styles/_readonly';\n@import './partial-styles/_file-picker';\n@import './partial-styles/_helper-text';\n\n// To make the input field render smaller than the default MDC UI\n.mdc-text-field {\n    &.mdc-text-field--outlined {\n        min-height: shared_input-select-picker.$height-of-mdc-text-field;\n    }\n}\n","import { Chip, ChipType } from '../chip-set/chip.types';\nimport { Languages } from '../date-picker/date.types';\nimport { MDCTextField } from '@material/textfield';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Method,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { handleKeyboardEvent } from './chip-set-input-helpers';\nimport translate from '../../global/translations';\nimport { getHref, getTarget } from '../../util/link-helper';\nimport { isEqual } from 'lodash-es';\nimport { LimelChipCustomEvent } from 'src/components';\n\nconst INPUT_FIELD_TABINDEX = 1;\n\n/**\n * @exampleComponent limel-example-chip-set\n * @exampleComponent limel-example-chip-set-choice\n * @exampleComponent limel-example-chip-set-filter\n * @exampleComponent limel-example-chip-set-filter-badge\n * @exampleComponent limel-example-chip-set-input\n * @exampleComponent limel-example-chip-set-input-type-text\n * @exampleComponent limel-example-chip-set-input-type-search\n * @exampleComponent limel-example-chip-icon-color\n * @exampleComponent limel-example-chip-set-composite\n */\n@Component({\n    tag: 'limel-chip-set',\n    shadow: true,\n    styleUrl: 'chip-set.scss',\n})\nexport class ChipSet {\n    /**\n     * List of chips for the set\n     */\n    @Prop()\n    public value: Chip[] = [];\n\n    /**\n     * Type of chip set\n     *\n     * - `choice` renders a set of selectable chips where only one is selectable. The `removable` property is ignored\n     * - `filter` renders a set of selectable chips where all are selectable.\n     * - `input` renders a set of chips that can be used in conjunction with an input field\n     *\n     * If no type is set, a basic set of chips without additional functionality will be rendered\n     */\n    @Prop({ reflect: true })\n    public type?: 'choice' | 'filter' | 'input';\n\n    /**\n     * Label for the chip-set\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Optional helper text to display below the chipset.\n     * When type is `input`, the helper text is displayed below the\n     * input field when it has focus.\n     * When type is not `input`, the helper text is always displayed\n     * if the device is touch screen; otherwise it is shown when chip-set\n     * is hovered or focused using keyboard navigation.\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * True if the chip set should be disabled\n     */\n    @Prop({ reflect: true })\n    public disabled: boolean = false;\n\n    /**\n     * For chip-sets of type `input`, set to `true` to disable adding and\n     * removing chips, but allow interaction with existing chips in the set.\n     * For any other types, setting either `readonly` or `disabled` disables\n     * the chip-set.\n     */\n    @Prop({ reflect: true })\n    public readonly: boolean = false;\n\n    /**\n     * Set to `true` to indicate that the current value of the input field is\n     * invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * For chip-sets of type `input`. Value to use for the `type` attribute on the\n     * input field inside the chip-set.\n     */\n    @Prop({ reflect: true })\n    public inputType: 'search' | 'text' = 'text';\n\n    /**\n     * For chip-sets of type `input`. Limits the maximum number of chips.\n     * When the value is `0` or not set, no limit is applied.\n     */\n    @Prop({ reflect: true })\n    public maxItems: number;\n\n    /**\n     * True if the control requires a value\n     */\n    @Prop({ reflect: true })\n    public required: boolean = false;\n\n    /**\n     * Search label to display when type is `input` and component is in search mode\n     */\n    @Prop({ reflect: true })\n    public searchLabel: string;\n\n    /**\n     * Whether the input field should be emptied when the chip-set loses focus.\n     */\n    @Prop({ reflect: true })\n    public emptyInputOnBlur: boolean = true;\n\n    /**\n     * Whether the \"Clear all\" buttons should be shown\n     */\n    @Prop()\n    public clearAllButton: boolean = true;\n\n    /**\n     * For chip-sets of type `input`. When the value is null, no leading icon is used.\n     * Leading icon to show to the far left in the text field\n     */\n    @Prop({ reflect: true })\n    public leadingIcon: string = null;\n\n    /**\n     * For chip-set of type `input`. Sets delimiters between chips.\n     */\n    @Prop({ reflect: true })\n    public delimiter: string = null;\n\n    /**\n     * Defines the language for translations.\n     * Will translate the translatable strings on the components. For example, the clear all chips label.\n     */\n    @Prop()\n    public language: Languages = 'en';\n\n    /**\n     * Dispatched when a chip is interacted with\n     */\n    @Event()\n    private interact: EventEmitter<Chip>;\n\n    /**\n     * Dispatched when a chip is selected/deselected\n     */\n    @Event()\n    private change: EventEmitter<Chip | Chip[]>;\n\n    /**\n     * Emitted when an input chip set has received focus and editing in the text field has started\n     */\n    @Event()\n    private startEdit: EventEmitter<void>;\n\n    /**\n     * Emitted when an input chip set has lost focus and editing in the text field has ended\n     */\n    @Event()\n    private stopEdit: EventEmitter<void>;\n\n    /**\n     * Dispatched when the input is changed for type `input`\n     */\n    @Event()\n    private input: EventEmitter<string>;\n\n    @Element()\n    private host: HTMLLimelChipSetElement;\n\n    @State()\n    private editMode: boolean = false;\n\n    @State()\n    private textValue: string = '';\n\n    @State()\n    private blurred: boolean = false;\n\n    @State()\n    private inputChipIndexSelected: number = null;\n\n    @State()\n    private selectedChipIds: Array<string | number>;\n\n    private mdcTextField: MDCTextField;\n    private handleKeyDown = handleKeyboardEvent;\n\n    constructor() {\n        this.renderChip = this.renderChip.bind(this);\n        this.renderInputChip = this.renderInputChip.bind(this);\n        this.isFull = this.isFull.bind(this);\n        this.handleTextFieldFocus = this.handleTextFieldFocus.bind(this);\n        this.handleInputBlur = this.handleInputBlur.bind(this);\n        this.handleTextInput = this.handleTextInput.bind(this);\n        this.inputFieldOnChange = this.inputFieldOnChange.bind(this);\n        this.handleKeyDown = this.handleKeyDown.bind(this);\n        this.inputHidden = this.inputHidden.bind(this);\n        this.handleDeleteAllIconClick =\n            this.handleDeleteAllIconClick.bind(this);\n        this.renderDelimiter = this.renderDelimiter.bind(this);\n    }\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    private initialize() {\n        if (this.value.length) {\n            this.selectedChipIds = this.value\n                .filter((chip) => chip.selected)\n                .map((chip) => chip.id);\n        }\n    }\n\n    /**\n     * Used to find out whether the chip-set is in edit mode.\n     *\n     * @returns `true` if the chip-set is in edit mode, `false` otherwise.\n     */\n    @Method()\n    public async getEditMode(): Promise<boolean> {\n        return this.editMode;\n    }\n\n    /**\n     * Used to set focus to the chip-set input field.\n     *\n     * @param emptyInput - if `true`, any text in the input is discarded\n     * @returns does not return anything, but methods have to be async\n     */\n    @Method()\n    public async setFocus(emptyInput: boolean = false) {\n        if (this.disabled || this.readonly) {\n            return;\n        }\n\n        this.editMode = true;\n        if (emptyInput) {\n            this.textValue = '';\n        }\n\n        this.host.shadowRoot.querySelector('input').focus();\n        this.startEdit.emit();\n    }\n\n    /**\n     * Used to empty the input field. Used in conjunction with `emptyInputOnBlur` to let the\n     * consumer control when the input is emptied.\n     *\n     * @returns does not return anything, but methods have to be async\n     */\n    @Method()\n    public async emptyInput() {\n        this.syncEmptyInput();\n    }\n\n    public componentDidLoad() {\n        this.triggerIconColorWarning(this.value);\n\n        if (this.type === 'input') {\n            this.mdcTextField = new MDCTextField(\n                this.host.shadowRoot.querySelector('.mdc-text-field'),\n            );\n        }\n    }\n\n    public componentDidUpdate() {\n        const input = this.host.shadowRoot.querySelector('input');\n        if (input && this.editMode) {\n            input.focus();\n        }\n    }\n\n    public disconnectedCallback() {\n        if (this.mdcTextField) {\n            this.mdcTextField.destroy();\n        }\n    }\n\n    public render() {\n        if (this.type === 'input') {\n            return this.renderInputChips();\n        }\n\n        const classes = {\n            'mdc-chip-set': true,\n            disabled: this.disabled || this.readonly,\n            'mdc-text-field--with-trailing-icon': true,\n        };\n        if (this.type) {\n            classes[`mdc-chip-set--${this.type}`] = true;\n        }\n\n        const chipSetLabel = this.renderChipSetLabel();\n        if (chipSetLabel) {\n            classes['chip-set--with-label'] = true;\n        }\n\n        const value = this.getValue();\n\n        return (\n            <div class={classes} role=\"grid\">\n                {chipSetLabel}\n                {value.map(this.renderChip)}\n                {this.renderHelperLine()}\n            </div>\n        );\n    }\n\n    private getValue = () => {\n        return this.value.map((chip) => ({\n            ...chip,\n            ...(this.type && {\n                selected: this.selectedChipIds.includes(chip.id),\n            }),\n        }));\n    };\n\n    @Watch('value')\n    protected handleChangeChips(newValue: Chip[], oldValue: Chip[]) {\n        if (isEqual(newValue, oldValue)) {\n            return;\n        }\n\n        this.syncEmptyInput();\n        this.initialize();\n    }\n\n    private renderChipSetLabel() {\n        if (!this.label) {\n            return;\n        }\n\n        return (\n            <label class=\"chip-set__label mdc-floating-label mdc-floating-label--float-above\">\n                {this.label}\n            </label>\n        );\n    }\n\n    private renderInputChips() {\n        return [\n            <div\n                class={{\n                    'mdc-text-field mdc-text-field--outlined': true,\n                    'mdc-chip-set mdc-chip-set--input': true,\n                    'force-invalid': this.isInvalid(),\n                    'mdc-text-field--disabled': this.readonly || this.disabled,\n                    'lime-text-field--readonly': this.readonly,\n                    'has-chips mdc-text-field--label-floating':\n                        this.value.length !== 0,\n                    'has-leading-icon': this.leadingIcon !== null,\n                    'has-clear-all-button': this.clearAllButton,\n                }}\n                onClick={this.handleTextFieldFocus}\n            >\n                {this.value.map(this.renderInputChip)}\n                <input\n                    tabIndex={INPUT_FIELD_TABINDEX}\n                    type={this.inputType}\n                    id=\"input-element\"\n                    disabled={this.readonly || this.disabled}\n                    class={{\n                        'mdc-text-field__input': true,\n                        hidden: this.inputHidden(),\n                    }}\n                    value={this.textValue}\n                    onBlur={this.handleInputBlur}\n                    onFocus={this.handleTextFieldFocus}\n                    onKeyDown={this.handleKeyDown}\n                    onInput={this.handleTextInput}\n                    // Some browsers emit a change event on input elements, we need to stop\n                    // that event from propagating since we are emitting our own change event\n                    onChange={this.inputFieldOnChange}\n                    placeholder={this.isFull() ? '' : this.searchLabel}\n                    readonly={this.isFull()}\n                />\n                <div\n                    class={{\n                        'mdc-notched-outline': true,\n                        'mdc-notched-outline--upgraded': true,\n                        'mdc-text-field--required': this.required,\n                        'lime-notched-outline--notched': this.floatLabelAbove(),\n                    }}\n                    dropzone-tip={this.dropZoneTip()}\n                >\n                    <div class=\"mdc-notched-outline__leading\" />\n                    {this.renderLabel()}\n                    <div class=\"mdc-notched-outline__trailing\" />\n                </div>\n                {this.renderLeadingIcon()}\n                {this.renderEmptyValueForReadonly()}\n                {this.renderClearAllChipsButton()}\n            </div>,\n            this.renderHelperLine(),\n        ];\n    }\n\n    private renderEmptyValueForReadonly = () => {\n        if (this.readonly && this.value.length === 0) {\n            return (\n                <span class=\"lime-empty-value-for-readonly lime-looks-like-input-value\">\n                    –\n                </span>\n            );\n        }\n    };\n\n    private renderLabel() {\n        const labelClassList = {\n            'mdc-floating-label': true,\n            'mdc-text-field--disabled': this.readonly || this.disabled,\n            'mdc-floating-label--required': this.required,\n            'lime-floating-label--float-above': this.floatLabelAbove(),\n        };\n\n        if (!this.label) {\n            return;\n        }\n\n        return (\n            <div class=\"mdc-notched-outline__notch\">\n                <label class={labelClassList} htmlFor=\"input-element\">\n                    {this.label}\n                </label>\n            </div>\n        );\n    }\n\n    private floatLabelAbove = () => {\n        if (!!this.value.length || this.editMode || this.readonly) {\n            return true;\n        }\n    };\n\n    private dropZoneTip = (): string => {\n        return translate.get('file.drag-and-drop-tips', this.language);\n    };\n\n    private isFull(): boolean {\n        return !!this.maxItems && this.value.length >= this.maxItems;\n    }\n\n    private isInvalid() {\n        if (this.readonly) {\n            // A readonly field can never be invalid.\n            return false;\n        }\n\n        if (this.invalid) {\n            return true;\n        }\n\n        if (!this.required) {\n            return false;\n        }\n\n        if (!this.blurred) {\n            return false;\n        }\n\n        return !this.value || !this.value.length;\n    }\n\n    private inputFieldOnChange(event) {\n        event.stopPropagation();\n    }\n\n    /**\n     * Enter edit mode when the text field receives focus. When editMode is true, the input element will be visible\n     */\n    private handleTextFieldFocus() {\n        if (this.disabled || this.readonly) {\n            return;\n        }\n\n        if (this.editMode) {\n            return;\n        }\n\n        this.editMode = true;\n        this.startEdit.emit();\n    }\n\n    /**\n     * Exit edit mode when the input element loses focus. This makes sure the input element does not take up any\n     * additional space when the user it not typing anything\n     */\n    private handleInputBlur() {\n        if (this.emptyInputOnBlur) {\n            this.syncEmptyInput();\n        }\n\n        this.editMode = false;\n        this.blurred = true;\n        this.inputChipIndexSelected = null;\n\n        // This timeout is needed in order to let a new element receive focus\n        setTimeout(() => {\n            this.stopEdit.emit();\n        }, 0);\n    }\n\n    private syncEmptyInput() {\n        this.textValue = '';\n    }\n\n    private inputHidden() {\n        if (this.editMode) {\n            return this.isFull();\n        }\n\n        // If there are chips in the picker, hide the input to avoid the input\n        // being placed on a new line and adding ugly space beneath the chips.\n        // If there are no chips, show the input, or the picker will look weird.\n        return !!(this.value && this.value.length);\n    }\n\n    private handleTextInput(event) {\n        event.stopPropagation();\n        this.inputChipIndexSelected = null;\n        this.textValue = event.target.value;\n        this.input.emit(event.target.value && event.target.value.trim());\n    }\n\n    private emitInteraction(chip: Chip) {\n        this.interact.emit(chip);\n    }\n\n    private renderChip(chip: Chip) {\n        const chipType: ChipType =\n            this.type === 'filter' ? 'filter' : 'default';\n\n        const chipProps = this.getChipProps(chip, chipType);\n\n        return <limel-chip {...chipProps} />;\n    }\n\n    private hasHelperText = () => {\n        return this.helperText !== null && this.helperText !== undefined;\n    };\n\n    private renderHelperLine = () => {\n        if (!this.maxItems && !this.hasHelperText()) {\n            return;\n        }\n\n        return (\n            <limel-helper-line\n                length={this.value.length}\n                maxLength={this.maxItems}\n                helperText={this.helperText}\n                invalid={this.isInvalid()}\n            />\n        );\n    };\n\n    private renderInputChip(chip: Chip, index: number) {\n        const chipProps = this.getChipProps(chip, 'default');\n\n        return [\n            <limel-chip\n                key={chip.id}\n                class={{\n                    'can-be-removed': this.inputChipIndexSelected === index,\n                }}\n                {...chipProps}\n            />,\n            this.renderDelimiter(),\n        ];\n    }\n\n    private getChipProps(chip: Chip, chipType: ChipType) {\n        const removable = this.type === 'input' && chip.removable;\n\n        return {\n            role: 'row',\n            identifier: chip.id,\n            text: chip.text,\n            icon: chip.icon,\n            badge: chip.badge,\n            selected: chip.selected,\n            disabled: this.disabled,\n            readonly: this.readonly,\n            type: chipType,\n            removable: removable,\n            onClick: this.catchInputChipClicks(chip),\n            onRemove: this.handleRemoveChip,\n            ...(chip.href && {\n                link: {\n                    href: getHref(chip.href),\n                    target: getTarget(chip.href),\n                },\n            }),\n        };\n    }\n\n    private catchInputChipClicks = (chip: Chip) => () => {\n        if (this.isSelectableChip(chip)) {\n            this.updateSelectedChipIds(chip);\n            this.change.emit(chip);\n        }\n\n        this.emitInteraction(chip);\n    };\n\n    private isSelectableChip(chip: Chip): boolean {\n        return this.type !== 'input' && 'selected' in chip;\n    }\n\n    private updateSelectedChipIds(chip: Chip): void {\n        chip.selected = !chip.selected;\n        const id = chip.id;\n        if (this.type === 'choice') {\n            this.updateChoiceTypeSelectedIds(id);\n        } else {\n            this.updateFilterTypeSelectedIds(id);\n        }\n    }\n\n    private updateChoiceTypeSelectedIds(id: number | string): void {\n        this.selectedChipIds = this.isChipSelected(id) ? [] : [id];\n    }\n\n    private isChipSelected(id: number | string): boolean {\n        return !!this.selectedChipIds.find((chipId) => chipId === id);\n    }\n\n    private updateFilterTypeSelectedIds(id: number | string): void {\n        if (this.isChipSelected(id)) {\n            this.removeChipIdFromSelectedChipIds(id);\n        } else {\n            this.addChipIdToSelectedChipIds(id);\n        }\n    }\n\n    private removeChipIdFromSelectedChipIds(id: number | string): void {\n        this.selectedChipIds = this.selectedChipIds.filter(\n            (chipId) => chipId !== id,\n        );\n    }\n\n    private addChipIdToSelectedChipIds(id: number | string): void {\n        this.selectedChipIds = [...this.selectedChipIds, id];\n    }\n\n    private handleRemoveChip = (\n        event: LimelChipCustomEvent<string | number>,\n    ) => {\n        this.removeChip(event.detail);\n    };\n\n    private removeChip = (identifier: string | number) => {\n        const newValue = this.value.filter((chip) => {\n            return chip.id !== identifier;\n        });\n        this.change.emit(newValue);\n    };\n\n    private renderLeadingIcon() {\n        if (!this.leadingIcon) {\n            return;\n        }\n\n        return (\n            <i class=\"mdc-text-field__icon search-icon\">\n                <limel-icon name={this.leadingIcon} />\n            </i>\n        );\n    }\n\n    private renderClearAllChipsButton() {\n        if (this.disabled || this.readonly || !this.clearAllButton) {\n            return;\n        }\n\n        return (\n            <a\n                href=\"\"\n                onClick={this.handleDeleteAllIconClick}\n                class=\"mdc-text-field__icon clear-all-button\"\n                tabindex=\"0\"\n                role=\"button\"\n                title={this.clearAllChipsLabel()}\n                aria-label={this.clearAllChipsLabel()}\n            />\n        );\n    }\n\n    private clearAllChipsLabel = (): string => {\n        return translate.get('chip-set.clear-all', this.language);\n    };\n\n    private handleDeleteAllIconClick(event: Event) {\n        event.preventDefault();\n        this.change.emit([]);\n    }\n\n    private renderDelimiter() {\n        if (!this.delimiter) {\n            return;\n        }\n\n        return <div class=\"delimiter\">{this.delimiter}</div>;\n    }\n\n    private triggerIconColorWarning(value: Chip[]) {\n        for (const chip of value) {\n            if (\n                chip.icon &&\n                (chip.iconFillColor ||\n                    chip.iconBackgroundColor ||\n                    chip.iconTitle)\n            ) {\n                /* eslint-disable-next-line no-console */\n                console.warn(\n                    \"The `iconFillColor`, `iconBackgroundColor`, and `iconTitle` props are deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name', `iconBackgroundColor: 'color-name', and `iconTitle: 'title'`, write `icon { name: 'icon-name', color: 'color-name', backgroundColor: 'color-name', title: 'title' }`.\",\n                );\n            }\n        }\n    }\n}\n"],"mappings":"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"}

package/dist/lime-elements/p-27330d1d.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as i,H as t}from"./p-3075aa67.js";const s=":host(limel-helper-line){transition:opacity 0.2s ease;box-sizing:border-box;display:grid;min-width:0;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:0.6875rem;line-height:normal;color:rgb(var(--contrast-1200))}div{display:flex;justify-content:space-between;gap:0.75rem;overflow:hidden;padding:0 1rem}:host(limel-helper-line.invalid) .helper-text{color:var(--mdc-theme-error)}.counter{flex-shrink:0;margin-left:auto}.helper-text,.counter{padding-top:0.125rem}:host(limel-helper-line){transition:grid-template-rows var(--limel-h-l-grid-template-rows-transition-speed, 0.46s) cubic-bezier(1, 0.09, 0, 0.89);grid-template-rows:var(--limel-h-l-grid-template-rows, 1fr)}:host(limel-helper-line.hide){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}";const r=class{constructor(t){e(this,t);this.hasContent=()=>!!(this.maxLength>0||this.helperText&&this.helperText.length>0);this.renderHelperText=()=>{if(!this.helperText){return}return i("span",{class:"helper-text",id:this.helperTextId},this.helperText)};this.renderCharacterCounter=()=>{const e=`${this.length} / ${this.maxLength}`;if(!this.maxLength){return}return i("span",{class:"counter"},e)};this.helperText=undefined;this.length=undefined;this.maxLength=undefined;this.invalid=false;this.helperTextId=undefined}render(){return i(t,{tabIndex:-1,class:{invalid:this.invalid},style:!this.hasContent()?{display:"none"}:{},"aria-hidden":!this.hasContent()},i("div",null,this.renderHelperText(),this.renderCharacterCounter()))}};r.style=s;export{r as limel_helper_line};
+//# sourceMappingURL=p-27330d1d.entry.js.map

package/dist/lime-elements/p-27330d1d.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["helperLineCss","HelperLine","this","hasContent","maxLength","helperText","length","renderHelperText","h","class","id","helperTextId","renderCharacterCounter","counter","render","Host","tabIndex","invalid","style","display"],"sources":["./src/components/helper-line/helper-line.scss?tag=limel-helper-line&encapsulation=shadow","./src/components/helper-line/helper-line.tsx"],"sourcesContent":[":host(limel-helper-line) {\n    transition: opacity 0.2s ease;\n\n    box-sizing: border-box;\n    display: grid;\n\n    min-width: 0; // prevents overflowing, if component is placed in flex containers\n\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-font-smoothing: antialiased;\n    font-size: 0.6875rem;\n    line-height: normal;\n\n    color: rgb(var(--contrast-1200));\n}\n\ndiv {\n    display: flex;\n    justify-content: space-between;\n    gap: 0.75rem;\n    overflow: hidden;\n    padding: 0 1rem;\n}\n\n:host(limel-helper-line.invalid) {\n    .helper-text {\n        color: var(--mdc-theme-error);\n    }\n}\n\n.counter {\n    flex-shrink: 0;\n    margin-left: auto;\n}\n\n.helper-text,\n.counter {\n    padding-top: 0.125rem;\n}\n\n// This animates height of the helper line, from `0` to `auto`.\n// To get this animation effect, the consumer component should\n// add `hide` classed accordingly.\n:host(limel-helper-line) {\n    transition: grid-template-rows\n        var(--limel-h-l-grid-template-rows-transition-speed, 0.46s)\n        cubic-bezier(1, 0.09, 0, 0.89);\n    grid-template-rows: var(--limel-h-l-grid-template-rows, 1fr);\n}\n\n:host(limel-helper-line.hide) {\n    --limel-h-l-grid-template-rows-transition-speed: 0.3s;\n    --limel-h-l-grid-template-rows: 0fr;\n}\n// End: animating height\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n/**\n * This is an internal and private component that many input fields\n * use to display a helper text, along with a character counter below the\n * input field.\n *\n * We created this to keep the visual styles the same everywhere\n * and to avoid importing styles separately.\n *\n * Also this enables us to open the helper line in limel-portal,\n * more easily without having to send the styles to the portal.\n *\n * @exampleComponent limel-example-helper-line\n * @exampleComponent limel-example-helper-line-invalid\n * @exampleComponent limel-example-helper-line-long-text\n * @exampleComponent limel-example-helper-line-long-text-no-counter\n * @exampleComponent limel-example-helper-line-character-counter\n * @exampleComponent limel-example-helper-line-empty\n * @exampleComponent limel-example-helper-line-animation\n * @private\n */\n@Component({\n    tag: 'limel-helper-line',\n    shadow: true,\n    styleUrl: 'helper-line.scss',\n})\nexport class HelperLine {\n    /**\n     * The helper text that is displayed on the left side.\n     */\n    @Prop({ reflect: true })\n    public helperText?: string;\n\n    /**\n     * Length of the current input value, coming from the parent component.\n     * Used in the character counter section on the right side.\n     */\n    @Prop({ reflect: true })\n    public length?: number;\n\n    /**\n     * Maximum length of the characters, defined on the parent component.\n     * Used in the character counter section on the right side.\n     */\n    @Prop({ reflect: true })\n    public maxLength?: number;\n\n    /**\n     * Turns `true`, when the parent component is invalid.\n     * For example, when the parent component is `required` but is left empty.\n     * Or when the input format is invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid?: boolean = false;\n\n    /**\n     * Used by `aria-controls` and `aria-describedby` in the parent component.\n     */\n    @Prop({ reflect: true })\n    public helperTextId?: string;\n\n    public render() {\n        return (\n            <Host\n                tabIndex={-1}\n                class={{\n                    invalid: this.invalid,\n                }}\n                style={!this.hasContent() ? { display: 'none' } : {}}\n                aria-hidden={!this.hasContent()}\n            >\n                <div>\n                    {this.renderHelperText()}\n                    {this.renderCharacterCounter()}\n                </div>\n            </Host>\n        );\n    }\n\n    private hasContent = () => {\n        return !!(\n            this.maxLength > 0 ||\n            (this.helperText && this.helperText.length > 0)\n        );\n    };\n\n    private renderHelperText = () => {\n        if (!this.helperText) {\n            return;\n        }\n\n        return (\n            <span class=\"helper-text\" id={this.helperTextId}>\n                {this.helperText}\n            </span>\n        );\n    };\n\n    private renderCharacterCounter = () => {\n        const counter = `${this.length} / ${this.maxLength}`;\n\n        if (!this.maxLength) {\n            return;\n        }\n\n        return <span class=\"counter\">{counter}</span>;\n    };\n}\n"],"mappings":"kDAAA,MAAMA,EAAgB,gzB,MC2BTC,EAAU,M,yBAqDXC,KAAAC,WAAa,OAEbD,KAAKE,UAAY,GAChBF,KAAKG,YAAcH,KAAKG,WAAWC,OAAS,GAI7CJ,KAAAK,iBAAmB,KACvB,IAAKL,KAAKG,WAAY,CAClB,M,CAGJ,OACIG,EAAA,QAAMC,MAAM,cAAcC,GAAIR,KAAKS,cAC9BT,KAAKG,WACH,EAIPH,KAAAU,uBAAyB,KAC7B,MAAMC,EAAU,GAAGX,KAAKI,YAAYJ,KAAKE,YAEzC,IAAKF,KAAKE,UAAW,CACjB,M,CAGJ,OAAOI,EAAA,QAAMC,MAAM,WAAWI,EAAe,E,sFApDtB,M,4BAQpBC,SACH,OACIN,EAACO,EAAI,CACDC,UAAW,EACXP,MAAO,CACHQ,QAASf,KAAKe,SAElBC,OAAQhB,KAAKC,aAAe,CAAEgB,QAAS,QAAW,GAAE,eACtCjB,KAAKC,cAEnBK,EAAA,WACKN,KAAKK,mBACLL,KAAKU,0B"}

package/dist/lime-elements/{p-854343a1.entry.js → p-27d64a5a.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as t,h as r,g as s}from"./p-3075aa67.js";import{g as o}from"./p-4d92b6fb.js";const i="@charset \"UTF-8\";.flow-item{--step-background:var(\n      --progress-flow-step-background-color,\n      rgb(var(--contrast-600))\n  );--step-background--selected:var(\n      --progress-flow-step-background-color--selected,\n      var(--mdc-theme-primary)\n  );--step-background--passed:var(\n      --progress-flow-step-background-color--passed,\n      var(--step-background--selected)\n  );--step-text:var(\n      --progress-flow-step-text-color,\n      rgb(var(--contrast-1200))\n  );--step-text--selected:var(\n      --progress-flow-step-text-color--selected,\n      var(--mdc-theme-on-primary)\n  );--step-text--passed:var(\n      --progress-flow-step-text-color--passed,\n      var(--step-text--selected)\n  );--step-divider-color:var(\n      --progress-flow-step-divider-color,\n      rgb(var(--contrast-100))\n  );position:relative;width:100%;display:flex;flex-direction:column;align-items:stretch}.flow-item:not(.off-progress-item,.last) .divider:after{content:\"\"}.flow-item.off-progress-item{padding-left:0.5rem}.flow-item.first-off-progress-item{padding-left:1rem}.step{transition:background-color 0.2s ease, box-shadow 0.2s ease;display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:var(--step-height);border:none;font-size:0.875rem}.step.disabled{cursor:not-allowed}.step.disabled.readonly{opacity:1;cursor:default}.step:focus{outline:none}.step:focus-visible{box-shadow:var(--shadow-depth-8-focused)}.flow-item:not(.off-progress-item,.first) .step{padding-left:calc(var(--step-height) / 2)}.flow-item:not(.selected) .step:not(.disabled){cursor:pointer}.flow-item:not(.selected) .step:not(.disabled):hover{box-shadow:var(--button-shadow-normal)}.flow-item:not(.selected) .step:not(.disabled):active{box-shadow:var(--button-shadow-pressed)}.off-progress-item .step{border-radius:0.25rem;padding:0 0.75rem}.off-progress-item .step .icon{margin-left:0}.flow-item.first .step{border-top-left-radius:var(--step-height);border-bottom-left-radius:var(--step-height);padding-left:1.25rem}.flow-item.last .step{border-top-right-radius:var(--step-height);border-bottom-right-radius:var(--step-height);padding-right:1.25rem}.divider{display:flex;align-items:center;justify-content:center;width:var(--step-height);height:var(--step-height);position:absolute;z-index:1;right:calc(var(--step-height) / 2 * -1);overflow:hidden}.divider:after{position:absolute;display:block;box-sizing:border-box;transition:background-color 0.2s ease;width:100%;height:100%;right:calc(var(--step-height) / 5);transform:rotate(45deg);border-style:solid;border-width:0.125rem 0.125rem 0 0;border-radius:0 0.5rem 0 0;border-color:var(--step-divider-color)}.flow-item.last .divider{width:0}.text,.secondary-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:var(--max-text-width);z-index:2}.secondary-text{font-size:0.75rem;margin:auto;padding-left:calc(var(--step-height) / 2)}.icon{margin:0 0.5rem 0 0.25rem;z-index:2}.step:before,.step:after{pointer-events:none;box-sizing:border-box;z-index:2;position:absolute;right:var(--selected-indicator-right);border-radius:50%}.last .step:before,.last .step:after{right:0.5rem}.flow-item:not(.off-progress-item) .step.selected:before,.flow-item:not(.off-progress-item) .step.selected:after{content:\"\";width:0.375rem;height:0.375rem}.flow-item:not(.off-progress-item) .step.selected:before{background-color:var(--step-divider-color);opacity:0.7}.flow-item:not(.off-progress-item) .step.disabled:before,.flow-item:not(.off-progress-item) .step.disabled:after{width:0.75rem;height:0.75rem}.flow-item:not(.off-progress-item) .step.disabled:after{content:\"\";background-image:url(\"data:image/svg+xml;charset=utf-8, <svg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill-rule='evenodd' clip-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2'><path fill='rgb(127,127,127)' d='M32.18 13.711c0-2.207-1.793-4-4.002-4H11.821c-2.208 0-4 1.793-4 4V28.29a4 4 0 0 0 4 4h16.357a4.002 4.002 0 0 0 4.001-4V13.711Z'/><path fill='rgb(127,127,127)' d='M11.211 9.758V7.673A7.489 7.489 0 0 1 18.696.188h2.608a7.489 7.489 0 0 1 7.485 7.485v2.085h-3V7.673a4.488 4.488 0 0 0-4.485-4.485h-2.608a4.488 4.488 0 0 0-4.485 4.485v2.085h-3Z'/></svg>\");background-size:90%;background-repeat:no-repeat;background-position:center;mix-blend-mode:multiply}.step{color:var(--step-text);background-color:var(--step-background)}.step .icon{color:var(--progress-flow-icon-color--inactive, var(--step-text))}.flow-item.selected .step{color:var(--step-text--selected);background-color:var(--step-background--selected)}.flow-item.selected .step .divider:after{background-color:var(--step-background--selected)}.flow-item.selected .step .icon{color:var(--step-text--selected)}.flow-item.passed .step{color:var(--step-text--passed);background-color:var(--step-background--passed)}.flow-item.passed .step .divider:after{background-color:var(--step-background--passed)}.flow-item.passed .step .icon{color:var(--step-text--passed)}.divider:after{border-color:var(--step-divider-color);background-color:var(--step-background)}";const a=class{constructor(r){e(this,r);this.interact=t(this,"interact",7);this.handleClick=()=>{this.interact.emit()};this.item=null;this.disabled=false;this.readonly=false;this.currentStep=false}render(){var e;if(!this.item){return}return[r("button",{tabindex:"0",title:this.getToolTipText(),type:"button",class:{step:true,selected:(e=this.item)===null||e===void 0?void 0:e.selected,disabled:this.isDisabled(),readonly:this.readonly},onClick:this.handleClick,disabled:this.isDisabled(),"aria-current":this.currentStep?"step":null},this.renderIcon(),r("span",{class:"text"},this.item.text),this.renderDivider()),this.renderSecondaryText()]}isDisabled(){var e;return((e=this.item)===null||e===void 0?void 0:e.disabled)||this.readonly||this.disabled}getToolTipText(){if(!this.item.secondaryText){return this.item.text}return[this.item.text,this.item.secondaryText].join(" · ")}renderSecondaryText(){var e;if(!((e=this.item)===null||e===void 0?void 0:e.secondaryText)){return}return r("div",{class:"secondary-text"},this.item.secondaryText)}renderIcon(){if(!this.item.icon){return}const e=o(this.item.icon);return r("limel-icon",{name:e,size:"small",class:"icon"})}renderDivider(){if(this.item.isOffProgress){return}return r("div",{class:"divider"})}get element(){return s(this)}};a.style=i;export{a as limel_progress_flow_item};
-//# sourceMappingURL=p-854343a1.entry.js.map
+import{r as e,c as t,h as r,g as s}from"./p-3075aa67.js";import{g as o}from"./p-2f777fdb.js";const i="@charset \"UTF-8\";.flow-item{--step-background:var(\n      --progress-flow-step-background-color,\n      rgb(var(--contrast-600))\n  );--step-background--selected:var(\n      --progress-flow-step-background-color--selected,\n      var(--mdc-theme-primary)\n  );--step-background--passed:var(\n      --progress-flow-step-background-color--passed,\n      var(--step-background--selected)\n  );--step-text:var(\n      --progress-flow-step-text-color,\n      rgb(var(--contrast-1200))\n  );--step-text--selected:var(\n      --progress-flow-step-text-color--selected,\n      var(--mdc-theme-on-primary)\n  );--step-text--passed:var(\n      --progress-flow-step-text-color--passed,\n      var(--step-text--selected)\n  );--step-divider-color:var(\n      --progress-flow-step-divider-color,\n      rgb(var(--contrast-100))\n  );position:relative;width:100%;display:flex;flex-direction:column;align-items:stretch}.flow-item:not(.off-progress-item,.last) .divider:after{content:\"\"}.flow-item.off-progress-item{padding-left:0.5rem}.flow-item.first-off-progress-item{padding-left:1rem}.step{transition:background-color 0.2s ease, box-shadow 0.2s ease;display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:var(--step-height);border:none;font-size:0.875rem}.step.disabled{cursor:not-allowed}.step.disabled.readonly{opacity:1;cursor:default}.step:focus{outline:none}.step:focus-visible{box-shadow:var(--shadow-depth-8-focused)}.flow-item:not(.off-progress-item,.first) .step{padding-left:calc(var(--step-height) / 2)}.flow-item:not(.selected) .step:not(.disabled){cursor:pointer}.flow-item:not(.selected) .step:not(.disabled):hover{box-shadow:var(--button-shadow-normal)}.flow-item:not(.selected) .step:not(.disabled):active{box-shadow:var(--button-shadow-pressed)}.off-progress-item .step{border-radius:0.25rem;padding:0 0.75rem}.off-progress-item .step .icon{margin-left:0}.flow-item.first .step{border-top-left-radius:var(--step-height);border-bottom-left-radius:var(--step-height);padding-left:1.25rem}.flow-item.last .step{border-top-right-radius:var(--step-height);border-bottom-right-radius:var(--step-height);padding-right:1.25rem}.divider{display:flex;align-items:center;justify-content:center;width:var(--step-height);height:var(--step-height);position:absolute;z-index:1;right:calc(var(--step-height) / 2 * -1);overflow:hidden}.divider:after{position:absolute;display:block;box-sizing:border-box;transition:background-color 0.2s ease;width:100%;height:100%;right:calc(var(--step-height) / 5);transform:rotate(45deg);border-style:solid;border-width:0.125rem 0.125rem 0 0;border-radius:0 0.5rem 0 0;border-color:var(--step-divider-color)}.flow-item.last .divider{width:0}.text,.secondary-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:var(--max-text-width);z-index:2}.secondary-text{font-size:0.75rem;margin:auto;padding-left:calc(var(--step-height) / 2)}.icon{margin:0 0.5rem 0 0.25rem;z-index:2}.step:before,.step:after{pointer-events:none;box-sizing:border-box;z-index:2;position:absolute;right:var(--selected-indicator-right);border-radius:50%}.last .step:before,.last .step:after{right:0.5rem}.flow-item:not(.off-progress-item) .step.selected:before,.flow-item:not(.off-progress-item) .step.selected:after{content:\"\";width:0.375rem;height:0.375rem}.flow-item:not(.off-progress-item) .step.selected:before{background-color:var(--step-divider-color);opacity:0.7}.flow-item:not(.off-progress-item) .step.disabled:before,.flow-item:not(.off-progress-item) .step.disabled:after{width:0.75rem;height:0.75rem}.flow-item:not(.off-progress-item) .step.disabled:after{content:\"\";background-image:url(\"data:image/svg+xml;charset=utf-8, <svg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill-rule='evenodd' clip-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2'><path fill='rgb(127,127,127)' d='M32.18 13.711c0-2.207-1.793-4-4.002-4H11.821c-2.208 0-4 1.793-4 4V28.29a4 4 0 0 0 4 4h16.357a4.002 4.002 0 0 0 4.001-4V13.711Z'/><path fill='rgb(127,127,127)' d='M11.211 9.758V7.673A7.489 7.489 0 0 1 18.696.188h2.608a7.489 7.489 0 0 1 7.485 7.485v2.085h-3V7.673a4.488 4.488 0 0 0-4.485-4.485h-2.608a4.488 4.488 0 0 0-4.485 4.485v2.085h-3Z'/></svg>\");background-size:90%;background-repeat:no-repeat;background-position:center;mix-blend-mode:multiply}.step{color:var(--step-text);background-color:var(--step-background)}.step .icon{color:var(--progress-flow-icon-color--inactive, var(--step-text))}.flow-item.selected .step{color:var(--step-text--selected);background-color:var(--step-background--selected)}.flow-item.selected .step .divider:after{background-color:var(--step-background--selected)}.flow-item.selected .step .icon{color:var(--step-text--selected)}.flow-item.passed .step{color:var(--step-text--passed);background-color:var(--step-background--passed)}.flow-item.passed .step .divider:after{background-color:var(--step-background--passed)}.flow-item.passed .step .icon{color:var(--step-text--passed)}.divider:after{border-color:var(--step-divider-color);background-color:var(--step-background)}";const a=class{constructor(r){e(this,r);this.interact=t(this,"interact",7);this.handleClick=()=>{this.interact.emit()};this.item=null;this.disabled=false;this.readonly=false;this.currentStep=false}render(){var e;if(!this.item){return}return[r("button",{tabindex:"0",title:this.getToolTipText(),type:"button",class:{step:true,selected:(e=this.item)===null||e===void 0?void 0:e.selected,disabled:this.isDisabled(),readonly:this.readonly},onClick:this.handleClick,disabled:this.isDisabled(),"aria-current":this.currentStep?"step":null},this.renderIcon(),r("span",{class:"text"},this.item.text),this.renderDivider()),this.renderSecondaryText()]}isDisabled(){var e;return((e=this.item)===null||e===void 0?void 0:e.disabled)||this.readonly||this.disabled}getToolTipText(){if(!this.item.secondaryText){return this.item.text}return[this.item.text,this.item.secondaryText].join(" · ")}renderSecondaryText(){var e;if(!((e=this.item)===null||e===void 0?void 0:e.secondaryText)){return}return r("div",{class:"secondary-text"},this.item.secondaryText)}renderIcon(){if(!this.item.icon){return}const e=o(this.item.icon);return r("limel-icon",{name:e,size:"small",class:"icon"})}renderDivider(){if(this.item.isOffProgress){return}return r("div",{class:"divider"})}get element(){return s(this)}};a.style=i;export{a as limel_progress_flow_item};
+//# sourceMappingURL=p-27d64a5a.entry.js.map

package/dist/lime-elements/p-2f777fdb.js

@@ -0,0 +1,2 @@
+function n(n){if(!!n&&typeof n==="object"&&"name"in n){return n.name}if(typeof n==="string"){return n}return undefined}function e(n,e){if(!!n&&typeof n==="object"&&"color"in n){return n.color}if(typeof n==="string"){return e}return undefined}function r(n,e){if(!!n&&typeof n==="object"&&"color"in n){return n.color}if(typeof n==="string"){return e}return undefined}function t(n,e){if(!!n&&typeof n==="object"&&"backgroundColor"in n){return n.backgroundColor}if(typeof n==="string"){return e}return undefined}export{e as a,t as b,r as c,n as g};
+//# sourceMappingURL=p-2f777fdb.js.map

package/dist/lime-elements/p-2f777fdb.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getIconName","icon","name","undefined","getIconColor","iconColor","color","getIconFillColor","iconFillColor","getIconBackgroundColor","iconBackgroundColor","backgroundColor"],"sources":["./src/components/icon/get-icon-props.ts"],"sourcesContent":["import { Icon } from '../../interface';\n\n/**\n * Get the icon name.\n * This helps in setting the right icon, both if the consumer only types `icon: string`,\n * and if they use the `Icon` interface for writing the icon name.\n *\n * @param icon - The icon to retrieve the name from.\n * @returns - The icon name or the provided string, or `undefined` if `icon` is falsy.\n */\nexport function getIconName(\n    icon: string | Icon | undefined,\n): string | undefined {\n    if (!!icon && typeof icon === 'object' && 'name' in icon) {\n        return icon.name;\n    }\n\n    if (typeof icon === 'string') {\n        return icon;\n    }\n\n    return undefined;\n}\n\n/**\n * Get the icon color.\n * This is added because the old way of specifying `iconColor`\n * deprecated in our components. So consumers should now use the new\n * `Icon` interface instead. But our components must still support the\n * old way of writing `iconColor: string`.\n *\n * @param icon - The icon to retrieve the color from.\n * @param iconColor - The color to use when the deprecated `iconColor` is used.\n * @returns - The icon color or the provided color string, or `undefined` if `iconColor` is falsy.\n */\nexport function getIconColor(\n    icon: string | Icon | undefined,\n    iconColor?: string | undefined,\n): string | undefined {\n    if (!!icon && typeof icon === 'object' && 'color' in icon) {\n        return icon.color;\n    }\n\n    if (typeof icon === 'string') {\n        return iconColor;\n    }\n\n    return undefined;\n}\n\n/**\n * Get the icon color.\n * This is added because the old way of specifying `iconFillColor` is\n * deprecated in our components. So consumers should now use the new\n * `Icon` interface instead. But our components must still support the\n * old way of writing `iconFillColor: string`.\n *\n * @param icon - The icon to retrieve the color from.\n * @param iconFillColor - The color to use when `iconFillColor` is used.\n * @returns - The icon color or the provided color string, or `undefined` if `iconColor` is falsy.\n */\nexport function getIconFillColor(\n    icon: string | Icon | undefined,\n    iconFillColor?: string | undefined,\n): string | undefined {\n    if (!!icon && typeof icon === 'object' && 'color' in icon) {\n        return icon.color;\n    }\n\n    if (typeof icon === 'string') {\n        return iconFillColor;\n    }\n\n    return undefined;\n}\n\n/**\n * Get the icon background color.\n * This function is used to retrieve the background color associated with an icon,\n * whether provided as a string or using the `Icon` interface.\n *\n * @param icon - The icon to retrieve the background color from.\n * @param iconBackgroundColor - The background color to use when provided explicitly.\n * @returns - The icon background color or the provided background color string, or `undefined` if `iconBackgroundColor` is falsy.\n */\nexport function getIconBackgroundColor(\n    icon: string | Icon | undefined,\n    iconBackgroundColor?: string | undefined,\n): string | undefined {\n    if (!!icon && typeof icon === 'object' && 'backgroundColor' in icon) {\n        return icon.backgroundColor;\n    }\n\n    if (typeof icon === 'string') {\n        return iconBackgroundColor;\n    }\n\n    return undefined;\n}\n\n/**\n * Get the icon title.\n * This function is used to retrieve the title associated with an icon, whether provided as a string or using the `Icon` interface.\n *\n * @param icon - The icon to retrieve the title from.\n * @param iconTitle - The title to use when provided explicitly.\n * @returns - The icon title or the provided title string, or `undefined` if `iconTitle` is falsy.\n */\nexport function getIconTitle(\n    icon: string | Icon | undefined,\n    iconTitle?: string | undefined,\n): string | undefined {\n    if (!!icon && typeof icon === 'object' && 'title' in icon) {\n        return icon.title;\n    }\n\n    if (typeof icon === 'string') {\n        return iconTitle;\n    }\n\n    return undefined;\n}\n"],"mappings":"SAUgBA,EACZC,GAEA,KAAMA,UAAeA,IAAS,UAAY,SAAUA,EAAM,CACtD,OAAOA,EAAKC,I,CAGhB,UAAWD,IAAS,SAAU,CAC1B,OAAOA,C,CAGX,OAAOE,SACX,C,SAagBC,EACZH,EACAI,GAEA,KAAMJ,UAAeA,IAAS,UAAY,UAAWA,EAAM,CACvD,OAAOA,EAAKK,K,CAGhB,UAAWL,IAAS,SAAU,CAC1B,OAAOI,C,CAGX,OAAOF,SACX,C,SAagBI,EACZN,EACAO,GAEA,KAAMP,UAAeA,IAAS,UAAY,UAAWA,EAAM,CACvD,OAAOA,EAAKK,K,CAGhB,UAAWL,IAAS,SAAU,CAC1B,OAAOO,C,CAGX,OAAOL,SACX,C,SAWgBM,EACZR,EACAS,GAEA,KAAMT,UAAeA,IAAS,UAAY,oBAAqBA,EAAM,CACjE,OAAOA,EAAKU,e,CAGhB,UAAWV,IAAS,SAAU,CAC1B,OAAOS,C,CAGX,OAAOP,SACX,Q"}

package/dist/lime-elements/{p-554cdf9e.entry.js → p-5903e050.entry.js}

@@ -1,2 +1,2 @@
-import{r,c as o,h as a}from"./p-3075aa67.js";const l=["red","pink","magenta","purple","violet","indigo","blue","sky","cyan","teal","green","lime","grass","yellow","amber","orange","coral","brown","gray","glaucous"];const c=["lighter","light","default","dark","darker"];function e(r,o){return`--color-${r}-${o}`}function t(r,o){return`rgb(var(${e(r,o)}))`}const g='@charset "UTF-8";.color-palette{display:grid;gap:0.25rem;grid-auto-flow:column;margin:0.75rem auto 1.25rem auto;padding:1.25rem 0.75rem;background-color:rgb(var(--kompendium-contrast-300));border-radius:0.1875rem}.brightness-label,.swatch{display:flex;align-items:center;position:relative}.swatch{transition:border-radius 0.2s ease;border-radius:3px;justify-content:center;color:rgba(var(--kompendium-color-white), 0.4);font-size:1.25rem;line-height:99%}.swatch:after{content:"";display:block;padding-top:100%}.swatch.hue{font-family:"Source Code Pro", monospace;font-size:0.75rem;position:relative;color:rgb(var(--kompendium-contrast-900));padding-top:0.5rem;writing-mode:vertical-lr;justify-content:left}.brightness-label{font-family:"Source Code Pro", monospace;font-size:0.75rem;color:rgb(var(--kompendium-contrast-900));justify-content:start}.brand-colors-tips{transition:opacity 0.2s ease 0.4s;opacity:0;font-size:0.875rem;padding-left:2.75rem;margin-bottom:2.5rem}.brand-colors .brand-colors-tips{opacity:1}@media (prefers-color-scheme: light){.brand-colors .--color-glaucous-default,.brand-colors .--color-gray-dark{border-radius:50%}}@media (prefers-color-scheme: dark){.brand-colors .--color-red-light,.brand-colors .--color-magenta-default,.brand-colors .--color-sky-light,.brand-colors .--color-teal-light,.brand-colors .--color-green-light,.brand-colors .--color-amber-light,.brand-colors .--color-amber-default,.brand-colors .--color-coral-light,.brand-colors .--color-gray-light{border-radius:50%}}.--color-red-lighter{background-color:rgb(var(--color-red-lighter))}.--color-red-light{background-color:rgb(var(--color-red-light))}.--color-red-default{background-color:rgb(var(--color-red-default))}.--color-red-dark{background-color:rgb(var(--color-red-dark))}.--color-red-darker{background-color:rgb(var(--color-red-darker))}.--color-pink-lighter{background-color:rgb(var(--color-pink-lighter))}.--color-pink-light{background-color:rgb(var(--color-pink-light))}.--color-pink-default{background-color:rgb(var(--color-pink-default))}.--color-pink-dark{background-color:rgb(var(--color-pink-dark))}.--color-pink-darker{background-color:rgb(var(--color-pink-darker))}.--color-magenta-lighter{background-color:rgb(var(--color-magenta-lighter))}.--color-magenta-light{background-color:rgb(var(--color-magenta-light))}.--color-magenta-default{background-color:rgb(var(--color-magenta-default))}.--color-magenta-dark{background-color:rgb(var(--color-magenta-dark))}.--color-magenta-darker{background-color:rgb(var(--color-magenta-darker))}.--color-purple-lighter{background-color:rgb(var(--color-purple-lighter))}.--color-purple-light{background-color:rgb(var(--color-purple-light))}.--color-purple-default{background-color:rgb(var(--color-purple-default))}.--color-purple-dark{background-color:rgb(var(--color-purple-dark))}.--color-purple-darker{background-color:rgb(var(--color-purple-darker))}.--color-violet-lighter{background-color:rgb(var(--color-violet-lighter))}.--color-violet-light{background-color:rgb(var(--color-violet-light))}.--color-violet-default{background-color:rgb(var(--color-violet-default))}.--color-violet-dark{background-color:rgb(var(--color-violet-dark))}.--color-violet-darker{background-color:rgb(var(--color-violet-darker))}.--color-indigo-lighter{background-color:rgb(var(--color-indigo-lighter))}.--color-indigo-light{background-color:rgb(var(--color-indigo-light))}.--color-indigo-default{background-color:rgb(var(--color-indigo-default))}.--color-indigo-dark{background-color:rgb(var(--color-indigo-dark))}.--color-indigo-darker{background-color:rgb(var(--color-indigo-darker))}.--color-blue-lighter{background-color:rgb(var(--color-blue-lighter))}.--color-blue-light{background-color:rgb(var(--color-blue-light))}.--color-blue-default{background-color:rgb(var(--color-blue-default))}.--color-blue-dark{background-color:rgb(var(--color-blue-dark))}.--color-blue-darker{background-color:rgb(var(--color-blue-darker))}.--color-sky-lighter{background-color:rgb(var(--color-sky-lighter))}.--color-sky-light{background-color:rgb(var(--color-sky-light))}.--color-sky-default{background-color:rgb(var(--color-sky-default))}.--color-sky-dark{background-color:rgb(var(--color-sky-dark))}.--color-sky-darker{background-color:rgb(var(--color-sky-darker))}.--color-cyan-lighter{background-color:rgb(var(--color-cyan-lighter))}.--color-cyan-light{background-color:rgb(var(--color-cyan-light))}.--color-cyan-default{background-color:rgb(var(--color-cyan-default))}.--color-cyan-dark{background-color:rgb(var(--color-cyan-dark))}.--color-cyan-darker{background-color:rgb(var(--color-cyan-darker))}.--color-teal-lighter{background-color:rgb(var(--color-teal-lighter))}.--color-teal-light{background-color:rgb(var(--color-teal-light))}.--color-teal-default{background-color:rgb(var(--color-teal-default))}.--color-teal-dark{background-color:rgb(var(--color-teal-dark))}.--color-teal-darker{background-color:rgb(var(--color-teal-darker))}.--color-green-lighter{background-color:rgb(var(--color-green-lighter))}.--color-green-light{background-color:rgb(var(--color-green-light))}.--color-green-default{background-color:rgb(var(--color-green-default))}.--color-green-dark{background-color:rgb(var(--color-green-dark))}.--color-green-darker{background-color:rgb(var(--color-green-darker))}.--color-lime-lighter{background-color:rgb(var(--color-lime-lighter))}.--color-lime-light{background-color:rgb(var(--color-lime-light))}.--color-lime-default{background-color:rgb(var(--color-lime-default))}.--color-lime-dark{background-color:rgb(var(--color-lime-dark))}.--color-lime-darker{background-color:rgb(var(--color-lime-darker))}.--color-grass-lighter{background-color:rgb(var(--color-grass-lighter))}.--color-grass-light{background-color:rgb(var(--color-grass-light))}.--color-grass-default{background-color:rgb(var(--color-grass-default))}.--color-grass-dark{background-color:rgb(var(--color-grass-dark))}.--color-grass-darker{background-color:rgb(var(--color-grass-darker))}.--color-yellow-lighter{background-color:rgb(var(--color-yellow-lighter))}.--color-yellow-light{background-color:rgb(var(--color-yellow-light))}.--color-yellow-default{background-color:rgb(var(--color-yellow-default))}.--color-yellow-dark{background-color:rgb(var(--color-yellow-dark))}.--color-yellow-darker{background-color:rgb(var(--color-yellow-darker))}.--color-amber-lighter{background-color:rgb(var(--color-amber-lighter))}.--color-amber-light{background-color:rgb(var(--color-amber-light))}.--color-amber-default{background-color:rgb(var(--color-amber-default))}.--color-amber-dark{background-color:rgb(var(--color-amber-dark))}.--color-amber-darker{background-color:rgb(var(--color-amber-darker))}.--color-orange-lighter{background-color:rgb(var(--color-orange-lighter))}.--color-orange-light{background-color:rgb(var(--color-orange-light))}.--color-orange-default{background-color:rgb(var(--color-orange-default))}.--color-orange-dark{background-color:rgb(var(--color-orange-dark))}.--color-orange-darker{background-color:rgb(var(--color-orange-darker))}.--color-coral-lighter{background-color:rgb(var(--color-coral-lighter))}.--color-coral-light{background-color:rgb(var(--color-coral-light))}.--color-coral-default{background-color:rgb(var(--color-coral-default))}.--color-coral-dark{background-color:rgb(var(--color-coral-dark))}.--color-coral-darker{background-color:rgb(var(--color-coral-darker))}.--color-brown-lighter{background-color:rgb(var(--color-brown-lighter))}.--color-brown-light{background-color:rgb(var(--color-brown-light))}.--color-brown-default{background-color:rgb(var(--color-brown-default))}.--color-brown-dark{background-color:rgb(var(--color-brown-dark))}.--color-brown-darker{background-color:rgb(var(--color-brown-darker))}.--color-gray-lighter{background-color:rgb(var(--color-gray-lighter))}.--color-gray-light{background-color:rgb(var(--color-gray-light))}.--color-gray-default{background-color:rgb(var(--color-gray-default))}.--color-gray-dark{background-color:rgb(var(--color-gray-dark))}.--color-gray-darker{background-color:rgb(var(--color-gray-darker))}.--color-glaucous-lighter{background-color:rgb(var(--color-glaucous-lighter))}.--color-glaucous-light{background-color:rgb(var(--color-glaucous-light))}.--color-glaucous-default{background-color:rgb(var(--color-glaucous-default))}.--color-glaucous-dark{background-color:rgb(var(--color-glaucous-dark))}.--color-glaucous-darker{background-color:rgb(var(--color-glaucous-darker))}.--contrast-100{color:rgb(var(--contrast-900));background-color:rgb(var(--contrast-100))}.--contrast-200{color:rgb(var(--contrast-1000));background-color:rgb(var(--contrast-200))}.--contrast-300{color:rgb(var(--contrast-1100));background-color:rgb(var(--contrast-300))}.--contrast-400{color:rgb(var(--contrast-1200));background-color:rgb(var(--contrast-400))}.--contrast-500{color:rgb(var(--contrast-1300));background-color:rgb(var(--contrast-500))}.--contrast-600{color:rgb(var(--contrast-1400));background-color:rgb(var(--contrast-600))}.--contrast-700{color:rgb(var(--contrast-1500));background-color:rgb(var(--contrast-700))}.--contrast-800{color:rgb(var(--contrast-1600));background-color:rgb(var(--contrast-800))}.--contrast-900{color:rgb(var(--contrast-1700));background-color:rgb(var(--contrast-900))}.--contrast-1000{color:rgb(var(--contrast-100));background-color:rgb(var(--contrast-1000))}.--contrast-1100{color:rgb(var(--contrast-200));background-color:rgb(var(--contrast-1100))}.--contrast-1200{color:rgb(var(--contrast-300));background-color:rgb(var(--contrast-1200))}.--contrast-1300{color:rgb(var(--contrast-400));background-color:rgb(var(--contrast-1300))}.--contrast-1400{color:rgb(var(--contrast-500));background-color:rgb(var(--contrast-1400))}.--contrast-1500{color:rgb(var(--contrast-600));background-color:rgb(var(--contrast-1500))}.--contrast-1600{color:rgb(var(--contrast-700));background-color:rgb(var(--contrast-1600))}.--contrast-1700{color:rgb(var(--contrast-800));background-color:rgb(var(--contrast-1700))}.--color-white{color:rgb(var(--color-black));background-color:rgb(var(--color-white))}.--color-black{color:rgb(var(--color-white));background-color:rgb(var(--color-black))}.color-palette{grid-template-rows:repeat(5, 1fr) auto;grid-template-columns:repeat(20, 1fr) auto}.picker-trigger[style="--background:lime-magenta;"]:after,.chosen-color-preview[style="--background:lime-magenta;"]:after{background-color:var(--lime-magenta)}.picker-trigger[style="--background:lime-blue;"]:after,.chosen-color-preview[style="--background:lime-blue;"]:after{background-color:var(--lime-blue)}.picker-trigger[style="--background:lime-orange;"]:after,.chosen-color-preview[style="--background:lime-orange;"]:after{background-color:var(--lime-orange)}.picker-trigger[style="--background:lime-green;"]:after,.chosen-color-preview[style="--background:lime-green;"]:after{background-color:var(--lime-green)}.picker-trigger[style="--background:lime-red;"]:after,.chosen-color-preview[style="--background:lime-red;"]:after{background-color:var(--lime-red)}.picker-trigger[style="--background:lime-dark-blue;"]:after,.chosen-color-preview[style="--background:lime-dark-blue;"]:after{background-color:var(--lime-dark-blue)}.picker-trigger[style="--background:lime-turquoise;"]:after,.chosen-color-preview[style="--background:lime-turquoise;"]:after{background-color:var(--lime-turquoise)}.picker-trigger[style="--background:lime-yellow;"]:after,.chosen-color-preview[style="--background:lime-yellow;"]:after{background-color:var(--lime-yellow)}.picker-trigger[style="--background:lime-light-grey;"]:after,.chosen-color-preview[style="--background:lime-light-grey;"]:after{background-color:var(--lime-light-grey)}:host{--popover-surface-width:50rem;--color-picker-default-background:url("data:image/svg+xml;charset=utf-8, <svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 8 8\' style=\'fill-rule:evenodd;\'><path fill=\'rgba(186,186,192,0.16)\' d=\'M0 0h4v4H0zM4 4h4v4H4z\'/></svg>")}.color-picker{display:grid;gap:0.5rem;grid-template-columns:auto 1fr}.picker-trigger{all:unset;border-radius:0.5rem;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}.picker-trigger:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.picker-trigger:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.picker-trigger:focus{outline:none}.picker-trigger:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.picker-trigger:after{box-shadow:0 0 0 0.25rem rgb(var(--contrast-100)) inset}.chosen-color-preview,.picker-trigger{box-sizing:border-box;position:relative;isolation:isolate;width:3.5rem;height:3.5rem}.chosen-color-preview:before,.chosen-color-preview:after,.picker-trigger:before,.picker-trigger:after{content:"";position:absolute;inset:0;border-radius:inherit}.chosen-color-preview:before,.picker-trigger:before{background:var(--color-picker-default-background);background-size:0.5rem;z-index:0}.chosen-color-preview:after,.picker-trigger:after{background:var(--background);z-index:1}:host([readonly]) .picker-trigger:hover,:host([readonly]) .picker-trigger:active{cursor:default;box-shadow:var(--button-shadow-normal);transform:none}.chosen-color-input[readonly]{transform:translateY(1rem)}:host{border-radius:0.75rem;background-color:rgb(var(--kompendium-contrast-300))}.color-picker-palette{display:grid;gap:0.25rem;grid-auto-flow:column;grid-template-columns:repeat(20, 1fr);grid-template-rows:repeat(4, 1fr) auto;margin:1rem}.chosen-color-name{box-sizing:border-box;padding:1rem;display:grid;grid-template-columns:1fr auto;gap:0.5rem}.chosen-color-preview{border:1px solid rgba(var(--contrast-700), 0.65);border-radius:50%}.swatch:not(.hue){border:none;aspect-ratio:1;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer}.swatch:not(.hue):focus{outline:none}.swatch:not(.hue):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.swatch:not(.hue):hover{box-shadow:var(--button-shadow-hovered)}.swatch:not(.hue):active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.swatch:not(.hue):focus-visible{box-shadow:var(--shadow-depth-8-focused), 0 0 0 0.25rem rgb(var(--contrast-100)) inset}.swatch--selected{border-radius:50%}';const n=class{constructor(g){r(this,g);this.change=o(this,"change",7);this.renderSwatches=()=>l.map((r=>c.map(this.renderSwatch(r))));this.renderSwatch=r=>o=>{const l=e(r,o);const c={swatch:true,[l]:true,"swatch--selected":this.value===t(r,o)};return a("button",{class:c,onClick:this.handleClick(r,o)})};this.handleChange=r=>{r.stopPropagation();this.change.emit(r.detail)};this.handleClick=(r,o)=>a=>{const l=t(r,o);a.stopPropagation();this.change.emit(l)};this.value=undefined;this.label=undefined;this.helperText=undefined;this.required=undefined}render(){const r=this.value?{"--background":this.value}:{};return[a("div",{class:"color-picker-palette"},this.renderSwatches()),a("div",{class:"chosen-color-name"},a("limel-input-field",{label:this.label,helperText:this.helperText,value:this.value,onChange:this.handleChange,required:this.required}),a("div",{class:"chosen-color-preview",style:r}))]}};n.style=g;export{n as limel_color_picker_palette};
-//# sourceMappingURL=p-554cdf9e.entry.js.map
+import{r,c as o,h as a}from"./p-3075aa67.js";const c=["red","pink","magenta","purple","violet","indigo","blue","sky","cyan","teal","green","lime","grass","yellow","amber","orange","coral","brown","gray","glaucous"];const l=["lighter","light","default","dark","darker"];function e(r,o){return`--color-${r}-${o}`}function t(r,o){return`rgb(var(${e(r,o)}))`}const g='@charset "UTF-8";.color-palette{display:grid;gap:0.25rem;grid-auto-flow:column;margin:0.75rem auto 1.25rem auto;padding:1.25rem 0.75rem;background-color:rgb(var(--kompendium-contrast-300));border-radius:0.1875rem}.brightness-label,.swatch{display:flex;align-items:center;position:relative}.swatch{transition:border-radius 0.2s ease;border-radius:3px;justify-content:center;color:rgba(var(--kompendium-color-white), 0.4);font-size:1.25rem;line-height:99%}.swatch:after{content:"";display:block;padding-top:100%}.swatch.hue{font-family:"Source Code Pro", monospace;font-size:0.75rem;position:relative;color:rgb(var(--kompendium-contrast-900));padding-top:0.5rem;writing-mode:vertical-lr;justify-content:left}.brightness-label{font-family:"Source Code Pro", monospace;font-size:0.75rem;color:rgb(var(--kompendium-contrast-900));justify-content:start}.brand-colors-tips{transition:opacity 0.2s ease 0.4s;opacity:0;font-size:0.875rem;padding-left:2.75rem;margin-bottom:2.5rem}.brand-colors .brand-colors-tips{opacity:1}@media (prefers-color-scheme: light){.brand-colors .--color-glaucous-default,.brand-colors .--color-gray-dark{border-radius:50%}}@media (prefers-color-scheme: dark){.brand-colors .--color-red-light,.brand-colors .--color-magenta-default,.brand-colors .--color-sky-light,.brand-colors .--color-teal-light,.brand-colors .--color-green-light,.brand-colors .--color-amber-light,.brand-colors .--color-amber-default,.brand-colors .--color-coral-light,.brand-colors .--color-gray-light{border-radius:50%}}.--color-red-lighter{background-color:rgb(var(--color-red-lighter))}.--color-red-light{background-color:rgb(var(--color-red-light))}.--color-red-default{background-color:rgb(var(--color-red-default))}.--color-red-dark{background-color:rgb(var(--color-red-dark))}.--color-red-darker{background-color:rgb(var(--color-red-darker))}.--color-pink-lighter{background-color:rgb(var(--color-pink-lighter))}.--color-pink-light{background-color:rgb(var(--color-pink-light))}.--color-pink-default{background-color:rgb(var(--color-pink-default))}.--color-pink-dark{background-color:rgb(var(--color-pink-dark))}.--color-pink-darker{background-color:rgb(var(--color-pink-darker))}.--color-magenta-lighter{background-color:rgb(var(--color-magenta-lighter))}.--color-magenta-light{background-color:rgb(var(--color-magenta-light))}.--color-magenta-default{background-color:rgb(var(--color-magenta-default))}.--color-magenta-dark{background-color:rgb(var(--color-magenta-dark))}.--color-magenta-darker{background-color:rgb(var(--color-magenta-darker))}.--color-purple-lighter{background-color:rgb(var(--color-purple-lighter))}.--color-purple-light{background-color:rgb(var(--color-purple-light))}.--color-purple-default{background-color:rgb(var(--color-purple-default))}.--color-purple-dark{background-color:rgb(var(--color-purple-dark))}.--color-purple-darker{background-color:rgb(var(--color-purple-darker))}.--color-violet-lighter{background-color:rgb(var(--color-violet-lighter))}.--color-violet-light{background-color:rgb(var(--color-violet-light))}.--color-violet-default{background-color:rgb(var(--color-violet-default))}.--color-violet-dark{background-color:rgb(var(--color-violet-dark))}.--color-violet-darker{background-color:rgb(var(--color-violet-darker))}.--color-indigo-lighter{background-color:rgb(var(--color-indigo-lighter))}.--color-indigo-light{background-color:rgb(var(--color-indigo-light))}.--color-indigo-default{background-color:rgb(var(--color-indigo-default))}.--color-indigo-dark{background-color:rgb(var(--color-indigo-dark))}.--color-indigo-darker{background-color:rgb(var(--color-indigo-darker))}.--color-blue-lighter{background-color:rgb(var(--color-blue-lighter))}.--color-blue-light{background-color:rgb(var(--color-blue-light))}.--color-blue-default{background-color:rgb(var(--color-blue-default))}.--color-blue-dark{background-color:rgb(var(--color-blue-dark))}.--color-blue-darker{background-color:rgb(var(--color-blue-darker))}.--color-sky-lighter{background-color:rgb(var(--color-sky-lighter))}.--color-sky-light{background-color:rgb(var(--color-sky-light))}.--color-sky-default{background-color:rgb(var(--color-sky-default))}.--color-sky-dark{background-color:rgb(var(--color-sky-dark))}.--color-sky-darker{background-color:rgb(var(--color-sky-darker))}.--color-cyan-lighter{background-color:rgb(var(--color-cyan-lighter))}.--color-cyan-light{background-color:rgb(var(--color-cyan-light))}.--color-cyan-default{background-color:rgb(var(--color-cyan-default))}.--color-cyan-dark{background-color:rgb(var(--color-cyan-dark))}.--color-cyan-darker{background-color:rgb(var(--color-cyan-darker))}.--color-teal-lighter{background-color:rgb(var(--color-teal-lighter))}.--color-teal-light{background-color:rgb(var(--color-teal-light))}.--color-teal-default{background-color:rgb(var(--color-teal-default))}.--color-teal-dark{background-color:rgb(var(--color-teal-dark))}.--color-teal-darker{background-color:rgb(var(--color-teal-darker))}.--color-green-lighter{background-color:rgb(var(--color-green-lighter))}.--color-green-light{background-color:rgb(var(--color-green-light))}.--color-green-default{background-color:rgb(var(--color-green-default))}.--color-green-dark{background-color:rgb(var(--color-green-dark))}.--color-green-darker{background-color:rgb(var(--color-green-darker))}.--color-lime-lighter{background-color:rgb(var(--color-lime-lighter))}.--color-lime-light{background-color:rgb(var(--color-lime-light))}.--color-lime-default{background-color:rgb(var(--color-lime-default))}.--color-lime-dark{background-color:rgb(var(--color-lime-dark))}.--color-lime-darker{background-color:rgb(var(--color-lime-darker))}.--color-grass-lighter{background-color:rgb(var(--color-grass-lighter))}.--color-grass-light{background-color:rgb(var(--color-grass-light))}.--color-grass-default{background-color:rgb(var(--color-grass-default))}.--color-grass-dark{background-color:rgb(var(--color-grass-dark))}.--color-grass-darker{background-color:rgb(var(--color-grass-darker))}.--color-yellow-lighter{background-color:rgb(var(--color-yellow-lighter))}.--color-yellow-light{background-color:rgb(var(--color-yellow-light))}.--color-yellow-default{background-color:rgb(var(--color-yellow-default))}.--color-yellow-dark{background-color:rgb(var(--color-yellow-dark))}.--color-yellow-darker{background-color:rgb(var(--color-yellow-darker))}.--color-amber-lighter{background-color:rgb(var(--color-amber-lighter))}.--color-amber-light{background-color:rgb(var(--color-amber-light))}.--color-amber-default{background-color:rgb(var(--color-amber-default))}.--color-amber-dark{background-color:rgb(var(--color-amber-dark))}.--color-amber-darker{background-color:rgb(var(--color-amber-darker))}.--color-orange-lighter{background-color:rgb(var(--color-orange-lighter))}.--color-orange-light{background-color:rgb(var(--color-orange-light))}.--color-orange-default{background-color:rgb(var(--color-orange-default))}.--color-orange-dark{background-color:rgb(var(--color-orange-dark))}.--color-orange-darker{background-color:rgb(var(--color-orange-darker))}.--color-coral-lighter{background-color:rgb(var(--color-coral-lighter))}.--color-coral-light{background-color:rgb(var(--color-coral-light))}.--color-coral-default{background-color:rgb(var(--color-coral-default))}.--color-coral-dark{background-color:rgb(var(--color-coral-dark))}.--color-coral-darker{background-color:rgb(var(--color-coral-darker))}.--color-brown-lighter{background-color:rgb(var(--color-brown-lighter))}.--color-brown-light{background-color:rgb(var(--color-brown-light))}.--color-brown-default{background-color:rgb(var(--color-brown-default))}.--color-brown-dark{background-color:rgb(var(--color-brown-dark))}.--color-brown-darker{background-color:rgb(var(--color-brown-darker))}.--color-gray-lighter{background-color:rgb(var(--color-gray-lighter))}.--color-gray-light{background-color:rgb(var(--color-gray-light))}.--color-gray-default{background-color:rgb(var(--color-gray-default))}.--color-gray-dark{background-color:rgb(var(--color-gray-dark))}.--color-gray-darker{background-color:rgb(var(--color-gray-darker))}.--color-glaucous-lighter{background-color:rgb(var(--color-glaucous-lighter))}.--color-glaucous-light{background-color:rgb(var(--color-glaucous-light))}.--color-glaucous-default{background-color:rgb(var(--color-glaucous-default))}.--color-glaucous-dark{background-color:rgb(var(--color-glaucous-dark))}.--color-glaucous-darker{background-color:rgb(var(--color-glaucous-darker))}.--contrast-100{color:rgb(var(--contrast-900));background-color:rgb(var(--contrast-100))}.--contrast-200{color:rgb(var(--contrast-1000));background-color:rgb(var(--contrast-200))}.--contrast-300{color:rgb(var(--contrast-1100));background-color:rgb(var(--contrast-300))}.--contrast-400{color:rgb(var(--contrast-1200));background-color:rgb(var(--contrast-400))}.--contrast-500{color:rgb(var(--contrast-1300));background-color:rgb(var(--contrast-500))}.--contrast-600{color:rgb(var(--contrast-1400));background-color:rgb(var(--contrast-600))}.--contrast-700{color:rgb(var(--contrast-1500));background-color:rgb(var(--contrast-700))}.--contrast-800{color:rgb(var(--contrast-1600));background-color:rgb(var(--contrast-800))}.--contrast-900{color:rgb(var(--contrast-1700));background-color:rgb(var(--contrast-900))}.--contrast-1000{color:rgb(var(--contrast-100));background-color:rgb(var(--contrast-1000))}.--contrast-1100{color:rgb(var(--contrast-200));background-color:rgb(var(--contrast-1100))}.--contrast-1200{color:rgb(var(--contrast-300));background-color:rgb(var(--contrast-1200))}.--contrast-1300{color:rgb(var(--contrast-400));background-color:rgb(var(--contrast-1300))}.--contrast-1400{color:rgb(var(--contrast-500));background-color:rgb(var(--contrast-1400))}.--contrast-1500{color:rgb(var(--contrast-600));background-color:rgb(var(--contrast-1500))}.--contrast-1600{color:rgb(var(--contrast-700));background-color:rgb(var(--contrast-1600))}.--contrast-1700{color:rgb(var(--contrast-800));background-color:rgb(var(--contrast-1700))}.--color-white{color:rgb(var(--color-black));background-color:rgb(var(--color-white))}.--color-black{color:rgb(var(--color-white));background-color:rgb(var(--color-black))}.color-palette{grid-template-rows:repeat(5, 1fr) auto;grid-template-columns:repeat(20, 1fr) auto}: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  )}.picker-trigger[style="--background:lime-magenta;"]:after,.chosen-color-preview[style="--background:lime-magenta;"]:after{background-color:var(--lime-magenta)}.picker-trigger[style="--background:lime-blue;"]:after,.chosen-color-preview[style="--background:lime-blue;"]:after{background-color:var(--lime-blue)}.picker-trigger[style="--background:lime-orange;"]:after,.chosen-color-preview[style="--background:lime-orange;"]:after{background-color:var(--lime-orange)}.picker-trigger[style="--background:lime-green;"]:after,.chosen-color-preview[style="--background:lime-green;"]:after{background-color:var(--lime-green)}.picker-trigger[style="--background:lime-red;"]:after,.chosen-color-preview[style="--background:lime-red;"]:after{background-color:var(--lime-red)}.picker-trigger[style="--background:lime-dark-blue;"]:after,.chosen-color-preview[style="--background:lime-dark-blue;"]:after{background-color:var(--lime-dark-blue)}.picker-trigger[style="--background:lime-turquoise;"]:after,.chosen-color-preview[style="--background:lime-turquoise;"]:after{background-color:var(--lime-turquoise)}.picker-trigger[style="--background:lime-yellow;"]:after,.chosen-color-preview[style="--background:lime-yellow;"]:after{background-color:var(--lime-yellow)}.picker-trigger[style="--background:lime-light-grey;"]:after,.chosen-color-preview[style="--background:lime-light-grey;"]:after{background-color:var(--lime-light-grey)}:host{position:relative;--popover-surface-width:50rem;--color-picker-default-background:url("data:image/svg+xml;charset=utf-8, <svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 8 8\' style=\'fill-rule:evenodd;\'><path fill=\'rgba(186,186,192,0.16)\' d=\'M0 0h4v4H0zM4 4h4v4H4z\'/></svg>")}.color-picker{display:grid;gap:0.25rem;grid-template-columns:auto 1fr}.picker-trigger{all:unset;border-radius:0.5rem;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}.picker-trigger:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.picker-trigger:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.picker-trigger:focus{outline:none}.picker-trigger:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.picker-trigger:after{box-shadow:0 0 0 0.25rem rgb(var(--contrast-100)) inset}.chosen-color-preview,.picker-trigger{box-sizing:border-box;position:relative;isolation:isolate;width:2.5rem;height:2.5rem}.chosen-color-preview:before,.chosen-color-preview:after,.picker-trigger:before,.picker-trigger:after{content:"";position:absolute;inset:0;border-radius:inherit}.chosen-color-preview:before,.picker-trigger:before{background:var(--color-picker-default-background);background-size:0.5rem;z-index:0}.chosen-color-preview:after,.picker-trigger:after{background:var(--background);z-index:1}:host([readonly]) .picker-trigger:hover,:host([readonly]) .picker-trigger:active{cursor:default;box-shadow:var(--button-shadow-normal);transform:none}.chosen-color-input[readonly]{transform:translateX(calc( 2.5rem / 4 * -1 )) translateY(calc(2.5rem / 4))}:host{border-radius:0.75rem;background-color:rgb(var(--kompendium-contrast-300))}.color-picker-palette{display:grid;gap:0.25rem;grid-auto-flow:column;grid-template-columns:repeat(20, 1fr);grid-template-rows:repeat(4, 1fr) auto;margin:1rem}.chosen-color-name{box-sizing:border-box;padding:1rem;display:grid;grid-template-columns:1fr auto;gap:0.5rem}.chosen-color-preview{border:1px solid rgba(var(--contrast-700), 0.65);border-radius:50%}.swatch:not(.hue){border:none;aspect-ratio:1;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer}.swatch:not(.hue):focus{outline:none}.swatch:not(.hue):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.swatch:not(.hue):hover{box-shadow:var(--button-shadow-hovered)}.swatch:not(.hue):active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.swatch:not(.hue):focus-visible{box-shadow:var(--shadow-depth-8-focused), 0 0 0 0.25rem rgb(var(--contrast-100)) inset}.swatch--selected{border-radius:50%}';const n=class{constructor(g){r(this,g);this.change=o(this,"change",7);this.renderSwatches=()=>c.map((r=>l.map(this.renderSwatch(r))));this.renderSwatch=r=>o=>{const c=e(r,o);const l={swatch:true,[c]:true,"swatch--selected":this.value===t(r,o)};return a("button",{class:l,onClick:this.handleClick(r,o)})};this.handleChange=r=>{r.stopPropagation();this.change.emit(r.detail)};this.handleClick=(r,o)=>a=>{const c=t(r,o);a.stopPropagation();this.change.emit(c)};this.value=undefined;this.label=undefined;this.helperText=undefined;this.required=undefined}render(){const r=this.value?{"--background":this.value}:{};return[a("div",{class:"color-picker-palette"},this.renderSwatches()),a("div",{class:"chosen-color-name"},a("limel-input-field",{label:this.label,helperText:this.helperText,value:this.value,onChange:this.handleChange,required:this.required}),a("div",{class:"chosen-color-preview",style:r}))]}};n.style=g;export{n as limel_color_picker_palette};
+//# sourceMappingURL=p-5903e050.entry.js.map

package/dist/lime-elements/{p-554cdf9e.entry.js.map → p-5903e050.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["colors","brightnesses","getColorName","color","brightness","getCssColor","colorPickerPaletteCss","Palette","this","renderSwatches","map","renderSwatch","colorName","classList","swatch","value","h","class","onClick","handleClick","handleChange","event","stopPropagation","change","emit","detail","render","background","label","helperText","onChange","required","style"],"sources":["./src/components/color-picker/swatches.ts","./src/components/color-picker/color-picker-palette.scss?tag=limel-color-picker-palette&encapsulation=shadow","./src/components/color-picker/color-picker-palette.tsx"],"sourcesContent":["export const colors = [\n    'red',\n    'pink',\n    'magenta',\n    'purple',\n    'violet',\n    'indigo',\n    'blue',\n    'sky',\n    'cyan',\n    'teal',\n    'green',\n    'lime',\n    'grass',\n    'yellow',\n    'amber',\n    'orange',\n    'coral',\n    'brown',\n    'gray',\n    'glaucous',\n];\n\nexport const brightnesses = ['lighter', 'light', 'default', 'dark', 'darker'];\n\nexport function getColorName(color: string, brightness: string): string {\n    return `--color-${color}-${brightness}`;\n}\n\nexport function getCssColor(color: string, brightness: string): string {\n    return `rgb(var(${getColorName(color, brightness)}))`;\n}\n","@use '../../design-guidelines/color-system/examples/extended-color-palette';\n@use '../../style/mixins';\n@import './color-picker';\n\n:host {\n    border-radius: 0.75rem; // is like popover's default `--popover-border-radius`\n    background-color: rgb(var(--kompendium-contrast-300));\n}\n\n.color-picker-palette {\n    display: grid;\n    gap: 0.25rem;\n    grid-auto-flow: column;\n    grid-template-columns: repeat(20, 1fr);\n    grid-template-rows: repeat(4, 1fr) auto;\n    margin: 1rem;\n}\n\n.chosen-color-name {\n    box-sizing: border-box;\n    padding: 1rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    gap: 0.5rem;\n}\n\n.chosen-color-preview {\n    border: 1px solid rgba(var(--contrast-700), 0.65); // color is the same as\n    // colors in shared_input-select-picker.scss\n    border-radius: 50%;\n}\n\n.swatch:not(.hue) {\n    border: none;\n    aspect-ratio: 1;\n\n    @include mixins.visualize-keyboard-focus();\n\n    // We could use the `@include mixins.is-flat-clickable();` mixin\n    // But its `background-color` arguments would interfere with the\n    // styles here. So we just copy/pasted the useful parts of the mixin here\n    transition:\n        color 0.2s ease,\n        background-color 0.2s ease,\n        box-shadow 0.2s ease,\n        transform 0.1s ease-out;\n\n    &:hover {\n        box-shadow: var(--button-shadow-hovered);\n    }\n\n    &:active {\n        box-shadow: var(--button-shadow-pressed);\n\n        transform: translate3d(0, 0.08rem, 0);\n    }\n    cursor: pointer;\n\n    &:focus-visible {\n        box-shadow:\n            var(--shadow-depth-8-focused),\n            0 0 0 0.25rem rgb(var(--contrast-100)) inset;\n    }\n}\n\n.swatch--selected {\n    border-radius: 50%;\n}\n","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { brightnesses, colors, getColorName, getCssColor } from './swatches';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-color-picker-palette',\n    shadow: true,\n    styleUrl: 'color-picker-palette.scss',\n})\nexport class Palette implements FormComponent {\n    /**\n     * Color value that is manually typed by the user\n     */\n    @Prop({ reflect: true })\n    public value: string;\n\n    /**\n     * Label of the input field\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Helper text of the input field\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * Set to `true` if a value is required\n     */\n    @Prop({ reflect: true })\n    public required: boolean;\n\n    /**\n     * Emits chosen value to the parent component\n     */\n    @Event()\n    public change: EventEmitter<string>;\n\n    public render() {\n        const background = this.value ? { '--background': this.value } : {};\n\n        return [\n            <div class=\"color-picker-palette\">{this.renderSwatches()}</div>,\n            <div class=\"chosen-color-name\">\n                <limel-input-field\n                    label={this.label}\n                    helperText={this.helperText}\n                    value={this.value}\n                    onChange={this.handleChange}\n                    required={this.required}\n                />\n                <div class=\"chosen-color-preview\" style={background} />\n            </div>,\n        ];\n    }\n\n    private renderSwatches = () => {\n        return colors.map((color) => {\n            return brightnesses.map(this.renderSwatch(color));\n        });\n    };\n\n    private renderSwatch = (color: string) => (brightness: string) => {\n        const colorName = getColorName(color, brightness);\n        const classList = {\n            swatch: true,\n            [colorName]: true,\n            'swatch--selected': this.value === getCssColor(color, brightness),\n        };\n\n        return (\n            <button\n                class={classList}\n                onClick={this.handleClick(color, brightness)}\n            />\n        );\n    };\n\n    private handleChange = (event: CustomEvent<string>) => {\n        event.stopPropagation();\n        this.change.emit(event.detail);\n    };\n\n    private handleClick =\n        (color: string, brightness: string) => (event: MouseEvent) => {\n            const value = getCssColor(color, brightness);\n            event.stopPropagation();\n            this.change.emit(value);\n        };\n}\n"],"mappings":"6CAAO,MAAMA,EAAS,CAClB,MACA,OACA,UACA,SACA,SACA,SACA,OACA,MACA,OACA,OACA,QACA,OACA,QACA,SACA,QACA,SACA,QACA,QACA,OACA,YAGG,MAAMC,EAAe,CAAC,UAAW,QAAS,UAAW,OAAQ,U,SAEpDC,EAAaC,EAAeC,GACxC,MAAO,WAAWD,KAASC,GAC/B,C,SAEgBC,EAAYF,EAAeC,GACvC,MAAO,WAAWF,EAAaC,EAAOC,MAC1C,CC/BA,MAAME,EAAwB,iuc,MCYjBC,EAAO,M,wDAiDRC,KAAAC,eAAiB,IACdT,EAAOU,KAAKP,GACRF,EAAaS,IAAIF,KAAKG,aAAaR,MAI1CK,KAAAG,aAAgBR,GAAmBC,IACvC,MAAMQ,EAAYV,EAAaC,EAAOC,GACtC,MAAMS,EAAY,CACdC,OAAQ,KACRF,CAACA,GAAY,KACb,mBAAoBJ,KAAKO,QAAUV,EAAYF,EAAOC,IAG1D,OACIY,EAAA,UACIC,MAAOJ,EACPK,QAASV,KAAKW,YAAYhB,EAAOC,IACnC,EAIFI,KAAAY,aAAgBC,IACpBA,EAAMC,kBACNd,KAAKe,OAAOC,KAAKH,EAAMI,OAAO,EAG1BjB,KAAAW,YACJ,CAAChB,EAAeC,IAAwBiB,IACpC,MAAMN,EAAQV,EAAYF,EAAOC,GACjCiB,EAAMC,kBACNd,KAAKe,OAAOC,KAAKT,EAAM,E,4FAjDxBW,SACH,MAAMC,EAAanB,KAAKO,MAAQ,CAAE,eAAgBP,KAAKO,OAAU,GAEjE,MAAO,CACHC,EAAA,OAAKC,MAAM,wBAAwBT,KAAKC,kBACxCO,EAAA,OAAKC,MAAM,qBACPD,EAAA,qBACIY,MAAOpB,KAAKoB,MACZC,WAAYrB,KAAKqB,WACjBd,MAAOP,KAAKO,MACZe,SAAUtB,KAAKY,aACfW,SAAUvB,KAAKuB,WAEnBf,EAAA,OAAKC,MAAM,uBAAuBe,MAAOL,K"}
+{"version":3,"names":["colors","brightnesses","getColorName","color","brightness","getCssColor","colorPickerPaletteCss","Palette","this","renderSwatches","map","renderSwatch","colorName","classList","swatch","value","h","class","onClick","handleClick","handleChange","event","stopPropagation","change","emit","detail","render","background","label","helperText","onChange","required","style"],"sources":["./src/components/color-picker/swatches.ts","./src/components/color-picker/color-picker-palette.scss?tag=limel-color-picker-palette&encapsulation=shadow","./src/components/color-picker/color-picker-palette.tsx"],"sourcesContent":["export const colors = [\n    'red',\n    'pink',\n    'magenta',\n    'purple',\n    'violet',\n    'indigo',\n    'blue',\n    'sky',\n    'cyan',\n    'teal',\n    'green',\n    'lime',\n    'grass',\n    'yellow',\n    'amber',\n    'orange',\n    'coral',\n    'brown',\n    'gray',\n    'glaucous',\n];\n\nexport const brightnesses = ['lighter', 'light', 'default', 'dark', 'darker'];\n\nexport function getColorName(color: string, brightness: string): string {\n    return `--color-${color}-${brightness}`;\n}\n\nexport function getCssColor(color: string, brightness: string): string {\n    return `rgb(var(${getColorName(color, brightness)}))`;\n}\n","@use '../../design-guidelines/color-system/examples/extended-color-palette';\n@use '../../style/mixins';\n@import './color-picker';\n\n:host {\n    border-radius: 0.75rem; // is like popover's default `--popover-border-radius`\n    background-color: rgb(var(--kompendium-contrast-300));\n}\n\n.color-picker-palette {\n    display: grid;\n    gap: 0.25rem;\n    grid-auto-flow: column;\n    grid-template-columns: repeat(20, 1fr);\n    grid-template-rows: repeat(4, 1fr) auto;\n    margin: 1rem;\n}\n\n.chosen-color-name {\n    box-sizing: border-box;\n    padding: 1rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    gap: 0.5rem;\n}\n\n.chosen-color-preview {\n    border: 1px solid rgba(var(--contrast-700), 0.65); // color is the same as\n    // colors in shared_input-select-picker.scss\n    border-radius: 50%;\n}\n\n.swatch:not(.hue) {\n    border: none;\n    aspect-ratio: 1;\n\n    @include mixins.visualize-keyboard-focus();\n\n    // We could use the `@include mixins.is-flat-clickable();` mixin\n    // But its `background-color` arguments would interfere with the\n    // styles here. So we just copy/pasted the useful parts of the mixin here\n    transition:\n        color 0.2s ease,\n        background-color 0.2s ease,\n        box-shadow 0.2s ease,\n        transform 0.1s ease-out;\n\n    &:hover {\n        box-shadow: var(--button-shadow-hovered);\n    }\n\n    &:active {\n        box-shadow: var(--button-shadow-pressed);\n\n        transform: translate3d(0, 0.08rem, 0);\n    }\n    cursor: pointer;\n\n    &:focus-visible {\n        box-shadow:\n            var(--shadow-depth-8-focused),\n            0 0 0 0.25rem rgb(var(--contrast-100)) inset;\n    }\n}\n\n.swatch--selected {\n    border-radius: 50%;\n}\n","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { brightnesses, colors, getColorName, getCssColor } from './swatches';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-color-picker-palette',\n    shadow: true,\n    styleUrl: 'color-picker-palette.scss',\n})\nexport class Palette implements FormComponent {\n    /**\n     * Color value that is manually typed by the user\n     */\n    @Prop({ reflect: true })\n    public value: string;\n\n    /**\n     * Label of the input field\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Helper text of the input field\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * Set to `true` if a value is required\n     */\n    @Prop({ reflect: true })\n    public required: boolean;\n\n    /**\n     * Emits chosen value to the parent component\n     */\n    @Event()\n    public change: EventEmitter<string>;\n\n    public render() {\n        const background = this.value ? { '--background': this.value } : {};\n\n        return [\n            <div class=\"color-picker-palette\">{this.renderSwatches()}</div>,\n            <div class=\"chosen-color-name\">\n                <limel-input-field\n                    label={this.label}\n                    helperText={this.helperText}\n                    value={this.value}\n                    onChange={this.handleChange}\n                    required={this.required}\n                />\n                <div class=\"chosen-color-preview\" style={background} />\n            </div>,\n        ];\n    }\n\n    private renderSwatches = () => {\n        return colors.map((color) => {\n            return brightnesses.map(this.renderSwatch(color));\n        });\n    };\n\n    private renderSwatch = (color: string) => (brightness: string) => {\n        const colorName = getColorName(color, brightness);\n        const classList = {\n            swatch: true,\n            [colorName]: true,\n            'swatch--selected': this.value === getCssColor(color, brightness),\n        };\n\n        return (\n            <button\n                class={classList}\n                onClick={this.handleClick(color, brightness)}\n            />\n        );\n    };\n\n    private handleChange = (event: CustomEvent<string>) => {\n        event.stopPropagation();\n        this.change.emit(event.detail);\n    };\n\n    private handleClick =\n        (color: string, brightness: string) => (event: MouseEvent) => {\n            const value = getCssColor(color, brightness);\n            event.stopPropagation();\n            this.change.emit(value);\n        };\n}\n"],"mappings":"6CAAO,MAAMA,EAAS,CAClB,MACA,OACA,UACA,SACA,SACA,SACA,OACA,MACA,OACA,OACA,QACA,OACA,QACA,SACA,QACA,SACA,QACA,QACA,OACA,YAGG,MAAMC,EAAe,CAAC,UAAW,QAAS,UAAW,OAAQ,U,SAEpDC,EAAaC,EAAeC,GACxC,MAAO,WAAWD,KAASC,GAC/B,C,SAEgBC,EAAYF,EAAeC,GACvC,MAAO,WAAWF,EAAaC,EAAOC,MAC1C,CC/BA,MAAME,EAAwB,m7e,MCYjBC,EAAO,M,wDAiDRC,KAAAC,eAAiB,IACdT,EAAOU,KAAKP,GACRF,EAAaS,IAAIF,KAAKG,aAAaR,MAI1CK,KAAAG,aAAgBR,GAAmBC,IACvC,MAAMQ,EAAYV,EAAaC,EAAOC,GACtC,MAAMS,EAAY,CACdC,OAAQ,KACRF,CAACA,GAAY,KACb,mBAAoBJ,KAAKO,QAAUV,EAAYF,EAAOC,IAG1D,OACIY,EAAA,UACIC,MAAOJ,EACPK,QAASV,KAAKW,YAAYhB,EAAOC,IACnC,EAIFI,KAAAY,aAAgBC,IACpBA,EAAMC,kBACNd,KAAKe,OAAOC,KAAKH,EAAMI,OAAO,EAG1BjB,KAAAW,YACJ,CAAChB,EAAeC,IAAwBiB,IACpC,MAAMN,EAAQV,EAAYF,EAAOC,GACjCiB,EAAMC,kBACNd,KAAKe,OAAOC,KAAKT,EAAM,E,4FAjDxBW,SACH,MAAMC,EAAanB,KAAKO,MAAQ,CAAE,eAAgBP,KAAKO,OAAU,GAEjE,MAAO,CACHC,EAAA,OAAKC,MAAM,wBAAwBT,KAAKC,kBACxCO,EAAA,OAAKC,MAAM,qBACPD,EAAA,qBACIY,MAAOpB,KAAKoB,MACZC,WAAYrB,KAAKqB,WACjBd,MAAOP,KAAKO,MACZe,SAAUtB,KAAKY,aACfW,SAAUvB,KAAKuB,WAEnBf,EAAA,OAAKC,MAAM,uBAAuBe,MAAOL,K"}

package/dist/lime-elements/p-68cb9574.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as o,h as t,g as r}from"./p-3075aa67.js";import{d as n}from"./p-c70b1ea3.js";import{m as i,r as s}from"./p-fa37036b.js";import{c as a}from"./p-3ccdc4a3.js";const l='@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(limel-collapsible-section){--border-radius-of-header:0.75rem;display:block}:host([hidden]){display:none}.open-close-toggle{all:unset;position:absolute;inset:0;width:100%;transition:background-color 0.4s ease, border-radius 0.1s ease;cursor:pointer;z-index:-1;background-color:var(--closed-header-background-color, rgb(var(--contrast-200)));border-radius:var(--border-radius-of-header)}.open-close-toggle:focus{outline:none}.open-close-toggle:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.open-close-toggle:hover{background-color:var(--open-header-background-color, rgb(var(--contrast-300)))}section.open .open-close-toggle{background-color:var(--open-header-background-color, rgb(var(--contrast-100)));border-radius:var(--border-radius-of-header) var(--border-radius-of-header) 0 0}section.open .open-close-toggle:hover{background-color:var(--open-header-background-color, rgb(var(--contrast-300)))}.title,.divider-line,.expand-icon{pointer-events:none}header{isolation:isolate;position:relative;align-items:center;display:flex;justify-content:space-between;padding-left:0.5rem;height:2.5rem}.title{font-size:1rem;font-weight:300;color:var(--mdc-theme-on-surface);justify-self:flex-start;user-select:none;padding-right:0.5rem;height:auto;max-height:3rem;line-height:1.2rem;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.divider-line{transition:opacity 0.3s ease 0.3s;flex-grow:1;height:0.125rem;border-radius:1rem;background-color:var(--header-stroke-color, rgb(var(--contrast-900)));margin-right:0.5rem;opacity:0}section.open .divider-line{opacity:0.16}.actions{justify-self:flex-end;flex-shrink:0}.body{background-color:var(--body-background-color, var(--contrast-100));padding-left:var(--body-padding, 1.25rem);padding-right:var(--body-padding, 1.25rem);border-radius:0 0 var(--border-radius-of-header) var(--border-radius-of-header)}.body{--limel-cs-opacity-transition-speed:0.1s;--limel-cs-opacity-transition-delay:0s;--limel-cs-grid-template-rows-transition-speed:0.3s;transition:grid-template-rows var(--limel-cs-grid-template-rows-transition-speed) cubic-bezier(1, 0.09, 0, 0.89);display:grid;grid-template-rows:0fr}.body slot{transition:opacity var(--limel-cs-opacity-transition-speed) ease var(--limel-cs-opacity-transition-delay);display:block;overflow:hidden;opacity:0}section.open .body{--limel-cs-opacity-transition-speed:0.4s;--limel-cs-opacity-transition-delay:0.3s;--limel-cs-grid-template-rows-transition-speed:0.46s;grid-template-rows:1fr}section.open .body slot{opacity:1}header:hover+.body{will-change:grid-template-rows}header:hover+.body slot{will-change:opacity}.expand-icon{position:relative;height:1.875rem;margin:0 1rem 0 0.5rem;width:0.75rem;flex-shrink:0}.line{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:100%;border-radius:1rem;height:0.125rem;background-color:var(--header-stroke-color, rgb(var(--contrast-900)))}.line:first-of-type,.line:last-of-type{transition:opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s}.line:first-of-type{transform:rotate3d(0, 0, 1, 90deg)}.line:last-of-type{transform:rotate3d(0, 0, 1, -90deg)}.line:nth-of-type(2),.line:nth-of-type(3){transition:opacity 0.2s ease, transform 0.18s ease}section.open .line:first-of-type,section.open .line:last-of-type{transition:opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s}section.open .line:first-of-type{transform:rotate3d(0, 0, 1, 0deg)}section.open .line:last-of-type{transform:rotate3d(0, 0, 1, 0deg)}section.open .line:nth-of-type(2),section.open .line:nth-of-type(3){transition:opacity 1s ease, transform 0.4s ease}section.open .line:nth-of-type(2){transform:translate3d(0, -1rem, 0);opacity:0}section.open .line:nth-of-type(3){transform:translate3d(0, 1rem, 0);opacity:0}.open-close-toggle:hover+.expand-icon .line:first-of-type{transform:rotate3d(0, 0, 1, 0deg)}.open-close-toggle:hover+.expand-icon .line:last-of-type{transform:rotate3d(0, 0, 1, 0deg)}.open-close-toggle:hover+.expand-icon .line:nth-of-type(2),.open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transition:opacity 0.5s ease 0.4s, transform 0.7s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s}.open-close-toggle:hover+.expand-icon .line:nth-of-type(2){transform:translate3d(0, -0.5rem, 0);opacity:0.4}.open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transform:translate3d(0, 0.5rem, 0);opacity:0.4}section.open .open-close-toggle:hover+.expand-icon .line:first-of-type,section.open .open-close-toggle:hover+.expand-icon .line:last-of-type{transition:opacity 0.2s ease 0.4s, transform 0.4s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s}section.open .open-close-toggle:hover+.expand-icon .line:first-of-type{transform:rotate3d(0, 0, 1, 45deg)}section.open .open-close-toggle:hover+.expand-icon .line:last-of-type{transform:rotate3d(0, 0, 1, -45deg)}section.open .open-close-toggle:hover+.expand-icon .line:nth-of-type(2){transform:translate3d(0, -1rem, 0);opacity:0}section.open .open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transform:translate3d(0, 1rem, 0);opacity:0}';const c=class{constructor(r){e(this,r);this.open=o(this,"open",7);this.close=o(this,"close",7);this.action=o(this,"action",7);this.bodyId=a();this.onClick=()=>{this.handleInteraction()};this.handleInteraction=()=>{this.isOpen=!this.isOpen;if(this.isOpen){this.open.emit();const e=100;setTimeout(n,e)}else{this.close.emit()}};this.renderActions=()=>{if(!this.actions){return}return t("div",{class:"actions"},this.actions.map(this.renderActionButton))};this.renderActionButton=e=>t("limel-icon-button",{icon:e.icon,label:e.label,disabled:e.disabled,onClick:this.handleActionClick(e)});this.handleActionClick=e=>o=>{o.stopPropagation();this.action.emit(e)};this.isOpen=false;this.header=undefined;this.actions=undefined}componentDidRender(){const e=this.host.shadowRoot.querySelector(".open-close-toggle");i(e)}disconnectedCallback(){const e=this.host.shadowRoot.querySelector(".open-close-toggle");s(e)}render(){return t("section",{class:`${this.isOpen?"open":""}`},t("header",null,t("button",{class:"open-close-toggle",onClick:this.onClick,"aria-controls":this.bodyId}),t("div",{class:"expand-icon"},t("div",{class:"line"}),t("div",{class:"line"}),t("div",{class:"line"}),t("div",{class:"line"})),t("h2",{class:"title mdc-typography mdc-typography--headline2"},this.header),t("div",{class:"divider-line"}),this.renderActions()),t("div",{class:"body","aria-hidden":String(!this.isOpen),id:this.bodyId},t("slot",null)))}get host(){return r(this)}};c.style=l;export{c as limel_collapsible_section};
+//# sourceMappingURL=p-68cb9574.entry.js.map