@poirazis/supercomponents-shared 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (66) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +66 -0
  3. package/dist/index.js +30635 -0
  4. package/dist/index.umd.cjs +12 -0
  5. package/dist/style.css +1 -0
  6. package/package.json +117 -0
  7. package/src/index.js +29 -0
  8. package/src/index.ts +31 -0
  9. package/src/lib/Actions/autoresize_textarea.js +14 -0
  10. package/src/lib/Actions/click_outside.js +80 -0
  11. package/src/lib/Actions/index.js +4 -0
  12. package/src/lib/Actions/position_dropdown.js +129 -0
  13. package/src/lib/SuperButton/SuperButton.svelte +341 -0
  14. package/src/lib/SuperFieldLabel/SuperFieldLabel.svelte +91 -0
  15. package/src/lib/SuperFieldsCommon.css +54 -0
  16. package/src/lib/SuperList/SuperList.svelte +308 -0
  17. package/src/lib/SuperList/drag-handle.svelte +31 -0
  18. package/src/lib/SuperPopover/SuperPopover.svelte +134 -0
  19. package/src/lib/SuperTable/SuperTable.css +410 -0
  20. package/src/lib/SuperTable/SuperTable.svelte +1332 -0
  21. package/src/lib/SuperTable/constants.js +85 -0
  22. package/src/lib/SuperTable/controls/ColumnsSection.svelte +34 -0
  23. package/src/lib/SuperTable/controls/ControlSection.svelte +3 -0
  24. package/src/lib/SuperTable/controls/RowButtonsColumn.svelte +169 -0
  25. package/src/lib/SuperTable/controls/SelectionColumn.svelte +174 -0
  26. package/src/lib/SuperTable/controls/SuperTableWelcome.svelte +58 -0
  27. package/src/lib/SuperTable/overlays/AddNewRowOverlay.svelte +52 -0
  28. package/src/lib/SuperTable/overlays/EmptyResultSetOverlay.svelte +13 -0
  29. package/src/lib/SuperTable/overlays/LoadingOverlay.svelte +3 -0
  30. package/src/lib/SuperTable/overlays/RowContextMenu copy.svelte +57 -0
  31. package/src/lib/SuperTable/overlays/RowContextMenu.svelte +58 -0
  32. package/src/lib/SuperTable/overlays/ScrollbarsOverlay.svelte +184 -0
  33. package/src/lib/SuperTable/overlays/SelectedActionsOverlay.svelte +64 -0
  34. package/src/lib/SuperTable/state/API.js +0 -0
  35. package/src/lib/SuperTable/state/SuperTableStateMachine.js +0 -0
  36. package/src/lib/SuperTable/types.js +0 -0
  37. package/src/lib/SuperTableCells/CellAttachment.svelte +288 -0
  38. package/src/lib/SuperTableCells/CellBoolean.svelte +158 -0
  39. package/src/lib/SuperTableCells/CellColor.svelte +460 -0
  40. package/src/lib/SuperTableCells/CellCommon.css +319 -0
  41. package/src/lib/SuperTableCells/CellDatetime.svelte +180 -0
  42. package/src/lib/SuperTableCells/CellIcon.svelte +627 -0
  43. package/src/lib/SuperTableCells/CellJSON.svelte +297 -0
  44. package/src/lib/SuperTableCells/CellLink.svelte +274 -0
  45. package/src/lib/SuperTableCells/CellLinkAdvanced.svelte +298 -0
  46. package/src/lib/SuperTableCells/CellLinkPickerSelect.svelte +355 -0
  47. package/src/lib/SuperTableCells/CellLinkPickerTable.svelte +91 -0
  48. package/src/lib/SuperTableCells/CellLinkPickerTree.svelte +226 -0
  49. package/src/lib/SuperTableCells/CellNumber.svelte +179 -0
  50. package/src/lib/SuperTableCells/CellNumberSimple.svelte +56 -0
  51. package/src/lib/SuperTableCells/CellOptions.svelte +631 -0
  52. package/src/lib/SuperTableCells/CellOptionsAdvanced.svelte +684 -0
  53. package/src/lib/SuperTableCells/CellSkeleton.svelte +59 -0
  54. package/src/lib/SuperTableCells/CellString.svelte +178 -0
  55. package/src/lib/SuperTableCells/CellStringSimple.svelte +55 -0
  56. package/src/lib/SuperTableCells/index.js +21 -0
  57. package/src/lib/SuperTableCells/remixIcons.js +6772 -0
  58. package/src/lib/SuperTableColumn/SuperTableColumn.svelte +392 -0
  59. package/src/lib/SuperTableColumn/index.js +9 -0
  60. package/src/lib/SuperTableColumn/parts/SuperColumnBody.svelte +57 -0
  61. package/src/lib/SuperTableColumn/parts/SuperColumnFooter.svelte +14 -0
  62. package/src/lib/SuperTableColumn/parts/SuperColumnHeader.svelte +228 -0
  63. package/src/lib/SuperTableColumn/parts/SuperColumnRow.svelte +142 -0
  64. package/src/lib/SuperTableColumn/parts/SuperColumnRowNew.svelte +34 -0
  65. package/src/lib/SuperTree/SuperTree.svelte +117 -0
  66. package/src/types/svelte-portal.d.ts +1 -0
