@ptsecurity/mosaic 17.0.0 → 17.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (201) hide show
  1. package/autocomplete/_autocomplete-theme.scss +2 -1
  2. package/autocomplete/autocomplete-trigger.directive.d.ts +7 -1
  3. package/autocomplete/autocomplete.scss +7 -11
  4. package/button/_button-base.scss +10 -10
  5. package/button/_button-theme.scss +32 -32
  6. package/button/button.scss +9 -15
  7. package/button-toggle/_button-toggle-theme.scss +32 -24
  8. package/button-toggle/button-toggle.scss +18 -57
  9. package/card/_card-theme.scss +23 -20
  10. package/card/card.component.scss +2 -1
  11. package/checkbox/_checkbox-theme.scss +33 -29
  12. package/checkbox/checkbox.scss +7 -6
  13. package/code-block/_code-block-theme.scss +201 -113
  14. package/code-block/actionbar.component.scss +5 -7
  15. package/code-block/code-block.scss +5 -6
  16. package/core/forms/_forms-theme.scss +17 -46
  17. package/core/option/_optgroup-theme.scss +5 -5
  18. package/core/option/_option-action-theme.scss +1 -4
  19. package/core/option/_option-theme.scss +8 -10
  20. package/core/option/option.scss +5 -4
  21. package/core/pop-up/pop-up-trigger.d.ts +3 -1
  22. package/core/styles/_mosaic-theme.scss +3 -3
  23. package/core/styles/common/_popup.scss +4 -3
  24. package/core/styles/common/_tokens.scss +39 -0
  25. package/core/styles/theming/_alerts.scss +16 -24
  26. package/core/styles/theming/_badges.scss +7 -8
  27. package/core/styles/theming/_components-theming.scss +4 -2
  28. package/core/styles/theming/_scrollbars.scss +17 -2
  29. package/datepicker/_datepicker-theme.scss +18 -19
  30. package/datepicker/calendar-body.scss +6 -9
  31. package/datepicker/calendar-header.scss +9 -26
  32. package/datepicker/calendar.scss +5 -16
  33. package/datepicker/datepicker-content.scss +2 -4
  34. package/datepicker/datepicker-input.scss +2 -1
  35. package/datepicker/datepicker-toggle.scss +3 -2
  36. package/divider/_divider-theme.scss +4 -2
  37. package/divider/divider.scss +5 -4
  38. package/dl/_dl-theme.scss +12 -36
  39. package/dl/dl.scss +13 -46
  40. package/dropdown/_dropdown-theme.scss +19 -17
  41. package/dropdown/dropdown-item.scss +7 -6
  42. package/dropdown/dropdown.scss +11 -26
  43. package/ellipsis-center/ellipsis-center.directive.d.ts +3 -2
  44. package/esm2022/autocomplete/autocomplete-trigger.directive.mjs +14 -2
  45. package/esm2022/button/button.component.mjs +2 -2
  46. package/esm2022/code-block/actionbar.component.mjs +2 -2
  47. package/esm2022/code-block/code-block.component.mjs +2 -2
  48. package/esm2022/core/pop-up/pop-up-trigger.mjs +19 -11
  49. package/esm2022/core/version.mjs +2 -2
  50. package/esm2022/dropdown/dropdown-item.component.mjs +2 -2
  51. package/esm2022/dropdown/dropdown.component.mjs +3 -3
  52. package/esm2022/ellipsis-center/ellipsis-center.directive.mjs +7 -5
  53. package/esm2022/file-upload/file-upload.module.mjs +8 -4
  54. package/esm2022/file-upload/multiple-file-upload.component.mjs +15 -34
  55. package/esm2022/file-upload/single-file-upload.component.mjs +15 -34
  56. package/esm2022/form-field/form-field.mjs +2 -2
  57. package/esm2022/input/input-password.mjs +2 -3
  58. package/esm2022/loader-overlay/loader-overlay.component.mjs +2 -2
  59. package/esm2022/markdown/markdown.component.mjs +2 -2
  60. package/esm2022/modal/modal.component.mjs +6 -6
  61. package/esm2022/navbar/navbar-item.component.mjs +9 -9
  62. package/esm2022/progress-spinner/progress-spinner.component.mjs +2 -2
  63. package/esm2022/radio/radio.component.mjs +2 -2
  64. package/esm2022/select/select-option.directive.mjs +7 -5
  65. package/esm2022/select/select.component.mjs +16 -9
  66. package/esm2022/tabs/tab-header.component.mjs +2 -2
  67. package/esm2022/tabs/tab-nav-bar/tab-nav-bar.mjs +2 -2
  68. package/esm2022/tags/tag-input.mjs +28 -8
  69. package/esm2022/timezone/timezone-option.directive.mjs +7 -5
  70. package/esm2022/timezone/timezone-select.component.mjs +2 -2
  71. package/esm2022/title/title.directive.mjs +2 -3
  72. package/esm2022/tooltip/tooltip.component.mjs +27 -12
  73. package/esm2022/tree-select/tree-select.component.mjs +21 -8
  74. package/fesm2022/ptsecurity-mosaic-autocomplete.mjs +13 -1
  75. package/fesm2022/ptsecurity-mosaic-autocomplete.mjs.map +1 -1
  76. package/fesm2022/ptsecurity-mosaic-button.mjs +2 -2
  77. package/fesm2022/ptsecurity-mosaic-button.mjs.map +1 -1
  78. package/fesm2022/ptsecurity-mosaic-code-block.mjs +4 -4
  79. package/fesm2022/ptsecurity-mosaic-code-block.mjs.map +1 -1
  80. package/fesm2022/ptsecurity-mosaic-core.mjs +19 -11
  81. package/fesm2022/ptsecurity-mosaic-core.mjs.map +1 -1
  82. package/fesm2022/ptsecurity-mosaic-dropdown.mjs +4 -4
  83. package/fesm2022/ptsecurity-mosaic-dropdown.mjs.map +1 -1
  84. package/fesm2022/ptsecurity-mosaic-ellipsis-center.mjs +5 -4
  85. package/fesm2022/ptsecurity-mosaic-ellipsis-center.mjs.map +1 -1
  86. package/fesm2022/ptsecurity-mosaic-file-upload.mjs +26 -58
  87. package/fesm2022/ptsecurity-mosaic-file-upload.mjs.map +1 -1
  88. package/fesm2022/ptsecurity-mosaic-form-field.mjs +2 -2
  89. package/fesm2022/ptsecurity-mosaic-form-field.mjs.map +1 -1
  90. package/fesm2022/ptsecurity-mosaic-input.mjs +1 -2
  91. package/fesm2022/ptsecurity-mosaic-input.mjs.map +1 -1
  92. package/fesm2022/ptsecurity-mosaic-loader-overlay.mjs +2 -2
  93. package/fesm2022/ptsecurity-mosaic-loader-overlay.mjs.map +1 -1
  94. package/fesm2022/ptsecurity-mosaic-markdown.mjs +2 -2
  95. package/fesm2022/ptsecurity-mosaic-markdown.mjs.map +1 -1
  96. package/fesm2022/ptsecurity-mosaic-modal.mjs +5 -5
  97. package/fesm2022/ptsecurity-mosaic-modal.mjs.map +1 -1
  98. package/fesm2022/ptsecurity-mosaic-navbar.mjs +8 -8
  99. package/fesm2022/ptsecurity-mosaic-navbar.mjs.map +1 -1
  100. package/fesm2022/ptsecurity-mosaic-progress-spinner.mjs +1 -1
  101. package/fesm2022/ptsecurity-mosaic-progress-spinner.mjs.map +1 -1
  102. package/fesm2022/ptsecurity-mosaic-radio.mjs +2 -2
  103. package/fesm2022/ptsecurity-mosaic-radio.mjs.map +1 -1
  104. package/fesm2022/ptsecurity-mosaic-select.mjs +25 -17
  105. package/fesm2022/ptsecurity-mosaic-select.mjs.map +1 -1
  106. package/fesm2022/ptsecurity-mosaic-tabs.mjs +4 -4
  107. package/fesm2022/ptsecurity-mosaic-tabs.mjs.map +1 -1
  108. package/fesm2022/ptsecurity-mosaic-tags.mjs +26 -7
  109. package/fesm2022/ptsecurity-mosaic-tags.mjs.map +1 -1
  110. package/fesm2022/ptsecurity-mosaic-timezone.mjs +7 -6
  111. package/fesm2022/ptsecurity-mosaic-timezone.mjs.map +1 -1
  112. package/fesm2022/ptsecurity-mosaic-title.mjs +1 -2
  113. package/fesm2022/ptsecurity-mosaic-title.mjs.map +1 -1
  114. package/fesm2022/ptsecurity-mosaic-tooltip.mjs +25 -11
  115. package/fesm2022/ptsecurity-mosaic-tooltip.mjs.map +1 -1
  116. package/fesm2022/ptsecurity-mosaic-tree-select.mjs +20 -7
  117. package/fesm2022/ptsecurity-mosaic-tree-select.mjs.map +1 -1
  118. package/file-upload/_file-upload-theme.scss +87 -54
  119. package/file-upload/file-upload.module.d.ts +2 -1
  120. package/file-upload/file-upload.scss +0 -15
  121. package/file-upload/multiple-file-upload.component.d.ts +4 -12
  122. package/file-upload/multiple-file-upload.component.scss +58 -54
  123. package/file-upload/single-file-upload.component.d.ts +4 -12
  124. package/file-upload/single-file-upload.component.scss +15 -24
  125. package/form-field/_form-field-theme.scss +43 -34
  126. package/form-field/form-field.scss +14 -13
  127. package/icon/_icon-theme.scss +26 -25
  128. package/input/_input-base.scss +3 -2
  129. package/input/_input-theme.scss +14 -14
  130. package/input/input-password.d.ts +0 -1
  131. package/input/input.scss +3 -4
  132. package/link/_link-theme.scss +36 -32
  133. package/list/_list-base.scss +4 -3
  134. package/list/_list-theme.scss +8 -8
  135. package/list/list.scss +2 -1
  136. package/loader-overlay/_loader-overlay-theme.scss +8 -8
  137. package/loader-overlay/loader-overlay.scss +7 -12
  138. package/markdown/_markdown-theme.scss +61 -43
  139. package/markdown/markdown.scss +39 -80
  140. package/modal/_modal-confirm.scss +3 -2
  141. package/modal/_modal-theme.scss +20 -21
  142. package/modal/modal.scss +18 -15
  143. package/navbar/_navbar-theme.scss +19 -18
  144. package/navbar/navbar-brand.scss +7 -9
  145. package/navbar/navbar-item.component.d.ts +4 -4
  146. package/navbar/navbar-item.scss +8 -7
  147. package/navbar/vertical-navbar.scss +4 -12
  148. package/package.json +25 -25
  149. package/popover/_popover-theme.scss +35 -35
  150. package/popover/popover.scss +15 -14
  151. package/prebuilt-themes/dark-theme.css +1 -1
  152. package/prebuilt-themes/default-theme.css +1 -1
  153. package/progress-bar/_progress-bar-theme.scss +6 -5
  154. package/progress-bar/progress-bar.scss +2 -1
  155. package/progress-spinner/_progress-spinner-theme.scss +4 -3
  156. package/progress-spinner/progress-spinner.scss +7 -12
  157. package/radio/_radio-theme.scss +32 -24
  158. package/radio/radio.scss +8 -11
  159. package/select/_select-theme.scss +13 -13
  160. package/select/select-option.directive.d.ts +3 -2
  161. package/select/select.component.d.ts +1 -0
  162. package/select/select.scss +19 -42
  163. package/sidepanel/_sidepanel-theme.scss +9 -9
  164. package/sidepanel/sidepanel.scss +11 -10
  165. package/splitter/_splitter-theme.scss +5 -3
  166. package/table/_table-theme.scss +9 -9
  167. package/table/table.scss +11 -14
  168. package/tabs/_tabs-common.scss +15 -14
  169. package/tabs/_tabs-theme.scss +67 -55
  170. package/tabs/tab-group.scss +2 -1
  171. package/tabs/tab-header.scss +16 -3
  172. package/tabs/tab-nav-bar/tab-nav-bar.scss +15 -2
  173. package/tags/_tag-theme.scss +30 -27
  174. package/tags/tag-input.d.ts +9 -4
  175. package/tags/tag-list.scss +4 -3
  176. package/tags/tag.scss +9 -8
  177. package/textarea/_textarea-base.scss +2 -4
  178. package/textarea/_textarea-theme.scss +8 -8
  179. package/textarea/textarea.scss +2 -4
  180. package/timepicker/timepicker.scss +2 -7
  181. package/timezone/_timezone-option-theme.scss +7 -7
  182. package/timezone/timezone-option.component.scss +5 -4
  183. package/timezone/timezone-option.directive.d.ts +3 -2
  184. package/title/title.directive.d.ts +0 -1
  185. package/toast/_toast-theme.scss +13 -16
  186. package/toast/toast-container.component.scss +2 -5
  187. package/toast/toast.component.scss +15 -17
  188. package/toggle/_toggle-theme.scss +22 -21
  189. package/toggle/toggle.scss +19 -21
  190. package/tooltip/_tooltip-theme.scss +26 -31
  191. package/tooltip/tooltip.component.d.ts +12 -8
  192. package/tooltip/tooltip.scss +13 -17
  193. package/tree/_tree-theme.scss +8 -8
  194. package/tree/toggle.scss +3 -5
  195. package/tree/tree-option.scss +5 -4
  196. package/tree-select/_tree-select-theme.scss +9 -9
  197. package/tree-select/tree-select.component.d.ts +1 -0
  198. package/tree-select/tree-select.scss +17 -35
  199. package/_theming.scss +0 -10827
  200. package/_visual.scss +0 -3541
  201. package/prebuilt-visual/default-visual.css +0 -1
