cx 26.7.4 → 26.7.5

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 (23) hide show
  1. package/build/ui/Cx.d.ts +8 -5
  2. package/build/ui/Cx.d.ts.map +1 -1
  3. package/build/ui/Cx.js +114 -97
  4. package/build/ui/batchUpdates.d.ts +2 -3
  5. package/build/ui/batchUpdates.d.ts.map +1 -1
  6. package/build/ui/batchUpdates.js +11 -7
  7. package/dist/manifest.js +707 -710
  8. package/dist/ui.js +125 -114
  9. package/package.json +1 -1
  10. package/src/ui/Cx.spec.tsx +27 -0
  11. package/src/ui/Cx.tsx +505 -492
  12. package/src/ui/DataProxy.ts +55 -55
  13. package/src/ui/Rescope.ts +50 -50
  14. package/src/ui/batchUpdates.ts +12 -9
  15. package/src/ui/exprHelpers.ts +96 -96
  16. package/src/widgets/Sandbox.ts +104 -104
  17. package/src/widgets/form/ColorField.scss +112 -112
  18. package/src/widgets/form/DateTimeField.scss +111 -111
  19. package/src/widgets/form/LookupField.maps.scss +26 -26
  20. package/src/widgets/form/MonthField.scss +113 -113
  21. package/src/widgets/form/Select.scss +104 -104
  22. package/src/widgets/form/TextField.scss +66 -66
  23. package/src/widgets/nav/MenuItem.tsx +525 -525
