cx 25.3.1 → 25.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (109) hide show
  1. package/dist/charts.css +8 -0
  2. package/dist/charts.js +29 -2
  3. package/dist/manifest.js +630 -630
  4. package/package.json +1 -1
  5. package/src/charts/Legend.d.ts +45 -27
  6. package/src/charts/Legend.js +22 -2
  7. package/src/charts/Legend.scss +8 -0
  8. package/src/charts/LegendEntry.js +128 -128
  9. package/src/charts/LegendEntry.scss +27 -27
  10. package/src/charts/PieChart.d.ts +92 -92
  11. package/src/charts/PieChart.js +1 -0
  12. package/src/charts/axis/Axis.d.ts +113 -113
  13. package/src/charts/axis/Axis.js +280 -280
  14. package/src/charts/axis/CategoryAxis.d.ts +30 -30
  15. package/src/charts/axis/CategoryAxis.js +241 -241
  16. package/src/charts/axis/NumericAxis.js +351 -351
  17. package/src/charts/axis/Stack.js +55 -55
  18. package/src/charts/axis/TimeAxis.d.ts +28 -28
  19. package/src/charts/axis/TimeAxis.js +611 -611
  20. package/src/charts/helpers/PointReducer.js +47 -47
  21. package/src/charts/helpers/SnapPointFinder.js +69 -69
  22. package/src/data/Binding.spec.js +69 -69
  23. package/src/data/Expression.js +229 -229
  24. package/src/data/Expression.spec.js +229 -229
  25. package/src/data/StringTemplate.js +92 -92
  26. package/src/data/StringTemplate.spec.js +132 -132
  27. package/src/data/StructuredSelector.js +132 -132
  28. package/src/data/getAccessor.spec.js +11 -11
  29. package/src/data/getSelector.js +49 -49
  30. package/src/hooks/createLocalStorageRef.d.ts +3 -3
  31. package/src/hooks/createLocalStorageRef.js +20 -20
  32. package/src/index.scss +6 -6
  33. package/src/ui/Culture.d.ts +57 -57
  34. package/src/ui/Culture.js +139 -139
  35. package/src/ui/FocusManager.js +171 -171
  36. package/src/ui/Format.js +108 -108
  37. package/src/ui/HoverSync.js +147 -147
  38. package/src/ui/Instance.d.ts +72 -72
  39. package/src/ui/Instance.js +614 -614
  40. package/src/ui/Repeater.d.ts +61 -61
  41. package/src/ui/index.d.ts +42 -42
  42. package/src/ui/layout/ContentPlaceholder.d.ts +19 -19
  43. package/src/ui/layout/ContentPlaceholder.js +105 -105
  44. package/src/ui/layout/ContentPlaceholder.spec.js +579 -579
  45. package/src/ui/layout/LabelsTopLayout.js +134 -134
  46. package/src/util/date/encodeDate.d.ts +1 -1
  47. package/src/util/date/encodeDate.js +8 -8
  48. package/src/util/date/encodeDateWithTimezoneOffset.d.ts +1 -1
  49. package/src/util/date/index.d.ts +11 -11
  50. package/src/util/date/index.js +11 -11
  51. package/src/util/date/parseDateInvariant.d.ts +3 -3
  52. package/src/util/date/parseDateInvariant.js +20 -20
  53. package/src/util/getSearchQueryPredicate.js +59 -59
  54. package/src/util/index.d.ts +51 -51
  55. package/src/util/index.js +54 -54
  56. package/src/util/isValidIdentifierName.d.ts +1 -1
  57. package/src/util/isValidIdentifierName.js +5 -5
  58. package/src/util/isValidIdentifierName.spec.js +33 -33
  59. package/src/util/scss/add-rules.scss +38 -38
  60. package/src/widgets/CxCredit.scss +37 -37
  61. package/src/widgets/HighlightedSearchText.js +36 -36
  62. package/src/widgets/HighlightedSearchText.scss +18 -18
  63. package/src/widgets/List.scss +91 -91
  64. package/src/widgets/drag-drop/DropZone.js +214 -214
  65. package/src/widgets/form/Calendar.js +618 -618
  66. package/src/widgets/form/Calendar.scss +196 -196
  67. package/src/widgets/form/Checkbox.scss +127 -127
  68. package/src/widgets/form/ColorField.js +397 -397
  69. package/src/widgets/form/ColorField.scss +96 -96
  70. package/src/widgets/form/ColorPicker.js +485 -485
  71. package/src/widgets/form/ColorPicker.scss +283 -283
  72. package/src/widgets/form/DateTimeField.js +576 -576
  73. package/src/widgets/form/DateTimePicker.js +392 -392
  74. package/src/widgets/form/LookupField.d.ts +179 -179
  75. package/src/widgets/form/LookupField.scss +219 -219
  76. package/src/widgets/form/MonthField.d.ts +99 -99
  77. package/src/widgets/form/MonthField.js +523 -523
  78. package/src/widgets/form/MonthPicker.d.ts +76 -76
  79. package/src/widgets/form/MonthPicker.js +641 -641
  80. package/src/widgets/form/MonthPicker.scss +118 -118
  81. package/src/widgets/form/NumberField.js +459 -459
  82. package/src/widgets/form/NumberField.scss +61 -61
  83. package/src/widgets/form/Radio.scss +121 -121
  84. package/src/widgets/form/Select.scss +99 -99
  85. package/src/widgets/form/Slider.scss +118 -118
  86. package/src/widgets/form/Switch.scss +140 -140
  87. package/src/widgets/form/TextArea.scss +43 -43
  88. package/src/widgets/form/TextField.js +290 -290
  89. package/src/widgets/form/TextField.scss +55 -55
  90. package/src/widgets/form/UploadButton.d.ts +34 -34
  91. package/src/widgets/form/variables.scss +353 -353
  92. package/src/widgets/grid/Grid.d.ts +442 -442
  93. package/src/widgets/grid/Grid.js +3414 -3414
  94. package/src/widgets/grid/GridRow.js +228 -228
  95. package/src/widgets/grid/TreeNode.d.ts +23 -23
  96. package/src/widgets/grid/TreeNode.scss +88 -88
  97. package/src/widgets/grid/variables.scss +133 -133
  98. package/src/widgets/nav/LinkButton.js +128 -128
  99. package/src/widgets/nav/Menu.scss +74 -74
  100. package/src/widgets/overlay/Dropdown.js +612 -612
  101. package/src/widgets/overlay/FlyweightTooltipTracker.js +39 -39
  102. package/src/widgets/overlay/Overlay.d.ts +73 -73
  103. package/src/widgets/overlay/Window.js +202 -202
  104. package/src/widgets/overlay/captureMouse.js +124 -124
  105. package/src/widgets/overlay/createHotPromiseWindowFactory.d.ts +18 -18
  106. package/src/widgets/overlay/createHotPromiseWindowFactory.js +56 -56
  107. package/src/widgets/overlay/index.d.ts +11 -11
  108. package/src/widgets/overlay/index.js +11 -11
  109. package/src/widgets/variables.scss +144 -144