@@ -1,6 +1,7 @@
1
1
  @use 'sass:map';
2
2
 
3
3
  @use '../core/styles/theming/theming' as *;
4
+ @use '../core/styles/common/tokens' as *;
4
5
 
5
6
 
6
7
  @mixin mc-progress-bar-theme($theme) {
@@ -8,21 +9,21 @@
8
9
  $secondary: map.get($theme, secondary);
9
10
  $error: map.get($theme, error);
10
11
 
11
- $progress-bar: map.get(map.get($theme, components), progress-bar);
12
+ $progress-bar: map-get(map-get($theme, components), progress-bar);
12
13
 
13
14
  .mc-progress-bar {
14
- background-color: map.get($progress-bar, background);
15
+ background-color: mc-css-variable(progress-bar-background, map-get($progress-bar, background));
15
16
 
16
17
  &.mc-primary .mc-progress-bar__line {
17
- background-color: mc-color($primary);
18
+ background-color: mc-css-variable(primary-default, map-get($primary, default));
18
19
  }
19
20
 
20
21
  &.mc-secondary .mc-progress-bar__line {
21
- background-color: mc-color($secondary);
22
+ background-color: mc-css-variable(secondary-default, map-get($secondary, default));
22
23
  }
23
24
 
24
25
  &.mc-error .mc-progress-bar__line {
25
- background-color: mc-color($error);
26
+ background-color: mc-css-variable(error-default, map-get($error, default));
26
27
  }
27
28
  }
28
29
  }
