ngx-strata 0.4.4 → 0.5.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 (26) hide show
  1. package/assets/styles/components/avatar.scss +42 -2
  2. package/assets/styles/components/checkbox.scss +66 -5
  3. package/assets/styles/components/file-upload.scss +52 -0
  4. package/assets/styles/components/input-field.scss +92 -43
  5. package/assets/styles/components/radio.scss +59 -4
  6. package/assets/styles/components/segmented-control.scss +79 -23
  7. package/assets/styles/components/select.scss +54 -1
  8. package/assets/styles/components/sidemenu.scss +14 -0
  9. package/assets/styles/components/slider.scss +67 -1
  10. package/assets/styles/components/table.scss +2 -2
  11. package/assets/styles/components/toggle.scss +59 -4
  12. package/dist/strata/strata.css +1 -1
  13. package/fesm2022/ngx-strata.mjs +332 -62
  14. package/fesm2022/ngx-strata.mjs.map +1 -1
  15. package/package.json +1 -1
  16. package/skills/ngx-strata/components/card.md +1 -1
  17. package/skills/ngx-strata/components/checkbox.md +4 -0
  18. package/skills/ngx-strata/components/file-upload.md +4 -0
  19. package/skills/ngx-strata/components/input-field.md +9 -3
  20. package/skills/ngx-strata/components/otp.md +2 -0
  21. package/skills/ngx-strata/components/radio.md +8 -0
  22. package/skills/ngx-strata/components/segmented-control.md +4 -0
  23. package/skills/ngx-strata/components/single-select.md +4 -0
  24. package/skills/ngx-strata/components/slider.md +4 -0
  25. package/skills/ngx-strata/components/toggle.md +4 -0
  26. package/types/ngx-strata.d.ts +101 -13
