@vertexvis/ui 0.1.0-testing.8 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (185) hide show
  1. package/README.md +1 -1
  2. package/dist/cjs/{color-circle-picker-13396ec4.js → color-circle-picker-d0403f1c.js} +2 -2
  3. package/dist/cjs/color-picker-2a4820fa.js +46 -0
  4. package/dist/cjs/{color-circle-05be54bf.js → color-swatch-8aaf6c0b.js} +42 -17
  5. package/dist/cjs/components.cjs.js +1 -1
  6. package/dist/cjs/{dialog-88e2308a.js → dialog-34f1dd6e.js} +1 -1
  7. package/dist/cjs/dom-a2c535e3.js +17 -0
  8. package/dist/cjs/{icon-460fd0f5.js → icon-3b1349ea.js} +1 -1
  9. package/dist/cjs/{icon-button-786427d6.js → icon-button-19061994.js} +1 -1
  10. package/dist/cjs/{icon-helper-ba408f49.js → icon-helper-cb479ba1.js} +107 -0
  11. package/dist/cjs/index.cjs.js +18 -12
  12. package/dist/cjs/lib-1bd1e383.js +9 -0
  13. package/dist/cjs/loader.cjs.js +1 -1
  14. package/dist/cjs/{search-bar-91cbcd07.js → search-bar-2e7ee35a.js} +130 -24
  15. package/dist/cjs/{select-5f8aecfe.js → select-2b2bdb97.js} +1 -1
  16. package/dist/cjs/{slider-13594e49.js → slider-7714cccb.js} +7 -1
  17. package/dist/cjs/tab-4335cd8f.js +26 -0
  18. package/dist/cjs/tabs-6f3e76e1.js +111 -0
  19. package/dist/cjs/{tooltip-e9f63631.js → tooltip-9d097c55.js} +2 -5
  20. package/dist/cjs/vertex-color-circle-picker.cjs.entry.js +1 -1
  21. package/dist/cjs/vertex-color-picker.cjs.entry.js +2 -1
  22. package/dist/cjs/vertex-color-swatch.cjs.entry.js +12 -0
  23. package/dist/cjs/vertex-dialog.cjs.entry.js +1 -1
  24. package/dist/cjs/vertex-icon-button.cjs.entry.js +2 -2
  25. package/dist/cjs/vertex-icon.cjs.entry.js +2 -2
  26. package/dist/cjs/vertex-search-bar.cjs.entry.js +1 -1
  27. package/dist/cjs/vertex-select.cjs.entry.js +1 -1
  28. package/dist/cjs/vertex-slider.cjs.entry.js +2 -1
  29. package/dist/cjs/{vertex-color-circle.cjs.entry.js → vertex-tab.cjs.entry.js} +3 -2
  30. package/dist/cjs/vertex-tabs.cjs.entry.js +12 -0
  31. package/dist/cjs/vertex-tooltip.cjs.entry.js +2 -1
  32. package/dist/collection/collection-manifest.json +4 -2
  33. package/dist/collection/components/color-circle-picker/color-circle-picker.js +8 -8
  34. package/dist/collection/components/color-picker/color-picker.css +95 -15
  35. package/dist/collection/components/color-picker/color-picker.js +57 -3
  36. package/dist/collection/components/color-swatch/color-swatch.css +43 -0
  37. package/dist/collection/components/{color-circle/color-circle.js → color-swatch/color-swatch.js} +96 -23
  38. package/dist/collection/components/color-swatch/lib.js +5 -0
  39. package/dist/collection/components/dialog/dialog.css +0 -1
  40. package/dist/collection/components/icon/icon-helper.js +51 -0
  41. package/dist/collection/components/icon/icon.js +1 -1
  42. package/dist/collection/components/icon/icons/arrow-left-circled.js +2 -0
  43. package/dist/collection/components/icon/icons/arrow-right-circled.js +2 -0
  44. package/dist/collection/components/icon/icons/camera-add.js +2 -0
  45. package/dist/collection/components/icon/icons/caution.js +2 -0
  46. package/dist/collection/components/icon/icons/columns-add.js +2 -0
  47. package/dist/collection/components/icon/icons/compare.js +2 -0
  48. package/dist/collection/components/icon/icons/compress.js +2 -0
  49. package/dist/collection/components/icon/icons/cube-stack.js +2 -0
  50. package/dist/collection/components/icon/icons/expand.js +2 -0
  51. package/dist/collection/components/icon/icons/file-folder.js +2 -0
  52. package/dist/collection/components/icon/icons/pin-text-square.js +2 -0
  53. package/dist/collection/components/icon/icons/plus-with-arrow.js +2 -0
  54. package/dist/collection/components/icon/icons/pmi.js +2 -0
  55. package/dist/collection/components/icon/icons/report.js +2 -0
  56. package/dist/collection/components/icon/icons/square-dot-outline.js +2 -0
  57. package/dist/collection/components/icon/icons/update.js +2 -0
  58. package/dist/collection/components/icon/icons/views.js +2 -0
  59. package/dist/collection/components/icon-button/icon-button.js +1 -1
  60. package/dist/collection/components/index.js +3 -1
  61. package/dist/collection/components/search-bar/dom.js +17 -0
  62. package/dist/collection/components/search-bar/lib.js +45 -4
  63. package/dist/collection/components/search-bar/search-bar.js +76 -23
  64. package/dist/collection/components/select/select.css +8 -0
  65. package/dist/collection/components/slider/slider.js +8 -2
  66. package/dist/collection/components/tab/tab.css +16 -0
  67. package/dist/collection/components/tab/tab.js +85 -0
  68. package/dist/collection/components/tab/util.js +3 -0
  69. package/dist/collection/components/tabs/tabs.css +67 -0
  70. package/dist/collection/components/tabs/tabs.js +159 -0
  71. package/dist/collection/types/icon.js +17 -0
  72. package/dist/collection/util/components/dom.js +3 -0
  73. package/dist/components/components.css +1 -1
  74. package/dist/components/components.esm.js +1 -1
  75. package/dist/components/index.esm.js +1 -1
  76. package/dist/components/p-01d4be1d.entry.js +1 -0
  77. package/dist/components/{p-165aed7d.js → p-0d4a0d61.js} +1 -1
  78. package/dist/components/p-18ed73e9.js +1 -0
  79. package/dist/components/p-1d08dd79.entry.js +1 -0
  80. package/dist/components/p-2ae8175d.entry.js +1 -0
  81. package/dist/components/p-2b4aedaa.entry.js +1 -0
  82. package/dist/components/p-3438c441.js +1 -0
  83. package/dist/components/{p-912f6e24.js → p-4327deea.js} +1 -1
  84. package/dist/components/p-45848878.js +1 -0
  85. package/dist/components/p-48629bf1.js +1 -0
  86. package/dist/components/{p-103249b4.js → p-5384f198.js} +1 -1
  87. package/dist/components/p-655053df.js +1 -0
  88. package/dist/components/p-65f9817e.js +1 -0
  89. package/dist/components/p-6a49c365.entry.js +1 -0
  90. package/dist/components/p-6b6c2260.js +1 -0
  91. package/dist/components/p-6ff20817.js +1 -0
  92. package/dist/components/{p-ca52a423.js → p-7bd92281.js} +1 -1
  93. package/dist/components/p-8bbc344d.entry.js +1 -0
  94. package/dist/components/p-8d83dfff.entry.js +1 -0
  95. package/dist/components/p-96f55673.js +1 -0
  96. package/dist/components/{p-9374ef6c.js → p-b9dab446.js} +1 -1
  97. package/dist/components/p-c6841378.entry.js +1 -0
  98. package/dist/components/p-cbfc041e.entry.js +1 -0
  99. package/dist/components/p-d2d75bcf.entry.js +1 -0
  100. package/dist/components/p-d539f530.js +1 -0
  101. package/dist/components/p-decf635f.entry.js +1 -0
  102. package/dist/components/p-e35057b5.entry.js +1 -0
  103. package/dist/esm/{color-circle-picker-998a7e9c.js → color-circle-picker-35ad3b3e.js} +2 -2
  104. package/dist/esm/color-picker-1d67effe.js +44 -0
  105. package/dist/esm/{color-circle-842f3321.js → color-swatch-0e62d13d.js} +42 -17
  106. package/dist/esm/components.js +1 -1
  107. package/dist/esm/{dialog-e3f49527.js → dialog-1cef715c.js} +1 -1
  108. package/dist/esm/dom-9d0f7bf4.js +13 -0
  109. package/dist/esm/{icon-d37150b4.js → icon-bf8df898.js} +1 -1
  110. package/dist/esm/{icon-button-aad3c0e7.js → icon-button-a4bdeabc.js} +1 -1
  111. package/dist/esm/{icon-helper-83f10f73.js → icon-helper-94d45002.js} +107 -0
  112. package/dist/esm/index.js +15 -11
  113. package/dist/esm/lib-73fbca8b.js +7 -0
  114. package/dist/esm/loader.js +1 -1
  115. package/dist/esm/{search-bar-f12a3599.js → search-bar-8d18626e.js} +130 -24
  116. package/dist/esm/{select-d4e135b7.js → select-78aeff96.js} +1 -1
  117. package/dist/esm/{slider-dcdb388f.js → slider-3d8545e3.js} +8 -2
  118. package/dist/esm/tab-c76332b0.js +24 -0
  119. package/dist/esm/tabs-e9f6dcbe.js +109 -0
  120. package/dist/esm/{tooltip-933da261.js → tooltip-db8ebd41.js} +1 -4
  121. package/dist/esm/vertex-color-circle-picker.entry.js +1 -1
  122. package/dist/esm/vertex-color-picker.entry.js +2 -1
  123. package/dist/esm/vertex-color-swatch.entry.js +4 -0
  124. package/dist/esm/vertex-dialog.entry.js +1 -1
  125. package/dist/esm/vertex-icon-button.entry.js +2 -2
  126. package/dist/esm/vertex-icon.entry.js +2 -2
  127. package/dist/esm/vertex-search-bar.entry.js +1 -1
  128. package/dist/esm/vertex-select.entry.js +1 -1
  129. package/dist/esm/vertex-slider.entry.js +2 -1
  130. package/dist/esm/vertex-tab.entry.js +3 -0
  131. package/dist/esm/vertex-tabs.entry.js +4 -0
  132. package/dist/esm/vertex-tooltip.entry.js +2 -1
  133. package/dist/types/components/color-circle-picker/color-circle-picker.d.ts +7 -7
  134. package/dist/types/components/color-picker/color-picker.d.ts +19 -0
  135. package/dist/types/components/{color-circle/color-circle.d.ts → color-swatch/color-swatch.d.ts} +23 -5
  136. package/dist/types/components/color-swatch/lib.d.ts +1 -0
  137. package/dist/types/components/icon/icons/arrow-left-circled.d.ts +3 -0
  138. package/dist/types/components/icon/icons/arrow-right-circled.d.ts +3 -0
  139. package/dist/types/components/icon/icons/camera-add.d.ts +3 -0
  140. package/dist/types/components/icon/icons/caution.d.ts +3 -0
  141. package/dist/types/components/icon/icons/columns-add.d.ts +3 -0
  142. package/dist/types/components/icon/icons/compare.d.ts +3 -0
  143. package/dist/types/components/icon/icons/compress.d.ts +3 -0
  144. package/dist/types/components/icon/icons/cube-stack.d.ts +3 -0
  145. package/dist/types/components/icon/icons/expand.d.ts +3 -0
  146. package/dist/types/components/icon/icons/file-folder.d.ts +3 -0
  147. package/dist/types/components/icon/icons/pin-text-square.d.ts +3 -0
  148. package/dist/types/components/icon/icons/plus-with-arrow.d.ts +3 -0
  149. package/dist/types/components/icon/icons/pmi.d.ts +3 -0
  150. package/dist/types/components/icon/icons/report.d.ts +3 -0
  151. package/dist/types/components/icon/icons/square-dot-outline.d.ts +3 -0
  152. package/dist/types/components/icon/icons/update.d.ts +3 -0
  153. package/dist/types/components/icon/icons/views.d.ts +3 -0
  154. package/dist/types/components/index.d.ts +3 -1
  155. package/dist/types/components/search-bar/dom.d.ts +5 -0
  156. package/dist/types/components/search-bar/lib.d.ts +9 -2
  157. package/dist/types/components/search-bar/search-bar.d.ts +1 -0
  158. package/dist/types/components/slider/slider.d.ts +1 -0
  159. package/dist/types/components/tab/tab.d.ts +11 -0
  160. package/dist/types/components/tab/util.d.ts +1 -0
  161. package/dist/types/components/tabs/tabs.d.ts +23 -0
  162. package/dist/types/components.d.ts +162 -76
  163. package/dist/types/types/icon.d.ts +17 -0
  164. package/dist/types/util/components/dom.d.ts +1 -0
  165. package/package.json +2 -2
  166. package/dist/cjs/color-picker-876ace00.js +0 -37
  167. package/dist/collection/components/color-circle/color-circle.css +0 -18
  168. package/dist/components/p-03dbb28c.js +0 -1
  169. package/dist/components/p-0b1cdc8a.entry.js +0 -1
  170. package/dist/components/p-0f8b9ede.entry.js +0 -1
  171. package/dist/components/p-16719272.entry.js +0 -1
  172. package/dist/components/p-20a74d5d.entry.js +0 -1
  173. package/dist/components/p-35e7ab78.entry.js +0 -1
  174. package/dist/components/p-7cfb3736.entry.js +0 -1
  175. package/dist/components/p-7dba2574.entry.js +0 -1
  176. package/dist/components/p-7f64b251.entry.js +0 -1
  177. package/dist/components/p-8434602f.js +0 -1
  178. package/dist/components/p-92930f2a.js +0 -1
  179. package/dist/components/p-cd6ddb10.js +0 -1
  180. package/dist/components/p-cfe369bf.entry.js +0 -1
  181. package/dist/components/p-d9b9aebe.js +0 -1
  182. package/dist/components/p-db34f10c.js +0 -1
  183. package/dist/components/p-f71fc166.entry.js +0 -1
  184. package/dist/esm/color-picker-2e3b51fa.js +0 -35
  185. package/dist/esm/vertex-color-circle.entry.js +0 -2