@@ -4,6 +4,7 @@
4
4
  @use '../core/styles/functions/timing';
5
5
 
6
6
  @use '../core/styles/tokens';
7
+ @use '../core/styles/common/tokens' as *;
7
8
 
8
9
 
9
10
  $tokens: meta.module-variables(tokens) !default;
@@ -20,7 +21,7 @@ $tokens: meta.module-variables(tokens) !default;
20
21
 
21
22
  .mc-progress-bar {
22
23
  display: block;
23
- height: var(--mc-progress-bar-size-height, map.get($tokens, progress-bar-size-height));
24
+ height: mc-css-variable(progress-bar-size-height);
24
25
  overflow: hidden;
25
26
 
26
27
  &__inner {
@@ -1,6 +1,7 @@
1
1
  @use 'sass:map';
2
2
 
3
3
  @use '../core/styles/theming/theming' as *;
4
+ @use '../core/styles/common/tokens' as *;
4
5
 
5
6
 
6
7
  @mixin mc-progress-spinner-theme($theme) {
@@ -10,15 +11,15 @@
10
11
 
11
12
  .mc-progress-spinner {
12
13
  &.mc-primary .mc-progress-spinner__circle {
13
- stroke: mc-color($primary);
14
+ stroke: mc-css-variable(primary-default, map-get($primary, default));
14
15
  }
15
16
 
16
17
  &.mc-secondary .mc-progress-spinner__circle {
17
- stroke: mc-color($secondary);
18
+ stroke: mc-css-variable(secondary-default, map-get($secondary, default));
18
19
  }
19
20
 
20
21
  &.mc-error .mc-progress-spinner__circle {
21
- stroke: mc-color($error);
22
+ stroke: mc-css-variable(error-default, map-get($error, default));
22
23
  }
23
24
  }
24
25
  }
@@ -4,6 +4,7 @@
4
4
  @use '../core/styles/functions/timing';
5
5
 
6
6
  @use '../core/styles/tokens';
7
+ @use '../core/styles/common/tokens' as *;
7
8
 
8
9
 
9
10
  $tokens: meta.module-variables(tokens) !default;
@@ -18,31 +19,25 @@ $tokens: meta.module-variables(tokens) !default;
18
19
  display: inline-block;
19
20
  overflow: hidden;
20
21
 
21
- width: var(--mc-progress-spinner-size-default-size, map.get($tokens, progress-spinner-size-default-size));
22
- height: var(--mc-progress-spinner-size-default-size, map.get($tokens, progress-spinner-size-default-size));
22
+ width: mc-css-variable(progress-spinner-size-default-size);
23
+ height: mc-css-variable(progress-spinner-size-default-size);
23
24
  }
24
25
 
25
26
  .mc-progress-spinner__circle {
26
27
  fill: none;
27
28
  stroke: black;
28
29
  stroke-dasharray: 295%;
29
- stroke-width: var(
30
- --mc-progress-spinner-size-default-svg-stroke-width,
31
- map.get($tokens, progress-spinner-size-default-svg-stroke-width)
32
- );
30
+ stroke-width: mc-css-variable(progress-spinner-size-default-svg-stroke-width);
33
31
  transition: stroke-dashoffset 0.3s;
34
32
  transform-origin: center center;
35
33
  }
36
34
 
37
35
  .mc-progress-spinner_large {
38
- width: var(--mc-progress-spinner-size-large-size, map.get($tokens, progress-spinner-size-large-size));
39
- height: var(--mc-progress-spinner-size-large-size, map.get($tokens, progress-spinner-size-large-size));
36
+ width: mc-css-variable(progress-spinner-size-large-size);
37
+ height: mc-css-variable(progress-spinner-size-large-size);
40
38
 
41
39
  & .mc-progress-spinner__circle {
42
- stroke-width: var(
43
- --mc-progress-spinner-size-large-svg-stroke-width,
44
- map.get($tokens, progress-spinner-size-large-svg-stroke-width)
45
- );
40
+ stroke-width: mc-css-variable(progress-spinner-size-large-svg-stroke-width);
46
41
  }
47
42
  }
48
43
 
@@ -1,6 +1,8 @@
1
1
  @use 'sass:map';
2
2
 
3
3
  @use '../core/styles/typography/typography-utils' as *;
4
+ @use '../core/styles/common/tokens' as *;
5
+
4
6
 
5
7
  @mixin mc-radio-theme($theme) {
6
8
  $foreground: map.get($theme, foreground);
@@ -9,81 +11,89 @@
9
11
  $radio: map.get(map.get($theme, components), radio);
10
12
 
11
13
  .mc-radio-group {
12
- color: map.get($foreground, text);
14
+ color: mc-css-variable(foreground-text, map-get($foreground, text));
13
15
  }
14
16
 
15
17
  .mc-radio-button {
16
18
  & .mc-hint {
17
- color: map-get($foreground, text-less-contrast);
19
+ color: mc-css-variable(foreground-text-less-contrast, map-get($foreground, text-less-contrast));
18
20
  }
19
21
 
20
22
  & .mc-radio-button__outer-circle {
21
- border-color: map.get($radio, outer-circle_border);
22
- background: map.get($background, background);
23
+ border-color: mc-css-variable(outer-circle_border, map-get($radio, outer-circle_border));
24
+ background: mc-css-variable(background-background, map-get($background, background));
23
25
  }
24
26
 
25
27
  & .mc-radio-button__inner-circle {
26
- border-color: map.get($radio, inner-circle_border);
28
+ border-color: mc-css-variable(inner-circle_border, map-get($radio, inner-circle_border));
27
29
  }
28
30
 
29
31
  &:hover {
30
32
  & .mc-radio-button__outer-circle {
31
- background: map.get($background, overlay-hover);
33
+ background: mc-css-variable(background-overlay-hover, map-get($background, overlay-hover));
32
34
  }
33
35
  }
34
36
 
35
37
  &.cdk-keyboard-focused {
36
38
  & .mc-radio-button__outer-circle {
37
- border-color: map.get($radio, outer-circle_focused-state_border);
38
- box-shadow: map.get($radio, outer-circle_focused-state_shadow);
39
- background: map.get($background, background);
39
+ border-color: mc-css-variable(
40
+ outer-circle_focused-state_border, map-get($radio, outer-circle_focused-state_border));
41
+ box-shadow: mc-css-variable(
42
+ outer-circle_focused-state_shadow, map-get($radio, outer-circle_focused-state_shadow));
43
+ background: mc-css-variable(background-background, map-get($background, background));
40
44
  }
41
45
 
42
46
  & .mc-radio-button__inner-circle {
43
- box-shadow: map.get($radio, inner-circle_focused-state_shadow);
47
+ box-shadow: mc-css-variable(
48
+ inner-circle_focused-state_shadow, map-get($radio, inner-circle_focused-state_shadow));
44
49
  }
45
50
  }
46
51
 
47
52
  &.mc-disabled {
48
- color: map.get($foreground, text-disabled);
53
+ color: mc-css-variable(foreground-text-disabled, map-get($foreground, text-disabled));
49
54
 
50
55
  & .mc-radio-label {
51
56
  cursor: default;
52
57
  }
53
58
 
54
59
  & .mc-radio-button__outer-circle {
55
- border-color: map.get($foreground, border);
56
- background: map.get($background, background-disabled);
60
+ border-color: mc-css-variable(foreground-border, map-get($foreground, border));
61
+ background: mc-css-variable(background-background-disabled, map-get($background, background-disabled));
57
62
  }
58
63
 
59
64
  & .mc-radio-button__inner-circle {
60
- border-color: map.get($background, background-disabled);
61
- background: map.get($background, background-disabled);
65
+ border-color: mc-css-variable(
66
+ background-background-disabled, map-get($background, background-disabled));
67
+ background: mc-css-variable(background-background-disabled, map-get($background, background-disabled));
62
68
 
63
69
  & .mc-radio-button__inner-circle-cap {
64
- background: map.get($background, background-disabled);
70
+ background: mc-css-variable(
71
+ background-background-disabled, map-get($background, background-disabled));
65
72
  }
66
73
  }
67
74
 
68
75
  &.mc-selected {
69
76
  & .mc-radio-button__inner-circle-cap {
70
- background: map.get($foreground, border);
77
+ background: mc-css-variable(foreground-border, map-get($foreground, border));
71
78
  }
72
79
  }
73
80
  }
74
81
 
75
82
  &.mc-selected:not(.mc-disabled) {
76
83
  & .mc-radio-button__outer-circle {
77
- border-color: map.get($radio, outer-circle_checked-state_border);
78
- background: map.get($radio, inner-circle_checked-state_border);
84
+ border-color: mc-css-variable(
85
+ outer-circle_checked-state_border, map-get($radio, outer-circle_checked-state_border));
86
+ background: mc-css-variable(
87
+ inner-circle_checked-state_border, map-get($radio, inner-circle_checked-state_border));
79
88
  }
80
89
 
81
90
  & .mc-radio-button__inner-circle {
82
91
  display: flex;
83
- background-color: map.get($radio, inner-circle_checked-state_border);
92
+ background-color: mc-css-variable(
93
+ inner-circle_checked-state_border, map-get($radio, inner-circle_checked-state_border));
84
94
 
85
95
  & .mc-radio-button__inner-circle-cap {
86
- background: map.get($radio, cap-color);
96
+ background: mc-css-variable(cap-color, map-get($radio, cap-color));
87
97
  }
88
98
  }
89
99
  }
@@ -91,9 +101,7 @@
91
101
  }
92
102
 
93
103
  @mixin mc-radio-typography($config) {
94
- $tokens: map.get($config, tokens);
95
-
96
104
  .mc-radio-group {
97
- @include mc-typography-level-to-styles($config, map.get($tokens, radio-font-default));
105
+ @include mc-typography-css-variables(radio, default);
98
106
  }
99
107
  }
package/radio/radio.scss CHANGED
@@ -2,6 +2,7 @@
2
2
  @use 'sass:map';
3
3
 
4
4
  @use '../core/styles/tokens';
5
+ @use '../core/styles/common/tokens' as *;
5
6
 
6
7
 
7
8
  $tokens: meta.module-variables(tokens) !default;
@@ -55,8 +56,8 @@ $tokens: meta.module-variables(tokens) !default;
55
56
  left: 0;
56
57
  top: 2px;
57
58
 
58
- width: var(--mc-radio-size-outer-size, map.get($tokens, radio-size-outer-size));
59
- height: var(--mc-radio-size-outer-size, map.get($tokens, radio-size-outer-size));
59
+ width: mc-css-variable(radio-size-outer-size);
60
+ height: mc-css-variable(radio-size-outer-size);
60
61
 
61
62
  border: {
62
63
  width: 1px;
@@ -67,8 +68,8 @@ $tokens: meta.module-variables(tokens) !default;
67
68
  position: relative;
68
69
  margin: auto;
69
70
 
70
- width: var(--mc-radio-size-inner-size, map.get($tokens, radio-size-inner-size));
71
- height: var(--mc-radio-size-inner-size, map.get($tokens, radio-size-inner-size));
71
+ width: mc-css-variable(radio-size-inner-size);
72
+ height: mc-css-variable(radio-size-inner-size);
72
73
 
73
74
  border: {
74
75
  width: 1px;
@@ -77,8 +78,8 @@ $tokens: meta.module-variables(tokens) !default;
77
78
  .mc-radio-button__inner-circle-cap {
78
79
  margin: auto;
79
80
 
80
- width: var(--mc-radio-size-cap-size, map.get($tokens, radio-size-cap-size));
81
- height: var(--mc-radio-size-cap-size, map.get($tokens, radio-size-cap-size));
81
+ width: mc-css-variable(radio-size-cap-size);
82
+ height: mc-css-variable(radio-size-cap-size);
82
83
 
83
84
  border-radius: 50%;
84
85
  }
@@ -88,17 +89,13 @@ $tokens: meta.module-variables(tokens) !default;
88
89
  display: flex;
89
90
  flex-direction: column;
90
91
 
91
- & .mc-radio__text {
92
-
93
- }
94
-
95
92
  & .mc-hint {
96
93
  margin-top: 2px;
97
94
  }
98
95
  }
99
96
 
100
97
  [dir='rtl'] & {
101
- padding-right: var(--mc-radio-size-padding, map.get($tokens, radio-size-label-margin));
98
+ padding-right: mc-css-variable(radio-size-label-margin);
102
99
  padding-left: 0;
103
100
  }
104
101
  }
@@ -4,6 +4,8 @@
4
4
  @use '../core/styles/common/popup' as *;
5
5
  @use '../core/styles/theming/theming' as *;
6
6
  @use '../core/styles/typography/typography-utils' as *;
7
+ @use '../core/styles/common/tokens' as *;
8
+
7
9
 
8
10
  @mixin mc-select-theme($theme) {
9
11
  $foreground: map.get($theme, foreground);
@@ -14,47 +16,45 @@
14
16
  $list: map-get(map-get($theme, components), list);
15
17
 
16
18
  .mc-select {
17
- color: map.get($foreground, text);
19
+ color: mc-css-variable(foreground-text, map-get($foreground, text));
18
20
 
19
21
  &.ng-invalid {
20
- color: mc-color($error);
22
+ color: mc-css-variable(error-default, map-get($error, default));
21
23
  }
22
24
 
23
25
  &.mc-disabled {
24
- color: map.get($foreground, text-disabled);
26
+ color: mc-css-variable(foreground-text-disabled, map-get($foreground, text-disabled));
25
27
  }
26
28
  }
27
29
 
28
30
  .mc-select__placeholder {
29
- color: map.get($foreground, text-disabled);
31
+ color: mc-css-variable(foreground-text-disabled, map-get($foreground, text-disabled));
30
32
  }
31
33
 
32
34
  .mc-select__panel {
33
35
  @include popup-params($theme);
34
36
 
35
- & > .mc-select__footer {
36
- background: map.get($list, footer-background);
37
- border-top-color: map.get($list, footer-divider);
37
+ & .mc-select__footer {
38
+ background: mc-css-variable(list-footer-background, map-get($list, footer-background));
39
+ border-top-color: mc-css-variable(list-footer-divider, map-get($list, footer-divider));
38
40
  }
39
41
  }
40
42
 
41
43
  .mc-select__search-container {
42
- border-bottom-color: map.get($popup, border);
44
+ border-bottom-color: mc-css-variable(popup-border, map-get($popup, border));
43
45
  }
44
46
 
45
47
  .mc-select__no-options-message {
46
- color: map.get($foreground, text-less-contrast);
48
+ color: mc-css-variable(foreground-text-less-contrast, map-get($foreground, text-less-contrast));
47
49
  }
48
50
  }
49
51
 
50
52
  @mixin mc-select-typography($config) {
51
- $tokens: map.get($config, tokens);
52
-
53
53
  .mc-select {
54
- @include mc-typography-level-to-styles($config, map.get($tokens, select-font-default));
54
+ @include mc-typography-css-variables(select, default);
55
55
  }
56
56
 
57
57
  .mc-select__panel {
58
- @include mc-typography-level-to-styles($config, map.get($tokens, select-panel-font-default));
58
+ @include mc-typography-css-variables(select-panel, default);
59
59
  }
60
60
  }
@@ -1,3 +1,4 @@
1
+ import { FocusMonitor } from '@angular/cdk/a11y';
1
2
  import { Directionality } from '@angular/cdk/bidi';
2
3
  import { Overlay, ScrollDispatcher } from '@angular/cdk/overlay';
3
4
  import { AfterViewInit, ElementRef, NgZone, OnDestroy, ViewContainerRef } from '@angular/core';
@@ -10,13 +11,13 @@ export declare class McOptionTooltip extends McTooltipTrigger implements AfterVi
10
11
  private mutationObserver;
11
12
  get textElement(): HTMLElement;
12
13
  get isOverflown(): boolean;
13
- constructor(option: McOption, overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality);
14
+ constructor(option: McOption, overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality, focusMonitor: FocusMonitor);
14
15
  ngAfterViewInit(): void;
15
16
  ngOnDestroy(): void;
16
17
  onMouseEnter(): void;
17
18
  onMouseLeave(): void;
18
19
  onFocus(): void;
19
20
  onBlur(): void;
20
- static ɵfac: i0.ɵɵFactoryDeclaration<McOptionTooltip, [null, null, null, null, null, null, null, { optional: true; }]>;
21
+ static ɵfac: i0.ɵɵFactoryDeclaration<McOptionTooltip, [null, null, null, null, null, null, null, { optional: true; }, null]>;
21
22
  static ɵdir: i0.ɵɵDirectiveDeclaration<McOptionTooltip, "mc-option", never, {}, {}, never, never, false, never>;
22
23
  }
@@ -189,6 +189,7 @@ export declare class McSelect extends McSelectMixinBase implements AfterContentI
189
189
  get triggerValue(): string;
190
190
  get triggerValues(): McOptionBase[];
191
191
  get empty(): boolean;
192
+ get firstSelected(): McOptionBase | null;
192
193
  private closeSubscription;
193
194
  /** The scroll position of the overlay panel, calculated to center the selected option. */
194
195
  private scrollTop;
@@ -4,6 +4,7 @@
4
4
  @use '../core/styles/common/vendor-prefixes';
5
5
 
6
6
  @use '../core/styles/tokens';
7
+ @use '../core/styles/common/tokens' as *;
7
8
 
8
9
 
9
10
  $tokens: meta.module-variables(tokens) !default;
@@ -62,14 +63,8 @@ $tokens: meta.module-variables(tokens) !default;
62
63
  cursor: pointer;
63
64
 
64
65
  & .mc-select__matcher {
65
- padding-left: calc(
66
- var(--mc-select-size-left-padding, #{map.get($tokens, select-size-left-padding)}) -
67
- var(--mc-form-field-size-border-width, #{map.get($tokens, form-field-size-border-width)})
68
- );
69
- padding-right: calc(
70
- var(--mc-select-size-right-padding, #{map.get($tokens, select-size-right-padding)}) -
71
- var(--mc-form-field-size-border-width, #{map.get($tokens, form-field-size-border-width)})
72
- );
66
+ padding-left: mc-css-variable(select-size-left-padding);
67
+ padding-right: mc-css-variable(select-size-right-padding);
73
68
  }
74
69
 
75
70
  &.mc-select__trigger_multiple {
@@ -78,13 +73,7 @@ $tokens: meta.module-variables(tokens) !default;
78
73
  display: flex;
79
74
  }
80
75
 
81
- $select-size-left-padding-multiple: map.get($tokens, select-size-left-padding-multiple);
82
- $form-field-size-border-width: map.get($tokens, form-field-size-border-width);
83
-
84
- padding-left: calc(
85
- var(--mc-select-size-left-padding-multiple, #{$select-size-left-padding-multiple}) -
86
- var(--mc-form-field-size-border-width, #{$form-field-size-border-width})
87
- );
76
+ padding-left: mc-css-variable(select-size-left-padding-multiple);
88
77
 
89
78
  & .mc-tag.mc-disabled .mc-tag__text {
90
79
  margin-right: 7px;
@@ -111,15 +100,15 @@ $tokens: meta.module-variables(tokens) !default;
111
100
  position: relative;
112
101
 
113
102
  max-width: 100%;
114
- height: var(--mc-option-size-height, map.get($tokens, option-size-height));
103
+ height: mc-css-variable(option-size-height);
115
104
 
116
105
  cursor: default;
117
106
  outline: none;
118
107
 
119
- padding-left: var(--mc-option-size-horizontal-padding, map.get($tokens, option-size-horizontal-padding));
120
- padding-right: var(--mc-option-size-horizontal-padding, map.get($tokens, option-size-horizontal-padding));
108
+ padding-left: mc-css-variable(option-size-horizontal-padding);
109
+ padding-right: mc-css-variable(option-size-horizontal-padding);
121
110
 
122
- border: var(--mc-option-size-border-width, map.get($tokens, option-size-border-width)) solid transparent;
111
+ border: mc-css-variable(option-size-border-width) solid transparent;
123
112
  }
124
113
 
125
114
  .mc-select__match-list {
@@ -127,13 +116,8 @@ $tokens: meta.module-variables(tokens) !default;
127
116
  flex-wrap: wrap;
128
117
  overflow: hidden;
129
118
 
130
- max-height: calc(
131
- var(--mc-form-field-size-height, map.get($tokens, form-field-size-height)) - 4px
132
- );
133
-
134
- height: calc(
135
- var(--mc-form-field-size-height, map.get($tokens, form-field-size-height)) - 4px
136
- );
119
+ max-height: calc(var(--mc-form-field-size-height, map.get($tokens, form-field-size-height)) - 4px);
120
+ height: calc(var(--mc-form-field-size-height, map.get($tokens, form-field-size-height)) - 4px);
137
121
 
138
122
  & .mc-tag {
139
123
  margin-right: 4px;
@@ -158,28 +142,24 @@ $tokens: meta.module-variables(tokens) !default;
158
142
 
159
143
  .mc-select__panel {
160
144
  min-width: 100%; // prevents some animation twitching and test inconsistencies in IE11
161
- max-width: var(--mc-select-panel-size-max-width, map.get($tokens, select-panel-size-max-width));
145
+ max-width: mc-css-variable(select-panel-size-max-width);
162
146
 
163
147
  overflow: hidden;
164
148
 
165
149
  border: {
166
- width: var(--mc-select-panel-size-border-width, map.get($tokens, select-panel-size-border-width));
150
+ width: mc-css-variable(select-panel-size-border-width);
167
151
  style: solid;
168
152
  }
169
153
 
170
- border-bottom-left-radius: var(
171
- --mc-select-panel-size-border-radius, map.get($tokens, select-panel-size-border-radius)
172
- );
173
- border-bottom-right-radius: var(
174
- --mc-select-panel-size-border-radius, map.get($tokens, select-panel-size-border-radius)
175
- );
154
+ border-bottom-left-radius: mc-css-variable(select-panel-size-border-radius);
155
+ border-bottom-right-radius: mc-css-variable(select-panel-size-border-radius);
176
156
 
177
157
  // Override optgroup and option to scale based on font-size of the trigger.
178
158
  .mc-optgroup-label,
179
159
  .mc-option {
180
160
  font-size: inherit;
181
- line-height: var(--mc-option-size-height, map.get($tokens, option-size-height));
182
- height: var(--mc-option-size-height, map.get($tokens, option-size-height));
161
+ line-height: mc-css-variable(option-size-height);
162
+ height: mc-css-variable(option-size-height);
183
163
  }
184
164
 
185
165
  & .mc-select__footer {
@@ -189,16 +169,13 @@ $tokens: meta.module-variables(tokens) !default;
189
169
  padding: map.get($tokens, size-xxs) map.get($tokens, size-m);
190
170
  border-top-width: 1px;
191
171
  border-top-style: solid;
192
- min-height: var(
193
- --mc-list-size-footer-min-height,
194
- map.get($tokens, list-size-footer-min-height)
195
- );
172
+ min-height: mc-css-variable(list-size-footer-min-height);
196
173
  }
197
174
  }
198
175
 
199
176
  .mc-select__content {
200
- max-height: var(--mc-select-panel-size-max-height, map.get($tokens, select-panel-size-max-height));
201
- padding: var(--mc-select-panel-size-vertical-padding, map.get($tokens, select-panel-size-vertical-padding)) 0;
177
+ max-height: mc-css-variable(select-panel-size-max-height);
178
+ padding: mc-css-variable(select-panel-size-vertical-padding) 0;
202
179
  overflow: hidden auto;
203
180
 
204
181
  &:not(:has(> .mc-select__no-options-message)) .cdk-virtual-scroll-viewport {
@@ -2,6 +2,8 @@
2
2
  @use 'sass:map';
3
3
 
4
4
  @use '../core/styles/typography/typography-utils' as *;
5
+ @use '../core/styles/common/tokens' as *;
6
+
5
7
 
6
8
  @mixin mc-sidepanel-theme($theme) {
7
9
  $background: map.get($theme, background);
@@ -10,7 +12,7 @@
10
12
  $popup: map.get(map.get($theme, components), popup);
11
13
 
12
14
  .mc-sidepanel-content {
13
- background-color: map.get($background, background);
15
+ background-color: mc-css-variable(background-background, map-get($background, background));
14
16
  }
15
17
 
16
18
  .mc-sidepanel-container_shadowed {
@@ -40,27 +42,25 @@
40
42
  }
41
43
 
42
44
  .mc-sidepanel-header {
43
- border-bottom: 1px solid map.get($sidepanel, header-border);
45
+ border-bottom: 1px solid mc-css-variable(sidepanel-header-border, map-get($sidepanel, header-border));
44
46
  }
45
47
 
46
48
  .mc-sidepanel-footer {
47
- border-top: 1px solid map.get($sidepanel, footer-border);
48
- background-color: map.get($popup, footer-background);
49
+ border-top: 1px solid mc-css-variable(sidepanel-footer-border, map-get($sidepanel, footer-border));
50
+ background-color: mc-css-variable(popup-footer-background, map-get($popup, footer-background));
49
51
  }
50
52
  }
51
53
 
52
54
  @mixin mc-sidepanel-typography($config) {
53
- $tokens: map.get($config, tokens);
54
-
55
55
  .mc-sidepanel-title {
56
- @include mc-typography-level-to-styles($config, map.get($tokens, sidepanel-header-font-default));
56
+ @include mc-typography-css-variables(sidepanel-header, default);
57
57
  }
58
58
 
59
59
  .mc-sidepanel-container {
60
- @include mc-typography-level-to-styles($config, map.get($tokens, sidepanel-font-default));
60
+ @include mc-typography-css-variables(sidepanel, default);
61
61
  }
62
62
 
63
63
  .mc-sidepanel-footer {
64
- @include mc-typography-level-to-styles($config, map.get($tokens, sidepanel-footer-font-default));
64
+ @include mc-typography-css-variables(sidepanel-footer, default);
65
65
  }
66
66
  }
@@ -4,6 +4,7 @@
4
4
  @use '../core/styles/common';
5
5
 
6
6
  @use '../core/styles/tokens';
7
+ @use '../core/styles/common/tokens' as *;
7
8
 
8
9
 
9
10
  $tokens: meta.module-variables(tokens) !default;
@@ -39,18 +40,18 @@ $tokens: meta.module-variables(tokens) !default;
39
40
  top: 0;
40
41
 
41
42
  &.mc-sidepanel_small {
42
- width: var(--mc-sidepanel-size-small, map.get($tokens, sidepanel-size-small));
43
- max-width: var(--mc-sidepanel-size-small, map.get($tokens, sidepanel-size-small));
43
+ width: mc-css-variable(sidepanel-size-small);
44
+ max-width: mc-css-variable(sidepanel-size-small);
44
45
  }
45
46
 
46
47
  &.mc-sidepanel_medium {
47
- width: var(--mc-sidepanel-size-medium, map.get($tokens, sidepanel-size-medium));
48
- max-width: var(--mc-sidepanel-size-medium, map.get($tokens, sidepanel-size-medium));
48
+ width: mc-css-variable(sidepanel-size-medium);
49
+ max-width: mc-css-variable(sidepanel-size-medium);
49
50
  }
50
51
 
51
52
  &.mc-sidepanel_large {
52
- width: var(--mc-sidepanel-size-large, map.get($tokens, sidepanel-size-large));
53
- max-width: var(--mc-sidepanel-size-large, map.get($tokens, sidepanel-size-large));
53
+ width: mc-css-variable(sidepanel-size-large);
54
+ max-width: mc-css-variable(sidepanel-size-large);
54
55
  }
55
56
 
56
57
  .mc-sidepanel-indent {
@@ -136,7 +137,7 @@ $tokens: meta.module-variables(tokens) !default;
136
137
  flex-flow: row nowrap;
137
138
  flex: 0 0 auto;
138
139
 
139
- height: var(--mc-sidepanel-header-size-height, map.get($tokens, sidepanel-header-size-height));
140
+ height: mc-css-variable(sidepanel-header-size-height);
140
141
 
141
142
  .mc-sidepanel-close {
142
143
  @include common.mc-button-reset();
@@ -159,7 +160,7 @@ $tokens: meta.module-variables(tokens) !default;
159
160
 
160
161
  @include common.mc-truncate-line();
161
162
 
162
- padding: var(--mc-sidepanel-header-size-padding, map.get($tokens, sidepanel-header-size-padding));
163
+ padding: mc-css-variable(sidepanel-header-size-padding);
163
164
  }
164
165
 
165
166
  .mc-sidepanel-body {
@@ -178,9 +179,9 @@ $tokens: meta.module-variables(tokens) !default;
178
179
  flex-flow: row nowrap;
179
180
  flex: 0 0 auto;
180
181
 
181
- height: var(--mc-sidepanel-footer-size-height, map.get($tokens, sidepanel-footer-size-height));
182
+ height: mc-css-variable(sidepanel-footer-size-height);
182
183
 
183
- padding: var(--mc-sidepanel-footer-size-padding, map.get($tokens, sidepanel-footer-size-padding));
184
+ padding: mc-css-variable(sidepanel-footer-size-padding);
184
185
 
185
186
  .mc-sidepanel-actions {
186
187
  display: flex;