@softheon/armature 19.22.0 → 19.23.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 (10) hide show
  1. package/assets/styles/deprecated/_form-field-deprecated.scss +148 -0
  2. package/assets/styles/material-override/_calendar.scss +68 -57
  3. package/assets/styles/material-override/_form-field.scss +159 -106
  4. package/assets/styles/sof-styles-b2b.scss +1 -1
  5. package/assets/styles/sof-styles.scss +2 -1
  6. package/fesm2022/softheon-armature.mjs +5 -7
  7. package/fesm2022/softheon-armature.mjs.map +1 -1
  8. package/lib/base-components/sof-utility-button/sof-utility-button.component.d.ts +0 -2
  9. package/lib/forms/directives/date-input-filter/date-input-filter.directive.d.ts +1 -0
  10. package/package.json +1 -1
package/assets/styles/deprecated/_form-field-deprecated.scss ADDED
@@ -0,0 +1,148 @@
1
+ @use "sass:map";
2
+ @use "../arm-theme" as theme;
3
+ @use "../variables" as vars;
4
+
5
+ // @deprecated ...
6
+ mat-form-field.sof-form-field {
7
+ font-family: var(--sftn-font-family, sans-serif) !important;
8
+
9
+ &.mat-form-field-invalid {
10
+ .mat-mdc-form-field-flex>div.mdc-notched-outline>* {
11
+ border-color: map.get(theme.$arm-error, 500) !important;
12
+ }
13
+
14
+ .mdc-notched-outline__notch {
15
+ border-left: none !important;
16
+ }
17
+
18
+ .mdc-notched-outline__leading,
19
+ .mdc-notched-outline__notch,
20
+ .mdc-notched-outline__trailing {
21
+ border-width: 2px !important;
22
+ }
23
+
24
+ .mat-mdc-floating-label {
25
+ color: map.get(theme.$arm-error, 500) !important;
26
+ font-family: "Poppins" !important;
27
+ }
28
+
29
+ &.mat-focused .mdc-floating-label {
30
+ color: map.get(theme.$arm-error, 500) !important;
31
+ font-family: "Poppins" !important;
32
+ }
33
+ }
34
+
35
+ &.mat-focused {
36
+ font-weight: 400 !important;
37
+
38
+ input,
39
+ span.mat-mdc-select-value-text {
40
+ font-weight: 400 !important;
41
+ }
42
+
43
+ .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,
44
+ .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,
45
+ .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
46
+ border-width: var(--sftn-input-border-width) !important;
47
+ }
48
+ }
49
+
50
+ &.mat-form-field-disabled .mdc-text-field--outlined {
51
+ background-color: vars.$surface-color-level-two-light !important;
52
+ }
53
+
54
+ .mat-mdc-form-field-flex>div.mdc-notched-outline {
55
+ color: map.get(theme.$arm-primary, 500) !important;
56
+ }
57
+
58
+ .mat-mdc-text-field-wrapper {
59
+ padding: 0px !important;
60
+ }
61
+
62
+ .mat-mdc-form-field-flex {
63
+ padding: 0 16px 0 16px !important;
64
+ }
65
+
66
+ .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix {
67
+ top: 0em !important;
68
+ color: map.get(theme.$arm-neutral, 300) !important;
69
+ padding-right: 0.5em !important;
70
+ font-size: var(--sftn-input-icon-font-size) !important;
71
+ }
72
+
73
+ .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix {
74
+ top: 0em !important;
75
+ font-size: var(--sftn-input-icon-font-size) !important;
76
+ color: map.get(theme.$arm-neutral, 300) !important;
77
+
78
+ .error {
79
+ color: map.get(theme.$arm-error, 500) !important;
80
+ }
81
+ }
82
+
83
+ .mat-mdc-form-field-flex div.mdc-notched-outline__leading {
84
+ border-radius: 6px 0 0 6px !important;
85
+ min-width: 6px !important;
86
+ }
87
+
88
+ .mat-mdc-form-field-flex div.mdc-notched-outline__trailing {
89
+ border-radius: 0 6px 6px 0 !important;
90
+ }
91
+
92
+ mat-error {
93
+ font-family: var(--sftn-font-family, sans-serif) !important;
94
+ font-style: normal !important;
95
+ font-weight: 500 !important;
96
+ font-size: 12px !important;
97
+ line-height: 18px !important;
98
+ color: map.get(theme.$arm-error, 500) !important;
99
+ }
100
+
101
+ mat-hint {
102
+ font-family: var(--sftn-font-family, sans-serif) !important;
103
+ font-style: normal !important;
104
+ font-weight: 400 !important;
105
+ font-size: 12px !important;
106
+ line-height: 18px !important;
107
+ }
108
+
109
+ .mat-mdc-floating-label {
110
+ font-family: "Poppins" !important;
111
+ }
112
+
113
+ &.mat-focused .mdc-floating-label {
114
+ color: map.get(theme.$arm-primary, 500) !important;
115
+ font-family: "Poppins" !important;
116
+ }
117
+
118
+ .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,
119
+ .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,
120
+ .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
121
+ border-color: map.get(theme.$arm-primary, 500);
122
+ }
123
+
124
+ .mat-mdc-text-field-wrapper {
125
+ --mat-mdc-form-field-label-offset-x: 0px;
126
+ }
127
+ }
128
+
129
+ // dropdown specific style overrides (⚠️ deprecated in favor of <sof-select> component)
130
+ .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text {
131
+ color: map.get(theme.$arm-primary, 500) !important;
132
+ }
133
+
134
+ .mat-mdc-option .mat-pseudo-checkbox-minimal {
135
+ display: none;
136
+ }
137
+
138
+ .mat-mdc-option .mat-pseudo-checkbox-checked {
139
+ background-color: map.get(theme.$arm-primary, 500) !important;
140
+ }
141
+
142
+ .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow {
143
+ color: map.get(theme.$arm-primary, 500) !important;
144
+ }
145
+
146
+ .mdc-form-field {
147
+ letter-spacing: 0 !important;
148
+ }
package/assets/styles/material-override/_calendar.scss CHANGED
@@ -1,85 +1,96 @@
1
1
  @use "sass:map";