package/src/util/index.js CHANGED
@@ -1,54 +1,54 @@
1
- export * from "./Console";
2
- export * from "./Debug";
3
- export * from "./DOM";
4
- export * from "./Format";
5
- export * from "./expandFatArrows";
6
- export * from "./GlobalCacheIdentifier";
7
- export * from "./innerTextTrim";
8
- export * from "./isDigit";
9
- export * from "./isPromise";
10
- export * from "./isTouchDevice";
11
- export * from "./KeyCode";
12
- export * from "./parseStyle";
13
- export * from "./quote";
14
- export * from "./scrollElementIntoView";
15
- export * from "./shallowEquals";
16
- export * from "./Timing";
17
- export * from "./date/index";
18
- export * from "./color/index";
19
- export * from "./getVendorPrefix";
20
- export * from "./eventCallbacks";
21
- export * from "./getSearchQueryPredicate";
22
- export * from "./escapeSpecialRegexCharacters";
23
- export * from "./browserSupportsPassiveEventHandlers";
24
- export * from "./isTouchEvent";
25
- export * from "./debounce";
26
- export * from "./throttle";
27
- export * from "./SubscriberList";
28
- export * from "./findScrollableParent";
29
- export * from "./getScrollerBoundingClientRect";
30
- export * from "./isNonEmptyArray";
31
- export * from "./isArray";
32
- export * from "./isObject";
33
- export * from "./isNumber";
34
- export * from "./isFunction";
35
- export * from "./isString";
36
- export * from "./isUndefined";
37
- export * from "./isDefined";
38
- export * from "./routeAppend";
39
- export * from "./reverseSlice";
40
- export * from "./getTopLevelBoundingClientRect";
41
- export * from "./getParentFrameBoundingClientRect";
42
- export * from "./getActiveElement";
43
- export * from "./Component";
44
- export * from "./onIdleCallback";
45
- export * from "./validatedDebounce";
46
- export * from "./addEventListenerWithOptions";
47
- export * from "./coalesce";
48
- export * from "./dummyCallback";
49
- export * from "./calculateNaturalElementHeight";
50
- export * from "./isTextInputElement";
51
- export * from "./capitalize";
52
- export * from "./isValidIdentifierName";
53
-
54
- export * from "./TraversalStack";
1
+ export * from "./Console";
2
+ export * from "./Debug";
3
+ export * from "./DOM";
4
+ export * from "./Format";
5
+ export * from "./expandFatArrows";
6
+ export * from "./GlobalCacheIdentifier";
7
+ export * from "./innerTextTrim";
8
+ export * from "./isDigit";
9
+ export * from "./isPromise";
10
+ export * from "./isTouchDevice";
11
+ export * from "./KeyCode";
12
+ export * from "./parseStyle";
13
+ export * from "./quote";
14
+ export * from "./scrollElementIntoView";
15
+ export * from "./shallowEquals";
16
+ export * from "./Timing";
17
+ export * from "./date/index";
18
+ export * from "./color/index";
19
+ export * from "./getVendorPrefix";
20
+ export * from "./eventCallbacks";
21
+ export * from "./getSearchQueryPredicate";
22
+ export * from "./escapeSpecialRegexCharacters";
23
+ export * from "./browserSupportsPassiveEventHandlers";
24
+ export * from "./isTouchEvent";
25
+ export * from "./debounce";
26
+ export * from "./throttle";
27
+ export * from "./SubscriberList";
28
+ export * from "./findScrollableParent";
29
+ export * from "./getScrollerBoundingClientRect";
30
+ export * from "./isNonEmptyArray";
31
+ export * from "./isArray";
32
+ export * from "./isObject";
33
+ export * from "./isNumber";
34
+ export * from "./isFunction";
35
+ export * from "./isString";
36
+ export * from "./isUndefined";
37
+ export * from "./isDefined";
38
+ export * from "./routeAppend";
39
+ export * from "./reverseSlice";
40
+ export * from "./getTopLevelBoundingClientRect";
41
+ export * from "./getParentFrameBoundingClientRect";
42
+ export * from "./getActiveElement";
43
+ export * from "./Component";
44
+ export * from "./onIdleCallback";
45
+ export * from "./validatedDebounce";
46
+ export * from "./addEventListenerWithOptions";
47
+ export * from "./coalesce";
48
+ export * from "./dummyCallback";
49
+ export * from "./calculateNaturalElementHeight";
50
+ export * from "./isTextInputElement";
51
+ export * from "./capitalize";
52
+ export * from "./isValidIdentifierName";
53
+
54
+ export * from "./TraversalStack";
@@ -1 +1 @@
1
- export function isValidIdentifierName(name: string): boolean;
1
+ export function isValidIdentifierName(name: string): boolean;
@@ -1,5 +1,5 @@
1
- const regex = /^[$_\p{ID_Start}][$_\u{200C}\u{200D}\p{ID_Continue}]*$/u;
2
-
3
- export function isValidIdentifierName(name) {
4
- return regex.test(name);
5
- }
1
+ const regex = /^[$_\p{ID_Start}][$_\u{200C}\u{200D}\p{ID_Continue}]*$/u;
2
+
3
+ export function isValidIdentifierName(name) {
4
+ return regex.test(name);
5
+ }
@@ -1,33 +1,33 @@
1
- import { isValidIdentifierName } from "./isValidIdentifierName";
2
- import assert from "assert";
3
-
4
- describe("isValidIdentifierName", function () {
5
- it("names starting with a number are not valid", function () {
6
- assert(!isValidIdentifierName("1a"));
7
- assert(!isValidIdentifierName("00"));
8
- assert(!isValidIdentifierName("0_abc"));
9
- });
10
-
11
- it("names starting with a dollar sign are valid", function () {
12
- assert(isValidIdentifierName("$a"));
13
- assert(isValidIdentifierName("$"));
14
- });
15
-
16
- it("names starting with an underscore are valid", function () {
17
- assert(isValidIdentifierName("_a"));
18
- assert(isValidIdentifierName("_"));
19
- });
20
-
21
- it("names starting with a letter are valid", function () {
22
- assert(isValidIdentifierName("a"));
23
- assert(isValidIdentifierName("abc"));
24
- assert(isValidIdentifierName("abc0123"));
25
- });
26
-
27
- it("names with invalid characters are not valid", function () {
28
- assert(!isValidIdentifierName("a b"));
29
- assert(!isValidIdentifierName("a-b"));
30
- assert(!isValidIdentifierName("a.b"));
31
- assert(!isValidIdentifierName("a!b"));
32
- });
33
- });
1
+ import { isValidIdentifierName } from "./isValidIdentifierName";
2
+ import assert from "assert";
3
+
4
+ describe("isValidIdentifierName", function () {
5
+ it("names starting with a number are not valid", function () {
6
+ assert(!isValidIdentifierName("1a"));
7
+ assert(!isValidIdentifierName("00"));
8
+ assert(!isValidIdentifierName("0_abc"));
9
+ });
10
+
11
+ it("names starting with a dollar sign are valid", function () {
12
+ assert(isValidIdentifierName("$a"));
13
+ assert(isValidIdentifierName("$"));
14
+ });
15
+
16
+ it("names starting with an underscore are valid", function () {
17
+ assert(isValidIdentifierName("_a"));
18
+ assert(isValidIdentifierName("_"));
19
+ });
20
+
21
+ it("names starting with a letter are valid", function () {
22
+ assert(isValidIdentifierName("a"));
23
+ assert(isValidIdentifierName("abc"));
24
+ assert(isValidIdentifierName("abc0123"));
25
+ });
26
+
27
+ it("names with invalid characters are not valid", function () {
28
+ assert(!isValidIdentifierName("a b"));
29
+ assert(!isValidIdentifierName("a-b"));
30
+ assert(!isValidIdentifierName("a.b"));
31
+ assert(!isValidIdentifierName("a!b"));
32
+ });
33
+ });
@@ -1,38 +1,38 @@
1
- @mixin cx-add-rules($styles) {
2
- @each $rule, $value in $styles {
3
- #{$rule}: $value;
4
- }
5
- }
6
-
7
- @mixin cx-add-state-rules($state-style-map, $key) {
8
- @include cx-add-rules(map-get($state-style-map, $key));
9
- }
10
-
11
- @function cx-merge-state-style-maps($state-style-map, $override-style-map) {
12
- $result: $state-style-map;
13
-
14
- @if ($override-style-map != null) {
15
- @each $key, $new-value in $override-style-map {
16
- $old-value: map-get($state-style-map, $key);
17
- @if ($old-value != null) {
18
- $new-value: map-merge($old-value, $new-value);
19
- }
20
- $result: map-merge(
21
- $result,
22
- (
23
- $key: $new-value,
24
- )
25
- );
26
- }
27
- }
28
-
29
- @return $result;
30
- }
31
-
32
- @function cx-get-state-rule($state-style-map, $key, $rule, $default: null) {
33
- $result: map-get(map-get($state-style-map, $key), $rule);
34
- @if ($result != null) {
35
- @return $result;
36
- }
37
- @return $default;
38
- }
1
+ @mixin cx-add-rules($styles) {
2
+ @each $rule, $value in $styles {
3
+ #{$rule}: $value;
4
+ }
5
+ }
6
+
7
+ @mixin cx-add-state-rules($state-style-map, $key) {
8
+ @include cx-add-rules(map-get($state-style-map, $key));
9
+ }
10
+
11
+ @function cx-merge-state-style-maps($state-style-map, $override-style-map) {
12
+ $result: $state-style-map;
13
+
14
+ @if ($override-style-map != null) {
15
+ @each $key, $new-value in $override-style-map {
16
+ $old-value: map-get($state-style-map, $key);
17
+ @if ($old-value != null) {
18
+ $new-value: map-merge($old-value, $new-value);
19
+ }
20
+ $result: map-merge(
21
+ $result,
22
+ (
23
+ $key: $new-value,
24
+ )
25
+ );
26
+ }
27
+ }
28
+
29
+ @return $result;
30
+ }
31
+
32
+ @function cx-get-state-rule($state-style-map, $key, $rule, $default: null) {
33
+ $result: map-get(map-get($state-style-map, $key), $rule);
34
+ @if ($result != null) {
35
+ @return $result;
36
+ }
37
+ @return $default;
38
+ }
@@ -1,37 +1,37 @@
1
- @mixin cx-cxcredit($name: "cxcredit", $besm: $cx-besm) {
2
- $block: map-get($besm, block);
3
- $element: map-get($besm, element);
4
- $state: map-get($besm, state);
5
- $mod: map-get($besm, mod);
6
-
7
- .#{$block}#{$name} {
8
- width: 50px;
9
- height: 50px;
10
- opacity: 0.5;
11
- transition: opacity 0.3s ease-in-out;
12
- background: rgba(255, 255, 255, 0.1);
13
- cursor: pointer;
14
- position: fixed;
15
- bottom: 20px;
16
- right: 20px;
17
-
18
- &:hover {
19
- opacity: 1;
20
- }
21
-
22
- &.#{$mod}inline {
23
- position: relative;
24
- bottom: auto;
25
- right: auto;
26
- }
27
- }
28
-
29
- .#{$element}#{$name}-icon {
30
- width: 100%;
31
- height: 100%;
32
- }
33
- }
34
-
35
- @if (cx-should-include("cx/widgets/CxCredit")) {
36
- @include cx-cxcredit();
37
- }
1
+ @mixin cx-cxcredit($name: "cxcredit", $besm: $cx-besm) {
2
+ $block: map-get($besm, block);
3
+ $element: map-get($besm, element);
4
+ $state: map-get($besm, state);
5
+ $mod: map-get($besm, mod);
6
+
7
+ .#{$block}#{$name} {
8
+ width: 50px;
9
+ height: 50px;
10
+ opacity: 0.5;
11
+ transition: opacity 0.3s ease-in-out;
12
+ background: rgba(255, 255, 255, 0.1);
13
+ cursor: pointer;
14
+ position: fixed;
15
+ bottom: 20px;
16
+ right: 20px;
17
+
18
+ &:hover {
19
+ opacity: 1;
20
+ }
21
+
22
+ &.#{$mod}inline {
23
+ position: relative;
24
+ bottom: auto;
25
+ right: auto;
26
+ }
27
+ }
28
+
29
+ .#{$element}#{$name}-icon {
30
+ width: 100%;
31
+ height: 100%;
32
+ }
33
+ }
34
+
35
+ @if (cx-should-include("cx/widgets/CxCredit")) {
36
+ @include cx-cxcredit();
37
+ }
@@ -1,36 +1,36 @@
1
- import { Widget } from "../ui/Widget";
2
- import { VDOM } from "../ui/VDOM";
3
- import { getSearchQueryHighlighter } from "../util/getSearchQueryPredicate";
4
-
5
- export class HighlightedSearchText extends Widget {
6
- declareData(...args) {
7
- super.declareData(...args, {
8
- text: undefined,
9
- chunks: undefined,
10
- query: undefined,
11
- });
12
- }
13
-
14
- render(context, instance, key) {
15
- let { data } = instance;
16
- let { text, chunks, query, classNames, style } = data;
17
-
18
- if (!chunks && text && query) {
19
- let highlighter = getSearchQueryHighlighter(query, { cache: true });
20
- chunks = highlighter(text);
21
- }
22
-
23
- if (!chunks) return text;
24
- return chunks.map((text, i) => {
25
- if (i % 2 == 0) return text;
26
- return (
27
- <span key={`${key}-${i}`} className={classNames} style={style}>
28
- {text}
29
- </span>
30
- );
31
- });
32
- }
33
- }
34
-
35
- HighlightedSearchText.prototype.styled = true;
36
- HighlightedSearchText.prototype.baseClass = "highlightedsearchtext";
1
+ import { Widget } from "../ui/Widget";
2
+ import { VDOM } from "../ui/VDOM";
3
+ import { getSearchQueryHighlighter } from "../util/getSearchQueryPredicate";
4
+
5
+ export class HighlightedSearchText extends Widget {
6
+ declareData(...args) {
7
+ super.declareData(...args, {
8
+ text: undefined,
9
+ chunks: undefined,
10
+ query: undefined,
11
+ });
12
+ }
13
+
14
+ render(context, instance, key) {
15
+ let { data } = instance;
16
+ let { text, chunks, query, classNames, style } = data;
17
+
18
+ if (!chunks && text && query) {
19
+ let highlighter = getSearchQueryHighlighter(query, { cache: true });
20
+ chunks = highlighter(text);
21
+ }
22
+
23
+ if (!chunks) return text;
24
+ return chunks.map((text, i) => {
25
+ if (i % 2 == 0) return text;
26
+ return (
27
+ <span key={`${key}-${i}`} className={classNames} style={style}>
28
+ {text}
29
+ </span>
30
+ );
31
+ });
32
+ }
33
+ }
34
+
35
+ HighlightedSearchText.prototype.styled = true;
36
+ HighlightedSearchText.prototype.baseClass = "highlightedsearchtext";
@@ -1,18 +1,18 @@
1
- @mixin cxb-highlightedsearchtext(
2
- $name: "highlightedsearchtext",
3
- $styles: $cx-highlightedsearchtext-style-map,
4
- $besm: $cx-besm
5
- ) {
6
- $block: map-get($besm, block);
7
- $element: map-get($besm, element);
8
- $state: map-get($besm, state);
9
- $mod: map-get($besm, mod);
10
-
11
- .#{$block}#{$name} {
12
- @include cx-add-rules($styles);
13
- }
14
- }
15
-
16
- @if (cx-should-include("cx/widgets/HighlightedSearchText")) {
17
- @include cxb-highlightedsearchtext();
18
- }
1
+ @mixin cxb-highlightedsearchtext(
2
+ $name: "highlightedsearchtext",
3
+ $styles: $cx-highlightedsearchtext-style-map,
4
+ $besm: $cx-besm
5
+ ) {
6
+ $block: map-get($besm, block);
7
+ $element: map-get($besm, element);
8
+ $state: map-get($besm, state);
9
+ $mod: map-get($besm, mod);
10
+
11
+ .#{$block}#{$name} {
12
+ @include cx-add-rules($styles);
13
+ }
14
+ }
15
+
16
+ @if (cx-should-include("cx/widgets/HighlightedSearchText")) {
17
+ @include cxb-highlightedsearchtext();
18
+ }
@@ -1,91 +1,91 @@
1
- @mixin cx-list($name: "list", $besm: $cx-besm) {
2
- $block: map-get($besm, block);
3
- $element: map-get($besm, element);
4
- $state: map-get($besm, state);
5
- $mod: map-get($besm, mod);
6
-
7
- .#{$block}#{$name} {
8
- list-style: none;
9
- margin: 0;
10
- padding: 0;
11
- overflow: auto;
12
- border: 0 solid $cx-default-border-color;
13
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
14
-
15
- @include cx-add-state-rules($cx-list, default);
16
-
17
- &:hover {
18
- @include cx-add-state-rules($cx-list, hover);
19
- }
20
-
21
- &.#{$state}focused {
22
- @include cx-add-state-rules($cx-list, focus);
23
- }
24
-
25
- &.#{$mod}bordered {
26
- border-width: 1px;
27
-
28
- & > .#{$element}#{$name}-item:not(:first-child) {
29
- border-top-width: 1px;
30
- }
31
- }
32
- }
33
-
34
- .#{$element}#{$name}-item {
35
- margin: 0;
36
- border: 0 solid $cx-default-border-color;
37
-
38
- @include cx-add-state-rules($cx-list-item, default);
39
-
40
- &.#{$state}pad {
41
- padding: $cx-default-list-item-padding;
42
- }
43
-
44
- .#{$state}selectable > & {
45
- cursor: pointer;
46
- }
47
-
48
- &:hover {
49
- @include cx-add-state-rules($cx-list-item, hover);
50
- }
51
-
52
- &.#{$state}cursor {
53
- @include cx-add-state-rules($cx-list-item, hover);
54
-
55
- .#{$block}#{$name}.#{$state}focused > &,
56
- .#{$block}#{$name}:focus > & {
57
- @include cx-add-state-rules($cx-list-item, cursor);
58
-
59
- &:active {
60
- @include cx-add-state-rules($cx-list-item, active);
61
- }
62
- }
63
- }
64
-
65
- &.#{$state}selected {
66
- @include cx-add-state-rules($cx-list-item, selected);
67
-
68
- &.#{$state}cursor {
69
- @include cx-add-state-rules($cx-list-item, selected-hover);
70
-
71
- .#{$block}#{$name}.#{$state}focused > &,
72
- .#{$block}#{$name}:focus > & {
73
- @include cx-add-state-rules($cx-list-item, selected-cursor);
74
- }
75
- }
76
- }
77
-
78
- &.#{$state}disabled {
79
- @include cx-add-state-rules($cx-list-item, disabled);
80
- }
81
- }
82
-
83
- .#{$element}#{$name}-empty-text {
84
- padding: $cx-default-list-item-padding;
85
- color: $cx-default-empty-text-color;
86
- }
87
- }
88
-
89
- @if (cx-should-include("cx/widgets/List")) {
90
- @include cx-list();
91
- }
1
+ @mixin cx-list($name: "list", $besm: $cx-besm) {
2
+ $block: map-get($besm, block);
3
+ $element: map-get($besm, element);
4
+ $state: map-get($besm, state);
5
+ $mod: map-get($besm, mod);
6
+
7
+ .#{$block}#{$name} {
8
+ list-style: none;
9
+ margin: 0;
10
+ padding: 0;
11
+ overflow: auto;
12
+ border: 0 solid $cx-default-border-color;
13
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
14
+
15
+ @include cx-add-state-rules($cx-list, default);
16
+
17
+ &:hover {
18
+ @include cx-add-state-rules($cx-list, hover);
19
+ }
20
+
21
+ &.#{$state}focused {
22
+ @include cx-add-state-rules($cx-list, focus);
23
+ }
24
+
25
+ &.#{$mod}bordered {
26
+ border-width: 1px;
27
+
28
+ & > .#{$element}#{$name}-item:not(:first-child) {
29
+ border-top-width: 1px;
30
+ }
31
+ }
32
+ }
33
+
34
+ .#{$element}#{$name}-item {
35
+ margin: 0;
36
+ border: 0 solid $cx-default-border-color;
37
+
38
+ @include cx-add-state-rules($cx-list-item, default);
39
+
40
+ &.#{$state}pad {
41
+ padding: $cx-default-list-item-padding;
42
+ }
43
+
44
+ .#{$state}selectable > & {
45
+ cursor: pointer;
46
+ }
47
+
48
+ &:hover {
49
+ @include cx-add-state-rules($cx-list-item, hover);
50
+ }
51
+
52
+ &.#{$state}cursor {
53
+ @include cx-add-state-rules($cx-list-item, hover);
54
+
55
+ .#{$block}#{$name}.#{$state}focused > &,
56
+ .#{$block}#{$name}:focus > & {
57
+ @include cx-add-state-rules($cx-list-item, cursor);
58
+
59
+ &:active {
60
+ @include cx-add-state-rules($cx-list-item, active);
61
+ }
62
+ }
63
+ }
64
+
65
+ &.#{$state}selected {
66
+ @include cx-add-state-rules($cx-list-item, selected);
67
+
68
+ &.#{$state}cursor {
69
+ @include cx-add-state-rules($cx-list-item, selected-hover);
70
+
71
+ .#{$block}#{$name}.#{$state}focused > &,
72
+ .#{$block}#{$name}:focus > & {
73
+ @include cx-add-state-rules($cx-list-item, selected-cursor);
74
+ }
75
+ }
76
+ }
77
+
78
+ &.#{$state}disabled {
79
+ @include cx-add-state-rules($cx-list-item, disabled);
80
+ }
81
+ }
82
+
83
+ .#{$element}#{$name}-empty-text {
84
+ padding: $cx-default-list-item-padding;
85
+ color: $cx-default-empty-text-color;
86
+ }
87
+ }
88
+
89
+ @if (cx-should-include("cx/widgets/List")) {
90
+ @include cx-list();
91
+ }