@softheon/armature 17.17.1 → 17.19.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 (38) hide show
  1. package/README.md +6 -67
  2. package/ag-grid-components/package.json +3 -0
  3. package/assets/styles/{arm-theme.scss → _arm-theme.scss} +1 -0
  4. package/assets/styles/_responsive.scss +85 -0
  5. package/assets/styles/_typography.scss +180 -0
  6. package/assets/styles/_utility.scss +118 -29
  7. package/assets/styles/_variables.scss +2 -1
  8. package/assets/styles/deprecated/_button-deprecated.scss +1123 -0
  9. package/assets/styles/deprecated/_dialog-deprecated.scss +33 -0
  10. package/assets/styles/deprecated/_material-override-deprecated.scss +41 -0
  11. package/assets/styles/deprecated/_table-deprecated.scss +108 -0
  12. package/assets/styles/deprecated/_tooltip-deprecated.scss +93 -0
  13. package/assets/styles/material-override/_button-toggle-group.scss +122 -0
  14. package/assets/styles/material-override/_button.scss +266 -0
  15. package/assets/styles/material-override/_calendar.scss +85 -0
  16. package/assets/styles/material-override/_checkbox.scss +130 -0
  17. package/assets/styles/material-override/_chip.scss +254 -0
  18. package/assets/styles/material-override/_form-field.scss +137 -0
  19. package/assets/styles/material-override/_radio-button.scss +96 -0
  20. package/assets/styles/material-override/_slider.scss +102 -0
  21. package/assets/styles/material-override/_switch.scss +204 -0
  22. package/assets/styles/material-override/_tooltip.scss +2 -0
  23. package/assets/styles/sof-styles.scss +59 -3483
  24. package/esm2022/lib/armature.module.mjs +10 -10
  25. package/esm2022/lib/base-components/sof-image-checkbox/sof-image-checkbox.component.mjs +2 -2
  26. package/esm2022/lib/base-components/sof-modal/sof-modal.component.mjs +6 -3
  27. package/esm2022/lib/base-components/sof-radio-card/sof-radio-card.component.mjs +2 -2
  28. package/esm2022/lib/base-components/sof-utility-button/sof-utility-button.component.mjs +3 -3
  29. package/esm2022/lib/core/services/session.service.mjs +1 -3
  30. package/esm2022/lib/navigation/components/navigation/navigation.component.mjs +2 -2
  31. package/esm2022/lib/theming/theme.module.mjs +2 -2
  32. package/fesm2022/softheon-armature.mjs +23 -22
  33. package/fesm2022/softheon-armature.mjs.map +1 -1
  34. package/lib/armature.module.d.ts +4 -4
  35. package/lib/base-components/sof-modal/sof-modal.component.d.ts +3 -0
  36. package/lib/theming/theme.module.d.ts +1 -1
  37. package/package.json +3 -2
  38. package/assets/styles/material-overrides.scss +0 -361