2
2
  @use "../arm-theme" as theme;
3
3
  @use "../variables" as vars;
4
+ @use '@angular/material' as mat;
4
5
 
5
- .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
6
- color: vars.$text-low-emphasis !important;
7
- }
6
+ /*
7
+ This overrides the material calendar only,
8
+ the date picker input styling is in "_form-fields.scss"
9
+ */
10
+ :root {
11
+ @include mat.datepicker-overrides((
12
+ calendar-container-shape: 16px,
13
+ calendar-container-elevation-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.10),
8
14
 
9
- .mat-calendar-previous-button,
10
- .mat-calendar-next-button,
11
- .mat-calendar-period-button {
12
- color: vars.$text-high-emphasis !important;
13
- font-weight: 600 !important;
14
- font-size: 14px !important;
15
- letter-spacing: 0px !important;
16
- }
15
+ calendar-date-selected-state-background-color: map.get(theme.$arm-primary, 500),
16
+ calendar-date-selected-state-text-color: map.get(theme.$arm-primary, contrast, 500),
17
+ calendar-date-selected-disabled-state-background-color: transparent,
17
18
 
18
- .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
19
- background-color: map.get(theme.$arm-primary, 500) !important;
20
- color: vars.$surface-color-default-light;
21
- }
19
+ calendar-date-today-outline-color: map.get(theme.$arm-primary, 500),
20
+ calendar-date-today-selected-state-outline-color: map.get(theme.$arm-primary, 500),
21
+ calendar-date-today-disabled-state-outline-color: vars.$text-low-emphasis,
22
22
 
23
- body .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
24
- color: vars.$surface-color-default-light;
25
- }
23
+ calendar-date-hover-state-background-color: map.get(theme.$arm-neutral, A50),
24
+ calendar-date-focus-state-background-color: map.get(theme.$arm-neutral, A100),
26
25
 
27
- .mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
28
- border: none;
29
- }
26
+ calendar-period-button-text-color: vars.$text-high-emphasis,
27
+ calendar-period-button-icon-color: vars.$text-high-emphasis,
28
+ calendar-navigation-button-icon-color: vars.$text-high-emphasis,
30
29
 
