@limetech/lime-elements 37.2.7 → 37.3.0

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 (120) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/{component-6c4222b7.js → component-cba208a8.js} +137 -18
  3. package/dist/cjs/component-cba208a8.js.map +1 -0
  4. package/dist/cjs/{get-icon-props-d74b10c9.js → get-icon-props-50be7440.js} +1 -19
  5. package/dist/cjs/get-icon-props-50be7440.js.map +1 -0
  6. package/dist/cjs/lime-elements.cjs.js +1 -1
  7. package/dist/cjs/limel-action-bar-item_2.cjs.entry.js +1 -1
  8. package/dist/cjs/limel-breadcrumbs_3.cjs.entry.js +2 -3
  9. package/dist/cjs/limel-breadcrumbs_3.cjs.entry.js.map +1 -1
  10. package/dist/cjs/limel-chip_2.cjs.entry.js +608 -0
  11. package/dist/cjs/limel-chip_2.cjs.entry.js.map +1 -0
  12. package/dist/cjs/limel-file.cjs.entry.js +1 -1
  13. package/dist/cjs/limel-header.cjs.entry.js +1 -1
  14. package/dist/cjs/limel-input-field_3.cjs.entry.js +2 -3
  15. package/dist/cjs/limel-input-field_3.cjs.entry.js.map +1 -1
  16. package/dist/cjs/limel-picker.cjs.entry.js +33 -24
  17. package/dist/cjs/limel-picker.cjs.entry.js.map +1 -1
  18. package/dist/cjs/limel-progress-flow-item.cjs.entry.js +1 -1
  19. package/dist/cjs/limel-progress-flow.cjs.entry.js +1 -1
  20. package/dist/cjs/limel-select.cjs.entry.js +1 -1
  21. package/dist/cjs/limel-tab-bar.cjs.entry.js +1 -1
  22. package/dist/cjs/loader.cjs.js +1 -1
  23. package/dist/collection/components/chip/chip.js +41 -14
  24. package/dist/collection/components/chip/chip.js.map +1 -1
  25. package/dist/collection/components/chip-set/chip-set.css +19 -723
  26. package/dist/collection/components/chip-set/chip-set.js +83 -108
  27. package/dist/collection/components/chip-set/chip-set.js.map +1 -1
  28. package/dist/collection/components/chip-set/chip.types.js.map +1 -1
  29. package/dist/collection/components/picker/picker.js +36 -26
  30. package/dist/collection/components/picker/picker.js.map +1 -1
  31. package/dist/esm/{component-703e23db.js → component-db286494.js} +121 -2
  32. package/dist/esm/component-db286494.js.map +1 -0
  33. package/dist/esm/{get-icon-props-f581151a.js → get-icon-props-0b65f85e.js} +2 -19
  34. package/dist/esm/get-icon-props-0b65f85e.js.map +1 -0
  35. package/dist/esm/{keycodes-22fb659d.js → keycodes-bf11a644.js} +2 -2
  36. package/dist/esm/{keycodes-22fb659d.js.map → keycodes-bf11a644.js.map} +1 -1
  37. package/dist/esm/lime-elements.js +1 -1
  38. package/dist/esm/limel-action-bar-item_2.entry.js +1 -1
  39. package/dist/esm/limel-breadcrumbs_3.entry.js +3 -4
  40. package/dist/esm/limel-breadcrumbs_3.entry.js.map +1 -1
  41. package/dist/esm/limel-chip_2.entry.js +603 -0
  42. package/dist/esm/limel-chip_2.entry.js.map +1 -0
  43. package/dist/esm/limel-file.entry.js +1 -1
  44. package/dist/esm/limel-header.entry.js +1 -1
  45. package/dist/esm/limel-input-field_3.entry.js +3 -4
  46. package/dist/esm/limel-input-field_3.entry.js.map +1 -1
  47. package/dist/esm/limel-picker.entry.js +34 -25
  48. package/dist/esm/limel-picker.entry.js.map +1 -1
  49. package/dist/esm/limel-popover_2.entry.js +1 -1
  50. package/dist/esm/limel-progress-flow-item.entry.js +1 -1
  51. package/dist/esm/limel-progress-flow.entry.js +1 -1
  52. package/dist/esm/limel-select.entry.js +2 -2
  53. package/dist/esm/limel-tab-bar.entry.js +1 -1
  54. package/dist/esm/loader.js +1 -1
  55. package/dist/lime-elements/lime-elements.esm.js +1 -1
  56. package/dist/lime-elements/lime-elements.esm.js.map +1 -1
  57. package/dist/lime-elements/{p-854343a1.entry.js → p-27d64a5a.entry.js} +2 -2
  58. package/dist/lime-elements/p-2f777fdb.js +2 -0
  59. package/dist/lime-elements/p-2f777fdb.js.map +1 -0
  60. package/dist/lime-elements/{p-4a8ac53b.entry.js → p-54c9b7b1.entry.js} +4 -4
  61. package/dist/lime-elements/{p-4a8ac53b.entry.js.map → p-54c9b7b1.entry.js.map} +1 -1
  62. package/dist/lime-elements/{p-af53d049.entry.js → p-71282352.entry.js} +2 -2
  63. package/dist/lime-elements/p-8d13a44f.entry.js +2 -0
  64. package/dist/lime-elements/p-8d13a44f.entry.js.map +1 -0
  65. package/dist/lime-elements/{p-bccf626e.entry.js → p-91aaa8b4.entry.js} +2 -2
  66. package/dist/lime-elements/{p-acd589ef.entry.js → p-b03c1b71.entry.js} +2 -2
  67. package/dist/lime-elements/{p-85a770a4.entry.js → p-b51fd0c7.entry.js} +2 -2
  68. package/dist/lime-elements/{p-e53b7ccf.entry.js → p-b89d2cc3.entry.js} +2 -2
  69. package/dist/lime-elements/{p-93c6d561.js → p-e03dfe70.js} +2 -2
  70. package/dist/lime-elements/{p-c022dd0d.entry.js → p-e41d6636.entry.js} +2 -2
  71. package/dist/lime-elements/{p-38151879.js → p-f764b655.js} +32 -10
  72. package/dist/lime-elements/p-f764b655.js.map +1 -0
  73. package/dist/lime-elements/p-fc423e66.entry.js +2 -0
  74. package/dist/lime-elements/p-fc423e66.entry.js.map +1 -0
  75. package/dist/lime-elements/p-fd69d7ad.entry.js +2 -0
  76. package/dist/lime-elements/{p-711c8538.entry.js.map → p-fd69d7ad.entry.js.map} +1 -1
  77. package/dist/lime-elements/{p-bbe3ce51.entry.js → p-fdae60a1.entry.js} +2 -2
  78. package/dist/types/components/chip/chip.d.ts +17 -4
  79. package/dist/types/components/chip-set/chip-set.d.ts +15 -15
  80. package/dist/types/components/chip-set/chip.types.d.ts +7 -1
  81. package/dist/types/components/picker/picker.d.ts +10 -2
  82. package/dist/types/components.d.ts +40 -12
  83. package/package.json +2 -2
  84. package/dist/cjs/component-6c4222b7.js.map +0 -1
  85. package/dist/cjs/get-icon-props-d74b10c9.js.map +0 -1
  86. package/dist/cjs/keyboard-9477d3a8.js +0 -133
  87. package/dist/cjs/keyboard-9477d3a8.js.map +0 -1
  88. package/dist/cjs/limel-chip-set.cjs.entry.js +0 -2095
  89. package/dist/cjs/limel-chip-set.cjs.entry.js.map +0 -1
  90. package/dist/cjs/limel-chip.cjs.entry.js +0 -105
  91. package/dist/cjs/limel-chip.cjs.entry.js.map +0 -1
  92. package/dist/esm/component-703e23db.js.map +0 -1
  93. package/dist/esm/get-icon-props-f581151a.js.map +0 -1
  94. package/dist/esm/keyboard-4b9e12e3.js +0 -129
  95. package/dist/esm/keyboard-4b9e12e3.js.map +0 -1
  96. package/dist/esm/limel-chip-set.entry.js +0 -2091
  97. package/dist/esm/limel-chip-set.entry.js.map +0 -1
  98. package/dist/esm/limel-chip.entry.js +0 -101
  99. package/dist/esm/limel-chip.entry.js.map +0 -1
  100. package/dist/lime-elements/p-38151879.js.map +0 -1
  101. package/dist/lime-elements/p-48aa89a6.entry.js +0 -2
  102. package/dist/lime-elements/p-48aa89a6.entry.js.map +0 -1
  103. package/dist/lime-elements/p-4d92b6fb.js +0 -2
  104. package/dist/lime-elements/p-4d92b6fb.js.map +0 -1
  105. package/dist/lime-elements/p-6e219bb4.js +0 -24
  106. package/dist/lime-elements/p-6e219bb4.js.map +0 -1
  107. package/dist/lime-elements/p-711c8538.entry.js +0 -2
  108. package/dist/lime-elements/p-8a9d91cf.entry.js +0 -222
  109. package/dist/lime-elements/p-8a9d91cf.entry.js.map +0 -1
  110. package/dist/lime-elements/p-f70a9044.entry.js +0 -2
  111. package/dist/lime-elements/p-f70a9044.entry.js.map +0 -1
  112. /package/dist/lime-elements/{p-854343a1.entry.js.map → p-27d64a5a.entry.js.map} +0 -0
  113. /package/dist/lime-elements/{p-af53d049.entry.js.map → p-71282352.entry.js.map} +0 -0
  114. /package/dist/lime-elements/{p-bccf626e.entry.js.map → p-91aaa8b4.entry.js.map} +0 -0
  115. /package/dist/lime-elements/{p-acd589ef.entry.js.map → p-b03c1b71.entry.js.map} +0 -0
  116. /package/dist/lime-elements/{p-85a770a4.entry.js.map → p-b51fd0c7.entry.js.map} +0 -0
  117. /package/dist/lime-elements/{p-e53b7ccf.entry.js.map → p-b89d2cc3.entry.js.map} +0 -0
  118. /package/dist/lime-elements/{p-93c6d561.js.map → p-e03dfe70.js.map} +0 -0
  119. /package/dist/lime-elements/{p-c022dd0d.entry.js.map → p-e41d6636.entry.js.map} +0 -0
  120. /package/dist/lime-elements/{p-bbe3ce51.entry.js.map → p-fdae60a1.entry.js.map} +0 -0