package/dist/esm/index.js CHANGED
@@ -8,17 +8,17 @@ export { C as CardGroup } from './card-group-4e8e0421.js';
8
8
  export { C as Chip } from './chip-4e568eee.js';
9
9
  export { C as ClickToEditTextField } from './click-to-edit-text-field-d9b27cd0.js';
10
10
  export { C as Collapsible } from './collapsible-b52960e6.js';
11
- export { C as ColorCircle } from './color-circle-842f3321.js';
12
- export { C as ColorCirclePicker } from './color-circle-picker-998a7e9c.js';
13
- export { C as ColorPicker } from './color-picker-2e3b51fa.js';
11
+ export { C as ColorCirclePicker } from './color-circle-picker-35ad3b3e.js';
12
+ export { C as ColorPicker } from './color-picker-1d67effe.js';
13
+ export { C as ColorSwatch } from './color-swatch-0e62d13d.js';
14
14
  export { C as ContextMenu } from './context-menu-12f1afe1.js';
15
- export { D as Dialog } from './dialog-e3f49527.js';
15
+ export { D as Dialog } from './dialog-1cef715c.js';
16
16
  export { D as DraggablePopover } from './draggable-popover-8ef3aec6.js';
17
17
  export { D as DropdownMenu } from './dropdown-menu-1598ba20.js';
18
18
  export { E as Expandable } from './expandable-b487cb00.js';
19
19
  export { H as HelpTooltip } from './help-tooltip-c2f0d996.js';
20
- export { I as Icon } from './icon-d37150b4.js';
21
- export { I as IconButton } from './icon-button-aad3c0e7.js';
20
+ export { I as Icon } from './icon-bf8df898.js';
21
+ export { I as IconButton } from './icon-button-a4bdeabc.js';
22
22
  export { L as LogoLoading } from './logo-loading-3c7fa23d.js';
23
23
  export { M as Menu } from './menu-daa7f9c9.js';
24
24
  export { M as MenuDivider } from './menu-divider-87c888cb.js';
@@ -28,17 +28,21 @@ export { R as Radio } from './radio-39c11ba4.js';
28
28
  export { R as RadioGroup } from './radio-group-7c35d2f0.js';
29
29
  export { R as Resizable } from './resizable-a147709b.js';
30
30
  export { R as ResultList } from './result-list-16c6afbd.js';
31
- export { S as SearchBar } from './search-bar-f12a3599.js';
32
- export { S as Select } from './select-d4e135b7.js';
33
- export { S as Slider } from './slider-dcdb388f.js';
31
+ export { S as SearchBar } from './search-bar-8d18626e.js';
32
+ export { S as Select } from './select-78aeff96.js';
33
+ export { S as Slider } from './slider-3d8545e3.js';
34
34
  export { S as Spinner } from './spinner-afccea51.js';
35
+ export { T as Tab } from './tab-c76332b0.js';
36
+ export { T as Tabs } from './tabs-e9f6dcbe.js';
35
37
  export { T as TextField } from './text-field-32ac877e.js';
