@limetech/lime-elements 37.1.0-next.91 → 37.1.0-next.92

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (56) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/lime-elements.cjs.js +1 -1
  3. package/dist/cjs/limel-chip.cjs.entry.js +104 -0
  4. package/dist/cjs/limel-chip.cjs.entry.js.map +1 -0
  5. package/dist/cjs/limel-header.cjs.entry.js +3 -2
  6. package/dist/cjs/limel-header.cjs.entry.js.map +1 -1
  7. package/dist/cjs/loader.cjs.js +1 -1
  8. package/dist/collection/collection-manifest.json +1 -0
  9. package/dist/collection/components/chip/chip.css +223 -0
  10. package/dist/collection/components/chip/chip.js +357 -0
  11. package/dist/collection/components/chip/chip.js.map +1 -0
  12. package/dist/collection/components/header/header.css +3 -4
  13. package/dist/collection/components/header/header.js +20 -1
  14. package/dist/collection/components/header/header.js.map +1 -1
  15. package/dist/esm/{keycodes-44c01beb.js → keycodes-22fb659d.js} +2 -2
  16. package/dist/esm/{keycodes-44c01beb.js.map → keycodes-22fb659d.js.map} +1 -1
  17. package/dist/esm/lime-elements.js +1 -1
  18. package/dist/esm/limel-breadcrumbs_3.entry.js +1 -1
  19. package/dist/esm/limel-chip-set.entry.js +1 -1
  20. package/dist/esm/limel-chip.entry.js +100 -0
  21. package/dist/esm/limel-chip.entry.js.map +1 -0
  22. package/dist/esm/limel-header.entry.js +3 -2
  23. package/dist/esm/limel-header.entry.js.map +1 -1
  24. package/dist/esm/limel-input-field_3.entry.js +1 -1
  25. package/dist/esm/limel-picker.entry.js +1 -1
  26. package/dist/esm/limel-popover_2.entry.js +1 -1
  27. package/dist/esm/limel-select.entry.js +1 -1
  28. package/dist/esm/loader.js +1 -1
  29. package/dist/lime-elements/lime-elements.esm.js +1 -1
  30. package/dist/lime-elements/lime-elements.esm.js.map +1 -1
  31. package/dist/lime-elements/p-0e3cd73a.entry.js +2 -0
  32. package/dist/lime-elements/{p-919d91a3.entry.js.map → p-0e3cd73a.entry.js.map} +1 -1
  33. package/dist/lime-elements/{p-00403204.entry.js → p-22bc684d.entry.js} +2 -2
  34. package/dist/lime-elements/p-71bf6613.entry.js +2 -0
  35. package/dist/lime-elements/{p-b88e8225.entry.js.map → p-71bf6613.entry.js.map} +1 -1
  36. package/dist/lime-elements/p-8afe01df.entry.js +2 -0
  37. package/dist/lime-elements/p-8afe01df.entry.js.map +1 -0
  38. package/dist/lime-elements/{p-d7801e00.js → p-93c6d561.js} +2 -2
  39. package/dist/lime-elements/{p-5e130783.entry.js → p-95561c5f.entry.js} +2 -2
  40. package/dist/lime-elements/{p-4b51378d.entry.js → p-aa3a72a1.entry.js} +2 -2
  41. package/dist/lime-elements/{p-d3233203.entry.js → p-b8c181ce.entry.js} +2 -2
  42. package/dist/lime-elements/p-de97b8a2.entry.js +2 -0
  43. package/dist/lime-elements/p-de97b8a2.entry.js.map +1 -0
  44. package/dist/types/components/chip/chip.d.ts +113 -0
  45. package/dist/types/components/header/header.d.ts +5 -0
  46. package/dist/types/components.d.ts +253 -0
  47. package/package.json +1 -1
  48. package/dist/lime-elements/p-06cd5f58.entry.js +0 -2
  49. package/dist/lime-elements/p-06cd5f58.entry.js.map +0 -1
  50. package/dist/lime-elements/p-919d91a3.entry.js +0 -2
  51. package/dist/lime-elements/p-b88e8225.entry.js +0 -2
  52. /package/dist/lime-elements/{p-00403204.entry.js.map → p-22bc684d.entry.js.map} +0 -0
  53. /package/dist/lime-elements/{p-d7801e00.js.map → p-93c6d561.js.map} +0 -0
  54. /package/dist/lime-elements/{p-5e130783.entry.js.map → p-95561c5f.entry.js.map} +0 -0
  55. /package/dist/lime-elements/{p-4b51378d.entry.js.map → p-aa3a72a1.entry.js.map} +0 -0
  56. /package/dist/lime-elements/{p-d3233203.entry.js.map → p-b8c181ce.entry.js.map} +0 -0