31
- body .mat-calendar-body-today.mat-calendar-body-selected {
32
- box-shadow: none;
33
- }
30
+ calendar-date-text-color: vars.$text-high-emphasis,
31
+ calendar-date-disabled-state-text-color: vars.$text-low-emphasis,
34
32
 
35
- .mat-calendar-body-in-range::before {
36
- background: map.get(theme.$arm-primary, 50) !important;
37
- }
33
+ calendar-text-font: "Poppins",
34
+
35
+ calendar-header-text-color: vars.$text-high-emphasis,
36
+ calendar-container-text-color: vars.$text-high-emphasis,
38
37
 
39
- .mat-calendar-body-selected {
40
- background-color: map.get(theme.$arm-primary, 500) !important;
41
- border: none;
38
+ calendar-text-size: 16px,
39
+ calendar-body-label-text-size: 16px,
40
+ calendar-header-text-size: 16px,
41
+ calendar-period-button-text-size: 14px,
42
+
43
+ calendar-date-in-range-state-background-color: map.get(theme.$arm-primary, 50)
44
+ ));
42
45
  }
43
46
 
44
47
  .mat-datepicker-content {
45
- border-radius: 10px !important;
48
+ display: flex !important;
49
+ width: 360px !important;
50
+ height: 464px !important;
51
+ margin-left: -2px !important;
52
+
53
+ .mat-calendar {
54
+ width: 360px !important;
55
+ }
56
+
57
+ .mat-datepicker-actions {
58
+ padding: 0 12px 12px 12px !important;
59
+ margin-top: auto !important;
60
+ }
46
61
  }
47
62
 
