@vuu-ui/vuu-ui-controls 0.8.10-debug → 0.8.11-debug
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/cjs/index.js +1188 -939
- package/cjs/index.js.map +4 -4
- package/esm/index.js +1052 -797
- package/esm/index.js.map +4 -4
- package/index.css +35 -3
- package/index.css.map +3 -3
- package/package.json +8 -8
- package/types/combo-box/ComboBox.d.ts +19 -0
- package/types/combo-box/useCombobox.d.ts +25 -0
- package/types/{vuu-ui-controls/src/common-hooks → common-hooks}/collectionTypes.d.ts +4 -4
- package/types/{vuu-ui-controls/src/common-hooks → common-hooks}/navigationTypes.d.ts +2 -3
- package/types/{vuu-ui-controls/src/common-hooks → common-hooks}/selectionTypes.d.ts +30 -14
- package/types/common-hooks/useSelection.d.ts +8 -0
- package/types/{vuu-ui-controls/src/drag-drop → drag-drop}/drop-target-utils.d.ts +6 -6
- package/types/{vuu-ui-controls/src/drag-drop → drag-drop}/useDragDisplacers.d.ts +2 -2
- package/types/dropdown/Dropdown.d.ts +10 -0
- package/types/{vuu-ui-controls/src/dropdown → dropdown}/dropdownTypes.d.ts +9 -4
- package/types/{vuu-ui-controls/src/dropdown → dropdown}/useClickAway.d.ts +2 -1
- package/types/dropdown/useDropdown.d.ts +13 -0
- package/types/{vuu-ui-controls/src/index.d.ts → index.d.ts} +1 -0
- package/types/instrument-picker/InstrumentPicker.d.ts +16 -0
- package/types/instrument-picker/index.d.ts +1 -0
- package/types/{vuu-ui-controls/src/instrument-search → instrument-picker}/useDataSource.d.ts +1 -1
- package/types/instrument-picker/useInstrumentPicker.d.ts +24 -0
- package/types/instrument-search/SearchCell.d.ts +4 -0
- package/types/instrument-search/moving-window.d.ts +14 -0
- package/types/instrument-search/useDataSource.d.ts +7 -0
- package/types/list/List.d.ts +7 -0
- package/types/list/common-hooks/useKeyboardNavigation.d.ts +3 -0
- package/types/list/common-hooks/utils/isSelected.d.ts +2 -0
- package/types/{vuu-ui-controls/src/list → list}/listTypes.d.ts +6 -12
- package/types/list/useList.d.ts +3 -0
- package/types/list/useListDrop.d.ts +15 -0
- package/types/{vuu-ui-controls/src/tabstrip → tabstrip}/Tab.d.ts +1 -1
- package/types/{vuu-ui-controls/src/tabstrip → tabstrip}/TabMenuOptions.d.ts +1 -1
- package/types/{vuu-ui-controls/src/tabstrip → tabstrip}/TabsTypes.d.ts +1 -1
- package/types/vuu-input/VuuInput.d.ts +13 -0
- package/types/vuu-popups/src/dialog/Dialog.d.ts +0 -8
- package/types/vuu-popups/src/dialog/index.d.ts +0 -1
- package/types/vuu-popups/src/index.d.ts +0 -8
- package/types/vuu-popups/src/menu/ContextMenu.d.ts +0 -16
- package/types/vuu-popups/src/menu/MenuList.d.ts +0 -43
- package/types/vuu-popups/src/menu/context-menu-provider.d.ts +0 -10
- package/types/vuu-popups/src/menu/index.d.ts +0 -4
- package/types/vuu-popups/src/menu/key-code.d.ts +0 -12
- package/types/vuu-popups/src/menu/list-dom-utils.d.ts +0 -4
- package/types/vuu-popups/src/menu/use-cascade.d.ts +0 -25
- package/types/vuu-popups/src/menu/use-items-with-ids-next.d.ts +0 -13
- package/types/vuu-popups/src/menu/use-keyboard-navigation.d.ts +0 -27
- package/types/vuu-popups/src/menu/useContextMenu.d.ts +0 -20
- package/types/vuu-popups/src/menu/utils.d.ts +0 -2
- package/types/vuu-popups/src/popup/Popup.d.ts +0 -10
- package/types/vuu-popups/src/popup/index.d.ts +0 -3
- package/types/vuu-popups/src/popup/popup-service.d.ts +0 -59
- package/types/vuu-popups/src/popup/useAnchoredPosition.d.ts +0 -12
- package/types/vuu-popups/src/popup-menu/PopupMenu.d.ts +0 -16
- package/types/vuu-popups/src/popup-menu/index.d.ts +0 -1
- package/types/vuu-popups/src/portal/Portal.d.ts +0 -30
- package/types/vuu-popups/src/portal/index.d.ts +0 -1
- package/types/vuu-popups/src/portal-deprecated/PortalDeprecated.d.ts +0 -8
- package/types/vuu-popups/src/portal-deprecated/index.d.ts +0 -3
- package/types/vuu-popups/src/portal-deprecated/portal-utils.d.ts +0 -1
- package/types/vuu-popups/src/portal-deprecated/render-portal.d.ts +0 -10
- package/types/vuu-popups/src/prompt/Prompt.d.ts +0 -14
- package/types/vuu-popups/src/prompt/index.d.ts +0 -1
- package/types/vuu-popups/src/tooltip/Tooltip.d.ts +0 -12
- package/types/vuu-popups/src/tooltip/index.d.ts +0 -2
- package/types/vuu-popups/src/tooltip/useAnchoredPosition.d.ts +0 -12
- package/types/vuu-popups/src/tooltip/useTooltip.d.ts +0 -16
- package/types/vuu-ui-controls/src/combo-box/ComboBox.d.ts +0 -18
- package/types/vuu-ui-controls/src/combo-box/useCombobox.d.ts +0 -22
- package/types/vuu-ui-controls/src/common-hooks/useSelection.d.ts +0 -8
- package/types/vuu-ui-controls/src/dropdown/Dropdown.d.ts +0 -10
- package/types/vuu-ui-controls/src/dropdown/useDropdown.d.ts +0 -13
- package/types/vuu-ui-controls/src/list/List.d.ts +0 -7
- package/types/vuu-ui-controls/src/list/common-hooks/useKeyboardNavigation.d.ts +0 -3
- package/types/vuu-ui-controls/src/list/common-hooks/utils/isSelected.d.ts +0 -2
- package/types/vuu-ui-controls/src/list/useList.d.ts +0 -3
- package/types/vuu-ui-controls/src/vuu-input/VuuInput.d.ts +0 -10
- package/types/vuu-utils/src/DataWindow.d.ts +0 -39
- package/types/vuu-utils/src/array-utils.d.ts +0 -6
- package/types/vuu-utils/src/box-utils.d.ts +0 -9
- package/types/vuu-utils/src/column-utils.d.ts +0 -130
- package/types/vuu-utils/src/common-types.d.ts +0 -6
- package/types/vuu-utils/src/component-registry.d.ts +0 -23
- package/types/vuu-utils/src/cookie-utils.d.ts +0 -1
- package/types/vuu-utils/src/data-utils.d.ts +0 -14
- package/types/vuu-utils/src/date-utils.d.ts +0 -7
- package/types/vuu-utils/src/debug-utils.d.ts +0 -9
- package/types/vuu-utils/src/event-emitter.d.ts +0 -13
- package/types/vuu-utils/src/filter-utils.d.ts +0 -14
- package/types/vuu-utils/src/formatting-utils.d.ts +0 -9
- package/types/vuu-utils/src/getUniqueId.d.ts +0 -1
- package/types/vuu-utils/src/group-utils.d.ts +0 -3
- package/types/vuu-utils/src/html-utils.d.ts +0 -12
- package/types/vuu-utils/src/index.d.ts +0 -34
- package/types/vuu-utils/src/input-utils.d.ts +0 -2
- package/types/vuu-utils/src/invariant.d.ts +0 -1
- package/types/vuu-utils/src/itemToString.d.ts +0 -2
- package/types/vuu-utils/src/json-utils.d.ts +0 -6
- package/types/vuu-utils/src/keyboard-utils.d.ts +0 -12
- package/types/vuu-utils/src/keyset.d.ts +0 -11
- package/types/vuu-utils/src/logging-utils.d.ts +0 -44
- package/types/vuu-utils/src/menu-utils.d.ts +0 -2
- package/types/vuu-utils/src/nanoid/index.d.ts +0 -1
- package/types/vuu-utils/src/perf-utils.d.ts +0 -5
- package/types/vuu-utils/src/range-utils.d.ts +0 -24
- package/types/vuu-utils/src/round-decimal.d.ts +0 -1
- package/types/vuu-utils/src/row-utils.d.ts +0 -7
- package/types/vuu-utils/src/screenshot-utils.d.ts +0 -6
- package/types/vuu-utils/src/selection-utils.d.ts +0 -27
- package/types/vuu-utils/src/sort-utils.d.ts +0 -5
- package/types/vuu-utils/src/text-utils.d.ts +0 -2
- package/types/vuu-utils/src/url-utils.d.ts +0 -2
- /package/types/{vuu-ui-controls/src/combo-box → combo-box}/index.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/common-hooks → common-hooks}/collectionProvider.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/common-hooks → common-hooks}/index.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/common-hooks → common-hooks}/itemToString.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/common-hooks → common-hooks}/use-resize-observer.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/common-hooks → common-hooks}/useCollectionItems.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/common-hooks → common-hooks}/useControlled.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/drag-drop → drag-drop}/DragDropProvider.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/drag-drop → drag-drop}/DragDropState.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/drag-drop → drag-drop}/Draggable.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/drag-drop → drag-drop}/DropIndicator.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/drag-drop → drag-drop}/dragDropTypesNext.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/drag-drop → drag-drop}/index.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/drag-drop → drag-drop}/useAutoScroll.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/drag-drop → drag-drop}/useDragDropIndicator.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/drag-drop → drag-drop}/useDragDropNaturalMovementNext.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/drag-drop → drag-drop}/useDragDropNext.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/drag-drop → drag-drop}/useDropIndicator.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/drag-drop → drag-drop}/useGlobalDragDrop.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/drag-drop → drag-drop}/useTransition.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/dropdown → dropdown}/DropdownBase.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/dropdown → dropdown}/DropdownButton.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/dropdown → dropdown}/index.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/dropdown → dropdown}/useDropdownBase.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/editable → editable}/editable-utils.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/editable → editable}/index.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/editable → editable}/useEditableText.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/editable-label → editable-label}/EditableLabel.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/editable-label → editable-label}/index.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/expando-input → expando-input}/ExpandoInput.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/expando-input → expando-input}/index.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/inputs → inputs}/Checkbox.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/inputs → inputs}/RadioButton.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/inputs → inputs}/index.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/instrument-search → instrument-picker}/SearchCell.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/instrument-search → instrument-picker}/moving-window.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/instrument-search → instrument-search}/InstrumentSearch.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/instrument-search → instrument-search}/index.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/list → list}/CheckboxIcon.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/list → list}/ChevronIcon.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/list → list}/Highlighter.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/list → list}/ListItem.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/list → list}/ListItemGroup.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/list → list}/ListItemHeader.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/list → list}/RadioIcon.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/list → list}/VirtualizedList.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/list → list}/common-hooks/index.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/list → list}/common-hooks/keyUtils.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/list → list}/common-hooks/list-dom-utils.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/list → list}/common-hooks/useCollapsibleGroups.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/list → list}/common-hooks/useImperativeScrollingAPI.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/list → list}/common-hooks/useTypeahead.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/list → list}/common-hooks/useViewportTracking.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/list → list}/common-hooks/utils/collection-item-utils.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/list → list}/common-hooks/utils/filter-utils.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/list → list}/common-hooks/utils/index.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/list → list}/index.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/list → list}/keyset.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/list → list}/useListHeight.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/list → list}/useScrollPosition.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/list → list}/useVirtualization.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/price-ticker → price-ticker}/PriceTicker.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/price-ticker → price-ticker}/index.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/tabstrip → tabstrip}/TabMenu.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/tabstrip → tabstrip}/Tabstrip.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/tabstrip → tabstrip}/index.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/tabstrip → tabstrip}/tabstrip-dom-utils.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/tabstrip → tabstrip}/useAnimatedSelectionThumb.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/tabstrip → tabstrip}/useKeyboardNavigation.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/tabstrip → tabstrip}/useSelection.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/tabstrip → tabstrip}/useTabstrip.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/tree → tree}/Tree.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/tree → tree}/hierarchical-data-utils.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/tree → tree}/index.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/tree → tree}/key-code.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/tree → tree}/list-dom-utils.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/tree → tree}/use-collapsible-groups.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/tree → tree}/use-hierarchical-data.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/tree → tree}/use-items-with-ids.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/tree → tree}/use-keyboard-navigation.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/tree → tree}/use-selection.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/tree → tree}/use-tree-keyboard-navigation.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/tree → tree}/use-viewport-tracking.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/tree → tree}/useTree.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/utils → utils}/escapeRegExp.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/utils → utils}/forwardCallbackProps.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/utils → utils}/index.d.ts +0 -0
- /package/types/{vuu-ui-controls/src/vuu-input → vuu-input}/index.d.ts +0 -0
package/index.css
CHANGED
|
@@ -245,15 +245,13 @@
|
|
|
245
245
|
--vuuDraggable-transitionProp: height;
|
|
246
246
|
--vuuMeasuredContainer-height: var(--computed-list-height);
|
|
247
247
|
background: var(--list-background);
|
|
248
|
-
border-color: var(--salt-container-primary-borderColor);
|
|
249
|
-
border-style: var(--list-borderStyle);
|
|
250
|
-
border-width: var(--list-borderWidth);
|
|
251
248
|
height: var(--saltList-height, var(--list-height));
|
|
252
249
|
max-height: var(--list-maxHeight);
|
|
253
250
|
outline: none;
|
|
254
251
|
position: relative;
|
|
255
252
|
user-select: none;
|
|
256
253
|
width: var(--saltList-width, auto);
|
|
254
|
+
padding: 0 1px;
|
|
257
255
|
}
|
|
258
256
|
.vuuList-contentSized {
|
|
259
257
|
box-sizing: content-box;
|
|
@@ -498,6 +496,7 @@
|
|
|
498
496
|
|
|
499
497
|
/* src/inputs/Checkbox.css */
|
|
500
498
|
.vuuCheckbox {
|
|
499
|
+
--vuuCheckboxIcon-background-checked: var(--vuu-color-purple-10);
|
|
501
500
|
display: flex;
|
|
502
501
|
height: 24px;
|
|
503
502
|
align-items: center;
|
|
@@ -543,6 +542,39 @@ input[type=radio] {
|
|
|
543
542
|
top: 0;
|
|
544
543
|
}
|
|
545
544
|
|
|
545
|
+
/* src/instrument-picker/SearchCell.css */
|
|
546
|
+
.vuuSearchCell {
|
|
547
|
+
--vuu-icon-left: 0;
|
|
548
|
+
--vuu-icon-size: 16px;
|
|
549
|
+
--vuu-icon-top: 0px;
|
|
550
|
+
align-items: center;
|
|
551
|
+
color: var(--background-cell-color);
|
|
552
|
+
display: flex;
|
|
553
|
+
gap: 4px;
|
|
554
|
+
padding: 0 8px 0 8px;
|
|
555
|
+
position: relative;
|
|
556
|
+
z-index: -1;
|
|
557
|
+
}
|
|
558
|
+
|
|
559
|
+
/* src/instrument-picker/InstrumentPicker.css */
|
|
560
|
+
.vuuInstrumentPicker {
|
|
561
|
+
height: 100%;
|
|
562
|
+
padding: var(--vuuInstrumentPicker-padding, 12px);
|
|
563
|
+
display: flex;
|
|
564
|
+
flex-direction: column;
|
|
565
|
+
}
|
|
566
|
+
.vuuInstrumentPicker-inputField {
|
|
567
|
+
--vuu-icon-size: 16px;
|
|
568
|
+
flex: 0 0 40px;
|
|
569
|
+
}
|
|
570
|
+
.vuuInstrumentPicker-list {
|
|
571
|
+
background-color: var(--salt-container-primary-background);
|
|
572
|
+
flex: 1 1 auto;
|
|
573
|
+
}
|
|
574
|
+
.vuuInstrumentPicker .vuuTableNextCell {
|
|
575
|
+
padding: 0;
|
|
576
|
+
}
|
|
577
|
+
|
|
546
578
|
/* src/instrument-search/SearchCell.css */
|
|
547
579
|
.vuuSearchCell {
|
|
548
580
|
--vuu-icon-left: 0;
|
package/index.css.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../packages/vuu-ui-controls/src/dropdown/Dropdown.css", "../../../packages/vuu-ui-controls/src/dropdown/DropdownButton.css", "../../../packages/vuu-ui-controls/src/list/Highlighter.css", "../../../packages/vuu-ui-controls/src/list/CheckboxIcon.css", "../../../packages/vuu-ui-controls/src/list/ListItem.css", "../../../packages/vuu-ui-controls/src/drag-drop/Draggable.css", "../../../packages/vuu-ui-controls/src/list/List.css", "../../../packages/vuu-ui-controls/src/list/RadioIcon.css", "../../../packages/vuu-ui-controls/src/list/ChevronIcon.css", "../../../packages/vuu-ui-controls/src/editable-label/EditableLabel.css", "../../../packages/vuu-ui-controls/src/expando-input/ExpandoInput.css", "../../../packages/vuu-ui-controls/src/inputs/Checkbox.css", "../../../packages/vuu-ui-controls/src/inputs/RadioButton.css", "../../../packages/vuu-ui-controls/src/instrument-search/SearchCell.css", "../../../packages/vuu-ui-controls/src/instrument-search/InstrumentSearch.css", "../../../packages/vuu-ui-controls/src/price-ticker/PriceTicker.css", "../../../packages/vuu-ui-controls/src/tabstrip/Tabstrip.css", "../../../packages/vuu-ui-controls/src/tabstrip/TabMenu.css", "../../../packages/vuu-ui-controls/src/tabstrip/Tab.css", "../../../packages/vuu-ui-controls/src/tree/Tree.css"],
|
|
4
|
-
"sourcesContent": [".vuuDropdown {\n --saltIcon-margin: 2px 0 0 8px;\n --saltButton-borderStyle: solid;\n --saltButton-borderColor: var(--salt-editable-borderColor);\n --saltButton-borderWidth: 1px;\n --saltButton-borderRadius: 6px;\n --saltButton-height: var(--vuuDropdown-height, auto);\n\n display: inline-block;\n line-height: 0;\n position: relative;\n width: var(--vuuDropdown-width, auto);\n}\n\n.vuuDropdown-fullWidth {\n width: 100%;\n}\n\n.vuuDropdown-popup {\n background: var(--salt-container-primary-background);\n z-index: calc(var(--salt-zIndex-flyover) - 1);\n}\n\n.vuuDropdown-popup-component {\n --vuuList-borderStyle: none;\n}\n\n.vuuDropdownButton {\n width: 100%;\n}", ".vuuDropdownButton {\n --saltButton-background-hover: var(--salt-actionable-secondary-background);\n --saltButton-background-active: var(--salt-actionable-secondary-background);\n --saltButton-fontWeight: var(--salt-text-fontWeight-strong); /* TODO: Check with design */\n --saltButton-textAlign: left;\n --saltButton-textTransform: none;\n --saltButton-width: 100%;\n\n --vuu-icon-size: 16px;\n}\n\n.vuuDropdownButton:active {\n --saltIcon-color: var(--salt-actionable-secondary-foreground);\n --saltButton-text-color-active: var(--salt-actionable-secondary-foreground);\n}\n\n.vuuDropdownButton-fullwidth {\n width: 100%;\n}\n\n.vuuDropdownButton-content {\n align-items: center;\n flex: 1;\n width: 100%;\n display: flex;\n white-space: nowrap;\n}\n\n.vuuDropdownButton-buttonLabel {\n display: inline-block;\n letter-spacing: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 100%;\n}\n\n.vuuDropdownButton-formField.saltButton:focus,\n.vuuDropdownButton-formField.saltButton:focus-visible {\n outline: none;\n}\n", ".saltHighlighter-highlight {\n font-weight: var(--salt-text-fontWeight-strong); /* TODO: Check with design */\n}\n", ".vuuCheckboxIcon {\n --vuu-icon-size: 12px;\n --vuu-icon-left: -1px;\n --vuu-icon-top: -1px;\n --vuu-icon-svg: var(--vuu-svg-tick);\n border-style: solid;\n border-color: var(--vuuCheckboxIcon-borderColor, var(--salt-selectable-borderColor));\n border-radius: var(--vuuCheckboxIcon-borderRadius, 3px);\n border-width: 1px;\n display: inline-block;\n height: var(--vuuCheckboxIcon-size, 12px);\n position: relative;\n width: var(--vuuCheckboxIcon-size, 12px);\n}\n\n.vuuCheckboxIcon-checked {\n background-color: var(--vuuCheckboxIcon-background-checked, var(--salt-selectable-background-selected));\n border-color: var(--vuuCheckboxIcon-borderColor-checked, var(--salt-selectable-borderColor-selected));\n}\n\n.vuuCheckboxIcon-checked:after {\n content: \"\";\n background-color: white;\n left: var(--vuu-icon-left, auto);\n height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));\n -webkit-mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n mask-repeat: no-repeat;\n -webkit-mask-repeat: no-repeat;\n position: absolute;\n top: var(--vuu-icon-top, auto);\n width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));\n}", ".vuuListItem {\n /* Color */\n --list-item-text-color: var(--salt-text-primary-foreground);\n --list-item-background: var(--vuuList-item-background, var(--salt-selectable-background));\n /* --list-item-selected-focus-outlineColor: var(--salt-color-white); TODO: Check token with design */\n --list-item-text-color-active: var(--salt-text-primary-foreground);\n --list-item-background-active: var(--salt-selectable-background-selected);\n --list-item-alignItems: center;\n}\n\n.vuuListItem.vuuHighlighted {\n --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-hover);\n --list-item-background: var(--salt-selectable-background-hover);\n}\n\n.vuuListItemHeader {\n font-weight: var(--salt-text-fontWeight-strong); /* TODO: Check token with design */\n}\n\n.vuuListItemHeader[data-sticky] {\n position: sticky;\n top: 0;\n z-index: 1;\n}\n\n.vuuListItem {\n color: var(--list-item-text-color);\n cursor: var(--vuuList-item-cursor, pointer);\n background: var(--vuuList-item-background, var(--list-item-background));\n font-size: var(--salt-text-fontSize);\n text-align: var(--salt-text-textAlign);\n line-height: var(--salt-text-lineHeight);\n height: var(--vuuList-item-height, var(--list-item-height, auto));\n /* Replaced border-bottom with margin. In design spec, the height of the items should not include gap */\n margin-bottom: var(--list-item-gap);\n padding: 0 var(--vuuListItem-padding, var(--salt-size-unit));\n left: 0;\n right: 0;\n display: flex;\n position: relative;\n align-items: var(--list-item-alignItems);\n white-space: nowrap;\n}\n\n.vuuListItem:last-child {\n margin-bottom: 0px;\n}\n\n.vuuListItem-checkbox {\n --list-item-background-active: var(--salt-selectable-background);\n --list-item-text-color-active: var(--salt-text-primary-foreground);\n --list-item-text-padding: 0 0 0 var(--salt-size-unit);\n}\n\n.vuuListItem[aria-selected=\"true\"]:not(.vuuListItem-checkbox) {\n --list-item-background: var(--list-item-background-active);\n color: var(--list-item-text-color-active);\n}\n\n.vuuListItem.vuuDisabled {\n --list-item-text-color: var(--salt-text-primary-foreground-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.vuuListItem.vuuFocusVisible {\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-offset: -2px;\n outline-color: var(--salt-focused-outlineColor);\n}\n\n.vuuListItem.vuuFocusVisible:after {\n content: none;\n}\n\n.vuuListItem[aria-selected=\"true\"]:not(.vuuListItem-checkbox).vuuFocusVisible {\n outline-color: var(--list-item-selected-focus-outlineColor);\n}\n\n.vuuListItem-textWrapper {\n flex: 1;\n overflow: hidden;\n padding: var(--list-item-text-padding, 0px);\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.vuuListItem-proxy {\n position: absolute !important;\n visibility: hidden;\n}\n.vuuDraggable-list-item {\n --vuuList-item-height: 24px;\n background-color: white;\n}\n\n.vuuListItem.vuuDraggable-dragAway {\n display: none;\n}", ".vuuDraggable {\n background: transparent;\n box-shadow: var(--salt-overlayable-shadow-drag);\n cursor: var(--salt-draggable-grab-cursor-active);\n position: absolute;\n opacity: .95;\n z-index: 2000;\n}\n\n.vuuDraggable-spacer {\n display: var(--vuuDraggable-display, inline-block);\n height: var(--vuuDraggable-spacer-height, var(--tabstrip-height));\n transition: var(--vuuDraggable-transitionProp, width) 0.3s ease;\n width: var(--vuuDraggable-spacer-width, 0);\n}\n\n.vuuDraggable-dropIndicatorPosition {\n display: var(--saltDraggable-display, inline-block);\n /* height: var(--saltDraggable-spacer-height, var(--tabstrip-height)); */\n /* width: var(--saltDraggable-spacer-width, 0); */\n height: 0px;\n width: 100%;\n}\n\n.vuuDraggable-dropIndicatorContainer {\n transition: var(--vuuDraggable-transitionProp, top) 0.2s ease;\n}\n\n.vuuDraggable-dropIndicator {\n /* height: var(--saltDraggable-spacer-height, var(--tabstrip-height)); */\n /* width: var(--saltDraggable-spacer-width, 0); */\n background-color: var(--salt-palette-accent-background);\n height: 2px;\n width: 100%;\n}\n\n.vuuDraggable-dropIndicator:before {\n content: '';\n width: 6px;\n height: 6px;\n border-radius: 3px;\n background-color: var(--salt-palette-accent-background);\n position: absolute;\n top: -2px;\n left: -3px;\n}\n\n.vuuDraggable-settling {\n transition-property: left, top;\n transition-duration: .15s;\n transition-timing-function: ease-out;\n}\n\n.vuuDraggable-spacer {\n order: 1;\n}", ".vuuList {\n --list-background: var(--salt-container-primary-background);\n --list-borderStyle: var(--vuuList-borderStyle,var(--salt-container-borderStyle));\n --list-borderWidth: var(--salt-size-border);\n --list-height: auto;\n --list-item-height: var(--salt-size-stackable);\n --list-item-gap: 0px;\n --list-maxHeight: 100%;\n --vuuDraggable-display: block;\n --vuuDraggable-spacer-height: 0;\n --vuuDraggable-spacer-width: 100%;\n --vuuDraggable-transitionProp: height;\n --vuuMeasuredContainer-height: var(--computed-list-height);\n\n background: var(--list-background);\n border-color: var(--salt-container-primary-borderColor);\n border-style: var(--list-borderStyle);\n border-width: var(--list-borderWidth);\n height: var(--saltList-height, var(--list-height));\n max-height: var(--list-maxHeight);\n outline: none;\n position: relative;\n user-select: none;\n width: var(--saltList-width, auto);\n}\n\n.vuuList-contentSized {\n box-sizing: content-box;\n}\n\n.vuuList-borderless {\n --list-borderStyle: none;\n}\n\n/* virtualised list */\n.vuuList-viewport {\n height: var(--computed-list-height, var(--measured-px-height));\n overflow: auto;\n width: var(--measured-px-width);\n}\n\n.vuuListItemHeader {\n --saltList-item-background: var(--list-item-header-background);\n color: var(--list-item-header-color);\n}\n\n.vuuListItemHeader[data-sticky=\"true\"] {\n --saltList-item-background: var(--list-background);\n position: sticky;\n top: 0;\n z-index: 1;\n}\n\n.vuuList-collapsible .vuuListItemHeader:after {\n border-width: var(--checkbox-borderWidth);\n border-color: var(--checkbox-borderColor);\n content: var(--list-item-header-twisty-content);\n -webkit-mask: var(--list-svg-chevron-down) center center/12px 12px no-repeat;\n mask: var(--list-svg-chevron-down) center center/12px 12px no-repeat;\n background: var(--list-item-header-twisty-color);\n height: 12px;\n left: var(--list-item-header-twisty-left);\n right: var(--list-item-header-twisty-right);\n margin-top: -8px;\n position: absolute;\n top: var(--list-item-header-twisty-top);\n transition: transform 0.3s;\n width: 12px;\n}\n.vuuListItemHeader[aria-expanded=\"false\"]:after {\n transform: rotate(-90deg);\n}\n\n/* Selection */\n\n.vuuList-scrollingContentContainer {\n box-sizing: inherit;\n position: relative;\n}\n\n.vuuList-virtualized .vuuListItem {\n line-height: 30px;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n will-change: transform;\n}\n.vuuList.saltFocusVisible:after {\n inset: 2px;\n}\n", ".vuuRadioIcon {\n --vuu-icon-size: 12px;\n --vuu-icon-left: -1px;\n --vuu-icon-top: -1px;\n --vuu-icon-svg: var(--vuu-svg-radio);\n border-style: solid;\n border-color: var(--vuuRadioIcon-borderColor, var(--salt-selectable-borderColor));\n border-radius: 50%;\n border-width: 1px;\n display: inline-block;\n height: var(--vuuRadioIcon-size, 12px);\n position: relative;\n width: var(--vuuRadioIcon-size, 12px);\n}\n\n.vuuRadioIcon-checked {\n background-image: var(--vuu-svg-radio);\n border: none;\n background-repeat: no-repeat;\n}\n\n.vuuRadioIcon-checked:after {\n content: \"\";\n left: var(--vuu-icon-left, auto);\n height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));\n -webkit-mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n mask-repeat: no-repeat;\n -webkit-mask-repeat: no-repeat;\n position: absolute;\n top: var(--vuu-icon-top, auto);\n width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));\n}\n", ".vuuChevronIcon {\n --vuu-icon-size: 14px;\n --vuu-icon-left: -1px;\n --vuu-icon-top: -1px;\n height: var(--vuuChevronIcon-size, 14px);\n position: relative;\n width: var(--vuuChevronIcon-size, 14px);\n cursor: pointer;\n}\n\n.vuuChevronIcon:after {\n content: \"\";\n background-color: #777C94;\n left: var(--vuu-icon-left, auto);\n height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));\n -webkit-mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n mask-repeat: no-repeat;\n -webkit-mask-repeat: no-repeat;\n position: absolute;\n top: var(--vuu-icon-top, auto);\n width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));\n}\n\n.vuuChevronIcon.up {\n --vuu-icon-svg: var(--vuu-svg-chevron-up);\n}\n\n.vuuChevronIcon.down {\n --vuu-icon-svg: var(--vuu-svg-chevron-down);\n}\n\n.vuuChevronIcon.left {\n --vuu-icon-svg: var(--vuu-svg-chevron-left);\n}\n\n.vuuChevronIcon.right {\n --vuu-icon-svg: var(--vuu-svg-chevron-right);\n}\n", ".vuuEditableLabel {\n --editableLabel-padding: var(--vuuEditableLabel-padding, 6px);\n --editableLabel-height: var(--vuuEditableLabel-height, 26px);\n --saltInput-background: transparent;\n --saltInput-height: calc(var(--editableLabel-height) - 4px);\n --saltInput-minWidth: 14px;\n\n color: inherit;\n cursor: default;\n display: flex;\n flex-direction: column;\n font-size: var(--salt-text-fontSize);\n height: var(--editableLabel-height);\n justify-content: center;\n max-width: 170px;\n outline: none;\n overflow: hidden;\n padding: 0 var(--editableLabel-padding);\n position: relative;\n text-overflow: ellipsis;\n white-space: nowrap;\n z-index: var(--salt-zIndex-default);\n}\n\n.vuuEditableLabel:before {\n content: attr(data-text);\n display: block;\n height: 0px;\n visibility: hidden;\n white-space: pre-wrap;\n}\n\n.vuuEditableLabel .saltInput {\n font-weight: var(--salt-text-fontWeight);\n left: var(--editableLabel-padding, 0);\n padding: 0;\n outline-style: none;\n position: absolute;\n right: var(--editableLabel-padding, 0);\n top: var(--saltEditableLabel-top, 2px);\n width: auto;\n}\n\n.vuuEditableLabel .saltInput-activationIndicator {\n display: none;\n}\n\n.vuuEditableLabel-input {\n background-color: transparent;\n border: none;\n box-sizing: content-box;\n color: inherit;\n display: block;\n flex: 1;\n font: inherit;\n height: 20px;\n margin:0;\n min-width:0;\n outline: none;\n padding: 0;\n}\n\n.vuuEditableLabel-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n", ".vuuExpandoInput {\n\n --salt-editable-secondary-background: white;\n --expandoInput-height: var(--vuuExpandoInput-height, 26px);\n --expandoInput-padding: var(--vuuExpandoInput-padding, 6px);\n\n --saltInput-height: calc(var(--vuuExpandoInput-height) - 4px);\n --saltInput-minWidth: var(--vuuExpandoInput-minWidth, 8px);\n \n border: var(--vuuExpandoInput-border, none);\n border-radius: var(--vuuExpandoInput-borderRadius, 0);\n color: inherit;\n cursor: default;\n display: inline-block;\n font-size: var(--salt-text-fontSize);\n height: var(--expandoInput-height);\n min-width: calc(var(--saltInput-minWidth) + 2 * var(--expandoInput-padding));\n outline: none;\n padding: 0 var(--expandoInput-padding);\n position: relative;\n\n}\n\n.vuuExpandoInput:before {\n content: attr(data-text);\n display: block;\n height: 0px;\n visibility: hidden;\n white-space: pre-wrap;\n }\n \n .vuuExpandoInput .saltInput {\n font-weight: var(--salt-text-fontWeight);\n left: var(--expandoInput-padding, 0);\n padding: 0;\n outline-style: none;\n position: absolute;\n right: var(--expandoInput-padding, 0);\n top: var(--vuuExpandoInput-top, 2px);\n width: auto;\n }\n \n .vuuExpandoInput .saltInput-activationIndicator {\n display: none;\n }\n \n .vuuExpandoInput-input {\n background-color: transparent;\n border: none;\n box-sizing: content-box;\n display: block;\n flex: 1;\n font: inherit;\n height: 20px;\n margin:0;\n min-width:0;\n outline: none;\n padding: 0;\n }\n ", ".vuuCheckbox {\n display: flex;\n height: 24px;\n align-items: center;\n gap: 6px;\n color: var(--light-text-primary, #15171B);\n font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;\n font-size: 12px;\n font-weight: 400;\n cursor: pointer;\n}", ".vuuRadioButton {\n display: flex;\n height: 24px;\n align-items: center;\n gap: 6px;\n color: var(--light-text-primary, #15171B);\n font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;\n font-size: 12px;\n font-weight: 400;\n cursor: pointer;\n}\n\n.radio {\n position: relative;\n height: 12px;\n}\n\ninput[type=\"radio\"] {\n\tposition: absolute;\n appearance: none;\n\twidth: 100%;\n height: 100%;\n border-radius: 50%;\n margin: 0;\n top: 0;\n}", "\n.vuuSearchCell {\n --vuu-icon-left: 0;\n --vuu-icon-size: 16px;\n --vuu-icon-top: 0px;\n align-items: center;\n color: var(--background-cell-color);\n display: flex;\n gap: 4px;\n padding: 0 8px 0 8px;\n position: relative;\n z-index: -1;\n}\n\n", ".vuuInstrumentSearch {\n height: 100%;\n padding: var(--vuuInstrumentSearch-padding, 12px);\n display: flex;\n flex-direction: column;\n}\n\n.vuuInstrumentSearch-inputField {\n --vuu-icon-size: 16px;\n flex: 0 0 40px;\n}\n.vuuInstrumentSearch-list {\n background-color: var(--salt-container-primary-background);\n flex: 1 1 auto;\n}\n\n.vuuInstrumentSearch .vuuTableNextCell {\n padding: 0;\n}\n", "@property --price-ticker-color {\n syntax: '<color>'; /* <- defined as type number for the transition to work */\n initial-value: #15171B;\n inherits: false;\n}\n \n.vuuPriceTicker {\n align-items: center;\n display: flex;\n font-size: var(--vuuPriceTicker-fontSize, var(--salt-text-fontSize));\n font-weight: var(--vuuPriceTicker-fontWeight, 700);\n transition-property: color;\n transition-duration: .3s;;\n}\n\n.vuuPriceTicker.up1 {\n --vuu-icon-color: var(--vuu-color-green-50);\n color: var(--vuu-color-green-50);\n animation-duration: 30s;\n }\n \n .vuuPriceTicker.up2 {\n --vuu-icon-color: var(--vuu-color-green-50);\n color: var(--vuu-color-green-50);\n animation-duration: 30s;\n }\n \n .vuuPriceTicker.down1 {\n --vuu-icon-transform: rotate(180deg);\n --vuu-icon-color: var(--vuu-color-red-50);\n color: var(--vuu-color-red-50);\n animation-duration: 30s;\n }\n \n .vuuPriceTicker.down2 {\n --vuu-icon-transform: rotate(180deg);\n --vuu-icon-color: var(--vuu-color-red-50);\n color: var(--vuu-color-red-50);\n animation-duration: 30s;\n }\n ", "/* Component class applied to the root element */\n.vuuTabstrip {\n --vuuOverflowContainer-background: transparent;\n /* --tabstrip-height: var(--vuuTabstrip-height, var(--salt-size-stackable)); */\n --tabstrip-dragging-display: none;\n --tabstrip-display: inline-flex;\n --tabstrip-background: transparent;\n\n align-self: var(--saltTabs-tabstrip-alignSelf, stretch);\n display: flex;\n font-size: var(--salt-text-fontSize);\n font-weight: var(--vuuTabstrip-fontWeight, var(--salt-text-fontWeight));\n min-width: 28px;\n position: relative;\n overflow: visible;\n width: var(--tabstrip-width);\n}\n\n/* Tabstrip orientation is horizontal */\n.vuuTabstrip-horizontal {\n --tabstrip-height: var(--vuuTabstrip-height, 28px);\n --tabstrip-width: var(--vuuTabstrip-width, 100%);\n --tab-height: var(--tabstrip-height);\n --tab-width: auto;\n --tab-thumb-height: 2px;\n --tab-thumb-left: var(--tab-thumb-offset, 0);\n --tab-thumb-top: auto;\n --tab-thumb-width: var(--tab-thumb-size, 100%);\n align-items: flex-start;\n border-bottom: var(--vuuTabstrip-borderBottom, solid 1px var(--salt-container-primary-borderColor));\n}\n\n/* Tabstrip orientation is vertical */\n.vuuTabstrip-vertical {\n --tabstrip-height: var(--vuuTabstrip-height, 100%);\n --tabstrip-width: var(--vuuTabstrip-width, 100px);\n --tab-height: 50px;\n --tab-width: 100%;\n --tab-thumb-height: 0;\n --tab-thumb-left: 0;\n --tab-thumb-top: var(--tab-thumb-offset, 0);\n --tab-thumb-width: 2px;\n\n align-self: flex-start;\n display: inline-flex;\n}\n\n.vuuTabstrip-draggingTab .vuuTab {\n pointer-events: none;\n}\n\n.vuuTabstrip-addTabButton {\n --saltButton-height: 20px;\n --saltButton-width: 20px;\n}\n\n.vuuTabstrip-overflowMenu.vuuDropdown {\n --saltIcon-margin: 2px 0 0 0px;\n}\n\n.vuuTabstrip-overflowMenu-open {\n --saltButton-background: var(--salt-actionable-secondary-background-active);\n --saltButton-text-color: var(--salt-actionable-secondary-text-color-active);\n}\n\n.vuuTabstrip-overflowMenu-open .saltButton {\n --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.vuuTabstrip-inner {\n width: 100%;\n align-items: center;\n display: flex;\n flex-basis: auto;\n flex-grow: 0;\n flex-shrink: 1;\n flex-wrap: wrap;\n justify-content: flex-start;\n line-height: var(--tabstrip-height);\n}\n\n.vuuTabstrip-vertical .vuuTabstrip-inner {\n flex-direction: column;\n height: auto;\n}\n\n.vuuTabstrip-centered .vuuTabstrip-inner {\n justify-content: center;\n}\n\n/* Styling applied to Draggable wrapper when used to drag a Tab */\n.vuuDraggable[class*=\"vuuTabstrip\"] {\n --tabstrip-display: flex;\n --tabstrip-height: 100%;\n --tabstrip-dragging-display: block;\n\n --tabs-tab-background: var(--salt-navigable-primary-background-hover);\n --tabs-tab-before-content: \"\";\n --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n --tabs-tab-before-height: var(--tab-activationIndicator-thumb-height);\n --tabs-tab-before-inset: var(--tab-activationIndicator-inset);\n --tabs-tab-before-width: var(--tab-activationIndicator-thumb-width);\n --tabs-tab-cursor: var(--salt-draggable-grab-cursor-active);\n --tabs-tab-position: static;\n\n font-size: 12px;\n}\n\n.vuuDraggable-tabstrip-horizontal {\n --tab-thumb-height: 2px;\n --tab-thumb-left: 0px;\n --tabstrip-height: 28px;\n line-height: var(--tabstrip-height);\n}\n\n\n.vuuDraggable[class*=\"tabstrip\"] .vuuTab[aria-selected=\"true\"]:before {\n --tabs-tab-before-background: var(--salt-navigable-indicator-active);\n}\n\n/* [data-overflowed] {\n order: 99;\n visibility: hidden;\n} */\n\n.vuuTabstrip-overflowMenu-dropTarget:after {\n background: var(--salt-selectable-background-selected);\n content: \"\";\n position: absolute;\n height: 2px;\n left: 0;\n right: 0;\n bottom: 0;\n}\n", ".vuuTabMenu {\n top: -2px;\n}", "/* Class applied to root Tab element */\n.vuuTab {\n \n --saltEditableLabel-padding: 0;\n --saltEditableLabel-height: calc(var(--tabstrip-height) - 2px);\n --saltInputLegacy-minWidth: 4em;\n --saltEditableLabel-top: 2px;\n\n --tab-background: var(--vuuTab-background, var(--salt-navigable-primary-background));\n --tab-cursor: pointer;\n --tab-position: relative;\n}\n\n.vuuTab {\n align-items: center;\n align-self: stretch;\n background: var(--tab-background);\n border: none;\n border-radius: var(--vuuTab-borderRadius, 0);\n color: var(--salt-text-primary-foreground);\n cursor: var(--vuuTab-cursor, var(--tab-cursor));\n display: var(--tabstrip-display);\n gap: 8px;\n height: var(--vuuTabHeight, var(--tab-height));\n letter-spacing: var(--vuuTab-letterSpacing, var(--tab-letterSpacing, 0));\n min-width: var(--vuuTab-minWidth, 40px);\n outline: none;\n padding: var(--vuuTab-padding, 0 24px);\n position: var(--vuuTab-position, var(--tab-position));\n user-select: none;\n width: var(--tab-width)\n}\n\n/* Overrides characteristic used in saltFocusVisible */\n/* .vuuTab.saltFocusVisible:after {\n inset: 2px 2px 4px 2px;\n} */\n\n.vuuTab {\n margin: 0 var(--tab-spacing) 0 0;\n}\n\n.vuuTab-selected {\n background: var(--vuuTab-background-selected, var(--tab-background));\n color: var(--salt-text-primary-foreground);\n font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n/* main content aria of Tab */\n.vuuTab-main {\n align-items: center;;\n border: none;\n color: inherit;\n cursor: inherit;\n display: flex;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n height: calc(var(--tab-height) - var(--tab-thumb-height));\n margin-bottom: var(--tab-thumb-height);\n outline: none;\n position: relative;\n}\n\n.vuuTab-closeable .vuuTab-main {\n border-right: solid transparent var(--salt-size-unit);\n}\n\n.vuuTab .vuuTab-closeButton {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* the close Button on a closeable Tab*/\n.vuuTab-close-icon {\n display: none;\n}\n\n.salt-density-touch .vuuTab-close-icon,\n.salt-density-low .vuuTab-close-icon {\n display: block;\n}\n\n.salt-density-touch .vuuTab-close-icon-small,\n.salt-density-low .vuuTab-close-icon-small {\n display: none;\n}\n\n.vuuTab .vuuTab-text {\n display: inline-block;\n position: relative;\n overflow: hidden;\n text-align: var(--salt-text-textAlign-embedded);\n text-overflow: ellipsis;\n top: var(--vuuTab-top, var(--tab-top, auto));\n white-space: nowrap;\n /* ensure content sits above focus ring */\n z-index: var(--salt-zIndex-default);\n}\n\n.vuuTab .vuuTab-text:before {\n height: 0;\n content: attr(data-text);\n display: block;\n visibility: hidden;\n font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n/* FIXME: these are all focusVisible styles, but with a bespoke inset */\n.vuuTab-editing:after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 2px;\n outline-color: var(--salt-focused-outlineColor);\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-offset: -2px;\n}\n\n.vuuTab.vuuFocusVisible {\n background: var(--vuuTab-hover-background, var(--salt-navigable-primary-background-hover));\n outline-color: var(--vuuTab-focusVisible-color, var(--salt-focused-outlineColor));\n outline-style: dashed;\n outline-width: 1px;\n outline-offset: -1px;\n}\n\n.vuuTab:before {\n content: var(--tab-before-content, none);\n content: \"\";\n background: var(--tab-before-background);\n height: var(--tab-before-height);\n inset: var(--tab-before-inset);\n position: absolute;\n width: var(--tab-before-width);\n z-index: 1;\n}\n\n.vuuTabstrip-draggingTab .vuuTab-selected:before {\n --tab-before-content: \"\";\n --tab-before-background: var(--salt-navigable-indicator-color-active);\n --tab-before-height: var(--tab-thumb-height);\n --tab-before-inset: var(--tab-activationIndicator-inset);\n --tab-before-width: var(--tab-activationIndicator-thumb-width);\n}\n\n/* .vuuDraggable .vuuTab:before,\n.vuuTab:not(.vuuTab-selected).saltFocusVisible:before,\n.vuuTab:hover:not(.vuuTab-selected):before {\n --tab-before-content: \"\";\n --tab-before-background: var(--salt-navigable-indicator-hover);\n --tab-before-height: var(--tab-thumb-height);\n --tab-before-inset: var(--tab-activationIndicator-inset);\n --tab-before-width: var(--tab-activationIndicator-thumb-width);\n} */\n\n.vuuTab-selected:before {\n --tab-before-content: \"\";\n background: var(--salt-navigable-indicator-active);\n height: var(--tab-thumb-height);\n position: absolute;\n left: var(--tab-thumb-left);\n bottom: 0px; \n top: var(--tab-thumb-top, auto);\n transition: var(--tab-thumb-transition, none);\n width: var(--tab-thumb-width, 100%);\n}\n\n.vuuTab:hover:not(.vuuTab-closeHover) {\n background: var(--vuuTab-hover-background, var(--salt-navigable-primary-background-hover));\n}\n\n/* .vuuTabstrip.vuuTabThumb-noTransition .vuuTab-selected:before {\n transition: none; \n} */", ".vuuTree {\n --tree-node-collapse: var(--vuuTree-toggle-collapse, var(--svg-tree-node-collapse));\n --tree-node-expand: var(--vuuTree-toggle-expand, var(--svg-tree-node-expand));\n --tree-toggle-width: 12px;\n --tree-icon-color: var(--vuuTree-icon-color, #4c505b);\n --tree-node-expanded-transform: var(--vuuTree-node-expanded-transform, none);\n --tree-node-indent: 0px;\n\n --list-hilited-bg: var(--hw-list-hilited-bg, rgba(0, 0, 0, 0.1));\n --list-item-height: var(--hw-list-item-height, 30px);\n --list-item-padding: var(--hw-list-item-padding, 0 6px);\n --list-item-header-bg: var(--hw-list-item-header-bg, black);\n --list-item-header-color: var(--hw-list-item-header-color, white);\n --list-item-header-font-weight: bold;\n --list-item-header-twisty-color: black;\n --list-item-header-twisty-content: '';\n --list-item-header-twisty-top: 50%;\n --list-item-header-twisty-left: -18px;\n --list-item-header-twisty-right: auto;\n --list-item-selected-bg: var(--hw-list-selected-bg, #1ea7fd);\n --list-item-selected-color: white;\n --list-item-text-color: var(--hw-gray-800);\n --focus-visible-border-color: var(--hw-focus-visible-border-color, rgb(141, 154, 179));\n\n list-style: none;\n margin: 0;\n padding: 0 1px;\n font-size: var(--vuuTree-font-size, 14px);\n max-height: inherit;\n outline: none;\n overflow-y: auto;\n position: relative;\n user-select: none;\n}\n\n.vuuTree-viewport {\n --list-item-height: 30px;\n box-sizing: border-box;\n max-height: inherit;\n overflow: auto;\n}\n\n.vuuTree-scrollingContentContainer {\n box-sizing: inherit;\n position: relative;\n}\n\n.vuuTree-scrollingContentContainer .vuuTreeNode {\n line-height: 30px;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n will-change: transform;\n}\n\n.vuuTreeNode {\n list-style: none;\n}\n\n/* Leaf node or the div child of a collapsible node */\n.vuuTreeNode:not([aria-expanded]),\n.vuuTreeNode[aria-expanded] > .vuuTreeNode-label {\n --checkbox-border-color: black;\n --checkbox-border-width: 1px;\n --checkbox-tick: black;\n --list-item-padding-left: 6px;\n --svg-toggle: var(--tree-node-collapse);\n\n align-items: center;\n color: var(--list-item-text-color);\n display: flex;\n flex-wrap: nowrap;\n height: var(--list-item-height);\n line-height: var(--list-item-height);\n padding: var(--list-item-padding);\n padding-left: var(--padding-left);\n position: relative;\n cursor: default;\n margin: 0;\n white-space: nowrap;\n}\n\n.vuuTreeNode:not([aria-expanded]) {\n --padding-left: calc(\n var(--list-item-padding-left) + var(--tree-toggle-width) + var(--tree-node-indent)\n );\n}\n\n.vuuTreeNode[aria-expanded] > .vuuTreeNode-label {\n --padding-left: calc(\n var(--list-item-padding-left) + var(--tree-toggle-width) + var(--tree-node-indent)\n );\n}\n\n.vuuTreeNode-icon {\n background-color: var(--tree-icon-color);\n display: inline-block;\n height: 18px;\n margin-right: 6px;\n -webkit-mask: var(--vuu-icon-svg) center center/12px 12px no-repeat;\n mask: var(--vuu-icon-svg) center center/12px 12px no-repeat;\n flex: 0 0 18px;\n}\n\n.vuuTreeNode[aria-expanded] {\n flex-direction: column;\n}\n\n.vuuTreeNode[aria-expanded] {\n flex-direction: column;\n height: auto;\n}\n\n.vuuTreeNode > *[role='group'] {\n padding-left: 0px;\n}\n\n.vuuTreeNode {\n padding-left: calc(var(--padding-left) + var(--tree-node-indent));\n}\n\n.vuuTreeNode[aria-level='2'] {\n --tree-node-indent: 12px;\n}\n.vuuTreeNode[aria-level='3'] {\n --tree-node-indent: 24px;\n}\n.vuuTreeNode[aria-level='4'] {\n --tree-node-indent: 36px;\n}\n\n.vuuTreeNode:not(.focusVisible):not(.hwListItemHeader):not([aria-expanded])[data-highlighted],\n.vuuTreeNode:not(.focusVisible):not(.hwListItemHeader)[aria-expanded][data-highlighted]\n > div:first-child {\n background-color: var(--list-hilited-bg);\n}\n\n.vuuTreeNode-toggle {\n cursor: pointer;\n}\n\n.vuuTreeNode > .vuuTreeNode-toggle {\n display: inline-block;\n height: 100%;\n left: 0;\n position: absolute;\n width: calc(var(--list-item-padding-left) + var(--tree-toggle-width));\n}\n\n.vuuTreeNode[aria-expanded] > .vuuTreeNode-label:after {\n content: var(--list-item-header-twisty-content);\n -webkit-mask: var(--svg-toggle) center center/8px 8px no-repeat;\n mask: var(--svg-toggle) center center/8px 8px no-repeat;\n background-color: var(--list-item-header-twisty-color);\n height: 18px;\n margin-top: -9px;\n left: var(--tree-node-indent);\n position: absolute;\n top: var(--list-item-header-twisty-top);\n transition: transform 0.3s;\n width: 18px;\n}\n\n.vuuTreeNode[aria-selected='true'] {\n --list-item-header-twisty-color: var(--list-item-selected-color);\n}\n\n\n.vuuTreeNode:not(.focusVisible):focus {\n background-color: rgba(0, 0, 0, 0.1);\n}\n\n.vuuTreeNode:not([aria-expanded]).focusVisible:before,\n.vuuTreeNode[aria-expanded].focusVisible > div:first-child:before {\n content: '';\n position: absolute;\n top: 0px;\n left: var(--tree-focus-offset, 0px);\n right: 0;\n bottom: 0px;\n border: dotted var(--focus-visible-border-color) 2px;\n background-color: var(--list-hilited-bg);\n}\n\n\n.vuuTreeNode[aria-expanded='false'] > *:first-child:after {\n --svg-toggle: var(--tree-node-expand);\n}\n\n.vuuTreeNode[aria-expanded='true'] > *:first-child:after {\n transform: var(--tree-node-expanded-transform);\n}\n\n/* Selection */\n\n.vuuTree:not(.checkbox-only) .vuuTreeNode:not([aria-expanded])[aria-selected='true'],\n.vuuTree:not(.checkbox-only) .vuuTreeNode[aria-expanded][aria-selected='true'] > div:first-child {\n --checkbox-border-color: var(--list-item-selected-color);\n --checkbox-tick: var(--list-item-selected-color);\n --focus-visible-border-color: var(--list-item-selected-color);\n background-color: var(--list-item-selected-bg);\n color: var(--list-item-selected-color);\n}\n\n.with-checkbox .vuuTreeNode {\n padding-left: 28px;\n}\n\n.with-checkbox .vuuTreeNode:before {\n border-style: solid;\n border-width: var(--checkbox-border-width);\n border-color: var(--checkbox-border-color);\n content: '';\n height: 12px;\n left: 3px;\n margin-top: -7px;\n position: absolute;\n top: 50%;\n width: 12px;\n}\n"],
|
|
5
|
-
"mappings": ";AAAA;AACE;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;;;AC5BF;AACE;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AAAA;AAEE;AAAA;;;ACtCF;AACE;AAAA;;;ACDF;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;AC/BJ;AAEE;AACA;AAEA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAEF;AACE;AACA;AAAA;AAGF;AACE;AAAA;;;ACjGF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AAGA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AAGE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AAAA;;;ACtDF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;
|
|
3
|
+
"sources": ["../../../packages/vuu-ui-controls/src/dropdown/Dropdown.css", "../../../packages/vuu-ui-controls/src/dropdown/DropdownButton.css", "../../../packages/vuu-ui-controls/src/list/Highlighter.css", "../../../packages/vuu-ui-controls/src/list/CheckboxIcon.css", "../../../packages/vuu-ui-controls/src/list/ListItem.css", "../../../packages/vuu-ui-controls/src/drag-drop/Draggable.css", "../../../packages/vuu-ui-controls/src/list/List.css", "../../../packages/vuu-ui-controls/src/list/RadioIcon.css", "../../../packages/vuu-ui-controls/src/list/ChevronIcon.css", "../../../packages/vuu-ui-controls/src/editable-label/EditableLabel.css", "../../../packages/vuu-ui-controls/src/expando-input/ExpandoInput.css", "../../../packages/vuu-ui-controls/src/inputs/Checkbox.css", "../../../packages/vuu-ui-controls/src/inputs/RadioButton.css", "../../../packages/vuu-ui-controls/src/instrument-picker/SearchCell.css", "../../../packages/vuu-ui-controls/src/instrument-picker/InstrumentPicker.css", "../../../packages/vuu-ui-controls/src/instrument-search/SearchCell.css", "../../../packages/vuu-ui-controls/src/instrument-search/InstrumentSearch.css", "../../../packages/vuu-ui-controls/src/price-ticker/PriceTicker.css", "../../../packages/vuu-ui-controls/src/tabstrip/Tabstrip.css", "../../../packages/vuu-ui-controls/src/tabstrip/TabMenu.css", "../../../packages/vuu-ui-controls/src/tabstrip/Tab.css", "../../../packages/vuu-ui-controls/src/tree/Tree.css"],
|
|
4
|
+
"sourcesContent": [".vuuDropdown {\n --saltIcon-margin: 2px 0 0 8px;\n --saltButton-borderStyle: solid;\n --saltButton-borderColor: var(--salt-editable-borderColor);\n --saltButton-borderWidth: 1px;\n --saltButton-borderRadius: 6px;\n --saltButton-height: var(--vuuDropdown-height, auto);\n\n display: inline-block;\n line-height: 0;\n position: relative;\n width: var(--vuuDropdown-width, auto);\n}\n\n.vuuDropdown-fullWidth {\n width: 100%;\n}\n\n.vuuDropdown-popup {\n background: var(--salt-container-primary-background);\n z-index: calc(var(--salt-zIndex-flyover) - 1);\n}\n\n.vuuDropdown-popup-component {\n --vuuList-borderStyle: none;\n}\n\n.vuuDropdownButton {\n width: 100%;\n}", ".vuuDropdownButton {\n --saltButton-background-hover: var(--salt-actionable-secondary-background);\n --saltButton-background-active: var(--salt-actionable-secondary-background);\n --saltButton-fontWeight: var(--salt-text-fontWeight-strong); /* TODO: Check with design */\n --saltButton-textAlign: left;\n --saltButton-textTransform: none;\n --saltButton-width: 100%;\n\n --vuu-icon-size: 16px;\n}\n\n.vuuDropdownButton:active {\n --saltIcon-color: var(--salt-actionable-secondary-foreground);\n --saltButton-text-color-active: var(--salt-actionable-secondary-foreground);\n}\n\n.vuuDropdownButton-fullwidth {\n width: 100%;\n}\n\n.vuuDropdownButton-content {\n align-items: center;\n flex: 1;\n width: 100%;\n display: flex;\n white-space: nowrap;\n}\n\n.vuuDropdownButton-buttonLabel {\n display: inline-block;\n letter-spacing: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 100%;\n}\n\n.vuuDropdownButton-formField.saltButton:focus,\n.vuuDropdownButton-formField.saltButton:focus-visible {\n outline: none;\n}\n", ".saltHighlighter-highlight {\n font-weight: var(--salt-text-fontWeight-strong); /* TODO: Check with design */\n}\n", ".vuuCheckboxIcon {\n --vuu-icon-size: 12px;\n --vuu-icon-left: -1px;\n --vuu-icon-top: -1px;\n --vuu-icon-svg: var(--vuu-svg-tick);\n border-style: solid;\n border-color: var(--vuuCheckboxIcon-borderColor, var(--salt-selectable-borderColor));\n border-radius: var(--vuuCheckboxIcon-borderRadius, 3px);\n border-width: 1px;\n display: inline-block;\n height: var(--vuuCheckboxIcon-size, 12px);\n position: relative;\n width: var(--vuuCheckboxIcon-size, 12px);\n}\n\n.vuuCheckboxIcon-checked {\n background-color: var(--vuuCheckboxIcon-background-checked, var(--salt-selectable-background-selected));\n border-color: var(--vuuCheckboxIcon-borderColor-checked, var(--salt-selectable-borderColor-selected));\n}\n\n.vuuCheckboxIcon-checked:after {\n content: \"\";\n background-color: white;\n left: var(--vuu-icon-left, auto);\n height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));\n -webkit-mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n mask-repeat: no-repeat;\n -webkit-mask-repeat: no-repeat;\n position: absolute;\n top: var(--vuu-icon-top, auto);\n width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));\n}", ".vuuListItem {\n /* Color */\n --list-item-text-color: var(--salt-text-primary-foreground);\n --list-item-background: var(--vuuList-item-background, var(--salt-selectable-background));\n /* --list-item-selected-focus-outlineColor: var(--salt-color-white); TODO: Check token with design */\n --list-item-text-color-active: var(--salt-text-primary-foreground);\n --list-item-background-active: var(--salt-selectable-background-selected);\n --list-item-alignItems: center;\n}\n\n.vuuListItem.vuuHighlighted {\n --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-hover);\n --list-item-background: var(--salt-selectable-background-hover);\n}\n\n.vuuListItemHeader {\n font-weight: var(--salt-text-fontWeight-strong); /* TODO: Check token with design */\n}\n\n.vuuListItemHeader[data-sticky] {\n position: sticky;\n top: 0;\n z-index: 1;\n}\n\n.vuuListItem {\n color: var(--list-item-text-color);\n cursor: var(--vuuList-item-cursor, pointer);\n background: var(--vuuList-item-background, var(--list-item-background));\n font-size: var(--salt-text-fontSize);\n text-align: var(--salt-text-textAlign);\n line-height: var(--salt-text-lineHeight);\n height: var(--vuuList-item-height, var(--list-item-height, auto));\n /* Replaced border-bottom with margin. In design spec, the height of the items should not include gap */\n margin-bottom: var(--list-item-gap);\n padding: 0 var(--vuuListItem-padding, var(--salt-size-unit));\n left: 0;\n right: 0;\n display: flex;\n position: relative;\n align-items: var(--list-item-alignItems);\n white-space: nowrap;\n}\n\n.vuuListItem:last-child {\n margin-bottom: 0px;\n}\n\n.vuuListItem-checkbox {\n --list-item-background-active: var(--salt-selectable-background);\n --list-item-text-color-active: var(--salt-text-primary-foreground);\n --list-item-text-padding: 0 0 0 var(--salt-size-unit);\n}\n\n.vuuListItem[aria-selected=\"true\"]:not(.vuuListItem-checkbox) {\n --list-item-background: var(--list-item-background-active);\n color: var(--list-item-text-color-active);\n}\n\n.vuuListItem.vuuDisabled {\n --list-item-text-color: var(--salt-text-primary-foreground-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.vuuListItem.vuuFocusVisible {\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-offset: -2px;\n outline-color: var(--salt-focused-outlineColor);\n}\n\n.vuuListItem.vuuFocusVisible:after {\n content: none;\n}\n\n.vuuListItem[aria-selected=\"true\"]:not(.vuuListItem-checkbox).vuuFocusVisible {\n outline-color: var(--list-item-selected-focus-outlineColor);\n}\n\n.vuuListItem-textWrapper {\n flex: 1;\n overflow: hidden;\n padding: var(--list-item-text-padding, 0px);\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.vuuListItem-proxy {\n position: absolute !important;\n visibility: hidden;\n}\n.vuuDraggable-list-item {\n --vuuList-item-height: 24px;\n background-color: white;\n}\n\n.vuuListItem.vuuDraggable-dragAway {\n display: none;\n}", ".vuuDraggable {\n background: transparent;\n box-shadow: var(--salt-overlayable-shadow-drag);\n cursor: var(--salt-draggable-grab-cursor-active);\n position: absolute;\n opacity: .95;\n z-index: 2000;\n}\n\n.vuuDraggable-spacer {\n display: var(--vuuDraggable-display, inline-block);\n height: var(--vuuDraggable-spacer-height, var(--tabstrip-height));\n transition: var(--vuuDraggable-transitionProp, width) 0.3s ease;\n width: var(--vuuDraggable-spacer-width, 0);\n}\n\n.vuuDraggable-dropIndicatorPosition {\n display: var(--saltDraggable-display, inline-block);\n /* height: var(--saltDraggable-spacer-height, var(--tabstrip-height)); */\n /* width: var(--saltDraggable-spacer-width, 0); */\n height: 0px;\n width: 100%;\n}\n\n.vuuDraggable-dropIndicatorContainer {\n transition: var(--vuuDraggable-transitionProp, top) 0.2s ease;\n}\n\n.vuuDraggable-dropIndicator {\n /* height: var(--saltDraggable-spacer-height, var(--tabstrip-height)); */\n /* width: var(--saltDraggable-spacer-width, 0); */\n background-color: var(--salt-palette-accent-background);\n height: 2px;\n width: 100%;\n}\n\n.vuuDraggable-dropIndicator:before {\n content: '';\n width: 6px;\n height: 6px;\n border-radius: 3px;\n background-color: var(--salt-palette-accent-background);\n position: absolute;\n top: -2px;\n left: -3px;\n}\n\n.vuuDraggable-settling {\n transition-property: left, top;\n transition-duration: .15s;\n transition-timing-function: ease-out;\n}\n\n.vuuDraggable-spacer {\n order: 1;\n}", ".vuuList {\n --list-background: var(--salt-container-primary-background);\n --list-borderStyle: var(--vuuList-borderStyle,var(--salt-container-borderStyle));\n --list-borderWidth: var(--salt-size-border);\n --list-height: auto;\n --list-item-height: var(--salt-size-stackable);\n --list-item-gap: 0px;\n --list-maxHeight: 100%;\n --vuuDraggable-display: block;\n --vuuDraggable-spacer-height: 0;\n --vuuDraggable-spacer-width: 100%;\n --vuuDraggable-transitionProp: height;\n --vuuMeasuredContainer-height: var(--computed-list-height);\n\n background: var(--list-background);\n height: var(--saltList-height, var(--list-height));\n max-height: var(--list-maxHeight);\n outline: none;\n position: relative;\n user-select: none;\n width: var(--saltList-width, auto);\n padding: 0 1px;\n}\n\n.vuuList-contentSized {\n box-sizing: content-box;\n}\n\n.vuuList-borderless {\n --list-borderStyle: none;\n}\n\n/* virtualised list */\n.vuuList-viewport {\n height: var(--computed-list-height, var(--measured-px-height));\n overflow: auto;\n width: var(--measured-px-width);\n}\n\n.vuuListItemHeader {\n --saltList-item-background: var(--list-item-header-background);\n color: var(--list-item-header-color);\n}\n\n.vuuListItemHeader[data-sticky=\"true\"] {\n --saltList-item-background: var(--list-background);\n position: sticky;\n top: 0;\n z-index: 1;\n}\n\n.vuuList-collapsible .vuuListItemHeader:after {\n border-width: var(--checkbox-borderWidth);\n border-color: var(--checkbox-borderColor);\n content: var(--list-item-header-twisty-content);\n -webkit-mask: var(--list-svg-chevron-down) center center/12px 12px no-repeat;\n mask: var(--list-svg-chevron-down) center center/12px 12px no-repeat;\n background: var(--list-item-header-twisty-color);\n height: 12px;\n left: var(--list-item-header-twisty-left);\n right: var(--list-item-header-twisty-right);\n margin-top: -8px;\n position: absolute;\n top: var(--list-item-header-twisty-top);\n transition: transform 0.3s;\n width: 12px;\n}\n.vuuListItemHeader[aria-expanded=\"false\"]:after {\n transform: rotate(-90deg);\n}\n\n/* Selection */\n\n.vuuList-scrollingContentContainer {\n box-sizing: inherit;\n position: relative;\n}\n\n.vuuList-virtualized .vuuListItem {\n line-height: 30px;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n will-change: transform;\n}\n.vuuList.saltFocusVisible:after {\n inset: 2px;\n}\n", ".vuuRadioIcon {\n --vuu-icon-size: 12px;\n --vuu-icon-left: -1px;\n --vuu-icon-top: -1px;\n --vuu-icon-svg: var(--vuu-svg-radio);\n border-style: solid;\n border-color: var(--vuuRadioIcon-borderColor, var(--salt-selectable-borderColor));\n border-radius: 50%;\n border-width: 1px;\n display: inline-block;\n height: var(--vuuRadioIcon-size, 12px);\n position: relative;\n width: var(--vuuRadioIcon-size, 12px);\n}\n\n.vuuRadioIcon-checked {\n background-image: var(--vuu-svg-radio);\n border: none;\n background-repeat: no-repeat;\n}\n\n.vuuRadioIcon-checked:after {\n content: \"\";\n left: var(--vuu-icon-left, auto);\n height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));\n -webkit-mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n mask-repeat: no-repeat;\n -webkit-mask-repeat: no-repeat;\n position: absolute;\n top: var(--vuu-icon-top, auto);\n width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));\n}\n", ".vuuChevronIcon {\n --vuu-icon-size: 14px;\n --vuu-icon-left: -1px;\n --vuu-icon-top: -1px;\n height: var(--vuuChevronIcon-size, 14px);\n position: relative;\n width: var(--vuuChevronIcon-size, 14px);\n cursor: pointer;\n}\n\n.vuuChevronIcon:after {\n content: \"\";\n background-color: #777C94;\n left: var(--vuu-icon-left, auto);\n height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));\n -webkit-mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n mask-repeat: no-repeat;\n -webkit-mask-repeat: no-repeat;\n position: absolute;\n top: var(--vuu-icon-top, auto);\n width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));\n}\n\n.vuuChevronIcon.up {\n --vuu-icon-svg: var(--vuu-svg-chevron-up);\n}\n\n.vuuChevronIcon.down {\n --vuu-icon-svg: var(--vuu-svg-chevron-down);\n}\n\n.vuuChevronIcon.left {\n --vuu-icon-svg: var(--vuu-svg-chevron-left);\n}\n\n.vuuChevronIcon.right {\n --vuu-icon-svg: var(--vuu-svg-chevron-right);\n}\n", ".vuuEditableLabel {\n --editableLabel-padding: var(--vuuEditableLabel-padding, 6px);\n --editableLabel-height: var(--vuuEditableLabel-height, 26px);\n --saltInput-background: transparent;\n --saltInput-height: calc(var(--editableLabel-height) - 4px);\n --saltInput-minWidth: 14px;\n\n color: inherit;\n cursor: default;\n display: flex;\n flex-direction: column;\n font-size: var(--salt-text-fontSize);\n height: var(--editableLabel-height);\n justify-content: center;\n max-width: 170px;\n outline: none;\n overflow: hidden;\n padding: 0 var(--editableLabel-padding);\n position: relative;\n text-overflow: ellipsis;\n white-space: nowrap;\n z-index: var(--salt-zIndex-default);\n}\n\n.vuuEditableLabel:before {\n content: attr(data-text);\n display: block;\n height: 0px;\n visibility: hidden;\n white-space: pre-wrap;\n}\n\n.vuuEditableLabel .saltInput {\n font-weight: var(--salt-text-fontWeight);\n left: var(--editableLabel-padding, 0);\n padding: 0;\n outline-style: none;\n position: absolute;\n right: var(--editableLabel-padding, 0);\n top: var(--saltEditableLabel-top, 2px);\n width: auto;\n}\n\n.vuuEditableLabel .saltInput-activationIndicator {\n display: none;\n}\n\n.vuuEditableLabel-input {\n background-color: transparent;\n border: none;\n box-sizing: content-box;\n color: inherit;\n display: block;\n flex: 1;\n font: inherit;\n height: 20px;\n margin:0;\n min-width:0;\n outline: none;\n padding: 0;\n}\n\n.vuuEditableLabel-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n", ".vuuExpandoInput {\n\n --salt-editable-secondary-background: white;\n --expandoInput-height: var(--vuuExpandoInput-height, 26px);\n --expandoInput-padding: var(--vuuExpandoInput-padding, 6px);\n\n --saltInput-height: calc(var(--vuuExpandoInput-height) - 4px);\n --saltInput-minWidth: var(--vuuExpandoInput-minWidth, 8px);\n \n border: var(--vuuExpandoInput-border, none);\n border-radius: var(--vuuExpandoInput-borderRadius, 0);\n color: inherit;\n cursor: default;\n display: inline-block;\n font-size: var(--salt-text-fontSize);\n height: var(--expandoInput-height);\n min-width: calc(var(--saltInput-minWidth) + 2 * var(--expandoInput-padding));\n outline: none;\n padding: 0 var(--expandoInput-padding);\n position: relative;\n\n}\n\n.vuuExpandoInput:before {\n content: attr(data-text);\n display: block;\n height: 0px;\n visibility: hidden;\n white-space: pre-wrap;\n }\n \n .vuuExpandoInput .saltInput {\n font-weight: var(--salt-text-fontWeight);\n left: var(--expandoInput-padding, 0);\n padding: 0;\n outline-style: none;\n position: absolute;\n right: var(--expandoInput-padding, 0);\n top: var(--vuuExpandoInput-top, 2px);\n width: auto;\n }\n \n .vuuExpandoInput .saltInput-activationIndicator {\n display: none;\n }\n \n .vuuExpandoInput-input {\n background-color: transparent;\n border: none;\n box-sizing: content-box;\n display: block;\n flex: 1;\n font: inherit;\n height: 20px;\n margin:0;\n min-width:0;\n outline: none;\n padding: 0;\n }\n ", ".vuuCheckbox {\n --vuuCheckboxIcon-background-checked: var(--vuu-color-purple-10);\n display: flex;\n height: 24px;\n align-items: center;\n gap: 6px;\n color: var(--light-text-primary, #15171B);\n font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;\n font-size: 12px;\n font-weight: 400;\n cursor: pointer;\n}", ".vuuRadioButton {\n display: flex;\n height: 24px;\n align-items: center;\n gap: 6px;\n color: var(--light-text-primary, #15171B);\n font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;\n font-size: 12px;\n font-weight: 400;\n cursor: pointer;\n}\n\n.radio {\n position: relative;\n height: 12px;\n}\n\ninput[type=\"radio\"] {\n\tposition: absolute;\n appearance: none;\n\twidth: 100%;\n height: 100%;\n border-radius: 50%;\n margin: 0;\n top: 0;\n}", "\n.vuuSearchCell {\n --vuu-icon-left: 0;\n --vuu-icon-size: 16px;\n --vuu-icon-top: 0px;\n align-items: center;\n color: var(--background-cell-color);\n display: flex;\n gap: 4px;\n padding: 0 8px 0 8px;\n position: relative;\n z-index: -1;\n}\n\n", ".vuuInstrumentPicker {\n height: 100%;\n padding: var(--vuuInstrumentPicker-padding, 12px);\n display: flex;\n flex-direction: column;\n}\n\n.vuuInstrumentPicker-inputField {\n --vuu-icon-size: 16px;\n flex: 0 0 40px;\n}\n.vuuInstrumentPicker-list {\n background-color: var(--salt-container-primary-background);\n flex: 1 1 auto;\n}\n\n.vuuInstrumentPicker .vuuTableNextCell {\n padding: 0;\n}\n", "\n.vuuSearchCell {\n --vuu-icon-left: 0;\n --vuu-icon-size: 16px;\n --vuu-icon-top: 0px;\n align-items: center;\n color: var(--background-cell-color);\n display: flex;\n gap: 4px;\n padding: 0 8px 0 8px;\n position: relative;\n z-index: -1;\n}\n\n", ".vuuInstrumentSearch {\n height: 100%;\n padding: var(--vuuInstrumentSearch-padding, 12px);\n display: flex;\n flex-direction: column;\n}\n\n.vuuInstrumentSearch-inputField {\n --vuu-icon-size: 16px;\n flex: 0 0 40px;\n}\n.vuuInstrumentSearch-list {\n background-color: var(--salt-container-primary-background);\n flex: 1 1 auto;\n}\n\n.vuuInstrumentSearch .vuuTableNextCell {\n padding: 0;\n}\n", "@property --price-ticker-color {\n syntax: '<color>'; /* <- defined as type number for the transition to work */\n initial-value: #15171B;\n inherits: false;\n}\n \n.vuuPriceTicker {\n align-items: center;\n display: flex;\n font-size: var(--vuuPriceTicker-fontSize, var(--salt-text-fontSize));\n font-weight: var(--vuuPriceTicker-fontWeight, 700);\n transition-property: color;\n transition-duration: .3s;;\n}\n\n.vuuPriceTicker.up1 {\n --vuu-icon-color: var(--vuu-color-green-50);\n color: var(--vuu-color-green-50);\n animation-duration: 30s;\n }\n \n .vuuPriceTicker.up2 {\n --vuu-icon-color: var(--vuu-color-green-50);\n color: var(--vuu-color-green-50);\n animation-duration: 30s;\n }\n \n .vuuPriceTicker.down1 {\n --vuu-icon-transform: rotate(180deg);\n --vuu-icon-color: var(--vuu-color-red-50);\n color: var(--vuu-color-red-50);\n animation-duration: 30s;\n }\n \n .vuuPriceTicker.down2 {\n --vuu-icon-transform: rotate(180deg);\n --vuu-icon-color: var(--vuu-color-red-50);\n color: var(--vuu-color-red-50);\n animation-duration: 30s;\n }\n ", "/* Component class applied to the root element */\n.vuuTabstrip {\n --vuuOverflowContainer-background: transparent;\n /* --tabstrip-height: var(--vuuTabstrip-height, var(--salt-size-stackable)); */\n --tabstrip-dragging-display: none;\n --tabstrip-display: inline-flex;\n --tabstrip-background: transparent;\n\n align-self: var(--saltTabs-tabstrip-alignSelf, stretch);\n display: flex;\n font-size: var(--salt-text-fontSize);\n font-weight: var(--vuuTabstrip-fontWeight, var(--salt-text-fontWeight));\n min-width: 28px;\n position: relative;\n overflow: visible;\n width: var(--tabstrip-width);\n}\n\n/* Tabstrip orientation is horizontal */\n.vuuTabstrip-horizontal {\n --tabstrip-height: var(--vuuTabstrip-height, 28px);\n --tabstrip-width: var(--vuuTabstrip-width, 100%);\n --tab-height: var(--tabstrip-height);\n --tab-width: auto;\n --tab-thumb-height: 2px;\n --tab-thumb-left: var(--tab-thumb-offset, 0);\n --tab-thumb-top: auto;\n --tab-thumb-width: var(--tab-thumb-size, 100%);\n align-items: flex-start;\n border-bottom: var(--vuuTabstrip-borderBottom, solid 1px var(--salt-container-primary-borderColor));\n}\n\n/* Tabstrip orientation is vertical */\n.vuuTabstrip-vertical {\n --tabstrip-height: var(--vuuTabstrip-height, 100%);\n --tabstrip-width: var(--vuuTabstrip-width, 100px);\n --tab-height: 50px;\n --tab-width: 100%;\n --tab-thumb-height: 0;\n --tab-thumb-left: 0;\n --tab-thumb-top: var(--tab-thumb-offset, 0);\n --tab-thumb-width: 2px;\n\n align-self: flex-start;\n display: inline-flex;\n}\n\n.vuuTabstrip-draggingTab .vuuTab {\n pointer-events: none;\n}\n\n.vuuTabstrip-addTabButton {\n --saltButton-height: 20px;\n --saltButton-width: 20px;\n}\n\n.vuuTabstrip-overflowMenu.vuuDropdown {\n --saltIcon-margin: 2px 0 0 0px;\n}\n\n.vuuTabstrip-overflowMenu-open {\n --saltButton-background: var(--salt-actionable-secondary-background-active);\n --saltButton-text-color: var(--salt-actionable-secondary-text-color-active);\n}\n\n.vuuTabstrip-overflowMenu-open .saltButton {\n --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.vuuTabstrip-inner {\n width: 100%;\n align-items: center;\n display: flex;\n flex-basis: auto;\n flex-grow: 0;\n flex-shrink: 1;\n flex-wrap: wrap;\n justify-content: flex-start;\n line-height: var(--tabstrip-height);\n}\n\n.vuuTabstrip-vertical .vuuTabstrip-inner {\n flex-direction: column;\n height: auto;\n}\n\n.vuuTabstrip-centered .vuuTabstrip-inner {\n justify-content: center;\n}\n\n/* Styling applied to Draggable wrapper when used to drag a Tab */\n.vuuDraggable[class*=\"vuuTabstrip\"] {\n --tabstrip-display: flex;\n --tabstrip-height: 100%;\n --tabstrip-dragging-display: block;\n\n --tabs-tab-background: var(--salt-navigable-primary-background-hover);\n --tabs-tab-before-content: \"\";\n --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n --tabs-tab-before-height: var(--tab-activationIndicator-thumb-height);\n --tabs-tab-before-inset: var(--tab-activationIndicator-inset);\n --tabs-tab-before-width: var(--tab-activationIndicator-thumb-width);\n --tabs-tab-cursor: var(--salt-draggable-grab-cursor-active);\n --tabs-tab-position: static;\n\n font-size: 12px;\n}\n\n.vuuDraggable-tabstrip-horizontal {\n --tab-thumb-height: 2px;\n --tab-thumb-left: 0px;\n --tabstrip-height: 28px;\n line-height: var(--tabstrip-height);\n}\n\n\n.vuuDraggable[class*=\"tabstrip\"] .vuuTab[aria-selected=\"true\"]:before {\n --tabs-tab-before-background: var(--salt-navigable-indicator-active);\n}\n\n/* [data-overflowed] {\n order: 99;\n visibility: hidden;\n} */\n\n.vuuTabstrip-overflowMenu-dropTarget:after {\n background: var(--salt-selectable-background-selected);\n content: \"\";\n position: absolute;\n height: 2px;\n left: 0;\n right: 0;\n bottom: 0;\n}\n", ".vuuTabMenu {\n top: -2px;\n}", "/* Class applied to root Tab element */\n.vuuTab {\n \n --saltEditableLabel-padding: 0;\n --saltEditableLabel-height: calc(var(--tabstrip-height) - 2px);\n --saltInputLegacy-minWidth: 4em;\n --saltEditableLabel-top: 2px;\n\n --tab-background: var(--vuuTab-background, var(--salt-navigable-primary-background));\n --tab-cursor: pointer;\n --tab-position: relative;\n}\n\n.vuuTab {\n align-items: center;\n align-self: stretch;\n background: var(--tab-background);\n border: none;\n border-radius: var(--vuuTab-borderRadius, 0);\n color: var(--salt-text-primary-foreground);\n cursor: var(--vuuTab-cursor, var(--tab-cursor));\n display: var(--tabstrip-display);\n gap: 8px;\n height: var(--vuuTabHeight, var(--tab-height));\n letter-spacing: var(--vuuTab-letterSpacing, var(--tab-letterSpacing, 0));\n min-width: var(--vuuTab-minWidth, 40px);\n outline: none;\n padding: var(--vuuTab-padding, 0 24px);\n position: var(--vuuTab-position, var(--tab-position));\n user-select: none;\n width: var(--tab-width)\n}\n\n/* Overrides characteristic used in saltFocusVisible */\n/* .vuuTab.saltFocusVisible:after {\n inset: 2px 2px 4px 2px;\n} */\n\n.vuuTab {\n margin: 0 var(--tab-spacing) 0 0;\n}\n\n.vuuTab-selected {\n background: var(--vuuTab-background-selected, var(--tab-background));\n color: var(--salt-text-primary-foreground);\n font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n/* main content aria of Tab */\n.vuuTab-main {\n align-items: center;;\n border: none;\n color: inherit;\n cursor: inherit;\n display: flex;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n height: calc(var(--tab-height) - var(--tab-thumb-height));\n margin-bottom: var(--tab-thumb-height);\n outline: none;\n position: relative;\n}\n\n.vuuTab-closeable .vuuTab-main {\n border-right: solid transparent var(--salt-size-unit);\n}\n\n.vuuTab .vuuTab-closeButton {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* the close Button on a closeable Tab*/\n.vuuTab-close-icon {\n display: none;\n}\n\n.salt-density-touch .vuuTab-close-icon,\n.salt-density-low .vuuTab-close-icon {\n display: block;\n}\n\n.salt-density-touch .vuuTab-close-icon-small,\n.salt-density-low .vuuTab-close-icon-small {\n display: none;\n}\n\n.vuuTab .vuuTab-text {\n display: inline-block;\n position: relative;\n overflow: hidden;\n text-align: var(--salt-text-textAlign-embedded);\n text-overflow: ellipsis;\n top: var(--vuuTab-top, var(--tab-top, auto));\n white-space: nowrap;\n /* ensure content sits above focus ring */\n z-index: var(--salt-zIndex-default);\n}\n\n.vuuTab .vuuTab-text:before {\n height: 0;\n content: attr(data-text);\n display: block;\n visibility: hidden;\n font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n/* FIXME: these are all focusVisible styles, but with a bespoke inset */\n.vuuTab-editing:after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 2px;\n outline-color: var(--salt-focused-outlineColor);\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-offset: -2px;\n}\n\n.vuuTab.vuuFocusVisible {\n background: var(--vuuTab-hover-background, var(--salt-navigable-primary-background-hover));\n outline-color: var(--vuuTab-focusVisible-color, var(--salt-focused-outlineColor));\n outline-style: dashed;\n outline-width: 1px;\n outline-offset: -1px;\n}\n\n.vuuTab:before {\n content: var(--tab-before-content, none);\n content: \"\";\n background: var(--tab-before-background);\n height: var(--tab-before-height);\n inset: var(--tab-before-inset);\n position: absolute;\n width: var(--tab-before-width);\n z-index: 1;\n}\n\n.vuuTabstrip-draggingTab .vuuTab-selected:before {\n --tab-before-content: \"\";\n --tab-before-background: var(--salt-navigable-indicator-color-active);\n --tab-before-height: var(--tab-thumb-height);\n --tab-before-inset: var(--tab-activationIndicator-inset);\n --tab-before-width: var(--tab-activationIndicator-thumb-width);\n}\n\n/* .vuuDraggable .vuuTab:before,\n.vuuTab:not(.vuuTab-selected).saltFocusVisible:before,\n.vuuTab:hover:not(.vuuTab-selected):before {\n --tab-before-content: \"\";\n --tab-before-background: var(--salt-navigable-indicator-hover);\n --tab-before-height: var(--tab-thumb-height);\n --tab-before-inset: var(--tab-activationIndicator-inset);\n --tab-before-width: var(--tab-activationIndicator-thumb-width);\n} */\n\n.vuuTab-selected:before {\n --tab-before-content: \"\";\n background: var(--salt-navigable-indicator-active);\n height: var(--tab-thumb-height);\n position: absolute;\n left: var(--tab-thumb-left);\n bottom: 0px; \n top: var(--tab-thumb-top, auto);\n transition: var(--tab-thumb-transition, none);\n width: var(--tab-thumb-width, 100%);\n}\n\n.vuuTab:hover:not(.vuuTab-closeHover) {\n background: var(--vuuTab-hover-background, var(--salt-navigable-primary-background-hover));\n}\n\n/* .vuuTabstrip.vuuTabThumb-noTransition .vuuTab-selected:before {\n transition: none; \n} */", ".vuuTree {\n --tree-node-collapse: var(--vuuTree-toggle-collapse, var(--svg-tree-node-collapse));\n --tree-node-expand: var(--vuuTree-toggle-expand, var(--svg-tree-node-expand));\n --tree-toggle-width: 12px;\n --tree-icon-color: var(--vuuTree-icon-color, #4c505b);\n --tree-node-expanded-transform: var(--vuuTree-node-expanded-transform, none);\n --tree-node-indent: 0px;\n\n --list-hilited-bg: var(--hw-list-hilited-bg, rgba(0, 0, 0, 0.1));\n --list-item-height: var(--hw-list-item-height, 30px);\n --list-item-padding: var(--hw-list-item-padding, 0 6px);\n --list-item-header-bg: var(--hw-list-item-header-bg, black);\n --list-item-header-color: var(--hw-list-item-header-color, white);\n --list-item-header-font-weight: bold;\n --list-item-header-twisty-color: black;\n --list-item-header-twisty-content: '';\n --list-item-header-twisty-top: 50%;\n --list-item-header-twisty-left: -18px;\n --list-item-header-twisty-right: auto;\n --list-item-selected-bg: var(--hw-list-selected-bg, #1ea7fd);\n --list-item-selected-color: white;\n --list-item-text-color: var(--hw-gray-800);\n --focus-visible-border-color: var(--hw-focus-visible-border-color, rgb(141, 154, 179));\n\n list-style: none;\n margin: 0;\n padding: 0 1px;\n font-size: var(--vuuTree-font-size, 14px);\n max-height: inherit;\n outline: none;\n overflow-y: auto;\n position: relative;\n user-select: none;\n}\n\n.vuuTree-viewport {\n --list-item-height: 30px;\n box-sizing: border-box;\n max-height: inherit;\n overflow: auto;\n}\n\n.vuuTree-scrollingContentContainer {\n box-sizing: inherit;\n position: relative;\n}\n\n.vuuTree-scrollingContentContainer .vuuTreeNode {\n line-height: 30px;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n will-change: transform;\n}\n\n.vuuTreeNode {\n list-style: none;\n}\n\n/* Leaf node or the div child of a collapsible node */\n.vuuTreeNode:not([aria-expanded]),\n.vuuTreeNode[aria-expanded] > .vuuTreeNode-label {\n --checkbox-border-color: black;\n --checkbox-border-width: 1px;\n --checkbox-tick: black;\n --list-item-padding-left: 6px;\n --svg-toggle: var(--tree-node-collapse);\n\n align-items: center;\n color: var(--list-item-text-color);\n display: flex;\n flex-wrap: nowrap;\n height: var(--list-item-height);\n line-height: var(--list-item-height);\n padding: var(--list-item-padding);\n padding-left: var(--padding-left);\n position: relative;\n cursor: default;\n margin: 0;\n white-space: nowrap;\n}\n\n.vuuTreeNode:not([aria-expanded]) {\n --padding-left: calc(\n var(--list-item-padding-left) + var(--tree-toggle-width) + var(--tree-node-indent)\n );\n}\n\n.vuuTreeNode[aria-expanded] > .vuuTreeNode-label {\n --padding-left: calc(\n var(--list-item-padding-left) + var(--tree-toggle-width) + var(--tree-node-indent)\n );\n}\n\n.vuuTreeNode-icon {\n background-color: var(--tree-icon-color);\n display: inline-block;\n height: 18px;\n margin-right: 6px;\n -webkit-mask: var(--vuu-icon-svg) center center/12px 12px no-repeat;\n mask: var(--vuu-icon-svg) center center/12px 12px no-repeat;\n flex: 0 0 18px;\n}\n\n.vuuTreeNode[aria-expanded] {\n flex-direction: column;\n}\n\n.vuuTreeNode[aria-expanded] {\n flex-direction: column;\n height: auto;\n}\n\n.vuuTreeNode > *[role='group'] {\n padding-left: 0px;\n}\n\n.vuuTreeNode {\n padding-left: calc(var(--padding-left) + var(--tree-node-indent));\n}\n\n.vuuTreeNode[aria-level='2'] {\n --tree-node-indent: 12px;\n}\n.vuuTreeNode[aria-level='3'] {\n --tree-node-indent: 24px;\n}\n.vuuTreeNode[aria-level='4'] {\n --tree-node-indent: 36px;\n}\n\n.vuuTreeNode:not(.focusVisible):not(.hwListItemHeader):not([aria-expanded])[data-highlighted],\n.vuuTreeNode:not(.focusVisible):not(.hwListItemHeader)[aria-expanded][data-highlighted]\n > div:first-child {\n background-color: var(--list-hilited-bg);\n}\n\n.vuuTreeNode-toggle {\n cursor: pointer;\n}\n\n.vuuTreeNode > .vuuTreeNode-toggle {\n display: inline-block;\n height: 100%;\n left: 0;\n position: absolute;\n width: calc(var(--list-item-padding-left) + var(--tree-toggle-width));\n}\n\n.vuuTreeNode[aria-expanded] > .vuuTreeNode-label:after {\n content: var(--list-item-header-twisty-content);\n -webkit-mask: var(--svg-toggle) center center/8px 8px no-repeat;\n mask: var(--svg-toggle) center center/8px 8px no-repeat;\n background-color: var(--list-item-header-twisty-color);\n height: 18px;\n margin-top: -9px;\n left: var(--tree-node-indent);\n position: absolute;\n top: var(--list-item-header-twisty-top);\n transition: transform 0.3s;\n width: 18px;\n}\n\n.vuuTreeNode[aria-selected='true'] {\n --list-item-header-twisty-color: var(--list-item-selected-color);\n}\n\n\n.vuuTreeNode:not(.focusVisible):focus {\n background-color: rgba(0, 0, 0, 0.1);\n}\n\n.vuuTreeNode:not([aria-expanded]).focusVisible:before,\n.vuuTreeNode[aria-expanded].focusVisible > div:first-child:before {\n content: '';\n position: absolute;\n top: 0px;\n left: var(--tree-focus-offset, 0px);\n right: 0;\n bottom: 0px;\n border: dotted var(--focus-visible-border-color) 2px;\n background-color: var(--list-hilited-bg);\n}\n\n\n.vuuTreeNode[aria-expanded='false'] > *:first-child:after {\n --svg-toggle: var(--tree-node-expand);\n}\n\n.vuuTreeNode[aria-expanded='true'] > *:first-child:after {\n transform: var(--tree-node-expanded-transform);\n}\n\n/* Selection */\n\n.vuuTree:not(.checkbox-only) .vuuTreeNode:not([aria-expanded])[aria-selected='true'],\n.vuuTree:not(.checkbox-only) .vuuTreeNode[aria-expanded][aria-selected='true'] > div:first-child {\n --checkbox-border-color: var(--list-item-selected-color);\n --checkbox-tick: var(--list-item-selected-color);\n --focus-visible-border-color: var(--list-item-selected-color);\n background-color: var(--list-item-selected-bg);\n color: var(--list-item-selected-color);\n}\n\n.with-checkbox .vuuTreeNode {\n padding-left: 28px;\n}\n\n.with-checkbox .vuuTreeNode:before {\n border-style: solid;\n border-width: var(--checkbox-border-width);\n border-color: var(--checkbox-border-color);\n content: '';\n height: 12px;\n left: 3px;\n margin-top: -7px;\n position: absolute;\n top: 50%;\n width: 12px;\n}\n"],
|
|
5
|
+
"mappings": ";AAAA;AACE;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;;;AC5BF;AACE;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AAAA;AAEE;AAAA;;;ACtCF;AACE;AAAA;;;ACDF;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;AC/BJ;AAEE;AACA;AAEA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAEF;AACE;AACA;AAAA;AAGF;AACE;AAAA;;;ACjGF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AAGA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AAGE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AAAA;;;ACtDF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAIF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AAAA;AAKF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AAAA;;;ACvFF;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;AC/BJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;;;ACrCF;AACE;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;;;ACjEF;AAEI;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAIJ;AACI;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;ACzDJ;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAAA;;;ACVF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACC;AACC;AACD;AACC;AACA;AACA;AACA;AAAA;;;ACvBF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;ACXF;AACI;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AAAA;AAEJ;AACI;AACA;AAAA;AAGJ;AACI;AAAA;;;AChBJ;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;ACXF;AACI;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AAAA;AAEJ;AACI;AACA;AAAA;AAGJ;AACI;AAAA;;;ACjBJ;AAMA;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;;;ACrCJ;AACE;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAIF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAIF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAIF;AACE;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAIF;AACE;AAAA;AAQF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;ACpIF;AACI;AAAA;;;ACAJ;AAEE;AACA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAQF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAIF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAIF;AACE;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AAAA;AAEE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAIF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAaF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;;;AC7KF;AACE;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAIF;AAAA;AAEE;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAKF;AACE;AAAA;AAKF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AAAA;AAGE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAIF;AACE;AAAA;AAGF;AAAA;AAEE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAIF;AACE;AAAA;AAGF;AACE;AAAA;AAKF;AAAA;AAEE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vuu-ui/vuu-ui-controls",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.11-debug",
|
|
4
4
|
"description": "VUU UI Controls",
|
|
5
5
|
"author": "heswell",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"dependencies": {
|
|
8
8
|
"@salt-ds/core": "1.8.0",
|
|
9
|
-
"@vuu-ui/vuu-data": "0.8.
|
|
10
|
-
"@vuu-ui/vuu-data-types": "0.8.
|
|
11
|
-
"@vuu-ui/vuu-datagrid-types": "0.8.
|
|
12
|
-
"@vuu-ui/vuu-layout": "0.8.
|
|
13
|
-
"@vuu-ui/vuu-table": "0.8.
|
|
14
|
-
"@vuu-ui/vuu-popups": "0.8.
|
|
15
|
-
"@vuu-ui/vuu-utils": "0.8.
|
|
9
|
+
"@vuu-ui/vuu-data": "0.8.11-debug",
|
|
10
|
+
"@vuu-ui/vuu-data-types": "0.8.11-debug",
|
|
11
|
+
"@vuu-ui/vuu-datagrid-types": "0.8.11-debug",
|
|
12
|
+
"@vuu-ui/vuu-layout": "0.8.11-debug",
|
|
13
|
+
"@vuu-ui/vuu-table": "0.8.11-debug",
|
|
14
|
+
"@vuu-ui/vuu-popups": "0.8.11-debug",
|
|
15
|
+
"@vuu-ui/vuu-utils": "0.8.11-debug"
|
|
16
16
|
},
|
|
17
17
|
"peerDependencies": {
|
|
18
18
|
"classnames": "^2.2.6",
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { InputProps } from "@salt-ds/core";
|
|
2
|
+
import { ForwardedRef, ReactElement } from "react";
|
|
3
|
+
import { ComponentSelectionProps, SelectionStrategy } from "../common-hooks";
|
|
4
|
+
import { DropdownBaseProps } from "../dropdown";
|
|
5
|
+
import { ListProps } from "../list";
|
|
6
|
+
export interface ComboBoxProps<Item = string, S extends SelectionStrategy = "default"> extends Omit<DropdownBaseProps, "triggerComponent" | "onBlur" | "onChange" | "onFocus">, Pick<InputProps, "onBlur" | "onChange" | "onFocus" | "onSelect">, Omit<ComponentSelectionProps<Item, S>, "onSelect">, Pick<ListProps<Item, S>, "ListItem" | "itemToString" | "source" | "width"> {
|
|
7
|
+
InputProps?: InputProps;
|
|
8
|
+
ListProps?: Omit<ListProps<Item>, "ListItem" | "itemToString" | "source">;
|
|
9
|
+
allowFreeText?: boolean;
|
|
10
|
+
defaultValue?: string;
|
|
11
|
+
getFilterRegex?: (inputValue: string) => RegExp;
|
|
12
|
+
initialHighlightedIndex?: number;
|
|
13
|
+
itemsToString?: (items: Item[]) => string;
|
|
14
|
+
onSetSelectedText?: (text: string) => void;
|
|
15
|
+
value?: string;
|
|
16
|
+
}
|
|
17
|
+
export declare const ComboBox: <Item, S extends SelectionStrategy = "default">(props: ComboBoxProps<Item, S> & {
|
|
18
|
+
ref?: ForwardedRef<HTMLDivElement> | undefined;
|
|
19
|
+
}) => ReactElement<ComboBoxProps<Item, "default">, string | import("react").JSXElementConstructor<any>>;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { InputProps } from "@salt-ds/core";
|
|
2
|
+
import { RefObject } from "react";
|
|
3
|
+
import { ComponentSelectionProps, MultiSelectionStrategy, SelectionStrategy } from "../common-hooks";
|
|
4
|
+
import { DropdownHookProps, DropdownHookResult, OpenChangeHandler } from "../dropdown";
|
|
5
|
+
import { ListHookProps, ListHookResult } from "../list";
|
|
6
|
+
export interface ComboboxHookProps<Item = string, S extends SelectionStrategy = "default"> extends Partial<Omit<DropdownHookProps, "id" | "onKeyDown">>, Pick<InputProps, "onBlur" | "onChange" | "onFocus" | "onSelect">, Omit<ComponentSelectionProps<Item, S>, "onSelect">, Omit<ListHookProps<Item, S>, "containerRef" | "defaultSelected" | "onSelect" | "selected"> {
|
|
7
|
+
InputProps?: InputProps;
|
|
8
|
+
allowFreeText?: boolean;
|
|
9
|
+
ariaLabel?: string;
|
|
10
|
+
defaultValue?: string;
|
|
11
|
+
id: string;
|
|
12
|
+
initialHighlightedIndex?: number;
|
|
13
|
+
itemCount: number;
|
|
14
|
+
itemsToString?: (items: Item[]) => string;
|
|
15
|
+
itemToString?: (item: Item) => string;
|
|
16
|
+
listRef: RefObject<HTMLDivElement>;
|
|
17
|
+
onSetSelectedText?: (text: string) => void;
|
|
18
|
+
value?: string;
|
|
19
|
+
}
|
|
20
|
+
export interface ComboboxHookResult<Item, S extends SelectionStrategy> extends Pick<ListHookResult<Item>, "focusVisible" | "highlightedIndex" | "listControlProps" | "listHandlers">, Partial<DropdownHookResult> {
|
|
21
|
+
inputProps: InputProps;
|
|
22
|
+
onOpenChange: OpenChangeHandler;
|
|
23
|
+
selected?: S extends MultiSelectionStrategy ? Item[] : Item | null;
|
|
24
|
+
}
|
|
25
|
+
export declare const useCombobox: <Item, S extends SelectionStrategy>({ allowFreeText, ariaLabel, collectionHook, defaultIsOpen, defaultSelected, defaultValue, onBlur, onFocus, onChange, onSelect, id, initialHighlightedIndex, isOpen: isOpenProp, itemCount, itemsToString, itemToString, listRef, onOpenChange, onSelectionChange, onSetSelectedText, selected: selectedProp, selectionStrategy, value: valueProp, InputProps: inputProps, }: ComboboxHookProps<Item, S>) => ComboboxHookResult<Item, S>;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { ReactNode } from "react";
|
|
2
|
-
import { SelectionStrategy, SingleSelectionStrategy } from "./selectionTypes";
|
|
3
2
|
export interface CollectionIndexer {
|
|
4
3
|
value: number;
|
|
5
4
|
}
|
|
@@ -48,10 +47,11 @@ export type CollectionHookResult<T> = {
|
|
|
48
47
|
/** set expanded to true for target */
|
|
49
48
|
expandGroupItem: (item: CollectionItem<T>) => void;
|
|
50
49
|
setFilterPattern: (pattern: undefined | string) => void;
|
|
50
|
+
indexOfItemById: (id: string) => number;
|
|
51
51
|
itemById: (id: string) => T | never;
|
|
52
|
-
itemToCollectionItem:
|
|
53
|
-
itemToCollectionItemId:
|
|
54
|
-
stringToCollectionItem:
|
|
52
|
+
itemToCollectionItem: (item: T) => CollectionItem<T> | CollectionItem<T>[] | null | undefined;
|
|
53
|
+
itemToCollectionItemId: (item?: T | T[]) => string[] | undefined;
|
|
54
|
+
stringToCollectionItem: (item: string | null | undefined) => CollectionItem<T> | null | CollectionItem<T>[] | undefined;
|
|
55
55
|
toCollectionItem: (item: T) => CollectionItem<T>;
|
|
56
56
|
itemToId: (item: T) => string;
|
|
57
57
|
};
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { FocusEvent, KeyboardEvent, RefObject } from "react";
|
|
2
2
|
import { CollectionItem } from "./collectionTypes";
|
|
3
|
-
import { SelectionStrategy, SingleSelectionStrategy } from "./selectionTypes";
|
|
4
3
|
export interface NavigationProps<Item = unknown> {
|
|
5
4
|
cycleFocus?: boolean;
|
|
6
5
|
defaultHighlightedIndex?: number;
|
|
@@ -15,10 +14,10 @@ export interface NavigationProps<Item = unknown> {
|
|
|
15
14
|
restoreLastFocus?: boolean;
|
|
16
15
|
viewportItemCount: number;
|
|
17
16
|
}
|
|
18
|
-
export interface NavigationHookProps<Item
|
|
17
|
+
export interface NavigationHookProps<Item> extends NavigationProps<Item> {
|
|
19
18
|
containerRef: RefObject<HTMLElement>;
|
|
20
19
|
label?: string;
|
|
21
|
-
selected?:
|
|
20
|
+
selected?: string[];
|
|
22
21
|
}
|
|
23
22
|
export interface KeyboardHookContainerProps {
|
|
24
23
|
onBlur: (evt: FocusEvent) => void;
|
|
@@ -9,20 +9,20 @@ export type MultiSelectionStrategy = "multiple" | "extended" | "extended-multi-r
|
|
|
9
9
|
*/
|
|
10
10
|
export type SpecialKeyMultipleSelection = "multiple-special-key";
|
|
11
11
|
export type SelectionStrategy = SelectionDisallowed | SingleSelectionStrategy | MultiSelectionStrategy;
|
|
12
|
-
export
|
|
12
|
+
export declare const isSingleSelection: (s?: SelectionStrategy) => s is SingleSelectionStrategy;
|
|
13
|
+
export declare const isMultiSelection: (s?: SelectionStrategy) => s is MultiSelectionStrategy;
|
|
13
14
|
export type SelectHandler<Item = string> = (event: SyntheticEvent, selectedItem: Item) => void;
|
|
14
|
-
export type SelectionChangeHandler<Item = string, Selection extends SelectionStrategy = "default"> = (event: SyntheticEvent, selected: Selection extends SingleSelectionStrategy ? Item | null : Item[]) => void;
|
|
15
15
|
export declare const selectionIsDisallowed: (selection?: SelectionStrategy | SpecialKeyMultipleSelection) => selection is "none";
|
|
16
16
|
export declare const allowMultipleSelection: (selectionStrategy: SelectionStrategy | SpecialKeyMultipleSelection, specialKey?: boolean) => boolean;
|
|
17
17
|
export declare const deselectionIsAllowed: (selection?: SelectionStrategy | SpecialKeyMultipleSelection) => selection is "deselectable" | MultiSelectionStrategy;
|
|
18
|
-
export declare const hasSelection: <Item = unknown>(selected
|
|
19
|
-
export declare const getFirstSelectedItem: <Item = unknown>(selected: Item
|
|
20
|
-
|
|
21
|
-
defaultSelected?:
|
|
22
|
-
onSelect?: SelectHandler
|
|
23
|
-
onSelectionChange?:
|
|
24
|
-
selected?:
|
|
25
|
-
selectionStrategy?:
|
|
18
|
+
export declare const hasSelection: <Item = unknown>(selected?: Item[] | undefined) => boolean;
|
|
19
|
+
export declare const getFirstSelectedItem: <Item = unknown>(selected: Item[]) => Item;
|
|
20
|
+
interface SelectionProps {
|
|
21
|
+
defaultSelected?: string[];
|
|
22
|
+
onSelect?: SelectHandler;
|
|
23
|
+
onSelectionChange?: MultiSelectionHandler;
|
|
24
|
+
selected?: string[];
|
|
25
|
+
selectionStrategy?: SelectionStrategy;
|
|
26
26
|
}
|
|
27
27
|
export interface ListHandlers {
|
|
28
28
|
onClick?: (event: React.MouseEvent) => void;
|
|
@@ -30,7 +30,7 @@ export interface ListHandlers {
|
|
|
30
30
|
onKeyboardNavigation?: (event: React.KeyboardEvent, currentIndex: number) => void;
|
|
31
31
|
onMouseMove?: (event: React.MouseEvent) => void;
|
|
32
32
|
}
|
|
33
|
-
export interface SelectionHookProps
|
|
33
|
+
export interface SelectionHookProps extends SelectionProps {
|
|
34
34
|
containerRef: RefObject<HTMLElement>;
|
|
35
35
|
disableSelection?: boolean;
|
|
36
36
|
highlightedIdx: number;
|
|
@@ -39,8 +39,24 @@ export interface SelectionHookProps<Selection extends SelectionStrategy = "defau
|
|
|
39
39
|
selectionKeys?: string[];
|
|
40
40
|
tabToSelect?: boolean;
|
|
41
41
|
}
|
|
42
|
-
export interface SelectionHookResult
|
|
42
|
+
export interface SelectionHookResult {
|
|
43
43
|
listHandlers: ListHandlers;
|
|
44
|
-
selected:
|
|
45
|
-
setSelected: (selected:
|
|
44
|
+
selected: string[];
|
|
45
|
+
setSelected: (selected: string[]) => void;
|
|
46
|
+
}
|
|
47
|
+
export type MultiSelectionHandler<Item = string> = (event: SyntheticEvent | null, selected: Item[]) => void;
|
|
48
|
+
export type SingleSelectionHandler<Item = string> = (event: SyntheticEvent | null, selected: Item) => void;
|
|
49
|
+
export type SelectionType<I, S extends SelectionStrategy> = S extends MultiSelectionStrategy ? I[] : I | null;
|
|
50
|
+
export interface ComponentSelectionProps<Item = string, S extends SelectionStrategy = "default"> {
|
|
51
|
+
defaultSelected?: S extends MultiSelectionStrategy ? Item[] : Item;
|
|
52
|
+
onSelect?: SelectHandler<Item>;
|
|
53
|
+
onSelectionChange?: S extends MultiSelectionStrategy ? MultiSelectionHandler<Item> : SingleSelectionHandler<Item>;
|
|
54
|
+
selected?: SelectionType<Item, S>;
|
|
55
|
+
selectionStrategy?: S;
|
|
56
|
+
/**
|
|
57
|
+
* The keyboard keys used to effect selection, defaults to SPACE and ENTER
|
|
58
|
+
* TODO maybe this belongs on the SelectionProps interface ?
|
|
59
|
+
*/
|
|
60
|
+
selectionKeys?: string[];
|
|
46
61
|
}
|
|
62
|
+
export {};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { SelectionHookProps, SelectionHookResult } from "./selectionTypes";
|
|
2
|
+
export declare const CHECKBOX = "checkbox";
|
|
3
|
+
export declare const GROUP_SELECTION_NONE = "none";
|
|
4
|
+
export declare const GROUP_SELECTION_SINGLE = "single";
|
|
5
|
+
export declare const GROUP_SELECTION_CASCADE = "cascade";
|
|
6
|
+
export type GroupSelectionMode = "none" | "single" | "cascade";
|
|
7
|
+
export declare const groupSelectionEnabled: (groupSelection: GroupSelectionMode) => boolean;
|
|
8
|
+
export declare const useSelection: ({ containerRef, defaultSelected, disableSelection, highlightedIdx, itemQuery, onSelect, onSelectionChange, selected: selectedProp, selectionStrategy, selectionKeys, tabToSelect, }: SelectionHookProps) => SelectionHookResult;
|
|
@@ -34,29 +34,29 @@ export declare const measureElementSizeAndPosition: (element: HTMLElement, dimen
|
|
|
34
34
|
export declare const dimensions: (orientation: orientationType) => {
|
|
35
35
|
CLIENT_POS: "clientX" | "clientY";
|
|
36
36
|
CLIENT_SIZE: "scrollTop" | "scrollHeight" | "scrollLeft" | "scrollWidth" | "clientWidth" | "clientHeight";
|
|
37
|
-
CONTRA: "width" | "height" | "
|
|
37
|
+
CONTRA: "width" | "height" | "left" | "right" | "x" | "y" | "bottom" | "top";
|
|
38
38
|
CONTRA_CLIENT_POS: "clientX" | "clientY";
|
|
39
39
|
CONTRA_END: "width" | "height";
|
|
40
40
|
CONTRA_POS: ElementPosition;
|
|
41
41
|
DIMENSION: "width" | "height";
|
|
42
|
-
END: "width" | "height" | "
|
|
42
|
+
END: "width" | "height" | "left" | "right" | "x" | "y" | "bottom" | "top";
|
|
43
43
|
POS: ElementPosition;
|
|
44
44
|
SCROLL_POS: "scrollTop" | "scrollHeight" | "scrollLeft" | "scrollWidth" | "clientWidth" | "clientHeight";
|
|
45
45
|
SCROLL_SIZE: "scrollTop" | "scrollHeight" | "scrollLeft" | "scrollWidth" | "clientWidth" | "clientHeight";
|
|
46
|
-
START: "width" | "height" | "
|
|
46
|
+
START: "width" | "height" | "left" | "right" | "x" | "y" | "bottom" | "top";
|
|
47
47
|
} | {
|
|
48
48
|
CLIENT_POS: "clientX" | "clientY";
|
|
49
49
|
CLIENT_SIZE: "scrollTop" | "scrollHeight" | "scrollLeft" | "scrollWidth" | "clientWidth" | "clientHeight";
|
|
50
|
-
CONTRA: "width" | "height" | "
|
|
50
|
+
CONTRA: "width" | "height" | "left" | "right" | "x" | "y" | "bottom" | "top";
|
|
51
51
|
CONTRA_CLIENT_POS: "clientX" | "clientY";
|
|
52
52
|
CONTRA_END: "width" | "height";
|
|
53
53
|
CONTRA_POS: ElementPosition;
|
|
54
54
|
DIMENSION: "width" | "height";
|
|
55
|
-
END: "width" | "height" | "
|
|
55
|
+
END: "width" | "height" | "left" | "right" | "x" | "y" | "bottom" | "top";
|
|
56
56
|
POS: ElementPosition;
|
|
57
57
|
SCROLL_POS: "scrollTop" | "scrollHeight" | "scrollLeft" | "scrollWidth" | "clientWidth" | "clientHeight";
|
|
58
58
|
SCROLL_SIZE: "scrollTop" | "scrollHeight" | "scrollLeft" | "scrollWidth" | "clientWidth" | "clientHeight";
|
|
59
|
-
START: "width" | "height" | "
|
|
59
|
+
START: "width" | "height" | "left" | "right" | "x" | "y" | "bottom" | "top";
|
|
60
60
|
};
|
|
61
61
|
export declare const getItemById: (measuredItems: MeasuredDropTarget[], id: string) => MeasuredDropTarget | undefined;
|
|
62
62
|
export declare const removeDraggedItem: (measuredItems: MeasuredDropTarget[], index: number) => void;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import type { orientationType } from "@vuu-ui/vuu-utils";
|
|
2
2
|
import { Direction } from "./dragDropTypesNext";
|
|
3
|
-
import {
|
|
3
|
+
import { MeasuredDropTarget } from "./drop-target-utils";
|
|
4
4
|
export type DragDisplacersHookResult = {
|
|
5
5
|
displaceItem: (dropTargets: MeasuredDropTarget[], dropTarget: MeasuredDropTarget, size: number, useTransition?: boolean, direction?: Direction | "static", orientation?: "horizontal" | "vertical") => void;
|
|
6
6
|
displaceLastItem: (dropTargets: MeasuredDropTarget[], dropTarget: MeasuredDropTarget, size: number, useTransition?: boolean, direction?: Direction | "static", orientation?: "horizontal" | "vertical") => void;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ForwardedRef, ReactElement } from "react";
|
|
2
|
+
import { SelectionStrategy } from "../common-hooks";
|
|
3
|
+
import { ListProps } from "../list";
|
|
4
|
+
import { DropdownBaseProps } from "./dropdownTypes";
|
|
5
|
+
export interface DropdownProps<Item = string, S extends SelectionStrategy = "default"> extends DropdownBaseProps, Pick<ListProps<Item, S>, "ListItem" | "defaultSelected" | "itemToString" | "onSelect" | "onSelectionChange" | "selected" | "selectionStrategy" | "source" | "width"> {
|
|
6
|
+
ListProps?: Omit<ListProps<Item, S>, "ListItem" | "itemToString" | "source">;
|
|
7
|
+
}
|
|
8
|
+
export declare const Dropdown: <Item, S extends SelectionStrategy = "default">(props: DropdownProps<Item, S> & {
|
|
9
|
+
ref?: ForwardedRef<HTMLDivElement> | undefined;
|
|
10
|
+
}) => ReactElement<DropdownProps<Item, "default">, string | import("react").JSXElementConstructor<any>>;
|
|
@@ -1,14 +1,17 @@
|
|
|
1
|
-
import { PopupPlacement } from "
|
|
2
|
-
import { HTMLAttributes, KeyboardEvent, ReactElement, RefObject } from "react";
|
|
1
|
+
import type { PopupComponentProps, PopupPlacement } from "@vuu-ui/vuu-popups";
|
|
2
|
+
import { HTMLAttributes, KeyboardEvent, ReactElement, Ref, RefObject } from "react";
|
|
3
3
|
export type DropdownOpenKey = "Enter" | "ArrowDown" | " ";
|
|
4
|
+
export type CloseReason = "blur" | "Escape" | "click-away" | "select" | "Tab" | "toggle";
|
|
5
|
+
export type OpenChangeHandler = <T extends boolean>(open: T, closeReason?: T extends false ? CloseReason : never) => void;
|
|
4
6
|
export interface DropdownBaseProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
|
|
7
|
+
PopupProps?: Pick<PopupComponentProps, "minWidth">;
|
|
5
8
|
defaultIsOpen?: boolean;
|
|
6
9
|
disabled?: boolean;
|
|
7
10
|
fullWidth?: boolean;
|
|
8
11
|
isOpen?: boolean;
|
|
9
12
|
onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;
|
|
10
13
|
openKeys?: DropdownOpenKey[];
|
|
11
|
-
onOpenChange?:
|
|
14
|
+
onOpenChange?: OpenChangeHandler;
|
|
12
15
|
openOnFocus?: boolean;
|
|
13
16
|
placement?: PopupPlacement;
|
|
14
17
|
popupWidth?: number;
|
|
@@ -18,7 +21,9 @@ export interface DropdownBaseProps extends Omit<HTMLAttributes<HTMLDivElement>,
|
|
|
18
21
|
export interface DropdownHookProps extends Pick<DropdownBaseProps, "defaultIsOpen" | "disabled" | "fullWidth" | "isOpen" | "onOpenChange" | "onKeyDown" | "openKeys" | "openOnFocus" | "popupWidth" | "width"> {
|
|
19
22
|
ariaLabelledBy?: string;
|
|
20
23
|
id: string;
|
|
21
|
-
popupComponent: ReactElement
|
|
24
|
+
popupComponent: ReactElement & {
|
|
25
|
+
ref?: Ref<any>;
|
|
26
|
+
};
|
|
22
27
|
rootRef: RefObject<HTMLDivElement>;
|
|
23
28
|
}
|
|
24
29
|
export interface DropdownHookTriggerProps {
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { RefObject } from "react";
|
|
2
|
+
import { CloseReason } from "./dropdownTypes";
|
|
2
3
|
export type ClickawayHook = (props: {
|
|
3
4
|
popperRef: RefObject<HTMLElement>;
|
|
4
5
|
rootRef: RefObject<HTMLElement>;
|
|
5
6
|
isOpen: boolean;
|
|
6
|
-
onClose: () => void;
|
|
7
|
+
onClose: (reason: CloseReason) => void;
|
|
7
8
|
}) => void;
|
|
8
9
|
export declare const useClickAway: ClickawayHook;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { RefObject } from "react";
|
|
2
|
+
import { ListHookProps, ListHookResult } from "../list";
|
|
3
|
+
import { DropdownHookResult, DropdownHookProps } from "./dropdownTypes";
|
|
4
|
+
import { SelectionStrategy } from "../common-hooks";
|
|
5
|
+
export interface DropdownListHookProps<Item, S extends SelectionStrategy = "default"> extends Partial<Omit<DropdownHookProps, "onKeyDown">>, Omit<ListHookProps<Item, S>, "containerRef"> {
|
|
6
|
+
itemToString?: (item: Item) => string;
|
|
7
|
+
listRef: RefObject<HTMLDivElement>;
|
|
8
|
+
}
|
|
9
|
+
export interface DropdownListHookResult<Item> extends Partial<ListHookResult<Item>>, Partial<DropdownHookResult> {
|
|
10
|
+
onOpenChange: any;
|
|
11
|
+
triggerLabel?: string;
|
|
12
|
+
}
|
|
13
|
+
export declare const useDropdown: <Item, S extends SelectionStrategy>({ collectionHook, defaultHighlightedIndex: defaultHighlightedIndexProp, defaultIsOpen, defaultSelected, highlightedIndex: highlightedIndexProp, isOpen: isOpenProp, itemToString, listRef, onHighlight, onOpenChange, onSelectionChange, onSelect, selected, selectionStrategy, }: DropdownListHookProps<Item, S>) => DropdownListHookResult<Item>;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { TableSchema } from "@vuu-ui/vuu-data";
|
|
2
|
+
import { TableProps, TableRowSelectHandler } from "@vuu-ui/vuu-table";
|
|
3
|
+
import { ColumnMap } from "@vuu-ui/vuu-utils";
|
|
4
|
+
import { HTMLAttributes } from "react";
|
|
5
|
+
import "./SearchCell";
|
|
6
|
+
import "./InstrumentPicker.css";
|
|
7
|
+
export interface InstrumentPickerProps extends Omit<HTMLAttributes<HTMLElement>, "onSelect"> {
|
|
8
|
+
TableProps: Pick<TableProps, "config" | "dataSource">;
|
|
9
|
+
columnMap: ColumnMap;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
onSelect: TableRowSelectHandler;
|
|
12
|
+
schema: TableSchema;
|
|
13
|
+
searchColumns: string[];
|
|
14
|
+
width?: number;
|
|
15
|
+
}
|
|
16
|
+
export declare const InstrumentPicker: import("react").ForwardRefExoticComponent<InstrumentPickerProps & import("react").RefAttributes<HTMLDivElement>>;
|