package/dist/lime-elements/{p-00403204.entry.js → p-22bc684d.entry.js} RENAMED
@@ -1,4 +1,4 @@
1
- import{r as t,c as e,h as i,g as d}from"./p-3075aa67.js";import{i as c,j as n,k as l,l as r,a as o,d as a,D as m,m as f,B as s,n as h,E as p,c as u}from"./p-d7801e00.js";import{t as x}from"./p-3ee3dcdc.js";import{g,a as b}from"./p-516619d3.js";import{g as _,d as v,a as y,b as w}from"./p-88694767.js";import{M as k}from"./p-9ab3a908.js";import{i as C}from"./p-ade76f1d.js";import{_ as z,a as E,M as I,b as A,c as T}from"./p-2ff3f85e.js";import{M as O,b as R}from"./p-11d5d44e.js";import{n as N,i as Y,K as L}from"./p-6e219bb4.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";
1
+ import{r as t,c as e,h as i,g as d}from"./p-3075aa67.js";import{k as c,l as n,m as l,n as r,c as o,f as a,D as m,a as f,B as s,b as h,E as p,e as u}from"./p-93c6d561.js";import{t as x}from"./p-3ee3dcdc.js";import{g,a as b}from"./p-516619d3.js";import{g as _,d as v,a as y,b as w}from"./p-88694767.js";import{M as k}from"./p-9ab3a908.js";import{i as C}from"./p-ade76f1d.js";import{_ as z,a as E,M as I,b as A,c as T}from"./p-2ff3f85e.js";import{M as O,b as R}from"./p-11d5d44e.js";import{n as N,i as Y,K as L}from"./p-6e219bb4.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";
2
2
  /**
3
3
  * @license
4
4
  * Copyright 2020 Google Inc.
@@ -219,4 +219,4 @@ import{r as t,c as e,h as i,g as d}from"./p-3075aa67.js";import{i as c,j as n,k
219
219
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
220
220
  * THE SOFTWARE.
221
221
  */var it=V.strings,dt=it.INTERACTION_EVENT,ct=it.SELECTION_EVENT,nt=it.REMOVAL_EVENT,lt=it.NAVIGATION_EVENT;var rt=et.strings.CHIP_SELECTOR;var ot=0;var at=function(t){z(e,t);function e(){return t!==null&&t.apply(this,arguments)||this}e.attachTo=function(t){return new e(t)};Object.defineProperty(e.prototype,"chips",{get:function(){return this.chipsList.slice()},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"selectedChipIds",{get:function(){return this.foundation.getSelectedChipIds()},enumerable:false,configurable:true});e.prototype.initialize=function(t){if(t===void 0){t=function(t){return new W(t)}}this.chipFactory=t;this.chipsList=this.instantiateChips(this.chipFactory)};e.prototype.initialSyncWithDOM=function(){var t,e;var i=this;try{for(var d=T(this.chipsList),c=d.next();!c.done;c=d.next()){var n=c.value;if(n.id&&n.selected){this.foundation.select(n.id)}}}catch(e){t={error:e}}finally{try{if(c&&!c.done&&(e=d.return))e.call(d)}finally{if(t)throw t.error}}this.handleChipInteraction=function(t){return i.foundation.handleChipInteraction(t.detail)};this.handleChipSelection=function(t){return i.foundation.handleChipSelection(t.detail)};this.handleChipRemoval=function(t){return i.foundation.handleChipRemoval(t.detail)};this.handleChipNavigation=function(t){return i.foundation.handleChipNavigation(t.detail)};this.listen(dt,this.handleChipInteraction);this.listen(ct,this.handleChipSelection);this.listen(nt,this.handleChipRemoval);this.listen(lt,this.handleChipNavigation)};e.prototype.destroy=function(){var e,i;try{for(var d=T(this.chipsList),c=d.next();!c.done;c=d.next()){var n=c.value;n.destroy()}}catch(t){e={error:t}}finally{try{if(c&&!c.done&&(i=d.return))i.call(d)}finally{if(e)throw e.error}}this.unlisten(dt,this.handleChipInteraction);this.unlisten(ct,this.handleChipSelection);this.unlisten(nt,this.handleChipRemoval);this.unlisten(lt,this.handleChipNavigation);t.prototype.destroy.call(this)};e.prototype.addChip=function(t){t.id=t.id||"mdc-chip-"+ ++ot;this.chipsList.push(this.chipFactory(t))};e.prototype.getDefaultFoundation=function(){var t=this;var e={announceMessage:function(t){J(t)},focusChipPrimaryActionAtIndex:function(e){t.chipsList[e].focusPrimaryAction()},focusChipTrailingActionAtIndex:function(e){t.chipsList[e].focusTrailingAction()},getChipListCount:function(){return t.chips.length},getIndexOfChipById:function(e){return t.findChipIndex(e)},hasClass:function(e){return t.root.classList.contains(e)},isRTL:function(){return window.getComputedStyle(t.root).getPropertyValue("direction")==="rtl"},removeChipAtIndex:function(e){if(e>=0&&e<t.chips.length){t.chipsList[e].destroy();t.chipsList[e].remove();t.chipsList.splice(e,1)}},removeFocusFromChipAtIndex:function(e){t.chipsList[e].removeFocus()},selectChipAtIndex:function(e,i,d){if(e>=0&&e<t.chips.length){t.chipsList[e].setSelectedFromChipSet(i,d)}}};return new et(e)};e.prototype.instantiateChips=function(t){var e=[].slice.call(this.root.querySelectorAll(rt));return e.map((function(e){e.id=e.id||"mdc-chip-"+ ++ot;return t(e)}))};e.prototype.findChipIndex=function(t){for(var e=0;e<this.chips.length;e++){if(this.chipsList[e].id===t){return e}}return-1};return e}(A);function mt(t){if(this.textValue.length){return}if(!this.value||!this.value.length){return}const e=t.key===c||t.keyCode===n;const i=t.key===l||t.keyCode===r;const d=t.key===o||t.keyCode===a;const x=t.key===m||t.keyCode===f;const g=t.key===s||t.keyCode===h;const b=t.key===p||t.keyCode===u;if(e){return ft(this,t)}if(i){return st(this,t)}if(d){return ht(this,t)}if(x){return ut(this,t)}if(g){return xt(this,t)}if(b){return pt(this,t)}}function ft(t,e){e.preventDefault();if(t.inputChipIndexSelected===null){t.inputChipIndexSelected=t.value.length-1;return}if(t.inputChipIndexSelected<=0){return}t.inputChipIndexSelected-=1}function st(t,e){e.preventDefault();if(t.inputChipIndexSelected===null){t.inputChipIndexSelected=0;return}if(t.inputChipIndexSelected>=t.value.length-1){return}t.inputChipIndexSelected+=1}function ht(t,e){if(t.inputChipIndexSelected!==null){e.preventDefault();t.emitInteraction(t.value[t.inputChipIndexSelected])}}function pt(t,e){if(t.inputChipIndexSelected!==null){e.preventDefault();t.inputChipIndexSelected=null}}function ut(t,e){if(t.inputChipIndexSelected!==null){e.preventDefault();gt(t)}}function xt(t,e){if(t.inputChipIndexSelected!==null){e.preventDefault();gt(t)}else if(!e.repeat){t.inputChipIndexSelected=t.value.length-1}}function gt(t){if(t.inputChipIndexSelected!==null){t.removeChip(t.value[t.inputChipIndexSelected].id);t.inputChipIndexSelected=null}}const bt='@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)}}.mdc-touch-target-wrapper{display:inline}.mdc-deprecated-chip-trailing-action__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}.mdc-deprecated-chip-trailing-action{border:none;display:inline-flex;position:relative;align-items:center;justify-content:center;box-sizing:border-box;padding:0;outline:none;cursor:pointer;-webkit-appearance:none;background:none}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__icon{height:18px;width:18px;font-size:18px}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action{color:#000;color:var(--mdc-theme-on-surface, #000)}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__touch{width:26px}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__icon{fill:currentColor;color:inherit}@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-deprecated-chip-trailing-action{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);will-change:transform, opacity}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple::before,.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded .mdc-deprecated-chip-trailing-action__ripple::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded .mdc-deprecated-chip-trailing-action__ripple::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded--unbounded .mdc-deprecated-chip-trailing-action__ripple::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded--foreground-activation .mdc-deprecated-chip-trailing-action__ripple::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded--foreground-deactivation .mdc-deprecated-chip-trailing-action__ripple::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple::before,.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple::after{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded .mdc-deprecated-chip-trailing-action__ripple::before,.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded .mdc-deprecated-chip-trailing-action__ripple::after{top:var(--mdc-ripple-top, calc(50% - 50%));left:var(--mdc-ripple-left, calc(50% - 50%));width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded .mdc-deprecated-chip-trailing-action__ripple::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple::before,.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple::after{background-color:#000;background-color:var(--mdc-ripple-color, var(--mdc-theme-on-surface, #000))}.mdc-deprecated-chip-trailing-action:hover .mdc-deprecated-chip-trailing-action__ripple::before,.mdc-deprecated-chip-trailing-action.mdc-ripple-surface--hover .mdc-deprecated-chip-trailing-action__ripple::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded--background-focused .mdc-deprecated-chip-trailing-action__ripple::before,.mdc-deprecated-chip-trailing-action:not(.mdc-ripple-upgraded):focus .mdc-deprecated-chip-trailing-action__ripple::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-deprecated-chip-trailing-action:not(.mdc-ripple-upgraded) .mdc-deprecated-chip-trailing-action__ripple::after{transition:opacity 150ms linear}.mdc-deprecated-chip-trailing-action:not(.mdc-ripple-upgraded):active .mdc-deprecated-chip-trailing-action__ripple::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple{position:absolute;box-sizing:content-box;width:100%;height:100%;overflow:hidden}.mdc-chip__icon--leading{color:rgba(0, 0, 0, 0.54)}.mdc-deprecated-chip-trailing-action{color:#000}.mdc-chip__icon--trailing{color:rgba(0, 0, 0, 0.54)}.mdc-chip__icon--trailing:hover{color:rgba(0, 0, 0, 0.62)}.mdc-chip__icon--trailing:focus{color:rgba(0, 0, 0, 0.87)}.mdc-chip__icon.mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden){width:20px;height:20px;font-size:20px}.mdc-deprecated-chip-trailing-action__icon{height:18px;width:18px;font-size:18px}.mdc-chip__icon.mdc-chip__icon--trailing{width:18px;height:18px;font-size:18px}.mdc-deprecated-chip-trailing-action{margin-left:4px;margin-right:-4px}[dir=rtl] .mdc-deprecated-chip-trailing-action,.mdc-deprecated-chip-trailing-action[dir=rtl]{margin-left:-4px;margin-right:4px;}.mdc-chip__icon--trailing{margin-left:4px;margin-right:-4px}[dir=rtl] .mdc-chip__icon--trailing,.mdc-chip__icon--trailing[dir=rtl]{margin-left:-4px;margin-right:4px;}.mdc-elevation-overlay{position:absolute;border-radius:inherit;pointer-events:none;opacity:0;opacity:var(--mdc-elevation-overlay-opacity, 0);transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);background-color:#fff;background-color:var(--mdc-elevation-overlay-color, #fff)}.mdc-chip{border-radius:16px;background-color:#e0e0e0;color:rgba(0, 0, 0, 0.87);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, inherit));font-size:0.8125rem;font-size:var(--mdc-typography-body2-font-size, 0.8125rem);line-height:1.625rem;line-height:var(--mdc-typography-body2-line-height, 1.625rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight, 400);letter-spacing:0.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, 0.0178571429em);text-decoration:inherit;text-decoration:var(--mdc-typography-body2-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform, inherit);height:32px;position:relative;display:inline-flex;align-items:center;box-sizing:border-box;padding:0 12px;border-width:0;outline:none;cursor:pointer;-webkit-appearance:none}.mdc-chip .mdc-chip__ripple{border-radius:16px}.mdc-chip:hover{color:rgba(0, 0, 0, 0.87)}.mdc-chip.mdc-chip--selected .mdc-chip__checkmark,.mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden){margin-left:-4px;margin-right:4px}[dir=rtl] .mdc-chip.mdc-chip--selected .mdc-chip__checkmark,[dir=rtl] .mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden),.mdc-chip.mdc-chip--selected .mdc-chip__checkmark[dir=rtl],.mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden)[dir=rtl]{margin-left:4px;margin-right:-4px;}.mdc-chip .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-chip::-moz-focus-inner{padding:0;border:0}.mdc-chip:hover{color:#000;color:var(--mdc-theme-on-surface, #000)}.mdc-chip .mdc-chip__touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-chip--exit{transition:opacity 75ms cubic-bezier(0.4, 0, 0.2, 1), width 150ms cubic-bezier(0, 0, 0.2, 1), padding 100ms linear, margin 100ms linear;opacity:0}.mdc-chip__overflow{text-overflow:ellipsis;overflow:hidden}.mdc-chip__text{white-space:nowrap}.mdc-chip__icon{border-radius:50%;outline:none;vertical-align:middle}.mdc-chip__checkmark{height:20px}.mdc-chip__checkmark-path{transition:stroke-dashoffset 150ms 50ms cubic-bezier(0.4, 0, 0.6, 1);stroke-width:2px;stroke-dashoffset:29.7833385;stroke-dasharray:29.7833385}.mdc-chip__primary-action:focus{outline:none}.mdc-chip--selected .mdc-chip__checkmark-path{stroke-dashoffset:0}.mdc-chip__icon--leading,.mdc-chip__icon--trailing{position:relative}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected{color:#26a69a;color:var(--mdc-theme-primary, #26a69a)}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected .mdc-chip__icon--leading{color:rgba(38, 166, 154, 0.54)}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected:hover{color:#26a69a;color:var(--mdc-theme-primary, #26a69a)}.mdc-chip-set--choice .mdc-chip .mdc-chip__checkmark-path{stroke:#26a69a;stroke:var(--mdc-theme-primary, #26a69a)}.mdc-chip-set--choice .mdc-chip--selected{background-color:#fff;background-color:var(--mdc-theme-surface, #fff)}.mdc-chip__checkmark-svg{width:0;height:20px;transition:width 150ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-chip--selected .mdc-chip__checkmark-svg{width:20px}.mdc-chip-set--filter .mdc-chip__icon--leading{transition:opacity 75ms linear;transition-delay:-50ms;opacity:1}.mdc-chip-set--filter .mdc-chip__icon--leading+.mdc-chip__checkmark{transition:opacity 75ms linear;transition-delay:80ms;opacity:0}.mdc-chip-set--filter .mdc-chip__icon--leading+.mdc-chip__checkmark .mdc-chip__checkmark-svg{transition:width 0ms}.mdc-chip-set--filter .mdc-chip--selected .mdc-chip__icon--leading{opacity:0}.mdc-chip-set--filter .mdc-chip--selected .mdc-chip__icon--leading+.mdc-chip__checkmark{width:0;opacity:1}.mdc-chip-set--filter .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading{width:0;opacity:0}.mdc-chip-set--filter .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading+.mdc-chip__checkmark{width:20px}.mdc-chip{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);will-change:transform, opacity}.mdc-chip .mdc-chip__ripple::before,.mdc-chip .mdc-chip__ripple::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-chip .mdc-chip__ripple::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-chip .mdc-chip__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-chip.mdc-ripple-upgraded .mdc-chip__ripple::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-chip.mdc-ripple-upgraded .mdc-chip__ripple::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-chip.mdc-ripple-upgraded--unbounded .mdc-chip__ripple::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-chip.mdc-ripple-upgraded--foreground-activation .mdc-chip__ripple::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.mdc-chip.mdc-ripple-upgraded--foreground-deactivation .mdc-chip__ripple::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-chip .mdc-chip__ripple::before,.mdc-chip .mdc-chip__ripple::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-chip.mdc-ripple-upgraded .mdc-chip__ripple::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-chip .mdc-chip__ripple::before,.mdc-chip .mdc-chip__ripple::after{background-color:rgba(0, 0, 0, 0.87);background-color:var(--mdc-ripple-color, rgba(0, 0, 0, 0.87))}.mdc-chip:hover .mdc-chip__ripple::before,.mdc-chip.mdc-ripple-surface--hover .mdc-chip__ripple::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-chip.mdc-ripple-upgraded--background-focused .mdc-chip__ripple::before,.mdc-chip.mdc-ripple-upgraded:focus-within .mdc-chip__ripple::before,.mdc-chip:not(.mdc-ripple-upgraded):focus .mdc-chip__ripple::before,.mdc-chip:not(.mdc-ripple-upgraded):focus-within .mdc-chip__ripple::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-chip:not(.mdc-ripple-upgraded) .mdc-chip__ripple::after{transition:opacity 150ms linear}.mdc-chip:not(.mdc-ripple-upgraded):active .mdc-chip__ripple::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-chip.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-chip .mdc-chip__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected .mdc-chip__ripple::before{opacity:0.16;opacity:var(--mdc-ripple-selected-opacity, 0.16)}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected .mdc-chip__ripple::before,.mdc-chip-set--choice .mdc-chip.mdc-chip--selected .mdc-chip__ripple::after{background-color:#26a69a;background-color:var(--mdc-ripple-color, var(--mdc-theme-primary, #26a69a))}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected:hover .mdc-chip__ripple::before,.mdc-chip-set--choice .mdc-chip.mdc-chip--selected.mdc-ripple-surface--hover .mdc-chip__ripple::before{opacity:0.24;opacity:var(--mdc-ripple-hover-opacity, 0.24)}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected.mdc-ripple-upgraded--background-focused .mdc-chip__ripple::before,.mdc-chip-set--choice .mdc-chip.mdc-chip--selected.mdc-ripple-upgraded:focus-within .mdc-chip__ripple::before,.mdc-chip-set--choice .mdc-chip.mdc-chip--selected:not(.mdc-ripple-upgraded):focus .mdc-chip__ripple::before,.mdc-chip-set--choice .mdc-chip.mdc-chip--selected:not(.mdc-ripple-upgraded):focus-within .mdc-chip__ripple::before{transition-duration:75ms;opacity:0.4;opacity:var(--mdc-ripple-focus-opacity, 0.4)}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected:not(.mdc-ripple-upgraded) .mdc-chip__ripple::after{transition:opacity 150ms linear}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected:not(.mdc-ripple-upgraded):active .mdc-chip__ripple::after{transition-duration:75ms;opacity:0.4;opacity:var(--mdc-ripple-press-opacity, 0.4)}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.4)}@keyframes mdc-chip-entry{from{transform:scale(0.8);opacity:0.4}to{transform:scale(1);opacity:1}}.mdc-chip-set{padding:4px;display:flex;flex-wrap:wrap;box-sizing:border-box}.mdc-chip-set .mdc-chip{margin:4px}.mdc-chip-set .mdc-chip--touch{margin-top:8px;margin-bottom:8px}.mdc-chip-set--input .mdc-chip{animation:mdc-chip-entry 100ms cubic-bezier(0, 0, 0.2, 1)}.mdc-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-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.5rem}.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;pointer-events:none;opacity:0.4}:host(limel-chip-set){isolation:isolate}.mdc-chip{font-family:inherit}.mdc-chip{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);max-width:100%;min-width:2rem;padding:0 0.0625rem;display:inline-grid;grid-auto-flow:column}.mdc-chip:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.mdc-chip:active{background-color:var(--mdc-theme-surface);box-shadow:var(--button-shadow-inset-pressed);transform:translate3d(0, 0.05rem, 0)}.mdc-chip span[role=gridcell]{min-width:0}.mdc-chip span[role=gridcell]:only-child .mdc-chip__text{padding-left:0.75rem}.mdc-chip span[role=gridcell]:first-child .mdc-chip__text{padding-left:0.75rem}.mdc-chip span[role=gridcell] a[role=button]:focus-visible:after,.mdc-chip span[role=gridcell] span[role=checkbox]:focus-visible:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:3.75rem;box-shadow:var(--shadow-depth-8-focused)}.mdc-chip.mdc-chip--selected{color:var(--mdc-theme-primary) !important;background-color:var(--mdc-theme-surface) !important;box-shadow:var(--button-shadow-inset)}.mdc-chip.mdc-chip--selected:active{box-shadow:var(--button-shadow-inset-pressed)}.mdc-chip.mdc-chip--selected .mdc-chip__icon--leading{color:var(--mdc-theme-primary) !important}.mdc-chip.mdc-chip--selected .mdc-chip__checkmark,.mdc-chip__checkmark{margin-right:0.25rem;margin-left:0.5rem}limel-badge{margin-right:0.25rem;margin-left:-0.25rem}.mdc-chip__text{overflow:hidden;text-overflow:ellipsis;display:block;padding:0 0.75rem 0 0.25rem;color:inherit;text-decoration:none}.mdc-chip__text:focus,.mdc-chip__text:focus-visible{outline:none}limel-icon.mdc-chip__icon.mdc-chip__icon--leading{background-color:var(--icon-background-color, transparent);margin:0 !important;color:var(--icon-color, rgb(var(--contrast-1100)))}.mdc-chip-set{align-items:center;min-height:3.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.5rem;width:100%}.mdc-chip-set.mdc-chip-set--input .mdc-chip--selected{box-shadow:var(--shadow-depth-8-error)}.mdc-chip-set.mdc-chip-set--input .mdc-chip--selected .mdc-chip__icon--trailing{color:rgb(var(--color-red-dark));background-color:rgba(var(--color-red-default), 0.2)}.mdc-chip-set.mdc-chip-set--input .mdc-chip--selected .mdc-chip__icon--trailing svg{transform:scale(0.7)}.mdc-chip-set.has-clear-all-button.mdc-chip-set--input{padding-right:2rem}.mdc-chip-set.disabled:not(.mdc-chip-set--input){cursor:not-allowed;pointer-events:none;opacity:0.4}.mdc-chip__icon.mdc-chip__icon--trailing{transition:background-color 0.2s ease, color 0.2s ease;color:var(--mdc-theme-on-surface);margin-left:0;margin-right:0.3125rem;width:1.375rem;height:1.375rem}.mdc-chip__icon.mdc-chip__icon--trailing:hover{background-color:rgba(var(--color-red-default), 0.2)}.mdc-chip__icon.mdc-chip__icon--trailing:hover svg{transform:scale(0.7)}.mdc-chip__icon.mdc-chip__icon--trailing svg{transition:transform 0.2s ease;display:block;transform:scale(0.9)}.mdc-text-field{height:auto;cursor:text}.mdc-text-field .mdc-text-field__input{width:auto;height:2.25rem;line-height:2.25rem;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}.mdc-text-field--disabled .mdc-chip{pointer-events:all}.mdc-text-field--disabled .mdc-chip.disabled{cursor:not-allowed;pointer-events:none;opacity:0.4}.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);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:1.125rem;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:2.5rem}.has-leading-icon:not(.has-chips) .mdc-floating-label:not(.lime-floating-label--float-above){left:2.5rem}.has-leading-icon:not(.has-chips) .mdc-floating-label.mdc-floating-label--float-above{left:0.25rem}.has-leading-icon .mdc-chip:first-of-type{margin-left:40px}.has-leading-icon .search-icon{transition:transform 0.2s ease;position:absolute;top:1rem;left:1rem}.has-leading-icon limel-icon{background-color:transparent}.delimiter{opacity:0.5;padding:0 0.125rem;color:var(--mdc-theme-on-surface)}: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.25rem;--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;pointer-events:none;opacity:0.4}: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}';const _t="mdc-chip--selected";const vt=1;const yt=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=mt;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=()=>x.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.clearAllChipsLabel=()=>x.get("chip-set.clear-all",this.language);this.removeChipLabel=()=>x.get("chip-set.remove-chip",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.renderChip=this.renderChip.bind(this);this.renderInputChip=this.renderInputChip.bind(this);this.isFull=this.isFull.bind(this);this.handleInteractionEvent=this.handleInteractionEvent.bind(this);this.handleSelection=this.handleSelection.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)}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"))}this.createMDCChipSet()}componentWillUpdate(){this.destroyMDCChipSet()}componentDidUpdate(){this.createMDCChipSet();const t=this.host.shadowRoot.querySelector("input");if(t&&this.editMode){t.focus()}}disconnectedCallback(){this.destroyMDCChipSet();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}return i("div",{class:t,role:"grid"},e,this.value.map(this.renderChip),this.renderHelperLine())}handleChangeChips(t,e){if(C(t,e)){return}this.syncEmptyInput()}createMDCChipSet(){this.mdcChipSet=new at(this.host.shadowRoot.querySelector(".mdc-chip-set"));if(!this.type||this.type==="input"){this.mdcChipSet.listen("MDCChip:interaction",this.handleInteractionEvent)}if(this.type==="choice"||this.type==="filter"){this.mdcChipSet.listen("MDCChip:selection",this.handleSelection)}}destroyMDCChipSet(){if(this.mdcChipSet){this.mdcChipSet.unlisten("MDCChip:interaction",this.handleInteractionEvent);this.mdcChipSet.unlisten("MDCChip:selection",this.handleSelection);this.mdcChipSet.destroy()}}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:vt,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())}handleInteractionEvent(t){const e=this.value.find((e=>`${e.id}`===t.detail.chipId));this.emitInteraction(e)}emitInteraction(t){this.interact.emit(t)}handleSelection(t){let e=this.value.find((e=>`${e.id}`===t.detail.chipId));e=Object.assign(Object.assign({},e),{selected:t.detail.selected});this.change.emit(e)}removeChip(t){const e=this.value.filter((e=>`${e.id}`!==`${t}`));this.change.emit(e)}renderChip(t){if(this.type==="filter"){return this.renderFilterChip(t)}return this.renderDefaultChip(t)}renderDefaultChip(t){return i("div",{class:`mdc-chip ${t.selected?_t:""}`,role:"row",id:`${t.id}`},t.icon?this.renderChipIcon(t):null,t.text?this.renderChipLabel(t):null)}renderChipLabel(t){const e={};if(t.href){e.href=g(t.href);e.target=b(t.href)}return i("span",{role:"gridcell"},i("a",Object.assign({role:"button",tabindex:this.disabled?"-1":"0",class:"mdc-chip__text"},e),t.text))}renderFilterChip(t){return i("div",{class:`mdc-chip ${t.selected?_t:""}`,role:"row",id:`${t.id}`},i("span",{class:"mdc-chip__checkmark"},i("svg",{class:"mdc-chip__checkmark-svg",viewBox:"-2 -3 30 30"},i("path",{class:"mdc-chip__checkmark-path",fill:"none",stroke:"currentColor",d:"M1.73,12.91 8.1,19.28 22.79,4.59"}))),i("span",{role:"gridcell"},i("span",{role:"checkbox",tabindex:this.disabled?"-1":"0","aria-checked":"false",class:"mdc-chip__text"},t.text)),this.renderBadge(t))}renderInputChip(t,e){return[i("div",{class:{"mdc-chip":true,"mdc-chip--selected":this.inputChipIndexSelected===e,disabled:this.disabled},role:"row",id:`${t.id}`,onClick:this.catchInputChipClicks},t.icon?this.renderChipIcon(t):null,this.renderChipLabel(t),this.renderChipRemoveButton(t)),this.renderDelimiter()]}catchInputChipClicks(t){t.stopPropagation()}renderChipIcon(t){const e=_(t.icon);const d=y(t.icon,t.iconFillColor);const c=w(t.icon,t.iconBackgroundColor);const n=v(t.icon,t.iconTitle);const l={};if(d){l["--icon-color"]=d}if(c){l["--icon-background-color"]=c}return i("limel-icon",{class:"mdc-chip__icon mdc-chip__icon--leading",name:e,style:l,size:"small",badge:true,title:n})}renderLeadingIcon(){if(!this.leadingIcon){return}return i("i",{class:"mdc-text-field__icon search-icon"},i("limel-icon",{name:this.leadingIcon}))}renderChipRemoveButton(t){if(!t.removable||this.readonly||this.disabled){return}const e=`<svg style="height:100%;width:100%;" width="32" height="32" x="0px" y="0px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">\n <line fill="none" id="svg_1" stroke="currentColor" stroke-width="2" x1="8" x2="24" y1="8" y2="24"/>\n <line fill="none" id="svg_2" stroke="currentColor" stroke-width="2" x1="24" x2="8" y1="8" y2="24"/>\n</svg>`;const d=e=>{e.stopPropagation();this.removeChip(t.id)};return i("button",{class:"mdc-chip__icon mdc-chip__icon--trailing mdc-deprecated-chip-trailing-action","aria-label":this.removeChipLabel,tabindex:"-1",innerHTML:e,onClick:d})}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)}renderBadge(t){if(!t.badge){return}return i("limel-badge",{label:t.badge})}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 d(this)}static get watchers(){return{value:["handleChangeChips"]}}};yt.style=bt;export{yt as limel_chip_set};