48
- .mat-calendar-previous-button.mat-button-disabled,
49
- .mat-calendar-next-button.mat-button-disabled {
50
- color: vars.$text-low-emphasis !important;
63
+ .mat-calendar-body-cell {
64
+ letter-spacing: 0 !important;
65
+
66
+ &:focus {
67
+ .mat-calendar-body-cell-content {
68
+ outline: 3px solid map.get(theme.$arm-primary, A500);
69
+ outline-offset: 2px;
70
+ }
71
+ }
51
72
  }
52
73
 
53
- .mat-calendar-table-header th {
54
- font-size: 14px !important;
55
- line-height: 30px;
56
- color: vars.$text-medium-emphasis !important;
74
+ .mat-calendar-body-label {
75
+ opacity: 0;
57
76
  }
58
77
 
59
- .mat-calendar-table-header-divider {
60
- position: absolute !important;
61
- left: 20px;
62
- width: -webkit-fill-available;
63
- right: 20px;
78
+ .mat-calendar-body-label[colspan="7"] {
79
+ display: none;
64
80
  }
65
81
 
66
- .sm-full-width-datepicker {
67
- @media only screen and (max-width: vars.$mat-lt-md) {
68
- width: 100%;
82
+ .mat-calendar-period-button {
83
+ font-family: "Poppins" !important;
84
+ letter-spacing: 0 !important;
85
+ border-radius: 18px !important;
69
86
 
70
- .mat-mdc-form-field-infix,
71
- .mat-mdc-form-field-infix>input {
72
- width: 100% !important;
87
+ .mdc-button__label {
88
+ svg {
89
+ margin-left: 10px !important;
73
90
  }
74
91
  }
75
92
  }
76
93
 
77
- .mat-datepicker-toggle-active {
78
- .mdc-icon-button {
79
- color: map.get(theme.$arm-primary, 500) !important;
80
- }
94
+ .mat-calendar-table-header-divider {
95
+ display: none !important;
81
96
  }
82
-
83
- .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
84
- background-color: map.get(theme.$arm-primary, 100) !important;
85
- }
package/assets/styles/material-override/_form-field.scss CHANGED
@@ -1,148 +1,201 @@
1
1
  @use "sass:map";
2
+ @use "@angular/material" as mat;
2
3
  @use "../arm-theme" as theme;
3
4
  @use "../variables" as vars;
4
5
 
5
- mat-form-field.sof-form-field {
6
+
7
+ mat-form-field.sof-form-field-v2 {
6
8
  font-family: var(--sftn-font-family, sans-serif) !important;
9
+ width: 300px;
10
+ min-width: 300px;
11
+ --mat-mdc-form-field-floating-label-scale: 1;
12
+
13
+ @include mat.form-field-overrides((
14
+ container-text-font: "Poppins",
15
+ container-text-tracking: 0px,
16
+ container-height: 40px,
17
+ container-vertical-padding: 0px,
18
+
19
+ outlined-label-text-font: "Poppins",
20
+ outlined-label-text-tracking: 0px,
21
+ outlined-label-text-color: vars.$text-medium-emphasis,
22
+ outlined-hover-label-text-color: vars.$text-medium-emphasis,
23
+ outlined-focus-label-text-color: vars.$text-medium-emphasis,
24
+ outlined-disabled-label-text-color: vars.$text-low-emphasis,
25
+ outlined-error-label-text-color: map.get(theme.$arm-error, 500),
26
+ outlined-error-hover-label-text-color: map.get(theme.$arm-error, 500),
27
+ outlined-error-focus-label-text-color: map.get(theme.$arm-error, 500),
28
+ outlined-label-text-populated-size: 12px,
29
+
30
+ leading-icon-color: vars.$surface-color-inverse-light,
31
+ disabled-leading-icon-color: vars.$text-low-emphasis,
32
+
33
+ outlined-input-text-color: vars.$text-high-emphasis,
34
+ outlined-disabled-input-text-color: vars.$text-low-emphasis,
35
+ outlined-input-text-placeholder-color: vars.$text-medium-emphasis,
36
+ disabled-input-text-placeholder-color: vars.$text-low-emphasis,
37
+ outlined-caret-color: vars.$text-high-emphasis,
38
+ outlined-error-caret-color: map.get(theme.$arm-error, 500),
39
+
40
+ trailing-icon-color: vars.$surface-color-inverse-light,
41
+ disabled-trailing-icon-color: vars.$text-low-emphasis,
42
+ error-trailing-icon-color: map.get(theme.$arm-error, 500),
43
+ error-hover-trailing-icon-color: map.get(theme.$arm-error, 500),
44
+ error-focus-trailing-icon-color: map.get(theme.$arm-error, 500),
45
+
46
+ subscript-text-font: "Poppins",
47
+ subscript-text-tracking: 0px,
48
+ subscript-text-size: 12px,
49
+ subscript-text-line-height: 0,
50
+ error-text-color: map.get(theme.$arm-error, 500)
51
+ ));
7
52
 
8
- &.mat-form-field-invalid {
9
- .mat-mdc-form-field-flex>div.mdc-notched-outline>* {
10
- border-color: map.get(theme.$arm-error, 500) !important;
11
- }
53
+ .mat-mdc-text-field-wrapper {
54
+ padding: 0 12px !important;
55
+ border-radius: 8px !important;
56
+ background-color: vars.$surface-color-level-one-light !important;
57
+ }
12
58
 
13
- .mdc-notched-outline__notch {
14
- border-left: none !important;
59
+ &.white-bg {
60
+ .mat-mdc-text-field-wrapper {
61
+ background: vars.$surface-color-default-light !important;
15
62
  }
63
+ }
16
64
 
17
- .mdc-notched-outline__leading,
18
- .mdc-notched-outline__notch,
19
- .mdc-notched-outline__trailing {
20
- border-width: 2px !important;
21
- }
65
+ .mdc-notched-outline__notch,
66
+ .mdc-notched-outline__trailing {
67
+ border: none !important;
68
+ }
22
69
 
23
- .mat-mdc-floating-label {
24
- color: map.get(theme.$arm-error, 500) !important;
25
- font-family: "Poppins" !important;
26
- }
70
+ .mdc-notched-outline__leading {
71
+ display: none !important;
72
+ }
73
+
74
+ .mat-mdc-form-field-infix {
75
+ display: flex !important;
27
76
 
28
- &.mat-focused .mdc-floating-label {
29
- color: map.get(theme.$arm-error, 500) !important;
30
- font-family: "Poppins" !important;
77
+ .mat-date-range-input {
78
+ display: flex !important;
31
79
  }
32
80
  }
33
81
 
82
+ // focused ...
34
83
  &.mat-focused {
35
- font-weight: 400 !important;
84
+ .mat-mdc-text-field-wrapper {
85
+ outline: 3px solid map.get(theme.$arm-primary, A500);
86
+ outline-offset: 2px;
87
+ }
88
+ }
36
89
 
37
- input,
38
- span.mat-mdc-select-value-text {
39
- font-weight: 400 !important;
90
+ // invalid ...
91
+ &.mat-form-field-invalid {
92
+ .mat-mdc-text-field-wrapper {
93
+ box-shadow: inset 0 0 0 2px map.get(theme.$arm-error, 500) !important;
40
94
  }
41
95
 
42
- .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,
43
- .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,
44
- .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
45
- border-width: var(--sftn-input-border-width) !important;
96
+ .mat-mdc-form-field-icon-prefix {
97
+ i {
98
+ color: map.get(theme.$arm-error, 500) !important;
99
+ }
46
100
  }
47
- }
48
101
 
49
- &.mat-form-field-disabled .mdc-text-field--outlined {
50
- background-color: vars.$surface-color-level-two-light !important;
102
+ &.mat-focused {
103
+ .mat-mdc-text-field-wrapper {
104
+ outline: 3px solid map.get(theme.$arm-error, A500);
105
+ outline-offset: 2px;
106
+ }
107
+ }
51
108
  }
52
109
 
53
- .mat-mdc-form-field-flex>div.mdc-notched-outline {
54
- color: map.get(theme.$arm-primary, 500) !important;
55
- }
110
+ // disabled ...
111
+ &.mat-form-field-disabled {
112
+ .mat-mdc-text-field-wrapper {
113
+ background-color: map.get(theme.$arm-neutral, A50) !important;
114
+ }
56
115
 
57
- .mat-mdc-text-field-wrapper {
58
- padding: 0px !important;
59
- }
116
+ .mat-mdc-form-field-icon-suffix {
117
+ button {
118
+ cursor: default !important;
119
+ i {
120
+ color: vars.$text-low-emphasis !important;
121
+ }
122
+ }
123
+ }
60
124
 
61
- .mat-mdc-form-field-flex {
62
- padding: 0 16px 0 16px !important;
125
+ mat-hint {
126
+ color: vars.$text-low-emphasis !important;
127
+ }
63
128
  }
64
129
 
65
- .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-prefix {
66
- top: 0em !important;
67
- color: map.get(theme.$arm-neutral, 300) !important;
68
- padding-right: 0.5em !important;
69
- font-size: var(--sftn-input-icon-font-size) !important;
130
+ // floating label ...
131
+ .mat-mdc-floating-label {
132
+ line-height: 24px !important;
133
+ top: 50% !important;
134
+ left: 16px !important;
135
+
136
+ &.mdc-floating-label--float-above {
137
+ font-weight: 500 !important;
138
+ top: 4px !important;
139
+ left: 3px !important;
140
+ line-height: 16px !important;
141
+ }
70
142
  }
71
143
 
72
- .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix {
73
- top: 0em !important;
74
- font-size: var(--sftn-input-icon-font-size) !important;
75
- color: map.get(theme.$arm-neutral, 300) !important;
76
-
77
- .error {
78
- color: map.get(theme.$arm-error, 500) !important;
144
+ // icon prefix / suffix
145
+ &.mat-mdc-form-field-has-icon-prefix {
146
+ .mat-mdc-text-field-wrapper {
147
+ --mat-mdc-form-field-label-offset-x: 0px !important;
79
148
  }
80
149
  }
81
150
 
82
- .mat-mdc-form-field-flex div.mdc-notched-outline__leading {
83
- border-radius: 6px 0 0 6px !important;
84
- min-width: 6px !important;
85
- }
151
+ .mat-mdc-form-field-icon-suffix, .mat-mdc-form-field-icon-prefix {
152
+ display: flex;
153
+ gap: 4px;
86
154
 
87
- .mat-mdc-form-field-flex div.mdc-notched-outline__trailing {
88
- border-radius: 0 6px 6px 0 !important;
155
+ i {
156
+ display: flex;
157
+ align-items: center;
158
+ justify-content: center;
159
+ height: 24px;
160
+ width: 24px;
161
+ font-size: 20px;
162
+ }
163
+
164
+ button {
165
+ display: flex;
166
+ align-items: center;
167
+ justify-content: center;
168
+ border: none;
169
+ border-radius: 4px;
170
+ background: none;
171
+ padding: 0;
172
+ height: 24px;
173
+ width: 24px;
174
+ cursor: pointer;
175
+
176
+ i {
177
+ color: vars.$surface-color-inverse-light;
178
+ font-size: 20px;
179
+ }
180
+
181
+ &:focus {
182
+ outline: 3px solid map.get(theme.$arm-primary, A500);
183
+ outline-offset: 2px;
184
+ }
185
+ }
89
186
  }
90
187
 
91
- mat-error {
92
- font-family: var(--sftn-font-family, sans-serif) !important;
93
- font-style: normal !important;
94
- font-weight: 500 !important;
95
- font-size: 12px !important;
96
- line-height: 18px !important;
97
- color: map.get(theme.$arm-error, 500) !important;
188
+ // hint & error messages ...
189
+ .mat-mdc-form-field-hint-wrapper, .mat-mdc-form-field-error-wrapper {
190
+ padding: 0 2px !important;
98
191
  }
99
192
 
100
193
  mat-hint {
101
- font-family: var(--sftn-font-family, sans-serif) !important;
102
- font-style: normal !important;
194
+ color: vars.$text-medium-emphasis !important;
103
195
  font-weight: 400 !important;
104
- font-size: 12px !important;
105
- line-height: 18px !important;
106
196
  }
107
197
 
108
- .mat-mdc-floating-label {
109
- font-family: "Poppins" !important;
110
- }
111
-
112
- &.mat-focused .mdc-floating-label {
113
- color: map.get(theme.$arm-primary, 500) !important;
114
- font-family: "Poppins" !important;
115
- }
116
-
117
- .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,
118
- .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,
119
- .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
120
- border-color: map.get(theme.$arm-primary, 500);
121
- }
122
-
123
- .mat-mdc-text-field-wrapper {
124
- --mat-mdc-form-field-label-offset-x: 0px;
198
+ mat-error {
199
+ font-weight: 500 !important;
125
200
  }
126
201
  }
127
-
128
- // dropdown specific style overrides
129
-
130
- .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text {
131
- color: map.get(theme.$arm-primary, 500) !important;
132
- }
133
-
134
- .mat-mdc-option .mat-pseudo-checkbox-minimal {
135
- display: none;
136
- }
137
-
138
- .mat-mdc-option .mat-pseudo-checkbox-checked {
139
- background-color: map.get(theme.$arm-primary, 500) !important;
140
- }
141
-
142
- .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow {
143
- color: map.get(theme.$arm-primary, 500) !important;
144
- }
145
-
146
- .mdc-form-field {
147
- letter-spacing: 0 !important;
148
- }
package/assets/styles/sof-styles-b2b.scss CHANGED
@@ -40,7 +40,6 @@
40
40
  @use "./material-override/calendar";
41
41
  @use "./material-override/checkbox";
42
42
  @use "./material-override/expansion-panel";
43
- @use "./material-override/form-field";
44
43
  @use "./material-override/menu";
45
44
  @use "./material-override/radio-button";
46
45
  @use "./material-override/slider";
@@ -56,6 +55,7 @@
56
55
  @use "./deprecated/dialog-deprecated"; // replace with "sof-modal" component
57
56
  @use "./deprecated/material-override-deprecated"; // currently no replacement
58
57
  @use "./deprecated/table-deprecated"; // replace with ag-grid table component
58
+ @use "./deprecated/form-field-deprecated";
59
59
 
60
60
  /** The B2B Overrides */
61
61
  @use "./b2b/b2b-spinner";
package/assets/styles/sof-styles.scss CHANGED
@@ -54,8 +54,9 @@
54
54
  @use "./deprecated/button-deprecated"; // replace with "/material-override/button"
55
55
  @use "./deprecated/chip-deprecated"; // replace with "sof-chip" component
56
56
  @use "./deprecated/dialog-deprecated"; // replace with "sof-modal" component
57
- @use "./deprecated/material-override-deprecated"; // currently no replacement
57
+ @use "./deprecated/form-field-deprecated"; // replace with "./material-override/form-field"
58
58
  @use "./deprecated/table-deprecated"; // replace with ag-grid table component
59
+ @use "./deprecated/material-override-deprecated"; // currently no replacement
59
60
 
60
61
  /*
61
62
  @note '@include mat.core();' is deprecated and no longer needed with Angular Material v19+