package/assets/styles/material-override/_slider.scss ADDED
@@ -0,0 +1,102 @@
1
+ @use "@angular/material" as mat;
2
+ @use "../arm-theme" as theme;
3
+ @use "../variables" as vars;
4
+
5
+ mat-slider.sof-slider {
6
+ &.mat-primary {
7
+ --mdc-slider-handle-color: #{mat.get-color-from-palette(theme.$arm-primary, 500)};
8
+ --mdc-slider-focus-handle-color: #{mat.get-color-from-palette(theme.$arm-primary, 500)};
9
+ --mdc-slider-hover-handle-color: #{mat.get-color-from-palette(theme.$arm-primary, 500)};
10
+ --mdc-slider-active-track-color: #{mat.get-color-from-palette(theme.$arm-primary, 500)};
11
+ --mdc-slider-inactive-track-color: #{mat.get-color-from-palette(theme.$arm-neutral, 500)};
12
+ --mdc-slider-with-tick-marks-inactive-container-color: #{mat.get-color-from-palette(theme.$arm-primary, 500)};
13
+ --mat-mdc-slider-ripple-color: #{mat.get-color-from-palette(theme.$arm-primary, 500)};
14
+ --mat-mdc-slider-hover-ripple-color: rgba(var(--primary-color-500-parts-rgb), 0.05);
15
+ --mat-mdc-slider-focus-ripple-color: rgba(var(--primary-color-500-parts-rgb), 0.2);
16
+ }
17
+
18
+ &.mat-accent {
19
+ --mdc-slider-handle-color: #{mat.get-color-from-palette(theme.$arm-accent, 500)};
20
+ --mdc-slider-focus-handle-color: #{mat.get-color-from-palette(theme.$arm-accent, 500)};
21
+ --mdc-slider-hover-handle-color: #{mat.get-color-from-palette(theme.$arm-accent, 500)};
22
+ --mdc-slider-active-track-color: #{mat.get-color-from-palette(theme.$arm-accent, 500)};
23
+ --mdc-slider-inactive-track-color: #{mat.get-color-from-palette(theme.$arm-neutral, 500)};
24
+ --mdc-slider-with-tick-marks-inactive-container-color: #{mat.get-color-from-palette(theme.$arm-accent, 500)};
25
+ --mat-mdc-slider-ripple-color: #{mat.get-color-from-palette(theme.$arm-accent, 500)};
26
+ --mat-mdc-slider-hover-ripple-color: rgba(var(--accent-color-500-parts-rgb), 0.05);
27
+ --mat-mdc-slider-focus-ripple-color: rgba(var(--accent-color-500-parts-rgb), 0.2);
28
+ }
29
+
30
+ &.mat-warn {
31
+ --mdc-slider-handle-color: #{mat.get-color-from-palette(theme.$arm-warn, 500)};
32
+ --mdc-slider-focus-handle-color: #{mat.get-color-from-palette(theme.$arm-warn, 500)};
33
+ --mdc-slider-hover-handle-color: #{mat.get-color-from-palette(theme.$arm-warn, 500)};
34
+ --mdc-slider-active-track-color: #{mat.get-color-from-palette(theme.$arm-warn, 500)};
35
+ --mdc-slider-inactive-track-color: #{mat.get-color-from-palette(theme.$arm-neutral, 500)};
36
+ --mdc-slider-with-tick-marks-inactive-container-color: #{mat.get-color-from-palette(theme.$arm-warn, 500)};
37
+ --mat-mdc-slider-ripple-color: #{mat.get-color-from-palette(theme.$arm-warn, 500)};
38
+ --mat-mdc-slider-hover-ripple-color: rgba(var(--warn-color-500-parts-rgb), 0.05);
39
+ --mat-mdc-slider-focus-ripple-color: rgba(var(--warn-color-500-parts-rgb), 0.2);
40
+ }
41
+
42
+ &.mat-success {
43
+ --mdc-slider-handle-color: #{mat.get-color-from-palette(theme.$arm-success, 500)};
44
+ --mdc-slider-focus-handle-color: #{mat.get-color-from-palette(theme.$arm-success, 500)};
45
+ --mdc-slider-hover-handle-color: #{mat.get-color-from-palette(theme.$arm-success, 500)};
46
+ --mdc-slider-active-track-color: #{mat.get-color-from-palette(theme.$arm-success, 500)};
47
+ --mdc-slider-inactive-track-color: #{mat.get-color-from-palette(theme.$arm-neutral, 500)};
48
+ --mdc-slider-with-tick-marks-inactive-container-color: #{mat.get-color-from-palette(theme.$arm-success, 500)};
49
+ --mat-mdc-slider-ripple-color: #{mat.get-color-from-palette(theme.$arm-success, 500)};
50
+ --mat-mdc-slider-hover-ripple-color: rgba(var(--success-color-500-parts-rgb), 0.05);
51
+ --mat-mdc-slider-focus-ripple-color: rgba(var(--success-color-500-parts-rgb), 0.2);
52
+ }
53
+
54
+ &.mat-info {
55
+ --mdc-slider-handle-color: #{mat.get-color-from-palette(theme.$arm-info, 500)};
56
+ --mdc-slider-focus-handle-color: #{mat.get-color-from-palette(theme.$arm-info, 500)};
57
+ --mdc-slider-hover-handle-color: #{mat.get-color-from-palette(theme.$arm-info, 500)};
58
+ --mdc-slider-active-track-color: #{mat.get-color-from-palette(theme.$arm-info, 500)};
59
+ --mdc-slider-inactive-track-color: #{mat.get-color-from-palette(theme.$arm-neutral, 500)};
60
+ --mdc-slider-with-tick-marks-inactive-container-color: #{mat.get-color-from-palette(theme.$arm-info, 500)};
61
+ --mat-mdc-slider-ripple-color: #{mat.get-color-from-palette(theme.$arm-info, 500)};
62
+ --mat-mdc-slider-hover-ripple-color: rgba(var(--info-color-500-parts-rgb), 0.05);
63
+ --mat-mdc-slider-focus-ripple-color: rgba(var(--info-color-500-parts-rgb), 0.2);
64
+ }
65
+
66
+ &.mat-error {
67
+ --mdc-slider-handle-color: #{mat.get-color-from-palette(theme.$arm-error, 500)};
68
+ --mdc-slider-focus-handle-color: #{mat.get-color-from-palette(theme.$arm-error, 500)};
69
+ --mdc-slider-hover-handle-color: #{mat.get-color-from-palette(theme.$arm-error, 500)};
70
+ --mdc-slider-active-track-color: #{mat.get-color-from-palette(theme.$arm-error, 500)};
71
+ --mdc-slider-inactive-track-color: #{mat.get-color-from-palette(theme.$arm-neutral, 500)};
72
+ --mdc-slider-with-tick-marks-inactive-container-color: #{mat.get-color-from-palette(theme.$arm-error, 500)};
73
+ --mat-mdc-slider-ripple-color: #{mat.get-color-from-palette(theme.$arm-error, 500)};
74
+ --mat-mdc-slider-hover-ripple-color: rgba(var(--error-color-500-parts-rgb), 0.05);
75
+ --mat-mdc-slider-focus-ripple-color: rgba(var(--error-color-500-parts-rgb), 0.2);
76
+ }
77
+
78
+ &.mat-neutral {
79
+ --mdc-slider-handle-color: #{mat.get-color-from-palette(theme.$arm-neutral, 500)};
80
+ --mdc-slider-focus-handle-color: #{mat.get-color-from-palette(theme.$arm-neutral, 500)};
81
+ --mdc-slider-hover-handle-color: #{mat.get-color-from-palette(theme.$arm-neutral, 500)};
82
+ --mdc-slider-active-track-color: #{mat.get-color-from-palette(theme.$arm-neutral, 500)};
83
+ --mdc-slider-inactive-track-color: #{mat.get-color-from-palette(theme.$arm-neutral, 500)};
84
+ --mdc-slider-with-tick-marks-inactive-container-color: #{mat.get-color-from-palette(theme.$arm-neutral, 500)};
85
+ --mat-mdc-slider-ripple-color: #{mat.get-color-from-palette(theme.$arm-neutral, 500)};
86
+ --mat-mdc-slider-hover-ripple-color: rgba(var(--neutral-color-500-parts-rgb), 0.05);
87
+ --mat-mdc-slider-focus-ripple-color: rgba(var(--neutral-color-500-parts-rgb), 0.2);
88
+ }
89
+
90
+ --mdc-slider-active-track-height: 10px;
91
+ --mdc-slider-inactive-track-height: 10px;
92
+
93
+ &.mat-mdc-slider {
94
+ max-width: 300px;
95
+ width: 100%;
96
+ }
97
+
98
+ .mdc-slider__thumb-knob {
99
+ border-width: 2px !important;
100
+ background-color: vars.$surface-color-default-light !important;
101
+ }
102
+ }
package/assets/styles/material-override/_switch.scss ADDED
@@ -0,0 +1,204 @@
1
+ @use "@angular/material" as mat;
2
+ @use "../arm-theme" as theme;
3
+ @use "../variables" as vars;
4
+
5
+ // @todo: update the use of 'var()' to use '#{mat.get-color-from-palette()}'
6
+
7
+ mat-slide-toggle {
8
+ &.sof-slide-toggle {
9
+ height: auto;
10
+
11
+ .mdc-switch__track {
12
+ height: 22px !important;
13
+ width: 32px !important;
14
+ border-radius: 24px !important;
15
+ }
16
+
17
+ .mdc-switch__handle {
18
+ height: 20px !important;
19
+ width: 20px !important;
20
+ border-radius: 20px !important;
21
+ left: -3px !important;
22
+ border: 1px solid var(--neutral-color-300-parts) !important;
23
+
24
+ .mdc-switch__shadow {
25
+ background: vars.$surface-color-default-light !important;
26
+ }
27
+ }
28
+
29
+ .mdc-switch__ripple {
30
+ height: 0px !important;
31
+ width: 0px !important;
32
+ }
33
+
34
+ label {
35
+ font-family: "Poppins" !important;
36
+ font-style: normal !important;
37
+ font-weight: 400 !important;
38
+ font-size: 14px !important;
39
+ line-height: 150% !important;
40
+ white-space: normal !important;
41
+ flex-direction: row;
42
+ align-items: start !important;
43
+ }
44
+ }
45
+
46
+ &.sof-slide-toggle[size="large"] {
47
+ label {
48
+ font-family: "Poppins" !important;
49
+ font-style: normal !important;
50
+ font-weight: 400 !important;
51
+ font-size: 16px !important;
52
+ line-height: 150% !important;
53
+ white-space: normal !important;
54
+ }
55
+ }
56
+ }
57
+
58
+ mat-slide-toggle.sof-slide-toggle {
59
+ &.mat-primary {
60
+ --mdc-switch-selected-focus-state-layer-color: var(--primary-color-300-parts) !important;
61
+ --mdc-switch-selected-handle-color: var(--primary-color-300-parts) !important;
62
+ --mdc-switch-selected-hover-state-layer-color: var(--primary-color-300-parts) !important;
63
+ --mdc-switch-selected-pressed-state-layer-color: var(--primary-color-300-parts) !important;
64
+ --mdc-switch-selected-focus-handle-color: var(--primary-color-600-parts) !important;
65
+ --mdc-switch-selected-hover-handle-color: var(--primary-color-600-parts) !important;
66
+ --mdc-switch-selected-pressed-handle-color: var(--primary-color-600-parts) !important;
67
+ --mdc-switch-selected-focus-track-color: var(--primary-color-500-parts) !important;
68
+ --mdc-switch-selected-hover-track-color: var(--primary-color-500-parts) !important;
69
+ --mdc-switch-selected-pressed-track-color: var(--primary-color-500-parts) !important;
70
+ --mdc-switch-selected-track-color: var(--primary-color-500-parts) !important;
71
+
72
+ .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
73
+ .mdc-switch__handle {
74
+ border: 1px solid mat.get-color-from-palette(theme.$arm-primary, 500) !important;
75
+ }
76
+ }
77
+ }
78
+
79
+ &.mat-accent {
80
+ --mdc-switch-selected-focus-state-layer-color: var(--accent-color-300-parts) !important;
81
+ --mdc-switch-selected-handle-color: var(--accent-color-300-parts) !important;
82
+ --mdc-switch-selected-hover-state-layer-color: var(--accent-color-300-parts) !important;
83
+ --mdc-switch-selected-pressed-state-layer-color: var(--accent-color-300-parts) !important;
84
+ --mdc-switch-selected-focus-handle-color: var(--accent-color-600-parts) !important;
85
+ --mdc-switch-selected-hover-handle-color: var(--accent-color-600-parts) !important;
86
+ --mdc-switch-selected-pressed-handle-color: var(--accent-color-600-parts) !important;
87
+ --mdc-switch-selected-focus-track-color: var(--accent-color-500-parts) !important;
88
+ --mdc-switch-selected-hover-track-color: var(--accent-color-500-parts) !important;
89
+ --mdc-switch-selected-pressed-track-color: var(--accent-color-500-parts) !important;
90
+ --mdc-switch-selected-track-color: var(--accent-color-500-parts) !important;
91
+
92
+ .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
93
+ .mdc-switch__handle {
94
+ border: 1px solid mat.get-color-from-palette(theme.$arm-accent, 500) !important;
95
+ }
96
+ }
97
+ }
98
+
99
+ &.mat-warn {
100
+ --mdc-switch-selected-focus-state-layer-color: var(--warn-color-300-parts) !important;
101
+ --mdc-switch-selected-handle-color: var(--warn-color-300-parts) !important;
102
+ --mdc-switch-selected-hover-state-layer-color: var(--warn-color-300-parts) !important;
103
+ --mdc-switch-selected-pressed-state-layer-color: var(--warn-color-300-parts) !important;
104
+ --mdc-switch-selected-focus-handle-color: var(--warn-color-600-parts) !important;
105
+ --mdc-switch-selected-hover-handle-color: var(--warn-color-600-parts) !important;
106
+ --mdc-switch-selected-pressed-handle-color: var(--warn-color-600-parts) !important;
107
+ --mdc-switch-selected-focus-track-color: var(--warn-color-500-parts) !important;
108
+ --mdc-switch-selected-hover-track-color: var(--warn-color-500-parts) !important;
109
+ --mdc-switch-selected-pressed-track-color: var(--warn-color-500-parts) !important;
110
+ --mdc-switch-selected-track-color: var(--warn-color-500-parts) !important;
111
+
112
+ .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
113
+ .mdc-switch__handle {
114
+ border: 1px solid mat.get-color-from-palette(theme.$arm-warn, 500) !important;
115
+ }
116
+ }
117
+ }
118
+
119
+ &.mat-success {
120
+ --mdc-switch-selected-focus-state-layer-color: var(--success-color-300-parts) !important;
121
+ --mdc-switch-selected-handle-color: var(--success-color-300-parts) !important;
122
+ --mdc-switch-selected-hover-state-layer-color: var(--success-color-300-parts) !important;
123
+ --mdc-switch-selected-pressed-state-layer-color: var(--success-color-300-parts) !important;
124
+ --mdc-switch-selected-focus-handle-color: var(--success-color-600-parts) !important;
125
+ --mdc-switch-selected-hover-handle-color: var(--success-color-600-parts) !important;
126
+ --mdc-switch-selected-pressed-handle-color: var(--success-color-600-parts) !important;
127
+ --mdc-switch-selected-focus-track-color: var(--success-color-500-parts) !important;
128
+ --mdc-switch-selected-hover-track-color: var(--success-color-500-parts) !important;
129
+ --mdc-switch-selected-pressed-track-color: var(--success-color-500-parts) !important;
130
+ --mdc-switch-selected-track-color: var(--success-color-500-parts) !important;
131
+
132
+ .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
133
+ .mdc-switch__handle {
134
+ border: 1px solid mat.get-color-from-palette(theme.$arm-success, 500) !important;
135
+ }
136
+ }
137
+ }
138
+
139
+ &.mat-error {
140
+ --mdc-switch-selected-focus-state-layer-color: var(--error-color-300-parts) !important;
141
+ --mdc-switch-selected-handle-color: var(--error-color-300-parts) !important;
142
+ --mdc-switch-selected-hover-state-layer-color: var(--error-color-300-parts) !important;
143
+ --mdc-switch-selected-pressed-state-layer-color: var(--error-color-300-parts) !important;
144
+ --mdc-switch-selected-focus-handle-color: var(--error-color-600-parts) !important;
145
+ --mdc-switch-selected-hover-handle-color: var(--error-color-600-parts) !important;
146
+ --mdc-switch-selected-pressed-handle-color: var(--error-color-600-parts) !important;
147
+ --mdc-switch-selected-focus-track-color: var(--error-color-500-parts) !important;
148
+ --mdc-switch-selected-hover-track-color: var(--error-color-500-parts) !important;
149
+ --mdc-switch-selected-pressed-track-color: var(--error-color-500-parts) !important;
150
+ --mdc-switch-selected-track-color: var(--error-color-500-parts) !important;
151
+
152
+ .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
153
+ .mdc-switch__handle {
154
+ border: 1px solid mat.get-color-from-palette(theme.$arm-error, 500) !important;
155
+ }
156
+ }
157
+ }
158
+
159
+ &.mat-info {
160
+ --mdc-switch-selected-focus-state-layer-color: var(--info-color-300-parts) !important;
161
+ --mdc-switch-selected-handle-color: var(--info-color-300-parts) !important;
162
+ --mdc-switch-selected-hover-state-layer-color: var(--info-color-300-parts) !important;
163
+ --mdc-switch-selected-pressed-state-layer-color: var(--info-color-300-parts) !important;
164
+ --mdc-switch-selected-focus-handle-color: var(--info-color-600-parts) !important;
165
+ --mdc-switch-selected-hover-handle-color: var(--info-color-600-parts) !important;
166
+ --mdc-switch-selected-pressed-handle-color: var(--info-color-600-parts) !important;
167
+ --mdc-switch-selected-focus-track-color: var(--info-color-500-parts) !important;
168
+ --mdc-switch-selected-hover-track-color: var(--info-color-500-parts) !important;
169
+ --mdc-switch-selected-pressed-track-color: var(--info-color-500-parts) !important;
170
+ --mdc-switch-selected-track-color: var(--info-color-500-parts) !important;
171
+
172
+ .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
173
+ .mdc-switch__handle {
174
+ border: 1px solid mat.get-color-from-palette(theme.$arm-info, 500) !important;
175
+ }
176
+ }
177
+ }
178
+
179
+ &.mat-neutral {
180
+ --mdc-switch-selected-focus-state-layer-color: var(--neutral-color-300-parts) !important;
181
+ --mdc-switch-selected-handle-color: var(--neutral-color-300-parts) !important;
182
+ --mdc-switch-selected-hover-state-layer-color: var(--neutral-color-300-parts) !important;
183
+ --mdc-switch-selected-pressed-state-layer-color: var(--neutral-color-300-parts) !important;
184
+ --mdc-switch-selected-focus-handle-color: var(--neutral-color-600-parts) !important;
185
+ --mdc-switch-selected-hover-handle-color: var(--neutral-color-600-parts) !important;
186
+ --mdc-switch-selected-pressed-handle-color: var(--neutral-color-600-parts) !important;
187
+ --mdc-switch-selected-focus-track-color: var(--neutral-color-500-parts) !important;
188
+ --mdc-switch-selected-hover-track-color: var(--neutral-color-500-parts) !important;
189
+ --mdc-switch-selected-pressed-track-color: var(--neutral-color-500-parts) !important;
190
+ --mdc-switch-selected-track-color: var(--neutral-color-500-parts) !important;
191
+
192
+ .mdc-switch.mdc-switch--selected:not(.mdc-switch.mdc-switch--disabled) {
193
+ .mdc-switch__handle {
194
+ border: 1px solid vars.$text-high-emphasis !important;
195
+ }
196
+ }
197
+ }
198
+ }
199
+
200
+ mat-slide-toggle.sof-slide-toggle {
201
+ &:has(.mdc-switch--disabled) label {
202
+ color: vars.$text-high-emphasis !important;
203
+ }
204
+ }
package/assets/styles/material-override/_tooltip.scss ADDED
@@ -0,0 +1,2 @@
1
+
2
+ // placeholder for upcoming tippy.js styles ...