@@ -0,0 +1,684 @@
1
+ <script>
2
+ import fsm from "svelte-fsm";
3
+ import { getContext, createEventDispatcher, onMount } from "svelte";
4
+ import SuperPopover from "../SuperPopover/SuperPopover.svelte";
5
+ import SuperList from "../SuperList/SuperList.svelte";
6
+ import CellSkeleton from "./CellSkeleton.svelte";
7
+ const dispatch = createEventDispatcher();
8
+ const { API, QueryUtils, fetchData, memo, derivedMemo } = getContext("sdk");
9
+
10
+ export let cellOptions;
11
+ export let value;
12
+ export let fieldSchema;
13
+ export let multi = true;
14
+ export let autofocus;
15
+ export let label;
16
+
17
+ let anchor;
18
+ let editor;
19
+ let options = memo([]);
20
+ let labels = {};
21
+ let optionColors = {};
22
+ let optionIcons = {};
23
+ let filteredOptions = [];
24
+ let focusedOptionIdx = -1;
25
+ let timer;
26
+ let picker;
27
+ let inactive = true;
28
+ let allSelected = false;
29
+
30
+ const colors = derivedMemo(options, ($options) => {
31
+ let obj = {};
32
+ if (!colorColumn) return obj;
33
+ $options.forEach(
34
+ (option, index) =>
35
+ (obj[option] = optionColors[option] || colorsArray[index % 14])
36
+ );
37
+ return obj;
38
+ });
39
+
40
+ const colorsArray = [
41
+ "hsla(0, 90%, 75%, 0.35)",
42
+ "hsla(25, 90%, 75%, 0.35)",
43
+ "hsla(50, 80%, 75%, 0.35)",
44
+ "hsla(75, 80%, 75%, 0.35)",
45
+ "hsla(100, 80%, 75%, 0.35)",
46
+ "hsla(125, 90%, 75%, 0.35)",
47
+ "hsla(150, 90%, 75%, 0.35)",
48
+ "hsla(175, 90%, 75%, 0.35)",
49
+ "hsla(200, 90%, 75%, 0.35)",
50
+ "hsla(225, 90%, 75%, 0.35)",
51
+ "hsla(250, 90%, 75%, 0.35)",
52
+ "hsla(275, 90%, 75%, 0.35)",
53
+ "hsla(300, 90%, 75%, 0.35)",
54
+ "hsla(325, 90%, 75%, 0.35)",
55
+ "hsla(350, 90%, 75%, 0.35)",
56
+ ];
57
+
58
+ let originalValue = JSON.stringify(
59
+ Array.isArray(value) ? value : value ? [value] : []
60
+ );
61
+
62
+ $: ({
63
+ controlType,
64
+ optionsSource,
65
+ labelColumn,
66
+ valueColumn,
67
+ iconColumn,
68
+ colorColumn,
69
+ customOptions,
70
+ role,
71
+ readonly,
72
+ disabled,
73
+ error,
74
+ color,
75
+ background,
76
+ } = cellOptions);
77
+
78
+ // Handle Options from Data Source
79
+ const dataSourceStore = memo(cellOptions?.datasource ?? {});
80
+ $: dataSourceStore.set(cellOptions.datasource);
81
+ $: fetch =
82
+ optionsSource == "data"
83
+ ? createFetch($dataSourceStore)
84
+ : memo({ loaded: true });
85
+ $: fullSelection =
86
+ filteredOptions.length == localValue.length && filteredOptions.length > 0;
87
+
88
+ // React to property changes
89
+ $: cellState.refresh(
90
+ fieldSchema,
91
+ optionsSource,
92
+ labelColumn,
93
+ valueColumn,
94
+ iconColumn,
95
+ colorColumn,
96
+ $dataSourceStore
97
+ );
98
+
99
+ $: cellState.syncFetch($fetch);
100
+
101
+ // We always keep an internal value as an array
102
+ $: localValue = Array.isArray(value) ? value : value ? [value] : [];
103
+ $: isDirty = inEdit && originalValue !== JSON.stringify(localValue);
104
+ $: inEdit = $cellState == "Editing";
105
+ $: multi = fieldSchema ? fieldSchema?.type == "array" && multi : true;
106
+ $: radios = controlType == "radio";
107
+ $: allSelected = filteredOptions.length == localValue.length;
108
+
109
+ export let cellState = fsm("Loading", {
110
+ "*": {
111
+ goTo(state) {
112
+ return state;
113
+ },
114
+ refresh() {
115
+ $options = [];
116
+ return "Loading";
117
+ },
118
+ loadSchemaOptions() {
119
+ optionColors = fieldSchema?.optionColors || {};
120
+ $options = fieldSchema?.constraints?.inclusion || [];
121
+ },
122
+ loadDataOptions(rows) {
123
+ if (rows && rows.length) {
124
+ rows.forEach((row) => {
125
+ $options.push(row[valueColumn]);
126
+ labels[row[valueColumn]] =
127
+ row[labelColumn || $fetch.definition.primaryDisplay];
128
+ optionColors[row[valueColumn]] = row[colorColumn];
129
+ optionIcons[row[valueColumn]] = row[iconColumn];
130
+ });
131
+ }
132
+ $options = $options;
133
+ },
134
+ loadCustomOptions() {
135
+ if (customOptions?.length) {
136
+ customOptions.forEach((row) => {
137
+ $options.push(row.value);
138
+ labels[row.value] = row.label;
139
+ });
140
+ }
141
+ $options = $options;
142
+ },
143
+ clearFilters() {
144
+ filteredOptions = $options;
145
+ },
146
+ },
147
+ Loading: {
148
+ _enter() {
149
+ if (cellOptions.optionsSource != "data" || $fetch?.loaded)
150
+ this.goTo.debounce(10, cellOptions.initialState || "View");
151
+ },
152
+ _exit() {
153
+ if (optionsSource == "custom") this.loadCustomOptions();
154
+ else if (optionsSource == "data") this.loadDataOptions($fetch?.rows);
155
+ else this.loadSchemaOptions();
156
+
157
+ filteredOptions = $options;
158
+ },
159
+ syncFetch() {
160
+ if ($fetch?.loaded) {
161
+ return cellOptions.initialState || "View";
162
+ }
163
+ },
164
+ },
165
+ View: {
166
+ _enter() {},
167
+ focus(e) {
168
+ if (!cellOptions.readonly && !cellOptions.disabled) {
169
+ return "Editing";
170
+ }
171
+ },
172
+ },
173
+ Editing: {
174
+ _enter() {
175
+ originalValue = JSON.stringify(
176
+ Array.isArray(value) ? value : value ? [value] : []
177
+ );
178
+
179
+ dispatch("enteredit");
180
+ },
181
+ _exit() {
182
+ editorState.close();
183
+ dispatch("exitedit");
184
+ },
185
+ handleKeyboard(e) {},
186
+ focusout(e) {
187
+ editorState.close();
188
+ if (anchor?.contains(e.relatedTarget)) return;
189
+ if (!inactive) return;
190
+
191
+ this.submit();
192
+ return "View";
193
+ },
194
+ submit() {
195
+ if (isDirty && !cellOptions.debounce) {
196
+ if (multi) dispatch("change", localValue);
197
+ else dispatch("change", localValue[0]);
198
+ }
199
+ },
200
+ cancel() {
201
+ return "View";
202
+ },
203
+ },
204
+ });
205
+
206
+ let editorState = fsm("Closed", {
207
+ "*": {
208
+ toggleOption(idx) {
209
+ let option = $options[idx];
210
+ let pos = localValue.indexOf(option);
211
+
212
+ if (multi && pos > -1) {
213
+ localValue.splice(pos, 1);
214
+ localValue = [...localValue];
215
+ } else if (multi) {
216
+ localValue = [...localValue, option];
217
+ } else {
218
+ if (localValue[0] == option) localValue.length = 0;
219
+ else localValue[0] = option;
220
+ }
221
+
222
+ if (cellOptions.debounce) {
223
+ clearTimeout(timer);
224
+ timer = setTimeout(() => {
225
+ dispatch("change", multi ? localValue : localValue[0]);
226
+ }, cellOptions.debounce ?? 0);
227
+ }
228
+
229
+ if (!multi || filteredOptions.length == localValue.length) {
230
+ anchor?.focus();
231
+ }
232
+ },
233
+ toggleAll() {
234
+ if (allSelected) localValue = [];
235
+ else localValue = [...filteredOptions];
236
+
237
+ if (cellOptions.debounce) {
238
+ clearTimeout(timer);
239
+ timer = setTimeout(() => {
240
+ dispatch("change", multi ? localValue : localValue[0]);
241
+ }, cellOptions.debounce ?? 0);
242
+ }
243
+ },
244
+ handleKeyboard(e) {
245
+ if (e.keyCode == 32) {
246
+ editorState.toggle();
247
+ }
248
+
249
+ if (e.key == "Escape") {
250
+ this.cancel();
251
+ }
252
+
253
+ if (e.key == "Enter") {
254
+ if (multi) {
255
+ this.toggleOption(focusedOptionIdx, e.preventDefault());
256
+ this.close();
257
+ } else {
258
+ this.toggleOption(focusedOptionIdx);
259
+ }
260
+ }
261
+
262
+ if (e.key == "ArrowDown")
263
+ this.highlightNext(e.preventDefault(), e.stopPropagation());
264
+ if (e.key == "ArrowUp")
265
+ this.highlightPrevious(e.preventDefault(), e.stopPropagation());
266
+ if (e.key == "Escape") this.close(e.stopPropagation());
267
+ },
268
+ highlightNext() {
269
+ focusedOptionIdx += 1;
270
+ if (focusedOptionIdx > $options.length - 1) focusedOptionIdx = 0;
271
+ },
272
+ highlightPrevious() {
273
+ focusedOptionIdx -= 1;
274
+ if (focusedOptionIdx < 0) focusedOptionIdx = $options.length - 1;
275
+ },
276
+ },
277
+ Open: {
278
+ _enter() {
279
+ focusedOptionIdx = -1;
280
+ this.refocus.debounce(10);
281
+ },
282
+ _exit() {},
283
+ filterOptions(e) {
284
+ if (e && e.target.value != "") {
285
+ filteredOptions = $options.filter((x) =>
286
+ x?.startsWith(e.target.value)
287
+ );
288
+ } else filteredOptions = $options;
289
+ },
290
+ close() {
291
+ return "Closed";
292
+ },
293
+ toggle() {
294
+ return "Closed";
295
+ },
296
+ },
297
+ Closed: {
298
+ toggle() {
299
+ return "Open";
300
+ },
301
+ open() {
302
+ return "Open";
303
+ },
304
+ filterOptions(e) {
305
+ this.open();
306
+ this.filterOptions(e);
307
+ },
308
+ handleKeyboard(e) {
309
+ if (!cellOptions.autocomplete && controlType == "select") {
310
+ if (e.keyCode == 32) {
311
+ e.preventDefault();
312
+ e.stopPropagation();
313
+ this.toggle();
314
+ }
315
+
316
+ if (e.key == "Backspace" || e.key == "Delete") {
317
+ e.stopPropagation();
318
+ localValue = [];
319
+ dispatch("change", localValue);
320
+ }
321
+ } else if (controlType != "select") {
322
+ if (e.keyCode == 32 || e.key == "Enter")
323
+ this.toggleOption(focusedOptionIdx, e.preventDefault());
324
+ if (e.key == "ArrowDown")
325
+ this.highlightNext(e.preventDefault(), e.stopPropagation());
326
+ if (e.key == "ArrowUp")
327
+ this.highlightPrevious(e.preventDefault(), e.stopPropagation());
328
+ if (e.key == "Escape") this.close(e.stopPropagation());
329
+ }
330
+ },
331
+ },
332
+ });
333
+
334
+ const createFetch = (datasource) => {
335
+ return fetchData({
336
+ API,
337
+ datasource,
338
+ options: {
339
+ query: QueryUtils.buildQuery(cellOptions.filter),
340
+ sortColumn: cellOptions.sortColumn,
341
+ sortOrder: cellOptions.sortOrder,
342
+ limit: cellOptions.limit,
343
+ },
344
+ });
345
+ };
346
+
347
+ const focus = (node) => {
348
+ node?.focus();
349
+ };
350
+
351
+ onMount(() => {
352
+ if (autofocus)
353
+ setTimeout(() => {
354
+ cellState.focus();
355
+ editor?.focus();
356
+ }, 30);
357
+ });
358
+ </script>
359
+
360
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
361
+ <!-- svelte-ignore a11y-no-static-element-interactions -->
362
+ <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
363
+ <div
364
+ bind:this={anchor}
365
+ class="superCell multirow"
366
+ tabindex={cellOptions?.disabled ? "-1" : "0"}
367
+ class:inEdit
368
+ class:isDirty={isDirty && cellOptions.showDirty}
369
+ class:disabled
370
+ class:readonly
371
+ class:error
372
+ style:color
373
+ style:background
374
+ style:font-weight={cellOptions.fontWeight}
375
+ class:inline={role == "inlineInput"}
376
+ class:tableCell={role == "tableCell"}
377
+ class:formInput={role == "formInput"}
378
+ on:focusin={cellState.focus}
379
+ on:focusout={cellState.focusout}
380
+ on:keydown={editorState.handleKeyboard}
381
+ >
382
+ {#if $cellState == "Loading"}
383
+ <CellSkeleton>Initializing ..</CellSkeleton>
384
+ {:else if controlType == "list"}
385
+ <SuperList
386
+ items={localValue}
387
+ itemsColors={$colors}
388
+ itemsLabels={labels}
389
+ showColors={cellOptions.optionsViewMode != "text"}
390
+ reorderOnly={cellOptions.reorderOnly}
391
+ placeholder={cellOptions.placeholder}
392
+ readonly={cellOptions.readonly || cellOptions.disabled}
393
+ {editorState}
394
+ {cellState}
395
+ {fullSelection}
396
+ bind:inactive
397
+ on:togglePicker={editorState.toggle}
398
+ on:clear={() => {
399
+ localValue = [];
400
+ editorState.close();
401
+ anchor.focus();
402
+ }}
403
+ on:change={(e) => {
404
+ localValue = [...e.detail];
405
+ anchor.focus();
406
+ }}
407
+ />
408
+ {:else if controlType == "checkbox" || controlType == "radio"}
409
+ <div
410
+ class="radios"
411
+ class:column={cellOptions.direction == "column"}
412
+ on:mouseleave={() => (focusedOptionIdx = -1)}
413
+ >
414
+ {#each $options as option, idx (idx)}
415
+ <div
416
+ class="radio"
417
+ class:selected={localValue?.includes(option)}
418
+ class:focused={focusedOptionIdx === idx}
419
+ style:--option-color={$colors[option]}
420
+ on:mousedown={(e) => editorState.toggleOption(idx)}
421
+ on:mouseenter={() => (focusedOptionIdx = idx)}
422
+ >
423
+ <i
424
+ class={radios && localValue.includes(option)
425
+ ? "ri-checkbox-circle-fill"
426
+ : radios
427
+ ? "ri-checkbox-blank-circle-fill"
428
+ : localValue.includes(option)
429
+ ? "ri-checkbox-fill"
430
+ : "ri-checkbox-blank-fill"}
431
+ />
432
+ {labels[option] || option}
433
+ </div>
434
+ {/each}
435
+ </div>
436
+ {:else if controlType == "switch"}
437
+ <div
438
+ class="radios"
439
+ class:formInput={role == "formInput"}
440
+ class:inlineInput={role == "inlineInput"}
441
+ class:column={cellOptions.direction == "column"}
442
+ on:mouseleave={() => (focusedOptionIdx = -1)}
443
+ >
444
+ {#if label || cellOptions.toggleAll}
445
+ <div
446
+ class="switch toggleAll"
447
+ on:click={cellOptions.toggleAll ? editorState.toggleAll : undefined}
448
+ on:mouseenter
449
+ >
450
+ <div class="text title">{label ?? ""}</div>
451
+ {#if cellOptions.toggleAll && !(readonly || disabled)}
452
+ <div class="spectrum-Switch spectrum-Switch--emphasized">
453
+ <input
454
+ checked={allSelected}
455
+ type="checkbox"
456
+ class="spectrum-Switch-input"
457
+ />
458
+ <span class="spectrum-Switch-switch" />
459
+ </div>
460
+ {/if}
461
+ </div>
462
+ {/if}
463
+ {#each $options as option, idx (idx)}
464
+ <div
465
+ class="switch"
466
+ class:selected={localValue.includes(option)}
467
+ class:focused={focusedOptionIdx === idx}
468
+ style:--option-color={$colors[option]}
469
+ on:click={(e) => editorState.toggleOption(idx)}
470
+ on:mouseenter={() => (focusedOptionIdx = idx)}
471
+ >
472
+ <i class={optionIcons[option] || "no-icon"} />
473
+ <div class="text">{labels[option] || option}</div>
474
+ <div class="spectrum-Switch spectrum-Switch--emphasized">
475
+ <input
476
+ checked={localValue.includes(option)}
477
+ type="checkbox"
478
+ class="spectrum-Switch-input"
479
+ id={idx}
480
+ />
481
+ <span class="spectrum-Switch-switch small"> </span>
482
+ </div>
483
+ </div>
484
+ {/each}
485
+ </div>
486
+ {/if}
487
+ </div>
488
+
489
+ <!-- svelte-ignore a11y-no-static-element-interactions -->
490
+ {#if inEdit && controlType == "list"}
491
+ <SuperPopover
492
+ {anchor}
493
+ useAnchorWidth
494
+ maxHeight={400}
495
+ open={$editorState == "Open"}
496
+ on:close={cellState.focusout}
497
+ >
498
+ <div
499
+ bind:this={picker}
500
+ class="options"
501
+ on:wheel={(e) => e.stopPropagation()}
502
+ on:mouseleave={() => (focusedOptionIdx = -1)}
503
+ >
504
+ {#if filteredOptions?.length < 1 || filteredOptions.length == localValue.length}
505
+ <div class="option">
506
+ <span>
507
+ <i class="ri-close-line" />
508
+ No Options Found
509
+ </span>
510
+ </div>
511
+ {:else}
512
+ {#each filteredOptions as option, idx (idx)}
513
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
514
+ <div
515
+ class="option"
516
+ class:focused={focusedOptionIdx === idx}
517
+ class:selected={localValue?.includes(option)}
518
+ style:--option-color={$colors[option]}
519
+ on:mousedown|preventDefault={(e) =>
520
+ editorState.toggleOption.debounce(150, idx)}
521
+ on:mouseenter={() => (focusedOptionIdx = idx)}
522
+ >
523
+ <span>
524
+ <i class="ri-checkbox-blank-fill" />
525
+ {labels[option] || option}
526
+ </span>
527
+ </div>
528
+ {/each}
529
+ {/if}
530
+ </div>
531
+ </SuperPopover>
532
+ {/if}
533
+
534
+ <style>
535
+ .options {
536
+ flex: auto;
537
+ display: flex;
538
+ flex-direction: column;
539
+ align-items: stretch;
540
+ overflow-y: auto;
541
+ color: var(--spectrum-global-color-gray-700);
542
+ }
543
+
544
+ .option {
545
+ min-height: 1.75rem;
546
+ display: flex;
547
+ gap: 0.5rem;
548
+ align-items: center;
549
+ justify-content: space-between;
550
+ cursor: pointer;
551
+ padding: 0 0.5rem;
552
+
553
+ &.selected {
554
+ display: none;
555
+ color: var(--spectrum-global-color-gray-800);
556
+ background-color: var(--spectrum-global-color-gray-75);
557
+ }
558
+
559
+ &.focused {
560
+ background-color: var(--spectrum-global-color-gray-200);
561
+ color: var(--spectrum-global-color-gray-800);
562
+ border-radius: 4px;
563
+ }
564
+ }
565
+ .option > span {
566
+ display: flex;
567
+ align-items: center;
568
+ gap: 0.5rem;
569
+ overflow: hidden;
570
+ text-overflow: ellipsis;
571
+ white-space: nowrap;
572
+
573
+ & > i {
574
+ color: var(--option-color);
575
+ font-size: larger;
576
+ }
577
+ }
578
+
579
+ .radios {
580
+ flex: auto;
581
+ display: flex;
582
+ flex-wrap: wrap;
583
+ justify-items: flex-start;
584
+ color: var(--spectrum-global-color-gray-700);
585
+ font-size: 13px;
586
+
587
+ &.formInput {
588
+ & > .switch {
589
+ padding: 0 0.5rem;
590
+ }
591
+ }
592
+
593
+ &.inlineInput {
594
+ & > .switch {
595
+ padding: 0rem 0.25rem;
596
+ &.toggleAll {
597
+ margin-bottom: 0.25rem;
598
+ padding-bottom: 0.25rem;
599
+ border-bottom: 1px solid var(--spectrum-global-color-gray-300);
600
+ }
601
+ }
602
+ }
603
+ }
604
+ .radios.column {
605
+ gap: 0rem;
606
+ flex-direction: column;
607
+ min-width: 0;
608
+ }
609
+ .radio {
610
+ height: 1.75rem;
611
+ display: flex;
612
+ gap: 0.25rem;
613
+ align-items: center;
614
+ cursor: pointer;
615
+ &.focused {
616
+ background-color: var(--spectrum-global-color-gray-200) !important;
617
+ color: var(--spectrum-global-color-gray-800);
618
+ }
619
+
620
+ &.selected {
621
+ color: var(--spectrum-global-color-gray-800);
622
+ }
623
+ }
624
+
625
+ .switch {
626
+ width: 100%;
627
+ display: flex;
628
+ gap: 0.35rem;
629
+ align-items: center;
630
+ cursor: pointer;
631
+ height: 1.75rem;
632
+
633
+ & > i {
634
+ color: var(--spectrum-global-color-gray-600);
635
+ min-width: 13px;
636
+ font-size: 13px;
637
+
638
+ &.no-icon {
639
+ display: none;
640
+ }
641
+ }
642
+ & > .text {
643
+ flex: 1 1 auto;
644
+ text-overflow: ellipsis;
645
+ overflow: hidden;
646
+ white-space: nowrap;
647
+ opacity: 0.95;
648
+
649
+ &.title {
650
+ font-size: 14px;
651
+ font-weight: 600;
652
+ }
653
+ }
654
+
655
+ &.toggleAll {
656
+ border-bottom: 1px solid var(--spectrum-global-color-gray-200);
657
+ height: 2rem;
658
+ }
659
+ &.focused {
660
+ background-color: var(--spectrum-global-color-gray-200) !important;
661
+ color: var(--spectrum-global-color-gray-800);
662
+ border-radius: 4px;
663
+ }
664
+
665
+ &.selected {
666
+ color: var(--spectrum-global-color-gray-800);
667
+ & > i {
668
+ color: var(--option-color, var(--spectrum-global-color-gray-700));
669
+ }
670
+
671
+ & > .text {
672
+ opacity: 1;
673
+ }
674
+ }
675
+ }
676
+
677
+ .switch > .spectrum-Switch {
678
+ margin-right: unset !important;
679
+ }
680
+
681
+ .radio > i {
682
+ font-size: 16px;
683
+ }
684
+ </style>