@@ -0,0 +1,608 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ const index = require('./index-38eb64b5.js');
6
+ const getIconProps = require('./get-icon-props-50be7440.js');
7
+ const makeEnterClickable = require('./make-enter-clickable-f7f8d33c.js');
8
+ const translations = require('./translations-a384b596.js');
9
+ const keycodes = require('./keycodes-3949f425.js');
10
+ const linkHelper = require('./link-helper-b7e6c8df.js');
11
+ const component = require('./component-37425b99.js');
12
+ const isEqual = require('./isEqual-d2a13a24.js');
13
+ require('./component-b37fd9bc.js');
14
+ require('./component-a4eb183b.js');
15
+ require('./ponyfill-98ca4766.js');
16
+ require('./component-55b926ef.js');
17
+ require('./eq-9a943b00.js');
18
+ require('./isObject-e28b7997.js');
19
+ require('./_getNative-60328036.js');
20
+ require('./isArray-d188a04f.js');
21
+ require('./isObjectLike-3e3f0cba.js');
22
+ require('./isArrayLike-ac53bdac.js');
23
+
24
+ const chipCss = "@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)}.chip:has(+.trailing-button){padding-right:calc(var(--limel-chip-height) + 0.125rem)}.chip:has(+.trailing-button) .text{padding-right:0}:host(limel-chip[disabled]) .chip{color:rgba(var(--contrast-1600), 0.37);background-color:rgba(var(--contrast-1600), 0.1);box-shadow:none}:host(limel-chip[readonly]) .chip{box-shadow:0 0 0 1px rgba(var(--contrast-800), 0.5)}:host(limel-chip[selected]) .chip{box-shadow:var(--button-shadow-inset)}:host(limel-chip[selected]) .chip:focus-visible{box-shadow:var(--button-shadow-inset), var(--shadow-depth-8-focused)}:host(limel-chip[selected]) .chip:active{box-shadow:var(--button-shadow-inset-pressed)}:host(limel-chip[selected]) .text{color:var(--mdc-theme-primary)}:host(limel-chip[type=filter]) .chip{border-top-left-radius:0.5rem;border-bottom-left-radius:0.5rem}:host(limel-chip[type=filter]) .chip:after{content:\"\";transition:background-color 0.4s ease 0.2s, box-shadow 0.6s ease 0.2s;box-sizing:border-box;position:absolute;bottom:0.125rem;left:0.125rem;width:0.5rem;height:0.5rem;border-radius:50%;background-color:rgb(var(--contrast-800), 0.8);box-shadow:0 0 0 1px rgb(var(--color-white)) inset}:host(limel-chip[type=filter][selected]) .chip:after{background-color:rgb(var(--color-green-default));box-shadow:0 0 0.375rem 0 rgb(var(--color-green-light)), 0 0 0 1px rgb(var(--color-white)) inset}limel-icon{flex-shrink:0;width:calc(var(--limel-chip-height) - 0.25rem);height:calc(var(--limel-chip-height) - 0.25rem);padding:0.0625rem}limel-badge{pointer-events:none}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.2;padding:0 0.5rem}.trailing-button{all:unset;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:transparent;z-index:1;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)}";
25
+
26
+ const Chip = class {
27
+ constructor(hostRef) {
28
+ index.registerInstance(this, hostRef);
29
+ this.remove = index.createEvent(this, "remove", 7);
30
+ this.renderAsButton = () => {
31
+ return [
32
+ index.h("button", { id: 'chip-' + this.identifier, class: "chip", role: "button", disabled: this.disabled || this.readonly, onKeyDown: this.handleDeleteKeyDown }, this.renderIcon(), this.renderLabel(), this.renderBadge()),
33
+ this.renderRemoveButton(),
34
+ ];
35
+ };
36
+ this.renderAsLink = () => {
37
+ return [
38
+ index.h("a", { id: 'chip-' + this.identifier, class: "chip", href: this.link.href, title: this.link.title, target: this.link.target, "aria-disabled": this.disabled || this.readonly, tabindex: this.disabled || this.readonly ? -1 : 0, onKeyDown: this.handleDeleteKeyDown }, this.renderIcon(), this.renderLabel(), this.renderBadge()),
39
+ this.renderRemoveButton(),
40
+ ];
41
+ };
42
+ this.renderLabel = () => {
43
+ return index.h("span", { class: "text" }, this.text);
44
+ };
45
+ this.filterClickWhenDisabled = (e) => {
46
+ if (this.disabled || this.readonly) {
47
+ e.preventDefault();
48
+ }
49
+ };
50
+ this.handleRemoveClick = (event) => {
51
+ event.stopPropagation();
52
+ this.remove.emit(this.identifier);
53
+ };
54
+ this.handleDeleteKeyDown = (event) => {
55
+ if (!this.removable) {
56
+ return;
57
+ }
58
+ const keys = [keycodes.DELETE, keycodes.BACKSPACE];
59
+ const keycodes$1 = [keycodes.DELETE_KEY_CODE, keycodes.BACKSPACE_KEY_CODE];
60
+ if (keys.includes(event.key) || keycodes$1.includes(event.keyCode)) {
61
+ this.handleRemoveClick(event);
62
+ }
63
+ };
64
+ this.removeChipLabel = () => {
65
+ return translations.translate.get('chip-set.remove-chip', this.language);
66
+ };
67
+ this.language = 'en';
68
+ this.text = undefined;
69
+ this.icon = undefined;
70
+ this.link = undefined;
71
+ this.badge = undefined;
72
+ this.disabled = false;
73
+ this.readonly = false;
74
+ this.selected = false;
75
+ this.removable = false;
76
+ this.type = 'default';
77
+ this.identifier = crypto.randomUUID();
78
+ }
79
+ componentWillLoad() {
80
+ makeEnterClickable.makeEnterClickable(this.host);
81
+ }
82
+ disconnectedCallback() {
83
+ makeEnterClickable.removeEnterClickable(this.host);
84
+ }
85
+ render() {
86
+ return (index.h(index.Host, { onClick: this.filterClickWhenDisabled }, this.link ? this.renderAsLink() : this.renderAsButton()));
87
+ }
88
+ renderIcon() {
89
+ var _a, _b;
90
+ const icon = getIconProps.getIconName(this.icon);
91
+ if (!icon) {
92
+ return;
93
+ }
94
+ return (index.h("limel-icon", { badge: true, name: icon, style: {
95
+ color: `${(_a = this.icon) === null || _a === void 0 ? void 0 : _a.color}`,
96
+ 'background-color': `${(_b = this.icon) === null || _b === void 0 ? void 0 : _b.backgroundColor}`,
97
+ } }));
98
+ }
99
+ renderBadge() {
100
+ if (!this.badge) {
101
+ return;
102
+ }
103
+ return index.h("limel-badge", { label: this.badge });
104
+ }
105
+ renderRemoveButton() {
106
+ if (!this.removable || this.readonly || this.disabled) {
107
+ return;
108
+ }
109
+ const svgData = '<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>';
110
+ return (index.h("button", { class: "trailing-button remove-button", tabIndex: -1, "aria-label": this.removeChipLabel, "aria-controls": 'chip-' + this.identifier, innerHTML: svgData, onClick: this.handleRemoveClick }));
111
+ }
112
+ get host() { return index.getElement(this); }
113
+ };
114
+ Chip.style = chipCss;
115
+
116
+ /**
117
+ * Key handler for the input field.
118
+ * Lets the user select, activate, and remove chips with the keyboard.
119
+ *
120
+ * @param event - event
121
+
122
+ */
123
+ function handleKeyboardEvent(event) {
124
+ if (this.textValue.length) {
125
+ // If there is any text in the input field, keyboard input should
126
+ // navigate the text, not the chips.
127
+ return;
128
+ }
129
+ if (!this.value || !this.value.length) {
130
+ // If there are no chips, there is nothing to select.
131
+ return;
132
+ }
133
+ const isLeft = event.key === keycodes.ARROW_LEFT || event.keyCode === keycodes.ARROW_LEFT_KEY_CODE;
134
+ const isRight = event.key === keycodes.ARROW_RIGHT || event.keyCode === keycodes.ARROW_RIGHT_KEY_CODE;
135
+ const isEnter = event.key === keycodes.ENTER || event.keyCode === keycodes.ENTER_KEY_CODE;
136
+ const isDelete = event.key === keycodes.DELETE || event.keyCode === keycodes.DELETE_KEY_CODE;
137
+ const isBackspace = event.key === keycodes.BACKSPACE || event.keyCode === keycodes.BACKSPACE_KEY_CODE;
138
+ const isEscape = event.key === keycodes.ESCAPE || event.keyCode === keycodes.ESCAPE_KEY_CODE;
139
+ if (isLeft) {
140
+ return handleLeft(this, event);
141
+ }
142
+ if (isRight) {
143
+ return handleRight(this, event);
144
+ }
145
+ if (isEnter) {
146
+ return handleEnter(this, event);
147
+ }
148
+ if (isDelete) {
149
+ return handleDelete(this, event);
150
+ }
151
+ if (isBackspace) {
152
+ return handleBackspace(this, event);
153
+ }
154
+ if (isEscape) {
155
+ return handleEscape(this, event);
156
+ }
157
+ }
158
+ function handleLeft(host, event) {
159
+ event.preventDefault();
160
+ if (host.inputChipIndexSelected === null) {
161
+ host.inputChipIndexSelected = host.value.length - 1;
162
+ return;
163
+ }
164
+ if (host.inputChipIndexSelected <= 0) {
165
+ return;
166
+ }
167
+ host.inputChipIndexSelected -= 1;
168
+ }
169
+ function handleRight(host, event) {
170
+ event.preventDefault();
171
+ if (host.inputChipIndexSelected === null) {
172
+ host.inputChipIndexSelected = 0;
173
+ return;
174
+ }
175
+ if (host.inputChipIndexSelected >= host.value.length - 1) {
176
+ return;
177
+ }
178
+ host.inputChipIndexSelected += 1;
179
+ }
180
+ function handleEnter(host, event) {
181
+ if (host.inputChipIndexSelected !== null) {
182
+ event.preventDefault();
183
+ host.emitInteraction(host.value[host.inputChipIndexSelected]);
184
+ }
185
+ }
186
+ function handleEscape(host, event) {
187
+ if (host.inputChipIndexSelected !== null) {
188
+ event.preventDefault();
189
+ host.inputChipIndexSelected = null;
190
+ }
191
+ }
192
+ function handleDelete(host, event) {
193
+ if (host.inputChipIndexSelected !== null) {
194
+ event.preventDefault();
195
+ removeChip(host);
196
+ }
197
+ }
198
+ function handleBackspace(host, event) {
199
+ if (host.inputChipIndexSelected !== null) {
200
+ event.preventDefault();
201
+ removeChip(host);
202
+ }
203
+ else if (!event.repeat) {
204
+ host.inputChipIndexSelected = host.value.length - 1;
205
+ }
206
+ }
207
+ function removeChip(host) {
208
+ if (host.inputChipIndexSelected !== null) {
209
+ host.removeChip(host.value[host.inputChipIndexSelected].id);
210
+ host.inputChipIndexSelected = null;
211
+ }
212
+ }
213
+
214
+ const chipSetCss = "@charset \"UTF-8\";:host{--mdc-theme-primary:var(\n --lime-primary-color,\n rgb(var(--color-teal-default))\n );--mdc-theme-secondary:var(\n --lime-secondary-color,\n rgb(var(--contrast-1100))\n );--mdc-theme-on-primary:var(\n --lime-on-primary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-secondary:var(\n --lime-on-secondary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-text-disabled-on-background:var(\n --lime-text-disabled-on-background-color,\n rgba(var(--contrast-1700), 0.38)\n );--mdc-theme-text-primary-on-background:var(\n --lime-text-primary-on-background-color,\n rgba(var(--contrast-1700), 0.87)\n );--mdc-theme-text-secondary-on-background:var(\n --lime-text-secondary-on-background-color,\n rgba(var(--contrast-1700), 0.54)\n );--mdc-theme-error:var(\n --lime-error-background-color,\n rgb(var(--color-red-dark))\n );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n --lime-surface-background-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-surface:var(\n --lime-on-surface-color,\n rgb(var(--contrast-1500))\n )}.mdc-notched-outline{display:flex;position:absolute;top:0;right:0;left:0;box-sizing:border-box;width:100%;max-width:100%;height:100%;text-align:left;pointer-events:none}[dir=rtl] .mdc-notched-outline,.mdc-notched-outline[dir=rtl]{text-align:right;}.mdc-notched-outline__leading,.mdc-notched-outline__notch,.mdc-notched-outline__trailing{box-sizing:border-box;height:100%;border-top:1px solid;border-bottom:1px solid;pointer-events:none}.mdc-notched-outline__leading{border-left:1px solid;border-right:none;width:12px}[dir=rtl] .mdc-notched-outline__leading,.mdc-notched-outline__leading[dir=rtl]{border-left:none;border-right:1px solid;}.mdc-notched-outline__trailing{border-left:none;border-right:1px solid;flex-grow:1}[dir=rtl] .mdc-notched-outline__trailing,.mdc-notched-outline__trailing[dir=rtl]{border-left:1px solid;border-right:none;}.mdc-notched-outline__notch{flex:0 0 auto;width:auto;max-width:calc(100% - 12px * 2)}.mdc-notched-outline .mdc-floating-label{display:inline-block;position:relative;max-width:100%}.mdc-notched-outline .mdc-floating-label--float-above{text-overflow:clip}.mdc-notched-outline--upgraded .mdc-floating-label--float-above{max-width:133.3333333333%}.mdc-notched-outline--notched .mdc-notched-outline__notch{padding-left:0;padding-right:8px;border-top:none}[dir=rtl] .mdc-notched-outline--notched .mdc-notched-outline__notch,.mdc-notched-outline--notched .mdc-notched-outline__notch[dir=rtl]{padding-left:8px;padding-right:0;}.mdc-notched-outline--no-label .mdc-notched-outline__notch{display:none}.mdc-floating-label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, inherit));font-size:0.875rem;font-size:var(--mdc-typography-subtitle1-font-size, 0.875rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight, 400);letter-spacing:0.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);text-decoration:inherit;text-decoration:var(--mdc-typography-subtitle1-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform, inherit);position:absolute;left:0;-webkit-transform-origin:left top;transform-origin:left top;line-height:1.15rem;text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:text;overflow:hidden;will-change:transform;transition:transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1)}[dir=rtl] .mdc-floating-label,.mdc-floating-label[dir=rtl]{right:0;left:auto;-webkit-transform-origin:right top;transform-origin:right top;text-align:right;}.mdc-floating-label--float-above{cursor:auto}.mdc-floating-label--required::after{margin-left:1px;margin-right:0px;content:\"*\"}[dir=rtl] .mdc-floating-label--required,.mdc-floating-label--required[dir=rtl]{}[dir=rtl] .mdc-floating-label--required::after,.mdc-floating-label--required[dir=rtl]::after{margin-left:0;margin-right:1px}.mdc-floating-label--float-above{transform:translateY(-106%) scale(0.75)}.mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-standard 250ms 1}@keyframes mdc-floating-label-shake-float-above-standard{0%{transform:translateX(calc(0 - 0%)) translateY(-106%) scale(0.75)}33%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(calc(4% - 0%)) translateY(-106%) scale(0.75)}66%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(calc(-4% - 0%)) translateY(-106%) scale(0.75)}100%{transform:translateX(calc(0 - 0%)) translateY(-106%) scale(0.75)}}@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-text-field--filled{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);will-change:transform, opacity}.mdc-text-field--filled .mdc-text-field__ripple::before,.mdc-text-field--filled .mdc-text-field__ripple::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-text-field--filled .mdc-text-field__ripple::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-text-field--filled .mdc-text-field__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-text-field--filled.mdc-ripple-upgraded .mdc-text-field__ripple::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-text-field--filled.mdc-ripple-upgraded .mdc-text-field__ripple::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-text-field--filled.mdc-ripple-upgraded--unbounded .mdc-text-field__ripple::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-text-field--filled.mdc-ripple-upgraded--foreground-activation .mdc-text-field__ripple::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.mdc-text-field--filled.mdc-ripple-upgraded--foreground-deactivation .mdc-text-field__ripple::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-text-field--filled .mdc-text-field__ripple::before,.mdc-text-field--filled .mdc-text-field__ripple::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-text-field--filled.mdc-ripple-upgraded .mdc-text-field__ripple::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-text-field__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.mdc-text-field{border-top-left-radius:4px;border-top-left-radius:var(--mdc-shape-small, 4px);border-top-right-radius:4px;border-top-right-radius:var(--mdc-shape-small, 4px);border-bottom-right-radius:0;border-bottom-left-radius:0;display:inline-flex;align-items:baseline;padding:0 16px;position:relative;box-sizing:border-box;overflow:hidden;will-change:opacity, transform, color}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label{color:rgba(0, 0, 0, 0.6)}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input{color:rgba(0, 0, 0, 0.87)}@media all{.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input::placeholder{color:rgba(0, 0, 0, 0.54)}}@media all{.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input:-ms-input-placeholder{color:rgba(0, 0, 0, 0.54)}}.mdc-text-field .mdc-text-field__input{caret-color:#26a69a;caret-color:var(--mdc-theme-primary, #26a69a)}.mdc-text-field:not(.mdc-text-field--disabled)+.mdc-text-field-helper-line .mdc-text-field-helper-text{color:rgba(0, 0, 0, 0.6)}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field-character-counter,.mdc-text-field:not(.mdc-text-field--disabled)+.mdc-text-field-helper-line .mdc-text-field-character-counter{color:rgba(0, 0, 0, 0.6)}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon--leading{color:rgba(0, 0, 0, 0.54)}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon--trailing{color:rgba(0, 0, 0, 0.54)}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__affix--prefix{color:rgba(0, 0, 0, 0.6)}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__affix--suffix{color:rgba(0, 0, 0, 0.6)}.mdc-text-field .mdc-floating-label{top:50%;transform:translateY(-50%);pointer-events:none}.mdc-text-field__input{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, inherit));font-size:0.875rem;font-size:var(--mdc-typography-subtitle1-font-size, 0.875rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight, 400);letter-spacing:0.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);text-decoration:inherit;text-decoration:var(--mdc-typography-subtitle1-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform, inherit);height:28px;transition:opacity 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);width:100%;min-width:0;border:none;border-radius:0;background:none;appearance:none;padding:0}.mdc-text-field__input::-ms-clear{display:none}.mdc-text-field__input::-webkit-calendar-picker-indicator{display:none}.mdc-text-field__input:focus{outline:none}.mdc-text-field__input:invalid{box-shadow:none}@media all{.mdc-text-field__input::placeholder{transition:opacity 67ms 0ms cubic-bezier(0.4, 0, 0.2, 1);opacity:0}}@media all{.mdc-text-field__input:-ms-input-placeholder{transition:opacity 67ms 0ms cubic-bezier(0.4, 0, 0.2, 1);opacity:0}}@media all{.mdc-text-field--no-label .mdc-text-field__input::placeholder,.mdc-text-field--focused .mdc-text-field__input::placeholder{transition-delay:40ms;transition-duration:110ms;opacity:1}}@media all{.mdc-text-field--no-label .mdc-text-field__input:-ms-input-placeholder,.mdc-text-field--focused .mdc-text-field__input:-ms-input-placeholder{transition-delay:40ms;transition-duration:110ms;opacity:1}}.mdc-text-field__affix{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, inherit));font-size:0.875rem;font-size:var(--mdc-typography-subtitle1-font-size, 0.875rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight, 400);letter-spacing:0.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);text-decoration:inherit;text-decoration:var(--mdc-typography-subtitle1-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform, inherit);height:28px;transition:opacity 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1);opacity:0;white-space:nowrap}.mdc-text-field--label-floating .mdc-text-field__affix,.mdc-text-field--no-label .mdc-text-field__affix{opacity:1}@supports (-webkit-hyphens: none){.mdc-text-field--outlined .mdc-text-field__affix{align-items:center;align-self:center;display:inline-flex;height:100%}}.mdc-text-field__affix--prefix{padding-left:0;padding-right:2px}[dir=rtl] .mdc-text-field__affix--prefix,.mdc-text-field__affix--prefix[dir=rtl]{padding-left:2px;padding-right:0;}.mdc-text-field--end-aligned .mdc-text-field__affix--prefix{padding-left:0;padding-right:12px}[dir=rtl] .mdc-text-field--end-aligned .mdc-text-field__affix--prefix,.mdc-text-field--end-aligned .mdc-text-field__affix--prefix[dir=rtl]{padding-left:12px;padding-right:0;}.mdc-text-field__affix--suffix{padding-left:12px;padding-right:0}[dir=rtl] .mdc-text-field__affix--suffix,.mdc-text-field__affix--suffix[dir=rtl]{padding-left:0;padding-right:12px;}.mdc-text-field--end-aligned .mdc-text-field__affix--suffix{padding-left:2px;padding-right:0}[dir=rtl] .mdc-text-field--end-aligned .mdc-text-field__affix--suffix,.mdc-text-field--end-aligned .mdc-text-field__affix--suffix[dir=rtl]{padding-left:0;padding-right:2px;}.mdc-text-field--filled{height:56px}.mdc-text-field--filled .mdc-text-field__ripple::before,.mdc-text-field--filled .mdc-text-field__ripple::after{background-color:rgba(0, 0, 0, 0.87);background-color:var(--mdc-ripple-color, rgba(0, 0, 0, 0.87))}.mdc-text-field--filled:hover .mdc-text-field__ripple::before,.mdc-text-field--filled.mdc-ripple-surface--hover .mdc-text-field__ripple::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-text-field--filled.mdc-ripple-upgraded--background-focused .mdc-text-field__ripple::before,.mdc-text-field--filled:not(.mdc-ripple-upgraded):focus .mdc-text-field__ripple::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-text-field--filled::before{display:inline-block;width:0;height:40px;content:\"\";vertical-align:0}.mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:whitesmoke}.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::before{border-bottom-color:rgba(0, 0, 0, 0.42)}.mdc-text-field--filled:not(.mdc-text-field--disabled):hover .mdc-line-ripple::before{border-bottom-color:rgba(0, 0, 0, 0.87)}.mdc-text-field--filled .mdc-line-ripple::after{border-bottom-color:#26a69a;border-bottom-color:var(--mdc-theme-primary, #26a69a)}.mdc-text-field--filled .mdc-floating-label{left:16px;right:initial}[dir=rtl] .mdc-text-field--filled .mdc-floating-label,.mdc-text-field--filled .mdc-floating-label[dir=rtl]{left:initial;right:16px;}.mdc-text-field--filled .mdc-floating-label--float-above{transform:translateY(-106%) scale(0.75)}.mdc-text-field--filled.mdc-text-field--no-label .mdc-text-field__input{height:100%}.mdc-text-field--filled.mdc-text-field--no-label .mdc-floating-label{display:none}.mdc-text-field--filled.mdc-text-field--no-label::before{display:none}@supports (-webkit-hyphens: none){.mdc-text-field--filled.mdc-text-field--no-label .mdc-text-field__affix{align-items:center;align-self:center;display:inline-flex;height:100%}}.mdc-text-field--outlined{height:56px;overflow:visible}.mdc-text-field--outlined .mdc-floating-label--float-above{transform:translateY(-37.25px) scale(1)}.mdc-text-field--outlined .mdc-floating-label--float-above{font-size:0.75rem}.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{transform:translateY(-34.75px) scale(0.75)}.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{font-size:1rem}.mdc-text-field--outlined .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-text-field-outlined 250ms 1}@keyframes mdc-floating-label-shake-float-above-text-field-outlined{0%{transform:translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75)}33%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(calc(4% - 0%)) translateY(-34.75px) scale(0.75)}66%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(calc(-4% - 0%)) translateY(-34.75px) scale(0.75)}100%{transform:translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75)}}.mdc-text-field--outlined .mdc-text-field__input{height:100%}.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing{border-color:rgba(0, 0, 0, 0.38)}.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:rgba(0, 0, 0, 0.87)}.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border-color:#26a69a;border-color:var(--mdc-theme-primary, #26a69a)}.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading{border-top-left-radius:4px;border-top-left-radius:var(--mdc-shape-small, 4px);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:4px;border-bottom-left-radius:var(--mdc-shape-small, 4px)}[dir=rtl] .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading,.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading[dir=rtl]{border-top-left-radius:0;border-top-right-radius:4px;border-top-right-radius:var(--mdc-shape-small, 4px);border-bottom-right-radius:4px;border-bottom-right-radius:var(--mdc-shape-small, 4px);border-bottom-left-radius:0;}@supports (top: max(0%)){.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading{width:max(12px, var(--mdc-shape-small, 4px))}}@supports (top: max(0%)){.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch{max-width:calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2)}}.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing{border-top-left-radius:0;border-top-right-radius:4px;border-top-right-radius:var(--mdc-shape-small, 4px);border-bottom-right-radius:4px;border-bottom-right-radius:var(--mdc-shape-small, 4px);border-bottom-left-radius:0}[dir=rtl] .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing,.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing[dir=rtl]{border-top-left-radius:4px;border-top-left-radius:var(--mdc-shape-small, 4px);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:4px;border-bottom-left-radius:var(--mdc-shape-small, 4px);}@supports (top: max(0%)){.mdc-text-field--outlined{padding-left:max(16px, calc(var(--mdc-shape-small, 4px) + 4px))}}@supports (top: max(0%)){.mdc-text-field--outlined{padding-right:max(16px, var(--mdc-shape-small, 4px))}}@supports (top: max(0%)){.mdc-text-field--outlined+.mdc-text-field-helper-line{padding-left:max(16px, calc(var(--mdc-shape-small, 4px) + 4px))}}@supports (top: max(0%)){.mdc-text-field--outlined+.mdc-text-field-helper-line{padding-right:max(16px, var(--mdc-shape-small, 4px))}}.mdc-text-field--outlined.mdc-text-field--with-leading-icon{padding-left:0}@supports (top: max(0%)){.mdc-text-field--outlined.mdc-text-field--with-leading-icon{padding-right:max(16px, var(--mdc-shape-small, 4px))}}[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-leading-icon,.mdc-text-field--outlined.mdc-text-field--with-leading-icon[dir=rtl]{padding-right:0;}@supports (top: max(0%)){[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-leading-icon,.mdc-text-field--outlined.mdc-text-field--with-leading-icon[dir=rtl]{padding-left:max(16px, var(--mdc-shape-small, 4px))}}.mdc-text-field--outlined.mdc-text-field--with-trailing-icon{padding-right:0}@supports (top: max(0%)){.mdc-text-field--outlined.mdc-text-field--with-trailing-icon{padding-left:max(16px, calc(var(--mdc-shape-small, 4px) + 4px))}}[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-trailing-icon,.mdc-text-field--outlined.mdc-text-field--with-trailing-icon[dir=rtl]{padding-left:0;}@supports (top: max(0%)){[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-trailing-icon,.mdc-text-field--outlined.mdc-text-field--with-trailing-icon[dir=rtl]{padding-right:max(16px, calc(var(--mdc-shape-small, 4px) + 4px))}}.mdc-text-field--outlined.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon{padding-left:0;padding-right:0}.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch{padding-top:1px}.mdc-text-field--outlined .mdc-text-field__ripple::before,.mdc-text-field--outlined .mdc-text-field__ripple::after{content:none}.mdc-text-field--outlined .mdc-floating-label{left:4px;right:initial}[dir=rtl] .mdc-text-field--outlined .mdc-floating-label,.mdc-text-field--outlined .mdc-floating-label[dir=rtl]{left:initial;right:4px;}.mdc-text-field--outlined .mdc-text-field__input{display:flex;border:none !important;background-color:transparent}.mdc-text-field--outlined .mdc-notched-outline{z-index:1}.mdc-text-field--textarea{flex-direction:column;align-items:center;width:auto;height:auto;padding:0;transition:none}.mdc-text-field--textarea .mdc-floating-label{top:19px}.mdc-text-field--textarea .mdc-floating-label:not(.mdc-floating-label--float-above){transform:none}.mdc-text-field--textarea .mdc-text-field__input{flex-grow:1;height:auto;min-height:1.5rem;overflow-x:hidden;overflow-y:auto;box-sizing:border-box;resize:none;padding:0 16px;line-height:1.5rem}.mdc-text-field--textarea.mdc-text-field--filled::before{display:none}.mdc-text-field--textarea.mdc-text-field--filled .mdc-floating-label--float-above{transform:translateY(-10.25px) scale(0.75)}.mdc-text-field--textarea.mdc-text-field--filled .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-textarea-filled 250ms 1}@keyframes mdc-floating-label-shake-float-above-textarea-filled{0%{transform:translateX(calc(0 - 0%)) translateY(-10.25px) scale(0.75)}33%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(calc(4% - 0%)) translateY(-10.25px) scale(0.75)}66%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(calc(-4% - 0%)) translateY(-10.25px) scale(0.75)}100%{transform:translateX(calc(0 - 0%)) translateY(-10.25px) scale(0.75)}}.mdc-text-field--textarea.mdc-text-field--filled .mdc-text-field__input{margin-top:23px;margin-bottom:9px}.mdc-text-field--textarea.mdc-text-field--filled.mdc-text-field--no-label .mdc-text-field__input{margin-top:16px;margin-bottom:16px}.mdc-text-field--textarea.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch{padding-top:0}.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label--float-above{transform:translateY(-27.25px) scale(1)}.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label--float-above{font-size:0.75rem}.mdc-text-field--textarea.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-text-field--textarea.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{transform:translateY(-24.75px) scale(0.75)}.mdc-text-field--textarea.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-text-field--textarea.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{font-size:1rem}.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-textarea-outlined 250ms 1}@keyframes mdc-floating-label-shake-float-above-textarea-outlined{0%{transform:translateX(calc(0 - 0%)) translateY(-24.75px) scale(0.75)}33%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(calc(4% - 0%)) translateY(-24.75px) scale(0.75)}66%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(calc(-4% - 0%)) translateY(-24.75px) scale(0.75)}100%{transform:translateX(calc(0 - 0%)) translateY(-24.75px) scale(0.75)}}.mdc-text-field--textarea.mdc-text-field--outlined .mdc-text-field__input{margin-top:16px;margin-bottom:16px}.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label{top:18px}.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field__input{margin-bottom:2px}.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field-character-counter{align-self:flex-end;padding:0 16px}.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field-character-counter::after{display:inline-block;width:0;height:16px;content:\"\";vertical-align:-16px}.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field-character-counter::before{display:none}.mdc-text-field__resizer{align-self:stretch;display:inline-flex;flex-direction:column;flex-grow:1;max-height:100%;max-width:100%;min-height:56px;min-width:fit-content;min-width:-moz-available;min-width:-webkit-fill-available;overflow:hidden;resize:both}.mdc-text-field--filled .mdc-text-field__resizer{transform:translateY(-1px)}.mdc-text-field--filled .mdc-text-field__resizer .mdc-text-field__input,.mdc-text-field--filled .mdc-text-field__resizer .mdc-text-field-character-counter{transform:translateY(1px)}.mdc-text-field--outlined .mdc-text-field__resizer{transform:translateX(-1px) translateY(-1px)}[dir=rtl] .mdc-text-field--outlined .mdc-text-field__resizer,.mdc-text-field--outlined .mdc-text-field__resizer[dir=rtl]{transform:translateX(1px) translateY(-1px);}.mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field__input,.mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field-character-counter{transform:translateX(1px) translateY(1px)}[dir=rtl] .mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field__input,[dir=rtl] .mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field-character-counter,.mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field__input[dir=rtl],.mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field-character-counter[dir=rtl]{transform:translateX(-1px) translateY(1px);}.mdc-text-field--with-leading-icon{padding-left:0;padding-right:16px}[dir=rtl] .mdc-text-field--with-leading-icon,.mdc-text-field--with-leading-icon[dir=rtl]{padding-left:16px;padding-right:0;}.mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label{max-width:calc(100% - 48px);left:48px;right:initial}[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label,.mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label[dir=rtl]{left:initial;right:48px;}.mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label--float-above{max-width:calc(100% / 0.75 - 64px / 0.75)}.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label{left:36px;right:initial}[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label,.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label[dir=rtl]{left:initial;right:36px;}.mdc-text-field--with-leading-icon.mdc-text-field--outlined :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch{max-width:calc(100% - 60px)}.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above{transform:translateY(-37.25px) translateX(-32px) scale(1)}[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above,.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above[dir=rtl]{transform:translateY(-37.25px) translateX(32px) scale(1);}.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above{font-size:0.75rem}.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{transform:translateY(-34.75px) translateX(-32px) scale(0.75)}[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above[dir=rtl],.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above[dir=rtl]{transform:translateY(-34.75px) translateX(32px) scale(0.75);}.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{font-size:1rem}.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-text-field-outlined-leading-icon 250ms 1}@keyframes mdc-floating-label-shake-float-above-text-field-outlined-leading-icon{0%{transform:translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75)}33%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(calc(4% - 32px)) translateY(-34.75px) scale(0.75)}66%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(calc(-4% - 32px)) translateY(-34.75px) scale(0.75)}100%{transform:translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75)}}[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined,.mdc-text-field--with-leading-icon.mdc-text-field--outlined[dir=rtl]{}[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--shake,.mdc-text-field--with-leading-icon.mdc-text-field--outlined[dir=rtl] .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-text-field-outlined-leading-icon 250ms 1}@keyframes mdc-floating-label-shake-float-above-text-field-outlined-leading-icon-rtl{0%{transform:translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75)}33%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(calc(4% - -32px)) translateY(-34.75px) scale(0.75)}66%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(calc(-4% - -32px)) translateY(-34.75px) scale(0.75)}100%{transform:translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75)}}.mdc-text-field--with-trailing-icon{padding-left:16px;padding-right:0}[dir=rtl] .mdc-text-field--with-trailing-icon,.mdc-text-field--with-trailing-icon[dir=rtl]{padding-left:0;padding-right:16px;}.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label{max-width:calc(100% - 64px)}.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label--float-above{max-width:calc(100% / 0.75 - 64px / 0.75)}.mdc-text-field--with-trailing-icon.mdc-text-field--outlined :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch{max-width:calc(100% - 60px)}.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon{padding-left:0;padding-right:0}.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label{max-width:calc(100% - 96px)}.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label--float-above{max-width:calc(100% / 0.75 - 96px / 0.75)}.mdc-text-field-helper-line{display:flex;justify-content:space-between;box-sizing:border-box}.mdc-text-field+.mdc-text-field-helper-line{padding-right:16px;padding-left:16px}.mdc-form-field>.mdc-text-field+label{align-self:flex-start}.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label{color:rgba(38, 166, 154, 0.87)}.mdc-text-field--focused .mdc-notched-outline__leading,.mdc-text-field--focused .mdc-notched-outline__notch,.mdc-text-field--focused .mdc-notched-outline__trailing{border-width:2px}.mdc-text-field--focused+.mdc-text-field-helper-line .mdc-text-field-helper-text:not(.mdc-text-field-helper-text--validation-msg){opacity:1}.mdc-text-field--focused.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch{padding-top:2px}.mdc-text-field--focused.mdc-text-field--outlined.mdc-text-field--textarea .mdc-notched-outline--notched .mdc-notched-outline__notch{padding-top:0}.mdc-text-field--invalid:not(.mdc-text-field--disabled):hover .mdc-line-ripple::before,.force-invalid:not(.mdc-text-field--disabled):hover .mdc-line-ripple::before{border-bottom-color:#b00020;border-bottom-color:var(--mdc-theme-error, #b00020)}.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple::after,.force-invalid:not(.mdc-text-field--disabled) .mdc-line-ripple::after{border-bottom-color:#b00020;border-bottom-color:var(--mdc-theme-error, #b00020)}.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-floating-label,.force-invalid:not(.mdc-text-field--disabled) .mdc-floating-label{color:#b00020;color:var(--mdc-theme-error, #b00020)}.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--invalid+.mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg,.force-invalid:not(.mdc-text-field--disabled)+.mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg{color:#b00020;color:var(--mdc-theme-error, #b00020)}.mdc-text-field--invalid .mdc-text-field__input,.force-invalid .mdc-text-field__input{caret-color:#b00020;caret-color:var(--mdc-theme-error, #b00020)}.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-text-field__icon--trailing,.force-invalid:not(.mdc-text-field--disabled) .mdc-text-field__icon--trailing{color:#b00020;color:var(--mdc-theme-error, #b00020)}.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple::before,.force-invalid:not(.mdc-text-field--disabled) .mdc-line-ripple::before{border-bottom-color:#b00020;border-bottom-color:var(--mdc-theme-error, #b00020)}.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,.force-invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,.force-invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing,.force-invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing{border-color:#b00020;border-color:var(--mdc-theme-error, #b00020)}.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,.force-invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,.force-invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing,.force-invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#b00020;border-color:var(--mdc-theme-error, #b00020)}.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,.force-invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,.force-invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing,.force-invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border-color:#b00020;border-color:var(--mdc-theme-error, #b00020)}.mdc-text-field--invalid+.mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg,.force-invalid+.mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg{opacity:1}.mdc-text-field--disabled{pointer-events:none}.mdc-text-field--disabled .mdc-text-field__input{color:rgba(0, 0, 0, 0.38)}@media all{.mdc-text-field--disabled .mdc-text-field__input::placeholder{color:rgba(0, 0, 0, 0.38)}}@media all{.mdc-text-field--disabled .mdc-text-field__input:-ms-input-placeholder{color:rgba(0, 0, 0, 0.38)}}.mdc-text-field--disabled .mdc-floating-label{color:rgba(0, 0, 0, 0.38)}.mdc-text-field--disabled+.mdc-text-field-helper-line .mdc-text-field-helper-text{color:rgba(0, 0, 0, 0.38)}.mdc-text-field--disabled .mdc-text-field-character-counter,.mdc-text-field--disabled+.mdc-text-field-helper-line .mdc-text-field-character-counter{color:rgba(0, 0, 0, 0.38)}.mdc-text-field--disabled .mdc-text-field__icon--leading{color:rgba(0, 0, 0, 0.3)}.mdc-text-field--disabled .mdc-text-field__icon--trailing{color:rgba(0, 0, 0, 0.3)}.mdc-text-field--disabled .mdc-text-field__affix--prefix{color:rgba(0, 0, 0, 0.38)}.mdc-text-field--disabled .mdc-text-field__affix--suffix{color:rgba(0, 0, 0, 0.38)}.mdc-text-field--disabled .mdc-line-ripple::before{border-bottom-color:rgba(0, 0, 0, 0.06)}.mdc-text-field--disabled .mdc-notched-outline__leading,.mdc-text-field--disabled .mdc-notched-outline__notch,.mdc-text-field--disabled .mdc-notched-outline__trailing{border-color:rgba(0, 0, 0, 0.06)}@media screen and (forced-colors: active), (-ms-high-contrast: active){.mdc-text-field--disabled .mdc-text-field__input::placeholder{color:GrayText}}@media screen and (forced-colors: active), (-ms-high-contrast: active){.mdc-text-field--disabled .mdc-text-field__input:-ms-input-placeholder{color:GrayText}}@media screen and (forced-colors: active), (-ms-high-contrast: active){.mdc-text-field--disabled .mdc-floating-label{color:GrayText}}@media screen and (forced-colors: active), (-ms-high-contrast: active){.mdc-text-field--disabled+.mdc-text-field-helper-line .mdc-text-field-helper-text{color:GrayText}}@media screen and (forced-colors: active), (-ms-high-contrast: active){.mdc-text-field--disabled .mdc-text-field-character-counter,.mdc-text-field--disabled+.mdc-text-field-helper-line .mdc-text-field-character-counter{color:GrayText}}@media screen and (forced-colors: active), (-ms-high-contrast: active){.mdc-text-field--disabled .mdc-text-field__icon--leading{color:GrayText}}@media screen and (forced-colors: active), (-ms-high-contrast: active){.mdc-text-field--disabled .mdc-text-field__icon--trailing{color:GrayText}}@media screen and (forced-colors: active), (-ms-high-contrast: active){.mdc-text-field--disabled .mdc-text-field__affix--prefix{color:GrayText}}@media screen and (forced-colors: active), (-ms-high-contrast: active){.mdc-text-field--disabled .mdc-text-field__affix--suffix{color:GrayText}}@media screen and (forced-colors: active), (-ms-high-contrast: active){.mdc-text-field--disabled .mdc-line-ripple::before{border-bottom-color:GrayText}}@media screen and (forced-colors: active), (-ms-high-contrast: active){.mdc-text-field--disabled .mdc-notched-outline__leading,.mdc-text-field--disabled .mdc-notched-outline__notch,.mdc-text-field--disabled .mdc-notched-outline__trailing{border-color:GrayText}}@media screen and (forced-colors: active){.mdc-text-field--disabled .mdc-text-field__input{background-color:Window}.mdc-text-field--disabled .mdc-floating-label{z-index:1}}.mdc-text-field--disabled .mdc-floating-label{cursor:default}.mdc-text-field--disabled.mdc-text-field--filled{background-color:#fafafa}.mdc-text-field--disabled.mdc-text-field--filled .mdc-text-field__ripple{display:none}.mdc-text-field--disabled .mdc-text-field__input{pointer-events:auto}.mdc-text-field--end-aligned .mdc-text-field__input{text-align:right}[dir=rtl] .mdc-text-field--end-aligned .mdc-text-field__input,.mdc-text-field--end-aligned .mdc-text-field__input[dir=rtl]{text-align:left;}[dir=rtl] .mdc-text-field--ltr-text,.mdc-text-field--ltr-text[dir=rtl]{}[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__input,[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix,.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__input,.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix{direction:ltr}[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--prefix,.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--prefix{padding-left:0;padding-right:2px}[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--suffix,.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--suffix{padding-left:12px;padding-right:0}[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__icon--leading,.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__icon--leading{order:1}[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--suffix,.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--suffix{order:2}[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__input,.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__input{order:3}[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--prefix,.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--prefix{order:4}[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__icon--trailing,.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__icon--trailing{order:5}[dir=rtl] .mdc-text-field--ltr-text.mdc-text-field--end-aligned,.mdc-text-field--ltr-text.mdc-text-field--end-aligned[dir=rtl]{}[dir=rtl] .mdc-text-field--ltr-text.mdc-text-field--end-aligned .mdc-text-field__input,.mdc-text-field--ltr-text.mdc-text-field--end-aligned[dir=rtl] .mdc-text-field__input{text-align:right}[dir=rtl] .mdc-text-field--ltr-text.mdc-text-field--end-aligned .mdc-text-field__affix--prefix,.mdc-text-field--ltr-text.mdc-text-field--end-aligned[dir=rtl] .mdc-text-field__affix--prefix{padding-right:12px}[dir=rtl] .mdc-text-field--ltr-text.mdc-text-field--end-aligned .mdc-text-field__affix--suffix,.mdc-text-field--ltr-text.mdc-text-field--end-aligned[dir=rtl] .mdc-text-field__affix--suffix{padding-left:2px}.mdc-text-field-helper-text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, inherit));font-size:0.6875rem;font-size:var(--mdc-typography-caption-font-size, 0.6875rem);line-height:0.875rem;line-height:var(--mdc-typography-caption-line-height, 0.875rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight, 400);letter-spacing:0.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, 0.0333333333em);text-decoration:inherit;text-decoration:var(--mdc-typography-caption-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform, inherit);display:block;margin-top:0;line-height:normal;margin:0;opacity:0;will-change:opacity;transition:opacity 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-text-field-helper-text::before{display:inline-block;width:0;height:16px;content:\"\";vertical-align:0}.mdc-text-field-helper-text--persistent{transition:none;opacity:1;will-change:initial}.mdc-text-field-character-counter{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:inherit;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, inherit));font-size:0.6875rem;font-size:var(--mdc-typography-caption-font-size, 0.6875rem);line-height:0.875rem;line-height:var(--mdc-typography-caption-line-height, 0.875rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight, 400);letter-spacing:0.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, 0.0333333333em);text-decoration:inherit;text-decoration:var(--mdc-typography-caption-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform, inherit);display:block;margin-top:0;line-height:normal;margin-left:auto;margin-right:0;padding-left:16px;padding-right:0;white-space:nowrap}.mdc-text-field-character-counter::before{display:inline-block;width:0;height:16px;content:\"\";vertical-align:0}[dir=rtl] .mdc-text-field-character-counter,.mdc-text-field-character-counter[dir=rtl]{margin-left:0;margin-right:auto;}[dir=rtl] .mdc-text-field-character-counter,.mdc-text-field-character-counter[dir=rtl]{padding-left:0;padding-right:16px;}.mdc-text-field__icon{align-self:center;cursor:pointer}.mdc-text-field__icon:not([tabindex]),.mdc-text-field__icon[tabindex=\"-1\"]{cursor:default;pointer-events:none}.mdc-text-field__icon svg{display:block}.mdc-text-field__icon--leading{margin-left:16px;margin-right:8px}[dir=rtl] .mdc-text-field__icon--leading,.mdc-text-field__icon--leading[dir=rtl]{margin-left:8px;margin-right:16px;}.mdc-text-field__icon--trailing{padding:12px;margin-left:0px;margin-right:0px}[dir=rtl] .mdc-text-field__icon--trailing,.mdc-text-field__icon--trailing[dir=rtl]{margin-left:0px;margin-right:0px;}.mdc-text-field__icon{align-self:center;cursor:pointer}.mdc-text-field__icon:not([tabindex]),.mdc-text-field__icon[tabindex=\"-1\"]{cursor:default;pointer-events:none}.mdc-text-field__icon svg{display:block}.mdc-text-field__icon--leading{margin-left:16px;margin-right:8px}[dir=rtl] .mdc-text-field__icon--leading,.mdc-text-field__icon--leading[dir=rtl]{margin-left:8px;margin-right:16px;}.mdc-text-field__icon--trailing{padding:12px;margin-left:0px;margin-right:0px}[dir=rtl] .mdc-text-field__icon--trailing,.mdc-text-field__icon--trailing[dir=rtl]{margin-left:0px;margin-right:0px;}.mdc-text-field.mdc-text-field--outlined{transition:background-color 0.2s ease;border-radius:0.25rem}.mdc-text-field.mdc-text-field--outlined .mdc-notched-outline__leading,.mdc-text-field.mdc-text-field--outlined .mdc-notched-outline__notch,.mdc-text-field.mdc-text-field--outlined .mdc-notched-outline__trailing{transition:border-color 0.2s ease}.mdc-text-field.mdc-text-field--outlined:not(.mdc-text-field--disabled){background-color:rgba(var(--contrast-200), 0.5)}.mdc-text-field.mdc-text-field--outlined:not(.mdc-text-field--disabled):hover{background-color:rgba(var(--contrast-200), 1)}.mdc-text-field.mdc-text-field--outlined.mdc-text-field--focused{background-color:rgba(var(--contrast-100), 0.8)}.mdc-text-field.mdc-text-field--outlined.mdc-text-field--disabled{background-color:transparent}.mdc-text-field.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--invalid):not(.force-invalid):not(.force-invalid) .mdc-notched-outline__leading,.mdc-text-field.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--invalid):not(.force-invalid):not(.force-invalid) .mdc-notched-outline__notch,.mdc-text-field.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--invalid):not(.force-invalid):not(.force-invalid) .mdc-notched-outline__trailing{border-color:rgba(var(--contrast-700), 0.65)}.mdc-text-field.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--invalid):not(.force-invalid):not(.force-invalid):not(.mdc-text-field--focused):not(.mdc-text-field--invalid):not(.force-invalid):not(.force-invalid):hover .mdc-notched-outline .mdc-notched-outline__leading,.mdc-text-field.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--invalid):not(.force-invalid):not(.force-invalid):not(.mdc-text-field--focused):not(.mdc-text-field--invalid):not(.force-invalid):not(.force-invalid):hover .mdc-notched-outline .mdc-notched-outline__notch,.mdc-text-field.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--invalid):not(.force-invalid):not(.force-invalid):not(.mdc-text-field--focused):not(.mdc-text-field--invalid):not(.force-invalid):not(.force-invalid):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:rgba(var(--contrast-700), 1)}.mdc-text-field.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--invalid):not(.force-invalid):not(.force-invalid).mdc-text-field--focused .mdc-notched-outline__leading,.mdc-text-field.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--invalid):not(.force-invalid):not(.force-invalid).mdc-text-field--focused .mdc-notched-outline__notch,.mdc-text-field.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--invalid):not(.force-invalid):not(.force-invalid).mdc-text-field--focused .mdc-notched-outline__trailing{border-color:var(--mdc-theme-primary)}.mdc-text-field .mdc-notched-outline__leading,.mdc-text-field .mdc-notched-outline__notch,.mdc-text-field .mdc-notched-outline__trailing,.mdc-text-field.mdc-text-field--focused .mdc-notched-outline__leading,.mdc-text-field.mdc-text-field--focused .mdc-notched-outline__notch,.mdc-text-field.mdc-text-field--focused .mdc-notched-outline__trailing{border-width:1px}.mdc-text-field.mdc-text-field--focused.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch{padding-top:0}.mdc-text-field__icon{color:rgb(var(--contrast-900));flex-shrink:0}.mdc-text-field__input,.mdc-floating-label{font-family:inherit}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label{color:rgba(var(--contrast-1200), 1)}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input{color:rgba(var(--contrast-1400), 1)}.mdc-text-field.mdc-text-field--disabled .mdc-floating-label{color:rgba(var(--contrast-1200), 0.5)}.mdc-text-field.mdc-text-field--disabled .mdc-text-field__input{color:rgba(var(--contrast-1400), 0.5)}.mdc-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;opacity:0.4}:host(limel-chip-set){isolation:isolate}.mdc-chip-set{display:flex;align-items:center;gap:0.5rem;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.has-clear-all-button.mdc-chip-set--input{padding-right:2rem}.mdc-text-field{height:auto;cursor:text;flex-wrap:wrap;row-gap:0.5rem}.mdc-text-field .mdc-text-field__input{width:auto;padding:0 0.75rem;flex-grow:1;flex-shrink:0}.mdc-text-field .mdc-text-field__input::placeholder{color:rgb(var(--contrast-900)) !important}.mdc-text-field .mdc-text-field__input.hidden{transition:all 0s;opacity:0;position:absolute;z-index:-100}.mdc-text-field .mdc-text-field__input[type=search]{-webkit-appearance:textfield;background-color:transparent}.mdc-text-field .mdc-text-field__input[type=search]::-webkit-search-cancel-button{display:none}.chip-set__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:120%;top:0.8125rem;padding-left:1.25rem}.lime-notched-outline--notched .mdc-notched-outline__notch{border-top:1px solid transparent !important}.lime-notched-outline--notched .mdc-notched-outline__notch .lime-floating-label--float-above{top:1.6875rem;transform:translateY(-34.75px) scale(0.75);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 limel-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)}limel-chip{border-radius:2rem}limel-chip.can-be-removed{box-shadow:var(--shadow-depth-8-error)}:host(.is-file-picker.shows-dropzone[readonly]) .mdc-text-field:not(.has-chips) .mdc-notched-outline:before,:host(.is-file-picker.shows-dropzone[readonly]) .mdc-text-field:not(.has-chips) .mdc-notched-outline:after{display:none}:host{--dropzone-margin:0.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;opacity:0.4;pointer-events:none}:host(.is-file-picker.shows-dropzone) .mdc-text-field:not(.has-chips):not(.lime-text-field--readonly) .mdc-notched-outline:before{width:50%;text-align:right}:host(.is-file-picker.shows-dropzone) .mdc-text-field:not(.has-chips):not(.lime-text-field--readonly) .mdc-notched-outline .mdc-notched-outline__notch{max-width:40%}:host(limel-chip-set:focus),:host(limel-chip-set:focus-visible),:host(limel-chip-set:focus-within),:host(limel-chip-set[invalid]:not([invalid=false])),:host(limel-chip-set[invalid=true]){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-chip-set){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-chip-set:focus) limel-helper-line,:host(limel-chip-set:focus-visible) limel-helper-line,:host(limel-chip-set:focus-within) limel-helper-line,:host(limel-chip-set:hover) limel-helper-line{will-change:grid-template-rows}";
215
+
216
+ const INPUT_FIELD_TABINDEX = 1;
217
+ const ChipSet = class {
218
+ constructor(hostRef) {
219
+ index.registerInstance(this, hostRef);
220
+ this.interact = index.createEvent(this, "interact", 7);
221
+ this.change = index.createEvent(this, "change", 7);
222
+ this.startEdit = index.createEvent(this, "startEdit", 7);
223
+ this.stopEdit = index.createEvent(this, "stopEdit", 7);
224
+ this.input = index.createEvent(this, "input", 7);
225
+ this.handleKeyDown = handleKeyboardEvent;
226
+ this.getValue = () => {
227
+ return this.value.map((chip) => (Object.assign(Object.assign({}, chip), (this.type && {
228
+ selected: this.selectedChipIds.includes(chip.id),
229
+ }))));
230
+ };
231
+ this.renderEmptyValueForReadonly = () => {
232
+ if (this.readonly && this.value.length === 0) {
233
+ return (index.h("span", { class: "lime-empty-value-for-readonly lime-looks-like-input-value" }, "\u2013"));
234
+ }
235
+ };
236
+ this.floatLabelAbove = () => {
237
+ if (!!this.value.length || this.editMode || this.readonly) {
238
+ return true;
239
+ }
240
+ };
241
+ this.dropZoneTip = () => {
242
+ return translations.translate.get('file.drag-and-drop-tips', this.language);
243
+ };
244
+ this.hasHelperText = () => {
245
+ return this.helperText !== null && this.helperText !== undefined;
246
+ };
247
+ this.renderHelperLine = () => {
248
+ if (!this.maxItems && !this.hasHelperText()) {
249
+ return;
250
+ }
251
+ return (index.h("limel-helper-line", { length: this.value.length, maxLength: this.maxItems, helperText: this.helperText, invalid: this.isInvalid() }));
252
+ };
253
+ this.catchInputChipClicks = (chip) => () => {
254
+ if (this.isSelectableChip(chip)) {
255
+ this.updateSelectedChipIds(chip);
256
+ this.change.emit(chip);
257
+ }
258
+ this.emitInteraction(chip);
259
+ };
260
+ this.handleRemoveChip = (event) => {
261
+ this.removeChip(event.detail);
262
+ };
263
+ this.removeChip = (identifier) => {
264
+ const newValue = this.value.filter((chip) => {
265
+ return chip.id !== identifier;
266
+ });
267
+ this.change.emit(newValue);
268
+ };
269
+ this.clearAllChipsLabel = () => {
270
+ return translations.translate.get('chip-set.clear-all', this.language);
271
+ };
272
+ this.value = [];
273
+ this.type = undefined;
274
+ this.label = undefined;
275
+ this.helperText = undefined;
276
+ this.disabled = false;
277
+ this.readonly = false;
278
+ this.invalid = false;
279
+ this.inputType = 'text';
280
+ this.maxItems = undefined;
281
+ this.required = false;
282
+ this.searchLabel = undefined;
283
+ this.emptyInputOnBlur = true;
284
+ this.clearAllButton = true;
285
+ this.leadingIcon = null;
286
+ this.delimiter = null;
287
+ this.language = 'en';
288
+ this.editMode = false;
289
+ this.textValue = '';
290
+ this.blurred = false;
291
+ this.inputChipIndexSelected = null;
292
+ this.selectedChipIds = undefined;
293
+ this.renderChip = this.renderChip.bind(this);
294
+ this.renderInputChip = this.renderInputChip.bind(this);
295
+ this.isFull = this.isFull.bind(this);
296
+ this.handleTextFieldFocus = this.handleTextFieldFocus.bind(this);
297
+ this.handleInputBlur = this.handleInputBlur.bind(this);
298
+ this.handleTextInput = this.handleTextInput.bind(this);
299
+ this.inputFieldOnChange = this.inputFieldOnChange.bind(this);
300
+ this.handleKeyDown = this.handleKeyDown.bind(this);
301
+ this.inputHidden = this.inputHidden.bind(this);
302
+ this.handleDeleteAllIconClick =
303
+ this.handleDeleteAllIconClick.bind(this);
304
+ this.renderDelimiter = this.renderDelimiter.bind(this);
305
+ }
306
+ connectedCallback() {
307
+ this.initialize();
308
+ }
309
+ initialize() {
310
+ if (this.value.length) {
311
+ this.selectedChipIds = this.value
312
+ .filter((chip) => chip.selected)
313
+ .map((chip) => chip.id);
314
+ }
315
+ }
316
+ /**
317
+ * Used to find out whether the chip-set is in edit mode.
318
+ *
319
+ * @returns `true` if the chip-set is in edit mode, `false` otherwise.
320
+ */
321
+ async getEditMode() {
322
+ return this.editMode;
323
+ }
324
+ /**
325
+ * Used to set focus to the chip-set input field.
326
+ *
327
+ * @param emptyInput - if `true`, any text in the input is discarded
328
+ * @returns does not return anything, but methods have to be async
329
+ */
330
+ async setFocus(emptyInput = false) {
331
+ if (this.disabled || this.readonly) {
332
+ return;
333
+ }
334
+ this.editMode = true;
335
+ if (emptyInput) {
336
+ this.textValue = '';
337
+ }
338
+ this.host.shadowRoot.querySelector('input').focus();
339
+ this.startEdit.emit();
340
+ }
341
+ /**
342
+ * Used to empty the input field. Used in conjunction with `emptyInputOnBlur` to let the
343
+ * consumer control when the input is emptied.
344
+ *
345
+ * @returns does not return anything, but methods have to be async
346
+ */
347
+ async emptyInput() {
348
+ this.syncEmptyInput();
349
+ }
350
+ componentDidLoad() {
351
+ this.triggerIconColorWarning(this.value);
352
+ if (this.type === 'input') {
353
+ this.mdcTextField = new component.MDCTextField(this.host.shadowRoot.querySelector('.mdc-text-field'));
354
+ }
355
+ }
356
+ componentDidUpdate() {
357
+ const input = this.host.shadowRoot.querySelector('input');
358
+ if (input && this.editMode) {
359
+ input.focus();
360
+ }
361
+ }
362
+ disconnectedCallback() {
363
+ if (this.mdcTextField) {
364
+ this.mdcTextField.destroy();
365
+ }
366
+ }
367
+ render() {
368
+ if (this.type === 'input') {
369
+ return this.renderInputChips();
370
+ }
371
+ const classes = {
372
+ 'mdc-chip-set': true,
373
+ disabled: this.disabled || this.readonly,
374
+ 'mdc-text-field--with-trailing-icon': true,
375
+ };
376
+ if (this.type) {
377
+ classes[`mdc-chip-set--${this.type}`] = true;
378
+ }
379
+ const chipSetLabel = this.renderChipSetLabel();
380
+ if (chipSetLabel) {
381
+ classes['chip-set--with-label'] = true;
382
+ }
383
+ const value = this.getValue();
384
+ return (index.h("div", { class: classes, role: "grid" }, chipSetLabel, value.map(this.renderChip), this.renderHelperLine()));
385
+ }
386
+ handleChangeChips(newValue, oldValue) {
387
+ if (isEqual.isEqual(newValue, oldValue)) {
388
+ return;
389
+ }
390
+ this.syncEmptyInput();
391
+ this.initialize();
392
+ }
393
+ renderChipSetLabel() {
394
+ if (!this.label) {
395
+ return;
396
+ }
397
+ return (index.h("label", { class: "chip-set__label mdc-floating-label mdc-floating-label--float-above" }, this.label));
398
+ }
399
+ renderInputChips() {
400
+ return [
401
+ index.h("div", { class: {
402
+ 'mdc-text-field mdc-text-field--outlined': true,
403
+ 'mdc-chip-set mdc-chip-set--input': true,
404
+ 'force-invalid': this.isInvalid(),
405
+ 'mdc-text-field--disabled': this.readonly || this.disabled,
406
+ 'lime-text-field--readonly': this.readonly,
407
+ 'has-chips mdc-text-field--label-floating': this.value.length !== 0,
408
+ 'has-leading-icon': this.leadingIcon !== null,
409
+ 'has-clear-all-button': this.clearAllButton,
410
+ }, onClick: this.handleTextFieldFocus }, this.value.map(this.renderInputChip), index.h("input", { tabIndex: INPUT_FIELD_TABINDEX, type: this.inputType, id: "input-element", disabled: this.readonly || this.disabled, class: {
411
+ 'mdc-text-field__input': true,
412
+ hidden: this.inputHidden(),
413
+ }, value: this.textValue, onBlur: this.handleInputBlur, onFocus: this.handleTextFieldFocus, onKeyDown: this.handleKeyDown, onInput: this.handleTextInput,
414
+ // Some browsers emit a change event on input elements, we need to stop
415
+ // that event from propagating since we are emitting our own change event
416
+ onChange: this.inputFieldOnChange, placeholder: this.isFull() ? '' : this.searchLabel, readonly: this.isFull() }), index.h("div", { class: {
417
+ 'mdc-notched-outline': true,
418
+ 'mdc-notched-outline--upgraded': true,
419
+ 'mdc-text-field--required': this.required,
420
+ 'lime-notched-outline--notched': this.floatLabelAbove(),
421
+ }, "dropzone-tip": this.dropZoneTip() }, index.h("div", { class: "mdc-notched-outline__leading" }), this.renderLabel(), index.h("div", { class: "mdc-notched-outline__trailing" })), this.renderLeadingIcon(), this.renderEmptyValueForReadonly(), this.renderClearAllChipsButton()),
422
+ this.renderHelperLine(),
423
+ ];
424
+ }
425
+ renderLabel() {
426
+ const labelClassList = {
427
+ 'mdc-floating-label': true,
428
+ 'mdc-text-field--disabled': this.readonly || this.disabled,
429
+ 'mdc-floating-label--required': this.required,
430
+ 'lime-floating-label--float-above': this.floatLabelAbove(),
431
+ };
432
+ if (!this.label) {
433
+ return;
434
+ }
435
+ return (index.h("div", { class: "mdc-notched-outline__notch" }, index.h("label", { class: labelClassList, htmlFor: "input-element" }, this.label)));
436
+ }
437
+ isFull() {
438
+ return !!this.maxItems && this.value.length >= this.maxItems;
439
+ }
440
+ isInvalid() {
441
+ if (this.readonly) {
442
+ // A readonly field can never be invalid.
443
+ return false;
444
+ }
445
+ if (this.invalid) {
446
+ return true;
447
+ }
448
+ if (!this.required) {
449
+ return false;
450
+ }
451
+ if (!this.blurred) {
452
+ return false;
453
+ }
454
+ return !this.value || !this.value.length;
455
+ }
456
+ inputFieldOnChange(event) {
457
+ event.stopPropagation();
458
+ }
459
+ /**
460
+ * Enter edit mode when the text field receives focus. When editMode is true, the input element will be visible
461
+ */
462
+ handleTextFieldFocus() {
463
+ if (this.disabled || this.readonly) {
464
+ return;
465
+ }
466
+ if (this.editMode) {
467
+ return;
468
+ }
469
+ this.editMode = true;
470
+ this.startEdit.emit();
471
+ }
472
+ /**
473
+ * Exit edit mode when the input element loses focus. This makes sure the input element does not take up any
474
+ * additional space when the user it not typing anything
475
+ */
476
+ handleInputBlur() {
477
+ if (this.emptyInputOnBlur) {
478
+ this.syncEmptyInput();
479
+ }
480
+ this.editMode = false;
481
+ this.blurred = true;
482
+ this.inputChipIndexSelected = null;
483
+ // This timeout is needed in order to let a new element receive focus
484
+ setTimeout(() => {
485
+ this.stopEdit.emit();
486
+ }, 0);
487
+ }
488
+ syncEmptyInput() {
489
+ this.textValue = '';
490
+ }
491
+ inputHidden() {
492
+ if (this.editMode) {
493
+ return this.isFull();
494
+ }
495
+ // If there are chips in the picker, hide the input to avoid the input
496
+ // being placed on a new line and adding ugly space beneath the chips.
497
+ // If there are no chips, show the input, or the picker will look weird.
498
+ return !!(this.value && this.value.length);
499
+ }
500
+ handleTextInput(event) {
501
+ event.stopPropagation();
502
+ this.inputChipIndexSelected = null;
503
+ this.textValue = event.target.value;
504
+ this.input.emit(event.target.value && event.target.value.trim());
505
+ }
506
+ emitInteraction(chip) {
507
+ this.interact.emit(chip);
508
+ }
509
+ renderChip(chip) {
510
+ const chipType = this.type === 'filter' ? 'filter' : 'default';
511
+ const chipProps = this.getChipProps(chip, chipType);
512
+ return index.h("limel-chip", Object.assign({}, chipProps));
513
+ }
514
+ renderInputChip(chip, index$1) {
515
+ const chipProps = this.getChipProps(chip, 'default');
516
+ return [
517
+ index.h("limel-chip", Object.assign({ key: chip.id, class: {
518
+ 'can-be-removed': this.inputChipIndexSelected === index$1,
519
+ } }, chipProps)),
520
+ this.renderDelimiter(),
521
+ ];
522
+ }
523
+ getChipProps(chip, chipType) {
524
+ const removable = this.type === 'input' && chip.removable;
525
+ return Object.assign({ role: 'row', identifier: chip.id, text: chip.text, icon: chip.icon, badge: chip.badge, selected: chip.selected, disabled: this.disabled, readonly: this.readonly, type: chipType, removable: removable, onClick: this.catchInputChipClicks(chip), onRemove: this.handleRemoveChip }, (chip.href && {
526
+ link: {
527
+ href: linkHelper.getHref(chip.href),
528
+ target: linkHelper.getTarget(chip.href),
529
+ },
530
+ }));
531
+ }
532
+ isSelectableChip(chip) {
533
+ return this.type !== 'input' && 'selected' in chip;
534
+ }
535
+ updateSelectedChipIds(chip) {
536
+ chip.selected = !chip.selected;
537
+ const id = chip.id;
538
+ if (this.type === 'choice') {
539
+ this.updateChoiceTypeSelectedIds(id);
540
+ }
541
+ else {
542
+ this.updateFilterTypeSelectedIds(id);
543
+ }
544
+ }
545
+ updateChoiceTypeSelectedIds(id) {
546
+ this.selectedChipIds = this.isChipSelected(id) ? [] : [id];
547
+ }
548
+ isChipSelected(id) {
549
+ return !!this.selectedChipIds.find((chipId) => chipId === id);
550
+ }
551
+ updateFilterTypeSelectedIds(id) {
552
+ if (this.isChipSelected(id)) {
553
+ this.removeChipIdFromSelectedChipIds(id);
554
+ }
555
+ else {
556
+ this.addChipIdToSelectedChipIds(id);
557
+ }
558
+ }
559
+ removeChipIdFromSelectedChipIds(id) {
560
+ this.selectedChipIds = this.selectedChipIds.filter((chipId) => chipId !== id);
561
+ }
562
+ addChipIdToSelectedChipIds(id) {
563
+ this.selectedChipIds = [...this.selectedChipIds, id];
564
+ }
565
+ renderLeadingIcon() {
566
+ if (!this.leadingIcon) {
567
+ return;
568
+ }
569
+ return (index.h("i", { class: "mdc-text-field__icon search-icon" }, index.h("limel-icon", { name: this.leadingIcon })));
570
+ }
571
+ renderClearAllChipsButton() {
572
+ if (this.disabled || this.readonly || !this.clearAllButton) {
573
+ return;
574
+ }
575
+ return (index.h("a", { href: "", onClick: this.handleDeleteAllIconClick, class: "mdc-text-field__icon clear-all-button", tabindex: "0", role: "button", title: this.clearAllChipsLabel(), "aria-label": this.clearAllChipsLabel() }));
576
+ }
577
+ handleDeleteAllIconClick(event) {
578
+ event.preventDefault();
579
+ this.change.emit([]);
580
+ }
581
+ renderDelimiter() {
582
+ if (!this.delimiter) {
583
+ return;
584
+ }
585
+ return index.h("div", { class: "delimiter" }, this.delimiter);
586
+ }
587
+ triggerIconColorWarning(value) {
588
+ for (const chip of value) {
589
+ if (chip.icon &&
590
+ (chip.iconFillColor ||
591
+ chip.iconBackgroundColor ||
592
+ chip.iconTitle)) {
593
+ /* eslint-disable-next-line no-console */
594
+ 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' }`.");
595
+ }
596
+ }
597
+ }
598
+ get host() { return index.getElement(this); }
599
+ static get watchers() { return {
600
+ "value": ["handleChangeChips"]
601
+ }; }
602
+ };
603
+ ChipSet.style = chipSetCss;
604
+
605
+ exports.limel_chip = Chip;
606
+ exports.limel_chip_set = ChipSet;
607
+
608
+ //# sourceMappingURL=limel-chip_2.cjs.entry.js.map