36
38
  export { T as Toast } from './toast-255648ff.js';
37
39
  export { T as Toggle } from './toggle-1fe22e4f.js';
38
- export { T as Tooltip } from './tooltip-933da261.js';
40
+ export { T as Tooltip } from './tooltip-db8ebd41.js';
39
41
  import './index-72f28b71.js';
40
42
  import './slots-fbb5afb3.js';
41
43
  import './index-9c609209.js';
42
- import './icon-helper-83f10f73.js';
44
+ import './lib-73fbca8b.js';
45
+ import './icon-helper-94d45002.js';
43
46
  import './templates-797420bf.js';
44
47
  import './tslib.es6-99cd0de8.js';
48
+ import './dom-9d0f7bf4.js';
@@ -0,0 +1,7 @@
1
+ const hexRegex = /^(#|0x)?([A-Fa-f0-9]{6})$/;
2
+ function isValidHexColor(color) {
3
+ const match = color != null ? hexRegex.exec(color) : undefined;
4
+ return match != null && match.length > 0;
5
+ }
6
+
7
+ export { isValidHexColor as i };
@@ -11,7 +11,7 @@ const patchEsm = () => {
11
11
  const defineCustomElements = (win, options) => {
12
12
  if (typeof window === 'undefined') return Promise.resolve();
13
13
  return patchEsm().then(() => {
14
- return bootstrapLazy([["vertex-click-to-edit-textfield",[[6,"vertex-click-to-edit-textfield",{"placeholder":[1],"fontSize":[1,"font-size"],"disabled":[516],"multiline":[4],"minRows":[2,"min-rows"],"maxRows":[2,"max-rows"],"value":[1032],"autoFocus":[4,"auto-focus"],"editing":[1540],"hasError":[4,"has-error"]}]]],["vertex-collapsible",[[1,"vertex-collapsible",{"label":[1],"open":[1540]}]]],["vertex-context-menu",[[1,"vertex-context-menu",{"targetSelector":[1,"target-selector"],"animated":[4],"position":[32],"open":[32]}]]],["vertex-dialog",[[1,"vertex-dialog",{"open":[1540],"fullscreen":[4],"resizable":[4],"width":[32],"height":[32],"minWidth":[32],"minHeight":[32],"maxWidth":[32],"maxHeight":[32],"isResizing":[32]},[[4,"keydown","keyDownListener"]]]]],["vertex-draggable-popover",[[1,"vertex-draggable-popover",{"position":[1],"boundarySelector":[1,"boundary-selector"],"boundaryPadding":[2,"boundary-padding"],"anchorPosition":[32],"lastPosition":[32],"dragging":[32]}]]],["vertex-dropdown-menu",[[1,"vertex-dropdown-menu",{"animated":[4],"placement":[1],"open":[32]}]]],["vertex-help-tooltip",[[1,"vertex-help-tooltip",{"animated":[4],"placement":[1],"open":[32]}]]],["vertex-search-bar",[[6,"vertex-search-bar",{"variant":[1],"disabled":[4],"triggerCharacter":[1,"trigger-character"],"breakCharacters":[16],"resultItems":[16],"placement":[1],"value":[1],"placeholder":[1],"replacements":[1040],"replacementUriType":[1,"replacement-uri-type"],"cursorPosition":[32],"displayedElements":[32],"hasTriggered":[32]}]]],["vertex-select",[[1,"vertex-select",{"value":[513],"placeholder":[513],"disabled":[516],"animated":[4],"hideSelected":[4,"hide-selected"],"resizeObserverFactory":[16],"open":[32],"position":[32],"displayValue":[32]}]]],["vertex-slider",[[1,"vertex-slider",{"min":[2],"max":[2],"valueLabelDisplay":[1,"value-label-display"],"step":[8],"size":[1],"value":[1026],"disabled":[4]}]]],["vertex-toast",[[1,"vertex-toast",{"content":[1],"placement":[1],"duration":[2],"animated":[4],"open":[4],"type":[1],"isOpen":[32]}]]],["vertex-color-circle-picker",[[1,"vertex-color-circle-picker",{"colors":[1],"supplementalColors":[1,"supplemental-colors"],"theme":[513],"lightenPercentage":[2,"lighten-percentage"],"darkenPercentage":[2,"darken-percentage"],"selected":[1537],"direction":[1]}]]],["vertex-color-picker",[[1,"vertex-color-picker",{"value":[1537],"disabled":[4]}]]],["vertex-toggle",[[1,"vertex-toggle",{"variant":[1],"disabled":[4],"checked":[1540]}]]],["vertex-avatar",[[1,"vertex-avatar",{"firstName":[1,"first-name"],"lastName":[1,"last-name"],"value":[1],"active":[4],"variant":[1]}]]],["vertex-avatar-group",[[1,"vertex-avatar-group"]]],["vertex-badge",[[1,"vertex-badge",{"badgeText":[1,"badge-text"],"badgeColor":[1,"badge-color"]}]]],["vertex-button",[[1,"vertex-button",{"type":[1],"color":[1],"variant":[1],"size":[1],"expand":[1],"href":[1],"target":[1],"disabled":[516]}]]],["vertex-card",[[1,"vertex-card",{"mode":[1]}]]],["vertex-card-group",[[1,"vertex-card-group",{"selected":[516],"hovered":[516],"expanded":[516]}]]],["vertex-chip",[[1,"vertex-chip",{"variant":[1],"color":[1]}]]],["vertex-logo-loading",[[1,"vertex-logo-loading"]]],["vertex-menu-divider",[[1,"vertex-menu-divider"]]],["vertex-menu-item",[[1,"vertex-menu-item",{"disabled":[516]}]]],["vertex-radio",[[2,"vertex-radio",{"disabled":[516],"value":[513],"label":[513],"name":[513],"checked":[516]}]]],["vertex-radio-group",[[1,"vertex-radio-group",{"name":[513],"value":[1537]}]]],["vertex-resizable",[[1,"vertex-resizable",{"horizontalDirection":[1,"horizontal-direction"],"verticalDirection":[1,"vertical-direction"],"initialHorizontalScale":[2,"initial-horizontal-scale"],"initialVerticalScale":[2,"initial-vertical-scale"],"initializeWithOffset":[4,"initialize-with-offset"],"parentSelector":[1,"parent-selector"],"verticalSiblingSelector":[1,"vertical-sibling-selector"],"horizontalSiblingSelector":[1,"horizontal-sibling-selector"],"contentSelector":[1,"content-selector"],"position":[1],"dimensionsComputed":[1540,"dimensions-computed"],"width":[32],"minWidth":[32],"maxWidth":[32],"height":[32],"minHeight":[32],"maxHeight":[32],"left":[32],"top":[32],"hoveredLocation":[32],"dragStartLocation":[32],"updateDimensions":[64]}]]],["vertex-spinner",[[1,"vertex-spinner",{"color":[1],"size":[1]}]]],["vertex-expandable",[[1,"vertex-expandable",{"expanded":[1540],"expanding":[1540],"collapsing":[1540],"controlled":[516],"expandType":[513,"expand-type"],"animated":[4],"contentScrollHeight":[32]}]]],["vertex-result-list",[[1,"vertex-result-list",{"items":[16],"itemsJson":[1,"items"],"viewportStartIndex":[1026,"viewport-start-index"],"viewportEndIndex":[1026,"viewport-end-index"],"resultHeight":[1026,"result-height"],"overScanCount":[2,"over-scan-count"],"placement":[1],"position":[1],"open":[4],"listHeight":[32],"parsedResults":[32],"scrollTop":[32],"lastStartIndex":[32],"lastFocusedIndex":[32],"stateMap":[32]}]]],["vertex-textfield",[[6,"vertex-textfield",{"type":[1],"name":[1],"variant":[1],"fontSize":[1,"font-size"],"multiline":[4],"minRows":[2,"min-rows"],"maxRows":[2,"max-rows"],"placeholder":[1],"autoFocus":[4,"auto-focus"],"autoComplete":[1,"auto-complete"],"autoCorrect":[1,"auto-correct"],"value":[1032],"disabled":[516],"hasError":[4,"has-error"],"updateInput":[64],"blurInput":[64],"getInputValue":[64],"selectAll":[64]}]]],["vertex-tooltip",[[1,"vertex-tooltip",{"content":[1],"disabled":[4],"placement":[1],"delay":[2],"animated":[4],"open":[32]}]]],["vertex-color-circle",[[1,"vertex-color-circle",{"color":[513],"supplementalColor":[513,"supplemental-color"],"theme":[513],"lightenPercentage":[2,"lighten-percentage"],"darkenPercentage":[2,"darken-percentage"],"lightened":[1537],"darkened":[1537]}]]],["vertex-auto-resize-textarea",[[1,"vertex-auto-resize-textarea",{"textareaSelector":[1,"textarea-selector"],"initialValue":[1,"initial-value"],"minRows":[514,"min-rows"],"maxRows":[514,"max-rows"],"textValue":[32]}]]],["vertex-menu",[[1,"vertex-menu",{"animated":[4],"open":[1540],"placement":[1],"fallbackPlacements":[16],"backdrop":[4],"position":[1040],"popoverProps":[16]}]]],["vertex-icon-button",[[1,"vertex-icon-button",{"iconName":[1,"icon-name"],"disabled":[516],"variant":[1],"iconColor":[1,"icon-color"],"iconSize":[1,"icon-size"]}]]],["vertex-icon",[[1,"vertex-icon",{"name":[1],"size":[1]}]]],["vertex-popover",[[1,"vertex-popover",{"open":[1540],"placement":[1],"position":[1025],"anchorBounds":[16],"backdrop":[4],"animated":[4],"anchorSelector":[1,"anchor-selector"],"boundarySelector":[1,"boundary-selector"],"resizeBehavior":[1,"resize-behavior"],"overflowBehavior":[16],"flipBehavior":[16],"offsetBehavior":[2,"offset-behavior"],"updateOnResize":[4,"update-on-resize"],"resizeObserverFactory":[16],"opened":[32],"computedPlacement":[32]}]]]], options);
14
+ return bootstrapLazy([["vertex-click-to-edit-textfield",[[6,"vertex-click-to-edit-textfield",{"placeholder":[1],"fontSize":[1,"font-size"],"disabled":[516],"multiline":[4],"minRows":[2,"min-rows"],"maxRows":[2,"max-rows"],"value":[1032],"autoFocus":[4,"auto-focus"],"editing":[1540],"hasError":[4,"has-error"]}]]],["vertex-collapsible",[[1,"vertex-collapsible",{"label":[1],"open":[1540]}]]],["vertex-context-menu",[[1,"vertex-context-menu",{"targetSelector":[1,"target-selector"],"animated":[4],"position":[32],"open":[32]}]]],["vertex-dialog",[[1,"vertex-dialog",{"open":[1540],"fullscreen":[4],"resizable":[4],"width":[32],"height":[32],"minWidth":[32],"minHeight":[32],"maxWidth":[32],"maxHeight":[32],"isResizing":[32]},[[4,"keydown","keyDownListener"]]]]],["vertex-draggable-popover",[[1,"vertex-draggable-popover",{"position":[1],"boundarySelector":[1,"boundary-selector"],"boundaryPadding":[2,"boundary-padding"],"anchorPosition":[32],"lastPosition":[32],"dragging":[32]}]]],["vertex-dropdown-menu",[[1,"vertex-dropdown-menu",{"animated":[4],"placement":[1],"open":[32]}]]],["vertex-help-tooltip",[[1,"vertex-help-tooltip",{"animated":[4],"placement":[1],"open":[32]}]]],["vertex-search-bar",[[6,"vertex-search-bar",{"variant":[1],"disabled":[4],"triggerCharacter":[1,"trigger-character"],"breakCharacters":[16],"resultItems":[16],"placement":[1],"value":[1],"placeholder":[1],"replacements":[1040],"replacementUriType":[1,"replacement-uri-type"],"cursorPosition":[32],"displayedElements":[32],"hasTriggered":[32]}]]],["vertex-select",[[1,"vertex-select",{"value":[513],"placeholder":[513],"disabled":[516],"animated":[4],"hideSelected":[4,"hide-selected"],"resizeObserverFactory":[16],"open":[32],"position":[32],"displayValue":[32]}]]],["vertex-slider",[[1,"vertex-slider",{"min":[2],"max":[2],"valueLabelDisplay":[1,"value-label-display"],"step":[8],"size":[1],"value":[1026],"disabled":[4]}]]],["vertex-toast",[[1,"vertex-toast",{"content":[1],"placement":[1],"duration":[2],"animated":[4],"open":[4],"type":[1],"isOpen":[32]}]]],["vertex-color-circle-picker",[[1,"vertex-color-circle-picker",{"colors":[1],"supplementalColors":[1,"supplemental-colors"],"theme":[513],"lightenPercentage":[2,"lighten-percentage"],"darkenPercentage":[2,"darken-percentage"],"selected":[1537],"direction":[1]}]]],["vertex-color-picker",[[1,"vertex-color-picker",{"value":[1537],"size":[513],"variant":[513],"disabled":[4]}]]],["vertex-toggle",[[1,"vertex-toggle",{"variant":[1],"disabled":[4],"checked":[1540]}]]],["vertex-avatar",[[1,"vertex-avatar",{"firstName":[1,"first-name"],"lastName":[1,"last-name"],"value":[1],"active":[4],"variant":[1]}]]],["vertex-avatar-group",[[1,"vertex-avatar-group"]]],["vertex-badge",[[1,"vertex-badge",{"badgeText":[1,"badge-text"],"badgeColor":[1,"badge-color"]}]]],["vertex-button",[[1,"vertex-button",{"type":[1],"color":[1],"variant":[1],"size":[1],"expand":[1],"href":[1],"target":[1],"disabled":[516]}]]],["vertex-card",[[1,"vertex-card",{"mode":[1]}]]],["vertex-card-group",[[1,"vertex-card-group",{"selected":[516],"hovered":[516],"expanded":[516]}]]],["vertex-chip",[[1,"vertex-chip",{"variant":[1],"color":[1]}]]],["vertex-logo-loading",[[1,"vertex-logo-loading"]]],["vertex-menu-divider",[[1,"vertex-menu-divider"]]],["vertex-menu-item",[[1,"vertex-menu-item",{"disabled":[516]}]]],["vertex-radio",[[2,"vertex-radio",{"disabled":[516],"value":[513],"label":[513],"name":[513],"checked":[516]}]]],["vertex-radio-group",[[1,"vertex-radio-group",{"name":[513],"value":[1537]}]]],["vertex-resizable",[[1,"vertex-resizable",{"horizontalDirection":[1,"horizontal-direction"],"verticalDirection":[1,"vertical-direction"],"initialHorizontalScale":[2,"initial-horizontal-scale"],"initialVerticalScale":[2,"initial-vertical-scale"],"initializeWithOffset":[4,"initialize-with-offset"],"parentSelector":[1,"parent-selector"],"verticalSiblingSelector":[1,"vertical-sibling-selector"],"horizontalSiblingSelector":[1,"horizontal-sibling-selector"],"contentSelector":[1,"content-selector"],"position":[1],"dimensionsComputed":[1540,"dimensions-computed"],"width":[32],"minWidth":[32],"maxWidth":[32],"height":[32],"minHeight":[32],"maxHeight":[32],"left":[32],"top":[32],"hoveredLocation":[32],"dragStartLocation":[32],"updateDimensions":[64]}]]],["vertex-spinner",[[1,"vertex-spinner",{"color":[1],"size":[1]}]]],["vertex-tab",[[1,"vertex-tab",{"label":[1],"active":[4]}]]],["vertex-tabs",[[1,"vertex-tabs",{"active":[1025],"labels":[32],"activeBounds":[32],"activeButtonEl":[32]}]]],["vertex-expandable",[[1,"vertex-expandable",{"expanded":[1540],"expanding":[1540],"collapsing":[1540],"controlled":[516],"expandType":[513,"expand-type"],"animated":[4],"contentScrollHeight":[32]}]]],["vertex-result-list",[[1,"vertex-result-list",{"items":[16],"itemsJson":[1,"items"],"viewportStartIndex":[1026,"viewport-start-index"],"viewportEndIndex":[1026,"viewport-end-index"],"resultHeight":[1026,"result-height"],"overScanCount":[2,"over-scan-count"],"placement":[1],"position":[1],"open":[4],"listHeight":[32],"parsedResults":[32],"scrollTop":[32],"lastStartIndex":[32],"lastFocusedIndex":[32],"stateMap":[32]}]]],["vertex-auto-resize-textarea",[[1,"vertex-auto-resize-textarea",{"textareaSelector":[1,"textarea-selector"],"initialValue":[1,"initial-value"],"minRows":[514,"min-rows"],"maxRows":[514,"max-rows"],"textValue":[32]}]]],["vertex-textfield",[[6,"vertex-textfield",{"type":[1],"name":[1],"variant":[1],"fontSize":[1,"font-size"],"multiline":[4],"minRows":[2,"min-rows"],"maxRows":[2,"max-rows"],"placeholder":[1],"autoFocus":[4,"auto-focus"],"autoComplete":[1,"auto-complete"],"autoCorrect":[1,"auto-correct"],"value":[1032],"disabled":[516],"hasError":[4,"has-error"],"updateInput":[64],"blurInput":[64],"getInputValue":[64],"selectAll":[64]}]]],["vertex-popover",[[1,"vertex-popover",{"open":[1540],"placement":[1],"position":[1025],"anchorBounds":[16],"backdrop":[4],"animated":[4],"anchorSelector":[1,"anchor-selector"],"boundarySelector":[1,"boundary-selector"],"resizeBehavior":[1,"resize-behavior"],"overflowBehavior":[16],"flipBehavior":[16],"offsetBehavior":[2,"offset-behavior"],"updateOnResize":[4,"update-on-resize"],"resizeObserverFactory":[16],"opened":[32],"computedPlacement":[32]}]]],["vertex-tooltip",[[1,"vertex-tooltip",{"content":[1],"disabled":[4],"placement":[1],"delay":[2],"animated":[4],"open":[32]}]]],["vertex-color-swatch",[[1,"vertex-color-swatch",{"variant":[513],"size":[513],"color":[513],"supplementalColor":[513,"supplemental-color"],"theme":[513],"lightenPercentage":[2,"lighten-percentage"],"darkenPercentage":[2,"darken-percentage"],"lightened":[1537],"darkened":[1537]}]]],["vertex-menu",[[1,"vertex-menu",{"animated":[4],"open":[1540],"placement":[1],"fallbackPlacements":[16],"backdrop":[4],"position":[1040],"popoverProps":[16]}]]],["vertex-icon-button",[[1,"vertex-icon-button",{"iconName":[1,"icon-name"],"disabled":[516],"variant":[1],"iconColor":[1,"icon-color"],"iconSize":[1,"icon-size"]}]]],["vertex-icon",[[1,"vertex-icon",{"name":[1],"size":[1]}]]]], options);
15
15
  });
16
16
  };
17
17
 
@@ -53,12 +53,24 @@ const getWindowSelection = () => {
53
53
  }
54
54
  return undefined;
55
55
  };
56
+ const nodeHasChildNodes = (node) => {
57
+ return node.hasChildNodes();
58
+ };
56
59
  const createDocumentRange = () => {
57
60
  return document.createRange();
58
61
  };
59
62
  const createTextNode = (text) => {
60
63
  return new Text(text);
61
64
  };
65
+ const createBreak = () => {
66
+ return document.createElement('br');
67
+ };
68
+ const isHtmlElement = (node) => {
69
+ return node instanceof HTMLElement;
70
+ };
71
+ const isBrElement = (node) => {
72
+ return node instanceof HTMLBRElement;
73
+ };
62
74
 
63
75
  const createResultUri = (result) => {
64
76
  return `${result.type}:${result.id}`;
@@ -69,15 +81,56 @@ const createSearchResultReplacement = (result, before, after) => {
69
81
  before: createTextNode(before),
70
82
  beforeSpace: createTextNode(createHairSpace()),
71
83
  result: createTextNode(urn),
72
- afterSpace: after != null ? createTextNode(createNoBreakSpace()) : undefined,
84
+ afterSpace: after != null
85
+ ? createTextNode(createNoBreakSpace())
86
+ : createTextNode(createHairSpace()),
73
87
  after: after != null ? createTextNode(after) : undefined,
74
88
  };
75
89
  };
76
- const getNodesForSearchResultReplacement = (replacement) => {
90
+ /**
91
+ * Newline characters and spaces are represented slightly differently within a
92
+ * content editable element between browsers. This method standardizes the
93
+ * representation of those characters to avoid having to write branching logic
94
+ * to support each individual browser.
95
+ */
96
+ const standardizeNewlinesAndSpaces = (node) => {
97
+ const content = node.textContent;
98
+ if (content === '\n') {
99
+ return [createBreak()];
100
+ }
101
+ else if (content != null && content.includes('\n')) {
102
+ const split = content.split('\n');
103
+ return split.reduce((res, substr, i) => {
104
+ const previous = split[i - 1];
105
+ // Ignore the empty string if the prior element was converted
106
+ // to a breaking element to prevent duplication of newlines.
107
+ if (substr === '' && previous !== '') {
108
+ return res;
109
+ }
110
+ return [
111
+ ...res,
112
+ // Standard spaces are not always respected with in `Text`
113
+ // elements when appended to a contenteditable element. This
114
+ // conversion preserves that spacing.
115
+ createTextNode(substr.replace(/ /g, createNoBreakSpace())),
116
+ createBreak(),
117
+ ];
118
+ }, []);
119
+ }
120
+ return [node];
121
+ };
122
+ const getNodesForSearchResultReplacement = (replacement, isBreaking = false) => {
77
123
  const keys = Object.keys(replacement);
78
- return keys
124
+ const replacementElements = keys
79
125
  .map((key) => replacement[key])
80
126
  .filter((node) => node != null);
127
+ // If the element is intended to replace a breaking element such
128
+ // as a `<div>` wrapper, a newline is required alongside the standard
129
+ // replacement elements.
130
+ if (isBreaking) {
131
+ return [createTextNode('\n'), ...replacementElements];
132
+ }
133
+ return replacementElements;
81
134
  };
82
135
  /**
83
136
  * We leverage a couple unique spaces to represent mentions, allowing for
@@ -112,13 +165,34 @@ const SearchBar = class {
112
165
  this.inputFocus = createEvent(this, "inputFocus", 7);
113
166
  this.inputBlur = createEvent(this, "inputBlur", 7);
114
167
  this.rawElements = [];
168
+ this.attemptReplaceElement = (child, other, replacement, isBreaking = false) => {
169
+ // In the case that the child we're evaluating has its own children
170
+ // (often a wrapper `<div>`), we want to evaluate whether any of its
171
+ // children is the target to replace.
172
+ if (nodeHasChildNodes(child) &&
173
+ Array.from(child.childNodes).some((c) => nodeHasChildNodes(c) || this.isIdenticalElement(c, other))) {
174
+ return Array.from(child.childNodes).reduce((res, c) => [
175
+ ...res,
176
+ ...this.attemptReplaceElement(c, other, replacement,
177
+ // If the element we're evaluating is a wrapper, we want to
178
+ // consider it a breaking element and add a newline to the
179
+ // replaced element only if the previous node is a `Text` node.
180
+ !isHtmlElement(child.previousSibling)),
181
+ ], []);
182
+ }
183
+ else {
184
+ return this.isIdenticalElement(child, other)
185
+ ? getNodesForSearchResultReplacement(replacement, isBreaking)
186
+ : [child];
187
+ }
188
+ };
115
189
  this.isIdenticalElement = (child, other) => {
116
190
  return (child === this.triggeredElement ||
117
191
  this.getTextContent(child) === this.getTextContent(other));
118
192
  };
119
193
  this.getTextContent = (node) => {
120
194
  var _a;
121
- if (node instanceof HTMLElement) {
195
+ if (isHtmlElement(node)) {
122
196
  return node.innerText;
123
197
  }
124
198
  return (_a = node.textContent) !== null && _a !== void 0 ? _a : '';
@@ -195,21 +269,54 @@ const SearchBar = class {
195
269
  selection.addRange(range);
196
270
  }
197
271
  };
198
- this.getContentAsString = () => {
199
- if (this.contentEl != null) {
200
- return trimNonstandardSpaces(Array.from(this.contentEl.childNodes).reduce((res, n) => {
272
+ this.getContentAsString = (element) => {
273
+ if (element != null) {
274
+ const res = trimNonstandardSpaces(Array.from(element.childNodes).reduce((res, n) => {
201
275
  var _a;
202
- if (n instanceof HTMLElement &&
203
- n.getAttribute('data-replaced') === 'true') {
276
+ const previousSiblingIsBlock = n.previousSibling == null || isHtmlElement(n.previousSibling);
277
+ if (isHtmlElement(n) && n.getAttribute('data-replaced') === 'true') {
278
+ /**
279
+ * If an element has been replaced visually, append the original
280
+ * value prior to being replaced.
281
+ */
204
282
  return `${res}${n.getAttribute('data-original')}`;
205
283
  }
206
- else if (n instanceof HTMLElement) {
207
- return `${res}${n.innerText}`;
284
+ else if (isHtmlElement(n) && n.childElementCount > 0) {
285
+ /**
286
+ * If an element is a wrapper, we want to treat it as a block element,
287
+ * ensuring newlines before and after the content.
288
+ * Additionally, we want to evaluate each of its children independently.
289
+ * Some browsers will conditionally wrap content in additional wrapper
290
+ * elements we need to unravel.
291
+ */
292
+ return `${res}${previousSiblingIsBlock ? '' : '\n'}${this.getContentAsString(n)}`;
293
+ }
294
+ else if (isBrElement(n)) {
295
+ /**
296
+ * If an element is a `<br>` element, we want to simply represent
297
+ * it as a newline in the returned string.
298
+ */
299
+ return `${res}\n`;
300
+ }
301
+ else if (isHtmlElement(n)) {
302
+ /**
303
+ * If an element is a wrapper, we want to treat it as a block element,
304
+ * ensuring newlines before and after the content.
305
+ * If the prior element is also to be treated as a block format, we
306
+ * will omit the newline before the content to avoid duplicating the
307
+ * behavior.
308
+ */
309
+ return `${res}${previousSiblingIsBlock ? '' : '\n'}${n.innerText}\n`;
208
310
  }
209
311
  else {
312
+ /**
313
+ * If a node is simply a `Text` node, we just want to append the text
314
+ * if defined.
315
+ */
210
316
  return `${res}${(_a = n.textContent) !== null && _a !== void 0 ? _a : ''}`;
211
317
  }
212
318
  }, ''));