package/assets/styles/components/segmented-control.scss CHANGED
@@ -4,29 +4,27 @@ st-segmented-control {
4
4
  --st-segmented-control-font-size: 14px;
5
5
  --st-segmented-control-padding-x: var(--st-size-xxs);
6
6
  --st-segmented-control-border-radius: var(--st-border-radius-md);
7
+ --st-segmented-control-border-color: transparent;
8
+ --st-segmented-control-error-border: var(--st-color-feedback-error-default);
9
+ --st-segmented-control-success-border: var(--st-color-feedback-success-default);
10
+ --st-segmented-control-warning-border: var(--st-color-feedback-warning-default);
7
11
 
8
12
  display: inline-flex;
9
- flex-direction: row;
10
- flex-wrap: nowrap;
11
- overflow-x: auto;
13
+ flex-direction: column;
12
14
  width: fit-content;
13
15
  max-width: 100%;
14
- min-width: 0;
15
- position: relative;
16
- border-radius: var(--st-segmented-control-border-radius);
17
16
  box-sizing: border-box;
18
- background-color: var(--st-color-bg-raised);
19
- height: var(--st-segmented-control-height);
20
- padding: 4px;
21
- gap: 4px;
22
17
 
23
18
  &.st-size-sm {
24
19
  --st-segmented-control-height: var(--st-interactive-element-height-sm);
25
20
  --st-segmented-control-item-height: calc(var(--st-segmented-control-height) - 4px);
26
21
  --st-segmented-control-font-size: 12px;
27
22
  --st-segmented-control-padding-x: var(--st-size-xxxs);
28
- padding: 2px;
29
- gap: 2px;
23
+
24
+ .st-segmented-control-track {
25
+ padding: 2px;
26
+ gap: 2px;
27
+ }
30
28
  }
31
29
 
32
30
  &.st-size-md {
@@ -34,8 +32,11 @@ st-segmented-control {
34
32
  --st-segmented-control-item-height: calc(var(--st-segmented-control-height) - 8px);
35
33
  --st-segmented-control-font-size: 14px;
36
34
  --st-segmented-control-padding-x: var(--st-size-xxs);
37
- padding: 4px;
38
- gap: 4px;
35
+
36
+ .st-segmented-control-track {
37
+ padding: 4px;
38
+ gap: 4px;
39
+ }
39
40
  }
40
41
 
41
42
  &.st-size-lg {
@@ -43,23 +44,60 @@ st-segmented-control {
43
44
  --st-segmented-control-item-height: calc(var(--st-segmented-control-height) - 8px);
44
45
  --st-segmented-control-font-size: 16px;
45
46
  --st-segmented-control-padding-x: var(--st-size-xs);
47
+
48
+ .st-segmented-control-track {
49
+ padding: 4px;
50
+ gap: 4px;
51
+ }
52
+ }
53
+
54
+ &.st-state-error {
55
+ --st-segmented-control-border-color: var(--st-segmented-control-error-border);
56
+ }
57
+
58
+ &.st-state-success {
59
+ --st-segmented-control-border-color: var(--st-segmented-control-success-border);
60
+ }
61
+
62
+ &.st-state-warning {
63
+ --st-segmented-control-border-color: var(--st-segmented-control-warning-border);
64
+ }
65
+
66
+ .st-segmented-control-track {
67
+ display: inline-flex;
68
+ flex-direction: row;
69
+ flex-wrap: nowrap;
70
+ overflow-x: auto;
71
+ width: fit-content;
72
+ max-width: 100%;
73
+ min-width: 0;
74
+ position: relative;
75
+ border-radius: var(--st-segmented-control-border-radius);
76
+ border: 1px solid var(--st-segmented-control-border-color);
77
+ box-sizing: border-box;
78
+ background-color: var(--st-color-bg-raised);
79
+ height: var(--st-segmented-control-height);
46
80
  padding: 4px;
47
81
  gap: 4px;
48
- }
82
+ transition: border-color var(--st-transition-fast);
49
83
 
50
- /* Hide scrollbar */
51
- -ms-overflow-style: none;
52
- scrollbar-width: none;
53
- &::-webkit-scrollbar {
54
- display: none;
84
+ -ms-overflow-style: none;
85
+ scrollbar-width: none;
86
+ &::-webkit-scrollbar {
87
+ display: none;
88
+ }
55
89
  }
56
90
 
57
91
  &.st-segmented-control-full-width {
58
- display: flex;
59
92
  width: 100%;
60
93
 
61
- st-segmented-control-item {
62
- flex: 1;
94
+ .st-segmented-control-track {
95
+ display: flex;
96
+ width: 100%;
97
+
98
+ st-segmented-control-item {
99
+ flex: 1;
100
+ }
63
101
  }
64
102
  }
65
103
 
@@ -114,4 +152,22 @@ st-segmented-control {
114
152
  left var(--st-transition-fast),
115
153
  width var(--st-transition-fast);
116
154
  }
155
+
156
+ .st-segmented-control-message {
157
+ margin-top: var(--st-space-1);
158
+ font-size: var(--st-font-size-sm, 12px);
159
+ color: var(--st-color-text-secondary);
160
+
161
+ &.st-message-error {
162
+ color: var(--st-color-feedback-error-text);
163
+ }
164
+
165
+ &.st-message-success {
166
+ color: var(--st-color-feedback-success-text);
167
+ }
168
+
169
+ &.st-message-warning {
170
+ color: var(--st-color-feedback-warning-text);
171
+ }
172
+ }
117
173
  }
package/assets/styles/components/select.scss CHANGED
@@ -67,7 +67,7 @@ st-single-select {
67
67
  }
68
68
 
69
69
  &.disabled {
70
- opacity: 0.5;
70
+ opacity: 0.55;
71
71
  pointer-events: none;
72
72
  cursor: not-allowed;
73
73
  }
@@ -117,6 +117,59 @@ st-single-select {
117
117
  }
118
118
  }
119
119
  }
120
+
121
+ &.st-state-error,
122
+ &.st-error {
123
+ .single-select-input {
124
+ border-color: var(--st-color-feedback-error-default);
125
+
126
+ &:focus-visible,
127
+ &[data-open='true'] {
128
+ outline: var(--st-focus-ring-width) var(--st-focus-ring-style) var(--st-color-feedback-error-default);
129
+ }
130
+ }
131
+ }
132
+
133
+ &.st-state-success {
134
+ .single-select-input {
135
+ border-color: var(--st-color-feedback-success-default);
136
+
137
+ &:focus-visible,
138
+ &[data-open='true'] {
139
+ outline: var(--st-focus-ring-width) var(--st-focus-ring-style) var(--st-color-feedback-success-default);
140
+ }
141
+ }
142
+ }
143
+
144
+ &.st-state-warning {
145
+ .single-select-input {
146
+ border-color: var(--st-color-feedback-warning-default);
147
+
148
+ &:focus-visible,
149
+ &[data-open='true'] {
150
+ outline: var(--st-focus-ring-width) var(--st-focus-ring-style) var(--st-color-feedback-warning-default);
151
+ }
152
+ }
153
+ }
154
+
155
+ .st-select-message {
156
+ margin-top: var(--st-space-1);
157
+ font-size: var(--st-font-sm, 12px);
158
+ color: var(--st-color-text-secondary);
159
+ line-height: 1.25;
160
+
161
+ &.st-message-error {
162
+ color: var(--st-color-feedback-error-text);
163
+ }
164
+
165
+ &.st-message-success {
166
+ color: var(--st-color-feedback-success-text);
167
+ }
168
+
169
+ &.st-message-warning {
170
+ color: var(--st-color-feedback-warning-text);
171
+ }
172
+ }
120
173
  }
