cx 26.1.1 → 26.1.2

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 (563) hide show
  1. package/.mocharc.json +5 -5
  2. package/LICENSE-THIRD-PARTY.md +91 -91
  3. package/LICENSE.md +7 -7
  4. package/README.md +46 -46
  5. package/build/data/ArrayElementView.d.ts +4 -3
  6. package/build/ui/adapter/ArrayAdapter.js +0 -2
  7. package/build/ui/adapter/DataAdapter.d.ts +3 -3
  8. package/build.js +133 -133
  9. package/dist/manifest.js +826 -826
  10. package/dist/ui.js +0 -2
  11. package/package.json +100 -99
  12. package/src/charts/Bar.scss +28 -28
  13. package/src/charts/Bar.ts +114 -114
  14. package/src/charts/BarGraph.scss +28 -28
  15. package/src/charts/BarGraph.tsx +145 -145
  16. package/src/charts/BubbleGraph.scss +31 -31
  17. package/src/charts/BubbleGraph.tsx +165 -165
  18. package/src/charts/Chart.ts +108 -108
  19. package/src/charts/ColorMap.ts +150 -150
  20. package/src/charts/Column.scss +28 -28
  21. package/src/charts/Column.ts +124 -124
  22. package/src/charts/ColumnBarBase.tsx +284 -284
  23. package/src/charts/ColumnBarGraphBase.tsx +229 -229
  24. package/src/charts/ColumnGraph.scss +29 -29
  25. package/src/charts/ColumnGraph.tsx +153 -153
  26. package/src/charts/Grid.ts +5 -5
  27. package/src/charts/Gridlines.scss +24 -24
  28. package/src/charts/Gridlines.tsx +88 -88
  29. package/src/charts/Legend.scss +50 -50
  30. package/src/charts/Legend.tsx +270 -270
  31. package/src/charts/LegendEntry.scss +29 -29
  32. package/src/charts/LegendEntry.tsx +197 -197
  33. package/src/charts/LineGraph.scss +24 -24
  34. package/src/charts/LineGraph.tsx +455 -455
  35. package/src/charts/Marker.scss +43 -43
  36. package/src/charts/Marker.tsx +483 -483
  37. package/src/charts/MarkerLine.scss +19 -19
  38. package/src/charts/MarkerLine.tsx +214 -214
  39. package/src/charts/MouseTracker.tsx +112 -112
  40. package/src/charts/Pie.ts +8 -8
  41. package/src/charts/PieChart.scss +28 -28
  42. package/src/charts/PieChart.tsx +717 -717
  43. package/src/charts/PieLabel.tsx +106 -106
  44. package/src/charts/PieLabelsContainer.ts +68 -68
  45. package/src/charts/Range.scss +19 -19
  46. package/src/charts/Range.tsx +318 -318
  47. package/src/charts/RangeMarker.scss +17 -17
  48. package/src/charts/RangeMarker.tsx +233 -233
  49. package/src/charts/ScatterGraph.scss +23 -23
  50. package/src/charts/ScatterGraph.tsx +245 -245
  51. package/src/charts/Swimlane.scss +16 -16
  52. package/src/charts/Swimlane.tsx +195 -195
  53. package/src/charts/Swimlanes.scss +16 -16
  54. package/src/charts/Swimlanes.tsx +179 -179
  55. package/src/charts/axis/Axis.scss +22 -22
  56. package/src/charts/axis/Axis.tsx +444 -444
  57. package/src/charts/axis/CategoryAxis.scss +34 -34
  58. package/src/charts/axis/CategoryAxis.tsx +313 -313
  59. package/src/charts/axis/NumericAxis.scss +34 -34
  60. package/src/charts/axis/NumericAxis.tsx +437 -437
  61. package/src/charts/axis/Stack.ts +61 -61
  62. package/src/charts/axis/TimeAxis.scss +33 -33
  63. package/src/charts/axis/TimeAxis.tsx +718 -718
  64. package/src/charts/axis/index.scss +5 -5
  65. package/src/charts/axis/index.ts +3 -3
  66. package/src/charts/axis/variables.scss +2 -2
  67. package/src/charts/helpers/MinMaxFinder.ts +66 -66
  68. package/src/charts/helpers/PointReducer.ts +135 -135
  69. package/src/charts/helpers/SnapPointFinder.ts +136 -136
  70. package/src/charts/helpers/ValueAtFinder.ts +72 -72
  71. package/src/charts/helpers/index.ts +4 -4
  72. package/src/charts/index.scss +22 -22
  73. package/src/charts/index.ts +34 -34
  74. package/src/charts/palette.scss +97 -97
  75. package/src/charts/shapes.tsx +86 -86
  76. package/src/charts/variables.scss +22 -22
  77. package/src/core.d.ts +182 -182
  78. package/src/data/AggregateFunction.ts +171 -171
  79. package/src/data/ArrayElementView.spec.ts +88 -88
  80. package/src/data/ArrayElementView.ts +91 -90
  81. package/src/data/ArrayRef.ts +34 -34
  82. package/src/data/AugmentedViewBase.ts +88 -88
  83. package/src/data/Binding.spec.ts +69 -69
  84. package/src/data/Binding.ts +104 -104
  85. package/src/data/ExposedRecordView.ts +95 -95
  86. package/src/data/ExposedValueView.ts +89 -89
  87. package/src/data/Expression.spec.ts +229 -229
  88. package/src/data/Expression.ts +233 -233
  89. package/src/data/Grouper.spec.ts +57 -57
  90. package/src/data/Grouper.ts +158 -158
  91. package/src/data/NestedDataView.ts +43 -43
  92. package/src/data/ReadOnlyDataView.ts +39 -39
  93. package/src/data/Ref.spec.ts +79 -79
  94. package/src/data/Ref.ts +104 -104
  95. package/src/data/Selector.ts +10 -10
  96. package/src/data/Store.spec.ts +22 -22
  97. package/src/data/Store.ts +52 -52
  98. package/src/data/StoreProxy.ts +19 -19
  99. package/src/data/StoreRef.spec.ts +24 -24
  100. package/src/data/StoreRef.ts +66 -66
  101. package/src/data/StringTemplate.spec.ts +132 -132
  102. package/src/data/StringTemplate.ts +93 -93
  103. package/src/data/StructuredSelector.spec.ts +113 -113
  104. package/src/data/StructuredSelector.ts +146 -146
  105. package/src/data/SubscribableView.ts +63 -63
  106. package/src/data/View.spec.ts +60 -60
  107. package/src/data/View.ts +289 -289
  108. package/src/data/ZoomIntoPropertyView.spec.ts +64 -64
  109. package/src/data/ZoomIntoPropertyView.ts +45 -45
  110. package/src/data/comparer.spec.ts +60 -60
  111. package/src/data/comparer.ts +78 -78
  112. package/src/data/computable.spec.ts +87 -87
  113. package/src/data/computable.ts +69 -69
  114. package/src/data/createAccessorModelProxy.spec.tsx +145 -145
  115. package/src/data/createAccessorModelProxy.ts +66 -66
  116. package/src/data/createStructuredSelector.spec.ts +45 -45
  117. package/src/data/createStructuredSelector.ts +62 -62
  118. package/src/data/defaultCompare.ts +14 -14
  119. package/src/data/diff/diffArrays.ts +49 -49
  120. package/src/data/diff/diffs.spec.ts +49 -49
  121. package/src/data/diff/index.ts +1 -1
  122. package/src/data/enableFatArrowExpansion.ts +6 -6
  123. package/src/data/getAccessor.spec.ts +11 -11
  124. package/src/data/getAccessor.ts +74 -74
  125. package/src/data/getSelector.spec.ts +43 -43
  126. package/src/data/getSelector.ts +66 -66
  127. package/src/data/index.ts +30 -30
  128. package/src/data/isSelector.ts +26 -26
  129. package/src/data/ops/append.spec.ts +28 -28
  130. package/src/data/ops/append.ts +5 -5
  131. package/src/data/ops/filter.spec.ts +35 -35
  132. package/src/data/ops/filter.ts +9 -9
  133. package/src/data/ops/findTreeNode.spec.ts +23 -23
  134. package/src/data/ops/findTreeNode.ts +14 -14
  135. package/src/data/ops/findTreePath.ts +23 -23
  136. package/src/data/ops/index.ts +11 -11
  137. package/src/data/ops/insertElement.ts +3 -3
  138. package/src/data/ops/merge.spec.ts +27 -27
  139. package/src/data/ops/merge.ts +13 -13
  140. package/src/data/ops/moveElement.ts +21 -21
  141. package/src/data/ops/removeTreeNodes.spec.ts +37 -37
  142. package/src/data/ops/removeTreeNodes.ts +15 -15
  143. package/src/data/ops/updateArray.spec.ts +69 -69
  144. package/src/data/ops/updateArray.ts +31 -31
  145. package/src/data/ops/updateTree.spec.ts +54 -54
  146. package/src/data/ops/updateTree.ts +23 -23
  147. package/src/data/test-types.ts +7 -7
  148. package/src/global.scss +13 -13
  149. package/src/hooks/createLocalStorageRef.ts +21 -21
  150. package/src/hooks/index.ts +8 -8
  151. package/src/hooks/invokeCallback.spec.tsx +59 -59
  152. package/src/hooks/invokeCallback.ts +8 -8
  153. package/src/hooks/resolveCallback.spec.tsx +71 -71
  154. package/src/hooks/resolveCallback.ts +16 -16
  155. package/src/hooks/store.spec.tsx +67 -67
  156. package/src/hooks/store.ts +46 -46
  157. package/src/hooks/useEffect.ts +14 -14
  158. package/src/hooks/useInterval.ts +8 -8
  159. package/src/hooks/useState.ts +20 -20
  160. package/src/hooks/useTrigger.spec.tsx +105 -105
  161. package/src/hooks/useTrigger.ts +26 -26
  162. package/src/index.ts +7 -7
  163. package/src/jsx-dev-runtime.ts +4 -4
  164. package/src/jsx-runtime.spec.tsx +431 -431
  165. package/src/jsx-runtime.ts +79 -79
  166. package/src/locale/de-de.ts +76 -76
  167. package/src/locale/en-us.ts +75 -75
  168. package/src/locale/es-es.ts +76 -76
  169. package/src/locale/fr-fr.ts +76 -76
  170. package/src/locale/nl-nl.ts +76 -76
  171. package/src/locale/pt-pt.ts +76 -76
  172. package/src/locale/sr-latn-ba.ts +76 -76
  173. package/src/svg/BoundedObject.ts +101 -101
  174. package/src/svg/ClipRect.tsx +29 -29
  175. package/src/svg/Ellipse.tsx +68 -68
  176. package/src/svg/Line.tsx +58 -58
  177. package/src/svg/NonOverlappingRect.ts +26 -26
  178. package/src/svg/NonOverlappingRectGroup.ts +49 -49
  179. package/src/svg/Rectangle.tsx +90 -90
  180. package/src/svg/Svg.scss +27 -27
  181. package/src/svg/Svg.tsx +241 -241
  182. package/src/svg/Text.tsx +134 -134
  183. package/src/svg/TextualBoundedObject.ts +35 -35
  184. package/src/svg/index.scss +8 -8
  185. package/src/svg/index.ts +17 -17
  186. package/src/svg/util/Rect.ts +105 -105
  187. package/src/ui/CSS.ts +87 -87
  188. package/src/ui/CSSHelper.ts +17 -17
  189. package/src/ui/Container.tsx +216 -216
  190. package/src/ui/ContentResolver.spec.tsx +585 -585
  191. package/src/ui/ContentResolver.ts +132 -132
  192. package/src/ui/Controller.spec.tsx +574 -574
  193. package/src/ui/Controller.ts +202 -202
  194. package/src/ui/Culture.ts +159 -159
  195. package/src/ui/Cx.spec.tsx +210 -210
  196. package/src/ui/Cx.tsx +386 -386
  197. package/src/ui/DataProxy.spec.tsx +337 -337
  198. package/src/ui/DataProxy.ts +55 -55
  199. package/src/ui/DetachedScope.tsx +159 -159
  200. package/src/ui/FocusManager.ts +171 -171
  201. package/src/ui/Format.ts +108 -108
  202. package/src/ui/HoverSync.tsx +189 -189
  203. package/src/ui/Instance.ts +866 -866
  204. package/src/ui/IsolatedScope.spec.tsx +62 -62
  205. package/src/ui/IsolatedScope.ts +50 -50
  206. package/src/ui/Localization.ts +70 -70
  207. package/src/ui/Prop.ts +140 -140
  208. package/src/ui/PureContainer.spec.tsx +232 -232
  209. package/src/ui/PureContainer.tsx +19 -19
  210. package/src/ui/RenderingContext.ts +99 -99
  211. package/src/ui/Repeater.spec.tsx +143 -143
  212. package/src/ui/Repeater.ts +194 -194
  213. package/src/ui/Rescope.spec.tsx +199 -199
  214. package/src/ui/Rescope.ts +49 -49
  215. package/src/ui/ResizeManager.ts +30 -30
  216. package/src/ui/Restate.spec.tsx +422 -422
  217. package/src/ui/Restate.tsx +217 -217
  218. package/src/ui/StaticText.ts +11 -11
  219. package/src/ui/StructuredInstanceDataAccessor.ts +32 -32
  220. package/src/ui/Text.ts +49 -49
  221. package/src/ui/VDOM.ts +1 -1
  222. package/src/ui/Widget.spec.tsx +53 -53
  223. package/src/ui/Widget.tsx +301 -301
  224. package/src/ui/ZIndexManager.ts +11 -11
  225. package/src/ui/adapter/ArrayAdapter.spec.ts +55 -55
  226. package/src/ui/adapter/ArrayAdapter.ts +229 -229
  227. package/src/ui/adapter/DataAdapter.ts +52 -52
  228. package/src/ui/adapter/GroupAdapter.ts +235 -235
  229. package/src/ui/adapter/TreeAdapter.spec.ts +76 -76
  230. package/src/ui/adapter/TreeAdapter.ts +185 -185
  231. package/src/ui/adapter/index.ts +4 -4
  232. package/src/ui/app/History.ts +133 -133
  233. package/src/ui/app/Url.spec.ts +50 -50
  234. package/src/ui/app/Url.ts +102 -102
  235. package/src/ui/app/index.ts +5 -5
  236. package/src/ui/app/startAppLoop.tsx +71 -71
  237. package/src/ui/app/startHotAppLoop.ts +41 -41
  238. package/src/ui/batchUpdates.ts +77 -77
  239. package/src/ui/bind.ts +10 -10
  240. package/src/ui/createFunctionalComponent.spec.tsx +454 -454
  241. package/src/ui/createFunctionalComponent.ts +86 -86
  242. package/src/ui/expr.ts +47 -47
  243. package/src/ui/exprHelpers.spec.ts +379 -379
  244. package/src/ui/exprHelpers.ts +78 -78
  245. package/src/ui/flattenProps.ts +21 -21
  246. package/src/ui/index.scss +2 -2
  247. package/src/ui/index.ts +47 -47
  248. package/src/ui/keyboardShortcuts.ts +40 -40
  249. package/src/ui/layout/Content.ts +30 -30
  250. package/src/ui/layout/ContentPlaceholder.spec.tsx +599 -599
  251. package/src/ui/layout/ContentPlaceholder.ts +133 -133
  252. package/src/ui/layout/FirstVisibleChildLayout.spec.tsx +207 -207
  253. package/src/ui/layout/FirstVisibleChildLayout.ts +60 -60
  254. package/src/ui/layout/LabelsLeftLayout.scss +46 -46
  255. package/src/ui/layout/LabelsLeftLayout.tsx +76 -76
  256. package/src/ui/layout/LabelsTopLayout.scss +64 -64
  257. package/src/ui/layout/LabelsTopLayout.tsx +156 -156
  258. package/src/ui/layout/UseParentLayout.ts +8 -8
  259. package/src/ui/layout/exploreChildren.ts +38 -38
  260. package/src/ui/layout/index.scss +3 -3
  261. package/src/ui/layout/index.ts +10 -10
  262. package/src/ui/layout/variables.scss +2 -2
  263. package/src/ui/selection/KeySelection.ts +153 -153
  264. package/src/ui/selection/PropertySelection.ts +87 -87
  265. package/src/ui/selection/Selection.ts +128 -128
  266. package/src/ui/selection/index.ts +3 -3
  267. package/src/ui/tpl.ts +4 -4
  268. package/src/ui/variables.scss +1 -1
  269. package/src/util/Component.spec.ts +411 -411
  270. package/src/util/Console.ts +13 -13
  271. package/src/util/DOM.ts +88 -88
  272. package/src/util/Debug.ts +71 -71
  273. package/src/util/Format.spec.ts +69 -69
  274. package/src/util/Format.ts +267 -267
  275. package/src/util/GlobalCacheIdentifier.ts +11 -11
  276. package/src/util/KeyCode.ts +21 -21
  277. package/src/util/SubscriberList.ts +86 -86
  278. package/src/util/Timing.ts +58 -58
  279. package/src/util/TraversalStack.spec.ts +53 -53
  280. package/src/util/TraversalStack.ts +47 -47
  281. package/src/util/addEventListenerWithOptions.ts +41 -41
  282. package/src/util/browserSupportsPassiveEventHandlers.ts +20 -20
  283. package/src/util/calculateNaturalElementHeight.ts +22 -22
  284. package/src/util/call-once.scss +6 -6
  285. package/src/util/capitalize.ts +4 -4
  286. package/src/util/coalesce.ts +6 -6
  287. package/src/util/color/hslToRgb.ts +34 -34
  288. package/src/util/color/index.ts +4 -4
  289. package/src/util/color/parseColor.ts +173 -173
  290. package/src/util/color/rgbToHex.ts +14 -14
  291. package/src/util/color/rgbToHsl.ts +35 -35
  292. package/src/util/date/dateDiff.ts +9 -9
  293. package/src/util/date/diff.ts +13 -13
  294. package/src/util/date/encodeDate.ts +8 -8
  295. package/src/util/date/encodeDateWithTimezoneOffset.ts +18 -18
  296. package/src/util/date/index.ts +11 -11
  297. package/src/util/date/lowerBoundCheck.ts +13 -13
  298. package/src/util/date/maxDate.ts +14 -14
  299. package/src/util/date/minDate.ts +14 -14
  300. package/src/util/date/monthStart.ts +8 -8
  301. package/src/util/date/parseDateInvariant.ts +20 -20
  302. package/src/util/date/sameDate.ts +11 -11
  303. package/src/util/date/upperBoundCheck.spec.ts +30 -30
  304. package/src/util/date/upperBoundCheck.ts +13 -13
  305. package/src/util/date/zeroTime.ts +9 -9
  306. package/src/util/debounce.ts +26 -26
  307. package/src/util/dummyCallback.ts +1 -1
  308. package/src/util/escapeSpecialRegexCharacters.ts +8 -8
  309. package/src/util/eventCallbacks.ts +12 -12
  310. package/src/util/expandFatArrows.ts +118 -118
  311. package/src/util/findScrollableParent.ts +15 -15
  312. package/src/util/getActiveElement.ts +4 -4
  313. package/src/util/getParentFrameBoundingClientRect.ts +13 -13
  314. package/src/util/getScrollerBoundingClientRect.ts +12 -12
  315. package/src/util/getSearchQueryPredicate.spec.ts +40 -40
  316. package/src/util/getSearchQueryPredicate.ts +58 -58
  317. package/src/util/getTopLevelBoundingClientRect.ts +7 -7
  318. package/src/util/getVendorPrefix.ts +33 -33
  319. package/src/util/hasKey.ts +18 -18
  320. package/src/util/index.scss +10 -10
  321. package/src/util/index.ts +55 -55
  322. package/src/util/innerTextTrim.ts +10 -10
  323. package/src/util/isArray.ts +3 -3
  324. package/src/util/isDataRecord.ts +5 -5
  325. package/src/util/isDefined.ts +3 -3
  326. package/src/util/isDigit.ts +8 -8
  327. package/src/util/isFunction.ts +3 -3
  328. package/src/util/isNonEmptyArray.ts +3 -3
  329. package/src/util/isNumber.ts +3 -3
  330. package/src/util/isObject.ts +3 -3
  331. package/src/util/isPromise.ts +6 -6
  332. package/src/util/isString.ts +3 -3
  333. package/src/util/isTextInputElement.ts +2 -2
  334. package/src/util/isTouchDevice.ts +7 -7
  335. package/src/util/isTouchEvent.ts +64 -64
  336. package/src/util/isUndefined.ts +3 -3
  337. package/src/util/isValidIdentifierName.spec.ts +33 -33
  338. package/src/util/isValidIdentifierName.ts +5 -5
  339. package/src/util/onIdleCallback.ts +10 -10
  340. package/src/util/parseStyle.ts +29 -29
  341. package/src/util/quote.ts +6 -6
  342. package/src/util/reverseSlice.ts +9 -9
  343. package/src/util/routeAppend.spec.ts +19 -19
  344. package/src/util/routeAppend.ts +15 -15
  345. package/src/util/scrollElementIntoView.ts +40 -40
  346. package/src/util/scss/add-rules.scss +40 -40
  347. package/src/util/scss/calc.scss +44 -44
  348. package/src/util/scss/call-once.scss +12 -12
  349. package/src/util/scss/clockwise.scss +49 -49
  350. package/src/util/scss/colors.scss +9 -9
  351. package/src/util/scss/deep-get.scss +11 -11
  352. package/src/util/scss/deep-merge.scss +21 -21
  353. package/src/util/scss/divide.scss +3 -3
  354. package/src/util/scss/include.scss +48 -48
  355. package/src/util/scss/index.scss +9 -9
  356. package/src/util/shallowEquals.ts +43 -43
  357. package/src/util/test/createTestRenderer.tsx +19 -19
  358. package/src/util/throttle.ts +21 -21
  359. package/src/util/validatedDebounce.ts +23 -23
  360. package/src/variables.scss +217 -217
  361. package/src/widgets/AccessorBindings.spec.tsx +90 -90
  362. package/src/widgets/Button.scss +119 -119
  363. package/src/widgets/Button.tsx +189 -189
  364. package/src/widgets/Button.variables.scss +117 -117
  365. package/src/widgets/CxCredit.scss +39 -39
  366. package/src/widgets/CxCredit.tsx +46 -46
  367. package/src/widgets/DocumentTitle.ts +95 -95
  368. package/src/widgets/FlexBox.scss +148 -148
  369. package/src/widgets/FlexBox.tsx +168 -168
  370. package/src/widgets/Heading.scss +40 -40
  371. package/src/widgets/Heading.ts +42 -42
  372. package/src/widgets/HighlightedSearchText.scss +20 -20
  373. package/src/widgets/HighlightedSearchText.tsx +54 -54
  374. package/src/widgets/HtmlElement.spec.helpers.tsx +108 -108
  375. package/src/widgets/HtmlElement.spec.tsx +89 -89
  376. package/src/widgets/HtmlElement.tsx +407 -407
  377. package/src/widgets/Icon.scss +22 -22
  378. package/src/widgets/Icon.ts +64 -64
  379. package/src/widgets/List.scss +93 -93
  380. package/src/widgets/List.tsx +793 -793
  381. package/src/widgets/ProgressBar.scss +50 -50
  382. package/src/widgets/ProgressBar.tsx +66 -66
  383. package/src/widgets/ReactElementWrapper.spec.tsx +452 -452
  384. package/src/widgets/ReactElementWrapper.tsx +108 -108
  385. package/src/widgets/Resizer.scss +43 -43
  386. package/src/widgets/Resizer.tsx +200 -200
  387. package/src/widgets/Sandbox.ts +103 -103
  388. package/src/widgets/Section.scss +55 -55
  389. package/src/widgets/Section.tsx +187 -187
  390. package/src/widgets/animations.scss +10 -10
  391. package/src/widgets/autoFocus.ts +9 -9
  392. package/src/widgets/cx.ts +63 -63
  393. package/src/widgets/drag-drop/DragClone.scss +35 -35
  394. package/src/widgets/drag-drop/DragHandle.scss +18 -18
  395. package/src/widgets/drag-drop/DragHandle.tsx +47 -47
  396. package/src/widgets/drag-drop/DragSource.scss +26 -26
  397. package/src/widgets/drag-drop/DragSource.tsx +237 -237
  398. package/src/widgets/drag-drop/DropZone.scss +76 -76
  399. package/src/widgets/drag-drop/DropZone.tsx +353 -353
  400. package/src/widgets/drag-drop/index.scss +3 -3
  401. package/src/widgets/drag-drop/index.ts +4 -4
  402. package/src/widgets/drag-drop/ops.tsx +422 -422
  403. package/src/widgets/drag-drop/variables.scss +14 -14
  404. package/src/widgets/enableAllInternalDependencies.ts +11 -11
  405. package/src/widgets/form/Calendar.scss +199 -199
  406. package/src/widgets/form/Calendar.tsx +760 -760
  407. package/src/widgets/form/Calendar.variables.scss +63 -63
  408. package/src/widgets/form/Checkbox.scss +129 -129
  409. package/src/widgets/form/Checkbox.tsx +287 -287
  410. package/src/widgets/form/Checkbox.variables.scss +39 -39
  411. package/src/widgets/form/ColorField.scss +98 -98
  412. package/src/widgets/form/ColorField.tsx +497 -497
  413. package/src/widgets/form/ColorPicker.scss +285 -285
  414. package/src/widgets/form/ColorPicker.tsx +544 -544
  415. package/src/widgets/form/ColorPicker.variables.scss +22 -22
  416. package/src/widgets/form/DateField.ts +21 -21
  417. package/src/widgets/form/DateTimeField.scss +92 -92
  418. package/src/widgets/form/DateTimeField.tsx +726 -726
  419. package/src/widgets/form/DateTimePicker.scss +46 -46
  420. package/src/widgets/form/DateTimePicker.tsx +429 -429
  421. package/src/widgets/form/Field.scss +164 -164
  422. package/src/widgets/form/Field.tsx +608 -608
  423. package/src/widgets/form/FieldGroup.ts +10 -10
  424. package/src/widgets/form/FieldIcon.ts +61 -61
  425. package/src/widgets/form/HelpText.scss +24 -24
  426. package/src/widgets/form/HelpText.ts +15 -15
  427. package/src/widgets/form/Label.scss +37 -37
  428. package/src/widgets/form/Label.tsx +117 -117
  429. package/src/widgets/form/LabeledContainer.ts +77 -77
  430. package/src/widgets/form/LookupField.scss +221 -221
  431. package/src/widgets/form/LookupField.spec.tsx +93 -93
  432. package/src/widgets/form/LookupField.tsx +1421 -1421
  433. package/src/widgets/form/MonthField.scss +100 -100
  434. package/src/widgets/form/MonthField.tsx +670 -670
  435. package/src/widgets/form/MonthPicker.scss +125 -125
  436. package/src/widgets/form/MonthPicker.tsx +822 -822
  437. package/src/widgets/form/NumberField.scss +63 -63
  438. package/src/widgets/form/NumberField.tsx +543 -543
  439. package/src/widgets/form/Radio.scss +123 -123
  440. package/src/widgets/form/Radio.tsx +249 -249
  441. package/src/widgets/form/Radio.variables.scss +45 -45
  442. package/src/widgets/form/Select.scss +101 -101
  443. package/src/widgets/form/Select.tsx +327 -327
  444. package/src/widgets/form/Slider.scss +121 -121
  445. package/src/widgets/form/Slider.tsx +473 -473
  446. package/src/widgets/form/Switch.scss +142 -142
  447. package/src/widgets/form/Switch.tsx +176 -176
  448. package/src/widgets/form/TextArea.scss +45 -45
  449. package/src/widgets/form/TextArea.tsx +229 -229
  450. package/src/widgets/form/TextField.scss +57 -57
  451. package/src/widgets/form/TextField.tsx +407 -407
  452. package/src/widgets/form/TimeField.ts +10 -10
  453. package/src/widgets/form/TimeList.tsx +105 -105
  454. package/src/widgets/form/UploadButton.scss +49 -49
  455. package/src/widgets/form/UploadButton.tsx +307 -307
  456. package/src/widgets/form/ValidationError.scss +22 -22
  457. package/src/widgets/form/ValidationError.tsx +72 -72
  458. package/src/widgets/form/ValidationGroup.spec.tsx +147 -147
  459. package/src/widgets/form/ValidationGroup.ts +141 -141
  460. package/src/widgets/form/Validator.ts +60 -60
  461. package/src/widgets/form/Wheel.scss +152 -152
  462. package/src/widgets/form/Wheel.tsx +314 -314
  463. package/src/widgets/form/index.scss +24 -24
  464. package/src/widgets/form/index.ts +28 -28
  465. package/src/widgets/form/variables.scss +355 -355
  466. package/src/widgets/grid/Grid.scss +640 -640
  467. package/src/widgets/grid/Grid.tsx +4243 -4243
  468. package/src/widgets/grid/GridCell.ts +143 -143
  469. package/src/widgets/grid/GridCellEditor.tsx +58 -58
  470. package/src/widgets/grid/GridRow.ts +302 -302
  471. package/src/widgets/grid/GridRowLine.ts +49 -49
  472. package/src/widgets/grid/Pagination.scss +115 -115
  473. package/src/widgets/grid/Pagination.tsx +126 -126
  474. package/src/widgets/grid/TreeNode.scss +90 -90
  475. package/src/widgets/grid/TreeNode.tsx +154 -154
  476. package/src/widgets/grid/createGridCellEditor.tsx +18 -18
  477. package/src/widgets/grid/index.scss +3 -3
  478. package/src/widgets/grid/index.ts +16 -16
  479. package/src/widgets/grid/variables.scss +137 -137
  480. package/src/widgets/icons/arrow-down.svg +3 -3
  481. package/src/widgets/icons/arrow-right.svg +2 -2
  482. package/src/widgets/icons/base.svg +104 -104
  483. package/src/widgets/icons/calendar-old.svg +169 -169
  484. package/src/widgets/icons/calendar.svg +187 -187
  485. package/src/widgets/icons/calendar.tsx +22 -22
  486. package/src/widgets/icons/check.tsx +14 -14
  487. package/src/widgets/icons/clear.svg +74 -74
  488. package/src/widgets/icons/clear.tsx +16 -16
  489. package/src/widgets/icons/close.svg +74 -74
  490. package/src/widgets/icons/close.tsx +20 -20
  491. package/src/widgets/icons/cx.tsx +39 -39
  492. package/src/widgets/icons/drop-down.tsx +16 -16
  493. package/src/widgets/icons/dropdown-arrow.svg +61 -61
  494. package/src/widgets/icons/file.svg +4 -4
  495. package/src/widgets/icons/file.tsx +14 -14
  496. package/src/widgets/icons/folder-open.svg +5 -5
  497. package/src/widgets/icons/folder-open.tsx +16 -16
  498. package/src/widgets/icons/folder.svg +58 -58
  499. package/src/widgets/icons/folder.tsx +14 -14
  500. package/src/widgets/icons/forward.svg +67 -67
  501. package/src/widgets/icons/forward.tsx +23 -23
  502. package/src/widgets/icons/index.ts +14 -14
  503. package/src/widgets/icons/loading.svg +4 -4
  504. package/src/widgets/icons/loading.tsx +25 -25
  505. package/src/widgets/icons/menu.tsx +18 -18
  506. package/src/widgets/icons/pixel-picker.tsx +18 -18
  507. package/src/widgets/icons/registry.ts +56 -56
  508. package/src/widgets/icons/search.svg +107 -107
  509. package/src/widgets/icons/search.tsx +14 -14
  510. package/src/widgets/icons/sort-asc.svg +3 -3
  511. package/src/widgets/icons/sort-asc.tsx +15 -15
  512. package/src/widgets/icons/square.tsx +19 -19
  513. package/src/widgets/index.d.ts +55 -55
  514. package/src/widgets/index.scss +16 -16
  515. package/src/widgets/index.ts +58 -58
  516. package/src/widgets/nav/Link.scss +20 -20
  517. package/src/widgets/nav/Link.ts +11 -11
  518. package/src/widgets/nav/LinkButton.ts +176 -176
  519. package/src/widgets/nav/Menu.scss +76 -76
  520. package/src/widgets/nav/Menu.tsx +489 -489
  521. package/src/widgets/nav/Menu.variables.scss +25 -25
  522. package/src/widgets/nav/MenuItem.scss +130 -130
  523. package/src/widgets/nav/MenuItem.tsx +525 -525
  524. package/src/widgets/nav/MenuSpacer.ts +18 -18
  525. package/src/widgets/nav/RedirectRoute.ts +49 -49
  526. package/src/widgets/nav/Route.spec.tsx +24 -24
  527. package/src/widgets/nav/Route.ts +142 -142
  528. package/src/widgets/nav/Scroller.scss +148 -148
  529. package/src/widgets/nav/Scroller.tsx +252 -252
  530. package/src/widgets/nav/Submenu.ts +6 -6
  531. package/src/widgets/nav/Tab.scss +82 -82
  532. package/src/widgets/nav/Tab.ts +120 -120
  533. package/src/widgets/nav/Tab.variables.scss +84 -84
  534. package/src/widgets/nav/cover.scss +22 -22
  535. package/src/widgets/nav/index.scss +5 -5
  536. package/src/widgets/nav/index.ts +10 -10
  537. package/src/widgets/nav/variables.scss +27 -27
  538. package/src/widgets/overlay/ContextMenu.ts +42 -42
  539. package/src/widgets/overlay/Dropdown.scss +186 -186
  540. package/src/widgets/overlay/Dropdown.tsx +762 -762
  541. package/src/widgets/overlay/FlyweightTooltipTracker.ts +57 -57
  542. package/src/widgets/overlay/MsgBox.tsx +141 -141
  543. package/src/widgets/overlay/Overlay.scss +68 -68
  544. package/src/widgets/overlay/Overlay.tsx +947 -947
  545. package/src/widgets/overlay/Toast.scss +163 -163
  546. package/src/widgets/overlay/Toast.ts +111 -111
  547. package/src/widgets/overlay/Tooltip.scss +177 -177
  548. package/src/widgets/overlay/Tooltip.tsx +393 -393
  549. package/src/widgets/overlay/Window.scss +129 -129
  550. package/src/widgets/overlay/Window.tsx +299 -299
  551. package/src/widgets/overlay/Window.variables.scss +62 -62
  552. package/src/widgets/overlay/alerts.ts +46 -46
  553. package/src/widgets/overlay/captureMouse.scss +13 -13
  554. package/src/widgets/overlay/captureMouse.ts +195 -195
  555. package/src/widgets/overlay/createHotPromiseWindowFactory.ts +71 -71
  556. package/src/widgets/overlay/index.scss +15 -15
  557. package/src/widgets/overlay/index.ts +11 -11
  558. package/src/widgets/overlay/tooltip-ops.ts +173 -173
  559. package/src/widgets/overlay/variables.scss +85 -85
  560. package/src/widgets/variables.scss +146 -146
  561. package/tsconfig.compile.json +4 -4
  562. package/tsconfig.json +34 -34
  563. package/tsconfig.mocha.json +14 -14