319
+ return res;
213
320
  }
214
321
  return '';
215
322
  };
@@ -285,12 +392,13 @@ const SearchBar = class {
285
392
  replacement.before,
286
393
  replacement.beforeSpace,
287
394
  replacement.result,
395
+ replacement.afterSpace,
288
396
  ];
289
397
  }
290
398
  return res;
291
399
  }, [])
292
400
  : [];
293
- this.rawElements = [...parts, createTextNode(nextSubstr)];
401
+ this.rawElements = [...parts, createTextNode(nextSubstr)].reduce((res, p) => [...res, ...standardizeNewlinesAndSpaces(p)], []);
294
402
  this.updateContent(this.replacements);
295
403
  }
296
404
  }
@@ -298,7 +406,7 @@ const SearchBar = class {
298
406
  if (this.contentEl != null && !fastDeepEqual(newValue, oldValue)) {
299
407
  this.contentEl.innerHTML = '';
300
408
  this.displayedElements = this.rawElements.map((el) => {
301
- const raw = el instanceof HTMLElement ? el.innerText : el.textContent;
409
+ const raw = isHtmlElement(el) ? el.innerText : el.textContent;
302
410
  const replacement = this.replacements.find((r) => raw === null || raw === void 0 ? void 0 : raw.includes(createResultUri(r)));
303
411
  if (raw != null && replacement != null) {
304
412
  const replacementElement = this.createReplacedElement(raw, replacement);
@@ -313,7 +421,7 @@ const SearchBar = class {
313
421
  if (this.lastReplacedSpace != null) {
314
422
  this.moveCursorToNodeEnd(this.lastReplacedSpace);
315
423
  }
316
- this.inputChanged.emit(this.getContentAsString());
424
+ this.inputChanged.emit(this.getContentAsString(this.contentEl));
317
425
  }
318
426
  }
319
427
  render() {
@@ -325,7 +433,7 @@ const SearchBar = class {
325
433
  blank: this.variant === 'blank',
326
434
  disabled: this.disabled,
327
435
  });
328
- return (h(Host, null, h("div", { class: classes }, h("span", { class: "content-input", role: "textbox", contentEditable: "true", "aria-multiline": "true", "data-placeholder": this.placeholder, ref: (el) => (this.contentEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleCursorPositionUpdate, onClick: this.handleCursorPositionUpdate, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur })), h("vertex-result-list", { position: this.cursorPosition, placement: this.placement, open: this.hasTriggered &&
436
+ return (h(Host, null, h("div", { class: classes }, h("span", { class: "content-input", role: "textbox", contentEditable: "true", "aria-multiline": "true", "data-placeholder": this.placeholder, ref: (el) => (this.contentEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, onClick: this.handleCursorPositionUpdate, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur })), h("vertex-result-list", { position: this.cursorPosition, placement: this.placement, open: this.hasTriggered &&
329
437
  this.resultItems != null &&
330
438
  this.resultItems.length > 0, items: (_a = this.resultItems) !== null && _a !== void 0 ? _a : [], onEnterPressed: this.handleResultClick, onResultClick: this.handleResultClick }, h("slot", { name: "results" })), h("slot", { name: "replaced" })));
331
439
  }
@@ -341,13 +449,13 @@ const SearchBar = class {
341
449
  this.cursorPosition = this.getCursorPosition();
342
450
  }
343
451
  async handleInput() {
344
- this.inputChanged.emit(this.getContentAsString());
452
+ this.inputChanged.emit(this.getContentAsString(this.contentEl));
345
453
  }
346
454
  handleClick() {
347
455
  this.handleCursorPositionUpdate();
348
456
  }
349
457
  handleWindowClick(event) {
350
- if (event.target instanceof HTMLElement &&
458
+ if (isHtmlElement(event.target) &&
351
459
  event.target.getAttribute('data-replaced') === 'true' &&
352
460
  event.target.nextSibling != null) {
353
461
  this.moveCursorToNodeEnd(event.target.nextSibling, true);
@@ -364,7 +472,7 @@ const SearchBar = class {
364
472
  var _a;
365
473
  const triggeredRange = this.triggeredRange;
366
474
  const triggeredElement = this.triggeredElement;
367
- const value = triggeredElement instanceof HTMLElement
475
+ const value = isHtmlElement(triggeredElement)
368
476
  ? triggeredElement.innerText
369
477
  : triggeredElement === null || triggeredElement === void 0 ? void 0 : triggeredElement.textContent;
370
478
  if (this.contentEl != null &&
@@ -378,12 +486,10 @@ const SearchBar = class {
378
486
  const replacement = createSearchResultReplacement(event.detail, before, after);
379
487
  this.lastReplacedSpace = replacement.afterSpace;
380
488
  this.rawElements = Array.from(this.contentEl.childNodes).reduce((re, e) => {
381
- if (this.isIdenticalElement(e, triggeredElement)) {
382
- return [...re, ...getNodesForSearchResultReplacement(replacement)];
383
- }
384
- else {
385
- return [...re, e];
386
- }
489
+ return [
490
+ ...re,
491
+ ...this.attemptReplaceElement(e, triggeredElement, replacement),
492
+ ];
387
493
  }, []);
388
494
  this.hasTriggered = false;
389
495
  this.resultReplaced.emit(event.detail);
@@ -1,7 +1,7 @@
1
1
  import { r as registerInstance, e as createEvent, h, c as readTask, g as getElement } from './index-72f28b71.js';
2
2
  import { c as classnames } from './index-9c609209.js';
3
3
 
4
- const selectCss = ":host{--select-width:100%;--select-option-white-space:normal}.root{display:inline-block;color:var(--vertex-ui-neutral-700);width:var(--select-width);font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-base);overflow:hidden;user-select:none}.root:not(.disabled):hover{color:var(--vertex-ui-neutral-800)}.root.disabled{color:var(--vertex-ui-neutral-400)}.target,.selected-option{background-color:var(--vertex-ui-neutral-200);width:100%;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;padding:0.375rem 0.75rem 0.375rem 0.75rem}.target.hidden{box-shadow:0px 2px 4px -1px rgb(0 0 0 / 20%),\n 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%)}.selected-option.disabled,.target.disabled{background-color:var(--vertex-ui-neutral-100);cursor:default}.target{border-radius:4px}.text{white-space:var(--select-option-white-space);overflow:hidden;text-overflow:ellipsis}.icon{padding-left:1rem;margin-left:auto}.options{position:relative;cursor:pointer;background-color:var(--vertex-ui-white);border-radius:4px;padding:0.25rem 0;top:-0.25rem;box-shadow:0px 2px 4px -1px rgb(0 0 0 / 20%),\n 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%)}.options.animated{transition:opacity 0.1s ease-in 0.05s;opacity:0}.options.hidden{background-color:transparent}.options.visible{opacity:1}.options>*,.options>slot::slotted(*){padding:0.375rem 0.75rem 0.375rem 0.75rem}.options.hidden>*,.options.hidden>slot::slotted(*){opacity:0}.options>slot::slotted(:hover){background-color:var(--vertex-ui-neutral-200)}.options>slot::slotted([data-selected=\"true\"]){display:none}vertex-popover{--transform-origin:top left;--open-animation-name:open-scale-y;--close-animation-name:close-scale-y}";
4
+ const selectCss = ":host{--select-width:100%;--select-option-white-space:normal;--max-dropdown-height:80vh}.root{display:inline-block;color:var(--vertex-ui-neutral-700);width:var(--select-width);font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-base);overflow:hidden;user-select:none}.root:not(.disabled):hover{color:var(--vertex-ui-neutral-800)}.root.disabled{color:var(--vertex-ui-neutral-400)}.target,.selected-option{background-color:var(--vertex-ui-neutral-200);width:100%;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;padding:0.375rem 0.75rem 0.375rem 0.75rem}.target.hidden{box-shadow:0px 2px 4px -1px rgb(0 0 0 / 20%),\n 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%)}.selected-option.disabled,.target.disabled{background-color:var(--vertex-ui-neutral-100);cursor:default}.target{border-radius:4px}.text{white-space:var(--select-option-white-space);overflow:hidden;text-overflow:ellipsis}.icon{padding-left:1rem;margin-left:auto}.options{position:relative;cursor:pointer;background-color:var(--vertex-ui-white);border-radius:4px;padding:0.25rem 0;top:-0.25rem;box-shadow:0px 2px 4px -1px rgb(0 0 0 / 20%),\n 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);max-height:var(--max-dropdown-height);overflow-y:auto}.options.animated{transition:opacity 0.1s ease-in 0.05s;opacity:0}.options.hidden{background-color:transparent}.options.visible{opacity:1}.options>*,.options>slot::slotted(*){padding:0.375rem 0.75rem 0.375rem 0.75rem}.options.hidden>*,.options.hidden>slot::slotted(*){opacity:0}.options>slot::slotted(:hover){background-color:var(--vertex-ui-neutral-200)}.options>slot::slotted([data-selected=\"true\"]){display:none}vertex-popover{--transform-origin:top left;--open-animation-name:open-scale-y;--close-animation-name:close-scale-y}";
5
5
 
6
6
  const GET_BOUNDS_DEBOUNCE_THRESHOLD = 200;
7
7
  const Select = class {
@@ -1,5 +1,6 @@
1
- import { r as registerInstance, e as createEvent, h } from './index-72f28b71.js';
1
+ import { r as registerInstance, e as createEvent, h, g as getElement } from './index-72f28b71.js';
2
2
  import { c as classnames } from './index-9c609209.js';
3
+ import { b as blurElement } from './dom-9d0f7bf4.js';
3
4
 
4
5
  const sliderCss = ":host{display:flex;--vertex-slider-track-color:var(--vertex-ui-neutral-400);--vertex-slider-thumb-color:var(--vertex-ui-blue-700)}:host([size=\"sm\"]){height:12px}:host([size=\"md\"]){height:14px}:host([size=\"lg\"]){height:16px}.input{-webkit-appearance:none;width:100%;height:100%;background:transparent;margin:0}.input:not(.disabled){cursor:pointer}.input.sm{height:12px}.input.md{height:14px}.input.lg{height:16px}.input.disabled{opacity:0.5}.tooltip{width:100%}.input::-webkit-slider-runnable-track{width:100%;height:2px;cursor:default;background:var(--vertex-slider-track-color);border-radius:1px}.input::-moz-range-track{width:100%;height:2px;cursor:default;background:var(--vertex-slider-track-color);border-radius:1px}.input::-ms-track{width:100%;height:2px;cursor:default;background:var(--vertex-slider-track-color);border-radius:1px}.input:not(.disabled)::-webkit-slider-runnable-track{cursor:pointer}.input:not(.disabled)::-moz-range-track{cursor:pointer}.input:not(.disabled)::-ms-track{cursor:pointer}.input.sm::-webkit-slider-thumb{height:12px;width:12px;margin-top:-5px}.input.sm::-moz-range-thumb{height:12px;width:12px;margin-top:-5px}.input.sm::-ms-thumb{height:12px;width:12px;margin-top:-5px}.input.md::-webkit-slider-thumb{height:14px;width:14px;margin-top:-6px}.input.md::-moz-range-thumb{height:14px;width:14px;margin-top:-6px}.input.md::-ms-thumb{height:14px;width:14px;margin-top:-6px}.input.lg::-webkit-slider-thumb{height:16px;width:16px;margin-top:-7px}.input.lg::-moz-range-thumb{height:16px;width:16px;margin-top:-7px}.input.lg::-ms-thumb{height:16px;width:16px;margin-top:-7px}.input::-webkit-slider-thumb{-webkit-appearance:none;border-radius:50%;background:var(--vertex-slider-thumb-color);border:none;cursor:default}.input::-moz-range-thumb{-webkit-appearance:none;border-radius:50%;background:var(--vertex-slider-thumb-color);border:none;cursor:default}.input::-ms-thumb{-webkit-appearance:none;border-radius:50%;background:var(--vertex-slider-thumb-color);border:none;cursor:default}.input:not(.disabled)::-webkit-slider-thumb{cursor:grab}.input:not(.disabled)::-moz-range-thumb{cursor:grab}.input:not(.disabled)::-ms-thumb{cursor:grab}.input::-webkit-slider-thumb:active{cursor:grabbing;box-shadow:0 1px 2px var(--vertex-ui-black)}.input::-moz-range-thumb:active{cursor:grabbing;box-shadow:0 1px 2px var(--vertex-ui-black)}.input::-ms-thumb:active{cursor:grabbing;box-shadow:0 1px 2px var(--vertex-ui-black)}";
5
6
 
@@ -25,11 +26,16 @@ const Slider = class {
25
26
  this.disabled = false;
26
27
  }
27
28
  render() {
28
- return (h("vertex-tooltip", { disabled: this.valueLabelDisplay === 'off', content: `${this.value}`, placement: 'top', class: "tooltip" }, h("input", { class: classnames('input', { disabled: this.disabled }, this.size), type: "range", disabled: this.disabled, min: this.min, max: this.max, step: this.step, value: this.value, onChange: this.handleChange, onInput: this.handleInput })));
29
+ return (h("vertex-tooltip", { disabled: this.valueLabelDisplay === 'off', content: `${this.value}`, placement: 'top', class: "tooltip" }, h("input", { class: classnames('input', { disabled: this.disabled }, this.size), type: "range", disabled: this.disabled, min: this.min, max: this.max, step: this.step, value: this.value, onChange: this.handleChange, onInput: this.handleInput, onPointerUp: () => {
30
+ // Blur the slider on pointerup to prevent an issue where pressing
31
+ // any key on the keyboard would result in a focus state.
32
+ blurElement(this.hostEl);
33
+ } })));
29
34
  }
30
35
  updateValueFromEvent(event) {
31
36
  this.value = event.target.valueAsNumber;
32
37
  }
38
+ get hostEl() { return getElement(this); }
33
39
  };
34
40
  Slider.style = sliderCss;
35
41
 
@@ -0,0 +1,24 @@
1
+ import { r as registerInstance, e as createEvent, h, H as Host } from './index-72f28b71.js';
2
+ import { c as classnames } from './index-9c609209.js';
3
+
4
+ const tabCss = ":host{position:relative;width:100%;height:100%}.content{display:none;height:0px}.content.active{display:flex;width:100%;height:100%}";
5
+
6
+ const Tab = class {
7
+ constructor(hostRef) {
8
+ registerInstance(this, hostRef);
9
+ this.tabClick = createEvent(this, "tabClick", 7);
10
+ this.handleClick = () => {
11
+ this.tabClick.emit(this.label);
12
+ };
13
+ this.label = undefined;
14
+ this.active = false;
15
+ }
16
+ render() {
17
+ return (h(Host, null, h("div", { class: classnames('content', {
18
+ active: this.active,
19
+ }) }, h("slot", null))));
20
+ }
21
+ };
22
+ Tab.style = tabCss;
23
+
24
+ export { Tab as T };
@@ -0,0 +1,109 @@
1
+ import { r as registerInstance, e as createEvent, h, H as Host, g as getElement } from './index-72f28b71.js';
2
+ import { c as classnames } from './index-9c609209.js';
3
+ import { r as readDOM, g as getBoundingClientRect } from './dom-9d0f7bf4.js';
4
+
5
+ function isTabElement(element) {
6
+ return element.tagName === 'VERTEX-TAB';
7
+ }
8
+
9
+ const tabsCss = "button{border:none;background-color:transparent;font-family:var(--vertex-ui-font-family);font-size:0.875rem;padding:0}:host{display:flex;position:relative;width:100%;height:100%}.wrapper{display:flex;flex-direction:column;position:relative;height:100%;width:100%}.labels{display:flex;position:relative;border-bottom:solid 1px var(--vertex-ui-neutral-300)}.indicator{position:absolute;bottom:0;height:3px;background-color:var(--vertex-ui-blue-700);transition:left 0.2s ease-in-out}.label{position:relative;cursor:pointer;color:var(--vertex-ui-neutral-700);white-space:nowrap;font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-md);padding:0.75rem 1.25rem}.label:not(.active):hover{color:var(--vertex-ui-neutral-800)}.label.active{color:var(--vertex-ui-blue-700);font-weight:var(--vertex-ui-font-weight-bold)}.hidden-label-text{font-weight:bold;visibility:hidden;height:0px}.tab-content{display:flex;height:5%;flex-grow:1}";
10
+
11
+ const Tabs = class {
12
+ constructor(hostRef) {
13
+ registerInstance(this, hostRef);
14
+ this.selectedTabChanged = createEvent(this, "selectedTabChanged", 7);
15
+ this.indicatorInitialized = false;
16
+ this.handleLabelClick = (label) => {
17
+ if (this.active != null) {
18
+ this.updateActiveOnTab(this.active, false);
19
+ }
20
+ this.active = label;
21
+ this.updateActiveOnTab(this.active, true);
22
+ this.selectedTabChanged.emit(label);
23
+ };
24
+ this.updateActiveOnTab = (label, active) => {
25
+ const activeTab = this.findTabByLabel(label);
26
+ if (activeTab != null) {
27
+ activeTab.active = active;
28
+ }
29
+ };
30
+ this.findTabByLabel = (label) => {
31
+ var _a;
32
+ const slotEl = ((_a = this.hostEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])')) || undefined;
33
+ const slotAssignedElements = slotEl === null || slotEl === void 0 ? void 0 : slotEl.assignedElements();
34
+ const slotChildren = slotAssignedElements != null && slotAssignedElements.length > 0
35
+ ? Array.from(slotAssignedElements[0].children)
36
+ : undefined;
37
+ return slotChildren != null
38
+ ? slotChildren.filter(isTabElement).find((el) => el.label === label)
39
+ : undefined;
40
+ };
41
+ this.updateTabLabels = () => {
42
+ var _a;
43
+ const slotEl = ((_a = this.hostEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])')) || undefined;
44
+ const slotAssignedElements = slotEl === null || slotEl === void 0 ? void 0 : slotEl.assignedElements();
45
+ const slotChildren = slotAssignedElements != null && slotAssignedElements.length > 0
46
+ ? Array.from(slotAssignedElements[0].children)
47
+ : undefined;
48
+ this.labels =
49
+ slotChildren != null
50
+ ? slotChildren.filter(isTabElement).map((t) => t.label)
51
+ : [];
52
+ };
53
+ this.active = undefined;
54
+ this.labels = [];
55
+ this.activeBounds = undefined;
56
+ this.activeButtonEl = undefined;
57
+ }
58
+ componentWillLoad() {
59
+ this.updateTabLabels();
60
+ }
61
+ componentDidLoad() {
62
+ if (this.active != null) {
63
+ this.updateActiveOnTab(this.active, true);
64
+ }
65
+ this.indicatorInitialized = false;
66
+ this.handleActiveButtonChange();
67
+ }
68
+ componentDidUpdate() {
69
+ // Place the indicator if it hasn't been initialized yet
70
+ if (!this.indicatorInitialized) {
71
+ this.handleActiveButtonChange();
72
+ }
73
+ }
74
+ handleActiveButtonChange() {
75
+ const button = this.activeButtonEl;
76
+ if (button != null) {
77
+ readDOM(() => {
78
+ const hostElBounds = getBoundingClientRect(this.hostEl);
79
+ const activeBounds = getBoundingClientRect(button);
80
+ this.activeBounds = {
81
+ x: activeBounds.x - hostElBounds.x,
82
+ width: activeBounds.width,
83
+ };
84
+ if (this.activeBounds.width !== 0) {
85
+ this.indicatorInitialized = true;
86
+ }
87
+ });
88
+ }
89
+ }
90
+ render() {
91
+ return (h(Host, null, h("div", { class: "wrapper" }, h("div", { class: "labels" }, this.labels.map((label) => (h("button", { class: classnames('label', {
92
+ active: this.active === label,
93
+ }), "data-label": label, ref: (el) => {
94
+ if (this.active === label) {
95
+ this.activeButtonEl = el;
96
+ }
97
+ }, onClick: () => this.handleLabelClick(label) }, label, h("div", { class: "hidden-label-text" }, label)))), h("slot", { name: "label-header" }), this.activeBounds && (h("div", { class: "indicator", style: {
98
+ left: `${this.activeBounds.x}px`,
99
+ width: `${this.activeBounds.width}px`,
100
+ } }))), h("div", { class: "tab-content" }, h("slot", { onSlotchange: this.updateTabLabels })))));
101
+ }
102
+ get hostEl() { return getElement(this); }
103
+ static get watchers() { return {
104
+ "activeButtonEl": ["handleActiveButtonChange"]
105
+ }; }
106
+ };
107
+ Tabs.style = tabsCss;
108
+
109
+ export { Tabs as T };
@@ -1,6 +1,7 @@
1
1
  import { r as registerInstance, h, H as Host, g as getElement } from './index-72f28b71.js';
2
2
  import { _ as __extends, a as __read } from './tslib.es6-99cd0de8.js';
3
3
  import { c as classnames } from './index-9c609209.js';
4
+ import { g as getBoundingClientRect } from './dom-9d0f7bf4.js';
4
5
  import { a as getSlottedContent } from './slots-fbb5afb3.js';
5
6
 
6
7
  /**
@@ -2050,10 +2051,6 @@ var uuid = /*#__PURE__*/Object.freeze({
2050
2051
  toMsbLsb: toMsbLsb
2051
2052
  });
2052
2053
 
2053
- function getBoundingClientRect(el) {
2054
- return el.getBoundingClientRect();
2055
- }
2056
-
2057
2054
  const tooltipCss = ":host{--tooltip-width:auto;--tooltip-white-space:normal;display:flex}.popover{width:100%;height:100%}.target{display:flex;width:100%;height:100%}.content-hidden{display:none}.tooltip{display:flex;justify-content:center;text-align:center;width:var(--tooltip-width);font-family:var(--vertex-ui-font-family);font-size:var(--vertex-ui-text-xxs);background-color:var(--vertex-ui-neutral-700);color:var(--vertex-ui-white);padding:0.25rem 0.5rem;border-radius:4px;pointer-events:none;white-space:var(--tooltip-white-space);user-select:none}.tooltip.hidden{display:none}";
2058
2055
 
2059
2056
  const TOOLTIP_OPEN_DELAY = 500;
@@ -1,3 +1,3 @@
1
- export { C as vertex_color_circle_picker } from './color-circle-picker-998a7e9c.js';
1
+ export { C as vertex_color_circle_picker } from './color-circle-picker-35ad3b3e.js';
2
2
  import './index-72f28b71.js';
3
3
  import './index-9c609209.js';
@@ -1,3 +1,4 @@
1
- export { C as vertex_color_picker } from './color-picker-2e3b51fa.js';
1
+ export { C as vertex_color_picker } from './color-picker-1d67effe.js';
2
2
  import './index-72f28b71.js';
3
3
  import './index-9c609209.js';
4
+ import './lib-73fbca8b.js';
@@ -0,0 +1,4 @@
1
+ export { C as vertex_color_swatch } from './color-swatch-0e62d13d.js';
2
+ import './index-72f28b71.js';
3
+ import './index-9c609209.js';
4
+ import './lib-73fbca8b.js';
@@ -1,3 +1,3 @@
1
- export { D as vertex_dialog } from './dialog-e3f49527.js';
1
+ export { D as vertex_dialog } from './dialog-1cef715c.js';
2
2
  import './index-72f28b71.js';
3
3
  import './index-9c609209.js';
@@ -1,4 +1,4 @@
1
- export { I as vertex_icon_button } from './icon-button-aad3c0e7.js';
1
+ export { I as vertex_icon_button } from './icon-button-a4bdeabc.js';
2
2
  import './index-72f28b71.js';
3
3
  import './index-9c609209.js';
4
- import './icon-helper-83f10f73.js';
4
+ import './icon-helper-94d45002.js';
@@ -1,4 +1,4 @@
1
- export { I as vertex_icon } from './icon-d37150b4.js';
1
+ export { I as vertex_icon } from './icon-bf8df898.js';
2
2
  import './index-72f28b71.js';
3
3
  import './index-9c609209.js';
4
- import './icon-helper-83f10f73.js';
4
+ import './icon-helper-94d45002.js';
@@ -1,4 +1,4 @@
1
- export { S as vertex_search_bar } from './search-bar-f12a3599.js';
1
+ export { S as vertex_search_bar } from './search-bar-8d18626e.js';
2
2
  import './index-72f28b71.js';
3
3
  import './index-9c609209.js';
4
4
  import './templates-797420bf.js';
@@ -1,3 +1,3 @@
1
- export { S as vertex_select } from './select-d4e135b7.js';
1
+ export { S as vertex_select } from './select-78aeff96.js';
2
2
  import './index-72f28b71.js';
3
3
  import './index-9c609209.js';