121
174
 
122
175
  .single-select-selector {
package/assets/styles/components/sidemenu.scss CHANGED
@@ -61,9 +61,23 @@ st-sidemenu {
61
61
  align-items: center;
62
62
  justify-content: center;
63
63
  width: var(--st-sidemenu-item-visual-width);
64
+ min-width: var(--st-sidemenu-item-visual-width);
65
+ max-width: var(--st-sidemenu-item-visual-width);
64
66
  height: var(--st-sidemenu-item-visual-width);
67
+ min-height: var(--st-sidemenu-item-visual-width);
68
+ max-height: var(--st-sidemenu-item-visual-width);
65
69
  --st-icon-size: var(--st-sidemenu-item-icon-size);
66
70
  flex-shrink: 0;
71
+
72
+ span {
73
+ display: flex;
74
+ align-items: center;
75
+ justify-content: center;
76
+ width: var(--st-icon-size);
77
+ height: var(--st-icon-size);
78
+ max-width: var(--st-icon-size);
79
+ max-height: var(--st-icon-size);
80
+ }
67
81
  }
68
82
 
69
83
  st-avatar {
package/assets/styles/components/slider.scss CHANGED
@@ -1,13 +1,15 @@
1
1
  st-slider {
2
2
  --st-slider-track-height: var(--st-size-xxs);
3
3
  --st-slider-track-color: var(--st-color-bg-raised);
4
+ --st-slider-track-border-color: transparent;
4
5
  --st-slider-thumb-size: var(--st-size-sm);
5
6
  --st-slider-thumb-color: var(--st-color-text-primary);
7
+ --st-slider-thumb-ring-color: transparent;
6
8
  --st-slider-tick-color: var(--st-border);
7
9
  --st-slider-tick-width: 1px;
8
10
  --st-slider-track-border-radius: var(--st-border-radius-xs);
9
11
  width: 100%;
10
- height: var(--st-slider-thumb-size);
12
+ min-height: var(--st-slider-thumb-size);
11
13
  display: block;
12
14
 
13
15
  &.st-disabled,
@@ -44,6 +46,8 @@ st-slider {
44
46
  height: var(--st-slider-track-height);
45
47
  border-radius: var(--st-slider-track-border-radius);
46
48
  background-color: var(--st-slider-track-color);
49
+ border: 1px solid var(--st-slider-track-border-color);
50
+ box-sizing: border-box;
47
51
  }
48
52
 
49
53
  .range-wrapper input[type='range']::-moz-range-track {
@@ -53,6 +57,8 @@ st-slider {
53
57
  height: var(--st-slider-track-height);
54
58
  border-radius: var(--st-slider-track-border-radius);
55
59
  background-color: var(--st-slider-track-color);
60
+ border: 1px solid var(--st-slider-track-border-color);
61
+ box-sizing: border-box;
56
62
  }
57
63
 
58
64
  .range-wrapper.stepped input[type='range']::-webkit-slider-runnable-track {
@@ -112,6 +118,8 @@ st-slider {
112
118
  border-radius: 50%;
113
119
  height: var(--st-slider-thumb-size);
114
120
  width: var(--st-slider-thumb-size);
121
+ box-shadow: 0 0 0 2px var(--st-slider-thumb-ring-color);
122
+ transition: box-shadow var(--st-transition-fast);
115
123
  }
116
124
 
117
125
  input[type='range']::-moz-range-thumb {
@@ -124,6 +132,8 @@ st-slider {
124
132
  border-radius: 50%;
125
133
  height: var(--st-slider-thumb-size);
126
134
  width: var(--st-slider-thumb-size);
135
+ box-shadow: 0 0 0 2px var(--st-slider-thumb-ring-color);
136
+ transition: box-shadow var(--st-transition-fast);
127
137
  }
128
138
 
129
139
  input[type='range']:focus::-moz-range-thumb {
@@ -152,4 +162,60 @@ st-slider {
152
162
  input[type='range']:focus {
153
163
  outline: none;
154
164
  }
165
+
166
+ &.st-state-error,
167
+ &.st-error {
168
+ --st-slider-track-border-color: var(--st-color-feedback-error-default);
169
+ --st-slider-thumb-ring-color: var(--st-color-feedback-error-default);
170
+
171
+ input[type='range']:focus::-webkit-slider-thumb {
172
+ outline-color: var(--st-color-feedback-error-default);
173
+ }
174
+ input[type='range']:focus::-moz-range-thumb {
175
+ outline-color: var(--st-color-feedback-error-default);
176
+ }
177
+ }
178
+
179
+ &.st-state-success {
180
+ --st-slider-track-border-color: var(--st-color-feedback-success-default);
181
+ --st-slider-thumb-ring-color: var(--st-color-feedback-success-default);
182
+
183
+ input[type='range']:focus::-webkit-slider-thumb {
184
+ outline-color: var(--st-color-feedback-success-default);
185
+ }
186
+ input[type='range']:focus::-moz-range-thumb {
187
+ outline-color: var(--st-color-feedback-success-default);
188
+ }
189
+ }
190
+
191
+ &.st-state-warning {
192
+ --st-slider-track-border-color: var(--st-color-feedback-warning-default);
193
+ --st-slider-thumb-ring-color: var(--st-color-feedback-warning-default);
194
+
195
+ input[type='range']:focus::-webkit-slider-thumb {
196
+ outline-color: var(--st-color-feedback-warning-default);
197
+ }
198
+ input[type='range']:focus::-moz-range-thumb {
199
+ outline-color: var(--st-color-feedback-warning-default);
200
+ }
201
+ }
202
+
203
+ .st-slider-message {
204
+ margin-top: var(--st-space-1);
205
+ font-size: var(--st-font-sm, 12px);
206
+ color: var(--st-color-text-secondary);
207
+ line-height: 1.25;
208
+
209
+ &.st-message-error {
210
+ color: var(--st-color-feedback-error-text);
211
+ }
212
+
213
+ &.st-message-success {
214
+ color: var(--st-color-feedback-success-text);
215
+ }
216
+
217
+ &.st-message-warning {
218
+ color: var(--st-color-feedback-warning-text);
219
+ }
220
+ }
155
221
  }
package/assets/styles/components/table.scss CHANGED
@@ -62,8 +62,8 @@ table.st-table {
62
62
 
63
63
  st-card {
64
64
  &.with-padding table.st-table {
65
- margin: calc(var(--st-size-xs) * -1);
66
- width: calc(var(--st-size-xs) + var(--st-size-xs) + 100%);
65
+ margin: calc(var(--st-card-padding) * -1);
66
+ width: calc(var(--st-card-padding) + var(--st-card-padding) + 100%);
67
67
  }
68
68
 
69
69
  &:not(.outline) table.st-table {
package/assets/styles/components/toggle.scss CHANGED
@@ -10,17 +10,27 @@ st-toggle {
10
10
  --st-toggle-handle-bg: var(--st-color-neutral-50);
11
11
  --st-toggle-border-radius: var(--st-border-radius-md);
12
12
  --st-toggle-handle-radius: var(--st-border-radius-xs);
13
+ --st-toggle-border-color: transparent;
13
14
 
14
15
  display: inline-flex;
15
- align-items: center;
16
+ flex-direction: column;
17
+ align-items: flex-start;
16
18
  min-height: var(--st-interactive-element-height-md);
17
- gap: var(--st-toggle-gap);
18
19
  cursor: pointer;
19
20
  user-select: none;
20
21
  box-sizing: border-box;
21
22
 
23
+ .st-toggle-row {
24
+ display: inline-flex;
25
+ align-items: center;
26
+ gap: var(--st-toggle-gap);
27
+ min-height: var(--st-interactive-element-height-md);
28
+ }
29
+
22
30
  &.st-toggle-label-before {
23
- flex-direction: row-reverse;
31
+ .st-toggle-row {
32
+ flex-direction: row-reverse;
33
+ }
24
34
  }
25
35
 
26
36
  &:focus-visible {
@@ -44,8 +54,9 @@ st-toggle {
44
54
  width: var(--st-toggle-width);
45
55
  padding: var(--st-toggle-padding);
46
56
  background-color: var(--st-toggle-bg-unchecked);
57
+ border: 1px solid var(--st-toggle-border-color);
47
58
  border-radius: var(--st-toggle-border-radius);
48
- transition: background-color 0.2s ease;
59
+ transition: background-color 0.2s ease, border-color 0.2s ease;
49
60
  }
50
61
 
51
62
  .st-toggle-label {
@@ -90,4 +101,48 @@ st-toggle {
90
101
  cursor: not-allowed;
91
102
  opacity: 0.5;
92
103
  }
104
+
105
+ &.st-state-error,
106
+ &.st-error {
107
+ --st-toggle-border-color: var(--st-color-feedback-error-default);
108
+
109
+ &:focus-visible .st-toggle-track {
110
+ outline-color: var(--st-color-feedback-error-default);
111
+ }
112
+ }
113
+
114
+ &.st-state-success {
115
+ --st-toggle-border-color: var(--st-color-feedback-success-default);
116
+
117
+ &:focus-visible .st-toggle-track {
118
+ outline-color: var(--st-color-feedback-success-default);
119
+ }
120
+ }
121
+
122
+ &.st-state-warning {
123
+ --st-toggle-border-color: var(--st-color-feedback-warning-default);
124
+
125
+ &:focus-visible .st-toggle-track {
126
+ outline-color: var(--st-color-feedback-warning-default);
127
+ }
128
+ }
129
+
130
+ .st-toggle-message {
131
+ margin-top: var(--st-space-1);
132
+ font-size: var(--st-font-sm, 12px);
133
+ color: var(--st-color-text-secondary);
134
+ line-height: 1.25;
135
+
136
+ &.st-message-error {
137
+ color: var(--st-color-feedback-error-text);
138
+ }
139
+
140
+ &.st-message-success {
141
+ color: var(--st-color-feedback-success-text);
142
+ }
143
+
144
+ &.st-message-warning {
145
+ color: var(--st-color-feedback-warning-text);
146
+ }
147
+ }
93
148
  }