package/src/widgets/form/variables.scss CHANGED
@@ -1,355 +1,355 @@
1
- @use "sass:map";
2
-
3
- @if cx-call-once("cx/widgets/checker-background") {
4
- %cx-checker-bg {
5
- background-repeat: repeat;
6
- background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuOWwzfk4AAAAfSURBVChTY9i5Y89/dAwEDOh4SCjEJohN8+BXuOc/AOttNBKJWD4sAAAAAElFTkSuQmCC");
7
- }
8
- }
9
-
10
- $cx-use-box-line-height-fix: true !default;
11
-
12
- // Appearance
13
- $cx-default-input-font-family: $cx-default-box-font-family !default;
14
- $cx-default-input-font-size: $cx-default-box-font-size !default;
15
- $cx-default-input-border-color: $cx-default-border-color !default;
16
- $cx-default-input-border-radius: $cx-default-border-radius !default;
17
- $cx-default-input-background-color: white !default;
18
- $cx-default-input-color: black !default;
19
- $cx-default-input-placeholder-color: $cx-default-empty-text-color !default;
20
- $cx-default-input-width: 180px !default;
21
- $cx-default-input-padding: $cx-default-box-padding !default;
22
-
23
- $cx-input-placeholder: (
24
- color: $cx-default-input-placeholder-color,
25
- opacity: 1,
26
- ) !default;
27
-
28
- $cx-input-state-style-map: (
29
- default: (
30
- line-height: $cx-default-box-line-height,
31
- padding: $cx-default-input-padding,
32
- border-width: $cx-default-box-border-width,
33
- font-size: $cx-default-input-font-size,
34
- font-family: $cx-default-input-font-family,
35
- border-color: $cx-default-input-border-color,
36
- border-style: solid,
37
- border-radius: $cx-default-input-border-radius,
38
- background-color: $cx-default-input-background-color,
39
- color: $cx-default-input-color,
40
- outline-offset: 0,
41
- box-shadow: none,
42
- text-overflow: ellipsis,
43
- -ms-appearance: none,
44
- -moz-appearance: none,
45
- -webkit-appearance: none,
46
- ),
47
- hover: (),
48
- focus: (
49
- border-color: rgba(77, 144, 254, 0.8),
50
- outline: none,
51
- box-shadow: 0 0 2px rgba(77, 144, 254, 0.8),
52
- ),
53
- disabled: (
54
- background: rgb(235, 235, 228),
55
- color: rgb(84, 84, 84),
56
- pointer-events: none,
57
- ),
58
- error: (
59
- border-color: rgba(220, 0, 9, 0.8),
60
- ),
61
- error-focus: (
62
- box-shadow: 0 0 2px rgba(220, 0, 9, 0.8),
63
- ),
64
- ) !default;
65
-
66
- $cx-default-checkbox-size: 14px !default;
67
- $cx-default-radio-size: 14px !default;
68
- $cx-default-input-icon-size: $cx-default-icon-size !default;
69
-
70
- // Tool
71
- $cx-default-input-tool-size: $cx-default-box-line-height !default;
72
- $cx-default-input-left-tool-spacing: cx-left($cx-default-box-padding) !default;
73
- $cx-default-input-right-tool-spacing: 1px !default;
74
- $cx-default-input-left-tool-size: $cx-default-input-tool-size !default;
75
- $cx-default-input-left-tool-left: cx-calc(
76
- cx-left($cx-default-input-padding),
77
- cx-left($cx-default-box-border-width)
78
- ) !default;
79
- $cx-default-input-right-tool-right: cx-calc(
80
- cx-right($cx-default-input-padding),
81
- cx-right($cx-default-box-border-width)
82
- ) !default;
83
-
84
- // Left Icon
85
- $cx-input-left-icon-state-style-map: (
86
- default: (
87
- font-size: $cx-default-icon-size,
88
- left: $cx-default-input-left-tool-left,
89
- top: 50%,
90
- margin-top: -$cx-default-input-left-tool-size * 0.5,
91
- height: $cx-default-input-left-tool-size,
92
- width: $cx-default-input-left-tool-size,
93
- line-height: $cx-default-input-left-tool-size,
94
- opacity: 0.6,
95
- text-align: center,
96
- ),
97
- hover: (
98
- opacity: 1,
99
- ),
100
- active: (),
101
- focus: (),
102
- error: (),
103
- ) !default;
104
-
105
- //Right Icon
106
- $cx-input-right-icon-state-style-map: (
107
- default: (
108
- font-size: $cx-default-icon-size,
109
- right: $cx-default-input-right-tool-right,
110
- top: 50%,
111
- margin-top: -$cx-default-input-tool-size * 0.5,
112
- height: $cx-default-input-tool-size,
113
- width: $cx-default-input-tool-size,
114
- line-height: $cx-default-input-tool-size,
115
- opacity: 0.6,
116
- text-align: center,
117
- cursor: pointer,
118
- ),
119
- hover: (
120
- opacity: 1,
121
- ),
122
- active: (),
123
- focus: (),
124
- error: (),
125
- ) !default;
126
-
127
- // Clear Icon
128
- $cx-default-clear-size: $cx-default-input-tool-size !default;
129
- $cx-default-clear-color: #828282 !default;
130
- $cx-default-clear-spacing: 1px !default; //additional padding on the left of the clear box
131
-
132
- $cx-clear-state-style-map: (
133
- default: (
134
- font-size: $cx-default-icon-size,
135
- right: $cx-default-input-right-tool-right,
136
- top: 50%,
137
- margin-top: -$cx-default-clear-size * 0.5,
138
- height: $cx-default-clear-size,
139
- width: $cx-default-clear-size,
140
- line-height: $cx-default-clear-size,
141
- color: $cx-default-clear-color,
142
- border-radius: $cx-default-border-radius,
143
- text-align: center,
144
- ),
145
- hover: (
146
- background-color: rgba(128, 128, 128, 0.2),
147
- ),
148
- active: (),
149
- focus: (),
150
- error: (),
151
- ) !default;
152
-
153
- // Label
154
-
155
- $cx-default-label-padding: $cx-default-box-padding 0 !default;
156
- $cx-default-label-font-size: $cx-default-box-font-size !default;
157
- $cx-default-label-font-family: $cx-default-box-font-family !default;
158
- $cx-default-label-font-weight: normal !default;
159
- $cx-default-label-line-height: $cx-default-box-line-height !default;
160
- $cx-default-label-color: null !default;
161
- $cx-default-label-asterisk-color: #a80000 !default;
162
-
163
- $cx-label-state-style-map: (
164
- default: (
165
- padding: $cx-default-label-padding,
166
- font-size: $cx-default-label-font-size,
167
- font-family: $cx-default-label-font-family,
168
- font-weight: $cx-default-label-font-weight,
169
- line-height: $cx-default-label-line-height,
170
- color: $cx-default-label-color,
171
- border-style: solid,
172
- border-width: cx-top($cx-default-box-border-width) 0 cx-bottom($cx-default-box-border-width) 0,
173
- border-color: transparent,
174
- ),
175
- hover: (),
176
- active: (),
177
- disabled: (
178
- color: #bdbdbd,
179
- ),
180
- ) !default;
181
-
182
- // STANDARD FORM FIELD (textfield, numberfield, lookupfield, select,...)
183
- $cx-std-field-state-style-map: cx-deep-map-merge($cx-input-state-style-map, ()) !default;
184
-
185
- // COLORFIELD
186
- $cx-default-colorfield-font-family: "Consolas", monospace !default;
187
-
188
- // MONTHPICKER
189
- $cx-default-monthpicker-font-size: smaller !default;
190
- $cx-default-monthpicker-font-weight: normal !default;
191
-
192
- // SLIDER
193
- $cx-default-slider-axis-size: 8px !default;
194
- $cx-default-slider-axis-background-color: rgba(128, 128, 128, 0.2) !default;
195
- $cx-default-slider-range-background-color: #98d4ff !default;
196
-
197
- // handle
198
- $cx-default-slider-handle-size: 18px !default;
199
- $cx-default-slider-handle-background-color: rgb(235, 235, 235) !default;
200
- $cx-default-slider-handle-border-width: 1px !default;
201
- $cx-default-slider-handle-border-color: rgb(204, 204, 204) !default;
202
- $cx-default-slider-handle-border-radius: 50% !default;
203
- $cx-default-slider-handle-box-shadow: 0 0 3px rgba(128, 128, 128, 0.3) !default;
204
-
205
- $cx-slider-handle-styles: (
206
- default: (
207
- background-color: $cx-default-slider-handle-background-color,
208
- border-style: solid,
209
- border-width: $cx-default-slider-handle-border-width,
210
- border-color: $cx-default-slider-handle-border-color,
211
- border-radius: $cx-default-slider-handle-border-radius,
212
- box-shadow: $cx-default-slider-handle-box-shadow,
213
- ),
214
- hover: (
215
- box-shadow: 0 0 3px rgba(128, 128, 128, 0.5),
216
- ),
217
- focus: (
218
- border-color: rgba(77, 144, 254, 0.8),
219
- outline: none,
220
- box-shadow: 0 0 2px rgba(77, 144, 254, 0.8),
221
- ),
222
- disabled: (),
223
- active: (
224
- background: rgb(220, 220, 220),
225
- ),
226
- ) !default;
227
-
228
- // SWITCH
229
- $cx-default-switch-axis-background-color: $cx-default-slider-axis-background-color !default;
230
- $cx-default-switch-range-background-color: #87cc8a !default;
231
- $cx-default-switch-axis-size: 20px !default;
232
- $cx-default-switch-width: 32px !default;
233
-
234
- $cx-default-switch-handle-background-color: $cx-default-slider-handle-background-color !default;
235
- $cx-default-switch-handle-border-width: $cx-default-slider-handle-border-width !default;
236
- $cx-default-switch-handle-border-color: $cx-default-slider-handle-border-color !default;
237
- $cx-default-switch-handle-border-radius: $cx-default-slider-handle-border-radius !default;
238
- $cx-default-switch-handle-box-shadow: $cx-default-slider-handle-box-shadow !default;
239
- $cx-default-switch-handle-size: 18px !default;
240
-
241
- $cx-switch-handle-styles: (
242
- default: (
243
- background-color: $cx-default-switch-handle-background-color,
244
- border-style: solid,
245
- border-width: $cx-default-switch-handle-border-width,
246
- border-color: $cx-default-switch-handle-border-color,
247
- border-radius: $cx-default-switch-handle-border-radius,
248
- box-shadow: $cx-default-switch-handle-box-shadow,
249
- ),
250
- hover: (
251
- box-shadow: 0 0 3px rgba(128, 128, 128, 0.5),
252
- ),
253
- focus: (
254
- border-color: rgba(77, 144, 254, 0.8),
255
- outline: none,
256
- box-shadow: 0 0 2px rgba(77, 144, 254, 0.8),
257
- ),
258
- disabled: (),
259
- active: (
260
- background: rgb(220, 220, 220),
261
- ),
262
- on: (),
263
- on-active: (),
264
- ) !default;
265
-
266
- // TEXTAREA
267
- $cx-default-textarea-width: 300px !default;
268
- $cx-textarea-state-style-map: cx-deep-map-merge(
269
- $cx-input-state-style-map,
270
- (
271
- default: (
272
- line-height: normal,
273
- ),
274
- )
275
- );
276
-
277
- // LOOKUPFIELD TAG
278
- $cx-default-input-tag-spacing: 3px !default;
279
- $cx-default-input-tag-font-size: null !default;
280
- $cx-default-input-tag-background-color: #eee !default;
281
- $cx-default-input-tag-border-radius: $cx-default-border-radius !default;
282
- $cx-default-input-tag-padding: cx-calc(cx-top($cx-default-input-padding), -$cx-default-input-tag-spacing) !default;
283
-
284
- $cx-input-tag-state-style-map: (
285
- default: (
286
- font-size: $cx-default-input-tag-font-size,
287
- background-color: $cx-default-input-tag-background-color,
288
- margin: $cx-default-input-tag-spacing 0 0 $cx-default-input-tag-spacing,
289
- padding: $cx-default-input-tag-padding,
290
- padding-right: cx-calc($cx-default-clear-size, 2px),
291
- border-radius: $cx-default-input-tag-border-radius,
292
- ),
293
- ) !default;
294
-
295
- $cx-input-tag-clear-state-style-map: cx-deep-map-merge(
296
- $cx-clear-state-style-map,
297
- (
298
- default: (
299
- right: round($cx-default-input-tag-border-radius * 0.125),
300
- ),
301
- )
302
- ) !default;
303
-
304
- // CALENDAR
305
- @import "Calendar.variables";
306
- @import "Checkbox.variables";
307
- @import "Radio.variables";
308
- @import "ColorPicker.variables";
309
-
310
- $cx-dependencies: map.merge(
311
- $cx-dependencies,
312
- (
313
- "cx/widgets/Field": "cx/widgets/Label" "cx/widgets/Tooltip" "cx/widgets/ValidationError" "cx/widgets/HelpText",
314
- "cx/widgets/DateTimeField": "cx/widgets/Field" "cx/widgets/DateTimePicker" "cx/widgets/Calendar"
315
- "cx/widgets/Dropdown",
316
- "cx/widgets/DateField": "cx/widgets/DateTimeField",
317
- "cx/widgets/TimeField": "cx/widgets/DateTimeField",
318
- "cx/widgets/TextField": "cx/widgets/Field",
319
- "cx/widgets/NumberField": "cx/widgets/Field",
320
- "cx/widgets/MonthField": "cx/widgets/Field" "cx/widgets/MonthPicker" "cx/widgets/Dropdown",
321
- "cx/widgets/ColorField": "cx/widgets/Field" "cx/widgets/ColorPicker" "cx/widgets/Dropdown",
322
- "cx/widgets/LookupField": "cx/widgets/Field" "cx/widgets/Dropdown" "cx/widgets/List"
323
- "cx/widgets/HighlightedSearchText",
324
- "cx/widgets/Select": "cx/widgets/Field",
325
- "cx/widgets/Slider": "cx/widgets/Field",
326
- "cx/widgets/Switch": "cx/widgets/Field",
327
- )
328
- );
329
-
330
- // DATE TIME PICKER
331
- $cx-default-datetimepicker-font-size: $cx-default-font-size !default;
332
- $cx-default-datetimepicker-background-color: #fff !default;
333
- $cx-default-datetimepicker-border-width: 1px !default;
334
- $cx-default-datetimepicker-border-radius: 0 !default;
335
- $cx-default-datetimepicker-border-color: #d3d3d3 !default;
336
- $cx-default-datetimepicker-padding: 0 5px !default;
337
-
338
- // wheel
339
- $cx-default-wheel-clip-background-color: #fff !default;
340
- $cx-default-wheel-clip-border-width: 1px !default;
341
- $cx-default-wheel-clip-border-radius: 0 !default;
342
- $cx-default-wheel-clip-border-color: #d3d3d3 !default;
343
-
344
- $cx-wheel-selection-state-style-map: (
345
- default: (
346
- border-width: 2px 0 2px 0,
347
- border-style: solid,
348
- border-color: #9bc8ff,
349
- background-color: rgba(#9bc8ff, 0.1),
350
- ),
351
- active: (
352
- border-color: #3c7eff,
353
- background: rgba(#3c7eff, 0.1),
354
- ),
355
- ) !default;
1
+ @use "sass:map";
2
+
3
+ @if cx-call-once("cx/widgets/checker-background") {
4
+ %cx-checker-bg {
5
+ background-repeat: repeat;
6
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuOWwzfk4AAAAfSURBVChTY9i5Y89/dAwEDOh4SCjEJohN8+BXuOc/AOttNBKJWD4sAAAAAElFTkSuQmCC");
7
+ }
8
+ }
9
+
10
+ $cx-use-box-line-height-fix: true !default;
11
+
12
+ // Appearance
13
+ $cx-default-input-font-family: $cx-default-box-font-family !default;
14
+ $cx-default-input-font-size: $cx-default-box-font-size !default;
15
+ $cx-default-input-border-color: $cx-default-border-color !default;
16
+ $cx-default-input-border-radius: $cx-default-border-radius !default;
17
+ $cx-default-input-background-color: white !default;
18
+ $cx-default-input-color: black !default;
19
+ $cx-default-input-placeholder-color: $cx-default-empty-text-color !default;
20
+ $cx-default-input-width: 180px !default;
21
+ $cx-default-input-padding: $cx-default-box-padding !default;
22
+
23
+ $cx-input-placeholder: (
24
+ color: $cx-default-input-placeholder-color,
25
+ opacity: 1,
26
+ ) !default;
27
+
28
+ $cx-input-state-style-map: (
29
+ default: (
30
+ line-height: $cx-default-box-line-height,
31
+ padding: $cx-default-input-padding,
32
+ border-width: $cx-default-box-border-width,
33
+ font-size: $cx-default-input-font-size,
34
+ font-family: $cx-default-input-font-family,
35
+ border-color: $cx-default-input-border-color,
36
+ border-style: solid,
37
+ border-radius: $cx-default-input-border-radius,
38
+ background-color: $cx-default-input-background-color,
39
+ color: $cx-default-input-color,
40
+ outline-offset: 0,
41
+ box-shadow: none,
42
+ text-overflow: ellipsis,
43
+ -ms-appearance: none,
44
+ -moz-appearance: none,
45
+ -webkit-appearance: none,
46
+ ),
47
+ hover: (),
48
+ focus: (
49
+ border-color: rgba(77, 144, 254, 0.8),
50
+ outline: none,
51
+ box-shadow: 0 0 2px rgba(77, 144, 254, 0.8),
52
+ ),
53
+ disabled: (
54
+ background: rgb(235, 235, 228),
55
+ color: rgb(84, 84, 84),
56
+ pointer-events: none,
57
+ ),
58
+ error: (
59
+ border-color: rgba(220, 0, 9, 0.8),
60
+ ),
61
+ error-focus: (
62
+ box-shadow: 0 0 2px rgba(220, 0, 9, 0.8),
63
+ ),
64
+ ) !default;
65
+
66
+ $cx-default-checkbox-size: 14px !default;
67
+ $cx-default-radio-size: 14px !default;
68
+ $cx-default-input-icon-size: $cx-default-icon-size !default;
69
+
70
+ // Tool
71
+ $cx-default-input-tool-size: $cx-default-box-line-height !default;
72
+ $cx-default-input-left-tool-spacing: cx-left($cx-default-box-padding) !default;
73
+ $cx-default-input-right-tool-spacing: 1px !default;
74
+ $cx-default-input-left-tool-size: $cx-default-input-tool-size !default;
75
+ $cx-default-input-left-tool-left: cx-calc(
76
+ cx-left($cx-default-input-padding),
77
+ cx-left($cx-default-box-border-width)
78
+ ) !default;
79
+ $cx-default-input-right-tool-right: cx-calc(
80
+ cx-right($cx-default-input-padding),
81
+ cx-right($cx-default-box-border-width)
82
+ ) !default;
83
+
84
+ // Left Icon
85
+ $cx-input-left-icon-state-style-map: (
86
+ default: (
87
+ font-size: $cx-default-icon-size,
88
+ left: $cx-default-input-left-tool-left,
89
+ top: 50%,
90
+ margin-top: -$cx-default-input-left-tool-size * 0.5,
91
+ height: $cx-default-input-left-tool-size,
92
+ width: $cx-default-input-left-tool-size,
93
+ line-height: $cx-default-input-left-tool-size,
94
+ opacity: 0.6,
95
+ text-align: center,
96
+ ),
97
+ hover: (
98
+ opacity: 1,
99
+ ),
100
+ active: (),
101
+ focus: (),
102
+ error: (),
103
+ ) !default;
104
+
105
+ //Right Icon
106
+ $cx-input-right-icon-state-style-map: (
107
+ default: (
108
+ font-size: $cx-default-icon-size,
109
+ right: $cx-default-input-right-tool-right,
110
+ top: 50%,
111
+ margin-top: -$cx-default-input-tool-size * 0.5,
112
+ height: $cx-default-input-tool-size,
113
+ width: $cx-default-input-tool-size,
114
+ line-height: $cx-default-input-tool-size,
115
+ opacity: 0.6,
116
+ text-align: center,
117
+ cursor: pointer,
118
+ ),
119
+ hover: (
120
+ opacity: 1,
121
+ ),
122
+ active: (),
123
+ focus: (),
124
+ error: (),
125
+ ) !default;
126
+
127
+ // Clear Icon
128
+ $cx-default-clear-size: $cx-default-input-tool-size !default;
129
+ $cx-default-clear-color: #828282 !default;
130
+ $cx-default-clear-spacing: 1px !default; //additional padding on the left of the clear box
131
+
132
+ $cx-clear-state-style-map: (
133
+ default: (
134
+ font-size: $cx-default-icon-size,
135
+ right: $cx-default-input-right-tool-right,
136
+ top: 50%,
137
+ margin-top: -$cx-default-clear-size * 0.5,
138
+ height: $cx-default-clear-size,
139
+ width: $cx-default-clear-size,
140
+ line-height: $cx-default-clear-size,
141
+ color: $cx-default-clear-color,
142
+ border-radius: $cx-default-border-radius,
143
+ text-align: center,
144
+ ),
145
+ hover: (
146
+ background-color: rgba(128, 128, 128, 0.2),
147
+ ),
148
+ active: (),
149
+ focus: (),
150
+ error: (),
151
+ ) !default;
152
+
153
+ // Label
154
+
155
+ $cx-default-label-padding: $cx-default-box-padding 0 !default;
156
+ $cx-default-label-font-size: $cx-default-box-font-size !default;
157
+ $cx-default-label-font-family: $cx-default-box-font-family !default;
158
+ $cx-default-label-font-weight: normal !default;
159
+ $cx-default-label-line-height: $cx-default-box-line-height !default;
160
+ $cx-default-label-color: null !default;
161
+ $cx-default-label-asterisk-color: #a80000 !default;
162
+
163
+ $cx-label-state-style-map: (
164
+ default: (
165
+ padding: $cx-default-label-padding,
166
+ font-size: $cx-default-label-font-size,
167
+ font-family: $cx-default-label-font-family,
168
+ font-weight: $cx-default-label-font-weight,
169
+ line-height: $cx-default-label-line-height,
170
+ color: $cx-default-label-color,
171
+ border-style: solid,
172
+ border-width: cx-top($cx-default-box-border-width) 0 cx-bottom($cx-default-box-border-width) 0,
173
+ border-color: transparent,
174
+ ),
175
+ hover: (),
176
+ active: (),
177
+ disabled: (
178
+ color: #bdbdbd,
179
+ ),
180
+ ) !default;
181
+
182
+ // STANDARD FORM FIELD (textfield, numberfield, lookupfield, select,...)
183
+ $cx-std-field-state-style-map: cx-deep-map-merge($cx-input-state-style-map, ()) !default;
184
+
185
+ // COLORFIELD
186
+ $cx-default-colorfield-font-family: "Consolas", monospace !default;
187
+
188
+ // MONTHPICKER
189
+ $cx-default-monthpicker-font-size: smaller !default;
190
+ $cx-default-monthpicker-font-weight: normal !default;
191
+
192
+ // SLIDER
193
+ $cx-default-slider-axis-size: 8px !default;
194
+ $cx-default-slider-axis-background-color: rgba(128, 128, 128, 0.2) !default;
195
+ $cx-default-slider-range-background-color: #98d4ff !default;
196
+
197
+ // handle
198
+ $cx-default-slider-handle-size: 18px !default;
199
+ $cx-default-slider-handle-background-color: rgb(235, 235, 235) !default;
200
+ $cx-default-slider-handle-border-width: 1px !default;
201
+ $cx-default-slider-handle-border-color: rgb(204, 204, 204) !default;
202
+ $cx-default-slider-handle-border-radius: 50% !default;
203
+ $cx-default-slider-handle-box-shadow: 0 0 3px rgba(128, 128, 128, 0.3) !default;
204
+
205
+ $cx-slider-handle-styles: (
206
+ default: (
207
+ background-color: $cx-default-slider-handle-background-color,
208
+ border-style: solid,
209
+ border-width: $cx-default-slider-handle-border-width,
210
+ border-color: $cx-default-slider-handle-border-color,
211
+ border-radius: $cx-default-slider-handle-border-radius,
212
+ box-shadow: $cx-default-slider-handle-box-shadow,
213
+ ),
214
+ hover: (
215
+ box-shadow: 0 0 3px rgba(128, 128, 128, 0.5),
216
+ ),
217
+ focus: (
218
+ border-color: rgba(77, 144, 254, 0.8),
219
+ outline: none,
220
+ box-shadow: 0 0 2px rgba(77, 144, 254, 0.8),
221
+ ),
222
+ disabled: (),
223
+ active: (
224
+ background: rgb(220, 220, 220),
225
+ ),
226
+ ) !default;
227
+
228
+ // SWITCH
229
+ $cx-default-switch-axis-background-color: $cx-default-slider-axis-background-color !default;
230
+ $cx-default-switch-range-background-color: #87cc8a !default;
231
+ $cx-default-switch-axis-size: 20px !default;
232
+ $cx-default-switch-width: 32px !default;
233
+
234
+ $cx-default-switch-handle-background-color: $cx-default-slider-handle-background-color !default;
235
+ $cx-default-switch-handle-border-width: $cx-default-slider-handle-border-width !default;
236
+ $cx-default-switch-handle-border-color: $cx-default-slider-handle-border-color !default;
237
+ $cx-default-switch-handle-border-radius: $cx-default-slider-handle-border-radius !default;
238
+ $cx-default-switch-handle-box-shadow: $cx-default-slider-handle-box-shadow !default;
239
+ $cx-default-switch-handle-size: 18px !default;
240
+
241
+ $cx-switch-handle-styles: (
242
+ default: (
243
+ background-color: $cx-default-switch-handle-background-color,
244
+ border-style: solid,
245
+ border-width: $cx-default-switch-handle-border-width,
246
+ border-color: $cx-default-switch-handle-border-color,
247
+ border-radius: $cx-default-switch-handle-border-radius,
248
+ box-shadow: $cx-default-switch-handle-box-shadow,
249
+ ),
250
+ hover: (
251
+ box-shadow: 0 0 3px rgba(128, 128, 128, 0.5),
252
+ ),
253
+ focus: (
254
+ border-color: rgba(77, 144, 254, 0.8),
255
+ outline: none,
256
+ box-shadow: 0 0 2px rgba(77, 144, 254, 0.8),
257
+ ),
258
+ disabled: (),
259
+ active: (
260
+ background: rgb(220, 220, 220),
261
+ ),
262
+ on: (),
263
+ on-active: (),
264
+ ) !default;
265
+
266
+ // TEXTAREA
267
+ $cx-default-textarea-width: 300px !default;
268
+ $cx-textarea-state-style-map: cx-deep-map-merge(
269
+ $cx-input-state-style-map,
270
+ (
271
+ default: (
272
+ line-height: normal,
273
+ ),
274
+ )
275
+ );
276
+
277
+ // LOOKUPFIELD TAG
278
+ $cx-default-input-tag-spacing: 3px !default;
279
+ $cx-default-input-tag-font-size: null !default;
280
+ $cx-default-input-tag-background-color: #eee !default;
281
+ $cx-default-input-tag-border-radius: $cx-default-border-radius !default;
282
+ $cx-default-input-tag-padding: cx-calc(cx-top($cx-default-input-padding), -$cx-default-input-tag-spacing) !default;
283
+
284
+ $cx-input-tag-state-style-map: (
285
+ default: (
286
+ font-size: $cx-default-input-tag-font-size,
287
+ background-color: $cx-default-input-tag-background-color,
288
+ margin: $cx-default-input-tag-spacing 0 0 $cx-default-input-tag-spacing,
289
+ padding: $cx-default-input-tag-padding,
290
+ padding-right: cx-calc($cx-default-clear-size, 2px),
291
+ border-radius: $cx-default-input-tag-border-radius,
292
+ ),
293
+ ) !default;
294
+
295
+ $cx-input-tag-clear-state-style-map: cx-deep-map-merge(
296
+ $cx-clear-state-style-map,
297
+ (
298
+ default: (
299
+ right: round($cx-default-input-tag-border-radius * 0.125),
300
+ ),
301
+ )
302
+ ) !default;
303
+
304
+ // CALENDAR
305
+ @import "Calendar.variables";
306
+ @import "Checkbox.variables";
307
+ @import "Radio.variables";
308
+ @import "ColorPicker.variables";
309
+
310
+ $cx-dependencies: map.merge(
311
+ $cx-dependencies,
312
+ (
313
+ "cx/widgets/Field": "cx/widgets/Label" "cx/widgets/Tooltip" "cx/widgets/ValidationError" "cx/widgets/HelpText",
314
+ "cx/widgets/DateTimeField": "cx/widgets/Field" "cx/widgets/DateTimePicker" "cx/widgets/Calendar"
315
+ "cx/widgets/Dropdown",
316
+ "cx/widgets/DateField": "cx/widgets/DateTimeField",
317
+ "cx/widgets/TimeField": "cx/widgets/DateTimeField",
318
+ "cx/widgets/TextField": "cx/widgets/Field",
319
+ "cx/widgets/NumberField": "cx/widgets/Field",
320
+ "cx/widgets/MonthField": "cx/widgets/Field" "cx/widgets/MonthPicker" "cx/widgets/Dropdown",
321
+ "cx/widgets/ColorField": "cx/widgets/Field" "cx/widgets/ColorPicker" "cx/widgets/Dropdown",
322
+ "cx/widgets/LookupField": "cx/widgets/Field" "cx/widgets/Dropdown" "cx/widgets/List"
323
+ "cx/widgets/HighlightedSearchText",
324
+ "cx/widgets/Select": "cx/widgets/Field",
325
+ "cx/widgets/Slider": "cx/widgets/Field",
326
+ "cx/widgets/Switch": "cx/widgets/Field",
327
+ )
328
+ );
329
+
330
+ // DATE TIME PICKER
331
+ $cx-default-datetimepicker-font-size: $cx-default-font-size !default;
332
+ $cx-default-datetimepicker-background-color: #fff !default;
333
+ $cx-default-datetimepicker-border-width: 1px !default;
334
+ $cx-default-datetimepicker-border-radius: 0 !default;
335
+ $cx-default-datetimepicker-border-color: #d3d3d3 !default;
336
+ $cx-default-datetimepicker-padding: 0 5px !default;
337
+
338
+ // wheel
339
+ $cx-default-wheel-clip-background-color: #fff !default;
340
+ $cx-default-wheel-clip-border-width: 1px !default;
341
+ $cx-default-wheel-clip-border-radius: 0 !default;
342
+ $cx-default-wheel-clip-border-color: #d3d3d3 !default;
343
+
344
+ $cx-wheel-selection-state-style-map: (
345
+ default: (
346
+ border-width: 2px 0 2px 0,
347
+ border-style: solid,
348
+ border-color: #9bc8ff,
349
+ background-color: rgba(#9bc8ff, 0.1),
350
+ ),
351
+ active: (
352
+ border-color: #3c7eff,
353
+ background: rgba(#3c7eff, 0.1),
354
+ ),
355
+ ) !default;