222
- //# sourceMappingURL=p-00403204.entry.js.map
222
+ //# sourceMappingURL=p-22bc684d.entry.js.map
package/dist/lime-elements/p-71bf6613.entry.js ADDED
@@ -0,0 +1,2 @@
1
+ import{r as t,c as i,h as s,g as e}from"./p-3075aa67.js";import{A as h}from"./p-97107e34.js";import{i as n}from"./p-0534b23b.js";import{T as r,E as o,c as a,d as l,e as c,f as d,A as u,g as f,h as p,i as m}from"./p-93c6d561.js";import{c as y}from"./p-3ccdc4a3.js";import{g,c as b}from"./p-88694767.js";const w=":host{position:relative;display:block}:host([hidden]){display:none}";const v=500;const C="limel-chip-set";const D=class{constructor(s){t(this,s);this.change=i(this,"change",7);this.interact=i(this,"interact",7);this.action=i(this,"action",7);this.chipSetEditMode=false;this.disabled=false;this.readonly=false;this.label=undefined;this.searchLabel=undefined;this.helperText=undefined;this.leadingIcon=undefined;this.emptyResultMessage=undefined;this.required=false;this.invalid=false;this.value=undefined;this.searcher=undefined;this.multiple=false;this.delimiter=null;this.actions=[];this.actionPosition="bottom";this.actionScrollBehavior="sticky";this.badgeIcons=false;this.items=undefined;this.textValue="";this.loading=false;this.chips=[];this.handleTextInput=this.handleTextInput.bind(this);this.handleInputKeyDown=this.handleInputKeyDown.bind(this);this.handleDropdownKeyDown=this.handleDropdownKeyDown.bind(this);this.handleInputFieldFocus=this.handleInputFieldFocus.bind(this);this.handleChange=this.handleChange.bind(this);this.handleInteract=this.handleInteract.bind(this);this.handleListChange=this.handleListChange.bind(this);this.handleActionListChange=this.handleActionListChange.bind(this);this.handleStopEditAndBlur=this.handleStopEditAndBlur.bind(this);this.createDebouncedSearcher=this.createDebouncedSearcher.bind(this);this.handleCloseMenu=this.handleCloseMenu.bind(this);this.onListKeyDown=this.onListKeyDown.bind(this);this.portalId=y()}componentWillLoad(){this.chips=this.createChips(this.value)}componentDidLoad(){this.createDebouncedSearcher(this.searcher);this.chipSet=this.host.shadowRoot.querySelector(C)}async componentWillUpdate(){this.chipSetEditMode=false;if(this.chipSet){this.chipSetEditMode=await this.chipSet.getEditMode()}}render(){const t={};if(!this.multiple){t.maxItems=1}return[s("limel-chip-set",Object.assign({type:"input",inputType:"search",label:this.label,helperText:this.helperText,leadingIcon:this.leadingIcon,value:this.chips,disabled:this.disabled,invalid:this.invalid,delimiter:this.renderDelimiter(),readonly:this.readonly,required:this.required,searchLabel:this.searchLabel,onInput:this.handleTextInput,onKeyDown:this.handleInputKeyDown,onChange:this.handleChange,onInteract:this.handleInteract,onStartEdit:this.handleInputFieldFocus,onStopEdit:this.handleStopEditAndBlur,emptyInputOnBlur:false,clearAllButton:this.multiple&&!this.chipSetEditMode},t)),this.renderDropdown()]}onChangeValue(){this.chips=this.createChips(this.value)}createDebouncedSearcher(t){if(typeof t!=="function"){return}this.debouncedSearch=h(t,v)}renderDelimiter(){if(this.multiple){return this.delimiter}return null}createChips(t){if(!t){return[]}if(this.multiple){const i=t;return i.map(this.createChip)}const i=t;return[this.createChip(i)]}createChip(t){return{id:`${t.value}`,text:t.text,removable:true,icon:{name:g(t.icon),color:b(t.icon,t.iconColor)},value:t}}renderDropdown(){const t=this.getDropdownContent();const i=[];if(this.shouldShowDropDownContent()){const s=this.getActionContent();if(this.actionPosition==="top"){i.push(s)}if(t){i.push(t)}if(this.actionPosition==="bottom"){i.push(s)}}return this.renderPortal(i)}getActionContent(){var t,i;const e=(i=(t=this.actions)===null||t===void 0?void 0:t.length)!==null&&i!==void 0?i:0;if(e===0){return null}return[s("limel-list",{class:{"static-actions-list":true,"is-on-top":this.actionPosition==="top","is-at-bottom":this.actionPosition==="bottom","has-position-sticky":this.actionScrollBehavior==="sticky"},badgeIcons:true,type:"selectable",onChange:this.handleActionListChange,items:this.actions.map(this.removeUnusedPropertiesOnAction)})]}removeUnusedPropertiesOnAction(t){return Object.assign(Object.assign({},t),{actions:[]})}shouldShowDropDownContent(){if(this.isFull()){return false}return!!this.chipSetEditMode}getDropdownContent(){if(!this.shouldShowDropDownContent()){return}if(this.loading){return this.renderSpinner()}if(!this.items||!this.items.length){return this.renderEmptyMessage()}return this.renderListResult()}isFull(){return!this.multiple&&!!this.value}renderSpinner(){return s("div",{style:{width:"100%",display:"flex","align-items":"center","justify-content":"center",padding:"1rem 0"}},s("limel-spinner",{limeBranded:false}))}renderEmptyMessage(){if(!this.emptyResultMessage){return}const t={color:"rgb(var(--contrast-1100))","text-align":"center",margin:"0.5rem 1rem"};return s("p",{style:t},this.emptyResultMessage)}renderListResult(){return s("limel-list",{badgeIcons:this.badgeIcons,onChange:this.handleListChange,onKeyDown:this.onListKeyDown,type:"selectable",items:this.items})}onListKeyDown(t){const i=[r,o,a].includes(t.key);const s=[l,c,d].includes(t.keyCode);if(i||s){this.chipSet.setFocus()}}renderPortal(t=[]){const i=getComputedStyle(this.host).getPropertyValue("--dropdown-z-index");return s("limel-portal",{visible:t.length>0,containerId:this.portalId,inheritParentWidth:true,containerStyle:{"z-index":i}},s("limel-menu-surface",{open:t.length>0,allowClicksElement:this.host,style:{"--mdc-menu-min-width":"100%","max-height":"inherit",display:"flex"},onDismiss:this.handleCloseMenu},t))}handleStopEditAndBlur(){const t=this.host.shadowRoot.activeElement||document.activeElement;const i=document.querySelector(`#${this.portalId}`);if(n(t,this.host)||n(t,i)){return}this.clearInputField()}async handleTextInput(t){t.stopPropagation();const i=t.detail;this.textValue=i;this.loading=true;const s=i===""?this.searcher:this.debouncedSearch;const e=await s(i);this.handleSearchResult(i,e)}handleListChange(t){var i;t.stopPropagation();if(!this.value||this.value!==t.detail){let i=t.detail;if(this.multiple){i=[...this.value,t.detail]}this.change.emit(i);this.items=[]}if(this.multiple){(i=this.chipSet)===null||i===void 0?void 0:i.setFocus(true)}}handleActionListChange(t){t.stopPropagation();if(!t.detail){return}this.action.emit(t.detail.value);this.items=[]}async handleInputFieldFocus(){this.loading=true;const t=this.textValue;const i=await this.searcher(t);this.handleSearchResult(t,i)}handleChange(t){t.stopPropagation();let i=null;if(this.multiple){const s=t.detail;i=s.map((t=>this.value.find((i=>`${i.value}`===t.id))))}this.change.emit(i)}handleInteract(t){t.stopPropagation();this.interact.emit(t.detail?t.detail.value:t.detail)}handleInputKeyDown(t){const i=(t.key===r||t.keyCode===l)&&!t.altKey&&!t.metaKey&&!t.shiftKey;const s=t.key===u||t.keyCode===f;const e=t.key===p||t.keyCode===m;if(!i&&!s&&!e){return}const h=document.querySelector(` #${this.portalId} limel-list`);if(!h){return}t.preventDefault();if(i||e){const t=h.shadowRoot.querySelector(".mdc-deprecated-list-item:first-child");t.focus();return}if(s){const t=h.shadowRoot.querySelector(".mdc-deprecated-list-item:last-child");t.focus()}}handleDropdownKeyDown(t){const i=t.key===o||t.keyCode===c;if(i){t.preventDefault();this.textValue="";this.chipSet.setFocus(true)}}handleSearchResult(t,i){if(t===this.textValue){this.items=i;if(this.multiple){const t=this.value;this.items=i.filter((i=>!t.includes(i)))}this.loading=false}}handleCloseMenu(){if(this.items.length>0){return}this.clearInputField()}clearInputField(){this.chipSet.emptyInput();this.textValue="";this.handleSearchResult("",[])}get host(){return e(this)}static get watchers(){return{value:["onChangeValue"],searcher:["createDebouncedSearcher"]}}};D.style=w;export{D as limel_picker};
2
+ //# sourceMappingURL=p-71bf6613.entry.js.map
package/dist/lime-elements/{p-b88e8225.entry.js.map → p-71bf6613.entry.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"names":["pickerCss","SEARCH_DEBOUNCE","CHIP_SET_TAG_NAME","Picker","constructor","hostRef","this","chipSetEditMode","handleTextInput","bind","handleInputKeyDown","handleDropdownKeyDown","handleInputFieldFocus","handleChange","handleInteract","handleListChange","handleActionListChange","handleStopEditAndBlur","createDebouncedSearcher","handleCloseMenu","onListKeyDown","portalId","createRandomString","componentWillLoad","chips","createChips","value","componentDidLoad","searcher","chipSet","host","shadowRoot","querySelector","async","getEditMode","render","props","multiple","maxItems","h","Object","assign","type","inputType","label","helperText","leadingIcon","disabled","invalid","delimiter","renderDelimiter","readonly","required","searchLabel","onInput","onKeyDown","onChange","onInteract","onStartEdit","onStopEdit","emptyInputOnBlur","clearAllButton","renderDropdown","onChangeValue","newValue","debouncedSearch","AwesomeDebouncePromise","listItems","map","createChip","listItem","id","text","removable","icon","name","getIconName","color","getIconFillColor","iconColor","dropDownContent","getDropdownContent","content","shouldShowDropDownContent","actionContent","getActionContent","actionPosition","push","renderPortal","actionCount","_b","_a","actions","length","class","actionScrollBehavior","badgeIcons","items","removeUnusedPropertiesOnAction","action","isFull","loading","renderSpinner","renderEmptyMessage","renderListResult","style","width","display","padding","limeBranded","emptyResultMessage","margin","event","keyFound","TAB","ESCAPE","ENTER","includes","key","keyCodeFound","TAB_KEY_CODE","ESCAPE_KEY_CODE","ENTER_KEY_CODE","keyCode","setFocus","dropdownZIndex","getComputedStyle","getPropertyValue","visible","containerId","inheritParentWidth","containerStyle","open","allowClicksElement","onDismiss","element","activeElement","document","portalElement","isDescendant","clearInputField","stopPropagation","query","detail","textValue","searchFn","result","handleSearchResult","change","emit","chip","find","item","interact","isForwardTab","altKey","metaKey","shiftKey","isUp","ARROW_UP","ARROW_UP_KEY_CODE","isDown","ARROW_DOWN","ARROW_DOWN_KEY_CODE","list","preventDefault","listElement","focus","isEscape","values","filter","emptyInput"],"sources":["./src/components/picker/picker.scss?tag=limel-picker&encapsulation=shadow","./src/components/picker/picker.tsx"],"sourcesContent":["// Note! The `--dropdown-z-index` property is used from `picker.tsx`.\n/**\n * @prop --dropdown-z-index: z-index of the dropdown menu.\n */\n\n:host {\n position: relative;\n display: block;\n}\n\n:host([hidden]) {\n display: none;\n}\n","import {\n Action,\n ActionPosition,\n ActionScrollBehavior,\n Chip,\n ListItem,\n Searcher,\n} from '../../interface';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport AwesomeDebouncePromise from 'awesome-debounce-promise';\nimport { isDescendant } from '../../util/dom';\nimport {\n ARROW_DOWN,\n ARROW_DOWN_KEY_CODE,\n ARROW_UP,\n ARROW_UP_KEY_CODE,\n ENTER,\n ENTER_KEY_CODE,\n ESCAPE,\n ESCAPE_KEY_CODE,\n TAB,\n TAB_KEY_CODE,\n} from '../../util/keycodes';\nimport { createRandomString } from '../../util/random-string';\nimport { LimelChipSetCustomEvent, LimelListCustomEvent } from 'src/components';\nimport { getIconFillColor, getIconName } from '../icon/get-icon-props';\n\nconst SEARCH_DEBOUNCE = 500;\nconst CHIP_SET_TAG_NAME = 'limel-chip-set';\n\n/**\n * @exampleComponent limel-example-picker-single\n * @exampleComponent limel-example-picker-multiple\n * @exampleComponent limel-example-picker-icons\n * @exampleComponent limel-example-picker-empty-suggestions\n * @exampleComponent limel-example-picker-leading-icon\n * @exampleComponent limel-example-picker-static-actions\n * @exampleComponent limel-example-picker-composite\n */\n@Component({\n tag: 'limel-picker',\n shadow: true,\n styleUrl: 'picker.scss',\n})\nexport class Picker {\n /**\n * True if the picker should be disabled\n */\n @Prop()\n public disabled: boolean = false;\n\n /**\n * Set to `true` to disable adding and removing items,\n * but allow interaction with existing items.\n */\n @Prop({ reflect: true })\n public readonly: boolean = false;\n\n /**\n * Text to display for the input field of the picker\n */\n @Prop()\n public label: string;\n\n /**\n * Search label to display in the input field when searching\n */\n @Prop()\n public searchLabel: string;\n\n /**\n * Optional helper text to display below the input field when it has focus\n */\n @Prop({ reflect: true })\n public helperText: string;\n\n /**\n * Leading icon to show to the far left in the text field\n */\n @Prop()\n public leadingIcon: string;\n\n /**\n * A message to display when the search returned an empty result\n */\n @Prop()\n public emptyResultMessage: string;\n\n /**\n * True if the control requires a value\n */\n @Prop()\n public required: 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 * Currently selected value or values\n */\n @Prop()\n public value: ListItem<number | string> | Array<ListItem<number | string>>;\n\n /**\n * A search function that takes a search-string as an argument,\n * and returns a promise that will eventually be resolved with\n * an array of `ListItem`:s.\n *\n * See the docs for the type `Searcher` for type information on\n * the searcher function itself.\n */\n @Prop()\n public searcher: Searcher;\n\n /**\n * True if multiple values are allowed\n */\n @Prop()\n public multiple: boolean = false;\n\n /**\n * Sets delimiters between chips. Works only when `multiple` is `true`.\n */\n @Prop({ reflect: true })\n public delimiter: string = null;\n\n /**\n * Static actions that can be clicked by the user.\n */\n @Prop()\n public actions: Array<ListItem<Action>> = [];\n\n /**\n * Position of the custom static actions in the picker's results dropdown.\n * Can be set to `'top'` or `'bottom'`.\n */\n @Prop()\n public actionPosition: ActionPosition = 'bottom';\n\n /**\n * Scroll behavior of the custom static actions, when user scrolls\n * in the picker's results dropdown. Can be set to `'scroll'` which means\n * the action items will scroll together with the list, or `'sticky'` which\n * retains their position at the top or bottom of the drop down while\n * scrolling.\n */\n @Prop()\n public actionScrollBehavior: ActionScrollBehavior = 'sticky';\n\n /**\n * Whether badge icons should be used in the result list or not\n */\n @Prop({ reflect: true })\n public badgeIcons: boolean = false;\n\n /**\n * Fired when a new value has been selected from the picker\n */\n @Event()\n private change: EventEmitter<\n ListItem<number | string> | Array<ListItem<number | string>>\n >;\n\n /**\n * Fired when clicking on a selected value\n */\n @Event()\n private interact: EventEmitter<ListItem<number | string>>;\n\n /**\n * Emitted when the user selects an action.\n */\n @Event()\n private action: EventEmitter<Action>;\n\n @State()\n private items: Array<ListItem<number | string>>;\n\n @State()\n private textValue: string = '';\n\n @State()\n private loading: boolean = false;\n\n @State()\n private chips: Chip[] = [];\n\n @Element()\n private host: HTMLLimelPickerElement;\n\n // Should NOT be decorated with State(), since this\n // should not trigger a re-render by itself.\n private chipSetEditMode = false;\n\n private debouncedSearch: Searcher;\n private chipSet: HTMLLimelChipSetElement;\n private portalId: string;\n\n constructor() {\n this.handleTextInput = this.handleTextInput.bind(this);\n this.handleInputKeyDown = this.handleInputKeyDown.bind(this);\n this.handleDropdownKeyDown = this.handleDropdownKeyDown.bind(this);\n this.handleInputFieldFocus = this.handleInputFieldFocus.bind(this);\n this.handleChange = this.handleChange.bind(this);\n this.handleInteract = this.handleInteract.bind(this);\n this.handleListChange = this.handleListChange.bind(this);\n this.handleActionListChange = this.handleActionListChange.bind(this);\n this.handleStopEditAndBlur = this.handleStopEditAndBlur.bind(this);\n this.createDebouncedSearcher = this.createDebouncedSearcher.bind(this);\n this.handleCloseMenu = this.handleCloseMenu.bind(this);\n this.onListKeyDown = this.onListKeyDown.bind(this);\n\n this.portalId = createRandomString();\n }\n\n public componentWillLoad() {\n this.chips = this.createChips(this.value);\n }\n\n public componentDidLoad() {\n this.createDebouncedSearcher(this.searcher);\n this.chipSet = this.host.shadowRoot.querySelector(CHIP_SET_TAG_NAME);\n }\n\n public async componentWillUpdate() {\n this.chipSetEditMode = false;\n if (this.chipSet) {\n this.chipSetEditMode = await this.chipSet.getEditMode();\n }\n }\n\n public render() {\n const props: {\n maxItems?: number;\n } = {};\n\n if (!this.multiple) {\n props.maxItems = 1;\n }\n\n return [\n <limel-chip-set\n type=\"input\"\n inputType=\"search\"\n label={this.label}\n helperText={this.helperText}\n leadingIcon={this.leadingIcon}\n value={this.chips}\n disabled={this.disabled}\n invalid={this.invalid}\n delimiter={this.renderDelimiter()}\n readonly={this.readonly}\n required={this.required}\n searchLabel={this.searchLabel}\n onInput={this.handleTextInput}\n onKeyDown={this.handleInputKeyDown}\n onChange={this.handleChange}\n onInteract={this.handleInteract}\n onStartEdit={this.handleInputFieldFocus}\n onStopEdit={this.handleStopEditAndBlur}\n emptyInputOnBlur={false}\n clearAllButton={this.multiple && !this.chipSetEditMode}\n {...props}\n />,\n this.renderDropdown(),\n ];\n }\n\n @Watch('value')\n protected onChangeValue() {\n this.chips = this.createChips(this.value);\n }\n\n @Watch('searcher')\n protected createDebouncedSearcher(newValue: Searcher) {\n if (typeof newValue !== 'function') {\n return;\n }\n\n this.debouncedSearch = AwesomeDebouncePromise(\n newValue,\n SEARCH_DEBOUNCE,\n );\n }\n\n private renderDelimiter() {\n if (this.multiple) {\n return this.delimiter;\n }\n\n return null;\n }\n\n private createChips(value: ListItem | ListItem[]): Chip[] {\n if (!value) {\n return [];\n }\n\n if (this.multiple) {\n const listItems: ListItem[] = value as ListItem[];\n\n return listItems.map(this.createChip);\n }\n\n const listItem: ListItem = value as ListItem;\n\n return [this.createChip(listItem)];\n }\n\n private createChip(listItem: ListItem): Chip {\n return {\n id: `${listItem.value}`,\n text: listItem.text,\n removable: true,\n icon: {\n name: getIconName(listItem.icon),\n color: getIconFillColor(listItem.icon, listItem.iconColor),\n },\n value: listItem,\n };\n }\n\n /**\n * Renders the dropdown with the items to pick from, or a spinner if the picker\n * is waiting for items to be received\n *\n * @returns {HTMLElement} picker dropdown\n */\n private renderDropdown() {\n const dropDownContent = this.getDropdownContent();\n\n const content = [];\n\n if (this.shouldShowDropDownContent()) {\n const actionContent = this.getActionContent();\n if (this.actionPosition === 'top') {\n content.push(actionContent);\n }\n\n if (dropDownContent) {\n content.push(dropDownContent);\n }\n\n if (this.actionPosition === 'bottom') {\n content.push(actionContent);\n }\n }\n\n return this.renderPortal(content);\n }\n\n private getActionContent() {\n const actionCount = this.actions?.length ?? 0;\n if (actionCount === 0) {\n return null;\n }\n\n return [\n <limel-list\n class={{\n 'static-actions-list': true,\n 'is-on-top': this.actionPosition === 'top',\n 'is-at-bottom': this.actionPosition === 'bottom',\n 'has-position-sticky':\n this.actionScrollBehavior === 'sticky',\n }}\n badgeIcons={true}\n type={'selectable'}\n onChange={this.handleActionListChange}\n items={this.actions.map(this.removeUnusedPropertiesOnAction)}\n />,\n ];\n }\n\n private removeUnusedPropertiesOnAction(\n action: ListItem<Action>,\n ): ListItem<Action> {\n return {\n ...action,\n actions: [],\n };\n }\n\n private shouldShowDropDownContent() {\n if (this.isFull()) {\n return false;\n }\n\n return !!this.chipSetEditMode;\n }\n\n private getDropdownContent() {\n if (!this.shouldShowDropDownContent()) {\n return;\n }\n\n if (this.loading) {\n return this.renderSpinner();\n }\n\n if (!this.items || !this.items.length) {\n return this.renderEmptyMessage();\n }\n\n return this.renderListResult();\n }\n\n /**\n * Returns true if the picker is \"full\"\n * The picker is considered to be full if it has a value and only one is allowed\n *\n * @returns {boolean} true if the picker is full\n */\n private isFull(): boolean {\n return !this.multiple && !!this.value;\n }\n\n private renderSpinner() {\n return (\n <div\n style={{\n width: '100%',\n display: 'flex',\n 'align-items': 'center',\n 'justify-content': 'center',\n padding: '1rem 0',\n }}\n >\n <limel-spinner limeBranded={false} />\n </div>\n );\n }\n\n private renderEmptyMessage() {\n if (!this.emptyResultMessage) {\n return;\n }\n\n const style = {\n color: 'rgb(var(--contrast-1100))',\n 'text-align': 'center',\n margin: '0.5rem 1rem',\n };\n\n return <p style={style}>{this.emptyResultMessage}</p>;\n }\n\n private renderListResult() {\n return (\n <limel-list\n badgeIcons={this.badgeIcons}\n onChange={this.handleListChange}\n onKeyDown={this.onListKeyDown}\n type=\"selectable\"\n items={this.items}\n />\n );\n }\n\n private onListKeyDown(event: KeyboardEvent) {\n const keyFound = [TAB, ESCAPE, ENTER].includes(event.key);\n const keyCodeFound = [\n TAB_KEY_CODE,\n ESCAPE_KEY_CODE,\n ENTER_KEY_CODE,\n ].includes(event.keyCode);\n if (keyFound || keyCodeFound) {\n this.chipSet.setFocus();\n }\n }\n\n private renderPortal(content: any[] = []) {\n const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(\n '--dropdown-z-index',\n );\n\n return (\n <limel-portal\n visible={content.length > 0}\n containerId={this.portalId}\n inheritParentWidth={true}\n containerStyle={{ 'z-index': dropdownZIndex }}\n >\n <limel-menu-surface\n open={content.length > 0}\n allowClicksElement={this.host}\n style={{\n '--mdc-menu-min-width': '100%',\n 'max-height': 'inherit',\n display: 'flex',\n }}\n onDismiss={this.handleCloseMenu}\n >\n {content}\n </limel-menu-surface>\n </limel-portal>\n );\n }\n\n /**\n * Check if a descendant still has focus. If not, reset text value and search result.\n *\n * @returns {void}\n */\n private handleStopEditAndBlur() {\n // In browsers where shadow DOM is not supported activeElement on shadowRoot will return null\n // However, document.activeElement will return the actual focused element instead of the outermost shadow host\n const element =\n this.host.shadowRoot.activeElement || document.activeElement;\n const portalElement = document.querySelector(`#${this.portalId}`);\n if (\n isDescendant(element as HTMLElement, this.host) ||\n isDescendant(element as HTMLElement, portalElement as HTMLElement)\n ) {\n return;\n }\n\n this.clearInputField();\n }\n\n /**\n * Input handler for the input field\n *\n * @param {InputEvent} event event\n * @returns {void}\n */\n private async handleTextInput(event) {\n event.stopPropagation();\n\n const query = event.detail;\n this.textValue = query;\n this.loading = true;\n\n // If the search-query is an empty string, bypass debouncing.\n const searchFn = query === '' ? this.searcher : this.debouncedSearch;\n const result = await searchFn(query);\n this.handleSearchResult(query, result);\n }\n\n /**\n * Change handler for the list\n *\n * @param {LimelListCustomEvent<ListItem>} event event\n * @returns {void}\n */\n private handleListChange(event: LimelListCustomEvent<ListItem>) {\n event.stopPropagation();\n if (!this.value || this.value !== event.detail) {\n let newValue: ListItem | ListItem[] = event.detail;\n if (this.multiple) {\n newValue = [...(this.value as ListItem[]), event.detail];\n }\n\n this.change.emit(newValue);\n this.items = [];\n }\n\n if (this.multiple) {\n this.chipSet?.setFocus(true);\n }\n }\n\n /**\n * Change handler for the list\n *\n * @param {LimelChipSetCustomEvent} event event\n * @returns {void}\n */\n private handleActionListChange(\n event: LimelListCustomEvent<ListItem<Action>>,\n ) {\n event.stopPropagation();\n if (!event.detail) {\n return;\n }\n\n this.action.emit(event.detail.value);\n this.items = [];\n }\n\n /**\n * Focus handler for the chip set\n * Prevent focus if the picker has a value and does not support multiple values\n *\n * @returns {void}\n */\n private async handleInputFieldFocus() {\n this.loading = true;\n const query = this.textValue;\n const result = await this.searcher(query);\n this.handleSearchResult(query, result);\n }\n\n private handleChange(event: LimelChipSetCustomEvent<Chip | Chip[]>) {\n event.stopPropagation();\n\n let newValue = null;\n if (this.multiple) {\n const chips = event.detail as Chip[];\n newValue = chips.map((chip) => {\n return (this.value as ListItem[]).find((item) => {\n return `${item.value}` === chip.id;\n });\n });\n }\n\n this.change.emit(newValue);\n }\n\n private handleInteract(event: LimelChipSetCustomEvent<Chip>) {\n event.stopPropagation();\n this.interact.emit(event.detail ? event.detail.value : event.detail);\n }\n\n /**\n * Key handler for the input field\n * Will change focus to the first/last item in the dropdown list to enable selection with the keyboard\n *\n * @param {KeyboardEvent} event event\n * @returns {void}\n */\n private handleInputKeyDown(event: KeyboardEvent) {\n const isForwardTab =\n (event.key === TAB || event.keyCode === TAB_KEY_CODE) &&\n !event.altKey &&\n !event.metaKey &&\n !event.shiftKey;\n const isUp =\n event.key === ARROW_UP || event.keyCode === ARROW_UP_KEY_CODE;\n const isDown =\n event.key === ARROW_DOWN || event.keyCode === ARROW_DOWN_KEY_CODE;\n\n if (!isForwardTab && !isUp && !isDown) {\n return;\n }\n\n const list = document.querySelector(` #${this.portalId} limel-list`);\n if (!list) {\n return;\n }\n\n event.preventDefault();\n\n if (isForwardTab || isDown) {\n const listElement: HTMLElement = list.shadowRoot.querySelector(\n '.mdc-deprecated-list-item:first-child',\n );\n listElement.focus();\n\n return;\n }\n\n if (isUp) {\n const listElement: HTMLElement = list.shadowRoot.querySelector(\n '.mdc-deprecated-list-item:last-child',\n );\n listElement.focus();\n }\n }\n\n /**\n * Key handler for the dropdown\n *\n * @param {KeyboardEvent} event event\n * @returns {void}\n */\n private handleDropdownKeyDown(event: KeyboardEvent) {\n const isEscape =\n event.key === ESCAPE || event.keyCode === ESCAPE_KEY_CODE;\n\n if (isEscape) {\n event.preventDefault();\n this.textValue = '';\n this.chipSet.setFocus(true);\n }\n }\n\n private handleSearchResult(query: string, result: ListItem[]) {\n if (query === this.textValue) {\n this.items = result;\n if (this.multiple) {\n const values = this.value as ListItem[];\n this.items = result.filter((item) => {\n return !values.includes(item);\n });\n }\n\n this.loading = false;\n }\n }\n\n private handleCloseMenu() {\n if (this.items.length > 0) {\n return;\n }\n\n this.clearInputField();\n }\n\n private clearInputField() {\n this.chipSet.emptyInput();\n this.textValue = '';\n this.handleSearchResult('', []);\n }\n}\n"],"mappings":"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"}
1
+ {"version":3,"names":["pickerCss","SEARCH_DEBOUNCE","CHIP_SET_TAG_NAME","Picker","constructor","hostRef","this","chipSetEditMode","handleTextInput","bind","handleInputKeyDown","handleDropdownKeyDown","handleInputFieldFocus","handleChange","handleInteract","handleListChange","handleActionListChange","handleStopEditAndBlur","createDebouncedSearcher","handleCloseMenu","onListKeyDown","portalId","createRandomString","componentWillLoad","chips","createChips","value","componentDidLoad","searcher","chipSet","host","shadowRoot","querySelector","async","getEditMode","render","props","multiple","maxItems","h","Object","assign","type","inputType","label","helperText","leadingIcon","disabled","invalid","delimiter","renderDelimiter","readonly","required","searchLabel","onInput","onKeyDown","onChange","onInteract","onStartEdit","onStopEdit","emptyInputOnBlur","clearAllButton","renderDropdown","onChangeValue","newValue","debouncedSearch","AwesomeDebouncePromise","listItems","map","createChip","listItem","id","text","removable","icon","name","getIconName","color","getIconFillColor","iconColor","dropDownContent","getDropdownContent","content","shouldShowDropDownContent","actionContent","getActionContent","actionPosition","push","renderPortal","actionCount","_b","_a","actions","length","class","actionScrollBehavior","badgeIcons","items","removeUnusedPropertiesOnAction","action","isFull","loading","renderSpinner","renderEmptyMessage","renderListResult","style","width","display","padding","limeBranded","emptyResultMessage","margin","event","keyFound","TAB","ESCAPE","ENTER","includes","key","keyCodeFound","TAB_KEY_CODE","ESCAPE_KEY_CODE","ENTER_KEY_CODE","keyCode","setFocus","dropdownZIndex","getComputedStyle","getPropertyValue","visible","containerId","inheritParentWidth","containerStyle","open","allowClicksElement","onDismiss","element","activeElement","document","portalElement","isDescendant","clearInputField","stopPropagation","query","detail","textValue","searchFn","result","handleSearchResult","change","emit","chip","find","item","interact","isForwardTab","altKey","metaKey","shiftKey","isUp","ARROW_UP","ARROW_UP_KEY_CODE","isDown","ARROW_DOWN","ARROW_DOWN_KEY_CODE","list","preventDefault","listElement","focus","isEscape","values","filter","emptyInput"],"sources":["./src/components/picker/picker.scss?tag=limel-picker&encapsulation=shadow","./src/components/picker/picker.tsx"],"sourcesContent":["// Note! The `--dropdown-z-index` property is used from `picker.tsx`.\n/**\n * @prop --dropdown-z-index: z-index of the dropdown menu.\n */\n\n:host {\n position: relative;\n display: block;\n}\n\n:host([hidden]) {\n display: none;\n}\n","import {\n Action,\n ActionPosition,\n ActionScrollBehavior,\n Chip,\n ListItem,\n Searcher,\n} from '../../interface';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport AwesomeDebouncePromise from 'awesome-debounce-promise';\nimport { isDescendant } from '../../util/dom';\nimport {\n ARROW_DOWN,\n ARROW_DOWN_KEY_CODE,\n ARROW_UP,\n ARROW_UP_KEY_CODE,\n ENTER,\n ENTER_KEY_CODE,\n ESCAPE,\n ESCAPE_KEY_CODE,\n TAB,\n TAB_KEY_CODE,\n} from '../../util/keycodes';\nimport { createRandomString } from '../../util/random-string';\nimport { LimelChipSetCustomEvent, LimelListCustomEvent } from 'src/components';\nimport { getIconFillColor, getIconName } from '../icon/get-icon-props';\n\nconst SEARCH_DEBOUNCE = 500;\nconst CHIP_SET_TAG_NAME = 'limel-chip-set';\n\n/**\n * @exampleComponent limel-example-picker-single\n * @exampleComponent limel-example-picker-multiple\n * @exampleComponent limel-example-picker-icons\n * @exampleComponent limel-example-picker-empty-suggestions\n * @exampleComponent limel-example-picker-leading-icon\n * @exampleComponent limel-example-picker-static-actions\n * @exampleComponent limel-example-picker-composite\n */\n@Component({\n tag: 'limel-picker',\n shadow: true,\n styleUrl: 'picker.scss',\n})\nexport class Picker {\n /**\n * True if the picker should be disabled\n */\n @Prop()\n public disabled: boolean = false;\n\n /**\n * Set to `true` to disable adding and removing items,\n * but allow interaction with existing items.\n */\n @Prop({ reflect: true })\n public readonly: boolean = false;\n\n /**\n * Text to display for the input field of the picker\n */\n @Prop()\n public label: string;\n\n /**\n * Search label to display in the input field when searching\n */\n @Prop()\n public searchLabel: string;\n\n /**\n * Optional helper text to display below the input field when it has focus\n */\n @Prop({ reflect: true })\n public helperText: string;\n\n /**\n * Leading icon to show to the far left in the text field\n */\n @Prop()\n public leadingIcon: string;\n\n /**\n * A message to display when the search returned an empty result\n */\n @Prop()\n public emptyResultMessage: string;\n\n /**\n * True if the control requires a value\n */\n @Prop()\n public required: 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 * Currently selected value or values\n */\n @Prop()\n public value: ListItem<number | string> | Array<ListItem<number | string>>;\n\n /**\n * A search function that takes a search-string as an argument,\n * and returns a promise that will eventually be resolved with\n * an array of `ListItem`:s.\n *\n * See the docs for the type `Searcher` for type information on\n * the searcher function itself.\n */\n @Prop()\n public searcher: Searcher;\n\n /**\n * True if multiple values are allowed\n */\n @Prop()\n public multiple: boolean = false;\n\n /**\n * Sets delimiters between chips. Works only when `multiple` is `true`.\n */\n @Prop({ reflect: true })\n public delimiter: string = null;\n\n /**\n * Static actions that can be clicked by the user.\n */\n @Prop()\n public actions: Array<ListItem<Action>> = [];\n\n /**\n * Position of the custom static actions in the picker's results dropdown.\n * Can be set to `'top'` or `'bottom'`.\n */\n @Prop()\n public actionPosition: ActionPosition = 'bottom';\n\n /**\n * Scroll behavior of the custom static actions, when user scrolls\n * in the picker's results dropdown. Can be set to `'scroll'` which means\n * the action items will scroll together with the list, or `'sticky'` which\n * retains their position at the top or bottom of the drop down while\n * scrolling.\n */\n @Prop()\n public actionScrollBehavior: ActionScrollBehavior = 'sticky';\n\n /**\n * Whether badge icons should be used in the result list or not\n */\n @Prop({ reflect: true })\n public badgeIcons: boolean = false;\n\n /**\n * Fired when a new value has been selected from the picker\n */\n @Event()\n private change: EventEmitter<\n ListItem<number | string> | Array<ListItem<number | string>>\n >;\n\n /**\n * Fired when clicking on a selected value\n */\n @Event()\n private interact: EventEmitter<ListItem<number | string>>;\n\n /**\n * Emitted when the user selects an action.\n */\n @Event()\n private action: EventEmitter<Action>;\n\n @State()\n private items: Array<ListItem<number | string>>;\n\n @State()\n private textValue: string = '';\n\n @State()\n private loading: boolean = false;\n\n @State()\n private chips: Chip[] = [];\n\n @Element()\n private host: HTMLLimelPickerElement;\n\n // Should NOT be decorated with State(), since this\n // should not trigger a re-render by itself.\n private chipSetEditMode = false;\n\n private debouncedSearch: Searcher;\n private chipSet: HTMLLimelChipSetElement;\n private portalId: string;\n\n constructor() {\n this.handleTextInput = this.handleTextInput.bind(this);\n this.handleInputKeyDown = this.handleInputKeyDown.bind(this);\n this.handleDropdownKeyDown = this.handleDropdownKeyDown.bind(this);\n this.handleInputFieldFocus = this.handleInputFieldFocus.bind(this);\n this.handleChange = this.handleChange.bind(this);\n this.handleInteract = this.handleInteract.bind(this);\n this.handleListChange = this.handleListChange.bind(this);\n this.handleActionListChange = this.handleActionListChange.bind(this);\n this.handleStopEditAndBlur = this.handleStopEditAndBlur.bind(this);\n this.createDebouncedSearcher = this.createDebouncedSearcher.bind(this);\n this.handleCloseMenu = this.handleCloseMenu.bind(this);\n this.onListKeyDown = this.onListKeyDown.bind(this);\n\n this.portalId = createRandomString();\n }\n\n public componentWillLoad() {\n this.chips = this.createChips(this.value);\n }\n\n public componentDidLoad() {\n this.createDebouncedSearcher(this.searcher);\n this.chipSet = this.host.shadowRoot.querySelector(CHIP_SET_TAG_NAME);\n }\n\n public async componentWillUpdate() {\n this.chipSetEditMode = false;\n if (this.chipSet) {\n this.chipSetEditMode = await this.chipSet.getEditMode();\n }\n }\n\n public render() {\n const props: {\n maxItems?: number;\n } = {};\n\n if (!this.multiple) {\n props.maxItems = 1;\n }\n\n return [\n <limel-chip-set\n type=\"input\"\n inputType=\"search\"\n label={this.label}\n helperText={this.helperText}\n leadingIcon={this.leadingIcon}\n value={this.chips}\n disabled={this.disabled}\n invalid={this.invalid}\n delimiter={this.renderDelimiter()}\n readonly={this.readonly}\n required={this.required}\n searchLabel={this.searchLabel}\n onInput={this.handleTextInput}\n onKeyDown={this.handleInputKeyDown}\n onChange={this.handleChange}\n onInteract={this.handleInteract}\n onStartEdit={this.handleInputFieldFocus}\n onStopEdit={this.handleStopEditAndBlur}\n emptyInputOnBlur={false}\n clearAllButton={this.multiple && !this.chipSetEditMode}\n {...props}\n />,\n this.renderDropdown(),\n ];\n }\n\n @Watch('value')\n protected onChangeValue() {\n this.chips = this.createChips(this.value);\n }\n\n @Watch('searcher')\n protected createDebouncedSearcher(newValue: Searcher) {\n if (typeof newValue !== 'function') {\n return;\n }\n\n this.debouncedSearch = AwesomeDebouncePromise(\n newValue,\n SEARCH_DEBOUNCE,\n );\n }\n\n private renderDelimiter() {\n if (this.multiple) {\n return this.delimiter;\n }\n\n return null;\n }\n\n private createChips(value: ListItem | ListItem[]): Chip[] {\n if (!value) {\n return [];\n }\n\n if (this.multiple) {\n const listItems: ListItem[] = value as ListItem[];\n\n return listItems.map(this.createChip);\n }\n\n const listItem: ListItem = value as ListItem;\n\n return [this.createChip(listItem)];\n }\n\n private createChip(listItem: ListItem): Chip {\n return {\n id: `${listItem.value}`,\n text: listItem.text,\n removable: true,\n icon: {\n name: getIconName(listItem.icon),\n color: getIconFillColor(listItem.icon, listItem.iconColor),\n },\n value: listItem,\n };\n }\n\n /**\n * Renders the dropdown with the items to pick from, or a spinner if the picker\n * is waiting for items to be received\n *\n * @returns {HTMLElement} picker dropdown\n */\n private renderDropdown() {\n const dropDownContent = this.getDropdownContent();\n\n const content = [];\n\n if (this.shouldShowDropDownContent()) {\n const actionContent = this.getActionContent();\n if (this.actionPosition === 'top') {\n content.push(actionContent);\n }\n\n if (dropDownContent) {\n content.push(dropDownContent);\n }\n\n if (this.actionPosition === 'bottom') {\n content.push(actionContent);\n }\n }\n\n return this.renderPortal(content);\n }\n\n private getActionContent() {\n const actionCount = this.actions?.length ?? 0;\n if (actionCount === 0) {\n return null;\n }\n\n return [\n <limel-list\n class={{\n 'static-actions-list': true,\n 'is-on-top': this.actionPosition === 'top',\n 'is-at-bottom': this.actionPosition === 'bottom',\n 'has-position-sticky':\n this.actionScrollBehavior === 'sticky',\n }}\n badgeIcons={true}\n type={'selectable'}\n onChange={this.handleActionListChange}\n items={this.actions.map(this.removeUnusedPropertiesOnAction)}\n />,\n ];\n }\n\n private removeUnusedPropertiesOnAction(\n action: ListItem<Action>,\n ): ListItem<Action> {\n return {\n ...action,\n actions: [],\n };\n }\n\n private shouldShowDropDownContent() {\n if (this.isFull()) {\n return false;\n }\n\n return !!this.chipSetEditMode;\n }\n\n private getDropdownContent() {\n if (!this.shouldShowDropDownContent()) {\n return;\n }\n\n if (this.loading) {\n return this.renderSpinner();\n }\n\n if (!this.items || !this.items.length) {\n return this.renderEmptyMessage();\n }\n\n return this.renderListResult();\n }\n\n /**\n * Returns true if the picker is \"full\"\n * The picker is considered to be full if it has a value and only one is allowed\n *\n * @returns {boolean} true if the picker is full\n */\n private isFull(): boolean {\n return !this.multiple && !!this.value;\n }\n\n private renderSpinner() {\n return (\n <div\n style={{\n width: '100%',\n display: 'flex',\n 'align-items': 'center',\n 'justify-content': 'center',\n padding: '1rem 0',\n }}\n >\n <limel-spinner limeBranded={false} />\n </div>\n );\n }\n\n private renderEmptyMessage() {\n if (!this.emptyResultMessage) {\n return;\n }\n\n const style = {\n color: 'rgb(var(--contrast-1100))',\n 'text-align': 'center',\n margin: '0.5rem 1rem',\n };\n\n return <p style={style}>{this.emptyResultMessage}</p>;\n }\n\n private renderListResult() {\n return (\n <limel-list\n badgeIcons={this.badgeIcons}\n onChange={this.handleListChange}\n onKeyDown={this.onListKeyDown}\n type=\"selectable\"\n items={this.items}\n />\n );\n }\n\n private onListKeyDown(event: KeyboardEvent) {\n const keyFound = [TAB, ESCAPE, ENTER].includes(event.key);\n const keyCodeFound = [\n TAB_KEY_CODE,\n ESCAPE_KEY_CODE,\n ENTER_KEY_CODE,\n ].includes(event.keyCode);\n if (keyFound || keyCodeFound) {\n this.chipSet.setFocus();\n }\n }\n\n private renderPortal(content: any[] = []) {\n const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(\n '--dropdown-z-index',\n );\n\n return (\n <limel-portal\n visible={content.length > 0}\n containerId={this.portalId}\n inheritParentWidth={true}\n containerStyle={{ 'z-index': dropdownZIndex }}\n >\n <limel-menu-surface\n open={content.length > 0}\n allowClicksElement={this.host}\n style={{\n '--mdc-menu-min-width': '100%',\n 'max-height': 'inherit',\n display: 'flex',\n }}\n onDismiss={this.handleCloseMenu}\n >\n {content}\n </limel-menu-surface>\n </limel-portal>\n );\n }\n\n /**\n * Check if a descendant still has focus. If not, reset text value and search result.\n *\n * @returns {void}\n */\n private handleStopEditAndBlur() {\n // In browsers where shadow DOM is not supported activeElement on shadowRoot will return null\n // However, document.activeElement will return the actual focused element instead of the outermost shadow host\n const element =\n this.host.shadowRoot.activeElement || document.activeElement;\n const portalElement = document.querySelector(`#${this.portalId}`);\n if (\n isDescendant(element as HTMLElement, this.host) ||\n isDescendant(element as HTMLElement, portalElement as HTMLElement)\n ) {\n return;\n }\n\n this.clearInputField();\n }\n\n /**\n * Input handler for the input field\n *\n * @param {InputEvent} event event\n * @returns {void}\n */\n private async handleTextInput(event) {\n event.stopPropagation();\n\n const query = event.detail;\n this.textValue = query;\n this.loading = true;\n\n // If the search-query is an empty string, bypass debouncing.\n const searchFn = query === '' ? this.searcher : this.debouncedSearch;\n const result = await searchFn(query);\n this.handleSearchResult(query, result);\n }\n\n /**\n * Change handler for the list\n *\n * @param {LimelListCustomEvent<ListItem>} event event\n * @returns {void}\n */\n private handleListChange(event: LimelListCustomEvent<ListItem>) {\n event.stopPropagation();\n if (!this.value || this.value !== event.detail) {\n let newValue: ListItem | ListItem[] = event.detail;\n if (this.multiple) {\n newValue = [...(this.value as ListItem[]), event.detail];\n }\n\n this.change.emit(newValue);\n this.items = [];\n }\n\n if (this.multiple) {\n this.chipSet?.setFocus(true);\n }\n }\n\n /**\n * Change handler for the list\n *\n * @param {LimelChipSetCustomEvent} event event\n * @returns {void}\n */\n private handleActionListChange(\n event: LimelListCustomEvent<ListItem<Action>>,\n ) {\n event.stopPropagation();\n if (!event.detail) {\n return;\n }\n\n this.action.emit(event.detail.value);\n this.items = [];\n }\n\n /**\n * Focus handler for the chip set\n * Prevent focus if the picker has a value and does not support multiple values\n *\n * @returns {void}\n */\n private async handleInputFieldFocus() {\n this.loading = true;\n const query = this.textValue;\n const result = await this.searcher(query);\n this.handleSearchResult(query, result);\n }\n\n private handleChange(event: LimelChipSetCustomEvent<Chip | Chip[]>) {\n event.stopPropagation();\n\n let newValue = null;\n if (this.multiple) {\n const chips = event.detail as Chip[];\n newValue = chips.map((chip) => {\n return (this.value as ListItem[]).find((item) => {\n return `${item.value}` === chip.id;\n });\n });\n }\n\n this.change.emit(newValue);\n }\n\n private handleInteract(event: LimelChipSetCustomEvent<Chip>) {\n event.stopPropagation();\n this.interact.emit(event.detail ? event.detail.value : event.detail);\n }\n\n /**\n * Key handler for the input field\n * Will change focus to the first/last item in the dropdown list to enable selection with the keyboard\n *\n * @param {KeyboardEvent} event event\n * @returns {void}\n */\n private handleInputKeyDown(event: KeyboardEvent) {\n const isForwardTab =\n (event.key === TAB || event.keyCode === TAB_KEY_CODE) &&\n !event.altKey &&\n !event.metaKey &&\n !event.shiftKey;\n const isUp =\n event.key === ARROW_UP || event.keyCode === ARROW_UP_KEY_CODE;\n const isDown =\n event.key === ARROW_DOWN || event.keyCode === ARROW_DOWN_KEY_CODE;\n\n if (!isForwardTab && !isUp && !isDown) {\n return;\n }\n\n const list = document.querySelector(` #${this.portalId} limel-list`);\n if (!list) {\n return;\n }\n\n event.preventDefault();\n\n if (isForwardTab || isDown) {\n const listElement: HTMLElement = list.shadowRoot.querySelector(\n '.mdc-deprecated-list-item:first-child',\n );\n listElement.focus();\n\n return;\n }\n\n if (isUp) {\n const listElement: HTMLElement = list.shadowRoot.querySelector(\n '.mdc-deprecated-list-item:last-child',\n );\n listElement.focus();\n }\n }\n\n /**\n * Key handler for the dropdown\n *\n * @param {KeyboardEvent} event event\n * @returns {void}\n */\n private handleDropdownKeyDown(event: KeyboardEvent) {\n const isEscape =\n event.key === ESCAPE || event.keyCode === ESCAPE_KEY_CODE;\n\n if (isEscape) {\n event.preventDefault();\n this.textValue = '';\n this.chipSet.setFocus(true);\n }\n }\n\n private handleSearchResult(query: string, result: ListItem[]) {\n if (query === this.textValue) {\n this.items = result;\n if (this.multiple) {\n const values = this.value as ListItem[];\n this.items = result.filter((item) => {\n return !values.includes(item);\n });\n }\n\n this.loading = false;\n }\n }\n\n private handleCloseMenu() {\n if (this.items.length > 0) {\n return;\n }\n\n this.clearInputField();\n }\n\n private clearInputField() {\n this.chipSet.emptyInput();\n this.textValue = '';\n this.handleSearchResult('', []);\n }\n}\n"],"mappings":"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"}
package/dist/lime-elements/p-8afe01df.entry.js ADDED
@@ -0,0 +1,2 @@
1
+ import{r as e,c as t,h as i,H as o,g as r}from"./p-3075aa67.js";import{g as s}from"./p-88694767.js";import{m as a,r as h}from"./p-f1988eb7.js";import{t as l}from"./p-3ee3dcdc.js";import{D as n,B as c,a as d,b as m}from"./p-93c6d561.js";const b='@charset "UTF-8";:host(limel-chip){--limel-chip-height:1.75rem;--limel-chip-gap:0.5rem;isolation:isolate;display:inline-flex;align-items:center}*{box-sizing:border-box}.chip{all:unset;position:relative;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)}: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[removable]) .chip:not([disabled]){padding-right:calc(var(--limel-chip-height) + 0.125rem)}:host(limel-chip[removable]) .chip:not([disabled]) .text{padding-right:0}: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;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 p=class{constructor(o){e(this,o);this.remove=t(this,"remove",7);this.renderAsButton=()=>[i("button",{class:"chip",role:"button",disabled:this.disabled||this.readonly,onKeyDown:this.handleDeleteKeyDown},this.renderIcon(),this.renderLabel(),this.renderBadge()),this.renderRemoveButton()];this.renderAsLink=()=>[i("a",{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=e=>{if(this.disabled||this.readonly){e.preventDefault()}};this.handleRemoveClick=e=>{e.stopPropagation();this.remove.emit()};this.handleDeleteKeyDown=e=>{if(!this.removable){return}const t=[n,c];const i=[d,m];if(t.includes(e.key)||i.includes(e.keyCode)){this.handleRemoveClick(e)}};this.removeChipLabel=()=>l.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=undefined}componentWillLoad(){a(this.host)}disconnectedCallback(){h(this.host)}render(){return i(o,{onClick:this.filterClickWhenDisabled},this.link?this.renderAsLink():this.renderAsButton())}renderIcon(){var e,t;const o=s(this.icon);if(!o){return}return i("limel-icon",{badge:true,name:o,style:{color:`${(e=this.icon)===null||e===void 0?void 0:e.color}`,"background-color":`${(t=this.icon)===null||t===void 0?void 0:t.backgroundColor}`}})}renderBadge(){if(!this.badge){return}return i("limel-badge",{label:this.badge})}renderRemoveButton(){if(!this.removable||this.readonly||this.disabled){return}const e='<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,innerHTML:e,onClick:this.handleRemoveClick})}get host(){return r(this)}};p.style=b;export{p as limel_chip};
2
+ //# sourceMappingURL=p-8afe01df.entry.js.map
package/dist/lime-elements/p-8afe01df.entry.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"names":["chipCss","Chip","this","renderAsButton","h","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","componentWillLoad","makeEnterClickable","host","disconnectedCallback","removeEnterClickable","render","Host","onClick","icon","getIconName","badge","name","style","color","_a","_b","backgroundColor","label","svgData","tabIndex","innerHTML"],"sources":["./src/components/chip/chip.scss?tag=limel-chip&encapsulation=shadow","./src/components/chip/chip.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}\n\n* {\n box-sizing: border-box;\n}\n\n.chip {\n all: unset;\n position: relative;\n\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\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[removable]) {\n .chip:not([disabled]) {\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[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 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 { Chip as OldChipInterface } from '../chip-set/chip.types';\n\ninterface ChipInterface extends Omit<OldChipInterface, 'id' | 'badge'> {\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 @Prop({ reflect: true })\n public type: 'filter';\n\n /**\n * Fired when clicking on the remove button of a `removable` chip.\n */\n @Event()\n public remove: EventEmitter<void>;\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 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 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 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();\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"],"mappings":"4OAAA,MAAMA,EAAU,6xH,MC0EHC,EAAI,M,wDA2FLC,KAAAC,eAAiB,IACd,CACHC,EAAA,UACIC,MAAM,OACNC,KAAK,SACLC,SAAUL,KAAKK,UAAYL,KAAKM,SAChCC,UAAWP,KAAKQ,qBAEfR,KAAKS,aACLT,KAAKU,cACLV,KAAKW,eAEVX,KAAKY,sBAILZ,KAAAa,aAAe,IACZ,CACHX,EAAA,KACIC,MAAM,OACNW,KAAMd,KAAKe,KAAKD,KAChBE,MAAOhB,KAAKe,KAAKC,MACjBC,OAAQjB,KAAKe,KAAKE,OAAM,gBACTjB,KAAKK,UAAYL,KAAKM,SACrCY,SAAUlB,KAAKK,UAAYL,KAAKM,UAAY,EAAI,EAChDC,UAAWP,KAAKQ,qBAEfR,KAAKS,aACLT,KAAKU,cACLV,KAAKW,eAEVX,KAAKY,sBAILZ,KAAAU,YAAc,IACXR,EAAA,QAAMC,MAAM,QAAQH,KAAKmB,MAmD5BnB,KAAAoB,wBAA2BC,IAC/B,GAAIrB,KAAKK,UAAYL,KAAKM,SAAU,CAChCe,EAAEC,gB,GAIFtB,KAAAuB,kBAAqBC,IACzBA,EAAMC,kBACNzB,KAAK0B,OAAOC,MAAM,EAGd3B,KAAAQ,oBAAuBgB,IAC3B,IAAKxB,KAAK4B,UAAW,CACjB,M,CAGJ,MAAMC,EAAO,CAACC,EAAQC,GACtB,MAAMC,EAAW,CAACC,EAAiBC,GAEnC,GAAIL,EAAKM,SAASX,EAAMY,MAAQJ,EAASG,SAASX,EAAMa,SAAU,CAC9DrC,KAAKuB,kBAAkBC,E,GAIvBxB,KAAAsC,gBAAkB,IACfC,EAAUC,IAAI,uBAAwBxC,KAAKyC,U,cArMzB,K,+FA8BX,M,cAOA,M,cAQA,M,eAMC,M,oBAkBZC,oBACHC,EAAmB3C,KAAK4C,K,CAGrBC,uBACHC,EAAqB9C,KAAK4C,K,CAGvBG,SACH,OACI7C,EAAC8C,EAAI,CAACC,QAASjD,KAAKoB,yBACfpB,KAAKe,KAAOf,KAAKa,eAAiBb,KAAKC,iB,CA4C5CQ,a,QACJ,MAAMyC,EAAOC,EAAYnD,KAAKkD,MAE9B,IAAKA,EAAM,CACP,M,CAGJ,OACIhD,EAAA,cACIkD,MAAO,KACPC,KAAMH,EACNI,MAAO,CACHC,MAAO,IAAGC,EAACxD,KAAKkD,QAAa,MAAAM,SAAA,SAAAA,EAAED,QAC/B,mBAAoB,IAChBE,EAACzD,KAAKkD,QAAa,MAAAO,SAAA,SAAAA,EAAEC,oB,CAOjC/C,cACJ,IAAKX,KAAKoD,MAAO,CACb,M,CAGJ,OAAOlD,EAAA,eAAayD,MAAO3D,KAAKoD,O,CAG5BxC,qBACJ,IAAKZ,KAAK4B,WAAa5B,KAAKM,UAAYN,KAAKK,SAAU,CACnD,M,CAGJ,MAAMuD,EACF,wJAEJ,OACI1D,EAAA,UACIC,MAAM,gCACN0D,UAAW,EAAC,aACA7D,KAAKsC,gBACjBwB,UAAWF,EACXX,QAASjD,KAAKuB,mB"}
package/dist/lime-elements/{p-d7801e00.js → p-93c6d561.js} RENAMED
@@ -1,2 +1,2 @@
1
- const s=9;const a=13;const o=27;const c=32;const t=8;const n=46;const e=38;const r=40;const p=37;const w=39;const A="Tab";const D="Enter";const E="Escape";const b="Space";const f="Backspace";const g="Delete";const h="ArrowUp";const i="ArrowDown";const k="ArrowLeft";const l="ArrowRight";export{h as A,f as B,g as D,E,b as S,A as T,D as a,s as b,o as c,a as d,e,i as f,r as g,c as h,k as i,p as j,l as k,w as l,n as m,t as n};
2
- //# sourceMappingURL=p-d7801e00.js.map
1
+ const s=9;const a=13;const o=27;const c=32;const t=8;const n=46;const e=38;const r=40;const p=37;const w=39;const A="Tab";const D="Enter";const E="Escape";const b="Space";const f="Backspace";const g="Delete";const h="ArrowUp";const i="ArrowDown";const k="ArrowLeft";const l="ArrowRight";export{h as A,f as B,g as D,E,b as S,A as T,n as a,t as b,D as c,s as d,o as e,a as f,e as g,i as h,r as i,c as j,k,p as l,l as m,w as n};
2
+ //# sourceMappingURL=p-93c6d561.js.map