@limetech/lime-elements 37.1.0-next.65 → 37.1.0-next.67
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.
- package/dist/cjs/{component-9c3fa668.js → component-66df95e7.js} +935 -12
- package/dist/cjs/component-66df95e7.js.map +1 -0
- package/dist/cjs/index.es-75b5e7c4.js +222 -0
- package/dist/cjs/index.es-75b5e7c4.js.map +1 -0
- package/dist/cjs/lime-elements.cjs.js +1 -1
- package/dist/cjs/limel-breadcrumbs_3.cjs.entry.js +190 -35
- package/dist/cjs/limel-breadcrumbs_3.cjs.entry.js.map +1 -1
- package/dist/cjs/{limel-list.cjs.entry.js → limel-input-field_3.cjs.entry.js} +820 -4
- package/dist/cjs/limel-input-field_3.cjs.entry.js.map +1 -0
- package/dist/cjs/limel-picker.cjs.entry.js +2 -218
- package/dist/cjs/limel-picker.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/menu/menu.js +242 -21
- package/dist/collection/components/menu/menu.js.map +1 -1
- package/dist/collection/components/menu/menu.types.js.map +1 -1
- package/dist/collection/components/menu-list/menu-list-renderer.js +3 -1
- package/dist/collection/components/menu-list/menu-list-renderer.js.map +1 -1
- package/dist/esm/{component-0be247ac.js → component-fffa3419.js} +934 -13
- package/dist/esm/component-fffa3419.js.map +1 -0
- package/dist/esm/index.es-61c13ecf.js +220 -0
- package/dist/esm/index.es-61c13ecf.js.map +1 -0
- package/dist/esm/lime-elements.js +1 -1
- package/dist/esm/limel-breadcrumbs_3.entry.js +180 -25
- package/dist/esm/limel-breadcrumbs_3.entry.js.map +1 -1
- package/dist/esm/{limel-list.entry.js → limel-input-field_3.entry.js} +818 -4
- package/dist/esm/limel-input-field_3.entry.js.map +1 -0
- package/dist/esm/limel-picker.entry.js +1 -217
- package/dist/esm/limel-picker.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/lime-elements.esm.js.map +1 -1
- package/dist/lime-elements/p-78a442a0.entry.js +2 -0
- package/dist/lime-elements/p-78a442a0.entry.js.map +1 -0
- package/dist/lime-elements/p-97107e34.js +16 -0
- package/dist/lime-elements/p-97107e34.js.map +1 -0
- package/dist/lime-elements/p-ade5366a.entry.js +82 -0
- package/dist/lime-elements/p-ade5366a.entry.js.map +1 -0
- package/dist/lime-elements/p-dfba92de.js +206 -0
- package/dist/lime-elements/p-dfba92de.js.map +1 -0
- package/dist/lime-elements/p-dfc927a3.entry.js +2 -0
- package/dist/lime-elements/p-dfc927a3.entry.js.map +1 -0
- package/dist/types/components/menu/menu.d.ts +41 -7
- package/dist/types/components/menu/menu.types.d.ts +14 -3
- package/dist/types/components.d.ts +34 -2
- package/package.json +1 -1
- package/dist/cjs/component-9c3fa668.js.map +0 -1
- package/dist/cjs/component-a0124759.js +0 -929
- package/dist/cjs/component-a0124759.js.map +0 -1
- package/dist/cjs/limel-input-field.cjs.entry.js +0 -707
- package/dist/cjs/limel-input-field.cjs.entry.js.map +0 -1
- package/dist/cjs/limel-list.cjs.entry.js.map +0 -1
- package/dist/cjs/limel-menu-surface.cjs.entry.js +0 -130
- package/dist/cjs/limel-menu-surface.cjs.entry.js.map +0 -1
- package/dist/esm/component-0be247ac.js.map +0 -1
- package/dist/esm/component-6d079abe.js +0 -926
- package/dist/esm/component-6d079abe.js.map +0 -1
- package/dist/esm/limel-input-field.entry.js +0 -703
- package/dist/esm/limel-input-field.entry.js.map +0 -1
- package/dist/esm/limel-list.entry.js.map +0 -1
- package/dist/esm/limel-menu-surface.entry.js +0 -126
- package/dist/esm/limel-menu-surface.entry.js.map +0 -1
- package/dist/lime-elements/p-32ff1b76.entry.js +0 -2
- package/dist/lime-elements/p-32ff1b76.entry.js.map +0 -1
- package/dist/lime-elements/p-3efb6ac5.entry.js +0 -2
- package/dist/lime-elements/p-3efb6ac5.entry.js.map +0 -1
- package/dist/lime-elements/p-5dd6d677.js +0 -82
- package/dist/lime-elements/p-5dd6d677.js.map +0 -1
- package/dist/lime-elements/p-958a0086.entry.js +0 -82
- package/dist/lime-elements/p-958a0086.entry.js.map +0 -1
- package/dist/lime-elements/p-99b26036.entry.js +0 -2
- package/dist/lime-elements/p-99b26036.entry.js.map +0 -1
- package/dist/lime-elements/p-bbf317b8.entry.js +0 -16
- package/dist/lime-elements/p-bbf317b8.entry.js.map +0 -1
- package/dist/lime-elements/p-e3b16b61.js +0 -126
- package/dist/lime-elements/p-e3b16b61.js.map +0 -1
|
@@ -1,10 +1,708 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { a as
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-232e9616.js';
|
|
2
|
+
import { b as TAB_KEY_CODE, T as TAB, A as ARROW_UP, e as ARROW_UP_KEY_CODE, f as ARROW_DOWN, g as ARROW_DOWN_KEY_CODE, E as ESCAPE, a as ENTER, c as ESCAPE_KEY_CODE, d as ENTER_KEY_CODE, S as SPACE, h as SPACE_KEY_CODE } from './keycodes-44c01beb.js';
|
|
3
|
+
import { g as getHref, a as getTarget } from './link-helper-b08fe56c.js';
|
|
4
|
+
import { c as createRandomString } from './random-string-812b1c35.js';
|
|
5
|
+
import { c as config } from './config-b9522455.js';
|
|
6
|
+
import { M as MDCTextField } from './component-288691f3.js';
|
|
7
|
+
import { r as root, i as isObject } from './isObject-c74e273c.js';
|
|
8
|
+
import { t as toNumber } from './toNumber-a6ed64f0.js';
|
|
9
|
+
import { d as MDCList, s as strings, b as MDCMenuSurface, C as Corner } from './component-fffa3419.js';
|
|
3
10
|
import { C as CheckboxTemplate } from './checkbox.template-c2d0fa10.js';
|
|
4
11
|
import { g as getIconName, a as getIconColor } from './get-icon-props-02ab4784.js';
|
|
12
|
+
import { i as isDescendant } from './dom-2fe617e7.js';
|
|
5
13
|
import './component-410aad5a.js';
|
|
14
|
+
import './component-5b4ac85a.js';
|
|
6
15
|
import './ponyfill-30263d5e.js';
|
|
16
|
+
import './component-19eb6e2b.js';
|
|
17
|
+
import './isSymbol-5bf20921.js';
|
|
18
|
+
import './isObjectLike-38996507.js';
|
|
7
19
|
import './keyboard-4b9e12e3.js';
|
|
20
|
+
import './util-f1bde91c.js';
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* Gets the timestamp of the number of milliseconds that have elapsed since
|
|
24
|
+
* the Unix epoch (1 January 1970 00:00:00 UTC).
|
|
25
|
+
*
|
|
26
|
+
* @static
|
|
27
|
+
* @memberOf _
|
|
28
|
+
* @since 2.4.0
|
|
29
|
+
* @category Date
|
|
30
|
+
* @returns {number} Returns the timestamp.
|
|
31
|
+
* @example
|
|
32
|
+
*
|
|
33
|
+
* _.defer(function(stamp) {
|
|
34
|
+
* console.log(_.now() - stamp);
|
|
35
|
+
* }, _.now());
|
|
36
|
+
* // => Logs the number of milliseconds it took for the deferred invocation.
|
|
37
|
+
*/
|
|
38
|
+
var now = function() {
|
|
39
|
+
return root.Date.now();
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
/** Error message constants. */
|
|
43
|
+
var FUNC_ERROR_TEXT = 'Expected a function';
|
|
44
|
+
|
|
45
|
+
/* Built-in method references for those with the same name as other `lodash` methods. */
|
|
46
|
+
var nativeMax = Math.max,
|
|
47
|
+
nativeMin = Math.min;
|
|
48
|
+
|
|
49
|
+
/**
|
|
50
|
+
* Creates a debounced function that delays invoking `func` until after `wait`
|
|
51
|
+
* milliseconds have elapsed since the last time the debounced function was
|
|
52
|
+
* invoked. The debounced function comes with a `cancel` method to cancel
|
|
53
|
+
* delayed `func` invocations and a `flush` method to immediately invoke them.
|
|
54
|
+
* Provide `options` to indicate whether `func` should be invoked on the
|
|
55
|
+
* leading and/or trailing edge of the `wait` timeout. The `func` is invoked
|
|
56
|
+
* with the last arguments provided to the debounced function. Subsequent
|
|
57
|
+
* calls to the debounced function return the result of the last `func`
|
|
58
|
+
* invocation.
|
|
59
|
+
*
|
|
60
|
+
* **Note:** If `leading` and `trailing` options are `true`, `func` is
|
|
61
|
+
* invoked on the trailing edge of the timeout only if the debounced function
|
|
62
|
+
* is invoked more than once during the `wait` timeout.
|
|
63
|
+
*
|
|
64
|
+
* If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
|
|
65
|
+
* until to the next tick, similar to `setTimeout` with a timeout of `0`.
|
|
66
|
+
*
|
|
67
|
+
* See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
|
|
68
|
+
* for details over the differences between `_.debounce` and `_.throttle`.
|
|
69
|
+
*
|
|
70
|
+
* @static
|
|
71
|
+
* @memberOf _
|
|
72
|
+
* @since 0.1.0
|
|
73
|
+
* @category Function
|
|
74
|
+
* @param {Function} func The function to debounce.
|
|
75
|
+
* @param {number} [wait=0] The number of milliseconds to delay.
|
|
76
|
+
* @param {Object} [options={}] The options object.
|
|
77
|
+
* @param {boolean} [options.leading=false]
|
|
78
|
+
* Specify invoking on the leading edge of the timeout.
|
|
79
|
+
* @param {number} [options.maxWait]
|
|
80
|
+
* The maximum time `func` is allowed to be delayed before it's invoked.
|
|
81
|
+
* @param {boolean} [options.trailing=true]
|
|
82
|
+
* Specify invoking on the trailing edge of the timeout.
|
|
83
|
+
* @returns {Function} Returns the new debounced function.
|
|
84
|
+
* @example
|
|
85
|
+
*
|
|
86
|
+
* // Avoid costly calculations while the window size is in flux.
|
|
87
|
+
* jQuery(window).on('resize', _.debounce(calculateLayout, 150));
|
|
88
|
+
*
|
|
89
|
+
* // Invoke `sendMail` when clicked, debouncing subsequent calls.
|
|
90
|
+
* jQuery(element).on('click', _.debounce(sendMail, 300, {
|
|
91
|
+
* 'leading': true,
|
|
92
|
+
* 'trailing': false
|
|
93
|
+
* }));
|
|
94
|
+
*
|
|
95
|
+
* // Ensure `batchLog` is invoked once after 1 second of debounced calls.
|
|
96
|
+
* var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
|
|
97
|
+
* var source = new EventSource('/stream');
|
|
98
|
+
* jQuery(source).on('message', debounced);
|
|
99
|
+
*
|
|
100
|
+
* // Cancel the trailing debounced invocation.
|
|
101
|
+
* jQuery(window).on('popstate', debounced.cancel);
|
|
102
|
+
*/
|
|
103
|
+
function debounce(func, wait, options) {
|
|
104
|
+
var lastArgs,
|
|
105
|
+
lastThis,
|
|
106
|
+
maxWait,
|
|
107
|
+
result,
|
|
108
|
+
timerId,
|
|
109
|
+
lastCallTime,
|
|
110
|
+
lastInvokeTime = 0,
|
|
111
|
+
leading = false,
|
|
112
|
+
maxing = false,
|
|
113
|
+
trailing = true;
|
|
114
|
+
|
|
115
|
+
if (typeof func != 'function') {
|
|
116
|
+
throw new TypeError(FUNC_ERROR_TEXT);
|
|
117
|
+
}
|
|
118
|
+
wait = toNumber(wait) || 0;
|
|
119
|
+
if (isObject(options)) {
|
|
120
|
+
leading = !!options.leading;
|
|
121
|
+
maxing = 'maxWait' in options;
|
|
122
|
+
maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
|
|
123
|
+
trailing = 'trailing' in options ? !!options.trailing : trailing;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
function invokeFunc(time) {
|
|
127
|
+
var args = lastArgs,
|
|
128
|
+
thisArg = lastThis;
|
|
129
|
+
|
|
130
|
+
lastArgs = lastThis = undefined;
|
|
131
|
+
lastInvokeTime = time;
|
|
132
|
+
result = func.apply(thisArg, args);
|
|
133
|
+
return result;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
function leadingEdge(time) {
|
|
137
|
+
// Reset any `maxWait` timer.
|
|
138
|
+
lastInvokeTime = time;
|
|
139
|
+
// Start the timer for the trailing edge.
|
|
140
|
+
timerId = setTimeout(timerExpired, wait);
|
|
141
|
+
// Invoke the leading edge.
|
|
142
|
+
return leading ? invokeFunc(time) : result;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
function remainingWait(time) {
|
|
146
|
+
var timeSinceLastCall = time - lastCallTime,
|
|
147
|
+
timeSinceLastInvoke = time - lastInvokeTime,
|
|
148
|
+
timeWaiting = wait - timeSinceLastCall;
|
|
149
|
+
|
|
150
|
+
return maxing
|
|
151
|
+
? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke)
|
|
152
|
+
: timeWaiting;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
function shouldInvoke(time) {
|
|
156
|
+
var timeSinceLastCall = time - lastCallTime,
|
|
157
|
+
timeSinceLastInvoke = time - lastInvokeTime;
|
|
158
|
+
|
|
159
|
+
// Either this is the first call, activity has stopped and we're at the
|
|
160
|
+
// trailing edge, the system time has gone backwards and we're treating
|
|
161
|
+
// it as the trailing edge, or we've hit the `maxWait` limit.
|
|
162
|
+
return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
|
|
163
|
+
(timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
function timerExpired() {
|
|
167
|
+
var time = now();
|
|
168
|
+
if (shouldInvoke(time)) {
|
|
169
|
+
return trailingEdge(time);
|
|
170
|
+
}
|
|
171
|
+
// Restart the timer.
|
|
172
|
+
timerId = setTimeout(timerExpired, remainingWait(time));
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
function trailingEdge(time) {
|
|
176
|
+
timerId = undefined;
|
|
177
|
+
|
|
178
|
+
// Only invoke if we have `lastArgs` which means `func` has been
|
|
179
|
+
// debounced at least once.
|
|
180
|
+
if (trailing && lastArgs) {
|
|
181
|
+
return invokeFunc(time);
|
|
182
|
+
}
|
|
183
|
+
lastArgs = lastThis = undefined;
|
|
184
|
+
return result;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
function cancel() {
|
|
188
|
+
if (timerId !== undefined) {
|
|
189
|
+
clearTimeout(timerId);
|
|
190
|
+
}
|
|
191
|
+
lastInvokeTime = 0;
|
|
192
|
+
lastArgs = lastCallTime = lastThis = timerId = undefined;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
function flush() {
|
|
196
|
+
return timerId === undefined ? result : trailingEdge(now());
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
function debounced() {
|
|
200
|
+
var time = now(),
|
|
201
|
+
isInvoking = shouldInvoke(time);
|
|
202
|
+
|
|
203
|
+
lastArgs = arguments;
|
|
204
|
+
lastThis = this;
|
|
205
|
+
lastCallTime = time;
|
|
206
|
+
|
|
207
|
+
if (isInvoking) {
|
|
208
|
+
if (timerId === undefined) {
|
|
209
|
+
return leadingEdge(lastCallTime);
|
|
210
|
+
}
|
|
211
|
+
if (maxing) {
|
|
212
|
+
// Handle invocations in a tight loop.
|
|
213
|
+
clearTimeout(timerId);
|
|
214
|
+
timerId = setTimeout(timerExpired, wait);
|
|
215
|
+
return invokeFunc(lastCallTime);
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
if (timerId === undefined) {
|
|
219
|
+
timerId = setTimeout(timerExpired, wait);
|
|
220
|
+
}
|
|
221
|
+
return result;
|
|
222
|
+
}
|
|
223
|
+
debounced.cancel = cancel;
|
|
224
|
+
debounced.flush = flush;
|
|
225
|
+
return debounced;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
const inputFieldCss = ":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:Roboto, sans-serif;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));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)}}:host{position:relative;display:block}:host([hidden]){display:none}:host([type=textarea]){height:var(--textarea-height, 100%)}:host([type=textarea]) .mdc-text-field.mdc-text-field--textarea{height:var(--textarea-height, 100%)}:host([type=textarea]) .mdc-text-field.mdc-text-field--textarea .mdc-text-field__input{margin-top:0.5rem;margin-bottom:0}:host(limel-input-field:focus),:host(limel-input-field:focus-visible),:host(limel-input-field:focus-within),:host(limel-input-field[invalid]:not([invalid=false])),:host(limel-input-field[invalid=true]){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-input-field){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-input-field:focus) limel-helper-line,:host(limel-input-field:focus-visible) limel-helper-line,:host(limel-input-field:focus-within) limel-helper-line,:host(limel-input-field:hover) limel-helper-line{will-change:grid-template-rows}@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,.mdc-text-field:not(.mdc-text-field--disabled) a.lime-trailing-icon-for-link{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:Roboto, sans-serif;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));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:Roboto, sans-serif;font-family:var(--mdc-typography-subtitle1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));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{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{border-bottom-color:#b00020;border-bottom-color:var(--mdc-theme-error, #b00020)}.mdc-text-field--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{color:#b00020;color:var(--mdc-theme-error, #b00020)}.mdc-text-field--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,.mdc-text-field--invalid:not(.mdc-text-field--disabled) a.lime-trailing-icon-for-link{color:#b00020;color:var(--mdc-theme-error, #b00020)}.mdc-text-field--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,.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,.mdc-text-field--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,.mdc-text-field--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{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,.mdc-text-field--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{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{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,.mdc-text-field--disabled a.lime-trailing-icon-for-link{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,.mdc-text-field--disabled a.lime-trailing-icon-for-link{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,[dir=rtl] .mdc-text-field--ltr-text a.lime-trailing-icon-for-link,.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__icon--trailing,.mdc-text-field--ltr-text[dir=rtl] a.lime-trailing-icon-for-link{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:Roboto, sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));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:Roboto, sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));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,a.lime-trailing-icon-for-link{padding:12px;margin-left:0px;margin-right:0px}[dir=rtl] .mdc-text-field__icon--trailing,[dir=rtl] a.lime-trailing-icon-for-link,.mdc-text-field__icon--trailing[dir=rtl],a[dir=rtl].lime-trailing-icon-for-link{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,a.lime-trailing-icon-for-link{padding:12px;margin-left:0px;margin-right:0px}[dir=rtl] .mdc-text-field__icon--trailing,[dir=rtl] a.lime-trailing-icon-for-link,.mdc-text-field__icon--trailing[dir=rtl],a[dir=rtl].lime-trailing-icon-for-link{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) .mdc-notched-outline__leading,.mdc-text-field.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--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) .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(.mdc-text-field--focused):not(.mdc-text-field--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(.mdc-text-field--focused):not(.mdc-text-field--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(.mdc-text-field--focused):not(.mdc-text-field--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).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).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).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.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{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.mdc-text-field--invalid a.lime-trailing-icon-for-link{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,.mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly.mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link{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,.mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly.mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link 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,.mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly.mdc-text-field--with-trailing-icon:hover a.lime-trailing-icon-for-link: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,.mdc-text-field.mdc-text-field--disabled.lime-text-field--readonly.mdc-text-field--with-trailing-icon:hover a.lime-trailing-icon-for-link:active{box-shadow:var(--button-shadow-pressed)}.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__icon{color:rgb(var(--contrast-900));width:1.5rem;height:1.5rem}.mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing,.mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link{transition:background-color 0.2s ease, box-shadow 0.3s ease;border-radius:50%;padding:0.5rem}.mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing:focus,.mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link:focus{outline:none}.mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing:focus-visible,.mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link:focus-visible{box-shadow:0 0 0 0.125rem var(--mdc-theme-primary) !important}.mdc-text-field--with-trailing-icon:hover .mdc-text-field__icon--trailing,.mdc-text-field--with-trailing-icon:hover a.lime-trailing-icon-for-link{box-shadow:var(--button-shadow-normal);background-color:rgba(var(--contrast-100), 0.4)}.mdc-text-field--with-trailing-icon:hover .mdc-text-field__icon--trailing:hover,.mdc-text-field--with-trailing-icon:hover a.lime-trailing-icon-for-link:hover{background-color:rgb(var(--contrast-100));box-shadow:var(--button-shadow-hovered)}.mdc-text-field--with-trailing-icon:hover .mdc-text-field__icon--trailing:active,.mdc-text-field--with-trailing-icon:hover a.lime-trailing-icon-for-link:active{box-shadow:var(--button-shadow-pressed)}.mdc-text-field--with-trailing-icon.mdc-text-field--disabled:hover .mdc-text-field__icon--trailing,.mdc-text-field--with-trailing-icon.mdc-text-field--disabled:hover a.lime-trailing-icon-for-link,.mdc-text-field--with-trailing-icon.mdc-text-field--invalid:hover .mdc-text-field__icon--trailing,.mdc-text-field--with-trailing-icon.mdc-text-field--invalid:hover a.lime-trailing-icon-for-link{box-shadow:none;background-color:transparent}.mdc-text-field--with-trailing-icon.mdc-text-field--disabled:hover .mdc-text-field__icon--trailing:hover,.mdc-text-field--with-trailing-icon.mdc-text-field--disabled:hover a.lime-trailing-icon-for-link:hover,.mdc-text-field--with-trailing-icon.mdc-text-field--invalid:hover .mdc-text-field__icon--trailing:hover,.mdc-text-field--with-trailing-icon.mdc-text-field--invalid:hover a.lime-trailing-icon-for-link:hover{background-color:transparent;box-shadow:none}.mdc-text-field--with-trailing-icon.mdc-text-field--disabled:hover .mdc-text-field__icon--trailing:active,.mdc-text-field--with-trailing-icon.mdc-text-field--disabled:hover a.lime-trailing-icon-for-link:active,.mdc-text-field--with-trailing-icon.mdc-text-field--invalid:hover .mdc-text-field__icon--trailing:active,.mdc-text-field--with-trailing-icon.mdc-text-field--invalid:hover a.lime-trailing-icon-for-link:active{box-shadow:none}.mdc-text-field--with-trailing-icon.mdc-text-field--invalid i.mdc-text-field__icon.mdc-text-field__icon--trailing limel-icon{color:var(--lime-error-text-color)}.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)}.lime-empty-value-for-readonly{z-index:1;position:absolute;top:0.875rem;left:1rem}.lime-looks-like-input-value{font-family:Roboto, sans-serif;line-height:1.75rem;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:rgba(var(--contrast-1400), 1);font-size:0.875rem;font-weight:400;letter-spacing:0.009375em}.mdc-text-field--disabled .lime-looks-like-input-value{cursor:not-allowed;pointer-events:none;opacity:0.4}.mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing,.mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link{margin-right:0.5rem}.lime-text-field--empty .mdc-text-field__icon--trailing,.lime-text-field--empty a.lime-trailing-icon-for-link{cursor:not-allowed;pointer-events:none;opacity:0.4;box-shadow:none !important}.mdc-text-field{width:100%}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__affix,.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon{color:rgb(var(--contrast-900))}.mdc-text-field.mdc-text-field--disabled .mdc-text-field__affix,.mdc-text-field.mdc-text-field--disabled .mdc-text-field__icon{color:rgb(var(--contrast-700))}.lime-formatted-input{display:none;width:calc(100% - 1.25rem);z-index:1;pointer-events:none}:not(.mdc-text-field--focused):not(.mdc-text-field--invalid) .lime-formatted-input{display:block}.lime-formatted-input+.mdc-text-field__input{z-index:2}:not(.mdc-text-field--focused):not(.mdc-text-field--invalid) .mdc-text-field__input[type=number]{color:transparent;-webkit-text-fill-color:transparent}:not(.mdc-text-field--focused):not(.mdc-text-field--invalid).lime-text-field--readonly .mdc-text-field__input[type=number]{visibility:hidden}.autocomplete-list-container{position:relative}.autocomplete-list{background-color:var(--lime-elevated-surface-background-color);position:absolute;top:0;left:0;right:0;max-height:12.5rem;overflow-y:auto}.mdc-deprecated-list-item{cursor:pointer}input.mdc-text-field__input::placeholder{color:rgb(var(--contrast-900)) !important}input.mdc-text-field__input::-webkit-search-cancel-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>\");-webkit-appearance:none;position:absolute;right:0;top:0;bottom:0;margin:auto}input.mdc-text-field__input::-webkit-search-cancel-button:hover{color:var(--mdc-theme-on-surface);background-color:rgb(var(--contrast-1100));box-shadow:var(--button-shadow-hovered)}input.mdc-text-field__input::-webkit-search-cancel-button:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}input.mdc-text-field__input::-webkit-search-cancel-button:active{transform:none}.mdc-text-field--label-floating input.mdc-text-field__input::-webkit-search-cancel-button{opacity:1}:host([type=url]) .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing limel-icon,:host([type=url]) .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link limel-icon,:host([type=urlAsText]) .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing limel-icon,:host([type=urlAsText]) .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link limel-icon{color:rgb(var(--color-blue-default))}:host([type=url]) .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing:hover,:host([type=url]) .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link:hover,:host([type=urlAsText]) .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing:hover,:host([type=urlAsText]) .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link:hover{background-color:rgb(var(--color-blue-default))}:host([type=url]) .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing:hover limel-icon,:host([type=url]) .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link:hover limel-icon,:host([type=urlAsText]) .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing:hover limel-icon,:host([type=urlAsText]) .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link:hover limel-icon{color:rgb(var(--color-white))}:host([type=tel]) .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing limel-icon,:host([type=tel]) .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link limel-icon{color:rgb(var(--color-green-default))}:host([type=tel]) .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing:hover,:host([type=tel]) .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link:hover{background-color:rgb(var(--color-green-default))}:host([type=tel]) .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing:hover limel-icon,:host([type=tel]) .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link:hover limel-icon{color:rgb(var(--color-white))}:host([type=url]) .mdc-text-field.lime-text-field--readonly:hover .lime-looks-like-input-value,:host([type=url]) .mdc-text-field.lime-text-field--readonly:hover .mdc-text-field__input,:host([type=urlAsText]) .mdc-text-field.lime-text-field--readonly:hover .lime-looks-like-input-value,:host([type=urlAsText]) .mdc-text-field.lime-text-field--readonly:hover .mdc-text-field__input,:host([type=tel]) .mdc-text-field.lime-text-field--readonly:hover .lime-looks-like-input-value,:host([type=tel]) .mdc-text-field.lime-text-field--readonly:hover .mdc-text-field__input{color:rgb(var(--color-white))}:host([type=url]) .mdc-text-field.lime-text-field--readonly:hover .mdc-text-field__input,:host([type=urlAsText]) .mdc-text-field.lime-text-field--readonly:hover .mdc-text-field__input,:host([type=tel]) .mdc-text-field.lime-text-field--readonly:hover .mdc-text-field__input{z-index:1}:host([type=url]) .mdc-text-field.lime-text-field--readonly .mdc-text-field__input,:host([type=email]) .mdc-text-field.lime-text-field--readonly .mdc-text-field__input,:host([type=urlAsText]) .mdc-text-field.lime-text-field--readonly .mdc-text-field__input,:host([type=tel]) .mdc-text-field.lime-text-field--readonly .mdc-text-field__input{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:calc(100% - 2.75rem)}:host([type=textarea]) .mdc-text-field.lime-text-field--readonly .mdc-text-field__resizer{pointer-events:all}";
|
|
229
|
+
|
|
230
|
+
const InputField = class {
|
|
231
|
+
constructor(hostRef) {
|
|
232
|
+
registerInstance(this, hostRef);
|
|
233
|
+
this.change = createEvent(this, "change", 7);
|
|
234
|
+
this.action = createEvent(this, "action", 7);
|
|
235
|
+
this.completionsList = [];
|
|
236
|
+
this.initialize = () => {
|
|
237
|
+
const element = this.limelInputField.shadowRoot.querySelector('.mdc-text-field');
|
|
238
|
+
if (!element) {
|
|
239
|
+
return;
|
|
240
|
+
}
|
|
241
|
+
this.mdcTextField = new MDCTextField(element);
|
|
242
|
+
this.mapCompletions();
|
|
243
|
+
window.addEventListener('resize', this.layout, { passive: true });
|
|
244
|
+
this.limelInputField.addEventListener('focus', this.setFocus);
|
|
245
|
+
};
|
|
246
|
+
this.mapCompletions = () => {
|
|
247
|
+
this.completionsList = [...this.completions].map((item) => {
|
|
248
|
+
return { text: item };
|
|
249
|
+
});
|
|
250
|
+
};
|
|
251
|
+
this.setFocus = () => {
|
|
252
|
+
this.mdcTextField.focus();
|
|
253
|
+
};
|
|
254
|
+
this.getContainerClassList = () => {
|
|
255
|
+
const classList = {
|
|
256
|
+
'mdc-text-field': true,
|
|
257
|
+
'mdc-text-field--no-label': !this.label,
|
|
258
|
+
'mdc-text-field--outlined': true,
|
|
259
|
+
'mdc-text-field--invalid': this.isInvalid(),
|
|
260
|
+
'mdc-text-field--disabled': this.disabled || this.readonly,
|
|
261
|
+
'lime-text-field--readonly': this.readonly,
|
|
262
|
+
'mdc-text-field--required': this.required,
|
|
263
|
+
'lime-text-field--empty': !this.value,
|
|
264
|
+
'lime-has-prefix': this.hasPrefix(),
|
|
265
|
+
'lime-has-suffix': this.hasSuffix(),
|
|
266
|
+
};
|
|
267
|
+
if (this.type === 'textarea') {
|
|
268
|
+
classList['mdc-text-field--textarea'] = true;
|
|
269
|
+
classList['has-helper-line'] =
|
|
270
|
+
!!this.helperText || !!this.maxlength;
|
|
271
|
+
}
|
|
272
|
+
else {
|
|
273
|
+
classList['mdc-text-field--with-leading-icon'] = !!this.leadingIcon;
|
|
274
|
+
classList['mdc-text-field--with-trailing-icon'] =
|
|
275
|
+
!!this.getTrailingIcon();
|
|
276
|
+
}
|
|
277
|
+
return classList;
|
|
278
|
+
};
|
|
279
|
+
this.renderInput = (properties) => {
|
|
280
|
+
if (this.type === 'textarea') {
|
|
281
|
+
return;
|
|
282
|
+
}
|
|
283
|
+
const type = this.type === 'urlAsText' ? 'text' : this.type;
|
|
284
|
+
return (h("input", Object.assign({}, properties, { type: type, pattern: this.pattern, onWheel: this.handleWheel, onKeyDown: this.onKeyDown, value: this.value, placeholder: this.placeholder })));
|
|
285
|
+
};
|
|
286
|
+
this.renderTextarea = (properties) => {
|
|
287
|
+
if (this.type !== 'textarea') {
|
|
288
|
+
return;
|
|
289
|
+
}
|
|
290
|
+
return (h("span", { class: "mdc-text-field__resizer" }, h("textarea", Object.assign({}, properties, { placeholder: this.placeholder }), this.value)));
|
|
291
|
+
};
|
|
292
|
+
this.layout = () => {
|
|
293
|
+
var _a;
|
|
294
|
+
(_a = this.mdcTextField) === null || _a === void 0 ? void 0 : _a.layout();
|
|
295
|
+
};
|
|
296
|
+
this.getAdditionalProps = () => {
|
|
297
|
+
const props = {};
|
|
298
|
+
if (this.type === 'number') {
|
|
299
|
+
props.step = this.step;
|
|
300
|
+
}
|
|
301
|
+
if (this.type === 'number' && Number.isInteger(this.min)) {
|
|
302
|
+
props.min = this.min;
|
|
303
|
+
}
|
|
304
|
+
if (this.type === 'number' && Number.isInteger(this.max)) {
|
|
305
|
+
props.max = this.max;
|
|
306
|
+
}
|
|
307
|
+
if (this.minlength) {
|
|
308
|
+
props.minlength = this.minlength;
|
|
309
|
+
}
|
|
310
|
+
if (this.maxlength) {
|
|
311
|
+
props.maxlength = this.maxlength;
|
|
312
|
+
}
|
|
313
|
+
return props;
|
|
314
|
+
};
|
|
315
|
+
this.onFocus = () => {
|
|
316
|
+
this.isFocused = true;
|
|
317
|
+
this.showCompletions = true;
|
|
318
|
+
};
|
|
319
|
+
this.onBlur = () => {
|
|
320
|
+
this.isFocused = false;
|
|
321
|
+
this.isModified = true;
|
|
322
|
+
};
|
|
323
|
+
this.hasHelperText = () => {
|
|
324
|
+
return this.helperText !== null && this.helperText !== undefined;
|
|
325
|
+
};
|
|
326
|
+
this.hasHelperLine = () => {
|
|
327
|
+
return this.maxlength || this.hasHelperText();
|
|
328
|
+
};
|
|
329
|
+
this.renderHelperLine = () => {
|
|
330
|
+
const text = this.value || '';
|
|
331
|
+
const length = text.length;
|
|
332
|
+
if (!this.hasHelperLine()) {
|
|
333
|
+
return;
|
|
334
|
+
}
|
|
335
|
+
return (h("limel-helper-line", { helperTextId: this.helperTextId, helperText: this.helperText, length: length, maxLength: this.maxlength, invalid: this.isInvalid() }));
|
|
336
|
+
};
|
|
337
|
+
this.renderEmptyValueForReadonly = () => {
|
|
338
|
+
if (this.readonly && !this.value) {
|
|
339
|
+
return (h("span", { class: "lime-empty-value-for-readonly lime-looks-like-input-value" }, "\u2013"));
|
|
340
|
+
}
|
|
341
|
+
};
|
|
342
|
+
this.renderSuffix = () => {
|
|
343
|
+
if (!this.hasSuffix() || this.type === 'textarea') {
|
|
344
|
+
return;
|
|
345
|
+
}
|
|
346
|
+
const classList = {
|
|
347
|
+
'mdc-text-field__affix': true,
|
|
348
|
+
'mdc-text-field__affix--suffix': true,
|
|
349
|
+
};
|
|
350
|
+
return h("span", { class: classList }, this.suffix);
|
|
351
|
+
};
|
|
352
|
+
this.hasSuffix = () => {
|
|
353
|
+
return this.suffix !== null && this.suffix !== undefined;
|
|
354
|
+
};
|
|
355
|
+
this.renderPrefix = () => {
|
|
356
|
+
if (!this.hasPrefix() || this.type === 'textarea') {
|
|
357
|
+
return;
|
|
358
|
+
}
|
|
359
|
+
const classList = {
|
|
360
|
+
'mdc-text-field__affix': true,
|
|
361
|
+
'mdc-text-field__affix--prefix': true,
|
|
362
|
+
};
|
|
363
|
+
return h("span", { class: classList }, this.prefix);
|
|
364
|
+
};
|
|
365
|
+
this.hasPrefix = () => {
|
|
366
|
+
return this.prefix !== null && this.prefix !== undefined;
|
|
367
|
+
};
|
|
368
|
+
this.isInvalid = () => {
|
|
369
|
+
if (this.readonly) {
|
|
370
|
+
// A readonly field can never be invalid.
|
|
371
|
+
return false;
|
|
372
|
+
}
|
|
373
|
+
if (this.invalid) {
|
|
374
|
+
// `this.invalid` is set by the consumer. If the consumer explicitly
|
|
375
|
+
// told us to consider the field invalid, we consider it invalid
|
|
376
|
+
// regardless of what our internal validation thinks, and regardless
|
|
377
|
+
// of whether the field has been modified.
|
|
378
|
+
return true;
|
|
379
|
+
}
|
|
380
|
+
if (!this.isModified) {
|
|
381
|
+
return false;
|
|
382
|
+
}
|
|
383
|
+
const element = this.getInputElement();
|
|
384
|
+
return !(element && element.checkValidity());
|
|
385
|
+
};
|
|
386
|
+
this.getInputElement = () => {
|
|
387
|
+
let elementName = 'input';
|
|
388
|
+
if (this.type === 'textarea') {
|
|
389
|
+
elementName = 'textarea';
|
|
390
|
+
}
|
|
391
|
+
return this.limelInputField.shadowRoot.querySelector(elementName);
|
|
392
|
+
};
|
|
393
|
+
this.renderLabel = () => {
|
|
394
|
+
const labelClassList = {
|
|
395
|
+
'mdc-floating-label': true,
|
|
396
|
+
'mdc-floating-label--float-above': !!this.value || this.isFocused || this.readonly,
|
|
397
|
+
};
|
|
398
|
+
if (!this.label) {
|
|
399
|
+
return;
|
|
400
|
+
}
|
|
401
|
+
return (h("span", { class: "mdc-notched-outline__notch" }, h("span", { class: labelClassList, id: this.labelId }, this.label)));
|
|
402
|
+
};
|
|
403
|
+
this.renderLeadingIcon = () => {
|
|
404
|
+
if (this.type === 'textarea') {
|
|
405
|
+
return;
|
|
406
|
+
}
|
|
407
|
+
if (this.leadingIcon) {
|
|
408
|
+
return (h("i", { class: "material-icons mdc-text-field__icon mdc-text-field__icon--leading" }, h("limel-icon", { name: this.leadingIcon })));
|
|
409
|
+
}
|
|
410
|
+
};
|
|
411
|
+
this.renderTrailingLinkOrButton = () => {
|
|
412
|
+
if (this.type === 'textarea') {
|
|
413
|
+
return;
|
|
414
|
+
}
|
|
415
|
+
const html = [];
|
|
416
|
+
const trailingIcon = this.getTrailingIcon();
|
|
417
|
+
if (!this.isInvalid() && this.hasLink()) {
|
|
418
|
+
html.push(this.renderLinkIcon(this.getLink(), trailingIcon));
|
|
419
|
+
}
|
|
420
|
+
else if (trailingIcon) {
|
|
421
|
+
html.push(this.renderTrailingIcon(trailingIcon));
|
|
422
|
+
}
|
|
423
|
+
return html;
|
|
424
|
+
};
|
|
425
|
+
this.hasLink = () => {
|
|
426
|
+
return (this.showLink &&
|
|
427
|
+
['email', 'tel', 'url', 'urlAsText'].includes(this.type));
|
|
428
|
+
};
|
|
429
|
+
this.getLink = () => {
|
|
430
|
+
const props = { href: '' };
|
|
431
|
+
switch (this.type) {
|
|
432
|
+
case 'email':
|
|
433
|
+
props.href = `mailto:${this.value}`;
|
|
434
|
+
break;
|
|
435
|
+
case 'tel':
|
|
436
|
+
props.href = `tel:${this.value}`;
|
|
437
|
+
break;
|
|
438
|
+
default:
|
|
439
|
+
props.href = getHref(this.value);
|
|
440
|
+
props.target = getTarget(this.value);
|
|
441
|
+
}
|
|
442
|
+
return props;
|
|
443
|
+
};
|
|
444
|
+
this.renderLinkIcon = (linkProps, icon) => {
|
|
445
|
+
// If the trailing icon uses the class `mdc-text-field__icon--trailing`,
|
|
446
|
+
// MDC attaches a click handler to it, which apparently runs
|
|
447
|
+
// `preventDefault()` on the event. For links, we don't want that,
|
|
448
|
+
// so instead of `mdc-text-field__icon--trailing`, we use our own class
|
|
449
|
+
// `lime-trailing-icon-for-link`, which uses all the same styling. /Ads
|
|
450
|
+
return (h("a", Object.assign({}, linkProps, { class: "material-icons mdc-text-field__icon lime-trailing-icon-for-link", tabindex: this.disabled || !this.value ? '-1' : '0', role: "button" }), h("limel-icon", { name: icon })));
|
|
451
|
+
};
|
|
452
|
+
this.renderTrailingIcon = (icon) => {
|
|
453
|
+
const props = {
|
|
454
|
+
tabIndex: this.isInvalid() ? '-1' : '0',
|
|
455
|
+
};
|
|
456
|
+
if (!this.isInvalid()) {
|
|
457
|
+
props.onKeyPress = this.handleIconKeyPress;
|
|
458
|
+
props.onClick = this.handleIconClick;
|
|
459
|
+
props.role = 'button';
|
|
460
|
+
}
|
|
461
|
+
return (h("i", Object.assign({ class: "material-icons mdc-text-field__icon mdc-text-field__icon--trailing" }, props), h("limel-icon", { name: icon })));
|
|
462
|
+
};
|
|
463
|
+
this.getTrailingIcon = () => {
|
|
464
|
+
if (this.isInvalid()) {
|
|
465
|
+
return 'high_importance';
|
|
466
|
+
}
|
|
467
|
+
if (this.trailingIcon) {
|
|
468
|
+
return this.trailingIcon;
|
|
469
|
+
}
|
|
470
|
+
if (this.showLink && this.type === 'email') {
|
|
471
|
+
return 'filled_message';
|
|
472
|
+
}
|
|
473
|
+
if (this.showLink && this.type === 'tel') {
|
|
474
|
+
return 'phone';
|
|
475
|
+
}
|
|
476
|
+
if (this.showLink &&
|
|
477
|
+
(this.type === 'url' || this.type === 'urlAsText')) {
|
|
478
|
+
return 'external_link';
|
|
479
|
+
}
|
|
480
|
+
};
|
|
481
|
+
this.renderFormattedNumber = () => {
|
|
482
|
+
if (this.type !== 'number') {
|
|
483
|
+
return;
|
|
484
|
+
}
|
|
485
|
+
let renderValue = this.value;
|
|
486
|
+
if (this.formatNumber && this.value) {
|
|
487
|
+
renderValue = new Intl.NumberFormat(this.locale).format(Number(this.value));
|
|
488
|
+
}
|
|
489
|
+
return (h("span", { class: "lime-formatted-input lime-looks-like-input-value" }, renderValue));
|
|
490
|
+
};
|
|
491
|
+
/**
|
|
492
|
+
* Key handler for the input field
|
|
493
|
+
* Will change focus to the first/last item in the dropdown list to enable selection with the keyboard
|
|
494
|
+
* @param {KeyboardEvent} event event
|
|
495
|
+
* @returns {void}
|
|
496
|
+
*/
|
|
497
|
+
this.onKeyDown = (event) => {
|
|
498
|
+
this.showCompletions = true;
|
|
499
|
+
const isForwardTab = (event.key === TAB || event.keyCode === TAB_KEY_CODE) &&
|
|
500
|
+
!event.altKey &&
|
|
501
|
+
!event.metaKey &&
|
|
502
|
+
!event.shiftKey;
|
|
503
|
+
const isUp = event.key === ARROW_UP || event.keyCode === ARROW_UP_KEY_CODE;
|
|
504
|
+
const isDown = event.key === ARROW_DOWN || event.keyCode === ARROW_DOWN_KEY_CODE;
|
|
505
|
+
if (event.keyCode === TAB_KEY_CODE && event.shiftKey) {
|
|
506
|
+
this.showCompletions = false;
|
|
507
|
+
}
|
|
508
|
+
if (!isForwardTab && !isUp && !isDown) {
|
|
509
|
+
return;
|
|
510
|
+
}
|
|
511
|
+
const list = document.querySelector(` #${this.portalId} limel-list`);
|
|
512
|
+
if (!list) {
|
|
513
|
+
return;
|
|
514
|
+
}
|
|
515
|
+
event.preventDefault();
|
|
516
|
+
if (isForwardTab || isDown) {
|
|
517
|
+
const listElement = list.shadowRoot.querySelector('.mdc-deprecated-list-item:first-child');
|
|
518
|
+
listElement.focus();
|
|
519
|
+
return;
|
|
520
|
+
}
|
|
521
|
+
if (isUp) {
|
|
522
|
+
const listElement = list.shadowRoot.querySelector('.mdc-deprecated-list-item:last-child');
|
|
523
|
+
listElement.focus();
|
|
524
|
+
}
|
|
525
|
+
};
|
|
526
|
+
this.handleCompletionChange = (event) => {
|
|
527
|
+
event.stopPropagation();
|
|
528
|
+
if (!event.detail) {
|
|
529
|
+
return;
|
|
530
|
+
}
|
|
531
|
+
this.showCompletions = false;
|
|
532
|
+
/*
|
|
533
|
+
This change event doesn't need to be debounced in itself, but we want
|
|
534
|
+
to make absolutely sure that an earlier change event that *has* been
|
|
535
|
+
debounced doesn't emit after this one. Therefore, we run this through
|
|
536
|
+
the same debounced emitter function. /Ads
|
|
537
|
+
*/
|
|
538
|
+
this.changeEmitter(event.detail.text);
|
|
539
|
+
};
|
|
540
|
+
this.renderAutocompleteList = () => {
|
|
541
|
+
if (this.type === 'textarea' || !this.completions.length) {
|
|
542
|
+
return;
|
|
543
|
+
}
|
|
544
|
+
const dropdownZIndex = getComputedStyle(this.limelInputField).getPropertyValue('--dropdown-z-index');
|
|
545
|
+
return (h("limel-portal", { visible: this.showCompletions, containerId: this.portalId, inheritParentWidth: true, containerStyle: { 'z-index': dropdownZIndex } }, h("limel-menu-surface", { open: this.showCompletions, allowClicksElement: this.limelInputField, style: {
|
|
546
|
+
'--mdc-menu-min-width': '100%',
|
|
547
|
+
'max-height': 'inherit',
|
|
548
|
+
display: 'flex',
|
|
549
|
+
}, onDismiss: this.handleCloseMenu }, this.renderListResult())));
|
|
550
|
+
};
|
|
551
|
+
this.renderListResult = () => {
|
|
552
|
+
const filteredCompletions = this.filterCompletions(this.value);
|
|
553
|
+
if (!filteredCompletions || filteredCompletions.length === 0) {
|
|
554
|
+
return null;
|
|
555
|
+
}
|
|
556
|
+
return (h("limel-list", { onChange: this.handleCompletionChange, onKeyDown: this.handleKeyDownInDropdown, type: "selectable", items: filteredCompletions }));
|
|
557
|
+
};
|
|
558
|
+
this.handleKeyDownInDropdown = (event) => {
|
|
559
|
+
const keyFound = [TAB, ESCAPE, ENTER].includes(event.key);
|
|
560
|
+
const keyCodeFound = [
|
|
561
|
+
TAB_KEY_CODE,
|
|
562
|
+
ESCAPE_KEY_CODE,
|
|
563
|
+
ENTER_KEY_CODE,
|
|
564
|
+
].includes(event.keyCode);
|
|
565
|
+
if (keyFound || keyCodeFound) {
|
|
566
|
+
this.setFocus();
|
|
567
|
+
}
|
|
568
|
+
};
|
|
569
|
+
this.handleCloseMenu = () => {
|
|
570
|
+
this.showCompletions = false;
|
|
571
|
+
};
|
|
572
|
+
this.filterCompletions = (filter) => {
|
|
573
|
+
if (!filter) {
|
|
574
|
+
return this.completionsList;
|
|
575
|
+
}
|
|
576
|
+
return this.completionsList.filter((completion) => completion.text.toLowerCase().indexOf(filter.toLowerCase()) > -1);
|
|
577
|
+
};
|
|
578
|
+
this.handleChange = (event) => {
|
|
579
|
+
event.stopPropagation();
|
|
580
|
+
let value = event.target.value;
|
|
581
|
+
if (this.type === 'number') {
|
|
582
|
+
if (!value && event.data) {
|
|
583
|
+
event.stopPropagation();
|
|
584
|
+
return;
|
|
585
|
+
}
|
|
586
|
+
if (value) {
|
|
587
|
+
value = Number(value);
|
|
588
|
+
}
|
|
589
|
+
}
|
|
590
|
+
this.changeEmitter(value);
|
|
591
|
+
};
|
|
592
|
+
this.changeEmitter = (value) => {
|
|
593
|
+
this.change.emit(value);
|
|
594
|
+
};
|
|
595
|
+
this.handleIconClick = () => {
|
|
596
|
+
if (!this.isInvalid()) {
|
|
597
|
+
this.action.emit();
|
|
598
|
+
}
|
|
599
|
+
};
|
|
600
|
+
this.handleIconKeyPress = (event) => {
|
|
601
|
+
const isEnter = event.key === ENTER || event.keyCode === ENTER_KEY_CODE;
|
|
602
|
+
const isSpace = event.key === SPACE || event.keyCode === SPACE_KEY_CODE;
|
|
603
|
+
if ((isSpace || isEnter) && !this.isInvalid()) {
|
|
604
|
+
this.action.emit();
|
|
605
|
+
}
|
|
606
|
+
};
|
|
607
|
+
this.handleWheel = () => {
|
|
608
|
+
// This empty event handler is here to circumvent a bug.
|
|
609
|
+
// In some browsers (Chrome for example), hovering the input with
|
|
610
|
+
// the input focused, and scrolling, will both change the value
|
|
611
|
+
// AND scroll the page. We would prefer to never change the value
|
|
612
|
+
// on scroll, instead always scrolling the page, but since we
|
|
613
|
+
// haven't found a way to do that, this is the next best thing, as
|
|
614
|
+
// it prevents the page from being scrolled, but only in the
|
|
615
|
+
// circumstances when the value is changed by the scrolling.
|
|
616
|
+
// Please test THOROUGHLY if you remove this event handler 😄
|
|
617
|
+
};
|
|
618
|
+
this.disabled = false;
|
|
619
|
+
this.readonly = false;
|
|
620
|
+
this.invalid = false;
|
|
621
|
+
this.label = undefined;
|
|
622
|
+
this.placeholder = undefined;
|
|
623
|
+
this.helperText = undefined;
|
|
624
|
+
this.prefix = undefined;
|
|
625
|
+
this.suffix = undefined;
|
|
626
|
+
this.required = false;
|
|
627
|
+
this.value = undefined;
|
|
628
|
+
this.trailingIcon = undefined;
|
|
629
|
+
this.leadingIcon = undefined;
|
|
630
|
+
this.pattern = undefined;
|
|
631
|
+
this.type = 'text';
|
|
632
|
+
this.formatNumber = true;
|
|
633
|
+
this.step = 'any';
|
|
634
|
+
this.max = undefined;
|
|
635
|
+
this.min = undefined;
|
|
636
|
+
this.maxlength = undefined;
|
|
637
|
+
this.minlength = undefined;
|
|
638
|
+
this.completions = [];
|
|
639
|
+
this.showLink = false;
|
|
640
|
+
this.locale = config.defaultLocale;
|
|
641
|
+
this.isFocused = false;
|
|
642
|
+
this.isModified = false;
|
|
643
|
+
this.showCompletions = false;
|
|
644
|
+
const debounceTimeout = 300;
|
|
645
|
+
this.changeEmitter = debounce(this.changeEmitter, debounceTimeout);
|
|
646
|
+
this.portalId = createRandomString();
|
|
647
|
+
this.helperTextId = createRandomString();
|
|
648
|
+
this.labelId = createRandomString();
|
|
649
|
+
}
|
|
650
|
+
connectedCallback() {
|
|
651
|
+
this.initialize();
|
|
652
|
+
}
|
|
653
|
+
componentDidLoad() {
|
|
654
|
+
this.initialize();
|
|
655
|
+
}
|
|
656
|
+
disconnectedCallback() {
|
|
657
|
+
if (this.mdcTextField) {
|
|
658
|
+
this.mdcTextField.destroy();
|
|
659
|
+
}
|
|
660
|
+
window.removeEventListener('resize', this.layout);
|
|
661
|
+
this.limelInputField.removeEventListener('focus', this.setFocus);
|
|
662
|
+
}
|
|
663
|
+
componentDidUpdate() {
|
|
664
|
+
if (this.invalid) {
|
|
665
|
+
this.mdcTextField.valid = false;
|
|
666
|
+
}
|
|
667
|
+
}
|
|
668
|
+
render() {
|
|
669
|
+
const properties = this.getAdditionalProps();
|
|
670
|
+
properties['aria-labelledby'] = this.labelId;
|
|
671
|
+
properties.class = 'mdc-text-field__input';
|
|
672
|
+
properties.onInput = this.handleChange;
|
|
673
|
+
properties.onFocus = this.onFocus;
|
|
674
|
+
properties.onBlur = this.onBlur;
|
|
675
|
+
properties.required = this.required;
|
|
676
|
+
properties.readonly = this.readonly;
|
|
677
|
+
properties.disabled = this.disabled || this.readonly;
|
|
678
|
+
if (this.hasHelperText()) {
|
|
679
|
+
properties['aria-controls'] = this.helperTextId;
|
|
680
|
+
properties['aria-describedby'] = this.helperTextId;
|
|
681
|
+
}
|
|
682
|
+
return [
|
|
683
|
+
h("label", { class: this.getContainerClassList() }, h("span", { class: "mdc-notched-outline", tabindex: "-1" }, h("span", { class: "mdc-notched-outline__leading" }), this.renderLabel(), h("span", { class: "mdc-notched-outline__trailing" })), this.renderLeadingIcon(), this.renderEmptyValueForReadonly(), this.renderPrefix(), this.renderFormattedNumber(), this.renderInput(properties), this.renderSuffix(), this.renderTextarea(properties), this.renderTrailingLinkOrButton()),
|
|
684
|
+
this.renderHelperLine(),
|
|
685
|
+
this.renderAutocompleteList(),
|
|
686
|
+
];
|
|
687
|
+
}
|
|
688
|
+
valueWatcher(newValue) {
|
|
689
|
+
if (!this.mdcTextField) {
|
|
690
|
+
return;
|
|
691
|
+
}
|
|
692
|
+
if (newValue !== this.mdcTextField.value) {
|
|
693
|
+
this.mdcTextField.value = newValue || '';
|
|
694
|
+
}
|
|
695
|
+
}
|
|
696
|
+
completionsWatcher() {
|
|
697
|
+
this.mapCompletions();
|
|
698
|
+
}
|
|
699
|
+
get limelInputField() { return getElement(this); }
|
|
700
|
+
static get watchers() { return {
|
|
701
|
+
"value": ["valueWatcher"],
|
|
702
|
+
"completions": ["completionsWatcher"]
|
|
703
|
+
}; }
|
|
704
|
+
};
|
|
705
|
+
InputField.style = inputFieldCss;
|
|
8
706
|
|
|
9
707
|
const RadioButtonTemplate = (props) => {
|
|
10
708
|
return (h("div", { class: "mdc-form-field" },
|
|
@@ -388,6 +1086,122 @@ const List = class {
|
|
|
388
1086
|
};
|
|
389
1087
|
List.style = listCss;
|
|
390
1088
|
|
|
391
|
-
|
|
1089
|
+
const menuSurfaceCss = ":host(limel-menu-surface){display:block;max-height:inherit}.mdc-menu-surface{display:none;position:absolute;box-sizing:border-box;max-width:calc(100vw - 32px);max-width:var(--mdc-menu-max-width, calc(100vw - 32px));max-height:calc(100vh - 32px);max-height:var(--mdc-menu-max-height, calc(100vh - 32px));margin:0;padding:0;transform:scale(1);transform-origin:top left;opacity:0;overflow:auto;will-change:transform, opacity;z-index:8;transition:opacity 0.03s linear, transform 0.12s cubic-bezier(0, 0, 0.2, 1), height 250ms cubic-bezier(0, 0, 0.2, 1);box-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);background-color:#fff;background-color:var(--mdc-theme-surface, #fff);color:#000;color:var(--mdc-theme-on-surface, #000);border-radius:4px;border-radius:var(--mdc-shape-medium, 4px);transform-origin-left:top left;transform-origin-right:top right}.mdc-menu-surface:focus{outline:none}.mdc-menu-surface--animating-open{display:inline-block;transform:scale(0.8);opacity:0}.mdc-menu-surface--open{display:inline-block;transform:scale(1);opacity:1}.mdc-menu-surface--animating-closed{display:inline-block;opacity:0;transition:opacity 0.075s linear}[dir=rtl] .mdc-menu-surface,.mdc-menu-surface[dir=rtl]{transform-origin-left:top right;transform-origin-right:top left;}.mdc-menu-surface--anchor{position:relative;overflow:visible}.mdc-menu-surface--fixed{position:fixed}.mdc-menu-surface--fullwidth{width:100%}@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-elevation-overlay{position:absolute;border-radius:inherit;pointer-events:none;opacity:0;opacity:var(--mdc-elevation-overlay-opacity, 0);transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);background-color:#fff;background-color:var(--mdc-elevation-overlay-color, #fff)}.mdc-menu{min-width:112px;min-width:var(--mdc-menu-min-width, 112px)}.mdc-menu .mdc-deprecated-list-item__meta{color:rgba(0, 0, 0, 0.87)}.mdc-menu .mdc-deprecated-list-item__graphic{color:rgba(0, 0, 0, 0.87)}.mdc-menu .mdc-deprecated-list{color:rgba(0, 0, 0, 0.87)}.mdc-menu .mdc-deprecated-list,.mdc-menu .mdc-list{position:relative}.mdc-menu .mdc-deprecated-list .mdc-elevation-overlay,.mdc-menu .mdc-list .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-menu .mdc-deprecated-list-divider{margin:8px 0}.mdc-menu .mdc-deprecated-list-item{user-select:none}.mdc-menu .mdc-deprecated-list-item--disabled{cursor:auto}.mdc-menu a.mdc-deprecated-list-item .mdc-deprecated-list-item__text,.mdc-menu a.mdc-deprecated-list-item .mdc-deprecated-list-item__graphic{pointer-events:none}.mdc-menu__selection-group{padding:0;fill:currentColor}.mdc-menu__selection-group .mdc-deprecated-list-item{padding-left:56px;padding-right:16px}[dir=rtl] .mdc-menu__selection-group .mdc-deprecated-list-item,.mdc-menu__selection-group .mdc-deprecated-list-item[dir=rtl]{padding-left:16px;padding-right:56px;}.mdc-menu__selection-group .mdc-menu__selection-group-icon{left:16px;right:initial;display:none;position:absolute;top:50%;transform:translateY(-50%)}[dir=rtl] .mdc-menu__selection-group .mdc-menu__selection-group-icon,.mdc-menu__selection-group .mdc-menu__selection-group-icon[dir=rtl]{left:initial;right:16px;}.mdc-menu-item--selected .mdc-menu__selection-group-icon{display:inline}.mdc-menu-surface{display:var(--limel-menu-surface-display, block);flex-direction:var(--limel-menu-surface-flex-direction, row);max-height:inherit;position:relative;--mdc-menu-max-width:var(\n --menu-surface-width,\n min(calc(100vw - 2rem), 20rem)\n );background-color:var(--lime-elevated-surface-background-color)}:host(limel-menu-surface.has-grid-layout) .mdc-menu-surface{width:var(--menu-surface-width, min(100vw - 2rem, 40rem));max-width:unset}";
|
|
1090
|
+
|
|
1091
|
+
const MenuSurface = class {
|
|
1092
|
+
constructor(hostRef) {
|
|
1093
|
+
registerInstance(this, hostRef);
|
|
1094
|
+
this.dismiss = createEvent(this, "dismiss", 7);
|
|
1095
|
+
this.setup = () => {
|
|
1096
|
+
const menuElement = this.host.shadowRoot.querySelector('.mdc-menu-surface');
|
|
1097
|
+
if (!menuElement) {
|
|
1098
|
+
return;
|
|
1099
|
+
}
|
|
1100
|
+
this.menuSurface = new MDCMenuSurface(menuElement);
|
|
1101
|
+
this.menuSurface.setAnchorCorner(Corner.TOP_START);
|
|
1102
|
+
document.addEventListener('mousedown', this.handleDocumentClick, {
|
|
1103
|
+
capture: true,
|
|
1104
|
+
});
|
|
1105
|
+
this.host.addEventListener('keydown', this.handleKeyDown);
|
|
1106
|
+
window.addEventListener('resize', this.handleResize, {
|
|
1107
|
+
passive: true,
|
|
1108
|
+
});
|
|
1109
|
+
};
|
|
1110
|
+
this.teardown = () => {
|
|
1111
|
+
var _a;
|
|
1112
|
+
(_a = this.menuSurface) === null || _a === void 0 ? void 0 : _a.destroy();
|
|
1113
|
+
document.removeEventListener('mousedown', this.handleDocumentClick, {
|
|
1114
|
+
capture: true,
|
|
1115
|
+
});
|
|
1116
|
+
this.host.removeEventListener('keydown', this.handleKeyDown);
|
|
1117
|
+
window.removeEventListener('resize', this.handleResize);
|
|
1118
|
+
};
|
|
1119
|
+
this.handleDocumentClick = (event) => {
|
|
1120
|
+
const elementPath = event.composedPath ? event.composedPath() : [];
|
|
1121
|
+
if (!this.open) {
|
|
1122
|
+
return;
|
|
1123
|
+
}
|
|
1124
|
+
if (isDescendant(event.target, this.host)) {
|
|
1125
|
+
return;
|
|
1126
|
+
}
|
|
1127
|
+
if (this.allowClicksElement) {
|
|
1128
|
+
const clickedInAllowedElement = elementPath.includes(this.allowClicksElement);
|
|
1129
|
+
if (clickedInAllowedElement) {
|
|
1130
|
+
return;
|
|
1131
|
+
}
|
|
1132
|
+
}
|
|
1133
|
+
this.dismiss.emit();
|
|
1134
|
+
this.preventClickEventPropagation();
|
|
1135
|
+
};
|
|
1136
|
+
this.handleResize = () => {
|
|
1137
|
+
if (this.open) {
|
|
1138
|
+
this.dismiss.emit();
|
|
1139
|
+
}
|
|
1140
|
+
};
|
|
1141
|
+
this.preventClickEventPropagation = () => {
|
|
1142
|
+
// When the menu surface is open, we want to stop the `click` event from propagating
|
|
1143
|
+
// when clicking outside the surface itself. This is to prevent any dialog that might
|
|
1144
|
+
// be open from closing, etc. However, when dragging a scrollbar no `click` event is emitted,
|
|
1145
|
+
// only mousedown and mouseup. So we listen for `mousedown` and attach a one-time listener
|
|
1146
|
+
// for `click`, so we can capture and "kill" it.
|
|
1147
|
+
document.addEventListener('click', this.stopEvent, {
|
|
1148
|
+
capture: true,
|
|
1149
|
+
once: true,
|
|
1150
|
+
});
|
|
1151
|
+
// We also capture and "kill" the next `mouseup` event.
|
|
1152
|
+
document.addEventListener('mouseup', this.stopEvent, {
|
|
1153
|
+
capture: true,
|
|
1154
|
+
once: true,
|
|
1155
|
+
});
|
|
1156
|
+
// If the user dragged the scrollbar, no `click` event happens. So when we get the
|
|
1157
|
+
// `mouseup` event, remove the handler for `click` if it's still there.
|
|
1158
|
+
// Otherwise, we would catch the next click even though the menu is no longer open.
|
|
1159
|
+
document.addEventListener('mouseup', () => {
|
|
1160
|
+
document.removeEventListener('click', this.stopEvent, {
|
|
1161
|
+
capture: true,
|
|
1162
|
+
});
|
|
1163
|
+
}, {
|
|
1164
|
+
once: true,
|
|
1165
|
+
});
|
|
1166
|
+
};
|
|
1167
|
+
this.stopEvent = (event) => {
|
|
1168
|
+
event.stopPropagation();
|
|
1169
|
+
event.preventDefault();
|
|
1170
|
+
};
|
|
1171
|
+
this.handleKeyDown = (event) => {
|
|
1172
|
+
const isEscape = event.key === ESCAPE || event.keyCode === ESCAPE_KEY_CODE;
|
|
1173
|
+
const isTab = event.key === TAB || event.keyCode === TAB_KEY_CODE;
|
|
1174
|
+
if (this.open && (isEscape || isTab)) {
|
|
1175
|
+
event.stopPropagation();
|
|
1176
|
+
this.dismiss.emit();
|
|
1177
|
+
}
|
|
1178
|
+
};
|
|
1179
|
+
this.open = false;
|
|
1180
|
+
this.allowClicksElement = undefined;
|
|
1181
|
+
}
|
|
1182
|
+
connectedCallback() {
|
|
1183
|
+
this.setup();
|
|
1184
|
+
}
|
|
1185
|
+
disconnectedCallback() {
|
|
1186
|
+
this.teardown();
|
|
1187
|
+
}
|
|
1188
|
+
componentDidLoad() {
|
|
1189
|
+
this.setup();
|
|
1190
|
+
}
|
|
1191
|
+
render() {
|
|
1192
|
+
const classList = {
|
|
1193
|
+
'mdc-menu': true,
|
|
1194
|
+
'mdc-menu-surface': true,
|
|
1195
|
+
'mdc-menu-surface--open': this.open,
|
|
1196
|
+
'mdc-elevation-transition': true,
|
|
1197
|
+
'mdc-elevation--z4': true,
|
|
1198
|
+
};
|
|
1199
|
+
return (h("div", { class: classList, tabindex: "-1" }, h("slot", null)));
|
|
1200
|
+
}
|
|
1201
|
+
get host() { return getElement(this); }
|
|
1202
|
+
};
|
|
1203
|
+
MenuSurface.style = menuSurfaceCss;
|
|
1204
|
+
|
|
1205
|
+
export { InputField as limel_input_field, List as limel_list, MenuSurface as limel_menu_surface };
|
|
392
1206
|
|
|
393
|
-
//# sourceMappingURL=limel-
|
|
1207
|
+
//# sourceMappingURL=limel-input-field_3.entry.js.map
|