package/src/widgets/form/LookupField.maps.scss CHANGED
@@ -1,26 +1,26 @@
1
- @use "../variables" as *;
2
- @use "./Field.maps.scss" as *;
3
- @use "../../util/scss/deep-merge.scss" as *;
4
- @use "../../util/scss/calc.scss" as *;
5
-
6
- $cx-input-tag-state-style-map: (
7
- default: (
8
- font-size: $cx-default-input-tag-font-size,
9
- background-color: $cx-default-input-tag-background-color,
10
- padding: $cx-default-input-tag-padding,
11
- padding-right: cx-calc($cx-default-clear-size, 2px),
12
- border-radius: $cx-default-input-tag-border-radius,
13
- border-width: $cx-default-input-tag-border-width,
14
- border-style: solid,
15
- border-color: $cx-default-input-tag-border-color,
16
- ),
17
- ) !default;
18
-
19
- $cx-input-tag-clear-state-style-map: cx-deep-map-merge(
20
- $cx-clear-state-style-map,
21
- (
22
- default: (
23
- right: cx-multiply($cx-default-input-tag-border-radius, 0.125),
24
- ),
25
- )
26
- ) !default;
1
+ @use "../variables" as *;
2
+ @use "./Field.maps.scss" as *;
3
+ @use "../../util/scss/deep-merge.scss" as *;
4
+ @use "../../util/scss/calc.scss" as *;
5
+
6
+ $cx-input-tag-state-style-map: (
7
+ default: (
8
+ font-size: $cx-default-input-tag-font-size,
9
+ background-color: $cx-default-input-tag-background-color,
10
+ padding: $cx-default-input-tag-padding,
11
+ padding-right: cx-calc($cx-default-clear-size, 2px),
12
+ border-radius: $cx-default-input-tag-border-radius,
13
+ border-width: $cx-default-input-tag-border-width,
14
+ border-style: solid,
15
+ border-color: $cx-default-input-tag-border-color,
16
+ ),
17
+ ) !default;
18
+
19
+ $cx-input-tag-clear-state-style-map: cx-deep-map-merge(
20
+ $cx-clear-state-style-map,
21
+ (
22
+ default: (
23
+ right: cx-multiply($cx-default-input-tag-border-radius, 0.125),
24
+ ),
25
+ )
26
+ ) !default;
package/src/widgets/form/MonthField.scss CHANGED
@@ -1,113 +1,113 @@
1
- @use "sass:math";
2
- @use "sass:map";
3
- @use "../variables" as *;
4
- @use "../maps" as *;
5
- @use "../../util/scss/add-rules.scss" as *;
6
- @use "../../util/scss/calc.scss" as *;
7
- @use "../../util/scss/clockwise.scss" as *;
8
- @use "../../util/scss/deep-merge.scss" as *;
9
- @use "../../util/scss/besm.scss" as *;
10
- @use "../../util/scss/include.scss" as *;
11
- @use "./Field.scss" as *;
12
-
13
- @mixin cx-monthfield(
14
- $name: "monthfield",
15
- $state-style-map: $cx-std-field-state-style-map,
16
- $placeholder: $cx-input-placeholder,
17
- $empty-text: $cx-empty-text,
18
- $clear-state-style-map: $cx-clear-state-style-map,
19
- $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
20
- $right-icon-state-style-map: $cx-input-right-icon-state-style-map,
21
- $icon-size: $cx-default-input-icon-size,
22
- $width: $cx-default-input-width,
23
- $besm: $cx-besm
24
- ) {
25
- $block: map.get($besm, block);
26
- $element: map.get($besm, element);
27
- $state: map.get($besm, state);
28
-
29
- .#{$block}#{$name} {
30
- @include cxb-field($besm, $state-style-map, $width: $width);
31
- }
32
-
33
- $padding: cx-get-state-rule($state-style-map, default, "padding");
34
-
35
- .#{$element}#{$name}-input {
36
- @include cxe-field-input(
37
- $besm,
38
- $state-style-map,
39
- $placeholder: $placeholder,
40
- $overrides: (
41
- default: (
42
- padding: cx-top($padding) cx-calc(cx-top($padding), $cx-default-clear-size, $cx-default-clear-spacing)
43
- cx-bottom($padding)
44
- cx-calc(cx-top($padding), $cx-default-input-left-tool-size, $cx-default-input-left-tool-spacing),
45
- )
46
- )
47
- );
48
- }
49
-
50
- .#{$element}#{$name}-clear {
51
- @include cxe-field-button($besm, $clear-state-style-map);
52
-
53
- .#{$state}focus > & {
54
- @include cx-add-state-rules($clear-state-style-map, focus);
55
- }
56
- .#{$state}error > & {
57
- @include cx-add-state-rules($clear-state-style-map, error);
58
- }
59
- }
60
-
61
- .#{$element}#{$name}-left-icon {
62
- @include cxe-field-button(
63
- $besm,
64
- cx-deep-map-merge(
65
- $left-icon-state-style-map,
66
- (
67
- default: (
68
- cursor: pointer,
69
- ),
70
- )
71
- )
72
- );
73
-
74
- .#{$state}disabled > & {
75
- @include cx-add-state-rules($state-style-map, disabled);
76
- border-width: 0;
77
- }
78
-
79
- .#{$state}focus > & {
80
- @include cx-add-state-rules($left-icon-state-style-map, focus);
81
- }
82
- .#{$state}error > & {
83
- @include cx-add-state-rules($left-icon-state-style-map, error);
84
- }
85
- }
86
-
87
- .#{$element}#{$name}-right-icon {
88
- @include cxe-field-button($besm, $right-icon-state-style-map);
89
-
90
- .#{$state}disabled > & {
91
- @include cx-add-state-rules($state-style-map, disabled);
92
- border-width: 0;
93
- }
94
- .#{$state}focus > & {
95
- @include cx-add-state-rules($right-icon-state-style-map, focus);
96
- }
97
- .#{$state}error > & {
98
- @include cx-add-state-rules($right-icon-state-style-map, error);
99
- }
100
- }
101
-
102
- .#{$element}#{$name}-icon {
103
- @include cxe-field-button-icon($besm, $icon-size);
104
- }
105
-
106
- .#{$element}#{$name}-empty-text {
107
- @include cxe-field-empty-text($empty-text);
108
- }
109
- }
110
-
111
- @if (cx-should-include("cx/widgets/MonthField")) {
112
- @include cx-monthfield();
113
- }
1
+ @use "sass:math";
2
+ @use "sass:map";
3
+ @use "../variables" as *;
4
+ @use "../maps" as *;
5
+ @use "../../util/scss/add-rules.scss" as *;
6
+ @use "../../util/scss/calc.scss" as *;
7
+ @use "../../util/scss/clockwise.scss" as *;
8
+ @use "../../util/scss/deep-merge.scss" as *;
9
+ @use "../../util/scss/besm.scss" as *;
10
+ @use "../../util/scss/include.scss" as *;
11
+ @use "./Field.scss" as *;
12
+
13
+ @mixin cx-monthfield(
14
+ $name: "monthfield",
15
+ $state-style-map: $cx-std-field-state-style-map,
16
+ $placeholder: $cx-input-placeholder,
17
+ $empty-text: $cx-empty-text,
18
+ $clear-state-style-map: $cx-clear-state-style-map,
19
+ $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
20
+ $right-icon-state-style-map: $cx-input-right-icon-state-style-map,
21
+ $icon-size: $cx-default-input-icon-size,
22
+ $width: $cx-default-input-width,
23
+ $besm: $cx-besm
24
+ ) {
25
+ $block: map.get($besm, block);
26
+ $element: map.get($besm, element);
27
+ $state: map.get($besm, state);
28
+
29
+ .#{$block}#{$name} {
30
+ @include cxb-field($besm, $state-style-map, $width: $width);
31
+ }
32
+
33
+ $padding: cx-get-state-rule($state-style-map, default, "padding");
34
+
35
+ .#{$element}#{$name}-input {
36
+ @include cxe-field-input(
37
+ $besm,
38
+ $state-style-map,
39
+ $placeholder: $placeholder,
40
+ $overrides: (
41
+ default: (
42
+ padding: cx-top($padding) cx-calc(cx-top($padding), $cx-default-clear-size, $cx-default-clear-spacing)
43
+ cx-bottom($padding)
44
+ cx-calc(cx-top($padding), $cx-default-input-left-tool-size, $cx-default-input-left-tool-spacing),
45
+ )
46
+ )
47
+ );
48
+ }
49
+
50
+ .#{$element}#{$name}-clear {
51
+ @include cxe-field-button($besm, $clear-state-style-map);
52
+
53
+ .#{$state}focus > & {
54
+ @include cx-add-state-rules($clear-state-style-map, focus);
55
+ }
56
+ .#{$state}error > & {
57
+ @include cx-add-state-rules($clear-state-style-map, error);
58
+ }
59
+ }
60
+
61
+ .#{$element}#{$name}-left-icon {
62
+ @include cxe-field-button(
63
+ $besm,
64
+ cx-deep-map-merge(
65
+ $left-icon-state-style-map,
66
+ (
67
+ default: (
68
+ cursor: pointer,
69
+ ),
70
+ )
71
+ )
72
+ );
73
+
74
+ .#{$state}disabled > & {
75
+ @include cx-add-state-rules($state-style-map, disabled);
76
+ border-width: 0;
77
+ }
78
+
79
+ .#{$state}focus > & {
80
+ @include cx-add-state-rules($left-icon-state-style-map, focus);
81
+ }
82
+ .#{$state}error > & {
83
+ @include cx-add-state-rules($left-icon-state-style-map, error);
84
+ }
85
+ }
86
+
87
+ .#{$element}#{$name}-right-icon {
88
+ @include cxe-field-button($besm, $right-icon-state-style-map);
89
+
90
+ .#{$state}disabled > & {
91
+ @include cx-add-state-rules($state-style-map, disabled);
92
+ border-width: 0;
93
+ }
94
+ .#{$state}focus > & {
95
+ @include cx-add-state-rules($right-icon-state-style-map, focus);
96
+ }
97
+ .#{$state}error > & {
98
+ @include cx-add-state-rules($right-icon-state-style-map, error);
99
+ }
100
+ }
101
+
102
+ .#{$element}#{$name}-icon {
103
+ @include cxe-field-button-icon($besm, $icon-size);
104
+ }
105
+
106
+ .#{$element}#{$name}-empty-text {
107
+ @include cxe-field-empty-text($empty-text);
108
+ }
109
+ }
110
+
111
+ @if (cx-should-include("cx/widgets/MonthField")) {
112
+ @include cx-monthfield();
113
+ }
package/src/widgets/form/Select.scss CHANGED
@@ -1,104 +1,104 @@
1
- @use "sass:math";
2
- @use "sass:map";
3
- @use "../variables" as *;
4
- @use "../maps" as *;
5
- @use "../../util/scss/add-rules.scss" as *;
6
- @use "../../util/scss/calc.scss" as *;
7
- @use "../../util/scss/clockwise.scss" as *;
8
- @use "../../util/scss/besm.scss" as *;
9
- @use "../../util/scss/include.scss" as *;
10
- @use "./Field.scss" as *;
11
-
12
- @mixin cx-select(
13
- $name: "select",
14
- $state-style-map: $cx-std-field-state-style-map,
15
- $placeholder: $cx-input-placeholder,
16
- $empty-text: $cx-empty-text,
17
- $width: $cx-default-input-width,
18
- $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
19
- $clear-state-style-map: $cx-clear-state-style-map,
20
- $tool-state-style-map: $cx-input-right-icon-state-style-map,
21
- $icon-size: $cx-default-input-icon-size,
22
- $besm: $cx-besm
23
- ) {
24
- $block: map.get($besm, block);
25
- $element: map.get($besm, element);
26
- $state: map.get($besm, state);
27
- $mod: map.get($besm, mod);
28
-
29
- .#{$block}#{$name} {
30
- @include cxb-field($besm, $state-style-map: $state-style-map, $width: $width, $input: true);
31
-
32
- .#{$element}#{$name}-left-icon {
33
- pointer-events: none;
34
- @include cxe-field-button($besm, $left-icon-state-style-map);
35
- }
36
- }
37
-
38
- $padding: cx-get-state-rule($state-style-map, default, "padding");
39
-
40
- .#{$element}#{$name}-select {
41
- @include cxe-field-input(
42
- $besm,
43
- $state-style-map,
44
- $placeholder: $placeholder,
45
- $overrides: (
46
- padding: $cx-default-input-padding-top
47
- calc(#{$cx-default-input-padding-right} + #{$cx-default-clear-size} - #{$cx-default-input-padding-right})
48
- $cx-default-input-padding-bottom $cx-default-input-padding-left,
49
- -webkit-appearance: none,
50
- -moz-appearance: none,
51
- -ms-appearance: none,
52
- appearance: none
53
- )
54
- );
55
-
56
- .#{$state}icon > & {
57
- padding-left: cx-calc(cx-top($padding), $cx-default-input-left-tool-size, $cx-default-input-left-tool-spacing);
58
- }
59
-
60
- .#{$state}empty > & {
61
- @include cx-add-rules($placeholder);
62
- }
63
-
64
- &::-ms-expand {
65
- display: none;
66
- margin: 0;
67
- padding: 0;
68
- }
69
-
70
- option {
71
- background-color: $cx-default-dropdown-background-color;
72
- color: cx-get-state-rule($state-style-map, default, color);
73
- }
74
- }
75
-
76
- .#{$element}#{$name}-clear {
77
- @include cxe-field-button($besm, $clear-state-style-map);
78
- }
79
-
80
- .#{$element}#{$name}-placeholder {
81
- @include cx-add-rules($placeholder);
82
- }
83
-
84
- .#{$element}#{$name}-tool {
85
- pointer-events: none; //cannot call open-dropdown on native element
86
- @include cxe-field-button($besm, $tool-state-style-map);
87
-
88
- .#{$state}disabled > & {
89
- border-width: 0;
90
- @include cx-add-state-rules($state-style-map, disabled);
91
- }
92
- .#{$state}focus > & {
93
- @include cx-add-state-rules($tool-state-style-map, focus);
94
- }
95
- }
96
-
97
- .#{$element}#{$name}-icon {
98
- @include cxe-field-button-icon($besm, $icon-size);
99
- }
100
- }
101
-
102
- @if (cx-should-include("cx/widgets/Select")) {
103
- @include cx-select;
104
- }
1
+ @use "sass:math";
2
+ @use "sass:map";
3
+ @use "../variables" as *;
4
+ @use "../maps" as *;
5
+ @use "../../util/scss/add-rules.scss" as *;
6
+ @use "../../util/scss/calc.scss" as *;
7
+ @use "../../util/scss/clockwise.scss" as *;
8
+ @use "../../util/scss/besm.scss" as *;
9
+ @use "../../util/scss/include.scss" as *;
10
+ @use "./Field.scss" as *;
11
+
12
+ @mixin cx-select(
13
+ $name: "select",
14
+ $state-style-map: $cx-std-field-state-style-map,
15
+ $placeholder: $cx-input-placeholder,
16
+ $empty-text: $cx-empty-text,
17
+ $width: $cx-default-input-width,
18
+ $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
19
+ $clear-state-style-map: $cx-clear-state-style-map,
20
+ $tool-state-style-map: $cx-input-right-icon-state-style-map,
21
+ $icon-size: $cx-default-input-icon-size,
22
+ $besm: $cx-besm
23
+ ) {
24
+ $block: map.get($besm, block);
25
+ $element: map.get($besm, element);
26
+ $state: map.get($besm, state);
27
+ $mod: map.get($besm, mod);
28
+
29
+ .#{$block}#{$name} {
30
+ @include cxb-field($besm, $state-style-map: $state-style-map, $width: $width, $input: true);
31
+
32
+ .#{$element}#{$name}-left-icon {
33
+ pointer-events: none;
34
+ @include cxe-field-button($besm, $left-icon-state-style-map);
35
+ }
36
+ }
37
+
38
+ $padding: cx-get-state-rule($state-style-map, default, "padding");
39
+
40
+ .#{$element}#{$name}-select {
41
+ @include cxe-field-input(
42
+ $besm,
43
+ $state-style-map,
44
+ $placeholder: $placeholder,
45
+ $overrides: (
46
+ padding: $cx-default-input-padding-top
47
+ calc(#{$cx-default-input-padding-right} + #{$cx-default-clear-size} - #{$cx-default-input-padding-right})
48
+ $cx-default-input-padding-bottom $cx-default-input-padding-left,
49
+ -webkit-appearance: none,
50
+ -moz-appearance: none,
51
+ -ms-appearance: none,
52
+ appearance: none
53
+ )
54
+ );
55
+
56
+ .#{$state}icon > & {
57
+ padding-left: cx-calc(cx-top($padding), $cx-default-input-left-tool-size, $cx-default-input-left-tool-spacing);
58
+ }
59
+
60
+ .#{$state}empty > & {
61
+ @include cx-add-rules($placeholder);
62
+ }
63
+
64
+ &::-ms-expand {
65
+ display: none;
66
+ margin: 0;
67
+ padding: 0;
68
+ }
69
+
70
+ option {
71
+ background-color: $cx-default-dropdown-background-color;
72
+ color: cx-get-state-rule($state-style-map, default, color);
73
+ }
74
+ }
75
+
76
+ .#{$element}#{$name}-clear {
77
+ @include cxe-field-button($besm, $clear-state-style-map);
78
+ }
79
+
80
+ .#{$element}#{$name}-placeholder {
81
+ @include cx-add-rules($placeholder);
82
+ }
83
+
84
+ .#{$element}#{$name}-tool {
85
+ pointer-events: none; //cannot call open-dropdown on native element
86
+ @include cxe-field-button($besm, $tool-state-style-map);
87
+
88
+ .#{$state}disabled > & {
89
+ border-width: 0;
90
+ @include cx-add-state-rules($state-style-map, disabled);
91
+ }
92
+ .#{$state}focus > & {
93
+ @include cx-add-state-rules($tool-state-style-map, focus);
94
+ }
95
+ }
96
+
97
+ .#{$element}#{$name}-icon {
98
+ @include cxe-field-button-icon($besm, $icon-size);
99
+ }
100
+ }
101
+
102
+ @if (cx-should-include("cx/widgets/Select")) {
103
+ @include cx-select;
104
+ }
package/src/widgets/form/TextField.scss CHANGED
@@ -1,66 +1,66 @@
1
- @use "sass:math";
2
- @use "sass:map";
3
- @use "../variables" as *;
4
- @use "../maps" as *;
5
- @use "../../util/scss/add-rules.scss" as *;
6
- @use "../../util/scss/calc.scss" as *;
7
- @use "../../util/scss/clockwise.scss" as *;
8
- @use "../../util/scss/besm.scss" as *;
9
- @use "../../util/scss/include.scss" as *;
10
- @use "./Field.scss" as *;
11
-
12
- @mixin cx-textfield(
13
- $name: "textfield",
14
- $state-style-map: $cx-std-field-state-style-map,
15
- $placeholder: $cx-input-placeholder,
16
- $empty-text: $cx-empty-text,
17
- $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
18
- $clear-state-style-map: $cx-clear-state-style-map,
19
- $icon-size: $cx-default-input-icon-size,
20
- $width: $cx-default-input-width,
21
- $besm: $cx-besm
22
- ) {
23
- $block: map.get($besm, block);
24
- $element: map.get($besm, element);
25
- $state: map.get($besm, state);
26
- $mod: map.get($besm, mod);
27
-
28
- .#{$block}#{$name} {
29
- @include cxb-field($besm, $state-style-map, $width: $width, $input: true);
30
- }
31
-
32
- $padding: cx-get-state-rule($state-style-map, default, "padding");
33
-
34
- .#{$element}#{$name}-input {
35
- @include cxe-field-input($besm, $state-style-map, $placeholder: $placeholder);
36
-
37
- .#{$state}icon > & {
38
- padding-left: cx-calc(cx-top($padding), $cx-default-input-left-tool-size, $cx-default-input-left-tool-spacing);
39
- }
40
-
41
- .#{$state}clear > & {
42
- padding-right: cx-calc(cx-top($padding), $cx-default-clear-size, $cx-default-clear-spacing);
43
- }
44
- }
45
-
46
- .#{$element}#{$name}-left-icon {
47
- pointer-events: none;
48
- @include cxe-field-button($besm, $left-icon-state-style-map);
49
- }
50
-
51
- .#{$element}#{$name}-clear {
52
- @include cxe-field-button($besm, $clear-state-style-map);
53
- }
54
-
55
- .#{$element}#{$name}-icon {
56
- @include cxe-field-button-icon($besm, $icon-size);
57
- }
58
-
59
- .#{$element}#{$name}-empty-text {
60
- @include cxe-field-empty-text($empty-text);
61
- }
62
- }
63
-
64
- @if (cx-should-include("cx/widgets/TextField")) {
65
- @include cx-textfield();
66
- }
1
+ @use "sass:math";
2
+ @use "sass:map";
3
+ @use "../variables" as *;
4
+ @use "../maps" as *;
5
+ @use "../../util/scss/add-rules.scss" as *;
6
+ @use "../../util/scss/calc.scss" as *;
7
+ @use "../../util/scss/clockwise.scss" as *;
8
+ @use "../../util/scss/besm.scss" as *;
9
+ @use "../../util/scss/include.scss" as *;
10
+ @use "./Field.scss" as *;
11
+
12
+ @mixin cx-textfield(
13
+ $name: "textfield",
14
+ $state-style-map: $cx-std-field-state-style-map,
15
+ $placeholder: $cx-input-placeholder,
16
+ $empty-text: $cx-empty-text,
17
+ $left-icon-state-style-map: $cx-input-left-icon-state-style-map,
18
+ $clear-state-style-map: $cx-clear-state-style-map,
19
+ $icon-size: $cx-default-input-icon-size,
20
+ $width: $cx-default-input-width,
21
+ $besm: $cx-besm
22
+ ) {
23
+ $block: map.get($besm, block);
24
+ $element: map.get($besm, element);
25
+ $state: map.get($besm, state);
26
+ $mod: map.get($besm, mod);
27
+
28
+ .#{$block}#{$name} {
29
+ @include cxb-field($besm, $state-style-map, $width: $width, $input: true);
30
+ }
31
+
32
+ $padding: cx-get-state-rule($state-style-map, default, "padding");
33
+
34
+ .#{$element}#{$name}-input {
35
+ @include cxe-field-input($besm, $state-style-map, $placeholder: $placeholder);
36
+
37
+ .#{$state}icon > & {
38
+ padding-left: cx-calc(cx-top($padding), $cx-default-input-left-tool-size, $cx-default-input-left-tool-spacing);
39
+ }
40
+
41
+ .#{$state}clear > & {
42
+ padding-right: cx-calc(cx-top($padding), $cx-default-clear-size, $cx-default-clear-spacing);
43
+ }
44
+ }
45
+
46
+ .#{$element}#{$name}-left-icon {
47
+ pointer-events: none;
48
+ @include cxe-field-button($besm, $left-icon-state-style-map);
49
+ }
50
+
51
+ .#{$element}#{$name}-clear {
52
+ @include cxe-field-button($besm, $clear-state-style-map);
53
+ }
54
+
55
+ .#{$element}#{$name}-icon {
56
+ @include cxe-field-button-icon($besm, $icon-size);
57
+ }
58
+
59
+ .#{$element}#{$name}-empty-text {
60
+ @include cxe-field-empty-text($empty-text);
61
+ }
62
+ }
63
+
64
+ @if (cx-should-include("cx/widgets/TextField")) {
65
+ @include cx-textfield();
66
+ }